@material/web 1.0.0-pre.4 → 1.0.0-pre.5

package/README.md

@@ -37,7 +37,7 @@ Button                        | ✅     | ✅    | ❌
 FAB                           | ✅     | ❌    | ❌
 Icon button                   | ✅     | ✅    | ❌
 Checkbox                      | ✅     | ✅    | ❌
-Chips                         | ❌     | ❌    | ❌
+Chips                         | 🟡     | ❌    | ❌
 Dialog                        | ✅     | ✅    | ❌
 Divider                       | ✅     | ✅    | 🟡
 Elevation                     | ✅     | ❌    | ❌
@@ -46,14 +46,14 @@ Field                         | ✅     | ✅    | 🟡
 Icon                          | ✅     | ✅    | ❌
 List                          | ✅     | 🟡    | 🟡
 Menu                          | ✅     | 🟡    | 🟡
-Progress indicator (circular) | ❌     | ❌    | ❌
-Progress indicator (linear)   | ❌     | ❌    | ❌
+Progress indicator (circular) | 🟡     | ❌    | ❌
+Progress indicator (linear)   | 🟡     | ❌    | ❌
 Radio button                  | ✅     | ✅    | ❌
 Ripple                        | ✅     | ✅    | 🟡
 Select                        | 🟡     | ❌    | ❌
 Slider                        | ✅     | ✅    | ❌
 Switch                        | ✅     | ✅    | ❌
-Tabs                          | ❌     | ❌    | ❌
+Tabs                          | 🟡     | ❌    | ❌
 Text field                    | ✅     | ✅    | 🟡
 
 ### 1.1+ Components
@@ -62,7 +62,7 @@ These components are planned for release after 1.0.
 
 Component         | Alpha | Beta | Stable
 ----------------- | :---: | :--: | :----:
-Autocomplete      | 🟡     | ❌    | ❌
+Autocomplete      | ❌     | ❌    | ❌
 Badge             | 🟡     | ❌    | ❌
 Banner            | ❌     | ❌    | ❌
 Bottom app bar    | ❌     | ❌    | ❌

package/badge/lib/_badge.scss

@@ -8,24 +8,20 @@
 
 // go/keep-sorted start
 @use '../../sass/theme';
-@use '../../sass/typography';
 @use '../../tokens';
 // go/keep-sorted end
 
 $_custom-property-prefix: 'badge';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    _resolve-tokens(tokens.md-comp-badge-values()),
-    _resolve-tokens($tokens)
-  );
+  $tokens: theme.validate-theme(tokens.md-comp-badge-values(), $tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
-  $tokens: _resolve-tokens(tokens.md-comp-badge-values());
+  $tokens: tokens.md-comp-badge-values();
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
@@ -71,7 +67,3 @@ $_custom-property-prefix: 'badge';
     font: var(--_large-label-text-type);
   }
 }
-
-@function _resolve-tokens($tokens) {
-  @return typography.resolve-tokens($tokens, 'large-label-text');
-}

package/button/lib/_elevated-button.scss

@@ -7,52 +7,27 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/shape';
 @use '../../sass/theme';
-@use '../../sass/typography';
 @use '../../tokens';
-@use './elevation';
-@use './shared';
 // go/keep-sorted end
 
-$_custom-property-prefix: 'elevated-button';
-
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(
-    _resolve-tokens(tokens.md-comp-elevated-button-values()),
-    _resolve-tokens($tokens)
+    tokens.md-comp-elevated-button-values(),
+    $tokens
   );
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    --md-elevated-button-#{$token}: #{$value};
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-elevated-button-values();
 
-  // TODO(b/198759625): Remove once spacing tokens are formally added
-  $tokens: map.set($tokens, 'spacing-leading', 24px);
-  $tokens: map.set($tokens, 'spacing-trailing', 24px);
-  $tokens: map.set($tokens, 'with-icon-spacing-leading', 16px);
-  $tokens: map.set($tokens, 'with-icon-spacing-trailing', 24px);
-  $tokens: map.set($tokens, 'with-trailing-icon-spacing-leading', 24px);
-  $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 16px);
-
-  $tokens: _resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
-
   :host {
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
   }
 }
-
-@function _resolve-tokens($tokens) {
-  $tokens: shared.flatten-disabled-colors($tokens);
-  $tokens: shared.remove-unsupported-tokens($tokens);
-  $tokens: typography.resolve-tokens($tokens, 'label-text');
-  @return elevation.resolve-tokens($tokens);
-}

package/button/lib/_elevation.scss

@@ -7,11 +7,7 @@
 // Selector '.md3-*' should only be used in this project.
 
 // go/keep-sorted start
-@use 'sass:map';
-@use 'sass:meta';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../elevation/lib/elevation';
+@use '../../elevation/elevation';
 // go/keep-sorted end
 
 @mixin styles() {
@@ -66,14 +62,3 @@
     }
   }
 }
-
-@function resolve-tokens($tokens) {
-  @return elevation.resolve-tokens(
-    $tokens,
-    'container-elevation',
-    'disabled-container-elevation',
-    'focus-container-elevation',
-    'hover-container-elevation',
-    'pressed-container-elevation'
-  );
-}

package/button/lib/_filled-button.scss

@@ -7,51 +7,24 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/shape';
 @use '../../sass/theme';
-@use '../../sass/typography';
 @use '../../tokens';
-@use './elevation';
-@use './shared';
 // go/keep-sorted end
 
-$_custom-property-prefix: 'filled-button';
-
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    _resolve-tokens(tokens.md-comp-filled-button-values()),
-    _resolve-tokens($tokens)
-  );
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
+  $tokens: theme.validate-theme(tokens.md-comp-filled-button-values(), $tokens);
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    --md-filled-button-#{$token}: #{$value};
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-filled-button-values();
 
-  // TODO(b/198759625): Remove once spacing tokens are formally added
-  $tokens: map.set($tokens, 'spacing-leading', 24px);
-  $tokens: map.set($tokens, 'spacing-trailing', 24px);
-  $tokens: map.set($tokens, 'with-icon-spacing-leading', 16px);
-  $tokens: map.set($tokens, 'with-icon-spacing-trailing', 24px);
-  $tokens: map.set($tokens, 'with-trailing-icon-spacing-leading', 24px);
-  $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 16px);
-  $tokens: _resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
-
   :host {
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
   }
 }
-
-@function _resolve-tokens($tokens) {
-  $tokens: shared.flatten-disabled-colors($tokens);
-  $tokens: shared.remove-unsupported-tokens($tokens);
-  $tokens: typography.resolve-tokens($tokens, 'label-text');
-  @return elevation.resolve-tokens($tokens);
-}

package/button/lib/_icon.scss

@@ -36,6 +36,7 @@
 
     .md3-button:disabled & {
       color: var(--_with-icon-disabled-icon-color);
+      opacity: var(--_with-icon-disabled-icon-opacity);
     }
   }
 }

package/button/lib/_outlined-button.scss

@@ -7,43 +7,27 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/shape';
 @use '../../sass/theme';
-@use '../../sass/typography';
 @use '../../tokens';
-@use './shared';
 // go/keep-sorted end
 
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-$_custom-property-prefix: 'outlined-button';
-
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(
-    _resolve-tokens(tokens.md-comp-outlined-button-values()),
-    _resolve-tokens($tokens)
+    tokens.md-comp-outlined-button-values(),
+    $tokens
   );
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    --md-elevated-button-#{$token}: #{$value};
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-outlined-button-values();
 
-  // TODO(b/198759625): Remove once spacing tokens are formally added
-  $tokens: map.set($tokens, 'spacing-leading', 24px);
-  $tokens: map.set($tokens, 'spacing-trailing', 24px);
-  $tokens: map.set($tokens, 'with-icon-spacing-leading', 16px);
-  $tokens: map.set($tokens, 'with-icon-spacing-trailing', 24px);
-  $tokens: map.set($tokens, 'with-trailing-icon-spacing-leading', 24px);
-  $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 16px);
-  $tokens: _resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
-
   :host {
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
@@ -67,6 +51,7 @@ $_custom-property-prefix: 'outlined-button';
 
     .md3-button:disabled & {
       border-color: var(--_disabled-outline-color);
+      opacity: var(--_disabled-outline-opacity);
     }
   }
 
@@ -84,8 +69,6 @@ $_custom-property-prefix: 'outlined-button';
 }
 
 @function _resolve-tokens($tokens) {
-  $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
-  $tokens: typography.resolve-tokens($tokens, 'label-text');
   @return $tokens;
 }

package/button/lib/_shared.scss

@@ -12,10 +12,8 @@
 // go/keep-sorted start
 @use '../../focus/focus-ring';
 @use '../../ripple/ripple';
-@use '../../sass/color';
 @use '../../sass/dom';
-@use '../../sass/resolvers';
-@use '../../sass/typography';
+@use '../../sass/shape';
 // go/keep-sorted end
 
 @mixin styles() {
@@ -43,12 +41,7 @@
 
     @include focus-ring.theme(
       (
-        shape: (
-          var(--_container-shape-start-start),
-          var(--_container-shape-start-end),
-          var(--_container-shape-end-end),
-          var(--_container-shape-end-start),
-        ),
+        shape: shape.corners-to-shape-token('--_container-shape'),
       )
     );
   }
@@ -76,13 +69,21 @@
     z-index: 0; // Place content on top of elevation and ripple
     block-size: var(--_container-height);
     font: var(--_label-text-type);
-    background-color: var(--_container-color);
     color: var(--_label-text-color);
     // TODO(b/181413732): Verify token below are named correctly
     padding-inline-start: var(--_spacing-leading);
     padding-inline-end: var(--_spacing-trailing);
     gap: 8px;
 
+    &::before {
+      // Background color. Separate node for disabled opacity styles.
+      background-color: var(--_container-color);
+      border-radius: inherit;
+      content: '';
+      inset: 0;
+      position: absolute;
+    }
+
     &::-moz-focus-inner {
       padding: 0;
       border: 0;
@@ -102,9 +103,14 @@
       outline: none;
     }
 
-    &:disabled {
-      background-color: var(--_disabled-container-color);
+    &:disabled .md3-button__label {
       color: var(--_disabled-label-text-color);
+      opacity: var(--_disabled-label-text-opacity);
+    }
+
+    &:disabled::before {
+      background-color: var(--_disabled-container-color);
+      opacity: var(--_disabled-container-opacity);
     }
 
     @media (forced-colors: active) {
@@ -122,6 +128,8 @@
     border-end-end-radius: var(--_container-shape-end-end);
   }
 
+  .md3-button::after,
+  .md3-button::before,
   md-elevation,
   .md3-button__ripple {
     z-index: -1; // Place behind content
@@ -142,45 +150,3 @@
     inline-size: 100%;
   }
 }
-
-@function flatten-disabled-colors($tokens) {
-  @return color.join-color-and-opacity-pairs(
-    $tokens,
-    (
-      (
-        color-key: 'disabled-container-color',
-        opacity-key: 'disabled-container-opacity'
-      ),
-      (
-        color-key: 'disabled-label-text-color',
-        opacity-key: 'disabled-label-text-opacity'
-      ),
-      (
-        color-key: 'with-icon-disabled-icon-color',
-        opacity-key: 'with-icon-disabled-icon-opacity'
-      ),
-      (
-        color-key: 'disabled-outline-color',
-        opacity-key: 'disabled-outline-opacity'
-      )
-    )
-  );
-}
-
-@function remove-unsupported-tokens($tokens) {
-  // b/193825150: Text and Outlined Button don't have `container-shadow-color`,
-  // leaving `container-elevation` useless.
-  @if not map.get($tokens, 'container-shadow-color') {
-    $tokens: map.remove($tokens, 'container-elevation');
-  }
-
-  $unsupported-tokens: (
-    // TODO(b/233225796): Clean up this removal of `dragged` tokens.
-    'dragged-container-elevation',
-    'dragged-label-text-color',
-    'dragged-state-layer-color',
-    'dragged-state-layer-opacity',
-    'with-icon-dragged-icon-color'
-  );
-  @return map.remove($tokens, $unsupported-tokens);
-}

package/button/lib/_text-button.scss

@@ -7,56 +7,30 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/shape';
 @use '../../sass/theme';
-@use '../../sass/typography';
 @use '../../tokens';
-@use './shared';
 // go/keep-sorted end
 
 $_custom-property-prefix: 'text-button';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    _resolve-tokens(tokens.md-comp-text-button-values()),
-    _resolve-tokens($tokens)
-  );
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
+  $tokens: theme.validate-theme(tokens.md-comp-text-button-values(), $tokens);
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    --md-elevated-button-#{$token}: #{$value};
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-text-button-values();
 
-  // TODO(b/198759625): Remove once spacing tokens are formally added
-  $tokens: map.set($tokens, 'spacing-leading', 12px);
-  $tokens: map.set($tokens, 'spacing-trailing', 12px);
-  $tokens: map.set($tokens, 'with-icon-spacing-leading', 12px);
-  $tokens: map.set($tokens, 'with-icon-spacing-trailing', 16px);
-  $tokens: map.set($tokens, 'with-trailing-icon-spacing-leading', 16px);
-  $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 12px);
-  $tokens: _resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
-
   :host {
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
-  }
-}
 
-@function _resolve-tokens($tokens) {
-  // TODO(b/233066105): Clean up this removal of extraneous tokens
-  $tokens: map.remove(
-    $tokens,
-    'disabled-container-color',
-    'disabled-container-opacity'
-  );
-  $tokens: shared.flatten-disabled-colors($tokens);
-  $tokens: shared.remove-unsupported-tokens($tokens);
-  $tokens: typography.resolve-tokens($tokens, 'label-text');
-  @return $tokens;
+    --_container-color: none;
+    --_disabled-container-color: none;
+    --_disabled-container-opacity: 0;
+  }
 }

package/button/lib/_tonal-button.scss

@@ -9,49 +9,26 @@
 // go/keep-sorted start
 @use '../../sass/shape';
 @use '../../sass/theme';
-@use '../../sass/typography';
 @use '../../tokens';
-@use './elevation';
-@use './shared';
 // go/keep-sorted end
 
-$_custom-property-prefix: 'tonal-button';
-
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(
-    _resolve-tokens(tokens.md-comp-filled-tonal-button-values()),
-    _resolve-tokens($tokens)
+    tokens.md-comp-filled-tonal-button-values(),
+    $tokens
   );
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    --md-elevated-button-#{$token}: #{$value};
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-filled-tonal-button-values();
 
-  // TODO(b/198759625): Remove once spacing tokens are formally added
-  $tokens: map.set($tokens, 'spacing-leading', 24px);
-  $tokens: map.set($tokens, 'spacing-trailing', 24px);
-  $tokens: map.set($tokens, 'with-icon-spacing-leading', 16px);
-  $tokens: map.set($tokens, 'with-icon-spacing-trailing', 24px);
-  $tokens: map.set($tokens, 'with-trailing-icon-spacing-leading', 24px);
-  $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 16px);
-  $tokens: _resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
-
   :host {
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
   }
 }
-
-@function _resolve-tokens($tokens) {
-  $tokens: shared.flatten-disabled-colors($tokens);
-  $tokens: shared.remove-unsupported-tokens($tokens);
-  $tokens: typography.resolve-tokens($tokens, 'label-text');
-  @return elevation.resolve-tokens($tokens);
-}

package/button/lib/button.d.ts

@@ -27,6 +27,8 @@ export declare abstract class Button extends LitElement implements ButtonState {
     trailingIcon: boolean;
     /**
      * The button's visible label.
+     *
+     * @deprecated Set text as content of the button instead.
      */
     label: string;
     /**

package/button/lib/button.js

@@ -31,8 +31,11 @@ export class Button extends LitElement {
          * _Note:_ Link buttons cannot have trailing icons.
          */
         this.trailingIcon = false;
+        // TODO(b/272598771): remove label property
         /**
          * The button's visible label.
+         *
+         * @deprecated Set text as content of the button instead.
          */
         this.label = '';
         /**
@@ -113,7 +116,8 @@ export class Button extends LitElement {
         return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
     }
     renderLabel() {
-        return html `<span class="md3-button__label">${this.label}</span>`;
+        // TODO(b/272598771): remove the ternary when label property is removed
+        return html `<span class="md3-button__label">${this.label ? this.label : html `<slot></slot>`}</span>`;
     }
     renderLeadingIcon() {
         return this.trailingIcon ? '' : this.renderIcon();

package/button/lib/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This is required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {dispatchActivationClick, isActivationClick} from '../../controller/events.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAHasPopup} from '../../types/aria.js';\n\nimport {ButtonState} from './state.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport abstract class Button extends LitElement implements ButtonState {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @property({type: String, attribute: 'data-aria-has-popup', noAccessor: true})\n  @ariaProperty\n  override ariaHasPopup!: ARIAHasPopup;\n\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  @ariaProperty\n  override ariaLabel!: string;\n\n  /**\n   * Whether or not the button is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   *\n   * _Note:_ Link buttons cannot have trailing icons.\n   */\n  @property({type: Boolean, attribute: 'trailingicon'}) trailingIcon = false;\n\n  /**\n   * The button's visible label.\n   */\n  @property({type: String}) label = '';\n\n  /**\n   * Whether to display the icon or not.\n   */\n  @property({type: Boolean}) hasIcon = false;\n\n  /**\n   * Whether `preventDefault()` should be called on the underlying button.\n   * Useful for preventing certain native functionalities like preventing form\n   * submissions.\n   */\n  @property({type: Boolean}) preventClickDefault = false;\n\n  @query('.md3-button') protected buttonElement!: HTMLElement;\n\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n  @state() protected showFocusRing = false;\n\n  @state() protected showRipple = false;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  protected assignedIcons!: HTMLElement[];\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.handleActivationClick);\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (!isActivationClick((event))) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  override focus() {\n    this.buttonElement.focus();\n  }\n\n  override blur() {\n    this.buttonElement.blur();\n  }\n\n  protected readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected override render(): TemplateResult {\n    // TODO(b/237283903): Replace ifDefined(... || undefined) with ifTruthy(...)\n    return html`\n      <button\n          class=\"md3-button ${classMap(this.getRenderClasses())}\"\n          ?disabled=\"${this.disabled}\"\n          aria-label=\"${this.ariaLabel || nothing}\"\n          aria-haspopup=\"${this.ariaHasPopup || nothing}\"\n          @pointerdown=\"${this.handlePointerDown}\"\n          @focus=\"${this.handleFocus}\"\n          @blur=\"${this.handleBlur}\"\n          @click=\"${this.handleClick}\"\n          ${ripple(this.getRipple)}>\n        ${this.renderFocusRing()}\n        ${this.renderElevation()}\n        ${when(this.showRipple, this.renderRipple)}\n        ${this.renderOutline()}\n        ${this.renderTouchTarget()}\n        ${this.renderLeadingIcon()}\n        ${this.renderLabel()}\n        ${this.renderTrailingIcon()}\n      </button>`;\n  }\n\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-button--icon-leading': !this.trailingIcon && this.hasIcon,\n      'md3-button--icon-trailing': this.trailingIcon && this.hasIcon,\n    };\n  }\n\n  protected renderTouchTarget(): TemplateResult {\n    return html`\n      <span class=\"md3-button__touch\"></span>\n    `;\n  }\n\n  protected renderElevation(): TemplateResult {\n    return html``;\n  }\n\n  protected renderRipple = () => {\n    return html`<md-ripple class=\"md3-button__ripple\" ?disabled=\"${\n        this.disabled}\"></md-ripple>`;\n  };\n\n  protected renderOutline(): TemplateResult {\n    return html``;\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  protected renderLabel(): TemplateResult {\n    return html`<span class=\"md3-button__label\">${this.label}</span>`;\n  }\n\n  protected renderLeadingIcon(): TemplateResult|string {\n    return this.trailingIcon ? '' : this.renderIcon();\n  }\n\n  protected renderTrailingIcon(): TemplateResult|string {\n    return this.trailingIcon ? this.renderIcon() : '';\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`<slot name=\"icon\" @slotchange=\"${\n        this.handleSlotChange}\"></slot>`;\n  }\n\n  protected handlePointerDown(e: PointerEvent) {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleClick(e: MouseEvent) {\n    if (this.preventClickDefault) {\n      e.preventDefault();\n    }\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  protected handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This is required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {dispatchActivationClick, isActivationClick} from '../../controller/events.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAHasPopup} from '../../types/aria.js';\n\nimport {ButtonState} from './state.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport abstract class Button extends LitElement implements ButtonState {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @property({type: String, attribute: 'data-aria-has-popup', noAccessor: true})\n  @ariaProperty\n  override ariaHasPopup!: ARIAHasPopup;\n\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  @ariaProperty\n  override ariaLabel!: string;\n\n  /**\n   * Whether or not the button is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   *\n   * _Note:_ Link buttons cannot have trailing icons.\n   */\n  @property({type: Boolean, attribute: 'trailingicon'}) trailingIcon = false;\n\n  // TODO(b/272598771): remove label property\n  /**\n   * The button's visible label.\n   *\n   * @deprecated Set text as content of the button instead.\n   */\n  @property({type: String}) label = '';\n\n  /**\n   * Whether to display the icon or not.\n   */\n  @property({type: Boolean}) hasIcon = false;\n\n  /**\n   * Whether `preventDefault()` should be called on the underlying button.\n   * Useful for preventing certain native functionalities like preventing form\n   * submissions.\n   */\n  @property({type: Boolean}) preventClickDefault = false;\n\n  @query('.md3-button') protected buttonElement!: HTMLElement;\n\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n  @state() protected showFocusRing = false;\n\n  @state() protected showRipple = false;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  protected assignedIcons!: HTMLElement[];\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.handleActivationClick);\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (!isActivationClick((event))) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  override focus() {\n    this.buttonElement.focus();\n  }\n\n  override blur() {\n    this.buttonElement.blur();\n  }\n\n  protected readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected override render(): TemplateResult {\n    // TODO(b/237283903): Replace ifDefined(... || undefined) with ifTruthy(...)\n    return html`\n      <button\n          class=\"md3-button ${classMap(this.getRenderClasses())}\"\n          ?disabled=\"${this.disabled}\"\n          aria-label=\"${this.ariaLabel || nothing}\"\n          aria-haspopup=\"${this.ariaHasPopup || nothing}\"\n          @pointerdown=\"${this.handlePointerDown}\"\n          @focus=\"${this.handleFocus}\"\n          @blur=\"${this.handleBlur}\"\n          @click=\"${this.handleClick}\"\n          ${ripple(this.getRipple)}>\n        ${this.renderFocusRing()}\n        ${this.renderElevation()}\n        ${when(this.showRipple, this.renderRipple)}\n        ${this.renderOutline()}\n        ${this.renderTouchTarget()}\n        ${this.renderLeadingIcon()}\n        ${this.renderLabel()}\n        ${this.renderTrailingIcon()}\n      </button>`;\n  }\n\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-button--icon-leading': !this.trailingIcon && this.hasIcon,\n      'md3-button--icon-trailing': this.trailingIcon && this.hasIcon,\n    };\n  }\n\n  protected renderTouchTarget(): TemplateResult {\n    return html`\n      <span class=\"md3-button__touch\"></span>\n    `;\n  }\n\n  protected renderElevation(): TemplateResult {\n    return html``;\n  }\n\n  protected renderRipple = () => {\n    return html`<md-ripple class=\"md3-button__ripple\" ?disabled=\"${\n        this.disabled}\"></md-ripple>`;\n  };\n\n  protected renderOutline(): TemplateResult {\n    return html``;\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  protected renderLabel(): TemplateResult {\n    // TODO(b/272598771): remove the ternary when label property is removed\n    return html`<span class=\"md3-button__label\">${\n        this.label ? this.label : html`<slot></slot>`}</span>`;\n  }\n\n  protected renderLeadingIcon(): TemplateResult|string {\n    return this.trailingIcon ? '' : this.renderIcon();\n  }\n\n  protected renderTrailingIcon(): TemplateResult|string {\n    return this.trailingIcon ? this.renderIcon() : '';\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`<slot name=\"icon\" @slotchange=\"${\n        this.handleSlotChange}\"></slot>`;\n  }\n\n  protected handlePointerDown(e: PointerEvent) {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleClick(e: MouseEvent) {\n    if (this.preventClickDefault) {\n      e.preventDefault();\n    }\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  protected handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n"]}

package/button/lib/elevated-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-shape-start-start: var(--md-elevated-button-container-shape-start-start, var(--md-elevated-button-container-shape, 9999px));--_container-shape-start-end: var(--md-elevated-button-container-shape-start-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-end: var(--md-elevated-button-container-shape-end-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-start: var(--md-elevated-button-container-shape-end-start, var(--md-elevated-button-container-shape, 9999px));--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-surface-tint-layer-color: var(--md-elevated-button-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_disabled-container-color: var(--md-elevated-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-elevated-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-elevated-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-elevated-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-elevated-button-with-icon-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_with-icon-focus-icon-color: var(--md-elevated-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-elevated-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-elevated-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-elevated-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-elevated-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-elevated-button-spacing-leading, 24px);--_spacing-trailing: var(--md-elevated-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-elevated-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-elevated-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-elevated-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-elevated-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=elevated-styles.css.map */
+export const styles = css `:host{--_container-shape-start-start: var(--md-elevated-button-container-shape-start-start, var(--md-elevated-button-container-shape, 9999px));--_container-shape-start-end: var(--md-elevated-button-container-shape-start-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-end: var(--md-elevated-button-container-shape-end-end, var(--md-elevated-button-container-shape, 9999px));--_container-shape-end-start: var(--md-elevated-button-container-shape-end-start, var(--md-elevated-button-container-shape, 9999px));--_container-color: var(--md-elevated-button-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-elevated-button-container-elevation, 1);--_container-height: var(--md-elevated-button-container-height, 40px);--_container-shadow-color: var(--md-elevated-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-surface-tint-layer-color: var(--md-elevated-button-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_disabled-container-color: var(--md-elevated-button-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-elevation: var(--md-elevated-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-elevated-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-elevated-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-elevated-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-elevated-button-focus-container-elevation, 1);--_focus-label-text-color: var(--md-elevated-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-elevated-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-elevated-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-elevated-button-hover-container-elevation, 2);--_hover-label-text-color: var(--md-elevated-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-elevated-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-elevated-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-elevated-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-elevated-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-container-elevation: var(--md-elevated-button-pressed-container-elevation, 1);--_pressed-label-text-color: var(--md-elevated-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-elevated-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-elevated-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-elevated-button-with-icon-disabled-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-disabled-icon-opacity: var(--md-elevated-button-with-icon-disabled-icon-opacity, 0.38);--_with-icon-focus-icon-color: var(--md-elevated-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-elevated-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-elevated-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-elevated-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-elevated-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-elevated-button-spacing-leading, 24px);--_spacing-trailing: var(--md-elevated-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-elevated-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-elevated-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-elevated-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-elevated-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=elevated-styles.css.map */
 `;
 //# sourceMappingURL=elevated-styles.css.js.map