From 1383ea3fe8b6fe8cb3d8b1d4b7db7b0bff24830f Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 11 Aug 2023 10:09:44 -0700
Subject: [PATCH] React import paths (#1507)

* fix react imports in examples

* move types to definition files

* update changelog

* update changelog
---
 docs/pages/components/alert.md                | 26 +++----
 docs/pages/components/animated-image.md       |  8 +--
 docs/pages/components/animation.md            | 10 +--
 docs/pages/components/avatar.md               | 18 ++---
 docs/pages/components/badge.md                | 22 +++---
 docs/pages/components/breadcrumb-item.md      |  6 +-
 docs/pages/components/breadcrumb.md           | 24 +++----
 docs/pages/components/button-group.md         | 50 ++++++-------
 docs/pages/components/button.md               | 30 ++++----
 docs/pages/components/card.md                 | 20 +++---
 docs/pages/components/carousel-item.md        |  4 +-
 docs/pages/components/carousel.md             | 66 ++++++++---------
 docs/pages/components/checkbox.md             | 14 ++--
 docs/pages/components/color-picker.md         | 14 ++--
 docs/pages/components/copy-button.md          | 20 +++---
 docs/pages/components/details.md              |  8 +--
 docs/pages/components/dialog.md               | 28 ++++----
 docs/pages/components/divider.md              | 16 ++---
 docs/pages/components/drawer.md               | 44 ++++++------
 docs/pages/components/dropdown.md             | 70 +++++++++----------
 docs/pages/components/format-bytes.md         | 12 ++--
 docs/pages/components/format-date.md          |  8 +--
 docs/pages/components/format-number.md        |  4 +-
 docs/pages/components/icon-button.md          | 14 ++--
 docs/pages/components/icon.md                 |  8 +--
 docs/pages/components/image-comparer.md       |  4 +-
 docs/pages/components/include.md              |  2 +-
 docs/pages/components/input.md                | 30 ++++----
 docs/pages/components/menu-item.md            | 30 ++++----
 docs/pages/components/menu-label.md           |  8 +--
 docs/pages/components/menu.md                 |  6 +-
 docs/pages/components/mutation-observer.md    |  8 +--
 docs/pages/components/option.md               |  8 +--
 docs/pages/components/popup.md                | 66 ++++++++---------
 docs/pages/components/progress-bar.md         | 14 ++--
 docs/pages/components/progress-ring.md        | 16 ++---
 docs/pages/components/qr-code.md              | 12 ++--
 docs/pages/components/radio-button.md         | 32 ++++-----
 docs/pages/components/radio-group.md          | 36 +++++-----
 docs/pages/components/radio.md                | 10 +--
 docs/pages/components/range.md                | 20 +++---
 docs/pages/components/rating.md               | 20 +++---
 docs/pages/components/relative-time.md        |  8 +--
 docs/pages/components/resize-observer.md      |  2 +-
 docs/pages/components/select.md               | 56 +++++++--------
 docs/pages/components/skeleton.md             | 12 ++--
 docs/pages/components/spinner.md              |  8 +--
 docs/pages/components/split-panel.md          | 28 ++++----
 docs/pages/components/switch.md               | 10 +--
 docs/pages/components/tab-group.md            | 42 +++++------
 docs/pages/components/tab-panel.md            |  6 +-
 docs/pages/components/tab.md                  |  2 +-
 docs/pages/components/tag.md                  |  8 +--
 docs/pages/components/textarea.md             | 20 +++---
 docs/pages/components/tooltip.md              | 34 ++++-----
 docs/pages/components/tree-item.md            | 16 ++---
 docs/pages/components/tree.md                 | 26 +++----
 docs/pages/getting-started/form-controls.md   | 24 +++----
 docs/pages/resources/changelog.md             |  2 +
 .../plop/templates/component/component.hbs    |  6 --
 scripts/plop/templates/component/define.hbs   |  8 +++
 src/components/alert/alert.component.ts       |  6 --
 src/components/alert/alert.ts                 |  8 +++
 .../animated-image.component.ts               |  6 --
 .../animated-image/animated-image.ts          |  8 +++
 .../animation/animation.component.ts          |  6 --
 src/components/animation/animation.ts         |  8 +++
 src/components/avatar/avatar.component.ts     |  6 --
 src/components/avatar/avatar.ts               |  8 +++
 src/components/badge/badge.component.ts       |  6 --
 src/components/badge/badge.ts                 |  8 +++
 .../breadcrumb-item.component.ts              |  6 --
 .../breadcrumb-item/breadcrumb-item.ts        |  8 +++
 .../breadcrumb/breadcrumb.component.ts        |  6 --
 src/components/breadcrumb/breadcrumb.ts       |  8 +++
 .../button-group/button-group.component.ts    |  6 --
 src/components/button-group/button-group.ts   |  8 +++
 src/components/button/button.component.ts     |  6 --
 src/components/button/button.ts               |  8 +++
 src/components/card/card.component.ts         |  6 --
 src/components/card/card.ts                   |  8 +++
 .../carousel-item/carousel-item.component.ts  |  6 --
 src/components/carousel-item/carousel-item.ts |  8 +++
 src/components/carousel/carousel.component.ts |  6 --
 src/components/carousel/carousel.ts           |  8 +++
 src/components/checkbox/checkbox.component.ts |  6 --
 src/components/checkbox/checkbox.ts           |  8 +++
 .../color-picker/color-picker.component.ts    |  6 --
 src/components/color-picker/color-picker.ts   |  8 +++
 .../copy-button/copy-button.component.ts      |  6 --
 src/components/copy-button/copy-button.ts     |  8 +++
 src/components/details/details.component.ts   |  6 --
 src/components/details/details.ts             |  8 +++
 src/components/dialog/dialog.component.ts     |  6 --
 src/components/dialog/dialog.ts               |  8 +++
 src/components/divider/divider.component.ts   |  6 --
 src/components/divider/divider.ts             |  8 +++
 src/components/drawer/drawer.component.ts     |  6 --
 src/components/drawer/drawer.ts               |  8 +++
 src/components/dropdown/dropdown.component.ts |  6 --
 src/components/dropdown/dropdown.ts           |  8 +++
 .../format-bytes/format-bytes.component.ts    |  6 --
 src/components/format-bytes/format-bytes.ts   |  8 +++
 .../format-date/format-date.component.ts      |  6 --
 src/components/format-date/format-date.ts     |  8 +++
 .../format-number/format-number.component.ts  |  6 --
 src/components/format-number/format-number.ts |  8 +++
 .../icon-button/icon-button.component.ts      |  6 --
 src/components/icon-button/icon-button.ts     |  8 +++
 src/components/icon/icon.component.ts         |  6 --
 src/components/icon/icon.ts                   |  8 +++
 .../image-comparer.component.ts               |  6 --
 .../image-comparer/image-comparer.ts          |  8 +++
 src/components/include/include.component.ts   |  6 --
 src/components/include/include.ts             |  8 +++
 src/components/input/input.component.ts       |  6 --
 src/components/input/input.ts                 |  8 +++
 .../menu-item/menu-item.component.ts          |  6 --
 src/components/menu-item/menu-item.ts         |  8 +++
 src/components/menu-label/menu-label.ts       |  8 +++
 src/components/menu/menu.component.ts         |  6 --
 src/components/menu/menu.ts                   |  8 +++
 .../mutation-observer.component.ts            |  6 --
 .../mutation-observer/mutation-observer.ts    |  8 +++
 src/components/option/option.component.ts     |  6 --
 src/components/option/option.ts               |  8 +++
 src/components/popup/popup.component.ts       |  6 --
 src/components/popup/popup.ts                 |  8 +++
 .../progress-bar/progress-bar.component.ts    |  6 --
 src/components/progress-bar/progress-bar.ts   |  8 +++
 .../progress-ring/progress-ring.component.ts  |  6 --
 src/components/progress-ring/progress-ring.ts |  8 +++
 src/components/qr-code/qr-code.component.ts   |  6 --
 src/components/qr-code/qr-code.ts             |  8 +++
 .../radio-button/radio-button.component.ts    |  6 --
 src/components/radio-button/radio-button.ts   |  8 +++
 .../radio-group/radio-group.component.ts      |  6 --
 src/components/radio-group/radio-group.ts     |  8 +++
 src/components/radio/radio.ts                 |  8 +++
 src/components/range/range.component.ts       |  6 --
 src/components/range/range.ts                 |  8 +++
 src/components/rating/rating.component.ts     |  6 --
 src/components/rating/rating.ts               |  8 +++
 .../relative-time/relative-time.component.ts  |  6 --
 src/components/relative-time/relative-time.ts |  8 +++
 .../resize-observer/resize-observer.ts        |  8 +++
 src/components/select/select.component.ts     |  6 --
 src/components/select/select.ts               |  8 +++
 src/components/skeleton/skeleton.component.ts |  6 --
 src/components/skeleton/skeleton.ts           |  8 +++
 src/components/spinner/spinner.component.ts   |  6 --
 src/components/spinner/spinner.ts             |  8 +++
 src/components/split-panel/split-panel.ts     |  8 +++
 src/components/switch/switch.ts               |  8 +++
 src/components/tab-group/tab-group.ts         |  8 +++
 .../tab-panel/tab-panel.component.ts          |  6 --
 src/components/tab-panel/tab-panel.ts         |  8 +++
 src/components/tab/tab.ts                     |  8 +++
 src/components/tag/tag.component.ts           |  6 --
 src/components/tag/tag.ts                     |  8 +++
 src/components/textarea/textarea.component.ts |  6 --
 src/components/textarea/textarea.ts           |  8 +++
 src/components/tooltip/tooltip.component.ts   |  6 --
 src/components/tooltip/tooltip.ts             |  8 +++
 .../tree-item/tree-item.component.ts          |  6 --
 src/components/tree-item/tree-item.ts         |  8 +++
 src/components/tree/tree.component.ts         |  6 --
 src/components/tree/tree.ts                   |  8 +++
 .../visually-hidden.component.ts              |  6 --
 .../visually-hidden/visually-hidden.ts        |  8 +++
 170 files changed, 1058 insertions(+), 896 deletions(-)

diff --git a/docs/pages/components/alert.md b/docs/pages/components/alert.md
index 3c93dceb..a2451e20 100644
--- a/docs/pages/components/alert.md
+++ b/docs/pages/components/alert.md
@@ -13,8 +13,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <SlAlert open>
@@ -75,8 +75,8 @@ Set the `variant` attribute to change the alert's variant.
 ```
 
 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -146,8 +146,8 @@ Add the `closable` attribute to show a close button that will hide the alert.
 
 ```jsx:react
 import { useState } from 'react';
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => {
   const [open, setOpen] = useState(true);
@@ -175,7 +175,7 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
 ```
 
 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
 
 const App = () => (
   <SlAlert variant="primary" open>
@@ -215,9 +215,9 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
 
 ```jsx:react
 import { useState } from 'react';
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const css = `
   .alert-duration sl-alert {
@@ -306,9 +306,9 @@ You should always use the `closable` attribute so users can dismiss the notifica
 
 ```jsx:react
 import { useRef } from 'react';
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 function showToast(alert) {
   alert.toast();
diff --git a/docs/pages/components/animated-image.md b/docs/pages/components/animated-image.md
index 242352be..5fc634c6 100644
--- a/docs/pages/components/animated-image.md
+++ b/docs/pages/components/animated-image.md
@@ -13,7 +13,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage
@@ -41,7 +41,7 @@ Both GIF and WEBP images are supported.
 ```
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage src="https://shoelace.style/assets/images/tie.webp" alt="Animation of a shoe being tied" />
@@ -64,7 +64,7 @@ To set a custom size, apply a width and/or height to the host element.
 {% raw %}
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage
@@ -102,7 +102,7 @@ You can change the appearance and location of the control box by targeting the `
 ```
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const css = `
   .animated-image-custom-control-box::part(control-box) {
diff --git a/docs/pages/components/animation.md b/docs/pages/components/animation.md
index d1e5d54c..6d99353d 100644
--- a/docs/pages/components/animation.md
+++ b/docs/pages/components/animation.md
@@ -27,7 +27,7 @@ To animate an element, wrap it in `<sl-animation>` and set an animation `name`.
 ```
 
 ```jsx:react
-import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
 
 const css = `
   .animation-overview .box {
@@ -173,7 +173,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
 
 ```jsx:react
 import { useEffect, useRef, useState } from 'react';
-import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
 
 const css = `
   .animation-scroll {
@@ -262,7 +262,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
 ```
 
 ```jsx:react
-import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
 
 const css = `
   .animation-keyframes .box {
@@ -329,8 +329,8 @@ Animations won't play until you apply the `play` attribute. You can omit it init
 
 ```jsx:react
 import { useState } from 'react';
-import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => {
   const [play, setPlay] = useState(false);
diff --git a/docs/pages/components/avatar.md b/docs/pages/components/avatar.md
index 9392f672..9a3fc26f 100644
--- a/docs/pages/components/avatar.md
+++ b/docs/pages/components/avatar.md
@@ -12,7 +12,7 @@ By default, a generic icon will be shown. You can personalize avatars by adding
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
 const App = () => <SlAvatar label="User avatar" />;
 ```
@@ -37,7 +37,7 @@ Avatar images can be lazily loaded by setting the `loading` attribute to `lazy`.
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
 const App = () => (
   <SlAvatar
@@ -61,7 +61,7 @@ When you don't have an image to use, you can set the `initials` attribute to sho
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
 const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
 ```
@@ -85,8 +85,8 @@ When no image or initials are set, an icon will be shown. The default avatar sho
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -116,8 +116,8 @@ Avatars can be shaped using the `shape` attribute.
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -167,8 +167,8 @@ You can group avatars with a few lines of CSS.
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const css = `
   .avatar-group sl-avatar:not(:first-of-type) {
diff --git a/docs/pages/components/badge.md b/docs/pages/components/badge.md
index d65a1446..1710eee4 100644
--- a/docs/pages/components/badge.md
+++ b/docs/pages/components/badge.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
 
 const App = () => <SlBadge>Badge</SlBadge>;
 ```
@@ -30,7 +30,7 @@ Set the `variant` attribute to change the badge's variant.
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
 
 const App = () => (
   <>
@@ -56,7 +56,7 @@ Use the `pill` attribute to give badges rounded edges.
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
 
 const App = () => (
   <>
@@ -100,7 +100,7 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
 
 const css = `
   .badge-pulse sl-badge:not(:last-of-type) {
@@ -157,8 +157,8 @@ One of the most common use cases for badges is attaching them to buttons. To mak
 {% raw %}
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
@@ -201,11 +201,11 @@ When including badges in menu items, use the `suffix` slot to make sure they're
 {% raw %}
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
-import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
 
 const App = () => (
   <SlMenu
diff --git a/docs/pages/components/breadcrumb-item.md b/docs/pages/components/breadcrumb-item.md
index a2454684..d89b637a 100644
--- a/docs/pages/components/breadcrumb-item.md
+++ b/docs/pages/components/breadcrumb-item.md
@@ -17,9 +17,9 @@ layout: component
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <SlBreadcrumb>
diff --git a/docs/pages/components/breadcrumb.md b/docs/pages/components/breadcrumb.md
index a827b493..9f707158 100644
--- a/docs/pages/components/breadcrumb.md
+++ b/docs/pages/components/breadcrumb.md
@@ -17,8 +17,8 @@ Breadcrumbs are usually placed before a page's main content with the current pag
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
 
 const App = () => (
   <SlBreadcrumb>
@@ -51,8 +51,8 @@ For websites, you'll probably want to use links instead. You can make any breadc
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
 
 const App = () => (
   <SlBreadcrumb>
@@ -100,8 +100,8 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 
 ```jsx:react
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
 
 const App = () => (
   <>
@@ -149,9 +149,9 @@ Use the `prefix` slot to add content before any breadcrumb item.
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <SlBreadcrumb>
@@ -181,9 +181,9 @@ Use the `suffix` slot to add content after any breadcrumb item.
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <SlBreadcrumb>
diff --git a/docs/pages/components/button-group.md b/docs/pages/components/button-group.md
index 66c9771b..27e5c831 100644
--- a/docs/pages/components/button-group.md
+++ b/docs/pages/components/button-group.md
@@ -14,8 +14,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
 
 const App = () => (
   <SlButtonGroup label="Alignment">
@@ -57,8 +57,8 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
 
 const App = () => (
   <>
@@ -134,8 +134,8 @@ Theme buttons are supported through the button's `variant` attribute.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
 
 const App = () => (
   <>
@@ -213,8 +213,8 @@ Pill buttons are supported through the button's `pill` attribute.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
 
 const App = () => (
   <>
@@ -283,11 +283,11 @@ Dropdowns can be placed inside button groups as long as the trigger is an `<sl-b
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlButtonGroup label="Example Button Group">
@@ -328,11 +328,11 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/co
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlButtonGroup label="Example Button Group">
@@ -370,9 +370,9 @@ Buttons can be wrapped in tooltips to provide more detail when the user interact
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const App = () => (
   <>
@@ -441,10 +441,10 @@ Create interactive toolbars with button groups.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const css = `
   .button-group-toolbar sl-button-group:not(:last-of-type) {
diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md
index cb68615a..0b6d5405 100644
--- a/docs/pages/components/button.md
+++ b/docs/pages/components/button.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => <SlButton>Button</SlButton>;
 ```
@@ -31,7 +31,7 @@ Use the `variant` attribute to set the button's variant.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
@@ -56,7 +56,7 @@ Use the `size` attribute to change a button's size.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
@@ -81,7 +81,7 @@ Use the `outline` attribute to draw outlined buttons with transparent background
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
@@ -118,7 +118,7 @@ Use the `pill` attribute to give buttons rounded edges.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
@@ -154,8 +154,8 @@ Use the `circle` attribute to create circular icon buttons. When this attribute
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -183,7 +183,7 @@ Use the `text` variant to create text buttons that share the same size as regula
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
@@ -212,7 +212,7 @@ It's often helpful to have a button that works like a link. This is possible by
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
@@ -247,7 +247,7 @@ As expected, buttons can be given a custom width by setting the `width` attribut
 {% raw %}
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
@@ -325,8 +325,8 @@ Use the `prefix` and `suffix` slots to add icons.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -398,7 +398,7 @@ Use the `caret` attribute to add a dropdown indicator when a button will trigger
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
@@ -429,7 +429,7 @@ Use the `loading` attribute to make a button busy. The width will remain the sam
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
@@ -469,7 +469,7 @@ Use the `disabled` attribute to disable a button.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
diff --git a/docs/pages/components/card.md b/docs/pages/components/card.md
index 50da4aa5..4d3bb7f3 100644
--- a/docs/pages/components/card.md
+++ b/docs/pages/components/card.md
@@ -41,9 +41,9 @@ layout: component
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlCard from '@shoelace-style/shoelace/dist/react/card';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 const css = `
   .card-overview {
@@ -106,7 +106,7 @@ Basic cards aren't very exciting, but they can display any content you want them
 ```
 
 ```jsx:react
-import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
+import SlCard from '@shoelace-style/shoelace/dist/react/card';
 
 const css = `
   .card-basic {
@@ -161,8 +161,8 @@ Headers can be used to display titles and more.
 ```
 
 ```jsx:react
-import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
-import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
+import SlCard from '@shoelace-style/shoelace/dist/react/card';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
 const css = `
   .card-header {
@@ -227,9 +227,9 @@ Footers can be used to display actions, summaries, or other relevant content.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlCard from '@shoelace-style/shoelace/dist/react/card';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 const css = `
   .card-footer {
@@ -282,7 +282,7 @@ Cards accept an `image` slot. The image is displayed atop the card and stretches
 ```
 
 ```jsx:react
-import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
+import SlCard from '@shoelace-style/shoelace/dist/react/card';
 
 const css = `
   .card-image {
diff --git a/docs/pages/components/carousel-item.md b/docs/pages/components/carousel-item.md
index 17007529..3c9417f7 100644
--- a/docs/pages/components/carousel-item.md
+++ b/docs/pages/components/carousel-item.md
@@ -41,8 +41,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel pagination>
diff --git a/docs/pages/components/carousel.md b/docs/pages/components/carousel.md
index ccc6506f..b1d61217 100644
--- a/docs/pages/components/carousel.md
+++ b/docs/pages/components/carousel.md
@@ -41,8 +41,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
 
 const App = () => (
   <>
@@ -124,8 +124,8 @@ Use the `pagination` attribute to show the total number of slides and the curren
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel pagination>
@@ -203,8 +203,8 @@ Use the `navigation` attribute to show previous and next buttons.
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel navigation>
@@ -282,8 +282,8 @@ By default, the carousel will not advanced beyond the first and last slides. You
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel loop navigation pagination>
@@ -361,8 +361,8 @@ The carousel will automatically advance when the `autoplay` attribute is used. T
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel autoplay loop pagination>
@@ -459,10 +459,10 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s
 
 ```jsx:react
 import { useState } from 'react';
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const App = () => {
   const [isEnabled, setIsEnabled] = useState(false);
@@ -530,8 +530,8 @@ The `slides-per-page` attribute makes it possible to display multiple slides at
 {% raw %}
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel navigation pagination slidesPerPage={2} slidesPerMove={2}>
@@ -623,8 +623,8 @@ The content of the carousel can be changed by adding or removing carousel items.
 
 ```jsx:react
 import { useState } from 'react';
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
 
 const css = `
   .dynamic-carousel {
@@ -740,8 +740,8 @@ Setting the `orientation` attribute to `vertical` will render the carousel in a
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
 
 const css = `
   .vertical {
@@ -863,11 +863,11 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's
 
 ```jsx:react
 import { useState } from 'react';
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
 
 const App = () => {
   const [aspectRatio, setAspectRatio] = useState('3/2');
@@ -971,10 +971,10 @@ Use the `--scroll-hint` custom property to add inline padding in horizontal caro
 
 ```jsx:react
 import { useState } from 'react';
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const App = () => (
   <>
@@ -1137,10 +1137,10 @@ The carousel has a robust API that makes it possible to extend and customize. Th
 
 ```jsx:react
 import { useRef } from 'react';
-import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const css = `
   .carousel-thumbnails {
diff --git a/docs/pages/components/checkbox.md b/docs/pages/components/checkbox.md
index 9eef2b87..dd88b3f6 100644
--- a/docs/pages/components/checkbox.md
+++ b/docs/pages/components/checkbox.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
 
 const App = () => <SlCheckbox>Checkbox</SlCheckbox>;
 ```
@@ -30,7 +30,7 @@ Use the `checked` attribute to activate the checkbox.
 ```
 
 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
 
 const App = () => <SlCheckbox checked>Checked</SlCheckbox>;
 ```
@@ -44,7 +44,7 @@ Use the `indeterminate` attribute to make the checkbox indeterminate.
 ```
 
 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
 
 const App = () => <SlCheckbox indeterminate>Indeterminate</SlCheckbox>;
 ```
@@ -58,7 +58,7 @@ Use the `disabled` attribute to disable the checkbox.
 ```
 
 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
 
 const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
 ```
@@ -76,7 +76,7 @@ Use the `size` attribute to change a checkbox's size.
 ```
 
 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
 
 const App = () => (
   <>
@@ -127,8 +127,8 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
 
 ```jsx:react
 import { useEffect, useRef } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
 
 const App = () => {
   const checkbox = useRef(null);
diff --git a/docs/pages/components/color-picker.md b/docs/pages/components/color-picker.md
index 25422524..a85dbdd3 100644
--- a/docs/pages/components/color-picker.md
+++ b/docs/pages/components/color-picker.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
 
 const App = () => <SlColorPicker label="Select a color" />;
 ```
@@ -30,7 +30,7 @@ Use the `value` attribute to set an initial value for the color picker.
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
 
 const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
 ```
@@ -44,7 +44,7 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled,
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
 
 const App = () => <SlColorPicker opacity label="Select a color" />;
 ```
@@ -63,7 +63,7 @@ To prevent users from toggling the format themselves, add the `no-format-toggle`
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
 
 const App = () => (
   <>
@@ -90,7 +90,7 @@ Use the `swatches` attribute to add convenient presets to the color picker. Any
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
 
 const App = () => (
   <SlColorPicker
@@ -114,7 +114,7 @@ Use the `size` attribute to change the color picker's trigger size.
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
 
 const App = () => (
   <>
@@ -134,7 +134,7 @@ The color picker can be rendered inline instead of in a dropdown using the `inli
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
 
 const App = () => <SlColorPicker inline label="Select a color" />;
 ```
diff --git a/docs/pages/components/copy-button.md b/docs/pages/components/copy-button.md
index 682f92b5..1565e13d 100644
--- a/docs/pages/components/copy-button.md
+++ b/docs/pages/components/copy-button.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
 
 const App = () => (
   <SlCopyButton value="Shoelace rocks!" />
@@ -33,7 +33,7 @@ Copy Buttons display feedback in a tooltip. You can customize the labels using t
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
 
 const App = () => (
   <SlCopyButton
@@ -58,8 +58,8 @@ Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the ico
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
-import { SlIcon } from '@shoelace-style/shoelace/dist/react/sl-icon';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlIcon } from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -99,8 +99,8 @@ To copy data from an attribute, use `from="id[attr]"` where `id` is the id of th
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
-import { SlInput } from '@shoelace-style/shoelace/dist/react/sl-input';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlInput } from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => (
   <>
@@ -134,7 +134,7 @@ This example demonstrates what happens when a copy error occurs. You can customi
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
 
 const App = () => (
   <SlCopyButton from="i-do-not-exist" />
@@ -150,7 +150,7 @@ Copy buttons can be disabled by adding the `disabled` attribute.
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
 
 const App = () => (
   <SlCopyButton value="You can't copy me" disabled />
@@ -166,7 +166,7 @@ A success indicator is briefly shown after copying. You can customize the length
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
 
 const App = () => (
   <SlCopyButton value="Shoelace rocks!" feedback-duration={250} />
@@ -216,7 +216,7 @@ You can customize the button to your liking with CSS.
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
 
 const css = `
   .custom-styles {
diff --git a/docs/pages/components/details.md b/docs/pages/components/details.md
index 765f6f46..89d99732 100644
--- a/docs/pages/components/details.md
+++ b/docs/pages/components/details.md
@@ -15,7 +15,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details';
+import SlDetails from '@shoelace-style/shoelace/dist/react/details';
 
 const App = () => (
   <SlDetails summary="Toggle Me">
@@ -39,7 +39,7 @@ Use the `disable` attribute to prevent the details from expanding.
 ```
 
 ```jsx:react
-import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details';
+import SlDetails from '@shoelace-style/shoelace/dist/react/details';
 
 const App = () => (
   <SlDetails summary="Disabled" disabled>
@@ -71,8 +71,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 ```
 
 ```jsx:react
-import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlDetails from '@shoelace-style/shoelace/dist/react/details';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const css = `
   sl-details.custom-icon::part(summary-icon) {
diff --git a/docs/pages/components/dialog.md b/docs/pages/components/dialog.md
index e2623469..46dca36f 100644
--- a/docs/pages/components/dialog.md
+++ b/docs/pages/components/dialog.md
@@ -27,8 +27,8 @@ layout: component
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -76,8 +76,8 @@ Use the `--width` custom property to set the dialog's width.
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -127,8 +127,8 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -186,9 +186,9 @@ The header shows a functional close button by default. You can use the `header-a
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
-import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -249,8 +249,8 @@ You can use `event.detail.source` to determine what triggered the request to clo
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -302,9 +302,9 @@ By default, the dialog's panel will gain focus when opened. This allows a subseq
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => {
   const [open, setOpen] = useState(false);
diff --git a/docs/pages/components/divider.md b/docs/pages/components/divider.md
index ee2b56d2..2d3e0621 100644
--- a/docs/pages/components/divider.md
+++ b/docs/pages/components/divider.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
 
 const App = () => <SlDivider />;
 ```
@@ -28,7 +28,7 @@ Use the `--width` custom property to change the width of the divider.
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
 
 const App = () => <SlDivider style={{ '--width': '4px' }} />;
 ```
@@ -46,7 +46,7 @@ Use the `--color` custom property to change the color of the divider.
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
 
 const App = () => <SlDivider style={{ '--color': 'tomato' }} />;
 ```
@@ -68,7 +68,7 @@ Use the `--spacing` custom property to change the amount of space between the di
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
 
 const App = () => (
   <>
@@ -98,7 +98,7 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
 
 const App = () => (
   <div
@@ -138,9 +138,9 @@ Use dividers in [menus](/components/menu) to visually group menu items.
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
diff --git a/docs/pages/components/drawer.md b/docs/pages/components/drawer.md
index 23167ab6..329d38d2 100644
--- a/docs/pages/components/drawer.md
+++ b/docs/pages/components/drawer.md
@@ -27,8 +27,8 @@ layout: component
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -74,8 +74,8 @@ By default, drawers slide in from the end. To make the drawer slide in from the
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -119,8 +119,8 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -164,8 +164,8 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -219,8 +219,8 @@ Unlike normal drawers, contained drawers are not modal. This means they do not s
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -287,8 +287,8 @@ Use the `--size` custom property to set the drawer's size. This will be applied
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -338,8 +338,8 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -396,9 +396,9 @@ The header shows a functional close button by default. You can use the `header-a
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
-import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -454,8 +454,8 @@ You can use `event.detail.source` to determine what triggered the request to clo
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -507,9 +507,9 @@ By default, the drawer's panel will gain focus when opened. This allows a subseq
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => {
   const [open, setOpen] = useState(false);
diff --git a/docs/pages/components/dropdown.md b/docs/pages/components/dropdown.md
index d624f54b..da08f881 100644
--- a/docs/pages/components/dropdown.md
+++ b/docs/pages/components/dropdown.md
@@ -33,12 +33,12 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlDropdown>
@@ -98,10 +98,10 @@ When dropdowns are used with [menus](/components/menu), you can listen for the [
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => {
   function handleSelect(event) {
@@ -151,10 +151,10 @@ Alternatively, you can listen for the `click` event on individual menu items. No
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => {
   function handleCut() {
@@ -203,11 +203,11 @@ The preferred placement of the dropdown can be set with the `placement` attribut
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlDropdown placement="top-start">
@@ -245,11 +245,11 @@ The distance from the panel to the trigger can be customized using the `distance
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlDropdown distance={30}>
@@ -287,11 +287,11 @@ The offset of the panel along the trigger can be customized using the `skidding`
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlDropdown skidding={30}>
@@ -346,12 +346,12 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const css = `
   .dropdown-hoist {
diff --git a/docs/pages/components/format-bytes.md b/docs/pages/components/format-bytes.md
index d9ca8462..82f95d90 100644
--- a/docs/pages/components/format-bytes.md
+++ b/docs/pages/components/format-bytes.md
@@ -24,9 +24,9 @@ layout: component
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => {
   const [value, setValue] = useState(1000);
@@ -64,7 +64,7 @@ Set the `value` attribute to a number to get the value in bytes.
 ```
 
 ```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
+import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
 
 const App = () => (
   <>
@@ -91,7 +91,7 @@ To get the value in bits, set the `unit` attribute to `bit`.
 ```
 
 ```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
+import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
 
 const App = () => (
   <>
@@ -118,7 +118,7 @@ Use the `lang` attribute to set the number formatting locale.
 ```
 
 ```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
+import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
 
 const App = () => (
   <>
diff --git a/docs/pages/components/format-date.md b/docs/pages/components/format-date.md
index 2013cca6..10e39a82 100644
--- a/docs/pages/components/format-date.md
+++ b/docs/pages/components/format-date.md
@@ -13,7 +13,7 @@ Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://dev
 ```
 
 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
+import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
 
 const App = () => <SlFormatDate date="2020-07-15T09:17:00-04:00" />;
 ```
@@ -51,7 +51,7 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h
 ```
 
 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
+import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
 
 const App = () => (
   <>
@@ -91,7 +91,7 @@ By default, the browser will determine whether to use 12-hour or 24-hour time. T
 ```
 
 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
+import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
 
 const App = () => (
   <>
@@ -113,7 +113,7 @@ Russian: <sl-format-date lang="ru"></sl-format-date>
 ```
 
 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
+import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
 
 const App = () => (
   <>
diff --git a/docs/pages/components/format-number.md b/docs/pages/components/format-number.md
index 2e1a51df..d54187db 100644
--- a/docs/pages/components/format-number.md
+++ b/docs/pages/components/format-number.md
@@ -95,7 +95,7 @@ Russian: <sl-format-number value="2000" lang="ru" minimum-fraction-digits="2"></
 ```
 
 ```jsx:react
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/sl-format-number';
+import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
 
 const App = () => (
   <>
@@ -121,7 +121,7 @@ To format a number as a monetary value, set the `type` attribute to `currency` a
 ```
 
 ```jsx:react
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/sl-format-number';
+import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
 
 const App = () => (
   <>
diff --git a/docs/pages/components/icon-button.md b/docs/pages/components/icon-button.md
index 3cd04753..2606e1d7 100644
--- a/docs/pages/components/icon-button.md
+++ b/docs/pages/components/icon-button.md
@@ -12,7 +12,7 @@ For a full list of icons that come bundled with Shoelace, refer to the [icon com
 ```
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
 const App = () => <SlIconButton name="gear" label="Settings" />;
 ```
@@ -32,7 +32,7 @@ Icon buttons inherit their parent element's `font-size`.
 {% raw %}
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
 const App = () => (
   <>
@@ -73,7 +73,7 @@ Icon buttons are designed to have a uniform appearance, so their color is not in
 ```
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
 const css = `
   .icon-button-color sl-icon-button::part(base) {
@@ -112,7 +112,7 @@ Use the `href` attribute to convert the button to a link.
 ```
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
 const App = () => <SlIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
 ```
@@ -128,8 +128,8 @@ Wrap a tooltip around an icon button to provide contextual information to the us
 ```
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const App = () => (
   <SlTooltip content="Settings">
@@ -147,7 +147,7 @@ Use the `disabled` attribute to disable the icon button.
 ```
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
 const App = () => <SlIconButton name="gear" label="Settings" disabled />;
 ```
diff --git a/docs/pages/components/icon.md b/docs/pages/components/icon.md
index 97366c3f..9a8b8bd4 100644
--- a/docs/pages/components/icon.md
+++ b/docs/pages/components/icon.md
@@ -70,7 +70,7 @@ Icons inherit their color from the current text color. Thus, you can set the `co
 {% raw %}
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -132,7 +132,7 @@ Icons are sized relative to the current font size. To change their size, set the
 {% raw %}
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <div style={{ fontSize: '32px' }}>
@@ -167,7 +167,7 @@ For non-decorative icons, use the `label` attribute to announce it to assistive
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => <SlIcon name="star-fill" label="Add to favorites" />;
 ```
@@ -183,7 +183,7 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a
 {% raw %}
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => <SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>;
 ```
diff --git a/docs/pages/components/image-comparer.md b/docs/pages/components/image-comparer.md
index d4fe0d1f..9e1836a0 100644
--- a/docs/pages/components/image-comparer.md
+++ b/docs/pages/components/image-comparer.md
@@ -23,7 +23,7 @@ For best results, use images that share the same dimensions. The slider can be c
 ```
 
 ```jsx:react
-import SlImageComparer from '@shoelace-style/shoelace/dist/react/sl-image-comparer';
+import SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
 
 const App = () => (
   <SlImageComparer>
@@ -63,7 +63,7 @@ Use the `position` attribute to set the initial position of the slider. This is
 ```
 
 ```jsx:react
-import SlImageComparer from '@shoelace-style/shoelace/dist/react/sl-image-comparer';
+import SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
 
 const App = () => (
   <SlImageComparer position={25}>
diff --git a/docs/pages/components/include.md b/docs/pages/components/include.md
index 7ef6ef45..76373761 100644
--- a/docs/pages/components/include.md
+++ b/docs/pages/components/include.md
@@ -14,7 +14,7 @@ The included content will be inserted into the `<sl-include>` element's default
 ```
 
 ```jsx:react
-import SlInclude from '@shoelace-style/shoelace/dist/react/sl-include';
+import SlInclude from '@shoelace-style/shoelace/dist/react/include';
 
 const App = () => <SlInclude src="https://shoelace.style/assets/examples/include.html" />;
 ```
diff --git a/docs/pages/components/input.md b/docs/pages/components/input.md
index c762d5b3..2a60cbf0 100644
--- a/docs/pages/components/input.md
+++ b/docs/pages/components/input.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => <SlInput />;
 ```
@@ -30,8 +30,8 @@ Use the `label` attribute to give the input an accessible label. For labels that
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => <SlInput label="What is your name?" />;
 ```
@@ -45,8 +45,8 @@ Add descriptive help text to an input with the `help-text` attribute. For help t
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
 ```
@@ -60,7 +60,7 @@ Use the `placeholder` attribute to add a placeholder.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => <SlInput placeholder="Type something" />;
 ```
@@ -74,7 +74,7 @@ Add the `clearable` attribute to add a clear button when the input has content.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => <SlInput placeholder="Clearable" clearable />;
 ```
@@ -88,7 +88,7 @@ Add the `password-toggle` attribute to add a toggle button that will show the pa
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => <SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;
 ```
@@ -102,7 +102,7 @@ Add the `filled` attribute to draw a filled input.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => <SlInput placeholder="Type something" filled />;
 ```
@@ -116,7 +116,7 @@ Use the `disabled` attribute to disable an input.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => <SlInput placeholder="Disabled" disabled />;
 ```
@@ -134,7 +134,7 @@ Use the `size` attribute to change an input's size.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => (
   <>
@@ -160,7 +160,7 @@ Use the `pill` attribute to give inputs rounded edges.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => (
   <>
@@ -186,7 +186,7 @@ The `type` attribute controls the type of input the browser renders.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => (
   <>
@@ -221,8 +221,8 @@ Use the `prefix` and `suffix` slots to add icons.
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => (
   <>
diff --git a/docs/pages/components/menu-item.md b/docs/pages/components/menu-item.md
index 81a3e649..ef80dfbb 100644
--- a/docs/pages/components/menu-item.md
+++ b/docs/pages/components/menu-item.md
@@ -28,10 +28,10 @@ layout: component
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
@@ -75,8 +75,8 @@ Add the `disabled` attribute to disable the menu item so it cannot be selected.
 {% raw %}
 
 ```jsx:react
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
@@ -118,11 +118,11 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
 {% raw %}
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
@@ -168,8 +168,8 @@ Checkbox menu items are visually indistinguishable from regular menu items. Thei
 {% raw %}
 
 ```jsx:react
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
@@ -218,8 +218,8 @@ The `value` attribute can be used to assign a hidden value, such as a unique ide
 {% raw %}
 
 ```jsx:react
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => {
   function handleSelect(event) {
diff --git a/docs/pages/components/menu-label.md b/docs/pages/components/menu-label.md
index e245f421..2b19037c 100644
--- a/docs/pages/components/menu-label.md
+++ b/docs/pages/components/menu-label.md
@@ -22,10 +22,10 @@ layout: component
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
diff --git a/docs/pages/components/menu.md b/docs/pages/components/menu.md
index 2bc49fe1..2039960a 100644
--- a/docs/pages/components/menu.md
+++ b/docs/pages/components/menu.md
@@ -22,9 +22,9 @@ You can use [menu items](/components/menu-item), [menu labels](/components/menu-
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
diff --git a/docs/pages/components/mutation-observer.md b/docs/pages/components/mutation-observer.md
index 2e622727..52d0d989 100644
--- a/docs/pages/components/mutation-observer.md
+++ b/docs/pages/components/mutation-observer.md
@@ -45,8 +45,8 @@ The mutation observer will report changes to the content it wraps through the `s
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlMutationObserver from '@shoelace-style/shoelace/dist/react/sl-mutation-observer';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';
 
 const css = `
   .resize-observer-overview div {
@@ -147,8 +147,8 @@ Use the `child-list` attribute to watch for new child elements that are added or
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlMutationObserver from '@shoelace-style/shoelace/dist/react/sl-mutation-observer';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';
 
 const css = `
   .mutation-child-list .buttons {
diff --git a/docs/pages/components/option.md b/docs/pages/components/option.md
index c335beaa..2558d677 100644
--- a/docs/pages/components/option.md
+++ b/docs/pages/components/option.md
@@ -14,8 +14,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect>
@@ -41,8 +41,8 @@ Use the `disabled` attribute to disable an option and prevent it from being sele
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect>
diff --git a/docs/pages/components/popup.md b/docs/pages/components/popup.md
index 49cc5163..16812090 100644
--- a/docs/pages/components/popup.md
+++ b/docs/pages/components/popup.md
@@ -104,11 +104,11 @@ Popup is a low-level utility built specifically for positioning elements. Do not
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-overview sl-popup {
@@ -273,8 +273,8 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-active span[slot='anchor'] {
@@ -346,7 +346,7 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your
 ```
 
 ```jsx:react
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
 
 const css = `
   #external-anchor {
@@ -441,9 +441,9 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const css = `
   .popup-placement span[slot='anchor'] {
@@ -545,8 +545,8 @@ Use the `distance` attribute to change the distance between the popup and its an
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const css = `
   .popup-distance span[slot='anchor'] {
@@ -642,8 +642,8 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const css = `
   .popup-skidding span[slot='anchor'] {
@@ -786,10 +786,10 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-arrow sl-popup {
@@ -942,9 +942,9 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const css = `
   .popup-sync span[slot='anchor'] {
@@ -1055,8 +1055,8 @@ Toggle the switch and scroll the container to see the difference.
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-strategy .overflow {
@@ -1164,8 +1164,8 @@ Scroll the container to see how the popup flips to prevent clipping.
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-flip .overflow {
@@ -1262,7 +1262,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre
 ```
 
 ```jsx:react
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
 
 const css = `
   .popup-flip-fallbacks .overflow {
@@ -1358,8 +1358,8 @@ Toggle the switch to see the difference.
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-shift .overflow {
@@ -1471,8 +1471,8 @@ Scroll the container to see the popup resize as its available space changes.
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-auto-size .overflow {
@@ -1623,8 +1623,8 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
 
 ```jsx:react
 import { useRef, useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   /* If you need to set a z-index, set it on the popup part like this */
diff --git a/docs/pages/components/progress-bar.md b/docs/pages/components/progress-bar.md
index b772db33..faa5bdb1 100644
--- a/docs/pages/components/progress-bar.md
+++ b/docs/pages/components/progress-bar.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
+import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
 
 const App = () => <SlProgressBar value={50} />;
 ```
@@ -26,7 +26,7 @@ Use the `label` attribute to label the progress bar and tell assistive devices h
 ```
 
 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
+import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
 
 const App = () => <SlProgressBar value="50" label="Upload progress" />;
 ```
@@ -42,7 +42,7 @@ Use the `--height` custom property to set the progress bar's height.
 {% raw %}
 
 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
+import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
 
 const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
 ```
@@ -82,9 +82,9 @@ Use the default slot to show a value.
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
 
 const App = () => {
   const [value, setValue] = useState(50);
@@ -123,7 +123,7 @@ The `indeterminate` attribute can be used to inform the user that the operation
 ```
 
 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
+import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
 
 const App = () => <SlProgressBar indeterminate />;
 ```
diff --git a/docs/pages/components/progress-ring.md b/docs/pages/components/progress-ring.md
index e57c26cc..14afd0dc 100644
--- a/docs/pages/components/progress-ring.md
+++ b/docs/pages/components/progress-ring.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
 
 const App = () => <SlProgressRing value="25" />;
 ```
@@ -28,7 +28,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
 {% raw %}
 
 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
 
 const App = () => <SlProgressRing value="50" style={{ '--size': '200px' }} />;
 ```
@@ -46,7 +46,7 @@ Use the `--track-width` and `--indicator-width` custom properties to set the wid
 {% raw %}
 
 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
 
 const App = () => <SlProgressRing value="50" style={{ '--track-width': '6px', '--indicator-width': '12px' }} />;
 ```
@@ -70,7 +70,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
 {% raw %}
 
 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
 
 const App = () => (
   <SlProgressRing
@@ -94,7 +94,7 @@ Use the `label` attribute to label the progress ring and tell assistive devices
 ```
 
 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
 
 const App = () => <SlProgressRing value="50" label="Upload progress" />;
 ```
@@ -134,9 +134,9 @@ Use the default slot to show a label inside the progress ring.
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
 
 const App = () => {
   const [value, setValue] = useState(50);
diff --git a/docs/pages/components/qr-code.md b/docs/pages/components/qr-code.md
index 8059442d..4416e975 100644
--- a/docs/pages/components/qr-code.md
+++ b/docs/pages/components/qr-code.md
@@ -39,8 +39,8 @@ QR codes are useful for providing small pieces of information to users who can q
 
 ```jsx:react
 import { useState } from 'react';
-import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const css = `
   .qr-overview {
@@ -81,7 +81,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
 ```
 
 ```jsx:react
-import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
+import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
 
 const App = () => <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />;
 ```
@@ -95,7 +95,7 @@ Use the `size` attribute to change the size of the QR code.
 ```
 
 ```jsx:react
-import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
+import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
 
 const App = () => <SlQrCode value="https://shoelace.style/" size="64" />;
 ```
@@ -109,7 +109,7 @@ Create a rounded effect with the `radius` attribute.
 ```
 
 ```jsx:react
-import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
+import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
 
 const App = () => <SlQrCode value="https://shoelace.style/" radius="0.5" />;
 ```
@@ -136,7 +136,7 @@ QR codes can be rendered with various levels of [error correction](https://www.q
 ```
 
 ```jsx:react
-import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
+import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
 
 const css = `
   .qr-error-correction {
diff --git a/docs/pages/components/radio-button.md b/docs/pages/components/radio-button.md
index 101112b2..c7bea66e 100644
--- a/docs/pages/components/radio-button.md
+++ b/docs/pages/components/radio-button.md
@@ -16,8 +16,8 @@ Radio buttons are designed to be used with [radio groups](/components/radio-grou
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -43,8 +43,8 @@ To set the initial value and checked state, use the `value` attribute on the con
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -68,8 +68,8 @@ Use the `disabled` attribute to disable a radio button.
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -111,8 +111,8 @@ Use the `size` attribute to change a radio button's size.
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -168,8 +168,8 @@ Use the `pill` attribute to give radio buttons rounded edges.
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -221,9 +221,9 @@ Use the `prefix` and `suffix` slots to add icons.
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -275,9 +275,9 @@ You can omit button labels and use icons instead. Make sure to set a `label` att
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="neutral">
diff --git a/docs/pages/components/radio-group.md b/docs/pages/components/radio-group.md
index e8cb23c9..82ad64d8 100644
--- a/docs/pages/components/radio-group.md
+++ b/docs/pages/components/radio-group.md
@@ -14,8 +14,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -41,8 +41,8 @@ Add descriptive help text to a radio group with the `help-text` attribute. For h
 ```
 
 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
@@ -66,8 +66,8 @@ const App = () => (
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -91,8 +91,8 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t
 ```
 
 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -127,8 +127,8 @@ The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-bu
 
 ```jsx react
 import { useState } from 'react';
-import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => {
   const [size, setSize] = useState('medium');
@@ -182,10 +182,10 @@ Setting the `required` attribute to make selecting an option mandatory. If a val
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 const App = () => {
   function handleSubmit(event) {
     event.preventDefault();
@@ -255,10 +255,10 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
 
 ```jsx:react
 import { useEffect, useRef } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 const App = () => {
   const radioGroup = useRef(null);
   const errorMessage = 'You must choose this option';
diff --git a/docs/pages/components/radio.md b/docs/pages/components/radio.md
index 03dcb7fd..62ff53dd 100644
--- a/docs/pages/components/radio.md
+++ b/docs/pages/components/radio.md
@@ -47,8 +47,8 @@ To set the initial value and checked state, use the `value` attribute on the con
 ```
 
 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="3">
@@ -72,8 +72,8 @@ Use the `disabled` attribute to disable a radio.
 ```
 
 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -115,7 +115,7 @@ Add the `size` attribute to the [Radio Group](/components/radio-group) to change
 ```
 
 ```jsx react
-import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
+import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
 
 const App = () => (
   <>
diff --git a/docs/pages/components/range.md b/docs/pages/components/range.md
index 6584c3fe..8bf86a5f 100644
--- a/docs/pages/components/range.md
+++ b/docs/pages/components/range.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const App = () => <SlRange />;
 ```
@@ -30,7 +30,7 @@ Use the `label` attribute to give the range an accessible label. For labels that
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const App = () => <SlRange label="Volume" min={0} max={100} />;
 ```
@@ -44,7 +44,7 @@ Add descriptive help text to a range with the `help-text` attribute. For help te
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const App = () => <SlRange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;
 ```
@@ -58,7 +58,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const App = () => <SlRange min={0} max={10} step={1} />;
 ```
@@ -72,7 +72,7 @@ Use the `disabled` attribute to disable a slider.
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const App = () => <SlRange disabled />;
 ```
@@ -86,7 +86,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const App = () => <SlRange tooltip="bottom" />;
 ```
@@ -100,7 +100,7 @@ To disable the tooltip, set `tooltip` to `none`.
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const App = () => <SlRange tooltip="none" />;
 ```
@@ -121,7 +121,7 @@ You can customize the active and inactive portions of the track using the `--tra
 {% raw %}
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const App = () => (
   <SlRange
@@ -154,7 +154,7 @@ You can customize the initial offset of the active track using the `--track-acti
 {% raw %}
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const App = () => (
   <SlRange
@@ -185,7 +185,7 @@ You can change the tooltip's content by setting the `tooltipFormatter` property
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
+import SlRange from '@shoelace-style/shoelace/dist/react/range';
 
 const App = () => <SlRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
 ```
diff --git a/docs/pages/components/rating.md b/docs/pages/components/rating.md
index 7c7bfe4f..fac6a6d2 100644
--- a/docs/pages/components/rating.md
+++ b/docs/pages/components/rating.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 const App = () => <SlRating label="Rating" />;
 ```
@@ -26,7 +26,7 @@ Ratings are commonly identified contextually, so labels aren't displayed. Howeve
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 const App = () => <SlRating label="Rate this component" />;
 ```
@@ -40,7 +40,7 @@ Ratings are 0-5 by default. To change the maximum possible value, use the `max`
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 const App = () => <SlRating label="Rating" max={3} />;
 ```
@@ -54,7 +54,7 @@ Use the `precision` attribute to let users select fractional ratings.
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 const App = () => <SlRating label="Rating" precision={0.5} value={2.5} />;
 ```
@@ -70,7 +70,7 @@ Set the `--symbol-size` custom property to adjust the size.
 {% raw %}
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 const App = () => <SlRating label="Rating" style={{ '--symbol-size': '2rem' }} />;
 ```
@@ -86,7 +86,7 @@ Use the `readonly` attribute to display a rating that users can't change.
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 const App = () => <SlRating label="Rating" readonly value={3} />;
 ```
@@ -100,7 +100,7 @@ Use the `disable` attribute to disable the rating.
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 const App = () => <SlRating label="Rating" disabled value={3} />;
 ```
@@ -152,7 +152,7 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
 
 ```jsx:react
 import { useState } from 'react';
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
 const css = `
@@ -214,7 +214,7 @@ You can provide custom icons by passing a function to the `getSymbol` property.
 {% raw %}
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 const App = () => (
   <SlRating
@@ -245,7 +245,7 @@ You can also use the `getSymbol` property to render different icons based on val
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/rating';
 
 function getSymbol(value) {
   const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
diff --git a/docs/pages/components/relative-time.md b/docs/pages/components/relative-time.md
index 4ece7534..f8dcea99 100644
--- a/docs/pages/components/relative-time.md
+++ b/docs/pages/components/relative-time.md
@@ -13,7 +13,7 @@ Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https:/
 ```
 
 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
+import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
 
 const App = () => <SlRelativeTime date="2020-07-15T09:17:00-04:00" />;
 ```
@@ -44,7 +44,7 @@ Use the `sync` attribute to update the displayed value automatically as time pas
 ```
 
 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
+import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
 
 const date = new Date(new Date().getTime() - 60000);
 
@@ -62,7 +62,7 @@ You can change how the time is displayed using the `format` attribute. Note that
 ```
 
 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
+import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
 
 const App = () => (
   <>
@@ -88,7 +88,7 @@ Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></sl-relat
 ```
 
 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
+import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
 
 const App = () => (
   <>
diff --git a/docs/pages/components/resize-observer.md b/docs/pages/components/resize-observer.md
index f22431e0..593ff0a0 100644
--- a/docs/pages/components/resize-observer.md
+++ b/docs/pages/components/resize-observer.md
@@ -36,7 +36,7 @@ The resize observer will report changes to the dimensions of the elements it wra
 ```
 
 ```jsx:react
-import SlResizeObserver from '@shoelace-style/shoelace/dist/react/sl-resize-observer';
+import SlResizeObserver from '@shoelace-style/shoelace/dist/react/resize-observer';
 
 const css = `
   .resize-observer-overview div {
diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md
index 5e66276b..90d537b1 100644
--- a/docs/pages/components/select.md
+++ b/docs/pages/components/select.md
@@ -17,8 +17,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect>
@@ -51,8 +51,8 @@ Use the `label` attribute to give the select an accessible label. For labels tha
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect label="Select one">
@@ -76,8 +76,8 @@ Add descriptive help text to a select with the `help-text` attribute. For help t
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect label="Experience" help-text="Please tell us your skill level.">
@@ -101,8 +101,8 @@ Use the `placeholder` attribute to add a placeholder.
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect placeholder="Select one">
@@ -126,8 +126,8 @@ Use the `clearable` attribute to make the control clearable. The clear button on
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect placeholder="Clearable" clearable>
@@ -151,8 +151,8 @@ Add the `filled` attribute to draw a filled select.
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect filled>
@@ -176,8 +176,8 @@ Use the `pill` attribute to give selects rounded edges.
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect pill>
@@ -201,8 +201,8 @@ Use the `disabled` attribute to disable a select.
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect placeholder="Disabled" disabled>
@@ -229,8 +229,8 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect label="Select a Few" value="option-1 option-2 option-3" multiple clearable>
@@ -262,9 +262,9 @@ Use the `value` attribute to set the initial selection. When using `multiple`, u
 ```
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect value="option-1 option-2" multiple clearable>
@@ -294,8 +294,8 @@ Use `<sl-divider>` to group listbox items visually. You can also use `<small>` t
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect>
@@ -338,8 +338,8 @@ Use the `size` attribute to change a select's size. Note that size does not appl
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <>
@@ -423,9 +423,9 @@ Use the `prefix` slot to prepend an icon to the control.
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <>
diff --git a/docs/pages/components/skeleton.md b/docs/pages/components/skeleton.md
index c92236fc..93a39ec6 100644
--- a/docs/pages/components/skeleton.md
+++ b/docs/pages/components/skeleton.md
@@ -56,7 +56,7 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi
 ```
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
 
 const css = `
   .skeleton-overview header {
@@ -139,7 +139,7 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s
 ```
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
 
 const css = `
   .skeleton-effects {
@@ -200,7 +200,7 @@ Use multiple skeletons and some clever styles to simulate paragraphs.
 ```
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
 
 const css = `
   .skeleton-paragraphs sl-skeleton {
@@ -265,7 +265,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
 ```
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
 
 const css = `
   .skeleton-avatars sl-skeleton {
@@ -360,7 +360,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
 ```
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
 
 const css = `
   .skeleton-shapes sl-skeleton {
@@ -423,7 +423,7 @@ Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's
 {% raw %}
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
 
 const css = `
   .skeleton-avatars sl-skeleton {
diff --git a/docs/pages/components/spinner.md b/docs/pages/components/spinner.md
index bded59fd..e92c98b0 100644
--- a/docs/pages/components/spinner.md
+++ b/docs/pages/components/spinner.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
+import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
 
 const App = () => <SlSpinner />;
 ```
@@ -30,7 +30,7 @@ Spinners are sized based on the current font size. To change their size, set the
 {% raw %}
 
 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
+import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
 
 const App = () => (
   <>
@@ -54,7 +54,7 @@ The width of the spinner's track can be changed by setting the `--track-width` c
 {% raw %}
 
 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
+import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
 
 const App = () => (
   <SlSpinner
@@ -79,7 +79,7 @@ The spinner's colors can be changed by setting the `--indicator-color` and `--tr
 {% raw %}
 
 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
+import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
 
 const App = () => (
   <SlSpinner
diff --git a/docs/pages/components/split-panel.md b/docs/pages/components/split-panel.md
index 5633f715..c9063f8e 100644
--- a/docs/pages/components/split-panel.md
+++ b/docs/pages/components/split-panel.md
@@ -25,7 +25,7 @@ layout: component
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel>
@@ -106,7 +106,7 @@ To set the initial position in pixels instead of a percentage, use the `position
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel position="200">
@@ -164,7 +164,7 @@ Add the `vertical` attribute to render the split panel in a vertical orientation
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel vertical style={{ height: '400px' }}>
@@ -252,7 +252,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
 
 const css = `
   .split-panel-snapping {
@@ -344,7 +344,7 @@ Add the `disabled` attribute to prevent the divider from being repositioned.
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel disabled>
@@ -421,9 +421,9 @@ Try resizing the example below with each option and notice how the panels respon
 
 ```jsx:react
 import { useState } from 'react';
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const App = () => {
   const [primary, setPrimary] = useState('');
@@ -500,7 +500,7 @@ This examples demonstrates how you can ensure both panels are at least 150px usi
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}>
@@ -568,7 +568,7 @@ Create complex layouts that can be repositioned independently by nesting split p
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel>
@@ -643,8 +643,8 @@ You can target the `divider` part to apply CSS properties to the divider. To add
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <SlSplitPanel style={{ '--divider-width': '20px' }}>
@@ -731,8 +731,8 @@ Here's a more elaborate example that changes the divider's color and width and a
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const css = `
   .split-panel-divider sl-split-panel {
diff --git a/docs/pages/components/switch.md b/docs/pages/components/switch.md
index 6839dee6..31630c06 100644
--- a/docs/pages/components/switch.md
+++ b/docs/pages/components/switch.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const App = () => <SlSwitch>Switch</SlSwitch>;
 ```
@@ -30,7 +30,7 @@ Use the `checked` attribute to activate the switch.
 ```
 
 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const App = () => <SlSwitch checked>Checked</SlSwitch>;
 ```
@@ -44,7 +44,7 @@ Use the `disabled` attribute to disable the switch.
 ```
 
 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const App = () => <SlSwitch disabled>Disabled</SlSwitch>;
 ```
@@ -62,7 +62,7 @@ Use the `size` attribute to change a switch's size.
 ```
 
 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const App = () => (
   <>
@@ -86,7 +86,7 @@ Use the available custom properties to change how the switch is styled.
 {% raw %}
 
 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const App = () => (
   <SlSwitch
diff --git a/docs/pages/components/tab-group.md b/docs/pages/components/tab-group.md
index c79572a3..f85b27b7 100644
--- a/docs/pages/components/tab-group.md
+++ b/docs/pages/components/tab-group.md
@@ -22,9 +22,9 @@ Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
+import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup>
@@ -70,9 +70,9 @@ Tabs can be shown on the bottom by setting `placement` to `bottom`.
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
+import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup placement="bottom">
@@ -116,9 +116,9 @@ Tabs can be shown on the starting side by setting `placement` to `start`.
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
+import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup placement="start">
@@ -162,9 +162,9 @@ Tabs can be shown on the ending side by setting `placement` to `end`.
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
+import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup placement="end">
@@ -226,9 +226,9 @@ Add the `closable` attribute to a tab to show a close button. This example shows
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
+import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
 
 const App = () => {
   function handleClose(event) {
@@ -320,9 +320,9 @@ When there are more tabs than horizontal space allows, the nav will be scrollabl
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
+import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup>
@@ -430,9 +430,9 @@ When focused, keyboard users can press [[Left]] or [[Right]] to select the desir
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
+import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup activation="manual">
diff --git a/docs/pages/components/tab-panel.md b/docs/pages/components/tab-panel.md
index c5849b73..93bcf27f 100644
--- a/docs/pages/components/tab-panel.md
+++ b/docs/pages/components/tab-panel.md
@@ -20,9 +20,9 @@ layout: component
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
+import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup>
diff --git a/docs/pages/components/tab.md b/docs/pages/components/tab.md
index 4789d09b..0c04e0ce 100644
--- a/docs/pages/components/tab.md
+++ b/docs/pages/components/tab.md
@@ -13,7 +13,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
+import SlTab from '@shoelace-style/shoelace/dist/react/tab';
 
 const App = () => (
   <>
diff --git a/docs/pages/components/tag.md b/docs/pages/components/tag.md
index d05bf910..4339ff58 100644
--- a/docs/pages/components/tag.md
+++ b/docs/pages/components/tag.md
@@ -14,7 +14,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
+import SlTag from '@shoelace-style/shoelace/dist/react/tag';
 
 const App = () => (
   <>
@@ -40,7 +40,7 @@ Use the `size` attribute to change a tab's size.
 ```
 
 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
+import SlTag from '@shoelace-style/shoelace/dist/react/tag';
 
 const App = () => (
   <>
@@ -62,7 +62,7 @@ Use the `pill` attribute to give tabs rounded edges.
 ```
 
 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
+import SlTag from '@shoelace-style/shoelace/dist/react/tag';
 
 const App = () => (
   <>
@@ -108,7 +108,7 @@ Use the `removable` attribute to add a remove button to the tag.
 ```
 
 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
+import SlTag from '@shoelace-style/shoelace/dist/react/tag';
 
 const css = `
   .tags-removable sl-tag {
diff --git a/docs/pages/components/textarea.md b/docs/pages/components/textarea.md
index 850a76b7..778660dd 100644
--- a/docs/pages/components/textarea.md
+++ b/docs/pages/components/textarea.md
@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
+import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
 
 const App = () => <SlTextarea />;
 ```
@@ -30,7 +30,7 @@ Use the `label` attribute to give the textarea an accessible label. For labels t
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
+import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
 
 const App = () => <SlTextarea label="Comments" />;
 ```
@@ -44,7 +44,7 @@ Add descriptive help text to a textarea with the `help-text` attribute. For help
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
+import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
 
 const App = () => <SlTextarea label="Feedback" help-text="Please tell us what you think." />;
 ```
@@ -58,7 +58,7 @@ Use the `rows` attribute to change the number of text rows that get shown.
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
+import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
 
 const App = () => <SlTextarea rows={2} />;
 ```
@@ -72,7 +72,7 @@ Use the `placeholder` attribute to add a placeholder.
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
+import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
 
 const App = () => <SlTextarea placeholder="Type something" />;
 ```
@@ -86,7 +86,7 @@ Add the `filled` attribute to draw a filled textarea.
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
+import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
 
 const App = () => <SlTextarea placeholder="Type something" filled />;
 ```
@@ -100,7 +100,7 @@ Use the `disabled` attribute to disable a textarea.
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
+import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
 
 const App = () => <SlTextarea placeholder="Textarea" disabled />;
 ```
@@ -118,7 +118,7 @@ Use the `size` attribute to change a textarea's size.
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
+import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
 
 const App = () => (
   <>
@@ -140,7 +140,7 @@ By default, textareas can be resized vertically by the user. To prevent resizing
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
+import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
 
 const App = () => <SlTextarea resize="none" />;
 ```
@@ -154,7 +154,7 @@ Textareas will automatically resize to expand to fit their content when `resize`
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
+import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
 
 const App = () => <SlTextarea resize="auto" />;
 ```
diff --git a/docs/pages/components/tooltip.md b/docs/pages/components/tooltip.md
index abd22d8f..6d0177b4 100644
--- a/docs/pages/components/tooltip.md
+++ b/docs/pages/components/tooltip.md
@@ -16,8 +16,8 @@ Tooltips use `display: contents` so they won't interfere with how elements are p
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const App = () => (
   <SlTooltip content="This is a tooltip">
@@ -126,8 +126,8 @@ Use the `placement` attribute to set the preferred placement of the tooltip.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const css = `
   .tooltip-placement-example {
@@ -237,8 +237,8 @@ Set the `trigger` attribute to `click` to toggle the tooltip on click instead of
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const App = () => (
   <SlTooltip content="Click again to dismiss" trigger="click">
@@ -270,9 +270,9 @@ Tooltips can be controller programmatically by setting the `trigger` attribute t
 
 ```jsx:react
 import { useState } from 'react';
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -306,8 +306,8 @@ You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow
 {% raw %}
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const App = () => (
   <div style={{ '--sl-tooltip-arrow-size': '0' }}>
@@ -345,8 +345,8 @@ Use the `content` slot to create tooltips with HTML content. Tooltips are design
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const App = () => (
   <SlTooltip>
@@ -372,8 +372,8 @@ Use the `--max-width` custom property to change the width the tooltip can grow t
 {% raw %}
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const App = () => (
   <SlTooltip style={{ '--max-width': '80px' }} content="This tooltip will wrap after only 80 pixels.">
@@ -410,8 +410,8 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto|
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const css = `
   .tooltip-hoist {
diff --git a/docs/pages/components/tree-item.md b/docs/pages/components/tree-item.md
index d4c30bc8..cb50f69b 100644
--- a/docs/pages/components/tree-item.md
+++ b/docs/pages/components/tree-item.md
@@ -20,8 +20,8 @@ layout: component
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
+import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => (
   <SlTree>
@@ -63,8 +63,8 @@ A tree item can contain other tree items. This allows the node to be expanded or
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
+import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => (
   <SlTree>
@@ -104,8 +104,8 @@ Use the `selected` attribute to select a tree item initially.
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
+import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => (
   <SlTree>
@@ -145,8 +145,8 @@ Use the `expanded` attribute to expand a tree item initially.
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
+import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => (
   <SlTree>
diff --git a/docs/pages/components/tree.md b/docs/pages/components/tree.md
index 1e950f3e..65816b8b 100644
--- a/docs/pages/components/tree.md
+++ b/docs/pages/components/tree.md
@@ -37,8 +37,8 @@ layout: component
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
+import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => (
   <SlTree>
@@ -119,8 +119,8 @@ The `selection` attribute lets you change the selection behavior of the tree.
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
+import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => {
   const [selection, setSelection] = useState('single');
@@ -199,8 +199,8 @@ Indent guides can be drawn by setting `--indent-guide-width`. You can also chang
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
+import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => (
   <SlTree class="tree-with-lines" style={{ '--indent-guide-width': '1px' }}>
@@ -268,8 +268,8 @@ If you want to disable this behavior after the first load, simply remove the `la
 ```
 
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
+import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => {
   const [childItems, setChildItems] = useState([]);
@@ -344,8 +344,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
+import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => (
   <SlTree>
@@ -429,9 +429,9 @@ Decorative icons can be used before labels to provide hints for each node.
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
-import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => {
   return (
diff --git a/docs/pages/getting-started/form-controls.md b/docs/pages/getting-started/form-controls.md
index 2574e492..1fccb422 100644
--- a/docs/pages/getting-started/form-controls.md
+++ b/docs/pages/getting-started/form-controls.md
@@ -99,12 +99,12 @@ The form will not be submitted if a required field is incomplete.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
-import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
-import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
 
 const App = () => {
   function handleSubmit(event) {
@@ -165,8 +165,8 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => {
   function handleSubmit(event) {
@@ -217,8 +217,8 @@ Some input types will automatically trigger constraints, such as `email` and `ur
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => {
   function handleSubmit(event) {
@@ -279,8 +279,8 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa
 
 ```jsx:react
 import { useRef, useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => {
   const input = useRef(null);
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 0cc37d33..719fd4c8 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -17,8 +17,10 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Added the `<sl-copy-button>` component [#1473]
 - Fixed a bug in `<sl-dropdown>` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472]
 - Fixed a bug that caused key presses in text fields to be hijacked when used inside `<sl-tree>` [#1492]
+- Fixed an upstream bug that caused React CodePen examples to stop working
 - Improved the behavior of the clear button in `<sl-input>` to prevent the component's width from shifting when toggled [#1496]
 - Improved `<sl-tooltip>` to prevent user selection so the tooltip doesn't get highlighted when dragging selections
+- Moved tag type definitions out of component files and into definition files
 - Removed `sideEffects` key from `package.json`. Update React docs to use cherry-picking. [#1485]
 - Updated Bootstrap Icons to 1.10.5
 
diff --git a/scripts/plop/templates/component/component.hbs b/scripts/plop/templates/component/component.hbs
index 803f4ea8..a5e752c7 100644
--- a/scripts/plop/templates/component/component.hbs
+++ b/scripts/plop/templates/component/component.hbs
@@ -40,9 +40,3 @@ export default class {{ properCase tag }} extends ShoelaceElement {
     return html` <slot></slot> `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    '{{ tag }}': {{ properCase tag }};
-  }
-}
diff --git a/scripts/plop/templates/component/define.hbs b/scripts/plop/templates/component/define.hbs
index 691c41cf..847e6b2c 100644
--- a/scripts/plop/templates/component/define.hbs
+++ b/scripts/plop/templates/component/define.hbs
@@ -1,4 +1,12 @@
 import {{ properCase tag }} from './{{ tagWithoutPrefix tag }}.component.js';
+
 export * from './{{ tagWithoutPrefix tag }}.component.js';
 export default {{ properCase tag }};
+
 {{ properCase tag }}.define('{{ tag }}');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    '{{ tag }}': {{ properCase tag }};
+  }
+}
diff --git a/src/components/alert/alert.component.ts b/src/components/alert/alert.component.ts
index 8a174bcd..5fd0722c 100644
--- a/src/components/alert/alert.component.ts
+++ b/src/components/alert/alert.component.ts
@@ -239,9 +239,3 @@ setDefaultAnimation('alert.hide', {
   ],
   options: { duration: 250, easing: 'ease' }
 });
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-alert': SlAlert;
-  }
-}
diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts
index d51a4e0b..563c2692 100644
--- a/src/components/alert/alert.ts
+++ b/src/components/alert/alert.ts
@@ -1,4 +1,12 @@
 import SlAlert from './alert.component.js';
+
 export * from './alert.component.js';
 export default SlAlert;
+
 SlAlert.define('sl-alert');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-alert': SlAlert;
+  }
+}
diff --git a/src/components/animated-image/animated-image.component.ts b/src/components/animated-image/animated-image.component.ts
index 27ba367a..d301618d 100644
--- a/src/components/animated-image/animated-image.component.ts
+++ b/src/components/animated-image/animated-image.component.ts
@@ -114,9 +114,3 @@ export default class SlAnimatedImage extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-animated-image': SlAnimatedImage;
-  }
-}
diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts
index b53f0e68..d90324ec 100644
--- a/src/components/animated-image/animated-image.ts
+++ b/src/components/animated-image/animated-image.ts
@@ -1,4 +1,12 @@
 import SlAnimatedImage from './animated-image.component.js';
+
 export * from './animated-image.component.js';
 export default SlAnimatedImage;
+
 SlAnimatedImage.define('sl-animated-image');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-animated-image': SlAnimatedImage;
+  }
+}
diff --git a/src/components/animation/animation.component.ts b/src/components/animation/animation.component.ts
index 832cd619..96a954e1 100644
--- a/src/components/animation/animation.component.ts
+++ b/src/components/animation/animation.component.ts
@@ -218,9 +218,3 @@ export default class SlAnimation extends ShoelaceElement {
     return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-animation': SlAnimation;
-  }
-}
diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts
index f1bd3f9a..9711c8a3 100644
--- a/src/components/animation/animation.ts
+++ b/src/components/animation/animation.ts
@@ -1,4 +1,12 @@
 import SlAnimation from './animation.component.js';
+
 export * from './animation.component.js';
 export default SlAnimation;
+
 SlAnimation.define('sl-animation');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-animation': SlAnimation;
+  }
+}
diff --git a/src/components/avatar/avatar.component.ts b/src/components/avatar/avatar.component.ts
index 446f2833..6a37ae5b 100644
--- a/src/components/avatar/avatar.component.ts
+++ b/src/components/avatar/avatar.component.ts
@@ -96,9 +96,3 @@ export default class SlAvatar extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-avatar': SlAvatar;
-  }
-}
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 69b5997a..8355ab46 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -1,4 +1,12 @@
 import SlAvatar from './avatar.component.js';
+
 export * from './avatar.component.js';
 export default SlAvatar;
+
 SlAvatar.define('sl-avatar');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-avatar': SlAvatar;
+  }
+}
diff --git a/src/components/badge/badge.component.ts b/src/components/badge/badge.component.ts
index 5286d8e5..9232bf61 100644
--- a/src/components/badge/badge.component.ts
+++ b/src/components/badge/badge.component.ts
@@ -48,9 +48,3 @@ export default class SlBadge extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-badge': SlBadge;
-  }
-}
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index d3849cd5..7e08b17c 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -1,4 +1,12 @@
 import SlBadge from './badge.component.js';
+
 export * from './badge.component.js';
 export default SlBadge;
+
 SlBadge.define('sl-badge');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-badge': SlBadge;
+  }
+}
diff --git a/src/components/breadcrumb-item/breadcrumb-item.component.ts b/src/components/breadcrumb-item/breadcrumb-item.component.ts
index 781aaffc..53e1a8fe 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.component.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.component.ts
@@ -87,9 +87,3 @@ export default class SlBreadcrumbItem extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-breadcrumb-item': SlBreadcrumbItem;
-  }
-}
diff --git a/src/components/breadcrumb-item/breadcrumb-item.ts b/src/components/breadcrumb-item/breadcrumb-item.ts
index 5be78595..e8210a92 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -1,4 +1,12 @@
 import SlBreadcrumbItem from './breadcrumb-item.component.js';
+
 export * from './breadcrumb-item.component.js';
 export default SlBreadcrumbItem;
+
 SlBreadcrumbItem.define('sl-breadcrumb-item');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-breadcrumb-item': SlBreadcrumbItem;
+  }
+}
diff --git a/src/components/breadcrumb/breadcrumb.component.ts b/src/components/breadcrumb/breadcrumb.component.ts
index 36a06950..fb481aca 100644
--- a/src/components/breadcrumb/breadcrumb.component.ts
+++ b/src/components/breadcrumb/breadcrumb.component.ts
@@ -98,9 +98,3 @@ export default class SlBreadcrumb extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-breadcrumb': SlBreadcrumb;
-  }
-}
diff --git a/src/components/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb.ts
index d838e292..19663bd6 100644
--- a/src/components/breadcrumb/breadcrumb.ts
+++ b/src/components/breadcrumb/breadcrumb.ts
@@ -1,4 +1,12 @@
 import SlBreadcrumb from './breadcrumb.component.js';
+
 export * from './breadcrumb.component.js';
 export default SlBreadcrumb;
+
 SlBreadcrumb.define('sl-breadcrumb');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-breadcrumb': SlBreadcrumb;
+  }
+}
diff --git a/src/components/button-group/button-group.component.ts b/src/components/button-group/button-group.component.ts
index 4fe80f5f..69cd90d9 100644
--- a/src/components/button-group/button-group.component.ts
+++ b/src/components/button-group/button-group.component.ts
@@ -89,9 +89,3 @@ function findButton(el: HTMLElement) {
   // The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor)
   return el.closest(selector) ?? el.querySelector(selector);
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-button-group': SlButtonGroup;
-  }
-}
diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
index e32a901d..99f1eddd 100644
--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@@ -1,4 +1,12 @@
 import SlButtonGroup from './button-group.component.js';
+
 export * from './button-group.component.js';
 export default SlButtonGroup;
+
 SlButtonGroup.define('sl-button-group');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-button-group': SlButtonGroup;
+  }
+}
diff --git a/src/components/button/button.component.ts b/src/components/button/button.component.ts
index 9f100542..2d2ec653 100644
--- a/src/components/button/button.component.ts
+++ b/src/components/button/button.component.ts
@@ -328,9 +328,3 @@ export default class SlButton extends ShoelaceElement implements ShoelaceFormCon
     /* eslint-enable lit/binding-positions */
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-button': SlButton;
-  }
-}
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 0aaf6667..2ccbdf6e 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -1,4 +1,12 @@
 import SlButton from './button.component.js';
+
 export * from './button.component.js';
 export default SlButton;
+
 SlButton.define('sl-button');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-button': SlButton;
+  }
+}
diff --git a/src/components/card/card.component.ts b/src/components/card/card.component.ts
index d88b3a8e..e9071906 100644
--- a/src/components/card/card.component.ts
+++ b/src/components/card/card.component.ts
@@ -51,9 +51,3 @@ export default class SlCard extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-card': SlCard;
-  }
-}
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 1e6cec98..ba603ffb 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -1,4 +1,12 @@
 import SlCard from './card.component.js';
+
 export * from './card.component.js';
 export default SlCard;
+
 SlCard.define('sl-card');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-card': SlCard;
+  }
+}
diff --git a/src/components/carousel-item/carousel-item.component.ts b/src/components/carousel-item/carousel-item.component.ts
index 0d3ce68e..6b9de9eb 100644
--- a/src/components/carousel-item/carousel-item.component.ts
+++ b/src/components/carousel-item/carousel-item.component.ts
@@ -30,9 +30,3 @@ export default class SlCarouselItem extends ShoelaceElement {
     return html` <slot></slot> `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-carousel-item': SlCarouselItem;
-  }
-}
diff --git a/src/components/carousel-item/carousel-item.ts b/src/components/carousel-item/carousel-item.ts
index 75107e37..73b72b4b 100644
--- a/src/components/carousel-item/carousel-item.ts
+++ b/src/components/carousel-item/carousel-item.ts
@@ -1,4 +1,12 @@
 import SlCarouselItem from './carousel-item.component.js';
+
 export * from './carousel-item.component.js';
 export default SlCarouselItem;
+
 SlCarouselItem.define('sl-carousel-item');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-carousel-item': SlCarouselItem;
+  }
+}
diff --git a/src/components/carousel/carousel.component.ts b/src/components/carousel/carousel.component.ts
index 3bfe1032..1f5ae0f6 100644
--- a/src/components/carousel/carousel.component.ts
+++ b/src/components/carousel/carousel.component.ts
@@ -471,9 +471,3 @@ export default class SlCarousel extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-carousel': SlCarousel;
-  }
-}
diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts
index 0979be32..e130fe53 100644
--- a/src/components/carousel/carousel.ts
+++ b/src/components/carousel/carousel.ts
@@ -1,4 +1,12 @@
 import SlCarousel from './carousel.component.js';
+
 export * from './carousel.component.js';
 export default SlCarousel;
+
 SlCarousel.define('sl-carousel');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-carousel': SlCarousel;
+  }
+}
diff --git a/src/components/checkbox/checkbox.component.ts b/src/components/checkbox/checkbox.component.ts
index dc828bbf..bb37a5a4 100644
--- a/src/components/checkbox/checkbox.component.ts
+++ b/src/components/checkbox/checkbox.component.ts
@@ -243,9 +243,3 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-checkbox': SlCheckbox;
-  }
-}
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 15bddf0e..2017470a 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -1,4 +1,12 @@
 import SlCheckbox from './checkbox.component.js';
+
 export * from './checkbox.component.js';
 export default SlCheckbox;
+
 SlCheckbox.define('sl-checkbox');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-checkbox': SlCheckbox;
+  }
+}
diff --git a/src/components/color-picker/color-picker.component.ts b/src/components/color-picker/color-picker.component.ts
index 614385be..084220ea 100644
--- a/src/components/color-picker/color-picker.component.ts
+++ b/src/components/color-picker/color-picker.component.ts
@@ -1065,9 +1065,3 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-color-picker': SlColorPicker;
-  }
-}
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index e346db40..298debe4 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -1,4 +1,12 @@
 import SlColorPicker from './color-picker.component.js';
+
 export * from './color-picker.component.js';
 export default SlColorPicker;
+
 SlColorPicker.define('sl-color-picker');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-color-picker': SlColorPicker;
+  }
+}
diff --git a/src/components/copy-button/copy-button.component.ts b/src/components/copy-button/copy-button.component.ts
index fbd8f450..01fa3925 100644
--- a/src/components/copy-button/copy-button.component.ts
+++ b/src/components/copy-button/copy-button.component.ts
@@ -249,9 +249,3 @@ setDefaultAnimation('copy.out', {
   ],
   options: { duration: 100 }
 });
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-copy-button': SlCopyButton;
-  }
-}
diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts
index 0283a1e8..858fb09e 100644
--- a/src/components/copy-button/copy-button.ts
+++ b/src/components/copy-button/copy-button.ts
@@ -1,4 +1,12 @@
 import SlCopyButton from './copy-button.component.js';
+
 export * from './copy-button.component.js';
 export default SlCopyButton;
+
 SlCopyButton.define('sl-copy-button');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-copy-button': SlCopyButton;
+  }
+}
diff --git a/src/components/details/details.component.ts b/src/components/details/details.component.ts
index 68d06681..8d68ef71 100644
--- a/src/components/details/details.component.ts
+++ b/src/components/details/details.component.ts
@@ -244,9 +244,3 @@ setDefaultAnimation('details.hide', {
   ],
   options: { duration: 250, easing: 'linear' }
 });
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-details': SlDetails;
-  }
-}
diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index ecaf46ad..9a7bcb01 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -1,4 +1,12 @@
 import SlDetails from './details.component.js';
+
 export * from './details.component.js';
 export default SlDetails;
+
 SlDetails.define('sl-details');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-details': SlDetails;
+  }
+}
diff --git a/src/components/dialog/dialog.component.ts b/src/components/dialog/dialog.component.ts
index 805f509a..7e708db1 100644
--- a/src/components/dialog/dialog.component.ts
+++ b/src/components/dialog/dialog.component.ts
@@ -339,9 +339,3 @@ setDefaultAnimation('dialog.overlay.hide', {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
   options: { duration: 250 }
 });
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-dialog': SlDialog;
-  }
-}
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 8eb2926f..e0bac3fd 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -1,4 +1,12 @@
 import SlDialog from './dialog.component.js';
+
 export * from './dialog.component.js';
 export default SlDialog;
+
 SlDialog.define('sl-dialog');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-dialog': SlDialog;
+  }
+}
diff --git a/src/components/divider/divider.component.ts b/src/components/divider/divider.component.ts
index c2f2b410..fad68a03 100644
--- a/src/components/divider/divider.component.ts
+++ b/src/components/divider/divider.component.ts
@@ -30,9 +30,3 @@ export default class SlDivider extends ShoelaceElement {
     this.setAttribute('aria-orientation', this.vertical ? 'vertical' : 'horizontal');
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-divider': SlDivider;
-  }
-}
diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts
index c0f75a95..151af032 100644
--- a/src/components/divider/divider.ts
+++ b/src/components/divider/divider.ts
@@ -1,4 +1,12 @@
 import SlDivider from './divider.component.js';
+
 export * from './divider.component.js';
 export default SlDivider;
+
 SlDivider.define('sl-divider');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-divider': SlDivider;
+  }
+}
diff --git a/src/components/drawer/drawer.component.ts b/src/components/drawer/drawer.component.ts
index 76b3d5f7..6ce9e885 100644
--- a/src/components/drawer/drawer.component.ts
+++ b/src/components/drawer/drawer.component.ts
@@ -459,9 +459,3 @@ setDefaultAnimation('drawer.overlay.hide', {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
   options: { duration: 250 }
 });
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-drawer': SlDrawer;
-  }
-}
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index 3f5dbdc3..59db8a47 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -1,4 +1,12 @@
 import SlDrawer from './drawer.component.js';
+
 export * from './drawer.component.js';
 export default SlDrawer;
+
 SlDrawer.define('sl-drawer');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-drawer': SlDrawer;
+  }
+}
diff --git a/src/components/dropdown/dropdown.component.ts b/src/components/dropdown/dropdown.component.ts
index 76ab4feb..d9ff479e 100644
--- a/src/components/dropdown/dropdown.component.ts
+++ b/src/components/dropdown/dropdown.component.ts
@@ -436,9 +436,3 @@ setDefaultAnimation('dropdown.hide', {
   ],
   options: { duration: 100, easing: 'ease' }
 });
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-dropdown': SlDropdown;
-  }
-}
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 52324372..a831caae 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -1,4 +1,12 @@
 import SlDropdown from './dropdown.component.js';
+
 export * from './dropdown.component.js';
 export default SlDropdown;
+
 SlDropdown.define('sl-dropdown');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-dropdown': SlDropdown;
+  }
+}
diff --git a/src/components/format-bytes/format-bytes.component.ts b/src/components/format-bytes/format-bytes.component.ts
index 2c6a609c..35952b0a 100644
--- a/src/components/format-bytes/format-bytes.component.ts
+++ b/src/components/format-bytes/format-bytes.component.ts
@@ -39,9 +39,3 @@ export default class SlFormatBytes extends ShoelaceElement {
     });
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-format-bytes': SlFormatBytes;
-  }
-}
diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts
index 9bd6c69a..c53973ac 100644
--- a/src/components/format-bytes/format-bytes.ts
+++ b/src/components/format-bytes/format-bytes.ts
@@ -1,4 +1,12 @@
 import SlFormatBytes from './format-bytes.component.js';
+
 export * from './format-bytes.component.js';
 export default SlFormatBytes;
+
 SlFormatBytes.define('sl-format-bytes');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-format-bytes': SlFormatBytes;
+  }
+}
diff --git a/src/components/format-date/format-date.component.ts b/src/components/format-date/format-date.component.ts
index 89b8bf71..7c58ec36 100644
--- a/src/components/format-date/format-date.component.ts
+++ b/src/components/format-date/format-date.component.ts
@@ -80,9 +80,3 @@ export default class SlFormatDate extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-format-date': SlFormatDate;
-  }
-}
diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts
index eac66c6f..8be9b39b 100644
--- a/src/components/format-date/format-date.ts
+++ b/src/components/format-date/format-date.ts
@@ -1,4 +1,12 @@
 import SlFormatDate from './format-date.component.js';
+
 export * from './format-date.component.js';
 export default SlFormatDate;
+
 SlFormatDate.define('sl-format-date');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-format-date': SlFormatDate;
+  }
+}
diff --git a/src/components/format-number/format-number.component.ts b/src/components/format-number/format-number.component.ts
index 3115aa85..84aff8e3 100644
--- a/src/components/format-number/format-number.component.ts
+++ b/src/components/format-number/format-number.component.ts
@@ -59,9 +59,3 @@ export default class SlFormatNumber extends ShoelaceElement {
     });
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-format-number': SlFormatNumber;
-  }
-}
diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts
index 656ba5f1..8d39b7bb 100644
--- a/src/components/format-number/format-number.ts
+++ b/src/components/format-number/format-number.ts
@@ -1,4 +1,12 @@
 import SlFormatNumber from './format-number.component.js';
+
 export * from './format-number.component.js';
 export default SlFormatNumber;
+
 SlFormatNumber.define('sl-format-number');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-format-number': SlFormatNumber;
+  }
+}
diff --git a/src/components/icon-button/icon-button.component.ts b/src/components/icon-button/icon-button.component.ts
index 7c007ed1..26824696 100644
--- a/src/components/icon-button/icon-button.component.ts
+++ b/src/components/icon-button/icon-button.component.ts
@@ -128,9 +128,3 @@ export default class SlIconButton extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-icon-button': SlIconButton;
-  }
-}
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index 6d83c21a..9d4c2eca 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -1,4 +1,12 @@
 import SlIconButton from './icon-button.component.js';
+
 export * from './icon-button.component.js';
 export default SlIconButton;
+
 SlIconButton.define('sl-icon-button');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-icon-button': SlIconButton;
+  }
+}
diff --git a/src/components/icon/icon.component.ts b/src/components/icon/icon.component.ts
index d9b3170d..4f379de9 100644
--- a/src/components/icon/icon.component.ts
+++ b/src/components/icon/icon.component.ts
@@ -181,9 +181,3 @@ export default class SlIcon extends ShoelaceElement {
     return this.svg;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-icon': SlIcon;
-  }
-}
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 626642da..b50404ef 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,4 +1,12 @@
 import SlIcon from './icon.component.js';
+
 export * from './icon.component.js';
 export default SlIcon;
+
 SlIcon.define('sl-icon');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-icon': SlIcon;
+  }
+}
diff --git a/src/components/image-comparer/image-comparer.component.ts b/src/components/image-comparer/image-comparer.component.ts
index 5ce2cb0a..616e6f0a 100644
--- a/src/components/image-comparer/image-comparer.component.ts
+++ b/src/components/image-comparer/image-comparer.component.ts
@@ -151,9 +151,3 @@ export default class SlImageComparer extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-image-comparer': SlImageComparer;
-  }
-}
diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts
index 6202b656..94e0ea3a 100644
--- a/src/components/image-comparer/image-comparer.ts
+++ b/src/components/image-comparer/image-comparer.ts
@@ -1,4 +1,12 @@
 import SlImageComparer from './image-comparer.component.js';
+
 export * from './image-comparer.component.js';
 export default SlImageComparer;
+
 SlImageComparer.define('sl-image-comparer');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-image-comparer': SlImageComparer;
+  }
+}
diff --git a/src/components/include/include.component.ts b/src/components/include/include.component.ts
index a1c7dd78..8cb21468 100644
--- a/src/components/include/include.component.ts
+++ b/src/components/include/include.component.ts
@@ -73,9 +73,3 @@ export default class SlInclude extends ShoelaceElement {
     return html`<slot></slot>`;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-include': SlInclude;
-  }
-}
diff --git a/src/components/include/include.ts b/src/components/include/include.ts
index 196b5b80..adb70b9e 100644
--- a/src/components/include/include.ts
+++ b/src/components/include/include.ts
@@ -1,4 +1,12 @@
 import SlInclude from './include.component.js';
+
 export * from './include.component.js';
 export default SlInclude;
+
 SlInclude.define('sl-include');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-include': SlInclude;
+  }
+}
diff --git a/src/components/input/input.component.ts b/src/components/input/input.component.ts
index 9eca10c5..13f272e0 100644
--- a/src/components/input/input.component.ts
+++ b/src/components/input/input.component.ts
@@ -551,9 +551,3 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-input': SlInput;
-  }
-}
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 2e980454..8a7afa8b 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -1,4 +1,12 @@
 import SlInput from './input.component.js';
+
 export * from './input.component.js';
 export default SlInput;
+
 SlInput.define('sl-input');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-input': SlInput;
+  }
+}
diff --git a/src/components/menu-item/menu-item.component.ts b/src/components/menu-item/menu-item.component.ts
index c2dd9798..32829dfd 100644
--- a/src/components/menu-item/menu-item.component.ts
+++ b/src/components/menu-item/menu-item.component.ts
@@ -130,9 +130,3 @@ export default class SlMenuItem extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-menu-item': SlMenuItem;
-  }
-}
diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
index 9cdea14c..a480e587 100644
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -1,4 +1,12 @@
 import SlMenuItem from './menu-item.component.js';
+
 export * from './menu-item.component.js';
 export default SlMenuItem;
+
 SlMenuItem.define('sl-menu-item');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-menu-item': SlMenuItem;
+  }
+}
diff --git a/src/components/menu-label/menu-label.ts b/src/components/menu-label/menu-label.ts
index 0a2eabb5..81ff1fc7 100644
--- a/src/components/menu-label/menu-label.ts
+++ b/src/components/menu-label/menu-label.ts
@@ -1,4 +1,12 @@
 import SlMenuLabel from './menu-label.component.js';
+
 export * from './menu-label.component.js';
 export default SlMenuLabel;
+
 SlMenuLabel.define('sl-menu-label');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-menu-label': SlMenuLabel;
+  }
+}
diff --git a/src/components/menu/menu.component.ts b/src/components/menu/menu.component.ts
index ca2367a4..e7b79a27 100644
--- a/src/components/menu/menu.component.ts
+++ b/src/components/menu/menu.component.ts
@@ -151,9 +151,3 @@ export default class SlMenu extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-menu': SlMenu;
-  }
-}
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 7702f0b0..a8682f96 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -1,4 +1,12 @@
 import SlMenu from './menu.component.js';
+
 export * from './menu.component.js';
 export default SlMenu;
+
 SlMenu.define('sl-menu');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-menu': SlMenu;
+  }
+}
diff --git a/src/components/mutation-observer/mutation-observer.component.ts b/src/components/mutation-observer/mutation-observer.component.ts
index a51ae883..61b05ce4 100644
--- a/src/components/mutation-observer/mutation-observer.component.ts
+++ b/src/components/mutation-observer/mutation-observer.component.ts
@@ -111,9 +111,3 @@ export default class SlMutationObserver extends ShoelaceElement {
     return html` <slot></slot> `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-mutation-observer': SlMutationObserver;
-  }
-}
diff --git a/src/components/mutation-observer/mutation-observer.ts b/src/components/mutation-observer/mutation-observer.ts
index 150cbc91..9021ae3d 100644
--- a/src/components/mutation-observer/mutation-observer.ts
+++ b/src/components/mutation-observer/mutation-observer.ts
@@ -1,4 +1,12 @@
 import SlMutationObserver from './mutation-observer.component.js';
+
 export * from './mutation-observer.component.js';
 export default SlMutationObserver;
+
 SlMutationObserver.define('sl-mutation-observer');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-mutation-observer': SlMutationObserver;
+  }
+}
diff --git a/src/components/option/option.component.ts b/src/components/option/option.component.ts
index 9b6cf4e4..d92ba406 100644
--- a/src/components/option/option.component.ts
+++ b/src/components/option/option.component.ts
@@ -131,9 +131,3 @@ export default class SlOption extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-option': SlOption;
-  }
-}
diff --git a/src/components/option/option.ts b/src/components/option/option.ts
index 788e2326..d249dee6 100644
--- a/src/components/option/option.ts
+++ b/src/components/option/option.ts
@@ -1,4 +1,12 @@
 import SlOption from './option.component.js';
+
 export * from './option.component.js';
 export default SlOption;
+
 SlOption.define('sl-option');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-option': SlOption;
+  }
+}
diff --git a/src/components/popup/popup.component.ts b/src/components/popup/popup.component.ts
index 365622fe..3ab4c0d1 100644
--- a/src/components/popup/popup.component.ts
+++ b/src/components/popup/popup.component.ts
@@ -471,9 +471,3 @@ export default class SlPopup extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-popup': SlPopup;
-  }
-}
diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts
index 74b6076b..01532d21 100644
--- a/src/components/popup/popup.ts
+++ b/src/components/popup/popup.ts
@@ -1,4 +1,12 @@
 import SlPopup from './popup.component.js';
+
 export * from './popup.component.js';
 export default SlPopup;
+
 SlPopup.define('sl-popup');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-popup': SlPopup;
+  }
+}
diff --git a/src/components/progress-bar/progress-bar.component.ts b/src/components/progress-bar/progress-bar.component.ts
index 693461b6..a580226a 100644
--- a/src/components/progress-bar/progress-bar.component.ts
+++ b/src/components/progress-bar/progress-bar.component.ts
@@ -61,9 +61,3 @@ export default class SlProgressBar extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-progress-bar': SlProgressBar;
-  }
-}
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index 993e38ce..7bf4b56e 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -1,4 +1,12 @@
 import SlProgressBar from './progress-bar.component.js';
+
 export * from './progress-bar.component.js';
 export default SlProgressBar;
+
 SlProgressBar.define('sl-progress-bar');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-progress-bar': SlProgressBar;
+  }
+}
diff --git a/src/components/progress-ring/progress-ring.component.ts b/src/components/progress-ring/progress-ring.component.ts
index b3a118cc..8b3af3e7 100644
--- a/src/components/progress-ring/progress-ring.component.ts
+++ b/src/components/progress-ring/progress-ring.component.ts
@@ -78,9 +78,3 @@ export default class SlProgressRing extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-progress-ring': SlProgressRing;
-  }
-}
diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts
index af7b545c..4cfd548c 100644
--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@@ -1,4 +1,12 @@
 import SlProgressRing from './progress-ring.component.js';
+
 export * from './progress-ring.component.js';
 export default SlProgressRing;
+
 SlProgressRing.define('sl-progress-ring');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-progress-ring': SlProgressRing;
+  }
+}
diff --git a/src/components/qr-code/qr-code.component.ts b/src/components/qr-code/qr-code.component.ts
index c4366852..dc180dd4 100644
--- a/src/components/qr-code/qr-code.component.ts
+++ b/src/components/qr-code/qr-code.component.ts
@@ -80,9 +80,3 @@ export default class SlQrCode extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-qr-code': SlQrCode;
-  }
-}
diff --git a/src/components/qr-code/qr-code.ts b/src/components/qr-code/qr-code.ts
index df396382..4295206d 100644
--- a/src/components/qr-code/qr-code.ts
+++ b/src/components/qr-code/qr-code.ts
@@ -1,4 +1,12 @@
 import SlQrCode from './qr-code.component.js';
+
 export * from './qr-code.component.js';
 export default SlQrCode;
+
 SlQrCode.define('sl-qr-code');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-qr-code': SlQrCode;
+  }
+}
diff --git a/src/components/radio-button/radio-button.component.ts b/src/components/radio-button/radio-button.component.ts
index ac3167a9..bfc1a65e 100644
--- a/src/components/radio-button/radio-button.component.ts
+++ b/src/components/radio-button/radio-button.component.ts
@@ -137,9 +137,3 @@ export default class SlRadioButton extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-radio-button': SlRadioButton;
-  }
-}
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
index 93f82fe7..c158f25e 100644
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -1,4 +1,12 @@
 import SlRadioButton from './radio-button.component.js';
+
 export * from './radio-button.component.js';
 export default SlRadioButton;
+
 SlRadioButton.define('sl-radio-button');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-radio-button': SlRadioButton;
+  }
+}
diff --git a/src/components/radio-group/radio-group.component.ts b/src/components/radio-group/radio-group.component.ts
index 5f6afb31..96fea508 100644
--- a/src/components/radio-group/radio-group.component.ts
+++ b/src/components/radio-group/radio-group.component.ts
@@ -398,9 +398,3 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
     /* eslint-enable lit-a11y/click-events-have-key-events */
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-radio-group': SlRadioGroup;
-  }
-}
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 37aea9d3..6e8c4d5a 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -1,4 +1,12 @@
 import SlRadioGroup from './radio-group.component.js';
+
 export * from './radio-group.component.js';
 export default SlRadioGroup;
+
 SlRadioGroup.define('sl-radio-group');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-radio-group': SlRadioGroup;
+  }
+}
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index ff0918c3..774ef728 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -1,4 +1,12 @@
 import SlRadio from './radio.component.js';
+
 export * from './radio.component.js';
 export default SlRadio;
+
 SlRadio.define('sl-radio');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-radio': SlRadio;
+  }
+}
diff --git a/src/components/range/range.component.ts b/src/components/range/range.component.ts
index 40cbe998..09290f4f 100644
--- a/src/components/range/range.component.ts
+++ b/src/components/range/range.component.ts
@@ -354,9 +354,3 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-range': SlRange;
-  }
-}
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index e48cbff9..782c9a68 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -1,4 +1,12 @@
 import SlRange from './range.component.js';
+
 export * from './range.component.js';
 export default SlRange;
+
 SlRange.define('sl-range');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-range': SlRange;
+  }
+}
diff --git a/src/components/rating/rating.component.ts b/src/components/rating/rating.component.ts
index ba981ce2..b65bcafa 100644
--- a/src/components/rating/rating.component.ts
+++ b/src/components/rating/rating.component.ts
@@ -307,9 +307,3 @@ export default class SlRating extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-rating': SlRating;
-  }
-}
diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index f71198df..9c9fba7a 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -1,4 +1,12 @@
 import SlRating from './rating.component.js';
+
 export * from './rating.component.js';
 export default SlRating;
+
 SlRating.define('sl-rating');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-rating': SlRating;
+  }
+}
diff --git a/src/components/relative-time/relative-time.component.ts b/src/components/relative-time/relative-time.component.ts
index 315e8439..7ce57956 100644
--- a/src/components/relative-time/relative-time.component.ts
+++ b/src/components/relative-time/relative-time.component.ts
@@ -119,9 +119,3 @@ function getTimeUntilNextUnit(unit: 'second' | 'minute' | 'hour' | 'day') {
   const value = units[unit];
   return value - (Date.now() % value);
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-relative-time': SlRelativeTime;
-  }
-}
diff --git a/src/components/relative-time/relative-time.ts b/src/components/relative-time/relative-time.ts
index 16a024b9..814cb812 100644
--- a/src/components/relative-time/relative-time.ts
+++ b/src/components/relative-time/relative-time.ts
@@ -1,4 +1,12 @@
 import SlRelativeTime from './relative-time.component.js';
+
 export * from './relative-time.component.js';
 export default SlRelativeTime;
+
 SlRelativeTime.define('sl-relative-time');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-relative-time': SlRelativeTime;
+  }
+}
diff --git a/src/components/resize-observer/resize-observer.ts b/src/components/resize-observer/resize-observer.ts
index 95a85e23..1aeddddb 100644
--- a/src/components/resize-observer/resize-observer.ts
+++ b/src/components/resize-observer/resize-observer.ts
@@ -1,4 +1,12 @@
 import SlResizeObserver from './resize-observer.component.js';
+
 export * from './resize-observer.component.js';
 export default SlResizeObserver;
+
 SlResizeObserver.define('sl-resize-observer');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-resize-observer': SlResizeObserver;
+  }
+}
diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts
index 94b50374..54d80985 100644
--- a/src/components/select/select.component.ts
+++ b/src/components/select/select.component.ts
@@ -867,9 +867,3 @@ setDefaultAnimation('select.hide', {
   ],
   options: { duration: 100, easing: 'ease' }
 });
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-select': SlSelect;
-  }
-}
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index ec840e3d..591162bd 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -1,4 +1,12 @@
 import SlSelect from './select.component.js';
+
 export * from './select.component.js';
 export default SlSelect;
+
 SlSelect.define('sl-select');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-select': SlSelect;
+  }
+}
diff --git a/src/components/skeleton/skeleton.component.ts b/src/components/skeleton/skeleton.component.ts
index 0813212c..ecee34a5 100644
--- a/src/components/skeleton/skeleton.component.ts
+++ b/src/components/skeleton/skeleton.component.ts
@@ -39,9 +39,3 @@ export default class SlSkeleton extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-skeleton': SlSkeleton;
-  }
-}
diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts
index 2a4b90cd..a51260a9 100644
--- a/src/components/skeleton/skeleton.ts
+++ b/src/components/skeleton/skeleton.ts
@@ -1,4 +1,12 @@
 import SlSkeleton from './skeleton.component.js';
+
 export * from './skeleton.component.js';
 export default SlSkeleton;
+
 SlSkeleton.define('sl-skeleton');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-skeleton': SlSkeleton;
+  }
+}
diff --git a/src/components/spinner/spinner.component.ts b/src/components/spinner/spinner.component.ts
index d9868632..bd38aaad 100644
--- a/src/components/spinner/spinner.component.ts
+++ b/src/components/spinner/spinner.component.ts
@@ -31,9 +31,3 @@ export default class SlSpinner extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-spinner': SlSpinner;
-  }
-}
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index f38b25d5..dcfb584d 100644
--- a/src/components/spinner/spinner.ts
+++ b/src/components/spinner/spinner.ts
@@ -1,4 +1,12 @@
 import SlSpinner from './spinner.component.js';
+
 export * from './spinner.component.js';
 export default SlSpinner;
+
 SlSpinner.define('sl-spinner');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-spinner': SlSpinner;
+  }
+}
diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts
index a3248810..61722dcb 100644
--- a/src/components/split-panel/split-panel.ts
+++ b/src/components/split-panel/split-panel.ts
@@ -1,4 +1,12 @@
 import SlSplitPanel from './split-panel.component.js';
+
 export * from './split-panel.component.js';
 export default SlSplitPanel;
+
 SlSplitPanel.define('sl-split-panel');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-split-panel': SlSplitPanel;
+  }
+}
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index 48aed413..691a7d8b 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -1,4 +1,12 @@
 import SlSwitch from './switch.component.js';
+
 export * from './switch.component.js';
 export default SlSwitch;
+
 SlSwitch.define('sl-switch');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-switch': SlSwitch;
+  }
+}
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 467e033c..d1844cc9 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -1,4 +1,12 @@
 import SlTabGroup from './tab-group.component.js';
+
 export * from './tab-group.component.js';
 export default SlTabGroup;
+
 SlTabGroup.define('sl-tab-group');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-tab-group': SlTabGroup;
+  }
+}
diff --git a/src/components/tab-panel/tab-panel.component.ts b/src/components/tab-panel/tab-panel.component.ts
index 9dfed51d..599f7529 100644
--- a/src/components/tab-panel/tab-panel.component.ts
+++ b/src/components/tab-panel/tab-panel.component.ts
@@ -55,9 +55,3 @@ export default class SlTabPanel extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-tab-panel': SlTabPanel;
-  }
-}
diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts
index f997fa0f..bdc87a08 100644
--- a/src/components/tab-panel/tab-panel.ts
+++ b/src/components/tab-panel/tab-panel.ts
@@ -1,4 +1,12 @@
 import SlTabPanel from './tab-panel.component.js';
+
 export * from './tab-panel.component.js';
 export default SlTabPanel;
+
 SlTabPanel.define('sl-tab-panel');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-tab-panel': SlTabPanel;
+  }
+}
diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts
index 76a59c9c..d3732817 100644
--- a/src/components/tab/tab.ts
+++ b/src/components/tab/tab.ts
@@ -1,4 +1,12 @@
 import SlTab from './tab.component.js';
+
 export * from './tab.component.js';
 export default SlTab;
+
 SlTab.define('sl-tab');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-tab': SlTab;
+  }
+}
diff --git a/src/components/tag/tag.component.ts b/src/components/tag/tag.component.ts
index c355664d..86f8ee05 100644
--- a/src/components/tag/tag.component.ts
+++ b/src/components/tag/tag.component.ts
@@ -91,9 +91,3 @@ export default class SlTag extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-tag': SlTag;
-  }
-}
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 197e9a98..396f6a7b 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -1,4 +1,12 @@
 import SlTag from './tag.component.js';
+
 export * from './tag.component.js';
 export default SlTag;
+
 SlTag.define('sl-tag');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-tag': SlTag;
+  }
+}
diff --git a/src/components/textarea/textarea.component.ts b/src/components/textarea/textarea.component.ts
index bb4058cf..6a4fe05d 100644
--- a/src/components/textarea/textarea.component.ts
+++ b/src/components/textarea/textarea.component.ts
@@ -383,9 +383,3 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-textarea': SlTextarea;
-  }
-}
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 6be43a32..0d2371c2 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -1,4 +1,12 @@
 import SlTextarea from './textarea.component.js';
+
 export * from './textarea.component.js';
 export default SlTextarea;
+
 SlTextarea.define('sl-textarea');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-textarea': SlTextarea;
+  }
+}
diff --git a/src/components/tooltip/tooltip.component.ts b/src/components/tooltip/tooltip.component.ts
index 4341f344..0ef0afe0 100644
--- a/src/components/tooltip/tooltip.component.ts
+++ b/src/components/tooltip/tooltip.component.ts
@@ -291,9 +291,3 @@ setDefaultAnimation('tooltip.hide', {
   ],
   options: { duration: 150, easing: 'ease' }
 });
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-tooltip': SlTooltip;
-  }
-}
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 587b41ec..2e19c43f 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -1,4 +1,12 @@
 import SlTooltip from './tooltip.component.js';
+
 export * from './tooltip.component.js';
 export default SlTooltip;
+
 SlTooltip.define('sl-tooltip');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-tooltip': SlTooltip;
+  }
+}
diff --git a/src/components/tree-item/tree-item.component.ts b/src/components/tree-item/tree-item.component.ts
index 2fed06ce..ca471bad 100644
--- a/src/components/tree-item/tree-item.component.ts
+++ b/src/components/tree-item/tree-item.component.ts
@@ -315,9 +315,3 @@ setDefaultAnimation('tree-item.collapse', {
   ],
   options: { duration: 200, easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }
 });
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-tree-item': SlTreeItem;
-  }
-}
diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts
index 2baa5aa9..9d74b72e 100644
--- a/src/components/tree-item/tree-item.ts
+++ b/src/components/tree-item/tree-item.ts
@@ -1,4 +1,12 @@
 import SlTreeItem from './tree-item.component.js';
+
 export * from './tree-item.component.js';
 export default SlTreeItem;
+
 SlTreeItem.define('sl-tree-item');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-tree-item': SlTreeItem;
+  }
+}
diff --git a/src/components/tree/tree.component.ts b/src/components/tree/tree.component.ts
index 0efaf8ee..65a41f38 100644
--- a/src/components/tree/tree.component.ts
+++ b/src/components/tree/tree.component.ts
@@ -420,9 +420,3 @@ export default class SlTree extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-tree': SlTree;
-  }
-}
diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts
index 00dfef0e..fa42880f 100644
--- a/src/components/tree/tree.ts
+++ b/src/components/tree/tree.ts
@@ -1,4 +1,12 @@
 import SlTree from './tree.component.js';
+
 export * from './tree.component.js';
 export default SlTree;
+
 SlTree.define('sl-tree');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-tree': SlTree;
+  }
+}
diff --git a/src/components/visually-hidden/visually-hidden.component.ts b/src/components/visually-hidden/visually-hidden.component.ts
index 28e0d464..c93a6d56 100644
--- a/src/components/visually-hidden/visually-hidden.component.ts
+++ b/src/components/visually-hidden/visually-hidden.component.ts
@@ -18,9 +18,3 @@ export default class SlVisuallyHidden extends ShoelaceElement {
     return html` <slot></slot> `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-visually-hidden': SlVisuallyHidden;
-  }
-}
diff --git a/src/components/visually-hidden/visually-hidden.ts b/src/components/visually-hidden/visually-hidden.ts
index 2d2df3e9..feb6d061 100644
--- a/src/components/visually-hidden/visually-hidden.ts
+++ b/src/components/visually-hidden/visually-hidden.ts
@@ -1,4 +1,12 @@
 import SlVisuallyHidden from './visually-hidden.component.js';
+
 export * from './visually-hidden.component.js';
 export default SlVisuallyHidden;
+
 SlVisuallyHidden.define('sl-visually-hidden');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-visually-hidden': SlVisuallyHidden;
+  }
+}