From d0c617fdd7ce775739e0bb161fdbd303a446a45a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 9 Dec 2025 19:25:30 +0000
Subject: [PATCH] chore: migrate button component to components/button

Moves the `button` component to `components/button` and creates re-exports in the original `button` directory for backward compatibility.
This change also updates internal imports and includes copyright headers in the re-export files.
---
 button/_elevated-button.scss                  |  2 +-
 button/_filled-button.scss                    |  2 +-
 button/_filled-tonal-button.scss              |  2 +-
 button/_outlined-button.scss                  |  2 +-
 button/_text-button.scss                      |  2 +-
 button/elevated-button.ts                     | 45 +----------------
 button/filled-button.ts                       | 43 +---------------
 button/filled-tonal-button.ts                 | 44 +---------------
 button/harness.ts                             | 14 +-----
 button/outlined-button.ts                     | 40 +--------------
 button/text-button.ts                         | 38 +-------------
 components/button/_elevated-button.scss       |  6 +++
 components/button/_filled-button.scss         |  6 +++
 components/button/_filled-tonal-button.scss   |  6 +++
 components/button/_outlined-button.scss       |  6 +++
 components/button/_text-button.scss           |  6 +++
 {button => components/button}/demo/demo.ts    |  0
 .../button}/demo/project.json                 |  0
 {button => components/button}/demo/stories.ts |  0
 components/button/elevated-button.ts          | 50 +++++++++++++++++++
 .../button}/elevated-button_test.ts           |  2 +-
 components/button/filled-button.ts            | 48 ++++++++++++++++++
 .../button}/filled-button_test.ts             |  2 +-
 components/button/filled-tonal-button.ts      | 49 ++++++++++++++++++
 .../button}/filled-tonal-button_test.ts       |  2 +-
 components/button/harness.ts                  | 19 +++++++
 .../button}/internal/_elevated-button.scss    |  2 +-
 .../button}/internal/_elevation.scss          |  4 +-
 .../button}/internal/_filled-button.scss      |  2 +-
 .../internal/_filled-tonal-button.scss        |  2 +-
 .../button}/internal/_icon.scss               |  0
 .../button}/internal/_outlined-button.scss    |  2 +-
 .../button}/internal/_shared.scss             |  4 +-
 .../button}/internal/_text-button.scss        |  2 +-
 .../button}/internal/_touch-target.scss       |  0
 .../button}/internal/button.ts                | 14 +++---
 .../button}/internal/button_test.ts           |  2 +-
 .../button}/internal/elevated-button.ts       |  2 +-
 .../button}/internal/elevated-styles.scss     |  0
 .../button}/internal/filled-button.ts         |  2 +-
 .../button}/internal/filled-styles.scss       |  0
 .../button}/internal/filled-tonal-button.ts   |  2 +-
 .../button}/internal/filled-tonal-styles.scss |  0
 .../button}/internal/outlined-button.ts       |  0
 .../button}/internal/outlined-styles.scss     |  0
 .../internal/shared-elevation-styles.scss     |  0
 .../button}/internal/shared-styles.scss       |  0
 .../button}/internal/text-button.ts           |  0
 .../button}/internal/text-styles.scss         |  0
 components/button/outlined-button.ts          | 45 +++++++++++++++++
 .../button}/outlined-button_test.ts           |  2 +-
 components/button/text-button.ts              | 43 ++++++++++++++++
 .../button}/text-button_test.ts               |  2 +-
 53 files changed, 320 insertions(+), 248 deletions(-)
 create mode 100644 components/button/_elevated-button.scss
 create mode 100644 components/button/_filled-button.scss
 create mode 100644 components/button/_filled-tonal-button.scss
 create mode 100644 components/button/_outlined-button.scss
 create mode 100644 components/button/_text-button.scss
 rename {button => components/button}/demo/demo.ts (100%)
 rename {button => components/button}/demo/project.json (100%)
 rename {button => components/button}/demo/stories.ts (100%)
 create mode 100644 components/button/elevated-button.ts
 rename {button => components/button}/elevated-button_test.ts (84%)
 create mode 100644 components/button/filled-button.ts
 rename {button => components/button}/filled-button_test.ts (83%)
 create mode 100644 components/button/filled-tonal-button.ts
 rename {button => components/button}/filled-tonal-button_test.ts (84%)
 create mode 100644 components/button/harness.ts
 rename {button => components/button}/internal/_elevated-button.scss (97%)
 rename {button => components/button}/internal/_elevation.scss (95%)
 rename {button => components/button}/internal/_filled-button.scss (97%)
 rename {button => components/button}/internal/_filled-tonal-button.scss (97%)
 rename {button => components/button}/internal/_icon.scss (100%)
 rename {button => components/button}/internal/_outlined-button.scss (98%)
 rename {button => components/button}/internal/_shared.scss (98%)
 rename {button => components/button}/internal/_text-button.scss (97%)
 rename {button => components/button}/internal/_touch-target.scss (100%)
 rename {button => components/button}/internal/button.ts (94%)
 rename {button => components/button}/internal/button_test.ts (97%)
 rename {button => components/button}/internal/elevated-button.ts (89%)
 rename {button => components/button}/internal/elevated-styles.scss (100%)
 rename {button => components/button}/internal/filled-button.ts (89%)
 rename {button => components/button}/internal/filled-styles.scss (100%)
 rename {button => components/button}/internal/filled-tonal-button.ts (89%)
 rename {button => components/button}/internal/filled-tonal-styles.scss (100%)
 rename {button => components/button}/internal/outlined-button.ts (100%)
 rename {button => components/button}/internal/outlined-styles.scss (100%)
 rename {button => components/button}/internal/shared-elevation-styles.scss (100%)
 rename {button => components/button}/internal/shared-styles.scss (100%)
 rename {button => components/button}/internal/text-button.ts (100%)
 rename {button => components/button}/internal/text-styles.scss (100%)
 create mode 100644 components/button/outlined-button.ts
 rename {button => components/button}/outlined-button_test.ts (84%)
 create mode 100644 components/button/text-button.ts
 rename {button => components/button}/text-button_test.ts (83%)

diff --git a/button/_elevated-button.scss b/button/_elevated-button.scss
index 355e9140b0..7a6a1c011f 100644
--- a/button/_elevated-button.scss
+++ b/button/_elevated-button.scss
@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/elevated-button' show theme;
+@forward '../components/button/elevated-button';
diff --git a/button/_filled-button.scss b/button/_filled-button.scss
index 30a41885fa..1c68cfdb33 100644
--- a/button/_filled-button.scss
+++ b/button/_filled-button.scss
@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/filled-button' show theme;
+@forward '../components/button/filled-button';
diff --git a/button/_filled-tonal-button.scss b/button/_filled-tonal-button.scss
index e3a7100982..d1f8505364 100644
--- a/button/_filled-tonal-button.scss
+++ b/button/_filled-tonal-button.scss
@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/filled-tonal-button' show theme;
+@forward '../components/button/filled-tonal-button';
diff --git a/button/_outlined-button.scss b/button/_outlined-button.scss
index c88dd6f35c..0524be27c3 100644
--- a/button/_outlined-button.scss
+++ b/button/_outlined-button.scss
@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/outlined-button' show theme;
+@forward '../components/button/outlined-button';
diff --git a/button/_text-button.scss b/button/_text-button.scss
index 52947c3f6c..941c65448c 100644
--- a/button/_text-button.scss
+++ b/button/_text-button.scss
@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/text-button' show theme;
+@forward '../components/button/text-button';
diff --git a/button/elevated-button.ts b/button/elevated-button.ts
index bde0945696..3300393a1a 100644
--- a/button/elevated-button.ts
+++ b/button/elevated-button.ts
@@ -4,47 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
-import {customElement} from 'lit/decorators.js';
-
-import {ElevatedButton} from './internal/elevated-button.js';
-import {styles as elevatedStyles} from './internal/elevated-styles.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-elevated-button': MdElevatedButton;
-  }
-}
-
-/**
- * @summary Buttons help people take action, such as sending an email, sharing a
- * document, or liking a comment.
- *
- * @description
- * __Emphasis:__ Medium emphasis – For important actions that don’t distract
- * from other onscreen elements.
- *
- * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter
- * background color and a shadow. To prevent shadow creep, only use them when
- * absolutely necessary, such as when the button requires visual separation from
- * a patterned background.
- *
- * __Example usages:__
- * - Reply
- * - View all
- * - Add to cart
- * - Take out of trash
- *
- * @final
- * @suppress {visibility}
- */
-@customElement('md-elevated-button')
-export class MdElevatedButton extends ElevatedButton {
-  static override styles: CSSResultOrNative[] = [
-    sharedStyles,
-    sharedElevationStyles,
-    elevatedStyles,
-  ];
-}
+export * from '../components/button/elevated-button.js';
diff --git a/button/filled-button.ts b/button/filled-button.ts
index 6bc04686e8..b19eaf6014 100644
--- a/button/filled-button.ts
+++ b/button/filled-button.ts
@@ -4,45 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
-import {customElement} from 'lit/decorators.js';
-
-import {FilledButton} from './internal/filled-button.js';
-import {styles as filledStyles} from './internal/filled-styles.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-filled-button': MdFilledButton;
-  }
-}
-
-/**
- * @summary Buttons help people take action, such as sending an email, sharing a
- * document, or liking a comment.
- *
- * @description
- * __Emphasis:__ High emphasis – For the primary, most important, or most common
- * action on a screen
- *
- * __Rationale:__ The filled button’s contrasting surface color makes it the
- * most prominent button after the FAB. It’s used for final or unblocking
- * actions in a flow.
- *
- * __Example usages:__
- * - Save
- * - Confirm
- * - Done
- *
- * @final
- * @suppress {visibility}
- */
-@customElement('md-filled-button')
-export class MdFilledButton extends FilledButton {
-  static override styles: CSSResultOrNative[] = [
-    sharedStyles,
-    sharedElevationStyles,
-    filledStyles,
-  ];
-}
+export * from '../components/button/filled-button.js';
diff --git a/button/filled-tonal-button.ts b/button/filled-tonal-button.ts
index fe71e14fb9..933495c2fa 100644
--- a/button/filled-tonal-button.ts
+++ b/button/filled-tonal-button.ts
@@ -4,46 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
-import {customElement} from 'lit/decorators.js';
-
-import {FilledTonalButton} from './internal/filled-tonal-button.js';
-import {styles as tonalStyles} from './internal/filled-tonal-styles.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-filled-tonal-button': MdFilledTonalButton;
-  }
-}
-
-/**
- * @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}
- */
-@customElement('md-filled-tonal-button')
-export class MdFilledTonalButton extends FilledTonalButton {
-  static override styles: CSSResultOrNative[] = [
-    sharedStyles,
-    sharedElevationStyles,
-    tonalStyles,
-  ];
-}
+export * from '../components/button/filled-tonal-button.js';
diff --git a/button/harness.ts b/button/harness.ts
index d7268aeb16..64fca792c8 100644
--- a/button/harness.ts
+++ b/button/harness.ts
@@ -4,16 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Harness} from '../testing/harness.js';
-
-import {Button} from './internal/button.js';
-
-/**
- * Test harness for buttons.
- */
-export class ButtonHarness extends Harness<Button> {
-  protected override async getInteractiveElement() {
-    await this.element.updateComplete;
-    return this.element.renderRoot.querySelector('.button') as HTMLElement;
-  }
-}
+export * from '../components/button/harness.js';
diff --git a/button/outlined-button.ts b/button/outlined-button.ts
index 7507be45f8..2462f40b05 100644
--- a/button/outlined-button.ts
+++ b/button/outlined-button.ts
@@ -4,42 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
-import {customElement} from 'lit/decorators.js';
-
-import {OutlinedButton} from './internal/outlined-button.js';
-import {styles as outlinedStyles} from './internal/outlined-styles.js';
-import {styles as sharedStyles} from './internal/shared-styles.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-outlined-button': MdOutlinedButton;
-  }
-}
-
-/**
- * @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}
- */
-@customElement('md-outlined-button')
-export class MdOutlinedButton extends OutlinedButton {
-  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];
-}
+export * from '../components/button/outlined-button.js';
diff --git a/button/text-button.ts b/button/text-button.ts
index 7575d8e20a..7b58e6ad7f 100644
--- a/button/text-button.ts
+++ b/button/text-button.ts
@@ -4,40 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
-import {customElement} from 'lit/decorators.js';
-
-import {styles as sharedStyles} from './internal/shared-styles.js';
-import {TextButton} from './internal/text-button.js';
-import {styles as textStyles} from './internal/text-styles.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-text-button': MdTextButton;
-  }
-}
-
-/**
- * @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}
- */
-@customElement('md-text-button')
-export class MdTextButton extends TextButton {
-  static override styles: CSSResultOrNative[] = [sharedStyles, textStyles];
-}
+export * from '../components/button/text-button.js';
diff --git a/components/button/_elevated-button.scss b/components/button/_elevated-button.scss
new file mode 100644
index 0000000000..355e9140b0
--- /dev/null
+++ b/components/button/_elevated-button.scss
@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/elevated-button' show theme;
diff --git a/components/button/_filled-button.scss b/components/button/_filled-button.scss
new file mode 100644
index 0000000000..30a41885fa
--- /dev/null
+++ b/components/button/_filled-button.scss
@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/filled-button' show theme;
diff --git a/components/button/_filled-tonal-button.scss b/components/button/_filled-tonal-button.scss
new file mode 100644
index 0000000000..e3a7100982
--- /dev/null
+++ b/components/button/_filled-tonal-button.scss
@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/filled-tonal-button' show theme;
diff --git a/components/button/_outlined-button.scss b/components/button/_outlined-button.scss
new file mode 100644
index 0000000000..c88dd6f35c
--- /dev/null
+++ b/components/button/_outlined-button.scss
@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/outlined-button' show theme;
diff --git a/components/button/_text-button.scss b/components/button/_text-button.scss
new file mode 100644
index 0000000000..52947c3f6c
--- /dev/null
+++ b/components/button/_text-button.scss
@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/text-button' show theme;
diff --git a/button/demo/demo.ts b/components/button/demo/demo.ts
similarity index 100%
rename from button/demo/demo.ts
rename to components/button/demo/demo.ts
diff --git a/button/demo/project.json b/components/button/demo/project.json
similarity index 100%
rename from button/demo/project.json
rename to components/button/demo/project.json
diff --git a/button/demo/stories.ts b/components/button/demo/stories.ts
similarity index 100%
rename from button/demo/stories.ts
rename to components/button/demo/stories.ts
diff --git a/components/button/elevated-button.ts b/components/button/elevated-button.ts
new file mode 100644
index 0000000000..bde0945696
--- /dev/null
+++ b/components/button/elevated-button.ts
@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {CSSResultOrNative} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+import {ElevatedButton} from './internal/elevated-button.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.js';
+import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-elevated-button': MdElevatedButton;
+  }
+}
+
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter
+ * background color and a shadow. To prevent shadow creep, only use them when
+ * absolutely necessary, such as when the button requires visual separation from
+ * a patterned background.
+ *
+ * __Example usages:__
+ * - Reply
+ * - View all
+ * - Add to cart
+ * - Take out of trash
+ *
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-elevated-button')
+export class MdElevatedButton extends ElevatedButton {
+  static override styles: CSSResultOrNative[] = [
+    sharedStyles,
+    sharedElevationStyles,
+    elevatedStyles,
+  ];
+}
diff --git a/button/elevated-button_test.ts b/components/button/elevated-button_test.ts
similarity index 84%
rename from button/elevated-button_test.ts
rename to components/button/elevated-button_test.ts
index 70f1c828f2..83aa318290 100644
--- a/button/elevated-button_test.ts
+++ b/components/button/elevated-button_test.ts
@@ -6,7 +6,7 @@
 
 // import 'jasmine'; (google3-only)
 
-import {createTokenTests} from '../testing/tokens.js';
+import {createTokenTests} from '../../testing/tokens.js';
 
 import {MdElevatedButton} from './elevated-button.js';
 
diff --git a/components/button/filled-button.ts b/components/button/filled-button.ts
new file mode 100644
index 0000000000..6bc04686e8
--- /dev/null
+++ b/components/button/filled-button.ts
@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {CSSResultOrNative} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+import {FilledButton} from './internal/filled-button.js';
+import {styles as filledStyles} from './internal/filled-styles.js';
+import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-filled-button': MdFilledButton;
+  }
+}
+
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The filled button’s contrasting surface color makes it the
+ * most prominent button after the FAB. It’s used for final or unblocking
+ * actions in a flow.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-filled-button')
+export class MdFilledButton extends FilledButton {
+  static override styles: CSSResultOrNative[] = [
+    sharedStyles,
+    sharedElevationStyles,
+    filledStyles,
+  ];
+}
diff --git a/button/filled-button_test.ts b/components/button/filled-button_test.ts
similarity index 83%
rename from button/filled-button_test.ts
rename to components/button/filled-button_test.ts
index 43dfa0d092..ca3203275e 100644
--- a/button/filled-button_test.ts
+++ b/components/button/filled-button_test.ts
@@ -6,7 +6,7 @@
 
 // import 'jasmine'; (google3-only)
 
-import {createTokenTests} from '../testing/tokens.js';
+import {createTokenTests} from '../../testing/tokens.js';
 
 import {MdFilledButton} from './filled-button.js';
 
diff --git a/components/button/filled-tonal-button.ts b/components/button/filled-tonal-button.ts
new file mode 100644
index 0000000000..fe71e14fb9
--- /dev/null
+++ b/components/button/filled-tonal-button.ts
@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {CSSResultOrNative} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+import {FilledTonalButton} from './internal/filled-tonal-button.js';
+import {styles as tonalStyles} from './internal/filled-tonal-styles.js';
+import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-filled-tonal-button': MdFilledTonalButton;
+  }
+}
+
+/**
+ * @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}
+ */
+@customElement('md-filled-tonal-button')
+export class MdFilledTonalButton extends FilledTonalButton {
+  static override styles: CSSResultOrNative[] = [
+    sharedStyles,
+    sharedElevationStyles,
+    tonalStyles,
+  ];
+}
diff --git a/button/filled-tonal-button_test.ts b/components/button/filled-tonal-button_test.ts
similarity index 84%
rename from button/filled-tonal-button_test.ts
rename to components/button/filled-tonal-button_test.ts
index 9b858edf7b..f9bff1b3e5 100644
--- a/button/filled-tonal-button_test.ts
+++ b/components/button/filled-tonal-button_test.ts
@@ -6,7 +6,7 @@
 
 // import 'jasmine'; (google3-only)
 
-import {createTokenTests} from '../testing/tokens.js';
+import {createTokenTests} from '../../testing/tokens.js';
 
 import {MdFilledTonalButton} from './filled-tonal-button.js';
 
diff --git a/components/button/harness.ts b/components/button/harness.ts
new file mode 100644
index 0000000000..e8383d2ff4
--- /dev/null
+++ b/components/button/harness.ts
@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {Harness} from '../../testing/harness.js';
+
+import {Button} from './internal/button.js';
+
+/**
+ * Test harness for buttons.
+ */
+export class ButtonHarness extends Harness<Button> {
+  protected override async getInteractiveElement() {
+    await this.element.updateComplete;
+    return this.element.renderRoot.querySelector('.button') as HTMLElement;
+  }
+}
diff --git a/button/internal/_elevated-button.scss b/components/button/internal/_elevated-button.scss
similarity index 97%
rename from button/internal/_elevated-button.scss
rename to components/button/internal/_elevated-button.scss
index 8fa2448844..8d77fd7aac 100644
--- a/button/internal/_elevated-button.scss
+++ b/components/button/internal/_elevated-button.scss
@@ -8,7 +8,7 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../tokens';
+@use '../../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
diff --git a/button/internal/_elevation.scss b/components/button/internal/_elevation.scss
similarity index 95%
rename from button/internal/_elevation.scss
rename to components/button/internal/_elevation.scss
index 758305c991..76bf793b12 100644
--- a/button/internal/_elevation.scss
+++ b/components/button/internal/_elevation.scss
@@ -7,8 +7,8 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../elevation/elevation';
-@use '../../tokens';
+@use '../../../elevation/elevation';
+@use '../../../tokens';
 // go/keep-sorted end
 
 $_md-sys-motion: tokens.md-sys-motion-values();
diff --git a/button/internal/_filled-button.scss b/components/button/internal/_filled-button.scss
similarity index 97%
rename from button/internal/_filled-button.scss
rename to components/button/internal/_filled-button.scss
index efc147717c..a3a12c501a 100644
--- a/button/internal/_filled-button.scss
+++ b/components/button/internal/_filled-button.scss
@@ -8,7 +8,7 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../tokens';
+@use '../../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
diff --git a/button/internal/_filled-tonal-button.scss b/components/button/internal/_filled-tonal-button.scss
similarity index 97%
rename from button/internal/_filled-tonal-button.scss
rename to components/button/internal/_filled-tonal-button.scss
index 56abae9272..4f6b3e396d 100644
--- a/button/internal/_filled-tonal-button.scss
+++ b/components/button/internal/_filled-tonal-button.scss
@@ -8,7 +8,7 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../tokens';
+@use '../../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
diff --git a/button/internal/_icon.scss b/components/button/internal/_icon.scss
similarity index 100%
rename from button/internal/_icon.scss
rename to components/button/internal/_icon.scss
diff --git a/button/internal/_outlined-button.scss b/components/button/internal/_outlined-button.scss
similarity index 98%
rename from button/internal/_outlined-button.scss
rename to components/button/internal/_outlined-button.scss
index 38a803b371..0f3abc1687 100644
--- a/button/internal/_outlined-button.scss
+++ b/components/button/internal/_outlined-button.scss
@@ -8,7 +8,7 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../tokens';
+@use '../../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
diff --git a/button/internal/_shared.scss b/components/button/internal/_shared.scss
similarity index 98%
rename from button/internal/_shared.scss
rename to components/button/internal/_shared.scss
index 461593add8..70edb0bb0b 100644
--- a/button/internal/_shared.scss
+++ b/components/button/internal/_shared.scss
@@ -7,8 +7,8 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../focus/focus-ring';
-@use '../../ripple/ripple';
+@use '../../../focus/focus-ring';
+@use '../../../ripple/ripple';
 // go/keep-sorted end
 
 @mixin styles() {
diff --git a/button/internal/_text-button.scss b/components/button/internal/_text-button.scss
similarity index 97%
rename from button/internal/_text-button.scss
rename to components/button/internal/_text-button.scss
index 24c5dafceb..27993fddbd 100644
--- a/button/internal/_text-button.scss
+++ b/components/button/internal/_text-button.scss
@@ -8,7 +8,7 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../tokens';
+@use '../../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
diff --git a/button/internal/_touch-target.scss b/components/button/internal/_touch-target.scss
similarity index 100%
rename from button/internal/_touch-target.scss
rename to components/button/internal/_touch-target.scss
diff --git a/button/internal/button.ts b/components/button/internal/button.ts
similarity index 94%
rename from button/internal/button.ts
rename to components/button/internal/button.ts
index 9e8530a394..08792aac52 100644
--- a/button/internal/button.ts
+++ b/components/button/internal/button.ts
@@ -4,27 +4,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../focus/md-focus-ring.js';
-import '../../ripple/ripple.js';
+import '../../../focus/md-focus-ring.js';
+import '../../../ripple/ripple.js';
 
 import {html, isServer, LitElement, nothing} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
 
-import {ARIAMixinStrict} from '../../internal/aria/aria.js';
-import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
+import {ARIAMixinStrict} from '../../../internal/aria/aria.js';
+import {mixinDelegatesAria} from '../../../internal/aria/delegate.js';
 import {
   FormSubmitter,
   setupFormSubmitter,
   type FormSubmitterType,
-} from '../../internal/controller/form-submitter.js';
+} from '../../../internal/controller/form-submitter.js';
 import {
   dispatchActivationClick,
   isActivationClick,
-} from '../../internal/events/form-label-activation.js';
+} from '../../../internal/events/form-label-activation.js';
 import {
   internals,
   mixinElementInternals,
-} from '../../labs/behaviors/element-internals.js';
+} from '../../../labs/behaviors/element-internals.js';
 
 // Separate variable needed for closure.
 const buttonBaseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
diff --git a/button/internal/button_test.ts b/components/button/internal/button_test.ts
similarity index 97%
rename from button/internal/button_test.ts
rename to components/button/internal/button_test.ts
index 9f456e7232..fe2ed06665 100644
--- a/button/internal/button_test.ts
+++ b/components/button/internal/button_test.ts
@@ -9,7 +9,7 @@
 import {html} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {Environment} from '../../testing/environment.js';
+import {Environment} from '../../../testing/environment.js';
 import {ButtonHarness} from '../harness.js';
 import {Button} from './button.js';
 
diff --git a/button/internal/elevated-button.ts b/components/button/internal/elevated-button.ts
similarity index 89%
rename from button/internal/elevated-button.ts
rename to components/button/internal/elevated-button.ts
index 95dad71c19..8e23db0c2d 100644
--- a/button/internal/elevated-button.ts
+++ b/components/button/internal/elevated-button.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../elevation/elevation.js';
+import '../../../elevation/elevation.js';
 
 import {html} from 'lit';
 
diff --git a/button/internal/elevated-styles.scss b/components/button/internal/elevated-styles.scss
similarity index 100%
rename from button/internal/elevated-styles.scss
rename to components/button/internal/elevated-styles.scss
diff --git a/button/internal/filled-button.ts b/components/button/internal/filled-button.ts
similarity index 89%
rename from button/internal/filled-button.ts
rename to components/button/internal/filled-button.ts
index d6e9f748a5..ed8ecb9297 100644
--- a/button/internal/filled-button.ts
+++ b/components/button/internal/filled-button.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../elevation/elevation.js';
+import '../../../elevation/elevation.js';
 
 import {html} from 'lit';
 
diff --git a/button/internal/filled-styles.scss b/components/button/internal/filled-styles.scss
similarity index 100%
rename from button/internal/filled-styles.scss
rename to components/button/internal/filled-styles.scss
diff --git a/button/internal/filled-tonal-button.ts b/components/button/internal/filled-tonal-button.ts
similarity index 89%
rename from button/internal/filled-tonal-button.ts
rename to components/button/internal/filled-tonal-button.ts
index f6da749326..1bcddaf2f5 100644
--- a/button/internal/filled-tonal-button.ts
+++ b/components/button/internal/filled-tonal-button.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../elevation/elevation.js';
+import '../../../elevation/elevation.js';
 
 import {html} from 'lit';
 
diff --git a/button/internal/filled-tonal-styles.scss b/components/button/internal/filled-tonal-styles.scss
similarity index 100%
rename from button/internal/filled-tonal-styles.scss
rename to components/button/internal/filled-tonal-styles.scss
diff --git a/button/internal/outlined-button.ts b/components/button/internal/outlined-button.ts
similarity index 100%
rename from button/internal/outlined-button.ts
rename to components/button/internal/outlined-button.ts
diff --git a/button/internal/outlined-styles.scss b/components/button/internal/outlined-styles.scss
similarity index 100%
rename from button/internal/outlined-styles.scss
rename to components/button/internal/outlined-styles.scss
diff --git a/button/internal/shared-elevation-styles.scss b/components/button/internal/shared-elevation-styles.scss
similarity index 100%
rename from button/internal/shared-elevation-styles.scss
rename to components/button/internal/shared-elevation-styles.scss
diff --git a/button/internal/shared-styles.scss b/components/button/internal/shared-styles.scss
similarity index 100%
rename from button/internal/shared-styles.scss
rename to components/button/internal/shared-styles.scss
diff --git a/button/internal/text-button.ts b/components/button/internal/text-button.ts
similarity index 100%
rename from button/internal/text-button.ts
rename to components/button/internal/text-button.ts
diff --git a/button/internal/text-styles.scss b/components/button/internal/text-styles.scss
similarity index 100%
rename from button/internal/text-styles.scss
rename to components/button/internal/text-styles.scss
diff --git a/components/button/outlined-button.ts b/components/button/outlined-button.ts
new file mode 100644
index 0000000000..7507be45f8
--- /dev/null
+++ b/components/button/outlined-button.ts
@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {CSSResultOrNative} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+import {OutlinedButton} from './internal/outlined-button.js';
+import {styles as outlinedStyles} from './internal/outlined-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-outlined-button': MdOutlinedButton;
+  }
+}
+
+/**
+ * @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}
+ */
+@customElement('md-outlined-button')
+export class MdOutlinedButton extends OutlinedButton {
+  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];
+}
diff --git a/button/outlined-button_test.ts b/components/button/outlined-button_test.ts
similarity index 84%
rename from button/outlined-button_test.ts
rename to components/button/outlined-button_test.ts
index cb2f9684ec..78f1c93e7b 100644
--- a/button/outlined-button_test.ts
+++ b/components/button/outlined-button_test.ts
@@ -6,7 +6,7 @@
 
 // import 'jasmine'; (google3-only)
 
-import {createTokenTests} from '../testing/tokens.js';
+import {createTokenTests} from '../../testing/tokens.js';
 
 import {MdOutlinedButton} from './outlined-button.js';
 
diff --git a/components/button/text-button.ts b/components/button/text-button.ts
new file mode 100644
index 0000000000..7575d8e20a
--- /dev/null
+++ b/components/button/text-button.ts
@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {CSSResultOrNative} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+import {styles as sharedStyles} from './internal/shared-styles.js';
+import {TextButton} from './internal/text-button.js';
+import {styles as textStyles} from './internal/text-styles.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-text-button': MdTextButton;
+  }
+}
+
+/**
+ * @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}
+ */
+@customElement('md-text-button')
+export class MdTextButton extends TextButton {
+  static override styles: CSSResultOrNative[] = [sharedStyles, textStyles];
+}
diff --git a/button/text-button_test.ts b/components/button/text-button_test.ts
similarity index 83%
rename from button/text-button_test.ts
rename to components/button/text-button_test.ts
index 660b94408c..9ab7538f5c 100644
--- a/button/text-button_test.ts
+++ b/components/button/text-button_test.ts
@@ -6,7 +6,7 @@
 
 // import 'jasmine'; (google3-only)
 
-import {createTokenTests} from '../testing/tokens.js';
+import {createTokenTests} from '../../testing/tokens.js';
 
 import {MdTextButton} from './text-button.js';