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

package/LICENSE

@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2018-2023 Google, Inc.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -25,36 +25,36 @@ changes.
 
 **Stable** components are reviewed, documented, and API complete.
 
--   🔴 Not started
+-   ❌ Not started
 -   🟡 In progress
--   🟢 Complete
+-   ✅ Complete
 
 ### 1.0 Components
 
 Component                     | Alpha | Beta | Stable
 ----------------------------- | :---: | :--: | :----:
-Button                        | 🟢     | 🟢    | 🔴
-FAB                           | 🟢     | 🔴    | 🔴
-Icon button                   | 🟢     | 🔴    | 🔴
-Checkbox                      | 🟢     | 🟢    | 🔴
-Chips                         | 🔴     | 🔴    | 🔴
-Dialog                        | 🟢     | 🟢    | 🔴
-Divider                       | 🟢     | 🟢    | 🟡
-Elevation                     | 🟢     | 🔴    | 🔴
-Focus ring                    | 🟢     | 🔴    | 🔴
-Field                         | 🟢     | 🟢    | 🔴
-Icon                          | 🟢     | 🔴    | 🔴
-List                          | 🟢     | 🟢    | 🟡
-Menu                          | 🟢     | 🟢    | 🟡
-Progress indicator (circular) | 🔴     | 🔴    | 🔴
-Progress indicator (linear)   | 🔴     | 🔴    | 🔴
-Radio button                  | 🟢     | 🟢    | 🔴
-Ripple                        | 🟢     | 🟢    | 🟡
-Select                        | 🟡     | 🔴    | 🔴
-Slider                        | 🟢     | 🟢    | 🔴
-Switch                        | 🟢     | 🟢    | 🔴
-Tabs                          | 🔴     | 🔴    | 🔴
-Text field                    | 🟢     | 🟢    | 🟡
+Button                        | ✅     | ✅    | ❌
+FAB                           | ✅     | ❌    | ❌
+Icon button                   | ✅     | ✅    | ❌
+Checkbox                      | ✅     | ✅    | ❌
+Chips                         | 🟡     | ❌    | ❌
+Dialog                        | ✅     | ✅    | ❌
+Divider                       | ✅     | ✅    | 🟡
+Elevation                     | ✅     | ❌    | ❌
+Focus ring                    | ✅     | ❌    | ❌
+Field                         | ✅     | ✅    | 🟡
+Icon                          | ✅     | ✅    | ❌
+List                          | ✅     | 🟡    | 🟡
+Menu                          | ✅     | 🟡    | 🟡
+Progress indicator (circular) | 🟡     | ❌    | ❌
+Progress indicator (linear)   | 🟡     | ❌    | ❌
+Radio button                  | ✅     | ✅    | ❌
+Ripple                        | ✅     | ✅    | 🟡
+Select                        | 🟡     | ❌    | ❌
+Slider                        | ✅     | ✅    | ❌
+Switch                        | ✅     | ✅    | ❌
+Tabs                          | 🟡     | ❌    | ❌
+Text field                    | ✅     | ✅    | 🟡
 
 ### 1.1+ Components
 
@@ -62,20 +62,20 @@ These components are planned for release after 1.0.
 
 Component         | Alpha | Beta | Stable
 ----------------- | :---: | :--: | :----:
-Autocomplete      | 🟡     | 🔴    | 🔴
-Badge             | 🟡     | 🔴    | 🔴
-Banner            | 🔴     | 🔴    | 🔴
-Bottom app bar    | 🔴     | 🔴    | 🔴
-Bottom sheet      | 🔴     | 🔴    | 🔴
-Segmented button  | 🟡     | 🔴    | 🔴
-Card              | 🔴     | 🔴    | 🔴
-Data table        | 🔴     | 🔴    | 🔴
-Date picker       | 🔴     | 🔴    | 🔴
-Navigation bar    | 🟡     | 🔴    | 🔴
-Navigation drawer | 🟡     | 🔴    | 🔴
-Navigation rail   | 🔴     | 🔴    | 🔴
-Search            | 🔴     | 🔴    | 🔴
-Snackbar          | 🔴     | 🔴    | 🔴
-Time picker       | 🔴     | 🔴    | 🔴
-Tooltip           | 🔴     | 🔴    | 🔴
-Top app bar       | 🔴     | 🔴    | 🔴
+Autocomplete      | ❌     | ❌    | ❌
+Badge             | 🟡     | ❌    | ❌
+Banner            | ❌     | ❌    | ❌
+Bottom app bar    | ❌     | ❌    | ❌
+Bottom sheet      | ❌     | ❌    | ❌
+Segmented button  | 🟡     | ❌    | ❌
+Card              | ❌     | ❌    | ❌
+Data table        | ❌     | ❌    | ❌
+Date picker       | ❌     | ❌    | ❌
+Navigation bar    | 🟡     | ❌    | ❌
+Navigation drawer | 🟡     | ❌    | ❌
+Navigation rail   | ❌     | ❌    | ❌
+Search            | ❌     | ❌    | ❌
+Snackbar          | ❌     | ❌    | ❌
+Time picker       | ❌     | ❌    | ❌
+Tooltip           | ❌     | ❌    | ❌
+Top 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();