@material/web 0.1.0-alpha.0

package/badge/lib/badge.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+/** @soyCompatible */
+export declare class Badge extends LitElement {
+    value: string;
+    /** @soyTemplate */
+    protected render(): TemplateResult;
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+}

package/badge/lib/badge.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+/** @soyCompatible */
+export class Badge extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+    }
+    /** @soyTemplate */
+    render() {
+        return html `<div class="md3-badge ${classMap(this.getRenderClasses())}"><p class="md3-badge__value">${this.value}</p></div>`;
+    }
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {
+            'md3-badge--large': this.value,
+        };
+    }
+}
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Badge.prototype, "value", void 0);
+//# sourceMappingURL=badge.js.map

package/badge/lib/badge.js.map

@@ -0,0 +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"]}

package/button/_elevated-button.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/elevated-button-theme' show
+  $light-theme,
+  theme;

package/button/_filled-button.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/filled-button-theme' show
+  $light-theme,
+  theme;

package/button/_outlined-button.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/outlined-button-theme' show
+  $light-theme,
+  theme;

package/button/_text-button.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/text-button-theme' show
+  $light-theme,
+  theme;

package/button/_tonal-button.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/tonal-button-theme' show
+  $light-theme,
+  theme;

package/button/elevated-button.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ElevatedButton } from './lib/elevated-button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-elevated-button': MdElevatedButton;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdElevatedButton extends ElevatedButton {
+    static styles: import("lit").CSSResult[];
+}

package/button/elevated-button.js

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as elevationOverlayStyles } from '../elevation/lib/elevation-overlay-styles.css.js';
+import { ElevatedButton } from './lib/elevated-button.js';
+import { styles as elevatedStyles } from './lib/elevated-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdElevatedButton = class MdElevatedButton extends ElevatedButton {
+};
+MdElevatedButton.styles = [elevationOverlayStyles, sharedStyles, elevatedStyles];
+MdElevatedButton = __decorate([
+    customElement('md-elevated-button')
+], MdElevatedButton);
+export { MdElevatedButton };
+//# sourceMappingURL=elevated-button.js.map

package/button/elevated-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevated-button.js","sourceRoot":"","sources":["elevated-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,sBAAsB,EAAC,MAAM,kDAAkD,CAAC;AAElG,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,cAAc;CAGnD,CAAA;AAFiB,uBAAM,GAClB,CAAC,sBAAsB,EAAE,YAAY,EAAE,cAAc,CAAE,CAAA;AAFhD,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAG5B;SAHY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevationOverlayStyles} from '../elevation/lib/elevation-overlay-styles.css.js';\n\nimport {ElevatedButton} from './lib/elevated-button.js';\nimport {styles as elevatedStyles} from './lib/elevated-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevated-button': MdElevatedButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-button')\nexport class MdElevatedButton extends ElevatedButton {\n  static override styles =\n      [elevationOverlayStyles, sharedStyles, elevatedStyles];\n}\n"]}

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ElevatedLinkButton } from './lib/elevated-link-button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-elevated-link-button': MdElevatedLinkButton;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdElevatedLinkButton extends ElevatedLinkButton {
+    static styles: import("lit").CSSResult[];
+}

package/button/elevated-link-button.js

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as elevationOverlayStyles } from '../elevation/lib/elevation-overlay-styles.css.js';
+import { ElevatedLinkButton } from './lib/elevated-link-button.js';
+import { styles as elevatedStyles } from './lib/elevated-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdElevatedLinkButton = class MdElevatedLinkButton extends ElevatedLinkButton {
+};
+MdElevatedLinkButton.styles = [elevationOverlayStyles, sharedStyles, elevatedStyles];
+MdElevatedLinkButton = __decorate([
+    customElement('md-elevated-link-button')
+], MdElevatedLinkButton);
+export { MdElevatedLinkButton };
+//# sourceMappingURL=elevated-link-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elevated-link-button.js","sourceRoot":"","sources":["elevated-link-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,sBAAsB,EAAC,MAAM,kDAAkD,CAAC;AAElG,OAAO,EAAC,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,kBAAkB;CAG3D,CAAA;AAFiB,2BAAM,GAClB,CAAC,sBAAsB,EAAE,YAAY,EAAE,cAAc,CAAE,CAAA;AAFhD,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAGhC;SAHY,oBAAoB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevationOverlayStyles} from '../elevation/lib/elevation-overlay-styles.css.js';\n\nimport {ElevatedLinkButton} from './lib/elevated-link-button.js';\nimport {styles as elevatedStyles} from './lib/elevated-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevated-link-button': MdElevatedLinkButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-link-button')\nexport class MdElevatedLinkButton extends ElevatedLinkButton {\n  static override styles =\n      [elevationOverlayStyles, sharedStyles, elevatedStyles];\n}\n"]}

package/button/filled-button.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FilledButton } from './lib/filled-button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-button': MdFilledButton;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledButton extends FilledButton {
+    static styles: import("lit").CSSResult[];
+}

package/button/filled-button.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { FilledButton } from './lib/filled-button.js';
+import { styles as filledStyles } from './lib/filled-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledButton = class MdFilledButton extends FilledButton {
+};
+MdFilledButton.styles = [sharedStyles, filledStyles];
+MdFilledButton = __decorate([
+    customElement('md-filled-button')
+], MdFilledButton);
+export { MdFilledButton };
+//# sourceMappingURL=filled-button.js.map

package/button/filled-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-button.js","sourceRoot":"","sources":["filled-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,YAAY;CAE/C,CAAA;AADiB,qBAAM,GAAG,CAAC,YAAY,EAAE,YAAY,CAAE,CAAA;AAD3C,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B;SAFY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledButton} from './lib/filled-button.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-button': MdFilledButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-button')\nexport class MdFilledButton extends FilledButton {\n  static override styles = [sharedStyles, filledStyles];\n}\n"]}

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FilledLinkButton } from './lib/filled-link-button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-link-button': MdFilledLinkButton;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledLinkButton extends FilledLinkButton {
+    static styles: import("lit").CSSResult[];
+}

package/button/filled-link-button.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { FilledLinkButton } from './lib/filled-link-button.js';
+import { styles as filledStyles } from './lib/filled-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledLinkButton = class MdFilledLinkButton extends FilledLinkButton {
+};
+MdFilledLinkButton.styles = [sharedStyles, filledStyles];
+MdFilledLinkButton = __decorate([
+    customElement('md-filled-link-button')
+], MdFilledLinkButton);
+export { MdFilledLinkButton };
+//# sourceMappingURL=filled-link-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filled-link-button.js","sourceRoot":"","sources":["filled-link-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,gBAAgB;CAEvD,CAAA;AADiB,yBAAM,GAAG,CAAC,YAAY,EAAE,YAAY,CAAE,CAAA;AAD3C,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAE9B;SAFY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledLinkButton} from './lib/filled-link-button.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-link-button': MdFilledLinkButton;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-link-button')\nexport class MdFilledLinkButton extends FilledLinkButton {\n  static override styles = [sharedStyles, filledStyles];\n}\n"]}

package/button/harness.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+import { Button } from './lib/button.js';
+/**
+ * Test harness for buttons.
+ */
+export declare class ButtonHarness extends Harness<Button> {
+    protected getInteractiveElement(): Promise<HTMLElement>;
+}

package/button/harness.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+/**
+ * Test harness for buttons.
+ */
+export class ButtonHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.renderRoot.querySelector('.md3-button');
+    }
+}
+//# sourceMappingURL=harness.js.map

package/button/harness.js.map

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

package/button/lib/_button-theme.scss

@@ -0,0 +1,204 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+// TODO(b/228217731): Remove MDC/MWC dependencies
+@use 'sass:map';
+@use '@material/web/sass/color';
+@use '@material/web/ripple/ripple-theme';
+@use '@material/web/compat/theme/state';
+
+$selectors: (
+  // :not(:disabled) is used to support link styled as button
+  // as link does not support :enabled style
+  enabled: ':not(:disabled)',
+  disabled: ':disabled',
+  focus: ':focus',
+  hover: ':hover',
+  pressed: ':active'
+);
+
+@mixin theme-styles($theme) {
+  @include _set-label-text-typography(
+    (
+      family: map.get($theme, label-text-font),
+      size: map.get($theme, label-text-size),
+      tracking: map.get($theme, label-text-tracking),
+      weight: map.get($theme, label-text-weight),
+    )
+  );
+
+  @include _container-fill-color(
+    (
+      default: map.get($theme, container-color),
+      disabled: map.get($theme, disabled-container-color),
+    )
+  );
+
+  @include _ink-color(
+    (
+      default: map.get($theme, label-text-color),
+      hover: map.get($theme, hover-label-text-color),
+      focus: map.get($theme, focus-label-text-color),
+      pressed: map.get($theme, pressed-label-text-color),
+      disabled: map.get($theme, disabled-label-text-color),
+    )
+  );
+
+  @include ripple-theme.theme(
+    (
+      hover-state-layer-color: map.get($theme, hover-state-layer-color),
+      focus-state-layer-color: map.get($theme, focus-state-layer-color),
+      pressed-state-layer-color: map.get($theme, pressed-state-layer-color),
+      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
+      focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
+      pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),
+    )
+  );
+
+  $container-height: map.get($theme, container-height);
+  @include _set-height($container-height);
+
+  $shape: map.get($theme, container-shape);
+  @include _set-shape-radius($shape);
+
+  // TODO(b/181413732): Verify tokens below are named correctly
+  padding-inline-start: map.get($theme, 'spacing-leading');
+  padding-inline-end: map.get($theme, 'spacing-trailing');
+  &.md3-button--icon-leading {
+    padding-inline-start: map.get($theme, 'with-icon-spacing-leading');
+    padding-inline-end: map.get($theme, 'with-icon-spacing-trailing');
+  }
+  &.md3-button--icon-trailing {
+    padding-inline-start: map.get($theme, 'with-trailing-icon-spacing-leading');
+    padding-inline-end: map.get($theme, 'with-trailing-icon-spacing-trailing');
+  }
+}
+
+@function flatten-disabled-colors($theme) {
+  @return color.join-color-and-opacity-pairs(
+    $theme,
+    (
+      (
+        color-key: 'disabled-container-color',
+        opacity-key: 'disabled-container-opacity'
+      ),
+      (
+        color-key: 'disabled-label-text-color',
+        opacity-key: 'disabled-label-text-opacity'
+      ),
+      (
+        color-key: 'with-icon-disabled-icon-color',
+        opacity-key: 'with-icon-disabled-icon-opacity'
+      ),
+      (
+        color-key: 'disabled-outline-color',
+        opacity-key: 'disabled-outline-opacity'
+      )
+    )
+  );
+}
+
+@function remove-unsupported-tokens($theme) {
+  // b/193825150: Text and Outlined Button don't have `container-shadow-color`,
+  // leaving `container-elevation` useless.
+  @if not map.get($theme, 'container-shadow-color') {
+    $theme: map.remove($theme, 'container-elevation');
+  }
+
+  $unsupported-tokens: (
+    // TODO(b/233225796): Clean up this removal of `dragged` tokens.
+    'dragged-container-elevation',
+    'dragged-label-text-color',
+    'dragged-state-layer-color',
+    'dragged-state-layer-opacity',
+    'with-icon-dragged-icon-color',
+    // 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'
+  );
+  @return map.remove($theme, $unsupported-tokens);
+}
+
+@mixin _container-fill-color($color-or-map) {
+  @include state.default($selectors) {
+    @include _set-container-fill-color(state.get-default-state($color-or-map));
+  }
+
+  @include state.hover($selectors) {
+    @include _set-container-fill-color(state.get-hover-state($color-or-map));
+  }
+
+  @include state.focus($selectors) {
+    @include _set-container-fill-color(state.get-focus-state($color-or-map));
+  }
+
+  @include state.pressed($selectors) {
+    @include _set-container-fill-color(state.get-pressed-state($color-or-map));
+  }
+
+  @include state.disabled($selectors) {
+    @include _set-container-fill-color(state.get-disabled-state($color-or-map));
+  }
+}
+
+@mixin _ink-color($color-or-map) {
+  @include state.default($selectors) {
+    @include _set-ink-color(state.get-default-state($color-or-map));
+  }
+
+  @include state.hover($selectors) {
+    @include _set-ink-color(state.get-hover-state($color-or-map));
+  }
+
+  @include state.focus($selectors) {
+    @include _set-ink-color(state.get-focus-state($color-or-map));
+  }
+
+  @include state.pressed($selectors) {
+    @include _set-ink-color(state.get-pressed-state($color-or-map));
+  }
+
+  @include state.disabled($selectors) {
+    @include _set-ink-color(state.get-disabled-state($color-or-map));
+  }
+}
+
+@mixin _set-height($height) {
+  block-size: $height;
+}
+
+@mixin _set-shape-radius($radius) {
+  &,
+  .md3-button__ripple {
+    border-radius: $radius;
+  }
+}
+
+@mixin _set-container-fill-color($color) {
+  background-color: $color;
+}
+
+@mixin _set-ink-color($color) {
+  color: $color;
+}
+
+@mixin _set-label-text-typography($typography-map) {
+  $family: map.get($typography-map, family);
+  $size: map.get($typography-map, size);
+  $tracking: map.get($typography-map, tracking);
+  $weight: map.get($typography-map, weight);
+  $transform: map.get($typography-map, transform);
+
+  font-family: $family;
+  font-size: $size;
+  letter-spacing: $tracking;
+  font-weight: $weight;
+  text-transform: $transform;
+}

package/button/lib/_button.scss

@@ -0,0 +1,88 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+// TODO(b/228217731): Remove compat dependencies
+@use '@material/web/compat/touchtarget/touch-target';
+@use '@material/web/elevation/lib/surface' as elevation-surface;
+@use '@material/web/compat/theme/selector-ext';
+
+@use './button-theme';
+
+@mixin static-styles() {
+  :host {
+    @include host-root;
+    @include selector-ext.append-strict(&, '[disabled]') {
+      @include disabled;
+    }
+  }
+
+  .md3-button {
+    @include root;
+
+    &:active {
+      @include active;
+    }
+
+    &:hover {
+      @include hover;
+    }
+  }
+
+  .md3-link-button-wrapper {
+    inline-size: 100%;
+  }
+}
+
+@mixin host-root() {
+  display: inline-flex;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  /**
+   * Override vertical-align with shortest value "top". Vertical-align's default
+   * "baseline" value causes buttons to be misaligned next to each other if one
+   * button has an icon and the other does not.
+   */
+  vertical-align: top;
+}
+
+@mixin root() {
+  @include elevation-surface.root-static-styles();
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: 64px;
+  border: none;
+  outline: none;
+  line-height: inherit;
+  user-select: none;
+  -webkit-appearance: none;
+  vertical-align: middle;
+  background: transparent;
+  text-decoration: none;
+  inline-size: 100%;
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+}
+
+@mixin active() {
+  outline: none;
+}
+
+@mixin hover() {
+  cursor: pointer;
+}
+
+@mixin disabled() {
+  cursor: default;
+  pointer-events: none;
+}