allow valid chars in ids; fixes #1648

* change svg paths to FA Free

* fix radio checked icon size/position

* fix native checkbox icon sizing

* ensure checkmark size changes

* prettier coming in clutch

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>
 
@@ -405,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/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/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

@@ -36,6 +36,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - 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]
+- Fixed a bug in `<wa-popover>` and `<wa-tooltip>` that prevented dots and other valid ID characters from being used [issue:1648]
 - 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]

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

@@ -230,7 +230,7 @@ export default class WaPopover extends WebAwesomeElement {
       return;
     }
 
-    const newAnchor = this.for ? rootNode.querySelector(`#${this.for}`) : null;
+    const newAnchor = this.for ? rootNode.getElementById(this.for) : null;
     const oldAnchor = this.anchor;
 
     if (newAnchor === oldAnchor) {

packages/webawesome/src/components/slider/slider.ts

@@ -690,8 +690,8 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
     if (!this.withTooltip) return;
 
     // Show only the active tooltip, hide the other
-    const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
-    const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
+    const tooltipMin = this.shadowRoot?.getElementById('tooltip-thumb-min') as WaTooltip;
+    const tooltipMax = this.shadowRoot?.getElementById('tooltip-thumb-max') as WaTooltip;
 
     if (this.activeThumb === 'min') {
       if (tooltipMin) tooltipMin.open = true;
@@ -705,8 +705,8 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
   private hideRangeTooltips() {
     if (!this.withTooltip) return;
 
-    const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
-    const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
+    const tooltipMin = this.shadowRoot?.getElementById('tooltip-thumb-min') as WaTooltip;
+    const tooltipMax = this.shadowRoot?.getElementById('tooltip-thumb-max') as WaTooltip;
 
     if (tooltipMin) tooltipMin.open = false;
     if (tooltipMax) tooltipMax.open = false;

packages/webawesome/src/components/tooltip/tooltip.ts

@@ -137,8 +137,7 @@ export default class WaTooltip extends WebAwesomeElement {
     this.eventController.abort();
 
     if (this.anchor) {
-      const label = this.anchor.getAttribute('aria-labelledby') || '';
-      this.anchor.setAttribute('aria-labelledby', label.replace(this.id, ''));
+      this.removeFromAriaLabelledBy(this.anchor, this.id);
     }
   }
 
@@ -202,6 +201,34 @@ export default class WaTooltip extends WebAwesomeElement {
     return triggers.includes(triggerType);
   }
 
+  /** Adds the tooltip ID to the aria-labelledby attribute */
+  private addToAriaLabelledBy(element: Element, id: string) {
+    const currentLabel = element.getAttribute('aria-labelledby') || '';
+    const labels = currentLabel.split(/\s+/).filter(Boolean);
+
+    // Only add if not already present
+    if (!labels.includes(id)) {
+      labels.push(id);
+      element.setAttribute('aria-labelledby', labels.join(' '));
+    }
+  }
+
+  /** Removes the tooltip ID from the aria-labelledby attribute */
+  private removeFromAriaLabelledBy(element: Element, id: string) {
+    const currentLabel = element.getAttribute('aria-labelledby') || '';
+    const labels = currentLabel.split(/\s+/).filter(Boolean);
+
+    // Remove the ID
+    const filteredLabels = labels.filter(label => label !== id);
+
+    if (filteredLabels.length > 0) {
+      element.setAttribute('aria-labelledby', filteredLabels.join(' '));
+    } else {
+      // Remove the attribute if empty
+      element.removeAttribute('aria-labelledby');
+    }
+  }
+
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.open) {
@@ -252,7 +279,7 @@ export default class WaTooltip extends WebAwesomeElement {
       return;
     }
 
-    const newAnchor = this.for ? rootNode.querySelector(`#${this.for}`) : null;
+    const newAnchor = this.for ? rootNode.getElementById(this.for) : null;
     const oldAnchor = this.anchor;
 
     if (newAnchor === oldAnchor) {
@@ -261,9 +288,6 @@ export default class WaTooltip extends WebAwesomeElement {
 
     const { signal } = this.eventController;
 
-    // "\\b" is a space boundary, used for making sure we don't add the tooltip to aria-labelledby twice.
-    const labelRegex = new RegExp(`\\b${this.id}\\b`);
-
     if (newAnchor) {
       /**
        * We use `aria-labelledby` because it seems to have the most consistent screen reader experience.
@@ -272,10 +296,7 @@ export default class WaTooltip extends WebAwesomeElement {
        * whereas with `aria-labelledby` it'll still read on first focus. The APG does and WAI-ARIA does recommend aria-describedby
        * so perhaps once we have cross-root aria, we can revisit this decision.
        */
-      const currentLabel = newAnchor.getAttribute('aria-labelledby') || '';
-      if (!currentLabel.match(labelRegex)) {
-        newAnchor.setAttribute('aria-labelledby', currentLabel + ' ' + this.id);
-      }
+      this.addToAriaLabelledBy(newAnchor, this.id);
 
       newAnchor.addEventListener('blur', this.handleBlur, { capture: true, signal });
       newAnchor.addEventListener('focus', this.handleFocus, { capture: true, signal });
@@ -285,8 +306,7 @@ export default class WaTooltip extends WebAwesomeElement {
     }
 
     if (oldAnchor) {
-      const label = oldAnchor.getAttribute('aria-labelledby') || '';
-      oldAnchor.setAttribute('aria-labelledby', label.replace(labelRegex, ''));
+      this.removeFromAriaLabelledBy(oldAnchor, this.id);
       oldAnchor.removeEventListener('blur', this.handleBlur, { capture: true });
       oldAnchor.removeEventListener('focus', this.handleFocus, { capture: true });
       oldAnchor.removeEventListener('click', this.handleClick);

packages/webawesome/src/styles/native.css

@@ -462,7 +462,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 +874,6 @@
   input[type='radio'] {
     appearance: none;
 
-    position: relative;
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
@@ -922,21 +921,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 +960,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 +1062,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 +1075,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);
       }
     }