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

@@ -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';
+export * from '../components/button/elevated-button.js';
-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,
-  ];
-}

button/filled-button.ts

@@ -4,45 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
+export * from '../components/button/filled-button.js';
-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,
-  ];
-}

button/filled-tonal-button.ts

@@ -4,46 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
+export * from '../components/button/filled-tonal-button.js';
-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,
-  ];
-}

button/harness.ts

@@ -4,16 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Harness} from '../testing/harness.js';
+export * from '../components/button/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;
-  }
-}

button/outlined-button.ts

@@ -4,42 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
+export * from '../components/button/outlined-button.js';
-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];
-}

button/text-button.ts

@@ -4,40 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {CSSResultOrNative} from 'lit';
+export * from '../components/button/text-button.js';
-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];
-}

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;

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;

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;

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;

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;

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,
+  ];
+}

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

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,
+  ];
+}

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

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,
+  ];
+}

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

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;
+  }
+}

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) {

components/button/internal/_elevation.scss

@@ -7,8 +7,8 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../elevation/elevation';
+@use '../../../elevation/elevation';
-@use '../../tokens';
+@use '../../../tokens';
 // go/keep-sorted end
 
 $_md-sys-motion: tokens.md-sys-motion-values();

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) {

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) {

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) {

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 '../../../focus/focus-ring';
-@use '../../ripple/ripple';
+@use '../../../ripple/ripple';
 // go/keep-sorted end
 
 @mixin styles() {

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) {

components/button/internal/button.ts

@@ -4,27 +4,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../focus/md-focus-ring.js';
+import '../../../focus/md-focus-ring.js';
-import '../../ripple/ripple.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 {ARIAMixinStrict} from '../../../internal/aria/aria.js';
-import {mixinDelegatesAria} from '../../internal/aria/delegate.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));

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

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

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

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

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];
+}

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

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];
+}

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