@api-client/ui 0.2.10 → 0.2.12

package/build/src/md/icon-button/ui-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/md/icon-button/ui-icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAG/C,qBACa,mBAAoB,SAAQ,OAAO;IAC9C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAA;KACtC;CACF"}
+{"version":3,"file":"ui-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/md/icon-button/ui-icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAI/C,qBACa,mBAAoB,SAAQ,OAAO;IAC9C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAiB;CAC7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAA;KACtC;CACF"}

package/build/src/md/icon-button/ui-icon-button.js

@@ -1,7 +1,8 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import Element from './internals/IconButton.js';
-import styles from './internals/IconButton.styles.js';
+import base from './internals/base.styles.js';
+import styles from './internals/standard.styles.js';
 let UiIconButtonElement = (() => {
     let _classDecorators = [customElement('ui-icon-button')];
     let _classDescriptor;
@@ -16,7 +17,7 @@ let UiIconButtonElement = (() => {
             UiIconButtonElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static styles = [styles];
+        static styles = [base, styles];
         static {
             __runInitializers(_classThis, _classExtraInitializers);
         }

package/build/src/md/icon-button/ui-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-icon-button.js","sourceRoot":"","sources":["../../../../src/md/icon-button/ui-icon-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAC/C,OAAO,MAAM,MAAM,kCAAkC,CAAA;IAGxC,mBAAmB;4BAD/B,aAAa,CAAC,gBAAgB,CAAC;;;;sBACS,OAAO;mCAAf,SAAQ,WAAO;;;;YAAhD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAmB;;;;;SAAnB,mBAAmB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/IconButton.js'\nimport styles from './internals/IconButton.styles.js'\n\n@customElement('ui-icon-button')\nexport class UiIconButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-icon-button': UiIconButtonElement\n  }\n}\n"]}
+{"version":3,"file":"ui-icon-button.js","sourceRoot":"","sources":["../../../../src/md/icon-button/ui-icon-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAC/C,OAAO,IAAI,MAAM,4BAA4B,CAAA;AAC7C,OAAO,MAAM,MAAM,gCAAgC,CAAA;IAGtC,mBAAmB;4BAD/B,aAAa,CAAC,gBAAgB,CAAC;;;;sBACS,OAAO;mCAAf,SAAQ,WAAO;;;;YAAhD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAAmB;;;;;SAAnB,mBAAmB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/IconButton.js'\nimport base from './internals/base.styles.js'\nimport styles from './internals/standard.styles.js'\n\n@customElement('ui-icon-button')\nexport class UiIconButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-icon-button': UiIconButtonElement\n  }\n}\n"]}

package/build/src/md/icon-button/ui-outlined-icon-button.d.ts

@@ -0,0 +1,11 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internals/IconButton.js';
+export declare class UiOutlinedIconButtonElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-outlined-icon-button': UiOutlinedIconButtonElement;
+    }
+}
+//# sourceMappingURL=ui-outlined-icon-button.d.ts.map

package/build/src/md/icon-button/ui-outlined-icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-outlined-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/md/icon-button/ui-outlined-icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAI/C,qBACa,2BAA4B,SAAQ,OAAO;IACtD,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAiB;CAC7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,2BAA2B,CAAA;KACvD;CACF"}

package/build/src/md/icon-button/ui-outlined-icon-button.js

@@ -0,0 +1,28 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internals/IconButton.js';
+import base from './internals/base.styles.js';
+import styles from './internals/outlined.styles.js';
+let UiOutlinedIconButtonElement = (() => {
+    let _classDecorators = [customElement('ui-outlined-icon-button')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var UiOutlinedIconButtonElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiOutlinedIconButtonElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [base, styles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiOutlinedIconButtonElement = _classThis;
+})();
+export { UiOutlinedIconButtonElement };
+//# sourceMappingURL=ui-outlined-icon-button.js.map

package/build/src/md/icon-button/ui-outlined-icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-outlined-icon-button.js","sourceRoot":"","sources":["../../../../src/md/icon-button/ui-outlined-icon-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAC/C,OAAO,IAAI,MAAM,4BAA4B,CAAA;AAC7C,OAAO,MAAM,MAAM,gCAAgC,CAAA;IAGtC,2BAA2B;4BADvC,aAAa,CAAC,yBAAyB,CAAC;;;;sBACQ,OAAO;2CAAf,SAAQ,WAAO;;;;YAAxD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;;YADjD,uDAA2B;;;;;SAA3B,2BAA2B","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/IconButton.js'\nimport base from './internals/base.styles.js'\nimport styles from './internals/outlined.styles.js'\n\n@customElement('ui-outlined-icon-button')\nexport class UiOutlinedIconButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [base, styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-outlined-icon-button': UiOutlinedIconButtonElement\n  }\n}\n"]}

package/build/src/md/icons/internals/Icon.d.ts

@@ -13,6 +13,7 @@ export default class UiIcon extends LitElement {
      * @returns True when the icon was found and is rendered.
      */
     get hasIcon(): boolean;
+    connectedCallback(): void;
     protected willUpdate(cp: PropertyValues<this>): void;
     /**
      * Maps icon name to it's definition and sets `hasIcon` value.

package/build/src/md/icons/internals/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/md/icons/internals/Icon.ts"],"names":[],"mappings":"AAIA,OAAO,EAAQ,cAAc,EAAE,UAAU,EAAqB,cAAc,EAAE,MAAM,KAAK,CAAA;AAGzF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IAC5C,OAAO,CAAC,eAAe,CAAQ;IAE/B,OAAO,CAAC,SAAS,CAA+B;IAEhD;;;;OAIG;IACS,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE/C;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;cAEkB,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM7D;;;;OAIG;IACH,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,IAAI;IAOtD;;OAEG;IACM,MAAM,IAAI,cAAc;CAOlC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/md/icons/internals/Icon.ts"],"names":[],"mappings":"AAIA,OAAO,EAAQ,cAAc,EAAE,UAAU,EAAqB,cAAc,EAAE,MAAM,KAAK,CAAA;AAGzF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IAC5C,OAAO,CAAC,eAAe,CAAQ;IAE/B,OAAO,CAAC,SAAS,CAA+B;IAEhD;;;;OAIG;IACS,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE/C;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;IAEQ,iBAAiB;cAcP,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM7D;;;;OAIG;IACH,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,IAAI;IAOtD;;OAEG;IACM,MAAM,IAAI,cAAc;CAOlC"}

package/build/src/md/icons/internals/Icon.js

@@ -34,6 +34,19 @@ let UiIcon = (() => {
         get hasIcon() {
             return this.hasIconInternal;
         }
+        connectedCallback() {
+            super.connectedCallback();
+            const ariaHidden = this.getAttribute('aria-hidden');
+            if (ariaHidden === 'false') {
+                // Allow the user to set `aria-hidden="false"` to create an icon that is
+                // announced by screen readers.
+                this.removeAttribute('aria-hidden');
+                return;
+            }
+            // Needed for VoiceOver, which will create a "group" if the element is a
+            // sibling to other content.
+            this.setAttribute('aria-hidden', 'true');
+        }
         willUpdate(cp) {
             if (cp.has('icon')) {
                 this.updateIcon(this.icon);

package/build/src/md/icons/internals/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../../src/md/icons/internals/Icon.ts"],"names":[],"mappings":";AAAA;;;EAGE;AACF,OAAO,EAAE,IAAI,EAAkB,UAAU,EAAqC,MAAM,KAAK,CAAA;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,KAAK,KAAK,MAAM,aAAa,CAAA;;sBAGA,UAAU;;;;iBAAzB,MAAO,SAAQ,WAAU;;;gCAU3C,QAAQ,EAAE;YAAC,iKAAS,IAAI,6BAAJ,IAAI,mFAAsB;;;QATvC,eAAe,GAAG,KAAK,CAAA;QAEvB,SAAS,CAA+B;QAOpC,6EAAmC;QAL/C;;;;WAIG;QACS,IAAS,IAAI,0CAAsB;QAAnC,IAAS,IAAI,gDAAsB;QAE/C;;WAEG;QACH,IAAI,OAAO;YACT,OAAO,IAAI,CAAC,eAAe,CAAA;QAC7B,CAAC;QAEkB,UAAU,CAAC,EAAwB;YACpD,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;gBACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC;QAED;;;;WAIG;QACO,UAAU,CAAC,IAA0B;YAC7C,MAAM,IAAI,GAAI,KAAe,CAAC,IAAgB,CAAkC,CAAA;YAChF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAA;YAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;YACrB,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;QAED;;WAEG;QACM,MAAM;YACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;YAC/C,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO,IAAI,CAAA,eAAe,CAAA;YAC5B,CAAC;YACD,OAAO,IAAI,CAAA,GAAG,UAAU,EAAE,CAAA;QAC5B,CAAC;;;;;;;AA9CH,sBA+CC","sourcesContent":["/*\nCopyright 2022 Pawel Psztyc\nLicensed under the CC-BY 2.0\n*/\nimport { html, TemplateResult, LitElement, SVGTemplateResult, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport * as Icons from '../Icons.js'\nimport { IconType } from '../Icons.js'\n\nexport default class UiIcon extends LitElement {\n  private hasIconInternal = false\n\n  private iconValue: SVGTemplateResult | undefined\n\n  /**\n   * An icon to be rendered from the ApiIcons library.\n   * When incorrect icon is referenced nothing is rendered.\n   * @attribute\n   */\n  @property() accessor icon: IconType | undefined\n\n  /**\n   * @returns True when the icon was found and is rendered.\n   */\n  get hasIcon(): boolean {\n    return this.hasIconInternal\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('icon')) {\n      this.updateIcon(this.icon)\n    }\n  }\n\n  /**\n   * Maps icon name to it's definition and sets `hasIcon` value.\n   *\n   * @param name Icon name\n   */\n  protected updateIcon(name: IconType | undefined): void {\n    const icon = (Icons as never)[name as IconType] as SVGTemplateResult | undefined\n    this.hasIconInternal = !!icon\n    this.iconValue = icon\n    this.requestUpdate()\n  }\n\n  /**\n   * @return Template result for an icon\n   */\n  override render(): TemplateResult {\n    const { hasIcon, iconValue: _iconValue } = this\n    if (!hasIcon) {\n      return html`<slot></slot>`\n    }\n    return html`${_iconValue}`\n  }\n}\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../../src/md/icons/internals/Icon.ts"],"names":[],"mappings":";AAAA;;;EAGE;AACF,OAAO,EAAE,IAAI,EAAkB,UAAU,EAAqC,MAAM,KAAK,CAAA;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,KAAK,KAAK,MAAM,aAAa,CAAA;;sBAGA,UAAU;;;;iBAAzB,MAAO,SAAQ,WAAU;;;gCAU3C,QAAQ,EAAE;YAAC,iKAAS,IAAI,6BAAJ,IAAI,mFAAsB;;;QATvC,eAAe,GAAG,KAAK,CAAA;QAEvB,SAAS,CAA+B;QAOpC,6EAAmC;QAL/C;;;;WAIG;QACS,IAAS,IAAI,0CAAsB;QAAnC,IAAS,IAAI,gDAAsB;QAE/C;;WAEG;QACH,IAAI,OAAO;YACT,OAAO,IAAI,CAAC,eAAe,CAAA;QAC7B,CAAC;QAEQ,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAA;YACnD,IAAI,UAAU,KAAK,OAAO,EAAE,CAAC;gBAC3B,wEAAwE;gBACxE,+BAA+B;gBAC/B,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAA;gBACnC,OAAM;YACR,CAAC;YACD,wEAAwE;YACxE,4BAA4B;YAC5B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;QAC1C,CAAC;QAEkB,UAAU,CAAC,EAAwB;YACpD,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;gBACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC;QAED;;;;WAIG;QACO,UAAU,CAAC,IAA0B;YAC7C,MAAM,IAAI,GAAI,KAAe,CAAC,IAAgB,CAAkC,CAAA;YAChF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAA;YAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;YACrB,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;QAED;;WAEG;QACM,MAAM;YACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;YAC/C,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO,IAAI,CAAA,eAAe,CAAA;YAC5B,CAAC;YACD,OAAO,IAAI,CAAA,GAAG,UAAU,EAAE,CAAA;QAC5B,CAAC;;;;;;;AA5DH,sBA6DC","sourcesContent":["/*\nCopyright 2022 Pawel Psztyc\nLicensed under the CC-BY 2.0\n*/\nimport { html, TemplateResult, LitElement, SVGTemplateResult, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport * as Icons from '../Icons.js'\nimport { IconType } from '../Icons.js'\n\nexport default class UiIcon extends LitElement {\n  private hasIconInternal = false\n\n  private iconValue: SVGTemplateResult | undefined\n\n  /**\n   * An icon to be rendered from the ApiIcons library.\n   * When incorrect icon is referenced nothing is rendered.\n   * @attribute\n   */\n  @property() accessor icon: IconType | undefined\n\n  /**\n   * @returns True when the icon was found and is rendered.\n   */\n  get hasIcon(): boolean {\n    return this.hasIconInternal\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    const ariaHidden = this.getAttribute('aria-hidden')\n    if (ariaHidden === 'false') {\n      // Allow the user to set `aria-hidden=\"false\"` to create an icon that is\n      // announced by screen readers.\n      this.removeAttribute('aria-hidden')\n      return\n    }\n    // Needed for VoiceOver, which will create a \"group\" if the element is a\n    // sibling to other content.\n    this.setAttribute('aria-hidden', 'true')\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('icon')) {\n      this.updateIcon(this.icon)\n    }\n  }\n\n  /**\n   * Maps icon name to it's definition and sets `hasIcon` value.\n   *\n   * @param name Icon name\n   */\n  protected updateIcon(name: IconType | undefined): void {\n    const icon = (Icons as never)[name as IconType] as SVGTemplateResult | undefined\n    this.hasIconInternal = !!icon\n    this.iconValue = icon\n    this.requestUpdate()\n  }\n\n  /**\n   * @return Template result for an icon\n   */\n  override render(): TemplateResult {\n    const { hasIcon, iconValue: _iconValue } = this\n    if (!hasIcon) {\n      return html`<slot></slot>`\n    }\n    return html`${_iconValue}`\n  }\n}\n"]}

package/build/src/md/icons/internals/Icon.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/icons/internals/Icon.styles.ts"],"names":[],"mappings":";AAEA,wBAOC"}
+{"version":3,"file":"Icon.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/icons/internals/Icon.styles.ts"],"names":[],"mappings":";AAEA,wBAoCC"}

package/build/src/md/icons/internals/Icon.styles.js

@@ -2,9 +2,38 @@ import { css } from 'lit';
 export default css `
   :host {
     display: inline-block;
-    width: 24px;
-    height: 24px;
+    font-size: var(--md-icon-size, 24px);
+    width: var(--md-icon-size, 24px);
+    height: var(--md-icon-size, 24px);
+    color: inherit;
     fill: currentColor;
+    font-variation-settings: inherit;
+    font-weight: 400;
+    font-family: var(--md-icon-font, Material Symbols Outlined);
+    display: inline-flex;
+    font-style: normal;
+    place-items: center;
+    place-content: center;
+    line-height: 1;
+    overflow: hidden;
+    letter-spacing: normal;
+    text-transform: none;
+    user-select: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    flex-shrink: 0;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  ::slotted(svg) {
+    fill: currentColor;
+  }
+
+  ::slotted(*) {
+    height: 100%;
+    width: 100%;
   }
 `;
 //# sourceMappingURL=Icon.styles.js.map

package/build/src/md/icons/internals/Icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.js","sourceRoot":"","sources":["../../../../../src/md/icons/internals/Icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;CAOjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    width: 24px;\n    height: 24px;\n    fill: currentColor;\n  }\n`\n"]}
+{"version":3,"file":"Icon.styles.js","sourceRoot":"","sources":["../../../../../src/md/icons/internals/Icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    font-size: var(--md-icon-size, 24px);\n    width: var(--md-icon-size, 24px);\n    height: var(--md-icon-size, 24px);\n    color: inherit;\n    fill: currentColor;\n    font-variation-settings: inherit;\n    font-weight: 400;\n    font-family: var(--md-icon-font, Material Symbols Outlined);\n    display: inline-flex;\n    font-style: normal;\n    place-items: center;\n    place-content: center;\n    line-height: 1;\n    overflow: hidden;\n    letter-spacing: normal;\n    text-transform: none;\n    user-select: none;\n    white-space: nowrap;\n    word-wrap: normal;\n    flex-shrink: 0;\n    -webkit-font-smoothing: antialiased;\n    text-rendering: optimizeLegibility;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  ::slotted(svg) {\n    fill: currentColor;\n  }\n\n  ::slotted(*) {\n    height: 100%;\n    width: 100%;\n  }\n`\n"]}

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

@@ -2,6 +2,7 @@ import { PropertyValues, TemplateResult } from 'lit';
 import { UiElement } from '../../UiElement.js';
 import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js';
 import UiRipple from '../../ripple/internals/ripple.js';
+import '@material/web/focus/md-focus-ring.js';
 import '../../ripple/ui-ripple.js';
 export declare enum ListItemLines {
     one = "one",
@@ -48,17 +49,17 @@ export default class UiListItem extends UiElement {
      * @attribute
      */
     accessor static: boolean;
+    accessor tabIndex: number;
     constructor();
+    protected updated(changedProperties: PropertyValues<this>): void;
     connectedCallback(): void;
     protected willUpdate(cp: PropertyValues<this>): void;
     handleKeyDown(e: KeyboardEvent): void;
     handleKeyUp(e: KeyboardEvent): void;
     beginPress(options: BeginPressConfig): void;
     endPress(options: EndPressConfig): void;
-    protected handlePointerEnter(e: PointerEvent): void;
+    handlePointerEnter(e: PointerEvent): void;
     handlePointerLeave(e: PointerEvent): void;
-    protected handleFocus(): void;
-    protected handleBlur(): void;
     /**
      * Focuses list item and makes list item focusable via keyboard.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAGvD,OAAO,2BAA2B,CAAA;AAElC,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,KAAK,UAAU;CAChB;AAED,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,SAAS;IAC3B,QAAQ,CAAC,MAAM,EAAG,QAAQ,CAAA;IAE9C;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;IAExE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;IAExE;;;;;OAKG;IACyC,QAAQ,CAAC,MAAM,UAAQ;;IAoB1D,iBAAiB,IAAI,IAAI;cAOf,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAYrC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAYnC,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAQ3C,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQhD,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAS1C,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAWlD,SAAS,CAAC,WAAW,IAAI,IAAI;IAO7B,SAAS,CAAC,UAAU,IAAI,IAAI;IAO5B;;OAEG;IACH,QAAQ,IAAI,IAAI;IAShB;;OAEG;IACH,QAAQ,IAAI,OAAO;IAOnB;;OAEG;IACH,UAAU,IAAI,IAAI;IAOlB,SAAS,CAAC,gBAAgB,IAAI,IAAI;cAIf,MAAM,IAAI,cAAc;IAiB3C,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;IAED,SAAS,CAAC,WAAW,IAAI,cAAc;IAMvC,SAAS,CAAC,SAAS,IAAI,cAAc;IAOrC,SAAS,CAAC,UAAU,IAAI,cAAc;CAUvC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAIvD,OAAO,sCAAsC,CAAA;AAC7C,OAAO,2BAA2B,CAAA;AAElC,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,KAAK,UAAU;CAChB;AAED,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,SAAS;IAC3B,QAAQ,CAAC,MAAM,EAAG,QAAQ,CAAA;IAE9C;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;IAExE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;IAExE;;;;;OAKG;IACyC,QAAQ,CAAC,MAAM,UAAQ;IAEnE,SAA6D,QAAQ,SAAK;;cAmBvD,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOhE,iBAAiB,IAAI,IAAI;cAOf,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAWrC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAYnC,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAQ3C,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQvC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IASzC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAWlD;;OAEG;IACH,QAAQ,IAAI,IAAI;IAQhB;;OAEG;IACH,QAAQ,IAAI,OAAO;IAOnB;;OAEG;IACH,UAAU,IAAI,IAAI;IAOlB,SAAS,CAAC,gBAAgB,IAAI,IAAI;cAIf,MAAM,IAAI,cAAc;IAkB3C,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;IAED,SAAS,CAAC,WAAW,IAAI,cAAc;IAMvC,SAAS,CAAC,SAAS,IAAI,cAAc;IAOrC,SAAS,CAAC,UAAU,IAAI,cAAc;CAUvC"}

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

@@ -5,6 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { UiElement } from '../../UiElement.js';
 import { setDisabled } from '../../../lib/disabled.js';
 import { ripple } from '../../effects/rippleDirective.js';
+import '@material/web/focus/md-focus-ring.js';
 import '../../ripple/ui-ripple.js';
 export var ListItemLines;
 (function (ListItemLines) {
@@ -37,6 +38,9 @@ let UiListItem = (() => {
     let _static_decorators;
     let _static_initializers = [];
     let _static_extraInitializers = [];
+    let _tabIndex_decorators;
+    let _tabIndex_initializers = [];
+    let _tabIndex_extraInitializers = [];
     return class UiListItem extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -45,11 +49,13 @@ let UiListItem = (() => {
             _lines_decorators = [property({ type: String, reflect: true })];
             _image_decorators = [property({ type: String, reflect: true })];
             _static_decorators = [property({ type: Boolean, reflect: true })];
+            _tabIndex_decorators = [property({ type: Number, reflect: true })];
             __esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
             __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(this, null, _lines_decorators, { kind: "accessor", name: "lines", static: false, private: false, access: { has: obj => "lines" in obj, get: obj => obj.lines, set: (obj, value) => { obj.lines = value; } }, metadata: _metadata }, _lines_initializers, _lines_extraInitializers);
             __esDecorate(this, null, _image_decorators, { kind: "accessor", name: "image", static: false, private: false, access: { has: obj => "image" in obj, get: obj => obj.image, set: (obj, value) => { obj.image = value; } }, metadata: _metadata }, _image_initializers, _image_extraInitializers);
             __esDecorate(this, null, _static_decorators, { kind: "accessor", name: "static", static: false, private: false, access: { has: obj => "static" in obj, get: obj => obj.static, set: (obj, value) => { obj.static = value; } }, metadata: _metadata }, _static_initializers, _static_extraInitializers);
+            __esDecorate(this, null, _tabIndex_decorators, { kind: "accessor", name: "tabIndex", static: false, private: false, access: { has: obj => "tabIndex" in obj, get: obj => obj.tabIndex, set: (obj, value) => { obj.tabIndex = value; } }, metadata: _metadata }, _tabIndex_initializers, _tabIndex_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         #ripple_accessor_storage = __runInitializers(this, _ripple_initializers, void 0);
@@ -93,6 +99,9 @@ let UiListItem = (() => {
          */
         get static() { return this.#static_accessor_storage; }
         set static(value) { this.#static_accessor_storage = value; }
+        #tabIndex_accessor_storage = (__runInitializers(this, _static_extraInitializers), __runInitializers(this, _tabIndex_initializers, -1));
+        get tabIndex() { return this.#tabIndex_accessor_storage; }
+        set tabIndex(value) { this.#tabIndex_accessor_storage = value; }
         constructor() {
             super();
             this.lines = ListItemLines.one;
@@ -102,11 +111,16 @@ let UiListItem = (() => {
             this.addEventListener('pointerup', this.handlePointerUp.bind(this));
             this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));
             this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
+            this.addEventListener('pointerenter', this.handlePointerEnter.bind(this));
             this.addEventListener('contextmenu', this.handleContextMenu.bind(this));
             this.addEventListener('keydown', this.handleKeyDown.bind(this));
             this.addEventListener('keyup', this.handleKeyUp.bind(this));
-            this.addEventListener('focus', this.handleFocus.bind(this));
-            this.addEventListener('blur', this.handleBlur.bind(this));
+        }
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('tabIndex') && (this.tabIndex === -1 || this.tabIndex === null)) {
+                this.ripple?.endPress();
+            }
         }
         connectedCallback() {
             super.connectedCallback();
@@ -127,7 +141,7 @@ let UiListItem = (() => {
             }
             if (e.key !== ' ' && e.key !== 'Enter')
                 return;
-            e.preventDefault();
+            // do not prevent default, so that parent elements can handle the key event
             this.beginPress({ positionEvent: e });
         }
         handleKeyUp(e) {
@@ -138,7 +152,7 @@ let UiListItem = (() => {
             }
             if (e.key !== ' ' && e.key !== 'Enter')
                 return;
-            e.preventDefault();
+            // do not prevent default, so that parent elements can handle the key event
             this.endPress({ cancelled: false, actionData: { item: this } });
         }
         beginPress(options) {
@@ -172,18 +186,6 @@ let UiListItem = (() => {
             super.handlePointerLeave(e);
             this.ripple.endHover();
         }
-        handleFocus() {
-            if (this.disabled || this.static) {
-                return;
-            }
-            this.ripple.beginFocus();
-        }
-        handleBlur() {
-            if (this.disabled || this.static) {
-                return;
-            }
-            this.ripple.endFocus();
-        }
         /**
          * Focuses list item and makes list item focusable via keyboard.
          */
@@ -193,7 +195,6 @@ let UiListItem = (() => {
             }
             this.setAttribute('tabindex', '0');
             this.focus();
-            this.ripple.beginFocus();
         }
         /**
          * Returns true if list item is currently focused and is focusable.
@@ -223,6 +224,7 @@ let UiListItem = (() => {
                 pressed,
             });
             return html `
+      <md-focus-ring part="focus-ring" .control="${this}" inward></md-focus-ring>
       <div class="${surfaceClasses}" ${ripple(() => this.ripple)}>
         <div class="container"></div>
         <div class="state"></div>
@@ -231,7 +233,7 @@ let UiListItem = (() => {
       </div>
     `;
         }
-        renderRipple = (__runInitializers(this, _static_extraInitializers), () => {
+        renderRipple = (__runInitializers(this, _tabIndex_extraInitializers), () => {
             const { disabled, static: isStatic } = this;
             return html `<ui-ripple class="ripple" ?disabled="${disabled || isStatic}"></ui-ripple>`;
         });

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

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

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

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

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

@@ -5,6 +5,12 @@ export default css `
     height: 56px;
     outline: none;
     cursor: default;
+    position: relative;
+
+    --md-focus-ring-shape-end-end: 0px;
+    --md-focus-ring-shape-end-start: 0px;
+    --md-focus-ring-shape-start-end: 0px;
+    --md-focus-ring-shape-start-start: 0px;
   }
 
   :host([disabled]) {
@@ -42,8 +48,6 @@ export default css `
     position: absolute;
     inset: 0;
     z-index: 1;
-
-    /* background-color: var(--md-sys-color-surface); */
   }
 
   .content {

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

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

package/build/src/md/ripple/internals/ripple.d.ts

@@ -26,7 +26,7 @@ export default class UiRipple extends LitElement {
     protected rippleSize: string;
     protected rippleScale: string;
     protected initialSize: number;
-    protected pressAnimationSignal: import("../../motion/animation.js").AnimationSignal;
+    private rippleStartEvent?;
     protected growAnimation: Animation | null;
     protected delayedEndPressHandle: number | null;
     protected render(): TemplateResult;
@@ -41,6 +41,7 @@ export default class UiRipple extends LitElement {
         endPoint: IPoint;
     };
     protected startPressAnimation(positionEvent?: Event | null): void;
+    private endPressAnimation;
     beginHover(hoverEvent?: Event): void;
     endHover(): void;
     beginFocus(): void;

package/build/src/md/ripple/internals/ripple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAEtE,OAAO,EAAE,SAAS,EAAY,MAAM,6BAA6B,CAAA;AAYjE,UAAU,MAAM;IACd,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC3B,QAAQ,CAAC,MAAM,EAAG,WAAW,CAAA;IAEhD;;OAEG;IAC0B,QAAQ,CAAC,SAAS,UAAQ;IAEvD;;OAEG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAE5D,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAE3C,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,SAAS,CAAC,UAAU,SAAK;IAEzB,SAAS,CAAC,WAAW,SAAK;IAE1B,SAAS,CAAC,WAAW,SAAI;IAEzB,SAAS,CAAC,oBAAoB,sDAA0B;IAExD,SAAS,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAEhD,SAAS,CAAC,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAO;cAElC,MAAM,IAAI,cAAc;IAI3C,mBAAmB;IACnB,SAAS,CAAC,sBAAsB,IAAI,SAAS;cAS1B,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IASnE,SAAS,CAAC,aAAa,IAAI,OAAO;IAIlC,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAqBrC,SAAS,CAAC,+BAA+B,CAAC,YAAY,EAAE,YAAY,GAAG,MAAM;IAS7E,SAAS,CAAC,yBAAyB,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE;IA2B3G,SAAS,CAAC,mBAAmB,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;IA0CjE,UAAU,CAAC,UAAU,CAAC,EAAE,KAAK,GAAG,IAAI;IAMpC,QAAQ,IAAI,IAAI;IAIhB,UAAU,IAAI,IAAI;IAIlB,QAAQ,IAAI,IAAI;IAIhB,UAAU,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;IAS9C,QAAQ,IAAI,IAAI;CAWjB"}
+{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAEtE,OAAO,EAAE,SAAS,EAAY,MAAM,6BAA6B,CAAA;AAYjE,UAAU,MAAM;IACd,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC3B,QAAQ,CAAC,MAAM,EAAG,WAAW,CAAA;IAEhD;;OAEG;IAC0B,QAAQ,CAAC,SAAS,UAAQ;IAEvD;;OAEG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAE5D,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAE3C,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,SAAS,CAAC,UAAU,SAAK;IAEzB,SAAS,CAAC,WAAW,SAAK;IAE1B,SAAS,CAAC,WAAW,SAAI;IAEzB,OAAO,CAAC,gBAAgB,CAAC,CAAc;IAIvC,SAAS,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAEhD,SAAS,CAAC,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAO;cAElC,MAAM,IAAI,cAAc;IAI3C,mBAAmB;IACnB,SAAS,CAAC,sBAAsB,IAAI,SAAS;cAS1B,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IASnE,SAAS,CAAC,aAAa,IAAI,OAAO;IAIlC,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAqBrC,SAAS,CAAC,+BAA+B,CAAC,YAAY,EAAE,YAAY,GAAG,MAAM;IAS7E,SAAS,CAAC,yBAAyB,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE;IA2B3G,SAAS,CAAC,mBAAmB,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;YA2CnD,iBAAiB;IA6B/B,UAAU,CAAC,UAAU,CAAC,EAAE,KAAK,GAAG,IAAI;IAMpC,QAAQ,IAAI,IAAI;IAIhB,UAAU,IAAI,IAAI;IAIlB,QAAQ,IAAI,IAAI;IAIhB,UAAU,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;IAU9C,QAAQ,IAAI,IAAI;CAYjB"}

package/build/src/md/ripple/internals/ripple.js

@@ -7,9 +7,9 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { createAnimationSignal, Easing } from '../../motion/animation.js';
+import { Easing } from '../../motion/animation.js';
 const PRESS_GROW_MS = 450;
-const MINIMUM_PRESS_MS = 225;
+const MINIMUM_PRESS_MS = 80;
 const INITIAL_ORIGIN_SCALE = 0.2;
 const PADDING = 10;
 const SOFT_EDGE_MINIMUM_SIZE = 75;
@@ -87,7 +87,8 @@ let UiRipple = (() => {
         rippleSize = (__runInitializers(this, _pressed_extraInitializers), '');
         rippleScale = '';
         initialSize = 0;
-        pressAnimationSignal = createAnimationSignal();
+        rippleStartEvent;
+        // protected pressAnimationSignal = createAnimationSignal()
         growAnimation = null;
         delayedEndPressHandle = null;
         render() {
@@ -166,11 +167,13 @@ let UiRipple = (() => {
             if (!mdRoot) {
                 return;
             }
+            this.pressed = true;
+            this.growAnimation?.cancel();
             this.determineRippleSize();
             const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent);
             const translateStart = `${startPoint.x}px, ${startPoint.y}px`;
             const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
-            const signal = this.pressAnimationSignal.start();
+            // const signal = this.pressAnimationSignal.start()
             const growAnimation = mdRoot.animate({
                 top: [0, 0],
                 left: [0, 0],
@@ -183,16 +186,41 @@ let UiRipple = (() => {
                 easing: Easing.STANDARD,
                 fill: ANIMATION_FILL,
             });
-            growAnimation.addEventListener('finish', () => {
-                this.pressAnimationSignal.finish();
-                this.growAnimation = null;
-            });
-            signal.addEventListener('abort', () => {
-                growAnimation.cancel();
-                this.growAnimation = null;
-            });
+            // growAnimation.addEventListener('finish', () => {
+            //   this.pressAnimationSignal.finish()
+            //   this.growAnimation = null
+            // })
+            // signal.addEventListener('abort', () => {
+            //   growAnimation.cancel()
+            //   this.growAnimation = null
+            // })
             this.growAnimation = growAnimation;
         }
+        async endPressAnimation() {
+            this.rippleStartEvent = undefined;
+            // this.state = State.INACTIVE
+            const animation = this.growAnimation;
+            let pressAnimationPlayState = Infinity;
+            if (typeof animation?.currentTime === 'number') {
+                pressAnimationPlayState = animation.currentTime;
+            }
+            else if (animation?.currentTime) {
+                pressAnimationPlayState = animation.currentTime.to('ms').value;
+            }
+            if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+                this.pressed = false;
+                return;
+            }
+            await new Promise((resolve) => {
+                setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
+            });
+            if (this.growAnimation !== animation) {
+                // A new press animation was started. The old animation was canceled and
+                // should not finish the pressed state.
+                return;
+            }
+            this.pressed = false;
+        }
         beginHover(hoverEvent) {
             if (hoverEvent?.pointerType !== 'touch') {
                 this.hovered = true;
@@ -209,6 +237,7 @@ let UiRipple = (() => {
         }
         beginPress(positionEvent) {
             this.pressed = true;
+            this.rippleStartEvent = positionEvent;
             if (this.delayedEndPressHandle !== null) {
                 clearTimeout(this.delayedEndPressHandle);
                 this.delayedEndPressHandle = null;
@@ -226,6 +255,7 @@ let UiRipple = (() => {
                     this.delayedEndPressHandle = null;
                 }, MINIMUM_PRESS_MS - pressAnimationPlayState);
             }
+            this.endPressAnimation();
         }
     };
 })();