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

package/navigationtab/lib/navigation-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-tab.js","sourceRoot":"","sources":["navigation-tab.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 '../../badge/badge.js';\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\nimport {NavigationTabState} from './state.js';\n\n/**\n * TODO(b/265346501): add docs\n */\nexport class NavigationTab extends LitElement implements NavigationTabState {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean, reflect: true}) active = false;\n  @property({type: Boolean}) hideInactiveLabel = false;\n  @property() label?: string;\n  @property() badgeValue = '';\n  @property({type: Boolean}) showBadge = false;\n\n  @state() protected showFocusRing = false;\n  @state() protected showRipple = false;\n\n  @query('button') buttonElement!: HTMLElement;\n\n  @queryAsync('md-ripple') ripple!: Promise<MdRipple|null>;\n\n  override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"md3-navigation-tab ${classMap(this.getRenderClasses())}\"\n        role=\"tab\"\n        aria-selected=\"${this.active}\"\n        aria-label=${ariaLabel || nothing}\n        tabindex=\"${this.active ? 0 : -1}\"\n        @focus=\"${this.handleFocus}\"\n        @blur=\"${this.handleBlur}\"\n        @pointerdown=\"${this.handlePointerDown}\"\n        @click=\"${this.handleClick}\"\n      ${ripple(this.getRipple)}>${this.renderFocusRing()}${\n        when(this.showRipple, this.renderRipple)}\n        <span aria-hidden=\"true\" class=\"md3-navigation-tab__icon-content\"\n          ><span class=\"md3-navigation-tab__active-indicator\"\n            ></span><span class=\"md3-navigation-tab__icon\"\n          ><slot name=\"inactiveIcon\"></slot\n        ></span>\n        <span class=\"md3-navigation-tab__icon md3-navigation-tab__icon--active\"\n          ><slot name=\"activeIcon\"></slot\n        ></span>${this.renderBadge()}</span\n        >${this.renderLabel()}\n      </button>`;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'md3-navigation-tab--hide-inactive-label': this.hideInactiveLabel,\n      'md3-navigation-tab--active': this.active,\n    };\n  }\n\n  protected renderFocusRing() {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  protected getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected renderRipple = () => {\n    return html`<md-ripple ?disabled=\"${\n        this.disabled}\" class=\"md3-navigation-tab__ripple\"></md-ripple>`;\n  };\n\n  protected renderBadge() {\n    return this.showBadge ?\n        html`<md-badge .value=\"${this.badgeValue}\"></md-badge>` :\n        nothing;\n  }\n\n  protected renderLabel() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    const ariaHidden = ariaLabel ? 'true' : 'false';\n    return !this.label ?\n        nothing :\n        html`\n        <span aria-hidden=\"${\n            ariaHidden}\" class=\"md3-navigation-tab__label-text\">${\n            this.label}</span>`;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    const event =\n        new Event('navigation-tab-rendered', {bubbles: true, composed: true});\n    this.dispatchEvent(event);\n  }\n\n  override focus() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      buttonElement.focus();\n    }\n  }\n\n  override blur() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      buttonElement.blur();\n    }\n  }\n\n  handleClick() {\n    // TODO(b/269772145): connect to ripple\n    this.dispatchEvent(new CustomEvent(\n        'navigation-tab-interaction',\n        {detail: {state: this}, bubbles: true, composed: true}));\n  }\n\n  handlePointerDown(e: PointerEvent) {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n}\n"]}
+{"version":3,"file":"navigation-tab.js","sourceRoot":"","sources":["navigation-tab.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 '../../badge/badge.js';\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\nimport {NavigationTabState} from './state.js';\n\n/**\n * TODO(b/265346501): add docs\n */\nexport class NavigationTab extends LitElement implements NavigationTabState {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean, reflect: true}) active = false;\n  @property({type: Boolean}) hideInactiveLabel = false;\n  @property() label?: string;\n  @property() badgeValue = '';\n  @property({type: Boolean}) showBadge = false;\n\n  @state() private showRipple = false;\n\n  @query('button') buttonElement!: HTMLElement|null;\n\n  @queryAsync('md-ripple') ripple!: Promise<MdRipple|null>;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"md3-navigation-tab ${classMap(this.getRenderClasses())}\"\n        role=\"tab\"\n        aria-selected=\"${this.active}\"\n        aria-label=${ariaLabel || nothing}\n        tabindex=\"${this.active ? 0 : -1}\"\n        @click=\"${this.handleClick}\"\n      ${ripple(this.getRipple)}>\n        <md-focus-ring></md-focus-ring>\n        ${when(this.showRipple, this.renderRipple)}\n        <span aria-hidden=\"true\" class=\"md3-navigation-tab__icon-content\"\n          ><span class=\"md3-navigation-tab__active-indicator\"\n            ></span><span class=\"md3-navigation-tab__icon\"\n          ><slot name=\"inactiveIcon\"></slot\n        ></span>\n        <span class=\"md3-navigation-tab__icon md3-navigation-tab__icon--active\"\n          ><slot name=\"activeIcon\"></slot\n        ></span>${this.renderBadge()}</span\n        >${this.renderLabel()}\n      </button>`;\n  }\n\n  private getRenderClasses() {\n    return {\n      'md3-navigation-tab--hide-inactive-label': this.hideInactiveLabel,\n      'md3-navigation-tab--active': this.active,\n    };\n  }\n\n  private readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {\n    return html`<md-ripple ?disabled=\"${\n        this.disabled}\" class=\"md3-navigation-tab__ripple\"></md-ripple>`;\n  };\n\n  private renderBadge() {\n    return this.showBadge ?\n        html`<md-badge .value=\"${this.badgeValue}\"></md-badge>` :\n        nothing;\n  }\n\n  private renderLabel() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    const ariaHidden = ariaLabel ? 'true' : 'false';\n    return !this.label ?\n        nothing :\n        html`\n        <span aria-hidden=\"${\n            ariaHidden}\" class=\"md3-navigation-tab__label-text\">${\n            this.label}</span>`;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    const event =\n        new Event('navigation-tab-rendered', {bubbles: true, composed: true});\n    this.dispatchEvent(event);\n  }\n\n  override focus() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      buttonElement.focus();\n    }\n  }\n\n  override blur() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      buttonElement.blur();\n    }\n  }\n\n  handleClick() {\n    // TODO(b/269772145): connect to ripple\n    this.dispatchEvent(new CustomEvent(\n        'navigation-tab-interaction',\n        {detail: {state: this}, bubbles: true, composed: true}));\n  }\n}\n"]}

package/navigationtab/lib/state.d.ts

@@ -20,5 +20,5 @@ export interface NavigationTabState {
      * TODO(b/229015424): Remove this when the jscompiler rename issue is
      * understood.
      */
-    buttonElement: HTMLElement;
+    buttonElement: HTMLElement | null;
 }

package/navigationtab/lib/state.js.map

@@ -1 +1 @@
-{"version":3,"file":"state.js","sourceRoot":"","sources":["state.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * The state of a navigation tab.\n */\nexport interface NavigationTabState {\n  /**\n   * Active state of the navigation tab.\n   */\n  active: boolean;\n  /**\n   * If true, when inactive label will be hidden.\n   */\n  hideInactiveLabel: boolean;\n\n  /**\n   * Inner button for the tab\n   * TODO(b/229015424): Remove this when the jscompiler rename issue is\n   * understood.\n   */\n  buttonElement: HTMLElement;\n}\n"]}
+{"version":3,"file":"state.js","sourceRoot":"","sources":["state.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * The state of a navigation tab.\n */\nexport interface NavigationTabState {\n  /**\n   * Active state of the navigation tab.\n   */\n  active: boolean;\n  /**\n   * If true, when inactive label will be hidden.\n   */\n  hideInactiveLabel: boolean;\n\n  /**\n   * Inner button for the tab\n   * TODO(b/229015424): Remove this when the jscompiler rename issue is\n   * understood.\n   */\n  buttonElement: HTMLElement|null;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material/web",
-  "version": "1.0.0-pre.7",
+  "version": "1.0.0-pre.8",
   "publishConfig": {
     "access": "public"
   },

package/radio/lib/_radio.scss

@@ -45,7 +45,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 
     @include focus-ring.theme(
       (
-        offset: -2px,
+        'offset': -2px,
       )
     );
 

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-color: var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-radio-selected-focus-state-layer-opacity, 0.12);--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-color: var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-opacity: var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-offset:-2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([checked]){--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}input,md-ripple,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}:host([checked]) .icon{fill:var(--_selected-icon-color)}:host([checked]) .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host([checked]:hover) .icon{fill:var(--_selected-hover-icon-color)}:host([checked]:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host([checked]:active) .icon{fill:var(--_selected-pressed-icon-color)}:host([checked][disabled]) .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */
+export const styles = css `:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-color: var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-radio-selected-focus-state-layer-opacity, 0.12);--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-color: var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-opacity: var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-offset: -2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([checked]){--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}input,md-ripple,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}:host([checked]) .icon{fill:var(--_selected-icon-color)}:host([checked]) .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host([checked]:hover) .icon{fill:var(--_selected-hover-icon-color)}:host([checked]:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host([checked]:active) .icon{fill:var(--_selected-pressed-icon-color)}:host([checked][disabled]) .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */
 `;
 //# sourceMappingURL=radio-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio-styles.css.js","sourceRoot":"","sources":["radio-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-color: var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-radio-selected-focus-state-layer-opacity, 0.12);--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-color: var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-opacity: var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-offset:-2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([checked]){--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}input,md-ripple,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}:host([checked]) .icon{fill:var(--_selected-icon-color)}:host([checked]) .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host([checked]:hover) .icon{fill:var(--_selected-hover-icon-color)}:host([checked]:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host([checked]:active) .icon{fill:var(--_selected-pressed-icon-color)}:host([checked][disabled]) .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */\n`;\n "]}
+{"version":3,"file":"radio-styles.css.js","sourceRoot":"","sources":["radio-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-color: var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-radio-selected-focus-state-layer-opacity, 0.12);--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-color: var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-opacity: var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-offset: -2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([checked]){--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}input,md-ripple,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}:host([checked]) .icon{fill:var(--_selected-icon-color)}:host([checked]) .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host([checked]:hover) .icon{fill:var(--_selected-hover-icon-color)}:host([checked]:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host([checked]:active) .icon{fill:var(--_selected-pressed-icon-color)}:host([checked][disabled]) .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */\n`;\n "]}

package/radio/lib/radio.d.ts

@@ -5,7 +5,7 @@
  */
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement } from 'lit';
 import { getFormValue } from '../../controller/form-controller.js';
 declare const CHECKED: unique symbol;
 /**
@@ -42,18 +42,13 @@ export declare class Radio extends LitElement {
     private readonly input;
     private readonly ripple;
     private readonly selectionController;
-    private showFocusRing;
     private showRipple;
     constructor();
     [getFormValue](): string;
     focus(): void;
-    protected render(): TemplateResult;
-    private handleBlur;
-    private handleFocus;
+    protected render(): import("lit-html").TemplateResult<1>;
     private handleChange;
-    private handlePointerDown;
     private readonly getRipple;
     private readonly renderRipple;
-    private renderFocusRing;
 }
 export {};

package/radio/lib/radio.js

@@ -13,7 +13,6 @@ import { when } from 'lit/directives/when.js';
 import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
 import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../controller/events.js';
 import { FormController, getFormValue } from '../../controller/form-controller.js';
-import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
 import { ripple } from '../../ripple/directive.js';
 import { SingleSelectionController } from './single-selection-controller.js';
 const CHECKED = Symbol('checked');
@@ -58,7 +57,6 @@ export class Radio extends LitElement {
          */
         this.name = '';
         this.selectionController = new SingleSelectionController(this);
-        this.showFocusRing = false;
         this.showRipple = false;
         this.getRipple = () => {
             this.showRipple = true;
@@ -90,7 +88,7 @@ export class Radio extends LitElement {
         const { ariaLabel } = this;
         return html `
       ${when(this.showRipple, this.renderRipple)}
-      ${this.renderFocusRing()}
+      <md-focus-ring for="input"></md-focus-ring>
       <svg class="icon" viewBox="0 0 20 20">
         <mask id="cutout">
           <rect width="100%" height="100%" fill="white" />
@@ -100,6 +98,7 @@ export class Radio extends LitElement {
         <circle class="inner circle" cx="10" cy="10" r="5" />
       </svg>
       <input
+        id="input"
         type="radio"
         name=${this.name}
         aria-label=${ariaLabel || nothing}
@@ -107,19 +106,10 @@ export class Radio extends LitElement {
         .value=${this.value}
         ?disabled=${this.disabled}
         @change=${this.handleChange}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-        @pointerdown=${this.handlePointerDown}
         ${ripple(this.getRipple)}
       >
     `;
     }
-    handleBlur() {
-        this.showFocusRing = false;
-    }
-    handleFocus() {
-        this.showFocusRing = shouldShowStrongFocus();
-    }
     handleChange(event) {
         if (this.disabled) {
             return;
@@ -128,13 +118,6 @@ export class Radio extends LitElement {
         this.checked = true;
         redispatchEvent(this, event);
     }
-    handlePointerDown() {
-        pointerPress();
-        this.showFocusRing = shouldShowStrongFocus();
-    }
-    renderFocusRing() {
-        return html `<md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>`;
-    }
 }
 _a = Radio;
 (() => {
@@ -163,9 +146,6 @@ __decorate([
 __decorate([
     queryAsync('md-ripple')
 ], Radio.prototype, "ripple", void 0);
-__decorate([
-    state()
-], Radio.prototype, "showFocusRing", void 0);
 __decorate([
     state()
 ], Radio.prototype, "showRipple", void 0);

package/radio/lib/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AACxE,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAC,uBAAuB,EAAE,iBAAiB,EAAE,eAAe,EAAC,MAAM,4BAA4B,CAAC;AACvG,OAAO,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAC,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAIjD,OAAO,EAAC,yBAAyB,EAAC,MAAM,kCAAkC,CAAC;AAE3E,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAElC;;GAEG;AACH,MAAM,OAAO,KAAM,SAAQ,UAAU;IAanC;;OAEG;IAEH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC;IACvB,CAAC;IACD,IAAI,OAAO,CAAC,OAAgB;QAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAChC,IAAI,UAAU,KAAK,OAAO,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC1C,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,CAAC;IACjD,CAAC;IAmBD;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC;IAQD;QACE,KAAK,EAAE,CAAC;QA/BV,QAAS,GAAG,KAAK,CAAC;QAElB;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE3D;;WAEG;QACS,UAAK,GAAG,IAAI,CAAC;QAEzB;;WAEG;QACwB,SAAI,GAAG,EAAE,CAAC;QAWpB,wBAAmB,GAAG,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAC1D,kBAAa,GAAG,KAAK,CAAC;QACtB,eAAU,GAAG,KAAK,CAAC;QA8EnB,cAAS,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC,CAAC;QAEe,iBAAY,GAAG,GAAG,EAAE;YACnC,OAAO,IAAI,CAAA,kCAAkC,IAAI,CAAC,QAAQ,eAAe,CAAC;QAC5E,CAAC,CAAC;QAjFA,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC7C,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE;gBAC9C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE;oBAC7B,OAAO;iBACR;gBACD,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,uBAAuB,CAAC,IAAI,CAAC,KAAM,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,OA7CC,OAAO,EA6CP,YAAY,EAAC;QACZ,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1C,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC;IACtB,CAAC;IAEkB,MAAM;QACvB,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;QACxC,IAAI,CAAC,eAAe,EAAE;;;;;;;;;;;eAWf,IAAI,CAAC,IAAI;qBACH,SAAS,IAAI,OAAO;mBACtB,IAAI,CAAC,OAAO;iBACd,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,YAAY;iBAClB,IAAI,CAAC,WAAW;gBACjB,IAAI,CAAC,UAAU;uBACR,IAAI,CAAC,iBAAiB;UACnC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;;KAE3B,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,yEAAyE;QACzE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEO,iBAAiB;QACvB,YAAY,EAAE,CAAC;QACf,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAWO,eAAe;QACrB,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,aAAa,mBAAmB,CAAC;IAC9E,CAAC;;;AAnJD;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAEe,uBAAiB,GACZ,EAAC,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAC,CAAC;AAE7E;;GAEG;AACI,oBAAc,GAAG,IAAI,CAAC;AAM7B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oCAGxC;AAiByC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAkB;AAK/C;IAAX,QAAQ,EAAE;oCAAc;AAKE;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;mCAAW;AASrB;IAAf,KAAK,CAAC,OAAO,CAAC;oCAAgD;AACtC;IAAxB,UAAU,CAAC,WAAW,CAAC;qCAAkD;AAEjE;IAAR,KAAK,EAAE;4CAA+B;AAC9B;IAAR,KAAK,EAAE;yCAA4B","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../controller/events.js';\nimport {FormController, getFormValue} from '../../controller/form-controller.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\n\n/**\n * A radio component.\n */\nexport class Radio extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  /**\n   * @nocollapse\n   */\n  static formAssociated = true;\n\n  /**\n   * Whether or not the radio is selected.\n   */\n  @property({type: Boolean, reflect: true})\n  get checked() {\n    return this[CHECKED];\n  }\n  set checked(checked: boolean) {\n    const wasChecked = this.checked;\n    if (wasChecked === checked) {\n      return;\n    }\n\n    this[CHECKED] = checked;\n    this.requestUpdate('checked', wasChecked);\n    this.selectionController.handleCheckedChange();\n  }\n\n  [CHECKED] = false;\n\n  /**\n   * Whether or not the radio is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  @property({reflect: true}) name = '';\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.closest('form');\n  }\n\n  @query('input') private readonly input!: HTMLInputElement|null;\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n  private readonly selectionController = new SingleSelectionController(this);\n  @state() private showFocusRing = false;\n  @state() private showRipple = false;\n\n  constructor() {\n    super();\n    this.addController(new FormController(this));\n    this.addController(this.selectionController);\n    if (!isServer) {\n      this.addEventListener('click', (event: Event) => {\n        if (!isActivationClick(event)) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.input!);\n      });\n    }\n  }\n\n  [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override focus() {\n    this.input?.focus();\n  }\n\n  protected override render(): TemplateResult {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      ${when(this.showRipple, this.renderRipple)}\n      ${this.renderFocusRing()}\n      <svg class=\"icon\" viewBox=\"0 0 20 20\">\n        <mask id=\"cutout\">\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n          <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\" />\n        </mask>\n        <circle class=\"outer circle\" cx=\"10\" cy=\"10\" r=\"10\" mask=\"url(#cutout)\" />\n        <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\" />\n      </svg>\n      <input\n        type=\"radio\"\n        name=${this.name}\n        aria-label=${ariaLabel || nothing}\n        .checked=${this.checked}\n        .value=${this.value}\n        ?disabled=${this.disabled}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @pointerdown=${this.handlePointerDown}\n        ${ripple(this.getRipple)}\n      >\n    `;\n  }\n\n  private handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  private handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private handleChange(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    // Per spec, the change event on a radio input always represents checked.\n    this.checked = true;\n    redispatchEvent(this, event);\n  }\n\n  private handlePointerDown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {\n    return html`<md-ripple unbounded ?disabled=${this.disabled}></md-ripple>`;\n  };\n\n  private renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>`;\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../controller/events.js';\nimport {FormController, getFormValue} from '../../controller/form-controller.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\n\n/**\n * A radio component.\n */\nexport class Radio extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  /**\n   * @nocollapse\n   */\n  static formAssociated = true;\n\n  /**\n   * Whether or not the radio is selected.\n   */\n  @property({type: Boolean, reflect: true})\n  get checked() {\n    return this[CHECKED];\n  }\n  set checked(checked: boolean) {\n    const wasChecked = this.checked;\n    if (wasChecked === checked) {\n      return;\n    }\n\n    this[CHECKED] = checked;\n    this.requestUpdate('checked', wasChecked);\n    this.selectionController.handleCheckedChange();\n  }\n\n  [CHECKED] = false;\n\n  /**\n   * Whether or not the radio is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  @property({reflect: true}) name = '';\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.closest('form');\n  }\n\n  @query('input') private readonly input!: HTMLInputElement|null;\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n  private readonly selectionController = new SingleSelectionController(this);\n  @state() private showRipple = false;\n\n  constructor() {\n    super();\n    this.addController(new FormController(this));\n    this.addController(this.selectionController);\n    if (!isServer) {\n      this.addEventListener('click', (event: Event) => {\n        if (!isActivationClick(event)) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.input!);\n      });\n    }\n  }\n\n  [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override focus() {\n    this.input?.focus();\n  }\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      ${when(this.showRipple, this.renderRipple)}\n      <md-focus-ring for=\"input\"></md-focus-ring>\n      <svg class=\"icon\" viewBox=\"0 0 20 20\">\n        <mask id=\"cutout\">\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n          <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\" />\n        </mask>\n        <circle class=\"outer circle\" cx=\"10\" cy=\"10\" r=\"10\" mask=\"url(#cutout)\" />\n        <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\" />\n      </svg>\n      <input\n        id=\"input\"\n        type=\"radio\"\n        name=${this.name}\n        aria-label=${ariaLabel || nothing}\n        .checked=${this.checked}\n        .value=${this.value}\n        ?disabled=${this.disabled}\n        @change=${this.handleChange}\n        ${ripple(this.getRipple)}\n      >\n    `;\n  }\n\n  private handleChange(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    // Per spec, the change event on a radio input always represents checked.\n    this.checked = true;\n    redispatchEvent(this, event);\n  }\n\n  private readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {\n    return html`<md-ripple unbounded ?disabled=${this.disabled}></md-ripple>`;\n  };\n}\n"]}

package/ripple/lib/ripple.js

@@ -254,6 +254,9 @@ export class Ripple extends LitElement {
         return { startPoint, endPoint };
     }
     startPressAnimation(positionEvent) {
+        if (!this.mdRoot) {
+            return;
+        }
         this.pressed = true;
         this.growAnimation?.cancel();
         this.determineRippleSize();
@@ -277,6 +280,7 @@ export class Ripple extends LitElement {
         });
     }
     async endPressAnimation() {
+        this.state = State.INACTIVE;
         const animation = this.growAnimation;
         const pressAnimationPlayState = animation?.currentTime ?? Infinity;
         if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {

package/ripple/lib/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.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 {html, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {EASING} from '../../motion/animation.js';\n\nconst PRESS_GROW_MS = 450;\nconst MINIMUM_PRESS_MS = 225;\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst PADDING = 10;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\nconst PRESS_PSEUDO = '::after';\nconst ANIMATION_FILL = 'forwards';\n\n/**\n * Interaction states for the ripple.\n *\n * On Touch:\n *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`\n *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`\n *\n * On Mouse or Pen:\n *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`\n */\nenum State {\n  /**\n   * Initial state of the control, no touch in progress.\n   *\n   * Transitions:\n   *   - on touch down: transition to `TOUCH_DELAY`.\n   *   - on mouse down: transition to `WAITING_FOR_CLICK`.\n   */\n  INACTIVE,\n  /**\n   * Touch down has been received, waiting to determine if it's a swipe or\n   * scroll.\n   *\n   * Transitions:\n   *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.\n   *   - on cancel: transition to `INACTIVE`.\n   *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.\n   */\n  TOUCH_DELAY,\n  /**\n   * A touch has been deemed to be a press\n   *\n   * Transitions:\n   *  - on up: transition to `WAITING_FOR_CLICK`.\n   */\n  HOLDING,\n  /**\n   * The user touch has finished, transition into rest state.\n   *\n   * Transitions:\n   *   - on click end press; transition to `INACTIVE`.\n   */\n  WAITING_FOR_CLICK\n}\n\n/**\n * Delay reacting to touch so that we do not show the ripple for a swipe or\n * scroll interaction.\n */\nconst TOUCH_DELAY_MS = 150;\n\n/**\n * A ripple component.\n */\nexport class Ripple extends LitElement {\n  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)\n  // Remove Safari workaround that requires reflecting `unbounded` so\n  // it can be styled against.\n  /**\n   * Sets the ripple to be an unbounded circle.\n   */\n  @property({type: Boolean, reflect: true}) unbounded = false;\n\n  /**\n   * Disables the ripple.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @state() private hovered = false;\n  @state() private focused = false;\n  @state() private pressed = false;\n\n  @query('.surface') private readonly mdRoot!: HTMLElement;\n  private rippleSize = '';\n  private rippleScale = '';\n  private initialSize = 0;\n  private growAnimation?: Animation;\n  private state = State.INACTIVE;\n  private rippleStartEvent?: PointerEvent;\n  private checkBoundsAfterContextMenu = false;\n\n  handlePointerenter(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = true;\n  }\n\n  handlePointerleave(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = false;\n\n    // release a held mouse or pen press that moves outside the element\n    if (this.state !== State.INACTIVE) {\n      this.endPressAnimation();\n    }\n  }\n\n  handleFocusin() {\n    this.focused = true;\n  }\n\n  handleFocusout() {\n    this.focused = false;\n  }\n\n  handlePointerup(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    if (this.state === State.HOLDING) {\n      this.state = State.WAITING_FOR_CLICK;\n      return;\n    }\n\n    if (this.state === State.TOUCH_DELAY) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(this.rippleStartEvent);\n      return;\n    }\n  }\n\n  async handlePointerdown(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.rippleStartEvent = event;\n    if (!this.isTouch(event)) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(event);\n      return;\n    }\n\n    // after a longpress contextmenu event, an extra `pointerdown` can be\n    // dispatched to the pressed element. Check that the down is within\n    // bounds of the element in this case.\n    if (this.checkBoundsAfterContextMenu && !this.inBounds(event)) {\n      return;\n    }\n\n    this.checkBoundsAfterContextMenu = false;\n\n    // Wait for a hold after touch delay\n    this.state = State.TOUCH_DELAY;\n    await new Promise(resolve => {\n      setTimeout(resolve, TOUCH_DELAY_MS);\n    });\n\n    if (this.state !== State.TOUCH_DELAY) {\n      return;\n    }\n\n    this.state = State.HOLDING;\n    this.startPressAnimation(event);\n  }\n\n  handleClick() {\n    // Click is a MouseEvent in Firefox and Safari, so we cannot use\n    // `shouldReactToEvent`\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.state === State.WAITING_FOR_CLICK) {\n      this.endPressAnimation();\n      return;\n    }\n\n    if (this.state === State.INACTIVE) {\n      // keyboard synthesized click event\n      this.startPressAnimation();\n      this.endPressAnimation();\n    }\n  }\n\n  handlePointercancel(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.endPressAnimation();\n  }\n\n  handleContextmenu() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checkBoundsAfterContextMenu = true;\n    this.endPressAnimation();\n  }\n\n  protected override render() {\n    const classes = {\n      'hovered': this.hovered,\n      'focused': this.focused,\n      'pressed': this.pressed,\n      'unbounded': this.unbounded,\n    };\n\n    return html`<div class=\"surface ${classMap(classes)}\"></div>`;\n  }\n\n  protected override update(changedProps: PropertyValues<this>) {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.hovered = false;\n      this.focused = false;\n      this.pressed = false;\n    }\n    super.update(changedProps);\n  }\n\n  private getDimensions() {\n    return (this.parentElement ?? this).getBoundingClientRect();\n  }\n\n  private determineRippleSize() {\n    const {height, width} = this.getDimensions();\n    const maxDim = Math.max(height, width);\n    const softEdgeSize =\n        Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);\n\n\n    let maxRadius = maxDim;\n    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);\n\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);\n    maxRadius = hypotenuse + PADDING;\n\n    // ensure `initialSize` is even for unbounded\n    if (this.unbounded) {\n      initialSize = initialSize - (initialSize % 2);\n    }\n\n    this.initialSize = initialSize;\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;\n    this.rippleSize = `${this.initialSize}px`;\n  }\n\n  private getNormalizedPointerEventCoords(pointerEvent: PointerEvent):\n      {x: number, y: number} {\n    const {scrollX, scrollY} = window;\n    const {left, top} = this.getDimensions();\n    const documentX = scrollX + left;\n    const documentY = scrollY + top;\n    const {pageX, pageY} = pointerEvent;\n    return {x: pageX - documentX, y: pageY - documentY};\n  }\n\n  private getTranslationCoordinates(positionEvent?: Event) {\n    const {height, width} = this.getDimensions();\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    };\n\n    let startPoint;\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent);\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      };\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - (this.initialSize / 2),\n      y: startPoint.y - (this.initialSize / 2),\n    };\n\n    return {startPoint, endPoint};\n  }\n\n  private startPressAnimation(positionEvent?: Event) {\n    this.pressed = true;\n    this.growAnimation?.cancel();\n    this.determineRippleSize();\n    const {startPoint, endPoint} =\n        this.getTranslationCoordinates(positionEvent);\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n\n    this.growAnimation = this.mdRoot.animate(\n        {\n          top: [0, 0],\n          left: [0, 0],\n          height: [this.rippleSize, this.rippleSize],\n          width: [this.rippleSize, this.rippleSize],\n          transform: [\n            `translate(${translateStart}) scale(1)`,\n            `translate(${translateEnd}) scale(${this.rippleScale})`\n          ],\n        },\n        {\n          pseudoElement: PRESS_PSEUDO,\n          duration: PRESS_GROW_MS,\n          easing: EASING.STANDARD,\n          fill: ANIMATION_FILL\n        });\n  }\n\n  private async endPressAnimation() {\n    const animation = this.growAnimation;\n    const pressAnimationPlayState = animation?.currentTime ?? Infinity;\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false;\n      return;\n    }\n\n    await new Promise(resolve => {\n      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);\n    });\n\n    if (this.growAnimation !== animation) {\n      // A new press animation was started. The old animation was canceled and\n      // should not finish the pressed state.\n      return;\n    }\n\n    this.pressed = false;\n  }\n\n  /**\n   * Returns `true` if\n   *  - the ripple element is enabled\n   *  - the pointer is primary for the input type\n   *  - the pointer is the pointer that started the interaction, or will start\n   * the interaction\n   *  - the pointer is a touch, or the pointer state has the primary button\n   * held, or the pointer is hovering\n   */\n  private shouldReactToEvent(event: PointerEvent) {\n    if (this.disabled || !event.isPrimary) {\n      return false;\n    }\n\n    if (this.rippleStartEvent &&\n        this.rippleStartEvent.pointerId !== event.pointerId) {\n      return false;\n    }\n\n    if (event.type === 'pointerenter' || event.type === 'pointerleave') {\n      return !this.isTouch(event);\n    }\n\n    const isPrimaryButton = event.buttons === 1;\n    return this.isTouch(event) || isPrimaryButton;\n  }\n\n  /**\n   * Check if the event is within the bounds of the element.\n   *\n   * This is only needed for the \"stuck\" contextmenu longpress on Chrome.\n   */\n  private inBounds({x, y}: PointerEvent) {\n    const {top, left, bottom, right} = this.getBoundingClientRect();\n    return x >= left && x <= right && y >= top && y <= bottom;\n  }\n\n  private isTouch({pointerType}: PointerEvent) {\n    return pointerType === 'touch';\n  }\n}\n"]}
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAEjD,MAAM,aAAa,GAAG,GAAG,CAAC;AAC1B,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAC7B,MAAM,oBAAoB,GAAG,GAAG,CAAC;AACjC,MAAM,OAAO,GAAG,EAAE,CAAC;AACnB,MAAM,sBAAsB,GAAG,EAAE,CAAC;AAClC,MAAM,yBAAyB,GAAG,IAAI,CAAC;AACvC,MAAM,YAAY,GAAG,SAAS,CAAC;AAC/B,MAAM,cAAc,GAAG,UAAU,CAAC;AAElC;;;;;;;;;GASG;AACH,IAAK,KAiCJ;AAjCD,WAAK,KAAK;IACR;;;;;;OAMG;IACH,yCAAQ,CAAA;IACR;;;;;;;;OAQG;IACH,+CAAW,CAAA;IACX;;;;;OAKG;IACH,uCAAO,CAAA;IACP;;;;;OAKG;IACH,2DAAiB,CAAA;AACnB,CAAC,EAjCI,KAAK,KAAL,KAAK,QAiCT;AAED;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAC;AAE3B;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QACE,uDAAuD;QACvD,mEAAmE;QACnE,4BAA4B;QAC5B;;WAEG;QACuC,cAAS,GAAG,KAAK,CAAC;QAE5D;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE1C,YAAO,GAAG,KAAK,CAAC;QAChB,YAAO,GAAG,KAAK,CAAC;QAChB,YAAO,GAAG,KAAK,CAAC;QAGzB,eAAU,GAAG,EAAE,CAAC;QAChB,gBAAW,GAAG,EAAE,CAAC;QACjB,gBAAW,GAAG,CAAC,CAAC;QAEhB,UAAK,GAAG,KAAK,CAAC,QAAQ,CAAC;QAEvB,gCAA2B,GAAG,KAAK,CAAC;IAyS9C,CAAC;IAvSC,kBAAkB,CAAC,KAAmB;QACpC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;YACnC,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,kBAAkB,CAAC,KAAmB;QACpC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;YACnC,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QAErB,mEAAmE;QACnE,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,EAAE;YACjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;IACH,CAAC;IAED,aAAa;QACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,eAAe,CAAC,KAAmB;QACjC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;YACnC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,EAAE;YAChC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACrC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,WAAW,EAAE;YACpC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACrC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAChD,OAAO;SACR;IACH,CAAC;IAED,KAAK,CAAC,iBAAiB,CAAC,KAAmB;QACzC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;YACnC,OAAO;SACR;QAED,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACrC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAChC,OAAO;SACR;QAED,qEAAqE;QACrE,mEAAmE;QACnE,sCAAsC;QACtC,IAAI,IAAI,CAAC,2BAA2B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YAC7D,OAAO;SACR;QAED,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;QAEzC,oCAAoC;QACpC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC;QAC/B,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,WAAW,EAAE;YACpC,OAAO;SACR;QAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,WAAW;QACT,gEAAgE;QAChE,uBAAuB;QACvB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,iBAAiB,EAAE;YAC1C,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,OAAO;SACR;QAED,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,EAAE;YACjC,mCAAmC;YACnC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;IACH,CAAC;IAED,mBAAmB,CAAC,KAAmB;QACrC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;YACnC,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;QACxC,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEkB,MAAM;QACvB,MAAM,OAAO,GAAG;YACd,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,WAAW,EAAE,IAAI,CAAC,SAAS;SAC5B,CAAC;QAEF,OAAO,IAAI,CAAA,uBAAuB,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC;IAChE,CAAC;IAEkB,MAAM,CAAC,YAAkC;QAC1D,IAAI,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;QACD,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAC7B,CAAC;IAEO,aAAa;QACnB,OAAO,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC9D,CAAC;IAEO,mBAAmB;QACzB,MAAM,EAAC,MAAM,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACvC,MAAM,YAAY,GACd,IAAI,CAAC,GAAG,CAAC,yBAAyB,GAAG,MAAM,EAAE,sBAAsB,CAAC,CAAC;QAGzE,IAAI,SAAS,GAAG,MAAM,CAAC;QACvB,IAAI,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,oBAAoB,CAAC,CAAC;QAE5D,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC;QACvD,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;QAEjC,6CAA6C;QAC7C,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,WAAW,GAAG,WAAW,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,SAAS,GAAG,YAAY,CAAC,GAAG,WAAW,EAAE,CAAC;QACjE,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC;IAC5C,CAAC;IAEO,+BAA+B,CAAC,YAA0B;QAEhE,MAAM,EAAC,OAAO,EAAE,OAAO,EAAC,GAAG,MAAM,CAAC;QAClC,MAAM,EAAC,IAAI,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACzC,MAAM,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;QACjC,MAAM,SAAS,GAAG,OAAO,GAAG,GAAG,CAAC;QAChC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAC,GAAG,YAAY,CAAC;QACpC,OAAO,EAAC,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,EAAC,CAAC;IACtD,CAAC;IAEO,yBAAyB,CAAC,aAAqB;QACrD,MAAM,EAAC,MAAM,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAC7C,oBAAoB;QACpB,MAAM,QAAQ,GAAG;YACf,CAAC,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;YACjC,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;SACnC,CAAC;QAEF,IAAI,UAAU,CAAC;QACf,IAAI,aAAa,YAAY,YAAY,EAAE;YACzC,UAAU,GAAG,IAAI,CAAC,+BAA+B,CAAC,aAAa,CAAC,CAAC;SAClE;aAAM;YACL,UAAU,GAAG;gBACX,CAAC,EAAE,KAAK,GAAG,CAAC;gBACZ,CAAC,EAAE,MAAM,GAAG,CAAC;aACd,CAAC;SACH;QAED,4BAA4B;QAC5B,UAAU,GAAG;YACX,CAAC,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;YACxC,CAAC,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;SACzC,CAAC;QAEF,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAC,CAAC;IAChC,CAAC;IAEO,mBAAmB,CAAC,aAAqB;QAC/C,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,MAAM,EAAC,UAAU,EAAE,QAAQ,EAAC,GACxB,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,CAAC;QAClD,MAAM,cAAc,GAAG,GAAG,UAAU,CAAC,CAAC,OAAO,UAAU,CAAC,CAAC,IAAI,CAAC;QAC9D,MAAM,YAAY,GAAG,GAAG,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC,CAAC,IAAI,CAAC;QAExD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CACpC;YACE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACX,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACZ,MAAM,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC;YAC1C,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC;YACzC,SAAS,EAAE;gBACT,aAAa,cAAc,YAAY;gBACvC,aAAa,YAAY,WAAW,IAAI,CAAC,WAAW,GAAG;aACxD;SACF,EACD;YACE,aAAa,EAAE,YAAY;YAC3B,QAAQ,EAAE,aAAa;YACvB,MAAM,EAAE,MAAM,CAAC,QAAQ;YACvB,IAAI,EAAE,cAAc;SACrB,CAAC,CAAC;IACT,CAAC;IAEO,KAAK,CAAC,iBAAiB;QAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;QACrC,MAAM,uBAAuB,GAAG,SAAS,EAAE,WAAW,IAAI,QAAQ,CAAC;QACnE,IAAI,uBAAuB,IAAI,gBAAgB,EAAE;YAC/C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,OAAO;SACR;QAED,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,uBAAuB,CAAC,CAAC;QAClE,CAAC,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;YACpC,wEAAwE;YACxE,uCAAuC;YACvC,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED;;;;;;;;OAQG;IACK,kBAAkB,CAAC,KAAmB;QAC5C,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YACrC,OAAO,KAAK,CAAC;SACd;QAED,IAAI,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,gBAAgB,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,EAAE;YACvD,OAAO,KAAK,CAAC;SACd;QAED,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,EAAE;YAClE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SAC7B;QAED,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,KAAK,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,eAAe,CAAC;IAChD,CAAC;IAED;;;;OAIG;IACK,QAAQ,CAAC,EAAC,CAAC,EAAE,CAAC,EAAe;QACnC,MAAM,EAAC,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAChE,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,MAAM,CAAC;IAC5D,CAAC;IAEO,OAAO,CAAC,EAAC,WAAW,EAAe;QACzC,OAAO,WAAW,KAAK,OAAO,CAAC;IACjC,CAAC;CACF;AA3T2C;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAmB;AAKlB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAkB;AAElD;IAAR,KAAK,EAAE;uCAAyB;AACxB;IAAR,KAAK,EAAE;uCAAyB;AACxB;IAAR,KAAK,EAAE;uCAAyB;AAEd;IAAlB,KAAK,CAAC,UAAU,CAAC;sCAA4C","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {EASING} from '../../motion/animation.js';\n\nconst PRESS_GROW_MS = 450;\nconst MINIMUM_PRESS_MS = 225;\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst PADDING = 10;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\nconst PRESS_PSEUDO = '::after';\nconst ANIMATION_FILL = 'forwards';\n\n/**\n * Interaction states for the ripple.\n *\n * On Touch:\n *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`\n *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`\n *\n * On Mouse or Pen:\n *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`\n */\nenum State {\n  /**\n   * Initial state of the control, no touch in progress.\n   *\n   * Transitions:\n   *   - on touch down: transition to `TOUCH_DELAY`.\n   *   - on mouse down: transition to `WAITING_FOR_CLICK`.\n   */\n  INACTIVE,\n  /**\n   * Touch down has been received, waiting to determine if it's a swipe or\n   * scroll.\n   *\n   * Transitions:\n   *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.\n   *   - on cancel: transition to `INACTIVE`.\n   *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.\n   */\n  TOUCH_DELAY,\n  /**\n   * A touch has been deemed to be a press\n   *\n   * Transitions:\n   *  - on up: transition to `WAITING_FOR_CLICK`.\n   */\n  HOLDING,\n  /**\n   * The user touch has finished, transition into rest state.\n   *\n   * Transitions:\n   *   - on click end press; transition to `INACTIVE`.\n   */\n  WAITING_FOR_CLICK\n}\n\n/**\n * Delay reacting to touch so that we do not show the ripple for a swipe or\n * scroll interaction.\n */\nconst TOUCH_DELAY_MS = 150;\n\n/**\n * A ripple component.\n */\nexport class Ripple extends LitElement {\n  // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)\n  // Remove Safari workaround that requires reflecting `unbounded` so\n  // it can be styled against.\n  /**\n   * Sets the ripple to be an unbounded circle.\n   */\n  @property({type: Boolean, reflect: true}) unbounded = false;\n\n  /**\n   * Disables the ripple.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @state() private hovered = false;\n  @state() private focused = false;\n  @state() private pressed = false;\n\n  @query('.surface') private readonly mdRoot!: HTMLElement|null;\n  private rippleSize = '';\n  private rippleScale = '';\n  private initialSize = 0;\n  private growAnimation?: Animation;\n  private state = State.INACTIVE;\n  private rippleStartEvent?: PointerEvent;\n  private checkBoundsAfterContextMenu = false;\n\n  handlePointerenter(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = true;\n  }\n\n  handlePointerleave(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = false;\n\n    // release a held mouse or pen press that moves outside the element\n    if (this.state !== State.INACTIVE) {\n      this.endPressAnimation();\n    }\n  }\n\n  handleFocusin() {\n    this.focused = true;\n  }\n\n  handleFocusout() {\n    this.focused = false;\n  }\n\n  handlePointerup(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    if (this.state === State.HOLDING) {\n      this.state = State.WAITING_FOR_CLICK;\n      return;\n    }\n\n    if (this.state === State.TOUCH_DELAY) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(this.rippleStartEvent);\n      return;\n    }\n  }\n\n  async handlePointerdown(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.rippleStartEvent = event;\n    if (!this.isTouch(event)) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(event);\n      return;\n    }\n\n    // after a longpress contextmenu event, an extra `pointerdown` can be\n    // dispatched to the pressed element. Check that the down is within\n    // bounds of the element in this case.\n    if (this.checkBoundsAfterContextMenu && !this.inBounds(event)) {\n      return;\n    }\n\n    this.checkBoundsAfterContextMenu = false;\n\n    // Wait for a hold after touch delay\n    this.state = State.TOUCH_DELAY;\n    await new Promise(resolve => {\n      setTimeout(resolve, TOUCH_DELAY_MS);\n    });\n\n    if (this.state !== State.TOUCH_DELAY) {\n      return;\n    }\n\n    this.state = State.HOLDING;\n    this.startPressAnimation(event);\n  }\n\n  handleClick() {\n    // Click is a MouseEvent in Firefox and Safari, so we cannot use\n    // `shouldReactToEvent`\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.state === State.WAITING_FOR_CLICK) {\n      this.endPressAnimation();\n      return;\n    }\n\n    if (this.state === State.INACTIVE) {\n      // keyboard synthesized click event\n      this.startPressAnimation();\n      this.endPressAnimation();\n    }\n  }\n\n  handlePointercancel(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.endPressAnimation();\n  }\n\n  handleContextmenu() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checkBoundsAfterContextMenu = true;\n    this.endPressAnimation();\n  }\n\n  protected override render() {\n    const classes = {\n      'hovered': this.hovered,\n      'focused': this.focused,\n      'pressed': this.pressed,\n      'unbounded': this.unbounded,\n    };\n\n    return html`<div class=\"surface ${classMap(classes)}\"></div>`;\n  }\n\n  protected override update(changedProps: PropertyValues<this>) {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.hovered = false;\n      this.focused = false;\n      this.pressed = false;\n    }\n    super.update(changedProps);\n  }\n\n  private getDimensions() {\n    return (this.parentElement ?? this).getBoundingClientRect();\n  }\n\n  private determineRippleSize() {\n    const {height, width} = this.getDimensions();\n    const maxDim = Math.max(height, width);\n    const softEdgeSize =\n        Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);\n\n\n    let maxRadius = maxDim;\n    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);\n\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);\n    maxRadius = hypotenuse + PADDING;\n\n    // ensure `initialSize` is even for unbounded\n    if (this.unbounded) {\n      initialSize = initialSize - (initialSize % 2);\n    }\n\n    this.initialSize = initialSize;\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;\n    this.rippleSize = `${this.initialSize}px`;\n  }\n\n  private getNormalizedPointerEventCoords(pointerEvent: PointerEvent):\n      {x: number, y: number} {\n    const {scrollX, scrollY} = window;\n    const {left, top} = this.getDimensions();\n    const documentX = scrollX + left;\n    const documentY = scrollY + top;\n    const {pageX, pageY} = pointerEvent;\n    return {x: pageX - documentX, y: pageY - documentY};\n  }\n\n  private getTranslationCoordinates(positionEvent?: Event) {\n    const {height, width} = this.getDimensions();\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    };\n\n    let startPoint;\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent);\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      };\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - (this.initialSize / 2),\n      y: startPoint.y - (this.initialSize / 2),\n    };\n\n    return {startPoint, endPoint};\n  }\n\n  private startPressAnimation(positionEvent?: Event) {\n    if (!this.mdRoot) {\n      return;\n    }\n\n    this.pressed = true;\n    this.growAnimation?.cancel();\n    this.determineRippleSize();\n    const {startPoint, endPoint} =\n        this.getTranslationCoordinates(positionEvent);\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n\n    this.growAnimation = this.mdRoot.animate(\n        {\n          top: [0, 0],\n          left: [0, 0],\n          height: [this.rippleSize, this.rippleSize],\n          width: [this.rippleSize, this.rippleSize],\n          transform: [\n            `translate(${translateStart}) scale(1)`,\n            `translate(${translateEnd}) scale(${this.rippleScale})`\n          ],\n        },\n        {\n          pseudoElement: PRESS_PSEUDO,\n          duration: PRESS_GROW_MS,\n          easing: EASING.STANDARD,\n          fill: ANIMATION_FILL\n        });\n  }\n\n  private async endPressAnimation() {\n    this.state = State.INACTIVE;\n    const animation = this.growAnimation;\n    const pressAnimationPlayState = animation?.currentTime ?? Infinity;\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false;\n      return;\n    }\n\n    await new Promise(resolve => {\n      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);\n    });\n\n    if (this.growAnimation !== animation) {\n      // A new press animation was started. The old animation was canceled and\n      // should not finish the pressed state.\n      return;\n    }\n\n    this.pressed = false;\n  }\n\n  /**\n   * Returns `true` if\n   *  - the ripple element is enabled\n   *  - the pointer is primary for the input type\n   *  - the pointer is the pointer that started the interaction, or will start\n   * the interaction\n   *  - the pointer is a touch, or the pointer state has the primary button\n   * held, or the pointer is hovering\n   */\n  private shouldReactToEvent(event: PointerEvent) {\n    if (this.disabled || !event.isPrimary) {\n      return false;\n    }\n\n    if (this.rippleStartEvent &&\n        this.rippleStartEvent.pointerId !== event.pointerId) {\n      return false;\n    }\n\n    if (event.type === 'pointerenter' || event.type === 'pointerleave') {\n      return !this.isTouch(event);\n    }\n\n    const isPrimaryButton = event.buttons === 1;\n    return this.isTouch(event) || isPrimaryButton;\n  }\n\n  /**\n   * Check if the event is within the bounds of the element.\n   *\n   * This is only needed for the \"stuck\" contextmenu longpress on Chrome.\n   */\n  private inBounds({x, y}: PointerEvent) {\n    const {top, left, bottom, right} = this.getBoundingClientRect();\n    return x >= left && x <= right && y >= top && y <= bottom;\n  }\n\n  private isTouch({pointerType}: PointerEvent) {\n    return pointerType === 'touch';\n  }\n}\n"]}

package/segmentedbutton/lib/segmented-button.d.ts

@@ -5,8 +5,7 @@
  */
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { LitElement, PropertyValues } from 'lit';
-import { MdRipple } from '../../ripple/ripple.js';
+import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
 /**
  * SegmentedButton is a web component implementation of the Material Design
  * segmented button component. It is intended **only** for use as a child of a
@@ -19,18 +18,14 @@ export declare class SegmentedButton extends LitElement {
     label: string;
     noCheckmark: boolean;
     hasIcon: boolean;
-    protected animState: string;
-    protected showFocusRing: boolean;
-    protected showRipple: boolean;
-    protected iconElement: HTMLElement[];
-    protected ripple: Promise<MdRipple | null>;
+    private animState;
+    private showRipple;
+    private readonly iconElement;
+    private readonly ripple;
     protected update(props: PropertyValues<SegmentedButton>): void;
     private nextAnimationState;
-    handleClick(e: MouseEvent): void;
-    handlePointerDown(e: PointerEvent): void;
-    protected handleFocus(): void;
-    protected handleBlur(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    private handleClick;
+    protected render(): TemplateResult<1>;
     protected getRenderClasses(): {
         'md3-segmented-button--selected': boolean;
         'md3-segmented-button--unselected': boolean;
@@ -42,13 +37,12 @@ export declare class SegmentedButton extends LitElement {
         'md3-segmented-button--selecting': boolean;
         'md3-segmented-button--deselecting': boolean;
     };
-    protected renderFocusRing(): import("lit-html").TemplateResult<1>;
-    protected readonly getRipple: () => Promise<MdRipple>;
-    protected renderRipple: () => import("lit-html").TemplateResult<1>;
-    protected renderOutline(): import("lit-html").TemplateResult<1>;
-    protected renderLeading(): import("lit-html").TemplateResult<1>;
-    protected renderLeadingWithoutLabel(): import("lit-html").TemplateResult<1>;
-    protected renderLeadingWithLabel(): import("lit-html").TemplateResult<1>;
-    protected renderLabel(): import("lit-html").TemplateResult<1>;
-    protected renderTouchTarget(): import("lit-html").TemplateResult<1>;
+    private readonly getRipple;
+    private readonly renderRipple;
+    protected renderOutline(): TemplateResult | typeof nothing;
+    private renderLeading;
+    private renderLeadingWithoutLabel;
+    private renderLeadingWithLabel;
+    private renderLabel;
+    private renderTouchTarget;
 }

package/segmentedbutton/lib/segmented-button.js

@@ -12,7 +12,6 @@ import { property, queryAssignedElements, queryAsync, state } from 'lit/decorato
 import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
 import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
-import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
 import { ripple } from '../../ripple/directive.js';
 /**
  * SegmentedButton is a web component implementation of the Material Design
@@ -29,7 +28,6 @@ export class SegmentedButton extends LitElement {
         this.noCheckmark = false;
         this.hasIcon = false;
         this.animState = '';
-        this.showFocusRing = false;
         this.showRipple = false;
         this.getRipple = () => {
             this.showRipple = true;
@@ -61,20 +59,10 @@ export class SegmentedButton extends LitElement {
         }
         return '';
     }
-    handleClick(e) {
+    handleClick() {
         const event = new Event('segmented-button-interaction', { bubbles: true, composed: true });
         this.dispatchEvent(event);
     }
-    handlePointerDown(e) {
-        pointerPress();
-        this.showFocusRing = shouldShowStrongFocus();
-    }
-    handleFocus() {
-        this.showFocusRing = shouldShowStrongFocus();
-    }
-    handleBlur() {
-        this.showFocusRing = false;
-    }
     render() {
         // Needed for closure conformance
         const { ariaLabel } = this;
@@ -84,13 +72,10 @@ export class SegmentedButton extends LitElement {
         aria-label=${ariaLabel || nothing}
         aria-pressed=${this.selected}
         ?disabled=${this.disabled}
-        @focus="${this.handleFocus}"
-        @blur="${this.handleBlur}"
-        @pointerdown="${this.handlePointerDown}"
         @click="${this.handleClick}"
         class="md3-segmented-button ${classMap(this.getRenderClasses())}"
         ${ripple(this.getRipple)}>
-        ${this.renderFocusRing()}
+        <md-focus-ring class="md3-segmented-button__focus-ring"></md-focus-ring>
         ${when(this.showRipple, this.renderRipple)}
         ${this.renderOutline()}
         ${this.renderLeading()}
@@ -112,11 +97,8 @@ export class SegmentedButton extends LitElement {
             'md3-segmented-button--deselecting': this.animState === 'deselecting',
         };
     }
-    renderFocusRing() {
-        return html `<md-focus-ring .visible="${this.showFocusRing}" class="md3-segmented-button__focus-ring"></md-focus-ring>`;
-    }
     renderOutline() {
-        return html ``;
+        return nothing;
     }
     renderLeading() {
         return this.label === '' ? this.renderLeadingWithoutLabel() :
@@ -181,9 +163,6 @@ __decorate([
 __decorate([
     state()
 ], SegmentedButton.prototype, "animState", void 0);
-__decorate([
-    state()
-], SegmentedButton.prototype, "showFocusRing", void 0);
 __decorate([
     state()
 ], SegmentedButton.prototype, "showRipple", void 0);

package/segmentedbutton/lib/segmented-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["segmented-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n/**\n * SegmentedButton is a web component implementation of the Material Design\n * segmented button component. It is intended **only** for use as a child of a\n * `SementedButtonSet` component. It is **not** intended for use in any other\n * context.\n */\nexport class SegmentedButton extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) selected = false;\n  @property() label = '';\n  @property({type: Boolean}) noCheckmark = false;\n  @property({type: Boolean}) hasIcon = false;\n\n  @state() protected animState = '';\n  @state() protected showFocusRing = false;\n  @state() protected showRipple = false;\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  protected iconElement!: HTMLElement[];\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n  protected override update(props: PropertyValues<SegmentedButton>) {\n    this.animState = this.nextAnimationState(props);\n    super.update(props);\n    // NOTE: This needs to be set *after* calling super.update() to ensure the\n    // appropriate CSS classes are applied.\n    this.hasIcon = this.iconElement.length > 0;\n  }\n\n  private nextAnimationState(changedProps: PropertyValues<SegmentedButton>):\n      string {\n    const prevSelected = changedProps.get('selected');\n    // Early exit for first update.\n    if (prevSelected === undefined) return '';\n\n    const nextSelected = this.selected;\n    const nextHasCheckmark = !this.noCheckmark;\n    if (!prevSelected && nextSelected && nextHasCheckmark) {\n      return 'selecting';\n    }\n    if (prevSelected && !nextSelected && nextHasCheckmark) {\n      return 'deselecting';\n    }\n    return '';\n  }\n\n  handleClick(e: MouseEvent) {\n    const event = new Event(\n        'segmented-button-interaction', {bubbles: true, composed: true});\n    this.dispatchEvent(event);\n  }\n\n  handlePointerDown(e: PointerEvent) {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        tabindex=\"${this.disabled ? '-1' : '0'}\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        ?disabled=${this.disabled}\n        @focus=\"${this.handleFocus}\"\n        @blur=\"${this.handleBlur}\"\n        @pointerdown=\"${this.handlePointerDown}\"\n        @click=\"${this.handleClick}\"\n        class=\"md3-segmented-button ${classMap(this.getRenderClasses())}\"\n        ${ripple(this.getRipple)}>\n        ${this.renderFocusRing()}\n        ${when(this.showRipple, this.renderRipple)}\n        ${this.renderOutline()}\n        ${this.renderLeading()}\n        ${this.renderLabel()}\n        ${this.renderTouchTarget()}\n      </button>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'md3-segmented-button--selected': this.selected,\n      'md3-segmented-button--unselected': !this.selected,\n      'md3-segmented-button--with-label': this.label !== '',\n      'md3-segmented-button--without-label': this.label === '',\n      'md3-segmented-button--with-icon': this.hasIcon,\n      'md3-segmented-button--with-checkmark': !this.noCheckmark,\n      'md3-segmented-button--without-checkmark': this.noCheckmark,\n      'md3-segmented-button--selecting': this.animState === 'selecting',\n      'md3-segmented-button--deselecting': this.animState === 'deselecting',\n    };\n  }\n\n  protected renderFocusRing() {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\" class=\"md3-segmented-button__focus-ring\"></md-focus-ring>`;\n  }\n\n  protected readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected renderRipple = () => {\n    return html`<md-ripple ?disabled=\"${\n        this.disabled}\" class=\"md3-segmented-button__ripple\"> </md-ripple>`;\n  };\n\n  protected renderOutline() {\n    return html``;\n  }\n\n  protected renderLeading() {\n    return this.label === '' ? this.renderLeadingWithoutLabel() :\n                               this.renderLeadingWithLabel();\n  }\n\n  protected renderLeadingWithoutLabel() {\n    return html`\n      <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n        <span class=\"md3-segmented-button__graphic\">\n          <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n            <path class=\"md3-segmented-button__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n          </svg>\n        </span>\n        <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\"></slot>\n        </span>\n      </span>\n    `;\n  }\n\n  protected renderLeadingWithLabel() {\n    return html`\n      <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n        <span class=\"md3-segmented-button__graphic\">\n          <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n            <path class=\"md3-segmented-button__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n          </svg>\n          <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n            <slot name=\"icon\"></slot>\n          </span>\n        </span>\n      </span>\n    `;\n  }\n\n  protected renderLabel() {\n    return html`\n      <span class=\"md3-segmented-button__label-text\">${this.label}</span>\n    `;\n  }\n\n  protected renderTouchTarget() {\n    return html`<span class=\"md3-segmented-button__touch\"></span>`;\n  }\n}\n"]}
+{"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["segmented-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n/**\n * SegmentedButton is a web component implementation of the Material Design\n * segmented button component. It is intended **only** for use as a child of a\n * `SementedButtonSet` component. It is **not** intended for use in any other\n * context.\n */\nexport class SegmentedButton extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) selected = false;\n  @property() label = '';\n  @property({type: Boolean}) noCheckmark = false;\n  @property({type: Boolean}) hasIcon = false;\n\n  @state() private animState = '';\n  @state() private showRipple = false;\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly iconElement!: HTMLElement[];\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n\n  protected override update(props: PropertyValues<SegmentedButton>) {\n    this.animState = this.nextAnimationState(props);\n    super.update(props);\n    // NOTE: This needs to be set *after* calling super.update() to ensure the\n    // appropriate CSS classes are applied.\n    this.hasIcon = this.iconElement.length > 0;\n  }\n\n  private nextAnimationState(changedProps: PropertyValues<SegmentedButton>):\n      string {\n    const prevSelected = changedProps.get('selected');\n    // Early exit for first update.\n    if (prevSelected === undefined) return '';\n\n    const nextSelected = this.selected;\n    const nextHasCheckmark = !this.noCheckmark;\n    if (!prevSelected && nextSelected && nextHasCheckmark) {\n      return 'selecting';\n    }\n    if (prevSelected && !nextSelected && nextHasCheckmark) {\n      return 'deselecting';\n    }\n    return '';\n  }\n\n  private handleClick() {\n    const event = new Event(\n        'segmented-button-interaction', {bubbles: true, composed: true});\n    this.dispatchEvent(event);\n  }\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        tabindex=\"${this.disabled ? '-1' : '0'}\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        ?disabled=${this.disabled}\n        @click=\"${this.handleClick}\"\n        class=\"md3-segmented-button ${classMap(this.getRenderClasses())}\"\n        ${ripple(this.getRipple)}>\n        <md-focus-ring class=\"md3-segmented-button__focus-ring\"></md-focus-ring>\n        ${when(this.showRipple, this.renderRipple)}\n        ${this.renderOutline()}\n        ${this.renderLeading()}\n        ${this.renderLabel()}\n        ${this.renderTouchTarget()}\n      </button>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'md3-segmented-button--selected': this.selected,\n      'md3-segmented-button--unselected': !this.selected,\n      'md3-segmented-button--with-label': this.label !== '',\n      'md3-segmented-button--without-label': this.label === '',\n      'md3-segmented-button--with-icon': this.hasIcon,\n      'md3-segmented-button--with-checkmark': !this.noCheckmark,\n      'md3-segmented-button--without-checkmark': this.noCheckmark,\n      'md3-segmented-button--selecting': this.animState === 'selecting',\n      'md3-segmented-button--deselecting': this.animState === 'deselecting',\n    };\n  }\n\n  private readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {\n    return html`<md-ripple ?disabled=\"${\n        this.disabled}\" class=\"md3-segmented-button__ripple\"> </md-ripple>`;\n  };\n\n  protected renderOutline(): TemplateResult|typeof nothing {\n    return nothing;\n  }\n\n  private renderLeading() {\n    return this.label === '' ? this.renderLeadingWithoutLabel() :\n                               this.renderLeadingWithLabel();\n  }\n\n  private renderLeadingWithoutLabel() {\n    return html`\n      <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n        <span class=\"md3-segmented-button__graphic\">\n          <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n            <path class=\"md3-segmented-button__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n          </svg>\n        </span>\n        <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\"></slot>\n        </span>\n      </span>\n    `;\n  }\n\n  private renderLeadingWithLabel() {\n    return html`\n      <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n        <span class=\"md3-segmented-button__graphic\">\n          <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n            <path class=\"md3-segmented-button__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n          </svg>\n          <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n            <slot name=\"icon\"></slot>\n          </span>\n        </span>\n      </span>\n    `;\n  }\n\n  private renderLabel() {\n    return html`\n      <span class=\"md3-segmented-button__label-text\">${this.label}</span>\n    `;\n  }\n\n  private renderTouchTarget() {\n    return html`<span class=\"md3-segmented-button__touch\"></span>`;\n  }\n}\n"]}