From c79457a607ddb5d03884ba31c7034bc1bb840b87 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Thu, 9 Jan 2025 01:52:08 -0500
Subject: [PATCH] Attempt at better style isolation between themes

Still doesn't quite fix #475 but might be a nudge in the right direction.
---
 src/styles/themes/active.css                 |  96 +++----
 src/styles/themes/awesome.css                | 202 +++++++--------
 src/styles/themes/brutalist.css              | 166 +++++++------
 src/styles/themes/classic.css                | 248 ++++++++++---------
 src/styles/themes/default.css                |   2 +-
 src/styles/themes/default/color-semantic.css |   3 +-
 src/styles/themes/default/color.css          |   3 +-
 src/styles/themes/default/groups.css         |   3 +-
 src/styles/themes/default/outlines.css       |   3 +-
 src/styles/themes/default/rounding.css       |   3 +-
 src/styles/themes/default/shadows.css        |   3 +-
 src/styles/themes/default/space.css          |   3 +-
 src/styles/themes/default/transitions.css    |   3 +-
 src/styles/themes/default/typography.css     |   3 +-
 src/styles/themes/glassy.css                 | 152 ++++++------
 src/styles/themes/mellow.css                 |  48 ++--
 src/styles/themes/playful.css                | 168 +++++++------
 src/styles/themes/premium.css                | 166 +++++++------
 src/styles/themes/tailspin.css               | 101 ++++----
 src/styles/utilities/size.css                |   2 +-
 20 files changed, 710 insertions(+), 668 deletions(-)

diff --git a/src/styles/themes/active.css b/src/styles/themes/active.css
index f854c2817..a9b770ca0 100644
--- a/src/styles/themes/active.css
+++ b/src/styles/themes/active.css
@@ -9,7 +9,7 @@
 @import url('default/groups.css');
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
-:root,
+:where(:root),
 :host,
 .wa-theme-active,
 .wa-light {
@@ -183,59 +183,61 @@
 /**
  * Component Styles
  */
-:root {
+:where(:root),
+:host,
+.wa-theme-active {
   --wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
     inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
     inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
   --wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */,
     inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
     inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
-}
 
-:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
-    [appearance='plain'],
-    .wa-plain
-  ) {
-  box-shadow: var(--wa-theme-active-shadow-pop-out);
+  :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
+      [appearance='plain'],
+      .wa-plain
+    ) {
+    box-shadow: var(--wa-theme-active-shadow-pop-out);
 
-  &:not([disabled], [loading]):active {
-    box-shadow: var(--wa-theme-active-shadow-punch-in);
-  }
-}
-
-wa-card {
-  box-shadow: var(--wa-theme-active-shadow-pop-out);
-}
-
-input:not([type='button'], [type='reset'], [type='submit'], :checked),
-select,
-textarea,
-:is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)),
-wa-input,
-wa-select,
-wa-textarea {
-  &:not([appearance='filled']):not([disabled]) {
-    --box-shadow: inset var(--wa-shadow-s);
-  }
-}
-
-input[type='radio'],
-wa-radio {
-  --background-color-checked: var(--wa-form-control-activated-color);
-  --checked-icon-color: var(--wa-color-brand-on-loud);
-  --checked-icon-scale: 0.4;
-}
-
-input[type='range'],
-wa-slider,
-wa-switch {
-  --thumb-shadow: var(--wa-theme-active-shadow-pop-out);
-}
-
-wa-progress-bar {
-  box-shadow: inset var(--wa-shadow-s);
-
-  &::part(indicator) {
-    box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h);
+    &:not([disabled], [loading]):active {
+      box-shadow: var(--wa-theme-active-shadow-punch-in);
+    }
+  }
+
+  wa-card {
+    box-shadow: var(--wa-theme-active-shadow-pop-out);
+  }
+
+  input:not([type='button'], [type='reset'], [type='submit'], :checked),
+  select,
+  textarea,
+  :is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)),
+  wa-input,
+  wa-select,
+  wa-textarea {
+    &:not([appearance='filled']):not([disabled]) {
+      --box-shadow: inset var(--wa-shadow-s);
+    }
+  }
+
+  input[type='radio'],
+  wa-radio {
+    --background-color-checked: var(--wa-form-control-activated-color);
+    --checked-icon-color: var(--wa-color-brand-on-loud);
+    --checked-icon-scale: 0.4;
+  }
+
+  input[type='range'],
+  wa-slider,
+  wa-switch {
+    --thumb-shadow: var(--wa-theme-active-shadow-pop-out);
+  }
+
+  wa-progress-bar {
+    box-shadow: inset var(--wa-shadow-s);
+
+    &::part(indicator) {
+      box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h);
+    }
   }
 }
diff --git a/src/styles/themes/awesome.css b/src/styles/themes/awesome.css
index 6ab82957f..2fd18ea24 100644
--- a/src/styles/themes/awesome.css
+++ b/src/styles/themes/awesome.css
@@ -9,7 +9,7 @@
 @import url('default/groups.css');
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
 
-:root,
+:where(:root),
 :host,
 .wa-theme-awesome,
 .wa-light {
@@ -241,116 +241,120 @@
   --wa-form-control-required-content-color: inherit;
 }
 
-/* #region Custom Styles */
-wa-badge {
-  border-radius: var(--wa-border-radius-m);
-  font-weight: var(--wa-font-weight-bold);
-  text-transform: uppercase;
-}
-
-:is(
-    button,
-    input:where([type='button'], [type='reset'], [type='submit']),
-    wa-button,
-    wa-radio-group > wa-radio-button,
-    .wa-button
-  ):not([appearance='plain'], .wa-plain) {
-  --wa-transition-slow: 0;
-  --wa-transition-normal: 0;
-  --wa-transition-fast: 0;
-
-  --border-color: var(--text-color);
-  --border-color-hover: var(--border-color);
-  --border-color-active: var(--border-color);
-  box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-shadow-spread-s)
-    var(--border-color);
-  --background-color-active: var(--border-color);
-  --text-color-active: var(--background-color);
-
-  margin-bottom: var(--wa-shadow-offset-y-s);
-
-  &:is([appearance='outlined'], .wa-outlined) {
-    --background-color: var(--wa-color-surface-default);
+:where(:root),
+:host,
+.wa-theme-awesome {
+  /* #region Custom Styles */
+  wa-badge {
+    border-radius: var(--wa-border-radius-m);
+    font-weight: var(--wa-font-weight-bold);
+    text-transform: uppercase;
   }
 
-  &:not([disabled], [loading]):active,
-  &::part(checked) {
-    box-shadow: none;
-    transform: translateY(var(--wa-shadow-offset-y-s));
+  :is(
+      button,
+      input:where([type='button'], [type='reset'], [type='submit']),
+      wa-button,
+      wa-radio-group > wa-radio-button,
+      .wa-button
+    ):not([appearance='plain'], .wa-plain) {
+    --wa-transition-slow: 0;
+    --wa-transition-normal: 0;
+    --wa-transition-fast: 0;
+
+    --border-color: var(--text-color);
+    --border-color-hover: var(--border-color);
+    --border-color-active: var(--border-color);
+    box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
+      var(--wa-shadow-spread-s) var(--border-color);
+    --background-color-active: var(--border-color);
+    --text-color-active: var(--background-color);
+
+    margin-bottom: var(--wa-shadow-offset-y-s);
+
+    &:is([appearance='outlined'], .wa-outlined) {
+      --background-color: var(--wa-color-surface-default);
+    }
+
+    &:not([disabled], [loading]):active,
+    &::part(checked) {
+      box-shadow: none;
+      transform: translateY(var(--wa-shadow-offset-y-s));
+    }
+
+    .wa-dark & {
+      --border-color: var(--wa-color-border-quiet);
+    }
   }
 
-  .wa-dark & {
-    --border-color: var(--wa-color-border-quiet);
+  wa-callout {
+    &:is([appearance~='outlined'], .wa-outlined) {
+      border-color: var(--wa-color-border-normal);
+    }
+    &:not([appearance~='accent'], .wa-accent) {
+      color: var(--wa-color-text-normal);
+    }
+    &:not([appearance~='accent'], .wa-accent) {
+      --icon-color: var(--wa-color-border-normal);
+    }
   }
-}
 
-wa-callout {
-  &:is([appearance~='outlined'], .wa-outlined) {
-    border-color: var(--wa-color-border-normal);
+  wa-card {
+    background-color: var(--wa-color-surface-raised);
   }
-  &:not([appearance~='accent'], .wa-accent) {
-    color: var(--wa-color-text-normal);
+  wa-card::part(header) {
+    border-bottom-style: dotted;
   }
-  &:not([appearance~='accent'], .wa-accent) {
-    --icon-color: var(--wa-color-border-normal);
+  wa-card::part(footer) {
+    border-top-style: dotted;
   }
-}
 
-wa-card {
-  background-color: var(--wa-color-surface-raised);
-}
-wa-card::part(header) {
-  border-bottom-style: dotted;
-}
-wa-card::part(footer) {
-  border-top-style: dotted;
-}
-
-input[type='checkbox'],
-wa-checkbox {
-  --checked-icon-color: var(--wa-color-surface-default);
-}
-
-wa-radio-group > wa-radio-button {
-  &::part(base):active,
-  &::part(checked) {
-    --background-color: var(--border-color);
-    --background-color-hover: var(--border-color);
-    --border-color: var(--wa-color-neutral-border-loud);
-    --text-color: var(--wa-color-surface-default);
+  input[type='checkbox'],
+  wa-checkbox {
+    --checked-icon-color: var(--wa-color-surface-default);
   }
-}
 
-wa-switch {
-  --height: 1.5em;
-}
+  wa-radio-group > wa-radio-button {
+    &::part(base):active,
+    &::part(checked) {
+      --background-color: var(--border-color);
+      --background-color-hover: var(--border-color);
+      --border-color: var(--wa-color-neutral-border-loud);
+      --text-color: var(--wa-color-surface-default);
+    }
+  }
 
-wa-tag {
-  font-weight: var(--wa-font-weight-bold);
-}
+  wa-switch {
+    --height: 1.5em;
+  }
 
-:is(
-    input:where(
-        :not(
-          [type='button'],
-          [type='checkbox'],
-          [type='color'],
-          [type='file'],
-          [type='hidden'],
-          [type='image'],
-          [type='radio'],
-          [type='range'],
-          [type='reset'],
-          [type='submit']
-        )
-      ),
-    select,
-    textarea,
-    wa-input,
-    wa-select,
-    wa-textarea,
-    .wa-text-field
-  ):not(:focus, [appearance='filled'], .wa-filled) {
-  --box-shadow: inset var(--wa-shadow-s);
+  wa-tag {
+    font-weight: var(--wa-font-weight-bold);
+  }
+
+  :is(
+      input:where(
+          :not(
+            [type='button'],
+            [type='checkbox'],
+            [type='color'],
+            [type='file'],
+            [type='hidden'],
+            [type='image'],
+            [type='radio'],
+            [type='range'],
+            [type='reset'],
+            [type='submit']
+          )
+        ),
+      select,
+      textarea,
+      wa-input,
+      wa-select,
+      wa-textarea,
+      .wa-text-field
+    ):not(:focus, [appearance='filled'], .wa-filled) {
+    --box-shadow: inset var(--wa-shadow-s);
+  }
+  /* #endregion */
 }
-/* #endregion */
diff --git a/src/styles/themes/brutalist.css b/src/styles/themes/brutalist.css
index 6aabdb39d..13c1ebbdd 100644
--- a/src/styles/themes/brutalist.css
+++ b/src/styles/themes/brutalist.css
@@ -9,7 +9,7 @@
 @import url('default/groups.css');
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap');
 
-:root,
+:where(:root),
 :host,
 .wa-theme-brutalist,
 .wa-light {
@@ -207,87 +207,91 @@
 /**
  * Component Styles
  */
-blockquote,
-pre {
-  border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
-}
-wa-badge {
-  text-transform: uppercase;
-}
-
-wa-callout,
-wa-tag {
-  border-inline-start-color: var(--border-color, var(--wa-color-border-loud));
-  border-inline-start-width: var(--wa-border-width-s);
-
-  &:not([appearance~='outlined'], .wa-outlined) {
-    border-block-start-width: 0;
-    border-block-end-width: 0;
-    border-inline-end-width: 0;
+:where(:root),
+:host,
+.wa-theme-brutalist {
+  blockquote,
+  pre {
+    border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
+  }
+  wa-badge {
+    text-transform: uppercase;
   }
 
-  &:not([appearance~='accent'], .wa-accent) {
-    --icon-color: var(--wa-color-fill-loud);
-    --text-color: var(--wa-color-text-normal);
+  wa-callout,
+  wa-tag {
+    border-inline-start-color: var(--border-color, var(--wa-color-border-loud));
+    border-inline-start-width: var(--wa-border-width-s);
+
+    &:not([appearance~='outlined'], .wa-outlined) {
+      border-block-start-width: 0;
+      border-block-end-width: 0;
+      border-inline-end-width: 0;
+    }
+
+    &:not([appearance~='accent'], .wa-accent) {
+      --icon-color: var(--wa-color-fill-loud);
+      --text-color: var(--wa-color-text-normal);
+    }
+  }
+
+  wa-callout {
+    --spacing: var(--wa-space-s) var(--wa-space-m);
+
+    &::part(icon) {
+      --spacing: var(--wa-space-m);
+    }
+  }
+
+  wa-carousel {
+    --pagination-color: var(--wa-color-neutral-fill-normal);
+  }
+
+  wa-carousel::part(scroll-container) {
+    padding: var(--wa-shadow-offset-y-s) var(--wa-shadow-offset-x-s); /* make room for the box-shadow */
+  }
+
+  wa-carousel::part(pagination-item),
+  wa-image-comparer::part(handle),
+  wa-progress-bar::part(base),
+  wa-slider::part(base),
+  input[type='range'],
+  wa-switch::part(control),
+  wa-switch::part(thumb) {
+    border-radius: var(--wa-border-radius-square);
+  }
+
+  wa-carousel-item {
+    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
+    box-shadow: var(--wa-shadow-s);
+  }
+
+  :is(
+    input:where(
+        :not(
+          [type='button'],
+          [type='checkbox'],
+          [type='color'],
+          [type='file'],
+          [type='hidden'],
+          [type='image'],
+          [type='radio'],
+          [type='range'],
+          [type='reset'],
+          [type='submit']
+        )
+      ),
+    select,
+    textarea,
+    wa-input,
+    wa-select,
+    wa-textarea,
+    .wa-text-field
+  ) {
+    --border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
+  }
+
+  wa-rating {
+    --symbol-color-active: var(--wa-color-neutral-fill-loud);
   }
 }
-
-wa-callout {
-  --spacing: var(--wa-space-s) var(--wa-space-m);
-
-  &::part(icon) {
-    --spacing: var(--wa-space-m);
-  }
-}
-
-wa-carousel {
-  --pagination-color: var(--wa-color-neutral-fill-normal);
-}
-
-wa-carousel::part(scroll-container) {
-  padding: var(--wa-shadow-offset-y-s) var(--wa-shadow-offset-x-s); /* make room for the box-shadow */
-}
-
-wa-carousel::part(pagination-item),
-wa-image-comparer::part(handle),
-wa-progress-bar::part(base),
-wa-slider::part(base),
-input[type='range'],
-wa-switch::part(control),
-wa-switch::part(thumb) {
-  border-radius: var(--wa-border-radius-square);
-}
-
-wa-carousel-item {
-  border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
-  box-shadow: var(--wa-shadow-s);
-}
-
-:is(
-  input:where(
-      :not(
-        [type='button'],
-        [type='checkbox'],
-        [type='color'],
-        [type='file'],
-        [type='hidden'],
-        [type='image'],
-        [type='radio'],
-        [type='range'],
-        [type='reset'],
-        [type='submit']
-      )
-    ),
-  select,
-  textarea,
-  wa-input,
-  wa-select,
-  wa-textarea,
-  .wa-text-field
-) {
-  --border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
-}
-
-wa-rating {
-  --symbol-color-active: var(--wa-color-neutral-fill-loud);
-}
diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css
index 2bb47c899..eb78c4779 100644
--- a/src/styles/themes/classic.css
+++ b/src/styles/themes/classic.css
@@ -8,7 +8,7 @@
 @import url('default/transitions.css');
 @import url('default/groups.css');
 
-:root,
+:where(:root),
 :host,
 .wa-theme-classic,
 .wa-light {
@@ -205,132 +205,136 @@
 /**
  * Component Styles
  */
-wa-avatar {
-  --background-color: var(--wa-color-neutral-fill-loud);
-  --text-color: var(--wa-color-neutral-on-loud);
-}
-
-button,
-input:where([type='button'], [type='reset'], [type='submit']),
-wa-button,
-.wa-button,
-wa-radio-button {
-  font-size: var(--wa-size-smaller);
-}
-
-wa-radio-button {
-  --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
-  --background-color-hover: var(--wa-form-control-activated-color);
-  --border-color: var(--wa-form-control-border-color);
-  --border-color-active: var(--background-color-active);
-  --border-color-hover: var(--background-color-hover);
-  --text-color-active: var(--text-color-hover);
-  --text-color-hover: var(--wa-color-brand-on-loud);
-  --indicator-color: var(--wa-background-color);
-
-  &[checked] {
-    --background-color: var(--wa-form-control-activated-color);
-    --border-color: var(--background-color);
-    --text-color: var(--wa-color-brand-on-loud);
+:where(:root),
+:host,
+.wa-theme-classic {
+  wa-avatar {
+    --background-color: var(--wa-color-neutral-fill-loud);
+    --text-color: var(--wa-color-neutral-on-loud);
   }
-}
 
-wa-breadcrumb {
-  font-size: var(--wa-font-size-s);
-}
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  wa-button,
+  .wa-button,
+  wa-radio-button {
+    font-size: var(--wa-size-smaller);
+  }
 
-wa-callout {
-  --spacing: var(--wa-space-l);
-  font-size: var(--wa-size-smaller);
+  wa-radio-button {
+    --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
+    --background-color-hover: var(--wa-form-control-activated-color);
+    --border-color: var(--wa-form-control-border-color);
+    --border-color-active: var(--background-color-active);
+    --border-color-hover: var(--background-color-hover);
+    --text-color-active: var(--text-color-hover);
+    --text-color-hover: var(--wa-color-brand-on-loud);
+    --indicator-color: var(--wa-background-color);
 
-  &:is([appearance~='outlined'], .wa-outlined) {
-    border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
-    border-color: var(--border-color, var(--wa-color-border-loud)) var(--wa-color-surface-border)
-      var(--wa-color-surface-border) var(--wa-color-surface-border);
-
-    &:not([appearance~='accent'], .wa-accent) {
-      --border-color: var(--wa-color-fill-loud);
+    &[checked] {
+      --background-color: var(--wa-form-control-activated-color);
+      --border-color: var(--background-color);
+      --text-color: var(--wa-color-brand-on-loud);
     }
   }
-  &:not([appearance~='accent'], .wa-accent) {
-    --icon-color: var(--wa-color-fill-loud);
-    --text-color: var(--wa-color-text-normal);
+
+  wa-breadcrumb {
+    font-size: var(--wa-font-size-s);
+  }
+
+  wa-callout {
+    --spacing: var(--wa-space-l);
+    font-size: var(--wa-size-smaller);
+
+    &:is([appearance~='outlined'], .wa-outlined) {
+      border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
+      border-color: var(--border-color, var(--wa-color-border-loud)) var(--wa-color-surface-border)
+        var(--wa-color-surface-border) var(--wa-color-surface-border);
+
+      &:not([appearance~='accent'], .wa-accent) {
+        --border-color: var(--wa-color-fill-loud);
+      }
+    }
+    &:not([appearance~='accent'], .wa-accent) {
+      --icon-color: var(--wa-color-fill-loud);
+      --text-color: var(--wa-color-text-normal);
+    }
+  }
+
+  wa-card {
+    background-color: var(--wa-color-surface-raised);
+  }
+
+  wa-carousel {
+    --box-shadow: var(--wa-shadow-s);
+    --pagination-color-active: var(--wa-color-neutral-fill-loud);
+  }
+
+  wa-dialog,
+  wa-drawer {
+    --spacing: var(--wa-space-l);
+  }
+
+  :is(
+      input:where(
+          :not(
+            [type='button'],
+            [type='checkbox'],
+            [type='color'],
+            [type='file'],
+            [type='hidden'],
+            [type='image'],
+            [type='radio'],
+            [type='range'],
+            [type='reset'],
+            [type='submit']
+          )
+        ),
+      select,
+      textarea,
+      wa-input,
+      wa-select,
+      wa-textarea,
+      .wa-text-field
+    ):not([appearance='filled'], .wa-filled) {
+    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
+      color-mix(in oklab, var(--wa-color-focus), transparent 50%);
+    --wa-focus-ring-offset: 0;
+  }
+
+  input[type='radio'],
+  wa-radio {
+    --background-color-checked: var(--border-color-checked);
+    --checked-icon-color: var(--wa-color-surface-default);
+    --checked-icon-scale: 0.4;
+  }
+
+  input[type='range'],
+  wa-slider {
+    --thumb-gap: 0;
+  }
+
+  wa-switch {
+    --background-color: var(--wa-color-gray-50);
+    --border-color: var(--background-color);
+    --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
+    --thumb-color: var(--wa-color-surface-default);
+    --thumb-size: calc(var(--height) + 4px);
+    --width: calc(var(--height) * 2);
+
+    &::part(thumb) {
+      border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
+    }
+    &[checked]::part(thumb) {
+      border-color: var(--background-color-checked);
+    }
+  }
+
+  wa-progress-bar {
+    --height: 1rem;
+  }
+
+  wa-tab {
+    font-size: var(--wa-font-size-s);
   }
 }
-
-wa-card {
-  background-color: var(--wa-color-surface-raised);
-}
-
-wa-carousel {
-  --box-shadow: var(--wa-shadow-s);
-  --pagination-color-active: var(--wa-color-neutral-fill-loud);
-}
-
-wa-dialog,
-wa-drawer {
-  --spacing: var(--wa-space-l);
-}
-
-:is(
-    input:where(
-        :not(
-          [type='button'],
-          [type='checkbox'],
-          [type='color'],
-          [type='file'],
-          [type='hidden'],
-          [type='image'],
-          [type='radio'],
-          [type='range'],
-          [type='reset'],
-          [type='submit']
-        )
-      ),
-    select,
-    textarea,
-    wa-input,
-    wa-select,
-    wa-textarea,
-    .wa-text-field
-  ):not([appearance='filled'], .wa-filled) {
-  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
-    color-mix(in oklab, var(--wa-color-focus), transparent 50%);
-  --wa-focus-ring-offset: 0;
-}
-
-input[type='radio'],
-wa-radio {
-  --background-color-checked: var(--border-color-checked);
-  --checked-icon-color: var(--wa-color-surface-default);
-  --checked-icon-scale: 0.4;
-}
-
-input[type='range'],
-wa-slider {
-  --thumb-gap: 0;
-}
-
-wa-switch {
-  --background-color: var(--wa-color-gray-50);
-  --border-color: var(--background-color);
-  --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
-  --thumb-color: var(--wa-color-surface-default);
-  --thumb-size: calc(var(--height) + 4px);
-  --width: calc(var(--height) * 2);
-
-  &::part(thumb) {
-    border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
-  }
-  &[checked]::part(thumb) {
-    border-color: var(--background-color-checked);
-  }
-}
-
-wa-progress-bar {
-  --height: 1rem;
-}
-
-wa-tab {
-  font-size: var(--wa-font-size-s);
-}
diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css
index fe548e03a..f93295830 100644
--- a/src/styles/themes/default.css
+++ b/src/styles/themes/default.css
@@ -8,7 +8,7 @@
 @import url('default/transitions.css');
 @import url('default/groups.css');
 
-:root,
+:where(:root),
 :host,
 .wa-theme-default,
 .wa-light {
diff --git a/src/styles/themes/default/color-semantic.css b/src/styles/themes/default/color-semantic.css
index 8ff3662dd..ba5f1839b 100644
--- a/src/styles/themes/default/color-semantic.css
+++ b/src/styles/themes/default/color-semantic.css
@@ -1,7 +1,8 @@
 /**
  * Foundational Colors and Semantic Colors
  */
-:where(:root, :host),
+:where(:root),
+:host,
 .wa-theme-default,
 .wa-light {
   /**
diff --git a/src/styles/themes/default/color.css b/src/styles/themes/default/color.css
index 493459199..b849cb83c 100644
--- a/src/styles/themes/default/color.css
+++ b/src/styles/themes/default/color.css
@@ -6,7 +6,8 @@
  * A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
  * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
  */
-:where(:root, :host) {
+:where(:root),
+:host {
   --wa-color-red-95: #ffefef;
   --wa-color-red-90: #ffdddc;
   --wa-color-red-80: #ffb7b6;
diff --git a/src/styles/themes/default/groups.css b/src/styles/themes/default/groups.css
index 133a82c55..5041c9010 100644
--- a/src/styles/themes/default/groups.css
+++ b/src/styles/themes/default/groups.css
@@ -1,7 +1,8 @@
 /**
  * Component Groups
  */
-:where(:root, :host),
+:where(:root),
+:host,
 .wa-theme-default,
 .wa-light {
   /* Form controls */
diff --git a/src/styles/themes/default/outlines.css b/src/styles/themes/default/outlines.css
index 85f959b69..815e1eef6 100644
--- a/src/styles/themes/default/outlines.css
+++ b/src/styles/themes/default/outlines.css
@@ -1,7 +1,8 @@
 /**
   * Borders and outlines
   */
-:where(:root, :host) {
+:where(:root),
+:host {
   --wa-border-style: solid;
 
   /* A multiplier is provided to uniformly increase or decrease all border widths. */
diff --git a/src/styles/themes/default/rounding.css b/src/styles/themes/default/rounding.css
index a03c74bcd..718a83086 100644
--- a/src/styles/themes/default/rounding.css
+++ b/src/styles/themes/default/rounding.css
@@ -1,7 +1,8 @@
 /**
 * Rounding
 */
-:where(:root, :host) {
+:where(:root),
+:host {
   /* A multiplier is provided to uniformly increase or decrease all border radii. */
   --wa-border-radius-scale: 1;
   --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
diff --git a/src/styles/themes/default/shadows.css b/src/styles/themes/default/shadows.css
index 6f63c166f..5aef7cb74 100644
--- a/src/styles/themes/default/shadows.css
+++ b/src/styles/themes/default/shadows.css
@@ -3,7 +3,8 @@
  * Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
  * A multiplier is provided for each shadow quality to uniformly scale all related values.
  */
-:where(:root, :host) {
+:where(:root),
+:host {
   --wa-shadow-offset-x-scale: 0;
   --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
   --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
diff --git a/src/styles/themes/default/space.css b/src/styles/themes/default/space.css
index cf1b59efe..a07d37f31 100644
--- a/src/styles/themes/default/space.css
+++ b/src/styles/themes/default/space.css
@@ -1,7 +1,8 @@
 /**
  * Spacing
  */
-:where(:root, :host) {
+:where(:root),
+:host {
   /* A multiplier is provided to uniformly increase or decrease all spacing. */
   --wa-space-scale: 1;
   --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
diff --git a/src/styles/themes/default/transitions.css b/src/styles/themes/default/transitions.css
index 23c99eaaf..b7d9ee775 100644
--- a/src/styles/themes/default/transitions.css
+++ b/src/styles/themes/default/transitions.css
@@ -1,7 +1,8 @@
 /**
  * Transitions
  */
-:where(:root, :host) {
+:where(:root),
+:host {
   --wa-transition-easing: ease;
   --wa-transition-slow: 300ms;
   --wa-transition-normal: 150ms;
diff --git a/src/styles/themes/default/typography.css b/src/styles/themes/default/typography.css
index 124b7f2bc..3edbccd7b 100644
--- a/src/styles/themes/default/typography.css
+++ b/src/styles/themes/default/typography.css
@@ -1,7 +1,8 @@
 /**
  * Typography
  */
-:where(:root, :host) {
+:where(:root),
+:host {
   --wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
   --wa-font-family-heading: var(--wa-font-family-body);
   --wa-font-family-code: ui-monospace, monospace;
diff --git a/src/styles/themes/glassy.css b/src/styles/themes/glassy.css
index c2b2d17b6..1bea8d976 100644
--- a/src/styles/themes/glassy.css
+++ b/src/styles/themes/glassy.css
@@ -8,7 +8,7 @@
 @import url('default/transitions.css');
 @import url('default/groups.css');
 
-:root,
+:where(:root),
 :host,
 .wa-theme-glassy,
 .wa-light {
@@ -118,83 +118,87 @@
 /**
  * Component Styles
  */
-wa-button:not([appearance='plain']) {
-  box-shadow:
-    inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-    inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-    inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
-    var(--wa-shadow-s) /* outer shadow */;
-
-  margin-bottom: var(--wa-shadow-offset-y-s);
-  transition: transform var(--wa-transition-fast);
-
-  &:not([disabled]) {
-    &:hover {
-      box-shadow:
-        inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-        inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-        inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-        inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
-        var(--wa-shadow-m) /* outer shadow */;
-    }
-
-    &:active {
-      box-shadow:
-        inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
-        inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
-        inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
-        inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-        inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
-        0 0 0 0 transparent /* outer shadow */;
-
-      transform: translateY(var(--wa-shadow-offset-y-s));
-    }
-  }
-}
-
-wa-checkbox,
-wa-input:not(:focus),
-wa-radio,
-wa-select {
-  --box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
-    inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
-}
-
-wa-checkbox:state(checked),
-wa-radio:state(checked) {
-  --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
-    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
-}
-
-wa-textarea:not(:focus) {
-  &:not([appearance='filled']):not([disabled]) {
-    --box-shadow: var(--wa-shadow-s);
-  }
-}
-
-wa-switch {
-  --box-shadow: inset var(--wa-shadow-s);
-  --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
-    inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
-    inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
-}
-
-wa-progress-bar {
-  box-shadow: inset var(--wa-shadow-s);
-
-  &::part(indicator) {
+:where(:root),
+:host,
+.wa-theme-glassy {
+  wa-button:not([appearance='plain']) {
     box-shadow:
       inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
       inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
-      inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
-      inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+      inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+      inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
       inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
       var(--wa-shadow-s) /* outer shadow */;
+
+    margin-bottom: var(--wa-shadow-offset-y-s);
+    transition: transform var(--wa-transition-fast);
+
+    &:not([disabled]) {
+      &:hover {
+        box-shadow:
+          inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+          inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
+          inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+          inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+          inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
+          var(--wa-shadow-m) /* outer shadow */;
+      }
+
+      &:active {
+        box-shadow:
+          inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
+          inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
+          inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
+          inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+          inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
+          0 0 0 0 transparent /* outer shadow */;
+
+        transform: translateY(var(--wa-shadow-offset-y-s));
+      }
+    }
+  }
+
+  wa-checkbox,
+  wa-input:not(:focus),
+  wa-radio,
+  wa-select {
+    --box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
+      inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
+  }
+
+  wa-checkbox:state(checked),
+  wa-radio:state(checked) {
+    --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
+      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
+  }
+
+  wa-textarea:not(:focus) {
+    &:not([appearance='filled']):not([disabled]) {
+      --box-shadow: var(--wa-shadow-s);
+    }
+  }
+
+  wa-switch {
+    --box-shadow: inset var(--wa-shadow-s);
+    --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+      inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
+      inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
+      inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
+  }
+
+  wa-progress-bar {
+    box-shadow: inset var(--wa-shadow-s);
+
+    &::part(indicator) {
+      box-shadow:
+        inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
+        inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
+        inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
+        inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
+        var(--wa-shadow-s) /* outer shadow */;
+    }
   }
 }
diff --git a/src/styles/themes/mellow.css b/src/styles/themes/mellow.css
index ab7ad7fb1..a108332d9 100644
--- a/src/styles/themes/mellow.css
+++ b/src/styles/themes/mellow.css
@@ -9,7 +9,7 @@
 @import url('default/groups.css');
 @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
 
-:root,
+:where(:root),
 :host,
 .wa-theme-mellow,
 .wa-light {
@@ -202,28 +202,32 @@
 /**
  * Component Styles
  */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  letter-spacing: calc(1em * -0.02);
-}
+:where(:root),
+:host,
+.wa-theme-mellow {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    letter-spacing: calc(1em * -0.02);
+  }
 
-wa-callout {
-  border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width)
-    calc(var(--wa-panel-border-width) * 4);
-}
+  wa-callout {
+    border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width)
+      calc(var(--wa-panel-border-width) * 4);
+  }
 
-wa-card::part(header) {
-  border-bottom-style: dotted;
-}
-wa-card::part(footer) {
-  border-top-style: dotted;
-}
+  wa-card::part(header) {
+    border-bottom-style: dotted;
+  }
+  wa-card::part(footer) {
+    border-top-style: dotted;
+  }
 
-input[type='radio'],
-wa-radio {
-  --checked-icon-scale: 0.6;
+  input[type='radio'],
+  wa-radio {
+    --checked-icon-scale: 0.6;
+  }
 }
diff --git a/src/styles/themes/playful.css b/src/styles/themes/playful.css
index 8f395b74e..c7b7638d6 100644
--- a/src/styles/themes/playful.css
+++ b/src/styles/themes/playful.css
@@ -8,7 +8,7 @@
 @import url('default/groups.css');
 @import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
 
-:root,
+:where(:root),
 :host,
 .wa-theme-playful,
 .wa-light {
@@ -288,93 +288,97 @@
 /**
  * Component Styles
  */
-wa-button:not([disabled]) {
-  transition-property: all;
+:where(:root),
+:host,
+.wa-theme-playful {
+  wa-button:not([disabled]) {
+    transition-property: all;
 
-  &:hover {
-    transform: scale(1.02, 1.02);
+    &:hover {
+      transform: scale(1.02, 1.02);
+    }
+
+    &:active {
+      transform: scale(0.98, 0.98);
+    }
+  }
+  wa-button:is([appearance~='accent'], [appearance~='filled']) {
+    --button-gradient-top: oklch(from var(--background-color) calc(l - 0.1) c h);
+    --button-gradient-middle: var(--background-color);
+    --button-gradient-bottom: oklch(from var(--background-color) calc(l + 0.1) c h);
+    --button-shadow-outer: oklch(from var(--background-color) calc(l + 0.1) c h);
+    --button-shadow-inner-a: oklch(from var(--background-color) calc(l - 0.2) c h);
+    --button-shadow-inner-b: oklch(from var(--background-color) calc(l + 0.3) c h);
+    --button-text-shadow: oklch(from var(--background-color) calc(l - 0.1) c h);
+    --border-color: var(--button-gradient-middle);
+    --border-width: 1px;
+    --border-color-hover: var(--button-gradient-middle);
+    --border-color-active: var(--button-gradient-middle);
+
+    &::part(base) {
+      background: linear-gradient(
+        180deg,
+        var(--button-gradient-top) 0%,
+        var(--button-gradient-middle) 51.88%,
+        var(--button-gradient-bottom) 100%
+      );
+      box-shadow:
+        0px 6px 16px var(--button-shadow-outer),
+        inset 0 -2px 8px var(--button-shadow-inner-a),
+        inset 0 2px 8px var(--button-shadow-inner-b);
+    }
+
+    &:not([disabled])::part(base):hover {
+      background: linear-gradient(
+        180deg,
+        var(--button-gradient-bottom) 0%,
+        var(--button-gradient-middle) 51.88%,
+        var(--button-gradient-top) 100%
+      );
+    }
+
+    &:not([disabled])::part(base):active {
+      background: linear-gradient(
+        180deg,
+        color-mix(in oklab, var(--button-gradient-top), var(--wa-color-mix-active)) 0%,
+        color-mix(in oklab, var(--button-gradient-middle), var(--wa-color-mix-active)) 51.88%,
+        color-mix(in oklab, var(--button-gradient-bottom), var(--wa-color-mix-active)) 100%
+      );
+      box-shadow:
+        inset 0 -2px 8px var(--button-shadow-inner-a),
+        inset 0 2px 8px var(--button-shadow-inner-b);
+    }
   }
 
-  &:active {
-    transform: scale(0.98, 0.98);
-  }
-}
-wa-button:is([appearance~='accent'], [appearance~='filled']) {
-  --button-gradient-top: oklch(from var(--background-color) calc(l - 0.1) c h);
-  --button-gradient-middle: var(--background-color);
-  --button-gradient-bottom: oklch(from var(--background-color) calc(l + 0.1) c h);
-  --button-shadow-outer: oklch(from var(--background-color) calc(l + 0.1) c h);
-  --button-shadow-inner-a: oklch(from var(--background-color) calc(l - 0.2) c h);
-  --button-shadow-inner-b: oklch(from var(--background-color) calc(l + 0.3) c h);
-  --button-text-shadow: oklch(from var(--background-color) calc(l - 0.1) c h);
-  --border-color: var(--button-gradient-middle);
-  --border-width: 1px;
-  --border-color-hover: var(--button-gradient-middle);
-  --border-color-active: var(--button-gradient-middle);
-
-  &::part(base) {
-    background: linear-gradient(
-      180deg,
-      var(--button-gradient-top) 0%,
-      var(--button-gradient-middle) 51.88%,
-      var(--button-gradient-bottom) 100%
-    );
-    box-shadow:
-      0px 6px 16px var(--button-shadow-outer),
-      inset 0 -2px 8px var(--button-shadow-inner-a),
-      inset 0 2px 8px var(--button-shadow-inner-b);
+  wa-button::part(label) {
+    font-weight: var(--wa-font-weight-bold);
+    text-shadow: 0 2px 2px var(--button-text-shadow);
   }
 
-  &:not([disabled])::part(base):hover {
-    background: linear-gradient(
-      180deg,
-      var(--button-gradient-bottom) 0%,
-      var(--button-gradient-middle) 51.88%,
-      var(--button-gradient-top) 100%
-    );
+  wa-callout {
+    border-style: dashed;
   }
 
-  &:not([disabled])::part(base):active {
-    background: linear-gradient(
-      180deg,
-      color-mix(in oklab, var(--button-gradient-top), var(--wa-color-mix-active)) 0%,
-      color-mix(in oklab, var(--button-gradient-middle), var(--wa-color-mix-active)) 51.88%,
-      color-mix(in oklab, var(--button-gradient-bottom), var(--wa-color-mix-active)) 100%
-    );
-    box-shadow:
-      inset 0 -2px 8px var(--button-shadow-inner-a),
-      inset 0 2px 8px var(--button-shadow-inner-b);
+  wa-checkbox::part(check-icon) {
+    filter: drop-shadow(var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0.125em var(--wa-color-shadow));
+  }
+
+  wa-rating {
+    --symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
+  }
+
+  wa-switch {
+    --thumb-size: 0.8em;
+    --height: 1.5em;
+    --width: calc(var(--thumb-size) * 3);
+  }
+
+  wa-switch[checked]::part(thumb) {
+    box-shadow: var(--wa-shadow-s);
+  }
+
+  wa-tag {
+    border-style: dashed;
+    border-color: var(--wa-color-border-quiet);
   }
 }
-
-wa-button::part(label) {
-  font-weight: var(--wa-font-weight-bold);
-  text-shadow: 0 2px 2px var(--button-text-shadow);
-}
-
-wa-callout {
-  border-style: dashed;
-}
-
-wa-checkbox::part(check-icon) {
-  filter: drop-shadow(var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0.125em var(--wa-color-shadow));
-}
-
-wa-rating {
-  --symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
-}
-
-wa-switch {
-  --thumb-size: 0.8em;
-  --height: 1.5em;
-  --width: calc(var(--thumb-size) * 3);
-}
-
-wa-switch[checked]::part(thumb) {
-  box-shadow: var(--wa-shadow-s);
-}
-
-wa-tag {
-  border-style: dashed;
-  border-color: var(--wa-color-border-quiet);
-}
diff --git a/src/styles/themes/premium.css b/src/styles/themes/premium.css
index ae681a324..a13579979 100644
--- a/src/styles/themes/premium.css
+++ b/src/styles/themes/premium.css
@@ -10,7 +10,7 @@
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
 
-:root,
+:where(:root),
 :host,
 .wa-theme-premium,
 .wa-light {
@@ -189,89 +189,91 @@
 /**
  * Component Styles
  */
-wa-rating {
-  --symbol-size: var(--wa-font-size-l);
-  --symbol-color-active: var(--wa-color-text-quiet);
-}
-
-wa-switch {
-  --background: transparent;
-  --border-color: var(--wa-color-neutral-border-normal);
-  --thumb-color: var(--border-color);
-  --thumb-color-checked: var(--wa-color-brand-fill-quiet);
-  --thumb-size: 1em;
-  --height: 1.5em;
-  --width: calc(var(--thumb-size) * 2.5);
-}
-
-wa-button {
-  --box-shadow: inset 0 0.03125rem 0 0 rgb(255 255 255 / 0.5), inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1),
-    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-s);
-}
-
-wa-button[appearance='outlined'] {
-  --box-shadow: none;
-}
-
-wa-card {
-  border-radius: var(--wa-border-radius-l);
-}
-
-wa-alert {
-  font-size: var(--wa-font-size-s);
-  --border-color: var(--background);
-}
-
-wa-carousel {
-  --pagination-color-active: var(--wa-color-brand-fill-loud);
-  --pagination-color: var(--wa-color-neutral-fill-normal);
-}
-
-wa-badge,
-wa-button::part(label),
-wa-tag {
-  text-transform: uppercase;
-}
-
-wa-badge,
-wa-tag {
-  border-width: 0;
-}
-
-&:not(.wa-dark) wa-alert {
-  &[variant='brand'] {
-    --background: var(--wa-color-primary-95);
+.wa-theme-premium {
+  wa-rating {
+    --symbol-size: var(--wa-font-size-l);
+    --symbol-color-active: var(--wa-color-text-quiet);
   }
-  &[variant='success'] {
-    --background: var(--wa-color-green-95);
+
+  wa-switch {
+    --background: transparent;
+    --border-color: var(--wa-color-neutral-border-normal);
+    --thumb-color: var(--border-color);
+    --thumb-color-checked: var(--wa-color-brand-fill-quiet);
+    --thumb-size: 1em;
+    --height: 1.5em;
+    --width: calc(var(--thumb-size) * 2.5);
   }
-  &[variant='warning'] {
-    --background: var(--wa-color-yellow-95);
+
+  wa-button {
+    --box-shadow: inset 0 0.03125rem 0 0 rgb(255 255 255 / 0.5), inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1),
+      inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-s);
   }
-  &[variant='danger'] {
-    --background: var(--wa-color-red-95);
-  }
-}
-
-wa-badge {
-  &[variant='brand'] {
-    --background: var(--wa-color-primary-80);
-    --text-color: var(--wa-color-primary-20);
-  }
-  &[variant='success'] {
-    --background: var(--wa-color-green-80);
-    --text-color: var(--wa-color-green-20);
-  }
-  &[variant='warning'] {
-    --background: var(--wa-color-yellow-80);
-    --text-color: var(--wa-color-yellow-20);
-  }
-  &[variant='danger'] {
-    --background: var(--wa-color-red-80);
-    --text-color: var(--wa-color-red-20);
-  }
-  &[variant='neutral'] {
-    --background: white;
-    --text-color: var(--wa-color-base-30);
+
+  wa-button[appearance='outlined'] {
+    --box-shadow: none;
+  }
+
+  wa-card {
+    border-radius: var(--wa-border-radius-l);
+  }
+
+  wa-alert {
+    font-size: var(--wa-font-size-s);
+    --border-color: var(--background);
+  }
+
+  wa-carousel {
+    --pagination-color-active: var(--wa-color-brand-fill-loud);
+    --pagination-color: var(--wa-color-neutral-fill-normal);
+  }
+
+  wa-badge,
+  wa-button::part(label),
+  wa-tag {
+    text-transform: uppercase;
+  }
+
+  wa-badge,
+  wa-tag {
+    border-width: 0;
+  }
+
+  &:not(.wa-dark) wa-alert {
+    &[variant='brand'] {
+      --background: var(--wa-color-primary-95);
+    }
+    &[variant='success'] {
+      --background: var(--wa-color-green-95);
+    }
+    &[variant='warning'] {
+      --background: var(--wa-color-yellow-95);
+    }
+    &[variant='danger'] {
+      --background: var(--wa-color-red-95);
+    }
+  }
+
+  wa-badge {
+    &[variant='brand'] {
+      --background: var(--wa-color-primary-80);
+      --text-color: var(--wa-color-primary-20);
+    }
+    &[variant='success'] {
+      --background: var(--wa-color-green-80);
+      --text-color: var(--wa-color-green-20);
+    }
+    &[variant='warning'] {
+      --background: var(--wa-color-yellow-80);
+      --text-color: var(--wa-color-yellow-20);
+    }
+    &[variant='danger'] {
+      --background: var(--wa-color-red-80);
+      --text-color: var(--wa-color-red-20);
+    }
+    &[variant='neutral'] {
+      --background: white;
+      --text-color: var(--wa-color-base-30);
+    }
   }
 }
diff --git a/src/styles/themes/tailspin.css b/src/styles/themes/tailspin.css
index 63a6997f5..f0886e5c3 100644
--- a/src/styles/themes/tailspin.css
+++ b/src/styles/themes/tailspin.css
@@ -9,7 +9,7 @@
 @import url('default/groups.css');
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
-:root,
+:where(:root),
 :host,
 .wa-theme-tailspin,
 .wa-light {
@@ -209,57 +209,62 @@
 /**
  * Component Styles
  */
-h1,
-h2,
-h3,
-h4 {
-  letter-spacing: calc(1em * -0.03);
-}
+:where(:root),
+:host,
+.wa-theme-tailspin,
+:is(:host-context(.wa-theme-tailspin)) {
+  h1,
+  h2,
+  h3,
+  h4 {
+    letter-spacing: calc(1em * -0.03);
+  }
 
-wa-avatar {
-  --background-color: var(--wa-color-neutral-fill-quiet);
-  --text-color: var(--wa-color-neutral-on-quiet);
-}
+  wa-avatar {
+    --background-color: var(--wa-color-neutral-fill-quiet);
+    --text-color: var(--wa-color-neutral-on-quiet);
+  }
 
-a,
-wa-badge,
-wa-tag {
-  font-weight: var(--wa-font-weight-semibold);
-}
+  a,
+  wa-badge,
+  wa-tag {
+    font-weight: var(--wa-font-weight-semibold);
+  }
 
-:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
-    [appearance='plain'],
-    .wa-plain
-  ) {
-  box-shadow: var(--wa-shadow-s);
-}
+  :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
+      [appearance='plain'],
+      .wa-plain
+    ) {
+    box-shadow: var(--wa-shadow-s);
+  }
 
-wa-callout {
-  border-radius: var(--wa-border-radius-m);
+  wa-callout {
+    border-radius: var(--wa-border-radius-m);
 
-  &::part(icon) {
-    opacity: 0.6;
+    &::part(icon) {
+      opacity: 0.6;
+    }
+  }
+
+  input[type='radio'],
+  wa-radio {
+    --background-color-checked: var(--wa-form-control-activated-color);
+    --checked-icon-color: var(--wa-color-brand-on-loud);
+    --checked-icon-scale: 0.4;
+  }
+
+  wa-switch {
+    --background-color: var(--wa-color-neutral-fill-normal);
+    --border-color: transparent;
+    --height: calc(var(--thumb-size) * (18 / 14));
+    --thumb-color: white;
+    --thumb-color-checked: var(--thumb-color);
+    --thumb-size: 1.25em;
+    --thumb-shadow: var(--wa-shadow-s);
+    --width: calc(var(--thumb-size) * (32 / 14));
+  }
+
+  wa-tab {
+    color: var(--wa-color-text-quiet);
   }
 }
-
-input[type='radio'],
-wa-radio {
-  --background-color-checked: var(--wa-form-control-activated-color);
-  --checked-icon-color: var(--wa-color-brand-on-loud);
-  --checked-icon-scale: 0.4;
-}
-
-wa-switch {
-  --background-color: var(--wa-color-neutral-fill-normal);
-  --border-color: transparent;
-  --height: calc(var(--thumb-size) * (18 / 14));
-  --thumb-color: white;
-  --thumb-color-checked: var(--thumb-color);
-  --thumb-size: 1.25em;
-  --thumb-shadow: var(--wa-shadow-s);
-  --width: calc(var(--thumb-size) * (32 / 14));
-}
-
-wa-tab {
-  color: var(--wa-color-text-quiet);
-}
diff --git a/src/styles/utilities/size.css b/src/styles/utilities/size.css
index 94b5e328c..ae49f2448 100644
--- a/src/styles/utilities/size.css
+++ b/src/styles/utilities/size.css
@@ -16,7 +16,7 @@
   font-size: var(--wa-size);
 }
 
-:root,
+:where(:root),
 :host,
 .wa-size-s,
 .wa-size-m,