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

package/autocomplete/lib/outlined-styles.scss

@@ -3,6 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use './outlined-autocomplete';
+// go/keep-sorted end
 
 @include outlined-autocomplete.styles;

package/autocomplete/lib/shared-styles.scss

@@ -3,6 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use './shared';
+// go/keep-sorted end
 
 @include shared.styles;

package/autocomplete/outlined-autocomplete.d.ts

@@ -25,6 +25,4 @@ export declare class MdOutlinedAutocomplete extends Autocomplete {
     protected readonly fieldTag: import("lit-html/static.js").StaticValue;
     /** @soyTemplate */
     protected getAutocompleteRenderClasses(): ClassInfo;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
 }

package/autocomplete/outlined-autocomplete.js

@@ -34,13 +34,6 @@ let MdOutlinedAutocomplete = class MdOutlinedAutocomplete extends Autocomplete {
             'md3-autocomplete--outlined': true,
         };
     }
-    /** @soyTemplate */
-    getRenderClasses() {
-        return {
-            ...super.getRenderClasses(),
-            'md3-text-field--outlined': true,
-        };
-    }
 };
 MdOutlinedAutocomplete.styles = [
     sharedStyles, outlinedStyles, outlinedForcedColorsStyles,

package/autocomplete/outlined-autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-autocomplete.js","sourceRoot":"","sources":["outlined-autocomplete.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,uDAAuD,CAAC;AAC3G,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE7E,OAAO,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAQ9E;;;;GAIG;AAEH,IAAa,sBAAsB,GAAnC,MAAa,sBAAuB,SAAQ,YAAY;IAAxD;;QAM8B,YAAO,GAAG,OAAO,CAAA,sBAAsB,CAAC;QACxC,mBAAc,GAAG,OAAO,CAAA,yBAAyB,CAAC;QAClD,aAAQ,GAAG,OAAO,CAAA,mBAAmB,CAAC;IAiBpE,CAAC;IAfC,mBAAmB;IACA,4BAA4B;QAC7C,OAAO;YACL,GAAG,KAAK,CAAC,4BAA4B,EAAE;YACvC,4BAA4B,EAAE,IAAI;SACnC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,0BAA0B,EAAE,IAAI;SACjC,CAAC;IACJ,CAAC;CACF,CAAA;AAxBiB,6BAAM,GAAG;IACvB,YAAY,EAAE,cAAc,EAAE,0BAA0B;IACxD,wBAAwB,EAAE,kBAAkB;CAC5C,CAAA;AAJS,sBAAsB;IADlC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,sBAAsB,CAyBlC;SAzBY,sBAAsB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/outlined-field.js';\nimport './autocomplete-list.js';\nimport './autocomplete-surface.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as outlinedForcedColorsStyles} from '../textfield/lib/outlined-forced-colors-styles.css.js';\nimport {styles as outlinedStyles} from '../textfield/lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from '../textfield/lib/shared-styles.css.js';\n\nimport {Autocomplete} from './lib/autocomplete.js';\nimport {styles as autocompleteStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedAutocompleteStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-autocomplete': MdOutlinedAutocomplete;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-autocomplete')\nexport class MdOutlinedAutocomplete extends Autocomplete {\n  static override styles = [\n    sharedStyles, outlinedStyles, outlinedForcedColorsStyles,\n    sharedAutocompleteStyles, autocompleteStyles\n  ];\n\n  protected override readonly listTag = literal`md-autocomplete-list`;\n  protected override readonly menuSurfaceTag = literal`md-autocomplete-surface`;\n  protected override readonly fieldTag = literal`md-outlined-field`;\n\n  /** @soyTemplate */\n  protected override getAutocompleteRenderClasses(): ClassInfo {\n    return {\n      ...super.getAutocompleteRenderClasses(),\n      'md3-autocomplete--outlined': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-text-field--outlined': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"outlined-autocomplete.js","sourceRoot":"","sources":["outlined-autocomplete.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,uDAAuD,CAAC;AAC3G,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE7E,OAAO,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAQ9E;;;;GAIG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,YAAY;IAAjD;;QAMuB,YAAO,GAAG,OAAO,CAAA,sBAAsB,CAAC;QACxC,mBAAc,GAAG,OAAO,CAAA,yBAAyB,CAAC;QAClD,aAAQ,GAAG,OAAO,CAAA,mBAAmB,CAAC;IASpE,CAAC;IAPC,mBAAmB;IACA,4BAA4B;QAC7C,OAAO;YACL,GAAG,KAAK,CAAC,4BAA4B,EAAE;YACvC,4BAA4B,EAAE,IAAI;SACnC,CAAC;IACJ,CAAC;;AAfe,6BAAM,GAAG;IACvB,YAAY,EAAE,cAAc,EAAE,0BAA0B;IACxD,wBAAwB,EAAE,kBAAkB;CAC7C,CAAC;AAJS,sBAAsB;IADlC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,sBAAsB,CAiBlC;SAjBY,sBAAsB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/outlined-field.js';\nimport './autocomplete-list.js';\nimport './autocomplete-surface.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as outlinedForcedColorsStyles} from '../textfield/lib/outlined-forced-colors-styles.css.js';\nimport {styles as outlinedStyles} from '../textfield/lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from '../textfield/lib/shared-styles.css.js';\n\nimport {Autocomplete} from './lib/autocomplete.js';\nimport {styles as autocompleteStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedAutocompleteStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-autocomplete': MdOutlinedAutocomplete;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-autocomplete')\nexport class MdOutlinedAutocomplete extends Autocomplete {\n  static override styles = [\n    sharedStyles, outlinedStyles, outlinedForcedColorsStyles,\n    sharedAutocompleteStyles, autocompleteStyles\n  ];\n\n  protected override readonly listTag = literal`md-autocomplete-list`;\n  protected override readonly menuSurfaceTag = literal`md-autocomplete-surface`;\n  protected override readonly fieldTag = literal`md-outlined-field`;\n\n  /** @soyTemplate */\n  protected override getAutocompleteRenderClasses(): ClassInfo {\n    return {\n      ...super.getAutocompleteRenderClasses(),\n      'md3-autocomplete--outlined': true,\n    };\n  }\n}\n"]}

package/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAQjD;;;;GAIG;AAEH,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,KAAK;CAEjC,CAAA;AADiB,cAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAEnB;SAFY,OAAO","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Badge} from './lib/badge.js';\nimport {styles} from './lib/badge-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-badge': MdBadge;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-badge')\nexport class MdBadge extends Badge {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAQjD;;;;GAIG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,KAAK;;AAChB,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAEnB;SAFY,OAAO","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Badge} from './lib/badge.js';\nimport {styles} from './lib/badge-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-badge': MdBadge;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-badge')\nexport class MdBadge extends Badge {\n  static override styles = [styles];\n}\n"]}

package/badge/lib/_badge.scss

@@ -6,23 +6,26 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@use 'sass:map';
+// 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(tokens.md-comp-badge-values(), $tokens);
-  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.validate-theme(
+    _resolve-tokens(tokens.md-comp-badge-values()),
+    _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: _resolve-tokens(tokens.md-comp-badge-values());
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
@@ -65,16 +68,10 @@ $_custom-property-prefix: 'badge';
   }
 
   .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);
+    font: var(--_large-label-text-type);
   }
 }
 
 @function _resolve-tokens($tokens) {
-  // Remove unsupported tokens
-  $tokens: map.remove($tokens, large-label-text-type);
-  @return $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-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 */
+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 */
 `;
 //# 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-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 "]}
+{"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 "]}

package/badge/lib/badge-styles.scss

@@ -3,6 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use './badge';
+// go/keep-sorted end
 
 @include badge.styles;

package/badge/lib/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE,qBAAqB;AACrB,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QAC4B,UAAK,GAAG,EAAE,CAAC;IAevC,CAAC;IAbC,mBAAmB;IACA,MAAM;QACvB,OAAO,IAAI,CAAA,yBACP,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,iCACjC,IAAI,CAAC,KAAK,YAAY,CAAC;IAC7B,CAAC;IAED,mBAAmB;IACT,gBAAgB;QACxB,OAAO;YACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;SAC/B,CAAC;IACJ,CAAC;CACF;AAf2B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;oCAAY","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\n/** @soyCompatible */\nexport class Badge extends LitElement {\n  @property({type: String}) value = '';\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<div class=\"md3-badge ${\n        classMap(this.getRenderClasses())}\"><p class=\"md3-badge__value\">${\n        this.value}</p></div>`;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-badge--large': this.value,\n    };\n  }\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE,qBAAqB;AACrB,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QAC4B,UAAK,GAAG,EAAE,CAAC;IAevC,CAAC;IAbC,mBAAmB;IACA,MAAM;QACvB,OAAO,IAAI,CAAA,yBACP,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,iCACjC,IAAI,CAAC,KAAK,YAAY,CAAC;IAC7B,CAAC;IAED,mBAAmB;IACT,gBAAgB;QACxB,OAAO;YACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;SAC/B,CAAC;IACJ,CAAC;CACF;AAfC;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;oCAAY","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\n/** @soyCompatible */\nexport class Badge extends LitElement {\n  @property({type: String}) value = '';\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<div class=\"md3-badge ${\n        classMap(this.getRenderClasses())}\"><p class=\"md3-badge__value\">${\n        this.value}</p></div>`;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-badge--large': this.value,\n    };\n  }\n}\n"]}

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,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"]}
+{"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;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAClB,CAAC,YAAY,EAAE,qBAAqB,EAAE,cAAc,CAAC,CAAC;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.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,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"]}
+{"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;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,kBAAkB;;AAC1C,2BAAM,GAClB,CAAC,YAAY,EAAE,qBAAqB,EAAE,cAAc,CAAC,CAAC;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.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,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"]}
+{"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;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,YAAY,EAAE,qBAAqB,EAAE,YAAY,CAAC,CAAC;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.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,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"]}
+{"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;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;;AACtC,yBAAM,GAAG,CAAC,YAAY,EAAE,qBAAqB,EAAE,YAAY,CAAC,CAAC;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/lib/_elevated-button.scss

@@ -3,24 +3,27 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:map';
-@use '../../sass/resolvers';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/typography';
-@use '../../sass/shape';
 @use '../../tokens';
 @use './elevation';
 @use './shared';
+// go/keep-sorted end
 
 $_custom-property-prefix: 'elevated-button';
 
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(
-    tokens.md-comp-elevated-button-values(),
-    $tokens
+    _resolve-tokens(tokens.md-comp-elevated-button-values()),
+    _resolve-tokens($tokens)
   );
-  $tokens: _resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+  $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
   @include theme.emit-theme-vars($tokens);
 }
@@ -38,6 +41,7 @@ $_custom-property-prefix: 'elevated-button';
 
   $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 {
@@ -49,15 +53,6 @@ $_custom-property-prefix: 'elevated-button';
 @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'
-  );
-  $tokens: shape.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'shape'),
-    'container-shape'
-  );
+  $tokens: typography.resolve-tokens($tokens, 'label-text');
   @return elevation.resolve-tokens($tokens);
 }

package/button/lib/_elevation.scss

@@ -6,10 +6,13 @@
 // stylelint-disable selector-class-pattern --
 // 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';
+// go/keep-sorted end
 
 @mixin styles() {
   md-elevation {
@@ -24,7 +27,7 @@
         duration: 280ms,
         level: var(--_container-elevation),
         shadow-color: var(--_container-shadow-color),
-        surface-tint-color: var(--_container-surface-tint-layer-color)
+        surface-tint: var(--_container-surface-tint-layer-color)
       )
     );
 

package/button/lib/_filled-button.scss

@@ -3,21 +3,27 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:map';
-@use '../../sass/resolvers';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/typography';
-@use '../../sass/shape';
 @use '../../tokens';
 @use './elevation';
 @use './shared';
+// go/keep-sorted end
 
 $_custom-property-prefix: 'filled-button';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-filled-button-values(), $tokens);
-  $tokens: _resolve-tokens($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');
 
   @include theme.emit-theme-vars($tokens);
 }
@@ -34,6 +40,7 @@ $_custom-property-prefix: 'filled-button';
   $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 {
@@ -45,15 +52,6 @@ $_custom-property-prefix: 'filled-button';
 @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'
-  );
-  $tokens: shape.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'shape'),
-    'container-shape'
-  );
+  $tokens: typography.resolve-tokens($tokens, 'label-text');
   @return elevation.resolve-tokens($tokens);
 }

package/button/lib/_icon.scss

@@ -10,41 +10,32 @@
   // The icon CSS class overrides styles defined in the .material-icons CSS
   // class, which is loaded separately so the order of CSS definitions is not
   // guaranteed. Therefore, increase specifity to ensure overrides apply.
-  .md3-button__icon-slot-container {
-    display: inline-flex;
-
-    ::slotted([slot='icon']) {
+  ::slotted([slot='icon']) {
+    .md3-button & {
       display: inline-flex;
       position: relative;
       writing-mode: horizontal-tb;
+      fill: currentColor;
       color: var(--_with-icon-icon-color);
       font-size: var(--_with-icon-icon-size);
       inline-size: var(--_with-icon-icon-size);
       block-size: var(--_with-icon-icon-size);
+    }
 
-      .md3-button:hover & {
-        color: var(--_with-icon-hover-icon-color);
-      }
-
-      .md3-button:focus & {
-        color: var(--_with-icon-focus-icon-color);
-      }
-
-      .md3-button:active & {
-        color: var(--_with-icon-pressed-icon-color);
-      }
+    .md3-button:hover & {
+      color: var(--_with-icon-hover-icon-color);
+    }
 
-      .md3-button:disabled & {
-        color: var(--_with-icon-disabled-icon-color);
-      }
+    .md3-button:focus & {
+      color: var(--_with-icon-focus-icon-color);
     }
-  }
 
-  .md3-button__icon--leading ::slotted([slot='icon']) {
-    margin-inline-end: 8px;
-  }
+    .md3-button:active & {
+      color: var(--_with-icon-pressed-icon-color);
+    }
 
-  .md3-button__icon--trailing ::slotted([slot='icon']) {
-    margin-inline-start: 8px;
+    .md3-button:disabled & {
+      color: var(--_with-icon-disabled-icon-color);
+    }
   }
 }

package/button/lib/_outlined-button.scss

@@ -3,13 +3,16 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:map';
-@use '../../sass/resolvers';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/typography';
-@use '../../sass/shape';
 @use '../../tokens';
 @use './shared';
+// go/keep-sorted end
 
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
@@ -18,11 +21,11 @@ $_custom-property-prefix: 'outlined-button';
 
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(
-    tokens.md-comp-outlined-button-values(),
-    $tokens
+    _resolve-tokens(tokens.md-comp-outlined-button-values()),
+    _resolve-tokens($tokens)
   );
-  $tokens: _resolve-theme($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+  $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
   @include theme.emit-theme-vars($tokens);
 }
@@ -39,6 +42,7 @@ $_custom-property-prefix: 'outlined-button';
   $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 {
@@ -82,15 +86,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-theme(
-    $tokens,
-    map.get(resolvers.$material, 'typography'),
-    'label-text'
-  );
-  $tokens: shape.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'shape'),
-    'container-shape'
-  );
+  $tokens: typography.resolve-tokens($tokens, 'label-text');
   @return $tokens;
 }

package/button/lib/_shared.scss

@@ -6,13 +6,17 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
+// go/keep-sorted start
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../focus/focus-ring';
 @use '../../ripple/ripple';
 @use '../../sass/color';
 @use '../../sass/dom';
-@use '../../sass/typography';
 @use '../../sass/resolvers';
-@use '../../focus/focus-ring';
+@use '../../sass/typography';
+// go/keep-sorted end
 
 @mixin styles() {
   :host {
@@ -28,12 +32,12 @@
 
     @include ripple.theme(
       (
-        hover-state-layer-color: var(--_hover-state-layer-color),
-        focus-state-layer-color: var(--_focus-state-layer-color),
-        pressed-state-layer-color: var(--_pressed-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        hover-color: var(--_hover-state-layer-color),
+        focus-color: var(--_focus-state-layer-color),
+        pressed-color: var(--_pressed-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
 
@@ -62,7 +66,6 @@
     min-inline-size: 64px;
     border: none;
     outline: none;
-    line-height: inherit;
     user-select: none;
     -webkit-appearance: none;
     vertical-align: middle;
@@ -72,15 +75,13 @@
     position: relative;
     z-index: 0; // Place content on top of elevation and ripple
     block-size: var(--_container-height);
-    font-family: var(--_label-text-font);
-    font-size: var(--_label-text-size);
-    letter-spacing: var(--_label-text-tracking);
-    font-weight: var(--_label-text-weight);
+    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;
 
     &::-moz-focus-inner {
       padding: 0;
@@ -179,12 +180,7 @@
     'dragged-label-text-color',
     'dragged-state-layer-color',
     'dragged-state-layer-opacity',
-    'with-icon-dragged-icon-color',
-    // b/189346077#comment2: `label-text-line-height` is included in token set
-    // "just in case", but it's okay to ignore.
-    'label-text-line-height',
-    // b/203778922: `label-text-type` used by other platforms but not web.
-    'label-text-type'
+    'with-icon-dragged-icon-color'
   );
   @return map.remove($tokens, $unsupported-tokens);
 }

package/button/lib/_text-button.scss

@@ -3,20 +3,26 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:map';
-@use '../../sass/resolvers';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/typography';
-@use '../../sass/shape';
 @use '../../tokens';
 @use './shared';
+// go/keep-sorted end
 
 $_custom-property-prefix: 'text-button';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-text-button-values(), $tokens);
-  $tokens: _resolve-tokens($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');
 
   @include theme.emit-theme-vars($tokens);
 }
@@ -33,6 +39,7 @@ $_custom-property-prefix: 'text-button';
   $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 {
@@ -50,15 +57,6 @@ $_custom-property-prefix: 'text-button';
   );
   $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
-  $tokens: typography.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'typography'),
-    'label-text'
-  );
-  $tokens: shape.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'shape'),
-    'container-shape'
-  );
+  $tokens: typography.resolve-tokens($tokens, 'label-text');
   @return $tokens;
 }