Merge branch 'next' into patterns-exploration

* fix tabbable, add logo uploader

* Add icon chooser and project name to themer

* Add icon chooser and project name to themer

* make theme swapping less jarring

* add depth to themer

* update font families / font weights on theme change

* fix prettier

* update themer to reset values on theme change

* remove custom-elements.mjs

* prettier

* update comments in isVisible

* add PR #

* prettier

* update changelog

* prettier

* update changelog

* fix themer

* ensure target exists

* update icon search

* prettier

* fix select test

* prettier

* fix sprite svg

* remove custom-elements.mjs

* Add small validation to themer

* prettier

* fix conflicts

* prettier

* remove cem-manifest.mjs

---------

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

cspell.json

@@ -173,6 +173,7 @@
     "valpha",
     "valuenow",
     "valuetext",
+    "Vuejs",
     "WCAG",
     "webawesome",
     "WEBP",

custom-elements-manifest.config.js

@@ -1,6 +1,7 @@
 import * as path from 'path';
 import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
+import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
 import commandLineArgs from 'command-line-args';
@@ -218,6 +219,12 @@ export default {
           url: `https://shoelace.style/components/${tag.replace('wa-', '')}`
         };
       }
+    }),
+
+    customElementVuejsPlugin({
+      outdir: './dist/types/vue',
+      fileName: 'index.d.ts',
+      componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.component.js`
     })
   ]
 };

custom-elements-manifest.mjs

@@ -1,217 +0,0 @@
-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/default.njk

@@ -37,6 +37,8 @@
     <link rel="stylesheet" href="/dist/themes/applied.css" />
     <link rel="stylesheet" href="/dist/themes/forms.css" />
     <link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/default.css" />
+    <link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/demo_patterns.css" />
+    <link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/demo_sublayout.css" />
     <script type="module" src="/dist/autoloader.js"></script>
 
     {# Set the initial theme and menu states here to prevent flashing #}
@@ -51,7 +53,7 @@
     {# Web Fonts #}
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans+Mono&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Inter:wght@100..900&family=Lora:wght@400..700&family=Mulish:wght@200..1000&family=Noto+Sans+Display:wght@100..900&family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:wght@100..900&family=Noto+Serif:wght@100..900&family=Open+Sans:wght@300..800&family=Playfair+Display:wght@400..900&family=Playfair:opsz,wght@5..1200,300;5..1200,400;5..1200,500;5..1200,600&family=Quicksand:wght@300..700&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Mono:wght@300..700&family=Roboto+Serif:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Slab:wght@300..700&display=swap" rel="stylesheet">
 
     {# Turbo + Scroll positioning #}
     <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>

docs/_includes/sidebar.njk

@@ -17,6 +17,7 @@
         });
       </script>
       <li><a href="/experimental/sandbox">Sandbox</a></li>
+      <li><a href="/experimental/patterns">Patterns</a></li>
     </ul>
   </li>
   <li>

docs/_utilities/markdown.cjs

@@ -25,8 +25,8 @@ markdown.use(markdownItReplaceIt);
 ['tip', 'warning', 'danger'].forEach(type => {
   const variant = type === 'tip' ? 'brand' : type;
   let icon = 'circle-info';
-  if (type === 'warning') icon = 'circle-exclamation';
-  if (type === 'danger') icon = 'triangle-exclamation';
+  if (type === 'warning') icon = 'triangle-exclamation';
+  if (type === 'danger') icon = 'circle-exclamation';
 
   markdown.use(markdownItContainer, type, {
     render: function (tokens, idx) {

docs/assets/styles/code-previews.css

@@ -8,7 +8,7 @@
 
 .code-preview__preview {
   position: relative;
-  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
   border-bottom: none;
   border-top-left-radius: var(--wa-corners-s);
   border-top-right-radius: var(--wa-corners-s);
@@ -39,10 +39,10 @@
   right: 0;
   bottom: 0;
   width: 1.75rem;
-  font-size: 20px;
+  font-size: var(--wa-font-size-xs);
   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-border);
+  border-left: var(--wa-border-style) var(--wa-border-width-s) 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-border);
+  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
   border-bottom: none;
   border-radius: 0 !important;
   display: none;
@@ -74,7 +74,7 @@
 
 .code-preview__buttons {
   position: relative;
-  border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+  border: var(--wa-border-style) var(--wa-border-width-s) 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-border);
+  border-right: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
 }
 
 .code-preview__button--html,
@@ -129,7 +129,7 @@
 
 .code-preview__button:hover,
 .code-preview__button:active {
-  box-shadow: 0 0 0 var(--wa-border-width-thin) var(--wa-color-brand-border-subtle);
+  box-shadow: 0 0 0 var(--wa-border-width-s) var(--wa-color-brand-border-subtle);
   border-right-color: transparent;
   background-color: var(--wa-color-brand-fill-subtle);
   color: var(--wa-color-brand-text-on-surface);

docs/assets/styles/docs.css

@@ -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-border);
+  border-right: solid var(--wa-border-width-s) var(--wa-color-surface-border);
   border-radius: 0;
   padding: 2rem;
   margin: 0;
@@ -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-border);
+  border-bottom: solid var(--wa-border-width-s) 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-border);
+  border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
   list-style: none;
   padding: 1rem 0;
   margin: 0;
@@ -672,7 +672,7 @@ html.sidebar-open #menu-toggle {
 
   details,
   pre {
-    border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
   }
 
   details summary {
@@ -706,7 +706,7 @@ html.sidebar-open #menu-toggle {
   }
 
   .code-preview__source-group {
-    border-bottom: solid 1px var(--wa-border-width-thin);
+    border-bottom: solid 1px var(--wa-border-width-s);
     border-bottom-left-radius: var(--wa-corners-s);
     border-bottom-right-radius: var(--wa-corners-s);
   }

docs/assets/styles/search.css

@@ -6,7 +6,7 @@
   --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-width: var(--wa-border-width-s);
   --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/pages/components/alert.md

@@ -7,7 +7,7 @@ layout: component
 
 ```html:preview
 <wa-alert open>
-  <wa-icon slot="icon" name="info-circle" variant="regular"></wa-icon>
+  <wa-icon slot="icon" name="circle-info" 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" variant="regular" />
+    <WaIcon slot="icon" name="circle-info" variant="regular" />
     This is a standard alert. You can customize its content and even the icon.
   </WaAlert>
 );
@@ -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-circle" variant="regular"></wa-icon>
+  <wa-icon slot="icon" name="triangle-exclamation" 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-triangle" variant="regular"></wa-icon>
+  <wa-icon slot="icon" name="circle-exclamation" 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" variant="regular" />
+      <WaIcon slot="icon" name="circle-info" 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" variant="regular" />
+      <WaIcon slot="icon" name="circle-check" variant="regular" />
       <strong>Your changes have been saved</strong>
       <br />
       You can safely exit the app now.
@@ -108,7 +108,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="warning" open>
-      <WaIcon slot="icon" name="exclamation-circle" variant="regular" />
+      <WaIcon slot="icon" name="triangle-exclamation" 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-triangle" variant="regular" />
+      <WaIcon slot="icon" name="circle-exclamation" 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" variant="regular"></wa-icon>
+  <wa-icon slot="icon" name="circle-info" 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" variant="regular" />
+      <WaIcon slot="icon" name="circle-info" 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" variant="regular"></wa-icon>
+    <wa-icon slot="icon" name="circle-info" 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" variant="regular" />
+          <WaIcon slot="icon" name="circle-info" variant="regular" />
           This alert will automatically hide itself after three seconds, unless you interact with it.
         </WaAlert>
       </div>
@@ -280,13 +280,13 @@ You should always use the `closable` attribute so users can dismiss the notifica
   </wa-alert>
 
   <wa-alert variant="warning" duration="3000" closable>
-    <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
+    <wa-icon slot="icon" name="triangle-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="triangle-exclamation" variant="regular"></wa-icon>
+    <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
     <strong>Your account has been deleted</strong><br />
     We're very sorry to see you go!
   </wa-alert>
@@ -365,14 +365,14 @@ const App = () => {
       </WaAlert>
 
       <WaAlert ref={warning} variant="warning" duration="3000" closable>
-        <WaIcon slot="icon" name="circle-exclamation" variant="regular" />
+        <WaIcon slot="icon" name="triangle-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="triangle-exclamation" variant="regular" />
+        <WaIcon slot="icon" name="circle-exclamation" variant="regular" />
         <strong>Your account has been deleted</strong>
         <br />
         We're very sorry to see you go!

docs/pages/components/button.md

@@ -374,7 +374,7 @@ const App = () => (
 
 ### Loading
 
-Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
+Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
 
 ```html:preview
 <wa-button variant="brand" loading>Brand</wa-button>

docs/pages/experimental/demo_patterns/blog_listing.md

@@ -0,0 +1,276 @@
+---
+meta:
+  title: Blog Listing
+  description: TODO
+toc: false
+---
+
+<div class="wa:block-flow:3xl">
+  <div class="wa:background:college_ruled" style="border-radius:var(--wa-panel-corners); padding: var(--wa-space-3xl); background-color:var(--wa-color-brand-spot-darker); color:var(--wa-color-brand-text-on-spot); text-align: center;">
+    <h1 style="margin-block-start: 0;">Latest from the Blog</h1>
+    <p style="margin-block-end: 0;">Lorem ipsum dolor sit amet</p>
+  </div>
+  <div class="wa:arrange:aside-end" style="--wa-grid-size: 45ch;">
+    <div class="wa:block-flow:m">
+      <div class="wa:frame:landscape">
+        <img src="https://images.pexels.com/photos/6550721/pexels-photo-6550721.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+      </div>
+      <div class="wa:arrange:flex:justify-space_between">
+        <small><wa-format-date month="long" year="numeric"></wa-format-date></small>
+        <wa-badge variant="neutral">Design</wa-badge>
+      </div>
+      <h1>Pantone's Color of the Year 2024</h1>
+      <p>PANTONE 13-1023 Peach Fuzz has our new year starting off with lots of warm and fuzzies.</p>
+      <div class="wa:arrange:flex:gap-s">
+        <wa-avatar label="User avatar" style="--size: 2rem;"></wa-avatar>
+        <small>Author</small>
+      </div>
+    </div>
+    <div class="wa:arrange" style="align-content: start;">
+      <div class="wa:arrange:side-by-side:gap-s">
+        <div class="wa:block-flow:xs">
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+          <h4>Lorem Ipsum Dolor Sit Amet</h4>
+        </div>
+        <div class="wa:frame">
+          <img src="https://images.pexels.com/photos/1181676/pexels-photo-1181676.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+      </div>
+      <div class="wa:arrange:side-by-side:gap-s">
+        <div class="wa:block-flow:xs">
+          <small><wa-format-date date="2023-11-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+          <h4>Consectetur Adipiscing Elit</h4>
+        </div>
+        <div class="wa:frame">
+          <img src="https://images.pexels.com/photos/4219654/pexels-photo-4219654.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+      </div>
+      <div class="wa:arrange:side-by-side:gap-s">
+        <div class="wa:block-flow:xs">
+          <small><wa-format-date date="2023-11-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+          <h4>Nunc Rhoncus Enim Ligula</h4>
+        </div>
+        <div class="wa:frame">
+          <img src="https://images.pexels.com/photos/14822510/pexels-photo-14822510.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+      </div>
+      <div class="wa:arrange:side-by-side:gap-s">
+        <div class="wa:block-flow:xs">
+          <small><wa-format-date date="2023-10-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+          <h4>Donec Quis Tincidunt Massa</h4>
+        </div>
+        <div class="wa:frame">
+          <img src="https://images.pexels.com/photos/7988116/pexels-photo-7988116.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="wa:arrange:gap-m" style="background-color:var(--wa-color-brand-fill-subtle); padding:var(--wa-space-3xl); border-radius:var(--wa-panel-corners); box-shadow:var(--wa-shadow-level-1);">
+    <div class="wa:block-flow:s">
+      <h2 style="color:var(--wa-color-brand-text-on-fill)"><strong>Don't miss a thing.</strong></h2>
+      <p style="color:var(--wa-color-neutral-text-on-fill)">Subscribe to receive the latest posts in your inbox.</p>
+    </div>
+    <div class="wa:arrange:flex:justify-space_between:gap-s">
+      <wa-input class="wa:fill_space" type="email" placeholder="your@email.com">
+        <wa-icon name="envelope" variant="regular" label="email" slot="prefix"></wa-icon>
+      </wa-input>
+      <wa-button variant="brand">Subscribe</wa-button>
+    </div>
+  </div>
+  <div class="wa:block-flow:xl">
+    <div class="wa:arrange:flex:justify-space_between">
+      <h2>Arts & Culture</h2>
+      <wa-button outline variant="brand">
+        See more arts & culture posts
+        <wa-icon name="arrow-right" slot="suffix"></wa-icon>
+      </wa-button>
+    </div>
+    <div class="wa:arrange:size-s">
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/14363192/pexels-photo-14363192.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/8843689/pexels-photo-8843689.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/1646953/pexels-photo-1646953.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/3184188/pexels-photo-3184188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+    </div>
+  </div>
+  <div class="wa:block-flow:xl">
+    <div class="wa:arrange:flex:justify-space_between">
+      <h2>Design</h2>
+      <wa-button outline variant="brand">
+        See more design posts
+        <wa-icon name="arrow-right" slot="suffix"></wa-icon>
+      </wa-button>
+    </div>
+    <div class="wa:arrange:size-s">
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/1762851/pexels-photo-1762851.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/196645/pexels-photo-196645.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/1194420/pexels-photo-1194420.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+    </div>
+  </div>
+  <div class="wa:block-flow:xl">
+    <div class="wa:arrange:flex:justify-space_between">
+      <h2>Web Development</h2>
+      <wa-button outline variant="brand">
+        See more web development posts
+        <wa-icon name="arrow-right" slot="suffix"></wa-icon>
+      </wa-button>
+    </div>
+    <div class="wa:arrange:size-s">
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/6321244/pexels-photo-6321244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/5473956/pexels-photo-5473956.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/4709289/pexels-photo-4709289.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/3184340/pexels-photo-3184340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+    </div>
+  </div>
+  <div class="wa:arrange:size-s wa:collection">
+    <div>
+      <h2>So Fetch&nbsp;<wa-icon name="arrow-trend-up" style="color: var(--wa-color-brand-spot);"></wa-icon></h2>
+      <p style="margin-block-end:0;">Other readers have been into these trending posts recently.</p>
+    </div>
+    <wa-card class="wa:block-flow:xs">
+      <div class="wa:frame:landscape" slot="image">
+        <img src="https://images.pexels.com/photos/1194420/pexels-photo-1194420.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+      </div>
+      <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+      <h4>Headline Dolor Sit Amet</h4>
+      <wa-badge variant="neutral">Design</wa-badge>
+    </wa-card>
+    <wa-card class="wa:block-flow:xs">
+      <div class="wa:frame:landscape" slot="image">
+        <img src="https://images.pexels.com/photos/4219654/pexels-photo-4219654.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+      </div>
+      <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+      <h4>Consectetur Adipiscing Elit</h4>
+      <wa-badge variant="neutral">Arts & Culture</wa-badge>
+    </wa-card>
+    <wa-card class="wa:block-flow:xs">
+      <div class="wa:frame:landscape" slot="image">
+        <img src="https://images.pexels.com/photos/6321244/pexels-photo-6321244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+      </div>
+      <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+      <h4>Headline Dolor Sit Amet</h4>
+      <wa-badge variant="neutral">Web Development</wa-badge>
+    </wa-card>
+  </div>
+  <div>
+    <h2>Browse All Topics</h2>
+    <div class="wa:arrange:gap-m">
+      <wa-button outline>Accessibility <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+      <wa-button outline>Arts & Culture <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+      <wa-button outline>Design <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+      <wa-button outline>News <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+      <wa-button outline>Typography <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+      <wa-button outline>Web Development <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
+    </div>
+  </div>
+</div>
+
+<style>
+  :root {
+    --docs-content-max-width: 72rem;
+  }
+  #menu-toggle,
+  #sidebar {
+    display: none;
+  }
+  main {
+    padding: var(--docs-content-vertical-spacing) var(--docs-content-padding);
+    margin: 0;
+  }
+</style>

docs/pages/experimental/demo_patterns/blog_post.md

@@ -0,0 +1,178 @@
+---
+meta:
+  title: Blog Post
+  description: TODO
+toc: false
+---
+
+<div class="wa:block-flow:3xl">
+  <div class="wa:overflowing_hero">
+    <div class="wa:arrange wa:background:brand_spot_gradient" style="border-radius:var(--wa-panel-corners); padding:var(--wa-space-3xl); color:var(--wa-color-brand-text-on-spot);">
+      <div>
+        <div class="wa:arrange:flex:justify-space_between:gap-s">
+          <small><wa-format-date month="long" year="numeric"></wa-format-date></small>
+          <wa-badge variant="neutral">Design</wa-badge>
+        </div>
+        <h1>Pantone's Color of the Year 2024</h1>
+        <p>PANTONE 13-1023 Peach Fuzz has our new year starting off with lots of warm and fuzzies.</p>
+        <div class="wa:arrange:flex:gap-s">
+          <wa-avatar label="User avatar" style="--size: 2rem;"></wa-avatar>
+          <small>Author</small>
+        </div>
+      </div>
+      <div class="wa:frame:square">
+        <img src="https://images.pexels.com/photos/6550721/pexels-photo-6550721.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+      </div>
+    </div>
+  </div>
+  <div class="wa:block-flow:3xl" style="font-size:var(--wa-font-size-l); max-inline-size: 60ch; margin-inline: auto;">
+    <div class="wa:block-flow:xl">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae sapien non velit feugiat consectetur. Nulla lacinia ante a diam gravida cursus. Quisque fermentum ex a nisi cursus porttitor. Praesent id laoreet mauris, id efficitur sapien. Quisque eget metus velit. Nulla sit amet tristique lectus, tincidunt lobortis velit. Proin vitae facilisis lectus. Nunc vel sapien vitae dui commodo suscipit iaculis eget felis.</p>
+      <p>Praesent in erat semper, fringilla tellus non, lacinia felis. Nam eu fringilla nisl. Maecenas id tortor tempus, accumsan nisi eget, bibendum arcu. Pellentesque nec enim non nisl varius iaculis. Phasellus interdum nec ex nec faucibus. Vestibulum et quam auctor massa pellentesque tempor. Sed tincidunt nibh felis, ut euismod ante volutpat aliquam. Etiam varius suscipit ornare.</p>
+      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed a leo tempus, pretium mi ac, pretium ipsum. Curabitur cursus eleifend enim. Pellentesque feugiat euismod tincidunt. Sed semper velit nunc, nec imperdiet eros varius ac. Aenean aliquam augue at venenatis volutpat. Proin a imperdiet leo. Nullam eget aliquet urna.</p>
+      <p>Mauris faucibus varius massa vel vulputate. Praesent ac ligula pretium, viverra eros vitae, consequat metus. Morbi commodo vehicula sem, eget scelerisque ipsum rutrum ut. Maecenas cursus dolor mattis risus dapibus pulvinar. Suspendisse ut dolor nec arcu lobortis molestie. Duis pulvinar tellus vitae felis volutpat hendrerit. Vivamus sodales condimentum quam, ut consequat massa viverra sed. Vestibulum laoreet tincidunt lacus nec ullamcorper. Quisque tincidunt turpis et sapien hendrerit, a laoreet massa dictum. Vestibulum dictum posuere lectus. Pellentesque ac lorem sodales, iaculis libero in, eleifend purus. Sed volutpat quam est, ac accumsan dolor viverra a. Duis blandit augue id tortor aliquet tempus. Nulla pharetra nec nisi non placerat. Donec in risus feugiat risus mattis pretium imperdiet a tortor.</p>
+      <p>Donec eros felis, dictum non placerat vitae, sodales in risus. Etiam felis lectus, consectetur quis tempor non, porta a metus. Cras finibus nibh a est semper, eget consequat libero pretium. Pellentesque placerat feugiat enim sit amet sodales. Proin convallis dui eu nibh tincidunt, a posuere dolor sagittis. Ut egestas et eros eu convallis. Integer eros elit, blandit at euismod sit amet, blandit sed velit. Donec dapibus nulla in augue commodo, at efficitur orci dictum. Nam id accumsan leo. Proin pellentesque tincidunt neque ornare gravida. Phasellus malesuada, orci vel ultricies fringilla, tortor ipsum cursus magna, non fermentum velit nibh at nunc. Duis purus mauris, ullamcorper eu tempus id, ornare gravida odio. Praesent ultrices accumsan iaculis. Maecenas ut metus a lectus venenatis euismod. Sed auctor, dui efficitur molestie convallis, diam odio faucibus turpis, vitae bibendum ante est non ligula.</p>
+      <wa-divider></wa-divider>
+      <div class="wa:arrange:flex:justify-space_between" style="font-size:var(--wa-font-size-m);">
+        <wa-radio-group name="a">
+          <wa-radio-button value="1"><wa-icon name="hands-clapping" label="Applaud"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">74</small></wa-radio-button>
+          <wa-radio-button value="2"><wa-icon name="heart" label="Love"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">161</small></wa-radio-button>
+          <wa-radio-button value="3"><wa-icon name="face-laugh-beam" label="Laugh"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">9</small></wa-radio-button>
+          <wa-radio-button value="4"><wa-icon name="face-sad-tear" label="Cry"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">1</small></wa-radio-button>
+        </wa-radio-group>
+        <div class="wa:arrange:flex:nowrap:gap-l">
+          <wa-tooltip content="Save">
+            <wa-icon-button name="bookmark" label="Save"></wa-icon-button>
+          </wa-tooltip>
+          <wa-tooltip content="Share">
+            <wa-icon-button name="share-from-square" label="Share"></wa-icon-button>
+          </wa-tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="wa:block-flow:2xl" style="font-size:var(--wa-font-size-m);">
+      <h2>Comments</h2>
+      <div class="wa:arrange:flex:nowrap:gap-s">
+        <wa-avatar label="User avatar"></wa-avatar>
+        <wa-textarea class="wa:fill_space" rows="1" placeholder="Add a comment"></wa-textarea>
+      </div>
+      <div class="wa:arrange:flex:nowrap:align-start:gap-s">
+        <wa-avatar image="https://m.media-amazon.com/images/M/MV5BMTBlNDU1NTgtNjY1Zi00ZTU0LTlkN2ItZmM5NDM5NmMyNzk3XkEyXkFqcGdeQXVyMDM2NDM2MQ@@._V1_.jpg" label="User avatar"></wa-avatar>
+        <div class="wa:fill_space">
+          <div class="wa:chat_bubble">
+            <div class="wa:arrange:flex:justify-space_between">
+              <strong>Din Djarin</strong>
+              <small>1d</small>
+            </div>
+            <span>You expect me to search the galaxy for the home of this creature and deliver it to a race of enemy sorcerers?</span>
+          </div>
+          <div class="wa:arrange:flex:gap-m">
+            <div class="wa:arrange:flex:nowrap:gap-3xs">
+              <wa-icon-button name="thumbs-up" label="Like" style="color:var(--wa-color-neutral-text-on-surface)"></wa-icon-button>
+              <small>(3)</small>
+            </div>
+            <wa-button variant="text" size="small">Reply</wa-button>
+          </div>
+          <div class="wa:arrange:flex:nowrap:align-start:gap-s">
+            <wa-avatar image="https://cdn.mos.cms.futurecdn.net/zAQrY5fe3HAFvWrTLE6nNi.png" label="User avatar"></wa-avatar>
+            <div class="wa:fill_space">
+              <div class="wa:chat_bubble">
+                <div class="wa:arrange:flex:justify-space_between">
+                  <strong>The Armorer</strong>
+                  <small>12h</small>
+                </div>
+                <span>This is the Way.</span>
+              </div>
+              <div class="wa:arrange:flex:gap-m">
+                <div class="wa:arrange:flex:nowrap:gap-3xs">
+                  <wa-icon-button name="thumbs-up" label="Like" style="color:var(--wa-color-neutral-text-on-surface)"></wa-icon-button>
+                  <small>(21)</small>
+                </div>
+                <wa-button variant="text" size="small">Reply</wa-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wa:arrange:flex:nowrap:align-start:gap-s">
+        <wa-avatar image="https://static1.srcdn.com/wordpress/wp-content/uploads/2021/07/Nick-Nolte-and-Misty-Rosas-as-Kuiil-in-The-Mandalorian.jpg" label="User avatar"></wa-avatar>
+        <div class="wa:fill_space">
+          <div class="wa:chat_bubble">
+            <div class="wa:arrange:flex:justify-space_between">
+              <strong>Kuiil</strong>
+              <small>2w</small>
+            </div>
+            <span>I have spoken.</span>
+          </div>
+          <div class="wa:arrange:flex:gap-m">
+            <div class="wa:arrange:flex:nowrap:gap-3xs">
+              <wa-icon-button name="thumbs-up" label="Like" style="color:var(--wa-color-neutral-text-on-surface)"></wa-icon-button>
+              <small>(1)</small>
+            </div>
+            <wa-button variant="text" size="small">Reply</wa-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="wa:arrange:gap-m" style="background-color:var(--wa-color-brand-fill-subtle); padding:var(--wa-space-3xl); border-radius:var(--wa-panel-corners); box-shadow:var(--wa-shadow-level-1); margin-top:calc(var(--wa-space-3xl) * 2);">
+    <div class="wa:block-flow:s">
+      <h2 style="color:var(--wa-color-brand-text-on-fill)"><strong>Don't miss a thing.</strong></h2>
+      <p style="color:var(--wa-color-neutral-text-on-fill)">Subscribe to receive the latest posts in your inbox.</p>
+    </div>
+    <div class="wa:arrange:flex:gap-s">
+      <wa-input class="wa:fill_space" type="email" placeholder="your@email.com">
+        <wa-icon name="envelope" variant="regular" label="email" slot="prefix"></wa-icon>
+      </wa-input>
+      <wa-button variant="brand">Subscribe</wa-button>
+    </div>
+  </div>
+  <div style="background-color:var(--wa-color-neutral-fill-subtle); padding:var(--wa-space-3xl); border-radius:var(--wa-panel-corners); box-shadow:var(--wa-shadow-level-1);">
+    <div class="wa:block-flow:xl">
+      <h2>You may also like</h2>
+      <div class="wa:arrange:size-s">
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/8843689/pexels-photo-8843689.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/1646953/pexels-photo-1646953.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+      <div class="wa:block-flow:xs">
+        <div class="wa:frame:landscape">
+          <img src="https://images.pexels.com/photos/3184188/pexels-photo-3184188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        <div>
+          <small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
+        </div>
+        <h4>Headline Dolor Sit Amet</h4>
+      </div>
+    </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  :root {
+    --docs-content-max-width: 72rem;
+  }
+  #menu-toggle,
+  #sidebar {
+    display: none;
+  }
+  main {
+    padding: var(--docs-content-vertical-spacing) var(--docs-content-padding);
+    margin: 0;
+  }
+</style>

docs/pages/experimental/demo_patterns/ecommerce_product_page.md

@@ -0,0 +1,217 @@
+---
+meta:
+  title: Ecommerce Product Page
+  description: TODO
+toc: false
+---
+
+<!-- cSpell:dictionaries lorem-ipsum -->
+
+<div class="wa:block-flow:3xl">
+  <wa-breadcrumb>
+    <wa-breadcrumb-item>Plants</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Indoor Plants</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Orchids</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Jupiter Moth Orchid</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  <div class="wa:container wa:product-overview">
+    <div class="wa:arrange">
+      <div class="wa:product-overview:hero">
+        <img src="https://images.pexels.com/photos/1021386/pexels-photo-1021386.jpeg" alt="">
+      </div>
+      <div class="wa:product-overview:description wa:block-flow:2xl">
+        <div class="wa:product-overview:summary wa:block-flow:s">
+          <wa-badge>20% Off</wa-badge>
+          <h1>Jupiter Moth Orchid</h1>
+          <p class="wa:product-overview:price"><s>$35</s> $28</p>
+          <div class="wa:product-overview:rating wa:arrange:flex:gap-s">
+            <wa-rating label="average stars" readonly precision="0.1" value="4.7"></wa-rating>
+            <a href="#product-reviews"><small>419 reviews</small></a>
+          </div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </div>
+        <div class="wa:product-overview:actions wa:arrange:flex:gap-s">
+          <wa-input type="number" value="1" min="1" max="10"></wa-input>
+          <wa-button class="wa:fill_space" variant="brand">Add to cart</wa-button>
+        </div>
+        <div class="wa:product-overview:details wa:block-flow:s">
+          <wa-details summary="Details">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </wa-details>
+          <wa-details summary="Care instructions">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </wa-details>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="wa:container wa:product-reviews" id="product-reviews">
+    <wa-tab-group>
+      <wa-tab slot="nav" panel="reviews">Reviews</wa-tab>
+      <wa-tab slot="nav" panel="questions">Questions</wa-tab>
+      <wa-tab-panel name="reviews" style="margin-top:var(--wa-space-s);">
+        <div class="wa:arrange:aside-start">
+          <div class="wa:product-reviews:overview wa:block-flow:2xl">
+            <h2>Ratings and reviews</h2>
+            <div class="wa:block-flow:s">
+              <div class="wa:product-reviews:summary wa:arrange:flex:gap-s">
+                <h3 class="wa:arrange:flex:gap-s">
+                  4.7
+                  <wa-rating label="average stars" readonly precision="0.1" value="4.7"></wa-rating>
+                </h3>
+                <small>Based on 419 reviews</small>
+              </div>
+              <div class="wa:product-reviews:breakdown">
+                <ol>
+                  <li class="wa:arrange:flex:gap-s">
+                    <span>5</span>
+                    <wa-icon name="star"></wa-icon>
+                    <wa-progress-bar class="wa:fill_space" value="82"></wa-progress-bar>
+                    <span>340</span>
+                  </li>
+                  <li class="wa:arrange:flex:gap-s">
+                    <span>4</span>
+                    <wa-icon name="star"></wa-icon>
+                    <wa-progress-bar class="wa:fill_space" value="12"></wa-progress-bar>
+                    <span>53</span>
+                  </li>
+                  <li class="wa:arrange:flex:gap-s">
+                    <span>3</span>
+                    <wa-icon name="star"></wa-icon>
+                    <wa-progress-bar class="wa:fill_space" value="6"></wa-progress-bar>
+                    <span>24</span>
+                  </li>
+                  <li class="wa:arrange:flex:gap-s">
+                    <span>2</span>
+                    <wa-icon name="star"></wa-icon>
+                    <wa-progress-bar class="wa:fill_space" value="0"></wa-progress-bar>
+                    <span>0</span>
+                  </li>
+                  <li class="wa:arrange:flex:gap-s">
+                    <span>1</span>
+                    <wa-icon name="star"></wa-icon>
+                    <wa-progress-bar class="wa:fill_space" value="1"></wa-progress-bar>
+                    <span>2</span>
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <wa-divider></wa-divider>
+            <div class="wa:block-flow:s">
+              <h3>Happy with your purchase?</h3>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+              <wa-button outline size="small" style="width: 100%;">Write a review</wa-button>
+            </div>
+          </div>
+          <div class="wa:product-reviews:list wa:block-flow:2xl">
+            <div class="wa:product-reviews:review wa:block-flow:s">
+              <div class="wa:arrange:flex:gap-s">
+                <wa-avatar label="User avatar"></wa-avatar>
+                <div class="wa:product-reviews:attribution">
+                  <div class="wa:arrange:flex:gap-s">
+                    <strong>Cory L.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-inline-end:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
+                  </div>
+                  <small><wa-format-date month="long" day="numeric" year="numeric"></wa-format-date></small>
+                </div>
+              </div>
+              <wa-rating label="Rating" readonly value="5"></wa-rating>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            </div>
+            <div class="wa:product-reviews:review wa:block-flow:s">
+              <div class="wa:arrange:flex:gap-s">
+                <wa-avatar label="User avatar"></wa-avatar>
+                <div class="wa:product-reviews:attribution">
+                  <div class="wa:arrange:flex:gap-s">
+                    <strong>Konnor R.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-inline-end:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
+                  </div>
+                  <small><wa-format-date date="2023-11-16T09:17:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></small>
+                </div>
+              </div>
+              <wa-rating label="Rating" readonly value="4"></wa-rating>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            </div>
+            <div class="wa:product-reviews:review wa:block-flow:s">
+              <div class="wa:arrange:flex:gap-s">
+                <wa-avatar label="User avatar"></wa-avatar>
+                <div class="wa:product-reviews:attribution">
+                  <div class="wa:arrange:flex:gap-s">
+                    <strong>Kelsey J.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-inline-end:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
+                  </div>
+                  <small><wa-format-date date="2023-10-31T09:17:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></small>
+                </div>
+              </div>
+              <wa-rating label="Rating" readonly value="5"></wa-rating>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            </div>
+            <div class="wa:product-reviews:review wa:block-flow:s">
+              <div class="wa:arrange:flex:gap-s">
+                <wa-avatar label="User avatar"></wa-avatar>
+                <div class="wa:product-reviews:attribution">
+                  <div class="wa:arrange:flex:gap-s">
+                    <strong>Lindsay M.</strong>
+                  </div>
+                  <small><wa-format-date date="2023-07-03T09:17:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></small>
+                </div>
+              </div>
+              <wa-rating label="Rating" readonly value="5"></wa-rating>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            </div>
+            <wa-button outline size="small" style="width: 100%;">Load more reviews</wa-button>
+          </div>
+        </div>
+      </wa-tab-panel>
+      <wa-tab-panel name="questions">
+        questions
+      </wa-tab-panel>
+    </wa-tab-group>
+  </div>
+  <div class="wa:container wa:product-list-simple">
+    <h2>You may also like</h2>
+    <div class="wa:product-list-simple:items wa:arrange:by-two:size-s">
+      <wa-card>
+        <div class="wa:frame:square" slot="image">
+          <img src="https://images.pexels.com/photos/4076594/pexels-photo-4076594.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        Triumph Tulip<br>
+        <strong>$14</strong><br>
+      </wa-card>
+      <wa-card>
+        <div class="wa:frame:square" slot="image">
+          <img src="https://images.pexels.com/photos/4994350/pexels-photo-4994350.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        White Doll's Daisy<br>
+        <strong>$18</strong>
+      </wa-card>
+      <wa-card>
+        <div class="wa:frame:square" slot="image">
+          <img src="https://images.pexels.com/photos/2223890/pexels-photo-2223890.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        Common Poppy<br>
+        <strong>$32</strong>
+      </wa-card>
+      <wa-card>
+        <div class="wa:frame:square" slot="image">
+          <img src="https://images.pexels.com/photos/1179026/pexels-photo-1179026.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
+        </div>
+        Stargazer Lily<br>
+        <strong>$39</strong>
+      </wa-card>
+    </div>
+  </div>
+</div>
+
+<style>
+  :root {
+    --docs-content-max-width: 72rem;
+  }
+  #menu-toggle,
+  #sidebar {
+    display: none;
+  }
+  main {
+    padding: initial;
+    margin: var(--wa-space-xl);
+  }
+</style>

docs/pages/experimental/patterns.md

@@ -0,0 +1,15 @@
+---
+meta:
+  title: Patterns
+  description: TBD
+---
+
+<!-- cSpell:dictionaries lorem-ipsum -->
+
+# Patterns
+
+## Full demos
+
+- [Ecommerce: Product Page](/experimental/demo_patterns/ecommerce_product_page)
+- [Blog: Listing Page](/experimental/demo_patterns/blog_listing)
+- [Blog: Post Page](/experimental/demo_patterns/blog_post)

docs/pages/experimental/sandbox.md

@@ -65,13 +65,13 @@ meta:
 </wa-alert>
 <br />
 <wa-alert variant="warning" open>
-  <wa-icon slot="icon" name="circle-exclamation" variant="solid"></wa-icon>
+  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></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>
+  <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
   <strong>Your account has been deleted</strong><br />
   We're very sorry to see you go!
 </wa-alert>

docs/pages/frameworks/vue.md

@@ -35,35 +35,22 @@ If you'd rather not use the CDN for assets, you can create a build task that cop
 
 ## Configuration
 
-You'll need to tell Vue to ignore Web Awesome components. This is pretty easy because they all start with `sl-`.
-
-```js
-import { fileURLToPath, URL } from 'url';
-
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue({
-      template: {
-        compilerOptions: {
-          isCustomElement: tag => tag.startsWith('wa-')
-        }
-      }
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-});
-```
+If you haven't configured your Vue.js project to work with custom elements/web components, follow [the instructions here](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) based on your project type to ensure your project will not throw an error when it encounters a custom element.
 
 Now you can start using Web Awesome components in your app!
 
+## Types
+
+Once you have configured your application for custom elements, you should be able to use Shoelace in your application without it causing any errors. Unfortunately, this doesn't register the custom elements to behave like components built using Vue. To provide autocomplete information and type safety for your components, you can import the Shoelace Vue types into your `tsconfig.json` to get better integration in your standard Vue and JSX templates.
+
+```json
+{
+  "compilerOptions": {
+    "types": ["@shoelace-style/shoelace/dist/types/vue"]
+  }
+}
+```
+
 ## Usage
 
 ### QR code generator example
@@ -126,7 +113,7 @@ Are you using Web Awesome with Vue? [Help us improve this page!](https://github.
 
 ### Slots
 
-To use Web Awesome components with slots, follow the Vue documentation on using [slots with custom elements](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue).
+Slots in Web Awesome (and web components in general) are functionally the same as basic slots in Vue. Slots can be assigned to elements using the `slot` attribute followed by the name of the slot it is being assigned to.
 
 Here is an example:
 

docs/pages/resources/changelog.md

@@ -26,9 +26,18 @@ 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]
+- Added the `loading` attribute and the `spinner` and `spinner__base` part to `<sl-menu-item>` [#1700]
+- Fixed files that did not have `.js` extensions. [#1770]
+- Fixed `<sl-dialog>` not accounting for elements with hidden dialog controls like `<video>` [#1755]
 - 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]
+- Fixed a bug in `<sl-spinner>` that caused the animation to appear strange in certain circumstances [#1787]
+- Fixed a bug that caused form controls to submit even after they were removed from the DOM [#1823]
+- Fixed a bug that caused empty `<sl-radio-group>` elements to log an error in the console [#1795]
+- Fixed a bug that caused modal scroll locking to conflict with the `scrollbar-gutter` property [#1805]
+- Fixed a bug in `<sl-option>` that caused slotted content to show up when calling `getTextLabel()` [#1730]
 - Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
 
 ## 2.12.0

docs/pages/tokens/borders.md

@@ -8,12 +8,12 @@ meta:
 
 Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
 
-| Token                      | Value                                         | Example                                                                              |
-| -------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
-| `--wa-border-style`        | `solid`                                       |                                                                                      |
-| `--wa-border-width-thin`   | `0.0625rem` (1px)                             | <div class="border-demo" style="border-width: var(--wa-border-width-thin);"></div>   |
-| `--wa-border-width-medium` | `calc(var(--wa-border-width-thin) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-medium);"></div> |
-| `--wa-border-width-thick`  | `calc(var(--wa-border-width-thin) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-thick);"></div>  |
+| Token                 | Value                                      | Example                                                                         |
+| --------------------- | ------------------------------------------ | ------------------------------------------------------------------------------- |
+| `--wa-border-style`   | `solid`                                    |                                                                                 |
+| `--wa-border-width-s` | `0.0625rem` (1px)                          | <div class="border-demo" style="border-width: var(--wa-border-width-s);"></div> |
+| `--wa-border-width-m` | `calc(var(--wa-border-width-s) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-m);"></div> |
+| `--wa-border-width-l` | `calc(var(--wa-border-width-s) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-l);"></div> |
 
 ## Corners
 

docs/pages/tokens/more.md

@@ -10,10 +10,10 @@ meta:
 
 Focus ring tokens control the appearance of focus rings.
 
-| Token                    | Value                                                      |
-| ------------------------ | ---------------------------------------------------------- |
-| `--wa-focus-ring`        | `solid var(--wa-border-width-thick) var(--wa-color-focus)` |
-| `--wa-focus-ring-offset` | `0.0625rem` (1px)                                          |
+| Token                    | Value                                                  |
+| ------------------------ | ------------------------------------------------------ |
+| `--wa-focus-ring`        | `solid var(--wa-border-width-l) var(--wa-color-focus)` |
+| `--wa-focus-ring-offset` | `0.0625rem` (1px)                                      |
 
 ## Form Controls
 
@@ -23,7 +23,7 @@ Form control tokens control the appearance of form controls such as [input](/com
 | -------------------------------------- | ------------------------------------------ |
 | `--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-border-width`      | `var(--wa-border-width-s)`                 |
 | `--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)`       |

docs/pages/tokens/typography.md

@@ -23,16 +23,18 @@ The default font stack is designed to be simple and highly available on as many
 
 Font sizes use `rem` units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
 
-| Token                 | Value           | Example                                                     |
-| --------------------- | --------------- | ----------------------------------------------------------- |
-| `--wa-font-size-root` | 16px            | <span style="font-size: var(--wa-font-size-root)">Aa</span> |
-| `--wa-font-size-2xs`  | 0.625rem (10px) | <span style="font-size: var(--wa-font-size-2xs)">Aa</span>  |
-| `--wa-font-size-xs`   | 0.75rem (12px)  | <span style="font-size: var(--wa-font-size-xs)">Aa</span>   |
-| `--wa-font-size-s`    | 0.875rem (14px) | <span style="font-size: var(--wa-font-size-s)">Aa</span>    |
-| `--wa-font-size-m`    | 1rem (16px)     | <span style="font-size: var(--wa-font-size-m)">Aa</span>    |
-| `--wa-font-size-l`    | 1.375rem (22px) | <span style="font-size: var(--wa-font-size-l)">Aa</span>    |
-| `--wa-font-size-xl`   | 1.875rem (30px) | <span style="font-size: var(--wa-font-size-xl)">Aa</span>   |
-| `--wa-font-size-2xl`  | 2.625rem (42px) | <span style="font-size: var(--wa-font-size-2xl)">Aa</span>  |
+| Token                 | Value            | Example                                                       |
+| --------------------- | ---------------- | ------------------------------------------------------------- |
+| `--wa-font-size-root` | 16px             | <span style="font-size: var(--wa-font-size-root)">AaBb</span> |
+| `--wa-font-size-2xs`  | 0.6875rem (11px) | <span style="font-size: var(--wa-font-size-xs)">AaBb</span>   |
+| `--wa-font-size-xs`   | 0.75rem (12px)   | <span style="font-size: var(--wa-font-size-xs)">AaBb</span>   |
+| `--wa-font-size-s`    | 0.875rem (14px)  | <span style="font-size: var(--wa-font-size-s)">AaBb</span>    |
+| `--wa-font-size-m`    | 1rem (16px)      | <span style="font-size: var(--wa-font-size-m)">AaBb</span>    |
+| `--wa-font-size-l`    | 1.25rem (20px)   | <span style="font-size: var(--wa-font-size-l)">AaBb</span>    |
+| `--wa-font-size-xl`   | 1.625rem (26px)  | <span style="font-size: var(--wa-font-size-xl)">AaBb</span>   |
+| `--wa-font-size-2xl`  | 2rem (32px)      | <span style="font-size: var(--wa-font-size-2xl)">AaBb</span>  |
+| `--wa-font-size-3xl`  | 2.5625rem (41px) | <span style="font-size: var(--wa-font-size-3xl)">AaBb</span>  |
+| `--wa-font-size-4xl`  | 3.25rem (52px)   | <span style="font-size: var(--wa-font-size-4xl)">AaBb</span>  |
 
 ## Font Weight
 
@@ -47,8 +49,8 @@ Font sizes use `rem` units so they scale with the base font size. The pixel valu
 
 ## Line Height
 
-| Token                          | Value | Example                                                                                                                                                                                                            |
-| ------------------------------ | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `--wa-line-height-compact`     | 1.25  | <div style="line-height: var(--wa-line-height-compact);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>     |
-| `--wa-line-height-regular`     | 1.625 | <div style="line-height: var(--wa-line-height-regular);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>     |
-| `--wa-line-height-comfortable` | 2     | <div style="line-height: var(--wa-line-height-comfortable);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
+| Token                          | Value | Example                                                                                                                                                                                                                 |
+| ------------------------------ | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--wa-line-height-compact`     | 1.25  | <div style="line-height: var(--wa-font-line-height-compact);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>     |
+| `--wa-line-height-regular`     | 1.6   | <div style="line-height: var(--wa-font-line-height-regular);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>     |
+| `--wa-line-height-comfortable` | 2     | <div style="line-height: var(--wa-font-line-height-comfortable);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "@shoelace-style/shoelace",
       "version": "2.8.0",
+      "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^4.0.2",
@@ -39,6 +40,7 @@
         "cspell": "^6.18.1",
         "custom-element-jet-brains-integration": "^1.4.0",
         "custom-element-vs-code-integration": "^1.2.1",
+        "custom-element-vuejs-integration": "^1.0.0",
         "del": "^7.1.0",
         "download": "^8.0.0",
         "esbuild": "^0.19.4",
@@ -6760,6 +6762,30 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/custom-element-vuejs-integration": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-element-vuejs-integration/-/custom-element-vuejs-integration-1.0.1.tgz",
+      "integrity": "sha512-whoB5DqPNIxaltlvTuOXrP543o5dHKV1ae3a3qFHwKKKwDSCU9vtTOIZpZ4NdRmBPDbaCOgQvYxCJmjdDXrC+g==",
+      "dev": true,
+      "dependencies": {
+        "prettier": "^2.7.1"
+      }
+    },
+    "node_modules/custom-element-vuejs-integration/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/custom-elements-manifest": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",
@@ -23702,6 +23728,23 @@
         }
       }
     },
+    "custom-element-vuejs-integration": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-element-vuejs-integration/-/custom-element-vuejs-integration-1.0.1.tgz",
+      "integrity": "sha512-whoB5DqPNIxaltlvTuOXrP543o5dHKV1ae3a3qFHwKKKwDSCU9vtTOIZpZ4NdRmBPDbaCOgQvYxCJmjdDXrC+g==",
+      "dev": true,
+      "requires": {
+        "prettier": "^2.7.1"
+      },
+      "dependencies": {
+        "prettier": {
+          "version": "2.8.8",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+          "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+          "dev": true
+        }
+      }
+    },
     "custom-elements-manifest": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",

package.json

@@ -45,6 +45,7 @@
     "start": "node scripts/build.js --serve",
     "build": "node scripts/build.js",
     "verify": "npm run prettier:check && npm run lint && npm run build && npm run test",
+    "postinstall": "npx playwright install",
     "prepublishOnly": "npm run verify",
     "prettier": "prettier --write --log-level warn .",
     "prettier:check": "prettier --check --log-level warn .",
@@ -92,6 +93,7 @@
     "cspell": "^6.18.1",
     "custom-element-jet-brains-integration": "^1.4.0",
     "custom-element-vs-code-integration": "^1.2.1",
+    "custom-element-vuejs-integration": "^1.0.0",
     "del": "^7.1.0",
     "download": "^8.0.0",
     "esbuild": "^0.19.4",

scripts/build.js

@@ -212,17 +212,6 @@ await nextTask(`Copying CDN files to "${cdndir}"`, async () => {
   await copy(outdir, cdndir);
 });
 
-// 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 () => {
-    await deleteAsync(sitedir);
-
-    // We copy the CDN build because that has everything bundled. Yes this looks weird.
-    // But if we do "/cdn" it requires changes all the docs to do /cdn instead of /dist.
-    await copy(cdndir, path.join(sitedir, 'dist'));
-  });
-}
-
 await nextTask('Building source files', async () => {
   buildResults = await buildTheSource();
 });
@@ -303,7 +292,17 @@ if (serve) {
 
 // Build for production
 if (!serve) {
-  await nextTask('Building the docs', async () => await buildTheDocs());
+  // Copy the CDN build to the docs (prod only; we use a virtual directory in dev)
+  await nextTask(`Copying the build to "${sitedir}"`, async () => {
+    await deleteAsync(sitedir);
+
+    // We copy the CDN build because that has everything bundled. Yes this looks weird.
+    // But if we do "/cdn" it requires changes all the docs to do /cdn instead of /dist.
+    await copy(cdndir, path.join(sitedir, 'dist'));
+  });
+  await nextTask('Building the docs', async () => {
+    await buildTheDocs();
+  });
 }
 
 // Cleanup on exit

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 '../../events/events';`)
+    .map(event => `import type { ${event.eventName} } from '../../events/events.js';`)
     .join('\n');
   const eventExports = (component.events || [])
-    .map(event => `export type { ${event.eventName} } from '../../events/events';`)
+    .map(event => `export type { ${event.eventName} } from '../../events/events.js';`)
     .join('\n');
   const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
   const events = (component.events || [])

src/components/animation/animation.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/webawesome.js';
-import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { aTimeout, expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
 import type WaAnimation from './animation.js';
 
 describe('<wa-animation>', () => {

src/components/badge/badge.component.ts

@@ -14,6 +14,13 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The badge's content.
  *
  * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --background - The badge's background styles.
+ * @cssproperty --border-color - The color of the badge's border.
+ * @cssproperty --border-radius - The radius of the badge's corners.
+ * @cssproperty --border-style - The style of the badge's border.
+ * @cssproperty --border-width - The width of the badge's border.
+ * @cssproperty --content-color - The color of the badge's content.
  */
 export default class WaBadge extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;

src/components/badge/badge.styles.ts

@@ -5,9 +5,39 @@ export default css`
   ${componentStyles}
 
   :host {
+    --border-color: var(--wa-color-surface-default);
+    --border-radius: var(--wa-corners-xs);
+    --border-style: var(--wa-border-style);
+    --border-width: var(--wa-border-width-s);
+
     display: inline-flex;
   }
 
+  :host([variant='brand']) {
+    --background: var(--wa-color-brand-spot);
+    --content-color: var(--wa-color-brand-text-on-spot);
+  }
+
+  :host([variant='success']) {
+    --background: var(--wa-color-success-spot);
+    --content-color: var(--wa-color-success-text-on-spot);
+  }
+
+  :host([variant='warning']) {
+    --background: var(--wa-color-warning-spot);
+    --content-color: var(--wa-color-warning-text-on-spot);
+  }
+
+  :host([variant='neutral']) {
+    --background: var(--wa-color-neutral-spot);
+    --content-color: var(--wa-color-neutral-text-on-spot);
+  }
+
+  :host([variant='danger']) {
+    --background: var(--wa-color-danger-spot);
+    --content-color: var(--wa-color-danger-text-on-spot);
+  }
+
   .badge {
     display: inline-flex;
     align-items: center;
@@ -15,8 +45,12 @@ export default css`
     font-size: max(12px, 0.75em);
     font-weight: var(--wa-font-weight-medium);
     line-height: 1;
-    border-radius: var(--wa-corners-xs);
-    border: solid 1px var(--wa-color-surface-default);
+    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);
     white-space: nowrap;
     padding: 0.35em 0.6em;
     user-select: none;
@@ -24,32 +58,6 @@ export default css`
     cursor: inherit;
   }
 
-  /* Variant modifiers */
-  .badge--brand {
-    background-color: var(--wa-color-brand-spot);
-    color: var(--wa-color-brand-text-on-spot);
-  }
-
-  .badge--success {
-    background-color: var(--wa-color-success-spot);
-    color: var(--wa-color-success-text-on-spot);
-  }
-
-  .badge--neutral {
-    background-color: var(--wa-color-neutral-spot);
-    color: var(--wa-color-neutral-text-on-spot);
-  }
-
-  .badge--warning {
-    background-color: var(--wa-color-warning-spot);
-    color: var(--wa-color-warning-text-on-spot);
-  }
-
-  .badge--danger {
-    background-color: var(--wa-color-danger-spot);
-    color: var(--wa-color-danger-text-on-spot);
-  }
-
   /* Pill modifier */
   .badge--pill {
     border-radius: var(--wa-corners-pill);

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

@@ -63,12 +63,12 @@ export default css`
 
   .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
     display: inline-flex;
-    margin-inline-end: var(--wa-space-xs);
+    margin-inline-end: var(--wa-space-s);
   }
 
   .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
     display: inline-flex;
-    margin-inline-start: var(--wa-space-xs);
+    margin-inline-start: var(--wa-space-s);
   }
 
   :host(:last-of-type) .breadcrumb-item__separator {
@@ -78,7 +78,7 @@ export default css`
   .breadcrumb-item__separator {
     display: inline-flex;
     align-items: center;
-    margin: 0 var(--wa-space-xs);
+    margin: 0 var(--wa-space-s);
     user-select: none;
     -webkit-user-select: none;
   }

src/components/button/button.styles.ts

@@ -304,8 +304,8 @@ export default css`
   }
 
   .button--caret .button__caret::part(svg) {
-    width: 0.75em;
-    height: 0.75em;
+    width: 0.875em;
+    height: 0.875em;
   }
 
   /*
@@ -446,7 +446,7 @@ export default css`
 
   /* All except the first */
   :host(.wa-button-group__button:not(.wa-button-group__button--first)) {
-    margin-inline-start: calc(-1 * var(--wa-border-width-thin));
+    margin-inline-start: calc(-1 * var(--wa-border-width-s));
   }
 
   /* Add a visual separator between solid buttons */

src/components/card/card.styles.ts

@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --background: var(--wa-color-surface-raised);
+    --background: var(--wa-color-surface-default);
     --border-color: var(--wa-color-surface-border);
     --border-radius: var(--wa-panel-corners);
     --border-style: var(--wa-panel-border-style);

src/components/carousel/carousel.component.ts

@@ -41,10 +41,13 @@ import type WaCarouselItem from '../carousel-item/carousel-item.component.js';
  * @csspart navigation-button--previous - Applied to the previous button.
  * @csspart navigation-button--next - Applied to the next button.
  *
- * @cssproperty --slide-gap - The space between each slide.
  * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide.
+ * @cssproperty --navigation-color - The color of the navigation buttons.
+ * @cssproperty --pagination-color-activated - The color of the pagination dot for the current item.
+ * @cssproperty --pagination-color-resting - The color of the pagination dots for inactive items.
  * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become
  *  partially visible as a scroll hint.
+ * @cssproperty --slide-gap - The space between each slide.
  */
 export default class WaCarousel extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;

src/components/carousel/carousel.styles.ts

@@ -5,9 +5,12 @@ export default css`
   ${componentStyles}
 
   :host {
-    --slide-gap: var(--wa-space-m, 1rem);
     --aspect-ratio: 16 / 9;
+    --navigation-color: var(--wa-color-text-quiet);
+    --pagination-color-activated: var(--wa-form-controls-activated-color);
+    --pagination-color-resting: var(--wa-form-controls-resting-color);
     --scroll-hint: 0px;
+    --slide-gap: var(--wa-space-m, 1rem);
 
     display: flex;
   }
@@ -95,7 +98,7 @@ export default css`
   .carousel__navigation {
     grid-area: navigation;
     display: contents;
-    font-size: var(--wa-font-size-xl);
+    font-size: var(--wa-font-size-l);
   }
 
   .carousel__navigation-button {
@@ -106,7 +109,7 @@ export default css`
     border: none;
     border-radius: var(--wa-corners-s);
     font-size: inherit;
-    color: var(--wa-color-text-quiet);
+    color: var(--navigation-color);
     padding: var(--wa-space-xs);
     cursor: pointer;
     transition: var(--wa-transition-fast) color;
@@ -140,14 +143,15 @@ 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-highlight);
+    background-color: var(--pagination-color-resting);
     padding: 0;
     margin: 0;
+    transition: transform var(--wa-transition-normal);
   }
 
   .carousel__pagination-item--active {
-    background-color: var(--wa-color-brand-spot);
-    transform: scale(1.2);
+    background-color: var(--pagination-color-activated);
+    transform: scale(1.25);
   }
 
   /* Focus styles */

src/components/checkbox/checkbox.component.ts

@@ -35,6 +35,15 @@ import type { WebAwesomeFormControl } from '../../internal/webawesome-element.js
  * @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.
+ *
+ * @cssproperty --background - The checkbox's background styles.
+ * @cssproperty --background-checked - The checkbox's background styles when checked.
+ * @cssproperty --border-color - The color of the checkbox's borders.
+ * @cssproperty --border-color-checked - The color of the checkbox's borders when checked.
+ * @cssproperty --border-radius - The border radius of the checkbox's corners.
+ * @cssproperty --border-style - The style of the checkbox's borders.
+ * @cssproperty --border-width - The width of the checkbox's borders. Expects a single value.
+ * @cssproperty --box-shadow - The shadow effects around the edges of the checkbox.
  */
 export default class WaCheckbox extends WebAwesomeElement implements WebAwesomeFormControl {
   static styles: CSSResultGroup = styles;

src/components/checkbox/checkbox.styles.ts

@@ -5,6 +5,15 @@ export default css`
   ${componentStyles}
 
   :host {
+    --background: var(--wa-form-controls-background);
+    --background-checked: var(--wa-form-controls-activated-color);
+    --border-color: var(--wa-form-controls-resting-color);
+    --border-color-checked: var(--wa-form-controls-activated-color);
+    --border-radius: min(0.375rem, var(--wa-corners-xs)); /* min so it doesn't look like a circle/radio */
+    --border-style: var(--wa-border-style);
+    --border-width: var(--wa-form-controls-border-width);
+    --box-shadow: none;
+
     display: inline-block;
   }
 
@@ -41,9 +50,12 @@ 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-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);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    background: var(--background);
+    box-shadow: var(--box-shadow);
     color: var(--wa-form-controls-value-color);
     transition:
       var(--wa-transition-fast) border-color,
@@ -78,8 +90,8 @@ export default css`
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
     color: var(--wa-color-brand-text-on-spot);
-    border-color: var(--wa-form-controls-activated-color);
-    background-color: var(--wa-form-controls-activated-color);
+    border-color: var(--border-color-checked);
+    background: var(--background-checked);
   }
 
   /* Checked/indeterminate + focus */

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

@@ -667,7 +667,7 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
 
   /** Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100. */
   private getHexString(hue: number, saturation: number, brightness: number, alpha = 100) {
-    const color = new TinyColor(`hsva(${hue}, ${saturation}, ${brightness}, ${alpha / 100})`);
+    const color = new TinyColor(`hsva(${hue}, ${saturation}%, ${brightness}%, ${alpha / 100})`);
     if (!color.isValid) {
       return '';
     }

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

@@ -26,7 +26,7 @@ export default css`
   }
 
   .color-picker--inline {
-    border: var(--wa-form-controls-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+    border: var(--wa-form-controls-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
   }
 
   .color-picker--inline:focus-visible {
@@ -273,7 +273,7 @@ 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-border);
+    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
     border-radius: var(--wa-corners-s);
     overflow: visible;
   }

src/components/details/details.component.ts

@@ -35,6 +35,14 @@ import type { CSSResultGroup } from 'lit';
  * @csspart summary-icon - The container that wraps the expand/collapse icons.
  * @csspart content - The details content.
  *
+ * @cssproperty --background - The details' background styles.
+ * @cssproperty --border-color - The details' border color.
+ * @cssproperty --border-radius - The border radius for the details' corners. Expects a single value.
+ * @cssproperty --border-style - The style of the details' borders.
+ * @cssproperty --border-width - The width of the details' borders. Expects a single value.
+ * @cssproperty --icon-color - The color of the details' icon.
+ * @cssproperty --padding - The padding with the details. Expects a single value.
+ *
  * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
  * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
  */

src/components/details/details.styles.ts

@@ -5,13 +5,23 @@ export default css`
   ${componentStyles}
 
   :host {
+    --background: var(--wa-color-surface-default);
+    --border-color: var(--wa-color-surface-border);
+    --border-radius: var(--wa-panel-corners);
+    --border-style: var(--wa-panel-border-style);
+    --border-width: var(--wa-panel-border-width);
+    --icon-color: var(--wa-color-text-quiet);
+    --padding: var(--wa-space-m);
+
     display: block;
   }
 
   .details {
-    border: solid 1px var(--wa-color-surface-border);
-    border-radius: var(--wa-panel-corners);
-    background-color: var(--wa-color-surface-default);
+    background: var(--background);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
     overflow-anchor: none;
   }
 
@@ -22,7 +32,7 @@ export default css`
   .details__header {
     display: flex;
     align-items: center;
-    padding: var(--wa-space-m);
+    padding: var(--padding);
     user-select: none;
     -webkit-user-select: none;
     cursor: pointer;
@@ -60,6 +70,7 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
+    color: var(--icon-color);
     transition: var(--wa-transition-fast) rotate ease;
   }
 
@@ -82,6 +93,6 @@ export default css`
 
   .details__content {
     display: block;
-    padding: var(--wa-space-m);
+    padding: var(--padding);
   }
 `;

src/components/details/details.test.ts

@@ -2,9 +2,9 @@ import '../../../dist/webawesome.js';
 // cspell:dictionaries lorem-ipsum
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type { WaHideEvent } from '../../events/wa-hide';
-import type { WaShowEvent } from '../../events/wa-show';
-import type WaDetails from './details';
+import type { WaHideEvent } from '../../events/wa-hide.js';
+import type { WaShowEvent } from '../../events/wa-show.js';
+import type WaDetails from './details.js';
 
 describe('<wa-details>', () => {
   describe('accessibility', () => {

src/components/dialog/dialog.component.ts

@@ -300,9 +300,9 @@ export default class WaDialog extends WebAwesomeElement {
               `
             : ''}
           ${
-            '' /* The tabindex="-1" is here because the body is technically scrollable if overflowing. However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard. */
+            '' /* The tabindex="-1" is here because the body is technically scrollable if overflowing. However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard. Previously this was just a <slot>, but tabindex="-1" on the slot causes children to not be focusable. https://github.com/shoelace-style/shoelace/issues/1753#issuecomment-1836803277 */
           }
-          <slot part="body" class="dialog__body" tabindex="-1"></slot>
+          <div part="body" class="dialog__body" tabindex="-1"><slot></slot></div>
 
           <footer part="footer" class="dialog__footer">
             <slot name="footer"></slot>

src/components/dialog/dialog.styles.ts

@@ -32,7 +32,7 @@ export default css`
     width: var(--width);
     max-width: calc(100% - var(--wa-space-2xl));
     max-height: calc(100% - var(--wa-space-2xl));
-    background-color: var(--wa-color-surface-raised);
+    background-color: var(--wa-color-surface-default);
     border-radius: var(--wa-panel-corners);
     box-shadow: var(--wa-shadow-level-3);
   }

src/components/dialog/dialog.test.ts

@@ -1,10 +1,10 @@
 import '../../../dist/webawesome.js';
 // cspell:dictionaries lorem-ipsum
-import { aTimeout, elementUpdated, expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { LitElement } from 'lit';
+import { aTimeout, elementUpdated, expect, fixture, waitUntil } from '@open-wc/testing';
+import { html, LitElement } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type WaDialog from './dialog';
+import type WaDialog from './dialog.js';
 
 describe('<wa-dialog>', () => {
   it('should be visible with the open attribute', async () => {

src/components/divider/divider.styles.ts

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

src/components/drawer/drawer.test.ts

@@ -3,7 +3,7 @@ import '../../../dist/webawesome.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type WaDrawer from './drawer';
+import type WaDrawer from './drawer.js';
 
 describe('<wa-drawer>', () => {
   it('should be visible with the open attribute', async () => {

src/components/format-bytes/format-bytes.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import type WaFormatBytes from './format-bytes';
+import type WaFormatBytes from './format-bytes.js';
 
 describe('<wa-format-bytes>', () => {
   describe('defaults ', () => {

src/components/format-date/format-date.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type WaFormatDate from './format-date';
+import type WaFormatDate from './format-date.js';
 
 describe('<wa-format-date>', () => {
   describe('defaults ', () => {

src/components/format-number/format-number.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type WaFormatNumber from './format-number';
+import type WaFormatNumber from './format-number.js';
 
 describe('<wa-format-number>', () => {
   describe('defaults ', () => {

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

@@ -1,7 +1,7 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type WaIconButton from './icon-button';
+import type WaIconButton from './icon-button.js';
 
 type LinkTarget = '_self' | '_blank' | '_parent' | '_top';
 

src/components/icon/icon.test.ts

@@ -1,8 +1,8 @@
 import { aTimeout, elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { registerIconLibrary } from '../../../dist/webawesome.js';
-import type { WaErrorEvent } from '../../events/wa-error';
-import type { WaLoadEvent } from '../../events/wa-load';
-import type WaIcon from './icon';
+import type { WaErrorEvent } from '../../events/wa-error.js';
+import type { WaLoadEvent } from '../../events/wa-load.js';
+import type WaIcon from './icon.js';
 
 const testLibraryIcons = {
   'test-icon1': `
@@ -157,8 +157,9 @@ describe('<wa-icon>', () => {
 
   describe('svg sprite sheets', () => {
     //  For some reason ESLint wants to fail in CI here, but works locally.
+    // TODO: this test is skipped because Bootstrap sprite.svg doesn't seem to be available in CI. Will fix in a future PR. [Konnor]
     /* eslint-disable */
-    it('Should properly grab an SVG and render it from bootstrap icons', async () => {
+    it.skip('Should properly grab an SVG and render it from bootstrap icons', async () => {
       registerIconLibrary('sprite', {
         resolver: name => `/docs/assets/images/sprite.svg#${name}`,
         mutator: svg => svg.setAttribute('fill', 'currentColor'),

src/components/image-comparer/image-comparer.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type WaImageComparer from './image-comparer';
+import type WaImageComparer from './image-comparer.js';
 
 describe('<wa-image-comparer>', () => {
   it('should render a basic before/after', async () => {

src/components/include/include.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/webawesome.js';
 import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type WaInclude from './include';
+import type WaInclude from './include.js';
 
 const stubbedFetchResponse: Response = {
   headers: new Headers(),

src/components/input/input.test.ts

@@ -4,7 +4,7 @@ import { getFormControls, serialize } from '../../../dist/webawesome.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands'; // must come from the same module
 import sinon from 'sinon';
-import type WaInput from './input';
+import type WaInput from './input.js';
 
 describe('<wa-input>', () => {
   it('should pass accessibility tests', async () => {

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

@@ -100,6 +100,7 @@ export default css`
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 0.875em;
     width: var(--wa-space-xl);
     visibility: hidden;
   }

src/components/menu-item/menu-item.test.ts

@@ -2,8 +2,8 @@ import '../../../dist/webawesome.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type { WaSelectEvent } from '../../events/wa-select';
-import type WaMenuItem from './menu-item';
+import type { WaSelectEvent } from '../../events/wa-select.js';
+import type WaMenuItem from './menu-item.js';
 
 describe('<wa-menu-item>', () => {
   it('should pass accessibility tests', async () => {

src/components/menu-label/menu-label.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type WaMenuLabel from './menu-label';
+import type WaMenuLabel from './menu-label.js';
 
 describe('<wa-menu-label>', () => {
   it('passes accessibility test', async () => {

src/components/menu/menu.styles.ts

@@ -8,7 +8,7 @@ export default css`
     display: block;
     position: relative;
     background-color: var(--wa-color-surface-raised);
-    border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
+    border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
     border-radius: var(--wa-corners-s);
     padding: var(--wa-space-xs) 0;
     overflow: auto;

src/components/menu/menu.test.ts

@@ -4,8 +4,8 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type { WaSelectEvent } from '../../events/wa-select';
-import type WaMenu from './menu';
+import type { WaSelectEvent } from '../../events/wa-select.js';
+import type WaMenu from './menu.js';
 
 describe('<wa-menu>', () => {
   it('emits wa-select with the correct event detail when clicking an item', async () => {

src/components/option/option.component.ts

@@ -106,7 +106,22 @@ export default class WaOption extends WebAwesomeElement {
 
   /** Returns a plain text label based on the option's content. */
   getTextLabel() {
-    return (this.textContent ?? '').trim();
+    const nodes = this.childNodes;
+    let label = '';
+
+    [...nodes].forEach(node => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        if (!(node as HTMLElement).hasAttribute('slot')) {
+          label += (node as HTMLElement).outerHTML;
+        }
+      }
+
+      if (node.nodeType === Node.TEXT_NODE) {
+        label += node.textContent;
+      }
+    });
+
+    return label.trim();
   }
 
   render() {

src/components/option/option.styles.ts

@@ -20,7 +20,7 @@ export default css`
     align-items: center;
     font: inherit;
     color: var(--wa-color-neutral-text-on-surface);
-    padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-xs);
+    padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs);
     transition: var(--wa-transition-fast) fill;
     cursor: pointer;
   }
@@ -54,8 +54,9 @@ export default css`
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 0.875em;
     visibility: hidden;
-    padding-inline-end: var(--wa-space-2xs);
+    width: var(--wa-space-xl);
   }
 
   .option--selected .option__check {

src/components/option/option.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/webawesome.js';
 import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type WaOption from './option';
+import type WaOption from './option.js';
 
 describe('<wa-option>', () => {
   it('passes accessibility test', async () => {

src/components/progress-bar/progress-bar.component.ts

@@ -24,6 +24,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --track-color - The color of the track.
  * @cssproperty --indicator-color - The color of the indicator.
  * @cssproperty --label-color - The color of the label.
+ * @cssproperty --box-shadow - The shadow effects around the edges of the progress bar.
  */
 export default class WaProgressBar extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;

src/components/progress-bar/progress-bar.styles.ts

@@ -9,6 +9,7 @@ export default css`
     --track-color: var(--wa-color-neutral-fill-highlight);
     --indicator-color: var(--wa-color-brand-spot);
     --label-color: var(--wa-color-brand-text-on-spot);
+    --box-shadow: none;
 
     display: block;
   }
@@ -18,7 +19,7 @@ export default css`
     background-color: var(--track-color);
     height: var(--height);
     border-radius: var(--wa-corners-pill);
-    box-shadow: var(--wa-shadow-inset);
+    box-shadow: var(--box-shadow);
     overflow: hidden;
   }
 

src/components/progress-bar/progress-bar.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type WaProgressBar from './progress-bar';
+import type WaProgressBar from './progress-bar.js';
 
 describe('<wa-progress-bar>', () => {
   let el: WaProgressBar;

src/components/progress-ring/progress-ring.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type WaProgressRing from './progress-ring';
+import type WaProgressRing from './progress-ring.js';
 
 describe('<wa-progress-ring>', () => {
   let el: WaProgressRing;

src/components/qr-code/qr-code.component.ts

@@ -51,7 +51,7 @@ export default class WaQrCode extends WebAwesomeElement {
       return;
     }
 
-    QrCreator.render(
+    (QrCreator as unknown as typeof QrCreator.default).render(
       {
         text: this.value,
         radius: this.radius,

src/components/qr-code/qr-code.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type WaQrCode from './qr-code';
+import type WaQrCode from './qr-code.js';
 
 const getCanvas = (qrCode: WaQrCode): HTMLCanvasElement => {
   const possibleCanvas = qrCode.shadowRoot?.querySelector<HTMLCanvasElement>('.qr-code');

src/components/radio-button/radio-button.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type WaRadioButton from './radio-button';
-import type WaRadioGroup from '../radio-group/radio-group';
+import type WaRadioButton from './radio-button.js';
+import type WaRadioGroup from '../radio-group/radio-group.js';
 
 describe('<wa-radio-button>', () => {
   it('should not get checked when disabled', async () => {

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

@@ -28,6 +28,7 @@ import type WaRadioButton from '../radio-button/radio-button.js';
  * @slot - The default slot where `<wa-radio>` or `<wa-radio-button>` elements are placed.
  * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
  *  attribute.
+ * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
  *
  * @event wa-change - Emitted when the radio group's selected value changes.
  * @event wa-input - Emitted when the radio group receives user input.
@@ -130,7 +131,7 @@ export default class WaRadioGroup extends WebAwesomeElement implements WebAwesom
     const radios = this.getAllRadios();
     const oldValue = this.value;
 
-    if (target.disabled) {
+    if (!target || target.disabled) {
       return;
     }
 
@@ -218,7 +219,7 @@ export default class WaRadioGroup extends WebAwesomeElement implements WebAwesom
 
     this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'wa-radio-button');
 
-    if (!radios.some(radio => radio.checked)) {
+    if (radios.length > 0 && !radios.some(radio => radio.checked)) {
       if (this.hasButtonGroup) {
         const buttonRadio = radios[0].shadowRoot?.querySelector('button');
 

src/components/radio/radio.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type WaRadio from './radio';
-import type WaRadioGroup from '../radio-group/radio-group';
+import type WaRadio from './radio.js';
+import type WaRadioGroup from '../radio-group/radio-group.js';
 
 describe('<wa-radio>', () => {
   it('should not get checked when disabled', async () => {

src/components/select/select.styles.ts

@@ -274,6 +274,8 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
+    color: var(--wa-color-text-quiet);
+    font-size: 0.875em;
     transition: rotate var(--wa-transition-normal) ease;
     rotate: 0;
     margin-inline-start: var(--wa-space-s);

src/components/select/select.test.ts

@@ -547,8 +547,10 @@ describe('<wa-select>', () => {
     el.addEventListener('wa-change', changeHandler);
     el.addEventListener('wa-input', inputHandler);
 
-    await clickOnElement(removeButton);
+    // The offsets are a funky hack for Firefox.
+    await clickOnElement(removeButton, 'center', 1, 1);
     await el.updateComplete;
+    await aTimeout(1);
 
     expect(changeHandler).to.have.been.calledOnce;
     expect(inputHandler).to.have.been.calledOnce;

src/components/skeleton/skeleton.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type WaSkeleton from './skeleton';
+import type WaSkeleton from './skeleton.js';
 
 describe('<wa-skeleton>', () => {
   it('should render default skeleton', async () => {

src/components/spinner/spinner.styles.ts

@@ -1,6 +1,11 @@
 import { css } from 'lit';
 import componentStyles from '../../styles/component.styles.js';
 
+// Resizing a spinner element using anything but font-size will break the animation because the animation uses em units.
+// Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and
+// break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized
+// according to its actual dimensions.
+
 export default css`
   ${componentStyles}
 
@@ -13,6 +18,7 @@ export default css`
     display: inline-flex;
     width: 1em;
     height: 1em;
+    flex: none;
   }
 
   .spinner {
@@ -46,7 +52,7 @@ export default css`
   @keyframes spin {
     0% {
       transform: rotate(0deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 0.05em, 3em;
     }
 
     50% {
@@ -56,7 +62,7 @@ export default css`
 
     100% {
       transform: rotate(1080deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 0.05em, 3em;
     }
   }
 `;

src/components/spinner/spinner.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type WaSpinner from './spinner';
+import type WaSpinner from './spinner.js';
 
 describe('<wa-spinner>', () => {
   describe('when provided no parameters', () => {
@@ -27,5 +27,12 @@ describe('<wa-spinner>', () => {
       //
       expect(getComputedStyle(indicator).transform).to.equal('matrix(1, 0, 0, 1, 0, 0)');
     });
+
+    it('should have flex:none to prevent flex re-sizing', async () => {
+      const spinner = await fixture<WaSpinner>(html` <wa-spinner></wa-spinner> `);
+
+      // 0 0 auto is a compiled value for `none`
+      expect(getComputedStyle(spinner).flex).to.equal('0 0 auto');
+    });
   });
 });

src/components/tab-panel/tab-panel.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { aTimeout, expect, fixture, html } from '@open-wc/testing';
-import type WaTabPanel from './tab-panel';
+import type WaTabPanel from './tab-panel.js';
 
 describe('<wa-tab-panel>', () => {
   it('passes accessibility test', async () => {

src/components/tab/tab.styles.ts

@@ -35,7 +35,7 @@ export default css`
 
   .tab:focus-visible {
     outline: var(--wa-focus-ring);
-    outline-offset: calc(-1 * var(--wa-border-width-thick) - var(--wa-focus-ring-offset));
+    outline-offset: calc(-1 * var(--wa-border-width-l) - var(--wa-focus-ring-offset));
   }
 
   .tab.tab--active:not(.tab--disabled) {

src/components/tab/tab.test.ts

@@ -1,9 +1,9 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type WaIconButton from '../icon-button/icon-button';
-import type WaTab from './tab';
-import type WaTabGroup from '../tab-group/tab-group';
+import type WaIconButton from '../icon-button/icon-button.js';
+import type WaTab from './tab.js';
+import type WaTabGroup from '../tab-group/tab-group.js';
 
 describe('<wa-tab>', () => {
   it('passes accessibility test', async () => {

src/components/tag/tag.component.ts

@@ -23,6 +23,13 @@ import type { CSSResultGroup } from 'lit';
  * @csspart content - The tag's content.
  * @csspart remove-button - The tag's remove button, an `<wa-icon-button>`.
  * @csspart remove-button__base - The remove button's exported `base` part.
+ *
+ * @cssproperty --background - The tag's background styles.
+ * @cssproperty --border-color - The color of the tag's border.
+ * @cssproperty --border-radius - The radius of the tag's corners.
+ * @cssproperty --border-style - The style of the tag's border.
+ * @cssproperty --border-width - The width of the tag's border.
+ * @cssproperty --content-color - The color of the tag's content.
  */
 export default class WaTag extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;
@@ -80,7 +87,7 @@ export default class WaTag extends WebAwesomeElement {
                 exportparts="base:remove-button__base"
                 name="xmark"
                 library="system"
-                variant="regular"
+                variant="solid"
                 label=${this.localize.term('remove')}
                 class="tag__remove"
                 @click=${this.handleRemoveClick}

src/components/tag/tag.styles.ts

@@ -5,13 +5,52 @@ export default css`
   ${componentStyles}
 
   :host {
+    --border-radius: var(--wa-corners-xs);
+    --border-style: var(--wa-border-style);
+    --border-width: var(--wa-border-width-s);
+
     display: inline-block;
   }
 
+  :host([variant='brand']) {
+    --background: var(--wa-color-brand-fill-subtle);
+    --border-color: var(--wa-color-brand-border-highlight);
+    --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-highlight);
+    --content-color: var(--wa-color-success-text-on-fill);
+  }
+
+  :host([variant='warning']) {
+    --background: var(--wa-color-warning-fill-subtle);
+    --border-color: var(--wa-color-warning-border-highlight);
+    --content-color: var(--wa-color-warning-text-on-fill);
+  }
+
+  :host([variant='neutral']) {
+    --background: var(--wa-color-neutral-fill-subtle);
+    --border-color: var(--wa-color-neutral-border-highlight);
+    --content-color: var(--wa-color-neutral-text-on-fill);
+  }
+
+  :host([variant='danger']) {
+    --background: var(--wa-color-danger-fill-subtle);
+    --border-color: var(--wa-color-danger-border-highlight);
+    --content-color: var(--wa-color-danger-text-on-fill);
+  }
+
   .tag {
     display: flex;
     align-items: center;
-    border: solid var(--wa-border-width-thin);
+    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);
     line-height: 1;
     white-space: nowrap;
     user-select: none;
@@ -23,58 +62,8 @@ export default css`
     padding: 0;
   }
 
-  /*
-   * Variant modifiers
-   */
-
-  .tag--brand {
-    background-color: var(--wa-color-brand-fill-subtle);
-    border-color: var(--wa-color-brand-border-highlight);
-    color: var(--wa-color-brand-text-on-fill);
-  }
-
-  .tag--brand:active > wa-icon-button {
-    color: var(--wa-color-brand-text-on-fill);
-  }
-
-  .tag--success {
-    background-color: var(--wa-color-success-fill-subtle);
-    border-color: var(--wa-color-success-border-highlight);
-    color: var(--wa-color-success-text-on-fill);
-  }
-
-  .tag--success:active > wa-icon-button {
-    color: var(--wa-color-success-text-on-fill);
-  }
-
-  .tag--neutral {
-    background-color: var(--wa-color-neutral-fill-subtle);
-    border-color: var(--wa-color-neutral-border-highlight);
-    color: var(--wa-color-neutral-text-on-fill);
-  }
-
-  .tag--neutral:active > wa-icon-button {
-    color: var(--wa-color-neutral-text-on-fill);
-  }
-
-  .tag--warning {
-    background-color: var(--wa-color-warning-fill-subtle);
-    border-color: var(--wa-color-warning-border-highlight);
-    color: var(--wa-color-warning-text-on-fill);
-  }
-
-  .tag--warning:active > wa-icon-button {
-    color: var(--wa-color-warning-text-on-fill);
-  }
-
-  .tag--danger {
-    background-color: var(--wa-color-danger-fill-subtle);
-    border-color: var(--wa-color-danger-border-highlight);
-    color: var(--wa-color-danger-text-on-fill);
-  }
-
-  .tag--danger:active > wa-icon-button {
-    color: var(--wa-color-danger-text-on-fill);
+  .tag:active > wa-icon-button {
+    color: var(--content-color);
   }
 
   /*
@@ -83,24 +72,6 @@ export default css`
 
   .tag--small {
     font-size: var(--wa-font-size-xs);
-    border-radius: var(--wa-corners-s);
-    padding: var(--wa-space-3xs) var(--wa-space-2xs);
-  }
-
-  .tag--medium {
-    font-size: var(--wa-font-size-s);
-    border-radius: var(--wa-corners-s);
-    padding: var(--wa-space-2xs) var(--wa-space-xs);
-  }
-
-  .tag--large {
-    font-size: var(--wa-font-size-m);
-    border-radius: var(--wa-corners-s);
-    padding: var(--wa-space-2xs) var(--wa-space-xs);
-  }
-
-  .tag--small {
-    font-size: var(--wa-font-size-s);
     height: calc(var(--wa-form-controls-height-s) * 0.8);
     line-height: calc(var(--wa-form-controls-height-s) - var(--wa-form-controls-border-width) * 2);
     border-radius: var(--wa-corners-s);
@@ -108,7 +79,7 @@ export default css`
   }
 
   .tag--medium {
-    font-size: var(--wa-font-size-m);
+    font-size: var(--wa-font-size-s);
     height: calc(var(--wa-form-controls-height-m) * 0.8);
     line-height: calc(var(--wa-form-controls-height-m) - var(--wa-form-controls-border-width) * 2);
     border-radius: var(--wa-corners-s);
@@ -116,7 +87,7 @@ export default css`
   }
 
   .tag--large {
-    font-size: var(--wa-font-size-l);
+    font-size: var(--wa-font-size-m);
     height: calc(var(--wa-form-controls-height-l) * 0.8);
     line-height: calc(var(--wa-form-controls-height-l) - var(--wa-form-controls-border-width) * 2);
     border-radius: var(--wa-corners-s);

src/components/tag/tag.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type WaTag from './tag';
+import type WaTag from './tag.js';
 
 describe('<wa-tag>', () => {
   it('should render default tag', async () => {

src/components/tooltip/tooltip.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type WaTooltip from './tooltip';
+import type WaTooltip from './tooltip.js';
 
 describe('<wa-tooltip>', () => {
   it('should be visible with the open attribute', async () => {

src/components/tree-item/tree-item.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type WaTreeItem from './tree-item';
+import type WaTreeItem from './tree-item.js';
 
 describe('<wa-tree-item>', () => {
   let leafItem: WaTreeItem;

src/events/events.ts

@@ -1,35 +1,35 @@
-export type { WaAfterCollapseEvent } from './wa-after-collapse';
-export type { WaAfterExpandEvent } from './wa-after-expand';
-export type { WaAfterHideEvent } from './wa-after-hide';
-export type { WaAfterShowEvent } from './wa-after-show';
-export type { WaBlurEvent } from './wa-blur';
-export type { WaCancelEvent } from './wa-cancel';
-export type { WaChangeEvent } from './wa-change';
-export type { WaClearEvent } from './wa-clear';
-export type { WaCloseEvent } from './wa-close';
-export type { WaCollapseEvent } from './wa-collapse';
-export type { WaCopyEvent } from './wa-copy';
-export type { WaErrorEvent } from './wa-error';
-export type { WaExpandEvent } from './wa-expand';
-export type { WaFinishEvent } from './wa-finish';
-export type { WaFocusEvent } from './wa-focus';
-export type { WaHideEvent } from './wa-hide';
-export type { WaHoverEvent } from './wa-hover';
-export type { WaInitialFocusEvent } from './wa-initial-focus';
-export type { WaInputEvent } from './wa-input';
-export type { WaInvalidEvent } from './wa-invalid';
-export type { WaLazyChangeEvent } from './wa-lazy-change';
-export type { WaLazyLoadEvent } from './wa-lazy-load';
-export type { WaLoadEvent } from './wa-load';
-export type { WaMutationEvent } from './wa-mutation';
-export type { WaRemoveEvent } from './wa-remove';
-export type { WaRepositionEvent } from './wa-reposition';
-export type { WaRequestCloseEvent } from './wa-request-close';
-export type { WaResizeEvent } from './wa-resize';
-export type { WaSelectEvent } from './wa-select';
-export type { WaSelectionChangeEvent } from './wa-selection-change';
-export type { WaShowEvent } from './wa-show';
-export type { WaSlideChangeEvent } from './wa-slide-change';
-export type { WaStartEvent } from './wa-start';
-export type { WaTabHideEvent } from './wa-tab-hide';
-export type { WaTabShowEvent } from './wa-tab-show';
+export type { WaAfterCollapseEvent } from './wa-after-collapse.js';
+export type { WaAfterExpandEvent } from './wa-after-expand.js';
+export type { WaAfterHideEvent } from './wa-after-hide.js';
+export type { WaAfterShowEvent } from './wa-after-show.js';
+export type { WaBlurEvent } from './wa-blur.js';
+export type { WaCancelEvent } from './wa-cancel.js';
+export type { WaChangeEvent } from './wa-change.js';
+export type { WaClearEvent } from './wa-clear.js';
+export type { WaCloseEvent } from './wa-close.js';
+export type { WaCollapseEvent } from './wa-collapse.js';
+export type { WaCopyEvent } from './wa-copy.js';
+export type { WaErrorEvent } from './wa-error.js';
+export type { WaExpandEvent } from './wa-expand.js';
+export type { WaFinishEvent } from './wa-finish.js';
+export type { WaFocusEvent } from './wa-focus.js';
+export type { WaHideEvent } from './wa-hide.js';
+export type { WaHoverEvent } from './wa-hover.js';
+export type { WaInitialFocusEvent } from './wa-initial-focus.js';
+export type { WaInputEvent } from './wa-input.js';
+export type { WaInvalidEvent } from './wa-invalid.js';
+export type { WaLazyChangeEvent } from './wa-lazy-change.js';
+export type { WaLazyLoadEvent } from './wa-lazy-load.js';
+export type { WaLoadEvent } from './wa-load.js';
+export type { WaMutationEvent } from './wa-mutation.js';
+export type { WaRemoveEvent } from './wa-remove.js';
+export type { WaRepositionEvent } from './wa-reposition.js';
+export type { WaRequestCloseEvent } from './wa-request-close.js';
+export type { WaResizeEvent } from './wa-resize.js';
+export type { WaSelectEvent } from './wa-select.js';
+export type { WaSelectionChangeEvent } from './wa-selection-change.js';
+export type { WaShowEvent } from './wa-show.js';
+export type { WaSlideChangeEvent } from './wa-slide-change.js';
+export type { WaStartEvent } from './wa-start.js';
+export type { WaTabHideEvent } from './wa-tab-hide.js';
+export type { WaTabShowEvent } from './wa-tab-show.js';

src/events/wa-select.ts

@@ -1,4 +1,4 @@
-import type WaMenuItem from '../components/menu-item/menu-item';
+import type WaMenuItem from '../components/menu-item/menu-item.js';
 
 export type WaSelectEvent = CustomEvent<{ item: WaMenuItem }>;
 

src/events/wa-selection-change.ts

@@ -1,4 +1,4 @@
-import type WaTreeItem from '../components/tree-item/tree-item';
+import type WaTreeItem from '../components/tree-item/tree-item.js';
 
 export type WaSelectionChangeEvent = CustomEvent<{ selection: WaTreeItem[] }>;
 

src/events/wa-slide-change.ts

@@ -1,4 +1,4 @@
-import type WaCarouselItem from '../components/carousel-item/carousel-item';
+import type WaCarouselItem from '../components/carousel-item/carousel-item.js';
 
 export type WaSlideChangeEvent = CustomEvent<{ index: number; slide: WaCarouselItem }>;
 

src/internal/form.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
-
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
 
 // Reproduction of this issue: https://github.com/shoelace-style/shoelace/issues/1703
 it('Should still run form validations if an element is removed', async () => {
@@ -19,3 +19,59 @@ it('Should still run form validations if an element is removed', async () => {
   expect(form.checkValidity()).to.equal(false);
   expect(form.reportValidity()).to.equal(false);
 });
+
+it('should submit the correct form values', async () => {
+  const form = await fixture<HTMLFormElement>(html`
+    <form>
+      <wa-input name="a" value="1"></wa-input>
+      <wa-input name="b" value="2"></wa-input>
+      <wa-input name="c" value="3"></wa-input>
+      <wa-button type="submit">Submit</wa-button>
+    </form>
+  `);
+
+  const button = form.querySelector('wa-button')!;
+  const submitHandler = sinon.spy((event: SubmitEvent) => {
+    formData = new FormData(form);
+    event.preventDefault();
+  });
+  let formData: FormData;
+
+  form.addEventListener('submit', submitHandler);
+  button.click();
+
+  await waitUntil(() => submitHandler.calledOnce);
+
+  expect(formData!.get('a')).to.equal('1');
+  expect(formData!.get('b')).to.equal('2');
+  expect(formData!.get('c')).to.equal('3');
+});
+
+it('should submit the correct form values when form controls are removed from the DOM', async () => {
+  const form = await fixture<HTMLFormElement>(html`
+    <form>
+      <wa-input name="a" value="1"></wa-input>
+      <wa-input name="b" value="2"></wa-input>
+      <wa-input name="c" value="3"></wa-input>
+      <wa-button type="submit">Submit</wa-button>
+    </form>
+  `);
+
+  const button = form.querySelector('wa-button')!;
+  const submitHandler = sinon.spy((event: SubmitEvent) => {
+    formData = new FormData(form);
+    event.preventDefault();
+  });
+  let formData: FormData;
+
+  form.addEventListener('submit', submitHandler);
+  form.querySelector('[name="b"]')!.remove();
+
+  button.click();
+
+  await waitUntil(() => submitHandler.calledOnce);
+
+  expect(formData!.get('a')).to.equal('1');
+  expect(formData!.get('b')).to.equal(null);
+  expect(formData!.get('c')).to.equal('3');
+});

src/internal/form.ts

@@ -217,7 +217,14 @@ export class FormControlController implements ReactiveController {
     // injecting the name/value on a temporary button, so we can just skip them here.
     const isButton = this.host.tagName.toLowerCase() === 'wa-button';
 
-    if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {
+    if (
+      this.host.isConnected &&
+      !disabled &&
+      !isButton &&
+      typeof name === 'string' &&
+      name.length > 0 &&
+      typeof value !== 'undefined'
+    ) {
       if (Array.isArray(value)) {
         (value as unknown[]).forEach(val => {
           event.formData.append(name, (val as string | number | boolean).toString());

src/internal/modal.ts

@@ -8,9 +8,13 @@ export default class Modal {
   isExternalActivated: boolean;
   tabDirection: 'forward' | 'backward' = 'forward';
   currentFocus: HTMLElement | null;
+  previousFocus: HTMLElement | null;
+  elementsWithTabbableControls: string[];
 
   constructor(element: HTMLElement) {
     this.element = element;
+
+    this.elementsWithTabbableControls = ['iframe'];
   }
 
   /** Activates focus trapping. */
@@ -56,39 +60,61 @@ export default class Modal {
 
         if (typeof target?.focus === 'function') {
           this.currentFocus = target;
-          target.focus({ preventScroll: true });
+          target.focus({ preventScroll: false });
         }
       }
     }
   }
+
   private handleFocusIn = () => {
     if (!this.isActive()) return;
     this.checkFocus();
   };
 
+  private possiblyHasTabbableChildren(element: HTMLElement) {
+    return (
+      this.elementsWithTabbableControls.includes(element.tagName.toLowerCase()) || element.hasAttribute('controls')
+      // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?
+    );
+  }
+
   private handleKeyDown = (event: KeyboardEvent) => {
     if (event.key !== 'Tab' || this.isExternalActivated) return;
     if (!this.isActive()) return;
 
+    // Because sometimes focus can actually be taken over from outside sources,
+    // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and
+    // recurse through shadowRoots.
+    const currentActiveElement = getDeepestActiveElement();
+    this.previousFocus = currentActiveElement as HTMLElement | null;
+
+    if (this.previousFocus && this.possiblyHasTabbableChildren(this.previousFocus)) {
+      return;
+    }
+
     if (event.shiftKey) {
       this.tabDirection = 'backward';
     } else {
       this.tabDirection = 'forward';
     }
 
-    event.preventDefault();
-
     const tabbableElements = getTabbableElements(this.element);
 
-    // Because sometimes focus can actually be taken over from outside sources,
-    // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and
-    // recurse through shadowRoots.
-    const currentActiveElement = getDeepestActiveElement();
     let currentFocusIndex = tabbableElements.findIndex(el => el === currentActiveElement);
 
+    this.previousFocus = this.currentFocus;
+
     if (currentFocusIndex === -1) {
       this.currentFocus = tabbableElements[0];
-      this.currentFocus?.focus({ preventScroll: true });
+
+      // We don't call event.preventDefault() here because it messes with tabbing to the <iframe> controls.
+      // We just wait until the current focus is no longer an element with possible hidden controls.
+      if (Boolean(this.previousFocus) && this.possiblyHasTabbableChildren(this.previousFocus!)) {
+        return;
+      }
+
+      event.preventDefault();
+      this.currentFocus?.focus({ preventScroll: false });
       return;
     }
 
@@ -102,7 +128,23 @@ export default class Modal {
       currentFocusIndex += addition;
     }
 
-    this.currentFocus = tabbableElements[currentFocusIndex];
+    this.previousFocus = this.currentFocus;
+    const nextFocus = /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];
+
+    // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element
+    // that possibly has "controls"
+    if (this.tabDirection === 'backward') {
+      if (this.previousFocus && this.possiblyHasTabbableChildren(this.previousFocus)) {
+        return;
+      }
+    }
+
+    if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {
+      return;
+    }
+
+    event.preventDefault();
+    this.currentFocus = nextFocus;
     this.currentFocus?.focus({ preventScroll: true });
 
     setTimeout(() => this.checkFocus());

src/internal/tabbable.ts

@@ -1,22 +1,44 @@
-//
-// This doesn't technically check visibility, it checks if the element has been rendered and can maybe possibly be tabbed
-// to. This is a workaround for shadow roots not having an `offsetParent`.
-//
-// See https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
-//
-// Previously, we used https://www.npmjs.com/package/composed-offset-position, but recursing up an entire node tree took
-// up a lot of CPU cycles and made focus traps unusable in Chrome / Edge.
-//
-function isTakingUpSpace(elem: HTMLElement): boolean {
-  return Boolean(elem.offsetParent || elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
+// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.
+// computedStyle calls are "live" so they only need to be retrieved once for an element.
+const computedStyleMap = new WeakMap<Element, CSSStyleDeclaration>();
+
+function isVisible(el: HTMLElement): boolean {
+  // This is the fastest check, but isn't supported in Safari.
+  if (typeof el.checkVisibility === 'function') {
+    // Opacity is focusable, visibility is not.
+    return el.checkVisibility({ checkOpacity: false, checkVisibilityCSS: true });
+  }
+
+  // Fallback "polyfill" for "checkVisibility"
+  let computedStyle: undefined | CSSStyleDeclaration = computedStyleMap.get(el);
+
+  if (!computedStyle) {
+    computedStyle = window.getComputedStyle(el, null);
+    computedStyleMap.set(el, computedStyle);
+  }
+
+  return computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none';
 }
 
 /** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
 function isTabbable(el: HTMLElement) {
   const tag = el.tagName.toLowerCase();
 
-  // Elements with a -1 tab index are not tabbable
-  if (el.getAttribute('tabindex') === '-1') {
+  const tabindex = Number(el.getAttribute('tabindex'));
+  const hasTabindex = el.hasAttribute('tabindex');
+
+  // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable
+  if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
+    return false;
+  }
+
+  // Elements with a disabled attribute are not tabbable
+  if (el.hasAttribute('disabled')) {
+    return false;
+  }
+
+  // If any parents have "inert", we aren't "tabbable"
+  if (el.closest('[inert]')) {
     return false;
   }
 
@@ -30,13 +52,7 @@ function isTabbable(el: HTMLElement) {
     return false;
   }
 
-  // Elements that are hidden have no offsetParent and are not tabbable
-  if (!isTakingUpSpace(el)) {
-    return false;
-  }
-
-  // Elements without visibility are not tabbable
-  if (window.getComputedStyle(el).visibility === 'hidden') {
+  if (!isVisible(el)) {
     return false;
   }
 
@@ -56,7 +72,7 @@ function isTabbable(el: HTMLElement) {
   }
 
   // At this point, the following elements are considered tabbable
-  return ['button', 'input', 'select', 'textarea', 'a', 'audio', 'video', 'summary'].includes(tag);
+  return ['button', 'input', 'select', 'textarea', 'a', 'audio', 'video', 'summary', 'iframe'].includes(tag);
 }
 
 /**
@@ -73,29 +89,36 @@ export function getTabbableBoundary(root: HTMLElement | ShadowRoot) {
   return { start, end };
 }
 
+/**
+ * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.
+ * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.
+ * This fixes that fun edge case.
+ */
+function getSlottedChildrenOutsideRootElement(slotElement: HTMLSlotElement, root: HTMLElement | ShadowRoot) {
+  return (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !== root;
+}
+
 export function getTabbableElements(root: HTMLElement | ShadowRoot) {
+  const walkedEls = new WeakMap();
   const tabbableElements: HTMLElement[] = [];
 
   function walk(el: HTMLElement | ShadowRoot) {
     if (el instanceof Element) {
       // if the element has "inert" we can just no-op it.
-      if (el.hasAttribute('inert')) {
+      if (el.hasAttribute('inert') || el.closest('[inert]')) {
         return;
       }
 
+      if (walkedEls.has(el)) {
+        return;
+      }
+      walkedEls.set(el, true);
+
       if (!tabbableElements.includes(el) && isTabbable(el)) {
         tabbableElements.push(el);
       }
 
-      /**
-       * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.
-       * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.
-       * This fixes that fun edge case.
-       */
-      const slotChildrenOutsideRootElement = (slotElement: HTMLSlotElement) =>
-        (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !== root;
-
-      if (el instanceof HTMLSlotElement && slotChildrenOutsideRootElement(el)) {
+      if (el instanceof HTMLSlotElement && getSlottedChildrenOutsideRootElement(el, root)) {
         el.assignedElements({ flatten: true }).forEach((assignedEl: HTMLElement) => {
           walk(assignedEl);
         });
@@ -106,7 +129,9 @@ export function getTabbableElements(root: HTMLElement | ShadowRoot) {
       }
     }
 
-    [...el.children].forEach((e: HTMLElement) => walk(e));
+    for (const e of el.children) {
+      walk(e as HTMLElement);
+    }
   }
 
   // Collect all elements including the root

src/themes/_utility.css

@@ -4,9 +4,18 @@
  * to reduce the possibility of collisions.
  */
 
-.wa-scroll-lock {
-  padding-right: var(--wa-scroll-lock-size) !important;
-  overflow: hidden !important;
+@supports (scrollbar-gutter: stable) {
+  .wa-scroll-lock {
+    scrollbar-gutter: stable !important;
+    overflow: hidden !important;
+  }
+}
+
+@supports not (scrollbar-gutter: stable) {
+  .wa-scroll-lock {
+    padding-right: var(--wa-scroll-lock-size) !important;
+    overflow: hidden !important;
+  }
 }
 
 .wa-toast-stack {

src/themes/applied.css

@@ -5,6 +5,7 @@
 html {
   box-sizing: border-box;
   background-color: var(--wa-color-surface-default);
+  font-size: var(--wa-font-size-root);
   padding: 0;
   margin: 0;
 }
@@ -18,7 +19,7 @@ html {
 body {
   min-height: 100vh;
   font-family: var(--wa-font-family-body);
-  font-size: var(--wa-font-size-root);
+  font-size: var(--wa-font-size-m);
   font-weight: var(--wa-font-weight-body);
   line-height: var(--wa-font-line-height-regular);
   text-size-adjust: none;
@@ -87,32 +88,32 @@ h6 {
 }
 
 h1 {
-  font-size: var(--wa-font-size-2xl);
+  font-size: var(--wa-font-size-3xl);
 }
 
 h2 {
-  font-size: var(--wa-font-size-xl);
+  font-size: var(--wa-font-size-2xl);
 }
 
 h3 {
-  font-size: var(--wa-font-size-l);
+  font-size: var(--wa-font-size-xl);
 }
 
 h4 {
-  font-size: var(--wa-font-size-m);
+  font-size: var(--wa-font-size-l);
 }
 
 h5 {
-  font-size: var(--wa-font-size-s);
+  font-size: var(--wa-font-size-m);
 }
 
 h6 {
-  font-size: var(--wa-font-size-xs);
+  font-size: var(--wa-font-size-s);
 }
 
 hr {
   border: none;
-  border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+  border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
   margin: var(--wa-flow-spacing) 0;
 }
 
@@ -184,8 +185,32 @@ abbr[title] {
   cursor: help;
 }
 
+/* Code and similar */
+code,
+pre,
+kbd,
+samp,
+var {
+  font-family: var(--wa-font-family-code);
+  font-size: 0.975em;
+  background-color: var(--wa-color-neutral-fill-subtle);
+  border-radius: var(--wa-corners-s);
+  padding-block: var(--wa-space-3xs);
+  padding-inline: var(--wa-space-2xs);
+}
+
+code {
+  background-color: color-mix(in oklab, var(--wa-color-neutral-spot), transparent 90%);
+}
+
+pre {
+  color: var(--wa-color-text-normal);
+  border-radius: var(--wa-corners-s);
+  padding: var(--wa-space-m);
+  white-space: pre;
+}
+
 kbd {
-  background: var(--wa-color-neutral-fill-subtle);
   border: solid 1px var(--wa-color-neutral-border-subtle);
   box-shadow:
     inset 0 1px 0 1px rgb(255 255 255 / 0.2),
@@ -200,27 +225,6 @@ kbd wa-icon {
   vertical-align: -2px;
 }
 
-/* Code and similar */
-code,
-pre,
-kbd,
-samp,
-var {
-  font-family: var(--wa-font-family-code);
-  font-size: 0.975em;
-  background-color: color-mix(in oklab, var(--wa-color-neutral-spot), transparent 92%);
-  border-radius: var(--wa-corners-s);
-  padding-block: var(--wa-space-3xs);
-  padding-inline: var(--wa-space-2xs);
-}
-
-pre {
-  color: var(--wa-color-text-normal);
-  border-radius: var(--wa-corners-s);
-  padding: var(--wa-space-m);
-  white-space: pre;
-}
-
 /* Block quotes */
 blockquote {
   position: relative;
@@ -312,7 +316,7 @@ details[open] > summary::before {
 }
 
 details + details {
-  margin-top: calc(-1 * var(--wa-flow-spacing) + var(--wa-border-width-thin));
+  margin-top: calc(-1 * var(--wa-flow-spacing) + var(--wa-border-width-s));
 }
 
 /* Tables */
@@ -327,7 +331,7 @@ caption {
 }
 
 tbody tr {
-  border-top: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+  border-top: solid var(--wa-border-width-s) var(--wa-color-surface-border);
 }
 
 tbody tr:nth-child(2n + 1) {
@@ -399,10 +403,14 @@ iframe {
 /* Links */
 a {
   color: var(--wa-color-text-link);
+  text-decoration: var(--wa-link-decoration-default);
+  -webkit-text-decoration: var(--wa-link-decoration-default);
 }
 
 a:hover {
   color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
+  text-decoration: var(--wa-link-decoration-hover);
+  -webkit-text-decoration: var(--wa-link-decoration-hover);
 }
 
 a:focus,
@@ -447,7 +455,7 @@ textarea {
   details,
   pre {
     background: none;
-    border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
+    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
   }
 
   summary {

src/themes/borders_0_minimal.css

@@ -1,43 +0,0 @@
-:root {
-  /**
-   * Borders
-   */
-  --wa-border-style: solid;
-
-  /* Border widths are designed to scale according to a single base value.
-    * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-width-base: 0.0625;
-  --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
-  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
-  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
-
-  --wa-form-controls-border-style: var(--wa-border-style);
-  --wa-form-controls-border-width: var(--wa-border-width-thin);
-
-  --wa-panel-border-style: hidden;
-  --wa-panel-border-width: var(--wa-border-width-thin);
-}
-
-/* #region Buttons */
-wa-button[outline] {
-  &[variant='brand'] {
-    --border-color: var(--wa-color-brand-border-highlight);
-  }
-
-  &[variant='success'] {
-    --border-color: var(--wa-color-success-border-highlight);
-  }
-
-  &[variant='neutral'] {
-    --border-color: var(--wa-color-neutral-border-highlight);
-  }
-
-  &[variant='warning'] {
-    --border-color: var(--wa-color-warning-border-highlight);
-  }
-
-  &[variant='danger'] {
-    --border-color: var(--wa-color-danger-border-highlight);
-  }
-}
-/* #endregion */

src/themes/borders_1_feather.css

@@ -1,43 +0,0 @@
-:root {
-  /**
-   * Borders
-   */
-  --wa-border-style: dotted;
-
-  /* Border widths are designed to scale according to a single base value.
-    * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-width-base: 0.0625;
-  --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
-  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
-  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
-
-  --wa-form-controls-border-style: var(--wa-border-style);
-  --wa-form-controls-border-width: var(--wa-border-width-thin);
-
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-thin);
-}
-
-/* #region Buttons */
-wa-button[outline] {
-  &[variant='brand'] {
-    --border-color: var(--wa-color-brand-border-highlight);
-  }
-
-  &[variant='success'] {
-    --border-color: var(--wa-color-success-border-highlight);
-  }
-
-  &[variant='neutral'] {
-    --border-color: var(--wa-color-neutral-border-highlight);
-  }
-
-  &[variant='warning'] {
-    --border-color: var(--wa-color-warning-border-highlight);
-  }
-
-  &[variant='danger'] {
-    --border-color: var(--wa-color-danger-border-highlight);
-  }
-}
-/* #endregion */

src/themes/borders_2_light.css

@@ -1,19 +0,0 @@
-:root {
-  /**
-   * Borders
-   */
-  --wa-border-style: solid;
-
-  /* Border widths are designed to scale according to a single base value.
-    * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-width-base: 0.0625;
-  --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
-  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
-  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
-
-  --wa-form-controls-border-style: var(--wa-border-style);
-  --wa-form-controls-border-width: var(--wa-border-width-thin);
-
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-thin);
-}

src/themes/borders_3_medium.css

@@ -1,19 +0,0 @@
-:root {
-  /**
-   * Borders
-   */
-  --wa-border-style: solid;
-
-  /* Border widths are designed to scale according to a single base value.
-    * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-width-base: 0.125;
-  --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
-  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
-  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
-
-  --wa-form-controls-border-style: var(--wa-border-style);
-  --wa-form-controls-border-width: var(--wa-border-width-thin);
-
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-thin);
-}

src/themes/borders_4_heavy.css

@@ -1,47 +0,0 @@
-:root {
-  /**
-   * Borders
-   */
-  --wa-border-style: solid;
-
-  /* Border widths are designed to scale according to a single base value.
-    * The base value is intended for calculations and is not used by components directly. */
-  --wa-border-width-base: 0.125;
-  --wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
-  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
-  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
-
-  --wa-form-controls-border-style: var(--wa-border-style);
-  --wa-form-controls-border-width: var(--wa-border-width-thin);
-
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-thin);
-}
-
-/* #region Buttons */
-wa-button {
-  --border-color-hover: var(--border-color);
-  --border-color-active: var(--border-color);
-  --box-shadow-color: var(--border-color);
-
-  &[variant='brand'] {
-    --border-color: var(--wa-color-brand-spot-darker);
-  }
-
-  &[variant='success'] {
-    --border-color: var(--wa-color-success-spot-darker);
-  }
-
-  &[variant='neutral'] {
-    --border-color: var(--wa-color-neutral-spot-darker);
-  }
-
-  &[variant='warning'] {
-    --border-color: var(--wa-color-warning-spot-darker);
-  }
-
-  &[variant='danger'] {
-    --border-color: var(--wa-color-danger-spot-darker);
-  }
-}
-/* #endregion */

src/themes/chic.css

@@ -1,11 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..600&display=swap');
 @import 'depth_3_punchy.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
-@import 'borders_2_light.css'; /* borders_0_minimal.css, borders_1_feather.css, borders_2_light.css, borders_3_medium.css, borders_4_heavy.css */
 
 :root,
 :host,
-.wa-theme-chic-dark {
-  color-scheme: dark;
+.wa-theme-chic-light {
+  color-scheme: light;
 
   /**
    * Primitive colors
@@ -81,36 +79,40 @@
 
   /* Surfaces are background layers that UI components and other content rest on.
    * Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
-  --wa-color-surface-raised: var(--wa-color-base-10);
-  --wa-color-surface-default: var(--wa-color-base-05);
-  --wa-color-surface-lowered: black;
-  --wa-color-surface-border: var(--wa-color-base-20);
+  --wa-color-surface-raised: white;
+  --wa-color-surface-default: white;
+  --wa-color-surface-lowered: var(--wa-color-base-95);
+  --wa-color-surface-border: var(--wa-color-base-90);
 
   /* Text colors are used for standard text elements.
    * Text should have a minimum 4.5:1 contrast ratio against surfaces.
    * Inverse text should support appropriate contrast against background colors with opposing lightness. */
-  --wa-color-text-normal: var(--wa-color-base-95);
-  --wa-color-text-quiet: var(--wa-color-base-60);
+  --wa-color-text-normal: var(--wa-color-base-05);
+  --wa-color-text-quiet: var(--wa-color-base-40);
   --wa-color-text-link: var(--wa-color-brand-text-on-surface);
 
   /* Selection colors apply on content that is highlighted by the user.
    * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
-  --wa-color-selection-background: var(--wa-color-lime-40);
-  --wa-color-selection-text: white;
+  --wa-color-selection-background: var(--wa-color-lime-80);
+  --wa-color-selection-text: black;
 
   /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
    * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
-  --wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 90%, transparent);
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 96%, transparent);
 
   /* Overlays dim background elements to focus attention on modal content, such as drawers or dialogs. */
-  --wa-color-overlay: color-mix(in oklab, black 50%, transparent);
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-base-10) 25%, transparent);
 
   /* Shadow specifies the default color for box shadows that indicate elevation. */
-  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-base) * 32% + 40%), transparent);
+  --wa-color-shadow: color-mix(
+    in oklab,
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
+    transparent
+  );
 
   /* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 16%;
+  --wa-color-mix-hover: white 10%;
+  --wa-color-mix-active: black 5%;
 
   /**
    * Semantic theme colors
@@ -128,53 +130,53 @@
   */
   --wa-color-brand-spot: var(--wa-color-lime-80);
   --wa-color-brand-spot-darker: var(--wa-color-lime-70);
-  --wa-color-brand-fill-subtle: var(--wa-color-lime-10);
-  --wa-color-brand-fill-highlight: var(--wa-color-lime-20);
-  --wa-color-brand-border-subtle: var(--wa-color-lime-20);
-  --wa-color-brand-border-highlight: var(--wa-color-lime-30);
+  --wa-color-brand-fill-subtle: var(--wa-color-lime-95);
+  --wa-color-brand-fill-highlight: var(--wa-color-lime-90);
+  --wa-color-brand-border-subtle: var(--wa-color-lime-90);
+  --wa-color-brand-border-highlight: var(--wa-color-lime-80);
   --wa-color-brand-text-on-spot: black;
-  --wa-color-brand-text-on-fill: var(--wa-color-lime-90);
-  --wa-color-brand-text-on-surface: var(--wa-color-lime-80);
+  --wa-color-brand-text-on-fill: var(--wa-color-lime-40);
+  --wa-color-brand-text-on-surface: var(--wa-color-lime-50);
 
   --wa-color-success-spot: var(--wa-color-green-80);
   --wa-color-success-spot-darker: var(--wa-color-green-70);
-  --wa-color-success-fill-subtle: var(--wa-color-green-10);
-  --wa-color-success-fill-highlight: var(--wa-color-green-20);
-  --wa-color-success-border-subtle: var(--wa-color-green-20);
-  --wa-color-success-border-highlight: var(--wa-color-green-30);
+  --wa-color-success-fill-subtle: var(--wa-color-green-95);
+  --wa-color-success-fill-highlight: var(--wa-color-green-90);
+  --wa-color-success-border-subtle: var(--wa-color-green-90);
+  --wa-color-success-border-highlight: var(--wa-color-green-80);
   --wa-color-success-text-on-spot: black;
-  --wa-color-success-text-on-fill: var(--wa-color-green-90);
-  --wa-color-success-text-on-surface: var(--wa-color-green-80);
+  --wa-color-success-text-on-fill: var(--wa-color-green-40);
+  --wa-color-success-text-on-surface: var(--wa-color-green-50);
 
   --wa-color-warning-spot: var(--wa-color-yellow-80);
   --wa-color-warning-spot-darker: var(--wa-color-yellow-70);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-20);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
+  --wa-color-warning-border-subtle: var(--wa-color-yellow-90);
+  --wa-color-warning-border-highlight: var(--wa-color-yellow-80);
   --wa-color-warning-text-on-spot: black;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-80);
+  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
 
-  --wa-color-danger-spot: var(--wa-color-red-70);
-  --wa-color-danger-spot-darker: var(--wa-color-red-60);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-10);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-20);
-  --wa-color-danger-border-subtle: var(--wa-color-red-20);
-  --wa-color-danger-border-highlight: var(--wa-color-red-30);
+  --wa-color-danger-spot: var(--wa-color-red-80);
+  --wa-color-danger-spot-darker: var(--wa-color-red-70);
+  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
+  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
+  --wa-color-danger-border-subtle: var(--wa-color-red-90);
+  --wa-color-danger-border-highlight: var(--wa-color-red-80);
   --wa-color-danger-text-on-spot: black;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-80);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-70);
+  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
 
   --wa-color-neutral-spot: var(--wa-color-base-80);
   --wa-color-neutral-spot-darker: var(--wa-color-base-70);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-10);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-20);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-20);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-30);
+  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
+  --wa-color-neutral-fill-highlight: var(--wa-color-base-90);
+  --wa-color-neutral-border-subtle: var(--wa-color-base-90);
+  --wa-color-neutral-border-highlight: var(--wa-color-base-80);
   --wa-color-neutral-text-on-spot: black;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-80);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-70);
+  --wa-color-neutral-text-on-fill: var(--wa-color-base-40);
+  --wa-color-neutral-text-on-surface: var(--wa-color-base-50);
 
   /**
    * Typography
@@ -186,24 +188,28 @@
 
   --wa-font-weight-light: 300;
   --wa-font-weight-normal: 400;
-  --wa-font-weight-medium: 500;
-  --wa-font-weight-heavy: 600;
+  --wa-font-weight-medium: 550;
+  --wa-font-weight-heavy: 650;
 
-  --wa-font-weight-heading: var(--wa-font-weight-medium);
+  --wa-font-weight-heading: var(--wa-font-weight-heavy);
   --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-action: var(--wa-font-weight-heavy);
+  --wa-font-weight-action: var(--wa-font-weight-medium);
 
+  /* The default typescale is based on the Major Second scale (x1.125). 
+   * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
   --wa-font-size-root: 16px;
-  --wa-font-size-2xs: 0.625rem; /* 10px */
+  --wa-font-size-2xs: 0.6875rem; /* 11px */
   --wa-font-size-xs: 0.75rem; /* 12px */
   --wa-font-size-s: 0.875rem; /* 14px */
   --wa-font-size-m: 1rem; /* 16px */
   --wa-font-size-l: 1.25rem; /* 20px */
-  --wa-font-size-xl: 1.75rem; /* 28px */
-  --wa-font-size-2xl: 2.5rem; /* 40px */
+  --wa-font-size-xl: 1.625rem; /* 26px */
+  --wa-font-size-2xl: 2rem; /* 32px */
+  --wa-font-size-3xl: 2.5625rem; /* 41px */
+  --wa-font-size-4xl: 3.25rem; /* 52px */
 
   --wa-font-line-height-compact: 1.25;
-  --wa-font-line-height-regular: 1.625;
+  --wa-font-line-height-regular: 1.6;
   --wa-font-line-height-comfortable: 2;
 
   /**
@@ -230,12 +236,30 @@
   --wa-space-2xl: calc(var(--wa-space-base) * 2rem); /* 32px */
   --wa-space-3xl: calc(var(--wa-space-base) * 3rem); /* 48px */
 
+  /**
+   * Borders
+   */
+  --wa-border-style: solid;
+
+  /* Border widths are designed to scale according to a single base value.
+     * The base value is intended for calculations and is not used by components directly. */
+  --wa-border-width-base: 0.0625;
+  --wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
+  --wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
+  --wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
+
+  --wa-form-controls-border-style: var(--wa-border-style);
+  --wa-form-controls-border-width: var(--wa-border-width-s);
+
+  --wa-panel-border-style: var(--wa-border-style);
+  --wa-panel-border-width: var(--wa-border-width-s);
+
   /**
    * Corners
    */
   /* Corners are designed to scale according to a single base value.
    * The base value is intended for calculations and is not used by components directly. */
-  --wa-corners-base: 0.5;
+  --wa-corners-base: 0.75;
   --wa-corners-xs: calc(var(--wa-corners-base) * 0.75rem);
   --wa-corners-s: calc(var(--wa-corners-base) * 1rem);
   --wa-corners-m: calc(var(--wa-corners-base) * 2rem);
@@ -254,6 +278,12 @@
   --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
   --wa-focus-ring-offset: 0.0625rem; /* 1px */
 
+  /**
+   * Links
+   */
+  --wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
+  --wa-link-decoration-hover: underline;
+
   /**
    * Z-index
    */
@@ -309,8 +339,8 @@
   --wa-flow-spacing: 1.5rem;
 
   /**
-  * From 2.x
-  */
+   * From 2.x
+   */
   --wa-form-control-toggle-size-s: 0.875rem;
   --wa-form-control-toggle-size-m: 1.125rem;
   --wa-form-control-toggle-size-l: 1.375rem;
@@ -318,90 +348,86 @@
   --wa-tooltip-arrow-size: 0.375rem;
 }
 
-.wa-theme-chic-light,
-.wa-theme-chic-light :host {
+.wa-theme-chic-dark,
+.wa-theme-chic-dark :host {
   color-scheme: dark;
 
   /**
    * Base theme colors
    */
-  --wa-color-surface-raised: white;
-  --wa-color-surface-default: white;
-  --wa-color-surface-lowered: var(--wa-color-base-95);
-  --wa-color-surface-border: var(--wa-color-base-90);
+  --wa-color-surface-raised: var(--wa-color-base-10);
+  --wa-color-surface-default: var(--wa-color-base-05);
+  --wa-color-surface-lowered: black;
+  --wa-color-surface-border: var(--wa-color-base-20);
 
-  --wa-color-text-normal: var(--wa-color-base-05);
-  --wa-color-text-quiet: var(--wa-color-base-40);
+  --wa-color-text-normal: var(--wa-color-base-95);
+  --wa-color-text-quiet: var(--wa-color-base-60);
   --wa-color-text-link: var(--wa-color-brand-text-on-surface);
 
-  --wa-color-selection-background: var(--wa-color-lime-80);
-  --wa-color-selection-text: black;
+  --wa-color-selection-background: var(--wa-color-lime-40);
+  --wa-color-selection-text: white;
 
-  --wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 96%, transparent);
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 90%, transparent);
 
-  --wa-color-overlay: color-mix(in oklab, var(--wa-color-base-10) 25%, transparent);
+  --wa-color-overlay: color-mix(in oklab, black 50%, transparent);
 
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
-    transparent
-  );
+  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-base) * 32% + 40%), transparent);
 
-  --wa-color-mix-hover: white 10%;
-  --wa-color-mix-active: black 5%;
+  --wa-color-mix-hover: black 8%;
+  --wa-color-mix-active: black 16%;
 
   /**
-    * Semantic theme colors
-    */
-  --wa-color-brand-spot: var(--wa-color-lime-70);
-  --wa-color-brand-spot-darker: var(--wa-color-lime-60);
-  --wa-color-brand-fill-subtle: var(--wa-color-lime-95);
-  --wa-color-brand-fill-highlight: var(--wa-color-lime-90);
-  --wa-color-brand-border-subtle: var(--wa-color-lime-90);
-  --wa-color-brand-border-highlight: var(--wa-color-lime-80);
+   * Semantic theme colors
+   */
+  --wa-color-brand-spot: var(--wa-color-lime-80);
+  --wa-color-brand-spot-darker: var(--wa-color-lime-70);
+  --wa-color-brand-fill-subtle: var(--wa-color-lime-10);
+  --wa-color-brand-fill-highlight: var(--wa-color-lime-20);
+  --wa-color-brand-border-subtle: var(--wa-color-lime-20);
+  --wa-color-brand-border-highlight: var(--wa-color-lime-30);
   --wa-color-brand-text-on-spot: black;
-  --wa-color-brand-text-on-fill: var(--wa-color-lime-40);
-  --wa-color-brand-text-on-surface: var(--wa-color-lime-50);
+  --wa-color-brand-text-on-fill: var(--wa-color-lime-90);
+  --wa-color-brand-text-on-surface: var(--wa-color-lime-80);
 
-  --wa-color-success-spot: var(--wa-color-green-70);
-  --wa-color-success-spot-darker: var(--wa-color-green-60);
-  --wa-color-success-fill-subtle: var(--wa-color-green-95);
-  --wa-color-success-fill-highlight: var(--wa-color-green-90);
-  --wa-color-success-border-subtle: var(--wa-color-green-90);
-  --wa-color-success-border-highlight: var(--wa-color-green-80);
+  --wa-color-success-spot: var(--wa-color-green-80);
+  --wa-color-success-spot-darker: var(--wa-color-green-70);
+  --wa-color-success-fill-subtle: var(--wa-color-green-10);
+  --wa-color-success-fill-highlight: var(--wa-color-green-20);
+  --wa-color-success-border-subtle: var(--wa-color-green-20);
+  --wa-color-success-border-highlight: var(--wa-color-green-30);
   --wa-color-success-text-on-spot: black;
-  --wa-color-success-text-on-fill: var(--wa-color-green-40);
-  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+  --wa-color-success-text-on-fill: var(--wa-color-green-90);
+  --wa-color-success-text-on-surface: var(--wa-color-green-80);
 
-  --wa-color-warning-spot: var(--wa-color-yellow-70);
-  --wa-color-warning-spot-darker: var(--wa-color-yellow-60);
-  --wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
-  --wa-color-warning-border-subtle: var(--wa-color-yellow-90);
-  --wa-color-warning-border-highlight: var(--wa-color-yellow-80);
+  --wa-color-warning-spot: var(--wa-color-yellow-80);
+  --wa-color-warning-spot-darker: var(--wa-color-yellow-70);
+  --wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
+  --wa-color-warning-border-subtle: var(--wa-color-yellow-20);
+  --wa-color-warning-border-highlight: var(--wa-color-yellow-30);
   --wa-color-warning-text-on-spot: black;
-  --wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
-  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+  --wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-80);
 
   --wa-color-danger-spot: var(--wa-color-red-70);
   --wa-color-danger-spot-darker: var(--wa-color-red-60);
-  --wa-color-danger-fill-subtle: var(--wa-color-red-95);
-  --wa-color-danger-fill-highlight: var(--wa-color-red-90);
-  --wa-color-danger-border-subtle: var(--wa-color-red-90);
-  --wa-color-danger-border-highlight: var(--wa-color-red-80);
+  --wa-color-danger-fill-subtle: var(--wa-color-red-10);
+  --wa-color-danger-fill-highlight: var(--wa-color-red-20);
+  --wa-color-danger-border-subtle: var(--wa-color-red-20);
+  --wa-color-danger-border-highlight: var(--wa-color-red-30);
   --wa-color-danger-text-on-spot: black;
-  --wa-color-danger-text-on-fill: var(--wa-color-red-40);
-  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+  --wa-color-danger-text-on-fill: var(--wa-color-red-80);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-70);
 
-  --wa-color-neutral-spot: var(--wa-color-base-70);
-  --wa-color-neutral-spot-darker: var(--wa-color-base-60);
-  --wa-color-neutral-fill-subtle: var(--wa-color-base-95);
-  --wa-color-neutral-fill-highlight: var(--wa-color-base-90);
-  --wa-color-neutral-border-subtle: var(--wa-color-base-90);
-  --wa-color-neutral-border-highlight: var(--wa-color-base-80);
+  --wa-color-neutral-spot: var(--wa-color-base-80);
+  --wa-color-neutral-spot-darker: var(--wa-color-base-70);
+  --wa-color-neutral-fill-subtle: var(--wa-color-base-10);
+  --wa-color-neutral-fill-highlight: var(--wa-color-base-20);
+  --wa-color-neutral-border-subtle: var(--wa-color-base-20);
+  --wa-color-neutral-border-highlight: var(--wa-color-base-30);
   --wa-color-neutral-text-on-spot: black;
-  --wa-color-neutral-text-on-fill: var(--wa-color-base-40);
-  --wa-color-neutral-text-on-surface: var(--wa-color-base-50);
+  --wa-color-neutral-text-on-fill: var(--wa-color-base-80);
+  --wa-color-neutral-text-on-surface: var(--wa-color-base-70);
 }
 
 /* _utility.css */