material-components · copybara-service · Jul 14, 2026 · Jul 14, 2026
diff --git a/labs/gb/components/badge/md-badge.ts → labs/gb/components/badge/badge-element.ts b/labs/gb/components/badge/md-badge.ts → labs/gb/components/badge/badge-element.ts
@@ -5,22 +5,14 @@
  */
 
 import {css, CSSResultOrNative, html, LitElement} from 'lit';
-import {customElement, state} from 'lit/decorators.js';
+import {state} from 'lit/decorators.js';
 import {badge} from './badge.js';
 import {styles as badgeStyles} from './badge.cssresult.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design badge component. */
-    'md-gb-badge': Badge;
-  }
-}
-
 /**
  * A Material Design badge component.
  */
-@customElement('md-gb-badge')
-export class Badge extends LitElement {
+export class BadgeElement extends LitElement {
   static override styles: CSSResultOrNative[] = [
     badgeStyles,
     css`

diff --git a/labs/gb/components/badge/demo/stories.ts b/labs/gb/components/badge/demo/stories.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/badge/md-badge.js';
+import '@material/web/labs/gb/components/badge/md-gb-badge.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';
@@ -35,7 +35,8 @@ const anchored: MaterialStoryInit<StoryKnobs> = {
   name: 'Anchored',
   render() {
     return html`
-      <div style="display: flex; gap: 32px; align-items: center; padding: 16px;">
+      <div
+        style="display: flex; gap: 32px; align-items: center; padding: 16px;">
         <!-- Small badge (dot) -->
         <div style="display: inline-block;">
           <div

diff --git a/labs/gb/components/badge/md-gb-badge.ts b/labs/gb/components/badge/md-gb-badge.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {BadgeElement} from './badge-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design badge component. */
+    'md-gb-badge': BadgeElement;
+  }
+}
+
+customElements.define('md-gb-badge', BadgeElement);
diff --git a/labs/gb/components/button/md-button.ts → labs/gb/components/button/button-element.ts b/labs/gb/components/button/md-button.ts → labs/gb/components/button/button-element.ts
@@ -12,7 +12,7 @@ import {
   nothing,
   PropertyValues,
 } from 'lit';
-import {customElement, property, state} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import {ARIAMixinStrict} from '../../../../internal/aria/aria.js';
 import {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';
 import {redispatchEvent} from '../../../../internal/events/redispatch-event.js';
@@ -32,13 +32,6 @@ import buttonStyles from './button.css' with {type: 'css'}; // github-only
 
 import {button} from './button.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design button. */
-    'md-gb-button': Button;
-  }
-}
-
 // Separate variable needed for closure.
 const baseClass = mixinDelegatesAria(
   mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),
@@ -68,8 +61,7 @@ const baseClass = mixinDelegatesAria(
  * @cssprop --state-layer-color
  * @cssprop --trailing-space
  */
-@customElement('md-gb-button')
-export class Button extends baseClass {
+export class ButtonElement extends baseClass {
   /** @nocollapse */
   static override shadowRootOptions: ShadowRootInit = {
     mode: 'open',

diff --git a/labs/gb/components/button/demo/stories.ts b/labs/gb/components/button/demo/stories.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/button/md-button.js';
+import '@material/web/labs/gb/components/button/md-gb-button.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {

diff --git a/labs/gb/components/button/md-gb-button.ts b/labs/gb/components/button/md-gb-button.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ButtonElement} from './button-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design button. */
+    'md-gb-button': ButtonElement;
+  }
+}
+
+customElements.define('md-gb-button', ButtonElement);
diff --git a/labs/gb/components/card/md-card.ts → labs/gb/components/card/card-element.ts b/labs/gb/components/card/md-card.ts → labs/gb/components/card/card-element.ts
@@ -12,7 +12,7 @@ import {
   nothing,
   PropertyValues,
 } from 'lit';
-import {customElement, property, state} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import {ARIAMixinStrict} from '../../../../internal/aria/aria.js';
 import {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';
 import {ripple} from '../ripple/ripple.js';
@@ -27,13 +27,6 @@ import cardStyles from './card.css' with {type: 'css'}; // github-only
 
 import {type CardColor, card} from './card.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design card component. */
-    'md-gb-card': Card;
-  }
-}
-
 // Separate variable needed for closure.
 const baseClass = mixinDelegatesAria(LitElement);
 
@@ -51,8 +44,7 @@ const baseClass = mixinDelegatesAria(LitElement);
  * @cssprop --outline-width
  * @cssprop --state-layer-color
  */
-@customElement('md-gb-card')
-export class Card extends baseClass {
+export class CardElement extends baseClass {
   /** @nocollapse */
   static override shadowRootOptions: ShadowRootInit = {
     mode: 'open',

diff --git a/labs/gb/components/card/demo/stories.ts b/labs/gb/components/card/demo/stories.ts
@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/button/md-button.js';
-import '@material/web/labs/gb/components/card/md-card.js';
+import '@material/web/labs/gb/components/button/md-gb-button.js';
+import '@material/web/labs/gb/components/card/md-gb-card.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {CardColor} from '@material/web/labs/gb/components/card/card.js';

diff --git a/labs/gb/components/card/md-gb-card.ts b/labs/gb/components/card/md-gb-card.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {CardElement} from './card-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-card': CardElement;
+  }
+}
+
+customElements.define('md-gb-card', CardElement);
diff --git a/labs/gb/components/checkbox/md-checkbox.ts → ...b/components/checkbox/checkbox-element.ts b/labs/gb/components/checkbox/md-checkbox.ts → ...b/components/checkbox/checkbox-element.ts
@@ -5,7 +5,7 @@
  */
 
 import {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';
-import {customElement, property, query} from 'lit/decorators.js';
+import {property, query} from 'lit/decorators.js';
 import {ARIAMixinStrict} from '../../../../internal/aria/aria.js';
 import {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';
 import {redispatchEvent} from '../../../../internal/events/redispatch-event.js';
@@ -31,13 +31,6 @@ import checkboxStyles from './checkbox.css' with {type: 'css'}; // github-only
 
 import {checkbox} from './checkbox.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design checkbox component. */
-    'md-gb-checkbox': Checkbox;
-  }
-}
-
 // Separate variable needed for closure.
 const baseClass = mixinDelegatesAria(
   mixinConstraintValidation(
@@ -62,8 +55,7 @@ const baseClass = mixinDelegatesAria(
  * @cssprop --state-layer-shape
  * @cssprop --state-layer-size
  */
-@customElement('md-gb-checkbox')
-export class Checkbox extends baseClass {
+export class CheckboxElement extends baseClass {
   /** @nocollapse */
   static override shadowRootOptions: ShadowRootInit = {
     mode: 'open',

diff --git a/labs/gb/components/checkbox/demo/stories.ts b/labs/gb/components/checkbox/demo/stories.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/checkbox/md-checkbox.js';
+import '@material/web/labs/gb/components/checkbox/md-gb-checkbox.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';

diff --git a/labs/gb/components/checkbox/md-gb-checkbox.ts b/labs/gb/components/checkbox/md-gb-checkbox.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {CheckboxElement} from './checkbox-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-checkbox': CheckboxElement;
+  }
+}
+
+customElements.define('md-gb-checkbox', CheckboxElement);
diff --git a/labs/gb/components/divider/demo/stories.ts b/labs/gb/components/divider/demo/stories.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/divider/md-divider.js';
+import '@material/web/labs/gb/components/divider/md-gb-divider.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {divider} from '@material/web/labs/gb/components/divider/divider.js';

diff --git a/labs/gb/components/divider/md-divider.ts → .../gb/components/divider/divider-element.ts b/labs/gb/components/divider/md-divider.ts → .../gb/components/divider/divider-element.ts
@@ -5,29 +5,21 @@
  */
 
 import {css, CSSResultOrNative, html, LitElement} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {property} from 'lit/decorators.js';
 
 import dividerStyles from './divider.css' with {type: 'css'}; // github-only
 // import {styles as dividerStyles} from './divider.cssresult.js'; // google3-only
 
 import {divider} from './divider.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design divider component. */
-    'md-gb-divider': Divider;
-  }
-}
-
 /**
  * A Material Design divider component.
  *
  * @csspart divider - The divider element.
  * @cssprop --color
  * @cssprop --thickness
  */
-@customElement('md-gb-divider')
-export class Divider extends LitElement {
+export class DividerElement extends LitElement {
   static override styles: CSSResultOrNative[] = [
     dividerStyles,
     css`

diff --git a/labs/gb/components/divider/md-gb-divider.ts b/labs/gb/components/divider/md-gb-divider.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {DividerElement} from './divider-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-divider': DividerElement;
+  }
+}
+
+customElements.define('md-gb-divider', DividerElement);
diff --git a/labs/gb/components/fab/demo/stories.ts b/labs/gb/components/fab/demo/stories.ts
@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/fab/md-fab.js';
-import '@material/web/labs/gb/styles/icon/md-icon.js';
+import '@material/web/labs/gb/components/fab/md-gb-fab.js';
+import '@material/web/labs/gb/styles/icon/md-gb-icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {FabColor, FabSize} from '@material/web/labs/gb/components/fab/fab.js';

diff --git a/labs/gb/components/fab/md-fab.ts → labs/gb/components/fab/fab-element.ts b/labs/gb/components/fab/md-fab.ts → labs/gb/components/fab/fab-element.ts
@@ -5,7 +5,7 @@
  */
 
 import {css, CSSResultOrNative, html, LitElement} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {property} from 'lit/decorators.js';
 
 import focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only
 // import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
@@ -16,13 +16,6 @@ import fabStyles from './fab.css' with {type: 'css'}; // github-only
 
 import {fab, type FabColor, type FabSize} from './fab.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design fab component. */
-    'md-gb-fab': Fab;
-  }
-}
-
 /**
  * A Material Design fab component.
  *
@@ -41,8 +34,7 @@ declare global {
  * @cssprop --leading-space
  * @cssprop --trailing-space
  */
-@customElement('md-gb-fab')
-export class Fab extends LitElement {
+export class FabElement extends LitElement {
   static override styles: CSSResultOrNative[] = [
     focusRingStyles,
     rippleStyles,

diff --git a/labs/gb/components/fab/md-gb-fab.ts b/labs/gb/components/fab/md-gb-fab.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {FabElement} from './fab-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-fab': FabElement;
+  }
+}
+
+customElements.define('md-gb-fab', FabElement);
diff --git a/labs/gb/components/iconbutton/demo/stories.ts b/labs/gb/components/iconbutton/demo/stories.ts
@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/iconbutton/md-icon-button.js';
-import '@material/web/labs/gb/styles/icon/md-icon.js';
+import '@material/web/labs/gb/components/iconbutton/md-gb-icon-button.js';
+import '@material/web/labs/gb/styles/icon/md-gb-icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {