Merge branch 'next' into calendar

* fix: internal logic for tabbable checks slotted elements

* prettier

* add better note for generators

* prettier

* fix tests

* prettier

* prettier

* fix tabbable test for safari

* prettier

* Update src/internal/tabbable.ts

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

* Update src/internal/modal.ts

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

* Update src/internal/tabbable.ts

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

.gitignore

@@ -6,3 +6,4 @@ docs/assets/images/sprite.svg
 node_modules
 src/react
 cdn
+web-types.json

.prettierignore

@@ -7,6 +7,7 @@ docs/search.json
 src/components/icon/icons
 src/react/index.ts
 node_modules
+package.json
 package-lock.json
 tsconfig.json
 cdn

cspell.json

@@ -51,6 +51,7 @@
     "erroneou",
     "errormessage",
     "esbuild",
+    "exportmaps",
     "exportparts",
     "fieldsets",
     "formaction",
@@ -152,12 +153,14 @@
     "tinycolor",
     "transitionend",
     "treeitem",
+    "treeshaking",
     "Triaging",
     "turbolinks",
     "typeof",
     "unbundles",
     "unbundling",
     "unicons",
+    "unsanitized",
     "unsupportive",
     "valpha",
     "valuenow",

custom-elements-manifest.config.js

@@ -1,9 +1,10 @@
-import { generateCustomData } from 'cem-plugin-vs-code-custom-data-generator';
+import * as path from 'path';
+import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
+import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
 import commandLineArgs from 'command-line-args';
 import fs from 'fs';
-import * as path from 'path';
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
@@ -191,9 +192,24 @@ export default {
       }
     },
     // Generate custom VS Code data
-    generateCustomData({
+    customElementVsCodePlugin({
       outdir,
-      cssFileName: null
+      cssFileName: null,
+      referencesTemplate: (_, tag) => [
+        {
+          name: 'Documentation',
+          url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
+        }
+      ]
+    }),
+    customElementJetBrainsPlugin({
+      excludeCss: true,
+      referencesTemplate: (_, tag) => {
+        return {
+          name: 'Documentation',
+          url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
+        };
+      }
     })
   ]
 };

docs/_includes/component.njk

@@ -137,15 +137,17 @@
           <tr>
             <td>
               <code class="nowrap">{{ prop.name }}</code>
-              {% if prop.attribute != prop.name %}
-                <br>
-                <sl-tooltip content="This attribute is different from its property">
-                  <small>
-                    <code class="nowrap">
-                      {{ prop.attribute }}
-                    </code>
-                  </small>
-                </sl-tooltip>
+              {% if prop.attribute | length > 0 %}
+                {% if prop.attribute != prop.name %}
+                  <br>
+                  <sl-tooltip content="This attribute is different from its property">
+                    <small>
+                      <code class="nowrap">
+                        {{ prop.attribute }}
+                      </code>
+                    </small>
+                  </sl-tooltip>
+                {% endif %}
               {% endif %}
             </td>
             <td>
@@ -185,7 +187,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#properties') }}">attributes and properties</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#attributes-and-properties') }}">attributes and properties</a>.</em></p>
   {% endif %}
 
   {# Events #}
@@ -305,7 +307,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#component-parts') }}">customizing CSS parts</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing/#css-parts') }}">customizing CSS parts</a>.</em></p>
   {% endif %}
 
   {# Animations #}
@@ -329,7 +331,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#animations') }}">customizing animations</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing#animations') }}">customizing animations</a>.</em></p>
   {% endif %}
 
   {# Dependencies #}

docs/_utilities/copy-code-buttons.cjs

@@ -1,3 +1,5 @@
+let codeBlockId = 0;
+
 /**
  * Adds copy code buttons to code fields. The provided doc should be a document object provided by JSDOM. The same
  * document will be returned with the appropriate DOM manipulations.
@@ -5,19 +7,14 @@
 module.exports = function (doc) {
   doc.querySelectorAll('pre > code').forEach(code => {
     const pre = code.closest('pre');
-    const button = doc.createElement('button');
-    button.setAttribute('type', 'button');
-    button.classList.add('copy-code-button');
-    button.setAttribute('aria-label', 'Copy');
-    button.innerHTML = `
-      <svg class="copy-code-button__copy-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16" part="svg">
-        <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"></path>
-      </svg>
+    const button = doc.createElement('sl-copy-button');
 
-      <svg class="copy-code-button__copied-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16" part="svg">
-        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
-      </svg>
-    `;
+    if (!code.id) {
+      code.id = `code-block-${++codeBlockId}`;
+    }
+
+    button.classList.add('copy-code-button');
+    button.setAttribute('from', code.id);
 
     pre.append(button);
   });

docs/assets/scripts/docs.js

@@ -163,32 +163,6 @@
   });
 })();
 
-//
-// Copy code buttons
-//
-(() => {
-  document.addEventListener('click', event => {
-    const button = event.target.closest('.copy-code-button');
-    const pre = button?.closest('pre');
-    const code = pre?.querySelector('code');
-    const copyIcon = button?.querySelector('.copy-code-button__copy-icon');
-    const copiedIcon = button?.querySelector('.copy-code-button__copied-icon');
-
-    if (button && code) {
-      navigator.clipboard.writeText(code.innerText);
-      copyIcon.style.display = 'none';
-      copiedIcon.style.display = 'inline';
-      button.classList.add('copy-code-button--copied');
-
-      setTimeout(() => {
-        copyIcon.style.display = 'inline';
-        copiedIcon.style.display = 'none';
-        button.classList.remove('copy-code-button--copied');
-      }, 1000);
-    }
-  });
-})();
-
 //
 // Smooth links
 //

docs/assets/scripts/search.js

@@ -373,4 +373,12 @@
       hide();
     }
   });
+
+  // We're using Turbo, so when a user searches for something, visits a result, and presses the back button, the search
+  // UI will still be visible but not interactive. This removes the search UI when Turbo renders a page so they don't
+  // get trapped.
+  window.addEventListener('turbo:render', () => {
+    document.body.classList.remove('search-visible');
+    document.querySelectorAll('.search__overlay, .search__dialog').forEach(el => el.remove());
+  });
 })();

docs/assets/styles/docs.css

@@ -506,46 +506,39 @@ pre .token.italic {
 
 /* Copy code button */
 .copy-code-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  background: var(--sl-color-neutral-0);
-  border-radius: calc(var(--docs-border-radius) * 0.875);
-  border: solid 1px var(--sl-color-neutral-200);
+  top: 0;
+  right: 0;
+  white-space: normal;
   color: var(--sl-color-neutral-800);
-  text-transform: uppercase;
-  padding: 0.5rem;
-  margin: 0;
-  cursor: pointer;
-  transition: 100ms opacity, 100ms scale;
+  transition: 150ms opacity, 150ms scale;
 }
 
-.copy-code-button svg {
-  width: 1rem;
-  height: 1rem;
+.copy-code-button::part(button) {
+  background-color: var(--sl-color-neutral-50);
+  border-radius: 0 var(--docs-border-radius) 0 var(--docs-border-radius);
+  padding: 0.75rem;
+}
+
+.copy-code-button::part(button):hover {
+  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 3%);
+}
+
+.copy-code-button::part(button):active {
+  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 6%);
 }
 
 pre .copy-code-button {
   opacity: 0;
-  scale: 0.9;
+  scale: 0.75;
 }
 
 pre:hover .copy-code-button,
-.copy-code-button:focus-visible {
+.copy-code-button:focus-within {
   opacity: 1;
   scale: 1;
 }
 
-pre:hover .copy-code-button:hover,
-pre:hover .copy-code-button--copied {
-  background: var(--sl-color-neutral-200);
-  border-color: var(--sl-color-neutral-300);
-  color: var(--sl-color-neutral-900);
-}
-
 /* Callouts */
 .callout {
   position: relative;
@@ -1066,23 +1059,29 @@ html.sidebar-open #menu-toggle {
   /* Hide when not defined to prevent extra wide icon toolbar while loading */
   display: none;
 }
+
 #theme-selector sl-menu {
-  /* Set an initial size to prevent width being initally too small when first opening on small screen width */
+  /* Set an initial size to prevent width being too small when first opening on small screen width */
   width: 140px;
 }
+
 #theme-selector sl-button {
   transition: 250ms scale ease;
 }
+
 #theme-selector sl-button::part(base) {
   color: var(--sl-color-neutral-0);
 }
+
 #theme-selector sl-button::part(label) {
   display: flex;
   padding: 0.5rem;
 }
+
 #theme-selector sl-icon {
   font-size: 1.25rem;
 }
+
 .sl-theme-dark #theme-selector sl-button::part(base) {
   color: var(--sl-color-neutral-1000);
 }

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();

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

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

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

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

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>

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>

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

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 = () => (
   <>

docs/pages/components/calendar.md

@@ -0,0 +1,67 @@
+---
+meta:
+  title: Calendar
+  description: Calendar shows a monthly view of the Gregorian calendar, optionally allowing users to interact with dates.
+layout: component
+---
+
+```html:preview
+<sl-calendar></sl-calendar>
+```
+
+## Examples
+
+### Month & Day Labels
+
+Month and day labels can be customized using the `month-labels` and `day-labels` attributes. Note that month names are localized automatically based on the component's `lang` attribute, falling back to the document language.
+
+```html:preview
+<sl-calendar month-labels="short" day-labels="narrow"></sl-calendar>
+```
+
+### Showing Adjacent Dates
+
+By default, only dates in the target month are shown. You can fill the grid with adjacent dates using the `show-adjacent-dates` attribute.
+
+```html:preview
+<sl-calendar show-adjacent-dates></sl-calendar>
+```
+
+### Date Selection
+
+One or more dates can be selected by setting the `selectedDates` property. An array of dates is accepted and the selection does not have to be continuous.
+
+```html:preview
+<sl-calendar class="calendar-selection"></sl-calendar>
+
+<script>
+  const calendar = document.querySelector('.calendar-selection');
+  const today = new Date();
+
+  // Set the selected date range from the 12-15 of the current month
+  calendar.selectedDates = [
+    new Date(today.getFullYear(), today.getMonth(), 12),
+    new Date(today.getFullYear(), today.getMonth(), 13),
+    new Date(today.getFullYear(), today.getMonth(), 14),
+    new Date(today.getFullYear(), today.getMonth(), 15)
+  ];
+</script>
+```
+
+### With Borders
+
+To add a border, set the `--border-width` custom property. You can further customize the border with `--border-color` and `--border-radius`.
+
+```html:preview
+<sl-calendar style="--border-width: 1px;"></sl-calendar>
+```
+
+### Localizing the Calendar
+
+By default, the calendar will use the document's locale. You can use the `lang` attribute to change this.
+
+```html:preview
+<sl-calendar lang="es"></sl-calendar>
+```
+
+[component-metadata:sl-calendar]

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 {

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>

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 {

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

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" />;
 ```

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 {

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

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

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

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

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}>
@@ -310,6 +310,96 @@ const App = () => (
 );
 ```
 
+### Submenus
+
+To create a submenu, nest an `<sl-menu slot="submenu">` element in a [menu item](/components/menu-item).
+
+```html:preview
+<sl-dropdown>
+  <sl-button slot="trigger" caret>Edit</sl-button>
+
+  <sl-menu style="max-width: 200px;">
+    <sl-menu-item value="undo">Undo</sl-menu-item>
+    <sl-menu-item value="redo">Redo</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item value="cut">Cut</sl-menu-item>
+    <sl-menu-item value="copy">Copy</sl-menu-item>
+    <sl-menu-item value="paste">Paste</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item>
+      Find
+      <sl-menu slot="submenu">
+        <sl-menu-item value="find">Find…</sl-menu-item>
+        <sl-menu-item value="find-previous">Find Next</sl-menu-item>
+        <sl-menu-item value="find-next">Find Previous</sl-menu-item>
+      </sl-menu>
+    </sl-menu-item>
+    <sl-menu-item>
+      Transformations
+      <sl-menu slot="submenu">
+        <sl-menu-item value="uppercase">Make uppercase</sl-menu-item>
+        <sl-menu-item value="lowercase">Make lowercase</sl-menu-item>
+        <sl-menu-item value="capitalize">Capitalize</sl-menu-item>
+      </sl-menu>
+    </sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+```
+
+```jsx:react
+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 css = `
+  .dropdown-hoist {
+    border: solid 2px var(--sl-panel-border-color);
+    padding: var(--sl-spacing-medium);
+    overflow: hidden;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlDropdown>
+      <SlButton slot="trigger" caret>Edit</SlButton>
+
+      <SlMenu style="max-width: 200px;">
+        <SlMenuItem value="undo">Undo</SlMenuItem>
+        <SlMenuItem value="redo">Redo</SlMenuItem>
+        <SlDivider />
+        <SlMenuItem value="cut">Cut</SlMenuItem>
+        <SlMenuItem value="copy">Copy</SlMenuItem>
+        <SlMenuItem value="paste">Paste</SlMenuItem>
+        <SlDivider />
+        <SlMenuItem>
+          Find
+          <SlMenu slot="submenu">
+            <SlMenuItem value="find">Find…</SlMenuItem>
+            <SlMenuItem value="find-previous">Find Next</SlMenuItem>
+            <SlMenuItem value="find-next">Find Previous</SlMenuItem>
+          </SlMenu>
+        </SlMenuItem>
+        <SlMenuItem>
+          Transformations
+          <SlMenu slot="submenu">
+            <SlMenuItem value="uppercase">Make uppercase</SlMenuItem>
+            <SlMenuItem value="lowercase">Make lowercase</SlMenuItem>
+            <SlMenuItem value="capitalize">Capitalize</SlMenuItem>
+          </SlMenu>
+        </SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
+  </>
+);
+```
+
+:::warning
+As a UX best practice, avoid using more than one level of submenu when possible.
+:::
+
 ### Hoisting
 
 Dropdown panels will be clipped if they're inside a container that has `overflow: auto|hidden`. The `hoist` attribute forces the panel to use a fixed positioning strategy, allowing it to break out of the container. In this case, the panel will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
@@ -346,12 +436,11 @@ 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 SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const css = `
   .dropdown-hoist {

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 = () => (
   <>

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 = () => (
   <>

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 = () => (
   <>

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 />;
 ```

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

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

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" />;
 ```

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 = () => (
   <>

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

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

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' }}>
@@ -44,3 +44,112 @@ const App = () => (
 :::tip
 Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you're building navigation, use `<nav>` and `<a>` elements instead.
 :::
+
+## Examples
+
+### In Dropdowns
+
+Menus work really well when used inside [dropdowns](/components/dropdown).
+
+```html:preview
+<sl-dropdown>
+  <sl-button slot="trigger" caret>Edit</sl-button>
+  <sl-menu>
+    <sl-menu-item value="cut">Cut</sl-menu-item>
+    <sl-menu-item value="copy">Copy</sl-menu-item>
+    <sl-menu-item value="paste">Paste</sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+```
+
+```jsx:react
+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 = () => (
+  <SlDropdown>
+    <SlButton slot="trigger" caret>Edit</SlButton>
+    <SlMenu>
+      <SlMenuItem value="cut">Cut</SlMenuItem>
+      <SlMenuItem value="copy">Copy</SlMenuItem>
+      <SlMenuItem value="paste">Paste</SlMenuItem>
+    </SlMenu>
+  </SlDropdown>
+);
+```
+
+### Submenus
+
+To create a submenu, nest an `<sl-menu slot="submenu">` in any [menu item](/components/menu-item).
+
+```html:preview
+<sl-menu style="max-width: 200px;">
+  <sl-menu-item value="undo">Undo</sl-menu-item>
+  <sl-menu-item value="redo">Redo</sl-menu-item>
+  <sl-divider></sl-divider>
+  <sl-menu-item value="cut">Cut</sl-menu-item>
+  <sl-menu-item value="copy">Copy</sl-menu-item>
+  <sl-menu-item value="paste">Paste</sl-menu-item>
+  <sl-divider></sl-divider>
+  <sl-menu-item>
+    Find
+    <sl-menu slot="submenu">
+      <sl-menu-item value="find">Find…</sl-menu-item>
+      <sl-menu-item value="find-previous">Find Next</sl-menu-item>
+      <sl-menu-item value="find-next">Find Previous</sl-menu-item>
+    </sl-menu>
+  </sl-menu-item>
+  <sl-menu-item>
+    Transformations
+    <sl-menu slot="submenu">
+      <sl-menu-item value="uppercase">Make uppercase</sl-menu-item>
+      <sl-menu-item value="lowercase">Make lowercase</sl-menu-item>
+      <sl-menu-item value="capitalize">Capitalize</sl-menu-item>
+    </sl-menu>
+  </sl-menu-item>
+</sl-menu>
+```
+
+{% raw %}
+
+```jsx:react
+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' }}>
+    <SlMenuItem value="undo">Undo</SlMenuItem>
+    <SlMenuItem value="redo">Redo</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem value="cut">Cut</SlMenuItem>
+    <SlMenuItem value="copy">Copy</SlMenuItem>
+    <SlMenuItem value="paste">Paste</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem>
+      Find
+      <SlMenu slot="submenu">
+        <SlMenuItem value="find">Find…</SlMenuItem>
+        <SlMenuItem value="find-previous">Find Next</SlMenuItem>
+        <SlMenuItem value="find-next">Find Previous</SlMenuItem>
+      </SlMenu>
+    </SlMenuItem>
+    <SlMenuItem>
+      Transformations
+      <SlMenu slot="submenu">
+        <SlMenuItem value="uppercase">Make uppercase</SlMenuItem>
+        <SlMenuItem value="lowercase">Make lowercase</SlMenuItem>
+        <SlMenuItem value="capitalize">Capitalize</SlMenuItem>
+      </SlMenu>
+    </SlMenuItem>
+  </SlMenu>
+);
+```
+
+:::warning
+As a UX best practice, avoid using more than one level of submenus when possible.
+:::
+
+{% endraw %}

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 {

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>

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 */

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 />;
 ```

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

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 {

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">

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

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 = () => (
   <>

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}%`} />;
 ```

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

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 = () => (
   <>

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 {

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>
@@ -250,7 +250,9 @@ Note that multi-select options may wrap, causing the control to expand verticall
 
 ### Setting Initial Values
 
-Use the `value` attribute to set the initial selection. When using `multiple`, use space-delimited values to select more than one option.
+Use the `value` attribute to set the initial selection.
+
+When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `<sl-option>` values cannot contain spaces. If you're accessing the `value` _property_ through Javascript, it will be an array.
 
 ```html:preview
 <sl-select value="option-1 option-2" multiple clearable>
@@ -262,9 +264,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 +296,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 +340,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 = () => (
   <>
@@ -381,10 +383,8 @@ The preferred placement of the select's listbox can be set with the `placement`
 ```
 
 ```jsx:react
-import {
-  SlOption,
-  SlSelect
-} from '@shoelace-style/shoelace/dist/react';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';
 
 const App = () => (
   <SlSelect placement="top">
@@ -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 = () => (
   <>
@@ -452,3 +452,53 @@ const App = () => (
   </>
 );
 ```
+
+### Custom Tags
+
+When multiple options can be selected, you can provide custom tags by passing a function to the `getTag` property. Your function can return a string of HTML, a <a href="https://lit.dev/docs/templates/overview/">Lit Template</a>, or an [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). The `getTag()` function will be called for each option. The first argument is an `<sl-option>` element and the second argument is the tag's index (its position in the tag list).
+
+Remember that custom tags are rendered in a shadow root. To style them, you can use the `style` attribute in your template or you can add your own [parts](/getting-started/customizing/#css-parts) and target them with the [`::part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) selector.
+
+```html:preview
+<sl-select
+  placeholder="Select one"
+  value="email phone"
+  multiple
+  clearable
+  class="custom-tag"
+>
+  <sl-option value="email">
+    <sl-icon slot="prefix" name="envelope"></sl-icon>
+    Email
+  </sl-option>
+  <sl-option value="phone">
+    <sl-icon slot="prefix" name="telephone"></sl-icon>
+    Phone
+  </sl-option>
+  <sl-option value="chat">
+    <sl-icon slot="prefix" name="chat-dots"></sl-icon>
+    Chat
+  </sl-option>
+</sl-select>
+
+<script type="module">
+  const select = document.querySelector('.custom-tag');
+
+  select.getTag = (option, index) => {
+    // Use the same icon used in the <sl-option>
+    const name = option.querySelector('sl-icon[slot="prefix"]').name;
+
+    // You can return a string, a Lit Template, or an HTMLElement here
+    return `
+      <sl-tag removable>
+        <sl-icon name="${name}" style="padding-inline-end: .5rem;"></sl-icon>
+        ${option.getTextLabel()}
+      </sl-tag>
+    `;
+  };
+</script>
+```
+
+:::warning
+Be sure you trust the content you are outputting! Passing unsanitized user input to `getTag()` can result in XSS vulnerabilities.
+:::

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 {

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

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 {

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

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">

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>

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 = () => (
   <>

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 {

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" />;
 ```

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 {

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>

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 (

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);
@@ -462,7 +462,7 @@ To disable the browser's error messages, you need to cancel the `sl-invalid` eve
   <sl-button type="reset" variant="default">Reset</sl-button>
 </form>
 
-<script>
+<script type="module">
   const form = document.querySelector('.inline-validation');
   const nameError = document.querySelector('#name-error');
 

docs/pages/getting-started/installation.md

@@ -187,7 +187,7 @@ import '@shoelace-style/shoelace/%NPMDIR%/components/rating/rating.js';
 import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path.js';
 
 // Set the base path to the folder you copied Shoelace's assets to
-setBasePath('/path/to/shoelace/%NPMDIR%
+setBasePath('/path/to/shoelace/%NPMDIR%');
 
 // <sl-button>, <sl-icon>, <sl-input>, and <sl-rating> are ready to use!
 ```

docs/pages/getting-started/usage.md

@@ -210,6 +210,12 @@ Shoelace ships with a file called `vscode.html-custom-data.json` that can be use
 
 If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take affect.
 
+## JetBrains IDEs
+
+If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Shoelace from NPM, the editor will automatically detect the `web-types.json` file from the package and you should immediately see component information in your editor.
+
+If you are installing from the CDN, you can [download a local copy](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace/cdn/web-types.json) and add it to the root of your project.
+
 ### Other Editors
 
 Most popular editors support custom code completion with a bit of configuration. Please [submit a feature request](https://github.com/shoelace-style/shoelace/issues/new/choose) for your editor of choice. PRs are also welcome!

docs/pages/resources/changelog.md

@@ -14,10 +14,31 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
-- Added the `<sl-copy-button>` component [#1473]
+- Fixed a bug in `<sl-switch>` that resulted in improper spacing between the label and the required asterisk [#1540]
+- Updated `@ctrl/tinycolor` to 4.0.1 [#1542]
+
+## 2.8.0
+
+- Added `--isolatedModules` and `--verbatimModuleSyntax` to `tsconfig.json`. For anyone directly importing event types, they no longer provide a default export due to these options being enabled. For people using the `events/event.js` file directly, there is no change.
+- Added support for submenus in `<sl-menu-item>` [#1410]
+- Added the `--submenu-offset` custom property to `<sl-menu-item>` [#1410]
+- Fixed an issue with focus trapping elements like `<sl-dialog>` when wrapped by other elements not checking the assigned elements of `<slot>`s. [#1537]
+- Fixed type issues with the `ref` attribute in React Wrappers. [#1526]
+- Fixed a regression that caused `<sl-radio-button>` to render incorrectly with gaps [#1523]
+- Improved expand/collapse behavior of `<sl-tree>` to work more like users expect [#1521]
+- Improved `<sl-menu-item>` so labels truncate properly instead of getting chopped and overflowing
+- Removed the extra `React.Component` around `@lit-labs/react` wrapper. [#1531]
+- Updated `@lit-labs/react` to v2.0.1. [#1531]
+
+## 2.7.0
+
+- Added the experimental `<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
 

package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "@shoelace-style/shoelace",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@shoelace-style/shoelace",
-      "version": "2.6.0",
+      "version": "2.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ctrl/tinycolor": "^3.5.0",
+        "@ctrl/tinycolor": "^4.0.1",
         "@floating-ui/dom": "^1.2.1",
-        "@lit-labs/react": "^1.1.1",
+        "@lit-labs/react": "^2.0.1",
         "@shoelace-style/animations": "^1.1.0",
         "@shoelace-style/localize": "^3.1.1",
         "composed-offset-position": "^0.0.4",
@@ -32,12 +32,13 @@
         "@web/test-runner-playwright": "^0.9.0",
         "bootstrap-icons": "^1.10.5",
         "browser-sync": "^2.29.3",
-        "cem-plugin-vs-code-custom-data-generator": "^1.4.1",
         "chalk": "^5.2.0",
         "change-case": "^4.1.2",
         "command-line-args": "^5.2.1",
         "comment-parser": "^1.3.1",
         "cspell": "^6.18.1",
+        "custom-element-jet-brains-integration": "^1.1.0",
+        "custom-element-vs-code-integration": "^1.1.0",
         "del": "^7.0.0",
         "download": "^8.0.0",
         "esbuild": "^0.18.2",
@@ -832,11 +833,11 @@
       }
     },
     "node_modules/@ctrl/tinycolor": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
-      "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.0.1.tgz",
+      "integrity": "sha512-dfimuE1mfaqL8P8jyQzdk9yFeFUWCyhjK5VyydXgDtQO0fezr6aWaGauHnlI07BZBIF45gahb0oxJjkUcylDwQ==",
       "engines": {
-        "node": ">=10"
+        "node": ">=14"
       }
     },
     "node_modules/@custom-elements-manifest/analyzer": {
@@ -1473,9 +1474,12 @@
       }
     },
     "node_modules/@lit-labs/react": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.1.1.tgz",
-      "integrity": "sha512-9TC+/ZWb6BJlWCyUr14FKFlaGnyKpeEDorufXozQgke/VoVrslUQNaL7nBmrAWdNrmzx5jWgi8lFmWwrxMjnlA=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.1.tgz",
+      "integrity": "sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==",
+      "peerDependencies": {
+        "@types/react": "17 || 18"
+      }
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
       "version": "1.1.1",
@@ -2269,8 +2273,7 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
-      "dev": true
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
     },
     "node_modules/@types/qs": {
       "version": "6.9.7",
@@ -2288,7 +2291,6 @@
       "version": "18.0.26",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
       "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -2316,8 +2318,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.0",
@@ -4545,15 +4546,6 @@
         "upper-case-first": "^2.0.2"
       }
     },
-    "node_modules/cem-plugin-vs-code-custom-data-generator": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/cem-plugin-vs-code-custom-data-generator/-/cem-plugin-vs-code-custom-data-generator-1.4.1.tgz",
-      "integrity": "sha512-mulzg6I2wJVNKCM9ml4ttxTnGK25kHHdkhX979vbrKwSIIplFnPOgGa0Sj14pQWnfDwbGr6pSbLgBmi4nVHFxA==",
-      "dev": true,
-      "dependencies": {
-        "prettier": "^2.7.1"
-      }
-    },
     "node_modules/chai-a11y-axe": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/chai-a11y-axe/-/chai-a11y-axe-1.4.0.tgz",
@@ -5693,8 +5685,25 @@
     "node_modules/csstype": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-      "dev": true
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+    },
+    "node_modules/custom-element-jet-brains-integration": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.1.0.tgz",
+      "integrity": "sha512-wesa4OEvRQdxNzynk5ugU7ZRy0Ghkoaa6NmRGTqOASIng1hVaE3EKKO3rK11b4Y/pR3HUPIPKs1mRSnRCjHBfg==",
+      "dev": true,
+      "dependencies": {
+        "prettier": "^2.8.0"
+      }
+    },
+    "node_modules/custom-element-vs-code-integration": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/custom-element-vs-code-integration/-/custom-element-vs-code-integration-1.1.0.tgz",
+      "integrity": "sha512-M7f4zQIAzpdZGRcZpWmpONyf8zpiGZCU8U7z7s5q6460deIebLLQP/klTLLcI3XyWoCjUhwDwGJiZz9he8Y2ig==",
+      "dev": true,
+      "dependencies": {
+        "prettier": "^2.7.1"
+      }
     },
     "node_modules/custom-elements-manifest": {
       "version": "1.0.0",
@@ -17904,9 +17913,9 @@
       "dev": true
     },
     "@ctrl/tinycolor": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
-      "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg=="
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.0.1.tgz",
+      "integrity": "sha512-dfimuE1mfaqL8P8jyQzdk9yFeFUWCyhjK5VyydXgDtQO0fezr6aWaGauHnlI07BZBIF45gahb0oxJjkUcylDwQ=="
     },
     "@custom-elements-manifest/analyzer": {
       "version": "0.8.3",
@@ -18281,9 +18290,10 @@
       }
     },
     "@lit-labs/react": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.1.1.tgz",
-      "integrity": "sha512-9TC+/ZWb6BJlWCyUr14FKFlaGnyKpeEDorufXozQgke/VoVrslUQNaL7nBmrAWdNrmzx5jWgi8lFmWwrxMjnlA=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.1.tgz",
+      "integrity": "sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==",
+      "requires": {}
     },
     "@lit-labs/ssr-dom-shim": {
       "version": "1.1.1",
@@ -18988,8 +18998,7 @@
     "@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
-      "dev": true
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
     },
     "@types/qs": {
       "version": "6.9.7",
@@ -19007,7 +19016,6 @@
       "version": "18.0.26",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
       "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -19035,8 +19043,7 @@
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "@types/semver": {
       "version": "7.5.0",
@@ -20621,15 +20628,6 @@
         "upper-case-first": "^2.0.2"
       }
     },
-    "cem-plugin-vs-code-custom-data-generator": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/cem-plugin-vs-code-custom-data-generator/-/cem-plugin-vs-code-custom-data-generator-1.4.1.tgz",
-      "integrity": "sha512-mulzg6I2wJVNKCM9ml4ttxTnGK25kHHdkhX979vbrKwSIIplFnPOgGa0Sj14pQWnfDwbGr6pSbLgBmi4nVHFxA==",
-      "dev": true,
-      "requires": {
-        "prettier": "^2.7.1"
-      }
-    },
     "chai-a11y-axe": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/chai-a11y-axe/-/chai-a11y-axe-1.4.0.tgz",
@@ -21513,8 +21511,25 @@
     "csstype": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-      "dev": true
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+    },
+    "custom-element-jet-brains-integration": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.1.0.tgz",
+      "integrity": "sha512-wesa4OEvRQdxNzynk5ugU7ZRy0Ghkoaa6NmRGTqOASIng1hVaE3EKKO3rK11b4Y/pR3HUPIPKs1mRSnRCjHBfg==",
+      "dev": true,
+      "requires": {
+        "prettier": "^2.8.0"
+      }
+    },
+    "custom-element-vs-code-integration": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/custom-element-vs-code-integration/-/custom-element-vs-code-integration-1.1.0.tgz",
+      "integrity": "sha512-M7f4zQIAzpdZGRcZpWmpONyf8zpiGZCU8U7z7s5q6460deIebLLQP/klTLLcI3XyWoCjUhwDwGJiZz9he8Y2ig==",
+      "dev": true,
+      "requires": {
+        "prettier": "^2.7.1"
+      }
     },
     "custom-elements-manifest": {
       "version": "1.0.0",

package.json

@@ -1,12 +1,12 @@
 {
   "name": "@shoelace-style/shoelace",
   "description": "A forward-thinking library of web components.",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "homepage": "https://github.com/shoelace-style/shoelace",
   "author": "Cory LaViska",
   "license": "MIT",
   "customElements": "dist/custom-elements.json",
-  "web-types": "dist/web-types.json",
+  "web-types": "./web-types.json",
   "type": "module",
   "types": "dist/shoelace.d.ts",
   "jsdelivr": "./cdn/shoelace-autoloader.js",
@@ -25,15 +25,8 @@
     "./dist/react/*": "./dist/react/*",
     "./dist/translations/*": "./dist/translations/*"
   },
-  "files": [
-    "dist",
-    "cdn"
-  ],
-  "keywords": [
-    "web components",
-    "custom elements",
-    "components"
-  ],
+  "files": ["dist", "cdn"],
+  "keywords": ["web components", "custom elements", "components"],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shoelace-style/shoelace.git"
@@ -67,9 +60,9 @@
     "node": ">=14.17.0"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^3.5.0",
+    "@ctrl/tinycolor": "^4.0.1",
     "@floating-ui/dom": "^1.2.1",
-    "@lit-labs/react": "^1.1.1",
+    "@lit-labs/react": "^2.0.1",
     "@shoelace-style/animations": "^1.1.0",
     "@shoelace-style/localize": "^3.1.1",
     "composed-offset-position": "^0.0.4",
@@ -90,12 +83,13 @@
     "@web/test-runner-playwright": "^0.9.0",
     "bootstrap-icons": "^1.10.5",
     "browser-sync": "^2.29.3",
-    "cem-plugin-vs-code-custom-data-generator": "^1.4.1",
     "chalk": "^5.2.0",
     "change-case": "^4.1.2",
     "command-line-args": "^5.2.1",
     "comment-parser": "^1.3.1",
     "cspell": "^6.18.1",
+    "custom-element-jet-brains-integration": "^1.1.0",
+    "custom-element-vs-code-integration": "^1.1.0",
     "del": "^7.0.0",
     "download": "^8.0.0",
     "esbuild": "^0.18.2",
@@ -139,9 +133,6 @@
     "user-agent-data-types": "^0.3.0"
   },
   "lint-staged": {
-    "*.{ts,js}": [
-      "eslint --max-warnings 0 --cache --fix",
-      "prettier --write"
-    ]
+    "*.{ts,js}": ["eslint --max-warnings 0 --cache --fix", "prettier --write"]
   }
 }

scripts/build.js

@@ -53,6 +53,10 @@ async function buildTheDocs(watch = false) {
       output.push(data.toString());
     });
 
+    child.stderr.on('data', data => {
+      output.push(data.toString());
+    });
+
     if (watch) {
       // The process doesn't terminate in watch mode so, before resolving, we listen for a known signal in stdout that
       // tells us when the first build completes.
@@ -188,10 +192,6 @@ await nextTask('Wrapping components for React', () => {
   return execPromise(`node scripts/make-react.js --outdir "${outdir}"`, { stdio: 'inherit' });
 });
 
-await nextTask('Generating Web Types', () => {
-  return execPromise(`node scripts/make-web-types.js --outdir "${outdir}"`, { stdio: 'inherit' });
-});
-
 await nextTask('Generating themes', () => {
   return execPromise(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
 });
@@ -207,6 +207,7 @@ await nextTask('Running the TypeScript compiler', () => {
 // Copy the above steps to the CDN directory directly so we don't need to twice the work for nothing.
 await nextTask(`Copying Web Types, Themes, Icons, and TS Types to "${cdndir}"`, async () => {
   await deleteAsync(cdndir);
+  await copy('./web-types.json', `${outdir}/web-types.json`);
   await copy(outdir, cdndir);
 });
 

scripts/make-react.js

@@ -52,8 +52,10 @@ components.map(component => {
       ${eventExports}
 
       const tagName = '${component.tagName}'
+      Component.define('${component.tagName}')
 
-      const component = createComponent({
+      ${jsDoc}
+      const reactWrapper = createComponent({
         tagName,
         elementClass: Component,
         react: React,
@@ -63,20 +65,7 @@ components.map(component => {
         displayName: "${component.name}"
       })
 
-      ${jsDoc}
-      class SlComponent extends React.Component<Parameters<typeof component>[0]> {
-        constructor (...args: Parameters<typeof component>) {
-          super(...args)
-          Component.define(tagName)
-        }
-
-        render () {
-          const { children, ...props } = this.props
-          return React.createElement(component, props, children)
-        }
-      }
-
-      export default SlComponent;
+      export default reactWrapper
     `,
     Object.assign(prettierConfig, {
       parser: 'babel-ts'

scripts/make-web-types.js

@@ -1,68 +0,0 @@
-//
-// This script generates a web-types.json file from custom-elements.json for use with WebStorm/PHPStorm
-//
-// Docs: https://github.com/JetBrains/web-types
-//
-import commandLineArgs from 'command-line-args';
-import jsonata from 'jsonata';
-import fs from 'fs';
-import path from 'path';
-
-const { outdir } = commandLineArgs({ name: 'outdir', type: String });
-const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.json'), 'utf8'));
-
-const jsonataExprString = `{
-  "$schema": "http://json.schemastore.org/web-types",
-  "name": package.name,
-  "version": package.version,
-  "description-markup": "markdown",
-  "framework-config": {
-    "enable-when": {
-      "node-packages": [
-        package.name
-      ]
-    }
-  },
-  "contributions": {
-    "html": {
-      "elements": [
-        modules.declarations.{
-          "name": tagName,
-          "description": description,
-          "doc-url": $join(["https://shoelace.style/components/", $substringAfter(tagName, 'sl-')]),
-          "js": {
-            "properties": [
-              members.{
-                "name": name,
-                "description": description,
-                "value": {
-                  "type": type.text
-                }
-              }
-            ],
-            "events": [
-              events.{
-                "name": name,
-                "description": description
-              }
-            ]
-          },
-          "attributes": [
-            attributes.{
-              "name": name,
-              "description": description,
-              "value": {
-                "type": type.text
-              }
-            }
-          ]
-        }
-      ]
-    }
-  }
-}`;
-
-const expression = jsonata(jsonataExprString);
-const result = await expression.evaluate(metadata);
-
-fs.writeFileSync(path.join(outdir, 'web-types.json'), JSON.stringify(result, null, 2), 'utf8');

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

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

scripts/plop/templates/component/docs.hbs

@@ -5,7 +5,7 @@ meta:
 layout: component
 ---
 
-```html preview
+```html:preview
 <{{ tag }}></{{ tag }}>
 ```
 

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

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

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

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

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

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

src/components/avatar/avatar.component.ts

@@ -96,9 +96,3 @@ export default class SlAvatar extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-avatar': SlAvatar;
-  }
-}

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

src/components/badge/badge.component.ts

@@ -48,9 +48,3 @@ export default class SlBadge extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-badge': SlBadge;
-  }
-}

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

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

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

src/components/breadcrumb/breadcrumb.component.ts

@@ -98,9 +98,3 @@ export default class SlBreadcrumb extends ShoelaceElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-breadcrumb': SlBreadcrumb;
-  }
-}

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

src/components/button-group/button-group.component.ts

@@ -54,7 +54,7 @@ export default class SlButtonGroup extends ShoelaceElement {
       const index = slottedElements.indexOf(el);
       const button = findButton(el);
 
-      if (button !== null) {
+      if (button) {
         button.classList.add('sl-button-group__button');
         button.classList.toggle('sl-button-group__button--first', index === 0);
         button.classList.toggle('sl-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
@@ -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;
-  }
-}

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

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

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

src/components/calendar/calendar.component.ts

@@ -0,0 +1,204 @@
+import { classMap } from 'lit/directives/class-map.js';
+import { generateCalendarGrid, getAllDayNames, getMonthName, isSameDay } from '../../internal/calendar.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import { partMap } from '../../internal/part-map.js';
+import { property } from 'lit/decorators.js';
+import { watch } from '../../internal/watch.js';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './calendar.styles';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+
+export interface RenderDayOptions {
+  disabled?: boolean;
+  content: string | TemplateResult;
+}
+
+/**
+ * @summary A calendar prototype for Shoelace.
+ * @documentation https://shoelace.style/components/calendar
+ *
+ * @since 2.0
+ * @status experimental
+ *
+ * @dependency sl-example
+ *
+ * @event sl-change - Emitted when the date changes.
+ *
+ * @slot footer - Optional content to place in the calendar's footer.
+ *
+ * @csspart day - Targets day cells.
+ * @csspart day-label - Targets the day labels (the name of the days in the grid).
+ * @csspart day-weekend - Targets days that fall on weekends.
+ * @csspart day-weekday - Targets weekdays.
+ * @csspart day-current-month - Targets days in the current month.
+ * @csspart day-previous-month - Targets days in the previous month.
+ * @csspart day-next-month - Targets days in the next month.
+ * @csspart day-today - Targets today.
+ * @csspart day-selected - Targets selected days.
+ * @csspart day-selection-start - Targets days that begin a selection.
+ * @csspart day-selection-end - Targets days that end a selection.
+ *
+ * @cssproperty --border-color - The calendar's border color.
+ * @cssproperty --border-width - The calendar's border width.
+ * @cssproperty --border-radius - The border radius of the calendar.
+ */
+export default class SlCalendar extends ShoelaceElement {
+  static styles: CSSResultGroup = styles;
+
+  private readonly localize = new LocalizeController(this);
+  private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');
+
+  /** The month to render, 1-12/ */
+  @property({ type: Number, reflect: true }) month: number = new Date().getMonth() + 1;
+
+  /** The year to render. */
+  @property({ type: Number, reflect: true }) year: number = new Date().getFullYear();
+
+  /** Determines how day labels are shown, e.g. "M", "Mon", or "Monday". */
+  @property({ attribute: 'day-labels' }) dayLabels: 'narrow' | 'short' | 'long' = 'short';
+
+  /** Determines how month labels are shown, e.g. "J", "Jan", or "January". */
+  @property({ attribute: 'month-labels' }) monthLabels: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' = 'long';
+
+  /** When true, dates from the previous and next month will also be shown to fill out the grid. */
+  @property({ attribute: 'show-adjacent-dates', type: Boolean }) showAdjacentDates = false;
+
+  /** Draws the target dates as a selection in the calendar. */
+  @property({ type: Array }) selectedDates: Date[] = [];
+
+  /** Moves the calendar to the current month and year. */
+  goToToday() {
+    this.month = new Date().getMonth() + 1;
+    this.year = new Date().getFullYear();
+  }
+
+  /** Moves the calendar to the previous month. */
+  goToPreviousMonth() {
+    if (this.month === 1) {
+      this.month = 12;
+      this.year--;
+    } else {
+      this.month--;
+    }
+  }
+
+  /** Moves the calendar to the next month. */
+  goToNextMonth() {
+    if (this.month === 12) {
+      this.month = 1;
+      this.year++;
+    } else {
+      this.month++;
+    }
+  }
+
+  @watch('month')
+  @watch('year')
+  handleMonthChange() {
+    this.emit('sl-change');
+  }
+
+  render() {
+    if (this.month < 1 || this.month > 12) {
+      throw new Error(`The value "${this.month}" is not a valid month.`);
+    }
+
+    const lang = this.lang || document.documentElement.lang;
+    const month = new Date(this.year, this.month - 1, 1);
+    const dayGrid = generateCalendarGrid(this.year, this.month);
+    const dayNames = getAllDayNames(lang, this.dayLabels);
+
+    //
+    // TODO - December is not showing a label because the month is calculated as Sat Jan 01 2022 00:00:00 GMT-0500
+    //
+
+    return html`
+      <div
+        class=${classMap({
+          calendar: true,
+          'calendar--has-footer': this.hasSlotController.test('footer'),
+          'calendar--show-adjacent-dates': this.showAdjacentDates
+        })}
+      >
+        <header class="calendar__header">
+          <sl-icon-button
+            name="chevron-left"
+            label=${this.localize.term('previousMonth')}
+            @click=${this.goToPreviousMonth}
+          ></sl-icon-button>
+
+          <span class="calendar__label">
+            <span class="calendar__month-label">${getMonthName(month, lang, this.monthLabels)}</span>
+            <span class="calendar__year-label">${month.getFullYear()}</span>
+          </span>
+
+          <sl-icon-button
+            name="chevron-right"
+            label=${this.localize.term('nextMonth')}
+            @click=${this.goToNextMonth}
+          ></sl-icon-button>
+        </header>
+
+        <div class="calendar__days">
+          ${[0, 1, 2, 3, 4, 5, 6].map(day => {
+            return html`
+              <span
+                part=${partMap({
+                  day: true,
+                  'day-label': true,
+                  'day-weekday': day > 0 && day < 6,
+                  'day-weekend': day === 0 || day === 6
+                })}
+                class="calendar__day"
+              >
+                ${dayNames[day]}
+              </span>
+            `;
+          })}
+          ${dayGrid.map((day, index) => {
+            if (day.isCurrentMonth || this.showAdjacentDates) {
+              const isSelected = Array.isArray(this.selectedDates)
+                ? this.selectedDates.some(d => isSameDay(d, day.date))
+                : false;
+              const previousDay = index > 0 ? dayGrid[index - 1] : null;
+              const nextDay = index < dayGrid.length - 1 ? dayGrid[index + 1] : null;
+              const isSelectionStart =
+                isSelected && previousDay ? !this.selectedDates.some(d => isSameDay(d, previousDay.date)) : false;
+              const isSelectionEnd =
+                isSelected && nextDay ? !this.selectedDates.some(d => isSameDay(d, nextDay.date)) : false;
+
+              return html`
+                <button
+                  type="button"
+                  part=${partMap({
+                    day: true,
+                    'day-current-month': day.isCurrentMonth,
+                    'day-previous-month': day.isPreviousMonth,
+                    'day-next-month': day.isNextMonth,
+                    'day-today': day.isToday,
+                    'day-weekday': day.isWeekday,
+                    'day-weekend': day.isWeekend,
+                    'day-selected': isSelected,
+                    'day-selection-start': isSelectionStart,
+                    'day-selection-end': isSelectionEnd
+                  })}
+                  class="calendar__day"
+                >
+                  ${day.date.getDate()}
+                </button>
+              `;
+            }
+
+            return html` <div class="calendar__day calendar__day--empty"></div> `;
+          })}
+        </div>
+
+        <footer class="calendar__footer">
+          <slot name="footer"></slot>
+        </footer>
+      </div>
+    `;
+  }
+}

src/components/calendar/calendar.styles.ts

@@ -0,0 +1,119 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --border-color: var(--sl-color-neutral-200);
+    --border-radius: var(--sl-border-radius-medium);
+    --border-width: 0;
+
+    display: block;
+  }
+
+  .calendar__header {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--sl-spacing-x-small);
+  }
+
+  .calendar__header sl-icon-button {
+    flex: 0 0 auto;
+  }
+
+  .calendar__label {
+    flex: 1 1 auto;
+    text-align: center;
+  }
+
+  .calendar__days {
+    isolation: isolate;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .calendar__day {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border: solid var(--border-width) var(--border-color);
+    border-bottom: none;
+    background: none;
+    background-color: var(--sl-color-neutral-0);
+    font: inherit;
+    color: var(--sl-color-neutral-900);
+    min-height: 3rem;
+    padding: 0;
+    margin: 0;
+  }
+
+  .calendar__day:nth-child(1) {
+    border-top-left-radius: var(--border-radius);
+  }
+
+  .calendar__day:nth-child(7) {
+    border-top-right-radius: var(--border-radius);
+  }
+
+  .calendar__day:nth-last-child(1) {
+    border-bottom-right-radius: var(--border-radius);
+  }
+
+  .calendar__day:nth-last-child(7) {
+    border-bottom-left-radius: var(--border-radius);
+  }
+
+  .calendar__day:not(:nth-child(7n)) {
+    border-right: none;
+  }
+
+  .calendar__day:nth-last-child(1),
+  .calendar__day:nth-last-child(2),
+  .calendar__day:nth-last-child(3),
+  .calendar__day:nth-last-child(4),
+  .calendar__day:nth-last-child(5),
+  .calendar__day:nth-last-child(6),
+  .calendar__day:nth-last-child(7) {
+    border-bottom: solid var(--border-width) var(--border-color);
+  }
+
+  .calendar__day:focus-visible {
+    outline: solid 2px var(--sl-color-primary-600);
+    z-index: 1;
+  }
+
+  .calendar__day[part~='day-weekend'] {
+    color: var(--sl-color-rose-600);
+  }
+
+  .calendar__day[part~='day-today'] {
+    font-weight: var(--sl-font-weight-bold);
+  }
+
+  .calendar__day[part~='day-selected'] {
+    background-color: var(--sl-color-primary-100);
+  }
+
+  .calendar__day[part~='day-selection-start'] {
+    border-top-left-radius: var(--sl-border-radius-pill);
+    border-bottom-left-radius: var(--sl-border-radius-pill);
+  }
+
+  .calendar__day[part~='day-selection-end'] {
+    border-top-right-radius: var(--sl-border-radius-pill);
+    border-bottom-right-radius: var(--sl-border-radius-pill);
+  }
+
+  .calendar__day .calendar__day[part~='day-previous-month'],
+  .calendar__day[part~='day-next-month'] {
+    color: var(--sl-color-neutral-400);
+  }
+
+  .calendar__day[part~='day-previous-month'][part~='day-weekend'],
+  .calendar__day[part~='day-next-month'][part~='day-weekend'] {
+    color: var(--sl-color-rose-400);
+  }
+`;

src/components/calendar/calendar.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+
+describe('<sl-calendar>', () => {
+  it('should render a component', async () => {
+    // const el = await fixture(html` <sl-calendar></sl-calendar> `);
+    const a = true;
+    expect(a).to.be.true;
+  });
+});