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

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `.md3-button--text{font-family:var(--md-text-button-label-text-font, Roboto);font-size:var(--md-text-button-label-text-size, 0.875rem);letter-spacing:var(--md-text-button-label-text-tracking, 0.00625rem);font-weight:var(--md-text-button-label-text-weight, 500);--md-ripple-hover-state-layer-color:var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-text-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-opacity:var(--md-text-button-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-text-button-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-text-button-pressed-state-layer-opacity, 0.12);block-size:var(--md-text-button-container-height, 40px);padding-inline-start:var(--md-text-button-spacing-leading, 12px);padding-inline-end:var(--md-text-button-spacing-trailing, 12px)}.md3-button--text:not(:disabled){color:var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):hover:not(:focus):not(:active){color:var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):focus:not(:active){color:var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):active{color:var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:disabled{color:var(--md-text-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-button--text,.md3-button--text .md3-button__ripple{border-radius:var(--md-text-button-container-shape, 9999px)}.md3-button--text.md3-button--icon-leading{padding-inline-start:var(--md-text-button-with-icon-spacing-leading, 12px);padding-inline-end:var(--md-text-button-with-icon-spacing-trailing, 16px)}.md3-button--text.md3-button--icon-trailing{padding-inline-start:var(--md-text-button-with-trailing-icon-spacing-leading, 16px);padding-inline-end:var(--md-text-button-with-trailing-icon-spacing-trailing, 12px)}.md3-button--text:not(:disabled) ::slotted([slot=icon]),.md3-button--text:not(:disabled) .md3-button__icon{color:var(--md-text-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):hover:not(:focus):not(:active) ::slotted([slot=icon]),.md3-button--text:not(:disabled):hover:not(:focus):not(:active) .md3-button__icon{color:var(--md-text-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):focus:not(:active) ::slotted([slot=icon]),.md3-button--text:not(:disabled):focus:not(:active) .md3-button__icon{color:var(--md-text-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):active ::slotted([slot=icon]),.md3-button--text:not(:disabled):active .md3-button__icon{color:var(--md-text-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:disabled ::slotted([slot=icon]),.md3-button--text:disabled .md3-button__icon{color:var(--md-text-button-with-icon-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-button--text ::slotted([slot=icon]),.md3-button--text .md3-button__icon{font-size:var(--md-text-button-with-icon-icon-size, 18px);inline-size:var(--md-text-button-with-icon-icon-size, 18px);block-size:var(--md-text-button-with-icon-icon-size, 18px)}/*# sourceMappingURL=text-styles.css.map */
+export const styles = css `:host{--_container-height: var(--md-text-button-container-height, 40px);--_container-shape: var(--md-text-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-text-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-label-text-color: var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-text-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-text-button-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-text-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-text-button-label-text-font, Roboto);--_label-text-line-height: var(--md-text-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-text-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-text-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-text-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-text-button-label-text-weight, 500);--_pressed-label-text-color: var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-text-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-text-button-with-icon-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_with-icon-focus-icon-color: var(--md-text-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-text-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-text-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-text-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-text-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-text-button-spacing-leading, 12px);--_spacing-trailing: var(--md-text-button-spacing-trailing, 12px);--_with-icon-spacing-leading: var(--md-text-button-with-icon-spacing-leading, 12px);--_with-icon-spacing-trailing: var(--md-text-button-with-icon-spacing-trailing, 16px);--_with-trailing-icon-spacing-leading: var(--md-text-button-with-trailing-icon-spacing-leading, 16px);--_with-trailing-icon-spacing-trailing: var(--md-text-button-with-trailing-icon-spacing-trailing, 12px)}/*# sourceMappingURL=text-styles.css.map */
 `;
 //# sourceMappingURL=text-styles.css.js.map

package/button/lib/text-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-styles.css.js","sourceRoot":"","sources":["text-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-button--text{font-family:var(--md-text-button-label-text-font, Roboto);font-size:var(--md-text-button-label-text-size, 0.875rem);letter-spacing:var(--md-text-button-label-text-tracking, 0.00625rem);font-weight:var(--md-text-button-label-text-weight, 500);--md-ripple-hover-state-layer-color:var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-text-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-opacity:var(--md-text-button-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-text-button-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-text-button-pressed-state-layer-opacity, 0.12);block-size:var(--md-text-button-container-height, 40px);padding-inline-start:var(--md-text-button-spacing-leading, 12px);padding-inline-end:var(--md-text-button-spacing-trailing, 12px)}.md3-button--text:not(:disabled){color:var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):hover:not(:focus):not(:active){color:var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):focus:not(:active){color:var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):active{color:var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:disabled{color:var(--md-text-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-button--text,.md3-button--text .md3-button__ripple{border-radius:var(--md-text-button-container-shape, 9999px)}.md3-button--text.md3-button--icon-leading{padding-inline-start:var(--md-text-button-with-icon-spacing-leading, 12px);padding-inline-end:var(--md-text-button-with-icon-spacing-trailing, 16px)}.md3-button--text.md3-button--icon-trailing{padding-inline-start:var(--md-text-button-with-trailing-icon-spacing-leading, 16px);padding-inline-end:var(--md-text-button-with-trailing-icon-spacing-trailing, 12px)}.md3-button--text:not(:disabled) ::slotted([slot=icon]),.md3-button--text:not(:disabled) .md3-button__icon{color:var(--md-text-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):hover:not(:focus):not(:active) ::slotted([slot=icon]),.md3-button--text:not(:disabled):hover:not(:focus):not(:active) .md3-button__icon{color:var(--md-text-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):focus:not(:active) ::slotted([slot=icon]),.md3-button--text:not(:disabled):focus:not(:active) .md3-button__icon{color:var(--md-text-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:not(:disabled):active ::slotted([slot=icon]),.md3-button--text:not(:disabled):active .md3-button__icon{color:var(--md-text-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-button--text:disabled ::slotted([slot=icon]),.md3-button--text:disabled .md3-button__icon{color:var(--md-text-button-with-icon-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-button--text ::slotted([slot=icon]),.md3-button--text .md3-button__icon{font-size:var(--md-text-button-with-icon-icon-size, 18px);inline-size:var(--md-text-button-with-icon-icon-size, 18px);block-size:var(--md-text-button-with-icon-icon-size, 18px)}/*# sourceMappingURL=text-styles.css.map */\n`;\n "]}
+{"version":3,"file":"text-styles.css.js","sourceRoot":"","sources":["text-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{--_container-height: var(--md-text-button-container-height, 40px);--_container-shape: var(--md-text-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-text-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-label-text-color: var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-color: var(--md-text-button-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-text-button-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-text-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-text-button-label-text-font, Roboto);--_label-text-line-height: var(--md-text-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-text-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-text-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-text-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-text-button-label-text-weight, 500);--_pressed-label-text-color: var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-text-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-text-button-with-icon-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_with-icon-focus-icon-color: var(--md-text-button-with-icon-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-hover-icon-color: var(--md-text-button-with-icon-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-color: var(--md-text-button-with-icon-icon-color, var(--md-sys-color-primary, #6750a4));--_with-icon-icon-size: var(--md-text-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-text-button-with-icon-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_spacing-leading: var(--md-text-button-spacing-leading, 12px);--_spacing-trailing: var(--md-text-button-spacing-trailing, 12px);--_with-icon-spacing-leading: var(--md-text-button-with-icon-spacing-leading, 12px);--_with-icon-spacing-trailing: var(--md-text-button-with-icon-spacing-trailing, 16px);--_with-trailing-icon-spacing-leading: var(--md-text-button-with-trailing-icon-spacing-leading, 16px);--_with-trailing-icon-spacing-trailing: var(--md-text-button-with-trailing-icon-spacing-trailing, 12px)}/*# sourceMappingURL=text-styles.css.map */\n`;\n "]}

package/button/lib/text-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 './text-button';
-@use './text-button-theme';
-
-@include text-button.static-styles();
 
-.md3-button--text {
-  @include text-button-theme.theme-styles(text-button-theme.$light-theme);
-}
+@include text-button.styles;

package/button/lib/tonal-button.d.ts

@@ -3,10 +3,12 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import '../../elevation/elevation.js';
+import { TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { Button } from './button.js';
-/** @soyCompatible */
 export declare class TonalButton extends Button {
-    /** @soyTemplate */
     protected getRenderClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderElevation(): TemplateResult;
 }

package/button/lib/tonal-button.js

@@ -3,15 +3,20 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import '../../elevation/elevation.js';
+import { html } from 'lit';
 import { Button } from './button.js';
-/** @soyCompatible */
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class TonalButton extends Button {
-    /** @soyTemplate */
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),
             'md3-button--tonal': true,
         };
     }
+    /** @soyTemplate */
+    renderElevation() {
+        return html `<md-elevation shadow></md-elevation>`;
+    }
 }
 //# sourceMappingURL=tonal-button.js.map

package/button/lib/tonal-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"tonal-button.js","sourceRoot":"","sources":["tonal-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC,qBAAqB;AACrB,MAAM,OAAO,WAAY,SAAQ,MAAM;IACrC,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,mBAAmB,EAAE,IAAI;SAC1B,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {Button} from './button.js';\n\n/** @soyCompatible */\nexport class TonalButton extends Button {\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-button--tonal': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"tonal-button.js","sourceRoot":"","sources":["tonal-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AAEnC,gEAAgE;AAChE,MAAM,OAAO,WAAY,SAAQ,MAAM;IAClB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,mBAAmB,EAAE,IAAI;SAC1B,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,eAAe;QAChC,OAAO,IAAI,CAAA,sCAAsC,CAAC;IACpD,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {Button} from './button.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class TonalButton extends Button {\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-button--tonal': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected override renderElevation(): TemplateResult {\n    return html`<md-elevation shadow></md-elevation>`;\n  }\n}\n"]}

package/button/lib/tonal-link-button.d.ts

@@ -3,10 +3,12 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import '../../elevation/elevation.js';
+import { TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { LinkButton } from './link-button.js';
-/** @soyCompatible */
 export declare class TonalLinkButton extends LinkButton {
-    /** @soyTemplate */
     protected getRenderClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderElevation(): TemplateResult;
 }

package/button/lib/tonal-link-button.js

@@ -3,15 +3,20 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import '../../elevation/elevation.js';
+import { html } from 'lit';
 import { LinkButton } from './link-button.js';
-/** @soyCompatible */
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class TonalLinkButton extends LinkButton {
-    /** @soyTemplate */
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),
             'md3-button--tonal': true,
         };
     }
+    /** @soyTemplate */
+    renderElevation() {
+        return html `<md-elevation shadow></md-elevation>`;
+    }
 }
 //# sourceMappingURL=tonal-link-button.js.map

package/button/lib/tonal-link-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"tonal-link-button.js","sourceRoot":"","sources":["tonal-link-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C,qBAAqB;AACrB,MAAM,OAAO,eAAgB,SAAQ,UAAU;IAC7C,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,mBAAmB,EAAE,IAAI;SAC1B,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {LinkButton} from './link-button.js';\n\n/** @soyCompatible */\nexport class TonalLinkButton extends LinkButton {\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-button--tonal': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"tonal-link-button.js","sourceRoot":"","sources":["tonal-link-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C,gEAAgE;AAChE,MAAM,OAAO,eAAgB,SAAQ,UAAU;IAC1B,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,mBAAmB,EAAE,IAAI;SAC1B,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,eAAe;QAChC,OAAO,IAAI,CAAA,sCAAsC,CAAC;IACpD,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {LinkButton} from './link-button.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class TonalLinkButton extends LinkButton {\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-button--tonal': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected override renderElevation(): TemplateResult {\n    return html`<md-elevation shadow></md-elevation>`;\n  }\n}\n"]}

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `.md3-button--tonal{font-family:var(--md-tonal-button-label-text-font, Roboto);font-size:var(--md-tonal-button-label-text-size, 0.875rem);letter-spacing:var(--md-tonal-button-label-text-tracking, 0.00625rem);font-weight:var(--md-tonal-button-label-text-weight, 500);--md-ripple-hover-state-layer-color:var(--md-tonal-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-focus-state-layer-color:var(--md-tonal-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-pressed-state-layer-color:var(--md-tonal-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-state-layer-opacity:var(--md-tonal-button-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-tonal-button-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-tonal-button-pressed-state-layer-opacity, 0.12);block-size:var(--md-tonal-button-container-height, 40px);padding-inline-start:var(--md-tonal-button-spacing-leading, 24px);padding-inline-end:var(--md-tonal-button-spacing-trailing, 24px)}.md3-button--tonal:not(:disabled){background-color:var(--md-tonal-button-container-color, var(--md-sys-color-secondary-container, #e8def8))}.md3-button--tonal:disabled{background-color:var(--md-tonal-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-button--tonal:not(:disabled){color:var(--md-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):hover:not(:focus):not(:active){color:var(--md-tonal-button-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):focus:not(:active){color:var(--md-tonal-button-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):active{color:var(--md-tonal-button-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:disabled{color:var(--md-tonal-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-button--tonal,.md3-button--tonal .md3-button__ripple{border-radius:var(--md-tonal-button-container-shape, 9999px)}.md3-button--tonal.md3-button--icon-leading{padding-inline-start:var(--md-tonal-button-with-icon-spacing-leading, 16px);padding-inline-end:var(--md-tonal-button-with-icon-spacing-trailing, 24px)}.md3-button--tonal.md3-button--icon-trailing{padding-inline-start:var(--md-tonal-button-with-trailing-icon-spacing-leading, 24px);padding-inline-end:var(--md-tonal-button-with-trailing-icon-spacing-trailing, 16px)}.md3-button--tonal:not(:disabled) ::slotted([slot=icon]),.md3-button--tonal:not(:disabled) .md3-button__icon{color:var(--md-tonal-button-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):hover:not(:focus):not(:active) ::slotted([slot=icon]),.md3-button--tonal:not(:disabled):hover:not(:focus):not(:active) .md3-button__icon{color:var(--md-tonal-button-with-icon-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):focus:not(:active) ::slotted([slot=icon]),.md3-button--tonal:not(:disabled):focus:not(:active) .md3-button__icon{color:var(--md-tonal-button-with-icon-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):active ::slotted([slot=icon]),.md3-button--tonal:not(:disabled):active .md3-button__icon{color:var(--md-tonal-button-with-icon-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:disabled ::slotted([slot=icon]),.md3-button--tonal:disabled .md3-button__icon{color:var(--md-tonal-button-with-icon-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-button--tonal ::slotted([slot=icon]),.md3-button--tonal .md3-button__icon{font-size:var(--md-tonal-button-with-icon-icon-size, 18px);inline-size:var(--md-tonal-button-with-icon-icon-size, 18px);block-size:var(--md-tonal-button-with-icon-icon-size, 18px)}.md3-button--tonal:not(:disabled){--md-elevation-box-shadow-for-gss:none;box-shadow:var(--md-tonal-button-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-button--tonal:not(:disabled) .md3-elevation-overlay{opacity:var(--md-tonal-button-container-elevation-overlay-opacity, 0)}.md3-button--tonal:not(:disabled):hover:not(:focus):not(:active){--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 1px 3px 1px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-tonal-button-hover-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-button--tonal:not(:disabled):hover:not(:focus):not(:active) .md3-elevation-overlay{opacity:var(--md-tonal-button-hover-container-elevation-overlay-opacity, 0.05)}.md3-button--tonal:not(:disabled):focus:not(:active){--md-elevation-box-shadow-for-gss:none;box-shadow:var(--md-tonal-button-focus-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-button--tonal:not(:disabled):focus:not(:active) .md3-elevation-overlay{opacity:var(--md-tonal-button-focus-container-elevation-overlay-opacity, 0)}.md3-button--tonal:not(:disabled):active{--md-elevation-box-shadow-for-gss:none;box-shadow:var(--md-tonal-button-pressed-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-button--tonal:not(:disabled):active .md3-elevation-overlay{opacity:var(--md-tonal-button-pressed-container-elevation-overlay-opacity, 0)}.md3-button--tonal:disabled{--md-elevation-box-shadow-for-gss:none;box-shadow:var(--md-tonal-button-disabled-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-button--tonal:disabled .md3-elevation-overlay{opacity:var(--md-tonal-button-disabled-container-elevation-overlay-opacity, 0)}/*# sourceMappingURL=tonal-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-tonal-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-elevation: var(--md-tonal-button-container-elevation, 0);--_container-height: var(--md-tonal-button-container-height, 40px);--_container-shadow-color: var(--md-tonal-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-tonal-button-container-shape, 9999px);--_disabled-container-color: var(--md-tonal-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-container-elevation: var(--md-tonal-button-disabled-container-elevation, 0);--_disabled-label-text-color: var(--md-tonal-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-container-elevation: var(--md-tonal-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-tonal-button-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-color: var(--md-tonal-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-opacity: var(--md-tonal-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-tonal-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-tonal-button-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-tonal-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-tonal-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_label-text-font: var(--md-tonal-button-label-text-font, Roboto);--_label-text-line-height: var(--md-tonal-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-tonal-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-tonal-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-tonal-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-tonal-button-label-text-weight, 500);--_pressed-container-elevation: var(--md-tonal-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-tonal-button-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-tonal-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-tonal-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-tonal-button-with-icon-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_with-icon-focus-icon-color: var(--md-tonal-button-with-icon-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_with-icon-hover-icon-color: var(--md-tonal-button-with-icon-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_with-icon-icon-color: var(--md-tonal-button-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_with-icon-icon-size: var(--md-tonal-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-tonal-button-with-icon-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_spacing-leading: var(--md-tonal-button-spacing-leading, 24px);--_spacing-trailing: var(--md-tonal-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-tonal-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-tonal-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-tonal-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-tonal-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=tonal-styles.css.map */
 `;
 //# sourceMappingURL=tonal-styles.css.js.map

package/button/lib/tonal-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tonal-styles.css.js","sourceRoot":"","sources":["tonal-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-button--tonal{font-family:var(--md-tonal-button-label-text-font, Roboto);font-size:var(--md-tonal-button-label-text-size, 0.875rem);letter-spacing:var(--md-tonal-button-label-text-tracking, 0.00625rem);font-weight:var(--md-tonal-button-label-text-weight, 500);--md-ripple-hover-state-layer-color:var(--md-tonal-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-focus-state-layer-color:var(--md-tonal-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-pressed-state-layer-color:var(--md-tonal-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-state-layer-opacity:var(--md-tonal-button-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-tonal-button-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-tonal-button-pressed-state-layer-opacity, 0.12);block-size:var(--md-tonal-button-container-height, 40px);padding-inline-start:var(--md-tonal-button-spacing-leading, 24px);padding-inline-end:var(--md-tonal-button-spacing-trailing, 24px)}.md3-button--tonal:not(:disabled){background-color:var(--md-tonal-button-container-color, var(--md-sys-color-secondary-container, #e8def8))}.md3-button--tonal:disabled{background-color:var(--md-tonal-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-button--tonal:not(:disabled){color:var(--md-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):hover:not(:focus):not(:active){color:var(--md-tonal-button-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):focus:not(:active){color:var(--md-tonal-button-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):active{color:var(--md-tonal-button-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:disabled{color:var(--md-tonal-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-button--tonal,.md3-button--tonal .md3-button__ripple{border-radius:var(--md-tonal-button-container-shape, 9999px)}.md3-button--tonal.md3-button--icon-leading{padding-inline-start:var(--md-tonal-button-with-icon-spacing-leading, 16px);padding-inline-end:var(--md-tonal-button-with-icon-spacing-trailing, 24px)}.md3-button--tonal.md3-button--icon-trailing{padding-inline-start:var(--md-tonal-button-with-trailing-icon-spacing-leading, 24px);padding-inline-end:var(--md-tonal-button-with-trailing-icon-spacing-trailing, 16px)}.md3-button--tonal:not(:disabled) ::slotted([slot=icon]),.md3-button--tonal:not(:disabled) .md3-button__icon{color:var(--md-tonal-button-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):hover:not(:focus):not(:active) ::slotted([slot=icon]),.md3-button--tonal:not(:disabled):hover:not(:focus):not(:active) .md3-button__icon{color:var(--md-tonal-button-with-icon-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):focus:not(:active) ::slotted([slot=icon]),.md3-button--tonal:not(:disabled):focus:not(:active) .md3-button__icon{color:var(--md-tonal-button-with-icon-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:not(:disabled):active ::slotted([slot=icon]),.md3-button--tonal:not(:disabled):active .md3-button__icon{color:var(--md-tonal-button-with-icon-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-button--tonal:disabled ::slotted([slot=icon]),.md3-button--tonal:disabled .md3-button__icon{color:var(--md-tonal-button-with-icon-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-button--tonal ::slotted([slot=icon]),.md3-button--tonal .md3-button__icon{font-size:var(--md-tonal-button-with-icon-icon-size, 18px);inline-size:var(--md-tonal-button-with-icon-icon-size, 18px);block-size:var(--md-tonal-button-with-icon-icon-size, 18px)}.md3-button--tonal:not(:disabled){--md-elevation-box-shadow-for-gss:none;box-shadow:var(--md-tonal-button-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-button--tonal:not(:disabled) .md3-elevation-overlay{opacity:var(--md-tonal-button-container-elevation-overlay-opacity, 0)}.md3-button--tonal:not(:disabled):hover:not(:focus):not(:active){--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 1px 3px 1px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-tonal-button-hover-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-button--tonal:not(:disabled):hover:not(:focus):not(:active) .md3-elevation-overlay{opacity:var(--md-tonal-button-hover-container-elevation-overlay-opacity, 0.05)}.md3-button--tonal:not(:disabled):focus:not(:active){--md-elevation-box-shadow-for-gss:none;box-shadow:var(--md-tonal-button-focus-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-button--tonal:not(:disabled):focus:not(:active) .md3-elevation-overlay{opacity:var(--md-tonal-button-focus-container-elevation-overlay-opacity, 0)}.md3-button--tonal:not(:disabled):active{--md-elevation-box-shadow-for-gss:none;box-shadow:var(--md-tonal-button-pressed-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-button--tonal:not(:disabled):active .md3-elevation-overlay{opacity:var(--md-tonal-button-pressed-container-elevation-overlay-opacity, 0)}.md3-button--tonal:disabled{--md-elevation-box-shadow-for-gss:none;box-shadow:var(--md-tonal-button-disabled-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-button--tonal:disabled .md3-elevation-overlay{opacity:var(--md-tonal-button-disabled-container-elevation-overlay-opacity, 0)}/*# sourceMappingURL=tonal-styles.css.map */\n`;\n "]}
+{"version":3,"file":"tonal-styles.css.js","sourceRoot":"","sources":["tonal-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{--_container-color: var(--md-tonal-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-elevation: var(--md-tonal-button-container-elevation, 0);--_container-height: var(--md-tonal-button-container-height, 40px);--_container-shadow-color: var(--md-tonal-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-tonal-button-container-shape, 9999px);--_disabled-container-color: var(--md-tonal-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-container-elevation: var(--md-tonal-button-disabled-container-elevation, 0);--_disabled-label-text-color: var(--md-tonal-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_focus-container-elevation: var(--md-tonal-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-tonal-button-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-color: var(--md-tonal-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-opacity: var(--md-tonal-button-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-tonal-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-tonal-button-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-tonal-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-tonal-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_label-text-font: var(--md-tonal-button-label-text-font, Roboto);--_label-text-line-height: var(--md-tonal-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-tonal-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-tonal-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-tonal-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-tonal-button-label-text-weight, 500);--_pressed-container-elevation: var(--md-tonal-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-tonal-button-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-tonal-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-tonal-button-pressed-state-layer-opacity, 0.12);--_with-icon-disabled-icon-color: var(--md-tonal-button-with-icon-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_with-icon-focus-icon-color: var(--md-tonal-button-with-icon-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_with-icon-hover-icon-color: var(--md-tonal-button-with-icon-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_with-icon-icon-color: var(--md-tonal-button-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_with-icon-icon-size: var(--md-tonal-button-with-icon-icon-size, 18px);--_with-icon-pressed-icon-color: var(--md-tonal-button-with-icon-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_spacing-leading: var(--md-tonal-button-spacing-leading, 24px);--_spacing-trailing: var(--md-tonal-button-spacing-trailing, 24px);--_with-icon-spacing-leading: var(--md-tonal-button-with-icon-spacing-leading, 16px);--_with-icon-spacing-trailing: var(--md-tonal-button-with-icon-spacing-trailing, 24px);--_with-trailing-icon-spacing-leading: var(--md-tonal-button-with-trailing-icon-spacing-leading, 24px);--_with-trailing-icon-spacing-trailing: var(--md-tonal-button-with-trailing-icon-spacing-trailing, 16px)}/*# sourceMappingURL=tonal-styles.css.map */\n`;\n "]}

package/button/lib/tonal-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 './tonal-button';
-@use './tonal-button-theme';
-
-@include tonal-button.static-styles();
 
-.md3-button--tonal {
-  @include tonal-button-theme.theme-styles(tonal-button-theme.$light-theme);
-}
+@include tonal-button.styles;

package/button/outlined-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:__ Use an outlined button for actions that need attention but
+ * aren’t the primary action, such as “See all” or “Add to cart.” This is also
+ * the button to use for giving someone the opportunity to change their mind or
+ * escape a flow.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
  * @final
  * @suppress {visibility}
  */

package/button/outlined-button.js

@@ -9,7 +9,24 @@ import { OutlinedButton } from './lib/outlined-button.js';
 import { styles as outlinedStyles } from './lib/outlined-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:__ Use an outlined button for actions that need attention but
+ * aren’t the primary action, such as “See all” or “Add to cart.” This is also
+ * the button to use for giving someone the opportunity to change their mind or
+ * escape a flow.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
  * @final
  * @suppress {visibility}
  */

package/button/outlined-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-button.js","sourceRoot":"","sources":["outlined-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,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,cAAc;CAEnD,CAAA;AADiB,uBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAE,CAAA;AAD7C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,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 {OutlinedButton} from './lib/outlined-button.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-button': MdOutlinedButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-button')\nexport class MdOutlinedButton extends OutlinedButton {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
+{"version":3,"file":"outlined-button.js","sourceRoot":"","sources":["outlined-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,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,cAAc;CAEnD,CAAA;AADiB,uBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAE,CAAA;AAD7C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,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 {OutlinedButton} from './lib/outlined-button.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-button': MdOutlinedButton;\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:__ Use an outlined button for actions that need attention but\n * aren’t the primary action, such as “See all” or “Add to cart.” This is also\n * the button to use for giving someone the opportunity to change their mind or\n * escape a flow.\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-outlined-button')\nexport class MdOutlinedButton extends OutlinedButton {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/button/outlined-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:__ Use an outlined button for actions that need attention but
+ * aren’t the primary action, such as “See all” or “Add to cart.” This is also
+ * the button to use for giving someone the opportunity to change their mind or
+ * escape a flow.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
  * @final
  * @suppress {visibility}
  */

package/button/outlined-link-button.js

@@ -9,7 +9,24 @@ import { OutlinedLinkButton } from './lib/outlined-link-button.js';
 import { styles as outlinedStyles } from './lib/outlined-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:__ Use an outlined button for actions that need attention but
+ * aren’t the primary action, such as “See all” or “Add to cart.” This is also
+ * the button to use for giving someone the opportunity to change their mind or
+ * escape a flow.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
  * @final
  * @suppress {visibility}
  */

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

@@ -1 +1 @@
-{"version":3,"file":"outlined-link-button.js","sourceRoot":"","sources":["outlined-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,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,kBAAkB;CAE3D,CAAA;AADiB,2BAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAE,CAAA;AAD7C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAEhC;SAFY,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 {OutlinedLinkButton} from './lib/outlined-link-button.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-link-button': MdOutlinedLinkButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-link-button')\nexport class MdOutlinedLinkButton extends OutlinedLinkButton {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
+{"version":3,"file":"outlined-link-button.js","sourceRoot":"","sources":["outlined-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,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,kBAAkB;CAE3D,CAAA;AADiB,2BAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAE,CAAA;AAD7C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAEhC;SAFY,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 {OutlinedLinkButton} from './lib/outlined-link-button.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-link-button': MdOutlinedLinkButton;\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:__ Use an outlined button for actions that need attention but\n * aren’t the primary action, such as “See all” or “Add to cart.” This is also\n * the button to use for giving someone the opportunity to change their mind or\n * escape a flow.\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-outlined-link-button')\nexport class MdOutlinedLinkButton extends OutlinedLinkButton {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/button/text-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:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence
+ *
+ * __Rationale:__ Text buttons have less visual prominence, so should be used
+ * for low emphasis actions, such as an alternative option.
+ *
+ * __Example usages:__
+ * - Learn more
+ * - View all
+ * - Change account
+ * - Turn on
+ *
  * @final
  * @suppress {visibility}
  */

package/button/text-button.js

@@ -9,7 +9,22 @@ import { styles as sharedStyles } from './lib/shared-styles.css.js';
 import { TextButton } from './lib/text-button.js';
 import { styles as textStyles } from './lib/text-styles.css.js';
 /**
- * @soyCompatible
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence
+ *
+ * __Rationale:__ Text buttons have less visual prominence, so should be used
+ * for low emphasis actions, such as an alternative option.
+ *
+ * __Example usages:__
+ * - Learn more
+ * - View all
+ * - Change account
+ * - Turn on
+ *
  * @final
  * @suppress {visibility}
  */

package/button/text-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-button.js","sourceRoot":"","sources":["text-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAQ9D;;;;GAIG;AAEH,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;CAE3C,CAAA;AADiB,mBAAM,GAAG,CAAC,YAAY,EAAE,UAAU,CAAE,CAAA;AADzC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAExB;SAFY,YAAY","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 sharedStyles} from './lib/shared-styles.css.js';\nimport {TextButton} from './lib/text-button.js';\nimport {styles as textStyles} from './lib/text-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-text-button': MdTextButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-text-button')\nexport class MdTextButton extends TextButton {\n  static override styles = [sharedStyles, textStyles];\n}\n"]}
+{"version":3,"file":"text-button.js","sourceRoot":"","sources":["text-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAQ9D;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;CAE3C,CAAA;AADiB,mBAAM,GAAG,CAAC,YAAY,EAAE,UAAU,CAAE,CAAA;AADzC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAExB;SAFY,YAAY","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 sharedStyles} from './lib/shared-styles.css.js';\nimport {TextButton} from './lib/text-button.js';\nimport {styles as textStyles} from './lib/text-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-text-button': MdTextButton;\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:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence\n *\n * __Rationale:__ Text buttons have less visual prominence, so should be used\n * for low emphasis actions, such as an alternative option.\n *\n * __Example usages:__\n * - Learn more\n * - View all\n * - Change account\n * - Turn on\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-text-button')\nexport class MdTextButton extends TextButton {\n  static override styles = [sharedStyles, textStyles];\n}\n"]}

package/button/text-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:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence
+ *
+ * __Rationale:__ Text buttons have less visual prominence, so should be used
+ * for low emphasis actions, such as an alternative option.
+ *
+ * __Example usages:__
+ * - Learn more
+ * - View all
+ * - Change account
+ * - Turn on
+ *
  * @final
  * @suppress {visibility}
  */

package/button/text-link-button.js

@@ -9,7 +9,22 @@ import { styles as sharedStyles } from './lib/shared-styles.css.js';
 import { TextLinkButton } from './lib/text-link-button.js';
 import { styles as textStyles } from './lib/text-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:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence
+ *
+ * __Rationale:__ Text buttons have less visual prominence, so should be used
+ * for low emphasis actions, such as an alternative option.
+ *
+ * __Example usages:__
+ * - Learn more
+ * - View all
+ * - Change account
+ * - Turn on
+ *
  * @final
  * @suppress {visibility}
  */

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

@@ -1 +1 @@
-{"version":3,"file":"text-link-button.js","sourceRoot":"","sources":["text-link-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAC,MAAM,IAAI,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAQ9D;;;;GAIG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,cAAc;CAEnD,CAAA;AADiB,uBAAM,GAAG,CAAC,YAAY,EAAE,UAAU,CAAE,CAAA;AADzC,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAE5B;SAFY,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 sharedStyles} from './lib/shared-styles.css.js';\nimport {TextLinkButton} from './lib/text-link-button.js';\nimport {styles as textStyles} from './lib/text-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-text-link-button': MdTextLinkButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-text-link-button')\nexport class MdTextLinkButton extends TextLinkButton {\n  static override styles = [sharedStyles, textStyles];\n}\n"]}
+{"version":3,"file":"text-link-button.js","sourceRoot":"","sources":["text-link-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAC,MAAM,IAAI,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAQ9D;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,cAAc;CAEnD,CAAA;AADiB,uBAAM,GAAG,CAAC,YAAY,EAAE,UAAU,CAAE,CAAA;AADzC,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAE5B;SAFY,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 sharedStyles} from './lib/shared-styles.css.js';\nimport {TextLinkButton} from './lib/text-link-button.js';\nimport {styles as textStyles} from './lib/text-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-text-link-button': MdTextLinkButton;\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:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence\n *\n * __Rationale:__ Text buttons have less visual prominence, so should be used\n * for low emphasis actions, such as an alternative option.\n *\n * __Example usages:__\n * - Learn more\n * - View all\n * - Change account\n * - Turn on\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-text-link-button')\nexport class MdTextLinkButton extends TextLinkButton {\n  static override styles = [sharedStyles, textStyles];\n}\n"]}

package/button/tonal-button.d.ts

@@ -10,7 +10,23 @@ 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:__ Filled tonal buttons have a lighter background color and
+ * darker label color, making them less visually prominent than a regular,
+ * filled button. They’re still used for final or unblocking actions in a flow,
+ * but do so with less emphasis.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
  * @final
  * @suppress {visibility}
  */

package/button/tonal-button.js

@@ -5,17 +5,34 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
+import { styles as sharedElevationStyles } from './lib/shared-elevation-styles.css.js';
 import { styles as sharedStyles } from './lib/shared-styles.css.js';
 import { TonalButton } from './lib/tonal-button.js';
 import { styles as tonalStyles } from './lib/tonal-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:__ Filled tonal buttons have a lighter background color and
+ * darker label color, making them less visually prominent than a regular,
+ * filled button. They’re still used for final or unblocking actions in a flow,
+ * but do so with less emphasis.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
  * @final
  * @suppress {visibility}
  */
 let MdTonalButton = class MdTonalButton extends TonalButton {
 };
-MdTonalButton.styles = [sharedStyles, tonalStyles];
+MdTonalButton.styles = [sharedStyles, sharedElevationStyles, tonalStyles];
 MdTonalButton = __decorate([
     customElement('md-tonal-button')
 ], MdTonalButton);

package/button/tonal-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"tonal-button.js","sourceRoot":"","sources":["tonal-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,MAAM,IAAI,WAAW,EAAC,MAAM,2BAA2B,CAAC;AAQhE;;;;GAIG;AAEH,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,WAAW;CAE7C,CAAA;AADiB,oBAAM,GAAG,CAAC,YAAY,EAAE,WAAW,CAAE,CAAA;AAD1C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAEzB;SAFY,aAAa","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 sharedStyles} from './lib/shared-styles.css.js';\nimport {TonalButton} from './lib/tonal-button.js';\nimport {styles as tonalStyles} from './lib/tonal-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tonal-button': MdTonalButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-tonal-button')\nexport class MdTonalButton extends TonalButton {\n  static override styles = [sharedStyles, tonalStyles];\n}\n"]}
+{"version":3,"file":"tonal-button.js","sourceRoot":"","sources":["tonal-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,MAAM,IAAI,WAAW,EAAC,MAAM,2BAA2B,CAAC;AAQhE;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,WAAW;CAE7C,CAAA;AADiB,oBAAM,GAAG,CAAC,YAAY,EAAE,qBAAqB,EAAE,WAAW,CAAE,CAAA;AADjE,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAEzB;SAFY,aAAa","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 sharedElevationStyles} from './lib/shared-elevation-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\nimport {TonalButton} from './lib/tonal-button.js';\nimport {styles as tonalStyles} from './lib/tonal-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tonal-button': MdTonalButton;\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:__ Filled tonal buttons have a lighter background color and\n * darker label color, making them less visually prominent than a regular,\n * filled button. They’re still used for final or unblocking actions in a flow,\n * but do so with less emphasis.\n *\n * __Example usages:__\n * - Save\n * - Confirm\n * - Done\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-tonal-button')\nexport class MdTonalButton extends TonalButton {\n  static override styles = [sharedStyles, sharedElevationStyles, tonalStyles];\n}\n"]}