From e58e4e8262d0db49d9726dd2944ed0a4a57c2e5d Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Tue, 14 Jul 2026 14:12:07 -0700
Subject: [PATCH] refactor(labs): separate element class definitions from
 custom element registrations

PiperOrigin-RevId: 947898598
---
 .../badge/{md-badge.ts => badge-element.ts}     | 12 ++----------
 labs/gb/components/badge/demo/stories.ts        |  5 +++--
 labs/gb/components/badge/md-gb-badge.ts         | 16 ++++++++++++++++
 .../button/{md-button.ts => button-element.ts}  | 12 ++----------
 labs/gb/components/button/demo/stories.ts       |  2 +-
 labs/gb/components/button/md-gb-button.ts       | 16 ++++++++++++++++
 .../card/{md-card.ts => card-element.ts}        | 12 ++----------
 labs/gb/components/card/demo/stories.ts         |  4 ++--
 labs/gb/components/card/md-gb-card.ts           | 16 ++++++++++++++++
 .../{md-checkbox.ts => checkbox-element.ts}     | 12 ++----------
 labs/gb/components/checkbox/demo/stories.ts     |  2 +-
 labs/gb/components/checkbox/md-gb-checkbox.ts   | 16 ++++++++++++++++
 labs/gb/components/divider/demo/stories.ts      |  2 +-
 .../{md-divider.ts => divider-element.ts}       | 12 ++----------
 labs/gb/components/divider/md-gb-divider.ts     | 16 ++++++++++++++++
 labs/gb/components/fab/demo/stories.ts          |  4 ++--
 .../fab/{md-fab.ts => fab-element.ts}           | 12 ++----------
 labs/gb/components/fab/md-gb-fab.ts             | 16 ++++++++++++++++
 labs/gb/components/iconbutton/demo/stories.ts   |  4 ++--
 ...md-icon-button.ts => icon-button-element.ts} | 12 ++----------
 .../components/iconbutton/md-gb-icon-button.ts  | 16 ++++++++++++++++
 labs/gb/components/list/demo/stories.ts         |  6 +++---
 .../list/{md-list.ts => list-element.ts}        | 12 ++----------
 .../{md-list-item.ts => list-item-element.ts}   | 12 ++----------
 labs/gb/components/list/md-gb-list-item.ts      | 16 ++++++++++++++++
 labs/gb/components/list/md-gb-list.ts           | 16 ++++++++++++++++
 labs/gb/components/menu/demo/stories.ts         |  6 +++---
 labs/gb/components/menu/md-gb-menu-group.ts     | 16 ++++++++++++++++
 labs/gb/components/menu/md-gb-menu-item.ts      | 16 ++++++++++++++++
 labs/gb/components/menu/md-gb-menu.ts           | 16 ++++++++++++++++
 .../menu/{md-menu.ts => menu-element.ts}        | 12 ++----------
 .../{md-menu-group.ts => menu-group-element.ts} | 11 ++---------
 .../{md-menu-item.ts => menu-item-element.ts}   | 11 ++---------
 labs/gb/components/radio/demo/stories.ts        |  2 +-
 labs/gb/components/radio/md-gb-radio.ts         | 16 ++++++++++++++++
 .../radio/{md-radio.ts => radio-element.ts}     | 17 ++++++-----------
 labs/gb/components/splitbutton/demo/stories.ts  |  6 +++---
 .../splitbutton/md-gb-split-button.ts           | 16 ++++++++++++++++
 ...-split-button.ts => split-button-element.ts} | 12 ++----------
 labs/gb/components/switch/demo/stories.ts       |  4 ++--
 labs/gb/components/switch/md-gb-switch.ts       | 16 ++++++++++++++++
 .../switch/{md-switch.ts => switch-element.ts}  | 12 ++----------
 .../styles/icon/{md-icon.ts => icon-element.ts} | 11 +----------
 labs/gb/styles/icon/md-gb-icon.ts               | 16 ++++++++++++++++
 44 files changed, 315 insertions(+), 182 deletions(-)
 rename labs/gb/components/badge/{md-badge.ts => badge-element.ts} (79%)
 create mode 100644 labs/gb/components/badge/md-gb-badge.ts
 rename labs/gb/components/button/{md-button.ts => button-element.ts} (97%)
 create mode 100644 labs/gb/components/button/md-gb-button.ts
 rename labs/gb/components/card/{md-card.ts => card-element.ts} (95%)
 create mode 100644 labs/gb/components/card/md-gb-card.ts
 rename labs/gb/components/checkbox/{md-checkbox.ts => checkbox-element.ts} (95%)
 create mode 100644 labs/gb/components/checkbox/md-gb-checkbox.ts
 rename labs/gb/components/divider/{md-divider.ts => divider-element.ts} (78%)
 create mode 100644 labs/gb/components/divider/md-gb-divider.ts
 rename labs/gb/components/fab/{md-fab.ts => fab-element.ts} (86%)
 create mode 100644 labs/gb/components/fab/md-gb-fab.ts
 rename labs/gb/components/iconbutton/{md-icon-button.ts => icon-button-element.ts} (94%)
 create mode 100644 labs/gb/components/iconbutton/md-gb-icon-button.ts
 rename labs/gb/components/list/{md-list.ts => list-element.ts} (82%)
 rename labs/gb/components/list/{md-list-item.ts => list-item-element.ts} (94%)
 create mode 100644 labs/gb/components/list/md-gb-list-item.ts
 create mode 100644 labs/gb/components/list/md-gb-list.ts
 create mode 100644 labs/gb/components/menu/md-gb-menu-group.ts
 create mode 100644 labs/gb/components/menu/md-gb-menu-item.ts
 create mode 100644 labs/gb/components/menu/md-gb-menu.ts
 rename labs/gb/components/menu/{md-menu.ts => menu-element.ts} (94%)
 rename labs/gb/components/menu/{md-menu-group.ts => menu-group-element.ts} (89%)
 rename labs/gb/components/menu/{md-menu-item.ts => menu-item-element.ts} (96%)
 create mode 100644 labs/gb/components/radio/md-gb-radio.ts
 rename labs/gb/components/radio/{md-radio.ts => radio-element.ts} (94%)
 create mode 100644 labs/gb/components/splitbutton/md-gb-split-button.ts
 rename labs/gb/components/splitbutton/{md-split-button.ts => split-button-element.ts} (93%)
 create mode 100644 labs/gb/components/switch/md-gb-switch.ts
 rename labs/gb/components/switch/{md-switch.ts => switch-element.ts} (95%)
 rename labs/gb/styles/icon/{md-icon.ts => icon-element.ts} (74%)
 create mode 100644 labs/gb/styles/icon/md-gb-icon.ts

diff --git a/labs/gb/components/badge/md-badge.ts b/labs/gb/components/badge/badge-element.ts
similarity index 79%
rename from labs/gb/components/badge/md-badge.ts
rename to labs/gb/components/badge/badge-element.ts
index 27fe0fa565..cd3953c462 100644
--- a/labs/gb/components/badge/md-badge.ts
+++ b/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
index 4ba644ed64..96d3143990 100644
--- 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
new file mode 100644
index 0000000000..3b50288d70
--- /dev/null
+++ 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 b/labs/gb/components/button/button-element.ts
similarity index 97%
rename from labs/gb/components/button/md-button.ts
rename to labs/gb/components/button/button-element.ts
index 22519ed4b2..484e85a1b8 100644
--- a/labs/gb/components/button/md-button.ts
+++ b/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
index 02b175b468..91c6b77760 100644
--- 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
new file mode 100644
index 0000000000..58a1893317
--- /dev/null
+++ 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 b/labs/gb/components/card/card-element.ts
similarity index 95%
rename from labs/gb/components/card/md-card.ts
rename to labs/gb/components/card/card-element.ts
index 43541b9633..3541754177 100644
--- a/labs/gb/components/card/md-card.ts
+++ b/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
index 5d97211be6..5731d96d90 100644
--- 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
new file mode 100644
index 0000000000..a4a982a74c
--- /dev/null
+++ 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/labs/gb/components/checkbox/checkbox-element.ts
similarity index 95%
rename from labs/gb/components/checkbox/md-checkbox.ts
rename to labs/gb/components/checkbox/checkbox-element.ts
index ffba095b39..3e9a48033b 100644
--- a/labs/gb/components/checkbox/md-checkbox.ts
+++ b/labs/gb/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
index 895edfda50..3a418f3f46 100644
--- 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
new file mode 100644
index 0000000000..dcec28d424
--- /dev/null
+++ 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
index a9283fbc42..af5c0448d0 100644
--- 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 b/labs/gb/components/divider/divider-element.ts
similarity index 78%
rename from labs/gb/components/divider/md-divider.ts
rename to labs/gb/components/divider/divider-element.ts
index f6f0be3a78..a913636d9c 100644
--- a/labs/gb/components/divider/md-divider.ts
+++ b/labs/gb/components/divider/divider-element.ts
@@ -5,20 +5,13 @@
  */
 
 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.
  *
@@ -26,8 +19,7 @@ declare global {
  * @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
new file mode 100644
index 0000000000..6fca5f7fac
--- /dev/null
+++ 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
index 226cca8fb5..400872e43a 100644
--- 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 b/labs/gb/components/fab/fab-element.ts
similarity index 86%
rename from labs/gb/components/fab/md-fab.ts
rename to labs/gb/components/fab/fab-element.ts
index edb5594652..53658d8a49 100644
--- a/labs/gb/components/fab/md-fab.ts
+++ b/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
new file mode 100644
index 0000000000..4d45b5264a
--- /dev/null
+++ 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
index 52310404f2..a209329911 100644
--- 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 {
diff --git a/labs/gb/components/iconbutton/md-icon-button.ts b/labs/gb/components/iconbutton/icon-button-element.ts
similarity index 94%
rename from labs/gb/components/iconbutton/md-icon-button.ts
rename to labs/gb/components/iconbutton/icon-button-element.ts
index fbc62b28d7..78dfd9399d 100644
--- a/labs/gb/components/iconbutton/md-icon-button.ts
+++ b/labs/gb/components/iconbutton/icon-button-element.ts
@@ -5,7 +5,7 @@
  */
 
 import {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {property} 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';
@@ -24,13 +24,6 @@ import type {
 } from './icon-button.js';
 import {iconButton} from './icon-button.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design icon button component. */
-    'md-gb-icon-button': IconButton;
-  }
-}
-
 const baseClass = mixinDelegatesAria(
   mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),
 );
@@ -52,8 +45,7 @@ const baseClass = mixinDelegatesAria(
  * @cssprop --leading-space
  * @cssprop --trailing-space
  */
-@customElement('md-gb-icon-button')
-export class IconButton extends baseClass {
+export class IconButtonElement extends baseClass {
   /** @nocollapse */
   static override shadowRootOptions: ShadowRootInit = {
     mode: 'open',
diff --git a/labs/gb/components/iconbutton/md-gb-icon-button.ts b/labs/gb/components/iconbutton/md-gb-icon-button.ts
new file mode 100644
index 0000000000..3d79d7b932
--- /dev/null
+++ b/labs/gb/components/iconbutton/md-gb-icon-button.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {IconButtonElement} from './icon-button-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-icon-button': IconButtonElement;
+  }
+}
+
+customElements.define('md-gb-icon-button', IconButtonElement);
diff --git a/labs/gb/components/list/demo/stories.ts b/labs/gb/components/list/demo/stories.ts
index e97e2b4bb5..a07da566e3 100644
--- a/labs/gb/components/list/demo/stories.ts
+++ b/labs/gb/components/list/demo/stories.ts
@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/list/md-list.js';
-import '@material/web/labs/gb/components/list/md-list-item.js';
-import '@material/web/labs/gb/styles/icon/md-icon.js';
+import '@material/web/labs/gb/components/list/md-gb-list.js';
+import '@material/web/labs/gb/components/list/md-gb-list-item.js';
+import '@material/web/labs/gb/styles/icon/md-gb-icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {styles as checkboxStyles} from '@material/web/labs/gb/components/checkbox/checkbox.cssresult.js';
diff --git a/labs/gb/components/list/md-list.ts b/labs/gb/components/list/list-element.ts
similarity index 82%
rename from labs/gb/components/list/md-list.ts
rename to labs/gb/components/list/list-element.ts
index 963a15fdce..c2417cb8fa 100644
--- a/labs/gb/components/list/md-list.ts
+++ b/labs/gb/components/list/list-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 {
   internals,
   mixinElementInternals,
@@ -16,13 +16,6 @@ import listStyles from './list.css' with {type: 'css'}; // github-only
 
 import {list} from './list.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design list component. */
-    'md-gb-list': List;
-  }
-}
-
 // Separate variable needed for closure.
 const baseClass = mixinElementInternals(LitElement);
 
@@ -34,8 +27,7 @@ const baseClass = mixinElementInternals(LitElement);
  * @cssprop --container-shape
  * @cssprop --gap
  */
-@customElement('md-gb-list')
-export class List extends baseClass {
+export class ListElement extends baseClass {
   static override styles: CSSResultOrNative[] = [
     listStyles,
     css`
diff --git a/labs/gb/components/list/md-list-item.ts b/labs/gb/components/list/list-item-element.ts
similarity index 94%
rename from labs/gb/components/list/md-list-item.ts
rename to labs/gb/components/list/list-item-element.ts
index d6a90e0af6..dbf1dcb66e 100644
--- a/labs/gb/components/list/md-list-item.ts
+++ b/labs/gb/components/list/list-item-element.ts
@@ -5,7 +5,7 @@
  */
 
 import {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {property} from 'lit/decorators.js';
 import {ARIAMixinStrict} from '../../../../internal/aria/aria.js';
 import {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';
 import {
@@ -23,13 +23,6 @@ import listStyles from './list.css' with {type: 'css'}; // github-only
 
 import {listItem} from './list.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design list item component. */
-    'md-gb-list-item': ListItem;
-  }
-}
-
 // Separate variable needed for closure.
 const baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
 
@@ -75,8 +68,7 @@ const baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
  * @cssprop --trailing-supporting-text-tracking
  * @cssprop --trailing-supporting-text-color
  */
-@customElement('md-gb-list-item')
-export class ListItem extends baseClass {
+export class ListItemElement extends baseClass {
   /** @nocollapse */
   static override shadowRootOptions = {
     ...LitElement.shadowRootOptions,
diff --git a/labs/gb/components/list/md-gb-list-item.ts b/labs/gb/components/list/md-gb-list-item.ts
new file mode 100644
index 0000000000..b294e91d09
--- /dev/null
+++ b/labs/gb/components/list/md-gb-list-item.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ListItemElement} from './list-item-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-list-item': ListItemElement;
+  }
+}
+
+customElements.define('md-gb-list-item', ListItemElement);
diff --git a/labs/gb/components/list/md-gb-list.ts b/labs/gb/components/list/md-gb-list.ts
new file mode 100644
index 0000000000..30509b251a
--- /dev/null
+++ b/labs/gb/components/list/md-gb-list.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ListElement} from './list-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-list': ListElement;
+  }
+}
+
+customElements.define('md-gb-list', ListElement);
diff --git a/labs/gb/components/menu/demo/stories.ts b/labs/gb/components/menu/demo/stories.ts
index 2571df51a0..8b0fb1fad8 100644
--- a/labs/gb/components/menu/demo/stories.ts
+++ b/labs/gb/components/menu/demo/stories.ts
@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/menu/md-menu.js';
-import '@material/web/labs/gb/components/menu/md-menu-group.js';
-import '@material/web/labs/gb/components/menu/md-menu-item.js';
+import '@material/web/labs/gb/components/menu/md-gb-menu.js';
+import '@material/web/labs/gb/components/menu/md-gb-menu-group.js';
+import '@material/web/labs/gb/components/menu/md-gb-menu-item.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {button} from '@material/web/labs/gb/components/button/button.js';
diff --git a/labs/gb/components/menu/md-gb-menu-group.ts b/labs/gb/components/menu/md-gb-menu-group.ts
new file mode 100644
index 0000000000..f607e25670
--- /dev/null
+++ b/labs/gb/components/menu/md-gb-menu-group.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {MenuGroupElement} from './menu-group-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-menu-group': MenuGroupElement;
+  }
+}
+
+customElements.define('md-gb-menu-group', MenuGroupElement);
diff --git a/labs/gb/components/menu/md-gb-menu-item.ts b/labs/gb/components/menu/md-gb-menu-item.ts
new file mode 100644
index 0000000000..d60940256f
--- /dev/null
+++ b/labs/gb/components/menu/md-gb-menu-item.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {MenuItemElement} from './menu-item-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-menu-item': MenuItemElement;
+  }
+}
+
+customElements.define('md-gb-menu-item', MenuItemElement);
diff --git a/labs/gb/components/menu/md-gb-menu.ts b/labs/gb/components/menu/md-gb-menu.ts
new file mode 100644
index 0000000000..2a16190283
--- /dev/null
+++ b/labs/gb/components/menu/md-gb-menu.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {MenuElement} from './menu-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-menu': MenuElement;
+  }
+}
+
+customElements.define('md-gb-menu', MenuElement);
diff --git a/labs/gb/components/menu/md-menu.ts b/labs/gb/components/menu/menu-element.ts
similarity index 94%
rename from labs/gb/components/menu/md-menu.ts
rename to labs/gb/components/menu/menu-element.ts
index 87fd2648dc..ece11906f8 100644
--- a/labs/gb/components/menu/md-menu.ts
+++ b/labs/gb/components/menu/menu-element.ts
@@ -6,7 +6,7 @@
 
 import {ContextProvider} from '@lit/context';
 import {css, CSSResultOrNative, html, LitElement} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {property} from 'lit/decorators.js';
 import {
   internals,
   mixinElementInternals,
@@ -18,13 +18,6 @@ import menuStyles from './menu.css' with {type: 'css'}; // github-only
 
 import {menu, MENU_COLORS, menuContext, type MenuColor} from './menu.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design menu component. */
-    'md-gb-menu': Menu;
-  }
-}
-
 // Separate variable needed for closure.
 const baseClass = mixinElementInternals(mixinFocusable(LitElement));
 
@@ -41,8 +34,7 @@ const baseClass = mixinElementInternals(mixinFocusable(LitElement));
  * @cssprop --group-shape
  * @cssprop --section-label-text-color
  */
-@customElement('md-gb-menu')
-export class Menu extends baseClass {
+export class MenuElement extends baseClass {
   static override styles: CSSResultOrNative[] = [menuStyles, css``];
 
   @property() color: MenuColor = MENU_COLORS.standard;
diff --git a/labs/gb/components/menu/md-menu-group.ts b/labs/gb/components/menu/menu-group-element.ts
similarity index 89%
rename from labs/gb/components/menu/md-menu-group.ts
rename to labs/gb/components/menu/menu-group-element.ts
index 36836410be..c6b5b1ce26 100644
--- a/labs/gb/components/menu/md-menu-group.ts
+++ b/labs/gb/components/menu/menu-group-element.ts
@@ -6,7 +6,7 @@
 
 import {consume, provide} from '@lit/context';
 import {css, CSSResultOrNative, html, LitElement} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {property} from 'lit/decorators.js';
 import {
   internals,
   mixinElementInternals,
@@ -19,12 +19,6 @@ import {
   type MenuItemCheckable,
 } from './menu.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-gb-menu-group': MenuGroup;
-  }
-}
-
 // Separate variable needed for closure.
 const baseClass = mixinElementInternals(LitElement);
 
@@ -33,8 +27,7 @@ const baseClass = mixinElementInternals(LitElement);
  *
  * @slot - Used to display the menu group's items.
  */
-@customElement('md-gb-menu-group')
-export class MenuGroup extends baseClass {
+export class MenuGroupElement extends baseClass {
   static override styles: CSSResultOrNative[] = [
     css`
       :host {
diff --git a/labs/gb/components/menu/md-menu-item.ts b/labs/gb/components/menu/menu-item-element.ts
similarity index 96%
rename from labs/gb/components/menu/md-menu-item.ts
rename to labs/gb/components/menu/menu-item-element.ts
index e32428ff88..3a59a2b112 100644
--- a/labs/gb/components/menu/md-menu-item.ts
+++ b/labs/gb/components/menu/menu-item-element.ts
@@ -6,7 +6,7 @@
 
 import {consume} from '@lit/context';
 import {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';
-import {customElement, property, state} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import {
   afterDispatch,
   setupDispatchHooks,
@@ -33,12 +33,6 @@ import {
   type MenuItemCheckable,
 } from './menu.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-gb-menu-item': MenuItem;
-  }
-}
-
 // Separate variable needed for closure.
 const baseClass = mixinElementInternals(mixinFocusable(LitElement));
 
@@ -76,8 +70,7 @@ const baseClass = mixinElementInternals(mixinFocusable(LitElement));
  * @cssprop --trailing-supporting-text
  * @cssprop --trailing-supporting-text-tracking
  */
-@customElement('md-gb-menu-item')
-export class MenuItem extends baseClass {
+export class MenuItemElement extends baseClass {
   static override styles: CSSResultOrNative[] = [
     focusRingStyles,
     rippleStyles,
diff --git a/labs/gb/components/radio/demo/stories.ts b/labs/gb/components/radio/demo/stories.ts
index 809873d0ea..d46d86438e 100644
--- a/labs/gb/components/radio/demo/stories.ts
+++ b/labs/gb/components/radio/demo/stories.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/radio/md-radio.js';
+import '@material/web/labs/gb/components/radio/md-gb-radio.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';
diff --git a/labs/gb/components/radio/md-gb-radio.ts b/labs/gb/components/radio/md-gb-radio.ts
new file mode 100644
index 0000000000..26c797fd81
--- /dev/null
+++ b/labs/gb/components/radio/md-gb-radio.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {RadioElement} from './radio-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-radio': RadioElement;
+  }
+}
+
+customElements.define('md-gb-radio', RadioElement);
diff --git a/labs/gb/components/radio/md-radio.ts b/labs/gb/components/radio/radio-element.ts
similarity index 94%
rename from labs/gb/components/radio/md-radio.ts
rename to labs/gb/components/radio/radio-element.ts
index 0142920280..3a0640da3a 100644
--- a/labs/gb/components/radio/md-radio.ts
+++ b/labs/gb/components/radio/radio-element.ts
@@ -5,7 +5,7 @@
  */
 
 import {css, CSSResultOrNative, html, isServer, LitElement} from 'lit';
-import {customElement, property, query, state} from 'lit/decorators.js';
+import {property, query, state} from 'lit/decorators.js';
 import {
   afterDispatch,
   setupDispatchHooks,
@@ -37,13 +37,6 @@ import radioStyles from './radio.css' with {type: 'css'}; // github-only
 
 import {radio} from './radio.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design radio component. */
-    'md-gb-radio': Radio;
-  }
-}
-
 // Separate variable needed for closure.
 const radioBaseClass = mixinConstraintValidation(
   mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))),
@@ -61,8 +54,7 @@ const radioBaseClass = mixinConstraintValidation(
  * @cssprop --state-layer-shape
  * @cssprop --state-layer-size
  */
-@customElement('md-gb-radio')
-export class Radio extends radioBaseClass {
+export class RadioElement extends radioBaseClass {
   static override styles: CSSResultOrNative[] = [
     focusRingStyles,
     rippleStyles,
@@ -219,7 +211,10 @@ export class Radio extends radioBaseClass {
         return [this];
       }
 
-      return this.selectionController.controls as [Radio, ...Radio[]];
+      return this.selectionController.controls as [
+        RadioElement,
+        ...RadioElement[],
+      ];
     });
   }
 
diff --git a/labs/gb/components/splitbutton/demo/stories.ts b/labs/gb/components/splitbutton/demo/stories.ts
index 20b90c4d54..9085e7b7c8 100644
--- a/labs/gb/components/splitbutton/demo/stories.ts
+++ b/labs/gb/components/splitbutton/demo/stories.ts
@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/menu/md-menu.js';
-import '@material/web/labs/gb/components/menu/md-menu-item.js';
-import '@material/web/labs/gb/components/splitbutton/md-split-button.js';
+import '@material/web/labs/gb/components/menu/md-gb-menu.js';
+import '@material/web/labs/gb/components/menu/md-gb-menu-item.js';
+import '@material/web/labs/gb/components/splitbutton/md-gb-split-button.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {
diff --git a/labs/gb/components/splitbutton/md-gb-split-button.ts b/labs/gb/components/splitbutton/md-gb-split-button.ts
new file mode 100644
index 0000000000..dc1e56062a
--- /dev/null
+++ b/labs/gb/components/splitbutton/md-gb-split-button.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {SplitButtonElement} from './split-button-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-split-button': SplitButtonElement;
+  }
+}
+
+customElements.define('md-gb-split-button', SplitButtonElement);
diff --git a/labs/gb/components/splitbutton/md-split-button.ts b/labs/gb/components/splitbutton/split-button-element.ts
similarity index 93%
rename from labs/gb/components/splitbutton/md-split-button.ts
rename to labs/gb/components/splitbutton/split-button-element.ts
index 337b87e59e..24cd1b6e67 100644
--- a/labs/gb/components/splitbutton/md-split-button.ts
+++ b/labs/gb/components/splitbutton/split-button-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 {button} from '../button/button.js';
 
 import focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only
@@ -23,13 +23,6 @@ import {
   type SplitButtonSize,
 } from './split-button.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design split button component. */
-    'md-gb-split-button': SplitButton;
-  }
-}
-
 /**
  * A Material Design split button component.
  *
@@ -46,8 +39,7 @@ declare global {
  * @cssprop --leading-space
  * @cssprop --trailing-space
  */
-@customElement('md-gb-split-button')
-export class SplitButton extends LitElement {
+export class SplitButtonElement extends LitElement {
   static override styles: CSSResultOrNative[] = [
     focusRingStyles,
     rippleStyles,
diff --git a/labs/gb/components/switch/demo/stories.ts b/labs/gb/components/switch/demo/stories.ts
index 700da1177c..76d09d993a 100644
--- a/labs/gb/components/switch/demo/stories.ts
+++ b/labs/gb/components/switch/demo/stories.ts
@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/labs/gb/components/switch/md-switch.js';
-import '@material/web/labs/gb/styles/icon/md-icon.js';
+import '@material/web/labs/gb/components/switch/md-gb-switch.js';
+import '@material/web/labs/gb/styles/icon/md-gb-icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';
diff --git a/labs/gb/components/switch/md-gb-switch.ts b/labs/gb/components/switch/md-gb-switch.ts
new file mode 100644
index 0000000000..3c352eb726
--- /dev/null
+++ b/labs/gb/components/switch/md-gb-switch.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {SwitchElement} from './switch-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design component. */
+    'md-gb-switch': SwitchElement;
+  }
+}
+
+customElements.define('md-gb-switch', SwitchElement);
diff --git a/labs/gb/components/switch/md-switch.ts b/labs/gb/components/switch/switch-element.ts
similarity index 95%
rename from labs/gb/components/switch/md-switch.ts
rename to labs/gb/components/switch/switch-element.ts
index ce1f881dd8..5e0d365611 100644
--- a/labs/gb/components/switch/md-switch.ts
+++ b/labs/gb/components/switch/switch-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';
@@ -37,13 +37,6 @@ import switchStyles from './switch.css' with {type: 'css'}; // github-only
 
 import {switchToggle} from './switch.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design switch component. */
-    'md-gb-switch': Switch;
-  }
-}
-
 // Separate variable needed for closure.
 const baseClass = mixinDelegatesAria(
   mixinConstraintValidation(
@@ -72,8 +65,7 @@ const baseClass = mixinDelegatesAria(
  * @cssprop --track-outline-width
  * @cssprop --track-width
  */
-@customElement('md-gb-switch')
-export class Switch extends baseClass {
+export class SwitchElement extends baseClass {
   /** @nocollapse */
   static override shadowRootOptions: ShadowRootInit = {
     mode: 'open',
diff --git a/labs/gb/styles/icon/md-icon.ts b/labs/gb/styles/icon/icon-element.ts
similarity index 74%
rename from labs/gb/styles/icon/md-icon.ts
rename to labs/gb/styles/icon/icon-element.ts
index 5430d427c1..beb06cdfac 100644
--- a/labs/gb/styles/icon/md-icon.ts
+++ b/labs/gb/styles/icon/icon-element.ts
@@ -5,25 +5,16 @@
  */
 
 import {type CSSResultOrNative} from 'lit';
-import {customElement} from 'lit/decorators.js';
 import {Icon as IconBase} from '../../../../icon/internal/icon.js';
 import {adoptStyles} from '../adopt-styles.js';
 
 import iconStyles from './md-icon.css' with {type: 'css'}; // github-only
 // import iconStyles from './md-icon.cssresult.js'; // google3-only
 
-declare global {
-  interface HTMLElementTagNameMap {
-    /** A Material Design icon component. */
-    'md-gb-icon': Icon;
-  }
-}
-
 /**
  * A Material Design icon component.
  */
-@customElement('md-gb-icon')
-export class Icon extends IconBase {
+export class IconElement extends IconBase {
   static override styles: CSSResultOrNative[] = [iconStyles];
 
   override connectedCallback() {
diff --git a/labs/gb/styles/icon/md-gb-icon.ts b/labs/gb/styles/icon/md-gb-icon.ts
new file mode 100644
index 0000000000..a81497ea01
--- /dev/null
+++ b/labs/gb/styles/icon/md-gb-icon.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {IconElement} from './icon-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design icon component. */
+    'md-gb-icon': IconElement;
+  }
+}
+
+customElements.define('md-gb-icon', IconElement);