@material/web 2.2.1-nightly.e217185.0 → 2.3.0

package/labs/behaviors/custom-state-set.d.ts

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+import { WithElementInternals } from './element-internals.js';
+import { MixinBase, MixinReturn } from './mixin.js';
+/**
+ * A unique symbol used to check if an element's `CustomStateSet` has a state.
+ *
+ * Provides compatibility with legacy dashed identifier syntax (`:--state`) used
+ * by the element-internals-polyfill for Chrome extension support.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));
+ *
+ * class MyElement extends baseClass {
+ *   get checked() {
+ *     return this[hasState]('checked');
+ *   }
+ *   set checked(value: boolean) {
+ *     this[toggleState]('checked', value);
+ *   }
+ * }
+ * ```
+ */
+export declare const hasState: unique symbol;
+/**
+ * A unique symbol used to add or delete a state from an element's
+ * `CustomStateSet`.
+ *
+ * Provides compatibility with legacy dashed identifier syntax (`:--state`) used
+ * by the element-internals-polyfill for Chrome extension support.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));
+ *
+ * class MyElement extends baseClass {
+ *   get checked() {
+ *     return this[hasState]('checked');
+ *   }
+ *   set checked(value: boolean) {
+ *     this[toggleState]('checked', value);
+ *   }
+ * }
+ * ```
+ */
+export declare const toggleState: unique symbol;
+/**
+ * An instance with `[hasState]()` and `[toggleState]()` symbol functions that
+ * provide compatibility with `CustomStateSet` legacy dashed identifier syntax,
+ * used by the element-internals-polyfill and needed for Chrome extension
+ * compatibility.
+ */
+export interface WithCustomStateSet {
+    /**
+     * Checks if the state is active, returning true if the element matches
+     * `:state(customstate)`.
+     *
+     * @param customState the `CustomStateSet` state to check. Do not use the
+     *     `--customstate` dashed identifier syntax.
+     * @return true if the custom state is active, or false if not.
+     */
+    [hasState](customState: string): boolean;
+    /**
+     * Toggles the state to be active or inactive based on the provided value.
+     * When active, the element matches `:state(customstate)`.
+     *
+     * @param customState the `CustomStateSet` state to check. Do not use the
+     *     `--customstate` dashed identifier syntax.
+     * @param isActive true to add the state, or false to delete it.
+     */
+    [toggleState](customState: string, isActive: boolean): void;
+}
+/**
+ * Mixes in compatibility functions for access to an element's `CustomStateSet`.
+ *
+ * Use this mixin's `[hasState]()` and `[toggleState]()` symbol functions for
+ * compatibility with `CustomStateSet` legacy dashed identifier syntax.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#compatibility_with_dashed-ident_syntax.
+ *
+ * The dashed identifier syntax is needed for element-internals-polyfill, a
+ * requirement for Chome extension compatibility.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));
+ *
+ * class MyElement extends baseClass {
+ *   get checked() {
+ *     return this[hasState]('checked');
+ *   }
+ *   set checked(value: boolean) {
+ *     this[toggleState]('checked', value);
+ *   }
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `[hasState]()` and `[toggleState]()`
+ *     functions mixed in.
+ */
+export declare function mixinCustomStateSet<T extends MixinBase<LitElement & WithElementInternals>>(base: T): MixinReturn<T, WithCustomStateSet>;

package/labs/behaviors/custom-state-set.js

@@ -0,0 +1,121 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { internals } from './element-internals.js';
+/**
+ * A unique symbol used to check if an element's `CustomStateSet` has a state.
+ *
+ * Provides compatibility with legacy dashed identifier syntax (`:--state`) used
+ * by the element-internals-polyfill for Chrome extension support.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));
+ *
+ * class MyElement extends baseClass {
+ *   get checked() {
+ *     return this[hasState]('checked');
+ *   }
+ *   set checked(value: boolean) {
+ *     this[toggleState]('checked', value);
+ *   }
+ * }
+ * ```
+ */
+export const hasState = Symbol('hasState');
+/**
+ * A unique symbol used to add or delete a state from an element's
+ * `CustomStateSet`.
+ *
+ * Provides compatibility with legacy dashed identifier syntax (`:--state`) used
+ * by the element-internals-polyfill for Chrome extension support.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));
+ *
+ * class MyElement extends baseClass {
+ *   get checked() {
+ *     return this[hasState]('checked');
+ *   }
+ *   set checked(value: boolean) {
+ *     this[toggleState]('checked', value);
+ *   }
+ * }
+ * ```
+ */
+export const toggleState = Symbol('toggleState');
+// Private symbols
+const privateUseDashedIdentifier = Symbol('privateUseDashedIdentifier');
+const privateGetStateIdentifier = Symbol('privateGetStateIdentifier');
+/**
+ * Mixes in compatibility functions for access to an element's `CustomStateSet`.
+ *
+ * Use this mixin's `[hasState]()` and `[toggleState]()` symbol functions for
+ * compatibility with `CustomStateSet` legacy dashed identifier syntax.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#compatibility_with_dashed-ident_syntax.
+ *
+ * The dashed identifier syntax is needed for element-internals-polyfill, a
+ * requirement for Chome extension compatibility.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));
+ *
+ * class MyElement extends baseClass {
+ *   get checked() {
+ *     return this[hasState]('checked');
+ *   }
+ *   set checked(value: boolean) {
+ *     this[toggleState]('checked', value);
+ *   }
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `[hasState]()` and `[toggleState]()`
+ *     functions mixed in.
+ */
+export function mixinCustomStateSet(base) {
+    var _a;
+    class WithCustomStateSetElement extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = null;
+        }
+        [hasState](state) {
+            state = this[privateGetStateIdentifier](state);
+            return this[internals].states.has(state);
+        }
+        [toggleState](state, isActive) {
+            state = this[privateGetStateIdentifier](state);
+            if (isActive) {
+                this[internals].states.add(state);
+            }
+            else {
+                this[internals].states.delete(state);
+            }
+        }
+        [(_a = privateUseDashedIdentifier, privateGetStateIdentifier)](state) {
+            if (this[privateUseDashedIdentifier] === null) {
+                // Check if `--state-string` needs to be used. See
+                // https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#compatibility_with_dashed-ident_syntax
+                try {
+                    const testState = '_test';
+                    this[internals].states.add(testState);
+                    this[internals].states.delete(testState);
+                    this[privateUseDashedIdentifier] = false;
+                }
+                catch {
+                    this[privateUseDashedIdentifier] = true;
+                }
+            }
+            return this[privateUseDashedIdentifier] ? `--${state}` : state;
+        }
+    }
+    return WithCustomStateSetElement;
+}
+//# sourceMappingURL=custom-state-set.js.map

package/labs/behaviors/custom-state-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-state-set.js","sourceRoot":"","sources":["custom-state-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,SAAS,EAAuB,MAAM,wBAAwB,CAAC;AAGvE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;AA8BjD,kBAAkB;AAClB,MAAM,0BAA0B,GAAG,MAAM,CAAC,4BAA4B,CAAC,CAAC;AACxE,MAAM,yBAAyB,GAAG,MAAM,CAAC,2BAA2B,CAAC,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,mBAAmB,CAEjC,IAAO;;IACP,MAAe,yBACb,SAAQ,IAAI;QADd;;YAkBE,QAA4B,GAAmB,IAAI,CAAC;QAkBtD,CAAC;QAhCC,CAAC,QAAQ,CAAC,CAAC,KAAa;YACtB,KAAK,GAAG,IAAI,CAAC,yBAAyB,CAAC,CAAC,KAAK,CAAC,CAAC;YAC/C,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC;QAED,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,QAAiB;YAC5C,KAAK,GAAG,IAAI,CAAC,yBAAyB,CAAC,CAAC,KAAK,CAAC,CAAC;YAC/C,IAAI,QAAQ,EAAE,CAAC;gBACb,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACpC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;QAID,OAFC,0BAA0B,EAE1B,yBAAyB,EAAC,CAAC,KAAa;YACvC,IAAI,IAAI,CAAC,0BAA0B,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC9C,kDAAkD;gBAClD,yGAAyG;gBACzG,IAAI,CAAC;oBACH,MAAM,SAAS,GAAG,OAAO,CAAC;oBAC1B,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;oBACtC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;oBACzC,IAAI,CAAC,0BAA0B,CAAC,GAAG,KAAK,CAAC;gBAC3C,CAAC;gBAAC,MAAM,CAAC;oBACP,IAAI,CAAC,0BAA0B,CAAC,GAAG,IAAI,CAAC;gBAC1C,CAAC;YACH,CAAC;YAED,OAAO,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;QACjE,CAAC;KACF;IAED,OAAO,yBAAyB,CAAC;AACnC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {internals, WithElementInternals} from './element-internals.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\n\n/**\n * A unique symbol used to check if an element's `CustomStateSet` has a state.\n *\n * Provides compatibility with legacy dashed identifier syntax (`:--state`) used\n * by the element-internals-polyfill for Chrome extension support.\n *\n * @example\n * ```ts\n * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));\n *\n * class MyElement extends baseClass {\n *   get checked() {\n *     return this[hasState]('checked');\n *   }\n *   set checked(value: boolean) {\n *     this[toggleState]('checked', value);\n *   }\n * }\n * ```\n */\nexport const hasState = Symbol('hasState');\n\n/**\n * A unique symbol used to add or delete a state from an element's\n * `CustomStateSet`.\n *\n * Provides compatibility with legacy dashed identifier syntax (`:--state`) used\n * by the element-internals-polyfill for Chrome extension support.\n *\n * @example\n * ```ts\n * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));\n *\n * class MyElement extends baseClass {\n *   get checked() {\n *     return this[hasState]('checked');\n *   }\n *   set checked(value: boolean) {\n *     this[toggleState]('checked', value);\n *   }\n * }\n * ```\n */\nexport const toggleState = Symbol('toggleState');\n\n/**\n * An instance with `[hasState]()` and `[toggleState]()` symbol functions that\n * provide compatibility with `CustomStateSet` legacy dashed identifier syntax,\n * used by the element-internals-polyfill and needed for Chrome extension\n * compatibility.\n */\nexport interface WithCustomStateSet {\n  /**\n   * Checks if the state is active, returning true if the element matches\n   * `:state(customstate)`.\n   *\n   * @param customState the `CustomStateSet` state to check. Do not use the\n   *     `--customstate` dashed identifier syntax.\n   * @return true if the custom state is active, or false if not.\n   */\n  [hasState](customState: string): boolean;\n\n  /**\n   * Toggles the state to be active or inactive based on the provided value.\n   * When active, the element matches `:state(customstate)`.\n   *\n   * @param customState the `CustomStateSet` state to check. Do not use the\n   *     `--customstate` dashed identifier syntax.\n   * @param isActive true to add the state, or false to delete it.\n   */\n  [toggleState](customState: string, isActive: boolean): void;\n}\n\n// Private symbols\nconst privateUseDashedIdentifier = Symbol('privateUseDashedIdentifier');\nconst privateGetStateIdentifier = Symbol('privateGetStateIdentifier');\n\n/**\n * Mixes in compatibility functions for access to an element's `CustomStateSet`.\n *\n * Use this mixin's `[hasState]()` and `[toggleState]()` symbol functions for\n * compatibility with `CustomStateSet` legacy dashed identifier syntax.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#compatibility_with_dashed-ident_syntax.\n *\n * The dashed identifier syntax is needed for element-internals-polyfill, a\n * requirement for Chome extension compatibility.\n *\n * @example\n * ```ts\n * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));\n *\n * class MyElement extends baseClass {\n *   get checked() {\n *     return this[hasState]('checked');\n *   }\n *   set checked(value: boolean) {\n *     this[toggleState]('checked', value);\n *   }\n * }\n * ```\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `[hasState]()` and `[toggleState]()`\n *     functions mixed in.\n */\nexport function mixinCustomStateSet<\n  T extends MixinBase<LitElement & WithElementInternals>,\n>(base: T): MixinReturn<T, WithCustomStateSet> {\n  abstract class WithCustomStateSetElement\n    extends base\n    implements WithCustomStateSet\n  {\n    [hasState](state: string) {\n      state = this[privateGetStateIdentifier](state);\n      return this[internals].states.has(state);\n    }\n\n    [toggleState](state: string, isActive: boolean) {\n      state = this[privateGetStateIdentifier](state);\n      if (isActive) {\n        this[internals].states.add(state);\n      } else {\n        this[internals].states.delete(state);\n      }\n    }\n\n    [privateUseDashedIdentifier]: boolean | null = null;\n\n    [privateGetStateIdentifier](state: string) {\n      if (this[privateUseDashedIdentifier] === null) {\n        // Check if `--state-string` needs to be used. See\n        // https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#compatibility_with_dashed-ident_syntax\n        try {\n          const testState = '_test';\n          this[internals].states.add(testState);\n          this[internals].states.delete(testState);\n          this[privateUseDashedIdentifier] = false;\n        } catch {\n          this[privateUseDashedIdentifier] = true;\n        }\n      }\n\n      return this[privateUseDashedIdentifier] ? `--${state}` : state;\n    }\n  }\n\n  return WithCustomStateSetElement;\n}\n"]}

package/list/internal/listitem/list-item.d.ts

@@ -77,5 +77,6 @@ export declare class ListItemEl extends listItemBaseClass implements ListItem {
     protected renderBody(): TemplateResult<1>;
     protected onFocus(): void;
     focus(): void;
+    click(): void;
 }
 export {};

package/list/internal/listitem/list-item.js

@@ -165,6 +165,16 @@ export class ListItemEl extends listItemBaseClass {
         // work programmatically like in FF and select-option
         this.listItemRoot?.focus();
     }
+    click() {
+        if (!this.listItemRoot) {
+            // If the element has not finished rendering, call super to ensure click
+            // events are dispatched.
+            super.click();
+            return;
+        }
+        // Forward click to the element to ensure link <a>.click() works correctly.
+        this.listItemRoot.click();
+    }
 }
 /** @nocollapse */
 ListItemEl.shadowRootOptions = {

package/list/internal/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\nimport '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\nimport '../../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\nimport {\n  createRequestActivationEvent,\n  ListItem,\n} from '../list-navigation-helpers.js';\n\n/**\n * Supported behaviors for a list item.\n */\nexport type ListItemType = 'text' | 'button' | 'link';\n\n// Separate variable needed for closure.\nconst listItemBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * @fires request-activation {Event} Requests the list to set `tabindex=0` on\n * the item and focus it. --bubbles --composed\n */\nexport class ListItemEl extends listItemBaseClass implements ListItem {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Sets the behavior of the list item, defaults to \"text\". Change to \"link\" or\n   * \"button\" for interactive items.\n   */\n  @property({reflect: true}) type: ListItemType = 'text';\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  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is\n   * set.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n  private get isDisabled() {\n    return this.disabled && this.type !== 'link';\n  }\n\n  protected override willUpdate(changed: PropertyValues<ListItemEl>) {\n    if (this.href) {\n      this.type = 'link';\n    }\n\n    super.willUpdate(changed);\n  }\n\n  protected override render() {\n    return this.renderListItem(html`\n      <md-item>\n        <div slot=\"container\">\n          ${this.renderRipple()} ${this.renderFocusRing()}\n        </div>\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n        ${this.renderBody()}\n      </md-item>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    const isAnchor = this.type === 'link';\n    let tag: StaticValue;\n    switch (this.type) {\n      case 'link':\n        tag = literal`a`;\n        break;\n      case 'button':\n        tag = literal`button`;\n        break;\n      default:\n      case 'text':\n        tag = literal`li`;\n        break;\n    }\n\n    const isInteractive = this.type !== 'text';\n    // TODO(b/265339866): announce \"button\"/\"link\" inside of a list item. Until\n    // then all are \"listitem\" roles for correct announcement.\n    const target = isAnchor && !!this.target ? this.target : nothing;\n    return staticHtml`\n      <${tag}\n        id=\"item\"\n        tabindex=\"${this.isDisabled || !isInteractive ? -1 : 0}\"\n        ?disabled=${this.isDisabled}\n        role=\"listitem\"\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        href=${this.href || nothing}\n        target=${target}\n        @focus=${this.onFocus}\n      >${content}</${tag}>\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult | typeof nothing {\n    if (this.type === 'text') {\n      return nothing;\n    }\n\n    return html` <md-ripple\n      part=\"ripple\"\n      for=\"item\"\n      ?disabled=${this.isDisabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult | typeof nothing {\n    if (this.type === 'text') {\n      return nothing;\n    }\n\n    return html` <md-focus-ring\n      @visibility-changed=${this.onFocusRingVisibilityChanged}\n      part=\"focus-ring\"\n      for=\"item\"\n      inward></md-focus-ring>`;\n  }\n\n  protected onFocusRingVisibilityChanged(e: Event) {}\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {'disabled': this.isDisabled};\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody() {\n    return html`\n      <slot></slot>\n      <slot name=\"overline\" slot=\"overline\"></slot>\n      <slot name=\"headline\" slot=\"headline\"></slot>\n      <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n      <slot\n        name=\"trailing-supporting-text\"\n        slot=\"trailing-supporting-text\"></slot>\n    `;\n  }\n\n  protected onFocus() {\n    if (this.tabIndex !== -1) {\n      return;\n    }\n    // Handles the case where the user clicks on the element and then tabs.\n    this.dispatchEvent(createRequestActivationEvent());\n  }\n\n  override focus() {\n    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n    // work programmatically like in FF and select-option\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 '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\nimport '../../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\nimport {\n  createRequestActivationEvent,\n  ListItem,\n} from '../list-navigation-helpers.js';\n\n/**\n * Supported behaviors for a list item.\n */\nexport type ListItemType = 'text' | 'button' | 'link';\n\n// Separate variable needed for closure.\nconst listItemBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * @fires request-activation {Event} Requests the list to set `tabindex=0` on\n * the item and focus it. --bubbles --composed\n */\nexport class ListItemEl extends listItemBaseClass implements ListItem {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Sets the behavior of the list item, defaults to \"text\". Change to \"link\" or\n   * \"button\" for interactive items.\n   */\n  @property({reflect: true}) type: ListItemType = 'text';\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  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is\n   * set.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n  private get isDisabled() {\n    return this.disabled && this.type !== 'link';\n  }\n\n  protected override willUpdate(changed: PropertyValues<ListItemEl>) {\n    if (this.href) {\n      this.type = 'link';\n    }\n\n    super.willUpdate(changed);\n  }\n\n  protected override render() {\n    return this.renderListItem(html`\n      <md-item>\n        <div slot=\"container\">\n          ${this.renderRipple()} ${this.renderFocusRing()}\n        </div>\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n        ${this.renderBody()}\n      </md-item>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    const isAnchor = this.type === 'link';\n    let tag: StaticValue;\n    switch (this.type) {\n      case 'link':\n        tag = literal`a`;\n        break;\n      case 'button':\n        tag = literal`button`;\n        break;\n      default:\n      case 'text':\n        tag = literal`li`;\n        break;\n    }\n\n    const isInteractive = this.type !== 'text';\n    // TODO(b/265339866): announce \"button\"/\"link\" inside of a list item. Until\n    // then all are \"listitem\" roles for correct announcement.\n    const target = isAnchor && !!this.target ? this.target : nothing;\n    return staticHtml`\n      <${tag}\n        id=\"item\"\n        tabindex=\"${this.isDisabled || !isInteractive ? -1 : 0}\"\n        ?disabled=${this.isDisabled}\n        role=\"listitem\"\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        href=${this.href || nothing}\n        target=${target}\n        @focus=${this.onFocus}\n      >${content}</${tag}>\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult | typeof nothing {\n    if (this.type === 'text') {\n      return nothing;\n    }\n\n    return html` <md-ripple\n      part=\"ripple\"\n      for=\"item\"\n      ?disabled=${this.isDisabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult | typeof nothing {\n    if (this.type === 'text') {\n      return nothing;\n    }\n\n    return html` <md-focus-ring\n      @visibility-changed=${this.onFocusRingVisibilityChanged}\n      part=\"focus-ring\"\n      for=\"item\"\n      inward></md-focus-ring>`;\n  }\n\n  protected onFocusRingVisibilityChanged(e: Event) {}\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {'disabled': this.isDisabled};\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody() {\n    return html`\n      <slot></slot>\n      <slot name=\"overline\" slot=\"overline\"></slot>\n      <slot name=\"headline\" slot=\"headline\"></slot>\n      <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n      <slot\n        name=\"trailing-supporting-text\"\n        slot=\"trailing-supporting-text\"></slot>\n    `;\n  }\n\n  protected onFocus() {\n    if (this.tabIndex !== -1) {\n      return;\n    }\n    // Handles the case where the user clicks on the element and then tabs.\n    this.dispatchEvent(createRequestActivationEvent());\n  }\n\n  override focus() {\n    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n    // work programmatically like in FF and select-option\n    this.listItemRoot?.focus();\n  }\n\n  override click() {\n    if (!this.listItemRoot) {\n      // If the element has not finished rendering, call super to ensure click\n      // events are dispatched.\n      super.click();\n      return;\n    }\n\n    // Forward click to the element to ensure link <a>.click() works correctly.\n    this.listItemRoot.click();\n  }\n}\n"]}

package/menu/internal/_menu.scss

@@ -100,7 +100,8 @@
   }
 
   .item-padding {
-    padding-block: 8px;
+    padding-block: map.get($tokens, 'top-space')
+      map.get($tokens, 'bottom-space');
   }
 
   .has-overflow:not([popover]) .items {

package/menu/internal/menu-styles.css

@@ -1 +1 @@
-:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px))}.menu{border-radius:var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px));display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);color:inherit;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit;scrollbar-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit;scrollbar-width:inherit}.item-padding{padding-block:8px}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=menu-styles.css.map */
+:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px))}.menu{border-radius:var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px));display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);color:inherit;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit;scrollbar-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit;scrollbar-width:inherit}.item-padding{padding-block:var(--md-menu-top-space, 8px) var(--md-menu-bottom-space, 8px)}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=menu-styles.css.map */

package/menu/internal/menu-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_menu.scss","../../elevation/internal/_elevation.scss","../../focus/internal/_focus-ring.scss"],"names":[],"mappings":"AAmCE,MCbI,iKDqBF,gBACA,YACA,iBAGF,cEzBI,mGFiCJ,MACE,0FACA,aACA,WACA,YACA,YACA,iBAEA,+BACA,cACA,UACA,WACA,kBACA,iBACA,mBACA,eACA,kBACA,kBACA,wBAGF,gBACE,aAGF,OACE,eAGF,OACE,cACA,qBACA,SACA,aACA,sBACA,gGACA,eACA,mBACA,cACA,kBACA,kBACA,sBACA,wBAGF,cACE,kBAGF,oCACE,iBAGF,iDAEE,gBAGF,+BAIE,oBAGF,sCACE,UAGF,KACE,cACA,eACA,mBAGF,4CACE,aAGF,8BACE,MACE,mBACA,wBACA","file":"menu-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_menu.scss","../../elevation/internal/_elevation.scss","../../focus/internal/_focus-ring.scss"],"names":[],"mappings":"AAmCE,MCbI,iKDqBF,gBACA,YACA,iBAGF,cEzBI,mGFiCJ,MACE,0FACA,aACA,WACA,YACA,YACA,iBAEA,+BACA,cACA,UACA,WACA,kBACA,iBACA,mBACA,eACA,kBACA,kBACA,wBAGF,gBACE,aAGF,OACE,eAGF,OACE,cACA,qBACA,SACA,aACA,sBACA,gGACA,eACA,mBACA,cACA,kBACA,kBACA,sBACA,wBAGF,cACE,6EAIF,oCACE,iBAGF,iDAEE,gBAGF,+BAIE,oBAGF,sCACE,UAGF,KACE,cACA,eACA,mBAGF,4CACE,aAGF,8BACE,MACE,mBACA,wBACA","file":"menu-styles.css"}

package/menu/internal/menu-styles.js

@@ -5,6 +5,6 @@
  */
 // Generated stylesheet for ./menu/internal/menu-styles.css.
 import { css } from 'lit';
-export const styles = css `:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px))}.menu{border-radius:var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px));display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);color:inherit;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit;scrollbar-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit;scrollbar-width:inherit}.item-padding{padding-block:8px}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}
+export const styles = css `:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px))}.menu{border-radius:var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px));display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);color:inherit;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit;scrollbar-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit;scrollbar-width:inherit}.item-padding{padding-block:var(--md-menu-top-space, 8px) var(--md-menu-bottom-space, 8px)}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}
 `;
 //# sourceMappingURL=menu-styles.js.map

package/menu/internal/menu-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-styles.js","sourceRoot":"","sources":["menu-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,4DAA4D;AAC5D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./menu/internal/menu-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px))}.menu{border-radius:var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px));display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);color:inherit;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit;scrollbar-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit;scrollbar-width:inherit}.item-padding{padding-block:8px}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}\n`;\n"]}
+{"version":3,"file":"menu-styles.js","sourceRoot":"","sources":["menu-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,4DAA4D;AAC5D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./menu/internal/menu-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px))}.menu{border-radius:var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 4px));display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);color:inherit;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit;scrollbar-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit;scrollbar-width:inherit}.item-padding{padding-block:var(--md-menu-top-space, 8px) var(--md-menu-bottom-space, 8px)}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}\n`;\n"]}

package/menu/menu.d.ts

@@ -7,7 +7,7 @@ import { CSSResultOrNative } from 'lit';
 import { Menu } from './internal/menu.js';
 export { type ListItem } from '../list/internal/list-navigation-helpers.js';
 export { type MenuItem } from './internal/controllers/menuItemController.js';
-export { FocusState, type CloseMenuEvent, type Menu, } from './internal/controllers/shared.js';
+export { CloseReason, FocusState, type CloseMenuEvent, type Menu, } from './internal/controllers/shared.js';
 export { Corner } from './internal/menu.js';
 declare global {
     interface HTMLElementTagNameMap {

package/menu/menu.js

@@ -7,7 +7,7 @@ import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { Menu } from './internal/menu.js';
 import { styles } from './internal/menu-styles.js';
-export { FocusState, } from './internal/controllers/shared.js';
+export { CloseReason, FocusState, } from './internal/controllers/shared.js';
 export { Corner } from './internal/menu.js';
 /**
  * @summary Menus display a list of choices on a temporary surface.

package/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAIjD,OAAO,EACL,UAAU,GAGX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAQ1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAwB,CAAC,MAAM,CAAC,AAAhC,CAAiC;AAD5C,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Menu} from './internal/menu.js';\nimport {styles} from './internal/menu-styles.js';\n\nexport {type ListItem} from '../list/internal/list-navigation-helpers.js';\nexport {type MenuItem} from './internal/controllers/menuItemController.js';\nexport {\n  FocusState,\n  type CloseMenuEvent,\n  type Menu,\n} from './internal/controllers/shared.js';\nexport {Corner} from './internal/menu.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu': MdMenu;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menus appear when users interact with a button, action, or other control.\n *\n * They can be opened from a variety of elements, most commonly icon buttons,\n * buttons, and text fields.\n *\n * md-menu listens for the `close-menu` and `deselect-items` events.\n *\n * - `close-menu` closes the menu when dispatched from a child element.\n * - `deselect-items` deselects all of its immediate menu-item children.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       id=\"anchor\"\n *       @click=${() => this.menuRef.value.show()}>\n *     Click to open menu\n *   </button>\n *   <!--\n *     `has-overflow` is required when using a submenu which overflows the\n *     menu's contents.\n *\n *     Additionally, `anchor` ingests an idref which do not pass through shadow\n *     roots. You can also set `.anchorElement` to an element reference if\n *     necessary.\n *   -->\n *   <md-menu anchor=\"anchor\" has-overflow ${ref(menuRef)}>\n *     <md-menu-item headline=\"This is a headline\"></md-menu-item>\n *     <md-sub-menu>\n *       <md-menu-item\n *           slot=\"item\"\n *           headline=\"this is a submenu item\">\n *       </md-menu-item>\n *       <md-menu slot=\"menu\">\n *         <md-menu-item headline=\"This is an item inside a submenu\">\n *         </md-menu-item>\n *       </md-menu>\n *     </md-sub-menu>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu')\nexport class MdMenu extends Menu {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAIjD,OAAO,EACL,WAAW,EACX,UAAU,GAGX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAQ1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAwB,CAAC,MAAM,CAAC,AAAhC,CAAiC;AAD5C,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Menu} from './internal/menu.js';\nimport {styles} from './internal/menu-styles.js';\n\nexport {type ListItem} from '../list/internal/list-navigation-helpers.js';\nexport {type MenuItem} from './internal/controllers/menuItemController.js';\nexport {\n  CloseReason,\n  FocusState,\n  type CloseMenuEvent,\n  type Menu,\n} from './internal/controllers/shared.js';\nexport {Corner} from './internal/menu.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu': MdMenu;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menus appear when users interact with a button, action, or other control.\n *\n * They can be opened from a variety of elements, most commonly icon buttons,\n * buttons, and text fields.\n *\n * md-menu listens for the `close-menu` and `deselect-items` events.\n *\n * - `close-menu` closes the menu when dispatched from a child element.\n * - `deselect-items` deselects all of its immediate menu-item children.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       id=\"anchor\"\n *       @click=${() => this.menuRef.value.show()}>\n *     Click to open menu\n *   </button>\n *   <!--\n *     `has-overflow` is required when using a submenu which overflows the\n *     menu's contents.\n *\n *     Additionally, `anchor` ingests an idref which do not pass through shadow\n *     roots. You can also set `.anchorElement` to an element reference if\n *     necessary.\n *   -->\n *   <md-menu anchor=\"anchor\" has-overflow ${ref(menuRef)}>\n *     <md-menu-item headline=\"This is a headline\"></md-menu-item>\n *     <md-sub-menu>\n *       <md-menu-item\n *           slot=\"item\"\n *           headline=\"this is a submenu item\">\n *       </md-menu-item>\n *       <md-menu slot=\"menu\">\n *         <md-menu-item headline=\"This is an item inside a submenu\">\n *         </md-menu-item>\n *       </md-menu>\n *     </md-sub-menu>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu')\nexport class MdMenu extends Menu {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material/web",
-  "version": "2.2.1-nightly.e217185.0",
+  "version": "2.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -56,7 +56,7 @@
     "catalog"
   ],
   "dependencies": {
-    "lit": "^2.7.4 || ^3.0.0",
+    "lit": "^2.8.0 || ^3.0.0",
     "tslib": "^2.4.0"
   },
   "devDependencies": {

package/textfield/internal/text-field.d.ts

@@ -282,6 +282,15 @@ export declare abstract class TextField extends textFieldBaseClass {
      * @param direction The direction in which the selection is performed.
      */
     setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none'): void;
+    /**
+     * Shows the browser picker for an input element of type "date", "time", etc.
+     *
+     * For a full list of supported types, see:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker
+     */
+    showPicker(): void;
     /**
      * Decrements the value of a numeric type text field by `step` or `n` `step`
      * number of times.

package/textfield/internal/text-field.js

@@ -320,6 +320,21 @@ export class TextField extends textFieldBaseClass {
     setSelectionRange(start, end, direction) {
         this.getInputOrTextarea().setSelectionRange(start, end, direction);
     }
+    /**
+     * Shows the browser picker for an input element of type "date", "time", etc.
+     *
+     * For a full list of supported types, see:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker
+     */
+    showPicker() {
+        const input = this.getInput();
+        if (!input) {
+            return;
+        }
+        input.showPicker();
+    }
     /**
      * Decrements the value of a numeric type text field by `step` or `n` `step`
      * number of times.