sl => wa

2026-01-12 04:09:12 +00:00 · 2023-09-08 13:45:49 -04:00
parent 5628381449
commit 015429e05d
374 changed files with 14976 additions and 10290 deletions
--- a/.github/SECURITY.md
+++ b/.github/SECURITY.md
@@ -1,7 +1,7 @@
 # Reporting Security Issues

-We take security issues in Shoelace very seriously and appreciate your efforts to disclose your findings responsibly.
+We take security issues in Web Awesome very seriously and appreciate your efforts to disclose your findings responsibly.

-To report a security issue, email [cory@abeautifulsite.net](mailto:cory@abeautifulsite.net) and include "SHOELACE SECURITY" in the subject line.
+To report a security issue, email [cory@fontawesome.com](mailto:cory@abeautifulsite.net) and include "WEB AWESOME SECURITY" in the subject line.

 We'll respond as soon as possible and keep you updated throughout the process.
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,4 @@
-# Contributing to Shoelace
+# Contributing to Web Awesome

 Before contributing, please review the contributions guidelines at:

--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Shoelace
+# Web Awesome

 A forward-thinking library of web components.

@@ -23,13 +23,13 @@ Twitter: [@shoelace_style](https://twitter.com/shoelace_style)

 ## Shoemakers 🥾

-Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 14.17 to build and run the project locally.
+Shoemakers, or "Web Awesome developers," can use this documentation to learn how to build Web Awesome from source. You will need Node >= 14.17 to build and run the project locally.

-**You don't need to do any of this to use Shoelace!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace.
+**You don't need to do any of this to use Web Awesome!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Web Awesome.

 If that's not what you're trying to do, the [documentation website](https://shoelace.style) is where you want to be.

-### What are you using to build Shoelace?
+### What are you using to build Web Awesome?

 Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).

@@ -38,8 +38,8 @@ Components are built with [LitElement](https://lit-element.polymer-project.org/)
 Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies.

 ```bash
-git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
-cd shoelace
+git clone https://github.com/YOUR_GITHUB_USERNAME/webawesome
+cd webawesome
 npm install
 ```

@@ -63,18 +63,18 @@ npm run build

 ### Creating New Components

-To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.
+To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.

 ```bash
-npm run create sl-tag-name
+npm run create wa-tag-name
 ```

 This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.

 ### Contributing

-Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
+Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.

 ## License

-Shoelace is available under the terms of the MIT license.
+Web Awesome is available under the terms of the MIT license.
--- a/cspell.json
+++ b/cspell.json
@@ -166,6 +166,7 @@
    "valpha",
    "valuenow",
    "valuetext",
+    "webawesome",
    "WEBP",
    "Webpacker",
    "wordmark"
--- a/custom-elements-manifest.config.js
+++ b/custom-elements-manifest.config.js
@@ -33,14 +33,14 @@ export default {
  plugins: [
    // Append package data
    {
-      name: 'shoelace-package-data',
+      name: 'wa-package-data',
      packageLinkPhase({ customElementsManifest }) {
        customElementsManifest.package = { name, description, version, author, homepage, license };
      }
    },
    // Infer tag names because we no longer use @customElement decorators.
    {
-      name: 'shoelace-infer-tag-names',
+      name: 'wa-infer-tag-names',
      analyzePhase({ ts, node, moduleDoc }) {
        switch (node.kind) {
          case ts.SyntaxKind.ClassDeclaration: {
@@ -68,7 +68,7 @@ export default {
    },
    // Parse custom jsDoc tags
    {
-      name: 'shoelace-custom-tags',
+      name: 'wa-custom-tags',
      analyzePhase({ ts, node, moduleDoc }) {
        switch (node.kind) {
          case ts.SyntaxKind.ClassDeclaration: {
@@ -138,7 +138,7 @@ export default {
      }
    },
    {
-      name: 'shoelace-react-event-names',
+      name: 'wa-react-event-names',
      analyzePhase({ ts, node, moduleDoc }) {
        switch (node.kind) {
          case ts.SyntaxKind.ClassDeclaration: {
@@ -156,7 +156,7 @@ export default {
      }
    },
    {
-      name: 'shoelace-translate-module-paths',
+      name: 'wa-translate-module-paths',
      packageLinkPhase({ customElementsManifest }) {
        customElementsManifest?.modules?.forEach(mod => {
          //
--- a/docs/_includes/component.njk
+++ b/docs/_includes/component.njk
@@ -1,7 +1,7 @@
 {% extends "default.njk" %}

 {# Find the component based on the `tag` front matter #}
-{% set component = getComponent('sl-' + page.fileSlug) %}
+{% set component = getComponent('wa-' + page.fileSlug) %}

 {% block content %}
  {# Determine the badge variant #}
@@ -26,12 +26,12 @@
    </div>

    <div class="component-header__info">
-      <sl-badge variant="neutral" pill>
+      <wa-badge variant="neutral" pill>
        Since {{component.since or '?' }}
-      </sl-badge>
-      <sl-badge variant="{{ badgeVariant }}" pill style="text-transform: capitalize;">
+      </wa-badge>
+      <wa-badge variant="{{ badgeVariant }}" pill style="text-transform: capitalize;">
        {{ component.status }}
-      </sl-badge>
+      </wa-badge>
    </div>
  </header>

@@ -51,42 +51,42 @@
    any of the following snippets to <a href="/getting-started/installation#cherry-picking">cherry pick</a> this component.
  </p>

-  <sl-tab-group>
-    <sl-tab slot="nav" panel="script">Script</sl-tab>
-    <sl-tab slot="nav" panel="import">Import</sl-tab>
-    <sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
-    <sl-tab slot="nav" panel="react">React</sl-tab>
+  <wa-tab-group>
+    <wa-tab slot="nav" panel="script">Script</wa-tab>
+    <wa-tab slot="nav" panel="import">Import</wa-tab>
+    <wa-tab slot="nav" panel="bundler">Bundler</wa-tab>
+    <wa-tab slot="nav" panel="react">React</wa-tab>

-    <sl-tab-panel name="script">
+    <wa-tab-panel name="script">
      <p>
        To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
        using a script tag:
      </p>
      <pre><code class="language-html">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}&quot;&gt;&lt;/script&gt;</code></pre>
-    </sl-tab-panel>
+    </wa-tab-panel>

-    <sl-tab-panel name="import">
+    <wa-tab-panel name="import">
      <p>
        To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
        using a JavaScript import:
      </p>
      <pre><code class="language-js">import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}';</code></pre>
-    </sl-tab-panel>
+    </wa-tab-panel>

-    <sl-tab-panel name="bundler">
+    <wa-tab-panel name="bundler">
      <p>
        To import this component using <a href="{{ rootUrl('/getting-started/installation#bundling') }}">a bundler</a>:
      </p>
      <pre><code class="language-js">import '@shoelace-style/shoelace/{{ meta.npmdir }}/{{ component.path }}';</code></pre>
-    </sl-tab-panel>
+    </wa-tab-panel>

-    <sl-tab-panel name="react">
+    <wa-tab-panel name="react">
      <p>
        To import this component as a <a href="/frameworks/react">React component</a>:
      </p>
      <pre><code class="language-js">import {{ component.name }} from '@shoelace-style/shoelace/{{ meta.npmdir }}/react/{{ component.tagNameWithoutPrefix }}';</code></pre>
-    </sl-tab-panel>
-  </sl-tab-group>
+    </wa-tab-panel>
+  </wa-tab-group>

  {# Slots #}
  {% if component.slots.length %}
@@ -140,13 +140,13 @@
              {% if prop.attribute | length > 0 %}
                {% if prop.attribute != prop.name %}
                  <br>
-                  <sl-tooltip content="This attribute is different from its property">
+                  <wa-tooltip content="This attribute is different from its property">
                    <small>
                      <code class="nowrap">
                        {{ prop.attribute }}
                      </code>
                    </small>
-                  </sl-tooltip>
+                  </wa-tooltip>
                {% endif %}
              {% endif %}
            </td>
@@ -155,7 +155,7 @@
            </td>
            <td style="text-align: center;">
              {% if prop.reflects %}
-                <sl-icon label="yes" name="check-lg"></sl-icon>
+                <wa-icon label="yes" name="check-lg"></wa-icon>
              {% endif %}
            </td>
            <td>
--- a/docs/_includes/default.njk
+++ b/docs/_includes/default.njk
@@ -2,7 +2,7 @@
 <html
  lang="en"
  data-layout="{{ layout }}"
-  data-shoelace-version="{{ meta.version }}"
+  data-wa-version="{{ meta.version }}"
 >
  <head>
    {# Metadata #}
@@ -33,9 +33,9 @@
    <meta property="og:description" content="{{ meta.description }}" />
    <meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />

-    {# Shoelace #}
+    {# Web Awesome #}
    <link rel="stylesheet" href="/dist/themes/default.css" />
-    <script type="module" src="/dist/shoelace-autoloader.js"></script>
+    <script type="module" src="/dist/autoloader.js"></script>

    {# Web Fonts #}
    <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -74,19 +74,19 @@
      </header>

      <div class="sidebar-buttons">
-        <sl-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
-          <sl-icon slot="prefix" name="github"></sl-icon> Code
-        </sl-button>
-        <sl-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
-          <sl-icon slot="prefix" name="star-fill"></sl-icon> Star
-        </sl-button>
-        <sl-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
-          <sl-icon slot="prefix" name="twitter"></sl-icon> Follow
-        </sl-button>
+        <wa-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
+          <wa-icon slot="prefix" name="github"></wa-icon> Code
+        </wa-button>
+        <wa-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
+          <wa-icon slot="prefix" name="star-fill"></wa-icon> Star
+        </wa-button>
+        <wa-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
+          <wa-icon slot="prefix" name="twitter"></wa-icon> Follow
+        </wa-button>
      </div>

      <button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
-        <sl-icon name="search"></sl-icon>
+        <wa-icon name="search"></wa-icon>
        <span>Search</span>
      </button>

--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -40,7 +40,7 @@
    <ul>
      {% for component in meta.components %}
        <li>
-          <a href="/components/{{ component.tagName | removeSlPrefix }}">
+          <a href="/components/{{ component.tagName | removeWaPrefix }}">
            {{ component.name | classNameToComponentName }}
          </a>
        </li>
--- a/docs/_utilities/code-previews.cjs
+++ b/docs/_utilities/code-previews.cjs
@@ -68,7 +68,7 @@ module.exports = function (doc, options) {
        <div class="code-preview__preview">
          ${code.textContent}
          <div class="code-preview__resizer">
-            <sl-icon name="grip-vertical"></sl-icon>
+            <wa-icon name="grip-vertical"></wa-icon>
          </div>
        </div>

--- a/docs/_utilities/copy-code-buttons.cjs
+++ b/docs/_utilities/copy-code-buttons.cjs
@@ -7,7 +7,7 @@ let codeBlockId = 0;
 module.exports = function (doc) {
  doc.querySelectorAll('pre > code').forEach(code => {
    const pre = code.closest('pre');
-    const button = doc.createElement('sl-copy-button');
+    const button = doc.createElement('wa-copy-button');

    if (!code.id) {
      code.id = `code-block-${++codeBlockId}`;
--- a/docs/_utilities/markdown.cjs
+++ b/docs/_utilities/markdown.cjs
@@ -32,11 +32,11 @@ markdown.use(markdownItReplaceIt);
    render: function (tokens, idx) {
      if (tokens[idx].nesting === 1) {
        return `
-          <sl-alert class="callout" variant="${variant}" open>
-            <sl-icon slot="icon" name="${icon}"></sl-icon>
+          <wa-alert class="callout" variant="${variant}" open>
+            <wa-icon slot="icon" name="${icon}"></wa-icon>
        `;
      }
-      return '</sl-alert>\n';
+      return '</wa-alert>\n';
    }
  });
 });
--- a/docs/assets/scripts/code-previews.js
+++ b/docs/assets/scripts/code-previews.js
@@ -1,7 +1,7 @@
 (() => {
  function convertModuleLinks(html) {
    html = html
-      .replace(/@shoelace-style\/shoelace/g, `https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}`)
+      .replace(/@shoelace-style\/shoelace/g, `https://esm.sh/@shoelace-style/shoelace@${waVersion}`)
      .replace(/from 'react'/g, `from 'https://esm.sh/react@${reactVersion}'`)
      .replace(/from "react"/g, `from "https://esm.sh/react@${reactVersion}"`);

@@ -64,7 +64,7 @@
    });
  }

-  const shoelaceVersion = document.documentElement.getAttribute('data-shoelace-version');
+  const waVersion = document.documentElement.getAttribute('data-wa-version');
  const reactVersion = '18.2.0';
  const cdndir = 'cdn';
  const npmdir = 'dist';
@@ -72,8 +72,8 @@
  let count = 1;

  // We need the version to open
-  if (!shoelaceVersion) {
-    throw new Error('The data-shoelace-version attribute is missing from <html>.');
+  if (!waVersion) {
+    throw new Error('The data-wa-version attribute is missing from <html>.');
  }

  // Sync flavor UI on page load
@@ -166,7 +166,7 @@
      const htmlExample = codeBlock.querySelector('.code-preview__source--html > pre > code')?.textContent;
      const reactExample = codeBlock.querySelector('.code-preview__source--react > pre > code')?.textContent;
      const isReact = flavor === 'react' && typeof reactExample === 'string';
-      const theme = document.documentElement.classList.contains('sl-theme-dark') ? 'dark' : 'light';
+      const theme = document.documentElement.classList.contains('wa-theme-dark') ? 'dark' : 'light';
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      const isDark = theme === 'dark' || (theme === 'auto' && prefersDark);
      const editors = isReact ? '0010' : '1000';
@@ -182,7 +182,7 @@
      // HTML templates
      if (!isReact) {
        htmlTemplate =
-          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/shoelace.js"></script>\n` +
+          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${waVersion}/${cdndir}/autoloader.js"></script>\n` +
          `\n${htmlExample}`;
        jsTemplate = '';
      }
@@ -193,10 +193,10 @@
        jsTemplate =
          `import React from 'https://esm.sh/react@${reactVersion}';\n` +
          `import ReactDOM from 'https://esm.sh/react-dom@${reactVersion}';\n` +
-          `import { setBasePath } from 'https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/utilities/base-path';\n` +
+          `import { setBasePath } from 'https://esm.sh/@shoelace-style/shoelace@${waVersion}/${cdndir}/utilities/base-path';\n` +
          `\n` +
-          `// Set the base path for Shoelace assets\n` +
-          `setBasePath('https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\n` +
+          `// Set the base path for Web Awesome assets\n` +
+          `setBasePath('https://esm.sh/@shoelace-style/shoelace@${waVersion}/${npmdir}/')\n` +
          `\n${convertModuleLinks(reactExample)}\n` +
          `\n` +
          `ReactDOM.render(<App />, document.getElementById('root'));`;
@@ -204,7 +204,7 @@

      // CSS templates
      cssTemplate =
-        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/themes/${
+        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${waVersion}/${cdndir}/themes/${
          isDark ? 'dark' : 'light'
        }.css';\n` +
        '\n' +
@@ -219,10 +219,10 @@
      const data = {
        title: '',
        description: '',
-        tags: ['shoelace', 'web components'],
+        tags: ['web awesome', 'web components'],
        editors,
        head: `<meta name="viewport" content="width=device-width">`,
-        html_classes: `sl-theme-${isDark ? 'dark' : 'light'}`,
+        html_classes: `wa-theme-${isDark ? 'dark' : 'light'}`,
        css_external: ``,
        js_external: ``,
        js_module: true,
--- a/docs/assets/scripts/search.js
+++ b/docs/assets/scripts/search.js
@@ -10,7 +10,7 @@
      <div class="search__content">
        <div class="search__header">
          <div id="search-combobox" class="search__input-wrapper">
-            <sl-icon name="search"></sl-icon>
+            <wa-icon name="search"></wa-icon>
            <input
              id="search-input"
              class="search__input"
@@ -30,7 +30,7 @@
              aria-activedescendant
            >
            <button type="button" class="search__clear-button" aria-label="Clear entry" tabindex="-1" hidden>
-              <sl-icon name="x-circle-fill"></sl-icon>
+              <wa-icon name="x-circle-fill"></wa-icon>
            </button>
          </div>
        </div>
@@ -57,7 +57,7 @@
  const input = siteSearch.querySelector('.search__input');
  const clearButton = siteSearch.querySelector('.search__clear-button');
  const results = siteSearch.querySelector('.search__results');
-  const version = document.documentElement.getAttribute('data-shoelace-version');
+  const version = document.documentElement.getAttribute('data-wa-version');
  const key = `search_${version}`;
  const searchDebounce = 50;
  const animationDuration = 150;
@@ -317,7 +317,7 @@
        a.href = page.url;
        a.innerHTML = `
          <div class="search__result-icon" aria-hidden="true">
-            <sl-icon name="${icon}"></sl-icon>
+            <wa-icon name="${icon}"></wa-icon>
          </div>
          <div class="search__result__details">
            <div class="search__result-title"></div>
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -1094,15 +1094,15 @@ html.sidebar-open #menu-toggle {
  flex: 1 1 auto;
 }

-.repo-button--github sl-icon {
+.repo-button--github wa-icon {
  color: var(--wa-color-white);
 }

-.repo-button--star sl-icon {
+.repo-button--star wa-icon {
  color: var(--wa-color-yellow-80);
 }

-.repo-button--twitter sl-icon {
+.repo-button--twitter wa-icon {
  color: var(--wa-color-blue-70);
 }

--- a/docs/assets/styles/search.css
+++ b/docs/assets/styles/search.css
@@ -147,7 +147,7 @@ body.search-visible {
  align-items: center;
 }

-.search__input-wrapper sl-icon {
+.search__input-wrapper wa-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
@@ -169,7 +169,7 @@ body.search-visible {
  display: none;
 }

-.search__clear-button:active sl-icon {
+.search__clear-button:active wa-icon {
  color: var(--docs-search-icon-color-active);
 }

@@ -273,7 +273,7 @@ body.search-visible {
  color: var(--docs-search-text-color-muted);
 }

-.search__result-icon sl-icon {
+.search__result-icon wa-icon {
  font-size: 1.5rem;
 }

--- a/docs/eleventy.config.cjs
+++ b/docs/eleventy.config.cjs
@@ -5,7 +5,7 @@ const lunr = require('lunr');
 const { capitalCase } = require('change-case');
 const { JSDOM } = require('jsdom');
 const { customElementsManifest, getAllComponents } = require('./_utilities/cem.cjs');
-const shoelaceFlavoredMarkdown = require('./_utilities/markdown.cjs');
+const webAwesomeFlavoredMarkdown = require('./_utilities/markdown.cjs');
 const activeLinks = require('./_utilities/active-links.cjs');
 const anchorHeadings = require('./_utilities/anchor-headings.cjs');
 const codePreviews = require('./_utilities/code-previews.cjs');
@@ -32,7 +32,7 @@ module.exports = function (eleventyConfig) {
  eleventyConfig.addGlobalData('layout', 'default'); // make 'default' the default layout
  eleventyConfig.addGlobalData('toc', true); // enable the table of contents
  eleventyConfig.addGlobalData('meta', {
-    title: 'Shoelace',
+    title: 'Web Awesome',
    description: 'A forward-thinking library of web components.',
    image: 'images/og-image.png',
    version: customElementsManifest.package.version,
@@ -74,7 +74,7 @@ module.exports = function (eleventyConfig) {
    if (!component) {
      throw new Error(
        `Unable to find a component called "${tagName}". Make sure the file name is the same as the component's tag ` +
-          `name (minus the sl- prefix).`
+          `name (minus the wa- prefix).`
      );
    }
    return component;
@@ -83,27 +83,27 @@ module.exports = function (eleventyConfig) {
  //
  // Custom markdown syntaxes
  //
-  eleventyConfig.setLibrary('md', shoelaceFlavoredMarkdown);
+  eleventyConfig.setLibrary('md', webAwesomeFlavoredMarkdown);

  //
  // Filters
  //
  eleventyConfig.addFilter('markdown', content => {
-    return shoelaceFlavoredMarkdown.render(content);
+    return webAwesomeFlavoredMarkdown.render(content);
  });

  eleventyConfig.addFilter('markdownInline', content => {
-    return shoelaceFlavoredMarkdown.renderInline(content);
+    return webAwesomeFlavoredMarkdown.renderInline(content);
  });

  eleventyConfig.addFilter('classNameToComponentName', className => {
-    let name = capitalCase(className.replace(/^Sl/, ''));
+    let name = capitalCase(className.replace(/^Wa/, ''));
    if (name === 'Qr Code') name = 'QR Code'; // manual override
    return name;
  });

-  eleventyConfig.addFilter('removeSlPrefix', tagName => {
-    return tagName.replace(/^sl-/, '');
+  eleventyConfig.addFilter('removeWaPrefix', tagName => {
+    return tagName.replace(/^wa-/, '');
  });

  //
--- a/docs/pages/components/alert.md
+++ b/docs/pages/components/alert.md
@@ -6,21 +6,21 @@ layout: component
 ---

 ```html:preview
-<sl-alert open>
-  <sl-icon slot="icon" name="info-circle"></sl-icon>
+<wa-alert open>
+  <wa-icon slot="icon" name="info-circle"></wa-icon>
  This is a standard alert. You can customize its content and even the icon.
-</sl-alert>
+</wa-alert>
 ```

 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
-  <SlAlert open>
-    <SlIcon slot="icon" name="info-circle" />
+  <WaAlert open>
+    <WaIcon slot="icon" name="info-circle" />
    This is a standard alert. You can customize its content and even the icon.
-  </SlAlert>
+  </WaAlert>
 );
 ```

@@ -35,93 +35,93 @@ Alerts will not be visible if the `open` attribute is not present.
 Set the `variant` attribute to change the alert's variant.

 ```html:preview
-<sl-alert variant="brand" open>
-  <sl-icon slot="icon" name="info-circle"></sl-icon>
+<wa-alert variant="brand" open>
+  <wa-icon slot="icon" name="info-circle"></wa-icon>
  <strong>This is super informative</strong><br />
  You can tell by how pretty the alert is.
-</sl-alert>
+</wa-alert>

 <br />

-<sl-alert variant="success" open>
-  <sl-icon slot="icon" name="check2-circle"></sl-icon>
+<wa-alert variant="success" open>
+  <wa-icon slot="icon" name="check2-circle"></wa-icon>
  <strong>Your changes have been saved</strong><br />
  You can safely exit the app now.
-</sl-alert>
+</wa-alert>

 <br />

-<sl-alert variant="neutral" open>
-  <sl-icon slot="icon" name="gear"></sl-icon>
+<wa-alert variant="neutral" open>
+  <wa-icon slot="icon" name="gear"></wa-icon>
  <strong>Your settings have been updated</strong><br />
  Settings will take affect on next login.
-</sl-alert>
+</wa-alert>

 <br />

-<sl-alert variant="warning" open>
-  <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
+<wa-alert variant="warning" open>
+  <wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
  <strong>Your session has ended</strong><br />
  Please login again to continue.
-</sl-alert>
+</wa-alert>

 <br />

-<sl-alert variant="danger" open>
-  <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
+<wa-alert variant="danger" open>
+  <wa-icon slot="icon" name="exclamation-octagon"></wa-icon>
  <strong>Your account has been deleted</strong><br />
  We're very sorry to see you go!
-</sl-alert>
+</wa-alert>
 ```

 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
  <>
-    <SlAlert variant="brand" open>
-      <SlIcon slot="icon" name="info-circle" />
+    <WaAlert variant="brand" open>
+      <WaIcon slot="icon" name="info-circle" />
      <strong>This is super informative</strong>
      <br />
      You can tell by how pretty the alert is.
-    </SlAlert>
+    </WaAlert>

    <br />

-    <SlAlert variant="success" open>
-      <SlIcon slot="icon" name="check2-circle" />
+    <WaAlert variant="success" open>
+      <WaIcon slot="icon" name="check2-circle" />
      <strong>Your changes have been saved</strong>
      <br />
      You can safely exit the app now.
-    </SlAlert>
+    </WaAlert>

    <br />

-    <SlAlert variant="neutral" open>
-      <SlIcon slot="icon" name="gear" />
+    <WaAlert variant="neutral" open>
+      <WaIcon slot="icon" name="gear" />
      <strong>Your settings have been updated</strong>
      <br />
      Settings will take affect on next login.
-    </SlAlert>
+    </WaAlert>

    <br />

-    <SlAlert variant="warning" open>
-      <SlIcon slot="icon" name="exclamation-triangle" />
+    <WaAlert variant="warning" open>
+      <WaIcon slot="icon" name="exclamation-triangle" />
      <strong>Your session has ended</strong>
      <br />
      Please login again to continue.
-    </SlAlert>
+    </WaAlert>

    <br />

-    <SlAlert variant="danger" open>
-      <SlIcon slot="icon" name="exclamation-octagon" />
+    <WaAlert variant="danger" open>
+      <WaIcon slot="icon" name="exclamation-octagon" />
      <strong>Your account has been deleted</strong>
      <br />
      We're very sorry to see you go!
-    </SlAlert>
+    </WaAlert>
  </>
 );
 ```
@@ -131,14 +131,14 @@ const App = () => (
 Add the `closable` attribute to show a close button that will hide the alert.

 ```html:preview
-<sl-alert variant="brand" open closable class="alert-closable">
-  <sl-icon slot="icon" name="info-circle"></sl-icon>
+<wa-alert variant="brand" open closable class="alert-closable">
+  <wa-icon slot="icon" name="info-circle"></wa-icon>
  You can close this alert any time!
-</sl-alert>
+</wa-alert>

 <script>
  const alert = document.querySelector('.alert-closable');
-  alert.addEventListener('sl-after-hide', () => {
+  alert.addEventListener('wa-after-hide', () => {
    setTimeout(() => (alert.open = true), 2000);
  });
 </script>
@@ -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/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => {
  const [open, setOpen] = useState(true);
@@ -158,10 +158,10 @@ const App = () => {
  }

  return (
-    <SlAlert open={open} closable onSlAfterHide={handleHide}>
-      <SlIcon slot="icon" name="info-circle" />
+    <WaAlert open={open} closable onWaAfterHide={handleHide}>
+      <WaIcon slot="icon" name="info-circle" />
      You can close this alert any time!
-    </SlAlert>
+    </WaAlert>
  );
 };
 ```
@@ -171,16 +171,16 @@ const App = () => {
 Icons are optional. Simply omit the `icon` slot if you don't want them.

 ```html:preview
-<sl-alert variant="brand" open> Nothing fancy here, just a simple alert. </sl-alert>
+<wa-alert variant="brand" open> Nothing fancy here, just a simple alert. </wa-alert>
 ```

 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import WaAlert from '@shoelace-style/shoelace/dist/react/alert';

 const App = () => (
-  <SlAlert variant="brand" open>
+  <WaAlert variant="brand" open>
    Nothing fancy here, just a simple alert.
-  </SlAlert>
+  </WaAlert>
 );
 ```

@@ -190,24 +190,24 @@ Set the `duration` attribute to automatically hide an alert after a period of ti

 ```html:preview
 <div class="alert-duration">
-  <sl-button variant="brand">Show Alert</sl-button>
+  <wa-button variant="brand">Show Alert</wa-button>

-  <sl-alert variant="brand" duration="3000" closable>
-    <sl-icon slot="icon" name="info-circle"></sl-icon>
+  <wa-alert variant="brand" duration="3000" closable>
+    <wa-icon slot="icon" name="info-circle"></wa-icon>
    This alert will automatically hide itself after three seconds, unless you interact with it.
-  </sl-alert>
+  </wa-alert>
 </div>

 <script>
  const container = document.querySelector('.alert-duration');
-  const button = container.querySelector('sl-button');
-  const alert = container.querySelector('sl-alert');
+  const button = container.querySelector('wa-button');
+  const alert = container.querySelector('wa-alert');

  button.addEventListener('click', () => alert.show());
 </script>

 <style>
-  .alert-duration sl-alert {
+  .alert-duration wa-alert {
    margin-top: var(--wa-space-m);
  }
 </style>
@@ -215,12 +215,12 @@ 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/alert';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const css = `
-  .alert-duration sl-alert {
+  .alert-duration wa-alert {
    margin-top: var(--wa-space-m);
  }
 `;
@@ -231,14 +231,14 @@ const App = () => {
  return (
    <>
      <div className="alert-duration">
-        <SlButton variant="brand" onClick={() => setOpen(true)}>
+        <WaButton variant="brand" onClick={() => setOpen(true)}>
          Show Alert
-        </SlButton>
+        </WaButton>

-        <SlAlert variant="brand" duration="3000" open={open} closable onSlAfterHide={() => setOpen(false)}>
-          <SlIcon slot="icon" name="info-circle" />
+        <WaAlert variant="brand" duration="3000" open={open} closable onWaAfterHide={() => setOpen(false)}>
+          <WaIcon slot="icon" name="info-circle" />
          This alert will automatically hide itself after three seconds, unless you interact with it.
-        </SlAlert>
+        </WaAlert>
      </div>

      <style>{css}</style>
@@ -255,49 +255,49 @@ You should always use the `closable` attribute so users can dismiss the notifica

 ```html:preview
 <div class="alert-toast">
-  <sl-button variant="brand">Brand</sl-button>
-  <sl-button variant="success">Success</sl-button>
-  <sl-button variant="neutral">Neutral</sl-button>
-  <sl-button variant="warning">Warning</sl-button>
-  <sl-button variant="danger">Danger</sl-button>
+  <wa-button variant="brand">Brand</wa-button>
+  <wa-button variant="success">Success</wa-button>
+  <wa-button variant="neutral">Neutral</wa-button>
+  <wa-button variant="warning">Warning</wa-button>
+  <wa-button variant="danger">Danger</wa-button>

-  <sl-alert variant="brand" duration="3000" closable>
-    <sl-icon slot="icon" name="info-circle"></sl-icon>
+  <wa-alert variant="brand" duration="3000" closable>
+    <wa-icon slot="icon" name="info-circle"></wa-icon>
    <strong>This is super informative</strong><br />
    You can tell by how pretty the alert is.
-  </sl-alert>
+  </wa-alert>

-  <sl-alert variant="success" duration="3000" closable>
-    <sl-icon slot="icon" name="check2-circle"></sl-icon>
+  <wa-alert variant="success" duration="3000" closable>
+    <wa-icon slot="icon" name="check2-circle"></wa-icon>
    <strong>Your changes have been saved</strong><br />
    You can safely exit the app now.
-  </sl-alert>
+  </wa-alert>

-  <sl-alert variant="neutral" duration="3000" closable>
-    <sl-icon slot="icon" name="gear"></sl-icon>
+  <wa-alert variant="neutral" duration="3000" closable>
+    <wa-icon slot="icon" name="gear"></wa-icon>
    <strong>Your settings have been updated</strong><br />
    Settings will take affect on next login.
-  </sl-alert>
+  </wa-alert>

-  <sl-alert variant="warning" duration="3000" closable>
-    <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
+  <wa-alert variant="warning" duration="3000" closable>
+    <wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
    <strong>Your session has ended</strong><br />
    Please login again to continue.
-  </sl-alert>
+  </wa-alert>

-  <sl-alert variant="danger" duration="3000" closable>
-    <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
+  <wa-alert variant="danger" duration="3000" closable>
+    <wa-icon slot="icon" name="exclamation-octagon"></wa-icon>
    <strong>Your account has been deleted</strong><br />
    We're very sorry to see you go!
-  </sl-alert>
+  </wa-alert>
 </div>

 <script>
  const container = document.querySelector('.alert-toast');

  ['brand', 'success', 'neutral', 'warning', 'danger'].map(variant => {
-    const button = container.querySelector(`sl-button[variant="${variant}"]`);
-    const alert = container.querySelector(`sl-alert[variant="${variant}"]`);
+    const button = container.querySelector(`wa-button[variant="${variant}"]`);
+    const alert = container.querySelector(`wa-alert[variant="${variant}"]`);

    button.addEventListener('click', () => alert.toast());
  });
@@ -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/alert';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 function showToast(alert) {
  alert.toast();
@@ -323,60 +323,60 @@ const App = () => {

  return (
    <>
-      <SlButton variant="brand" onClick={() => brand.current.toast()}>
+      <WaButton variant="brand" onClick={() => brand.current.toast()}>
        Brand
-      </SlButton>
+      </WaButton>

-      <SlButton variant="success" onClick={() => success.current.toast()}>
+      <WaButton variant="success" onClick={() => success.current.toast()}>
        Success
-      </SlButton>
+      </WaButton>

-      <SlButton variant="neutral" onClick={() => neutral.current.toast()}>
+      <WaButton variant="neutral" onClick={() => neutral.current.toast()}>
        Neutral
-      </SlButton>
+      </WaButton>

-      <SlButton variant="warning" onClick={() => warning.current.toast()}>
+      <WaButton variant="warning" onClick={() => warning.current.toast()}>
        Warning
-      </SlButton>
+      </WaButton>

-      <SlButton variant="danger" onClick={() => danger.current.toast()}>
+      <WaButton variant="danger" onClick={() => danger.current.toast()}>
        Danger
-      </SlButton>
+      </WaButton>

-      <SlAlert ref={brand} variant="brand" duration="3000" closable>
-        <SlIcon slot="icon" name="info-circle" />
+      <WaAlert ref={brand} variant="brand" duration="3000" closable>
+        <WaIcon slot="icon" name="info-circle" />
        <strong>This is super informative</strong>
        <br />
        You can tell by how pretty the alert is.
-      </SlAlert>
+      </WaAlert>

-      <SlAlert ref={success} variant="success" duration="3000" closable>
-        <SlIcon slot="icon" name="check2-circle" />
+      <WaAlert ref={success} variant="success" duration="3000" closable>
+        <WaIcon slot="icon" name="check2-circle" />
        <strong>Your changes have been saved</strong>
        <br />
        You can safely exit the app now.
-      </SlAlert>
+      </WaAlert>

-      <SlAlert ref={neutral} variant="neutral" duration="3000" closable>
-        <SlIcon slot="icon" name="gear" />
+      <WaAlert ref={neutral} variant="neutral" duration="3000" closable>
+        <WaIcon slot="icon" name="gear" />
        <strong>Your settings have been updated</strong>
        <br />
        Settings will take affect on next login.
-      </SlAlert>
+      </WaAlert>

-      <SlAlert ref={warning} variant="warning" duration="3000" closable>
-        <SlIcon slot="icon" name="exclamation-triangle" />
+      <WaAlert ref={warning} variant="warning" duration="3000" closable>
+        <WaIcon slot="icon" name="exclamation-triangle" />
        <strong>Your session has ended</strong>
        <br />
        Please login again to continue.
-      </SlAlert>
+      </WaAlert>

-      <SlAlert ref={danger} variant="danger" duration="3000" closable>
-        <SlIcon slot="icon" name="exclamation-octagon" />
+      <WaAlert ref={danger} variant="danger" duration="3000" closable>
+        <WaIcon slot="icon" name="exclamation-octagon" />
        <strong>Your account has been deleted</strong>
        <br />
        We're very sorry to see you go!
-      </SlAlert>
+      </WaAlert>
    </>
  );
 };
@@ -388,12 +388,12 @@ For convenience, you can create a utility that emits toast notifications with a

 ```html:preview
 <div class="alert-toast-wrapper">
-  <sl-button variant="brand">Create Toast</sl-button>
+  <wa-button variant="brand">Create Toast</wa-button>
 </div>

 <script>
  const container = document.querySelector('.alert-toast-wrapper');
-  const button = container.querySelector('sl-button');
+  const button = container.querySelector('wa-button');
  let count = 0;

  // Always escape HTML for text arguments!
@@ -405,12 +405,12 @@ For convenience, you can create a utility that emits toast notifications with a

  // Custom function to emit toast notifications
  function notify(message, variant = 'brand', icon = 'info-circle', duration = 3000) {
-    const alert = Object.assign(document.createElement('sl-alert'), {
+    const alert = Object.assign(document.createElement('wa-alert'), {
      variant,
      closable: true,
      duration: duration,
      innerHTML: `
-        <sl-icon name="${icon}" slot="icon"></sl-icon>
+        <wa-icon name="${icon}" slot="icon"></wa-icon>
        ${escapeHtml(message)}
      `
    });
@@ -429,10 +429,10 @@ For convenience, you can create a utility that emits toast notifications with a

 The toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.

-By default, the toast stack is positioned at the top-right of the viewport. You can change its position by targeting `.sl-toast-stack` in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.
+By default, the toast stack is positioned at the top-right of the viewport. You can change its position by targeting `.wa-toast-stack` in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.

 ```css
-.sl-toast-stack {
+.wa-toast-stack {
  left: 0;
  right: auto;
 }
--- a/docs/pages/components/animated-image.md
+++ b/docs/pages/components/animated-image.md
@@ -6,17 +6,17 @@ layout: component
 ---

 ```html:preview
-<sl-animated-image
+<wa-animated-image
  src="https://shoelace.style/assets/images/walk.gif"
  alt="Animation of untied shoes walking on pavement"
-></sl-animated-image>
+></wa-animated-image>
 ```

 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
+import WaAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';

 const App = () => (
-  <SlAnimatedImage
+  <WaAnimatedImage
    src="https://shoelace.style/assets/images/walk.gif"
    alt="Animation of untied shoes walking on pavement"
  />
@@ -34,17 +34,17 @@ This component uses `<canvas>` to draw freeze frames, so images are subject to [
 Both GIF and WEBP images are supported.

 ```html:preview
-<sl-animated-image
+<wa-animated-image
  src="https://shoelace.style/assets/images/tie.webp"
  alt="Animation of a shoe being tied"
-></sl-animated-image>
+></wa-animated-image>
 ```

 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
+import WaAnimatedImage 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" />
+  <WaAnimatedImage src="https://shoelace.style/assets/images/tie.webp" alt="Animation of a shoe being tied" />
 );
 ```

@@ -53,21 +53,21 @@ const App = () => (
 To set a custom size, apply a width and/or height to the host element.

 ```html:preview
-<sl-animated-image
+<wa-animated-image
  src="https://shoelace.style/assets/images/walk.gif"
  alt="Animation of untied shoes walking on pavement"
  style="width: 150px; height: 200px;"
 >
-</sl-animated-image>
+</wa-animated-image>
 ```

 {% raw %}

 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
+import WaAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';

 const App = () => (
-  <SlAnimatedImage
+  <WaAnimatedImage
    src="https://shoelace.style/assets/images/walk.gif"
    alt="Animation of untied shoes walking on pavement"
    style={{ width: '150px', height: '200px' }}
@@ -82,11 +82,11 @@ const App = () => (
 You can change the appearance and location of the control box by targeting the `control-box` part in your styles.

 ```html:preview
-<sl-animated-image
+<wa-animated-image
  src="https://shoelace.style/assets/images/walk.gif"
  alt="Animation of untied shoes walking on pavement"
  class="animated-image-custom-control-box"
-></sl-animated-image>
+></wa-animated-image>

 <style>
  .animated-image-custom-control-box::part(control-box) {
@@ -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/animated-image';
+import WaAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';

 const css = `
  .animated-image-custom-control-box::part(control-box) {
@@ -118,7 +118,7 @@ const css = `

 const App = () => (
  <>
-    <SlAnimatedImage
+    <WaAnimatedImage
      className="animated-image-custom-control-box"
      src="https://shoelace.style/assets/images/walk.gif"
      alt="Animation of untied shoes walking on pavement"
--- a/docs/pages/components/animation.md
+++ b/docs/pages/components/animation.md
@@ -5,14 +5,14 @@ meta:
 layout: component
 ---

-To animate an element, wrap it in `<sl-animation>` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options.
+To animate an element, wrap it in `<wa-animation>` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options.

 ```html:preview
 <div class="animation-overview">
-  <sl-animation name="bounce" duration="2000" play><div class="box"></div></sl-animation>
-  <sl-animation name="jello" duration="2000" play><div class="box"></div></sl-animation>
-  <sl-animation name="heartBeat" duration="2000" play><div class="box"></div></sl-animation>
-  <sl-animation name="flip" duration="2000" play><div class="box"></div></sl-animation>
+  <wa-animation name="bounce" duration="2000" play><div class="box"></div></wa-animation>
+  <wa-animation name="jello" duration="2000" play><div class="box"></div></wa-animation>
+  <wa-animation name="heartBeat" duration="2000" play><div class="box"></div></wa-animation>
+  <wa-animation name="flip" duration="2000" play><div class="box"></div></wa-animation>
 </div>

 <style>
@@ -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/animation';
+import WaAnimation from '@shoelace-style/shoelace/dist/react/animation';

 const css = `
  .animation-overview .box {
@@ -42,18 +42,18 @@ const css = `
 const App = () => (
  <>
    <div class="animation-overview">
-      <SlAnimation name="bounce" duration={2000} play>
+      <WaAnimation name="bounce" duration={2000} play>
        <div class="box" />
-      </SlAnimation>
-      <SlAnimation name="jello" duration={2000} play>
+      </WaAnimation>
+      <WaAnimation name="jello" duration={2000} play>
        <div class="box" />
-      </SlAnimation>
-      <SlAnimation name="heartBeat" duration={2000} play>
+      </WaAnimation>
+      <WaAnimation name="heartBeat" duration={2000} play>
        <div class="box" />
-      </SlAnimation>
-      <SlAnimation name="flip" duration={2000} play>
+      </WaAnimation>
+      <WaAnimation name="flip" duration={2000} play>
        <div class="box" />
-      </SlAnimation>
+      </WaAnimation>
    </div>

    <style>{css}</style>
@@ -62,7 +62,7 @@ const App = () => (
 ```

 :::tip
-The animation will only be applied to the first child element found in `<sl-animation>`.
+The animation will only be applied to the first child element found in `<wa-animation>`.
 :::

 ## Examples
@@ -73,14 +73,14 @@ This example demonstrates all of the baked-in animations and easings. Animations

 ```html:preview
 <div class="animation-sandbox">
-  <sl-animation name="bounce" easing="ease-in-out" duration="2000" play>
+  <wa-animation name="bounce" easing="ease-in-out" duration="2000" play>
    <div class="box"></div>
-  </sl-animation>
+  </wa-animation>

  <div class="controls">
-    <sl-select label="Animation" value="bounce"></sl-select>
-    <sl-select label="Easing" value="linear"></sl-select>
-    <sl-input label="Playback Rate" type="number" min="0" max="2" step=".25" value="1"></sl-input>
+    <wa-select label="Animation" value="bounce"></wa-select>
+    <wa-select label="Easing" value="linear"></wa-select>
+    <wa-input label="Playback Rate" type="number" min="0" max="2" step=".25" value="1"></wa-input>
  </div>
 </div>

@@ -88,15 +88,15 @@ This example demonstrates all of the baked-in animations and easings. Animations
  import { getAnimationNames, getEasingNames } from '/dist/utilities/animation.js';

  const container = document.querySelector('.animation-sandbox');
-  const animation = container.querySelector('sl-animation');
-  const animationName = container.querySelector('.controls sl-select:nth-child(1)');
-  const easingName = container.querySelector('.controls sl-select:nth-child(2)');
-  const playbackRate = container.querySelector('sl-input[type="number"]');
+  const animation = container.querySelector('wa-animation');
+  const animationName = container.querySelector('.controls wa-select:nth-child(1)');
+  const easingName = container.querySelector('.controls wa-select:nth-child(2)');
+  const playbackRate = container.querySelector('wa-input[type="number"]');
  const animations = getAnimationNames();
  const easings = getEasingNames();

  animations.map(name => {
-    const option = Object.assign(document.createElement('sl-option'), {
+    const option = Object.assign(document.createElement('wa-option'), {
      textContent: name,
      value: name
    });
@@ -104,16 +104,16 @@ This example demonstrates all of the baked-in animations and easings. Animations
  });

  easings.map(name => {
-    const option = Object.assign(document.createElement('sl-option'), {
+    const option = Object.assign(document.createElement('wa-option'), {
      textContent: name,
      value: name
    });
    easingName.appendChild(option);
  });

-  animationName.addEventListener('sl-change', () => (animation.name = animationName.value));
-  easingName.addEventListener('sl-change', () => (animation.easing = easingName.value));
-  playbackRate.addEventListener('sl-input', () => (animation.playbackRate = playbackRate.value));
+  animationName.addEventListener('wa-change', () => (animation.name = animationName.value));
+  easingName.addEventListener('wa-change', () => (animation.easing = easingName.value));
+  playbackRate.addEventListener('wa-input', () => (animation.playbackRate = playbackRate.value));
 </script>

 <style>
@@ -128,7 +128,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
    margin-top: 2rem;
  }

-  .animation-sandbox .controls sl-select {
+  .animation-sandbox .controls wa-select {
    margin-bottom: 1rem;
  }
 </style>
@@ -140,12 +140,12 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/

 ```html:preview
 <div class="animation-scroll">
-  <sl-animation name="jackInTheBox" duration="2000" iterations="1"><div class="box"></div></sl-animation>
+  <wa-animation name="jackInTheBox" duration="2000" iterations="1"><div class="box"></div></wa-animation>
 </div>

 <script>
  const container = document.querySelector('.animation-scroll');
-  const animation = container.querySelector('sl-animation');
+  const animation = container.querySelector('wa-animation');
  const box = animation.querySelector('.box');

  // Watch for the box to enter and exit the viewport. Note that we're observing the box, not the animation element!
@@ -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/animation';
+import WaAnimation from '@shoelace-style/shoelace/dist/react/animation';

 const css = `
  .animation-scroll {
@@ -210,9 +210,9 @@ const App = () => {
  return (
    <>
      <div class="animation-scroll">
-        <SlAnimation ref={animation} name="jackInTheBox" duration={2000} iterations={1}>
+        <WaAnimation ref={animation} name="jackInTheBox" duration={2000} iterations={1}>
          <div ref={box} class="box" />
-        </SlAnimation>
+        </WaAnimation>
      </div>

      <style>{css}</style>
@@ -227,13 +227,13 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/

 ```html:preview
 <div class="animation-keyframes">
-  <sl-animation easing="ease-in-out" duration="2000" play>
+  <wa-animation easing="ease-in-out" duration="2000" play>
    <div class="box"></div>
-  </sl-animation>
+  </wa-animation>
 </div>

 <script>
-  const animation = document.querySelector('.animation-keyframes sl-animation');
+  const animation = document.querySelector('.animation-keyframes wa-animation');
  animation.keyframes = [
    {
      offset: 0,
@@ -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/animation';
+import WaAnimation from '@shoelace-style/shoelace/dist/react/animation';

 const css = `
  .animation-keyframes .box {
@@ -275,7 +275,7 @@ const css = `
 const App = () => (
  <>
    <div class="animation-keyframes">
-      <SlAnimation
+      <WaAnimation
        easing="ease-in-out"
        duration={2000}
        play
@@ -297,7 +297,7 @@ const App = () => (
        ]}
      >
        <div class="box" />
-      </SlAnimation>
+      </WaAnimation>
    </div>

    <style>{css}</style>
@@ -311,15 +311,15 @@ Animations won't play until you apply the `play` attribute. You can omit it init

 ```html:preview
 <div class="animation-form">
-  <sl-animation name="rubberBand" duration="1000" iterations="1">
-    <sl-button variant="brand">Click me</sl-button>
-  </sl-animation>
+  <wa-animation name="rubberBand" duration="1000" iterations="1">
+    <wa-button variant="brand">Click me</wa-button>
+  </wa-animation>
 </div>

 <script>
  const container = document.querySelector('.animation-form');
-  const animation = container.querySelector('sl-animation');
-  const button = container.querySelector('sl-button');
+  const animation = container.querySelector('wa-animation');
+  const button = container.querySelector('wa-button');

  button.addEventListener('click', () => {
    animation.play = true;
@@ -329,19 +329,19 @@ 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/animation';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaAnimation from '@shoelace-style/shoelace/dist/react/animation';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => {
  const [play, setPlay] = useState(false);

  return (
    <div class="animation-form">
-      <SlAnimation name="rubberBand" duration={1000} iterations={1} play={play} onSlFinish={() => setPlay(false)}>
-        <SlButton variant="brand" onClick={() => setPlay(true)}>
+      <WaAnimation name="rubberBand" duration={1000} iterations={1} play={play} onWaFinish={() => setPlay(false)}>
+        <WaButton variant="brand" onClick={() => setPlay(true)}>
          Click me
-        </SlButton>
-      </SlAnimation>
+        </WaButton>
+      </WaAnimation>
    </div>
  );
 };
--- a/docs/pages/components/avatar.md
+++ b/docs/pages/components/avatar.md
@@ -8,13 +8,13 @@ layout: component
 By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices.

 ```html:preview
-<sl-avatar label="User avatar"></sl-avatar>
+<wa-avatar label="User avatar"></wa-avatar>
 ```

 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';

-const App = () => <SlAvatar label="User avatar" />;
+const App = () => <WaAvatar label="User avatar" />;
 ```

 ## Examples
@@ -25,26 +25,26 @@ To use an image for the avatar, set the `image` and `label` attributes. This wil
 Avatar images can be lazily loaded by setting the `loading` attribute to `lazy`.

 ```html:preview
-<sl-avatar
+<wa-avatar
  image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
  label="Avatar of a gray tabby kitten looking down"
-></sl-avatar>
-<sl-avatar
+></wa-avatar>
+<wa-avatar
  image="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
  label="Avatar of a white and grey kitten on grey textile"
  loading="lazy"
-></sl-avatar>
+></wa-avatar>
 ```

 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';

 const App = () => (
-  <SlAvatar
+  <WaAvatar
    image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
    label="Avatar of a gray tabby kitten looking down"
  />
-  <SlAvatar
+  <WaAvatar
    image="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
    label="Avatar of a white and grey kitten on grey textile"
    loading="lazy"
@@ -57,13 +57,13 @@ const App = () => (
 When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.

 ```html:preview
-<sl-avatar initials="SL" label="Avatar with initials: SL"></sl-avatar>
+<wa-avatar initials="SL" label="Avatar with initials: SL"></wa-avatar>
 ```

 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';

-const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
+const App = () => <WaAvatar initials="SL" label="Avatar with initials: SL" />;
 ```

 ### Custom Icons
@@ -71,36 +71,36 @@ const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
 When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the `icon` slot.

 ```html:preview
-<sl-avatar label="Avatar with an image icon">
-  <sl-icon slot="icon" name="image"></sl-icon>
-</sl-avatar>
+<wa-avatar label="Avatar with an image icon">
+  <wa-icon slot="icon" name="image"></wa-icon>
+</wa-avatar>

-<sl-avatar label="Avatar with an archive icon">
-  <sl-icon slot="icon" name="archive"></sl-icon>
-</sl-avatar>
+<wa-avatar label="Avatar with an archive icon">
+  <wa-icon slot="icon" name="archive"></wa-icon>
+</wa-avatar>

-<sl-avatar label="Avatar with a briefcase icon">
-  <sl-icon slot="icon" name="briefcase"></sl-icon>
-</sl-avatar>
+<wa-avatar label="Avatar with a briefcase icon">
+  <wa-icon slot="icon" name="briefcase"></wa-icon>
+</wa-avatar>
 ```

 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
  <>
-    <SlAvatar label="Avatar with an image icon">
-      <SlIcon slot="icon" name="image" />
-    </SlAvatar>
+    <WaAvatar label="Avatar with an image icon">
+      <WaIcon slot="icon" name="image" />
+    </WaAvatar>

-    <SlAvatar label="Avatar with an archive icon">
-      <SlIcon slot="icon" name="archive" />
-    </SlAvatar>
+    <WaAvatar label="Avatar with an archive icon">
+      <WaIcon slot="icon" name="archive" />
+    </WaAvatar>

-    <SlAvatar label="Avatar with a briefcase icon">
-      <SlIcon slot="icon" name="briefcase" />
-    </SlAvatar>
+    <WaAvatar label="Avatar with a briefcase icon">
+      <WaIcon slot="icon" name="briefcase" />
+    </WaAvatar>
  </>
 );
 ```
@@ -110,20 +110,20 @@ const App = () => (
 Avatars can be shaped using the `shape` attribute.

 ```html:preview
-<sl-avatar shape="square" label="Square avatar"></sl-avatar>
-<sl-avatar shape="rounded" label="Rounded avatar"></sl-avatar>
-<sl-avatar shape="circle" label="Circle avatar"></sl-avatar>
+<wa-avatar shape="square" label="Square avatar"></wa-avatar>
+<wa-avatar shape="rounded" label="Rounded avatar"></wa-avatar>
+<wa-avatar shape="circle" label="Circle avatar"></wa-avatar>
 ```

 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
  <>
-    <SlAvatar shape="square" label="Square avatar" />
-    <SlAvatar shape="rounded" label="Rounded avatar" />
-    <SlAvatar shape="circle" label="Circle avatar" />
+    <WaAvatar shape="square" label="Square avatar" />
+    <WaAvatar shape="rounded" label="Rounded avatar" />
+    <WaAvatar shape="circle" label="Circle avatar" />
  </>
 );
 ```
@@ -134,48 +134,48 @@ You can group avatars with a few lines of CSS.

 ```html:preview
 <div class="avatar-group">
-  <sl-avatar
+  <wa-avatar
    image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
    label="Avatar 1 of 4"
-  ></sl-avatar>
+  ></wa-avatar>

-  <sl-avatar
+  <wa-avatar
    image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
    label="Avatar 2 of 4"
-  ></sl-avatar>
+  ></wa-avatar>

-  <sl-avatar
+  <wa-avatar
    image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
    label="Avatar 3 of 4"
-  ></sl-avatar>
+  ></wa-avatar>

-  <sl-avatar
+  <wa-avatar
    image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
    label="Avatar 4 of 4"
-  ></sl-avatar>
+  ></wa-avatar>
 </div>

 <style>
-  .avatar-group sl-avatar:not(:first-of-type) {
+  .avatar-group wa-avatar:not(:first-of-type) {
    margin-left: calc(-1 * var(--wa-space-m));
  }

-  .avatar-group sl-avatar::part(base) {
+  .avatar-group wa-avatar::part(base) {
    border: solid 2px var(--wa-color-surface-default);
  }
 </style>
 ```

 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const css = `
-  .avatar-group sl-avatar:not(:first-of-type) {
+  .avatar-group wa-avatar:not(:first-of-type) {
    margin-left: calc(-1 * var(--wa-space-m));
  }

-  .avatar-group sl-avatar::part(base) {
+  .avatar-group wa-avatar::part(base) {
    border: solid 2px var(--wa-color-surface-default);
  }
 `;
@@ -183,22 +183,22 @@ const css = `
 const App = () => (
  <>
    <div className="avatar-group">
-      <SlAvatar
+      <WaAvatar
        image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
        label="Avatar 1 of 4"
      />

-      <SlAvatar
+      <WaAvatar
        image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
        label="Avatar 2 of 4"
      />

-      <SlAvatar
+      <WaAvatar
        image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
        label="Avatar 3 of 4"
      />

-      <SlAvatar
+      <WaAvatar
        image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
        label="Avatar 4 of 4"
      />
--- a/docs/pages/components/badge.md
+++ b/docs/pages/components/badge.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-badge>Badge</sl-badge>
+<wa-badge>Badge</wa-badge>
 ```

 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import WaBadge from '@shoelace-style/shoelace/dist/react/badge';

-const App = () => <SlBadge>Badge</SlBadge>;
+const App = () => <WaBadge>Badge</WaBadge>;
 ```

 ## Examples
@@ -22,23 +22,23 @@ const App = () => <SlBadge>Badge</SlBadge>;
 Set the `variant` attribute to change the badge's variant.

 ```html:preview
-<sl-badge variant="brand">Brand</sl-badge>
-<sl-badge variant="success">Success</sl-badge>
-<sl-badge variant="neutral">Neutral</sl-badge>
-<sl-badge variant="warning">Warning</sl-badge>
-<sl-badge variant="danger">Danger</sl-badge>
+<wa-badge variant="brand">Brand</wa-badge>
+<wa-badge variant="success">Success</wa-badge>
+<wa-badge variant="neutral">Neutral</wa-badge>
+<wa-badge variant="warning">Warning</wa-badge>
+<wa-badge variant="danger">Danger</wa-badge>
 ```

 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import WaBadge from '@shoelace-style/shoelace/dist/react/badge';

 const App = () => (
  <>
-    <SlBadge variant="brand">Brand</SlBadge>
-    <SlBadge variant="success">Success</SlBadge>
-    <SlBadge variant="neutral">Neutral</SlBadge>
-    <SlBadge variant="warning">Warning</SlBadge>
-    <SlBadge variant="danger">Danger</SlBadge>
+    <WaBadge variant="brand">Brand</WaBadge>
+    <WaBadge variant="success">Success</WaBadge>
+    <WaBadge variant="neutral">Neutral</WaBadge>
+    <WaBadge variant="warning">Warning</WaBadge>
+    <WaBadge variant="danger">Danger</WaBadge>
  </>
 );
 ```
@@ -48,33 +48,33 @@ const App = () => (
 Use the `pill` attribute to give badges rounded edges.

 ```html:preview
-<sl-badge variant="brand" pill>Brand</sl-badge>
-<sl-badge variant="success" pill>Success</sl-badge>
-<sl-badge variant="neutral" pill>Neutral</sl-badge>
-<sl-badge variant="warning" pill>Warning</sl-badge>
-<sl-badge variant="danger" pill>Danger</sl-badge>
+<wa-badge variant="brand" pill>Brand</wa-badge>
+<wa-badge variant="success" pill>Success</wa-badge>
+<wa-badge variant="neutral" pill>Neutral</wa-badge>
+<wa-badge variant="warning" pill>Warning</wa-badge>
+<wa-badge variant="danger" pill>Danger</wa-badge>
 ```

 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import WaBadge from '@shoelace-style/shoelace/dist/react/badge';

 const App = () => (
  <>
-    <SlBadge variant="brand" pill>
+    <WaBadge variant="brand" pill>
      Brand
-    </SlBadge>
-    <SlBadge variant="success" pill>
+    </WaBadge>
+    <WaBadge variant="success" pill>
      Success
-    </SlBadge>
-    <SlBadge variant="neutral" pill>
+    </WaBadge>
+    <WaBadge variant="neutral" pill>
      Neutral
-    </SlBadge>
-    <SlBadge variant="warning" pill>
+    </WaBadge>
+    <WaBadge variant="warning" pill>
      Warning
-    </SlBadge>
-    <SlBadge variant="danger" pill>
+    </WaBadge>
+    <WaBadge variant="danger" pill>
      Danger
-    </SlBadge>
+    </WaBadge>
  </>
 );
 ```
@@ -85,25 +85,25 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation

 ```html:preview
 <div class="badge-pulse">
-  <sl-badge variant="brand" pill pulse>1</sl-badge>
-  <sl-badge variant="success" pill pulse>1</sl-badge>
-  <sl-badge variant="neutral" pill pulse>1</sl-badge>
-  <sl-badge variant="warning" pill pulse>1</sl-badge>
-  <sl-badge variant="danger" pill pulse>1</sl-badge>
+  <wa-badge variant="brand" pill pulse>1</wa-badge>
+  <wa-badge variant="success" pill pulse>1</wa-badge>
+  <wa-badge variant="neutral" pill pulse>1</wa-badge>
+  <wa-badge variant="warning" pill pulse>1</wa-badge>
+  <wa-badge variant="danger" pill pulse>1</wa-badge>
 </div>

 <style>
-  .badge-pulse sl-badge:not(:last-of-type) {
+  .badge-pulse wa-badge:not(:last-of-type) {
    margin-right: 1rem;
  }
 </style>
 ```

 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import WaBadge from '@shoelace-style/shoelace/dist/react/badge';

 const css = `
-  .badge-pulse sl-badge:not(:last-of-type) {
+  .badge-pulse wa-badge:not(:last-of-type) {
    margin-right: 1rem;
  }
 `;
@@ -111,21 +111,21 @@ const css = `
 const App = () => (
  <>
    <div className="badge-pulse">
-      <SlBadge variant="brand" pill pulse>
+      <WaBadge variant="brand" pill pulse>
        1
-      </SlBadge>
-      <SlBadge variant="success" pill pulse>
+      </WaBadge>
+      <WaBadge variant="success" pill pulse>
        1
-      </SlBadge>
-      <SlBadge variant="neutral" pill pulse>
+      </WaBadge>
+      <WaBadge variant="neutral" pill pulse>
        1
-      </SlBadge>
-      <SlBadge variant="warning" pill pulse>
+      </WaBadge>
+      <WaBadge variant="warning" pill pulse>
        1
-      </SlBadge>
-      <SlBadge variant="danger" pill pulse>
+      </WaBadge>
+      <WaBadge variant="danger" pill pulse>
        1
-      </SlBadge>
+      </WaBadge>
    </div>

    <style>{css}</style>
@@ -138,48 +138,48 @@ const App = () => (
 One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.

 ```html:preview
-<sl-button>
+<wa-button>
  Requests
-  <sl-badge pill>30</sl-badge>
-</sl-button>
+  <wa-badge pill>30</wa-badge>
+</wa-button>

-<sl-button style="margin-inline-start: 1rem;">
+<wa-button style="margin-inline-start: 1rem;">
  Warnings
-  <sl-badge variant="warning" pill>8</sl-badge>
-</sl-button>
+  <wa-badge variant="warning" pill>8</wa-badge>
+</wa-button>

-<sl-button style="margin-inline-start: 1rem;">
+<wa-button style="margin-inline-start: 1rem;">
  Errors
-  <sl-badge variant="danger" pill>6</sl-badge>
-</sl-button>
+  <wa-badge variant="danger" pill>6</wa-badge>
+</wa-button>
 ```

 {% raw %}

 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => (
  <>
-    <SlButton>
+    <WaButton>
      Requests
-      <SlBadge pill>30</SlBadge>
-    </SlButton>
+      <WaBadge pill>30</WaBadge>
+    </WaButton>

-    <SlButton style={{ marginInlineStart: '1rem' }}>
+    <WaButton style={{ marginInlineStart: '1rem' }}>
      Warnings
-      <SlBadge variant="warning" pill>
+      <WaBadge variant="warning" pill>
        8
-      </SlBadge>
-    </SlButton>
+      </WaBadge>
+    </WaButton>

-    <SlButton style={{ marginInlineStart: '1rem' }}>
+    <WaButton style={{ marginInlineStart: '1rem' }}>
      Errors
-      <SlBadge variant="danger" pill>
+      <WaBadge variant="danger" pill>
        6
-      </SlBadge>
-    </SlButton>
+      </WaBadge>
+    </WaButton>
  </>
 );
 ```
@@ -191,40 +191,40 @@ const App = () => (
 When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.

 ```html:preview
-<sl-menu style="max-width: 240px;">
-  <sl-menu-label>Messages</sl-menu-label>
-  <sl-menu-item>Comments <sl-badge slot="suffix" variant="neutral" pill>4</sl-badge></sl-menu-item>
-  <sl-menu-item>Replies <sl-badge slot="suffix" variant="neutral" pill>12</sl-badge></sl-menu-item>
-</sl-menu>
+<wa-menu style="max-width: 240px;">
+  <wa-menu-label>Messages</wa-menu-label>
+  <wa-menu-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-menu-item>
+  <wa-menu-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-menu-item>
+</wa-menu>
 ```

 {% raw %}

 ```jsx:react
-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';
+import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import WaMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';

 const App = () => (
-  <SlMenu
+  <WaMenu
    style={{ maxWidth: '240px' }}
  >
-    <SlMenuLabel>Messages</SlMenuLabel>
-    <SlMenuItem>
+    <WaMenuLabel>Messages</WaMenuLabel>
+    <WaMenuItem>
      Comments
-      <SlBadge slot="suffix" variant="neutral" pill>
+      <WaBadge slot="suffix" variant="neutral" pill>
        4
-      </SlBadge>
-    </SlMenuItem>
-    <SlMenuItem>
+      </WaBadge>
+    </WaMenuItem>
+    <WaMenuItem>
      Replies
-      <SlBadge slot="suffix" variant="neutral" pill>
+      <WaBadge slot="suffix" variant="neutral" pill>
        12
-      </SlBadge>
-    </SlMenuItem>
-  </SlMenu>
+      </WaBadge>
+    </WaMenuItem>
+  </WaMenu>
 );
 ```

--- a/docs/pages/components/breadcrumb-item.md
+++ b/docs/pages/components/breadcrumb-item.md
@@ -6,30 +6,30 @@ layout: component
 ---

 ```html:preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>
-    <sl-icon slot="prefix" name="house"></sl-icon>
+<wa-breadcrumb>
+  <wa-breadcrumb-item>
+    <wa-icon slot="prefix" name="house"></wa-icon>
    Home
-  </sl-breadcrumb-item>
-  <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Shirts</sl-breadcrumb-item>
-</sl-breadcrumb>
+  </wa-breadcrumb-item>
+  <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Shirts</wa-breadcrumb-item>
+</wa-breadcrumb>
 ```

 ```jsx:react
-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';
+import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>
-      <SlIcon slot="prefix" name="house"></SlIcon>
+  <WaBreadcrumb>
+    <WaBreadcrumbItem>
+      <WaIcon slot="prefix" name="house"></WaIcon>
      Home
-    </SlBreadcrumbItem>
-    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Shirts</SlBreadcrumbItem>
-  </SlBreadcrumb>
+    </WaBreadcrumbItem>
+    <WaBreadcrumbItem>Clothing</WaBreadcrumbItem>
+    <WaBreadcrumbItem>Shirts</WaBreadcrumbItem>
+  </WaBreadcrumb>
 );
 ```

--- a/docs/pages/components/breadcrumb.md
+++ b/docs/pages/components/breadcrumb.md
@@ -8,25 +8,25 @@ layout: component
 Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.

 ```html:preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>Catalog</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Women's</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Shirts &amp; Tops</sl-breadcrumb-item>
-</sl-breadcrumb>
+<wa-breadcrumb>
+  <wa-breadcrumb-item>Catalog</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Women's</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
+</wa-breadcrumb>
 ```

 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';

 const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>Catalog</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Women's</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Shirts &amp; Tops</SlBreadcrumbItem>
-  </SlBreadcrumb>
+  <WaBreadcrumb>
+    <WaBreadcrumbItem>Catalog</WaBreadcrumbItem>
+    <WaBreadcrumbItem>Clothing</WaBreadcrumbItem>
+    <WaBreadcrumbItem>Women's</WaBreadcrumbItem>
+    <WaBreadcrumbItem>Shirts &amp; Tops</WaBreadcrumbItem>
+  </WaBreadcrumb>
 );
 ```

@@ -39,31 +39,31 @@ By default, breadcrumb items are rendered as buttons so you can use them to navi
 For websites, you'll probably want to use links instead. You can make any breadcrumb item a link by applying an `href` attribute to it. Now, when the user activates it, they'll be taken to the corresponding page — no event listeners required.

 ```html:preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item href="https://example.com/home">Homepage</sl-breadcrumb-item>
+<wa-breadcrumb>
+  <wa-breadcrumb-item href="https://example.com/home">Homepage</wa-breadcrumb-item>

-  <sl-breadcrumb-item href="https://example.com/home/services">Our Services</sl-breadcrumb-item>
+  <wa-breadcrumb-item href="https://example.com/home/services">Our Services</wa-breadcrumb-item>

-  <sl-breadcrumb-item href="https://example.com/home/services/digital">Digital Media</sl-breadcrumb-item>
+  <wa-breadcrumb-item href="https://example.com/home/services/digital">Digital Media</wa-breadcrumb-item>

-  <sl-breadcrumb-item href="https://example.com/home/services/digital/web-design">Web Design</sl-breadcrumb-item>
-</sl-breadcrumb>
+  <wa-breadcrumb-item href="https://example.com/home/services/digital/web-design">Web Design</wa-breadcrumb-item>
+</wa-breadcrumb>
 ```

 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';

 const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem href="https://example.com/home">Homepage</SlBreadcrumbItem>
+  <WaBreadcrumb>
+    <WaBreadcrumbItem href="https://example.com/home">Homepage</WaBreadcrumbItem>

-    <SlBreadcrumbItem href="https://example.com/home/services">Our Services</SlBreadcrumbItem>
+    <WaBreadcrumbItem href="https://example.com/home/services">Our Services</WaBreadcrumbItem>

-    <SlBreadcrumbItem href="https://example.com/home/services/digital">Digital Media</SlBreadcrumbItem>
+    <WaBreadcrumbItem href="https://example.com/home/services/digital">Digital Media</WaBreadcrumbItem>

-    <SlBreadcrumbItem href="https://example.com/home/services/digital/web-design">Web Design</SlBreadcrumbItem>
-  </SlBreadcrumb>
+    <WaBreadcrumbItem href="https://example.com/home/services/digital/web-design">Web Design</WaBreadcrumbItem>
+  </WaBreadcrumb>
 );
 ```

@@ -72,63 +72,63 @@ const App = () => (
 Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.

 ```html:preview
-<sl-breadcrumb>
-  <sl-icon name="dot" slot="separator"></sl-icon>
-  <sl-breadcrumb-item>First</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Third</sl-breadcrumb-item>
-</sl-breadcrumb>
+<wa-breadcrumb>
+  <wa-icon name="dot" slot="separator"></wa-icon>
+  <wa-breadcrumb-item>First</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
+</wa-breadcrumb>

 <br />

-<sl-breadcrumb>
-  <sl-icon name="arrow-right" slot="separator"></sl-icon>
-  <sl-breadcrumb-item>First</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Third</sl-breadcrumb-item>
-</sl-breadcrumb>
+<wa-breadcrumb>
+  <wa-icon name="arrow-right" slot="separator"></wa-icon>
+  <wa-breadcrumb-item>First</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
+</wa-breadcrumb>

 <br />

-<sl-breadcrumb>
+<wa-breadcrumb>
  <span slot="separator">/</span>
-  <sl-breadcrumb-item>First</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Third</sl-breadcrumb-item>
-</sl-breadcrumb>
+  <wa-breadcrumb-item>First</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
+</wa-breadcrumb>
 ```

 ```jsx:react
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';

 const App = () => (
  <>
-    <SlBreadcrumb>
-      <sl-icon name="dot" slot="separator" />
-      <SlBreadcrumbItem>First</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Third</SlBreadcrumbItem>
-    </SlBreadcrumb>
+    <WaBreadcrumb>
+      <wa-icon name="dot" slot="separator" />
+      <WaBreadcrumbItem>First</WaBreadcrumbItem>
+      <WaBreadcrumbItem>Second</WaBreadcrumbItem>
+      <WaBreadcrumbItem>Third</WaBreadcrumbItem>
+    </WaBreadcrumb>

    <br />

-    <SlBreadcrumb>
-      <sl-icon name="arrow-right" slot="separator" />
-      <SlBreadcrumbItem>First</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Third</SlBreadcrumbItem>
-    </SlBreadcrumb>
+    <WaBreadcrumb>
+      <wa-icon name="arrow-right" slot="separator" />
+      <WaBreadcrumbItem>First</WaBreadcrumbItem>
+      <WaBreadcrumbItem>Second</WaBreadcrumbItem>
+      <WaBreadcrumbItem>Third</WaBreadcrumbItem>
+    </WaBreadcrumb>

    <br />

-    <SlBreadcrumb>
+    <WaBreadcrumb>
      <span slot="separator">/</span>
-      <SlBreadcrumbItem>First</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Third</SlBreadcrumbItem>
-    </SlBreadcrumb>
+      <WaBreadcrumbItem>First</WaBreadcrumbItem>
+      <WaBreadcrumbItem>Second</WaBreadcrumbItem>
+      <WaBreadcrumbItem>Third</WaBreadcrumbItem>
+    </WaBreadcrumb>
  </>
 );
 ```
@@ -138,30 +138,30 @@ const App = () => (
 Use the `prefix` slot to add content before any breadcrumb item.

 ```html:preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>
-    <sl-icon slot="prefix" name="house"></sl-icon>
+<wa-breadcrumb>
+  <wa-breadcrumb-item>
+    <wa-icon slot="prefix" name="house"></wa-icon>
    Home
-  </sl-breadcrumb-item>
-  <sl-breadcrumb-item>Articles</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Traveling</sl-breadcrumb-item>
-</sl-breadcrumb>
+  </wa-breadcrumb-item>
+  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
+</wa-breadcrumb>
 ```

 ```jsx:react
-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';
+import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>
-      <SlIcon slot="prefix" name="house" />
+  <WaBreadcrumb>
+    <WaBreadcrumbItem>
+      <WaIcon slot="prefix" name="house" />
      Home
-    </SlBreadcrumbItem>
-    <SlBreadcrumbItem>Articles</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Traveling</SlBreadcrumbItem>
-  </SlBreadcrumb>
+    </WaBreadcrumbItem>
+    <WaBreadcrumbItem>Articles</WaBreadcrumbItem>
+    <WaBreadcrumbItem>Traveling</WaBreadcrumbItem>
+  </WaBreadcrumb>
 );
 ```

@@ -170,30 +170,30 @@ const App = () => (
 Use the `suffix` slot to add content after any breadcrumb item.

 ```html:preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>Documents</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Policies</sl-breadcrumb-item>
-  <sl-breadcrumb-item>
+<wa-breadcrumb>
+  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
+  <wa-breadcrumb-item>
    Security
-    <sl-icon slot="suffix" name="shield-lock"></sl-icon>
-  </sl-breadcrumb-item>
-</sl-breadcrumb>
+    <wa-icon slot="suffix" name="shield-lock"></wa-icon>
+  </wa-breadcrumb-item>
+</wa-breadcrumb>
 ```

 ```jsx:react
-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';
+import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>Documents</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Policies</SlBreadcrumbItem>
-    <SlBreadcrumbItem>
+  <WaBreadcrumb>
+    <WaBreadcrumbItem>Documents</WaBreadcrumbItem>
+    <WaBreadcrumbItem>Policies</WaBreadcrumbItem>
+    <WaBreadcrumbItem>
      Security
-      <SlIcon slot="suffix" name="shield-lock"></SlIcon>
-    </SlBreadcrumbItem>
-  </SlBreadcrumb>
+      <WaIcon slot="suffix" name="shield-lock"></WaIcon>
+    </WaBreadcrumbItem>
+  </WaBreadcrumb>
 );
 ```

@@ -202,57 +202,57 @@ const App = () => (
 Dropdown menus can be placed in a prefix or suffix slot to provide additional options.

 ```html:preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>Homepage</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Our Services</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Digital Media</sl-breadcrumb-item>
-  <sl-breadcrumb-item>
+<wa-breadcrumb>
+  <wa-breadcrumb-item>Homepage</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Our Services</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
+  <wa-breadcrumb-item>
    Web Design
-    <sl-dropdown slot="suffix">
-      <sl-button slot="trigger" size="small" circle>
-        <sl-icon label="More options" name="three-dots"></sl-icon>
-      </sl-button>
-      <sl-menu>
-        <sl-menu-item type="checkbox" checked>Web Design</sl-menu-item>
-        <sl-menu-item type="checkbox">Web Development</sl-menu-item>
-        <sl-menu-item type="checkbox">Marketing</sl-menu-item>
-      </sl-menu>
-    </sl-dropdown>
-  </sl-breadcrumb-item>
-</sl-breadcrumb>
+    <wa-dropdown slot="suffix">
+      <wa-button slot="trigger" size="small" circle>
+        <wa-icon label="More options" name="three-dots"></wa-icon>
+      </wa-button>
+      <wa-menu>
+        <wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
+        <wa-menu-item type="checkbox">Web Development</wa-menu-item>
+        <wa-menu-item type="checkbox">Marketing</wa-menu-item>
+      </wa-menu>
+    </wa-dropdown>
+  </wa-breadcrumb-item>
+</wa-breadcrumb>
 ```

 ```jsx:react
 import {
-  SlBreadcrumb,
-  SlBreadcrumbItem,
-  SlButton,
-  SlDropdown,
-  SlIcon,
-  SlMenu,
-  SlMenuItem
+  WaBreadcrumb,
+  WaBreadcrumbItem,
+  WaButton,
+  WaDropdown,
+  WaIcon,
+  WaMenu,
+  WaMenuItem
 } from '@shoelace-style/shoelace/dist/react';

 const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
-    <SlBreadcrumbItem>
+  <WaBreadcrumb>
+    <WaBreadcrumbItem>Homepage</WaBreadcrumbItem>
+    <WaBreadcrumbItem>Our Services</WaBreadcrumbItem>
+    <WaBreadcrumbItem>Digital Media</WaBreadcrumbItem>
+    <WaBreadcrumbItem>
      Web Design
-      <SlDropdown slot="suffix">
-        <SlButton slot="trigger" size="small" circle>
-          <SlIcon label="More options" name="three-dots"></SlIcon>
-        </SlButton>
-        <SlMenu>
-          <SlMenuItem type="checkbox" checked>
+      <WaDropdown slot="suffix">
+        <WaButton slot="trigger" size="small" circle>
+          <WaIcon label="More options" name="three-dots"></WaIcon>
+        </WaButton>
+        <WaMenu>
+          <WaMenuItem type="checkbox" checked>
            Web Design
-          </SlMenuItem>
-          <SlMenuItem type="checkbox">Web Development</SlMenuItem>
-          <SlMenuItem type="checkbox">Marketing</SlMenuItem>
-        </SlMenu>
-      </SlDropdown>
-    </SlBreadcrumbItem>
-  </SlBreadcrumb>
+          </WaMenuItem>
+          <WaMenuItem type="checkbox">Web Development</WaMenuItem>
+          <WaMenuItem type="checkbox">Marketing</WaMenuItem>
+        </WaMenu>
+      </WaDropdown>
+    </WaBreadcrumbItem>
+  </WaBreadcrumb>
 );
 ```
--- a/docs/pages/components/button-group.md
+++ b/docs/pages/components/button-group.md
@@ -6,23 +6,23 @@ layout: component
 ---

 ```html:preview
-<sl-button-group label="Alignment">
-  <sl-button>Left</sl-button>
-  <sl-button>Center</sl-button>
-  <sl-button>Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button>Left</wa-button>
+  <wa-button>Center</wa-button>
+  <wa-button>Right</wa-button>
+</wa-button-group>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';

 const App = () => (
-  <SlButtonGroup label="Alignment">
-    <SlButton>Left</SlButton>
-    <SlButton>Center</SlButton>
-    <SlButton>Right</SlButton>
-  </SlButtonGroup>
+  <WaButtonGroup label="Alignment">
+    <WaButton>Left</WaButton>
+    <WaButton>Center</WaButton>
+    <WaButton>Right</WaButton>
+  </WaButtonGroup>
 );
 ```

@@ -33,58 +33,58 @@ const App = () => (
 All button sizes are supported, but avoid mixing sizes within the same button group.

 ```html:preview
-<sl-button-group label="Alignment">
-  <sl-button size="small">Left</sl-button>
-  <sl-button size="small">Center</sl-button>
-  <sl-button size="small">Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button size="small">Left</wa-button>
+  <wa-button size="small">Center</wa-button>
+  <wa-button size="small">Right</wa-button>
+</wa-button-group>

 <br /><br />

-<sl-button-group label="Alignment">
-  <sl-button size="medium">Left</sl-button>
-  <sl-button size="medium">Center</sl-button>
-  <sl-button size="medium">Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button size="medium">Left</wa-button>
+  <wa-button size="medium">Center</wa-button>
+  <wa-button size="medium">Right</wa-button>
+</wa-button-group>

 <br /><br />

-<sl-button-group label="Alignment">
-  <sl-button size="large">Left</sl-button>
-  <sl-button size="large">Center</sl-button>
-  <sl-button size="large">Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button size="large">Left</wa-button>
+  <wa-button size="large">Center</wa-button>
+  <wa-button size="large">Right</wa-button>
+</wa-button-group>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';

 const App = () => (
  <>
-    <SlButtonGroup label="Alignment">
-      <SlButton size="small">Left</SlButton>
-      <SlButton size="small">Center</SlButton>
-      <SlButton size="small">Right</SlButton>
-    </SlButtonGroup>
+    <WaButtonGroup label="Alignment">
+      <WaButton size="small">Left</WaButton>
+      <WaButton size="small">Center</WaButton>
+      <WaButton size="small">Right</WaButton>
+    </WaButtonGroup>

    <br />
    <br />

-    <SlButtonGroup label="Alignment">
-      <SlButton size="medium">Left</SlButton>
-      <SlButton size="medium">Center</SlButton>
-      <SlButton size="medium">Right</SlButton>
-    </SlButtonGroup>
+    <WaButtonGroup label="Alignment">
+      <WaButton size="medium">Left</WaButton>
+      <WaButton size="medium">Center</WaButton>
+      <WaButton size="medium">Right</WaButton>
+    </WaButtonGroup>

    <br />
    <br />

-    <SlButtonGroup label="Alignment">
-      <SlButton size="large">Left</SlButton>
-      <SlButton size="large">Center</SlButton>
-      <SlButton size="large">Right</SlButton>
-    </SlButtonGroup>
+    <WaButtonGroup label="Alignment">
+      <WaButton size="large">Left</WaButton>
+      <WaButton size="large">Center</WaButton>
+      <WaButton size="large">Right</WaButton>
+    </WaButtonGroup>
  </>
 );
 ```
@@ -94,92 +94,92 @@ const App = () => (
 Theme buttons are supported through the button's `variant` attribute.

 ```html:preview
-<sl-button-group label="Alignment">
-  <sl-button variant="brand">Left</sl-button>
-  <sl-button variant="brand">Center</sl-button>
-  <sl-button variant="brand">Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button variant="brand">Left</wa-button>
+  <wa-button variant="brand">Center</wa-button>
+  <wa-button variant="brand">Right</wa-button>
+</wa-button-group>

 <br /><br />

-<sl-button-group label="Alignment">
-  <sl-button variant="success">Left</sl-button>
-  <sl-button variant="success">Center</sl-button>
-  <sl-button variant="success">Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button variant="success">Left</wa-button>
+  <wa-button variant="success">Center</wa-button>
+  <wa-button variant="success">Right</wa-button>
+</wa-button-group>

 <br /><br />

-<sl-button-group label="Alignment">
-  <sl-button>Left</sl-button>
-  <sl-button>Center</sl-button>
-  <sl-button>Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button>Left</wa-button>
+  <wa-button>Center</wa-button>
+  <wa-button>Right</wa-button>
+</wa-button-group>

 <br /><br />

-<sl-button-group label="Alignment">
-  <sl-button variant="warning">Left</sl-button>
-  <sl-button variant="warning">Center</sl-button>
-  <sl-button variant="warning">Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button variant="warning">Left</wa-button>
+  <wa-button variant="warning">Center</wa-button>
+  <wa-button variant="warning">Right</wa-button>
+</wa-button-group>

 <br /><br />

-<sl-button-group label="Alignment">
-  <sl-button variant="danger">Left</sl-button>
-  <sl-button variant="danger">Center</sl-button>
-  <sl-button variant="danger">Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button variant="danger">Left</wa-button>
+  <wa-button variant="danger">Center</wa-button>
+  <wa-button variant="danger">Right</wa-button>
+</wa-button-group>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';

 const App = () => (
  <>
-    <SlButtonGroup label="Alignment">
-      <SlButton variant="brand">Left</SlButton>
-      <SlButton variant="brand">Center</SlButton>
-      <SlButton variant="brand">Right</SlButton>
-    </SlButtonGroup>
+    <WaButtonGroup label="Alignment">
+      <WaButton variant="brand">Left</WaButton>
+      <WaButton variant="brand">Center</WaButton>
+      <WaButton variant="brand">Right</WaButton>
+    </WaButtonGroup>

    <br />
    <br />

-    <SlButtonGroup label="Alignment">
-      <SlButton variant="success">Left</SlButton>
-      <SlButton variant="success">Center</SlButton>
-      <SlButton variant="success">Right</SlButton>
-    </SlButtonGroup>
+    <WaButtonGroup label="Alignment">
+      <WaButton variant="success">Left</WaButton>
+      <WaButton variant="success">Center</WaButton>
+      <WaButton variant="success">Right</WaButton>
+    </WaButtonGroup>

    <br />
    <br />

-    <SlButtonGroup label="Alignment">
-      <SlButton>Left</SlButton>
-      <SlButton>Center</SlButton>
-      <SlButton>Right</SlButton>
-    </SlButtonGroup>
+    <WaButtonGroup label="Alignment">
+      <WaButton>Left</WaButton>
+      <WaButton>Center</WaButton>
+      <WaButton>Right</WaButton>
+    </WaButtonGroup>

    <br />
    <br />

-    <SlButtonGroup label="Alignment">
-      <SlButton variant="warning">Left</SlButton>
-      <SlButton variant="warning">Center</SlButton>
-      <SlButton variant="warning">Right</SlButton>
-    </SlButtonGroup>
+    <WaButtonGroup label="Alignment">
+      <WaButton variant="warning">Left</WaButton>
+      <WaButton variant="warning">Center</WaButton>
+      <WaButton variant="warning">Right</WaButton>
+    </WaButtonGroup>

    <br />
    <br />

-    <SlButtonGroup label="Alignment">
-      <SlButton variant="danger">Left</SlButton>
-      <SlButton variant="danger">Center</SlButton>
-      <SlButton variant="danger">Right</SlButton>
-    </SlButtonGroup>
+    <WaButtonGroup label="Alignment">
+      <WaButton variant="danger">Left</WaButton>
+      <WaButton variant="danger">Center</WaButton>
+      <WaButton variant="danger">Right</WaButton>
+    </WaButtonGroup>
  </>
 );
 ```
@@ -189,121 +189,121 @@ const App = () => (
 Pill buttons are supported through the button's `pill` attribute.

 ```html:preview
-<sl-button-group label="Alignment">
-  <sl-button size="small" pill>Left</sl-button>
-  <sl-button size="small" pill>Center</sl-button>
-  <sl-button size="small" pill>Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button size="small" pill>Left</wa-button>
+  <wa-button size="small" pill>Center</wa-button>
+  <wa-button size="small" pill>Right</wa-button>
+</wa-button-group>

 <br /><br />

-<sl-button-group label="Alignment">
-  <sl-button size="medium" pill>Left</sl-button>
-  <sl-button size="medium" pill>Center</sl-button>
-  <sl-button size="medium" pill>Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button size="medium" pill>Left</wa-button>
+  <wa-button size="medium" pill>Center</wa-button>
+  <wa-button size="medium" pill>Right</wa-button>
+</wa-button-group>

 <br /><br />

-<sl-button-group label="Alignment">
-  <sl-button size="large" pill>Left</sl-button>
-  <sl-button size="large" pill>Center</sl-button>
-  <sl-button size="large" pill>Right</sl-button>
-</sl-button-group>
+<wa-button-group label="Alignment">
+  <wa-button size="large" pill>Left</wa-button>
+  <wa-button size="large" pill>Center</wa-button>
+  <wa-button size="large" pill>Right</wa-button>
+</wa-button-group>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';

 const App = () => (
  <>
-    <SlButtonGroup label="Alignment">
-      <SlButton size="small" pill>
+    <WaButtonGroup label="Alignment">
+      <WaButton size="small" pill>
        Left
-      </SlButton>
-      <SlButton size="small" pill>
+      </WaButton>
+      <WaButton size="small" pill>
        Center
-      </SlButton>
-      <SlButton size="small" pill>
+      </WaButton>
+      <WaButton size="small" pill>
        Right
-      </SlButton>
-    </SlButtonGroup>
+      </WaButton>
+    </WaButtonGroup>

    <br />
    <br />

-    <SlButtonGroup label="Alignment">
-      <SlButton size="medium" pill>
+    <WaButtonGroup label="Alignment">
+      <WaButton size="medium" pill>
        Left
-      </SlButton>
-      <SlButton size="medium" pill>
+      </WaButton>
+      <WaButton size="medium" pill>
        Center
-      </SlButton>
-      <SlButton size="medium" pill>
+      </WaButton>
+      <WaButton size="medium" pill>
        Right
-      </SlButton>
-    </SlButtonGroup>
+      </WaButton>
+    </WaButtonGroup>

    <br />
    <br />

-    <SlButtonGroup label="Alignment">
-      <SlButton size="large" pill>
+    <WaButtonGroup label="Alignment">
+      <WaButton size="large" pill>
        Left
-      </SlButton>
-      <SlButton size="large" pill>
+      </WaButton>
+      <WaButton size="large" pill>
        Center
-      </SlButton>
-      <SlButton size="large" pill>
+      </WaButton>
+      <WaButton size="large" pill>
        Right
-      </SlButton>
-    </SlButtonGroup>
+      </WaButton>
+    </WaButtonGroup>
  </>
 );
 ```

 ### Dropdowns in Button Groups

-Dropdowns can be placed inside button groups as long as the trigger is an `<sl-button>` element.
+Dropdowns can be placed inside button groups as long as the trigger is an `<wa-button>` element.

 ```html:preview
-<sl-button-group label="Example Button Group">
-  <sl-button>Button</sl-button>
-  <sl-button>Button</sl-button>
-  <sl-dropdown>
-    <sl-button slot="trigger" caret>Dropdown</sl-button>
-    <sl-menu>
-      <sl-menu-item>Item 1</sl-menu-item>
-      <sl-menu-item>Item 2</sl-menu-item>
-      <sl-menu-item>Item 3</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
-</sl-button-group>
+<wa-button-group label="Example Button Group">
+  <wa-button>Button</wa-button>
+  <wa-button>Button</wa-button>
+  <wa-dropdown>
+    <wa-button slot="trigger" caret>Dropdown</wa-button>
+    <wa-menu>
+      <wa-menu-item>Item 1</wa-menu-item>
+      <wa-menu-item>Item 2</wa-menu-item>
+      <wa-menu-item>Item 3</wa-menu-item>
+    </wa-menu>
+  </wa-dropdown>
+</wa-button-group>
 ```

 ```jsx:react
-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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlButtonGroup label="Example Button Group">
-    <SlButton>Button</SlButton>
-    <SlButton>Button</SlButton>
-    <SlDropdown>
-      <SlButton slot="trigger" caret>
+  <WaButtonGroup label="Example Button Group">
+    <WaButton>Button</WaButton>
+    <WaButton>Button</WaButton>
+    <WaDropdown>
+      <WaButton slot="trigger" caret>
        Dropdown
-      </SlButton>
-      <SlMenu>
-        <SlMenuItem>Item 1</SlMenuItem>
-        <SlMenuItem>Item 2</SlMenuItem>
-        <SlMenuItem>Item 3</SlMenuItem>
-      </SlMenu>
-    </SlDropdown>
-  </SlButtonGroup>
+      </WaButton>
+      <WaMenu>
+        <WaMenuItem>Item 1</WaMenuItem>
+        <WaMenuItem>Item 2</WaMenuItem>
+        <WaMenuItem>Item 3</WaMenuItem>
+      </WaMenu>
+    </WaDropdown>
+  </WaButtonGroup>
 );
 ```

@@ -312,40 +312,40 @@ const App = () => (
 Create a split button using a button and a dropdown. Use a [visually hidden](/components/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices.

 ```html:preview
-<sl-button-group label="Example Button Group">
-  <sl-button variant="brand">Save</sl-button>
-  <sl-dropdown placement="bottom-end">
-    <sl-button slot="trigger" variant="brand" caret>
-      <sl-visually-hidden>More options</sl-visually-hidden>
-    </sl-button>
-    <sl-menu>
-      <sl-menu-item>Save</sl-menu-item>
-      <sl-menu-item>Save as&hellip;</sl-menu-item>
-      <sl-menu-item>Save all</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
-</sl-button-group>
+<wa-button-group label="Example Button Group">
+  <wa-button variant="brand">Save</wa-button>
+  <wa-dropdown placement="bottom-end">
+    <wa-button slot="trigger" variant="brand" caret>
+      <wa-visually-hidden>More options</wa-visually-hidden>
+    </wa-button>
+    <wa-menu>
+      <wa-menu-item>Save</wa-menu-item>
+      <wa-menu-item>Save as&hellip;</wa-menu-item>
+      <wa-menu-item>Save all</wa-menu-item>
+    </wa-menu>
+  </wa-dropdown>
+</wa-button-group>
 ```

 ```jsx:react
-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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlButtonGroup label="Example Button Group">
-    <SlButton variant="brand">Save</SlButton>
-    <SlDropdown placement="bottom-end">
-      <SlButton slot="trigger" variant="brand" caret></SlButton>
-      <SlMenu>
-        <SlMenuItem>Save</SlMenuItem>
-        <SlMenuItem>Save as&hellip;</SlMenuItem>
-        <SlMenuItem>Save all</SlMenuItem>
-      </SlMenu>
-    </SlDropdown>
-  </SlButtonGroup>
+  <WaButtonGroup label="Example Button Group">
+    <WaButton variant="brand">Save</WaButton>
+    <WaDropdown placement="bottom-end">
+      <WaButton slot="trigger" variant="brand" caret></WaButton>
+      <WaMenu>
+        <WaMenuItem>Save</WaMenuItem>
+        <WaMenuItem>Save as&hellip;</WaMenuItem>
+        <WaMenuItem>Save all</WaMenuItem>
+      </WaMenu>
+    </WaDropdown>
+  </WaButtonGroup>
 );
 ```

@@ -354,41 +354,41 @@ const App = () => (
 Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.

 ```html:preview
-<sl-button-group label="Alignment">
-  <sl-tooltip content="I'm on the left">
-    <sl-button>Left</sl-button>
-  </sl-tooltip>
+<wa-button-group label="Alignment">
+  <wa-tooltip content="I'm on the left">
+    <wa-button>Left</wa-button>
+  </wa-tooltip>

-  <sl-tooltip content="I'm in the middle">
-    <sl-button>Center</sl-button>
-  </sl-tooltip>
+  <wa-tooltip content="I'm in the middle">
+    <wa-button>Center</wa-button>
+  </wa-tooltip>

-  <sl-tooltip content="I'm on the right">
-    <sl-button>Right</sl-button>
-  </sl-tooltip>
-</sl-button-group>
+  <wa-tooltip content="I'm on the right">
+    <wa-button>Right</wa-button>
+  </wa-tooltip>
+</wa-button-group>
 ```

 ```jsx:react
-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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';

 const App = () => (
  <>
-    <SlButtonGroup label="Alignment">
-      <SlTooltip content="I'm on the left">
-        <SlButton>Left</SlButton>
-      </SlTooltip>
+    <WaButtonGroup label="Alignment">
+      <WaTooltip content="I'm on the left">
+        <WaButton>Left</WaButton>
+      </WaTooltip>

-      <SlTooltip content="I'm in the middle">
-        <SlButton>Center</SlButton>
-      </SlTooltip>
+      <WaTooltip content="I'm in the middle">
+        <WaButton>Center</WaButton>
+      </WaTooltip>

-      <SlTooltip content="I'm on the right">
-        <SlButton>Right</SlButton>
-      </SlTooltip>
-    </SlButtonGroup>
+      <WaTooltip content="I'm on the right">
+        <WaButton>Right</WaButton>
+      </WaTooltip>
+    </WaButtonGroup>
  </>
 );
 ```
@@ -399,55 +399,55 @@ Create interactive toolbars with button groups.

 ```html:preview
 <div class="button-group-toolbar">
-  <sl-button-group label="History">
-    <sl-tooltip content="Undo">
-      <sl-button><sl-icon name="arrow-counterclockwise" label="Undo"></sl-icon></sl-button>
-    </sl-tooltip>
-    <sl-tooltip content="Redo">
-      <sl-button><sl-icon name="arrow-clockwise" label="Redo"></sl-icon></sl-button>
-    </sl-tooltip>
-  </sl-button-group>
+  <wa-button-group label="History">
+    <wa-tooltip content="Undo">
+      <wa-button><wa-icon name="arrow-counterclockwise" label="Undo"></wa-icon></wa-button>
+    </wa-tooltip>
+    <wa-tooltip content="Redo">
+      <wa-button><wa-icon name="arrow-clockwise" label="Redo"></wa-icon></wa-button>
+    </wa-tooltip>
+  </wa-button-group>

-  <sl-button-group label="Formatting">
-    <sl-tooltip content="Bold">
-      <sl-button><sl-icon name="type-bold" label="Bold"></sl-icon></sl-button>
-    </sl-tooltip>
-    <sl-tooltip content="Italic">
-      <sl-button><sl-icon name="type-italic" label="Italic"></sl-icon></sl-button>
-    </sl-tooltip>
-    <sl-tooltip content="Underline">
-      <sl-button><sl-icon name="type-underline" label="Underline"></sl-icon></sl-button>
-    </sl-tooltip>
-  </sl-button-group>
+  <wa-button-group label="Formatting">
+    <wa-tooltip content="Bold">
+      <wa-button><wa-icon name="type-bold" label="Bold"></wa-icon></wa-button>
+    </wa-tooltip>
+    <wa-tooltip content="Italic">
+      <wa-button><wa-icon name="type-italic" label="Italic"></wa-icon></wa-button>
+    </wa-tooltip>
+    <wa-tooltip content="Underline">
+      <wa-button><wa-icon name="type-underline" label="Underline"></wa-icon></wa-button>
+    </wa-tooltip>
+  </wa-button-group>

-  <sl-button-group label="Alignment">
-    <sl-tooltip content="Align Left">
-      <sl-button><sl-icon name="justify-left" label="Align Left"></sl-icon></sl-button>
-    </sl-tooltip>
-    <sl-tooltip content="Align Center">
-      <sl-button><sl-icon name="justify" label="Align Center"></sl-icon></sl-button>
-    </sl-tooltip>
-    <sl-tooltip content="Align Right">
-      <sl-button><sl-icon name="justify-right" label="Align Right"></sl-icon></sl-button>
-    </sl-tooltip>
-  </sl-button-group>
+  <wa-button-group label="Alignment">
+    <wa-tooltip content="Align Left">
+      <wa-button><wa-icon name="justify-left" label="Align Left"></wa-icon></wa-button>
+    </wa-tooltip>
+    <wa-tooltip content="Align Center">
+      <wa-button><wa-icon name="justify" label="Align Center"></wa-icon></wa-button>
+    </wa-tooltip>
+    <wa-tooltip content="Align Right">
+      <wa-button><wa-icon name="justify-right" label="Align Right"></wa-icon></wa-button>
+    </wa-tooltip>
+  </wa-button-group>
 </div>

 <style>
-  .button-group-toolbar sl-button-group:not(:last-of-type) {
+  .button-group-toolbar wa-button-group:not(:last-of-type) {
    margin-right: var(--wa-space-xs);
  }
 </style>
 ```

 ```jsx:react
-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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';

 const css = `
-  .button-group-toolbar sl-button-group:not(:last-of-type) {
+  .button-group-toolbar wa-button-group:not(:last-of-type) {
    margin-right: var(--wa-space-xs);
  }
 `;
@@ -455,54 +455,54 @@ const css = `
 const App = () => (
  <>
    <div className="button-group-toolbar">
-      <SlButtonGroup label="History">
-        <SlTooltip content="Undo">
-          <SlButton>
-            <SlIcon name="arrow-counterclockwise"></SlIcon>
-          </SlButton>
-        </SlTooltip>
-        <SlTooltip content="Redo">
-          <SlButton>
-            <SlIcon name="arrow-clockwise"></SlIcon>
-          </SlButton>
-        </SlTooltip>
-      </SlButtonGroup>
+      <WaButtonGroup label="History">
+        <WaTooltip content="Undo">
+          <WaButton>
+            <WaIcon name="arrow-counterclockwise"></WaIcon>
+          </WaButton>
+        </WaTooltip>
+        <WaTooltip content="Redo">
+          <WaButton>
+            <WaIcon name="arrow-clockwise"></WaIcon>
+          </WaButton>
+        </WaTooltip>
+      </WaButtonGroup>

-      <SlButtonGroup label="Formatting">
-        <SlTooltip content="Bold">
-          <SlButton>
-            <SlIcon name="type-bold"></SlIcon>
-          </SlButton>
-        </SlTooltip>
-        <SlTooltip content="Italic">
-          <SlButton>
-            <SlIcon name="type-italic"></SlIcon>
-          </SlButton>
-        </SlTooltip>
-        <SlTooltip content="Underline">
-          <SlButton>
-            <SlIcon name="type-underline"></SlIcon>
-          </SlButton>
-        </SlTooltip>
-      </SlButtonGroup>
+      <WaButtonGroup label="Formatting">
+        <WaTooltip content="Bold">
+          <WaButton>
+            <WaIcon name="type-bold"></WaIcon>
+          </WaButton>
+        </WaTooltip>
+        <WaTooltip content="Italic">
+          <WaButton>
+            <WaIcon name="type-italic"></WaIcon>
+          </WaButton>
+        </WaTooltip>
+        <WaTooltip content="Underline">
+          <WaButton>
+            <WaIcon name="type-underline"></WaIcon>
+          </WaButton>
+        </WaTooltip>
+      </WaButtonGroup>

-      <SlButtonGroup label="Alignment">
-        <SlTooltip content="Align Left">
-          <SlButton>
-            <SlIcon name="justify-left"></SlIcon>
-          </SlButton>
-        </SlTooltip>
-        <SlTooltip content="Align Center">
-          <SlButton>
-            <SlIcon name="justify"></SlIcon>
-          </SlButton>
-        </SlTooltip>
-        <SlTooltip content="Align Right">
-          <SlButton>
-            <SlIcon name="justify-right"></SlIcon>
-          </SlButton>
-        </SlTooltip>
-      </SlButtonGroup>
+      <WaButtonGroup label="Alignment">
+        <WaTooltip content="Align Left">
+          <WaButton>
+            <WaIcon name="justify-left"></WaIcon>
+          </WaButton>
+        </WaTooltip>
+        <WaTooltip content="Align Center">
+          <WaButton>
+            <WaIcon name="justify"></WaIcon>
+          </WaButton>
+        </WaTooltip>
+        <WaTooltip content="Align Right">
+          <WaButton>
+            <WaIcon name="justify-right"></WaIcon>
+          </WaButton>
+        </WaTooltip>
+      </WaButtonGroup>
    </div>

    <style>{css}</style>
--- a/docs/pages/components/button.md
+++ b/docs/pages/components/button.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-button>Button</sl-button>
+<wa-button>Button</wa-button>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

-const App = () => <SlButton>Button</SlButton>;
+const App = () => <WaButton>Button</WaButton>;
 ```

 ## Examples
@@ -22,23 +22,23 @@ const App = () => <SlButton>Button</SlButton>;
 Use the `variant` attribute to set the button's variant.

 ```html:preview
-<sl-button variant="brand">Brand</sl-button>
-<sl-button variant="success">Success</sl-button>
-<sl-button variant="neutral">Neutral</sl-button>
-<sl-button variant="warning">Warning</sl-button>
-<sl-button variant="danger">Danger</sl-button>
+<wa-button variant="brand">Brand</wa-button>
+<wa-button variant="success">Success</wa-button>
+<wa-button variant="neutral">Neutral</wa-button>
+<wa-button variant="warning">Warning</wa-button>
+<wa-button variant="danger">Danger</wa-button>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => (
  <>
-    <SlButton variant="brand">Brand</SlButton>
-    <SlButton variant="success">Success</SlButton>
-    <SlButton variant="neutral">Neutral</SlButton>
-    <SlButton variant="warning">Warning</SlButton>
-    <SlButton variant="danger">Danger</SlButton>
+    <WaButton variant="brand">Brand</WaButton>
+    <WaButton variant="success">Success</WaButton>
+    <WaButton variant="neutral">Neutral</WaButton>
+    <WaButton variant="warning">Warning</WaButton>
+    <WaButton variant="danger">Danger</WaButton>
  </>
 );
 ```
@@ -48,19 +48,19 @@ const App = () => (
 Use the `size` attribute to change a button's size.

 ```html:preview
-<sl-button size="small">Small</sl-button>
-<sl-button size="medium">Medium</sl-button>
-<sl-button size="large">Large</sl-button>
+<wa-button size="small">Small</wa-button>
+<wa-button size="medium">Medium</wa-button>
+<wa-button size="large">Large</wa-button>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => (
  <>
-    <SlButton size="small">Small</SlButton>
-    <SlButton size="medium">Medium</SlButton>
-    <SlButton size="large">Large</SlButton>
+    <WaButton size="small">Small</WaButton>
+    <WaButton size="medium">Medium</WaButton>
+    <WaButton size="large">Large</WaButton>
  </>
 );
 ```
@@ -70,33 +70,33 @@ const App = () => (
 Use the `outline` attribute to draw outlined buttons with transparent backgrounds.

 ```html:preview
-<sl-button variant="brand" outline>Brand</sl-button>
-<sl-button variant="success" outline>Success</sl-button>
-<sl-button variant="neutral" outline>Neutral</sl-button>
-<sl-button variant="warning" outline>Warning</sl-button>
-<sl-button variant="danger" outline>Danger</sl-button>
+<wa-button variant="brand" outline>Brand</wa-button>
+<wa-button variant="success" outline>Success</wa-button>
+<wa-button variant="neutral" outline>Neutral</wa-button>
+<wa-button variant="warning" outline>Warning</wa-button>
+<wa-button variant="danger" outline>Danger</wa-button>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => (
  <>
-    <SlButton variant="brand" outline>
+    <WaButton variant="brand" outline>
      Brand
-    </SlButton>
-    <SlButton variant="success" outline>
+    </WaButton>
+    <WaButton variant="success" outline>
      Success
-    </SlButton>
-    <SlButton variant="neutral" outline>
+    </WaButton>
+    <WaButton variant="neutral" outline>
      Neutral
-    </SlButton>
-    <SlButton variant="warning" outline>
+    </WaButton>
+    <WaButton variant="warning" outline>
      Warning
-    </SlButton>
-    <SlButton variant="danger" outline>
+    </WaButton>
+    <WaButton variant="danger" outline>
      Danger
-    </SlButton>
+    </WaButton>
  </>
 );
 ```
@@ -106,25 +106,25 @@ const App = () => (
 Use the `pill` attribute to give buttons rounded edges.

 ```html:preview
-<sl-button size="small" pill>Small</sl-button>
-<sl-button size="medium" pill>Medium</sl-button>
-<sl-button size="large" pill>Large</sl-button>
+<wa-button size="small" pill>Small</wa-button>
+<wa-button size="medium" pill>Medium</wa-button>
+<wa-button size="large" pill>Large</wa-button>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => (
  <>
-    <SlButton size="small" pill>
+    <WaButton size="small" pill>
      Small
-    </SlButton>
-    <SlButton size="medium" pill>
+    </WaButton>
+    <WaButton size="medium" pill>
      Medium
-    </SlButton>
-    <SlButton size="large" pill>
+    </WaButton>
+    <WaButton size="large" pill>
      Large
-    </SlButton>
+    </WaButton>
  </>
 );
 ```
@@ -134,25 +134,25 @@ const App = () => (
 Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.

 ```html:preview
-<sl-button variant="text" size="small">Text</sl-button>
-<sl-button variant="text" size="medium">Text</sl-button>
-<sl-button variant="text" size="large">Text</sl-button>
+<wa-button variant="text" size="small">Text</wa-button>
+<wa-button variant="text" size="medium">Text</wa-button>
+<wa-button variant="text" size="large">Text</wa-button>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => (
  <>
-    <SlButton variant="text" size="small">
+    <WaButton variant="text" size="small">
      Text
-    </SlButton>
-    <SlButton variant="text" size="medium">
+    </WaButton>
+    <WaButton variant="text" size="medium">
      Text
-    </SlButton>
-    <SlButton variant="text" size="large">
+    </WaButton>
+    <WaButton variant="text" size="large">
      Text
-    </SlButton>
+    </WaButton>
  </>
 );
 ```
@@ -162,27 +162,27 @@ const App = () => (
 It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `target` and `download` attributes.

 ```html:preview
-<sl-button href="https://example.com/">Link</sl-button>
-<sl-button href="https://example.com/" target="_blank">New Window</sl-button>
-<sl-button href="/assets/images/wordmark.svg" download="shoelace.svg">Download</sl-button>
-<sl-button href="https://example.com/" disabled>Disabled</sl-button>
+<wa-button href="https://example.com/">Link</wa-button>
+<wa-button href="https://example.com/" target="_blank">New Window</wa-button>
+<wa-button href="/assets/images/wordmark.svg" download="shoelace.svg">Download</wa-button>
+<wa-button href="https://example.com/" disabled>Disabled</wa-button>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => (
  <>
-    <SlButton href="https://example.com/">Link</SlButton>
-    <SlButton href="https://example.com/" target="_blank">
+    <WaButton href="https://example.com/">Link</WaButton>
+    <WaButton href="https://example.com/" target="_blank">
      New Window
-    </SlButton>
-    <SlButton href="/assets/images/wordmark.svg" download="shoelace.svg">
+    </WaButton>
+    <WaButton href="/assets/images/wordmark.svg" download="shoelace.svg">
      Download
-    </SlButton>
-    <SlButton href="https://example.com/" disabled>
+    </WaButton>
+    <WaButton href="https://example.com/" disabled>
      Disabled
-    </SlButton>
+    </WaButton>
  </>
 );
 ```
@@ -196,27 +196,27 @@ When a `target` is set, the link will receive `rel="noreferrer noopener"` for [s
 As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.

 ```html:preview
-<sl-button size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
-<sl-button size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
-<sl-button size="large" style="width: 100%;">Large</sl-button>
+<wa-button size="small" style="width: 100%; margin-bottom: 1rem;">Small</wa-button>
+<wa-button size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</wa-button>
+<wa-button size="large" style="width: 100%;">Large</wa-button>
 ```

 {% raw %}

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => (
  <>
-    <SlButton size="small" style={{ width: '100%', marginBottom: '1rem' }}>
+    <WaButton size="small" style={{ width: '100%', marginBottom: '1rem' }}>
      Small
-    </SlButton>
-    <SlButton size="medium" style={{ width: '100%', marginBottom: '1rem' }}>
+    </WaButton>
+    <WaButton size="medium" style={{ width: '100%', marginBottom: '1rem' }}>
      Medium
-    </SlButton>
-    <SlButton size="large" style={{ width: '100%' }}>
+    </WaButton>
+    <WaButton size="large" style={{ width: '100%' }}>
      Large
-    </SlButton>
+    </WaButton>
  </>
 );
 ```
@@ -228,118 +228,118 @@ const App = () => (
 Use the `prefix` and `suffix` slots to add icons.

 ```html:preview
-<sl-button size="small">
-  <sl-icon slot="prefix" name="gear"></sl-icon>
+<wa-button size="small">
+  <wa-icon slot="prefix" name="gear"></wa-icon>
  Settings
-</sl-button>
+</wa-button>

-<sl-button size="small">
-  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
+<wa-button size="small">
+  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
  Refresh
-</sl-button>
+</wa-button>

-<sl-button size="small">
-  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
-  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
+<wa-button size="small">
+  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
+  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
  Open
-</sl-button>
+</wa-button>

 <br /><br />

-<sl-button>
-  <sl-icon slot="prefix" name="gear"></sl-icon>
+<wa-button>
+  <wa-icon slot="prefix" name="gear"></wa-icon>
  Settings
-</sl-button>
+</wa-button>

-<sl-button>
-  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
+<wa-button>
+  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
  Refresh
-</sl-button>
+</wa-button>

-<sl-button>
-  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
-  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
+<wa-button>
+  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
+  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
  Open
-</sl-button>
+</wa-button>

 <br /><br />

-<sl-button size="large">
-  <sl-icon slot="prefix" name="gear"></sl-icon>
+<wa-button size="large">
+  <wa-icon slot="prefix" name="gear"></wa-icon>
  Settings
-</sl-button>
+</wa-button>

-<sl-button size="large">
-  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
+<wa-button size="large">
+  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
  Refresh
-</sl-button>
+</wa-button>

-<sl-button size="large">
-  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
-  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
+<wa-button size="large">
+  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
+  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
  Open
-</sl-button>
+</wa-button>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
  <>
-    <SlButton size="small">
-      <SlIcon slot="prefix" name="gear"></SlIcon>
+    <WaButton size="small">
+      <WaIcon slot="prefix" name="gear"></WaIcon>
      Settings
-    </SlButton>
+    </WaButton>

-    <SlButton size="small">
-      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
+    <WaButton size="small">
+      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
      Refresh
-    </SlButton>
+    </WaButton>

-    <SlButton size="small">
-      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
-      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
+    <WaButton size="small">
+      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
+      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
      Open
-    </SlButton>
+    </WaButton>

    <br />
    <br />

-    <SlButton>
-      <SlIcon slot="prefix" name="gear"></SlIcon>
+    <WaButton>
+      <WaIcon slot="prefix" name="gear"></WaIcon>
      Settings
-    </SlButton>
+    </WaButton>

-    <SlButton>
-      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
+    <WaButton>
+      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
      Refresh
-    </SlButton>
+    </WaButton>

-    <SlButton>
-      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
-      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
+    <WaButton>
+      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
+      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
      Open
-    </SlButton>
+    </WaButton>

    <br />
    <br />

-    <SlButton size="large">
-      <SlIcon slot="prefix" name="gear"></SlIcon>
+    <WaButton size="large">
+      <WaIcon slot="prefix" name="gear"></WaIcon>
      Settings
-    </SlButton>
+    </WaButton>

-    <SlButton size="large">
-      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
+    <WaButton size="large">
+      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
      Refresh
-    </SlButton>
+    </WaButton>

-    <SlButton size="large">
-      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
-      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
+    <WaButton size="large">
+      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
+      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
      Open
-    </SlButton>
+    </WaButton>
  </>
 );
 ```
@@ -349,25 +349,25 @@ const App = () => (
 Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.

 ```html:preview
-<sl-button size="small" caret>Small</sl-button>
-<sl-button size="medium" caret>Medium</sl-button>
-<sl-button size="large" caret>Large</sl-button>
+<wa-button size="small" caret>Small</wa-button>
+<wa-button size="medium" caret>Medium</wa-button>
+<wa-button size="large" caret>Large</wa-button>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => (
  <>
-    <SlButton size="small" caret>
+    <WaButton size="small" caret>
      Small
-    </SlButton>
-    <SlButton size="medium" caret>
+    </WaButton>
+    <WaButton size="medium" caret>
      Medium
-    </SlButton>
-    <SlButton size="large" caret>
+    </WaButton>
+    <WaButton size="large" caret>
      Large
-    </SlButton>
+    </WaButton>
  </>
 );
 ```
@@ -377,33 +377,33 @@ const App = () => (
 Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.

 ```html:preview
-<sl-button variant="brand" loading>Brand</sl-button>
-<sl-button variant="success" loading>Success</sl-button>
-<sl-button variant="neutral" loading>Neutral</sl-button>
-<sl-button variant="warning" loading>Warning</sl-button>
-<sl-button variant="danger" loading>Danger</sl-button>
+<wa-button variant="brand" loading>Brand</wa-button>
+<wa-button variant="success" loading>Success</wa-button>
+<wa-button variant="neutral" loading>Neutral</wa-button>
+<wa-button variant="warning" loading>Warning</wa-button>
+<wa-button variant="danger" loading>Danger</wa-button>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => (
  <>
-    <SlButton variant="brand" loading>
+    <WaButton variant="brand" loading>
      Brand
-    </SlButton>
-    <SlButton variant="success" loading>
+    </WaButton>
+    <WaButton variant="success" loading>
      Success
-    </SlButton>
-    <SlButton variant="neutral" loading>
+    </WaButton>
+    <WaButton variant="neutral" loading>
      Neutral
-    </SlButton>
-    <SlButton variant="warning" loading>
+    </WaButton>
+    <WaButton variant="warning" loading>
      Warning
-    </SlButton>
-    <SlButton variant="danger" loading>
+    </WaButton>
+    <WaButton variant="danger" loading>
      Danger
-    </SlButton>
+    </WaButton>
  </>
 );
 ```
@@ -413,50 +413,50 @@ const App = () => (
 Use the `disabled` attribute to disable a button.

 ```html:preview
-<sl-button variant="brand" disabled>Brand</sl-button>
-<sl-button variant="success" disabled>Success</sl-button>
-<sl-button variant="neutral" disabled>Neutral</sl-button>
-<sl-button variant="warning" disabled>Warning</sl-button>
-<sl-button variant="danger" disabled>Danger</sl-button>
+<wa-button variant="brand" disabled>Brand</wa-button>
+<wa-button variant="success" disabled>Success</wa-button>
+<wa-button variant="neutral" disabled>Neutral</wa-button>
+<wa-button variant="warning" disabled>Warning</wa-button>
+<wa-button variant="danger" disabled>Danger</wa-button>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';

 const App = () => (
  <>
-    <SlButton variant="brand" disabled>
+    <WaButton variant="brand" disabled>
      Brand
-    </SlButton>
+    </WaButton>

-    <SlButton variant="success" disabled>
+    <WaButton variant="success" disabled>
      Success
-    </SlButton>
+    </WaButton>

-    <SlButton variant="neutral" disabled>
+    <WaButton variant="neutral" disabled>
      Neutral
-    </SlButton>
+    </WaButton>

-    <SlButton variant="warning" disabled>
+    <WaButton variant="warning" disabled>
      Warning
-    </SlButton>
+    </WaButton>

-    <SlButton variant="danger" disabled>
+    <WaButton variant="danger" disabled>
      Danger
-    </SlButton>
+    </WaButton>
  </>
 );
 ```

 ### Styling Buttons

-This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's `variant` attribute instead of a class (e.g. `sl-button[variant="brand"]`).
+This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's `variant` attribute instead of a class (e.g. `wa-button[variant="brand"]`).

 ```html:preview
-<sl-button class="pink">Pink Button</sl-button>
+<wa-button class="pink">Pink Button</wa-button>

 <style>
-  sl-button.pink::part(base) {
+  wa-button.pink::part(base) {
    border-radius: 6px;
    border: solid 2px;
    background-color: #ff1493;
@@ -470,11 +470,11 @@ This example demonstrates how to style buttons using a custom class. This is the
    transition: var(--wa-transition-normal) all;
  }

-  sl-button.pink::part(base):hover {
+  wa-button.pink::part(base):hover {
    transform: scale(1.05);
  }

-  sl-button.pink::part(base):active {
+  wa-button.pink::part(base):active {
    border-top-color: #ad005c;
    border-right-color: #ff7ac1;
    border-bottom-color: #ff7ac1;
@@ -482,7 +482,7 @@ This example demonstrates how to style buttons using a custom class. This is the
    transform: translateY(1px);
  }

-  sl-button.pink::part(base):focus-visible {
+  wa-button.pink::part(base):focus-visible {
    outline: dashed 2px deeppink;
    outline-offset: 4px;
  }
--- a/docs/pages/components/card.md
+++ b/docs/pages/components/card.md
@@ -6,7 +6,7 @@ layout: component
 ---

 ```html:preview
-<sl-card class="card-overview">
+<wa-card class="card-overview">
  <img
    slot="image"
    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
@@ -18,10 +18,10 @@ layout: component
  <small>6 weeks old</small>

  <div slot="footer">
-    <sl-button variant="brand" pill>More Info</sl-button>
-    <sl-rating></sl-rating>
+    <wa-button variant="brand" pill>More Info</wa-button>
+    <wa-rating></wa-rating>
  </div>
-</sl-card>
+</wa-card>

 <style>
  .card-overview {
@@ -41,9 +41,9 @@ layout: component
 ```

 ```jsx:react
-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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaCard from '@shoelace-style/shoelace/dist/react/card';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

 const css = `
  .card-overview {
@@ -63,7 +63,7 @@ const css = `

 const App = () => (
  <>
-    <SlCard className="card-overview">
+    <WaCard className="card-overview">
      <img
        slot="image"
        src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
@@ -75,12 +75,12 @@ const App = () => (
      <br />
      <small>6 weeks old</small>
      <div slot="footer">
-        <SlButton variant="brand" pill>
+        <WaButton variant="brand" pill>
          More Info
-        </SlButton>
-        <SlRating></SlRating>
+        </WaButton>
+        <WaRating></WaRating>
      </div>
-    </SlCard>
+    </WaCard>

    <style>{css}</style>
  </>
@@ -94,9 +94,9 @@ const App = () => (
 Basic cards aren't very exciting, but they can display any content you want them to.

 ```html:preview
-<sl-card class="card-basic">
+<wa-card class="card-basic">
  This is just a basic card. No image, no header, and no footer. Just your content.
-</sl-card>
+</wa-card>

 <style>
  .card-basic {
@@ -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/card';
+import WaCard from '@shoelace-style/shoelace/dist/react/card';

 const css = `
  .card-basic {
@@ -116,9 +116,9 @@ const css = `

 const App = () => (
  <>
-    <SlCard className="card-basic">
+    <WaCard className="card-basic">
      This is just a basic card. No image, no header, and no footer. Just your content.
-    </SlCard>
+    </WaCard>

    <style>{css}</style>
  </>
@@ -130,14 +130,14 @@ const App = () => (
 Headers can be used to display titles and more.

 ```html:preview
-<sl-card class="card-header">
+<wa-card class="card-header">
  <div slot="header">
    Header Title
-    <sl-icon-button name="gear" label="Settings"></sl-icon-button>
+    <wa-icon-button name="gear" label="Settings"></wa-icon-button>
  </div>

  This card has a header. You can put all sorts of things in it!
-</sl-card>
+</wa-card>

 <style>
  .card-header {
@@ -154,15 +154,15 @@ Headers can be used to display titles and more.
    margin: 0;
  }

-  .card-header sl-icon-button {
+  .card-header wa-icon-button {
    font-size: var(--wa-font-size-m);
  }
 </style>
 ```

 ```jsx:react
-import SlCard from '@shoelace-style/shoelace/dist/react/card';
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaCard from '@shoelace-style/shoelace/dist/react/card';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';

 const css = `
  .card-header {
@@ -179,20 +179,20 @@ const css = `
    margin: 0;
  }

-  .card-header sl-icon-button {
+  .card-header wa-icon-button {
    font-size: var(--wa-font-size-m);
  }
 `;

 const App = () => (
  <>
-    <SlCard className="card-header">
+    <WaCard className="card-header">
      <div slot="header">
        Header Title
-        <SlIconButton name="gear"></SlIconButton>
+        <WaIconButton name="gear"></WaIconButton>
      </div>
      This card has a header. You can put all sorts of things in it!
-    </SlCard>
+    </WaCard>

    <style>{css}</style>
  </>
@@ -204,14 +204,14 @@ const App = () => (
 Footers can be used to display actions, summaries, or other relevant content.

 ```html:preview
-<sl-card class="card-footer">
+<wa-card class="card-footer">
  This card has a footer. You can put all sorts of things in it!

  <div slot="footer">
-    <sl-rating></sl-rating>
-    <sl-button variant="brand">Preview</sl-button>
+    <wa-rating></wa-rating>
+    <wa-button variant="brand">Preview</wa-button>
  </div>
-</sl-card>
+</wa-card>

 <style>
  .card-footer {
@@ -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/button';
-import SlCard from '@shoelace-style/shoelace/dist/react/card';
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaCard from '@shoelace-style/shoelace/dist/react/card';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

 const css = `
  .card-footer {
@@ -245,15 +245,15 @@ const css = `

 const App = () => (
  <>
-    <SlCard className="card-footer">
+    <WaCard className="card-footer">
      This card has a footer. You can put all sorts of things in it!
      <div slot="footer">
-        <SlRating></SlRating>
-        <SlButton slot="footer" variant="brand">
+        <WaRating></WaRating>
+        <WaButton slot="footer" variant="brand">
          Preview
-        </SlButton>
+        </WaButton>
      </div>
-    </SlCard>
+    </WaCard>

    <style>{css}</style>
  </>
@@ -265,14 +265,14 @@ const App = () => (
 Cards accept an `image` slot. The image is displayed atop the card and stretches to fit.

 ```html:preview
-<sl-card class="card-image">
+<wa-card class="card-image">
  <img
    slot="image"
    src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
    alt="A kitten walks towards camera on top of pallet."
  />
  This is a kitten, but not just any kitten. This kitten likes walking along pallets.
-</sl-card>
+</wa-card>

 <style>
  .card-image {
@@ -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/card';
+import WaCard from '@shoelace-style/shoelace/dist/react/card';

 const css = `
  .card-image {
@@ -292,14 +292,14 @@ const css = `

 const App = () => (
  <>
-    <SlCard className="card-image">
+    <WaCard className="card-image">
      <img
        slot="image"
        src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
        alt="A kitten walks towards camera on top of pallet."
      />
      This is a kitten, but not just any kitten. This kitten likes walking along pallets.
-    </SlCard>
+    </WaCard>

    <style>{css}</style>
  </>
--- a/docs/pages/components/carousel-item.md
+++ b/docs/pages/components/carousel-item.md
@@ -6,77 +6,77 @@ layout: component
 ---

 ```html:preview
-<sl-carousel pagination>
-  <sl-carousel-item>
+<wa-carousel pagination>
+  <wa-carousel-item>
    <img
      alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
      src="/assets/examples/carousel/mountains.jpg"
    />
-  </sl-carousel-item>
-  <sl-carousel-item>
+  </wa-carousel-item>
+  <wa-carousel-item>
    <img
      alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
      src="/assets/examples/carousel/waterfall.jpg"
    />
-  </sl-carousel-item>
-  <sl-carousel-item>
+  </wa-carousel-item>
+  <wa-carousel-item>
    <img
      alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
      src="/assets/examples/carousel/sunset.jpg"
    />
-  </sl-carousel-item>
-  <sl-carousel-item>
+  </wa-carousel-item>
+  <wa-carousel-item>
    <img
      alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
      src="/assets/examples/carousel/field.jpg"
    />
-  </sl-carousel-item>
-  <sl-carousel-item>
+  </wa-carousel-item>
+  <wa-carousel-item>
    <img
      alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
      src="/assets/examples/carousel/valley.jpg"
    />
-  </sl-carousel-item>
-</sl-carousel>
+  </wa-carousel-item>
+</wa-carousel>
 ```

 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';

 const App = () => (
-  <SlCarousel pagination>
-    <SlCarouselItem>
+  <WaCarousel pagination>
+    <WaCarouselItem>
      <img
        alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
        src="/assets/examples/carousel/mountains.jpg"
      />
-    </SlCarouselItem>
-    <SlCarouselItem>
+    </WaCarouselItem>
+    <WaCarouselItem>
      <img
        alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
        src="/assets/examples/carousel/waterfall.jpg"
      />
-    </SlCarouselItem>
-    <SlCarouselItem>
+    </WaCarouselItem>
+    <WaCarouselItem>
      <img
        alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
        src="/assets/examples/carousel/sunset.jpg"
      />
-    </SlCarouselItem>
-    <SlCarouselItem>
+    </WaCarouselItem>
+    <WaCarouselItem>
      <img
        alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
        src="/assets/examples/carousel/field.jpg"
      />
-    </SlCarouselItem>
-    <SlCarouselItem>
+    </WaCarouselItem>
+    <WaCarouselItem>
      <img
        alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
        src="/assets/examples/carousel/valley.jpg"
      />
-    </SlCarouselItem>
-  </SlCarousel>
+    </WaCarouselItem>
+  </WaCarousel>
 );
 ```

--- a/docs/pages/components/carousel.md
+++ b/docs/pages/components/carousel.md
--- a/docs/pages/components/checkbox.md
+++ b/docs/pages/components/checkbox.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-checkbox>Checkbox</sl-checkbox>
+<wa-checkbox>Checkbox</wa-checkbox>
 ```

 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';

-const App = () => <SlCheckbox>Checkbox</SlCheckbox>;
+const App = () => <WaCheckbox>Checkbox</WaCheckbox>;
 ```

 :::tip
@@ -26,13 +26,13 @@ This component works with standard `<form>` elements. Please refer to the sectio
 Use the `checked` attribute to activate the checkbox.

 ```html:preview
-<sl-checkbox checked>Checked</sl-checkbox>
+<wa-checkbox checked>Checked</wa-checkbox>
 ```

 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';

-const App = () => <SlCheckbox checked>Checked</SlCheckbox>;
+const App = () => <WaCheckbox checked>Checked</WaCheckbox>;
 ```

 ### Indeterminate
@@ -40,13 +40,13 @@ const App = () => <SlCheckbox checked>Checked</SlCheckbox>;
 Use the `indeterminate` attribute to make the checkbox indeterminate.

 ```html:preview
-<sl-checkbox indeterminate>Indeterminate</sl-checkbox>
+<wa-checkbox indeterminate>Indeterminate</wa-checkbox>
 ```

 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';

-const App = () => <SlCheckbox indeterminate>Indeterminate</SlCheckbox>;
+const App = () => <WaCheckbox indeterminate>Indeterminate</WaCheckbox>;
 ```

 ### Disabled
@@ -54,13 +54,13 @@ const App = () => <SlCheckbox indeterminate>Indeterminate</SlCheckbox>;
 Use the `disabled` attribute to disable the checkbox.

 ```html:preview
-<sl-checkbox disabled>Disabled</sl-checkbox>
+<wa-checkbox disabled>Disabled</wa-checkbox>
 ```

 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';

-const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
+const App = () => <WaCheckbox disabled>Disabled</WaCheckbox>;
 ```

 ### Sizes
@@ -68,23 +68,23 @@ const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
 Use the `size` attribute to change a checkbox's size.

 ```html:preview
-<sl-checkbox size="small">Small</sl-checkbox>
+<wa-checkbox size="small">Small</wa-checkbox>
 <br />
-<sl-checkbox size="medium">Medium</sl-checkbox>
+<wa-checkbox size="medium">Medium</wa-checkbox>
 <br />
-<sl-checkbox size="large">Large</sl-checkbox>
+<wa-checkbox size="large">Large</wa-checkbox>
 ```

 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';

 const App = () => (
  <>
-    <SlCheckbox size="small">Small</SlCheckbox>
+    <WaCheckbox size="small">Small</WaCheckbox>
    <br />
-    <SlCheckbox size="medium">Medium</SlCheckbox>
+    <WaCheckbox size="medium">Medium</WaCheckbox>
    <br />
-    <SlCheckbox size="large">Large</SlCheckbox>
+    <WaCheckbox size="large">Large</WaCheckbox>
  </>
 );
 ```
@@ -95,28 +95,28 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi

 ```html:preview
 <form class="custom-validity">
-  <sl-checkbox>Check me</sl-checkbox>
+  <wa-checkbox>Check me</wa-checkbox>
  <br />
-  <sl-button type="submit" variant="brand" style="margin-top: 1rem;">Submit</sl-button>
+  <wa-button type="submit" variant="brand" style="margin-top: 1rem;">Submit</wa-button>
 </form>
 <script>
  const form = document.querySelector('.custom-validity');
-  const checkbox = form.querySelector('sl-checkbox');
+  const checkbox = form.querySelector('wa-checkbox');
  const errorMessage = `Don't forget to check me!`;

  // Set initial validity as soon as the element is defined
-  customElements.whenDefined('sl-checkbox').then(async () => {
+  customElements.whenDefined('wa-checkbox').then(async () => {
    await checkbox.updateComplete;
    checkbox.setCustomValidity(errorMessage);
  });

  // Update validity on change
-  checkbox.addEventListener('sl-change', () => {
+  checkbox.addEventListener('wa-change', () => {
    checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
  });

  // Handle submit
-  customElements.whenDefined('sl-checkbox').then(() => {
+  customElements.whenDefined('wa-checkbox').then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      alert('All fields are valid!');
@@ -129,8 +129,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/button';
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';

 const App = () => {
  const checkbox = useRef(null);
@@ -151,13 +151,13 @@ const App = () => {

  return (
    <form class="custom-validity" onSubmit={handleSubmit}>
-      <SlCheckbox ref={checkbox} onSlChange={handleChange}>
+      <WaCheckbox ref={checkbox} onWaChange={handleChange}>
        Check me
-      </SlCheckbox>
+      </WaCheckbox>
      <br />
-      <SlButton type="submit" variant="brand" style={{ marginTop: '1rem' }}>
+      <WaButton type="submit" variant="brand" style={{ marginTop: '1rem' }}>
        Submit
-      </SlButton>
+      </WaButton>
    </form>
  );
 };
--- a/docs/pages/components/color-picker.md
+++ b/docs/pages/components/color-picker.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-color-picker label="Select a color"></sl-color-picker>
+<wa-color-picker label="Select a color"></wa-color-picker>
 ```

 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';

-const App = () => <SlColorPicker label="Select a color" />;
+const App = () => <WaColorPicker label="Select a color" />;
 ```

 :::tip
@@ -26,13 +26,13 @@ This component works with standard `<form>` elements. Please refer to the sectio
 Use the `value` attribute to set an initial value for the color picker.

 ```html:preview
-<sl-color-picker value="#4a90e2" label="Select a color"></sl-color-picker>
+<wa-color-picker value="#4a90e2" label="Select a color"></wa-color-picker>
 ```

 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';

-const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
+const App = () => <WaColorPicker value="#4a90e2" label="Select a color" />;
 ```

 ### Opacity
@@ -40,13 +40,13 @@ const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
 Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, HSLA, or HSVA based on `format`.

 ```html:preview
-<sl-color-picker value="#f5a623ff" opacity label="Select a color"></sl-color-picker>
+<wa-color-picker value="#f5a623ff" opacity label="Select a color"></wa-color-picker>
 ```

 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';

-const App = () => <SlColorPicker opacity label="Select a color" />;
+const App = () => <WaColorPicker opacity label="Select a color" />;
 ```

 ### Formats
@@ -56,21 +56,21 @@ Set the color picker's format with the `format` attribute. Valid options include
 To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.

 ```html:preview
-<sl-color-picker format="hex" value="#4a90e2" label="Select a color"></sl-color-picker>
-<sl-color-picker format="rgb" value="rgb(80, 227, 194)" label="Select a color"></sl-color-picker>
-<sl-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Select a color"></sl-color-picker>
-<sl-color-picker format="hsv" value="hsv(55, 89%, 97%)" label="Select a color"></sl-color-picker>
+<wa-color-picker format="hex" value="#4a90e2" label="Select a color"></wa-color-picker>
+<wa-color-picker format="rgb" value="rgb(80, 227, 194)" label="Select a color"></wa-color-picker>
+<wa-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Select a color"></wa-color-picker>
+<wa-color-picker format="hsv" value="hsv(55, 89%, 97%)" label="Select a color"></wa-color-picker>
 ```

 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';

 const App = () => (
  <>
-    <SlColorPicker format="hex" value="#4a90e2" />
-    <SlColorPicker format="rgb" value="rgb(80, 227, 194)" />
-    <SlColorPicker format="hsl" value="hsl(290, 87%, 47%)" />
-    <SlColorPicker format="hsv" value="hsv(55, 89%, 97%)" />
+    <WaColorPicker format="hex" value="#4a90e2" />
+    <WaColorPicker format="rgb" value="rgb(80, 227, 194)" />
+    <WaColorPicker format="hsl" value="hsl(290, 87%, 47%)" />
+    <WaColorPicker format="hsv" value="hsv(55, 89%, 97%)" />
  </>
 );
 ```
@@ -80,20 +80,20 @@ const App = () => (
 Use the `swatches` attribute to add convenient presets to the color picker. Any format the color picker can parse is acceptable (including CSS color names), but each value must be separated by a semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.

 ```html:preview
-<sl-color-picker
+<wa-color-picker
  label="Select a color"
  swatches="
    #d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
    #4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
  "
-></sl-color-picker>
+></wa-color-picker>
 ```

 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';

 const App = () => (
-  <SlColorPicker
+  <WaColorPicker
    label="Select a color"
    swatches="
      #d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
@@ -108,19 +108,19 @@ const App = () => (
 Use the `size` attribute to change the color picker's trigger size.

 ```html:preview
-<sl-color-picker size="small" label="Select a color"></sl-color-picker>
-<sl-color-picker size="medium" label="Select a color"></sl-color-picker>
-<sl-color-picker size="large" label="Select a color"></sl-color-picker>
+<wa-color-picker size="small" label="Select a color"></wa-color-picker>
+<wa-color-picker size="medium" label="Select a color"></wa-color-picker>
+<wa-color-picker size="large" label="Select a color"></wa-color-picker>
 ```

 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';

 const App = () => (
  <>
-    <SlColorPicker size="small" label="Select a color" />
-    <SlColorPicker size="medium" label="Select a color" />
-    <SlColorPicker size="large" label="Select a color" />
+    <WaColorPicker size="small" label="Select a color" />
+    <WaColorPicker size="medium" label="Select a color" />
+    <WaColorPicker size="large" label="Select a color" />
  </>
 );
 ```
@@ -130,11 +130,11 @@ const App = () => (
 The color picker can be rendered inline instead of in a dropdown using the `inline` attribute.

 ```html:preview
-<sl-color-picker inline label="Select a color"></sl-color-picker>
+<wa-color-picker inline label="Select a color"></wa-color-picker>
 ```

 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';

-const App = () => <SlColorPicker inline label="Select a color" />;
+const App = () => <WaColorPicker inline label="Select a color" />;
 ```
--- a/docs/pages/components/copy-button.md
+++ b/docs/pages/components/copy-button.md
@@ -6,14 +6,14 @@ layout: component
 ---

 ```html:preview
-<sl-copy-button value="Shoelace rocks!"></sl-copy-button>
+<wa-copy-button value="Web Awesome rocks!"></wa-copy-button>
 ```

 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';

 const App = () => (
-  <SlCopyButton value="Shoelace rocks!" />
+  <WaCopyButton value="Web Awesome rocks!" />
 );
 ```

@@ -24,19 +24,19 @@ const App = () => (
 Copy Buttons display feedback in a tooltip. You can customize the labels using the `copy-label`, `success-label`, and `error-label` attributes.

 ```html:preview
-<sl-copy-button
+<wa-copy-button
  value="Custom labels are easy"
  copy-label="Click to copy"
  success-label="You did it!"
  error-label="Whoops, your browser doesn't support this!"
-></sl-copy-button>
+></wa-copy-button>
 ```

 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';

 const App = () => (
-  <SlCopyButton
+  <WaCopyButton
    value="Custom labels are easy"
    copy-label="Click to copy"
    success-label="You did it!"
@@ -47,27 +47,27 @@ const App = () => (

 ### Custom Icons

-Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the icons that get displayed for each state. You can use [`<sl-icon>`](/components/icon) or your own images.
+Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the icons that get displayed for each state. You can use [`<wa-icon>`](/components/icon) or your own images.

 ```html:preview
-<sl-copy-button value="Copied from a custom button">
-  <sl-icon slot="copy-icon" name="clipboard"></sl-icon>
-  <sl-icon slot="success-icon" name="clipboard-check"></sl-icon>
-  <sl-icon slot="error-icon" name="clipboard-x"></sl-icon>
-</sl-copy-button>
+<wa-copy-button value="Copied from a custom button">
+  <wa-icon slot="copy-icon" name="clipboard"></wa-icon>
+  <wa-icon slot="success-icon" name="clipboard-check"></wa-icon>
+  <wa-icon slot="error-icon" name="clipboard-x"></wa-icon>
+</wa-copy-button>
 ```

 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
-import { SlIcon } from '@shoelace-style/shoelace/dist/react/icon';
+import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { WaIcon } from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
  <>
-    <SlCopyButton value="Copied from a custom button">
-      <SlIcon slot="copy-icon" name="clipboard" />
-      <SlIcon slot="success-icon" name="clipboard-check" />
-      <SlIcon slot="error-icon" name="clipboard-x" />
-    </SlCopyButton>
+    <WaCopyButton value="Copied from a custom button">
+      <WaIcon slot="copy-icon" name="clipboard" />
+      <WaIcon slot="success-icon" name="clipboard-check" />
+      <WaIcon slot="error-icon" name="clipboard-x" />
+    </WaCopyButton>
  </>
 );
 ```
@@ -83,61 +83,61 @@ To copy data from an attribute, use `from="id[attr]"` where `id` is the id of th
 ```html:preview
 <!-- Copies the span's textContent -->
 <span id="my-phone">+1 (234) 456-7890</span>
-<sl-copy-button from="my-phone"></sl-copy-button>
+<wa-copy-button from="my-phone"></wa-copy-button>

 <br><br>

 <!-- Copies the input's "value" property -->
-<sl-input id="my-input" type="text" value="User input" style="display: inline-block; max-width: 300px;"></sl-input>
-<sl-copy-button from="my-input.value"></sl-copy-button>
+<wa-input id="my-input" type="text" value="User input" style="display: inline-block; max-width: 300px;"></wa-input>
+<wa-copy-button from="my-input.value"></wa-copy-button>

 <br><br>

 <!-- Copies the link's "href" attribute -->
-<a id="my-link" href="https://shoelace.style/">Shoelace Website</a>
-<sl-copy-button from="my-link[href]"></sl-copy-button>
+<a id="my-link" href="https://shoelace.style/">Web Awesome Website</a>
+<wa-copy-button from="my-link[href]"></wa-copy-button>
 ```

 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
-import { SlInput } from '@shoelace-style/shoelace/dist/react/input';
+import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { WaInput } from '@shoelace-style/shoelace/dist/react/input';

 const App = () => (
  <>
    {/* Copies the span's textContent */}
    <span id="my-phone">+1 (234) 456-7890</span>
-    <SlCopyButton from="my-phone" />
+    <WaCopyButton from="my-phone" />

    <br /><br />

    {/* Copies the input's "value" property */}
-    <SlInput id="my-input" type="text" />
-    <SlCopyButton from="my-input.value" />
+    <WaInput id="my-input" type="text" />
+    <WaCopyButton from="my-input.value" />

    <br /><br />

    {/* Copies the link's "href" attribute */}
-    <a id="my-link" href="https://shoelace.style/">Shoelace Website</a>
-    <SlCopyButton from="my-link[href]" />
+    <a id="my-link" href="https://shoelace.style/">Web Awesome Website</a>
+    <WaCopyButton from="my-link[href]" />
  </>
 );
 ```

 ### Handling Errors

-A copy error will occur if the value is an empty string, if the `from` attribute points to an id that doesn't exist, or if the browser rejects the operation for any reason. When this happens, the `sl-error` event will be emitted.
+A copy error will occur if the value is an empty string, if the `from` attribute points to an id that doesn't exist, or if the browser rejects the operation for any reason. When this happens, the `wa-error` event will be emitted.

 This example demonstrates what happens when a copy error occurs. You can customize the error label and icon using the `error-label` attribute and the `error-icon` slot, respectively.

 ```html:preview
-<sl-copy-button from="i-do-not-exist"></sl-copy-button>
+<wa-copy-button from="i-do-not-exist"></wa-copy-button>
 ```

 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';

 const App = () => (
-  <SlCopyButton from="i-do-not-exist" />
+  <WaCopyButton from="i-do-not-exist" />
 );
 ```

@@ -146,14 +146,14 @@ const App = () => (
 Copy buttons can be disabled by adding the `disabled` attribute.

 ```html:preview
-<sl-copy-button value="You can't copy me" disabled></sl-copy-button>
+<wa-copy-button value="You can't copy me" disabled></wa-copy-button>
 ```

 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';

 const App = () => (
-  <SlCopyButton value="You can't copy me" disabled />
+  <WaCopyButton value="You can't copy me" disabled />
 );
 ```

@@ -162,14 +162,14 @@ const App = () => (
 A success indicator is briefly shown after copying. You can customize the length of time the indicator is shown using the `feedback-duration` attribute.

 ```html:preview
-<sl-copy-button value="Shoelace rocks!" feedback-duration="250"></sl-copy-button>
+<wa-copy-button value="Web Awesome rocks!" feedback-duration="250"></wa-copy-button>
 ```

 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';

 const App = () => (
-  <SlCopyButton value="Shoelace rocks!" feedback-duration={250} />
+  <WaCopyButton value="Web Awesome rocks!" feedback-duration={250} />
 );
 ```

@@ -178,11 +178,11 @@ const App = () => (
 You can customize the button to your liking with CSS.

 ```html:preview
-<sl-copy-button value="I'm so stylish" class="custom-styles">
-  <sl-icon slot="copy-icon" name="asterisk"></sl-icon>
-  <sl-icon slot="success-icon" name="check-lg"></sl-icon>
-  <sl-icon slot="error-icon" name="x-lg"></sl-icon>
-</sl-copy-button>
+<wa-copy-button value="I'm so stylish" class="custom-styles">
+  <wa-icon slot="copy-icon" name="asterisk"></wa-icon>
+  <wa-icon slot="success-icon" name="check-lg"></wa-icon>
+  <wa-icon slot="error-icon" name="x-lg"></wa-icon>
+</wa-copy-button>

 <style>
  .custom-styles {
@@ -216,7 +216,7 @@ You can customize the button to your liking with CSS.
 ```

 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';

 const css = `
  .custom-styles {
@@ -250,7 +250,7 @@ const css = `

 const App = () => (
  <>
-    <SlCopyButton value="I'm so stylish" className="custom-styles" />
+    <WaCopyButton value="I'm so stylish" className="custom-styles" />

    <style>{css}</style>
  </>
--- a/docs/pages/components/details.md
+++ b/docs/pages/components/details.md
@@ -8,20 +8,20 @@ layout: component
 <!-- cspell:dictionaries lorem-ipsum -->

 ```html:preview
-<sl-details summary="Toggle Me">
+<wa-details summary="Toggle Me">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</sl-details>
+</wa-details>
 ```

 ```jsx:react
-import SlDetails from '@shoelace-style/shoelace/dist/react/details';
+import WaDetails from '@shoelace-style/shoelace/dist/react/details';

 const App = () => (
-  <SlDetails summary="Toggle Me">
+  <WaDetails summary="Toggle Me">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </SlDetails>
+  </WaDetails>
 );
 ```

@@ -32,20 +32,20 @@ const App = () => (
 Use the `disable` attribute to prevent the details from expanding.

 ```html:preview
-<sl-details summary="Disabled" disabled>
+<wa-details summary="Disabled" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</sl-details>
+</wa-details>
 ```

 ```jsx:react
-import SlDetails from '@shoelace-style/shoelace/dist/react/details';
+import WaDetails from '@shoelace-style/shoelace/dist/react/details';

 const App = () => (
-  <SlDetails summary="Disabled" disabled>
+  <WaDetails summary="Disabled" disabled>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </SlDetails>
+  </WaDetails>
 );
 ```

@@ -54,16 +54,16 @@ const App = () => (
 Use the `expand-icon` and `collapse-icon` slots to change the expand and collapse icons, respectively. To disable the animation, override the `rotate` property on the `summary-icon` part as shown below.

 ```html:preview
-<sl-details summary="Toggle Me" class="custom-icons">
-  <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
-  <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
+<wa-details summary="Toggle Me" class="custom-icons">
+  <wa-icon name="plus-square" slot="expand-icon"></wa-icon>
+  <wa-icon name="dash-square" slot="collapse-icon"></wa-icon>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</sl-details>
+</wa-details>

 <style>
-  sl-details.custom-icons::part(summary-icon) {
+  wa-details.custom-icons::part(summary-icon) {
    /* Disable the expand/collapse animation */
    rotate: none;
  }
@@ -71,11 +71,11 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 ```

 ```jsx:react
-import SlDetails from '@shoelace-style/shoelace/dist/react/details';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaDetails from '@shoelace-style/shoelace/dist/react/details';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const css = `
-  sl-details.custom-icon::part(summary-icon) {
+  wa-details.custom-icon::part(summary-icon) {
    /* Disable the expand/collapse animation */
    rotate: none;
  }
@@ -83,13 +83,13 @@ const css = `

 const App = () => (
  <>
-    <SlDetails summary="Toggle Me" class="custom-icon">
-      <SlIcon name="plus-square" slot="expand-icon" />
-      <SlIcon name="dash-square" slot="collapse-icon" />
+    <WaDetails summary="Toggle Me" class="custom-icon">
+      <WaIcon name="plus-square" slot="expand-icon" />
+      <WaIcon name="dash-square" slot="collapse-icon" />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
-    </SlDetails>
+    </WaDetails>

    <style>{css}</style>
  </>
@@ -98,37 +98,37 @@ const App = () => (

 ### Grouping Details

-Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `sl-show` event.
+Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `wa-show` event.

 ```html:preview
 <div class="details-group-example">
-  <sl-details summary="First" open>
+  <wa-details summary="First" open>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </sl-details>
+  </wa-details>

-  <sl-details summary="Second">
+  <wa-details summary="Second">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </sl-details>
+  </wa-details>

-  <sl-details summary="Third">
+  <wa-details summary="Third">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </sl-details>
+  </wa-details>
 </div>

 <script>
  const container = document.querySelector('.details-group-example');

  // Close all other details when one is shown
-  container.addEventListener('sl-show', event => {
-    [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
+  container.addEventListener('wa-show', event => {
+    [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
  });
 </script>

 <style>
-  .details-group-example sl-details:not(:last-of-type) {
+  .details-group-example wa-details:not(:last-of-type) {
    margin-bottom: var(--wa-space-2xs);
  }
 </style>
--- a/docs/pages/components/dialog.md
+++ b/docs/pages/components/dialog.md
@@ -8,17 +8,17 @@ layout: component
 <!-- cspell:dictionaries lorem-ipsum -->

 ```html:preview
-<sl-dialog label="Dialog" class="dialog-overview">
+<wa-dialog label="Dialog" class="dialog-overview">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-dialog>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-dialog>

-<sl-button>Open Dialog</sl-button>
+<wa-button>Open Dialog</wa-button>

 <script>
  const dialog = document.querySelector('.dialog-overview');
  const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+  const closeButton = dialog.querySelector('wa-button[slot="footer"]');

  openButton.addEventListener('click', () => dialog.show());
  closeButton.addEventListener('click', () => dialog.hide());
@@ -27,22 +27,22 @@ layout: component

 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+      <WaDialog label="Dialog" open={open} onWaAfterHide={() => setOpen(false)}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDialog>
+        </WaButton>
+      </WaDialog>

-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
    </>
  );
 };
@@ -55,17 +55,17 @@ const App = () => {
 Use the `--width` custom property to set the dialog's width.

 ```html:preview
-<sl-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
+<wa-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-dialog>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-dialog>

-<sl-button>Open Dialog</sl-button>
+<wa-button>Open Dialog</wa-button>

 <script>
  const dialog = document.querySelector('.dialog-width');
  const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+  const closeButton = dialog.querySelector('wa-button[slot="footer"]');

  openButton.addEventListener('click', () => dialog.show());
  closeButton.addEventListener('click', () => dialog.hide());
@@ -76,22 +76,22 @@ 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/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDialog label="Dialog" open={open} style={{ '--width': '50vw' }} onSlAfterHide={() => setOpen(false)}>
+      <WaDialog label="Dialog" open={open} style={{ '--width': '50vw' }} onWaAfterHide={() => setOpen(false)}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDialog>
+        </WaButton>
+      </WaDialog>

-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
    </>
  );
 };
@@ -104,19 +104,19 @@ const App = () => {
 By design, a dialog's height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.

 ```html:preview
-<sl-dialog label="Dialog" class="dialog-scrolling">
+<wa-dialog label="Dialog" class="dialog-scrolling">
  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-outline); padding: 0 1rem;">
    <p>Scroll down and give it a try! 👇</p>
  </div>
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-dialog>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-dialog>

-<sl-button>Open Dialog</sl-button>
+<wa-button>Open Dialog</wa-button>

 <script>
  const dialog = document.querySelector('.dialog-scrolling');
  const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+  const closeButton = dialog.querySelector('wa-button[slot="footer"]');

  openButton.addEventListener('click', () => dialog.show());
  closeButton.addEventListener('click', () => dialog.hide());
@@ -127,15 +127,15 @@ 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/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+      <WaDialog label="Dialog" open={open} onWaAfterHide={() => setOpen(false)}>
        <div
          style={{
            height: '150vh',
@@ -146,12 +146,12 @@ const App = () => {
          <p>Scroll down and give it a try! 👇</p>
        </div>

-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDialog>
+        </WaButton>
+      </WaDialog>

-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
    </>
  );
 };
@@ -164,18 +164,18 @@ const App = () => {
 The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed.

 ```html:preview
-<sl-dialog label="Dialog" class="dialog-header-actions">
-  <sl-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></sl-icon-button>
+<wa-dialog label="Dialog" class="dialog-header-actions">
+  <wa-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></wa-icon-button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-dialog>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-dialog>

-<sl-button>Open Dialog</sl-button>
+<wa-button>Open Dialog</wa-button>

 <script>
  const dialog = document.querySelector('.dialog-header-actions');
  const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+  const closeButton = dialog.querySelector('wa-button[slot="footer"]');
  const newWindowButton = dialog.querySelector('.new-window');

  openButton.addEventListener('click', () => dialog.show());
@@ -186,29 +186,29 @@ 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/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
-        <SlIconButton
+      <WaDialog label="Dialog" open={open} onWaAfterHide={() => setOpen(false)}>
+        <WaIconButton
          class="new-window"
          slot="header-actions"
          name="box-arrow-up-right"
          onClick={() => window.open(location.href)}
        />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDialog>
+        </WaButton>
+      </WaDialog>

-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
    </>
  );
 };
@@ -218,28 +218,28 @@ const App = () => {

 By default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the [[Escape]] key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.

-To keep the dialog open in such cases, you can cancel the `sl-request-close` event. When canceled, the dialog will remain open and pulse briefly to draw the user's attention to it.
+To keep the dialog open in such cases, you can cancel the `wa-request-close` event. When canceled, the dialog will remain open and pulse briefly to draw the user's attention to it.

 You can use `event.detail.source` to determine what triggered the request to close. This example prevents the dialog from closing when the overlay is clicked, but allows the close button or [[Escape]] to dismiss it.

 ```html:preview
-<sl-dialog label="Dialog" class="dialog-deny-close">
+<wa-dialog label="Dialog" class="dialog-deny-close">
  This dialog will not close when you click on the overlay.
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-dialog>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-dialog>

-<sl-button>Open Dialog</sl-button>
+<wa-button>Open Dialog</wa-button>

 <script>
  const dialog = document.querySelector('.dialog-deny-close');
  const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+  const closeButton = dialog.querySelector('wa-button[slot="footer"]');

  openButton.addEventListener('click', () => dialog.show());
  closeButton.addEventListener('click', () => dialog.hide());

  // Prevent the dialog from closing when the user clicks on the overlay
-  dialog.addEventListener('sl-request-close', event => {
+  dialog.addEventListener('wa-request-close', event => {
    if (event.detail.source === 'overlay') {
      event.preventDefault();
    }
@@ -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/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';

 const App = () => {
  const [open, setOpen] = useState(false);
@@ -264,14 +264,14 @@ const App = () => {

  return (
    <>
-      <SlDialog label="Dialog" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
+      <WaDialog label="Dialog" open={open} onWaRequestClose={handleRequestClose} onWaAfterHide={() => setOpen(false)}>
        This dialog will not close when you click on the overlay.
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDialog>
+        </WaButton>
+      </WaDialog>

-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
    </>
  );
 };
@@ -282,18 +282,18 @@ const App = () => {
 By default, the dialog's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the dialog. If you want a different element to have focus, add the `autofocus` attribute to it as shown below.

 ```html:preview
-<sl-dialog label="Dialog" class="dialog-focus">
-  <sl-input autofocus placeholder="I will have focus when the dialog is opened"></sl-input>
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-dialog>
+<wa-dialog label="Dialog" class="dialog-focus">
+  <wa-input autofocus placeholder="I will have focus when the dialog is opened"></wa-input>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-dialog>

-<sl-button>Open Dialog</sl-button>
+<wa-button>Open Dialog</wa-button>

 <script>
  const dialog = document.querySelector('.dialog-focus');
-  const input = dialog.querySelector('sl-input');
+  const input = dialog.querySelector('wa-input');
  const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+  const closeButton = dialog.querySelector('wa-button[slot="footer"]');

  openButton.addEventListener('click', () => dialog.show());
  closeButton.addEventListener('click', () => dialog.hide());
@@ -302,28 +302,28 @@ 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/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
-        <SlInput autofocus placeholder="I will have focus when the dialog is opened" />
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+      <WaDialog label="Dialog" open={open} onWaAfterHide={() => setOpen(false)}>
+        <WaInput autofocus placeholder="I will have focus when the dialog is opened" />
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDialog>
+        </WaButton>
+      </WaDialog>

-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
    </>
  );
 };
 ```

 :::tip
-You can further customize initial focus behavior by canceling the `sl-initial-focus` event and setting focus yourself inside the event handler.
+You can further customize initial focus behavior by canceling the `wa-initial-focus` event and setting focus yourself inside the event handler.
 :::
--- a/docs/pages/components/divider.md
+++ b/docs/pages/components/divider.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-divider></sl-divider>
+<wa-divider></wa-divider>
 ```

 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';

-const App = () => <SlDivider />;
+const App = () => <WaDivider />;
 ```

 ## Examples
@@ -22,15 +22,15 @@ const App = () => <SlDivider />;
 Use the `--width` custom property to change the width of the divider.

 ```html:preview
-<sl-divider style="--width: 4px;"></sl-divider>
+<wa-divider style="--width: 4px;"></wa-divider>
 ```

 {% raw %}

 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';

-const App = () => <SlDivider style={{ '--width': '4px' }} />;
+const App = () => <WaDivider style={{ '--width': '4px' }} />;
 ```

 {% endraw %}
@@ -40,15 +40,15 @@ const App = () => <SlDivider style={{ '--width': '4px' }} />;
 Use the `--color` custom property to change the color of the divider.

 ```html:preview
-<sl-divider style="--color: tomato;"></sl-divider>
+<wa-divider style="--color: tomato;"></wa-divider>
 ```

 {% raw %}

 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';

-const App = () => <SlDivider style={{ '--color': 'tomato' }} />;
+const App = () => <WaDivider style={{ '--color': 'tomato' }} />;
 ```

 {% endraw %}
@@ -60,7 +60,7 @@ Use the `--spacing` custom property to change the amount of space between the di
 ```html:preview
 <div style="text-align: center;">
  Above
-  <sl-divider style="--spacing: 2rem;"></sl-divider>
+  <wa-divider style="--spacing: 2rem;"></wa-divider>
  Below
 </div>
 ```
@@ -68,12 +68,12 @@ 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/divider';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';

 const App = () => (
  <>
    Above
-    <SlDivider style={{ '--spacing': '2rem' }} />
+    <WaDivider style={{ '--spacing': '2rem' }} />
    Below
  </>
 );
@@ -88,9 +88,9 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The
 ```html:preview
 <div style="display: flex; align-items: center; height: 2rem;">
  First
-  <sl-divider vertical></sl-divider>
+  <wa-divider vertical></wa-divider>
  Middle
-  <sl-divider vertical></sl-divider>
+  <wa-divider vertical></wa-divider>
  Last
 </div>
 ```
@@ -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/divider';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';

 const App = () => (
  <div
@@ -109,9 +109,9 @@ const App = () => (
    }}
  >
    First
-    <SlDivider vertical />
+    <WaDivider vertical />
    Middle
-    <SlDivider vertical />
+    <WaDivider vertical />
    Last
  </div>
 );
@@ -124,34 +124,34 @@ const App = () => (
 Use dividers in [menus](/components/menu) to visually group menu items.

 ```html:preview
-<sl-menu style="max-width: 200px;">
-  <sl-menu-item value="1">Option 1</sl-menu-item>
-  <sl-menu-item value="2">Option 2</sl-menu-item>
-  <sl-menu-item value="3">Option 3</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-item value="4">Option 4</sl-menu-item>
-  <sl-menu-item value="5">Option 5</sl-menu-item>
-  <sl-menu-item value="6">Option 6</sl-menu-item>
-</sl-menu>
+<wa-menu style="max-width: 200px;">
+  <wa-menu-item value="1">Option 1</wa-menu-item>
+  <wa-menu-item value="2">Option 2</wa-menu-item>
+  <wa-menu-item value="3">Option 3</wa-menu-item>
+  <wa-divider></wa-divider>
+  <wa-menu-item value="4">Option 4</wa-menu-item>
+  <wa-menu-item value="5">Option 5</wa-menu-item>
+  <wa-menu-item value="6">Option 6</wa-menu-item>
+</wa-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';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlMenu style={{ maxWidth: '200px' }}>
-    <SlMenuItem value="1">Option 1</SlMenuItem>
-    <SlMenuItem value="2">Option 2</SlMenuItem>
-    <SlMenuItem value="3">Option 3</SlMenuItem>
-    <sl-divider />
-    <SlMenuItem value="4">Option 4</SlMenuItem>
-    <SlMenuItem value="5">Option 5</SlMenuItem>
-    <SlMenuItem value="6">Option 6</SlMenuItem>
-  </SlMenu>
+  <WaMenu style={{ maxWidth: '200px' }}>
+    <WaMenuItem value="1">Option 1</WaMenuItem>
+    <WaMenuItem value="2">Option 2</WaMenuItem>
+    <WaMenuItem value="3">Option 3</WaMenuItem>
+    <wa-divider />
+    <WaMenuItem value="4">Option 4</WaMenuItem>
+    <WaMenuItem value="5">Option 5</WaMenuItem>
+    <WaMenuItem value="6">Option 6</WaMenuItem>
+  </WaMenu>
 );
 ```

--- a/docs/pages/components/drawer.md
+++ b/docs/pages/components/drawer.md
@@ -8,17 +8,17 @@ layout: component
 <!-- cspell:dictionaries lorem-ipsum -->

 ```html:preview
-<sl-drawer label="Drawer" class="drawer-overview">
+<wa-drawer label="Drawer" class="drawer-overview">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-drawer>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-drawer>

-<sl-button>Open Drawer</sl-button>
+<wa-button>Open Drawer</wa-button>

 <script>
  const drawer = document.querySelector('.drawer-overview');
  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="brand"]');
+  const closeButton = drawer.querySelector('wa-button[variant="brand"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
@@ -27,22 +27,22 @@ layout: component

 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
+      <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDrawer>
+        </WaButton>
+      </WaDrawer>

-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
    </>
  );
 };
@@ -55,17 +55,17 @@ const App = () => {
 By default, drawers slide in from the end. To make the drawer slide in from the start, set the `placement` attribute to `start`.

 ```html:preview
-<sl-drawer label="Drawer" placement="start" class="drawer-placement-start">
+<wa-drawer label="Drawer" placement="start" class="drawer-placement-start">
  This drawer slides in from the start.
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-drawer>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-drawer>

-<sl-button>Open Drawer</sl-button>
+<wa-button>Open Drawer</wa-button>

 <script>
  const drawer = document.querySelector('.drawer-placement-start');
  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="brand"]');
+  const closeButton = drawer.querySelector('wa-button[variant="brand"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
@@ -74,22 +74,22 @@ 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/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDrawer label="Drawer" placement="start" open={open} onSlAfterHide={() => setOpen(false)}>
+      <WaDrawer label="Drawer" placement="start" open={open} onWaAfterHide={() => setOpen(false)}>
        This drawer slides in from the start.
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDrawer>
+        </WaButton>
+      </WaDrawer>

-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
    </>
  );
 };
@@ -100,17 +100,17 @@ const App = () => {
 To make the drawer slide in from the top, set the `placement` attribute to `top`.

 ```html:preview
-<sl-drawer label="Drawer" placement="top" class="drawer-placement-top">
+<wa-drawer label="Drawer" placement="top" class="drawer-placement-top">
  This drawer slides in from the top.
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-drawer>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-drawer>

-<sl-button>Open Drawer</sl-button>
+<wa-button>Open Drawer</wa-button>

 <script>
  const drawer = document.querySelector('.drawer-placement-top');
  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="brand"]');
+  const closeButton = drawer.querySelector('wa-button[variant="brand"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
@@ -119,22 +119,22 @@ 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/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDrawer label="Drawer" placement="top" open={open} onSlAfterHide={() => setOpen(false)}>
+      <WaDrawer label="Drawer" placement="top" open={open} onWaAfterHide={() => setOpen(false)}>
        This drawer slides in from the top.
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDrawer>
+        </WaButton>
+      </WaDrawer>

-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
    </>
  );
 };
@@ -145,17 +145,17 @@ const App = () => {
 To make the drawer slide in from the bottom, set the `placement` attribute to `bottom`.

 ```html:preview
-<sl-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
+<wa-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
  This drawer slides in from the bottom.
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-drawer>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-drawer>

-<sl-button>Open Drawer</sl-button>
+<wa-button>Open Drawer</wa-button>

 <script>
  const drawer = document.querySelector('.drawer-placement-bottom');
  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="brand"]');
+  const closeButton = drawer.querySelector('wa-button[variant="brand"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
@@ -164,22 +164,22 @@ 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/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDrawer label="Drawer" placement="bottom" open={open} onSlAfterHide={() => setOpen(false)}>
+      <WaDrawer label="Drawer" placement="bottom" open={open} onWaAfterHide={() => setOpen(false)}>
        This drawer slides in from the bottom.
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDrawer>
+        </WaButton>
+      </WaDrawer>

-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
    </>
  );
 };
@@ -197,18 +197,18 @@ Unlike normal drawers, contained drawers are not modal. This means they do not s
 >
  The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.

-  <sl-drawer label="Drawer" contained class="drawer-contained" style="--size: 50%;">
+  <wa-drawer label="Drawer" contained class="drawer-contained" style="--size: 50%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    <sl-button slot="footer" variant="brand">Close</sl-button>
-  </sl-drawer>
+    <wa-button slot="footer" variant="brand">Close</wa-button>
+  </wa-drawer>
 </div>

-<sl-button>Toggle Drawer</sl-button>
+<wa-button>Toggle Drawer</wa-button>

 <script>
  const drawer = document.querySelector('.drawer-contained');
  const openButton = drawer.parentElement.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="brand"]');
+  const closeButton = drawer.querySelector('wa-button[variant="brand"]');

  openButton.addEventListener('click', () => (drawer.open = !drawer.open));
  closeButton.addEventListener('click', () => drawer.hide());
@@ -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/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';

 const App = () => {
  const [open, setOpen] = useState(false);
@@ -238,22 +238,22 @@ const App = () => {
      >
        The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer
        opens.
-        <SlDrawer
+        <WaDrawer
          label="Drawer"
          contained
          no-modal
          open={open}
-          onSlAfterHide={() => setOpen(false)}
+          onWaAfterHide={() => setOpen(false)}
          style={{ '--size': '50%' }}
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+          <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
            Close
-          </SlButton>
-        </SlDrawer>
+          </WaButton>
+        </WaDrawer>
      </div>

-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
    </>
  );
 };
@@ -266,17 +266,17 @@ const App = () => {
 Use the `--size` custom property to set the drawer's size. This will be applied to the drawer's width or height depending on its `placement`.

 ```html:preview
-<sl-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
+<wa-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
  This drawer is always 50% of the viewport.
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-drawer>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-drawer>

-<sl-button>Open Drawer</sl-button>
+<wa-button>Open Drawer</wa-button>

 <script>
  const drawer = document.querySelector('.drawer-custom-size');
  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="brand"]');
+  const closeButton = drawer.querySelector('wa-button[variant="brand"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
@@ -287,22 +287,22 @@ 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/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)} style={{ '--size': '50vw' }}>
+      <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)} style={{ '--size': '50vw' }}>
        This drawer is always 50% of the viewport.
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDrawer>
+        </WaButton>
+      </WaDrawer>

-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
    </>
  );
 };
@@ -315,19 +315,19 @@ const App = () => {
 By design, a drawer's height will never exceed 100% of its container. As such, drawers will not scroll with the page to ensure the header and footer are always accessible to the user.

 ```html:preview
-<sl-drawer label="Drawer" class="drawer-scrolling">
+<wa-drawer label="Drawer" class="drawer-scrolling">
  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-outline); padding: 0 1rem;">
    <p>Scroll down and give it a try! 👇</p>
  </div>
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-drawer>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-drawer>

-<sl-button>Open Drawer</sl-button>
+<wa-button>Open Drawer</wa-button>

 <script>
  const drawer = document.querySelector('.drawer-scrolling');
  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="brand"]');
+  const closeButton = drawer.querySelector('wa-button[variant="brand"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
@@ -338,15 +338,15 @@ 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/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
+      <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)}>
        <div
          style={{
            height: '150vh',
@@ -356,12 +356,12 @@ const App = () => {
        >
          <p>Scroll down and give it a try! 👇</p>
        </div>
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDrawer>
+        </WaButton>
+      </WaDrawer>

-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
    </>
  );
 };
@@ -374,18 +374,18 @@ const App = () => {
 The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed.

 ```html:preview
-<sl-drawer label="Drawer" class="drawer-header-actions">
-  <sl-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></sl-icon-button>
+<wa-drawer label="Drawer" class="drawer-header-actions">
+  <wa-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></wa-icon-button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-drawer>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-drawer>

-<sl-button>Open Drawer</sl-button>
+<wa-button>Open Drawer</wa-button>

 <script>
  const drawer = document.querySelector('.drawer-header-actions');
  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="brand"]');
+  const closeButton = drawer.querySelector('wa-button[variant="brand"]');
  const newWindowButton = drawer.querySelector('.new-window');

  openButton.addEventListener('click', () => drawer.show());
@@ -396,24 +396,24 @@ 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/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
-        <SlIconButton slot="header-actions" name="box-arrow-up-right" onClick={() => window.open(location.href)} />
+      <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)}>
+        <WaIconButton slot="header-actions" name="box-arrow-up-right" onClick={() => window.open(location.href)} />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDrawer>
+        </WaButton>
+      </WaDrawer>

-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
    </>
  );
 };
@@ -423,28 +423,28 @@ const App = () => {

 By default, drawers will close when the user clicks the close button, clicks the overlay, or presses the [[Escape]] key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.

-To keep the drawer open in such cases, you can cancel the `sl-request-close` event. When canceled, the drawer will remain open and pulse briefly to draw the user's attention to it.
+To keep the drawer open in such cases, you can cancel the `wa-request-close` event. When canceled, the drawer will remain open and pulse briefly to draw the user's attention to it.

 You can use `event.detail.source` to determine what triggered the request to close. This example prevents the drawer from closing when the overlay is clicked, but allows the close button or [[Escape]] to dismiss it.

 ```html:preview
-<sl-drawer label="Drawer" class="drawer-deny-close">
+<wa-drawer label="Drawer" class="drawer-deny-close">
  This drawer will not close when you click on the overlay.
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-drawer>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-drawer>

-<sl-button>Open Drawer</sl-button>
+<wa-button>Open Drawer</wa-button>

 <script>
  const drawer = document.querySelector('.drawer-deny-close');
  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="brand"]');
+  const closeButton = drawer.querySelector('wa-button[variant="brand"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());

  // Prevent the drawer from closing when the user clicks on the overlay
-  drawer.addEventListener('sl-request-close', event => {
+  drawer.addEventListener('wa-request-close', event => {
    if (event.detail.source === 'overlay') {
      event.preventDefault();
    }
@@ -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/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';

 const App = () => {
  const [open, setOpen] = useState(false);
@@ -469,14 +469,14 @@ const App = () => {

  return (
    <>
-      <SlDrawer label="Drawer" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
+      <WaDrawer label="Drawer" open={open} onWaRequestClose={handleRequestClose} onWaAfterHide={() => setOpen(false)}>
        This drawer will not close when you click on the overlay.
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Save &amp; Close
-        </SlButton>
-      </SlDrawer>
+        </WaButton>
+      </WaDrawer>

-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
    </>
  );
 };
@@ -487,18 +487,18 @@ const App = () => {
 By default, the drawer's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the `autofocus` attribute to it as shown below.

 ```html:preview
-<sl-drawer label="Drawer" class="drawer-focus">
-  <sl-input autofocus placeholder="I will have focus when the drawer is opened"></sl-input>
-  <sl-button slot="footer" variant="brand">Close</sl-button>
-</sl-drawer>
+<wa-drawer label="Drawer" class="drawer-focus">
+  <wa-input autofocus placeholder="I will have focus when the drawer is opened"></wa-input>
+  <wa-button slot="footer" variant="brand">Close</wa-button>
+</wa-drawer>

-<sl-button>Open Drawer</sl-button>
+<wa-button>Open Drawer</wa-button>

 <script>
  const drawer = document.querySelector('.drawer-focus');
-  const input = drawer.querySelector('sl-input');
+  const input = drawer.querySelector('wa-input');
  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="brand"]');
+  const closeButton = drawer.querySelector('wa-button[variant="brand"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
@@ -507,28 +507,28 @@ 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/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
-        <SlInput autofocus placeholder="I will have focus when the drawer is opened" />
-        <SlButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+      <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)}>
+        <WaInput autofocus placeholder="I will have focus when the drawer is opened" />
+        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
          Close
-        </SlButton>
-      </SlDrawer>
+        </WaButton>
+      </WaDrawer>

-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
    </>
  );
 };
 ```

 :::tip
-You can further customize initial focus behavior by canceling the `sl-initial-focus` event and setting focus yourself inside the event handler.
+You can further customize initial focus behavior by canceling the `wa-initial-focus` event and setting focus yourself inside the event handler.
 :::
--- a/docs/pages/components/dropdown.md
+++ b/docs/pages/components/dropdown.md
@@ -10,61 +10,61 @@ Dropdowns consist of a trigger and a panel. By default, activating the trigger w
 Dropdowns are designed to work well with [menus](/components/menu) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/components/color-picker)). The API gives you complete control over showing, hiding, and positioning the panel.

 ```html:preview
-<sl-dropdown>
-  <sl-button slot="trigger" caret>Dropdown</sl-button>
-  <sl-menu>
-    <sl-menu-item>Dropdown Item 1</sl-menu-item>
-    <sl-menu-item>Dropdown Item 2</sl-menu-item>
-    <sl-menu-item>Dropdown Item 3</sl-menu-item>
-    <sl-divider></sl-divider>
-    <sl-menu-item type="checkbox" checked>Checkbox</sl-menu-item>
-    <sl-menu-item disabled>Disabled</sl-menu-item>
-    <sl-divider></sl-divider>
-    <sl-menu-item>
+<wa-dropdown>
+  <wa-button slot="trigger" caret>Dropdown</wa-button>
+  <wa-menu>
+    <wa-menu-item>Dropdown Item 1</wa-menu-item>
+    <wa-menu-item>Dropdown Item 2</wa-menu-item>
+    <wa-menu-item>Dropdown Item 3</wa-menu-item>
+    <wa-divider></wa-divider>
+    <wa-menu-item type="checkbox" checked>Checkbox</wa-menu-item>
+    <wa-menu-item disabled>Disabled</wa-menu-item>
+    <wa-divider></wa-divider>
+    <wa-menu-item>
      Prefix
-      <sl-icon slot="prefix" name="gift"></sl-icon>
-    </sl-menu-item>
-    <sl-menu-item>
+      <wa-icon slot="prefix" name="gift"></wa-icon>
+    </wa-menu-item>
+    <wa-menu-item>
      Suffix Icon
-      <sl-icon slot="suffix" name="heart"></sl-icon>
-    </sl-menu-item>
-  </sl-menu>
-</sl-dropdown>
+      <wa-icon slot="suffix" name="heart"></wa-icon>
+    </wa-menu-item>
+  </wa-menu>
+</wa-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 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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlDropdown>
-    <SlButton slot="trigger" caret>
+  <WaDropdown>
+    <WaButton slot="trigger" caret>
      Dropdown
-    </SlButton>
-    <SlMenu>
-      <SlMenuItem>Dropdown Item 1</SlMenuItem>
-      <SlMenuItem>Dropdown Item 2</SlMenuItem>
-      <SlMenuItem>Dropdown Item 3</SlMenuItem>
-      <SlDivider />
-      <SlMenuItem type="checkbox" checked>
+    </WaButton>
+    <WaMenu>
+      <WaMenuItem>Dropdown Item 1</WaMenuItem>
+      <WaMenuItem>Dropdown Item 2</WaMenuItem>
+      <WaMenuItem>Dropdown Item 3</WaMenuItem>
+      <WaDivider />
+      <WaMenuItem type="checkbox" checked>
        Checkbox
-      </SlMenuItem>
-      <SlMenuItem disabled>Disabled</SlMenuItem>
-      <SlDivider />
-      <SlMenuItem>
+      </WaMenuItem>
+      <WaMenuItem disabled>Disabled</WaMenuItem>
+      <WaDivider />
+      <WaMenuItem>
        Prefix
-        <SlIcon slot="prefix" name="gift" />
-      </SlMenuItem>
-      <SlMenuItem>
+        <WaIcon slot="prefix" name="gift" />
+      </WaMenuItem>
+      <WaMenuItem>
        Suffix Icon
-        <SlIcon slot="suffix" name="heart" />
-      </SlMenuItem>
-    </SlMenu>
-  </SlDropdown>
+        <WaIcon slot="suffix" name="heart" />
+      </WaMenuItem>
+    </WaMenu>
+  </WaDropdown>
 );
 ```

@@ -72,25 +72,25 @@ const App = () => (

 ### Getting the Selected Item

-When dropdowns are used with [menus](/components/menu), you can listen for the [`sl-select`](/components/menu#events) event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.
+When dropdowns are used with [menus](/components/menu), you can listen for the [`wa-select`](/components/menu#events) event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.

 ```html:preview
 <div class="dropdown-selection">
-  <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>
+  <wa-dropdown>
+    <wa-button slot="trigger" caret>Edit</wa-button>
+    <wa-menu>
+      <wa-menu-item value="cut">Cut</wa-menu-item>
+      <wa-menu-item value="copy">Copy</wa-menu-item>
+      <wa-menu-item value="paste">Paste</wa-menu-item>
+    </wa-menu>
+  </wa-dropdown>
 </div>

 <script>
  const container = document.querySelector('.dropdown-selection');
-  const dropdown = container.querySelector('sl-dropdown');
+  const dropdown = container.querySelector('wa-dropdown');

-  dropdown.addEventListener('sl-select', event => {
+  dropdown.addEventListener('wa-select', event => {
    const selectedItem = event.detail.item;
    console.log(selectedItem.value);
  });
@@ -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/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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => {
  function handleSelect(event) {
@@ -110,16 +110,16 @@ const App = () => {
  }

  return (
-    <SlDropdown>
-      <SlButton slot="trigger" caret>
+    <WaDropdown>
+      <WaButton slot="trigger" caret>
        Edit
-      </SlButton>
-      <SlMenu onSlSelect={handleSelect}>
-        <SlMenuItem value="cut">Cut</SlMenuItem>
-        <SlMenuItem value="copy">Copy</SlMenuItem>
-        <SlMenuItem value="paste">Paste</SlMenuItem>
-      </SlMenu>
-    </SlDropdown>
+      </WaButton>
+      <WaMenu onWaSelect={handleSelect}>
+        <WaMenuItem value="cut">Cut</WaMenuItem>
+        <WaMenuItem value="copy">Copy</WaMenuItem>
+        <WaMenuItem value="paste">Paste</WaMenuItem>
+      </WaMenu>
+    </WaDropdown>
  );
 };
 ```
@@ -128,21 +128,21 @@ Alternatively, you can listen for the `click` event on individual menu items. No

 ```html:preview
 <div class="dropdown-selection-alt">
-  <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>
+  <wa-dropdown>
+    <wa-button slot="trigger" caret>Edit</wa-button>
+    <wa-menu>
+      <wa-menu-item value="cut">Cut</wa-menu-item>
+      <wa-menu-item value="copy">Copy</wa-menu-item>
+      <wa-menu-item value="paste">Paste</wa-menu-item>
+    </wa-menu>
+  </wa-dropdown>
 </div>

 <script>
  const container = document.querySelector('.dropdown-selection-alt');
-  const cut = container.querySelector('sl-menu-item[value="cut"]');
-  const copy = container.querySelector('sl-menu-item[value="copy"]');
-  const paste = container.querySelector('sl-menu-item[value="paste"]');
+  const cut = container.querySelector('wa-menu-item[value="cut"]');
+  const copy = container.querySelector('wa-menu-item[value="copy"]');
+  const paste = container.querySelector('wa-menu-item[value="paste"]');

  cut.addEventListener('click', () => console.log('cut'));
  copy.addEventListener('click', () => console.log('copy'));
@@ -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/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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => {
  function handleCut() {
@@ -170,16 +170,16 @@ const App = () => {
  }

  return (
-    <SlDropdown>
-      <SlButton slot="trigger" caret>
+    <WaDropdown>
+      <WaButton slot="trigger" caret>
        Edit
-      </SlButton>
-      <SlMenu>
-        <SlMenuItem onClick={handleCut}>Cut</SlMenuItem>
-        <SlMenuItem onClick={handleCopy}>Copy</SlMenuItem>
-        <SlMenuItem onClick={handlePaste}>Paste</SlMenuItem>
-      </SlMenu>
-    </SlDropdown>
+      </WaButton>
+      <WaMenu>
+        <WaMenuItem onClick={handleCut}>Cut</WaMenuItem>
+        <WaMenuItem onClick={handleCopy}>Copy</WaMenuItem>
+        <WaMenuItem onClick={handlePaste}>Paste</WaMenuItem>
+      </WaMenu>
+    </WaDropdown>
  );
 };
 ```
@@ -189,40 +189,40 @@ const App = () => {
 The preferred placement of the dropdown can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport.

 ```html:preview
-<sl-dropdown placement="top-start">
-  <sl-button slot="trigger" caret>Edit</sl-button>
-  <sl-menu>
-    <sl-menu-item>Cut</sl-menu-item>
-    <sl-menu-item>Copy</sl-menu-item>
-    <sl-menu-item>Paste</sl-menu-item>
-    <sl-divider></sl-divider>
-    <sl-menu-item>Find</sl-menu-item>
-    <sl-menu-item>Replace</sl-menu-item>
-  </sl-menu>
-</sl-dropdown>
+<wa-dropdown placement="top-start">
+  <wa-button slot="trigger" caret>Edit</wa-button>
+  <wa-menu>
+    <wa-menu-item>Cut</wa-menu-item>
+    <wa-menu-item>Copy</wa-menu-item>
+    <wa-menu-item>Paste</wa-menu-item>
+    <wa-divider></wa-divider>
+    <wa-menu-item>Find</wa-menu-item>
+    <wa-menu-item>Replace</wa-menu-item>
+  </wa-menu>
+</wa-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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlDropdown placement="top-start">
-    <SlButton slot="trigger" caret>
+  <WaDropdown placement="top-start">
+    <WaButton slot="trigger" caret>
      Edit
-    </SlButton>
-    <SlMenu>
-      <SlMenuItem>Cut</SlMenuItem>
-      <SlMenuItem>Copy</SlMenuItem>
-      <SlMenuItem>Paste</SlMenuItem>
-      <SlDivider />
-      <SlMenuItem>Find</SlMenuItem>
-      <SlMenuItem>Replace</SlMenuItem>
-    </SlMenu>
-  </SlDropdown>
+    </WaButton>
+    <WaMenu>
+      <WaMenuItem>Cut</WaMenuItem>
+      <WaMenuItem>Copy</WaMenuItem>
+      <WaMenuItem>Paste</WaMenuItem>
+      <WaDivider />
+      <WaMenuItem>Find</WaMenuItem>
+      <WaMenuItem>Replace</WaMenuItem>
+    </WaMenu>
+  </WaDropdown>
 );
 ```

@@ -231,40 +231,40 @@ const App = () => (
 The distance from the panel to the trigger can be customized using the `distance` attribute. This value is specified in pixels.

 ```html:preview
-<sl-dropdown distance="30">
-  <sl-button slot="trigger" caret>Edit</sl-button>
-  <sl-menu>
-    <sl-menu-item>Cut</sl-menu-item>
-    <sl-menu-item>Copy</sl-menu-item>
-    <sl-menu-item>Paste</sl-menu-item>
-    <sl-divider></sl-divider>
-    <sl-menu-item>Find</sl-menu-item>
-    <sl-menu-item>Replace</sl-menu-item>
-  </sl-menu>
-</sl-dropdown>
+<wa-dropdown distance="30">
+  <wa-button slot="trigger" caret>Edit</wa-button>
+  <wa-menu>
+    <wa-menu-item>Cut</wa-menu-item>
+    <wa-menu-item>Copy</wa-menu-item>
+    <wa-menu-item>Paste</wa-menu-item>
+    <wa-divider></wa-divider>
+    <wa-menu-item>Find</wa-menu-item>
+    <wa-menu-item>Replace</wa-menu-item>
+  </wa-menu>
+</wa-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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlDropdown distance={30}>
-    <SlButton slot="trigger" caret>
+  <WaDropdown distance={30}>
+    <WaButton slot="trigger" caret>
      Edit
-    </SlButton>
-    <SlMenu>
-      <SlMenuItem>Cut</SlMenuItem>
-      <SlMenuItem>Copy</SlMenuItem>
-      <SlMenuItem>Paste</SlMenuItem>
-      <SlDivider />
-      <SlMenuItem>Find</SlMenuItem>
-      <SlMenuItem>Replace</SlMenuItem>
-    </SlMenu>
-  </SlDropdown>
+    </WaButton>
+    <WaMenu>
+      <WaMenuItem>Cut</WaMenuItem>
+      <WaMenuItem>Copy</WaMenuItem>
+      <WaMenuItem>Paste</WaMenuItem>
+      <WaDivider />
+      <WaMenuItem>Find</WaMenuItem>
+      <WaMenuItem>Replace</WaMenuItem>
+    </WaMenu>
+  </WaDropdown>
 );
 ```

@@ -273,85 +273,85 @@ const App = () => (
 The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels.

 ```html:preview
-<sl-dropdown skidding="30">
-  <sl-button slot="trigger" caret>Edit</sl-button>
-  <sl-menu>
-    <sl-menu-item>Cut</sl-menu-item>
-    <sl-menu-item>Copy</sl-menu-item>
-    <sl-menu-item>Paste</sl-menu-item>
-    <sl-divider></sl-divider>
-    <sl-menu-item>Find</sl-menu-item>
-    <sl-menu-item>Replace</sl-menu-item>
-  </sl-menu>
-</sl-dropdown>
+<wa-dropdown skidding="30">
+  <wa-button slot="trigger" caret>Edit</wa-button>
+  <wa-menu>
+    <wa-menu-item>Cut</wa-menu-item>
+    <wa-menu-item>Copy</wa-menu-item>
+    <wa-menu-item>Paste</wa-menu-item>
+    <wa-divider></wa-divider>
+    <wa-menu-item>Find</wa-menu-item>
+    <wa-menu-item>Replace</wa-menu-item>
+  </wa-menu>
+</wa-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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlDropdown skidding={30}>
-    <SlButton slot="trigger" caret>
+  <WaDropdown skidding={30}>
+    <WaButton slot="trigger" caret>
      Edit
-    </SlButton>
-    <SlMenu>
-      <SlMenuItem>Cut</SlMenuItem>
-      <SlMenuItem>Copy</SlMenuItem>
-      <SlMenuItem>Paste</SlMenuItem>
-      <SlDivider />
-      <SlMenuItem>Find</SlMenuItem>
-      <SlMenuItem>Replace</SlMenuItem>
-    </SlMenu>
-  </SlDropdown>
+    </WaButton>
+    <WaMenu>
+      <WaMenuItem>Cut</WaMenuItem>
+      <WaMenuItem>Copy</WaMenuItem>
+      <WaMenuItem>Paste</WaMenuItem>
+      <WaDivider />
+      <WaMenuItem>Find</WaMenuItem>
+      <WaMenuItem>Replace</WaMenuItem>
+    </WaMenu>
+  </WaDropdown>
 );
 ```

 ### Submenus

-To create a submenu, nest an `<sl-menu slot="submenu">` element in a [menu item](/components/menu-item).
+To create a submenu, nest an `<wa-menu slot="submenu">` element in a [menu item](/components/menu-item).

 ```html:preview
-<sl-dropdown>
-  <sl-button slot="trigger" caret>Edit</sl-button>
+<wa-dropdown>
+  <wa-button slot="trigger" caret>Edit</wa-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>
+  <wa-menu style="max-width: 200px;">
+    <wa-menu-item value="undo">Undo</wa-menu-item>
+    <wa-menu-item value="redo">Redo</wa-menu-item>
+    <wa-divider></wa-divider>
+    <wa-menu-item value="cut">Cut</wa-menu-item>
+    <wa-menu-item value="copy">Copy</wa-menu-item>
+    <wa-menu-item value="paste">Paste</wa-menu-item>
+    <wa-divider></wa-divider>
+    <wa-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>
+      <wa-menu slot="submenu">
+        <wa-menu-item value="find">Find…</wa-menu-item>
+        <wa-menu-item value="find-previous">Find Next</wa-menu-item>
+        <wa-menu-item value="find-next">Find Previous</wa-menu-item>
+      </wa-menu>
+    </wa-menu-item>
+    <wa-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>
+      <wa-menu slot="submenu">
+        <wa-menu-item value="uppercase">Make uppercase</wa-menu-item>
+        <wa-menu-item value="lowercase">Make lowercase</wa-menu-item>
+        <wa-menu-item value="capitalize">Capitalize</wa-menu-item>
+      </wa-menu>
+    </wa-menu-item>
+  </wa-menu>
+</wa-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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const css = `
  .dropdown-hoist {
@@ -363,35 +363,35 @@ const css = `

 const App = () => (
  <>
-    <SlDropdown>
-      <SlButton slot="trigger" caret>Edit</SlButton>
+    <WaDropdown>
+      <WaButton slot="trigger" caret>Edit</WaButton>

-      <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>
+      <WaMenu style="max-width: 200px;">
+        <WaMenuItem value="undo">Undo</WaMenuItem>
+        <WaMenuItem value="redo">Redo</WaMenuItem>
+        <WaDivider />
+        <WaMenuItem value="cut">Cut</WaMenuItem>
+        <WaMenuItem value="copy">Copy</WaMenuItem>
+        <WaMenuItem value="paste">Paste</WaMenuItem>
+        <WaDivider />
+        <WaMenuItem>
          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>
+          <WaMenu slot="submenu">
+            <WaMenuItem value="find">Find…</WaMenuItem>
+            <WaMenuItem value="find-previous">Find Next</WaMenuItem>
+            <WaMenuItem value="find-next">Find Previous</WaMenuItem>
+          </WaMenu>
+        </WaMenuItem>
+        <WaMenuItem>
          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>
+          <WaMenu slot="submenu">
+            <WaMenuItem value="uppercase">Make uppercase</WaMenuItem>
+            <WaMenuItem value="lowercase">Make lowercase</WaMenuItem>
+            <WaMenuItem value="capitalize">Capitalize</WaMenuItem>
+          </WaMenu>
+        </WaMenuItem>
+      </WaMenu>
+    </WaDropdown>
  </>
 );
 ```
@@ -406,23 +406,23 @@ Dropdown panels will be clipped if they're inside a container that has `overflow

 ```html:preview
 <div class="dropdown-hoist">
-  <sl-dropdown>
-    <sl-button slot="trigger" caret>No Hoist</sl-button>
-    <sl-menu>
-      <sl-menu-item>Item 1</sl-menu-item>
-      <sl-menu-item>Item 2</sl-menu-item>
-      <sl-menu-item>Item 3</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
+  <wa-dropdown>
+    <wa-button slot="trigger" caret>No Hoist</wa-button>
+    <wa-menu>
+      <wa-menu-item>Item 1</wa-menu-item>
+      <wa-menu-item>Item 2</wa-menu-item>
+      <wa-menu-item>Item 3</wa-menu-item>
+    </wa-menu>
+  </wa-dropdown>

-  <sl-dropdown hoist>
-    <sl-button slot="trigger" caret>Hoist</sl-button>
-    <sl-menu>
-      <sl-menu-item>Item 1</sl-menu-item>
-      <sl-menu-item>Item 2</sl-menu-item>
-      <sl-menu-item>Item 3</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
+  <wa-dropdown hoist>
+    <wa-button slot="trigger" caret>Hoist</wa-button>
+    <wa-menu>
+      <wa-menu-item>Item 1</wa-menu-item>
+      <wa-menu-item>Item 2</wa-menu-item>
+      <wa-menu-item>Item 3</wa-menu-item>
+    </wa-menu>
+  </wa-dropdown>
 </div>

 <style>
@@ -436,11 +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/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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const css = `
  .dropdown-hoist {
@@ -453,27 +453,27 @@ const css = `
 const App = () => (
  <>
    <div className="dropdown-hoist">
-      <SlDropdown>
-        <SlButton slot="trigger" caret>
+      <WaDropdown>
+        <WaButton slot="trigger" caret>
          No Hoist
-        </SlButton>
-        <SlMenu>
-          <SlMenuItem>Item 1</SlMenuItem>
-          <SlMenuItem>Item 2</SlMenuItem>
-          <SlMenuItem>Item 3</SlMenuItem>
-        </SlMenu>
-      </SlDropdown>
+        </WaButton>
+        <WaMenu>
+          <WaMenuItem>Item 1</WaMenuItem>
+          <WaMenuItem>Item 2</WaMenuItem>
+          <WaMenuItem>Item 3</WaMenuItem>
+        </WaMenu>
+      </WaDropdown>

-      <SlDropdown hoist>
-        <SlButton slot="trigger" caret>
+      <WaDropdown hoist>
+        <WaButton slot="trigger" caret>
          Hoist
-        </SlButton>
-        <SlMenu>
-          <SlMenuItem>Item 1</SlMenuItem>
-          <SlMenuItem>Item 2</SlMenuItem>
-          <SlMenuItem>Item 3</SlMenuItem>
-        </SlMenu>
-      </SlDropdown>
+        </WaButton>
+        <WaMenu>
+          <WaMenuItem>Item 1</WaMenuItem>
+          <WaMenuItem>Item 2</WaMenuItem>
+          <WaMenuItem>Item 3</WaMenuItem>
+        </WaMenu>
+      </WaDropdown>
    </div>

    <style>{css}</style>
--- a/docs/pages/components/format-bytes.md
+++ b/docs/pages/components/format-bytes.md
@@ -7,16 +7,16 @@ layout: component

 ```html:preview
 <div class="format-bytes-overview">
-  The file is <sl-format-bytes value="1000"></sl-format-bytes> in size. <br /><br />
-  <sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>
+  The file is <wa-format-bytes value="1000"></wa-format-bytes> in size. <br /><br />
+  <wa-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></wa-input>
 </div>

 <script>
  const container = document.querySelector('.format-bytes-overview');
-  const formatter = container.querySelector('sl-format-bytes');
-  const input = container.querySelector('sl-input');
+  const formatter = container.querySelector('wa-format-bytes');
+  const input = container.querySelector('wa-input');

-  input.addEventListener('sl-input', () => (formatter.value = input.value || 0));
+  input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
 </script>
 ```

@@ -24,24 +24,24 @@ layout: component

 ```jsx:react
 import { useState } from 'react';
-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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const App = () => {
  const [value, setValue] = useState(1000);

  return (
    <>
-      The file is <SlFormatBytes value={value} /> in size.
+      The file is <WaFormatBytes value={value} /> in size.
      <br />
      <br />
-      <SlInput
+      <WaInput
        type="number"
        value={value}
        label="Number to Format"
        style={{ maxWidth: '180px' }}
-        onSlInput={event => setValue(event.target.value)}
+        onWaInput={event => setValue(event.target.value)}
      />
    </>
  );
@@ -57,24 +57,24 @@ const App = () => {
 Set the `value` attribute to a number to get the value in bytes.

 ```html:preview
-<sl-format-bytes value="12"></sl-format-bytes><br />
-<sl-format-bytes value="1200"></sl-format-bytes><br />
-<sl-format-bytes value="1200000"></sl-format-bytes><br />
-<sl-format-bytes value="1200000000"></sl-format-bytes>
+<wa-format-bytes value="12"></wa-format-bytes><br />
+<wa-format-bytes value="1200"></wa-format-bytes><br />
+<wa-format-bytes value="1200000"></wa-format-bytes><br />
+<wa-format-bytes value="1200000000"></wa-format-bytes>
 ```

 ```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';

 const App = () => (
  <>
-    <SlFormatBytes value="12" />
+    <WaFormatBytes value="12" />
    <br />
-    <SlFormatBytes value="1200" />
+    <WaFormatBytes value="1200" />
    <br />
-    <SlFormatBytes value="1200000" />
+    <WaFormatBytes value="1200000" />
    <br />
-    <SlFormatBytes value="1200000000" />
+    <WaFormatBytes value="1200000000" />
  </>
 );
 ```
@@ -84,24 +84,24 @@ const App = () => (
 To get the value in bits, set the `unit` attribute to `bit`.

 ```html:preview
-<sl-format-bytes value="12" unit="bit"></sl-format-bytes><br />
-<sl-format-bytes value="1200" unit="bit"></sl-format-bytes><br />
-<sl-format-bytes value="1200000" unit="bit"></sl-format-bytes><br />
-<sl-format-bytes value="1200000000" unit="bit"></sl-format-bytes>
+<wa-format-bytes value="12" unit="bit"></wa-format-bytes><br />
+<wa-format-bytes value="1200" unit="bit"></wa-format-bytes><br />
+<wa-format-bytes value="1200000" unit="bit"></wa-format-bytes><br />
+<wa-format-bytes value="1200000000" unit="bit"></wa-format-bytes>
 ```

 ```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';

 const App = () => (
  <>
-    <SlFormatBytes value="12" unit="bit" />
+    <WaFormatBytes value="12" unit="bit" />
    <br />
-    <SlFormatBytes value="1200" unit="bit" />
+    <WaFormatBytes value="1200" unit="bit" />
    <br />
-    <SlFormatBytes value="1200000" unit="bit" />
+    <WaFormatBytes value="1200000" unit="bit" />
    <br />
-    <SlFormatBytes value="1200000000" unit="bit" />
+    <WaFormatBytes value="1200000000" unit="bit" />
  </>
 );
 ```
@@ -111,24 +111,24 @@ const App = () => (
 Use the `lang` attribute to set the number formatting locale.

 ```html:preview
-<sl-format-bytes value="12" lang="de"></sl-format-bytes><br />
-<sl-format-bytes value="1200" lang="de"></sl-format-bytes><br />
-<sl-format-bytes value="1200000" lang="de"></sl-format-bytes><br />
-<sl-format-bytes value="1200000000" lang="de"></sl-format-bytes>
+<wa-format-bytes value="12" lang="de"></wa-format-bytes><br />
+<wa-format-bytes value="1200" lang="de"></wa-format-bytes><br />
+<wa-format-bytes value="1200000" lang="de"></wa-format-bytes><br />
+<wa-format-bytes value="1200000000" lang="de"></wa-format-bytes>
 ```

 ```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';

 const App = () => (
  <>
-    <SlFormatBytes value="12" lang="de" />
+    <WaFormatBytes value="12" lang="de" />
    <br />
-    <SlFormatBytes value="1200" lang="de" />
+    <WaFormatBytes value="1200" lang="de" />
    <br />
-    <SlFormatBytes value="1200000" lang="de" />
+    <WaFormatBytes value="1200000" lang="de" />
    <br />
-    <SlFormatBytes value="1200000000" lang="de" />
+    <WaFormatBytes value="1200000000" lang="de" />
  </>
 );
 ```
--- a/docs/pages/components/format-date.md
+++ b/docs/pages/components/format-date.md
@@ -8,14 +8,14 @@ layout: component
 Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). No language packs are required.

 ```html:preview
-<!-- Shoelace 2 release date 🎉 -->
-<sl-format-date date="2020-07-15T09:17:00-04:00"></sl-format-date>
+<!-- Web Awesome 2 release date 🎉 -->
+<wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
 ```

 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';

-const App = () => <SlFormatDate date="2020-07-15T09:17:00-04:00" />;
+const App = () => <WaFormatDate date="2020-07-15T09:17:00-04:00" />;
 ```

 The `date` attribute determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed.
@@ -32,51 +32,51 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h

 ```html:preview
 <!-- Human-readable date -->
-<sl-format-date month="long" day="numeric" year="numeric"></sl-format-date><br />
+<wa-format-date month="long" day="numeric" year="numeric"></wa-format-date><br />

 <!-- Time -->
-<sl-format-date hour="numeric" minute="numeric"></sl-format-date><br />
+<wa-format-date hour="numeric" minute="numeric"></wa-format-date><br />

 <!-- Weekday -->
-<sl-format-date weekday="long"></sl-format-date><br />
+<wa-format-date weekday="long"></wa-format-date><br />

 <!-- Month -->
-<sl-format-date month="long"></sl-format-date><br />
+<wa-format-date month="long"></wa-format-date><br />

 <!-- Year -->
-<sl-format-date year="numeric"></sl-format-date><br />
+<wa-format-date year="numeric"></wa-format-date><br />

 <!-- No formatting options -->
-<sl-format-date></sl-format-date>
+<wa-format-date></wa-format-date>
 ```

 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';

 const App = () => (
  <>
    {/* Human-readable date */}
-    <SlFormatDate month="long" day="numeric" year="numeric" />
+    <WaFormatDate month="long" day="numeric" year="numeric" />
    <br />

    {/* Time */}
-    <SlFormatDate hour="numeric" minute="numeric" />
+    <WaFormatDate hour="numeric" minute="numeric" />
    <br />

    {/* Weekday */}
-    <SlFormatDate weekday="long" />
+    <WaFormatDate weekday="long" />
    <br />

    {/* Month */}
-    <SlFormatDate month="long" />
+    <WaFormatDate month="long" />
    <br />

    {/* Year */}
-    <SlFormatDate year="numeric" />
+    <WaFormatDate year="numeric" />
    <br />

    {/* No formatting options */}
-    <SlFormatDate />
+    <WaFormatDate />
  </>
 );
 ```
@@ -86,18 +86,18 @@ const App = () => (
 By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`.

 ```html:preview
-<sl-format-date hour="numeric" minute="numeric" hour-format="12"></sl-format-date><br />
-<sl-format-date hour="numeric" minute="numeric" hour-format="24"></sl-format-date>
+<wa-format-date hour="numeric" minute="numeric" hour-format="12"></wa-format-date><br />
+<wa-format-date hour="numeric" minute="numeric" hour-format="24"></wa-format-date>
 ```

 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';

 const App = () => (
  <>
-    <SlFormatDate hour="numeric" minute="numeric" hour-format="12" />
+    <WaFormatDate hour="numeric" minute="numeric" hour-format="12" />
    <br />
-    <SlFormatDate hour="numeric" minute="numeric" hour-format="24" />
+    <WaFormatDate hour="numeric" minute="numeric" hour-format="24" />
  </>
 );
 ```
@@ -107,21 +107,21 @@ const App = () => (
 Use the `lang` attribute to set the date/time formatting locale.

 ```html:preview
-English: <sl-format-date lang="en"></sl-format-date><br />
-French: <sl-format-date lang="fr"></sl-format-date><br />
-Russian: <sl-format-date lang="ru"></sl-format-date>
+English: <wa-format-date lang="en"></wa-format-date><br />
+French: <wa-format-date lang="fr"></wa-format-date><br />
+Russian: <wa-format-date lang="ru"></wa-format-date>
 ```

 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';

 const App = () => (
  <>
-    English: <SlFormatDate lang="en" />
+    English: <WaFormatDate lang="en" />
    <br />
-    French: <SlFormatDate lang="fr" />
+    French: <WaFormatDate lang="fr" />
    <br />
-    Russian: <SlFormatDate lang="ru" />
+    Russian: <WaFormatDate lang="ru" />
  </>
 );
 ```
--- a/docs/pages/components/format-number.md
+++ b/docs/pages/components/format-number.md
@@ -9,17 +9,17 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel

 ```html:preview
 <div class="format-number-overview">
-  <sl-format-number value="1000"></sl-format-number>
+  <wa-format-number value="1000"></wa-format-number>
  <br /><br />
-  <sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>
+  <wa-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></wa-input>
 </div>

 <script>
  const container = document.querySelector('.format-number-overview');
-  const formatter = container.querySelector('sl-format-number');
-  const input = container.querySelector('sl-input');
+  const formatter = container.querySelector('wa-format-number');
+  const input = container.querySelector('wa-input');

-  input.addEventListener('sl-input', () => (formatter.value = input.value || 0));
+  input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
 </script>
 ```

@@ -27,23 +27,23 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel

 ```jsx:react
 import { useState } from 'react';
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const App = () => {
  const [value, setValue] = useState(1000);

  return (
    <>
-      <SlFormatNumber value={value} />
+      <WaFormatNumber value={value} />
      <br />
      <br />
-      <SlInput
+      <WaInput
        type="number"
        value={value}
        label="Number to Format"
        style={{ maxWidth: '180px' }}
-        onSlInput={event => setValue(event.target.value)}
+        onWaInput={event => setValue(event.target.value)}
      />
    </>
  );
@@ -59,27 +59,27 @@ const App = () => {
 To get the value as a percent, set the `type` attribute to `percent`.

 ```html:preview
-<sl-format-number type="percent" value="0"></sl-format-number><br />
-<sl-format-number type="percent" value="0.25"></sl-format-number><br />
-<sl-format-number type="percent" value="0.50"></sl-format-number><br />
-<sl-format-number type="percent" value="0.75"></sl-format-number><br />
-<sl-format-number type="percent" value="1"></sl-format-number>
+<wa-format-number type="percent" value="0"></wa-format-number><br />
+<wa-format-number type="percent" value="0.25"></wa-format-number><br />
+<wa-format-number type="percent" value="0.50"></wa-format-number><br />
+<wa-format-number type="percent" value="0.75"></wa-format-number><br />
+<wa-format-number type="percent" value="1"></wa-format-number>
 ```

 ```jsx:react
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';

 const App = () => (
  <>
-    <SlFormatNumber type="percent" value={0} />
+    <WaFormatNumber type="percent" value={0} />
    <br />
-    <SlFormatNumber type="percent" value={0.25} />
+    <WaFormatNumber type="percent" value={0.25} />
    <br />
-    <SlFormatNumber type="percent" value={0.5} />
+    <WaFormatNumber type="percent" value={0.5} />
    <br />
-    <SlFormatNumber type="percent" value={0.75} />
+    <WaFormatNumber type="percent" value={0.75} />
    <br />
-    <SlFormatNumber type="percent" value={1} />
+    <WaFormatNumber type="percent" value={1} />
  </>
 );
 ```
@@ -89,21 +89,21 @@ const App = () => (
 Use the `lang` attribute to set the number formatting locale.

 ```html:preview
-English: <sl-format-number value="2000" lang="en" minimum-fraction-digits="2"></sl-format-number><br />
-German: <sl-format-number value="2000" lang="de" minimum-fraction-digits="2"></sl-format-number><br />
-Russian: <sl-format-number value="2000" lang="ru" minimum-fraction-digits="2"></sl-format-number>
+English: <wa-format-number value="2000" lang="en" minimum-fraction-digits="2"></wa-format-number><br />
+German: <wa-format-number value="2000" lang="de" minimum-fraction-digits="2"></wa-format-number><br />
+Russian: <wa-format-number value="2000" lang="ru" minimum-fraction-digits="2"></wa-format-number>
 ```

 ```jsx:react
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';

 const App = () => (
  <>
-    English: <SlFormatNumber value="2000" lang="en" minimum-fraction-digits="2" />
+    English: <WaFormatNumber value="2000" lang="en" minimum-fraction-digits="2" />
    <br />
-    German: <SlFormatNumber value="2000" lang="de" minimum-fraction-digits="2" />
+    German: <WaFormatNumber value="2000" lang="de" minimum-fraction-digits="2" />
    <br />
-    Russian: <SlFormatNumber value="2000" lang="ru" minimum-fraction-digits="2" />
+    Russian: <WaFormatNumber value="2000" lang="ru" minimum-fraction-digits="2" />
  </>
 );
 ```
@@ -113,27 +113,27 @@ const App = () => (
 To format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `lang` to ensure the the number is formatted correctly for the target locale.

 ```html:preview
-<sl-format-number type="currency" currency="USD" value="2000" lang="en-US"></sl-format-number><br />
-<sl-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></sl-format-number><br />
-<sl-format-number type="currency" currency="EUR" value="2000" lang="de"></sl-format-number><br />
-<sl-format-number type="currency" currency="RUB" value="2000" lang="ru"></sl-format-number><br />
-<sl-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></sl-format-number>
+<wa-format-number type="currency" currency="USD" value="2000" lang="en-US"></wa-format-number><br />
+<wa-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></wa-format-number><br />
+<wa-format-number type="currency" currency="EUR" value="2000" lang="de"></wa-format-number><br />
+<wa-format-number type="currency" currency="RUB" value="2000" lang="ru"></wa-format-number><br />
+<wa-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></wa-format-number>
 ```

 ```jsx:react
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';

 const App = () => (
  <>
-    <SlFormatNumber type="currency" currency="USD" value="2000" lang="en-US" />
+    <WaFormatNumber type="currency" currency="USD" value="2000" lang="en-US" />
    <br />
-    <SlFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" />
+    <WaFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" />
    <br />
-    <SlFormatNumber type="currency" currency="EUR" value="2000" lang="de" />
+    <WaFormatNumber type="currency" currency="EUR" value="2000" lang="de" />
    <br />
-    <SlFormatNumber type="currency" currency="RUB" value="2000" lang="ru" />
+    <WaFormatNumber type="currency" currency="RUB" value="2000" lang="ru" />
    <br />
-    <SlFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" />
+    <WaFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" />
  </>
 );
 ```
--- a/docs/pages/components/icon-button.md
+++ b/docs/pages/components/icon-button.md
@@ -5,16 +5,16 @@ meta:
 layout: component
 ---

-For a full list of icons that come bundled with Shoelace, refer to the [icon component](/components/icon).
+For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/components/icon).

 ```html:preview
-<sl-icon-button name="gear" label="Settings"></sl-icon-button>
+<wa-icon-button name="gear" label="Settings"></wa-icon-button>
 ```

 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';

-const App = () => <SlIconButton name="gear" label="Settings" />;
+const App = () => <WaIconButton name="gear" label="Settings" />;
 ```

 ## Examples
@@ -24,21 +24,21 @@ const App = () => <SlIconButton name="gear" label="Settings" />;
 Icon buttons inherit their parent element's `font-size`.

 ```html:preview
-<sl-icon-button name="pencil" label="Edit" style="font-size: 1.5rem;"></sl-icon-button>
-<sl-icon-button name="pencil" label="Edit" style="font-size: 2rem;"></sl-icon-button>
-<sl-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></sl-icon-button>
+<wa-icon-button name="pencil" label="Edit" style="font-size: 1.5rem;"></wa-icon-button>
+<wa-icon-button name="pencil" label="Edit" style="font-size: 2rem;"></wa-icon-button>
+<wa-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></wa-icon-button>
 ```

 {% raw %}

 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';

 const App = () => (
  <>
-    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '1.5rem' }} />
-    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '2rem' }} />
-    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '2.5rem' }} />
+    <WaIconButton name="pencil" label="Edit" style={{ fontSize: '1.5rem' }} />
+    <WaIconButton name="pencil" label="Edit" style={{ fontSize: '2rem' }} />
+    <WaIconButton name="pencil" label="Edit" style={{ fontSize: '2.5rem' }} />
  </>
 );
 ```
@@ -51,41 +51,41 @@ Icon buttons are designed to have a uniform appearance, so their color is not in

 ```html:preview
 <div class="icon-button-color">
-  <sl-icon-button name="type-bold" label="Bold"></sl-icon-button>
-  <sl-icon-button name="type-italic" label="Italic"></sl-icon-button>
-  <sl-icon-button name="type-underline" label="Underline"></sl-icon-button>
+  <wa-icon-button name="type-bold" label="Bold"></wa-icon-button>
+  <wa-icon-button name="type-italic" label="Italic"></wa-icon-button>
+  <wa-icon-button name="type-underline" label="Underline"></wa-icon-button>
 </div>

 <style>
-  .icon-button-color sl-icon-button::part(base) {
+  .icon-button-color wa-icon-button::part(base) {
    color: #b00091;
  }

-  .icon-button-color sl-icon-button::part(base):hover,
-  .icon-button-color sl-icon-button::part(base):focus {
+  .icon-button-color wa-icon-button::part(base):hover,
+  .icon-button-color wa-icon-button::part(base):focus {
    color: #c913aa;
  }

-  .icon-button-color sl-icon-button::part(base):active {
+  .icon-button-color wa-icon-button::part(base):active {
    color: #960077;
  }
 </style>
 ```

 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';

 const css = `
-  .icon-button-color sl-icon-button::part(base) {
+  .icon-button-color wa-icon-button::part(base) {
    color: #b00091;
  }

-  .icon-button-color sl-icon-button::part(base):hover,
-  .icon-button-color sl-icon-button::part(base):focus {
+  .icon-button-color wa-icon-button::part(base):hover,
+  .icon-button-color wa-icon-button::part(base):focus {
    color: #c913aa;
  }

-  .icon-button-color sl-icon-button::part(base):active {
+  .icon-button-color wa-icon-button::part(base):active {
    color: #960077;
  }
 `;
@@ -93,9 +93,9 @@ const css = `
 const App = () => (
  <>
    <div className="icon-button-color">
-      <SlIconButton name="type-bold" label="Bold" />
-      <SlIconButton name="type-italic" label="Italic" />
-      <SlIconButton name="type-underline" label="Underline" />
+      <WaIconButton name="type-bold" label="Bold" />
+      <WaIconButton name="type-italic" label="Italic" />
+      <WaIconButton name="type-underline" label="Underline" />
    </div>

    <style>{css}</style>
@@ -108,13 +108,13 @@ const App = () => (
 Use the `href` attribute to convert the button to a link.

 ```html:preview
-<sl-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></sl-icon-button>
+<wa-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>
 ```

 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';

-const App = () => <SlIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
+const App = () => <WaIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
 ```

 ### Icon Button with Tooltip
@@ -122,19 +122,19 @@ const App = () => <SlIconButton name="gear" label="Settings" href="https://examp
 Wrap a tooltip around an icon button to provide contextual information to the user.

 ```html:preview
-<sl-tooltip content="Settings">
-  <sl-icon-button name="gear" label="Settings"></sl-icon-button>
-</sl-tooltip>
+<wa-tooltip content="Settings">
+  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+</wa-tooltip>
 ```

 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';

 const App = () => (
-  <SlTooltip content="Settings">
-    <SlIconButton name="gear" label="Settings" />
-  </SlTooltip>
+  <WaTooltip content="Settings">
+    <WaIconButton name="gear" label="Settings" />
+  </WaTooltip>
 );
 ```

@@ -143,11 +143,11 @@ const App = () => (
 Use the `disabled` attribute to disable the icon button.

 ```html:preview
-<sl-icon-button name="gear" label="Settings" disabled></sl-icon-button>
+<wa-icon-button name="gear" label="Settings" disabled></wa-icon-button>
 ```

 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';

-const App = () => <SlIconButton name="gear" label="Settings" disabled />;
+const App = () => <WaIconButton name="gear" label="Settings" disabled />;
 ```
--- a/docs/pages/components/icon.md
+++ b/docs/pages/components/icon.md
@@ -5,10 +5,10 @@ meta:
 layout: component
 ---

-Shoelace comes bundled with over 1,500 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These icons are part of the `default` icon library. If you prefer, you can register [custom icon libraries](#icon-libraries) as well.
+Web Awesome comes bundled with over 1,500 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These icons are part of the `default` icon library. If you prefer, you can register [custom icon libraries](#icon-libraries) as well.

 :::tip
-Depending on how you're loading Shoelace, you may need to copy icon assets and/or [set the base path](/getting-started/installation/#setting-the-base-path) so Shoelace knows where to load them from. Otherwise, icons may not appear and you'll see 404 Not Found errors in the dev console.
+Depending on how you're loading Web Awesome, you may need to copy icon assets and/or [set the base path](/getting-started/installation/#setting-the-base-path) so Web Awesome knows where to load them from. Otherwise, icons may not appear and you'll see 404 Not Found errors in the dev console.
 :::

 ## Default Icons
@@ -16,19 +16,19 @@ Depending on how you're loading Shoelace, you may need to copy icon assets and/o
 All available icons in the `default` icon library are shown below. Click or tap on any icon to copy its name, then you can use it in your HTML like this.

 ```html
-<sl-icon name="icon-name-here"></sl-icon>
+<wa-icon name="icon-name-here"></wa-icon>
 ```

 <div class="icon-search">
  <div class="icon-search-controls">
-    <sl-input placeholder="Search Icons" clearable>
-      <sl-icon slot="prefix" name="search"></sl-icon>
-    </sl-input>
-    <sl-select value="outline">
-      <sl-option value="outline">Outlined</sl-option>
-      <sl-option value="fill">Filled</sl-option>
-      <sl-option value="all">All icons</sl-option>
-    </sl-select>
+    <wa-input placeholder="Search Icons" clearable>
+      <wa-icon slot="prefix" name="search"></wa-icon>
+    </wa-input>
+    <wa-select value="outline">
+      <wa-option value="outline">Outlined</wa-option>
+      <wa-option value="fill">Filled</wa-option>
+      <wa-option value="all">All icons</wa-option>
+    </wa-select>
  </div>
  <div class="icon-list"></div>
  <input type="text" class="icon-copy-input" aria-hidden="true" tabindex="-1">
@@ -38,65 +38,65 @@ All available icons in the `default` icon library are shown below. Click or tap

 ### Colors

-Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<sl-icon>` element or an ancestor to change the color.
+Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` element or an ancestor to change the color.

 ```html:preview
 <div style="color: #4a90e2;">
-  <sl-icon name="exclamation-triangle"></sl-icon>
-  <sl-icon name="archive"></sl-icon>
-  <sl-icon name="battery-charging"></sl-icon>
-  <sl-icon name="bell"></sl-icon>
+  <wa-icon name="exclamation-triangle"></wa-icon>
+  <wa-icon name="archive"></wa-icon>
+  <wa-icon name="battery-charging"></wa-icon>
+  <wa-icon name="bell"></wa-icon>
 </div>
 <div style="color: #9013fe;">
-  <sl-icon name="clock"></sl-icon>
-  <sl-icon name="cloud"></sl-icon>
-  <sl-icon name="download"></sl-icon>
-  <sl-icon name="file-earmark"></sl-icon>
+  <wa-icon name="clock"></wa-icon>
+  <wa-icon name="cloud"></wa-icon>
+  <wa-icon name="download"></wa-icon>
+  <wa-icon name="file-earmark"></wa-icon>
 </div>
 <div style="color: #417505;">
-  <sl-icon name="flag"></sl-icon>
-  <sl-icon name="heart"></sl-icon>
-  <sl-icon name="image"></sl-icon>
-  <sl-icon name="lightning"></sl-icon>
+  <wa-icon name="flag"></wa-icon>
+  <wa-icon name="heart"></wa-icon>
+  <wa-icon name="image"></wa-icon>
+  <wa-icon name="lightning"></wa-icon>
 </div>
 <div style="color: #f5a623;">
-  <sl-icon name="mic"></sl-icon>
-  <sl-icon name="search"></sl-icon>
-  <sl-icon name="star"></sl-icon>
-  <sl-icon name="trash"></sl-icon>
+  <wa-icon name="mic"></wa-icon>
+  <wa-icon name="search"></wa-icon>
+  <wa-icon name="star"></wa-icon>
+  <wa-icon name="trash"></wa-icon>
 </div>
 ```

 {% raw %}

 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
  <>
    <div style={{ color: '#4a90e2' }}>
-      <SlIcon name="exclamation-triangle"></SlIcon>
-      <SlIcon name="archive"></SlIcon>
-      <SlIcon name="battery-charging"></SlIcon>
-      <SlIcon name="bell"></SlIcon>
+      <WaIcon name="exclamation-triangle"></WaIcon>
+      <WaIcon name="archive"></WaIcon>
+      <WaIcon name="battery-charging"></WaIcon>
+      <WaIcon name="bell"></WaIcon>
    </div>
    <div style={{ color: '#9013fe' }}>
-      <SlIcon name="clock"></SlIcon>
-      <SlIcon name="cloud"></SlIcon>
-      <SlIcon name="download"></SlIcon>
-      <SlIcon name="file-earmark"></SlIcon>
+      <WaIcon name="clock"></WaIcon>
+      <WaIcon name="cloud"></WaIcon>
+      <WaIcon name="download"></WaIcon>
+      <WaIcon name="file-earmark"></WaIcon>
    </div>
    <div style={{ color: '#417505' }}>
-      <SlIcon name="flag"></SlIcon>
-      <SlIcon name="heart"></SlIcon>
-      <SlIcon name="image"></SlIcon>
-      <SlIcon name="lightning"></SlIcon>
+      <WaIcon name="flag"></WaIcon>
+      <WaIcon name="heart"></WaIcon>
+      <WaIcon name="image"></WaIcon>
+      <WaIcon name="lightning"></WaIcon>
    </div>
    <div style={{ color: '#f5a623' }}>
-      <SlIcon name="mic"></SlIcon>
-      <SlIcon name="search"></SlIcon>
-      <SlIcon name="star"></SlIcon>
-      <SlIcon name="trash"></SlIcon>
+      <WaIcon name="mic"></WaIcon>
+      <WaIcon name="search"></WaIcon>
+      <WaIcon name="star"></WaIcon>
+      <WaIcon name="trash"></WaIcon>
    </div>
  </>
 );
@@ -110,48 +110,48 @@ Icons are sized relative to the current font size. To change their size, set the

 ```html:preview
 <div style="font-size: 32px;">
-  <sl-icon name="exclamation-triangle"></sl-icon>
-  <sl-icon name="archive"></sl-icon>
-  <sl-icon name="battery-charging"></sl-icon>
-  <sl-icon name="bell"></sl-icon>
-  <sl-icon name="clock"></sl-icon>
-  <sl-icon name="cloud"></sl-icon>
-  <sl-icon name="download"></sl-icon>
-  <sl-icon name="file-earmark"></sl-icon>
-  <sl-icon name="flag"></sl-icon>
-  <sl-icon name="heart"></sl-icon>
-  <sl-icon name="image"></sl-icon>
-  <sl-icon name="lightning"></sl-icon>
-  <sl-icon name="mic"></sl-icon>
-  <sl-icon name="search"></sl-icon>
-  <sl-icon name="star"></sl-icon>
-  <sl-icon name="trash"></sl-icon>
+  <wa-icon name="exclamation-triangle"></wa-icon>
+  <wa-icon name="archive"></wa-icon>
+  <wa-icon name="battery-charging"></wa-icon>
+  <wa-icon name="bell"></wa-icon>
+  <wa-icon name="clock"></wa-icon>
+  <wa-icon name="cloud"></wa-icon>
+  <wa-icon name="download"></wa-icon>
+  <wa-icon name="file-earmark"></wa-icon>
+  <wa-icon name="flag"></wa-icon>
+  <wa-icon name="heart"></wa-icon>
+  <wa-icon name="image"></wa-icon>
+  <wa-icon name="lightning"></wa-icon>
+  <wa-icon name="mic"></wa-icon>
+  <wa-icon name="search"></wa-icon>
+  <wa-icon name="star"></wa-icon>
+  <wa-icon name="trash"></wa-icon>
 </div>
 ```

 {% raw %}

 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
  <div style={{ fontSize: '32px' }}>
-    <SlIcon name="exclamation-triangle" />
-    <SlIcon name="archive" />
-    <SlIcon name="battery-charging" />
-    <SlIcon name="bell" />
-    <SlIcon name="clock" />
-    <SlIcon name="cloud" />
-    <SlIcon name="download" />
-    <SlIcon name="file-earmark" />
-    <SlIcon name="flag" />
-    <SlIcon name="heart" />
-    <SlIcon name="image" />
-    <SlIcon name="lightning" />
-    <SlIcon name="mic" />
-    <SlIcon name="search" />
-    <SlIcon name="star" />
-    <SlIcon name="trash" />
+    <WaIcon name="exclamation-triangle" />
+    <WaIcon name="archive" />
+    <WaIcon name="battery-charging" />
+    <WaIcon name="bell" />
+    <WaIcon name="clock" />
+    <WaIcon name="cloud" />
+    <WaIcon name="download" />
+    <WaIcon name="file-earmark" />
+    <WaIcon name="flag" />
+    <WaIcon name="heart" />
+    <WaIcon name="image" />
+    <WaIcon name="lightning" />
+    <WaIcon name="mic" />
+    <WaIcon name="search" />
+    <WaIcon name="star" />
+    <WaIcon name="trash" />
  </div>
 );
 ```
@@ -163,13 +163,13 @@ const App = () => (
 For non-decorative icons, use the `label` attribute to announce it to assistive devices.

 ```html:preview
-<sl-icon name="star-fill" label="Add to favorites"></sl-icon>
+<wa-icon name="star-fill" label="Add to favorites"></wa-icon>
 ```

 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

-const App = () => <SlIcon name="star-fill" label="Add to favorites" />;
+const App = () => <WaIcon name="star-fill" label="Add to favorites" />;
 ```

 ### Custom Icons
@@ -177,24 +177,24 @@ const App = () => <SlIcon name="star-fill" label="Add to favorites" />;
 Custom icons can be loaded individually with the `src` attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a [custom icon library](#icon-libraries).

 ```html:preview
-<sl-icon src="https://shoelace.style/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>
+<wa-icon src="https://shoelace.style/assets/images/shoe.svg" style="font-size: 8rem;"></wa-icon>
 ```

 {% raw %}

 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

-const App = () => <SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>;
+const App = () => <WaIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></WaIcon>;
 ```

 {% endraw %}

 ## Icon Libraries

-You can register additional icons to use with the `<sl-icon>` component through icon libraries. Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN). There is no limit to how many icon libraries you can register and there is no cost associated with registering them, as individual icons are only requested when they're used.
+You can register additional icons to use with the `<wa-icon>` component through icon libraries. Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN). There is no limit to how many icon libraries you can register and there is no cost associated with registering them, as individual icons are only requested when they're used.

-Shoelace ships with two built-in icon libraries, `default` and `system`. The [default icon library](#customizing-the-default-library) contains all of the icons in the Bootstrap Icons project. The [system icon library](#customizing-the-system-library) contains only a small subset of icons that are used internally by Shoelace components.
+Web Awesome ships with two built-in icon libraries, `default` and `system`. The [default icon library](#customizing-the-default-library) contains all of the icons in the Bootstrap Icons project. The [system icon library](#customizing-the-system-library) contains only a small subset of icons that are used internally by Web Awesome components.

 To register an additional icon library, use the `registerIconLibrary()` function that's exported from `utilities/icon-library.js`. At a minimum, you must provide a name and a resolver function. The resolver function translates an icon name to a URL where the corresponding SVG file exists. Refer to the examples below to better understand how it works.

@@ -213,11 +213,11 @@ Here's an example that registers an icon library located in the `/assets/icons`
 </script>
 ```

-To display an icon, set the `library` and `name` attributes of an `<sl-icon>` element.
+To display an icon, set the `library` and `name` attributes of an `<wa-icon>` element.

 ```html
 <!-- This will show the icon located at /assets/icons/smile.svg -->
-<sl-icon library="my-icons" name="smile"></sl-icon>
+<wa-icon library="my-icons" name="smile"></wa-icon>
 ```

 If an icon is used before registration occurs, it will be empty initially but shown when registered.
@@ -246,26 +246,26 @@ Icons in this library are licensed under the [Creative Commons 4.0 License](http
 </script>

 <div style="font-size: 24px;">
-  <sl-icon library="boxicons" name="bx-bot"></sl-icon>
-  <sl-icon library="boxicons" name="bx-cookie"></sl-icon>
-  <sl-icon library="boxicons" name="bx-joystick"></sl-icon>
-  <sl-icon library="boxicons" name="bx-save"></sl-icon>
-  <sl-icon library="boxicons" name="bx-server"></sl-icon>
-  <sl-icon library="boxicons" name="bx-wine"></sl-icon>
+  <wa-icon library="boxicons" name="bx-bot"></wa-icon>
+  <wa-icon library="boxicons" name="bx-cookie"></wa-icon>
+  <wa-icon library="boxicons" name="bx-joystick"></wa-icon>
+  <wa-icon library="boxicons" name="bx-save"></wa-icon>
+  <wa-icon library="boxicons" name="bx-server"></wa-icon>
+  <wa-icon library="boxicons" name="bx-wine"></wa-icon>
  <br />
-  <sl-icon library="boxicons" name="bxs-bot"></sl-icon>
-  <sl-icon library="boxicons" name="bxs-cookie"></sl-icon>
-  <sl-icon library="boxicons" name="bxs-joystick"></sl-icon>
-  <sl-icon library="boxicons" name="bxs-save"></sl-icon>
-  <sl-icon library="boxicons" name="bxs-server"></sl-icon>
-  <sl-icon library="boxicons" name="bxs-wine"></sl-icon>
+  <wa-icon library="boxicons" name="bxs-bot"></wa-icon>
+  <wa-icon library="boxicons" name="bxs-cookie"></wa-icon>
+  <wa-icon library="boxicons" name="bxs-joystick"></wa-icon>
+  <wa-icon library="boxicons" name="bxs-save"></wa-icon>
+  <wa-icon library="boxicons" name="bxs-server"></wa-icon>
+  <wa-icon library="boxicons" name="bxs-wine"></wa-icon>
  <br />
-  <sl-icon library="boxicons" name="bxl-apple"></sl-icon>
-  <sl-icon library="boxicons" name="bxl-chrome"></sl-icon>
-  <sl-icon library="boxicons" name="bxl-edge"></sl-icon>
-  <sl-icon library="boxicons" name="bxl-firefox"></sl-icon>
-  <sl-icon library="boxicons" name="bxl-opera"></sl-icon>
-  <sl-icon library="boxicons" name="bxl-microsoft"></sl-icon>
+  <wa-icon library="boxicons" name="bxl-apple"></wa-icon>
+  <wa-icon library="boxicons" name="bxl-chrome"></wa-icon>
+  <wa-icon library="boxicons" name="bxl-edge"></wa-icon>
+  <wa-icon library="boxicons" name="bxl-firefox"></wa-icon>
+  <wa-icon library="boxicons" name="bxl-opera"></wa-icon>
+  <wa-icon library="boxicons" name="bxl-microsoft"></wa-icon>
 </div>
 ```

@@ -277,12 +277,12 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu

 ```html:preview
 <div style="font-size: 24px;">
-  <sl-icon library="lucide" name="feather"></sl-icon>
-  <sl-icon library="lucide" name="pie-chart"></sl-icon>
-  <sl-icon library="lucide" name="settings"></sl-icon>
-  <sl-icon library="lucide" name="map-pin"></sl-icon>
-  <sl-icon library="lucide" name="printer"></sl-icon>
-  <sl-icon library="lucide" name="shopping-cart"></sl-icon>
+  <wa-icon library="lucide" name="feather"></wa-icon>
+  <wa-icon library="lucide" name="pie-chart"></wa-icon>
+  <wa-icon library="lucide" name="settings"></wa-icon>
+  <wa-icon library="lucide" name="map-pin"></wa-icon>
+  <wa-icon library="lucide" name="printer"></wa-icon>
+  <wa-icon library="lucide" name="shopping-cart"></wa-icon>
 </div>

 <script type="module">
@@ -317,26 +317,26 @@ Icons in this library are licensed under the [Font Awesome Free License](https:/
 </script>

 <div style="font-size: 24px;">
-  <sl-icon library="fa" name="far-bell"></sl-icon>
-  <sl-icon library="fa" name="far-comment"></sl-icon>
-  <sl-icon library="fa" name="far-hand-point-right"></sl-icon>
-  <sl-icon library="fa" name="far-hdd"></sl-icon>
-  <sl-icon library="fa" name="far-heart"></sl-icon>
-  <sl-icon library="fa" name="far-star"></sl-icon>
+  <wa-icon library="fa" name="far-bell"></wa-icon>
+  <wa-icon library="fa" name="far-comment"></wa-icon>
+  <wa-icon library="fa" name="far-hand-point-right"></wa-icon>
+  <wa-icon library="fa" name="far-hdd"></wa-icon>
+  <wa-icon library="fa" name="far-heart"></wa-icon>
+  <wa-icon library="fa" name="far-star"></wa-icon>
  <br />
-  <sl-icon library="fa" name="fas-archive"></sl-icon>
-  <sl-icon library="fa" name="fas-book"></sl-icon>
-  <sl-icon library="fa" name="fas-chess-knight"></sl-icon>
-  <sl-icon library="fa" name="fas-dice"></sl-icon>
-  <sl-icon library="fa" name="fas-pizza-slice"></sl-icon>
-  <sl-icon library="fa" name="fas-scroll"></sl-icon>
+  <wa-icon library="fa" name="fas-archive"></wa-icon>
+  <wa-icon library="fa" name="fas-book"></wa-icon>
+  <wa-icon library="fa" name="fas-chess-knight"></wa-icon>
+  <wa-icon library="fa" name="fas-dice"></wa-icon>
+  <wa-icon library="fa" name="fas-pizza-slice"></wa-icon>
+  <wa-icon library="fa" name="fas-scroll"></wa-icon>
  <br />
-  <sl-icon library="fa" name="fab-apple"></sl-icon>
-  <sl-icon library="fa" name="fab-chrome"></sl-icon>
-  <sl-icon library="fa" name="fab-edge"></sl-icon>
-  <sl-icon library="fa" name="fab-firefox"></sl-icon>
-  <sl-icon library="fa" name="fab-opera"></sl-icon>
-  <sl-icon library="fa" name="fab-microsoft"></sl-icon>
+  <wa-icon library="fa" name="fab-apple"></wa-icon>
+  <wa-icon library="fa" name="fab-chrome"></wa-icon>
+  <wa-icon library="fa" name="fab-edge"></wa-icon>
+  <wa-icon library="fa" name="fab-firefox"></wa-icon>
+  <wa-icon library="fa" name="fab-opera"></wa-icon>
+  <wa-icon library="fa" name="fab-microsoft"></wa-icon>
 </div>
 ```

@@ -356,12 +356,12 @@ Icons in this library are licensed under the [MIT License](https://github.com/ta
 </script>

 <div style="font-size: 24px;">
-  <sl-icon library="heroicons" name="chat-bubble-left"></sl-icon>
-  <sl-icon library="heroicons" name="cloud"></sl-icon>
-  <sl-icon library="heroicons" name="cog"></sl-icon>
-  <sl-icon library="heroicons" name="document-text"></sl-icon>
-  <sl-icon library="heroicons" name="gift"></sl-icon>
-  <sl-icon library="heroicons" name="speaker-wave"></sl-icon>
+  <wa-icon library="heroicons" name="chat-bubble-left"></wa-icon>
+  <wa-icon library="heroicons" name="cloud"></wa-icon>
+  <wa-icon library="heroicons" name="cog"></wa-icon>
+  <wa-icon library="heroicons" name="document-text"></wa-icon>
+  <wa-icon library="heroicons" name="gift"></wa-icon>
+  <wa-icon library="heroicons" name="speaker-wave"></wa-icon>
 </div>
 ```

@@ -381,12 +381,12 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
 </script>

 <div style="font-size: 24px;">
-  <sl-icon library="iconoir" name="check-circled-outline"></sl-icon>
-  <sl-icon library="iconoir" name="drawer"></sl-icon>
-  <sl-icon library="iconoir" name="keyframes"></sl-icon>
-  <sl-icon library="iconoir" name="headset-help"></sl-icon>
-  <sl-icon library="iconoir" name="color-picker"></sl-icon>
-  <sl-icon library="iconoir" name="wifi"></sl-icon>
+  <wa-icon library="iconoir" name="check-circled-outline"></wa-icon>
+  <wa-icon library="iconoir" name="drawer"></wa-icon>
+  <wa-icon library="iconoir" name="keyframes"></wa-icon>
+  <wa-icon library="iconoir" name="headset-help"></wa-icon>
+  <wa-icon library="iconoir" name="color-picker"></wa-icon>
+  <wa-icon library="iconoir" name="wifi"></wa-icon>
 </div>
 ```

@@ -412,26 +412,26 @@ Icons in this library are licensed under the [MIT License](https://github.com/io
 </script>

 <div style="font-size: 24px;">
-  <sl-icon library="ionicons" name="alarm"></sl-icon>
-  <sl-icon library="ionicons" name="american-football"></sl-icon>
-  <sl-icon library="ionicons" name="bug"></sl-icon>
-  <sl-icon library="ionicons" name="chatbubble"></sl-icon>
-  <sl-icon library="ionicons" name="settings"></sl-icon>
-  <sl-icon library="ionicons" name="warning"></sl-icon>
+  <wa-icon library="ionicons" name="alarm"></wa-icon>
+  <wa-icon library="ionicons" name="american-football"></wa-icon>
+  <wa-icon library="ionicons" name="bug"></wa-icon>
+  <wa-icon library="ionicons" name="chatbubble"></wa-icon>
+  <wa-icon library="ionicons" name="settings"></wa-icon>
+  <wa-icon library="ionicons" name="warning"></wa-icon>
  <br />
-  <sl-icon library="ionicons" name="alarm-outline"></sl-icon>
-  <sl-icon library="ionicons" name="american-football-outline"></sl-icon>
-  <sl-icon library="ionicons" name="bug-outline"></sl-icon>
-  <sl-icon library="ionicons" name="chatbubble-outline"></sl-icon>
-  <sl-icon library="ionicons" name="settings-outline"></sl-icon>
-  <sl-icon library="ionicons" name="warning-outline"></sl-icon>
+  <wa-icon library="ionicons" name="alarm-outline"></wa-icon>
+  <wa-icon library="ionicons" name="american-football-outline"></wa-icon>
+  <wa-icon library="ionicons" name="bug-outline"></wa-icon>
+  <wa-icon library="ionicons" name="chatbubble-outline"></wa-icon>
+  <wa-icon library="ionicons" name="settings-outline"></wa-icon>
+  <wa-icon library="ionicons" name="warning-outline"></wa-icon>
  <br />
-  <sl-icon library="ionicons" name="alarm-sharp"></sl-icon>
-  <sl-icon library="ionicons" name="american-football-sharp"></sl-icon>
-  <sl-icon library="ionicons" name="bug-sharp"></sl-icon>
-  <sl-icon library="ionicons" name="chatbubble-sharp"></sl-icon>
-  <sl-icon library="ionicons" name="settings-sharp"></sl-icon>
-  <sl-icon library="ionicons" name="warning-sharp"></sl-icon>
+  <wa-icon library="ionicons" name="alarm-sharp"></wa-icon>
+  <wa-icon library="ionicons" name="american-football-sharp"></wa-icon>
+  <wa-icon library="ionicons" name="bug-sharp"></wa-icon>
+  <wa-icon library="ionicons" name="chatbubble-sharp"></wa-icon>
+  <wa-icon library="ionicons" name="settings-sharp"></wa-icon>
+  <wa-icon library="ionicons" name="warning-sharp"></wa-icon>
 </div>
 ```

@@ -452,19 +452,19 @@ Icons in this library are licensed under the [MIT License](https://github.com/mi
 </script>

 <div style="font-size: 24px;">
-  <sl-icon library="jam" name="calendar"></sl-icon>
-  <sl-icon library="jam" name="camera"></sl-icon>
-  <sl-icon library="jam" name="filter"></sl-icon>
-  <sl-icon library="jam" name="leaf"></sl-icon>
-  <sl-icon library="jam" name="picture"></sl-icon>
-  <sl-icon library="jam" name="set-square"></sl-icon>
+  <wa-icon library="jam" name="calendar"></wa-icon>
+  <wa-icon library="jam" name="camera"></wa-icon>
+  <wa-icon library="jam" name="filter"></wa-icon>
+  <wa-icon library="jam" name="leaf"></wa-icon>
+  <wa-icon library="jam" name="picture"></wa-icon>
+  <wa-icon library="jam" name="set-square"></wa-icon>
  <br />
-  <sl-icon library="jam" name="calendar-f"></sl-icon>
-  <sl-icon library="jam" name="camera-f"></sl-icon>
-  <sl-icon library="jam" name="filter-f"></sl-icon>
-  <sl-icon library="jam" name="leaf-f"></sl-icon>
-  <sl-icon library="jam" name="picture-f"></sl-icon>
-  <sl-icon library="jam" name="set-square-f"></sl-icon>
+  <wa-icon library="jam" name="calendar-f"></wa-icon>
+  <wa-icon library="jam" name="camera-f"></wa-icon>
+  <wa-icon library="jam" name="filter-f"></wa-icon>
+  <wa-icon library="jam" name="leaf-f"></wa-icon>
+  <wa-icon library="jam" name="picture-f"></wa-icon>
+  <wa-icon library="jam" name="set-square-f"></wa-icon>
 </div>
 ```

@@ -488,26 +488,26 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
 </script>

 <div style="font-size: 24px;">
-  <sl-icon library="material" name="notifications"></sl-icon>
-  <sl-icon library="material" name="email"></sl-icon>
-  <sl-icon library="material" name="delete"></sl-icon>
-  <sl-icon library="material" name="volume_up"></sl-icon>
-  <sl-icon library="material" name="settings"></sl-icon>
-  <sl-icon library="material" name="shopping_basket"></sl-icon>
+  <wa-icon library="material" name="notifications"></wa-icon>
+  <wa-icon library="material" name="email"></wa-icon>
+  <wa-icon library="material" name="delete"></wa-icon>
+  <wa-icon library="material" name="volume_up"></wa-icon>
+  <wa-icon library="material" name="settings"></wa-icon>
+  <wa-icon library="material" name="shopping_basket"></wa-icon>
  <br />
-  <sl-icon library="material" name="notifications_round"></sl-icon>
-  <sl-icon library="material" name="email_round"></sl-icon>
-  <sl-icon library="material" name="delete_round"></sl-icon>
-  <sl-icon library="material" name="volume_up_round"></sl-icon>
-  <sl-icon library="material" name="settings_round"></sl-icon>
-  <sl-icon library="material" name="shopping_basket_round"></sl-icon>
+  <wa-icon library="material" name="notifications_round"></wa-icon>
+  <wa-icon library="material" name="email_round"></wa-icon>
+  <wa-icon library="material" name="delete_round"></wa-icon>
+  <wa-icon library="material" name="volume_up_round"></wa-icon>
+  <wa-icon library="material" name="settings_round"></wa-icon>
+  <wa-icon library="material" name="shopping_basket_round"></wa-icon>
  <br />
-  <sl-icon library="material" name="notifications_sharp"></sl-icon>
-  <sl-icon library="material" name="email_sharp"></sl-icon>
-  <sl-icon library="material" name="delete_sharp"></sl-icon>
-  <sl-icon library="material" name="volume_up_sharp"></sl-icon>
-  <sl-icon library="material" name="settings_sharp"></sl-icon>
-  <sl-icon library="material" name="shopping_basket_sharp"></sl-icon>
+  <wa-icon library="material" name="notifications_sharp"></wa-icon>
+  <wa-icon library="material" name="email_sharp"></wa-icon>
+  <wa-icon library="material" name="delete_sharp"></wa-icon>
+  <wa-icon library="material" name="volume_up_sharp"></wa-icon>
+  <wa-icon library="material" name="settings_sharp"></wa-icon>
+  <wa-icon library="material" name="shopping_basket_sharp"></wa-icon>
 </div>
 ```

@@ -532,19 +532,19 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
 </script>

 <div style="font-size: 24px;">
-  <sl-icon library="remixicon" name="business/cloud-line"></sl-icon>
-  <sl-icon library="remixicon" name="design/brush-line"></sl-icon>
-  <sl-icon library="remixicon" name="business/pie-chart-line"></sl-icon>
-  <sl-icon library="remixicon" name="development/bug-line"></sl-icon>
-  <sl-icon library="remixicon" name="media/image-line"></sl-icon>
-  <sl-icon library="remixicon" name="system/alert-line"></sl-icon>
+  <wa-icon library="remixicon" name="business/cloud-line"></wa-icon>
+  <wa-icon library="remixicon" name="design/brush-line"></wa-icon>
+  <wa-icon library="remixicon" name="business/pie-chart-line"></wa-icon>
+  <wa-icon library="remixicon" name="development/bug-line"></wa-icon>
+  <wa-icon library="remixicon" name="media/image-line"></wa-icon>
+  <wa-icon library="remixicon" name="system/alert-line"></wa-icon>
  <br />
-  <sl-icon library="remixicon" name="business/cloud-fill"></sl-icon>
-  <sl-icon library="remixicon" name="design/brush-fill"></sl-icon>
-  <sl-icon library="remixicon" name="business/pie-chart-fill"></sl-icon>
-  <sl-icon library="remixicon" name="development/bug-fill"></sl-icon>
-  <sl-icon library="remixicon" name="media/image-fill"></sl-icon>
-  <sl-icon library="remixicon" name="system/alert-fill"></sl-icon>
+  <wa-icon library="remixicon" name="business/cloud-fill"></wa-icon>
+  <wa-icon library="remixicon" name="design/brush-fill"></wa-icon>
+  <wa-icon library="remixicon" name="business/pie-chart-fill"></wa-icon>
+  <wa-icon library="remixicon" name="development/bug-fill"></wa-icon>
+  <wa-icon library="remixicon" name="media/image-fill"></wa-icon>
+  <wa-icon library="remixicon" name="system/alert-fill"></wa-icon>
 </div>
 ```

@@ -564,19 +564,19 @@ Icons in this library are licensed under the [MIT License](https://github.com/ta
 </script>

 <div style="font-size: 24px;">
-  <sl-icon library="tabler" name="alert-triangle"></sl-icon>
-  <sl-icon library="tabler" name="arrow-back"></sl-icon>
-  <sl-icon library="tabler" name="at"></sl-icon>
-  <sl-icon library="tabler" name="ball-baseball"></sl-icon>
-  <sl-icon library="tabler" name="cake"></sl-icon>
-  <sl-icon library="tabler" name="files"></sl-icon>
+  <wa-icon library="tabler" name="alert-triangle"></wa-icon>
+  <wa-icon library="tabler" name="arrow-back"></wa-icon>
+  <wa-icon library="tabler" name="at"></wa-icon>
+  <wa-icon library="tabler" name="ball-baseball"></wa-icon>
+  <wa-icon library="tabler" name="cake"></wa-icon>
+  <wa-icon library="tabler" name="files"></wa-icon>
  <br />
-  <sl-icon library="tabler" name="keyboard"></sl-icon>
-  <sl-icon library="tabler" name="moon"></sl-icon>
-  <sl-icon library="tabler" name="pig"></sl-icon>
-  <sl-icon library="tabler" name="printer"></sl-icon>
-  <sl-icon library="tabler" name="ship"></sl-icon>
-  <sl-icon library="tabler" name="toilet-paper"></sl-icon>
+  <wa-icon library="tabler" name="keyboard"></wa-icon>
+  <wa-icon library="tabler" name="moon"></wa-icon>
+  <wa-icon library="tabler" name="pig"></wa-icon>
+  <wa-icon library="tabler" name="printer"></wa-icon>
+  <wa-icon library="tabler" name="ship"></wa-icon>
+  <wa-icon library="tabler" name="toilet-paper"></wa-icon>
 </div>
 ```

@@ -602,25 +602,25 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
 </script>

 <div style="font-size: 24px;">
-  <sl-icon library="unicons" name="clock"></sl-icon>
-  <sl-icon library="unicons" name="graph-bar"></sl-icon>
-  <sl-icon library="unicons" name="padlock"></sl-icon>
-  <sl-icon library="unicons" name="polygon"></sl-icon>
-  <sl-icon library="unicons" name="rocket"></sl-icon>
-  <sl-icon library="unicons" name="star"></sl-icon>
+  <wa-icon library="unicons" name="clock"></wa-icon>
+  <wa-icon library="unicons" name="graph-bar"></wa-icon>
+  <wa-icon library="unicons" name="padlock"></wa-icon>
+  <wa-icon library="unicons" name="polygon"></wa-icon>
+  <wa-icon library="unicons" name="rocket"></wa-icon>
+  <wa-icon library="unicons" name="star"></wa-icon>
  <br />
-  <sl-icon library="unicons" name="clock-s"></sl-icon>
-  <sl-icon library="unicons" name="graph-bar-s"></sl-icon>
-  <sl-icon library="unicons" name="padlock-s"></sl-icon>
-  <sl-icon library="unicons" name="polygon-s"></sl-icon>
-  <sl-icon library="unicons" name="rocket-s"></sl-icon>
-  <sl-icon library="unicons" name="star-s"></sl-icon>
+  <wa-icon library="unicons" name="clock-s"></wa-icon>
+  <wa-icon library="unicons" name="graph-bar-s"></wa-icon>
+  <wa-icon library="unicons" name="padlock-s"></wa-icon>
+  <wa-icon library="unicons" name="polygon-s"></wa-icon>
+  <wa-icon library="unicons" name="rocket-s"></wa-icon>
+  <wa-icon library="unicons" name="star-s"></wa-icon>
 </div>
 ```

 ### Customizing the Default Library

-The default icon library contains over 1,300 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These are the icons that display when you use `<sl-icon>` without the `library` attribute. If you prefer to have these icons resolve elsewhere or to a different icon library, register an icon library using the `default` name and a custom resolver.
+The default icon library contains over 1,300 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These are the icons that display when you use `<wa-icon>` without the `library` attribute. If you prefer to have these icons resolve elsewhere or to a different icon library, register an icon library using the `default` name and a custom resolver.

 This example will load the same set of icons from the jsDelivr CDN instead of your local assets folder.

@@ -641,11 +641,11 @@ To improve performance you can use a SVG sprites to avoid multiple trips for eac
 As always, make sure to benchmark these changes. When using HTTP/2, it may in fact be more bandwidth-friendly to use multiple small requests instead of 1 large sprite sheet.

 :::danger
-When using sprite sheets, the `sl-load` and `sl-error` events will not fire.
+When using sprite sheets, the `wa-load` and `wa-error` events will not fire.
 :::

 :::danger
-For security reasons, browsers may apply the same-origin policy on `<use>` elements located in the `<sl-icon>` shadow DOM and may refuse to load a cross-origin URL. There is currently no defined way to set a cross-origin policy for `<use>` elements. For this reason, sprite sheets should only be used if you're self-hosting them.
+For security reasons, browsers may apply the same-origin policy on `<use>` elements located in the `<wa-icon>` shadow DOM and may refuse to load a cross-origin URL. There is currently no defined way to set a cross-origin policy for `<use>` elements. For this reason, sprite sheets should only be used if you're self-hosting them.
 :::

 ```html:preview
@@ -660,16 +660,16 @@ For security reasons, browsers may apply the same-origin policy on `<use>` eleme
 </script>

 <div style="font-size: 24px;">
-  <sl-icon library="sprite" name="clock"></sl-icon>
-  <sl-icon library="sprite" name="speedometer"></sl-icon>
+  <wa-icon library="sprite" name="clock"></wa-icon>
+  <wa-icon library="sprite" name="speedometer"></wa-icon>
 </div>
 ```

 ### Customizing the System Library

-The system library contains only the icons used internally by Shoelace components. Unlike the default icon library, the system library does not rely on physical assets. Instead, its icons are hard-coded as data URIs into the resolver to ensure their availability.
+The system library contains only the icons used internally by Web Awesome components. Unlike the default icon library, the system library does not rely on physical assets. Instead, its icons are hard-coded as data URIs into the resolver to ensure their availability.

-If you want to change the icons Shoelace uses internally, you can register an icon library using the `system` name and a custom resolver. If you choose to do this, it's your responsibility to provide all of the icons that are required by components. You can reference `src/components/library.system.ts` for a complete list of system icons used by Shoelace.
+If you want to change the icons Web Awesome uses internally, you can register an icon library using the `system` name and a custom resolver. If you choose to do this, it's your responsibility to provide all of the icons that are required by components. You can reference `src/components/library.system.ts` for a complete list of system icons used by Web Awesome.

 ```html
 <script type="module">
@@ -684,11 +684,11 @@ If you want to change the icons Shoelace uses internally, you can register an ic
 <!-- Supporting scripts and styles for the search utility -->
 <script>
  function wrapWithTooltip(item) {
-    const tooltip = document.createElement('sl-tooltip');
+    const tooltip = document.createElement('wa-tooltip');
    tooltip.content = item.getAttribute('data-name');

    // Close open tooltips
-    document.querySelectorAll('.icon-list sl-tooltip[open]').forEach(tooltip => tooltip.hide());
+    document.querySelectorAll('.icon-list wa-tooltip[open]').forEach(tooltip => tooltip.hide());

    // Wrap it with a tooltip and trick it into showing up
    item.parentNode.insertBefore(tooltip, item);
@@ -700,8 +700,8 @@ If you want to change the icons Shoelace uses internally, you can register an ic
    .then(res => res.json())
    .then(icons => {
      const container = document.querySelector('.icon-search');
-      const input = container.querySelector('sl-input');
-      const select = container.querySelector('sl-select');
+      const input = container.querySelector('wa-input');
+      const select = container.querySelector('wa-select');
      const copyInput = container.querySelector('.icon-copy-input');
      const loader = container.querySelector('.icon-loader');
      const list = container.querySelector('.icon-list');
@@ -727,7 +727,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic

        // Copy on click
        item.addEventListener('click', () => {
-          const tooltip = item.closest('sl-tooltip');
+          const tooltip = item.closest('wa-tooltip');
          copyInput.value = i.name;
          copyInput.select();
          document.execCommand('copy');
@@ -740,7 +740,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
      });

      // Filter as the user types
-      input.addEventListener('sl-input', () => {
+      input.addEventListener('wa-input', () => {
        clearTimeout(inputTimeout);
        inputTimeout = setTimeout(() => {
          [...list.querySelectorAll('.icon-list-item')].map(item => {
@@ -756,12 +756,12 @@ If you want to change the icons Shoelace uses internally, you can register an ic
      });

      // Sort by type and remember preference
-      const iconType = sessionStorage.getItem('sl-icon:type') || 'outline';
+      const iconType = sessionStorage.getItem('wa-icon:type') || 'outline';
      select.value = iconType;
      list.setAttribute('data-type', select.value);
-      select.addEventListener('sl-change', () => {
+      select.addEventListener('wa-change', () => {
        list.setAttribute('data-type', select.value);
-        sessionStorage.setItem('sl-icon:type', select.value);
+        sessionStorage.setItem('wa-icon:type', select.value);
      });
    });
 </script>
@@ -781,11 +781,11 @@ If you want to change the icons Shoelace uses internally, you can register an ic
    display: flex;
  }

-  .icon-search-controls sl-input {
+  .icon-search-controls wa-input {
    flex: 1 1 auto;
  }

-  .icon-search-controls sl-select {
+  .icon-search-controls wa-select {
    width: 10rem;
    flex: 0 0 auto;
    margin-left: 1rem;
@@ -855,7 +855,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
      display: block;
    }

-    .icon-search-controls sl-select {
+    .icon-search-controls wa-select {
      width: auto;
      margin: 1rem 0 0 0;
    }
--- a/docs/pages/components/image-comparer.md
+++ b/docs/pages/components/image-comparer.md
@@ -8,7 +8,7 @@ layout: component
 For best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.)

 ```html:preview
-<sl-image-comparer>
+<wa-image-comparer>
  <img
    slot="before"
    src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
@@ -19,14 +19,14 @@ For best results, use images that share the same dimensions. The slider can be c
    src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
    alt="Color version of kittens in a basket looking around."
  />
-</sl-image-comparer>
+</wa-image-comparer>
 ```

 ```jsx:react
-import SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
+import WaImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';

 const App = () => (
-  <SlImageComparer>
+  <WaImageComparer>
    <img
      slot="before"
      src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
@@ -37,7 +37,7 @@ const App = () => (
      src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
      alt="Color version of kittens in a basket looking around."
    />
-  </SlImageComparer>
+  </WaImageComparer>
 );
 ```

@@ -48,7 +48,7 @@ const App = () => (
 Use the `position` attribute to set the initial position of the slider. This is a percentage from `0` to `100`.

 ```html:preview
-<sl-image-comparer position="25">
+<wa-image-comparer position="25">
  <img
    slot="before"
    src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80"
@@ -59,14 +59,14 @@ Use the `position` attribute to set the initial position of the slider. This is
    src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
    alt="A person sitting on a yellow curb tying shoelaces on a boot."
  />
-</sl-image-comparer>
+</wa-image-comparer>
 ```

 ```jsx:react
-import SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
+import WaImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';

 const App = () => (
-  <SlImageComparer position={25}>
+  <WaImageComparer position={25}>
    <img
      slot="before"
      src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80"
@@ -77,6 +77,6 @@ const App = () => (
      src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
      alt="A person sitting on a yellow curb tying shoelaces on a boot."
    />
-  </SlImageComparer>
+  </WaImageComparer>
 );
 ```
--- a/docs/pages/components/include.md
+++ b/docs/pages/components/include.md
@@ -7,39 +7,39 @@ layout: component

 Included files are asynchronously requested using `window.fetch()`. Requests are cached, so the same file can be included multiple times, but only one request will be made.

-The included content will be inserted into the `<sl-include>` element's default slot so it can be easily accessed and styled through the light DOM.
+The included content will be inserted into the `<wa-include>` element's default slot so it can be easily accessed and styled through the light DOM.

 ```html:preview
-<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
+<wa-include src="https://shoelace.style/assets/examples/include.html"></wa-include>
 ```

 ```jsx:react
-import SlInclude from '@shoelace-style/shoelace/dist/react/include';
+import WaInclude from '@shoelace-style/shoelace/dist/react/include';

-const App = () => <SlInclude src="https://shoelace.style/assets/examples/include.html" />;
+const App = () => <WaInclude src="https://shoelace.style/assets/examples/include.html" />;
 ```

 ## Examples

 ### Listening for Events

-When an include file loads successfully, the `sl-load` event will be emitted. You can listen for this event to add custom loading logic to your includes.
+When an include file loads successfully, the `wa-load` event will be emitted. You can listen for this event to add custom loading logic to your includes.

-If the request fails, the `sl-error` event will be emitted. In this case, `event.detail.status` will contain the resulting HTTP status code of the request, e.g. 404 (not found).
+If the request fails, the `wa-error` event will be emitted. In this case, `event.detail.status` will contain the resulting HTTP status code of the request, e.g. 404 (not found).

 ```html
-<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
+<wa-include src="https://shoelace.style/assets/examples/include.html"></wa-include>

 <script>
-  const include = document.querySelector('sl-include');
+  const include = document.querySelector('wa-include');

-  include.addEventListener('sl-load', event => {
+  include.addEventListener('wa-load', event => {
    if (event.eventPhase === Event.AT_TARGET) {
      console.log('Success');
    }
  });

-  include.addEventListener('sl-error', event => {
+  include.addEventListener('wa-error', event => {
    if (event.eventPhase === Event.AT_TARGET) {
      console.log('Error', event.detail.status);
    }
--- a/docs/pages/components/input.md
+++ b/docs/pages/components/input.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-input></sl-input>
+<wa-input></wa-input>
 ```

 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

-const App = () => <SlInput />;
+const App = () => <WaInput />;
 ```

 :::tip
@@ -26,14 +26,14 @@ This component works with standard `<form>` elements. Please refer to the sectio
 Use the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead.

 ```html:preview
-<sl-input label="What is your name?"></sl-input>
+<wa-input label="What is your name?"></wa-input>
 ```

 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

-const App = () => <SlInput label="What is your name?" />;
+const App = () => <WaInput label="What is your name?" />;
 ```

 ### Help Text
@@ -41,14 +41,14 @@ const App = () => <SlInput label="What is your name?" />;
 Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.

 ```html:preview
-<sl-input label="Nickname" help-text="What would you like people to call you?"></sl-input>
+<wa-input label="Nickname" help-text="What would you like people to call you?"></wa-input>
 ```

 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

-const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
+const App = () => <WaInput label="Nickname" help-text="What would you like people to call you?" />;
 ```

 ### Placeholders
@@ -56,13 +56,13 @@ const App = () => <SlInput label="Nickname" help-text="What would you like peopl
 Use the `placeholder` attribute to add a placeholder.

 ```html:preview
-<sl-input placeholder="Type something"></sl-input>
+<wa-input placeholder="Type something"></wa-input>
 ```

 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

-const App = () => <SlInput placeholder="Type something" />;
+const App = () => <WaInput placeholder="Type something" />;
 ```

 ### Clearable
@@ -70,13 +70,13 @@ const App = () => <SlInput placeholder="Type something" />;
 Add the `clearable` attribute to add a clear button when the input has content.

 ```html:preview
-<sl-input placeholder="Clearable" clearable></sl-input>
+<wa-input placeholder="Clearable" clearable></wa-input>
 ```

 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

-const App = () => <SlInput placeholder="Clearable" clearable />;
+const App = () => <WaInput placeholder="Clearable" clearable />;
 ```

 ### Toggle Password
@@ -84,13 +84,13 @@ const App = () => <SlInput placeholder="Clearable" clearable />;
 Add the `password-toggle` attribute to add a toggle button that will show the password when activated.

 ```html:preview
-<sl-input type="password" placeholder="Password Toggle" password-toggle></sl-input>
+<wa-input type="password" placeholder="Password Toggle" password-toggle></wa-input>
 ```

 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

-const App = () => <SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;
+const App = () => <WaInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;
 ```

 ### Filled Inputs
@@ -98,13 +98,13 @@ const App = () => <SlInput type="password" placeholder="Password Toggle" size="m
 Add the `filled` attribute to draw a filled input.

 ```html:preview
-<sl-input placeholder="Type something" filled></sl-input>
+<wa-input placeholder="Type something" filled></wa-input>
 ```

 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

-const App = () => <SlInput placeholder="Type something" filled />;
+const App = () => <WaInput placeholder="Type something" filled />;
 ```

 ### Disabled
@@ -112,13 +112,13 @@ const App = () => <SlInput placeholder="Type something" filled />;
 Use the `disabled` attribute to disable an input.

 ```html:preview
-<sl-input placeholder="Disabled" disabled></sl-input>
+<wa-input placeholder="Disabled" disabled></wa-input>
 ```

 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

-const App = () => <SlInput placeholder="Disabled" disabled />;
+const App = () => <WaInput placeholder="Disabled" disabled />;
 ```

 ### Sizes
@@ -126,23 +126,23 @@ const App = () => <SlInput placeholder="Disabled" disabled />;
 Use the `size` attribute to change an input's size.

 ```html:preview
-<sl-input placeholder="Small" size="small"></sl-input>
+<wa-input placeholder="Small" size="small"></wa-input>
 <br />
-<sl-input placeholder="Medium" size="medium"></sl-input>
+<wa-input placeholder="Medium" size="medium"></wa-input>
 <br />
-<sl-input placeholder="Large" size="large"></sl-input>
+<wa-input placeholder="Large" size="large"></wa-input>
 ```

 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const App = () => (
  <>
-    <SlInput placeholder="Small" size="small" />
+    <WaInput placeholder="Small" size="small" />
    <br />
-    <SlInput placeholder="Medium" size="medium" />
+    <WaInput placeholder="Medium" size="medium" />
    <br />
-    <SlInput placeholder="Large" size="large" />
+    <WaInput placeholder="Large" size="large" />
  </>
 );
 ```
@@ -152,23 +152,23 @@ const App = () => (
 Use the `pill` attribute to give inputs rounded edges.

 ```html:preview
-<sl-input placeholder="Small" size="small" pill></sl-input>
+<wa-input placeholder="Small" size="small" pill></wa-input>
 <br />
-<sl-input placeholder="Medium" size="medium" pill></sl-input>
+<wa-input placeholder="Medium" size="medium" pill></wa-input>
 <br />
-<sl-input placeholder="Large" size="large" pill></sl-input>
+<wa-input placeholder="Large" size="large" pill></wa-input>
 ```

 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const App = () => (
  <>
-    <SlInput placeholder="Small" size="small" pill />
+    <WaInput placeholder="Small" size="small" pill />
    <br />
-    <SlInput placeholder="Medium" size="medium" pill />
+    <WaInput placeholder="Medium" size="medium" pill />
    <br />
-    <SlInput placeholder="Large" size="large" pill />
+    <WaInput placeholder="Large" size="large" pill />
  </>
 );
 ```
@@ -178,23 +178,23 @@ const App = () => (
 The `type` attribute controls the type of input the browser renders.

 ```html:preview
-<sl-input type="email" placeholder="Email"></sl-input>
+<wa-input type="email" placeholder="Email"></wa-input>
 <br />
-<sl-input type="number" placeholder="Number"></sl-input>
+<wa-input type="number" placeholder="Number"></wa-input>
 <br />
-<sl-input type="date" placeholder="Date"></sl-input>
+<wa-input type="date" placeholder="Date"></wa-input>
 ```

 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const App = () => (
  <>
-    <SlInput type="email" placeholder="Email" />
+    <WaInput type="email" placeholder="Email" />
    <br />
-    <SlInput type="number" placeholder="Number" />
+    <WaInput type="number" placeholder="Number" />
    <br />
-    <SlInput type="date" placeholder="Date" />
+    <WaInput type="date" placeholder="Date" />
  </>
 );
 ```
@@ -204,42 +204,42 @@ const App = () => (
 Use the `prefix` and `suffix` slots to add icons.

 ```html:preview
-<sl-input placeholder="Small" size="small">
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-icon name="chat" slot="suffix"></sl-icon>
-</sl-input>
+<wa-input placeholder="Small" size="small">
+  <wa-icon name="house" slot="prefix"></wa-icon>
+  <wa-icon name="chat" slot="suffix"></wa-icon>
+</wa-input>
 <br />
-<sl-input placeholder="Medium" size="medium">
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-icon name="chat" slot="suffix"></sl-icon>
-</sl-input>
+<wa-input placeholder="Medium" size="medium">
+  <wa-icon name="house" slot="prefix"></wa-icon>
+  <wa-icon name="chat" slot="suffix"></wa-icon>
+</wa-input>
 <br />
-<sl-input placeholder="Large" size="large">
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-icon name="chat" slot="suffix"></sl-icon>
-</sl-input>
+<wa-input placeholder="Large" size="large">
+  <wa-icon name="house" slot="prefix"></wa-icon>
+  <wa-icon name="chat" slot="suffix"></wa-icon>
+</wa-input>
 ```

 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const App = () => (
  <>
-    <SlInput placeholder="Small" size="small">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlIcon name="chat" slot="suffix"></SlIcon>
-    </SlInput>
+    <WaInput placeholder="Small" size="small">
+      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaIcon name="chat" slot="suffix"></WaIcon>
+    </WaInput>
    <br />
-    <SlInput placeholder="Medium" size="medium">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlIcon name="chat" slot="suffix"></SlIcon>
-    </SlInput>
+    <WaInput placeholder="Medium" size="medium">
+      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaIcon name="chat" slot="suffix"></WaIcon>
+    </WaInput>
    <br />
-    <SlInput placeholder="Large" size="large">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlIcon name="chat" slot="suffix"></SlIcon>
-    </SlInput>
+    <WaInput placeholder="Large" size="large">
+      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaIcon name="chat" slot="suffix"></WaIcon>
+    </WaInput>
  </>
 );
 ```
@@ -249,9 +249,9 @@ const App = () => (
 Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.

 ```html:preview
-<sl-input class="label-on-left" label="Name" help-text="Enter your name"></sl-input>
-<sl-input class="label-on-left" label="Email" type="email" help-text="Enter your email"></sl-input>
-<sl-textarea class="label-on-left" label="Bio" help-text="Tell us something about yourself"></sl-textarea>
+<wa-input class="label-on-left" label="Name" help-text="Enter your name"></wa-input>
+<wa-input class="label-on-left" label="Email" type="email" help-text="Enter your email"></wa-input>
+<wa-textarea class="label-on-left" label="Bio" help-text="Tell us something about yourself"></wa-textarea>

 <style>
  .label-on-left {
--- a/docs/pages/components/menu-item.md
+++ b/docs/pages/components/menu-item.md
@@ -6,53 +6,53 @@ layout: component
 ---

 ```html:preview
-<sl-menu style="max-width: 200px;">
-  <sl-menu-item>Option 1</sl-menu-item>
-  <sl-menu-item>Option 2</sl-menu-item>
-  <sl-menu-item>Option 3</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-item type="checkbox" checked>Checkbox</sl-menu-item>
-  <sl-menu-item disabled>Disabled</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-item>
+<wa-menu style="max-width: 200px;">
+  <wa-menu-item>Option 1</wa-menu-item>
+  <wa-menu-item>Option 2</wa-menu-item>
+  <wa-menu-item>Option 3</wa-menu-item>
+  <wa-divider></wa-divider>
+  <wa-menu-item type="checkbox" checked>Checkbox</wa-menu-item>
+  <wa-menu-item disabled>Disabled</wa-menu-item>
+  <wa-divider></wa-divider>
+  <wa-menu-item>
    Prefix Icon
-    <sl-icon slot="prefix" name="gift"></sl-icon>
-  </sl-menu-item>
-  <sl-menu-item>
+    <wa-icon slot="prefix" name="gift"></wa-icon>
+  </wa-menu-item>
+  <wa-menu-item>
    Suffix Icon
-    <sl-icon slot="suffix" name="heart"></sl-icon>
-  </sl-menu-item>
-</sl-menu>
+    <wa-icon slot="suffix" name="heart"></wa-icon>
+  </wa-menu-item>
+</wa-menu>
 ```

 {% raw %}

 ```jsx:react
-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';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlMenu style={{ maxWidth: '200px' }}>
-    <SlMenuItem>Option 1</SlMenuItem>
-    <SlMenuItem>Option 2</SlMenuItem>
-    <SlMenuItem>Option 3</SlMenuItem>
-    <SlDivider />
-    <SlMenuItem type="checkbox" checked>
+  <WaMenu style={{ maxWidth: '200px' }}>
+    <WaMenuItem>Option 1</WaMenuItem>
+    <WaMenuItem>Option 2</WaMenuItem>
+    <WaMenuItem>Option 3</WaMenuItem>
+    <WaDivider />
+    <WaMenuItem type="checkbox" checked>
      Checkbox
-    </SlMenuItem>
-    <SlMenuItem disabled>Disabled</SlMenuItem>
-    <SlDivider />
-    <SlMenuItem>
+    </WaMenuItem>
+    <WaMenuItem disabled>Disabled</WaMenuItem>
+    <WaDivider />
+    <WaMenuItem>
      Prefix Icon
-      <SlIcon slot="prefix" name="gift" />
-    </SlMenuItem>
-    <SlMenuItem>
+      <WaIcon slot="prefix" name="gift" />
+    </WaMenuItem>
+    <WaMenuItem>
      Suffix Icon
-      <SlIcon slot="suffix" name="heart" />
-    </SlMenuItem>
-  </SlMenu>
+      <WaIcon slot="suffix" name="heart" />
+    </WaMenuItem>
+  </WaMenu>
 );
 ```

@@ -65,25 +65,25 @@ const App = () => (
 Add the `disabled` attribute to disable the menu item so it cannot be selected.

 ```html:preview
-<sl-menu style="max-width: 200px;">
-  <sl-menu-item>Option 1</sl-menu-item>
-  <sl-menu-item disabled>Option 2</sl-menu-item>
-  <sl-menu-item>Option 3</sl-menu-item>
-</sl-menu>
+<wa-menu style="max-width: 200px;">
+  <wa-menu-item>Option 1</wa-menu-item>
+  <wa-menu-item disabled>Option 2</wa-menu-item>
+  <wa-menu-item>Option 3</wa-menu-item>
+</wa-menu>
 ```

 {% raw %}

 ```jsx:react
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlMenu style={{ maxWidth: '200px' }}>
-    <SlMenuItem>Option 1</SlMenuItem>
-    <SlMenuItem disabled>Option 2</SlMenuItem>
-    <SlMenuItem>Option 3</SlMenuItem>
-  </SlMenu>
+  <WaMenu style={{ maxWidth: '200px' }}>
+    <WaMenuItem>Option 1</WaMenuItem>
+    <WaMenuItem disabled>Option 2</WaMenuItem>
+    <WaMenuItem>Option 3</WaMenuItem>
+  </WaMenu>
 );
 ```

@@ -94,58 +94,58 @@ const App = () => (
 Add content to the start and end of menu items using the `prefix` and `suffix` slots.

 ```html:preview
-<sl-menu style="max-width: 200px;">
-  <sl-menu-item>
-    <sl-icon slot="prefix" name="house"></sl-icon>
+<wa-menu style="max-width: 200px;">
+  <wa-menu-item>
+    <wa-icon slot="prefix" name="house"></wa-icon>
    Home
-  </sl-menu-item>
+  </wa-menu-item>

-  <sl-menu-item>
-    <sl-icon slot="prefix" name="envelope"></sl-icon>
+  <wa-menu-item>
+    <wa-icon slot="prefix" name="envelope"></wa-icon>
    Messages
-    <sl-badge slot="suffix" variant="brand" pill>12</sl-badge>
-  </sl-menu-item>
+    <wa-badge slot="suffix" variant="brand" pill>12</wa-badge>
+  </wa-menu-item>

-  <sl-divider></sl-divider>
+  <wa-divider></wa-divider>

-  <sl-menu-item>
-    <sl-icon slot="prefix" name="gear"></sl-icon>
+  <wa-menu-item>
+    <wa-icon slot="prefix" name="gear"></wa-icon>
    Settings
-  </sl-menu-item>
-</sl-menu>
+  </wa-menu-item>
+</wa-menu>
 ```

 {% raw %}

 ```jsx:react
-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';
+import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlMenu style={{ maxWidth: '200px' }}>
-    <SlMenuItem>
-      <SlIcon slot="prefix" name="house" />
+  <WaMenu style={{ maxWidth: '200px' }}>
+    <WaMenuItem>
+      <WaIcon slot="prefix" name="house" />
      Home
-    </SlMenuItem>
+    </WaMenuItem>

-    <SlMenuItem>
-      <SlIcon slot="prefix" name="envelope" />
+    <WaMenuItem>
+      <WaIcon slot="prefix" name="envelope" />
      Messages
-      <SlBadge slot="suffix" variant="brand" pill>
+      <WaBadge slot="suffix" variant="brand" pill>
        12
-      </SlBadge>
-    </SlMenuItem>
+      </WaBadge>
+    </WaMenuItem>

-    <SlDivider />
+    <WaDivider />

-    <SlMenuItem>
-      <SlIcon slot="prefix" name="gear" />
+    <WaMenuItem>
+      <WaIcon slot="prefix" name="gear" />
      Settings
-    </SlMenuItem>
-  </SlMenu>
+    </WaMenuItem>
+  </WaMenu>
 );
 ```

@@ -158,27 +158,27 @@ Set the `type` attribute to `checkbox` to create a menu item that will toggle on
 Checkbox menu items are visually indistinguishable from regular menu items. Their ability to be toggled is primarily inferred from context, much like you'd find in the menu of a native app.

 ```html:preview
-<sl-menu style="max-width: 200px;">
-  <sl-menu-item type="checkbox">Autosave</sl-menu-item>
-  <sl-menu-item type="checkbox" checked>Check Spelling</sl-menu-item>
-  <sl-menu-item type="checkbox">Word Wrap</sl-menu-item>
-</sl-menu>
+<wa-menu style="max-width: 200px;">
+  <wa-menu-item type="checkbox">Autosave</wa-menu-item>
+  <wa-menu-item type="checkbox" checked>Check Spelling</wa-menu-item>
+  <wa-menu-item type="checkbox">Word Wrap</wa-menu-item>
+</wa-menu>
 ```

 {% raw %}

 ```jsx:react
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlMenu style={{ maxWidth: '200px' }}>
-    <SlMenuItem type="checkbox">Autosave</SlMenuItem>
-    <SlMenuItem type="checkbox" checked>
+  <WaMenu style={{ maxWidth: '200px' }}>
+    <WaMenuItem type="checkbox">Autosave</WaMenuItem>
+    <WaMenuItem type="checkbox" checked>
      Check Spelling
-    </SlMenuItem>
-    <SlMenuItem type="checkbox">Word Wrap</SlMenuItem>
-  </SlMenu>
+    </WaMenuItem>
+    <WaMenuItem type="checkbox">Word Wrap</WaMenuItem>
+  </WaMenu>
 );
 ```

@@ -186,23 +186,23 @@ const App = () => (

 ### Value & Selection

-The `value` attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the `sl-select` event will be emitted and a reference to the item will be available at `event.detail.item`. You can use this reference to access the selected item's value, its checked state, and more.
+The `value` attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the `wa-select` event will be emitted and a reference to the item will be available at `event.detail.item`. You can use this reference to access the selected item's value, its checked state, and more.

 ```html:preview
-<sl-menu class="menu-value" style="max-width: 200px;">
-  <sl-menu-item value="opt-1">Option 1</sl-menu-item>
-  <sl-menu-item value="opt-2">Option 2</sl-menu-item>
-  <sl-menu-item value="opt-3">Option 3</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-item type="checkbox" value="opt-4">Checkbox 4</sl-menu-item>
-  <sl-menu-item type="checkbox" value="opt-5">Checkbox 5</sl-menu-item>
-  <sl-menu-item type="checkbox" value="opt-6">Checkbox 6</sl-menu-item>
-</sl-menu>
+<wa-menu class="menu-value" style="max-width: 200px;">
+  <wa-menu-item value="opt-1">Option 1</wa-menu-item>
+  <wa-menu-item value="opt-2">Option 2</wa-menu-item>
+  <wa-menu-item value="opt-3">Option 3</wa-menu-item>
+  <wa-divider></wa-divider>
+  <wa-menu-item type="checkbox" value="opt-4">Checkbox 4</wa-menu-item>
+  <wa-menu-item type="checkbox" value="opt-5">Checkbox 5</wa-menu-item>
+  <wa-menu-item type="checkbox" value="opt-6">Checkbox 6</wa-menu-item>
+</wa-menu>

 <script>
  const menu = document.querySelector('.menu-value');

-  menu.addEventListener('sl-select', event => {
+  menu.addEventListener('wa-select', event => {
    const item = event.detail.item;

    // Log value
@@ -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/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => {
  function handleSelect(event) {
@@ -233,11 +233,11 @@ const App = () => {
  }

  return (
-    <SlMenu style={{ maxWidth: '200px' }} onSlSelect={handleSelect}>
-      <SlMenuItem value="opt-1">Option 1</SlMenuItem>
-      <SlMenuItem value="opt-2">Option 2</SlMenuItem>
-      <SlMenuItem value="opt-3">Option 3</SlMenuItem>
-    </SlMenu>
+    <WaMenu style={{ maxWidth: '200px' }} onWaSelect={handleSelect}>
+      <WaMenuItem value="opt-1">Option 1</WaMenuItem>
+      <WaMenuItem value="opt-2">Option 2</WaMenuItem>
+      <WaMenuItem value="opt-3">Option 3</WaMenuItem>
+    </WaMenu>
  );
 };
 ```
--- a/docs/pages/components/menu-label.md
+++ b/docs/pages/components/menu-label.md
@@ -6,39 +6,39 @@ layout: component
 ---

 ```html:preview
-<sl-menu style="max-width: 200px;">
-  <sl-menu-label>Fruits</sl-menu-label>
-  <sl-menu-item value="apple">Apple</sl-menu-item>
-  <sl-menu-item value="banana">Banana</sl-menu-item>
-  <sl-menu-item value="orange">Orange</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-label>Vegetables</sl-menu-label>
-  <sl-menu-item value="broccoli">Broccoli</sl-menu-item>
-  <sl-menu-item value="carrot">Carrot</sl-menu-item>
-  <sl-menu-item value="zucchini">Zucchini</sl-menu-item>
-</sl-menu>
+<wa-menu style="max-width: 200px;">
+  <wa-menu-label>Fruits</wa-menu-label>
+  <wa-menu-item value="apple">Apple</wa-menu-item>
+  <wa-menu-item value="banana">Banana</wa-menu-item>
+  <wa-menu-item value="orange">Orange</wa-menu-item>
+  <wa-divider></wa-divider>
+  <wa-menu-label>Vegetables</wa-menu-label>
+  <wa-menu-item value="broccoli">Broccoli</wa-menu-item>
+  <wa-menu-item value="carrot">Carrot</wa-menu-item>
+  <wa-menu-item value="zucchini">Zucchini</wa-menu-item>
+</wa-menu>
 ```

 {% raw %}

 ```jsx:react
-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';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => (
-  <SlMenu style={{ maxWidth: '200px' }}>
-    <SlMenuLabel>Fruits</SlMenuLabel>
-    <SlMenuItem value="apple">Apple</SlMenuItem>
-    <SlMenuItem value="banana">Banana</SlMenuItem>
-    <SlMenuItem value="orange">Orange</SlMenuItem>
-    <SlDivider />
-    <SlMenuLabel>Vegetables</SlMenuLabel>
-    <SlMenuItem value="broccoli">Broccoli</SlMenuItem>
-    <SlMenuItem value="carrot">Carrot</SlMenuItem>
-    <SlMenuItem value="zucchini">Zucchini</SlMenuItem>
-  </SlMenu>
+  <WaMenu style={{ maxWidth: '200px' }}>
+    <WaMenuLabel>Fruits</WaMenuLabel>
+    <WaMenuItem value="apple">Apple</WaMenuItem>
+    <WaMenuItem value="banana">Banana</WaMenuItem>
+    <WaMenuItem value="orange">Orange</WaMenuItem>
+    <WaDivider />
+    <WaMenuLabel>Vegetables</WaMenuLabel>
+    <WaMenuItem value="broccoli">Broccoli</WaMenuItem>
+    <WaMenuItem value="carrot">Carrot</WaMenuItem>
+    <WaMenuItem value="zucchini">Zucchini</WaMenuItem>
+  </WaMenu>
 );
 ```

--- a/docs/pages/components/menu.md
+++ b/docs/pages/components/menu.md
@@ -8,34 +8,34 @@ layout: component
 You can use [menu items](/components/menu-item), [menu labels](/components/menu-label), and [dividers](/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option.

 ```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-menu-item value="delete">Delete</sl-menu-item>
-</sl-menu>
+<wa-menu style="max-width: 200px;">
+  <wa-menu-item value="undo">Undo</wa-menu-item>
+  <wa-menu-item value="redo">Redo</wa-menu-item>
+  <wa-divider></wa-divider>
+  <wa-menu-item value="cut">Cut</wa-menu-item>
+  <wa-menu-item value="copy">Copy</wa-menu-item>
+  <wa-menu-item value="paste">Paste</wa-menu-item>
+  <wa-menu-item value="delete">Delete</wa-menu-item>
+</wa-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';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem 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>
-    <SlMenuItem value="delete">Delete</SlMenuItem>
-  </SlMenu>
+  <WaMenu style={{ maxWidth: '200px' }}>
+    <WaMenuItem value="undo">Undo</WaMenuItem>
+    <WaMenuItem value="redo">Redo</WaMenuItem>
+    <WaDivider />
+    <WaMenuItem value="cut">Cut</WaMenuItem>
+    <WaMenuItem value="copy">Copy</WaMenuItem>
+    <WaMenuItem value="paste">Paste</WaMenuItem>
+    <WaMenuItem value="delete">Delete</WaMenuItem>
+  </WaMenu>
 );
 ```

@@ -52,99 +52,99 @@ Menus are intended for system menus (dropdown menus, select menus, context menus
 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>
+<wa-dropdown>
+  <wa-button slot="trigger" caret>Edit</wa-button>
+  <wa-menu>
+    <wa-menu-item value="cut">Cut</wa-menu-item>
+    <wa-menu-item value="copy">Copy</wa-menu-item>
+    <wa-menu-item value="paste">Paste</wa-menu-item>
+  </wa-menu>
+</wa-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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem 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>
+  <WaDropdown>
+    <WaButton slot="trigger" caret>Edit</WaButton>
+    <WaMenu>
+      <WaMenuItem value="cut">Cut</WaMenuItem>
+      <WaMenuItem value="copy">Copy</WaMenuItem>
+      <WaMenuItem value="paste">Paste</WaMenuItem>
+    </WaMenu>
+  </WaDropdown>
 );
 ```

 ### Submenus

-To create a submenu, nest an `<sl-menu slot="submenu">` in any [menu item](/components/menu-item).
+To create a submenu, nest an `<wa-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>
+<wa-menu style="max-width: 200px;">
+  <wa-menu-item value="undo">Undo</wa-menu-item>
+  <wa-menu-item value="redo">Redo</wa-menu-item>
+  <wa-divider></wa-divider>
+  <wa-menu-item value="cut">Cut</wa-menu-item>
+  <wa-menu-item value="copy">Copy</wa-menu-item>
+  <wa-menu-item value="paste">Paste</wa-menu-item>
+  <wa-divider></wa-divider>
+  <wa-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>
+    <wa-menu slot="submenu">
+      <wa-menu-item value="find">Find…</wa-menu-item>
+      <wa-menu-item value="find-previous">Find Next</wa-menu-item>
+      <wa-menu-item value="find-next">Find Previous</wa-menu-item>
+    </wa-menu>
+  </wa-menu-item>
+  <wa-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>
+    <wa-menu slot="submenu">
+      <wa-menu-item value="uppercase">Make uppercase</wa-menu-item>
+      <wa-menu-item value="lowercase">Make lowercase</wa-menu-item>
+      <wa-menu-item value="capitalize">Capitalize</wa-menu-item>
+    </wa-menu>
+  </wa-menu-item>
+</wa-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';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
+import WaMenuItem 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>
+  <WaMenu style={{ maxWidth: '200px' }}>
+    <WaMenuItem value="undo">Undo</WaMenuItem>
+    <WaMenuItem value="redo">Redo</WaMenuItem>
+    <WaDivider />
+    <WaMenuItem value="cut">Cut</WaMenuItem>
+    <WaMenuItem value="copy">Copy</WaMenuItem>
+    <WaMenuItem value="paste">Paste</WaMenuItem>
+    <WaDivider />
+    <WaMenuItem>
      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>
+      <WaMenu slot="submenu">
+        <WaMenuItem value="find">Find…</WaMenuItem>
+        <WaMenuItem value="find-previous">Find Next</WaMenuItem>
+        <WaMenuItem value="find-next">Find Previous</WaMenuItem>
+      </WaMenu>
+    </WaMenuItem>
+    <WaMenuItem>
      Transformations
-      <SlMenu slot="submenu">
-        <SlMenuItem value="uppercase">Make uppercase</SlMenuItem>
-        <SlMenuItem value="lowercase">Make lowercase</SlMenuItem>
-        <SlMenuItem value="capitalize">Capitalize</SlMenuItem>
-      </SlMenu>
-    </SlMenuItem>
-  </SlMenu>
+      <WaMenu slot="submenu">
+        <WaMenuItem value="uppercase">Make uppercase</WaMenuItem>
+        <WaMenuItem value="lowercase">Make lowercase</WaMenuItem>
+        <WaMenuItem value="capitalize">Capitalize</WaMenuItem>
+      </WaMenu>
+    </WaMenuItem>
+  </WaMenu>
 );
 ```

--- a/docs/pages/components/mutation-observer.md
+++ b/docs/pages/components/mutation-observer.md
@@ -5,21 +5,21 @@ meta:
 layout: component
 ---

-The mutation observer will report changes to the content it wraps through the `sl-mutation` event. When emitted, a collection of [MutationRecord](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects will be attached to `event.detail` that contains information about how it changed.
+The mutation observer will report changes to the content it wraps through the `wa-mutation` event. When emitted, a collection of [MutationRecord](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects will be attached to `event.detail` that contains information about how it changed.

 ```html:preview
 <div class="mutation-overview">
-  <sl-mutation-observer attr="variant">
-    <sl-button variant="brand">Click to mutate</sl-button>
-  </sl-mutation-observer>
+  <wa-mutation-observer attr="variant">
+    <wa-button variant="brand">Click to mutate</wa-button>
+  </wa-mutation-observer>

  <br />
  👆 Click the button and watch the console

  <script>
    const container = document.querySelector('.mutation-overview');
-    const mutationObserver = container.querySelector('sl-mutation-observer');
-    const button = container.querySelector('sl-button');
+    const mutationObserver = container.querySelector('wa-mutation-observer');
+    const button = container.querySelector('wa-button');
    const variants = ['brand', 'success', 'neutral', 'warning', 'danger'];
    let clicks = 0;

@@ -30,13 +30,13 @@ The mutation observer will report changes to the content it wraps through the `s
    });

    // Log mutations
-    mutationObserver.addEventListener('sl-mutation', event => {
+    mutationObserver.addEventListener('wa-mutation', event => {
      console.log(event.detail);
    });
  </script>

  <style>
-    .mutation-overview sl-button {
+    .mutation-overview wa-button {
      margin-bottom: 1rem;
    }
  </style>
@@ -45,11 +45,11 @@ 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/button';
-import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';

 const css = `
-  .mutation-overview sl-button {
+  .mutation-overview wa-button {
    margin-bottom: 1rem;
  }
 `;
@@ -67,11 +67,11 @@ const App = () => {

  return (
    <>
-      <SlMutationObserver attr="*" onSlMutation={event => console.log(event.detail)}>
-        <SlButton variant={variant} onClick={handleClick}>
+      <WaMutationObserver attr="*" onWaMutation={event => console.log(event.detail)}>
+        <WaButton variant={variant} onClick={handleClick}>
          Click to mutate
-        </SlButton>
-      </SlMutationObserver>
+        </WaButton>
+      </WaMutationObserver>

    <br />
    👆 Click the button and watch the console
@@ -94,31 +94,31 @@ Use the `child-list` attribute to watch for new child elements that are added or

 ```html:preview
 <div class="mutation-child-list">
-  <sl-mutation-observer child-list>
+  <wa-mutation-observer child-list>
    <div class="buttons">
-      <sl-button variant="brand">Add button</sl-button>
+      <wa-button variant="brand">Add button</wa-button>
    </div>
-  </sl-mutation-observer>
+  </wa-mutation-observer>

  👆 Add and remove buttons and watch the console

  <script>
    const container = document.querySelector('.mutation-child-list');
-    const mutationObserver = container.querySelector('sl-mutation-observer');
+    const mutationObserver = container.querySelector('wa-mutation-observer');
    const buttons = container.querySelector('.buttons');
-    const button = container.querySelector('sl-button[variant="brand"]');
+    const button = container.querySelector('wa-button[variant="brand"]');
    let i = 0;

    // Add a button
    button.addEventListener('click', () => {
-      const button = document.createElement('sl-button');
+      const button = document.createElement('wa-button');
      button.textContent = ++i;
      buttons.append(button);
    });

    // Remove a button
    buttons.addEventListener('click', event => {
-      const target = event.target.closest('sl-button:not([variant="brand"])');
+      const target = event.target.closest('wa-button:not([variant="brand"])');
      event.stopPropagation();

      if (target) {
@@ -127,7 +127,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
    });

    // Log mutations
-    mutationObserver.addEventListener('sl-mutation', event => {
+    mutationObserver.addEventListener('wa-mutation', event => {
      console.log(event.detail);
    });
  </script>
@@ -145,8 +145,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/button';
-import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';

 const css = `
  .mutation-child-list .buttons {
@@ -173,18 +173,18 @@ const App = () => {
  return (
    <>
      <div className="mutation-child-list">
-        <SlMutationObserver child-list onSlMutation={event => console.log(event.detail)}>
+        <WaMutationObserver child-list onWaMutation={event => console.log(event.detail)}>
          <div className="buttons">
-            <SlButton variant="brand" onClick={addButton}>
+            <WaButton variant="brand" onClick={addButton}>
              Add button
-            </SlButton>
+            </WaButton>
            {buttonIds.map(id => (
-              <SlButton key={id} variant="default" onClick={() => removeButton(id)}>
+              <WaButton key={id} variant="default" onClick={() => removeButton(id)}>
                {id}
-              </SlButton>
+              </WaButton>
            ))}
          </div>
-        </SlMutationObserver>
+        </WaMutationObserver>
      </div>
      👆 Add and remove buttons and watch the console
      <style>{css}</style>
--- a/docs/pages/components/option.md
+++ b/docs/pages/components/option.md
@@ -6,23 +6,23 @@ layout: component
 ---

 ```html:preview
-<sl-select label="Select one">
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select label="Select one">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect>
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-  </SlSelect>
+  <WaSelect>
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+  </WaSelect>
 );
 ```

@@ -33,25 +33,25 @@ const App = () => (
 Use the `disabled` attribute to disable an option and prevent it from being selected.

 ```html:preview
-<sl-select label="Select one">
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2" disabled>Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select label="Select one">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2" disabled>Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect>
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2" disabled>
+  <WaSelect>
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2" disabled>
      Option 2
-    </SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-  </SlSelect>
+    </WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+  </WaSelect>
 );
 ```

@@ -60,23 +60,23 @@ const App = () => (
 Add icons to the start and end of menu items using the `prefix` and `suffix` slots.

 ```html:preview
-<sl-select label="Select one">
-  <sl-option value="option-1">
-    <sl-icon slot="prefix" name="envelope"></sl-icon>
+<wa-select label="Select one">
+  <wa-option value="option-1">
+    <wa-icon slot="prefix" name="envelope"></wa-icon>
    Email
-    <sl-icon slot="suffix" name="patch-check"></sl-icon>
-  </sl-option>
+    <wa-icon slot="suffix" name="patch-check"></wa-icon>
+  </wa-option>

-  <sl-option value="option-2">
-    <sl-icon slot="prefix" name="telephone"></sl-icon>
+  <wa-option value="option-2">
+    <wa-icon slot="prefix" name="telephone"></wa-icon>
    Phone
-    <sl-icon slot="suffix" name="patch-check"></sl-icon>
-  </sl-option>
+    <wa-icon slot="suffix" name="patch-check"></wa-icon>
+  </wa-option>

-  <sl-option value="option-3">
-    <sl-icon slot="prefix" name="chat-dots"></sl-icon>
+  <wa-option value="option-3">
+    <wa-icon slot="prefix" name="chat-dots"></wa-icon>
    Chat
-    <sl-icon slot="suffix" name="patch-check"></sl-icon>
-  </sl-option>
-</sl-select>
+    <wa-icon slot="suffix" name="patch-check"></wa-icon>
+  </wa-option>
+</wa-select>
 ```
--- a/docs/pages/components/popup.md
+++ b/docs/pages/components/popup.md
--- a/docs/pages/components/progress-bar.md
+++ b/docs/pages/components/progress-bar.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-progress-bar value="50"></sl-progress-bar>
+<wa-progress-bar value="50"></wa-progress-bar>
 ```

 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';

-const App = () => <SlProgressBar value={50} />;
+const App = () => <WaProgressBar value={50} />;
 ```

 ## Examples
@@ -22,13 +22,13 @@ const App = () => <SlProgressBar value={50} />;
 Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.

 ```html:preview
-<sl-progress-bar value="50" label="Upload progress"></sl-progress-bar>
+<wa-progress-bar value="50" label="Upload progress"></wa-progress-bar>
 ```

 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';

-const App = () => <SlProgressBar value="50" label="Upload progress" />;
+const App = () => <WaProgressBar value="50" label="Upload progress" />;
 ```

 ### Custom Height
@@ -36,15 +36,15 @@ const App = () => <SlProgressBar value="50" label="Upload progress" />;
 Use the `--height` custom property to set the progress bar's height.

 ```html:preview
-<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
+<wa-progress-bar value="50" style="--height: 6px;"></wa-progress-bar>
 ```

 {% raw %}

 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';

-const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
+const App = () => <WaProgressBar value={50} style={{ '--height': '6px' }} />;
 ```

 {% endraw %}
@@ -54,12 +54,12 @@ const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
 Use the default slot to show a value.

 ```html:preview
-<sl-progress-bar value="50" class="progress-bar-values">50%</sl-progress-bar>
+<wa-progress-bar value="50" class="progress-bar-values">50%</wa-progress-bar>

 <br />

-<sl-button circle><sl-icon name="dash" label="Decrease"></sl-icon></sl-button>
-<sl-button circle><sl-icon name="plus" label="Increase"></sl-icon></sl-button>
+<wa-button circle><wa-icon name="dash" label="Decrease"></wa-icon></wa-button>
+<wa-button circle><wa-icon name="plus" label="Increase"></wa-icon></wa-button>

 <script>
  const progressBar = document.querySelector('.progress-bar-values');
@@ -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/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';

 const App = () => {
  const [value, setValue] = useState(50);
@@ -98,17 +98,17 @@ const App = () => {

  return (
    <>
-      <SlProgressBar value={value}>{value}%</SlProgressBar>
+      <WaProgressBar value={value}>{value}%</WaProgressBar>

      <br />

-      <SlButton circle onClick={() => adjustValue(-10)}>
-        <SlIcon name="dash" label="Decrease" />
-      </SlButton>
+      <WaButton circle onClick={() => adjustValue(-10)}>
+        <WaIcon name="dash" label="Decrease" />
+      </WaButton>

-      <SlButton circle onClick={() => adjustValue(10)}>
-        <SlIcon name="plus" label="Increase" />
-      </SlButton>
+      <WaButton circle onClick={() => adjustValue(10)}>
+        <WaIcon name="plus" label="Increase" />
+      </WaButton>
    </>
  );
 };
@@ -119,11 +119,11 @@ const App = () => {
 The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `value` is ignored and the label, if present, will not be shown.

 ```html:preview
-<sl-progress-bar indeterminate></sl-progress-bar>
+<wa-progress-bar indeterminate></wa-progress-bar>
 ```

 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';

-const App = () => <SlProgressBar indeterminate />;
+const App = () => <WaProgressBar indeterminate />;
 ```
--- a/docs/pages/components/progress-ring.md
+++ b/docs/pages/components/progress-ring.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-progress-ring value="25"></sl-progress-ring>
+<wa-progress-ring value="25"></wa-progress-ring>
 ```

 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';

-const App = () => <SlProgressRing value="25" />;
+const App = () => <WaProgressRing value="25" />;
 ```

 ## Examples
@@ -22,15 +22,15 @@ const App = () => <SlProgressRing value="25" />;
 Use the `--size` custom property to set the diameter of the progress ring.

 ```html:preview
-<sl-progress-ring value="50" style="--size: 200px;"></sl-progress-ring>
+<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
 ```

 {% raw %}

 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';

-const App = () => <SlProgressRing value="50" style={{ '--size': '200px' }} />;
+const App = () => <WaProgressRing value="50" style={{ '--size': '200px' }} />;
 ```

 {% endraw %}
@@ -40,15 +40,15 @@ const App = () => <SlProgressRing value="50" style={{ '--size': '200px' }} />;
 Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator.

 ```html:preview
-<sl-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></sl-progress-ring>
+<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></wa-progress-ring>
 ```

 {% raw %}

 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';

-const App = () => <SlProgressRing value="50" style={{ '--track-width': '6px', '--indicator-width': '12px' }} />;
+const App = () => <WaProgressRing value="50" style={{ '--track-width': '6px', '--indicator-width': '12px' }} />;
 ```

 {% endraw %}
@@ -58,22 +58,22 @@ const App = () => <SlProgressRing value="50" style={{ '--track-width': '6px', '-
 To change the color, use the `--track-color` and `--indicator-color` custom properties.

 ```html:preview
-<sl-progress-ring
+<wa-progress-ring
  value="50"
  style="
    --track-color: pink;
    --indicator-color: deeppink;
  "
-></sl-progress-ring>
+></wa-progress-ring>
 ```

 {% raw %}

 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';

 const App = () => (
-  <SlProgressRing
+  <WaProgressRing
    value="50"
    style={{
      '--track-color': 'pink',
@@ -90,13 +90,13 @@ const App = () => (
 Use the `label` attribute to label the progress ring and tell assistive devices how to announce it.

 ```html:preview
-<sl-progress-ring value="50" label="Upload progress"></sl-progress-ring>
+<wa-progress-ring value="50" label="Upload progress"></wa-progress-ring>
 ```

 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';

-const App = () => <SlProgressRing value="50" label="Upload progress" />;
+const App = () => <WaProgressRing value="50" label="Upload progress" />;
 ```

 ### Showing Values
@@ -104,12 +104,12 @@ const App = () => <SlProgressRing value="50" label="Upload progress" />;
 Use the default slot to show a label inside the progress ring.

 ```html:preview
-<sl-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</sl-progress-ring>
+<wa-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</wa-progress-ring>

 <br />

-<sl-button circle><sl-icon name="dash" label="Decrease"></sl-icon></sl-button>
-<sl-button circle><sl-icon name="plus" label="Increase"></sl-icon></sl-button>
+<wa-button circle><wa-icon name="dash" label="Decrease"></wa-icon></wa-button>
+<wa-button circle><wa-icon name="plus" label="Increase"></wa-icon></wa-button>

 <script>
  const progressRing = document.querySelector('.progress-ring-values');
@@ -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/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';

 const App = () => {
  const [value, setValue] = useState(50);
@@ -150,19 +150,19 @@ const App = () => {

  return (
    <>
-      <SlProgressRing value={value} style={{ marginBottom: '.5rem' }}>
+      <WaProgressRing value={value} style={{ marginBottom: '.5rem' }}>
        {value}%
-      </SlProgressRing>
+      </WaProgressRing>

      <br />

-      <SlButton circle onClick={() => adjustValue(-10)}>
-        <SlIcon name="dash" label="Decrease" />
-      </SlButton>
+      <WaButton circle onClick={() => adjustValue(-10)}>
+        <WaIcon name="dash" label="Decrease" />
+      </WaButton>

-      <SlButton circle onClick={() => adjustValue(10)}>
-        <SlIcon name="plus" label="Increase" />
-      </SlButton>
+      <WaButton circle onClick={() => adjustValue(10)}>
+        <WaIcon name="plus" label="Increase" />
+      </WaButton>
    </>
  );
 };
--- a/docs/pages/components/qr-code.md
+++ b/docs/pages/components/qr-code.md
@@ -9,20 +9,20 @@ QR codes are useful for providing small pieces of information to users who can q

 ```html:preview
 <div class="qr-overview">
-  <sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"></sl-qr-code>
+  <wa-qr-code value="https://shoelace.style/" label="Scan this code to visit Web Awesome on the web!"></wa-qr-code>
  <br />

-  <sl-input maxlength="255" clearable label="Value"></sl-input>
+  <wa-input maxlength="255" clearable label="Value"></wa-input>
 </div>

 <script>
  const container = document.querySelector('.qr-overview');
-  const qrCode = container.querySelector('sl-qr-code');
-  const input = container.querySelector('sl-input');
+  const qrCode = container.querySelector('wa-qr-code');
+  const input = container.querySelector('wa-input');

-  customElements.whenDefined('sl-qr-code').then(() => {
+  customElements.whenDefined('wa-qr-code').then(() => {
    input.value = qrCode.value;
-    input.addEventListener('sl-input', () => (qrCode.value = input.value));
+    input.addEventListener('wa-input', () => (qrCode.value = input.value));
  });
 </script>

@@ -31,7 +31,7 @@ QR codes are useful for providing small pieces of information to users who can q
    max-width: 256px;
  }

-  .qr-overview sl-input {
+  .qr-overview wa-input {
    margin-top: 1rem;
  }
 </style>
@@ -39,15 +39,15 @@ 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/qr-code';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const css = `
  .qr-overview {
    max-width: 256px;
  }

-  .qr-overview sl-input {
+  .qr-overview wa-input {
    margin-top: 1rem;
  }
 `;
@@ -58,10 +58,10 @@ const App = () => {
  return (
    <>
      <div className="qr-overview">
-        <SlQrCode value={value} label="Scan this code to visit Shoelace on the web!" />
+        <WaQrCode value={value} label="Scan this code to visit Web Awesome on the web!" />
        <br />

-        <SlInput maxlength="255" clearable onInput={event => setValue(event.target.value)} />
+        <WaInput maxlength="255" clearable onInput={event => setValue(event.target.value)} />
      </div>

      <style>{css}</style>
@@ -77,13 +77,13 @@ const App = () => {
 Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.

 ```html:preview
-<sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>
+<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></wa-qr-code>
 ```

 ```jsx:react
-import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code';

-const App = () => <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />;
+const App = () => <WaQrCode value="https://shoelace.style/" fill="deeppink" background="white" />;
 ```

 ### Size
@@ -91,13 +91,13 @@ const App = () => <SlQrCode value="https://shoelace.style/" fill="deeppink" back
 Use the `size` attribute to change the size of the QR code.

 ```html:preview
-<sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>
+<wa-qr-code value="https://shoelace.style/" size="64"></wa-qr-code>
 ```

 ```jsx:react
-import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code';

-const App = () => <SlQrCode value="https://shoelace.style/" size="64" />;
+const App = () => <WaQrCode value="https://shoelace.style/" size="64" />;
 ```

 ### Radius
@@ -105,13 +105,13 @@ const App = () => <SlQrCode value="https://shoelace.style/" size="64" />;
 Create a rounded effect with the `radius` attribute.

 ```html:preview
-<sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>
+<wa-qr-code value="https://shoelace.style/" radius="0.5"></wa-qr-code>
 ```

 ```jsx:react
-import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code';

-const App = () => <SlQrCode value="https://shoelace.style/" radius="0.5" />;
+const App = () => <WaQrCode value="https://shoelace.style/" radius="0.5" />;
 ```

 ### Error Correction
@@ -120,10 +120,10 @@ QR codes can be rendered with various levels of [error correction](https://www.q

 ```html:preview
 <div class="qr-error-correction">
-  <sl-qr-code value="https://shoelace.style/" error-correction="L"></sl-qr-code>
-  <sl-qr-code value="https://shoelace.style/" error-correction="M"></sl-qr-code>
-  <sl-qr-code value="https://shoelace.style/" error-correction="Q"></sl-qr-code>
-  <sl-qr-code value="https://shoelace.style/" error-correction="H"></sl-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="L"></wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="M"></wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="Q"></wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="H"></wa-qr-code>
 </div>

 <style>
@@ -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/qr-code';
+import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code';

 const css = `
  .qr-error-correction {
@@ -150,10 +150,10 @@ const App = () => {
  return (
    <>
      <div className="qr-error-correction">
-        <SlQrCode value="https://shoelace.style/" error-correction="L" />
-        <SlQrCode value="https://shoelace.style/" error-correction="M" />
-        <SlQrCode value="https://shoelace.style/" error-correction="Q" />
-        <SlQrCode value="https://shoelace.style/" error-correction="H" />
+        <WaQrCode value="https://shoelace.style/" error-correction="L" />
+        <WaQrCode value="https://shoelace.style/" error-correction="M" />
+        <WaQrCode value="https://shoelace.style/" error-correction="Q" />
+        <WaQrCode value="https://shoelace.style/" error-correction="H" />
      </div>

      <style>{css}</style>
--- a/docs/pages/components/radio-button.md
+++ b/docs/pages/components/radio-button.md
@@ -8,23 +8,23 @@ layout: component
 Radio buttons are designed to be used with [radio groups](/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio-button value="1">Option 1</sl-radio-button>
-  <sl-radio-button value="2">Option 2</sl-radio-button>
-  <sl-radio-button value="3">Option 3</sl-radio-button>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadioButton value="1">Option 1</SlRadioButton>
-    <SlRadioButton value="2">Option 2</SlRadioButton>
-    <SlRadioButton value="3">Option 3</SlRadioButton>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadioButton value="1">Option 1</WaRadioButton>
+    <WaRadioButton value="2">Option 2</WaRadioButton>
+    <WaRadioButton value="3">Option 3</WaRadioButton>
+  </WaRadioGroup>
 );
 ```

@@ -35,23 +35,23 @@ const App = () => (
 To set the initial value and checked state, use the `value` attribute on the containing radio group.

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio-button value="1">Option 1</sl-radio-button>
-  <sl-radio-button value="2">Option 2</sl-radio-button>
-  <sl-radio-button value="3">Option 3</sl-radio-button>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadioButton value="1">Option 1</SlRadioButton>
-    <SlRadioButton value="2">Option 2</SlRadioButton>
-    <SlRadioButton value="3">Option 3</SlRadioButton>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadioButton value="1">Option 1</WaRadioButton>
+    <WaRadioButton value="2">Option 2</WaRadioButton>
+    <WaRadioButton value="3">Option 3</WaRadioButton>
+  </WaRadioGroup>
 );
 ```

@@ -60,25 +60,25 @@ const App = () => (
 Use the `disabled` attribute to disable a radio button.

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio-button value="1">Option 1</sl-radio-button>
-  <sl-radio-button value="2" disabled>Option 2</sl-radio-button>
-  <sl-radio-button value="3">Option 3</sl-radio-button>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2" disabled>Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadioButton value="1">Option 1</SlRadioButton>
-    <SlRadioButton value="2" disabled>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadioButton value="1">Option 1</WaRadioButton>
+    <WaRadioButton value="2" disabled>
      Option 2
-    </SlRadioButton>
-    <SlRadioButton value="3">Option 3</SlRadioButton>
-  </SlRadioGroup>
+    </WaRadioButton>
+    <WaRadioButton value="3">Option 3</WaRadioButton>
+  </WaRadioGroup>
 );
 ```

@@ -87,55 +87,55 @@ const App = () => (
 Use the `size` attribute to change a radio button's size.

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio-button size="small" value="1">Option 1</sl-radio-button>
-  <sl-radio-button size="small" value="2">Option 2</sl-radio-button>
-  <sl-radio-button size="small" value="3">Option 3</sl-radio-button>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio-button size="small" value="1">Option 1</wa-radio-button>
+  <wa-radio-button size="small" value="2">Option 2</wa-radio-button>
+  <wa-radio-button size="small" value="3">Option 3</wa-radio-button>
+</wa-radio-group>

 <br />

-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio-button size="medium" value="1">Option 1</sl-radio-button>
-  <sl-radio-button size="medium" value="2">Option 2</sl-radio-button>
-  <sl-radio-button size="medium" value="3">Option 3</sl-radio-button>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio-button size="medium" value="1">Option 1</wa-radio-button>
+  <wa-radio-button size="medium" value="2">Option 2</wa-radio-button>
+  <wa-radio-button size="medium" value="3">Option 3</wa-radio-button>
+</wa-radio-group>

 <br />

-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio-button size="large" value="1">Option 1</sl-radio-button>
-  <sl-radio-button size="large" value="2">Option 2</sl-radio-button>
-  <sl-radio-button size="large" value="3">Option 3</sl-radio-button>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio-button size="large" value="1">Option 1</wa-radio-button>
+  <wa-radio-button size="large" value="2">Option 2</wa-radio-button>
+  <wa-radio-button size="large" value="3">Option 3</wa-radio-button>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadioButton size="small" value="1">Option 1</SlRadioButton>
-    <SlRadioButton size="small" value="2">Option 2</SlRadioButton>
-    <SlRadioButton size="small" value="3">Option 3</SlRadioButton>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadioButton size="small" value="1">Option 1</WaRadioButton>
+    <WaRadioButton size="small" value="2">Option 2</WaRadioButton>
+    <WaRadioButton size="small" value="3">Option 3</WaRadioButton>
+  </WaRadioGroup>

  <br />

-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadioButton size="medium" value="1">Option 1</SlRadioButton>
-    <SlRadioButton size="medium" value="2">Option 2</SlRadioButton>
-    <SlRadioButton size="medium" value="3">Option 3</SlRadioButton>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadioButton size="medium" value="1">Option 1</WaRadioButton>
+    <WaRadioButton size="medium" value="2">Option 2</WaRadioButton>
+    <WaRadioButton size="medium" value="3">Option 3</WaRadioButton>
+  </WaRadioGroup>

  <br />

-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadioButton size="large" value="1">Option 1</SlRadioButton>
-    <SlRadioButton size="large" value="2">Option 2</SlRadioButton>
-    <SlRadioButton size="large" value="3">Option 3</SlRadioButton>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadioButton size="large" value="1">Option 1</WaRadioButton>
+    <WaRadioButton size="large" value="2">Option 2</WaRadioButton>
+    <WaRadioButton size="large" value="3">Option 3</WaRadioButton>
+  </WaRadioGroup>
 );
 ```

@@ -144,55 +144,55 @@ const App = () => (
 Use the `pill` attribute to give radio buttons rounded edges.

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio-button pill size="small" value="1">Option 1</sl-radio-button>
-  <sl-radio-button pill size="small" value="2">Option 2</sl-radio-button>
-  <sl-radio-button pill size="small" value="3">Option 3</sl-radio-button>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio-button pill size="small" value="1">Option 1</wa-radio-button>
+  <wa-radio-button pill size="small" value="2">Option 2</wa-radio-button>
+  <wa-radio-button pill size="small" value="3">Option 3</wa-radio-button>
+</wa-radio-group>

 <br />

-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio-button pill size="medium" value="1">Option 1</sl-radio-button>
-  <sl-radio-button pill size="medium" value="2">Option 2</sl-radio-button>
-  <sl-radio-button pill size="medium" value="3">Option 3</sl-radio-button>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio-button pill size="medium" value="1">Option 1</wa-radio-button>
+  <wa-radio-button pill size="medium" value="2">Option 2</wa-radio-button>
+  <wa-radio-button pill size="medium" value="3">Option 3</wa-radio-button>
+</wa-radio-group>

 <br />

-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio-button pill size="large" value="1">Option 1</sl-radio-button>
-  <sl-radio-button pill size="large" value="2">Option 2</sl-radio-button>
-  <sl-radio-button pill size="large" value="3">Option 3</sl-radio-button>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio-button pill size="large" value="1">Option 1</wa-radio-button>
+  <wa-radio-button pill size="large" value="2">Option 2</wa-radio-button>
+  <wa-radio-button pill size="large" value="3">Option 3</wa-radio-button>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadioButton pill size="small" value="1">Option 1</SlRadioButton>
-    <SlRadioButton pill size="small" value="2">Option 2</SlRadioButton>
-    <SlRadioButton pill size="small" value="3">Option 3</SlRadioButton>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadioButton pill size="small" value="1">Option 1</WaRadioButton>
+    <WaRadioButton pill size="small" value="2">Option 2</WaRadioButton>
+    <WaRadioButton pill size="small" value="3">Option 3</WaRadioButton>
+  </WaRadioGroup>

  <br />

-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadioButton pill size="medium" value="1">Option 1</SlRadioButton>
-    <SlRadioButton pill size="medium" value="2">Option 2</SlRadioButton>
-    <SlRadioButton pill size="medium" value="3">Option 3</SlRadioButton>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadioButton pill size="medium" value="1">Option 1</WaRadioButton>
+    <WaRadioButton pill size="medium" value="2">Option 2</WaRadioButton>
+    <WaRadioButton pill size="medium" value="3">Option 3</WaRadioButton>
+  </WaRadioGroup>

  <br />

-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadioButton pill size="large" value="1">Option 1</SlRadioButton>
-    <SlRadioButton pill size="large" value="2">Option 2</SlRadioButton>
-    <SlRadioButton pill size="large" value="3">Option 3</SlRadioButton>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadioButton pill size="large" value="1">Option 1</WaRadioButton>
+    <WaRadioButton pill size="large" value="2">Option 2</WaRadioButton>
+    <WaRadioButton pill size="large" value="3">Option 3</WaRadioButton>
+  </WaRadioGroup>
 );
 ```

@@ -201,48 +201,48 @@ const App = () => (
 Use the `prefix` and `suffix` slots to add icons.

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio-button value="1">
-    <sl-icon slot="prefix" name="archive"></sl-icon>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio-button value="1">
+    <wa-icon slot="prefix" name="archive"></wa-icon>
    Option 1
-  </sl-radio-button>
+  </wa-radio-button>

-  <sl-radio-button value="2">
-    <sl-icon slot="suffix" name="bag"></sl-icon>
+  <wa-radio-button value="2">
+    <wa-icon slot="suffix" name="bag"></wa-icon>
    Option 2
-  </sl-radio-button>
+  </wa-radio-button>

-  <sl-radio-button value="3">
-    <sl-icon slot="prefix" name="gift"></sl-icon>
-    <sl-icon slot="suffix" name="cart"></sl-icon>
+  <wa-radio-button value="3">
+    <wa-icon slot="prefix" name="gift"></wa-icon>
+    <wa-icon slot="suffix" name="cart"></wa-icon>
    Option 3
-  </sl-radio-button>
-</sl-radio-group>
+  </wa-radio-button>
+</wa-radio-group>
 ```

 ```jsx:react
-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';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadioButton value="1">
-      <SlIcon slot="prefix" name="archive" />
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadioButton value="1">
+      <WaIcon slot="prefix" name="archive" />
      Option 1
-    </SlRadioButton>
+    </WaRadioButton>

-    <SlRadioButton value="2">
-      <SlIcon slot="suffix" name="bag" />
+    <WaRadioButton value="2">
+      <WaIcon slot="suffix" name="bag" />
      Option 2
-    </SlRadioButton>
+    </WaRadioButton>

-    <SlRadioButton value="3">
-      <SlIcon slot="prefix" name="gift" />
-      <SlIcon slot="suffix" name="cart" />
+    <WaRadioButton value="3">
+      <WaIcon slot="prefix" name="gift" />
+      <WaIcon slot="suffix" name="cart" />
      Option 3
-    </SlRadioButton>
-  </SlRadioGroup>
+    </WaRadioButton>
+  </WaRadioGroup>
 );
 ```

@@ -251,55 +251,55 @@ const App = () => (
 You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly.

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="neutral">
-  <sl-radio-button value="angry">
-    <sl-icon name="emoji-angry" label="Angry"></sl-icon>
-  </sl-radio-button>
+<wa-radio-group label="Select an option" name="a" value="neutral">
+  <wa-radio-button value="angry">
+    <wa-icon name="emoji-angry" label="Angry"></wa-icon>
+  </wa-radio-button>

-  <sl-radio-button value="sad">
-    <sl-icon name="emoji-frown" label="Sad"></sl-icon>
-  </sl-radio-button>
+  <wa-radio-button value="sad">
+    <wa-icon name="emoji-frown" label="Sad"></wa-icon>
+  </wa-radio-button>

-  <sl-radio-button value="neutral">
-    <sl-icon name="emoji-neutral" label="Neutral"></sl-icon>
-  </sl-radio-button>
+  <wa-radio-button value="neutral">
+    <wa-icon name="emoji-neutral" label="Neutral"></wa-icon>
+  </wa-radio-button>

-  <sl-radio-button value="happy">
-    <sl-icon name="emoji-smile" label="Happy"></sl-icon>
-  </sl-radio-button>
+  <wa-radio-button value="happy">
+    <wa-icon name="emoji-smile" label="Happy"></wa-icon>
+  </wa-radio-button>

-  <sl-radio-button value="laughing">
-    <sl-icon name="emoji-laughing" label="Laughing"></sl-icon>
-  </sl-radio-button>
-</sl-radio-group>
+  <wa-radio-button value="laughing">
+    <wa-icon name="emoji-laughing" label="Laughing"></wa-icon>
+  </wa-radio-button>
+</wa-radio-group>
 ```

 ```jsx:react
-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';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="neutral">
-    <SlRadioButton value="angry">
-      <SlIcon name="emoji-angry" label="Angry" />
-    </SlRadioButton>
+  <WaRadioGroup label="Select an option" name="a" value="neutral">
+    <WaRadioButton value="angry">
+      <WaIcon name="emoji-angry" label="Angry" />
+    </WaRadioButton>

-    <SlRadioButton value="sad">
-      <SlIcon name="emoji-frown" label="Sad" />
-    </SlRadioButton>
+    <WaRadioButton value="sad">
+      <WaIcon name="emoji-frown" label="Sad" />
+    </WaRadioButton>

-    <SlRadioButton value="neutral">
-      <SlIcon name="emoji-neutral" label="Neutral" />
-    </SlRadioButton>
+    <WaRadioButton value="neutral">
+      <WaIcon name="emoji-neutral" label="Neutral" />
+    </WaRadioButton>

-    <SlRadioButton value="happy">
-      <SlIcon name="emoji-smile" label="Happy" />
-    </SlRadioButton>
+    <WaRadioButton value="happy">
+      <WaIcon name="emoji-smile" label="Happy" />
+    </WaRadioButton>

-    <SlRadioButton value="laughing">
-      <SlIcon name="emoji-laughing" label="Laughing" />
-    </SlRadioButton>
-  </SlRadioGroup>
+    <WaRadioButton value="laughing">
+      <WaIcon name="emoji-laughing" label="Laughing" />
+    </WaRadioButton>
+  </WaRadioGroup>
 );
 ```
--- a/docs/pages/components/radio-group.md
+++ b/docs/pages/components/radio-group.md
@@ -6,23 +6,23 @@ layout: component
 ---

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio value="1">Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio value="1">Option 1</wa-radio>
+  <wa-radio value="2">Option 2</wa-radio>
+  <wa-radio value="3">Option 3</wa-radio>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadio value="1">Option 1</SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadio value="1">Option 1</WaRadio>
+    <WaRadio value="2">Option 2</WaRadio>
+    <WaRadio value="3">Option 3</WaRadio>
+  </WaRadioGroup>
 );
 ```

@@ -33,23 +33,23 @@ const App = () => (
 Add descriptive help text to a radio group with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.

 ```html:preview
-<sl-radio-group label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
-  <sl-radio value="1">Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-</sl-radio-group>
+<wa-radio-group label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
+  <wa-radio value="1">Option 1</wa-radio>
+  <wa-radio value="2">Option 2</wa-radio>
+  <wa-radio value="3">Option 3</wa-radio>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
+import WaRadioGroup 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">
-    <SlRadio value="1">Option 1</SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
+    <WaRadio value="1">Option 1</WaRadio>
+    <WaRadio value="2">Option 2</WaRadio>
+    <WaRadio value="3">Option 3</WaRadio>
+  </WaRadioGroup>
 );
 ```

@@ -58,23 +58,23 @@ const App = () => (
 [Radio buttons](/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/components/button-group) is used to group the buttons into a single, cohesive control.

 ```html:preview
-<sl-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
-  <sl-radio-button value="1">Option 1</sl-radio-button>
-  <sl-radio-button value="2">Option 2</sl-radio-button>
-  <sl-radio-button value="3">Option 3</sl-radio-button>
-</sl-radio-group>
+<wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadioButton value="1">Option 1</SlRadioButton>
-    <SlRadioButton value="2">Option 2</SlRadioButton>
-    <SlRadioButton value="3">Option 3</SlRadioButton>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadioButton value="1">Option 1</WaRadioButton>
+    <WaRadioButton value="2">Option 2</WaRadioButton>
+    <WaRadioButton value="3">Option 3</WaRadioButton>
+  </WaRadioGroup>
 );
 ```

@@ -83,25 +83,25 @@ const App = () => (
 Radios and radio buttons can be disabled by adding the `disabled` attribute to the respective options inside the radio group.

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio value="1">Option 1</sl-radio>
-  <sl-radio value="2" disabled>Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio value="1">Option 1</wa-radio>
+  <wa-radio value="2" disabled>Option 2</wa-radio>
+  <wa-radio value="3">Option 3</wa-radio>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadio value="1">Option 1</SlRadio>
-    <SlRadio value="2" disabled>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadio value="1">Option 1</WaRadio>
+    <WaRadio value="2" disabled>
      Option 2
-    </SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-  </SlRadioGroup>
+    </WaRadio>
+    <WaRadio value="3">Option 3</WaRadio>
+  </WaRadioGroup>
 );
 ```

@@ -110,16 +110,16 @@ const App = () => (
 The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-buttons) will be determined by the Radio Group's `size` attribute.

 ```html preview
-<sl-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
-  <sl-radio value="small">Small</sl-radio>
-  <sl-radio value="medium">Medium</sl-radio>
-  <sl-radio value="large">Large</sl-radio>
-</sl-radio-group>
+<wa-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
+  <wa-radio value="small">Small</wa-radio>
+  <wa-radio value="medium">Medium</wa-radio>
+  <wa-radio value="large">Large</wa-radio>
+</wa-radio-group>

 <script>
  const radioGroup = document.querySelector('.radio-group-size');

-  radioGroup.addEventListener('sl-change', () => {
+  radioGroup.addEventListener('wa-change', () => {
    radioGroup.size = radioGroup.value;
  });
 </script>
@@ -127,25 +127,25 @@ 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/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => {
  const [size, setSize] = useState('medium');

  return (
    <>
-      <SlRadioGroup
+      <WaRadioGroup
        label="Select an option"
        size={size}
        value={size}
        class="radio-group-size"
-        onSlChange={event => setSize(event.target.value)}
+        onWaChange={event => setSize(event.target.value)}
      >
-        <SlRadio value="small">Small</SlRadio>
-        <SlRadio value="medium">Medium</SlRadio>
-        <SlRadio value="large">Large</SlRadio>
-      </SlRadioGroup>
+        <WaRadio value="small">Small</WaRadio>
+        <WaRadio value="medium">Medium</WaRadio>
+        <WaRadio value="large">Large</WaRadio>
+      </WaRadioGroup>
    </>
  );
 };
@@ -161,13 +161,13 @@ Setting the `required` attribute to make selecting an option mandatory. If a val

 ```html:preview
 <form class="validation">
-  <sl-radio-group label="Select an option" name="a" required>
-    <sl-radio value="1">Option 1</sl-radio>
-    <sl-radio value="2">Option 2</sl-radio>
-    <sl-radio value="3">Option 3</sl-radio>
-  </sl-radio-group>
+  <wa-radio-group label="Select an option" name="a" required>
+    <wa-radio value="1">Option 1</wa-radio>
+    <wa-radio value="2">Option 2</wa-radio>
+    <wa-radio value="3">Option 3</wa-radio>
+  </wa-radio-group>
  <br />
-  <sl-button type="submit" variant="brand">Submit</sl-button>
+  <wa-button type="submit" variant="brand">Submit</wa-button>
 </form>

 <script>
@@ -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/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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 const App = () => {
  function handleSubmit(event) {
    event.preventDefault();
@@ -194,21 +194,21 @@ const App = () => {

  return (
    <form class="custom-validity" onSubmit={handleSubmit}>
-      <SlRadioGroup label="Select an option" name="a" required onSlChange={handleChange}>
-        <SlRadio value="1">
+      <WaRadioGroup label="Select an option" name="a" required onWaChange={handleChange}>
+        <WaRadio value="1">
          Option 1
-        </SlRadio>
-        <SlRadiovalue="2">
+        </WaRadio>
+        <WaRadiovalue="2">
          Option 2
-        </SlRadio>
-        <SlRadio value="3">
+        </WaRadio>
+        <WaRadio value="3">
          Option 3
-        </SlRadio>
-      </SlRadioGroup>
+        </WaRadio>
+      </WaRadioGroup>
      <br />
-      <SlButton type="submit" variant="brand">
+      <WaButton type="submit" variant="brand">
        Submit
-      </SlButton>
+      </WaButton>
    </form>
  );
 };
@@ -220,27 +220,27 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi

 ```html:preview
 <form class="custom-validity">
-  <sl-radio-group label="Select an option" name="a" value="1">
-    <sl-radio value="1">Not me</sl-radio>
-    <sl-radio value="2">Me neither</sl-radio>
-    <sl-radio value="3">Choose me</sl-radio>
-  </sl-radio-group>
+  <wa-radio-group label="Select an option" name="a" value="1">
+    <wa-radio value="1">Not me</wa-radio>
+    <wa-radio value="2">Me neither</wa-radio>
+    <wa-radio value="3">Choose me</wa-radio>
+  </wa-radio-group>
  <br />
-  <sl-button type="submit" variant="brand">Submit</sl-button>
+  <wa-button type="submit" variant="brand">Submit</wa-button>
 </form>

 <script>
  const form = document.querySelector('.custom-validity');
-  const radioGroup = form.querySelector('sl-radio-group');
+  const radioGroup = form.querySelector('wa-radio-group');
  const errorMessage = 'You must choose the last option';

  // Set initial validity as soon as the element is defined
-  customElements.whenDefined('sl-radio').then(() => {
+  customElements.whenDefined('wa-radio').then(() => {
    radioGroup.setCustomValidity(errorMessage);
  });

  // Update validity when a selection is made
-  form.addEventListener('sl-change', () => {
+  form.addEventListener('wa-change', () => {
    const isValid = radioGroup.value === '3';
    radioGroup.setCustomValidity(isValid ? '' : errorMessage);
  });
@@ -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/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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 const App = () => {
  const radioGroup = useRef(null);
  const errorMessage = 'You must choose this option';
@@ -278,15 +278,15 @@ const App = () => {

  return (
    <form class="custom-validity" onSubmit={handleSubmit}>
-      <SlRadioGroup ref={radioGroup} label="Select an option" name="a" value="1" onSlChange={handleChange}>
-        <SlRadio value="1">Not me</SlRadio>
-        <SlRadio value="2">Me neither</SlRadio>
-        <SlRadio value="3">Choose me</SlRadio>
-      </SlRadioGroup>
+      <WaRadioGroup ref={radioGroup} label="Select an option" name="a" value="1" onWaChange={handleChange}>
+        <WaRadio value="1">Not me</WaRadio>
+        <WaRadio value="2">Me neither</WaRadio>
+        <WaRadio value="3">Choose me</WaRadio>
+      </WaRadioGroup>
      <br />
-      <SlButton type="submit" variant="brand">
+      <WaButton type="submit" variant="brand">
        Submit
-      </SlButton>
+      </WaButton>
    </form>
  );
 };
--- a/docs/pages/components/radio.md
+++ b/docs/pages/components/radio.md
@@ -8,23 +8,23 @@ layout: component
 Radios are designed to be used with [radio groups](/components/radio-group).

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio value="1">Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio value="1">Option 1</wa-radio>
+  <wa-radio value="2">Option 2</wa-radio>
+  <wa-radio value="3">Option 3</wa-radio>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadio value="1">Option 1</SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadio value="1">Option 1</WaRadio>
+    <WaRadio value="2">Option 2</WaRadio>
+    <WaRadio value="3">Option 3</WaRadio>
+  </WaRadioGroup>
 );
 ```

@@ -39,23 +39,23 @@ This component works with standard `<form>` elements. Please refer to the sectio
 To set the initial value and checked state, use the `value` attribute on the containing radio group.

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="3">
-  <sl-radio value="1">Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="3">
+  <wa-radio value="1">Option 1</wa-radio>
+  <wa-radio value="2">Option 2</wa-radio>
+  <wa-radio value="3">Option 3</wa-radio>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="3">
-    <SlRadio value="1">Option 1</SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-  </SlRadioGroup>
+  <WaRadioGroup label="Select an option" name="a" value="3">
+    <WaRadio value="1">Option 1</WaRadio>
+    <WaRadio value="2">Option 2</WaRadio>
+    <WaRadio value="3">Option 3</WaRadio>
+  </WaRadioGroup>
 );
 ```

@@ -64,25 +64,25 @@ const App = () => (
 Use the `disabled` attribute to disable a radio.

 ```html:preview
-<sl-radio-group label="Select an option" name="a" value="1">
-  <sl-radio value="1">Option 1</sl-radio>
-  <sl-radio value="2" disabled>Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-</sl-radio-group>
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio value="1">Option 1</wa-radio>
+  <wa-radio value="2" disabled>Option 2</wa-radio>
+  <wa-radio value="3">Option 3</wa-radio>
+</wa-radio-group>
 ```

 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
+import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';

 const App = () => (
-  <SlRadioGroup label="Select an option" name="a" value="1">
-    <SlRadio value="1">Option 1</SlRadio>
-    <SlRadio value="2" disabled>
+  <WaRadioGroup label="Select an option" name="a" value="1">
+    <WaRadio value="1">Option 1</WaRadio>
+    <WaRadio value="2" disabled>
      Option 2
-    </SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-  </SlRadioGroup>
+    </WaRadio>
+    <WaRadio value="3">Option 3</WaRadio>
+  </WaRadioGroup>
 );
 ```

@@ -91,55 +91,55 @@ const App = () => (
 Add the `size` attribute to the [Radio Group](/components/radio-group) to change the radios' size.

 ```html preview
-<sl-radio-group size="small" value="1">
-  <sl-radio value="1">Small 1</sl-radio>
-  <sl-radio value="2">Small 2</sl-radio>
-  <sl-radio value="3">Small 3</sl-radio>
-</sl-radio-group>
+<wa-radio-group size="small" value="1">
+  <wa-radio value="1">Small 1</wa-radio>
+  <wa-radio value="2">Small 2</wa-radio>
+  <wa-radio value="3">Small 3</wa-radio>
+</wa-radio-group>

 <br />

-<sl-radio-group size="medium" value="1">
-  <sl-radio value="1">Medium 1</sl-radio>
-  <sl-radio value="2">Medium 2</sl-radio>
-  <sl-radio value="3">Medium 3</sl-radio>
-</sl-radio-group>
+<wa-radio-group size="medium" value="1">
+  <wa-radio value="1">Medium 1</wa-radio>
+  <wa-radio value="2">Medium 2</wa-radio>
+  <wa-radio value="3">Medium 3</wa-radio>
+</wa-radio-group>

 <br />

-<sl-radio-group size="large" value="1">
-  <sl-radio value="1">Large 1</sl-radio>
-  <sl-radio value="2">Large 2</sl-radio>
-  <sl-radio value="3">Large 3</sl-radio>
-</sl-radio-group>
+<wa-radio-group size="large" value="1">
+  <wa-radio value="1">Large 1</wa-radio>
+  <wa-radio value="2">Large 2</wa-radio>
+  <wa-radio value="3">Large 3</wa-radio>
+</wa-radio-group>
 ```

 ```jsx react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import WaRadio from '@shoelace-style/shoelace/dist/react/radio';

 const App = () => (
  <>
-    <SlRadioGroup size="small" value="1">
-      <SlRadio value="1">Small 1</SlRadio>
-      <SlRadio value="2">Small 2</SlRadio>
-      <SlRadio value="3">Small 3</SlRadio>
-    </SlRadioGroup>
+    <WaRadioGroup size="small" value="1">
+      <WaRadio value="1">Small 1</WaRadio>
+      <WaRadio value="2">Small 2</WaRadio>
+      <WaRadio value="3">Small 3</WaRadio>
+    </WaRadioGroup>

    <br />

-    <SlRadioGroup size="medium" value="1">
-      <SlRadio value="1">Medium 1</SlRadio>
-      <SlRadio value="2">Medium 2</SlRadio>
-      <SlRadio value="3">Medium 3</SlRadio>
-    </SlRadioGroup>
+    <WaRadioGroup size="medium" value="1">
+      <WaRadio value="1">Medium 1</WaRadio>
+      <WaRadio value="2">Medium 2</WaRadio>
+      <WaRadio value="3">Medium 3</WaRadio>
+    </WaRadioGroup>

    <br />

-    <SlRadioGroup size="large" value="1">
-      <SlRadio value="1">Large 1</SlRadio>
-      <SlRadio value="2">Large 2</SlRadio>
-      <SlRadio value="3">Large 3</SlRadio>
-    </SlRadioGroup>
+    <WaRadioGroup size="large" value="1">
+      <WaRadio value="1">Large 1</WaRadio>
+      <WaRadio value="2">Large 2</WaRadio>
+      <WaRadio value="3">Large 3</WaRadio>
+    </WaRadioGroup>
  </>
 );
 ```
--- a/docs/pages/components/range.md
+++ b/docs/pages/components/range.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-range></sl-range>
+<wa-range></wa-range>
 ```

 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';

-const App = () => <SlRange />;
+const App = () => <WaRange />;
 ```

 :::tip
@@ -26,13 +26,13 @@ This component works with standard `<form>` elements. Please refer to the sectio
 Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.

 ```html:preview
-<sl-range label="Volume" min="0" max="100"></sl-range>
+<wa-range label="Volume" min="0" max="100"></wa-range>
 ```

 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';

-const App = () => <SlRange label="Volume" min={0} max={100} />;
+const App = () => <WaRange label="Volume" min={0} max={100} />;
 ```

 ### Help Text
@@ -40,13 +40,13 @@ const App = () => <SlRange label="Volume" min={0} max={100} />;
 Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.

 ```html:preview
-<sl-range label="Volume" help-text="Controls the volume of the current song." min="0" max="100"></sl-range>
+<wa-range label="Volume" help-text="Controls the volume of the current song." min="0" max="100"></wa-range>
 ```

 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import WaRange 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} />;
+const App = () => <WaRange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;
 ```

 ### Min, Max, and Step
@@ -54,13 +54,13 @@ const App = () => <SlRange label="Volume" help-text="Controls the volume of the
 Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.

 ```html:preview
-<sl-range min="0" max="10" step="1"></sl-range>
+<wa-range min="0" max="10" step="1"></wa-range>
 ```

 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';

-const App = () => <SlRange min={0} max={10} step={1} />;
+const App = () => <WaRange min={0} max={10} step={1} />;
 ```

 ### Disabled
@@ -68,13 +68,13 @@ const App = () => <SlRange min={0} max={10} step={1} />;
 Use the `disabled` attribute to disable a slider.

 ```html:preview
-<sl-range disabled></sl-range>
+<wa-range disabled></wa-range>
 ```

 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';

-const App = () => <SlRange disabled />;
+const App = () => <WaRange disabled />;
 ```

 ### Tooltip Placement
@@ -82,13 +82,13 @@ const App = () => <SlRange disabled />;
 By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.

 ```html:preview
-<sl-range tooltip="bottom"></sl-range>
+<wa-range tooltip="bottom"></wa-range>
 ```

 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';

-const App = () => <SlRange tooltip="bottom" />;
+const App = () => <WaRange tooltip="bottom" />;
 ```

 ### Disable the Tooltip
@@ -96,13 +96,13 @@ const App = () => <SlRange tooltip="bottom" />;
 To disable the tooltip, set `tooltip` to `none`.

 ```html:preview
-<sl-range tooltip="none"></sl-range>
+<wa-range tooltip="none"></wa-range>
 ```

 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';

-const App = () => <SlRange tooltip="none" />;
+const App = () => <WaRange tooltip="none" />;
 ```

 ### Custom Track Colors
@@ -110,21 +110,21 @@ const App = () => <SlRange tooltip="none" />;
 You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.

 ```html:preview
-<sl-range
+<wa-range
  style="
  --track-color-active: var(--wa-color-brand-element-fill-vivid);
  --track-color-inactive: var(--wa-color-brand-element-fill-muted);
 "
-></sl-range>
+></wa-range>
 ```

 {% raw %}

 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';

 const App = () => (
-  <SlRange
+  <WaRange
    style={{
      '--track-color-active': 'var(--wa-color-brand-element-fill-vivid)',
      '--track-color-inactive': 'var(--wa-color-brand-element-fill-muted)'
@@ -140,7 +140,7 @@ const App = () => (
 You can customize the initial offset of the active track using the `--track-active-offset` custom property.

 ```html:preview
-<sl-range
+<wa-range
  min="-100"
  max="100"
  style="
@@ -148,16 +148,16 @@ You can customize the initial offset of the active track using the `--track-acti
  --track-color-inactive: var(--wa-color-brand-element-fill-muted);
  --track-active-offset: 50%;
 "
-></sl-range>
+></wa-range>
 ```

 {% raw %}

 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';

 const App = () => (
-  <SlRange
+  <WaRange
    min={-100}
    max={100}
    style={{
@@ -176,7 +176,7 @@ const App = () => (
 You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.

 ```html:preview
-<sl-range min="0" max="100" step="1" class="range-with-custom-formatter"></sl-range>
+<wa-range min="0" max="100" step="1" class="range-with-custom-formatter"></wa-range>

 <script>
  const range = document.querySelector('.range-with-custom-formatter');
@@ -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/range';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';

-const App = () => <SlRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
+const App = () => <WaRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
 ```
--- a/docs/pages/components/rating.md
+++ b/docs/pages/components/rating.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-rating label="Rating"></sl-rating>
+<wa-rating label="Rating"></wa-rating>
 ```

 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

-const App = () => <SlRating label="Rating" />;
+const App = () => <WaRating label="Rating" />;
 ```

 ## Examples
@@ -22,13 +22,13 @@ const App = () => <SlRating label="Rating" />;
 Ratings are commonly identified contextually, so labels aren't displayed. However, you should always provide one for assistive devices using the `label` attribute.

 ```html:preview
-<sl-rating label="Rate this component"></sl-rating>
+<wa-rating label="Rate this component"></wa-rating>
 ```

 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

-const App = () => <SlRating label="Rate this component" />;
+const App = () => <WaRating label="Rate this component" />;
 ```

 ### Maximum Value
@@ -36,13 +36,13 @@ const App = () => <SlRating label="Rate this component" />;
 Ratings are 0-5 by default. To change the maximum possible value, use the `max` attribute.

 ```html:preview
-<sl-rating label="Rating" max="3"></sl-rating>
+<wa-rating label="Rating" max="3"></wa-rating>
 ```

 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

-const App = () => <SlRating label="Rating" max={3} />;
+const App = () => <WaRating label="Rating" max={3} />;
 ```

 ### Precision
@@ -50,13 +50,13 @@ const App = () => <SlRating label="Rating" max={3} />;
 Use the `precision` attribute to let users select fractional ratings.

 ```html:preview
-<sl-rating label="Rating" precision="0.5" value="2.5"></sl-rating>
+<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
 ```

 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

-const App = () => <SlRating label="Rating" precision={0.5} value={2.5} />;
+const App = () => <WaRating label="Rating" precision={0.5} value={2.5} />;
 ```

 ### Symbol Sizes
@@ -64,15 +64,15 @@ const App = () => <SlRating label="Rating" precision={0.5} value={2.5} />;
 Set the `--symbol-size` custom property to adjust the size.

 ```html:preview
-<sl-rating label="Rating" style="--symbol-size: 2rem;"></sl-rating>
+<wa-rating label="Rating" style="--symbol-size: 2rem;"></wa-rating>
 ```

 {% raw %}

 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

-const App = () => <SlRating label="Rating" style={{ '--symbol-size': '2rem' }} />;
+const App = () => <WaRating label="Rating" style={{ '--symbol-size': '2rem' }} />;
 ```

 {% endraw %}
@@ -82,13 +82,13 @@ const App = () => <SlRating label="Rating" style={{ '--symbol-size': '2rem' }} /
 Use the `readonly` attribute to display a rating that users can't change.

 ```html:preview
-<sl-rating label="Rating" readonly value="3"></sl-rating>
+<wa-rating label="Rating" readonly value="3"></wa-rating>
 ```

 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

-const App = () => <SlRating label="Rating" readonly value={3} />;
+const App = () => <WaRating label="Rating" readonly value={3} />;
 ```

 ### Disabled
@@ -96,33 +96,33 @@ const App = () => <SlRating label="Rating" readonly value={3} />;
 Use the `disable` attribute to disable the rating.

 ```html:preview
-<sl-rating label="Rating" disabled value="3"></sl-rating>
+<wa-rating label="Rating" disabled value="3"></wa-rating>
 ```

 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

-const App = () => <SlRating label="Rating" disabled value={3} />;
+const App = () => <WaRating label="Rating" disabled value={3} />;
 ```

 ### Detecting Hover

-Use the `sl-hover` event to detect when the user hovers over (or touch and drag) the rating. This lets you hook into values as the user interacts with the rating, but before they select a value.
+Use the `wa-hover` event to detect when the user hovers over (or touch and drag) the rating. This lets you hook into values as the user interacts with the rating, but before they select a value.

 The event has a payload with `phase` and `value` properties. The `phase` property tells when hovering starts, moves to a new value, and ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.

 ```html:preview
 <div class="detect-hover">
-  <sl-rating label="Rating"></sl-rating>
+  <wa-rating label="Rating"></wa-rating>
  <span></span>
 </div>

 <script>
-  const rating = document.querySelector('.detect-hover > sl-rating');
+  const rating = document.querySelector('.detect-hover > wa-rating');
  const span = rating.nextElementSibling;
  const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];

-  rating.addEventListener('sl-hover', event => {
+  rating.addEventListener('wa-hover', event => {
    span.textContent = terms[event.detail.value];

    // Clear feedback when hovering stops
@@ -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/rating';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

 const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
 const css = `
@@ -173,7 +173,7 @@ const css = `
 `;

 function handleHover(event) {
-  rating.addEventListener('sl-hover', event => {
+  rating.addEventListener('wa-hover', event => {
    setFeedback(terms[event.detail.value]);

    // Clear feedback when hovering stops
@@ -189,7 +189,7 @@ const App = () => {
  return (
    <>
      <div class="detect-hover">
-        <SlRating label="Rating" onSlHover={handleHover} />
+        <WaRating label="Rating" onWaHover={handleHover} />
        <span>{feedback}</span>
      </div>
      <style>{css}</style>
@@ -203,23 +203,23 @@ const App = () => {
 You can provide custom icons by passing a function to the `getSymbol` property.

 ```html:preview
-<sl-rating label="Rating" class="rating-hearts" style="--symbol-color-active: #ff4136;"></sl-rating>
+<wa-rating label="Rating" class="rating-hearts" style="--symbol-color-active: #ff4136;"></wa-rating>

 <script>
  const rating = document.querySelector('.rating-hearts');
-  rating.getSymbol = () => '<sl-icon name="heart-fill"></sl-icon>';
+  rating.getSymbol = () => '<wa-icon name="heart-fill"></wa-icon>';
 </script>
 ```

 {% raw %}

 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

 const App = () => (
-  <SlRating
+  <WaRating
    label="Rating"
-    getSymbol={() => '<sl-icon name="heart-fill"></sl-icon>'}
+    getSymbol={() => '<wa-icon name="heart-fill"></wa-icon>'}
    style={{ '--symbol-color-active': '#ff4136' }}
  />
 );
@@ -232,25 +232,25 @@ const App = () => (
 You can also use the `getSymbol` property to render different icons based on value.

 ```html:preview
-<sl-rating label="Rating" class="rating-emojis"></sl-rating>
+<wa-rating label="Rating" class="rating-emojis"></wa-rating>

 <script>
  const rating = document.querySelector('.rating-emojis');

  rating.getSymbol = value => {
    const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
-    return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
+    return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
  };
 </script>
 ```

 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import WaRating from '@shoelace-style/shoelace/dist/react/rating';

 function getSymbol(value) {
  const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
-  return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
+  return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
 }

-const App = () => <SlRating label="Rating" getSymbol={getSymbol} />;
+const App = () => <WaRating label="Rating" getSymbol={getSymbol} />;
 ```
--- a/docs/pages/components/relative-time.md
+++ b/docs/pages/components/relative-time.md
@@ -8,14 +8,14 @@ layout: component
 Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). No language packs are required.

 ```html:preview
-<!-- Shoelace 2 release date 🎉 -->
-<sl-relative-time date="2020-07-15T09:17:00-04:00"></sl-relative-time>
+<!-- Web Awesome 2 release date 🎉 -->
+<wa-relative-time date="2020-07-15T09:17:00-04:00"></wa-relative-time>
 ```

 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';

-const App = () => <SlRelativeTime date="2020-07-15T09:17:00-04:00" />;
+const App = () => <WaRelativeTime date="2020-07-15T09:17:00-04:00" />;
 ```

 The `date` attribute determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript.
@@ -32,23 +32,23 @@ Use the `sync` attribute to update the displayed value automatically as time pas

 ```html:preview
 <div class="relative-time-sync">
-  <sl-relative-time sync></sl-relative-time>
+  <wa-relative-time sync></wa-relative-time>
 </div>

 <script>
  const container = document.querySelector('.relative-time-sync');
-  const relativeTime = container.querySelector('sl-relative-time');
+  const relativeTime = container.querySelector('wa-relative-time');

  relativeTime.date = new Date(new Date().getTime() - 60000);
 </script>
 ```

 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';

 const date = new Date(new Date().getTime() - 60000);

-const App = () => <SlRelativeTime date={date} sync />;
+const App = () => <WaRelativeTime date={date} sync />;
 ```

 ### Formatting Styles
@@ -56,21 +56,21 @@ const App = () => <SlRelativeTime date={date} sync />;
 You can change how the time is displayed using the `format` attribute. Note that some locales may display the same values for `narrow` and `short` formats.

 ```html:preview
-<sl-relative-time date="2020-07-15T09:17:00-04:00" format="narrow"></sl-relative-time><br />
-<sl-relative-time date="2020-07-15T09:17:00-04:00" format="short"></sl-relative-time><br />
-<sl-relative-time date="2020-07-15T09:17:00-04:00" format="long"></sl-relative-time>
+<wa-relative-time date="2020-07-15T09:17:00-04:00" format="narrow"></wa-relative-time><br />
+<wa-relative-time date="2020-07-15T09:17:00-04:00" format="short"></wa-relative-time><br />
+<wa-relative-time date="2020-07-15T09:17:00-04:00" format="long"></wa-relative-time>
 ```

 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';

 const App = () => (
  <>
-    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" />
+    <WaRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" />
    <br />
-    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" />
+    <WaRelativeTime date="2020-07-15T09:17:00-04:00" format="short" />
    <br />
-    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
+    <WaRelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
  </>
 );
 ```
@@ -80,27 +80,27 @@ const App = () => (
 Use the `lang` attribute to set the desired locale.

 ```html:preview
-English: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="en-US"></sl-relative-time><br />
-Chinese: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="zh-CN"></sl-relative-time><br />
-German: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="de"></sl-relative-time><br />
-Greek: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="el"></sl-relative-time><br />
-Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></sl-relative-time>
+English: <wa-relative-time date="2020-07-15T09:17:00-04:00" lang="en-US"></wa-relative-time><br />
+Chinese: <wa-relative-time date="2020-07-15T09:17:00-04:00" lang="zh-CN"></wa-relative-time><br />
+German: <wa-relative-time date="2020-07-15T09:17:00-04:00" lang="de"></wa-relative-time><br />
+Greek: <wa-relative-time date="2020-07-15T09:17:00-04:00" lang="el"></wa-relative-time><br />
+Russian: <wa-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></wa-relative-time>
 ```

 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';

 const App = () => (
  <>
-    English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" />
+    English: <WaRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" />
    <br />
-    Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" />
+    Chinese: <WaRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" />
    <br />
-    German: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="de" />
+    German: <WaRelativeTime date="2020-07-15T09:17:00-04:00" lang="de" />
    <br />
-    Greek: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="el" />
+    Greek: <WaRelativeTime date="2020-07-15T09:17:00-04:00" lang="el" />
    <br />
-    Russian: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="ru" />
+    Russian: <WaRelativeTime date="2020-07-15T09:17:00-04:00" lang="ru" />
  </>
 );
 ```
--- a/docs/pages/components/resize-observer.md
+++ b/docs/pages/components/resize-observer.md
@@ -5,20 +5,20 @@ meta:
 layout: component
 ---

-The resize observer will report changes to the dimensions of the elements it wraps through the `sl-resize` event. When emitted, a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects will be attached to `event.detail` that contains the target element and information about its dimensions.
+The resize observer will report changes to the dimensions of the elements it wraps through the `wa-resize` event. When emitted, a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects will be attached to `event.detail` that contains the target element and information about its dimensions.

 ```html:preview
 <div class="resize-observer-overview">
-  <sl-resize-observer>
+  <wa-resize-observer>
    <div>Resize this box and watch the console 👉</div>
-  </sl-resize-observer>
+  </wa-resize-observer>
 </div>

 <script>
  const container = document.querySelector('.resize-observer-overview');
-  const resizeObserver = container.querySelector('sl-resize-observer');
+  const resizeObserver = container.querySelector('wa-resize-observer');

-  resizeObserver.addEventListener('sl-resize', event => {
+  resizeObserver.addEventListener('wa-resize', event => {
    console.log(event.detail);
  });
 </script>
@@ -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/resize-observer';
+import WaResizeObserver from '@shoelace-style/shoelace/dist/react/resize-observer';

 const css = `
  .resize-observer-overview div {
@@ -52,9 +52,9 @@ const css = `
 const App = () => (
  <>
    <div className="resize-observer-overview">
-      <SlResizeObserver onSlResize={event => console.log(event.detail)}>
+      <WaResizeObserver onWaResize={event => console.log(event.detail)}>
        <div>Resize this box and watch the console 👉</div>
-      </SlResizeObserver>
+      </WaResizeObserver>
    </div>

    <style>{css}</style>
--- a/docs/pages/components/select.md
+++ b/docs/pages/components/select.md
@@ -6,29 +6,29 @@ layout: component
 ---

 ```html:preview
-<sl-select>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-  <sl-option value="option-4">Option 4</sl-option>
-  <sl-option value="option-5">Option 5</sl-option>
-  <sl-option value="option-6">Option 6</sl-option>
-</sl-select>
+<wa-select>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+  <wa-option value="option-4">Option 4</wa-option>
+  <wa-option value="option-5">Option 5</wa-option>
+  <wa-option value="option-6">Option 6</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect>
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-    <SlOption value="option-4">Option 4</SlOption>
-    <SlOption value="option-5">Option 5</SlOption>
-    <SlOption value="option-6">Option 6</SlOption>
-  </SlSelect>
+  <WaSelect>
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+    <WaOption value="option-4">Option 4</WaOption>
+    <WaOption value="option-5">Option 5</WaOption>
+    <WaOption value="option-6">Option 6</WaOption>
+  </WaSelect>
 );
 ```

@@ -43,23 +43,23 @@ This component works with standard `<form>` elements. Please refer to the sectio
 Use the `label` attribute to give the select an accessible label. For labels that contain HTML, use the `label` slot instead.

 ```html:preview
-<sl-select label="Select one">
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select label="Select one">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect label="Select one">
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-  </SlSelect>
+  <WaSelect label="Select one">
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+  </WaSelect>
 );
 ```

@@ -68,23 +68,23 @@ const App = () => (
 Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.

 ```html:preview
-<sl-select label="Experience" help-text="Please tell us your skill level.">
-  <sl-option value="1">Novice</sl-option>
-  <sl-option value="2">Intermediate</sl-option>
-  <sl-option value="3">Advanced</sl-option>
-</sl-select>
+<wa-select label="Experience" help-text="Please tell us your skill level.">
+  <wa-option value="1">Novice</wa-option>
+  <wa-option value="2">Intermediate</wa-option>
+  <wa-option value="3">Advanced</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect label="Experience" help-text="Please tell us your skill level.">
-    <SlOption value="1">Novice</SlOption>
-    <SlOption value="2">Intermediate</SlOption>
-    <SlOption value="3">Advanced</SlOption>
-  </SlSelect>
+  <WaSelect label="Experience" help-text="Please tell us your skill level.">
+    <WaOption value="1">Novice</WaOption>
+    <WaOption value="2">Intermediate</WaOption>
+    <WaOption value="3">Advanced</WaOption>
+  </WaSelect>
 );
 ```

@@ -93,23 +93,23 @@ const App = () => (
 Use the `placeholder` attribute to add a placeholder.

 ```html:preview
-<sl-select placeholder="Select one">
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select placeholder="Select one">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect placeholder="Select one">
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-  </SlSelect>
+  <WaSelect placeholder="Select one">
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+  </WaSelect>
 );
 ```

@@ -118,23 +118,23 @@ const App = () => (
 Use the `clearable` attribute to make the control clearable. The clear button only appears when an option is selected.

 ```html:preview
-<sl-select clearable value="option-1">
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select clearable value="option-1">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect placeholder="Clearable" clearable>
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-  </SlSelect>
+  <WaSelect placeholder="Clearable" clearable>
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+  </WaSelect>
 );
 ```

@@ -143,23 +143,23 @@ const App = () => (
 Add the `filled` attribute to draw a filled select.

 ```html:preview
-<sl-select filled>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select filled>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect filled>
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-  </SlSelect>
+  <WaSelect filled>
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+  </WaSelect>
 );
 ```

@@ -168,23 +168,23 @@ const App = () => (
 Use the `pill` attribute to give selects rounded edges.

 ```html:preview
-<sl-select pill>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select pill>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect pill>
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-  </SlSelect>
+  <WaSelect pill>
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+  </WaSelect>
 );
 ```

@@ -193,23 +193,23 @@ const App = () => (
 Use the `disabled` attribute to disable a select.

 ```html:preview
-<sl-select placeholder="Disabled" disabled>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select placeholder="Disabled" disabled>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect placeholder="Disabled" disabled>
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-  </SlSelect>
+  <WaSelect placeholder="Disabled" disabled>
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+  </WaSelect>
 );
 ```

@@ -218,29 +218,29 @@ const App = () => (
 To allow multiple options to be selected, use the `multiple` attribute. It's a good practice to use `clearable` when this option is enabled. To set multiple values at once, set `value` to a space-delimited list of values.

 ```html:preview
-<sl-select label="Select a Few" value="option-1 option-2 option-3" multiple clearable>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-  <sl-option value="option-4">Option 4</sl-option>
-  <sl-option value="option-5">Option 5</sl-option>
-  <sl-option value="option-6">Option 6</sl-option>
-</sl-select>
+<wa-select label="Select a Few" value="option-1 option-2 option-3" multiple clearable>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+  <wa-option value="option-4">Option 4</wa-option>
+  <wa-option value="option-5">Option 5</wa-option>
+  <wa-option value="option-6">Option 6</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect label="Select a Few" value="option-1 option-2 option-3" multiple clearable>
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-    <SlOption value="option-4">Option 4</SlOption>
-    <SlOption value="option-5">Option 5</SlOption>
-    <SlOption value="option-6">Option 6</SlOption>
-  </SlSelect>
+  <WaSelect label="Select a Few" value="option-1 option-2 option-3" multiple clearable>
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+    <WaOption value="option-4">Option 4</WaOption>
+    <WaOption value="option-5">Option 5</WaOption>
+    <WaOption value="option-6">Option 6</WaOption>
+  </WaSelect>
 );
 ```

@@ -252,62 +252,62 @@ Note that multi-select options may wrap, causing the control to expand verticall

 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.
+When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `<wa-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>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-  <sl-option value="option-4">Option 4</sl-option>
-</sl-select>
+<wa-select value="option-1 option-2" multiple clearable>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+  <wa-option value="option-4">Option 4</wa-option>
+</wa-select>
 ```

 ```jsx:react
-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';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect value="option-1 option-2" multiple clearable>
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-  </SlSelect>
+  <WaSelect value="option-1 option-2" multiple clearable>
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+  </WaSelect>
 );
 ```

 ### Grouping Options

-Use `<sl-divider>` to group listbox items visually. You can also use `<small>` to provide labels, but they won't be announced by most assistive devices.
+Use `<wa-divider>` to group listbox items visually. You can also use `<small>` to provide labels, but they won't be announced by most assistive devices.

 ```html:preview
-<sl-select>
+<wa-select>
  <small>Section 1</small>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-  <sl-divider></sl-divider>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+  <wa-divider></wa-divider>
  <small>Section 2</small>
-  <sl-option value="option-4">Option 4</sl-option>
-  <sl-option value="option-5">Option 5</sl-option>
-  <sl-option value="option-6">Option 6</sl-option>
-</sl-select>
+  <wa-option value="option-4">Option 4</wa-option>
+  <wa-option value="option-5">Option 5</wa-option>
+  <wa-option value="option-6">Option 6</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect>
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-    <SlOption value="option-4">Option 4</SlOption>
-    <SlOption value="option-5">Option 5</SlOption>
-    <SlOption value="option-6">Option 6</SlOption>
-  </SlSelect>
+  <WaSelect>
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+    <WaOption value="option-4">Option 4</WaOption>
+    <WaOption value="option-5">Option 5</WaOption>
+    <WaOption value="option-6">Option 6</WaOption>
+  </WaSelect>
 );
 ```

@@ -316,56 +316,56 @@ const App = () => (
 Use the `size` attribute to change a select's size. Note that size does not apply to listbox options.

 ```html:preview
-<sl-select placeholder="Small" size="small">
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select placeholder="Small" size="small">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>

 <br />

-<sl-select placeholder="Medium" size="medium">
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select placeholder="Medium" size="medium">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>

 <br />

-<sl-select placeholder="Large" size="large">
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select placeholder="Large" size="large">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
  <>
-    <SlSelect placeholder="Small" size="small">
-      <SlOption value="option-1">Option 1</SlOption>
-      <SlOption value="option-2">Option 2</SlOption>
-      <SlOption value="option-3">Option 3</SlOption>
-    </SlSelect>
+    <WaSelect placeholder="Small" size="small">
+      <WaOption value="option-1">Option 1</WaOption>
+      <WaOption value="option-2">Option 2</WaOption>
+      <WaOption value="option-3">Option 3</WaOption>
+    </WaSelect>

    <br />

-    <SlSelect placeholder="Medium" size="medium">
-      <SlOption value="option-1">Option 1</SlOption>
-      <SlOption value="option-2">Option 2</SlOption>
-      <SlOption value="option-3">Option 3</SlOption>
-    </SlSelect>
+    <WaSelect placeholder="Medium" size="medium">
+      <WaOption value="option-1">Option 1</WaOption>
+      <WaOption value="option-2">Option 2</WaOption>
+      <WaOption value="option-3">Option 3</WaOption>
+    </WaSelect>

    <br />

-    <SlSelect placeholder="Large" size="large">
-      <SlOption value="option-1">Option 1</SlOption>
-      <SlOption value="option-2">Option 2</SlOption>
-      <SlOption value="option-3">Option 3</SlOption>
-    </SlSelect>
+    <WaSelect placeholder="Large" size="large">
+      <WaOption value="option-1">Option 1</WaOption>
+      <WaOption value="option-2">Option 2</WaOption>
+      <WaOption value="option-3">Option 3</WaOption>
+    </WaSelect>
  </>
 );
 ```
@@ -375,23 +375,23 @@ const App = () => (
 The preferred placement of the select's listbox can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport. Valid placements are `top` and `bottom`.

 ```html:preview
-<sl-select placement="top">
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select placement="top">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```

 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
-  <SlSelect placement="top">
-    <SlOption value="option-1">Option 1</SlOption>
-    <SlOption value="option-2">Option 2</SlOption>
-    <SlOption value="option-3">Option 3</SlOption>
-  </SlDropdown>
+  <WaSelect placement="top">
+    <WaOption value="option-1">Option 1</WaOption>
+    <WaOption value="option-2">Option 2</WaOption>
+    <WaOption value="option-3">Option 3</WaOption>
+  </WaDropdown>
 );
 ```

@@ -400,100 +400,100 @@ const App = () => (
 Use the `prefix` slot to prepend an icon to the control.

 ```html:preview
-<sl-select placeholder="Small" size="small" clearable>
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select placeholder="Small" size="small" clearable>
+  <wa-icon name="house" slot="prefix"></wa-icon>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 <br />
-<sl-select placeholder="Medium" size="medium" clearable>
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select placeholder="Medium" size="medium" clearable>
+  <wa-icon name="house" slot="prefix"></wa-icon>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 <br />
-<sl-select placeholder="Large" size="large" clearable>
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-option value="option-1">Option 1</sl-option>
-  <sl-option value="option-2">Option 2</sl-option>
-  <sl-option value="option-3">Option 3</sl-option>
-</sl-select>
+<wa-select placeholder="Large" size="large" clearable>
+  <wa-icon name="house" slot="prefix"></wa-icon>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```

 ```jsx:react
-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';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaOption from '@shoelace-style/shoelace/dist/react/option';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
  <>
-    <SlSelect placeholder="Small" size="small">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlOption value="option-1">Option 1</SlOption>
-      <SlOption value="option-2">Option 2</SlOption>
-      <SlOption value="option-3">Option 3</SlOption>
-    </SlSelect>
+    <WaSelect placeholder="Small" size="small">
+      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaOption value="option-1">Option 1</WaOption>
+      <WaOption value="option-2">Option 2</WaOption>
+      <WaOption value="option-3">Option 3</WaOption>
+    </WaSelect>
    <br />
-    <SlSelect placeholder="Medium" size="medium">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlOption value="option-1">Option 1</SlOption>
-      <SlOption value="option-2">Option 2</SlOption>
-      <SlOption value="option-3">Option 3</SlOption>
-    </SlSelect>
+    <WaSelect placeholder="Medium" size="medium">
+      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaOption value="option-1">Option 1</WaOption>
+      <WaOption value="option-2">Option 2</WaOption>
+      <WaOption value="option-3">Option 3</WaOption>
+    </WaSelect>
    <br />
-    <SlSelect placeholder="Large" size="large">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlOption value="option-1">Option 1</SlOption>
-      <SlOption value="option-2">Option 2</SlOption>
-      <SlOption value="option-3">Option 3</SlOption>
-    </SlSelect>
+    <WaSelect placeholder="Large" size="large">
+      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaOption value="option-1">Option 1</WaOption>
+      <WaOption value="option-2">Option 2</WaOption>
+      <WaOption value="option-3">Option 3</WaOption>
+    </WaSelect>
  </>
 );
 ```

 ### 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).
+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 `<wa-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
+<wa-select
  placeholder="Select one"
  value="email phone"
  multiple
  clearable
  class="custom-tag"
 >
-  <sl-option value="email">
-    <sl-icon slot="prefix" name="envelope"></sl-icon>
+  <wa-option value="email">
+    <wa-icon slot="prefix" name="envelope"></wa-icon>
    Email
-  </sl-option>
-  <sl-option value="phone">
-    <sl-icon slot="prefix" name="telephone"></sl-icon>
+  </wa-option>
+  <wa-option value="phone">
+    <wa-icon slot="prefix" name="telephone"></wa-icon>
    Phone
-  </sl-option>
-  <sl-option value="chat">
-    <sl-icon slot="prefix" name="chat-dots"></sl-icon>
+  </wa-option>
+  <wa-option value="chat">
+    <wa-icon slot="prefix" name="chat-dots"></wa-icon>
    Chat
-  </sl-option>
-</sl-select>
+  </wa-option>
+</wa-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;
+    // Use the same icon used in the <wa-option>
+    const name = option.querySelector('wa-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>
+      <wa-tag removable>
+        <wa-icon name="${name}" style="padding-inline-end: .5rem;"></wa-icon>
        ${option.getTextLabel()}
-      </sl-tag>
+      </wa-tag>
    `;
  };
 </script>
--- a/docs/pages/components/skeleton.md
+++ b/docs/pages/components/skeleton.md
@@ -12,13 +12,13 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi
 ```html:preview
 <div class="skeleton-overview">
  <header>
-    <sl-skeleton effect="sheen"></sl-skeleton>
-    <sl-skeleton effect="sheen"></sl-skeleton>
+    <wa-skeleton effect="sheen"></wa-skeleton>
+    <wa-skeleton effect="sheen"></wa-skeleton>
  </header>

-  <sl-skeleton effect="sheen"></sl-skeleton>
-  <sl-skeleton effect="sheen"></sl-skeleton>
-  <sl-skeleton effect="sheen"></sl-skeleton>
+  <wa-skeleton effect="sheen"></wa-skeleton>
+  <wa-skeleton effect="sheen"></wa-skeleton>
+  <wa-skeleton effect="sheen"></wa-skeleton>
 </div>

 <style>
@@ -28,16 +28,16 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi
    margin-bottom: 1rem;
  }

-  .skeleton-overview header sl-skeleton:last-child {
+  .skeleton-overview header wa-skeleton:last-child {
    flex: 0 0 auto;
    width: 30%;
  }

-  .skeleton-overview sl-skeleton {
+  .skeleton-overview wa-skeleton {
    margin-bottom: 1rem;
  }

-  .skeleton-overview sl-skeleton:nth-child(1) {
+  .skeleton-overview wa-skeleton:nth-child(1) {
    float: left;
    width: 3rem;
    height: 3rem;
@@ -45,18 +45,18 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi
    vertical-align: middle;
  }

-  .skeleton-overview sl-skeleton:nth-child(3) {
+  .skeleton-overview wa-skeleton:nth-child(3) {
    width: 95%;
  }

-  .skeleton-overview sl-skeleton:nth-child(4) {
+  .skeleton-overview wa-skeleton:nth-child(4) {
    width: 80%;
  }
 </style>
 ```

 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';

 const css = `
  .skeleton-overview header {
@@ -65,16 +65,16 @@ const css = `
    margin-bottom: 1rem;
  }

-  .skeleton-overview header sl-skeleton:last-child {
+  .skeleton-overview header wa-skeleton:last-child {
    flex: 0 0 auto;
    width: 30%;
  }

-  .skeleton-overview sl-skeleton {
+  .skeleton-overview wa-skeleton {
    margin-bottom: 1rem;
  }

-  .skeleton-overview sl-skeleton:nth-child(1) {
+  .skeleton-overview wa-skeleton:nth-child(1) {
    float: left;
    width: 3rem;
    height: 3rem;
@@ -82,11 +82,11 @@ const css = `
    vertical-align: middle;
  }

-  .skeleton-overview sl-skeleton:nth-child(3) {
+  .skeleton-overview wa-skeleton:nth-child(3) {
    width: 95%;
  }

-  .skeleton-overview sl-skeleton:nth-child(4) {
+  .skeleton-overview wa-skeleton:nth-child(4) {
    width: 80%;
  }
 `;
@@ -95,13 +95,13 @@ const App = () => (
  <>
    <div className="skeleton-overview">
      <header>
-        <SlSkeleton />
-        <SlSkeleton />
+        <WaSkeleton />
+        <WaSkeleton />
      </header>

-      <SlSkeleton />
-      <SlSkeleton />
-      <SlSkeleton />
+      <WaSkeleton />
+      <WaSkeleton />
+      <WaSkeleton />
    </div>

    <style>{css}</style>
@@ -117,13 +117,13 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s

 ```html:preview
 <div class="skeleton-effects">
-  <sl-skeleton effect="none"></sl-skeleton>
+  <wa-skeleton effect="none"></wa-skeleton>
  None

-  <sl-skeleton effect="sheen"></sl-skeleton>
+  <wa-skeleton effect="sheen"></wa-skeleton>
  Sheen

-  <sl-skeleton effect="pulse"></sl-skeleton>
+  <wa-skeleton effect="pulse"></wa-skeleton>
  Pulse
 </div>

@@ -132,21 +132,21 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s
    font-size: var(--wa-font-size-s);
  }

-  .skeleton-effects sl-skeleton:not(:first-child) {
+  .skeleton-effects wa-skeleton:not(:first-child) {
    margin-top: 1rem;
  }
 </style>
 ```

 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';

 const css = `
  .skeleton-effects {
    font-size: var(--wa-font-size-s);
  }

-  .skeleton-effects sl-skeleton:not(:first-child) {
+  .skeleton-effects wa-skeleton:not(:first-child) {
    margin-top: 1rem;
  }
 `;
@@ -154,11 +154,11 @@ const css = `
 const App = () => (
  <>
    <div className="skeleton-effects">
-      <SlSkeleton effect="none" />
+      <WaSkeleton effect="none" />
      None
-      <SlSkeleton effect="sheen" />
+      <WaSkeleton effect="sheen" />
      Sheen
-      <SlSkeleton effect="pulse" />
+      <WaSkeleton effect="pulse" />
      Pulse
    </div>

@@ -173,49 +173,49 @@ Use multiple skeletons and some clever styles to simulate paragraphs.

 ```html:preview
 <div class="skeleton-paragraphs">
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
+  <wa-skeleton></wa-skeleton>
+  <wa-skeleton></wa-skeleton>
+  <wa-skeleton></wa-skeleton>
+  <wa-skeleton></wa-skeleton>
+  <wa-skeleton></wa-skeleton>
 </div>

 <style>
-  .skeleton-paragraphs sl-skeleton {
+  .skeleton-paragraphs wa-skeleton {
    margin-bottom: 1rem;
  }

-  .skeleton-paragraphs sl-skeleton:nth-child(2) {
+  .skeleton-paragraphs wa-skeleton:nth-child(2) {
    width: 95%;
  }

-  .skeleton-paragraphs sl-skeleton:nth-child(4) {
+  .skeleton-paragraphs wa-skeleton:nth-child(4) {
    width: 90%;
  }

-  .skeleton-paragraphs sl-skeleton:last-child {
+  .skeleton-paragraphs wa-skeleton:last-child {
    width: 50%;
  }
 </style>
 ```

 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';

 const css = `
-  .skeleton-paragraphs sl-skeleton {
+  .skeleton-paragraphs wa-skeleton {
    margin-bottom: 1rem;
  }

-  .skeleton-paragraphs sl-skeleton:nth-child(2) {
+  .skeleton-paragraphs wa-skeleton:nth-child(2) {
    width: 95%;
  }

-  .skeleton-paragraphs sl-skeleton:nth-child(4) {
+  .skeleton-paragraphs wa-skeleton:nth-child(4) {
    width: 90%;
  }

-  .skeleton-paragraphs sl-skeleton:last-child {
+  .skeleton-paragraphs wa-skeleton:last-child {
    width: 50%;
  }
 `;
@@ -223,11 +223,11 @@ const css = `
 const App = () => (
  <>
    <div className="skeleton-paragraphs">
-      <SlSkeleton />
-      <SlSkeleton />
-      <SlSkeleton />
-      <SlSkeleton />
-      <SlSkeleton />
+      <WaSkeleton />
+      <WaSkeleton />
+      <WaSkeleton />
+      <WaSkeleton />
+      <WaSkeleton />
    </div>

    <style>{css}</style>
@@ -241,45 +241,45 @@ Set a matching width and height to make a circle, square, or rounded avatar skel

 ```html:preview
 <div class="skeleton-avatars">
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
+  <wa-skeleton></wa-skeleton>
+  <wa-skeleton></wa-skeleton>
+  <wa-skeleton></wa-skeleton>
 </div>

 <style>
-  .skeleton-avatars sl-skeleton {
+  .skeleton-avatars wa-skeleton {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-right: 0.5rem;
  }

-  .skeleton-avatars sl-skeleton:nth-child(1) {
+  .skeleton-avatars wa-skeleton:nth-child(1) {
    --border-radius: 0;
  }

-  .skeleton-avatars sl-skeleton:nth-child(2) {
+  .skeleton-avatars wa-skeleton:nth-child(2) {
    --border-radius: var(--wa-corners-1x);
  }
 </style>
 ```

 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';

 const css = `
-  .skeleton-avatars sl-skeleton {
+  .skeleton-avatars wa-skeleton {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-right: .5rem;
  }

-  .skeleton-avatars sl-skeleton:nth-child(1) {
+  .skeleton-avatars wa-skeleton:nth-child(1) {
    --border-radius: 0;
  }

-  .skeleton-avatars sl-skeleton:nth-child(2) {
+  .skeleton-avatars wa-skeleton:nth-child(2) {
    --border-radius: var(--wa-corners-1x);
  }
 `;
@@ -287,9 +287,9 @@ const css = `
 const App = () => (
  <>
    <div className="skeleton-avatars">
-      <SlSkeleton />
-      <SlSkeleton />
-      <SlSkeleton />
+      <WaSkeleton />
+      <WaSkeleton />
+      <WaSkeleton />
    </div>

    <style>{css}</style>
@@ -303,15 +303,15 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl

 ```html:preview
 <div class="skeleton-shapes">
-  <sl-skeleton class="square"></sl-skeleton>
-  <sl-skeleton class="circle"></sl-skeleton>
-  <sl-skeleton class="triangle"></sl-skeleton>
-  <sl-skeleton class="cross"></sl-skeleton>
-  <sl-skeleton class="comment"></sl-skeleton>
+  <wa-skeleton class="square"></wa-skeleton>
+  <wa-skeleton class="circle"></wa-skeleton>
+  <wa-skeleton class="triangle"></wa-skeleton>
+  <wa-skeleton class="cross"></wa-skeleton>
+  <wa-skeleton class="comment"></wa-skeleton>
 </div>

 <style>
-  .skeleton-shapes sl-skeleton {
+  .skeleton-shapes wa-skeleton {
    display: inline-flex;
    width: 50px;
    height: 50px;
@@ -353,17 +353,17 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  }

-  .skeleton-shapes sl-skeleton:not(:last-child) {
+  .skeleton-shapes wa-skeleton:not(:last-child) {
    margin-right: 0.5rem;
  }
 </style>
 ```

 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';

 const css = `
-  .skeleton-shapes sl-skeleton {
+  .skeleton-shapes wa-skeleton {
    display: inline-flex;
    width: 50px;
    height: 50px;
@@ -392,7 +392,7 @@ const css = `
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  }

-  .skeleton-shapes sl-skeleton:not(:last-child) {
+  .skeleton-shapes wa-skeleton:not(:last-child) {
    margin-right: .5rem;
  }
 `;
@@ -400,11 +400,11 @@ const css = `
 const App = () => (
  <>
    <div className="skeleton-shapes">
-      <SlSkeleton className="square" />
-      <SlSkeleton className="circle" />
-      <SlSkeleton className="triangle" />
-      <SlSkeleton className="cross" />
-      <SlSkeleton className="comment" />
+      <WaSkeleton className="square" />
+      <WaSkeleton className="circle" />
+      <WaSkeleton className="triangle" />
+      <WaSkeleton className="cross" />
+      <WaSkeleton className="comment" />
    </div>

    <style>{css}</style>
@@ -417,32 +417,32 @@ const App = () => (
 Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's color.

 ```html:preview
-<sl-skeleton effect="sheen" style="--color: tomato; --sheen-color: #ffb094;"></sl-skeleton>
+<wa-skeleton effect="sheen" style="--color: tomato; --sheen-color: #ffb094;"></wa-skeleton>
 ```

 {% raw %}

 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';

 const css = `
-  .skeleton-avatars sl-skeleton {
+  .skeleton-avatars wa-skeleton {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-right: .5rem;
  }

-  .skeleton-avatars sl-skeleton:nth-child(1) {
+  .skeleton-avatars wa-skeleton:nth-child(1) {
    --border-radius: 0;
  }

-  .skeleton-avatars sl-skeleton:nth-child(2) {
+  .skeleton-avatars wa-skeleton:nth-child(2) {
    --border-radius: var(--wa-corners-1x);
  }
 `;

-const App = () => <SlSkeleton effect="sheen" style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }} />;
+const App = () => <WaSkeleton effect="sheen" style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }} />;
 ```

 {% endraw %}
--- a/docs/pages/components/spinner.md
+++ b/docs/pages/components/spinner.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-spinner></sl-spinner>
+<wa-spinner></wa-spinner>
 ```

 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner';

-const App = () => <SlSpinner />;
+const App = () => <WaSpinner />;
 ```

 ## Examples
@@ -22,21 +22,21 @@ const App = () => <SlSpinner />;
 Spinners are sized based on the current font size. To change their size, set the `font-size` property on the spinner itself or on a parent element as shown below.

 ```html:preview
-<sl-spinner></sl-spinner>
-<sl-spinner style="font-size: 2rem;"></sl-spinner>
-<sl-spinner style="font-size: 3rem;"></sl-spinner>
+<wa-spinner></wa-spinner>
+<wa-spinner style="font-size: 2rem;"></wa-spinner>
+<wa-spinner style="font-size: 3rem;"></wa-spinner>
 ```

 {% raw %}

 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner';

 const App = () => (
  <>
-    <SlSpinner />
-    <SlSpinner style={{ fontSize: '2rem' }} />
-    <SlSpinner style={{ fontSize: '3rem' }} />
+    <WaSpinner />
+    <WaSpinner style={{ fontSize: '2rem' }} />
+    <WaSpinner style={{ fontSize: '3rem' }} />
  </>
 );
 ```
@@ -48,16 +48,16 @@ const App = () => (
 The width of the spinner's track can be changed by setting the `--track-width` custom property.

 ```html:preview
-<sl-spinner style="font-size: 50px; --track-width: 10px;"></sl-spinner>
+<wa-spinner style="font-size: 50px; --track-width: 10px;"></wa-spinner>
 ```

 {% raw %}

 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner';

 const App = () => (
-  <SlSpinner
+  <WaSpinner
    style={{
      fontSize: '3rem',
      '--track-width': '6px'
@@ -73,16 +73,16 @@ const App = () => (
 The spinner's colors can be changed by setting the `--indicator-color` and `--track-color` custom properties.

 ```html:preview
-<sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></sl-spinner>
+<wa-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></wa-spinner>
 ```

 {% raw %}

 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner';

 const App = () => (
-  <SlSpinner
+  <WaSpinner
    style={{
      fontSize: '3rem',
      '--indicator-color': 'deeppink',
--- a/docs/pages/components/split-panel.md
+++ b/docs/pages/components/split-panel.md
@@ -6,7 +6,7 @@ layout: component
 ---

 ```html:preview
-<sl-split-panel>
+<wa-split-panel>
  <div
    slot="start"
    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
@@ -19,16 +19,16 @@ layout: component
  >
    End
  </div>
-</sl-split-panel>
+</wa-split-panel>
 ```

 {% raw %}

 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';

 const App = () => (
-  <SlSplitPanel>
+  <WaSplitPanel>
    <div
      slot="start"
      style={{
@@ -53,7 +53,7 @@ const App = () => (
    >
      End
    </div>
-  </SlSplitPanel>
+  </WaSplitPanel>
 );
 ```

@@ -66,7 +66,7 @@ const App = () => (
 To set the initial position, use the `position` attribute. If no position is provided, it will default to 50% of the available space.

 ```html:preview
-<sl-split-panel position="75">
+<wa-split-panel position="75">
  <div
    slot="start"
    style="
@@ -93,7 +93,7 @@ To set the initial position, use the `position` attribute. If no position is pro
  >
    End
  </div>
-</sl-split-panel>
+</wa-split-panel>
 ```

 ### Initial Position in Pixels
@@ -101,7 +101,7 @@ To set the initial position, use the `position` attribute. If no position is pro
 To set the initial position in pixels instead of a percentage, use the `position-in-pixels` attribute.

 ```html:preview
-<sl-split-panel position-in-pixels="150">
+<wa-split-panel position-in-pixels="150">
  <div
    slot="start"
    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
@@ -114,16 +114,16 @@ To set the initial position in pixels instead of a percentage, use the `position
  >
    End
  </div>
-</sl-split-panel>
+</wa-split-panel>
 ```

 {% raw %}

 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';

 const App = () => (
-  <SlSplitPanel position="200">
+  <WaSplitPanel position="200">
    <div
      slot="start"
      style={{
@@ -148,7 +148,7 @@ const App = () => (
    >
      End
    </div>
-  </SlSplitPanel>
+  </WaSplitPanel>
 );
 ```

@@ -159,7 +159,7 @@ const App = () => (
 Add the `vertical` attribute to render the split panel in a vertical orientation where the start and end panels are stacked. You also need to set a height when using the vertical orientation.

 ```html:preview
-<sl-split-panel vertical style="height: 400px;">
+<wa-split-panel vertical style="height: 400px;">
  <div
    slot="start"
    style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
@@ -172,16 +172,16 @@ Add the `vertical` attribute to render the split panel in a vertical orientation
  >
    End
  </div>
-</sl-split-panel>
+</wa-split-panel>
 ```

 {% raw %}

 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';

 const App = () => (
-  <SlSplitPanel vertical style={{ height: '400px' }}>
+  <WaSplitPanel vertical style={{ height: '400px' }}>
    <div
      slot="start"
      style={{
@@ -206,7 +206,7 @@ const App = () => (
    >
      End
    </div>
-  </SlSplitPanel>
+  </WaSplitPanel>
 );
 ```

@@ -218,7 +218,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi

 ```html:preview
 <div class="split-panel-snapping">
-  <sl-split-panel snap="100px 50%">
+  <wa-split-panel snap="100px 50%">
    <div
      slot="start"
      style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
@@ -231,7 +231,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
    >
      End
    </div>
-  </sl-split-panel>
+  </wa-split-panel>

  <div class="split-panel-snapping-dots"></div>
 </div>
@@ -266,7 +266,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/split-panel';
+import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';

 const css = `
  .split-panel-snapping {
@@ -297,7 +297,7 @@ const css = `
 const App = () => (
  <>
    <div className="split-panel-snapping">
-      <SlSplitPanel snap="100px 50%">
+      <WaSplitPanel snap="100px 50%">
        <div
          slot="start"
          style={{
@@ -322,7 +322,7 @@ const App = () => (
        >
          End
        </div>
-      </SlSplitPanel>
+      </WaSplitPanel>

      <div className="split-panel-snapping-dots" />
    </div>
@@ -339,7 +339,7 @@ const App = () => (
 Add the `disabled` attribute to prevent the divider from being repositioned.

 ```html:preview
-<sl-split-panel disabled>
+<wa-split-panel disabled>
  <div
    slot="start"
    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
@@ -352,16 +352,16 @@ Add the `disabled` attribute to prevent the divider from being repositioned.
  >
    End
  </div>
-</sl-split-panel>
+</wa-split-panel>
 ```

 {% raw %}

 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';

 const App = () => (
-  <SlSplitPanel disabled>
+  <WaSplitPanel disabled>
    <div
      slot="start"
      style={{
@@ -386,7 +386,7 @@ const App = () => (
    >
      End
    </div>
-  </SlSplitPanel>
+  </WaSplitPanel>
 );
 ```

@@ -400,7 +400,7 @@ Try resizing the example below with each option and notice how the panels respon

 ```html:preview
 <div class="split-panel-primary">
-  <sl-split-panel>
+  <wa-split-panel>
    <div
      slot="start"
      style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
@@ -413,21 +413,21 @@ Try resizing the example below with each option and notice how the panels respon
    >
      End
    </div>
-  </sl-split-panel>
+  </wa-split-panel>

-  <sl-select label="Primary Panel" value="" style="max-width: 200px; margin-top: 1rem;">
-    <sl-option value="">None</sl-option>
-    <sl-option value="start">Start</sl-option>
-    <sl-option value="end">End</sl-option>
-  </sl-select>
+  <wa-select label="Primary Panel" value="" style="max-width: 200px; margin-top: 1rem;">
+    <wa-option value="">None</wa-option>
+    <wa-option value="start">Start</wa-option>
+    <wa-option value="end">End</wa-option>
+  </wa-select>
 </div>

 <script>
  const container = document.querySelector('.split-panel-primary');
-  const splitPanel = container.querySelector('sl-split-panel');
-  const select = container.querySelector('sl-select');
+  const splitPanel = container.querySelector('wa-split-panel');
+  const select = container.querySelector('wa-select');

-  select.addEventListener('sl-change', () => (splitPanel.primary = select.value));
+  select.addEventListener('wa-change', () => (splitPanel.primary = select.value));
 </script>
 ```

@@ -435,16 +435,16 @@ 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/split-panel';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

 const App = () => {
  const [primary, setPrimary] = useState('');

  return (
    <>
-      <SlSplitPanel primary={primary}>
+      <WaSplitPanel primary={primary}>
        <div
          slot="start"
          style={{
@@ -469,18 +469,18 @@ const App = () => {
        >
          End
        </div>
-      </SlSplitPanel>
+      </WaSplitPanel>

-      <SlSelect
+      <WaSelect
        label="Primary Panel"
        value={primary}
        style={{ maxWidth: '200px', marginTop: '1rem' }}
-        onSlChange={event => setPrimary(event.target.value)}
+        onWaChange={event => setPrimary(event.target.value)}
      >
-        <SlMenuItem value="">None</SlMenuItem>
-        <SlMenuItem value="start">Start</SlMenuItem>
-        <SlMenuItem value="end">End</SlMenuItem>
-      </SlSelect>
+        <WaMenuItem value="">None</WaMenuItem>
+        <WaMenuItem value="start">Start</WaMenuItem>
+        <WaMenuItem value="end">End</WaMenuItem>
+      </WaSelect>
    </>
  );
 };
@@ -495,7 +495,7 @@ To set a minimum or maximum size of the primary panel, use the `--min` and `--ma
 This examples demonstrates how you can ensure both panels are at least 150px using `--min`, `--max`, and the `calc()` function.

 ```html:preview
-<sl-split-panel style="--min: 150px; --max: calc(100% - 150px);">
+<wa-split-panel style="--min: 150px; --max: calc(100% - 150px);">
  <div
    slot="start"
    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
@@ -508,16 +508,16 @@ This examples demonstrates how you can ensure both panels are at least 150px usi
  >
    End
  </div>
-</sl-split-panel>
+</wa-split-panel>
 ```

 {% raw %}

 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';

 const App = () => (
-  <SlSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}>
+  <WaSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}>
    <div
      slot="start"
      style={{
@@ -542,7 +542,7 @@ const App = () => (
    >
      End
    </div>
-  </SlSplitPanel>
+  </WaSplitPanel>
 );
 ```

@@ -553,7 +553,7 @@ const App = () => (
 Create complex layouts that can be repositioned independently by nesting split panels.

 ```html:preview
-<sl-split-panel>
+<wa-split-panel>
  <div
    slot="start"
    style="height: 400px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden"
@@ -561,7 +561,7 @@ Create complex layouts that can be repositioned independently by nesting split p
    Start
  </div>
  <div slot="end">
-    <sl-split-panel vertical style="height: 400px;">
+    <wa-split-panel vertical style="height: 400px;">
      <div
        slot="start"
        style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden"
@@ -574,18 +574,18 @@ Create complex layouts that can be repositioned independently by nesting split p
      >
        Bottom
      </div>
-    </sl-split-panel>
+    </wa-split-panel>
  </div>
-</sl-split-panel>
+</wa-split-panel>
 ```

 {% raw %}

 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';

 const App = () => (
-  <SlSplitPanel>
+  <WaSplitPanel>
    <div
      slot="start"
      style={{
@@ -599,7 +599,7 @@ const App = () => (
      Start
    </div>
    <div slot="end">
-      <SlSplitPanel vertical style={{ height: '400px' }}>
+      <WaSplitPanel vertical style={{ height: '400px' }}>
        <div
          slot="start"
          style={{
@@ -624,9 +624,9 @@ const App = () => (
        >
          End
        </div>
-      </SlSplitPanel>
+      </WaSplitPanel>
    </div>
-  </SlSplitPanel>
+  </WaSplitPanel>
 );
 ```

@@ -637,8 +637,8 @@ const App = () => (
 You can target the `divider` part to apply CSS properties to the divider. To add a custom handle, slot an icon into the `divider` slot. When customizing the divider, make sure to think about focus styles for keyboard users.

 ```html:preview
-<sl-split-panel style="--divider-width: 20px;">
-  <sl-icon slot="divider" name="grip-vertical"></sl-icon>
+<wa-split-panel style="--divider-width: 20px;">
+  <wa-icon slot="divider" name="grip-vertical"></wa-icon>
  <div
    slot="start"
    style="
@@ -665,18 +665,18 @@ You can target the `divider` part to apply CSS properties to the divider. To add
  >
    End
  </div>
-</sl-split-panel>
+</wa-split-panel>
 ```

 {% raw %}

 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const App = () => (
-  <SlSplitPanel style={{ '--divider-width': '20px' }}>
-    <SlIcon slot="divider" name="grip-vertical" />
+  <WaSplitPanel style={{ '--divider-width': '20px' }}>
+    <WaIcon slot="divider" name="grip-vertical" />
    <div
      slot="start"
      style={{
@@ -701,7 +701,7 @@ const App = () => (
    >
      End
    </div>
-  </SlSplitPanel>
+  </WaSplitPanel>
 );
 ```

@@ -711,8 +711,8 @@ Here's a more elaborate example that changes the divider's color and width and a

 ```html:preview
 <div class="split-panel-divider">
-  <sl-split-panel>
-    <sl-icon slot="divider" name="grip-vertical"></sl-icon>
+  <wa-split-panel>
+    <wa-icon slot="divider" name="grip-vertical"></wa-icon>
    <div
      slot="start"
      style="
@@ -739,19 +739,19 @@ Here's a more elaborate example that changes the divider's color and width and a
    >
      End
    </div>
-  </sl-split-panel>
+  </wa-split-panel>
 </div>

 <style>
-  .split-panel-divider sl-split-panel {
+  .split-panel-divider wa-split-panel {
    --divider-width: 2px;
  }

-  .split-panel-divider sl-split-panel::part(divider) {
+  .split-panel-divider wa-split-panel::part(divider) {
    background-color: var(--wa-color-red-50);
  }

-  .split-panel-divider sl-icon {
+  .split-panel-divider wa-icon {
    position: absolute;
    border-radius: var(--wa-corners-3x);
    background: var(--wa-color-red-50);
@@ -759,11 +759,11 @@ Here's a more elaborate example that changes the divider's color and width and a
    padding: 0.5rem 0.125rem;
  }

-  .split-panel-divider sl-split-panel::part(divider):focus-visible {
+  .split-panel-divider wa-split-panel::part(divider):focus-visible {
    background-color: var(--wa-color-blue-50);
  }

-  .split-panel-divider sl-split-panel:focus-within sl-icon {
+  .split-panel-divider wa-split-panel:focus-within wa-icon {
    background-color: var(--wa-color-blue-50);
    color: var(--wa-color-white);
  }
@@ -773,19 +773,19 @@ 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/split-panel';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';

 const css = `
-  .split-panel-divider sl-split-panel {
+  .split-panel-divider wa-split-panel {
    --divider-width: 2px;
  }

-  .split-panel-divider sl-split-panel::part(divider) {
+  .split-panel-divider wa-split-panel::part(divider) {
    background-color: var(--wa-color-red-50);
  }

-  .split-panel-divider sl-icon {
+  .split-panel-divider wa-icon {
    position: absolute;
    border-radius: var(--wa-corners-half);
    background: var(--wa-color-red-50);
@@ -793,11 +793,11 @@ const css = `
    padding: .5rem .125rem;
  }

-  .split-panel-divider sl-split-panel::part(divider):focus-visible {
+  .split-panel-divider wa-split-panel::part(divider):focus-visible {
    background-color: var(--wa-color-blue-50);
  }

-  .split-panel-divider sl-split-panel:focus-within sl-icon {
+  .split-panel-divider wa-split-panel:focus-within wa-icon {
    background-color: var(--wa-color-blue-50);
    color: var(--wa-color-white);
  }
@@ -806,8 +806,8 @@ const css = `
 const App = () => (
  <>
    <div className="split-panel-divider">
-      <SlSplitPanel>
-        <SlIcon slot="divider" name="grip-vertical" />
+      <WaSplitPanel>
+        <WaIcon slot="divider" name="grip-vertical" />
        <div
          slot="start"
          style={{
@@ -832,7 +832,7 @@ const App = () => (
        >
          End
        </div>
-      </SlSplitPanel>
+      </WaSplitPanel>
    </div>

    <style>{css}</style>
--- a/docs/pages/components/switch.md
+++ b/docs/pages/components/switch.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-switch>Switch</sl-switch>
+<wa-switch>Switch</wa-switch>
 ```

 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';

-const App = () => <SlSwitch>Switch</SlSwitch>;
+const App = () => <WaSwitch>Switch</WaSwitch>;
 ```

 :::tip
@@ -26,13 +26,13 @@ This component works with standard `<form>` elements. Please refer to the sectio
 Use the `checked` attribute to activate the switch.

 ```html:preview
-<sl-switch checked>Checked</sl-switch>
+<wa-switch checked>Checked</wa-switch>
 ```

 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';

-const App = () => <SlSwitch checked>Checked</SlSwitch>;
+const App = () => <WaSwitch checked>Checked</WaSwitch>;
 ```

 ### Disabled
@@ -40,13 +40,13 @@ const App = () => <SlSwitch checked>Checked</SlSwitch>;
 Use the `disabled` attribute to disable the switch.

 ```html:preview
-<sl-switch disabled>Disabled</sl-switch>
+<wa-switch disabled>Disabled</wa-switch>
 ```

 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';

-const App = () => <SlSwitch disabled>Disabled</SlSwitch>;
+const App = () => <WaSwitch disabled>Disabled</WaSwitch>;
 ```

 ### Sizes
@@ -54,23 +54,23 @@ const App = () => <SlSwitch disabled>Disabled</SlSwitch>;
 Use the `size` attribute to change a switch's size.

 ```html:preview
-<sl-switch size="small">Small</sl-switch>
+<wa-switch size="small">Small</wa-switch>
 <br />
-<sl-switch size="medium">Medium</sl-switch>
+<wa-switch size="medium">Medium</wa-switch>
 <br />
-<sl-switch size="large">Large</sl-switch>
+<wa-switch size="large">Large</wa-switch>
 ```

 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';

 const App = () => (
  <>
-    <SlSwitch size="small">Small</SlSwitch>
+    <WaSwitch size="small">Small</WaSwitch>
    <br />
-    <SlSwitch size="medium">Medium</SlSwitch>
+    <WaSwitch size="medium">Medium</WaSwitch>
    <br />
-    <SlSwitch size="large">Large</SlSwitch>
+    <WaSwitch size="large">Large</WaSwitch>
  </>
 );
 ```
@@ -80,16 +80,16 @@ const App = () => (
 Use the available custom properties to change how the switch is styled.

 ```html:preview
-<sl-switch style="--width: 80px; --height: 40px; --thumb-size: 36px;">Really big</sl-switch>
+<wa-switch style="--width: 80px; --height: 40px; --thumb-size: 36px;">Really big</wa-switch>
 ```

 {% raw %}

 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';

 const App = () => (
-  <SlSwitch
+  <WaSwitch
    style={{
      '--width': '80px',
      '--height': '32px',
--- a/docs/pages/components/tab-group.md
+++ b/docs/pages/components/tab-group.md
@@ -8,44 +8,44 @@ layout: component
 Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-panel). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.

 ```html:preview
-<sl-tab-group>
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+<wa-tab-group>
+  <wa-tab slot="nav" panel="general">General</wa-tab>
+  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
+  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
+  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>

-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
+  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
+  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
+  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
+  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
+</wa-tab-group>
 ```

 ```jsx:react
-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';
+import WaTab from '@shoelace-style/shoelace/dist/react/tab';
+import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';

 const App = () => (
-  <SlTabGroup>
-    <SlTab slot="nav" panel="general">
+  <WaTabGroup>
+    <WaTab slot="nav" panel="general">
      General
-    </SlTab>
-    <SlTab slot="nav" panel="custom">
+    </WaTab>
+    <WaTab slot="nav" panel="custom">
      Custom
-    </SlTab>
-    <SlTab slot="nav" panel="advanced">
+    </WaTab>
+    <WaTab slot="nav" panel="advanced">
      Advanced
-    </SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>
+    </WaTab>
+    <WaTab slot="nav" panel="disabled" disabled>
      Disabled
-    </SlTab>
+    </WaTab>

-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
+    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
+    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
+    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
+    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
+  </WaTabGroup>
 );
 ```

@@ -56,44 +56,44 @@ const App = () => (
 Tabs can be shown on the bottom by setting `placement` to `bottom`.

 ```html:preview
-<sl-tab-group placement="bottom">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+<wa-tab-group placement="bottom">
+  <wa-tab slot="nav" panel="general">General</wa-tab>
+  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
+  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
+  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>

-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
+  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
+  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
+  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
+  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
+</wa-tab-group>
 ```

 ```jsx:react
-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';
+import WaTab from '@shoelace-style/shoelace/dist/react/tab';
+import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';

 const App = () => (
-  <SlTabGroup placement="bottom">
-    <SlTab slot="nav" panel="general">
+  <WaTabGroup placement="bottom">
+    <WaTab slot="nav" panel="general">
      General
-    </SlTab>
-    <SlTab slot="nav" panel="custom">
+    </WaTab>
+    <WaTab slot="nav" panel="custom">
      Custom
-    </SlTab>
-    <SlTab slot="nav" panel="advanced">
+    </WaTab>
+    <WaTab slot="nav" panel="advanced">
      Advanced
-    </SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>
+    </WaTab>
+    <WaTab slot="nav" panel="disabled" disabled>
      Disabled
-    </SlTab>
+    </WaTab>

-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
+    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
+    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
+    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
+    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
+  </WaTabGroup>
 );
 ```

@@ -102,44 +102,44 @@ const App = () => (
 Tabs can be shown on the starting side by setting `placement` to `start`.

 ```html:preview
-<sl-tab-group placement="start">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+<wa-tab-group placement="start">
+  <wa-tab slot="nav" panel="general">General</wa-tab>
+  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
+  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
+  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>

-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
+  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
+  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
+  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
+  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
+</wa-tab-group>
 ```

 ```jsx:react
-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';
+import WaTab from '@shoelace-style/shoelace/dist/react/tab';
+import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';

 const App = () => (
-  <SlTabGroup placement="start">
-    <SlTab slot="nav" panel="general">
+  <WaTabGroup placement="start">
+    <WaTab slot="nav" panel="general">
      General
-    </SlTab>
-    <SlTab slot="nav" panel="custom">
+    </WaTab>
+    <WaTab slot="nav" panel="custom">
      Custom
-    </SlTab>
-    <SlTab slot="nav" panel="advanced">
+    </WaTab>
+    <WaTab slot="nav" panel="advanced">
      Advanced
-    </SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>
+    </WaTab>
+    <WaTab slot="nav" panel="disabled" disabled>
      Disabled
-    </SlTab>
+    </WaTab>

-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
+    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
+    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
+    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
+    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
+  </WaTabGroup>
 );
 ```

@@ -148,44 +148,44 @@ const App = () => (
 Tabs can be shown on the ending side by setting `placement` to `end`.

 ```html:preview
-<sl-tab-group placement="end">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+<wa-tab-group placement="end">
+  <wa-tab slot="nav" panel="general">General</wa-tab>
+  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
+  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
+  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>

-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
+  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
+  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
+  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
+  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
+</wa-tab-group>
 ```

 ```jsx:react
-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';
+import WaTab from '@shoelace-style/shoelace/dist/react/tab';
+import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';

 const App = () => (
-  <SlTabGroup placement="end">
-    <SlTab slot="nav" panel="general">
+  <WaTabGroup placement="end">
+    <WaTab slot="nav" panel="general">
      General
-    </SlTab>
-    <SlTab slot="nav" panel="custom">
+    </WaTab>
+    <WaTab slot="nav" panel="custom">
      Custom
-    </SlTab>
-    <SlTab slot="nav" panel="advanced">
+    </WaTab>
+    <WaTab slot="nav" panel="advanced">
      Advanced
-    </SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>
+    </WaTab>
+    <WaTab slot="nav" panel="disabled" disabled>
      Disabled
-    </SlTab>
+    </WaTab>

-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
+    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
+    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
+    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
+    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
+  </WaTabGroup>
 );
 ```

@@ -194,24 +194,24 @@ const App = () => (
 Add the `closable` attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.

 ```html:preview
-<sl-tab-group class="tabs-closable">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="closable-1" closable>Closable 1</sl-tab>
-  <sl-tab slot="nav" panel="closable-2" closable>Closable 2</sl-tab>
-  <sl-tab slot="nav" panel="closable-3" closable>Closable 3</sl-tab>
+<wa-tab-group class="tabs-closable">
+  <wa-tab slot="nav" panel="general">General</wa-tab>
+  <wa-tab slot="nav" panel="closable-1" closable>Closable 1</wa-tab>
+  <wa-tab slot="nav" panel="closable-2" closable>Closable 2</wa-tab>
+  <wa-tab slot="nav" panel="closable-3" closable>Closable 3</wa-tab>

-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="closable-1">This is the first closable tab panel.</sl-tab-panel>
-  <sl-tab-panel name="closable-2">This is the second closable tab panel.</sl-tab-panel>
-  <sl-tab-panel name="closable-3">This is the third closable tab panel.</sl-tab-panel>
-</sl-tab-group>
+  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
+  <wa-tab-panel name="closable-1">This is the first closable tab panel.</wa-tab-panel>
+  <wa-tab-panel name="closable-2">This is the second closable tab panel.</wa-tab-panel>
+  <wa-tab-panel name="closable-3">This is the third closable tab panel.</wa-tab-panel>
+</wa-tab-group>

 <script>
  const tabGroup = document.querySelector('.tabs-closable');

-  tabGroup.addEventListener('sl-close', async event => {
+  tabGroup.addEventListener('wa-close', async event => {
    const tab = event.target;
-    const panel = tabGroup.querySelector(`sl-tab-panel[name="${tab.panel}"]`);
+    const panel = tabGroup.querySelector(`wa-tab-panel[name="${tab.panel}"]`);

    // Show the previous tab if the tab is currently active
    if (tab.active) {
@@ -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/tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
+import WaTab from '@shoelace-style/shoelace/dist/react/tab';
+import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';

 const App = () => {
  function handleClose(event) {
@@ -238,7 +238,7 @@ const App = () => {
    // would significantly complicate the example.
    //
    const tab = event.target;
-    const tabGroup = tab.closest('sl-tab-group');
+    const tabGroup = tab.closest('wa-tab-group');
    const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`);

    tab.remove();
@@ -246,25 +246,25 @@ const App = () => {
  }

  return (
-    <SlTabGroup className="tabs-closable" onSlClose={handleClose}>
-      <SlTab slot="nav" panel="general">
+    <WaTabGroup className="tabs-closable" onWaClose={handleClose}>
+      <WaTab slot="nav" panel="general">
        General
-      </SlTab>
-      <SlTab slot="nav" panel="closable-1" closable onSlClose={handleClose}>
+      </WaTab>
+      <WaTab slot="nav" panel="closable-1" closable onWaClose={handleClose}>
        Closable 1
-      </SlTab>
-      <SlTab slot="nav" panel="closable-2" closable onSlClose={handleClose}>
+      </WaTab>
+      <WaTab slot="nav" panel="closable-2" closable onWaClose={handleClose}>
        Closable 2
-      </SlTab>
-      <SlTab slot="nav" panel="closable-3" closable onSlClose={handleClose}>
+      </WaTab>
+      <WaTab slot="nav" panel="closable-3" closable onWaClose={handleClose}>
        Closable 3
-      </SlTab>
+      </WaTab>

-      <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-      <SlTabPanel name="closable-1">This is the first closable tab panel.</SlTabPanel>
-      <SlTabPanel name="closable-2">This is the second closable tab panel.</SlTabPanel>
-      <SlTabPanel name="closable-3">This is the third closable tab panel.</SlTabPanel>
-    </SlTabGroup>
+      <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
+      <WaTabPanel name="closable-1">This is the first closable tab panel.</WaTabPanel>
+      <WaTabPanel name="closable-2">This is the second closable tab panel.</WaTabPanel>
+      <WaTabPanel name="closable-3">This is the third closable tab panel.</WaTabPanel>
+    </WaTabGroup>
  );
 };
 ```
@@ -274,140 +274,140 @@ const App = () => {
 When there are more tabs than horizontal space allows, the nav will be scrollable.

 ```html:preview
-<sl-tab-group>
-  <sl-tab slot="nav" panel="tab-1">Tab 1</sl-tab>
-  <sl-tab slot="nav" panel="tab-2">Tab 2</sl-tab>
-  <sl-tab slot="nav" panel="tab-3">Tab 3</sl-tab>
-  <sl-tab slot="nav" panel="tab-4">Tab 4</sl-tab>
-  <sl-tab slot="nav" panel="tab-5">Tab 5</sl-tab>
-  <sl-tab slot="nav" panel="tab-6">Tab 6</sl-tab>
-  <sl-tab slot="nav" panel="tab-7">Tab 7</sl-tab>
-  <sl-tab slot="nav" panel="tab-8">Tab 8</sl-tab>
-  <sl-tab slot="nav" panel="tab-9">Tab 9</sl-tab>
-  <sl-tab slot="nav" panel="tab-10">Tab 10</sl-tab>
-  <sl-tab slot="nav" panel="tab-11">Tab 11</sl-tab>
-  <sl-tab slot="nav" panel="tab-12">Tab 12</sl-tab>
-  <sl-tab slot="nav" panel="tab-13">Tab 13</sl-tab>
-  <sl-tab slot="nav" panel="tab-14">Tab 14</sl-tab>
-  <sl-tab slot="nav" panel="tab-15">Tab 15</sl-tab>
-  <sl-tab slot="nav" panel="tab-16">Tab 16</sl-tab>
-  <sl-tab slot="nav" panel="tab-17">Tab 17</sl-tab>
-  <sl-tab slot="nav" panel="tab-18">Tab 18</sl-tab>
-  <sl-tab slot="nav" panel="tab-19">Tab 19</sl-tab>
-  <sl-tab slot="nav" panel="tab-20">Tab 20</sl-tab>
+<wa-tab-group>
+  <wa-tab slot="nav" panel="tab-1">Tab 1</wa-tab>
+  <wa-tab slot="nav" panel="tab-2">Tab 2</wa-tab>
+  <wa-tab slot="nav" panel="tab-3">Tab 3</wa-tab>
+  <wa-tab slot="nav" panel="tab-4">Tab 4</wa-tab>
+  <wa-tab slot="nav" panel="tab-5">Tab 5</wa-tab>
+  <wa-tab slot="nav" panel="tab-6">Tab 6</wa-tab>
+  <wa-tab slot="nav" panel="tab-7">Tab 7</wa-tab>
+  <wa-tab slot="nav" panel="tab-8">Tab 8</wa-tab>
+  <wa-tab slot="nav" panel="tab-9">Tab 9</wa-tab>
+  <wa-tab slot="nav" panel="tab-10">Tab 10</wa-tab>
+  <wa-tab slot="nav" panel="tab-11">Tab 11</wa-tab>
+  <wa-tab slot="nav" panel="tab-12">Tab 12</wa-tab>
+  <wa-tab slot="nav" panel="tab-13">Tab 13</wa-tab>
+  <wa-tab slot="nav" panel="tab-14">Tab 14</wa-tab>
+  <wa-tab slot="nav" panel="tab-15">Tab 15</wa-tab>
+  <wa-tab slot="nav" panel="tab-16">Tab 16</wa-tab>
+  <wa-tab slot="nav" panel="tab-17">Tab 17</wa-tab>
+  <wa-tab slot="nav" panel="tab-18">Tab 18</wa-tab>
+  <wa-tab slot="nav" panel="tab-19">Tab 19</wa-tab>
+  <wa-tab slot="nav" panel="tab-20">Tab 20</wa-tab>

-  <sl-tab-panel name="tab-1">Tab panel 1</sl-tab-panel>
-  <sl-tab-panel name="tab-2">Tab panel 2</sl-tab-panel>
-  <sl-tab-panel name="tab-3">Tab panel 3</sl-tab-panel>
-  <sl-tab-panel name="tab-4">Tab panel 4</sl-tab-panel>
-  <sl-tab-panel name="tab-5">Tab panel 5</sl-tab-panel>
-  <sl-tab-panel name="tab-6">Tab panel 6</sl-tab-panel>
-  <sl-tab-panel name="tab-7">Tab panel 7</sl-tab-panel>
-  <sl-tab-panel name="tab-8">Tab panel 8</sl-tab-panel>
-  <sl-tab-panel name="tab-9">Tab panel 9</sl-tab-panel>
-  <sl-tab-panel name="tab-10">Tab panel 10</sl-tab-panel>
-  <sl-tab-panel name="tab-11">Tab panel 11</sl-tab-panel>
-  <sl-tab-panel name="tab-12">Tab panel 12</sl-tab-panel>
-  <sl-tab-panel name="tab-13">Tab panel 13</sl-tab-panel>
-  <sl-tab-panel name="tab-14">Tab panel 14</sl-tab-panel>
-  <sl-tab-panel name="tab-15">Tab panel 15</sl-tab-panel>
-  <sl-tab-panel name="tab-16">Tab panel 16</sl-tab-panel>
-  <sl-tab-panel name="tab-17">Tab panel 17</sl-tab-panel>
-  <sl-tab-panel name="tab-18">Tab panel 18</sl-tab-panel>
-  <sl-tab-panel name="tab-19">Tab panel 19</sl-tab-panel>
-  <sl-tab-panel name="tab-20">Tab panel 20</sl-tab-panel>
-</sl-tab-group>
+  <wa-tab-panel name="tab-1">Tab panel 1</wa-tab-panel>
+  <wa-tab-panel name="tab-2">Tab panel 2</wa-tab-panel>
+  <wa-tab-panel name="tab-3">Tab panel 3</wa-tab-panel>
+  <wa-tab-panel name="tab-4">Tab panel 4</wa-tab-panel>
+  <wa-tab-panel name="tab-5">Tab panel 5</wa-tab-panel>
+  <wa-tab-panel name="tab-6">Tab panel 6</wa-tab-panel>
+  <wa-tab-panel name="tab-7">Tab panel 7</wa-tab-panel>
+  <wa-tab-panel name="tab-8">Tab panel 8</wa-tab-panel>
+  <wa-tab-panel name="tab-9">Tab panel 9</wa-tab-panel>
+  <wa-tab-panel name="tab-10">Tab panel 10</wa-tab-panel>
+  <wa-tab-panel name="tab-11">Tab panel 11</wa-tab-panel>
+  <wa-tab-panel name="tab-12">Tab panel 12</wa-tab-panel>
+  <wa-tab-panel name="tab-13">Tab panel 13</wa-tab-panel>
+  <wa-tab-panel name="tab-14">Tab panel 14</wa-tab-panel>
+  <wa-tab-panel name="tab-15">Tab panel 15</wa-tab-panel>
+  <wa-tab-panel name="tab-16">Tab panel 16</wa-tab-panel>
+  <wa-tab-panel name="tab-17">Tab panel 17</wa-tab-panel>
+  <wa-tab-panel name="tab-18">Tab panel 18</wa-tab-panel>
+  <wa-tab-panel name="tab-19">Tab panel 19</wa-tab-panel>
+  <wa-tab-panel name="tab-20">Tab panel 20</wa-tab-panel>
+</wa-tab-group>
 ```

 ```jsx:react
-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';
+import WaTab from '@shoelace-style/shoelace/dist/react/tab';
+import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';

 const App = () => (
-  <SlTabGroup>
-    <SlTab slot="nav" panel="tab-1">
+  <WaTabGroup>
+    <WaTab slot="nav" panel="tab-1">
      Tab 1
-    </SlTab>
-    <SlTab slot="nav" panel="tab-2">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-2">
      Tab 2
-    </SlTab>
-    <SlTab slot="nav" panel="tab-3">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-3">
      Tab 3
-    </SlTab>
-    <SlTab slot="nav" panel="tab-4">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-4">
      Tab 4
-    </SlTab>
-    <SlTab slot="nav" panel="tab-5">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-5">
      Tab 5
-    </SlTab>
-    <SlTab slot="nav" panel="tab-6">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-6">
      Tab 6
-    </SlTab>
-    <SlTab slot="nav" panel="tab-7">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-7">
      Tab 7
-    </SlTab>
-    <SlTab slot="nav" panel="tab-8">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-8">
      Tab 8
-    </SlTab>
-    <SlTab slot="nav" panel="tab-9">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-9">
      Tab 9
-    </SlTab>
-    <SlTab slot="nav" panel="tab-10">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-10">
      Tab 10
-    </SlTab>
-    <SlTab slot="nav" panel="tab-11">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-11">
      Tab 11
-    </SlTab>
-    <SlTab slot="nav" panel="tab-12">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-12">
      Tab 12
-    </SlTab>
-    <SlTab slot="nav" panel="tab-13">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-13">
      Tab 13
-    </SlTab>
-    <SlTab slot="nav" panel="tab-14">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-14">
      Tab 14
-    </SlTab>
-    <SlTab slot="nav" panel="tab-15">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-15">
      Tab 15
-    </SlTab>
-    <SlTab slot="nav" panel="tab-16">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-16">
      Tab 16
-    </SlTab>
-    <SlTab slot="nav" panel="tab-17">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-17">
      Tab 17
-    </SlTab>
-    <SlTab slot="nav" panel="tab-18">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-18">
      Tab 18
-    </SlTab>
-    <SlTab slot="nav" panel="tab-19">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-19">
      Tab 19
-    </SlTab>
-    <SlTab slot="nav" panel="tab-20">
+    </WaTab>
+    <WaTab slot="nav" panel="tab-20">
      Tab 20
-    </SlTab>
+    </WaTab>

-    <SlTabPanel name="tab-1">Tab panel 1</SlTabPanel>
-    <SlTabPanel name="tab-2">Tab panel 2</SlTabPanel>
-    <SlTabPanel name="tab-3">Tab panel 3</SlTabPanel>
-    <SlTabPanel name="tab-4">Tab panel 4</SlTabPanel>
-    <SlTabPanel name="tab-5">Tab panel 5</SlTabPanel>
-    <SlTabPanel name="tab-6">Tab panel 6</SlTabPanel>
-    <SlTabPanel name="tab-7">Tab panel 7</SlTabPanel>
-    <SlTabPanel name="tab-8">Tab panel 8</SlTabPanel>
-    <SlTabPanel name="tab-9">Tab panel 9</SlTabPanel>
-    <SlTabPanel name="tab-10">Tab panel 10</SlTabPanel>
-    <SlTabPanel name="tab-11">Tab panel 11</SlTabPanel>
-    <SlTabPanel name="tab-12">Tab panel 12</SlTabPanel>
-    <SlTabPanel name="tab-13">Tab panel 13</SlTabPanel>
-    <SlTabPanel name="tab-14">Tab panel 14</SlTabPanel>
-    <SlTabPanel name="tab-15">Tab panel 15</SlTabPanel>
-    <SlTabPanel name="tab-16">Tab panel 16</SlTabPanel>
-    <SlTabPanel name="tab-17">Tab panel 17</SlTabPanel>
-    <SlTabPanel name="tab-18">Tab panel 18</SlTabPanel>
-    <SlTabPanel name="tab-19">Tab panel 19</SlTabPanel>
-    <SlTabPanel name="tab-20">Tab panel 20</SlTabPanel>
-  </SlTabGroup>
+    <WaTabPanel name="tab-1">Tab panel 1</WaTabPanel>
+    <WaTabPanel name="tab-2">Tab panel 2</WaTabPanel>
+    <WaTabPanel name="tab-3">Tab panel 3</WaTabPanel>
+    <WaTabPanel name="tab-4">Tab panel 4</WaTabPanel>
+    <WaTabPanel name="tab-5">Tab panel 5</WaTabPanel>
+    <WaTabPanel name="tab-6">Tab panel 6</WaTabPanel>
+    <WaTabPanel name="tab-7">Tab panel 7</WaTabPanel>
+    <WaTabPanel name="tab-8">Tab panel 8</WaTabPanel>
+    <WaTabPanel name="tab-9">Tab panel 9</WaTabPanel>
+    <WaTabPanel name="tab-10">Tab panel 10</WaTabPanel>
+    <WaTabPanel name="tab-11">Tab panel 11</WaTabPanel>
+    <WaTabPanel name="tab-12">Tab panel 12</WaTabPanel>
+    <WaTabPanel name="tab-13">Tab panel 13</WaTabPanel>
+    <WaTabPanel name="tab-14">Tab panel 14</WaTabPanel>
+    <WaTabPanel name="tab-15">Tab panel 15</WaTabPanel>
+    <WaTabPanel name="tab-16">Tab panel 16</WaTabPanel>
+    <WaTabPanel name="tab-17">Tab panel 17</WaTabPanel>
+    <WaTabPanel name="tab-18">Tab panel 18</WaTabPanel>
+    <WaTabPanel name="tab-19">Tab panel 19</WaTabPanel>
+    <WaTabPanel name="tab-20">Tab panel 20</WaTabPanel>
+  </WaTabGroup>
 );
 ```

@@ -416,43 +416,43 @@ const App = () => (
 When focused, keyboard users can press [[Left]] or [[Right]] to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting `activation="manual"` which will require the user to press [[Space]] or [[Enter]] before showing the tab panel (manual activation).

 ```html:preview
-<sl-tab-group activation="manual">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+<wa-tab-group activation="manual">
+  <wa-tab slot="nav" panel="general">General</wa-tab>
+  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
+  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
+  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>

-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
+  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
+  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
+  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
+  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
+</wa-tab-group>
 ```

 ```jsx:react
-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';
+import WaTab from '@shoelace-style/shoelace/dist/react/tab';
+import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';

 const App = () => (
-  <SlTabGroup activation="manual">
-    <SlTab slot="nav" panel="general">
+  <WaTabGroup activation="manual">
+    <WaTab slot="nav" panel="general">
      General
-    </SlTab>
-    <SlTab slot="nav" panel="custom">
+    </WaTab>
+    <WaTab slot="nav" panel="custom">
      Custom
-    </SlTab>
-    <SlTab slot="nav" panel="advanced">
+    </WaTab>
+    <WaTab slot="nav" panel="advanced">
      Advanced
-    </SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>
+    </WaTab>
+    <WaTab slot="nav" panel="disabled" disabled>
      Disabled
-    </SlTab>
+    </WaTab>

-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
+    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
+    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
+    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
+    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
+  </WaTabGroup>
 );
 ```
--- a/docs/pages/components/tab-panel.md
+++ b/docs/pages/components/tab-panel.md
@@ -6,44 +6,44 @@ layout: component
 ---

 ```html:preview
-<sl-tab-group>
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+<wa-tab-group>
+  <wa-tab slot="nav" panel="general">General</wa-tab>
+  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
+  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
+  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>

-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
+  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
+  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
+  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
+  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
+</wa-tab-group>
 ```

 ```jsx:react
-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';
+import WaTab from '@shoelace-style/shoelace/dist/react/tab';
+import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';

 const App = () => (
-  <SlTabGroup>
-    <SlTab slot="nav" panel="general">
+  <WaTabGroup>
+    <WaTab slot="nav" panel="general">
      General
-    </SlTab>
-    <SlTab slot="nav" panel="custom">
+    </WaTab>
+    <WaTab slot="nav" panel="custom">
      Custom
-    </SlTab>
-    <SlTab slot="nav" panel="advanced">
+    </WaTab>
+    <WaTab slot="nav" panel="advanced">
      Advanced
-    </SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>
+    </WaTab>
+    <WaTab slot="nav" panel="disabled" disabled>
      Disabled
-    </SlTab>
+    </WaTab>

-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
+    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
+    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
+    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
+    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
+  </WaTabGroup>
 );
 ```

--- a/docs/pages/components/tab.md
+++ b/docs/pages/components/tab.md
@@ -6,21 +6,21 @@ layout: component
 ---

 ```html:preview
-<sl-tab>Tab</sl-tab>
-<sl-tab active>Active</sl-tab>
-<sl-tab closable>Closable</sl-tab>
-<sl-tab disabled>Disabled</sl-tab>
+<wa-tab>Tab</wa-tab>
+<wa-tab active>Active</wa-tab>
+<wa-tab closable>Closable</wa-tab>
+<wa-tab disabled>Disabled</wa-tab>
 ```

 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import WaTab from '@shoelace-style/shoelace/dist/react/tab';

 const App = () => (
  <>
-    <SlTab>Tab</SlTab>
-    <SlTab active>Active</SlTab>
-    <SlTab closable>Closable</SlTab>
-    <SlTab disabled>Disabled</SlTab>
+    <WaTab>Tab</WaTab>
+    <WaTab active>Active</WaTab>
+    <WaTab closable>Closable</WaTab>
+    <WaTab disabled>Disabled</WaTab>
  </>
 );
 ```
--- a/docs/pages/components/tag.md
+++ b/docs/pages/components/tag.md
@@ -6,23 +6,23 @@ layout: component
 ---

 ```html:preview
-<sl-tag variant="brand">Brand</sl-tag>
-<sl-tag variant="success">Success</sl-tag>
-<sl-tag variant="neutral">Neutral</sl-tag>
-<sl-tag variant="warning">Warning</sl-tag>
-<sl-tag variant="danger">Danger</sl-tag>
+<wa-tag variant="brand">Brand</wa-tag>
+<wa-tag variant="success">Success</wa-tag>
+<wa-tag variant="neutral">Neutral</wa-tag>
+<wa-tag variant="warning">Warning</wa-tag>
+<wa-tag variant="danger">Danger</wa-tag>
 ```

 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/tag';
+import WaTag from '@shoelace-style/shoelace/dist/react/tag';

 const App = () => (
  <>
-    <SlTag variant="brand">Brand</SlTag>
-    <SlTag variant="success">Success</SlTag>
-    <SlTag variant="neutral">Neutral</SlTag>
-    <SlTag variant="warning">Warning</SlTag>
-    <SlTag variant="danger">Danger</SlTag>
+    <WaTag variant="brand">Brand</WaTag>
+    <WaTag variant="success">Success</WaTag>
+    <WaTag variant="neutral">Neutral</WaTag>
+    <WaTag variant="warning">Warning</WaTag>
+    <WaTag variant="danger">Danger</WaTag>
  </>
 );
 ```
@@ -34,19 +34,19 @@ const App = () => (
 Use the `size` attribute to change a tab's size.

 ```html:preview
-<sl-tag size="small">Small</sl-tag>
-<sl-tag size="medium">Medium</sl-tag>
-<sl-tag size="large">Large</sl-tag>
+<wa-tag size="small">Small</wa-tag>
+<wa-tag size="medium">Medium</wa-tag>
+<wa-tag size="large">Large</wa-tag>
 ```

 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/tag';
+import WaTag from '@shoelace-style/shoelace/dist/react/tag';

 const App = () => (
  <>
-    <SlTag size="small">Small</SlTag>
-    <SlTag size="medium">Medium</SlTag>
-    <SlTag size="large">Large</SlTag>
+    <WaTag size="small">Small</WaTag>
+    <WaTag size="medium">Medium</WaTag>
+    <WaTag size="large">Large</WaTag>
  </>
 );
 ```
@@ -56,25 +56,25 @@ const App = () => (
 Use the `pill` attribute to give tabs rounded edges.

 ```html:preview
-<sl-tag size="small" pill>Small</sl-tag>
-<sl-tag size="medium" pill>Medium</sl-tag>
-<sl-tag size="large" pill>Large</sl-tag>
+<wa-tag size="small" pill>Small</wa-tag>
+<wa-tag size="medium" pill>Medium</wa-tag>
+<wa-tag size="large" pill>Large</wa-tag>
 ```

 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/tag';
+import WaTag from '@shoelace-style/shoelace/dist/react/tag';

 const App = () => (
  <>
-    <SlTag size="small" pill>
+    <WaTag size="small" pill>
      Small
-    </SlTag>
-    <SlTag size="medium" pill>
+    </WaTag>
+    <WaTag size="medium" pill>
      Medium
-    </SlTag>
-    <SlTag size="large" pill>
+    </WaTag>
+    <WaTag size="large" pill>
      Large
-    </SlTag>
+    </WaTag>
  </>
 );
 ```
@@ -85,15 +85,15 @@ Use the `removable` attribute to add a remove button to the tag.

 ```html:preview
 <div class="tags-removable">
-  <sl-tag size="small" removable>Small</sl-tag>
-  <sl-tag size="medium" removable>Medium</sl-tag>
-  <sl-tag size="large" removable>Large</sl-tag>
+  <wa-tag size="small" removable>Small</wa-tag>
+  <wa-tag size="medium" removable>Medium</wa-tag>
+  <wa-tag size="large" removable>Large</wa-tag>
 </div>

 <script>
  const div = document.querySelector('.tags-removable');

-  div.addEventListener('sl-remove', event => {
+  div.addEventListener('wa-remove', event => {
    const tag = event.target;
    tag.style.opacity = '0';
    setTimeout(() => (tag.style.opacity = '1'), 2000);
@@ -101,17 +101,17 @@ Use the `removable` attribute to add a remove button to the tag.
 </script>

 <style>
-  .tags-removable sl-tag {
+  .tags-removable wa-tag {
    transition: var(--wa-transition-fast) opacity;
  }
 </style>
 ```

 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/tag';
+import WaTag from '@shoelace-style/shoelace/dist/react/tag';

 const css = `
-  .tags-removable sl-tag {
+  .tags-removable wa-tag {
    transition: var(--wa-transition-fast) opacity;
  }
 `;
@@ -126,17 +126,17 @@ const App = () => {
  return (
    <>
      <div className="tags-removable">
-        <SlTag size="small" removable onSlRemove={handleRemove}>
+        <WaTag size="small" removable onWaRemove={handleRemove}>
          Small
-        </SlTag>
+        </WaTag>

-        <SlTag size="medium" removable onSlRemove={handleRemove}>
+        <WaTag size="medium" removable onWaRemove={handleRemove}>
          Medium
-        </SlTag>
+        </WaTag>

-        <SlTag size="large" removable onSlRemove={handleRemove}>
+        <WaTag size="large" removable onWaRemove={handleRemove}>
          Large
-        </SlTag>
+        </WaTag>
      </div>

      <style>{css}</style>
--- a/docs/pages/components/textarea.md
+++ b/docs/pages/components/textarea.md
@@ -6,13 +6,13 @@ layout: component
 ---

 ```html:preview
-<sl-textarea></sl-textarea>
+<wa-textarea></wa-textarea>
 ```

 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

-const App = () => <SlTextarea />;
+const App = () => <WaTextarea />;
 ```

 :::tip
@@ -26,13 +26,13 @@ This component works with standard `<form>` elements. Please refer to the sectio
 Use the `label` attribute to give the textarea an accessible label. For labels that contain HTML, use the `label` slot instead.

 ```html:preview
-<sl-textarea label="Comments"></sl-textarea>
+<wa-textarea label="Comments"></wa-textarea>
 ```

 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

-const App = () => <SlTextarea label="Comments" />;
+const App = () => <WaTextarea label="Comments" />;
 ```

 ### Help Text
@@ -40,13 +40,13 @@ const App = () => <SlTextarea label="Comments" />;
 Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.

 ```html:preview
-<sl-textarea label="Feedback" help-text="Please tell us what you think."> </sl-textarea>
+<wa-textarea label="Feedback" help-text="Please tell us what you think."> </wa-textarea>
 ```

 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

-const App = () => <SlTextarea label="Feedback" help-text="Please tell us what you think." />;
+const App = () => <WaTextarea label="Feedback" help-text="Please tell us what you think." />;
 ```

 ### Rows
@@ -54,13 +54,13 @@ const App = () => <SlTextarea label="Feedback" help-text="Please tell us what yo
 Use the `rows` attribute to change the number of text rows that get shown.

 ```html:preview
-<sl-textarea rows="2"></sl-textarea>
+<wa-textarea rows="2"></wa-textarea>
 ```

 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

-const App = () => <SlTextarea rows={2} />;
+const App = () => <WaTextarea rows={2} />;
 ```

 ### Placeholders
@@ -68,13 +68,13 @@ const App = () => <SlTextarea rows={2} />;
 Use the `placeholder` attribute to add a placeholder.

 ```html:preview
-<sl-textarea placeholder="Type something"></sl-textarea>
+<wa-textarea placeholder="Type something"></wa-textarea>
 ```

 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

-const App = () => <SlTextarea placeholder="Type something" />;
+const App = () => <WaTextarea placeholder="Type something" />;
 ```

 ### Filled Textareas
@@ -82,13 +82,13 @@ const App = () => <SlTextarea placeholder="Type something" />;
 Add the `filled` attribute to draw a filled textarea.

 ```html:preview
-<sl-textarea placeholder="Type something" filled></sl-textarea>
+<wa-textarea placeholder="Type something" filled></wa-textarea>
 ```

 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

-const App = () => <SlTextarea placeholder="Type something" filled />;
+const App = () => <WaTextarea placeholder="Type something" filled />;
 ```

 ### Disabled
@@ -96,13 +96,13 @@ const App = () => <SlTextarea placeholder="Type something" filled />;
 Use the `disabled` attribute to disable a textarea.

 ```html:preview
-<sl-textarea placeholder="Textarea" disabled></sl-textarea>
+<wa-textarea placeholder="Textarea" disabled></wa-textarea>
 ```

 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

-const App = () => <SlTextarea placeholder="Textarea" disabled />;
+const App = () => <WaTextarea placeholder="Textarea" disabled />;
 ```

 ### Sizes
@@ -110,23 +110,23 @@ const App = () => <SlTextarea placeholder="Textarea" disabled />;
 Use the `size` attribute to change a textarea's size.

 ```html:preview
-<sl-textarea placeholder="Small" size="small"></sl-textarea>
+<wa-textarea placeholder="Small" size="small"></wa-textarea>
 <br />
-<sl-textarea placeholder="Medium" size="medium"></sl-textarea>
+<wa-textarea placeholder="Medium" size="medium"></wa-textarea>
 <br />
-<sl-textarea placeholder="Large" size="large"></sl-textarea>
+<wa-textarea placeholder="Large" size="large"></wa-textarea>
 ```

 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

 const App = () => (
  <>
-    <SlTextarea placeholder="Small" size="small"></SlTextarea>
+    <WaTextarea placeholder="Small" size="small"></WaTextarea>
    <br />
-    <SlTextarea placeholder="Medium" size="medium"></SlTextarea>
+    <WaTextarea placeholder="Medium" size="medium"></WaTextarea>
    <br />
-    <SlTextarea placeholder="Large" size="large"></SlTextarea>
+    <WaTextarea placeholder="Large" size="large"></WaTextarea>
  </>
 );
 ```
@@ -136,13 +136,13 @@ const App = () => (
 By default, textareas can be resized vertically by the user. To prevent resizing, set the `resize` attribute to `none`.

 ```html:preview
-<sl-textarea resize="none"></sl-textarea>
+<wa-textarea resize="none"></wa-textarea>
 ```

 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

-const App = () => <SlTextarea resize="none" />;
+const App = () => <WaTextarea resize="none" />;
 ```

 ### Expand with Content
@@ -150,11 +150,11 @@ const App = () => <SlTextarea resize="none" />;
 Textareas will automatically resize to expand to fit their content when `resize` is set to `auto`.

 ```html:preview
-<sl-textarea resize="auto"></sl-textarea>
+<wa-textarea resize="auto"></wa-textarea>
 ```

 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

-const App = () => <SlTextarea resize="auto" />;
+const App = () => <WaTextarea resize="auto" />;
 ```
--- a/docs/pages/components/tooltip.md
+++ b/docs/pages/components/tooltip.md
@@ -10,19 +10,19 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
 Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.

 ```html:preview
-<sl-tooltip content="This is a tooltip">
-  <sl-button>Hover Me</sl-button>
-</sl-tooltip>
+<wa-tooltip content="This is a tooltip">
+  <wa-button>Hover Me</wa-button>
+</wa-tooltip>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';

 const App = () => (
-  <SlTooltip content="This is a tooltip">
-    <SlButton>Hover Me</SlButton>
-  </SlTooltip>
+  <WaTooltip content="This is a tooltip">
+    <WaButton>Hover Me</WaButton>
+  </WaTooltip>
 );
 ```

@@ -35,61 +35,61 @@ Use the `placement` attribute to set the preferred placement of the tooltip.
 ```html:preview
 <div class="tooltip-placement-example">
  <div class="tooltip-placement-example-row">
-    <sl-tooltip content="top-start" placement="top-start">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="top-start" placement="top-start">
+      <wa-button></wa-button>
+    </wa-tooltip>

-    <sl-tooltip content="top" placement="top">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="top" placement="top">
+      <wa-button></wa-button>
+    </wa-tooltip>

-    <sl-tooltip content="top-end" placement="top-end">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="top-end" placement="top-end">
+      <wa-button></wa-button>
+    </wa-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
-    <sl-tooltip content="left-start" placement="left-start">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="left-start" placement="left-start">
+      <wa-button></wa-button>
+    </wa-tooltip>

-    <sl-tooltip content="right-start" placement="right-start">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="right-start" placement="right-start">
+      <wa-button></wa-button>
+    </wa-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
-    <sl-tooltip content="left" placement="left">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="left" placement="left">
+      <wa-button></wa-button>
+    </wa-tooltip>

-    <sl-tooltip content="right" placement="right">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="right" placement="right">
+      <wa-button></wa-button>
+    </wa-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
-    <sl-tooltip content="left-end" placement="left-end">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="left-end" placement="left-end">
+      <wa-button></wa-button>
+    </wa-tooltip>

-    <sl-tooltip content="right-end" placement="right-end">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="right-end" placement="right-end">
+      <wa-button></wa-button>
+    </wa-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
-    <sl-tooltip content="bottom-start" placement="bottom-start">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="bottom-start" placement="bottom-start">
+      <wa-button></wa-button>
+    </wa-tooltip>

-    <sl-tooltip content="bottom" placement="bottom">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="bottom" placement="bottom">
+      <wa-button></wa-button>
+    </wa-tooltip>

-    <sl-tooltip content="bottom-end" placement="bottom-end">
-      <sl-button></sl-button>
-    </sl-tooltip>
+    <wa-tooltip content="bottom-end" placement="bottom-end">
+      <wa-button></wa-button>
+    </wa-tooltip>
  </div>
 </div>

@@ -105,29 +105,29 @@ Use the `placement` attribute to set the preferred placement of the tooltip.
    clear: both;
  }

-  .tooltip-placement-example sl-button {
+  .tooltip-placement-example wa-button {
    float: left;
    width: 2.5rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
  }

-  .tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
-  .tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
+  .tooltip-placement-example-row:nth-child(1) wa-tooltip:first-child wa-button,
+  .tooltip-placement-example-row:nth-child(5) wa-tooltip:first-child wa-button {
    margin-left: calc(40px + 0.25rem);
  }

-  .tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
-  .tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
-  .tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
+  .tooltip-placement-example-row:nth-child(2) wa-tooltip:nth-child(2) wa-button,
+  .tooltip-placement-example-row:nth-child(3) wa-tooltip:nth-child(2) wa-button,
+  .tooltip-placement-example-row:nth-child(4) wa-tooltip:nth-child(2) wa-button {
    margin-left: calc((40px * 3) + (0.25rem * 3));
  }
 </style>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';

 const css = `
  .tooltip-placement-example {
@@ -140,21 +140,21 @@ const css = `
    clear: both;
  }

-  .tooltip-placement-example sl-button {
+  .tooltip-placement-example wa-button {
    float: left;
    width: 2.5rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
  }

-  .tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
-  .tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
+  .tooltip-placement-example-row:nth-child(1) wa-tooltip:first-child wa-button,
+  .tooltip-placement-example-row:nth-child(5) wa-tooltip:first-child wa-button {
    margin-left: calc(40px + 0.25rem);
  }

-  .tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
-  .tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
-  .tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
+  .tooltip-placement-example-row:nth-child(2) wa-tooltip:nth-child(2) wa-button,
+  .tooltip-placement-example-row:nth-child(3) wa-tooltip:nth-child(2) wa-button,
+  .tooltip-placement-example-row:nth-child(4) wa-tooltip:nth-child(2) wa-button {
    margin-left: calc((40px * 3) + (0.25rem * 3));
  }
 `;
@@ -163,61 +163,61 @@ const App = () => (
  <>
    <div className="tooltip-placement-example">
      <div className="tooltip-placement-example-row">
-        <SlTooltip content="top-start" placement="top-start">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="top-start" placement="top-start">
+          <WaButton />
+        </WaTooltip>

-        <SlTooltip content="top" placement="top">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="top" placement="top">
+          <WaButton />
+        </WaTooltip>

-        <SlTooltip content="top-end" placement="top-end">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="top-end" placement="top-end">
+          <WaButton />
+        </WaTooltip>
      </div>

      <div className="tooltip-placement-example-row">
-        <SlTooltip content="left-start" placement="left-start">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="left-start" placement="left-start">
+          <WaButton />
+        </WaTooltip>

-        <SlTooltip content="right-start" placement="right-start">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="right-start" placement="right-start">
+          <WaButton />
+        </WaTooltip>
      </div>

      <div className="tooltip-placement-example-row">
-        <SlTooltip content="left" placement="left">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="left" placement="left">
+          <WaButton />
+        </WaTooltip>

-        <SlTooltip content="right" placement="right">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="right" placement="right">
+          <WaButton />
+        </WaTooltip>
      </div>

      <div className="tooltip-placement-example-row">
-        <SlTooltip content="left-end" placement="left-end">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="left-end" placement="left-end">
+          <WaButton />
+        </WaTooltip>

-        <SlTooltip content="right-end" placement="right-end">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="right-end" placement="right-end">
+          <WaButton />
+        </WaTooltip>
      </div>

      <div className="tooltip-placement-example-row">
-        <SlTooltip content="bottom-start" placement="bottom-start">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="bottom-start" placement="bottom-start">
+          <WaButton />
+        </WaTooltip>

-        <SlTooltip content="bottom" placement="bottom">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="bottom" placement="bottom">
+          <WaButton />
+        </WaTooltip>

-        <SlTooltip content="bottom-end" placement="bottom-end">
-          <SlButton />
-        </SlTooltip>
+        <WaTooltip content="bottom-end" placement="bottom-end">
+          <WaButton />
+        </WaTooltip>
      </div>
    </div>

@@ -231,19 +231,19 @@ const App = () => (
 Set the `trigger` attribute to `click` to toggle the tooltip on click instead of hover.

 ```html:preview
-<sl-tooltip content="Click again to dismiss" trigger="click">
-  <sl-button>Click to Toggle</sl-button>
-</sl-tooltip>
+<wa-tooltip content="Click again to dismiss" trigger="click">
+  <wa-button>Click to Toggle</wa-button>
+</wa-tooltip>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';

 const App = () => (
-  <SlTooltip content="Click again to dismiss" trigger="click">
-    <SlButton>Click to Toggle</SlButton>
-  </SlTooltip>
+  <WaTooltip content="Click again to dismiss" trigger="click">
+    <WaButton>Click to Toggle</WaButton>
+  </WaTooltip>
 );
 ```

@@ -252,11 +252,11 @@ const App = () => (
 Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown.

 ```html:preview
-<sl-button style="margin-right: 4rem;">Toggle Manually</sl-button>
+<wa-button style="margin-right: 4rem;">Toggle Manually</wa-button>

-<sl-tooltip content="This is an avatar" trigger="manual" class="manual-tooltip">
-  <sl-avatar label="User"></sl-avatar>
-</sl-tooltip>
+<wa-tooltip content="This is an avatar" trigger="manual" class="manual-tooltip">
+  <wa-avatar label="User"></wa-avatar>
+</wa-tooltip>

 <script>
  const tooltip = document.querySelector('.manual-tooltip');
@@ -270,22 +270,22 @@ 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/avatar';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';

 const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
-      <SlButton style={{ marginRight: '4rem' }} onClick={() => setOpen(!open)}>
+      <WaButton style={{ marginRight: '4rem' }} onClick={() => setOpen(!open)}>
        Toggle Manually
-      </SlButton>
+      </WaButton>

-      <SlTooltip open={open} content="This is an avatar" trigger="manual">
-        <SlAvatar />
-      </SlTooltip>
+      <WaTooltip open={open} content="This is an avatar" trigger="manual">
+        <WaAvatar />
+      </WaTooltip>
    </>
  );
 };
@@ -298,33 +298,33 @@ const App = () => {
 You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove them, set the value to `0` as shown below.

 ```html:preview
-<sl-tooltip content="This is a tooltip" style="--wa-tooltip-arrow-size: 0;">
-  <sl-button>No Arrow</sl-button>
-</sl-tooltip>
+<wa-tooltip content="This is a tooltip" style="--wa-tooltip-arrow-size: 0;">
+  <wa-button>No Arrow</wa-button>
+</wa-tooltip>
 ```

 {% raw %}

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';

 const App = () => (
  <div style={{ '--wa-tooltip-arrow-size': '0' }}>
-    <SlTooltip content="This is a tooltip">
-      <SlButton>Above</SlButton>
-    </SlTooltip>
+    <WaTooltip content="This is a tooltip">
+      <WaButton>Above</WaButton>
+    </WaTooltip>

-    <SlTooltip content="This is a tooltip" placement="bottom">
-      <SlButton>Below</SlButton>
-    </SlTooltip>
+    <WaTooltip content="This is a tooltip" placement="bottom">
+      <WaButton>Below</WaButton>
+    </WaTooltip>
  </div>
 );
 ```

 {% endraw %}

-To override it globally, set it in a root block in your stylesheet after the Shoelace stylesheet is loaded.
+To override it globally, set it in a root block in your stylesheet after the Web Awesome stylesheet is loaded.

 ```css
 :root {
@@ -337,25 +337,25 @@ To override it globally, set it in a root block in your stylesheet after the Sho
 Use the `content` slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, in a tooltip.

 ```html:preview
-<sl-tooltip>
+<wa-tooltip>
  <div slot="content">I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!</div>

-  <sl-button>Hover me</sl-button>
-</sl-tooltip>
+  <wa-button>Hover me</wa-button>
+</wa-tooltip>
 ```

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';

 const App = () => (
-  <SlTooltip>
+  <WaTooltip>
    <div slot="content">
      I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
    </div>

-    <SlButton>Hover Me</SlButton>
-  </SlTooltip>
+    <WaButton>Hover Me</WaButton>
+  </WaTooltip>
 );
 ```

@@ -364,21 +364,21 @@ const App = () => (
 Use the `--max-width` custom property to change the width the tooltip can grow to before wrapping occurs.

 ```html:preview
-<sl-tooltip style="--max-width: 80px;" content="This tooltip will wrap after only 80 pixels.">
-  <sl-button>Hover me</sl-button>
-</sl-tooltip>
+<wa-tooltip style="--max-width: 80px;" content="This tooltip will wrap after only 80 pixels.">
+  <wa-button>Hover me</wa-button>
+</wa-tooltip>
 ```

 {% raw %}

 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';

 const App = () => (
-  <SlTooltip style={{ '--max-width': '80px' }} content="This tooltip will wrap after only 80 pixels.">
-    <SlButton>Hover Me</SlButton>
-  </SlTooltip>
+  <WaTooltip style={{ '--max-width': '80px' }} content="This tooltip will wrap after only 80 pixels.">
+    <WaButton>Hover Me</WaButton>
+  </WaTooltip>
 );
 ```

@@ -390,13 +390,13 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto|

 ```html:preview
 <div class="tooltip-hoist">
-  <sl-tooltip content="This is a tooltip">
-    <sl-button>No Hoist</sl-button>
-  </sl-tooltip>
+  <wa-tooltip content="This is a tooltip">
+    <wa-button>No Hoist</wa-button>
+  </wa-tooltip>

-  <sl-tooltip content="This is a tooltip" hoist>
-    <sl-button>Hoist</sl-button>
-  </sl-tooltip>
+  <wa-tooltip content="This is a tooltip" hoist>
+    <wa-button>Hoist</wa-button>
+  </wa-tooltip>
 </div>

 <style>
@@ -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/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';

 const css = `
  .tooltip-hoist {
@@ -425,13 +425,13 @@ const css = `
 const App = () => (
  <>
    <div class="tooltip-hoist">
-      <SlTooltip content="This is a tooltip">
-        <SlButton>No Hoist</SlButton>
-      </SlTooltip>
+      <WaTooltip content="This is a tooltip">
+        <WaButton>No Hoist</WaButton>
+      </WaTooltip>

-      <SlTooltip content="This is a tooltip" hoist>
-        <SlButton>Hoist</SlButton>
-      </SlTooltip>
+      <WaTooltip content="This is a tooltip" hoist>
+        <WaButton>Hoist</WaButton>
+      </WaTooltip>
    </div>

    <style>{css}</style>
--- a/docs/pages/components/tree-item.md
+++ b/docs/pages/components/tree-item.md
@@ -6,34 +6,34 @@ layout: component
 ---

 ```html:preview
-<sl-tree>
-  <sl-tree-item>
+<wa-tree>
+  <wa-tree-item>
    Item 1
-    <sl-tree-item>Item A</sl-tree-item>
-    <sl-tree-item>Item B</sl-tree-item>
-    <sl-tree-item>Item C</sl-tree-item>
-  </sl-tree-item>
-  <sl-tree-item>Item 2</sl-tree-item>
-  <sl-tree-item>Item 3</sl-tree-item>
-</sl-tree>
+    <wa-tree-item>Item A</wa-tree-item>
+    <wa-tree-item>Item B</wa-tree-item>
+    <wa-tree-item>Item C</wa-tree-item>
+  </wa-tree-item>
+  <wa-tree-item>Item 2</wa-tree-item>
+  <wa-tree-item>Item 3</wa-tree-item>
+</wa-tree>
 ```

 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import WaTree from '@shoelace-style/shoelace/dist/react/tree';
+import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';

 const App = () => (
-  <SlTree>
-    <SlTreeItem>
+  <WaTree>
+    <WaTreeItem>
      Item 1
-      <SlTreeItem>Item A</SlTreeItem>
-      <SlTreeItem>Item B</SlTreeItem>
-      <SlTreeItem>Item C</SlTreeItem>
-    </SlTreeItem>
-    <SlTreeItem>Item 2</SlTreeItem>
-    <SlTreeItem>Item 3</SlTreeItem>
-  </SlTree>
+      <WaTreeItem>Item A</WaTreeItem>
+      <WaTreeItem>Item B</WaTreeItem>
+      <WaTreeItem>Item C</WaTreeItem>
+    </WaTreeItem>
+    <WaTreeItem>Item 2</WaTreeItem>
+    <WaTreeItem>Item 3</WaTreeItem>
+  </WaTree>
 );
 ```

@@ -44,44 +44,44 @@ const App = () => (
 A tree item can contain other tree items. This allows the node to be expanded or collapsed by the user.

 ```html:preview
-<sl-tree>
-  <sl-tree-item>
+<wa-tree>
+  <wa-tree-item>
    Item 1
-    <sl-tree-item>
+    <wa-tree-item>
      Item A
-      <sl-tree-item>Item Z</sl-tree-item>
-      <sl-tree-item>Item Y</sl-tree-item>
-      <sl-tree-item>Item X</sl-tree-item>
-    </sl-tree-item>
-    <sl-tree-item>Item B</sl-tree-item>
-    <sl-tree-item>Item C</sl-tree-item>
-  </sl-tree-item>
-  <sl-tree-item>Item 2</sl-tree-item>
-  <sl-tree-item>Item 3</sl-tree-item>
-</sl-tree>
+      <wa-tree-item>Item Z</wa-tree-item>
+      <wa-tree-item>Item Y</wa-tree-item>
+      <wa-tree-item>Item X</wa-tree-item>
+    </wa-tree-item>
+    <wa-tree-item>Item B</wa-tree-item>
+    <wa-tree-item>Item C</wa-tree-item>
+  </wa-tree-item>
+  <wa-tree-item>Item 2</wa-tree-item>
+  <wa-tree-item>Item 3</wa-tree-item>
+</wa-tree>
 ```

 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import WaTree from '@shoelace-style/shoelace/dist/react/tree';
+import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';

 const App = () => (
-  <SlTree>
-    <SlTreeItem>
+  <WaTree>
+    <WaTreeItem>
      Item 1
-      <SlTreeItem>
+      <WaTreeItem>
        Item A
-        <SlTreeItem>Item Z</SlTreeItem>
-        <SlTreeItem>Item Y</SlTreeItem>
-        <SlTreeItem>Item X</SlTreeItem>
-      </SlTreeItem>
-      <SlTreeItem>Item B</SlTreeItem>
-      <SlTreeItem>Item C</SlTreeItem>
-    </SlTreeItem>
-    <SlTreeItem>Item 2</SlTreeItem>
-    <SlTreeItem>Item 3</SlTreeItem>
-  </SlTree>
+        <WaTreeItem>Item Z</WaTreeItem>
+        <WaTreeItem>Item Y</WaTreeItem>
+        <WaTreeItem>Item X</WaTreeItem>
+      </WaTreeItem>
+      <WaTreeItem>Item B</WaTreeItem>
+      <WaTreeItem>Item C</WaTreeItem>
+    </WaTreeItem>
+    <WaTreeItem>Item 2</WaTreeItem>
+    <WaTreeItem>Item 3</WaTreeItem>
+  </WaTree>
 );
 ```

@@ -90,34 +90,34 @@ const App = () => (
 Use the `selected` attribute to select a tree item initially.

 ```html:preview
-<sl-tree>
-  <sl-tree-item selected>
+<wa-tree>
+  <wa-tree-item selected>
    Item 1
-    <sl-tree-item>Item A</sl-tree-item>
-    <sl-tree-item>Item B</sl-tree-item>
-    <sl-tree-item>Item C</sl-tree-item>
-  </sl-tree-item>
-  <sl-tree-item>Item 2</sl-tree-item>
-  <sl-tree-item>Item 3</sl-tree-item>
-</sl-tree>
+    <wa-tree-item>Item A</wa-tree-item>
+    <wa-tree-item>Item B</wa-tree-item>
+    <wa-tree-item>Item C</wa-tree-item>
+  </wa-tree-item>
+  <wa-tree-item>Item 2</wa-tree-item>
+  <wa-tree-item>Item 3</wa-tree-item>
+</wa-tree>
 ```

 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import WaTree from '@shoelace-style/shoelace/dist/react/tree';
+import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';

 const App = () => (
-  <SlTree>
-    <SlTreeItem selected>
+  <WaTree>
+    <WaTreeItem selected>
      Item 1
-      <SlTreeItem>Item A</SlTreeItem>
-      <SlTreeItem>Item B</SlTreeItem>
-      <SlTreeItem>Item C</SlTreeItem>
-    </SlTreeItem>
-    <SlTreeItem>Item 2</SlTreeItem>
-    <SlTreeItem>Item 3</SlTreeItem>
-  </SlTree>
+      <WaTreeItem>Item A</WaTreeItem>
+      <WaTreeItem>Item B</WaTreeItem>
+      <WaTreeItem>Item C</WaTreeItem>
+    </WaTreeItem>
+    <WaTreeItem>Item 2</WaTreeItem>
+    <WaTreeItem>Item 3</WaTreeItem>
+  </WaTree>
 );
 ```

@@ -126,43 +126,43 @@ const App = () => (
 Use the `expanded` attribute to expand a tree item initially.

 ```html:preview
-<sl-tree>
-  <sl-tree-item expanded>
+<wa-tree>
+  <wa-tree-item expanded>
    Item 1
-    <sl-tree-item expanded>
+    <wa-tree-item expanded>
      Item A
-      <sl-tree-item>Item Z</sl-tree-item>
-      <sl-tree-item>Item Y</sl-tree-item>
-      <sl-tree-item>Item X</sl-tree-item>
-    </sl-tree-item>
-    <sl-tree-item>Item B</sl-tree-item>
-    <sl-tree-item>Item C</sl-tree-item>
-  </sl-tree-item>
-  <sl-tree-item>Item 2</sl-tree-item>
-  <sl-tree-item>Item 3</sl-tree-item>
-</sl-tree>
+      <wa-tree-item>Item Z</wa-tree-item>
+      <wa-tree-item>Item Y</wa-tree-item>
+      <wa-tree-item>Item X</wa-tree-item>
+    </wa-tree-item>
+    <wa-tree-item>Item B</wa-tree-item>
+    <wa-tree-item>Item C</wa-tree-item>
+  </wa-tree-item>
+  <wa-tree-item>Item 2</wa-tree-item>
+  <wa-tree-item>Item 3</wa-tree-item>
+</wa-tree>
 ```

 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import WaTree from '@shoelace-style/shoelace/dist/react/tree';
+import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';

 const App = () => (
-  <SlTree>
-    <SlTreeItem expanded>
+  <WaTree>
+    <WaTreeItem expanded>
      Item 1
-      <SlTreeItem expanded>
+      <WaTreeItem expanded>
        Item A
-        <SlTreeItem>Item Z</SlTreeItem>
-        <SlTreeItem>Item Y</SlTreeItem>
-        <SlTreeItem>Item X</SlTreeItem>
-      </SlTreeItem>
-      <SlTreeItem>Item B</SlTreeItem>
-      <SlTreeItem>Item C</SlTreeItem>
-    </SlTreeItem>
-    <SlTreeItem>Item 2</SlTreeItem>
-    <SlTreeItem>Item 3</SlTreeItem>
-  </SlTree>
+        <WaTreeItem>Item Z</WaTreeItem>
+        <WaTreeItem>Item Y</WaTreeItem>
+        <WaTreeItem>Item X</WaTreeItem>
+      </WaTreeItem>
+      <WaTreeItem>Item B</WaTreeItem>
+      <WaTreeItem>Item C</WaTreeItem>
+    </WaTreeItem>
+    <WaTreeItem>Item 2</WaTreeItem>
+    <WaTreeItem>Item 3</WaTreeItem>
+  </WaTree>
 );
 ```
--- a/docs/pages/components/tree.md
+++ b/docs/pages/components/tree.md
@@ -6,68 +6,68 @@ layout: component
 ---

 ```html:preview
-<sl-tree>
-  <sl-tree-item>
+<wa-tree>
+  <wa-tree-item>
    Deciduous
-    <sl-tree-item>Birch</sl-tree-item>
-    <sl-tree-item>
+    <wa-tree-item>Birch</wa-tree-item>
+    <wa-tree-item>
      Maple
-      <sl-tree-item>Field maple</sl-tree-item>
-      <sl-tree-item>Red maple</sl-tree-item>
-      <sl-tree-item>Sugar maple</sl-tree-item>
-    </sl-tree-item>
-    <sl-tree-item>Oak</sl-tree-item>
-  </sl-tree-item>
+      <wa-tree-item>Field maple</wa-tree-item>
+      <wa-tree-item>Red maple</wa-tree-item>
+      <wa-tree-item>Sugar maple</wa-tree-item>
+    </wa-tree-item>
+    <wa-tree-item>Oak</wa-tree-item>
+  </wa-tree-item>

-  <sl-tree-item>
+  <wa-tree-item>
    Coniferous
-    <sl-tree-item>Cedar</sl-tree-item>
-    <sl-tree-item>Pine</sl-tree-item>
-    <sl-tree-item>Spruce</sl-tree-item>
-  </sl-tree-item>
+    <wa-tree-item>Cedar</wa-tree-item>
+    <wa-tree-item>Pine</wa-tree-item>
+    <wa-tree-item>Spruce</wa-tree-item>
+  </wa-tree-item>

-  <sl-tree-item>
+  <wa-tree-item>
    Non-trees
-    <sl-tree-item>Bamboo</sl-tree-item>
-    <sl-tree-item>Cactus</sl-tree-item>
-    <sl-tree-item>Fern</sl-tree-item>
-  </sl-tree-item>
-</sl-tree>
+    <wa-tree-item>Bamboo</wa-tree-item>
+    <wa-tree-item>Cactus</wa-tree-item>
+    <wa-tree-item>Fern</wa-tree-item>
+  </wa-tree-item>
+</wa-tree>
 ```

 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import WaTree from '@shoelace-style/shoelace/dist/react/tree';
+import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';

 const App = () => (
-  <SlTree>
-    <SlTreeItem>
+  <WaTree>
+    <WaTreeItem>
      Deciduous
-      <SlTreeItem>Birch</SlTreeItem>
-      <SlTreeItem>
+      <WaTreeItem>Birch</WaTreeItem>
+      <WaTreeItem>
        Maple
-        <SlTreeItem>Field maple</SlTreeItem>
-        <SlTreeItem>Red maple</SlTreeItem>
-        <SlTreeItem>Sugar maple</SlTreeItem>
-      </SlTreeItem>
-      <SlTreeItem>Oak</SlTreeItem>
-    </SlTreeItem>
+        <WaTreeItem>Field maple</WaTreeItem>
+        <WaTreeItem>Red maple</WaTreeItem>
+        <WaTreeItem>Sugar maple</WaTreeItem>
+      </WaTreeItem>
+      <WaTreeItem>Oak</WaTreeItem>
+    </WaTreeItem>

-    <SlTreeItem>
+    <WaTreeItem>
      Coniferous
-      <SlTreeItem>Cedar</SlTreeItem>
-      <SlTreeItem>Pine</SlTreeItem>
-      <SlTreeItem>Spruce</SlTreeItem>
-    </SlTreeItem>
+      <WaTreeItem>Cedar</WaTreeItem>
+      <WaTreeItem>Pine</WaTreeItem>
+      <WaTreeItem>Spruce</WaTreeItem>
+    </WaTreeItem>

-    <SlTreeItem>
+    <WaTreeItem>
      Non-trees
-      <SlTreeItem>Bamboo</SlTreeItem>
-      <SlTreeItem>Cactus</SlTreeItem>
-      <SlTreeItem>Fern</SlTreeItem>
-    </SlTreeItem>
-  </SlTree>
+      <WaTreeItem>Bamboo</WaTreeItem>
+      <WaTreeItem>Cactus</WaTreeItem>
+      <WaTreeItem>Fern</WaTreeItem>
+    </WaTreeItem>
+  </WaTree>
 );
 ```

@@ -82,36 +82,36 @@ The `selection` attribute lets you change the selection behavior of the tree.
 - Use `leaf` to only allow leaf nodes to be selected.

 ```html:preview
-<sl-select id="selection-mode" value="single" label="Selection">
-  <sl-option value="single">Single</sl-option>
-  <sl-option value="multiple">Multiple</sl-option>
-  <sl-option value="leaf">Leaf</sl-option>
-</sl-select>
+<wa-select id="selection-mode" value="single" label="Selection">
+  <wa-option value="single">Single</wa-option>
+  <wa-option value="multiple">Multiple</wa-option>
+  <wa-option value="leaf">Leaf</wa-option>
+</wa-select>

 <br />

-<sl-tree class="tree-selectable">
-  <sl-tree-item>
+<wa-tree class="tree-selectable">
+  <wa-tree-item>
    Item 1
-    <sl-tree-item>
+    <wa-tree-item>
      Item A
-      <sl-tree-item>Item Z</sl-tree-item>
-      <sl-tree-item>Item Y</sl-tree-item>
-      <sl-tree-item>Item X</sl-tree-item>
-    </sl-tree-item>
-    <sl-tree-item>Item B</sl-tree-item>
-    <sl-tree-item>Item C</sl-tree-item>
-  </sl-tree-item>
-  <sl-tree-item>Item 2</sl-tree-item>
-  <sl-tree-item>Item 3</sl-tree-item>
-</sl-tree>
+      <wa-tree-item>Item Z</wa-tree-item>
+      <wa-tree-item>Item Y</wa-tree-item>
+      <wa-tree-item>Item X</wa-tree-item>
+    </wa-tree-item>
+    <wa-tree-item>Item B</wa-tree-item>
+    <wa-tree-item>Item C</wa-tree-item>
+  </wa-tree-item>
+  <wa-tree-item>Item 2</wa-tree-item>
+  <wa-tree-item>Item 3</wa-tree-item>
+</wa-tree>

 <script>
  const selectionMode = document.querySelector('#selection-mode');
  const tree = document.querySelector('.tree-selectable');

-  selectionMode.addEventListener('sl-change', () => {
-    tree.querySelectorAll('sl-tree-item').forEach(item => (item.selected = false));
+  selectionMode.addEventListener('wa-change', () => {
+    tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
    tree.selection = selectionMode.value;
  });
 </script>
@@ -119,37 +119,37 @@ The `selection` attribute lets you change the selection behavior of the tree.

 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import WaTree from '@shoelace-style/shoelace/dist/react/tree';
+import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';

 const App = () => {
  const [selection, setSelection] = useState('single');

  return (
    <>
-      <SlSelect label="Selection" value={selection} onSlChange={event => setSelection(event.target.value)}>
-        <SlMenuItem value="single">single</SlMenuItem>
-        <SlMenuItem value="multiple">multiple</SlMenuItem>
-        <SlMenuItem value="leaf">leaf</SlMenuItem>
-      </SlSelect>
+      <WaSelect label="Selection" value={selection} onWaChange={event => setSelection(event.target.value)}>
+        <WaMenuItem value="single">single</WaMenuItem>
+        <WaMenuItem value="multiple">multiple</WaMenuItem>
+        <WaMenuItem value="leaf">leaf</WaMenuItem>
+      </WaSelect>

      <br />

-      <SlTree selection={selection}>
-        <SlTreeItem>
+      <WaTree selection={selection}>
+        <WaTreeItem>
          Item 1
-          <SlTreeItem>
+          <WaTreeItem>
            Item A
-            <SlTreeItem>Item Z</SlTreeItem>
-            <SlTreeItem>Item Y</SlTreeItem>
-            <SlTreeItem>Item X</SlTreeItem>
-          </SlTreeItem>
-          <SlTreeItem>Item B</SlTreeItem>
-          <SlTreeItem>Item C</SlTreeItem>
-        </SlTreeItem>
-        <SlTreeItem>Item 2</SlTreeItem>
-        <SlTreeItem>Item 3</SlTreeItem>
-      </SlTree>
+            <WaTreeItem>Item Z</WaTreeItem>
+            <WaTreeItem>Item Y</WaTreeItem>
+            <WaTreeItem>Item X</WaTreeItem>
+          </WaTreeItem>
+          <WaTreeItem>Item B</WaTreeItem>
+          <WaTreeItem>Item C</WaTreeItem>
+        </WaTreeItem>
+        <WaTreeItem>Item 2</WaTreeItem>
+        <WaTreeItem>Item 3</WaTreeItem>
+      </WaTree>
    </>
  );
 };
@@ -160,33 +160,33 @@ const App = () => {
 Indent guides can be drawn by setting `--indent-guide-width`. You can also change the color, offset, and style, using `--indent-guide-color`, `--indent-guide-style`, and `--indent-guide-offset`, respectively.

 ```html:preview
-<sl-tree class="tree-with-lines">
-  <sl-tree-item expanded>
+<wa-tree class="tree-with-lines">
+  <wa-tree-item expanded>
    Deciduous
-    <sl-tree-item>Birch</sl-tree-item>
-    <sl-tree-item expanded>
+    <wa-tree-item>Birch</wa-tree-item>
+    <wa-tree-item expanded>
      Maple
-      <sl-tree-item>Field maple</sl-tree-item>
-      <sl-tree-item>Red maple</sl-tree-item>
-      <sl-tree-item>Sugar maple</sl-tree-item>
-    </sl-tree-item>
-    <sl-tree-item>Oak</sl-tree-item>
-  </sl-tree-item>
+      <wa-tree-item>Field maple</wa-tree-item>
+      <wa-tree-item>Red maple</wa-tree-item>
+      <wa-tree-item>Sugar maple</wa-tree-item>
+    </wa-tree-item>
+    <wa-tree-item>Oak</wa-tree-item>
+  </wa-tree-item>

-  <sl-tree-item>
+  <wa-tree-item>
    Coniferous
-    <sl-tree-item>Cedar</sl-tree-item>
-    <sl-tree-item>Pine</sl-tree-item>
-    <sl-tree-item>Spruce</sl-tree-item>
-  </sl-tree-item>
+    <wa-tree-item>Cedar</wa-tree-item>
+    <wa-tree-item>Pine</wa-tree-item>
+    <wa-tree-item>Spruce</wa-tree-item>
+  </wa-tree-item>

-  <sl-tree-item>
+  <wa-tree-item>
    Non-trees
-    <sl-tree-item>Bamboo</sl-tree-item>
-    <sl-tree-item>Cactus</sl-tree-item>
-    <sl-tree-item>Fern</sl-tree-item>
-  </sl-tree-item>
-</sl-tree>
+    <wa-tree-item>Bamboo</wa-tree-item>
+    <wa-tree-item>Cactus</wa-tree-item>
+    <wa-tree-item>Fern</wa-tree-item>
+  </wa-tree-item>
+</wa-tree>

 <style>
  .tree-with-lines {
@@ -199,37 +199,37 @@ 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/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import WaTree from '@shoelace-style/shoelace/dist/react/tree';
+import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';

 const App = () => (
-  <SlTree class="tree-with-lines" style={{ '--indent-guide-width': '1px' }}>
-    <SlTreeItem expanded>
+  <WaTree class="tree-with-lines" style={{ '--indent-guide-width': '1px' }}>
+    <WaTreeItem expanded>
      Deciduous
-      <SlTreeItem>Birch</SlTreeItem>
-      <SlTreeItem expanded>
+      <WaTreeItem>Birch</WaTreeItem>
+      <WaTreeItem expanded>
        Maple
-        <SlTreeItem>Field maple</SlTreeItem>
-        <SlTreeItem>Red maple</SlTreeItem>
-        <SlTreeItem>Sugar maple</SlTreeItem>
-      </SlTreeItem>
-      <SlTreeItem>Oak</SlTreeItem>
-    </SlTreeItem>
+        <WaTreeItem>Field maple</WaTreeItem>
+        <WaTreeItem>Red maple</WaTreeItem>
+        <WaTreeItem>Sugar maple</WaTreeItem>
+      </WaTreeItem>
+      <WaTreeItem>Oak</WaTreeItem>
+    </WaTreeItem>

-    <SlTreeItem>
+    <WaTreeItem>
      Coniferous
-      <SlTreeItem>Cedar</SlTreeItem>
-      <SlTreeItem>Pine</SlTreeItem>
-      <SlTreeItem>Spruce</SlTreeItem>
-    </SlTreeItem>
+      <WaTreeItem>Cedar</WaTreeItem>
+      <WaTreeItem>Pine</WaTreeItem>
+      <WaTreeItem>Spruce</WaTreeItem>
+    </WaTreeItem>

-    <SlTreeItem>
+    <WaTreeItem>
      Non-trees
-      <SlTreeItem>Bamboo</SlTreeItem>
-      <SlTreeItem>Cactus</SlTreeItem>
-      <SlTreeItem>Fern</SlTreeItem>
-    </SlTreeItem>
-  </SlTree>
+      <WaTreeItem>Bamboo</WaTreeItem>
+      <WaTreeItem>Cactus</WaTreeItem>
+      <WaTreeItem>Fern</WaTreeItem>
+    </WaTreeItem>
+  </WaTree>
 );
 ```

@@ -237,25 +237,25 @@ const App = () => (

 ### Lazy Loading

-Use the `lazy` attribute on a tree item to indicate that the content is not yet present and will be loaded later. When the user tries to expand the node, the `loading` state is set to `true` and the `sl-lazy-load` event will be emitted to allow you to load data asynchronously. The item will remain in a loading state until its content is changed.
+Use the `lazy` attribute on a tree item to indicate that the content is not yet present and will be loaded later. When the user tries to expand the node, the `loading` state is set to `true` and the `wa-lazy-load` event will be emitted to allow you to load data asynchronously. The item will remain in a loading state until its content is changed.

 If you want to disable this behavior after the first load, simply remove the `lazy` attribute and, on the next expand, the existing content will be shown instead.

 ```html:preview
-<sl-tree>
-  <sl-tree-item lazy>Available Trees</sl-tree-item>
-</sl-tree>
+<wa-tree>
+  <wa-tree-item lazy>Available Trees</wa-tree-item>
+</wa-tree>

 <script type="module">
-  const lazyItem = document.querySelector('sl-tree-item[lazy]');
+  const lazyItem = document.querySelector('wa-tree-item[lazy]');

-  lazyItem.addEventListener('sl-lazy-load', () => {
+  lazyItem.addEventListener('wa-lazy-load', () => {
    // Simulate asynchronous loading
    setTimeout(() => {
      const subItems = ['Birch', 'Cedar', 'Maple', 'Pine'];

      for (const item of subItems) {
-        const treeItem = document.createElement('sl-tree-item');
+        const treeItem = document.createElement('wa-tree-item');
        treeItem.innerText = item;
        lazyItem.append(treeItem);
      }
@@ -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/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import WaTree from '@shoelace-style/shoelace/dist/react/tree';
+import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';

 const App = () => {
  const [childItems, setChildItems] = useState([]);
@@ -286,14 +286,14 @@ const App = () => {
  };

  return (
-    <SlTree>
-      <SlTreeItem lazy={lazy} onSlLazyLoad={handleLazyLoad}>
+    <WaTree>
+      <WaTreeItem lazy={lazy} onWaLazyLoad={handleLazyLoad}>
        Available Trees
        {childItems.map(item => (
-          <SlTreeItem>{item}</SlTreeItem>
+          <WaTreeItem>{item}</WaTreeItem>
        ))}
-      </SlTreeItem>
-    </SlTree>
+      </WaTreeItem>
+    </WaTree>
  );
 };
 ```
@@ -303,39 +303,39 @@ const App = () => {
 Use the `expand-icon` and `collapse-icon` slots to change the expand and collapse icons, respectively. To disable the animation, override the `rotate` property on the `expand-button` part as shown below.

 ```html:preview
-<sl-tree class="custom-icons">
-  <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
-  <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
+<wa-tree class="custom-icons">
+  <wa-icon name="plus-square" slot="expand-icon"></wa-icon>
+  <wa-icon name="dash-square" slot="collapse-icon"></wa-icon>

-  <sl-tree-item>
+  <wa-tree-item>
    Deciduous
-    <sl-tree-item>Birch</sl-tree-item>
-    <sl-tree-item>
+    <wa-tree-item>Birch</wa-tree-item>
+    <wa-tree-item>
      Maple
-      <sl-tree-item>Field maple</sl-tree-item>
-      <sl-tree-item>Red maple</sl-tree-item>
-      <sl-tree-item>Sugar maple</sl-tree-item>
-    </sl-tree-item>
-    <sl-tree-item>Oak</sl-tree-item>
-  </sl-tree-item>
+      <wa-tree-item>Field maple</wa-tree-item>
+      <wa-tree-item>Red maple</wa-tree-item>
+      <wa-tree-item>Sugar maple</wa-tree-item>
+    </wa-tree-item>
+    <wa-tree-item>Oak</wa-tree-item>
+  </wa-tree-item>

-  <sl-tree-item>
+  <wa-tree-item>
    Coniferous
-    <sl-tree-item>Cedar</sl-tree-item>
-    <sl-tree-item>Pine</sl-tree-item>
-    <sl-tree-item>Spruce</sl-tree-item>
-  </sl-tree-item>
+    <wa-tree-item>Cedar</wa-tree-item>
+    <wa-tree-item>Pine</wa-tree-item>
+    <wa-tree-item>Spruce</wa-tree-item>
+  </wa-tree-item>

-  <sl-tree-item>
+  <wa-tree-item>
    Non-trees
-    <sl-tree-item>Bamboo</sl-tree-item>
-    <sl-tree-item>Cactus</sl-tree-item>
-    <sl-tree-item>Fern</sl-tree-item>
-  </sl-tree-item>
-</sl-tree>
+    <wa-tree-item>Bamboo</wa-tree-item>
+    <wa-tree-item>Cactus</wa-tree-item>
+    <wa-tree-item>Fern</wa-tree-item>
+  </wa-tree-item>
+</wa-tree>

 <style>
-  .custom-icons sl-tree-item::part(expand-button) {
+  .custom-icons wa-tree-item::part(expand-button) {
    /* Disable the expand/collapse animation */
    rotate: none;
  }
@@ -344,40 +344,40 @@ 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/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import WaTree from '@shoelace-style/shoelace/dist/react/tree';
+import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';

 const App = () => (
-  <SlTree>
-    <SlIcon name="plus-square" slot="expand-icon"></SlIcon>
-    <SlIcon name="dash-square" slot="collapse-icon"></SlIcon>
+  <WaTree>
+    <WaIcon name="plus-square" slot="expand-icon"></WaIcon>
+    <WaIcon name="dash-square" slot="collapse-icon"></WaIcon>

-    <SlTreeItem>
+    <WaTreeItem>
      Deciduous
-      <SlTreeItem>Birch</SlTreeItem>
-      <SlTreeItem>
+      <WaTreeItem>Birch</WaTreeItem>
+      <WaTreeItem>
        Maple
-        <SlTreeItem>Field maple</SlTreeItem>
-        <SlTreeItem>Red maple</SlTreeItem>
-        <SlTreeItem>Sugar maple</SlTreeItem>
-      </SlTreeItem>
-      <SlTreeItem>Oak</SlTreeItem>
-    </SlTreeItem>
+        <WaTreeItem>Field maple</WaTreeItem>
+        <WaTreeItem>Red maple</WaTreeItem>
+        <WaTreeItem>Sugar maple</WaTreeItem>
+      </WaTreeItem>
+      <WaTreeItem>Oak</WaTreeItem>
+    </WaTreeItem>

-    <SlTreeItem>
+    <WaTreeItem>
      Coniferous
-      <SlTreeItem>Cedar</SlTreeItem>
-      <SlTreeItem>Pine</SlTreeItem>
-      <SlTreeItem>Spruce</SlTreeItem>
-    </SlTreeItem>
+      <WaTreeItem>Cedar</WaTreeItem>
+      <WaTreeItem>Pine</WaTreeItem>
+      <WaTreeItem>Spruce</WaTreeItem>
+    </WaTreeItem>

-    <SlTreeItem>
+    <WaTreeItem>
      Non-trees
-      <SlTreeItem>Bamboo</SlTreeItem>
-      <SlTreeItem>Cactus</SlTreeItem>
-      <SlTreeItem>Fern</SlTreeItem>
-    </SlTreeItem>
-  </SlTree>
+      <WaTreeItem>Bamboo</WaTreeItem>
+      <WaTreeItem>Cactus</WaTreeItem>
+      <WaTreeItem>Fern</WaTreeItem>
+    </WaTreeItem>
+  </WaTree>
 );
 ```

@@ -386,91 +386,91 @@ const App = () => (
 Decorative icons can be used before labels to provide hints for each node.

 ```html:preview
-<sl-tree class="tree-with-icons">
-  <sl-tree-item expanded>
-    <sl-icon name="folder"></sl-icon>
+<wa-tree class="tree-with-icons">
+  <wa-tree-item expanded>
+    <wa-icon name="folder"></wa-icon>
    Documents

-    <sl-tree-item>
-      <sl-icon name="folder"> </sl-icon>
+    <wa-tree-item>
+      <wa-icon name="folder"> </wa-icon>
      Photos
-      <sl-tree-item>
-        <sl-icon name="image"></sl-icon>
+      <wa-tree-item>
+        <wa-icon name="image"></wa-icon>
        birds.jpg
-      </sl-tree-item>
-      <sl-tree-item>
-        <sl-icon name="image"></sl-icon>
+      </wa-tree-item>
+      <wa-tree-item>
+        <wa-icon name="image"></wa-icon>
        kitten.jpg
-      </sl-tree-item>
-      <sl-tree-item>
-        <sl-icon name="image"></sl-icon>
+      </wa-tree-item>
+      <wa-tree-item>
+        <wa-icon name="image"></wa-icon>
        puppy.jpg
-      </sl-tree-item>
-    </sl-tree-item>
+      </wa-tree-item>
+    </wa-tree-item>

-    <sl-tree-item>
-      <sl-icon name="folder"></sl-icon>
+    <wa-tree-item>
+      <wa-icon name="folder"></wa-icon>
      Writing
-      <sl-tree-item>
-        <sl-icon name="file"></sl-icon>
+      <wa-tree-item>
+        <wa-icon name="file"></wa-icon>
        draft.txt
-      </sl-tree-item>
-      <sl-tree-item>
-        <sl-icon name="file-pdf"></sl-icon>
+      </wa-tree-item>
+      <wa-tree-item>
+        <wa-icon name="file-pdf"></wa-icon>
        final.pdf
-      </sl-tree-item>
-      <sl-tree-item>
-        <sl-icon name="file-bar-graph"></sl-icon>
+      </wa-tree-item>
+      <wa-tree-item>
+        <wa-icon name="file-bar-graph"></wa-icon>
        sales.xls
-      </sl-tree-item>
-    </sl-tree-item>
-  </sl-tree-item>
-</sl-tree>
+      </wa-tree-item>
+    </wa-tree-item>
+  </wa-tree-item>
+</wa-tree>
 ```

 ```jsx:react
-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';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import WaTree from '@shoelace-style/shoelace/dist/react/tree';
+import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';

 const App = () => {
  return (
-    <SlTree class="tree-with-icons">
-      <SlTreeItem expanded>
-        <SlIcon name="folder" />
+    <WaTree class="tree-with-icons">
+      <WaTreeItem expanded>
+        <WaIcon name="folder" />
        Root
-        <SlTreeItem>
-          <SlIcon name="folder" />
-          Folder 1<SlTreeItem>
-            <SlIcon name="files" />
+        <WaTreeItem>
+          <WaIcon name="folder" />
+          Folder 1<WaTreeItem>
+            <WaIcon name="files" />
            File 1 - 1
-          </SlTreeItem>
-          <SlTreeItem disabled>
-            <SlIcon name="files" />
+          </WaTreeItem>
+          <WaTreeItem disabled>
+            <WaIcon name="files" />
            File 1 - 2
-          </SlTreeItem>
-          <SlTreeItem>
-            <SlIcon name="files" />
+          </WaTreeItem>
+          <WaTreeItem>
+            <WaIcon name="files" />
            File 1 - 3
-          </SlTreeItem>
-        </SlTreeItem>
-        <SlTreeItem>
-          <SlIcon name="files" />
-          Folder 2<SlTreeItem>
-            <SlIcon name="files" />
+          </WaTreeItem>
+        </WaTreeItem>
+        <WaTreeItem>
+          <WaIcon name="files" />
+          Folder 2<WaTreeItem>
+            <WaIcon name="files" />
            File 2 - 1
-          </SlTreeItem>
-          <SlTreeItem>
-            <SlIcon name="files" />
+          </WaTreeItem>
+          <WaTreeItem>
+            <WaIcon name="files" />
            File 2 - 2
-          </SlTreeItem>
-        </SlTreeItem>
-        <SlTreeItem>
-          <SlIcon name="files" />
+          </WaTreeItem>
+        </WaTreeItem>
+        <WaTreeItem>
+          <WaIcon name="files" />
          File 1
-        </SlTreeItem>
-      </SlTreeItem>
-    </SlTree>
+        </WaTreeItem>
+      </WaTreeItem>
+    </WaTree>
  );
 };
 ```
--- a/docs/pages/components/visually-hidden.md
+++ b/docs/pages/components/visually-hidden.md
@@ -11,9 +11,9 @@ Since visually hidden content can receive focus when tabbing, the element will b

 ```html:preview
 <div style="min-height: 1.875rem;">
-  <sl-visually-hidden>
+  <wa-visually-hidden>
    <a href="#">Skip to main content</a>
-  </sl-visually-hidden>
+  </wa-visually-hidden>
 </div>
 ```

@@ -26,8 +26,8 @@ In this example, the link will open a new window. Screen readers will announce "
 ```html:preview
 <a href="https://example.com/" target="_blank">
  Visit External Page
-  <sl-icon name="box-arrow-up-right"></sl-icon>
-  <sl-visually-hidden>opens in a new window</sl-visually-hidden>
+  <wa-icon name="box-arrow-up-right"></wa-icon>
+  <wa-visually-hidden>opens in a new window</wa-visually-hidden>
 </a>
 ```

@@ -36,11 +36,11 @@ In this example, the link will open a new window. Screen readers will announce "
 Adding a label may seem redundant at times, but they're very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content that will be announced by assistive devices such as screen readers.

 ```html:preview
-<sl-card style="width: 100%; max-width: 360px;">
+<wa-card style="width: 100%; max-width: 360px;">
  <header>
-    <sl-visually-hidden>Personal Info</sl-visually-hidden>
+    <wa-visually-hidden>Personal Info</wa-visually-hidden>
  </header>
-  <sl-input label="Name" style="margin-bottom: .5rem;"></sl-input>
-  <sl-input label="Email" type="email"></sl-input>
-</sl-card>
+  <wa-input label="Name" style="margin-bottom: .5rem;"></wa-input>
+  <wa-input label="Email" type="email"></wa-input>
+</wa-card>
 ```
--- a/docs/pages/frameworks/angular.md
+++ b/docs/pages/frameworks/angular.md
@@ -1,16 +1,16 @@
 ---
 meta:
  title: Angular
-  description: Tips for using Shoelace in your Angular app.
+  description: Tips for using Web Awesome in your Angular app.
 ---

 # Angular

-Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custom elements, so you can use Shoelace in your Angular apps with ease.
+Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custom elements, so you can use Web Awesome in your Angular apps with ease.

 ## Installation

-To add Shoelace to your Angular app, install the package from npm.
+To add Web Awesome to your Angular app, install the package from npm.

 ```bash
 npm install @shoelace-style/shoelace
@@ -19,7 +19,7 @@ npm install @shoelace-style/shoelace
 Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.

 ```jsx
-import '@shoelace-style/shoelace/%NPMDIR%/themes/light.css';
+import '@shoelace-style/shoelace/%NPMDIR%/themes/default.css';
 import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path';

 setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
@@ -49,20 +49,20 @@ import { AppComponent } from './app.component';
 export class AppModule {}
 ```

-## Reference Shoelace components in your Angular component code
+## Reference Web Awesome components in your Angular component code

 ```js
-import { SlDrawer } from '@shoelace-style/shoelace';
+import { WaDrawer } from '@shoelace-style/shoelace';

@Component({
  selector: 'app-drawer-example',
-  template: '<div id="page"><button (click)="showDrawer()">Show drawer</button><sl-drawer #drawer label="Drawer" class="drawer-focus" style="--size: 50vw"><p>Drawer content</p></sl-drawer></div>'
+  template: '<div id="page"><button (click)="showDrawer()">Show drawer</button><wa-drawer #drawer label="Drawer" class="drawer-focus" style="--size: 50vw"><p>Drawer content</p></wa-drawer></div>'
 })
 export class DrawerExampleComponent implements OnInit {

  // use @ViewChild to get a reference to the #drawer element within component template
  @ViewChild('drawer')
-  drawer?: ElementRef<SlDrawer>;
+  drawer?: ElementRef<WaDrawer>;

  ...

@@ -75,14 +75,14 @@ export class DrawerExampleComponent implements OnInit {
  ...

  showDrawer() {
-    // use nativeElement to access Shoelace components
+    // use nativeElement to access Web Awesome components
    this.drawer?.nativeElement.show();
  }
 }
 ```

-Now you can start using Shoelace components in your app!
+Now you can start using Web Awesome components in your app!

 :::tip
-Are you using Shoelace with Angular? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/angular.md)
+Are you using Web Awesome with Angular? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/angular.md)
 :::
--- a/docs/pages/frameworks/react.md
+++ b/docs/pages/frameworks/react.md
@@ -1,16 +1,16 @@
 ---
 meta:
  title: React
-  description: Tips for using Shoelace in your React app.
+  description: Tips for using Web Awesome in your React app.
 ---

 # React

-Shoelace offers a React version of every component to provide an idiomatic experience for React users. You can easily toggle between HTML and React examples throughout the documentation.
+Web Awesome offers a React version of every component to provide an idiomatic experience for React users. You can easily toggle between HTML and React examples throughout the documentation.

 ## Installation

-To add Shoelace to your React app, install the package from npm.
+To add Web Awesome to your React app, install the package from npm.

 ```bash
 npm install @shoelace-style/shoelace
@@ -20,7 +20,7 @@ Next, [include a theme](/getting-started/themes) and set the [base path](/gettin

 ```jsx
 // App.jsx
-import '@shoelace-style/shoelace/%NPMDIR%/themes/light.css';
+import '@shoelace-style/shoelace/%NPMDIR%/themes/default.css';
 import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path';

 setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
@@ -36,12 +36,12 @@ Now you can start using components!

 ### Importing Components

-Every Shoelace component is available to import as a React component. Note that we're importing the `<SlButton>` _React component_ instead of the `<sl-button>` _custom element_ in the example below.
+Every Web Awesome component is available to import as a React component. Note that we're importing the `<WaButton>` _React component_ instead of the `<wa-button>` _custom element_ in the example below.

 ```jsx
-import SlButton from '@shoelace-style/shoelace/%NPMDIR%/react/button';
+import WaButton from '@shoelace-style/shoelace/%NPMDIR%/react/button';

-const MyComponent = () => <SlButton variant="brand">Click me</SlButton>;
+const MyComponent = () => <WaButton variant="brand">Click me</WaButton>;

 export default MyComponent;
 ```
@@ -51,32 +51,32 @@ export default MyComponent;
 Previously, it was recommended to import from a single entrypoint like so:

 ```jsx
-import { SlButton } from '@shoelace-style/shoelace/%NPMDIR%/react';
+import { WaButton } from '@shoelace-style/shoelace/%NPMDIR%/react';
 ```

-However, tree-shaking extra Shoelace components proved to be a challenge. As a result, we now recommend cherry-picking components you want to use, rather than importing from a single entrypoint.
+However, tree-shaking extra Web Awesome components proved to be a challenge. As a result, we now recommend cherry-picking components you want to use, rather than importing from a single entrypoint.

 ```diff
- import { SlButton } from '@shoelace-style/shoelace/%NPMDIR%/react';
-+ import SlButton from '@shoelace-style/shoelace/%NPMDIR%/react/button';
+- import { WaButton } from '@shoelace-style/shoelace/%NPMDIR%/react';
+ import WaButton from '@shoelace-style/shoelace/%NPMDIR%/react/button';
 ```

 You can find a copy + paste import for each component in the "importing" section of its documentation.

 ### Event Handling

-Many Shoelace components emit [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). For example, the [input component](/components/input) emits the `sl-input` event when it receives input. In React, you can listen for the event using `onSlInput`.
+Many Web Awesome components emit [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). For example, the [input component](/components/input) emits the `wa-input` event when it receives input. In React, you can listen for the event using `onWaInput`.

 Here's how you can bind the input's value to a state variable.

 ```jsx
 import { useState } from 'react';
-import SlInput from '@shoelace-style/shoelace/%NPMDIR%/react/input';
+import WaInput from '@shoelace-style/shoelace/%NPMDIR%/react/input';

 function MyComponent() {
  const [value, setValue] = useState('');

-  return <SlInput value={value} onSlInput={event => setValue(event.target.value)} />;
+  return <WaInput value={value} onWaInput={event => setValue(event.target.value)} />;
 }

 export default MyComponent;
@@ -86,13 +86,13 @@ If you're using TypeScript, it's important to note that `event.target` will be a

 ```tsx
 import { useState } from 'react';
-import SlInput from '@shoelace-style/shoelace/%NPMDIR%/react/input';
-import type SlInputElement from '@shoelace-style/shoelace/%NPMDIR%/components/input/input';
+import WaInput from '@shoelace-style/shoelace/%NPMDIR%/react/input';
+import type WaInputElement from '@shoelace-style/shoelace/%NPMDIR%/components/input/input';

 function MyComponent() {
  const [value, setValue] = useState('');

-  return <SlInput value={value} onSlInput={event => setValue((event.target as SlInputElement).value)} />;
+  return <WaInput value={value} onWaInput={event => setValue((event.target as WaInputElement).value)} />;
 }

 export default MyComponent;
@@ -102,16 +102,16 @@ You can also import the event type for use in your callbacks, shown below.

 ```tsx
 import { useCallback, useState } from 'react';
-import SlInput, { type SlInputEvent } from '@shoelace-style/shoelace/%NPMDIR%/react/input';
-import type SlInputElement from '@shoelace-style/shoelace/%NPMDIR%/components/input/input';
+import WaInput, { type WaInputEvent } from '@shoelace-style/shoelace/%NPMDIR%/react/input';
+import type WaInputElement from '@shoelace-style/shoelace/%NPMDIR%/components/input/input';

 function MyComponent() {
  const [value, setValue] = useState('');
-  const onInput = useCallback((event: SlInputEvent) => {
+  const onInput = useCallback((event: WaInputEvent) => {
    setValue(event.detail);
  }, []);

-  return <SlInput value={value} onSlInput={event => setValue((event.target as SlInputElement).value)} />;
+  return <WaInput value={value} onWaInput={event => setValue((event.target as WaInputElement).value)} />;
 }

 export default MyComponent;
@@ -121,7 +121,7 @@ export default MyComponent;

 Testing with web components can be challenging if your test environment runs in a Node environment (i.e. it doesn't run in a real browser). Fortunately, [Jest](https://jestjs.io/) has made a number of strides to support web components and provide additional browser APIs. However, it's still not a complete replication of a browser environment.

-Here are some tips that will help smooth things over if you're having trouble with Jest + Shoelace.
+Here are some tips that will help smooth things over if you're having trouble with Jest + Web Awesome.

 :::tip
 If you're looking for a fast, modern testing alternative, consider [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/).
@@ -163,13 +163,13 @@ For more details, refer to Jest's [manual mocking](https://jestjs.io/docs/manual

 ### Transform ES Modules

-ES Modules are a [well-supported browser standard](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). This is how Shoelace is distributed, but most React apps expect CommonJS. As a result, you'll probably run into the following error.
+ES Modules are a [well-supported browser standard](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). This is how Web Awesome is distributed, but most React apps expect CommonJS. As a result, you'll probably run into the following error.

 ```
 Error: Unable to import outside of a module
 ```

-To fix this, add the following to your `package.json` which tells the transpiler to process Shoelace modules.
+To fix this, add the following to your `package.json` which tells the transpiler to process Web Awesome modules.

 ```js
 {
@@ -184,5 +184,5 @@ These instructions are for apps created via Create React App. If you're using Je
 For more details, refer to Jest's [`transformIgnorePatterns` customization](https://jestjs.io/docs/tutorial-react-native#transformignorepatterns-customization) documentation.

 :::tip
-Are you using Shoelace with React? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/react.md)
+Are you using Web Awesome with React? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/react.md)
 :::
--- a/docs/pages/frameworks/vue-2.md
+++ b/docs/pages/frameworks/vue-2.md
@@ -1,12 +1,12 @@
 ---
 meta:
  title: Vue (version 2)
-  description: Tips for using Shoelace in your Vue 2 app.
+  description: Tips for using Web Awesome in your Vue 2 app.
 ---

 # Vue (version 2)

-Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Shoelace in your Vue apps with ease.
+Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Web Awesome in your Vue apps with ease.

 :::tip
 These instructions are for Vue 2. If you're using Vue 3 or above, please see the [Vue 3 instructions](/frameworks/vue).
@@ -14,7 +14,7 @@ These instructions are for Vue 2. If you're using Vue 3 or above, please see the

 ## Installation

-To add Shoelace to your Vue app, install the package from npm.
+To add Web Awesome to your Vue app, install the package from npm.

 ```bash
 npm install @shoelace-style/shoelace
@@ -23,7 +23,7 @@ npm install @shoelace-style/shoelace
 Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.

 ```jsx
-import '@shoelace-style/shoelace/%NPMDIR%/themes/light.css';
+import '@shoelace-style/shoelace/%NPMDIR%/themes/default.css';
 import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path';

 setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
@@ -35,7 +35,7 @@ If you'd rather not use the CDN for assets, you can create a build task that cop

 ## Configuration

-You'll need to tell Vue to ignore Shoelace components. This is pretty easy because they all start with `sl-`.
+You'll need to tell Vue to ignore Web Awesome components. This is pretty easy because they all start with `sl-`.

 ```js
 import Vue from 'vue';
@@ -50,7 +50,7 @@ const app = new Vue({
 app.$mount('#app');
 ```

-Now you can start using Shoelace components in your app!
+Now you can start using Web Awesome components in your app!

 ## Usage

@@ -59,7 +59,7 @@ Now you can start using Shoelace components in your app!
 When binding complex data such as objects and arrays, use the `.prop` modifier to make Vue bind them as a property instead of an attribute.

 ```html
-<sl-color-picker :swatches.prop="mySwatches" />
+<wa-color-picker :swatches.prop="mySwatches" />
 ```

 ### Two-way Binding
@@ -68,12 +68,12 @@ One caveat is there's currently [no support for v-model on custom elements](http

 ```html
 <!-- This doesn't work -->
-<sl-input v-model="name"></sl-input>
+<wa-input v-model="name"></wa-input>
 <!-- This works, but it's a bit longer -->
-<sl-input :value="name" @input="name = $event.target.value"></sl-input>
+<wa-input :value="name" @input="name = $event.target.value"></wa-input>
 ```

-If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Shoelace components. To install it, use this command.
+If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Web Awesome components. To install it, use this command.

 ```bash
 npm install @shoelace-style/vue-sl-model@1
@@ -83,10 +83,10 @@ Next, import the directive and enable it like this.

 ```js
 import Vue from 'vue';
-import ShoelaceModelDirective from '@shoelace-style/vue-sl-model';
+import Web AwesomeModelDirective from '@shoelace-style/vue-sl-model';
 import App from './App.vue';

-Vue.use(ShoelaceModelDirective);
+Vue.use(Web AwesomeModelDirective);
 Vue.config.ignoredElements = [/sl-/];

 const app = new Vue({
@@ -99,9 +99,9 @@ app.$mount('#app');
 Now you can use the `v-sl-model` directive to keep your data in sync!

 ```html
-<sl-input v-sl-model="name"></sl-input>
+<wa-input v-sl-model="name"></wa-input>
 ```

 :::tip
-Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue-2.md)
+Are you using Web Awesome with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue-2.md)
 :::
--- a/docs/pages/frameworks/vue.md
+++ b/docs/pages/frameworks/vue.md
@@ -1,12 +1,12 @@
 ---
 meta:
  title: Vue
-  description: Tips for using Shoelace in your Vue 3 app.
+  description: Tips for using Web Awesome in your Vue 3 app.
 ---

 # Vue

-Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Shoelace in your Vue apps with ease.
+Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Web Awesome in your Vue apps with ease.

 :::tip
 These instructions are for Vue 3 and above. If you're using Vue 2, please see the [Vue 2 instructions](/frameworks/vue-2).
@@ -14,7 +14,7 @@ These instructions are for Vue 3 and above. If you're using Vue 2, please see th

 ## Installation

-To add Shoelace to your Vue app, install the package from npm.
+To add Web Awesome to your Vue app, install the package from npm.

 ```bash
 npm install @shoelace-style/shoelace
@@ -23,7 +23,7 @@ npm install @shoelace-style/shoelace
 Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.

 ```jsx
-import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/default.css';
 import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';

 setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
@@ -35,7 +35,7 @@ If you'd rather not use the CDN for assets, you can create a build task that cop

 ## Configuration

-You'll need to tell Vue to ignore Shoelace components. This is pretty easy because they all start with `sl-`.
+You'll need to tell Vue to ignore Web Awesome components. This is pretty easy because they all start with `sl-`.

 ```js
 import { fileURLToPath, URL } from 'url';
@@ -49,7 +49,7 @@ export default defineConfig({
    vue({
      template: {
        compilerOptions: {
-          isCustomElement: tag => tag.startsWith('sl-')
+          isCustomElement: tag => tag.startsWith('wa-')
        }
      }
    })
@@ -62,7 +62,7 @@ export default defineConfig({
 });
 ```

-Now you can start using Shoelace components in your app!
+Now you can start using Web Awesome components in your app!

 ## Usage

@@ -73,9 +73,9 @@ Now you can start using Shoelace components in your app!
  <div class="container">
    <h1>QR code generator</h1>

-    <sl-input maxlength="255" clearable label="Value" v-model="qrCode"></sl-input>
+    <wa-input maxlength="255" clearable label="Value" v-model="qrCode"></wa-input>

-    <sl-qr-code :value="qrCode"></sl-qr-code>
+    <wa-qr-code :value="qrCode"></wa-qr-code>
  </div>
 </template>

@@ -93,7 +93,7 @@ Now you can start using Shoelace components in your app!
    margin: 0 auto;
  }

-  sl-input {
+  wa-input {
    margin: var(--wa-space-l) 0;
  }
 </style>
@@ -104,24 +104,24 @@ Now you can start using Shoelace components in your app!
 When binding complex data such as objects and arrays, use the `.prop` modifier to make Vue bind them as a property instead of an attribute.

 ```html
-<sl-color-picker :swatches.prop="mySwatches" />
+<wa-color-picker :swatches.prop="mySwatches" />
 ```

 :::tip
-Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md)
+Are you using Web Awesome with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md)
 :::

 ### Slots

-To use Shoelace components with slots, follow the Vue documentation on using [slots with custom elements](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue).
+To use Web Awesome components with slots, follow the Vue documentation on using [slots with custom elements](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue).

 Here is an example:

 ```html
-<sl-drawer label="Drawer" placement="start" class="drawer-placement-start" :open="drawerIsOpen">
+<wa-drawer label="Drawer" placement="start" class="drawer-placement-start" :open="drawerIsOpen">
  This drawer slides in from the start.
  <div slot="footer">
-    <sl-button variant="brand" @click=" drawerIsOpen = false">Close</sl-button>
+    <wa-button variant="brand" @click=" drawerIsOpen = false">Close</wa-button>
  </div>
-</sl-drawer>
+</wa-drawer>
 ```
--- a/docs/pages/getting-started/customizing.md
+++ b/docs/pages/getting-started/customizing.md
@@ -1,16 +1,16 @@
 ---
 meta:
  title: Customizing
-  description: Learn how to customize Shoelace through parts and custom properties.
+  description: Learn how to customize Web Awesome through parts and custom properties.
 ---

 # Customizing

-Shoelace components can be customized at a high level through design tokens. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
+Web Awesome components can be customized at a high level through design tokens. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.

 ## Design Tokens

-Shoelace makes use of several design tokens to provide a consistent appearance across components. You can customize them and use them in your own application with pure CSS — no preprocessor required.
+Web Awesome makes use of several design tokens to provide a consistent appearance across components. You can customize them and use them in your own application with pure CSS — no preprocessor required.

 Design tokens offer a high-level way to customize the library with minimal effort. There are no component-specific variables, however, as design tokens are intended to be generic and highly reusable. To customize an individual component, refer to the section entitled [CSS Parts](#css-parts).

@@ -35,18 +35,18 @@ To customize a design token, simply override it in your stylesheet using a `:roo
 }
 ```

-Many design tokens are described further along in this documentation. For a complete list, refer to `src/themes/light.css` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/current/src/themes/light.css).
+Many design tokens are described further along in this documentation. For a complete list, refer to `src/themes/default.css` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/current/src/themes/default.css).

 ## CSS Parts

 Whereas design tokens offer a high-level way to customize the library, CSS parts offer a low-level way to customize individual components. Again, this is done with pure CSS — no preprocessor required.

-Shoelace components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose "parts" that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
+Web Awesome components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose "parts" that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.

 Here's an example that modifies buttons with the `tomato-button` class.

 ```html:preview
-<sl-button class="tomato-button"> Tomato Button </sl-button>
+<wa-button class="tomato-button"> Tomato Button </wa-button>

 <style>
  .tomato-button::part(base) {
@@ -89,7 +89,7 @@ For convenience, some components expose CSS custom properties you can override.
 You can set custom properties on a component in your stylesheet.

 ```css
-sl-avatar {
+wa-avatar {
  --size: 6rem;
 }
 ```
@@ -97,7 +97,7 @@ sl-avatar {
 This will also work if you need to target a subset of components with a specific class.

 ```css
-sl-avatar.your-class {
+wa-avatar.your-class {
  --size: 6rem;
 }
 ```
@@ -105,14 +105,14 @@ sl-avatar.your-class {
 Alternatively, you can set them inline directly on the element.

 ```html
-<sl-avatar style="--size: 6rem;"></sl-avatar>
+<wa-avatar style="--size: 6rem;"></wa-avatar>
 ```

 Not all components expose CSS custom properties. For those that do, they can be found in the component's API documentation.

 ## Animations

-Some components use animation, such as when a dialog is shown or hidden. Animations are performed using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) rather than CSS. However, you can still customize them through Shoelace's animation registry. If a component has customizable animations, they'll be listed in the "Animation" section of its documentation.
+Some components use animation, such as when a dialog is shown or hidden. Animations are performed using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) rather than CSS. However, you can still customize them through Web Awesome's animation registry. If a component has customizable animations, they'll be listed in the "Animation" section of its documentation.

 To customize a default animation, use the `setDefaultAnimation()` method. The function accepts an animation name (found in the component's docs) and an object with `keyframes`, and `options` or `null` to disable the animation.

--- a/docs/pages/getting-started/form-controls.md
+++ b/docs/pages/getting-started/form-controls.md
@@ -1,17 +1,17 @@
 ---
 meta:
  title: Form Controls
-  description: Some things to note about Shoelace and forms.
+  description: Some things to note about Web Awesome and forms.
 ---

 # Form Controls

-Every Shoelace component makes use of a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, styles, and behavior. One caveat of this approach is that native `<form>` elements do not recognize form controls located inside a shadow root.
+Every Web Awesome component makes use of a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, styles, and behavior. One caveat of this approach is that native `<form>` elements do not recognize form controls located inside a shadow root.

-Shoelace solves this problem by using the [`formdata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event) event, which is [available in all modern browsers](https://caniuse.com/mdn-api_htmlformelement_formdata_event). This means, when a form is submitted, Shoelace form controls will automatically append their values to the `FormData` object that's used to submit the form. In most cases, things will "just work." However, if you're using a form serialization library, it might need to be adapted to recognize Shoelace form controls.
+Web Awesome solves this problem by using the [`formdata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event) event, which is [available in all modern browsers](https://caniuse.com/mdn-api_htmlformelement_formdata_event). This means, when a form is submitted, Web Awesome form controls will automatically append their values to the `FormData` object that's used to submit the form. In most cases, things will "just work." However, if you're using a form serialization library, it might need to be adapted to recognize Web Awesome form controls.

 :::tip
-Shoelace uses event listeners to intercept the form's `formdata` and `submit` events. This allows it to inject data and trigger validation as necessary. If you're also attaching an event listener to the form, _you must attach it after Shoelace form controls are connected to the DOM_, otherwise your logic will run before Shoelace has a chance to inject form data and validate form controls.
+Web Awesome uses event listeners to intercept the form's `formdata` and `submit` events. This allows it to inject data and trigger validation as necessary. If you're also attaching an event listener to the form, _you must attach it after Web Awesome form controls are connected to the DOM_, otherwise your logic will run before Web Awesome has a chance to inject form data and validate form controls.
 :::

 ## Data Serialization
@@ -27,7 +27,7 @@ const data = new FormData(form);
 // All form control data is available in a FormData object
 ```

-However, some folks find `FormData` tricky to work with or they need to pass a JSON payload to their server. To accommodate this, Shoelace offers a serialization utility that gathers form data and returns a simple JavaScript object instead.
+However, some folks find `FormData` tricky to work with or they need to pass a JSON payload to their server. To accommodate this, Web Awesome offers a serialization utility that gathers form data and returns a simple JavaScript object instead.

 ```js
 import { serialize } from '@shoelace-style/shoelace/dist/utilities/form.js';
@@ -42,7 +42,7 @@ This results in an object with name/value pairs that map to each form control. I

 ## Constraint Validation

-Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for Shoelace form controls. You can activate it using attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. Shoelace implements many of the same attributes as native form controls, but check the documentation for a list of supported properties for each component.
+Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for Web Awesome form controls. You can activate it using attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. Web Awesome implements many of the same attributes as native form controls, but check the documentation for a list of supported properties for each component.

 If you don't want to use client-side validation, you can suppress this behavior by adding `novalidate` to the surrounding `<form>` element.

@@ -56,26 +56,26 @@ Client-side validation can be used to improve the UX of forms, but it is not a r

 ### Required Fields

-To make a field required, use the `required` attribute. Required fields will automatically receive a `*` after their labels. This is configurable through the `--sl-input-required-content` custom property.
+To make a field required, use the `required` attribute. Required fields will automatically receive a `*` after their labels. This is configurable through the `--wa-input-required-content` custom property.

 The form will not be submitted if a required field is incomplete.

 ```html:preview
 <form class="input-validation-required">
-  <sl-input name="name" label="Name" required></sl-input>
+  <wa-input name="name" label="Name" required></wa-input>
  <br />
-  <sl-select label="Favorite Animal" clearable required>
-    <sl-option value="birds">Birds</sl-option>
-    <sl-option value="cats">Cats</sl-option>
-    <sl-option value="dogs">Dogs</sl-option>
-    <sl-option value="other">Other</sl-option>
-  </sl-select>
+  <wa-select label="Favorite Animal" clearable required>
+    <wa-option value="birds">Birds</wa-option>
+    <wa-option value="cats">Cats</wa-option>
+    <wa-option value="dogs">Dogs</wa-option>
+    <wa-option value="other">Other</wa-option>
+  </wa-select>
  <br />
-  <sl-textarea name="comment" label="Comment" required></sl-textarea>
+  <wa-textarea name="comment" label="Comment" required></wa-textarea>
  <br />
-  <sl-checkbox required>Check me before submitting</sl-checkbox>
+  <wa-checkbox required>Check me before submitting</wa-checkbox>
  <br /><br />
-  <sl-button type="submit" variant="brand">Submit</sl-button>
+  <wa-button type="submit" variant="brand">Submit</wa-button>
 </form>

 <script type="module">
@@ -83,12 +83,12 @@ The form will not be submitted if a required field is incomplete.

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
-    customElements.whenDefined('sl-button'),
-    customElements.whenDefined('sl-checkbox'),
-    customElements.whenDefined('sl-input'),
-    customElements.whenDefined('sl-option'),
-    customElements.whenDefined('sl-select'),
-    customElements.whenDefined('sl-textarea')
+    customElements.whenDefined('wa-button'),
+    customElements.whenDefined('wa-checkbox'),
+    customElements.whenDefined('wa-input'),
+    customElements.whenDefined('wa-option'),
+    customElements.whenDefined('wa-select'),
+    customElements.whenDefined('wa-textarea')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
@@ -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/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';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

 const App = () => {
  function handleSubmit(event) {
@@ -114,23 +114,23 @@ const App = () => {

  return (
    <form onSubmit={handleSubmit}>
-      <SlInput name="name" label="Name" required />
+      <WaInput name="name" label="Name" required />
      <br />
-      <SlSelect label="Favorite Animal" clearable required>
-        <SlMenuItem value="birds">Birds</SlMenuItem>
-        <SlMenuItem value="cats">Cats</SlMenuItem>
-        <SlMenuItem value="dogs">Dogs</SlMenuItem>
-        <SlMenuItem value="other">Other</SlMenuItem>
-      </SlSelect>
+      <WaSelect label="Favorite Animal" clearable required>
+        <WaMenuItem value="birds">Birds</WaMenuItem>
+        <WaMenuItem value="cats">Cats</WaMenuItem>
+        <WaMenuItem value="dogs">Dogs</WaMenuItem>
+        <WaMenuItem value="other">Other</WaMenuItem>
+      </WaSelect>
      <br />
-      <SlTextarea name="comment" label="Comment" required></SlTextarea>
+      <WaTextarea name="comment" label="Comment" required></WaTextarea>
      <br />
-      <SlCheckbox required>Check me before submitting</SlCheckbox>
+      <WaCheckbox required>Check me before submitting</WaCheckbox>
      <br />
      <br />
-      <SlButton type="submit" variant="brand">
+      <WaButton type="submit" variant="brand">
        Submit
-      </SlButton>
+      </WaButton>
    </form>
  );
 };
@@ -138,14 +138,14 @@ const App = () => {

 ### Input Patterns

-To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern), use the `pattern` attribute. This example only allows the letters A-Z, so the form will not submit if a number or symbol is entered. This only works with `<sl-input>` elements.
+To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern), use the `pattern` attribute. This example only allows the letters A-Z, so the form will not submit if a number or symbol is entered. This only works with `<wa-input>` elements.

 ```html:preview
 <form class="input-validation-pattern">
-  <sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input>
+  <wa-input name="letters" required label="Letters" pattern="[A-Za-z]+"></wa-input>
  <br />
-  <sl-button type="submit" variant="brand">Submit</sl-button>
-  <sl-button type="reset" variant="default">Reset</sl-button>
+  <wa-button type="submit" variant="brand">Submit</wa-button>
+  <wa-button type="reset" variant="default">Reset</wa-button>
 </form>

 <script type="module">
@@ -153,8 +153,8 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
-    customElements.whenDefined('sl-button'),
-    customElements.whenDefined('sl-input')
+    customElements.whenDefined('wa-button'),
+    customElements.whenDefined('wa-input')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
@@ -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/button';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const App = () => {
  function handleSubmit(event) {
@@ -176,11 +176,11 @@ const App = () => {

  return (
    <form onSubmit={handleSubmit}>
-      <SlInput name="letters" required label="Letters" pattern="[A-Za-z]+" />
+      <WaInput name="letters" required label="Letters" pattern="[A-Za-z]+" />
      <br />
-      <SlButton type="submit" variant="brand">
+      <WaButton type="submit" variant="brand">
        Submit
-      </SlButton>
+      </WaButton>
    </form>
  );
 };
@@ -192,12 +192,12 @@ Some input types will automatically trigger constraints, such as `email` and `ur

 ```html:preview
 <form class="input-validation-type">
-  <sl-input type="email" label="Email" placeholder="you@example.com" required></sl-input>
+  <wa-input type="email" label="Email" placeholder="you@example.com" required></wa-input>
  <br />
-  <sl-input type="url" label="URL" placeholder="https://example.com/" required></sl-input>
+  <wa-input type="url" label="URL" placeholder="https://example.com/" required></wa-input>
  <br />
-  <sl-button type="submit" variant="brand">Submit</sl-button>
-  <sl-button type="reset" variant="default">Reset</sl-button>
+  <wa-button type="submit" variant="brand">Submit</wa-button>
+  <wa-button type="reset" variant="default">Reset</wa-button>
 </form>

 <script type="module">
@@ -205,8 +205,8 @@ Some input types will automatically trigger constraints, such as `email` and `ur

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
-    customElements.whenDefined('sl-button'),
-    customElements.whenDefined('sl-input')
+    customElements.whenDefined('wa-button'),
+    customElements.whenDefined('wa-input')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
@@ -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/button';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const App = () => {
  function handleSubmit(event) {
@@ -228,13 +228,13 @@ const App = () => {

  return (
    <form onSubmit={handleSubmit}>
-      <SlInput type="email" label="Email" placeholder="you@example.com" required />
+      <WaInput type="email" label="Email" placeholder="you@example.com" required />
      <br />
-      <SlInput type="url" label="URL" placeholder="https://example.com/" required />
+      <WaInput type="url" label="URL" placeholder="https://example.com/" required />
      <br />
-      <SlButton type="submit" variant="brand">
+      <WaButton type="submit" variant="brand">
        Submit
-      </SlButton>
+      </WaButton>
    </form>
  );
 };
@@ -246,31 +246,31 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa

 ```html:preview
 <form class="input-validation-custom">
-  <sl-input label="Type “shoelace”" required></sl-input>
+  <wa-input label="Type awesome" required></wa-input>
  <br />
-  <sl-button type="submit" variant="brand">Submit</sl-button>
-  <sl-button type="reset" variant="default">Reset</sl-button>
+  <wa-button type="submit" variant="brand">Submit</wa-button>
+  <wa-button type="reset" variant="default">Reset</wa-button>
 </form>

 <script type="module">
  const form = document.querySelector('.input-validation-custom');
-  const input = form.querySelector('sl-input');
+  const input = form.querySelector('wa-input');

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
-    customElements.whenDefined('sl-button'),
-    customElements.whenDefined('sl-input')
+    customElements.whenDefined('wa-button'),
+    customElements.whenDefined('wa-input')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      alert('All fields are valid!');
    });

-    input.addEventListener('sl-input', () => {
-      if (input.value === 'shoelace') {
+    input.addEventListener('wa-input', () => {
+      if (input.value === 'awesome') {
        input.setCustomValidity('');
      } else {
-        input.setCustomValidity("Hey, you're supposed to type 'shoelace' before submitting this!");
+        input.setCustomValidity("Hey, you're supposed to type 'awesome' before submitting this!");
      }
    });
  });
@@ -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/button';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaInput from '@shoelace-style/shoelace/dist/react/input';

 const App = () => {
  const input = useRef(null);
@@ -289,10 +289,10 @@ const App = () => {
  function handleInput(event) {
    setValue(event.target.value);

-    if (event.target.value === 'shoelace') {
+    if (event.target.value === 'awesome') {
      input.current.setCustomValidity('');
    } else {
-      input.current.setCustomValidity("Hey, you're supposed to type 'shoelace' before submitting this!");
+      input.current.setCustomValidity("Hey, you're supposed to type 'awesome' before submitting this!");
    }
  }

@@ -303,11 +303,11 @@ const App = () => {

  return (
    <form onSubmit={handleSubmit}>
-      <SlInput ref={input} label="Type 'shoelace'" required value={value} onSlInput={handleInput} />
+      <WaInput ref={input} label="Type 'awesome'" required value={value} onWaInput={handleInput} />
      <br />
-      <SlButton type="submit" variant="brand">
+      <WaButton type="submit" variant="brand">
        Submit
-      </SlButton>
+      </WaButton>
    </form>
  );
 };
@@ -319,7 +319,7 @@ Custom validation can be applied to any form control that supports the `setCusto

 ## Custom Validation Styles

-Due to the many ways form controls are used, Shoelace doesn't provide out of the box validation styles for form controls as part of its default theme. Instead, the following attributes will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in.
+Due to the many ways form controls are used, Web Awesome doesn't provide out of the box validation styles for form controls as part of its default theme. Instead, the following attributes will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in.

 - `data-required` - the form control is required
 - `data-optional` - the form control is optional
@@ -331,7 +331,7 @@ Due to the many ways form controls are used, Shoelace doesn't provide out of the
 These attributes map to the browser's built-in pseudo classes for validation: [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required), [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional), [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid), [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid), and the proposed [`:user-invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid) and [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).

 :::tip
-In the future, data attributes will be replaced with custom pseudo classes such as `:--valid` and `:--invalid`. Shoelace is using data attributes as a workaround until browsers support custom states through [`ElementInternals.states`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states).
+In the future, data attributes will be replaced with custom pseudo classes such as `:--valid` and `:--invalid`. Web Awesome is using data attributes as a workaround until browsers support custom states through [`ElementInternals.states`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states).
 :::

 ### Styling Invalid Form Controls
@@ -342,25 +342,25 @@ This example demonstrates custom validation styles using `data-user-invalid` and

 ```html:preview
 <form class="validity-styles">
-  <sl-input
+  <wa-input
    name="name"
    label="Name"
    help-text="What would you like people to call you?"
    autocomplete="off"
    required
-  ></sl-input>
+  ></wa-input>

-  <sl-select name="animal" label="Favorite Animal" help-text="Select the best option." clearable required>
-    <sl-option value="birds">Birds</sl-option>
-    <sl-option value="cats">Cats</sl-option>
-    <sl-option value="dogs">Dogs</sl-option>
-    <sl-option value="other">Other</sl-option>
-  </sl-select>
+  <wa-select name="animal" label="Favorite Animal" help-text="Select the best option." clearable required>
+    <wa-option value="birds">Birds</wa-option>
+    <wa-option value="cats">Cats</wa-option>
+    <wa-option value="dogs">Dogs</wa-option>
+    <wa-option value="other">Other</wa-option>
+  </wa-select>

-  <sl-checkbox value="accept" required>Accept terms and conditions</sl-checkbox>
+  <wa-checkbox value="accept" required>Accept terms and conditions</wa-checkbox>

-  <sl-button type="submit" variant="brand">Submit</sl-button>
-  <sl-button type="reset" variant="default">Reset</sl-button>
+  <wa-button type="submit" variant="brand">Submit</wa-button>
+  <wa-button type="reset" variant="default">Reset</wa-button>
 </form>

 <script type="module">
@@ -368,11 +368,11 @@ This example demonstrates custom validation styles using `data-user-invalid` and

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
-    customElements.whenDefined('sl-button'),
-    customElements.whenDefined('sl-checkbox'),
-    customElements.whenDefined('sl-input'),
-    customElements.whenDefined('sl-option'),
-    customElements.whenDefined('sl-select')
+    customElements.whenDefined('wa-button'),
+    customElements.whenDefined('wa-checkbox'),
+    customElements.whenDefined('wa-input'),
+    customElements.whenDefined('wa-option'),
+    customElements.whenDefined('wa-select')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
@@ -382,84 +382,84 @@ This example demonstrates custom validation styles using `data-user-invalid` and
 </script>

 <style>
-  .validity-styles sl-input,
-  .validity-styles sl-select,
-  .validity-styles sl-checkbox {
+  .validity-styles wa-input,
+  .validity-styles wa-select,
+  .validity-styles wa-checkbox {
    display: block;
    margin-bottom: var(--wa-space-m);
  }

  /* user invalid styles */
-  .validity-styles sl-input[data-user-invalid]::part(base),
-  .validity-styles sl-select[data-user-invalid]::part(combobox),
-  .validity-styles sl-checkbox[data-user-invalid]::part(control) {
+  .validity-styles wa-input[data-user-invalid]::part(base),
+  .validity-styles wa-select[data-user-invalid]::part(combobox),
+  .validity-styles wa-checkbox[data-user-invalid]::part(control) {
    border-color: var(--sl-color-danger-600);
  }

  .validity-styles [data-user-invalid]::part(form-control-label),
  .validity-styles [data-user-invalid]::part(form-control-help-text),
-  .validity-styles sl-checkbox[data-user-invalid]::part(label) {
+  .validity-styles wa-checkbox[data-user-invalid]::part(label) {
    color: var(--sl-color-danger-700);
  }

-  .validity-styles sl-checkbox[data-user-invalid]::part(control) {
+  .validity-styles wa-checkbox[data-user-invalid]::part(control) {
    outline: none;
  }

-  .validity-styles sl-input:focus-within[data-user-invalid]::part(base),
-  .validity-styles sl-select:focus-within[data-user-invalid]::part(combobox),
-  .validity-styles sl-checkbox:focus-within[data-user-invalid]::part(control) {
+  .validity-styles wa-input:focus-within[data-user-invalid]::part(base),
+  .validity-styles wa-select:focus-within[data-user-invalid]::part(combobox),
+  .validity-styles wa-checkbox:focus-within[data-user-invalid]::part(control) {
    border-color: var(--sl-color-danger-600);
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-300);
+    box-shadow: 0 0 0 var(--wa-focus-ring-width) var(--sl-color-danger-300);
  }

  /* User valid styles */
-  .validity-styles sl-input[data-user-valid]::part(base),
-  .validity-styles sl-select[data-user-valid]::part(combobox),
-  .validity-styles sl-checkbox[data-user-valid]::part(control) {
+  .validity-styles wa-input[data-user-valid]::part(base),
+  .validity-styles wa-select[data-user-valid]::part(combobox),
+  .validity-styles wa-checkbox[data-user-valid]::part(control) {
    border-color: var(--sl-color-success-600);
  }

  .validity-styles [data-user-valid]::part(form-control-label),
  .validity-styles [data-user-valid]::part(form-control-help-text),
-  .validity-styles sl-checkbox[data-user-valid]::part(label) {
+  .validity-styles wa-checkbox[data-user-valid]::part(label) {
    color: var(--sl-color-success-700);
  }

-  .validity-styles sl-checkbox[data-user-valid]::part(control) {
+  .validity-styles wa-checkbox[data-user-valid]::part(control) {
    background-color: var(--sl-color-success-600);
    outline: none;
  }

-  .validity-styles sl-input:focus-within[data-user-valid]::part(base),
-  .validity-styles sl-select:focus-within[data-user-valid]::part(combobox),
-  .validity-styles sl-checkbox:focus-within[data-user-valid]::part(control) {
+  .validity-styles wa-input:focus-within[data-user-valid]::part(base),
+  .validity-styles wa-select:focus-within[data-user-valid]::part(combobox),
+  .validity-styles wa-checkbox:focus-within[data-user-valid]::part(control) {
    border-color: var(--sl-color-success-600);
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-success-300);
+    box-shadow: 0 0 0 var(--wa-focus-ring-width) var(--sl-color-success-300);
  }
 </style>
 ```

 ## Inline Form Validation

-By default, Shoelace form controls use the browser's tooltip-style error messages. No mechanism is provided to show errors inline, as there are too many opinions on how that would work when combined with native form controls and other custom elements. You can, however, implement your own solution using the following technique.
+By default, Web Awesome form controls use the browser's tooltip-style error messages. No mechanism is provided to show errors inline, as there are too many opinions on how that would work when combined with native form controls and other custom elements. You can, however, implement your own solution using the following technique.

-To disable the browser's error messages, you need to cancel the `sl-invalid` event. Then you can apply your own inline validation errors. This example demonstrates a primitive way to do this.
+To disable the browser's error messages, you need to cancel the `wa-invalid` event. Then you can apply your own inline validation errors. This example demonstrates a primitive way to do this.

 ```html:preview
 <form class="inline-validation">
-  <sl-input
+  <wa-input
    name="name"
    label="Name"
    help-text="What would you like people to call you?"
    autocomplete="off"
    required
-  ></sl-input>
+  ></wa-input>

  <div id="name-error" aria-live="polite" hidden></div>

-  <sl-button type="submit" variant="brand">Submit</sl-button>
-  <sl-button type="reset" variant="default">Reset</sl-button>
+  <wa-button type="submit" variant="brand">Submit</wa-button>
+  <wa-button type="reset" variant="default">Reset</wa-button>
 </form>

 <script type="module">
@@ -468,12 +468,12 @@ To disable the browser's error messages, you need to cancel the `sl-invalid` eve

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
-    customElements.whenDefined('sl-button'),
-    customElements.whenDefined('sl-input')
+    customElements.whenDefined('wa-button'),
+    customElements.whenDefined('wa-input')
  ]).then(() => {
    // A form control is invalid
    form.addEventListener(
-      'sl-invalid',
+      'wa-invalid',
      event => {
        // Suppress the browser's constraint validation message
        event.preventDefault();
@@ -483,7 +483,7 @@ To disable the browser's error messages, you need to cancel the `sl-invalid` eve

        event.target.focus();
      },
-      { capture: true } // you must use capture since sl-invalid doesn't bubble!
+      { capture: true } // you must use capture since wa-invalid doesn't bubble!
    );

    // Handle form submit
@@ -504,20 +504,20 @@ To disable the browser's error messages, you need to cancel the `sl-invalid` eve

 <style>
  #name-error {
-    font-size: var(--sl-input-help-text-font-size-medium);
+    font-size: var(--wa-input-help-text-font-size-medium);
    color: var(--sl-color-danger-700);
  }

-  #name-error ~ sl-button {
+  #name-error ~ wa-button {
    margin-top: var(--wa-space-m);
  }

-  .inline-validation sl-input {
+  .inline-validation wa-input {
    display: block;
  }

  /* user invalid styles */
-  .inline-validation sl-input[data-user-invalid]::part(base) {
+  .inline-validation wa-input[data-user-invalid]::part(base) {
    border-color: var(--sl-color-danger-600);
  }

@@ -526,13 +526,13 @@ To disable the browser's error messages, you need to cancel the `sl-invalid` eve
    color: var(--sl-color-danger-700);
  }

-  .inline-validation sl-input:focus-within[data-user-invalid]::part(base) {
+  .inline-validation wa-input:focus-within[data-user-invalid]::part(base) {
    border-color: var(--sl-color-danger-600);
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-300);
+    box-shadow: 0 0 0 var(--wa-focus-ring-width) var(--sl-color-danger-300);
  }

  /* User valid styles */
-  .inline-validation sl-input[data-user-valid]::part(base) {
+  .inline-validation wa-input[data-user-valid]::part(base) {
    border-color: var(--sl-color-success-600);
  }

@@ -541,9 +541,9 @@ To disable the browser's error messages, you need to cancel the `sl-invalid` eve
    color: var(--sl-color-success-700);
  }

-  .inline-validation sl-input:focus-within[data-user-valid]::part(base) {
+  .inline-validation wa-input:focus-within[data-user-valid]::part(base) {
    border-color: var(--sl-color-success-600);
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-success-300);
+    box-shadow: 0 0 0 var(--wa-focus-ring-width) var(--sl-color-success-300);
  }
 </style>
 ```
@@ -554,7 +554,7 @@ This example is meant to demonstrate the concept of providing your own error mes

 ## Getting Associated Form Controls

-At this time, using [`HTMLFormElement.elements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) will not return Shoelace form controls because the browser is unaware of their status as custom element form controls. Fortunately, Shoelace provides an `elements()` function that does something very similar. However, instead of returning an [`HTMLFormControlsCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection), it returns an array of HTML and Shoelace form controls in the order they appear in the DOM.
+At this time, using [`HTMLFormElement.elements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) will not return Web Awesome form controls because the browser is unaware of their status as custom element form controls. Fortunately, Web Awesome provides an `elements()` function that does something very similar. However, instead of returning an [`HTMLFormControlsCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection), it returns an array of HTML and Web Awesome form controls in the order they appear in the DOM.

 ```js
 import { getFormControls } from '@shoelace-style/shoelace/dist/utilities/form.js';
@@ -562,7 +562,7 @@ import { getFormControls } from '@shoelace-style/shoelace/dist/utilities/form.js
 const form = document.querySelector('#my-form');
 const formControls = getFormControls(form);

-console.log(formControls); // e.g. [input, sl-input, ...]
+console.log(formControls); // e.g. [input, wa-input, ...]
 ```

 :::tip
--- a/docs/pages/getting-started/installation.md
+++ b/docs/pages/getting-started/installation.md
@@ -6,44 +6,44 @@ meta:

 # Installation

-You can load Shoelace via CDN or by installing it locally. If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular) for additional information.
+You can load Web Awesome via CDN or by installing it locally. If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular) for additional information.

 ## CDN Installation (Easiest)

-<sl-tab-group>
-<sl-tab slot="nav" panel="autoloader" active>Autoloader</sl-tab>
-<sl-tab slot="nav" panel="traditional">Traditional Loader</sl-tab>
+<wa-tab-group>
+<wa-tab slot="nav" panel="autoloader" active>Autoloader</wa-tab>
+<wa-tab slot="nav" panel="traditional">Traditional Loader</wa-tab>

-<sl-tab-panel name="autoloader">
+<wa-tab-panel name="autoloader">

-The experimental autoloader is the easiest and most efficient way to use Shoelace. A lightweight script watches the DOM for unregistered Shoelace elements and lazy loads them for you — even if they're added dynamically.
+The experimental autoloader is the easiest and most efficient way to use Web Awesome. A lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically.

 While convenient, autoloading may lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). The linked article describes some ways to alleviate it.

 <!-- prettier-ignore -->
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/light.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/shoelace-autoloader.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/default.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/autoloader.js"></script>
 ```

-</sl-tab-panel>
+</wa-tab-panel>

-<sl-tab-panel name="traditional">
+<wa-tab-panel name="traditional">

-The traditional CDN loader registers all Shoelace elements up front. Note that, if you're only using a handful of components, it will be much more efficient to stick with the autoloader. However, you can also [cherry pick](#cherry-picking) components if you want to load specific ones up front.
+The traditional CDN loader registers all Web Awesome elements up front. Note that, if you're only using a handful of components, it will be much more efficient to stick with the autoloader. However, you can also [cherry pick](#cherry-picking) components if you want to load specific ones up front.

 <!-- prettier-ignore -->
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/light.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/shoelace.js" ></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/default.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/autoloader.js" ></script>
 ```

-</sl-tab-panel>
-</sl-tab-group>
+</wa-tab-panel>
+</wa-tab-group>

 ### Dark Theme

-The code above will load the light theme. If you want to use the [dark theme](/getting-started/themes#dark-theme) instead, update the stylesheet as shown below and add `<html class="sl-theme-dark">` to your page.
+The code above will load the light theme. If you want to use the [dark theme](/getting-started/themes#dark-theme) instead, update the stylesheet as shown below and add `<html class="wa-theme-dark">` to your page.

 <!-- prettier-ignore -->
 ```html
@@ -58,21 +58,21 @@ If you want to load the light or dark theme based on the user's `prefers-color-s
 <link
  rel="stylesheet"
  media="(prefers-color-scheme:light)"
-  href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/light.css"
+  href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/default.css"
 />
 <link
  rel="stylesheet"
  media="(prefers-color-scheme:dark)"
  href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css"
-  onload="document.documentElement.classList.add('sl-theme-dark');"
+  onload="document.documentElement.classList.add('wa-theme-dark');"
 />
 ```

-Now you can [start using Shoelace!](/getting-started/usage)
+Now you can [start using Web Awesome!](/getting-started/usage)

 ## npm installation

-If you don't want to use the CDN, you can install Shoelace from npm with the following command.
+If you don't want to use the CDN, you can install Web Awesome from npm with the following command.

 ```bash
 npm install @shoelace-style/shoelace
@@ -83,25 +83,25 @@ It's up to you to make the source files available to your app. One way to do thi
 Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created.

 ```html
-<link rel="stylesheet" href="/shoelace/%NPMDIR%/themes/light.css" />
-<script type="module" src="/shoelace/%NPMDIR%/shoelace.js"></script>
+<link rel="stylesheet" href="/shoelace/%NPMDIR%/themes/default.css" />
+<script type="module" src="/shoelace/%NPMDIR%/autoloader.js"></script>
 ```

 Alternatively, [you can use a bundler](#bundling).

 :::tip
-For clarity, the docs will usually show imports from `@shoelace-style/shoelace`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Shoelace is in.
+For clarity, the docs will usually show imports from `@shoelace-style/shoelace`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Web Awesome is in.
 :::

 ## Setting the Base Path

-Some components rely on assets (icons, images, etc.) and Shoelace needs to know where they're located. For convenience, Shoelace will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `shoelace.js` or `shoelace-autoloader.js` and will "just work" for most users.
+Some components rely on assets (icons, images, etc.) and Web Awesome needs to know where they're located. For convenience, Web Awesome will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `autoloader.js` and will "just work" for most users.

-However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Shoelace, you'll need to set the base path. You can do this one of two ways.
+However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Web Awesome, you'll need to set the base path. You can do this one of two ways.

 ```html
-<!-- Option 1: the data-shoelace attribute -->
-<script src="bundle.js" data-shoelace="/path/to/shoelace/%NPMDIR%"></script>
+<!-- Option 1: the data-webawesome attribute -->
+<script src="bundle.js" data-webawesome="/path/to/shoelace/%NPMDIR%"></script>

 <!-- Option 2: the setBasePath() method -->
 <script src="bundle.js"></script>
@@ -117,7 +117,7 @@ An easy way to make sure the base path is configured properly is to check if [ic

 ### Referencing Assets

-Most of the magic behind assets is handled internally by Shoelace, but if you need to reference the base path for any reason, the same module exports a function called `getBasePath()`. An optional string argument can be passed, allowing you to get the full path to any asset.
+Most of the magic behind assets is handled internally by Web Awesome, but if you need to reference the base path for any reason, the same module exports a function called `getBasePath()`. An optional string argument can be passed, allowing you to get the full path to any asset.

 ```html
 <script type="module">
@@ -139,33 +139,29 @@ Most of the magic behind assets is handled internally by Shoelace, but if you ne

 Cherry picking can be done from [the CDN](#cdn-installation-easiest) or from [npm](#npm-installation). This approach will load only the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component.

-Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in.
+Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Web Awesome is in.

 ```html
-<link rel="stylesheet" href="/path/to/shoelace/%NPMDIR%/themes/light.css" />
+<link rel="stylesheet" href="/path/to/shoelace/%NPMDIR%/themes/default.css" />

-<script type="module" data-shoelace="/path/to/shoelace/%NPMDIR%">
+<script type="module" data-webawesome="/path/to/shoelace/%NPMDIR%">
  import '@shoelace-style/shoelace/%NPMDIR%/components/button/button.js';

-  // <sl-button> is ready to use!
+  // <wa-button> is ready to use!
 </script>
 ```

 You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.

-:::warning
-Never cherry pick components or utilities from `shoelace.js` as this will cause the browser to load the entire library. Instead, cherry pick from specific modules as shown above.
-:::
-
 :::warning
 You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
 :::

 ## Bundling

-Shoelace is distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.
+Web Awesome is distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.

-To use Shoelace with a bundler, first install Shoelace along with your bundler of choice.
+To use Web Awesome with a bundler, first install Web Awesome along with your bundler of choice.

 ```bash
 npm install @shoelace-style/shoelace
@@ -176,20 +172,20 @@ Now it's time to configure your bundler. Configurations vary for each tool, but
 - [Example webpack config](https://github.com/shoelace-style/webpack-example/blob/master/webpack.config.js)
 - [Example Rollup config](https://github.com/shoelace-style/rollup-example/blob/master/rollup.config.js)

-Once your bundler is configured, you'll be able to import Shoelace components and utilities.
+Once your bundler is configured, you'll be able to import Web Awesome components and utilities.

 ```js
-import '@shoelace-style/shoelace/%NPMDIR%/themes/light.css';
+import '@shoelace-style/shoelace/%NPMDIR%/themes/default.css';
 import '@shoelace-style/shoelace/%NPMDIR%/components/button/button.js';
 import '@shoelace-style/shoelace/%NPMDIR%/components/icon/icon.js';
 import '@shoelace-style/shoelace/%NPMDIR%/components/input/input.js';
 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
+// Set the base path to the folder you copied Web Awesome's assets to
 setBasePath('/path/to/shoelace/%NPMDIR%');

-// <sl-button>, <sl-icon>, <sl-input>, and <sl-rating> are ready to use!
+// <wa-button>, <wa-icon>, <wa-input>, and <wa-rating> are ready to use!
 ```

 :::warning
@@ -201,8 +197,8 @@ Component modules include side effects for registration purposes. Because of thi
 By default, imports to components will auto-register themselves. This may not be ideal in all cases. To import just the component's class without auto-registering it's tag we can do the following:

 ```diff
- import SlButton from '@shoelace-style/shoelace/%NPMDIR%/components/button/button.js';
-+ import SlButton from '@shoelace-style/shoelace/%NPMDIR%/components/button/button.component.js';
+- import WaButton from '@shoelace-style/shoelace/%NPMDIR%/components/button/button.js';
+ import WaButton from '@shoelace-style/shoelace/%NPMDIR%/components/button/button.component.js';
 ```

 Notice how the import ends with `.component.js`. This is the current convention to convey the import does not register itself.
@@ -220,4 +216,4 @@ TL;DR:
 - `@shoelace-style/shoelace/%CDNDIR%` is for CDN users
 - `@shoelace-style/shoelace/%NPMDIR%` is for npm users

-This change was introduced in `v2.5.0` to address issues around installations from npm loading multiple versions of libraries (such as the Lit) that Shoelace uses internally.
+This change was introduced in `v2.5.0` to address issues around installations from npm loading multiple versions of libraries (such as the Lit) that Web Awesome uses internally.
--- a/docs/pages/getting-started/localization.md
+++ b/docs/pages/getting-started/localization.md
@@ -1,12 +1,12 @@
 ---
 meta:
  title: Localization
-  description: Discover how to localize Shoelace with minimal effort.
+  description: Discover how to localize Web Awesome with minimal effort.
 ---

 # Localization

-Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the `<html>` element. Here's an example that renders Shoelace components in Spanish.
+Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the `<html>` element. Here's an example that renders Web Awesome components in Spanish.

 ```html
 <html lang="es">
@@ -24,9 +24,9 @@ Through the magic of a mutation observer, changing the `lang` attribute will aut

 ## Available Translations

-Shoelace ships with a number of translations. The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation. To see a list of all available translations in the latest version, [refer to this directory](https://github.com/shoelace-style/shoelace/tree/current/src/translations).
+Web Awesome ships with a number of translations. The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation. To see a list of all available translations in the latest version, [refer to this directory](https://github.com/shoelace-style/shoelace/tree/current/src/translations).

-The location of translations depends on how you're consuming Shoelace.
+The location of translations depends on how you're consuming Web Awesome.

 - If you're using the CDN, [import them from the CDN](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace?path=%CDNDIR%%2Ftranslations)
 - If you're using a bundler, import them from `@shoelace-style/shoelace/%NPMDIR%/translations/[lang].js`
@@ -49,7 +49,7 @@ The locale set by `<html lang="...">` is the default locale for the document. If
 2. Look for `es`
 3. Fall back to `en`

-Shoelace uses English as a fallback to provide a better experience than rendering nothing or throwing an error.
+Web Awesome uses English as a fallback to provide a better experience than rendering nothing or throwing an error.

 ### Submitting New Translations or Improvements

@@ -60,7 +60,7 @@ Regional translations are welcome! For example, if a German translation (`de`) e
 If you have any questions, please start a [discussion](https://github.com/shoelace-style/shoelace/discussions) or ask in the [community chat](https://discord.gg/mg8f26C).

 :::tip
-Shoelace provides a localization mechanism for component internals. This is not designed to be used as localization tool for your entire application. You should use a more appropriate tool such as [i18next](https://www.i18next.com/) if you need to localize content in your app.
+Web Awesome provides a localization mechanism for component internals. This is not designed to be used as localization tool for your entire application. You should use a more appropriate tool such as [i18next](https://www.i18next.com/) if you need to localize content in your app.
 :::

 ## Multiple Locales Per Page
@@ -72,8 +72,8 @@ You can use a different locale for an individual component by setting its `lang`
  ...

  <body>
-    <sl-button><!-- Spanish --></sl-button>
-    <sl-button lang="ru"><!-- Russian --></sl-button>
+    <wa-button><!-- Spanish --></wa-button>
+    <wa-button lang="ru"><!-- Russian --></wa-button>
  </body>
 </html>
 ```
@@ -86,7 +86,7 @@ For performance reasons, the `lang` and `dir` attributes must be on the componen

  <body>
    <div lang="ru">
-      <sl-button><!-- still in Spanish --></sl-button>
+      <wa-button><!-- still in Spanish --></wa-button>
    </div>
  </body>
 </html>
--- a/docs/pages/getting-started/themes.md
+++ b/docs/pages/getting-started/themes.md
@@ -1,14 +1,14 @@
 ---
 meta:
  title: Themes
-  description: Everything you need to know about theming Shoelace.
+  description: Everything you need to know about theming Web Awesome.
 ---

 # Themes

-Shoelace is designed to be highly customizable through pure CSS. Out of the box, you can choose from a light or dark theme. Alternatively, you can design your own theme.
+Web Awesome is designed to be highly customizable through pure CSS. Out of the box, you can choose from a light or dark theme. Alternatively, you can design your own theme.

-A theme is nothing more than a stylesheet that uses the Shoelace API to define design tokens and apply custom styles to components. To create a theme, you will need a decent understanding of CSS, including [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and the [`::part` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
+A theme is nothing more than a stylesheet that uses the Web Awesome API to define design tokens and apply custom styles to components. To create a theme, you will need a decent understanding of CSS, including [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and the [`::part` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).

 :::tip
 For component developers, built-in themes are also available as JavaScript modules that export [Lit CSSResult](https://lit.dev/docs/api/styles/#CSSResult) objects. You can find them in `%NPMDIR%/themes/*.styles.js`.
@@ -16,13 +16,13 @@ For component developers, built-in themes are also available as JavaScript modul

 ## Theme Basics

-All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `sl-theme-light` and `sl-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power`
+All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `wa-theme-light` and `wa-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power`

 All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.

 ```css
 :host,
-.sl-theme-purple-power {
+.wa-theme-purple-power {
  /* ... */
 }
 ```
@@ -32,7 +32,7 @@ All selectors must be scoped to the theme's class to ensure interoperability wit
 To activate a theme, import it and apply the theme's class to the `<html>` element. This example imports and activates the built-in dark theme.

 ```html
-<html class="sl-theme-dark">
+<html class="wa-theme-dark">
  <head>
    <link rel="stylesheet" href="path/to/shoelace/%NPMDIR%/themes/dark.css" />
  </head>
@@ -54,12 +54,12 @@ You can activate themes on various containers throughout the page. This example
 ```html
 <html>
  <head>
-    <link rel="stylesheet" href="path/to/shoelace/%NPMDIR%/themes/light.css" />
+    <link rel="stylesheet" href="path/to/shoelace/%NPMDIR%/themes/default.css" />
    <link rel="stylesheet" href="path/to/shoelace/%NPMDIR%/themes/dark.css" />
  </head>

  <body>
-    <nav class="sl-theme-dark">
+    <nav class="wa-theme-dark">
      <!-- dark-themed sidebar -->
    </nav>

@@ -76,14 +76,14 @@ There are two ways to create themes. The easiest way is to customize a built-in

 ### Customizing a Built-in Theme

-The easiest way to customize Shoelace is to override one of the built-in themes. You can do this by importing the light or dark theme as-is, then creating a separate stylesheet that overrides [design tokens](/getting-started/customizing#design-tokens) and adds [component styles](/getting-started/customizing#component-parts) to your liking. You must import your theme _after_ the built-in theme.
+The easiest way to customize Web Awesome is to override one of the built-in themes. You can do this by importing the light or dark theme as-is, then creating a separate stylesheet that overrides [design tokens](/getting-started/customizing#design-tokens) and adds [component styles](/getting-started/customizing#component-parts) to your liking. You must import your theme _after_ the built-in theme.

 If you're customizing the light theme, you should scope your styles to the following selectors.

 ```css
 :root,
 :host,
-.sl-theme-light {
+.wa-theme-light {
  /* your custom styles here */
 }
 ```
@@ -92,12 +92,12 @@ If you're customizing the dark theme, you should scope your styles to the follow

 ```css
 :host,
-.sl-theme-dark {
+.wa-theme-dark {
  /* your custom styles here */
 }
 ```

-By customizing a built-in theme, you'll maintain a smaller stylesheet containing only the changes you've made. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every design token required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Shoelace will be accounted for by the built-in theme.
+By customizing a built-in theme, you'll maintain a smaller stylesheet containing only the changes you've made. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every design token required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Web Awesome will be accounted for by the built-in theme.

 While this approach is easier to maintain, the drawback is that your theme can't be activated independently — it's tied to the built-in theme you're extending.

@@ -109,14 +109,14 @@ Start by changing the selector to match your theme's name. Assuming your new the

 ```css
 :host,
-.sl-theme-purple-power {
+.wa-theme-purple-power {
  /* your custom styles here */
 }
 ```

 By creating a new theme, you won't be relying on a built-in theme as a foundation. Because the theme is decoupled from the built-ins, you can activate it independently as an alternative to the built-ins. This is the recommended approach if you're looking to open source your theme for others to use.

-You will, however, need to maintain your theme more carefully, as new versions of Shoelace may introduce new design tokens that your theme won't have accounted for. Because of this, it's recommended that you clearly specify which version(s) of Shoelace your theme is designed to work with and keep it up to date as new versions of Shoelace are released.
+You will, however, need to maintain your theme more carefully, as new versions of Web Awesome may introduce new design tokens that your theme won't have accounted for. Because of this, it's recommended that you clearly specify which version(s) of Web Awesome your theme is designed to work with and keep it up to date as new versions of Web Awesome are released.

 ## Dark Theme

@@ -133,20 +133,20 @@ To install the dark theme, add the following to the `<head>` section of your pag
 />
 ```

-To activate the theme, apply the `sl-theme-dark` class to the `<html>` element.
+To activate the theme, apply the `wa-theme-dark` class to the `<html>` element.

 ```html
-<html class="sl-theme-dark">
+<html class="wa-theme-dark">
  ...
 </html>
 ```

 ### Detecting the User's Color Scheme Preference

-Shoelace doesn't try to auto-detect the user's light/dark mode preference. This should be done at the application level. As a best practice, to provide a dark theme in your app, you should:
+Web Awesome doesn't try to auto-detect the user's light/dark mode preference. This should be done at the application level. As a best practice, to provide a dark theme in your app, you should:

 - Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
 - Allow the user to override the setting in your app
 - Remember the user's preference and restore it on subsequent logins

-Shoelace avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
+Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
--- a/docs/pages/getting-started/usage.md
+++ b/docs/pages/getting-started/usage.md
@@ -6,7 +6,7 @@ meta:

 # Usage

-Shoelace components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
+Web Awesome components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.

 If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.

@@ -15,22 +15,22 @@ If you're new to custom elements, often referred to as "web components," this se
 Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.

 ```html
-<sl-button size="small">Click me</sl-button>
+<wa-button size="small">Click me</wa-button>
 ```

 Some properties are boolean, so they only have true/false values. To activate a boolean property, add the corresponding attribute without a value.

 ```html
-<sl-button disabled>Click me</sl-button>
+<wa-button disabled>Click me</wa-button>
 ```

 In rare cases, a property may require an array, an object, or a function. For example, to customize the color picker's list of preset swatches, you set the `swatches` property to an array of colors. This must be done with JavaScript.

 ```html
-<sl-color-picker></sl-color-picker>
+<wa-color-picker></wa-color-picker>

 <script>
-  const colorPicker = document.querySelector('sl-color-picker');
+  const colorPicker = document.querySelector('wa-color-picker');
  colorPicker.swatches = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
 </script>
 ```
@@ -41,14 +41,14 @@ Refer to a component's documentation for a complete list of its properties.

 You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. However, it's important to note that many events emitted within a component's shadow root will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in, for example, multiple `click` handlers executing even if the user clicks just once. Furthermore, `event.target` will point to the host element, making things even more confusing.

-As a result, you should almost always listen for custom events instead. For example, instead of listening to `click` to determine when an `<sl-checkbox>` gets toggled, listen to `sl-change`.
+As a result, you should almost always listen for custom events instead. For example, instead of listening to `click` to determine when an `<wa-checkbox>` gets toggled, listen to `wa-change`.

 ```html
-<sl-checkbox>Check me</sl-checkbox>
+<wa-checkbox>Check me</wa-checkbox>

 <script>
-  const checkbox = document.querySelector('sl-checkbox');
-  checkbox.addEventListener('sl-change', event => {
+  const checkbox = document.querySelector('wa-checkbox');
+  checkbox.addEventListener('wa-change', event => {
    console.log(event.target.checked ? 'checked' : 'not checked');
  });
 </script>
@@ -58,13 +58,13 @@ All custom events are prefixed with `sl-` to prevent collisions with standard ev

 ## Methods

-Some components have methods you can call to trigger various behaviors. For example, you can set focus on a Shoelace input using the `focus()` method.
+Some components have methods you can call to trigger various behaviors. For example, you can set focus on a Web Awesome input using the `focus()` method.

 ```html
-<sl-input></sl-input>
+<wa-input></wa-input>

 <script>
-  const input = document.querySelector('sl-input');
+  const input = document.querySelector('wa-input');
  input.focus();
 </script>
 ```
@@ -78,16 +78,16 @@ Many components use slots to accept content inside of them. The most common slot
 For example, a button's default slot is used to populate its label.

 ```html
-<sl-button>Click me</sl-button>
+<wa-button>Click me</wa-button>
 ```

 Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="prefix"` attribute? This tells the component to place the icon into its `prefix` slot.

 ```html
-<sl-button>
-  <sl-icon slot="prefix" name="gear"></sl-icon>
+<wa-button>
+  <wa-icon slot="prefix" name="gear"></wa-icon>
  Settings
-</sl-button>
+</wa-button>
 ```

 The location of a named slot doesn't matter. You can put it anywhere inside the component and the browser will move it to the right place automatically!
@@ -100,17 +100,17 @@ Custom elements cannot have self-closing tags. Similar to `<script>` and `<texta

 ```html
 <!-- Don't do this -->
-<sl-input />
+<wa-input />

 <!-- Always do this -->
-<sl-input></sl-input>
+<wa-input></wa-input>
 ```

 ## Differences from Native Elements

-You might expect similarly named elements to share the same API as native HTML elements, but this is not always the case. Shoelace components **are not** designed to be one-to-one replacements for their HTML counterparts. While they usually share the same API, there may be subtle differences.
+You might expect similarly named elements to share the same API as native HTML elements, but this is not always the case. Web Awesome components **are not** designed to be one-to-one replacements for their HTML counterparts. While they usually share the same API, there may be subtle differences.

-For example, `<button>` and `<sl-button>` both have a `type` attribute, but the native one defaults to `submit` while the Shoelace one defaults to `button` since this is a better default for most users.
+For example, `<button>` and `<wa-button>` both have a `type` attribute, but the native one defaults to `submit` while the Web Awesome one defaults to `button` since this is a better default for most users.

 :::tip
 **Don't make assumptions about a component's API!** To prevent unexpected behaviors, please take the time to review the documentation and make sure you understand what each attribute, property, method, and event is intended to do.
@@ -118,7 +118,7 @@ For example, `<button>` and `<sl-button>` both have a `type` attribute, but the

 ## Waiting for Components to Load

-Web components are registered with JavaScript, so depending on how and when you load Shoelace, you may notice a [Flash of Undefined Custom Elements (FOUCE)](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/) when the page loads. There are a couple ways to prevent this, both of which are described in the linked article.
+Web components are registered with JavaScript, so depending on how and when you load Web Awesome, you may notice a [Flash of Undefined Custom Elements (FOUCE)](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/) when the page loads. There are a couple ways to prevent this, both of which are described in the linked article.

 One option is to use the [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) CSS pseudo-class to "hide" custom elements that haven't been registered yet. You can scope it to specific tags or you can hide all undefined custom elements as shown below.

@@ -148,9 +148,9 @@ A clever way to use this method is to hide the `<body>` with `opacity: 0` and ad

 <script type="module">
  await Promise.allSettled([
-    customElements.whenDefined('sl-button'),
-    customElements.whenDefined('sl-card'),
-    customElements.whenDefined('sl-rating')
+    customElements.whenDefined('wa-button'),
+    customElements.whenDefined('wa-card'),
+    customElements.whenDefined('wa-rating')
  ]);

  // Button, card, and rating are registered now! Add
@@ -161,14 +161,14 @@ A clever way to use this method is to hide the `<body>` with `opacity: 0` and ad

 ## Component Rendering and Updating

-Shoelace components are built with [Lit](https://lit.dev/), a tiny library that makes authoring custom elements easier, more maintainable, and a lot of fun! As a Shoelace user, here is some helpful information about rendering and updating you should probably be aware of.
+Web Awesome components are built with [Lit](https://lit.dev/), a tiny library that makes authoring custom elements easier, more maintainable, and a lot of fun! As a Web Awesome user, here is some helpful information about rendering and updating you should probably be aware of.

 To optimize performance and reduce re-renders, Lit batches component updates. This means changing multiple attributes or properties at the same time will result in just a single re-render. In most cases, this isn't an issue, but there may be times you'll need to wait for the component to update before continuing.

 Consider this example. We're going to change the `checked` property of the checkbox and observe its corresponding `checked` attribute, which happens to reflect.

 ```js
-const checkbox = document.querySelector('sl-checkbox');
+const checkbox = document.querySelector('wa-checkbox');
 checkbox.checked = true;

 console.log(checkbox.hasAttribute('checked')); // false
@@ -177,7 +177,7 @@ console.log(checkbox.hasAttribute('checked')); // false
 Most developers will expect this to be `true` instead of `false`, but the component hasn't had a chance to re-render yet so the attribute doesn't exist when `hasAttribute()` is called. Since changes are batched, we need to wait for the update before proceeding. This can be done using the `updateComplete` property, which is available on all Lit-based components.

 ```js
-const checkbox = document.querySelector('sl-checkbox');
+const checkbox = document.querySelector('wa-checkbox');
 checkbox.checked = true;

 checkbox.updateComplete.then(() => {
@@ -195,9 +195,9 @@ Avoid using `setTimeout()` or `requestAnimationFrame()` in situations like this.

 ### VS Code

-Shoelace ships with a file called `vscode.html-custom-data.json` that can be used to describe it's custom elements to Visual Studio Code. This enables code completion for Shoelace components (also known as "code hinting" or "IntelliSense"). To enable it, you need to tell VS Code where the file is.
+Web Awesome ships with a file called `vscode.html-custom-data.json` that can be used to describe it's custom elements to Visual Studio Code. This enables code completion for Web Awesome components (also known as "code hinting" or "IntelliSense"). To enable it, you need to tell VS Code where the file is.

-1. [Install Shoelace locally](/getting-started/installation#local-installation)
+1. [Install Web Awesome locally](/getting-started/installation#local-installation)
 2. If it doesn't already exist, create a folder called `.vscode` at the root of your project
 3. If it doesn't already exist, create a file inside that folder called `settings.json`
 4. Add the following to the file
@@ -210,11 +210,11 @@ 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
+### 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 using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Web Awesome 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.
+If you are installing from the CDN, you can [download a local copy](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace/dist/web-types.json) and add it to the root of your project.

 ### Other Editors

--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -1,6 +1,6 @@
 ---
 meta:
-  title: 'Shoelace: A forward-thinking library of web components.'
+  title: 'Web Awesome: A forward-thinking library of web components.'
  description: Hand-crafted custom elements for any occasion.
 toc: false
 ---
@@ -9,7 +9,7 @@ toc: false
 <div class="splash-start">
 {% include 'workmark.njk' %}

-# <sl-visually-hidden>Shoelace:</sl-visually-hidden> A forward-thinking library of web components.
+# <wa-visually-hidden>Web Awesome:</wa-visually-hidden> A forward-thinking library of web components.

 - Works with all frameworks 🧩
 - Works with CDNs 🚛
@@ -44,18 +44,18 @@ Add the following code to your page.

 <!-- prettier-ignore -->
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/light.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/shoelace-autoloader.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/default.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/autoloader.js"></script>
 ```

-Now you have access to all of Shoelace's components! Try adding a button:
+Now you have access to all of Web Awesome's components! Try adding a button:

 ```html:preview:expanded:no-codepen
-<sl-button>Click me</sl-button>
+<wa-button>Click me</wa-button>
 ```

 :::tip
-This will activate Shoelace's experimental autoloader, which registers components on the fly as you use them. To learn more about it, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
+This will activate Web Awesome's experimental autoloader, which registers components on the fly as you use them. To learn more about it, or for other ways to install Web Awesome, refer to the [installation instructions](getting-started/installation).
 :::

 ## New to Web Components?
@@ -72,13 +72,13 @@ Unfortunately, _framework-specific_ components fail us in a number of ways:

 Web components solve these problems. They're [supported by all modern browsers](https://caniuse.com/#feat=custom-elementsv1), they're framework-agnostic, and they're [part of the standard](https://developer.mozilla.org/en-US/docs/Web/Web_Components), so we know they'll be supported for many years to come.

-This is the technology that Shoelace is built on.
+This is the technology that Web Awesome is built on.

 ## What Problem Does This Solve?

-Shoelace provides a collection of professionally designed, highly customizable UI components built on a framework agnostic technology. Why spend hundreds of hours (or more) building a design system from scratch? Why make a component library that only works with one framework?
+Web Awesome provides a collection of professionally designed, highly customizable UI components built on a framework agnostic technology. Why spend hundreds of hours (or more) building a design system from scratch? Why make a component library that only works with one framework?

-With Shoelace, you can:
+With Web Awesome, you can:

 - Start building things faster (no need to roll your own buttons)
 - Build multiple apps with different frameworks that all share the same UI components
@@ -86,15 +86,15 @@ With Shoelace, you can:
 - Incrementally adopt components as needed (no need to ditch your framework)
 - Upgrade or switch frameworks without rebuilding foundational components

-If your organization is looking to build a design system, [Shoelace will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).\* All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come.
+If your organization is looking to build a design system, [Web Awesome will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).\* All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come.

-Whether you use Shoelace as a starting point for your organization's design system or for a fun personal project, there's no limit to what you can do with it.
+Whether you use Web Awesome as a starting point for your organization's design system or for a fun personal project, there's no limit to what you can do with it.

 <small>\*Please consider giving back some of what you save by [supporting this project with a sponsorship](https://github.com/sponsors/claviska).</small>

 ## Browser Support

-Shoelace is tested in the latest two versions of the following browsers.
+Web Awesome is tested in the latest two versions of the following browsers.

 <img src="/assets/images/chrome.png" alt="Chrome" width="64" height="64">
 <img src="/assets/images/edge.png" alt="Edge" width="64" height="64">
@@ -104,11 +104,11 @@ Shoelace is tested in the latest two versions of the following browsers.

 Critical bug fixes in earlier versions will be addressed based on their severity and impact.

-If you need to support IE11 or pre-Chromium Edge, this library isn't for you. Although web components can (to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If you're using Shoelace in such a browser, you're gonna have a bad time. ⛷
+If you need to support IE11 or pre-Chromium Edge, this library isn't for you. Although web components can (to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If you're using Web Awesome in such a browser, you're gonna have a bad time. ⛷

 ## Attribution

-Special thanks to the following projects and individuals that help make Shoelace possible.
+Special thanks to the following projects and individuals that help make Web Awesome possible.

 - Components are built with [Lit](https://lit.dev/)
 - Component metadata is generated by the [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest)
@@ -120,4 +120,3 @@ Special thanks to the following projects and individuals that help make Shoelace
 - Positioning of dropdowns, tooltips, et al is handled by [Floating UI](https://floating-ui.com/)
 - Animations are courtesy of [animate.css](https://animate.style/)
 - Search is powered by [Lunr](https://lunrjs.com/)
- The Shoelace logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)
--- a/docs/pages/resources/accessibility.md
+++ b/docs/pages/resources/accessibility.md
@@ -1,24 +1,24 @@
 ---
 meta:
  title: Accessibility Commitment
-  description: Shoelace recognizes the need for all users to have undeterred access to the websites and applications that are created with it.
+  description: Web Awesome recognizes the need for all users to have undeterred access to the websites and applications that are created with it.
 ---

 # Accessibility Commitment

-Shoelace recognizes the need for all users, regardless of ability and device, to have undeterred access to the websites and applications that are created with it. This is an important goal of the project.
+Web Awesome recognizes the need for all users, regardless of ability and device, to have undeterred access to the websites and applications that are created with it. This is an important goal of the project.

-Oftentimes, people will ask “is Shoelace accessible?” I’m reluctant to answer because accessibility isn’t binary — there’s no simple “yes” or “no” response to provide. What seems accessible to a sighted user might be completely inaccessible to a non-sighted user. And even if you optimize for various screen readers, you still have to account for low-level vision, color blindness, hearing impairments, mobility impairments, and more.
+Oftentimes, people will ask “is Web Awesome accessible?” I’m reluctant to answer because accessibility isn’t binary — there’s no simple “yes” or “no” response to provide. What seems accessible to a sighted user might be completely inaccessible to a non-sighted user. And even if you optimize for various screen readers, you still have to account for low-level vision, color blindness, hearing impairments, mobility impairments, and more.

 Accessibility is something you have to continuously strive for. No individual contributor — or perhaps even an entire team — can claim their software is 100% accessible because of the sheer diversity of abilities, devices, assistive technologies, and individual use cases.

 Furthermore, accessibility doesn’t stop at the component level. Using accessible building blocks doesn’t magically make the rest of your webpage or application compliant. There is no library or overlay that will make your software “fully accessible” without putting in the effort. It’s also worth noting that web components are still somewhat bleeding edge, so browsers, assistive devices, and [even specifications](https://wicg.github.io/aom/spec/) are still evolving to help improve accessibility on the web platform.

-My commitment to Shoelace users is this: Everything I develop will be built with accessibility in mind. I will test and improve every component to the best of my ability and knowledge. I will work around upstream issues, such as browser bugs and limitations, to the best of my ability and within reason.
+My commitment to Web Awesome users is this: Everything I develop will be built with accessibility in mind. I will test and improve every component to the best of my ability and knowledge. I will work around upstream issues, such as browser bugs and limitations, to the best of my ability and within reason.

 I’m fully aware that I may not get it right every time for every user, so I invite the community to participate in this ongoing effort by submitting [issues](https://github.com/shoelace-style/shoelace/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y), [pull requests](https://github.com/shoelace-style/shoelace/pulls?q=is%3Aopen+is%3Apr+label%3Aa11y), and [discussions](https://github.com/shoelace-style/shoelace/discussions). Many accessibility improvements have already been made thanks to contributors submitting code, feedback, and suggestions.

-This is the path forward. Together, we will continue to make Shoelace accessible to as many users as possible.
+This is the path forward. Together, we will continue to make Web Awesome accessible to as many users as possible.

 — Cory LaViska<br>
-_Creator of Shoelace_
+_Creator of Web Awesome_
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
--- a/docs/pages/resources/community.md
+++ b/docs/pages/resources/community.md
@@ -1,14 +1,14 @@
 ---
 meta:
  title: Community
-  description: Shoelace has a growing community of designers and developers that are building amazing things with web components.
+  description: Web Awesome has a growing community of designers and developers that are building amazing things with web components.
 ---

 # Community

-Shoelace has a growing community of designers and developers that are building amazing things with web components. We'd love for you to become a part of it!
+Web Awesome has a growing community of designers and developers that are building amazing things with web components. We'd love for you to become a part of it!

-Please be respectful of other users and remember that Shoelace is an open source project. We'll try to help when we can, but there's no guarantee we'll be able solve your problem. Please manage your expectations and don't forget to contribute back to the conversation when you can!
+Please be respectful of other users and remember that Web Awesome is an open source project. We'll try to help when we can, but there's no guarantee we'll be able solve your problem. Please manage your expectations and don't forget to contribute back to the conversation when you can!

 ## Discussion Forum

@@ -19,10 +19,10 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
 - Show the community what you're working on
 - Learn more about the project, its values, and its roadmap

-<sl-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank">
-  <sl-icon name="github" slot="prefix"></sl-icon>
+<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank">
+  <wa-icon name="github" slot="prefix"></wa-icon>
  Join the Discussion
-</sl-button>
+</wa-button>

 ## Community Chat

@@ -31,29 +31,20 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 - Ask for help
 - Share ideas and get feedback
 - Show the community what you're working on
- Chat live with other designers, developers, and Shoelace fans
+- Chat live with other designers, developers, and Web Awesome fans

-<sl-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank">
-  <sl-icon name="discord" slot="prefix"></sl-icon>
+<wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank">
+  <wa-icon name="discord" slot="prefix"></wa-icon>
  Join the Chat
-</sl-button>
-
-## Stack Overflow
-
-You can post questions on Stack Overflow using [the "shoelace" tag](https://stackoverflow.com/questions/tagged/shoelace). This is a public forum where talented developers answer questions. It's a great way to get help, but it is not maintained by the Shoelace author.
-
-<sl-button variant="brand" href="https://stackoverflow.com/questions/ask?tags=shoelace" target="_blank">
-  <sl-icon name="stack-overflow" slot="prefix"></sl-icon>
-  Ask for Help
-</sl-button>
+</wa-button>

 ## Twitter

-Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for general updates and announcements about Shoelace. This is a great place to say "hi" or to share something you're working on. You're also welcome to follow [@claviska](https://twitter.com/claviska), the creator, for tweets about web components, web development, and life.
+Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for general updates and announcements about Web Awesome. This is a great place to say "hi" or to share something you're working on. You're also welcome to follow [@claviska](https://twitter.com/claviska), the creator, for tweets about web components, web development, and life.

 **Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.

-<sl-button variant="brand" href="https://twitter.com/shoelace_style" target="_blank">
-  <sl-icon name="twitter" slot="prefix"></sl-icon>
+<wa-button variant="brand" href="https://twitter.com/shoelace_style" target="_blank">
+  <wa-icon name="twitter" slot="prefix"></wa-icon>
  Follow on Twitter
-</sl-button>
+</wa-button>
--- a/docs/pages/resources/contributing.md
+++ b/docs/pages/resources/contributing.md
@@ -1,12 +1,12 @@
 ---
 meta:
  title: Contributing
-  description: Shoelace is an open source project, meaning everyone can use it and contribute to its development.
+  description: Web Awesome is an open source project, meaning everyone can use it and contribute to its development.
 ---

 # Contributing

-Shoelace is an open source project, meaning everyone can use it and contribute to its development. When you join our community, you'll find a friendly group of enthusiasts at all experience levels who are willing to chat about anything and everything related to Shoelace.
+Web Awesome is an open source project, meaning everyone can use it and contribute to its development. When you join our community, you'll find a friendly group of enthusiasts at all experience levels who are willing to chat about anything and everything related to Web Awesome.

 The easiest way to get started contributing is to join the [community chat](https://discord.gg/mg8f26C). This is where we hang out, discuss new ideas, ask for feedback, and more!

@@ -89,8 +89,8 @@ The author reserves the right to reject any PR that's outside the scope of the p
 To set up a local dev environment, [fork the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, clone it locally, and install its dependencies.

 ```bash
-git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
-cd shoelace
+git clone https://github.com/YOUR_GITHUB_USERNAME/webawesome
+cd webawesome
 npm install
 ```

@@ -110,10 +110,10 @@ Alternatively, you can use [Gitpod](https://www.gitpod.io/) to setup a dev envir

 ### Creating New Components

-To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.
+To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.

 ```bash
-npm run create sl-tag-name
+npm run create wa-tag-name
 ```

 This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
@@ -128,7 +128,7 @@ For more information about running and building the project locally, refer to `R

 ### Testing

-Shoelace uses [Web Test Runner](https://modern-web.dev/guides/test-runner/getting-started/) for testing. To launch the test runner during development, open a terminal and launch the dev server.
+Web Awesome uses [Web Test Runner](https://modern-web.dev/guides/test-runner/getting-started/) for testing. To launch the test runner during development, open a terminal and launch the dev server.

 ```bash
 npm start
@@ -156,9 +156,9 @@ npm run test:component breadcrumb-item

 ## Documentation

-Maintaining good documentation can be a painstaking task, but poor documentation leads to frustration and makes the project less appealing to users. Fortunately, writing documentation for Shoelace is fast and easy!
+Maintaining good documentation can be a painstaking task, but poor documentation leads to frustration and makes the project less appealing to users. Fortunately, writing documentation for Web Awesome is fast and easy!

-Most of Shoelace's technical documentation is generated with JSDoc comments and TypeScript metadata from the source code. Every property, method, event, etc. is documented this way. In-code comments encourage contributors to keep the documentation up to date as changes occur so the docs are less likely to become stale. Refer to an existing component to see how JSDoc comments are used in Shoelace.
+Most of Web Awesome's technical documentation is generated with JSDoc comments and TypeScript metadata from the source code. Every property, method, event, etc. is documented this way. In-code comments encourage contributors to keep the documentation up to date as changes occur so the docs are less likely to become stale. Refer to an existing component to see how JSDoc comments are used in Web Awesome.

 Instructions, code examples, and interactive demos are hand-curated to give users the best possible experience. Typically, the most relevant information is shown first and less common examples are shown towards the bottom. Edge cases and gotchas should be called out in context with tips or warnings.

@@ -166,9 +166,9 @@ The docs are powered by [Eleventy](https://www.11ty.dev/). Check out `docs/compo

 If you need help with documentation, feel free to reach out on the [community chat](https://discord.gg/mg8f26C).

-### Shoelace-flavoured Markdown
+### Web Awesome-flavoured Markdown

-The Shoelace documentation uses an extended version of [markdown-it](https://github.com/markdown-it/markdown-it). Generally speaking, it follows the [Commonmark spec](https://spec.commonmark.org/) while sprinkling in some additional features.
+The Web Awesome documentation uses an extended version of [markdown-it](https://github.com/markdown-it/markdown-it). Generally speaking, it follows the [Commonmark spec](https://spec.commonmark.org/) while sprinkling in some additional features.

 #### Code Previews

@@ -252,7 +252,7 @@ This section can be a lot to digest in one sitting, so don't feel like you need

 ### Accessibility

-Shoelace is built with accessibility in mind. Creating generic components that are fully accessible to users with varying capabilities across a multitude of circumstances is a daunting challenge. Oftentimes, the solution to an a11y problem is not written in black and white and, therefore, we may not get it right the first time around. There are, however, guidelines we can follow in our effort to make Shoelace an accessible foundation from which applications and websites can be built.
+Web Awesome is built with accessibility in mind. Creating generic components that are fully accessible to users with varying capabilities across a multitude of circumstances is a daunting challenge. Oftentimes, the solution to an a11y problem is not written in black and white and, therefore, we may not get it right the first time around. There are, however, guidelines we can follow in our effort to make Web Awesome an accessible foundation from which applications and websites can be built.

 We take this commitment seriously, so please ensure your contributions have this goal in mind. If you need help with anything a11y-related, please [reach out to the community](/resources/community) for assistance. If you discover an accessibility concern within the library, please file a bug on the [issue tracker](https://github.com/shoelace-style/shoelace/issues).

@@ -270,7 +270,7 @@ Components should be composable, meaning you can easily reuse them with and with

 ### Component Structure

-All components have a host element, which is a reference to the `<sl-*>` element itself. Make sure to always set the host element's `display` property to the appropriate value depending on your needs, as the default is `inline` per the custom element spec.
+All components have a host element, which is a reference to the `<wa-*>` element itself. Make sure to always set the host element's `display` property to the appropriate value depending on your needs, as the default is `inline` per the custom element spec.

 ```css
 :host {
@@ -323,9 +323,9 @@ See the source of card, dialog, or drawer for examples.

 ### Dynamic Slot Names and Expand/Collapse Icons

-A pattern has been established in `<sl-details>` and `<sl-tree-item>` for expand/collapse icons that animate on open/close. In short, create two slots called `expand-icon` and `collapse-icon` and render them both in the DOM, using CSS to show/hide only one based on the current open state. Avoid conditionally rendering them. Also avoid using dynamic slot names, such as `<slot name=${open ? 'open' : 'closed'}>`, because Firefox will not animate them.
+A pattern has been established in `<wa-details>` and `<wa-tree-item>` for expand/collapse icons that animate on open/close. In short, create two slots called `expand-icon` and `collapse-icon` and render them both in the DOM, using CSS to show/hide only one based on the current open state. Avoid conditionally rendering them. Also avoid using dynamic slot names, such as `<slot name=${open ? 'open' : 'closed'}>`, because Firefox will not animate them.

-There should be a container element immediately surrounding both slots. The container should be animated with CSS by default and it should have a part so the user can override the animation or disable it. Please refer to the source and documentation for `<sl-details>` and/or `<sl-tree-item>` for details.
+There should be a container element immediately surrounding both slots. The container should be animated with CSS by default and it should have a part so the user can override the animation or disable it. Please refer to the source and documentation for `<wa-details>` and/or `<wa-tree-item>` for details.

 ### Fallback Content in Slots

@@ -333,7 +333,7 @@ When providing fallback content inside of `<slot>` elements, avoid adding parts,

 ```html
 <slot name="icon">
-  <sl-icon part="close-icon"></sl-icon>
+  <wa-icon part="close-icon"></wa-icon>
 </slot>
 ```

@@ -341,13 +341,13 @@ This creates confusion because the part will be documented, but it won't work wh

 ### Custom Events

-Components must only emit custom events, and all custom events must start with `sl-` as a namespace. For compatibility with frameworks that utilize DOM templates, custom events must have lowercase, kebab-style names. For example, use `sl-change` instead of `slChange`.
+Components must only emit custom events, and all custom events must start with `sl-` as a namespace. For compatibility with frameworks that utilize DOM templates, custom events must have lowercase, kebab-style names. For example, use `wa-change` instead of `slChange`.

 This convention avoids the problem of browsers lowercasing attributes, causing some frameworks to be unable to listen to them. This problem isn't specific to one framework, but [Vue's documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names) provides a good explanation of the problem.

 ### Change Events

-When change events are emitted by Shoelace components, they should be named `sl-change` and they should only be emitted as a result of user input. Programmatic changes, such as setting `el.value = '…'` _should not_ result in a change event being emitted. This is consistent with how native form controls work.
+When change events are emitted by Web Awesome components, they should be named `wa-change` and they should only be emitted as a result of user input. Programmatic changes, such as setting `el.value = '…'` _should not_ result in a change event being emitted. This is consistent with how native form controls work.

 ### CSS Custom Properties

@@ -394,7 +394,7 @@ This convention can be relaxed when the developer experience is greatly improved

 ### Naming CSS Parts

-While CSS parts can be named [virtually anything](https://www.abeautifulsite.net/posts/valid-names-for-css-parts/), within Shoelace they must use the kebab-case convention and lowercase letters. Additionally, [a BEM-inspired naming convention](https://www.abeautifulsite.net/posts/css-parts-inspired-by-bem/) is used to distinguish parts, subparts, and states.
+While CSS parts can be named [virtually anything](https://www.abeautifulsite.net/posts/valid-names-for-css-parts/), within Web Awesome they must use the kebab-case convention and lowercase letters. Additionally, [a BEM-inspired naming convention](https://www.abeautifulsite.net/posts/css-parts-inspired-by-bem/) is used to distinguish parts, subparts, and states.

 When composing elements, use `part` to export the host element and `exportparts` to export its parts.

@@ -402,7 +402,7 @@ When composing elements, use `part` to export the host element and `exportparts`
 render() {
  return html`
    <div part="base">
-      <sl-icon part="icon" exportparts="base:icon__base" ...></sl-icon>
+      <wa-icon part="icon" exportparts="base:icon__base" ...></wa-icon>
    </div>
  `;
 }
@@ -414,13 +414,13 @@ This results in a consistent, easy to understand structure for parts. In this ex

 TL;DR – a component is a dependency if and only if it's rendered inside another component's shadow root.

-Many Shoelace components use other Shoelace components internally. For example, `<sl-button>` uses both `<sl-icon>` and `<sl-spinner>` for its caret icon and loading state, respectively. Since these components appear in the button's shadow root, they are considered dependencies of Button. Since dependencies are automatically loaded, users only need to import the button and everything will work as expected.
+Many Web Awesome components use other Web Awesome components internally. For example, `<wa-button>` uses both `<wa-icon>` and `<wa-spinner>` for its caret icon and loading state, respectively. Since these components appear in the button's shadow root, they are considered dependencies of Button. Since dependencies are automatically loaded, users only need to import the button and everything will work as expected.

-Contrast this to `<sl-select>` and `<sl-option>`. At first, one might assume that Option is a dependency of Select. After all, you can't really use Select without slotting in at least one Option. However, Option _is not_ a dependency of Select! The reason is because no Option is rendered in the Select's shadow root. Since the options are provided by the user, it's up to them to import both components independently.
+Contrast this to `<wa-select>` and `<wa-option>`. At first, one might assume that Option is a dependency of Select. After all, you can't really use Select without slotting in at least one Option. However, Option _is not_ a dependency of Select! The reason is because no Option is rendered in the Select's shadow root. Since the options are provided by the user, it's up to them to import both components independently.

-People often suggest that Shoelace should auto-load Select + Option, Menu + Menu Item, Breadcrumb + Breadcrumb Item, etc. Although some components are designed to work together, they're technically not dependencies so eagerly loading them may not be desirable. What if someone wants to roll their own component with a superset of features? They wouldn't be able to if Shoelace automatically imported it!
+People often suggest that Web Awesome should auto-load Select + Option, Menu + Menu Item, Breadcrumb + Breadcrumb Item, etc. Although some components are designed to work together, they're technically not dependencies so eagerly loading them may not be desirable. What if someone wants to roll their own component with a superset of features? They wouldn't be able to if Web Awesome automatically imported it!

-Similarly, in the case of `<sl-radio-group>` there was originally only `<sl-radio>`, but now you can use either `<sl-radio>` or `<sl-radio-button>` as child elements. Which component(s) should be auto-loaded dependencies in this case? Had Radio been a dependency of Radio Group, users that only wanted Radio Buttons would be forced to register both with no way to opt out and no way to provide their own customized version.
+Similarly, in the case of `<wa-radio-group>` there was originally only `<wa-radio>`, but now you can use either `<wa-radio>` or `<wa-radio-button>` as child elements. Which component(s) should be auto-loaded dependencies in this case? Had Radio been a dependency of Radio Group, users that only wanted Radio Buttons would be forced to register both with no way to opt out and no way to provide their own customized version.

 For non-dependencies, _the user_ should decide what gets registered, even if it comes with a minor inconvenience.

@@ -437,10 +437,10 @@ Form controls should support submission and validation through the following con

 ### System Icons

-Avoid inlining SVG icons inside of templates. If a component requires an icon, make sure `<sl-icon>` is a dependency of the component and use the [system library](/components/icon#customizing-the-system-library):
+Avoid inlining SVG icons inside of templates. If a component requires an icon, make sure `<wa-icon>` is a dependency of the component and use the [system library](/components/icon#customizing-the-system-library):

 ```html
-<sl-icon library="system" name="..."></sl-icon>
+<wa-icon library="system" name="..."></wa-icon>
 ```

 This will render the icons instantly whereas the default library will fetch them from a remote source. If an icon isn't available in the system library, you will need to add it to `library.system.ts`. Using the system library ensures that all icons load instantly and are customizable by users who wish to provide a custom resolver for the system library.
@@ -453,7 +453,7 @@ What to test for a given component:
 - Add at least one accessibility test (The accessibility check only covers the parts of the DOM which are currently visible and rendered. Depending on the component, more than one accessibility test is required to cover all scenarios.):

 ```ts
-const myComponent = await fixture<SlAlert>(html`<sl-my-component>SomeContent</sl-my-component>`);
+const myComponent = await fixture<WaAlert>(html`<wa-my-component>SomeContent</wa-my-component>`);

 await expect(myComponent).to.be.accessible();
 ```
--- a/docs/pages/tokens/color.md
+++ b/docs/pages/tokens/color.md
@@ -6,7 +6,7 @@ meta:

 # Color Tokens

-Color tokens help maintain consistent use of color throughout your app. Shoelace provides palettes for theme colors and primitives that you can use as a foundation for your design system.
+Color tokens help maintain consistent use of color throughout your app. Web Awesome provides palettes for theme colors and primitives that you can use as a foundation for your design system.

 Color tokens are referenced using the `--wa-color-{name}-{n}` CSS custom property, where `{name}` is the name of the palette and `{n}` is the numeric value of the desired swatch.

--- a/docs/pages/tutorials/integrating-with-laravel.md
+++ b/docs/pages/tutorials/integrating-with-laravel.md
@@ -1,12 +1,12 @@
 ---
 meta:
  title: Integrating with Laravel
-  description: This page explains how to integrate Shoelace with a Laravel app.
+  description: This page explains how to integrate Web Awesome with a Laravel app.
 ---

 # Integrating with Laravel

-This page explains how to integrate Shoelace with a [Laravel 9](https://laravel.com) app using Vite. For additional details refer to the [Bundling Assets (Vite)](https://laravel.com/docs/9.x/vite) section in the official Laravel docs.
+This page explains how to integrate Web Awesome with a [Laravel 9](https://laravel.com) app using Vite. For additional details refer to the [Bundling Assets (Vite)](https://laravel.com/docs/9.x/vite) section in the official Laravel docs.

 :::tip
 This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/shoelace-style/shoelace/blob/next/docs/tutorials/integrating-with-laravel.md) to make it better.
@@ -22,9 +22,9 @@ This integration has been tested with the following:
 ## Instructions

 These instructions assume a default [Laravel 9 install](https://laravel.com/docs/9.x/installation) that uses [Vite](https://vitejs.dev/) to bundle assets.
-Be sure to run `npm install` to install the default Laravel front-end dependencies before installing Shoelace.
+Be sure to run `npm install` to install the default Laravel front-end dependencies before installing Web Awesome.

-### Install the Shoelace package
+### Install the Web Awesome package

 ```bash
 npm install @shoelace-style/shoelace
@@ -32,15 +32,15 @@ npm install @shoelace-style/shoelace

 ### Import the Default Theme

-Import the Shoelace default theme (stylesheet) in `/resources/css/app.css`:
+Import the Web Awesome default theme (stylesheet) in `/resources/css/app.css`:

 ```css
-@import '/node_modules/@shoelace-style/shoelace/dist/themes/light.css';
+@import '/node_modules/@shoelace-style/shoelace/dist/themes/default.css';
 ```

-### Import Your Shoelace Components
+### Import Your Web Awesome Components

-Import each Shoelace component you plan to use in `/resources/js/bootstrap.js`. Use the full path to each component (as outlined in the [Cherry Picking instructions](https://shoelace.style/getting-started/installation#cherry-picking)). You can find the full import statement for a component in the _Importing_ section of the component's documentation (use the _Bundler_ import). Your imports should look similar to:
+Import each Web Awesome component you plan to use in `/resources/js/bootstrap.js`. Use the full path to each component (as outlined in the [Cherry Picking instructions](https://shoelace.style/getting-started/installation#cherry-picking)). You can find the full import statement for a component in the _Importing_ section of the component's documentation (use the _Bundler_ import). Your imports should look similar to:

 ```js
 import '@shoelace-style/shoelace/dist/components/button/button.js';
@@ -48,9 +48,9 @@ import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
 ```

-### Copy the Shoelace Static Assets (icons, images, etc.) to a Public Folder
+### Copy the Web Awesome Static Assets (icons, images, etc.) to a Public Folder

-Since Vite has no way to copy arbitrary assets into your build (like webpack), you need to manually copy the Shoelace static assets to your project's public folder. Run this command from your project's root directory to copy the Shoelace static assets to the `./public/assets` folder:
+Since Vite has no way to copy arbitrary assets into your build (like webpack), you need to manually copy the Web Awesome static assets to your project's public folder. Run this command from your project's root directory to copy the Web Awesome static assets to the `./public/assets` folder:

 ```sh
 cp -aR node_modules/@shoelace-style/shoelace/dist/assets/ ./public/assets
@@ -58,7 +58,7 @@ cp -aR node_modules/@shoelace-style/shoelace/dist/assets/ ./public/assets

 ### Set the Base Path

-Add the base path to your Shoelace assets (icons, images, etc.) in `/resources/js/bootstrap.js`. The path must point to the same folder where you copy assets to in the next step.
+Add the base path to your Web Awesome assets (icons, images, etc.) in `/resources/js/bootstrap.js`. The path must point to the same folder where you copy assets to in the next step.

 ```js
 import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
@@ -111,4 +111,4 @@ Add the `@vite()` Blade directive to the `<head>` of your application's root tem
 </head>
 ```

-Have fun using Shoelace components in your Laravel app!
+Have fun using Web Awesome components in your Laravel app!
--- a/docs/pages/tutorials/integrating-with-nextjs.md
+++ b/docs/pages/tutorials/integrating-with-nextjs.md
@@ -1,12 +1,12 @@
 ---
 meta:
  title: Integrating with NextJS
-  description: This page explains how to integrate Shoelace with a NextJS app.
+  description: This page explains how to integrate Web Awesome with a NextJS app.
 ---

 # Integrating with NextJS

-This page explains how to integrate Shoelace with a NextJS app.
+This page explains how to integrate Web Awesome with a NextJS app.

 :::tip
 This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/shoelace-style/shoelace/blob/next/docs/tutorials/integrating-with-nextjs.md) to make it better.
@@ -18,11 +18,11 @@ This integration has been tested with the following:

 - Node: 16.13.1
 - NextJS: 12.1.6
- Shoelace: 2.0.0-beta.74
+- Web Awesome: 2.0.0-beta.74

 ## Instructions

-To get started using Shoelace with NextJS, the following packages must be installed.
+To get started using Web Awesome with NextJS, the following packages must be installed.

 ```bash
 yarn add @shoelace-style/shoelace copy-webpack-plugin next-compose-plugins next-transpile-modules
@@ -30,7 +30,7 @@ yarn add @shoelace-style/shoelace copy-webpack-plugin next-compose-plugins next-

 ### Enabling ESM

-Because Shoelace utilizes ESM, we need to modify our `package.json` to support ESM packages. Simply add the following to
+Because Web Awesome utilizes ESM, we need to modify our `package.json` to support ESM packages. Simply add the following to
 your root of `package.json`:

 ```
@@ -41,15 +41,15 @@ There's one more step to enable ESM in NextJS, but we'll tackle that in our Next

 ### Importing the Default Theme

-The next step is to import Shoelace's default theme (stylesheet) in your `_app.js` file:
+The next step is to import Web Awesome's default theme (stylesheet) in your `_app.js` file:

 ```css
-import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/default.css';
 ```

 ### Defining Custom Elements

-After importing the theme, you'll need to import the JavaScript files for Shoelace. However, this is a bit tricky to do in NextJS thanks to the SSR environment not having any of the required browser APIs to define endpoints.
+After importing the theme, you'll need to import the JavaScript files for Web Awesome. However, this is a bit tricky to do in NextJS thanks to the SSR environment not having any of the required browser APIs to define endpoints.

 We'll want to create a component that uses [React's `useLayoutEffect`](https://reactjs.org/docs/hooks-reference.html#uselayouteffect) to add in the custom components before the first render:

@@ -84,7 +84,7 @@ If we use `useEffect` instead of `useLayoutEffect`, the initial render will occu
 :::

 :::tip
-This will import all Shoelace components for convenience. To selectively import components, refer to the [Using webpack](/getting-started/installation#using-webpack) section of the docs.
+This will import all Web Awesome components for convenience. To selectively import components, refer to the [Using webpack](/getting-started/installation#using-webpack) section of the docs.
 :::

 You may be wondering where the `URL` property is coming from. We'll address that in the next few sections.
@@ -126,12 +126,12 @@ MyApp.getInitialProps = async context => {
 ```

 :::tip
-You'll need to set this `BASE_URL` variable inside the build process of whatever local build or CI/CD you have. This will need to be an absolute URL, as a relative URL will cause shoelace to throw a warning
+You'll need to set this `BASE_URL` variable inside the build process of whatever local build or CI/CD you have. This will need to be an absolute URL, as a relative URL will cause Web Awesome to throw a warning
 :::

 ### webpack Config

-Next we need to add Shoelace's assets to the final build output. To do this, modify `next.config.js` to look like this.
+Next we need to add Web Awesome's assets to the final build output. To do this, modify `next.config.js` to look like this.

 ```javascript
 import { dirname, resolve } from 'path';
@@ -145,7 +145,7 @@ const withTMCompiled = withTM(['@shoelace-style/shoelace']);
 const __dirname = dirname(fileURLToPath(import.meta.url));

 export default withPlugins([withTMCompiled], {
-  // This is required for ESM to work properly with Shoelace
+  // This is required for ESM to work properly with Web Awesome
  experimental: { esmExternals: 'loose' },
  webpack: config => {
    config.plugins.push(
--- a/docs/pages/tutorials/integrating-with-rails.md
+++ b/docs/pages/tutorials/integrating-with-rails.md
@@ -1,12 +1,12 @@
 ---
 meta:
  title: Integrating with Rails
-  description: This page explains how to integrate Shoelace with a Rails app.
+  description: This page explains how to integrate Web Awesome with a Rails app.
 ---

 # Integrating with Rails

-This page explains how to integrate Shoelace with a Rails app.
+This page explains how to integrate Web Awesome with a Rails app.

 :::tip
 This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/shoelace-style/shoelace/blob/next/docs/tutorials/integrating-with-rails.md) to make it better.
@@ -22,7 +22,7 @@ This integration has been tested with the following:

 ## Instructions

-To get started using Shoelace with Rails, the following packages must be installed.
+To get started using Web Awesome with Rails, the following packages must be installed.

 ```bash
 yarn add @shoelace-style/shoelace copy-webpack-plugin
@@ -30,7 +30,7 @@ yarn add @shoelace-style/shoelace copy-webpack-plugin

 ### Importing the Default Theme

-The next step is to import Shoelace's default theme (stylesheet) in `app/javascript/stylesheets/application.scss`.
+The next step is to import Web Awesome's default theme (stylesheet) in `app/javascript/stylesheets/application.scss`.

 ```css
@import '@shoelace-style/shoelace/dist/themes/light';
@@ -41,11 +41,11 @@ Fore more details about themes, please refer to [Theme Basics](/getting-started/

 ### Importing Required Scripts

-After importing the theme, you'll need to import the JavaScript files for Shoelace. Add the following code to `app/javascript/packs/application.js`.
+After importing the theme, you'll need to import the JavaScript files for Web Awesome. Add the following code to `app/javascript/packs/application.js`.

 ```js
 import '../stylesheets/application.scss'
-import { setBasePath, SlAlert, SlAnimation, SlButton, ... } from '@shoelace-style/shoelace'
+import { setBasePath, WaAlert, WaAnimation, WaButton, ... } from '@shoelace-style/shoelace'

 // ...

@@ -58,12 +58,12 @@ setBasePath(rootUrl + '/packs/js/')

 ### webpack Config

-Next we need to add Shoelace's assets to the final build output. To do this, modify `config/webpack/environment.js` to look like this.
+Next we need to add Web Awesome's assets to the final build output. To do this, modify `config/webpack/environment.js` to look like this.

 ```js
 const { environment } = require('@rails/webpacker');

-// Shoelace config
+// Web Awesome config
 const path = require('path');
 const CopyPlugin = require('copy-webpack-plugin');

@@ -102,9 +102,9 @@ The final step is to add the corresponding `pack_tags` to the page. You should h
 </html>
 ```

-Now you can start using Shoelace components with Rails!
+Now you can start using Web Awesome components with Rails!

 ## Additional Resources

 - There is a third-party [example repo](https://github.com/ParamagicDev/rails-shoelace-example), courtesy of [ParamagicDev](https://github.com/ParamagicDev) available to help you get started.
- If you would like to avoid repeating this process, check out the associated [Railsbyte for Shoelace](https://railsbytes.com/templates/X8BsEb).
+- If you would like to avoid repeating this process, check out the associated [Railsbyte for Web Awesome](https://railsbytes.com/templates/X8BsEb).
--- a/package.json
+++ b/package.json
@@ -6,18 +6,18 @@
  "author": "Web Awesome",
  "license": "MIT",
  "customElements": "dist/custom-elements.json",
-  "web-types": "./web-types.json",
+  "web-types": "./dist/web-types.json",
  "type": "module",
-  "types": "dist/shoelace.d.ts",
-  "jsdelivr": "./cdn/shoelace-autoloader.js",
+  "types": "dist/webawesome.d.ts",
+  "jsdelivr": "./cdn/autoloader.js",
  "exports": {
    ".": {
-      "types": "./dist/shoelace.d.ts",
-      "import": "./dist/shoelace.js"
+      "types": "./dist/webawesome.d.ts",
+      "import": "./dist/webawesome.js"
    },
    "./dist/custom-elements.json": "./dist/custom-elements.json",
-    "./dist/shoelace.js": "./dist/shoelace.js",
-    "./dist/shoelace-autoloader.js": "./dist/shoelace-autoloader.js",
+    "./dist/webawesome.js": "./dist/webawesome.js",
+    "./dist/autoloader.js": "./dist/autoloader.js",
    "./dist/themes/*": "./dist/themes/*",
    "./dist/components/*": "./dist/components/*",
    "./dist/utilities/*": "./dist/utilities/*",
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -97,9 +97,9 @@ async function buildTheSource() {
      // NOTE: Entry points must be mapped in package.json > exports, otherwise users won't be able to import them!
      //
      // The whole shebang
-      './src/shoelace.ts',
+      './src/webawesome.ts',
      // The auto-loader
-      './src/shoelace-autoloader.ts',
+      './src/autoloader.ts',
      // Components
      ...(await globby('./src/components/**/!(*.(style|test)).ts')),
      // Translations
@@ -128,7 +128,7 @@ async function buildTheSource() {
    splitting: true,
    plugins: [
      replace({
-        __SHOELACE_VERSION__: shoelaceVersion
+        __WEBAWESOME_VERSION__: shoelaceVersion
      })
    ]
  };
@@ -252,7 +252,7 @@ if (serve) {
    startPath: '/',
    port,
    logLevel: 'silent',
-    logPrefix: '[shoelace]',
+    logPrefix: '[webawesome]',
    logFileChanges: true,
    notify: false,
    single: false,
--- a/scripts/make-react.js
+++ b/scripts/make-react.js
@@ -21,7 +21,7 @@ const components = getAllComponents(metadata);
 const index = [];

 components.map(component => {
-  const tagWithoutPrefix = component.tagName.replace(/^sl-/, '');
+  const tagWithoutPrefix = component.tagName.replace(/^wa-/, '');
  const componentDir = path.join(reactDir, tagWithoutPrefix);
  const componentFile = path.join(componentDir, 'index.ts');
  const importPath = component.path.replace(/\.js$/, '.component.js');
--- a/scripts/plop/plopfile.js
+++ b/scripts/plop/plopfile.js
@@ -1,5 +1,5 @@
 export default function (plop) {
-  plop.setHelper('tagWithoutPrefix', tag => tag.replace(/^sl-/, ''));
+  plop.setHelper('tagWithoutPrefix', tag => tag.replace(/^wa-/, ''));

  plop.setHelper('tagToTitle', tag => {
    const withoutPrefix = plop.getHelper('tagWithoutPrefix');
@@ -13,10 +13,10 @@ export default function (plop) {
      {
        type: 'input',
        name: 'tag',
-        message: 'Tag name? (e.g. sl-button)',
+        message: 'Tag name? (e.g. wa-button)',
        validate: value => {
-          // Start with sl- and include only a-z + dashes
-          if (!/^sl-[a-z-+]+/.test(value)) {
+          // Start with wa- and include only a-z + dashes
+          if (!/^wa-[a-z-+]+/.test(value)) {
            return false;
          }

@@ -54,12 +54,6 @@ export default function (plop) {
        type: 'add',
        path: '../../docs/pages/components/{{ tagWithoutPrefix tag }}.md',
        templateFile: 'templates/component/docs.hbs'
-      },
-      {
-        type: 'modify',
-        path: '../../src/shoelace.ts',
-        pattern: /\/\* plop:component \*\//,
-        template: `export { default as {{ properCase tag }} } from './components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.js';\n/* plop:component */`
      }
    ]
  });
--- a/scripts/plop/templates/component/component.hbs
+++ b/scripts/plop/templates/component/component.hbs
@@ -2,7 +2,7 @@ import { property } from 'lit/decorators.js';
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
 import { watch } from '../../internal/watch.js';
-import ShoelaceElement from '../../internal/shoelace-element.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
 import styles from './{{ tagWithoutPrefix tag }}.styles.js';
 import type { CSSResultGroup } from 'lit';

@@ -12,9 +12,9 @@ import type { CSSResultGroup } from 'lit';
 * @status experimental
 * @since 2.0
 *
- * @dependency sl-example
+ * @dependency wa-example
 *
- * @event sl-event-name - Emitted as an example.
+ * @event wa-event-name - Emitted as an example.
 *
 * @slot - The default slot.
 * @slot example - An example slot.
@@ -23,7 +23,7 @@ import type { CSSResultGroup } from 'lit';
 *
 * @cssproperty --example - An example CSS custom property.
 */
-export default class {{ properCase tag }} extends ShoelaceElement {
+export default class {{ properCase tag }} extends WebAwesomeElement {
  static styles: CSSResultGroup = styles;

  private readonly localize = new LocalizeController(this);
--- a/scripts/plop/templates/component/tests.hbs
+++ b/scripts/plop/templates/component/tests.hbs
@@ -1,4 +1,4 @@
-import '../../../dist/shoelace.js';
+import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';

 describe('<{{ tag }}>', () => {
--- a/src/shoelace-autoloader.ts
+++ b/src/shoelace-autoloader.ts
@@ -18,7 +18,7 @@ export async function discover(root: Element | ShadowRoot) {
  const rootIsCustomElement = rootTagName?.includes('-');
  const tags = [...root.querySelectorAll(':not(:defined)')]
    .map(el => el.tagName.toLowerCase())
-    .filter(tag => tag.startsWith('sl-'));
+    .filter(tag => tag.startsWith('wa-'));

  // If the root element is an undefined custom element, add it to the list
  if (rootIsCustomElement && !customElements.get(rootTagName)) {
@@ -35,7 +35,7 @@ export async function discover(root: Element | ShadowRoot) {
 * Registers an element by tag name.
 */
 function register(tagName: string): Promise<void> {
-  const tagWithoutPrefix = tagName.replace(/^sl-/i, '');
+  const tagWithoutPrefix = tagName.replace(/^wa-/i, '');
  const path = getBasePath(`components/${tagWithoutPrefix}/${tagWithoutPrefix}.js`);

  // If the element is already defined, there's nothing more to do
--- a/Show More
+++ b/Show More