use --wa-font-weight-code in native styles

* abstracting syntax coloring in code-highlighter.css

* adding initial custom properties to override colors
* light re-grouping of rules + color application

* fixup! removing `wa-` prefix

packages/webawesome/docs/_data/themer.js

@@ -12,22 +12,22 @@ export const themes = [
     isPro: false,
     fonts: {
       body: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
         css: 'ui-sans-serif, system-ui, sans-serif',
         href: null,
       },
       heading: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
         css: 'ui-sans-serif, system-ui, sans-serif',
         href: null,
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
       longform: {
-        name: 'OS Default',
+        name: 'OS Default (serif)',
         css: 'ui-serif, serif',
         href: null,
       },
@@ -82,7 +82,7 @@ export const themes = [
         href: 'https://fonts.bunny.net/css2?family=Quicksand:wght@300..700&display=swap',
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
@@ -132,22 +132,22 @@ export const themes = [
     isPro: false,
     fonts: {
       body: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
         css: 'ui-sans-serif, system-ui, sans-serif',
         href: null,
       },
       heading: {
-        name: 'OS Default',
+        name: 'OS Default (sans-serif)',
         css: 'ui-sans-serif, system-ui, sans-serif',
         href: null,
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
       longform: {
-        name: 'OS Default',
+        name: 'OS Default (serif)',
         css: 'ui-serif, serif',
         href: null,
       },
@@ -442,7 +442,7 @@ export const themes = [
         href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap',
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
@@ -562,7 +562,7 @@ export const themes = [
         href: 'https://fonts.bunny.net/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap',
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
@@ -622,12 +622,12 @@ export const themes = [
         href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
       },
       code: {
-        name: 'OS Default',
+        name: 'OS Default (monospace)',
         css: 'ui-monospace, monospace',
         href: null,
       },
       longform: {
-        name: 'OS Default',
+        name: 'OS Default (serif)',
         css: 'ui-serif, serif',
         href: null,
       },

packages/webawesome/docs/_includes/sidebar.njk

@@ -29,9 +29,6 @@
   <li><a href="/docs/resources/browser-support">Browser Support</a></li>
   <li><a href="/docs/resources/contributing">Contributing</a></li>
   <li><a href="/docs/resources/changelog">Changelog</a></li>
-  <li><a href="/license"><span class="wa-visually-hidden">Web Awesome </span>Free License</a></li>
-  <li><a href="/license/pro"><span class="wa-visually-hidden">Web Awesome </span>Pro License</a></li>
-  <li><a href="/tos">Terms of Service</a></li>
   <li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
 </ul>
 
@@ -383,12 +380,6 @@
 <ul>
   <li><a href="/docs/color-palettes">Color Palettes</a></li>
   <li><a href="/docs/themes">Themes</a></li>
-  <li>
-    <span class="wa-split">
-      <a href="/themer" data-turbo="false">Theme Builder</a>
-      {{ proBadge({ description: "This requires an active Web Awesome Pro subscription", shrink: true }) }}
-    </span>
-  </li>
 </ul>
 
 <!-- Design tokens -->
@@ -411,6 +402,16 @@
   </ul>
 </wa-details>
 
+{# Policies #}
+<h2>Terms &amp; Policies</h2>
+<ul>
+  <li><a href="/license"><span class="wa-visually-hidden">Web Awesome </span>Free License</a></li>
+  <li><a href="/license/pro"><span class="wa-visually-hidden">Web Awesome </span>Pro License</a></li>
+  <li><a href="/tos">Terms of Service</a></li>
+  <li><a href="/privacy">Privacy Policy</a></li>
+  <li><a href="/refunds">Refund Policy</a></li>
+</ul>
+
 <wa-divider style="--spacing: var(--wa-space-xl);"></wa-divider>
 
 <div class="wa-stack wa-gap-xl" id="colophon">

packages/webawesome/docs/assets/scripts/theme.js

@@ -38,7 +38,7 @@ async function updateTheme(value, isInitialLoad = false) {
   // Handle site theme vs regular theme
   let href = `/dist/styles/themes/${value}.css`;
 
-  if (document.querySelector('wa-page').dataset.pageType === 'site') {
+  if (document.querySelector('wa-page')?.dataset.pageType === 'site') {
     brand = 'orange';
     href = `/assets/styles/theme-site.css`;
     palette = 'default';

packages/webawesome/docs/assets/styles/code-highlighter.css

@@ -2,22 +2,25 @@
 pre[id*='code-block-'] {
   color-scheme: dark;
   color: white;
-  background-color: var(--wa-color-neutral-20);
+  background-color: var(--code-background, var(--wa-color-neutral-20));
 
   /* Ensures a discernible background color in dark mode
    * Useful for themes that use gray-20 as --wa-color-surface-default  */
   .wa-dark & {
-    background-color: var(--wa-color-surface-lowered);
+    background-color: var(--code-background-dark, var(--wa-color-surface-lowered));
   }
 }
 
 .code-comment,
 .code-prolog,
 .code-doctype,
-.code-cdata,
+.code-cdata {
+  color: var(--code-comment, var(--wa-color-gray-70));
+}
+
 .code-operator,
 .code-punctuation {
-  color: var(--wa-color-gray-70);
+  color: var(--code-operator, var(--wa-color-gray-70));
 }
 
 .code-namespace {
@@ -28,24 +31,27 @@ pre[id*='code-block-'] {
 .code-keyword,
 .code-tag,
 .code-url {
-  color: var(--wa-color-indigo-70);
+  color: var(--code-keyword, var(--wa-color-indigo-70));
 }
 
 .code-symbol,
 .code-deleted,
 .code-important {
-  color: var(--wa-color-red-70);
+  color: var(--code-error, var(--wa-color-red-70));
+}
+
+.code-string,
+.code-char,
+.code-constant {
+  color: var(--code-string, var(--wa-color-green-70));
 }
 
 .code-boolean,
-.code-constant,
 .code-selector,
 .code-attr-name,
-.code-string,
-.code-char,
 .code-builtin,
 .code-inserted {
-  color: var(--wa-color-green-70);
+  color: var(--code-literal, var(--wa-color-green-70));
 }
 
 .code-atrule,
@@ -55,7 +61,7 @@ pre[id*='code-block-'] {
 .code-function,
 .code-class-name,
 .code-regex {
-  color: var(--wa-color-blue-70);
+  color: var(--code-value, var(--wa-color-blue-70));
 }
 
 .code-important,

packages/webawesome/docs/assets/styles/docs.css

@@ -252,8 +252,9 @@ wa-button.delete {
   padding-bottom: 1rem;
 }
 
+wa-page::part(drawer__dialog),
 wa-page::part(menu) {
-  scrollbar-width: thin;
+  overflow: clip;
 }
 
 /* smaller viewports-based navigation */

packages/webawesome/docs/assets/styles/utils.css

@@ -166,6 +166,39 @@
       calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2),
       calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2);
   }
+
+  /* dot grid background */
+  .background-dot-grid {
+    --dot-spacing: 1.5rem;
+    --dot-radius: 1.5px;
+    --dot-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 85%);
+
+    background-image: radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent var(--dot-radius));
+    background-size: var(--dot-spacing) var(--dot-spacing);
+  }
+
+  /* wa illustration background pattern */
+  .background-wa-pattern {
+    position: relative;
+
+    & > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    &::after {
+      --background-pattern-image: url('/assets/images/bg-wa-pattern.svg');
+
+      position: absolute;
+      inset: 0;
+      background-color: var(--background-pattern-color, transparent);
+      background-image: var(--background-pattern-image);
+      background-repeat: repeat;
+      content: '';
+      opacity: var(--background-pattern-opacity, 0.3);
+      z-index: 0;
+    }
+  }
   /* #endregion */
 
   /* buttons with icon toggle on hover */

packages/webawesome/docs/docs/color-palettes.njk

@@ -121,7 +121,6 @@ layout: page
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
-      gap: var(--wa-space-s);
     }
 
     &::part(form-control-label) {

packages/webawesome/docs/docs/customizing.md

@@ -132,7 +132,7 @@ Most (but not all) components expose parts. You can find them in each component'
 
 If you're using [native styles](/docs/utilities/native), any custom styles added for a component should also target the corresponding native element. In general, the same styles you declare for components will work just the same to style their native counterparts.
 
-For example, we can give `<input type="checkbox">` the same custom styles as `<wa-checkbox>` by using the custom properties required to style the component:
+For example, we can give `<input type="checkbox">` the same custom styles as `<wa-checkbox>` by using standard CSS properties and CSS parts:
 
 ```html {.example}
 <wa-checkbox class="pinkify">Web Awesome checkbox</wa-checkbox>
@@ -143,60 +143,16 @@ For example, we can give `<input type="checkbox">` the same custom styles as `<w
 </label>
 
 <style>
-  wa-checkbox.pinkify,
+  wa-checkbox.pinkify::part(control),
   input[type='checkbox'].pinkify {
-    --background-color-checked: hotpink;
-    --border-color-checked: hotpink;
-    --border-width: 3px;
-    --checked-icon-color: lavenderblush;
-  }
-</style>
-```
-
-Or, if using CSS parts, we can give both checkboxes the same custom styles using standard CSS properties:
-
-```html {.example}
-<wa-checkbox class="purpleify">Web Awesome checkbox</wa-checkbox>
-<br />
-<label>
-  <input type="checkbox" class="purpleify" />
-  HTML checkbox
-</label>
-
-<style>
-  wa-checkbox.purpleify::part(control),
-  input[type='checkbox'].purpleify {
     border-width: 3px;
   }
 
-  wa-checkbox.purpleify:state(checked)::part(control),
-  input[type='checkbox'].purpleify:checked {
-    background-color: darkorchid;
-    border-color: darkorchid;
-    color: lavender;
+  wa-checkbox.pinkify:state(checked)::part(control),
+  input[type='checkbox'].pinkify:checked {
+    background-color: hotpink;
+    border-color: hotpink;
+    color: lavenderblush;
   }
 </style>
-```
-
-## Style Utilities
-
-Similarly, if you're using [style utilities](/docs/utilities), any custom styles added for a specific attribute variation of a component — such as `appearance`, `variant`, or `size` — should also target the corresponding style utility class. This ensures that the attribute and its utility class counterpart work interchangeably.
-
-For example, we can give all outlined callouts a thick left border, regardless of whether they are styled with `appearance="outlined"` or `class="wa-outlined"`:
-
-```html {.example}
-<wa-callout appearance="filled-outlined">
-  <wa-icon slot="icon" name="circle-star"></wa-icon>
-  Here's a callout with <code>appearance="outlined"</code>
-</wa-callout>
-<wa-callout class="wa-outlined wa-filled">
-  <wa-icon slot="icon" name="circle-star"></wa-icon>
-  Here's a callout with <code>class="wa-outlined"</code>
-</wa-callout>
-
-<style>
-  wa-callout:is([appearance~='outlined']) {
-    border-left-width: var(--wa-panel-border-radius);
-  }
-</style>
-```
+```

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

@@ -24,6 +24,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Added the Kazakh translation [pr:1496]
 - Added docs for code completion for VS Code and JetBrains [pr:1550]
 - Added back the missing `form-control-label` part to `<wa-textarea>` for consistency with other form controls [pr:1533]
+- Added focus delegation to `<wa-button>` to ensure tabbing works properly when using `tabindex` [issue:1622]
+- Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
 - Fixed a bug in `<wa-button>` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377]
 - Fixed focus outline styles in `<wa-details>` and native `<details>` [issue:1456]
 - Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
@@ -35,10 +37,11 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-icon>` that caused icon buttons to render when non-text nodes were slotted in [issue:1475]
 - Fixed a bug in `<wa-tooltip>` that prevented tooltips from showing when disconnecting and then reconnecting to the DOM [issue:1595]
 - Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `<wa-checkbox>` and `<wa-switch>` [issue:1472]
+- Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that caused the component to prematurely hide when certain child elements are used [pr:1636]
 - Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
-- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
 - Improved [text utilities](/docs/utilities/text/) so that each size modifier always exactly matches the applied font size [pr:1602]
-- Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
+- Improved Native Styles to use the `--wa-font-weight-code` design token
+- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
 - Upgraded `<wa-page>` from _experimental_ to _stable_
 
 ## 3.0.0-beta.6

packages/webawesome/docs/docs/themes.njk

@@ -1,26 +1,28 @@
 ---
 title: Themes
-description: Themes galore
+description: Style (and restyle) your website at will with any of Web Awesome's pre-built themes.
 layout: page
 ---
 
-<div class="wa-split">
-  <h1>{{ title }}</h1>
-  <wa-button variant="brand" href="/themer">
-    <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
-    Create a Theme
-  </wa-button>
-</div>
+<h1>{{ title }}</h1>
+
+<p>Themes are collections of <a href="/docs/tokens">design tokens</a> that give a cohesive look and feel to the entire Web Awesome library. Style and restyle your website at will by loading any pre-built theme.</p>
+
+{% raw %}
+<p>See one you like?&nbsp;
+{%- if not session.isLoggedIn -%}
+  <a href="/login">Log in</a>&nbsp;
+{%- else -%}
+  Head over to <a href="/teams">your teams</a>&nbsp;
+{%- endif -%}
+to create a project with any one of these themes.
+{%- if not currentUser.hasPro -%}
+  &nbsp;(Plus, there are even more themes to love with Web Awesome Pro. <wa-icon name="heart" style="color: var(--wa-color-red-70);"></wa-icon>)
+{%- endif -%}
+</p>
+{% endraw %}
 
 <div id="theme-viewer">
-  {% raw %}
-    {% if not currentUser.hasPro %}
-      <p>
-        Additional themes are available to pro users. Please <a href="/login">login to view pro themes</a>.
-      </p>
-    {% endif %}
-  {% endraw %}
-
   <wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
     {% for theme in themer.themes %}
       {% if not theme.isPro %}
@@ -223,13 +225,14 @@ layout: page
   }
 
   #theme-viewer {
+    margin-block-start: 2rem;
+
     #theme-picker {
 
       &::part(form-control-input) {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        gap: var(--wa-space-s);
       }
 
       &::part(form-control-label) {

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

@@ -41,6 +41,7 @@ import styles from './button.css';
  */
 @customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
+  static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
   static css = [styles, variantStyles, sizeStyles];
 
   static get validators() {

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

@@ -119,6 +119,19 @@ describe('<wa-dialog>', () => {
         expect(el.open).to.be.true;
       });
 
+      it('should not close when bubbled cancel event originates from within the drawer', async () => {
+        const el = await fixture<WaDialog>(html` <wa-dialog open><input type="file" /></wa-dialog> `);
+        const input = el.querySelector('input')!;
+
+        await clickOnElement(el); // Chromium wants the page to have been clicked prior to closing the dialog.
+        const cancelEvent = new Event('cancel', { bubbles: true });
+        input.dispatchEvent(cancelEvent);
+
+        await aTimeout(250);
+
+        expect(el.open).to.be.true;
+      });
+
       it('should allow initial focus to be set', async () => {
         const el = await fixture<WaDialog>(html` <wa-dialog><wa-input autofocus></wa-input></wa-dialog> `);
         const input = el.querySelector('wa-input')!;

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

@@ -129,7 +129,7 @@ export default class WaDialog extends WebAwesomeElement {
   private handleDialogCancel(event: Event) {
     event.preventDefault();
 
-    if (!this.dialog.classList.contains('hide')) {
+    if (!this.dialog.classList.contains('hide') && event.target === this.dialog) {
       this.requestClose(this.dialog);
     }
   }

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

@@ -115,6 +115,18 @@ describe('<wa-drawer>', () => {
         expect(el.open).to.be.true;
       });
 
+      it('should not close when bubbled cancel event originates from within the drawer', async () => {
+        const el = await fixture<WaDrawer>(html`<wa-drawer open><input type="file" /></wa-drawer>`);
+        const input = el.querySelector('input')!;
+
+        const cancelEvent = new Event('cancel', { bubbles: true });
+        input.dispatchEvent(cancelEvent);
+
+        await aTimeout(250);
+
+        expect(el.open).to.be.true;
+      });
+
       it('should allow initial focus to be set', async () => {
         const el = await fixture<WaDrawer>(html` <wa-drawer><wa-input autofocus></wa-input></wa-drawer> `);
         const input = el.querySelector('wa-input')!;

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

@@ -141,7 +141,7 @@ export default class WaDrawer extends WebAwesomeElement {
   private handleDialogCancel(event: Event) {
     event.preventDefault();
 
-    if (!this.drawer.classList.contains('hide')) {
+    if (!this.drawer.classList.contains('hide') && event.target === this.drawer) {
       this.requestClose(this.drawer);
     }
   }

packages/webawesome/src/styles/native.css

@@ -228,6 +228,7 @@
 
     font-family: var(--wa-font-family-code);
     font-size: var(--wa-font-size-smaller);
+    font-weight: var(--wa-font-weight-code);
 
     border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
     border-radius: var(--wa-border-radius-s);
@@ -281,6 +282,7 @@
 
     font-family: var(--wa-font-family-code);
     font-size: var(--wa-font-size-smaller);
+    font-weight: var(--wa-font-weight-code);
 
     background-color: var(--wa-color-overlay-inline);
     border-radius: var(--wa-border-radius-s);
@@ -291,6 +293,7 @@
 
     font-family: var(--wa-font-family-code);
     font-size: var(--wa-font-size-smaller);
+    font-weight: var(--wa-font-weight-code);
     white-space: pre;
 
     background-color: var(--wa-color-overlay-inline);
@@ -462,7 +465,7 @@
     &::after {
       content: '';
       background-color: var(--wa-color-text-quiet);
-      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
+      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
         center no-repeat;
       width: 1rem;
       height: 1rem;
@@ -874,7 +877,6 @@
   input[type='radio'] {
     appearance: none;
 
-    position: relative;
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
@@ -922,21 +924,18 @@
 
     &:checked::after,
     &:indeterminate::after {
-      position: absolute;
-
-      width: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
-      height: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
-
       content: '';
 
-      background-color: currentColor;
-
+      width: var(--wa-form-control-toggle-size);
+      height: var(--wa-form-control-toggle-size);
       scale: var(--checked-icon-scale);
+
+      background-color: currentColor;
     }
 
     &:checked::after {
-      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
-        center no-repeat;
+      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
+        center / 1em 1em no-repeat;
     }
 
     &:indeterminate::after {
@@ -964,7 +963,8 @@
       content: '';
 
       aspect-ratio: 1;
-      width: round(calc(100% * var(--checked-icon-scale)), 1px);
+      width: 100%;
+      scale: var(--checked-icon-scale);
 
       background-color: currentColor;
       border-radius: 50%;
@@ -1065,9 +1065,7 @@
 
   /* Select */
   select {
-    --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path fill="rgb(180 180 200)" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
-
-    --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="rgb(180 180 200)" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
+    --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="rgb(180 180 200)" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
 
     appearance: none;
 
@@ -1080,6 +1078,7 @@
     background-repeat: no-repeat;
     background-position: center right var(--wa-form-control-padding-inline);
     background-blend-mode: hue, difference;
+    background-size: 1rem 1rem;
 
     cursor: pointer;
   }

packages/webawesome/src/styles/themes/shoelace.css

@@ -457,7 +457,7 @@
         border-color: var(--wa-color-gray-50);
       }
 
-      &[checked]::part(control) {
+      &:state(checked)::part(control) {
         background-color: var(--wa-form-control-activated-color);
         border-color: var(--wa-form-control-activated-color);
       }
@@ -466,7 +466,7 @@
         background-color: var(--wa-color-surface-default);
         border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-gray-50);
       }
-      &[checked]::part(thumb) {
+      &:state(checked)::part(thumb) {
         border-color: var(--wa-form-control-activated-color);
       }
     }