@material/web 0.1.0-alpha.0 → 0.1.0-alpha.1

package/badge/lib/_badge.scss

@@ -6,36 +6,75 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use 'sass:map';
+@use '../../sass/theme';
+@use '../../tokens';
+
+$_custom-property-prefix: 'badge';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-badge-values(), $tokens);
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-badge-values();
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
   .md3-badge {
-    @include _root;
+    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);
+
+    &:not(.md3-badge--large) {
+      // Separate selector since large uses min-width
+      width: var(--_size);
+    }
 
     &.md3-badge--large {
-      @include _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__value {
-        @include _value;
+        padding: 0px 4px;
       }
     }
   }
-}
 
-@mixin _root() {
-  inset-inline-start: 50%;
-  margin-inline-start: 6px;
-  margin-block-start: 4px;
-  position: absolute;
-  inset-block-start: 0px;
-}
-
-@mixin _large() {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-inline-start: 2px;
-  margin-block-start: 1px;
+  .md3-badge__value {
+    font-family: var(--_large-label-text-font);
+    font-size: var(--_large-label-text-size);
+    letter-spacing: var(--_large-label-text-tracking);
+    line-height: var(--_large-label-text-line-height);
+    font-weight: var(--_large-label-text-weight);
+  }
 }
 
-@mixin _value() {
-  padding: 0px 4px;
+@function _resolve-tokens($tokens) {
+  // Remove unsupported tokens
+  $tokens: map.remove($tokens, large-label-text-type);
+  @return $tokens;
 }

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 `.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge:not(.md3-badge--large){background-color:var(--md-badge-color, var(--md-sys-color-error, #b3261e))}.md3-badge:not(.md3-badge--large){border-radius:var(--md-badge-shape, 9999px)}.md3-badge:not(.md3-badge--large){height:var(--md-badge-size, 6px);width:var(--md-badge-size, 6px)}.md3-badge.md3-badge--large{background-color:var(--md-badge-large-color, var(--md-sys-color-error, #b3261e))}.md3-badge.md3-badge--large{border-radius:var(--md-badge-large-shape, 9999px)}.md3-badge.md3-badge--large{height:var(--md-badge-large-size, 16px);min-width:var(--md-badge-large-size, 16px)}.md3-badge .md3-badge__value{font-family:var(--md-badge-large-label-text-font, Roboto);font-size:var(--md-badge-large-label-text-size, 11px);letter-spacing:var(--md-badge-large-label-text-tracking, 0.5px);line-height:var(--md-badge-large-label-text-line-height, 16px);font-weight:var(--md-badge-large-label-text-weight, 500)}.md3-badge.md3-badge--large{color:var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff))}/*# 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-font: var(--md-badge-large-label-text-font, Roboto);--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, 1rem);--_large-label-text-size: var(--md-badge-large-label-text-size, 0.688rem);--_large-label-text-tracking: var(--md-badge-large-label-text-tracking, 0.031rem);--_large-label-text-weight: var(--md-badge-large-label-text-weight, 500);--_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-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);letter-spacing:var(--_large-label-text-tracking);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}/*# 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`.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge:not(.md3-badge--large){background-color:var(--md-badge-color, var(--md-sys-color-error, #b3261e))}.md3-badge:not(.md3-badge--large){border-radius:var(--md-badge-shape, 9999px)}.md3-badge:not(.md3-badge--large){height:var(--md-badge-size, 6px);width:var(--md-badge-size, 6px)}.md3-badge.md3-badge--large{background-color:var(--md-badge-large-color, var(--md-sys-color-error, #b3261e))}.md3-badge.md3-badge--large{border-radius:var(--md-badge-large-shape, 9999px)}.md3-badge.md3-badge--large{height:var(--md-badge-large-size, 16px);min-width:var(--md-badge-large-size, 16px)}.md3-badge .md3-badge__value{font-family:var(--md-badge-large-label-text-font, Roboto);font-size:var(--md-badge-large-label-text-size, 11px);letter-spacing:var(--md-badge-large-label-text-tracking, 0.5px);line-height:var(--md-badge-large-label-text-line-height, 16px);font-weight:var(--md-badge-large-label-text-weight, 500)}.md3-badge.md3-badge--large{color:var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff))}/*# 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-font: var(--md-badge-large-label-text-font, Roboto);--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, 1rem);--_large-label-text-size: var(--md-badge-large-label-text-size, 0.688rem);--_large-label-text-tracking: var(--md-badge-large-label-text-tracking, 0.031rem);--_large-label-text-weight: var(--md-badge-large-label-text-weight, 500);--_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-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);letter-spacing:var(--_large-label-text-tracking);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}/*# sourceMappingURL=badge-styles.css.map */\n`;\n "]}

package/badge/lib/badge-styles.scss

@@ -3,14 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './badge';
-@use './badge-theme';
-
-@include badge.static-styles;
 
-.md3-badge {
-  @include badge-theme.theme-styles(badge-theme.$light-theme);
-}
+@include badge.styles;

package/button/_elevated-button.scss

@@ -3,6 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/elevated-button-theme' show
-  $light-theme,
-  theme;
+@forward './lib/elevated-button' show theme;

package/button/_filled-button.scss

@@ -3,6 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/filled-button-theme' show
-  $light-theme,
-  theme;
+@forward './lib/filled-button' show theme;

package/button/_outlined-button.scss

@@ -3,6 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/outlined-button-theme' show
-  $light-theme,
-  theme;
+@forward './lib/outlined-button' show theme;

package/button/_text-button.scss

@@ -3,6 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/text-button-theme' show
-  $light-theme,
-  theme;
+@forward './lib/text-button' show theme;

package/button/_tonal-button.scss

@@ -3,6 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/tonal-button-theme' show
-  $light-theme,
-  theme;
+@forward './lib/tonal-button' show theme;

package/button/elevated-button.d.ts

@@ -10,7 +10,24 @@ declare global {
     }
 }
 /**
- * @soyCompatible
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter
+ * background color and a shadow. To prevent shadow creep, only use them when
+ * absolutely necessary, such as when the button requires visual separation from
+ * a patterned background.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
  * @final
  * @suppress {visibility}
  */

package/button/elevated-button.js

@@ -5,18 +5,35 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as elevationOverlayStyles } from '../elevation/lib/elevation-overlay-styles.css.js';
 import { ElevatedButton } from './lib/elevated-button.js';
 import { styles as elevatedStyles } from './lib/elevated-styles.css.js';
+import { styles as sharedElevationStyles } from './lib/shared-elevation-styles.css.js';
 import { styles as sharedStyles } from './lib/shared-styles.css.js';
 /**
- * @soyCompatible
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter
+ * background color and a shadow. To prevent shadow creep, only use them when
+ * absolutely necessary, such as when the button requires visual separation from
+ * a patterned background.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
  * @final
  * @suppress {visibility}
  */
 let MdElevatedButton = class MdElevatedButton extends ElevatedButton {
 };
-MdElevatedButton.styles = [elevationOverlayStyles, sharedStyles, elevatedStyles];
+MdElevatedButton.styles = [sharedStyles, sharedElevationStyles, elevatedStyles];
 MdElevatedButton = __decorate([
     customElement('md-elevated-button')
 ], MdElevatedButton);

package/button/elevated-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevated-button.js","sourceRoot":"","sources":["elevated-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,sBAAsB,EAAC,MAAM,kDAAkD,CAAC;AAElG,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,cAAc;CAGnD,CAAA;AAFiB,uBAAM,GAClB,CAAC,sBAAsB,EAAE,YAAY,EAAE,cAAc,CAAE,CAAA;AAFhD,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAG5B;SAHY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevationOverlayStyles} from '../elevation/lib/elevation-overlay-styles.css.js';\n\nimport {ElevatedButton} from './lib/elevated-button.js';\nimport {styles as elevatedStyles} from './lib/elevated-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevated-button': MdElevatedButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-button')\nexport class MdElevatedButton extends ElevatedButton {\n  static override styles =\n      [elevationOverlayStyles, sharedStyles, elevatedStyles];\n}\n"]}
+{"version":3,"file":"elevated-button.js","sourceRoot":"","sources":["elevated-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,cAAc;CAGnD,CAAA;AAFiB,uBAAM,GAClB,CAAC,YAAY,EAAE,qBAAqB,EAAE,cAAc,CAAE,CAAA;AAF/C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAG5B;SAHY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {ElevatedButton} from './lib/elevated-button.js';\nimport {styles as elevatedStyles} from './lib/elevated-styles.css.js';\nimport {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevated-button': MdElevatedButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ Medium emphasis – For important actions that don’t distract\n * from other onscreen elements.\n *\n * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter\n * background color and a shadow. To prevent shadow creep, only use them when\n * absolutely necessary, such as when the button requires visual separation from\n * a patterned background.\n *\n * __Example usages:__\n * - Reply\n * - View all\n * - Add to cart\n * - Take out of trash\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-button')\nexport class MdElevatedButton extends ElevatedButton {\n  static override styles =\n      [sharedStyles, sharedElevationStyles, elevatedStyles];\n}\n"]}

package/button/elevated-link-button.d.ts

@@ -10,7 +10,24 @@ declare global {
     }
 }
 /**
- * @soyCompatible
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment. This is a linkable variant.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter
+ * background color and a shadow. To prevent shadow creep, only use them when
+ * absolutely necessary, such as when the button requires visual separation from
+ * a patterned background.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
  * @final
  * @suppress {visibility}
  */

package/button/elevated-link-button.js

@@ -5,18 +5,35 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as elevationOverlayStyles } from '../elevation/lib/elevation-overlay-styles.css.js';
 import { ElevatedLinkButton } from './lib/elevated-link-button.js';
 import { styles as elevatedStyles } from './lib/elevated-styles.css.js';
+import { styles as sharedElevationStyles } from './lib/shared-elevation-styles.css.js';
 import { styles as sharedStyles } from './lib/shared-styles.css.js';
 /**
- * @soyCompatible
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment. This is a linkable variant.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter
+ * background color and a shadow. To prevent shadow creep, only use them when
+ * absolutely necessary, such as when the button requires visual separation from
+ * a patterned background.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
  * @final
  * @suppress {visibility}
  */
 let MdElevatedLinkButton = class MdElevatedLinkButton extends ElevatedLinkButton {
 };
-MdElevatedLinkButton.styles = [elevationOverlayStyles, sharedStyles, elevatedStyles];
+MdElevatedLinkButton.styles = [sharedStyles, sharedElevationStyles, elevatedStyles];
 MdElevatedLinkButton = __decorate([
     customElement('md-elevated-link-button')
 ], MdElevatedLinkButton);

package/button/elevated-link-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevated-link-button.js","sourceRoot":"","sources":["elevated-link-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,sBAAsB,EAAC,MAAM,kDAAkD,CAAC;AAElG,OAAO,EAAC,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,kBAAkB;CAG3D,CAAA;AAFiB,2BAAM,GAClB,CAAC,sBAAsB,EAAE,YAAY,EAAE,cAAc,CAAE,CAAA;AAFhD,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAGhC;SAHY,oBAAoB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevationOverlayStyles} from '../elevation/lib/elevation-overlay-styles.css.js';\n\nimport {ElevatedLinkButton} from './lib/elevated-link-button.js';\nimport {styles as elevatedStyles} from './lib/elevated-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevated-link-button': MdElevatedLinkButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-link-button')\nexport class MdElevatedLinkButton extends ElevatedLinkButton {\n  static override styles =\n      [elevationOverlayStyles, sharedStyles, elevatedStyles];\n}\n"]}
+{"version":3,"file":"elevated-link-button.js","sourceRoot":"","sources":["elevated-link-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,kBAAkB;CAG3D,CAAA;AAFiB,2BAAM,GAClB,CAAC,YAAY,EAAE,qBAAqB,EAAE,cAAc,CAAE,CAAA;AAF/C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAGhC;SAHY,oBAAoB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {ElevatedLinkButton} from './lib/elevated-link-button.js';\nimport {styles as elevatedStyles} from './lib/elevated-styles.css.js';\nimport {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevated-link-button': MdElevatedLinkButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment. This is a linkable variant.\n *\n * @description\n * __Emphasis:__ Medium emphasis – For important actions that don’t distract\n * from other onscreen elements.\n *\n * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter\n * background color and a shadow. To prevent shadow creep, only use them when\n * absolutely necessary, such as when the button requires visual separation from\n * a patterned background.\n *\n * __Example usages:__\n * - Reply\n * - View all\n * - Add to cart\n * - Take out of trash\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-link-button')\nexport class MdElevatedLinkButton extends ElevatedLinkButton {\n  static override styles =\n      [sharedStyles, sharedElevationStyles, elevatedStyles];\n}\n"]}

package/button/filled-button.d.ts

@@ -10,7 +10,22 @@ declare global {
     }
 }
 /**
- * @soyCompatible
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The filled button’s contrasting surface color makes it the
+ * most prominent button after the FAB. It’s used for final or unblocking
+ * actions in a flow.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
  * @final
  * @suppress {visibility}
  */

package/button/filled-button.js

@@ -7,15 +7,31 @@ import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { FilledButton } from './lib/filled-button.js';
 import { styles as filledStyles } from './lib/filled-styles.css.js';
+import { styles as sharedElevationStyles } from './lib/shared-elevation-styles.css.js';
 import { styles as sharedStyles } from './lib/shared-styles.css.js';
 /**
- * @soyCompatible
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The filled button’s contrasting surface color makes it the
+ * most prominent button after the FAB. It’s used for final or unblocking
+ * actions in a flow.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
  * @final
  * @suppress {visibility}
  */
 let MdFilledButton = class MdFilledButton extends FilledButton {
 };
-MdFilledButton.styles = [sharedStyles, filledStyles];
+MdFilledButton.styles = [sharedStyles, sharedElevationStyles, filledStyles];
 MdFilledButton = __decorate([
     customElement('md-filled-button')
 ], MdFilledButton);

package/button/filled-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-button.js","sourceRoot":"","sources":["filled-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,YAAY;CAE/C,CAAA;AADiB,qBAAM,GAAG,CAAC,YAAY,EAAE,YAAY,CAAE,CAAA;AAD3C,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B;SAFY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledButton} from './lib/filled-button.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-button': MdFilledButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-button')\nexport class MdFilledButton extends FilledButton {\n  static override styles = [sharedStyles, filledStyles];\n}\n"]}
+{"version":3,"file":"filled-button.js","sourceRoot":"","sources":["filled-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,YAAY;CAE/C,CAAA;AADiB,qBAAM,GAAG,CAAC,YAAY,EAAE,qBAAqB,EAAE,YAAY,CAAE,CAAA;AADlE,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B;SAFY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledButton} from './lib/filled-button.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-button': MdFilledButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The filled button’s contrasting surface color makes it the\n * most prominent button after the FAB. It’s used for final or unblocking\n * actions in a flow.\n *\n * __Example usages:__\n * - Save\n * - Confirm\n * - Done\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-button')\nexport class MdFilledButton extends FilledButton {\n  static override styles = [sharedStyles, sharedElevationStyles, filledStyles];\n}\n"]}

package/button/filled-link-button.d.ts

@@ -10,7 +10,22 @@ declare global {
     }
 }
 /**
- * @soyCompatible
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment. This is a linkable variant.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The filled button’s contrasting surface color makes it the
+ * most prominent button after the FAB. It’s used for final or unblocking
+ * actions in a flow.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
  * @final
  * @suppress {visibility}
  */

package/button/filled-link-button.js

@@ -7,15 +7,31 @@ import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { FilledLinkButton } from './lib/filled-link-button.js';
 import { styles as filledStyles } from './lib/filled-styles.css.js';
+import { styles as sharedElevationStyles } from './lib/shared-elevation-styles.css.js';
 import { styles as sharedStyles } from './lib/shared-styles.css.js';
 /**
- * @soyCompatible
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment. This is a linkable variant.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The filled button’s contrasting surface color makes it the
+ * most prominent button after the FAB. It’s used for final or unblocking
+ * actions in a flow.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
  * @final
  * @suppress {visibility}
  */
 let MdFilledLinkButton = class MdFilledLinkButton extends FilledLinkButton {
 };
-MdFilledLinkButton.styles = [sharedStyles, filledStyles];
+MdFilledLinkButton.styles = [sharedStyles, sharedElevationStyles, filledStyles];
 MdFilledLinkButton = __decorate([
     customElement('md-filled-link-button')
 ], MdFilledLinkButton);

package/button/filled-link-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-link-button.js","sourceRoot":"","sources":["filled-link-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,gBAAgB;CAEvD,CAAA;AADiB,yBAAM,GAAG,CAAC,YAAY,EAAE,YAAY,CAAE,CAAA;AAD3C,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAE9B;SAFY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledLinkButton} from './lib/filled-link-button.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-link-button': MdFilledLinkButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-link-button')\nexport class MdFilledLinkButton extends FilledLinkButton {\n  static override styles = [sharedStyles, filledStyles];\n}\n"]}
+{"version":3,"file":"filled-link-button.js","sourceRoot":"","sources":["filled-link-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,gBAAgB;CAEvD,CAAA;AADiB,yBAAM,GAAG,CAAC,YAAY,EAAE,qBAAqB,EAAE,YAAY,CAAE,CAAA;AADlE,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAE9B;SAFY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledLinkButton} from './lib/filled-link-button.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-link-button': MdFilledLinkButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment. This is a linkable variant.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The filled button’s contrasting surface color makes it the\n * most prominent button after the FAB. It’s used for final or unblocking\n * actions in a flow.\n *\n * __Example usages:__\n * - Save\n * - Confirm\n * - Done\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-link-button')\nexport class MdFilledLinkButton extends FilledLinkButton {\n  static override styles = [sharedStyles, sharedElevationStyles, filledStyles];\n}\n"]}

package/button/harness.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Harness } from '@material/web/testing/harness.js';
+import { Harness } from '../testing/harness.js';
 import { Button } from './lib/button.js';
 /**
  * Test harness for buttons.

package/button/harness.js

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Harness } from '@material/web/testing/harness.js';
+import { Harness } from '../testing/harness.js';
 /**
  * Test harness for buttons.
  */

package/button/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAIzD;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IAC7B,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAC;IAC7E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '@material/web/testing/harness.js';\n\nimport {Button} from './lib/button.js';\n\n/**\n * Test harness for buttons.\n */\nexport class ButtonHarness extends Harness<Button> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.md3-button') as HTMLElement;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IAC7B,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAC;IAC7E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Button} from './lib/button.js';\n\n/**\n * Test harness for buttons.\n */\nexport class ButtonHarness extends Harness<Button> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.md3-button') as HTMLElement;\n  }\n}\n"]}

package/button/lib/_elevated-button.scss

@@ -3,6 +3,55 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@mixin static-styles() {
-  // Intentionally left blank for future-proofing.
+@use 'sass:map';
+@use '../../sass/resolvers';
+@use '../../sass/theme';
+@use '../../sass/typography';
+@use '../../tokens';
+@use './elevation';
+@use './shared';
+
+$_custom-property-prefix: 'elevated-button';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-elevated-button-values(),
+    $tokens
+  );
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@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);
+
+  :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-theme(
+    $tokens,
+    map.get(resolvers.$material, 'typography'),
+    'label-text'
+  );
+  @return elevation.resolve-tokens($tokens);
 }

package/button/lib/_elevation.scss

@@ -0,0 +1,74 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+@use 'sass:meta';
+
+@use '../../elevation/lib/elevation';
+
+@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-color: var(--_container-surface-tint-layer-color)
+      )
+    );
+  }
+
+  .md3-button:hover {
+    @include elevation.theme(
+      (
+        level: var(--_hover-container-elevation),
+      )
+    );
+  }
+
+  .md3-button:focus {
+    @include elevation.theme(
+      (
+        level: var(--_focus-container-elevation),
+      )
+    );
+  }
+
+  .md3-button:active {
+    @include elevation.theme(
+      (
+        level: var(--_pressed-container-elevation),
+      )
+    );
+  }
+
+  .md3-button:disabled {
+    @include elevation.theme(
+      (
+        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'
+  );
+}