update settings

* remove square, stretch, and squish spacing tokens

* remove units from base tokens

* rename corner tokens with t-shirt size scale

* rename 'font-size' tokens to 'size'

* rename 'neutral' primitives to 'base'

* remove black and white tokens

* improve 'form-controls' tokens

* reintroduce granular focus ring tokens

* fix themer styles

* tweak shadow styles

* improve naming and scope of foundational colors

* overhaul color naming and add new themes

* more classic sl component styles

* make 'chic' theme dark by default

* adjust table row colors

* remove deprecated properties from 'classic' theme

* remove mistakenly committed stylesheets

* revert adjustment to space properties

* delete web-types.json

* revert "rename 'font-size' tokens to 'size'"

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "debug.enableStatusBarColor": false
 }

cspell.json

@@ -47,6 +47,7 @@
     "dropdowns",
     "easings",
     "endraw",
+    "endregion",
     "enterkeyhint",
     "eqeqeq",
     "erroneou",
@@ -102,6 +103,7 @@
     "monospace",
     "mousedown",
     "mousemove",
+    "mouseout",
     "mouseup",
     "multiselectable",
     "nextjs",
@@ -113,6 +115,7 @@
     "Numberish",
     "oklab",
     "oklch",
+    "onscrollend",
     "outdir",
     "ParamagicDev",
     "peta",
@@ -173,7 +176,8 @@
     "WCAG",
     "webawesome",
     "WEBP",
-    "Webpacker"
+    "Webpacker",
+    "xmark"
   ],
   "ignorePaths": [
     "package.json",

custom-elements-manifest.config.js

@@ -38,6 +38,7 @@ export default {
         customElementsManifest.package = { name, description, version, author, homepage, license };
       }
     },
+
     // Infer tag names because we no longer use @customElement decorators.
     {
       name: 'wa-infer-tag-names',
@@ -66,6 +67,7 @@ export default {
         }
       }
     },
+
     // Parse custom jsDoc tags
     {
       name: 'wa-custom-tags',
@@ -137,6 +139,7 @@ export default {
         }
       }
     },
+
     {
       name: 'wa-react-event-names',
       analyzePhase({ ts, node, moduleDoc }) {
@@ -155,6 +158,7 @@ export default {
         }
       }
     },
+
     {
       name: 'wa-translate-module-paths',
       packageLinkPhase({ customElementsManifest }) {
@@ -191,6 +195,7 @@ export default {
         });
       }
     },
+
     // Generate custom VS Code data
     customElementVsCodePlugin({
       outdir,
@@ -202,9 +207,11 @@ export default {
         }
       ]
     }),
+
     customElementJetBrainsPlugin({
       outdir: './dist',
       excludeCss: true,
+      packageJson: false,
       referencesTemplate: (_, tag) => {
         return {
           name: 'Documentation',

custom-elements-manifest.mjs

@@ -0,0 +1,217 @@
+import * as path from 'path';
+import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
+import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
+import { parse } from 'comment-parser';
+import { pascalCase } from 'pascal-case';
+import commandLineArgs from 'command-line-args';
+import fs from 'fs';
+
+const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+const { name, description, version, author, homepage, license } = packageData;
+
+const { outdir } = commandLineArgs([
+  { name: 'litelement', type: String },
+  { name: 'analyze', defaultOption: true },
+  { name: 'outdir', type: String }
+]);
+
+function noDash(string) {
+  return string.replace(/^\s?-/, '').trim();
+}
+
+function replace(string, terms) {
+  terms.forEach(({ from, to }) => {
+    string = string?.replace(from, to);
+  });
+
+  return string;
+}
+
+export default {
+  globs: ['src/components/**/*.component.ts'],
+  exclude: ['**/*.styles.ts', '**/*.test.ts'],
+  plugins: [
+    // Append package data
+    {
+      name: 'wa-package-data',
+      packageLinkPhase({ customElementsManifest }) {
+        customElementsManifest.package = { name, description, version, author, homepage, license };
+      }
+    },
+    // Infer tag names because we no longer use @customElement decorators.
+    {
+      name: 'wa-infer-tag-names',
+      analyzePhase({ ts, node, moduleDoc }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration: {
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+
+            const importPath = moduleDoc.path;
+
+            // This is kind of a best guess at components. "thing.component.ts"
+            if (!importPath.endsWith('.component.ts')) {
+              return;
+            }
+
+            const tagNameWithoutPrefix = path.basename(importPath, '.component.ts');
+            const tagName = 'wa-' + tagNameWithoutPrefix;
+
+            classDoc.tagNameWithoutPrefix = tagNameWithoutPrefix;
+            classDoc.tagName = tagName;
+
+            // This used to be set to true by @customElement
+            classDoc.customElement = true;
+          }
+        }
+      }
+    },
+    // Parse custom jsDoc tags
+    {
+      name: 'wa-custom-tags',
+      analyzePhase({ ts, node, moduleDoc }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration: {
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+            const customTags = ['animation', 'dependency', 'documentation', 'since', 'status', 'title'];
+            let customComments = '/**';
+
+            node.jsDoc?.forEach(jsDoc => {
+              jsDoc?.tags?.forEach(tag => {
+                const tagName = tag.tagName.getText();
+
+                if (customTags.includes(tagName)) {
+                  customComments += `\n * @${tagName} ${tag.comment}`;
+                }
+              });
+            });
+
+            // This is what allows us to map JSDOC comments to ReactWrappers.
+            classDoc['jsDoc'] = node.jsDoc?.map(jsDoc => jsDoc.getFullText()).join('\n');
+
+            const parsed = parse(`${customComments}\n */`);
+            parsed[0].tags?.forEach(t => {
+              switch (t.tag) {
+                // Animations
+                case 'animation':
+                  if (!Array.isArray(classDoc['animations'])) {
+                    classDoc['animations'] = [];
+                  }
+                  classDoc['animations'].push({
+                    name: t.name,
+                    description: noDash(t.description)
+                  });
+                  break;
+
+                // Dependencies
+                case 'dependency':
+                  if (!Array.isArray(classDoc['dependencies'])) {
+                    classDoc['dependencies'] = [];
+                  }
+                  classDoc['dependencies'].push(t.name);
+                  break;
+
+                // Value-only metadata tags
+                case 'documentation':
+                case 'since':
+                case 'status':
+                case 'title':
+                  classDoc[t.tag] = t.name;
+                  break;
+
+                // All other tags
+                default:
+                  if (!Array.isArray(classDoc[t.tag])) {
+                    classDoc[t.tag] = [];
+                  }
+
+                  classDoc[t.tag].push({
+                    name: t.name,
+                    description: t.description,
+                    type: t.type || undefined
+                  });
+              }
+            });
+          }
+        }
+      }
+    },
+    {
+      name: 'wa-react-event-names',
+      analyzePhase({ ts, node, moduleDoc }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration: {
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+
+            if (classDoc?.events) {
+              classDoc.events.forEach(event => {
+                event.reactName = `on${pascalCase(event.name)}`;
+                event.eventName = `${pascalCase(event.name)}Event`;
+              });
+            }
+          }
+        }
+      }
+    },
+    {
+      name: 'wa-translate-module-paths',
+      packageLinkPhase({ customElementsManifest }) {
+        customElementsManifest?.modules?.forEach(mod => {
+          //
+          // CEM paths look like this:
+          //
+          //  src/components/button/button.ts
+          //
+          // But we want them to look like this:
+          //
+          //  components/button/button.js
+          //
+          const terms = [
+            { from: /^src\//, to: '' }, // Strip the src/ prefix
+            { from: /\.component.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
+          ];
+
+          mod.path = replace(mod.path, terms);
+
+          for (const ex of mod.exports ?? []) {
+            ex.declaration.module = replace(ex.declaration.module, terms);
+          }
+
+          for (const dec of mod.declarations ?? []) {
+            if (dec.kind === 'class') {
+              for (const member of dec.members ?? []) {
+                if (member.inheritedFrom) {
+                  member.inheritedFrom.module = replace(member.inheritedFrom.module, terms);
+                }
+              }
+            }
+          }
+        });
+      }
+    },
+    // Generate custom VS Code data
+    customElementVsCodePlugin({
+      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-', '')}`
+        };
+      }
+    })
+  ]
+};

docs/_includes/component.njk

@@ -155,12 +155,12 @@
             </td>
             <td style="text-align: center;">
               {% if prop.reflects %}
-                <wa-icon label="yes" name="check-lg"></wa-icon>
+                <wa-icon label="yes" name="check" variant="solid"></wa-icon>
               {% endif %}
             </td>
             <td>
               {% if prop.type.text %}
-                <code>{{ prop.type.text | markdownInline | safe }}</code>
+                <code>{{ prop.type.text | trimPipes | markdownInline | safe }}</code>
               {% else %}
                 -
               {% endif %}
@@ -211,7 +211,7 @@
             <td>{{ event.description | markdownInline | safe }}</td>
             <td>
               {% if event.type.text %}
-                <code>{{ event.type.text }}</code>
+                <code>{{ event.type.text | trimPipes }}</code>
               {% else %}
                 -
               {% endif %}
@@ -245,7 +245,7 @@
               {% if method.parameters.length %}
                 <code>
                   {% for param in method.parameters %}
-                    {{ param.name }}: {{ param.type.text }}{% if not loop.last %},{% endif %}
+                    {{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %}
                   {% endfor %}
                 </code>
               {% else %}

docs/_includes/default.njk

@@ -86,13 +86,13 @@
 
       <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-icon slot="prefix" name="github" family="brands"></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-icon slot="prefix" name="star" variant="solid"></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-icon slot="prefix" name="twitter" family="brands"></wa-icon> Follow
         </wa-button>
       </div>
 

docs/_includes/sidebar.njk

@@ -16,6 +16,7 @@
           localStorage.setItem('theme', toggle.checked ? 'dark' : 'light');
         });
       </script>
+      <li><a href="/experimental/sandbox">Sandbox</a></li>
     </ul>
   </li>
   <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>
+            <wa-icon name="grip-vertical" variant="solid"></wa-icon>
           </div>
         </div>
 

docs/_utilities/markdown.cjs

@@ -24,16 +24,16 @@ 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';
+  let icon = 'circle-info';
+  if (type === 'warning') icon = 'circle-exclamation';
+  if (type === 'danger') icon = 'triangle-exclamation';
 
   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>
+            <wa-icon slot="icon" name="${icon}" variant="regular"></wa-icon>
         `;
       }
       return '</wa-alert>\n';

docs/assets/scripts/search.js

@@ -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>
+              <wa-icon name="circle-xmark" variant="regular"></wa-icon>
             </button>
           </div>
         </div>
@@ -44,8 +44,8 @@
           <div class="search__empty">No matching pages</div>
         </div>
         <footer class="search__footer">
-          <small><kbd>↑</kbd> <kbd>↓</kbd> Navigate</small>
-          <small><kbd>↲</kbd> Select</small>
+          <small><kbd><wa-icon label="Up" name="arrow-up"></wa-icon></kbd> <kbd><wa-icon label="Down" name="arrow-down"></wa-icon></kbd> Navigate</small>
+          <small><kbd><wa-icon label="Enter" name="arrow-turn-down-left"></wa-icon></kbd> Select</small>
           <small><kbd>Esc</kbd> Close</small>
         </footer>
       </div>
@@ -297,16 +297,16 @@
           icon = 'book';
         }
         if (page.url.includes('components/')) {
-          icon = 'puzzle';
+          icon = 'puzzle-piece';
         }
         if (page.url.includes('tokens/')) {
-          icon = 'palette2';
+          icon = 'swatchbook';
         }
         if (page.url.includes('utilities/')) {
           icon = 'wrench';
         }
         if (page.url.includes('tutorials/')) {
-          icon = 'joystick';
+          icon = 'gamepad';
         }
 
         li.classList.add('search__result');

docs/assets/styles/code-previews.css

@@ -1,17 +1,17 @@
 /* Interactive code blocks */
 .code-preview {
   position: relative;
-  border-radius: var(--wa-corners-1x);
-  background-color: var(--wa-color-surface-lowered);
+  border-radius: var(--wa-corners-s);
+  background-color: var(--wa-color-neutral-fill-subtle);
   margin-bottom: var(--wa-space-xl);
 }
 
 .code-preview__preview {
   position: relative;
-  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
   border-bottom: none;
-  border-top-left-radius: var(--wa-corners-1x);
-  border-top-right-radius: var(--wa-corners-1x);
+  border-top-left-radius: var(--wa-corners-s);
+  border-top-right-radius: var(--wa-corners-s);
   background-color: var(--wa-color-surface-default);
   min-width: 20rem;
   max-width: 100%;
@@ -42,8 +42,8 @@
   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);
+  border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+  border-top-right-radius: var(--wa-corners-s);
   cursor: ew-resize;
 }
 
@@ -58,7 +58,7 @@
 }
 
 .code-preview__source {
-  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
   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: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+  border-bottom-left-radius: var(--wa-corners-s);
+  border-bottom-right-radius: var(--wa-corners-s);
   display: flex;
 }
 
@@ -97,7 +97,7 @@
 }
 
 .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: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
 }
 
 .code-preview__button--html,
@@ -120,18 +120,18 @@
 }
 
 .code-preview__button:first-of-type {
-  border-bottom-left-radius: var(--wa-corners-1x);
+  border-bottom-left-radius: var(--wa-corners-s);
 }
 
 .code-preview__button:last-of-type {
-  border-bottom-right-radius: var(--wa-corners-1x);
+  border-bottom-right-radius: var(--wa-corners-s);
 }
 
 .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 var(--wa-border-width-thin) var(--wa-color-brand-border-subtle);
   border-right-color: transparent;
-  background-color: var(--wa-color-brand-fill-muted);
+  background-color: var(--wa-color-brand-fill-subtle);
   color: var(--wa-color-brand-text-on-surface);
   z-index: 1;
 }

docs/assets/styles/docs.css

@@ -82,7 +82,7 @@ h1:first-of-type {
 }
 
 .badges img {
-  border-radius: var(--wa-corners-1x);
+  border-radius: var(--wa-corners-s);
 }
 
 .callout img {
@@ -110,7 +110,7 @@ svg.logo {
 
 .anchor-heading a::after {
   content: '#';
-  color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-tint-hover));
+  color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
   margin-inline: 0.5rem;
   opacity: 0;
   transition: 100ms opacity;
@@ -183,7 +183,7 @@ pre > code {
 }
 
 pre .token.comment {
-  color: var(--wa-color-neutral-40);
+  color: var(--wa-color-base-40);
 }
 
 pre .token.prolog,
@@ -191,7 +191,7 @@ pre .token.doctype,
 pre .token.cdata,
 pre .token.operator,
 pre .token.punctuation {
-  color: var(--wa-color-neutral-40);
+  color: var(--wa-color-base-40);
 }
 
 .namespace {
@@ -202,12 +202,12 @@ pre .token.property,
 pre .token.keyword,
 pre .token.tag,
 pre .token.url {
-  color: var(--wa-color-blue-40);
+  color: var(--wa-color-brand-text-on-fill);
 }
 
 pre .token.symbol,
 pre .token.deleted {
-  color: var(--wa-color-red-40);
+  color: var(--wa-color-danger-text-on-fill);
 }
 
 pre .token.boolean,
@@ -218,24 +218,24 @@ pre .token.string,
 pre .token.char,
 pre .token.builtin,
 pre .token.inserted {
-  color: var(--wa-color-green-40);
+  color: var(--wa-color-success-text-on-fill);
 }
 
 pre .token.atrule,
 pre .token.attr-value,
 pre .token.number,
 pre .token.variable {
-  color: #5c47ae; /* purple-40 */
+  color: var(--wa-color-warning-text-on-fill);
 }
 
 pre .token.function,
 pre .token.class-name,
 pre .token.regex {
-  color: #c86d2c; /* orange-40 */
+  color: var(--wa-color-danger-text-on-fill);
 }
 
 pre .token.important {
-  color: var(--wa-color-red-40);
+  color: var(--wa-color-danger-text-on-fill);
 }
 
 pre .token.important,
@@ -253,24 +253,24 @@ pre .token.italic {
   top: 0;
   right: 0;
   white-space: normal;
-  color: var(--wa-color-neutral-text-on-muted-alt);
+  color: var(--wa-color-neutral-text-on-fill-alt);
   transition:
     150ms opacity,
     150ms scale;
 }
 
 .copy-code-button::part(button) {
-  background-color: var(--wa-color-neutral-fill-muted);
-  border-radius: 0 var(--wa-corners-1x) 0 var(--wa-corners-1x);
+  background-color: var(--wa-color-neutral-fill-subtle);
+  border-radius: 0 var(--wa-corners-s) 0 var(--wa-corners-s);
   padding: 0.75rem;
 }
 
 .copy-code-button::part(button):hover {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted), var(--wa-color-tint-hover));
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-subtle), var(--wa-color-mix-hover));
 }
 
 .copy-code-button::part(button):active {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted), var(--wa-color-tint-active));
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-subtle), var(--wa-color-mix-active));
 }
 
 pre .copy-code-button {
@@ -311,7 +311,7 @@ pre:hover .copy-code-button,
   min-width: 300px;
   max-width: 50%;
   background: var(--wa-color-surface-lowered);
-  border-radius: var(--wa-corners-1x);
+  border-radius: var(--wa-corners-s);
   padding: var(--wa-space-m);
   margin-left: var(--wa-space-m);
 }
@@ -343,7 +343,7 @@ pre:hover .copy-code-button,
   z-index: 20;
   width: var(--docs-sidebar-width);
   background-color: var(--docs-background-color);
-  border-right: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border-right: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
   border-radius: 0;
   padding: 2rem;
   margin: 0;
@@ -362,11 +362,11 @@ pre:hover .copy-code-button,
 }
 
 #sidebar:hover::-webkit-scrollbar-thumb {
-  background: var(--wa-color-neutral-60);
+  background: var(--wa-color-base-60);
 }
 
 #sidebar:hover::-webkit-scrollbar-track {
-  background: var(--wa-color-neutral-95);
+  background: var(--wa-color-base-95);
 }
 
 #sidebar > header {
@@ -392,7 +392,7 @@ pre:hover .copy-code-button,
 #sidebar nav h2 {
   font-size: var(--wa-font-size-m);
   font-weight: var(--wa-font-weight-medium);
-  border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
   margin: var(--wa-space-xl) 0 var(--wa-space-xs) 0;
 }
 
@@ -517,7 +517,7 @@ main {
   max-height: calc(100vh - 6rem);
   font-size: var(--wa-font-size-s);
   line-height: 1.33;
-  border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+  border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
   list-style: none;
   padding: 1rem 0;
   margin: 0;
@@ -581,7 +581,7 @@ main {
     gap: 1rem 1.5rem;
     position: static;
     border: none;
-    border-bottom: solid 1px var(--wa-color-surface-outline);
+    border-bottom: solid 1px var(--wa-color-surface-border);
     border-radius: 0;
     padding: 1rem 1.5rem 1rem 0.5rem; /* extra right padding to hide the fade effect */
     margin-top: 1rem;
@@ -624,7 +624,7 @@ main {
   left: 0.25rem;
   height: auto;
   width: auto;
-  color: var(--wa-color-neutral-fill-vivid-alt);
+  color: var(--wa-color-neutral-spot);
   border: none;
   border-radius: 50%;
   background: var(--wa-color-surface-default);
@@ -672,7 +672,7 @@ html.sidebar-open #menu-toggle {
 
   details,
   pre {
-    border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
+    border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
   }
 
   details summary {
@@ -707,8 +707,8 @@ html.sidebar-open #menu-toggle {
 
   .code-preview__source-group {
     border-bottom: solid 1px var(--wa-border-width-thin);
-    border-bottom-left-radius: var(--wa-corners-1x);
-    border-bottom-right-radius: var(--wa-corners-1x);
+    border-bottom-left-radius: var(--wa-corners-s);
+    border-bottom-right-radius: var(--wa-corners-s);
   }
 
   #sidebar {
@@ -829,7 +829,7 @@ html.sidebar-open #menu-toggle {
 }
 
 .repo-button wa-icon {
-  color: var(--wa-color-text-inverse);
+  color: var(--wa-color-neutral-text-on-spot);
 }
 
 @media screen and (max-width: 400px) {
@@ -847,19 +847,19 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 /* Border demos */
 .border-demo {
   height: 60px;
-  border-left: solid 1px var(--wa-color-brand-fill-vivid);
+  border-left: solid 1px var(--wa-color-brand-spot);
 }
 
 .corner-demo {
   width: 3rem;
   height: 3rem;
-  background: var(--wa-color-brand-fill-vivid);
+  background: var(--wa-color-brand-spot);
 }
 
 /* Transition demo */
 .transition-demo {
   position: relative;
-  background: var(--wa-color-neutral-fill-muted);
+  background: var(--wa-color-neutral-fill-subtle);
   width: 8rem;
   height: 2rem;
 }
@@ -867,7 +867,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 .transition-demo:after {
   content: '';
   position: absolute;
-  background-color: var(--wa-color-brand-fill-vivid);
+  background-color: var(--wa-color-brand-spot);
   top: 0;
   left: 0;
   width: 0;
@@ -882,7 +882,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 
 /* Spacing demo */
 .spacing-demo {
-  background: var(--wa-color-brand-fill-vivid);
+  background: var(--wa-color-brand-spot);
 }
 
 /* Shadow demo */
@@ -919,11 +919,11 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 
 .color-palette__swatch {
   height: 3rem;
-  border-radius: var(--wa-corners-half);
+  border-radius: var(--wa-corners-xs);
 }
 
 .color-palette__swatch--border {
-  box-shadow: inset 0 0 0 1px var(--wa-color-surface-outline);
+  box-shadow: inset 0 0 0 1px var(--wa-color-surface-border);
 }
 
 @media screen and (max-width: 1200px) {

docs/assets/styles/search.css

@@ -2,26 +2,26 @@
 :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-border-color: var(--wa-form-controls-resting-color);
   --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-border-color: var(--wa-color-surface-border);
   --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-border-radius: calc(2 * var(--wa-corners-s));
 
   --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-icon-color: var(--wa-color-neutral-spot);
+  --docs-search-icon-color-active: color-mix(in lch, var(--wa-color-neutral-spot), 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-result-background-hover: var(--wa-color-neutral-fill-highlight);
+  --docs-search-result-color-hover: var(--wa-color-neutral-text-on-fill);
+  --docs-search-result-background-active: var(--wa-color-brand-spot);
+  --docs-search-result-color-active: var(--wa-color-brand-text-on-spot);
   --docs-search-focus-ring: var(--wa-focus-ring);
   --docs-search-overlay-background: rgb(0 0 0 / 0.33);
 }

docs/eleventy.config.cjs

@@ -96,6 +96,12 @@ module.exports = function (eleventyConfig) {
     return webAwesomeFlavoredMarkdown.renderInline(content);
   });
 
+  // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
+  // With Prettier 3, this means a leading pipe will exist if the line wraps.
+  eleventyConfig.addFilter('trimPipes', content => {
+    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
+  });
+
   eleventyConfig.addFilter('classNameToComponentName', className => {
     let name = capitalCase(className.replace(/^Wa/, ''));
     if (name === 'Qr Code') name = 'QR Code'; // manual override

docs/pages/components/alert.md

@@ -7,7 +7,7 @@ layout: component
 
 ```html:preview
 <wa-alert open>
-  <wa-icon slot="icon" name="info-circle"></wa-icon>
+  <wa-icon slot="icon" name="info-circle" variant="regular"></wa-icon>
   This is a standard alert. You can customize its content and even the icon.
 </wa-alert>
 ```
@@ -18,7 +18,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <WaAlert open>
-    <WaIcon slot="icon" name="info-circle" />
+    <WaIcon slot="icon" name="info-circle" variant="regular" />
     This is a standard alert. You can customize its content and even the icon.
   </WaAlert>
 );
@@ -36,7 +36,7 @@ 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>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   <strong>This is super informative</strong><br />
   You can tell by how pretty the alert is.
 </wa-alert>
@@ -44,7 +44,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="success" open>
-  <wa-icon slot="icon" name="check2-circle"></wa-icon>
+  <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
   <strong>Your changes have been saved</strong><br />
   You can safely exit the app now.
 </wa-alert>
@@ -52,7 +52,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="neutral" open>
-  <wa-icon slot="icon" name="gear"></wa-icon>
+  <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
   <strong>Your settings have been updated</strong><br />
   Settings will take effect on next login.
 </wa-alert>
@@ -60,7 +60,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="warning" open>
-  <wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
+  <wa-icon slot="icon" name="exclamation-circle" variant="regular"></wa-icon>
   <strong>Your session has ended</strong><br />
   Please login again to continue.
 </wa-alert>
@@ -68,7 +68,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="danger" open>
-  <wa-icon slot="icon" name="exclamation-octagon"></wa-icon>
+  <wa-icon slot="icon" name="exclamation-triangle" variant="regular"></wa-icon>
   <strong>Your account has been deleted</strong><br />
   We're very sorry to see you go!
 </wa-alert>
@@ -81,7 +81,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 const App = () => (
   <>
     <WaAlert variant="brand" open>
-      <WaIcon slot="icon" name="info-circle" />
+      <WaIcon slot="icon" name="info-circle" variant="regular" />
       <strong>This is super informative</strong>
       <br />
       You can tell by how pretty the alert is.
@@ -90,7 +90,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="success" open>
-      <WaIcon slot="icon" name="check2-circle" />
+      <WaIcon slot="icon" name="check2-circle" variant="regular" />
       <strong>Your changes have been saved</strong>
       <br />
       You can safely exit the app now.
@@ -99,7 +99,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="neutral" open>
-      <WaIcon slot="icon" name="gear" />
+      <WaIcon slot="icon" name="gear" variant="regular" />
       <strong>Your settings have been updated</strong>
       <br />
       Settings will take effect on next login.
@@ -108,7 +108,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="warning" open>
-      <WaIcon slot="icon" name="exclamation-triangle" />
+      <WaIcon slot="icon" name="exclamation-circle" variant="regular" />
       <strong>Your session has ended</strong>
       <br />
       Please login again to continue.
@@ -117,7 +117,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="danger" open>
-      <WaIcon slot="icon" name="exclamation-octagon" />
+      <WaIcon slot="icon" name="exclamation-triangle" variant="regular" />
       <strong>Your account has been deleted</strong>
       <br />
       We're very sorry to see you go!
@@ -132,7 +132,7 @@ 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>
+  <wa-icon slot="icon" name="info-circle" variant="regular"></wa-icon>
   You can close this alert any time!
 </wa-alert>
 
@@ -159,7 +159,7 @@ const App = () => {
 
   return (
     <WaAlert open={open} closable onWaAfterHide={handleHide}>
-      <WaIcon slot="icon" name="info-circle" />
+      <WaIcon slot="icon" name="info-circle" variant="regular" />
       You can close this alert any time!
     </WaAlert>
   );
@@ -193,7 +193,7 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
   <wa-button variant="brand">Show Alert</wa-button>
 
   <wa-alert variant="brand" duration="3000" closable>
-    <wa-icon slot="icon" name="info-circle"></wa-icon>
+    <wa-icon slot="icon" name="info-circle" variant="regular"></wa-icon>
     This alert will automatically hide itself after three seconds, unless you interact with it.
   </wa-alert>
 </div>
@@ -236,7 +236,7 @@ const App = () => {
         </WaButton>
 
         <WaAlert variant="brand" duration="3000" open={open} closable onWaAfterHide={() => setOpen(false)}>
-          <WaIcon slot="icon" name="info-circle" />
+          <WaIcon slot="icon" name="info-circle" variant="regular" />
           This alert will automatically hide itself after three seconds, unless you interact with it.
         </WaAlert>
       </div>
@@ -262,31 +262,31 @@ You should always use the `closable` attribute so users can dismiss the notifica
   <wa-button variant="danger">Danger</wa-button>
 
   <wa-alert variant="brand" duration="3000" closable>
-    <wa-icon slot="icon" name="info-circle"></wa-icon>
+    <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
     <strong>This is super informative</strong><br />
     You can tell by how pretty the alert is.
   </wa-alert>
 
   <wa-alert variant="success" duration="3000" closable>
-    <wa-icon slot="icon" name="check2-circle"></wa-icon>
+    <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
     <strong>Your changes have been saved</strong><br />
     You can safely exit the app now.
   </wa-alert>
 
   <wa-alert variant="neutral" duration="3000" closable>
-    <wa-icon slot="icon" name="gear"></wa-icon>
+    <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
     <strong>Your settings have been updated</strong><br />
     Settings will take effect on next login.
   </wa-alert>
 
   <wa-alert variant="warning" duration="3000" closable>
-    <wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
+    <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
     <strong>Your session has ended</strong><br />
     Please login again to continue.
   </wa-alert>
 
   <wa-alert variant="danger" duration="3000" closable>
-    <wa-icon slot="icon" name="exclamation-octagon"></wa-icon>
+    <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
     <strong>Your account has been deleted</strong><br />
     We're very sorry to see you go!
   </wa-alert>
@@ -344,35 +344,35 @@ const App = () => {
       </WaButton>
 
       <WaAlert ref={brand} variant="brand" duration="3000" closable>
-        <WaIcon slot="icon" name="info-circle" />
+        <WaIcon slot="icon" name="circle-info" variant="regular" />
         <strong>This is super informative</strong>
         <br />
         You can tell by how pretty the alert is.
       </WaAlert>
 
       <WaAlert ref={success} variant="success" duration="3000" closable>
-        <WaIcon slot="icon" name="check2-circle" />
+        <WaIcon slot="icon" name="circle-check" variant="regular" />
         <strong>Your changes have been saved</strong>
         <br />
         You can safely exit the app now.
       </WaAlert>
 
       <WaAlert ref={neutral} variant="neutral" duration="3000" closable>
-        <WaIcon slot="icon" name="gear" />
+        <WaIcon slot="icon" name="gear" variant="regular" />
         <strong>Your settings have been updated</strong>
         <br />
         Settings will take effect on next login.
       </WaAlert>
 
       <WaAlert ref={warning} variant="warning" duration="3000" closable>
-        <WaIcon slot="icon" name="exclamation-triangle" />
+        <WaIcon slot="icon" name="circle-exclamation" variant="regular" />
         <strong>Your session has ended</strong>
         <br />
         Please login again to continue.
       </WaAlert>
 
       <WaAlert ref={danger} variant="danger" duration="3000" closable>
-        <WaIcon slot="icon" name="exclamation-octagon" />
+        <WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
         <strong>Your account has been deleted</strong>
         <br />
         We're very sorry to see you go!
@@ -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) {
+  function notify(message, variant = 'brand', icon = 'circle-info', duration = 3000) {
     const alert = Object.assign(document.createElement('wa-alert'), {
       variant,
       closable: true,
       duration: duration,
       innerHTML: `
-        <wa-icon name="${icon}" slot="icon"></wa-icon>
+        <wa-icon name="${icon}" variant="regular" slot="icon"></wa-icon>
         ${escapeHtml(message)}
       `
     });

docs/pages/components/animation.md

@@ -20,7 +20,7 @@ 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(--wa-color-brand-spot);
     margin: 1.5rem;
   }
 </style>
@@ -34,7 +34,7 @@ const css = `
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
     margin: 1.5rem;
   }
 `;
@@ -120,7 +120,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
   .animation-sandbox .box {
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
   }
 
   .animation-sandbox .controls {
@@ -166,7 +166,7 @@ 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(--wa-color-brand-spot);
   }
 </style>
 ```
@@ -184,7 +184,7 @@ const css = `
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
   }
 `;
 
@@ -256,7 +256,7 @@ 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(--wa-color-brand-spot);
   }
 </style>
 ```
@@ -268,7 +268,7 @@ const css = `
   .animation-keyframes .box {
     width: 100px;
     height: 100px;
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
   }
 `;
 

docs/pages/components/avatar.md

@@ -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>
+<wa-avatar initials="WA" label="Avatar with initials: SL"></wa-avatar>
 ```
 
 ```jsx:react
 import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
-const App = () => <WaAvatar initials="SL" label="Avatar with initials: SL" />;
+const App = () => <WaAvatar initials="WA" label="Avatar with initials: SL" />;
 ```
 
 ### Custom Icons
@@ -72,15 +72,15 @@ When no image or initials are set, an icon will be shown. The default avatar sho
 
 ```html:preview
 <wa-avatar label="Avatar with an image icon">
-  <wa-icon slot="icon" name="image"></wa-icon>
+  <wa-icon slot="icon" name="image" variant="solid"></wa-icon>
 </wa-avatar>
 
 <wa-avatar label="Avatar with an archive icon">
-  <wa-icon slot="icon" name="archive"></wa-icon>
+  <wa-icon slot="icon" name="archive" variant="solid"></wa-icon>
 </wa-avatar>
 
 <wa-avatar label="Avatar with a briefcase icon">
-  <wa-icon slot="icon" name="briefcase"></wa-icon>
+  <wa-icon slot="icon" name="briefcase" variant="solid"></wa-icon>
 </wa-avatar>
 ```
 

docs/pages/components/breadcrumb-item.md

@@ -8,7 +8,7 @@ layout: component
 ```html:preview
 <wa-breadcrumb>
   <wa-breadcrumb-item>
-    <wa-icon slot="prefix" name="house"></wa-icon>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
     Home
   </wa-breadcrumb-item>
   <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>

docs/pages/components/breadcrumb.md

@@ -73,7 +73,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 
 ```html:preview
 <wa-breadcrumb>
-  <wa-icon name="dot" slot="separator"></wa-icon>
+  <wa-icon slot="separator" name="angles-right" variant="solid"></wa-icon>
   <wa-breadcrumb-item>First</wa-breadcrumb-item>
   <wa-breadcrumb-item>Second</wa-breadcrumb-item>
   <wa-breadcrumb-item>Third</wa-breadcrumb-item>
@@ -82,7 +82,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 <br />
 
 <wa-breadcrumb>
-  <wa-icon name="arrow-right" slot="separator"></wa-icon>
+  <wa-icon slot="separator" name="arrow-right" variant="solid"></wa-icon>
   <wa-breadcrumb-item>First</wa-breadcrumb-item>
   <wa-breadcrumb-item>Second</wa-breadcrumb-item>
   <wa-breadcrumb-item>Third</wa-breadcrumb-item>
@@ -106,7 +106,7 @@ import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-ite
 const App = () => (
   <>
     <WaBreadcrumb>
-      <wa-icon name="dot" slot="separator" />
+      <wa-icon slot="separator" name="angles-right" variant="solid" />
       <WaBreadcrumbItem>First</WaBreadcrumbItem>
       <WaBreadcrumbItem>Second</WaBreadcrumbItem>
       <WaBreadcrumbItem>Third</WaBreadcrumbItem>
@@ -115,7 +115,7 @@ const App = () => (
     <br />
 
     <WaBreadcrumb>
-      <wa-icon name="arrow-right" slot="separator" />
+      <wa-icon slot="separator" name="arrow-right" variant="solid" />
       <WaBreadcrumbItem>First</WaBreadcrumbItem>
       <WaBreadcrumbItem>Second</WaBreadcrumbItem>
       <WaBreadcrumbItem>Third</WaBreadcrumbItem>
@@ -140,7 +140,7 @@ 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>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
     Home
   </wa-breadcrumb-item>
   <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
@@ -156,7 +156,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 const App = () => (
   <WaBreadcrumb>
     <WaBreadcrumbItem>
-      <WaIcon slot="prefix" name="house" />
+      <WaIcon slot="prefix" name="house" variant="solid" />
       Home
     </WaBreadcrumbItem>
     <WaBreadcrumbItem>Articles</WaBreadcrumbItem>
@@ -175,7 +175,7 @@ Use the `suffix` slot to add content after any breadcrumb item.
   <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
   <wa-breadcrumb-item>
     Security
-    <wa-icon slot="suffix" name="shield-lock"></wa-icon>
+    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
   </wa-breadcrumb-item>
 </wa-breadcrumb>
 ```
@@ -191,7 +191,7 @@ const App = () => (
     <WaBreadcrumbItem>Policies</WaBreadcrumbItem>
     <WaBreadcrumbItem>
       Security
-      <WaIcon slot="suffix" name="shield-lock"></WaIcon>
+      <WaIcon slot="suffix" name="shield" variant="solid"></WaIcon>
     </WaBreadcrumbItem>
   </WaBreadcrumb>
 );
@@ -209,8 +209,8 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op
   <wa-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 slot="trigger" size="small" pill>
+        <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
       </wa-button>
       <wa-menu>
         <wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
@@ -241,8 +241,8 @@ const App = () => (
     <WaBreadcrumbItem>
       Web Design
       <WaDropdown slot="suffix">
-        <WaButton slot="trigger" size="small" circle>
-          <WaIcon label="More options" name="three-dots"></WaIcon>
+        <WaButton slot="trigger" size="small" pill>
+          <WaIcon label="More options" name="ellipsis"></WaIcon>
         </WaButton>
         <WaMenu>
           <WaMenuItem type="checkbox" checked>

docs/pages/components/button-group.md

@@ -401,34 +401,34 @@ Create interactive toolbars with button groups.
 <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-button><wa-icon name="undo" variant="solid" 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-button><wa-icon name="redo" variant="solid" label="Redo"></wa-icon></wa-button>
     </wa-tooltip>
   </wa-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-button><wa-icon name="bold" variant="solid" 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-button><wa-icon name="italic" variant="solid" 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-button><wa-icon name="underline" variant="solid" label="Underline"></wa-icon></wa-button>
     </wa-tooltip>
   </wa-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-button><wa-icon name="align-left" variant="solid" 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-button><wa-icon name="align-center" variant="solid" 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-button><wa-icon name="align-right" variant="solid" label="Align Right"></wa-icon></wa-button>
     </wa-tooltip>
   </wa-button-group>
 </div>
@@ -458,12 +458,12 @@ const App = () => (
       <WaButtonGroup label="History">
         <WaTooltip content="Undo">
           <WaButton>
-            <WaIcon name="arrow-counterclockwise"></WaIcon>
+            <WaIcon name="undo" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
         <WaTooltip content="Redo">
           <WaButton>
-            <WaIcon name="arrow-clockwise"></WaIcon>
+            <WaIcon name="redo" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
       </WaButtonGroup>
@@ -471,17 +471,17 @@ const App = () => (
       <WaButtonGroup label="Formatting">
         <WaTooltip content="Bold">
           <WaButton>
-            <WaIcon name="type-bold"></WaIcon>
+            <WaIcon name="bold" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
         <WaTooltip content="Italic">
           <WaButton>
-            <WaIcon name="type-italic"></WaIcon>
+            <WaIcon name="italic" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
         <WaTooltip content="Underline">
           <WaButton>
-            <WaIcon name="type-underline"></WaIcon>
+            <WaIcon name="underline" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
       </WaButtonGroup>
@@ -489,17 +489,17 @@ const App = () => (
       <WaButtonGroup label="Alignment">
         <WaTooltip content="Align Left">
           <WaButton>
-            <WaIcon name="justify-left"></WaIcon>
+            <WaIcon name="align-left" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
         <WaTooltip content="Align Center">
           <WaButton>
-            <WaIcon name="justify"></WaIcon>
+            <WaIcon name="align-center" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
         <WaTooltip content="Align Right">
           <WaButton>
-            <WaIcon name="justify-right"></WaIcon>
+            <WaIcon name="align-right" variant="solid"></WaIcon>
           </WaButton>
         </WaTooltip>
       </WaButtonGroup>

docs/pages/components/button.md

@@ -229,54 +229,54 @@ Use the `prefix` and `suffix` slots to add icons.
 
 ```html:preview
 <wa-button size="small">
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button size="small">
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-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>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 
 <br /><br />
 
 <wa-button>
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button>
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button>
-  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
-  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 
 <br /><br />
 
 <wa-button size="large">
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button size="large">
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-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>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 ```
@@ -288,18 +288,18 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 const App = () => (
   <>
     <WaButton size="small">
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
       Settings
     </WaButton>
 
     <WaButton size="small">
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
       Refresh
     </WaButton>
 
     <WaButton size="small">
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
+      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
       Open
     </WaButton>
 
@@ -307,18 +307,18 @@ const App = () => (
     <br />
 
     <WaButton>
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
       Settings
     </WaButton>
 
     <WaButton>
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
       Refresh
     </WaButton>
 
     <WaButton>
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
+      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
       Open
     </WaButton>
 
@@ -326,18 +326,18 @@ const App = () => (
     <br />
 
     <WaButton size="large">
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
       Settings
     </WaButton>
 
     <WaButton size="large">
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
       Refresh
     </WaButton>
 
     <WaButton size="large">
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
+      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
       Open
     </WaButton>
   </>
@@ -459,7 +459,7 @@ This example demonstrates how to style buttons using a custom class. This is the
   wa-button.pink::part(base) {
     border-radius: 6px;
     border: solid 2px;
-    background-color: #ff1493;
+    background: #ff1493;
     border-top-color: #ff7ac1;
     border-left-color: #ff7ac1;
     border-bottom-color: #ad005c;

docs/pages/components/card.md

@@ -133,7 +133,7 @@ Headers can be used to display titles and more.
 <wa-card class="card-header">
   <div slot="header">
     Header Title
-    <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+    <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
   </div>
 
   This card has a header. You can put all sorts of things in it!
@@ -189,7 +189,7 @@ const App = () => (
     <WaCard className="card-header">
       <div slot="header">
         Header Title
-        <WaIconButton name="gear"></WaIconButton>
+        <WaIconButton name="gear" variant="solid"></WaIconButton>
       </div>
       This card has a header. You can put all sorts of things in it!
     </WaCard>

docs/pages/components/copy-button.md

@@ -51,9 +51,9 @@ Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the ico
 
 ```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-icon slot="copy-icon" name="clipboard" variant="regular"></wa-icon>
+  <wa-icon slot="success-icon" name="thumbs-up" variant="solid"></wa-icon>
+  <wa-icon slot="error-icon" name="xmark" variant="solid"></wa-icon>
 </wa-copy-button>
 ```
 
@@ -64,9 +64,9 @@ import { WaIcon } from '@shoelace-style/shoelace/dist/react/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" />
+      <WaIcon slot="copy-icon" name="clipboard" variant="regular" />
+      <WaIcon slot="success-icon" name="check" variant="solid" />
+      <WaIcon slot="error-icon" name="xmark" variant="solid" />
     </WaCopyButton>
   </>
 );
@@ -179,9 +179,9 @@ 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-icon slot="copy-icon" name="clipboard"></wa-icon>
+  <wa-icon slot="success-icon" name="thumbs-up"></wa-icon>
+  <wa-icon slot="error-icon" name="thumbs-down"></wa-icon>
 </wa-copy-button>
 
 <style>

docs/pages/components/details.md

@@ -55,8 +55,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 
 ```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>
+  <wa-icon name="square-plus" slot="expand-icon" variant="regular"></wa-icon>
+  <wa-icon name="square-minus" slot="collapse-icon" variant="regular"></wa-icon>
 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -84,8 +84,8 @@ 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" />
+      <WaIcon name="square-plus" slot="expand-icon" />
+      <WaIcon name="square-minus" 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.
@@ -122,9 +122,9 @@ Details are designed to function independently, but you can simulate a group or
   const container = document.querySelector('.details-group-example');
 
   // 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.addEventListener('wa-show', event => {
+    if (event.target.localName === 'wa-details') {
+      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
     }
   });
 </script>

docs/pages/components/dialog.md

@@ -105,7 +105,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
 
 ```html:preview
 <wa-dialog label="Dialog" class="dialog-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-outline); padding: 0 1rem;">
+  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-border); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
   <wa-button slot="footer" variant="brand">Close</wa-button>
@@ -139,7 +139,7 @@ const App = () => {
         <div
           style={{
             height: '150vh',
-            border: 'dashed 2px var(--wa-color-surface-outline)',
+            border: 'dashed 2px var(--wa-color-surface-border)',
             padding: '0 1rem'
           }}
         >
@@ -165,7 +165,7 @@ The header shows a functional close button by default. You can use the `header-a
 
 ```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>
+  <wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand">Close</wa-button>
 </wa-dialog>
@@ -199,7 +199,7 @@ const App = () => {
         <WaIconButton
           class="new-window"
           slot="header-actions"
-          name="box-arrow-up-right"
+          name="arrow-up-right-from-square"
           onClick={() => window.open(location.href)}
         />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.

docs/pages/components/drawer.md

@@ -193,7 +193,7 @@ 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(--wa-color-surface-border); 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.
 
@@ -230,7 +230,7 @@ const App = () => {
       <div
         style={{
           position: 'relative',
-          border: 'solid 2px var(--wa-color-surface-outline)',
+          border: 'solid 2px var(--wa-color-surface-border)',
           height: '300px',
           padding: '1rem',
           marginBottom: '1rem'
@@ -316,7 +316,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
 
 ```html:preview
 <wa-drawer label="Drawer" class="drawer-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-outline); padding: 0 1rem;">
+  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-border); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
   <wa-button slot="footer" variant="brand">Close</wa-button>
@@ -350,7 +350,7 @@ const App = () => {
         <div
           style={{
             height: '150vh',
-            border: 'dashed 2px var(--wa-color-surface-outline)',
+            border: 'dashed 2px var(--wa-color-surface-border)',
             padding: '0 1rem'
           }}
         >
@@ -375,7 +375,7 @@ The header shows a functional close button by default. You can use the `header-a
 
 ```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>
+  <wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand">Close</wa-button>
 </wa-drawer>
@@ -406,7 +406,7 @@ const App = () => {
   return (
     <>
       <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)}>
-        <WaIconButton slot="header-actions" name="box-arrow-up-right" onClick={() => window.open(location.href)} />
+        <WaIconButton slot="header-actions" name="arrow-up-right-from-square" onClick={() => window.open(location.href)} />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
           Close

docs/pages/components/dropdown.md

@@ -22,11 +22,11 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
     <wa-divider></wa-divider>
     <wa-menu-item>
       Prefix
-      <wa-icon slot="prefix" name="gift"></wa-icon>
+      <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
     </wa-menu-item>
     <wa-menu-item>
       Suffix Icon
-      <wa-icon slot="suffix" name="heart"></wa-icon>
+      <wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
     </wa-menu-item>
   </wa-menu>
 </wa-dropdown>
@@ -355,7 +355,7 @@ import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const css = `
   .dropdown-hoist {
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     padding: var(--wa-space-m);
     overflow: hidden;
   }
@@ -428,7 +428,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
 <style>
   .dropdown-hoist {
     position: relative;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     padding: var(--wa-space-m);
     overflow: hidden;
   }
@@ -444,7 +444,7 @@ import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 
 const css = `
   .dropdown-hoist {
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     padding: var(--wa-space-m);
     overflow: hidden;
   }

docs/pages/components/icon-button.md

@@ -24,9 +24,9 @@ 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>
+<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 1.5rem;"></wa-icon-button>
+<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2rem;"></wa-icon-button>
+<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2.5rem;"></wa-icon-button>
 ```
 
 {% raw %}
@@ -36,9 +36,9 @@ import WaIconButton from '@shoelace-style/shoelace/dist/react/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' }} />
+    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '1.5rem' }} />
+    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '2rem' }} />
+    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '2.5rem' }} />
   </>
 );
 ```
@@ -51,9 +51,9 @@ 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>
+  <wa-icon-button name="bold" variant="solid" label="Bold"></wa-icon-button>
+  <wa-icon-button name="italic" variant="solid" label="Italic"></wa-icon-button>
+  <wa-icon-button name="underline" variant="solid" label="Underline"></wa-icon-button>
 </div>
 
 <style>
@@ -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" />
+      <WaIconButton name="type-bold" variant="solid" label="Bold" />
+      <WaIconButton name="type-italic" variant="solid" label="Italic" />
+      <WaIconButton name="type-underline" variant="solid" 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>
+<wa-icon-button name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>
 ```
 
 ```jsx:react
 import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
-const App = () => <WaIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
+const App = () => <WaIconButton name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank" />;
 ```
 
 ### Icon Button with Tooltip
@@ -123,7 +123,7 @@ Wrap a tooltip around an icon button to provide contextual information to the us
 
 ```html:preview
 <wa-tooltip content="Settings">
-  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+  <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
 </wa-tooltip>
 ```
 
@@ -133,7 +133,7 @@ import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const App = () => (
   <WaTooltip content="Settings">
-    <WaIconButton name="gear" label="Settings" />
+    <WaIconButton name="gear" variant="solid" label="Settings" />
   </WaTooltip>
 );
 ```
@@ -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>
+<wa-icon-button name="gear" variant="solid" label="Settings" disabled></wa-icon-button>
 ```
 
 ```jsx:react
 import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
-const App = () => <WaIconButton name="gear" label="Settings" disabled />;
+const App = () => <WaIconButton name="gear" variant="solid" label="Settings" disabled />;
 ```

docs/pages/components/icon.md

@@ -19,23 +19,11 @@ All available icons in the `default` icon library are shown below. Click or tap
 <wa-icon name="icon-name-here"></wa-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>
-  </div>
-  <div class="icon-list"></div>
-  <input type="text" class="icon-copy-input" aria-hidden="true" tabindex="-1">
-</div>
-
 ## Examples
 
+TODO - show how to use `family` and `variant` attributes.
+TODO - show how to use FA pro via `data-webawesome-kit="..."`
+
 ### 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.
@@ -44,23 +32,23 @@ Icons inherit their color from the current text color. Thus, you can set the `co
 <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="battery-three-quarters"></wa-icon>
   <wa-icon name="bell"></wa-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>
+  <wa-icon name="file"></wa-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>
+  <wa-icon name="bolt-lightning"></wa-icon>
 </div>
 <div style="color: #f5a623;">
-  <wa-icon name="mic"></wa-icon>
+  <wa-icon name="microphone"></wa-icon>
   <wa-icon name="search"></wa-icon>
   <wa-icon name="star"></wa-icon>
   <wa-icon name="trash"></wa-icon>
@@ -77,23 +65,23 @@ const App = () => (
     <div style={{ color: '#4a90e2' }}>
       <WaIcon name="exclamation-triangle"></WaIcon>
       <WaIcon name="archive"></WaIcon>
-      <WaIcon name="battery-charging"></WaIcon>
+      <WaIcon name="battery-three-quarters"></WaIcon>
       <WaIcon name="bell"></WaIcon>
     </div>
     <div style={{ color: '#9013fe' }}>
       <WaIcon name="clock"></WaIcon>
       <WaIcon name="cloud"></WaIcon>
       <WaIcon name="download"></WaIcon>
-      <WaIcon name="file-earmark"></WaIcon>
+      <WaIcon name="file"></WaIcon>
     </div>
     <div style={{ color: '#417505' }}>
       <WaIcon name="flag"></WaIcon>
       <WaIcon name="heart"></WaIcon>
       <WaIcon name="image"></WaIcon>
-      <WaIcon name="lightning"></WaIcon>
+      <WaIcon name="bolt-lightning"></WaIcon>
     </div>
     <div style={{ color: '#f5a623' }}>
-      <WaIcon name="mic"></WaIcon>
+      <WaIcon name="microphone"></WaIcon>
       <WaIcon name="search"></WaIcon>
       <WaIcon name="star"></WaIcon>
       <WaIcon name="trash"></WaIcon>
@@ -112,17 +100,17 @@ Icons are sized relative to the current font size. To change their size, set the
 <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="battery-three-quarters"></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="file"></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="bolt-lightning"></wa-icon>
+  <wa-icon name="microphone"></wa-icon>
   <wa-icon name="search"></wa-icon>
   <wa-icon name="star"></wa-icon>
   <wa-icon name="trash"></wa-icon>
@@ -138,17 +126,17 @@ const App = () => (
   <div style={{ fontSize: '32px' }}>
     <WaIcon name="exclamation-triangle" />
     <WaIcon name="archive" />
-    <WaIcon name="battery-charging" />
+    <WaIcon name="battery-three-quarters" />
     <WaIcon name="bell" />
     <WaIcon name="clock" />
     <WaIcon name="cloud" />
     <WaIcon name="download" />
-    <WaIcon name="file-earmark" />
+    <WaIcon name="file" />
     <WaIcon name="flag" />
     <WaIcon name="heart" />
     <WaIcon name="image" />
-    <WaIcon name="lightning" />
-    <WaIcon name="mic" />
+    <WaIcon name="bolt-lightning" />
+    <WaIcon name="microphone" />
     <WaIcon name="search" />
     <WaIcon name="star" />
     <WaIcon name="trash" />
@@ -163,13 +151,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>
+<wa-icon name="star" label="Add to favorites"></wa-icon>
 ```
 
 ```jsx:react
 import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
-const App = () => <WaIcon name="star-fill" label="Add to favorites" />;
+const App = () => <WaIcon name="star" label="Add to favorites" />;
 ```
 
 ### Custom Icons
@@ -680,190 +668,3 @@ If you want to change the icons Web Awesome uses internally, you can register an
   });
 </script>
 ```
-
-<!-- Supporting scripts and styles for the search utility -->
-<script>
-  function wrapWithTooltip(item) {
-    const tooltip = document.createElement('wa-tooltip');
-    tooltip.content = item.getAttribute('data-name');
-
-    // Close open tooltips
-    document.querySelectorAll('.icon-list wa-tooltip[open]').forEach(tooltip => tooltip.hide());
-
-    // Wrap it with a tooltip and trick it into showing up
-    item.parentNode.insertBefore(tooltip, item);
-    tooltip.appendChild(item);
-    requestAnimationFrame(() => tooltip.dispatchEvent(new MouseEvent('mouseover')));
-  }
-
-  fetch('/dist/assets/icons/icons.json')
-    .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 copyInput = container.querySelector('.icon-copy-input');
-      const loader = container.querySelector('.icon-loader');
-      const list = container.querySelector('.icon-list');
-      const queue = [];
-      let inputTimeout;
-
-      // Generate icons
-      icons.map(i => {
-        const item = document.createElement('div');
-        item.classList.add('icon-list-item');
-        item.setAttribute('data-name', i.name);
-        item.setAttribute('data-terms', [i.name, i.title, ...(i.tags || []), ...(i.categories || [])].join(' '));
-        item.innerHTML = `
-          <svg width="1em" height="1em" fill="currentColor">
-            <use href="/assets/images/sprite.svg#${i.name}"></use>
-          </svg>
-        `;
-        list.appendChild(item);
-
-        // Wrap it with a tooltip the first time the mouse lands on it. We do this instead of baking them into the DOM
-        // to improve this page's performance. See: https://github.com/shoelace-style/shoelace/issues/1122
-        item.addEventListener('mouseover', () => wrapWithTooltip(item), { once: true });
-
-        // Copy on click
-        item.addEventListener('click', () => {
-          const tooltip = item.closest('wa-tooltip');
-          copyInput.value = i.name;
-          copyInput.select();
-          document.execCommand('copy');
-
-          if (tooltip) {
-            tooltip.content = 'Copied!';
-            setTimeout(() => tooltip.content = i.name, 1000);
-          }
-        });
-      });
-
-      // Filter as the user types
-      input.addEventListener('wa-input', () => {
-        clearTimeout(inputTimeout);
-        inputTimeout = setTimeout(() => {
-          [...list.querySelectorAll('.icon-list-item')].map(item => {
-            const filter = input.value.toLowerCase();
-            if (filter === '') {
-              item.hidden = false;
-            } else {
-              const terms = item.getAttribute('data-terms').toLowerCase();
-              item.hidden = terms.indexOf(filter) < 0;
-            }
-          });
-        }, 250);
-      });
-
-      // Sort by type and remember preference
-      const iconType = sessionStorage.getItem('wa-icon:type') || 'outline';
-      select.value = iconType;
-      list.setAttribute('data-type', select.value);
-      select.addEventListener('wa-change', () => {
-        list.setAttribute('data-type', select.value);
-        sessionStorage.setItem('wa-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);
-  }
-
-  .icon-search [hidden] {
-    display: none;
-  }
-
-  .icon-search-controls {
-    display: flex;
-  }
-
-  .icon-search-controls wa-input {
-    flex: 1 1 auto;
-  }
-
-  .icon-search-controls wa-select {
-    width: 10rem;
-    flex: 0 0 auto;
-    margin-left: 1rem;
-  }
-
-  .icon-loader {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 30vh;
-  }
-
-  .icon-list {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    position: relative;
-    margin-top: 1rem;
-  }
-
-  .icon-loader[hidden],
-  .icon-list[hidden] {
-    display: none;
-  }
-
-  .icon-list-item {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--wa-corners-1x);
-    font-size: 24px;
-    width: 2em;
-    height: 2em;
-    margin: 0 auto;
-    cursor: copy;
-    transition: var(--wa-transition-fast) all;
-  }
-
-  .icon-list-item:hover {
-    background-color: var(--wa-color-brand-fill-muted);
-    color: var(--wa-color-brand-text-on-muted);
-  }
-
-  .icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {
-    display: none;
-  }
-
-  .icon-list[data-type="fill"] .icon-list-item:not([data-name$="-fill"]) {
-    display: none;
-  }
-
-  .icon-copy-input {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  @media screen and (max-width: 1000px) {
-    .icon-list {
-      grid-template-columns: repeat(8, 1fr);
-    }
-
-    .icon-list-item {
-      font-size: 20px;
-    }
-
-    .icon-search-controls {
-      display: block;
-    }
-
-    .icon-search-controls wa-select {
-      width: auto;
-      margin: 1rem 0 0 0;
-    }
-  }
-
-  @media screen and (max-width: 500px) {
-    .icon-list {
-      grid-template-columns: repeat(4, 1fr);
-    }
-  }
-</style>

docs/pages/components/input.md

@@ -205,18 +205,18 @@ 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-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-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-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-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-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-input>
 ```
 
@@ -227,18 +227,18 @@ import WaInput from '@shoelace-style/shoelace/dist/react/input';
 const App = () => (
   <>
     <WaInput placeholder="Small" size="small">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
+      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
+      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
     </WaInput>
     <br />
     <WaInput placeholder="Medium" size="medium">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
+      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
+      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
     </WaInput>
     <br />
     <WaInput placeholder="Large" size="large">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
+      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
+      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
     </WaInput>
   </>
 );

docs/pages/components/menu-item.md

@@ -16,11 +16,11 @@ layout: component
   <wa-divider></wa-divider>
   <wa-menu-item>
     Prefix Icon
-    <wa-icon slot="prefix" name="gift"></wa-icon>
+    <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
   </wa-menu-item>
   <wa-menu-item>
     Suffix Icon
-    <wa-icon slot="suffix" name="heart"></wa-icon>
+    <wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
   </wa-menu-item>
 </wa-menu>
 ```
@@ -46,11 +46,11 @@ const App = () => (
     <WaDivider />
     <WaMenuItem>
       Prefix Icon
-      <WaIcon slot="prefix" name="gift" />
+      <WaIcon slot="prefix" name="gift" variant="solid" />
     </WaMenuItem>
     <WaMenuItem>
       Suffix Icon
-      <WaIcon slot="suffix" name="heart" />
+      <WaIcon slot="suffix" name="heart" variant="solid" />
     </WaMenuItem>
   </WaMenu>
 );
@@ -96,12 +96,12 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
 ```html:preview
 <wa-menu style="max-width: 200px;">
   <wa-menu-item>
-    <wa-icon slot="prefix" name="house"></wa-icon>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
     Home
   </wa-menu-item>
 
   <wa-menu-item>
-    <wa-icon slot="prefix" name="envelope"></wa-icon>
+    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
     Messages
     <wa-badge slot="suffix" variant="brand" pill>12</wa-badge>
   </wa-menu-item>
@@ -109,7 +109,7 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
   <wa-divider></wa-divider>
 
   <wa-menu-item>
-    <wa-icon slot="prefix" name="gear"></wa-icon>
+    <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
     Settings
   </wa-menu-item>
 </wa-menu>
@@ -127,12 +127,12 @@ import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
 const App = () => (
   <WaMenu style={{ maxWidth: '200px' }}>
     <WaMenuItem>
-      <WaIcon slot="prefix" name="house" />
+      <WaIcon slot="prefix" name="house" variant="solid" />
       Home
     </WaMenuItem>
 
     <WaMenuItem>
-      <WaIcon slot="prefix" name="envelope" />
+      <WaIcon slot="prefix" name="envelope" variant="solid" />
       Messages
       <WaBadge slot="suffix" variant="brand" pill>
         12
@@ -142,7 +142,7 @@ const App = () => (
     <WaDivider />
 
     <WaMenuItem>
-      <WaIcon slot="prefix" name="gear" />
+      <WaIcon slot="prefix" name="gear" variant="solid" />
       Settings
     </WaMenuItem>
   </WaMenu>

docs/pages/components/option.md

@@ -62,21 +62,21 @@ Add icons to the start and end of menu items using the `prefix` and `suffix` slo
 ```html:preview
 <wa-select label="Select one">
   <wa-option value="option-1">
-    <wa-icon slot="prefix" name="envelope"></wa-icon>
+    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
     Email
-    <wa-icon slot="suffix" name="patch-check"></wa-icon>
+    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
   </wa-option>
 
   <wa-option value="option-2">
-    <wa-icon slot="prefix" name="telephone"></wa-icon>
+    <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
     Phone
-    <wa-icon slot="suffix" name="patch-check"></wa-icon>
+    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
   </wa-option>
 
   <wa-option value="option-3">
-    <wa-icon slot="prefix" name="chat-dots"></wa-icon>
+    <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
     Chat
-    <wa-icon slot="suffix" name="patch-check"></wa-icon>
+    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
   </wa-option>
 </wa-select>
 ```

docs/pages/components/popup.md

@@ -63,22 +63,22 @@ Popup is a low-level utility built specifically for positioning elements. Do not
 
 <style>
   .popup-overview wa-popup {
-    --arrow-color: var(--wa-color-brand-fill-vivid-alt);
+    --arrow-color: var(--wa-color-brand-spot);
   }
 
   .popup-overview span[slot='anchor'] {
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-overview .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-overview-options {
@@ -112,22 +112,22 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-overview wa-popup {
-    --arrow-color: var(--wa-color-brand-fill-vivid-alt);
+    --arrow-color: var(--wa-color-brand-spot);
   }
 
   .popup-overview span[slot='anchor'] {
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-overview .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-overview-options {
@@ -250,15 +250,15 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-active .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 </style>
 
@@ -281,15 +281,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-active .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -332,15 +332,15 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px 0 0 50px;
   }
 
   #external-anchor ~ wa-popup .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 </style>
 ```
@@ -353,15 +353,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px 0 0 50px;
   }
 
   #external-anchor ~ wa-popup .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -414,15 +414,15 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-placement .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-placement wa-select {
@@ -450,15 +450,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-placement .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-placement wa-select {
@@ -518,15 +518,15 @@ Use the `distance` attribute to change the distance between the popup and its an
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-distance .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-distance wa-range {
@@ -553,15 +553,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-distance .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-distance wa-range {
@@ -615,15 +615,15 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-skidding .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-skidding wa-range {
@@ -650,15 +650,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-skidding .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-skidding wa-range {
@@ -736,22 +736,22 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
 
   <style>
     .popup-arrow wa-popup {
-      --arrow-color: var(--wa-color-brand-fill-vivid-alt);
+      --arrow-color: var(--wa-color-brand-spot);
     }
 
     .popup-arrow span[slot='anchor'] {
       display: inline-block;
       width: 150px;
       height: 150px;
-      border: dashed 2px var(--wa-color-neutral-outline-vivid);
+      border: dashed 2px var(--wa-color-neutral-spot);
       margin: 50px;
     }
 
     .popup-arrow .box {
       width: 100px;
       height: 50px;
-      background: var(--wa-color-brand-fill-vivid-alt);
-      border-radius: var(--wa-corners-1x);
+      background: var(--wa-color-brand-spot);
+      border-radius: var(--wa-corners-s);
     }
 
     .popup-arrow-options {
@@ -793,22 +793,22 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
 
 const css = `
   .popup-arrow wa-popup {
-    --arrow-color: var(--wa-color-brand-fill-vivid-alt);
+    --arrow-color: var(--wa-color-brand-spot);
   }
 
   .popup-arrow span[slot='anchor'] {
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
   .popup-arrow .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-arrow-options {
@@ -912,7 +912,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
@@ -921,8 +921,8 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
     height: 100%;
     min-width: 50px;
     min-height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-sync wa-select {
@@ -951,7 +951,7 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 50px;
   }
 
@@ -960,8 +960,8 @@ const css = `
     height: 100%;
     min-width: 50px;
     min-height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-sync wa-switch {
@@ -1020,7 +1020,7 @@ Toggle the switch and scroll the container to see the difference.
   .popup-strategy .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1028,15 +1028,15 @@ Toggle the switch and scroll the container to see the difference.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 150px 50px;
   }
 
   .popup-strategy .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-strategy wa-switch {
@@ -1062,7 +1062,7 @@ const css = `
   .popup-strategy .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1070,15 +1070,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 150px 50px;
   }
 
   .popup-strategy .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 
   .popup-strategy wa-switch {
@@ -1133,7 +1133,7 @@ Scroll the container to see how the popup flips to prevent clipping.
   .popup-flip .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1141,15 +1141,15 @@ Scroll the container to see how the popup flips to prevent clipping.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 150px 50px;
   }
 
   .popup-flip .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 </style>
 
@@ -1171,7 +1171,7 @@ const css = `
   .popup-flip .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1179,15 +1179,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 150px 50px;
   }
 
   .popup-flip .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -1240,7 +1240,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre
   .popup-flip-fallbacks .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1248,15 +1248,15 @@ Scroll the container to see how the popup changes it's fallback placement to pre
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 250px 50px;
   }
 
   .popup-flip-fallbacks .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 </style>
 ```
@@ -1268,7 +1268,7 @@ const css = `
   .popup-flip-fallbacks .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1276,15 +1276,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 250px 50px;
   }
 
   .popup-flip-fallbacks .box {
     width: 100px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -1327,7 +1327,7 @@ Toggle the switch to see the difference.
 <style>
   .popup-shift .overflow {
     position: relative;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1335,15 +1335,15 @@ Toggle the switch to see the difference.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 60px 0 0 10px;
   }
 
   .popup-shift .box {
     width: 300px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 </style>
 
@@ -1364,7 +1364,7 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
 const css = `
   .popup-shift .overflow {
     position: relative;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1372,15 +1372,15 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 60px 0 0 10px;
   }
 
   .popup-shift .box {
     width: 300px;
     height: 50px;
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -1433,7 +1433,7 @@ Scroll the container to see the popup resize as its available space changes.
   .popup-auto-size .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1441,13 +1441,13 @@ Scroll the container to see the popup resize as its available space changes.
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 250px 50px 100px 50px;
   }
 
   .popup-auto-size .box {
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
 
     /* This sets the preferred size of the popup's content */
     width: 100px;
@@ -1478,7 +1478,7 @@ const css = `
   .popup-auto-size .overflow {
     position: relative;
     height: 300px;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: auto;
   }
 
@@ -1486,13 +1486,13 @@ const css = `
     display: inline-block;
     width: 150px;
     height: 150px;
-    border: dashed 2px var(--wa-color-neutral-outline-vivid);
+    border: dashed 2px var(--wa-color-neutral-spot);
     margin: 250px 50px 100px 50px;
   }
 
   .popup-auto-size .box {
-    background: var(--wa-color-brand-fill-vivid-alt);
-    border-radius: var(--wa-corners-1x);
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
 
     /* This sets the preferred size of the popup's content */
     width: 100px;
@@ -1530,6 +1530,131 @@ const App = () => {
 };
 ```
 
+### Hover Bridge
+
+When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the gap using an invisible element. This makes listening for events such as `mouseover` and `mouseout` more sane because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is active. For demonstration purposes, the bridge in this example is shown in orange.
+
+```html:preview
+<div class="popup-hover-bridge">
+  <wa-popup placement="top" hover-bridge distance="10" skidding="0" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </wa-popup>
+  <br>
+  <wa-switch checked>Hover Bridge</wa-switch><br>
+  <wa-range min="0" max="50" step="1" value="10" label="Distance"></wa-range>
+  <wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
+</div>
+<style>
+  .popup-hover-bridge span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--wa-color-neutral-spot);
+    margin: 50px;
+  }
+
+  .popup-hover-bridge .box {
+    width: 100px;
+    height: 50px;
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
+  }
+
+  .popup-hover-bridge wa-range {
+    max-width: 260px;
+    margin-top: .5rem;
+  }
+
+  .popup-hover-bridge wa-popup::part(hover-bridge) {
+    background: tomato;
+    opacity: .5;
+  }
+</style>
+<script>
+  const container = document.querySelector('.popup-hover-bridge');
+  const popup = container.querySelector('wa-popup');
+  const hoverBridge = container.querySelector('wa-switch');
+  const distance = container.querySelector('wa-range[label="Distance"]');
+  const skidding = container.querySelector('wa-range[label="Skidding"]');
+  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
+  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
+  hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
+</script>
+```
+
+```jsx:react
+import { useState } from 'react';
+import WaPopup from '@shoelace-style/shoelace/dist/react/popup';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
+const css = `
+  .popup-hover-bridge span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--wa-color-neutral-spot);
+    margin: 50px;
+  }
+
+  .popup-hover-bridge .box {
+    width: 100px;
+    height: 50px;
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
+  }
+
+  .popup-hover-bridge wa-range {
+    max-width: 260px;
+    margin-top: .5rem;
+  }
+
+  .popup-hover-bridge wa-popup::part(hover-bridge) {
+    background: tomato;
+    opacity: .5;
+  }
+`;
+const App = () => {
+  const [hoverBridge, setHoverBridge] = useState(true);
+  const [distance, setDistance] = useState(10);
+  const [skidding, setSkidding] = useState(0);
+  return (
+    <>
+      <div class="popup-hover-bridge">
+        <WaPopup placement="top" hover-bridge={hoverBridge} distance={distance} skidding={skidding} active>
+          <span slot="anchor" />
+          <div class="box" />
+        </WaPopup>
+        <br />
+        <WaSwitch
+          checked={hoverBridge}
+          onWaChange={event => setHoverBridge(event.target.checked)}
+         >
+          Hover Bridge
+        </WaSwitch><br />
+        <WaRange
+          min="0"
+          max="50"
+          step="1"
+          value={distance}
+          label="Distance"
+          onWaInput={event => setDistance(event.target.value)}
+        />
+        <WaRange
+          min="-50"
+          max="50"
+          step="1"
+          value={skidding}
+          label="Skidding"
+          onWaInput={event => setSkidding(event.target.value)}
+        />
+      </div>
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
 ### Virtual Elements
 
 In most cases, popups are anchored to an actual element. Sometimes, it can be useful to anchor them to a non-element. To do this, you can pass a `VirtualElement` to the anchor property. A virtual element must contain a function called `getBoundingClientRect()` that returns a [`DOMRect`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) object as shown below.
@@ -1608,7 +1733,7 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
   .popup-virtual-element .circle {
     width: 100px;
     height: 100px;
-    border: solid 4px var(--wa-color-neutral-outline-vivid);
+    border: solid 4px var(--wa-color-neutral-spot);
     border-radius: 50%;
     translate: -50px -50px;
     animation: 1s virtual-cursor infinite;
@@ -1636,7 +1761,7 @@ const css = `
   .popup-virtual-element .circle {
     width: 100px;
     height: 100px;
-    border: solid 4px var(--wa-color-neutral-outline-vivid);
+    border: solid 4px var(--wa-color-neutral-spot);
     border-radius: 50%;
     translate: -50px -50px;
     animation: 1s virtual-cursor infinite;

docs/pages/components/progress-bar.md

@@ -58,8 +58,8 @@ Use the default slot to show a value.
 
 <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>
+<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
+<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>
 
 <script>
   const progressBar = document.querySelector('.progress-bar-values');
@@ -103,11 +103,11 @@ const App = () => {
       <br />
 
       <WaButton circle onClick={() => adjustValue(-10)}>
-        <WaIcon name="dash" label="Decrease" />
+        <WaIcon name="minus" variant="solid" label="Decrease" />
       </WaButton>
 
       <WaButton circle onClick={() => adjustValue(10)}>
-        <WaIcon name="plus" label="Increase" />
+        <WaIcon name="plus" variant="solid" label="Increase" />
       </WaButton>
     </>
   );

docs/pages/components/progress-ring.md

@@ -108,8 +108,8 @@ Use the default slot to show a label inside the 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>
+<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
+<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>
 
 <script>
   const progressRing = document.querySelector('.progress-ring-values');
@@ -157,11 +157,11 @@ const App = () => {
       <br />
 
       <WaButton circle onClick={() => adjustValue(-10)}>
-        <WaIcon name="dash" label="Decrease" />
+        <WaIcon name="minus" variant="solid" label="Decrease" />
       </WaButton>
 
       <WaButton circle onClick={() => adjustValue(10)}>
-        <WaIcon name="plus" label="Increase" />
+        <WaIcon name="plus" variant="solid" label="Increase" />
       </WaButton>
     </>
   );

docs/pages/components/radio-button.md

@@ -203,18 +203,18 @@ 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>
+    <wa-icon slot="prefix" name="archive" variant="solid"></wa-icon>
     Option 1
   </wa-radio-button>
 
   <wa-radio-button value="2">
-    <wa-icon slot="suffix" name="bag"></wa-icon>
+    <wa-icon slot="suffix" name="bag-shopping" variant="solid"></wa-icon>
     Option 2
   </wa-radio-button>
 
   <wa-radio-button value="3">
-    <wa-icon slot="prefix" name="gift"></wa-icon>
-    <wa-icon slot="suffix" name="cart"></wa-icon>
+    <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
+    <wa-icon slot="suffix" name="shopping-cart" variant="solid"></wa-icon>
     Option 3
   </wa-radio-button>
 </wa-radio-group>
@@ -228,18 +228,18 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 const App = () => (
   <WaRadioGroup label="Select an option" name="a" value="1">
     <WaRadioButton value="1">
-      <WaIcon slot="prefix" name="archive" />
+      <WaIcon slot="prefix" name="archive" variant="solid" />
       Option 1
     </WaRadioButton>
 
     <WaRadioButton value="2">
-      <WaIcon slot="suffix" name="bag" />
+      <WaIcon slot="suffix" name="bag" variant="solid" />
       Option 2
     </WaRadioButton>
 
     <WaRadioButton value="3">
-      <WaIcon slot="prefix" name="gift" />
-      <WaIcon slot="suffix" name="cart" />
+      <WaIcon slot="prefix" name="gift" variant="solid" />
+      <WaIcon slot="suffix" name="cart" variant="solid" />
       Option 3
     </WaRadioButton>
   </WaRadioGroup>
@@ -253,23 +253,23 @@ You can omit button labels and use icons instead. Make sure to set a `label` att
 ```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-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
   </wa-radio-button>
 
   <wa-radio-button value="sad">
-    <wa-icon name="emoji-frown" label="Sad"></wa-icon>
+    <wa-icon name="face-frown" variant="solid" label="Sad"></wa-icon>
   </wa-radio-button>
 
   <wa-radio-button value="neutral">
-    <wa-icon name="emoji-neutral" label="Neutral"></wa-icon>
+    <wa-icon name="face-meh" variant="solid" label="Neutral"></wa-icon>
   </wa-radio-button>
 
   <wa-radio-button value="happy">
-    <wa-icon name="emoji-smile" label="Happy"></wa-icon>
+    <wa-icon name="face-smile" variant="solid" label="Happy"></wa-icon>
   </wa-radio-button>
 
   <wa-radio-button value="laughing">
-    <wa-icon name="emoji-laughing" label="Laughing"></wa-icon>
+    <wa-icon name="face-laugh" variant="solid" label="Laughing"></wa-icon>
   </wa-radio-button>
 </wa-radio-group>
 ```
@@ -282,23 +282,23 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 const App = () => (
   <WaRadioGroup label="Select an option" name="a" value="neutral">
     <WaRadioButton value="angry">
-      <WaIcon name="emoji-angry" label="Angry" />
+      <WaIcon name="face-angry" label="Angry" />
     </WaRadioButton>
 
     <WaRadioButton value="sad">
-      <WaIcon name="emoji-frown" label="Sad" />
+      <WaIcon name="face-frown" label="Sad" />
     </WaRadioButton>
 
     <WaRadioButton value="neutral">
-      <WaIcon name="emoji-neutral" label="Neutral" />
+      <WaIcon name="face-neutral" label="Neutral" />
     </WaRadioButton>
 
     <WaRadioButton value="happy">
-      <WaIcon name="emoji-smile" label="Happy" />
+      <WaIcon name="face-smile" label="Happy" />
     </WaRadioButton>
 
     <WaRadioButton value="laughing">
-      <WaIcon name="emoji-laughing" label="Laughing" />
+      <WaIcon name="face-laughing" label="Laughing" />
     </WaRadioButton>
   </WaRadioGroup>
 );

docs/pages/components/range.md

@@ -112,8 +112,8 @@ You can customize the active and inactive portions of the track using the `--tra
 ```html:preview
 <wa-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(--wa-color-brand-spot);
+  --track-color-inactive: var(--wa-color-brand-fill-highlight);
 "
 ></wa-range>
 ```
@@ -126,8 +126,8 @@ import WaRange from '@shoelace-style/shoelace/dist/react/range';
 const App = () => (
   <WaRange
     style={{
-      '--track-color-active': 'var(--wa-color-brand-fill-vivid)',
-      '--track-color-inactive': 'var(--wa-color-brand-fill-muted-alt)'
+      '--track-color-active': 'var(--wa-color-brand-spot)',
+      '--track-color-inactive': 'var(--wa-color-brand-fill-highlight)'
     }}
   />
 );
@@ -144,8 +144,8 @@ You can customize the initial offset of the active track using the `--track-acti
   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(--wa-color-brand-spot);
+  --track-color-inactive: var(--wa-color-brand-fill-highlight);
   --track-active-offset: 50%;
 "
 ></wa-range>
@@ -161,8 +161,8 @@ const App = () => (
     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(--wa-color-brand-spot)',
+      '--track-color-inactive': 'var(--wa-color-brand-fill-highlight)',
       '--track-active-offset': '50%'
     }}
   />

docs/pages/components/rating.md

@@ -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(--wa-corners-s);
+    background: var(--wa-color-neutral-spot);
+    color: var(--wa-color-neutral-text-on-spot);
     text-align: center;
     padding: 4px 6px;
   }
@@ -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(--wa-corners-s);
+    background: var(--wa-color-neutral-spot);
+    color: var(--wa-color-neutral-text-on-spot);
     text-align: center;
     padding: 4px 6px;
   }
@@ -207,7 +207,7 @@ You can provide custom icons by passing a function to the `getSymbol` property.
 
 <script>
   const rating = document.querySelector('.rating-hearts');
-  rating.getSymbol = () => '<wa-icon name="heart-fill"></wa-icon>';
+  rating.getSymbol = () => '<wa-icon name="heart" variant="solid"></wa-icon>';
 </script>
 ```
 
@@ -219,7 +219,7 @@ import WaRating from '@shoelace-style/shoelace/dist/react/rating';
 const App = () => (
   <WaRating
     label="Rating"
-    getSymbol={() => '<wa-icon name="heart-fill"></wa-icon>'}
+    getSymbol={() => '<wa-icon name="heart" variant="solid"></wa-icon>'}
     style={{ '--symbol-color-active': '#ff4136' }}
   />
 );
@@ -238,7 +238,7 @@ You can also use the `getSymbol` property to render different icons based on val
   const rating = document.querySelector('.rating-emojis');
 
   rating.getSymbol = value => {
-    const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
+    const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh'];
     return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
   };
 </script>
@@ -248,7 +248,7 @@ You can also use the `getSymbol` property to render different icons based on val
 import WaRating from '@shoelace-style/shoelace/dist/react/rating';
 
 function getSymbol(value) {
-  const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
+  const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh'];
   return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
 }
 

docs/pages/components/resize-observer.md

@@ -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(--wa-color-surface-border);
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -41,7 +41,7 @@ import WaResizeObserver from '@shoelace-style/shoelace/dist/react/resize-observe
 const css = `
   .resize-observer-overview div {
     display: flex;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     align-items: center;
     justify-content: center;
     text-align: center;

docs/pages/components/select.md

@@ -401,21 +401,21 @@ 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-icon slot="prefix" name="house" variant="solid"></wa-icon>
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>
 </wa-select>
 <br />
 <wa-select placeholder="Medium" size="medium" clearable>
-  <wa-icon name="house" slot="prefix"></wa-icon>
+  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
   <wa-option value="option-1">Option 1</wa-option>
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>
 </wa-select>
 <br />
 <wa-select placeholder="Large" size="large" clearable>
-  <wa-icon name="house" slot="prefix"></wa-icon>
+  <wa-icon slot="prefix" name="house" variant="solid"></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>
@@ -430,21 +430,21 @@ import WaSelect from '@shoelace-style/shoelace/dist/react/select';
 const App = () => (
   <>
     <WaSelect placeholder="Small" size="small">
-      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaIcon slot="prefix" name="house" variant="solid"></WaIcon>
       <WaOption value="option-1">Option 1</WaOption>
       <WaOption value="option-2">Option 2</WaOption>
       <WaOption value="option-3">Option 3</WaOption>
     </WaSelect>
     <br />
     <WaSelect placeholder="Medium" size="medium">
-      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaIcon slot="prefix" name="house" variant="solid"></WaIcon>
       <WaOption value="option-1">Option 1</WaOption>
       <WaOption value="option-2">Option 2</WaOption>
       <WaOption value="option-3">Option 3</WaOption>
     </WaSelect>
     <br />
     <WaSelect placeholder="Large" size="large">
-      <WaIcon name="house" slot="prefix"></WaIcon>
+      <WaIcon slot="prefix" name="house" variant="solid"></WaIcon>
       <WaOption value="option-1">Option 1</WaOption>
       <WaOption value="option-2">Option 2</WaOption>
       <WaOption value="option-3">Option 3</WaOption>
@@ -468,15 +468,15 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
   class="custom-tag"
 >
   <wa-option value="email">
-    <wa-icon slot="prefix" name="envelope"></wa-icon>
+    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
     Email
   </wa-option>
   <wa-option value="phone">
-    <wa-icon slot="prefix" name="telephone"></wa-icon>
+    <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
     Phone
   </wa-option>
   <wa-option value="chat">
-    <wa-icon slot="prefix" name="chat-dots"></wa-icon>
+    <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
     Chat
   </wa-option>
 </wa-select>

docs/pages/components/skeleton.md

@@ -259,7 +259,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
   }
 
   .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--wa-corners-s);
   }
 </style>
 ```
@@ -280,7 +280,7 @@ const css = `
   }
 
   .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--wa-corners-s);
   }
 `;
 
@@ -318,7 +318,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
   }
 
   .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--wa-corners-s);
   }
 
   .skeleton-shapes .circle::part(indicator) {
@@ -370,7 +370,7 @@ const css = `
   }
 
   .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--wa-corners-s);
   }
 
   .skeleton-shapes .circle::part(indicator) {
@@ -438,7 +438,7 @@ const css = `
   }
 
   .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-1x);
+    --border-radius: var(--wa-corners-s);
   }
 `;
 

docs/pages/components/split-panel.md

@@ -249,7 +249,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(--wa-color-neutral-spot);
     transform: translateX(-3px);
   }
 
@@ -281,7 +281,7 @@ const css = `
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: var(--wa-color-neutral-fill-vivid-alt);
+    background: var(--wa-color-neutral-spot);
     transform: translateX(-3px);
   }
 
@@ -638,7 +638,7 @@ You can target the `divider` part to apply CSS properties to the divider. To add
 
 ```html:preview
 <wa-split-panel style="--divider-width: 20px;">
-  <wa-icon slot="divider" name="grip-vertical"></wa-icon>
+  <wa-icon slot="divider" name="grip-vertical" variant="solid"></wa-icon>
   <div
     slot="start"
     style="
@@ -676,7 +676,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <WaSplitPanel style={{ '--divider-width': '20px' }}>
-    <WaIcon slot="divider" name="grip-vertical" />
+    <WaIcon slot="divider" name="grip-vertical" variant="solid" />
     <div
       slot="start"
       style={{
@@ -712,7 +712,7 @@ 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>
+    <wa-icon slot="divider" name="grip-vertical" variant="solid"></wa-icon>
     <div
       slot="start"
       style="
@@ -744,7 +744,7 @@ Here's a more elaborate example that changes the divider's color and width and a
 
 <style>
   .split-panel-divider wa-split-panel {
-    --divider-width: 2px;
+    --divider-width: 4px;
   }
 
   .split-panel-divider wa-split-panel::part(divider) {
@@ -753,10 +753,10 @@ Here's a more elaborate example that changes the divider's color and width and a
 
   .split-panel-divider wa-icon {
     position: absolute;
-    border-radius: var(--wa-corners-3x);
+    border-radius: var(--wa-corners-l);
     background: var(--wa-color-red-50);
-    color: var(--wa-color-white);
-    padding: 0.5rem 0.125rem;
+    color: white;
+    padding: 0.5rem 0.25rem;
   }
 
   .split-panel-divider wa-split-panel::part(divider):focus-visible {
@@ -765,7 +765,7 @@ Here's a more elaborate example that changes the divider's color and width and a
 
   .split-panel-divider wa-split-panel:focus-within wa-icon {
     background-color: var(--wa-color-blue-50);
-    color: var(--wa-color-white);
+    color: white;
   }
 </style>
 ```
@@ -778,8 +778,8 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const css = `
   .split-panel-divider wa-split-panel {
-    --divider-width: 2px;
-  }
+    --divider-width: 4px;
+    }
 
   .split-panel-divider wa-split-panel::part(divider) {
     background-color: var(--wa-color-red-50);
@@ -787,10 +787,10 @@ const css = `
 
   .split-panel-divider wa-icon {
     position: absolute;
-    border-radius: var(--wa-corners-half);
+    border-radius: var(--wa-corners-xs);
     background: var(--wa-color-red-50);
-    color: var(--wa-color-white);
-    padding: .5rem .125rem;
+    color: white;
+    padding: .5rem .25rem;
   }
 
   .split-panel-divider wa-split-panel::part(divider):focus-visible {
@@ -799,7 +799,7 @@ const css = `
 
   .split-panel-divider wa-split-panel:focus-within wa-icon {
     background-color: var(--wa-color-blue-50);
-    color: var(--wa-color-white);
+    color: white;
   }
 `;
 
@@ -807,7 +807,7 @@ const App = () => (
   <>
     <div className="split-panel-divider">
       <WaSplitPanel>
-        <WaIcon slot="divider" name="grip-vertical" />
+        <WaIcon slot="divider" name="grip-vertical" variant="solid" />
         <div
           slot="start"
           style={{

docs/pages/components/tooltip.md

@@ -402,7 +402,7 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto|
 <style>
   .tooltip-hoist {
     position: relative;
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: hidden;
     padding: var(--wa-space-m);
   }
@@ -415,7 +415,7 @@ import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const css = `
   .tooltip-hoist {
-    border: solid 2px var(--wa-color-surface-outline);
+    border: solid 2px var(--wa-color-surface-border);
     overflow: hidden;
     padding: var(--wa-space-m);
     position: relative;

docs/pages/components/tree.md

@@ -304,8 +304,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 
 ```html:preview
 <wa-tree class="custom-icons">
-  <wa-icon name="plus-square" slot="expand-icon"></wa-icon>
-  <wa-icon name="dash-square" slot="collapse-icon"></wa-icon>
+  <wa-icon name="square-plus" variant="solid" slot="expand-icon"></wa-icon>
+  <wa-icon name="square-minus" variant="solid" slot="collapse-icon"></wa-icon>
 
   <wa-tree-item>
     Deciduous
@@ -349,8 +349,8 @@ import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
 
 const App = () => (
   <WaTree>
-    <WaIcon name="plus-square" slot="expand-icon"></WaIcon>
-    <WaIcon name="dash-square" slot="collapse-icon"></WaIcon>
+    <WaIcon name="square-plus" variant="solid" slot="expand-icon"></WaIcon>
+    <WaIcon name="square-minus" variant="solid" slot="collapse-icon"></WaIcon>
 
     <WaTreeItem>
       Deciduous
@@ -388,39 +388,39 @@ Decorative icons can be used before labels to provide hints for each node.
 ```html:preview
 <wa-tree class="tree-with-icons">
   <wa-tree-item expanded>
-    <wa-icon name="folder"></wa-icon>
+    <wa-icon name="folder" variant="regular"></wa-icon>
     Documents
 
     <wa-tree-item>
-      <wa-icon name="folder"> </wa-icon>
+      <wa-icon name="folder" variant="regular"> </wa-icon>
       Photos
       <wa-tree-item>
-        <wa-icon name="image"></wa-icon>
+        <wa-icon name="image" variant="regular"></wa-icon>
         birds.jpg
       </wa-tree-item>
       <wa-tree-item>
-        <wa-icon name="image"></wa-icon>
+        <wa-icon name="image" variant="regular"></wa-icon>
         kitten.jpg
       </wa-tree-item>
       <wa-tree-item>
-        <wa-icon name="image"></wa-icon>
+        <wa-icon name="image" variant="regular"></wa-icon>
         puppy.jpg
       </wa-tree-item>
     </wa-tree-item>
 
     <wa-tree-item>
-      <wa-icon name="folder"></wa-icon>
+      <wa-icon name="folder" variant="regular"></wa-icon>
       Writing
       <wa-tree-item>
-        <wa-icon name="file"></wa-icon>
+        <wa-icon name="file" variant="regular"></wa-icon>
         draft.txt
       </wa-tree-item>
       <wa-tree-item>
-        <wa-icon name="file-pdf"></wa-icon>
+        <wa-icon name="file-pdf" variant="regular"></wa-icon>
         final.pdf
       </wa-tree-item>
       <wa-tree-item>
-        <wa-icon name="file-bar-graph"></wa-icon>
+        <wa-icon name="file-lines" variant="regular"></wa-icon>
         sales.xls
       </wa-tree-item>
     </wa-tree-item>

docs/pages/components/visually-hidden.md

@@ -26,7 +26,7 @@ In this example, the link will open a new window. Screen readers will announce "
 ```html:preview
 <a href="https://example.com/" target="_blank">
   Visit External Page
-  <wa-icon name="box-arrow-up-right"></wa-icon>
+  <wa-icon name="arrow-up-right-from-square" variant="regular"></wa-icon>
   <wa-visually-hidden>opens in a new window</wa-visually-hidden>
 </a>
 ```

docs/pages/experimental/sandbox.md

@@ -0,0 +1,168 @@
+---
+meta:
+  title: Theming Sandbox
+  description: TODO
+---
+
+# Theming Sandbox
+
+#### Card
+
+```html:preview
+<wa-card class="card-overview">
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+  />
+
+  <strong>Mittens</strong><br />
+  This kitten is as cute as he is playful. Bring him home today!<br />
+  <small>6 weeks old</small>
+
+  <div slot="footer">
+    <wa-button variant="brand" pill>More Info</wa-button>
+    <wa-rating></wa-rating>
+  </div>
+</wa-card>
+
+<style>
+  .card-overview {
+    max-width: 300px;
+  }
+
+  .card-overview small {
+    color: var(--wa-color-text-quiet);
+  }
+
+  .card-overview [slot='footer'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
+```
+
+#### Alerts
+
+```html:preview
+<wa-alert variant="brand" open>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+  <strong>This is super informative</strong><br />
+  You can tell by how pretty the alert is.
+</wa-alert>
+<br />
+<wa-alert variant="success" open>
+  <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
+  <strong>Your changes have been saved</strong><br />
+  You can safely exit the app now.
+</wa-alert>
+<br />
+<wa-alert variant="neutral" open>
+  <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
+  <strong>Your settings have been updated</strong><br />
+  Settings will take affect on next login.
+</wa-alert>
+<br />
+<wa-alert variant="warning" open>
+  <wa-icon slot="icon" name="circle-exclamation" variant="solid"></wa-icon>
+  <strong>Your session has ended</strong><br />
+  Please login again to continue.
+</wa-alert>
+<br />
+<wa-alert variant="danger" open>
+  <wa-icon slot="icon" name="triangle-exclamation" variant="solid"></wa-icon>
+  <strong>Your account has been deleted</strong><br />
+  We're very sorry to see you go!
+</wa-alert>
+```
+
+#### Badges and Tags
+
+```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>
+<br />
+<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>
+```
+
+#### Buttons
+
+```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>
+<br /><br />
+<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>
+<br /><br />
+<wa-button variant="text">Brand</wa-button>
+```
+
+#### Form controls
+
+```html:preview
+<wa-checkbox>Unchecked</wa-checkbox>
+<br />
+<wa-checkbox checked>Checked</wa-checkbox>
+<br /><br />
+<wa-radio-group label="Radio" 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>
+<br />
+<wa-switch>Switch off</wa-switch>
+<br />
+<wa-switch checked>Switch on</wa-switch>
+<br /><br />
+<wa-input label="Label" help-text="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
+<br />
+<wa-select label="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>
+```
+
+#### Progress
+
+```html:preview
+<wa-progress-ring value="25" style="--indicator-width: 4px;"></wa-progress-ring>
+<wa-progress-bar value="60"></wa-progress-bar>
+<wa-spinner></wa-spinner>
+```
+
+#### Shadows
+
+```html:preview
+<style>
+  div.shadow {
+    border: 1px solid var(--wa-color-surface-border);
+    border-radius: var(--wa-corners-s);
+    display: inline-block;
+    height: 4rem;
+    margin-right: 2rem;
+    width: 4rem;
+  }
+  </style>
+<div class="shadow" style="box-shadow: var(--wa-shadow-inset);"></div>
+<div class="shadow" style="box-shadow: var(--wa-shadow-level-1);"></div>
+<div class="shadow" style="box-shadow: var(--wa-shadow-level-2);"></div>
+<div class="shadow" style="box-shadow: var(--wa-shadow-level-3);"></div>
+```

docs/pages/experimental/themer.md

@@ -11,9 +11,11 @@ toc: false
     <a href="/">{% include 'logo.njk' %}</a>
     <wa-select name="theme" label="Theme" value="default">
       <wa-option value="default">Default</wa-option>
+      <wa-option value="classic">Classic</wa-option>
       <wa-option value="glassy">Glassy</wa-option>
       <wa-option value="mellow">Mellow</wa-option>
       <wa-option value="playful">Playful</wa-option>
+      <wa-option value="chic">Chic</wa-option>
     </wa-select>
     <wa-select name="heading-text" label="Heading" value="">
       <wa-option value="">Theme default</wa-option>
@@ -62,12 +64,12 @@ toc: false
 
   // Corners
   container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
-    document.documentElement.style.setProperty('--wa-corners-base', `${event.target.value}rem`);
+    document.documentElement.style.setProperty('--wa-corners-base', `${event.target.value}`);
   });
 
   // Border width
   container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
-    document.documentElement.style.setProperty('--wa-border-width-base', `${event.target.value / 16}rem`);
+    document.documentElement.style.setProperty('--wa-border-width-base', `${event.target.value / 16}`);
   });
 
   // Border style
@@ -77,7 +79,7 @@ toc: false
 
   // Spacing style
   container.querySelector('[name="spacing"]').addEventListener('wa-input', event => {
-    document.documentElement.style.setProperty('--wa-space-base', `${event.target.value}rem`);
+    document.documentElement.style.setProperty('--wa-space-base', `${event.target.value}`);
   });
 
 </script>
@@ -93,8 +95,8 @@ toc: false
     top: 2rem;
     left: 2rem;
     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);
+    border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+    border-radius: var(--wa-corners-m);
     box-shadow: var(--wa-shadow-level-2);
     width: var(--knobs-width);
     padding: 2rem;
@@ -152,7 +154,7 @@ toc: false
       <wa-card>
         <div class="space-vertically">
           <wa-alert variant="success" open>
-            <wa-icon slot="icon" name="check-circle-fill"></wa-icon>
+            <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
             This is the way.
           </wa-alert>
           <wa-select label="Signet" help-text="This identifies your clan. You can change this later.">
@@ -165,7 +167,7 @@ toc: false
       <wa-card>
         <div class="space-vertically">
           <wa-alert variant="warning" open>
-            <wa-icon slot="icon" name="check-circle-fill"></wa-icon>
+            <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
             It's a trap!
           </wa-alert> 
           <wa-radio-group label="Faction" value="2">
@@ -179,7 +181,7 @@ toc: false
       <wa-card>
         <div class="space-vertically">
           <wa-alert variant="danger" open>
-            <wa-icon slot="icon" name="check-circle-fill"></wa-icon>
+            <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
             That's no moon.
           </wa-alert>
           <wa-input label="Destination" value="Alderaan"></wa-input>
@@ -215,7 +217,7 @@ toc: false
 
   .preview-container {
     background: var(--wa-color-surface-lowered);
-    padding-inline: var(--wa-space-xl);
+    padding-inline: var(--wa-space-2xl);
     padding-block-end: var(--wa-space-2xl);
     translate: calc((var(--knobs-width) + 2rem) / 2);
   }
@@ -230,16 +232,16 @@ toc: false
   .overlap::after {
     content: '';
     position: absolute;
-    top: calc(-1 * var(--wa-space-xl));
-    left: calc(-1 * var(--wa-space-xl));
-    width: calc(100% + var(--wa-space-xl) * 2);
+    top: calc(-1 * var(--wa-space-2xl));
+    left: calc(-1 * var(--wa-space-2xl));
+    width: calc(100% + var(--wa-space-2xl) * 2);
     height: 300px;
-    background: var(--wa-color-brand-fill-vivid);
+    background: var(--wa-color-brand-spot);
     z-index: -1;
   }
 
   .overlap h1 {
-    color: var(--wa-color-brand-text-on-vivid);
+    color: var(--wa-color-brand-text-on-spot);
   }
 
   .overlap .grid {
@@ -254,37 +256,37 @@ toc: false
     display: block;
     width: 100%;
     aspect-ratio: 1;
-    border-radius: var(--wa-corners-2x);
+    border-radius: var(--wa-corners-m);
     align-self: start;
   }
 
   .overlap .image #city,
   .overlap .image #falcon {
-    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), black 50%);
+    fill: color-mix(in oklab, var(--wa-color-brand-spot), black 50%);
   }
 
   .overlap .image #fighters {
-    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), black 30%); 
+    fill: color-mix(in oklab, var(--wa-color-brand-spot), black 30%); 
   }
 
   .overlap .image #upper_clouds {
-    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), white 80%);
+    fill: color-mix(in oklab, var(--wa-color-brand-spot), white 80%);
   }
 
   .overlap .image #background_clouds {
-    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), white 90%);
+    fill: color-mix(in oklab, var(--wa-color-brand-spot), white 90%);
   }
 
   .overlap .image #forefront_clouds {
-    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), white 70%);
+    fill: color-mix(in oklab, var(--wa-color-brand-spot), white 70%);
   }
 
   .overlap .image .gradient-start {
-    stop-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), white 80%);
+    stop-color: color-mix(in oklab, var(--wa-color-brand-spot), white 80%);
   }
 
   .overlap .image .gradient-stop {
-    stop-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), white 0%);
+    stop-color: color-mix(in oklab, var(--wa-color-brand-spot), white 0%);
   }
 
   .cards {

docs/pages/frameworks/angular.md

@@ -10,16 +10,40 @@ Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custo
 
 ## Installation
 
+### Download the npm package
+
 To add Web Awesome to your Angular app, install the package from npm.
 
 ```bash
 npm install @shoelace-style/shoelace
 ```
 
-Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
+### Update the Angular Configuration
+
+Next, [include a theme](/getting-started/themes). In this example, we'll import the light theme.
+Its also important to load the components by using a `<script>` tag into the index.html file. However, the Angular way to do it is by adding a script configurations into your angular.json file as follows:
+
+```json
+"architect": {
+  "build": {
+    ...
+    "options": {
+      ...
+      "styles": [
+        "src/styles.scss",
+        "@shoelace-style/shoelace/dist/themes/light.css"
+       ],
+      "scripts": [
+        "@shoelace-style/shoelace/dist/shoelace.js"
+      ]
+      ...
+```
+
+### Setting up the base path
+
+Next, set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets in the `main.ts`. In this example, we'll use the CDN as a base path.
 
 ```jsx
-import '@shoelace-style/shoelace/%NPMDIR%/themes/default.css';
 import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path';
 
 setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');

docs/pages/frameworks/vue.md

@@ -107,6 +107,19 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
 <wa-color-picker :swatches.prop="mySwatches" />
 ```
 
+### Two-way Binding
+
+One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.
+
+```html
+<!-- This doesn't work -->
+<wa-input v-model="name"></wa-input>
+<!-- This works, but it's a bit longer -->
+<wa-input :value="name" @input="name = $event.target.value"></wa-input>
+```
+
+If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Web Awesome components.
+
 :::tip
 Are you using Web Awesome with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md)
 :::

docs/pages/getting-started/usage.md

@@ -85,7 +85,7 @@ Some components also have _named_ slots. A named slot can be populated by adding
 
 ```html
 <wa-button>
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 ```

docs/pages/resources/changelog.md

@@ -14,6 +14,10 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 ## 3.0 Changes (BREAKING)
 
+- Added `setKitCode()` and `getKitCode()` functions as well as support for setting kit codes declaratively with `data-webawesome-kit`
+- Added `family` and `variant` attributes to `<wa-icon>` and `<wa-icon-button>`
+- Changed the attribute for setting the base path declaratively to `data-webawesome` instead of `data-shoelace`; additionally, you can place it on any element now instead of just the associated `<script>` tag
+- `<wa-icon>` icons are no longer fixed width by default to accommodate variable width icons
 - Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
 - Changed `primary` variants to `brand` in all components
 - Improved submenu selection by implementing the [safe triangle](https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) method [#1550]
@@ -22,6 +26,32 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 ## Next
 
+- Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
+- Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
+- Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
+- Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
+
+## 2.12.0
+
+- Added the Italian translation [#1727]
+- Added the ability to call `form.checkValidity()` and it will use Shoelace's custom `checkValidity()` handler. [#1708]
+- Fixed a bug where nested dialogs were not properly trapping focus. [#1711]
+- Fixed a bug with form controls removing the custom validity handlers from the form. [#1708]
+- Fixed a bug in form control components that used a `form` property, but not an attribute. [#1707]
+- Fixed a bug with bundled components using CDN builds not having translations on initial connect [#1696]
+- Fixed a bug where the `"sl-change"` event would always fire simultaneously with `"sl-input"` event in `<sl-color-picker>`. The `<sl-change>` event now only fires when a user stops dragging a slider or stops dragging on the color canvas. [#1689]
+- Updated the copy icon in the system library [#1702]
+
+## 2.11.2
+
+- Fixed a bug in `<sl-carousel>` component that caused an error to be thrown when rendered with Lit [#1684]
+
+## 2.11.1
+
+- Improved the experimental `<sl-carousel>` component [#1605]
+
+## 2.11.0
+
 - Added the Croatian translation [#1656]
 - Fixed a bug that caused the [[Escape]] key to stop propagating when tooltips are disabled [#1607]
 - Fixed a bug that made it impossible to style placeholders in `<sl-select>` [#1667]
@@ -1306,7 +1336,7 @@ The component API remains the same except for the changes noted below. Thanks fo
 - 🚨 BREAKING: moved the base stylesheet from `dist/shoelace.css` to `dist/themes/base.css`
 - 🚨 BREAKING: moved `icons` into `assets/icons` to make future assets easier to colocate
 - 🚨 BREAKING: changed `getSymbol` property in `<wa-rating>` to `symbol` (it now accepts a string or a function that returns an icon name)
-- 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-webawesome` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
+- 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-web-awesome` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
 - Fixed `min` and `max` types in `<wa-input>` to allow numbers and strings [#330]
 - Fixed a bug where `<wa-checkbox>`, `<wa-radio>`, and `<wa-switch>` controls would shrink with long labels [#325]
 - Fixed a bug in `<wa-select>` where the dropdown menu wouldn't reposition when the box resized [#340]

docs/pages/resources/community.md

@@ -20,7 +20,7 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
 - Learn more about the project, its values, and its roadmap
 
 <wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank">
-  <wa-icon name="github" slot="prefix"></wa-icon>
+  <wa-icon name="github" family="brands" slot="prefix"></wa-icon>
   Join the Discussion
 </wa-button>
 
@@ -34,7 +34,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 - Chat live with other designers, developers, and Web Awesome fans
 
 <wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank">
-  <wa-icon name="discord" slot="prefix"></wa-icon>
+  <wa-icon name="discord" family="brands" slot="prefix"></wa-icon>
   Join the Chat
 </wa-button>
 
@@ -45,6 +45,6 @@ Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for gene
 **Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
 
 <wa-button variant="brand" href="https://twitter.com/shoelace_style" target="_blank">
-  <wa-icon name="twitter" slot="prefix"></wa-icon>
+  <wa-icon name="twitter" family="brands" slot="prefix"></wa-icon>
   Follow on Twitter
 </wa-button>

docs/pages/resources/contributing.md

@@ -348,16 +348,18 @@ When change events are emitted by Web Awesome components, they should be named `
 
 ### CSS Custom Properties
 
+Custom properties allow users to customize Web Awesome components by exposing specific styles across a component's shadow boundary. Use custom properties to expose key characteristics of a component for low-level theming. Avoid using custom properties for styles that may interfere with proper rendering.
+
 To expose custom properties as part of a component's API, scope them to the `:host` block.
 
 ```css
 :host {
-  --color: var(--sl-color-primary-500);
-  --background-color: var(--sl-color-neutral-100);
+  --color: var(--wa-color-brand-text-on-spot);
+  --background-color: var(--wa-color-brand-spot);
 }
 ```
 
-Then use the following syntax for comments so they appear in the generated docs. Do not use the `--sl-` prefix, as that is reserved for design tokens that live in the global scope.
+Then use the following syntax for comments so they appear in the generated docs. Do not use the `--wa-` prefix, as that is reserved for design tokens that live in the global scope.
 
 ```js
 /**
@@ -437,7 +439,7 @@ Form controls should support submission and validation through the following con
 Avoid inlining SVG icons inside of templates. If a component requires an icon, make sure `<wa-icon>` is a dependency of the component and use the [system library](/components/icon#customizing-the-system-library):
 
 ```html
-<wa-icon library="system" name="..."></wa-icon>
+<wa-icon library="system" name="..." variant="..."></wa-icon>
 ```
 
 This will render the icons instantly whereas the default library will fetch them from a remote source. If an icon isn't available in the system library, you will need to add it to `library.system.ts`. Using the system library ensures that all icons load instantly and are customizable by users who wish to provide a custom resolver for the system library.

docs/pages/tokens/borders.md

@@ -19,12 +19,12 @@ Border radius tokens are used to give sharp edges a more subtle, rounded effect.
 
 TODO
 
-| Token               | Value                              | Example                                                                        |
-| ------------------- | ---------------------------------- | ------------------------------------------------------------------------------ |
-| `--wa-corners-half` | `calc(var(--wa-corners-1x) * 0.5)` | <div class="corner-demo" style="border-radius: var(--wa-corners-half);"></div> |
-| `--wa-corners-1x`   | `0.25rem`                          | <div class="corner-demo" style="border-radius: var(--wa-corners-1x);"></div>   |
-| `--wa-corners-2x`   | `calc(var(--wa-corners-1x) * 2)`   | <div class="corner-demo" style="border-radius: var(--wa-corners-2x);"></div>   |
-| `--wa-corners-3x`   | `calc(var(--wa-corners-1x) * 3)`   | <div class="corner-demo" style="border-radius: var(--wa-corners-3x);"></div>   |
+| Token             | Value                             | Example                                                                      |
+| ----------------- | --------------------------------- | ---------------------------------------------------------------------------- |
+| `--wa-corners-xs` | `calc(var(--wa-corners-s) * 0.5)` | <div class="corner-demo" style="border-radius: var(--wa-corners-xs);"></div> |
+| `--wa-corners-s`  | `0.25rem`                         | <div class="corner-demo" style="border-radius: var(--wa-corners-s);"></div>  |
+| `--wa-corners-m`  | `calc(var(--wa-corners-s) * 2)`   | <div class="corner-demo" style="border-radius: var(--wa-corners-m);"></div>  |
+| `--wa-corners-l`  | `calc(var(--wa-corners-s) * 3)`   | <div class="corner-demo" style="border-radius: var(--wa-corners-l);"></div>  |
 
 ## Special Corners
 

docs/pages/tokens/color.md

@@ -92,26 +92,17 @@ Additional color palettes are provided in the form of color primitives. Use thes
 
 <div class="color-palette">
   <div class="color-palette__name">
-    Neutral<br>
+    Base<br>
     <code>--wa-color-neutral-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-10);"></div>10</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-20);"></div>20</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-30);"></div>30</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-40);"></div>40</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-60);"></div>60</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-70);"></div>70</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-80);"></div>80</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-90);"></div>90</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-neutral-95);"></div>95</div>
-</div>
-
-<div class="color-palette">
-  <div class="color-palette__name">
-    Black & White<br>
-    <code>--wa-color-<em>{n}</em></code>
-  </div>
-  <div class="color-palette__example"><div class="color-palette__swatch " style="background-color: var(--wa-color-black);"></div>black</div>
-  <div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: var(--wa-color-white);"></div>white</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-10);"></div>10</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-20);"></div>20</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-30);"></div>30</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-40);"></div>40</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-50);"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-60);"></div>60</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-70);"></div>70</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-80);"></div>80</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-90);"></div>90</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--wa-color-base-95);"></div>95</div>
 </div>

docs/pages/tokens/more.md

@@ -19,13 +19,13 @@ Focus ring tokens control the appearance of focus rings.
 
 Form control tokens control the appearance of form controls such as [input](/components/input), [select](/components/select), [textarea](/components/textarea), etc.
 
-| Token                                       | Value                                       |
-| ------------------------------------------- | ------------------------------------------- |
-| `--wa-form-controls-background`             | `var(--wa-color-surface-raised)`            |
-| `--wa-form-controls-border-style`           | `var(--wa-border-style)`                    |
-| `--wa-form-controls-border-width`           | `var(--wa-border-width-thin)`               |
-| `--wa-form-controls-corners`                | `var(--wa-corners-1x)`                      |
-| `--wa-form-controls-border-color-resting`   | `var(--wa-color-neutral-outline-muted-alt)` |
-| `--wa-form-controls-border-color-activated` | `var(--wa-color-brand-action-vivid)`        |
-| `--wa-form-controls-value-line-height`      | `var(--wa-font-height-compact)`             |
-| `--wa-form-controls-placeholder-color`      | `var(--wa-color-neutral-60)`                |
+| Token                                  | Value                                      |
+| -------------------------------------- | ------------------------------------------ |
+| `--wa-form-controls-background`        | `var(--wa-color-surface-raised)`           |
+| `--wa-form-controls-border-style`      | `var(--wa-border-style)`                   |
+| `--wa-form-controls-border-width`      | `var(--wa-border-width-thin)`              |
+| `--wa-form-controls-corners`           | `var(--wa-corners-s)`                      |
+| `--wa-form-controls-resting-color`     | `var(--wa-color-neutral-border-highlight)` |
+| `--wa-form-controls-activated-color`   | `var(--wa-color-brand-action-vivid)`       |
+| `--wa-form-controls-value-line-height` | `var(--wa-font-height-compact)`            |
+| `--wa-form-controls-placeholder-color` | `var(--wa-color-base-60)`                  |

docs/pages/tokens/spacing.md

@@ -19,39 +19,3 @@ Spacing tokens are used to provide consistent spacing between content in your ap
 | `--wa-space-xl`  | 1.5rem (24px)  | <div class="spacing-demo" style="width: var(--wa-space-xl); height: 0.25rem;"></div>  |
 | `--wa-space-2xl` | 2rem (32px)    | <div class="spacing-demo" style="width: var(--wa-space-2xl); height: 0.25rem;"></div> |
 | `--wa-space-3xl` | 3rem (48px)    | <div class="spacing-demo" style="width: var(--wa-space-3xl); height: 0.25rem;"></div> |
-
-## Square Tokens
-
-TODO
-
-| Token                  | Value                | Example                                                                                             |
-| ---------------------- | -------------------- | --------------------------------------------------------------------------------------------------- |
-| `--wa-space-square-xs` | `var(--wa-space-xs)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-xs);"></div> |
-| `--wa-space-square-s`  | `var(--wa-space-s)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-s);"></div>  |
-| `--wa-space-square-m`  | `var(--wa-space-m)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-m);"></div>  |
-| `--wa-space-square-l`  | `var(--wa-space-l)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-l);"></div>  |
-| `--wa-space-square-xl` | `var(--wa-space-xl)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-square-xl);"></div> |
-
-## Stretch Tokens
-
-TODO
-
-| Token                   | Value                                    | Example                                                                                              |
-| ----------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `--wa-space-stretch-xs` | `var(--wa-space-xs) var(--wa-space-m)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-xs);"></div> |
-| `--wa-space-stretch-s`  | `var(--wa-space-s) var(--wa-space-l)`    | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-s);"></div>  |
-| `--wa-space-stretch-m`  | `var(--wa-space-m) var(--wa-space-xl)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-m);"></div>  |
-| `--wa-space-stretch-l`  | `var(--wa-space-l) var(--wa-space-2xl)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-l);"></div>  |
-| `--wa-space-stretch-xl` | `var(--wa-space-xl) var(--wa-space-3xl)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-stretch-xl);"></div> |
-
-## Squish Tokens
-
-TODO
-
-| Token                  | Value                                    | Example                                                                                             |
-| ---------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `--wa-space-squish-xs` | `var(--wa-space-xs) var(--wa-space-3xs)` | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-xs);"></div> |
-| `--wa-space-squish-s`  | `var(--wa-space-s) var(--wa-space-2xs)`  | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-s);"></div>  |
-| `--wa-space-squish-m`  | `var(--wa-space-m) var(--wa-space-xs)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-m);"></div>  |
-| `--wa-space-squish-l`  | `var(--wa-space-l) var(--wa-space-s)`    | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-l);"></div>  |
-| `--wa-space-squish-xl` | `var(--wa-space-xl) var(--wa-space-m)`   | <div class="spacing-demo" style="display: inline-block; padding: var(--wa-space-squish-xl);"></div> |

package-lock.json

@@ -37,7 +37,7 @@
         "command-line-args": "^5.2.1",
         "comment-parser": "^1.4.0",
         "cspell": "^6.18.1",
-        "custom-element-jet-brains-integration": "^1.2.1",
+        "custom-element-jet-brains-integration": "^1.4.0",
         "custom-element-vs-code-integration": "^1.2.1",
         "del": "^7.1.0",
         "download": "^8.0.0",
@@ -66,7 +66,6 @@
         "markdown-it-mark": "^3.0.1",
         "markdown-it-replace-it": "^1.0.0",
         "npm-check-updates": "^16.14.6",
-        "ora": "^7.0.1",
         "pascal-case": "^3.1.2",
         "plop": "^4.0.0",
         "prettier": "^3.0.3",
@@ -6714,9 +6713,9 @@
       "dev": true
     },
     "node_modules/custom-element-jet-brains-integration": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.2.1.tgz",
-      "integrity": "sha512-PepVXf0KiaG5HTASBYt89E9KPMC/l/I4ZPd8D8mYyBtUCVCPvYjqQG9zLjvY/d62iELK6B5R1XGaoNjZtfpMGA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.4.0.tgz",
+      "integrity": "sha512-eL2XNiE9yHM81e/+e/SOKuRUohWYa+HH68mnELF5SIFIhdlKp8oWAs4YCDbKF0yv6tGzei8t/xaoHuuiWR0OyQ==",
       "dev": true,
       "dependencies": {
         "prettier": "^2.8.0"
@@ -23670,9 +23669,9 @@
       "dev": true
     },
     "custom-element-jet-brains-integration": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.2.1.tgz",
-      "integrity": "sha512-PepVXf0KiaG5HTASBYt89E9KPMC/l/I4ZPd8D8mYyBtUCVCPvYjqQG9zLjvY/d62iELK6B5R1XGaoNjZtfpMGA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.4.0.tgz",
+      "integrity": "sha512-eL2XNiE9yHM81e/+e/SOKuRUohWYa+HH68mnELF5SIFIhdlKp8oWAs4YCDbKF0yv6tGzei8t/xaoHuuiWR0OyQ==",
       "dev": true,
       "requires": {
         "prettier": "^2.8.0"

package.json

@@ -46,11 +46,10 @@
     "build": "node scripts/build.js",
     "verify": "npm run prettier:check && npm run lint && npm run build && npm run test",
     "prepublishOnly": "npm run verify",
-    "prettier": "prettier --write --loglevel warn .",
-    "prettier:check": "prettier --check --loglevel warn .",
+    "prettier": "prettier --write --log-level warn .",
+    "prettier:check": "prettier --check --log-level warn .",
     "lint": "eslint src --max-warnings 0",
     "lint:fix": "eslint src --max-warnings 0 --fix",
-    "ts-check": "tsc --noEmit --project ./tsconfig.json",
     "create": "plop --plopfile scripts/plop/plopfile.js",
     "test": "web-test-runner --group default",
     "test:component": "web-test-runner -- --watch --group",
@@ -91,7 +90,7 @@
     "command-line-args": "^5.2.1",
     "comment-parser": "^1.4.0",
     "cspell": "^6.18.1",
-    "custom-element-jet-brains-integration": "^1.2.1",
+    "custom-element-jet-brains-integration": "^1.4.0",
     "custom-element-vs-code-integration": "^1.2.1",
     "del": "^7.1.0",
     "download": "^8.0.0",
@@ -120,7 +119,6 @@
     "markdown-it-mark": "^3.0.1",
     "markdown-it-replace-it": "^1.0.0",
     "npm-check-updates": "^16.14.6",
-    "ora": "^7.0.1",
     "pascal-case": "^3.1.2",
     "plop": "^4.0.0",
     "prettier": "^3.0.3",

scripts/build.js

@@ -8,7 +8,6 @@ import copy from 'recursive-copy';
 import esbuild from 'esbuild';
 import fs from 'fs/promises';
 import getPort, { portNumbers } from 'get-port';
-import ora from 'ora';
 import util from 'util';
 import * as path from 'path';
 import { readFileSync } from 'fs';
@@ -18,10 +17,8 @@ const { serve } = commandLineArgs([{ name: 'serve', type: Boolean }]);
 const outdir = 'dist';
 const cdndir = 'cdn';
 const sitedir = '_site';
-const spinner = ora({ hideCursor: false }).start();
 const execPromise = util.promisify(exec);
-let childProcess;
-let buildResults;
+let buildResults = [];
 
 const bundleDirectories = [cdndir, outdir];
 let packageData = JSON.parse(readFileSync(path.join(process.cwd(), 'package.json'), 'utf-8'));
@@ -34,11 +31,8 @@ const shoelaceVersion = JSON.stringify(packageData.version.toString());
 async function buildTheDocs(watch = false) {
   return new Promise(async (resolve, reject) => {
     const afterSignal = '[eleventy.after]';
-
-    // Totally non-scientific way to handle errors. Perhaps its just better to resolve on stderr? :shrug:
     const errorSignal = 'Original error stack trace:';
     const args = ['@11ty/eleventy', '--quiet'];
-    const output = [];
 
     if (watch) {
       args.push('--watch');
@@ -51,35 +45,30 @@ async function buildTheDocs(watch = false) {
       shell: true // for Windows
     });
 
+    child.stdout.setEncoding('utf8');
+    child.stderr.setEncoding('utf8');
     child.stdout.on('data', data => {
-      if (data.includes(afterSignal)) return; // don't log the signal
-      output.push(data.toString());
-    });
+      console.log(data);
 
-    child.stderr.on('data', data => {
-      output.push(data.toString());
-    });
-
-    if (watch) {
       // The process doesn't terminate in watch mode so, before resolving, we listen for a known signal in stdout that
-      // tells us when the first build completes.
-      child.stdout.on('data', data => {
-        if (data.includes(afterSignal)) {
-          resolve({ child, output });
-        }
-      });
+      // tells us when the first build completes so we can start up Browser Sync. The 11ty dev server will keep running
+      // after this.
+      if (watch && data.includes(afterSignal)) {
+        resolve();
+        return;
+      }
+    });
+    child.stderr.on('data', data => {
+      console.log(data);
 
-      child.stderr.on('data', data => {
-        if (data.includes(errorSignal)) {
-          // Resolve to prevent the dev server from closing
-          resolve(output);
-        }
-      });
-    } else {
-      child.on('close', () => {
-        resolve({ child, output });
-      });
-    }
+      // Look for a known error signal
+      if (data.includes(errorSignal)) {
+        reject({ stderr: data });
+        return;
+      }
+    });
+    child.on('error', error => reject(error));
+    child.on('close', () => resolve());
   });
 }
 
@@ -155,32 +144,40 @@ async function buildTheSource() {
 //
 // Called on SIGINT or SIGTERM to cleanup the build and child processes.
 //
-function handleCleanup() {
-  buildResults.forEach(result => result.dispose());
-
-  if (childProcess) {
-    childProcess.kill('SIGINT');
-  }
+function exit() {
+  buildResults.forEach(result => {
+    if (result.dispose) {
+      result.dispose();
+    }
+  });
 
   process.exit();
 }
 
 //
-// Helper function to draw a spinner while tasks run.
+// Helper function to cleanly log tasks
 //
 async function nextTask(label, action) {
-  spinner.text = label;
-  spinner.start();
+  function clearLine() {
+    if (process.stdout.isTTY) {
+      process.stdout.clearLine();
+      process.stdout.cursorTo(0);
+    } else {
+      process.stdout.write('\n');
+    }
+  }
 
   try {
+    process.stdout.write(`${chalk.yellow('•')} ${label}`);
     await action();
-    spinner.stop();
-    console.log(`${chalk.green('✔')} ${label}`);
+    clearLine();
+    process.stdout.write(`${chalk.green('✔')} ${label}\n`);
   } catch (err) {
-    spinner.stop();
-    console.error(`${chalk.red('✘')} ${err}`);
-    if (err.stdout) console.error(chalk.red(err.stdout));
-    if (err.stderr) console.error(chalk.red(err.stderr));
+    clearLine();
+    process.stdout.write(`${chalk.red('✘')} ${label}\n\n`);
+    if (err.stdout) process.stdout.write(`${chalk.red(err.stdout)}\n`);
+    if (err.stderr) process.stdout.write(`${chalk.red(err.stderr)}\n`);
+    exit();
   }
 }
 
@@ -205,24 +202,16 @@ await nextTask('Generating themes', () => {
   return execPromise(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
 });
 
-await nextTask('Packaging up icons', () => {
-  return execPromise(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });
-});
-
 await nextTask('Running the TypeScript compiler', () => {
   return execPromise(`tsc --project ./tsconfig.prod.json --outdir "${outdir}"`, { stdio: 'inherit' });
 });
 
-// Copy the above steps to the CDN directory directly so we don't need to twice the work for nothing.
-await nextTask(`Themes, Icons, and TS Types to "${cdndir}"`, async () => {
+// Copy the above steps to the CDN directory directly so we don't need to twice the work for nothing
+await nextTask(`Copying CDN files to "${cdndir}"`, async () => {
   await deleteAsync(cdndir);
   await copy(outdir, cdndir);
 });
 
-await nextTask('Building source files', async () => {
-  buildResults = await buildTheSource();
-});
-
 // Copy the CDN build to the docs (prod only; we use a virtual directory in dev)
 if (!serve) {
   await nextTask(`Copying the build to "${sitedir}"`, async () => {
@@ -234,16 +223,16 @@ if (!serve) {
   });
 }
 
+await nextTask('Building source files', async () => {
+  buildResults = await buildTheSource();
+});
+
 // Launch the dev server
 if (serve) {
-  let result;
-
   // Spin up Eleventy and Wait for the search index to appear before proceeding. The search index is generated during
   // eleventy.after, so it appears after the docs are fully published. This is kinda hacky, but here we are.
   // Kick off the Eleventy dev server with --watch and --incremental
-  await nextTask('Building docs', async () => {
-    result = await buildTheDocs(true);
-  });
+  await nextTask('Building docs', async () => await buildTheDocs(true));
 
   const bs = browserSync.create();
   const port = await getPort({ port: portNumbers(4000, 4999) });
@@ -267,17 +256,7 @@ if (serve) {
   // Launch browser sync
   bs.init(browserSyncConfig, () => {
     const url = `http://localhost:${port}`;
-    console.log(chalk.cyan(`\n🥾 The dev server is available at ${url}`));
-
-    // Log deferred output
-    if (result.output.length > 0) {
-      console.log('\n' + result.output.join('\n'));
-    }
-
-    // Log output that comes later on
-    result.child.stdout.on('data', data => {
-      console.log(data.toString());
-    });
+    console.log(chalk.cyan(`\n🏀 The dev server is available at ${url}\n`));
   });
 
   // Rebuild and reload when source files change
@@ -312,7 +291,7 @@ if (serve) {
 
       bs.reload();
     } catch (err) {
-      console.error(chalk.red(err));
+      console.error(chalk.red(err), '\n');
     }
   });
 
@@ -324,18 +303,9 @@ if (serve) {
 
 // Build for production
 if (!serve) {
-  let result;
-
-  await nextTask('Building the docs', async () => {
-    result = await buildTheDocs();
-  });
-
-  // Log deferred output
-  if (result.output.length > 0) {
-    console.log('\n' + result.output.join('\n'));
-  }
+  await nextTask('Building the docs', async () => await buildTheDocs());
 }
 
 // Cleanup on exit
-process.on('SIGINT', handleCleanup);
-process.on('SIGTERM', handleCleanup);
+process.on('SIGINT', exit);
+process.on('SIGTERM', exit);

scripts/make-icons.js

@@ -1,55 +0,0 @@
-//
-// This script downloads and generates icons and icon metadata.
-//
-import chalk from 'chalk';
-import commandLineArgs from 'command-line-args';
-import copy from 'recursive-copy';
-import { deleteAsync } from 'del';
-import download from 'download';
-import fm from 'front-matter';
-import fs from 'fs/promises';
-import { globby } from 'globby';
-import path from 'path';
-
-const { outdir } = commandLineArgs({ name: 'outdir', type: String });
-const iconDir = path.join(outdir, '/assets/icons');
-
-const iconPackageData = JSON.parse(await fs.readFile('./node_modules/bootstrap-icons/package.json', 'utf8'));
-
-const version = iconPackageData.version;
-const srcPath = `./.cache/icons/icons-${version}`;
-const url = `https://github.com/twbs/icons/archive/v${version}.zip`;
-
-try {
-  await fs.stat(`${srcPath}/LICENSE.md`);
-} catch {
-  // Download the source from GitHub (since not everything is published to npm)
-  await download(url, './.cache/icons', { extract: true });
-}
-
-// Copy icons
-await deleteAsync([iconDir]);
-await fs.mkdir(iconDir, { recursive: true });
-await Promise.all([
-  copy(`${srcPath}/icons`, iconDir),
-  copy(`${srcPath}/LICENSE`, path.join(iconDir, 'LICENSE')),
-  copy(`${srcPath}/bootstrap-icons.svg`, './docs/assets/images/sprite.svg', { overwrite: true })
-]);
-
-// Generate metadata
-const files = await globby(`${srcPath}/docs/content/icons/**/*.md`);
-const metadata = await Promise.all(
-  files.map(async file => {
-    const name = path.basename(file, path.extname(file));
-    const data = fm(await fs.readFile(file, 'utf8')).attributes;
-
-    return {
-      name,
-      title: data.title,
-      categories: data.categories,
-      tags: data.tags
-    };
-  })
-);
-
-await fs.writeFile(path.join(iconDir, 'icons.json'), JSON.stringify(metadata, null, 2), 'utf8');

scripts/make-react.js

@@ -25,10 +25,10 @@ for await (const component of components) {
   const componentFile = path.join(componentDir, 'index.ts');
   const importPath = component.path.replace(/\.js$/, '.component.js');
   const eventImports = (component.events || [])
-    .map(event => `import type { ${event.eventName} } from '../../../src/events/events';`)
+    .map(event => `import type { ${event.eventName} } from '../../events/events';`)
     .join('\n');
   const eventExports = (component.events || [])
-    .map(event => `export type { ${event.eventName} } from '../../../src/events/events';`)
+    .map(event => `export type { ${event.eventName} } from '../../events/events';`)
     .join('\n');
   const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
   const events = (component.events || [])

scripts/make-themes.js

@@ -47,9 +47,19 @@ files.forEach(async file => {
     { parser: 'babel-ts' }
   );
 
+  let dTs = await prettier.format(
+    `
+    declare const _default: import("lit").CSSResult;
+    export default _default;
+  `,
+    { parser: 'babel-ts' }
+  );
+
   const cssFile = path.join(themesDir, path.basename(file));
   const jsFile = path.join(themesDir, path.basename(file).replace('.css', '.styles.js'));
+  const dTsFile = path.join(themesDir, path.basename(file).replace('.css', '.styles.d.ts'));
 
   fs.writeFileSync(cssFile, css, 'utf8');
   fs.writeFileSync(jsFile, js, 'utf8');
+  fs.writeFileSync(dTsFile, dTs, 'utf8');
 });

src/components/alert/alert.component.ts

@@ -33,9 +33,19 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'wa
  * @csspart base - The component's base wrapper.
  * @csspart icon - The container that wraps the optional icon.
  * @csspart message - The container that wraps the alert's main content.
- * @csspart close-button - The close button, an `<wa-icon-button>`.
+ * @csspart close-button - The close button, a `<wa-icon-button>`.
  * @csspart close-button__base - The close button's exported `base` part.
  *
+ * @cssproperty --background - The alert's background styles.
+ * @cssproperty --border-color - The color of the alert's border.
+ * @cssproperty --border-radius - The border radius of the alert's corners.
+ * @cssproperty --border-style - The style of the alert's borders.
+ * @cssproperty --border-width - The width of the alert's borders.
+ * @cssproperty --content-color - The color of the alert's content.
+ * @cssproperty --icon-color - The color of the alert's icon.
+ * @cssproperty --icon-size - The size of the alert's icon.
+ * @cssproperty --padding - The padding within the alert. Expects a single value.
+ *
  * @animation alert.show - The animation to use when showing the alert.
  * @animation alert.hide - The animation to use when hiding the alert.
  */
@@ -212,8 +222,9 @@ export default class WaAlert extends WebAwesomeElement {
                 part="close-button"
                 exportparts="base:close-button__base"
                 class="alert__close-button"
-                name="x-lg"
+                name="xmark"
                 library="system"
+                variant="solid"
                 label=${this.localize.term('close')}
                 @click=${this.handleCloseClick}
               ></wa-icon-button>

src/components/alert/alert.styles.ts

@@ -5,17 +5,59 @@ export default css`
   ${componentStyles}
 
   :host {
+    --border-radius: var(--wa-panel-corners);
+    --border-style: var(--wa-panel-border-style);
+    --border-width: var(--wa-panel-border-width);
+    --icon-color: currentColor;
+    --icon-size: var(--wa-font-size-l);
+    --padding: var(--wa-space-m);
+
     display: contents;
 
     /* For better DX, we'll reset the margin here so the base part can inherit it */
     margin: 0;
   }
 
+  :host([variant='brand']) {
+    --background: var(--wa-color-brand-fill-subtle);
+    --border-color: var(--wa-color-brand-border-subtle);
+    --content-color: var(--wa-color-brand-text-on-fill);
+  }
+
+  :host([variant='success']) {
+    --background: var(--wa-color-success-fill-subtle);
+    --border-color: var(--wa-color-success-border-subtle);
+    --content-color: var(--wa-color-success-text-on-fill);
+  }
+
+  :host([variant='neutral']) {
+    --background: var(--wa-color-neutral-fill-subtle);
+    --border-color: var(--wa-color-neutral-border-subtle);
+    --content-color: var(--wa-color-neutral-text-on-fill);
+  }
+
+  :host([variant='warning']) {
+    --background: var(--wa-color-warning-fill-subtle);
+    --border-color: var(--wa-color-warning-border-subtle);
+    --content-color: var(--wa-color-warning-text-on-fill);
+  }
+
+  :host([variant='danger']) {
+    --background: var(--wa-color-danger-fill-subtle);
+    --border-color: var(--wa-color-danger-border-subtle);
+    --content-color: var(--wa-color-danger-text-on-fill);
+  }
+
   .alert {
     position: relative;
     display: flex;
     align-items: stretch;
-    border-radius: var(--wa-panel-corners);
+    background: var(--background);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    color: var(--content-color);
     font: inherit;
     margin: inherit;
   }
@@ -29,44 +71,15 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--wa-font-size-l);
-    padding-inline-start: var(--wa-space-l);
-  }
-
-  .alert--brand {
-    background-color: var(--wa-color-brand-fill-muted);
-    border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-brand-outline-muted);
-    color: var(--wa-color-brand-text-on-muted);
-  }
-
-  .alert--success {
-    background-color: var(--wa-color-success-fill-muted);
-    border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-success-outline-muted);
-    color: var(--wa-color-success-text-on-muted);
-  }
-
-  .alert--neutral {
-    background-color: var(--wa-color-neutral-fill-muted);
-    border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-outline-muted);
-    color: var(--wa-color-neutral-text-on-muted);
-  }
-
-  .alert--warning {
-    background-color: var(--wa-color-warning-fill-muted);
-    border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-warning-outline-muted);
-    color: var(--wa-color-warning-text-on-muted);
-  }
-
-  .alert--danger {
-    background-color: var(--wa-color-danger-fill-muted);
-    border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-danger-outline-muted);
-    color: var(--wa-color-danger-text-on-muted);
+    color: var(--icon-color);
+    font-size: var(--icon-size);
+    padding-inline-start: var(--padding);
   }
 
   .alert__message {
     flex: 1 1 auto;
     display: block;
-    padding: var(--wa-space-m);
+    padding: var(--padding);
     overflow: hidden;
   }
 
@@ -76,7 +89,7 @@ export default css`
     align-items: center;
     color: currentColor;
     font-size: var(--wa-font-size-m);
-    padding-inline-end: var(--wa-space-m);
+    padding-inline-end: var(--padding);
   }
 
   .alert__close-button:hover::part(base) {

src/components/animated-image/animated-image.component.ts

@@ -105,8 +105,8 @@ export default class WaAnimatedImage extends WebAwesomeElement {
               />
 
               <div part="control-box" class="animated-image__control-box">
-                <slot name="play-icon"><wa-icon name="play-fill" library="system"></wa-icon></slot>
-                <slot name="pause-icon"><wa-icon name="pause-fill" library="system"></wa-icon></slot>
+                <slot name="play-icon"><wa-icon name="play" library="system" variant="solid"></wa-icon></slot>
+                <slot name="pause-icon"><wa-icon name="pause" library="system" variant="solid"></wa-icon></slot>
               </div>
             `
           : ''}

src/components/animated-image/animated-image.styles.ts

@@ -32,12 +32,12 @@ export default css`
     right: calc(50% - var(--control-box-size) / 2);
     width: var(--control-box-size);
     height: var(--control-box-size);
-    font-size: var(--icon-size);
+    font-size: calc(var(--icon-size) * 0.75);
     background: none;
     border: solid 2px currentColor;
-    background-color: rgb(0 0 0 /50%);
+    background-color: rgb(0 0 0 / 50%);
     border-radius: var(--wa-corners-circle);
-    color: var(--wa-color-white);
+    color: white;
     pointer-events: none;
     transition: var(--wa-transition-fast) opacity;
   }

src/components/avatar/avatar.component.ts

@@ -73,7 +73,7 @@ export default class WaAvatar extends WebAwesomeElement {
       avatarWithoutImage = html`
         <div part="icon" class="avatar__icon" aria-hidden="true">
           <slot name="icon">
-            <wa-icon name="person-fill" library="system"></wa-icon>
+            <wa-icon name="user" library="system" variant="solid"></wa-icon>
           </slot>
         </div>
       `;

src/components/avatar/avatar.styles.ts

@@ -17,10 +17,10 @@ export default css`
     position: relative;
     width: var(--size);
     height: var(--size);
-    background-color: var(--wa-color-neutral-fill-vivid);
+    background-color: var(--wa-color-neutral-spot);
     font: inherit;
     font-size: calc(var(--size) * 0.5);
-    color: var(--wa-color-neutral-text-on-vivid);
+    color: var(--wa-color-neutral-text-on-spot);
     user-select: none;
     -webkit-user-select: none;
     vertical-align: middle;
@@ -33,7 +33,7 @@ export default css`
 
   .avatar--rounded,
   .avatar--rounded .avatar__image {
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
   }
 
   .avatar--square {

src/components/badge/badge.styles.ts

@@ -15,7 +15,7 @@ export default css`
     font-size: max(12px, 0.75em);
     font-weight: var(--wa-font-weight-medium);
     line-height: 1;
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-xs);
     border: solid 1px var(--wa-color-surface-default);
     white-space: nowrap;
     padding: 0.35em 0.6em;
@@ -26,28 +26,28 @@ export default css`
 
   /* Variant modifiers */
   .badge--brand {
-    background-color: var(--wa-color-brand-fill-vivid);
-    color: var(--wa-color-brand-text-on-vivid);
+    background-color: var(--wa-color-brand-spot);
+    color: var(--wa-color-brand-text-on-spot);
   }
 
   .badge--success {
-    background-color: var(--wa-color-success-fill-vivid);
-    color: var(--wa-color-success-text-on-vivid);
+    background-color: var(--wa-color-success-spot);
+    color: var(--wa-color-success-text-on-spot);
   }
 
   .badge--neutral {
-    background-color: var(--wa-color-neutral-fill-vivid);
-    color: var(--wa-color-neutral-text-on-vivid);
+    background-color: var(--wa-color-neutral-spot);
+    color: var(--wa-color-neutral-text-on-spot);
   }
 
   .badge--warning {
-    background-color: var(--wa-color-warning-fill-vivid);
-    color: var(--wa-color-warning-text-on-vivid);
+    background-color: var(--wa-color-warning-spot);
+    color: var(--wa-color-warning-text-on-spot);
   }
 
   .badge--danger {
-    background-color: var(--wa-color-danger-fill-vivid);
-    color: var(--wa-color-danger-text-on-vivid);
+    background-color: var(--wa-color-danger-spot);
+    color: var(--wa-color-danger-text-on-spot);
   }
 
   /* Pill modifier */
@@ -61,23 +61,23 @@ export default css`
   }
 
   .badge--pulse.badge--brand {
-    --pulse-color: var(--wa-color-brand-outline-vivid-alt);
+    --pulse-color: var(--wa-color-brand-spot);
   }
 
   .badge--pulse.badge--success {
-    --pulse-color: var(--wa-color-success-outline-vivid-alt);
+    --pulse-color: var(--wa-color-success-spot);
   }
 
   .badge--pulse.badge--neutral {
-    --pulse-color: var(--wa-color-neutral-outline-vivid-alt);
+    --pulse-color: var(--wa-color-neutral-spot);
   }
 
   .badge--pulse.badge--warning {
-    --pulse-color: var(--wa-color-warning-outline-vivid-alt);
+    --pulse-color: var(--wa-color-warning-spot);
   }
 
   .badge--pulse.badge--danger {
-    --pulse-color: var(--wa-color-danger-outline-vivid-alt);
+    --pulse-color: var(--wa-color-danger-spot);
   }
 
   @keyframes pulse {

src/components/breadcrumb-item/breadcrumb-item.styles.ts

@@ -25,7 +25,7 @@ export default css`
     color: inherit;
     background: none;
     border: none;
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
     padding: 0;
     margin: 0;
     cursor: pointer;
@@ -37,7 +37,7 @@ export default css`
   }
 
   :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
-    color: color-mix(in oklab, var(--wa-color-brand-text-on-surface), var(--wa-color-tint-hover));
+    color: color-mix(in oklab, var(--wa-color-brand-text-on-surface), var(--wa-color-mix-hover));
   }
 
   :host(:not(:last-of-type)) .breadcrumb-item__label:active {

src/components/breadcrumb/breadcrumb.component.ts

@@ -92,7 +92,11 @@ export default class WaBreadcrumb extends WebAwesomeElement {
 
       <span hidden aria-hidden="true">
         <slot name="separator">
-          <wa-icon name=${this.localize.dir() === 'rtl' ? 'chevron-left' : 'chevron-right'} library="system"></wa-icon>
+          <wa-icon
+            name=${this.localize.dir() === 'rtl' ? 'chevron-left' : 'chevron-right'}
+            library="system"
+            variant="solid"
+          ></wa-icon>
         </slot>
       </span>
     `;

src/components/button/button.component.ts

@@ -34,8 +34,23 @@ import type { WebAwesomeFormControl } from '../../internal/webawesome-element.js
  * @csspart prefix - The container that wraps the prefix.
  * @csspart label - The button's label.
  * @csspart suffix - The container that wraps the suffix.
- * @csspart caret - The button's caret icon, an `<wa-icon>` element.
+ * @csspart caret - The button's caret icon, a `<wa-icon>` element.
  * @csspart spinner - The spinner that shows when the button is in the loading state.
+ *
+ * @cssproperty --background - The button's background styles.
+ * @cssproperty --background-active - The color of the button's background when active.
+ * @cssproperty --background-hover - The color of the button's background on hover.
+ * @cssproperty --border-color - The color of the button's border.
+ * @cssproperty --border-color-active - The color of the button's border when active.
+ * @cssproperty --border-color-hover - The color of the button's border on hover.
+ * @cssproperty --border-radius - The radius of the button's corners.
+ * @cssproperty --border-style - The style of the button's border.
+ * @cssproperty --border-width - The width of the button's border. Expects a single value.
+ * @cssproperty --box-shadow - The shadow effects around the edges of the button.
+ * @cssproperty --box-shadow-color - A bespoke shadow color for the button.
+ * @cssproperty --label-color - The color of the button's label.
+ * @cssproperty --label-color-active - The color of the button's label when active.
+ * @cssproperty --label-color-hover - The color of the button's label on hover.
  */
 export default class WaButton extends WebAwesomeElement implements WebAwesomeFormControl {
   static styles: CSSResultGroup = styles;
@@ -45,18 +60,6 @@ export default class WaButton extends WebAwesomeElement implements WebAwesomeFor
   };
 
   private readonly formControlController = new FormControlController(this, {
-    form: input => {
-      // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query
-      // the form from the same root using its id
-      if (input.hasAttribute('form')) {
-        const doc = input.getRootNode() as Document | ShadowRoot;
-        const formId = input.getAttribute('form')!;
-        return doc.getElementById(formId) as HTMLFormElement;
-      }
-
-      // Fall back to the closest containing form
-      return input.closest('form');
-    },
     assumeInteractionOn: ['click']
   });
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
@@ -310,7 +313,17 @@ export default class WaButton extends WebAwesomeElement implements WebAwesomeFor
         <slot part="label" class="button__label"></slot>
         <slot name="suffix" part="suffix" class="button__suffix"></slot>
         ${
-          this.caret ? html` <wa-icon part="caret" class="button__caret" library="system" name="caret"></wa-icon> ` : ''
+          this.caret
+            ? html`
+                <wa-icon
+                  part="caret"
+                  class="button__caret"
+                  library="system"
+                  name="chevron-down"
+                  variant="solid"
+                ></wa-icon>
+              `
+            : ''
         }
         ${this.loading ? html`<wa-spinner part="spinner"></wa-spinner>` : ''}
       </${tag}>

src/components/button/button.styles.ts

@@ -5,18 +5,155 @@ export default css`
   ${componentStyles}
 
   :host {
+    --border-radius: var(--wa-form-controls-corners);
+    --border-style: var(--wa-border-style);
+    --border-width: var(--wa-form-controls-border-width);
+    --box-shadow: var(--wa-shadow-level-0);
+    --box-shadow-color: var(--wa-color-shadow);
+
     display: inline-block;
     position: relative;
     width: auto;
     cursor: pointer;
   }
 
+  /*
+   * Standard buttons
+   */
+
+  :host([variant='brand']) {
+    --background: var(--wa-color-brand-spot);
+    --label-color: var(--wa-color-brand-text-on-spot);
+  }
+
+  :host([variant='success']) {
+    --background: var(--wa-color-success-spot);
+    --label-color: var(--wa-color-success-text-on-spot);
+  }
+
+  :host([variant='warning']) {
+    --background: var(--wa-color-warning-spot);
+    --label-color: var(--wa-color-warning-text-on-spot);
+  }
+
+  :host([variant='neutral']) {
+    --background: var(--wa-color-neutral-spot);
+    --label-color: var(--wa-color-neutral-text-on-spot);
+  }
+
+  :host([variant='danger']) {
+    --background: var(--wa-color-danger-spot);
+    --label-color: var(--wa-color-danger-text-on-spot);
+  }
+
+  :host(:not([variant='text'])) {
+    --background-hover: color-mix(in oklab, var(--background), var(--wa-color-mix-hover));
+    --background-active: color-mix(in oklab, var(--background), var(--wa-color-mix-active));
+    --border-color: var(--background);
+    --border-color-hover: var(--background-hover);
+    --border-color-active: var(--background-active);
+    --label-color-hover: var(--label-color);
+    --label-color-active: var(--label-color);
+  }
+
+  /*
+   * Outline buttons
+   */
+
+  :host([variant='brand'][outline]) {
+    --background-hover: var(--wa-color-brand-fill-subtle);
+    --label-color: var(--wa-color-brand-text-on-surface);
+    --label-color-hover: var(--wa-color-brand-text-on-fill);
+  }
+
+  :host([variant='success'][outline]) {
+    --background-hover: var(--wa-color-success-fill-subtle);
+    --label-color: var(--wa-color-success-text-on-surface);
+    --label-color-hover: var(--wa-color-success-text-on-fill);
+  }
+
+  :host([variant='neutral'][outline]),
+  :host(.wa-button-group__button--radio:not([checked])) {
+    --background-hover: var(--wa-color-neutral-fill-subtle);
+    --label-color: var(--wa-color-neutral-text-on-surface);
+    --label-color-hover: var(--wa-color-neutral-text-on-fill);
+  }
+
+  :host([variant='warning'][outline]) {
+    --background-hover: var(--wa-color-warning-fill-subtle);
+    --label-color: var(--wa-color-warning-text-on-surface);
+    --label-color-hover: var(--wa-color-warning-text-on-fill);
+  }
+
+  :host([variant='danger'][outline]) {
+    --background-hover: var(--wa-color-danger-fill-subtle);
+    --label-color: var(--wa-color-danger-text-on-surface);
+    --label-color-hover: var(--wa-color-danger-text-on-fill);
+  }
+
+  :host([outline]),
+  :host(.wa-button-group__button--radio:not([checked])) {
+    --background-active: color-mix(in oklab, var(--background-hover), var(--wa-color-surface-default) 30%);
+    --border-color: var(--label-color);
+    --border-color-hover: var(--border-color);
+    --border-color-active: var(--border-color);
+    --label-color-active: var(--label-color-hover);
+  }
+
+  /*
+   * Text buttons
+   */
+
+  :host([variant='text']) {
+    --background: none;
+    --background-active: none;
+    --background-hover: none;
+    --border-color: transparent;
+    --border-color-active: transparent;
+    --border-color-hover: transparent;
+    --label-color: var(--wa-color-text-link);
+    --label-color-active: var(--wa-color-text-link);
+    --label-color-hover: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
+  }
+
+  /*
+   * Checked buttons
+   */
+
+  :host([checked]) {
+    --background: var(--wa-color-brand-spot);
+    --label-color: var(--wa-color-brand-text-on-spot);
+  }
+
+  /*
+   * Sizes
+   */
+
+  :host([size='small']) {
+    font-size: var(--wa-font-size-s);
+  }
+
+  :host([size='medium']) {
+    font-size: var(--wa-font-size-m);
+  }
+
+  :host([size='large']) {
+    font-size: var(--wa-font-size-l);
+  }
+
+  /*
+   * Internal
+   */
+
   .button {
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: max(1px, var(--border-width));
+    color: var(--label-color);
     display: inline-flex;
     align-items: stretch;
     justify-content: center;
     width: 100%;
-    border: none;
     font: inherit;
     font-weight: var(--wa-font-weight-action);
     text-decoration: none;
@@ -26,13 +163,36 @@ export default css`
     vertical-align: middle;
     padding: 0;
     transition:
-      var(--wa-transition-faster) background-color,
-      var(--wa-transition-faster) color,
+      var(--wa-transition-faster) background,
       var(--wa-transition-faster) border,
-      var(--wa-transition-faster) box-shadow;
+      var(--wa-transition-faster) box-shadow,
+      var(--wa-transition-faster) color;
     cursor: inherit;
   }
 
+  .button--standard,
+  .button--checked {
+    background: var(--background);
+    border-color: var(--border-color);
+    box-shadow: var(--box-shadow);
+  }
+
+  .button--outline:not(.button--checked) {
+    background: none;
+    border-color: var(--border-color);
+    box-shadow: var(--box-shadow);
+  }
+
+  .button--text {
+    background: none;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  /*
+   * States
+   */
+
   .button::-moz-focus-inner {
     border: 0;
   }
@@ -46,26 +206,6 @@ export default css`
     outline-offset: var(--wa-focus-ring-offset);
   }
 
-  .button--brand:focus-visible {
-    outline-color: var(--wa-color-brand-fill-vivid);
-  }
-
-  .button--success:focus-visible {
-    outline-color: var(--wa-color-success-fill-vivid);
-  }
-
-  .button--neutral:focus-visible {
-    outline-color: var(--wa-color-neutral-fill-vivid);
-  }
-
-  .button--warning:focus-visible {
-    outline-color: var(--wa-color-warning-fill-vivid);
-  }
-
-  .button--danger:focus-visible {
-    outline-color: var(--wa-color-danger-fill-vivid);
-  }
-
   .button--disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -76,6 +216,28 @@ export default css`
     pointer-events: none;
   }
 
+  .button:hover:not(.button--disabled) {
+    background: var(--background-hover, var(--background, none));
+    border-color: var(--border-color-hover, var(--border-color, transparent));
+    color: var(--label-color-hover, var(--label-color));
+  }
+
+  .button:active:not(.button--disabled) {
+    background: var(--background-active, var(--background, none));
+    border-color: var(--border-color-active, var(--border-color, transparent));
+    color: var(--label-color-active, var(--label-color));
+  }
+
+  @media (forced-colors: active) {
+    .button.button--outline.button--checked:not(.button--disabled) {
+      outline: solid 2px transparent;
+    }
+  }
+
+  /*
+   * Label
+   */
+
   .button__prefix,
   .button__suffix {
     flex: 0 0 auto;
@@ -92,238 +254,23 @@ export default css`
     vertical-align: -2px;
   }
 
-  /*
-   * Standard buttons
-   */
-
-  /* Brand */
-  .button--standard.button--brand {
-    background-color: var(--wa-color-brand-fill-vivid);
-    color: var(--wa-color-brand-text-on-vivid);
-  }
-
-  .button--standard.button--brand:hover:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
-  }
-
-  .button--standard.button--brand:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Success */
-  .button--standard.button--success {
-    background-color: var(--wa-color-success-fill-vivid);
-    color: var(--wa-color-success-text-on-vivid);
-  }
-
-  .button--standard.button--success:hover:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
-  }
-
-  .button--standard.button--success:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Neutral */
-  .button--standard.button--neutral {
-    background-color: var(--wa-color-neutral-fill-vivid);
-    color: var(--wa-color-neutral-text-on-vivid);
-  }
-
-  .button--standard.button--neutral:hover:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
-  }
-
-  .button--standard.button--neutral:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Warning */
-  .button--standard.button--warning {
-    background-color: var(--wa-color-warning-fill-vivid);
-    color: var(--wa-color-warning-text-on-vivid);
-  }
-  .button--standard.button--warning:hover:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
-  }
-
-  .button--standard.button--warning:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Danger */
-  .button--standard.button--danger {
-    background-color: var(--wa-color-danger-fill-vivid);
-    color: var(--wa-color-danger-text-on-vivid);
-  }
-
-  .button--standard.button--danger:hover:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
-  }
-
-  .button--standard.button--danger:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /*
-   * Outline buttons
-   */
-
-  .button--outline {
-    background: none;
-    border: solid max(1px, var(--wa-form-controls-border-width));
-  }
-
-  /* Brand */
-  .button--outline.button--brand {
-    border-color: var(--wa-color-brand-outline-vivid);
-    color: var(--wa-color-brand-text-on-surface);
-  }
-
-  .button--outline.button--brand:hover:not(.button--disabled),
-  .button--outline.button--brand.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
-    border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
-    color: var(--wa-color-brand-text-on-vivid);
-  }
-
-  .button--outline.button--brand:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
-    border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Success */
-  .button--outline.button--success {
-    border-color: var(--wa-color-success-outline-vivid);
-    color: var(--wa-color-success-text-on-surface);
-  }
-
-  .button--outline.button--success:hover:not(.button--disabled),
-  .button--outline.button--success.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
-    border-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
-    color: var(--wa-color-success-text-on-vivid);
-  }
-
-  .button--outline.button--success:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
-    border-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  .button--outline.button--small {
-    line-height: calc(var(--wa-form-controls-height-s) - max(1px, var(--wa-form-controls-border-width)) * 2);
-  }
-
-  .button--outline.button--medium {
-    line-height: calc(var(--wa-form-controls-height-m) - max(1px, var(--wa-form-controls-border-width)) * 2);
-  }
-
-  .button--outline.button--large {
-    line-height: calc(var(--wa-form-controls-height-l) - max(1px, var(--wa-form-controls-border-width)) * 2);
-  }
-
-  /* Neutral */
-  .button--outline.button--neutral {
-    border-color: var(--wa-color-neutral-outline-vivid);
-    color: var(--wa-color-neutral-text-on-surface);
-  }
-
-  .button--outline.button--neutral:hover:not(.button--disabled),
-  .button--outline.button--neutral.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
-    border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
-    color: var(--wa-color-neutral-text-on-vivid);
-  }
-
-  .button--outline.button--neutral:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
-    border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Warning */
-  .button--outline.button--warning {
-    border-color: var(--wa-color-warning-outline-vivid);
-    color: var(--wa-color-warning-text-on-surface);
-  }
-
-  .button--outline.button--warning:hover:not(.button--disabled),
-  .button--outline.button--warning.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
-    border-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
-    color: var(--wa-color-warning-text-on-vivid);
-  }
-
-  .button--outline.button--warning:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
-    border-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  /* Danger */
-  .button--outline.button--danger {
-    border-color: var(--wa-color-danger-outline-vivid);
-    color: var(--wa-color-danger-text-on-surface);
-  }
-
-  .button--outline.button--danger:hover:not(.button--disabled),
-  .button--outline.button--danger.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
-    border-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
-    color: var(--wa-color-danger-text-on-vivid);
-  }
-
-  .button--outline.button--danger:active:not(.button--disabled) {
-    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
-    border-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
-  }
-
-  @media (forced-colors: active) {
-    .button.button--outline.button--checked:not(.button--disabled) {
-      outline: solid 2px transparent;
-    }
-  }
-
-  /*
-   * Text buttons
-   */
-
-  .button--text {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--wa-color-text-link);
-  }
-
-  .button--text:hover:not(.button--disabled) {
-    color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-tint-hover));
-  }
-
-  .button--text:focus-visible:not(.button--disabled),
-  .button--text:active:not(.button--disabled) {
-    color: var(--wa-color-text-link);
-  }
-
   /*
    * Size modifiers
    */
 
   .button--small {
     height: var(--wa-form-controls-height-s);
-    font-size: var(--wa-font-size-s);
-    line-height: var(--wa-form-controls-height-s);
-    border-radius: var(--wa-form-controls-corners);
+    line-height: calc(var(--wa-form-controls-height-s) - var(--border-width) * 2);
   }
 
   .button--medium {
     height: var(--wa-form-controls-height-m);
-    font-size: var(--wa-font-size-m);
-    line-height: var(--wa-form-controls-height-m);
-    border-radius: var(--wa-form-controls-corners);
+    line-height: calc(var(--wa-form-controls-height-m) - var(--border-width) * 2);
   }
 
   .button--large {
     height: var(--wa-form-controls-height-l);
-    font-size: var(--wa-font-size-l);
-    line-height: var(--wa-form-controls-height-l);
-    border-radius: var(--wa-form-controls-corners);
+    line-height: calc(var(--wa-form-controls-height-l) - var(--border-width) * 2);
   }
 
   /*
@@ -351,7 +298,14 @@ export default css`
   }
 
   .button--caret .button__caret {
-    height: auto;
+    display: flex;
+    align-self: center;
+    align-items: center;
+  }
+
+  .button--caret .button__caret::part(svg) {
+    width: 0.75em;
+    height: 0.75em;
   }
 
   /*
@@ -432,11 +386,11 @@ export default css`
   }
 
   .button--has-prefix.button--large {
-    padding-inline-start: var(--wa-space-s);
+    padding-inline-start: var(--wa-space-m);
   }
 
   .button--has-prefix.button--large .button__label {
-    padding-inline-start: var(--wa-space-s);
+    padding-inline-start: var(--wa-space-m);
   }
 
   .button--has-suffix.button--small,
@@ -461,12 +415,12 @@ export default css`
 
   .button--has-suffix.button--large,
   .button--caret.button--large {
-    padding-inline-end: var(--wa-space-s);
+    padding-inline-end: var(--wa-space-m);
   }
 
   .button--has-suffix.button--large .button__label,
   .button--caret.button--large .button__label {
-    padding-inline-end: var(--wa-space-s);
+    padding-inline-end: var(--wa-space-m);
   }
 
   /*
@@ -503,7 +457,7 @@ export default css`
     top: 0;
     inset-inline-start: 0;
     bottom: 0;
-    border-left: solid 1px rgb(128 128 128 / 33%);
+    border-left: solid 1px rgb(0 0 0 / 0.2);
     mix-blend-mode: multiply;
   }
 

src/components/card/card.component.ts

@@ -22,10 +22,13 @@ import type { CSSResultGroup } from 'lit';
  * @csspart body - The container that wraps the card's main content.
  * @csspart footer - The container that wraps the card's footer.
  *
+ * @cssproperty --background - The card's background styles.
  * @cssproperty --border-color - The card's border color, including borders that occur inside the card.
- * @cssproperty --border-radius - The border radius for the card's edges.
- * @cssproperty --border-width - The width of the card's borders.
- * @cssproperty --padding - The padding to use for the card's sections.
+ * @cssproperty --border-radius - The border radius for the card's corners. Expects a single value.
+ * @cssproperty --border-style - The style of the card's borders.
+ * @cssproperty --border-width - The width of the card's borders. Expects a single value.
+ * @cssproperty --box-shadow - The shadow effects around the edges of the card.
+ * @cssproperty --padding - The padding for each section in the card. Expects a single value.
  */
 export default class WaCard extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;

src/components/card/card.styles.ts

@@ -5,11 +5,13 @@ export default css`
   ${componentStyles}
 
   :host {
-    --border-color: var(--wa-color-surface-outline);
+    --background: var(--wa-color-surface-raised);
+    --border-color: var(--wa-color-surface-border);
     --border-radius: var(--wa-panel-corners);
-    --border-style: var(--wa-border-style);
+    --border-style: var(--wa-panel-border-style);
     --border-width: var(--wa-panel-border-width);
-    --padding: var(--wa-space-l);
+    --box-shadow: var(--wa-shadow-level-1);
+    --padding: var(--wa-space-xl);
 
     display: inline-block;
   }
@@ -17,10 +19,14 @@ export default css`
   .card {
     display: flex;
     flex-direction: column;
-    background-color: var(--wa-color-surface-raised);
-    box-shadow: var(--wa-shadow-level-1);
-    border: var(--border-style) var(--border-width) var(--border-color);
+    background: var(--background);
+    border-color: var(--border-color);
     border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    box-shadow: var(--box-shadow);
+    color: var(--wa-color-text-normal);
+    font: inherit;
   }
 
   .card__image {
@@ -42,7 +48,7 @@ export default css`
 
   .card__header {
     display: block;
-    border-bottom: var(--border-style) var(--border-width) var(--border-color);
+    border-bottom: inherit;
     padding: calc(var(--padding) / 2) var(--padding);
   }
 
@@ -62,7 +68,7 @@ export default css`
 
   .card--has-footer .card__footer {
     display: block;
-    border-top: var(--border-style) var(--border-width) var(--border-color);
+    border-top: inherit;
     padding: var(--padding);
   }
 

src/components/carousel-item/carousel-item.component.ts

@@ -17,10 +17,6 @@ import type { CSSResultGroup } from 'lit';
 export default class WaCarouselItem extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;
 
-  static isCarouselItem(node: Node) {
-    return node instanceof Element && node.getAttribute('aria-roledescription') === 'slide';
-  }
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'group');

src/components/carousel-item/carousel-item.styles.ts

@@ -19,8 +19,8 @@ export default css`
   }
 
   ::slotted(img) {
-    width: 100%;
-    height: 100%;
+    width: 100% !important;
+    height: 100% !important;
     object-fit: cover;
   }
 `;

src/components/carousel/carousel.component.ts

@@ -1,3 +1,5 @@
+import '../../internal/scrollend-polyfill.js';
+
 import { AutoplayController } from './autoplay-controller.js';
 import { clamp } from '../../internal/math.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -10,10 +12,10 @@ import { range } from 'lit/directives/range.js';
 import { ScrollController } from './scroll-controller.js';
 import { watch } from '../../internal/watch.js';
 import styles from './carousel.styles.js';
-import WaCarouselItem from '../carousel-item/carousel-item.component.js';
 import WaIcon from '../icon/icon.component.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValueMap } from 'lit';
+import type WaCarouselItem from '../carousel-item/carousel-item.component.js';
 
 /**
  * @summary Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
@@ -68,7 +70,7 @@ export default class WaCarousel extends WebAwesomeElement {
 
   /**
    * Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page`
-   * greater than one.
+   * greater than one. It can't be higher than `slides-per-page`.
    */
   @property({ type: Number, attribute: 'slides-per-move' }) slidesPerMove = 1;
 
@@ -78,7 +80,6 @@ export default class WaCarousel extends WebAwesomeElement {
   /** When set, it is possible to scroll through the slides by dragging them with the mouse. */
   @property({ type: Boolean, reflect: true, attribute: 'mouse-dragging' }) mouseDragging = false;
 
-  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
   @query('.carousel__slides') scrollContainer: HTMLElement;
   @query('.carousel__pagination') paginationContainer: HTMLElement;
 
@@ -87,7 +88,6 @@ export default class WaCarousel extends WebAwesomeElement {
 
   private autoplayController = new AutoplayController(this, () => this.next());
   private scrollController = new ScrollController(this);
-  private readonly slides = this.getElementsByTagName('wa-carousel-item');
   private intersectionObserver: IntersectionObserver; // determines which slide is displayed
   // A map containing the state of all the slides
   private readonly intersectionObserverEntries = new Map<Element, IntersectionObserverEntry>();
@@ -133,19 +133,45 @@ export default class WaCarousel extends WebAwesomeElement {
   protected firstUpdated(): void {
     this.initializeSlides();
     this.mutationObserver = new MutationObserver(this.handleSlotChange);
-    this.mutationObserver.observe(this, { childList: true, subtree: false });
+    this.mutationObserver.observe(this, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  protected willUpdate(changedProperties: PropertyValueMap<WaCarousel> | Map<PropertyKey, unknown>): void {
+    // Ensure the slidesPerMove is never higher than the slidesPerPage
+    if (changedProperties.has('slidesPerMove') || changedProperties.has('slidesPerPage')) {
+      this.slidesPerMove = Math.min(this.slidesPerMove, this.slidesPerPage);
+    }
   }
 
   private getPageCount() {
-    return Math.ceil(this.getSlides().length / this.slidesPerPage);
+    const slidesCount = this.getSlides().length;
+    const { slidesPerPage, slidesPerMove, loop } = this;
+
+    const pages = loop ? slidesCount / slidesPerMove : (slidesCount - slidesPerPage) / slidesPerMove + 1;
+
+    return Math.ceil(pages);
   }
 
   private getCurrentPage() {
-    return Math.ceil(this.activeSlide / this.slidesPerPage);
+    return Math.ceil(this.activeSlide / this.slidesPerMove);
   }
 
+  private canScrollNext(): boolean {
+    return this.loop || this.getCurrentPage() < this.getPageCount() - 1;
+  }
+
+  private canScrollPrev(): boolean {
+    return this.loop || this.getCurrentPage() > 0;
+  }
+
+  /** @internal Gets all carousel items. */
   private getSlides({ excludeClones = true }: { excludeClones?: boolean } = {}) {
-    return [...this.slides].filter(slide => !excludeClones || !slide.hasAttribute('data-clone'));
+    return [...this.children].filter(
+      (el: HTMLElement) => this.isCarouselItem(el) && (!excludeClones || !el.hasAttribute('data-clone'))
+    ) as WaCarouselItem[];
   }
 
   private handleKeyDown(event: KeyboardEvent) {
@@ -201,20 +227,22 @@ export default class WaCarousel extends WebAwesomeElement {
 
       // Scrolls to the original slide without animating, so the user won't notice that the position has changed
       this.goToSlide(clonePosition, 'auto');
-
-      return;
+    } else if (firstIntersecting) {
+      // Update the current index based on the first visible slide
+      const slideIndex = slides.indexOf(firstIntersecting.target as WaCarouselItem);
+      // Set the index to the first "snappable" slide
+      this.activeSlide = Math.ceil(slideIndex / this.slidesPerMove) * this.slidesPerMove;
     }
+  }
 
-    // Activate the first intersecting slide
-    if (firstIntersecting) {
-      this.activeSlide = slides.indexOf(firstIntersecting.target as WaCarouselItem);
-    }
+  private isCarouselItem(node: Node): node is WaCarouselItem {
+    return node instanceof Element && node.tagName.toLowerCase() === 'wa-carousel-item';
   }
 
   private handleSlotChange = (mutations: MutationRecord[]) => {
     const needsInitialization = mutations.some(mutation =>
       [...mutation.addedNodes, ...mutation.removedNodes].some(
-        node => WaCarouselItem.isCarouselItem(node) && !(node as HTMLElement).hasAttribute('data-clone')
+        (el: HTMLElement) => this.isCarouselItem(el) && !el.hasAttribute('data-clone')
       )
     );
 
@@ -222,13 +250,13 @@ export default class WaCarousel extends WebAwesomeElement {
     if (needsInitialization) {
       this.initializeSlides();
     }
+
     this.requestUpdate();
   };
 
   @watch('loop', { waitUntilFirstUpdate: true })
   @watch('slidesPerPage', { waitUntilFirstUpdate: true })
   initializeSlides() {
-    const slides = this.getSlides();
     const intersectionObserver = this.intersectionObserver;
 
     this.intersectionObserverEntries.clear();
@@ -246,23 +274,11 @@ export default class WaCarousel extends WebAwesomeElement {
       }
     });
 
+    this.updateSlidesSnap();
+
     if (this.loop) {
       // Creates clones to be placed before and after the original elements to simulate infinite scrolling
-      const slidesPerPage = this.slidesPerPage;
-      const lastSlides = slides.slice(-slidesPerPage);
-      const firstSlides = slides.slice(0, slidesPerPage);
-
-      lastSlides.reverse().forEach((slide, i) => {
-        const clone = slide.cloneNode(true) as HTMLElement;
-        clone.setAttribute('data-clone', String(slides.length - i - 1));
-        this.prepend(clone);
-      });
-
-      firstSlides.forEach((slide, i) => {
-        const clone = slide.cloneNode(true) as HTMLElement;
-        clone.setAttribute('data-clone', String(i));
-        this.append(clone);
-      });
+      this.createClones();
     }
 
     this.getSlides({ excludeClones: false }).forEach(slide => {
@@ -273,6 +289,26 @@ export default class WaCarousel extends WebAwesomeElement {
     this.goToSlide(this.activeSlide, 'auto');
   }
 
+  private createClones() {
+    const slides = this.getSlides();
+
+    const slidesPerPage = this.slidesPerPage;
+    const lastSlides = slides.slice(-slidesPerPage);
+    const firstSlides = slides.slice(0, slidesPerPage);
+
+    lastSlides.reverse().forEach((slide, i) => {
+      const clone = slide.cloneNode(true) as HTMLElement;
+      clone.setAttribute('data-clone', String(slides.length - i - 1));
+      this.prepend(clone);
+    });
+
+    firstSlides.forEach((slide, i) => {
+      const clone = slide.cloneNode(true) as HTMLElement;
+      clone.setAttribute('data-clone', String(i));
+      this.append(clone);
+    });
+  }
+
   @watch('activeSlide')
   handelSlideChange() {
     const slides = this.getSlides();
@@ -292,12 +328,12 @@ export default class WaCarousel extends WebAwesomeElement {
   }
 
   @watch('slidesPerMove')
-  handleSlidesPerMoveChange() {
-    const slides = this.getSlides({ excludeClones: false });
+  updateSlidesSnap() {
+    const slides = this.getSlides();
 
     const slidesPerMove = this.slidesPerMove;
     slides.forEach((slide, i) => {
-      const shouldSnap = Math.abs(i - slidesPerMove) % slidesPerMove === 0;
+      const shouldSnap = (i + slidesPerMove) % slidesPerMove === 0;
       if (shouldSnap) {
         slide.style.removeProperty('scroll-snap-align');
       } else {
@@ -325,15 +361,7 @@ export default class WaCarousel extends WebAwesomeElement {
    * @param behavior - The behavior used for scrolling.
    */
   previous(behavior: ScrollBehavior = 'smooth') {
-    let previousIndex = this.activeSlide || this.activeSlide - this.slidesPerMove;
-    let canSnap = false;
-
-    while (!canSnap && previousIndex > 0) {
-      previousIndex -= 1;
-      canSnap = Math.abs(previousIndex - this.slidesPerMove) % this.slidesPerMove === 0;
-    }
-
-    this.goToSlide(previousIndex, behavior);
+    this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);
   }
 
   /**
@@ -357,8 +385,13 @@ export default class WaCarousel extends WebAwesomeElement {
     const slides = this.getSlides();
     const slidesWithClones = this.getSlides({ excludeClones: false });
 
+    // No need to do anything in case there are no items in the carousel
+    if (!slides.length) {
+      return;
+    }
+
     // Sets the next index without taking into account clones, if any.
-    const newActiveSlide = (index + slides.length) % slides.length;
+    const newActiveSlide = loop ? (index + slides.length) % slides.length : clamp(index, 0, slides.length - 1);
     this.activeSlide = newActiveSlide;
 
     // Get the index of the next slide. For looping carousel it adds `slidesPerPage`
@@ -377,11 +410,11 @@ export default class WaCarousel extends WebAwesomeElement {
   }
 
   render() {
-    const { scrollController, slidesPerPage } = this;
+    const { scrollController, slidesPerMove } = this;
     const pagesCount = this.getPageCount();
     const currentPage = this.getCurrentPage();
-    const prevEnabled = this.loop || currentPage > 0;
-    const nextEnabled = this.loop || currentPage < pagesCount - 1;
+    const prevEnabled = this.canScrollPrev();
+    const nextEnabled = this.canScrollNext();
     const isLtr = this.localize.dir() === 'ltr';
 
     return html`
@@ -420,7 +453,11 @@ export default class WaCarousel extends WebAwesomeElement {
                   @click=${prevEnabled ? () => this.previous() : null}
                 >
                   <slot name="previous-icon">
-                    <wa-icon library="system" name="${isLtr ? 'chevron-left' : 'chevron-right'}"></wa-icon>
+                    <wa-icon
+                      library="system"
+                      variant="solid"
+                      name="${isLtr ? 'chevron-left' : 'chevron-right'}"
+                    ></wa-icon>
                   </slot>
                 </button>
 
@@ -437,7 +474,11 @@ export default class WaCarousel extends WebAwesomeElement {
                   @click=${nextEnabled ? () => this.next() : null}
                 >
                   <slot name="next-icon">
-                    <wa-icon library="system" name="${isLtr ? 'chevron-right' : 'chevron-left'}"></wa-icon>
+                    <wa-icon
+                      library="system"
+                      variant="solid"
+                      name="${isLtr ? 'chevron-right' : 'chevron-left'}"
+                    ></wa-icon>
                   </slot>
                 </button>
               </div>
@@ -459,7 +500,7 @@ export default class WaCarousel extends WebAwesomeElement {
                       aria-selected="${isActive ? 'true' : 'false'}"
                       aria-label="${this.localize.term('goToSlide', index + 1, pagesCount)}"
                       tabindex=${isActive ? '0' : '-1'}
-                      @click=${() => this.goToSlide(index * slidesPerPage)}
+                      @click=${() => this.goToSlide(index * slidesPerMove)}
                       @keydown=${this.handleKeyDown}
                     ></button>
                   `;

src/components/carousel/carousel.styles.ts

@@ -46,7 +46,7 @@ export default css`
     overscroll-behavior-x: contain;
     scrollbar-width: none;
     aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
 
     --slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
   }
@@ -104,7 +104,7 @@ export default css`
     align-items: center;
     background: none;
     border: none;
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
     font-size: inherit;
     color: var(--wa-color-text-quiet);
     padding: var(--wa-space-xs);
@@ -140,13 +140,13 @@ export default css`
     border-radius: var(--wa-corners-circle);
     width: var(--wa-space-s);
     height: var(--wa-space-s);
-    background-color: var(--wa-color-neutral-fill-muted-alt);
+    background-color: var(--wa-color-neutral-fill-highlight);
     padding: 0;
     margin: 0;
   }
 
   .carousel__pagination-item--active {
-    background-color: var(--wa-color-brand-fill-vivid);
+    background-color: var(--wa-color-brand-spot);
     transform: scale(1.2);
   }
 

src/components/carousel/carousel.test.ts

@@ -1,6 +1,8 @@
 import '../../../dist/webawesome.js';
 import { clickOnElement } from '../../internal/test.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { map } from 'lit/directives/map.js';
+import { range } from 'lit/directives/range.js';
 import sinon from 'sinon';
 import type WaCarousel from './carousel.js';
 
@@ -223,6 +225,36 @@ describe('<wa-carousel>', () => {
       // Assert
       expect(el.scrollContainer.style.getPropertyValue('--slides-per-page').trim()).to.be.equal('2');
     });
+
+    [
+      [7, 2, 1, false, 6],
+      [5, 3, 3, false, 2],
+      [10, 2, 2, false, 5],
+      [7, 2, 1, true, 7],
+      [5, 3, 3, true, 2],
+      [10, 2, 2, true, 5]
+    ].forEach(([slides, slidesPerPage, slidesPerMove, loop, expected]: [number, number, number, boolean, number]) => {
+      it(`should display ${expected} pages for ${slides} slides grouped by ${slidesPerPage} and scrolled by ${slidesPerMove}${
+        loop ? ' (loop)' : ''
+      }`, async () => {
+        // Arrange
+        const el = await fixture<WaCarousel>(html`
+          <wa-carousel
+            pagination
+            navigation
+            slides-per-page="${slidesPerPage}"
+            slides-per-move="${slidesPerMove}"
+            ?loop=${loop}
+          >
+            ${map(range(slides), i => html`<wa-carousel-item>${i}</wa-carousel-item>`)}
+          </wa-carousel>
+        `);
+
+        // Assert
+        const paginationItems = el.shadowRoot!.querySelectorAll('.carousel__pagination-item');
+        expect(paginationItems.length).to.equal(expected);
+      });
+    });
   });
 
   describe('when `slides-per-move` attribute is provided', () => {
@@ -230,7 +262,7 @@ describe('<wa-carousel>', () => {
       // Arrange
       const expectedSnapGranularity = 2;
       const el = await fixture<WaCarousel>(html`
-        <wa-carousel slides-per-move="${expectedSnapGranularity}">
+        <wa-carousel slides-per-page="${expectedSnapGranularity}" slides-per-move="${expectedSnapGranularity}">
           <wa-carousel-item>Node 1</wa-carousel-item>
           <wa-carousel-item>Node 2</wa-carousel-item>
           <wa-carousel-item>Node 3</wa-carousel-item>
@@ -252,6 +284,89 @@ describe('<wa-carousel>', () => {
         }
       }
     });
+
+    it('should be possible to move by the given number of slides at a time', async () => {
+      // Arrange
+      const el = await fixture<WaCarousel>(html`
+        <wa-carousel navigation slides-per-move="2" slides-per-page="2">
+          <wa-carousel-item>Node 1</wa-carousel-item>
+          <wa-carousel-item>Node 2</wa-carousel-item>
+          <wa-carousel-item class="expected">Node 3</wa-carousel-item>
+          <wa-carousel-item class="expected">Node 4</wa-carousel-item>
+          <wa-carousel-item>Node 5</wa-carousel-item>
+          <wa-carousel-item>Node 6</wa-carousel-item>
+        </wa-carousel>
+      `);
+      const expectedSlides = el.querySelectorAll('.expected')!;
+      const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button--next')!;
+
+      // Act
+      await clickOnElement(nextButton);
+
+      await oneEvent(el.scrollContainer, 'scrollend');
+      await el.updateComplete;
+
+      // Assert
+      for (const expectedSlide of expectedSlides) {
+        expect(expectedSlide).to.have.class('--in-view');
+        expect(expectedSlide).to.be.visible;
+      }
+    });
+
+    it('should be possible to move by a number that is less than the displayed number', async () => {
+      // Arrange
+      const el = await fixture<WaCarousel>(html`
+        <wa-carousel navigation slides-per-move="1" slides-per-page="2">
+          <wa-carousel-item>Node 1</wa-carousel-item>
+          <wa-carousel-item>Node 2</wa-carousel-item>
+          <wa-carousel-item>Node 3</wa-carousel-item>
+          <wa-carousel-item>Node 4</wa-carousel-item>
+          <wa-carousel-item class="expected">Node 5</wa-carousel-item>
+          <wa-carousel-item class="expected">Node 6</wa-carousel-item>
+        </wa-carousel>
+      `);
+      const expectedSlides = el.querySelectorAll('.expected')!;
+      const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button--next')!;
+
+      // Act
+      await clickOnElement(nextButton);
+      await clickOnElement(nextButton);
+      await clickOnElement(nextButton);
+      await clickOnElement(nextButton);
+      await clickOnElement(nextButton);
+      await clickOnElement(nextButton);
+
+      await oneEvent(el.scrollContainer, 'scrollend');
+      await el.updateComplete;
+
+      // Assert
+      for (const expectedSlide of expectedSlides) {
+        expect(expectedSlide).to.have.class('--in-view');
+        expect(expectedSlide).to.be.visible;
+      }
+    });
+
+    it('should not be possible to move by a number that is greater than the displayed number', async () => {
+      // Arrange
+      const expectedSlidesPerMove = 2;
+      const el = await fixture<WaCarousel>(html`
+        <wa-carousel slides-per-page="${expectedSlidesPerMove}">
+          <wa-carousel-item>Node 1</wa-carousel-item>
+          <wa-carousel-item>Node 2</wa-carousel-item>
+          <wa-carousel-item>Node 3</wa-carousel-item>
+          <wa-carousel-item>Node 4</wa-carousel-item>
+          <wa-carousel-item>Node 5</wa-carousel-item>
+          <wa-carousel-item>Node 6</wa-carousel-item>
+        </wa-carousel>
+      `);
+
+      // Act
+      el.slidesPerMove = 3;
+      await el.updateComplete;
+
+      // Assert
+      expect(el.slidesPerMove).to.be.equal(expectedSlidesPerMove);
+    });
   });
 
   describe('when `orientation` attribute is provided', () => {
@@ -465,7 +580,7 @@ describe('<wa-carousel>', () => {
       it('should scroll the carousel to the next slide', async () => {
         // Arrange
         const el = await fixture<WaCarousel>(html`
-          <wa-carousel slides-per-move="2">
+          <wa-carousel slides-per-page="2" slides-per-move="2">
             <wa-carousel-item>Node 1</wa-carousel-item>
             <wa-carousel-item>Node 2</wa-carousel-item>
             <wa-carousel-item>Node 3</wa-carousel-item>
@@ -485,7 +600,7 @@ describe('<wa-carousel>', () => {
       it('should scroll the carousel to the previous slide', async () => {
         // Arrange
         const el = await fixture<WaCarousel>(html`
-          <wa-carousel slides-per-move="2">
+          <wa-carousel slides-per-page="2" slides-per-move="2">
             <wa-carousel-item>Node 1</wa-carousel-item>
             <wa-carousel-item>Node 2</wa-carousel-item>
             <wa-carousel-item>Node 3</wa-carousel-item>

src/components/carousel/scroll-controller.ts

@@ -1,4 +1,3 @@
-import { debounce } from '../../internal/debounce.js';
 import { prefersReducedMotion } from '../../internal/animate.js';
 import { waitForEvent } from '../../internal/event.js';
 import type { ReactiveController, ReactiveElement } from 'lit';
@@ -12,7 +11,6 @@ interface ScrollHost extends ReactiveElement {
  */
 export class ScrollController<T extends ScrollHost> implements ReactiveController {
   private host: T;
-  private pointers = new Set();
 
   dragging = false;
   scrolling = false;
@@ -30,11 +28,10 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
     const scrollContainer = host.scrollContainer;
 
     scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
+    scrollContainer.addEventListener('scrollend', this.handleScrollEnd, true);
     scrollContainer.addEventListener('pointerdown', this.handlePointerDown);
     scrollContainer.addEventListener('pointerup', this.handlePointerUp);
     scrollContainer.addEventListener('pointercancel', this.handlePointerUp);
-    scrollContainer.addEventListener('touchstart', this.handleTouchStart, { passive: true });
-    scrollContainer.addEventListener('touchend', this.handleTouchEnd);
   }
 
   hostDisconnected(): void {
@@ -42,11 +39,10 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
     const scrollContainer = host.scrollContainer;
 
     scrollContainer.removeEventListener('scroll', this.handleScroll);
+    scrollContainer.removeEventListener('scrollend', this.handleScrollEnd, true);
     scrollContainer.removeEventListener('pointerdown', this.handlePointerDown);
     scrollContainer.removeEventListener('pointerup', this.handlePointerUp);
     scrollContainer.removeEventListener('pointercancel', this.handlePointerUp);
-    scrollContainer.removeEventListener('touchstart', this.handleTouchStart);
-    scrollContainer.removeEventListener('touchend', this.handleTouchEnd);
   }
 
   handleScroll = () => {
@@ -54,35 +50,22 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
       this.scrolling = true;
       this.host.requestUpdate();
     }
-    this.handleScrollEnd();
   };
 
-  @debounce(100)
-  handleScrollEnd() {
-    if (!this.pointers.size) {
-      // If no pointer is active in the scroll area then the scroll has ended
+  handleScrollEnd = () => {
+    if (this.scrolling && !this.dragging) {
       this.scrolling = false;
-      this.host.scrollContainer.dispatchEvent(
-        new CustomEvent('scrollend', {
-          bubbles: false,
-          cancelable: false
-        })
-      );
       this.host.requestUpdate();
-    } else {
-      // otherwise let's wait a bit more
-      this.handleScrollEnd();
     }
-  }
+  };
 
   handlePointerDown = (event: PointerEvent) => {
+    // Do not handle drag for touch interactions as scroll is natively supported
     if (event.pointerType === 'touch') {
       return;
     }
 
-    this.pointers.add(event.pointerId);
-
-    const canDrag = this.mouseDragging && !this.dragging && event.button === 0;
+    const canDrag = this.mouseDragging && event.button === 0;
     if (canDrag) {
       event.preventDefault();
 
@@ -105,24 +88,9 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
   };
 
   handlePointerUp = (event: PointerEvent) => {
-    this.pointers.delete(event.pointerId);
     this.host.scrollContainer.releasePointerCapture(event.pointerId);
 
-    if (this.pointers.size === 0) {
-      this.handleDragEnd();
-    }
-  };
-
-  handleTouchEnd = (event: TouchEvent) => {
-    for (const touch of event.changedTouches) {
-      this.pointers.delete(touch.identifier);
-    }
-  };
-
-  handleTouchStart = (event: TouchEvent) => {
-    for (const touch of event.touches) {
-      this.pointers.add(touch.identifier);
-    }
+    this.handleDragEnd();
   };
 
   handleDragStart() {
@@ -140,12 +108,11 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
     });
   }
 
-  async handleDragEnd() {
+  handleDragEnd() {
     const host = this.host;
     const scrollContainer = host.scrollContainer;
 
     scrollContainer.removeEventListener('pointermove', this.handlePointerMove);
-    this.dragging = false;
 
     const startLeft = scrollContainer.scrollLeft;
     const startTop = scrollContainer.scrollTop;
@@ -158,12 +125,16 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
     scrollContainer.scrollTo({ left: startLeft, top: startTop, behavior: 'auto' });
     scrollContainer.scrollTo({ left: finalLeft, top: finalTop, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
 
-    if (this.scrolling) {
-      await waitForEvent(scrollContainer, 'scrollend');
-    }
+    // Wait for scroll to be applied
+    requestAnimationFrame(async () => {
+      if (startLeft !== finalLeft || startTop !== finalTop) {
+        await waitForEvent(scrollContainer, 'scrollend');
+      }
 
-    scrollContainer.style.removeProperty('scroll-snap-type');
+      scrollContainer.style.removeProperty('scroll-snap-type');
 
-    host.requestUpdate();
+      this.dragging = false;
+      host.requestUpdate();
+    });
   }
 }

src/components/checkbox/checkbox.component.ts

@@ -32,8 +32,8 @@ import type { WebAwesomeFormControl } from '../../internal/webawesome-element.js
  * @csspart control - The square container that wraps the checkbox's checked state.
  * @csspart control--checked - Matches the control part when the checkbox is checked.
  * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
- * @csspart checked-icon - The checked icon, an `<wa-icon>` element.
- * @csspart indeterminate-icon - The indeterminate icon, an `<wa-icon>` element.
+ * @csspart checked-icon - The checked icon, a `<wa-icon>` element.
+ * @csspart indeterminate-icon - The indeterminate icon, a `<wa-icon>` element.
  * @csspart label - The container that wraps the checkbox's label.
  */
 export default class WaCheckbox extends WebAwesomeElement implements WebAwesomeFormControl {
@@ -221,7 +221,13 @@ export default class WaCheckbox extends WebAwesomeElement implements WebAwesomeF
         >
           ${this.checked
             ? html`
-                <wa-icon part="checked-icon" class="checkbox__checked-icon" library="system" name="check"></wa-icon>
+                <wa-icon
+                  part="checked-icon"
+                  class="checkbox__checked-icon"
+                  library="system"
+                  name="check"
+                  variant="solid"
+                ></wa-icon>
               `
             : ''}
           ${!this.checked && this.indeterminate
@@ -230,7 +236,8 @@ export default class WaCheckbox extends WebAwesomeElement implements WebAwesomeF
                   part="indeterminate-icon"
                   class="checkbox__indeterminate-icon"
                   library="system"
-                  name="indeterminate"
+                  name="minus"
+                  variant="solid"
                 ></wa-icon>
               `
             : ''}

src/components/checkbox/checkbox.styles.ts

@@ -13,7 +13,7 @@ export default css`
     display: inline-flex;
     align-items: flex-start;
     font: inherit;
-    color: var(--wa-form-controls-text-color);
+    color: var(--wa-form-controls-value-color);
     vertical-align: middle;
     cursor: pointer;
   }
@@ -41,10 +41,10 @@ export default css`
     justify-content: center;
     width: var(--toggle-size);
     height: var(--toggle-size);
-    border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-border-color-resting);
-    border-radius: min(0.375rem, var(--wa-corners-half)); /* min so it doesn't look like a circle/checkbox */
+    border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-resting-color);
+    border-radius: min(0.375rem, var(--wa-corners-xs)); /* min so it doesn't look like a circle/checkbox */
     background-color: var(--wa-form-controls-background);
-    color: var(--wa-form-controls-text-color);
+    color: var(--wa-form-controls-value-color);
     transition:
       var(--wa-transition-fast) border-color,
       var(--wa-transition-fast) background-color,
@@ -65,11 +65,11 @@ export default css`
     display: inline-flex;
     width: var(--toggle-size);
     height: var(--toggle-size);
+    scale: 0.75;
   }
 
   /* Focus */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
-    border-color: var(--wa-form-controls-border-color-activated);
     outline: var(--wa-focus-ring);
     outline-offset: var(--wa-focus-ring-offset);
   }
@@ -77,9 +77,9 @@ export default css`
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
-    color: var(--wa-color-brand-text-on-vivid);
-    border-color: var(--wa-color-brand-fill-vivid);
-    background-color: var(--wa-color-brand-fill-vivid);
+    color: var(--wa-color-brand-text-on-spot);
+    border-color: var(--wa-form-controls-activated-color);
+    background-color: var(--wa-form-controls-activated-color);
   }
 
   /* Checked/indeterminate + focus */

src/components/color-picker/color-picker.component.ts

@@ -243,7 +243,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
     const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__alpha')!;
     const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
     const { width } = container.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;
 
     handle.focus();
     event.preventDefault();
@@ -253,12 +254,17 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
         this.alpha = clamp((x / width) * 100, 0, 100);
         this.syncValues();
 
-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('wa-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
           this.emit('wa-input');
         }
       },
+      onStop: () => {
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('wa-change');
+        }
+      },
       initialEvent: event
     });
   }
@@ -267,7 +273,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
     const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__hue')!;
     const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
     const { width } = container.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;
 
     handle.focus();
     event.preventDefault();
@@ -277,12 +284,17 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
         this.hue = clamp((x / width) * 360, 0, 360);
         this.syncValues();
 
-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('wa-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
           this.emit('wa-input');
         }
       },
+      onStop: () => {
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('wa-change');
+        }
+      },
       initialEvent: event
     });
   }
@@ -291,7 +303,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
     const grid = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__grid')!;
     const handle = grid.querySelector<HTMLElement>('.color-picker__grid-handle')!;
     const { width, height } = grid.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;
 
     handle.focus();
     event.preventDefault();
@@ -304,13 +317,18 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
         this.brightness = clamp(100 - (y / height) * 100, 0, 100);
         this.syncValues();
 
-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('wa-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
           this.emit('wa-input');
         }
       },
-      onStop: () => (this.isDraggingGridHandle = false),
+      onStop: () => {
+        this.isDraggingGridHandle = false;
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('wa-change');
+        }
+      },
       initialEvent: event
     });
   }
@@ -978,7 +996,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
                   >
                     <wa-icon
                       library="system"
-                      name="eyedropper"
+                      name="eye-dropper"
+                      variant="solid"
                       label=${this.localize.term('selectAColorFromTheScreen')}
                     ></wa-icon>
                   </wa-button>

src/components/color-picker/color-picker.styles.ts

@@ -20,13 +20,13 @@ export default css`
     font: inherit;
     color: var(--color);
     background-color: var(--wa-color-surface-raised);
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
     user-select: none;
     -webkit-user-select: none;
   }
 
   .color-picker--inline {
-    border: var(--wa-form-controls-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+    border: var(--wa-form-controls-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
   }
 
   .color-picker--inline:focus-visible {
@@ -39,8 +39,8 @@ export default css`
     height: var(--grid-height);
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
       linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
-    border-top-left-radius: var(--wa-corners-1x);
-    border-top-right-radius: var(--wa-corners-1x);
+    border-top-left-radius: var(--wa-corners-s);
+    border-top-right-radius: var(--wa-corners-s);
     cursor: crosshair;
     forced-color-adjust: none;
   }
@@ -175,7 +175,7 @@ export default css`
 
   @keyframes pulse {
     0% {
-      box-shadow: 0 0 0 0 var(--wa-color-brand-fill-vivid-alt);
+      box-shadow: 0 0 0 0 var(--wa-color-brand-spot);
     }
     70% {
       box-shadow: 0 0 0 0.5rem transparent;
@@ -210,7 +210,7 @@ export default css`
     grid-template-columns: repeat(8, 1fr);
     grid-gap: 0.5rem;
     justify-items: center;
-    border-top: solid 1px var(--wa-color-surface-outline);
+    border-top: solid 1px var(--wa-color-surface-border);
     padding: var(--wa-space-s);
     forced-color-adjust: none;
   }
@@ -219,7 +219,7 @@ export default css`
     position: relative;
     width: var(--swatch-size);
     height: var(--swatch-size);
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
   }
 
   .color-picker__swatch .color-picker__swatch-color {
@@ -239,10 +239,10 @@ export default css`
   }
 
   .color-picker__transparent-bg {
-    background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-muted-alt) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-muted-alt) 75%),
-      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-muted-alt) 75%),
-      linear-gradient(45deg, var(--wa-color-neutral-fill-muted-alt) 25%, transparent 25%);
+    background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-highlight) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-highlight) 75%),
+      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-highlight) 75%),
+      linear-gradient(45deg, var(--wa-color-neutral-fill-highlight) 25%, transparent 25%);
     background-size: 10px 10px;
     background-position:
       0 0,
@@ -273,8 +273,8 @@ export default css`
   .color-dropdown::part(panel) {
     max-height: none;
     background-color: var(--wa-color-surface-raised);
-    border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
-    border-radius: var(--wa-corners-1x);
+    border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+    border-radius: var(--wa-corners-s);
     overflow: visible;
   }
 
@@ -315,8 +315,8 @@ export default css`
     border-radius: inherit;
     background-color: currentColor;
     box-shadow:
-      inset 0 0 0 2px var(--wa-form-controls-border-color-resting),
-      inset 0 0 0 4px var(--wa-color-white);
+      inset 0 0 0 2px var(--wa-form-controls-resting-color),
+      inset 0 0 0 4px white;
   }
 
   .color-dropdown__trigger--empty:before {

src/components/color-picker/color-picker.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { clickOnElement } from '../../internal/test.js';
+import { clickOnElement, dragElement } from '../../internal/test.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { serialize } from '../../utilities/form.js';
@@ -31,11 +31,21 @@ describe('<wa-color-picker>', () => {
 
       await clickOnElement(trigger); // open the dropdown
       await aTimeout(200); // wait for the dropdown to open
-      await clickOnElement(grid); // click on the grid
       await el.updateComplete;
 
+      // Simulate a drag event. "sl-change" should not fire until we stop dragging.
+      await dragElement(grid, 2, 0, {
+        afterMouseDown: () => {
+          expect(changeHandler).to.have.not.been.called;
+          expect(inputHandler).to.have.been.calledOnce;
+        },
+        afterMouseMove: () => {
+          expect(inputHandler).to.have.been.calledTwice;
+        }
+      });
+
       expect(changeHandler).to.have.been.calledOnce;
-      expect(inputHandler).to.have.been.calledOnce;
+      expect(inputHandler).to.have.been.calledTwice;
     });
 
     it('should emit wa-change and wa-input when the hue slider is moved', async () => {
@@ -50,10 +60,23 @@ describe('<wa-color-picker>', () => {
 
       await clickOnElement(trigger); // open the dropdown
       await aTimeout(200); // wait for the dropdown to open
-      await clickOnElement(slider); // click on the hue slider
+
+      // Simulate a drag event. "wa-change" should not fire until we stop dragging.
+      await dragElement(slider, 20, 0, {
+        afterMouseDown: () => {
+          expect(changeHandler).to.have.not.been.called;
+          expect(inputHandler).to.have.been.calledOnce;
+        },
+        afterMouseMove: () => {
+          // It's not twice because you can't change the hue of white!
+          expect(inputHandler).to.have.been.calledOnce;
+        }
+      });
+
       await el.updateComplete;
 
       expect(changeHandler).to.have.been.calledOnce;
+      // It's not twice because you can't change the hue of white!
       expect(inputHandler).to.have.been.calledOnce;
     });
 
@@ -69,11 +92,22 @@ describe('<wa-color-picker>', () => {
 
       await clickOnElement(trigger); // open the dropdown
       await aTimeout(200); // wait for the dropdown to open
-      await clickOnElement(slider); // click on the opacity slider
+
+      // Simulate a drag event. "wa-change" should not fire until we stop dragging.
+      await dragElement(slider, 2, 0, {
+        afterMouseDown: () => {
+          expect(changeHandler).to.have.not.been.called;
+          expect(inputHandler).to.have.been.calledOnce;
+        },
+        afterMouseMove: () => {
+          expect(inputHandler).to.have.been.calledTwice;
+        }
+      });
+
       await el.updateComplete;
 
       expect(changeHandler).to.have.been.calledOnce;
-      expect(inputHandler).to.have.been.calledOnce;
+      expect(inputHandler).to.have.been.calledTwice;
     });
 
     it('should emit wa-change and wa-input when toggling the format', async () => {

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

@@ -220,13 +220,13 @@ export default class WaCopyButton extends WebAwesomeElement {
           @click=${this.handleCopy}
         >
           <slot part="copy-icon" name="copy-icon">
-            <wa-icon library="system" name="copy"></wa-icon>
+            <wa-icon library="system" name="copy" variant="regular"></wa-icon>
           </slot>
-          <slot part="success-icon" name="success-icon" hidden>
+          <slot part="success-icon" name="success-icon" variant="solid" hidden>
             <wa-icon library="system" name="check"></wa-icon>
           </slot>
-          <slot part="error-icon" name="error-icon" hidden>
-            <wa-icon library="system" name="x-lg"></wa-icon>
+          <slot part="error-icon" name="error-icon" variant="solid" hidden>
+            <wa-icon library="system" name="xmark"></wa-icon>
           </slot>
         </button>
       </wa-tooltip>

src/components/copy-button/copy-button.styles.ts

@@ -5,8 +5,8 @@ export default css`
   ${componentStyles}
 
   :host {
-    --error-color: var(--wa-color-danger-fill-vivid-alt);
-    --success-color: var(--wa-color-success-fill-vivid-alt);
+    --error-color: var(--wa-color-danger-spot);
+    --success-color: var(--wa-color-success-spot);
 
     display: inline-block;
   }
@@ -17,7 +17,7 @@ export default css`
     align-items: center;
     background: none;
     border: none;
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
     font-size: inherit;
     color: inherit;
     padding: var(--wa-space-xs);

src/components/details/details.component.ts

@@ -214,10 +214,10 @@ export default class WaDetails extends WebAwesomeElement {
 
           <span part="summary-icon" class="details__summary-icon">
             <slot name="expand-icon">
-              <wa-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
+              <wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
             </slot>
             <slot name="collapse-icon">
-              <wa-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
+              <wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
             </slot>
           </span>
         </summary>

src/components/details/details.styles.ts

@@ -9,7 +9,7 @@ export default css`
   }
 
   .details {
-    border: solid 1px var(--wa-color-surface-outline);
+    border: solid 1px var(--wa-color-surface-border);
     border-radius: var(--wa-panel-corners);
     background-color: var(--wa-color-surface-default);
     overflow-anchor: none;

src/components/dialog/dialog.component.ts

@@ -45,7 +45,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart header - The dialog's header. This element wraps the title and header actions.
  * @csspart header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
  * @csspart title - The dialog's title.
- * @csspart close-button - The close button, an `<wa-icon-button>`.
+ * @csspart close-button - The close button, a `<wa-icon-button>`.
  * @csspart close-button__base - The close button's exported `base` part.
  * @csspart body - The dialog's body.
  * @csspart footer - The dialog's footer.
@@ -289,9 +289,10 @@ export default class WaDialog extends WebAwesomeElement {
                       part="close-button"
                       exportparts="base:close-button__base"
                       class="dialog__close"
-                      name="x-lg"
+                      name="xmark"
                       label=${this.localize.term('close')}
                       library="system"
+                      variant="solid"
                       @click="${() => this.requestClose('close-button')}"
                     ></wa-icon-button>
                   </div>

src/components/divider/divider.styles.ts

@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --color: var(--wa-color-surface-outline);
+    --color: var(--wa-color-surface-border);
     --width: var(--wa-border-width-thin);
     --spacing: var(--wa-space-m);
   }

src/components/drawer/drawer.component.ts

@@ -46,7 +46,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart header - The drawer's header. This element wraps the title and header actions.
  * @csspart header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
  * @csspart title - The drawer's title.
- * @csspart close-button - The close button, an `<wa-icon-button>`.
+ * @csspart close-button - The close button, a `<wa-icon-button>`.
  * @csspart close-button__base - The close button's exported `base` part.
  * @csspart body - The drawer's body.
  * @csspart footer - The drawer's footer.
@@ -342,9 +342,10 @@ export default class WaDrawer extends WebAwesomeElement {
                       part="close-button"
                       exportparts="base:close-button__base"
                       class="drawer__close"
-                      name="x-lg"
+                      name="xmark"
                       label=${this.localize.term('close')}
                       library="system"
+                      variant="solid"
                       @click=${() => this.requestClose('close-button')}
                     ></wa-icon-button>
                   </div>

src/components/dropdown/dropdown.styles.ts

@@ -35,7 +35,7 @@ export default css`
   .dropdown__panel {
     font: inherit;
     box-shadow: var(--wa-shadow-level-2);
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
     pointer-events: none;
   }
 

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

@@ -31,6 +31,18 @@ export default class WaIconButton extends WebAwesomeElement {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   @property() name?: string;
 
+  /**
+   * The family of icons to choose from. For Font Awesome, valid options include `classic`, `sharp`, `duotone`, and
+   * `brands`. Custom icon libraries may or may not use this property.
+   */
+  @property({ reflect: true }) family: string;
+
+  /**
+   * The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
+   * the _classic_ and _sharp_ families. Custom icon libraries may or may not use this property.
+   */
+  @property({ reflect: true }) variant: string;
+
   /** The name of a registered custom icon library. */
   @property() library?: string;
 
@@ -120,6 +132,8 @@ export default class WaIconButton extends WebAwesomeElement {
         <wa-icon
           class="icon-button__icon"
           name=${ifDefined(this.name)}
+          family=${ifDefined(this.family)}
+          variant=${ifDefined(this.variant)}
           library=${ifDefined(this.library)}
           src=${ifDefined(this.src)}
           aria-hidden="true"

src/components/icon-button/icon-button.styles.ts

@@ -15,7 +15,7 @@ export default css`
     align-items: center;
     background: none;
     border: none;
-    border-radius: var(--wa-corners-1x);
+    border-radius: var(--wa-corners-s);
     font-size: inherit;
     color: inherit;
     padding: var(--wa-space-xs);
@@ -26,11 +26,11 @@ export default css`
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--wa-color-brand-fill-vivid);
+    color: var(--wa-color-brand-spot);
   }
 
   .icon-button:active:not(.icon-button--disabled) {
-    color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
+    color: color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-active));
   }
 
   .icon-button:focus {

src/components/icon/icon.component.ts

@@ -79,6 +79,18 @@ export default class WaIcon extends WebAwesomeElement {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   @property({ reflect: true }) name?: string;
 
+  /**
+   * The family of icons to choose from. For Font Awesome, valid options include `classic`, `sharp`, `duotone`, and
+   * `brands`. Custom icon libraries may or may not use this property.
+   */
+  @property({ reflect: true }) family: string;
+
+  /**
+   * The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
+   * the _classic_ and _sharp_ families. Custom icon libraries may or may not use this property.
+   */
+  @property({ reflect: true }) variant: string;
+
   /**
    * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
    * can result in XSS attacks.
@@ -113,7 +125,7 @@ export default class WaIcon extends WebAwesomeElement {
     const library = getIconLibrary(this.library);
     if (this.name && library) {
       return {
-        url: library.resolver(this.name),
+        url: library.resolver(this.name, this.family, this.variant),
         fromLibrary: true
       };
     }

src/components/icon/icon.styles.ts

@@ -6,7 +6,7 @@ export default css`
 
   :host {
     display: inline-block;
-    width: 1em;
+    width: auto;
     height: 1em;
     box-sizing: content-box !important;
   }
@@ -14,6 +14,7 @@ export default css`
   svg {
     display: block;
     height: 100%;
-    width: 100%;
+    width: auto;
+    fill: currentColor;
   }
 `;

src/components/icon/library.default.ts

@@ -1,9 +1,48 @@
-import { getBasePath } from '../../utilities/base-path.js';
+import { getKitCode } from '../../utilities/base-path.js';
 import type { IconLibrary } from './library.js';
 
+function getIconUrl(name: string, family: string, variant: string) {
+  const kitCode = getKitCode();
+  const isPro = kitCode.length > 0;
+  let folder = 'solid';
+
+  // Classic
+  if (family === 'classic') {
+    if (variant === 'thin') folder = 'thin';
+    if (variant === 'light') folder = 'light';
+    if (variant === 'regular') folder = 'regular';
+    if (variant === 'solid') folder = 'solid';
+  }
+
+  // Sharp
+  if (family === 'sharp') {
+    if (variant === 'thin') folder = 'sharp-thin';
+    if (variant === 'light') folder = 'sharp-light';
+    if (variant === 'regular') folder = 'sharp-regular';
+    if (variant === 'solid') folder = 'sharp-solid';
+  }
+
+  // Brands
+  if (family === 'brands') {
+    folder = 'brands';
+  }
+
+  // Duotone
+  if (family === 'duotone') {
+    folder = 'duotone';
+  }
+
+  // Use the default CDN
+  return isPro
+    ? `https://ka-p.fontawesome.com/releases/v6.4.0/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
+    : `https://ka-f.fontawesome.com/releases/v6.4.0/svgs/${folder}/${name}.svg`;
+}
+
 const library: IconLibrary = {
   name: 'default',
-  resolver: name => getBasePath(`assets/icons/${name}.svg`)
+  resolver: (name: string, family = 'classic', variant = 'solid') => {
+    return getIconUrl(name, family, variant);
+  }
 };
 
 export default library;