remove unnecessary checks

get typescript to give a real error
prettier
2026-01-21 08:14:16 +00:00 · 2025-06-06 17:18:01 -04:00 · 2025-06-06 17:13:17 -04:00 · 2025-06-06 16:59:33 -04:00 · 2025-06-06 16:58:47 -04:00 · 2025-06-06 13:29:56 -04:00
185 changed files with 6221 additions and 2741 deletions
--- a/packages/webawesome/docs/_includes/base.njk
+++ b/packages/webawesome/docs/_includes/base.njk
@@ -20,7 +20,7 @@
  </head>
  <body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
    <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
-    <wa-page view="desktop" disable-navigation-toggle="" mobile-breakpoint="1180">
+    <wa-page view="desktop" disable-navigation-toggle="" mobile-breakpoint="1140">
      <header slot="header" class="wa-split">
        {# Logo #}
        <div id="docs-branding">
@@ -46,9 +46,9 @@

          {# Search #}
          <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
-            <wa-icon slot="start" name="magnifying-glass"></wa-icon>
+            <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
            Search
-            <kbd slot="end" class="wa-desktop-only">/</kbd>
+            <kbd slot="suffix" class="wa-desktop-only">/</kbd>
          </wa-button>

          {# Login #}
--- a/packages/webawesome/docs/_includes/color-scheme-selector.njk
+++ b/packages/webawesome/docs/_includes/color-scheme-selector.njk
@@ -1,19 +1,19 @@
 {# Color scheme selector #}
 <wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
-  <wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
-  <wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
+  <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
+  <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
  <wa-option value="light">
-    <wa-icon slot="start" name="sun" variant="regular"></wa-icon>
+    <wa-icon slot="prefix" name="sun" variant="regular"></wa-icon>
    Light
  </wa-option>
  <wa-option value="dark">
-    <wa-icon slot="start" name="moon" variant="regular"></wa-icon>
+    <wa-icon slot="prefix" name="moon" variant="regular"></wa-icon>
    Dark
  </wa-option>
  <wa-divider></wa-divider>
  <wa-option value="auto">
-    <wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
-    <wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
+    <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
+    <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
    System
  </wa-option>
 </wa-select>
--- a/packages/webawesome/docs/_includes/preset-theme-selector.njk
+++ b/packages/webawesome/docs/_includes/preset-theme-selector.njk
@@ -1,6 +1,6 @@
 {# Preset theme selector #}
 <wa-select appearance="filled" size="small" value="default" pill class="preset-theme-selector">
-  <wa-icon slot="start" name="paintbrush" variant="regular"></wa-icon>
+  <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
  {% for theme in collections.theme | sort %}
    <wa-option value="{{ theme.page.fileSlug }}">
      {{ theme.data.title }}
--- a/packages/webawesome/docs/_includes/search.njk
+++ b/packages/webawesome/docs/_includes/search.njk
@@ -24,7 +24,7 @@
          aria-haspopup="listbox"
          aria-activedescendant
        >
-          <wa-icon slot="start" name="search"></wa-icon>
+          <wa-icon slot="prefix" name="search"></wa-icon>
        </wa-input>
      </div>
    </header>
--- a/packages/webawesome/docs/_includes/sidebar.njk
+++ b/packages/webawesome/docs/_includes/sidebar.njk
@@ -349,21 +349,6 @@
        </li>
      </ul>
    </li>
-    <li>
-      <a href="/docs/patterns/layouts/">Layouts</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-      <ul>
-        <li>
-          <a href="/docs/patterns/layouts/ecommerce/">Ecommerce</a>
-        </li>
-        <li>
-          <a href="/docs/patterns/layouts/app/">App</a>
-        </li>
-        <li>
-          <a href="/docs/patterns/layouts/blog/">Blog</a>
-        </li>
-      </ul>
-    </li>
  </ul>
 </wa-details>

--- a/packages/webawesome/docs/_includes/theme-showcase.njk
+++ b/packages/webawesome/docs/_includes/theme-showcase.njk
@@ -47,7 +47,7 @@
        </div>
        <span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
        <wa-button tabindex="-1" variant="brand">
-          <wa-icon slot="start" name="shopping-bag"></wa-icon>
+          <wa-icon slot="prefix" name="shopping-bag"></wa-icon>
          Checkout
        </wa-button>
      </div>
@@ -62,10 +62,10 @@
      <div class="wa-stack">
        <h3 class="wa-heading-m">Sign In</h3>
        <wa-input tabindex="-1" label="Email" placeholder="ddjarin@mandalore.gov">
-          <wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
+          <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
        </wa-input>
        <wa-input tabindex="-1" label="Password" type="password">
-          <wa-icon slot="start" name="lock" variant="regular"></wa-icon>
+          <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
        </wa-input>
        <wa-button tabindex="-1" variant="brand">Sign In</wa-button>
        <a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
@@ -244,11 +244,11 @@
      </div>
      <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
        <wa-button appearance="outlined" tabindex="-1">
-          <wa-icon slot="start" name="at"></wa-icon>
+          <wa-icon slot="prefix" name="at"></wa-icon>
          Email
        </wa-button>
        <wa-button appearance="outlined" tabindex="-1">
-          <wa-icon slot="start" name="phone"></wa-icon>
+          <wa-icon slot="prefix" name="phone"></wa-icon>
          Phone
        </wa-button>
      </div>
@@ -268,9 +268,11 @@
          <wa-button id="more-actions-2" slot="trigger" appearance="plain" size="small" tabindex="-1">
            <wa-icon name="ellipsis-vertical" label="View menu"></wa-icon>
          </wa-button>
-          <wa-dropdown-item>Copy link</wa-dropdown-item>
-          <wa-dropdown-item>Rename</wa-dropdown-item>
-          <wa-dropdown-item>Move to trash</wa-dropdown-item>
+          <wa-menu>
+            <wa-menu-item>Copy link</wa-menu-item>
+            <wa-menu-item>Rename</wa-menu-item>
+            <wa-menu-item>Move to trash</wa-menu-item>
+          </wa-menu>
        </wa-dropdown>
        <wa-tooltip for="more-actions-2">View menu</wa-tooltip>
      </div>
--- a/packages/webawesome/docs/_includes/visual-tests/size.njk
+++ b/packages/webawesome/docs/_includes/visual-tests/size.njk
@@ -259,15 +259,19 @@
      <td>
        <wa-dropdown size="small">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
-          <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
+          <wa-menu>
+            <wa-menu-item>Menu Item 1</wa-menu-item>
+            <wa-menu-item>Menu Item 2</wa-menu-item>
+          </wa-menu>
        </wa-dropdown>
      </td>
      <td>
        <wa-dropdown class="wa-size-s">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
-          <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
+          <wa-menu>
+            <wa-menu-item>Menu Item 1</wa-menu-item>
+            <wa-menu-item>Menu Item 2</wa-menu-item>
+          </wa-menu>
        </wa-dropdown>
      </td>
    </tr>
@@ -276,15 +280,19 @@
      <td>
        <wa-dropdown size="medium">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
-          <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
+          <wa-menu>
+            <wa-menu-item>Menu Item 1</wa-menu-item>
+            <wa-menu-item>Menu Item 2</wa-menu-item>
+          </wa-menu>
        </wa-dropdown>
      </td>
      <td>
        <wa-dropdown class="wa-size-m">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
-          <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
+          <wa-menu>
+            <wa-menu-item>Menu Item 1</wa-menu-item>
+            <wa-menu-item>Menu Item 2</wa-menu-item>
+          </wa-menu>
        </wa-dropdown>
      </td>
    </tr>
@@ -293,15 +301,19 @@
      <td>
        <wa-dropdown size="large">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
-          <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
+          <wa-menu>
+            <wa-menu-item>Menu Item 1</wa-menu-item>
+            <wa-menu-item>Menu Item 2</wa-menu-item>
+          </wa-menu>
        </wa-dropdown>
      </td>
      <td>
        <wa-dropdown class="wa-size-l">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
-          <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
+          <wa-menu>
+            <wa-menu-item>Menu Item 1</wa-menu-item>
+            <wa-menu-item>Menu Item 2</wa-menu-item>
+          </wa-menu>
        </wa-dropdown>
      </td>
    </tr>
@@ -310,6 +322,66 @@
 </div>
 <wa-divider></wa-divider>

+<h3>Menu</h3>
+
+<div class="table-scroll">
+<table>
+  <thead>
+    <th></th>
+    <th><code>size=""</code></th>
+    <th><code>.wa-size-[s|m|l]</code></th>
+  </thead>
+  <tbody>
+    <tr>
+      <th><code>small</code>/<code>s</code></th>
+      <td>
+        <wa-menu size="small">
+          <wa-menu-item>Menu Item 1</wa-menu-item>
+          <wa-menu-item>Menu Item 2</wa-menu-item>
+        </wa-menu>
+      </td>
+      <td>
+        <wa-menu class="wa-size-s">
+          <wa-menu-item>Menu Item 1</wa-menu-item>
+          <wa-menu-item>Menu Item 2</wa-menu-item>
+        </wa-menu>
+      </td>
+    </tr>
+    <tr>
+      <th><code>medium</code>/<code>m</code></th>
+      <td>
+        <wa-menu size="medium">
+          <wa-menu-item>Menu Item 1</wa-menu-item>
+          <wa-menu-item>Menu Item 2</wa-menu-item>
+        </wa-menu>
+      </td>
+      <td>
+        <wa-menu class="wa-size-m">
+          <wa-menu-item>Menu Item 1</wa-menu-item>
+          <wa-menu-item>Menu Item 2</wa-menu-item>
+        </wa-menu>
+      </td>
+    </tr>
+    <tr>
+      <th><code>large</code>/<code>l</code></th>
+      <td>
+        <wa-menu size="large">
+          <wa-menu-item>Menu Item 1</wa-menu-item>
+          <wa-menu-item>Menu Item 2</wa-menu-item>
+        </wa-menu>
+      </td>
+      <td>
+        <wa-menu class="wa-size-l">
+          <wa-menu-item>Menu Item 1</wa-menu-item>
+          <wa-menu-item>Menu Item 2</wa-menu-item>
+        </wa-menu>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>
+<wa-divider></wa-divider>
+
 <h3>Input</h3>

 <div class="table-scroll">
@@ -727,4 +799,4 @@
    </tr>
  </tbody>
 </table>
-</div>
+</div>
--- a/packages/webawesome/docs/_layouts/overview.njk
+++ b/packages/webawesome/docs/_layouts/overview.njk
@@ -8,7 +8,7 @@ layout: page-outline

 <div id="block-filter">
  <wa-input type="search" placeholder="Search {{ title }}" with-clear autofocus>
-	<wa-icon slot="start" name="search"></wa-icon>
+	<wa-icon slot="prefix" name="search"></wa-icon>
  </wa-input>
 </div>

--- a/packages/webawesome/docs/_layouts/palette.njk
+++ b/packages/webawesome/docs/_layouts/palette.njk
@@ -72,7 +72,7 @@
   </div>

  <wa-button @click="reset()" appearance="outlined" variant="danger" size="small">
-    <wa-icon slot="start" name="circle-xmark" variant="regular"></wa-icon>
+    <wa-icon slot="prefix" name="circle-xmark" variant="regular"></wa-icon>
    Reset
  </wa-button>
 </wa-callout>
--- a/packages/webawesome/docs/_layouts/theme.njk
+++ b/packages/webawesome/docs/_layouts/theme.njk
@@ -24,12 +24,12 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
  <h4 slot="summary" data-no-anchor data-no-outline id="remix">
    <wa-icon name="arrows-rotate"></wa-icon>
    Remix this theme
-    <wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="end" variant="regular"></wa-icon>
+    <wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
    <wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
  </h4>

  <wa-select name="palette" label="Color palette" with-clear v-model="theme.palette">
-    <wa-icon name="swatchbook" slot="start" variant="regular"></wa-icon>
+    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
    <wa-option v-for="(palette, paletteId) in palettes" :label="palette.title" :value="paletteId === baseTheme.palette ? '' : paletteId">
      <palette-card :palette="paletteId" size="small">
        <template #extra>
@@ -43,7 +43,7 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
                :values="hues"></color-select>

  <wa-select name="colors" class="theme-colors-select" label="Color contrast from…" value="" with-clear v-model="theme.colors">
-    <wa-icon name="palette" slot="start" variant="regular"></wa-icon>
+    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
    <template v-for="(themeMeta, themeId) in themes">
      <wa-option v-if="themeId !== 'custom'" :label="themeMeta.title" :value="themeId === computed.colors ? '' : themeId">
        <theme-card :theme="themeId" type="colors" :rest="{base: computed.base, palette: computed.palette, brand: computed.brand}" size="small">
@@ -56,7 +56,7 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
  </wa-select>

  <wa-select name="typography" label="Typography from…" with-clear v-model="theme.typography">
-    <wa-icon name="font-case" slot="start"></wa-icon>
+    <wa-icon name="font-case" slot="prefix"></wa-icon>

    <wa-option v-for="(themeMeta, themeId) in themes" :label="themeMeta.title" :value="themeId === theme.base ? '' : themeId">
      <fonts-card :theme="themeId" size="small">
--- a/packages/webawesome/docs/assets/examples/page/demo-1.html
+++ b/packages/webawesome/docs/assets/examples/page/demo-1.html
@@ -42,7 +42,7 @@
          </wa-breadcrumb>
        </div>
        <wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem">
-          <wa-icon slot="start" name="magnifying-glass"></wa-icon>
+          <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
        </wa-input>
      </nav>
      <nav slot="navigation-header">
--- a/packages/webawesome/docs/assets/examples/page/demo-2.html
+++ b/packages/webawesome/docs/assets/examples/page/demo-2.html
@@ -19,7 +19,7 @@
          <span class="wa-heading-m">radiogaga</span>
        </div>
        <wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%">
-          <wa-icon slot="start" name="magnifying-glass"></wa-icon>
+          <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
        </wa-input>
        <div class="wa-cluster">
          <wa-button appearance="outlined">Log In</wa-button>
@@ -28,7 +28,7 @@
      </header>
      <div slot="navigation-header" class="wa-split">
        <wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%" class="wa-mobile-only">
-          <wa-icon slot="start" name="magnifying-glass"></wa-icon>
+          <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
        </wa-input>
        <div class="wa-split">
          <h2 class="wa-heading-s">For You</h2>
--- a/packages/webawesome/docs/assets/styles/code-highlighter.css
+++ b/packages/webawesome/docs/assets/styles/code-highlighter.css
@@ -1,5 +1,4 @@
-/* Only code blocks generated by our docs get these styles */
-pre[id*='code-block-'] {
+pre {
  background-color: var(--wa-color-gray-20);
  color: white;

@@ -9,7 +8,6 @@ pre[id*='code-block-'] {
    background-color: var(--wa-color-surface-lowered);
  }
 }
-
 .code-comment,
 .code-prolog,
 .code-doctype,
--- a/packages/webawesome/docs/assets/styles/copy-code.css
+++ b/packages/webawesome/docs/assets/styles/copy-code.css
@@ -1,19 +1,3 @@
-/* Prep our code blocks to host the copy button */
-pre[id*='code-block-']:has(code) {
-  position: relative;
-  padding: 0;
-  white-space: normal;
-
-  & code {
-    display: block;
-    font-size: 1em;
-    background-color: transparent;
-    padding: var(--wa-space-m);
-    white-space: pre;
-    overflow-x: auto;
-  }
-}
-
 wa-copy-button.copy-button {
  --background-color: var(--wa-color-gray-20);
  --background-color-hover: color-mix(in oklab, var(--background-color), white 5%);
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -251,6 +251,12 @@ wa-page[view='mobile'] :is([slot='navigation-header'], [slot='navigation']) {
  }
 }

+[slot='navigation-header'] wa-menu {
+  font-family: var(--wa-font-family-body);
+  font-size: var(--wa-font-size-m);
+  font-weight: var(--wa-font-weight-normal);
+}
+
 /* Main content */
 wa-page > main {
  max-width: 80ch;
--- a/packages/webawesome/docs/assets/styles/theme-headers.css
+++ b/packages/webawesome/docs/assets/styles/theme-headers.css
@@ -185,11 +185,11 @@ html.wa-theme-brutalist .preview-container {
    text-align: right;
  }

-  .product-card wa-button::part(start) {
+  .product-card wa-button::part(prefix) {
    padding-inline-start: var(--wa-space-xs);
  }

-  .product-card wa-button::part(end) {
+  .product-card wa-button::part(suffix) {
    padding-inline-end: var(--wa-space-xs);
  }

--- a/packages/webawesome/docs/docs/components/badge.md
+++ b/packages/webawesome/docs/docs/components/badge.md
@@ -141,3 +141,14 @@ One of the most common use cases for badges is attaching them to buttons. To mak
  <wa-badge variant="danger" pill>6</wa-badge>
 </wa-button>
 ```
+
+### With Menu Items
+
+When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
+
+```html {.example}
+<wa-menu style="max-width: 240px;">
+  <wa-menu-label>Messages</wa-menu-label>
+  <wa-menu-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-menu-item>
+  <wa-menu-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-menu-item>
+</wa-menu>
--- a/packages/webawesome/docs/docs/components/breadcrumb-item.md
+++ b/packages/webawesome/docs/docs/components/breadcrumb-item.md
@@ -5,4 +5,17 @@ tags: component
 parent: breadcrumb
 ---

-This component must be used as a child of `<wa-breadcrumb>`. Please see the [Breadcrumb docs](/docs/components/breadcrumb) to see examples of this component in action.
+```html {.example}
+<wa-breadcrumb>
+  <wa-breadcrumb-item>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
+    Home
+  </wa-breadcrumb-item>
+  <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Shirts</wa-breadcrumb-item>
+</wa-breadcrumb>
+```
+
+:::info
+Additional demonstrations can be found in the [breadcrumb examples](/docs/components/breadcrumb).
+:::
--- a/packages/webawesome/docs/docs/components/breadcrumb.md
+++ b/packages/webawesome/docs/docs/components/breadcrumb.md
@@ -36,20 +36,32 @@ For websites, you'll probably want to use links instead. You can make any breadc
 </wa-breadcrumb>
 ```

-### Start & End Decorations
+### Prefixes

-Use the `start` and `end` slots to add presentational elements like `<wa-icon>` next to any breadcrumb item.
+Use the `prefix` slot to add content before any breadcrumb item.

 ```html {.example}
 <wa-breadcrumb>
  <wa-breadcrumb-item>
-    <wa-icon slot="start" name="house"></wa-icon>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
    Home
  </wa-breadcrumb-item>
  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
+</wa-breadcrumb>
+```
+
+### Suffixes
+
+Use the `suffix` slot to add content after any breadcrumb item.
+
+```html {.example}
+<wa-breadcrumb>
+  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
  <wa-breadcrumb-item>
-    <wa-icon slot="end" name="tree-palm"></wa-icon>
-    Traveling
+    Security
+    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
  </wa-breadcrumb-item>
 </wa-breadcrumb>
 ```
@@ -87,7 +99,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it

 ### Custom Colors

-Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Content in the `start`, `end`, and `separator` slots can be styled using CSS parts.
+Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Prefixes, suffixes, and separators can be styled using CSS parts.

 ```html {.example}
 <style>
@@ -100,14 +112,14 @@ Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Content in the
  .redcrumbs wa-breadcrumb-item::part(separator) {
    color: pink;
  }
-  .redcrumbs wa-breadcrumb-item::part(start),
-  .redcrumbs wa-breadcrumb-item::part(end) {
+  .redcrumbs wa-breadcrumb-item::part(prefix),
+  .redcrumbs wa-breadcrumb-item::part(suffix) {
    color: currentColor;
  }
 </style>
 <wa-breadcrumb class="redcrumbs">
  <wa-breadcrumb-item>
-    <wa-icon slot="start" name="house" variant="solid"></wa-icon>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
    Home
  </wa-breadcrumb-item>
  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
@@ -127,9 +139,11 @@ Dropdown menus can be placed in the default slot to provide additional options.
      <wa-button slot="trigger" size="small" appearance="filled" pill>
        <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
      </wa-button>
-      <wa-dropdown-item type="checkbox" checked>Web Design</wa-dropdown-item>
-      <wa-dropdown-item type="checkbox">Web Development</wa-dropdown-item>
-      <wa-dropdown-item type="checkbox">Marketing</wa-dropdown-item>
+      <wa-menu>
+        <wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
+        <wa-menu-item type="checkbox">Web Development</wa-menu-item>
+        <wa-menu-item type="checkbox">Marketing</wa-menu-item>
+      </wa-menu>
    </wa-dropdown>
  </wa-breadcrumb-item>
  <wa-breadcrumb-item>Our Services</wa-breadcrumb-item>
@@ -137,7 +151,7 @@ Dropdown menus can be placed in the default slot to provide additional options.
 </wa-breadcrumb>
 ```

-Alternatively, you can place dropdown menus in a `start` or `end` slot.
+Alternatively, you can place dropdown menus in a prefix or suffix slot.

 ```html {.example}
 <wa-breadcrumb>
@@ -146,14 +160,15 @@ Alternatively, you can place dropdown menus in a `start` or `end` slot.
  <wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
  <wa-breadcrumb-item>
    Web Design
-    <wa-dropdown slot="end">
+    <wa-dropdown slot="suffix">
      <wa-button slot="trigger" size="small" appearance="filled" pill>
        <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
      </wa-button>
-      <wa-dropdown-item type="checkbox" checked>Web Design</wa-dropdown-item>
-      <wa-dropdown-item type="checkbox">Web Development</wa-dropdown-item>
-      <wa-dropdown-item type="checkbox">Marketing</wa-dropdown-item>
+      <wa-menu>
+        <wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
+        <wa-menu-item type="checkbox">Web Development</wa-menu-item>
+        <wa-menu-item type="checkbox">Marketing</wa-menu-item>
+      </wa-menu>
    </wa-dropdown>
  </wa-breadcrumb-item>
 </wa-breadcrumb>
-```
--- a/packages/webawesome/docs/docs/components/button-group.md
+++ b/packages/webawesome/docs/docs/components/button-group.md
@@ -50,26 +50,26 @@ and it will override the inherited size,
 it is rarely a good idea to mix sizes within the same button group.
 :::

-### Vertical Button Groups
+### Vertical button groups

 Set the `orientation` attribute to `vertical` to make a vertical button group.

 ```html {.example}
 <wa-button-group orientation="vertical" label="Options" style="max-width: 120px;">
  <wa-button>
-    <wa-icon slot="start" name="plus"></wa-icon>
+    <wa-icon slot="prefix" name="plus"></wa-icon>
    New
  </wa-button>
  <wa-button>
-    <wa-icon slot="start" name="folder-open"></wa-icon>
+    <wa-icon slot="prefix" name="folder-open"></wa-icon>
    Open
  </wa-button>
  <wa-button>
-    <wa-icon slot="start" name="save"></wa-icon>
+    <wa-icon slot="prefix" name="save"></wa-icon>
    Save
  </wa-button>
  <wa-button>
-    <wa-icon slot="start" name="print"></wa-icon>
+    <wa-icon slot="prefix" name="print"></wa-icon>
    Print
  </wa-button>
 </wa-button-group>
@@ -166,9 +166,11 @@ Dropdowns can be placed into button groups.
  <wa-button>Button</wa-button>
  <wa-dropdown>
    <wa-button slot="trigger" caret>Dropdown</wa-button>
-    <wa-dropdown-item>Item 1</wa-dropdown-item>
-    <wa-dropdown-item>Item 2</wa-dropdown-item>
-    <wa-dropdown-item>Item 3</wa-dropdown-item>
+    <wa-menu>
+      <wa-menu-item>Item 1</wa-menu-item>
+      <wa-menu-item>Item 2</wa-menu-item>
+      <wa-menu-item>Item 3</wa-menu-item>
+    </wa-menu>
  </wa-dropdown>
  <wa-button>Button</wa-button>
 </wa-button-group>
@@ -185,9 +187,11 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/do
    <wa-button slot="trigger" variant="brand">
      <wa-icon name="chevron-down" label="More options"></wa-icon>
    </wa-button>
-    <wa-dropdown-item>Save</wa-dropdown-item>
-    <wa-dropdown-item>Save as&hellip;</wa-dropdown-item>
-    <wa-dropdown-item>Save all</wa-dropdown-item>
+    <wa-menu>
+      <wa-menu-item>Save</wa-menu-item>
+      <wa-menu-item>Save as&hellip;</wa-menu-item>
+      <wa-menu-item>Save all</wa-menu-item>
+    </wa-menu>
  </wa-dropdown>
 </wa-button-group>
 ```
@@ -226,15 +230,9 @@ Create interactive toolbars with button groups.
  </wa-button-group>

  <wa-button-group label="Alignment">
-    <wa-button id="button-align-left">
-      <wa-icon name="align-left" variant="solid" label="Align Left"></wa-icon>
-    </wa-button>
-    <wa-button id="button-align-center">
-      <wa-icon name="align-center" variant="solid" label="Align Center"></wa-icon>
-    </wa-button>
-    <wa-button id="button-align-right">
-      <wa-icon name="align-right" variant="solid" label="Align Right"></wa-icon>
-    </wa-button>
+    <wa-button id="button-align-left"><wa-icon name="align-left" variant="solid" label="Align Left"></wa-icon></wa-button>
+    <wa-button id="button-align-center"><wa-icon name="align-center" variant="solid" label="Align Center"></wa-icon></wa-button>
+    <wa-button id="button-align-right"><wa-icon name="align-right" variant="solid" label="Align Right"></wa-icon></wa-button>
  </wa-button-group>
 </div>

--- a/packages/webawesome/docs/docs/components/button.md
+++ b/packages/webawesome/docs/docs/components/button.md
@@ -126,60 +126,60 @@ As expected, buttons can be given a custom width by setting the `width` CSS prop
 <wa-button size="large" style="width: 100%;">Large</wa-button>
 ```

-### Start & End Decorations
+### Prefix and Suffix Icons

-Use the `start` and `end` slots to add presentational elements like `<wa-icon>` next to the button label.
+Use the `prefix` and `suffix` slots to add icons.

 ```html {.example}
 <wa-button size="small">
-  <wa-icon slot="start" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
  Settings
 </wa-button>

 <wa-button size="small">
-  <wa-icon slot="end" name="undo"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
  Refresh
 </wa-button>

 <wa-button size="small">
-  <wa-icon slot="start" name="link"></wa-icon>
-  <wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
  Open
 </wa-button>

 <br /><br />

 <wa-button>
-  <wa-icon slot="start" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
  Settings
 </wa-button>

 <wa-button>
-  <wa-icon slot="end" name="undo"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
  Refresh
 </wa-button>

 <wa-button>
-  <wa-icon slot="start" name="link"></wa-icon>
-  <wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
  Open
 </wa-button>

 <br /><br />

 <wa-button size="large">
-  <wa-icon slot="start" name="gear"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
  Settings
 </wa-button>

 <wa-button size="large">
-  <wa-icon slot="end" name="undo"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
  Refresh
 </wa-button>

 <wa-button size="large">
-  <wa-icon slot="start" name="link"></wa-icon>
-  <wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
  Open
 </wa-button>
 ```
--- a/packages/webawesome/docs/docs/components/carousel-item.md
+++ b/packages/webawesome/docs/docs/components/carousel-item.md
@@ -6,4 +6,41 @@ parent: carousel
 icon: carousel-item
 ---

-This component must be used as a child of `<wa-carousel>`. Please see the [Carousel docs](/docs/components/carousel) to see examples of this component in action.
+```html {.example}
+<wa-carousel pagination>
+  <wa-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
+      src="/assets/examples/carousel/mountains.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
+      src="/assets/examples/carousel/waterfall.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
+      src="/assets/examples/carousel/sunset.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
+      src="/assets/examples/carousel/field.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
+      src="/assets/examples/carousel/valley.jpg"
+    />
+  </wa-carousel-item>
+</wa-carousel>
+```
+
+:::info
+Additional demonstrations can be found in the [carousel examples](/docs/components/carousel).
+:::
--- a/packages/webawesome/docs/docs/components/divider.md
+++ b/packages/webawesome/docs/docs/components/divider.md
@@ -58,14 +58,13 @@ The default orientation for dividers is `horizontal`. Set `orientation` attribut
 Use dividers in [menus](/docs/components/menu) to visually group menu items.

 ```html {.example}
-<wa-dropdown style="max-width: 200px;">
-  <wa-button slot="trigger" caret>Menu</wa-button>
-  <wa-dropdown-item value="1">Option 1</wa-dropdown-item>
-  <wa-dropdown-item value="2">Option 2</wa-dropdown-item>
-  <wa-dropdown-item value="3">Option 3</wa-dropdown-item>
+<wa-menu style="max-width: 200px;">
+  <wa-menu-item value="1">Option 1</wa-menu-item>
+  <wa-menu-item value="2">Option 2</wa-menu-item>
+  <wa-menu-item value="3">Option 3</wa-menu-item>
  <wa-divider></wa-divider>
-  <wa-dropdown-item value="4">Option 4</wa-dropdown-item>
-  <wa-dropdown-item value="5">Option 5</wa-dropdown-item>
-  <wa-dropdown-item value="6">Option 6</wa-dropdown-item>
-</wa-dropdown>
+  <wa-menu-item value="4">Option 4</wa-menu-item>
+  <wa-menu-item value="5">Option 5</wa-menu-item>
+  <wa-menu-item value="6">Option 6</wa-menu-item>
+</wa-menu>
 ```
--- a/packages/webawesome/docs/docs/components/dropdown.md
+++ b/packages/webawesome/docs/docs/components/dropdown.md
@@ -32,8 +32,8 @@ Dropdowns are designed to work well with [dropdown items](/docs/components/dropd
    <wa-dropdown-item slot="submenu" value="show-thumbnails">Show Thumbnails</wa-dropdown-item>
  </wa-dropdown-item>
  <wa-divider></wa-divider>
-  <wa-dropdown-item type="checkbox" checked>Emoji Shortcuts<wa-dropdown-item>
-  <wa-dropdown-item type="checkbox" checked>Word Wrap</wa-dropdown-item>
+  <wa-dropdown-item type="checkbox">Emoji Shortcuts<wa-dropdown-item>
+  <wa-dropdown-item type="checkbox">Word Wrap</wa-dropdown-item>
  <wa-divider></wa-divider>
  <wa-dropdown-item variant="danger">
    <wa-icon slot="icon" name="trash"></wa-icon>
@@ -240,7 +240,7 @@ The preferred placement of the dropdown can be set with the `placement` attribut
 <wa-dropdown placement="right-start">
  <wa-button slot="trigger">
    File formats
-    <wa-icon slot="end" name="chevron-right"></wa-icon>
+    <wa-icon slot="suffix" name="chevron-right"></wa-icon>
  </wa-button>

  <wa-dropdown-item value="pdf">PDF Document</wa-dropdown-item>
--- a/packages/webawesome/docs/docs/components/input.md
+++ b/packages/webawesome/docs/docs/components/input.md
@@ -109,24 +109,24 @@ The `type` attribute controls the type of input the browser renders.
 <wa-input type="date" placeholder="Date"></wa-input>
 ```

-### Start & End Decorations
+### Prefix & Suffix Icons

-Use the `start` and `end` slots to add presentational elements like `<wa-icon>` within the input.
+Use the `prefix` and `suffix` slots to add icons.

 ```html {.example}
 <wa-input placeholder="Small" size="small">
-  <wa-icon name="house" slot="start"></wa-icon>
-  <wa-icon name="comment" slot="end"></wa-icon>
+  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-input>
 <br />
 <wa-input placeholder="Medium" size="medium">
-  <wa-icon name="house" slot="start"></wa-icon>
-  <wa-icon name="comment" slot="end"></wa-icon>
+  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-input>
 <br />
 <wa-input placeholder="Large" size="large">
-  <wa-icon name="house" slot="start"></wa-icon>
-  <wa-icon name="comment" slot="end"></wa-icon>
+  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
+  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
 </wa-input>
 ```

--- a/packages/webawesome/docs/docs/components/option.md
+++ b/packages/webawesome/docs/docs/components/option.md
@@ -6,4 +6,50 @@ parent: select
 icon: option
 ---

-This component must be used as a child of `<wa-select>`. Please see the [Select docs](/docs/components/select) to see examples of this component in action.
+```html {.example}
+<wa-select label="Select one">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+```
+
+## Examples
+
+### Disabled
+
+Use the `disabled` attribute to disable an option and prevent it from being selected.
+
+```html {.example}
+<wa-select label="Select one">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2" disabled>Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+```
+
+### Prefix & Suffix
+
+Add icons to the start and end of menu items using the `prefix` and `suffix` slots.
+
+```html {.example}
+<wa-select label="Select one">
+  <wa-option value="option-1">
+    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
+    Email
+    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
+  </wa-option>
+
+  <wa-option value="option-2">
+    <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
+    Phone
+    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
+  </wa-option>
+
+  <wa-option value="option-3">
+    <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
+    Chat
+    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
+  </wa-option>
+</wa-select>
+```
--- a/packages/webawesome/docs/docs/components/popover.md
+++ b/packages/webawesome/docs/docs/components/popover.md
@@ -137,7 +137,7 @@ Use the [`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_a
 </wa-popover>

 <wa-button id="popover__autofocus">
-  <wa-icon name="comment" slot="start"></wa-icon>
+  <wa-icon name="comment" slot="prefix"></wa-icon>
  Feedback
 </wa-button>
 ```
--- a/packages/webawesome/docs/docs/components/progress-bar.md
+++ b/packages/webawesome/docs/docs/components/progress-bar.md
@@ -7,7 +7,9 @@ icon: progress-bar
 ---

 ```html {.example}
-<wa-progress-bar value="40"></wa-progress-bar>
+<wa-progress-bar value="40">
+  <wa-icon slot="prefix" name="tasks"></wa-icon>
+</wa-progress-bar>
 ```

 ## Examples
--- a/packages/webawesome/docs/docs/components/progress-ring.md
+++ b/packages/webawesome/docs/docs/components/progress-ring.md
@@ -6,7 +6,9 @@ icon: progress-ring
 ---

 ```html {.example}
-<wa-progress-ring value="25"></wa-progress-ring>
+<wa-progress-ring value="25">
+  <wa-icon slot="prefix" name="circle-notch"></wa-icon>
+</wa-progress-ring>
 ```

 ## Examples
@@ -16,7 +18,9 @@ icon: progress-ring
 Use the `--size` custom property to set the diameter of the progress ring.

 ```html {.example}
-<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
+<wa-progress-ring value="50" style="--size: 200px;">
+  <wa-icon slot="prefix" name="expand"></wa-icon>
+</wa-progress-ring>
 ```

 ### Track and Indicator Width
@@ -24,7 +28,9 @@ Use the `--size` custom property to set the diameter of the progress ring.
 Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator.

 ```html {.example}
-<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></wa-progress-ring>
+<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;">
+  <wa-icon slot="prefix" name="arrows-alt"></wa-icon>
+</wa-progress-ring>
 ```

 ### Colors
@@ -39,6 +45,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
    --indicator-color: deeppink;
  "
 >
+  <wa-icon slot="prefix" name="palette"></wa-icon>
 </wa-progress-ring>
 ```

--- a/packages/webawesome/docs/docs/components/qr-code.md
+++ b/packages/webawesome/docs/docs/components/qr-code.md
@@ -13,7 +13,7 @@ QR codes are useful for providing small pieces of information to users who can q
  <br />

  <wa-input maxlength="255" with-clear label="Value">
-    <wa-icon slot="start" name="link"></wa-icon>
+    <wa-icon slot="prefix" name="link"></wa-icon>
  </wa-input>
 </div>

@@ -46,7 +46,9 @@ QR codes are useful for providing small pieces of information to users who can q
 Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.

 ```html {.example}
-<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></wa-qr-code>
+<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white">
+  <wa-icon slot="prefix" name="palette"></wa-icon>
+</wa-qr-code>
 ```

 ### Size
@@ -54,7 +56,9 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
 Use the `size` attribute to change the size of the QR code.

 ```html {.example}
-<wa-qr-code value="https://shoelace.style/" size="64"></wa-qr-code>
+<wa-qr-code value="https://shoelace.style/" size="64">
+  <wa-icon slot="prefix" name="expand"></wa-icon>
+</wa-qr-code>
 ```

 ### Radius
@@ -62,7 +66,9 @@ Use the `size` attribute to change the size of the QR code.
 Create a rounded effect with the `radius` attribute.

 ```html {.example}
-<wa-qr-code value="https://shoelace.style/" radius="0.5"></wa-qr-code>
+<wa-qr-code value="https://shoelace.style/" radius="0.5">
+  <wa-icon slot="prefix" name="circle"></wa-icon>
+</wa-qr-code>
 ```

 ### Error Correction
@@ -71,10 +77,18 @@ QR codes can be rendered with various levels of [error correction](https://www.q

 ```html {.example}
 <div class="qr-error-correction">
-  <wa-qr-code value="https://shoelace.style/" error-correction="L"></wa-qr-code>
-  <wa-qr-code value="https://shoelace.style/" error-correction="M"></wa-qr-code>
-  <wa-qr-code value="https://shoelace.style/" error-correction="Q"></wa-qr-code>
-  <wa-qr-code value="https://shoelace.style/" error-correction="H"></wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="L">
+    <wa-icon slot="prefix" name="shield"></wa-icon>
+  </wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="M">
+    <wa-icon slot="prefix" name="shield"></wa-icon>
+  </wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="Q">
+    <wa-icon slot="prefix" name="shield"></wa-icon>
+  </wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="H">
+    <wa-icon slot="prefix" name="shield"></wa-icon>
+  </wa-qr-code>
 </div>

 <style>
--- a/packages/webawesome/docs/docs/components/radio.md
+++ b/packages/webawesome/docs/docs/components/radio.md
@@ -7,4 +7,71 @@ native: radio
 icon: radio-group
 ---

-This component must be used as a child of `<wa-radio-group>`. Please see the [Radio Group docs](/docs/components/radio-group) to see examples of this component in action.
+Radios are designed to be used with [radio groups](/docs/components/radio-group).
+
+```html {.example}
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio value="1">Option 1</wa-radio>
+  <wa-radio value="2">Option 2</wa-radio>
+  <wa-radio value="3">Option 3</wa-radio>
+</wa-radio-group>
+```
+
+:::info
+This component works with standard `<form>` elements. Please refer to the section on [form controls](/docs/form-controls) to learn more about form submission and client-side validation.
+:::
+
+## Examples
+
+### Initial Value
+
+To set the initial value and checked state, use the `value` attribute on the containing radio group.
+
+```html {.example}
+<wa-radio-group label="Select an option" name="a" value="3">
+  <wa-radio value="1">Option 1</wa-radio>
+  <wa-radio value="2">Option 2</wa-radio>
+  <wa-radio value="3">Option 3</wa-radio>
+</wa-radio-group>
+```
+
+### Disabled
+
+Use the `disabled` attribute to disable a radio.
+
+```html {.example}
+<wa-radio-group label="Select an option" name="a" value="1">
+  <wa-radio value="1">Option 1</wa-radio>
+  <wa-radio value="2" disabled>Option 2</wa-radio>
+  <wa-radio value="3">Option 3</wa-radio>
+</wa-radio-group>
+```
+
+### Sizes
+
+Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to change the radios' size.
+
+```html {.example}
+<wa-radio-group size="small" value="1">
+  <wa-radio value="1">Small 1</wa-radio>
+  <wa-radio value="2">Small 2</wa-radio>
+  <wa-radio value="3">Small 3</wa-radio>
+</wa-radio-group>
+
+<br />
+
+<wa-radio-group size="medium" value="1">
+  <wa-radio value="1">Medium 1</wa-radio>
+  <wa-radio value="2">Medium 2</wa-radio>
+  <wa-radio value="3">Medium 3</wa-radio>
+</wa-radio-group>
+
+<br />
+
+<wa-radio-group size="large" value="1">
+  <wa-radio value="1">Large 1</wa-radio>
+  <wa-radio value="2">Large 2</wa-radio>
+  <wa-radio value="3">Large 3</wa-radio>
+</wa-radio-group>
+```
+
--- a/packages/webawesome/docs/docs/components/select.md
+++ b/packages/webawesome/docs/docs/components/select.md
@@ -208,30 +208,54 @@ The preferred placement of the select's listbox can be set with the `placement`
 </wa-select>
 ```

-### Start & End Decorations
+### Prefix Icons

-Use the `start` and `end` slots to add presentational elements like `<wa-icon>` within the combobox.
+Use the `prefix` slot to prepend an icon to the control.

 ```html {.example}
 <wa-select placeholder="Small" size="small" with-clear>
-  <wa-icon slot="start" name="house" variant="solid"></wa-icon>
-  <wa-icon slot="end" name="flag-checkered"></wa-icon>
+  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
  <wa-option value="option-1">Option 1</wa-option>
  <wa-option value="option-2">Option 2</wa-option>
  <wa-option value="option-3">Option 3</wa-option>
 </wa-select>
 <br />
 <wa-select placeholder="Medium" size="medium" with-clear>
-  <wa-icon slot="start" name="house" variant="solid"></wa-icon>
-  <wa-icon slot="end" name="flag-checkered"></wa-icon>
+  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
  <wa-option value="option-1">Option 1</wa-option>
  <wa-option value="option-2">Option 2</wa-option>
  <wa-option value="option-3">Option 3</wa-option>
 </wa-select>
 <br />
 <wa-select placeholder="Large" size="large" with-clear>
-  <wa-icon slot="start" name="house" variant="solid"></wa-icon>
-  <wa-icon slot="end" name="flag-checkered"></wa-icon>
+  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+```
+
+### Suffix Icons
+
+Use the `suffix` slot to append an icon to the control.
+
+```html {.example}
+<wa-select placeholder="Small" size="small" with-clear>
+  <wa-icon name="house" slot="suffix"></wa-icon>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+<br />
+<wa-select placeholder="Medium" size="medium" with-clear>
+  <wa-icon name="house" slot="suffix"></wa-icon>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+<br />
+<wa-select placeholder="Large" size="large" with-clear>
+  <wa-icon name="house" slot="suffix"></wa-icon>
  <wa-option value="option-1">Option 1</wa-option>
  <wa-option value="option-2">Option 2</wa-option>
  <wa-option value="option-3">Option 3</wa-option>
@@ -253,15 +277,15 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
  class="custom-tag"
 >
  <wa-option value="email">
-    <wa-icon slot="start" name="envelope" variant="solid"></wa-icon>
+    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
    Email
  </wa-option>
  <wa-option value="phone">
-    <wa-icon slot="start" name="phone" variant="solid"></wa-icon>
+    <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
    Phone
  </wa-option>
  <wa-option value="chat">
-    <wa-icon slot="start" name="comment" variant="solid"></wa-icon>
+    <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
    Chat
  </wa-option>
 </wa-select>
@@ -273,7 +297,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can

  select.getTag = (option, index) => {
    // Use the same icon used in wa-option
-    const name = option.querySelector('wa-icon[slot="start"]').name;
+    const name = option.querySelector('wa-icon[slot="prefix"]').name;

    // You can return a string, a Lit Template, or an HTMLElement here
    return `
--- a/packages/webawesome/docs/docs/components/tab-panel.md
+++ b/packages/webawesome/docs/docs/components/tab-panel.md
@@ -6,4 +6,20 @@ parent: tab-group
 icon: tab-panel
 ---

-This component must be used as a child of `<wa-tab-group>`. Please see the [Tab Group docs](/docs/components/tab-group) to see examples of this component in action.
+```html {.example}
+<wa-tab-group>
+  <wa-tab panel="general">General</wa-tab>
+  <wa-tab panel="custom">Custom</wa-tab>
+  <wa-tab panel="advanced">Advanced</wa-tab>
+  <wa-tab panel="disabled" disabled>Disabled</wa-tab>
+
+  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
+  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
+  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
+  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
+</wa-tab-group>
+```
+
+:::info
+Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
+:::
--- a/packages/webawesome/docs/docs/components/tab.md
+++ b/packages/webawesome/docs/docs/components/tab.md
@@ -6,4 +6,6 @@ parent: tab-group
 icon: tab
 ---

-This component must be used as a child of `<wa-tab-group>`. Please see the [Tab Group docs](/docs/components/tab-group) to see examples of this component in action.
+:::info
+Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
+:::
--- a/packages/webawesome/docs/docs/components/tree-item.md
+++ b/packages/webawesome/docs/docs/components/tree-item.md
@@ -5,4 +5,78 @@ tags: [navigation, disclosure, apps]
 icon: tree
 ---

-This component must be used as a child of `<wa-tree>`. Please see the [Tree docs](/docs/components/tree) to see examples of this component in action.
+```html {.example}
+<wa-tree>
+  <wa-tree-item>
+    Item 1
+    <wa-tree-item>Item A</wa-tree-item>
+    <wa-tree-item>Item B</wa-tree-item>
+    <wa-tree-item>Item C</wa-tree-item>
+  </wa-tree-item>
+  <wa-tree-item>Item 2</wa-tree-item>
+  <wa-tree-item>Item 3</wa-tree-item>
+</wa-tree>
+```
+
+## Examples
+
+### Nested tree items
+
+A tree item can contain other tree items. This allows the node to be expanded or collapsed by the user.
+
+```html {.example}
+<wa-tree>
+  <wa-tree-item>
+    Item 1
+    <wa-tree-item>
+      Item A
+      <wa-tree-item>Item Z</wa-tree-item>
+      <wa-tree-item>Item Y</wa-tree-item>
+      <wa-tree-item>Item X</wa-tree-item>
+    </wa-tree-item>
+    <wa-tree-item>Item B</wa-tree-item>
+    <wa-tree-item>Item C</wa-tree-item>
+  </wa-tree-item>
+  <wa-tree-item>Item 2</wa-tree-item>
+  <wa-tree-item>Item 3</wa-tree-item>
+</wa-tree>
+```
+
+### Selected
+
+Use the `selected` attribute to select a tree item initially.
+
+```html {.example}
+<wa-tree>
+  <wa-tree-item selected>
+    Item 1
+    <wa-tree-item>Item A</wa-tree-item>
+    <wa-tree-item>Item B</wa-tree-item>
+    <wa-tree-item>Item C</wa-tree-item>
+  </wa-tree-item>
+  <wa-tree-item>Item 2</wa-tree-item>
+  <wa-tree-item>Item 3</wa-tree-item>
+</wa-tree>
+```
+
+### Expanded
+
+Use the `expanded` attribute to expand a tree item initially.
+
+```html {.example}
+<wa-tree>
+  <wa-tree-item expanded>
+    Item 1
+    <wa-tree-item expanded>
+      Item A
+      <wa-tree-item>Item Z</wa-tree-item>
+      <wa-tree-item>Item Y</wa-tree-item>
+      <wa-tree-item>Item X</wa-tree-item>
+    </wa-tree-item>
+    <wa-tree-item>Item B</wa-tree-item>
+    <wa-tree-item>Item C</wa-tree-item>
+  </wa-tree-item>
+  <wa-tree-item>Item 2</wa-tree-item>
+  <wa-tree-item>Item 3</wa-tree-item>
+</wa-tree>
+```
--- a/packages/webawesome/docs/docs/experimental/clamped-colors.njk
+++ b/packages/webawesome/docs/docs/experimental/clamped-colors.njk
@@ -0,0 +1,44 @@
+---
+title: Clamped Color Tokens
+layout: block
+---
+
+{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
+{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
+
+<table class="colors">
+  <thead>
+    <tr>
+      <th></th>
+      <th class="core-column">Core tint</th>
+      {% for tint in tints -%}
+      <th>{{ tint }}</th>
+      {%- endfor %}
+    </tr>
+  </thead>
+{% for hue in hues -%}
+<tr class="wa-color-{{ hue }}">
+  <th>{{ hue | capitalize }}</th>
+  <td class="core-column">
+    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
+      {{ palettes[paletteId][hue].maxChromaTint }}
+      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+    </div>
+  </td>
+  {% for tint in tints -%}
+    <td>
+      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
+        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
+      </div>
+    </td>
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>
+
+<style>
+.core-column .color.swatch::before {
+  counter-reset: key var(--key);
+  content: counter(key);
+}
+</style>
--- a/packages/webawesome/docs/docs/experimental/size.md
+++ b/packages/webawesome/docs/docs/experimental/size.md
@@ -5,74 +5,71 @@ title: Size tests
 Button size should default to `medium`:

 ```html {.example}
-<wa-button size="small">Small</wa-button>
+<wa-button size=small>Small</wa-button>
 <wa-button>Medium</wa-button>
-<wa-button size="medium">Medium</wa-button>
-<wa-button size="large">Large</wa-button>
+<wa-button size=medium>Medium</wa-button>
+<wa-button size=large>Large</wa-button>
 ```

 If no button size is specified, it should default to that of its ancestor:

 ```html {.example}
 <wa-button-group size="small">
-  <wa-button>Small 1</wa-button>
-  <wa-button>Small 2</wa-button>
-  <wa-button>Small 3</wa-button>
+	<wa-button>Small 1</wa-button>
+	<wa-button>Small 2</wa-button>
+	<wa-button>Small 3</wa-button>
 </wa-button-group>
-<br /><br />
+<br><br>
 <wa-button-group>
-  <wa-button>Medium 1</wa-button>
-  <wa-button>Medium 2</wa-button>
-  <wa-button>Medium 3</wa-button>
+	<wa-button>Medium 1</wa-button>
+	<wa-button>Medium 2</wa-button>
+	<wa-button>Medium 3</wa-button>
 </wa-button-group>
-<br /><br />
+<br><br>
 <wa-button-group size="large">
-  <wa-button>Large 1</wa-button>
-  <wa-button>Large 2</wa-button>
-  <wa-button>Large 3</wa-button>
+	<wa-button>Large 1</wa-button>
+	<wa-button>Large 2</wa-button>
+	<wa-button>Large 3</wa-button>
 </wa-button-group>
 ```

 Dropdown:

 ```html {.example}
-<p>
-  Small dropdown:
-  <wa-dropdown size="small">
-    <wa-button slot="trigger" caret>Dropdown</wa-button>
-    <wa-dropdown-item>Dropdown Item 1</wa-dropdown-item>
-    <wa-dropdown-item>Dropdown Item 2</wa-dropdown-item>
-    <wa-dropdown-item>Dropdown Item 3</wa-dropdown-item>
-  </wa-dropdown>
-</p>
-
-<p>
-  Small menu:
-  <wa-dropdown>
-    <wa-button slot="trigger" caret>Dropdown</wa-button>
-    <wa-dropdown-item size="small">Dropdown Item 1</wa-dropdown-item>
-    <wa-dropdown-item size="small">Dropdown Item 2</wa-dropdown-item>
-    <wa-dropdown-item size="small">Dropdown Item 3</wa-dropdown-item>
-  </wa-dropdown>
-</p>
-
-<p>
-  Small menu item:
-  <wa-dropdown>
-    <wa-button slot="trigger" caret>Dropdown</wa-button>
-    <wa-dropdown-item size="small">Dropdown Item 1</wa-dropdown-item>
-    <wa-dropdown-item size="small">Dropdown Item 2</wa-dropdown-item>
-    <wa-dropdown-item size="small">Dropdown Item 3</wa-dropdown-item>
-  </wa-dropdown>
-</p>
-
-<p>
-  No size:
-  <wa-dropdown>
-    <wa-button slot="trigger" caret>Dropdown</wa-button>
-    <wa-dropdown-item>Dropdown Item 1</wa-dropdown-item>
-    <wa-dropdown-item>Dropdown Item 2</wa-dropdown-item>
-    <wa-dropdown-item>Dropdown Item 3</wa-dropdown-item>
-  </wa-dropdown>
-</p>
+<p>Small dropdown:
+<wa-dropdown size="small">
+  <wa-button slot="trigger" caret>Dropdown</wa-button>
+  <wa-menu>
+    <wa-menu-item>Dropdown Item 1</wa-menu-item>
+    <wa-menu-item>Dropdown Item 2</wa-menu-item>
+    <wa-menu-item>Dropdown Item 3</wa-menu-item>
+  </wa-menu>
+</wa-dropdown>
+<p>Small menu:
+<wa-dropdown>
+  <wa-button slot="trigger" caret>Dropdown</wa-button>
+  <wa-menu size="small">
+    <wa-menu-item>Dropdown Item 1</wa-menu-item>
+    <wa-menu-item>Dropdown Item 2</wa-menu-item>
+    <wa-menu-item>Dropdown Item 3</wa-menu-item>
+  </wa-menu>
+</wa-dropdown>
+<p>Small menu item:
+<wa-dropdown>
+  <wa-button slot="trigger" caret>Dropdown</wa-button>
+  <wa-menu>
+    <wa-menu-item size="small">Dropdown Item 1</wa-menu-item>
+    <wa-menu-item size="small">Dropdown Item 2</wa-menu-item>
+    <wa-menu-item size="small">Dropdown Item 3</wa-menu-item>
+  </wa-menu>
+</wa-dropdown>
+<p>No size:
+<wa-dropdown>
+  <wa-button slot="trigger" caret>Dropdown</wa-button>
+  <wa-menu>
+    <wa-menu-item>Dropdown Item 1</wa-menu-item>
+    <wa-menu-item>Dropdown Item 2</wa-menu-item>
+    <wa-menu-item>Dropdown Item 3</wa-menu-item>
+  </wa-menu>
+</wa-dropdown>
 ```
--- a/packages/webawesome/docs/docs/experimental/themer.md
+++ b/packages/webawesome/docs/docs/experimental/themer.md
@@ -671,7 +671,7 @@ hasOutline: false
  <div style="display: grid; grid-template-rows: minmax(0, auto) minmax(0, 1fr); height: 100%; gap: 1rem;">
    <div style="display: flex; gap: 1.25rem;">
      <wa-input name="icon-search" autofocus placeholder="Search Icons" with-clear style="flex: 1 1 auto;">
-        <wa-icon slot="start" name="magnifying-glass"></wa-icon>
+        <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
      </wa-input>
      <wa-select name="icon-variant" value="solid" style="flex: 0 1 auto;">
        <wa-option value="solid">Solid</wa-option>
@@ -2017,7 +2017,7 @@ hasOutline: false
      <div class="title">
        <h1 class="hero-title">What you know you can't explain, but you feel it.</h1>
        <wa-button variant="brand" class="hero-cta">
-          <wa-icon slot="start" name="arrow-down"></wa-icon>
+          <wa-icon slot="prefix" name="arrow-down"></wa-icon>
          Free Your Mind
        </wa-button>
      </div>
@@ -2037,11 +2037,11 @@ hasOutline: false
        </div>
        <div slot="footer">
          <wa-button size="small">
-            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
            Add to Cart
          </wa-button>
          <wa-button size="small" appearance="outline">
-            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
            Save
          </wa-button>
        </div>
@@ -2060,11 +2060,11 @@ hasOutline: false
        </div>
        <div slot="footer">
          <wa-button size="small">
-            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
            Add to Cart
          </wa-button>
          <wa-button size="small" appearance="outline">
-            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
            Save
          </wa-button>
        </div>
@@ -2082,11 +2082,11 @@ hasOutline: false
        </div>
        <div slot="footer">
          <wa-button size="small">
-            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
            Add to Cart
          </wa-button>
          <wa-button size="small" appearance="outline">
-            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
            Save
          </wa-button>
        </div>
@@ -2236,7 +2236,7 @@ hasOutline: false
          </div>
          <div class="send">
            <wa-button variant="brand" size="small">
-              <wa-icon slot="start" name="paper-plane-top" variant="solid" label="Add File"></wa-icon>
+              <wa-icon slot="prefix" name="paper-plane-top" variant="solid" label="Add File"></wa-icon>
              Send
            </wa-button>
          </div>
@@ -2286,11 +2286,11 @@ hasOutline: false
          <div style="display: flex; align-items: end; gap: 1rem;">
            <wa-input type="number" label="How many?"></wa-input>
            <wa-button variant="brand">
-              <wa-icon slot="start" name="bag-shopping" variant="solid" label="Add to Basket"></wa-icon>
+              <wa-icon slot="prefix" name="bag-shopping" variant="solid" label="Add to Basket"></wa-icon>
              Add to Basket
            </wa-button>
            <wa-button variant="neutral">
-              <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
+              <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
              Save
            </wa-button>
          </div>
@@ -2320,22 +2320,24 @@ hasOutline: false
            <td>
              <wa-dropdown>
                <wa-button slot="trigger" caret size="small">Action</wa-button>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="check" variant="regular"></wa-icon>
-                  Resolved
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="clock" variant="regular"></wa-icon>
-                  Pending
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
-                  Re-open
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
-                  Delete
-                </wa-dropdown-item>
+                <wa-menu>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
+                    Resolved
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
+                    Pending
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
+                    Re-open
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
+                    Delete
+                  </wa-menu-item>
+                </wa-menu>
              </wa-dropdown>
            </td>
          </tr>
@@ -2346,24 +2348,26 @@ hasOutline: false
            <td><wa-avatar image="/assets/images/themer/avatar-char.jpg"  label="Char" style="margin-right: var(--wa-space-xs)"></wa-avatar>  Char McCoy</td>
            <td style="text-align: center;"><wa-tag variant="success" size="small">Resolved</wa-tag></td>
            <td>
-              <wa-dropdown>
+             <wa-dropdown>
                <wa-button slot="trigger" caret size="small">Action</wa-button>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="check" variant="regular"></wa-icon>
-                  Resolved
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="clock" variant="regular"></wa-icon>
-                  Pending
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
-                  Re-open
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
-                  Delete
-                </wa-dropdown-item>
+                <wa-menu>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
+                    Resolved
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
+                    Pending
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
+                    Re-open
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
+                    Delete
+                  </wa-menu-item>
+                </wa-menu>
              </wa-dropdown>
            </td>
          </tr>
@@ -2374,24 +2378,26 @@ hasOutline: false
            <td><wa-avatar initials="DE" label="Avatar with initials: DE" style="margin-right: var(--wa-space-xs)"></wa-avatar>  Debbie Evans</td>
            <td style="text-align: center;"><wa-tag variant="warning" size="small">Pending</wa-tag></td>
            <td>
-              <wa-dropdown>
+             <wa-dropdown>
                <wa-button slot="trigger" caret size="small">Action</wa-button>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="check" variant="regular"></wa-icon>
-                  Resolved
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="clock" variant="regular"></wa-icon>
-                  Pending
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
-                  Re-open
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
-                  Delete
-                </wa-dropdown-item>
+                <wa-menu>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
+                    Resolved
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
+                    Pending
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
+                    Re-open
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
+                    Delete
+                  </wa-menu-item>
+                </wa-menu>
              </wa-dropdown>
            </td>
          </tr>
@@ -2402,24 +2408,26 @@ hasOutline: false
            <td></td>
            <td style="text-align: center;"><wa-tag variant="danger" size="small">Bounced</wa-tag></td>
            <td>
-              <wa-dropdown>
+             <wa-dropdown>
                <wa-button slot="trigger" caret size="small">Action</wa-button>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="check" variant="regular"></wa-icon>
-                  Resolved
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="clock" variant="regular"></wa-icon>
-                  Pending
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
-                  Re-open
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
-                  Delete
-                </wa-dropdown-item>
+                <wa-menu>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
+                    Resolved
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
+                    Pending
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
+                    Re-open
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
+                    Delete
+                  </wa-menu-item>
+                </wa-menu>
              </wa-dropdown>
            </td>
          </tr>
@@ -2430,24 +2438,26 @@ hasOutline: false
            <td><wa-avatar  image="/assets/images/themer/avatar-dara.jpg"  label="Dara" style="margin-right: var(--wa-space-xs)"></wa-avatar> Dara Prescott</td>
            <td style="text-align: center;"><wa-tag variant="neutral" size="small">Expired</wa-tag></td>
            <td>
-              <wa-dropdown>
+             <wa-dropdown>
                <wa-button slot="trigger" caret size="small">Action</wa-button>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="check" variant="regular"></wa-icon>
-                  Resolved
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="clock" variant="regular"></wa-icon>
-                  Pending
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
-                  Re-open
-                </wa-dropdown-item>
-                <wa-dropdown-item>
-                  <wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
-                  Delete
-                </wa-dropdown-item>
+                <wa-menu>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
+                    Resolved
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
+                    Pending
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
+                    Re-open
+                  </wa-menu-item>
+                  <wa-menu-item>
+                    <wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
+                    Delete
+                  </wa-menu-item>
+                </wa-menu>
              </wa-dropdown>
            </td>
          </tr>
@@ -2460,30 +2470,30 @@ hasOutline: false
          <h2 style="margin-bottom: var(--wa-space-3xl);">Payment</h2>
          <form>
            <wa-input type="email" placeholder="ex. tanderson@metacortex.com" label="Email">
-              <wa-icon name="envelope" variant="regular" slot="start"></wa-icon>
+              <wa-icon name="envelope" variant="regular" slot="prefix"></wa-icon>
            </wa-input>
            <wa-input placeholder="1234 1234 1234 1234" label="Card Number">
-              <wa-icon name="credit-card" variant="regular" slot="start"></wa-icon>
+              <wa-icon name="credit-card" variant="regular" slot="prefix"></wa-icon>
            </wa-input>
            <div style="display: flex; gap: 1rem;">
              <wa-input placeholder="MM / YY" label="Expiration">
-                <wa-icon name="calendar" variant="regular" slot="start"></wa-icon>
+                <wa-icon name="calendar" variant="regular" slot="prefix"></wa-icon>
              </wa-input>
              <wa-input placeholder="CVC" label="CVC">
-                <wa-icon name="lock" variant="regular" slot="start"></wa-icon>
+                <wa-icon name="lock" variant="regular" slot="prefix"></wa-icon>
              </wa-input>
            </div>
            <wa-input placeholder="Thomas Anderson" label="Cardholder Name">
-              <wa-icon name="user" variant="regular" slot="start"></wa-icon>
+              <wa-icon name="user" variant="regular" slot="prefix"></wa-icon>
            </wa-input>
            <div style="display: flex; gap: 1rem;">
              <wa-select label="Country" value="USA">
-              <wa-icon slot="start" name="globe" variant="regular"></wa-icon>
+              <wa-icon slot="prefix" name="globe" variant="regular"></wa-icon>
                <wa-option value="USA">United States</wa-option>
                <wa-option value="CAN">Canada</wa-option>
              </wa-select>
              <wa-input placeholder="12345" label="Zip">
-                <wa-icon name="location-dot" variant="regular" slot="start"></wa-icon>
+                <wa-icon name="location-dot" variant="regular" slot="prefix"></wa-icon>
              </wa-input>
            </div>
            <wa-switch checked style="margin: var(--wa-space-2xl) 0 var(--wa-space-3xl) 0;">Sign me up for more offers from this store</wa-switch>
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -14,7 +14,6 @@ During the alpha period, things might break! We take breaking changes very serio

 ## Next

- 🚨 BREAKING: `input` and `change` events on form controls like `<wa-input>` now are always set to `bubble` and `compose`.
 - 🚨 BREAKING: Greatly simplified how native styles work and removed redundant utilities
  - Removed `.wa-button`, `.wa-callout` classes
  - Removed `themes/native/*.css` files; use `native.css` to opt into native styles
@@ -53,12 +52,6 @@ During the alpha period, things might break! We take breaking changes very serio
 - 🚨 BREAKING: completely reworked `<wa-dropdown>` to be easier to use
  - Added `<wa-dropdown-item>`, greatly simplifying the dropdown's markup structure
  - Removed `<wa-menu>`, `<wa-menu-item>`, and `<wa-menu-label>`; use `<wa-dropdown-item>` and native headings instead
- 🚨 BREAKING: renamed all `prefix` and `suffix` slots to `start` and `end`, affecting the following components:
-  - `<wa-breadcrumb-item>`
-  - `<wa-button>`
-  - `<wa-input>`
-  - `<wa-select>`
-  - `<wa-option>`
 - Added a new free component: `<wa-popover>` (#2 of 14 per stretch goals)
 - Added a new free component: `<wa-zoomable-frame>` (#3 of 14 per stretch goals)
 - Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
@@ -378,4 +371,4 @@ Here's a list of some of the things that have changed since Shoelace v2. For que

 Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)

-Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)
+Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)
--- a/packages/webawesome/docs/docs/resources/community.md
+++ b/packages/webawesome/docs/docs/resources/community.md
@@ -18,7 +18,7 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
 - Learn more about the project, its values, and its roadmap

 <wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
-  <wa-icon name="github" family="brands" slot="start"></wa-icon>
+  <wa-icon name="github" family="brands" slot="prefix"></wa-icon>
  Join the Discussion
 </wa-button>

@@ -32,7 +32,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 - Chat live with other designers, developers, and Web Awesome fans

 <wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
-  <wa-icon name="discord" family="brands" slot="start"></wa-icon>
+  <wa-icon name="discord" family="brands" slot="prefix"></wa-icon>
  Join the Chat
 </wa-button>

@@ -43,6 +43,6 @@ Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general up
 **Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.

 <wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
-  <wa-icon name="twitter" family="brands" slot="start"></wa-icon>
+  <wa-icon name="twitter" family="brands" slot="prefix"></wa-icon>
  Follow on Twitter
 </wa-button>
--- a/packages/webawesome/docs/docs/themes/demo/index.njk
+++ b/packages/webawesome/docs/docs/themes/demo/index.njk
@@ -26,7 +26,7 @@ unlisted: true
  {% if theme.fileSlug === 'custom' %}
  <p>
    <wa-button href="../edit/" class="edit-link" target="_parent" appearance="outlined">
-      <wa-icon slot="start" name="pencil"></wa-icon>
+      <wa-icon slot="prefix" name="pencil"></wa-icon>
      Edit theme
    </wa-button>
  </p>
--- a/packages/webawesome/docs/docs/themes/edit/index.njk
+++ b/packages/webawesome/docs/docs/themes/edit/index.njk
@@ -42,7 +42,7 @@ unlisted: true
        <wa-tab-panel name="css">
          <p>
            <wa-button variant="brand" :href="code.css.blob" :download="cssFilename">
-              <wa-icon name="arrow-down-to-line" variant="solid" slot="start"></wa-icon>
+              <wa-icon name="arrow-down-to-line" variant="solid" slot="prefix"></wa-icon>
              Download <code v-text="cssFilename"></code>
            </wa-button>
          </p>
@@ -153,7 +153,7 @@ unlisted: true
      </icons-card>

      <wa-input label="Font Awesome Pro Kit Code" v-model="theme.icon.kit" placeholder="e.g. f0nta7e50e">
-        <info-tip slot="end"><template #content>You need a Font Awesome Pro license to use certain families and styles.</template></info-tip>
+        <info-tip slot="suffix"><template #content>You need a Font Awesome Pro license to use certain families and styles.</template></info-tip>
        <a href="https://fontawesome.com/kits" target="_blank" slot="hint" class="wa-caption-m wa-cluster wa-gap-2xs">
          <span>Find your kit code here</span>
          <wa-icon name="arrow-up-right-from-square" variant="regular" style="font-size: 0.75em"></wa-icon>
--- a/packages/webawesome/docs/docs/themes/preview/content.njk
+++ b/packages/webawesome/docs/docs/themes/preview/content.njk
@@ -36,7 +36,7 @@ noTheme: true
      <div class="title">
        <h1 class="hero-title">What you know you can't explain, but you feel it.</h1>
        <wa-button variant="brand" class="hero-cta">
-          <wa-icon slot="start" name="arrow-down"></wa-icon>
+          <wa-icon slot="prefix" name="arrow-down"></wa-icon>
          Free Your Mind
        </wa-button>
      </div>
@@ -56,11 +56,11 @@ noTheme: true
        </div>
        <div slot="footer">
          <wa-button size="small">
-            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
            Add to Cart
          </wa-button>
          <wa-button size="small" appearance="outline">
-            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
            Save
          </wa-button>
        </div>
@@ -79,11 +79,11 @@ noTheme: true
        </div>
        <div slot="footer">
          <wa-button size="small">
-            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
            Add to Cart
          </wa-button>
          <wa-button size="small" appearance="outline">
-            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
            Save
          </wa-button>
        </div>
@@ -101,11 +101,11 @@ noTheme: true
        </div>
        <div slot="footer">
          <wa-button size="small">
-            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
            Add to Cart
          </wa-button>
          <wa-button size="small" appearance="outline">
-            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
            Save
          </wa-button>
        </div>
--- a/packages/webawesome/docs/docs/usage.md
+++ b/packages/webawesome/docs/docs/usage.md
@@ -108,11 +108,11 @@ For example, a button's default slot is used to populate its label.
 <wa-button>Click me</wa-button>
 ```

-Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="start"` attribute? This tells the component to place the icon into its `start` slot.
+Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="prefix"` attribute? This tells the component to place the icon into its `prefix` slot.

 ```html
 <wa-button>
-  <wa-icon slot="start" name="gear" variant="solid"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
  Settings
 </wa-button>
 ```
--- a/packages/webawesome/docs/docs/utilities/flank.md
+++ b/packages/webawesome/docs/docs/utilities/flank.md
@@ -37,7 +37,7 @@ Flanks work especially well for asides, inputs with adjacent buttons, and rich d
 ```html {.example}
 <div class="wa-flank:end wa-gap-xs">
  <wa-input>
-    <wa-icon slot="start" name="magnifying-glass"></wa-icon>
+    <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
  </wa-input>
  <wa-button>Search</wa-button>
 </div>
--- a/packages/webawesome/docs/docs/utilities/native.md
+++ b/packages/webawesome/docs/docs/utilities/native.md
@@ -77,16 +77,16 @@ Organized content in bulleted or numbered format with proper nesting support.
 <ol>
  <li>List item 1</li>
  <li>List item 2
-    <ol>
+    <ul>
      <li>Subitem a</li>
      <li>Subitem b</li>
-    </ol>
+    </ul>
  </li>
  <li>List item 3</li>
 </ol>
 ```

-### Description Lists
+### Definition Lists

 Term and definition pairs for glossaries and descriptions.

@@ -141,19 +141,19 @@ Various text formatting elements for emphasis and semantic meaning.
 ```html {.example}
 <div class="two-columns">
  <p><strong>Bold</strong></p>
-  <p><em>Italic</em></p>
+  <p><em>Italics</em></p>
  <p><u>Underline</u></p>
-  <p><s>Strike-through</s></p>
  <p><del>Deleted</del></p>
  <p><ins>Inserted</ins></p>
+  <p><s>Strike-through</s></p>
  <p><small>Small</small></p>
-  <p><span>Subscript <sub>Sub</sub></span></p>
-  <p><span>Superscript <sup>Sup</sup></span></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>
-  <p><kbd>Keyboard</kbd></p>
 </div>
 ```

@@ -161,13 +161,11 @@ Various text formatting elements for emphasis and semantic meaning.

 Formatted code snippets with proper syntax styling.

-```html {.example}
-<pre>
+```
 // do a thing
 export function thing() {
  return true;
 }
-</pre>
 ```

 ### Images
@@ -456,12 +454,3 @@ Multi-line text input fields for longer content.
 ```html {.example}
 <label>Textarea <textarea placeholder="Type something"></textarea></label>
 ```
-
-### Fieldsets 
-
-```html {.example}
-<fieldset>
-  <legend>Legend</legend>
-  Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Tincidunt id aliquet risus feugiat in ante. Ac turpis egestas integer eget aliquet nibh praesent tristique magna.
-</fieldset>
-```
--- a/packages/webawesome/docs/docs/utilities/stack.md
+++ b/packages/webawesome/docs/docs/utilities/stack.md
@@ -36,10 +36,10 @@ Stacks are well suited for forms, text, and ensuring consistent spacing between
 ```html {.example}
 <div class="wa-stack">
  <wa-input label="Email">
-    <wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
+    <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
  </wa-input>
  <wa-input label="Password" type="password">
-    <wa-icon slot="start" name="lock" variant="regular"></wa-icon>
+    <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
  </wa-input>
  <wa-checkbox>Remember me on this device</wa-checkbox>
  <wa-button>Log In</wa-button>
--- a/packages/webawesome/docs/index.md
+++ b/packages/webawesome/docs/index.md
@@ -222,7 +222,7 @@ layout: page
    text-align: left;
    white-space: wrap;
  }
-  wa-button.tile::part(end) {
+  wa-button.tile::part(suffix) {
    display: none;
  }
  wa-button.tile {
@@ -266,7 +266,7 @@ layout: page
    <div class="hero-cta">
      <span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price &mdash; but not for long. Get in while the gettin’s good.</span>
      <wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
-        <wa-icon slot="start" name="person-running"></wa-icon>
+        <wa-icon slot="prefix" name="person-running"></wa-icon>
        Pre-order WA Pro
      </wa-button>
    </div>
--- a/packages/webawesome/publish-alpha-cdn.sh
+++ b/packages/webawesome/publish-alpha-cdn.sh
@@ -0,0 +1,32 @@
+#!/bin/bash
+
+version=$1
+
+# Check for a version number
+if [ -z "$version" ]; then
+  echo "A version number must be provided as the first and only argument."
+  echo
+  exit 2
+fi
+
+echo "This command will build Web Awesome $version and publish it to the the CDN."
+echo
+read -p "🔥 Are you sure you want to do this? (y/N) " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]
+then
+    # do dangerous stuff
+    echo
+    echo "🚀 OK, blasting off..."
+
+    # build it
+    npm run build || { echo >&2 "❌ Something went wrong."; exit 1; }
+
+    # copy dist-cdn to the CDN
+    aws --profile early-webawesome-com --endpoint-url https://c0c64e1b38a89d8ae060d40170ceef46.r2.cloudflarestorage.com s3 cp ./dist-cdn s3://early-webawesome-com/webawesome@$version/dist --recursive || { echo >&2 "❌ Something went wrong."; exit 1; }
+
+    echo
+    echo "✅ All done. Now go make something awesome!"
+    echo
+    exit 0
+fi
--- a/packages/webawesome/scripts/build.js
+++ b/packages/webawesome/scripts/build.js
@@ -149,7 +149,7 @@ export async function build(options = {}) {
      if (process.env.ROOT_DIR) {
        process.chdir(process.env.ROOT_DIR);
      }
-      execSync(`tsc --project ./tsconfig.prod.json --outdir "${getCdnDir()}"`, { stdio: 'inherit' });
+      execSync(`tsc --project ./tsconfig.prod.json --outdir "${getCdnDir()}"`, { stdio: "inherit" });
      process.chdir(cwd);
    } catch (error) {
      process.chdir(cwd);
--- a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css
+++ b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css
@@ -45,25 +45,25 @@
  outline-offset: var(--wa-focus-ring-offset);
 }

-.start,
-.end {
+.prefix,
+.suffix {
  display: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
 }

-.start,
-.end {
+.prefix,
+.suffix {
  display: inline-flex;
  color: var(--wa-color-text-quiet);
 }

-::slotted([slot='start']) {
+::slotted([slot='prefix']) {
  margin-inline-end: var(--wa-space-s);
 }

-::slotted([slot='end']) {
+::slotted([slot='suffix']) {
  margin-inline-start: var(--wa-space-s);
 }

--- a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.test.ts
+++ b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.test.ts
@@ -122,11 +122,11 @@ describe('<wa-breadcrumb-item>', () => {
        });
      });

-      describe('when provided an element in the slot "start" to support start icons', () => {
+      describe('when provided an element in the slot "prefix" to support prefix icons', () => {
        it('should pass accessibility tests', async () => {
          const el = await fixture<WaBreadcrumbItem>(html`
            <wa-breadcrumb-item>
-              <span class="start-example" slot="start">/</span>
+              <span class="prefix-example" slot="prefix">/</span>
              Home
            </wa-breadcrumb-item>
          `);
@@ -136,22 +136,22 @@ describe('<wa-breadcrumb-item>', () => {
        it('should accept as an assigned child in the shadow root', async () => {
          const el = await fixture<WaBreadcrumbItem>(html`
            <wa-breadcrumb-item>
-              <span class="start-example" slot="start">/</span>
+              <span class="prefix-example" slot="prefix">/</span>
              Home
            </wa-breadcrumb-item>
          `);
-          const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=start]')!;
+          const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=prefix]')!;
          const childNodes = slot.assignedNodes({ flatten: true });

          expect(childNodes.length).to.eq(1);
        });
      });

-      describe('when provided an element in the slot "end" to support end icons', () => {
+      describe('when provided an element in the slot "suffix" to support suffix icons', () => {
        it('should pass accessibility tests', async () => {
          const el = await fixture<WaBreadcrumbItem>(html`
            <wa-breadcrumb-item>
-              <span class="end-example" slot="end">/</span>
+              <span class="prefix-example" slot="suffix">/</span>
              Security
            </wa-breadcrumb-item>
          `);
@@ -162,11 +162,11 @@ describe('<wa-breadcrumb-item>', () => {
        it('should accept as an assigned child in the shadow root', async () => {
          const el = await fixture<WaBreadcrumbItem>(html`
            <wa-breadcrumb-item>
-              <span class="end-example" slot="end">/</span>
+              <span class="prefix-example" slot="suffix">/</span>
              Security
            </wa-breadcrumb-item>
          `);
-          const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=end]')!;
+          const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=suffix]')!;
          const childNodes = slot.assignedNodes({ flatten: true });

          expect(childNodes.length).to.eq(1);
--- a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -6,20 +6,20 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
 import styles from './breadcrumb-item.css';

 /**
- * @summary Breadcrumb Items are used inside breadcrumbs to represent different links.
+ * @summary Breadcrumb Items are used inside [breadcrumbs](/docs/components/breadcrumb) to represent different links.
 * @documentation https://backers.webawesome.com/docs/components/breadcrumb-item
 * @status stable
 * @since 2.0
 *
 * @slot - The breadcrumb item's label.
- * @slot start - An element, such as `<wa-icon>`, placed before the label.
- * @slot end - An element, such as `<wa-icon>`, placed after the label.
+ * @slot prefix - An optional prefix, usually an icon.
+ * @slot suffix - An optional suffix, usually an icon.
 * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
 * you want to change it for all items in the group, set the separator on `<wa-breadcrumb>` instead.
 *
 * @csspart label - The breadcrumb item's label.
- * @csspart start - The container that wraps the `start` slot.
- * @csspart end - The container that wraps the `end` slot.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
 * @csspart separator - The container that wraps the separator.
 */
@customElement('wa-breadcrumb-item')
@@ -71,8 +71,8 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {

  render() {
    return html`
-      <span part="start" class="start">
-        <slot name="start"></slot>
+      <span part="prefix" class="prefix">
+        <slot name="prefix"></slot>
      </span>

      ${this.renderType === 'link'
@@ -103,8 +103,8 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
          `
        : ''}

-      <span part="end" class="end">
-        <slot name="end"></slot>
+      <span part="suffix" class="suffix">
+        <slot name="suffix"></slot>
      </span>

      <span part="separator" class="separator" aria-hidden="true">
--- a/packages/webawesome/src/components/breadcrumb/breadcrumb.test.ts
+++ b/packages/webawesome/src/components/breadcrumb/breadcrumb.test.ts
@@ -95,12 +95,12 @@ describe('<wa-breadcrumb>', () => {
        });
      });

-      describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "start" to support start icons', () => {
+      describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "prefix" to support prefix icons', () => {
        it('should pass accessibility tests', async () => {
          const el = await fixture<WaBreadcrumb>(html`
            <wa-breadcrumb>
              <wa-breadcrumb-item>
-                <span class="start-example" slot="start">/</span>
+                <span class="prefix-example" slot="prefix">/</span>
                Home
              </wa-breadcrumb-item>
              <wa-breadcrumb-item>First</wa-breadcrumb-item>
@@ -112,7 +112,7 @@ describe('<wa-breadcrumb>', () => {
        });
      });

-      describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "end" to support end icons', () => {
+      describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "suffix" to support suffix icons', () => {
        it('should pass accessibility tests', async () => {
          const el = await fixture<WaBreadcrumb>(html`
            <wa-breadcrumb>
@@ -120,7 +120,7 @@ describe('<wa-breadcrumb>', () => {
              <wa-breadcrumb-item>Second</wa-breadcrumb-item>
              <wa-breadcrumb-item>Third</wa-breadcrumb-item>
              <wa-breadcrumb-item>
-                <span class="end-example" slot="end">/</span>
+                <span class="prefix-example" slot="suffix">/</span>
                Security
              </wa-breadcrumb-item>
            </wa-breadcrumb>
--- a/packages/webawesome/src/components/button/button.css
+++ b/packages/webawesome/src/components/button/button.css
@@ -107,8 +107,8 @@
 * Label
 */

-.start,
-.end {
+.prefix,
+.suffix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
@@ -137,7 +137,7 @@ wa-icon[part~='caret'] {
    height: 0.875em;
  }

-  .button:has(&) .end {
+  .button:has(&) .suffix {
    display: none;
  }
 }
@@ -150,9 +150,9 @@ wa-icon[part~='caret'] {
  position: relative;
  cursor: wait;

-  .start,
+  .prefix,
  .label,
-  .end,
+  .suffix,
  .caret {
    visibility: hidden;
  }
@@ -191,11 +191,11 @@ button ::slotted(wa-badge) {
 * Button spacing
 */

-slot[name='start']::slotted(*) {
+slot[name='prefix']::slotted(*) {
  margin-inline-end: var(--wa-form-control-padding-inline);
 }

-slot[name='end']::slotted(*),
+slot[name='suffix']::slotted(*),
 .button:not(.visually-hidden-label) [part~='caret'] {
  margin-inline-start: var(--wa-form-control-padding-inline);
 }
--- a/packages/webawesome/src/components/button/button.ts
+++ b/packages/webawesome/src/components/button/button.ts
@@ -29,13 +29,13 @@ import styles from './button.css';
 * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @slot - The button's label.
- * @slot start - An element, such as `<wa-icon>`, placed before the label.
- * @slot end - An element, such as `<wa-icon>`, placed after the label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
 *
 * @csspart base - The component's base wrapper.
- * @csspart start - The container that wraps the `start` slot.
+ * @csspart prefix - The container that wraps the prefix.
 * @csspart label - The button's label.
- * @csspart end - The container that wraps the `end` slot.
+ * @csspart suffix - The container that wraps the suffix.
 * @csspart caret - The button's caret icon, a `<wa-icon>` element.
 * @csspart spinner - The spinner that shows when the button is in the loading state.
 *
@@ -60,7 +60,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
  }

  assumeInteractionOn = ['click'];
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'start', 'end');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
  private readonly localize = new LocalizeController(this);

  @query('.button') button: HTMLButtonElement | HTMLLinkElement;
@@ -263,8 +263,8 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
          loading: this.loading,
          rtl: this.localize.dir() === 'rtl',
          'has-label': this.hasSlotController.test('[default]'),
-          'has-start': this.hasSlotController.test('start'),
-          'has-end': this.hasSlotController.test('end'),
+          'has-prefix': this.hasSlotController.test('prefix'),
+          'has-suffix': this.hasSlotController.test('suffix'),
          'is-icon-button': this.isIconButton,
        })}
        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
@@ -282,9 +282,9 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
        @invalid=${this.isButton() ? this.handleInvalid : null}
        @click=${this.handleClick}
      >
-        <slot name="start" part="start" class="start"></slot>
+        <slot name="prefix" part="prefix" class="prefix"></slot>
        <slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
-        <slot name="end" part="end" class="end"></slot>
+        <slot name="suffix" part="suffix" class="suffix"></slot>
        ${
          this.caret
            ? html`
--- a/packages/webawesome/src/components/carousel-item/carousel-item.ts
+++ b/packages/webawesome/src/components/carousel-item/carousel-item.ts
@@ -4,7 +4,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
 import styles from './carousel-item.css';

 /**
- * @summary A carousel item represent a slide within a carousel.
+ * @summary A carousel item represent a slide within a [carousel](/docs/components/carousel).
 *
 * @since 2.0
 * @status experimental
--- a/packages/webawesome/src/components/checkbox/checkbox.ts
+++ b/packages/webawesome/src/components/checkbox/checkbox.ts
@@ -132,9 +132,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
    this.hasInteracted = true;
    this.checked = !this.checked;
    this.indeterminate = false;
-    this.updateComplete.then(() => {
-      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-    });
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
  }

  @watch('defaultChecked')
--- a/packages/webawesome/src/components/color-picker/color-picker.test.ts
+++ b/packages/webawesome/src/components/color-picker/color-picker.test.ts
@@ -300,7 +300,6 @@ describe('<wa-color-picker>', () => {
          await sendKeys({ type: 'fc0' }); // type in a color
          input.blur(); // commit changes by blurring the field
          await el.updateComplete;
-          await aTimeout(1);

          expect(changeHandler).to.have.been.calledOnce;
          expect(inputHandler).to.have.been.calledOnce;
--- a/packages/webawesome/src/components/color-picker/color-picker.ts
+++ b/packages/webawesome/src/components/color-picker/color-picker.ts
@@ -74,15 +74,15 @@ declare const EyeDropper: EyeDropperConstructor;
 * @csspart input - The text input.
 * @csspart eye-dropper-button - The eye dropper button.
 * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.
- * @csspart eye-dropper-button__start - The eye dropper button's exported `start` part.
+ * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.
 * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.
- * @csspart eye-dropper-button__end - The eye dropper button's exported `end` part.
+ * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.
 * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.
 * @csspart format-button - The format button.
 * @csspart format-button__base - The format button's exported `button` part.
- * @csspart format-button__start - The format button's exported `start` part.
+ * @csspart format-button__prefix - The format button's exported `prefix` part.
 * @csspart format-button__label - The format button's exported `label` part.
- * @csspart format-button__end - The format button's exported `end` part.
+ * @csspart format-button__suffix - The format button's exported `suffix` part.
 * @csspart format-button__caret - The format button's exported `caret` part.
 *
 * @cssproperty --background-color - The color picker's background color.
@@ -275,11 +275,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
    const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
    this.format = formats[nextIndex] as 'hex' | 'rgb' | 'hsl' | 'hsv';
    this.setColor(this.value || '');
-
-    this.updateComplete.then(() => {
-      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-      this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-    });
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    this.dispatchEvent(new InputEvent('input'));
  }

  private handleAlphaDrag(event: PointerEvent) {
@@ -299,18 +296,13 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {

        if (this.value !== currentValue) {
          currentValue = this.value;
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-          });
+          this.dispatchEvent(new InputEvent('input'));
        }
      },
      onStop: () => {
        if (this.value !== initialValue) {
          initialValue = this.value;
-
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-          });
+          this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
        }
      },
      initialEvent: event,
@@ -334,17 +326,13 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {

        if (this.value !== currentValue) {
          currentValue = this.value;
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new InputEvent('input'));
-          });
+          this.dispatchEvent(new InputEvent('input'));
        }
      },
      onStop: () => {
        if (this.value !== initialValue) {
          initialValue = this.value;
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-          });
+          this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
        }
      },
      initialEvent: event,
@@ -371,18 +359,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {

        if (this.value !== currentValue) {
          currentValue = this.value;
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-          });
+          this.dispatchEvent(new InputEvent('input'));
        }
      },
      onStop: () => {
        this.isDraggingGridHandle = false;
        if (this.value !== initialValue) {
          initialValue = this.value;
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-          });
+          this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
        }
      },
      initialEvent: event,
@@ -418,10 +402,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
    }

    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-      });
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
    }
  }

@@ -454,10 +436,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
    }

    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-      });
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
    }
  }

@@ -490,10 +470,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
    }

    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-      });
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
    }
  }

@@ -512,10 +490,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
    }

    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-      });
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
    }
  }

@@ -535,10 +511,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
        this.input.value = this.value;

        if (this.value !== oldValue) {
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-          });
+          this.dispatchEvent(new InputEvent('input'));
+          this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
        }

        setTimeout(() => this.input.select());
@@ -722,10 +696,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
        this.setColor(colorSelectionResult.sRGBHex);

        if (this.value !== oldValue) {
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-          });
+          this.dispatchEvent(new InputEvent('input'));
+          this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
        }
      })
      .catch(() => {
@@ -740,10 +712,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
      this.setColor(color);

      if (this.value !== oldValue) {
-        this.updateComplete.then(() => {
-          this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-          this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-        });
+        this.dispatchEvent(new InputEvent('input'));
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
      }
    }
  }
@@ -1211,9 +1181,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                    aria-label=${this.localize.term('toggleColorFormat')}
                    exportparts="
                      base:format-button__base,
-                      start:format-button__start,
+                      prefix:format-button__prefix,
                      label:format-button__label,
-                      end:format-button__end,
+                      suffix:format-button__suffix,
                      caret:format-button__caret
                    "
                    @click=${this.handleFormatToggle}
@@ -1232,9 +1202,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                    appearance="outlined"
                    exportparts="
                      base:eye-dropper-button__base,
-                      start:eye-dropper-button__start,
+                      prefix:eye-dropper-button__prefix,
                      label:eye-dropper-button__label,
-                      end:eye-dropper-button__end,
+                      suffix:eye-dropper-button__suffix,
                      caret:eye-dropper-button__caret
                    "
                    @click=${this.handleEyeDropper}
--- a/packages/webawesome/src/components/dialog/dialog.css
+++ b/packages/webawesome/src/components/dialog/dialog.css
@@ -3,7 +3,7 @@
  --border-radius: var(--wa-panel-border-radius);
  --box-shadow: var(--wa-shadow-l);
  --width: 31rem;
-  --spacing: var(--wa-space-l);
+  --spacing: var(--wa-space-xl);
  --show-duration: 200ms;
  --hide-duration: 200ms;

--- a/packages/webawesome/src/components/drawer/drawer.css
+++ b/packages/webawesome/src/components/drawer/drawer.css
@@ -2,7 +2,7 @@
  --background-color: var(--wa-color-surface-raised);
  --box-shadow: var(--wa-shadow-l);
  --size: 25rem;
-  --spacing: var(--wa-space-l);
+  --spacing: var(--wa-space-xl);
  --show-duration: 200ms;
  --hide-duration: 200ms;

--- a/packages/webawesome/src/components/dropdown-item/dropdown-item.css
+++ b/packages/webawesome/src/components/dropdown-item/dropdown-item.css
@@ -2,11 +2,11 @@
  display: flex;
  position: relative;
  align-items: center;
-  padding: 0.5em 1em;
+  padding: 0.33em 1em;
  border-radius: var(--wa-border-radius-s);
  isolation: isolate;
-  color: var(--wa-color-text-normal);
-  line-height: var(--wa-line-height-condensed);
+  color: var(--wa-color-neutral-on-quiet);
+  line-height: var(--wa-line-height-normal);
  cursor: pointer;
  transition:
    100ms background-color ease,
@@ -15,14 +15,17 @@

@media (hover: hover) {
  :host(:hover:not(:state(disabled))) {
-    background-color: var(--wa-color-neutral-fill-normal);
+    background-color: var(--wa-color-neutral-fill-quiet);
+    color: var(--wa-color-neutral-on-quiet);
  }
 }

 :host(:focus-visible) {
  z-index: 1;
-  outline: var(--wa-focus-ring);
-  background-color: var(--wa-color-neutral-fill-normal);
+  outline: var(--wa-color-brand-border-loud);
+  outline-offset: var(--wa-focus-ring-offset);
+  background-color: var(--wa-color-neutral-fill-quiet);
+  color: var(--wa-color-neutral-on-quiet);
 }

 :host(:state(disabled)) {
@@ -30,6 +33,19 @@
  cursor: not-allowed;
 }

+/* Sizes */
+:host([size='small']) {
+  font-size: var(--wa-font-size-s);
+}
+
+:host([size='medium']) {
+  font-size: var(--wa-font-size-m);
+}
+
+:host([size='large']) {
+  font-size: var(--wa-font-size-l);
+}
+
 /* Danger variant */
 :host([variant='danger']),
 :host([variant='danger']) #details {
@@ -38,14 +54,14 @@

@media (hover: hover) {
  :host([variant='danger']:hover) {
-    background-color: var(--wa-color-danger-fill-normal);
-    color: var(--wa-color-danger-on-normal);
+    background-color: var(--wa-color-danger-fill-quiet);
+    color: var(--wa-color-danger-on-quiet);
  }
 }

 :host([variant='danger']:focus-visible) {
-  background-color: var(--wa-color-danger-fill-normal);
-  color: var(--wa-color-danger-on-normal);
+  background-color: var(--wa-color-danger-fill-quiet);
+  color: var(--wa-color-danger-on-quiet);
 }

 :host([checkbox-adjacent]) {
@@ -63,9 +79,9 @@

 #check {
  visibility: hidden;
-  margin-inline-start: -1.5em;
-  margin-inline-end: 0.5em;
-  font-size: var(--wa-font-size-smaller);
+  margin-inline-start: -1.25em;
+  margin-inline-end: 0.25em;
+  font-size: 1.25em;
 }

 :host(:state(checked)) #check {
@@ -76,8 +92,8 @@
  display: flex;
  flex: 0 0 auto;
  align-items: center;
-  margin-inline-end: 0.75em !important;
-  font-size: var(--wa-font-size-smaller);
+  margin-inline-end: 0.5em !important;
+  font-size: 1.25em;
 }

 #label {
@@ -93,8 +109,8 @@
  flex: 0 0 auto;
  align-items: center;
  justify-content: end;
-  color: var(--wa-color-text-quiet);
-  font-size: var(--wa-font-size-smaller) !important;
+  color: var(--wa-color-neutral-border-normal);
+  font-size: 0.933334em !important;
 }

 #details ::slotted(*) {
@@ -104,9 +120,9 @@
 /* Submenu indicator icon */
 #submenu-indicator {
  position: absolute;
-  inset-inline-end: 1em;
-  color: var(--wa-color-neutral-on-quiet);
-  font-size: var(--wa-font-size-smaller);
+  inset-inline-end: 0.25em;
+  color: var(--wa-color-neutral-border-normal);
+  font-size: 1.25em;
 }

 /* Flip chevron icon when RTL */
@@ -125,11 +141,11 @@
  width: max-content;
  margin: 0;
  padding: 0.25em;
-  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
+  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
-  background-color: var(--wa-color-surface-raised);
-  box-shadow: var(--wa-shadow-m);
-  color: var(--wa-color-text-normal);
+  background-color: var(--wa-color-surface-default);
+  box-shadow: var(--wa-shadow-l);
+  color: var(--wa-color-neutral-on-quiet);
  text-align: start;
  user-select: none;

--- a/packages/webawesome/src/components/dropdown-item/dropdown-item.ts
+++ b/packages/webawesome/src/components/dropdown-item/dropdown-item.ts
@@ -33,7 +33,7 @@ import styles from './dropdown-item.css';
 export default class WaDropdownItem extends WebAwesomeElement {
  static css = styles;

-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'start', 'end');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');

  @query('#submenu') submenuElement: HTMLDivElement;

--- a/packages/webawesome/src/components/dropdown/dropdown.css
+++ b/packages/webawesome/src/components/dropdown/dropdown.css
@@ -13,11 +13,11 @@
  width: max-content;
  margin: 0;
  padding: 0.25em;
-  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
+  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
-  background-color: var(--wa-color-surface-raised);
+  background-color: var(--wa-color-surface-default);
  box-shadow: var(--wa-shadow-m);
-  color: var(--wa-color-text-normal);
+  color: var(--wa-color-neutral-on-quiet);
  text-align: start;
  user-select: none;

@@ -37,11 +37,10 @@
  ::slotted(h6) {
    display: block !important;
    margin: 0.25em 0 !important;
-    padding: 0.25em 0.75em !important;
+    padding: 0.25em 1em !important;
    color: var(--wa-color-text-quiet) !important;
-    font-family: var(--wa-font-family-body) !important;
    font-weight: var(--wa-font-weight-semibold) !important;
-    font-size: var(--wa-font-size-smaller) !important;
+    font-size: 0.75em !important;
  }

  ::slotted(wa-divider) {
--- a/packages/webawesome/src/components/dropdown/dropdown.ts
+++ b/packages/webawesome/src/components/dropdown/dropdown.ts
@@ -11,7 +11,6 @@ import { WaShowEvent } from '../../events/show.js';
 import { animateWithClass } from '../../internal/animate.js';
 import { uniqueId } from '../../internal/math.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import sizeStyles from '../../styles/utilities/size.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import type WaButton from '../button/button.js';
 import '../dropdown-item/dropdown-item.js';
@@ -55,7 +54,7 @@ const openDropdowns = new Set<WaDropdown>();
 */
@customElement('wa-dropdown')
 export default class WaDropdown extends WebAwesomeElement {
-  static css = [sizeStyles, styles];
+  static css = styles;

  private submenuCleanups: Map<WaDropdownItem, ReturnType<typeof autoUpdate>> = new Map();
  private readonly localize = new LocalizeController(this);
--- a/packages/webawesome/src/components/input/input.css
+++ b/packages/webawesome/src/components/input/input.css
@@ -129,8 +129,8 @@ textarea {
  }
 }

-.start,
-.end {
+.prefix,
+.suffix {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
@@ -141,11 +141,11 @@ textarea {
  }
 }

-.start::slotted(*) {
+.prefix::slotted(*) {
  margin-inline-end: var(--wa-form-control-padding-inline);
 }

-.end::slotted(*) {
+.suffix::slotted(*) {
  margin-inline-start: var(--wa-form-control-padding-inline);
 }

--- a/packages/webawesome/src/components/input/input.ts
+++ b/packages/webawesome/src/components/input/input.ts
@@ -25,8 +25,8 @@ import styles from './input.css';
 * @dependency wa-icon
 *
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
- * @slot start - An element, such as `<wa-icon>`, placed at the start of the input control.
- * @slot end - An element, such as `<wa-icon>`, placed at the end of the input control.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the input.
+ * @slot suffix - Used to append a presentational icon or similar element to the input.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot show-password-icon - An icon to use in lieu of the default show password icon.
 * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
@@ -43,10 +43,10 @@ import styles from './input.css';
 * @csspart hint - The hint's wrapper.
 * @csspart input - The wrapper being rendered as an input
 * @csspart base - The internal `<input>` control.
- * @csspart start - The container that wraps the `start` slot.
+ * @csspart prefix - The container that wraps the prefix.
 * @csspart clear-button - The clear button.
 * @csspart password-toggle-button - The password toggle button.
- * @csspart end - The container that wraps the `end` slot.
+ * @csspart suffix - The container that wraps the suffix.
 *
 * @cssproperty --background-color - The input's background color.
 * @cssproperty --border-color - The color of the input's borders.
@@ -223,9 +223,8 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
  @property({ attribute: 'with-hint', type: Boolean }) withHint = false;

  private handleChange(event: Event) {
-    this.value = this.input.value;
-
    this.relayNativeEvent(event, { bubbles: true, composed: true });
+    this.value = this.input.value;
  }

  private handleClearClick(event: MouseEvent) {
@@ -233,12 +232,9 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {

    if (this.value !== '') {
      this.value = '';
-
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new WaClearEvent());
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-      });
+      this.dispatchEvent(new WaClearEvent());
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
    }

    this.input.focus();
@@ -360,7 +356,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
      </label>

      <div part="input" class="text-field">
-        <slot name="start" part="start" class="start"></slot>
+        <slot name="prefix" part="prefix" class="prefix"></slot>

        <input
          part="base"
@@ -434,7 +430,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
            `
          : ''}

-        <slot name="end" part="end" class="end"></slot>
+        <slot name="suffix" part="suffix" class="suffix"></slot>
      </div>

      <slot
--- a/packages/webawesome/src/components/option/option.css
+++ b/packages/webawesome/src/components/option/option.css
@@ -62,18 +62,18 @@
  visibility: visible;
 }

-.start,
-.end {
+.prefix,
+.suffix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
 }

-.start::slotted(*) {
+.prefix::slotted(*) {
  margin-inline-end: 0.5em;
 }

-.end::slotted(*) {
+.suffix::slotted(*) {
  margin-inline-start: 0.5em;
 }

--- a/packages/webawesome/src/components/option/option.ts
+++ b/packages/webawesome/src/components/option/option.ts
@@ -8,7 +8,7 @@ import '../icon/icon.js';
 import styles from './option.css';

 /**
- * @summary Options define the selectable items within a select component.
+ * @summary Options define the selectable items within various form controls such as [select](/docs/components/select).
 * @documentation https://backers.webawesome.com/docs/components/option
 * @status stable
 * @since 2.0
@@ -16,8 +16,8 @@ import styles from './option.css';
 * @dependency wa-icon
 *
 * @slot - The option's label.
- * @slot start - An element, such as `<wa-icon>`, placed before the label.
- * @slot end - An element, such as `<wa-icon>`, placed after the label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
 *
 * @cssproperty --background-color-current - The current option's background color.
 * @cssproperty --background-color-hover - The options's background color on hover.
@@ -26,8 +26,8 @@ import styles from './option.css';
 *
 * @csspart checked-icon - The checked icon, a `<wa-icon>` element.
 * @csspart label - The option's label.
- * @csspart start - The container that wraps the `start` slot.
- * @csspart end - The container that wraps the `end` slot.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
 *
 * @cssstate current - The user has keyed into the option, but hasn't selected it yet (shows a highlight)
 * @cssstate selected - The option is selected and has aria-selected="true"
@@ -192,9 +192,9 @@ export default class WaOption extends WebAwesomeElement {
        variant="solid"
        aria-hidden="true"
      ></wa-icon>
-      <slot part="start" name="start" class="start"></slot>
+      <slot part="prefix" name="prefix" class="prefix"></slot>
      <slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
-      <slot part="end" name="end" class="end"></slot>
+      <slot part="suffix" name="suffix" class="suffix"></slot>
    `;
  }
 }
--- a/packages/webawesome/src/components/radio-group/radio-group.ts
+++ b/packages/webawesome/src/components/radio-group/radio-group.ts
@@ -171,10 +171,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
    }

    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-      });
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
    }
  };

@@ -276,10 +274,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
    }

    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-      });
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
    }

    event.preventDefault();
--- a/packages/webawesome/src/components/rating/rating.ts
+++ b/packages/webawesome/src/components/rating/rating.ts
@@ -101,9 +101,7 @@ export default class WaRating extends WebAwesomeElement {
    }

    this.setValue(this.getValueFromMousePosition(event));
-    this.updateComplete.then(() => {
-      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-    });
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
  }

  private setValue(newValue: number) {
@@ -147,9 +145,7 @@ export default class WaRating extends WebAwesomeElement {
    }

    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-      });
+      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
    }
  }

@@ -182,9 +178,7 @@ export default class WaRating extends WebAwesomeElement {
  private handleTouchEnd(event: TouchEvent) {
    this.isHovering = false;
    this.setValue(this.hoverValue);
-    this.updateComplete.then(() => {
-      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-    });
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));

    // Prevent click on mobile devices
    event.preventDefault();
--- a/packages/webawesome/src/components/select/select.css
+++ b/packages/webawesome/src/components/select/select.css
@@ -158,25 +158,25 @@ label:has(select),
  }
 }

-/* Start and End */
+/* Prefix and Suffix */

-.start,
-.end {
+.prefix,
+.suffix {
  flex: 0;
  display: inline-flex;
  align-items: center;
  color: var(--wa-color-neutral-on-quiet);
 }

-.end::slotted(*) {
+.suffix::slotted(*) {
  margin-inline-start: var(--wa-form-control-padding-inline);
 }

-.start::slotted(*) {
+.prefix::slotted(*) {
  margin-inline-end: var(--wa-form-control-padding-inline);
 }

-:host([multiple]) .start::slotted(*) {
+:host([multiple]) .prefix::slotted(*) {
  margin-inline: var(--wa-form-control-padding-inline);
 }

--- a/packages/webawesome/src/components/select/select.ts
+++ b/packages/webawesome/src/components/select/select.ts
@@ -41,8 +41,8 @@ import styles from './select.css';
 *
 * @slot - The listbox options. Must be `<wa-option>` elements. You can use `<wa-divider>` to group items visually.
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
- * @slot start - An element, such as `<wa-icon>`, placed at the start of the combobox.
- * @slot end - An element, such as `<wa-icon>`, placed at the end of the combobox.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
 * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
@@ -62,9 +62,9 @@ import styles from './select.css';
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The select's wrapper.
 * @csspart hint - The hint's wrapper.
- * @csspart combobox - The container the wraps the start, end, value, clear icon, and expand button.
- * @csspart start - The container that wraps the `start` slot.
- * @csspart end - The container that wraps the `end` slot.
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
 * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
 * @csspart listbox - The listbox container where options are slotted.
 * @csspart tags - The container that houses option tags when `multiselect` is used.
@@ -381,7 +381,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {

        // Emit after updating
        this.updateComplete.then(() => {
-          this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+          this.dispatchEvent(new InputEvent('input'));
          this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
        });

@@ -511,7 +511,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
      // Emit after update
      this.updateComplete.then(() => {
        this.dispatchEvent(new WaClearEvent());
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        this.dispatchEvent(new InputEvent('input'));
        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
      });
    }
@@ -542,7 +542,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
      if (this.value !== oldValue) {
        // Emit after updating
        this.updateComplete.then(() => {
-          this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+          this.dispatchEvent(new InputEvent('input'));
          this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
        });
      }
@@ -600,7 +600,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {

      // Emit after updating
      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        this.dispatchEvent(new InputEvent('input'));
        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
      });
    }
@@ -900,7 +900,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
              @keydown=${this.handleComboboxKeyDown}
              @mousedown=${this.handleComboboxMouseDown}
            >
-              <slot part="start" name="start" class="start"></slot>
+              <slot part="prefix" name="prefix" class="prefix"></slot>

              <input
                part="display-input"
@@ -962,7 +962,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
                  `
                : ''}

-              <slot name="end" part="end" class="end"></slot>
+              <slot name="suffix" part="suffix" class="suffix"></slot>

              <slot name="expand-icon" part="expand-icon" class="expand-icon">
                <wa-icon library="system" name="chevron-down" variant="solid"></wa-icon>
--- a/packages/webawesome/src/components/slider/slider.ts
+++ b/packages/webawesome/src/components/slider/slider.ts
@@ -228,9 +228,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
        },
        stop: () => {
          if (this.minValue !== this.valueWhenDraggingStarted) {
-            this.updateComplete.then(() => {
-              this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            });
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
            this.hasInteracted = true;
          }
          this.hideRangeTooltips();
@@ -253,9 +251,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
        },
        stop: () => {
          if (this.maxValue !== this.valueWhenDraggingStarted) {
-            this.updateComplete.then(() => {
-              this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            });
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
            this.hasInteracted = true;
          }
          this.hideRangeTooltips();
@@ -325,9 +321,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
          if (this.activeThumb) {
            const currentValue = this.activeThumb === 'min' ? this.minValue : this.maxValue;
            if (currentValue !== this.valueWhenDraggingStarted) {
-              this.updateComplete.then(() => {
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-              });
+              this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
              this.hasInteracted = true;
            }
          }
@@ -352,10 +346,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
        },
        stop: () => {
          if (this.value !== this.valueWhenDraggingStarted) {
-            this.updateComplete.then(() => {
-              this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            });
-
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
            this.hasInteracted = true;
          }
          this.hideTooltip();
@@ -611,10 +602,8 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
    }

    // Dispatch events
-    this.updateComplete.then(() => {
-      this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-    });
+    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
    this.hasInteracted = true;
  }

@@ -636,9 +625,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {

    // Dispatch input events when the value changes by dragging
    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-      });
+      this.dispatchEvent(new InputEvent('input'));
    }
  }

@@ -671,10 +658,8 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {

    // Dispatch input events
    if (oldValue !== (thumb === 'min' ? this.minValue : this.maxValue)) {
+      this.dispatchEvent(new InputEvent('input'));
      this.updateFormValue();
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-      });
    }
  }

--- a/packages/webawesome/src/components/switch/switch.ts
+++ b/packages/webawesome/src/components/switch/switch.ts
@@ -117,29 +117,22 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
  private handleClick() {
    this.hasInteracted = true;
    this.checked = !this.checked;
-    this.updateComplete.then(() => {
-      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-    });
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
  }

  private handleKeyDown(event: KeyboardEvent) {
    if (event.key === 'ArrowLeft') {
      event.preventDefault();
      this.checked = false;
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-      });
+      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+      this.dispatchEvent(new InputEvent('input'));
    }

    if (event.key === 'ArrowRight') {
      event.preventDefault();
      this.checked = true;
-
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-      });
+      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+      this.dispatchEvent(new InputEvent('input'));
    }
  }

--- a/packages/webawesome/src/components/textarea/textarea.ts
+++ b/packages/webawesome/src/components/textarea/textarea.ts
@@ -206,14 +206,13 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
    this.valueHasChanged = true;
    this.value = this.input.value;
    this.setTextareaDimensions();
-    this.checkValidity();
    this.relayNativeEvent(event, { bubbles: true, composed: true });
+    this.checkValidity();
  }

-  private handleInput(event: InputEvent) {
+  private handleInput() {
    this.valueHasChanged = true;
    this.value = this.input.value;
-    this.relayNativeEvent(event, { bubbles: true, composed: true });
  }

  private setTextareaDimensions() {
--- a/packages/webawesome/src/styles/brand/blue.css
+++ b/packages/webawesome/src/styles/brand/blue.css
@@ -16,6 +16,23 @@
    --wa-color-brand-10: var(--wa-color-blue-10);
    --wa-color-brand-05: var(--wa-color-blue-05);
    --wa-color-brand: var(--wa-color-blue);
+
+    --wa-color-brand-lt-50: var(--wa-color-blue-lt-50);
+    --wa-color-brand-gte-50: var(--wa-color-blue-gte-50);
+
+    --wa-color-brand-lt-60: var(--wa-color-blue-lt-60);
+    --wa-color-brand-gte-60: var(--wa-color-blue-gte-60);
+
+    --wa-color-brand-lt-70: var(--wa-color-blue-lt-70);
+    --wa-color-brand-gte-70: var(--wa-color-blue-gte-70);
+
+    --wa-color-brand-max-50: var(--wa-color-blue-max-50);
+    --wa-color-brand-min-50: var(--wa-color-blue-min-50);
+    --wa-color-brand-max-60: var(--wa-color-blue-max-60);
+    --wa-color-brand-min-60: var(--wa-color-blue-min-60);
+    --wa-color-brand-max-70: var(--wa-color-blue-max-70);
+    --wa-color-brand-min-70: var(--wa-color-blue-min-70);
+
    --wa-color-brand-on: var(--wa-color-blue-on);
  }
 }
--- a/packages/webawesome/src/styles/brand/cyan.css
+++ b/packages/webawesome/src/styles/brand/cyan.css
@@ -16,6 +16,23 @@
    --wa-color-brand-10: var(--wa-color-cyan-10);
    --wa-color-brand-05: var(--wa-color-cyan-05);
    --wa-color-brand: var(--wa-color-cyan);
+
+    --wa-color-brand-lt-50: var(--wa-color-cyan-lt-50);
+    --wa-color-brand-gte-50: var(--wa-color-cyan-gte-50);
+
+    --wa-color-brand-lt-60: var(--wa-color-cyan-lt-60);
+    --wa-color-brand-gte-60: var(--wa-color-cyan-gte-60);
+
+    --wa-color-brand-lt-70: var(--wa-color-cyan-lt-70);
+    --wa-color-brand-gte-70: var(--wa-color-cyan-gte-70);
+
+    --wa-color-brand-max-50: var(--wa-color-cyan-max-50);
+    --wa-color-brand-min-50: var(--wa-color-cyan-min-50);
+    --wa-color-brand-max-60: var(--wa-color-cyan-max-60);
+    --wa-color-brand-min-60: var(--wa-color-cyan-min-60);
+    --wa-color-brand-max-70: var(--wa-color-cyan-max-70);
+    --wa-color-brand-min-70: var(--wa-color-cyan-min-70);
+
    --wa-color-brand-on: var(--wa-color-cyan-on);
  }
 }
--- a/packages/webawesome/src/styles/brand/gray.css
+++ b/packages/webawesome/src/styles/brand/gray.css
@@ -16,6 +16,23 @@
    --wa-color-brand-10: var(--wa-color-gray-10);
    --wa-color-brand-05: var(--wa-color-gray-05);
    --wa-color-brand: var(--wa-color-gray);
+
+    --wa-color-brand-lt-50: var(--wa-color-gray-lt-50);
+    --wa-color-brand-gte-50: var(--wa-color-gray-gte-50);
+
+    --wa-color-brand-lt-60: var(--wa-color-gray-lt-60);
+    --wa-color-brand-gte-60: var(--wa-color-gray-gte-60);
+
+    --wa-color-brand-lt-70: var(--wa-color-gray-lt-70);
+    --wa-color-brand-gte-70: var(--wa-color-gray-gte-70);
+
+    --wa-color-brand-max-50: var(--wa-color-gray-max-50);
+    --wa-color-brand-min-50: var(--wa-color-gray-min-50);
+    --wa-color-brand-max-60: var(--wa-color-gray-max-60);
+    --wa-color-brand-min-60: var(--wa-color-gray-min-60);
+    --wa-color-brand-max-70: var(--wa-color-gray-max-70);
+    --wa-color-brand-min-70: var(--wa-color-gray-min-70);
+
    --wa-color-brand-on: var(--wa-color-gray-on);
  }
 }
--- a/packages/webawesome/src/styles/brand/green.css
+++ b/packages/webawesome/src/styles/brand/green.css
@@ -16,6 +16,23 @@
    --wa-color-brand-10: var(--wa-color-green-10);
    --wa-color-brand-05: var(--wa-color-green-05);
    --wa-color-brand: var(--wa-color-green);
+
+    --wa-color-brand-lt-50: var(--wa-color-green-lt-50);
+    --wa-color-brand-gte-50: var(--wa-color-green-gte-50);
+
+    --wa-color-brand-lt-60: var(--wa-color-green-lt-60);
+    --wa-color-brand-gte-60: var(--wa-color-green-gte-60);
+
+    --wa-color-brand-lt-70: var(--wa-color-green-lt-70);
+    --wa-color-brand-gte-70: var(--wa-color-green-gte-70);
+
+    --wa-color-brand-max-50: var(--wa-color-green-max-50);
+    --wa-color-brand-min-50: var(--wa-color-green-min-50);
+    --wa-color-brand-max-60: var(--wa-color-green-max-60);
+    --wa-color-brand-min-60: var(--wa-color-green-min-60);
+    --wa-color-brand-max-70: var(--wa-color-green-max-70);
+    --wa-color-brand-min-70: var(--wa-color-green-min-70);
+
    --wa-color-brand-on: var(--wa-color-green-on);
  }
 }
--- a/packages/webawesome/src/styles/brand/indigo.css
+++ b/packages/webawesome/src/styles/brand/indigo.css
@@ -16,6 +16,23 @@
    --wa-color-brand-10: var(--wa-color-indigo-10);
    --wa-color-brand-05: var(--wa-color-indigo-05);
    --wa-color-brand: var(--wa-color-indigo);
+
+    --wa-color-brand-lt-50: var(--wa-color-indigo-lt-50);
+    --wa-color-brand-gte-50: var(--wa-color-indigo-gte-50);
+
+    --wa-color-brand-lt-60: var(--wa-color-indigo-lt-60);
+    --wa-color-brand-gte-60: var(--wa-color-indigo-gte-60);
+
+    --wa-color-brand-lt-70: var(--wa-color-indigo-lt-70);
+    --wa-color-brand-gte-70: var(--wa-color-indigo-gte-70);
+
+    --wa-color-brand-max-50: var(--wa-color-indigo-max-50);
+    --wa-color-brand-min-50: var(--wa-color-indigo-min-50);
+    --wa-color-brand-max-60: var(--wa-color-indigo-max-60);
+    --wa-color-brand-min-60: var(--wa-color-indigo-min-60);
+    --wa-color-brand-max-70: var(--wa-color-indigo-max-70);
+    --wa-color-brand-min-70: var(--wa-color-indigo-min-70);
+
    --wa-color-brand-on: var(--wa-color-indigo-on);
  }
 }
--- a/packages/webawesome/src/styles/brand/orange.css
+++ b/packages/webawesome/src/styles/brand/orange.css
@@ -16,6 +16,23 @@
    --wa-color-brand-10: var(--wa-color-orange-10);
    --wa-color-brand-05: var(--wa-color-orange-05);
    --wa-color-brand: var(--wa-color-orange);
+
+    --wa-color-brand-lt-50: var(--wa-color-orange-lt-50);
+    --wa-color-brand-gte-50: var(--wa-color-orange-gte-50);
+
+    --wa-color-brand-lt-60: var(--wa-color-orange-lt-60);
+    --wa-color-brand-gte-60: var(--wa-color-orange-gte-60);
+
+    --wa-color-brand-lt-70: var(--wa-color-orange-lt-70);
+    --wa-color-brand-gte-70: var(--wa-color-orange-gte-70);
+
+    --wa-color-brand-max-50: var(--wa-color-orange-max-50);
+    --wa-color-brand-min-50: var(--wa-color-orange-min-50);
+    --wa-color-brand-max-60: var(--wa-color-orange-max-60);
+    --wa-color-brand-min-60: var(--wa-color-orange-min-60);
+    --wa-color-brand-max-70: var(--wa-color-orange-max-70);
+    --wa-color-brand-min-70: var(--wa-color-orange-min-70);
+
    --wa-color-brand-on: var(--wa-color-orange-on);
  }
 }
--- a/packages/webawesome/src/styles/brand/pink.css
+++ b/packages/webawesome/src/styles/brand/pink.css
@@ -16,6 +16,23 @@
    --wa-color-brand-10: var(--wa-color-pink-10);
    --wa-color-brand-05: var(--wa-color-pink-05);
    --wa-color-brand: var(--wa-color-pink);
+
+    --wa-color-brand-lt-50: var(--wa-color-pink-lt-50);
+    --wa-color-brand-gte-50: var(--wa-color-pink-gte-50);
+
+    --wa-color-brand-lt-60: var(--wa-color-pink-lt-60);
+    --wa-color-brand-gte-60: var(--wa-color-pink-gte-60);
+
+    --wa-color-brand-lt-70: var(--wa-color-pink-lt-70);
+    --wa-color-brand-gte-70: var(--wa-color-pink-gte-70);
+
+    --wa-color-brand-max-50: var(--wa-color-pink-max-50);
+    --wa-color-brand-min-50: var(--wa-color-pink-min-50);
+    --wa-color-brand-max-60: var(--wa-color-pink-max-60);
+    --wa-color-brand-min-60: var(--wa-color-pink-min-60);
+    --wa-color-brand-max-70: var(--wa-color-pink-max-70);
+    --wa-color-brand-min-70: var(--wa-color-pink-min-70);
+
    --wa-color-brand-on: var(--wa-color-pink-on);
  }
 }
--- a/packages/webawesome/src/styles/brand/purple.css
+++ b/packages/webawesome/src/styles/brand/purple.css
@@ -16,6 +16,23 @@
    --wa-color-brand-10: var(--wa-color-purple-10);
    --wa-color-brand-05: var(--wa-color-purple-05);
    --wa-color-brand: var(--wa-color-purple);
+
+    --wa-color-brand-lt-50: var(--wa-color-purple-lt-50);
+    --wa-color-brand-gte-50: var(--wa-color-purple-gte-50);
+
+    --wa-color-brand-lt-60: var(--wa-color-purple-lt-60);
+    --wa-color-brand-gte-60: var(--wa-color-purple-gte-60);
+
+    --wa-color-brand-lt-70: var(--wa-color-purple-lt-70);
+    --wa-color-brand-gte-70: var(--wa-color-purple-gte-70);
+
+    --wa-color-brand-max-50: var(--wa-color-purple-max-50);
+    --wa-color-brand-min-50: var(--wa-color-purple-min-50);
+    --wa-color-brand-max-60: var(--wa-color-purple-max-60);
+    --wa-color-brand-min-60: var(--wa-color-purple-min-60);
+    --wa-color-brand-max-70: var(--wa-color-purple-max-70);
+    --wa-color-brand-min-70: var(--wa-color-purple-min-70);
+
    --wa-color-brand-on: var(--wa-color-purple-on);
  }
 }
--- a/packages/webawesome/src/styles/brand/red.css
+++ b/packages/webawesome/src/styles/brand/red.css
@@ -16,6 +16,23 @@
    --wa-color-brand-10: var(--wa-color-red-10);
    --wa-color-brand-05: var(--wa-color-red-05);
    --wa-color-brand: var(--wa-color-red);
+
+    --wa-color-brand-lt-50: var(--wa-color-red-lt-50);
+    --wa-color-brand-gte-50: var(--wa-color-red-gte-50);
+
+    --wa-color-brand-lt-60: var(--wa-color-red-lt-60);
+    --wa-color-brand-gte-60: var(--wa-color-red-gte-60);
+
+    --wa-color-brand-lt-70: var(--wa-color-red-lt-70);
+    --wa-color-brand-gte-70: var(--wa-color-red-gte-70);
+
+    --wa-color-brand-max-50: var(--wa-color-red-max-50);
+    --wa-color-brand-min-50: var(--wa-color-red-min-50);
+    --wa-color-brand-max-60: var(--wa-color-red-max-60);
+    --wa-color-brand-min-60: var(--wa-color-red-min-60);
+    --wa-color-brand-max-70: var(--wa-color-red-max-70);
+    --wa-color-brand-min-70: var(--wa-color-red-min-70);
+
    --wa-color-brand-on: var(--wa-color-red-on);
  }
 }
--- a/packages/webawesome/src/styles/brand/yellow.css
+++ b/packages/webawesome/src/styles/brand/yellow.css
@@ -16,6 +16,23 @@
    --wa-color-brand-10: var(--wa-color-yellow-10);
    --wa-color-brand-05: var(--wa-color-yellow-05);
    --wa-color-brand: var(--wa-color-yellow);
+
+    --wa-color-brand-lt-50: var(--wa-color-yellow-lt-50);
+    --wa-color-brand-gte-50: var(--wa-color-yellow-gte-50);
+
+    --wa-color-brand-lt-60: var(--wa-color-yellow-lt-60);
+    --wa-color-brand-gte-60: var(--wa-color-yellow-gte-60);
+
+    --wa-color-brand-lt-70: var(--wa-color-yellow-lt-70);
+    --wa-color-brand-gte-70: var(--wa-color-yellow-gte-70);
+
+    --wa-color-brand-max-50: var(--wa-color-yellow-max-50);
+    --wa-color-brand-min-50: var(--wa-color-yellow-min-50);
+    --wa-color-brand-max-60: var(--wa-color-yellow-max-60);
+    --wa-color-brand-min-60: var(--wa-color-yellow-min-60);
+    --wa-color-brand-max-70: var(--wa-color-yellow-max-70);
+    --wa-color-brand-min-70: var(--wa-color-yellow-min-70);
+
    --wa-color-brand-on: var(--wa-color-yellow-on);
  }
 }
--- a/packages/webawesome/src/styles/color/base.css
+++ b/packages/webawesome/src/styles/color/base.css
@@ -5,31 +5,375 @@
  :where(:root),
  :host {
    /**
-   * Conditional tokens to check if the key color is >= 60
-   * Key colors are the most colorful tint in a scale, recorded as --wa-color-{hue} in each palette
-   * The numeric value of the key is isolated as --wa-color-{hue}-key
-   * If key < 60, the result is 0%
-   * If key >= 60, the result is 100%
-   * Intended to be used in the color-mix() functions below
+   * Conditional tokens for use in color-mix()
+   * --wa-color-{hue}-lt-N ➡️ 100% if key < N, 0% otherwise
+   * --wa-color-{hue}-gte-N ➡️ 100% if key >= N, 0% otherwise
   */

-    --wa-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-red-key), 1) * 100%));
-    --wa-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%));
-    --wa-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%));
-    --wa-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-green-key), 1) * 100%));
-    --wa-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%));
-    --wa-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%));
-    --wa-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%));
-    --wa-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%));
-    --wa-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%));
-    --wa-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%));
+    --wa-color-red-lt-50: calc(clamp(0, 50 - var(--wa-color-red-key), 1) * 100%);
+    --wa-color-red-gte-50: calc(100% - var(--wa-color-red-lt-50));
+    --wa-color-red-lt-60: calc(clamp(0, 60 - var(--wa-color-red-key), 1) * 100%);
+    --wa-color-red-gte-60: calc(100% - var(--wa-color-red-lt-60));
+    --wa-color-red-lt-70: calc(clamp(0, 70 - var(--wa-color-red-key), 1) * 100%);
+    --wa-color-red-gte-70: calc(100% - var(--wa-color-red-lt-70));

-    /**
-   * Tokens to set text color with appropriate WCAG 2.1 contrast
-   * If key < 60, the text color is white
-   * If key >= 60, the text color is {hue}-10
+    --wa-color-orange-lt-50: calc(clamp(0, 50 - var(--wa-color-orange-key), 1) * 100%);
+    --wa-color-orange-gte-50: calc(100% - var(--wa-color-orange-lt-50));
+    --wa-color-orange-lt-60: calc(clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%);
+    --wa-color-orange-gte-60: calc(100% - var(--wa-color-orange-lt-60));
+    --wa-color-orange-lt-70: calc(clamp(0, 70 - var(--wa-color-orange-key), 1) * 100%);
+    --wa-color-orange-gte-70: calc(100% - var(--wa-color-orange-lt-70));
+
+    --wa-color-yellow-lt-50: calc(clamp(0, 50 - var(--wa-color-yellow-key), 1) * 100%);
+    --wa-color-yellow-gte-50: calc(100% - var(--wa-color-yellow-lt-50));
+    --wa-color-yellow-lt-60: calc(clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%);
+    --wa-color-yellow-gte-60: calc(100% - var(--wa-color-yellow-lt-60));
+    --wa-color-yellow-lt-70: calc(clamp(0, 70 - var(--wa-color-yellow-key), 1) * 100%);
+    --wa-color-yellow-gte-70: calc(100% - var(--wa-color-yellow-lt-70));
+
+    --wa-color-green-lt-50: calc(clamp(0, 50 - var(--wa-color-green-key), 1) * 100%);
+    --wa-color-green-gte-50: calc(100% - var(--wa-color-green-lt-50));
+    --wa-color-green-lt-60: calc(clamp(0, 60 - var(--wa-color-green-key), 1) * 100%);
+    --wa-color-green-gte-60: calc(100% - var(--wa-color-green-lt-60));
+    --wa-color-green-lt-70: calc(clamp(0, 70 - var(--wa-color-green-key), 1) * 100%);
+    --wa-color-green-gte-70: calc(100% - var(--wa-color-green-lt-70));
+
+    --wa-color-cyan-lt-50: calc(clamp(0, 50 - var(--wa-color-cyan-key), 1) * 100%);
+    --wa-color-cyan-gte-50: calc(100% - var(--wa-color-cyan-lt-50));
+    --wa-color-cyan-lt-60: calc(clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%);
+    --wa-color-cyan-gte-60: calc(100% - var(--wa-color-cyan-lt-60));
+    --wa-color-cyan-lt-70: calc(clamp(0, 70 - var(--wa-color-cyan-key), 1) * 100%);
+    --wa-color-cyan-gte-70: calc(100% - var(--wa-color-cyan-lt-70));
+
+    --wa-color-blue-lt-50: calc(clamp(0, 50 - var(--wa-color-blue-key), 1) * 100%);
+    --wa-color-blue-gte-50: calc(100% - var(--wa-color-blue-lt-50));
+    --wa-color-blue-lt-60: calc(clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%);
+    --wa-color-blue-gte-60: calc(100% - var(--wa-color-blue-lt-60));
+    --wa-color-blue-lt-70: calc(clamp(0, 70 - var(--wa-color-blue-key), 1) * 100%);
+    --wa-color-blue-gte-70: calc(100% - var(--wa-color-blue-lt-70));
+
+    --wa-color-indigo-lt-50: calc(clamp(0, 50 - var(--wa-color-indigo-key), 1) * 100%);
+    --wa-color-indigo-gte-50: calc(100% - var(--wa-color-indigo-lt-50));
+    --wa-color-indigo-lt-60: calc(clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%);
+    --wa-color-indigo-gte-60: calc(100% - var(--wa-color-indigo-lt-60));
+    --wa-color-indigo-lt-70: calc(clamp(0, 70 - var(--wa-color-indigo-key), 1) * 100%);
+    --wa-color-indigo-gte-70: calc(100% - var(--wa-color-indigo-lt-70));
+
+    --wa-color-purple-lt-50: calc(clamp(0, 50 - var(--wa-color-purple-key), 1) * 100%);
+    --wa-color-purple-gte-50: calc(100% - var(--wa-color-purple-lt-50));
+    --wa-color-purple-lt-60: calc(clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%);
+    --wa-color-purple-gte-60: calc(100% - var(--wa-color-purple-lt-60));
+    --wa-color-purple-lt-70: calc(clamp(0, 70 - var(--wa-color-purple-key), 1) * 100%);
+    --wa-color-purple-gte-70: calc(100% - var(--wa-color-purple-lt-70));
+
+    --wa-color-pink-lt-50: calc(clamp(0, 50 - var(--wa-color-pink-key), 1) * 100%);
+    --wa-color-pink-gte-50: calc(100% - var(--wa-color-pink-lt-50));
+    --wa-color-pink-lt-60: calc(clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%);
+    --wa-color-pink-gte-60: calc(100% - var(--wa-color-pink-lt-60));
+    --wa-color-pink-lt-70: calc(clamp(0, 70 - var(--wa-color-pink-key), 1) * 100%);
+    --wa-color-pink-gte-70: calc(100% - var(--wa-color-pink-lt-70));
+
+    --wa-color-gray-lt-50: calc(clamp(0, 50 - var(--wa-color-gray-key), 1) * 100%);
+    --wa-color-gray-gte-50: calc(100% - var(--wa-color-gray-lt-50));
+    --wa-color-gray-lt-60: calc(clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%);
+    --wa-color-gray-gte-60: calc(100% - var(--wa-color-gray-lt-60));
+    --wa-color-gray-lt-70: calc(clamp(0, 70 - var(--wa-color-gray-key), 1) * 100%);
+    --wa-color-gray-gte-70: calc(100% - var(--wa-color-gray-lt-70));
+
+    /*
+   * Convenience tokens for common tint cutoffs
+   * --wa-color-{hue}-N-max ➡️ var(--color-{hue}) if key <= N, var(--color-{hue}-N) otherwise
+   * --wa-color-{hue}-N-min ➡️ var(--color-{hue}) if key >= N, var(--color-{hue}-N) otherwise
   */

+    --wa-color-red-max-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-50), var(--wa-color-red-50));
+    --wa-color-red-min-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-50), var(--wa-color-red-50));
+    --wa-color-red-max-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-60), var(--wa-color-red-60));
+    --wa-color-red-min-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-60), var(--wa-color-red-60));
+    --wa-color-red-max-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-70), var(--wa-color-red-70));
+    --wa-color-red-min-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-70), var(--wa-color-red-70));
+
+    --wa-color-orange-max-50: color-mix(
+      in oklab,
+      var(--wa-color-orange) var(--wa-color-orange-lt-50),
+      var(--wa-color-orange-50)
+    );
+    --wa-color-orange-min-50: color-mix(
+      in oklab,
+      var(--wa-color-orange) var(--wa-color-orange-gte-50),
+      var(--wa-color-orange-50)
+    );
+    --wa-color-orange-max-60: color-mix(
+      in oklab,
+      var(--wa-color-orange) var(--wa-color-orange-lt-60),
+      var(--wa-color-orange-60)
+    );
+    --wa-color-orange-min-60: color-mix(
+      in oklab,
+      var(--wa-color-orange) var(--wa-color-orange-gte-60),
+      var(--wa-color-orange-60)
+    );
+    --wa-color-orange-max-70: color-mix(
+      in oklab,
+      var(--wa-color-orange) var(--wa-color-orange-lt-70),
+      var(--wa-color-orange-70)
+    );
+    --wa-color-orange-min-70: color-mix(
+      in oklab,
+      var(--wa-color-orange) var(--wa-color-orange-gte-70),
+      var(--wa-color-orange-70)
+    );
+
+    --wa-color-yellow-max-50: color-mix(
+      in oklab,
+      var(--wa-color-yellow) var(--wa-color-yellow-lt-50),
+      var(--wa-color-yellow-50)
+    );
+    --wa-color-yellow-min-50: color-mix(
+      in oklab,
+      var(--wa-color-yellow) var(--wa-color-yellow-gte-50),
+      var(--wa-color-yellow-50)
+    );
+    --wa-color-yellow-max-60: color-mix(
+      in oklab,
+      var(--wa-color-yellow) var(--wa-color-yellow-lt-60),
+      var(--wa-color-yellow-60)
+    );
+    --wa-color-yellow-min-60: color-mix(
+      in oklab,
+      var(--wa-color-yellow) var(--wa-color-yellow-gte-60),
+      var(--wa-color-yellow-60)
+    );
+    --wa-color-yellow-max-70: color-mix(
+      in oklab,
+      var(--wa-color-yellow) var(--wa-color-yellow-lt-70),
+      var(--wa-color-yellow-70)
+    );
+    --wa-color-yellow-min-70: color-mix(
+      in oklab,
+      var(--wa-color-yellow) var(--wa-color-yellow-gte-70),
+      var(--wa-color-yellow-70)
+    );
+
+    --wa-color-green-max-50: color-mix(
+      in oklab,
+      var(--wa-color-green) var(--wa-color-green-lt-50),
+      var(--wa-color-green-50)
+    );
+    --wa-color-green-min-50: color-mix(
+      in oklab,
+      var(--wa-color-green) var(--wa-color-green-gte-50),
+      var(--wa-color-green-50)
+    );
+    --wa-color-green-max-60: color-mix(
+      in oklab,
+      var(--wa-color-green) var(--wa-color-green-lt-60),
+      var(--wa-color-green-60)
+    );
+    --wa-color-green-min-60: color-mix(
+      in oklab,
+      var(--wa-color-green) var(--wa-color-green-gte-60),
+      var(--wa-color-green-60)
+    );
+    --wa-color-green-max-70: color-mix(
+      in oklab,
+      var(--wa-color-green) var(--wa-color-green-lt-70),
+      var(--wa-color-green-70)
+    );
+    --wa-color-green-min-70: color-mix(
+      in oklab,
+      var(--wa-color-green) var(--wa-color-green-gte-70),
+      var(--wa-color-green-70)
+    );
+
+    --wa-color-cyan-max-50: color-mix(
+      in oklab,
+      var(--wa-color-cyan) var(--wa-color-cyan-lt-50),
+      var(--wa-color-cyan-50)
+    );
+    --wa-color-cyan-min-50: color-mix(
+      in oklab,
+      var(--wa-color-cyan) var(--wa-color-cyan-gte-50),
+      var(--wa-color-cyan-50)
+    );
+    --wa-color-cyan-max-60: color-mix(
+      in oklab,
+      var(--wa-color-cyan) var(--wa-color-cyan-lt-60),
+      var(--wa-color-cyan-60)
+    );
+    --wa-color-cyan-min-60: color-mix(
+      in oklab,
+      var(--wa-color-cyan) var(--wa-color-cyan-gte-60),
+      var(--wa-color-cyan-60)
+    );
+    --wa-color-cyan-max-70: color-mix(
+      in oklab,
+      var(--wa-color-cyan) var(--wa-color-cyan-lt-70),
+      var(--wa-color-cyan-70)
+    );
+    --wa-color-cyan-min-70: color-mix(
+      in oklab,
+      var(--wa-color-cyan) var(--wa-color-cyan-gte-70),
+      var(--wa-color-cyan-70)
+    );
+
+    --wa-color-blue-max-50: color-mix(
+      in oklab,
+      var(--wa-color-blue) var(--wa-color-blue-lt-50),
+      var(--wa-color-blue-50)
+    );
+    --wa-color-blue-min-50: color-mix(
+      in oklab,
+      var(--wa-color-blue) var(--wa-color-blue-gte-50),
+      var(--wa-color-blue-50)
+    );
+    --wa-color-blue-max-60: color-mix(
+      in oklab,
+      var(--wa-color-blue) var(--wa-color-blue-lt-60),
+      var(--wa-color-blue-60)
+    );
+    --wa-color-blue-min-60: color-mix(
+      in oklab,
+      var(--wa-color-blue) var(--wa-color-blue-gte-60),
+      var(--wa-color-blue-60)
+    );
+    --wa-color-blue-max-70: color-mix(
+      in oklab,
+      var(--wa-color-blue) var(--wa-color-blue-lt-70),
+      var(--wa-color-blue-70)
+    );
+    --wa-color-blue-min-70: color-mix(
+      in oklab,
+      var(--wa-color-blue) var(--wa-color-blue-gte-70),
+      var(--wa-color-blue-70)
+    );
+
+    --wa-color-indigo-max-50: color-mix(
+      in oklab,
+      var(--wa-color-indigo) var(--wa-color-indigo-lt-50),
+      var(--wa-color-indigo-50)
+    );
+    --wa-color-indigo-min-50: color-mix(
+      in oklab,
+      var(--wa-color-indigo) var(--wa-color-indigo-gte-50),
+      var(--wa-color-indigo-50)
+    );
+    --wa-color-indigo-max-60: color-mix(
+      in oklab,
+      var(--wa-color-indigo) var(--wa-color-indigo-lt-60),
+      var(--wa-color-indigo-60)
+    );
+    --wa-color-indigo-min-60: color-mix(
+      in oklab,
+      var(--wa-color-indigo) var(--wa-color-indigo-gte-60),
+      var(--wa-color-indigo-60)
+    );
+    --wa-color-indigo-max-70: color-mix(
+      in oklab,
+      var(--wa-color-indigo) var(--wa-color-indigo-lt-70),
+      var(--wa-color-indigo-70)
+    );
+    --wa-color-indigo-min-70: color-mix(
+      in oklab,
+      var(--wa-color-indigo) var(--wa-color-indigo-gte-70),
+      var(--wa-color-indigo-70)
+    );
+
+    --wa-color-purple-max-50: color-mix(
+      in oklab,
+      var(--wa-color-purple) var(--wa-color-purple-lt-50),
+      var(--wa-color-purple-50)
+    );
+    --wa-color-purple-min-50: color-mix(
+      in oklab,
+      var(--wa-color-purple) var(--wa-color-purple-gte-50),
+      var(--wa-color-purple-50)
+    );
+    --wa-color-purple-max-60: color-mix(
+      in oklab,
+      var(--wa-color-purple) var(--wa-color-purple-lt-60),
+      var(--wa-color-purple-60)
+    );
+    --wa-color-purple-min-60: color-mix(
+      in oklab,
+      var(--wa-color-purple) var(--wa-color-purple-gte-60),
+      var(--wa-color-purple-60)
+    );
+    --wa-color-purple-max-70: color-mix(
+      in oklab,
+      var(--wa-color-purple) var(--wa-color-purple-lt-70),
+      var(--wa-color-purple-70)
+    );
+    --wa-color-purple-min-70: color-mix(
+      in oklab,
+      var(--wa-color-purple) var(--wa-color-purple-gte-70),
+      var(--wa-color-purple-70)
+    );
+
+    --wa-color-pink-max-50: color-mix(
+      in oklab,
+      var(--wa-color-pink) var(--wa-color-pink-lt-50),
+      var(--wa-color-pink-50)
+    );
+    --wa-color-pink-min-50: color-mix(
+      in oklab,
+      var(--wa-color-pink) var(--wa-color-pink-gte-50),
+      var(--wa-color-pink-50)
+    );
+    --wa-color-pink-max-60: color-mix(
+      in oklab,
+      var(--wa-color-pink) var(--wa-color-pink-lt-60),
+      var(--wa-color-pink-60)
+    );
+    --wa-color-pink-min-60: color-mix(
+      in oklab,
+      var(--wa-color-pink) var(--wa-color-pink-gte-60),
+      var(--wa-color-pink-60)
+    );
+    --wa-color-pink-max-70: color-mix(
+      in oklab,
+      var(--wa-color-pink) var(--wa-color-pink-lt-70),
+      var(--wa-color-pink-70)
+    );
+    --wa-color-pink-min-70: color-mix(
+      in oklab,
+      var(--wa-color-pink) var(--wa-color-pink-gte-70),
+      var(--wa-color-pink-70)
+    );
+
+    --wa-color-gray-max-50: color-mix(
+      in oklab,
+      var(--wa-color-gray) var(--wa-color-gray-lt-50),
+      var(--wa-color-gray-50)
+    );
+    --wa-color-gray-min-50: color-mix(
+      in oklab,
+      var(--wa-color-gray) var(--wa-color-gray-gte-50),
+      var(--wa-color-gray-50)
+    );
+    --wa-color-gray-max-60: color-mix(
+      in oklab,
+      var(--wa-color-gray) var(--wa-color-gray-lt-60),
+      var(--wa-color-gray-60)
+    );
+    --wa-color-gray-min-60: color-mix(
+      in oklab,
+      var(--wa-color-gray) var(--wa-color-gray-gte-60),
+      var(--wa-color-gray-60)
+    );
+    --wa-color-gray-max-70: color-mix(
+      in oklab,
+      var(--wa-color-gray) var(--wa-color-gray-lt-70),
+      var(--wa-color-gray-70)
+    );
+    --wa-color-gray-min-70: color-mix(
+      in oklab,
+      var(--wa-color-gray) var(--wa-color-gray-gte-70),
+      var(--wa-color-gray-70)
+    );
+
+    /* Text color: white if key < 60, {hue}-10 otherwise */
+
    --wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
    --wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
    --wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
--- a/packages/webawesome/src/styles/danger/blue.css
+++ b/packages/webawesome/src/styles/danger/blue.css
@@ -16,6 +16,23 @@
    --wa-color-danger-10: var(--wa-color-blue-10);
    --wa-color-danger-05: var(--wa-color-blue-05);
    --wa-color-danger: var(--wa-color-blue);
+
+    --wa-color-danger-lt-50: var(--wa-color-blue-lt-50);
+    --wa-color-danger-gte-50: var(--wa-color-blue-gte-50);
+
+    --wa-color-danger-lt-60: var(--wa-color-blue-lt-60);
+    --wa-color-danger-gte-60: var(--wa-color-blue-gte-60);
+
+    --wa-color-danger-lt-70: var(--wa-color-blue-lt-70);
+    --wa-color-danger-gte-70: var(--wa-color-blue-gte-70);
+
+    --wa-color-danger-max-50: var(--wa-color-blue-max-50);
+    --wa-color-danger-min-50: var(--wa-color-blue-min-50);
+    --wa-color-danger-max-60: var(--wa-color-blue-max-60);
+    --wa-color-danger-min-60: var(--wa-color-blue-min-60);
+    --wa-color-danger-max-70: var(--wa-color-blue-max-70);
+    --wa-color-danger-min-70: var(--wa-color-blue-min-70);
+
    --wa-color-danger-on: var(--wa-color-blue-on);
  }
 }
--- a/packages/webawesome/src/styles/danger/cyan.css
+++ b/packages/webawesome/src/styles/danger/cyan.css
@@ -16,6 +16,23 @@
    --wa-color-danger-10: var(--wa-color-cyan-10);
    --wa-color-danger-05: var(--wa-color-cyan-05);
    --wa-color-danger: var(--wa-color-cyan);
+
+    --wa-color-danger-lt-50: var(--wa-color-cyan-lt-50);
+    --wa-color-danger-gte-50: var(--wa-color-cyan-gte-50);
+
+    --wa-color-danger-lt-60: var(--wa-color-cyan-lt-60);
+    --wa-color-danger-gte-60: var(--wa-color-cyan-gte-60);
+
+    --wa-color-danger-lt-70: var(--wa-color-cyan-lt-70);
+    --wa-color-danger-gte-70: var(--wa-color-cyan-gte-70);
+
+    --wa-color-danger-max-50: var(--wa-color-cyan-max-50);
+    --wa-color-danger-min-50: var(--wa-color-cyan-min-50);
+    --wa-color-danger-max-60: var(--wa-color-cyan-max-60);
+    --wa-color-danger-min-60: var(--wa-color-cyan-min-60);
+    --wa-color-danger-max-70: var(--wa-color-cyan-max-70);
+    --wa-color-danger-min-70: var(--wa-color-cyan-min-70);
+
    --wa-color-danger-on: var(--wa-color-cyan-on);
  }
 }
--- a/packages/webawesome/src/styles/danger/gray.css
+++ b/packages/webawesome/src/styles/danger/gray.css
@@ -16,6 +16,23 @@
    --wa-color-danger-10: var(--wa-color-gray-10);
    --wa-color-danger-05: var(--wa-color-gray-05);
    --wa-color-danger: var(--wa-color-gray);
+
+    --wa-color-danger-lt-50: var(--wa-color-gray-lt-50);
+    --wa-color-danger-gte-50: var(--wa-color-gray-gte-50);
+
+    --wa-color-danger-lt-60: var(--wa-color-gray-lt-60);
+    --wa-color-danger-gte-60: var(--wa-color-gray-gte-60);
+
+    --wa-color-danger-lt-70: var(--wa-color-gray-lt-70);
+    --wa-color-danger-gte-70: var(--wa-color-gray-gte-70);
+
+    --wa-color-danger-max-50: var(--wa-color-gray-max-50);
+    --wa-color-danger-min-50: var(--wa-color-gray-min-50);
+    --wa-color-danger-max-60: var(--wa-color-gray-max-60);
+    --wa-color-danger-min-60: var(--wa-color-gray-min-60);
+    --wa-color-danger-max-70: var(--wa-color-gray-max-70);
+    --wa-color-danger-min-70: var(--wa-color-gray-min-70);
+
    --wa-color-danger-on: var(--wa-color-gray-on);
  }
 }
--- a/packages/webawesome/src/styles/danger/green.css
+++ b/packages/webawesome/src/styles/danger/green.css
@@ -16,6 +16,23 @@
    --wa-color-danger-10: var(--wa-color-green-10);
    --wa-color-danger-05: var(--wa-color-green-05);
    --wa-color-danger: var(--wa-color-green);
+
+    --wa-color-danger-lt-50: var(--wa-color-green-lt-50);
+    --wa-color-danger-gte-50: var(--wa-color-green-gte-50);
+
+    --wa-color-danger-lt-60: var(--wa-color-green-lt-60);
+    --wa-color-danger-gte-60: var(--wa-color-green-gte-60);
+
+    --wa-color-danger-lt-70: var(--wa-color-green-lt-70);
+    --wa-color-danger-gte-70: var(--wa-color-green-gte-70);
+
+    --wa-color-danger-max-50: var(--wa-color-green-max-50);
+    --wa-color-danger-min-50: var(--wa-color-green-min-50);
+    --wa-color-danger-max-60: var(--wa-color-green-max-60);
+    --wa-color-danger-min-60: var(--wa-color-green-min-60);
+    --wa-color-danger-max-70: var(--wa-color-green-max-70);
+    --wa-color-danger-min-70: var(--wa-color-green-min-70);
+
    --wa-color-danger-on: var(--wa-color-green-on);
  }
 }
--- a/packages/webawesome/src/styles/danger/indigo.css
+++ b/packages/webawesome/src/styles/danger/indigo.css
@@ -16,6 +16,23 @@
    --wa-color-danger-10: var(--wa-color-indigo-10);
    --wa-color-danger-05: var(--wa-color-indigo-05);
    --wa-color-danger: var(--wa-color-indigo);
+
+    --wa-color-danger-lt-50: var(--wa-color-indigo-lt-50);
+    --wa-color-danger-gte-50: var(--wa-color-indigo-gte-50);
+
+    --wa-color-danger-lt-60: var(--wa-color-indigo-lt-60);
+    --wa-color-danger-gte-60: var(--wa-color-indigo-gte-60);
+
+    --wa-color-danger-lt-70: var(--wa-color-indigo-lt-70);
+    --wa-color-danger-gte-70: var(--wa-color-indigo-gte-70);
+
+    --wa-color-danger-max-50: var(--wa-color-indigo-max-50);
+    --wa-color-danger-min-50: var(--wa-color-indigo-min-50);
+    --wa-color-danger-max-60: var(--wa-color-indigo-max-60);
+    --wa-color-danger-min-60: var(--wa-color-indigo-min-60);
+    --wa-color-danger-max-70: var(--wa-color-indigo-max-70);
+    --wa-color-danger-min-70: var(--wa-color-indigo-min-70);
+
    --wa-color-danger-on: var(--wa-color-indigo-on);
  }
 }
--- a/packages/webawesome/src/styles/danger/orange.css
+++ b/packages/webawesome/src/styles/danger/orange.css
@@ -16,6 +16,23 @@
    --wa-color-danger-10: var(--wa-color-orange-10);
    --wa-color-danger-05: var(--wa-color-orange-05);
    --wa-color-danger: var(--wa-color-orange);
+
+    --wa-color-danger-lt-50: var(--wa-color-orange-lt-50);
+    --wa-color-danger-gte-50: var(--wa-color-orange-gte-50);
+
+    --wa-color-danger-lt-60: var(--wa-color-orange-lt-60);
+    --wa-color-danger-gte-60: var(--wa-color-orange-gte-60);
+
+    --wa-color-danger-lt-70: var(--wa-color-orange-lt-70);
+    --wa-color-danger-gte-70: var(--wa-color-orange-gte-70);
+
+    --wa-color-danger-max-50: var(--wa-color-orange-max-50);
+    --wa-color-danger-min-50: var(--wa-color-orange-min-50);
+    --wa-color-danger-max-60: var(--wa-color-orange-max-60);
+    --wa-color-danger-min-60: var(--wa-color-orange-min-60);
+    --wa-color-danger-max-70: var(--wa-color-orange-max-70);
+    --wa-color-danger-min-70: var(--wa-color-orange-min-70);
+
    --wa-color-danger-on: var(--wa-color-orange-on);
  }
 }
--- a/packages/webawesome/src/styles/danger/pink.css
+++ b/packages/webawesome/src/styles/danger/pink.css
@@ -16,6 +16,23 @@
    --wa-color-danger-10: var(--wa-color-pink-10);
    --wa-color-danger-05: var(--wa-color-pink-05);
    --wa-color-danger: var(--wa-color-pink);
+
+    --wa-color-danger-lt-50: var(--wa-color-pink-lt-50);
+    --wa-color-danger-gte-50: var(--wa-color-pink-gte-50);
+
+    --wa-color-danger-lt-60: var(--wa-color-pink-lt-60);
+    --wa-color-danger-gte-60: var(--wa-color-pink-gte-60);
+
+    --wa-color-danger-lt-70: var(--wa-color-pink-lt-70);
+    --wa-color-danger-gte-70: var(--wa-color-pink-gte-70);
+
+    --wa-color-danger-max-50: var(--wa-color-pink-max-50);
+    --wa-color-danger-min-50: var(--wa-color-pink-min-50);
+    --wa-color-danger-max-60: var(--wa-color-pink-max-60);
+    --wa-color-danger-min-60: var(--wa-color-pink-min-60);
+    --wa-color-danger-max-70: var(--wa-color-pink-max-70);
+    --wa-color-danger-min-70: var(--wa-color-pink-min-70);
+
    --wa-color-danger-on: var(--wa-color-pink-on);
  }
 }
--- a/packages/webawesome/src/styles/danger/purple.css
+++ b/packages/webawesome/src/styles/danger/purple.css
@@ -16,6 +16,23 @@
    --wa-color-danger-10: var(--wa-color-purple-10);
    --wa-color-danger-05: var(--wa-color-purple-05);
    --wa-color-danger: var(--wa-color-purple);
+
+    --wa-color-danger-lt-50: var(--wa-color-purple-lt-50);
+    --wa-color-danger-gte-50: var(--wa-color-purple-gte-50);
+
+    --wa-color-danger-lt-60: var(--wa-color-purple-lt-60);
+    --wa-color-danger-gte-60: var(--wa-color-purple-gte-60);
+
+    --wa-color-danger-lt-70: var(--wa-color-purple-lt-70);
+    --wa-color-danger-gte-70: var(--wa-color-purple-gte-70);
+
+    --wa-color-danger-max-50: var(--wa-color-purple-max-50);
+    --wa-color-danger-min-50: var(--wa-color-purple-min-50);
+    --wa-color-danger-max-60: var(--wa-color-purple-max-60);
+    --wa-color-danger-min-60: var(--wa-color-purple-min-60);
+    --wa-color-danger-max-70: var(--wa-color-purple-max-70);
+    --wa-color-danger-min-70: var(--wa-color-purple-min-70);
+
    --wa-color-danger-on: var(--wa-color-purple-on);
  }
 }
--- a/packages/webawesome/src/styles/danger/red.css
+++ b/packages/webawesome/src/styles/danger/red.css
@@ -16,6 +16,23 @@
    --wa-color-danger-10: var(--wa-color-red-10);
    --wa-color-danger-05: var(--wa-color-red-05);
    --wa-color-danger: var(--wa-color-red);
+
+    --wa-color-danger-lt-50: var(--wa-color-red-lt-50);
+    --wa-color-danger-gte-50: var(--wa-color-red-gte-50);
+
+    --wa-color-danger-lt-60: var(--wa-color-red-lt-60);
+    --wa-color-danger-gte-60: var(--wa-color-red-gte-60);
+
+    --wa-color-danger-lt-70: var(--wa-color-red-lt-70);
+    --wa-color-danger-gte-70: var(--wa-color-red-gte-70);
+
+    --wa-color-danger-max-50: var(--wa-color-red-max-50);
+    --wa-color-danger-min-50: var(--wa-color-red-min-50);
+    --wa-color-danger-max-60: var(--wa-color-red-max-60);
+    --wa-color-danger-min-60: var(--wa-color-red-min-60);
+    --wa-color-danger-max-70: var(--wa-color-red-max-70);
+    --wa-color-danger-min-70: var(--wa-color-red-min-70);
+
    --wa-color-danger-on: var(--wa-color-red-on);
  }
 }
--- a/packages/webawesome/src/styles/danger/yellow.css
+++ b/packages/webawesome/src/styles/danger/yellow.css
@@ -16,6 +16,23 @@
    --wa-color-danger-10: var(--wa-color-yellow-10);
    --wa-color-danger-05: var(--wa-color-yellow-05);
    --wa-color-danger: var(--wa-color-yellow);
+
+    --wa-color-danger-lt-50: var(--wa-color-yellow-lt-50);
+    --wa-color-danger-gte-50: var(--wa-color-yellow-gte-50);
+
+    --wa-color-danger-lt-60: var(--wa-color-yellow-lt-60);
+    --wa-color-danger-gte-60: var(--wa-color-yellow-gte-60);
+
+    --wa-color-danger-lt-70: var(--wa-color-yellow-lt-70);
+    --wa-color-danger-gte-70: var(--wa-color-yellow-gte-70);
+
+    --wa-color-danger-max-50: var(--wa-color-yellow-max-50);
+    --wa-color-danger-min-50: var(--wa-color-yellow-min-50);
+    --wa-color-danger-max-60: var(--wa-color-yellow-max-60);
+    --wa-color-danger-min-60: var(--wa-color-yellow-min-60);
+    --wa-color-danger-max-70: var(--wa-color-yellow-max-70);
+    --wa-color-danger-min-70: var(--wa-color-yellow-min-70);
+
    --wa-color-danger-on: var(--wa-color-yellow-on);
  }
 }
--- a/packages/webawesome/src/styles/dimension/flat.css
+++ b/packages/webawesome/src/styles/dimension/flat.css
@@ -1,5 +0,0 @@
-@layer wa-dimension {
-  :where(:root) {
-    /* Nothing to see here */
-  }
-}
--- a/packages/webawesome/src/styles/native.css
+++ b/packages/webawesome/src/styles/native.css
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
konnorrogers	359c2138cc	remove unnecessary checks	2025-06-06 17:18:01 -04:00
konnorrogers	b4f63dc934	get typescript to give a real error	2025-06-06 17:13:17 -04:00
konnorrogers	ab5708aba3	prettier	2025-06-06 16:59:33 -04:00
konnorrogers	628d070ba8	fix dropdown stuff	2025-06-06 16:58:47 -04:00
Cory LaViska	315634e123	remove state	2025-06-06 13:29:56 -04:00
Cory LaViska	3156a41d28	Merge branch 'next' into dropdown-rework	2025-06-06 13:27:38 -04:00
Cory LaViska	874adf7283	adapt for <wa-popup>	2025-06-06 13:27:16 -04:00
Cory LaViska	cab502e381	add submenu to example	2025-06-06 13:27:08 -04:00
Cory LaViska	f92fd996c1	remove old test; fix types	2025-06-06 12:52:13 -04:00
Cory LaViska	10ad44275c	fix docs	2025-06-06 12:49:41 -04:00
Cory LaViska	ee224382bc	add size	2025-06-06 12:43:00 -04:00
Cory LaViska	5802cc04f5	add size	2025-06-06 12:41:54 -04:00
Cory LaViska	386b074af6	add event	2025-06-06 12:40:06 -04:00
Cory LaViska	4f44369735	update jsdoc	2025-06-06 12:12:28 -04:00
Cory LaViska	cce451c084	add hide duration	2025-06-06 12:06:47 -04:00
Cory LaViska	3cd1b7b093	update examples	2025-06-06 12:04:07 -04:00
Cory LaViska	4ce4c8b8d0	rework dropdown + dropdown item	2025-06-06 11:41:23 -04:00
Cory LaViska	c70d2c3778	remove old dropdown	2025-06-06 10:16:49 -04:00
Cory LaViska	c1441abe15	remove old dropdown, menu, menu item, menu label	2025-06-06 10:16:14 -04:00
Cory LaViska	9c9d1900dd	remove test	2025-06-06 10:15:59 -04:00
Cory LaViska	72e485c08c	use wa-popup in color picker	2025-06-06 10:15:52 -04:00