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

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/badge/lib/badge-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-type: var(--md-badge-large-label-text-type, 500 0.688rem / 1rem Roboto);--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */
+export const styles = css `:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-type: var(--md-badge-large-label-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */
 `;
 //# sourceMappingURL=badge-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge-styles.css.js","sourceRoot":"","sources":["badge-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{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-type: var(--md-badge-large-label-text-type, 500 0.688rem / 1rem Roboto);--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */\n`;\n "]}
+{"version":3,"file":"badge-styles.css.js","sourceRoot":"","sources":["badge-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{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-type: var(--md-badge-large-label-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */\n`;\n "]}

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,27 +7,17 @@
 // 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() {
-  md-elevation {
-    inset: 0;
-    position: absolute;
-  }
-
   .md3-button {
     @include elevation.theme(
       (
         // TODO: replace duration with animation tokens
-        duration: 280ms,
-        level: var(--_container-elevation),
-        shadow-color: var(--_container-shadow-color),
-        surface-tint: var(--_container-surface-tint-layer-color)
+        'duration': 280ms,
+        'level': var(--_container-elevation),
+        'shadow-color': var(--_container-shadow-color)
       )
     );
 
@@ -36,7 +26,7 @@
     &:focus {
       @include elevation.theme(
         (
-          level: var(--_focus-container-elevation),
+          'level': var(--_focus-container-elevation),
         )
       );
     }
@@ -44,7 +34,7 @@
     &:hover {
       @include elevation.theme(
         (
-          level: var(--_hover-container-elevation),
+          'level': var(--_hover-container-elevation),
         )
       );
     }
@@ -52,7 +42,7 @@
     &:active {
       @include elevation.theme(
         (
-          level: var(--_pressed-container-elevation),
+          'level': var(--_pressed-container-elevation),
         )
       );
     }
@@ -60,20 +50,9 @@
     &:disabled {
       @include elevation.theme(
         (
-          level: var(--_disabled-container-elevation),
+          'level': var(--_disabled-container-elevation),
         )
       );
     }
   }
 }
-
-@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-outlined-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
@@ -143,44 +151,7 @@
   }
 }
 
-@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);
+:root {
+  --md-filled-button-container-shape-start-start: 12px;
+  --md-filled-button-container-shape: 8px;
 }

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-text-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-tonal-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

@@ -8,16 +8,29 @@ import '../../ripple/ripple.js';
 import { LitElement, TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { MdRipple } from '../../ripple/ripple.js';
-import { ARIAHasPopup } from '../../types/aria.js';
+import { ARIAExpanded, ARIAHasPopup } from '../../types/aria.js';
 import { ButtonState } from './state.js';
+/**
+ * A button component.
+ */
 export declare abstract class Button extends LitElement implements ButtonState {
     static shadowRootOptions: ShadowRootInit;
+    ariaExpanded: ARIAExpanded;
     ariaHasPopup: ARIAHasPopup;
     ariaLabel: string;
     /**
      * Whether or not the button is disabled.
      */
     disabled: boolean;
+    /**
+     * The URL that the link button points to.
+     */
+    href?: string;
+    /**
+     * Where to display the linked `href` URL for a link button. Common options
+     * include `_blank` to open in a new tab.
+     */
+    target?: string;
     /**
      * Whether to render the icon at the inline end of the label rather than the
      * inline start.
@@ -27,6 +40,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;
     /**