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.

Author: google-labs-jules[bot]

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';

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';

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';

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';

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';

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';

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';

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';

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';

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';