Merge branch 'next' into themer

.gitignore

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

cspell.json

@@ -170,10 +170,10 @@
     "valpha",
     "valuenow",
     "valuetext",
+    "WCAG",
     "webawesome",
     "WEBP",
-    "Webpacker",
-    "wordmark"
+    "Webpacker"
   ],
   "ignorePaths": [
     "package.json",

docs/_includes/default.njk

@@ -20,7 +20,7 @@
     <link rel="stylesheet" href="{{ assetUrl('styles/search.css') }}" />
 
     {# Favicons #}
-    <link rel="icon" href="{{ assetUrl('images/logo.svg') }}" type="image/x-icon" />
+    <link rel="icon" href="{{ assetUrl('images/favicon.svg') }}" type="image/x-icon" />
 
     {# Twitter Cards #}
     <meta name="twitter:card" content="summary" />
@@ -35,7 +35,8 @@
 
     {# Web Awesome #}
     <link rel="stylesheet" href="/dist/themes/applied.css" />
-    <link rel="stylesheet" href="/dist/themes/default.css" />
+    <link rel="stylesheet" href="/dist/themes/forms.css" />
+    <link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/default.css" />
     <script type="module" src="/dist/autoloader.js"></script>
 
     {# Set the initial theme and menu states here to prevent flashing #}
@@ -76,7 +77,7 @@
     <aside id="sidebar" data-preserve-scroll>
       <header>
         <a href="/">
-          {% include 'workmark.njk' %}
+          {% include 'logo.njk' %}
         </a>
         <div class="sidebar-version">
           {{ meta.version }}
@@ -84,13 +85,13 @@
       </header>
 
       <div class="sidebar-buttons">
-        <wa-button outline size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
+        <wa-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
           <wa-icon slot="prefix" name="github"></wa-icon> Code
         </wa-button>
-        <wa-button outline size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
+        <wa-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
           <wa-icon slot="prefix" name="star-fill"></wa-icon> Star
         </wa-button>
-        <wa-button outline size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
+        <wa-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
           <wa-icon slot="prefix" name="twitter"></wa-icon> Follow
         </wa-button>
       </div>

docs/_includes/sidebar.njk

@@ -2,8 +2,9 @@
   <li>
     <h2>Experimental</h2>
     <ul>
-      <li><a href="/experimental/style-guide">Style Guide</a></li>
       <li><a href="/experimental/themer">Themer</a></li>
+      <li><a href="/experimental/style-guide">Style Guide</a></li>
+      <li><a href="/experimental/form-validation">Form Validation Styles</a></li>
       <li style="margin-top: .5rem;"><wa-switch id="theme-toggle">Dark mode</wa-switch></li>
       <script type="module">
         // Temporary dark toggle

docs/assets/images/favicon.svg

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

docs/assets/styles/docs.css

@@ -92,7 +92,7 @@ h1:first-of-type {
 }
 
 /* Color matching logos */
-svg.wordmark {
+svg.logo {
   color: var(--wa-color-brand-text-on-surface);
 }
 
@@ -166,6 +166,10 @@ pre:not(:last-child) {
   margin-bottom: 1.5rem;
 }
 
+pre {
+  position: relative;
+}
+
 pre > code {
   display: block;
   background: none !important;
@@ -249,22 +253,22 @@ pre .token.italic {
   top: 0;
   right: 0;
   white-space: normal;
-  color: var(--wa-color-neutral-text-on-vivid);
+  color: var(--wa-color-neutral-text-on-muted-alt);
   transition: 150ms opacity, 150ms scale;
 }
 
 .copy-code-button::part(button) {
-  background-color: var(--wa-color-neutral-fill-vivid);
+  background-color: var(--wa-color-neutral-fill-muted);
   border-radius: 0 var(--wa-corners-1x) 0 var(--wa-corners-1x);
   padding: 0.75rem;
 }
 
 .copy-code-button::part(button):hover {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted), var(--wa-color-tint-hover));
 }
 
 .copy-code-button::part(button):active {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted), var(--wa-color-tint-active));
 }
 
 pre .copy-code-button {
@@ -371,6 +375,10 @@ pre:hover .copy-code-button,
   margin: 0;
 }
 
+#sidebar > header svg {
+  margin-bottom: var(--wa-space-s);
+}
+
 #sidebar > header a {
   display: block;
 }
@@ -438,9 +446,8 @@ pre:hover .copy-code-button,
   font-size: var(--wa-font-size-s);
   color: var(--wa-color-text-quiet);
   text-align: right;
-  margin-top: -0.5rem;
-  margin-right: 1rem;
-  margin-bottom: -0.5rem;
+  margin-top: calc(-1 * var(--wa-space-s));
+  margin-bottom: calc(-1 * var(--wa-space-s));
 }
 
 .sidebar-buttons {
@@ -733,6 +740,10 @@ html.sidebar-open #menu-toggle {
   vertical-align: -2px;
 }
 
+.splash svg {
+  margin-block-end: var(--wa-space-m);
+}
+
 .splash-end {
   display: flex;
   align-items: flex-end;
@@ -745,10 +756,6 @@ html.sidebar-open #menu-toggle {
   height: auto;
 }
 
-.splash .wordmark {
-  max-width: 22rem;
-}
-
 .splash-start h1:first-of-type {
   font-size: var(--wa-font-size-l);
   font-weight: var(--wa-font-weight-normal);
@@ -819,30 +826,10 @@ html.sidebar-open #menu-toggle {
   flex: 1 1 auto;
 }
 
-.repo-button--github wa-icon {
-  color: var(--wa-color-text-normal);
-}
-
-.repo-button--github:hover wa-icon {
+.repo-button wa-icon {
   color: var(--wa-color-text-inverse);
 }
 
-.repo-button--star wa-icon {
-  color: var(--wa-color-yellow-70);
-}
-
-.repo-button--star:hover wa-icon {
-  color: var(--wa-color-yellow-80);
-}
-
-.repo-button--twitter wa-icon {
-  color: var(--wa-color-blue-60);
-}
-
-.repo-button--twitter:hover wa-icon {
-  color: var(--wa-color-blue-70);
-}
-
 @media screen and (max-width: 400px) {
   :not(.sidebar-buttons) > .repo-button {
     width: 100%;

docs/pages/components/alert.md

@@ -54,7 +54,7 @@ Set the `variant` attribute to change the alert's variant.
 <wa-alert variant="neutral" open>
   <wa-icon slot="icon" name="gear"></wa-icon>
   <strong>Your settings have been updated</strong><br />
-  Settings will take affect on next login.
+  Settings will take effect on next login.
 </wa-alert>
 
 <br />
@@ -102,7 +102,7 @@ const App = () => (
       <WaIcon slot="icon" name="gear" />
       <strong>Your settings have been updated</strong>
       <br />
-      Settings will take affect on next login.
+      Settings will take effect on next login.
     </WaAlert>
 
     <br />
@@ -276,7 +276,7 @@ You should always use the `closable` attribute so users can dismiss the notifica
   <wa-alert variant="neutral" duration="3000" closable>
     <wa-icon slot="icon" name="gear"></wa-icon>
     <strong>Your settings have been updated</strong><br />
-    Settings will take affect on next login.
+    Settings will take effect on next login.
   </wa-alert>
 
   <wa-alert variant="warning" duration="3000" closable>
@@ -361,7 +361,7 @@ const App = () => {
         <WaIcon slot="icon" name="gear" />
         <strong>Your settings have been updated</strong>
         <br />
-        Settings will take affect on next login.
+        Settings will take effect on next login.
       </WaAlert>
 
       <WaAlert ref={warning} variant="warning" duration="3000" closable>

docs/pages/components/button.md

@@ -164,7 +164,7 @@ It's often helpful to have a button that works like a link. This is possible by
 ```html:preview
 <wa-button href="https://example.com/">Link</wa-button>
 <wa-button href="https://example.com/" target="_blank">New Window</wa-button>
-<wa-button href="/assets/images/wordmark.svg" download="shoelace.svg">Download</wa-button>
+<wa-button href="/assets/images/logo.svg" download="shoelace.svg">Download</wa-button>
 <wa-button href="https://example.com/" disabled>Disabled</wa-button>
 ```
 
@@ -177,7 +177,7 @@ const App = () => (
     <WaButton href="https://example.com/" target="_blank">
       New Window
     </WaButton>
-    <WaButton href="/assets/images/wordmark.svg" download="shoelace.svg">
+    <WaButton href="/assets/images/logo.svg" download="shoelace.svg">
       Download
     </WaButton>
     <WaButton href="https://example.com/" disabled>

docs/pages/components/radio-button.md

@@ -87,26 +87,26 @@ const App = () => (
 Use the `size` attribute to change a radio button's size.
 
 ```html:preview
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio-button size="small" value="1">Option 1</wa-radio-button>
-  <wa-radio-button size="small" value="2">Option 2</wa-radio-button>
-  <wa-radio-button size="small" value="3">Option 3</wa-radio-button>
+<wa-radio-group size="small" label="Select an option" name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
 </wa-radio-group>
 
 <br />
 
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio-button size="medium" value="1">Option 1</wa-radio-button>
-  <wa-radio-button size="medium" value="2">Option 2</wa-radio-button>
-  <wa-radio-button size="medium" value="3">Option 3</wa-radio-button>
+<wa-radio-group size="medium" label="Select an option" name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
 </wa-radio-group>
 
 <br />
 
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio-button size="large" value="1">Option 1</wa-radio-button>
-  <wa-radio-button size="large" value="2">Option 2</wa-radio-button>
-  <wa-radio-button size="large" value="3">Option 3</wa-radio-button>
+<wa-radio-group size="large" label="Select an option" name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
 </wa-radio-group>
 ```
 
@@ -115,26 +115,26 @@ import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
 import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton size="small" value="1">Option 1</WaRadioButton>
-    <WaRadioButton size="small" value="2">Option 2</WaRadioButton>
-    <WaRadioButton size="small" value="3">Option 3</WaRadioButton>
+  <WaRadioGroup size="small" label="Select an option" name="a" value="1">
+    <WaRadioButton value="1">Option 1</WaRadioButton>
+    <WaRadioButton value="2">Option 2</WaRadioButton>
+    <WaRadioButton value="3">Option 3</WaRadioButton>
   </WaRadioGroup>
 
   <br />
 
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton size="medium" value="1">Option 1</WaRadioButton>
-    <WaRadioButton size="medium" value="2">Option 2</WaRadioButton>
-    <WaRadioButton size="medium" value="3">Option 3</WaRadioButton>
+  <WaRadioGroup size="medium" label="Select an option" name="a" value="1">
+    <WaRadioButton value="1">Option 1</WaRadioButton>
+    <WaRadioButton value="2">Option 2</WaRadioButton>
+    <WaRadioButton value="3">Option 3</WaRadioButton>
   </WaRadioGroup>
 
   <br />
 
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton size="large" value="1">Option 1</WaRadioButton>
-    <WaRadioButton size="large" value="2">Option 2</WaRadioButton>
-    <WaRadioButton size="large" value="3">Option 3</WaRadioButton>
+  <WaRadioGroup size="large" label="Select an option" name="a" value="1">
+    <WaRadioButton value="1">Option 1</WaRadioButton>
+    <WaRadioButton value="2">Option 2</WaRadioButton>
+    <WaRadioButton value="3">Option 3</WaRadioButton>
   </WaRadioGroup>
 );
 ```
@@ -144,26 +144,26 @@ const App = () => (
 Use the `pill` attribute to give radio buttons rounded edges.
 
 ```html:preview
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio-button pill size="small" value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill size="small" value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill size="small" value="3">Option 3</wa-radio-button>
+<wa-radio-group size="small" label="Select an option" name="a" value="1">
+  <wa-radio-button pill value="1">Option 1</wa-radio-button>
+  <wa-radio-button pill value="2">Option 2</wa-radio-button>
+  <wa-radio-button pill value="3">Option 3</wa-radio-button>
 </wa-radio-group>
 
 <br />
 
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio-button pill size="medium" value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill size="medium" value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill size="medium" value="3">Option 3</wa-radio-button>
+<wa-radio-group size="medium" label="Select an option" name="a" value="1">
+  <wa-radio-button pill value="1">Option 1</wa-radio-button>
+  <wa-radio-button pill value="2">Option 2</wa-radio-button>
+  <wa-radio-button pill value="3">Option 3</wa-radio-button>
 </wa-radio-group>
 
 <br />
 
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio-button pill size="large" value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill size="large" value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill size="large" value="3">Option 3</wa-radio-button>
+<wa-radio-group size="large" label="Select an option" name="a" value="1">
+  <wa-radio-button pill value="1">Option 1</wa-radio-button>
+  <wa-radio-button pill value="2">Option 2</wa-radio-button>
+  <wa-radio-button pill value="3">Option 3</wa-radio-button>
 </wa-radio-group>
 ```
 
@@ -172,26 +172,26 @@ import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
 import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
 
 const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton pill size="small" value="1">Option 1</WaRadioButton>
-    <WaRadioButton pill size="small" value="2">Option 2</WaRadioButton>
-    <WaRadioButton pill size="small" value="3">Option 3</WaRadioButton>
+  <WaRadioGroup size="small" label="Select an option" name="a" value="1">
+    <WaRadioButton pill value="1">Option 1</WaRadioButton>
+    <WaRadioButton pill value="2">Option 2</WaRadioButton>
+    <WaRadioButton pill value="3">Option 3</WaRadioButton>
   </WaRadioGroup>
 
   <br />
 
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton pill size="medium" value="1">Option 1</WaRadioButton>
-    <WaRadioButton pill size="medium" value="2">Option 2</WaRadioButton>
-    <WaRadioButton pill size="medium" value="3">Option 3</WaRadioButton>
+  <WaRadioGroup size="medium" label="Select an option" name="a" value="1">
+    <WaRadioButton pill value="1">Option 1</WaRadioButton>
+    <WaRadioButton pill value="2">Option 2</WaRadioButton>
+    <WaRadioButton pill value="3">Option 3</WaRadioButton>
   </WaRadioGroup>
 
   <br />
 
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton pill size="large" value="1">Option 1</WaRadioButton>
-    <WaRadioButton pill size="large" value="2">Option 2</WaRadioButton>
-    <WaRadioButton pill size="large" value="3">Option 3</WaRadioButton>
+  <WaRadioGroup size="large" label="Select an option" name="a" value="1">
+    <WaRadioButton pill value="1">Option 1</WaRadioButton>
+    <WaRadioButton pill value="2">Option 2</WaRadioButton>
+    <WaRadioButton pill value="3">Option 3</WaRadioButton>
   </WaRadioGroup>
 );
 ```

docs/pages/experimental/form-validation.md

@@ -0,0 +1,52 @@
+---
+meta:
+  title: Form Control Validation
+  description: TODO
+---
+
+# Form Control Validation
+
+Adding the `wa-valid` or `wa-invalid` class to a form control will change its appearance. This is useful for applying validation styles to server-rendered form controls.
+
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+  <div>
+    <h3>Valid</h3>
+    <wa-input class="wa-valid" label="Name" help-text="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
+    <wa-select class="wa-valid" label="Choose one" help-text="Make a choice already">
+      <wa-option>There can be only one!</wa-option>
+      <wa-option>Well, maybe two is OK</wa-option>
+    </wa-select>
+    <wa-textarea class="wa-valid" label="Bio" help-text="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
+    <wa-range class="wa-valid" value="50" label="Volume" help-text="Crank it up"></wa-range><br>
+    <wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
+    <wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
+    <wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
+    <wa-switch class="wa-valid">More awesome</wa-switch><br><br>
+    <wa-radio-group class="wa-valid" label="Select an option" name="a" value="1">
+      <wa-radio value="1">Option 1</wa-radio>
+      <wa-radio value="2">Option 2</wa-radio>
+      <wa-radio value="3">Option 3</wa-radio>
+    </wa-radio-group><br>
+    <wa-button variant="brand">Submit Form</wa-button>
+  </div>
+  <div>
+    <h3>Invalid</h3>
+    <wa-input class="wa-invalid" label="Name" help-text="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
+    <wa-select class="wa-invalid" label="Choose one" help-text="Make a choice already">
+      <wa-option>There can be only one!</wa-option>
+      <wa-option>Well, maybe two is OK</wa-option>
+    </wa-select>
+    <wa-textarea class="wa-invalid" label="Bio" help-text="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
+    <wa-range class="wa-invalid" value="50" label="Volume" help-text="Crank it up"></wa-range><br>
+    <wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
+    <wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
+    <wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>
+    <wa-switch class="wa-invalid">More awesome</wa-switch><br><br>
+    <wa-radio-group class="wa-invalid" label="Select an option" name="a" value="1">
+      <wa-radio value="1">Option 1</wa-radio>
+      <wa-radio value="2">Option 2</wa-radio>
+      <wa-radio value="3">Option 3</wa-radio>
+    </wa-radio-group><br>
+    <wa-button variant="brand">Submit Form</wa-button>
+  </div>
+</div>

docs/pages/experimental/style-guide.md

@@ -160,12 +160,3 @@ export function thing() {
   <dt>Definition 3</dt>
   <dd>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</dd>
 </dl>
-
-## Forms
-
-<fieldset>
-  <legend>Fieldset</legend>
-  <label><input type="radio" name="gender" value="Male"> Option 1</label><br>
-  <label><input type="radio" name="gender" value="Female"> Option 2</label><br>
-  <label><input type="radio" name="gender" value="other-none-na"> Option 3</label>
-</fieldset>

docs/pages/experimental/themer.md

@@ -2,6 +2,543 @@
 meta:
   title: Themer
   description: TODO
+toc: false
 ---
 
-# Themer Goes Here
+<!-- Knobs -->
+<div id="knobs">
+  <div class="space-vertically">
+    <a href="/">{% include 'logo.njk' %}</a>
+    <wa-select name="theme" label="Theme" value="default">
+      <wa-option value="default">Default</wa-option>
+      <wa-option value="glassy">Glassy</wa-option>
+      <wa-option value="mellow">Mellow</wa-option>
+      <wa-option value="playful">Playful</wa-option>
+    </wa-select>
+    <wa-select name="heading-text" label="Heading" value="">
+      <wa-option value="">Theme default</wa-option>
+      <wa-option value="serif">Serif</wa-option>
+      <wa-option value="sans-serif">Sans-serif</wa-option>
+      <wa-option value="monospace">Monospace</wa-option>
+      <wa-option value="cursive">Cursive</wa-option>
+    </wa-select>
+    <wa-select name="body-text" label="Body" value="">
+      <wa-option value="">Theme default</wa-option>
+      <wa-option value="serif">Serif</wa-option>
+      <wa-option value="sans-serif">Sans-serif</wa-option>
+      <wa-option value="monospace">Monospace</wa-option>
+      <wa-option value="cursive">Cursive</wa-option>
+    </wa-select>
+    <wa-select name="border-style" label="Border Style" value="solid">
+      <wa-option value="solid">Solid</wa-option>
+      <wa-option value="dashed">Dashed</wa-option>
+      <wa-option value="dotted">Dotted</wa-option>
+      <wa-option value="double">Double</wa-option>
+    </wa-select>
+    <wa-range name="border-width" label="Border Width" min="1" max="5" value="1" step="1" tooltip="none"></wa-range>
+    <wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-range>
+    <wa-range name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-range>
+  </div>
+</div>
+
+<script>
+  const container = document.getElementById('knobs');
+  const themeStylesheet = document.getElementById('theme-stylesheet');
+
+  // Theme
+  container.querySelector('[name="theme"]').addEventListener('wa-change', event => {
+    themeStylesheet.href = `/dist/themes/${event.target.value}.css`;
+  });
+  
+  // Heading text
+  container.querySelector('[name="heading-text"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-font-family-heading', event.target.value);
+  });
+
+  // Body text
+  container.querySelector('[name="body-text"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-font-family-body', event.target.value);
+  });
+
+  // Corners
+  container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-corners-base', `${event.target.value}rem`);
+  });
+
+  // Border width
+  container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-border-width-base', `${event.target.value / 16}rem`);
+  });
+
+  // Border style
+  container.querySelector('[name="border-style"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-border-style', event.target.value);
+  });
+
+  // Spacing style
+  container.querySelector('[name="spacing"]').addEventListener('wa-input', event => {
+    document.documentElement.style.setProperty('--wa-space-base', `${event.target.value}rem`);
+  });
+
+</script>
+
+<style>
+  :root {
+    --knobs-width: 300px;
+  }
+
+  #knobs {
+    position: fixed;
+    z-index: 10;
+    top: 2rem;
+    left: 2rem;
+    background: var(--wa-color-surface-default);
+    border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+    border-radius: var(--wa-corners-2x);
+    box-shadow: var(--wa-shadow-level-2);
+    width: var(--knobs-width);
+    padding: 2rem;
+    margin-inline: auto;
+    margin-block: 0 4rem;
+  }
+
+  #knobs p {
+    margin: 0;
+  }
+</style>
+
+<!-- Preview -->
+<div class="preview-container">
+  <section class="overlap">
+    <h1>Make it Awesome</h1>
+    <wa-card>
+      <div class="grid">
+        <svg class="image" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+          <defs>
+            <linearGradient id="linear-gradient" x1="100" y1="166.04" x2="100" y2="0" gradientUnits="userSpaceOnUse">
+              <stop offset="0" class="gradient-start" stop-color="#f78ca8"/>
+              <stop offset="1" class="gradient-stop" stop-color="#9556d9"/>
+            </linearGradient>
+            <style>
+              .cls-4{stroke-width:0;fill:#3c2358}
+            </style>
+          </defs>
+          <g id="bespin">
+            <path id="sky" d="M171.75 15.52c1.99-.3 3.87 0 5.6 1.07.31.2.45.15.65-.16 2.11-3.3 5.04-5.48 8.91-6.23 4.78-.93 8.95.38 12.48 3.73.2.19.41.37.61.56 0-4.67 0-9.34.01-14.01-.01-.39-.1-.48-.49-.48C133.02.01 66.51 0 0 0v78.43c.31.03.46.29.66.46 6.02 5.38 9.65 12.05 10.81 20.05.12.82.19 1.65.24 2.48.7-.3 1.27-.82 1.93-1.2 2.12-1.21 4.37-1.99 6.82-2.23 4.52-.44 8.61.69 12.21 3.44 3.69 2.82 5.9 6.56 6.6 11.17.15.99.21 2 .2 3 0 .26.02.46.32.57 2.14.78 4 1.98 5.6 3.61.04.04.08.06.13.09.11.11.21.22.32.32.66.84 1.33 1.68 1.87 2.62 1.63 2.87 2.34 5.93 2.03 9.23-.09.92-.33 1.8-.46 2.71v.22c1.01-.42 2.01-.84 3.08-1.11 2.26-.59 4.54-.71 6.85-.37 2.95.43 5.62 1.53 7.96 3.35 3.66 2.85 5.9 6.57 6.59 11.18.15.99.21 2 .2 3 0 .26.02.46.32.57 2.14.78 4 1.98 5.59 3.61.04.04.08.06.13.09l.32.32c.66.84 1.33 1.68 1.87 2.62 1.3 2.27 2.03 4.7 2.09 7.32.01.56.01.57.48.29 3.5-2.11 7.27-3.5 11.3-4.15 1.49-.24 2.99-.38 4.5-.34.5.01.55-.14.39-.55-.73-1.9-1.02-3.88-.94-5.91.14-3.46 1.33-6.53 3.52-9.2 1.73-2.12 3.9-3.62 6.44-4.61.22-.09.36-.17.35-.43-.04-1.69.17-3.35.54-5-3.53-.63-7.06-1.27-10.59-1.89-4.64-.82-9.29-1.63-13.93-2.45-4.27-.75-8.53-1.51-12.8-2.26-.72-.13-.72-.12-.72-.85v-2.5c0-.26.07-.45.24-.65a52.26 52.26 0 0 1 15.31-11.92c.83-.43 1.69-.82 2.52-1.25.21-.11.42-.12.65-.12 1.35 0 2.71-.03 4.06.01.62.02 1.14-.16 1.65-.45 1.73-.99 3.47-1.96 5.26-2.83 3.11-1.52 6.4-2.45 9.83-2.87.32-.04.41-.17.4-.46v-2.71c0-.29.08-.4.38-.39 1.18.01 2.36.01 3.54 0 .29 0 .35.11.34.36-.01.75 0 1.49-.01 2.24 0 .32.05.45.42.44 1.06-.04.95.1.95-.96 0-1.42.01-2.85 0-4.27 0-.36.09-.48.46-.47.87.03 1.74.02 2.6 0 .36 0 .58.06.51.48-.06.36.09.5.46.47.33-.03.66.01.99 0 .32-.02.42.09.42.41-.02 1.21.01 2.43-.02 3.64 0 .4.12.54.5.48.1-.02.21-.01.31 0 .43.05.58-.12.57-.56-.02-1.96 0-3.92-.02-5.88 0-.43.11-.56.55-.55 1.08.03 2.15.03 3.23 0 .38 0 .5.09.49.48-.01 2.1 0 4.2 0 6.3.02.03.05.05.07.08q1.26.08 1.26-1.13c0-.69.02-1.39 0-2.08-.01-.35.11-.44.44-.43 1.68.02 3.37.02 5.05 0 .36 0 .48.09.47.46-.03.97 0 1.94-.01 2.91 0 .62.48.44.8.5.37.07.57-.06.56-.5-.02-1.65 0-3.3-.02-4.94 0-.37.07-.53.48-.5.55.04 1.11.03 1.66 0 .35-.02.44.1.44.44-.01 1.68 0 3.37-.02 5.05 0 .45.1.59.56.59.8 0 .8.03.8-.79v-1.56c0-.25.09-.34.33-.33.73 0 1.46.01 2.19 0 .32 0 .37.15.37.42v2.24c0 .29.06.43.4.44.41 0 .82.11 1.22.17.13-.28.41-.36.65-.49 2.41-1.34 4.98-2.17 7.73-2.42.61-.05 1.21-.08 1.82-.08.63 0 .7-.04.72-.72.04-1.01.18-2 .4-2.98.73-3.42 2.19-6.49 4.48-9.15 2.94-3.42 6.6-5.63 11.05-6.43 4.65-.83 9 .04 13.01 2.53 2.81 1.74 5.01 4.09 6.64 6.96.19.33.33.46.71.2 1.89-1.34 4.03-1.88 6.32-1.86V48.36H167.6a11.05 11.05 0 0 1-10.92-9.3c-.87-5.46 2.69-10.87 8.09-12.24.49-.12.63-.24.45-.78-1.54-4.7 1.62-9.76 6.52-10.5ZM61.4 62c-2.25 2.53-5.1 3.74-8.48 3.74-10.4 0-20.8-.01-31.19 0-3.73 0-6.89-1.3-9.42-4.03-1.78-1.92-2.83-4.2-3.15-6.83-.39-3.28.46-6.21 2.37-8.88.27-.38.67-.66.88-1.09l.53-.53c.97-.79 1.93-1.62 3.11-2.06.89-.33 1.35-.75 1.32-1.79-.03-1.58.32-3.14.95-4.6 2.02-4.69 5.5-7.65 10.57-8.42 5.92-.9 10.54 1.37 13.85 6.32.18.27.3.34.61.16 4.59-2.69 10.17-.74 12.06 4.23.66 1.75.66 3.53.06 5.29-.13.39-.06.52.34.63 4.51 1.28 7.33 4.21 8.18 8.82.62 3.38-.3 6.44-2.6 9.02Z" stroke-width="0" fill="url(#linear-gradient)"/>
+            <path id="city" class="cls-4" d="M179.31 119.35a51.77 51.77 0 0 0-11.3-7.13c-.48-.22-.93-.48-1.52-.47-1.44.04-2.88.01-4.32.02-.25 0-.47-.04-.7-.16-1.47-.81-2.95-1.61-4.42-2.41-3.32-1.8-6.85-2.99-10.59-3.5-.41-.06-.81-.16-1.22-.17-.34 0-.41-.14-.4-.44.01-.75 0-1.49 0-2.24 0-.27-.05-.42-.37-.42-.73.02-1.46.01-2.19 0-.25 0-.34.09-.33.33.01.52 0 1.04 0 1.56 0 .82 0 .79-.8.79-.47 0-.57-.15-.56-.59.03-1.68 0-3.37.02-5.05 0-.34-.09-.46-.44-.44-.55.03-1.11.03-1.66 0-.41-.03-.49.13-.48.5.02 1.65 0 3.3.02 4.94 0 .44-.19.57-.56.5-.32-.06-.81.12-.8-.5.01-.97-.01-1.94.01-2.91 0-.37-.11-.46-.47-.46-1.68.02-3.37.02-5.05 0-.33 0-.46.09-.44.43.03.69 0 1.39 0 2.08q0 1.22-1.26 1.13s-.05-.05-.07-.08c0-2.1-.02-4.2 0-6.3 0-.4-.11-.49-.49-.48-1.08.03-2.15.03-3.23 0-.43-.01-.55.11-.55.55.02 1.96 0 3.92.02 5.88 0 .44-.15.61-.57.56-.1-.01-.21-.02-.31 0-.38.06-.51-.08-.5-.48.03-1.21 0-2.43.02-3.64 0-.32-.1-.43-.42-.41-.33.02-.66-.02-.99 0-.37.03-.52-.11-.46-.47.07-.42-.15-.48-.51-.48-.87.02-1.74.02-2.6 0-.37-.01-.47.11-.46.47.02 1.42 0 2.85 0 4.27 0 1.06.11.92-.95.96-.37.01-.43-.12-.42-.44.02-.75 0-1.49.01-2.24 0-.26-.06-.37-.34-.36-1.18.01-2.36.01-3.54 0-.3 0-.38.1-.38.39.01.9 0 1.8 0 2.71 0 .29-.08.42-.4.46-3.43.42-6.72 1.35-9.83 2.87-1.79.87-3.53 1.84-5.26 2.83-.51.29-1.03.48-1.65.45-1.35-.05-2.71-.01-4.06-.01-.22 0-.44.01-.65.12-.84.43-1.69.82-2.52 1.25a52.39 52.39 0 0 0-15.31 11.92c-.18.2-.25.39-.24.65.01.83 0 1.67 0 2.5 0 .73 0 .72.72.85 4.27.75 8.53 1.51 12.8 2.26 4.64.82 9.29 1.63 13.93 2.45l10.59 1.89c.89.15 1.77.31 2.66.46.53.09 1.02.19 1.49.52 3.96 2.84 7.93 5.66 11.9 8.48.33.24.46.48.46.89-.01 6.16 0 12.32 0 18.49 1.19-.05 2.38.05 3.56.07 0-.66.02-1.32.02-1.98v-16.66c0-.36.09-.59.4-.81 3.96-2.8 7.92-5.61 11.86-8.45.68-.49 1.45-.52 2.21-.66 4.02-.72 8.05-1.42 12.08-2.13.12-.19.24-.38.35-.57 2.78-4.5 6.79-7.02 12.07-7.48 2.11-.18 4.13.21 6.1.91.39.14.5.09.58-.33.28-1.36.75-2.66 1.31-3.93.46-1.03 1.07-1.97 1.61-2.96-.07-.05-.15-.09-.22-.14Z"/>
+            <path id="forefront_clouds" data-name="forefront clouds" d="M0 78.44c.31.03.46.29.66.46 6.02 5.38 9.65 12.05 10.81 20.05.12.82.19 1.65.24 2.48.08 1.35.06 2.7-.02 4.05-.2 3.44-.96 6.75-2.23 9.96-.65 1.65-1.45 3.23-2.36 4.75-.28.47-.26.49.27.54.47.04.93.08 1.39.17 4.47.86 7.92 3.23 10.33 7.08 1.51 2.41 2.21 5.08 2.23 7.91 0 1.73-.35 3.41-.96 5.03-.13.36-.1.49.31.58 4.47 1.04 8.2 3.32 11.16 6.83 2.86 3.39 4.42 7.32 4.69 11.72.21 3.46-.46 6.77-1.99 9.89-.25.51-.18.77.24 1.12 2.2 1.82 4.02 3.97 5.46 6.43.23.39.38.36.7.14 3.29-2.16 6.92-2.9 10.74-2.16 6.1 1.18 10.12 4.82 12.04 10.74.18.55.17.55.65.19 1.39-1.07 2.85-2.04 4.4-2.87 5.52-2.95 11.39-4.27 17.65-3.87 2.72.17 5.37.67 7.95 1.5a31.63 31.63 0 0 1 8.88 4.5c.46.33.51.31.6-.16 1.16-6.42 4.3-11.66 9.42-15.69 3.29-2.59 7.03-4.22 11.16-4.95.97-.17 1.96-.22 2.93-.38 1.19-.05 2.38.05 3.56.07 5.54.48 10.39 2.61 14.66 6.27.13-1.32.2-2.53.43-3.73 1.46-7.48 5.45-13.2 11.93-17.2.39-.24.46-.36.19-.76-2.18-3.3-2.78-6.93-2.15-10.8.25-1.57.82-3.04 1.5-4.47.12-.19.24-.38.35-.57 2.78-4.5 6.79-7.02 12.07-7.48 2.11-.18 4.13.21 6.1.91.39.14.5.09.58-.33.28-1.36.75-2.66 1.31-3.93.46-1.03 1.07-1.97 1.61-2.96.08-.09.17-.17.24-.27 1.04-1.51 2.28-2.84 3.68-4.01 3.67-3.05 7.89-4.61 12.66-4.71 1.31-.03 2.59.17 3.88.32v88.68c0 .37-.05.49-.47.49-66.36-.01-132.71-.01-199.07 0-.42 0-.46-.13-.46-.5V78.43Z" fill="#f9b4d9" stroke-width="0"/>
+            <path id="upper_clouds" data-name="upper clouds" d="M199.99 48.34H167.6a11.05 11.05 0 0 1-10.92-9.3c-.87-5.46 2.69-10.87 8.09-12.24.49-.12.63-.24.45-.78-1.54-4.7 1.62-9.76 6.52-10.5 1.99-.3 3.87 0 5.6 1.07.31.2.45.15.65-.16 2.11-3.3 5.04-5.48 8.91-6.23 4.78-.93 8.95.38 12.48 3.73.2.19.41.37.61.56v33.85ZM12.41 44.92c-.21.43-.61.71-.88 1.09-1.91 2.66-2.76 5.59-2.37 8.88.31 2.63 1.37 4.91 3.15 6.83 2.53 2.73 5.68 4.04 9.42 4.03 10.4-.02 20.8 0 31.19 0 3.38 0 6.23-1.2 8.48-3.74 2.3-2.59 3.22-5.64 2.6-9.02-.85-4.61-3.68-7.53-8.18-8.82-.4-.11-.48-.24-.34-.63.6-1.77.6-3.55-.06-5.29-1.89-4.96-7.46-6.91-12.06-4.23-.31.18-.43.11-.61-.16-3.32-4.95-7.93-7.22-13.85-6.32-5.07.77-8.55 3.72-10.57 8.42-.63 1.47-.98 3.02-.95 4.6.02 1.05-.43 1.46-1.32 1.79-1.18.44-2.14 1.27-3.11 2.06l-.53.53Z" fill="#eeb6e5" stroke-width="0"/>
+            <path id="background_clouds" data-name="background clouds" d="M199.99 110.83c-1.29-.15-2.57-.34-3.88-.32-4.77.09-8.99 1.66-12.66 4.71-1.41 1.17-2.64 2.5-3.68 4.01-.07.1-.16.18-.24.27-.07-.05-.15-.09-.22-.14a51.77 51.77 0 0 0-11.3-7.13c-.48-.22-.93-.48-1.52-.47-1.44.04-2.88.01-4.32.02-.25 0-.47-.04-.7-.16-1.47-.81-2.95-1.61-4.42-2.41-3.32-1.8-6.85-2.99-10.59-3.5.13-.28.41-.36.65-.49 2.41-1.34 4.98-2.17 7.73-2.42.61-.05 1.21-.08 1.82-.08.63 0 .7-.04.72-.72.04-1.01.18-2 .4-2.98.73-3.42 2.19-6.49 4.48-9.15 2.94-3.42 6.6-5.63 11.05-6.43 4.65-.83 9 .04 13.01 2.53 2.81 1.74 5.01 4.09 6.64 6.96.19.33.33.46.71.2 1.89-1.34 4.03-1.88 6.32-1.86v19.58Zm-72.62 35.16c0-.41-.12-.65-.46-.89-3.98-2.81-7.95-5.63-11.9-8.48-.47-.34-.96-.44-1.49-.52-.89-.15-1.77-.3-2.66-.46-.37 1.65-.58 3.31-.54 5 0 .26-.13.35-.35.43-2.54.98-4.71 2.49-6.44 4.61-2.19 2.68-3.39 5.74-3.52 9.2-.08 2.03.2 4.01.94 5.91.16.42.11.56-.39.55-1.51-.04-3.01.1-4.5.34-4.03.65-7.8 2.04-11.3 4.15-.47.28-.46.28-.48-.29-.07-2.62-.79-5.05-2.09-7.32-.54-.94-1.21-1.78-1.87-2.62-.11-.11-.21-.22-.32-.32-.04-.03-.09-.05-.13-.09a14.968 14.968 0 0 0-5.59-3.61c-.3-.11-.32-.31-.32-.57.02-1.01-.05-2.01-.2-3-.7-4.61-2.93-8.33-6.59-11.18-2.35-1.83-5.02-2.92-7.96-3.35-2.31-.34-4.59-.21-6.85.37-1.06.28-2.07.69-3.08 1.11-.1-.07-.07-.15 0-.22.13-.91.37-1.79.46-2.71.31-3.31-.39-6.36-2.03-9.23-.53-.94-1.2-1.77-1.87-2.62-.11-.11-.21-.22-.32-.32-.04-.03-.09-.05-.13-.09a14.926 14.926 0 0 0-5.6-3.61c-.3-.11-.32-.31-.32-.57.02-1.01-.05-2.01-.2-3-.7-4.61-2.91-8.35-6.6-11.17-3.6-2.75-7.69-3.88-12.21-3.44-2.44.24-4.69 1.02-6.82 2.23-.66.38-1.23.89-1.93 1.2.08 1.35.06 2.7-.02 4.05-.2 3.44-.96 6.75-2.23 9.96-.65 1.65-1.45 3.23-2.36 4.75-.28.47-.26.49.27.54.47.04.93.08 1.39.17 4.47.86 7.92 3.23 10.33 7.08 1.51 2.41 2.21 5.08 2.23 7.91 0 1.73-.35 3.41-.96 5.03-.13.36-.1.49.31.58 4.47 1.04 8.2 3.32 11.16 6.83 2.86 3.39 4.42 7.32 4.69 11.72.21 3.46-.46 6.77-1.99 9.89-.25.51-.18.77.24 1.12 2.2 1.82 4.02 3.97 5.46 6.43.23.39.38.36.7.14 3.29-2.16 6.92-2.9 10.74-2.16 6.1 1.18 10.12 4.82 12.04 10.74.18.55.17.55.65.19 1.39-1.07 2.85-2.04 4.4-2.87 5.52-2.95 11.39-4.27 17.65-3.87 2.72.17 5.37.67 7.95 1.5a31.63 31.63 0 0 1 8.88 4.5c.46.33.51.31.6-.16 1.16-6.42 4.3-11.66 9.42-15.69 3.29-2.59 7.03-4.22 11.16-4.95.97-.17 1.96-.22 2.93-.38v-18.49Zm18.22 24.82c.13-1.32.2-2.53.43-3.73 1.46-7.48 5.45-13.2 11.93-17.2.39-.24.46-.36.19-.76-2.18-3.3-2.78-6.93-2.15-10.8.25-1.57.82-3.04 1.51-4.47-4.03.71-8.06 1.41-12.08 2.13-.75.14-1.52.17-2.21.66-3.94 2.84-7.9 5.65-11.86 8.45-.31.22-.4.45-.4.81.01 5.55 0 11.11 0 16.66 0 .66-.01 1.32-.02 1.98 5.54.48 10.39 2.61 14.66 6.27Z" fill="#fddce4" stroke-width="0"/>
+            <path id="fighters" d="m105.65 67.02-.66-2.46c-.59-2.23-1.19-4.46-1.78-6.68-.09-.35-.23-.66-.62-.77-.71-.19-1.18.32-1.01 1.11.16.73.38 1.44.57 2.16q.39 1.49-1.18 1.51c-.29 0-.53-.02-.74-.27-2.08-2.35-6.01-1.53-6.96 1.49-.21.67-.52 1.09-1.16 1.31-.15.05-.29.13-.42.21-.34.22-.47.08-.56-.27-.25-1.01-.54-2.01-.8-3.02-.17-.64-.59-.94-1.12-.79-.45.13-.65.6-.49 1.2.38 1.43.76 2.85 1.14 4.27.44 1.64.87 3.28 1.31 4.93.09.35.24.67.6.8.29.1.59.07.83-.15.25-.23.33-.51.24-.85-.29-1.05-.57-2.11-.84-3.17-.04-.15-.22-.39.08-.48.52-.17 1.07-.1 1.6-.11.31 0 .42.29.6.46 2.12 2.06 5.82 1.26 6.75-1.52.27-.8.68-1.27 1.42-1.53.08-.03.16-.07.23-.11.34-.23.49-.14.59.27.25 1.04.54 2.08.83 3.12.15.53.49.74.96.68.41-.06.67-.4.67-.94-.01-.07-.04-.22-.08-.37Zm-6.83-4.35c.3 0 .48.3.5.56.03.33-.34.19-.44.31-.28 0-.45-.09-.43-.32.02-.24.12-.54.37-.55Zm-1.4-.71c.2.07.55-.06.51.27-.03.23-.14.57-.5.56-.36 0-.35-.34-.39-.58-.06-.34.23-.19.37-.26Zm-2.73 2.19c.06-.17-.01-.49.31-.44.23.04.51.16.51.49 0 .37-.32.36-.56.38-.28.03-.26-.21-.26-.42Zm1.23 1.52c-.02.24-.13.46-.37.58-.29-.13-.51-.34-.51-.62 0-.3.32-.26.52-.29.23-.03.38.11.36.34Zm.07-2.47c-.25-.01-.51-.14-.62-.39-.05-.12.49-.58.64-.54.28.07.2.36.31.53.01.25-.13.41-.32.4Zm.98 3.77c-.13-.17-.6.09-.54-.33.03-.22.15-.58.51-.56.42.02.4.38.43.66.03.25-.19.24-.4.23Zm.2-1.74a.8.8 0 0 1-.81-.78c0-.43.4-.85.82-.85.43 0 .84.42.83.83-.02.47-.37.8-.85.79Zm1.22 1.38c-.32-.01-.3-.38-.32-.61-.02-.21.2-.34.39-.3.22.05.43.19.58.38-.18.27-.38.54-.65.53Zm1-1.43c-.25 0-.51-.16-.53-.48-.02-.37.31-.33.52-.38.29-.07.3.14.3.38-.05.17.02.49-.29.48Zm41.06 1.2c-.52-.13-.91.16-1.07.78-.28 1.04-.56 2.08-.83 3.12-.08.3-.2.37-.47.23-.35-.19-.71-.37-1.07-.54-.28-.13-.4-.32-.47-.63-.22-.96-.68-1.79-1.49-2.37-1.84-1.33-4.08-1.13-5.66.5-.14.14-.26.27-.48.26-.4-.02-.8-.01-1.2-.02-.4-.01-.54-.18-.41-.6.29-1 .55-2.01.82-3.01.15-.59-.04-1.03-.48-1.15-.55-.15-.95.09-1.12.71-.84 3.13-1.68 6.27-2.51 9.4-.15.56.09 1.01.55 1.12.5.11.91-.16 1.07-.74.21-.79.41-1.58.64-2.36.33-1.16.33-1.15 1.46-.63.36.17.62.36.73.79.47 1.94 2.06 3.16 4.08 3.17 1.22.07 2.21-.47 3.07-1.32.14-.14.26-.27.48-.26.43.02.86 0 1.3.07.4.05.42.21.33.55-.29 1.02-.56 2.04-.81 3.07-.14.58.08.98.51 1.1.52.13.94-.11 1.09-.69.84-3.11 1.67-6.23 2.5-9.35.16-.61-.07-1.06-.54-1.18Zm-8.08 1.37c.16-.04.32 0 .29.25-.11.23-.01.64-.45.63-.34-.01-.48-.37-.47-.59.01-.33.4-.22.63-.29Zm-2.02 1.31c.04-.27.22-.58.52-.57.25 0 .34.33.36.56.01.27-.19.34-.45.31-.15-.08-.47-.02-.43-.31Zm-.35 1.49c.01-.21-.02-.46.27-.4.22.04.56 0 .55.38 0 .32-.26.46-.51.48-.32.03-.26-.29-.31-.46Zm1.33 1.9c-.29 0-.59-.24-.63-.52-.03-.24.3-.36.53-.4.21-.04.39.1.42.37-.13.16.01.55-.32.55Zm1.34.36c-.22 0-.41-.03-.35-.28.07-.25.04-.61.42-.61.37 0 .51.37.51.61 0 .32-.4.19-.58.28Zm-.22-1.75c-.44-.02-.79-.37-.78-.8 0-.43.43-.84.85-.82.43.01.83.44.8.86-.03.47-.39.78-.87.77Zm.92-2.38c.03-.21 0-.58.31-.56.26.01.49.24.64.5-.1.25-.33.36-.56.41-.24.05-.43-.11-.39-.35Zm1.26 2.83c-.05.27-.25.59-.51.58-.24 0-.37-.36-.4-.6-.03-.24.21-.32.47-.32.15.1.51 0 .45.34Zm.06-1.09c-.22-.04-.52-.03-.52-.37 0-.34.27-.5.54-.5.29 0 .24.31.28.47 0 .25-.03.45-.3.4Z" fill="#78206a" stroke-width="0"/>
+            <path id="falcon" class="cls-4" d="M55.44 150.43c-2.18.04-3.97 1-5.51 2.46-.38.36-.74.65-1.3.54-.15-.03-.27.04-.39.11-.75.43-1.51.84-2.24 1.31-.58.37-1.07 1.2-.55 2.06.15.26.63.36.48.73-.12.29-.39.52-.6.78-.13.16-.26.33-.39.49-1.22 1.46-1.16 1.37-.19 3.01.29.5.51.56 1.02.27.92-.52 1.83-1.06 2.75-1.58q1.13-.65 1.76.47c.32.57.28.76-.29 1.09-1.06.62-2.13 1.24-3.2 1.84-.42.23-.52.52-.26.93.16.25.3.51.44.76.45.77.68.87 1.57.73l5.24-.81c1.51-.23 3.02-.41 4.43-1.05 2.93-1.33 4.49-3.58 4.63-6.25.01-4.64-3.31-7.94-7.39-7.87Zm1.74 2.26c.32 0 .45.22.48.51-.03.29-.17.51-.48.5-.31 0-.54-.17-.53-.51 0-.33.2-.51.53-.5Zm-1.59 7.62c-1.44 0-2.67-1.18-2.67-2.56 0-1.19 1.08-2.74 2.63-2.55 1.34-.25 2.62 1.11 2.62 2.47 0 1.46-1.14 2.64-2.58 2.64Zm3.51-4.96c.02-.28.19-.49.51-.47.33.02.51.19.5.53-.01.34-.27.44-.5.54-.34-.1-.53-.3-.51-.6Zm1.16 3.76c-.28-.02-.49-.18-.49-.5 0-.33.2-.49.51-.52.33.02.5.2.5.5 0 .32-.18.53-.51.51Zm-3.14-1.42c0 .88-.67 1.57-1.52 1.58-.88 0-1.64-.71-1.64-1.53 0-.84.75-1.58 1.6-1.59.86 0 1.56.68 1.56 1.54Z"/>
+          </g>
+        </svg>
+        <div class="content">
+          <h2>Here's a heading</h2>
+          <p>
+            This paragraph is a preview of your body text. We've put enough text
+            here to give you a sense of your theme's line length and line height.
+            Adjust your theme's spacing and size to get the fabulous reading
+            experience that you deserve. It's on us - cheers!
+          </p>
+          <p>
+            <wa-button variant="brand">Action</wa-button>
+            <wa-button variant="text">Low emphasis action &rarr;</wa-button>
+          </p>
+        </div>
+      </div>
+    </wa-card>
+    <div class="cards">
+      <wa-card>
+        <div class="space-vertically">
+          <wa-alert variant="success" open>
+            <wa-icon slot="icon" name="check-circle-fill"></wa-icon>
+            This is the way.
+          </wa-alert>
+          <wa-select label="Signet" help-text="This identifies your clan. You can change this later.">
+            <wa-option>Mudhorn</wa-option>
+          </wa-select>
+          <wa-checkbox checked>I swear on my name and the names of the ancestors</wa-checkbox>
+          <wa-button variant="success">Forge</wa-button>
+        </div>
+      </wa-card>
+      <wa-card>
+        <div class="space-vertically">
+          <wa-alert variant="warning" open>
+            <wa-icon slot="icon" name="check-circle-fill"></wa-icon>
+            It's a trap!
+          </wa-alert> 
+          <wa-radio-group label="Faction" value="2">
+            <wa-radio value="1">Galactic Empire</wa-radio>
+            <wa-radio value="2">Rebel Alliance</wa-radio>
+          </wa-radio-group>
+          <wa-input label="Mission" value="Destroy the Death Star"></wa-input>
+          <wa-button variant="warning">Proceed</wa-button>
+        </div>
+      </wa-card>
+      <wa-card>
+        <div class="space-vertically">
+          <wa-alert variant="danger" open>
+            <wa-icon slot="icon" name="check-circle-fill"></wa-icon>
+            That's no moon.
+          </wa-alert>
+          <wa-input label="Destination" value="Alderaan"></wa-input>
+          <wa-switch checked>Jam fighter transmission</wa-switch>
+          <wa-switch disabled>Lock in artillery power</wa-switch>
+          <wa-button variant="danger">Turn around</wa-button>
+        </div>
+      </wa-card>
+    </div>
+
+<style>
+  html {
+    background: white;
+    background-image: radial-gradient(rgb(0 0 0 / .1) 1.5px, transparent 0);
+    background-size: 28px 28px;
+    background-position: -19px -19px;
+    min-height: 100vh;
+  }
+
+  main {
+    margin-left: 0;
+  }
+
+  #menu-toggle,
+  #sidebar {
+    display: none;
+  }
+
+  .content {
+    max-width: 1024px;
+    gap: 0;
+  }
+
+  .preview-container {
+    background: var(--wa-color-surface-lowered);
+    padding-inline: var(--wa-space-xl);
+    padding-block-end: var(--wa-space-2xl);
+    translate: calc((var(--knobs-width) + 2rem) / 2);
+  }
+
+  .overlap {
+    position: relative;
+    color: var(--wa-color-text-normal);
+    padding: 0 var(--wa-space-m);
+    z-index: 1;
+  }
+  
+  .overlap::after {
+    content: '';
+    position: absolute;
+    top: calc(-1 * var(--wa-space-xl));
+    left: calc(-1 * var(--wa-space-xl));
+    width: calc(100% + var(--wa-space-xl) * 2);
+    height: 300px;
+    background: var(--wa-color-brand-fill-vivid);
+    z-index: -1;
+  }
+
+  .overlap h1 {
+    color: var(--wa-color-brand-text-on-vivid);
+  }
+
+  .overlap .grid {
+    display: grid;
+    grid-template-columns: 2fr 3fr;
+    align-items: center;
+    gap: var(--wa-space-xl);
+    padding: var(--wa-space-m);
+  }
+
+  .overlap .image {
+    display: block;
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: var(--wa-corners-2x);
+    align-self: start;
+  }
+
+  .overlap .image #city,
+  .overlap .image #falcon {
+    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), black 50%);
+  }
+
+  .overlap .image #fighters {
+    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), black 30%); 
+  }
+
+  .overlap .image #upper_clouds {
+    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), white 80%);
+  }
+
+  .overlap .image #background_clouds {
+    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), white 90%);
+  }
+
+  .overlap .image #forefront_clouds {
+    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), white 70%);
+  }
+
+  .overlap .image .gradient-start {
+    stop-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), white 80%);
+  }
+
+  .overlap .image .gradient-stop {
+    stop-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), white 0%);
+  }
+
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 1fr;
+    gap: 1rem;
+    margin-block-start: var(--wa-space-m);
+  }
+
+  .cards wa-card::part(base) {
+    height: 100%;
+  }
+
+  .space-vertically {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  wa-select[label="Signet"]::part(form-control-help-text) {
+    line-height: 1.5;
+  }
+
+  @media screen and (max-width: 670px) {
+    .overlap .grid {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  @media screen and (max-width: 1040px) {
+    .cards {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  @media screen and (max-width: 1450px) {
+    .cards {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+</style>
+
+<!-- Style Guide -->
+<wa-card id="style-guide">
+
+## Typography
+
+Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Amet mauris commodo quis imperdiet. Bibendum ut tristique et egestas quis ipsum suspendisse. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat.
+
+Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci. Scelerisque eleifend donec pretium vulputate sapien nec. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque.
+
+> What is a Web year now, about three months? And when people can browse around, discover new things, and download them fast, when we all have agents - then Web years could slip by before human beings can notice.
+>
+> — Tim Berners-Lee
+
+## Inline Text
+
+<div class="docs-grid">
+  <p><strong>Bold</strong></p>
+  <p><em>Italics</em></p>
+  <p><u>Underline</u></p>
+  <p><del>Deleted</del></p>
+  <p><ins>Inserted</ins></p>
+  <p><s>Strike-through</s></p>
+  <p><small>Small</small></p>
+  <p><span>Text <sub>Sub</sub></span></p>
+  <p><span>Text <sup>Sup</sup></span></p>
+  <p><abbr title="Abbreviation">Abbr.</abbr></p>
+  <p><kbd>Keyboard</kbd></p>
+  <p><mark>Highlighted</mark></p>
+  <p><a href="#">Link text</a></p>
+  <p><code>Inline code</code></p>
+</div>
+
+## Lists
+
+- List item 1
+- List item 2
+- List item 3
+  - Subitem a
+  - Subitem b
+
+1. List item 1
+2. List item 2
+3. List item 3
+   - Subitem a
+   - Subitem b
+
+## Headings
+
+### Heading 3
+
+Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id.
+
+#### Heading 4
+
+Gravida arcu ac tortor dignissim convallis aenean. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Donec adipiscing tristique risus nec feugiat in.
+
+##### Heading 5
+
+Enim diam vulputate ut pharetra sit. Enim facilisis gravida neque convallis a cras. Enim neque volutpat ac tincidunt vitae semper. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.
+
+###### Heading 6
+
+Tincidunt ornare massa eget egestas purus viverra accumsan in nisl. Facilisis mauris sit amet massa vitae. Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum.
+
+## Details
+
+Individual details look like this.
+
+<details>
+  <summary>Tincidunt nunc pulvinar</summary>
+  <p>Ut lectus arcu bibendum at varius. Convallis a cras semper auctor neque vitae. Odio pellentesque diam volutpat commodo sed egestas. Amet dictum sit amet justo donec enim diam vulputate ut.</p>
+</details>
+
+Grouping them provides accordion-style functionality.
+
+<details>
+  <summary>Enim diam</summary>
+  <p>Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum. Leo duis ut diam quam nulla porttitor massa id. Mauris nunc congue nisi vitae.</p>
+</details>
+
+<details>
+  <summary>Arcu non odio</summary>
+  <p>Sed libero enim sed faucibus turpis in eu mi bibendum. Nunc mi ipsum faucibus vitae aliquet nec. Ultricies tristique nulla aliquet enim tortor. Tellus at urna condimentum mattis pellentesque.</p>
+</details>
+
+<details>
+  <summary>Ut porttitor</summary>
+  <p>Eu facilisis sed odio morbi quis commodo odio aenean sed. Sit amet purus gravida quis blandit turpis cursus. Eu consequat ac felis donec et odio pellentesque diam volutpat.</p>
+</details>
+
+## Code Blocks
+
+```
+// do a thing
+export function thing() {
+  return true;
+}
+```
+
+## Images
+
+![cat](https://placekitten.com/1200/800)
+
+## Tables
+
+<table>
+  <caption>I'm just a table</caption>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+  </tbody>
+</table>
+
+## Definition Lists
+
+<dl>
+  <dt>Definition 1</dt>
+  <dd>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.</dd>
+  <dt>Definition 2</dt>
+  <dd>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
+  <dt>Definition 3</dt>
+  <dd>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</dd>
+</dl>
+
+<h2>Form Control Validation</h2>
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+  <div>
+    <h3>Valid</h3>
+    <wa-input class="wa-valid" label="Name" help-text="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
+    <wa-select class="wa-valid" label="Choose one" help-text="Make a choice already">
+      <wa-option>There can be only one!</wa-option>
+      <wa-option>Well, maybe two is OK</wa-option>
+    </wa-select>
+    <wa-textarea class="wa-valid" label="Bio" help-text="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
+    <wa-range class="wa-valid" value="50" label="Volume" help-text="Crank it up" tooltip="none"></wa-range><br>
+    <wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
+    <wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
+    <wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
+    <wa-switch class="wa-valid">More awesome</wa-switch><br><br>
+    <wa-radio-group class="wa-valid" label="Select an option" name="a" value="1">
+      <wa-radio value="1">Option 1</wa-radio>
+      <wa-radio value="2">Option 2</wa-radio>
+      <wa-radio value="3">Option 3</wa-radio>
+    </wa-radio-group><br>
+    <wa-button variant="brand">Submit Form</wa-button>
+  </div>
+  <div>
+    <h3>Invalid</h3>
+    <wa-input class="wa-invalid" label="Name" help-text="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
+    <wa-select class="wa-invalid" label="Choose one" help-text="Make a choice already">
+      <wa-option>There can be only one!</wa-option>
+      <wa-option>Well, maybe two is OK</wa-option>
+    </wa-select>
+    <wa-textarea class="wa-invalid" label="Bio" help-text="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
+    <wa-range class="wa-invalid" value="50" label="Volume" help-text="Crank it up" tooltip="none"></wa-range><br>
+    <wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
+    <wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
+    <wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>
+    <wa-switch class="wa-invalid">More awesome</wa-switch><br><br>
+    <wa-radio-group class="wa-invalid" label="Select an option" name="a" value="1">
+      <wa-radio value="1">Option 1</wa-radio>
+      <wa-radio value="2">Option 2</wa-radio>
+      <wa-radio value="3">Option 3</wa-radio>
+    </wa-radio-group><br>
+    <wa-button variant="brand">Submit Form</wa-button>
+  </div>
+</div>
+
+  </div>
+  </section>
+</div>
+
+<style>
+  #style-guide {
+    margin-block-start: var(--wa-flow-spacing);
+  }
+
+  #style-guide wa-card {
+    padding-block: var(--wa-space-xl);
+    padding-inline: var(--wa-space-2xl);
+  }
+</style>

docs/pages/getting-started/usage.md

@@ -208,7 +208,7 @@ Web Awesome ships with a file called `vscode.html-custom-data.json` that can be
 }
 ```
 
-If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take affect.
+If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take effect.
 
 ### JetBrains IDEs
 

docs/pages/index.md

@@ -7,9 +7,9 @@ toc: false
 
 <div class="splash">
 <div class="splash-start">
-{% include 'workmark.njk' %}
+{% include 'logo.njk' %}
 
-# <wa-visually-hidden>Web Awesome:</wa-visually-hidden> A forward-thinking library of web components.
+# <wa-visually-hidden>Web Awesome:</wa-visually-hidden>
 
 - Works with all frameworks 🧩
 - Works with CDNs 🚛

docs/pages/resources/changelog.md

@@ -21,8 +21,15 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 ## Next
 
+- Fixed a bug [in the localize dependency](https://github.com/shoelace-style/localize/issues/20) that caused underscores in language codes to throw a `RangeError`
+- Updated `@shoelace-style/localize` to 3.1.0
+
+## 2.9.0
+
+- Added the `modal` property to `<sl-dialog>` and `<sl-drawer>` to support third-party modals [#1571]
 - Fixed a bug in the autoloader causing it to register non-Shoelace elements [#1563]
-- Fixed a bug in `<wa-switch>` that resulted in improper spacing between the label and the required asterisk [#1540]
+- Fixed a bug in `<sl-switch>` that resulted in improper spacing between the label and the required asterisk [#1540]
+- Fixed a bug in `<sl-icon>` that caused icons to not load when the default library used a sprite sheet [#1572]
 - Removed error when a missing popup anchor is provided [#1548]
 - Updated `@ctrl/tinycolor` to 4.0.1 [#1542]
 - Updated Bootstrap Icons to 1.11.0

docs/pages/tokens/more.md

@@ -28,5 +28,4 @@ Form control tokens control the appearance of form controls such as [input](/com
 | `--wa-form-controls-border-color-resting`   | `var(--wa-color-neutral-outline-muted-alt)` |
 | `--wa-form-controls-border-color-activated` | `var(--wa-color-brand-action-vivid)`        |
 | `--wa-form-controls-value-line-height`      | `var(--wa-font-height-compact)`             |
-| `--wa-form-controls-padding`                | `var(--wa-space-square-s)`                  |
 | `--wa-form-controls-placeholder-color`      | `var(--wa-color-neutral-60)`                |

package-lock.json

@@ -13,7 +13,7 @@
         "@floating-ui/dom": "^1.2.1",
         "@lit-labs/react": "^2.0.3",
         "@shoelace-style/animations": "^1.1.0",
-        "@shoelace-style/localize": "^3.1.1",
+        "@shoelace-style/localize": "^3.1.2",
         "composed-offset-position": "^0.0.4",
         "lit": "^2.7.5",
         "qr-creator": "^1.0.0"
@@ -1825,9 +1825,9 @@
       }
     },
     "node_modules/@shoelace-style/localize": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.1.1.tgz",
-      "integrity": "sha512-NkM/hj3Js6yXCU9WxhsyxRUdyqUUUl/BSvIluUMptQteUWGOJaoyP1iMbOMqO544DYMzBfnoCw66ZHkGuTdKgA=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.1.2.tgz",
+      "integrity": "sha512-Hf45HeO+vdQblabpyZOTxJ4ZeZsmIUYXXPmoYrrR4OJ5OKxL+bhMz5mK8JXgl7HsoEowfz7+e248UGi861de9Q=="
     },
     "node_modules/@sindresorhus/is": {
       "version": "0.7.0",
@@ -18570,9 +18570,9 @@
       "integrity": "sha512-Be+cahtZyI2dPKRm8EZSx3YJQ+jLvEcn3xzRP7tM4tqBnvd/eW/64Xh0iOf0t2w5P8iJKfdBbpVNE9naCaOf2g=="
     },
     "@shoelace-style/localize": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.1.1.tgz",
-      "integrity": "sha512-NkM/hj3Js6yXCU9WxhsyxRUdyqUUUl/BSvIluUMptQteUWGOJaoyP1iMbOMqO544DYMzBfnoCw66ZHkGuTdKgA=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.1.2.tgz",
+      "integrity": "sha512-Hf45HeO+vdQblabpyZOTxJ4ZeZsmIUYXXPmoYrrR4OJ5OKxL+bhMz5mK8JXgl7HsoEowfz7+e248UGi861de9Q=="
     },
     "@sindresorhus/is": {
       "version": "0.7.0",

package.json

@@ -25,8 +25,15 @@
     "./dist/react/*": "./dist/react/*",
     "./dist/translations/*": "./dist/translations/*"
   },
-  "files": ["dist", "cdn"],
-  "keywords": ["web components", "custom elements", "components"],
+  "files": [
+    "dist",
+    "cdn"
+  ],
+  "keywords": [
+    "web components",
+    "custom elements",
+    "components"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shoelace-style/shoelace.git"
@@ -60,7 +67,7 @@
     "@floating-ui/dom": "^1.2.1",
     "@lit-labs/react": "^2.0.3",
     "@shoelace-style/animations": "^1.1.0",
-    "@shoelace-style/localize": "^3.1.1",
+    "@shoelace-style/localize": "^3.1.2",
     "composed-offset-position": "^0.0.4",
     "lit": "^2.7.5",
     "qr-creator": "^1.0.0"
@@ -129,6 +136,9 @@
     "user-agent-data-types": "^0.3.0"
   },
   "lint-staged": {
-    "*.{ts,js}": ["eslint --max-warnings 0 --cache --fix", "prettier --write"]
+    "*.{ts,js}": [
+      "eslint --max-warnings 0 --cache --fix",
+      "prettier --write"
+    ]
   }
 }

scripts/build.js

@@ -181,7 +181,6 @@ async function nextTask(label, action) {
     console.error(`${chalk.red('✘')} ${err}`);
     if (err.stdout) console.error(chalk.red(err.stdout));
     if (err.stderr) console.error(chalk.red(err.stderr));
-    process.exit(1);
   }
 }
 

src/components/card/card.styles.ts

@@ -7,6 +7,7 @@ export default css`
   :host {
     --border-color: var(--wa-color-surface-outline);
     --border-radius: var(--wa-panel-corners);
+    --border-style: var(--wa-border-style);
     --border-width: var(--wa-panel-border-width);
     --padding: var(--wa-space-l);
 
@@ -18,7 +19,7 @@ export default css`
     flex-direction: column;
     background-color: var(--wa-color-surface-raised);
     box-shadow: var(--wa-shadow-level-1);
-    border: solid var(--border-width) var(--border-color);
+    border: var(--border-style) var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
   }
 
@@ -41,7 +42,7 @@ export default css`
 
   .card__header {
     display: block;
-    border-bottom: solid var(--border-width) var(--border-color);
+    border-bottom: var(--border-style) var(--border-width) var(--border-color);
     padding: calc(var(--padding) / 2) var(--padding);
   }
 
@@ -61,7 +62,7 @@ export default css`
 
   .card--has-footer .card__footer {
     display: block;
-    border-top: solid var(--border-width) var(--border-color);
+    border-top: var(--border-style) var(--border-width) var(--border-color);
     padding: var(--padding);
   }
 

src/components/checkbox/checkbox.styles.ts

@@ -42,7 +42,7 @@ export default css`
     width: var(--toggle-size);
     height: var(--toggle-size);
     border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-border-color-resting);
-    border-radius: var(--wa-corners-half);
+    border-radius: min(0.375rem, var(--wa-corners-half)); /* min so it doesn't look like a circle/checkbox */
     background-color: var(--wa-form-controls-background);
     color: var(--wa-form-controls-text-color);
     transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,

src/components/dialog/dialog.component.ts

@@ -60,6 +60,9 @@ import type { CSSResultGroup } from 'lit';
  * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
  * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
  * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
+ * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
+ *   trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when
+ *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.
  */
 export default class WaDialog extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;
@@ -69,8 +72,8 @@ export default class WaDialog extends WebAwesomeElement {
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
   private readonly localize = new LocalizeController(this);
-  private modal = new Modal(this);
   private originalTrigger: HTMLElement | null;
+  public modal = new Modal(this);
 
   @query('.dialog') dialog: HTMLElement;
   @query('.dialog__panel') panel: HTMLElement;

src/components/drawer/drawer.component.ts

@@ -68,6 +68,10 @@ import type { CSSResultGroup } from 'lit';
  * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.
  * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.
  * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.
+ *
+ * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
+ *   trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when
+ *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.
  */
 export default class WaDrawer extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;
@@ -75,8 +79,8 @@ export default class WaDrawer extends WebAwesomeElement {
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
   private readonly localize = new LocalizeController(this);
-  private modal = new Modal(this);
   private originalTrigger: HTMLElement | null;
+  public modal = new Modal(this);
 
   @query('.drawer') drawer: HTMLElement;
   @query('.drawer__panel') panel: HTMLElement;

src/components/icon/icon.component.ts

@@ -15,6 +15,11 @@ type SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | t
 let parser: DOMParser;
 const iconCache = new Map<string, Promise<SVGResult>>();
 
+interface IconSource {
+  url?: string;
+  fromLibrary: boolean;
+}
+
 /**
  * @summary Icons are symbols that can be used to represent various options within an application.
  * @documentation https://shoelace.style/components/icon
@@ -104,12 +109,19 @@ export default class WaIcon extends WebAwesomeElement {
     unwatchIcon(this);
   }
 
-  private getUrl() {
+  private getIconSource(): IconSource {
     const library = getIconLibrary(this.library);
     if (this.name && library) {
-      return library.resolver(this.name);
+      return {
+        url: library.resolver(this.name),
+        fromLibrary: true
+      };
     }
-    return this.src;
+
+    return {
+      url: this.src,
+      fromLibrary: false
+    };
   }
 
   @watch('label')
@@ -129,8 +141,8 @@ export default class WaIcon extends WebAwesomeElement {
 
   @watch(['name', 'src', 'library'])
   async setIcon() {
-    const library = getIconLibrary(this.library);
-    const url = this.getUrl();
+    const { url, fromLibrary } = this.getIconSource();
+    const library = fromLibrary ? getIconLibrary(this.library) : undefined;
 
     if (!url) {
       this.svg = null;
@@ -154,7 +166,7 @@ export default class WaIcon extends WebAwesomeElement {
       iconCache.delete(url);
     }
 
-    if (url !== this.getUrl()) {
+    if (url !== this.getIconSource().url) {
       // If the url has changed while fetching the icon, ignore this request
       return;
     }

src/internal/modal.ts

@@ -5,6 +5,7 @@ let activeModals: HTMLElement[] = [];
 
 export default class Modal {
   element: HTMLElement;
+  isExternalActivated: boolean;
   tabDirection: 'forward' | 'backward' = 'forward';
   currentFocus: HTMLElement | null;
 
@@ -12,6 +13,7 @@ export default class Modal {
     this.element = element;
   }
 
+  /** Activates focus trapping. */
   activate() {
     activeModals.push(this.element);
     document.addEventListener('focusin', this.handleFocusIn);
@@ -19,6 +21,7 @@ export default class Modal {
     document.addEventListener('keyup', this.handleKeyUp);
   }
 
+  /** Deactivates focus trapping. */
   deactivate() {
     activeModals = activeModals.filter(modal => modal !== this.element);
     this.currentFocus = null;
@@ -27,13 +30,24 @@ export default class Modal {
     document.removeEventListener('keyup', this.handleKeyUp);
   }
 
+  /** Determines if this modal element is currently active or not. */
   isActive() {
     // The "active" modal is always the most recent one shown
     return activeModals[activeModals.length - 1] === this.element;
   }
 
+  /** Activates external modal behavior and temporarily disables focus trapping. */
+  activateExternal() {
+    this.isExternalActivated = true;
+  }
+
+  /** Deactivates external modal behavior and re-enables focus trapping. */
+  deactivateExternal() {
+    this.isExternalActivated = false;
+  }
+
   checkFocus() {
-    if (this.isActive()) {
+    if (this.isActive() && !this.isExternalActivated) {
       const tabbableElements = getTabbableElements(this.element);
       if (!this.element.matches(':focus-within')) {
         const start = tabbableElements[0];
@@ -56,11 +70,9 @@ export default class Modal {
     return getTabbableElements(this.element).findIndex(el => el === this.currentFocus);
   }
 
-  /**
-   * Checks if the `startElement` is already focused. This is important if the modal already
-   * has an existing focus prior to the first tab key.
-   */
-  startElementAlreadyFocused(startElement: HTMLElement) {
+  // Checks if the `startElement` is already focused. This is important if the modal already has an existing focus prior
+  // to the first tab key.
+  private startElementAlreadyFocused(startElement: HTMLElement) {
     for (const activeElement of activeElements()) {
       if (startElement === activeElement) {
         return true;
@@ -70,8 +82,8 @@ export default class Modal {
     return false;
   }
 
-  handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key !== 'Tab') return;
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'Tab' || this.isExternalActivated) return;
 
     if (event.shiftKey) {
       this.tabDirection = 'backward';

src/themes/applied.css

@@ -403,7 +403,8 @@ button:focus {
   outline: none;
 }
 
-:focus-visible {
+a:focus-visible,
+button:focus-visible {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }

src/themes/default.css

@@ -4,7 +4,12 @@
   color-scheme: light;
 
   /**
-   * Primitives
+   * Primitive colors
+   * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
+   * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
+   * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
+   * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
+   * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
    */
   --wa-color-red-95: #fdeef3;
   --wa-color-red-90: #fcdee7;
@@ -65,44 +70,68 @@
   --wa-color-black: black;
 
   /**
-   * App
+   * Base theme colors
    */
+
+  /* Surfaces are background layers that UI components and other content rest on.
+   * Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
   --wa-color-surface-raised: var(--wa-color-white);
   --wa-color-surface-default: var(--wa-color-white);
   --wa-color-surface-lowered: var(--wa-color-neutral-95);
   --wa-color-surface-outline: var(--wa-color-neutral-90);
 
+  /* Text colors are used for standard text elements.
+   * Text should have a minimum 4.5:1 contrast ratio against surfaces.
+   * Inverse text should support appropriate contrast against background colors with opposing lightness. */
   --wa-color-text-normal: var(--wa-color-neutral-10);
   --wa-color-text-quiet: var(--wa-color-neutral-40);
   --wa-color-text-inverse: var(--wa-color-white);
   --wa-color-text-link: var(--wa-color-brand-text-on-surface);
 
+  /* Selection colors apply on content that is highlighted by the user.
+   * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
   --wa-color-selection-background: var(--wa-color-blue-80);
   --wa-color-selection-text: var(--wa-color-black);
 
-  --wa-color-focus: var(--wa-color-blue-60); /* semantic variants? */
+  /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
+   * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-blue-60) 96%, transparent);
 
+  /* Overlays dim background elements to focus attention on modal content, such as drawers or dialogs. */
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
+
+  /* Shadow specifies the default color for box shadows that indicate elevation. */
+  --wa-color-shadow: rgb(0 0 0 / 0.06);
+
+  /* Base tints can be mixed with or overlay other colors to make them lighter or darker. */
   --wa-color-tint-white: rgb(255 255 255 / 0.2);
   --wa-color-tint-black: rgb(0 0 0 / 0.2);
 
-  --wa-color-tint-hover: black 8%;
-  --wa-color-tint-active: black 16%;
-
-  --wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
-
-  --wa-color-shadow: rgb(0 0 0 / 0.06);
+  /* State tints are mixed with component colors to achieve consistent effects on interaction. */
+  --wa-color-tint-hover: black 12%;
+  --wa-color-tint-active: black 20%;
 
   /**
-   * Semantic color variants
-   */
-  /* TODO: Add comments for semantic color tokens and usage expectations */
-  /* CONSIDER: Change -alt naming to -tint or -shade? */
+   * Semantic theme colors
+   * Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
+   *  *  Brand to reinforce product branding
+   *  *  Success to express validity or confirmation
+   *  *  Warning to express caution or uncertainty
+   *  *  Danger to express errors or risk
+   *  *  Neutral for elements that are innocuous or inert
+   * Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
+   * Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
+   * Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
+   * Muted colors have no contrast requirements.
+   * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
+  */
+  /* TODO: Change -alt naming? */
   --wa-color-brand-fill-vivid: var(--wa-color-blue-50);
   --wa-color-brand-fill-vivid-alt: var(--wa-color-blue-40);
   --wa-color-brand-fill-muted: var(--wa-color-blue-95);
   --wa-color-brand-fill-muted-alt: var(--wa-color-blue-90);
   --wa-color-brand-outline-vivid: var(--wa-color-blue-50);
-  --wa-color-brand-outline-vivid-alt: var(--wa-color-blue-30);
+  --wa-color-brand-outline-vivid-alt: var(--wa-color-blue-40);
   --wa-color-brand-outline-muted: var(--wa-color-blue-90);
   --wa-color-brand-outline-muted-alt: var(--wa-color-blue-80);
   --wa-color-brand-text-on-vivid: var(--wa-color-text-inverse);
@@ -114,7 +143,7 @@
   --wa-color-success-fill-muted: var(--wa-color-green-95);
   --wa-color-success-fill-muted-alt: var(--wa-color-green-90);
   --wa-color-success-outline-vivid: var(--wa-color-green-50);
-  --wa-color-success-outline-vivid-alt: var(--wa-color-green-30);
+  --wa-color-success-outline-vivid-alt: var(--wa-color-green-40);
   --wa-color-success-outline-muted: var(--wa-color-green-90);
   --wa-color-success-outline-muted-alt: var(--wa-color-green-80);
   --wa-color-success-text-on-vivid: var(--wa-color-text-inverse);
@@ -126,7 +155,7 @@
   --wa-color-warning-fill-muted: var(--wa-color-yellow-95);
   --wa-color-warning-fill-muted-alt: var(--wa-color-yellow-90);
   --wa-color-warning-outline-vivid: var(--wa-color-yellow-50);
-  --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-30);
+  --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-40);
   --wa-color-warning-outline-muted: var(--wa-color-yellow-90);
   --wa-color-warning-outline-muted-alt: var(--wa-color-yellow-80);
   --wa-color-warning-text-on-vivid: var(--wa-color-text-inverse);
@@ -138,7 +167,7 @@
   --wa-color-danger-fill-muted: var(--wa-color-red-95);
   --wa-color-danger-fill-muted-alt: var(--wa-color-red-90);
   --wa-color-danger-outline-vivid: var(--wa-color-red-50);
-  --wa-color-danger-outline-vivid-alt: var(--wa-color-red-30);
+  --wa-color-danger-outline-vivid-alt: var(--wa-color-red-40);
   --wa-color-danger-outline-muted: var(--wa-color-red-90);
   --wa-color-danger-outline-muted-alt: var(--wa-color-red-80);
   --wa-color-danger-text-on-vivid: var(--wa-color-text-inverse);
@@ -150,7 +179,7 @@
   --wa-color-neutral-fill-muted: var(--wa-color-neutral-95);
   --wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-90);
   --wa-color-neutral-outline-vivid: var(--wa-color-neutral-50);
-  --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-30);
+  --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-40);
   --wa-color-neutral-outline-muted: var(--wa-color-neutral-90);
   --wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-80);
   --wa-color-neutral-text-on-vivid: var(--wa-color-text-inverse);
@@ -179,9 +208,9 @@
   --wa-font-size-xs: 0.75rem; /* 12 */
   --wa-font-size-s: 0.875rem; /* 14 */
   --wa-font-size-m: 1rem; /* 16 */
-  --wa-font-size-l: 1.375rem; /* 22 */
-  --wa-font-size-xl: 1.875rem; /* 30 */
-  --wa-font-size-2xl: 2.625rem; /* 42 */
+  --wa-font-size-l: 1.25rem; /* 20 */
+  --wa-font-size-xl: 1.75rem; /* 28 */
+  --wa-font-size-2xl: 2.5rem; /* 40 */
 
   --wa-font-line-height-compact: 1.25;
   --wa-font-line-height-regular: 1.625;
@@ -189,16 +218,27 @@
 
   /**
    * Spacing
+   * Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
+   * Space can be organized into three groups with distinct usage -
+   *  *  Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
+   *     and padding within small components, such as badges and tooltips
+   *  *  Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
+   *     typical interface elements, such as buttons and inputs
+   *  *  Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
+   *     such as cards and dialogs
    */
-  --wa-space-3xs: 0.125rem; /* 2 */
-  --wa-space-2xs: 0.25rem; /* 4 */
-  --wa-space-xs: 0.5rem; /* 8 */
-  --wa-space-s: 0.75rem; /* 12 */
-  --wa-space-m: 1rem; /* 16 */
-  --wa-space-l: 1.25rem; /* 20 */
-  --wa-space-xl: 1.5rem; /* 24 */
-  --wa-space-2xl: 2rem; /* 32 */
-  --wa-space-3xl: 3rem; /* 48 */
+  /* Space is designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-space-base: 1rem;
+  --wa-space-3xs: calc(var(--wa-space-base) * 0.125); /* 2 */
+  --wa-space-2xs: calc(var(--wa-space-base) * 0.25); /* 4 */
+  --wa-space-xs: calc(var(--wa-space-base) * 0.5); /* 8 */
+  --wa-space-s: calc(var(--wa-space-base) * 0.75); /* 12 */
+  --wa-space-m: var(--wa-space-base); /* 16 */
+  --wa-space-l: calc(var(--wa-space-base) * 1.25); /* 20 */
+  --wa-space-xl: calc(var(--wa-space-base) * 1.5); /* 24 */
+  --wa-space-2xl: calc(var(--wa-space-base) * 2); /* 32 */
+  --wa-space-3xl: calc(var(--wa-space-base) * 3); /* 48 */
 
   --wa-space-square-xs: var(--wa-space-xs);
   --wa-space-square-s: var(--wa-space-s);
@@ -221,17 +261,24 @@
   /**
    * Borders & corners
    */
-  --wa-border-width-thin: 0.0625rem; /* 1px */
-  --wa-border-width-medium: calc(var(--wa-border-width-thin) * 2);
-  --wa-border-width-thick: calc(var(--wa-border-width-thin) * 3);
-
   --wa-border-style: solid;
 
-  --wa-corners-half: calc(var(--wa-corners-1x) * 0.5);
-  --wa-corners-1x: 0.25rem;
-  --wa-corners-2x: calc(var(--wa-corners-1x) * 2);
-  --wa-corners-3x: calc(var(--wa-corners-1x) * 3);
+  /* Border widths are designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-border-width-base: 0.0625rem; /* 1px */
+  --wa-border-width-thin: var(--wa-border-width-base);
+  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2);
+  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3);
 
+  /* Corners are designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-corners-base: 0.25rem;
+  --wa-corners-half: calc(var(--wa-corners-base) * 0.5);
+  --wa-corners-1x: var(--wa-corners-base);
+  --wa-corners-2x: calc(var(--wa-corners-base) * 2);
+  --wa-corners-3x: calc(var(--wa-corners-base) * 3);
+
+  /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
   --wa-corners-pill: 9999px;
   --wa-corners-circle: 50%;
   --wa-corners-sharp: 0;
@@ -239,17 +286,36 @@
   /**
    * Focus
    */
-  --wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-focus);
+  --wa-focus-ring: solid 0.1875rem var(--wa-color-focus);
   --wa-focus-ring-offset: 0.0625rem; /* 1px */
 
   /**
    * Shadows
+   * Shadow effects indicate elevation and, at times, interactivity.
+   * Elevation is defined by levels relative to the surface where the element rests -
+   *  *  Inset sits below the surface for a punched-in effect
+   *  *  Level 0 is the surface level
+   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
+   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
+   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
    */
-  --wa-shadow-inset: inset 0 0.0625rem 0 var(--wa-color-shadow);
+  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-shadow-blur-base: 0.125rem;
+
+  /* Offset values on the y-axis are used in pre-constructed shadows and may be used when constructing custom shadows
+   * or transforming elements with shadows. */
+  --wa-shadow-offset-y-inset: 0.0625rem;
+  --wa-shadow-offset-y-level-1: 0.0625rem;
+  --wa-shadow-offset-y-level-2: 0.125rem;
+  --wa-shadow-offset-y-level-3: 0.25rem;
+
+  --wa-shadow-inset: inset 0 var(--wa-shadow-offset-y-inset) calc(var(--wa-shadow-blur-base) * 0.5)
+    var(--wa-color-shadow);
   --wa-shadow-level-0: none;
-  --wa-shadow-level-1: 0 0.0625rem 0.125rem var(--wa-color-shadow);
-  --wa-shadow-level-2: 0 0.125rem 0.25rem var(--wa-color-shadow);
-  --wa-shadow-level-3: 0 0.25rem 0.5rem var(--wa-color-shadow);
+  --wa-shadow-level-1: 0 var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-base) var(--wa-color-shadow);
+  --wa-shadow-level-2: 0 var(--wa-shadow-offset-y-level-2) calc(var(--wa-shadow-blur-base) * 2) var(--wa-color-shadow);
+  --wa-shadow-level-3: 0 var(--wa-shadow-offset-y-level-3) calc(var(--wa-shadow-blur-base) * 4) var(--wa-color-shadow);
 
   /**
    * Z-index
@@ -271,28 +337,42 @@
    * Form controls
    */
   --wa-form-controls-background: var(--wa-color-surface-default);
-  --wa-form-controls-border-style: var(--wa-border-style);
-  --wa-form-controls-border-width: var(--wa-border-width-thin);
-  --wa-form-controls-corners: var(--wa-corners-1x);
+
   --wa-form-controls-border-color-resting: var(--wa-color-neutral-outline-muted-alt);
   --wa-form-controls-border-color-activated: var(--wa-color-brand-outline-vivid);
+  --wa-form-controls-border-style: var(--wa-border-style);
+  --wa-form-controls-border-width: var(--wa-border-width-thin);
+
+  --wa-form-controls-corners: var(--wa-corners-1x);
+
   --wa-form-controls-text-color: var(--wa-color-text-normal);
-  --wa-form-controls-value-line-height: var(--wa-font-height-compact);
-  --wa-form-controls-padding: var(--wa-space-square-s);
+  --wa-form-controls-value-line-height: var(--wa-font-line-height-compact);
+
   --wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
+  --wa-form-controls-placeholder-color-valid: var(--wa-color-green-60);
+  --wa-form-controls-placeholder-color-invalid: var(--wa-color-red-60);
+
+  --wa-form-controls-height-s: calc(
+    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-controls-value-line-height)
+  );
+  --wa-form-controls-height-m: calc(
+    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-controls-value-line-height)
+  );
+  --wa-form-controls-height-l: calc(
+    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-controls-value-line-height)
+  );
 
   /**
    * Panels
    */
+  --wa-panel-border-style: var(--wa-border-style);
   --wa-panel-border-width: var(--wa-border-width-thin);
+
   --wa-panel-corners: var(--wa-corners-2x);
 
   /**
   * From 2.x
   */
-  --wa-form-controls-height-s: 2rem;
-  --wa-form-controls-height-m: 2.75rem;
-  --wa-form-controls-height-l: 3.5rem;
   --wa-form-control-toggle-size-s: 0.875rem;
   --wa-form-control-toggle-size-m: 1.125rem;
   --wa-form-control-toggle-size-l: 1.375rem;
@@ -304,11 +384,12 @@
   --wa-tooltip-arrow-size: 0.375rem;
 }
 
-:root.wa-theme-default-dark {
+.wa-theme-default-dark,
+.wa-theme-default-dark :host {
   color-scheme: dark;
 
   /**
-   * App
+   * Base theme colors
    */
   --wa-color-surface-raised: var(--wa-color-neutral-10);
   --wa-color-surface-default: var(--wa-color-neutral-10);
@@ -323,7 +404,11 @@
   --wa-color-selection-background: var(--wa-color-blue-40);
   --wa-color-selection-text: var(--wa-color-white);
 
-  --wa-color-focus: var(--wa-color-blue-50);
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-blue-60) 90%, transparent);
+
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-black) 50%, transparent);
+
+  --wa-color-shadow: rgb(0 0 0 / 0.25);
 
   --wa-color-tint-white: rgb(255 255 255 / 0.2);
   --wa-color-tint-black: rgb(0 0 0 / 0.2);
@@ -331,12 +416,8 @@
   --wa-color-tint-hover: black 8%;
   --wa-color-tint-active: black 16%;
 
-  --wa-color-overlay: color-mix(in oklab, var(--wa-color-black) 50%, transparent);
-
-  --wa-color-shadow: rgb(0 0 0 / 0.25);
-
   /**
-    * Semantic color variants
+    * Semantic theme colors
     */
   --wa-color-brand-fill-vivid: var(--wa-color-blue-50);
   --wa-color-brand-fill-vivid-alt: var(--wa-color-blue-30);
@@ -398,3 +479,5 @@
   --wa-color-neutral-text-on-muted: var(--wa-color-neutral-70);
   --wa-color-neutral-text-on-surface: var(--wa-color-neutral-60);
 }
+
+/* _utility.css */

src/themes/forms.css

@@ -0,0 +1,49 @@
+.wa-invalid {
+  --wa-form-controls-border-color-resting: var(--wa-color-danger-outline-vivid);
+  --wa-form-controls-border-color-activated: var(--wa-color-danger-outline-vivid);
+  --wa-form-controls-text-color: var(--wa-color-danger-text-on-muted);
+  --wa-form-controls-placeholder-color: var(--wa-form-controls-placeholder-color-invalid);
+
+  --wa-color-brand-fill-vivid: var(--wa-color-danger-fill-vivid);
+  --wa-color-brand-fill-vivid-alt: var(--wa-color-danger-fill-vivid-alt);
+  --wa-color-brand-fill-muted: var(--wa-color-danger-fill-muted);
+  --wa-color-brand-fill-muted-alt: var(--wa-color-danger-fill-muted-alt);
+  --wa-color-brand-outline-vivid: var(--wa-color-danger-outline-vivid);
+  --wa-color-brand-outline-vivid-alt: var(--wa-color-danger-outline-vivid-alt);
+  --wa-color-brand-outline-muted: var(--wa-color-danger-outline-muted);
+  --wa-color-brand-outline-muted-alt: var(--wa-color-danger-outline-muted-alt);
+  --wa-color-brand-text-on-vivid: var(--wa-color-danger-text-on-vivid);
+  --wa-color-brand-text-on-muted: var(--wa-color-danger-text-on-muted);
+  --wa-color-brand-text-on-surface: var(--wa-color-danger-text-on-surface);
+
+  /* Focus ring */
+  --wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-danger-outline-vivid);
+
+  /* Help text */
+  --wa-color-text-quiet: var(--wa-color-danger-text-on-muted);
+}
+
+.wa-valid {
+  --wa-form-controls-border-color-resting: var(--wa-color-success-outline-vivid);
+  --wa-form-controls-border-color-activated: var(--wa-color-success-outline-vivid);
+  --wa-form-controls-text-color: var(--wa-color-success-text-on-muted);
+  --wa-form-controls-placeholder-color: var(--wa-form-controls-placeholder-color-valid);
+
+  --wa-color-brand-fill-vivid: var(--wa-color-success-fill-vivid);
+  --wa-color-brand-fill-vivid-alt: var(--wa-color-success-fill-vivid-alt);
+  --wa-color-brand-fill-muted: var(--wa-color-success-fill-muted);
+  --wa-color-brand-fill-muted-alt: var(--wa-color-success-fill-muted-alt);
+  --wa-color-brand-outline-vivid: var(--wa-color-success-outline-vivid);
+  --wa-color-brand-outline-vivid-alt: var(--wa-color-success-outline-vivid-alt);
+  --wa-color-brand-outline-muted: var(--wa-color-success-outline-muted);
+  --wa-color-brand-outline-muted-alt: var(--wa-color-success-outline-muted-alt);
+  --wa-color-brand-text-on-vivid: var(--wa-color-success-text-on-vivid);
+  --wa-color-brand-text-on-muted: var(--wa-color-success-text-on-muted);
+  --wa-color-brand-text-on-surface: var(--wa-color-success-text-on-surface);
+
+  /* Focus ring */
+  --wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-success-outline-vivid);
+
+  /* Help text */
+  --wa-color-text-quiet: var(--wa-color-success-text-on-muted);
+}

src/themes/glassy.css

@@ -0,0 +1,487 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Quicksand:wght@300..700&display=swap');
+
+:root,
+:host,
+.wa-theme-glassy-light {
+  color-scheme: light;
+
+  /**
+   * Primitive colors
+   * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
+   * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
+   * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
+   * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
+   * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
+   */
+  --wa-color-red-95: #fbeff3;
+  --wa-color-red-90: #f6e0e7;
+  --wa-color-red-80: #ecbdcc;
+  --wa-color-red-70: #e39bb2;
+  --wa-color-red-60: #d87797;
+  --wa-color-red-50: #ca4570;
+  --wa-color-red-40: #b2003b;
+  --wa-color-red-30: #8e002f;
+  --wa-color-red-20: #6b0023;
+  --wa-color-red-10: #430016;
+
+  --wa-color-yellow-95: #f5f2e5;
+  --wa-color-yellow-90: #ece6cc;
+  --wa-color-yellow-80: #dac992;
+  --wa-color-yellow-70: #c9ac5c;
+  --wa-color-yellow-60: #b98f27;
+  --wa-color-yellow-50: #9b6d09;
+  --wa-color-yellow-40: #785007;
+  --wa-color-yellow-30: #613e06;
+  --wa-color-yellow-20: #492c05;
+  --wa-color-yellow-10: #2b1a02;
+
+  --wa-color-green-95: #ecf4f1;
+  --wa-color-green-90: #dae9e3;
+  --wa-color-green-80: #b0d1c4;
+  --wa-color-green-70: #88b9a6;
+  --wa-color-green-60: #5fa288;
+  --wa-color-green-50: #2d8462;
+  --wa-color-green-40: #00663e;
+  --wa-color-green-30: #005031;
+  --wa-color-green-20: #003b24;
+  --wa-color-green-10: #002316;
+
+  --wa-color-orchid-95: #f8eff8;
+  --wa-color-orchid-90: #f2e1f1;
+  --wa-color-orchid-80: #e2bee1;
+  --wa-color-orchid-70: #d49dd2;
+  --wa-color-orchid-60: #c57bc3;
+  --wa-color-orchid-50: #b14fae;
+  --wa-color-orchid-40: #9a1a96;
+  --wa-color-orchid-30: #7c0e79;
+  --wa-color-orchid-20: #5c0a5a;
+  --wa-color-orchid-10: #380637;
+
+  --wa-color-neutral-95: #f2f2f3;
+  --wa-color-neutral-90: #e6e5e8;
+  --wa-color-neutral-80: #cbc8ce;
+  --wa-color-neutral-70: #b1adb6;
+  --wa-color-neutral-60: #98939f;
+  --wa-color-neutral-50: #7a7382;
+  --wa-color-neutral-40: #5d5568;
+  --wa-color-neutral-30: #494352;
+  --wa-color-neutral-20: #35313c;
+  --wa-color-neutral-10: #1f1c23;
+
+  --wa-color-white: white;
+  --wa-color-black: black;
+
+  /**
+   * Base theme colors
+   */
+
+  /* Surfaces are background layers that UI components and other content rest on.
+   * Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
+  --wa-color-surface-raised: var(--wa-color-white);
+  --wa-color-surface-default: var(--wa-color-white);
+  --wa-color-surface-lowered: var(--wa-color-neutral-95);
+  --wa-color-surface-outline: var(--wa-color-neutral-90);
+
+  /* Text colors are used for standard text elements.
+   * Text should have a minimum 4.5:1 contrast ratio against surfaces.
+   * Inverse text should support appropriate contrast against background colors with opposing lightness. */
+  --wa-color-text-normal: var(--wa-color-neutral-10);
+  --wa-color-text-quiet: var(--wa-color-neutral-40);
+  --wa-color-text-inverse: var(--wa-color-white);
+  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+
+  /* Selection colors apply on content that is highlighted by the user.
+   * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
+  --wa-color-selection-background: var(--wa-color-orchid-80);
+  --wa-color-selection-text: var(--wa-color-black);
+
+  /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
+   * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-orchid-60) 96%, transparent);
+
+  /* Overlays dim background elements to focus attention on modal content, such as drawers or dialogs. */
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
+
+  /* Shadow specifies the default color for box shadows that indicate elevation. */
+  --wa-color-shadow: color-mix(in oklab, var(--wa-color-neutral-10) 20%, transparent);
+
+  /* Base tints can be mixed with or overlay other colors to make them lighter or darker. */
+  --wa-color-tint-white: rgb(255 255 255 / 0.2);
+  --wa-color-tint-black: rgb(0 0 0 / 0.2);
+
+  /* State tints are mixed with component colors to achieve consistent effects on interaction. */
+  --wa-color-tint-hover: black 12%;
+  --wa-color-tint-active: black 20%;
+
+  /**
+   * Semantic theme colors
+   * Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
+   *  *  Brand to reinforce product branding
+   *  *  Success to express validity or confirmation
+   *  *  Warning to express caution or uncertainty
+   *  *  Danger to express errors or risk
+   *  *  Neutral for elements that are innocuous or inert
+   * Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
+   * Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
+   * Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
+   * Muted colors have no contrast requirements.
+   * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
+  */
+  /* TODO: Change -alt naming? */
+  --wa-color-brand-fill-vivid: var(--wa-color-orchid-50);
+  --wa-color-brand-fill-vivid-alt: var(--wa-color-orchid-40);
+  --wa-color-brand-fill-muted: var(--wa-color-orchid-95);
+  --wa-color-brand-fill-muted-alt: var(--wa-color-orchid-90);
+  --wa-color-brand-outline-vivid: var(--wa-color-orchid-50);
+  --wa-color-brand-outline-vivid-alt: var(--wa-color-orchid-40);
+  --wa-color-brand-outline-muted: var(--wa-color-orchid-90);
+  --wa-color-brand-outline-muted-alt: var(--wa-color-orchid-80);
+  --wa-color-brand-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-brand-text-on-muted: var(--wa-color-orchid-40);
+  --wa-color-brand-text-on-surface: var(--wa-color-orchid-50);
+
+  --wa-color-success-fill-vivid: var(--wa-color-green-50);
+  --wa-color-success-fill-vivid-alt: var(--wa-color-green-40);
+  --wa-color-success-fill-muted: var(--wa-color-green-95);
+  --wa-color-success-fill-muted-alt: var(--wa-color-green-90);
+  --wa-color-success-outline-vivid: var(--wa-color-green-50);
+  --wa-color-success-outline-vivid-alt: var(--wa-color-green-40);
+  --wa-color-success-outline-muted: var(--wa-color-green-90);
+  --wa-color-success-outline-muted-alt: var(--wa-color-green-80);
+  --wa-color-success-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-success-text-on-muted: var(--wa-color-green-40);
+  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+
+  --wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-muted: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-muted-alt: var(--wa-color-yellow-90);
+  --wa-color-warning-outline-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-40);
+  --wa-color-warning-outline-muted: var(--wa-color-yellow-90);
+  --wa-color-warning-outline-muted-alt: var(--wa-color-yellow-80);
+  --wa-color-warning-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-warning-text-on-muted: var(--wa-color-yellow-40);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+
+  --wa-color-danger-fill-vivid: var(--wa-color-red-50);
+  --wa-color-danger-fill-vivid-alt: var(--wa-color-red-40);
+  --wa-color-danger-fill-muted: var(--wa-color-red-95);
+  --wa-color-danger-fill-muted-alt: var(--wa-color-red-90);
+  --wa-color-danger-outline-vivid: var(--wa-color-red-50);
+  --wa-color-danger-outline-vivid-alt: var(--wa-color-red-40);
+  --wa-color-danger-outline-muted: var(--wa-color-red-90);
+  --wa-color-danger-outline-muted-alt: var(--wa-color-red-80);
+  --wa-color-danger-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-danger-text-on-muted: var(--wa-color-red-40);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+
+  --wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-40);
+  --wa-color-neutral-fill-muted: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-90);
+  --wa-color-neutral-outline-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-40);
+  --wa-color-neutral-outline-muted: var(--wa-color-neutral-90);
+  --wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-80);
+  --wa-color-neutral-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-neutral-text-on-muted: var(--wa-color-neutral-40);
+  --wa-color-neutral-text-on-surface: var(--wa-color-neutral-50);
+
+  /**
+   * Typography
+   */
+  --wa-font-family-heading: 'Quicksand', sans-serif;
+  --wa-font-family-body: 'Inter', sans-serif;
+  --wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --wa-font-family-longform: 'Lora', serif;
+
+  --wa-font-weight-light: 300;
+  --wa-font-weight-normal: 400;
+  --wa-font-weight-medium: 500;
+  --wa-font-weight-heavy: 600;
+
+  --wa-font-weight-heading: var(--wa-font-weight-heavy);
+  --wa-font-weight-body: var(--wa-font-weight-normal);
+  --wa-font-weight-action: var(--wa-font-weight-medium);
+
+  --wa-font-size-root: 16px;
+  --wa-font-size-2xs: 0.625rem; /* 10 */
+  --wa-font-size-xs: 0.75rem; /* 12 */
+  --wa-font-size-s: 0.875rem; /* 14 */
+  --wa-font-size-m: 1rem; /* 16 */
+  --wa-font-size-l: 1.25rem; /* 20 */
+  --wa-font-size-xl: 1.75rem; /* 28 */
+  --wa-font-size-2xl: 2.5rem; /* 40 */
+
+  --wa-font-line-height-compact: 1.25;
+  --wa-font-line-height-regular: 1.625;
+  --wa-font-line-height-comfortable: 2;
+
+  /**
+   * Spacing
+   * Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
+   * Space can be organized into three groups with distinct usage -
+   *  *  Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
+   *     and padding within small components, such as badges and tooltips
+   *  *  Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
+   *     typical interface elements, such as buttons and inputs
+   *  *  Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
+   *     such as cards and dialogs
+   */
+  /* Space is designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-space-base: 1rem;
+  --wa-space-3xs: calc(var(--wa-space-base) * 0.125); /* 2 */
+  --wa-space-2xs: calc(var(--wa-space-base) * 0.25); /* 4 */
+  --wa-space-xs: calc(var(--wa-space-base) * 0.5); /* 8 */
+  --wa-space-s: calc(var(--wa-space-base) * 0.75); /* 12 */
+  --wa-space-m: var(--wa-space-base); /* 16 */
+  --wa-space-l: calc(var(--wa-space-base) * 1.25); /* 20 */
+  --wa-space-xl: calc(var(--wa-space-base) * 1.5); /* 24 */
+  --wa-space-2xl: calc(var(--wa-space-base) * 2); /* 32 */
+  --wa-space-3xl: calc(var(--wa-space-base) * 3); /* 48 */
+
+  --wa-space-square-xs: var(--wa-space-xs);
+  --wa-space-square-s: var(--wa-space-s);
+  --wa-space-square-m: var(--wa-space-m);
+  --wa-space-square-l: var(--wa-space-l);
+  --wa-space-square-xl: var(--wa-space-xl);
+
+  --wa-space-stretch-xs: var(--wa-space-xs) var(--wa-space-m);
+  --wa-space-stretch-s: var(--wa-space-s) var(--wa-space-l);
+  --wa-space-stretch-m: var(--wa-space-m) var(--wa-space-xl);
+  --wa-space-stretch-l: var(--wa-space-l) var(--wa-space-2xl);
+  --wa-space-stretch-xl: var(--wa-space-xl) var(--wa-space-3xl);
+
+  --wa-space-squish-xs: var(--wa-space-xs) var(--wa-space-3xs);
+  --wa-space-squish-s: var(--wa-space-s) var(--wa-space-2xs);
+  --wa-space-squish-m: var(--wa-space-m) var(--wa-space-xs);
+  --wa-space-squish-l: var(--wa-space-l) var(--wa-space-s);
+  --wa-space-squish-xl: var(--wa-space-xl) var(--wa-space-m);
+
+  /**
+   * Borders & corners
+   */
+  --wa-border-style: solid;
+
+  /* Border widths are designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-border-width-base: 0.0625rem; /* 1px */
+  --wa-border-width-thin: var(--wa-border-width-base);
+  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2);
+  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3);
+
+  /* Corners are designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-corners-base: 0.375rem;
+  --wa-corners-half: calc(var(--wa-corners-base) * 0.5);
+  --wa-corners-1x: var(--wa-corners-base);
+  --wa-corners-2x: calc(var(--wa-corners-base) * 2);
+  --wa-corners-3x: calc(var(--wa-corners-base) * 3);
+
+  /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
+  --wa-corners-pill: 9999px;
+  --wa-corners-circle: 50%;
+  --wa-corners-sharp: 0;
+
+  /**
+   * Focus
+   */
+  --wa-focus-ring: solid 0.1875rem var(--wa-color-focus);
+  --wa-focus-ring-offset: 0.0625rem; /* 1px */
+
+  /**
+   * Shadows
+   * Shadow effects indicate elevation and, at times, interactivity.
+   * Elevation is defined by levels relative to the surface where the element rests -
+   *  *  Inset sits below the surface for a punched-in effect
+   *  *  Level 0 is the surface level
+   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
+   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
+   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
+   */
+  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-shadow-blur-base: 0.25rem;
+
+  /* Offset values on the y-axis are used in pre-constructed shadows and may be used when constructing custom shadows
+   * or transforming elements with shadows. */
+  --wa-shadow-offset-y-inset: 0.0625rem;
+  --wa-shadow-offset-y-level-1: 0.125rem;
+  --wa-shadow-offset-y-level-2: 0.25rem;
+  --wa-shadow-offset-y-level-3: 0.5rem;
+
+  --wa-shadow-inset: inset 0 var(--wa-shadow-offset-y-inset) calc(var(--wa-shadow-blur-base) * 0.5)
+    var(--wa-color-shadow);
+  --wa-shadow-level-0: none;
+  --wa-shadow-level-1: 0 var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-base) var(--wa-color-shadow);
+  --wa-shadow-level-2: 0 var(--wa-shadow-offset-y-level-2) calc(var(--wa-shadow-blur-base) * 2)
+    color-mix(in oklab, var(--wa-color-shadow), transparent 20%);
+  --wa-shadow-level-3: 0 var(--wa-shadow-offset-y-level-3) calc(var(--wa-shadow-blur-base) * 4)
+    color-mix(in oklab, var(--wa-color-shadow), transparent 40%);
+
+  /**
+   * Z-index
+   */
+  --wa-z-index-drawer: 700;
+  --wa-z-index-dialog: 800;
+  --wa-z-index-dropdown: 900;
+  --wa-z-index-alert-group: 950;
+  --wa-z-index-tooltip: 1000;
+
+  /**
+   * Transitions
+   */
+  --wa-transition-normal: 250ms;
+  --wa-transition-fast: 150ms;
+  --wa-transition-faster: 50ms;
+
+  /**
+   * Form controls
+   */
+  --wa-form-controls-background: var(--wa-color-surface-default);
+
+  --wa-form-controls-border-color-resting: var(--wa-color-neutral-outline-muted-alt);
+  --wa-form-controls-border-color-activated: var(--wa-color-brand-outline-vivid);
+  --wa-form-controls-border-style: var(--wa-border-style);
+  --wa-form-controls-border-width: var(--wa-border-width-thin);
+
+  --wa-form-controls-corners: var(--wa-corners-1x);
+
+  --wa-form-controls-text-color: var(--wa-color-text-normal);
+  --wa-form-controls-value-line-height: var(--wa-font-line-height-compact);
+
+  --wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
+  --wa-form-controls-placeholder-color-valid: var(--wa-color-green-60);
+  --wa-form-controls-placeholder-color-invalid: var(--wa-color-red-60);
+
+  --wa-form-controls-height-s: calc(
+    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-controls-value-line-height)
+  );
+  --wa-form-controls-height-m: calc(
+    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-controls-value-line-height)
+  );
+  --wa-form-controls-height-l: calc(
+    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-controls-value-line-height)
+  );
+
+  /**
+   * Panels
+   */
+  --wa-panel-border-style: var(--wa-border-style);
+  --wa-panel-border-width: var(--wa-border-width-thin);
+
+  --wa-panel-corners: var(--wa-corners-2x);
+
+  /**
+  * From 2.x
+  */
+  --wa-form-control-toggle-size-s: 0.875rem;
+  --wa-form-control-toggle-size-m: 1.125rem;
+  --wa-form-control-toggle-size-l: 1.375rem;
+  --wa-form-controls-required-content: '*';
+  --wa-form-controls-required-content-color: inherit;
+  --wa-form-controls-required-content-offset: -0.1em;
+
+  --wa-flow-spacing: 1.5rem;
+  --wa-tooltip-arrow-size: 0.375rem;
+}
+
+.wa-theme-glassy-dark,
+.wa-theme-glassy-dark :host {
+  color-scheme: dark;
+
+  /**
+   * Base theme colors
+   */
+  --wa-color-surface-raised: var(--wa-color-neutral-10);
+  --wa-color-surface-default: var(--wa-color-neutral-10);
+  --wa-color-surface-lowered: var(--wa-color-black);
+  --wa-color-surface-outline: var(--wa-color-neutral-20);
+
+  --wa-color-text-normal: var(--wa-color-neutral-95);
+  --wa-color-text-quiet: var(--wa-color-neutral-60);
+  --wa-color-text-inverse: var(--wa-color-neutral-10);
+  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+
+  --wa-color-selection-background: var(--wa-color-orchid-40);
+  --wa-color-selection-text: var(--wa-color-white);
+
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-orchid-60) 90%, transparent);
+
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-black) 50%, transparent);
+
+  --wa-color-shadow: rgb(0 0 0 / 0.25);
+
+  --wa-color-tint-white: rgb(255 255 255 / 0.2);
+  --wa-color-tint-black: rgb(0 0 0 / 0.2);
+
+  --wa-color-tint-hover: black 8%;
+  --wa-color-tint-active: black 16%;
+
+  /**
+    * Semantic theme colors
+    */
+  --wa-color-brand-fill-vivid: var(--wa-color-orchid-50);
+  --wa-color-brand-fill-vivid-alt: var(--wa-color-orchid-30);
+  --wa-color-brand-fill-muted: var(--wa-color-orchid-10);
+  --wa-color-brand-fill-muted-alt: var(--wa-color-orchid-20);
+  --wa-color-brand-outline-vivid: var(--wa-color-orchid-50);
+  --wa-color-brand-outline-vivid-alt: var(--wa-color-orchid-40);
+  --wa-color-brand-outline-muted: var(--wa-color-orchid-20);
+  --wa-color-brand-outline-muted-alt: var(--wa-color-orchid-30);
+  --wa-color-brand-text-on-vivid: var(--wa-color-white);
+  --wa-color-brand-text-on-muted: var(--wa-color-orchid-70);
+  --wa-color-brand-text-on-surface: var(--wa-color-orchid-60);
+
+  --wa-color-success-fill-vivid: var(--wa-color-green-50);
+  --wa-color-success-fill-vivid-alt: var(--wa-color-green-30);
+  --wa-color-success-fill-muted: var(--wa-color-green-10);
+  --wa-color-success-fill-muted-alt: var(--wa-color-green-20);
+  --wa-color-success-outline-vivid: var(--wa-color-green-50);
+  --wa-color-success-outline-vivid-alt: var(--wa-color-green-40);
+  --wa-color-success-outline-muted: var(--wa-color-green-20);
+  --wa-color-success-outline-muted-alt: var(--wa-color-green-30);
+  --wa-color-success-text-on-vivid: var(--wa-color-white);
+  --wa-color-success-text-on-muted: var(--wa-color-green-70);
+  --wa-color-success-text-on-surface: var(--wa-color-green-60);
+
+  --wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-muted: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-muted-alt: var(--wa-color-yellow-20);
+  --wa-color-warning-outline-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-40);
+  --wa-color-warning-outline-muted: var(--wa-color-yellow-20);
+  --wa-color-warning-outline-muted-alt: var(--wa-color-yellow-30);
+  --wa-color-warning-text-on-vivid: var(--wa-color-white);
+  --wa-color-warning-text-on-muted: var(--wa-color-yellow-70);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
+
+  --wa-color-danger-fill-vivid: var(--wa-color-red-50);
+  --wa-color-danger-fill-vivid-alt: var(--wa-color-red-30);
+  --wa-color-danger-fill-muted: var(--wa-color-red-10);
+  --wa-color-danger-fill-muted-alt: var(--wa-color-red-20);
+  --wa-color-danger-outline-vivid: var(--wa-color-red-50);
+  --wa-color-danger-outline-vivid-alt: var(--wa-color-red-40);
+  --wa-color-danger-outline-muted: var(--wa-color-red-20);
+  --wa-color-danger-outline-muted-alt: var(--wa-color-red-30);
+  --wa-color-danger-text-on-vivid: var(--wa-color-white);
+  --wa-color-danger-text-on-muted: var(--wa-color-red-70);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-60);
+
+  --wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-30);
+  --wa-color-neutral-fill-muted: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-20);
+  --wa-color-neutral-outline-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-40);
+  --wa-color-neutral-outline-muted: var(--wa-color-neutral-20);
+  --wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-30);
+  --wa-color-neutral-text-on-vivid: var(--wa-color-white);
+  --wa-color-neutral-text-on-muted: var(--wa-color-neutral-70);
+  --wa-color-neutral-text-on-surface: var(--wa-color-neutral-60);
+}
+
+/* _utility.css */

src/themes/mellow.css

@@ -1,12 +1,17 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lora:wght@100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Lora:wght@400..700&display=swap');
 
 :root,
 :host,
-.wa-theme-mellow {
+.wa-theme-mellow-light {
   color-scheme: light;
 
   /**
-   * Primitives
+   * Primitive colors
+   * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
+   * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
+   * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
+   * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
+   * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
    */
   --wa-color-red-95: #fbf0ed;
   --wa-color-red-90: #f7e1db;
@@ -67,38 +72,62 @@
   --wa-color-black: black;
 
   /**
-   * App
+   * Base theme colors
    */
+
+  /* Surfaces are background layers that UI components and other content rest on.
+   * Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
   --wa-color-surface-raised: var(--wa-color-white);
   --wa-color-surface-default: var(--wa-color-white);
   --wa-color-surface-lowered: var(--wa-color-neutral-95);
   --wa-color-surface-outline: var(--wa-color-neutral-90);
 
+  /* Text colors are used for standard text elements.
+   * Text should have a minimum 4.5:1 contrast ratio against surfaces.
+   * Inverse text should support appropriate contrast against background colors with opposing lightness. */
   --wa-color-text-normal: var(--wa-color-neutral-30);
   --wa-color-text-quiet: var(--wa-color-neutral-50);
   --wa-color-text-inverse: var(--wa-color-white);
   --wa-color-text-link: var(--wa-color-blue-50);
 
+  /* Selection colors apply on content that is highlighted by the user.
+   * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
   --wa-color-selection-background: var(--wa-color-green-80);
   --wa-color-selection-text: var(--wa-color-black);
 
-  --wa-color-focus: var(--wa-color-green-60); /* semantic variants? */
+  /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
+   * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-green-60) 96%, transparent);
 
+  /* Overlays dim background elements to focus attention on modal content, such as drawers or dialogs. */
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
+
+  /* Shadow specifies the default color for box shadows that indicate elevation. */
+  --wa-color-shadow: color-mix(in oklab, var(--wa-color-neutral-10) 6%, transparent);
+
+  /* Base tints can be mixed with or overlay other colors to make them lighter or darker. */
   --wa-color-tint-white: rgb(255 255 255 / 0.2);
   --wa-color-tint-black: rgb(0 0 0 / 0.2);
 
-  --wa-color-tint-hover: black 8%;
-  --wa-color-tint-active: black 16%;
-
-  --wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
-
-  --wa-color-shadow: color-mix(in oklab, var(--wa-color-neutral-10) 6%, transparent);
+  /* State tints are mixed with component colors to achieve consistent effects on interaction. */
+  --wa-color-tint-hover: black 12%;
+  --wa-color-tint-active: black 20%;
 
   /**
-   * Semantic color variants
-   */
-  /* TODO: Add comments for semantic color tokens and usage expectations */
-  /* CONSIDER: Change -alt naming to -tint or -shade? */
+   * Semantic theme colors
+   * Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
+   *  *  Brand to reinforce product branding
+   *  *  Success to express validity or confirmation
+   *  *  Warning to express caution or uncertainty
+   *  *  Danger to express errors or risk
+   *  *  Neutral for elements that are innocuous or inert
+   * Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
+   * Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
+   * Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
+   * Muted colors have no contrast requirements.
+   * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
+  */
+  /* TODO: Change -alt naming? */
   --wa-color-brand-fill-vivid: var(--wa-color-green-50);
   --wa-color-brand-fill-vivid-alt: var(--wa-color-green-40);
   --wa-color-brand-fill-muted: var(--wa-color-green-95);
@@ -181,9 +210,9 @@
   --wa-font-size-xs: 0.75rem; /* 12 */
   --wa-font-size-s: 0.875rem; /* 14 */
   --wa-font-size-m: 1rem; /* 16 */
-  --wa-font-size-l: 1.375rem; /* 22 */
-  --wa-font-size-xl: 1.875rem; /* 30 */
-  --wa-font-size-2xl: 2.625rem; /* 42 */
+  --wa-font-size-l: 1.25rem; /* 20 */
+  --wa-font-size-xl: 1.75rem; /* 28 */
+  --wa-font-size-2xl: 2.5rem; /* 40 */
 
   --wa-font-line-height-compact: 1.25;
   --wa-font-line-height-regular: 1.625;
@@ -191,16 +220,27 @@
 
   /**
    * Spacing
+   * Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
+   * Space can be organized into three groups with distinct usage -
+   *  *  Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
+   *     and padding within small components, such as badges and tooltips
+   *  *  Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
+   *     typical interface elements, such as buttons and inputs
+   *  *  Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
+   *     such as cards and dialogs
    */
-  --wa-space-3xs: 0.125rem; /* 2 */
-  --wa-space-2xs: 0.25rem; /* 4 */
-  --wa-space-xs: 0.5rem; /* 8 */
-  --wa-space-s: 0.75rem; /* 12 */
-  --wa-space-m: 1rem; /* 16 */
-  --wa-space-l: 1.25rem; /* 20 */
-  --wa-space-xl: 1.5rem; /* 24 */
-  --wa-space-2xl: 2rem; /* 32 */
-  --wa-space-3xl: 3rem; /* 48 */
+  /* Space is designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-space-base: 1rem;
+  --wa-space-3xs: calc(var(--wa-space-base) * 0.125); /* 2 */
+  --wa-space-2xs: calc(var(--wa-space-base) * 0.25); /* 4 */
+  --wa-space-xs: calc(var(--wa-space-base) * 0.5); /* 8 */
+  --wa-space-s: calc(var(--wa-space-base) * 0.75); /* 12 */
+  --wa-space-m: var(--wa-space-base); /* 16 */
+  --wa-space-l: calc(var(--wa-space-base) * 1.25); /* 20 */
+  --wa-space-xl: calc(var(--wa-space-base) * 1.5); /* 24 */
+  --wa-space-2xl: calc(var(--wa-space-base) * 2); /* 32 */
+  --wa-space-3xl: calc(var(--wa-space-base) * 3); /* 48 */
 
   --wa-space-square-xs: var(--wa-space-xs);
   --wa-space-square-s: var(--wa-space-s);
@@ -223,17 +263,24 @@
   /**
    * Borders & corners
    */
-  --wa-border-width-thin: 0.0625rem; /* 1px */
-  --wa-border-width-medium: calc(var(--wa-border-width-thin) * 2);
-  --wa-border-width-thick: calc(var(--wa-border-width-thin) * 3);
-
   --wa-border-style: solid;
 
-  --wa-corners-half: calc(var(--wa-corners-1x) * 0.5);
-  --wa-corners-1x: 0.125rem;
-  --wa-corners-2x: calc(var(--wa-corners-1x) * 2);
-  --wa-corners-3x: calc(var(--wa-corners-1x) * 3);
+  /* Border widths are designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-border-width-base: 0.0625rem; /* 1px */
+  --wa-border-width-thin: var(--wa-border-width-base);
+  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2);
+  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3);
 
+  /* Corners are designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-corners-base: 0.125rem;
+  --wa-corners-half: calc(var(--wa-corners-base) * 0.5);
+  --wa-corners-1x: var(--wa-corners-base);
+  --wa-corners-2x: calc(var(--wa-corners-base) * 2);
+  --wa-corners-3x: calc(var(--wa-corners-base) * 3);
+
+  /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
   --wa-corners-pill: 9999px;
   --wa-corners-circle: 50%;
   --wa-corners-sharp: 0;
@@ -241,17 +288,35 @@
   /**
    * Focus
    */
-  --wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-focus);
+  --wa-focus-ring: solid 0.1875rem var(--wa-color-focus);
   --wa-focus-ring-offset: 0.0625rem; /* 1px */
 
   /**
    * Shadows
+   * Shadow effects indicate elevation and, at times, interactivity.
+   * Elevation is defined by levels relative to the surface where the element rests -
+   *  *  Inset sits below the surface for a punched-in effect
+   *  *  Level 0 is the surface level
+   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
+   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
+   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
    */
+  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-shadow-blur-base: 0.0625rem;
+
+  /* Offset values on the y-axis are used in pre-constructed shadows and may be used when constructing custom shadows
+   * or transforming elements with shadows. */
+  --wa-shadow-offset-y-inset: 0.0625rem;
+  --wa-shadow-offset-y-level-1: 0.0625rem;
+  --wa-shadow-offset-y-level-2: 0.125rem;
+  --wa-shadow-offset-y-level-3: 0.25rem;
+
   --wa-shadow-inset: none;
   --wa-shadow-level-0: none;
-  --wa-shadow-level-1: 0 0.0625rem 0 var(--wa-color-shadow);
-  --wa-shadow-level-2: 0 0.125rem 0.125rem var(--wa-color-shadow);
-  --wa-shadow-level-3: 0 0.25rem 0.25rem var(--wa-color-shadow);
+  --wa-shadow-level-1: 0 var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-base) var(--wa-color-shadow);
+  --wa-shadow-level-2: 0 var(--wa-shadow-offset-y-level-2) calc(var(--wa-shadow-blur-base) * 2) var(--wa-color-shadow);
+  --wa-shadow-level-3: 0 var(--wa-shadow-offset-y-level-3) calc(var(--wa-shadow-blur-base) * 4) var(--wa-color-shadow);
 
   /**
    * Z-index
@@ -273,28 +338,42 @@
    * Form controls
    */
   --wa-form-controls-background: var(--wa-color-surface-default);
-  --wa-form-controls-border-style: var(--wa-border-style);
-  --wa-form-controls-border-width: var(--wa-border-width-thin);
-  --wa-form-controls-corners: var(--wa-corners-1x);
+
   --wa-form-controls-border-color-resting: var(--wa-color-neutral-outline-muted-alt);
   --wa-form-controls-border-color-activated: var(--wa-color-brand-outline-vivid);
+  --wa-form-controls-border-style: var(--wa-border-style);
+  --wa-form-controls-border-width: var(--wa-border-width-thin);
+
+  --wa-form-controls-corners: var(--wa-corners-1x);
+
   --wa-form-controls-text-color: var(--wa-color-text-normal);
-  --wa-form-controls-value-line-height: var(--wa-font-height-compact);
-  --wa-form-controls-padding: var(--wa-space-square-s);
+  --wa-form-controls-value-line-height: var(--wa-font-line-height-compact);
+
   --wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
+  --wa-form-controls-placeholder-color-valid: var(--wa-color-green-60);
+  --wa-form-controls-placeholder-color-invalid: var(--wa-color-red-60);
+
+  --wa-form-controls-height-s: calc(
+    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-controls-value-line-height)
+  );
+  --wa-form-controls-height-m: calc(
+    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-controls-value-line-height)
+  );
+  --wa-form-controls-height-l: calc(
+    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-controls-value-line-height)
+  );
 
   /**
    * Panels
    */
+  --wa-panel-border-style: var(--wa-border-style);
   --wa-panel-border-width: var(--wa-border-width-thin);
+
   --wa-panel-corners: var(--wa-corners-2x);
 
   /**
   * From 2.x
   */
-  --wa-form-controls-height-s: 2rem;
-  --wa-form-controls-height-m: 2.75rem;
-  --wa-form-controls-height-l: 3.5rem;
   --wa-form-control-toggle-size-s: 0.875rem;
   --wa-form-control-toggle-size-m: 1.125rem;
   --wa-form-control-toggle-size-l: 1.375rem;
@@ -302,14 +381,17 @@
   --wa-form-controls-required-content-color: inherit;
   --wa-form-controls-required-content-offset: -0.1em;
 
+  --wa-flow-spacing: 1.5rem;
   --wa-tooltip-arrow-size: 0.375rem;
+  --wa-flow-spacing: 1.5rem;
 }
 
-:root.wa-theme-mellow-dark {
+.wa-theme-mellow-dark,
+.wa-theme-mellow-dark :host {
   color-scheme: dark;
 
   /**
-   * App
+   * Base theme colors
    */
   --wa-color-surface-raised: var(--wa-color-neutral-10);
   --wa-color-surface-default: var(--wa-color-neutral-10);
@@ -324,7 +406,11 @@
   --wa-color-selection-background: var(--wa-color-green-40);
   --wa-color-selection-text: var(--wa-color-white);
 
-  --wa-color-focus: var(--wa-color-blue-50);
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-blue-60) 90%, transparent);
+
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-black) 50%, transparent);
+
+  --wa-color-shadow: color-mix(in oklab, var(--wa-color-black) 20%, transparent);
 
   --wa-color-tint-white: rgb(255 255 255 / 0.2);
   --wa-color-tint-black: rgb(0 0 0 / 0.2);
@@ -332,12 +418,8 @@
   --wa-color-tint-hover: black 8%;
   --wa-color-tint-active: black 16%;
 
-  --wa-color-overlay: color-mix(in oklab, var(--wa-color-black) 50%, transparent);
-
-  --wa-color-shadow: color-mix(in oklab, var(--wa-color-black) 20%, transparent);
-
   /**
-    * Semantic color variants
+    * Semantic theme colors
     */
   --wa-color-brand-fill-vivid: var(--wa-color-green-50);
   --wa-color-brand-fill-vivid-alt: var(--wa-color-green-30);

src/themes/playful.css

@@ -0,0 +1,485 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@300..700&family=Roboto+Slab:wght@300..700&display=swap');
+
+:root,
+:host,
+.wa-theme-playful-light {
+  color-scheme: light;
+
+  /**
+   * Primitive colors
+   * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
+   * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
+   * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
+   * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
+   * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
+   */
+  --wa-color-red-95: #fcf0ed;
+  --wa-color-red-90: #f8e0dc;
+  --wa-color-red-80: #f1beb4;
+  --wa-color-red-70: #ea9b8c;
+  --wa-color-red-60: #e27662;
+  --wa-color-red-50: #d63f23;
+  --wa-color-red-40: #a2301a;
+  --wa-color-red-30: #802615;
+  --wa-color-red-20: #5e1c0f;
+  --wa-color-red-10: #381109;
+
+  --wa-color-yellow-95: #fbf1da;
+  --wa-color-yellow-90: #f8e4b5;
+  --wa-color-yellow-80: #f0c45e;
+  --wa-color-yellow-70: #dfa525;
+  --wa-color-yellow-60: #bf8c20;
+  --wa-color-yellow-50: #986f19;
+  --wa-color-yellow-40: #725313;
+  --wa-color-yellow-30: #5a410f;
+  --wa-color-yellow-20: #422f0b;
+  --wa-color-yellow-10: #271c06;
+
+  --wa-color-green-95: #e9f5ee;
+  --wa-color-green-90: #d3ebdd;
+  --wa-color-green-80: #a1d5b5;
+  --wa-color-green-70: #70bf8e;
+  --wa-color-green-60: #3da866;
+  --wa-color-green-50: #008934;
+  --wa-color-green-40: #006727;
+  --wa-color-green-30: #00511f;
+  --wa-color-green-20: #003c17;
+  --wa-color-green-10: #00230e;
+
+  --wa-color-rose-95: #fdeff2;
+  --wa-color-rose-90: #fbdfe6;
+  --wa-color-rose-80: #f7b9c9;
+  --wa-color-rose-70: #f293ac;
+  --wa-color-rose-60: #ed698c;
+  --wa-color-rose-50: #e41e52;
+  --wa-color-rose-40: #ad173e;
+  --wa-color-rose-30: #891231;
+  --wa-color-rose-20: #660d25;
+  --wa-color-rose-10: #3e0816;
+
+  --wa-color-neutral-95: #f2f2f4;
+  --wa-color-neutral-90: #e5e5e9;
+  --wa-color-neutral-80: #c8c9d0;
+  --wa-color-neutral-70: #adaeb8;
+  --wa-color-neutral-60: #9394a1;
+  --wa-color-neutral-50: #737586;
+  --wa-color-neutral-40: #565864;
+  --wa-color-neutral-30: #44454f;
+  --wa-color-neutral-20: #313239;
+  --wa-color-neutral-10: #1d1d21;
+
+  --wa-color-white: white;
+  --wa-color-black: black;
+
+  /**
+   * Base theme colors
+   */
+
+  /* Surfaces are background layers that UI components and other content rest on.
+   * Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
+  --wa-color-surface-raised: var(--wa-color-white);
+  --wa-color-surface-default: var(--wa-color-white);
+  --wa-color-surface-lowered: var(--wa-color-neutral-95);
+  --wa-color-surface-outline: var(--wa-color-neutral-90);
+
+  /* Text colors are used for standard text elements.
+   * Text should have a minimum 4.5:1 contrast ratio against surfaces.
+   * Inverse text should support appropriate contrast against background colors with opposing lightness. */
+  --wa-color-text-normal: var(--wa-color-neutral-10);
+  --wa-color-text-quiet: var(--wa-color-neutral-40);
+  --wa-color-text-inverse: var(--wa-color-white);
+  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+
+  /* Selection colors apply on content that is highlighted by the user.
+   * Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
+  --wa-color-selection-background: var(--wa-color-rose-80);
+  --wa-color-selection-text: var(--wa-color-black);
+
+  /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
+   * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-rose-60) 96%, transparent);
+
+  /* Overlays dim background elements to focus attention on modal content, such as drawers or dialogs. */
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
+
+  /* Shadow specifies the default color for box shadows that indicate elevation. */
+  --wa-color-shadow: color-mix(in oklab, var(--wa-color-neutral-10) 8%, transparent);
+
+  /* Base tints can be mixed with or overlay other colors to make them lighter or darker. */
+  --wa-color-tint-white: rgb(255 255 255 / 0.2);
+  --wa-color-tint-black: rgb(0 0 0 / 0.2);
+
+  /* State tints are mixed with component colors to achieve consistent effects on interaction. */
+  --wa-color-tint-hover: black 12%;
+  --wa-color-tint-active: black 20%;
+
+  /**
+   * Semantic theme colors
+   * Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
+   *  *  Brand to reinforce product branding
+   *  *  Success to express validity or confirmation
+   *  *  Warning to express caution or uncertainty
+   *  *  Danger to express errors or risk
+   *  *  Neutral for elements that are innocuous or inert
+   * Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
+   * Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
+   * Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
+   * Muted colors have no contrast requirements.
+   * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
+  */
+  /* TODO: Change -alt naming? */
+  --wa-color-brand-fill-vivid: var(--wa-color-rose-50);
+  --wa-color-brand-fill-vivid-alt: var(--wa-color-rose-40);
+  --wa-color-brand-fill-muted: var(--wa-color-rose-95);
+  --wa-color-brand-fill-muted-alt: var(--wa-color-rose-90);
+  --wa-color-brand-outline-vivid: var(--wa-color-rose-40);
+  --wa-color-brand-outline-vivid-alt: var(--wa-color-rose-30);
+  --wa-color-brand-outline-muted: var(--wa-color-rose-90);
+  --wa-color-brand-outline-muted-alt: var(--wa-color-rose-80);
+  --wa-color-brand-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-brand-text-on-muted: var(--wa-color-rose-40);
+  --wa-color-brand-text-on-surface: var(--wa-color-rose-50);
+
+  --wa-color-success-fill-vivid: var(--wa-color-green-50);
+  --wa-color-success-fill-vivid-alt: var(--wa-color-green-40);
+  --wa-color-success-fill-muted: var(--wa-color-green-95);
+  --wa-color-success-fill-muted-alt: var(--wa-color-green-90);
+  --wa-color-success-outline-vivid: var(--wa-color-green-40);
+  --wa-color-success-outline-vivid-alt: var(--wa-color-green-30);
+  --wa-color-success-outline-muted: var(--wa-color-green-90);
+  --wa-color-success-outline-muted-alt: var(--wa-color-green-80);
+  --wa-color-success-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-success-text-on-muted: var(--wa-color-green-40);
+  --wa-color-success-text-on-surface: var(--wa-color-green-50);
+
+  --wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-40);
+  --wa-color-warning-fill-muted: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-muted-alt: var(--wa-color-yellow-90);
+  --wa-color-warning-outline-vivid: var(--wa-color-yellow-40);
+  --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-30);
+  --wa-color-warning-outline-muted: var(--wa-color-yellow-90);
+  --wa-color-warning-outline-muted-alt: var(--wa-color-yellow-80);
+  --wa-color-warning-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-warning-text-on-muted: var(--wa-color-yellow-40);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
+
+  --wa-color-danger-fill-vivid: var(--wa-color-red-50);
+  --wa-color-danger-fill-vivid-alt: var(--wa-color-red-40);
+  --wa-color-danger-fill-muted: var(--wa-color-red-95);
+  --wa-color-danger-fill-muted-alt: var(--wa-color-red-90);
+  --wa-color-danger-outline-vivid: var(--wa-color-red-40);
+  --wa-color-danger-outline-vivid-alt: var(--wa-color-red-30);
+  --wa-color-danger-outline-muted: var(--wa-color-red-90);
+  --wa-color-danger-outline-muted-alt: var(--wa-color-red-80);
+  --wa-color-danger-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-danger-text-on-muted: var(--wa-color-red-40);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-50);
+
+  --wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-40);
+  --wa-color-neutral-fill-muted: var(--wa-color-neutral-95);
+  --wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-90);
+  --wa-color-neutral-outline-vivid: var(--wa-color-neutral-40);
+  --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-30);
+  --wa-color-neutral-outline-muted: var(--wa-color-neutral-90);
+  --wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-80);
+  --wa-color-neutral-text-on-vivid: var(--wa-color-text-inverse);
+  --wa-color-neutral-text-on-muted: var(--wa-color-neutral-40);
+  --wa-color-neutral-text-on-surface: var(--wa-color-neutral-50);
+
+  /**
+   * Typography
+   */
+  --wa-font-family-heading: 'Roboto Slab', sans-serif;
+  --wa-font-family-body: 'Roboto Flex', sans-serif;
+  --wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --wa-font-family-longform: 'Lora', serif;
+
+  --wa-font-weight-light: 300;
+  --wa-font-weight-normal: 400;
+  --wa-font-weight-medium: 500;
+  --wa-font-weight-heavy: 600;
+
+  --wa-font-weight-heading: var(--wa-font-weight-heavy);
+  --wa-font-weight-body: var(--wa-font-weight-normal);
+  --wa-font-weight-action: var(--wa-font-weight-heavy);
+
+  --wa-font-size-root: 16px;
+  --wa-font-size-2xs: 0.625rem; /* 10 */
+  --wa-font-size-xs: 0.75rem; /* 12 */
+  --wa-font-size-s: 0.875rem; /* 14 */
+  --wa-font-size-m: 1rem; /* 16 */
+  --wa-font-size-l: 1.25rem; /* 20 */
+  --wa-font-size-xl: 1.75rem; /* 28 */
+  --wa-font-size-2xl: 2.5rem; /* 40 */
+
+  --wa-font-line-height-compact: 1.25;
+  --wa-font-line-height-regular: 1.625;
+  --wa-font-line-height-comfortable: 2;
+
+  /**
+   * Spacing
+   * Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
+   * Space can be organized into three groups with distinct usage -
+   *  *  Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
+   *     and padding within small components, such as badges and tooltips
+   *  *  Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
+   *     typical interface elements, such as buttons and inputs
+   *  *  Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
+   *     such as cards and dialogs
+   */
+  /* Space is designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-space-base: 1rem;
+  --wa-space-3xs: calc(var(--wa-space-base) * 0.125); /* 2 */
+  --wa-space-2xs: calc(var(--wa-space-base) * 0.25); /* 4 */
+  --wa-space-xs: calc(var(--wa-space-base) * 0.5); /* 8 */
+  --wa-space-s: calc(var(--wa-space-base) * 0.75); /* 12 */
+  --wa-space-m: var(--wa-space-base); /* 16 */
+  --wa-space-l: calc(var(--wa-space-base) * 1.25); /* 20 */
+  --wa-space-xl: calc(var(--wa-space-base) * 1.5); /* 24 */
+  --wa-space-2xl: calc(var(--wa-space-base) * 2); /* 32 */
+  --wa-space-3xl: calc(var(--wa-space-base) * 3); /* 48 */
+
+  --wa-space-square-xs: var(--wa-space-xs);
+  --wa-space-square-s: var(--wa-space-s);
+  --wa-space-square-m: var(--wa-space-m);
+  --wa-space-square-l: var(--wa-space-l);
+  --wa-space-square-xl: var(--wa-space-xl);
+
+  --wa-space-stretch-xs: var(--wa-space-xs) var(--wa-space-m);
+  --wa-space-stretch-s: var(--wa-space-s) var(--wa-space-l);
+  --wa-space-stretch-m: var(--wa-space-m) var(--wa-space-xl);
+  --wa-space-stretch-l: var(--wa-space-l) var(--wa-space-2xl);
+  --wa-space-stretch-xl: var(--wa-space-xl) var(--wa-space-3xl);
+
+  --wa-space-squish-xs: var(--wa-space-xs) var(--wa-space-3xs);
+  --wa-space-squish-s: var(--wa-space-s) var(--wa-space-2xs);
+  --wa-space-squish-m: var(--wa-space-m) var(--wa-space-xs);
+  --wa-space-squish-l: var(--wa-space-l) var(--wa-space-s);
+  --wa-space-squish-xl: var(--wa-space-xl) var(--wa-space-m);
+
+  /**
+   * Borders & corners
+   */
+  --wa-border-style: solid;
+
+  /* Border widths are designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-border-width-base: 0.125rem; /* 1px */
+  --wa-border-width-thin: var(--wa-border-width-base);
+  --wa-border-width-medium: calc(var(--wa-border-width-base) * 2);
+  --wa-border-width-thick: calc(var(--wa-border-width-base) * 3);
+
+  /* Corners are designed to scale according to a single base value.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-corners-base: 0.375rem;
+  --wa-corners-half: calc(var(--wa-corners-base) * 0.5);
+  --wa-corners-1x: var(--wa-corners-base);
+  --wa-corners-2x: calc(var(--wa-corners-base) * 2);
+  --wa-corners-3x: calc(var(--wa-corners-base) * 3);
+
+  /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
+  --wa-corners-pill: 9999px;
+  --wa-corners-circle: 50%;
+  --wa-corners-sharp: 0;
+
+  /**
+   * Focus
+   */
+  --wa-focus-ring: solid 0.1875rem var(--wa-color-focus);
+  --wa-focus-ring-offset: 0.0625rem; /* 1px */
+
+  /**
+   * Shadows
+   * Shadow effects indicate elevation and, at times, interactivity.
+   * Elevation is defined by levels relative to the surface where the element rests -
+   *  *  Inset sits below the surface for a punched-in effect
+   *  *  Level 0 is the surface level
+   *  *  Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
+   *  *  Level 2 is raised above all other elements on the same surface, such as dropdown menus
+   *  *  Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
+   */
+  /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
+   * The base value is intended for calculations and is not used by components directly. */
+  --wa-shadow-blur-base: 0rem;
+
+  /* Offset values on the y-axis are used in pre-constructed shadows and may be used when constructing custom shadows
+   * or transforming elements with shadows. */
+  --wa-shadow-offset-y-inset: 0.125rem;
+  --wa-shadow-offset-y-level-1: 0.25rem;
+  --wa-shadow-offset-y-level-2: 0.375rem;
+  --wa-shadow-offset-y-level-3: 0.5rem;
+
+  --wa-shadow-inset: inset 0 var(--wa-shadow-offset-y-inset) calc(var(--wa-shadow-blur-base) * 0.5)
+    var(--wa-color-shadow);
+  --wa-shadow-level-0: none;
+  --wa-shadow-level-1: 0 var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-base) var(--wa-color-shadow);
+  --wa-shadow-level-2: 0 var(--wa-shadow-offset-y-level-2) calc(var(--wa-shadow-blur-base) * 2) var(--wa-color-shadow);
+  --wa-shadow-level-3: 0 var(--wa-shadow-offset-y-level-3) calc(var(--wa-shadow-blur-base) * 4) var(--wa-color-shadow);
+
+  /**
+   * Z-index
+   */
+  --wa-z-index-drawer: 700;
+  --wa-z-index-dialog: 800;
+  --wa-z-index-dropdown: 900;
+  --wa-z-index-alert-group: 950;
+  --wa-z-index-tooltip: 1000;
+
+  /**
+   * Transitions
+   */
+  --wa-transition-normal: 250ms;
+  --wa-transition-fast: 150ms;
+  --wa-transition-faster: 50ms;
+
+  /**
+   * Form controls
+   */
+  --wa-form-controls-background: var(--wa-color-surface-default);
+
+  --wa-form-controls-border-color-resting: var(--wa-color-neutral-outline-muted-alt);
+  --wa-form-controls-border-color-activated: var(--wa-color-brand-outline-vivid);
+  --wa-form-controls-border-style: var(--wa-border-style);
+  --wa-form-controls-border-width: var(--wa-border-width-thin);
+
+  --wa-form-controls-corners: var(--wa-corners-1x);
+
+  --wa-form-controls-text-color: var(--wa-color-text-normal);
+  --wa-form-controls-value-line-height: var(--wa-font-line-height-compact);
+
+  --wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
+  --wa-form-controls-placeholder-color-valid: var(--wa-color-green-60);
+  --wa-form-controls-placeholder-color-invalid: var(--wa-color-red-60);
+
+  --wa-form-controls-height-s: calc(
+    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-controls-value-line-height)
+  );
+  --wa-form-controls-height-m: calc(
+    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-controls-value-line-height)
+  );
+  --wa-form-controls-height-l: calc(
+    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-controls-value-line-height)
+  );
+
+  /**
+   * Panels
+   */
+  --wa-panel-border-style: var(--wa-border-style);
+  --wa-panel-border-width: var(--wa-border-width-thin);
+
+  --wa-panel-corners: var(--wa-corners-2x);
+
+  /**
+  * From 2.x
+  */
+  --wa-form-control-toggle-size-s: 0.875rem;
+  --wa-form-control-toggle-size-m: 1.125rem;
+  --wa-form-control-toggle-size-l: 1.375rem;
+  --wa-form-controls-required-content: '*';
+  --wa-form-controls-required-content-color: inherit;
+  --wa-form-controls-required-content-offset: -0.1em;
+
+  --wa-flow-spacing: 1.5rem;
+  --wa-tooltip-arrow-size: 0.375rem;
+}
+
+.wa-theme-playful-dark,
+.wa-theme-playful-dark :host {
+  color-scheme: dark;
+
+  /**
+   * Base theme colors
+   */
+  --wa-color-surface-raised: var(--wa-color-neutral-10);
+  --wa-color-surface-default: var(--wa-color-neutral-10);
+  --wa-color-surface-lowered: var(--wa-color-black);
+  --wa-color-surface-outline: var(--wa-color-neutral-20);
+
+  --wa-color-text-normal: var(--wa-color-neutral-95);
+  --wa-color-text-quiet: var(--wa-color-neutral-60);
+  --wa-color-text-inverse: var(--wa-color-neutral-10);
+  --wa-color-text-link: var(--wa-color-brand-text-on-surface);
+
+  --wa-color-selection-background: var(--wa-color-rose-40);
+  --wa-color-selection-text: var(--wa-color-white);
+
+  --wa-color-focus: color-mix(in oklab, var(--wa-color-rose-60) 90%, transparent);
+
+  --wa-color-overlay: color-mix(in oklab, var(--wa-color-black) 50%, transparent);
+
+  --wa-color-shadow: rgb(0 0 0 / 0.25);
+
+  --wa-color-tint-white: rgb(255 255 255 / 0.2);
+  --wa-color-tint-black: rgb(0 0 0 / 0.2);
+
+  --wa-color-tint-hover: black 8%;
+  --wa-color-tint-active: black 16%;
+
+  /**
+    * Semantic theme colors
+    */
+  --wa-color-brand-fill-vivid: var(--wa-color-rose-50);
+  --wa-color-brand-fill-vivid-alt: var(--wa-color-rose-30);
+  --wa-color-brand-fill-muted: var(--wa-color-rose-10);
+  --wa-color-brand-fill-muted-alt: var(--wa-color-rose-20);
+  --wa-color-brand-outline-vivid: var(--wa-color-rose-40);
+  --wa-color-brand-outline-vivid-alt: var(--wa-color-rose-30);
+  --wa-color-brand-outline-muted: var(--wa-color-rose-20);
+  --wa-color-brand-outline-muted-alt: var(--wa-color-rose-30);
+  --wa-color-brand-text-on-vivid: var(--wa-color-white);
+  --wa-color-brand-text-on-muted: var(--wa-color-rose-70);
+  --wa-color-brand-text-on-surface: var(--wa-color-rose-60);
+
+  --wa-color-success-fill-vivid: var(--wa-color-green-50);
+  --wa-color-success-fill-vivid-alt: var(--wa-color-green-30);
+  --wa-color-success-fill-muted: var(--wa-color-green-10);
+  --wa-color-success-fill-muted-alt: var(--wa-color-green-20);
+  --wa-color-success-outline-vivid: var(--wa-color-green-40);
+  --wa-color-success-outline-vivid-alt: var(--wa-color-green-30);
+  --wa-color-success-outline-muted: var(--wa-color-green-20);
+  --wa-color-success-outline-muted-alt: var(--wa-color-green-30);
+  --wa-color-success-text-on-vivid: var(--wa-color-white);
+  --wa-color-success-text-on-muted: var(--wa-color-green-70);
+  --wa-color-success-text-on-surface: var(--wa-color-green-60);
+
+  --wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
+  --wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-30);
+  --wa-color-warning-fill-muted: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-muted-alt: var(--wa-color-yellow-20);
+  --wa-color-warning-outline-vivid: var(--wa-color-yellow-40);
+  --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-30);
+  --wa-color-warning-outline-muted: var(--wa-color-yellow-20);
+  --wa-color-warning-outline-muted-alt: var(--wa-color-yellow-30);
+  --wa-color-warning-text-on-vivid: var(--wa-color-white);
+  --wa-color-warning-text-on-muted: var(--wa-color-yellow-70);
+  --wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
+
+  --wa-color-danger-fill-vivid: var(--wa-color-red-50);
+  --wa-color-danger-fill-vivid-alt: var(--wa-color-red-30);
+  --wa-color-danger-fill-muted: var(--wa-color-red-10);
+  --wa-color-danger-fill-muted-alt: var(--wa-color-red-20);
+  --wa-color-danger-outline-vivid: var(--wa-color-red-40);
+  --wa-color-danger-outline-vivid-alt: var(--wa-color-red-30);
+  --wa-color-danger-outline-muted: var(--wa-color-red-20);
+  --wa-color-danger-outline-muted-alt: var(--wa-color-red-30);
+  --wa-color-danger-text-on-vivid: var(--wa-color-white);
+  --wa-color-danger-text-on-muted: var(--wa-color-red-70);
+  --wa-color-danger-text-on-surface: var(--wa-color-red-60);
+
+  --wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
+  --wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-30);
+  --wa-color-neutral-fill-muted: var(--wa-color-neutral-10);
+  --wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-20);
+  --wa-color-neutral-outline-vivid: var(--wa-color-neutral-40);
+  --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-30);
+  --wa-color-neutral-outline-muted: var(--wa-color-neutral-20);
+  --wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-30);
+  --wa-color-neutral-text-on-vivid: var(--wa-color-white);
+  --wa-color-neutral-text-on-muted: var(--wa-color-neutral-70);
+  --wa-color-neutral-text-on-surface: var(--wa-color-neutral-60);
+}
+
+/* _utility.css */