Merge branch 'next' into combobox-free

packages/webawesome/docs/_includes/_dialog-wa-launch.njk

@@ -14,8 +14,8 @@
         <p>Celebrate our official launch with a 20% discount on a Web Awesome Pro plan&hellip;<span class="appearance-underlined variant-drawn" style="--underline-color: var(--wa-color-brand);">for life</span>! But hurry, this lifetime discount is only available for a limited time.</p>
 
         <div class="wa-split">
-          <wa-button type="button" appearance="plain" data-dialog="close" class="plausible-event-name=launch_dialog:close_button_click">Maybe Later</wa-button>
+          <wa-button type="button" appearance="plain" data-dialog="close">Maybe Later</wa-button>
-          <wa-button variant="neutral" appearance="accent" href="/purchase" class="brand-font plausible-event-name=launch_dialog:pro_purchase_button_click">
+          <wa-button variant="neutral" appearance="accent" href="/purchase" class="brand-font">
             <wa-icon slot="start" variant="regular" name="rocket-launch"></wa-icon>
             Get Pro + Save 20%
           </wa-button>
@@ -43,13 +43,6 @@
           return;
         }
 
-        // Helper function to safely track Plausible events
-        const trackEvent = (eventName) => {
-          if (typeof plausible !== 'undefined') {
-            plausible(eventName);
-          }
-        };
-
         // Initialize dialog functionality
         let initCalled = false;
         const initDialog = () => {
@@ -59,19 +52,8 @@
           }
           initCalled = true;
 
-          // Track when dialog is shown
+          // Save dismissal state when dialog is hidden
-          dialog.addEventListener('wa-show', () => {
-            trackEvent('launch_dialog:view');
-          }, { once: true });
-
-          // Track when dialog is dismissed
           dialog.addEventListener('wa-hide', (event) => {
-            // Track overlay click or Escape key dismissal
-            // Button clicks are tracked via CSS classes, so we only track non-button dismissals
-            if (event.detail?.source === dialog) {
-              trackEvent('launch_dialog:overlay_click');
-            }
-
             // Save dismissal state to localStorage
             try {
               localStorage.setItem(SITE_DIALOG_DISMISSED_KEY, 'true');

packages/webawesome/docs/_includes/base.njk

@@ -17,7 +17,6 @@
     <script type="module" src="/assets/scripts/color-scheme.js"></script>
     <script type="module" src="/assets/scripts/theme.js"></script>
     {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}
-    <script defer data-domain="webawesome.com" src="https://plausible.io/js/script.js"></script>
 
     {% block head %}
       <link rel="stylesheet" href="/assets/styles/docs.css" />
@@ -142,6 +141,9 @@
         {% include "_dialog-wa-launch.njk" ignore missing %}
       {% endif %}
 
+      {#- Cookie Consent Dialog -#}
+      {% include "cookie-consent.njk" ignore missing %}
+
       {# Footer #}
       {% block pageFooter %}{% endblock %}
     </wa-page>

packages/webawesome/docs/docs/components/button-group.md

@@ -40,60 +40,6 @@ Set the `orientation` attribute to `vertical` to make a vertical button group.
 </wa-button-group>
 ```
 
-### Theme Buttons
-
-Theme buttons are supported through the button group's `variant` attribute.
-
-```html {.example}
-<wa-button-group label="Alignment" variant="brand">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment" variant="success">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment" variant="warning">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment" variant="danger">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
-</wa-button-group>
-```
-
-You can still use the buttons’ own `variant` attribute to override the inherited variant.
-
-```html {.example}
-<wa-button-group label="Alignment" variant="brand">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button variant="neutral">Right</wa-button>
-</wa-button-group>
-```
-
 ### Pill Buttons
 
 Pill buttons are supported through the button's `pill` attribute.

packages/webawesome/docs/docs/resources/changelog.md

@@ -25,6 +25,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-select>` that prevented clicks on the tag's remove button from removing options in multiple mode
 - Fixed a bug in `<wa-select>` that caused tags to appear in alphabetical order instead of selection order when using `multiple`
 - Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
+- Improved performance of all components by fixing how CSS is imported and reused [issue:1812]
 - Modified the default `transition` styles of `<wa-dropdown-item>` to use design tokens [pr:1693]
 
 ## 3.0.0

packages/webawesome/scripts/build.js

@@ -230,9 +230,6 @@ export async function build(options = {}) {
         js: `/*! Copyright ${currentYear} Fonticons, Inc. - https://webawesome.com/license */`,
       },
       plugins: [replace({ __WEBAWESOME_VERSION__: await getVersion() })],
-      loader: {
-        '.css': 'text',
-      },
     };
 
     const unbundledConfig = {

packages/webawesome/src/components/animated-image/animated-image.css

@@ -1,65 +0,0 @@
-:host {
-  --control-box-size: 3rem;
-  --icon-size: calc(var(--control-box-size) * 0.625);
-
-  display: inline-flex;
-  position: relative;
-  cursor: pointer;
-}
-
-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-img[aria-hidden='true'] {
-  display: none;
-}
-
-.control-box {
-  display: flex;
-  position: absolute;
-  align-items: center;
-  justify-content: center;
-  top: calc(50% - var(--control-box-size) / 2);
-  right: calc(50% - var(--control-box-size) / 2);
-  width: var(--control-box-size);
-  height: var(--control-box-size);
-  font-size: calc(var(--icon-size) * 0.75);
-  background: none;
-  border: solid var(--wa-border-width-s) currentColor;
-  background-color: rgb(0 0 0 / 50%);
-  border-radius: var(--wa-border-radius-circle);
-  color: white;
-  pointer-events: none;
-  transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
-}
-
-@media (hover: hover) {
-  :host([play]:hover) .control-box {
-    opacity: 1;
-  }
-}
-
-:where(:host([play]:not(:hover))) .control-box {
-  opacity: 0;
-}
-
-:host([play]) slot[name='play-icon'],
-:host(:not([play])) slot[name='pause-icon'] {
-  display: none;
-}
-
-/* Show control box on keyboard focus */
-.animated-image {
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible .control-box {
-    opacity: 1;
-    outline: var(--wa-focus-ring);
-    outline-offset: var(--wa-focus-ring-offset);
-  }
-}

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

@@ -0,0 +1,69 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --control-box-size: 3rem;
+    --icon-size: calc(var(--control-box-size) * 0.625);
+
+    display: inline-flex;
+    position: relative;
+    cursor: pointer;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  img[aria-hidden='true'] {
+    display: none;
+  }
+
+  .control-box {
+    display: flex;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    top: calc(50% - var(--control-box-size) / 2);
+    right: calc(50% - var(--control-box-size) / 2);
+    width: var(--control-box-size);
+    height: var(--control-box-size);
+    font-size: calc(var(--icon-size) * 0.75);
+    background: none;
+    border: solid var(--wa-border-width-s) currentColor;
+    background-color: rgb(0 0 0 / 50%);
+    border-radius: var(--wa-border-radius-circle);
+    color: white;
+    pointer-events: none;
+    transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
+  }
+
+  @media (hover: hover) {
+    :host([play]:hover) .control-box {
+      opacity: 1;
+    }
+  }
+
+  :where(:host([play]:not(:hover))) .control-box {
+    opacity: 0;
+  }
+
+  :host([play]) slot[name='play-icon'],
+  :host(:not([play])) slot[name='pause-icon'] {
+    display: none;
+  }
+
+  /* Show control box on keyboard focus */
+  .animated-image {
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible .control-box {
+      opacity: 1;
+      outline: var(--wa-focus-ring);
+      outline-offset: var(--wa-focus-ring-offset);
+    }
+  }
+`;

packages/webawesome/src/components/animated-image/animated-image.ts

@@ -6,7 +6,7 @@ import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
-import styles from './animated-image.css';
+import styles from './animated-image.styles.js';
 
 /**
  * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.

packages/webawesome/src/components/animation/animation.css

@@ -1,3 +0,0 @@
-:host {
-  display: contents;
-}

packages/webawesome/src/components/animation/animation.styles.ts

@@ -0,0 +1,7 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: contents;
+  }
+`;

packages/webawesome/src/components/animation/animation.ts

@@ -5,7 +5,7 @@ import { WaFinishEvent } from '../../events/finish.js';
 import { WaStartEvent } from '../../events/start.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './animation.css';
+import styles from './animation.styles.js';
 import { animations } from './animations.js';
 
 /**

packages/webawesome/src/components/avatar/avatar.css

@@ -1,53 +0,0 @@
-:host {
-  --size: 3rem;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: var(--size);
-  height: var(--size);
-  color: var(--wa-color-neutral-on-normal);
-  font: inherit;
-  font-size: calc(var(--size) * 0.4);
-  vertical-align: middle;
-  background-color: var(--wa-color-neutral-fill-normal);
-  border-radius: var(--wa-border-radius-circle);
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-:host([shape='square']) {
-  border-radius: 0;
-}
-
-:host([shape='rounded']) {
-  border-radius: var(--wa-border-radius-m);
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.initials {
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  overflow: hidden;
-  border-radius: inherit;
-}

packages/webawesome/src/components/avatar/avatar.styles.ts

@@ -0,0 +1,57 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --size: 3rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    color: var(--wa-color-neutral-on-normal);
+    font: inherit;
+    font-size: calc(var(--size) * 0.4);
+    vertical-align: middle;
+    background-color: var(--wa-color-neutral-fill-normal);
+    border-radius: var(--wa-border-radius-circle);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host([shape='square']) {
+    border-radius: 0;
+  }
+
+  :host([shape='rounded']) {
+    border-radius: var(--wa-border-radius-m);
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .initials {
+    line-height: 1;
+    text-transform: uppercase;
+  }
+
+  .image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+`;

packages/webawesome/src/components/avatar/avatar.ts

@@ -4,7 +4,7 @@ import { WaErrorEvent } from '../../events/error.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import '../icon/icon.js';
-import styles from './avatar.css';
+import styles from './avatar.styles.js';
 
 /**
  * @summary Avatars are used to represent a person or object.

packages/webawesome/src/components/badge/badge.css

@@ -1,104 +0,0 @@
-:host {
-  --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.375em 0.625em;
-  color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
-  font-size: max(var(--wa-font-size-2xs), 0.75em);
-  font-weight: var(--wa-font-weight-semibold);
-  line-height: 1;
-  white-space: nowrap;
-  background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
-  border-color: transparent;
-  border-radius: var(--wa-border-radius-s);
-  border-style: var(--wa-border-style);
-  border-width: var(--wa-border-width-s);
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-/* Appearance modifiers */
-:host([appearance='outlined']) {
-  --pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
-
-  color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
-  background-color: transparent;
-  border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
-}
-
-:host([appearance='filled']) {
-  --pulse-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
-
-  color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
-  background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
-  border-color: transparent;
-}
-
-:host([appearance='filled-outlined']) {
-  --pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
-
-  color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
-  background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
-  border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
-}
-
-:host([appearance='accent']) {
-  --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
-
-  color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
-  background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
-  border-color: transparent;
-}
-
-/* Pill modifier */
-:host([pill]) {
-  border-radius: var(--wa-border-radius-pill);
-}
-
-/* Pulse attention */
-:host([attention='pulse']) {
-  animation: pulse 1.5s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 var(--pulse-color);
-  }
-  70% {
-    box-shadow: 0 0 0 0.5rem transparent;
-  }
-  100% {
-    box-shadow: 0 0 0 0 transparent;
-  }
-}
-
-/* Bounce attention */
-:host([attention='bounce']) {
-  animation: bounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
-}
-
-@keyframes bounce {
-  0%,
-  20%,
-  50%,
-  80%,
-  100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-5px);
-  }
-  60% {
-    transform: translateY(-2px);
-  }
-}
-
-::slotted(wa-icon) {
-  margin-inline-end: var(--wa-space-2xs, 0.25em);
-  opacity: 90%;
-  line-height: 1;
-  height: 0.85em;
-}

packages/webawesome/src/components/badge/badge.styles.ts

@@ -0,0 +1,108 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.375em 0.625em;
+    color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
+    font-size: max(var(--wa-font-size-2xs), 0.75em);
+    font-weight: var(--wa-font-weight-semibold);
+    line-height: 1;
+    white-space: nowrap;
+    background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
+    border-color: transparent;
+    border-radius: var(--wa-border-radius-s);
+    border-style: var(--wa-border-style);
+    border-width: var(--wa-border-width-s);
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: inherit;
+  }
+
+  /* Appearance modifiers */
+  :host([appearance='outlined']) {
+    --pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
+
+    color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
+    background-color: transparent;
+    border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
+  }
+
+  :host([appearance='filled']) {
+    --pulse-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
+
+    color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
+    background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
+    border-color: transparent;
+  }
+
+  :host([appearance='filled-outlined']) {
+    --pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
+
+    color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
+    background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
+    border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
+  }
+
+  :host([appearance='accent']) {
+    --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
+
+    color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
+    background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
+    border-color: transparent;
+  }
+
+  /* Pill modifier */
+  :host([pill]) {
+    border-radius: var(--wa-border-radius-pill);
+  }
+
+  /* Pulse attention */
+  :host([attention='pulse']) {
+    animation: pulse 1.5s infinite;
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--pulse-color);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  /* Bounce attention */
+  :host([attention='bounce']) {
+    animation: bounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
+  }
+
+  @keyframes bounce {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(-5px);
+    }
+    60% {
+      transform: translateY(-2px);
+    }
+  }
+
+  ::slotted(wa-icon) {
+    margin-inline-end: var(--wa-space-2xs, 0.25em);
+    opacity: 90%;
+    line-height: 1;
+    height: 0.85em;
+  }
+`;

packages/webawesome/src/components/badge/badge.ts

@@ -1,8 +1,8 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import variantStyles from '../../styles/utilities/variants.css';
+import variantStyles from '../../styles/component/variants.styles.js';
-import styles from './badge.css';
+import styles from './badge.styles.js';
 
 /**
  * @summary Badges are used to draw attention and display statuses or counts.

packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css

@@ -1,81 +0,0 @@
-:host {
-  color: var(--wa-color-text-link);
-  display: inline-flex;
-  align-items: center;
-  font: inherit;
-  font-weight: var(--wa-font-weight-action);
-  line-height: var(--wa-line-height-normal);
-  white-space: nowrap;
-}
-
-:host(:last-of-type) {
-  color: var(--wa-color-text-quiet);
-}
-
-.label {
-  display: inline-block;
-  font: inherit;
-  text-decoration: none;
-  color: currentColor;
-  background: none;
-  border: none;
-  border-radius: var(--wa-border-radius-m);
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  transition: color var(--wa-transition-normal) var(--wa-transition-easing);
-}
-
-@media (hover: hover) {
-  :host(:not(:last-of-type)) .label:hover {
-    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
-  }
-}
-
-:host(:not(:last-of-type)) .label:active {
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
-}
-
-.label:focus {
-  outline: none;
-}
-
-.label:focus-visible {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}
-
-.start,
-.end {
-  display: none;
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-}
-
-.start,
-.end {
-  display: inline-flex;
-  color: var(--wa-color-text-quiet);
-}
-
-::slotted([slot='start']) {
-  margin-inline-end: var(--wa-space-s);
-}
-
-::slotted([slot='end']) {
-  margin-inline-start: var(--wa-space-s);
-}
-
-:host(:last-of-type) .separator {
-  display: none;
-}
-
-.separator {
-  color: var(--wa-color-text-quiet);
-  display: inline-flex;
-  align-items: center;
-  margin: 0 var(--wa-space-s);
-  user-select: none;
-  -webkit-user-select: none;
-}

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

@@ -0,0 +1,85 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    color: var(--wa-color-text-link);
+    display: inline-flex;
+    align-items: center;
+    font: inherit;
+    font-weight: var(--wa-font-weight-action);
+    line-height: var(--wa-line-height-normal);
+    white-space: nowrap;
+  }
+
+  :host(:last-of-type) {
+    color: var(--wa-color-text-quiet);
+  }
+
+  .label {
+    display: inline-block;
+    font: inherit;
+    text-decoration: none;
+    color: currentColor;
+    background: none;
+    border: none;
+    border-radius: var(--wa-border-radius-m);
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition: color var(--wa-transition-normal) var(--wa-transition-easing);
+  }
+
+  @media (hover: hover) {
+    :host(:not(:last-of-type)) .label:hover {
+      color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+    }
+  }
+
+  :host(:not(:last-of-type)) .label:active {
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
+  }
+
+  .label:focus {
+    outline: none;
+  }
+
+  .label:focus-visible {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  .start,
+  .end {
+    display: none;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .start,
+  .end {
+    display: inline-flex;
+    color: var(--wa-color-text-quiet);
+  }
+
+  ::slotted([slot='start']) {
+    margin-inline-end: var(--wa-space-s);
+  }
+
+  ::slotted([slot='end']) {
+    margin-inline-start: var(--wa-space-s);
+  }
+
+  :host(:last-of-type) .separator {
+    display: none;
+  }
+
+  .separator {
+    color: var(--wa-color-text-quiet);
+    display: inline-flex;
+    align-items: center;
+    margin: 0 var(--wa-space-s);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;

packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts

@@ -3,7 +3,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './breadcrumb-item.css';
+import styles from './breadcrumb-item.styles.js';
 
 /**
  * @summary Breadcrumb Items are used inside breadcrumbs to represent different links.

packages/webawesome/src/components/breadcrumb/breadcrumb.css

@@ -1,5 +0,0 @@
-.breadcrumb {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}

packages/webawesome/src/components/breadcrumb/breadcrumb.styles.ts

@@ -0,0 +1,9 @@
+import { css } from 'lit';
+
+export default css`
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+`;

packages/webawesome/src/components/breadcrumb/breadcrumb.ts

@@ -4,7 +4,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import type WaBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';
 import '../icon/icon.js';
-import styles from './breadcrumb.css';
+import styles from './breadcrumb.styles.js';
 
 /**
  * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.

packages/webawesome/src/components/button-group/button-group.css

@@ -1,44 +0,0 @@
-:host {
-  display: inline-flex;
-}
-
-.button-group {
-  display: flex;
-  position: relative;
-  isolation: isolate;
-  flex-wrap: wrap;
-  gap: 1px;
-
-  @media (hover: hover) {
-    > :hover,
-    &::slotted(:hover) {
-      z-index: 1;
-    }
-  }
-
-  /* Focus and checked are always on top */
-  > :focus,
-  &::slotted(:focus),
-  > [aria-checked='true'],
-  &::slotted([aria-checked='true']),
-  > [checked],
-  &::slotted([checked]) {
-    z-index: 2 !important;
-  }
-}
-:host([orientation='vertical']) .button-group {
-  flex-direction: column;
-}
-
-/* Button groups with at least one outlined button will not have a gap and instead have borders overlap */
-.button-group.has-outlined {
-  gap: 0;
-
-  &:not([aria-orientation='vertical']):not(.button-group-vertical)::slotted(:not(:first-child)) {
-    margin-inline-start: calc(-1 * var(--border-width));
-  }
-
-  &:is([aria-orientation='vertical'], .button-group-vertical)::slotted(:not(:first-child)) {
-    margin-block-start: calc(-1 * var(--border-width));
-  }
-}

packages/webawesome/src/components/button-group/button-group.styles.ts

@@ -0,0 +1,48 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: inline-flex;
+  }
+
+  .button-group {
+    display: flex;
+    position: relative;
+    isolation: isolate;
+    flex-wrap: wrap;
+    gap: 1px;
+
+    @media (hover: hover) {
+      > :hover,
+      &::slotted(:hover) {
+        z-index: 1;
+      }
+    }
+
+    /* Focus and checked are always on top */
+    > :focus,
+    &::slotted(:focus),
+    > [aria-checked='true'],
+    &::slotted([aria-checked='true']),
+    > [checked],
+    &::slotted([checked]) {
+      z-index: 2 !important;
+    }
+  }
+  :host([orientation='vertical']) .button-group {
+    flex-direction: column;
+  }
+
+  /* Button groups with at least one outlined button will not have a gap and instead have borders overlap */
+  .button-group.has-outlined {
+    gap: 0;
+
+    &:not([aria-orientation='vertical']):not(.button-group-vertical)::slotted(:not(:first-child)) {
+      margin-inline-start: calc(-1 * var(--border-width));
+    }
+
+    &:is([aria-orientation='vertical'], .button-group-vertical)::slotted(:not(:first-child)) {
+      margin-block-start: calc(-1 * var(--border-width));
+    }
+  }
+`;

packages/webawesome/src/components/button-group/button-group.ts

@@ -4,7 +4,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import type WaButton from '../button/button.js';
-import styles from './button-group.css';
+import styles from './button-group.styles.js';
 
 /**
  * @summary Button groups can be used to group related buttons into sections.

packages/webawesome/src/components/button/button.css

@@ -1,372 +0,0 @@
-@layer wa-component {
-  :host {
-    display: inline-block;
-
-    /* Workaround because Chrome doesn't like :host(:has()) below
-     * https://issues.chromium.org/issues/40062355
-     * Firefox doesn't like this nested rule, so both are needed */
-    &:has(wa-badge) {
-      position: relative;
-    }
-  }
-
-  /* Apply relative positioning only when needed to position wa-badge
-   * This avoids creating a new stacking context for every button */
-  :host(:has(wa-badge)) {
-    position: relative;
-  }
-}
-
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  user-select: none;
-  -webkit-user-select: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  transition-property: background, border, box-shadow, color;
-  transition-duration: var(--wa-transition-fast);
-  transition-timing-function: var(--wa-transition-easing);
-  cursor: pointer;
-  padding: 0 var(--wa-form-control-padding-inline);
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: var(--wa-font-weight-action);
-  line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
-  height: var(--wa-form-control-height);
-  width: 100%;
-
-  background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
-  border-color: transparent;
-  color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
-  border-radius: var(--wa-form-control-border-radius);
-  border-style: var(--wa-border-style);
-  border-width: var(--wa-border-width-s);
-}
-
-/* Appearance modifiers */
-:host([appearance='plain']) {
-  .button {
-    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-    background-color: transparent;
-    border-color: transparent;
-  }
-  @media (hover: hover) {
-    .button:not(.disabled):not(.loading):hover {
-      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-      background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
-    }
-  }
-  .button:not(.disabled):not(.loading):active {
-    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-    background-color: color-mix(
-      in oklab,
-      var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
-      var(--wa-color-mix-active)
-    );
-  }
-}
-
-:host([appearance='outlined']) {
-  .button {
-    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-    background-color: transparent;
-    border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
-  }
-  @media (hover: hover) {
-    .button:not(.disabled):not(.loading):hover {
-      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-      background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
-    }
-  }
-  .button:not(.disabled):not(.loading):active {
-    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-    background-color: color-mix(
-      in oklab,
-      var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
-      var(--wa-color-mix-active)
-    );
-  }
-}
-
-:host([appearance='filled']) {
-  .button {
-    color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-    background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
-    border-color: transparent;
-  }
-  @media (hover: hover) {
-    .button:not(.disabled):not(.loading):hover {
-      color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-      background-color: color-mix(
-        in oklab,
-        var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
-        var(--wa-color-mix-hover)
-      );
-    }
-  }
-  .button:not(.disabled):not(.loading):active {
-    color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-    background-color: color-mix(
-      in oklab,
-      var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
-      var(--wa-color-mix-active)
-    );
-  }
-}
-
-:host([appearance='filled-outlined']) {
-  .button {
-    color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-    background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
-    border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
-  }
-  @media (hover: hover) {
-    .button:not(.disabled):not(.loading):hover {
-      color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-      background-color: color-mix(
-        in oklab,
-        var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
-        var(--wa-color-mix-hover)
-      );
-    }
-  }
-  .button:not(.disabled):not(.loading):active {
-    color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-    background-color: color-mix(
-      in oklab,
-      var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
-      var(--wa-color-mix-active)
-    );
-  }
-}
-
-:host([appearance='accent']) {
-  .button {
-    color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
-    background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
-    border-color: transparent;
-  }
-  @media (hover: hover) {
-    .button:not(.disabled):not(.loading):hover {
-      background-color: color-mix(
-        in oklab,
-        var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
-        var(--wa-color-mix-hover)
-      );
-    }
-  }
-  .button:not(.disabled):not(.loading):active {
-    background-color: color-mix(
-      in oklab,
-      var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
-      var(--wa-color-mix-active)
-    );
-  }
-}
-
-/* Focus states */
-.button:focus {
-  outline: none;
-}
-
-.button:focus-visible {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}
-
-/* Disabled state */
-.button.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* When disabled, prevent mouse events from bubbling up from children */
-.button.disabled * {
-  pointer-events: none;
-}
-
-/* Keep it last so Safari doesn't stop parsing this block */
-.button::-moz-focus-inner {
-  border: 0;
-}
-
-/* Icon buttons */
-.button.is-icon-button {
-  outline-offset: 2px;
-  width: var(--wa-form-control-height);
-  aspect-ratio: 1;
-}
-
-.button.is-icon-button:has(wa-icon) {
-  width: auto;
-}
-
-/* Pill modifier */
-:host([pill]) .button {
-  border-radius: var(--wa-border-radius-pill);
-}
-
-/*
- * Label
- */
-
-.start,
-.end {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-}
-
-.label {
-  display: inline-block;
-}
-
-.is-icon-button .label {
-  display: flex;
-}
-
-.label::slotted(wa-icon) {
-  align-self: center;
-}
-
-/*
- * Caret modifier
- */
-
-wa-icon[part='caret'] {
-  display: flex;
-  align-self: center;
-  align-items: center;
-
-  &::part(svg) {
-    width: 0.875em;
-    height: 0.875em;
-  }
-
-  .button:has(&) .end {
-    display: none;
-  }
-}
-
-/*
- * Loading modifier
- */
-
-.loading {
-  position: relative;
-  cursor: wait;
-
-  .start,
-  .label,
-  .end,
-  .caret {
-    visibility: hidden;
-  }
-
-  wa-spinner {
-    --indicator-color: currentColor;
-    --track-color: color-mix(in oklab, currentColor, transparent 90%);
-
-    position: absolute;
-    font-size: 1em;
-    height: 1em;
-    width: 1em;
-    top: calc(50% - 0.5em);
-    left: calc(50% - 0.5em);
-  }
-}
-
-/*
- * Badges
- */
-
-.button ::slotted(wa-badge) {
-  border-color: var(--wa-color-surface-default);
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  translate: 50% -50%;
-  pointer-events: none;
-}
-
-:host(:dir(rtl)) ::slotted(wa-badge) {
-  translate: -50% -50%;
-}
-
-/*
-* Button spacing
-*/
-
-slot[name='start']::slotted(*) {
-  margin-inline-end: 0.75em;
-}
-
-slot[name='end']::slotted(*),
-.button:not(.visually-hidden-label) [part='caret'] {
-  margin-inline-start: 0.75em;
-}
-
-/*
- * Button group border radius modifications
- */
-
-/* Remove border radius from all grouped buttons by default */
-:host(.wa-button-group__button) .button {
-  border-radius: 0;
-}
-
-/* Horizontal orientation */
-:host(.wa-button-group__horizontal.wa-button-group__button-first) .button {
-  border-start-start-radius: var(--wa-form-control-border-radius);
-  border-end-start-radius: var(--wa-form-control-border-radius);
-}
-
-:host(.wa-button-group__horizontal.wa-button-group__button-last) .button {
-  border-start-end-radius: var(--wa-form-control-border-radius);
-  border-end-end-radius: var(--wa-form-control-border-radius);
-}
-
-/* Vertical orientation */
-:host(.wa-button-group__vertical) {
-  flex: 1 1 auto;
-}
-
-:host(.wa-button-group__vertical) .button {
-  width: 100%;
-  justify-content: start;
-}
-
-:host(.wa-button-group__vertical.wa-button-group__button-first) .button {
-  border-start-start-radius: var(--wa-form-control-border-radius);
-  border-start-end-radius: var(--wa-form-control-border-radius);
-}
-
-:host(.wa-button-group__vertical.wa-button-group__button-last) .button {
-  border-end-start-radius: var(--wa-form-control-border-radius);
-  border-end-end-radius: var(--wa-form-control-border-radius);
-}
-
-/* Handle pill modifier for button groups */
-:host([pill].wa-button-group__horizontal.wa-button-group__button-first) .button {
-  border-start-start-radius: var(--wa-border-radius-pill);
-  border-end-start-radius: var(--wa-border-radius-pill);
-}
-
-:host([pill].wa-button-group__horizontal.wa-button-group__button-last) .button {
-  border-start-end-radius: var(--wa-border-radius-pill);
-  border-end-end-radius: var(--wa-border-radius-pill);
-}
-
-:host([pill].wa-button-group__vertical.wa-button-group__button-first) .button {
-  border-start-start-radius: var(--wa-border-radius-pill);
-  border-start-end-radius: var(--wa-border-radius-pill);
-}
-
-:host([pill].wa-button-group__vertical.wa-button-group__button-last) .button {
-  border-end-start-radius: var(--wa-border-radius-pill);
-  border-end-end-radius: var(--wa-border-radius-pill);
-}

packages/webawesome/src/components/button/button.styles.ts

@@ -0,0 +1,376 @@
+import { css } from 'lit';
+
+export default css`
+  @layer wa-component {
+    :host {
+      display: inline-block;
+
+      /* Workaround because Chrome doesn't like :host(:has()) below
+       * https://issues.chromium.org/issues/40062355
+       * Firefox doesn't like this nested rule, so both are needed */
+      &:has(wa-badge) {
+        position: relative;
+      }
+    }
+
+    /* Apply relative positioning only when needed to position wa-badge
+     * This avoids creating a new stacking context for every button */
+    :host(:has(wa-badge)) {
+      position: relative;
+    }
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    user-select: none;
+    -webkit-user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    transition-property: background, border, box-shadow, color, opacity;
+    transition-duration: var(--wa-transition-fast);
+    transition-timing-function: var(--wa-transition-easing);
+    cursor: pointer;
+    padding: 0 var(--wa-form-control-padding-inline);
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: var(--wa-font-weight-action);
+    line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
+    height: var(--wa-form-control-height);
+    width: 100%;
+
+    background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+    border-color: transparent;
+    color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+    border-radius: var(--wa-form-control-border-radius);
+    border-style: var(--wa-border-style);
+    border-width: var(--wa-border-width-s);
+  }
+
+  /* Appearance modifiers */
+  :host([appearance='plain']) {
+    .button {
+      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+      background-color: transparent;
+      border-color: transparent;
+    }
+    @media (hover: hover) {
+      .button:not(.disabled):not(.loading):hover {
+        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+        background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
+      }
+    }
+    .button:not(.disabled):not(.loading):active {
+      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+      background-color: color-mix(
+        in oklab,
+        var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
+        var(--wa-color-mix-active)
+      );
+    }
+  }
+
+  :host([appearance='outlined']) {
+    .button {
+      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+      background-color: transparent;
+      border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
+    }
+    @media (hover: hover) {
+      .button:not(.disabled):not(.loading):hover {
+        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+        background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
+      }
+    }
+    .button:not(.disabled):not(.loading):active {
+      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+      background-color: color-mix(
+        in oklab,
+        var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
+        var(--wa-color-mix-active)
+      );
+    }
+  }
+
+  :host([appearance='filled']) {
+    .button {
+      color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+      background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
+      border-color: transparent;
+    }
+    @media (hover: hover) {
+      .button:not(.disabled):not(.loading):hover {
+        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+          var(--wa-color-mix-hover)
+        );
+      }
+    }
+    .button:not(.disabled):not(.loading):active {
+      color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+      background-color: color-mix(
+        in oklab,
+        var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+        var(--wa-color-mix-active)
+      );
+    }
+  }
+
+  :host([appearance='filled-outlined']) {
+    .button {
+      color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+      background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
+      border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
+    }
+    @media (hover: hover) {
+      .button:not(.disabled):not(.loading):hover {
+        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+          var(--wa-color-mix-hover)
+        );
+      }
+    }
+    .button:not(.disabled):not(.loading):active {
+      color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+      background-color: color-mix(
+        in oklab,
+        var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+        var(--wa-color-mix-active)
+      );
+    }
+  }
+
+  :host([appearance='accent']) {
+    .button {
+      color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+      background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+      border-color: transparent;
+    }
+    @media (hover: hover) {
+      .button:not(.disabled):not(.loading):hover {
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
+          var(--wa-color-mix-hover)
+        );
+      }
+    }
+    .button:not(.disabled):not(.loading):active {
+      background-color: color-mix(
+        in oklab,
+        var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
+        var(--wa-color-mix-active)
+      );
+    }
+  }
+
+  /* Focus states */
+  .button:focus {
+    outline: none;
+  }
+
+  .button:focus-visible {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  /* Disabled state */
+  .button.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* When disabled, prevent mouse events from bubbling up from children */
+  .button.disabled * {
+    pointer-events: none;
+  }
+
+  /* Keep it last so Safari doesn't stop parsing this block */
+  .button::-moz-focus-inner {
+    border: 0;
+  }
+
+  /* Icon buttons */
+  .button.is-icon-button {
+    outline-offset: 2px;
+    width: var(--wa-form-control-height);
+    aspect-ratio: 1;
+  }
+
+  .button.is-icon-button:has(wa-icon) {
+    width: auto;
+  }
+
+  /* Pill modifier */
+  :host([pill]) .button {
+    border-radius: var(--wa-border-radius-pill);
+  }
+
+  /*
+   * Label
+   */
+
+  .start,
+  .end {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  .label {
+    display: inline-block;
+  }
+
+  .is-icon-button .label {
+    display: flex;
+  }
+
+  .label::slotted(wa-icon) {
+    align-self: center;
+  }
+
+  /*
+   * Caret modifier
+   */
+
+  wa-icon[part='caret'] {
+    display: flex;
+    align-self: center;
+    align-items: center;
+
+    &::part(svg) {
+      width: 0.875em;
+      height: 0.875em;
+    }
+
+    .button:has(&) .end {
+      display: none;
+    }
+  }
+
+  /*
+   * Loading modifier
+   */
+
+  .loading {
+    position: relative;
+    cursor: wait;
+
+    .start,
+    .label,
+    .end,
+    .caret {
+      visibility: hidden;
+    }
+
+    wa-spinner {
+      --indicator-color: currentColor;
+      --track-color: color-mix(in oklab, currentColor, transparent 90%);
+
+      position: absolute;
+      font-size: 1em;
+      height: 1em;
+      width: 1em;
+      top: calc(50% - 0.5em);
+      left: calc(50% - 0.5em);
+    }
+  }
+
+  /*
+   * Badges
+   */
+
+  .button ::slotted(wa-badge) {
+    border-color: var(--wa-color-surface-default);
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    translate: 50% -50%;
+    pointer-events: none;
+  }
+
+  :host(:dir(rtl)) ::slotted(wa-badge) {
+    translate: -50% -50%;
+  }
+
+  /*
+  * Button spacing
+  */
+
+  slot[name='start']::slotted(*) {
+    margin-inline-end: 0.75em;
+  }
+
+  slot[name='end']::slotted(*),
+  .button:not(.visually-hidden-label) [part='caret'] {
+    margin-inline-start: 0.75em;
+  }
+
+  /*
+   * Button group border radius modifications
+   */
+
+  /* Remove border radius from all grouped buttons by default */
+  :host(.wa-button-group__button) .button {
+    border-radius: 0;
+  }
+
+  /* Horizontal orientation */
+  :host(.wa-button-group__horizontal.wa-button-group__button-first) .button {
+    border-start-start-radius: var(--wa-form-control-border-radius);
+    border-end-start-radius: var(--wa-form-control-border-radius);
+  }
+
+  :host(.wa-button-group__horizontal.wa-button-group__button-last) .button {
+    border-start-end-radius: var(--wa-form-control-border-radius);
+    border-end-end-radius: var(--wa-form-control-border-radius);
+  }
+
+  /* Vertical orientation */
+  :host(.wa-button-group__vertical) {
+    flex: 1 1 auto;
+  }
+
+  :host(.wa-button-group__vertical) .button {
+    width: 100%;
+    justify-content: start;
+  }
+
+  :host(.wa-button-group__vertical.wa-button-group__button-first) .button {
+    border-start-start-radius: var(--wa-form-control-border-radius);
+    border-start-end-radius: var(--wa-form-control-border-radius);
+  }
+
+  :host(.wa-button-group__vertical.wa-button-group__button-last) .button {
+    border-end-start-radius: var(--wa-form-control-border-radius);
+    border-end-end-radius: var(--wa-form-control-border-radius);
+  }
+
+  /* Handle pill modifier for button groups */
+  :host([pill].wa-button-group__horizontal.wa-button-group__button-first) .button {
+    border-start-start-radius: var(--wa-border-radius-pill);
+    border-end-start-radius: var(--wa-border-radius-pill);
+  }
+
+  :host([pill].wa-button-group__horizontal.wa-button-group__button-last) .button {
+    border-start-end-radius: var(--wa-border-radius-pill);
+    border-end-end-radius: var(--wa-border-radius-pill);
+  }
+
+  :host([pill].wa-button-group__vertical.wa-button-group__button-first) .button {
+    border-start-start-radius: var(--wa-border-radius-pill);
+    border-start-end-radius: var(--wa-border-radius-pill);
+  }
+
+  :host([pill].wa-button-group__vertical.wa-button-group__button-last) .button {
+    border-end-start-radius: var(--wa-border-radius-pill);
+    border-end-end-radius: var(--wa-border-radius-pill);
+  }
+`;

packages/webawesome/src/components/button/button.ts

@@ -7,13 +7,13 @@ import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
-import sizeStyles from '../../styles/utilities/size.css';
+import sizeStyles from '../../styles/component/size.styles.js';
-import variantStyles from '../../styles/utilities/variants.css';
+import variantStyles from '../../styles/component/variants.styles.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import type WaIcon from '../icon/icon.js';
 import '../spinner/spinner.js';
-import styles from './button.css';
+import styles from './button.styles.js';
 
 /**
  * @summary Buttons represent actions that are available to the user.

packages/webawesome/src/components/callout/callout.css

@@ -1,60 +0,0 @@
-:host {
-  display: flex;
-  position: relative;
-  align-items: stretch;
-  border-radius: var(--wa-panel-border-radius);
-  background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
-  border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
-  border-style: var(--wa-panel-border-style);
-  border-width: var(--wa-panel-border-width);
-  color: var(--wa-color-text-normal);
-  padding: 1em;
-}
-
-/* Appearance modifiers */
-:host([appearance~='plain']) {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-:host([appearance~='outlined']) {
-  background-color: transparent;
-  border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
-}
-
-:host([appearance~='filled']) {
-  background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
-  border-color: transparent;
-}
-
-:host([appearance~='filled-outlined']) {
-  border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
-}
-
-:host([appearance~='accent']) {
-  color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
-  background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
-  border-color: transparent;
-
-  [part~='icon'] {
-    color: currentColor;
-  }
-}
-
-[part~='icon'] {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  color: var(--wa-color-on-quiet);
-  font-size: 1.25em;
-}
-
-::slotted([slot='icon']) {
-  margin-inline-end: var(--wa-form-control-padding-inline);
-}
-
-[part~='message'] {
-  flex: 1 1 auto;
-  display: block;
-  overflow: hidden;
-}

packages/webawesome/src/components/callout/callout.styles.ts

@@ -0,0 +1,64 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: flex;
+    position: relative;
+    align-items: stretch;
+    border-radius: var(--wa-panel-border-radius);
+    background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
+    border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
+    border-style: var(--wa-panel-border-style);
+    border-width: var(--wa-panel-border-width);
+    color: var(--wa-color-text-normal);
+    padding: 1em;
+  }
+
+  /* Appearance modifiers */
+  :host([appearance~='plain']) {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  :host([appearance~='outlined']) {
+    background-color: transparent;
+    border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
+  }
+
+  :host([appearance~='filled']) {
+    background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
+    border-color: transparent;
+  }
+
+  :host([appearance~='filled-outlined']) {
+    border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
+  }
+
+  :host([appearance~='accent']) {
+    color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
+    background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
+    border-color: transparent;
+
+    [part~='icon'] {
+      color: currentColor;
+    }
+  }
+
+  [part~='icon'] {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    color: var(--wa-color-on-quiet);
+    font-size: 1.25em;
+  }
+
+  ::slotted([slot='icon']) {
+    margin-inline-end: var(--wa-form-control-padding-inline);
+  }
+
+  [part~='message'] {
+    flex: 1 1 auto;
+    display: block;
+    overflow: hidden;
+  }
+`;

packages/webawesome/src/components/callout/callout.ts

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import sizeStyles from '../../styles/utilities/size.css';
+import sizeStyles from '../../styles/component/size.styles.js';
-import variantStyles from '../../styles/utilities/variants.css';
+import variantStyles from '../../styles/component/variants.styles.js';
-import styles from './callout.css';
+import styles from './callout.styles.js';
 
 /**
  * @summary Callouts are used to display important messages inline.

packages/webawesome/src/components/card/card.css

@@ -1,141 +0,0 @@
-:host {
-  --spacing: var(--wa-space-l);
-
-  /* Internal calculated properties */
-  --inner-border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
-
-  display: flex;
-  flex-direction: column;
-  background-color: var(--wa-color-surface-default);
-  border-color: var(--wa-color-surface-border);
-  border-radius: var(--wa-panel-border-radius);
-  border-style: var(--wa-panel-border-style);
-  box-shadow: var(--wa-shadow-s);
-  border-width: var(--wa-panel-border-width);
-  color: var(--wa-color-text-normal);
-}
-
-/* Appearance modifiers */
-:host([appearance='plain']) {
-  background-color: transparent;
-  border-color: transparent;
-  box-shadow: none;
-}
-
-:host([appearance='outlined']) {
-  background-color: var(--wa-color-surface-default);
-  border-color: var(--wa-color-surface-border);
-}
-
-:host([appearance='filled']) {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-color: transparent;
-}
-
-:host([appearance='filled-outlined']) {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-color: var(--wa-color-surface-border);
-}
-
-:host([appearance='accent']) {
-  color: var(--wa-color-neutral-on-loud);
-  background-color: var(--wa-color-neutral-fill-loud);
-  border-color: transparent;
-}
-
-/* Take care of top and bottom radii */
-.media,
-:host(:not([with-media])) .header,
-:host(:not([with-media], [with-header])) .body {
-  border-start-start-radius: var(--inner-border-radius);
-  border-start-end-radius: var(--inner-border-radius);
-}
-
-:host(:not([with-footer])) .body,
-.footer {
-  border-end-start-radius: var(--inner-border-radius);
-  border-end-end-radius: var(--inner-border-radius);
-}
-
-.media {
-  display: flex;
-  overflow: hidden;
-
-  &::slotted(*) {
-    display: block;
-    width: 100%;
-    border-radius: 0 !important;
-  }
-}
-
-/* Round all corners for plain appearance */
-:host([appearance='plain']) .media {
-  border-radius: var(--inner-border-radius);
-
-  &::slotted(*) {
-    border-radius: inherit !important;
-  }
-}
-
-.header {
-  display: block;
-  border-block-end-style: inherit;
-  border-block-end-color: var(--wa-color-surface-border);
-  border-block-end-width: var(--wa-panel-border-width);
-  padding: calc(var(--spacing) / 2) var(--spacing);
-}
-
-.body {
-  display: block;
-  padding: var(--spacing);
-}
-
-.footer {
-  display: block;
-  border-block-start-style: inherit;
-  border-block-start-color: var(--wa-color-surface-border);
-  border-block-start-width: var(--wa-panel-border-width);
-  padding: var(--spacing);
-}
-
-/* Push slots to sides when the action slots renders */
-.has-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-:host(:not([with-header])) .header,
-:host(:not([with-footer])) .footer,
-:host(:not([with-media])) .media {
-  display: none;
-}
-
-/* Orientation Styles */
-:host([orientation='horizontal']) {
-  flex-direction: row;
-
-  .media {
-    border-start-start-radius: var(--inner-border-radius);
-    border-end-start-radius: var(--inner-border-radius);
-    border-start-end-radius: 0;
-
-    &::slotted(*) {
-      block-size: 100%;
-      inline-size: 100%;
-      object-fit: cover;
-    }
-  }
-}
-
-:host([orientation='horizontal']) ::slotted([slot='body']) {
-  display: block;
-  height: 100%;
-  margin: 0;
-}
-
-:host([orientation='horizontal']) ::slotted([slot='actions']) {
-  display: flex;
-  align-items: center;
-  padding: var(--spacing);
-}

packages/webawesome/src/components/card/card.styles.ts

@@ -0,0 +1,145 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --spacing: var(--wa-space-l);
+
+    /* Internal calculated properties */
+    --inner-border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
+
+    display: flex;
+    flex-direction: column;
+    background-color: var(--wa-color-surface-default);
+    border-color: var(--wa-color-surface-border);
+    border-radius: var(--wa-panel-border-radius);
+    border-style: var(--wa-panel-border-style);
+    box-shadow: var(--wa-shadow-s);
+    border-width: var(--wa-panel-border-width);
+    color: var(--wa-color-text-normal);
+  }
+
+  /* Appearance modifiers */
+  :host([appearance='plain']) {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  :host([appearance='outlined']) {
+    background-color: var(--wa-color-surface-default);
+    border-color: var(--wa-color-surface-border);
+  }
+
+  :host([appearance='filled']) {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-color: transparent;
+  }
+
+  :host([appearance='filled-outlined']) {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-color: var(--wa-color-surface-border);
+  }
+
+  :host([appearance='accent']) {
+    color: var(--wa-color-neutral-on-loud);
+    background-color: var(--wa-color-neutral-fill-loud);
+    border-color: transparent;
+  }
+
+  /* Take care of top and bottom radii */
+  .media,
+  :host(:not([with-media])) .header,
+  :host(:not([with-media], [with-header])) .body {
+    border-start-start-radius: var(--inner-border-radius);
+    border-start-end-radius: var(--inner-border-radius);
+  }
+
+  :host(:not([with-footer])) .body,
+  .footer {
+    border-end-start-radius: var(--inner-border-radius);
+    border-end-end-radius: var(--inner-border-radius);
+  }
+
+  .media {
+    display: flex;
+    overflow: hidden;
+
+    &::slotted(*) {
+      display: block;
+      width: 100%;
+      border-radius: 0 !important;
+    }
+  }
+
+  /* Round all corners for plain appearance */
+  :host([appearance='plain']) .media {
+    border-radius: var(--inner-border-radius);
+
+    &::slotted(*) {
+      border-radius: inherit !important;
+    }
+  }
+
+  .header {
+    display: block;
+    border-block-end-style: inherit;
+    border-block-end-color: var(--wa-color-surface-border);
+    border-block-end-width: var(--wa-panel-border-width);
+    padding: calc(var(--spacing) / 2) var(--spacing);
+  }
+
+  .body {
+    display: block;
+    padding: var(--spacing);
+  }
+
+  .footer {
+    display: block;
+    border-block-start-style: inherit;
+    border-block-start-color: var(--wa-color-surface-border);
+    border-block-start-width: var(--wa-panel-border-width);
+    padding: var(--spacing);
+  }
+
+  /* Push slots to sides when the action slots renders */
+  .has-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  :host(:not([with-header])) .header,
+  :host(:not([with-footer])) .footer,
+  :host(:not([with-media])) .media {
+    display: none;
+  }
+
+  /* Orientation Styles */
+  :host([orientation='horizontal']) {
+    flex-direction: row;
+
+    .media {
+      border-start-start-radius: var(--inner-border-radius);
+      border-end-start-radius: var(--inner-border-radius);
+      border-start-end-radius: 0;
+
+      &::slotted(*) {
+        block-size: 100%;
+        inline-size: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  :host([orientation='horizontal']) ::slotted([slot='body']) {
+    display: block;
+    height: 100%;
+    margin: 0;
+  }
+
+  :host([orientation='horizontal']) ::slotted([slot='actions']) {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing);
+  }
+`;

packages/webawesome/src/components/card/card.ts

@@ -2,8 +2,8 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { HasSlotController } from '../../internal/slot.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import sizeStyles from '../../styles/utilities/size.css';
+import sizeStyles from '../../styles/component/size.styles.js';
-import styles from './card.css';
+import styles from './card.styles.js';
 
 /**
  * @summary Cards can be used to group related subjects in a container.

packages/webawesome/src/components/carousel-item/carousel-item.css

@@ -1,19 +0,0 @@
-:host {
-  --aspect-ratio: inherit;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  max-height: 100%;
-  aspect-ratio: var(--aspect-ratio);
-  scroll-snap-align: start;
-  scroll-snap-stop: always;
-}
-
-::slotted(img) {
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover;
-}

packages/webawesome/src/components/carousel-item/carousel-item.styles.ts

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --aspect-ratio: inherit;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    max-height: 100%;
+    aspect-ratio: var(--aspect-ratio);
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+  }
+
+  ::slotted(img) {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover;
+  }
+`;

packages/webawesome/src/components/carousel-item/carousel-item.ts

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './carousel-item.css';
+import styles from './carousel-item.styles.js';
 
 /**
  * @summary A carousel item represent a slide within a carousel.

packages/webawesome/src/components/carousel/carousel.css

@@ -1,154 +0,0 @@
-:host {
-  --aspect-ratio: 16 / 9;
-  --scroll-hint: 0px;
-  --slide-gap: var(--wa-space-m, 1rem); /* fallback value is necessary */
-
-  display: flex;
-}
-
-.carousel {
-  display: grid;
-  grid-template-columns: min-content 1fr min-content;
-  grid-template-rows: 1fr min-content;
-  grid-template-areas:
-    '. slides .'
-    '. pagination .';
-  gap: var(--wa-space-m);
-  align-items: center;
-  min-height: 100%;
-  min-width: 100%;
-  position: relative;
-}
-
-.pagination {
-  grid-area: pagination;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--wa-space-s);
-}
-
-.slides {
-  grid-area: slides;
-
-  display: grid;
-  height: 100%;
-  width: 100%;
-  align-items: center;
-  justify-items: center;
-  overflow: auto;
-  overscroll-behavior-x: contain;
-  scrollbar-width: none;
-  aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
-  border-radius: var(--wa-border-radius-m);
-
-  --slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
-}
-
-@media (prefers-reduced-motion) {
-  :where(.slides) {
-    scroll-behavior: auto;
-  }
-}
-
-.slides-horizontal {
-  grid-auto-flow: column;
-  grid-auto-columns: var(--slide-size);
-  grid-auto-rows: 100%;
-  column-gap: var(--slide-gap);
-  scroll-snap-type: x mandatory;
-  scroll-padding-inline: var(--scroll-hint);
-  padding-inline: var(--scroll-hint);
-  overflow-y: hidden;
-}
-
-.slides-vertical {
-  grid-auto-flow: row;
-  grid-auto-columns: 100%;
-  grid-auto-rows: var(--slide-size);
-  row-gap: var(--slide-gap);
-  scroll-snap-type: y mandatory;
-  scroll-padding-block: var(--scroll-hint);
-  padding-block: var(--scroll-hint);
-  overflow-x: hidden;
-}
-
-.slides-dragging,
-.slides-dropping {
-  scroll-snap-type: unset;
-}
-
-:host([vertical]) ::slotted(wa-carousel-item) {
-  height: 100%;
-}
-
-.slides::-webkit-scrollbar {
-  display: none;
-}
-
-.navigation {
-  grid-area: navigation;
-  display: contents;
-  font-size: var(--wa-font-size-l);
-}
-
-.navigation-button {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  border-radius: var(--wa-border-radius-m);
-  font-size: inherit;
-  color: var(--wa-color-text-quiet);
-  padding: var(--wa-space-xs);
-  cursor: pointer;
-  transition: var(--wa-transition-normal) color;
-  appearance: none;
-}
-
-.navigation-button-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.navigation-button-disabled::part(base) {
-  pointer-events: none;
-}
-
-.navigation-button-previous {
-  grid-column: 1;
-  grid-row: 1;
-}
-
-.navigation-button-next {
-  grid-column: 3;
-  grid-row: 1;
-}
-
-.pagination-item {
-  display: block;
-  cursor: pointer;
-  background: none;
-  border: 0;
-  border-radius: var(--wa-border-radius-circle);
-  width: var(--wa-space-s);
-  height: var(--wa-space-s);
-  background-color: var(--wa-color-neutral-fill-normal);
-  padding: 0;
-  margin: 0;
-  transition: transform var(--wa-transition-slow);
-}
-
-.pagination-item-active {
-  background-color: var(--wa-form-control-activated-color);
-  transform: scale(1.25);
-}
-
-/* Focus styles */
-.slides:focus-visible,
-.navigation-button:focus-visible,
-.pagination-item:focus-visible {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}

packages/webawesome/src/components/carousel/carousel.styles.ts

@@ -0,0 +1,158 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --aspect-ratio: 16 / 9;
+    --scroll-hint: 0px;
+    --slide-gap: var(--wa-space-m, 1rem); /* fallback value is necessary */
+
+    display: flex;
+  }
+
+  .carousel {
+    display: grid;
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: 1fr min-content;
+    grid-template-areas:
+      '. slides .'
+      '. pagination .';
+    gap: var(--wa-space-m);
+    align-items: center;
+    min-height: 100%;
+    min-width: 100%;
+    position: relative;
+  }
+
+  .pagination {
+    grid-area: pagination;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--wa-space-s);
+  }
+
+  .slides {
+    grid-area: slides;
+
+    display: grid;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-items: center;
+    overflow: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+    aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
+    border-radius: var(--wa-border-radius-m);
+
+    --slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
+  }
+
+  @media (prefers-reduced-motion) {
+    :where(.slides) {
+      scroll-behavior: auto;
+    }
+  }
+
+  .slides-horizontal {
+    grid-auto-flow: column;
+    grid-auto-columns: var(--slide-size);
+    grid-auto-rows: 100%;
+    column-gap: var(--slide-gap);
+    scroll-snap-type: x mandatory;
+    scroll-padding-inline: var(--scroll-hint);
+    padding-inline: var(--scroll-hint);
+    overflow-y: hidden;
+  }
+
+  .slides-vertical {
+    grid-auto-flow: row;
+    grid-auto-columns: 100%;
+    grid-auto-rows: var(--slide-size);
+    row-gap: var(--slide-gap);
+    scroll-snap-type: y mandatory;
+    scroll-padding-block: var(--scroll-hint);
+    padding-block: var(--scroll-hint);
+    overflow-x: hidden;
+  }
+
+  .slides-dragging,
+  .slides-dropping {
+    scroll-snap-type: unset;
+  }
+
+  :host([vertical]) ::slotted(wa-carousel-item) {
+    height: 100%;
+  }
+
+  .slides::-webkit-scrollbar {
+    display: none;
+  }
+
+  .navigation {
+    grid-area: navigation;
+    display: contents;
+    font-size: var(--wa-font-size-l);
+  }
+
+  .navigation-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: var(--wa-border-radius-m);
+    font-size: inherit;
+    color: var(--wa-color-text-quiet);
+    padding: var(--wa-space-xs);
+    cursor: pointer;
+    transition: var(--wa-transition-normal) color;
+    appearance: none;
+  }
+
+  .navigation-button-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .navigation-button-disabled::part(base) {
+    pointer-events: none;
+  }
+
+  .navigation-button-previous {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .navigation-button-next {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .pagination-item {
+    display: block;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--wa-border-radius-circle);
+    width: var(--wa-space-s);
+    height: var(--wa-space-s);
+    background-color: var(--wa-color-neutral-fill-normal);
+    padding: 0;
+    margin: 0;
+    transition: transform var(--wa-transition-slow);
+  }
+
+  .pagination-item-active {
+    background-color: var(--wa-form-control-activated-color);
+    transform: scale(1.25);
+  }
+
+  /* Focus styles */
+  .slides:focus-visible,
+  .navigation-button:focus-visible,
+  .pagination-item:focus-visible {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+`;

packages/webawesome/src/components/carousel/carousel.ts

@@ -16,7 +16,7 @@ import { LocalizeController } from '../../utilities/localize.js';
 import type WaCarouselItem from '../carousel-item/carousel-item.js';
 import '../icon/icon.js';
 import { AutoplayController } from './autoplay-controller.js';
-import styles from './carousel.css';
+import styles from './carousel.styles.js';
 
 /**
  * @summary Carousels display an arbitrary number of content slides along a horizontal or vertical axis.

packages/webawesome/src/components/checkbox/checkbox.css

@@ -1,100 +0,0 @@
-:host {
-  --checked-icon-color: var(--wa-color-brand-on-loud);
-  --checked-icon-scale: 0.8;
-
-  display: inline-flex;
-  color: var(--wa-form-control-value-color);
-  font-family: inherit;
-  font-weight: var(--wa-form-control-value-font-weight);
-  line-height: var(--wa-form-control-value-line-height);
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-[part~='control'] {
-  display: inline-flex;
-  flex: 0 0 auto;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  width: var(--wa-form-control-toggle-size);
-  height: var(--wa-form-control-toggle-size);
-  border-color: var(--wa-form-control-border-color);
-  border-radius: min(
-    calc(var(--wa-form-control-toggle-size) * 0.375),
-    var(--wa-border-radius-s)
-  ); /* min prevents entirely circular checkbox */
-  border-style: var(--wa-border-style);
-  border-width: var(--wa-form-control-border-width);
-  background-color: var(--wa-form-control-background-color);
-  transition:
-    background var(--wa-transition-normal),
-    border-color var(--wa-transition-fast),
-    box-shadow var(--wa-transition-fast),
-    color var(--wa-transition-fast);
-  transition-timing-function: var(--wa-transition-easing);
-
-  margin-inline-end: 0.5em;
-}
-
-[part~='base'] {
-  display: flex;
-  align-items: flex-start;
-  position: relative;
-  color: currentColor;
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-[part~='label'] {
-  display: inline;
-}
-
-/* Checked */
-[part~='control']:has(:checked, :indeterminate) {
-  color: var(--checked-icon-color);
-  border-color: var(--wa-form-control-activated-color);
-  background-color: var(--wa-form-control-activated-color);
-}
-
-/* Focus */
-[part~='control']:has(> input:focus-visible:not(:disabled)) {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}
-
-/* Disabled */
-:host [part~='base']:has(input:disabled) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-input {
-  position: absolute;
-  padding: 0;
-  margin: 0;
-  height: 100%;
-  width: 100%;
-  opacity: 0;
-  pointer-events: none;
-}
-
-[part~='icon'] {
-  display: flex;
-  scale: var(--checked-icon-scale);
-
-  /* Without this, Safari renders the icon slightly to the left */
-  &::part(svg) {
-    translate: 0.0009765625em;
-  }
-
-  input:not(:checked, :indeterminate) + & {
-    visibility: hidden;
-  }
-}
-
-:host([required]) [part~='label']::after {
-  content: var(--wa-form-control-required-content);
-  color: var(--wa-form-control-required-content-color);
-  margin-inline-start: var(--wa-form-control-required-content-offset);
-}

packages/webawesome/src/components/checkbox/checkbox.styles.ts

@@ -0,0 +1,104 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --checked-icon-color: var(--wa-color-brand-on-loud);
+    --checked-icon-scale: 0.8;
+
+    display: inline-flex;
+    color: var(--wa-form-control-value-color);
+    font-family: inherit;
+    font-weight: var(--wa-form-control-value-font-weight);
+    line-height: var(--wa-form-control-value-line-height);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  [part~='control'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: var(--wa-form-control-toggle-size);
+    height: var(--wa-form-control-toggle-size);
+    border-color: var(--wa-form-control-border-color);
+    border-radius: min(
+      calc(var(--wa-form-control-toggle-size) * 0.375),
+      var(--wa-border-radius-s)
+    ); /* min prevents entirely circular checkbox */
+    border-style: var(--wa-border-style);
+    border-width: var(--wa-form-control-border-width);
+    background-color: var(--wa-form-control-background-color);
+    transition:
+      background var(--wa-transition-normal),
+      border-color var(--wa-transition-fast),
+      box-shadow var(--wa-transition-fast),
+      color var(--wa-transition-fast);
+    transition-timing-function: var(--wa-transition-easing);
+
+    margin-inline-end: 0.5em;
+  }
+
+  [part~='base'] {
+    display: flex;
+    align-items: flex-start;
+    position: relative;
+    color: currentColor;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  [part~='label'] {
+    display: inline;
+  }
+
+  /* Checked */
+  [part~='control']:has(:checked, :indeterminate) {
+    color: var(--checked-icon-color);
+    border-color: var(--wa-form-control-activated-color);
+    background-color: var(--wa-form-control-activated-color);
+  }
+
+  /* Focus */
+  [part~='control']:has(> input:focus-visible:not(:disabled)) {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  /* Disabled */
+  :host [part~='base']:has(input:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  input {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  [part~='icon'] {
+    display: flex;
+    scale: var(--checked-icon-scale);
+
+    /* Without this, Safari renders the icon slightly to the left */
+    &::part(svg) {
+      translate: 0.0009765625em;
+    }
+
+    input:not(:checked, :indeterminate) + & {
+      visibility: hidden;
+    }
+  }
+
+  :host([required]) [part~='label']::after {
+    content: var(--wa-form-control-required-content);
+    color: var(--wa-form-control-required-content-color);
+    margin-inline-start: var(--wa-form-control-required-content-offset);
+  }
+`;

packages/webawesome/src/components/checkbox/checkbox.ts

@@ -8,10 +8,10 @@ import { HasSlotController } from '../../internal/slot.js';
 import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
-import formControlStyles from '../../styles/component/form-control.css';
+import formControlStyles from '../../styles/component/form-control.styles.js';
-import sizeStyles from '../../styles/utilities/size.css';
+import sizeStyles from '../../styles/component/size.styles.js';
 import '../icon/icon.js';
-import styles from './checkbox.css';
+import styles from './checkbox.styles.js';
 
 /**
  * @summary Checkboxes allow the user to toggle an option on or off.

packages/webawesome/src/components/color-picker/color-picker.css

@@ -1,341 +0,0 @@
-:host {
-  --grid-width: 17em;
-  --grid-height: 12em;
-  --grid-handle-size: 1.25em;
-  --slider-height: 1em;
-  --slider-handle-size: calc(var(--slider-height) + 0.25em);
-}
-
-.color-picker {
-  background-color: var(--wa-color-surface-raised);
-  border-radius: var(--wa-border-radius-m);
-  border-style: var(--wa-border-style);
-  border-width: var(--wa-border-width-s);
-  border-color: var(--wa-color-surface-border);
-  box-shadow: var(--wa-shadow-m);
-  color: var(--color);
-  font: inherit;
-  font-size: inherit;
-  user-select: none;
-  width: var(--grid-width);
-  -webkit-user-select: none;
-}
-
-.grid {
-  position: relative;
-  height: var(--grid-height);
-  background-image:
-    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
-    linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
-  border-top-left-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
-  border-top-right-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
-  cursor: crosshair;
-  forced-color-adjust: none;
-}
-
-.grid-handle {
-  position: absolute;
-  width: var(--grid-handle-size);
-  height: var(--grid-handle-size);
-  border-radius: var(--wa-border-radius-circle);
-  box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
-  border: solid 0.125rem white;
-  margin-top: calc(var(--grid-handle-size) / -2);
-  margin-left: calc(var(--grid-handle-size) / -2);
-  transition: scale var(--wa-transition-normal) var(--wa-transition-easing);
-}
-
-.grid-handle-dragging {
-  cursor: none;
-  scale: 1.5;
-}
-
-.grid-handle:focus-visible {
-  outline: var(--wa-focus-ring);
-}
-
-.controls {
-  padding: 0.75em;
-  display: flex;
-  align-items: center;
-}
-
-.sliders {
-  flex: 1 1 auto;
-}
-
-.slider {
-  position: relative;
-  height: var(--slider-height);
-  border-radius: var(--wa-border-radius-s);
-  box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
-  forced-color-adjust: none;
-}
-
-.slider:not(:last-of-type) {
-  margin-bottom: 0.75em;
-}
-
-.slider-handle {
-  position: absolute;
-  top: calc(50% - var(--slider-handle-size) / 2);
-  width: var(--slider-handle-size);
-  height: var(--slider-handle-size);
-  border-radius: var(--wa-border-radius-circle);
-  border: solid 0.125rem white;
-  box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
-  margin-left: calc(var(--slider-handle-size) / -2);
-}
-
-.slider-handle:focus-visible {
-  outline: var(--wa-focus-ring);
-}
-
-.hue {
-  background-image: linear-gradient(
-    to right,
-    rgb(255, 0, 0) 0%,
-    rgb(255, 255, 0) 17%,
-    rgb(0, 255, 0) 33%,
-    rgb(0, 255, 255) 50%,
-    rgb(0, 0, 255) 67%,
-    rgb(255, 0, 255) 83%,
-    rgb(255, 0, 0) 100%
-  );
-}
-
-.alpha .alpha-gradient {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-}
-
-.preview {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: 3em;
-  height: 3em;
-  border: none;
-  border-radius: var(--wa-border-radius-circle);
-  background: none;
-  font-size: inherit;
-  margin-inline-start: 0.75em;
-  cursor: copy;
-  forced-color-adjust: none;
-}
-
-.preview:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
-
-  /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */
-  background-color: var(--preview-color);
-}
-
-.preview:focus-visible {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}
-
-.preview-color {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: solid 0.0625rem rgba(0, 0, 0, 0.125);
-}
-
-.preview-color-copied {
-  animation: pulse 850ms;
-}
-
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 var(--wa-color-brand-fill-loud);
-  }
-  70% {
-    box-shadow: 0 0 0 0.5rem transparent;
-  }
-  100% {
-    box-shadow: 0 0 0 0 transparent;
-  }
-}
-
-.user-input {
-  display: flex;
-  align-items: center;
-  padding: 0 0.75em 0.75em 0.75em;
-}
-
-.user-input wa-input {
-  min-width: 0; /* fix input width in Safari */
-  flex: 1 1 auto;
-
-  &::part(form-control-label) {
-    /* Visually hidden */
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    clip: rect(0 0 0 0) !important;
-    clip-path: inset(50%) !important;
-    border: none !important;
-    overflow: hidden !important;
-    white-space: nowrap !important;
-    padding: 0 !important;
-  }
-}
-
-.user-input wa-button-group {
-  margin-inline-start: 0.75em;
-
-  &::part(base) {
-    flex-wrap: nowrap;
-  }
-}
-
-.user-input wa-button:first-of-type {
-  min-width: 3em;
-  max-width: 3em;
-}
-
-.swatches {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(1.5em, 100%), 1fr));
-  grid-gap: 0.5em;
-  justify-items: center;
-  border-block-start: var(--wa-form-control-border-style) var(--wa-form-control-border-width)
-    var(--wa-color-surface-border);
-  padding: 0.5em;
-  forced-color-adjust: none;
-}
-
-.swatch {
-  position: relative;
-  aspect-ratio: 1 / 1;
-  width: 100%;
-  border-radius: var(--wa-border-radius-s);
-}
-
-.swatch .swatch-color {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: solid 0.0625rem rgba(0, 0, 0, 0.125);
-  border-radius: inherit;
-  cursor: pointer;
-}
-
-.swatch:focus-visible {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}
-
-.transparent-bg {
-  background-image:
-    linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
-    linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
-    linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%);
-  background-size: 0.5rem 0.5rem;
-  background-position:
-    0 0,
-    0 0,
-    -0.25rem -0.25rem,
-    0.25rem 0.25rem;
-}
-
-:host([disabled]) {
-  opacity: 0.5;
-  cursor: not-allowed;
-
-  .grid,
-  .grid-handle,
-  .slider,
-  .slider-handle,
-  .preview,
-  .swatch,
-  .swatch-color {
-    pointer-events: none;
-  }
-}
-
-/*
- * Color dropdown
- */
-
-.color-dropdown {
-  display: contents;
-}
-
-.color-dropdown::part(panel) {
-  max-height: none;
-  background-color: var(--wa-color-surface-raised);
-  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
-  border-radius: var(--wa-border-radius-m);
-  overflow: visible;
-}
-
-.trigger {
-  display: block;
-  position: relative;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: inherit;
-  forced-color-adjust: none;
-  width: var(--wa-form-control-height);
-  height: var(--wa-form-control-height);
-  border-radius: var(--wa-form-control-border-radius);
-}
-
-.trigger:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  background-color: currentColor;
-  box-shadow:
-    inset 0 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-color),
-    inset 0 0 0 calc(var(--wa-form-control-border-width) * 3) var(--wa-color-surface-default);
-}
-
-.trigger-empty:before {
-  background-color: transparent;
-}
-
-.trigger:focus-visible {
-  outline: none;
-}
-
-.trigger:focus-visible:not(.trigger:disabled) {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}
-
-:host([disabled]) :is(.label, .trigger) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.form-control.form-control-has-label .label {
-  cursor: pointer;
-  display: inline-block;
-}

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

@@ -0,0 +1,345 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --grid-width: 17em;
+    --grid-height: 12em;
+    --grid-handle-size: 1.25em;
+    --slider-height: 1em;
+    --slider-handle-size: calc(var(--slider-height) + 0.25em);
+  }
+
+  .color-picker {
+    background-color: var(--wa-color-surface-raised);
+    border-radius: var(--wa-border-radius-m);
+    border-style: var(--wa-border-style);
+    border-width: var(--wa-border-width-s);
+    border-color: var(--wa-color-surface-border);
+    box-shadow: var(--wa-shadow-m);
+    color: var(--color);
+    font: inherit;
+    font-size: inherit;
+    user-select: none;
+    width: var(--grid-width);
+    -webkit-user-select: none;
+  }
+
+  .grid {
+    position: relative;
+    height: var(--grid-height);
+    background-image:
+      linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
+      linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    border-top-left-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
+    border-top-right-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
+    cursor: crosshair;
+    forced-color-adjust: none;
+  }
+
+  .grid-handle {
+    position: absolute;
+    width: var(--grid-handle-size);
+    height: var(--grid-handle-size);
+    border-radius: var(--wa-border-radius-circle);
+    box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
+    border: solid 0.125rem white;
+    margin-top: calc(var(--grid-handle-size) / -2);
+    margin-left: calc(var(--grid-handle-size) / -2);
+    transition: scale var(--wa-transition-normal) var(--wa-transition-easing);
+  }
+
+  .grid-handle-dragging {
+    cursor: none;
+    scale: 1.5;
+  }
+
+  .grid-handle:focus-visible {
+    outline: var(--wa-focus-ring);
+  }
+
+  .controls {
+    padding: 0.75em;
+    display: flex;
+    align-items: center;
+  }
+
+  .sliders {
+    flex: 1 1 auto;
+  }
+
+  .slider {
+    position: relative;
+    height: var(--slider-height);
+    border-radius: var(--wa-border-radius-s);
+    box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
+    forced-color-adjust: none;
+  }
+
+  .slider:not(:last-of-type) {
+    margin-bottom: 0.75em;
+  }
+
+  .slider-handle {
+    position: absolute;
+    top: calc(50% - var(--slider-handle-size) / 2);
+    width: var(--slider-handle-size);
+    height: var(--slider-handle-size);
+    border-radius: var(--wa-border-radius-circle);
+    border: solid 0.125rem white;
+    box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
+    margin-left: calc(var(--slider-handle-size) / -2);
+  }
+
+  .slider-handle:focus-visible {
+    outline: var(--wa-focus-ring);
+  }
+
+  .hue {
+    background-image: linear-gradient(
+      to right,
+      rgb(255, 0, 0) 0%,
+      rgb(255, 255, 0) 17%,
+      rgb(0, 255, 0) 33%,
+      rgb(0, 255, 255) 50%,
+      rgb(0, 0, 255) 67%,
+      rgb(255, 0, 255) 83%,
+      rgb(255, 0, 0) 100%
+    );
+  }
+
+  .alpha .alpha-gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  .preview {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 3em;
+    height: 3em;
+    border: none;
+    border-radius: var(--wa-border-radius-circle);
+    background: none;
+    font-size: inherit;
+    margin-inline-start: 0.75em;
+    cursor: copy;
+    forced-color-adjust: none;
+  }
+
+  .preview:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
+
+    /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */
+    background-color: var(--preview-color);
+  }
+
+  .preview:focus-visible {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  .preview-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 0.0625rem rgba(0, 0, 0, 0.125);
+  }
+
+  .preview-color-copied {
+    animation: pulse 850ms;
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--wa-color-brand-fill-loud);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  .user-input {
+    display: flex;
+    align-items: center;
+    padding: 0 0.75em 0.75em 0.75em;
+  }
+
+  .user-input wa-input {
+    min-width: 0; /* fix input width in Safari */
+    flex: 1 1 auto;
+
+    &::part(form-control-label) {
+      /* Visually hidden */
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      clip: rect(0 0 0 0) !important;
+      clip-path: inset(50%) !important;
+      border: none !important;
+      overflow: hidden !important;
+      white-space: nowrap !important;
+      padding: 0 !important;
+    }
+  }
+
+  .user-input wa-button-group {
+    margin-inline-start: 0.75em;
+
+    &::part(base) {
+      flex-wrap: nowrap;
+    }
+  }
+
+  .user-input wa-button:first-of-type {
+    min-width: 3em;
+    max-width: 3em;
+  }
+
+  .swatches {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(1.5em, 100%), 1fr));
+    grid-gap: 0.5em;
+    justify-items: center;
+    border-block-start: var(--wa-form-control-border-style) var(--wa-form-control-border-width)
+      var(--wa-color-surface-border);
+    padding: 0.5em;
+    forced-color-adjust: none;
+  }
+
+  .swatch {
+    position: relative;
+    aspect-ratio: 1 / 1;
+    width: 100%;
+    border-radius: var(--wa-border-radius-s);
+  }
+
+  .swatch .swatch-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 0.0625rem rgba(0, 0, 0, 0.125);
+    border-radius: inherit;
+    cursor: pointer;
+  }
+
+  .swatch:focus-visible {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  .transparent-bg {
+    background-image:
+      linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
+      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
+      linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%);
+    background-size: 0.5rem 0.5rem;
+    background-position:
+      0 0,
+      0 0,
+      -0.25rem -0.25rem,
+      0.25rem 0.25rem;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .grid,
+    .grid-handle,
+    .slider,
+    .slider-handle,
+    .preview,
+    .swatch,
+    .swatch-color {
+      pointer-events: none;
+    }
+  }
+
+  /*
+   * Color dropdown
+   */
+
+  .color-dropdown {
+    display: contents;
+  }
+
+  .color-dropdown::part(panel) {
+    max-height: none;
+    background-color: var(--wa-color-surface-raised);
+    border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
+    border-radius: var(--wa-border-radius-m);
+    overflow: visible;
+  }
+
+  .trigger {
+    display: block;
+    position: relative;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: inherit;
+    forced-color-adjust: none;
+    width: var(--wa-form-control-height);
+    height: var(--wa-form-control-height);
+    border-radius: var(--wa-form-control-border-radius);
+  }
+
+  .trigger:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: currentColor;
+    box-shadow:
+      inset 0 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-color),
+      inset 0 0 0 calc(var(--wa-form-control-border-width) * 3) var(--wa-color-surface-default);
+  }
+
+  .trigger-empty:before {
+    background-color: transparent;
+  }
+
+  .trigger:focus-visible {
+    outline: none;
+  }
+
+  .trigger:focus-visible:not(.trigger:disabled) {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  :host([disabled]) :is(.label, .trigger) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .form-control.form-control-has-label .label {
+    cursor: pointer;
+    display: inline-block;
+  }
+`;

packages/webawesome/src/components/color-picker/color-picker.ts

@@ -14,9 +14,9 @@ import { HasSlotController } from '../../internal/slot.js';
 import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
-import formControlStyles from '../../styles/component/form-control.css';
+import formControlStyles from '../../styles/component/form-control.styles.js';
-import sizeStyles from '../../styles/utilities/size.css';
+import sizeStyles from '../../styles/component/size.styles.js';
-import visuallyHidden from '../../styles/utilities/visually-hidden.css';
+import visuallyHidden from '../../styles/component/visually-hidden.styles.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../button-group/button-group.js';
 import '../button/button.js';
@@ -25,7 +25,7 @@ import '../input/input.js';
 import type WaInput from '../input/input.js';
 import '../popup/popup.js';
 import type WaPopup from '../popup/popup.js';
-import styles from './color-picker.css';
+import styles from './color-picker.styles.js';
 
 interface EyeDropperConstructor {
   new (): EyeDropperInterface;

packages/webawesome/src/components/comparison/comparison.css

@@ -1,76 +0,0 @@
-:host {
-  --divider-width: 0.125rem;
-  --handle-size: 2.5rem;
-
-  display: block;
-  position: relative;
-  max-width: 100%;
-  max-height: 100%;
-  overflow: hidden;
-}
-
-.before,
-.after {
-  display: block;
-
-  &::slotted(img),
-  &::slotted(svg) {
-    display: block;
-    max-width: 100% !important;
-    height: auto;
-  }
-
-  &::slotted(:not(img, svg)) {
-    isolation: isolate;
-  }
-}
-
-.after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-
-/* Disable pointer-events while dragging. This is especially important for iframes. */
-:host(:state(dragging)) {
-  .before,
-  .after {
-    pointer-events: none;
-  }
-}
-
-.divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  width: var(--divider-width);
-  height: 100%;
-  background-color: var(--wa-color-surface-default);
-  translate: calc(var(--divider-width) / -2);
-  cursor: ew-resize;
-}
-
-.handle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: calc(50% - (var(--handle-size) / 2));
-  width: var(--handle-size);
-  height: var(--handle-size);
-  background-color: var(--wa-color-surface-default);
-  border-radius: var(--wa-border-radius-circle);
-  font-size: calc(var(--handle-size) * 0.4);
-  color: var(--wa-color-neutral-on-quiet);
-  cursor: inherit;
-  z-index: 10;
-}
-
-.handle:focus-visible {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}

packages/webawesome/src/components/comparison/comparison.styles.ts

@@ -0,0 +1,80 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --divider-width: 0.125rem;
+    --handle-size: 2.5rem;
+
+    display: block;
+    position: relative;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+  }
+
+  .before,
+  .after {
+    display: block;
+
+    &::slotted(img),
+    &::slotted(svg) {
+      display: block;
+      max-width: 100% !important;
+      height: auto;
+    }
+
+    &::slotted(:not(img, svg)) {
+      isolation: isolate;
+    }
+  }
+
+  .after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  /* Disable pointer-events while dragging. This is especially important for iframes. */
+  :host(:state(dragging)) {
+    .before,
+    .after {
+      pointer-events: none;
+    }
+  }
+
+  .divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    width: var(--divider-width);
+    height: 100%;
+    background-color: var(--wa-color-surface-default);
+    translate: calc(var(--divider-width) / -2);
+    cursor: ew-resize;
+  }
+
+  .handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: calc(50% - (var(--handle-size) / 2));
+    width: var(--handle-size);
+    height: var(--handle-size);
+    background-color: var(--wa-color-surface-default);
+    border-radius: var(--wa-border-radius-circle);
+    font-size: calc(var(--handle-size) * 0.4);
+    color: var(--wa-color-neutral-on-quiet);
+    cursor: inherit;
+    z-index: 10;
+  }
+
+  .handle:focus-visible {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+`;

packages/webawesome/src/components/comparison/comparison.ts

@@ -7,7 +7,7 @@ import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
-import styles from './comparison.css';
+import styles from './comparison.styles.js';
 
 /**
  * @summary Compare visual differences between similar content with a sliding panel.

packages/webawesome/src/components/copy-button/copy-button.css

@@ -1,75 +0,0 @@
-:host {
-  display: inline-block;
-  color: var(--wa-color-neutral-on-quiet);
-}
-
-.button {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--wa-form-control-border-radius);
-  color: inherit;
-  font-size: inherit;
-  padding: 0.5em;
-  cursor: pointer;
-  transition: color var(--wa-transition-fast) var(--wa-transition-easing);
-}
-
-@media (hover: hover) {
-  .button:hover:not([disabled]) {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
-  }
-}
-
-.button:focus-visible:not([disabled]) {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
-}
-
-.button:active:not([disabled]) {
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
-}
-
-slot[name='success-icon'] {
-  color: var(--wa-color-success-on-quiet);
-}
-
-slot[name='error-icon'] {
-  color: var(--wa-color-danger-on-quiet);
-}
-
-.button:focus-visible {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}
-
-.button[disabled] {
-  opacity: 0.5;
-  cursor: not-allowed !important;
-}
-
-slot {
-  display: inline-flex;
-}
-
-.show {
-  animation: show 100ms ease;
-}
-
-.hide {
-  animation: show 100ms ease reverse;
-}
-
-@keyframes show {
-  from {
-    scale: 0.25;
-    opacity: 0.25;
-  }
-  to {
-    scale: 1;
-    opacity: 1;
-  }
-}

packages/webawesome/src/components/copy-button/copy-button.styles.ts

@@ -0,0 +1,79 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: inline-block;
+    color: var(--wa-color-neutral-on-quiet);
+  }
+
+  .button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    border: none;
+    border-radius: var(--wa-form-control-border-radius);
+    color: inherit;
+    font-size: inherit;
+    padding: 0.5em;
+    cursor: pointer;
+    transition: color var(--wa-transition-fast) var(--wa-transition-easing);
+  }
+
+  @media (hover: hover) {
+    .button:hover:not([disabled]) {
+      background-color: var(--wa-color-neutral-fill-quiet);
+      color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+    }
+  }
+
+  .button:focus-visible:not([disabled]) {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  }
+
+  .button:active:not([disabled]) {
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
+  }
+
+  slot[name='success-icon'] {
+    color: var(--wa-color-success-on-quiet);
+  }
+
+  slot[name='error-icon'] {
+    color: var(--wa-color-danger-on-quiet);
+  }
+
+  .button:focus-visible {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  .button[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed !important;
+  }
+
+  slot {
+    display: inline-flex;
+  }
+
+  .show {
+    animation: show 100ms ease;
+  }
+
+  .hide {
+    animation: show 100ms ease reverse;
+  }
+
+  @keyframes show {
+    from {
+      scale: 0.25;
+      opacity: 0.25;
+    }
+    to {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+`;

packages/webawesome/src/components/copy-button/copy-button.ts

@@ -5,12 +5,12 @@ import { WaCopyEvent } from '../../events/copy.js';
 import { WaErrorEvent } from '../../events/error.js';
 import { animateWithClass } from '../../internal/animate.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import visuallyHidden from '../../styles/utilities/visually-hidden.css';
+import visuallyHidden from '../../styles/component/visually-hidden.styles.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import '../tooltip/tooltip.js';
 import type WaTooltip from '../tooltip/tooltip.js';
-import styles from './copy-button.css';
+import styles from './copy-button.styles.js';
 
 /**
  * @summary Copies text data to the clipboard when the user clicks the trigger.

packages/webawesome/src/components/details/details.css

@@ -1,122 +0,0 @@
-:host {
-  --spacing: var(--wa-space-m);
-  --show-duration: 200ms;
-  --hide-duration: 200ms;
-
-  display: block;
-}
-
-details {
-  display: block;
-  overflow-anchor: none;
-  border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
-  background-color: var(--wa-color-surface-default);
-  border-radius: var(--wa-panel-border-radius);
-  color: var(--wa-color-text-normal);
-
-  /* Print styles */
-  @media print {
-    background: none;
-    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
-
-    summary {
-      list-style: none;
-    }
-  }
-}
-
-/* Appearance modifiers */
-:host([appearance='plain']) details {
-  background-color: transparent;
-  border-color: transparent;
-  border-radius: 0;
-}
-
-:host([appearance='outlined']) details {
-  background-color: var(--wa-color-surface-default);
-  border-color: var(--wa-color-surface-border);
-}
-
-:host([appearance='filled']) details {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-color: transparent;
-}
-
-:host([appearance='filled-outlined']) details {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-color: var(--wa-color-neutral-border-quiet);
-}
-
-:host([disabled]) details {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-summary {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing);
-  padding: var(--spacing); /* Add padding here */
-  border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-
-  &::marker,
-  &::-webkit-details-marker {
-    display: none;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: var(--wa-focus-ring);
-    outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));
-  }
-}
-
-:host([open]) summary {
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
-}
-
-/* 'Start' icon placement */
-:host([icon-placement='start']) summary {
-  flex-direction: row-reverse;
-  justify-content: start;
-}
-
-[part~='icon'] {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  color: var(--wa-color-text-quiet);
-  transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
-}
-
-:host([open]) [part~='icon'] {
-  rotate: 90deg;
-}
-
-:host([open]:dir(rtl)) [part~='icon'] {
-  rotate: -90deg;
-}
-
-:host([open]) slot[name='expand-icon'],
-:host(:not([open])) slot[name='collapse-icon'] {
-  display: none;
-}
-
-.body.animating {
-  overflow: hidden;
-}
-
-.content {
-  display: block;
-  padding-block-start: var(--spacing);
-  padding-inline: var(--spacing); /* Add horizontal padding */
-  padding-block-end: var(--spacing); /* Add bottom padding */
-}

packages/webawesome/src/components/details/details.styles.ts

@@ -0,0 +1,126 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --spacing: var(--wa-space-m);
+    --show-duration: 200ms;
+    --hide-duration: 200ms;
+
+    display: block;
+  }
+
+  details {
+    display: block;
+    overflow-anchor: none;
+    border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
+    background-color: var(--wa-color-surface-default);
+    border-radius: var(--wa-panel-border-radius);
+    color: var(--wa-color-text-normal);
+
+    /* Print styles */
+    @media print {
+      background: none;
+      border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+
+      summary {
+        list-style: none;
+      }
+    }
+  }
+
+  /* Appearance modifiers */
+  :host([appearance='plain']) details {
+    background-color: transparent;
+    border-color: transparent;
+    border-radius: 0;
+  }
+
+  :host([appearance='outlined']) details {
+    background-color: var(--wa-color-surface-default);
+    border-color: var(--wa-color-surface-border);
+  }
+
+  :host([appearance='filled']) details {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-color: transparent;
+  }
+
+  :host([appearance='filled-outlined']) details {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-color: var(--wa-color-neutral-border-quiet);
+  }
+
+  :host([disabled]) details {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing);
+    padding: var(--spacing); /* Add padding here */
+    border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: pointer;
+
+    &::marker,
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--wa-focus-ring);
+      outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));
+    }
+  }
+
+  :host([open]) summary {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* 'Start' icon placement */
+  :host([icon-placement='start']) summary {
+    flex-direction: row-reverse;
+    justify-content: start;
+  }
+
+  [part~='icon'] {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    color: var(--wa-color-text-quiet);
+    transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
+  }
+
+  :host([open]) [part~='icon'] {
+    rotate: 90deg;
+  }
+
+  :host([open]:dir(rtl)) [part~='icon'] {
+    rotate: -90deg;
+  }
+
+  :host([open]) slot[name='expand-icon'],
+  :host(:not([open])) slot[name='collapse-icon'] {
+    display: none;
+  }
+
+  .body.animating {
+    overflow: hidden;
+  }
+
+  .content {
+    display: block;
+    padding-block-start: var(--spacing);
+    padding-inline: var(--spacing); /* Add horizontal padding */
+    padding-block-end: var(--spacing); /* Add bottom padding */
+  }
+`;

packages/webawesome/src/components/details/details.ts

@@ -13,7 +13,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
-import styles from './details.css';
+import styles from './details.styles.js';
 
 /**
  * @summary Details show a brief summary and expand to show additional content.

packages/webawesome/src/components/dialog/dialog.css

@@ -1,183 +0,0 @@
-:host {
-  --width: 31rem;
-  --spacing: var(--wa-space-l);
-  --show-duration: 200ms;
-  --hide-duration: 200ms;
-
-  display: none;
-}
-
-:host([open]) {
-  display: block;
-}
-
-.dialog {
-  display: flex;
-  flex-direction: column;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: var(--width);
-  max-width: calc(100% - var(--wa-space-2xl));
-  max-height: calc(100% - var(--wa-space-2xl));
-  background-color: var(--wa-color-surface-raised);
-  border-radius: var(--wa-panel-border-radius);
-  border: none;
-  box-shadow: var(--wa-shadow-l);
-  padding: 0;
-  margin: auto;
-
-  &.show {
-    animation: show-dialog var(--show-duration) ease;
-
-    &::backdrop {
-      animation: show-backdrop var(--show-duration, 200ms) ease;
-    }
-  }
-
-  &.hide {
-    animation: show-dialog var(--hide-duration) ease reverse;
-
-    &::backdrop {
-      animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
-    }
-  }
-
-  &.pulse {
-    animation: pulse 250ms ease;
-  }
-}
-
-.dialog:focus {
-  outline: none;
-}
-
-/* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
-@media screen and (max-width: 420px) {
-  .dialog {
-    max-height: 80vh;
-  }
-}
-
-.open {
-  display: flex;
-  opacity: 1;
-}
-
-.header {
-  flex: 0 0 auto;
-  display: flex;
-  flex-wrap: nowrap;
-
-  padding-inline-start: var(--spacing);
-  padding-block-end: 0;
-
-  /* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
-  padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block));
-  padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block));
-}
-
-.title {
-  align-self: center;
-  flex: 1 1 auto;
-  font-family: inherit;
-  font-size: var(--wa-font-size-l);
-  font-weight: var(--wa-font-weight-heading);
-  line-height: var(--wa-line-height-condensed);
-  margin: 0;
-}
-
-.header-actions {
-  align-self: start;
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  justify-content: end;
-  gap: var(--wa-space-2xs);
-  padding-inline-start: var(--spacing);
-}
-
-.header-actions wa-button,
-.header-actions ::slotted(wa-button) {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-}
-
-.body {
-  flex: 1 1 auto;
-  display: block;
-  padding: var(--spacing);
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: var(--wa-focus-ring);
-    outline-offset: var(--wa-focus-ring-offset);
-  }
-}
-
-.footer {
-  flex: 0 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--wa-space-xs);
-  justify-content: end;
-  padding: var(--spacing);
-  padding-block-start: 0;
-}
-
-.footer ::slotted(wa-button:not(:first-of-type)) {
-  margin-inline-start: var(--wa-spacing-xs);
-}
-
-.dialog::backdrop {
-  /*
-    NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
-    remove the fallback values here.
-  */
-  background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
-}
-
-@keyframes pulse {
-  0% {
-    scale: 1;
-  }
-  50% {
-    scale: 1.02;
-  }
-  100% {
-    scale: 1;
-  }
-}
-
-@keyframes show-dialog {
-  from {
-    opacity: 0;
-    scale: 0.8;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
-}
-
-@keyframes show-backdrop {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@media (forced-colors: active) {
-  .dialog {
-    border: solid 1px white;
-  }
-}

packages/webawesome/src/components/dialog/dialog.styles.ts

@@ -0,0 +1,187 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --width: 31rem;
+    --spacing: var(--wa-space-l);
+    --show-duration: 200ms;
+    --hide-duration: 200ms;
+
+    display: none;
+  }
+
+  :host([open]) {
+    display: block;
+  }
+
+  .dialog {
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--width);
+    max-width: calc(100% - var(--wa-space-2xl));
+    max-height: calc(100% - var(--wa-space-2xl));
+    background-color: var(--wa-color-surface-raised);
+    border-radius: var(--wa-panel-border-radius);
+    border: none;
+    box-shadow: var(--wa-shadow-l);
+    padding: 0;
+    margin: auto;
+
+    &.show {
+      animation: show-dialog var(--show-duration) ease;
+
+      &::backdrop {
+        animation: show-backdrop var(--show-duration, 200ms) ease;
+      }
+    }
+
+    &.hide {
+      animation: show-dialog var(--hide-duration) ease reverse;
+
+      &::backdrop {
+        animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
+      }
+    }
+
+    &.pulse {
+      animation: pulse 250ms ease;
+    }
+  }
+
+  .dialog:focus {
+    outline: none;
+  }
+
+  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
+  @media screen and (max-width: 420px) {
+    .dialog {
+      max-height: 80vh;
+    }
+  }
+
+  .open {
+    display: flex;
+    opacity: 1;
+  }
+
+  .header {
+    flex: 0 0 auto;
+    display: flex;
+    flex-wrap: nowrap;
+
+    padding-inline-start: var(--spacing);
+    padding-block-end: 0;
+
+    /* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
+    padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block));
+    padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block));
+  }
+
+  .title {
+    align-self: center;
+    flex: 1 1 auto;
+    font-family: inherit;
+    font-size: var(--wa-font-size-l);
+    font-weight: var(--wa-font-weight-heading);
+    line-height: var(--wa-line-height-condensed);
+    margin: 0;
+  }
+
+  .header-actions {
+    align-self: start;
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: var(--wa-space-2xs);
+    padding-inline-start: var(--spacing);
+  }
+
+  .header-actions wa-button,
+  .header-actions ::slotted(wa-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--wa-focus-ring);
+      outline-offset: var(--wa-focus-ring-offset);
+    }
+  }
+
+  .footer {
+    flex: 0 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wa-space-xs);
+    justify-content: end;
+    padding: var(--spacing);
+    padding-block-start: 0;
+  }
+
+  .footer ::slotted(wa-button:not(:first-of-type)) {
+    margin-inline-start: var(--wa-spacing-xs);
+  }
+
+  .dialog::backdrop {
+    /*
+      NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
+      remove the fallback values here.
+    */
+    background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
+  }
+
+  @keyframes pulse {
+    0% {
+      scale: 1;
+    }
+    50% {
+      scale: 1.02;
+    }
+    100% {
+      scale: 1;
+    }
+  }
+
+  @keyframes show-dialog {
+    from {
+      opacity: 0;
+      scale: 0.8;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes show-backdrop {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .dialog {
+      border: solid 1px white;
+    }
+  }
+`;

packages/webawesome/src/components/dialog/dialog.ts

@@ -13,7 +13,7 @@ import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../button/button.js';
-import styles from './dialog.css';
+import styles from './dialog.styles.js';
 
 /**
  * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.

packages/webawesome/src/components/divider/divider.css

@@ -1,19 +0,0 @@
-:host {
-  --color: var(--wa-color-surface-border);
-  --width: var(--wa-border-width-s);
-  --spacing: var(--wa-space-m);
-}
-
-:host(:not([orientation='vertical'])) {
-  display: block;
-  border-top: solid var(--width) var(--color);
-  margin: var(--spacing) 0;
-}
-
-:host([orientation='vertical']) {
-  display: inline-block;
-  height: 100%;
-  border-inline-start: solid var(--width) var(--color);
-  margin: 0 var(--spacing);
-  min-block-size: 1lh;
-}

packages/webawesome/src/components/divider/divider.styles.ts

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --color: var(--wa-color-surface-border);
+    --width: var(--wa-border-width-s);
+    --spacing: var(--wa-space-m);
+  }
+
+  :host(:not([orientation='vertical'])) {
+    display: block;
+    border-top: solid var(--width) var(--color);
+    margin: var(--spacing) 0;
+  }
+
+  :host([orientation='vertical']) {
+    display: inline-block;
+    height: 100%;
+    border-inline-start: solid var(--width) var(--color);
+    margin: 0 var(--spacing);
+    min-block-size: 1lh;
+  }
+`;

packages/webawesome/src/components/divider/divider.ts

@@ -1,7 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './divider.css';
+import styles from './divider.styles.js';
 
 /**
  * @summary Dividers are used to visually separate or group elements.

packages/webawesome/src/components/drawer/drawer.css

@@ -1,290 +0,0 @@
-:host {
-  --size: 25rem;
-  --spacing: var(--wa-space-l);
-  --show-duration: 200ms;
-  --hide-duration: 200ms;
-
-  display: none;
-}
-
-:host([open]) {
-  display: block;
-}
-
-.drawer {
-  display: flex;
-  flex-direction: column;
-  top: 0;
-  inset-inline-start: 0;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  overflow: hidden;
-  background-color: var(--wa-color-surface-raised);
-  border: none;
-  box-shadow: var(--wa-shadow-l);
-  overflow: auto;
-  padding: 0;
-  margin: 0;
-  animation-duration: var(--show-duration);
-  animation-timing-function: ease;
-
-  &.show::backdrop {
-    animation: show-backdrop var(--show-duration, 200ms) ease;
-  }
-
-  &.hide::backdrop {
-    animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
-  }
-
-  &.show.top {
-    animation: show-drawer-from-top var(--show-duration) ease;
-  }
-
-  &.hide.top {
-    animation: show-drawer-from-top var(--hide-duration) ease reverse;
-  }
-
-  &.show.end {
-    animation: show-drawer-from-end var(--show-duration) ease;
-
-    &:dir(rtl) {
-      animation-name: show-drawer-from-start;
-    }
-  }
-
-  &.hide.end {
-    animation: show-drawer-from-end var(--hide-duration) ease reverse;
-
-    &:dir(rtl) {
-      animation-name: show-drawer-from-start;
-    }
-  }
-
-  &.show.bottom {
-    animation: show-drawer-from-bottom var(--show-duration) ease;
-  }
-
-  &.hide.bottom {
-    animation: show-drawer-from-bottom var(--hide-duration) ease reverse;
-  }
-
-  &.show.start {
-    animation: show-drawer-from-start var(--show-duration) ease;
-
-    &:dir(rtl) {
-      animation-name: show-drawer-from-end;
-    }
-  }
-
-  &.hide.start {
-    animation: show-drawer-from-start var(--hide-duration) ease reverse;
-
-    &:dir(rtl) {
-      animation-name: show-drawer-from-end;
-    }
-  }
-
-  &.pulse {
-    animation: pulse 250ms ease;
-  }
-}
-
-.drawer:focus {
-  outline: none;
-}
-
-.top {
-  top: 0;
-  inset-inline-end: auto;
-  bottom: auto;
-  inset-inline-start: 0;
-  width: 100%;
-  height: var(--size);
-}
-
-.end {
-  top: 0;
-  inset-inline-end: 0;
-  bottom: auto;
-  inset-inline-start: auto;
-  width: var(--size);
-  height: 100%;
-}
-
-.bottom {
-  top: auto;
-  inset-inline-end: auto;
-  bottom: 0;
-  inset-inline-start: 0;
-  width: 100%;
-  height: var(--size);
-}
-
-.start {
-  top: 0;
-  inset-inline-end: auto;
-  bottom: auto;
-  inset-inline-start: 0;
-  width: var(--size);
-  height: 100%;
-}
-
-.header {
-  display: flex;
-  flex-wrap: nowrap;
-  padding-inline-start: var(--spacing);
-  padding-block-end: 0;
-
-  /* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
-  padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block));
-  padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block));
-}
-
-.title {
-  align-self: center;
-  flex: 1 1 auto;
-  font: inherit;
-  font-size: var(--wa-font-size-l);
-  font-weight: var(--wa-font-weight-heading);
-  line-height: var(--wa-line-height-condensed);
-  margin: 0;
-}
-
-.header-actions {
-  align-self: start;
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  justify-content: end;
-  gap: var(--wa-space-2xs);
-  padding-inline-start: var(--spacing);
-}
-
-.header-actions wa-button,
-.header-actions ::slotted(wa-button) {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-}
-
-.body {
-  flex: 1 1 auto;
-  display: block;
-  padding: var(--spacing);
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: var(--wa-focus-ring);
-    outline-offset: var(--wa-focus-ring-offset);
-  }
-}
-
-.footer {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--wa-space-xs);
-  justify-content: end;
-  padding: var(--spacing);
-  padding-block-start: 0;
-}
-
-.footer ::slotted(wa-button:not(:last-of-type)) {
-  margin-inline-end: var(--wa-spacing-xs);
-}
-
-.drawer::backdrop {
-  /*
-      NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
-      remove the fallback values here.
-    */
-  background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
-}
-
-@keyframes pulse {
-  0% {
-    scale: 1;
-  }
-  50% {
-    scale: 1.01;
-  }
-  100% {
-    scale: 1;
-  }
-}
-
-@keyframes show-drawer {
-  from {
-    opacity: 0;
-    scale: 0.8;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
-}
-
-@keyframes show-drawer-from-top {
-  from {
-    opacity: 0;
-    translate: 0 -100%;
-  }
-  to {
-    opacity: 1;
-    translate: 0 0;
-  }
-}
-
-@keyframes show-drawer-from-end {
-  from {
-    opacity: 0;
-    translate: 100%;
-  }
-  to {
-    opacity: 1;
-    translate: 0 0;
-  }
-}
-
-@keyframes show-drawer-from-bottom {
-  from {
-    opacity: 0;
-    translate: 0 100%;
-  }
-  to {
-    opacity: 1;
-    translate: 0 0;
-  }
-}
-
-@keyframes show-drawer-from-start {
-  from {
-    opacity: 0;
-    translate: -100% 0;
-  }
-  to {
-    opacity: 1;
-    translate: 0 0;
-  }
-}
-
-@keyframes show-backdrop {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@media (forced-colors: active) {
-  .drawer {
-    border: solid 1px white;
-  }
-}

packages/webawesome/src/components/drawer/drawer.styles.ts

@@ -0,0 +1,294 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --size: 25rem;
+    --spacing: var(--wa-space-l);
+    --show-duration: 200ms;
+    --hide-duration: 200ms;
+
+    display: none;
+  }
+
+  :host([open]) {
+    display: block;
+  }
+
+  .drawer {
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    background-color: var(--wa-color-surface-raised);
+    border: none;
+    box-shadow: var(--wa-shadow-l);
+    overflow: auto;
+    padding: 0;
+    margin: 0;
+    animation-duration: var(--show-duration);
+    animation-timing-function: ease;
+
+    &.show::backdrop {
+      animation: show-backdrop var(--show-duration, 200ms) ease;
+    }
+
+    &.hide::backdrop {
+      animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
+    }
+
+    &.show.top {
+      animation: show-drawer-from-top var(--show-duration) ease;
+    }
+
+    &.hide.top {
+      animation: show-drawer-from-top var(--hide-duration) ease reverse;
+    }
+
+    &.show.end {
+      animation: show-drawer-from-end var(--show-duration) ease;
+
+      &:dir(rtl) {
+        animation-name: show-drawer-from-start;
+      }
+    }
+
+    &.hide.end {
+      animation: show-drawer-from-end var(--hide-duration) ease reverse;
+
+      &:dir(rtl) {
+        animation-name: show-drawer-from-start;
+      }
+    }
+
+    &.show.bottom {
+      animation: show-drawer-from-bottom var(--show-duration) ease;
+    }
+
+    &.hide.bottom {
+      animation: show-drawer-from-bottom var(--hide-duration) ease reverse;
+    }
+
+    &.show.start {
+      animation: show-drawer-from-start var(--show-duration) ease;
+
+      &:dir(rtl) {
+        animation-name: show-drawer-from-end;
+      }
+    }
+
+    &.hide.start {
+      animation: show-drawer-from-start var(--hide-duration) ease reverse;
+
+      &:dir(rtl) {
+        animation-name: show-drawer-from-end;
+      }
+    }
+
+    &.pulse {
+      animation: pulse 250ms ease;
+    }
+  }
+
+  .drawer:focus {
+    outline: none;
+  }
+
+  .top {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .end {
+    top: 0;
+    inset-inline-end: 0;
+    bottom: auto;
+    inset-inline-start: auto;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .bottom {
+    top: auto;
+    inset-inline-end: auto;
+    bottom: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .start {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .header {
+    display: flex;
+    flex-wrap: nowrap;
+    padding-inline-start: var(--spacing);
+    padding-block-end: 0;
+
+    /* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
+    padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block));
+    padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block));
+  }
+
+  .title {
+    align-self: center;
+    flex: 1 1 auto;
+    font: inherit;
+    font-size: var(--wa-font-size-l);
+    font-weight: var(--wa-font-weight-heading);
+    line-height: var(--wa-line-height-condensed);
+    margin: 0;
+  }
+
+  .header-actions {
+    align-self: start;
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: var(--wa-space-2xs);
+    padding-inline-start: var(--spacing);
+  }
+
+  .header-actions wa-button,
+  .header-actions ::slotted(wa-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--wa-focus-ring);
+      outline-offset: var(--wa-focus-ring-offset);
+    }
+  }
+
+  .footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wa-space-xs);
+    justify-content: end;
+    padding: var(--spacing);
+    padding-block-start: 0;
+  }
+
+  .footer ::slotted(wa-button:not(:last-of-type)) {
+    margin-inline-end: var(--wa-spacing-xs);
+  }
+
+  .drawer::backdrop {
+    /*
+        NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
+        remove the fallback values here.
+      */
+    background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
+  }
+
+  @keyframes pulse {
+    0% {
+      scale: 1;
+    }
+    50% {
+      scale: 1.01;
+    }
+    100% {
+      scale: 1;
+    }
+  }
+
+  @keyframes show-drawer {
+    from {
+      opacity: 0;
+      scale: 0.8;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes show-drawer-from-top {
+    from {
+      opacity: 0;
+      translate: 0 -100%;
+    }
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  @keyframes show-drawer-from-end {
+    from {
+      opacity: 0;
+      translate: 100%;
+    }
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  @keyframes show-drawer-from-bottom {
+    from {
+      opacity: 0;
+      translate: 0 100%;
+    }
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  @keyframes show-drawer-from-start {
+    from {
+      opacity: 0;
+      translate: -100% 0;
+    }
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  @keyframes show-backdrop {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .drawer {
+      border: solid 1px white;
+    }
+  }
+`;

packages/webawesome/src/components/drawer/drawer.ts

@@ -13,7 +13,7 @@ import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../button/button.js';
-import styles from './drawer.css';
+import styles from './drawer.styles.js';
 
 /**
  * @summary Drawers slide in from a container to expose additional options and information.

packages/webawesome/src/components/dropdown-item/dropdown-item.css

@@ -1,227 +0,0 @@
-:host {
-  display: flex;
-  position: relative;
-  align-items: center;
-  padding: 0.5em 1em;
-  border-radius: var(--wa-border-radius-s);
-  isolation: isolate;
-  color: var(--wa-color-text-normal);
-  line-height: var(--wa-line-height-condensed);
-  cursor: pointer;
-  transition:
-    var(--wa-transition-fast) background-color var(--wa-transition-easing),
-    var(--wa-transition-fast) color var(--wa-transition-easing);
-}
-
-@media (hover: hover) {
-  :host(:hover:not(:state(disabled))) {
-    background-color: var(--wa-color-neutral-fill-normal);
-  }
-}
-
-:host(:focus-visible) {
-  z-index: 1;
-  outline: var(--wa-focus-ring);
-  background-color: var(--wa-color-neutral-fill-normal);
-}
-
-:host(:state(disabled)) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Danger variant */
-:host([variant='danger']),
-:host([variant='danger']) #details {
-  color: var(--wa-color-danger-on-quiet);
-}
-
-@media (hover: hover) {
-  :host([variant='danger']:hover) {
-    background-color: var(--wa-color-danger-fill-normal);
-    color: var(--wa-color-danger-on-normal);
-  }
-}
-
-:host([variant='danger']:focus-visible) {
-  background-color: var(--wa-color-danger-fill-normal);
-  color: var(--wa-color-danger-on-normal);
-}
-
-:host([checkbox-adjacent]) {
-  padding-inline-start: 2em;
-}
-
-/* Only add padding when item actually has a submenu */
-:host([submenu-adjacent]:not(:state(has-submenu))) #details {
-  padding-inline-end: 0;
-}
-
-:host(:state(has-submenu)[submenu-adjacent]) #details {
-  padding-inline-end: 1.75em;
-}
-
-#check {
-  visibility: hidden;
-  margin-inline-start: -1.5em;
-  margin-inline-end: 0.5em;
-  font-size: var(--wa-font-size-smaller);
-}
-
-:host(:state(checked)) #check {
-  visibility: visible;
-}
-
-#icon ::slotted(*) {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  margin-inline-end: 0.75em !important;
-  font-size: var(--wa-font-size-smaller);
-}
-
-#label {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-#details {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: end;
-  color: var(--wa-color-text-quiet);
-  font-size: var(--wa-font-size-smaller) !important;
-}
-
-#details ::slotted(*) {
-  margin-inline-start: 2em !important;
-}
-
-/* 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);
-}
-
-/* Flip chevron icon when RTL */
-:host(:dir(rtl)) #submenu-indicator {
-  transform: scaleX(-1);
-}
-
-/* Submenu styles */
-#submenu {
-  display: flex;
-  z-index: 10;
-  position: absolute;
-  top: 0;
-  left: 0;
-  flex-direction: column;
-  width: max-content;
-  margin: 0;
-  padding: 0.25em;
-  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
-  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);
-  text-align: start;
-  user-select: none;
-
-  /* Override default popover styles */
-  &[popover] {
-    margin: 0;
-    inset: auto;
-    padding: 0.25em;
-    overflow: visible;
-    border-radius: var(--wa-border-radius-m);
-  }
-
-  &.show {
-    animation: submenu-show var(--show-duration, 50ms) ease;
-  }
-
-  &.hide {
-    animation: submenu-show var(--show-duration, 50ms) ease reverse;
-  }
-
-  /* Submenu placement transform origins */
-  &[data-placement^='top'] {
-    transform-origin: bottom;
-  }
-
-  &[data-placement^='bottom'] {
-    transform-origin: top;
-  }
-
-  &[data-placement^='left'] {
-    transform-origin: right;
-  }
-
-  &[data-placement^='right'] {
-    transform-origin: left;
-  }
-
-  &[data-placement='left-start'] {
-    transform-origin: right top;
-  }
-
-  &[data-placement='left-end'] {
-    transform-origin: right bottom;
-  }
-
-  &[data-placement='right-start'] {
-    transform-origin: left top;
-  }
-
-  &[data-placement='right-end'] {
-    transform-origin: left bottom;
-  }
-
-  /* Safe triangle styling */
-  &::before {
-    display: none;
-    z-index: 9;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: transparent;
-    content: '';
-    clip-path: polygon(
-      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
-      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
-      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
-    );
-    pointer-events: auto; /* Enable mouse events on the triangle */
-  }
-
-  &[data-visible]::before {
-    display: block;
-  }
-}
-
-::slotted(wa-dropdown-item) {
-  font-size: inherit;
-}
-
-::slotted(wa-divider) {
-  --spacing: 0.25em;
-}
-
-@keyframes submenu-show {
-  from {
-    scale: 0.9;
-    opacity: 0;
-  }
-  to {
-    scale: 1;
-    opacity: 1;
-  }
-}

packages/webawesome/src/components/dropdown-item/dropdown-item.styles.ts

@@ -0,0 +1,231 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: flex;
+    position: relative;
+    align-items: center;
+    padding: 0.5em 1em;
+    border-radius: var(--wa-border-radius-s);
+    isolation: isolate;
+    color: var(--wa-color-text-normal);
+    line-height: var(--wa-line-height-condensed);
+    cursor: pointer;
+    transition:
+      var(--wa-transition-fast) background-color var(--wa-transition-easing),
+      var(--wa-transition-fast) color var(--wa-transition-easing);
+  }
+
+  @media (hover: hover) {
+    :host(:hover:not(:state(disabled))) {
+      background-color: var(--wa-color-neutral-fill-normal);
+    }
+  }
+
+  :host(:focus-visible) {
+    z-index: 1;
+    outline: var(--wa-focus-ring);
+    background-color: var(--wa-color-neutral-fill-normal);
+  }
+
+  :host(:state(disabled)) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Danger variant */
+  :host([variant='danger']),
+  :host([variant='danger']) #details {
+    color: var(--wa-color-danger-on-quiet);
+  }
+
+  @media (hover: hover) {
+    :host([variant='danger']:hover) {
+      background-color: var(--wa-color-danger-fill-normal);
+      color: var(--wa-color-danger-on-normal);
+    }
+  }
+
+  :host([variant='danger']:focus-visible) {
+    background-color: var(--wa-color-danger-fill-normal);
+    color: var(--wa-color-danger-on-normal);
+  }
+
+  :host([checkbox-adjacent]) {
+    padding-inline-start: 2em;
+  }
+
+  /* Only add padding when item actually has a submenu */
+  :host([submenu-adjacent]:not(:state(has-submenu))) #details {
+    padding-inline-end: 0;
+  }
+
+  :host(:state(has-submenu)[submenu-adjacent]) #details {
+    padding-inline-end: 1.75em;
+  }
+
+  #check {
+    visibility: hidden;
+    margin-inline-start: -1.5em;
+    margin-inline-end: 0.5em;
+    font-size: var(--wa-font-size-smaller);
+  }
+
+  :host(:state(checked)) #check {
+    visibility: visible;
+  }
+
+  #icon ::slotted(*) {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin-inline-end: 0.75em !important;
+    font-size: var(--wa-font-size-smaller);
+  }
+
+  #label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  #details {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: end;
+    color: var(--wa-color-text-quiet);
+    font-size: var(--wa-font-size-smaller) !important;
+  }
+
+  #details ::slotted(*) {
+    margin-inline-start: 2em !important;
+  }
+
+  /* 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);
+  }
+
+  /* Flip chevron icon when RTL */
+  :host(:dir(rtl)) #submenu-indicator {
+    transform: scaleX(-1);
+  }
+
+  /* Submenu styles */
+  #submenu {
+    display: flex;
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    left: 0;
+    flex-direction: column;
+    width: max-content;
+    margin: 0;
+    padding: 0.25em;
+    border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
+    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);
+    text-align: start;
+    user-select: none;
+
+    /* Override default popover styles */
+    &[popover] {
+      margin: 0;
+      inset: auto;
+      padding: 0.25em;
+      overflow: visible;
+      border-radius: var(--wa-border-radius-m);
+    }
+
+    &.show {
+      animation: submenu-show var(--show-duration, 50ms) ease;
+    }
+
+    &.hide {
+      animation: submenu-show var(--show-duration, 50ms) ease reverse;
+    }
+
+    /* Submenu placement transform origins */
+    &[data-placement^='top'] {
+      transform-origin: bottom;
+    }
+
+    &[data-placement^='bottom'] {
+      transform-origin: top;
+    }
+
+    &[data-placement^='left'] {
+      transform-origin: right;
+    }
+
+    &[data-placement^='right'] {
+      transform-origin: left;
+    }
+
+    &[data-placement='left-start'] {
+      transform-origin: right top;
+    }
+
+    &[data-placement='left-end'] {
+      transform-origin: right bottom;
+    }
+
+    &[data-placement='right-start'] {
+      transform-origin: left top;
+    }
+
+    &[data-placement='right-end'] {
+      transform-origin: left bottom;
+    }
+
+    /* Safe triangle styling */
+    &::before {
+      display: none;
+      z-index: 9;
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: transparent;
+      content: '';
+      clip-path: polygon(
+        var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+        var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
+        var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
+      );
+      pointer-events: auto; /* Enable mouse events on the triangle */
+    }
+
+    &[data-visible]::before {
+      display: block;
+    }
+  }
+
+  ::slotted(wa-dropdown-item) {
+    font-size: inherit;
+  }
+
+  ::slotted(wa-divider) {
+    --spacing: 0.25em;
+  }
+
+  @keyframes submenu-show {
+    from {
+      scale: 0.9;
+      opacity: 0;
+    }
+    to {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+`;

packages/webawesome/src/components/dropdown-item/dropdown-item.ts

@@ -5,7 +5,7 @@ import { animateWithClass } from '../../internal/animate.js';
 import { HasSlotController } from '../../internal/slot.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import '../icon/icon.js';
-import styles from './dropdown-item.css';
+import styles from './dropdown-item.styles.js';
 
 /**
  * @summary Represents an individual item within a dropdown menu, supporting standard items, checkboxes, and submenus.

packages/webawesome/src/components/dropdown/dropdown.css

@@ -1,93 +0,0 @@
-:host {
-  --show-duration: 50ms;
-  --hide-duration: 50ms;
-  display: contents;
-}
-
-#menu {
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-  margin: 0;
-  padding: 0.25em;
-  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
-  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);
-  text-align: start;
-  user-select: none;
-  overflow: auto;
-  max-width: var(--auto-size-available-width) !important;
-  max-height: var(--auto-size-available-height) !important;
-
-  &.show {
-    animation: show var(--show-duration) ease;
-  }
-
-  &.hide {
-    animation: show var(--hide-duration) ease reverse;
-  }
-
-  ::slotted(h1),
-  ::slotted(h2),
-  ::slotted(h3),
-  ::slotted(h4),
-  ::slotted(h5),
-  ::slotted(h6) {
-    display: block !important;
-    margin: 0.25em 0 !important;
-    padding: 0.25em 0.75em !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;
-  }
-
-  ::slotted(wa-divider) {
-    --spacing: 0.25em; /* Component-specific, left as-is */
-  }
-}
-
-wa-popup[data-current-placement^='top'] #menu {
-  transform-origin: bottom;
-}
-
-wa-popup[data-current-placement^='bottom'] #menu {
-  transform-origin: top;
-}
-
-wa-popup[data-current-placement^='left'] #menu {
-  transform-origin: right;
-}
-
-wa-popup[data-current-placement^='right'] #menu {
-  transform-origin: left;
-}
-
-wa-popup[data-current-placement='left-start'] #menu {
-  transform-origin: right top;
-}
-
-wa-popup[data-current-placement='left-end'] #menu {
-  transform-origin: right bottom;
-}
-
-wa-popup[data-current-placement='right-start'] #menu {
-  transform-origin: left top;
-}
-
-wa-popup[data-current-placement='right-end'] #menu {
-  transform-origin: left bottom;
-}
-
-@keyframes show {
-  from {
-    scale: 0.9;
-    opacity: 0;
-  }
-  to {
-    scale: 1;
-    opacity: 1;
-  }
-}

packages/webawesome/src/components/dropdown/dropdown.styles.ts

@@ -0,0 +1,97 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --show-duration: 50ms;
+    --hide-duration: 50ms;
+    display: contents;
+  }
+
+  #menu {
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    margin: 0;
+    padding: 0.25em;
+    border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
+    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);
+    text-align: start;
+    user-select: none;
+    overflow: auto;
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+
+    &.show {
+      animation: show var(--show-duration) ease;
+    }
+
+    &.hide {
+      animation: show var(--hide-duration) ease reverse;
+    }
+
+    ::slotted(h1),
+    ::slotted(h2),
+    ::slotted(h3),
+    ::slotted(h4),
+    ::slotted(h5),
+    ::slotted(h6) {
+      display: block !important;
+      margin: 0.25em 0 !important;
+      padding: 0.25em 0.75em !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;
+    }
+
+    ::slotted(wa-divider) {
+      --spacing: 0.25em; /* Component-specific, left as-is */
+    }
+  }
+
+  wa-popup[data-current-placement^='top'] #menu {
+    transform-origin: bottom;
+  }
+
+  wa-popup[data-current-placement^='bottom'] #menu {
+    transform-origin: top;
+  }
+
+  wa-popup[data-current-placement^='left'] #menu {
+    transform-origin: right;
+  }
+
+  wa-popup[data-current-placement^='right'] #menu {
+    transform-origin: left;
+  }
+
+  wa-popup[data-current-placement='left-start'] #menu {
+    transform-origin: right top;
+  }
+
+  wa-popup[data-current-placement='left-end'] #menu {
+    transform-origin: right bottom;
+  }
+
+  wa-popup[data-current-placement='right-start'] #menu {
+    transform-origin: left top;
+  }
+
+  wa-popup[data-current-placement='right-end'] #menu {
+    transform-origin: left bottom;
+  }
+
+  @keyframes show {
+    from {
+      scale: 0.9;
+      opacity: 0;
+    }
+    to {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+`;

packages/webawesome/src/components/dropdown/dropdown.ts

@@ -12,13 +12,13 @@ import { activeElements } from '../../internal/active-elements.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 sizeStyles from '../../styles/component/size.styles.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import type WaButton from '../button/button.js';
 import '../dropdown-item/dropdown-item.js';
 import type WaDropdownItem from '../dropdown-item/dropdown-item.js';
 import WaPopup from '../popup/popup.js'; // Added import for wa-popup
-import styles from './dropdown.css';
+import styles from './dropdown.styles.js';
 
 const openDropdowns = new Set<WaDropdown>();
 

packages/webawesome/src/components/icon/icon.css

@@ -1,40 +0,0 @@
-:host {
-  --primary-color: currentColor;
-  --primary-opacity: 1;
-  --secondary-color: currentColor;
-  --secondary-opacity: 0.4;
-
-  box-sizing: content-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: -0.125em;
-}
-
-/* Standard */
-:host(:not([auto-width])) {
-  width: 1.25em;
-  height: 1em;
-}
-
-/* Auto-width */
-:host([auto-width]) {
-  width: auto;
-  height: 1em;
-}
-
-svg {
-  height: 1em;
-  overflow: visible;
-
-  /* Duotone colors with path-specific opacity fallback */
-  path[data-duotone-primary] {
-    color: var(--primary-color);
-    opacity: var(--path-opacity, var(--primary-opacity));
-  }
-
-  path[data-duotone-secondary] {
-    color: var(--secondary-color);
-    opacity: var(--path-opacity, var(--secondary-opacity));
-  }
-}

packages/webawesome/src/components/icon/icon.styles.ts

@@ -0,0 +1,44 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --primary-color: currentColor;
+    --primary-opacity: 1;
+    --secondary-color: currentColor;
+    --secondary-opacity: 0.4;
+
+    box-sizing: content-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: -0.125em;
+  }
+
+  /* Standard */
+  :host(:not([auto-width])) {
+    width: 1.25em;
+    height: 1em;
+  }
+
+  /* Auto-width */
+  :host([auto-width]) {
+    width: auto;
+    height: 1em;
+  }
+
+  svg {
+    height: 1em;
+    overflow: visible;
+
+    /* Duotone colors with path-specific opacity fallback */
+    path[data-duotone-primary] {
+      color: var(--primary-color);
+      opacity: var(--path-opacity, var(--primary-opacity));
+    }
+
+    path[data-duotone-secondary] {
+      color: var(--secondary-color);
+      opacity: var(--path-opacity, var(--secondary-opacity));
+    }
+  }
+`;

packages/webawesome/src/components/icon/icon.ts

@@ -5,7 +5,7 @@ import { WaErrorEvent } from '../../events/error.js';
 import { WaLoadEvent } from '../../events/load.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './icon.css';
+import styles from './icon.styles.js';
 import { getDefaultIconFamily, getIconLibrary, unwatchIcon, watchIcon, type IconLibrary } from './library.js';
 
 import type { HTMLTemplateResult, PropertyValues } from 'lit';

packages/webawesome/src/components/include/include.css

@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}

packages/webawesome/src/components/include/include.styles.ts

@@ -0,0 +1,7 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: block;
+  }
+`;

packages/webawesome/src/components/include/include.ts

@@ -4,7 +4,7 @@ import { WaIncludeErrorEvent } from '../../events/include-error.js';
 import { WaLoadEvent } from '../../events/load.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './include.css';
+import styles from './include.styles.js';
 import { requestInclude } from './request.js';
 
 /**

packages/webawesome/src/components/input/input.css

@@ -1,227 +0,0 @@
-:host {
-  border-width: 0;
-}
-
-.text-field {
-  flex: auto;
-  display: flex;
-  align-items: stretch;
-  justify-content: start;
-  position: relative;
-  transition: inherit;
-  height: var(--wa-form-control-height);
-  border-color: var(--wa-form-control-border-color);
-  border-radius: var(--wa-form-control-border-radius);
-  border-style: var(--wa-form-control-border-style);
-  border-width: var(--wa-form-control-border-width);
-  cursor: text;
-  color: var(--wa-form-control-value-color);
-  font-size: var(--wa-form-control-value-font-size);
-  font-family: inherit;
-  font-weight: var(--wa-form-control-value-font-weight);
-  line-height: var(--wa-form-control-value-line-height);
-  vertical-align: middle;
-  width: 100%;
-  transition:
-    background-color var(--wa-transition-normal),
-    border var(--wa-transition-normal),
-    outline var(--wa-transition-fast);
-  transition-timing-function: var(--wa-transition-easing);
-  background-color: var(--wa-form-control-background-color);
-  box-shadow: var(--box-shadow);
-  padding: 0 var(--wa-form-control-padding-inline);
-
-  &:focus-within {
-    outline: var(--wa-focus-ring);
-    outline-offset: var(--wa-focus-ring-offset);
-  }
-
-  /* Style disabled inputs */
-  &:has(:disabled) {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-
-/* Appearance modifiers */
-:host([appearance='outlined']) .text-field {
-  background-color: var(--wa-form-control-background-color);
-  border-color: var(--wa-form-control-border-color);
-}
-
-:host([appearance='filled']) .text-field {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-color: var(--wa-color-neutral-fill-quiet);
-}
-
-:host([appearance='filled-outlined']) .text-field {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-color: var(--wa-form-control-border-color);
-}
-
-:host([pill]) .text-field {
-  border-radius: var(--wa-border-radius-pill) !important;
-}
-
-.text-field {
-  /* Show autofill styles over the entire text field, not just the native <input> */
-  &:has(:autofill),
-  &:has(:-webkit-autofill) {
-    background-color: var(--wa-color-brand-fill-quiet) !important;
-  }
-
-  input,
-  textarea {
-    /*
-    Fixes an alignment issue with placeholders.
-    https://github.com/shoelace-style/webawesome/issues/342
-  */
-    height: 100%;
-
-    padding: 0;
-    border: none;
-    outline: none;
-    box-shadow: none;
-    margin: 0;
-    cursor: inherit;
-    -webkit-appearance: none;
-    font: inherit;
-
-    /* Turn off Safari's autofill styles */
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus,
-    &:-webkit-autofill:active {
-      -webkit-background-clip: text;
-      background-color: transparent;
-      -webkit-text-fill-color: inherit;
-    }
-  }
-}
-
-input {
-  flex: 1 1 auto;
-  min-width: 0;
-  height: 100%;
-  transition: inherit;
-
-  /* prettier-ignore */
-  background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */
-  height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
-  padding-block: 0;
-  color: inherit;
-
-  &:autofill {
-    &,
-    &:hover,
-    &:focus,
-    &:active {
-      box-shadow: none;
-      caret-color: var(--wa-form-control-value-color);
-    }
-  }
-
-  &::placeholder {
-    color: var(--wa-form-control-placeholder-color);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  &::-webkit-search-decoration,
-  &::-webkit-search-cancel-button,
-  &::-webkit-search-results-button,
-  &::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-textarea {
-  &:autofill {
-    &,
-    &:hover,
-    &:focus,
-    &:active {
-      box-shadow: none;
-      caret-color: var(--wa-form-control-value-color);
-    }
-  }
-
-  &::placeholder {
-    color: var(--wa-form-control-placeholder-color);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-}
-
-.start,
-.end {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  cursor: default;
-
-  &::slotted(wa-icon) {
-    color: var(--wa-color-neutral-on-quiet);
-  }
-}
-
-.start::slotted(*) {
-  margin-inline-end: var(--wa-form-control-padding-inline);
-}
-
-.end::slotted(*) {
-  margin-inline-start: var(--wa-form-control-padding-inline);
-}
-
-/*
- * Clearable + Password Toggle
- */
-
-.clear,
-.password-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: inherit;
-  color: var(--wa-color-neutral-on-quiet);
-  border: none;
-  background: none;
-  padding: 0;
-  transition: var(--wa-transition-normal) color;
-  cursor: pointer;
-  margin-inline-start: var(--wa-form-control-padding-inline);
-
-  @media (hover: hover) {
-    &:hover {
-      color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
-    }
-  }
-
-  &:active {
-    color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-/* Don't show the browser's password toggle in Edge */
-::-ms-reveal {
-  display: none;
-}
-
-/* Hide the built-in number spinner */
-:host([without-spin-buttons]) input[type='number'] {
-  -moz-appearance: textfield;
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    display: none;
-  }
-}

packages/webawesome/src/components/input/input.styles.ts

@@ -0,0 +1,231 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    border-width: 0;
+  }
+
+  .text-field {
+    flex: auto;
+    display: flex;
+    align-items: stretch;
+    justify-content: start;
+    position: relative;
+    transition: inherit;
+    height: var(--wa-form-control-height);
+    border-color: var(--wa-form-control-border-color);
+    border-radius: var(--wa-form-control-border-radius);
+    border-style: var(--wa-form-control-border-style);
+    border-width: var(--wa-form-control-border-width);
+    cursor: text;
+    color: var(--wa-form-control-value-color);
+    font-size: var(--wa-form-control-value-font-size);
+    font-family: inherit;
+    font-weight: var(--wa-form-control-value-font-weight);
+    line-height: var(--wa-form-control-value-line-height);
+    vertical-align: middle;
+    width: 100%;
+    transition:
+      background-color var(--wa-transition-normal),
+      border var(--wa-transition-normal),
+      outline var(--wa-transition-fast);
+    transition-timing-function: var(--wa-transition-easing);
+    background-color: var(--wa-form-control-background-color);
+    box-shadow: var(--box-shadow);
+    padding: 0 var(--wa-form-control-padding-inline);
+
+    &:focus-within {
+      outline: var(--wa-focus-ring);
+      outline-offset: var(--wa-focus-ring-offset);
+    }
+
+    /* Style disabled inputs */
+    &:has(:disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  /* Appearance modifiers */
+  :host([appearance='outlined']) .text-field {
+    background-color: var(--wa-form-control-background-color);
+    border-color: var(--wa-form-control-border-color);
+  }
+
+  :host([appearance='filled']) .text-field {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-color: var(--wa-color-neutral-fill-quiet);
+  }
+
+  :host([appearance='filled-outlined']) .text-field {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-color: var(--wa-form-control-border-color);
+  }
+
+  :host([pill]) .text-field {
+    border-radius: var(--wa-border-radius-pill) !important;
+  }
+
+  .text-field {
+    /* Show autofill styles over the entire text field, not just the native <input> */
+    &:has(:autofill),
+    &:has(:-webkit-autofill) {
+      background-color: var(--wa-color-brand-fill-quiet) !important;
+    }
+
+    input,
+    textarea {
+      /*
+      Fixes an alignment issue with placeholders.
+      https://github.com/shoelace-style/webawesome/issues/342
+    */
+      height: 100%;
+
+      padding: 0;
+      border: none;
+      outline: none;
+      box-shadow: none;
+      margin: 0;
+      cursor: inherit;
+      -webkit-appearance: none;
+      font: inherit;
+
+      /* Turn off Safari's autofill styles */
+      &:-webkit-autofill,
+      &:-webkit-autofill:hover,
+      &:-webkit-autofill:focus,
+      &:-webkit-autofill:active {
+        -webkit-background-clip: text;
+        background-color: transparent;
+        -webkit-text-fill-color: inherit;
+      }
+    }
+  }
+
+  input {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    transition: inherit;
+
+    /* prettier-ignore */
+    background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */
+    height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
+    padding-block: 0;
+    color: inherit;
+
+    &:autofill {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        box-shadow: none;
+        caret-color: var(--wa-form-control-value-color);
+      }
+    }
+
+    &::placeholder {
+      color: var(--wa-form-control-placeholder-color);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      -webkit-appearance: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  textarea {
+    &:autofill {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        box-shadow: none;
+        caret-color: var(--wa-form-control-value-color);
+      }
+    }
+
+    &::placeholder {
+      color: var(--wa-form-control-placeholder-color);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+  }
+
+  .start,
+  .end {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    cursor: default;
+
+    &::slotted(wa-icon) {
+      color: var(--wa-color-neutral-on-quiet);
+    }
+  }
+
+  .start::slotted(*) {
+    margin-inline-end: var(--wa-form-control-padding-inline);
+  }
+
+  .end::slotted(*) {
+    margin-inline-start: var(--wa-form-control-padding-inline);
+  }
+
+  /*
+   * Clearable + Password Toggle
+   */
+
+  .clear,
+  .password-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--wa-color-neutral-on-quiet);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--wa-transition-normal) color;
+    cursor: pointer;
+    margin-inline-start: var(--wa-form-control-padding-inline);
+
+    @media (hover: hover) {
+      &:hover {
+        color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+      }
+    }
+
+    &:active {
+      color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  /* Don't show the browser's password toggle in Edge */
+  ::-ms-reveal {
+    display: none;
+  }
+
+  /* Hide the built-in number spinner */
+  :host([without-spin-buttons]) input[type='number'] {
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      display: none;
+    }
+  }
+`;

packages/webawesome/src/components/input/input.ts

@@ -9,11 +9,11 @@ import { submitOnEnter } from '../../internal/submit-on-enter.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
-import formControlStyles from '../../styles/component/form-control.css';
+import formControlStyles from '../../styles/component/form-control.styles.js';
-import sizeStyles from '../../styles/utilities/size.css';
+import sizeStyles from '../../styles/component/size.styles.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
-import styles from './input.css';
+import styles from './input.styles.js';
 
 /**
  * @summary Inputs collect data from the user.

packages/webawesome/src/components/intersection-observer/intersection-observer.css

@@ -1,3 +0,0 @@
-:host {
-  display: contents;
-}

packages/webawesome/src/components/intersection-observer/intersection-observer.styles.ts

@@ -0,0 +1,7 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: contents;
+  }
+`;

packages/webawesome/src/components/intersection-observer/intersection-observer.ts

@@ -5,7 +5,7 @@ import { clamp } from '../../internal/math.js';
 import { parseSpaceDelimitedTokens } from '../../internal/parse.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './intersection-observer.css';
+import styles from './intersection-observer.styles.js';
 
 /**
  * @summary Tracks immediate child elements and fires events as they move in and out of view.

packages/webawesome/src/components/mutation-observer/mutation-observer.css

@@ -1,3 +0,0 @@
-:host {
-  display: contents;
-}

packages/webawesome/src/components/mutation-observer/mutation-observer.styles.ts

@@ -0,0 +1,7 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: contents;
+  }
+`;

packages/webawesome/src/components/mutation-observer/mutation-observer.ts

@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { WaMutationEvent } from '../../events/mutation.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './mutation-observer.css';
+import styles from './mutation-observer.styles.js';
 
 /**
  * @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).

packages/webawesome/src/components/option/option.css

@@ -1,80 +0,0 @@
-:host {
-  display: block;
-  color: var(--wa-color-text-normal);
-  -webkit-user-select: none;
-  user-select: none;
-
-  position: relative;
-  display: flex;
-  align-items: center;
-  font: inherit;
-  padding: 0.5em 1em 0.5em 0.25em;
-  line-height: var(--wa-line-height-condensed);
-  transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
-  cursor: pointer;
-}
-
-:host(:focus) {
-  outline: none;
-}
-
-@media (hover: hover) {
-  :host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
-    background-color: var(--wa-color-neutral-fill-normal);
-    color: var(--wa-color-neutral-on-normal);
-  }
-}
-
-:host(:state(current)),
-:host([disabled]:state(current)) {
-  background-color: var(--wa-color-brand-fill-loud);
-  color: var(--wa-color-brand-on-loud);
-  opacity: 1;
-}
-
-:host([disabled]) {
-  outline: none;
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.label {
-  flex: 1 1 auto;
-  display: inline-block;
-}
-
-.check {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--wa-font-size-smaller);
-  visibility: hidden;
-  width: 2em;
-}
-
-:host(:state(selected)) .check {
-  visibility: visible;
-}
-
-.start,
-.end {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-}
-
-.start::slotted(*) {
-  margin-inline-end: 0.5em;
-}
-
-.end::slotted(*) {
-  margin-inline-start: 0.5em;
-}
-
-@media (forced-colors: active) {
-  :host(:hover:not([aria-disabled='true'])) {
-    outline: dashed 1px SelectedItem;
-    outline-offset: -1px;
-  }
-}

packages/webawesome/src/components/option/option.styles.ts

@@ -0,0 +1,84 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: block;
+    color: var(--wa-color-text-normal);
+    -webkit-user-select: none;
+    user-select: none;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    font: inherit;
+    padding: 0.5em 1em 0.5em 0.25em;
+    line-height: var(--wa-line-height-condensed);
+    transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
+    cursor: pointer;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    :host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
+      background-color: var(--wa-color-neutral-fill-normal);
+      color: var(--wa-color-neutral-on-normal);
+    }
+  }
+
+  :host(:state(current)),
+  :host([disabled]:state(current)) {
+    background-color: var(--wa-color-brand-fill-loud);
+    color: var(--wa-color-brand-on-loud);
+    opacity: 1;
+  }
+
+  :host([disabled]) {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .label {
+    flex: 1 1 auto;
+    display: inline-block;
+  }
+
+  .check {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--wa-font-size-smaller);
+    visibility: hidden;
+    width: 2em;
+  }
+
+  :host(:state(selected)) .check {
+    visibility: visible;
+  }
+
+  .start,
+  .end {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .start::slotted(*) {
+    margin-inline-end: 0.5em;
+  }
+
+  .end::slotted(*) {
+    margin-inline-start: 0.5em;
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+`;

packages/webawesome/src/components/option/option.ts

@@ -6,7 +6,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import type WaSelect from '../select/select.js';
-import styles from './option.css';
+import styles from './option.styles.js';
 
 /**
  * @summary Options define the selectable items within a select component.

packages/webawesome/src/components/popover/popover.css

@@ -1,91 +0,0 @@
-:host {
-  --arrow-size: 0.375rem;
-  --max-width: 25rem;
-  --show-duration: 100ms;
-  --hide-duration: 100ms;
-
-  /* Internal calculated properties */
-  --arrow-diagonal-size: calc((var(--arrow-size) * sin(45deg)));
-
-  display: contents;
-
-  /** Defaults for inherited CSS properties */
-  font-size: var(--wa-font-size-m);
-  line-height: var(--wa-line-height-normal);
-  text-align: start;
-  white-space: normal;
-}
-
-/* The native dialog element */
-.dialog {
-  display: none;
-  position: fixed;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  overflow: visible;
-  pointer-events: none;
-
-  &:focus {
-    outline: none;
-  }
-
-  &[open] {
-    display: block;
-  }
-}
-
-/* The <wa-popup> element */
-.popover {
-  --arrow-size: inherit;
-  --show-duration: inherit;
-  --hide-duration: inherit;
-
-  pointer-events: auto;
-
-  &::part(arrow) {
-    background-color: var(--wa-color-surface-default);
-    border-top: none;
-    border-left: none;
-    border-bottom: solid var(--wa-panel-border-width) var(--wa-color-surface-border);
-    border-right: solid var(--wa-panel-border-width) var(--wa-color-surface-border);
-    box-shadow: none;
-  }
-}
-
-.popover[placement^='top']::part(popup) {
-  transform-origin: bottom;
-}
-
-.popover[placement^='bottom']::part(popup) {
-  transform-origin: top;
-}
-
-.popover[placement^='left']::part(popup) {
-  transform-origin: right;
-}
-
-.popover[placement^='right']::part(popup) {
-  transform-origin: left;
-}
-
-/* Body */
-.body {
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-  max-width: var(--max-width);
-  padding: var(--wa-space-l);
-  background-color: var(--wa-color-surface-default);
-  border: var(--wa-panel-border-width) solid var(--wa-color-surface-border);
-  border-radius: var(--wa-panel-border-radius);
-  border-style: var(--wa-panel-border-style);
-  box-shadow: var(--wa-shadow-l);
-  color: var(--wa-color-text-normal);
-  user-select: none;
-  -webkit-user-select: none;
-}

packages/webawesome/src/components/popover/popover.styles.ts

@@ -0,0 +1,95 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --arrow-size: 0.375rem;
+    --max-width: 25rem;
+    --show-duration: 100ms;
+    --hide-duration: 100ms;
+
+    /* Internal calculated properties */
+    --arrow-diagonal-size: calc((var(--arrow-size) * sin(45deg)));
+
+    display: contents;
+
+    /** Defaults for inherited CSS properties */
+    font-size: var(--wa-font-size-m);
+    line-height: var(--wa-line-height-normal);
+    text-align: start;
+    white-space: normal;
+  }
+
+  /* The native dialog element */
+  .dialog {
+    display: none;
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: visible;
+    pointer-events: none;
+
+    &:focus {
+      outline: none;
+    }
+
+    &[open] {
+      display: block;
+    }
+  }
+
+  /* The <wa-popup> element */
+  .popover {
+    --arrow-size: inherit;
+    --show-duration: inherit;
+    --hide-duration: inherit;
+
+    pointer-events: auto;
+
+    &::part(arrow) {
+      background-color: var(--wa-color-surface-default);
+      border-top: none;
+      border-left: none;
+      border-bottom: solid var(--wa-panel-border-width) var(--wa-color-surface-border);
+      border-right: solid var(--wa-panel-border-width) var(--wa-color-surface-border);
+      box-shadow: none;
+    }
+  }
+
+  .popover[placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .popover[placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .popover[placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .popover[placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  /* Body */
+  .body {
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    max-width: var(--max-width);
+    padding: var(--wa-space-l);
+    background-color: var(--wa-color-surface-default);
+    border: var(--wa-panel-border-width) solid var(--wa-color-surface-border);
+    border-radius: var(--wa-panel-border-radius);
+    border-style: var(--wa-panel-border-style);
+    box-shadow: var(--wa-shadow-l);
+    color: var(--wa-color-text-normal);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;

packages/webawesome/src/components/popover/popover.ts

@@ -12,7 +12,7 @@ import { uniqueId } from '../../internal/math.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import WaPopup from '../popup/popup.js';
-import styles from './popover.css';
+import styles from './popover.styles.js';
 
 const openPopovers = new Set<WaPopover>();
 

packages/webawesome/src/components/popup/popup.css

@@ -1,121 +0,0 @@
-:host {
-  --arrow-color: black;
-  --arrow-size: var(--wa-tooltip-arrow-size);
-  --show-duration: 100ms;
-  --hide-duration: 100ms;
-
-  /*
-     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
-     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
-     */
-  --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
-  --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
-
-  display: contents;
-}
-
-.popup {
-  position: absolute;
-  isolation: isolate;
-  max-width: var(--auto-size-available-width, none);
-  max-height: var(--auto-size-available-height, none);
-
-  /* Clear UA styles for [popover] */
-  :where(&) {
-    inset: unset;
-    padding: unset;
-    margin: unset;
-    width: unset;
-    height: unset;
-    color: unset;
-    background: unset;
-    border: unset;
-    overflow: unset;
-  }
-}
-
-.popup-fixed {
-  position: fixed;
-}
-
-.popup:not(.popup-active) {
-  display: none;
-}
-
-.arrow {
-  position: absolute;
-  width: calc(var(--arrow-size-diagonal) * 2);
-  height: calc(var(--arrow-size-diagonal) * 2);
-  rotate: 45deg;
-  background: var(--arrow-color);
-  z-index: 3;
-}
-
-:host([data-current-placement~='left']) .arrow {
-  rotate: -45deg;
-}
-
-:host([data-current-placement~='right']) .arrow {
-  rotate: 135deg;
-}
-
-:host([data-current-placement~='bottom']) .arrow {
-  rotate: 225deg;
-}
-
-/* Hover bridge */
-.popup-hover-bridge:not(.popup-hover-bridge-visible) {
-  display: none;
-}
-
-.popup-hover-bridge {
-  position: fixed;
-  z-index: 899;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  clip-path: polygon(
-    var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
-    var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
-    var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
-    var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
-  );
-}
-
-/* Built-in animations */
-.show {
-  animation: show var(--show-duration) ease;
-}
-
-.hide {
-  animation: show var(--hide-duration) ease reverse;
-}
-
-@keyframes show {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.show-with-scale {
-  animation: show-with-scale var(--show-duration) ease;
-}
-
-.hide-with-scale {
-  animation: show-with-scale var(--hide-duration) ease reverse;
-}
-
-@keyframes show-with-scale {
-  from {
-    opacity: 0;
-    scale: 0.8;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
-}

packages/webawesome/src/components/popup/popup.styles.ts

@@ -0,0 +1,125 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --arrow-color: black;
+    --arrow-size: var(--wa-tooltip-arrow-size);
+    --show-duration: 100ms;
+    --hide-duration: 100ms;
+
+    /*
+     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
+     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
+     */
+    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
+    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
+
+    display: contents;
+  }
+
+  .popup {
+    position: absolute;
+    isolation: isolate;
+    max-width: var(--auto-size-available-width, none);
+    max-height: var(--auto-size-available-height, none);
+
+    /* Clear UA styles for [popover] */
+    :where(&) {
+      inset: unset;
+      padding: unset;
+      margin: unset;
+      width: unset;
+      height: unset;
+      color: unset;
+      background: unset;
+      border: unset;
+      overflow: unset;
+    }
+  }
+
+  .popup-fixed {
+    position: fixed;
+  }
+
+  .popup:not(.popup-active) {
+    display: none;
+  }
+
+  .arrow {
+    position: absolute;
+    width: calc(var(--arrow-size-diagonal) * 2);
+    height: calc(var(--arrow-size-diagonal) * 2);
+    rotate: 45deg;
+    background: var(--arrow-color);
+    z-index: 3;
+  }
+
+  :host([data-current-placement~='left']) .arrow {
+    rotate: -45deg;
+  }
+
+  :host([data-current-placement~='right']) .arrow {
+    rotate: 135deg;
+  }
+
+  :host([data-current-placement~='bottom']) .arrow {
+    rotate: 225deg;
+  }
+
+  /* Hover bridge */
+  .popup-hover-bridge:not(.popup-hover-bridge-visible) {
+    display: none;
+  }
+
+  .popup-hover-bridge {
+    position: fixed;
+    z-index: 899;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
+      var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
+      var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
+      var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
+    );
+  }
+
+  /* Built-in animations */
+  .show {
+    animation: show var(--show-duration) ease;
+  }
+
+  .hide {
+    animation: show var(--hide-duration) ease reverse;
+  }
+
+  @keyframes show {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .show-with-scale {
+    animation: show-with-scale var(--show-duration) ease;
+  }
+
+  .hide-with-scale {
+    animation: show-with-scale var(--hide-duration) ease reverse;
+  }
+
+  @keyframes show-with-scale {
+    from {
+      opacity: 0;
+      scale: 0.8;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+`;

packages/webawesome/src/components/popup/popup.ts

@@ -17,7 +17,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { WaRepositionEvent } from '../../events/reposition.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
-import styles from './popup.css';
+import styles from './popup.styles.js';
 
 export interface VirtualElement {
   getBoundingClientRect: () => DOMRect;

packages/webawesome/src/components/progress-bar/progress-bar.css

@@ -1,66 +0,0 @@
-:host {
-  --track-height: 1rem;
-  --track-color: var(--wa-color-neutral-fill-normal);
-  --indicator-color: var(--wa-color-brand-fill-loud);
-
-  display: flex;
-}
-
-.progress-bar {
-  flex: 1 1 auto;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  height: var(--track-height);
-  border-radius: var(--wa-border-radius-pill);
-  background-color: var(--track-color);
-  color: var(--wa-color-brand-on-loud);
-  font-size: var(--wa-font-size-s);
-}
-
-.indicator {
-  width: var(--percentage);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--indicator-color);
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  line-height: 1;
-  font-weight: var(--wa-font-weight-semibold);
-  transition: all var(--wa-transition-slow, 200ms) var(--wa-transition-easing, ease);
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* Indeterminate */
-:host([indeterminate]) .indicator {
-  position: absolute;
-  inset-block: 0;
-  inline-size: 50%;
-  animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
-}
-
-@media (forced-colors: active) {
-  .progress-bar {
-    outline: solid 1px SelectedItem;
-    background-color: var(--wa-color-surface-default);
-  }
-
-  .indicator {
-    outline: solid 1px SelectedItem;
-    background-color: SelectedItem;
-  }
-}
-
-@keyframes wa-progress-indeterminate {
-  0% {
-    inset-inline-start: -50%;
-  }
-
-  75%,
-  100% {
-    inset-inline-start: 100%;
-  }
-}

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

@@ -0,0 +1,70 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --track-height: 1rem;
+    --track-color: var(--wa-color-neutral-fill-normal);
+    --indicator-color: var(--wa-color-brand-fill-loud);
+
+    display: flex;
+  }
+
+  .progress-bar {
+    flex: 1 1 auto;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+    height: var(--track-height);
+    border-radius: var(--wa-border-radius-pill);
+    background-color: var(--track-color);
+    color: var(--wa-color-brand-on-loud);
+    font-size: var(--wa-font-size-s);
+  }
+
+  .indicator {
+    width: var(--percentage);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--indicator-color);
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 1;
+    font-weight: var(--wa-font-weight-semibold);
+    transition: all var(--wa-transition-slow, 200ms) var(--wa-transition-easing, ease);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* Indeterminate */
+  :host([indeterminate]) .indicator {
+    position: absolute;
+    inset-block: 0;
+    inline-size: 50%;
+    animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+  }
+
+  @media (forced-colors: active) {
+    .progress-bar {
+      outline: solid 1px SelectedItem;
+      background-color: var(--wa-color-surface-default);
+    }
+
+    .indicator {
+      outline: solid 1px SelectedItem;
+      background-color: SelectedItem;
+    }
+  }
+
+  @keyframes wa-progress-indeterminate {
+    0% {
+      inset-inline-start: -50%;
+    }
+
+    75%,
+    100% {
+      inset-inline-start: 100%;
+    }
+  }
+`;

packages/webawesome/src/components/progress-bar/progress-bar.ts

@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { clamp } from '../../internal/math.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
-import styles from './progress-bar.css';
+import styles from './progress-bar.styles.js';
 
 /**
  * @summary Progress bars are used to show the status of an ongoing operation.

packages/webawesome/src/components/progress-ring/progress-ring.css

@@ -1,64 +0,0 @@
-:host {
-  --size: 8rem;
-  --track-width: 0.25em; /* avoid using rems here */
-  --track-color: var(--wa-color-neutral-fill-normal);
-  --indicator-width: var(--track-width);
-  --indicator-color: var(--wa-color-brand-fill-loud);
-  --indicator-transition-duration: 0.35s;
-
-  display: inline-flex;
-}
-
-.progress-ring {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.image {
-  width: var(--size);
-  height: var(--size);
-  rotate: -90deg;
-  transform-origin: 50% 50%;
-}
-
-.track,
-.indicator {
-  --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
-  --circumference: calc(var(--radius) * 2 * 3.141592654);
-
-  fill: none;
-  r: var(--radius);
-  cx: calc(var(--size) / 2);
-  cy: calc(var(--size) / 2);
-}
-
-.track {
-  stroke: var(--track-color);
-  stroke-width: var(--track-width);
-}
-
-.indicator {
-  stroke: var(--indicator-color);
-  stroke-width: var(--indicator-width);
-  stroke-linecap: round;
-  transition-property: stroke-dashoffset;
-  transition-duration: var(--indicator-transition-duration);
-  stroke-dasharray: var(--circumference) var(--circumference);
-  stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
-}
-
-.label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  user-select: none;
-  -webkit-user-select: none;
-}

packages/webawesome/src/components/progress-ring/progress-ring.styles.ts

@@ -0,0 +1,68 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --size: 8rem;
+    --track-width: 0.25em; /* avoid using rems here */
+    --track-color: var(--wa-color-neutral-fill-normal);
+    --indicator-width: var(--track-width);
+    --indicator-color: var(--wa-color-brand-fill-loud);
+    --indicator-transition-duration: 0.35s;
+
+    display: inline-flex;
+  }
+
+  .progress-ring {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .image {
+    width: var(--size);
+    height: var(--size);
+    rotate: -90deg;
+    transform-origin: 50% 50%;
+  }
+
+  .track,
+  .indicator {
+    --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
+    --circumference: calc(var(--radius) * 2 * 3.141592654);
+
+    fill: none;
+    r: var(--radius);
+    cx: calc(var(--size) / 2);
+    cy: calc(var(--size) / 2);
+  }
+
+  .track {
+    stroke: var(--track-color);
+    stroke-width: var(--track-width);
+  }
+
+  .indicator {
+    stroke: var(--indicator-color);
+    stroke-width: var(--indicator-width);
+    stroke-linecap: round;
+    transition-property: stroke-dashoffset;
+    transition-duration: var(--indicator-transition-duration);
+    stroke-dasharray: var(--circumference) var(--circumference);
+    stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
+  }
+
+  .label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;