From a1e879035c321e6124465cd5072d754310db461d Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Thu, 10 Jul 2025 15:36:03 -0400
Subject: [PATCH 01/14] Fix code example styles (#1156)

---
 packages/webawesome/docs/_utils/code-examples.js     |  4 +++-
 .../webawesome/docs/assets/styles/code-examples.css  | 12 ++----------
 .../docs/assets/styles/code-highlighter.css          |  3 ++-
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/webawesome/docs/_utils/code-examples.js b/packages/webawesome/docs/_utils/code-examples.js
index 5b7a9a8b6..84b2d28d4 100644
--- a/packages/webawesome/docs/_utils/code-examples.js
+++ b/packages/webawesome/docs/_utils/code-examples.js
@@ -37,7 +37,9 @@ export function codeExamplesPlugin(options = {}) {
         const codeExample = parse(`
           <div class="code-example ${isOpen ? 'open' : ''}">
             <div class="code-example-preview">
-              ${preview}
+              <div>
+                ${preview}
+              </div>
               <div class="code-example-resizer" aria-hidden="true">
                 <wa-icon name="grip-lines-vertical"></wa-icon>
               </div>
diff --git a/packages/webawesome/docs/assets/styles/code-examples.css b/packages/webawesome/docs/assets/styles/code-examples.css
index 5fd30af62..11a64f692 100644
--- a/packages/webawesome/docs/assets/styles/code-examples.css
+++ b/packages/webawesome/docs/assets/styles/code-examples.css
@@ -100,8 +100,8 @@
 .code-example-buttons {
   display: flex;
   align-items: stretch;
-  background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
-  color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
+  background: var(--wa-color-surface-default);
+  color: var(--wa-color-text-quiet);
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 
@@ -116,14 +116,6 @@
     padding: 0.5rem;
     cursor: pointer;
 
-    @media (hover: hover) {
-      &:hover {
-        border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet) !important; /* TODO - remove after native styles refactor */
-        background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
-        color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
-      }
-    }
-
     &:first-of-type {
       border-left: none;
       border-bottom-left-radius: var(--wa-border-radius-l);
diff --git a/packages/webawesome/docs/assets/styles/code-highlighter.css b/packages/webawesome/docs/assets/styles/code-highlighter.css
index f66eedd26..e99fb2fb5 100644
--- a/packages/webawesome/docs/assets/styles/code-highlighter.css
+++ b/packages/webawesome/docs/assets/styles/code-highlighter.css
@@ -1,7 +1,8 @@
 /* Only code blocks generated by our docs get these styles */
 pre[id*='code-block-'] {
-  background-color: var(--wa-color-gray-20);
+  color-scheme: dark;
   color: white;
+  background-color: 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  */

From c10e1e77c985fc62447d3aae7afe7e88d8d63138 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Thu, 10 Jul 2025 15:37:37 -0400
Subject: [PATCH 02/14] Update `<wa-select>` "Sizes" documentation (#1162)

---
 packages/webawesome/docs/docs/components/select.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webawesome/docs/docs/components/select.md b/packages/webawesome/docs/docs/components/select.md
index 6b90b7344..4aeb21d2f 100644
--- a/packages/webawesome/docs/docs/components/select.md
+++ b/packages/webawesome/docs/docs/components/select.md
@@ -173,7 +173,7 @@ Use `<wa-divider>` to group listbox items visually. You can also use `<small>` t
 
 ### Sizes
 
-Use the `size` attribute to change a select's size. Note that size does not apply to listbox options.
+Use the `size` attribute to change a select's size.
 
 ```html {.example}
 <wa-select placeholder="Small" size="small">

From 3b6c018fed15fabc177641d41c1baa25c9aab6c2 Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Thu, 10 Jul 2025 15:40:45 -0400
Subject: [PATCH 03/14] Fix react imports to include a class name (#1158)

---
 packages/webawesome/docs/_layouts/component.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webawesome/docs/_layouts/component.njk b/packages/webawesome/docs/_layouts/component.njk
index a5594cec1..2a0cd4947 100644
--- a/packages/webawesome/docs/_layouts/component.njk
+++ b/packages/webawesome/docs/_layouts/component.njk
@@ -288,7 +288,7 @@
       <p>
         To manually import this component from React, use the following code.
       </p>
-      <pre><code class="language-js">import '@awesome.me/webawesome/dist/react/{{ componentName }}';</code></pre>
+      <pre><code class="language-js">import {{ component.name }} from '@awesome.me/webawesome/dist/react/{{ componentName }}';</code></pre>
     </wa-tab-panel>
   </wa-tab-group>
 

From f49c10b05bf9fb23d052efec0c9a915802fd6040 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Fri, 11 Jul 2025 15:03:18 -0400
Subject: [PATCH 04/14] Replace old `--wa-flow-spacing` with
 `--wa-content-spacing` (#1157)

* remove old `--wa-flow-spacing`

* add changelog
---
 packages/webawesome/docs/assets/styles/code-examples.css | 2 +-
 packages/webawesome/docs/assets/styles/docs.css          | 8 ++------
 packages/webawesome/docs/docs/resources/changelog.md     | 1 +
 packages/webawesome/docs/docs/resources/community.md     | 6 +++---
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/webawesome/docs/assets/styles/code-examples.css b/packages/webawesome/docs/assets/styles/code-examples.css
index 11a64f692..1e213f323 100644
--- a/packages/webawesome/docs/assets/styles/code-examples.css
+++ b/packages/webawesome/docs/assets/styles/code-examples.css
@@ -3,7 +3,7 @@
   border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
   border-radius: var(--wa-border-radius-l);
   color: var(--wa-color-text-normal);
-  margin-block-end: var(--wa-flow-spacing);
+  margin-block-end: var(--wa-content-spacing);
   isolation: isolate;
 }
 
diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css
index 4daa4b299..ba413cb2c 100644
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -26,10 +26,6 @@ body.theme-transitioning {
   transition: opacity 200ms ease-out;
 }
 
-wa-page {
-  --wa-flow-spacing: var(--wa-space-xl);
-}
-
 /* Header */
 wa-page::part(header) {
   background-color: var(--wa-color-surface-default);
@@ -314,7 +310,7 @@ h1.title {
   gap: var(--wa-space-xs);
   flex-wrap: wrap;
   align-items: center;
-  margin-block-end: var(--wa-flow-spacing);
+  margin-block-end: var(--wa-content-spacing);
 
   code {
     line-height: var(--wa-line-height-condensed);
@@ -357,7 +353,7 @@ h1.title {
   border: var(--wa-border-style) var(--wa-border-width-s);
   border-radius: var(--wa-border-radius-l);
   padding: 1rem;
-  margin-block-end: var(--wa-flow-spacing);
+  margin-block-end: var(--wa-content-spacing);
 
   :first-child {
     margin-block-start: 0;
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index b6b5bb5d8..f24c96517 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -92,6 +92,7 @@ Many of these changes and improvements were the direct result of feedback from u
 - Added a new free component: `<wa-zoomable-frame>` (#3 of 14 per stretch goals)
 - Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height
 - Added support for `name` in `<wa-details>` for exclusively opening one in a group
+- Added `--wa-content-spacing` to themes to set default spacing between HTML elements in Native Styles
 - Added `--checked-icon-scale` to `<wa-checkbox>`
 - Added `--tag-max-size` to `<wa-select>` when using `multiple`
 - Added support for `data-dialog="open <id>"` to `<wa-dialog>`
diff --git a/packages/webawesome/docs/docs/resources/community.md b/packages/webawesome/docs/docs/resources/community.md
index 502d1d243..66b5805ce 100644
--- a/packages/webawesome/docs/docs/resources/community.md
+++ b/packages/webawesome/docs/docs/resources/community.md
@@ -17,7 +17,7 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
 - Show the community what you're working on
 - Learn more about the project, its values, and its roadmap
 
-<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
+<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
   <wa-icon name="github" family="brands" slot="start"></wa-icon>
   Join the Discussion
 </wa-button>
@@ -31,7 +31,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 - Show the community what you're working on
 - Chat live with other designers, developers, and Web Awesome fans
 
-<wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
+<wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
   <wa-icon name="discord" family="brands" slot="start"></wa-icon>
   Join the Chat
 </wa-button>
@@ -42,7 +42,7 @@ Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general up
 
 **Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
 
-<wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
+<wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
   <wa-icon name="twitter" family="brands" slot="start"></wa-icon>
   Follow on Twitter
 </wa-button>
\ No newline at end of file

From f65bc3918ec3ef6639a95e997ffe5de957d3daa0 Mon Sep 17 00:00:00 2001
From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com>
Date: Mon, 14 Jul 2025 21:48:18 +0200
Subject: [PATCH 05/14] fix: fix the language name in `it.ts` (#1171)

---
 packages/webawesome/src/translations/it.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webawesome/src/translations/it.ts b/packages/webawesome/src/translations/it.ts
index 330665423..890099265 100644
--- a/packages/webawesome/src/translations/it.ts
+++ b/packages/webawesome/src/translations/it.ts
@@ -3,7 +3,7 @@ import type { Translation } from '../utilities/localize.js';
 
 const translation: Translation = {
   $code: 'it',
-  $name: 'Italian',
+  $name: 'Italiano',
   $dir: 'ltr',
 
   carousel: 'Carosello',

From f5624fbf4a44582f983207f07960d12945c83028 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 14 Jul 2025 16:05:02 -0400
Subject: [PATCH 06/14] Slider hint (#1174)

* update example

* show hint in correct position when present

* update example

* update example
---
 .../webawesome/docs/docs/components/slider.md | 25 ++++++++++++------
 .../docs/docs/resources/changelog.md          |  6 ++++-
 .../src/components/slider/slider.ts           | 26 +++++++++++++------
 3 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/packages/webawesome/docs/docs/components/slider.md b/packages/webawesome/docs/docs/components/slider.md
index 3db02b645..5b0bb6b28 100644
--- a/packages/webawesome/docs/docs/components/slider.md
+++ b/packages/webawesome/docs/docs/components/slider.md
@@ -7,8 +7,8 @@ category: Form Controls
 
 ```html {.example}
 <wa-slider
-  label="Number of cats"
-  hint="Limit six per household"
+  label="Number of users"
+  hint="Limit six per team"
   name="value"
   value="3"
   min="0"
@@ -40,7 +40,7 @@ Use the `label` attribute to give the slider an accessible label. For labels tha
 Add descriptive hint to a slider with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
 
 ```html {.example}
-<wa-slider label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-slider>
+<wa-slider label="Volume" hint="Controls the volume of the current song." min="0" max="100" value="50"></wa-slider>
 ```
 
 ### Showing tooltips
@@ -72,7 +72,15 @@ Use the `with-markers` attribute to display visual indicators at each step incre
 Use the `reference` slot to add contextual labels below the slider. References are automatically spaced using `space-between`, making them easy to align with the start, center, and end positions.
 
 ```html {.example}
-<wa-slider label="Speed" name="speed" min="1" max="5" value="3" with-markers>
+<wa-slider
+  label="Speed"
+  name="speed"
+  min="1"
+  max="5"
+  value="3"
+  with-markers
+  hint="Controls the speed of the thing you're currently doing."
+>
   <span slot="reference">Slow</span>
   <span slot="reference">Medium</span>
   <span slot="reference">Fast</span>
@@ -249,8 +257,8 @@ By default, the filled indicator extends from the minimum value to the current p
 
 ```html {.example}
 <wa-slider
-  label="Cat playfulness"
-  hint="Energy level during playtime"
+  label="User Friendliness"
+  hint="Did you find our product easy to use?"
   name="value"
   value="0"
   min="-5"
@@ -259,8 +267,9 @@ By default, the filled indicator extends from the minimum value to the current p
   with-markers
   with-tooltip
 >
-  <span slot="reference">Lazy</span>
-  <span slot="reference">Zoomies</span>
+  <span slot="reference">Easy</span>
+  <span slot="reference">Moderate</span>
+  <span slot="reference">Difficult</span>
 </wa-slider>
 ```
 
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index f24c96517..3f067140c 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -8,6 +8,10 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes
 
 Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
 
+## Next
+
+- Fixed a bug in `<wa-slider>` that prevented the hint from showing up
+
 ## 3.0.0-beta.2
 
 ### New Features {data-no-outline}
@@ -375,4 +379,4 @@ Many of these changes and improvements were the direct result of feedback from u
 
 </details>
 
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
\ No newline at end of file
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
diff --git a/packages/webawesome/src/components/slider/slider.ts b/packages/webawesome/src/components/slider/slider.ts
index 0341c862c..5bd393564 100644
--- a/packages/webawesome/src/components/slider/slider.ts
+++ b/packages/webawesome/src/components/slider/slider.ts
@@ -769,8 +769,10 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
   }
 
   render() {
-    const hasLabel = this.hasSlotController.test('label');
-    const hasHint = this.hasSlotController.test('hint');
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasHintSlot = this.hasSlotController.test('hint');
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHint = this.hint ? true : !!hasHintSlot;
     const hasReference = this.hasSlotController.test('reference');
 
     const sliderClasses = classMap({
@@ -791,7 +793,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
     }
 
     // Common UI fragments
-    const labelAndHint = html`
+    const label = html`
       <label
         id="label"
         part="label"
@@ -801,8 +803,16 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
       >
         <slot name="label">${this.label}</slot>
       </label>
+    `;
 
-      <div id="hint" part="hint" class=${classMap({ vh: !hasHint })}>
+    const hint = html`
+      <div
+        id="hint"
+        part="hint"
+        class=${classMap({
+          'has-slotted': hasHint,
+        })}
+      >
         <slot name="hint">${this.hint}</slot>
       </div>
     `;
@@ -856,7 +866,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
       const maxThumbPosition = clamp(this.getPercentageFromValue(this.maxValue), 0, 100);
 
       return html`
-        ${labelAndHint}
+        ${label}
 
         <div id="slider" part="slider" class=${sliderClasses}>
           <div id="track" part="track">
@@ -914,7 +924,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
             ></span>
           </div>
 
-          ${referencesTemplate}
+          ${referencesTemplate} ${hint}
         </div>
 
         ${createTooltip('thumb-min', this.minValue)} ${createTooltip('thumb-max', this.maxValue)}
@@ -929,7 +939,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
       );
 
       return html`
-        ${labelAndHint}
+        ${label}
 
         <div
           id="slider"
@@ -963,7 +973,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
             <span id="thumb" part="thumb" style="--position: ${thumbPosition}%"></span>
           </div>
 
-          ${referencesTemplate}
+          ${referencesTemplate} ${hint}
         </div>
 
         ${createTooltip('thumb', this.value)}

From f621fbb224709288904b021570e65f42891d6391 Mon Sep 17 00:00:00 2001
From: Joe Marquardt <82404108+dotjoe@users.noreply.github.com>
Date: Mon, 14 Jul 2025 15:13:11 -0500
Subject: [PATCH 07/14] fix the build on windows (#1148)

- make-react importPath variable
 - esbuild entryPoints globby usage requires forward slashes
---
 packages/webawesome/scripts/build.js      | 8 ++++----
 packages/webawesome/scripts/make-react.js | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/webawesome/scripts/build.js b/packages/webawesome/scripts/build.js
index ac300ccd6..5ef2acec0 100644
--- a/packages/webawesome/scripts/build.js
+++ b/packages/webawesome/scripts/build.js
@@ -8,7 +8,7 @@ import { replace } from 'esbuild-plugin-replace';
 import { mkdir, readFile } from 'fs/promises';
 import getPort, { portNumbers } from 'get-port';
 import { globby } from 'globby';
-import { dirname, join, relative } from 'node:path';
+import { dirname, join, posix, relative } from 'node:path';
 import process from 'node:process';
 import { fileURLToPath } from 'node:url';
 import ora from 'ora';
@@ -186,11 +186,11 @@ export async function build(options = {}) {
         join(rootDir, 'src/webawesome.loader.ts'),
         join(rootDir, 'src/webawesome.ssr-loader.ts'),
         // Individual components
-        ...(await globby(join(rootDir, 'src/components/**/!(*.(style|test)).ts'))),
+        ...(await globby(posix.join(rootDir, 'src/components/**/!(*.(style|test)).ts'))),
         // Translations
-        ...(await globby(join(rootDir, 'src/translations/**/*.ts'))),
+        ...(await globby(posix.join(rootDir, 'src/translations/**/*.ts'))),
         // React wrappers
-        ...(await globby(join(rootDir, 'src/react/**/*.ts'))),
+        ...(await globby(posix.join(rootDir, 'src/react/**/*.ts'))),
       ],
       outdir: getCdnDir(),
       chunkNames: 'chunks/[name].[hash]',
diff --git a/packages/webawesome/scripts/make-react.js b/packages/webawesome/scripts/make-react.js
index 402e46295..72d135112 100644
--- a/packages/webawesome/scripts/make-react.js
+++ b/packages/webawesome/scripts/make-react.js
@@ -25,7 +25,7 @@ for await (const component of components) {
   const tagWithoutPrefix = component.tagName.replace(/^wa-/, '');
   const componentDir = path.join(reactDir, tagWithoutPrefix);
   const componentFile = path.join(componentDir, 'index.ts');
-  const importPath = path.relative(srcDir, component.path);
+  const importPath = path.posix.relative(srcDir, component.path);
 
   // We only want to wrap wa- prefixed events, because the others are native
   const eventsToWrap = component.events?.filter(event => event.name.startsWith('wa-')) || [];

From 5b544102126134e2af9c38ed3bf40292959a79b7 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Mon, 14 Jul 2025 16:21:15 -0400
Subject: [PATCH 08/14] Revise native styles documentation (#1153)

---
 .../webawesome/docs/assets/styles/docs.css    |   9 +-
 .../webawesome/docs/docs/utilities/native.md  | 627 +++++++++---------
 packages/webawesome/src/styles/native.css     |  14 +-
 3 files changed, 317 insertions(+), 333 deletions(-)

diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css
index ba413cb2c..8489f562e 100644
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -144,8 +144,8 @@ wa-page > header {
     border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
     font-size: var(--wa-font-size-s);
     line-height: var(--wa-line-height-condensed);
-    margin: 0;
     padding-inline-start: var(--wa-space-m);
+    margin: 0;
   }
 
   ul ul {
@@ -158,6 +158,7 @@ wa-page > header {
 
   li {
     list-style: none;
+    margin: 0;
 
     + li {
       margin-block-start: var(--wa-space-m);
@@ -620,12 +621,6 @@ table.colors {
   min-inline-size: 8rem;
 }
 
-/* Utilities */
-.two-columns {
-  columns: 2;
-  gap: 1rem;
-}
-
 /* Component API tables */
 wa-scroller:has(.component-table) {
   margin-block-end: var(--wa-space-xl);
diff --git a/packages/webawesome/docs/docs/utilities/native.md b/packages/webawesome/docs/docs/utilities/native.md
index 1d9ee27ba..6d0759dfc 100644
--- a/packages/webawesome/docs/docs/utilities/native.md
+++ b/packages/webawesome/docs/docs/utilities/native.md
@@ -5,27 +5,52 @@ layout: page-outline
 tags: styleUtilities
 ---
 
-Web Awesome provides optional Native Styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
+Native styles use design tokens to spruce up native HTML elements so that they match the look and feel of your theme. While these native styles are completely optional, they're a great starting point for a cohesive design and a huge help when using a combination of native elements and Web Awesome components in your project.
 
-## Installation
+## Using native styles
 
-To use all Web Awesome page styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project:
+To use all Web Awesome styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project:
 
 ```html
 <link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
 ```
 
-Or, to _only_ include styles for native elements:
+Or, if you only want styles for native elements, include the default theme and native styles individually:
 
 ```html
+<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
 <link rel="stylesheet" href="{% cdnUrl 'styles/native.css' %}" />
 ```
 
-## Elements
+You can additionally include any pre-made [theme](/docs/themes/) or [color palette](/docs/color-palettes/) to change the look of native elements.
+
+## Content flow
+
+Native styles set default space between many block-level HTML elements using the `--wa-content-spacing` token from your theme. This helps ensure that your content is readable.
+
+```html {.example}
+<h3>Curabitur odio ligula</h3>
+<p>Fusce mollis quam lorem, et gravida arcu laoreet ut. Pellentesque et malesuada mi. Morbi faucibus nisl nec nulla porta, ac scelerisque elit finibus.</p>
+<blockquote>The Road goes ever on and on<br />
+Out from the door where it began.</blockquote>
+<p>Donec varius, ipsum sit amet lobortis tristique, quam arcu pellentesque turpis, non porta lacus arcu non arcu. Morbi luctus at nisl sit amet faucibus.</p>
+<hr />
+<ul>
+  <li>Aenean imperdiet</li>
+  <li>Vivamus consectetur at est</li>
+  <li>Quisque vel leo in leo semper</li>
+</ul>
+```
+
+To remove this default spacing, you can set `--wa-content-spacing: 0` in your styles.
+
+## Typography
+
+Native styles use [typography design tokens](/docs/tokens/typography/) to style text elements. A number of styles — such as `color`, `font-family`, `font-size`, `font-weight`, and `line-height` — are set on the `<body>` element to be inherited by child elements.
 
 ### Headings
 
-Semantic heading elements with proper hierarchy and styling.
+Create headings with `<h1>` through `<h6>`. Headings use tokens with the `-heading` suffix, condensed line height, and `text-wrap: balance` for a prominent yet compact appearance.
 
 ```html {.example}
 <h1>Heading 1</h1>
@@ -38,7 +63,7 @@ Semantic heading elements with proper hierarchy and styling.
 
 ### Paragraphs
 
-Standard paragraph text with optimal spacing and readability.
+Create paragraphs with `<p>`. Paragraphs inherit the default text styles set on the `<body>` element and use `text-wrap: pretty` to prevent orphaned lines in supported browsers.
 
 ```html {.example}
 <p>
@@ -55,7 +80,7 @@ Standard paragraph text with optimal spacing and readability.
 
 ### Blockquotes
 
-Styled quotations that stand out from regular text.
+Emphasize longer quotations with `<blockquote>`. Block quotes use your theme's serif font family and a leading border to stand out.
 
 ```html {.example}
 <blockquote>
@@ -67,51 +92,51 @@ Styled quotations that stand out from regular text.
 
 ### Lists
 
-Organized content in bulleted or numbered format with proper nesting support.
+Create ordered and unordered lists with `<ol>` and `<ul>`, plus `<li>` for list items within.
 
 ```html {.example}
-<ul>
-  <li>List item 1</li>
-  <li>
-    List item 2
-    <ul>
-      <li>Subitem a</li>
-      <li>Subitem b</li>
-    </ul>
-  </li>
-  <li>List item 3</li>
-</ul>
+<div class="wa-grid">
+  <ol>
+    <li>First item</li>
+    <li>
+      Another item
+      <ol>
+        <li>Nested item</li>
+        <li>Another nested item</li>
+      </ol>
+    </li>
+    <li>Final item</li>
+  </ol>
 
-<ol>
-  <li>List item 1</li>
-  <li>
-    List item 2
-    <ol>
-      <li>Subitem a</li>
-      <li>Subitem b</li>
-    </ol>
-  </li>
-  <li>List item 3</li>
-</ol>
+  <ul>
+    <li>First item</li>
+    <li>
+      Another item
+      <ul>
+        <li>Nested item</li>
+        <li>Another nested item</li>
+      </ul>
+    </li>
+    <li>Final item</li>
+  </ul>
+</div>
 ```
 
-### Description Lists
-
-Term and definition pairs for glossaries and descriptions.
+Use `<dl>` to create lists of terms (`<dt>`) and definitions (`<dd>`).
 
 ```html {.example}
 <dl>
-  <dt>Definition 1</dt>
+  <dt>First term</dt>
   <dd>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   </dd>
-  <dt>Definition 2</dt>
+  <dt>Second term</dt>
   <dd>
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
     sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </dd>
-  <dt>Definition 3</dt>
+  <dt>Final term</dt>
   <dd>
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
     eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
@@ -119,13 +144,153 @@ Term and definition pairs for glossaries and descriptions.
 </dl>
 ```
 
+### Code blocks
+
+Create code blocks or other preformatted text with `<pre>`. Preformatted text uses your theme's monospace font family and a subtle background color.
+
+```html {.example}
+<pre>
+// do a thing
+export function thing() {
+  return true;
+}
+</pre>
+```
+
+### Inline text
+
+Use any inline text element like `<strong>`, `<em>`, `<a>`, `<kbd>`, and others to stylize or emphasize text.
+
+```html {.example}
+<div class="wa-grid">
+  <div class="wa-stack wa-align-items-start">
+    <strong>Bold</strong>
+    <em>Italic</em>
+    <u>Underline</u>
+    <s>Strike-through</s>
+    <del>Deleted</del>
+    <ins>Inserted</ins>
+    <small>Small</small>
+  </div>
+  <div class="wa-stack wa-align-items-start">
+    <span>Subscript <sub>Sub</sub></span>
+    <span>Superscript <sup>Sup</sup></span>
+    <abbr title="Abbreviation">Abbr.</abbr>
+    <mark>Highlighted</mark>
+    <a href="#">Link text</a>
+    <code>Inline code</code>
+    <kbd>Keyboard</kbd>
+  </div>
+</div>
+```
+
+## Widgets & media
+
+### Media
+
+Add responsive media with `<img>`, `<svg>`, `<video>`, `<iframe>`, and others. Media takes up 100% width by default and scales according to its container's width.
+
+```html {.example}
+<img 
+  src="https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
+  alt="A gray kitten lays next to a toy"
+/>
+```
+
+### Tables
+
+Structure tabular data with `<table>` and related elements like `<caption>`, `<thead>`, `<tbody>`, `<th>`, `<tr>`, and `<td>`.
+
+```html {.example}
+<table>
+  <caption>
+    This <code>&lt;caption&gt;</code> describes the table
+  </caption>
+  <thead>
+    <tr>
+      <th>First column</th>
+      <th>Second column</th>
+      <th>Third column</th>
+      <th>Final column</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+    </tr>
+    <tr>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+    </tr>
+    <tr>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+    </tr>
+    <tr>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+Add the `wa-hover-rows` class to highlight table rows on hover and the `wa-zebra-rows` class to add alternating row colors to your table.
+
+```html {.example}
+<table class="wa-zebra-rows wa-hover-rows">
+  <thead>
+    <tr>
+      <th>First column</th>
+      <th>Second column</th>
+      <th>Third column</th>
+      <th>Final column</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+    </tr>
+    <tr>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+    </tr>
+    <tr>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+    </tr>
+    <tr>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+      <td>Data</td>
+    </tr>
+  </tbody>
+</table>
+```
+
 ### Details
 
-Collapsible content sections with expand/collapse functionality.
+Create disclosure widgets with `<details>` and `<summary>`. Details closely match the appearance of [`<wa-details>`](/docs/components/details/).
 
 ```html {.example}
 <details>
-  <summary>Tincidunt nunc pulvinar</summary>
+  <summary>Summary</summary>
   <p>
     Ut lectus arcu bibendum at varius. Convallis a cras semper auctor neque vitae. Odio pellentesque diam volutpat
     commodo sed egestas. Amet dictum sit amet justo donec enim diam vulputate ut.
@@ -135,7 +300,7 @@ Collapsible content sections with expand/collapse functionality.
 
 ### Dialog
 
-Modal dialog windows for alerts, confirmations, and overlays.
+Create modal and non-modal dialog boxes with `<dialog>`. Dialogs closely match the appearance of [`<wa-dialog>`](/docs/components/dialog/).
 
 ```html {.example}
 <dialog id="dialog-example">
@@ -155,55 +320,9 @@ Modal dialog windows for alerts, confirmations, and overlays.
 </script>
 ```
 
-### Inline Text
+### Progress
 
-Various text formatting elements for emphasis and semantic meaning.
-
-```html {.example}
-<div class="two-columns">
-  <p><strong>Bold</strong></p>
-  <p><em>Italic</em></p>
-  <p><u>Underline</u></p>
-  <p><s>Strike-through</s></p>
-  <p><del>Deleted</del></p>
-  <p><ins>Inserted</ins></p>
-  <p><small>Small</small></p>
-  <p>
-    <span>Subscript <sub>Sub</sub></span>
-  </p>
-  <p>
-    <span>Superscript <sup>Sup</sup></span>
-  </p>
-  <p><abbr title="Abbreviation">Abbr.</abbr></p>
-  <p><mark>Highlighted</mark></p>
-  <p><a href="#">Link text</a></p>
-  <p><code>Inline code</code></p>
-  <p><kbd>Keyboard</kbd></p>
-</div>
-```
-
-### Code Blocks
-
-Formatted code snippets with proper syntax styling.
-
-```html {.example}
-<pre>
-// do a thing
-export function thing() {
-  return true;
-}
-</pre>
-```
-
-### Images
-
-Responsive images with proper scaling and styling.
-
-![A gray kitten lays next to a toy](https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
-
-### Progress Bars
-
-Visual indicators for task completion and loading states.
+Create progress indicators with `<progress>`. Progress indicators closely match the appearance of [`<wa-progress-bar>`](/docs/components/progress-bar/).
 
 ```html {.example}
 <progress value="40" max="100"></progress>
@@ -211,151 +330,43 @@ Visual indicators for task completion and loading states.
 <progress></progress>
 ```
 
-### Tables
+## Forms
 
-Structured data presentation with clean styling, optional row highlighting on hover, and optional zebra striping.
-
-```html {.example}
-<table>
-  <caption>
-    I'm just a table
-  </caption>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-You can use the `wa-hover-rows` class to highlight table rows on hover and the `wa-zebra-rows` class to add alternating row colors to your table.
-
-```html {.example}
-<table class="wa-zebra-rows wa-hover-rows">
-  <caption>
-    I'm just a table
-  </caption>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-## Form Controls
+Native styles use [form control design tokens](/docs/tokens/component-groups/#form-controls) to style form elements like buttons and inputs. Form elements additionally inherit `font-family` from the `<body>` element.
 
 ### Buttons
 
-Use the [variant utility classes](../utilities/color.md) to set the button's semantic variant.
+Create buttons with `<button>` or `<input type="button | submit | reset">`. Buttons closely match the appearance of [`<wa-button>`](/docs/components/button/).
 
 ```html {.example}
-<button class="wa-neutral"><wa-icon name="home"></wa-icon> Neutral</button>
+<button>Button</button>
+<input type="button" value="Input (button)" />
+<input type="submit" value="Input (submit)" />
+<input type="reset" value="Input (reset)" />
+```
+
+Add the `wa-brand`, `wa-neutral`, `wa-success`, `wa-warning`, or `wa-danger` class to specify the button's [color variant](/docs/utilities/color/).
+
+
+```html {.example}
+<button class="wa-neutral">Neutral</button>
 <button class="wa-brand">Brand</button>
 <button class="wa-success">Success</button>
 <button class="wa-warning">Warning</button>
 <button class="wa-danger">Danger</button>
 ```
 
-Use the [appearance utility classes](/docs/utilities/appearance) to change the button's visual appearance:
+Add the `wa-accent`, `wa-filled`, `wa-outlined`, or `wa-plain` class to specify the button's visual appearance.
 
 ```html {.example}
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-neutral">Accent</button>
-  <button class="wa-filled wa-outlined wa-neutral">Filled + Outlined</button>
-  <button class="wa-filled wa-neutral">Filled</button>
-  <button class="wa-outlined wa-neutral">Outlined</button>
-  <button class="wa-plain wa-neutral">Plain</button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-brand">Accent</button>
-  <button class="wa-filled wa-outlined wa-brand">Filled + Outlined</button>
-  <button class="wa-filled wa-brand">Filled</button>
-  <button class="wa-outlined wa-brand">Outlined</button>
-  <button class="wa-plain wa-brand">Plain</button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-success">Accent</button>
-  <button class="wa-filled wa-outlined wa-success">Filled + Outlined</button>
-  <button class="wa-filled wa-success">Filled</button>
-  <button class="wa-outlined wa-success">Outlined</button>
-  <button class="wa-plain wa-success">Plain</button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-warning">Accent</button>
-  <button class="wa-filled wa-outlined wa-warning">Filled + Outlined</button>
-  <button class="wa-filled wa-warning">Filled</button>
-  <button class="wa-outlined wa-warning">Outlined</button>
-  <button class="wa-plain wa-warning">Plain</button>
-</div>
-<div>
-  <button class="wa-accent wa-danger">Accent</button>
-  <button class="wa-filled wa-outlined wa-danger">Filled + Outlined</button>
-  <button class="wa-filled wa-danger">Filled</button>
-  <button class="wa-outlined wa-danger">Outlined</button>
-  <button class="wa-plain wa-danger">Plain</button>
-</div>
+<button class="wa-accent wa-neutral">Accent</button>
+<button class="wa-filled wa-outlined wa-neutral">Filled + Outlined</button>
+<button class="wa-filled wa-neutral">Filled</button>
+<button class="wa-outlined wa-neutral">Outlined</button>
+<button class="wa-plain wa-neutral">Plain</button>
 ```
 
-Use the [size utility classes](../utilities/size.md) to change a button's size.
+Add the `wa-size-s`, `wa-size-m`, or `wa-size-l` class to specify the size of the button.
 
 ```html {.example}
 <button class="wa-size-s">Small</button>
@@ -363,131 +374,113 @@ Use the [size utility classes](../utilities/size.md) to change a button's size.
 <button class="wa-size-l">Large</button>
 ```
 
-Use the `wa-pill` class to give buttons rounded edges.
+Add the `wa-pill` class to give buttons rounded edges.
 
 ```html {.example}
-<button class="wa-size-s wa-pill">Small</button>
-<button class="wa-size-m wa-pill">Medium</button>
-<button class="wa-size-l wa-pill">Large</button>
+<button class="wa-pill">Pill button</button>
 ```
 
-### Checkboxes
+### Form controls
 
-Multi-select form controls with checked, indeterminate, and disabled states.
+Create a variety of form controls with `<input type="">`, `<select>`, and `<textarea>`. Each control closely matches the appearance of the corresponding Web Awesome component.
 
 ```html {.example}
-<label><input type="checkbox" checked /> Checked</label><br />
-<label><input type="checkbox" class="indeterminate" /> Indeterminate</label><br />
-<label><input type="checkbox" disabled /> Disabled</label>
+<div class="wa-stack">
+  <label>Text <input type="text" placeholder="add some text" /></label>
+  <label>Date <input type="date" /></label>
+  <label>Time <input type="time" /></label>
+  <label>Number <input type="number" placeholder="12345" /></label>
+  <label>Color <input type="color" value="#f36944" /></label>
+  <label>Range <input type="range" /></label>
+  <label>Select
+    <select>
+      <option value="option-1">Option 1</option>
+      <option value="option-2">Option 2</option>
+      <option value="option-3">Option 3</option>
+    </select>
+  </label>
+  <label>Textarea <textarea placeholder="add more text"></textarea></label>
+  <div class="wa-cluster">
+    <label><input type="checkbox" checked /> Checked</label>
+    <label><input type="checkbox" class="indeterminate" /> Indeterminate</label>
+    <label><input type="checkbox" /> Unchecked</label>
+  </div>
+  <div class="wa-cluster">
+    <label><input type="radio" name="radio-group" value="1" checked /> First radio</label>
+    <label><input type="radio" name="radio-group" value="2" /> Second radio</label>
+    <label><input type="radio" name="radio-group" value="3" /> Third radio</label>
+  </div>
+</div>
 
 <script>
   document.querySelector('.indeterminate').indeterminate = true;
 </script>
 ```
 
-### Radios
-
-Single-select form controls for mutually exclusive choices.
-
-You can wrap native radios in a flex container to give them a horizontal or vertical orientation with even spacing. The convenience [`wa-cluster`](/docs/utilities/cluster) and [`wa-stack`](/docs/utilities/stack) utilities make this easy.
+Add the `wa-filled` class to an input to give it a filled background.
 
 ```html {.example}
-<div class="wa-cluster">
-  <label><input type="radio" name="b" value="1" checked /> Option 1</label>
-  <label><input type="radio" name="b" value="2" /> Option 2</label>
-  <label><input type="radio" name="b" value="3" /> Option 3</label>
-</div>
-
-<div class="wa-stack" style="margin-block-start: var(--wa-space-2xl);">
-  <label><input type="radio" name="g" value="1" checked /> Option 1</label>
-  <label><input type="radio" name="g" value="2" /> Option 2</label>
-  <label><input type="radio" name="g" value="3" /> Option 3</label>
-</div>
-```
-
-### Selects
-
-Dropdown menus for choosing from a list of options.
-
-```html {.example}
-<label
-  >Select
-  <select id="select">
-    <option value="option-1">Option 1</option>
-    <option value="option-2">Option 2</option>
-    <option value="option-3">Option 3</option>
+<div class="wa-stack">
+  <input type="text" placeholder="Filled input" class="wa-filled" />
+  <select class="wa-filled">
+    <option value="filled">Filled select</option>
   </select>
-</label>
+  <textarea placeholder="Filled textarea" class="wa-filled"></textarea>
+</div>
 ```
 
-### Sliders
-
-Range inputs for selecting numeric values within a specified range.
+Add the `wa-pill` class to an input or select to give it rounded edges.
 
 ```html {.example}
-<label>Select a value: <input type="range" /></label>
-```
-
-### Text Fields
-
-Various input types for collecting user text and data.
-
-```html {.example}
-<label>Text <input type="text" placeholder="placeholder" /></label>
-
-<label>Number <input type="number" /></label>
-
-<label>Password <input type="password" required /></label>
-
-<label>Email <input type="email" /></label>
-
-<label>Search <input type="search" /></label>
-
-<label>Telephone <input type="tel" /></label>
-
-<label>URL <input type="url" /></label>
-```
-
-Add the `wa-pill` class to an `<input>` to make it pill-shaped.
-
-```html {.example}
-<label>Input <input type="text" placeholder="placeholder" class="wa-pill" /></label>
-```
-
-### Color Pickers
-
-Visual color selection interface with hex value input.
-
-```html {.example}
-<label>Input (color) <input type="color" value="#ff0066" /></label>
-```
-
-### Date & Time Pickers
-
-Specialized inputs for selecting dates, times, and datetime values.
-
-```html {.example}
-<label>Input (datetime-local) <input type="datetime-local" /></label>
-
-<label>Input (date) <input type="date" /></label>
-
-<label>Input (time) <input type="time" /></label>
-```
-
-### Textareas
-
-Multi-line text input fields for longer content.
-
-```html {.example}
-<label>Textarea <textarea placeholder="Type something"></textarea></label>
+<div class="wa-stack">
+  <input type="text" placeholder="Pill input" class="wa-pill" />
+  <select class="wa-pill">
+    <option value="pill">Pill select</option>
+  </select>
+</div>
 ```
 
 ### Fieldsets
 
+Group form controls together with `<fieldset>` and `<legend>`.
+
 ```html {.example}
-<fieldset>
+<fieldset class="wa-stack wa-align-items-start">
   <legend>Legend</legend>
-  Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Tincidunt id aliquet risus feugiat in ante. Ac turpis egestas
-  integer eget aliquet nibh praesent tristique magna.
+  <label><input type="radio" name="legends" value="1" checked /> King Arthur</label>
+  <label><input type="radio" name="legends" value="2" /> Robin Hood</label>
+  <label><input type="radio" name="legends" value="3" /> Odysseus</label>
 </fieldset>
 ```
+
+### Form layouts
+
+Wrap form controls in a flex container to arrange them horizontally or vertically with even spacing. Layout utility classes like [`wa-cluster`](/docs/utilities/cluster) and [`wa-stack`](/docs/utilities/stack) can be added directly to a `<fieldset>` or `<form>` to make this especially easy.
+
+```html {.example}
+<fieldset class="wa-cluster">
+  <legend>Ducks in a row</legend>
+  <label><input type="checkbox" checked /> Mallard</label>
+  <label><input type="checkbox" /> Common Loon</label>
+  <label><input type="checkbox" /> Least Grebe</label>
+</fieldset>
+
+<br />
+
+<form class="wa-stack">
+  <label>Number of pancakes <input type="number" value="5" /></label>
+  <label>Syrup flavor
+    <select>
+      <option value="maple">Maple</option>
+      <option value="strawberry">Strawberry</option>
+      <option value="blueberry">Blueberry</option>
+      <option value="pecan">Butter pecan</option>
+    </select>
+  </label>
+  <label><input type="checkbox" checked /> Add whipped butter</label>
+  <button>
+    <wa-icon name="pancakes"></wa-icon>
+    Stack 'em up
+  </button>
+</form>
+```
diff --git a/packages/webawesome/src/styles/native.css b/packages/webawesome/src/styles/native.css
index 0f9fe33d8..a58798169 100644
--- a/packages/webawesome/src/styles/native.css
+++ b/packages/webawesome/src/styles/native.css
@@ -49,6 +49,7 @@
   h4,
   h5,
   h6,
+  hr,
   iframe,
   ol,
   p,
@@ -103,10 +104,6 @@
 
   p {
     text-wrap: pretty;
-
-    &:not(:last-child) {
-      margin-block-end: 1lh;
-    }
   }
 
   blockquote {
@@ -119,7 +116,7 @@
   }
 
   hr {
-    margin: var(--wa-space-xl) 0;
+    margin: var(--wa-content-spacing) 0;
 
     border: none;
     border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
@@ -129,13 +126,12 @@
   /* #region Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
   ul,
   ol {
-    margin-inline-start: 1.125em;
     padding: 0;
   }
 
   li > ul,
   li > ol {
-    margin-inline-start: 1.375em;
+    margin-inline-start: 0.25em;
   }
 
   ul {
@@ -143,6 +139,7 @@
   }
 
   li {
+    margin-inline-start: 1.125em;
     padding: 0;
   }
 
@@ -348,7 +345,6 @@
   caption {
     color: var(--wa-color-text-quiet);
     font-size: var(--wa-font-size-smaller);
-    font-weight: var(--wa-font-weight-bold);
 
     &:has(+ *) {
       margin-block-end: 0.75em;
@@ -1138,7 +1134,7 @@
     --indicator-color: var(--wa-color-brand-fill-loud);
 
     width: 100%;
-    height: 1.25rem;
+    height: 1rem;
     overflow: hidden;
 
     color: var(--wa-color-brand-on-loud);

From 1ef9cb960149f4b8b7adfee753b6855991cb92df Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 14 Jul 2025 16:55:43 -0400
Subject: [PATCH 09/14] add missing dependency (#1176)

---
 package-lock.json                              | 18 ++++++++++++++++++
 .../docs/docs/resources/changelog.md           |  3 ++-
 packages/webawesome/package.json               |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 61e116a59..d318953cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13984,6 +13984,7 @@
         "@shoelace-style/localize": "^3.2.1",
         "composed-offset-position": "^0.0.6",
         "lit": "^3.2.1",
+        "nanoid": "^5.1.5",
         "qr-creator": "^1.0.0",
         "style-observer": "^0.0.7"
       },
@@ -14010,6 +14011,23 @@
       "engines": {
         "node": ">=14.17.0"
       }
+    },
+    "packages/webawesome/node_modules/nanoid": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
+      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
     }
   }
 }
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 3f067140c..4978b969c 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -10,7 +10,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
-- Fixed a bug in `<wa-slider>` that prevented the hint from showing up
+- Fixed the missing `nanoid` dependency in `package.json` [discuss:1139]
+- Fixed a bug in `<wa-slider>` that prevented the hint from showing up [discuss:1172]
 
 ## 3.0.0-beta.2
 
diff --git a/packages/webawesome/package.json b/packages/webawesome/package.json
index 6450db910..da8a30980 100644
--- a/packages/webawesome/package.json
+++ b/packages/webawesome/package.json
@@ -77,10 +77,10 @@
     "@shoelace-style/localize": "^3.2.1",
     "composed-offset-position": "^0.0.6",
     "lit": "^3.2.1",
+    "nanoid": "^5.1.5",
     "qr-creator": "^1.0.0",
     "style-observer": "^0.0.7"
   },
-  "devDependencies": {},
   "lint-staged": {
     "*.{ts,js}": [
       "prettier --write"

From 1e8bbc3b069903ee6850c8579d1e78f45731703a Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 14 Jul 2025 16:57:44 -0400
Subject: [PATCH 10/14] fix domain (#1179)

---
 packages/webawesome/docs/_includes/base.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webawesome/docs/_includes/base.njk b/packages/webawesome/docs/_includes/base.njk
index ca2cb3c61..eef4b911a 100644
--- a/packages/webawesome/docs/_includes/base.njk
+++ b/packages/webawesome/docs/_includes/base.njk
@@ -13,7 +13,7 @@
     <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="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
+    <script defer data-domain="webawesome.com" src="https://plausible.io/js/script.js"></script>
 
     {# Docs styles #}
     <link rel="stylesheet" href="/assets/styles/docs.css" />

From 2a52b2766f0438258a662930c860e50e08321772 Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Mon, 14 Jul 2025 17:00:35 -0400
Subject: [PATCH 11/14] fix badge pulsing (#1173)

* fix badge pulsing

* use and document `--pulse-color`

* Add changelog entry

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
---
 .../docs/docs/resources/changelog.md           |  5 +++++
 .../webawesome/src/components/badge/badge.css  | 18 ++++++++++--------
 .../webawesome/src/components/badge/badge.ts   |  6 ++++--
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 4978b969c..38168db5a 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -10,6 +10,11 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
+### Bug Fixes and Improvements {data-no-outline}
+
+- Fixed a bug in `<wa-badge>` where `appearance="pulse"` was not working as expected [pr:1173]
+- Fixed a missing TypeScript type for `<wa-badge>` for its `attention` property missing `bounce` value. [pr:1173]
+- Fixed a bug in `<wa-slider>` that prevented the hint from showing up [pr:1174]
 - Fixed the missing `nanoid` dependency in `package.json` [discuss:1139]
 - Fixed a bug in `<wa-slider>` that prevented the hint from showing up [discuss:1172]
 
diff --git a/packages/webawesome/src/components/badge/badge.css b/packages/webawesome/src/components/badge/badge.css
index 34e244ee6..59887e6fb 100644
--- a/packages/webawesome/src/components/badge/badge.css
+++ b/packages/webawesome/src/components/badge/badge.css
@@ -1,4 +1,6 @@
 :host {
+  --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -19,29 +21,31 @@
 }
 
 /* Appearance modifiers */
-:host([appearance~='plain']) {
-  color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
-  background-color: transparent;
-  border-color: transparent;
-}
-
 :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'][appearance~='outlined']) {
+  --pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-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;
@@ -54,8 +58,6 @@
 
 /* Pulse attention */
 :host([attention='pulse']) {
-  --pulse-color: var(--background-color);
-
   animation: pulse 1.5s infinite;
 }
 
diff --git a/packages/webawesome/src/components/badge/badge.ts b/packages/webawesome/src/components/badge/badge.ts
index 078a72c84..467120c6a 100644
--- a/packages/webawesome/src/components/badge/badge.ts
+++ b/packages/webawesome/src/components/badge/badge.ts
@@ -14,6 +14,8 @@ import styles from './badge.css';
  *
  * @csspart base - The component's base wrapper.
  *
+ * @cssproperty --pulse-color - The color of the badge's pulse effect when using `attention="pulse"`.
+ *
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
@@ -28,8 +30,8 @@ export default class WaBadge extends WebAwesomeElement {
   /** Draws a pill-style badge with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
 
-  /** Makes the badge pulsate to draw attention. */
-  @property({ reflect: true }) attention: 'none' | 'pulse' = 'none';
+  /** Adds an animation to draw attention to the badge. */
+  @property({ reflect: true }) attention: 'none' | 'pulse' | 'bounce' = 'none';
 
   render() {
     return html` <slot part="base" role="status"></slot>`;

From 0ff5e7fb7a5dd415d488e38d657be9f349883a59 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 14 Jul 2025 17:19:28 -0400
Subject: [PATCH 12/14] Fix domain in documentation links (#1180)

* fix domain in doc links

* unprettier
---
 .../webawesome/docs/docs/components/zoomable-frame.md     | 8 ++++----
 .../scripts/plop/templates/component/component.hbs        | 2 +-
 .../src/components/animated-image/animated-image.ts       | 2 +-
 packages/webawesome/src/components/animation/animation.ts | 2 +-
 packages/webawesome/src/components/avatar/avatar.ts       | 2 +-
 packages/webawesome/src/components/badge/badge.ts         | 2 +-
 .../src/components/breadcrumb-item/breadcrumb-item.ts     | 2 +-
 .../webawesome/src/components/breadcrumb/breadcrumb.ts    | 2 +-
 .../src/components/button-group/button-group.ts           | 2 +-
 packages/webawesome/src/components/button/button.ts       | 2 +-
 packages/webawesome/src/components/callout/callout.ts     | 2 +-
 packages/webawesome/src/components/card/card.ts           | 2 +-
 packages/webawesome/src/components/checkbox/checkbox.ts   | 2 +-
 .../src/components/color-picker/color-picker.ts           | 2 +-
 .../webawesome/src/components/comparison/comparison.ts    | 2 +-
 .../webawesome/src/components/copy-button/copy-button.ts  | 2 +-
 packages/webawesome/src/components/details/details.ts     | 2 +-
 packages/webawesome/src/components/dialog/dialog.ts       | 2 +-
 packages/webawesome/src/components/divider/divider.ts     | 2 +-
 packages/webawesome/src/components/drawer/drawer.ts       | 2 +-
 .../src/components/dropdown-item/dropdown-item.ts         | 2 +-
 packages/webawesome/src/components/dropdown/dropdown.ts   | 2 +-
 .../src/components/format-bytes/format-bytes.ts           | 2 +-
 .../webawesome/src/components/format-date/format-date.ts  | 2 +-
 .../src/components/format-number/format-number.ts         | 2 +-
 packages/webawesome/src/components/icon/icon.ts           | 2 +-
 packages/webawesome/src/components/include/include.ts     | 2 +-
 packages/webawesome/src/components/input/input.ts         | 2 +-
 .../src/components/mutation-observer/mutation-observer.ts | 2 +-
 packages/webawesome/src/components/option/option.ts       | 2 +-
 packages/webawesome/src/components/page/page.ts           | 2 +-
 packages/webawesome/src/components/popover/popover.ts     | 2 +-
 packages/webawesome/src/components/popup/popup.ts         | 2 +-
 .../src/components/progress-bar/progress-bar.ts           | 2 +-
 .../src/components/progress-ring/progress-ring.ts         | 2 +-
 packages/webawesome/src/components/qr-code/qr-code.ts     | 2 +-
 .../webawesome/src/components/radio-group/radio-group.ts  | 2 +-
 packages/webawesome/src/components/radio/radio.ts         | 2 +-
 packages/webawesome/src/components/rating/rating.ts       | 2 +-
 .../src/components/relative-time/relative-time.ts         | 2 +-
 .../src/components/resize-observer/resize-observer.ts     | 2 +-
 packages/webawesome/src/components/scroller/scroller.ts   | 2 +-
 packages/webawesome/src/components/select/select.ts       | 2 +-
 packages/webawesome/src/components/skeleton/skeleton.ts   | 2 +-
 packages/webawesome/src/components/slider/slider.ts       | 2 +-
 packages/webawesome/src/components/spinner/spinner.ts     | 2 +-
 .../webawesome/src/components/split-panel/split-panel.ts  | 2 +-
 packages/webawesome/src/components/switch/switch.ts       | 2 +-
 packages/webawesome/src/components/tab-group/tab-group.ts | 2 +-
 packages/webawesome/src/components/tab-panel/tab-panel.ts | 2 +-
 packages/webawesome/src/components/tab/tab.ts             | 2 +-
 packages/webawesome/src/components/tag/tag.ts             | 2 +-
 packages/webawesome/src/components/textarea/textarea.ts   | 2 +-
 packages/webawesome/src/components/tooltip/tooltip.ts     | 2 +-
 packages/webawesome/src/components/tree-item/tree-item.ts | 2 +-
 packages/webawesome/src/components/tree/tree.ts           | 2 +-
 .../src/components/zoomable-frame/zoomable-frame.ts       | 2 +-
 57 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/packages/webawesome/docs/docs/components/zoomable-frame.md b/packages/webawesome/docs/docs/components/zoomable-frame.md
index 6ba4e576e..87886d112 100644
--- a/packages/webawesome/docs/docs/components/zoomable-frame.md
+++ b/packages/webawesome/docs/docs/components/zoomable-frame.md
@@ -6,7 +6,7 @@ category: Imagery
 ---
 
 ```html {.example}
-<wa-zoomable-frame src="https://backers.webawesome.com/" zoom="0.5"> </wa-zoomable-frame>
+<wa-zoomable-frame src="https://webawesome.com/" zoom="0.5"> </wa-zoomable-frame>
 ```
 
 ## Examples
@@ -43,7 +43,7 @@ Set the `zoom` attribute to control the frame's zoom level. Use `1` for 100%, `2
 Define specific zoom increments with the `zoom-levels` attribute using space-separated percentages and decimal values like `zoom-levels="0.25 0.5 75% 100%"`.
 
 ```html {.example}
-<wa-zoomable-frame src="https://backers.webawesome.com/" zoom="0.5" zoom-levels="50% 0.75 100%"> </wa-zoomable-frame>
+<wa-zoomable-frame src="https://webawesome.com/" zoom="0.5" zoom-levels="50% 0.75 100%"> </wa-zoomable-frame>
 ```
 
 ### Hiding zoom controls
@@ -51,7 +51,7 @@ Define specific zoom increments with the `zoom-levels` attribute using space-sep
 Add the `without-controls` attribute to hide the zoom control interface from the frame.
 
 ```html {.example}
-<wa-zoomable-frame src="https://backers.webawesome.com/" without-controls zoom="0.5"> </wa-zoomable-frame>
+<wa-zoomable-frame src="https://webawesome.com/" without-controls zoom="0.5"> </wa-zoomable-frame>
 ```
 
 ### Preventing user interaction
@@ -59,5 +59,5 @@ Add the `without-controls` attribute to hide the zoom control interface from the
 Apply the `without-interaction` attribute to make the frame non-interactive. Note that this prevents keyboard navigation into the frame, which may impact accessibility for some users.
 
 ```html {.example}
-<wa-zoomable-frame src="https://backers.webawesome.com/" zoom="0.5" without-interaction> </wa-zoomable-frame>
+<wa-zoomable-frame src="https://webawesome.com/" zoom="0.5" without-interaction> </wa-zoomable-frame>
 ```
diff --git a/packages/webawesome/scripts/plop/templates/component/component.hbs b/packages/webawesome/scripts/plop/templates/component/component.hbs
index a1c9cfa26..30ea44f05 100644
--- a/packages/webawesome/scripts/plop/templates/component/component.hbs
+++ b/packages/webawesome/scripts/plop/templates/component/component.hbs
@@ -6,7 +6,7 @@ import styles from './{{ tagWithoutPrefix tag }}.css';
 
 /**
  * @summary Short summary of the component's intended use.
- * @documentation https://backers.webawesome.com/docs/components/{{ tagWithoutPrefix tag }}
+ * @documentation https://webawesome.com/docs/components/{{ tagWithoutPrefix tag }}
  * @status experimental
  * @since 3.0
  *
diff --git a/packages/webawesome/src/components/animated-image/animated-image.ts b/packages/webawesome/src/components/animated-image/animated-image.ts
index fd2d68fd1..b181ca6e0 100644
--- a/packages/webawesome/src/components/animated-image/animated-image.ts
+++ b/packages/webawesome/src/components/animated-image/animated-image.ts
@@ -9,7 +9,7 @@ import styles from './animated-image.css';
 
 /**
  * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.
- * @documentation https://backers.webawesome.com/docs/components/animated-image
+ * @documentation https://webawesome.com/docs/components/animated-image
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/animation/animation.ts b/packages/webawesome/src/components/animation/animation.ts
index 6df15c2ef..e77ee92aa 100644
--- a/packages/webawesome/src/components/animation/animation.ts
+++ b/packages/webawesome/src/components/animation/animation.ts
@@ -10,7 +10,7 @@ import { animations } from './animations.js';
 
 /**
  * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
- * @documentation https://backers.webawesome.com/docs/components/animation
+ * @documentation https://webawesome.com/docs/components/animation
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/avatar/avatar.ts b/packages/webawesome/src/components/avatar/avatar.ts
index 8b60a0aa5..7dc7a1530 100644
--- a/packages/webawesome/src/components/avatar/avatar.ts
+++ b/packages/webawesome/src/components/avatar/avatar.ts
@@ -8,7 +8,7 @@ import styles from './avatar.css';
 
 /**
  * @summary Avatars are used to represent a person or object.
- * @documentation https://backers.webawesome.com/docs/components/avatar
+ * @documentation https://webawesome.com/docs/components/avatar
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/badge/badge.ts b/packages/webawesome/src/components/badge/badge.ts
index 467120c6a..3e627bce3 100644
--- a/packages/webawesome/src/components/badge/badge.ts
+++ b/packages/webawesome/src/components/badge/badge.ts
@@ -6,7 +6,7 @@ import styles from './badge.css';
 
 /**
  * @summary Badges are used to draw attention and display statuses or counts.
- * @documentation https://backers.webawesome.com/docs/components/badge
+ * @documentation https://webawesome.com/docs/components/badge
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts
index 274cf6f6e..ff9c8b29d 100644
--- a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -7,7 +7,7 @@ import styles from './breadcrumb-item.css';
 
 /**
  * @summary Breadcrumb Items are used inside breadcrumbs to represent different links.
- * @documentation https://backers.webawesome.com/docs/components/breadcrumb-item
+ * @documentation https://webawesome.com/docs/components/breadcrumb-item
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/breadcrumb/breadcrumb.ts b/packages/webawesome/src/components/breadcrumb/breadcrumb.ts
index b3cfe866f..be3e24a24 100644
--- a/packages/webawesome/src/components/breadcrumb/breadcrumb.ts
+++ b/packages/webawesome/src/components/breadcrumb/breadcrumb.ts
@@ -8,7 +8,7 @@ import styles from './breadcrumb.css';
 
 /**
  * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
- * @documentation https://backers.webawesome.com/docs/components/breadcrumb
+ * @documentation https://webawesome.com/docs/components/breadcrumb
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/button-group/button-group.ts b/packages/webawesome/src/components/button-group/button-group.ts
index b0fe26dce..b37dcf52d 100644
--- a/packages/webawesome/src/components/button-group/button-group.ts
+++ b/packages/webawesome/src/components/button-group/button-group.ts
@@ -10,7 +10,7 @@ import styles from './button-group.css';
 
 /**
  * @summary Button groups can be used to group related buttons into sections.
- * @documentation https://backers.webawesome.com/docs/components/button-group
+ * @documentation https://webawesome.com/docs/components/button-group
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/button/button.ts b/packages/webawesome/src/components/button/button.ts
index f265a30c7..4923d12db 100644
--- a/packages/webawesome/src/components/button/button.ts
+++ b/packages/webawesome/src/components/button/button.ts
@@ -16,7 +16,7 @@ import styles from './button.css';
 
 /**
  * @summary Buttons represent actions that are available to the user.
- * @documentation https://backers.webawesome.com/docs/components/button
+ * @documentation https://webawesome.com/docs/components/button
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/callout/callout.ts b/packages/webawesome/src/components/callout/callout.ts
index 9f5ceaf8d..4eef0aeaf 100644
--- a/packages/webawesome/src/components/callout/callout.ts
+++ b/packages/webawesome/src/components/callout/callout.ts
@@ -7,7 +7,7 @@ import styles from './callout.css';
 
 /**
  * @summary Callouts are used to display important messages inline.
- * @documentation https://backers.webawesome.com/docs/components/callout
+ * @documentation https://webawesome.com/docs/components/callout
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/card/card.ts b/packages/webawesome/src/components/card/card.ts
index 03bf1d150..c3e3ba5d6 100644
--- a/packages/webawesome/src/components/card/card.ts
+++ b/packages/webawesome/src/components/card/card.ts
@@ -7,7 +7,7 @@ import styles from './card.css';
 
 /**
  * @summary Cards can be used to group related subjects in a container.
- * @documentation https://backers.webawesome.com/docs/components/card
+ * @documentation https://webawesome.com/docs/components/card
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/checkbox/checkbox.ts b/packages/webawesome/src/components/checkbox/checkbox.ts
index 9e5611caf..5d8e9d179 100644
--- a/packages/webawesome/src/components/checkbox/checkbox.ts
+++ b/packages/webawesome/src/components/checkbox/checkbox.ts
@@ -15,7 +15,7 @@ import styles from './checkbox.css';
 
 /**
  * @summary Checkboxes allow the user to toggle an option on or off.
- * @documentation https://backers.webawesome.com/docs/components/checkbox
+ * @documentation https://webawesome.com/docs/components/checkbox
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/color-picker/color-picker.ts b/packages/webawesome/src/components/color-picker/color-picker.ts
index 76d6c73bc..49e3648e6 100644
--- a/packages/webawesome/src/components/color-picker/color-picker.ts
+++ b/packages/webawesome/src/components/color-picker/color-picker.ts
@@ -39,7 +39,7 @@ declare const EyeDropper: EyeDropperConstructor;
 
 /**
  * @summary Color pickers allow the user to select a color.
- * @documentation https://backers.webawesome.com/docs/components/color-picker
+ * @documentation https://webawesome.com/docs/components/color-picker
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/comparison/comparison.ts b/packages/webawesome/src/components/comparison/comparison.ts
index 9d862465c..12f458fb9 100644
--- a/packages/webawesome/src/components/comparison/comparison.ts
+++ b/packages/webawesome/src/components/comparison/comparison.ts
@@ -11,7 +11,7 @@ import styles from './comparison.css';
 
 /**
  * @summary Compare visual differences between similar content with a sliding panel.
- * @documentation https://backers.webawesome.com/docs/components/comparison
+ * @documentation https://webawesome.com/docs/components/comparison
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/copy-button/copy-button.ts b/packages/webawesome/src/components/copy-button/copy-button.ts
index ba4e63502..4ebadb90e 100644
--- a/packages/webawesome/src/components/copy-button/copy-button.ts
+++ b/packages/webawesome/src/components/copy-button/copy-button.ts
@@ -14,7 +14,7 @@ import styles from './copy-button.css';
 
 /**
  * @summary Copies text data to the clipboard when the user clicks the trigger.
- * @documentation https://backers.webawesome.com/docs/components/copy
+ * @documentation https://webawesome.com/docs/components/copy
  * @status experimental
  * @since 2.7
  *
diff --git a/packages/webawesome/src/components/details/details.ts b/packages/webawesome/src/components/details/details.ts
index 1a5cc0782..4a041b73e 100644
--- a/packages/webawesome/src/components/details/details.ts
+++ b/packages/webawesome/src/components/details/details.ts
@@ -14,7 +14,7 @@ import styles from './details.css';
 
 /**
  * @summary Details show a brief summary and expand to show additional content.
- * @documentation https://backers.webawesome.com/docs/components/details
+ * @documentation https://webawesome.com/docs/components/details
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/dialog/dialog.ts b/packages/webawesome/src/components/dialog/dialog.ts
index 031244ec5..0167718af 100644
--- a/packages/webawesome/src/components/dialog/dialog.ts
+++ b/packages/webawesome/src/components/dialog/dialog.ts
@@ -17,7 +17,7 @@ import styles from './dialog.css';
 
 /**
  * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
- * @documentation https://backers.webawesome.com/docs/components/dialog
+ * @documentation https://webawesome.com/docs/components/dialog
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/divider/divider.ts b/packages/webawesome/src/components/divider/divider.ts
index 0ac4e7c74..7d24696ac 100644
--- a/packages/webawesome/src/components/divider/divider.ts
+++ b/packages/webawesome/src/components/divider/divider.ts
@@ -5,7 +5,7 @@ import styles from './divider.css';
 
 /**
  * @summary Dividers are used to visually separate or group elements.
- * @documentation https://backers.webawesome.com/docs/components/divider
+ * @documentation https://webawesome.com/docs/components/divider
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/drawer/drawer.ts b/packages/webawesome/src/components/drawer/drawer.ts
index 2341c89e8..e1c35e52c 100644
--- a/packages/webawesome/src/components/drawer/drawer.ts
+++ b/packages/webawesome/src/components/drawer/drawer.ts
@@ -17,7 +17,7 @@ import styles from './drawer.css';
 
 /**
  * @summary Drawers slide in from a container to expose additional options and information.
- * @documentation https://backers.webawesome.com/docs/components/drawer
+ * @documentation https://webawesome.com/docs/components/drawer
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/dropdown-item/dropdown-item.ts b/packages/webawesome/src/components/dropdown-item/dropdown-item.ts
index a7a57a5d7..4e43f5d6f 100644
--- a/packages/webawesome/src/components/dropdown-item/dropdown-item.ts
+++ b/packages/webawesome/src/components/dropdown-item/dropdown-item.ts
@@ -8,7 +8,7 @@ import styles from './dropdown-item.css';
 
 /**
  * @summary Represents an individual item within a dropdown menu, supporting standard items, checkboxes, and submenus.
- * @documentation https://backers.webawesome.com/docs/components/dropdown-item
+ * @documentation https://webawesome.com/docs/components/dropdown-item
  * @status experimental
  * @since 3.0
  *
diff --git a/packages/webawesome/src/components/dropdown/dropdown.ts b/packages/webawesome/src/components/dropdown/dropdown.ts
index 126c15e2f..160510e77 100644
--- a/packages/webawesome/src/components/dropdown/dropdown.ts
+++ b/packages/webawesome/src/components/dropdown/dropdown.ts
@@ -24,7 +24,7 @@ const openDropdowns = new Set<WaDropdown>();
 /**
  * @summary Dropdowns display a list of options that can be triggered by a button or other element. They support
  *  keyboard navigation, submenus, and various customization options.
- * @documentation https://backers.webawesome.com/docs/components/dropdown
+ * @documentation https://webawesome.com/docs/components/dropdown
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/format-bytes/format-bytes.ts b/packages/webawesome/src/components/format-bytes/format-bytes.ts
index 1dcb34f68..bceca7dff 100644
--- a/packages/webawesome/src/components/format-bytes/format-bytes.ts
+++ b/packages/webawesome/src/components/format-bytes/format-bytes.ts
@@ -4,7 +4,7 @@ import { LocalizeController } from '../../utilities/localize.js';
 
 /**
  * @summary Formats a number as a human readable bytes value.
- * @documentation https://backers.webawesome.com/docs/components/format-bytes
+ * @documentation https://webawesome.com/docs/components/format-bytes
  * @status stable
  * @since 2.0
  */
diff --git a/packages/webawesome/src/components/format-date/format-date.ts b/packages/webawesome/src/components/format-date/format-date.ts
index f0448c4b0..6ff0dc2a3 100644
--- a/packages/webawesome/src/components/format-date/format-date.ts
+++ b/packages/webawesome/src/components/format-date/format-date.ts
@@ -5,7 +5,7 @@ import { LocalizeController } from '../../utilities/localize.js';
 
 /**
  * @summary Formats a date/time using the specified locale and options.
- * @documentation https://backers.webawesome.com/docs/components/format-date
+ * @documentation https://webawesome.com/docs/components/format-date
  * @status stable
  * @since 2.0
  */
diff --git a/packages/webawesome/src/components/format-number/format-number.ts b/packages/webawesome/src/components/format-number/format-number.ts
index 134b0d17d..2683d401a 100644
--- a/packages/webawesome/src/components/format-number/format-number.ts
+++ b/packages/webawesome/src/components/format-number/format-number.ts
@@ -4,7 +4,7 @@ import { LocalizeController } from '../../utilities/localize.js';
 
 /**
  * @summary Formats a number using the specified locale and options.
- * @documentation https://backers.webawesome.com/docs/components/format-number
+ * @documentation https://webawesome.com/docs/components/format-number
  * @status stable
  * @since 2.0
  */
diff --git a/packages/webawesome/src/components/icon/icon.ts b/packages/webawesome/src/components/icon/icon.ts
index 3b53b0a0a..95e0e802a 100644
--- a/packages/webawesome/src/components/icon/icon.ts
+++ b/packages/webawesome/src/components/icon/icon.ts
@@ -24,7 +24,7 @@ interface IconSource {
 
 /**
  * @summary Icons are symbols that can be used to represent various options within an application.
- * @documentation https://backers.webawesome.com/docs/components/icon
+ * @documentation https://webawesome.com/docs/components/icon
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/include/include.ts b/packages/webawesome/src/components/include/include.ts
index 66197a2df..24f0418c5 100644
--- a/packages/webawesome/src/components/include/include.ts
+++ b/packages/webawesome/src/components/include/include.ts
@@ -9,7 +9,7 @@ import { requestInclude } from './request.js';
 
 /**
  * @summary Includes give you the power to embed external HTML files into the page.
- * @documentation https://backers.webawesome.com/docs/components/include
+ * @documentation https://webawesome.com/docs/components/include
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/input/input.ts b/packages/webawesome/src/components/input/input.ts
index fefb358f3..f3fdd4fac 100644
--- a/packages/webawesome/src/components/input/input.ts
+++ b/packages/webawesome/src/components/input/input.ts
@@ -17,7 +17,7 @@ import styles from './input.css';
 
 /**
  * @summary Inputs collect data from the user.
- * @documentation https://backers.webawesome.com/docs/components/input
+ * @documentation https://webawesome.com/docs/components/input
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/mutation-observer/mutation-observer.ts b/packages/webawesome/src/components/mutation-observer/mutation-observer.ts
index f3312d553..5c0ad0c6b 100644
--- a/packages/webawesome/src/components/mutation-observer/mutation-observer.ts
+++ b/packages/webawesome/src/components/mutation-observer/mutation-observer.ts
@@ -7,7 +7,7 @@ import styles from './mutation-observer.css';
 
 /**
  * @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
- * @documentation https://backers.webawesome.com/docs/components/mutation-observer
+ * @documentation https://webawesome.com/docs/components/mutation-observer
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/option/option.ts b/packages/webawesome/src/components/option/option.ts
index 40ef35787..5c0f10957 100644
--- a/packages/webawesome/src/components/option/option.ts
+++ b/packages/webawesome/src/components/option/option.ts
@@ -9,7 +9,7 @@ import styles from './option.css';
 
 /**
  * @summary Options define the selectable items within a select component.
- * @documentation https://backers.webawesome.com/docs/components/option
+ * @documentation https://webawesome.com/docs/components/option
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/page/page.ts b/packages/webawesome/src/components/page/page.ts
index 6d698b144..55089e237 100644
--- a/packages/webawesome/src/components/page/page.ts
+++ b/packages/webawesome/src/components/page/page.ts
@@ -79,7 +79,7 @@ function toLength(px: number | string): string {
 
 /**
  * @summary Pages offer an easy way to scaffold entire page layouts using minimal markup.
- * @documentation https://backers.webawesome.com/docs/components/page
+ * @documentation https://webawesome.com/docs/components/page
  * @status experimental
  * @since 3.0
  *
diff --git a/packages/webawesome/src/components/popover/popover.ts b/packages/webawesome/src/components/popover/popover.ts
index be37785c3..331b9d871 100644
--- a/packages/webawesome/src/components/popover/popover.ts
+++ b/packages/webawesome/src/components/popover/popover.ts
@@ -18,7 +18,7 @@ const openPopovers = new Set<WaPopover>();
 
 /**
  * @summary Popovers display contextual content and interactive elements in a floating panel.
- * @documentation https://backers.webawesome.com/docs/components/popover
+ * @documentation https://webawesome.com/docs/components/popover
  * @status stable
  * @since 3.0
  *
diff --git a/packages/webawesome/src/components/popup/popup.ts b/packages/webawesome/src/components/popup/popup.ts
index 38e63032e..80ec2f254 100644
--- a/packages/webawesome/src/components/popup/popup.ts
+++ b/packages/webawesome/src/components/popup/popup.ts
@@ -37,7 +37,7 @@ const SUPPORTS_POPOVER = globalThis?.HTMLElement?.prototype.hasOwnProperty('popo
 
 /**
  * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
- * @documentation https://backers.webawesome.com/docs/components/popup
+ * @documentation https://webawesome.com/docs/components/popup
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/progress-bar/progress-bar.ts b/packages/webawesome/src/components/progress-bar/progress-bar.ts
index d21423d1e..3a4d66978 100644
--- a/packages/webawesome/src/components/progress-bar/progress-bar.ts
+++ b/packages/webawesome/src/components/progress-bar/progress-bar.ts
@@ -9,7 +9,7 @@ import styles from './progress-bar.css';
 
 /**
  * @summary Progress bars are used to show the status of an ongoing operation.
- * @documentation https://backers.webawesome.com/docs/components/progress-bar
+ * @documentation https://webawesome.com/docs/components/progress-bar
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/progress-ring/progress-ring.ts b/packages/webawesome/src/components/progress-ring/progress-ring.ts
index 954fcdde1..53ef182a8 100644
--- a/packages/webawesome/src/components/progress-ring/progress-ring.ts
+++ b/packages/webawesome/src/components/progress-ring/progress-ring.ts
@@ -7,7 +7,7 @@ import styles from './progress-ring.css';
 
 /**
  * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
- * @documentation https://backers.webawesome.com/docs/components/progress-ring
+ * @documentation https://webawesome.com/docs/components/progress-ring
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/qr-code/qr-code.ts b/packages/webawesome/src/components/qr-code/qr-code.ts
index c1df3d2a8..dcc211857 100644
--- a/packages/webawesome/src/components/qr-code/qr-code.ts
+++ b/packages/webawesome/src/components/qr-code/qr-code.ts
@@ -10,7 +10,7 @@ let QrCreator: _QrCreator.default;
 
 /**
  * @summary Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
- * @documentation https://backers.webawesome.com/docs/components/qr-code
+ * @documentation https://webawesome.com/docs/components/qr-code
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/radio-group/radio-group.ts b/packages/webawesome/src/components/radio-group/radio-group.ts
index 0a2cba15f..f27360457 100644
--- a/packages/webawesome/src/components/radio-group/radio-group.ts
+++ b/packages/webawesome/src/components/radio-group/radio-group.ts
@@ -14,7 +14,7 @@ import styles from './radio-group.css';
 
 /**
  * @summary Radio groups are used to group multiple [radios](/docs/components/radio) so they function as a single form control.
- * @documentation https://backers.webawesome.com/docs/components/radio-group
+ * @documentation https://webawesome.com/docs/components/radio-group
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/radio/radio.ts b/packages/webawesome/src/components/radio/radio.ts
index effb8cedc..e1c05753e 100644
--- a/packages/webawesome/src/components/radio/radio.ts
+++ b/packages/webawesome/src/components/radio/radio.ts
@@ -9,7 +9,7 @@ import styles from './radio.css';
 
 /**
  * @summary Radios allow the user to select a single option from a group.
- * @documentation https://backers.webawesome.com/docs/components/radio
+ * @documentation https://webawesome.com/docs/components/radio
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/rating/rating.ts b/packages/webawesome/src/components/rating/rating.ts
index 005c24180..d8615dd58 100644
--- a/packages/webawesome/src/components/rating/rating.ts
+++ b/packages/webawesome/src/components/rating/rating.ts
@@ -14,7 +14,7 @@ import styles from './rating.css';
 
 /**
  * @summary Ratings give users a way to quickly view and provide feedback.
- * @documentation https://backers.webawesome.com/docs/components/rating
+ * @documentation https://webawesome.com/docs/components/rating
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/relative-time/relative-time.ts b/packages/webawesome/src/components/relative-time/relative-time.ts
index 9dd58fec6..29969924d 100644
--- a/packages/webawesome/src/components/relative-time/relative-time.ts
+++ b/packages/webawesome/src/components/relative-time/relative-time.ts
@@ -20,7 +20,7 @@ const availableUnits: UnitConfig[] = [
 
 /**
  * @summary Outputs a localized time phrase relative to the current date and time.
- * @documentation https://backers.webawesome.com/docs/components/relative-time
+ * @documentation https://webawesome.com/docs/components/relative-time
  * @status stable
  * @since 2.0
  */
diff --git a/packages/webawesome/src/components/resize-observer/resize-observer.ts b/packages/webawesome/src/components/resize-observer/resize-observer.ts
index f414a036a..b26d0e5e9 100644
--- a/packages/webawesome/src/components/resize-observer/resize-observer.ts
+++ b/packages/webawesome/src/components/resize-observer/resize-observer.ts
@@ -7,7 +7,7 @@ import styles from './resize-observer.css';
 
 /**
  * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
- * @documentation https://backers.webawesome.com/docs/components/resize-observer
+ * @documentation https://webawesome.com/docs/components/resize-observer
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/scroller/scroller.ts b/packages/webawesome/src/components/scroller/scroller.ts
index 21a207cab..77105d57e 100644
--- a/packages/webawesome/src/components/scroller/scroller.ts
+++ b/packages/webawesome/src/components/scroller/scroller.ts
@@ -7,7 +7,7 @@ import styles from './scroller.css';
 /**
  * @summary Scrollers create an accessible container while providing visual cues that help users identify and navigate
  *  through content that scrolls.
- * @documentation https://backers.webawesome.com/docs/components/card
+ * @documentation https://webawesome.com/docs/components/card
  * @status stable
  * @since 3.0
  *
diff --git a/packages/webawesome/src/components/select/select.ts b/packages/webawesome/src/components/select/select.ts
index fdb62e214..4d170a694 100644
--- a/packages/webawesome/src/components/select/select.ts
+++ b/packages/webawesome/src/components/select/select.ts
@@ -29,7 +29,7 @@ import styles from './select.css';
 
 /**
  * @summary Selects allow you to choose items from a menu of predefined options.
- * @documentation https://backers.webawesome.com/docs/components/select
+ * @documentation https://webawesome.com/docs/components/select
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/skeleton/skeleton.ts b/packages/webawesome/src/components/skeleton/skeleton.ts
index 7d2d08ed9..b22178fd9 100644
--- a/packages/webawesome/src/components/skeleton/skeleton.ts
+++ b/packages/webawesome/src/components/skeleton/skeleton.ts
@@ -5,7 +5,7 @@ import styles from './skeleton.css';
 
 /**
  * @summary Skeletons are used to provide a visual representation of where content will eventually be drawn.
- * @documentation https://backers.webawesome.com/docs/components/skeleton
+ * @documentation https://webawesome.com/docs/components/skeleton
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/slider/slider.ts b/packages/webawesome/src/components/slider/slider.ts
index 5bd393564..0fdef3e3e 100644
--- a/packages/webawesome/src/components/slider/slider.ts
+++ b/packages/webawesome/src/components/slider/slider.ts
@@ -19,7 +19,7 @@ import styles from './slider.css';
  * <wa-slider>
  *
  * @summary Ranges allow the user to select a single value within a given range using a slider.
- * @documentation https://backers.webawesome.com/docs/components/range
+ * @documentation https://webawesome.com/docs/components/range
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/spinner/spinner.ts b/packages/webawesome/src/components/spinner/spinner.ts
index 2f2120453..ca3d2b45d 100644
--- a/packages/webawesome/src/components/spinner/spinner.ts
+++ b/packages/webawesome/src/components/spinner/spinner.ts
@@ -6,7 +6,7 @@ import styles from './spinner.css';
 
 /**
  * @summary Spinners are used to show the progress of an indeterminate operation.
- * @documentation https://backers.webawesome.com/docs/components/spinner
+ * @documentation https://webawesome.com/docs/components/spinner
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/split-panel/split-panel.ts b/packages/webawesome/src/components/split-panel/split-panel.ts
index 2b7fdcf61..f2a7ba8ae 100644
--- a/packages/webawesome/src/components/split-panel/split-panel.ts
+++ b/packages/webawesome/src/components/split-panel/split-panel.ts
@@ -11,7 +11,7 @@ import styles from './split-panel.css';
 
 /**
  * @summary Split panels display two adjacent panels, allowing the user to reposition them.
- * @documentation https://backers.webawesome.com/docs/components/split-panel
+ * @documentation https://webawesome.com/docs/components/split-panel
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/switch/switch.ts b/packages/webawesome/src/components/switch/switch.ts
index 8b2080c7b..77148ca02 100644
--- a/packages/webawesome/src/components/switch/switch.ts
+++ b/packages/webawesome/src/components/switch/switch.ts
@@ -14,7 +14,7 @@ import styles from './switch.css';
 
 /**
  * @summary Switches allow the user to toggle an option on or off.
- * @documentation https://backers.webawesome.com/docs/components/switch
+ * @documentation https://webawesome.com/docs/components/switch
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/tab-group/tab-group.ts b/packages/webawesome/src/components/tab-group/tab-group.ts
index a58264b61..abd684f9f 100644
--- a/packages/webawesome/src/components/tab-group/tab-group.ts
+++ b/packages/webawesome/src/components/tab-group/tab-group.ts
@@ -16,7 +16,7 @@ import styles from './tab-group.css';
 
 /**
  * @summary Tab groups organize content into a container that shows one section at a time.
- * @documentation https://backers.webawesome.com/docs/components/tab-group
+ * @documentation https://webawesome.com/docs/components/tab-group
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/tab-panel/tab-panel.ts b/packages/webawesome/src/components/tab-panel/tab-panel.ts
index 8f20e7a37..1974f92f8 100644
--- a/packages/webawesome/src/components/tab-panel/tab-panel.ts
+++ b/packages/webawesome/src/components/tab-panel/tab-panel.ts
@@ -9,7 +9,7 @@ let id = 0;
 
 /**
  * @summary Tab panels are used inside [tab groups](/docs/components/tab-group) to display tabbed content.
- * @documentation https://backers.webawesome.com/docs/components/tab-panel
+ * @documentation https://webawesome.com/docs/components/tab-panel
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/tab/tab.ts b/packages/webawesome/src/components/tab/tab.ts
index 1be438780..aedb2f988 100644
--- a/packages/webawesome/src/components/tab/tab.ts
+++ b/packages/webawesome/src/components/tab/tab.ts
@@ -9,7 +9,7 @@ let id = 0;
 
 /**
  * @summary Tabs are used inside [tab groups](/docs/components/tab-group) to represent and activate [tab panels](/docs/components/tab-panel).
- * @documentation https://backers.webawesome.com/docs/components/tab
+ * @documentation https://webawesome.com/docs/components/tab
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/tag/tag.ts b/packages/webawesome/src/components/tag/tag.ts
index a4ed239b7..faff91d51 100644
--- a/packages/webawesome/src/components/tag/tag.ts
+++ b/packages/webawesome/src/components/tag/tag.ts
@@ -10,7 +10,7 @@ import styles from './tag.css';
 
 /**
  * @summary Tags are used as labels to organize things or to indicate a selection.
- * @documentation https://backers.webawesome.com/docs/components/tag
+ * @documentation https://webawesome.com/docs/components/tag
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/textarea/textarea.ts b/packages/webawesome/src/components/textarea/textarea.ts
index 352abb4ca..54bbf6fc7 100644
--- a/packages/webawesome/src/components/textarea/textarea.ts
+++ b/packages/webawesome/src/components/textarea/textarea.ts
@@ -14,7 +14,7 @@ import styles from './textarea.css';
 
 /**
  * @summary Textareas collect data from the user and allow multiple lines of text.
- * @documentation https://backers.webawesome.com/docs/components/textarea
+ * @documentation https://webawesome.com/docs/components/textarea
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/tooltip/tooltip.ts b/packages/webawesome/src/components/tooltip/tooltip.ts
index 75ca56b8e..4b0720c17 100644
--- a/packages/webawesome/src/components/tooltip/tooltip.ts
+++ b/packages/webawesome/src/components/tooltip/tooltip.ts
@@ -15,7 +15,7 @@ import styles from './tooltip.css';
 
 /**
  * @summary Tooltips display additional information based on a specific action.
- * @documentation https://backers.webawesome.com/docs/components/tooltip
+ * @documentation https://webawesome.com/docs/components/tooltip
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/tree-item/tree-item.ts b/packages/webawesome/src/components/tree-item/tree-item.ts
index 4dd7271a5..5c96b5629 100644
--- a/packages/webawesome/src/components/tree-item/tree-item.ts
+++ b/packages/webawesome/src/components/tree-item/tree-item.ts
@@ -21,7 +21,7 @@ import styles from './tree-item.css';
 
 /**
  * @summary A tree item serves as a hierarchical node that lives inside a [tree](/docs/components/tree).
- * @documentation https://backers.webawesome.com/docs/components/tree-item
+ * @documentation https://webawesome.com/docs/components/tree-item
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/tree/tree.ts b/packages/webawesome/src/components/tree/tree.ts
index 5ed183752..46bd579d0 100644
--- a/packages/webawesome/src/components/tree/tree.ts
+++ b/packages/webawesome/src/components/tree/tree.ts
@@ -50,7 +50,7 @@ function syncCheckboxes(changedTreeItem: WaTreeItem, initialSync = false) {
 
 /**
  * @summary Trees allow you to display a hierarchical list of selectable [tree items](/docs/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
- * @documentation https://backers.webawesome.com/docs/components/tree
+ * @documentation https://webawesome.com/docs/components/tree
  * @status stable
  * @since 2.0
  *
diff --git a/packages/webawesome/src/components/zoomable-frame/zoomable-frame.ts b/packages/webawesome/src/components/zoomable-frame/zoomable-frame.ts
index 6f952a6e3..6414d6313 100644
--- a/packages/webawesome/src/components/zoomable-frame/zoomable-frame.ts
+++ b/packages/webawesome/src/components/zoomable-frame/zoomable-frame.ts
@@ -9,7 +9,7 @@ import styles from './zoomable-frame.css';
 
 /**
  * @summary Zoomable frames render iframe content with zoom and interaction controls.
- * @documentation https://backers.webawesome.com/docs/components/zoomable-frame
+ * @documentation https://webawesome.com/docs/components/zoomable-frame
  * @status stable
  * @since 3.0
  *

From 8719bbc88b4456523cc807cfa4ea0b494d9440b7 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Mon, 14 Jul 2025 17:56:53 -0400
Subject: [PATCH 13/14] Fix extra whitespace in `<wa-textarea>` with
 `resize="auto"` (#1175)

* fix extra whitespace

* fix the fix

* add changelog
---
 .../webawesome/docs/docs/resources/changelog.md     |  2 +-
 .../webawesome/src/components/textarea/textarea.css | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 38168db5a..2c96cc5e1 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -14,9 +14,9 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 - Fixed a bug in `<wa-badge>` where `appearance="pulse"` was not working as expected [pr:1173]
 - Fixed a missing TypeScript type for `<wa-badge>` for its `attention` property missing `bounce` value. [pr:1173]
-- Fixed a bug in `<wa-slider>` that prevented the hint from showing up [pr:1174]
 - Fixed the missing `nanoid` dependency in `package.json` [discuss:1139]
 - Fixed a bug in `<wa-slider>` that prevented the hint from showing up [discuss:1172]
+- Fixed a bug in `<wa-textarea>` where setting `resize="auto"` caused the height of the textarea to double [issue:1155]
 
 ## 3.0.0-beta.2
 
diff --git a/packages/webawesome/src/components/textarea/textarea.css b/packages/webawesome/src/components/textarea/textarea.css
index 4e5561728..35bafc55b 100644
--- a/packages/webawesome/src/components/textarea/textarea.css
+++ b/packages/webawesome/src/components/textarea/textarea.css
@@ -2,10 +2,9 @@
   border-width: 0;
 }
 
-/* Shared textarea and size-adjuster positioning */
-.textarea,
-.size-adjuster {
-  grid-area: 1 / 1 / 2 / 2;
+.textarea {
+  display: grid;
+  align-items: center;
   margin: 0;
   border: none;
   outline: none;
@@ -72,6 +71,12 @@ textarea {
   }
 }
 
+/* Shared textarea and size-adjuster positioning */
+.control,
+.size-adjuster {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
 .size-adjuster {
   visibility: hidden;
   pointer-events: none;

From f747483e3212175d70be8568293387f9e1d4086a Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Mon, 14 Jul 2025 18:16:19 -0400
Subject: [PATCH 14/14] Add `--track-height` to `<wa-progress-bar>` (#1159)

* add `--track-height` to `<wa-progress-bar>`

* fix custom `<wa-progress-bar>` height instances

* add changelog
---
 packages/webawesome/docs/docs/components/progress-bar.md     | 4 ++--
 packages/webawesome/docs/docs/resources/changelog.md         | 4 ++++
 packages/webawesome/docs/examples/themes/showcase.njk        | 4 ++--
 .../webawesome/src/components/progress-bar/progress-bar.css  | 4 +++-
 .../webawesome/src/components/progress-bar/progress-bar.ts   | 5 +++--
 packages/webawesome/src/styles/themes/shoelace.css           | 5 -----
 6 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/webawesome/docs/docs/components/progress-bar.md b/packages/webawesome/docs/docs/components/progress-bar.md
index c3504f26c..3ab9926d5 100644
--- a/packages/webawesome/docs/docs/components/progress-bar.md
+++ b/packages/webawesome/docs/docs/components/progress-bar.md
@@ -21,10 +21,10 @@ Use the `label` attribute to label the progress bar and tell assistive devices h
 
 ### Custom Height
 
-Use the `height` CSS property to set the progress bar's height.
+Use the `--track-height` custom property to set the progress bar's height.
 
 ```html {.example}
-<wa-progress-bar value="50" style="height: 6px;"></wa-progress-bar>
+<wa-progress-bar value="50" style="--track-height: 6px;"></wa-progress-bar>
 ```
 
 ### Showing Values
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 2c96cc5e1..5a59b9a98 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -10,6 +10,10 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
+### New Features {data-no-outline}
+- Added `--track-height` custom property to `<wa-progress-bar>` [pr:1154]
+- Added `--pulse-color` custom property to `<wa-badge>` [pr:1173]
+
 ### Bug Fixes and Improvements {data-no-outline}
 
 - Fixed a bug in `<wa-badge>` where `appearance="pulse"` was not working as expected [pr:1173]
diff --git a/packages/webawesome/docs/examples/themes/showcase.njk b/packages/webawesome/docs/examples/themes/showcase.njk
index 1ede9611d..99e6c6905 100644
--- a/packages/webawesome/docs/examples/themes/showcase.njk
+++ b/packages/webawesome/docs/examples/themes/showcase.njk
@@ -616,8 +616,8 @@ layout: false
         }
       }
 
-      wa-progress-bar::part(base) {
-        height: 0.5em;
+      wa-progress-bar {
+        --track-height: 0.5em;
       }
     </style>
   </body>
diff --git a/packages/webawesome/src/components/progress-bar/progress-bar.css b/packages/webawesome/src/components/progress-bar/progress-bar.css
index 22e7fca60..821320cc4 100644
--- a/packages/webawesome/src/components/progress-bar/progress-bar.css
+++ b/packages/webawesome/src/components/progress-bar/progress-bar.css
@@ -1,4 +1,5 @@
 :host {
+  --track-height: 1rem;
   --track-color: var(--wa-color-neutral-fill-normal);
   --indicator-color: var(--wa-color-brand-fill-loud);
 
@@ -10,10 +11,11 @@
   display: flex;
   position: relative;
   overflow: hidden;
-  height: 1rem;
+  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 {
diff --git a/packages/webawesome/src/components/progress-bar/progress-bar.ts b/packages/webawesome/src/components/progress-bar/progress-bar.ts
index 3a4d66978..7ef5a3dce 100644
--- a/packages/webawesome/src/components/progress-bar/progress-bar.ts
+++ b/packages/webawesome/src/components/progress-bar/progress-bar.ts
@@ -19,8 +19,9 @@ import styles from './progress-bar.css';
  * @csspart indicator - The progress bar's indicator.
  * @csspart label - The progress bar's label.
  *
- * @cssproperty --track-color - The color of the track.
- * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty [--track-height=1rem] - The color of the track.
+ * @cssproperty [--track-color=var(--wa-color-neutral-fill-normal)] - The color of the track.
+ * @cssproperty [--indicator-color=var(--wa-color-brand-fill-loud)] - The color of the indicator.
  */
 @customElement('wa-progress-bar')
 export default class WaProgressBar extends WebAwesomeElement {
diff --git a/packages/webawesome/src/styles/themes/shoelace.css b/packages/webawesome/src/styles/themes/shoelace.css
index 5deaad561..5f5e327c5 100644
--- a/packages/webawesome/src/styles/themes/shoelace.css
+++ b/packages/webawesome/src/styles/themes/shoelace.css
@@ -466,11 +466,6 @@
       }
     }
 
-    wa-progress-bar::part(base),
-    progress {
-      height: 1em;
-    }
-
     wa-tab {
       font-size: var(--wa-font-size-smaller);
     }