remove comment

Co-authored-by: Thomas Allmer <d4kmor@gmail.com>

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,4 @@
 contact_links:
-  - name: Feature Requests
-    url: https://github.com/shoelace-style/shoelace/discussions/categories/ideas
-    about: All requests for new features should go here.
   - name: Help & Support
     url: https://github.com/shoelace-style/shoelace/discussions/categories/help
     about: Please don't create issues for personal help requests. Instead, ask your question on the discussion forum.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,15 @@
+---
+name: Feature Request
+about: Suggest an idea for this project.
+title: ''
+labels: feature
+---
+
+### What issue are you having?
+Provide a clear and concise description of the problem you're facing.
+
+### Describe the solution you'd like
+How would you like to see the library solve it?
+
+### Describe alternatives you've considered
+In what ways have you tried to solve this with the current version?

.github/SECURITY.md

@@ -1,7 +1,7 @@
 # Reporting Security Issues
 
-We take security issues in Web Awesome very seriously and appreciate your efforts to disclose your findings responsibly.
+We take security issues in Shoelace very seriously and appreciate your efforts to disclose your findings responsibly.
 
-To report a security issue, email [cory@fontawesome.com](mailto:cory@abeautifulsite.net) and include "WEB AWESOME SECURITY" in the subject line.
+To report a security issue, email [cory@abeautifulsite.net](mailto:cory@abeautifulsite.net) and include "SHOELACE SECURITY" in the subject line.
 
 We'll respond as soon as possible and keep you updated throughout the process.

.gitignore

@@ -1,8 +1,6 @@
 _site
 .cache
 .DS_Store
-package.json
-package-lock.json
 dist
 docs/assets/images/sprite.svg
 node_modules

.prettierignore

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

.vscode/settings.json

@@ -3,6 +3,5 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  },
-  "debug.enableStatusBarColor": false
+  }
 }

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing to Web Awesome
+# Contributing to Shoelace
 
 Before contributing, please review the contributions guidelines at:
 

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2023 Fonticons, Inc.
+Copyright (c) 2020 A Beautiful Site, LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,4 +1,4 @@
-# Web Awesome
+# Shoelace
 
 A forward-thinking library of web components.
 
@@ -9,7 +9,7 @@ A forward-thinking library of web components.
 - Built with accessibility in mind ♿️
 - Open source 😸
 
-Built by the folks behind [Font Awesome](https://fontawesome.com/).
+Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
 
 ---
 
@@ -21,15 +21,15 @@ Twitter: [@shoelace_style](https://twitter.com/shoelace_style)
 
 ---
 
-## Developers ✨
+## Shoemakers 🥾
 
-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.
+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.
 
-**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.
+**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.
 
 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 Web Awesome?
+### What are you using to build Shoelace?
 
 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/webawesome
-cd webawesome
+git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
+cd shoelace
 npm install
 ```
 
@@ -63,18 +63,30 @@ npm run build
 
 ### Creating New Components
 
-To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
+To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.
 
 ```bash
-npm run create wa-tag-name
+npm run create sl-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
 
-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.
+Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
 
 ## License
 
-Web Awesome is available under the terms of the MIT license.
+Shoelace is designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It’s available under the terms of the MIT license.
+
+Designing, developing, and supporting this library requires a lot of time, effort, and skill. I’d like to keep it open source so everyone can use it, but that doesn’t provide me with any income.
+
+**Therefore, if you’re using my software to make a profit,** I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor. There are multiple tiers to choose from with benefits at every level, including prioritized support, bug fixes, feature requests, and advertising.
+
+👇 Your support is very much appreciated! 👇
+
+- [Become a sponsor](https://github.com/sponsors/claviska)
+- [Star on GitHub](https://github.com/shoelace-style/shoelace/stargazers)
+- [Follow on Twitter](https://twitter.com/shoelace_style)
+
+Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾

cspell.json

@@ -29,7 +29,6 @@
     "colour",
     "combobox",
     "Commonmark",
-    "compat",
     "Composability",
     "Consolas",
     "contenteditable",
@@ -52,7 +51,6 @@
     "erroneou",
     "errormessage",
     "esbuild",
-    "exportmaps",
     "exportparts",
     "fieldsets",
     "formaction",
@@ -90,7 +88,6 @@
     "listbox",
     "listitem",
     "litelement",
-    "longform",
     "lowercasing",
     "Lucide",
     "maxlength",
@@ -111,14 +108,10 @@
     "novalidate",
     "npmdir",
     "Numberish",
-    "oklab",
-    "oklch",
-    "onscrollend",
     "outdir",
     "ParamagicDev",
     "peta",
     "petabit",
-    "Preact",
     "prismjs",
     "progressbar",
     "radiogroup",
@@ -159,23 +152,19 @@
     "tinycolor",
     "transitionend",
     "treeitem",
-    "treeshaking",
     "Triaging",
     "turbolinks",
     "typeof",
     "unbundles",
     "unbundling",
     "unicons",
-    "unsanitized",
     "unsupportive",
     "valpha",
     "valuenow",
     "valuetext",
-    "viewports",
-    "WCAG",
-    "webawesome",
     "WEBP",
-    "Webpacker"
+    "Webpacker",
+    "wordmark"
   ],
   "ignorePaths": [
     "package.json",

custom-elements-manifest.config.js

@@ -1,10 +1,9 @@
-import * as path from 'path';
-import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
-import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
+import { generateCustomData } from 'cem-plugin-vs-code-custom-data-generator';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
 import commandLineArgs from 'command-line-args';
 import fs from 'fs';
+import * as path from 'path';
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
@@ -33,14 +32,14 @@ export default {
   plugins: [
     // Append package data
     {
-      name: 'wa-package-data',
+      name: 'shoelace-package-data',
       packageLinkPhase({ customElementsManifest }) {
         customElementsManifest.package = { name, description, version, author, homepage, license };
       }
     },
     // Infer tag names because we no longer use @customElement decorators.
     {
-      name: 'wa-infer-tag-names',
+      name: 'shoelace-infer-tag-names',
       analyzePhase({ ts, node, moduleDoc }) {
         switch (node.kind) {
           case ts.SyntaxKind.ClassDeclaration: {
@@ -55,7 +54,7 @@ export default {
             }
 
             const tagNameWithoutPrefix = path.basename(importPath, '.component.ts');
-            const tagName = 'wa-' + tagNameWithoutPrefix;
+            const tagName = 'sl-' + tagNameWithoutPrefix;
 
             classDoc.tagNameWithoutPrefix = tagNameWithoutPrefix;
             classDoc.tagName = tagName;
@@ -68,7 +67,7 @@ export default {
     },
     // Parse custom jsDoc tags
     {
-      name: 'wa-custom-tags',
+      name: 'shoelace-custom-tags',
       analyzePhase({ ts, node, moduleDoc }) {
         switch (node.kind) {
           case ts.SyntaxKind.ClassDeclaration: {
@@ -138,7 +137,7 @@ export default {
       }
     },
     {
-      name: 'wa-react-event-names',
+      name: 'shoelace-react-event-names',
       analyzePhase({ ts, node, moduleDoc }) {
         switch (node.kind) {
           case ts.SyntaxKind.ClassDeclaration: {
@@ -156,7 +155,7 @@ export default {
       }
     },
     {
-      name: 'wa-translate-module-paths',
+      name: 'shoelace-translate-module-paths',
       packageLinkPhase({ customElementsManifest }) {
         customElementsManifest?.modules?.forEach(mod => {
           //
@@ -192,26 +191,9 @@ export default {
       }
     },
     // Generate custom VS Code data
-    customElementVsCodePlugin({
+    generateCustomData({
       outdir,
-      cssFileName: null,
-      referencesTemplate: (_, tag) => [
-        {
-          name: 'Documentation',
-          url: `https://shoelace.style/components/${tag.replace('wa-', '')}`
-        }
-      ]
-    }),
-    customElementJetBrainsPlugin({
-      outdir: './dist',
-      excludeCss: true,
-      packageJson: false,
-      referencesTemplate: (_, tag) => {
-        return {
-          name: 'Documentation',
-          url: `https://shoelace.style/components/${tag.replace('wa-', '')}`
-        };
-      }
+      cssFileName: null
     })
   ]
 };

docs/_includes/component.njk

@@ -1,12 +1,12 @@
 {% extends "default.njk" %}
 
 {# Find the component based on the `tag` front matter #}
-{% set component = getComponent('wa-' + page.fileSlug) %}
+{% set component = getComponent('sl-' + page.fileSlug) %}
 
 {% block content %}
   {# Determine the badge variant #}
   {% if component.status == 'stable' %}
-    {% set badgeVariant = 'brand' %}
+    {% set badgeVariant = 'primary' %}
   {% elseif component.status == 'experimental' %}
     {% set badgeVariant = 'warning' %}
   {% elseif component.status == 'planned' %}
@@ -26,12 +26,12 @@
     </div>
 
     <div class="component-header__info">
-      <wa-badge variant="neutral" pill>
+      <sl-badge variant="neutral" pill>
         Since {{component.since or '?' }}
-      </wa-badge>
-      <wa-badge variant="{{ badgeVariant }}" pill style="text-transform: capitalize;">
+      </sl-badge>
+      <sl-badge variant="{{ badgeVariant }}" pill style="text-transform: capitalize;">
         {{ component.status }}
-      </wa-badge>
+      </sl-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>
 
-  <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-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-panel name="script">
+    <sl-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>
-    </wa-tab-panel>
+    </sl-tab-panel>
 
-    <wa-tab-panel name="import">
+    <sl-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>
-    </wa-tab-panel>
+    </sl-tab-panel>
 
-    <wa-tab-panel name="bundler">
+    <sl-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>
-    </wa-tab-panel>
+    </sl-tab-panel>
 
-    <wa-tab-panel name="react">
+    <sl-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>
-    </wa-tab-panel>
-  </wa-tab-group>
+    </sl-tab-panel>
+  </sl-tab-group>
 
   {# Slots #}
   {% if component.slots.length %}
@@ -137,17 +137,15 @@
           <tr>
             <td>
               <code class="nowrap">{{ prop.name }}</code>
-              {% if prop.attribute | length > 0 %}
-                {% if prop.attribute != prop.name %}
-                  <br>
-                  <wa-tooltip content="This attribute is different from its property">
-                    <small>
-                      <code class="nowrap">
-                        {{ prop.attribute }}
-                      </code>
-                    </small>
-                  </wa-tooltip>
-                {% endif %}
+              {% if prop.attribute != prop.name %}
+                <br>
+                <sl-tooltip content="This attribute is different from its property">
+                  <small>
+                    <code class="nowrap">
+                      {{ prop.attribute }}
+                    </code>
+                  </small>
+                </sl-tooltip>
               {% endif %}
             </td>
             <td>
@@ -155,7 +153,7 @@
             </td>
             <td style="text-align: center;">
               {% if prop.reflects %}
-                <wa-icon label="yes" name="check-lg"></wa-icon>
+                <sl-icon label="yes" name="check-lg"></sl-icon>
               {% endif %}
             </td>
             <td>
@@ -187,7 +185,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#attributes-and-properties') }}">attributes and properties</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#properties') }}">attributes and properties</a>.</em></p>
   {% endif %}
 
   {# Events #}
@@ -307,7 +305,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing/#css-parts') }}">customizing CSS parts</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#component-parts') }}">customizing CSS parts</a>.</em></p>
   {% endif %}
 
   {# Animations #}
@@ -331,7 +329,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing#animations') }}">customizing animations</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#animations') }}">customizing animations</a>.</em></p>
   {% endif %}
 
   {# Dependencies #}

docs/_includes/default.njk

@@ -2,7 +2,7 @@
 <html
   lang="en"
   data-layout="{{ layout }}"
-  data-wa-version="{{ meta.version }}"
+  data-shoelace-version="{{ meta.version }}"
 >
   <head>
     {# Metadata #}
@@ -20,7 +20,7 @@
     <link rel="stylesheet" href="{{ assetUrl('styles/search.css') }}" />
 
     {# Favicons #}
-    <link rel="icon" href="{{ assetUrl('images/favicon.svg') }}" type="image/x-icon" />
+    <link rel="icon" href="{{ assetUrl('images/logo.svg') }}" type="image/x-icon" />
 
     {# Twitter Cards #}
     <meta name="twitter:card" content="summary" />
@@ -33,26 +33,20 @@
     <meta property="og:description" content="{{ meta.description }}" />
     <meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
 
-    {# Web Awesome #}
-    <link rel="stylesheet" href="/dist/themes/applied.css" />
-    <link rel="stylesheet" href="/dist/themes/forms.css" />
-    <link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/default.css" />
-    <script type="module" src="/dist/autoloader.js"></script>
+    {# Shoelace #}
+    <link rel="stylesheet" href="/dist/themes/light.css" />
+    <link rel="stylesheet" href="/dist/themes/dark.css" />
+    <script type="module" src="/dist/shoelace-autoloader.js"></script>
 
     {# Set the initial theme and menu states here to prevent flashing #}
     <script>
       (() => {
         const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
         const theme = localStorage.getItem('theme') || 'auto';
-        document.documentElement.classList.toggle('wa-theme-default-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
+        document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
       })();
     </script>
 
-    {# Web Fonts #}
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans+Mono&display=swap" rel="stylesheet">
-
     {# Turbo + Scroll positioning #}
     <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
     <script src="{{ assetUrl('scripts/docs.js') }}" defer></script>
@@ -61,7 +55,7 @@
     <script src="{{ assetUrl('scripts/search.js') }}" defer></script>
   </head>
   <body>
-    <a id="skip-to-content" class="wa-visually-hidden" href="#main-content" data-smooth-link="false">
+    <a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
       Skip to main content
     </a>
 
@@ -74,10 +68,37 @@
       </svg>
     </button>
 
+    {# Icon toolbar #}
+    <div id="icon-toolbar">
+      {# GitHub #}
+      <a href="https://github.com/shoelace-style/shoelace" title="View Shoelace on GitHub">
+        <sl-icon name="github"></sl-icon>
+      </a>
+
+      {# Twitter #}
+      <a href="https://twitter.com/shoelace_style" title="Follow Shoelace on Twitter">
+        <sl-icon name="twitter"></sl-icon>
+      </a>
+
+      {# Theme selector #}
+      <sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
+        <sl-button slot="trigger" size="small" variant="text" caret title="Press \ to toggle">
+          <sl-icon class="only-light" name="sun-fill"></sl-icon>
+          <sl-icon class="only-dark" name="moon-fill"></sl-icon>
+        </sl-button>
+        <sl-menu>
+          <sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
+          <sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
+          <sl-divider></sl-divider>
+          <sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
+        </sl-menu>
+      </sl-dropdown>
+    </div>
+
     <aside id="sidebar" data-preserve-scroll>
       <header>
         <a href="/">
-          {% include 'logo.njk' %}
+          <img src="{{ assetUrl('images/wordmark.svg') }}" alt="Shoelace" />
         </a>
         <div class="sidebar-version">
           {{ meta.version }}
@@ -85,19 +106,19 @@
       </header>
 
       <div class="sidebar-buttons">
-        <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>
+        <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>
       </div>
 
       <button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
-        <wa-icon name="search"></wa-icon>
+        <sl-icon name="search"></sl-icon>
         <span>Search</span>
       </button>
 

docs/_includes/layout-example.njk

@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html
-  lang="en"
-  data-layout="{{ layout }}"
-  data-shoelace-version="{{ meta.version }}"
->
-  <head>
-    {# Metadata #}
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="{{ meta.description }}" />
-    <title>{{ meta.title }}</title>
-
-    {# Opt out of Turbo caching #}
-    <meta name="turbo-cache-control" content="no-cache">
-    <meta name="turbo-cache-control" content="no-preview">
-
-    {# Favicons #}
-    <link rel="icon" href="{{ assetUrl('images/favicon.svg') }}" type="image/x-icon" />
-
-    {# Twitter Cards #}
-    <meta name="twitter:card" content="summary" />
-    <meta name="twitter:creator" content="shoelace_style" />
-    <meta name="twitter:image" content="{{ assetUrl(meta.image, true) }}" />
-
-    {# OpenGraph #}
-    <meta property="og:url" content="{{ rootUrl(page.url, true) }}" />
-    <meta property="og:title" content="{{ meta.title }}" />
-    <meta property="og:description" content="{{ meta.description }}" />
-    <meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
-
-    {# WebAwesome #}
-    <link rel="stylesheet" href="/dist/themes/default.css" />
-    <link rel="stylesheet" href="/dist/themes/applied.css" />
-    <script type="module" src="/dist/webawesome.js"></script>
-
-    {# Set the initial theme and menu states here to prevent flashing #}
-    <script>
-      (() => {
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const theme = localStorage.getItem('theme') || 'auto';
-        document.documentElement.classList.toggle('wa-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
-
-        if (window.Turbo) {
-          window.Turbo.session.drive = false
-        }
-      })();
-    </script>
-
-    <style>
-      *, *:before, *:after {
-        box-sizing: border-box;
-      }
-
-      html, body {
-        height: 100%;
-        min-height: 100%;
-      }
-
-      body {
-        margin: 0;
-      }
-
-      [hidden] {
-        display: none !important;
-      }
-    </style>
-
-  </head>
-  <body>
-    {% block content %}
-      {{ content | safe }}
-    {% endblock %}
-  </body>
-</html>

docs/_includes/layout-templates/advanced-example.css

@@ -1,73 +0,0 @@
-html {
-  min-height: 100%;
-  height: auto;
-}
-
-body {
-  padding: 0;
-  height: auto;
-}
-
-.grid {
-  font-size: 1.35rem;
-  text-align: center;
-  display: grid;
-  place-content: center;
-  padding: 1rem;
-}
-
-header {
-  background-color: var(--wa-color-blue-90);
-}
-
-aside {
-  min-width: 250px;
-  max-width: 250px;
-  height: 100%;
-}
-
-main {
-  background-color: var(--wa-color-green-90);
-  height: 100%;
-}
-
-footer {
-  background-color: var(--wa-color-blue-80);
-}
-
-.banner {
-  background-color: var(--wa-color-yellow-90);
-}
-
-.header {
-  background-color: var(--wa-color-blue-90);
-}
-
-.banner,
-.header {
-  min-width: 100%;
-  height: 100%;
-}
-
-[slot='header'] {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-}
-
-[slot='aside'] {
-  background-color: var(--wa-color-yellow-90);
-}
-
-[slot='menu'] {
-  background-color: var(--wa-color-red-80);
-}
-
-[slot='main-header'] {
-  background-color: var(--wa-color-red-90);
-  padding: 1rem;
-}
-
-[slot='main-footer'] {
-  background-color: var(--wa-color-red-70);
-}

docs/_includes/layout-templates/advanced-example.html

@@ -1,18 +0,0 @@
-<wa-layout main-id="main-content" class="wa-theme-light">
-  <header slot="banner" class="grid banner">banner</header>
-
-  <header slot="header" class="grid header">header</header>
-
-  <aside class="grid" slot="menu">menu</aside>
-
-  <header class="grid" slot="main-header">main-header</header>
-
-  <main class="grid" id="main-content">main</main>
-
-  <footer class="grid" slot="main-footer">main-footer</footer>
-
-  <aside class="grid" slot="aside">aside</aside>
-  <footer class="grid" slot="footer">footer</footer>
-</wa-layout>
-
-{% include "layout-widget.njk" %}

docs/_includes/layout-templates/app.css

@@ -1,216 +0,0 @@
-html {
-  min-height: 100%;
-  height: auto;
-}
-
-body {
-  padding: 0;
-  height: auto;
-}
-
-main {
-  min-height: 100%;
-  padding: 1rem 2rem;
-}
-
-/* Layout */
-wa-layout {
-  background-color: var(--wa-color-neutral-95);
-  color: var(--wa-color-neutral-20);
-}
-
-wa-card :is(p, h3) {
-  margin: 0;
-}
-
-wa-layout::part(header) {
-  /** Because headers are sticky, this keeps text from leaking through. */
-  background-color: var(--wa-color-white);
-}
-
-wa-layout::part(drawer__panel) {
-  height: 100%;
-}
-
-wa-layout[view='mobile'] {
-  background-color: var(--wa-color-white);
-  --menu-width: 0px;
-}
-
-wa-layout[view='mobile']::part(header) {
-  padding: 0.25rem;
-  border-bottom: 1px solid var(--wa-color-neutral-70);
-}
-
-wa-layout[view='mobile']::part(navigation) {
-  display: none;
-}
-
-wa-layout[view='desktop']::part(main) {
-  padding-top: 1rem;
-}
-
-wa-layout[view='desktop'] {
-  --menu-width: 250px;
-}
-
-wa-layout[view='desktop']::part(navigation) {
-  padding-top: 1.9rem;
-}
-
-wa-layout[view='desktop'] > [slot='header'] {
-  display: none;
-}
-
-wa-layout[view='desktop']::part(header) {
-  display: none;
-}
-
-wa-layout[view='desktop'] main {
-  background-color: var(--wa-color-white);
-  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.05);
-  border: 1px solid var(--wa-color-neutral-80);
-  border-top-left-radius: 8px;
-}
-
-/* Navigation / Lists */
-
-/* Highlights */
-.highlight {
-  font-size: 0.85em;
-  padding: 0.4em 0.6em;
-  border-radius: 6px;
-  display: inline-block;
-}
-
-.highlight--success {
-  background-color: var(--wa-color-success-fill-muted);
-  color: var(--wa-color-success-text-on-muted);
-}
-
-.highlight--danger {
-  background-color: var(--wa-color-red-90);
-  color: var(--wa-color-red-30);
-}
-
-/* Text */
-.text--light {
-  color: var(--wa-color-neutral-40);
-}
-
-/* Cards */
-.wa-card--muted::part(base) {
-  --border-color: transparent;
-  background-color: transparent;
-  display: grid;
-  height: 100%;
-  box-shadow: none;
-}
-
-.wa-card--muted::part(body) {
-  display: grid;
-  align-content: flex-end;
-  gap: var(--padding);
-}
-
-/* Buttons */
-.wa-button--card {
-  --border-radius: 8px;
-  --padding: 1rem 0px;
-}
-
-.wa-button--card.wa-button--muted {
-  --background-color: var(--wa-color-neutral-95);
-}
-
-.wa-button--card::part(base) {
-  height: 100%;
-  border-radius: var(--border-radius);
-  padding: var(--padding);
-}
-
-.wa-button--card::part(label) {
-  width: 100%;
-}
-
-.wa-button--muted {
-  --text-color: var(--wa-color-neutral-30);
-  --text-color-active: var(--wa-color-neutral-30);
-  --background-color: transparent;
-  --background-color-active: var(--wa-color-neutral-90);
-  --border-color: transparent;
-  --border-color-active: var(--wa-color-neutral-80);
-}
-
-.wa-button--muted::part(base) {
-  background-color: var(--background-color);
-  color: var(--text-color);
-  border-color: var(--border-color);
-}
-
-.wa-button--muted:is(:focus-within)::part(base) {
-  background-color: var(--background-color);
-  color: var(--text-color-active);
-  border-color: var(--border-color-active);
-}
-
-.wa-button--muted:is(:hover)::part(base) {
-  background-color: var(--background-color-active);
-  color: var(--text-color-active);
-  border-color: var(--border-color-active);
-}
-
-.wa-button--logo::part(base) {
-  font-size: 1.5rem;
-  color: var(--wa-color-neutral-30);
-}
-
-.wa-button--square::part(base) {
-  border-radius: 0px;
-}
-
-.wa-button--stretch {
-  width: 100%;
-}
-
-.wa-button--stretch::part(label) {
-  flex: 1 1 auto;
-}
-
-.wa-button--nav-footer {
-  --border-color: var(--wa-color-neutral-70);
-  --wa-spacing-large: 8px;
-}
-
-wa-layout[view='desktop'] .wa-button--nav-footer::part(base) {
-  --border-color: transparent;
-  border-top-color: var(--wa-color-neutral-70);
-}
-
-/* Tables */
-table {
-  max-width: 100%;
-  border: none;
-  border-collapse: collapse;
-  color: inherit;
-}
-
-table tr {
-  border-bottom: 1px solid var(--wa-color-neutral-70);
-}
-
-table th {
-  font-weight: var(--wa-font-weight-semibold);
-  text-align: left;
-  padding: 0.75rem 1rem;
-}
-
-table td {
-  line-height: var(--wa-line-height-normal);
-  padding: 1rem;
-}
-
-* > table {
-  max-width: 100%;
-  overflow-x: auto;
-}

docs/_includes/layout-templates/app.html

@@ -1,428 +0,0 @@
-<wa-layout main-id="main-content" class="wa-theme-light">
-  <header slot="header">
-    <wa-icon-button name="list" style="font-size: 1.5rem" data-toggle-nav></wa-icon-button>
-  </header>
-  <wa-button
-    href="#"
-    variant="text"
-    style="padding: 0 0.4rem"
-    class="wa-button--logo wa-button--stretch wa-button--muted"
-    size="large"
-    slot="navigation-header"
-  >
-    <wa-icon name="music-note" slot="prefix" style="font-size: 2rem"></wa-icon>
-    Musicify
-  </wa-button>
-
-  <nav style="padding: 1rem" slot="navigation">
-    <wa-nav-group style="height: 100%">
-      <wa-nav-item href="#">
-        <wa-icon name="search" slot="prefix"></wa-icon>
-        Search
-      </wa-nav-item>
-
-      <wa-nav-item href="#">
-        <wa-icon name="bell" slot="prefix"></wa-icon>
-        Notifications
-      </wa-nav-item>
-
-      <wa-divider></wa-divider>
-
-      <wa-nav-item href="#" current="page">
-        <wa-icon name="house-door" slot="prefix"></wa-icon>
-        Home
-      </wa-nav-item>
-
-      <wa-nav-item href="#">
-        <wa-icon name="music-note-list" slot="prefix"></wa-icon>
-        Playlists
-      </wa-nav-item>
-
-      <wa-nav-item href="#">
-        <wa-icon name="file-earmark-music" slot="prefix"></wa-icon>
-        Tracks
-      </wa-nav-item>
-
-      <wa-nav-item href="#">
-        <wa-icon name="gear" slot="prefix"></wa-icon>
-        Settings
-      </wa-nav-item>
-
-      <wa-nav-item href="#" style="margin-top: auto">
-        <wa-icon name="question-circle" slot="prefix"></wa-icon>
-        Help
-      </wa-nav-item>
-    </wa-nav-group>
-  </nav>
-
-  <!-- Hacky override to make padding 8px -->
-  <wa-button
-    slot="navigation-footer"
-    outline
-    class="wa-button--square wa-button--stretch wa-button--muted wa-button--nav-footer"
-    size="large"
-    href="#"
-  >
-    <div
-      style="
-        display: grid;
-        align-items: center;
-        max-width: 100%;
-        gap: 8px;
-        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
-      "
-    >
-      <wa-avatar shape="rounded" style="--size: 36px"></wa-avatar>
-      <div style="text-overflow: ellipsis; max-width: 100%; overflow: hidden; text-align: start; font-size: 1rem">
-        Really really really long name
-      </div>
-      <wa-icon name="chevron-right"></wa-icon>
-    </div>
-  </wa-button>
-
-  <main id="main-content" class="main">
-    <h1 style="margin: 0.5rem 0 2rem 0">Good Evening, Konnor Rogers</h1>
-
-    <section>
-      <div style="display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end; gap: 8px">
-        <h2 style="">Overview</h2>
-
-        <wa-select value="monthly">
-          <wa-option value="daily">Daily</wa-option>
-          <wa-option value="weekly">Weekly</wa-option>
-          <wa-option value="monthly">Monthly</wa-option>
-          <wa-option value="yearly">Yearly</wa-option>
-        </wa-select>
-      </div>
-
-      <wa-divider></wa-divider>
-
-      <div
-        style="
-          margin-top: 1rem;
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-          grid-auto-rows: 1fr;
-          gap: var(--wa-spacing-large);
-          text-align: center;
-        "
-      >
-        <wa-card class="wa-card--muted" style="--padding: 8px">
-          <h3 slot="header">Total listening time</h3>
-
-          <p>
-            <strong><wa-format-number value="35000"></wa-format-number></strong> minutes
-          </p>
-          <p>
-            <mark class="highlight highlight--success"> +16% </mark>
-
-            <small class="text--light">from last month</small>
-          </p>
-        </wa-card>
-
-        <wa-card class="wa-card--muted" style="--padding: 8px">
-          <h3 slot="header">Total songs played</h3>
-
-          <p>
-            <strong><wa-format-number value="302"></wa-format-number></strong> songs
-          </p>
-
-          <p>
-            <mark class="highlight highlight--danger"> -0.3% </mark>
-
-            <small class="text--light">from last month</small>
-          </p>
-        </wa-card>
-
-        <wa-card class="wa-card--muted" style="--padding: 8px">
-          <h3 slot="header">Average listening session</h3>
-
-          <p>
-            <strong><wa-format-number value="36"></wa-format-number></strong> minutes
-          </p>
-
-          <p>
-            <mark class="highlight highlight--success"> +11.4% </mark>
-
-            <small class="text--light">from last month</small>
-          </p>
-        </wa-card>
-
-        <wa-card class="wa-card--muted" style="--padding: 8px">
-          <h3 slot="header">Average track listening time</h3>
-
-          <p>
-            <strong><wa-format-number value="2"></wa-format-number></strong> minutes,
-            <strong><wa-format-number value="42"></wa-format-number></strong> seconds
-          </p>
-          <p>
-            <mark class="highlight highlight--success"> -6.2% </mark>
-
-            <small class="text--light">from last month</small>
-          </p>
-        </wa-card>
-      </div>
-    </section>
-
-    <section style="margin-top: 3rem">
-      <h2>Recent playlists</h2>
-
-      <div
-        style="
-          margin-top: 1rem;
-          --card-width: clamp(200px, 100%, 350px);
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
-          gap: 16px;
-        "
-      >
-        <wa-button variant="neutral" class="wa-button--card wa-button--muted" href="#">
-          <div style="display: flex; gap: 1rem">
-            <img
-              src="https://via.placeholder.com/100x100"
-              height="100"
-              width="100"
-              style="align-self: center; border-radius: 8px; display: inline-block; max-width: 100%; flex: 0 1 auto"
-            />
-
-            <article
-              style="
-                display: grid;
-                align-content: center;
-                color: var(--wa-color-neutral-700);
-                grid-template-columns: minmax(0, 1fr);
-                max-width: 100%;
-                overflow: hidden;
-                width: 100%;
-              "
-            >
-              <h2 style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">Punk Rock Anthems</h2>
-
-              <p style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">
-                For when you just wanna rock out, have a good time, and feel angsty.
-              </p>
-
-              <wa-icon name="chevron-right" style="justify-self: flex-end"></wa-icon>
-            </article>
-          </div>
-        </wa-button>
-
-        <wa-button variant="neutral" class="wa-button--card wa-button--muted" href="#">
-          <div style="display: flex; gap: 1rem">
-            <img
-              src="https://via.placeholder.com/100x100"
-              height="100"
-              width="100"
-              style="align-self: center; border-radius: 8px; display: inline-block; max-width: 100%"
-            />
-
-            <article
-              style="
-                display: grid;
-                align-content: center;
-                color: var(--wa-color-neutral-700);
-                grid-template-columns: minmax(0, 1fr);
-                max-width: 100%;
-                overflow: hidden;
-                width: 100%;
-              "
-            >
-              <h2 style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">Random</h2>
-
-              <p style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">
-                Throw it on shuffle, and embrace the chaos.
-              </p>
-
-              <wa-icon name="chevron-right" style="justify-self: flex-end"></wa-icon>
-            </article>
-          </div>
-        </wa-button>
-
-        <wa-button variant="neutral" class="wa-button--card wa-button--muted" href="#">
-          <div style="display: flex; gap: 1rem">
-            <img
-              src="https://via.placeholder.com/100x100"
-              height="100"
-              width="100"
-              style="align-self: center; border-radius: 8px; display: inline-block"
-            />
-
-            <article
-              style="
-                display: grid;
-                align-content: center;
-                color: var(--wa-color-neutral-700);
-                grid-template-columns: minmax(0, 1fr);
-                max-width: 100%;
-                overflow: hidden;
-                width: 100%;
-              "
-            >
-              <h2 style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">Classics</h2>
-
-              <p style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">
-                Timeless songs that you love to relive.
-              </p>
-
-              <wa-icon name="chevron-right" style="justify-self: flex-end"></wa-icon>
-            </article>
-          </div>
-        </wa-button>
-      </div>
-    </section>
-
-    <section style="margin-top: 3rem">
-      <h2>Recent tracks</h2>
-
-      <div style="margin-top: 1rem; max-width: 100%; overflow: auto">
-        <table style="width: 100%; min-width: 500px; border-spacing: 2px">
-          <thead>
-            <tr>
-              <th>Release Date</th>
-
-              <th>Name</th>
-
-              <th>Album</th>
-
-              <th>Artist</th>
-            </tr>
-          </thead>
-
-          <tbody>
-            <tr>
-              <td>
-                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
-              </td>
-
-              <td>No Strangers to Love</td>
-
-              <td>You Know the Rules</td>
-
-              <td>Rick Barry</td>
-            </tr>
-
-            <tr>
-              <td>
-                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
-              </td>
-
-              <td>No Strangers to Love</td>
-
-              <td>You Know the Rules</td>
-
-              <td>Rick Barry</td>
-            </tr>
-
-            <tr>
-              <td>
-                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
-              </td>
-
-              <td>No Strangers to Love</td>
-
-              <td>You Know the Rules</td>
-
-              <td>Rick Barry</td>
-            </tr>
-
-            <tr>
-              <td>
-                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
-              </td>
-
-              <td>No Strangers to Love</td>
-
-              <td>You Know the Rules</td>
-
-              <td>Rick Barry</td>
-            </tr>
-
-            <tr>
-              <td>
-                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
-              </td>
-
-              <td>No Strangers to Love</td>
-
-              <td>You Know the Rules</td>
-
-              <td>Rick Barry</td>
-            </tr>
-
-            <tr>
-              <td>
-                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
-              </td>
-
-              <td>No Strangers to Love</td>
-
-              <td>You Know the Rules</td>
-
-              <td>Rick Barry</td>
-            </tr>
-
-            <tr>
-              <td>
-                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
-              </td>
-
-              <td>No Strangers to Love</td>
-
-              <td>You Know the Rules</td>
-
-              <td>Rick Barry</td>
-            </tr>
-
-            <tr>
-              <td>
-                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
-              </td>
-
-              <td>No Strangers to Love</td>
-
-              <td>You Know the Rules</td>
-
-              <td>Rick Barry</td>
-            </tr>
-
-            <tr>
-              <td>
-                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
-              </td>
-
-              <td>No Strangers to Love</td>
-
-              <td>You Know the Rules</td>
-
-              <td>Rick Barry</td>
-            </tr>
-
-            <tr>
-              <td>
-                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
-              </td>
-
-              <td>No Strangers to Love</td>
-
-              <td>You Know the Rules</td>
-
-              <td>Rick Barry</td>
-            </tr>
-
-            <tr>
-              <td>
-                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
-              </td>
-
-              <td>No Strangers to Love</td>
-
-              <td>You Know the Rules</td>
-
-              <td>Rick Barry</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
-  </main>
-</wa-layout>

docs/_includes/layout-templates/example.css

@@ -1,74 +0,0 @@
-html {
-  min-height: 100%;
-  height: auto;
-}
-
-body {
-  padding: 0;
-  height: auto;
-}
-
-.grid {
-  font-size: 1.35rem;
-  text-align: center;
-  display: grid;
-  place-content: center;
-  padding: 1rem;
-}
-
-header {
-  background-color: var(--wa-color-blue-90);
-}
-
-aside {
-  min-width: 250px;
-  max-width: 250px;
-}
-
-main {
-  background-color: var(--wa-color-green-90);
-  height: 100%;
-}
-
-footer {
-  background-color: var(--wa-color-blue-80);
-}
-
-.banner {
-  background-color: var(--wa-color-yellow-90);
-}
-
-.header {
-  background-color: var(--wa-color-blue-90);
-}
-
-.banner,
-.header {
-  min-width: 100%;
-  height: 100%;
-}
-
-[slot='header'] {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-}
-
-[slot='aside'] {
-  height: 100%;
-  background-color: var(--wa-color-yellow-90);
-}
-
-[slot='menu'] {
-  height: 100%;
-  background-color: var(--wa-color-red-90);
-}
-
-[slot='main-header'] {
-  background-color: var(--wa-color-red-80);
-  padding: 1rem;
-}
-
-[slot='main-footer'] {
-  background-color: var(--wa-color-green-80);
-}

docs/_includes/layout-templates/example.html

@@ -1,47 +0,0 @@
-<wa-layout>
-  <div slot="navigation">
-    <div style="padding: 2rem">
-      <a href="#">Option 1</a><br />
-      <a href="#">Option 2</a><br />
-      <a href="#">Option 3</a>
-    </div>
-  </div>
-
-  <button data-toggle-nav>Menu</button>
-
-  <p>I'm just a lowly page.</p>
-  <p>
-    I think I'll put a <a href="#">link right here</a> for you to click. And maybe <a href="#">another one here</a> for
-    fun.
-  </p>
-
-  <wa-dialog id="dialog"> I'm just a lowly dialog. </wa-dialog>
-
-  <wa-button>Open Dialog</wa-button>
-</wa-layout>
-
-<style>
-  wa-layout {
-    --menu-width: 260px;
-
-    outline: dashed 1px dodgerblue;
-    max-width: 1280px;
-    margin: 0 auto;
-  }
-
-  wa-layout::part(menu) {
-    border-right: solid 1px #ececec;
-  }
-
-  wa-layout::part(main-content) {
-    padding: 2rem;
-  }
-</style>
-
-<script>
-  const dialog = document.getElementById('dialog');
-
-  dialog.nextElementSibling.addEventListener('click', () => {
-    dialog.open = true;
-  });
-</script>

docs/_includes/layout-templates/hero.css

@@ -1,9 +0,0 @@
-html {
-  min-height: 100%;
-  height: auto;
-}
-
-body {
-  padding: 0;
-  height: auto;
-}

docs/_includes/layout-templates/hero.html

@@ -1 +0,0 @@
-<wa-layout main-id="main-content" class="wa-theme-light"> </wa-layout>

docs/_includes/layout-templates/sport-awesome.css

@@ -1,182 +0,0 @@
-html {
-  min-height: 100%;
-  height: auto;
-}
-
-body {
-  padding: 0 !important;
-  height: auto;
-  margin: 0;
-}
-
-/** https://andy-bell.co.uk/my-favourite-3-lines-of-css/ */
-.flow > * + * {
-  margin-block-start: var(--wa-flow-spacing);
-}
-
-img {
-  display: inline-block;
-  max-width: 100%;
-  height: auto;
-}
-
-.navigation--desktop::part(nav-items) {
-  gap: 2rem;
-}
-
-.navigation--top::part(nav-items) {
-  flex-direction: row;
-}
-
-.navigation--top wa-nav-item {
-  font-size: 1.4rem;
-  font-weight: bold;
-}
-
-.navigation--top wa-nav-item::part(content) {
-  text-align: center;
-  justify-content: center;
-}
-
-.navigation--top wa-nav-item {
-  --text-color: var(--wa-color-brand-text-on-vivid);
-  --text-color-hover: var(--wa-color-text-normal);
-  --background-color: transparent;
-  --background-color-hover: var(--wa-color-neutral-fill-muted-alt);
-}
-
-.header {
-  display: flex;
-  border-bottom: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-brand-fill-vivid-alt);
-  background-color: var(--wa-color-white);
-}
-
-.header > * {
-  padding-top: var(--wa-space-m);
-  padding-bottom: var(--wa-space-m);
-}
-
-.header__navigation {
-  display: flex;
-  clip-path: polygon(var(--wa-space-2xl) 0, 100% 0, 100% 100%, 0 100%);
-  padding-inline-start: calc(var(--wa-space-2xl) + var(--wa-space-xs));
-  padding-inline-end: var(--wa-space-m);
-  background-color: var(--wa-color-brand-fill-vivid-alt);
-  width: 100%;
-}
-
-.header > .logo {
-  padding-inline-start: var(--wa-space-m);
-  /** Responsive font size for the top header to make it flow nicer */
-  font-size: clamp(1rem, 4vw, 1.4rem);
-}
-
-a.logo {
-  flex-shrink: 0;
-  font-size: 1.4rem;
-  font-weight: bold;
-  color: var(--wa-color-text-normal);
-  text-decoration: none;
-  margin: auto;
-}
-
-a.logo:is(:hover, :focus) {
-  text-decoration: underline;
-}
-
-.logo__accent {
-  color: var(--wa-color-yellow-70);
-}
-
-.navigation--desktop {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.navigation--desktop wa-nav-item[current='page'] {
-  text-decoration: underline;
-  text-underline-offset: 8px;
-  text-decoration-thickness: 4px;
-  text-decoration-color: var(--wa-color-brand-outline-muted-alt);
-}
-
-.navigation--desktop wa-nav-item[current='page']:hover {
-  text-decoration-color: var(--wa-color-brand-outline-vivid);
-}
-
-.navigation--extra {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-inline-start: auto;
-}
-
-wa-layout[view='desktop'] [data-toggle-nav],
-wa-layout[view='desktop']::part(navigation) {
-  display: none;
-}
-
-wa-layout[view='mobile'] .navigation--desktop {
-  display: none;
-}
-
-.layout-banner {
-  padding: var(--wa-space-m);
-  text-align: center;
-  background-color: var(--wa-color-yellow-80);
-}
-
-.stats-grid {
-  display: grid;
-  /** 30vw ensures we never show more than 3 tables in the viewport at any given time. */
-  grid-template-columns: repeat(auto-fit, minmax(clamp(225px, 30vw, 100%), 1fr));
-  gap: var(--wa-space-m);
-  grid-template-rows: 1fr;
-  align-items: start;
-  max-width: 100%;
-}
-
-.stats-grid table {
-  border-collapse: separate;
-  border-spacing: 0;
-  border-radius: var(--wa-panel-corners);
-  border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-outline);
-}
-
-.table-scroll {
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-.stats-grid table * {
-  font-variant-numeric: tabular-nums;
-}
-
-.stats-grid table th {
-  font-weight: bold;
-  text-align: center;
-}
-
-.stats-grid table td:nth-child(2) {
-  text-align: end;
-}
-
-.navigation--top.navigation--social::part(nav-items) {
-  justify-content: flex-end;
-}
-
-.navigation--social {
-  flex-grow: 1;
-}
-
-.navigation--top .social-link {
-  display: none;
-}
-
-@media screen and (min-width: 415px) {
-  .navigation--top .social-link {
-    display: flex;
-  }
-}

docs/_includes/layout-templates/sport-awesome.html

@@ -1,343 +0,0 @@
-<wa-layout main-id="main-content" class="wa-theme-light" mobile-breakpoint="925" disable-sticky="banner">
-  <header class="layout-banner" slot="banner">Reminder! Get your insurance paperwork in by Oct 12!</header>
-
-  <header class="header" slot="header">
-    <a href="#" class="logo"> <span>Sport</span> <span class="logo__accent">Awesome</span> </a>
-
-    <div class="header__navigation">
-      <wa-nav-group class="navigation navigation--top navigation--desktop">
-        <wa-nav-item href="#" current="page">Home</wa-nav-item>
-        <wa-nav-item href="#">Schedule</wa-nav-item>
-        <wa-nav-item href="#">Roster</wa-nav-item>
-        <wa-nav-item href="#">Stats</wa-nav-item>
-        <wa-nav-item href="#">Videos</wa-nav-item>
-      </wa-nav-group>
-
-      <wa-nav-group class="navigation navigation--top navigation--social">
-        <wa-nav-item class="social-link" href="#"><wa-icon name="instagram"></wa-icon></wa-nav-item>
-        <wa-nav-item class="social-link" href="#"><wa-icon name="facebook"></wa-icon></wa-nav-item>
-        <wa-nav-item data-toggle-nav href="#"><wa-icon name="list"></wa-icon></wa-nav-item>
-      </wa-nav-group>
-    </div>
-  </header>
-
-  <a href="#" class="logo" slot="navigation-header"> Sport <span class="logo__accent">Awesome</span> </a>
-
-  <wa-nav-group slot="navigation">
-    <wa-nav-item href="#" current="page">
-      <wa-icon name="house-door" slot="prefix"></wa-icon>
-      Home
-    </wa-nav-item>
-    <wa-nav-item href="#">
-      <wa-icon name="calendar" slot="prefix"></wa-icon>
-      Schedule
-    </wa-nav-item>
-    <wa-nav-item href="#">
-      <wa-icon name="people" slot="prefix"></wa-icon>
-      Roster
-    </wa-nav-item>
-    <wa-nav-item href="#">
-      <wa-icon name="graph-up-arrow" slot="prefix"></wa-icon>
-      Stats
-    </wa-nav-item>
-    <wa-nav-item href="#">
-      <wa-icon name="camera-video" slot="prefix"></wa-icon>
-      Videos
-    </wa-nav-item>
-
-    <wa-divider></wa-divider>
-
-    <wa-nav-group>
-      <wa-nav-item href="#">
-        <wa-icon name="instagram" slot="prefix"></wa-icon>
-        Instagram
-      </wa-nav-item>
-      <wa-nav-item href="#">
-        <wa-icon name="facebook" slot="prefix"></wa-icon>
-        Facebook
-      </wa-nav-item>
-    </wa-nav-group>
-  </wa-nav-group>
-
-  <main id="main-content" class="flow" style="padding: var(--wa-space-m)">
-    <div style="display: flex; flex-wrap: wrap; gap: var(--wa-space-m)">
-      <figure style="min-width: 75%; display: flex; flex-direction: column; margin: 0 auto">
-        <img
-          src="https://images.unsplash.com/photo-1562552052-c72ceddf93dc?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          loading="lazy"
-          alt="Picture of people playing volleyball"
-          height="512"
-          width="300"
-          style="aspect-ratio: 16/9; min-width: 100%"
-        />
-        <figcaption>
-          Photo by
-          <cite><a href="https://unsplash.com/@stevenabraham">Steven Abraham</a></cite>
-          courtesy of
-          <cite><a href="https://unsplash.com/">Unsplash</a></cite>
-        </figcaption>
-      </figure>
-      <aside
-        style="
-          display: flex;
-          flex-direction: column;
-          border-radius: var(--wa-panel-corners);
-          flex-grow: 1;
-          flex-shrink: 1;
-          max-width: 75vw;
-          margin: 0 auto;
-        "
-      >
-        <header
-          style="
-            font-size: 1.4rem;
-            font-weight: bold;
-            color: var(--wa-color-brand-text-on-vivid);
-            background-color: var(--wa-color-brand-fill-vivid-alt);
-            padding: var(--wa-space-m);
-            text-align: center;
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-          "
-        >
-          Upcoming
-        </header>
-
-        <div
-          style="
-            color: var(--wa-color-brand-text-on-vivid);
-            background-color: var(--wa-color-danger-fill-vivid-alt);
-            padding: var(--wa-space-s);
-            text-align: center;
-            font-weight: bold;
-          "
-        >
-          Tryouts!
-        </div>
-
-        <div
-          style="
-            background-color: var(--wa-color-neutral-90);
-            padding: var(--wa-space-m);
-            border-bottom-left-radius: inherit;
-            border-bottom-right-radius: inherit;
-            text-align: center;
-          "
-        >
-          <span style="font-weight: bold; font-size: 1.2rem">Barclay's Center</span>
-
-          <br />
-
-          <time>Sat, Jul 3rd • 11:30am</time>
-        </div>
-      </aside>
-    </div>
-
-    <section>
-      <h1>Welcome to Sport <span class="logo__accent">Awesome</span></h1>
-
-      <p>
-        Dolor quam voluptate nostrum neque eius. Quo nemo corporis repellat quia sunt molestiae! Dolorem labore
-        laudantium nobis numquam reprehenderit? Voluptatibus odio animi nemo maiores accusamus eaque Assumenda
-        perferendis omnis quae. Adipisicing beatae lorem nisi aliquid similique Voluptas doloremque pariatur tempore
-        omnis maiores explicabo. Provident iste vel explicabo corporis quaerat! Necessitatibus minus quas iusto ducimus
-        consequatur illo Cum eos adipisci ut!
-      </p>
-    </section>
-
-    <section>
-      <h2 style="text-align: center; font-weight: bold; font-size: 1.5em">Stats</h2>
-      <div class="stats-grid">
-        <div class="table-scroll">
-          <table>
-            <thead>
-              <tr>
-                <th colspan="2">Serve</th>
-              </tr>
-            </thead>
-
-            <tbody>
-              <tr>
-                <td>Attempts</td>
-                <td>2936</td>
-              </tr>
-              <tr>
-                <td>Serve %</td>
-                <td>93.6%</td>
-              </tr>
-              <tr>
-                <td>Aces</td>
-                <td>268</td>
-              </tr>
-              <tr>
-                <td>Errors</td>
-                <td>189</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="table-scroll">
-          <table>
-            <thead>
-              <tr>
-                <th colspan="2">Serve Receive</th>
-              </tr>
-            </thead>
-
-            <tbody>
-              <tr>
-                <td>Attempts</td>
-                <td>2428</td>
-              </tr>
-              <tr>
-                <td>Pass Rating</td>
-                <td>1.72</td>
-              </tr>
-              <tr>
-                <td>Pass Error %</td>
-                <td>13.3%</td>
-              </tr>
-              <tr>
-                <td>3-pass %</td>
-                <td>28.5%</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="table-scroll">
-          <table>
-            <thead>
-              <tr>
-                <th colspan="2">Attack</th>
-              </tr>
-            </thead>
-
-            <tbody>
-              <tr>
-                <td>Attempts</td>
-                <td>3624</td>
-              </tr>
-              <tr>
-                <td>Kills</td>
-                <td>1431</td>
-              </tr>
-              <tr>
-                <td>Errors</td>
-                <td>268</td>
-              </tr>
-              <tr>
-                <td>Hitting Efficiency</td>
-                <td>0.254</td>
-              </tr>
-
-              <tr>
-                <td>Kill %</td>
-                <td>39.5%</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="table-scroll">
-          <table>
-            <thead>
-              <tr>
-                <th colspan="2">Dig</th>
-              </tr>
-            </thead>
-
-            <tbody>
-              <tr>
-                <td>Attempts</td>
-                <td>3124</td>
-              </tr>
-
-              <tr>
-                <td>Digs</td>
-                <td>2235</td>
-              </tr>
-
-              <tr>
-                <td>Errors</td>
-                <td>889</td>
-              </tr>
-
-              <tr>
-                <td>Dig %</td>
-                <td>71.5%</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="table-scroll">
-          <table>
-            <thead>
-              <tr>
-                <th colspan="2">Block</th>
-              </tr>
-            </thead>
-
-            <tbody>
-              <tr>
-                <td>Blocks</td>
-                <td>348</td>
-              </tr>
-
-              <tr>
-                <td>Errors</td>
-                <td>414</td>
-              </tr>
-
-              <tr>
-                <td>Block %</td>
-                <td>31.6%</td>
-              </tr>
-
-              <tr>
-                <td>Error %</td>
-                <td>24.6%</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="table-scroll">
-          <table>
-            <thead>
-              <tr>
-                <th colspan="2">Set</th>
-              </tr>
-            </thead>
-
-            <tbody>
-              <tr>
-                <td>Assists</td>
-                <td>1364</td>
-              </tr>
-
-              <tr>
-                <td>Errors</td>
-                <td>81</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </section>
-  </main>
-
-  <footer
-    slot="main-footer"
-    style="
-      background-color: var(--wa-color-brand-fill-vivid);
-      color: var(--wa-color-text-inverse);
-      padding: var(--wa-space-m);
-      text-align: center;
-    "
-  >
-    © 2023 - Sport Awesome
-  </footer>
-</wa-layout>

docs/_includes/layout-widget.njk

@@ -1,92 +0,0 @@
-<!-- playground-hide -->
-<style>
-  .layout-widget {
-    position: fixed;
-    z-index: 9999;
-    background-color: white;
-    bottom: 4rem;
-    left: 4rem;
-  }
-
-  .layout-widget:not(:defined) {
-    display: none;
-  }
-</style>
-
-<wa-dropdown id="js-layout-widget" class="layout-widget" stay-open-on-select>
-  <wa-button slot="trigger" caret>Dropdown</wa-button>
-  <wa-menu></wa-menu>
-</wa-dropdown>
-
-<script type="module">
-  const layoutWidget = document.querySelector("#js-layout-widget")
-  const docFrag = new DocumentFragment()
-
-  function makeMenuItem (type, slot) {
-    const menuItem = Object.assign(document.createElement("wa-menu-item"), {
-      type: "checkbox",
-      textContent: `${type} ${slot}`
-    })
-
-    menuItem.setAttribute("value", `${type}-${slot}`)
-    return menuItem
-  }
-
-  document.querySelectorAll("wa-layout > [slot]").forEach((el) => {
-    const slot = el.getAttribute("slot");
-    docFrag.append(makeMenuItem("toggle", slot), makeMenuItem("overflow", slot), document.createElement("wa-divider"))
-  })
-
-  docFrag.append(makeMenuItem("toggle", "main"), makeMenuItem("overflow", "main"))
-  layoutWidget.querySelector("wa-menu").append(docFrag)
-
-  function capitalize(string) {
-    return string.split(/\s+/).map((str) => str[0].toUppercase() + str.slice(1)).join(" ")
-  }
-
-  function handleSelect (e) {
-    const item = e.detail.item
-    const val = item.getAttribute("value")
-
-    if (val === "footer-0") {
-
-    }
-
-    const slot = val.split("-").slice(1).join("-")
-
-    let el
-
-    if (slot === "main") {
-      el = document.querySelector(`main`)
-    } else {
-      el = document.querySelector(`wa-layout > [slot='${slot}']`)
-    }
-
-    if (val.startsWith("overflow")) {
-      if (item.checked) {
-        el.textContent = "lorem ".repeat(1_000)
-        return
-      }
-
-      el.textContent = slot
-      return
-    }
-
-    if (val.startsWith("toggle")) {
-      if (item.checked) {
-        el.setAttribute("hidden", "")
-        return
-      }
-
-      el.removeAttribute("hidden")
-      return
-    }
-  }
-
-  layoutWidget.addEventListener("wa-select", handleSelect);
-{% if in_playground %}
-  &lt;/script>
-{% else %}
-  </script>
-{% endif %}
-<!-- playground-hide-end -->

docs/_includes/playground.njk

@@ -1,124 +0,0 @@
-<script type="module">
-  import "https://cdn.jsdelivr.net/npm/light-pen@1.1.3/+esm"
-</script>
-<div style="display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); min-height: 100%; grid-template-rows: minmax(0, 1fr); gap: 8px; ">
-<!-- Knobs -->
-<div id="knobs">
-  <div class="space-vertically">
-    <a href="/">{% include 'logo.njk' %}</a>
-    <wa-select name="theme" label="Theme" value="default">
-      <wa-option value="default">Default</wa-option>
-      <wa-option value="glassy">Glassy</wa-option>
-      <wa-option value="mellow">Mellow</wa-option>
-      <wa-option value="playful">Playful</wa-option>
-    </wa-select>
-    <wa-select name="heading-text" label="Heading" value="">
-      <wa-option value="">Theme default</wa-option>
-      <wa-option value="serif">Serif</wa-option>
-      <wa-option value="sans-serif">Sans-serif</wa-option>
-      <wa-option value="monospace">Monospace</wa-option>
-      <wa-option value="cursive">Cursive</wa-option>
-    </wa-select>
-    <wa-select name="body-text" label="Body" value="">
-      <wa-option value="">Theme default</wa-option>
-      <wa-option value="serif">Serif</wa-option>
-      <wa-option value="sans-serif">Sans-serif</wa-option>
-      <wa-option value="monospace">Monospace</wa-option>
-      <wa-option value="cursive">Cursive</wa-option>
-    </wa-select>
-    <wa-select name="border-style" label="Border Style" value="solid">
-      <wa-option value="solid">Solid</wa-option>
-      <wa-option value="dashed">Dashed</wa-option>
-      <wa-option value="dotted">Dotted</wa-option>
-      <wa-option value="double">Double</wa-option>
-    </wa-select>
-    <wa-range name="border-width" label="Border Width" min="1" max="5" value="1" step="1" tooltip="none"></wa-range>
-    <wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-range>
-    <wa-range name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-range>
-  </div>
-</div>
-
-<script type="module">
-  const container = document.getElementById('knobs');
-  const iframeDocument = () => document.querySelector("light-pen").iframeElem.contentWindow.document
-  const themeStylesheet = () => iframeDocument().getElementById('theme-stylesheet');
-
-  // Theme
-  container.querySelector('[name="theme"]').addEventListener('wa-change', event => {
-    themeStylesheet().href = `/dist/themes/${event.target.value}.css`;
-  });
-
-  // Heading text
-  container.querySelector('[name="heading-text"]').addEventListener('wa-input', event => {
-    iframeDocument().documentElement.style.setProperty('--wa-font-family-heading', event.target.value);
-  });
-
-  // Body text
-  container.querySelector('[name="body-text"]').addEventListener('wa-input', event => {
-    iframeDocument().documentElement.style.setProperty('--wa-font-family-body', event.target.value);
-  });
-
-  // Corners
-  container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
-    iframeDocument().documentElement.style.setProperty('--wa-corners-base', `${event.target.value}rem`);
-  });
-
-  // Border width
-  container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
-    iframeDocument().documentElement.style.setProperty('--wa-border-width-base', `${event.target.value / 16}rem`);
-  });
-
-  // Border style
-  container.querySelector('[name="border-style"]').addEventListener('wa-input', event => {
-    iframeDocument().documentElement.style.setProperty('--wa-border-style', event.target.value);
-  });
-
-  // Spacing style
-  container.querySelector('[name="spacing"]').addEventListener('wa-input', event => {
-    iframeDocument().documentElement.style.setProperty('--wa-space-base', `${event.target.value}rem`);
-  });
-
-</script>
-
-<style>
-  :root {
-    --knobs-width: 300px;
-  }
-
-  #knobs {
-    background: var(--wa-color-surface-default);
-    border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
-    border-radius: var(--wa-corners-2x);
-    box-shadow: var(--wa-shadow-level-2);
-    width: var(--knobs-width);
-    padding: 2rem;
-    margin-inline: auto;
-    margin-block: 0;
-  }
-
-  #knobs p {
-    margin: 0;
-  }
-</style>
-
-<light-pen style="height: 100%;" resize-position="30">
-  <script type="text/plain" slot="html">
-<link id="theme-stylesheet" href="/dist/themes/default.css" rel="stylesheet">
-<link id="applied-stylesheet" href="/dist/themes/applied.css"" rel="stylesheet">
-
-{% include html_file %}
-  </script>
-
-  <script type="text/plain" slot="css">
-@import "/dist/themes/applied.css";
-
-{% include css_file %}
-  </script>
-
-  <script type="text/plain" slot="js">
-import { setBasePath } from "/dist/utilities/base-path.js";
-setBasePath("/dist");
-import("/dist/autoloader.js");
-  </script>
-</light-pen>
-<div>

docs/_includes/sidebar.njk

@@ -1,24 +1,4 @@
 <ul>
-  <li>
-    <h2>Experimental</h2>
-    <ul>
-      <li><a href="/experimental/themer">Themer</a></li>
-      <li><a href="/experimental/style-guide">Style Guide</a></li>
-      <li><a href="/experimental/form-validation">Form Validation Styles</a></li>
-      <li style="margin-top: .5rem;"><wa-switch id="theme-toggle">Dark mode</wa-switch></li>
-      <li><a href="/layouts/index.html">Layout Examples</a></li>
-      <script type="module">
-        // Temporary dark toggle
-        const toggle = document.getElementById('theme-toggle');
-        toggle.checked = document.documentElement.classList.contains('wa-theme-default-dark');
-
-        toggle.addEventListener('wa-change', () => {
-          document.documentElement.classList.toggle('wa-theme-default-dark');
-          localStorage.setItem('theme', toggle.checked ? 'dark' : 'light');
-        });
-      </script>
-    </ul>
-  </li>
   <li>
     <h2>Getting Started</h2>
     <ul>
@@ -54,7 +34,7 @@
     <ul>
       {% for component in meta.components %}
         <li>
-          <a href="/components/{{ component.tagName | removeWaPrefix }}">
+          <a href="/components/{{ component.tagName | removeSlPrefix }}">
             {{ component.name | classNameToComponentName }}
           </a>
         </li>
@@ -67,8 +47,8 @@
       <li><a href="/tokens/typography">Typography</a></li>
       <li><a href="/tokens/color">Color</a></li>
       <li><a href="/tokens/spacing">Spacing</a></li>
-      <li><a href="/tokens/borders">Borders</a></li>
-      <li><a href="/tokens/shadows">Shadows</a></li>
+      <li><a href="/tokens/elevation">Elevation</a></li>
+      <li><a href="/tokens/border-radius">Border Radius</a></li>
       <li><a href="/tokens/transition">Transition</a></li>
       <li><a href="/tokens/z-index">Z-index</a></li>
       <li><a href="/tokens/more">More Tokens</a></li>

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">
-            <wa-icon name="grip-vertical"></wa-icon>
+            <sl-icon name="grip-vertical"></sl-icon>
           </div>
         </div>
 

docs/_utilities/copy-code-buttons.cjs

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

docs/_utilities/markdown.cjs

@@ -23,20 +23,12 @@ markdown.use(markdownItReplaceIt);
 
 // Callouts
 ['tip', 'warning', 'danger'].forEach(type => {
-  const variant = type === 'tip' ? 'brand' : type;
-  let icon = 'info-circle';
-  if (type === 'warning') icon = 'exclamation-circle';
-  if (type === 'danger') icon = 'exclamation-triangle';
-
   markdown.use(markdownItContainer, type, {
     render: function (tokens, idx) {
       if (tokens[idx].nesting === 1) {
-        return `
-          <wa-alert class="callout" variant="${variant}" open>
-            <wa-icon slot="icon" name="${icon}"></wa-icon>
-        `;
+        return `<div role="alert" class="callout callout--${type}">`;
       }
-      return '</wa-alert>\n';
+      return '</div>\n';
     }
   });
 });

docs/_utilities/replacer.cjs

@@ -13,12 +13,7 @@
  * @param {Replacements} replacements
  */
 module.exports = function (content, replacements) {
-  /** This seems trivial, but by assigning to a string first, THEN using innerHTML after iterating over every replacement, we reduce the calculations of JSDOM. At the time of writing benchmarks show a reduction from 9seconds to 3 seconds by doing so. */
-  let html = content.body.innerHTML;
-
   replacements.forEach(replacement => {
-    html = html.replaceAll(replacement.pattern, replacement.replacement);
+    content.body.innerHTML = content.body.innerHTML.replaceAll(replacement.pattern, replacement.replacement);
   });
-
-  content.body.innerHTML = html;
 };

docs/_utilities/scrolling-tables.cjs

@@ -1,13 +1,8 @@
 /**
- * Turns tables into scrollable tables
+ * Turns headings into clickable, deep linkable anchors. The provided doc should be a document object provided by JSDOM.
  * The same document will be returned with the appropriate DOM manipulations.
  */
 module.exports = function (doc, options) {
-  // We don't want to run this on layouts.
-  if (doc.querySelector("[data-layout='layout-example.njk']")) {
-    return;
-  }
-
   const tables = [...doc.querySelectorAll('table')];
 
   options = {

docs/assets/images/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="186" height="186" viewBox="0 0 186 186"><g fill="none" fill-rule="evenodd"><rect width="186" height="186" fill="#103257" opacity="0"/><path fill="#F6894C" d="M106.95,13.9672306 C106.95,19.1752428 104.10296,23.7175103 99.8823543,26.1190227 L130.2,48.8851296 L159.91784,39.4892184 C158.760743,37.4541707 158.1,35.0993755 158.1,32.5902046 C158.1,24.8763205 164.345703,18.6229741 172.05,18.6229741 C179.754297,18.6229741 186,24.8763205 186,32.5902046 C186,40.3040179 179.754297,46.5574352 172.05,46.5574352 C171.315566,46.5574352 170.594594,46.5006795 169.890983,46.39107 L137.151086,130.163238 C134.361086,137.302399 127.486526,142 119.830057,142 L66.1699429,142 C58.5134743,142 51.6389143,137.302399 48.8489143,130.163238 L16.1089463,46.39107 C15.4052994,46.5006795 14.6842926,46.5574352 13.95,46.5574352 C6.245632,46.5574352 0,40.3040179 0,32.5902046 C0,24.8763205 6.245632,18.6229741 13.95,18.6229741 C21.654368,18.6229741 27.9,24.8763205 27.9,32.5902046 C27.9,35.0993755 27.2391509,37.4541707 26.0822663,39.4892184 L55.8,48.8851296 L86.1176457,26.1190227 C81.89704,23.7175103 79.05,19.1752428 79.05,13.9672306 C79.05,6.25334639 85.2957029,0 93,0 C100.704297,0 106.95,6.25334639 106.95,13.9672306 Z" transform="translate(0 22)"/></g></svg>

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@${waVersion}`)
+      .replace(/@shoelace-style\/shoelace/g, `https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}`)
       .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 waVersion = document.documentElement.getAttribute('data-wa-version');
+  const shoelaceVersion = document.documentElement.getAttribute('data-shoelace-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 (!waVersion) {
-    throw new Error('The data-wa-version attribute is missing from <html>.');
+  if (!shoelaceVersion) {
+    throw new Error('The data-shoelace-version attribute is missing from <html>.');
   }
 
   // Sync flavor UI on page load
@@ -166,6 +166,9 @@
       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 prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const isDark = theme === 'dark' || (theme === 'auto' && prefersDark);
       const editors = isReact ? '0010' : '1000';
       let htmlTemplate = '';
       let jsTemplate = '';
@@ -179,7 +182,7 @@
       // HTML templates
       if (!isReact) {
         htmlTemplate =
-          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${waVersion}/${cdndir}/autoloader.js"></script>\n` +
+          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/shoelace.js"></script>\n` +
           `\n${htmlExample}`;
         jsTemplate = '';
       }
@@ -190,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@${waVersion}/${cdndir}/utilities/base-path';\n` +
+          `import { setBasePath } from 'https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/utilities/base-path';\n` +
           `\n` +
-          `// Set the base path for Web Awesome assets\n` +
-          `setBasePath('https://esm.sh/@shoelace-style/shoelace@${waVersion}/${npmdir}/')\n` +
+          `// Set the base path for Shoelace assets\n` +
+          `setBasePath('https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\n` +
           `\n${convertModuleLinks(reactExample)}\n` +
           `\n` +
           `ReactDOM.render(<App />, document.getElementById('root'));`;
@@ -201,22 +204,25 @@
 
       // CSS templates
       cssTemplate =
-        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${waVersion}/${cdndir}/themes/default.css';\n` +
+        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/themes/${
+          isDark ? 'dark' : 'light'
+        }.css';\n` +
         '\n' +
         'body {\n' +
-        '  font: var(--wa-font-size-root) sans-serif;\n' +
-        '  background-color: var(--wa-color-surface-default);\n' +
-        '  color: var(--wa-color-text-normal);\n' +
-        '  padding: var(--wa-space-m);\n' +
+        '  font: 16px sans-serif;\n' +
+        '  background-color: var(--sl-color-neutral-0);\n' +
+        '  color: var(--sl-color-neutral-900);\n' +
+        '  padding: 1rem;\n' +
         '}';
 
       // Docs: https://blog.codepen.io/documentation/prefill/
       const data = {
         title: '',
         description: '',
-        tags: ['web awesome', 'web components'],
+        tags: ['shoelace', 'web components'],
         editors,
         head: `<meta name="viewport" content="width=device-width">`,
+        html_classes: `sl-theme-${isDark ? 'dark' : 'light'}`,
         css_external: ``,
         js_external: ``,
         js_module: true,

docs/assets/scripts/docs.js

@@ -15,7 +15,7 @@
   }
 
   function isSidebarVisible() {
-    return getSidebar()?.getBoundingClientRect().x >= 0;
+    return getSidebar().getBoundingClientRect().x >= 0;
   }
 
   function toggleSidebar(force) {
@@ -24,11 +24,7 @@
   }
 
   function updateInert() {
-    const sidebar = getSidebar();
-
-    if (sidebar) {
-      sidebar.inert = !isSidebarVisible();
-    }
+    getSidebar().inert = !isSidebarVisible();
   }
 
   // Toggle the menu
@@ -77,6 +73,72 @@
   updateInert();
 })();
 
+//
+// Theme selector
+//
+(() => {
+  function getTheme() {
+    return localStorage.getItem('theme') || 'auto';
+  }
+
+  function isDark() {
+    if (theme === 'auto') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return theme === 'dark';
+  }
+
+  function setTheme(newTheme) {
+    theme = newTheme;
+    localStorage.setItem('theme', theme);
+
+    // Update the UI
+    updateSelection();
+
+    // Toggle the dark mode class
+    document.documentElement.classList.toggle('sl-theme-dark', isDark());
+  }
+
+  function updateSelection() {
+    const menu = document.querySelector('#theme-selector sl-menu');
+    if (!menu) return;
+    [...menu.querySelectorAll('sl-menu-item')].map(item => (item.checked = item.getAttribute('value') === theme));
+  }
+
+  let theme = getTheme();
+
+  // Selection is not preserved when changing page, so update when opening dropdown
+  document.addEventListener('sl-show', event => {
+    const themeSelector = event.target.closest('#theme-selector');
+    if (!themeSelector) return;
+    updateSelection();
+  });
+
+  // Listen for selections
+  document.addEventListener('sl-select', event => {
+    const menu = event.target.closest('#theme-selector sl-menu');
+    if (!menu) return;
+    setTheme(event.detail.item.value);
+  });
+
+  // Update the theme when the preference changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setTheme(theme));
+
+  // Toggle with backslash
+  document.addEventListener('keydown', event => {
+    if (
+      event.key === '\\' &&
+      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
+    ) {
+      event.preventDefault();
+      setTheme(isDark() ? 'light' : 'dark');
+    }
+  });
+
+  // Set the initial theme and sync the UI
+  setTheme(theme);
+})();
+
 //
 // Open details when printing
 //
@@ -101,6 +163,32 @@
   });
 })();
 
+//
+// Copy code buttons
+//
+(() => {
+  document.addEventListener('click', event => {
+    const button = event.target.closest('.copy-code-button');
+    const pre = button?.closest('pre');
+    const code = pre?.querySelector('code');
+    const copyIcon = button?.querySelector('.copy-code-button__copy-icon');
+    const copiedIcon = button?.querySelector('.copy-code-button__copied-icon');
+
+    if (button && code) {
+      navigator.clipboard.writeText(code.innerText);
+      copyIcon.style.display = 'none';
+      copiedIcon.style.display = 'inline';
+      button.classList.add('copy-code-button--copied');
+
+      setTimeout(() => {
+        copyIcon.style.display = 'inline';
+        copiedIcon.style.display = 'none';
+        button.classList.remove('copy-code-button--copied');
+      }, 1000);
+    }
+  });
+})();
+
 //
 // Smooth links
 //

docs/assets/scripts/search.js

@@ -10,7 +10,7 @@
       <div class="search__content">
         <div class="search__header">
           <div id="search-combobox" class="search__input-wrapper">
-            <wa-icon name="search"></wa-icon>
+            <sl-icon name="search"></sl-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>
-              <wa-icon name="x-circle-fill"></wa-icon>
+              <sl-icon name="x-circle-fill"></sl-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-wa-version');
+  const version = document.documentElement.getAttribute('data-shoelace-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">
-            <wa-icon name="${icon}"></wa-icon>
+            <sl-icon name="${icon}"></sl-icon>
           </div>
           <div class="search__result__details">
             <div class="search__result-title"></div>
@@ -373,12 +373,4 @@
       hide();
     }
   });
-
-  // We're using Turbo, so when a user searches for something, visits a result, and presses the back button, the search
-  // UI will still be visible but not interactive. This removes the search UI when Turbo renders a page so they don't
-  // get trapped.
-  window.addEventListener('turbo:render', () => {
-    document.body.classList.remove('search-visible');
-    document.querySelectorAll('.search__overlay, .search__dialog').forEach(el => el.remove());
-  });
 })();

docs/assets/styles/code-previews.css

@@ -1,21 +1,21 @@
 /* Interactive code blocks */
 .code-preview {
   position: relative;
-  border-radius: var(--wa-corners-1x);
-  background-color: var(--wa-color-surface-lowered);
-  margin-bottom: var(--wa-space-xl);
+  border-radius: 3px;
+  background-color: var(--sl-color-neutral-50);
+  margin-bottom: 1.5rem;
 }
 
 .code-preview__preview {
   position: relative;
-  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border: solid 1px var(--sl-color-neutral-200);
   border-bottom: none;
-  border-top-left-radius: var(--wa-corners-1x);
-  border-top-right-radius: var(--wa-corners-1x);
-  background-color: var(--wa-color-surface-default);
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  background-color: var(--sl-color-neutral-0);
   min-width: 20rem;
   max-width: 100%;
-  padding: var(--wa-space-xl) var(--wa-space-3xl) var(--wa-space-xl) var(--wa-space-xl);
+  padding: 1.5rem 3.25rem 1.5rem 1.5rem;
 }
 
 /* Block the preview while dragging to prevent iframes from intercepting drag events */
@@ -40,16 +40,16 @@
   bottom: 0;
   width: 1.75rem;
   font-size: 20px;
-  color: var(--wa-color-text-quiet);
-  background-color: var(--wa-color-surface-default);
-  border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
-  border-top-right-radius: var(--wa-corners-1x);
+  color: var(--sl-color-neutral-600);
+  background-color: var(--sl-color-neutral-0);
+  border-left: solid 1px var(--sl-color-neutral-200);
+  border-top-right-radius: 3px;
   cursor: ew-resize;
 }
 
 @media screen and (max-width: 600px) {
   .code-preview__preview {
-    padding-right: var(--wa-space-xl);
+    padding-right: 1.5rem;
   }
 
   .code-preview__resizer {
@@ -58,7 +58,7 @@
 }
 
 .code-preview__source {
-  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border: solid 1px var(--sl-color-neutral-200);
   border-bottom: none;
   border-radius: 0 !important;
   display: none;
@@ -74,9 +74,9 @@
 
 .code-preview__buttons {
   position: relative;
-  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
-  border-bottom-left-radius: var(--wa-corners-1x);
-  border-bottom-right-radius: var(--wa-corners-1x);
+  border: solid 1px var(--sl-color-neutral-200);
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
   display: flex;
 }
 
@@ -86,18 +86,18 @@
   min-width: 2.5rem;
   border: none;
   border-radius: 0;
-  background: var(--wa-color-surface-default);
+  background: var(--sl-color-neutral-0);
   font: inherit;
-  font-size: var(--wa-font-size-xs);
-  font-weight: var(--wa-font-weight-normal);
+  font-size: 0.7rem;
+  font-weight: 500;
   text-transform: uppercase;
-  color: var(--wa-color-text-quiet);
+  color: var(--sl-color-neutral-600);
   padding: 0 1rem;
   cursor: pointer;
 }
 
 .code-preview__button:not(:last-of-type) {
-  border-right: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border-right: solid 1px var(--sl-color-neutral-200);
 }
 
 .code-preview__button--html,
@@ -109,8 +109,8 @@
 }
 
 .code-preview__button--selected {
-  font-weight: var(--wa-font-weight-heavy);
-  color: var(--wa-color-brand-text-on-surface);
+  font-weight: 700;
+  color: var(--sl-color-primary-600);
 }
 
 .code-preview__button--codepen {
@@ -120,25 +120,25 @@
 }
 
 .code-preview__button:first-of-type {
-  border-bottom-left-radius: var(--wa-corners-1x);
+  border-bottom-left-radius: 3px;
 }
 
 .code-preview__button:last-of-type {
-  border-bottom-right-radius: var(--wa-corners-1x);
+  border-bottom-right-radius: 3px;
 }
 
 .code-preview__button:hover,
 .code-preview__button:active {
-  box-shadow: 0 0 0 var(--wa-border-width-thin) var(--wa-color-brand-outline-muted);
+  box-shadow: 0 0 0 1px var(--sl-color-primary-400);
   border-right-color: transparent;
-  background-color: var(--wa-color-brand-fill-muted);
-  color: var(--wa-color-brand-text-on-surface);
+  background-color: var(--sl-color-primary-50);
+  color: var(--sl-color-primary-600);
   z-index: 1;
 }
 
 .code-preview__button:focus-visible {
   outline: none;
-  outline: var(--wa-focus-ring);
+  outline: var(--sl-focus-ring);
   z-index: 2;
 }
 
@@ -149,7 +149,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  color: var(--wa-color-text-quiet);
+  color: var(--sl-color-neutral-600);
   cursor: pointer;
 }
 

docs/assets/styles/search.css

@@ -1,31 +1,34 @@
 /* Search plugin */
-:root {
-  --docs-search-box-background: var(--wa-form-controls-background);
-  --docs-search-box-border-width: var(--wa-form-controls-border-width);
-  --docs-search-box-border-color: var(--wa-form-controls-border-color-resting);
-  --docs-search-box-color: var(--wa-form-controls-placeholder-color);
-
-  --docs-search-dialog-background: var(--wa-color-surface-raised);
-  --docs-search-border-width: var(--wa-border-width-thin);
-  --docs-search-border-color: var(--wa-color-surface-outline);
-  --docs-search-text-color: var(--wa-color-text-normal);
-  --docs-search-text-color-muted: var(--wa-color-text-quiet);
-  --docs-search-font-weight-normal: var(--wa-font-weight-normal);
-  --docs-search-font-weight-semibold: var(--wa-font-weight-medium);
-  --docs-search-border-radius: calc(2 * var(--wa-corners-1x));
-
-  --docs-search-accent-color: var(--wa-color-brand-text-on-surface);
-  --docs-search-icon-color: var(--wa-color-neutral-fill-vivid);
-  --docs-search-icon-color-active: color-mix(in lch, var(--wa-color-neutral-fill-vivid), 8% black);
-  --docs-search-shadow: var(--wa-shadow-level-3);
-  --docs-search-result-background-hover: var(--wa-color-neutral-fill-muted-alt);
-  --docs-search-result-color-hover: var(--wa-color-neutral-text-on-muted);
-  --docs-search-result-background-active: var(--wa-color-brand-fill-vivid);
-  --docs-search-result-color-active: var(--wa-color-brand-text-on-vivid);
-  --docs-search-focus-ring: var(--wa-focus-ring);
+:root,
+:root.sl-theme-dark {
+  --docs-search-box-background: var(--sl-color-neutral-0);
+  --docs-search-box-border-width: 1px;
+  --docs-search-box-border-color: var(--sl-color-neutral-300);
+  --docs-search-box-color: var(--sl-color-neutral-600);
+  --docs-search-dialog-background: var(--sl-color-neutral-0);
+  --docs-search-border-width: var(--docs-border-width);
+  --docs-search-border-color: var(--docs-border-color);
+  --docs-search-text-color: var(--sl-color-neutral-900);
+  --docs-search-text-color-muted: var(--sl-color-neutral-500);
+  --docs-search-font-weight-normal: var(--sl-font-weight-normal);
+  --docs-search-font-weight-semibold: var(--sl-font-weight-semibold);
+  --docs-search-border-radius: calc(2 * var(--docs-border-radius));
+  --docs-search-accent-color: var(--sl-color-primary-600);
+  --docs-search-icon-color: var(--sl-color-neutral-500);
+  --docs-search-icon-color-active: var(--sl-color-neutral-600);
+  --docs-search-shadow: var(--docs-shadow-x-large);
+  --docs-search-result-background-hover: var(--sl-color-neutral-100);
+  --docs-search-result-color-hover: var(--sl-color-neutral-900);
+  --docs-search-result-background-active: var(--sl-color-primary-600);
+  --docs-search-result-color-active: var(--sl-color-neutral-0);
+  --docs-search-focus-ring: var(--sl-focus-ring);
   --docs-search-overlay-background: rgb(0 0 0 / 0.33);
 }
 
+:root.sl-theme-dark {
+  --docs-search-overlay-background: rgb(71 71 71 / 0.33);
+}
+
 body.search-visible {
   padding-right: var(--docs-search-scroll-lock-size) !important;
   overflow: hidden !important;
@@ -44,7 +47,7 @@ body.search-visible {
   font: inherit;
   color: var(--docs-search-box-color);
   padding: 0.75rem 1rem;
-  margin: var(--wa-space-l) 0;
+  margin: var(--sl-spacing-large) 0;
   cursor: pointer;
 }
 
@@ -147,7 +150,7 @@ body.search-visible {
   align-items: center;
 }
 
-.search__input-wrapper wa-icon {
+.search__input-wrapper sl-icon {
   width: 1.5rem;
   height: 1.5rem;
   flex: 0 0 auto;
@@ -169,7 +172,7 @@ body.search-visible {
   display: none;
 }
 
-.search__clear-button:active wa-icon {
+.search__clear-button:active sl-icon {
   color: var(--docs-search-icon-color-active);
 }
 
@@ -273,7 +276,7 @@ body.search-visible {
   color: var(--docs-search-text-color-muted);
 }
 
-.search__result-icon wa-icon {
+.search__result-icon sl-icon {
   font-size: 1.5rem;
 }
 

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 webAwesomeFlavoredMarkdown = require('./_utilities/markdown.cjs');
+const shoelaceFlavoredMarkdown = 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');
@@ -28,20 +28,11 @@ module.exports = function (eleventyConfig) {
   //
   // Global data
   //
-  let baseUrl = 'https://shoelace.style/';
-
-  if (process.env.VERCEL_URL) {
-    baseUrl = process.env.VERCEL_URL;
-    if (!process.env.VERCEL_URL.match(/^https?/)) {
-      baseUrl = 'https://' + baseUrl;
-    }
-  }
-
-  eleventyConfig.addGlobalData('baseUrl', baseUrl); // the production URL
+  eleventyConfig.addGlobalData('baseUrl', 'https://shoelace.style/'); // the production URL
   eleventyConfig.addGlobalData('layout', 'default'); // make 'default' the default layout
   eleventyConfig.addGlobalData('toc', true); // enable the table of contents
   eleventyConfig.addGlobalData('meta', {
-    title: 'Web Awesome',
+    title: 'Shoelace',
     description: 'A forward-thinking library of web components.',
     image: 'images/og-image.png',
     version: customElementsManifest.package.version,
@@ -61,11 +52,6 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy(assetsDir);
   eleventyConfig.setServerPassthroughCopyBehavior('passthrough'); // emulates passthrough copy during --serve
 
-  //
-  // Add additional extensions. This allows things like {% include "layout.css" %}
-  //
-  eleventyConfig.setTemplateFormats(['html', 'md', 'njk', 'css']);
-
   //
   // Functions
   //
@@ -88,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 wa- prefix).`
+          `name (minus the sl- prefix).`
       );
     }
     return component;
@@ -97,27 +83,27 @@ module.exports = function (eleventyConfig) {
   //
   // Custom markdown syntaxes
   //
-  eleventyConfig.setLibrary('md', webAwesomeFlavoredMarkdown);
+  eleventyConfig.setLibrary('md', shoelaceFlavoredMarkdown);
 
   //
   // Filters
   //
   eleventyConfig.addFilter('markdown', content => {
-    return webAwesomeFlavoredMarkdown.render(content);
+    return shoelaceFlavoredMarkdown.render(content);
   });
 
   eleventyConfig.addFilter('markdownInline', content => {
-    return webAwesomeFlavoredMarkdown.renderInline(content);
+    return shoelaceFlavoredMarkdown.renderInline(content);
   });
 
   eleventyConfig.addFilter('classNameToComponentName', className => {
-    let name = capitalCase(className.replace(/^Wa/, ''));
+    let name = capitalCase(className.replace(/^Sl/, ''));
     if (name === 'Qr Code') name = 'QR Code'; // manual override
     return name;
   });
 
-  eleventyConfig.addFilter('removeWaPrefix', tagName => {
-    return tagName.replace(/^wa-/, '');
+  eleventyConfig.addFilter('removeSlPrefix', tagName => {
+    return tagName.replace(/^sl-/, '');
   });
 
   //
@@ -148,7 +134,6 @@ module.exports = function (eleventyConfig) {
     scrollingTables(doc);
     copyCodeButtons(doc); // must be after codePreviews + highlightCodeBlocks
     typography(doc, '#content');
-
     replacer(doc, [
       { pattern: '%VERSION%', replacement: customElementsManifest.package.version },
       { pattern: '%CDNDIR%', replacement: cdndir },
@@ -197,23 +182,21 @@ module.exports = function (eleventyConfig) {
         }).window.document;
         const content = doc.querySelector('#content');
 
-        if (content) {
-          // Get title and headings
-          const title = (doc.querySelector('title')?.textContent || path.basename(result.outputPath)).trim();
-          const headings = [...content.querySelectorAll('h1, h2, h3, h4')]
-            .map(heading => heading.textContent)
-            .join(' ')
-            .replace(/\s+/g, ' ')
-            .trim();
+        // Get title and headings
+        const title = (doc.querySelector('title')?.textContent || path.basename(result.outputPath)).trim();
+        const headings = [...content.querySelectorAll('h1, h2, h3, h4')]
+          .map(heading => heading.textContent)
+          .join(' ')
+          .replace(/\s+/g, ' ')
+          .trim();
 
-          // Remove code blocks and whitespace from content
-          [...content.querySelectorAll('code[class|=language]')].forEach(code => code.remove());
-          const textContent = content.textContent.replace(/\s+/g, ' ').trim();
+        // Remove code blocks and whitespace from content
+        [...content.querySelectorAll('code[class|=language]')].forEach(code => code.remove());
+        const textContent = content.textContent.replace(/\s+/g, ' ').trim();
 
-          // Update the index and map
-          this.add({ id: index, t: title, h: headings, c: textContent });
-          map[index] = { title, url };
-        }
+        // Update the index and map
+        this.add({ id: index, t: title, h: headings, c: textContent });
+        map[index] = { title, url };
       });
     });
 

docs/pages/components/alert.md

@@ -6,25 +6,25 @@ layout: component
 ---
 
 ```html:preview
-<wa-alert open>
-  <wa-icon slot="icon" name="info-circle"></wa-icon>
+<sl-alert open>
+  <sl-icon slot="icon" name="info-circle"></sl-icon>
   This is a standard alert. You can customize its content and even the icon.
-</wa-alert>
+</sl-alert>
 ```
 
 ```jsx:react
-import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
-  <WaAlert open>
-    <WaIcon slot="icon" name="info-circle" />
+  <SlAlert open>
+    <SlIcon slot="icon" name="info-circle" />
     This is a standard alert. You can customize its content and even the icon.
-  </WaAlert>
+  </SlAlert>
 );
 ```
 
-:::warning
+:::tip
 Alerts will not be visible if the `open` attribute is not present.
 :::
 
@@ -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
-<wa-alert variant="brand" open>
-  <wa-icon slot="icon" name="info-circle"></wa-icon>
+<sl-alert variant="primary" open>
+  <sl-icon slot="icon" name="info-circle"></sl-icon>
   <strong>This is super informative</strong><br />
   You can tell by how pretty the alert is.
-</wa-alert>
+</sl-alert>
 
 <br />
 
-<wa-alert variant="success" open>
-  <wa-icon slot="icon" name="check2-circle"></wa-icon>
+<sl-alert variant="success" open>
+  <sl-icon slot="icon" name="check2-circle"></sl-icon>
   <strong>Your changes have been saved</strong><br />
   You can safely exit the app now.
-</wa-alert>
+</sl-alert>
 
 <br />
 
-<wa-alert variant="neutral" open>
-  <wa-icon slot="icon" name="gear"></wa-icon>
+<sl-alert variant="neutral" open>
+  <sl-icon slot="icon" name="gear"></sl-icon>
   <strong>Your settings have been updated</strong><br />
-  Settings will take effect on next login.
-</wa-alert>
+  Settings will take affect on next login.
+</sl-alert>
 
 <br />
 
-<wa-alert variant="warning" open>
-  <wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
+<sl-alert variant="warning" open>
+  <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
   <strong>Your session has ended</strong><br />
   Please login again to continue.
-</wa-alert>
+</sl-alert>
 
 <br />
 
-<wa-alert variant="danger" open>
-  <wa-icon slot="icon" name="exclamation-octagon"></wa-icon>
+<sl-alert variant="danger" open>
+  <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
   <strong>Your account has been deleted</strong><br />
   We're very sorry to see you go!
-</wa-alert>
+</sl-alert>
 ```
 
 ```jsx:react
-import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
   <>
-    <WaAlert variant="brand" open>
-      <WaIcon slot="icon" name="info-circle" />
+    <SlAlert variant="primary" open>
+      <SlIcon slot="icon" name="info-circle" />
       <strong>This is super informative</strong>
       <br />
       You can tell by how pretty the alert is.
-    </WaAlert>
+    </SlAlert>
 
     <br />
 
-    <WaAlert variant="success" open>
-      <WaIcon slot="icon" name="check2-circle" />
+    <SlAlert variant="success" open>
+      <SlIcon slot="icon" name="check2-circle" />
       <strong>Your changes have been saved</strong>
       <br />
       You can safely exit the app now.
-    </WaAlert>
+    </SlAlert>
 
     <br />
 
-    <WaAlert variant="neutral" open>
-      <WaIcon slot="icon" name="gear" />
+    <SlAlert variant="neutral" open>
+      <SlIcon slot="icon" name="gear" />
       <strong>Your settings have been updated</strong>
       <br />
-      Settings will take effect on next login.
-    </WaAlert>
+      Settings will take affect on next login.
+    </SlAlert>
 
     <br />
 
-    <WaAlert variant="warning" open>
-      <WaIcon slot="icon" name="exclamation-triangle" />
+    <SlAlert variant="warning" open>
+      <SlIcon slot="icon" name="exclamation-triangle" />
       <strong>Your session has ended</strong>
       <br />
       Please login again to continue.
-    </WaAlert>
+    </SlAlert>
 
     <br />
 
-    <WaAlert variant="danger" open>
-      <WaIcon slot="icon" name="exclamation-octagon" />
+    <SlAlert variant="danger" open>
+      <SlIcon slot="icon" name="exclamation-octagon" />
       <strong>Your account has been deleted</strong>
       <br />
       We're very sorry to see you go!
-    </WaAlert>
+    </SlAlert>
   </>
 );
 ```
@@ -131,14 +131,14 @@ const App = () => (
 Add the `closable` attribute to show a close button that will hide the alert.
 
 ```html:preview
-<wa-alert variant="brand" open closable class="alert-closable">
-  <wa-icon slot="icon" name="info-circle"></wa-icon>
+<sl-alert variant="primary" open closable class="alert-closable">
+  <sl-icon slot="icon" name="info-circle"></sl-icon>
   You can close this alert any time!
-</wa-alert>
+</sl-alert>
 
 <script>
   const alert = document.querySelector('.alert-closable');
-  alert.addEventListener('wa-after-hide', () => {
+  alert.addEventListener('sl-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 WaAlert from '@shoelace-style/shoelace/dist/react/alert';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => {
   const [open, setOpen] = useState(true);
@@ -158,10 +158,10 @@ const App = () => {
   }
 
   return (
-    <WaAlert open={open} closable onWaAfterHide={handleHide}>
-      <WaIcon slot="icon" name="info-circle" />
+    <SlAlert open={open} closable onSlAfterHide={handleHide}>
+      <SlIcon slot="icon" name="info-circle" />
       You can close this alert any time!
-    </WaAlert>
+    </SlAlert>
   );
 };
 ```
@@ -171,16 +171,16 @@ const App = () => {
 Icons are optional. Simply omit the `icon` slot if you don't want them.
 
 ```html:preview
-<wa-alert variant="brand" open> Nothing fancy here, just a simple alert. </wa-alert>
+<sl-alert variant="primary" open> Nothing fancy here, just a simple alert. </sl-alert>
 ```
 
 ```jsx:react
-import WaAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
 
 const App = () => (
-  <WaAlert variant="brand" open>
+  <SlAlert variant="primary" open>
     Nothing fancy here, just a simple alert.
-  </WaAlert>
+  </SlAlert>
 );
 ```
 
@@ -190,38 +190,38 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
 
 ```html:preview
 <div class="alert-duration">
-  <wa-button variant="brand">Show Alert</wa-button>
+  <sl-button variant="primary">Show Alert</sl-button>
 
-  <wa-alert variant="brand" duration="3000" closable>
-    <wa-icon slot="icon" name="info-circle"></wa-icon>
+  <sl-alert variant="primary" duration="3000" closable>
+    <sl-icon slot="icon" name="info-circle"></sl-icon>
     This alert will automatically hide itself after three seconds, unless you interact with it.
-  </wa-alert>
+  </sl-alert>
 </div>
 
 <script>
   const container = document.querySelector('.alert-duration');
-  const button = container.querySelector('wa-button');
-  const alert = container.querySelector('wa-alert');
+  const button = container.querySelector('sl-button');
+  const alert = container.querySelector('sl-alert');
 
   button.addEventListener('click', () => alert.show());
 </script>
 
 <style>
-  .alert-duration wa-alert {
-    margin-top: var(--wa-space-m);
+  .alert-duration sl-alert {
+    margin-top: var(--sl-spacing-medium);
   }
 </style>
 ```
 
 ```jsx:react
 import { useState } from 'react';
-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';
+import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const css = `
-  .alert-duration wa-alert {
-    margin-top: var(--wa-space-m);
+  .alert-duration sl-alert {
+    margin-top: var(--sl-spacing-medium);
   }
 `;
 
@@ -231,14 +231,14 @@ const App = () => {
   return (
     <>
       <div className="alert-duration">
-        <WaButton variant="brand" onClick={() => setOpen(true)}>
+        <SlButton variant="primary" onClick={() => setOpen(true)}>
           Show Alert
-        </WaButton>
+        </SlButton>
 
-        <WaAlert variant="brand" duration="3000" open={open} closable onWaAfterHide={() => setOpen(false)}>
-          <WaIcon slot="icon" name="info-circle" />
+        <SlAlert variant="primary" duration="3000" open={open} closable onSlAfterHide={() => setOpen(false)}>
+          <SlIcon slot="icon" name="info-circle" />
           This alert will automatically hide itself after three seconds, unless you interact with it.
-        </WaAlert>
+        </SlAlert>
       </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">
-  <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-button variant="primary">Primary</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-alert variant="brand" duration="3000" closable>
-    <wa-icon slot="icon" name="info-circle"></wa-icon>
+  <sl-alert variant="primary" duration="3000" closable>
+    <sl-icon slot="icon" name="info-circle"></sl-icon>
     <strong>This is super informative</strong><br />
     You can tell by how pretty the alert is.
-  </wa-alert>
+  </sl-alert>
 
-  <wa-alert variant="success" duration="3000" closable>
-    <wa-icon slot="icon" name="check2-circle"></wa-icon>
+  <sl-alert variant="success" duration="3000" closable>
+    <sl-icon slot="icon" name="check2-circle"></sl-icon>
     <strong>Your changes have been saved</strong><br />
     You can safely exit the app now.
-  </wa-alert>
+  </sl-alert>
 
-  <wa-alert variant="neutral" duration="3000" closable>
-    <wa-icon slot="icon" name="gear"></wa-icon>
+  <sl-alert variant="neutral" duration="3000" closable>
+    <sl-icon slot="icon" name="gear"></sl-icon>
     <strong>Your settings have been updated</strong><br />
-    Settings will take effect on next login.
-  </wa-alert>
+    Settings will take affect on next login.
+  </sl-alert>
 
-  <wa-alert variant="warning" duration="3000" closable>
-    <wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
+  <sl-alert variant="warning" duration="3000" closable>
+    <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
     <strong>Your session has ended</strong><br />
     Please login again to continue.
-  </wa-alert>
+  </sl-alert>
 
-  <wa-alert variant="danger" duration="3000" closable>
-    <wa-icon slot="icon" name="exclamation-octagon"></wa-icon>
+  <sl-alert variant="danger" duration="3000" closable>
+    <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
     <strong>Your account has been deleted</strong><br />
     We're very sorry to see you go!
-  </wa-alert>
+  </sl-alert>
 </div>
 
 <script>
   const container = document.querySelector('.alert-toast');
 
-  ['brand', 'success', 'neutral', 'warning', 'danger'].map(variant => {
-    const button = container.querySelector(`wa-button[variant="${variant}"]`);
-    const alert = container.querySelector(`wa-alert[variant="${variant}"]`);
+  ['primary', 'success', 'neutral', 'warning', 'danger'].map(variant => {
+    const button = container.querySelector(`sl-button[variant="${variant}"]`);
+    const alert = container.querySelector(`sl-alert[variant="${variant}"]`);
 
     button.addEventListener('click', () => alert.toast());
   });
@@ -306,16 +306,16 @@ You should always use the `closable` attribute so users can dismiss the notifica
 
 ```jsx:react
 import { useRef } from 'react';
-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';
+import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 function showToast(alert) {
   alert.toast();
 }
 
 const App = () => {
-  const brand = useRef(null);
+  const primary = useRef(null);
   const success = useRef(null);
   const neutral = useRef(null);
   const warning = useRef(null);
@@ -323,60 +323,60 @@ const App = () => {
 
   return (
     <>
-      <WaButton variant="brand" onClick={() => brand.current.toast()}>
-        Brand
-      </WaButton>
+      <SlButton variant="primary" onClick={() => primary.current.toast()}>
+        Primary
+      </SlButton>
 
-      <WaButton variant="success" onClick={() => success.current.toast()}>
+      <SlButton variant="success" onClick={() => success.current.toast()}>
         Success
-      </WaButton>
+      </SlButton>
 
-      <WaButton variant="neutral" onClick={() => neutral.current.toast()}>
+      <SlButton variant="neutral" onClick={() => neutral.current.toast()}>
         Neutral
-      </WaButton>
+      </SlButton>
 
-      <WaButton variant="warning" onClick={() => warning.current.toast()}>
+      <SlButton variant="warning" onClick={() => warning.current.toast()}>
         Warning
-      </WaButton>
+      </SlButton>
 
-      <WaButton variant="danger" onClick={() => danger.current.toast()}>
+      <SlButton variant="danger" onClick={() => danger.current.toast()}>
         Danger
-      </WaButton>
+      </SlButton>
 
-      <WaAlert ref={brand} variant="brand" duration="3000" closable>
-        <WaIcon slot="icon" name="info-circle" />
+      <SlAlert ref={primary} variant="primary" duration="3000" closable>
+        <SlIcon slot="icon" name="info-circle" />
         <strong>This is super informative</strong>
         <br />
         You can tell by how pretty the alert is.
-      </WaAlert>
+      </SlAlert>
 
-      <WaAlert ref={success} variant="success" duration="3000" closable>
-        <WaIcon slot="icon" name="check2-circle" />
+      <SlAlert ref={success} variant="success" duration="3000" closable>
+        <SlIcon slot="icon" name="check2-circle" />
         <strong>Your changes have been saved</strong>
         <br />
         You can safely exit the app now.
-      </WaAlert>
+      </SlAlert>
 
-      <WaAlert ref={neutral} variant="neutral" duration="3000" closable>
-        <WaIcon slot="icon" name="gear" />
+      <SlAlert ref={neutral} variant="neutral" duration="3000" closable>
+        <SlIcon slot="icon" name="gear" />
         <strong>Your settings have been updated</strong>
         <br />
-        Settings will take effect on next login.
-      </WaAlert>
+        Settings will take affect on next login.
+      </SlAlert>
 
-      <WaAlert ref={warning} variant="warning" duration="3000" closable>
-        <WaIcon slot="icon" name="exclamation-triangle" />
+      <SlAlert ref={warning} variant="warning" duration="3000" closable>
+        <SlIcon slot="icon" name="exclamation-triangle" />
         <strong>Your session has ended</strong>
         <br />
         Please login again to continue.
-      </WaAlert>
+      </SlAlert>
 
-      <WaAlert ref={danger} variant="danger" duration="3000" closable>
-        <WaIcon slot="icon" name="exclamation-octagon" />
+      <SlAlert ref={danger} variant="danger" duration="3000" closable>
+        <SlIcon slot="icon" name="exclamation-octagon" />
         <strong>Your account has been deleted</strong>
         <br />
         We're very sorry to see you go!
-      </WaAlert>
+      </SlAlert>
     </>
   );
 };
@@ -388,12 +388,12 @@ For convenience, you can create a utility that emits toast notifications with a
 
 ```html:preview
 <div class="alert-toast-wrapper">
-  <wa-button variant="brand">Create Toast</wa-button>
+  <sl-button variant="primary">Create Toast</sl-button>
 </div>
 
 <script>
   const container = document.querySelector('.alert-toast-wrapper');
-  const button = container.querySelector('wa-button');
+  const button = container.querySelector('sl-button');
   let count = 0;
 
   // Always escape HTML for text arguments!
@@ -404,13 +404,13 @@ 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('wa-alert'), {
+  function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {
+    const alert = Object.assign(document.createElement('sl-alert'), {
       variant,
       closable: true,
       duration: duration,
       innerHTML: `
-        <wa-icon name="${icon}" slot="icon"></wa-icon>
+        <sl-icon name="${icon}" slot="icon"></sl-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 `.wa-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 `.sl-toast-stack` in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.
 
 ```css
-.wa-toast-stack {
+.sl-toast-stack {
   left: 0;
   right: auto;
 }

docs/pages/components/animated-image.md

@@ -6,17 +6,17 @@ layout: component
 ---
 
 ```html:preview
-<wa-animated-image
+<sl-animated-image
   src="https://shoelace.style/assets/images/walk.gif"
   alt="Animation of untied shoes walking on pavement"
-></wa-animated-image>
+></sl-animated-image>
 ```
 
 ```jsx:react
-import WaAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
 
 const App = () => (
-  <WaAnimatedImage
+  <SlAnimatedImage
     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
-<wa-animated-image
+<sl-animated-image
   src="https://shoelace.style/assets/images/tie.webp"
   alt="Animation of a shoe being tied"
-></wa-animated-image>
+></sl-animated-image>
 ```
 
 ```jsx:react
-import WaAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
 
 const App = () => (
-  <WaAnimatedImage src="https://shoelace.style/assets/images/tie.webp" alt="Animation of a shoe being tied" />
+  <SlAnimatedImage 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
-<wa-animated-image
+<sl-animated-image
   src="https://shoelace.style/assets/images/walk.gif"
   alt="Animation of untied shoes walking on pavement"
   style="width: 150px; height: 200px;"
 >
-</wa-animated-image>
+</sl-animated-image>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
 
 const App = () => (
-  <WaAnimatedImage
+  <SlAnimatedImage
     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
-<wa-animated-image
+<sl-animated-image
   src="https://shoelace.style/assets/images/walk.gif"
   alt="Animation of untied shoes walking on pavement"
   class="animated-image-custom-control-box"
-></wa-animated-image>
+></sl-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 WaAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
 
 const css = `
   .animated-image-custom-control-box::part(control-box) {
@@ -118,7 +118,7 @@ const css = `
 
 const App = () => (
   <>
-    <WaAnimatedImage
+    <SlAnimatedImage
       className="animated-image-custom-control-box"
       src="https://shoelace.style/assets/images/walk.gif"
       alt="Animation of untied shoes walking on pavement"

docs/pages/components/animation.md

@@ -5,14 +5,14 @@ meta:
 layout: component
 ---
 
-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.
+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.
 
 ```html:preview
 <div class="animation-overview">
-  <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>
+  <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>
 </div>
 
 <style>
@@ -20,21 +20,21 @@ To animate an element, wrap it in `<wa-animation>` and set an animation `name`.
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--sl-color-primary-600);
     margin: 1.5rem;
   }
 </style>
 ```
 
 ```jsx:react
-import WaAnimation from '@shoelace-style/shoelace/dist/react/animation';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
 
 const css = `
   .animation-overview .box {
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--sl-color-primary-600);
     margin: 1.5rem;
   }
 `;
@@ -42,18 +42,18 @@ const css = `
 const App = () => (
   <>
     <div class="animation-overview">
-      <WaAnimation name="bounce" duration={2000} play>
+      <SlAnimation name="bounce" duration={2000} play>
         <div class="box" />
-      </WaAnimation>
-      <WaAnimation name="jello" duration={2000} play>
+      </SlAnimation>
+      <SlAnimation name="jello" duration={2000} play>
         <div class="box" />
-      </WaAnimation>
-      <WaAnimation name="heartBeat" duration={2000} play>
+      </SlAnimation>
+      <SlAnimation name="heartBeat" duration={2000} play>
         <div class="box" />
-      </WaAnimation>
-      <WaAnimation name="flip" duration={2000} play>
+      </SlAnimation>
+      <SlAnimation name="flip" duration={2000} play>
         <div class="box" />
-      </WaAnimation>
+      </SlAnimation>
     </div>
 
     <style>{css}</style>
@@ -62,7 +62,7 @@ const App = () => (
 ```
 
 :::tip
-The animation will only be applied to the first child element found in `<wa-animation>`.
+The animation will only be applied to the first child element found in `<sl-animation>`.
 :::
 
 ## Examples
@@ -73,14 +73,14 @@ This example demonstrates all of the baked-in animations and easings. Animations
 
 ```html:preview
 <div class="animation-sandbox">
-  <wa-animation name="bounce" easing="ease-in-out" duration="2000" play>
+  <sl-animation name="bounce" easing="ease-in-out" duration="2000" play>
     <div class="box"></div>
-  </wa-animation>
+  </sl-animation>
 
   <div class="controls">
-    <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>
+    <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>
   </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('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 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 animations = getAnimationNames();
   const easings = getEasingNames();
 
   animations.map(name => {
-    const option = Object.assign(document.createElement('wa-option'), {
+    const option = Object.assign(document.createElement('sl-option'), {
       textContent: name,
       value: name
     });
@@ -104,23 +104,23 @@ This example demonstrates all of the baked-in animations and easings. Animations
   });
 
   easings.map(name => {
-    const option = Object.assign(document.createElement('wa-option'), {
+    const option = Object.assign(document.createElement('sl-option'), {
       textContent: name,
       value: name
     });
     easingName.appendChild(option);
   });
 
-  animationName.addEventListener('wa-change', () => (animation.name = animationName.value));
-  easingName.addEventListener('wa-change', () => (animation.easing = easingName.value));
-  playbackRate.addEventListener('wa-input', () => (animation.playbackRate = playbackRate.value));
+  animationName.addEventListener('sl-change', () => (animation.name = animationName.value));
+  easingName.addEventListener('sl-change', () => (animation.easing = easingName.value));
+  playbackRate.addEventListener('sl-input', () => (animation.playbackRate = playbackRate.value));
 </script>
 
 <style>
   .animation-sandbox .box {
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--sl-color-primary-600);
   }
 
   .animation-sandbox .controls {
@@ -128,7 +128,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
     margin-top: 2rem;
   }
 
-  .animation-sandbox .controls wa-select {
+  .animation-sandbox .controls sl-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">
-  <wa-animation name="jackInTheBox" duration="2000" iterations="1"><div class="box"></div></wa-animation>
+  <sl-animation name="jackInTheBox" duration="2000" iterations="1"><div class="box"></div></sl-animation>
 </div>
 
 <script>
   const container = document.querySelector('.animation-scroll');
-  const animation = container.querySelector('wa-animation');
+  const animation = container.querySelector('sl-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!
@@ -166,14 +166,14 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--sl-color-primary-600);
   }
 </style>
 ```
 
 ```jsx:react
 import { useEffect, useRef, useState } from 'react';
-import WaAnimation from '@shoelace-style/shoelace/dist/react/animation';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
 
 const css = `
   .animation-scroll {
@@ -184,7 +184,7 @@ const css = `
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--sl-color-primary-600);
   }
 `;
 
@@ -210,9 +210,9 @@ const App = () => {
   return (
     <>
       <div class="animation-scroll">
-        <WaAnimation ref={animation} name="jackInTheBox" duration={2000} iterations={1}>
+        <SlAnimation ref={animation} name="jackInTheBox" duration={2000} iterations={1}>
           <div ref={box} class="box" />
-        </WaAnimation>
+        </SlAnimation>
       </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">
-  <wa-animation easing="ease-in-out" duration="2000" play>
+  <sl-animation easing="ease-in-out" duration="2000" play>
     <div class="box"></div>
-  </wa-animation>
+  </sl-animation>
 </div>
 
 <script>
-  const animation = document.querySelector('.animation-keyframes wa-animation');
+  const animation = document.querySelector('.animation-keyframes sl-animation');
   animation.keyframes = [
     {
       offset: 0,
@@ -256,26 +256,26 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
   .animation-keyframes .box {
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--sl-color-primary-600);
   }
 </style>
 ```
 
 ```jsx:react
-import WaAnimation from '@shoelace-style/shoelace/dist/react/animation';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
 
 const css = `
   .animation-keyframes .box {
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--sl-color-primary-600);
   }
 `;
 
 const App = () => (
   <>
     <div class="animation-keyframes">
-      <WaAnimation
+      <SlAnimation
         easing="ease-in-out"
         duration={2000}
         play
@@ -297,7 +297,7 @@ const App = () => (
         ]}
       >
         <div class="box" />
-      </WaAnimation>
+      </SlAnimation>
     </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">
-  <wa-animation name="rubberBand" duration="1000" iterations="1">
-    <wa-button variant="brand">Click me</wa-button>
-  </wa-animation>
+  <sl-animation name="rubberBand" duration="1000" iterations="1">
+    <sl-button variant="primary">Click me</sl-button>
+  </sl-animation>
 </div>
 
 <script>
   const container = document.querySelector('.animation-form');
-  const animation = container.querySelector('wa-animation');
-  const button = container.querySelector('wa-button');
+  const animation = container.querySelector('sl-animation');
+  const button = container.querySelector('sl-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 WaAnimation from '@shoelace-style/shoelace/dist/react/animation';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => {
   const [play, setPlay] = useState(false);
 
   return (
     <div class="animation-form">
-      <WaAnimation name="rubberBand" duration={1000} iterations={1} play={play} onWaFinish={() => setPlay(false)}>
-        <WaButton variant="brand" onClick={() => setPlay(true)}>
+      <SlAnimation name="rubberBand" duration={1000} iterations={1} play={play} onSlFinish={() => setPlay(false)}>
+        <SlButton variant="primary" onClick={() => setPlay(true)}>
           Click me
-        </WaButton>
-      </WaAnimation>
+        </SlButton>
+      </SlAnimation>
     </div>
   );
 };

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
-<wa-avatar label="User avatar"></wa-avatar>
+<sl-avatar label="User avatar"></sl-avatar>
 ```
 
 ```jsx:react
-import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
 
-const App = () => <WaAvatar label="User avatar" />;
+const App = () => <SlAvatar 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
-<wa-avatar
+<sl-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"
-></wa-avatar>
-<wa-avatar
+></sl-avatar>
+<sl-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"
-></wa-avatar>
+></sl-avatar>
 ```
 
 ```jsx:react
-import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
 
 const App = () => (
-  <WaAvatar
+  <SlAvatar
     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"
   />
-  <WaAvatar
+  <SlAvatar
     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
-<wa-avatar initials="SL" label="Avatar with initials: SL"></wa-avatar>
+<sl-avatar initials="SL" label="Avatar with initials: SL"></sl-avatar>
 ```
 
 ```jsx:react
-import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
 
-const App = () => <WaAvatar initials="SL" label="Avatar with initials: SL" />;
+const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
 ```
 
 ### Custom Icons
@@ -71,36 +71,36 @@ const App = () => <WaAvatar 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
-<wa-avatar label="Avatar with an image icon">
-  <wa-icon slot="icon" name="image"></wa-icon>
-</wa-avatar>
+<sl-avatar label="Avatar with an image icon">
+  <sl-icon slot="icon" name="image"></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 an archive icon">
+  <sl-icon slot="icon" name="archive"></sl-icon>
+</sl-avatar>
 
-<wa-avatar label="Avatar with a briefcase icon">
-  <wa-icon slot="icon" name="briefcase"></wa-icon>
-</wa-avatar>
+<sl-avatar label="Avatar with a briefcase icon">
+  <sl-icon slot="icon" name="briefcase"></sl-icon>
+</sl-avatar>
 ```
 
 ```jsx:react
-import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
   <>
-    <WaAvatar label="Avatar with an image icon">
-      <WaIcon slot="icon" name="image" />
-    </WaAvatar>
+    <SlAvatar label="Avatar with an image icon">
+      <SlIcon slot="icon" name="image" />
+    </SlAvatar>
 
-    <WaAvatar label="Avatar with an archive icon">
-      <WaIcon slot="icon" name="archive" />
-    </WaAvatar>
+    <SlAvatar label="Avatar with an archive icon">
+      <SlIcon slot="icon" name="archive" />
+    </SlAvatar>
 
-    <WaAvatar label="Avatar with a briefcase icon">
-      <WaIcon slot="icon" name="briefcase" />
-    </WaAvatar>
+    <SlAvatar label="Avatar with a briefcase icon">
+      <SlIcon slot="icon" name="briefcase" />
+    </SlAvatar>
   </>
 );
 ```
@@ -110,20 +110,20 @@ const App = () => (
 Avatars can be shaped using the `shape` attribute.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
   <>
-    <WaAvatar shape="square" label="Square avatar" />
-    <WaAvatar shape="rounded" label="Rounded avatar" />
-    <WaAvatar shape="circle" label="Circle avatar" />
+    <SlAvatar shape="square" label="Square avatar" />
+    <SlAvatar shape="rounded" label="Rounded avatar" />
+    <SlAvatar shape="circle" label="Circle avatar" />
   </>
 );
 ```
@@ -134,71 +134,71 @@ You can group avatars with a few lines of CSS.
 
 ```html:preview
 <div class="avatar-group">
-  <wa-avatar
+  <sl-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"
-  ></wa-avatar>
+  ></sl-avatar>
 
-  <wa-avatar
+  <sl-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"
-  ></wa-avatar>
+  ></sl-avatar>
 
-  <wa-avatar
+  <sl-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"
-  ></wa-avatar>
+  ></sl-avatar>
 
-  <wa-avatar
+  <sl-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"
-  ></wa-avatar>
+  ></sl-avatar>
 </div>
 
 <style>
-  .avatar-group wa-avatar:not(:first-of-type) {
-    margin-left: calc(-1 * var(--wa-space-m));
+  .avatar-group sl-avatar:not(:first-of-type) {
+    margin-left: -1rem;
   }
 
-  .avatar-group wa-avatar::part(base) {
-    border: solid 2px var(--wa-color-surface-default);
+  .avatar-group sl-avatar::part(base) {
+    border: solid 2px var(--sl-color-neutral-0);
   }
 </style>
 ```
 
 ```jsx:react
-import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const css = `
-  .avatar-group wa-avatar:not(:first-of-type) {
-    margin-left: calc(-1 * var(--wa-space-m));
+  .avatar-group sl-avatar:not(:first-of-type) {
+    margin-left: -1rem;
   }
 
-  .avatar-group wa-avatar::part(base) {
-    border: solid 2px var(--wa-color-surface-default);
+  .avatar-group sl-avatar::part(base) {
+    border: solid 2px var(--sl-color-neutral-0);
   }
 `;
 
 const App = () => (
   <>
     <div className="avatar-group">
-      <WaAvatar
+      <SlAvatar
         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"
       />
 
-      <WaAvatar
+      <SlAvatar
         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"
       />
 
-      <WaAvatar
+      <SlAvatar
         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"
       />
 
-      <WaAvatar
+      <SlAvatar
         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"
       />

docs/pages/components/badge.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-badge>Badge</wa-badge>
+<sl-badge>Badge</sl-badge>
 ```
 
 ```jsx:react
-import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
 
-const App = () => <WaBadge>Badge</WaBadge>;
+const App = () => <SlBadge>Badge</SlBadge>;
 ```
 
 ## Examples
@@ -22,23 +22,23 @@ const App = () => <WaBadge>Badge</WaBadge>;
 Set the `variant` attribute to change the badge's variant.
 
 ```html:preview
-<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>
+<sl-badge variant="primary">Primary</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>
 ```
 
 ```jsx:react
-import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
 
 const App = () => (
   <>
-    <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>
+    <SlBadge variant="primary">Primary</SlBadge>
+    <SlBadge variant="success">Success</SlBadge>
+    <SlBadge variant="neutral">Neutral</SlBadge>
+    <SlBadge variant="warning">Warning</SlBadge>
+    <SlBadge variant="danger">Danger</SlBadge>
   </>
 );
 ```
@@ -48,33 +48,33 @@ const App = () => (
 Use the `pill` attribute to give badges rounded edges.
 
 ```html:preview
-<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>
+<sl-badge variant="primary" pill>Primary</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>
 ```
 
 ```jsx:react
-import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
 
 const App = () => (
   <>
-    <WaBadge variant="brand" pill>
-      Brand
-    </WaBadge>
-    <WaBadge variant="success" pill>
+    <SlBadge variant="primary" pill>
+      Primary
+    </SlBadge>
+    <SlBadge variant="success" pill>
       Success
-    </WaBadge>
-    <WaBadge variant="neutral" pill>
+    </SlBadge>
+    <SlBadge variant="neutral" pill>
       Neutral
-    </WaBadge>
-    <WaBadge variant="warning" pill>
+    </SlBadge>
+    <SlBadge variant="warning" pill>
       Warning
-    </WaBadge>
-    <WaBadge variant="danger" pill>
+    </SlBadge>
+    <SlBadge variant="danger" pill>
       Danger
-    </WaBadge>
+    </SlBadge>
   </>
 );
 ```
@@ -85,25 +85,25 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
 
 ```html:preview
 <div class="badge-pulse">
-  <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>
+  <sl-badge variant="primary" 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>
 </div>
 
 <style>
-  .badge-pulse wa-badge:not(:last-of-type) {
+  .badge-pulse sl-badge:not(:last-of-type) {
     margin-right: 1rem;
   }
 </style>
 ```
 
 ```jsx:react
-import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
 
 const css = `
-  .badge-pulse wa-badge:not(:last-of-type) {
+  .badge-pulse sl-badge:not(:last-of-type) {
     margin-right: 1rem;
   }
 `;
@@ -111,21 +111,21 @@ const css = `
 const App = () => (
   <>
     <div className="badge-pulse">
-      <WaBadge variant="brand" pill pulse>
+      <SlBadge variant="primary" pill pulse>
         1
-      </WaBadge>
-      <WaBadge variant="success" pill pulse>
+      </SlBadge>
+      <SlBadge variant="success" pill pulse>
         1
-      </WaBadge>
-      <WaBadge variant="neutral" pill pulse>
+      </SlBadge>
+      <SlBadge variant="neutral" pill pulse>
         1
-      </WaBadge>
-      <WaBadge variant="warning" pill pulse>
+      </SlBadge>
+      <SlBadge variant="warning" pill pulse>
         1
-      </WaBadge>
-      <WaBadge variant="danger" pill pulse>
+      </SlBadge>
+      <SlBadge variant="danger" pill pulse>
         1
-      </WaBadge>
+      </SlBadge>
     </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
-<wa-button>
+<sl-button>
   Requests
-  <wa-badge pill>30</wa-badge>
-</wa-button>
+  <sl-badge pill>30</sl-badge>
+</sl-button>
 
-<wa-button style="margin-inline-start: 1rem;">
+<sl-button style="margin-inline-start: 1rem;">
   Warnings
-  <wa-badge variant="warning" pill>8</wa-badge>
-</wa-button>
+  <sl-badge variant="warning" pill>8</sl-badge>
+</sl-button>
 
-<wa-button style="margin-inline-start: 1rem;">
+<sl-button style="margin-inline-start: 1rem;">
   Errors
-  <wa-badge variant="danger" pill>6</wa-badge>
-</wa-button>
+  <sl-badge variant="danger" pill>6</sl-badge>
+</sl-button>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => (
   <>
-    <WaButton>
+    <SlButton>
       Requests
-      <WaBadge pill>30</WaBadge>
-    </WaButton>
+      <SlBadge pill>30</SlBadge>
+    </SlButton>
 
-    <WaButton style={{ marginInlineStart: '1rem' }}>
+    <SlButton style={{ marginInlineStart: '1rem' }}>
       Warnings
-      <WaBadge variant="warning" pill>
+      <SlBadge variant="warning" pill>
         8
-      </WaBadge>
-    </WaButton>
+      </SlBadge>
+    </SlButton>
 
-    <WaButton style={{ marginInlineStart: '1rem' }}>
+    <SlButton style={{ marginInlineStart: '1rem' }}>
       Errors
-      <WaBadge variant="danger" pill>
+      <SlBadge variant="danger" pill>
         6
-      </WaBadge>
-    </WaButton>
+      </SlBadge>
+    </SlButton>
   </>
 );
 ```
@@ -191,40 +191,44 @@ const App = () => (
 When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
 
 ```html:preview
-<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>
+<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>
 ```
 
 {% raw %}
 
 ```jsx:react
-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';
+import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
+import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label';
 
 const App = () => (
-  <WaMenu
-    style={{ maxWidth: '240px' }}
+  <SlMenu
+    style={{
+      maxWidth: '240px',
+      border: 'solid 1px var(--sl-panel-border-color)',
+      borderRadius: 'var(--sl-border-radius-medium)'
+    }}
   >
-    <WaMenuLabel>Messages</WaMenuLabel>
-    <WaMenuItem>
+    <SlMenuLabel>Messages</SlMenuLabel>
+    <SlMenuItem>
       Comments
-      <WaBadge slot="suffix" variant="neutral" pill>
+      <SlBadge slot="suffix" variant="neutral" pill>
         4
-      </WaBadge>
-    </WaMenuItem>
-    <WaMenuItem>
+      </SlBadge>
+    </SlMenuItem>
+    <SlMenuItem>
       Replies
-      <WaBadge slot="suffix" variant="neutral" pill>
+      <SlBadge slot="suffix" variant="neutral" pill>
         12
-      </WaBadge>
-    </WaMenuItem>
-  </WaMenu>
+      </SlBadge>
+    </SlMenuItem>
+  </SlMenu>
 );
 ```
 

docs/pages/components/breadcrumb-item.md

@@ -6,30 +6,30 @@ layout: component
 ---
 
 ```html:preview
-<wa-breadcrumb>
-  <wa-breadcrumb-item>
-    <wa-icon slot="prefix" name="house"></wa-icon>
+<sl-breadcrumb>
+  <sl-breadcrumb-item>
+    <sl-icon slot="prefix" name="house"></sl-icon>
     Home
-  </wa-breadcrumb-item>
-  <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Shirts</wa-breadcrumb-item>
-</wa-breadcrumb>
+  </sl-breadcrumb-item>
+  <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Shirts</sl-breadcrumb-item>
+</sl-breadcrumb>
 ```
 
 ```jsx:react
-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';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem>
-      <WaIcon slot="prefix" name="house"></WaIcon>
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>
+      <SlIcon slot="prefix" name="house"></SlIcon>
       Home
-    </WaBreadcrumbItem>
-    <WaBreadcrumbItem>Clothing</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Shirts</WaBreadcrumbItem>
-  </WaBreadcrumb>
+    </SlBreadcrumbItem>
+    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Shirts</SlBreadcrumbItem>
+  </SlBreadcrumb>
 );
 ```
 

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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
 
 const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem>Catalog</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Clothing</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Women's</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Shirts &amp; Tops</WaBreadcrumbItem>
-  </WaBreadcrumb>
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>Catalog</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Women's</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Shirts &amp; Tops</SlBreadcrumbItem>
+  </SlBreadcrumb>
 );
 ```
 
@@ -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
-<wa-breadcrumb>
-  <wa-breadcrumb-item href="https://example.com/home">Homepage</wa-breadcrumb-item>
+<sl-breadcrumb>
+  <sl-breadcrumb-item href="https://example.com/home">Homepage</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">Our Services</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">Digital Media</sl-breadcrumb-item>
 
-  <wa-breadcrumb-item href="https://example.com/home/services/digital/web-design">Web Design</wa-breadcrumb-item>
-</wa-breadcrumb>
+  <sl-breadcrumb-item href="https://example.com/home/services/digital/web-design">Web Design</sl-breadcrumb-item>
+</sl-breadcrumb>
 ```
 
 ```jsx:react
-import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
 
 const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem href="https://example.com/home">Homepage</WaBreadcrumbItem>
+  <SlBreadcrumb>
+    <SlBreadcrumbItem href="https://example.com/home">Homepage</SlBreadcrumbItem>
 
-    <WaBreadcrumbItem href="https://example.com/home/services">Our Services</WaBreadcrumbItem>
+    <SlBreadcrumbItem href="https://example.com/home/services">Our Services</SlBreadcrumbItem>
 
-    <WaBreadcrumbItem href="https://example.com/home/services/digital">Digital Media</WaBreadcrumbItem>
+    <SlBreadcrumbItem href="https://example.com/home/services/digital">Digital Media</SlBreadcrumbItem>
 
-    <WaBreadcrumbItem href="https://example.com/home/services/digital/web-design">Web Design</WaBreadcrumbItem>
-  </WaBreadcrumb>
+    <SlBreadcrumbItem href="https://example.com/home/services/digital/web-design">Web Design</SlBreadcrumbItem>
+  </SlBreadcrumb>
 );
 ```
 
@@ -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
-<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>
+<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>
 
 <br />
 
-<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>
+<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>
 
 <br />
 
-<wa-breadcrumb>
+<sl-breadcrumb>
   <span slot="separator">/</span>
-  <wa-breadcrumb-item>First</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
-</wa-breadcrumb>
+  <sl-breadcrumb-item>First</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Third</sl-breadcrumb-item>
+</sl-breadcrumb>
 ```
 
 ```jsx:react
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
 
 const App = () => (
   <>
-    <WaBreadcrumb>
-      <wa-icon name="dot" slot="separator" />
-      <WaBreadcrumbItem>First</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Second</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Third</WaBreadcrumbItem>
-    </WaBreadcrumb>
+    <SlBreadcrumb>
+      <sl-icon name="dot" slot="separator" />
+      <SlBreadcrumbItem>First</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Third</SlBreadcrumbItem>
+    </SlBreadcrumb>
 
     <br />
 
-    <WaBreadcrumb>
-      <wa-icon name="arrow-right" slot="separator" />
-      <WaBreadcrumbItem>First</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Second</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Third</WaBreadcrumbItem>
-    </WaBreadcrumb>
+    <SlBreadcrumb>
+      <sl-icon name="arrow-right" slot="separator" />
+      <SlBreadcrumbItem>First</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Third</SlBreadcrumbItem>
+    </SlBreadcrumb>
 
     <br />
 
-    <WaBreadcrumb>
+    <SlBreadcrumb>
       <span slot="separator">/</span>
-      <WaBreadcrumbItem>First</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Second</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Third</WaBreadcrumbItem>
-    </WaBreadcrumb>
+      <SlBreadcrumbItem>First</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Third</SlBreadcrumbItem>
+    </SlBreadcrumb>
   </>
 );
 ```
@@ -138,30 +138,30 @@ const App = () => (
 Use the `prefix` slot to add content before any breadcrumb item.
 
 ```html:preview
-<wa-breadcrumb>
-  <wa-breadcrumb-item>
-    <wa-icon slot="prefix" name="house"></wa-icon>
+<sl-breadcrumb>
+  <sl-breadcrumb-item>
+    <sl-icon slot="prefix" name="house"></sl-icon>
     Home
-  </wa-breadcrumb-item>
-  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
-</wa-breadcrumb>
+  </sl-breadcrumb-item>
+  <sl-breadcrumb-item>Articles</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Traveling</sl-breadcrumb-item>
+</sl-breadcrumb>
 ```
 
 ```jsx:react
-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';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem>
-      <WaIcon slot="prefix" name="house" />
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>
+      <SlIcon slot="prefix" name="house" />
       Home
-    </WaBreadcrumbItem>
-    <WaBreadcrumbItem>Articles</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Traveling</WaBreadcrumbItem>
-  </WaBreadcrumb>
+    </SlBreadcrumbItem>
+    <SlBreadcrumbItem>Articles</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Traveling</SlBreadcrumbItem>
+  </SlBreadcrumb>
 );
 ```
 
@@ -170,30 +170,30 @@ const App = () => (
 Use the `suffix` slot to add content after any breadcrumb item.
 
 ```html:preview
-<wa-breadcrumb>
-  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
-  <wa-breadcrumb-item>
+<sl-breadcrumb>
+  <sl-breadcrumb-item>Documents</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Policies</sl-breadcrumb-item>
+  <sl-breadcrumb-item>
     Security
-    <wa-icon slot="suffix" name="shield-lock"></wa-icon>
-  </wa-breadcrumb-item>
-</wa-breadcrumb>
+    <sl-icon slot="suffix" name="shield-lock"></sl-icon>
+  </sl-breadcrumb-item>
+</sl-breadcrumb>
 ```
 
 ```jsx:react
-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';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem>Documents</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Policies</WaBreadcrumbItem>
-    <WaBreadcrumbItem>
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>Documents</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Policies</SlBreadcrumbItem>
+    <SlBreadcrumbItem>
       Security
-      <WaIcon slot="suffix" name="shield-lock"></WaIcon>
-    </WaBreadcrumbItem>
-  </WaBreadcrumb>
+      <SlIcon slot="suffix" name="shield-lock"></SlIcon>
+    </SlBreadcrumbItem>
+  </SlBreadcrumb>
 );
 ```
 
@@ -202,57 +202,57 @@ const App = () => (
 Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
 
 ```html:preview
-<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>
+<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>
     Web Design
-    <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>
+    <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>
 ```
 
 ```jsx:react
 import {
-  WaBreadcrumb,
-  WaBreadcrumbItem,
-  WaButton,
-  WaDropdown,
-  WaIcon,
-  WaMenu,
-  WaMenuItem
+  SlBreadcrumb,
+  SlBreadcrumbItem,
+  SlButton,
+  SlDropdown,
+  SlIcon,
+  SlMenu,
+  SlMenuItem
 } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem>Homepage</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Our Services</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Digital Media</WaBreadcrumbItem>
-    <WaBreadcrumbItem>
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
+    <SlBreadcrumbItem>
       Web Design
-      <WaDropdown slot="suffix">
-        <WaButton slot="trigger" size="small" circle>
-          <WaIcon label="More options" name="three-dots"></WaIcon>
-        </WaButton>
-        <WaMenu>
-          <WaMenuItem type="checkbox" checked>
+      <SlDropdown slot="suffix">
+        <SlButton slot="trigger" size="small" circle>
+          <SlIcon label="More options" name="three-dots"></SlIcon>
+        </SlButton>
+        <SlMenu>
+          <SlMenuItem type="checkbox" checked>
             Web Design
-          </WaMenuItem>
-          <WaMenuItem type="checkbox">Web Development</WaMenuItem>
-          <WaMenuItem type="checkbox">Marketing</WaMenuItem>
-        </WaMenu>
-      </WaDropdown>
-    </WaBreadcrumbItem>
-  </WaBreadcrumb>
+          </SlMenuItem>
+          <SlMenuItem type="checkbox">Web Development</SlMenuItem>
+          <SlMenuItem type="checkbox">Marketing</SlMenuItem>
+        </SlMenu>
+      </SlDropdown>
+    </SlBreadcrumbItem>
+  </SlBreadcrumb>
 );
 ```

docs/pages/components/button-group.md

@@ -6,23 +6,23 @@ layout: component
 ---
 
 ```html:preview
-<wa-button-group label="Alignment">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
-</wa-button-group>
+<sl-button-group label="Alignment">
+  <sl-button>Left</sl-button>
+  <sl-button>Center</sl-button>
+  <sl-button>Right</sl-button>
+</sl-button-group>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
 
 const App = () => (
-  <WaButtonGroup label="Alignment">
-    <WaButton>Left</WaButton>
-    <WaButton>Center</WaButton>
-    <WaButton>Right</WaButton>
-  </WaButtonGroup>
+  <SlButtonGroup label="Alignment">
+    <SlButton>Left</SlButton>
+    <SlButton>Center</SlButton>
+    <SlButton>Right</SlButton>
+  </SlButtonGroup>
 );
 ```
 
@@ -33,58 +33,58 @@ const App = () => (
 All button sizes are supported, but avoid mixing sizes within the same button group.
 
 ```html:preview
-<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>
+<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>
 
 <br /><br />
 
-<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>
+<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>
 
 <br /><br />
 
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
 
 const App = () => (
   <>
-    <WaButtonGroup label="Alignment">
-      <WaButton size="small">Left</WaButton>
-      <WaButton size="small">Center</WaButton>
-      <WaButton size="small">Right</WaButton>
-    </WaButtonGroup>
+    <SlButtonGroup label="Alignment">
+      <SlButton size="small">Left</SlButton>
+      <SlButton size="small">Center</SlButton>
+      <SlButton size="small">Right</SlButton>
+    </SlButtonGroup>
 
     <br />
     <br />
 
-    <WaButtonGroup label="Alignment">
-      <WaButton size="medium">Left</WaButton>
-      <WaButton size="medium">Center</WaButton>
-      <WaButton size="medium">Right</WaButton>
-    </WaButtonGroup>
+    <SlButtonGroup label="Alignment">
+      <SlButton size="medium">Left</SlButton>
+      <SlButton size="medium">Center</SlButton>
+      <SlButton size="medium">Right</SlButton>
+    </SlButtonGroup>
 
     <br />
     <br />
 
-    <WaButtonGroup label="Alignment">
-      <WaButton size="large">Left</WaButton>
-      <WaButton size="large">Center</WaButton>
-      <WaButton size="large">Right</WaButton>
-    </WaButtonGroup>
+    <SlButtonGroup label="Alignment">
+      <SlButton size="large">Left</SlButton>
+      <SlButton size="large">Center</SlButton>
+      <SlButton size="large">Right</SlButton>
+    </SlButtonGroup>
   </>
 );
 ```
@@ -94,92 +94,92 @@ const App = () => (
 Theme buttons are supported through the button's `variant` attribute.
 
 ```html:preview
-<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>
+<sl-button-group label="Alignment">
+  <sl-button variant="primary">Left</sl-button>
+  <sl-button variant="primary">Center</sl-button>
+  <sl-button variant="primary">Right</sl-button>
+</sl-button-group>
 
 <br /><br />
 
-<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>
+<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>
 
 <br /><br />
 
-<wa-button-group label="Alignment">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
-</wa-button-group>
+<sl-button-group label="Alignment">
+  <sl-button variant="neutral">Left</sl-button>
+  <sl-button variant="neutral">Center</sl-button>
+  <sl-button variant="neutral">Right</sl-button>
+</sl-button-group>
 
 <br /><br />
 
-<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>
+<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>
 
 <br /><br />
 
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
 
 const App = () => (
   <>
-    <WaButtonGroup label="Alignment">
-      <WaButton variant="brand">Left</WaButton>
-      <WaButton variant="brand">Center</WaButton>
-      <WaButton variant="brand">Right</WaButton>
-    </WaButtonGroup>
+    <SlButtonGroup label="Alignment">
+      <SlButton variant="primary">Left</SlButton>
+      <SlButton variant="primary">Center</SlButton>
+      <SlButton variant="primary">Right</SlButton>
+    </SlButtonGroup>
 
     <br />
     <br />
 
-    <WaButtonGroup label="Alignment">
-      <WaButton variant="success">Left</WaButton>
-      <WaButton variant="success">Center</WaButton>
-      <WaButton variant="success">Right</WaButton>
-    </WaButtonGroup>
+    <SlButtonGroup label="Alignment">
+      <SlButton variant="success">Left</SlButton>
+      <SlButton variant="success">Center</SlButton>
+      <SlButton variant="success">Right</SlButton>
+    </SlButtonGroup>
 
     <br />
     <br />
 
-    <WaButtonGroup label="Alignment">
-      <WaButton>Left</WaButton>
-      <WaButton>Center</WaButton>
-      <WaButton>Right</WaButton>
-    </WaButtonGroup>
+    <SlButtonGroup label="Alignment">
+      <SlButton variant="neutral">Left</SlButton>
+      <SlButton variant="neutral">Center</SlButton>
+      <SlButton variant="neutral">Right</SlButton>
+    </SlButtonGroup>
 
     <br />
     <br />
 
-    <WaButtonGroup label="Alignment">
-      <WaButton variant="warning">Left</WaButton>
-      <WaButton variant="warning">Center</WaButton>
-      <WaButton variant="warning">Right</WaButton>
-    </WaButtonGroup>
+    <SlButtonGroup label="Alignment">
+      <SlButton variant="warning">Left</SlButton>
+      <SlButton variant="warning">Center</SlButton>
+      <SlButton variant="warning">Right</SlButton>
+    </SlButtonGroup>
 
     <br />
     <br />
 
-    <WaButtonGroup label="Alignment">
-      <WaButton variant="danger">Left</WaButton>
-      <WaButton variant="danger">Center</WaButton>
-      <WaButton variant="danger">Right</WaButton>
-    </WaButtonGroup>
+    <SlButtonGroup label="Alignment">
+      <SlButton variant="danger">Left</SlButton>
+      <SlButton variant="danger">Center</SlButton>
+      <SlButton variant="danger">Right</SlButton>
+    </SlButtonGroup>
   </>
 );
 ```
@@ -189,121 +189,121 @@ const App = () => (
 Pill buttons are supported through the button's `pill` attribute.
 
 ```html:preview
-<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>
+<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>
 
 <br /><br />
 
-<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>
+<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>
 
 <br /><br />
 
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
 
 const App = () => (
   <>
-    <WaButtonGroup label="Alignment">
-      <WaButton size="small" pill>
+    <SlButtonGroup label="Alignment">
+      <SlButton size="small" pill>
         Left
-      </WaButton>
-      <WaButton size="small" pill>
+      </SlButton>
+      <SlButton size="small" pill>
         Center
-      </WaButton>
-      <WaButton size="small" pill>
+      </SlButton>
+      <SlButton size="small" pill>
         Right
-      </WaButton>
-    </WaButtonGroup>
+      </SlButton>
+    </SlButtonGroup>
 
     <br />
     <br />
 
-    <WaButtonGroup label="Alignment">
-      <WaButton size="medium" pill>
+    <SlButtonGroup label="Alignment">
+      <SlButton size="medium" pill>
         Left
-      </WaButton>
-      <WaButton size="medium" pill>
+      </SlButton>
+      <SlButton size="medium" pill>
         Center
-      </WaButton>
-      <WaButton size="medium" pill>
+      </SlButton>
+      <SlButton size="medium" pill>
         Right
-      </WaButton>
-    </WaButtonGroup>
+      </SlButton>
+    </SlButtonGroup>
 
     <br />
     <br />
 
-    <WaButtonGroup label="Alignment">
-      <WaButton size="large" pill>
+    <SlButtonGroup label="Alignment">
+      <SlButton size="large" pill>
         Left
-      </WaButton>
-      <WaButton size="large" pill>
+      </SlButton>
+      <SlButton size="large" pill>
         Center
-      </WaButton>
-      <WaButton size="large" pill>
+      </SlButton>
+      <SlButton size="large" pill>
         Right
-      </WaButton>
-    </WaButtonGroup>
+      </SlButton>
+    </SlButtonGroup>
   </>
 );
 ```
 
 ### Dropdowns in Button Groups
 
-Dropdowns can be placed inside button groups as long as the trigger is an `<wa-button>` element.
+Dropdowns can be placed inside button groups as long as the trigger is an `<sl-button>` element.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <WaButtonGroup label="Example Button Group">
-    <WaButton>Button</WaButton>
-    <WaButton>Button</WaButton>
-    <WaDropdown>
-      <WaButton slot="trigger" caret>
+  <SlButtonGroup label="Example Button Group">
+    <SlButton>Button</SlButton>
+    <SlButton>Button</SlButton>
+    <SlDropdown>
+      <SlButton slot="trigger" caret>
         Dropdown
-      </WaButton>
-      <WaMenu>
-        <WaMenuItem>Item 1</WaMenuItem>
-        <WaMenuItem>Item 2</WaMenuItem>
-        <WaMenuItem>Item 3</WaMenuItem>
-      </WaMenu>
-    </WaDropdown>
-  </WaButtonGroup>
+      </SlButton>
+      <SlMenu>
+        <SlMenuItem>Item 1</SlMenuItem>
+        <SlMenuItem>Item 2</SlMenuItem>
+        <SlMenuItem>Item 3</SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
+  </SlButtonGroup>
 );
 ```
 
@@ -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
-<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>
+<sl-button-group label="Example Button Group">
+  <sl-button variant="primary">Save</sl-button>
+  <sl-dropdown placement="bottom-end">
+    <sl-button slot="trigger" variant="primary" 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>
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <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>
+  <SlButtonGroup label="Example Button Group">
+    <SlButton variant="primary">Save</SlButton>
+    <SlDropdown placement="bottom-end">
+      <SlButton slot="trigger" variant="primary" caret></SlButton>
+      <SlMenu>
+        <SlMenuItem>Save</SlMenuItem>
+        <SlMenuItem>Save as&hellip;</SlMenuItem>
+        <SlMenuItem>Save all</SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
+  </SlButtonGroup>
 );
 ```
 
@@ -354,41 +354,41 @@ const App = () => (
 Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
 
 ```html:preview
-<wa-button-group label="Alignment">
-  <wa-tooltip content="I'm on the left">
-    <wa-button>Left</wa-button>
-  </wa-tooltip>
+<sl-button-group label="Alignment">
+  <sl-tooltip content="I'm on the left">
+    <sl-button>Left</sl-button>
+  </sl-tooltip>
 
-  <wa-tooltip content="I'm in the middle">
-    <wa-button>Center</wa-button>
-  </wa-tooltip>
+  <sl-tooltip content="I'm in the middle">
+    <sl-button>Center</sl-button>
+  </sl-tooltip>
 
-  <wa-tooltip content="I'm on the right">
-    <wa-button>Right</wa-button>
-  </wa-tooltip>
-</wa-button-group>
+  <sl-tooltip content="I'm on the right">
+    <sl-button>Right</sl-button>
+  </sl-tooltip>
+</sl-button-group>
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
 
 const App = () => (
   <>
-    <WaButtonGroup label="Alignment">
-      <WaTooltip content="I'm on the left">
-        <WaButton>Left</WaButton>
-      </WaTooltip>
+    <SlButtonGroup label="Alignment">
+      <SlTooltip content="I'm on the left">
+        <SlButton>Left</SlButton>
+      </SlTooltip>
 
-      <WaTooltip content="I'm in the middle">
-        <WaButton>Center</WaButton>
-      </WaTooltip>
+      <SlTooltip content="I'm in the middle">
+        <SlButton>Center</SlButton>
+      </SlTooltip>
 
-      <WaTooltip content="I'm on the right">
-        <WaButton>Right</WaButton>
-      </WaTooltip>
-    </WaButtonGroup>
+      <SlTooltip content="I'm on the right">
+        <SlButton>Right</SlButton>
+      </SlTooltip>
+    </SlButtonGroup>
   </>
 );
 ```
@@ -399,110 +399,110 @@ Create interactive toolbars with button groups.
 
 ```html:preview
 <div class="button-group-toolbar">
-  <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="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="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="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="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>
+  <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>
 </div>
 
 <style>
-  .button-group-toolbar wa-button-group:not(:last-of-type) {
-    margin-right: var(--wa-space-xs);
+  .button-group-toolbar sl-button-group:not(:last-of-type) {
+    margin-right: var(--sl-spacing-x-small);
   }
 </style>
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
 
 const css = `
-  .button-group-toolbar wa-button-group:not(:last-of-type) {
-    margin-right: var(--wa-space-xs);
+  .button-group-toolbar sl-button-group:not(:last-of-type) {
+    margin-right: var(--sl-spacing-x-small);
   }
 `;
 
 const App = () => (
   <>
     <div className="button-group-toolbar">
-      <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="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="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="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="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>
+      <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>
     </div>
 
     <style>{css}</style>

docs/pages/components/button.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-button>Button</wa-button>
+<sl-button>Button</sl-button>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
-const App = () => <WaButton>Button</WaButton>;
+const App = () => <SlButton>Button</SlButton>;
 ```
 
 ## Examples
@@ -22,23 +22,25 @@ const App = () => <WaButton>Button</WaButton>;
 Use the `variant` attribute to set the button's variant.
 
 ```html:preview
-<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-button variant="default">Default</sl-button>
+<sl-button variant="primary">Primary</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>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => (
   <>
-    <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>
+    <SlButton variant="default">Default</SlButton>
+    <SlButton variant="primary">Primary</SlButton>
+    <SlButton variant="success">Success</SlButton>
+    <SlButton variant="neutral">Neutral</SlButton>
+    <SlButton variant="warning">Warning</SlButton>
+    <SlButton variant="danger">Danger</SlButton>
   </>
 );
 ```
@@ -48,19 +50,19 @@ const App = () => (
 Use the `size` attribute to change a button's size.
 
 ```html:preview
-<wa-button size="small">Small</wa-button>
-<wa-button size="medium">Medium</wa-button>
-<wa-button size="large">Large</wa-button>
+<sl-button size="small">Small</sl-button>
+<sl-button size="medium">Medium</sl-button>
+<sl-button size="large">Large</sl-button>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => (
   <>
-    <WaButton size="small">Small</WaButton>
-    <WaButton size="medium">Medium</WaButton>
-    <WaButton size="large">Large</WaButton>
+    <SlButton size="small">Small</SlButton>
+    <SlButton size="medium">Medium</SlButton>
+    <SlButton size="large">Large</SlButton>
   </>
 );
 ```
@@ -70,33 +72,37 @@ const App = () => (
 Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
 
 ```html:preview
-<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>
+<sl-button variant="default" outline>Default</sl-button>
+<sl-button variant="primary" outline>Primary</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>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => (
   <>
-    <WaButton variant="brand" outline>
-      Brand
-    </WaButton>
-    <WaButton variant="success" outline>
+    <SlButton variant="default" outline>
+      Default
+    </SlButton>
+    <SlButton variant="primary" outline>
+      Primary
+    </SlButton>
+    <SlButton variant="success" outline>
       Success
-    </WaButton>
-    <WaButton variant="neutral" outline>
+    </SlButton>
+    <SlButton variant="neutral" outline>
       Neutral
-    </WaButton>
-    <WaButton variant="warning" outline>
+    </SlButton>
+    <SlButton variant="warning" outline>
       Warning
-    </WaButton>
-    <WaButton variant="danger" outline>
+    </SlButton>
+    <SlButton variant="danger" outline>
       Danger
-    </WaButton>
+    </SlButton>
   </>
 );
 ```
@@ -106,25 +112,62 @@ const App = () => (
 Use the `pill` attribute to give buttons rounded edges.
 
 ```html:preview
-<wa-button size="small" pill>Small</wa-button>
-<wa-button size="medium" pill>Medium</wa-button>
-<wa-button size="large" pill>Large</wa-button>
+<sl-button size="small" pill>Small</sl-button>
+<sl-button size="medium" pill>Medium</sl-button>
+<sl-button size="large" pill>Large</sl-button>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => (
   <>
-    <WaButton size="small" pill>
+    <SlButton size="small" pill>
       Small
-    </WaButton>
-    <WaButton size="medium" pill>
+    </SlButton>
+    <SlButton size="medium" pill>
       Medium
-    </WaButton>
-    <WaButton size="large" pill>
+    </SlButton>
+    <SlButton size="large" pill>
       Large
-    </WaButton>
+    </SlButton>
+  </>
+);
+```
+
+### Circle Buttons
+
+Use the `circle` attribute to create circular icon buttons. When this attribute is set, the button expects a single `<sl-icon>` in the default slot.
+
+```html:preview
+<sl-button variant="default" size="small" circle>
+  <sl-icon name="gear" label="Settings"></sl-icon>
+</sl-button>
+
+<sl-button variant="default" size="medium" circle>
+  <sl-icon name="gear" label="Settings"></sl-icon>
+</sl-button>
+
+<sl-button variant="default" size="large" circle>
+  <sl-icon name="gear" label="Settings"></sl-icon>
+</sl-button>
+```
+
+```jsx:react
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+
+const App = () => (
+  <>
+    <SlButton variant="default" size="small" circle>
+      <SlIcon name="gear" />
+    </SlButton>
+    <SlButton variant="default" size="medium" circle>
+      <SlIcon name="gear" />
+    </SlButton>
+    <SlButton variant="default" size="large" circle>
+      <SlIcon name="gear" />
+    </SlButton>
   </>
 );
 ```
@@ -134,25 +177,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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => (
   <>
-    <WaButton variant="text" size="small">
+    <SlButton variant="text" size="small">
       Text
-    </WaButton>
-    <WaButton variant="text" size="medium">
+    </SlButton>
+    <SlButton variant="text" size="medium">
       Text
-    </WaButton>
-    <WaButton variant="text" size="large">
+    </SlButton>
+    <SlButton variant="text" size="large">
       Text
-    </WaButton>
+    </SlButton>
   </>
 );
 ```
@@ -162,27 +205,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
-<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/logo.svg" download="shoelace.svg">Download</wa-button>
-<wa-button href="https://example.com/" disabled>Disabled</wa-button>
+<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>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => (
   <>
-    <WaButton href="https://example.com/">Link</WaButton>
-    <WaButton href="https://example.com/" target="_blank">
+    <SlButton href="https://example.com/">Link</SlButton>
+    <SlButton href="https://example.com/" target="_blank">
       New Window
-    </WaButton>
-    <WaButton href="/assets/images/logo.svg" download="shoelace.svg">
+    </SlButton>
+    <SlButton href="/assets/images/wordmark.svg" download="shoelace.svg">
       Download
-    </WaButton>
-    <WaButton href="https://example.com/" disabled>
+    </SlButton>
+    <SlButton href="https://example.com/" disabled>
       Disabled
-    </WaButton>
+    </SlButton>
   </>
 );
 ```
@@ -196,27 +239,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
-<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>
+<sl-button variant="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
+<sl-button variant="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
+<sl-button variant="default" size="large" style="width: 100%;">Large</sl-button>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => (
   <>
-    <WaButton size="small" style={{ width: '100%', marginBottom: '1rem' }}>
+    <SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>
       Small
-    </WaButton>
-    <WaButton size="medium" style={{ width: '100%', marginBottom: '1rem' }}>
+    </SlButton>
+    <SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>
       Medium
-    </WaButton>
-    <WaButton size="large" style={{ width: '100%' }}>
+    </SlButton>
+    <SlButton variant="default" size="large" style={{ width: '100%' }}>
       Large
-    </WaButton>
+    </SlButton>
   </>
 );
 ```
@@ -228,118 +271,118 @@ const App = () => (
 Use the `prefix` and `suffix` slots to add icons.
 
 ```html:preview
-<wa-button size="small">
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+<sl-button variant="default" size="small">
+  <sl-icon slot="prefix" name="gear"></sl-icon>
   Settings
-</wa-button>
+</sl-button>
 
-<wa-button size="small">
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+<sl-button variant="default" size="small">
+  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
   Refresh
-</wa-button>
+</sl-button>
 
-<wa-button size="small">
-  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
-  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
+<sl-button variant="default" size="small">
+  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
+  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
   Open
-</wa-button>
+</sl-button>
 
 <br /><br />
 
-<wa-button>
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+<sl-button variant="default">
+  <sl-icon slot="prefix" name="gear"></sl-icon>
   Settings
-</wa-button>
+</sl-button>
 
-<wa-button>
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+<sl-button variant="default">
+  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
   Refresh
-</wa-button>
+</sl-button>
 
-<wa-button>
-  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
-  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
+<sl-button variant="default">
+  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
+  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
   Open
-</wa-button>
+</sl-button>
 
 <br /><br />
 
-<wa-button size="large">
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+<sl-button variant="default" size="large">
+  <sl-icon slot="prefix" name="gear"></sl-icon>
   Settings
-</wa-button>
+</sl-button>
 
-<wa-button size="large">
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+<sl-button variant="default" size="large">
+  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
   Refresh
-</wa-button>
+</sl-button>
 
-<wa-button size="large">
-  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
-  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
+<sl-button variant="default" size="large">
+  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
+  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
   Open
-</wa-button>
+</sl-button>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
   <>
-    <WaButton size="small">
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+    <SlButton variant="default" size="small">
+      <SlIcon slot="prefix" name="gear"></SlIcon>
       Settings
-    </WaButton>
+    </SlButton>
 
-    <WaButton size="small">
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+    <SlButton variant="default" size="small">
+      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
       Refresh
-    </WaButton>
+    </SlButton>
 
-    <WaButton size="small">
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+    <SlButton variant="default" size="small">
+      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
+      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
       Open
-    </WaButton>
+    </SlButton>
 
     <br />
     <br />
 
-    <WaButton>
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+    <SlButton variant="default">
+      <SlIcon slot="prefix" name="gear"></SlIcon>
       Settings
-    </WaButton>
+    </SlButton>
 
-    <WaButton>
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+    <SlButton variant="default">
+      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
       Refresh
-    </WaButton>
+    </SlButton>
 
-    <WaButton>
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+    <SlButton variant="default">
+      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
+      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
       Open
-    </WaButton>
+    </SlButton>
 
     <br />
     <br />
 
-    <WaButton size="large">
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+    <SlButton variant="default" size="large">
+      <SlIcon slot="prefix" name="gear"></SlIcon>
       Settings
-    </WaButton>
+    </SlButton>
 
-    <WaButton size="large">
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+    <SlButton variant="default" size="large">
+      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
       Refresh
-    </WaButton>
+    </SlButton>
 
-    <WaButton size="large">
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+    <SlButton variant="default" size="large">
+      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
+      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
       Open
-    </WaButton>
+    </SlButton>
   </>
 );
 ```
@@ -349,25 +392,25 @@ const App = () => (
 Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
 
 ```html:preview
-<wa-button size="small" caret>Small</wa-button>
-<wa-button size="medium" caret>Medium</wa-button>
-<wa-button size="large" caret>Large</wa-button>
+<sl-button size="small" caret>Small</sl-button>
+<sl-button size="medium" caret>Medium</sl-button>
+<sl-button size="large" caret>Large</sl-button>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => (
   <>
-    <WaButton size="small" caret>
+    <SlButton size="small" caret>
       Small
-    </WaButton>
-    <WaButton size="medium" caret>
+    </SlButton>
+    <SlButton size="medium" caret>
       Medium
-    </WaButton>
-    <WaButton size="large" caret>
+    </SlButton>
+    <SlButton size="large" caret>
       Large
-    </WaButton>
+    </SlButton>
   </>
 );
 ```
@@ -377,33 +420,37 @@ 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
-<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>
+<sl-button variant="default" loading>Default</sl-button>
+<sl-button variant="primary" loading>Primary</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>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => (
   <>
-    <WaButton variant="brand" loading>
-      Brand
-    </WaButton>
-    <WaButton variant="success" loading>
+    <SlButton variant="default" loading>
+      Default
+    </SlButton>
+    <SlButton variant="primary" loading>
+      Primary
+    </SlButton>
+    <SlButton variant="success" loading>
       Success
-    </WaButton>
-    <WaButton variant="neutral" loading>
+    </SlButton>
+    <SlButton variant="neutral" loading>
       Neutral
-    </WaButton>
-    <WaButton variant="warning" loading>
+    </SlButton>
+    <SlButton variant="warning" loading>
       Warning
-    </WaButton>
-    <WaButton variant="danger" loading>
+    </SlButton>
+    <SlButton variant="danger" loading>
       Danger
-    </WaButton>
+    </SlButton>
   </>
 );
 ```
@@ -413,52 +460,60 @@ const App = () => (
 Use the `disabled` attribute to disable a button.
 
 ```html:preview
-<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>
+<sl-button variant="default" disabled>Default</sl-button>
+<sl-button variant="primary" disabled>Primary</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>
 ```
 
 ```jsx:react
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
 
 const App = () => (
   <>
-    <WaButton variant="brand" disabled>
-      Brand
-    </WaButton>
+    <SlButton variant="default" disabled>
+      Default
+    </SlButton>
 
-    <WaButton variant="success" disabled>
+    <SlButton variant="primary" disabled>
+      Primary
+    </SlButton>
+
+    <SlButton variant="success" disabled>
       Success
-    </WaButton>
+    </SlButton>
 
-    <WaButton variant="neutral" disabled>
+    <SlButton variant="neutral" disabled>
       Neutral
-    </WaButton>
+    </SlButton>
 
-    <WaButton variant="warning" disabled>
+    <SlButton variant="warning" disabled>
       Warning
-    </WaButton>
+    </SlButton>
 
-    <WaButton variant="danger" disabled>
+    <SlButton variant="danger" disabled>
       Danger
-    </WaButton>
+    </SlButton>
   </>
 );
 ```
 
 ### 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. `wa-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. `sl-button[variant="primary"]`).
 
 ```html:preview
-<wa-button class="pink">Pink Button</wa-button>
+<sl-button class="pink">Pink Button</sl-button>
 
 <style>
-  wa-button.pink::part(base) {
-    border-radius: 6px;
-    border: solid 2px;
+  sl-button.pink::part(base) {
+    /* Set design tokens for height and border width */
+    --sl-input-height-medium: 48px;
+    --sl-input-border-width: 4px;
+
+    border-radius: 0;
     background-color: #ff1493;
     border-top-color: #ff7ac1;
     border-left-color: #ff7ac1;
@@ -467,22 +522,22 @@ This example demonstrates how to style buttons using a custom class. This is the
     color: white;
     font-size: 1.125rem;
     box-shadow: 0 2px 10px #0002;
-    transition: var(--wa-transition-normal) all;
+    transition: var(--sl-transition-medium) transform ease, var(--sl-transition-medium) border ease;
   }
 
-  wa-button.pink::part(base):hover {
-    transform: scale(1.05);
+  sl-button.pink::part(base):hover {
+    transform: scale(1.05) rotate(-1deg);
   }
 
-  wa-button.pink::part(base):active {
+  sl-button.pink::part(base):active {
     border-top-color: #ad005c;
     border-right-color: #ff7ac1;
     border-bottom-color: #ff7ac1;
     border-left-color: #ad005c;
-    transform: translateY(1px);
+    transform: scale(1.05) rotate(-1deg) translateY(2px);
   }
 
-  wa-button.pink::part(base):focus-visible {
+  sl-button.pink::part(base):focus-visible {
     outline: dashed 2px deeppink;
     outline-offset: 4px;
   }

docs/pages/components/card.md

@@ -6,7 +6,7 @@ layout: component
 ---
 
 ```html:preview
-<wa-card class="card-overview">
+<sl-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">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
+    <sl-button variant="primary" pill>More Info</sl-button>
+    <sl-rating></sl-rating>
   </div>
-</wa-card>
+</sl-card>
 
 <style>
   .card-overview {
@@ -29,7 +29,7 @@ layout: component
   }
 
   .card-overview small {
-    color: var(--wa-color-text-quiet);
+    color: var(--sl-color-neutral-500);
   }
 
   .card-overview [slot='footer'] {
@@ -41,9 +41,9 @@ layout: component
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
 const css = `
   .card-overview {
@@ -51,7 +51,7 @@ const css = `
   }
 
   .card-overview small {
-    color: var(--wa-color-text-quiet);
+    color: var(--sl-color-neutral-500);
   }
 
   .card-overview [slot="footer"] {
@@ -63,7 +63,7 @@ const css = `
 
 const App = () => (
   <>
-    <WaCard className="card-overview">
+    <SlCard 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">
-        <WaButton variant="brand" pill>
+        <SlButton variant="primary" pill>
           More Info
-        </WaButton>
-        <WaRating></WaRating>
+        </SlButton>
+        <SlRating></SlRating>
       </div>
-    </WaCard>
+    </SlCard>
 
     <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
-<wa-card class="card-basic">
+<sl-card class="card-basic">
   This is just a basic card. No image, no header, and no footer. Just your content.
-</wa-card>
+</sl-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 WaCard from '@shoelace-style/shoelace/dist/react/card';
+import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
 
 const css = `
   .card-basic {
@@ -116,9 +116,9 @@ const css = `
 
 const App = () => (
   <>
-    <WaCard className="card-basic">
+    <SlCard className="card-basic">
       This is just a basic card. No image, no header, and no footer. Just your content.
-    </WaCard>
+    </SlCard>
 
     <style>{css}</style>
   </>
@@ -130,14 +130,14 @@ const App = () => (
 Headers can be used to display titles and more.
 
 ```html:preview
-<wa-card class="card-header">
+<sl-card class="card-header">
   <div slot="header">
     Header Title
-    <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+    <sl-icon-button name="gear" label="Settings"></sl-icon-button>
   </div>
 
   This card has a header. You can put all sorts of things in it!
-</wa-card>
+</sl-card>
 
 <style>
   .card-header {
@@ -154,15 +154,15 @@ Headers can be used to display titles and more.
     margin: 0;
   }
 
-  .card-header wa-icon-button {
-    font-size: var(--wa-font-size-m);
+  .card-header sl-icon-button {
+    font-size: var(--sl-font-size-medium);
   }
 </style>
 ```
 
 ```jsx:react
-import WaCard from '@shoelace-style/shoelace/dist/react/card';
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
 
 const css = `
   .card-header {
@@ -179,20 +179,20 @@ const css = `
     margin: 0;
   }
 
-  .card-header wa-icon-button {
-    font-size: var(--wa-font-size-m);
+  .card-header sl-icon-button {
+    font-size: var(--sl-font-size-medium);
   }
 `;
 
 const App = () => (
   <>
-    <WaCard className="card-header">
+    <SlCard className="card-header">
       <div slot="header">
         Header Title
-        <WaIconButton name="gear"></WaIconButton>
+        <SlIconButton name="gear"></SlIconButton>
       </div>
       This card has a header. You can put all sorts of things in it!
-    </WaCard>
+    </SlCard>
 
     <style>{css}</style>
   </>
@@ -204,14 +204,14 @@ const App = () => (
 Footers can be used to display actions, summaries, or other relevant content.
 
 ```html:preview
-<wa-card class="card-footer">
+<sl-card class="card-footer">
   This card has a footer. You can put all sorts of things in it!
 
   <div slot="footer">
-    <wa-rating></wa-rating>
-    <wa-button variant="brand">Preview</wa-button>
+    <sl-rating></sl-rating>
+    <sl-button variant="primary">Preview</sl-button>
   </div>
-</wa-card>
+</sl-card>
 
 <style>
   .card-footer {
@@ -227,9 +227,9 @@ Footers can be used to display actions, summaries, or other relevant content.
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
 const css = `
   .card-footer {
@@ -245,15 +245,15 @@ const css = `
 
 const App = () => (
   <>
-    <WaCard className="card-footer">
+    <SlCard className="card-footer">
       This card has a footer. You can put all sorts of things in it!
       <div slot="footer">
-        <WaRating></WaRating>
-        <WaButton slot="footer" variant="brand">
+        <SlRating></SlRating>
+        <SlButton slot="footer" variant="primary">
           Preview
-        </WaButton>
+        </SlButton>
       </div>
-    </WaCard>
+    </SlCard>
 
     <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
-<wa-card class="card-image">
+<sl-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.
-</wa-card>
+</sl-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 WaCard from '@shoelace-style/shoelace/dist/react/card';
+import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
 
 const css = `
   .card-image {
@@ -292,14 +292,14 @@ const css = `
 
 const App = () => (
   <>
-    <WaCard className="card-image">
+    <SlCard 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.
-    </WaCard>
+    </SlCard>
 
     <style>{css}</style>
   </>

docs/pages/components/carousel-item.md

@@ -6,77 +6,77 @@ layout: component
 ---
 
 ```html:preview
-<wa-carousel pagination>
-  <wa-carousel-item>
+<sl-carousel pagination>
+  <sl-carousel-item>
     <img
       alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
       src="/assets/examples/carousel/mountains.jpg"
     />
-  </wa-carousel-item>
-  <wa-carousel-item>
+  </sl-carousel-item>
+  <sl-carousel-item>
     <img
       alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
       src="/assets/examples/carousel/waterfall.jpg"
     />
-  </wa-carousel-item>
-  <wa-carousel-item>
+  </sl-carousel-item>
+  <sl-carousel-item>
     <img
       alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
       src="/assets/examples/carousel/sunset.jpg"
     />
-  </wa-carousel-item>
-  <wa-carousel-item>
+  </sl-carousel-item>
+  <sl-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"
     />
-  </wa-carousel-item>
-  <wa-carousel-item>
+  </sl-carousel-item>
+  <sl-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"
     />
-  </wa-carousel-item>
-</wa-carousel>
+  </sl-carousel-item>
+</sl-carousel>
 ```
 
 ```jsx:react
-import WaCarousel from '@shoelace-style/shoelace/dist/react/carousel';
-import WaCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
 
 const App = () => (
-  <WaCarousel pagination>
-    <WaCarouselItem>
+  <SlCarousel pagination>
+    <SlCarouselItem>
       <img
         alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
         src="/assets/examples/carousel/mountains.jpg"
       />
-    </WaCarouselItem>
-    <WaCarouselItem>
+    </SlCarouselItem>
+    <SlCarouselItem>
       <img
         alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
         src="/assets/examples/carousel/waterfall.jpg"
       />
-    </WaCarouselItem>
-    <WaCarouselItem>
+    </SlCarouselItem>
+    <SlCarouselItem>
       <img
         alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
         src="/assets/examples/carousel/sunset.jpg"
       />
-    </WaCarouselItem>
-    <WaCarouselItem>
+    </SlCarouselItem>
+    <SlCarouselItem>
       <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"
       />
-    </WaCarouselItem>
-    <WaCarouselItem>
+    </SlCarouselItem>
+    <SlCarouselItem>
       <img
         alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
         src="/assets/examples/carousel/valley.jpg"
       />
-    </WaCarouselItem>
-  </WaCarousel>
+    </SlCarouselItem>
+  </SlCarousel>
 );
 ```
 

docs/pages/components/checkbox.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-checkbox>Checkbox</wa-checkbox>
+<sl-checkbox>Checkbox</sl-checkbox>
 ```
 
 ```jsx:react
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
 
-const App = () => <WaCheckbox>Checkbox</WaCheckbox>;
+const App = () => <SlCheckbox>Checkbox</SlCheckbox>;
 ```
 
 :::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
-<wa-checkbox checked>Checked</wa-checkbox>
+<sl-checkbox checked>Checked</sl-checkbox>
 ```
 
 ```jsx:react
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
 
-const App = () => <WaCheckbox checked>Checked</WaCheckbox>;
+const App = () => <SlCheckbox checked>Checked</SlCheckbox>;
 ```
 
 ### Indeterminate
@@ -40,13 +40,13 @@ const App = () => <WaCheckbox checked>Checked</WaCheckbox>;
 Use the `indeterminate` attribute to make the checkbox indeterminate.
 
 ```html:preview
-<wa-checkbox indeterminate>Indeterminate</wa-checkbox>
+<sl-checkbox indeterminate>Indeterminate</sl-checkbox>
 ```
 
 ```jsx:react
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
 
-const App = () => <WaCheckbox indeterminate>Indeterminate</WaCheckbox>;
+const App = () => <SlCheckbox indeterminate>Indeterminate</SlCheckbox>;
 ```
 
 ### Disabled
@@ -54,13 +54,13 @@ const App = () => <WaCheckbox indeterminate>Indeterminate</WaCheckbox>;
 Use the `disabled` attribute to disable the checkbox.
 
 ```html:preview
-<wa-checkbox disabled>Disabled</wa-checkbox>
+<sl-checkbox disabled>Disabled</sl-checkbox>
 ```
 
 ```jsx:react
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
 
-const App = () => <WaCheckbox disabled>Disabled</WaCheckbox>;
+const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
 ```
 
 ### Sizes
@@ -68,23 +68,23 @@ const App = () => <WaCheckbox disabled>Disabled</WaCheckbox>;
 Use the `size` attribute to change a checkbox's size.
 
 ```html:preview
-<wa-checkbox size="small">Small</wa-checkbox>
+<sl-checkbox size="small">Small</sl-checkbox>
 <br />
-<wa-checkbox size="medium">Medium</wa-checkbox>
+<sl-checkbox size="medium">Medium</sl-checkbox>
 <br />
-<wa-checkbox size="large">Large</wa-checkbox>
+<sl-checkbox size="large">Large</sl-checkbox>
 ```
 
 ```jsx:react
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
 
 const App = () => (
   <>
-    <WaCheckbox size="small">Small</WaCheckbox>
+    <SlCheckbox size="small">Small</SlCheckbox>
     <br />
-    <WaCheckbox size="medium">Medium</WaCheckbox>
+    <SlCheckbox size="medium">Medium</SlCheckbox>
     <br />
-    <WaCheckbox size="large">Large</WaCheckbox>
+    <SlCheckbox size="large">Large</SlCheckbox>
   </>
 );
 ```
@@ -95,32 +95,30 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
 
 ```html:preview
 <form class="custom-validity">
-  <wa-checkbox>Check me</wa-checkbox>
+  <sl-checkbox>Check me</sl-checkbox>
   <br />
-  <wa-button type="submit" variant="brand" style="margin-top: 1rem;">Submit</wa-button>
+  <sl-button type="submit" variant="primary" style="margin-top: 1rem;">Submit</sl-button>
 </form>
 <script>
   const form = document.querySelector('.custom-validity');
-  const checkbox = form.querySelector('wa-checkbox');
+  const checkbox = form.querySelector('sl-checkbox');
   const errorMessage = `Don't forget to check me!`;
 
   // Set initial validity as soon as the element is defined
-  customElements.whenDefined('wa-checkbox').then(async () => {
+  customElements.whenDefined('sl-checkbox').then(async () => {
     await checkbox.updateComplete;
     checkbox.setCustomValidity(errorMessage);
   });
 
   // Update validity on change
-  checkbox.addEventListener('wa-change', () => {
+  checkbox.addEventListener('sl-change', () => {
     checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
   });
 
   // Handle submit
-  customElements.whenDefined('wa-checkbox').then(() => {
-    form.addEventListener('submit', event => {
-      event.preventDefault();
-      alert('All fields are valid!');
-    });
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    alert('All fields are valid!');
   });
 </script>
 ```
@@ -129,8 +127,8 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
 
 ```jsx:react
 import { useEffect, useRef } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
 
 const App = () => {
   const checkbox = useRef(null);
@@ -151,13 +149,13 @@ const App = () => {
 
   return (
     <form class="custom-validity" onSubmit={handleSubmit}>
-      <WaCheckbox ref={checkbox} onWaChange={handleChange}>
+      <SlCheckbox ref={checkbox} onSlChange={handleChange}>
         Check me
-      </WaCheckbox>
+      </SlCheckbox>
       <br />
-      <WaButton type="submit" variant="brand" style={{ marginTop: '1rem' }}>
+      <SlButton type="submit" variant="primary" style={{ marginTop: '1rem' }}>
         Submit
-      </WaButton>
+      </SlButton>
     </form>
   );
 };

docs/pages/components/color-picker.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-color-picker label="Select a color"></wa-color-picker>
+<sl-color-picker label="Select a color"></sl-color-picker>
 ```
 
 ```jsx:react
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
 
-const App = () => <WaColorPicker label="Select a color" />;
+const App = () => <SlColorPicker 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
-<wa-color-picker value="#4a90e2" label="Select a color"></wa-color-picker>
+<sl-color-picker value="#4a90e2" label="Select a color"></sl-color-picker>
 ```
 
 ```jsx:react
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
 
-const App = () => <WaColorPicker value="#4a90e2" label="Select a color" />;
+const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
 ```
 
 ### Opacity
@@ -40,13 +40,13 @@ const App = () => <WaColorPicker 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
-<wa-color-picker value="#f5a623ff" opacity label="Select a color"></wa-color-picker>
+<sl-color-picker value="#f5a623ff" opacity label="Select a color"></sl-color-picker>
 ```
 
 ```jsx:react
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
 
-const App = () => <WaColorPicker opacity label="Select a color" />;
+const App = () => <SlColorPicker 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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
 
 const App = () => (
   <>
-    <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%)" />
+    <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%)" />
   </>
 );
 ```
@@ -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
-<wa-color-picker
+<sl-color-picker
   label="Select a color"
   swatches="
     #d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
     #4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
   "
-></wa-color-picker>
+></sl-color-picker>
 ```
 
 ```jsx:react
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
 
 const App = () => (
-  <WaColorPicker
+  <SlColorPicker
     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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
 
 const App = () => (
   <>
-    <WaColorPicker size="small" label="Select a color" />
-    <WaColorPicker size="medium" label="Select a color" />
-    <WaColorPicker size="large" label="Select a color" />
+    <SlColorPicker size="small" label="Select a color" />
+    <SlColorPicker size="medium" label="Select a color" />
+    <SlColorPicker 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
-<wa-color-picker inline label="Select a color"></wa-color-picker>
+<sl-color-picker inline label="Select a color"></sl-color-picker>
 ```
 
 ```jsx:react
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
 
-const App = () => <WaColorPicker inline label="Select a color" />;
+const App = () => <SlColorPicker inline label="Select a color" />;
 ```

docs/pages/components/copy-button.md

@@ -6,14 +6,14 @@ layout: component
 ---
 
 ```html:preview
-<wa-copy-button value="Web Awesome rocks!"></wa-copy-button>
+<sl-copy-button value="Shoelace rocks!"></sl-copy-button>
 ```
 
 ```jsx:react
-import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
 
 const App = () => (
-  <WaCopyButton value="Web Awesome rocks!" />
+  <SlCopyButton value="Shoelace 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
-<wa-copy-button
+<sl-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!"
-></wa-copy-button>
+></sl-copy-button>
 ```
 
 ```jsx:react
-import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
 
 const App = () => (
-  <WaCopyButton
+  <SlCopyButton
     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 [`<wa-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 [`<sl-icon>`](/components/icon) or your own images.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
-import { WaIcon } from '@shoelace-style/shoelace/dist/react/icon';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
+import { SlIcon } from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
   <>
-    <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>
+    <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>
   </>
 );
 ```
@@ -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>
-<wa-copy-button from="my-phone"></wa-copy-button>
+<sl-copy-button from="my-phone"></sl-copy-button>
 
 <br><br>
 
 <!-- Copies the input's "value" property -->
-<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>
+<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>
 
 <br><br>
 
 <!-- Copies the link's "href" attribute -->
-<a id="my-link" href="https://shoelace.style/">Web Awesome Website</a>
-<wa-copy-button from="my-link[href]"></wa-copy-button>
+<a id="my-link" href="https://shoelace.style/">Shoelace Website</a>
+<sl-copy-button from="my-link[href]"></sl-copy-button>
 ```
 
 ```jsx:react
-import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
-import { WaInput } from '@shoelace-style/shoelace/dist/react/input';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
+import { SlInput } from '@shoelace-style/shoelace/dist/react/sl-input';
 
 const App = () => (
   <>
     {/* Copies the span's textContent */}
     <span id="my-phone">+1 (234) 456-7890</span>
-    <WaCopyButton from="my-phone" />
+    <SlCopyButton from="my-phone" />
 
     <br /><br />
 
     {/* Copies the input's "value" property */}
-    <WaInput id="my-input" type="text" />
-    <WaCopyButton from="my-input.value" />
+    <SlInput id="my-input" type="text" />
+    <SlCopyButton from="my-input.value" />
 
     <br /><br />
 
     {/* Copies the link's "href" attribute */}
-    <a id="my-link" href="https://shoelace.style/">Web Awesome Website</a>
-    <WaCopyButton from="my-link[href]" />
+    <a id="my-link" href="https://shoelace.style/">Shoelace Website</a>
+    <SlCopyButton 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 `wa-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 `sl-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
-<wa-copy-button from="i-do-not-exist"></wa-copy-button>
+<sl-copy-button from="i-do-not-exist"></sl-copy-button>
 ```
 
 ```jsx:react
-import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
 
 const App = () => (
-  <WaCopyButton from="i-do-not-exist" />
+  <SlCopyButton from="i-do-not-exist" />
 );
 ```
 
@@ -146,14 +146,14 @@ const App = () => (
 Copy buttons can be disabled by adding the `disabled` attribute.
 
 ```html:preview
-<wa-copy-button value="You can't copy me" disabled></wa-copy-button>
+<sl-copy-button value="You can't copy me" disabled></sl-copy-button>
 ```
 
 ```jsx:react
-import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
 
 const App = () => (
-  <WaCopyButton value="You can't copy me" disabled />
+  <SlCopyButton 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
-<wa-copy-button value="Web Awesome rocks!" feedback-duration="250"></wa-copy-button>
+<sl-copy-button value="Shoelace rocks!" feedback-duration="250"></sl-copy-button>
 ```
 
 ```jsx:react
-import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
 
 const App = () => (
-  <WaCopyButton value="Web Awesome rocks!" feedback-duration={250} />
+  <SlCopyButton value="Shoelace rocks!" feedback-duration={250} />
 );
 ```
 
@@ -178,11 +178,11 @@ const App = () => (
 You can customize the button to your liking with CSS.
 
 ```html:preview
-<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>
+<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>
 
 <style>
   .custom-styles {
@@ -193,19 +193,19 @@ You can customize the button to your liking with CSS.
 
   .custom-styles::part(button) {
     background-color: #ff1493;
-    border: solid 2px #ff7ac1;
+    border: solid 4px #ff7ac1;
     border-right-color: #ad005c;
     border-bottom-color: #ad005c;
-    border-radius: 6px;
-    transition: var(--wa-transition-normal) all;
+    border-radius: 0;
+    transition: 100ms scale ease-in-out, 100ms translate ease-in-out;
   }
 
   .custom-styles::part(button):hover {
-    transform: scale(1.05);
+    scale: 1.1;
   }
 
   .custom-styles::part(button):active {
-    transform: translateY(1px);
+    translate: 0 2px;
   }
 
   .custom-styles::part(button):focus-visible {
@@ -216,7 +216,7 @@ You can customize the button to your liking with CSS.
 ```
 
 ```jsx:react
-import { WaCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
 
 const css = `
   .custom-styles {
@@ -250,7 +250,7 @@ const css = `
 
 const App = () => (
   <>
-    <WaCopyButton value="I'm so stylish" className="custom-styles" />
+    <SlCopyButton value="I'm so stylish" className="custom-styles" />
 
     <style>{css}</style>
   </>

docs/pages/components/details.md

@@ -8,20 +8,20 @@ layout: component
 <!-- cspell:dictionaries lorem-ipsum -->
 
 ```html:preview
-<wa-details summary="Toggle Me">
+<sl-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.
-</wa-details>
+</sl-details>
 ```
 
 ```jsx:react
-import WaDetails from '@shoelace-style/shoelace/dist/react/details';
+import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details';
 
 const App = () => (
-  <WaDetails summary="Toggle Me">
+  <SlDetails 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.
-  </WaDetails>
+  </SlDetails>
 );
 ```
 
@@ -32,20 +32,20 @@ const App = () => (
 Use the `disable` attribute to prevent the details from expanding.
 
 ```html:preview
-<wa-details summary="Disabled" disabled>
+<sl-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.
-</wa-details>
+</sl-details>
 ```
 
 ```jsx:react
-import WaDetails from '@shoelace-style/shoelace/dist/react/details';
+import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details';
 
 const App = () => (
-  <WaDetails summary="Disabled" disabled>
+  <SlDetails 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.
-  </WaDetails>
+  </SlDetails>
 );
 ```
 
@@ -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
-<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>
+<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>
 
   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.
-</wa-details>
+</sl-details>
 
 <style>
-  wa-details.custom-icons::part(summary-icon) {
+  sl-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 WaDetails from '@shoelace-style/shoelace/dist/react/details';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const css = `
-  wa-details.custom-icon::part(summary-icon) {
+  sl-details.custom-icon::part(summary-icon) {
     /* Disable the expand/collapse animation */
     rotate: none;
   }
@@ -83,13 +83,13 @@ const css = `
 
 const App = () => (
   <>
-    <WaDetails summary="Toggle Me" class="custom-icon">
-      <WaIcon name="plus-square" slot="expand-icon" />
-      <WaIcon name="dash-square" slot="collapse-icon" />
+    <SlDetails summary="Toggle Me" class="custom-icon">
+      <SlIcon name="plus-square" slot="expand-icon" />
+      <SlIcon 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.
-    </WaDetails>
+    </SlDetails>
 
     <style>{css}</style>
   </>
@@ -98,24 +98,24 @@ 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 `wa-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 `sl-show` event.
 
 ```html:preview
 <div class="details-group-example">
-  <wa-details summary="First" open>
+  <sl-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.
-  </wa-details>
+  </sl-details>
 
-  <wa-details summary="Second">
+  <sl-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.
-  </wa-details>
+  </sl-details>
 
-  <wa-details summary="Third">
+  <sl-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.
-  </wa-details>
+  </sl-details>
 </div>
 
 <script>
@@ -123,15 +123,13 @@ Details are designed to function independently, but you can simulate a group or
 
   // Close all other details when one is shown
   container.addEventListener('sl-show', event => {
-    if (event.target.localName === 'sl-details') {
-      [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
-    }
+    [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
   });
 </script>
 
 <style>
-  .details-group-example wa-details:not(:last-of-type) {
-    margin-bottom: var(--wa-space-2xs);
+  .details-group-example sl-details:not(:last-of-type) {
+    margin-bottom: var(--sl-spacing-2x-small);
   }
 </style>
 ```

docs/pages/components/dialog.md

@@ -8,17 +8,17 @@ layout: component
 <!-- cspell:dictionaries lorem-ipsum -->
 
 ```html:preview
-<wa-dialog label="Dialog" class="dialog-overview">
+<sl-dialog label="Dialog" class="dialog-overview">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-dialog>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-dialog>
 
-<wa-button>Open Dialog</wa-button>
+<sl-button>Open Dialog</sl-button>
 
 <script>
   const dialog = document.querySelector('.dialog-overview');
   const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('wa-button[slot="footer"]');
+  const closeButton = dialog.querySelector('sl-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 WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <WaDialog label="Dialog" open={open} onWaAfterHide={() => setOpen(false)}>
+      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDialog>
+        </SlButton>
+      </SlDialog>
 
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
     </>
   );
 };
@@ -55,17 +55,17 @@ const App = () => {
 Use the `--width` custom property to set the dialog's width.
 
 ```html:preview
-<wa-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
+<sl-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-dialog>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-dialog>
 
-<wa-button>Open Dialog</wa-button>
+<sl-button>Open Dialog</sl-button>
 
 <script>
   const dialog = document.querySelector('.dialog-width');
   const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('wa-button[slot="footer"]');
+  const closeButton = dialog.querySelector('sl-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 WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <WaDialog label="Dialog" open={open} style={{ '--width': '50vw' }} onWaAfterHide={() => setOpen(false)}>
+      <SlDialog label="Dialog" open={open} style={{ '--width': '50vw' }} onSlAfterHide={() => setOpen(false)}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDialog>
+        </SlButton>
+      </SlDialog>
 
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
     </>
   );
 };
@@ -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
-<wa-dialog label="Dialog" class="dialog-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-outline); padding: 0 1rem;">
+<sl-dialog label="Dialog" class="dialog-scrolling">
+  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-dialog>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-dialog>
 
-<wa-button>Open Dialog</wa-button>
+<sl-button>Open Dialog</sl-button>
 
 <script>
   const dialog = document.querySelector('.dialog-scrolling');
   const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('wa-button[slot="footer"]');
+  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
 
   openButton.addEventListener('click', () => dialog.show());
   closeButton.addEventListener('click', () => dialog.hide());
@@ -127,31 +127,31 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
 
 ```jsx:react
 import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <WaDialog label="Dialog" open={open} onWaAfterHide={() => setOpen(false)}>
+      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
         <div
           style={{
             height: '150vh',
-            border: 'dashed 2px var(--wa-color-surface-outline)',
+            border: 'dashed 2px var(--sl-color-neutral-200)',
             padding: '0 1rem'
           }}
         >
           <p>Scroll down and give it a try! 👇</p>
         </div>
 
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDialog>
+        </SlButton>
+      </SlDialog>
 
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
     </>
   );
 };
@@ -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
-<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>
+<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>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-dialog>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-dialog>
 
-<wa-button>Open Dialog</wa-button>
+<sl-button>Open Dialog</sl-button>
 
 <script>
   const dialog = document.querySelector('.dialog-header-actions');
   const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('wa-button[slot="footer"]');
+  const closeButton = dialog.querySelector('sl-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 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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <WaDialog label="Dialog" open={open} onWaAfterHide={() => setOpen(false)}>
-        <WaIconButton
+      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        <SlIconButton
           class="new-window"
           slot="header-actions"
           name="box-arrow-up-right"
           onClick={() => window.open(location.href)}
         />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDialog>
+        </SlButton>
+      </SlDialog>
 
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
     </>
   );
 };
@@ -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 `wa-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 `sl-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
-<wa-dialog label="Dialog" class="dialog-deny-close">
+<sl-dialog label="Dialog" class="dialog-deny-close">
   This dialog will not close when you click on the overlay.
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-dialog>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-dialog>
 
-<wa-button>Open Dialog</wa-button>
+<sl-button>Open Dialog</sl-button>
 
 <script>
   const dialog = document.querySelector('.dialog-deny-close');
   const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('wa-button[slot="footer"]');
+  const closeButton = dialog.querySelector('sl-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('wa-request-close', event => {
+  dialog.addEventListener('sl-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 WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -264,14 +264,14 @@ const App = () => {
 
   return (
     <>
-      <WaDialog label="Dialog" open={open} onWaRequestClose={handleRequestClose} onWaAfterHide={() => setOpen(false)}>
+      <SlDialog label="Dialog" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
         This dialog will not close when you click on the overlay.
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDialog>
+        </SlButton>
+      </SlDialog>
 
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
     </>
   );
 };
@@ -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
-<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-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="primary">Close</sl-button>
+</sl-dialog>
 
-<wa-button>Open Dialog</wa-button>
+<sl-button>Open Dialog</sl-button>
 
 <script>
   const dialog = document.querySelector('.dialog-focus');
-  const input = dialog.querySelector('wa-input');
+  const input = dialog.querySelector('sl-input');
   const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('wa-button[slot="footer"]');
+  const closeButton = dialog.querySelector('sl-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 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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <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)}>
+      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        <SlInput autofocus placeholder="I will have focus when the dialog is opened" />
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDialog>
+        </SlButton>
+      </SlDialog>
 
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
     </>
   );
 };
 ```
 
 :::tip
-You can further customize initial focus behavior by canceling the `wa-initial-focus` event and setting focus yourself inside the event handler.
+You can further customize initial focus behavior by canceling the `sl-initial-focus` event and setting focus yourself inside the event handler.
 :::

docs/pages/components/divider.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-divider></wa-divider>
+<sl-divider></sl-divider>
 ```
 
 ```jsx:react
-import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
 
-const App = () => <WaDivider />;
+const App = () => <SlDivider />;
 ```
 
 ## Examples
@@ -22,15 +22,15 @@ const App = () => <WaDivider />;
 Use the `--width` custom property to change the width of the divider.
 
 ```html:preview
-<wa-divider style="--width: 4px;"></wa-divider>
+<sl-divider style="--width: 4px;"></sl-divider>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
 
-const App = () => <WaDivider style={{ '--width': '4px' }} />;
+const App = () => <SlDivider style={{ '--width': '4px' }} />;
 ```
 
 {% endraw %}
@@ -40,15 +40,15 @@ const App = () => <WaDivider style={{ '--width': '4px' }} />;
 Use the `--color` custom property to change the color of the divider.
 
 ```html:preview
-<wa-divider style="--color: tomato;"></wa-divider>
+<sl-divider style="--color: tomato;"></sl-divider>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
 
-const App = () => <WaDivider style={{ '--color': 'tomato' }} />;
+const App = () => <SlDivider 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
-  <wa-divider style="--spacing: 2rem;"></wa-divider>
+  <sl-divider style="--spacing: 2rem;"></sl-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 WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
 
 const App = () => (
   <>
     Above
-    <WaDivider style={{ '--spacing': '2rem' }} />
+    <SlDivider 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
-  <wa-divider vertical></wa-divider>
+  <sl-divider vertical></sl-divider>
   Middle
-  <wa-divider vertical></wa-divider>
+  <sl-divider vertical></sl-divider>
   Last
 </div>
 ```
@@ -98,7 +98,7 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The
 {% raw %}
 
 ```jsx:react
-import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
 
 const App = () => (
   <div
@@ -109,9 +109,9 @@ const App = () => (
     }}
   >
     First
-    <WaDivider vertical />
+    <SlDivider vertical />
     Middle
-    <WaDivider vertical />
+    <SlDivider vertical />
     Last
   </div>
 );
@@ -124,34 +124,34 @@ const App = () => (
 Use dividers in [menus](/components/menu) to visually group menu items.
 
 ```html:preview
-<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>
+<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>
 ```
 
 {% raw %}
 
 ```jsx:react
-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';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 

docs/pages/components/drawer.md

@@ -8,17 +8,17 @@ layout: component
 <!-- cspell:dictionaries lorem-ipsum -->
 
 ```html:preview
-<wa-drawer label="Drawer" class="drawer-overview">
+<sl-drawer label="Drawer" class="drawer-overview">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-drawer>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
 
-<wa-button>Open Drawer</wa-button>
+<sl-button>Open Drawer</sl-button>
 
 <script>
   const drawer = document.querySelector('.drawer-overview');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('wa-button[variant="brand"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
@@ -27,22 +27,22 @@ layout: component
 
 ```jsx:react
 import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)}>
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDrawer>
+        </SlButton>
+      </SlDrawer>
 
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
     </>
   );
 };
@@ -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
-<wa-drawer label="Drawer" placement="start" class="drawer-placement-start">
+<sl-drawer label="Drawer" placement="start" class="drawer-placement-start">
   This drawer slides in from the start.
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-drawer>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
 
-<wa-button>Open Drawer</wa-button>
+<sl-button>Open Drawer</sl-button>
 
 <script>
   const drawer = document.querySelector('.drawer-placement-start');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('wa-button[variant="brand"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   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 WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <WaDrawer label="Drawer" placement="start" open={open} onWaAfterHide={() => setOpen(false)}>
+      <SlDrawer label="Drawer" placement="start" open={open} onSlAfterHide={() => setOpen(false)}>
         This drawer slides in from the start.
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDrawer>
+        </SlButton>
+      </SlDrawer>
 
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
     </>
   );
 };
@@ -100,17 +100,17 @@ const App = () => {
 To make the drawer slide in from the top, set the `placement` attribute to `top`.
 
 ```html:preview
-<wa-drawer label="Drawer" placement="top" class="drawer-placement-top">
+<sl-drawer label="Drawer" placement="top" class="drawer-placement-top">
   This drawer slides in from the top.
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-drawer>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
 
-<wa-button>Open Drawer</wa-button>
+<sl-button>Open Drawer</sl-button>
 
 <script>
   const drawer = document.querySelector('.drawer-placement-top');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('wa-button[variant="brand"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   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 WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <WaDrawer label="Drawer" placement="top" open={open} onWaAfterHide={() => setOpen(false)}>
+      <SlDrawer label="Drawer" placement="top" open={open} onSlAfterHide={() => setOpen(false)}>
         This drawer slides in from the top.
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDrawer>
+        </SlButton>
+      </SlDrawer>
 
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
     </>
   );
 };
@@ -145,17 +145,17 @@ const App = () => {
 To make the drawer slide in from the bottom, set the `placement` attribute to `bottom`.
 
 ```html:preview
-<wa-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
+<sl-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
   This drawer slides in from the bottom.
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-drawer>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
 
-<wa-button>Open Drawer</wa-button>
+<sl-button>Open Drawer</sl-button>
 
 <script>
   const drawer = document.querySelector('.drawer-placement-bottom');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('wa-button[variant="brand"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   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 WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <WaDrawer label="Drawer" placement="bottom" open={open} onWaAfterHide={() => setOpen(false)}>
+      <SlDrawer label="Drawer" placement="bottom" open={open} onSlAfterHide={() => setOpen(false)}>
         This drawer slides in from the bottom.
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDrawer>
+        </SlButton>
+      </SlDrawer>
 
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
     </>
   );
 };
@@ -193,22 +193,22 @@ Unlike normal drawers, contained drawers are not modal. This means they do not s
 
 ```html:preview
 <div
-  style="position: relative; border: solid 2px var(--wa-color-surface-outline); height: 300px; padding: 1rem; margin-bottom: 1rem;"
+  style="position: relative; border: solid 2px var(--sl-panel-border-color); height: 300px; padding: 1rem; margin-bottom: 1rem;"
 >
   The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
 
-  <wa-drawer label="Drawer" contained class="drawer-contained" style="--size: 50%;">
+  <sl-drawer label="Drawer" contained class="drawer-contained" style="--size: 50%;">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    <wa-button slot="footer" variant="brand">Close</wa-button>
-  </wa-drawer>
+    <sl-button slot="footer" variant="primary">Close</sl-button>
+  </sl-drawer>
 </div>
 
-<wa-button>Toggle Drawer</wa-button>
+<sl-button>Toggle Drawer</sl-button>
 
 <script>
   const drawer = document.querySelector('.drawer-contained');
   const openButton = drawer.parentElement.nextElementSibling;
-  const closeButton = drawer.querySelector('wa-button[variant="brand"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   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 WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -230,7 +230,7 @@ const App = () => {
       <div
         style={{
           position: 'relative',
-          border: 'solid 2px var(--wa-color-surface-outline)',
+          border: 'solid 2px var(--sl-panel-border-color)',
           height: '300px',
           padding: '1rem',
           marginBottom: '1rem'
@@ -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.
-        <WaDrawer
+        <SlDrawer
           label="Drawer"
           contained
           no-modal
           open={open}
-          onWaAfterHide={() => setOpen(false)}
+          onSlAfterHide={() => setOpen(false)}
           style={{ '--size': '50%' }}
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+          <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
             Close
-          </WaButton>
-        </WaDrawer>
+          </SlButton>
+        </SlDrawer>
       </div>
 
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
     </>
   );
 };
@@ -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
-<wa-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
+<sl-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
   This drawer is always 50% of the viewport.
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-drawer>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
 
-<wa-button>Open Drawer</wa-button>
+<sl-button>Open Drawer</sl-button>
 
 <script>
   const drawer = document.querySelector('.drawer-custom-size');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('wa-button[variant="brand"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   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 WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)} style={{ '--size': '50vw' }}>
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)} style={{ '--size': '50vw' }}>
         This drawer is always 50% of the viewport.
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDrawer>
+        </SlButton>
+      </SlDrawer>
 
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
     </>
   );
 };
@@ -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
-<wa-drawer label="Drawer" class="drawer-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-outline); padding: 0 1rem;">
+<sl-drawer label="Drawer" class="drawer-scrolling">
+  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-drawer>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
 
-<wa-button>Open Drawer</wa-button>
+<sl-button>Open Drawer</sl-button>
 
 <script>
   const drawer = document.querySelector('.drawer-scrolling');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('wa-button[variant="brand"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
@@ -338,30 +338,30 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
 
 ```jsx:react
 import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)}>
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
         <div
           style={{
             height: '150vh',
-            border: 'dashed 2px var(--wa-color-surface-outline)',
+            border: 'dashed 2px var(--sl-color-neutral-200)',
             padding: '0 1rem'
           }}
         >
           <p>Scroll down and give it a try! 👇</p>
         </div>
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDrawer>
+        </SlButton>
+      </SlDrawer>
 
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
     </>
   );
 };
@@ -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
-<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>
+<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>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-drawer>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
 
-<wa-button>Open Drawer</wa-button>
+<sl-button>Open Drawer</sl-button>
 
 <script>
   const drawer = document.querySelector('.drawer-header-actions');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('wa-button[variant="brand"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
   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 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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)}>
-        <WaIconButton slot="header-actions" name="box-arrow-up-right" onClick={() => window.open(location.href)} />
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
+        <SlIconButton slot="header-actions" name="box-arrow-up-right" onClick={() => window.open(location.href)} />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDrawer>
+        </SlButton>
+      </SlDrawer>
 
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
     </>
   );
 };
@@ -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 `wa-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 `sl-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
-<wa-drawer label="Drawer" class="drawer-deny-close">
+<sl-drawer label="Drawer" class="drawer-deny-close">
   This drawer will not close when you click on the overlay.
-  <wa-button slot="footer" variant="brand">Close</wa-button>
-</wa-drawer>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
 
-<wa-button>Open Drawer</wa-button>
+<sl-button>Open Drawer</sl-button>
 
 <script>
   const drawer = document.querySelector('.drawer-deny-close');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('wa-button[variant="brand"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
 
   // Prevent the drawer from closing when the user clicks on the overlay
-  drawer.addEventListener('wa-request-close', event => {
+  drawer.addEventListener('sl-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 WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -469,14 +469,14 @@ const App = () => {
 
   return (
     <>
-      <WaDrawer label="Drawer" open={open} onWaRequestClose={handleRequestClose} onWaAfterHide={() => setOpen(false)}>
+      <SlDrawer label="Drawer" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
         This drawer will not close when you click on the overlay.
-        <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Save &amp; Close
-        </WaButton>
-      </WaDrawer>
+        </SlButton>
+      </SlDrawer>
 
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
     </>
   );
 };
@@ -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
-<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-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="primary">Close</sl-button>
+</sl-drawer>
 
-<wa-button>Open Drawer</wa-button>
+<sl-button>Open Drawer</sl-button>
 
 <script>
   const drawer = document.querySelector('.drawer-focus');
-  const input = drawer.querySelector('wa-input');
+  const input = drawer.querySelector('sl-input');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('wa-button[variant="brand"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   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 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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
 const App = () => {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <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)}>
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
+        <SlInput autofocus placeholder="I will have focus when the drawer is opened" />
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
-        </WaButton>
-      </WaDrawer>
+        </SlButton>
+      </SlDrawer>
 
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
     </>
   );
 };
 ```
 
 :::tip
-You can further customize initial focus behavior by canceling the `wa-initial-focus` event and setting focus yourself inside the event handler.
+You can further customize initial focus behavior by canceling the `sl-initial-focus` event and setting focus yourself inside the event handler.
 :::

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
-<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>
+<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>
       Prefix
-      <wa-icon slot="prefix" name="gift"></wa-icon>
-    </wa-menu-item>
-    <wa-menu-item>
+      <sl-icon slot="prefix" name="gift"></sl-icon>
+    </sl-menu-item>
+    <sl-menu-item>
       Suffix Icon
-      <wa-icon slot="suffix" name="heart"></wa-icon>
-    </wa-menu-item>
-  </wa-menu>
-</wa-dropdown>
+      <sl-icon slot="suffix" name="heart"></sl-icon>
+    </sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <WaDropdown>
-    <WaButton slot="trigger" caret>
+  <SlDropdown>
+    <SlButton slot="trigger" caret>
       Dropdown
-    </WaButton>
-    <WaMenu>
-      <WaMenuItem>Dropdown Item 1</WaMenuItem>
-      <WaMenuItem>Dropdown Item 2</WaMenuItem>
-      <WaMenuItem>Dropdown Item 3</WaMenuItem>
-      <WaDivider />
-      <WaMenuItem type="checkbox" checked>
+    </SlButton>
+    <SlMenu>
+      <SlMenuItem>Dropdown Item 1</SlMenuItem>
+      <SlMenuItem>Dropdown Item 2</SlMenuItem>
+      <SlMenuItem>Dropdown Item 3</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem type="checkbox" checked>
         Checkbox
-      </WaMenuItem>
-      <WaMenuItem disabled>Disabled</WaMenuItem>
-      <WaDivider />
-      <WaMenuItem>
+      </SlMenuItem>
+      <SlMenuItem disabled>Disabled</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>
         Prefix
-        <WaIcon slot="prefix" name="gift" />
-      </WaMenuItem>
-      <WaMenuItem>
+        <SlIcon slot="prefix" name="gift" />
+      </SlMenuItem>
+      <SlMenuItem>
         Suffix Icon
-        <WaIcon slot="suffix" name="heart" />
-      </WaMenuItem>
-    </WaMenu>
-  </WaDropdown>
+        <SlIcon slot="suffix" name="heart" />
+      </SlMenuItem>
+    </SlMenu>
+  </SlDropdown>
 );
 ```
 
@@ -72,25 +72,25 @@ const App = () => (
 
 ### Getting the Selected Item
 
-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.
+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.
 
 ```html:preview
 <div class="dropdown-selection">
-  <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>
+  <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>
 </div>
 
 <script>
   const container = document.querySelector('.dropdown-selection');
-  const dropdown = container.querySelector('wa-dropdown');
+  const dropdown = container.querySelector('sl-dropdown');
 
-  dropdown.addEventListener('wa-select', event => {
+  dropdown.addEventListener('sl-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 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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => {
   function handleSelect(event) {
@@ -110,16 +110,16 @@ const App = () => {
   }
 
   return (
-    <WaDropdown>
-      <WaButton slot="trigger" caret>
+    <SlDropdown>
+      <SlButton slot="trigger" caret>
         Edit
-      </WaButton>
-      <WaMenu onWaSelect={handleSelect}>
-        <WaMenuItem value="cut">Cut</WaMenuItem>
-        <WaMenuItem value="copy">Copy</WaMenuItem>
-        <WaMenuItem value="paste">Paste</WaMenuItem>
-      </WaMenu>
-    </WaDropdown>
+      </SlButton>
+      <SlMenu onSlSelect={handleSelect}>
+        <SlMenuItem value="cut">Cut</SlMenuItem>
+        <SlMenuItem value="copy">Copy</SlMenuItem>
+        <SlMenuItem value="paste">Paste</SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
   );
 };
 ```
@@ -128,21 +128,21 @@ Alternatively, you can listen for the `click` event on individual menu items. No
 
 ```html:preview
 <div class="dropdown-selection-alt">
-  <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>
+  <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>
 </div>
 
 <script>
   const container = document.querySelector('.dropdown-selection-alt');
-  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"]');
+  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"]');
 
   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 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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => {
   function handleCut() {
@@ -170,16 +170,16 @@ const App = () => {
   }
 
   return (
-    <WaDropdown>
-      <WaButton slot="trigger" caret>
+    <SlDropdown>
+      <SlButton slot="trigger" caret>
         Edit
-      </WaButton>
-      <WaMenu>
-        <WaMenuItem onClick={handleCut}>Cut</WaMenuItem>
-        <WaMenuItem onClick={handleCopy}>Copy</WaMenuItem>
-        <WaMenuItem onClick={handlePaste}>Paste</WaMenuItem>
-      </WaMenu>
-    </WaDropdown>
+      </SlButton>
+      <SlMenu>
+        <SlMenuItem onClick={handleCut}>Cut</SlMenuItem>
+        <SlMenuItem onClick={handleCopy}>Copy</SlMenuItem>
+        <SlMenuItem onClick={handlePaste}>Paste</SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
   );
 };
 ```
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <WaDropdown placement="top-start">
-    <WaButton slot="trigger" caret>
+  <SlDropdown placement="top-start">
+    <SlButton slot="trigger" caret>
       Edit
-    </WaButton>
-    <WaMenu>
-      <WaMenuItem>Cut</WaMenuItem>
-      <WaMenuItem>Copy</WaMenuItem>
-      <WaMenuItem>Paste</WaMenuItem>
-      <WaDivider />
-      <WaMenuItem>Find</WaMenuItem>
-      <WaMenuItem>Replace</WaMenuItem>
-    </WaMenu>
-  </WaDropdown>
+    </SlButton>
+    <SlMenu>
+      <SlMenuItem>Cut</SlMenuItem>
+      <SlMenuItem>Copy</SlMenuItem>
+      <SlMenuItem>Paste</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>Find</SlMenuItem>
+      <SlMenuItem>Replace</SlMenuItem>
+    </SlMenu>
+  </SlDropdown>
 );
 ```
 
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <WaDropdown distance={30}>
-    <WaButton slot="trigger" caret>
+  <SlDropdown distance={30}>
+    <SlButton slot="trigger" caret>
       Edit
-    </WaButton>
-    <WaMenu>
-      <WaMenuItem>Cut</WaMenuItem>
-      <WaMenuItem>Copy</WaMenuItem>
-      <WaMenuItem>Paste</WaMenuItem>
-      <WaDivider />
-      <WaMenuItem>Find</WaMenuItem>
-      <WaMenuItem>Replace</WaMenuItem>
-    </WaMenu>
-  </WaDropdown>
+    </SlButton>
+    <SlMenu>
+      <SlMenuItem>Cut</SlMenuItem>
+      <SlMenuItem>Copy</SlMenuItem>
+      <SlMenuItem>Paste</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>Find</SlMenuItem>
+      <SlMenuItem>Replace</SlMenuItem>
+    </SlMenu>
+  </SlDropdown>
 );
 ```
 
@@ -273,179 +273,90 @@ 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
-<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>
+<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>
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <WaDropdown skidding={30}>
-    <WaButton slot="trigger" caret>
+  <SlDropdown skidding={30}>
+    <SlButton slot="trigger" caret>
       Edit
-    </WaButton>
-    <WaMenu>
-      <WaMenuItem>Cut</WaMenuItem>
-      <WaMenuItem>Copy</WaMenuItem>
-      <WaMenuItem>Paste</WaMenuItem>
-      <WaDivider />
-      <WaMenuItem>Find</WaMenuItem>
-      <WaMenuItem>Replace</WaMenuItem>
-    </WaMenu>
-  </WaDropdown>
+    </SlButton>
+    <SlMenu>
+      <SlMenuItem>Cut</SlMenuItem>
+      <SlMenuItem>Copy</SlMenuItem>
+      <SlMenuItem>Paste</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>Find</SlMenuItem>
+      <SlMenuItem>Replace</SlMenuItem>
+    </SlMenu>
+  </SlDropdown>
 );
 ```
 
-### Submenus
-
-To create a submenu, nest an `<wa-menu slot="submenu">` element in a [menu item](/components/menu-item).
-
-```html:preview
-<wa-dropdown>
-  <wa-button slot="trigger" caret>Edit</wa-button>
-
-  <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
-      <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
-      <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 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 {
-    border: solid 2px var(--wa-color-surface-outline);
-    padding: var(--wa-space-m);
-    overflow: hidden;
-  }
-`;
-
-const App = () => (
-  <>
-    <WaDropdown>
-      <WaButton slot="trigger" caret>Edit</WaButton>
-
-      <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
-          <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
-          <WaMenu slot="submenu">
-            <WaMenuItem value="uppercase">Make uppercase</WaMenuItem>
-            <WaMenuItem value="lowercase">Make lowercase</WaMenuItem>
-            <WaMenuItem value="capitalize">Capitalize</WaMenuItem>
-          </WaMenu>
-        </WaMenuItem>
-      </WaMenu>
-    </WaDropdown>
-  </>
-);
-```
-
-:::warning
-As a UX best practice, avoid using more than one level of submenu when possible.
-:::
-
 ### Hoisting
 
 Dropdown panels will be clipped if they're inside a container that has `overflow: auto|hidden`. The `hoist` attribute forces the panel to use a fixed positioning strategy, allowing it to break out of the container. In this case, the panel will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
 
 ```html:preview
 <div class="dropdown-hoist">
-  <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>
+    <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 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>
+  <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>
 </div>
 
 <style>
   .dropdown-hoist {
     position: relative;
-    border: solid 2px var(--wa-color-surface-outline);
-    padding: var(--wa-space-m);
+    border: solid 2px var(--sl-panel-border-color);
+    padding: var(--sl-spacing-medium);
     overflow: hidden;
   }
 </style>
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const css = `
   .dropdown-hoist {
-    border: solid 2px var(--wa-color-surface-outline);
-    padding: var(--wa-space-m);
+    border: solid 2px var(--sl-panel-border-color);
+    padding: var(--sl-spacing-medium);
     overflow: hidden;
   }
 `;
@@ -453,27 +364,27 @@ const css = `
 const App = () => (
   <>
     <div className="dropdown-hoist">
-      <WaDropdown>
-        <WaButton slot="trigger" caret>
+      <SlDropdown>
+        <SlButton slot="trigger" caret>
           No Hoist
-        </WaButton>
-        <WaMenu>
-          <WaMenuItem>Item 1</WaMenuItem>
-          <WaMenuItem>Item 2</WaMenuItem>
-          <WaMenuItem>Item 3</WaMenuItem>
-        </WaMenu>
-      </WaDropdown>
+        </SlButton>
+        <SlMenu>
+          <SlMenuItem>Item 1</SlMenuItem>
+          <SlMenuItem>Item 2</SlMenuItem>
+          <SlMenuItem>Item 3</SlMenuItem>
+        </SlMenu>
+      </SlDropdown>
 
-      <WaDropdown hoist>
-        <WaButton slot="trigger" caret>
+      <SlDropdown hoist>
+        <SlButton slot="trigger" caret>
           Hoist
-        </WaButton>
-        <WaMenu>
-          <WaMenuItem>Item 1</WaMenuItem>
-          <WaMenuItem>Item 2</WaMenuItem>
-          <WaMenuItem>Item 3</WaMenuItem>
-        </WaMenu>
-      </WaDropdown>
+        </SlButton>
+        <SlMenu>
+          <SlMenuItem>Item 1</SlMenuItem>
+          <SlMenuItem>Item 2</SlMenuItem>
+          <SlMenuItem>Item 3</SlMenuItem>
+        </SlMenu>
+      </SlDropdown>
     </div>
 
     <style>{css}</style>

docs/pages/components/format-bytes.md

@@ -7,16 +7,16 @@ layout: component
 
 ```html:preview
 <div class="format-bytes-overview">
-  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>
+  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>
 </div>
 
 <script>
   const container = document.querySelector('.format-bytes-overview');
-  const formatter = container.querySelector('wa-format-bytes');
-  const input = container.querySelector('wa-input');
+  const formatter = container.querySelector('sl-format-bytes');
+  const input = container.querySelector('sl-input');
 
-  input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
+  input.addEventListener('sl-input', () => (formatter.value = input.value || 0));
 </script>
 ```
 
@@ -24,24 +24,24 @@ layout: component
 
 ```jsx:react
 import { useState } from 'react';
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
 const App = () => {
   const [value, setValue] = useState(1000);
 
   return (
     <>
-      The file is <WaFormatBytes value={value} /> in size.
+      The file is <SlFormatBytes value={value} /> in size.
       <br />
       <br />
-      <WaInput
+      <SlInput
         type="number"
         value={value}
         label="Number to Format"
         style={{ maxWidth: '180px' }}
-        onWaInput={event => setValue(event.target.value)}
+        onSlInput={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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
 
 const App = () => (
   <>
-    <WaFormatBytes value="12" />
+    <SlFormatBytes value="12" />
     <br />
-    <WaFormatBytes value="1200" />
+    <SlFormatBytes value="1200" />
     <br />
-    <WaFormatBytes value="1200000" />
+    <SlFormatBytes value="1200000" />
     <br />
-    <WaFormatBytes value="1200000000" />
+    <SlFormatBytes value="1200000000" />
   </>
 );
 ```
@@ -84,24 +84,24 @@ const App = () => (
 To get the value in bits, set the `unit` attribute to `bit`.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
 
 const App = () => (
   <>
-    <WaFormatBytes value="12" unit="bit" />
+    <SlFormatBytes value="12" unit="bit" />
     <br />
-    <WaFormatBytes value="1200" unit="bit" />
+    <SlFormatBytes value="1200" unit="bit" />
     <br />
-    <WaFormatBytes value="1200000" unit="bit" />
+    <SlFormatBytes value="1200000" unit="bit" />
     <br />
-    <WaFormatBytes value="1200000000" unit="bit" />
+    <SlFormatBytes value="1200000000" unit="bit" />
   </>
 );
 ```
@@ -111,24 +111,24 @@ const App = () => (
 Use the `lang` attribute to set the number formatting locale.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
 
 const App = () => (
   <>
-    <WaFormatBytes value="12" lang="de" />
+    <SlFormatBytes value="12" lang="de" />
     <br />
-    <WaFormatBytes value="1200" lang="de" />
+    <SlFormatBytes value="1200" lang="de" />
     <br />
-    <WaFormatBytes value="1200000" lang="de" />
+    <SlFormatBytes value="1200000" lang="de" />
     <br />
-    <WaFormatBytes value="1200000000" lang="de" />
+    <SlFormatBytes value="1200000000" lang="de" />
   </>
 );
 ```

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
-<!-- Web Awesome 2 release date 🎉 -->
-<wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+<!-- Shoelace 2 release date 🎉 -->
+<sl-format-date date="2020-07-15T09:17:00-04:00"></sl-format-date>
 ```
 
 ```jsx:react
-import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
 
-const App = () => <WaFormatDate date="2020-07-15T09:17:00-04:00" />;
+const App = () => <SlFormatDate 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 -->
-<wa-format-date month="long" day="numeric" year="numeric"></wa-format-date><br />
+<sl-format-date month="long" day="numeric" year="numeric"></sl-format-date><br />
 
 <!-- Time -->
-<wa-format-date hour="numeric" minute="numeric"></wa-format-date><br />
+<sl-format-date hour="numeric" minute="numeric"></sl-format-date><br />
 
 <!-- Weekday -->
-<wa-format-date weekday="long"></wa-format-date><br />
+<sl-format-date weekday="long"></sl-format-date><br />
 
 <!-- Month -->
-<wa-format-date month="long"></wa-format-date><br />
+<sl-format-date month="long"></sl-format-date><br />
 
 <!-- Year -->
-<wa-format-date year="numeric"></wa-format-date><br />
+<sl-format-date year="numeric"></sl-format-date><br />
 
 <!-- No formatting options -->
-<wa-format-date></wa-format-date>
+<sl-format-date></sl-format-date>
 ```
 
 ```jsx:react
-import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
 
 const App = () => (
   <>
     {/* Human-readable date */}
-    <WaFormatDate month="long" day="numeric" year="numeric" />
+    <SlFormatDate month="long" day="numeric" year="numeric" />
     <br />
 
     {/* Time */}
-    <WaFormatDate hour="numeric" minute="numeric" />
+    <SlFormatDate hour="numeric" minute="numeric" />
     <br />
 
     {/* Weekday */}
-    <WaFormatDate weekday="long" />
+    <SlFormatDate weekday="long" />
     <br />
 
     {/* Month */}
-    <WaFormatDate month="long" />
+    <SlFormatDate month="long" />
     <br />
 
     {/* Year */}
-    <WaFormatDate year="numeric" />
+    <SlFormatDate year="numeric" />
     <br />
 
     {/* No formatting options */}
-    <WaFormatDate />
+    <SlFormatDate />
   </>
 );
 ```
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
 
 const App = () => (
   <>
-    <WaFormatDate hour="numeric" minute="numeric" hour-format="12" />
+    <SlFormatDate hour="numeric" minute="numeric" hour-format="12" />
     <br />
-    <WaFormatDate hour="numeric" minute="numeric" hour-format="24" />
+    <SlFormatDate 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: <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>
+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>
 ```
 
 ```jsx:react
-import WaFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
 
 const App = () => (
   <>
-    English: <WaFormatDate lang="en" />
+    English: <SlFormatDate lang="en" />
     <br />
-    French: <WaFormatDate lang="fr" />
+    French: <SlFormatDate lang="fr" />
     <br />
-    Russian: <WaFormatDate lang="ru" />
+    Russian: <SlFormatDate lang="ru" />
   </>
 );
 ```

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">
-  <wa-format-number value="1000"></wa-format-number>
+  <sl-format-number value="1000"></sl-format-number>
   <br /><br />
-  <wa-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></wa-input>
+  <sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>
 </div>
 
 <script>
   const container = document.querySelector('.format-number-overview');
-  const formatter = container.querySelector('wa-format-number');
-  const input = container.querySelector('wa-input');
+  const formatter = container.querySelector('sl-format-number');
+  const input = container.querySelector('sl-input');
 
-  input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
+  input.addEventListener('sl-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 WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import SlInput from '@shoelace-style/shoelace/dist/react/input';
 
 const App = () => {
   const [value, setValue] = useState(1000);
 
   return (
     <>
-      <WaFormatNumber value={value} />
+      <SlFormatNumber value={value} />
       <br />
       <br />
-      <WaInput
+      <SlInput
         type="number"
         value={value}
         label="Number to Format"
         style={{ maxWidth: '180px' }}
-        onWaInput={event => setValue(event.target.value)}
+        onSlInput={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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
 
 const App = () => (
   <>
-    <WaFormatNumber type="percent" value={0} />
+    <SlFormatNumber type="percent" value={0} />
     <br />
-    <WaFormatNumber type="percent" value={0.25} />
+    <SlFormatNumber type="percent" value={0.25} />
     <br />
-    <WaFormatNumber type="percent" value={0.5} />
+    <SlFormatNumber type="percent" value={0.5} />
     <br />
-    <WaFormatNumber type="percent" value={0.75} />
+    <SlFormatNumber type="percent" value={0.75} />
     <br />
-    <WaFormatNumber type="percent" value={1} />
+    <SlFormatNumber type="percent" value={1} />
   </>
 );
 ```
@@ -89,21 +89,21 @@ const App = () => (
 Use the `lang` attribute to set the number formatting locale.
 
 ```html:preview
-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>
+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>
 ```
 
 ```jsx:react
-import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import SlFormatNumber from '@shoelace-style/shoelace/dist/react/sl-format-number';
 
 const App = () => (
   <>
-    English: <WaFormatNumber value="2000" lang="en" minimum-fraction-digits="2" />
+    English: <SlFormatNumber value="2000" lang="en" minimum-fraction-digits="2" />
     <br />
-    German: <WaFormatNumber value="2000" lang="de" minimum-fraction-digits="2" />
+    German: <SlFormatNumber value="2000" lang="de" minimum-fraction-digits="2" />
     <br />
-    Russian: <WaFormatNumber value="2000" lang="ru" minimum-fraction-digits="2" />
+    Russian: <SlFormatNumber 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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import SlFormatNumber from '@shoelace-style/shoelace/dist/react/sl-format-number';
 
 const App = () => (
   <>
-    <WaFormatNumber type="currency" currency="USD" value="2000" lang="en-US" />
+    <SlFormatNumber type="currency" currency="USD" value="2000" lang="en-US" />
     <br />
-    <WaFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" />
+    <SlFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" />
     <br />
-    <WaFormatNumber type="currency" currency="EUR" value="2000" lang="de" />
+    <SlFormatNumber type="currency" currency="EUR" value="2000" lang="de" />
     <br />
-    <WaFormatNumber type="currency" currency="RUB" value="2000" lang="ru" />
+    <SlFormatNumber type="currency" currency="RUB" value="2000" lang="ru" />
     <br />
-    <WaFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" />
+    <SlFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" />
   </>
 );
 ```

docs/pages/components/icon-button.md

@@ -5,16 +5,16 @@ meta:
 layout: component
 ---
 
-For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/components/icon).
+For a full list of icons that come bundled with Shoelace, refer to the [icon component](/components/icon).
 
 ```html:preview
-<wa-icon-button name="gear" label="Settings"></wa-icon-button>
+<sl-icon-button name="gear" label="Settings"></sl-icon-button>
 ```
 
 ```jsx:react
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
 
-const App = () => <WaIconButton name="gear" label="Settings" />;
+const App = () => <SlIconButton name="gear" label="Settings" />;
 ```
 
 ## Examples
@@ -24,21 +24,21 @@ const App = () => <WaIconButton name="gear" label="Settings" />;
 Icon buttons inherit their parent element's `font-size`.
 
 ```html:preview
-<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>
+<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>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
 
 const App = () => (
   <>
-    <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' }} />
+    <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' }} />
   </>
 );
 ```
@@ -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">
-  <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>
+  <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>
 </div>
 
 <style>
-  .icon-button-color wa-icon-button::part(base) {
+  .icon-button-color sl-icon-button::part(base) {
     color: #b00091;
   }
 
-  .icon-button-color wa-icon-button::part(base):hover,
-  .icon-button-color wa-icon-button::part(base):focus {
+  .icon-button-color sl-icon-button::part(base):hover,
+  .icon-button-color sl-icon-button::part(base):focus {
     color: #c913aa;
   }
 
-  .icon-button-color wa-icon-button::part(base):active {
+  .icon-button-color sl-icon-button::part(base):active {
     color: #960077;
   }
 </style>
 ```
 
 ```jsx:react
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
 
 const css = `
-  .icon-button-color wa-icon-button::part(base) {
+  .icon-button-color sl-icon-button::part(base) {
     color: #b00091;
   }
 
-  .icon-button-color wa-icon-button::part(base):hover,
-  .icon-button-color wa-icon-button::part(base):focus {
+  .icon-button-color sl-icon-button::part(base):hover,
+  .icon-button-color sl-icon-button::part(base):focus {
     color: #c913aa;
   }
 
-  .icon-button-color wa-icon-button::part(base):active {
+  .icon-button-color sl-icon-button::part(base):active {
     color: #960077;
   }
 `;
@@ -93,9 +93,9 @@ const css = `
 const App = () => (
   <>
     <div className="icon-button-color">
-      <WaIconButton name="type-bold" label="Bold" />
-      <WaIconButton name="type-italic" label="Italic" />
-      <WaIconButton name="type-underline" label="Underline" />
+      <SlIconButton name="type-bold" label="Bold" />
+      <SlIconButton name="type-italic" label="Italic" />
+      <SlIconButton 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
-<wa-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>
+<sl-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></sl-icon-button>
 ```
 
 ```jsx:react
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
 
-const App = () => <WaIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
+const App = () => <SlIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
 ```
 
 ### Icon Button with Tooltip
@@ -122,19 +122,19 @@ const App = () => <WaIconButton name="gear" label="Settings" href="https://examp
 Wrap a tooltip around an icon button to provide contextual information to the user.
 
 ```html:preview
-<wa-tooltip content="Settings">
-  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
-</wa-tooltip>
+<sl-tooltip content="Settings">
+  <sl-icon-button name="gear" label="Settings"></sl-icon-button>
+</sl-tooltip>
 ```
 
 ```jsx:react
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
+import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
 
 const App = () => (
-  <WaTooltip content="Settings">
-    <WaIconButton name="gear" label="Settings" />
-  </WaTooltip>
+  <SlTooltip content="Settings">
+    <SlIconButton name="gear" label="Settings" />
+  </SlTooltip>
 );
 ```
 
@@ -143,11 +143,11 @@ const App = () => (
 Use the `disabled` attribute to disable the icon button.
 
 ```html:preview
-<wa-icon-button name="gear" label="Settings" disabled></wa-icon-button>
+<sl-icon-button name="gear" label="Settings" disabled></sl-icon-button>
 ```
 
 ```jsx:react
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
 
-const App = () => <WaIconButton name="gear" label="Settings" disabled />;
+const App = () => <SlIconButton name="gear" label="Settings" disabled />;
 ```

docs/pages/components/icon.md

@@ -5,10 +5,10 @@ meta:
 layout: component
 ---
 
-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.
+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.
 
 :::tip
-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.
+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.
 :::
 
 ## Default Icons
@@ -16,19 +16,19 @@ Depending on how you're loading Web Awesome, you may need to copy icon assets an
 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
-<wa-icon name="icon-name-here"></wa-icon>
+<sl-icon name="icon-name-here"></sl-icon>
 ```
 
 <div class="icon-search">
   <div class="icon-search-controls">
-    <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>
+    <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>
   </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 `<wa-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 `<sl-icon>` element or an ancestor to change the color.
 
 ```html:preview
 <div style="color: #4a90e2;">
-  <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>
+  <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>
 </div>
 <div style="color: #9013fe;">
-  <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>
+  <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>
 </div>
 <div style="color: #417505;">
-  <wa-icon name="flag"></wa-icon>
-  <wa-icon name="heart"></wa-icon>
-  <wa-icon name="image"></wa-icon>
-  <wa-icon name="lightning"></wa-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>
 </div>
 <div style="color: #f5a623;">
-  <wa-icon name="mic"></wa-icon>
-  <wa-icon name="search"></wa-icon>
-  <wa-icon name="star"></wa-icon>
-  <wa-icon name="trash"></wa-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>
 </div>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
   <>
     <div style={{ color: '#4a90e2' }}>
-      <WaIcon name="exclamation-triangle"></WaIcon>
-      <WaIcon name="archive"></WaIcon>
-      <WaIcon name="battery-charging"></WaIcon>
-      <WaIcon name="bell"></WaIcon>
+      <SlIcon name="exclamation-triangle"></SlIcon>
+      <SlIcon name="archive"></SlIcon>
+      <SlIcon name="battery-charging"></SlIcon>
+      <SlIcon name="bell"></SlIcon>
     </div>
     <div style={{ color: '#9013fe' }}>
-      <WaIcon name="clock"></WaIcon>
-      <WaIcon name="cloud"></WaIcon>
-      <WaIcon name="download"></WaIcon>
-      <WaIcon name="file-earmark"></WaIcon>
+      <SlIcon name="clock"></SlIcon>
+      <SlIcon name="cloud"></SlIcon>
+      <SlIcon name="download"></SlIcon>
+      <SlIcon name="file-earmark"></SlIcon>
     </div>
     <div style={{ color: '#417505' }}>
-      <WaIcon name="flag"></WaIcon>
-      <WaIcon name="heart"></WaIcon>
-      <WaIcon name="image"></WaIcon>
-      <WaIcon name="lightning"></WaIcon>
+      <SlIcon name="flag"></SlIcon>
+      <SlIcon name="heart"></SlIcon>
+      <SlIcon name="image"></SlIcon>
+      <SlIcon name="lightning"></SlIcon>
     </div>
     <div style={{ color: '#f5a623' }}>
-      <WaIcon name="mic"></WaIcon>
-      <WaIcon name="search"></WaIcon>
-      <WaIcon name="star"></WaIcon>
-      <WaIcon name="trash"></WaIcon>
+      <SlIcon name="mic"></SlIcon>
+      <SlIcon name="search"></SlIcon>
+      <SlIcon name="star"></SlIcon>
+      <SlIcon name="trash"></SlIcon>
     </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;">
-  <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>
+  <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>
 </div>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
   <div style={{ fontSize: '32px' }}>
-    <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" />
+    <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" />
   </div>
 );
 ```
@@ -163,13 +163,13 @@ const App = () => (
 For non-decorative icons, use the `label` attribute to announce it to assistive devices.
 
 ```html:preview
-<wa-icon name="star-fill" label="Add to favorites"></wa-icon>
+<sl-icon name="star-fill" label="Add to favorites"></sl-icon>
 ```
 
 ```jsx:react
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
-const App = () => <WaIcon name="star-fill" label="Add to favorites" />;
+const App = () => <SlIcon name="star-fill" label="Add to favorites" />;
 ```
 
 ### Custom Icons
@@ -177,24 +177,24 @@ const App = () => <WaIcon 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
-<wa-icon src="https://shoelace.style/assets/images/shoe.svg" style="font-size: 8rem;"></wa-icon>
+<sl-icon src="https://shoelace.style/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
-const App = () => <WaIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></WaIcon>;
+const App = () => <SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>;
 ```
 
 {% endraw %}
 
 ## Icon Libraries
 
-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.
+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.
 
-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.
+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.
 
 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 `<wa-icon>` element.
+To display an icon, set the `library` and `name` attributes of an `<sl-icon>` element.
 
 ```html
 <!-- This will show the icon located at /assets/icons/smile.svg -->
-<wa-icon library="my-icons" name="smile"></wa-icon>
+<sl-icon library="my-icons" name="smile"></sl-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;">
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
 </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;">
-  <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>
+  <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>
 </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;">
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
 </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;">
-  <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>
+  <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>
 </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;">
-  <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>
+  <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>
 </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;">
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
 </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;">
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
 </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;">
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
 </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;">
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
 </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;">
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
 </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;">
-  <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>
+  <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>
   <br />
-  <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>
+  <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>
 </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 `<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.
+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.
 
 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 `wa-load` and `wa-error` events will not fire.
+When using sprite sheets, the `sl-load` and `sl-error` events will not fire.
 :::
 
 :::danger
-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.
+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.
 :::
 
 ```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;">
-  <wa-icon library="sprite" name="clock"></wa-icon>
-  <wa-icon library="sprite" name="speedometer"></wa-icon>
+  <sl-icon library="sprite" name="clock"></sl-icon>
+  <sl-icon library="sprite" name="speedometer"></sl-icon>
 </div>
 ```
 
 ### Customizing the System Library
 
-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.
+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.
 
-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.
+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.
 
 ```html
 <script type="module">
@@ -684,11 +684,11 @@ If you want to change the icons Web Awesome uses internally, you can register an
 <!-- Supporting scripts and styles for the search utility -->
 <script>
   function wrapWithTooltip(item) {
-    const tooltip = document.createElement('wa-tooltip');
+    const tooltip = document.createElement('sl-tooltip');
     tooltip.content = item.getAttribute('data-name');
 
     // Close open tooltips
-    document.querySelectorAll('.icon-list wa-tooltip[open]').forEach(tooltip => tooltip.hide());
+    document.querySelectorAll('.icon-list sl-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 Web Awesome uses internally, you can register an
     .then(res => res.json())
     .then(icons => {
       const container = document.querySelector('.icon-search');
-      const input = container.querySelector('wa-input');
-      const select = container.querySelector('wa-select');
+      const input = container.querySelector('sl-input');
+      const select = container.querySelector('sl-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 Web Awesome uses internally, you can register an
 
         // Copy on click
         item.addEventListener('click', () => {
-          const tooltip = item.closest('wa-tooltip');
+          const tooltip = item.closest('sl-tooltip');
           copyInput.value = i.name;
           copyInput.select();
           document.execCommand('copy');
@@ -740,7 +740,7 @@ If you want to change the icons Web Awesome uses internally, you can register an
       });
 
       // Filter as the user types
-      input.addEventListener('wa-input', () => {
+      input.addEventListener('sl-input', () => {
         clearTimeout(inputTimeout);
         inputTimeout = setTimeout(() => {
           [...list.querySelectorAll('.icon-list-item')].map(item => {
@@ -756,21 +756,21 @@ If you want to change the icons Web Awesome uses internally, you can register an
       });
 
       // Sort by type and remember preference
-      const iconType = sessionStorage.getItem('wa-icon:type') || 'outline';
+      const iconType = sessionStorage.getItem('sl-icon:type') || 'outline';
       select.value = iconType;
       list.setAttribute('data-type', select.value);
-      select.addEventListener('wa-change', () => {
+      select.addEventListener('sl-change', () => {
         list.setAttribute('data-type', select.value);
-        sessionStorage.setItem('wa-icon:type', select.value);
+        sessionStorage.setItem('sl-icon:type', select.value);
       });
     });
 </script>
 
 <style>
   .icon-search {
-    border: solid 1px var(--wa-color-surface-outline);
-    border-radius: var(--wa-corners-1x);
-    padding: var(--wa-space-m);
+    border: solid 1px var(--sl-panel-border-color);
+    border-radius: var(--sl-border-radius-medium);
+    padding: var(--sl-spacing-medium);
   }
 
   .icon-search [hidden] {
@@ -781,11 +781,11 @@ If you want to change the icons Web Awesome uses internally, you can register an
     display: flex;
   }
 
-  .icon-search-controls wa-input {
+  .icon-search-controls sl-input {
     flex: 1 1 auto;
   }
 
-  .icon-search-controls wa-select {
+  .icon-search-controls sl-select {
     width: 10rem;
     flex: 0 0 auto;
     margin-left: 1rem;
@@ -814,18 +814,18 @@ If you want to change the icons Web Awesome uses internally, you can register an
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--sl-border-radius-medium);
     font-size: 24px;
     width: 2em;
     height: 2em;
     margin: 0 auto;
     cursor: copy;
-    transition: var(--wa-transition-fast) all;
+    transition: var(--sl-transition-medium) all;
   }
 
   .icon-list-item:hover {
-    background-color: var(--wa-color-brand-fill-muted);
-    color: var(--wa-color-brand-text-on-muted);
+    background-color: var(--sl-color-primary-50);
+    color: var(--sl-color-primary-600);
   }
 
   .icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {
@@ -855,7 +855,7 @@ If you want to change the icons Web Awesome uses internally, you can register an
       display: block;
     }
 
-    .icon-search-controls wa-select {
+    .icon-search-controls sl-select {
       width: auto;
       margin: 1rem 0 0 0;
     }

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
-<wa-image-comparer>
+<sl-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."
   />
-</wa-image-comparer>
+</sl-image-comparer>
 ```
 
 ```jsx:react
-import WaImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
+import SlImageComparer from '@shoelace-style/shoelace/dist/react/sl-image-comparer';
 
 const App = () => (
-  <WaImageComparer>
+  <SlImageComparer>
     <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."
     />
-  </WaImageComparer>
+  </SlImageComparer>
 );
 ```
 
@@ -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
-<wa-image-comparer position="25">
+<sl-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."
   />
-</wa-image-comparer>
+</sl-image-comparer>
 ```
 
 ```jsx:react
-import WaImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
+import SlImageComparer from '@shoelace-style/shoelace/dist/react/sl-image-comparer';
 
 const App = () => (
-  <WaImageComparer position={25}>
+  <SlImageComparer 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."
     />
-  </WaImageComparer>
+  </SlImageComparer>
 );
 ```

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 `<wa-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 `<sl-include>` element's default slot so it can be easily accessed and styled through the light DOM.
 
 ```html:preview
-<wa-include src="https://shoelace.style/assets/examples/include.html"></wa-include>
+<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
 ```
 
 ```jsx:react
-import WaInclude from '@shoelace-style/shoelace/dist/react/include';
+import SlInclude from '@shoelace-style/shoelace/dist/react/sl-include';
 
-const App = () => <WaInclude src="https://shoelace.style/assets/examples/include.html" />;
+const App = () => <SlInclude src="https://shoelace.style/assets/examples/include.html" />;
 ```
 
 ## Examples
 
 ### Listening for Events
 
-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.
+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.
 
-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).
+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).
 
 ```html
-<wa-include src="https://shoelace.style/assets/examples/include.html"></wa-include>
+<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
 
 <script>
-  const include = document.querySelector('wa-include');
+  const include = document.querySelector('sl-include');
 
-  include.addEventListener('wa-load', event => {
+  include.addEventListener('sl-load', event => {
     if (event.eventPhase === Event.AT_TARGET) {
       console.log('Success');
     }
   });
 
-  include.addEventListener('wa-error', event => {
+  include.addEventListener('sl-error', event => {
     if (event.eventPhase === Event.AT_TARGET) {
       console.log('Error', event.detail.status);
     }

docs/pages/components/input.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-input></wa-input>
+<sl-input></sl-input>
 ```
 
 ```jsx:react
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
-const App = () => <WaInput />;
+const App = () => <SlInput />;
 ```
 
 :::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
-<wa-input label="What is your name?"></wa-input>
+<sl-input label="What is your name?"></sl-input>
 ```
 
 ```jsx:react
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
-const App = () => <WaInput label="What is your name?" />;
+const App = () => <SlInput label="What is your name?" />;
 ```
 
 ### Help Text
@@ -41,14 +41,14 @@ const App = () => <WaInput 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
-<wa-input label="Nickname" help-text="What would you like people to call you?"></wa-input>
+<sl-input label="Nickname" help-text="What would you like people to call you?"></sl-input>
 ```
 
 ```jsx:react
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
-const App = () => <WaInput label="Nickname" help-text="What would you like people to call you?" />;
+const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
 ```
 
 ### Placeholders
@@ -56,13 +56,13 @@ const App = () => <WaInput label="Nickname" help-text="What would you like peopl
 Use the `placeholder` attribute to add a placeholder.
 
 ```html:preview
-<wa-input placeholder="Type something"></wa-input>
+<sl-input placeholder="Type something"></sl-input>
 ```
 
 ```jsx:react
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
-const App = () => <WaInput placeholder="Type something" />;
+const App = () => <SlInput placeholder="Type something" />;
 ```
 
 ### Clearable
@@ -70,13 +70,13 @@ const App = () => <WaInput placeholder="Type something" />;
 Add the `clearable` attribute to add a clear button when the input has content.
 
 ```html:preview
-<wa-input placeholder="Clearable" clearable></wa-input>
+<sl-input placeholder="Clearable" clearable></sl-input>
 ```
 
 ```jsx:react
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
-const App = () => <WaInput placeholder="Clearable" clearable />;
+const App = () => <SlInput placeholder="Clearable" clearable />;
 ```
 
 ### Toggle Password
@@ -84,13 +84,13 @@ const App = () => <WaInput placeholder="Clearable" clearable />;
 Add the `password-toggle` attribute to add a toggle button that will show the password when activated.
 
 ```html:preview
-<wa-input type="password" placeholder="Password Toggle" password-toggle></wa-input>
+<sl-input type="password" placeholder="Password Toggle" password-toggle></sl-input>
 ```
 
 ```jsx:react
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
-const App = () => <WaInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;
+const App = () => <SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;
 ```
 
 ### Filled Inputs
@@ -98,13 +98,13 @@ const App = () => <WaInput type="password" placeholder="Password Toggle" size="m
 Add the `filled` attribute to draw a filled input.
 
 ```html:preview
-<wa-input placeholder="Type something" filled></wa-input>
+<sl-input placeholder="Type something" filled></sl-input>
 ```
 
 ```jsx:react
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
-const App = () => <WaInput placeholder="Type something" filled />;
+const App = () => <SlInput placeholder="Type something" filled />;
 ```
 
 ### Disabled
@@ -112,13 +112,13 @@ const App = () => <WaInput placeholder="Type something" filled />;
 Use the `disabled` attribute to disable an input.
 
 ```html:preview
-<wa-input placeholder="Disabled" disabled></wa-input>
+<sl-input placeholder="Disabled" disabled></sl-input>
 ```
 
 ```jsx:react
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
-const App = () => <WaInput placeholder="Disabled" disabled />;
+const App = () => <SlInput placeholder="Disabled" disabled />;
 ```
 
 ### Sizes
@@ -126,23 +126,23 @@ const App = () => <WaInput placeholder="Disabled" disabled />;
 Use the `size` attribute to change an input's size.
 
 ```html:preview
-<wa-input placeholder="Small" size="small"></wa-input>
+<sl-input placeholder="Small" size="small"></sl-input>
 <br />
-<wa-input placeholder="Medium" size="medium"></wa-input>
+<sl-input placeholder="Medium" size="medium"></sl-input>
 <br />
-<wa-input placeholder="Large" size="large"></wa-input>
+<sl-input placeholder="Large" size="large"></sl-input>
 ```
 
 ```jsx:react
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
 const App = () => (
   <>
-    <WaInput placeholder="Small" size="small" />
+    <SlInput placeholder="Small" size="small" />
     <br />
-    <WaInput placeholder="Medium" size="medium" />
+    <SlInput placeholder="Medium" size="medium" />
     <br />
-    <WaInput placeholder="Large" size="large" />
+    <SlInput placeholder="Large" size="large" />
   </>
 );
 ```
@@ -152,23 +152,23 @@ const App = () => (
 Use the `pill` attribute to give inputs rounded edges.
 
 ```html:preview
-<wa-input placeholder="Small" size="small" pill></wa-input>
+<sl-input placeholder="Small" size="small" pill></sl-input>
 <br />
-<wa-input placeholder="Medium" size="medium" pill></wa-input>
+<sl-input placeholder="Medium" size="medium" pill></sl-input>
 <br />
-<wa-input placeholder="Large" size="large" pill></wa-input>
+<sl-input placeholder="Large" size="large" pill></sl-input>
 ```
 
 ```jsx:react
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
 const App = () => (
   <>
-    <WaInput placeholder="Small" size="small" pill />
+    <SlInput placeholder="Small" size="small" pill />
     <br />
-    <WaInput placeholder="Medium" size="medium" pill />
+    <SlInput placeholder="Medium" size="medium" pill />
     <br />
-    <WaInput placeholder="Large" size="large" pill />
+    <SlInput placeholder="Large" size="large" pill />
   </>
 );
 ```
@@ -178,23 +178,23 @@ const App = () => (
 The `type` attribute controls the type of input the browser renders.
 
 ```html:preview
-<wa-input type="email" placeholder="Email"></wa-input>
+<sl-input type="email" placeholder="Email"></sl-input>
 <br />
-<wa-input type="number" placeholder="Number"></wa-input>
+<sl-input type="number" placeholder="Number"></sl-input>
 <br />
-<wa-input type="date" placeholder="Date"></wa-input>
+<sl-input type="date" placeholder="Date"></sl-input>
 ```
 
 ```jsx:react
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
 const App = () => (
   <>
-    <WaInput type="email" placeholder="Email" />
+    <SlInput type="email" placeholder="Email" />
     <br />
-    <WaInput type="number" placeholder="Number" />
+    <SlInput type="number" placeholder="Number" />
     <br />
-    <WaInput type="date" placeholder="Date" />
+    <SlInput type="date" placeholder="Date" />
   </>
 );
 ```
@@ -204,42 +204,42 @@ const App = () => (
 Use the `prefix` and `suffix` slots to add icons.
 
 ```html:preview
-<wa-input placeholder="Small" size="small">
-  <wa-icon name="house" slot="prefix"></wa-icon>
-  <wa-icon name="chat" slot="suffix"></wa-icon>
-</wa-input>
+<sl-input placeholder="Small" size="small">
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
+</sl-input>
 <br />
-<wa-input placeholder="Medium" size="medium">
-  <wa-icon name="house" slot="prefix"></wa-icon>
-  <wa-icon name="chat" slot="suffix"></wa-icon>
-</wa-input>
+<sl-input placeholder="Medium" size="medium">
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
+</sl-input>
 <br />
-<wa-input placeholder="Large" size="large">
-  <wa-icon name="house" slot="prefix"></wa-icon>
-  <wa-icon name="chat" slot="suffix"></wa-icon>
-</wa-input>
+<sl-input placeholder="Large" size="large">
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
+</sl-input>
 ```
 
 ```jsx:react
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
 const App = () => (
   <>
-    <WaInput placeholder="Small" size="small">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
-    </WaInput>
+    <SlInput placeholder="Small" size="small">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlInput>
     <br />
-    <WaInput placeholder="Medium" size="medium">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
-    </WaInput>
+    <SlInput placeholder="Medium" size="medium">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlInput>
     <br />
-    <WaInput placeholder="Large" size="large">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
-    </WaInput>
+    <SlInput placeholder="Large" size="large">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlInput>
   </>
 );
 ```
@@ -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
-<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>
+<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>
 
 <style>
   .label-on-left {
@@ -260,13 +260,13 @@ Use [CSS parts](#css-parts) to customize the way form controls are drawn. This e
   }
 
   .label-on-left + .label-on-left {
-    margin-top: var(--wa-space-m);
+    margin-top: var(--sl-spacing-medium);
   }
 
   .label-on-left::part(form-control) {
     display: grid;
     grid: auto / var(--label-width) 1fr;
-    gap: var(--wa-space-3xs) var(--gap-width);
+    gap: var(--sl-spacing-3x-small) var(--gap-width);
     align-items: center;
   }
 

docs/pages/components/layout.md

@@ -1,118 +0,0 @@
----
-meta:
-  title: Layout
-  description: Layouts offer an easy way to scaffold pages using minimal markup.
-layout: component
----
-
-The layout component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation.
-
-A number of sections are available as part of the layout, most of which are optional. Content is added by [slotting elements](/getting-started/usage/#slots) into various locations.
-
-This component _does not_ implement any [content sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning) or "semantic elements" internally (such as `<main>`, `<header>`, `<footer>`, etc.). Instead, it is recommended that you slot in content sectioning elements wherever you feel they're appropriate.
-
-## Layout Anatomy
-
-This image depicts the layout's anatomy, including the default positions of each section. The labels represent the [named slots](#slots) you can use to populate them.
-
-Most slots are optional. Slots that have no content will not be shown, allowing you to opt-in to just the sections of the layout you actually need.
-
-[![Screenshot of Layout Anatomy showing various slots](/assets/images/layout.png)](/assets/images/layout.png)
-
-:::tip
-If you're not familiar with how slots work in HTML, you might want to [learn more about slots](/getting-started/usage/#slots) before using this component.
-:::
-
-## Sticky Sections
-
-The following sections of the layout are "sticky" by default, meaning they remain in position as the user scrolls.
-
-- `banner`
-- `header`
-- `sub-header`
-- `aside`
-- `menu`
-
-This is often desirable, but you can change this behavior using the `disable-sticky` attribute. Use a space-delimited list of names to tell the layout which sections should not be sticky.
-
-```html
-<wa-layout disable-sticky="header aside"> ... </wa-layout>
-```
-
-## How to Apply Spacing to Your Layout
-
-The layout component _does not_ apply spacing for you. You can apply the appropriate paddings or margins directly to the elements you slot in to fine tune your spacing needs.
-
-TODO - add example here
-
-When using `<wa-layout>`, make sure to zero out all paddings and margins on `<html>` and `<body>`, otherwise you may see unexpected gaps. The following styles are highly recommended when using `<wa-layout>`.
-
-```css
-html,
-body {
-  min-height: 100%;
-  padding: 0;
-  margin: 0;
-}
-```
-
-## Skip To Content
-
-The layout provides a "skip to content" link that's visually hidden until the user tabs into it. You don't have to do anything to configure this, unless you want to change the text displayed in the link. In that case, you can slot in your own text using the `skip-to-content` slot.
-
-This example localizes the "skip to content" link for German users.
-
-```html
-<wa-layout>
-  ...
-  <span slot="skip-to-content">Zum Inhalt springen</span>
-  ...
-</wa-layout>
-```
-
-## Responsiveness
-
-The layout component tries not to have too many opinions in terms of responsive behaviors — you get to decide with your own CSS and media queries how your content responds! However, the navigation menu _does_ respond by collapsing on smaller screens. The breakpoint at which this occurs is 768px by default, but you can change it using the `mobile-breakpoint` attribute.
-
-```html
-<wa-layout mobile-breakpoint="600"> ... </wa-layout>
-```
-
-You can provide a button to toggle the navigation menu anywhere inside the layout by adding the `data-toggle-nav` attribute. (This _does not_ have to be a Web Awesome button.)
-
-```html
-<wa-layout mobile-breakpoint="600">
-  ...
-  <wa-button data-toggle-nav>Menu</wa-button>
-  ...
-</wa-layout>
-```
-
-Alternatively, you can apply `nav-state="open"` and `nav-state="closed"` to the layout component to show and hide the navigation, respectively.
-
-```html
-<wa-layout nav-state="open"> ... </wa-layout>
-```
-
-## Providing Navigation Items
-
-- TODO - example with navigation items
-- TODO - example with`<h2>` and `<a>` as navigation items
-
-## Examples
-
-### Hero Layout
-
-- TODO - Sticky header + main + footer
-
-### Blog Layout
-
-- TODO - Sticky header + main + aside + footer (blog)
-
-### App Layout
-
-- TODO - Menu + main, plus maybe headers and footers in each (app)
-
-### Docs Layout
-
-- TODO - Menu + main + aside + footer (docs)

docs/pages/components/menu-item.md

@@ -6,53 +6,53 @@ layout: component
 ---
 
 ```html:preview
-<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>
+<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>
     Prefix Icon
-    <wa-icon slot="prefix" name="gift"></wa-icon>
-  </wa-menu-item>
-  <wa-menu-item>
+    <sl-icon slot="prefix" name="gift"></sl-icon>
+  </sl-menu-item>
+  <sl-menu-item>
     Suffix Icon
-    <wa-icon slot="suffix" name="heart"></wa-icon>
-  </wa-menu-item>
-</wa-menu>
+    <sl-icon slot="suffix" name="heart"></sl-icon>
+  </sl-menu-item>
+</sl-menu>
 ```
 
 {% raw %}
 
 ```jsx:react
-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';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <WaMenu style={{ maxWidth: '200px' }}>
-    <WaMenuItem>Option 1</WaMenuItem>
-    <WaMenuItem>Option 2</WaMenuItem>
-    <WaMenuItem>Option 3</WaMenuItem>
-    <WaDivider />
-    <WaMenuItem type="checkbox" checked>
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem>Option 1</SlMenuItem>
+    <SlMenuItem>Option 2</SlMenuItem>
+    <SlMenuItem>Option 3</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem type="checkbox" checked>
       Checkbox
-    </WaMenuItem>
-    <WaMenuItem disabled>Disabled</WaMenuItem>
-    <WaDivider />
-    <WaMenuItem>
+    </SlMenuItem>
+    <SlMenuItem disabled>Disabled</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem>
       Prefix Icon
-      <WaIcon slot="prefix" name="gift" />
-    </WaMenuItem>
-    <WaMenuItem>
+      <SlIcon slot="prefix" name="gift" />
+    </SlMenuItem>
+    <SlMenuItem>
       Suffix Icon
-      <WaIcon slot="suffix" name="heart" />
-    </WaMenuItem>
-  </WaMenu>
+      <SlIcon slot="suffix" name="heart" />
+    </SlMenuItem>
+  </SlMenu>
 );
 ```
 
@@ -65,25 +65,25 @@ const App = () => (
 Add the `disabled` attribute to disable the menu item so it cannot be selected.
 
 ```html:preview
-<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>
+<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>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
-import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <WaMenu style={{ maxWidth: '200px' }}>
-    <WaMenuItem>Option 1</WaMenuItem>
-    <WaMenuItem disabled>Option 2</WaMenuItem>
-    <WaMenuItem>Option 3</WaMenuItem>
-  </WaMenu>
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem>Option 1</SlMenuItem>
+    <SlMenuItem disabled>Option 2</SlMenuItem>
+    <SlMenuItem>Option 3</SlMenuItem>
+  </SlMenu>
 );
 ```
 
@@ -94,58 +94,58 @@ const App = () => (
 Add content to the start and end of menu items using the `prefix` and `suffix` slots.
 
 ```html:preview
-<wa-menu style="max-width: 200px;">
-  <wa-menu-item>
-    <wa-icon slot="prefix" name="house"></wa-icon>
+<sl-menu style="max-width: 200px;">
+  <sl-menu-item>
+    <sl-icon slot="prefix" name="house"></sl-icon>
     Home
-  </wa-menu-item>
+  </sl-menu-item>
 
-  <wa-menu-item>
-    <wa-icon slot="prefix" name="envelope"></wa-icon>
+  <sl-menu-item>
+    <sl-icon slot="prefix" name="envelope"></sl-icon>
     Messages
-    <wa-badge slot="suffix" variant="brand" pill>12</wa-badge>
-  </wa-menu-item>
+    <sl-badge slot="suffix" variant="primary" pill>12</sl-badge>
+  </sl-menu-item>
 
-  <wa-divider></wa-divider>
+  <sl-divider></sl-divider>
 
-  <wa-menu-item>
-    <wa-icon slot="prefix" name="gear"></wa-icon>
+  <sl-menu-item>
+    <sl-icon slot="prefix" name="gear"></sl-icon>
     Settings
-  </wa-menu-item>
-</wa-menu>
+  </sl-menu-item>
+</sl-menu>
 ```
 
 {% raw %}
 
 ```jsx:react
-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';
+import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <WaMenu style={{ maxWidth: '200px' }}>
-    <WaMenuItem>
-      <WaIcon slot="prefix" name="house" />
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem>
+      <SlIcon slot="prefix" name="house" />
       Home
-    </WaMenuItem>
+    </SlMenuItem>
 
-    <WaMenuItem>
-      <WaIcon slot="prefix" name="envelope" />
+    <SlMenuItem>
+      <SlIcon slot="prefix" name="envelope" />
       Messages
-      <WaBadge slot="suffix" variant="brand" pill>
+      <SlBadge slot="suffix" variant="primary" pill>
         12
-      </WaBadge>
-    </WaMenuItem>
+      </SlBadge>
+    </SlMenuItem>
 
-    <WaDivider />
+    <SlDivider />
 
-    <WaMenuItem>
-      <WaIcon slot="prefix" name="gear" />
+    <SlMenuItem>
+      <SlIcon slot="prefix" name="gear" />
       Settings
-    </WaMenuItem>
-  </WaMenu>
+    </SlMenuItem>
+  </SlMenu>
 );
 ```
 
@@ -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
-<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>
+<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>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
-import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <WaMenu style={{ maxWidth: '200px' }}>
-    <WaMenuItem type="checkbox">Autosave</WaMenuItem>
-    <WaMenuItem type="checkbox" checked>
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem type="checkbox">Autosave</SlMenuItem>
+    <SlMenuItem type="checkbox" checked>
       Check Spelling
-    </WaMenuItem>
-    <WaMenuItem type="checkbox">Word Wrap</WaMenuItem>
-  </WaMenu>
+    </SlMenuItem>
+    <SlMenuItem type="checkbox">Word Wrap</SlMenuItem>
+  </SlMenu>
 );
 ```
 
@@ -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 `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.
+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.
 
 ```html:preview
-<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>
+<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>
 
 <script>
   const menu = document.querySelector('.menu-value');
 
-  menu.addEventListener('wa-select', event => {
+  menu.addEventListener('sl-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 WaMenu from '@shoelace-style/shoelace/dist/react/menu';
-import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => {
   function handleSelect(event) {
@@ -233,11 +233,11 @@ const App = () => {
   }
 
   return (
-    <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>
+    <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>
   );
 };
 ```

docs/pages/components/menu-label.md

@@ -6,39 +6,39 @@ layout: component
 ---
 
 ```html:preview
-<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>
+<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>
 ```
 
 {% raw %}
 
 ```jsx:react
-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';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 

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
-<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>
+<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>
 ```
 
 {% raw %}
 
 ```jsx:react
-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';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -44,112 +44,3 @@ const App = () => (
 :::tip
 Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you're building navigation, use `<nav>` and `<a>` elements instead.
 :::
-
-## Examples
-
-### In Dropdowns
-
-Menus work really well when used inside [dropdowns](/components/dropdown).
-
-```html:preview
-<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 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 = () => (
-  <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 `<wa-menu slot="submenu">` in any [menu item](/components/menu-item).
-
-```html:preview
-<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
-    <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
-    <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 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 = () => (
-  <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
-      <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
-      <WaMenu slot="submenu">
-        <WaMenuItem value="uppercase">Make uppercase</WaMenuItem>
-        <WaMenuItem value="lowercase">Make lowercase</WaMenuItem>
-        <WaMenuItem value="capitalize">Capitalize</WaMenuItem>
-      </WaMenu>
-    </WaMenuItem>
-  </WaMenu>
-);
-```
-
-:::warning
-As a UX best practice, avoid using more than one level of submenus when possible.
-:::
-
-{% endraw %}

docs/pages/components/mutation-observer.md

@@ -5,22 +5,22 @@ meta:
 layout: component
 ---
 
-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.
+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.
 
 ```html:preview
 <div class="mutation-overview">
-  <wa-mutation-observer attr="variant">
-    <wa-button variant="brand">Click to mutate</wa-button>
-  </wa-mutation-observer>
+  <sl-mutation-observer attr="variant">
+    <sl-button variant="primary">Click to mutate</sl-button>
+  </sl-mutation-observer>
 
   <br />
   👆 Click the button and watch the console
 
   <script>
     const container = document.querySelector('.mutation-overview');
-    const mutationObserver = container.querySelector('wa-mutation-observer');
-    const button = container.querySelector('wa-button');
-    const variants = ['brand', 'success', 'neutral', 'warning', 'danger'];
+    const mutationObserver = container.querySelector('sl-mutation-observer');
+    const button = container.querySelector('sl-button');
+    const variants = ['primary', 'success', 'neutral', 'warning', 'danger'];
     let clicks = 0;
 
     // Change the button's variant attribute
@@ -30,13 +30,13 @@ The mutation observer will report changes to the content it wraps through the `w
     });
 
     // Log mutations
-    mutationObserver.addEventListener('wa-mutation', event => {
+    mutationObserver.addEventListener('sl-mutation', event => {
       console.log(event.detail);
     });
   </script>
 
   <style>
-    .mutation-overview wa-button {
+    .mutation-overview sl-button {
       margin-bottom: 1rem;
     }
   </style>
@@ -45,20 +45,25 @@ The mutation observer will report changes to the content it wraps through the `w
 
 ```jsx:react
 import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlMutationObserver from '@shoelace-style/shoelace/dist/react/sl-mutation-observer';
 
 const css = `
-  .mutation-overview wa-button {
-    margin-bottom: 1rem;
+  .resize-observer-overview div {
+    display: flex;
+    border: solid 2px var(--sl-input-border-color);
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 4rem 2rem;
   }
 `;
 
-const variants = ['brand', 'success', 'neutral', 'warning', 'danger'];
+const variants = ['primary', 'success', 'neutral', 'warning', 'danger'];
 let clicks = 0;
 
 const App = () => {
-  const [variant, setVariant] = useState('brand');
+  const [variant, setVariant] = useState('primary');
 
   function handleClick() {
     clicks++;
@@ -67,14 +72,11 @@ const App = () => {
 
   return (
     <>
-      <WaMutationObserver attr="*" onWaMutation={event => console.log(event.detail)}>
-        <WaButton variant={variant} onClick={handleClick}>
+      <SlMutationObserver attr="*" onSlMutation={event => console.log(event.detail)}>
+        <SlButton variant={variant} onClick={handleClick}>
           Click to mutate
-        </WaButton>
-      </WaMutationObserver>
-
-    <br />
-    👆 Click the button and watch the console
+        </SlButton>
+      </SlMutationObserver>
 
       <style>{css}</style>
     </>
@@ -94,31 +96,31 @@ Use the `child-list` attribute to watch for new child elements that are added or
 
 ```html:preview
 <div class="mutation-child-list">
-  <wa-mutation-observer child-list>
+  <sl-mutation-observer child-list>
     <div class="buttons">
-      <wa-button variant="brand">Add button</wa-button>
+      <sl-button variant="primary">Add button</sl-button>
     </div>
-  </wa-mutation-observer>
+  </sl-mutation-observer>
 
   👆 Add and remove buttons and watch the console
 
   <script>
     const container = document.querySelector('.mutation-child-list');
-    const mutationObserver = container.querySelector('wa-mutation-observer');
+    const mutationObserver = container.querySelector('sl-mutation-observer');
     const buttons = container.querySelector('.buttons');
-    const button = container.querySelector('wa-button[variant="brand"]');
+    const button = container.querySelector('sl-button[variant="primary"]');
     let i = 0;
 
     // Add a button
     button.addEventListener('click', () => {
-      const button = document.createElement('wa-button');
+      const button = document.createElement('sl-button');
       button.textContent = ++i;
       buttons.append(button);
     });
 
     // Remove a button
     buttons.addEventListener('click', event => {
-      const target = event.target.closest('wa-button:not([variant="brand"])');
+      const target = event.target.closest('sl-button:not([variant="primary"])');
       event.stopPropagation();
 
       if (target) {
@@ -127,7 +129,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
     });
 
     // Log mutations
-    mutationObserver.addEventListener('wa-mutation', event => {
+    mutationObserver.addEventListener('sl-mutation', event => {
       console.log(event.detail);
     });
   </script>
@@ -145,8 +147,8 @@ Use the `child-list` attribute to watch for new child elements that are added or
 
 ```jsx:react
 import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlMutationObserver from '@shoelace-style/shoelace/dist/react/sl-mutation-observer';
 
 const css = `
   .mutation-child-list .buttons {
@@ -173,18 +175,18 @@ const App = () => {
   return (
     <>
       <div className="mutation-child-list">
-        <WaMutationObserver child-list onWaMutation={event => console.log(event.detail)}>
+        <SlMutationObserver child-list onSlMutation={event => console.log(event.detail)}>
           <div className="buttons">
-            <WaButton variant="brand" onClick={addButton}>
+            <SlButton variant="primary" onClick={addButton}>
               Add button
-            </WaButton>
+            </SlButton>
             {buttonIds.map(id => (
-              <WaButton key={id} variant="default" onClick={() => removeButton(id)}>
+              <SlButton key={id} variant="default" onClick={() => removeButton(id)}>
                 {id}
-              </WaButton>
+              </SlButton>
             ))}
           </div>
-        </WaMutationObserver>
+        </SlMutationObserver>
       </div>
       👆 Add and remove buttons and watch the console
       <style>{css}</style>

docs/pages/components/nav-group.md

@@ -1,89 +0,0 @@
----
-meta:
-  title: Nav Group
-  description:
-layout: component
----
-
-```html:preview
-<wa-nav-group
-  style="
-    --gap: var(--wa-space-2xl);
-    border: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-surface-outline);
-    border-radius: var(--wa-panel-corners);
-    padding: var(--wa-space-square-m);
-  "
->
-  <wa-nav-group>
-    <wa-nav-item href="#">
-      <wa-icon name="search" slot="prefix"></wa-icon>
-      Search
-    </wa-nav-item>
-
-    <wa-nav-item href="#">
-      <wa-icon name="bell" slot="prefix"></wa-icon>
-      Notifications
-    </wa-nav-item>
-  </wa-nav-group>
-
-  <wa-nav-group label="Workspace">
-    <wa-nav-item expandable>
-      <div slot="label" style="display: flex; align-items: center; gap: 8px;">
-        <wa-icon name="credit-card"></wa-icon>
-        Payments
-      </div>
-
-      <wa-nav-item href="#" current="page">
-        Transactions
-      </wa-nav-item>
-
-      <wa-nav-item href="#">
-        Invoices
-      </wa-nav-item>
-
-      <wa-nav-item href="#">
-        Disputed Charges
-      </wa-nav-item>
-    </wa-nav-item>
-  </wa-nav-group>
-
-  <wa-nav-group label="Reports">
-    <wa-nav-item href="#">
-      Sales
-    </wa-nav-item>
-
-    <wa-nav-item href="#">
-      Expenses
-    </wa-nav-item>
-
-    <wa-nav-item href="#">
-      Payroll
-    </wa-nav-item>
-  </wa-nav-group>
-
-  <wa-nav-item href="#">
-    <wa-icon name="question-circle" slot="prefix"></wa-icon>
-    Help
-  </wa-nav-item>
-</wa-nav-group>
-```
-
-## Examples
-
-### Nav Group with label
-
-```html:preview
-<wa-nav-group label="Workspace">
-  <wa-nav-item href="#" current="page">
-    Transactions
-  </wa-nav-item>
-
-  <wa-nav-item href="#">
-    Invoices
-  </wa-nav-item>
-
-  <wa-nav-item href="#">
-    Disputed Charges
-  </wa-nav-item>
-</wa-nav-group>
-```

docs/pages/components/nav-item.md

@@ -1,232 +0,0 @@
----
-meta:
-  title: Nav Item
-  description: |
-    A nav item is intended to be used in a navigation area such as within a nav element in a sidebar or inside of a drawer. A nav item is meant to drive page level navigations.
-layout: component
----
-
-`wa-nav-item` maps to a `role="listitem"` under the hood and should generally be used as part
-of a `<wa-nav-group>` for accessibility purposes.
-
-```html:preview
-<wa-nav-group>
-  <wa-nav-item href="#">
-    <wa-icon name="search" slot="prefix"></wa-icon>
-    Search
-  </wa-nav-item>
-
-  <wa-nav-item href="#">
-    <wa-icon name="bell" slot="prefix"></wa-icon>
-    Notifications
-  </wa-nav-item>
-
-  <wa-divider></wa-divider>
-
-  <wa-nav-item href="#" current="page">
-    <wa-icon name="house-door" slot="prefix"></wa-icon>
-    Home
-  </wa-nav-item>
-
-  <wa-nav-item href="#">
-    <wa-icon name="music-note-list" slot="prefix"></wa-icon>
-    Playlists
-  </wa-nav-item>
-
-  <wa-nav-item href="#">
-    <wa-icon name="file-earmark-music" slot="prefix"></wa-icon>
-    Tracks
-  </wa-nav-item>
-
-  <wa-nav-item href="#">
-    <wa-icon name="gear" slot="prefix"></wa-icon>
-    Settings
-  </wa-nav-item>
-
-  <wa-nav-item href="#">
-    <wa-icon name="question-circle" slot="prefix"></wa-icon>
-    Help
-  </wa-nav-item>
-</wa-nav-group>
-```
-
-{% raw %}
-
-```jsx:react
-import WaNavGroup from '@shoelace-style/shoelace/dist/react/nav-group';
-import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
-import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-<WaNavGroup>
-  <WaNavItem href="#">
-    <WaIcon name="search" slot="prefix" />
-    Search
-  </WaNavItem>
-
-  <WaNavItem href="#">
-    <WaIcon name="bell" slot="prefix" />
-    Notifications
-  </WaNavItem>
-
-  <WaDivider></WaDivider>
-
-  <WaNavItem href="#" current="page">
-    <WaIcon name="house-door" slot="prefix" />
-    Home
-  </WaNavItem>
-
-  <WaNavItem href="#">
-    <WaIcon name="music-note-list" slot="prefix" />
-    Playlists
-  </WaNavItem>
-
-  <WaNavItem href="#">
-    <WaIcon name="file-earmark-music" slot="prefix" />
-    Tracks
-  </WaNavItem>
-
-  <WaNavItem href="#">
-    <WaIcon name="gear" slot="prefix" />
-    Settings
-  </WaNavItem>
-
-  <WaNavItem href="#">
-    <WaIcon name="question-circle" slot="prefix" />
-    Help
-  </WaNavItem>
-</WaNavGroup>
-```
-
-{% endraw %}
-
-## Examples
-
-### Active nav item
-
-Set a `<wa-nav-item>` to active using the `current` string attribute. Doing so will map to `aria-current="<string>"` under the hood. If your nav-items are intended for full page navigations, it is recommended to use `current="page"`. If your nav-items are, for example, just the active item within a list, but do not perform full page navigation (such as with table of contents) then use `current="true"`.
-
-```html:preview
-<wa-nav-item href="#" current="page">
-  Active Nav Item
-</wa-nav-item>
-```
-
-{% raw %}
-
-```jsx:react
-import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
-
-export default () => {
-  return (
-    <WaNavItem href="#" current="page">
-      Active Nav Item
-    </WaNavItem>
-  )
-}
-```
-
-{% endraw %}
-
-### Icon only
-
-```html:preview
-<wa-nav-item href="#">
-  <wa-icon name="house-door" label="Home"></wa-icon>
-</wa-nav-item>
-```
-
-{% raw %}
-
-```jsx:react
-import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-export default () => {
-  return (
-    <WaNavItem href="#">
-      <WaIcon name="house-door" label="Home" />
-    </WaNavItem>
-  )
-}
-```
-
-{% endraw %}
-
-### Nav items with prefix + suffix
-
-```html:preview
-<wa-nav-item href="#">
-  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
-  Nav Item
-  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
-</wa-nav-item>
-```
-
-{% raw %}
-
-```jsx:react
-import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-export default () => {
-  return (
-    <WaNavItem href="#">
-      <WaIcon slot="prefix" name="link-45deg" />
-      Nav Item
-      <WaIcon slot="suffix" name="box-arrow-up-right" />
-    </WaNavItem>
-  )
-}
-```
-
-{% endraw %}
-
-### Nav group with nested nav items
-
-Use the `expandable` attribute to mark a nav item as expandable. In addition,
-you can add a `label` slot or attribute to display in the `<wa-details>` element prior
-to expanding the nav group.
-
-```html:preview
-<wa-nav-item expandable>
-  <div slot="label" style="display: flex; align-items: center; gap: 8px;">
-    <wa-icon name="credit-card"></wa-icon>
-    Payments
-  </div>
-
-  <wa-nav-item href="#" current="page">
-    Transactions
-  </wa-nav-item>
-
-  <wa-nav-item href="#">
-    Invoices
-  </wa-nav-item>
-
-  <wa-nav-item href="#">
-    Disputed Charges
-  </wa-nav-item>
-</wa-nav-group>
-```
-
-{% raw %}
-
-```jsx:react
-import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
-
-<WaNavItem expandable label="Payments">
-  <WaNavItem href="#" current="page">
-    Transactions
-  </WaNavItem>
-
-  <WaNavItem href="#">
-    Invoices
-  </WaNavItem>
-
-  <WaNavItem href="#">
-    Disputed Charges
-  </WaNavItem>
-</WaNavGroup>
-```
-
-{% endraw %}

docs/pages/components/option.md

@@ -6,23 +6,23 @@ layout: component
 ---
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <WaSelect>
-    <WaOption value="option-1">Option 1</WaOption>
-    <WaOption value="option-2">Option 2</WaOption>
-    <WaOption value="option-3">Option 3</WaOption>
-  </WaSelect>
+  <SlSelect>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
 );
 ```
 
@@ -33,25 +33,25 @@ const App = () => (
 Use the `disabled` attribute to disable an option and prevent it from being selected.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <WaSelect>
-    <WaOption value="option-1">Option 1</WaOption>
-    <WaOption value="option-2" disabled>
+  <SlSelect>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2" disabled>
       Option 2
-    </WaOption>
-    <WaOption value="option-3">Option 3</WaOption>
-  </WaSelect>
+    </SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
 );
 ```
 
@@ -60,23 +60,23 @@ const App = () => (
 Add icons to the start and end of menu items using the `prefix` and `suffix` slots.
 
 ```html:preview
-<wa-select label="Select one">
-  <wa-option value="option-1">
-    <wa-icon slot="prefix" name="envelope"></wa-icon>
+<sl-select label="Select one">
+  <sl-option value="option-1">
+    <sl-icon slot="prefix" name="envelope"></sl-icon>
     Email
-    <wa-icon slot="suffix" name="patch-check"></wa-icon>
-  </wa-option>
+    <sl-icon slot="suffix" name="patch-check"></sl-icon>
+  </sl-option>
 
-  <wa-option value="option-2">
-    <wa-icon slot="prefix" name="telephone"></wa-icon>
+  <sl-option value="option-2">
+    <sl-icon slot="prefix" name="telephone"></sl-icon>
     Phone
-    <wa-icon slot="suffix" name="patch-check"></wa-icon>
-  </wa-option>
+    <sl-icon slot="suffix" name="patch-check"></sl-icon>
+  </sl-option>
 
-  <wa-option value="option-3">
-    <wa-icon slot="prefix" name="chat-dots"></wa-icon>
+  <sl-option value="option-3">
+    <sl-icon slot="prefix" name="chat-dots"></sl-icon>
     Chat
-    <wa-icon slot="suffix" name="patch-check"></wa-icon>
-  </wa-option>
-</wa-select>
+    <sl-icon slot="suffix" name="patch-check"></sl-icon>
+  </sl-option>
+</sl-select>
 ```

docs/pages/components/progress-bar.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-progress-bar value="50"></wa-progress-bar>
+<sl-progress-bar value="50"></sl-progress-bar>
 ```
 
 ```jsx:react
-import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
 
-const App = () => <WaProgressBar value={50} />;
+const App = () => <SlProgressBar value={50} />;
 ```
 
 ## Examples
@@ -22,13 +22,13 @@ const App = () => <WaProgressBar value={50} />;
 Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
 
 ```html:preview
-<wa-progress-bar value="50" label="Upload progress"></wa-progress-bar>
+<sl-progress-bar value="50" label="Upload progress"></sl-progress-bar>
 ```
 
 ```jsx:react
-import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
 
-const App = () => <WaProgressBar value="50" label="Upload progress" />;
+const App = () => <SlProgressBar value="50" label="Upload progress" />;
 ```
 
 ### Custom Height
@@ -36,15 +36,15 @@ const App = () => <WaProgressBar value="50" label="Upload progress" />;
 Use the `--height` custom property to set the progress bar's height.
 
 ```html:preview
-<wa-progress-bar value="50" style="--height: 6px;"></wa-progress-bar>
+<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
 
-const App = () => <WaProgressBar value={50} style={{ '--height': '6px' }} />;
+const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
 ```
 
 {% endraw %}
@@ -54,12 +54,12 @@ const App = () => <WaProgressBar value={50} style={{ '--height': '6px' }} />;
 Use the default slot to show a value.
 
 ```html:preview
-<wa-progress-bar value="50" class="progress-bar-values">50%</wa-progress-bar>
+<sl-progress-bar value="50" class="progress-bar-values">50%</sl-progress-bar>
 
 <br />
 
-<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>
+<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>
 
 <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 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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
 
 const App = () => {
   const [value, setValue] = useState(50);
@@ -98,17 +98,17 @@ const App = () => {
 
   return (
     <>
-      <WaProgressBar value={value}>{value}%</WaProgressBar>
+      <SlProgressBar value={value}>{value}%</SlProgressBar>
 
       <br />
 
-      <WaButton circle onClick={() => adjustValue(-10)}>
-        <WaIcon name="dash" label="Decrease" />
-      </WaButton>
+      <SlButton circle onClick={() => adjustValue(-10)}>
+        <SlIcon name="dash" label="Decrease" />
+      </SlButton>
 
-      <WaButton circle onClick={() => adjustValue(10)}>
-        <WaIcon name="plus" label="Increase" />
-      </WaButton>
+      <SlButton circle onClick={() => adjustValue(10)}>
+        <SlIcon name="plus" label="Increase" />
+      </SlButton>
     </>
   );
 };
@@ -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
-<wa-progress-bar indeterminate></wa-progress-bar>
+<sl-progress-bar indeterminate></sl-progress-bar>
 ```
 
 ```jsx:react
-import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
 
-const App = () => <WaProgressBar indeterminate />;
+const App = () => <SlProgressBar indeterminate />;
 ```

docs/pages/components/progress-ring.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-progress-ring value="25"></wa-progress-ring>
+<sl-progress-ring value="25"></sl-progress-ring>
 ```
 
 ```jsx:react
-import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
 
-const App = () => <WaProgressRing value="25" />;
+const App = () => <SlProgressRing value="25" />;
 ```
 
 ## Examples
@@ -22,15 +22,15 @@ const App = () => <WaProgressRing value="25" />;
 Use the `--size` custom property to set the diameter of the progress ring.
 
 ```html:preview
-<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
+<sl-progress-ring value="50" style="--size: 200px;"></sl-progress-ring>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
 
-const App = () => <WaProgressRing value="50" style={{ '--size': '200px' }} />;
+const App = () => <SlProgressRing value="50" style={{ '--size': '200px' }} />;
 ```
 
 {% endraw %}
@@ -40,15 +40,15 @@ const App = () => <WaProgressRing 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
-<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></wa-progress-ring>
+<sl-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></sl-progress-ring>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
 
-const App = () => <WaProgressRing value="50" style={{ '--track-width': '6px', '--indicator-width': '12px' }} />;
+const App = () => <SlProgressRing value="50" style={{ '--track-width': '6px', '--indicator-width': '12px' }} />;
 ```
 
 {% endraw %}
@@ -58,22 +58,22 @@ const App = () => <WaProgressRing value="50" style={{ '--track-width': '6px', '-
 To change the color, use the `--track-color` and `--indicator-color` custom properties.
 
 ```html:preview
-<wa-progress-ring
+<sl-progress-ring
   value="50"
   style="
     --track-color: pink;
     --indicator-color: deeppink;
   "
-></wa-progress-ring>
+></sl-progress-ring>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
 
 const App = () => (
-  <WaProgressRing
+  <SlProgressRing
     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
-<wa-progress-ring value="50" label="Upload progress"></wa-progress-ring>
+<sl-progress-ring value="50" label="Upload progress"></sl-progress-ring>
 ```
 
 ```jsx:react
-import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
 
-const App = () => <WaProgressRing value="50" label="Upload progress" />;
+const App = () => <SlProgressRing value="50" label="Upload progress" />;
 ```
 
 ### Showing Values
@@ -104,12 +104,12 @@ const App = () => <WaProgressRing value="50" label="Upload progress" />;
 Use the default slot to show a label inside the progress ring.
 
 ```html:preview
-<wa-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</wa-progress-ring>
+<sl-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</sl-progress-ring>
 
 <br />
 
-<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>
+<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>
 
 <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 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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
 
 const App = () => {
   const [value, setValue] = useState(50);
@@ -150,19 +150,19 @@ const App = () => {
 
   return (
     <>
-      <WaProgressRing value={value} style={{ marginBottom: '.5rem' }}>
+      <SlProgressRing value={value} style={{ marginBottom: '.5rem' }}>
         {value}%
-      </WaProgressRing>
+      </SlProgressRing>
 
       <br />
 
-      <WaButton circle onClick={() => adjustValue(-10)}>
-        <WaIcon name="dash" label="Decrease" />
-      </WaButton>
+      <SlButton circle onClick={() => adjustValue(-10)}>
+        <SlIcon name="dash" label="Decrease" />
+      </SlButton>
 
-      <WaButton circle onClick={() => adjustValue(10)}>
-        <WaIcon name="plus" label="Increase" />
-      </WaButton>
+      <SlButton circle onClick={() => adjustValue(10)}>
+        <SlIcon name="plus" label="Increase" />
+      </SlButton>
     </>
   );
 };

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">
-  <wa-qr-code value="https://shoelace.style/" label="Scan this code to visit Web Awesome on the web!"></wa-qr-code>
+  <sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"></sl-qr-code>
   <br />
 
-  <wa-input maxlength="255" clearable label="Value"></wa-input>
+  <sl-input maxlength="255" clearable label="Value"></sl-input>
 </div>
 
 <script>
   const container = document.querySelector('.qr-overview');
-  const qrCode = container.querySelector('wa-qr-code');
-  const input = container.querySelector('wa-input');
+  const qrCode = container.querySelector('sl-qr-code');
+  const input = container.querySelector('sl-input');
 
-  customElements.whenDefined('wa-qr-code').then(() => {
+  customElements.whenDefined('sl-qr-code').then(() => {
     input.value = qrCode.value;
-    input.addEventListener('wa-input', () => (qrCode.value = input.value));
+    input.addEventListener('sl-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 wa-input {
+  .qr-overview sl-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 WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
+import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
+import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
 
 const css = `
   .qr-overview {
     max-width: 256px;
   }
 
-  .qr-overview wa-input {
+  .qr-overview sl-input {
     margin-top: 1rem;
   }
 `;
@@ -58,10 +58,10 @@ const App = () => {
   return (
     <>
       <div className="qr-overview">
-        <WaQrCode value={value} label="Scan this code to visit Web Awesome on the web!" />
+        <SlQrCode value={value} label="Scan this code to visit Shoelace on the web!" />
         <br />
 
-        <WaInput maxlength="255" clearable onInput={event => setValue(event.target.value)} />
+        <SlInput 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
-<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></wa-qr-code>
+<sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>
 ```
 
 ```jsx:react
-import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
 
-const App = () => <WaQrCode value="https://shoelace.style/" fill="deeppink" background="white" />;
+const App = () => <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />;
 ```
 
 ### Size
@@ -91,13 +91,13 @@ const App = () => <WaQrCode value="https://shoelace.style/" fill="deeppink" back
 Use the `size` attribute to change the size of the QR code.
 
 ```html:preview
-<wa-qr-code value="https://shoelace.style/" size="64"></wa-qr-code>
+<sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>
 ```
 
 ```jsx:react
-import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
 
-const App = () => <WaQrCode value="https://shoelace.style/" size="64" />;
+const App = () => <SlQrCode value="https://shoelace.style/" size="64" />;
 ```
 
 ### Radius
@@ -105,13 +105,13 @@ const App = () => <WaQrCode value="https://shoelace.style/" size="64" />;
 Create a rounded effect with the `radius` attribute.
 
 ```html:preview
-<wa-qr-code value="https://shoelace.style/" radius="0.5"></wa-qr-code>
+<sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>
 ```
 
 ```jsx:react
-import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
 
-const App = () => <WaQrCode value="https://shoelace.style/" radius="0.5" />;
+const App = () => <SlQrCode 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">
-  <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>
+  <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>
 </div>
 
 <style>
@@ -136,7 +136,7 @@ QR codes can be rendered with various levels of [error correction](https://www.q
 ```
 
 ```jsx:react
-import WaQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
 
 const css = `
   .qr-error-correction {
@@ -150,10 +150,10 @@ const App = () => {
   return (
     <>
       <div className="qr-error-correction">
-        <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" />
+        <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" />
       </div>
 
       <style>{css}</style>

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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -60,25 +60,25 @@ const App = () => (
 Use the `disabled` attribute to disable a radio button.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton value="1">Option 1</WaRadioButton>
-    <WaRadioButton value="2" disabled>
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadioButton value="1">Option 1</SlRadioButton>
+    <SlRadioButton value="2" disabled>
       Option 2
-    </WaRadioButton>
-    <WaRadioButton value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
+    </SlRadioButton>
+    <SlRadioButton value="3">Option 3</SlRadioButton>
+  </SlRadioGroup>
 );
 ```
 
@@ -87,55 +87,55 @@ const App = () => (
 Use the `size` attribute to change a radio button's size.
 
 ```html:preview
-<wa-radio-group size="small" 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>
+<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>
 
 <br />
 
-<wa-radio-group size="medium" 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>
+<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>
 
 <br />
 
-<wa-radio-group size="large" 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>
+<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>
 ```
 
 ```jsx:react
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <WaRadioGroup size="small" 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>
+  <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>
 
   <br />
 
-  <WaRadioGroup size="medium" 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>
+  <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>
 
   <br />
 
-  <WaRadioGroup size="large" 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>
+  <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>
 );
 ```
 
@@ -144,55 +144,55 @@ const App = () => (
 Use the `pill` attribute to give radio buttons rounded edges.
 
 ```html:preview
-<wa-radio-group size="small" label="Select an option" name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
+<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>
 
 <br />
 
-<wa-radio-group size="medium" label="Select an option" name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
+<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>
 
 <br />
 
-<wa-radio-group size="large" label="Select an option" name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
+<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>
 ```
 
 ```jsx:react
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <WaRadioGroup size="small" label="Select an option" name="a" value="1">
-    <WaRadioButton pill value="1">Option 1</WaRadioButton>
-    <WaRadioButton pill value="2">Option 2</WaRadioButton>
-    <WaRadioButton pill value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
+  <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>
 
   <br />
 
-  <WaRadioGroup size="medium" label="Select an option" name="a" value="1">
-    <WaRadioButton pill value="1">Option 1</WaRadioButton>
-    <WaRadioButton pill value="2">Option 2</WaRadioButton>
-    <WaRadioButton pill value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
+  <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>
 
   <br />
 
-  <WaRadioGroup size="large" label="Select an option" name="a" value="1">
-    <WaRadioButton pill value="1">Option 1</WaRadioButton>
-    <WaRadioButton pill value="2">Option 2</WaRadioButton>
-    <WaRadioButton pill value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
+  <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>
 );
 ```
 
@@ -201,48 +201,48 @@ const App = () => (
 Use the `prefix` and `suffix` slots to add icons.
 
 ```html:preview
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio-button value="1">
-    <wa-icon slot="prefix" name="archive"></wa-icon>
+<sl-radio-group label="Select an option" name="a" value="1">
+  <sl-radio-button value="1">
+    <sl-icon slot="prefix" name="archive"></sl-icon>
     Option 1
-  </wa-radio-button>
+  </sl-radio-button>
 
-  <wa-radio-button value="2">
-    <wa-icon slot="suffix" name="bag"></wa-icon>
+  <sl-radio-button value="2">
+    <sl-icon slot="suffix" name="bag"></sl-icon>
     Option 2
-  </wa-radio-button>
+  </sl-radio-button>
 
-  <wa-radio-button value="3">
-    <wa-icon slot="prefix" name="gift"></wa-icon>
-    <wa-icon slot="suffix" name="cart"></wa-icon>
+  <sl-radio-button value="3">
+    <sl-icon slot="prefix" name="gift"></sl-icon>
+    <sl-icon slot="suffix" name="cart"></sl-icon>
     Option 3
-  </wa-radio-button>
-</wa-radio-group>
+  </sl-radio-button>
+</sl-radio-group>
 ```
 
 ```jsx:react
-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';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton value="1">
-      <WaIcon slot="prefix" name="archive" />
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadioButton value="1">
+      <SlIcon slot="prefix" name="archive" />
       Option 1
-    </WaRadioButton>
+    </SlRadioButton>
 
-    <WaRadioButton value="2">
-      <WaIcon slot="suffix" name="bag" />
+    <SlRadioButton value="2">
+      <SlIcon slot="suffix" name="bag" />
       Option 2
-    </WaRadioButton>
+    </SlRadioButton>
 
-    <WaRadioButton value="3">
-      <WaIcon slot="prefix" name="gift" />
-      <WaIcon slot="suffix" name="cart" />
+    <SlRadioButton value="3">
+      <SlIcon slot="prefix" name="gift" />
+      <SlIcon slot="suffix" name="cart" />
       Option 3
-    </WaRadioButton>
-  </WaRadioGroup>
+    </SlRadioButton>
+  </SlRadioGroup>
 );
 ```
 
@@ -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
-<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-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-button value="sad">
-    <wa-icon name="emoji-frown" label="Sad"></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="neutral">
-    <wa-icon name="emoji-neutral" label="Neutral"></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="happy">
-    <wa-icon name="emoji-smile" label="Happy"></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="laughing">
-    <wa-icon name="emoji-laughing" label="Laughing"></wa-icon>
-  </wa-radio-button>
-</wa-radio-group>
+  <sl-radio-button value="laughing">
+    <sl-icon name="emoji-laughing" label="Laughing"></sl-icon>
+  </sl-radio-button>
+</sl-radio-group>
 ```
 
 ```jsx:react
-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';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="neutral">
-    <WaRadioButton value="angry">
-      <WaIcon name="emoji-angry" label="Angry" />
-    </WaRadioButton>
+  <SlRadioGroup label="Select an option" name="a" value="neutral">
+    <SlRadioButton value="angry">
+      <SlIcon name="emoji-angry" label="Angry" />
+    </SlRadioButton>
 
-    <WaRadioButton value="sad">
-      <WaIcon name="emoji-frown" label="Sad" />
-    </WaRadioButton>
+    <SlRadioButton value="sad">
+      <SlIcon name="emoji-frown" label="Sad" />
+    </SlRadioButton>
 
-    <WaRadioButton value="neutral">
-      <WaIcon name="emoji-neutral" label="Neutral" />
-    </WaRadioButton>
+    <SlRadioButton value="neutral">
+      <SlIcon name="emoji-neutral" label="Neutral" />
+    </SlRadioButton>
 
-    <WaRadioButton value="happy">
-      <WaIcon name="emoji-smile" label="Happy" />
-    </WaRadioButton>
+    <SlRadioButton value="happy">
+      <SlIcon name="emoji-smile" label="Happy" />
+    </SlRadioButton>
 
-    <WaRadioButton value="laughing">
-      <WaIcon name="emoji-laughing" label="Laughing" />
-    </WaRadioButton>
-  </WaRadioGroup>
+    <SlRadioButton value="laughing">
+      <SlIcon name="emoji-laughing" label="Laughing" />
+    </SlRadioButton>
+  </SlRadioGroup>
 );
 ```

docs/pages/components/radio-group.md

@@ -6,23 +6,23 @@ layout: component
 ---
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadio value="1">Option 1</WaRadio>
-    <WaRadio value="2" disabled>
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadio value="1">Option 1</SlRadio>
+    <SlRadio value="2" disabled>
       Option 2
-    </WaRadio>
-    <WaRadio value="3">Option 3</WaRadio>
-  </WaRadioGroup>
+    </SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
 );
 ```
 
@@ -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
-<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>
+<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>
 
 <script>
   const radioGroup = document.querySelector('.radio-group-size');
 
-  radioGroup.addEventListener('wa-change', () => {
+  radioGroup.addEventListener('sl-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 WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => {
   const [size, setSize] = useState('medium');
 
   return (
     <>
-      <WaRadioGroup
+      <SlRadioGroup
         label="Select an option"
         size={size}
         value={size}
         class="radio-group-size"
-        onWaChange={event => setSize(event.target.value)}
+        onSlChange={event => setSize(event.target.value)}
       >
-        <WaRadio value="small">Small</WaRadio>
-        <WaRadio value="medium">Medium</WaRadio>
-        <WaRadio value="large">Large</WaRadio>
-      </WaRadioGroup>
+        <SlRadio value="small">Small</SlRadio>
+        <SlRadio value="medium">Medium</SlRadio>
+        <SlRadio value="large">Large</SlRadio>
+      </SlRadioGroup>
     </>
   );
 };
@@ -161,13 +161,13 @@ Setting the `required` attribute to make selecting an option mandatory. If a val
 
 ```html:preview
 <form class="validation">
-  <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>
+  <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>
   <br />
-  <wa-button type="submit" variant="brand">Submit</wa-button>
+  <sl-button type="submit" variant="primary">Submit</sl-button>
 </form>
 
 <script>
@@ -182,10 +182,10 @@ Setting the `required` attribute to make selecting an option mandatory. If a val
 ```
 
 ```jsx:react
-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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 const App = () => {
   function handleSubmit(event) {
     event.preventDefault();
@@ -194,21 +194,21 @@ const App = () => {
 
   return (
     <form class="custom-validity" onSubmit={handleSubmit}>
-      <WaRadioGroup label="Select an option" name="a" required onWaChange={handleChange}>
-        <WaRadio value="1">
+      <SlRadioGroup label="Select an option" name="a" required onSlChange={handleChange}>
+        <SlRadio value="1">
           Option 1
-        </WaRadio>
-        <WaRadiovalue="2">
+        </SlRadio>
+        <SlRadiovalue="2">
           Option 2
-        </WaRadio>
-        <WaRadio value="3">
+        </SlRadio>
+        <SlRadio value="3">
           Option 3
-        </WaRadio>
-      </WaRadioGroup>
+        </SlRadio>
+      </SlRadioGroup>
       <br />
-      <WaButton type="submit" variant="brand">
+      <SlButton type="submit" variant="primary">
         Submit
-      </WaButton>
+      </SlButton>
     </form>
   );
 };
@@ -220,27 +220,27 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
 
 ```html:preview
 <form class="custom-validity">
-  <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>
+  <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>
   <br />
-  <wa-button type="submit" variant="brand">Submit</wa-button>
+  <sl-button type="submit" variant="primary">Submit</sl-button>
 </form>
 
 <script>
   const form = document.querySelector('.custom-validity');
-  const radioGroup = form.querySelector('wa-radio-group');
+  const radioGroup = form.querySelector('sl-radio-group');
   const errorMessage = 'You must choose the last option';
 
   // Set initial validity as soon as the element is defined
-  customElements.whenDefined('wa-radio').then(() => {
+  customElements.whenDefined('sl-radio').then(() => {
     radioGroup.setCustomValidity(errorMessage);
   });
 
   // Update validity when a selection is made
-  form.addEventListener('wa-change', () => {
+  form.addEventListener('sl-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 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';
+import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 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}>
-      <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>
+      <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>
       <br />
-      <WaButton type="submit" variant="brand">
+      <SlButton type="submit" variant="primary">
         Submit
-      </WaButton>
+      </SlButton>
     </form>
   );
 };

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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -64,25 +64,25 @@ const App = () => (
 Use the `disabled` attribute to disable a radio.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
 
 const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadio value="1">Option 1</WaRadio>
-    <WaRadio value="2" disabled>
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadio value="1">Option 1</SlRadio>
+    <SlRadio value="2" disabled>
       Option 2
-    </WaRadio>
-    <WaRadio value="3">Option 3</WaRadio>
-  </WaRadioGroup>
+    </SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
 );
 ```
 
@@ -91,55 +91,55 @@ const App = () => (
 Add the `size` attribute to the [Radio Group](/components/radio-group) to change the radios' size.
 
 ```html preview
-<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>
+<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>
 
 <br />
 
-<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>
+<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>
 
 <br />
 
-<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>
+<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>
 ```
 
 ```jsx react
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
 
 const App = () => (
   <>
-    <WaRadioGroup size="small" value="1">
-      <WaRadio value="1">Small 1</WaRadio>
-      <WaRadio value="2">Small 2</WaRadio>
-      <WaRadio value="3">Small 3</WaRadio>
-    </WaRadioGroup>
+    <SlRadioGroup size="small" value="1">
+      <SlRadio value="1">Small 1</SlRadio>
+      <SlRadio value="2">Small 2</SlRadio>
+      <SlRadio value="3">Small 3</SlRadio>
+    </SlRadioGroup>
 
     <br />
 
-    <WaRadioGroup size="medium" value="1">
-      <WaRadio value="1">Medium 1</WaRadio>
-      <WaRadio value="2">Medium 2</WaRadio>
-      <WaRadio value="3">Medium 3</WaRadio>
-    </WaRadioGroup>
+    <SlRadioGroup size="medium" value="1">
+      <SlRadio value="1">Medium 1</SlRadio>
+      <SlRadio value="2">Medium 2</SlRadio>
+      <SlRadio value="3">Medium 3</SlRadio>
+    </SlRadioGroup>
 
     <br />
 
-    <WaRadioGroup size="large" value="1">
-      <WaRadio value="1">Large 1</WaRadio>
-      <WaRadio value="2">Large 2</WaRadio>
-      <WaRadio value="3">Large 3</WaRadio>
-    </WaRadioGroup>
+    <SlRadioGroup size="large" value="1">
+      <SlRadio value="1">Large 1</SlRadio>
+      <SlRadio value="2">Large 2</SlRadio>
+      <SlRadio value="3">Large 3</SlRadio>
+    </SlRadioGroup>
   </>
 );
 ```

docs/pages/components/range.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-range></wa-range>
+<sl-range></sl-range>
 ```
 
 ```jsx:react
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
 
-const App = () => <WaRange />;
+const App = () => <SlRange />;
 ```
 
 :::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
-<wa-range label="Volume" min="0" max="100"></wa-range>
+<sl-range label="Volume" min="0" max="100"></sl-range>
 ```
 
 ```jsx:react
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
 
-const App = () => <WaRange label="Volume" min={0} max={100} />;
+const App = () => <SlRange label="Volume" min={0} max={100} />;
 ```
 
 ### Help Text
@@ -40,13 +40,13 @@ const App = () => <WaRange 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
-<wa-range label="Volume" help-text="Controls the volume of the current song." min="0" max="100"></wa-range>
+<sl-range label="Volume" help-text="Controls the volume of the current song." min="0" max="100"></sl-range>
 ```
 
 ```jsx:react
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
 
-const App = () => <WaRange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;
+const App = () => <SlRange 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 = () => <WaRange 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
-<wa-range min="0" max="10" step="1"></wa-range>
+<sl-range min="0" max="10" step="1"></sl-range>
 ```
 
 ```jsx:react
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
 
-const App = () => <WaRange min={0} max={10} step={1} />;
+const App = () => <SlRange min={0} max={10} step={1} />;
 ```
 
 ### Disabled
@@ -68,13 +68,13 @@ const App = () => <WaRange min={0} max={10} step={1} />;
 Use the `disabled` attribute to disable a slider.
 
 ```html:preview
-<wa-range disabled></wa-range>
+<sl-range disabled></sl-range>
 ```
 
 ```jsx:react
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
 
-const App = () => <WaRange disabled />;
+const App = () => <SlRange disabled />;
 ```
 
 ### Tooltip Placement
@@ -82,13 +82,13 @@ const App = () => <WaRange disabled />;
 By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
 
 ```html:preview
-<wa-range tooltip="bottom"></wa-range>
+<sl-range tooltip="bottom"></sl-range>
 ```
 
 ```jsx:react
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
 
-const App = () => <WaRange tooltip="bottom" />;
+const App = () => <SlRange tooltip="bottom" />;
 ```
 
 ### Disable the Tooltip
@@ -96,13 +96,13 @@ const App = () => <WaRange tooltip="bottom" />;
 To disable the tooltip, set `tooltip` to `none`.
 
 ```html:preview
-<wa-range tooltip="none"></wa-range>
+<sl-range tooltip="none"></sl-range>
 ```
 
 ```jsx:react
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
 
-const App = () => <WaRange tooltip="none" />;
+const App = () => <SlRange tooltip="none" />;
 ```
 
 ### Custom Track Colors
@@ -110,24 +110,24 @@ const App = () => <WaRange 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
-<wa-range
+<sl-range
   style="
-  --track-color-active: var(--wa-color-brand-fill-vivid);
-  --track-color-inactive: var(--wa-color-brand-fill-muted-alt);
+  --track-color-active: var(--sl-color-primary-600);
+  --track-color-inactive: var(--sl-color-primary-100);
 "
-></wa-range>
+></sl-range>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
 
 const App = () => (
-  <WaRange
+  <SlRange
     style={{
-      '--track-color-active': 'var(--wa-color-brand-fill-vivid)',
-      '--track-color-inactive': 'var(--wa-color-brand-fill-muted-alt)'
+      '--track-color-active': 'var(--sl-color-primary-600)',
+      '--track-color-inactive': 'var(--sl-color-primary-200)'
     }}
   />
 );
@@ -140,29 +140,29 @@ const App = () => (
 You can customize the initial offset of the active track using the `--track-active-offset` custom property.
 
 ```html:preview
-<wa-range
+<sl-range
   min="-100"
   max="100"
   style="
-  --track-color-active: var(--wa-color-brand-fill-vivid);
-  --track-color-inactive: var(--wa-color-brand-fill-muted-alt);
+  --track-color-active: var(--sl-color-primary-600);
+  --track-color-inactive: var(--sl-color-primary-100);
   --track-active-offset: 50%;
 "
-></wa-range>
+></sl-range>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
 
 const App = () => (
-  <WaRange
+  <SlRange
     min={-100}
     max={100}
     style={{
-      '--track-color-active': 'var(--wa-color-brand-fill-vivid)',
-      '--track-color-inactive': 'var(--wa-color-brand-fill-muted-alt)',
+      '--track-color-active': 'var(--sl-color-primary-600)',
+      '--track-color-inactive': 'var(--sl-color-primary-200)',
       '--track-active-offset': '50%'
     }}
   />
@@ -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
-<wa-range min="0" max="100" step="1" class="range-with-custom-formatter"></wa-range>
+<sl-range min="0" max="100" step="1" class="range-with-custom-formatter"></sl-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 WaRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
 
-const App = () => <WaRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
+const App = () => <SlRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
 ```

docs/pages/components/rating.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-rating label="Rating"></wa-rating>
+<sl-rating label="Rating"></sl-rating>
 ```
 
 ```jsx:react
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
-const App = () => <WaRating label="Rating" />;
+const App = () => <SlRating label="Rating" />;
 ```
 
 ## Examples
@@ -22,13 +22,13 @@ const App = () => <WaRating 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
-<wa-rating label="Rate this component"></wa-rating>
+<sl-rating label="Rate this component"></sl-rating>
 ```
 
 ```jsx:react
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
-const App = () => <WaRating label="Rate this component" />;
+const App = () => <SlRating label="Rate this component" />;
 ```
 
 ### Maximum Value
@@ -36,13 +36,13 @@ const App = () => <WaRating label="Rate this component" />;
 Ratings are 0-5 by default. To change the maximum possible value, use the `max` attribute.
 
 ```html:preview
-<wa-rating label="Rating" max="3"></wa-rating>
+<sl-rating label="Rating" max="3"></sl-rating>
 ```
 
 ```jsx:react
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
-const App = () => <WaRating label="Rating" max={3} />;
+const App = () => <SlRating label="Rating" max={3} />;
 ```
 
 ### Precision
@@ -50,13 +50,13 @@ const App = () => <WaRating label="Rating" max={3} />;
 Use the `precision` attribute to let users select fractional ratings.
 
 ```html:preview
-<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+<sl-rating label="Rating" precision="0.5" value="2.5"></sl-rating>
 ```
 
 ```jsx:react
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
-const App = () => <WaRating label="Rating" precision={0.5} value={2.5} />;
+const App = () => <SlRating label="Rating" precision={0.5} value={2.5} />;
 ```
 
 ### Symbol Sizes
@@ -64,15 +64,15 @@ const App = () => <WaRating label="Rating" precision={0.5} value={2.5} />;
 Set the `--symbol-size` custom property to adjust the size.
 
 ```html:preview
-<wa-rating label="Rating" style="--symbol-size: 2rem;"></wa-rating>
+<sl-rating label="Rating" style="--symbol-size: 2rem;"></sl-rating>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
-const App = () => <WaRating label="Rating" style={{ '--symbol-size': '2rem' }} />;
+const App = () => <SlRating label="Rating" style={{ '--symbol-size': '2rem' }} />;
 ```
 
 {% endraw %}
@@ -82,13 +82,13 @@ const App = () => <WaRating label="Rating" style={{ '--symbol-size': '2rem' }} /
 Use the `readonly` attribute to display a rating that users can't change.
 
 ```html:preview
-<wa-rating label="Rating" readonly value="3"></wa-rating>
+<sl-rating label="Rating" readonly value="3"></sl-rating>
 ```
 
 ```jsx:react
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
-const App = () => <WaRating label="Rating" readonly value={3} />;
+const App = () => <SlRating label="Rating" readonly value={3} />;
 ```
 
 ### Disabled
@@ -96,33 +96,33 @@ const App = () => <WaRating label="Rating" readonly value={3} />;
 Use the `disable` attribute to disable the rating.
 
 ```html:preview
-<wa-rating label="Rating" disabled value="3"></wa-rating>
+<sl-rating label="Rating" disabled value="3"></sl-rating>
 ```
 
 ```jsx:react
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
-const App = () => <WaRating label="Rating" disabled value={3} />;
+const App = () => <SlRating label="Rating" disabled value={3} />;
 ```
 
 ### Detecting Hover
 
-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.
+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.
 
 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">
-  <wa-rating label="Rating"></wa-rating>
+  <sl-rating label="Rating"></sl-rating>
   <span></span>
 </div>
 
 <script>
-  const rating = document.querySelector('.detect-hover > wa-rating');
+  const rating = document.querySelector('.detect-hover > sl-rating');
   const span = rating.nextElementSibling;
   const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
 
-  rating.addEventListener('wa-hover', event => {
+  rating.addEventListener('sl-hover', event => {
     span.textContent = terms[event.detail.value];
 
     // Clear feedback when hovering stops
@@ -137,9 +137,9 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
     position: relative;
     top: -4px;
     left: 8px;
-    border-radius: var(--wa-corners-1x);
-    background: var(--wa-color-neutral-outline-vivid);
-    color: var(--wa-color-neutral-text-on-vivid);
+    border-radius: var(--sl-border-radius-small);
+    background: var(--sl-color-neutral-900);
+    color: var(--sl-color-neutral-0);
     text-align: center;
     padding: 4px 6px;
   }
@@ -152,7 +152,7 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
 
 ```jsx:react
 import { useState } from 'react';
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
 const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
 const css = `
@@ -160,9 +160,9 @@ const css = `
     position: relative;
     top: -4px;
     left: 8px;
-    border-radius: var(--wa-corners-1x);
-    background: var(--wa-color-neutral-outline-vivid);
-    color: var(--wa-color-neutral-text-on-vivid);
+    border-radius: var(--sl-border-radius-small);
+    background: var(--sl-color-neutral-900);
+    color: var(--sl-color-neutral-0);
     text-align: center;
     padding: 4px 6px;
   }
@@ -173,7 +173,7 @@ const css = `
 `;
 
 function handleHover(event) {
-  rating.addEventListener('wa-hover', event => {
+  rating.addEventListener('sl-hover', event => {
     setFeedback(terms[event.detail.value]);
 
     // Clear feedback when hovering stops
@@ -189,7 +189,7 @@ const App = () => {
   return (
     <>
       <div class="detect-hover">
-        <WaRating label="Rating" onWaHover={handleHover} />
+        <SlRating label="Rating" onSlHover={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
-<wa-rating label="Rating" class="rating-hearts" style="--symbol-color-active: #ff4136;"></wa-rating>
+<sl-rating label="Rating" class="rating-hearts" style="--symbol-color-active: #ff4136;"></sl-rating>
 
 <script>
   const rating = document.querySelector('.rating-hearts');
-  rating.getSymbol = () => '<wa-icon name="heart-fill"></wa-icon>';
+  rating.getSymbol = () => '<sl-icon name="heart-fill"></sl-icon>';
 </script>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
 const App = () => (
-  <WaRating
+  <SlRating
     label="Rating"
-    getSymbol={() => '<wa-icon name="heart-fill"></wa-icon>'}
+    getSymbol={() => '<sl-icon name="heart-fill"></sl-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
-<wa-rating label="Rating" class="rating-emojis"></wa-rating>
+<sl-rating label="Rating" class="rating-emojis"></sl-rating>
 
 <script>
   const rating = document.querySelector('.rating-emojis');
 
   rating.getSymbol = value => {
     const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
-    return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
+    return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
   };
 </script>
 ```
 
 ```jsx:react
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
 
 function getSymbol(value) {
   const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
-  return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
+  return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
 }
 
-const App = () => <WaRating label="Rating" getSymbol={getSymbol} />;
+const App = () => <SlRating label="Rating" getSymbol={getSymbol} />;
 ```

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
-<!-- Web Awesome 2 release date 🎉 -->
-<wa-relative-time date="2020-07-15T09:17:00-04:00"></wa-relative-time>
+<!-- Shoelace 2 release date 🎉 -->
+<sl-relative-time date="2020-07-15T09:17:00-04:00"></sl-relative-time>
 ```
 
 ```jsx:react
-import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
 
-const App = () => <WaRelativeTime date="2020-07-15T09:17:00-04:00" />;
+const App = () => <SlRelativeTime 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">
-  <wa-relative-time sync></wa-relative-time>
+  <sl-relative-time sync></sl-relative-time>
 </div>
 
 <script>
   const container = document.querySelector('.relative-time-sync');
-  const relativeTime = container.querySelector('wa-relative-time');
+  const relativeTime = container.querySelector('sl-relative-time');
 
   relativeTime.date = new Date(new Date().getTime() - 60000);
 </script>
 ```
 
 ```jsx:react
-import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
 
 const date = new Date(new Date().getTime() - 60000);
 
-const App = () => <WaRelativeTime date={date} sync />;
+const App = () => <SlRelativeTime date={date} sync />;
 ```
 
 ### Formatting Styles
@@ -56,21 +56,21 @@ const App = () => <WaRelativeTime 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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
 
 const App = () => (
   <>
-    <WaRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" />
+    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" />
     <br />
-    <WaRelativeTime date="2020-07-15T09:17:00-04:00" format="short" />
+    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" />
     <br />
-    <WaRelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
+    <SlRelativeTime 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: <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>
+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>
 ```
 
 ```jsx:react
-import WaRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
 
 const App = () => (
   <>
-    English: <WaRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" />
+    English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" />
     <br />
-    Chinese: <WaRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" />
+    Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" />
     <br />
-    German: <WaRelativeTime date="2020-07-15T09:17:00-04:00" lang="de" />
+    German: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="de" />
     <br />
-    Greek: <WaRelativeTime date="2020-07-15T09:17:00-04:00" lang="el" />
+    Greek: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="el" />
     <br />
-    Russian: <WaRelativeTime date="2020-07-15T09:17:00-04:00" lang="ru" />
+    Russian: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="ru" />
   </>
 );
 ```

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 `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.
+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.
 
 ```html:preview
 <div class="resize-observer-overview">
-  <wa-resize-observer>
+  <sl-resize-observer>
     <div>Resize this box and watch the console 👉</div>
-  </wa-resize-observer>
+  </sl-resize-observer>
 </div>
 
 <script>
   const container = document.querySelector('.resize-observer-overview');
-  const resizeObserver = container.querySelector('wa-resize-observer');
+  const resizeObserver = container.querySelector('sl-resize-observer');
 
-  resizeObserver.addEventListener('wa-resize', event => {
+  resizeObserver.addEventListener('sl-resize', event => {
     console.log(event.detail);
   });
 </script>
@@ -26,7 +26,7 @@ The resize observer will report changes to the dimensions of the elements it wra
 <style>
   .resize-observer-overview div {
     display: flex;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--sl-input-border-color);
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -36,12 +36,12 @@ The resize observer will report changes to the dimensions of the elements it wra
 ```
 
 ```jsx:react
-import WaResizeObserver from '@shoelace-style/shoelace/dist/react/resize-observer';
+import SlResizeObserver from '@shoelace-style/shoelace/dist/react/sl-resize-observer';
 
 const css = `
   .resize-observer-overview div {
     display: flex;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--sl-input-border-color);
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -52,9 +52,9 @@ const css = `
 const App = () => (
   <>
     <div className="resize-observer-overview">
-      <WaResizeObserver onWaResize={event => console.log(event.detail)}>
+      <SlResizeObserver onSlResize={event => console.log(event.detail)}>
         <div>Resize this box and watch the console 👉</div>
-      </WaResizeObserver>
+      </SlResizeObserver>
     </div>
 
     <style>{css}</style>

docs/pages/components/select.md

@@ -6,29 +6,29 @@ layout: component
 ---
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -93,23 +93,23 @@ const App = () => (
 Use the `placeholder` attribute to add a placeholder.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -143,23 +143,23 @@ const App = () => (
 Add the `filled` attribute to draw a filled select.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <WaSelect filled>
-    <WaOption value="option-1">Option 1</WaOption>
-    <WaOption value="option-2">Option 2</WaOption>
-    <WaOption value="option-3">Option 3</WaOption>
-  </WaSelect>
+  <SlSelect filled>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
 );
 ```
 
@@ -168,23 +168,23 @@ const App = () => (
 Use the `pill` attribute to give selects rounded edges.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <WaSelect pill>
-    <WaOption value="option-1">Option 1</WaOption>
-    <WaOption value="option-2">Option 2</WaOption>
-    <WaOption value="option-3">Option 3</WaOption>
-  </WaSelect>
+  <SlSelect pill>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
 );
 ```
 
@@ -193,23 +193,23 @@ const App = () => (
 Use the `disabled` attribute to disable a select.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -250,64 +250,62 @@ Note that multi-select options may wrap, causing the control to expand verticall
 
 ### Setting Initial Values
 
-Use the `value` attribute to set the initial selection.
-
-When using `multiple`, 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.
+Use the `value` attribute to set the initial selection. When using `multiple`, use space-delimited values to select more than one option.
 
 ```html:preview
-<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>
+<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>
 ```
 
 ```jsx:react
-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';
+import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
 ### Grouping Options
 
-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.
+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.
 
 ```html:preview
-<wa-select>
+<sl-select>
   <small>Section 1</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-divider></wa-divider>
+  <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>
   <small>Section 2</small>
-  <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>
+  <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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -316,56 +314,56 @@ const App = () => (
 Use the `size` attribute to change a select's size. Note that size does not apply to listbox options.
 
 ```html:preview
-<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>
+<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>
 
 <br />
 
-<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>
+<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>
 
 <br />
 
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
   <>
-    <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>
+    <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>
 
     <br />
 
-    <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>
+    <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>
 
     <br />
 
-    <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>
+    <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>
   </>
 );
 ```
@@ -375,23 +373,25 @@ 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
-<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>
+<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>
 ```
 
 ```jsx:react
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
+import {
+  SlOption,
+  SlSelect
+} from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <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>
+  <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>
 );
 ```
 
@@ -400,105 +400,55 @@ const App = () => (
 Use the `prefix` slot to prepend an icon to the control.
 
 ```html:preview
-<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>
+<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>
 <br />
-<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>
+<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>
 <br />
-<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>
+<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>
 ```
 
 ```jsx:react
-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';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
 
 const App = () => (
   <>
-    <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>
+    <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>
     <br />
-    <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>
+    <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>
     <br />
-    <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>
+    <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>
   </>
 );
 ```
-
-### 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 `<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
-<wa-select
-  placeholder="Select one"
-  value="email phone"
-  multiple
-  clearable
-  class="custom-tag"
->
-  <wa-option value="email">
-    <wa-icon slot="prefix" name="envelope"></wa-icon>
-    Email
-  </wa-option>
-  <wa-option value="phone">
-    <wa-icon slot="prefix" name="telephone"></wa-icon>
-    Phone
-  </wa-option>
-  <wa-option value="chat">
-    <wa-icon slot="prefix" name="chat-dots"></wa-icon>
-    Chat
-  </wa-option>
-</wa-select>
-
-<script type="module">
-  const select = document.querySelector('.custom-tag');
-
-  select.getTag = (option, index) => {
-    // 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 `
-      <wa-tag removable>
-        <wa-icon name="${name}" style="padding-inline-end: .5rem;"></wa-icon>
-        ${option.getTextLabel()}
-      </wa-tag>
-    `;
-  };
-</script>
-```
-
-:::warning
-Be sure you trust the content you are outputting! Passing unsanitized user input to `getTag()` can result in XSS vulnerabilities.
-:::

docs/pages/components/skeleton.md

@@ -12,13 +12,13 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi
 ```html:preview
 <div class="skeleton-overview">
   <header>
-    <wa-skeleton effect="sheen"></wa-skeleton>
-    <wa-skeleton effect="sheen"></wa-skeleton>
+    <sl-skeleton></sl-skeleton>
+    <sl-skeleton></sl-skeleton>
   </header>
 
-  <wa-skeleton effect="sheen"></wa-skeleton>
-  <wa-skeleton effect="sheen"></wa-skeleton>
-  <wa-skeleton effect="sheen"></wa-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-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 wa-skeleton:last-child {
+  .skeleton-overview header sl-skeleton:last-child {
     flex: 0 0 auto;
     width: 30%;
   }
 
-  .skeleton-overview wa-skeleton {
+  .skeleton-overview sl-skeleton {
     margin-bottom: 1rem;
   }
 
-  .skeleton-overview wa-skeleton:nth-child(1) {
+  .skeleton-overview sl-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 wa-skeleton:nth-child(3) {
+  .skeleton-overview sl-skeleton:nth-child(3) {
     width: 95%;
   }
 
-  .skeleton-overview wa-skeleton:nth-child(4) {
+  .skeleton-overview sl-skeleton:nth-child(4) {
     width: 80%;
   }
 </style>
 ```
 
 ```jsx:react
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
 
 const css = `
   .skeleton-overview header {
@@ -65,16 +65,16 @@ const css = `
     margin-bottom: 1rem;
   }
 
-  .skeleton-overview header wa-skeleton:last-child {
+  .skeleton-overview header sl-skeleton:last-child {
     flex: 0 0 auto;
     width: 30%;
   }
 
-  .skeleton-overview wa-skeleton {
+  .skeleton-overview sl-skeleton {
     margin-bottom: 1rem;
   }
 
-  .skeleton-overview wa-skeleton:nth-child(1) {
+  .skeleton-overview sl-skeleton:nth-child(1) {
     float: left;
     width: 3rem;
     height: 3rem;
@@ -82,11 +82,11 @@ const css = `
     vertical-align: middle;
   }
 
-  .skeleton-overview wa-skeleton:nth-child(3) {
+  .skeleton-overview sl-skeleton:nth-child(3) {
     width: 95%;
   }
 
-  .skeleton-overview wa-skeleton:nth-child(4) {
+  .skeleton-overview sl-skeleton:nth-child(4) {
     width: 80%;
   }
 `;
@@ -95,13 +95,13 @@ const App = () => (
   <>
     <div className="skeleton-overview">
       <header>
-        <WaSkeleton />
-        <WaSkeleton />
+        <SlSkeleton />
+        <SlSkeleton />
       </header>
 
-      <WaSkeleton />
-      <WaSkeleton />
-      <WaSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
     </div>
 
     <style>{css}</style>
@@ -117,36 +117,36 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s
 
 ```html:preview
 <div class="skeleton-effects">
-  <wa-skeleton effect="none"></wa-skeleton>
+  <sl-skeleton effect="none"></sl-skeleton>
   None
 
-  <wa-skeleton effect="sheen"></wa-skeleton>
+  <sl-skeleton effect="sheen"></sl-skeleton>
   Sheen
 
-  <wa-skeleton effect="pulse"></wa-skeleton>
+  <sl-skeleton effect="pulse"></sl-skeleton>
   Pulse
 </div>
 
 <style>
   .skeleton-effects {
-    font-size: var(--wa-font-size-s);
+    font-size: var(--sl-font-size-small);
   }
 
-  .skeleton-effects wa-skeleton:not(:first-child) {
+  .skeleton-effects sl-skeleton:not(:first-child) {
     margin-top: 1rem;
   }
 </style>
 ```
 
 ```jsx:react
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
 
 const css = `
   .skeleton-effects {
-    font-size: var(--wa-font-size-s);
+    font-size: var(--sl-font-size-small);
   }
 
-  .skeleton-effects wa-skeleton:not(:first-child) {
+  .skeleton-effects sl-skeleton:not(:first-child) {
     margin-top: 1rem;
   }
 `;
@@ -154,11 +154,11 @@ const css = `
 const App = () => (
   <>
     <div className="skeleton-effects">
-      <WaSkeleton effect="none" />
+      <SlSkeleton effect="none" />
       None
-      <WaSkeleton effect="sheen" />
+      <SlSkeleton effect="sheen" />
       Sheen
-      <WaSkeleton effect="pulse" />
+      <SlSkeleton effect="pulse" />
       Pulse
     </div>
 
@@ -173,49 +173,49 @@ Use multiple skeletons and some clever styles to simulate paragraphs.
 
 ```html:preview
 <div class="skeleton-paragraphs">
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
 </div>
 
 <style>
-  .skeleton-paragraphs wa-skeleton {
+  .skeleton-paragraphs sl-skeleton {
     margin-bottom: 1rem;
   }
 
-  .skeleton-paragraphs wa-skeleton:nth-child(2) {
+  .skeleton-paragraphs sl-skeleton:nth-child(2) {
     width: 95%;
   }
 
-  .skeleton-paragraphs wa-skeleton:nth-child(4) {
+  .skeleton-paragraphs sl-skeleton:nth-child(4) {
     width: 90%;
   }
 
-  .skeleton-paragraphs wa-skeleton:last-child {
+  .skeleton-paragraphs sl-skeleton:last-child {
     width: 50%;
   }
 </style>
 ```
 
 ```jsx:react
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
 
 const css = `
-  .skeleton-paragraphs wa-skeleton {
+  .skeleton-paragraphs sl-skeleton {
     margin-bottom: 1rem;
   }
 
-  .skeleton-paragraphs wa-skeleton:nth-child(2) {
+  .skeleton-paragraphs sl-skeleton:nth-child(2) {
     width: 95%;
   }
 
-  .skeleton-paragraphs wa-skeleton:nth-child(4) {
+  .skeleton-paragraphs sl-skeleton:nth-child(4) {
     width: 90%;
   }
 
-  .skeleton-paragraphs wa-skeleton:last-child {
+  .skeleton-paragraphs sl-skeleton:last-child {
     width: 50%;
   }
 `;
@@ -223,11 +223,11 @@ const css = `
 const App = () => (
   <>
     <div className="skeleton-paragraphs">
-      <WaSkeleton />
-      <WaSkeleton />
-      <WaSkeleton />
-      <WaSkeleton />
-      <WaSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
     </div>
 
     <style>{css}</style>
@@ -241,55 +241,55 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
 
 ```html:preview
 <div class="skeleton-avatars">
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
 </div>
 
 <style>
-  .skeleton-avatars wa-skeleton {
+  .skeleton-avatars sl-skeleton {
     display: inline-block;
     width: 3rem;
     height: 3rem;
     margin-right: 0.5rem;
   }
 
-  .skeleton-avatars wa-skeleton:nth-child(1) {
+  .skeleton-avatars sl-skeleton:nth-child(1) {
     --border-radius: 0;
   }
 
-  .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-1x);
+  .skeleton-avatars sl-skeleton:nth-child(2) {
+    --border-radius: var(--sl-border-radius-medium);
   }
 </style>
 ```
 
 ```jsx:react
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
 
 const css = `
-  .skeleton-avatars wa-skeleton {
+  .skeleton-avatars sl-skeleton {
     display: inline-block;
     width: 3rem;
     height: 3rem;
     margin-right: .5rem;
   }
 
-  .skeleton-avatars wa-skeleton:nth-child(1) {
+  .skeleton-avatars sl-skeleton:nth-child(1) {
     --border-radius: 0;
   }
 
-  .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-1x);
+  .skeleton-avatars sl-skeleton:nth-child(2) {
+    --border-radius: var(--sl-border-radius-medium);
   }
 `;
 
 const App = () => (
   <>
     <div className="skeleton-avatars">
-      <WaSkeleton />
-      <WaSkeleton />
-      <WaSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
     </div>
 
     <style>{css}</style>
@@ -303,26 +303,26 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
 
 ```html:preview
 <div class="skeleton-shapes">
-  <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>
+  <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>
 </div>
 
 <style>
-  .skeleton-shapes wa-skeleton {
+  .skeleton-shapes sl-skeleton {
     display: inline-flex;
     width: 50px;
     height: 50px;
   }
 
   .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--sl-border-radius-medium);
   }
 
   .skeleton-shapes .circle::part(indicator) {
-    --border-radius: var(--wa-corners-circle);
+    --border-radius: var(--sl-border-radius-circle);
   }
 
   .skeleton-shapes .triangle::part(indicator) {
@@ -353,28 +353,28 @@ 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 wa-skeleton:not(:last-child) {
+  .skeleton-shapes sl-skeleton:not(:last-child) {
     margin-right: 0.5rem;
   }
 </style>
 ```
 
 ```jsx:react
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
 
 const css = `
-  .skeleton-shapes wa-skeleton {
+  .skeleton-shapes sl-skeleton {
     display: inline-flex;
     width: 50px;
     height: 50px;
   }
 
   .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--sl-border-radius-medium);
   }
 
   .skeleton-shapes .circle::part(indicator) {
-    --border-radius: var(--wa-corners-circle);
+    --border-radius: var(--sl-border-radius-circle);
   }
 
   .skeleton-shapes .triangle::part(indicator) {
@@ -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 wa-skeleton:not(:last-child) {
+  .skeleton-shapes sl-skeleton:not(:last-child) {
     margin-right: .5rem;
   }
 `;
@@ -400,11 +400,11 @@ const css = `
 const App = () => (
   <>
     <div className="skeleton-shapes">
-      <WaSkeleton className="square" />
-      <WaSkeleton className="circle" />
-      <WaSkeleton className="triangle" />
-      <WaSkeleton className="cross" />
-      <WaSkeleton className="comment" />
+      <SlSkeleton className="square" />
+      <SlSkeleton className="circle" />
+      <SlSkeleton className="triangle" />
+      <SlSkeleton className="cross" />
+      <SlSkeleton 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
-<wa-skeleton effect="sheen" style="--color: tomato; --sheen-color: #ffb094;"></wa-skeleton>
+<sl-skeleton effect="sheen" style="--color: tomato; --sheen-color: #ffb094;"></sl-skeleton>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
 
 const css = `
-  .skeleton-avatars wa-skeleton {
+  .skeleton-avatars sl-skeleton {
     display: inline-block;
     width: 3rem;
     height: 3rem;
     margin-right: .5rem;
   }
 
-  .skeleton-avatars wa-skeleton:nth-child(1) {
+  .skeleton-avatars sl-skeleton:nth-child(1) {
     --border-radius: 0;
   }
 
-  .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-1x);
+  .skeleton-avatars sl-skeleton:nth-child(2) {
+    --border-radius: var(--sl-border-radius-medium);
   }
 `;
 
-const App = () => <WaSkeleton effect="sheen" style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }} />;
+const App = () => <SlSkeleton effect="sheen" style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }} />;
 ```
 
 {% endraw %}

docs/pages/components/spinner.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-spinner></wa-spinner>
+<sl-spinner></sl-spinner>
 ```
 
 ```jsx:react
-import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
 
-const App = () => <WaSpinner />;
+const App = () => <SlSpinner />;
 ```
 
 ## Examples
@@ -22,21 +22,21 @@ const App = () => <WaSpinner />;
 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
-<wa-spinner></wa-spinner>
-<wa-spinner style="font-size: 2rem;"></wa-spinner>
-<wa-spinner style="font-size: 3rem;"></wa-spinner>
+<sl-spinner></sl-spinner>
+<sl-spinner style="font-size: 2rem;"></sl-spinner>
+<sl-spinner style="font-size: 3rem;"></sl-spinner>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
 
 const App = () => (
   <>
-    <WaSpinner />
-    <WaSpinner style={{ fontSize: '2rem' }} />
-    <WaSpinner style={{ fontSize: '3rem' }} />
+    <SlSpinner />
+    <SlSpinner style={{ fontSize: '2rem' }} />
+    <SlSpinner 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
-<wa-spinner style="font-size: 50px; --track-width: 10px;"></wa-spinner>
+<sl-spinner style="font-size: 50px; --track-width: 10px;"></sl-spinner>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
 
 const App = () => (
-  <WaSpinner
+  <SlSpinner
     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
-<wa-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></wa-spinner>
+<sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></sl-spinner>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
 
 const App = () => (
-  <WaSpinner
+  <SlSpinner
     style={{
       fontSize: '3rem',
       '--indicator-color': 'deeppink',

docs/pages/components/split-panel.md

@@ -6,34 +6,34 @@ layout: component
 ---
 
 ```html:preview
-<wa-split-panel>
+<sl-split-panel>
   <div
     slot="start"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     Start
   </div>
   <div
     slot="end"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     End
   </div>
-</wa-split-panel>
+</sl-split-panel>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
 
 const App = () => (
-  <WaSplitPanel>
+  <SlSplitPanel>
     <div
       slot="start"
       style={{
         height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -45,7 +45,7 @@ const App = () => (
       slot="end"
       style={{
         height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -53,7 +53,7 @@ const App = () => (
     >
       End
     </div>
-  </WaSplitPanel>
+  </SlSplitPanel>
 );
 ```
 
@@ -66,34 +66,20 @@ 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
-<wa-split-panel position="75">
+<sl-split-panel position="75">
   <div
     slot="start"
-    style="
-      height: 200px;
-      background: var(--wa-color-surface-lowered);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    "
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     Start
   </div>
   <div
     slot="end"
-    style="
-      height: 200px;
-      background: var(--wa-color-surface-lowered);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    "
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     End
   </div>
-</wa-split-panel>
+</sl-split-panel>
 ```
 
 ### Initial Position in Pixels
@@ -101,34 +87,34 @@ 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
-<wa-split-panel position-in-pixels="150">
+<sl-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;"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     Start
   </div>
   <div
     slot="end"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     End
   </div>
-</wa-split-panel>
+</sl-split-panel>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
 
 const App = () => (
-  <WaSplitPanel position="200">
+  <SlSplitPanel position="200">
     <div
       slot="start"
       style={{
         height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -140,7 +126,7 @@ const App = () => (
       slot="end"
       style={{
         height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -148,7 +134,7 @@ const App = () => (
     >
       End
     </div>
-  </WaSplitPanel>
+  </SlSplitPanel>
 );
 ```
 
@@ -159,34 +145,34 @@ 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
-<wa-split-panel vertical style="height: 400px;">
+<sl-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;"
+    style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     Start
   </div>
   <div
     slot="end"
-    style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     End
   </div>
-</wa-split-panel>
+</sl-split-panel>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
 
 const App = () => (
-  <WaSplitPanel vertical style={{ height: '400px' }}>
+  <SlSplitPanel vertical style={{ height: '400px' }}>
     <div
       slot="start"
       style={{
         height: '100%',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -198,7 +184,7 @@ const App = () => (
       slot="end"
       style={{
         height: '100%',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -206,7 +192,7 @@ const App = () => (
     >
       End
     </div>
-  </WaSplitPanel>
+  </SlSplitPanel>
 );
 ```
 
@@ -218,20 +204,20 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
 
 ```html:preview
 <div class="split-panel-snapping">
-  <wa-split-panel snap="100px 50%">
+  <sl-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;"
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
     >
       Start
     </div>
     <div
       slot="end"
-      style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
     >
       End
     </div>
-  </wa-split-panel>
+  </sl-split-panel>
 
   <div class="split-panel-snapping-dots"></div>
 </div>
@@ -249,7 +235,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: var(--wa-color-neutral-fill-vivid-alt);
+    background: var(--sl-color-neutral-400);
     transform: translateX(-3px);
   }
 
@@ -266,7 +252,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
 {% raw %}
 
 ```jsx:react
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
 
 const css = `
   .split-panel-snapping {
@@ -281,7 +267,7 @@ const css = `
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: var(--wa-color-neutral-fill-vivid-alt);
+    background: var(--sl-color-neutral-400);
     transform: translateX(-3px);
   }
 
@@ -297,12 +283,12 @@ const css = `
 const App = () => (
   <>
     <div className="split-panel-snapping">
-      <WaSplitPanel snap="100px 50%">
+      <SlSplitPanel snap="100px 50%">
         <div
           slot="start"
           style={{
             height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
+            background: 'var(--sl-color-neutral-50)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
@@ -314,7 +300,7 @@ const App = () => (
           slot="end"
           style={{
             height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
+            background: 'var(--sl-color-neutral-50)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
@@ -322,7 +308,7 @@ const App = () => (
         >
           End
         </div>
-      </WaSplitPanel>
+      </SlSplitPanel>
 
       <div className="split-panel-snapping-dots" />
     </div>
@@ -339,34 +325,34 @@ const App = () => (
 Add the `disabled` attribute to prevent the divider from being repositioned.
 
 ```html:preview
-<wa-split-panel disabled>
+<sl-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;"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     Start
   </div>
   <div
     slot="end"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     End
   </div>
-</wa-split-panel>
+</sl-split-panel>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
 
 const App = () => (
-  <WaSplitPanel disabled>
+  <SlSplitPanel disabled>
     <div
       slot="start"
       style={{
         height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -378,7 +364,7 @@ const App = () => (
       slot="end"
       style={{
         height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -386,7 +372,7 @@ const App = () => (
     >
       End
     </div>
-  </WaSplitPanel>
+  </SlSplitPanel>
 );
 ```
 
@@ -400,34 +386,34 @@ Try resizing the example below with each option and notice how the panels respon
 
 ```html:preview
 <div class="split-panel-primary">
-  <wa-split-panel>
+  <sl-split-panel>
     <div
       slot="start"
-      style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
     >
       Start
     </div>
     <div
       slot="end"
-      style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
     >
       End
     </div>
-  </wa-split-panel>
+  </sl-split-panel>
 
-  <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>
+  <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>
 </div>
 
 <script>
   const container = document.querySelector('.split-panel-primary');
-  const splitPanel = container.querySelector('wa-split-panel');
-  const select = container.querySelector('wa-select');
+  const splitPanel = container.querySelector('sl-split-panel');
+  const select = container.querySelector('sl-select');
 
-  select.addEventListener('wa-change', () => (splitPanel.primary = select.value));
+  select.addEventListener('sl-change', () => (splitPanel.primary = select.value));
 </script>
 ```
 
@@ -435,21 +421,21 @@ Try resizing the example below with each option and notice how the panels respon
 
 ```jsx:react
 import { useState } from 'react';
-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';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
+import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
 
 const App = () => {
   const [primary, setPrimary] = useState('');
 
   return (
     <>
-      <WaSplitPanel primary={primary}>
+      <SlSplitPanel primary={primary}>
         <div
           slot="start"
           style={{
             height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
+            background: 'var(--sl-color-neutral-50)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
@@ -461,7 +447,7 @@ const App = () => {
           slot="end"
           style={{
             height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
+            background: 'var(--sl-color-neutral-50)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
@@ -469,18 +455,18 @@ const App = () => {
         >
           End
         </div>
-      </WaSplitPanel>
+      </SlSplitPanel>
 
-      <WaSelect
+      <SlSelect
         label="Primary Panel"
         value={primary}
         style={{ maxWidth: '200px', marginTop: '1rem' }}
-        onWaChange={event => setPrimary(event.target.value)}
+        onSlChange={event => setPrimary(event.target.value)}
       >
-        <WaMenuItem value="">None</WaMenuItem>
-        <WaMenuItem value="start">Start</WaMenuItem>
-        <WaMenuItem value="end">End</WaMenuItem>
-      </WaSelect>
+        <SlMenuItem value="">None</SlMenuItem>
+        <SlMenuItem value="start">Start</SlMenuItem>
+        <SlMenuItem value="end">End</SlMenuItem>
+      </SlSelect>
     </>
   );
 };
@@ -495,34 +481,34 @@ 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
-<wa-split-panel style="--min: 150px; --max: calc(100% - 150px);">
+<sl-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;"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     Start
   </div>
   <div
     slot="end"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     End
   </div>
-</wa-split-panel>
+</sl-split-panel>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
 
 const App = () => (
-  <WaSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}>
+  <SlSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}>
     <div
       slot="start"
       style={{
         height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -534,7 +520,7 @@ const App = () => (
       slot="end"
       style={{
         height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -542,7 +528,7 @@ const App = () => (
     >
       End
     </div>
-  </WaSplitPanel>
+  </SlSplitPanel>
 );
 ```
 
@@ -553,44 +539,44 @@ const App = () => (
 Create complex layouts that can be repositioned independently by nesting split panels.
 
 ```html:preview
-<wa-split-panel>
+<sl-split-panel>
   <div
     slot="start"
-    style="height: 400px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden"
+    style="height: 400px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden"
   >
     Start
   </div>
   <div slot="end">
-    <wa-split-panel vertical style="height: 400px;">
+    <sl-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"
+        style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden"
       >
         Top
       </div>
       <div
         slot="end"
-        style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden"
+        style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden"
       >
         Bottom
       </div>
-    </wa-split-panel>
+    </sl-split-panel>
   </div>
-</wa-split-panel>
+</sl-split-panel>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
 
 const App = () => (
-  <WaSplitPanel>
+  <SlSplitPanel>
     <div
       slot="start"
       style={{
         height: '400px',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -599,12 +585,12 @@ const App = () => (
       Start
     </div>
     <div slot="end">
-      <WaSplitPanel vertical style={{ height: '400px' }}>
+      <SlSplitPanel vertical style={{ height: '400px' }}>
         <div
           slot="start"
           style={{
             height: '100%',
-            background: 'var(--wa-color-surface-lowered)',
+            background: 'var(--sl-color-neutral-50)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
@@ -616,7 +602,7 @@ const App = () => (
           slot="end"
           style={{
             height: '100%',
-            background: 'var(--wa-color-surface-lowered)',
+            background: 'var(--sl-color-neutral-50)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
@@ -624,9 +610,9 @@ const App = () => (
         >
           End
         </div>
-      </WaSplitPanel>
+      </SlSplitPanel>
     </div>
-  </WaSplitPanel>
+  </SlSplitPanel>
 );
 ```
 
@@ -637,51 +623,37 @@ 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
-<wa-split-panel style="--divider-width: 20px;">
-  <wa-icon slot="divider" name="grip-vertical"></wa-icon>
+<sl-split-panel style="--divider-width: 20px;">
+  <sl-icon slot="divider" name="grip-vertical"></sl-icon>
   <div
     slot="start"
-    style="
-      height: 200px;
-      background: var(--wa-color-surface-lowered);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    "
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     Start
   </div>
   <div
     slot="end"
-    style="
-      height: 200px;
-      background: var(--wa-color-surface-lowered);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    "
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
   >
     End
   </div>
-</wa-split-panel>
+</sl-split-panel>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const App = () => (
-  <WaSplitPanel style={{ '--divider-width': '20px' }}>
-    <WaIcon slot="divider" name="grip-vertical" />
+  <SlSplitPanel style={{ '--divider-width': '20px' }}>
+    <SlIcon slot="divider" name="grip-vertical" />
     <div
       slot="start"
       style={{
         height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -693,7 +665,7 @@ const App = () => (
       slot="end"
       style={{
         height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
+        background: 'var(--sl-color-neutral-50)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center'
@@ -701,7 +673,7 @@ const App = () => (
     >
       End
     </div>
-  </WaSplitPanel>
+  </SlSplitPanel>
 );
 ```
 
@@ -711,61 +683,47 @@ Here's a more elaborate example that changes the divider's color and width and a
 
 ```html:preview
 <div class="split-panel-divider">
-  <wa-split-panel>
-    <wa-icon slot="divider" name="grip-vertical"></wa-icon>
+  <sl-split-panel>
+    <sl-icon slot="divider" name="grip-vertical"></sl-icon>
     <div
       slot="start"
-      style="
-        height: 200px;
-        background: var(--wa-color-surface-lowered);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-      "
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
     >
       Start
     </div>
     <div
       slot="end"
-      style="
-        height: 200px;
-        background: var(--wa-color-surface-lowered);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-      "
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
     >
       End
     </div>
-  </wa-split-panel>
+  </sl-split-panel>
 </div>
 
 <style>
-  .split-panel-divider wa-split-panel {
+  .split-panel-divider sl-split-panel {
     --divider-width: 2px;
   }
 
-  .split-panel-divider wa-split-panel::part(divider) {
-    background-color: var(--wa-color-red-50);
+  .split-panel-divider sl-split-panel::part(divider) {
+    background-color: var(--sl-color-pink-600);
   }
 
-  .split-panel-divider wa-icon {
+  .split-panel-divider sl-icon {
     position: absolute;
-    border-radius: var(--wa-corners-3x);
-    background: var(--wa-color-red-50);
-    color: var(--wa-color-white);
+    border-radius: var(--sl-border-radius-small);
+    background: var(--sl-color-pink-600);
+    color: var(--sl-color-neutral-0);
     padding: 0.5rem 0.125rem;
   }
 
-  .split-panel-divider wa-split-panel::part(divider):focus-visible {
-    background-color: var(--wa-color-blue-50);
+  .split-panel-divider sl-split-panel::part(divider):focus-visible {
+    background-color: var(--sl-color-primary-600);
   }
 
-  .split-panel-divider wa-split-panel:focus-within wa-icon {
-    background-color: var(--wa-color-blue-50);
-    color: var(--wa-color-white);
+  .split-panel-divider sl-split-panel:focus-within sl-icon {
+    background-color: var(--sl-color-primary-600);
+    color: var(--sl-color-neutral-0);
   }
 </style>
 ```
@@ -773,46 +731,46 @@ Here's a more elaborate example that changes the divider's color and width and a
 {% raw %}
 
 ```jsx:react
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
+import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
 
 const css = `
-  .split-panel-divider wa-split-panel {
+  .split-panel-divider sl-split-panel {
     --divider-width: 2px;
   }
 
-  .split-panel-divider wa-split-panel::part(divider) {
-    background-color: var(--wa-color-red-50);
+  .split-panel-divider sl-split-panel::part(divider) {
+    background-color: var(--sl-color-pink-600);
   }
 
-  .split-panel-divider wa-icon {
+  .split-panel-divider sl-icon {
     position: absolute;
-    border-radius: var(--wa-corners-half);
-    background: var(--wa-color-red-50);
-    color: var(--wa-color-white);
+    border-radius: var(--sl-border-radius-small);
+    background: var(--sl-color-pink-600);
+    color: var(--sl-color-neutral-0);
     padding: .5rem .125rem;
   }
 
-  .split-panel-divider wa-split-panel::part(divider):focus-visible {
-    background-color: var(--wa-color-blue-50);
+  .split-panel-divider sl-split-panel::part(divider):focus-visible {
+    background-color: var(--sl-color-primary-600);
   }
 
-  .split-panel-divider wa-split-panel:focus-within wa-icon {
-    background-color: var(--wa-color-blue-50);
-    color: var(--wa-color-white);
+  .split-panel-divider sl-split-panel:focus-within sl-icon {
+    background-color: var(--sl-color-primary-600);
+    color: var(--sl-color-neutral-0);
   }
 `;
 
 const App = () => (
   <>
     <div className="split-panel-divider">
-      <WaSplitPanel>
-        <WaIcon slot="divider" name="grip-vertical" />
+      <SlSplitPanel>
+        <SlIcon slot="divider" name="grip-vertical" />
         <div
           slot="start"
           style={{
             height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
+            background: 'var(--sl-color-neutral-50)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
@@ -824,7 +782,7 @@ const App = () => (
           slot="end"
           style={{
             height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
+            background: 'var(--sl-color-neutral-50)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
@@ -832,7 +790,7 @@ const App = () => (
         >
           End
         </div>
-      </WaSplitPanel>
+      </SlSplitPanel>
     </div>
 
     <style>{css}</style>

docs/pages/components/switch.md

@@ -6,13 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<wa-switch>Switch</wa-switch>
+<sl-switch>Switch</sl-switch>
 ```
 
 ```jsx:react
-import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
 
-const App = () => <WaSwitch>Switch</WaSwitch>;
+const App = () => <SlSwitch>Switch</SlSwitch>;
 ```
 
 :::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
-<wa-switch checked>Checked</wa-switch>
+<sl-switch checked>Checked</sl-switch>
 ```
 
 ```jsx:react
-import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
 
-const App = () => <WaSwitch checked>Checked</WaSwitch>;
+const App = () => <SlSwitch checked>Checked</SlSwitch>;
 ```
 
 ### Disabled
@@ -40,13 +40,13 @@ const App = () => <WaSwitch checked>Checked</WaSwitch>;
 Use the `disabled` attribute to disable the switch.
 
 ```html:preview
-<wa-switch disabled>Disabled</wa-switch>
+<sl-switch disabled>Disabled</sl-switch>
 ```
 
 ```jsx:react
-import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
 
-const App = () => <WaSwitch disabled>Disabled</WaSwitch>;
+const App = () => <SlSwitch disabled>Disabled</SlSwitch>;
 ```
 
 ### Sizes
@@ -54,23 +54,23 @@ const App = () => <WaSwitch disabled>Disabled</WaSwitch>;
 Use the `size` attribute to change a switch's size.
 
 ```html:preview
-<wa-switch size="small">Small</wa-switch>
+<sl-switch size="small">Small</sl-switch>
 <br />
-<wa-switch size="medium">Medium</wa-switch>
+<sl-switch size="medium">Medium</sl-switch>
 <br />
-<wa-switch size="large">Large</wa-switch>
+<sl-switch size="large">Large</sl-switch>
 ```
 
 ```jsx:react
-import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
 
 const App = () => (
   <>
-    <WaSwitch size="small">Small</WaSwitch>
+    <SlSwitch size="small">Small</SlSwitch>
     <br />
-    <WaSwitch size="medium">Medium</WaSwitch>
+    <SlSwitch size="medium">Medium</SlSwitch>
     <br />
-    <WaSwitch size="large">Large</WaSwitch>
+    <SlSwitch size="large">Large</SlSwitch>
   </>
 );
 ```
@@ -80,16 +80,16 @@ const App = () => (
 Use the available custom properties to change how the switch is styled.
 
 ```html:preview
-<wa-switch style="--width: 80px; --height: 40px; --thumb-size: 36px;">Really big</wa-switch>
+<sl-switch style="--width: 80px; --height: 40px; --thumb-size: 36px;">Really big</sl-switch>
 ```
 
 {% raw %}
 
 ```jsx:react
-import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
 
 const App = () => (
-  <WaSwitch
+  <SlSwitch
     style={{
       '--width': '80px',
       '--height': '32px',

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
-<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-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-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>
+  <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>
 ```
 
 ```jsx:react
-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';
+import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
 
 const App = () => (
-  <WaTabGroup>
-    <WaTab slot="nav" panel="general">
+  <SlTabGroup>
+    <SlTab slot="nav" panel="general">
       General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
       Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
       Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
       Disabled
-    </WaTab>
+    </SlTab>
 
-    <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>
+    <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>
 );
 ```
 
@@ -56,44 +56,44 @@ const App = () => (
 Tabs can be shown on the bottom by setting `placement` to `bottom`.
 
 ```html:preview
-<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-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-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>
+  <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>
 ```
 
 ```jsx:react
-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';
+import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
 
 const App = () => (
-  <WaTabGroup placement="bottom">
-    <WaTab slot="nav" panel="general">
+  <SlTabGroup placement="bottom">
+    <SlTab slot="nav" panel="general">
       General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
       Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
       Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
       Disabled
-    </WaTab>
+    </SlTab>
 
-    <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>
+    <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>
 );
 ```
 
@@ -102,44 +102,44 @@ const App = () => (
 Tabs can be shown on the starting side by setting `placement` to `start`.
 
 ```html:preview
-<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-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-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>
+  <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>
 ```
 
 ```jsx:react
-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';
+import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
 
 const App = () => (
-  <WaTabGroup placement="start">
-    <WaTab slot="nav" panel="general">
+  <SlTabGroup placement="start">
+    <SlTab slot="nav" panel="general">
       General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
       Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
       Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
       Disabled
-    </WaTab>
+    </SlTab>
 
-    <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>
+    <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>
 );
 ```
 
@@ -148,44 +148,44 @@ const App = () => (
 Tabs can be shown on the ending side by setting `placement` to `end`.
 
 ```html:preview
-<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-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-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>
+  <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>
 ```
 
 ```jsx:react
-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';
+import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
 
 const App = () => (
-  <WaTabGroup placement="end">
-    <WaTab slot="nav" panel="general">
+  <SlTabGroup placement="end">
+    <SlTab slot="nav" panel="general">
       General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
       Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
       Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
       Disabled
-    </WaTab>
+    </SlTab>
 
-    <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>
+    <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>
 );
 ```
 
@@ -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
-<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-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-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>
+  <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>
 
 <script>
   const tabGroup = document.querySelector('.tabs-closable');
 
-  tabGroup.addEventListener('wa-close', async event => {
+  tabGroup.addEventListener('sl-close', async event => {
     const tab = event.target;
-    const panel = tabGroup.querySelector(`wa-tab-panel[name="${tab.panel}"]`);
+    const panel = tabGroup.querySelector(`sl-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 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';
+import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
 
 const App = () => {
   function handleClose(event) {
@@ -238,7 +238,7 @@ const App = () => {
     // would significantly complicate the example.
     //
     const tab = event.target;
-    const tabGroup = tab.closest('wa-tab-group');
+    const tabGroup = tab.closest('sl-tab-group');
     const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`);
 
     tab.remove();
@@ -246,25 +246,25 @@ const App = () => {
   }
 
   return (
-    <WaTabGroup className="tabs-closable" onWaClose={handleClose}>
-      <WaTab slot="nav" panel="general">
+    <SlTabGroup className="tabs-closable" onSlClose={handleClose}>
+      <SlTab slot="nav" panel="general">
         General
-      </WaTab>
-      <WaTab slot="nav" panel="closable-1" closable onWaClose={handleClose}>
+      </SlTab>
+      <SlTab slot="nav" panel="closable-1" closable onSlClose={handleClose}>
         Closable 1
-      </WaTab>
-      <WaTab slot="nav" panel="closable-2" closable onWaClose={handleClose}>
+      </SlTab>
+      <SlTab slot="nav" panel="closable-2" closable onSlClose={handleClose}>
         Closable 2
-      </WaTab>
-      <WaTab slot="nav" panel="closable-3" closable onWaClose={handleClose}>
+      </SlTab>
+      <SlTab slot="nav" panel="closable-3" closable onSlClose={handleClose}>
         Closable 3
-      </WaTab>
+      </SlTab>
 
-      <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>
+      <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>
   );
 };
 ```
@@ -274,140 +274,140 @@ const App = () => {
 When there are more tabs than horizontal space allows, the nav will be scrollable.
 
 ```html:preview
-<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-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-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>
+  <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>
 ```
 
 ```jsx:react
-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';
+import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
 
 const App = () => (
-  <WaTabGroup>
-    <WaTab slot="nav" panel="tab-1">
+  <SlTabGroup>
+    <SlTab slot="nav" panel="tab-1">
       Tab 1
-    </WaTab>
-    <WaTab slot="nav" panel="tab-2">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-2">
       Tab 2
-    </WaTab>
-    <WaTab slot="nav" panel="tab-3">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-3">
       Tab 3
-    </WaTab>
-    <WaTab slot="nav" panel="tab-4">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-4">
       Tab 4
-    </WaTab>
-    <WaTab slot="nav" panel="tab-5">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-5">
       Tab 5
-    </WaTab>
-    <WaTab slot="nav" panel="tab-6">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-6">
       Tab 6
-    </WaTab>
-    <WaTab slot="nav" panel="tab-7">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-7">
       Tab 7
-    </WaTab>
-    <WaTab slot="nav" panel="tab-8">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-8">
       Tab 8
-    </WaTab>
-    <WaTab slot="nav" panel="tab-9">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-9">
       Tab 9
-    </WaTab>
-    <WaTab slot="nav" panel="tab-10">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-10">
       Tab 10
-    </WaTab>
-    <WaTab slot="nav" panel="tab-11">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-11">
       Tab 11
-    </WaTab>
-    <WaTab slot="nav" panel="tab-12">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-12">
       Tab 12
-    </WaTab>
-    <WaTab slot="nav" panel="tab-13">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-13">
       Tab 13
-    </WaTab>
-    <WaTab slot="nav" panel="tab-14">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-14">
       Tab 14
-    </WaTab>
-    <WaTab slot="nav" panel="tab-15">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-15">
       Tab 15
-    </WaTab>
-    <WaTab slot="nav" panel="tab-16">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-16">
       Tab 16
-    </WaTab>
-    <WaTab slot="nav" panel="tab-17">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-17">
       Tab 17
-    </WaTab>
-    <WaTab slot="nav" panel="tab-18">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-18">
       Tab 18
-    </WaTab>
-    <WaTab slot="nav" panel="tab-19">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-19">
       Tab 19
-    </WaTab>
-    <WaTab slot="nav" panel="tab-20">
+    </SlTab>
+    <SlTab slot="nav" panel="tab-20">
       Tab 20
-    </WaTab>
+    </SlTab>
 
-    <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>
+    <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>
 );
 ```
 
@@ -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
-<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-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-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>
+  <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>
 ```
 
 ```jsx:react
-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';
+import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
 
 const App = () => (
-  <WaTabGroup activation="manual">
-    <WaTab slot="nav" panel="general">
+  <SlTabGroup activation="manual">
+    <SlTab slot="nav" panel="general">
       General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
       Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
       Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
       Disabled
-    </WaTab>
+    </SlTab>
 
-    <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>
+    <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>
 );
 ```

docs/pages/components/tab-panel.md

@@ -6,44 +6,44 @@ layout: component
 ---
 
 ```html:preview
-<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-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-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>
+  <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>
 ```
 
 ```jsx:react
-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';
+import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
+import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
+import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
 
 const App = () => (
-  <WaTabGroup>
-    <WaTab slot="nav" panel="general">
+  <SlTabGroup>
+    <SlTab slot="nav" panel="general">
       General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
       Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
       Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
       Disabled
-    </WaTab>
+    </SlTab>
 
-    <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>
+    <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>
 );
 ```
 

docs/pages/components/tab.md

@@ -6,21 +6,21 @@ layout: component
 ---
 
 ```html:preview
-<wa-tab>Tab</wa-tab>
-<wa-tab active>Active</wa-tab>
-<wa-tab closable>Closable</wa-tab>
-<wa-tab disabled>Disabled</wa-tab>
+<sl-tab>Tab</sl-tab>
+<sl-tab active>Active</sl-tab>
+<sl-tab closable>Closable</sl-tab>
+<sl-tab disabled>Disabled</sl-tab>
 ```
 
 ```jsx:react
-import WaTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
 
 const App = () => (
   <>
-    <WaTab>Tab</WaTab>
-    <WaTab active>Active</WaTab>
-    <WaTab closable>Closable</WaTab>
-    <WaTab disabled>Disabled</WaTab>
+    <SlTab>Tab</SlTab>
+    <SlTab active>Active</SlTab>
+    <SlTab closable>Closable</SlTab>
+    <SlTab disabled>Disabled</SlTab>
   </>
 );
 ```

docs/pages/components/tag.md

@@ -6,23 +6,23 @@ layout: component
 ---
 
 ```html:preview
-<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>
+<sl-tag variant="primary">Primary</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>
 ```
 
 ```jsx:react
-import WaTag from '@shoelace-style/shoelace/dist/react/tag';
+import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
 
 const App = () => (
   <>
-    <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>
+    <SlTag variant="primary">Primary</SlTag>
+    <SlTag variant="success">Success</SlTag>
+    <SlTag variant="neutral">Neutral</SlTag>
+    <SlTag variant="warning">Warning</SlTag>
+    <SlTag variant="danger">Danger</SlTag>
   </>
 );
 ```
@@ -34,19 +34,19 @@ const App = () => (
 Use the `size` attribute to change a tab's size.
 
 ```html:preview
-<wa-tag size="small">Small</wa-tag>
-<wa-tag size="medium">Medium</wa-tag>
-<wa-tag size="large">Large</wa-tag>
+<sl-tag size="small">Small</sl-tag>
+<sl-tag size="medium">Medium</sl-tag>
+<sl-tag size="large">Large</sl-tag>
 ```
 
 ```jsx:react
-import WaTag from '@shoelace-style/shoelace/dist/react/tag';
+import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
 
 const App = () => (
   <>
-    <WaTag size="small">Small</WaTag>
-    <WaTag size="medium">Medium</WaTag>
-    <WaTag size="large">Large</WaTag>
+    <SlTag size="small">Small</SlTag>
+    <SlTag size="medium">Medium</SlTag>
+    <SlTag size="large">Large</SlTag>
   </>
 );
 ```
@@ -56,25 +56,25 @@ const App = () => (
 Use the `pill` attribute to give tabs rounded edges.
 
 ```html:preview
-<wa-tag size="small" pill>Small</wa-tag>
-<wa-tag size="medium" pill>Medium</wa-tag>
-<wa-tag size="large" pill>Large</wa-tag>
+<sl-tag size="small" pill>Small</sl-tag>
+<sl-tag size="medium" pill>Medium</sl-tag>
+<sl-tag size="large" pill>Large</sl-tag>
 ```
 
 ```jsx:react
-import WaTag from '@shoelace-style/shoelace/dist/react/tag';
+import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
 
 const App = () => (
   <>
-    <WaTag size="small" pill>
+    <SlTag size="small" pill>
       Small
-    </WaTag>
-    <WaTag size="medium" pill>
+    </SlTag>
+    <SlTag size="medium" pill>
       Medium
-    </WaTag>
-    <WaTag size="large" pill>
+    </SlTag>
+    <SlTag size="large" pill>
       Large
-    </WaTag>
+    </SlTag>
   </>
 );
 ```
@@ -85,15 +85,15 @@ Use the `removable` attribute to add a remove button to the tag.
 
 ```html:preview
 <div class="tags-removable">
-  <wa-tag size="small" removable>Small</wa-tag>
-  <wa-tag size="medium" removable>Medium</wa-tag>
-  <wa-tag size="large" removable>Large</wa-tag>
+  <sl-tag size="small" removable>Small</sl-tag>
+  <sl-tag size="medium" removable>Medium</sl-tag>
+  <sl-tag size="large" removable>Large</sl-tag>
 </div>
 
 <script>
   const div = document.querySelector('.tags-removable');
 
-  div.addEventListener('wa-remove', event => {
+  div.addEventListener('sl-remove', event => {
     const tag = event.target;
     tag.style.opacity = '0';
     setTimeout(() => (tag.style.opacity = '1'), 2000);
@@ -101,18 +101,18 @@ Use the `removable` attribute to add a remove button to the tag.
 </script>
 
 <style>
-  .tags-removable wa-tag {
-    transition: var(--wa-transition-fast) opacity;
+  .tags-removable sl-tag {
+    transition: var(--sl-transition-medium) opacity;
   }
 </style>
 ```
 
 ```jsx:react
-import WaTag from '@shoelace-style/shoelace/dist/react/tag';
+import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
 
 const css = `
-  .tags-removable wa-tag {
-    transition: var(--wa-transition-fast) opacity;
+  .tags-removable sl-tag {
+    transition: var(--sl-transition-medium) opacity;
   }
 `;
 
@@ -126,17 +126,17 @@ const App = () => {
   return (
     <>
       <div className="tags-removable">
-        <WaTag size="small" removable onWaRemove={handleRemove}>
+        <SlTag size="small" removable onSlRemove={handleRemove}>
           Small
-        </WaTag>
+        </SlTag>
 
-        <WaTag size="medium" removable onWaRemove={handleRemove}>
+        <SlTag size="medium" removable onSlRemove={handleRemove}>
           Medium
-        </WaTag>
+        </SlTag>
 
-        <WaTag size="large" removable onWaRemove={handleRemove}>
+        <SlTag size="large" removable onSlRemove={handleRemove}>
           Large
-        </WaTag>
+        </SlTag>
       </div>
 
       <style>{css}</style>