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>

.vscode/settings.json

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

cspell.json

@@ -103,6 +103,7 @@
     "monospace",
     "mousedown",
     "mousemove",
+    "mouseout",
     "mouseup",
     "multiselectable",
     "nextjs",
@@ -172,10 +173,12 @@
     "valpha",
     "valuenow",
     "valuetext",
+    "Vuejs",
     "WCAG",
     "webawesome",
     "WEBP",
-    "Webpacker"
+    "Webpacker",
+    "xmark"
   ],
   "ignorePaths": [
     "package.json",

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';
@@ -38,6 +39,7 @@ export default {
         customElementsManifest.package = { name, description, version, author, homepage, license };
       }
     },
+
     // Infer tag names because we no longer use @customElement decorators.
     {
       name: 'wa-infer-tag-names',
@@ -66,6 +68,7 @@ export default {
         }
       }
     },
+
     // Parse custom jsDoc tags
     {
       name: 'wa-custom-tags',
@@ -137,6 +140,7 @@ export default {
         }
       }
     },
+
     {
       name: 'wa-react-event-names',
       analyzePhase({ ts, node, moduleDoc }) {
@@ -155,6 +159,7 @@ export default {
         }
       }
     },
+
     {
       name: 'wa-translate-module-paths',
       packageLinkPhase({ customElementsManifest }) {
@@ -191,6 +196,7 @@ export default {
         });
       }
     },
+
     // Generate custom VS Code data
     customElementVsCodePlugin({
       outdir,
@@ -202,6 +208,7 @@ export default {
         }
       ]
     }),
+
     customElementJetBrainsPlugin({
       outdir: './dist',
       excludeCss: true,
@@ -212,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`
     })
   ]
 };

docs/_includes/component.njk

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

docs/_includes/default.njk

@@ -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>
@@ -86,13 +88,13 @@
 
       <div class="sidebar-buttons">
         <wa-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
-          <wa-icon slot="prefix" name="github"></wa-icon> Code
+          <wa-icon slot="prefix" name="github" family="brands"></wa-icon> Code
         </wa-button>
         <wa-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
-          <wa-icon slot="prefix" name="star-fill"></wa-icon> Star
+          <wa-icon slot="prefix" name="star" variant="solid"></wa-icon> Star
         </wa-button>
         <wa-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
-          <wa-icon slot="prefix" name="twitter"></wa-icon> Follow
+          <wa-icon slot="prefix" name="twitter" family="brands"></wa-icon> Follow
         </wa-button>
       </div>
 

docs/_includes/sidebar.njk

@@ -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/code-previews.cjs

@@ -68,7 +68,7 @@ module.exports = function (doc, options) {
         <div class="code-preview__preview">
           ${code.textContent}
           <div class="code-preview__resizer">
-            <wa-icon name="grip-vertical"></wa-icon>
+            <wa-icon name="grip-vertical" variant="solid"></wa-icon>
           </div>
         </div>
 

docs/_utilities/markdown.cjs

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

docs/assets/scripts/search.js

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

docs/assets/styles/code-previews.css

@@ -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/eleventy.config.cjs

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

docs/pages/components/alert.md

@@ -7,7 +7,7 @@ layout: component
 
 ```html:preview
 <wa-alert open>
-  <wa-icon slot="icon" name="info-circle"></wa-icon>
+  <wa-icon slot="icon" name="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" />
+    <WaIcon slot="icon" name="circle-info" variant="regular" />
     This is a standard alert. You can customize its content and even the icon.
   </WaAlert>
 );
@@ -36,7 +36,7 @@ Set the `variant` attribute to change the alert's variant.
 
 ```html:preview
 <wa-alert variant="brand" open>
-  <wa-icon slot="icon" name="info-circle"></wa-icon>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   <strong>This is super informative</strong><br />
   You can tell by how pretty the alert is.
 </wa-alert>
@@ -44,7 +44,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="success" open>
-  <wa-icon slot="icon" name="check2-circle"></wa-icon>
+  <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
   <strong>Your changes have been saved</strong><br />
   You can safely exit the app now.
 </wa-alert>
@@ -52,7 +52,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="neutral" open>
-  <wa-icon slot="icon" name="gear"></wa-icon>
+  <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
   <strong>Your settings have been updated</strong><br />
   Settings will take effect on next login.
 </wa-alert>
@@ -60,7 +60,7 @@ Set the `variant` attribute to change the alert's variant.
 <br />
 
 <wa-alert variant="warning" open>
-  <wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
+  <wa-icon slot="icon" name="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-octagon"></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" />
+      <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" />
+      <WaIcon slot="icon" name="circle-check" variant="regular" />
       <strong>Your changes have been saved</strong>
       <br />
       You can safely exit the app now.
@@ -99,7 +99,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="neutral" open>
-      <WaIcon slot="icon" name="gear" />
+      <WaIcon slot="icon" name="gear" variant="regular" />
       <strong>Your settings have been updated</strong>
       <br />
       Settings will take effect on next login.
@@ -108,7 +108,7 @@ const App = () => (
     <br />
 
     <WaAlert variant="warning" open>
-      <WaIcon slot="icon" name="exclamation-triangle" />
+      <WaIcon slot="icon" name="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-octagon" />
+      <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"></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" />
+      <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"></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" />
+          <WaIcon slot="icon" name="circle-info" variant="regular" />
           This alert will automatically hide itself after three seconds, unless you interact with it.
         </WaAlert>
       </div>
@@ -262,31 +262,31 @@ You should always use the `closable` attribute so users can dismiss the notifica
   <wa-button variant="danger">Danger</wa-button>
 
   <wa-alert variant="brand" duration="3000" closable>
-    <wa-icon slot="icon" name="info-circle"></wa-icon>
+    <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
     <strong>This is super informative</strong><br />
     You can tell by how pretty the alert is.
   </wa-alert>
 
   <wa-alert variant="success" duration="3000" closable>
-    <wa-icon slot="icon" name="check2-circle"></wa-icon>
+    <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
     <strong>Your changes have been saved</strong><br />
     You can safely exit the app now.
   </wa-alert>
 
   <wa-alert variant="neutral" duration="3000" closable>
-    <wa-icon slot="icon" name="gear"></wa-icon>
+    <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
     <strong>Your settings have been updated</strong><br />
     Settings will take effect on next login.
   </wa-alert>
 
   <wa-alert variant="warning" duration="3000" closable>
-    <wa-icon slot="icon" name="exclamation-triangle"></wa-icon>
+    <wa-icon slot="icon" name="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="exclamation-octagon"></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>
@@ -344,35 +344,35 @@ const App = () => {
       </WaButton>
 
       <WaAlert ref={brand} variant="brand" duration="3000" closable>
-        <WaIcon slot="icon" name="info-circle" />
+        <WaIcon slot="icon" name="circle-info" variant="regular" />
         <strong>This is super informative</strong>
         <br />
         You can tell by how pretty the alert is.
       </WaAlert>
 
       <WaAlert ref={success} variant="success" duration="3000" closable>
-        <WaIcon slot="icon" name="check2-circle" />
+        <WaIcon slot="icon" name="circle-check" variant="regular" />
         <strong>Your changes have been saved</strong>
         <br />
         You can safely exit the app now.
       </WaAlert>
 
       <WaAlert ref={neutral} variant="neutral" duration="3000" closable>
-        <WaIcon slot="icon" name="gear" />
+        <WaIcon slot="icon" name="gear" variant="regular" />
         <strong>Your settings have been updated</strong>
         <br />
         Settings will take effect on next login.
       </WaAlert>
 
       <WaAlert ref={warning} variant="warning" duration="3000" closable>
-        <WaIcon slot="icon" name="exclamation-triangle" />
+        <WaIcon slot="icon" name="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="exclamation-octagon" />
+        <WaIcon slot="icon" name="circle-exclamation" variant="regular" />
         <strong>Your account has been deleted</strong>
         <br />
         We're very sorry to see you go!
@@ -404,13 +404,13 @@ For convenience, you can create a utility that emits toast notifications with a
   }
 
   // Custom function to emit toast notifications
-  function notify(message, variant = 'brand', icon = 'info-circle', duration = 3000) {
+  function notify(message, variant = 'brand', icon = 'circle-info', duration = 3000) {
     const alert = Object.assign(document.createElement('wa-alert'), {
       variant,
       closable: true,
       duration: duration,
       innerHTML: `
-        <wa-icon name="${icon}" slot="icon"></wa-icon>
+        <wa-icon name="${icon}" variant="regular" slot="icon"></wa-icon>
         ${escapeHtml(message)}
       `
     });

docs/pages/components/avatar.md

@@ -57,13 +57,13 @@ const App = () => (
 When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.
 
 ```html:preview
-<wa-avatar initials="SL" label="Avatar with initials: SL"></wa-avatar>
+<wa-avatar initials="WA" label="Avatar with initials: SL"></wa-avatar>
 ```
 
 ```jsx:react
 import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
-const App = () => <WaAvatar initials="SL" label="Avatar with initials: SL" />;
+const App = () => <WaAvatar initials="WA" label="Avatar with initials: SL" />;
 ```
 
 ### Custom Icons
@@ -72,15 +72,15 @@ When no image or initials are set, an icon will be shown. The default avatar sho
 
 ```html:preview
 <wa-avatar label="Avatar with an image icon">
-  <wa-icon slot="icon" name="image"></wa-icon>
+  <wa-icon slot="icon" name="image" variant="solid"></wa-icon>
 </wa-avatar>
 
 <wa-avatar label="Avatar with an archive icon">
-  <wa-icon slot="icon" name="archive"></wa-icon>
+  <wa-icon slot="icon" name="archive" variant="solid"></wa-icon>
 </wa-avatar>
 
 <wa-avatar label="Avatar with a briefcase icon">
-  <wa-icon slot="icon" name="briefcase"></wa-icon>
+  <wa-icon slot="icon" name="briefcase" variant="solid"></wa-icon>
 </wa-avatar>
 ```
 

docs/pages/components/breadcrumb-item.md

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

docs/pages/components/breadcrumb.md

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

docs/pages/components/button-group.md

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

docs/pages/components/button.md

@@ -229,54 +229,54 @@ Use the `prefix` and `suffix` slots to add icons.
 
 ```html:preview
 <wa-button size="small">
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button size="small">
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button size="small">
-  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
-  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 
 <br /><br />
 
 <wa-button>
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button>
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button>
-  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
-  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 
 <br /><br />
 
 <wa-button size="large">
-  <wa-icon slot="prefix" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button size="large">
-  <wa-icon slot="suffix" name="arrow-counterclockwise"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button size="large">
-  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
-  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 ```
@@ -288,18 +288,18 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 const App = () => (
   <>
     <WaButton size="small">
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
       Settings
     </WaButton>
 
     <WaButton size="small">
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
       Refresh
     </WaButton>
 
     <WaButton size="small">
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
+      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
       Open
     </WaButton>
 
@@ -307,18 +307,18 @@ const App = () => (
     <br />
 
     <WaButton>
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
       Settings
     </WaButton>
 
     <WaButton>
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
       Refresh
     </WaButton>
 
     <WaButton>
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
+      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
       Open
     </WaButton>
 
@@ -326,18 +326,18 @@ const App = () => (
     <br />
 
     <WaButton size="large">
-      <WaIcon slot="prefix" name="gear"></WaIcon>
+      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
       Settings
     </WaButton>
 
     <WaButton size="large">
-      <WaIcon slot="suffix" name="arrow-counterclockwise"></WaIcon>
+      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
       Refresh
     </WaButton>
 
     <WaButton size="large">
-      <WaIcon slot="prefix" name="link-45deg"></WaIcon>
-      <WaIcon slot="suffix" name="box-arrow-up-right"></WaIcon>
+      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
+      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
       Open
     </WaButton>
   </>
@@ -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/components/card.md

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

docs/pages/components/copy-button.md

@@ -51,9 +51,9 @@ Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the ico
 
 ```html:preview
 <wa-copy-button value="Copied from a custom button">
-  <wa-icon slot="copy-icon" name="clipboard"></wa-icon>
-  <wa-icon slot="success-icon" name="clipboard-check"></wa-icon>
-  <wa-icon slot="error-icon" name="clipboard-x"></wa-icon>
+  <wa-icon slot="copy-icon" name="clipboard" variant="regular"></wa-icon>
+  <wa-icon slot="success-icon" name="thumbs-up" variant="solid"></wa-icon>
+  <wa-icon slot="error-icon" name="xmark" variant="solid"></wa-icon>
 </wa-copy-button>
 ```
 
@@ -64,9 +64,9 @@ import { WaIcon } from '@shoelace-style/shoelace/dist/react/icon';
 const App = () => (
   <>
     <WaCopyButton value="Copied from a custom button">
-      <WaIcon slot="copy-icon" name="clipboard" />
-      <WaIcon slot="success-icon" name="clipboard-check" />
-      <WaIcon slot="error-icon" name="clipboard-x" />
+      <WaIcon slot="copy-icon" name="clipboard" variant="regular" />
+      <WaIcon slot="success-icon" name="check" variant="solid" />
+      <WaIcon slot="error-icon" name="xmark" variant="solid" />
     </WaCopyButton>
   </>
 );
@@ -179,9 +179,9 @@ You can customize the button to your liking with CSS.
 
 ```html:preview
 <wa-copy-button value="I'm so stylish" class="custom-styles">
-  <wa-icon slot="copy-icon" name="asterisk"></wa-icon>
-  <wa-icon slot="success-icon" name="check-lg"></wa-icon>
-  <wa-icon slot="error-icon" name="x-lg"></wa-icon>
+  <wa-icon slot="copy-icon" name="clipboard"></wa-icon>
+  <wa-icon slot="success-icon" name="thumbs-up"></wa-icon>
+  <wa-icon slot="error-icon" name="thumbs-down"></wa-icon>
 </wa-copy-button>
 
 <style>

docs/pages/components/details.md

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

docs/pages/components/dialog.md

@@ -165,7 +165,7 @@ The header shows a functional close button by default. You can use the `header-a
 
 ```html:preview
 <wa-dialog label="Dialog" class="dialog-header-actions">
-  <wa-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></wa-icon-button>
+  <wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand">Close</wa-button>
 </wa-dialog>
@@ -199,7 +199,7 @@ const App = () => {
         <WaIconButton
           class="new-window"
           slot="header-actions"
-          name="box-arrow-up-right"
+          name="arrow-up-right-from-square"
           onClick={() => window.open(location.href)}
         />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.

docs/pages/components/drawer.md

@@ -375,7 +375,7 @@ The header shows a functional close button by default. You can use the `header-a
 
 ```html:preview
 <wa-drawer label="Drawer" class="drawer-header-actions">
-  <wa-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></wa-icon-button>
+  <wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand">Close</wa-button>
 </wa-drawer>
@@ -406,7 +406,7 @@ const App = () => {
   return (
     <>
       <WaDrawer label="Drawer" open={open} onWaAfterHide={() => setOpen(false)}>
-        <WaIconButton slot="header-actions" name="box-arrow-up-right" onClick={() => window.open(location.href)} />
+        <WaIconButton slot="header-actions" name="arrow-up-right-from-square" onClick={() => window.open(location.href)} />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         <WaButton slot="footer" variant="brand" onClick={() => setOpen(false)}>
           Close

docs/pages/components/dropdown.md

@@ -22,11 +22,11 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
     <wa-divider></wa-divider>
     <wa-menu-item>
       Prefix
-      <wa-icon slot="prefix" name="gift"></wa-icon>
+      <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
     </wa-menu-item>
     <wa-menu-item>
       Suffix Icon
-      <wa-icon slot="suffix" name="heart"></wa-icon>
+      <wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
     </wa-menu-item>
   </wa-menu>
 </wa-dropdown>

docs/pages/components/icon-button.md

@@ -24,9 +24,9 @@ const App = () => <WaIconButton name="gear" label="Settings" />;
 Icon buttons inherit their parent element's `font-size`.
 
 ```html:preview
-<wa-icon-button name="pencil" label="Edit" style="font-size: 1.5rem;"></wa-icon-button>
-<wa-icon-button name="pencil" label="Edit" style="font-size: 2rem;"></wa-icon-button>
-<wa-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></wa-icon-button>
+<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 1.5rem;"></wa-icon-button>
+<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2rem;"></wa-icon-button>
+<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2.5rem;"></wa-icon-button>
 ```
 
 {% raw %}
@@ -36,9 +36,9 @@ import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
 const App = () => (
   <>
-    <WaIconButton name="pencil" label="Edit" style={{ fontSize: '1.5rem' }} />
-    <WaIconButton name="pencil" label="Edit" style={{ fontSize: '2rem' }} />
-    <WaIconButton name="pencil" label="Edit" style={{ fontSize: '2.5rem' }} />
+    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '1.5rem' }} />
+    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '2rem' }} />
+    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '2.5rem' }} />
   </>
 );
 ```
@@ -51,9 +51,9 @@ Icon buttons are designed to have a uniform appearance, so their color is not in
 
 ```html:preview
 <div class="icon-button-color">
-  <wa-icon-button name="type-bold" label="Bold"></wa-icon-button>
-  <wa-icon-button name="type-italic" label="Italic"></wa-icon-button>
-  <wa-icon-button name="type-underline" label="Underline"></wa-icon-button>
+  <wa-icon-button name="bold" variant="solid" label="Bold"></wa-icon-button>
+  <wa-icon-button name="italic" variant="solid" label="Italic"></wa-icon-button>
+  <wa-icon-button name="underline" variant="solid" label="Underline"></wa-icon-button>
 </div>
 
 <style>
@@ -93,9 +93,9 @@ const css = `
 const App = () => (
   <>
     <div className="icon-button-color">
-      <WaIconButton name="type-bold" label="Bold" />
-      <WaIconButton name="type-italic" label="Italic" />
-      <WaIconButton name="type-underline" label="Underline" />
+      <WaIconButton name="type-bold" variant="solid" label="Bold" />
+      <WaIconButton name="type-italic" variant="solid" label="Italic" />
+      <WaIconButton name="type-underline" variant="solid" label="Underline" />
     </div>
 
     <style>{css}</style>
@@ -108,13 +108,13 @@ const App = () => (
 Use the `href` attribute to convert the button to a link.
 
 ```html:preview
-<wa-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>
+<wa-icon-button name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>
 ```
 
 ```jsx:react
 import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
-const App = () => <WaIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
+const App = () => <WaIconButton name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank" />;
 ```
 
 ### Icon Button with Tooltip
@@ -123,7 +123,7 @@ Wrap a tooltip around an icon button to provide contextual information to the us
 
 ```html:preview
 <wa-tooltip content="Settings">
-  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+  <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
 </wa-tooltip>
 ```
 
@@ -133,7 +133,7 @@ import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
 
 const App = () => (
   <WaTooltip content="Settings">
-    <WaIconButton name="gear" label="Settings" />
+    <WaIconButton name="gear" variant="solid" label="Settings" />
   </WaTooltip>
 );
 ```
@@ -143,11 +143,11 @@ const App = () => (
 Use the `disabled` attribute to disable the icon button.
 
 ```html:preview
-<wa-icon-button name="gear" label="Settings" disabled></wa-icon-button>
+<wa-icon-button name="gear" variant="solid" label="Settings" disabled></wa-icon-button>
 ```
 
 ```jsx:react
 import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
 
-const App = () => <WaIconButton name="gear" label="Settings" disabled />;
+const App = () => <WaIconButton name="gear" variant="solid" label="Settings" disabled />;
 ```

docs/pages/components/icon.md

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

docs/pages/components/input.md

@@ -205,18 +205,18 @@ Use the `prefix` and `suffix` slots to add icons.
 
 ```html:preview
 <wa-input placeholder="Small" size="small">
-  <wa-icon name="house" slot="prefix"></wa-icon>
-  <wa-icon name="chat" slot="suffix"></wa-icon>
+  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-input>
 <br />
 <wa-input placeholder="Medium" size="medium">
-  <wa-icon name="house" slot="prefix"></wa-icon>
-  <wa-icon name="chat" slot="suffix"></wa-icon>
+  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-input>
 <br />
 <wa-input placeholder="Large" size="large">
-  <wa-icon name="house" slot="prefix"></wa-icon>
-  <wa-icon name="chat" slot="suffix"></wa-icon>
+  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-input>
 ```
 
@@ -227,18 +227,18 @@ import WaInput from '@shoelace-style/shoelace/dist/react/input';
 const App = () => (
   <>
     <WaInput placeholder="Small" size="small">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
+      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
+      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
     </WaInput>
     <br />
     <WaInput placeholder="Medium" size="medium">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
+      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
+      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
     </WaInput>
     <br />
     <WaInput placeholder="Large" size="large">
-      <WaIcon name="house" slot="prefix"></WaIcon>
-      <WaIcon name="chat" slot="suffix"></WaIcon>
+      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
+      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
     </WaInput>
   </>
 );

docs/pages/components/menu-item.md

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

docs/pages/components/option.md

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

docs/pages/components/popup.md

@@ -1530,6 +1530,131 @@ const App = () => {
 };
 ```
 
+### Hover Bridge
+
+When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the gap using an invisible element. This makes listening for events such as `mouseover` and `mouseout` more sane because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is active. For demonstration purposes, the bridge in this example is shown in orange.
+
+```html:preview
+<div class="popup-hover-bridge">
+  <wa-popup placement="top" hover-bridge distance="10" skidding="0" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </wa-popup>
+  <br>
+  <wa-switch checked>Hover Bridge</wa-switch><br>
+  <wa-range min="0" max="50" step="1" value="10" label="Distance"></wa-range>
+  <wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
+</div>
+<style>
+  .popup-hover-bridge span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--wa-color-neutral-spot);
+    margin: 50px;
+  }
+
+  .popup-hover-bridge .box {
+    width: 100px;
+    height: 50px;
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
+  }
+
+  .popup-hover-bridge wa-range {
+    max-width: 260px;
+    margin-top: .5rem;
+  }
+
+  .popup-hover-bridge wa-popup::part(hover-bridge) {
+    background: tomato;
+    opacity: .5;
+  }
+</style>
+<script>
+  const container = document.querySelector('.popup-hover-bridge');
+  const popup = container.querySelector('wa-popup');
+  const hoverBridge = container.querySelector('wa-switch');
+  const distance = container.querySelector('wa-range[label="Distance"]');
+  const skidding = container.querySelector('wa-range[label="Skidding"]');
+  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
+  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
+  hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
+</script>
+```
+
+```jsx:react
+import { useState } from 'react';
+import WaPopup from '@shoelace-style/shoelace/dist/react/popup';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
+const css = `
+  .popup-hover-bridge span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--wa-color-neutral-spot);
+    margin: 50px;
+  }
+
+  .popup-hover-bridge .box {
+    width: 100px;
+    height: 50px;
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
+  }
+
+  .popup-hover-bridge wa-range {
+    max-width: 260px;
+    margin-top: .5rem;
+  }
+
+  .popup-hover-bridge wa-popup::part(hover-bridge) {
+    background: tomato;
+    opacity: .5;
+  }
+`;
+const App = () => {
+  const [hoverBridge, setHoverBridge] = useState(true);
+  const [distance, setDistance] = useState(10);
+  const [skidding, setSkidding] = useState(0);
+  return (
+    <>
+      <div class="popup-hover-bridge">
+        <WaPopup placement="top" hover-bridge={hoverBridge} distance={distance} skidding={skidding} active>
+          <span slot="anchor" />
+          <div class="box" />
+        </WaPopup>
+        <br />
+        <WaSwitch
+          checked={hoverBridge}
+          onWaChange={event => setHoverBridge(event.target.checked)}
+         >
+          Hover Bridge
+        </WaSwitch><br />
+        <WaRange
+          min="0"
+          max="50"
+          step="1"
+          value={distance}
+          label="Distance"
+          onWaInput={event => setDistance(event.target.value)}
+        />
+        <WaRange
+          min="-50"
+          max="50"
+          step="1"
+          value={skidding}
+          label="Skidding"
+          onWaInput={event => setSkidding(event.target.value)}
+        />
+      </div>
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
 ### Virtual Elements
 
 In most cases, popups are anchored to an actual element. Sometimes, it can be useful to anchor them to a non-element. To do this, you can pass a `VirtualElement` to the anchor property. A virtual element must contain a function called `getBoundingClientRect()` that returns a [`DOMRect`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) object as shown below.

docs/pages/components/progress-bar.md

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

docs/pages/components/progress-ring.md

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

docs/pages/components/radio-button.md

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

docs/pages/components/rating.md

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

docs/pages/components/select.md

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

docs/pages/components/split-panel.md

@@ -638,7 +638,7 @@ You can target the `divider` part to apply CSS properties to the divider. To add
 
 ```html:preview
 <wa-split-panel style="--divider-width: 20px;">
-  <wa-icon slot="divider" name="grip-vertical"></wa-icon>
+  <wa-icon slot="divider" name="grip-vertical" variant="solid"></wa-icon>
   <div
     slot="start"
     style="
@@ -676,7 +676,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <WaSplitPanel style={{ '--divider-width': '20px' }}>
-    <WaIcon slot="divider" name="grip-vertical" />
+    <WaIcon slot="divider" name="grip-vertical" variant="solid" />
     <div
       slot="start"
       style={{
@@ -712,7 +712,7 @@ Here's a more elaborate example that changes the divider's color and width and a
 ```html:preview
 <div class="split-panel-divider">
   <wa-split-panel>
-    <wa-icon slot="divider" name="grip-vertical"></wa-icon>
+    <wa-icon slot="divider" name="grip-vertical" variant="solid"></wa-icon>
     <div
       slot="start"
       style="
@@ -744,7 +744,7 @@ Here's a more elaborate example that changes the divider's color and width and a
 
 <style>
   .split-panel-divider wa-split-panel {
-    --divider-width: 2px;
+    --divider-width: 4px;
   }
 
   .split-panel-divider wa-split-panel::part(divider) {
@@ -756,7 +756,7 @@ Here's a more elaborate example that changes the divider's color and width and a
     border-radius: var(--wa-corners-l);
     background: var(--wa-color-red-50);
     color: white;
-    padding: 0.5rem 0.125rem;
+    padding: 0.5rem 0.25rem;
   }
 
   .split-panel-divider wa-split-panel::part(divider):focus-visible {
@@ -778,8 +778,8 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const css = `
   .split-panel-divider wa-split-panel {
-    --divider-width: 2px;
-  }
+    --divider-width: 4px;
+    }
 
   .split-panel-divider wa-split-panel::part(divider) {
     background-color: var(--wa-color-red-50);
@@ -790,7 +790,7 @@ const css = `
     border-radius: var(--wa-corners-xs);
     background: var(--wa-color-red-50);
     color: white;
-    padding: .5rem .125rem;
+    padding: .5rem .25rem;
   }
 
   .split-panel-divider wa-split-panel::part(divider):focus-visible {
@@ -807,7 +807,7 @@ const App = () => (
   <>
     <div className="split-panel-divider">
       <WaSplitPanel>
-        <WaIcon slot="divider" name="grip-vertical" />
+        <WaIcon slot="divider" name="grip-vertical" variant="solid" />
         <div
           slot="start"
           style={{

docs/pages/components/tree.md

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

docs/pages/components/visually-hidden.md

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

docs/pages/experimental/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

@@ -47,31 +47,31 @@ meta:
 
 ```html:preview
 <wa-alert variant="brand" open>
-  <wa-icon slot="icon" name="info-circle"></wa-icon>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   <strong>This is super informative</strong><br />
   You can tell by how pretty the alert is.
 </wa-alert>
 <br />
 <wa-alert variant="success" open>
-  <wa-icon slot="icon" name="check2-circle"></wa-icon>
+  <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
   <strong>Your changes have been saved</strong><br />
   You can safely exit the app now.
 </wa-alert>
 <br />
 <wa-alert variant="neutral" open>
-  <wa-icon slot="icon" name="gear"></wa-icon>
+  <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
   <strong>Your settings have been updated</strong><br />
   Settings will take affect on next login.
 </wa-alert>
 <br />
 <wa-alert variant="warning" open>
-  <wa-icon slot="icon" name="exclamation-triangle"></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="exclamation-octagon"></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/getting-started/usage.md

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

docs/pages/resources/changelog.md

@@ -14,6 +14,10 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 ## 3.0 Changes (BREAKING)
 
+- Added `setKitCode()` and `getKitCode()` functions as well as support for setting kit codes declaratively with `data-webawesome-kit`
+- Added `family` and `variant` attributes to `<wa-icon>` and `<wa-icon-button>`
+- Changed the attribute for setting the base path declaratively to `data-webawesome` instead of `data-shoelace`; additionally, you can place it on any element now instead of just the associated `<script>` tag
+- `<wa-icon>` icons are no longer fixed width by default to accommodate variable width icons
 - Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
 - Changed `primary` variants to `brand` in all components
 - Improved submenu selection by implementing the [safe triangle](https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) method [#1550]
@@ -22,6 +26,23 @@ 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
+
+- Added the Italian translation [#1727]
 - Added the ability to call `form.checkValidity()` and it will use Shoelace's custom `checkValidity()` handler. [#1708]
 - Fixed a bug where nested dialogs were not properly trapping focus. [#1711]
 - Fixed a bug with form controls removing the custom validity handlers from the form. [#1708]
@@ -1324,7 +1345,7 @@ The component API remains the same except for the changes noted below. Thanks fo
 - 🚨 BREAKING: moved the base stylesheet from `dist/shoelace.css` to `dist/themes/base.css`
 - 🚨 BREAKING: moved `icons` into `assets/icons` to make future assets easier to colocate
 - 🚨 BREAKING: changed `getSymbol` property in `<wa-rating>` to `symbol` (it now accepts a string or a function that returns an icon name)
-- 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-webawesome` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
+- 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-web-awesome` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
 - Fixed `min` and `max` types in `<wa-input>` to allow numbers and strings [#330]
 - Fixed a bug where `<wa-checkbox>`, `<wa-radio>`, and `<wa-switch>` controls would shrink with long labels [#325]
 - Fixed a bug in `<wa-select>` where the dropdown menu wouldn't reposition when the box resized [#340]

docs/pages/resources/community.md

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

docs/pages/resources/contributing.md

@@ -439,7 +439,7 @@ Form controls should support submission and validation through the following con
 Avoid inlining SVG icons inside of templates. If a component requires an icon, make sure `<wa-icon>` is a dependency of the component and use the [system library](/components/icon#customizing-the-system-library):
 
 ```html
-<wa-icon library="system" name="..."></wa-icon>
+<wa-icon library="system" name="..." variant="..."></wa-icon>
 ```
 
 This will render the icons instantly whereas the default library will fetch them from a remote source. If an icon isn't available in the system library, you will need to add it to `library.system.ts`. Using the system library ensures that all icons load instantly and are customizable by users who wish to provide a custom resolver for the system library.

docs/pages/tokens/borders.md

@@ -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",
@@ -66,7 +68,6 @@
         "markdown-it-mark": "^3.0.1",
         "markdown-it-replace-it": "^1.0.0",
         "npm-check-updates": "^16.14.6",
-        "ora": "^7.0.1",
         "pascal-case": "^3.1.2",
         "plop": "^4.0.0",
         "prettier": "^3.0.3",
@@ -6761,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",
@@ -23703,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",
@@ -119,7 +121,6 @@
     "markdown-it-mark": "^3.0.1",
     "markdown-it-replace-it": "^1.0.0",
     "npm-check-updates": "^16.14.6",
-    "ora": "^7.0.1",
     "pascal-case": "^3.1.2",
     "plop": "^4.0.0",
     "prettier": "^3.0.3",

scripts/build.js

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

scripts/make-icons.js

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

scripts/make-react.js

@@ -25,10 +25,10 @@ for await (const component of components) {
   const componentFile = path.join(componentDir, 'index.ts');
   const importPath = component.path.replace(/\.js$/, '.component.js');
   const eventImports = (component.events || [])
-    .map(event => `import type { ${event.eventName} } from '../../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 || [])

scripts/make-themes.js

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

src/components/alert/alert.component.ts

@@ -33,7 +33,7 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'wa
  * @csspart base - The component's base wrapper.
  * @csspart icon - The container that wraps the optional icon.
  * @csspart message - The container that wraps the alert's main content.
- * @csspart close-button - The close button, an `<wa-icon-button>`.
+ * @csspart close-button - The close button, a `<wa-icon-button>`.
  * @csspart close-button__base - The close button's exported `base` part.
  *
  * @cssproperty --background - The alert's background styles.
@@ -222,8 +222,9 @@ export default class WaAlert extends WebAwesomeElement {
                 part="close-button"
                 exportparts="base:close-button__base"
                 class="alert__close-button"
-                name="x-lg"
+                name="xmark"
                 library="system"
+                variant="solid"
                 label=${this.localize.term('close')}
                 @click=${this.handleCloseClick}
               ></wa-icon-button>

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

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

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

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

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/avatar/avatar.component.ts

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

src/components/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/breadcrumb/breadcrumb.component.ts

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

src/components/button/button.component.ts

@@ -34,7 +34,7 @@ import type { WebAwesomeFormControl } from '../../internal/webawesome-element.js
  * @csspart prefix - The container that wraps the prefix.
  * @csspart label - The button's label.
  * @csspart suffix - The container that wraps the suffix.
- * @csspart caret - The button's caret icon, an `<wa-icon>` element.
+ * @csspart caret - The button's caret icon, a `<wa-icon>` element.
  * @csspart spinner - The spinner that shows when the button is in the loading state.
  *
  * @cssproperty --background - The button's background styles.
@@ -313,7 +313,17 @@ export default class WaButton extends WebAwesomeElement implements WebAwesomeFor
         <slot part="label" class="button__label"></slot>
         <slot name="suffix" part="suffix" class="button__suffix"></slot>
         ${
-          this.caret ? html` <wa-icon part="caret" class="button__caret" library="system" name="caret"></wa-icon> ` : ''
+          this.caret
+            ? html`
+                <wa-icon
+                  part="caret"
+                  class="button__caret"
+                  library="system"
+                  name="chevron-down"
+                  variant="solid"
+                ></wa-icon>
+              `
+            : ''
         }
         ${this.loading ? html`<wa-spinner part="spinner"></wa-spinner>` : ''}
       </${tag}>

src/components/button/button.styles.ts

@@ -125,7 +125,7 @@ export default css`
     --label-color: var(--wa-color-brand-text-on-spot);
   }
 
-  /* 
+  /*
    * Sizes
    */
 
@@ -298,7 +298,14 @@ export default css`
   }
 
   .button--caret .button__caret {
-    height: auto;
+    display: flex;
+    align-self: center;
+    align-items: center;
+  }
+
+  .button--caret .button__caret::part(svg) {
+    width: 0.875em;
+    height: 0.875em;
   }
 
   /*
@@ -439,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;
@@ -453,7 +456,11 @@ export default class WaCarousel extends WebAwesomeElement {
                   @click=${prevEnabled ? () => this.previous() : null}
                 >
                   <slot name="previous-icon">
-                    <wa-icon library="system" name="${isLtr ? 'chevron-left' : 'chevron-right'}"></wa-icon>
+                    <wa-icon
+                      library="system"
+                      variant="solid"
+                      name="${isLtr ? 'chevron-left' : 'chevron-right'}"
+                    ></wa-icon>
                   </slot>
                 </button>
 
@@ -470,7 +477,11 @@ export default class WaCarousel extends WebAwesomeElement {
                   @click=${nextEnabled ? () => this.next() : null}
                 >
                   <slot name="next-icon">
-                    <wa-icon library="system" name="${isLtr ? 'chevron-right' : 'chevron-left'}"></wa-icon>
+                    <wa-icon
+                      library="system"
+                      variant="solid"
+                      name="${isLtr ? 'chevron-right' : 'chevron-left'}"
+                    ></wa-icon>
                   </slot>
                 </button>
               </div>

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

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

src/components/checkbox/checkbox.styles.ts

@@ -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,
@@ -65,6 +77,7 @@ export default css`
     display: inline-flex;
     width: var(--toggle-size);
     height: var(--toggle-size);
+    scale: 0.75;
   }
 
   /* Focus */
@@ -77,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 '';
     }
@@ -996,7 +996,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
                   >
                     <wa-icon
                       library="system"
-                      name="eyedropper"
+                      name="eye-dropper"
+                      variant="solid"
                       label=${this.localize.term('selectAColorFromTheScreen')}
                     ></wa-icon>
                   </wa-button>

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

@@ -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/copy-button/copy-button.component.ts

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

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

src/components/details/details.styles.ts

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

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

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

src/components/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.component.ts

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

src/components/icon-button/icon-button.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.component.ts

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

src/components/icon/icon.styles.ts

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

src/components/icon/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/icon/library.default.ts

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

src/components/icon/library.system.ts

@@ -1,131 +1,116 @@
 import type { IconLibrary } from './library.js';
 
+function dataUri(svg: string) {
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+
 //
 // System icons are a separate library to ensure they're always available, regardless of how the default icon library is
-// configured or if its icons resolve properly.
+// configured or if its icons resolve properly. All Web Awesome components must use the system library instead of the
+// default library.
 //
-// All Web Awesome components must use the system library instead of the default library. For visual consistency, system
-// icons are a subset of Bootstrap Icons.
-//
-const icons = {
-  caret: `
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <polyline points="6 9 12 15 18 9"></polyline>
-    </svg>
-  `,
-  check: `
-    <svg part="checked-icon" class="checkbox__icon" viewBox="0 0 16 16">
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g stroke="currentColor">
-          <g transform="translate(3.428571, 3.428571)">
-            <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
-            <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
-          </g>
-        </g>
-      </g>
-    </svg>
-  `,
-  'chevron-down': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
-    </svg>
-  `,
-  'chevron-left': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
-    </svg>
-  `,
-  'chevron-right': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
-    </svg>
-  `,
-  copy: `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6ZM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2Z"/>
-    </svg>
-  `,
-  eye: `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
-      <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
-      <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
-    </svg>
-  `,
-  'eye-slash': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
-      <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
-      <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
-      <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
-    </svg>
-  `,
-  eyedropper: `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eyedropper" viewBox="0 0 16 16">
-      <path d="M13.354.646a1.207 1.207 0 0 0-1.708 0L8.5 3.793l-.646-.647a.5.5 0 1 0-.708.708L8.293 5l-7.147 7.146A.5.5 0 0 0 1 12.5v1.793l-.854.853a.5.5 0 1 0 .708.707L1.707 15H3.5a.5.5 0 0 0 .354-.146L11 7.707l1.146 1.147a.5.5 0 0 0 .708-.708l-.647-.646 3.147-3.146a1.207 1.207 0 0 0 0-1.708l-2-2zM2 12.707l7-7L10.293 7l-7 7H2v-1.293z"></path>
-    </svg>
-  `,
-  'grip-vertical': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16">
-      <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
-    </svg>
-  `,
-  indeterminate: `
-    <svg part="indeterminate-icon" class="checkbox__icon" viewBox="0 0 16 16">
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g stroke="currentColor" stroke-width="2">
-          <g transform="translate(2.285714, 6.857143)">
-            <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
-          </g>
-        </g>
-      </g>
-    </svg>
-  `,
-  'person-fill': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
-      <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
-    </svg>
-  `,
-  'play-fill': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
-      <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path>
-    </svg>
-  `,
-  'pause-fill': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause-fill" viewBox="0 0 16 16">
-      <path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"></path>
-    </svg>
-  `,
-  radio: `
-    <svg part="checked-icon" class="radio__icon" viewBox="0 0 16 16">
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g fill="currentColor">
-          <circle cx="8" cy="8" r="3.42857143"></circle>
-        </g>
-      </g>
-    </svg>
-  `,
-  'star-fill': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
-      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
-    </svg>
-  `,
-  'x-lg': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
-      <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
-    </svg>
-  `,
-  'x-circle-fill': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
-      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
-    </svg>
-  `
-};
-
 const systemLibrary: IconLibrary = {
   name: 'system',
-  resolver: (name: keyof typeof icons) => {
-    if (name in icons) {
-      return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
+  resolver: (name: string, family = 'classic', variant = 'solid') => {
+    //
+    // Classic + Solid
+    //
+    if (family === 'classic' && variant === 'solid') {
+      switch (name) {
+        case 'check':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`
+          );
+
+        case 'chevron-down':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`
+          );
+
+        case 'chevron-left':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`
+          );
+
+        case 'chevron-right':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`
+          );
+
+        case 'circle':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`
+          );
+
+        case 'eye-dropper':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`
+          );
+
+        case 'grip-vertical':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`
+          );
+
+        case 'minus':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`
+          );
+
+        case 'pause':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`
+          );
+
+        case 'play':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`
+          );
+
+        case 'star':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`
+          );
+
+        case 'user':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`
+          );
+
+        case 'xmark':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg`
+          );
+      }
     }
+
+    //
+    // Classic + Regular
+    //
+    if (family === 'classic' && variant === 'regular') {
+      switch (name) {
+        case 'circle-xmark':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`
+          );
+
+        case 'copy':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`
+          );
+
+        case 'eye':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`
+          );
+
+        case 'eye-slash':
+          return dataUri(
+            `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`
+          );
+      }
+    }
+
     return '';
   }
 };

src/components/icon/library.ts

@@ -2,7 +2,7 @@ import defaultLibrary from './library.default.js';
 import systemLibrary from './library.system.js';
 import type WaIcon from '../icon/icon.js';
 
-export type IconLibraryResolver = (name: string) => string;
+export type IconLibraryResolver = (name: string, family: string, variant: string) => string;
 export type IconLibraryMutator = (svg: SVGElement) => void;
 export interface IconLibrary {
   name: string;

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

@@ -143,7 +143,7 @@ export default class WaImageComparer extends WebAwesomeElement {
             tabindex="0"
           >
             <slot name="handle">
-              <wa-icon library="system" name="grip-vertical"></wa-icon>
+              <wa-icon library="system" name="grip-vertical" variant="solid"></wa-icon>
             </slot>
           </div>
         </div>

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