From 38ca45eab525d50c92cbb8caea0a6b1ef84c2ea6 Mon Sep 17 00:00:00 2001
From: YeonJuan <yeonjuan93@naver.com>
Date: Wed, 21 May 2025 01:09:24 +0900
Subject: [PATCH 1/2] chore: add @html-eslint

---
 docs/_includes/layouts/pages/element.11ty.ts  |  4 +-
 docs/_includes/layouts/pages/tokens.11ty.ts   |  2 +-
 .../rh-accordion/test/rh-accordion.spec.ts    |  2 +-
 .../rh-audio-player/rh-audio-player-about.ts  |  2 +-
 elements/rh-audio-player/rh-audio-player.ts   |  4 +-
 .../rh-avatar/random-pattern-controller.ts    |  2 +-
 elements/rh-button/rh-button.ts               |  2 +-
 .../rh-disclosure/test/rh-disclosure.spec.ts  |  2 +-
 elements/rh-footer/rh-footer-universal.ts     |  4 +-
 elements/rh-footer/test/rh-footer.spec.ts     |  2 +-
 .../rh-navigation-primary/test/fixtures.ts    |  4 +-
 elements/rh-pagination/rh-pagination.ts       |  2 +-
 elements/rh-spinner/rh-spinner.ts             |  4 +-
 eslint.config.js                              | 17 +++++
 package-lock.json                             | 70 +++++++++++++++++--
 package.json                                  |  1 +
 uxdot/uxdot-pattern.ts                        |  6 +-
 17 files changed, 105 insertions(+), 25 deletions(-)

diff --git a/docs/_includes/layouts/pages/element.11ty.ts b/docs/_includes/layouts/pages/element.11ty.ts
index ed04f7b75f..86aa17a8c5 100644
--- a/docs/_includes/layouts/pages/element.11ty.ts
+++ b/docs/_includes/layouts/pages/element.11ty.ts
@@ -204,7 +204,7 @@ export default class ElementsPage extends Renderer<Context> {
           </script>`))}
           ${this.#actionsLabels}
         </rh-code-block>
-        <p>To learn more about installing RHDS elements on your site using an import map read our <a href="/get-started/developers/installation/">getting started docs</a>.        
+        <p>To learn more about installing RHDS elements on your site using an import map read our <a href="/get-started/developers/installation/">getting started docs</a>.
       </section>
       `,
 
@@ -634,7 +634,7 @@ export default class ElementsPage extends Renderer<Context> {
           ${!cssProperties.length ? html`
           <em>None</em>` : html`
           <rh-table>
-            <table class=css-custom-properties>
+            <table class="css-custom-properties">
               <thead>
                 <tr>
                   <th scope="col">CSS Property</th>
diff --git a/docs/_includes/layouts/pages/tokens.11ty.ts b/docs/_includes/layouts/pages/tokens.11ty.ts
index cd33953769..1d75dd5441 100644
--- a/docs/_includes/layouts/pages/tokens.11ty.ts
+++ b/docs/_includes/layouts/pages/tokens.11ty.ts
@@ -244,7 +244,7 @@ export default class TokensPage extends Renderer<Data> {
         </td>
         <td>
           ${( isDimension ? html`<code>${token.$value}<code>`
-            : isColor ? html`<code style="--color: ${token.$value}">${token.$value}</code> `
+            : isColor ? html`<code style="--color: ${token.$value}">${token.$value}</code>`
             : isWeight ? html`
             <code class="numerical">${token.$value}</code>
             <code class="common">${(token.attributes?.aliases as string[])?.[0] ?? ''}</code>`
diff --git a/elements/rh-accordion/test/rh-accordion.spec.ts b/elements/rh-accordion/test/rh-accordion.spec.ts
index 6b55f341d8..e38d9704b0 100644
--- a/elements/rh-accordion/test/rh-accordion.spec.ts
+++ b/elements/rh-accordion/test/rh-accordion.spec.ts
@@ -69,7 +69,7 @@ describe('<rh-accordion>', function() {
               ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
               rebum.</p>
           </rh-accordion-panel>
-        </rh-accordion>          
+        </rh-accordion>
       `);
       headers = Array.from(element.querySelectorAll('rh-accordion-header'));
       panels = Array.from(element.querySelectorAll('rh-accordion-panel'));
diff --git a/elements/rh-audio-player/rh-audio-player-about.ts b/elements/rh-audio-player/rh-audio-player-about.ts
index d2aa0900e6..dadb5f7735 100644
--- a/elements/rh-audio-player/rh-audio-player-about.ts
+++ b/elements/rh-audio-player/rh-audio-player-about.ts
@@ -56,7 +56,7 @@ export class RhAudioPlayerAbout extends LitElement {
           ${heading}
         </rh-audio-player-scrolling-text-overflow>
       </hgroup>`}
-      <div part="body" ?hidden="${!hasContent}" tabindex=0><slot></slot></div>
+      <div part="body" ?hidden="${!hasContent}" tabindex="0"><slot></slot></div>
       <slot part="profile" name="profile"></slot>`;
   }
 
diff --git a/elements/rh-audio-player/rh-audio-player.ts b/elements/rh-audio-player/rh-audio-player.ts
index 3d1e46ccc4..2e238a4698 100644
--- a/elements/rh-audio-player/rh-audio-player.ts
+++ b/elements/rh-audio-player/rh-audio-player.ts
@@ -452,9 +452,9 @@ export class RhAudioPlayer extends LitElement {
             <input id="volume"
                       class="toolbar-button"
                       aria-label="${this.#translation.get('volume')}"
-                      min=0
+                      min="0"
                       max=${!this.#mediaElement ? 0 : 100}
-                      step=1
+                      step="1"
                       type="range"
                       value=${this.volume * 100}
                       ?disabled="${!this.#mediaElement}"
diff --git a/elements/rh-avatar/random-pattern-controller.ts b/elements/rh-avatar/random-pattern-controller.ts
index 919c1ea302..dcc0d8632b 100644
--- a/elements/rh-avatar/random-pattern-controller.ts
+++ b/elements/rh-avatar/random-pattern-controller.ts
@@ -23,7 +23,7 @@ type HSLTriple = [H: number, S: number, L: number];
  *
  * @see http://www.cse.yorku.ca/~oz/hash.html
  * @param  str the string to hash.
- * @return  a positive integer
+ * @returns  a positive integer
  */
 
 function hash(str: string): number {
diff --git a/elements/rh-button/rh-button.ts b/elements/rh-button/rh-button.ts
index abfef82033..922cd5cef8 100644
--- a/elements/rh-button/rh-button.ts
+++ b/elements/rh-button/rh-button.ts
@@ -117,7 +117,7 @@ export class RhButton extends LitElement {
                 part="icon"
                 name="icon">${this.#renderIcon()}</slot>
         </span>
-        <span aria-hidden=${String(!!this.label) as 'true' | 'false'}><slot id="text" ></slot></span>
+        <span aria-hidden=${String(!!this.label) as 'true' | 'false'}><slot id="text"></slot></span>
       </button>
     `;
   }
diff --git a/elements/rh-disclosure/test/rh-disclosure.spec.ts b/elements/rh-disclosure/test/rh-disclosure.spec.ts
index 7eebd3a20c..8a178d3dbd 100644
--- a/elements/rh-disclosure/test/rh-disclosure.spec.ts
+++ b/elements/rh-disclosure/test/rh-disclosure.spec.ts
@@ -121,7 +121,7 @@ describe('<rh-disclosure>', function() {
           element = await createFixture<RhDisclosure>(html`
             <rh-disclosure open>
               <span slot="summary">Summary title</span>
-              <input type="text" />
+              <input type="text"/>
             </rh-disclosure>
           `);
           await element.updateComplete;
diff --git a/elements/rh-footer/rh-footer-universal.ts b/elements/rh-footer/rh-footer-universal.ts
index 8771c3537a..03749c9c6e 100644
--- a/elements/rh-footer/rh-footer-universal.ts
+++ b/elements/rh-footer/rh-footer-universal.ts
@@ -100,8 +100,8 @@ export class RhFooterUniversal extends LitElement {
                         }
                       </style>
                     </defs>
-                    <path class="band" d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z" />
-                    <path class="cls-1" d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78" />
+                    <path class="band" d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z"/>
+                    <path class="cls-1" d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"/>
                   </svg>
                 </a>
               </slot>
diff --git a/elements/rh-footer/test/rh-footer.spec.ts b/elements/rh-footer/test/rh-footer.spec.ts
index 53d72e593d..dbf0d8577f 100644
--- a/elements/rh-footer/test/rh-footer.spec.ts
+++ b/elements/rh-footer/test/rh-footer.spec.ts
@@ -10,7 +10,7 @@ const KITCHEN_SINK_TEMPLATE = html`
   <rh-footer>
     <a slot="logo" href="/">
       <img src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg" alt="Red Hat logo"
-        loading="lazy" />
+        loading="lazy"/>
     </a>
     <rh-footer-social-link slot="social-links" icon="linkedin">
       <a href="http://www.linkedin.com/company/red-hat">LinkedIn</a>
diff --git a/elements/rh-navigation-primary/test/fixtures.ts b/elements/rh-navigation-primary/test/fixtures.ts
index 3f54ec6181..60cf3a9d8b 100644
--- a/elements/rh-navigation-primary/test/fixtures.ts
+++ b/elements/rh-navigation-primary/test/fixtures.ts
@@ -3,7 +3,7 @@ import { html } from '@open-wc/testing';
 export const NAV = html`
   <rh-navigation-primary>
     <rh-navigation-primary-item variant="dropdown" summary="Item 1">
-      Item 1 Content 
+      Item 1 Content
     </rh-navigation-primary-item>
 
     <rh-navigation-primary-item variant="dropdown" summary="Item 2">
@@ -59,7 +59,7 @@ export const NAV = html`
 
     <rh-navigation-primary-item slot="dropdowns" variant="dropdown" summary="Item 8">
       Item 8 Content
-    </rh-navigation-primary-item>  
+    </rh-navigation-primary-item>
   </rh-navigation-primary>
 `;
 
diff --git a/elements/rh-pagination/rh-pagination.ts b/elements/rh-pagination/rh-pagination.ts
index c739e5a4e6..c68f288134 100644
--- a/elements/rh-pagination/rh-pagination.ts
+++ b/elements/rh-pagination/rh-pagination.ts
@@ -211,7 +211,7 @@ export class RhPagination extends LitElement {
         </span>
         <input inputmode="numeric"
                required
-               min=1
+               min="1"
                max="${this.total}"
                aria-labelledby="go-to-page"
                @change="${this.#onChange}"
diff --git a/elements/rh-spinner/rh-spinner.ts b/elements/rh-spinner/rh-spinner.ts
index f147fc5c02..1843c95c04 100644
--- a/elements/rh-spinner/rh-spinner.ts
+++ b/elements/rh-spinner/rh-spinner.ts
@@ -28,8 +28,8 @@ export class RhSpinner extends LitElement {
   render() {
     return html`
       <svg role="status" viewBox="0 0 100 100" aria-live="polite">
-        <circle class="track" cx="50" cy="50" r="40" fill="none" vector-effect="non-scaling-stroke" />
-        <circle class="dash" cx="50" cy="50" r="40" fill="none" vector-effect="non-scaling-stroke" />
+        <circle class="track" cx="50" cy="50" r="40" fill="none" vector-effect="non-scaling-stroke"/>
+        <circle class="dash" cx="50" cy="50" r="40" fill="none" vector-effect="non-scaling-stroke"/>
       </svg>
       <slot></slot>
     `;
diff --git a/eslint.config.js b/eslint.config.js
index 816f030f05..f0149c30e5 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,9 +1,26 @@
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
 import pfe from '@patternfly/eslint-config-elements';
+import htmleslint from '@html-eslint/eslint-plugin';
 
 export default tseslint.config(
   ...pfe,
+  {
+    plugins: {
+      '@html-eslint': htmleslint,
+    },
+    rules: {
+      '@html-eslint/no-trailing-spaces': 'error',
+      '@html-eslint/no-extra-spacing-attrs': 'error',
+      '@html-eslint/no-duplicate-class': 'error',
+      '@html-eslint/no-extra-spacing-text': 'error',
+      '@html-eslint/no-duplicate-attrs': 'error',
+      '@html-eslint/no-abstract-roles': 'error',
+      '@html-eslint/prefer-https': 'error',
+      '@html-eslint/no-target-blank': 'error',
+      '@html-eslint/quotes': 'error',
+    },
+  },
   {
     name: 'local/ignores',
     ignores: [
diff --git a/package-lock.json b/package-lock.json
index 2386d223d9..f3075900e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@11ty/eleventy-plugin-rss": "^2.0.3",
         "@commitlint/cli": "^19.8.0",
         "@commitlint/config-conventional": "^19.8.0",
+        "@html-eslint/eslint-plugin": "^0.40.3",
         "@lit-labs/eleventy-plugin-lit": "^1.0.5",
         "@lit-labs/ssr": "^3.3.1",
         "@lit-labs/ssr-client": "^1.1.7",
@@ -2303,19 +2304,32 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.7.tgz",
-      "integrity": "sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==",
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.8.tgz",
+      "integrity": "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.12.0",
+        "@eslint/core": "^0.13.0",
         "levn": "^0.4.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@eslint/plugin-kit/node_modules/@eslint/core": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.13.0.tgz",
+      "integrity": "sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@esm-bundle/chai": {
       "version": "4.3.4-fix.0",
       "resolved": "https://registry.npmjs.org/@esm-bundle/chai/-/chai-4.3.4-fix.0.tgz",
@@ -2368,6 +2382,47 @@
       "license": "BSD-3-Clause",
       "peer": true
     },
+    "node_modules/@html-eslint/eslint-plugin": {
+      "version": "0.40.3",
+      "resolved": "https://registry.npmjs.org/@html-eslint/eslint-plugin/-/eslint-plugin-0.40.3.tgz",
+      "integrity": "sha512-ju0BTpo60/NOqh2VIQzBz2d+cekzmvqJZ2BHFRfg3oDQqWzp8nIrgNiKws0ILfs82su/w4zZBqKtMMQp4WvsvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint/plugin-kit": "0.2.8",
+        "@html-eslint/parser": "^0.40.0",
+        "@html-eslint/template-parser": "^0.40.0",
+        "@html-eslint/template-syntax-parser": "^0.40.0"
+      }
+    },
+    "node_modules/@html-eslint/parser": {
+      "version": "0.40.0",
+      "resolved": "https://registry.npmjs.org/@html-eslint/parser/-/parser-0.40.0.tgz",
+      "integrity": "sha512-xvySQLPogafK2aTOPBD6V7+4qpr1AnOZXO8zM2z0b4i3BB9ISk5PTWu5+ofOekKxjxUh7Z+QWaoezu1SIi33YA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@html-eslint/template-syntax-parser": "^0.40.0",
+        "es-html-parser": "0.2.0"
+      }
+    },
+    "node_modules/@html-eslint/template-parser": {
+      "version": "0.40.0",
+      "resolved": "https://registry.npmjs.org/@html-eslint/template-parser/-/template-parser-0.40.0.tgz",
+      "integrity": "sha512-f1S70T88yRe3zStT0CiDDgRw24Fgi1wgbW74YNUocEVuXvh2snxBEufY46Yg2udGlOz+SnQaygshacW45L+JWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-html-parser": "0.2.0"
+      }
+    },
+    "node_modules/@html-eslint/template-syntax-parser": {
+      "version": "0.40.0",
+      "resolved": "https://registry.npmjs.org/@html-eslint/template-syntax-parser/-/template-syntax-parser-0.40.0.tgz",
+      "integrity": "sha512-Rq3UmjiWreKnXrN95Nt6vLlKgQrV8PhoYrlADn3u7X7vtgCccTmjV6aUHJCw7AyNXmcSNNpN2KPsBmQfH3y58A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -12370,6 +12425,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-html-parser": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/es-html-parser/-/es-html-parser-0.2.0.tgz",
+      "integrity": "sha512-snJ7uJC8Dkx/yT0eYZrWcY57rkPU6Zui6YphPynw8r52AWf57gjqMC0GWe7OxSDipwXowFpa3rqckEeAPTOz7w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-module-lexer": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
diff --git a/package.json b/package.json
index 46f413cc72..b41ed6ccec 100644
--- a/package.json
+++ b/package.json
@@ -287,6 +287,7 @@
     "@11ty/eleventy-plugin-rss": "^2.0.3",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
+    "@html-eslint/eslint-plugin": "^0.40.3",
     "@lit-labs/eleventy-plugin-lit": "^1.0.5",
     "@lit-labs/ssr": "^3.3.1",
     "@lit-labs/ssr-client": "^1.1.7",
diff --git a/uxdot/uxdot-pattern.ts b/uxdot/uxdot-pattern.ts
index bae2e3737e..192fb4c9c9 100644
--- a/uxdot/uxdot-pattern.ts
+++ b/uxdot/uxdot-pattern.ts
@@ -101,7 +101,7 @@ export class UxdotPattern extends SSRFailureRecoverableElement {
                  active-index="${ifDefined(!this.#picked ? ['html', 'css', 'js'].indexOf(activeTab) : undefined)}"
                  ?hidden="${this.noCodeTabs}"
                  @expand="${this.#onExpand}">
-          <rh-tab id="html-tab" slot="tab" >HTML</rh-tab>
+          <rh-tab id="html-tab" slot="tab">HTML</rh-tab>
           <rh-tab-panel id="html-panel">
             <rh-code-block highlighting="prerendered"
                            actions="copy wrap"
@@ -110,7 +110,7 @@ export class UxdotPattern extends SSRFailureRecoverableElement {
               ${actionsLabels}
             </rh-code-block>
           </rh-tab-panel>
-          <rh-tab id="css-tab" slot="tab" .disabled="${!hasCss}" >CSS</rh-tab>
+          <rh-tab id="css-tab" slot="tab" .disabled="${!hasCss}">CSS</rh-tab>
           <rh-tab-panel id="css-panel">
             <rh-code-block highlighting="prerendered"
                            actions="copy wrap"
@@ -119,7 +119,7 @@ export class UxdotPattern extends SSRFailureRecoverableElement {
               ${actionsLabels}
             </rh-code-block>
           </rh-tab-panel>
-          <rh-tab id="js-tab" slot="tab" .disabled="${!hasJs}" >JS</rh-tab>
+          <rh-tab id="js-tab" slot="tab" .disabled="${!hasJs}">JS</rh-tab>
           <rh-tab-panel id="js-panel">
             <rh-code-block highlighting="prerendered"
                            actions="copy wrap"

From 96e6c858314fc89d5aa666b3b6be9e76a2429ba6 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 21 May 2025 11:25:11 +0300
Subject: [PATCH 2/2] style: lint with sort-attrs

---
 docs/_includes/layouts/pages/element.11ty.ts  |  22 ++--
 docs/_includes/layouts/pages/tokens.11ty.ts   |  10 +-
 docs/_plugins/markdown-it.ts                  |   2 +-
 docs/_plugins/tokensHelpers.ts                |   4 +-
 .../iconography/iconography.11ty.js           |   4 +-
 docs/foundations/iconography/icons.js         |   2 +-
 elements/rh-accordion/rh-accordion-header.ts  |   4 +-
 .../rh-accordion/test/rh-accordion.spec.ts    |   4 +-
 elements/rh-alert/demo/dismissable.html       |   2 +-
 elements/rh-alert/rh-alert.ts                 |  24 ++--
 elements/rh-announcement/rh-announcement.ts   |  10 +-
 .../test/rh-announcement.spec.ts              |   6 +-
 .../rh-audio-player-rate-stepper.ts           |  22 ++--
 ...rh-audio-player-scrolling-text-overflow.ts |   6 +-
 .../rh-audio-player-subscribe.ts              |   2 +-
 elements/rh-audio-player/rh-audio-player.ts   | 122 +++++++++---------
 elements/rh-audio-player/rh-cue.ts            |   4 +-
 elements/rh-audio-player/rh-transcript.ts     |   2 +-
 .../test/rh-audio-player.spec.ts              |  20 +--
 elements/rh-avatar/rh-avatar.ts               |  12 +-
 elements/rh-back-to-top/rh-back-to-top.ts     |   4 +-
 elements/rh-blockquote/rh-blockquote.ts       |   2 +-
 elements/rh-breadcrumb/rh-breadcrumb.ts       |   2 +-
 .../rh-breadcrumb/test/rh-breadcrumb.spec.ts  |   4 +-
 elements/rh-button/demo/form-control.html     |   2 +-
 elements/rh-button/rh-button.ts               |  14 +-
 elements/rh-card/rh-card.ts                   |  20 +--
 elements/rh-card/test/rh-card.spec.ts         |   4 +-
 elements/rh-chip/rh-chip.ts                   |  10 +-
 elements/rh-code-block/rh-code-block.ts       |  44 +++----
 elements/rh-cta/demo/analytics.html           |   2 +-
 elements/rh-cta/rh-cta.ts                     |   8 +-
 elements/rh-dialog/rh-dialog.ts               |  10 +-
 elements/rh-dialog/test/rh-dialog.spec.ts     |   8 +-
 elements/rh-disclosure/rh-disclosure.ts       |   2 +-
 elements/rh-footer/rh-footer-links.ts         |   4 +-
 elements/rh-footer/rh-footer-social-link.ts   |   4 +-
 elements/rh-footer/rh-footer-universal.ts     |   8 +-
 elements/rh-footer/rh-footer.ts               |   2 +-
 elements/rh-footer/test/rh-footer.spec.ts     |   8 +-
 elements/rh-health-index/rh-health-index.ts   |   4 +-
 elements/rh-icon/rh-icon.ts                   |   4 +-
 elements/rh-jump-links/rh-jump-link.ts        |   4 +-
 elements/rh-jump-links/rh-jump-links.ts       |  20 +--
 .../rh-navigation-primary.ts                  |   6 +-
 .../rh-navigation-primary/test/fixtures.ts    |  14 +-
 .../rh-navigation-secondary-dropdown.ts       |   2 +-
 .../rh-navigation-secondary.ts                |  14 +-
 .../rh-navigation-secondary/test/fixtures.ts  |  22 ++--
 elements/rh-pagination/rh-pagination.ts       |  32 ++---
 elements/rh-site-status/rh-site-status.ts     |   8 +-
 elements/rh-spinner/rh-spinner.ts             |   6 +-
 elements/rh-stat/test/rh-stat.spec.ts         |   4 +-
 elements/rh-subnav/rh-subnav.ts               |  20 +--
 elements/rh-subnav/test/rh-subnav.spec.ts     |   2 +-
 elements/rh-switch/rh-switch.ts               |  12 +-
 elements/rh-switch/test/rh-switch.spec.ts     |  12 +-
 elements/rh-table/rh-sort-button.ts           |  10 +-
 elements/rh-tabs/rh-tab.ts                    |   8 +-
 elements/rh-tabs/rh-tabs.ts                   |  24 ++--
 elements/rh-tag/rh-tag.ts                     |   2 +-
 elements/rh-tag/test/rh-tag.spec.ts           |   2 +-
 elements/rh-tile/rh-tile.ts                   |  18 +--
 elements/rh-tile/test/rh-tile.spec.ts         |   4 +-
 .../rh-timestamp/test/rh-timestamp.spec.ts    |   6 +-
 elements/rh-tooltip/rh-tooltip.ts             |   4 +-
 elements/rh-tooltip/test/rh-tooltip.spec.ts   |   2 +-
 elements/rh-video-embed/rh-video-embed.ts     |  32 ++---
 .../test/rh-video-embed.spec.ts               |  34 ++---
 eslint.config.js                              |   3 +
 lib/context/headings/consumer.ts              |  12 +-
 .../rh-context-demo/rh-context-demo.ts        |   4 +-
 .../rh-context-picker/rh-context-picker.ts    |   8 +-
 scripts/validate-prs.js                       |   3 -
 uxdot/uxdot-best-practice.ts                  |   2 +-
 uxdot/uxdot-color-scheme-picker.ts            |  12 +-
 uxdot/uxdot-copy-button.ts                    |   2 +-
 uxdot/uxdot-copy-permalink.ts                 |   6 +-
 uxdot/uxdot-demo.ts                           |  14 +-
 uxdot/uxdot-example.ts                        |   2 +-
 uxdot/uxdot-feedback.ts                       |   2 +-
 uxdot/uxdot-header.ts                         |   8 +-
 uxdot/uxdot-masthead.ts                       |  12 +-
 uxdot/uxdot-pattern.ts                        |  22 ++--
 uxdot/uxdot-repo-status-checklist.ts          |   6 +-
 uxdot/uxdot-repo-status-list.ts               |   8 +-
 uxdot/uxdot-repo-status-table.ts              |  10 +-
 uxdot/uxdot-search.ts                         |  26 ++--
 uxdot/uxdot-sidenav.ts                        |   6 +-
 uxdot/uxdot-spacer-tokens-table.ts            |  10 +-
 uxdot/uxdot-toc.ts                            |   8 +-
 91 files changed, 482 insertions(+), 482 deletions(-)

diff --git a/docs/_includes/layouts/pages/element.11ty.ts b/docs/_includes/layouts/pages/element.11ty.ts
index 86aa17a8c5..51ecabc7eb 100644
--- a/docs/_includes/layouts/pages/element.11ty.ts
+++ b/docs/_includes/layouts/pages/element.11ty.ts
@@ -79,7 +79,7 @@ export default class ElementsPage extends Renderer<Context> {
     ].filter(Boolean);
 
     return html`${stylesheets.map(x => html`
-      <link rel="stylesheet" data-helmet href="${x}">`).join('')}
+      <link data-helmet href="${x}" rel="stylesheet">`).join('')}
 
       <noscript data-helmet>
         <style>
@@ -124,9 +124,9 @@ export default class ElementsPage extends Renderer<Context> {
 
   #actionsLabels = html`
     <span slot="action-label-copy">Copy to Clipboard</span>
-    <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
+    <span slot="action-label-copy" data-code-block-state="active" hidden>Copied!</span>
     <span slot="action-label-wrap">Wrap lines</span>
-    <span slot="action-label-wrap" hidden data-code-block-state="active">Overflow lines</span>
+    <span slot="action-label-wrap" data-code-block-state="active" hidden>Overflow lines</span>
   `;
 
   async #innerMD(content = '') {
@@ -178,7 +178,7 @@ export default class ElementsPage extends Renderer<Context> {
        : ctx.doc.overviewImageHref.endsWith('svg') ? html`
       <uxdot-example>${await this.#getOverviewInlineSvg(ctx)}</uxdot-example>
       ` : html`
-      <uxdot-example color-palette="lightest"><img src="${ctx.doc.overviewImageHref}" alt="" aria-labelledby="overview-image-description"></uxdot-example>`}
+      <uxdot-example color-palette="lightest"><img alt="" aria-labelledby="overview-image-description" src="${ctx.doc.overviewImageHref}"></uxdot-example>`}
       ${this.#header('Status')}
       <uxdot-repo-status-list element="${ctx.tagName}"></uxdot-repo-status-list>
       ${this.#header('Sample element')}
@@ -195,7 +195,7 @@ export default class ElementsPage extends Renderer<Context> {
     return [
       content,
       html`
-      <section class="band" id="installation">
+      <section id="installation" class="band">
         ${this.#header('Importing')}
         <p>Add ${doc.docsPage.tagName} to your page with this import statement:</p>
         <rh-code-block actions="copy" highlighting="prerendered">${this.highlight('html', dedent(html`
@@ -239,7 +239,7 @@ export default class ElementsPage extends Renderer<Context> {
 
         <rh-code-block actions="copy" highlighting="prerendered">
           ${this.highlight('html', html`
-          <link rel="stylesheet" href="/path/to/${docsPage.tagName}/${docsPage.tagName}-lightdom.css">
+          <link href="/path/to/${docsPage.tagName}/${docsPage.tagName}-lightdom.css" rel="stylesheet">
           `.trim())}
         </rh-code-block>
       `;
@@ -259,7 +259,7 @@ export default class ElementsPage extends Renderer<Context> {
 
         <rh-code-block actions="copy" highlighting="prerendered">
           ${this.highlight('html', html`
-          <link rel="stylesheet" href="/path/to/${docsPage.tagName}/${docsPage.tagName}-lightdom-shim.css">
+          <link href="/path/to/${docsPage.tagName}/${docsPage.tagName}-lightdom-shim.css" rel="stylesheet">
           `.trim())}
         </rh-code-block>
 
@@ -647,7 +647,7 @@ export default class ElementsPage extends Renderer<Context> {
                   <td><code>${prop.name}</code></td>
                   <td>${await this.#innerMD(prop.description ?? '')}</td>
                   <td>
-                    ${!prop.default?.startsWith('#') ? html`<code>` : html`<code data-color="${prop.default}" style="--color:${prop.default}">`}${prop.default ?? '—'}</code>
+                    ${!prop.default?.startsWith('#') ? html`<code>` : html`<code style="--color:${prop.default}" data-color="${prop.default}">`}${prop.default ?? '—'}</code>
                   </td>
                 </tr>`))).join('')}
               </tbody>
@@ -758,12 +758,12 @@ export default class ElementsPage extends Renderer<Context> {
             return html`
               ${this.#header(demo.title, 2, `demo-${labelSlug}`)}
               <uxdot-demo id="${projectId}"
-                          tag="${tagName}"
                           demo="${demoSlug}"
-                          demo-title="${demo.title}"
+                          demo-file-path="${demo.filePath}"
                           demo-source-url="${sourceUrl}"
+                          demo-title="${demo.title}"
                           demo-url="${demoUrl}"
-                          demo-file-path="${demo.filePath}"
+                          tag="${tagName}"
               >${codeblocks}</uxdot-demo>
             `;
           } else {
diff --git a/docs/_includes/layouts/pages/tokens.11ty.ts b/docs/_includes/layouts/pages/tokens.11ty.ts
index 1d75dd5441..3d35360bb3 100644
--- a/docs/_includes/layouts/pages/tokens.11ty.ts
+++ b/docs/_includes/layouts/pages/tokens.11ty.ts
@@ -235,7 +235,7 @@ export default class TokensPage extends Renderer<Data> {
             ${isColor && token.path.includes('text') ? 'Aa'
             : isFont ? (example || (token.attributes?.aliases as string[])?.[0] || 'Aa')
             : name === 'breakpoint' ? html`
-            <img src="/assets/breakpoints/device-${token.name}.svg" role="presentation">`
+            <img role="presentation" src="/assets/breakpoints/device-${token.name}.svg">`
             : example}
           </samp>
         </td>
@@ -310,7 +310,7 @@ export default class TokensPage extends Renderer<Data> {
                class="swatches"
                color-palette="lightest">
         <h${level + 1} slot="header">Theme Tokens</h${level + 1}>
-        <label for="picker-${slug}" slot="header">Color Palette</label>
+        <label slot="header" for="picker-${slug}">Color Palette</label>
         <rh-context-picker id="picker-${slug}"
                            slot="header"
                            allow="lightest,darkest"
@@ -420,9 +420,9 @@ export default class TokensPage extends Renderer<Data> {
     const seenPaths = new Set<string>();
     const options: Options = { tokens, name, path, slug, level: 1, exclude, include, seenPaths };
     return html`
-      <link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
-      <link rel="stylesheet" data-helmet href="/styles/samp.css">
-      <link rel="stylesheet" data-helmet href="/styles/pages/tokens.css">
+      <link data-helmet href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css" rel="stylesheet">
+      <link data-helmet href="/styles/samp.css" rel="stylesheet">
+      <link data-helmet href="/styles/pages/tokens.css" rel="stylesheet">
       <script type="module" data-helmet>
         import '@uxdot/elements/uxdot-spacer-tokens-table.js';
         import '@rhds/elements/rh-card/rh-card.js';
diff --git a/docs/_plugins/markdown-it.ts b/docs/_plugins/markdown-it.ts
index cb15620b5f..11937b69d5 100644
--- a/docs/_plugins/markdown-it.ts
+++ b/docs/_plugins/markdown-it.ts
@@ -69,8 +69,8 @@ function rhdsCodeBlock(md: MarkdownIt) {
       const redactedToken = Object.assign(token, { info });
       return html`
         <rh-code-block ${normalized.startsWith('rh' ) ? 'full-height' : ''}
-                       dedent
                        actions="${actions.join(' ')}"
+                       dedent
                        highlighting="prerendered"
                        ${slf.renderAttrs(redactedToken)}>${rendered}</rh-code-block>`.trim();
     } else {
diff --git a/docs/_plugins/tokensHelpers.ts b/docs/_plugins/tokensHelpers.ts
index abe25cbb4e..90208aac75 100644
--- a/docs/_plugins/tokensHelpers.ts
+++ b/docs/_plugins/tokensHelpers.ts
@@ -47,12 +47,12 @@ export function copyCell(token: DesignToken) {
     <td data-label="Copy">
       <div>
         <uxdot-copy-button class="icon-only" copy="${getVariableSyntax(token)}">
-          <span slot="extra-content" class="visually-hidden">
+          <span class="visually-hidden" slot="extra-content">
             Full CSS Variable
           </span>
         </uxdot-copy-button>
         <uxdot-copy-button class="icon-only" copy="${getTokenHref(token)}" icon="link">
-          <span slot="extra-content" class="visually-hidden">
+          <span class="visually-hidden" slot="extra-content">
             Permalink to this token
           </span>
         </uxdot-copy-button>
diff --git a/docs/foundations/iconography/iconography.11ty.js b/docs/foundations/iconography/iconography.11ty.js
index f2fb60522c..741c37836d 100644
--- a/docs/foundations/iconography/iconography.11ty.js
+++ b/docs/foundations/iconography/iconography.11ty.js
@@ -18,7 +18,7 @@ export default class IconsPage {
   async render(ctx) {
     const { icons } = ctx;
     return html`
-      <script type="module" src="./icons.js" data-helmet></script>
+      <script type="module" data-helmet src="./icons.js"></script>
 
       <style data-helmet>
         .icon-set {
@@ -84,7 +84,7 @@ export default class IconsPage {
     const label = `Copy icon HTML for ${set} ${icon}`;
     return html`
       <li>
-        <rh-icon set="${set}" icon="${icon}"></rh-icon>
+        <rh-icon icon="${icon}" set="${set}"></rh-icon>
         <rh-button accessible-label="${label}" variant="link">${icon}</rh-button>
       </li>
     `;
diff --git a/docs/foundations/iconography/icons.js b/docs/foundations/iconography/icons.js
index 63c87a936d..e2ad466fb0 100644
--- a/docs/foundations/iconography/icons.js
+++ b/docs/foundations/iconography/icons.js
@@ -7,7 +7,7 @@ document.addEventListener('click', async function(event) {
   if (event.target instanceof RhButton) {
     const { icon, set } = event.target.parentElement.querySelector('rh-icon[icon][set]');
     if (icon && set) {
-      const html = /* html*/`<rh-icon set="${set}" icon="${icon}"></rh-icon>`;
+      const html = /* html*/`<rh-icon icon="${icon}" set="${set}"></rh-icon>`;
       await navigator.clipboard.writeText(html);
       const message = html;
       await RhAlert.toast({ heading: 'Copied', message });
diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts
index 4523939f4b..be3562b1e7 100644
--- a/elements/rh-accordion/rh-accordion-header.ts
+++ b/elements/rh-accordion/rh-accordion-header.ts
@@ -97,8 +97,8 @@ export class RhAccordionHeader extends LitElement {
         </span>
         <svg id="icon"
              role="presentation"
-             xmlns="http://www.w3.org/2000/svg"
-             viewBox="0 0 448 512">
+             viewBox="0 0 448 512"
+             xmlns="http://www.w3.org/2000/svg">
           <path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
         </svg>
       </button>
diff --git a/elements/rh-accordion/test/rh-accordion.spec.ts b/elements/rh-accordion/test/rh-accordion.spec.ts
index e38d9704b0..d8d4d0550b 100644
--- a/elements/rh-accordion/test/rh-accordion.spec.ts
+++ b/elements/rh-accordion/test/rh-accordion.spec.ts
@@ -496,9 +496,9 @@ describe('<rh-accordion>', function() {
     beforeEach(async function() {
       element = await fixture<RhAccordion>(html`
         <rh-accordion>
-          <h2><rh-accordion-header expanded id="attribute-header-1">h1</rh-accordion-header></h2>
+          <h2><rh-accordion-header id="attribute-header-1" expanded>h1</rh-accordion-header></h2>
           <rh-accordion-panel id="attribute-panel-1"><p>p1</p></rh-accordion-panel>
-          <h2><rh-accordion-header expanded id="attribute-header-2">h2</rh-accordion-header></h2>
+          <h2><rh-accordion-header id="attribute-header-2" expanded>h2</rh-accordion-header></h2>
           <rh-accordion-panel id="attribute-panel-2"><p>p2</p></rh-accordion-panel>
           <h2><rh-accordion-header>h3</rh-accordion-header></h2>
           <rh-accordion-panel><p>p3</p></rh-accordion-panel>
diff --git a/elements/rh-alert/demo/dismissable.html b/elements/rh-alert/demo/dismissable.html
index 4eca644092..310ef1b721 100644
--- a/elements/rh-alert/demo/dismissable.html
+++ b/elements/rh-alert/demo/dismissable.html
@@ -33,7 +33,7 @@ <h3 slot="header">Dismissable With Prevent Default</h3>
 </section>
 
 <script type="module">
-  /* eslint-disable no-console */
+   
   import { AlertCloseEvent } from '@rhds/elements/rh-alert/rh-alert.js';
   import '@rhds/elements/rh-button/rh-button.js';
   document.body.addEventListener('close', event => {
diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts
index a8af455f08..0b3a16cdf0 100644
--- a/elements/rh-alert/rh-alert.ts
+++ b/elements/rh-alert/rh-alert.ts
@@ -215,11 +215,11 @@ export class RhAlert extends LitElement {
                     [state]: true,
                     [variant]: !!variant,
                   })}"
-                  role="alert"
                   aria-hidden="false"
-                  color-palette="lightest">
+                  color-palette="lightest"
+                  role="alert">
         <div id="left-column">
-          <rh-icon id="icon" set="ui" icon="${this.#icon}"></rh-icon>
+          <rh-icon id="icon" icon="${this.#icon}" set="ui"></rh-icon>
         </div>
         <div id="middle-column">
           <header ?hidden="${!_isServer && this.#slots.isEmpty('header')}">
@@ -228,10 +228,10 @@ export class RhAlert extends LitElement {
             </div>${!this.dismissable && this.variant !== 'toast' ? '' : html`
             <div id="header-actions">
               <rh-button id="close-button"
-                         variant="close"
+                         @click="${this.#onClose}"
                          accessible-label="Close"
                          confirm
-                         @click="${this.#onClose}"></rh-button>
+                         variant="close"></rh-button>
             </div>`}
           </header>
           <div id="description">
@@ -288,22 +288,22 @@ function renderToasts() {
     const [firstAction, secondAction] = actions ?? [];
     return html`
     <rh-alert id="${id}"
-              state="${state}"
               class="${classMap({ persistent })}"
-              variant="toast"
-              role="status"
-              aria-live="polite"
               @focusin="${manageAlertAnimation}"
               @focusout="${manageAlertAnimation}"
               @mouseenter="${manageAlertAnimation}"
-              @mouseleave="${manageAlertAnimation}">
+              @mouseleave="${manageAlertAnimation}"
+              aria-live="polite"
+              role="status"
+              state="${state}"
+              variant="toast">
       <h3 slot="header">${heading}</h3>
       ${!message ? '' : typeof message !== 'string' ? message : html`
       <p class="text" ?hidden="${!message}">${message}</p>`}
       ${[firstAction, secondAction].filter(x => !!x).map(action => html`
       <rh-button slot="actions"
-                 variant="${action === firstAction ? 'secondary' : 'link'}"
-                 data-action="${action.action}">${action.text}</rh-button>
+                 data-action="${action.action}"
+                 variant="${action === firstAction ? 'secondary' : 'link'}">${action.text}</rh-button>
       `) ?? []}
     </rh-alert>
   `;
diff --git a/elements/rh-announcement/rh-announcement.ts b/elements/rh-announcement/rh-announcement.ts
index 906006f18a..e4d19b343c 100644
--- a/elements/rh-announcement/rh-announcement.ts
+++ b/elements/rh-announcement/rh-announcement.ts
@@ -75,8 +75,8 @@ export class RhAnnouncement extends LitElement {
             })}">
         <div id="row" part="row">
           <div id="image"
-               part="image"
-               class="${classMap({ empty: !this.#slots.hasSlotted('image') })}">
+               class="${classMap({ empty: !this.#slots.hasSlotted('image') })}"
+               part="image">
             <slot name="image"></slot>
           </div>
           <div id="content">
@@ -92,10 +92,10 @@ export class RhAnnouncement extends LitElement {
              ?hidden="${!this.dismissable}"
              ?inert="${!this.dismissable}">
           <rh-button id="close-button"
-                  label="Close"
+                  @click=${this.#closeHandler}
                   confirm
-                  variant="close"
-                  @click=${this.#closeHandler}></rh-button>
+                  label="Close"
+                  variant="close"></rh-button>
         </div>
       </div>
     `;
diff --git a/elements/rh-announcement/test/rh-announcement.spec.ts b/elements/rh-announcement/test/rh-announcement.spec.ts
index ddbe7557b9..2f8d9e8ce4 100644
--- a/elements/rh-announcement/test/rh-announcement.spec.ts
+++ b/elements/rh-announcement/test/rh-announcement.spec.ts
@@ -27,9 +27,9 @@ describe('with `dismissable` and `image-position` attributes, a slotted image, a
   beforeEach(async function() {
     element = await createFixture<RhAnnouncement>(html`
       <rh-announcement dismissable image-position="inline-start">
-        <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
-          <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4"></rect>
-          <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
+        <svg slot="image" aria-label="Sample image" height="48" role="img" width="80">
+          <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" height="100%" stroke="var(--rh-color-border-subtle)" stroke-dasharray="4 4" stroke-width="2px" width="100%"></rect>
+          <text style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))" x="17" y="30">
             Image
           </text>
         </svg>
diff --git a/elements/rh-audio-player/rh-audio-player-rate-stepper.ts b/elements/rh-audio-player/rh-audio-player-rate-stepper.ts
index 08a952f05c..7e29927ecc 100644
--- a/elements/rh-audio-player/rh-audio-player-rate-stepper.ts
+++ b/elements/rh-audio-player/rh-audio-player-rate-stepper.ts
@@ -51,30 +51,30 @@ export class RhAudioPlayerRateStepper extends LitElement {
         <div>
           <button id="stepdown"
                   class="tabbable playback-rate-step"
-                  tabindex="-1"
-                  aria-label="<"
                   ?disabled="${this.disabled || this.playbackRate < 0.5}"
-                  @click="${this.#dec}">
+                  @click="${this.#dec}"
+                  aria-label="<"
+                  tabindex="-1">
             <rh-icon icon="caret-left" set="microns"></rh-icon>
           </button>
           <select id="playback-rate"
                   class="tabbable"
-                  aria-label="${ifDefined(this.label)}"
                   ?disabled="${this.disabled}"
-                  @click="${this.#onPlaybackRateSelect}"
+                  .value="${this.playbackRate?.toFixed(pbrFixed)}"
                   @change="${this.#onPlaybackRateSelect}"
-                  .value="${this.playbackRate?.toFixed(pbrFixed)}">${this.#playbackRates.map(step => html`
-            <option .value="${step.toFixed(pbrFixed)}"
-                    ?selected=${this.playbackRate.toFixed(pbrFixed) === step.toFixed(pbrFixed)}>
+                  @click="${this.#onPlaybackRateSelect}"
+                  aria-label="${ifDefined(this.label)}">${this.#playbackRates.map(step => html`
+            <option ?selected=${this.playbackRate.toFixed(pbrFixed) === step.toFixed(pbrFixed)}
+                    .value="${step.toFixed(pbrFixed)}">
               ${step.toFixed(pbrFixed)}x
             </option>`)}
           </select>
           <button id="stepup"
                   class="tabbable playback-rate-step"
-                  tabindex="-1"
-                  aria-label=">"
                   ?disabled="${this.disabled || this.playbackRate > 1.75}"
-                  @click="${this.#inc}">
+                  @click="${this.#inc}"
+                  aria-label=">"
+                  tabindex="-1">
             <rh-icon icon="caret-right" set="microns"></rh-icon>
           </button>
         </div>
diff --git a/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts b/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts
index 25d6f87bb4..a5d39ac67f 100644
--- a/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts
+++ b/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts
@@ -46,10 +46,10 @@ export class RhAudioPlayerScrollingTextOverflow extends LitElement {
     return html`
       <div id="outer"
            class="${classMap({ [direction || 'auto']: true })}"
-           @mouseover=${this.startScrolling}
-           @mouseout=${this.stopScrolling}
+           @blur=${this.stopScrolling}
            @focus=${this.startScrolling}
-           @blur=${this.stopScrolling}>
+           @mouseout=${this.stopScrolling}
+           @mouseover=${this.startScrolling}>
         <div id="inner">
           <slot class="${this.#scrolling ? 'scrolling' : ''} ${this.#isScrollable ? 'scrollable' : ''}"></slot>
         </div>
diff --git a/elements/rh-audio-player/rh-audio-player-subscribe.ts b/elements/rh-audio-player/rh-audio-player-subscribe.ts
index 734b481abc..5f0f69adb9 100644
--- a/elements/rh-audio-player/rh-audio-player-subscribe.ts
+++ b/elements/rh-audio-player/rh-audio-player-subscribe.ts
@@ -40,7 +40,7 @@ export class RhAudioPlayerSubscribe extends LitElement {
         <slot name="heading">${this.#headings.wrap(this.menuLabel)}</slot>
       </rh-audio-player-scrolling-text-overflow>
       <slot part="body" ?hidden="${this.#slots.isEmpty(null)}"></slot>
-      <slot name="link" part="links"></slot>`;
+      <slot part="links" name="link"></slot>`;
   }
 
   set menuLabel(label: string) {
diff --git a/elements/rh-audio-player/rh-audio-player.ts b/elements/rh-audio-player/rh-audio-player.ts
index 2e238a4698..ac7ad78c61 100644
--- a/elements/rh-audio-player/rh-audio-player.ts
+++ b/elements/rh-audio-player/rh-audio-player.ts
@@ -381,7 +381,7 @@ export class RhAudioPlayer extends LitElement {
               'mobile-safari': !!this.#isMobileSafari,
             })}">
         <input type="hidden" value=${this.#readyState}>
-        <slot id="media" name="media" @slotchange="${this.#initMediaElement}"></slot>
+        <slot id="media" @slotchange="${this.#initMediaElement}" name="media"></slot>
         <div id="toolbar"
              class="${this.expanded ? 'expanded' : ''}"
              part="toolbar"
@@ -390,36 +390,36 @@ export class RhAudioPlayer extends LitElement {
           <div id="poster"><img .src="${poster}" aria-hidden="true"></div>`}
           <rh-tooltip id="play-tooltip">
             <button id="play"
-                    aria-label="${playlabel}"
                     class="toolbar-button"
                     ?disabled=${!this.#mediaElement || playdisabled}
                     @click=${this.#onPlayClick}
-                    @focus=${this.#onPlayFocus}>
-              <rh-icon set="ui" icon="${this.paused ? 'play-fill' : 'pause-fill'}"></rh-icon>
+                    @focus=${this.#onPlayFocus}
+                    aria-label="${playlabel}">
+              <rh-icon icon="${this.paused ? 'play-fill' : 'pause-fill'}" set="ui"></rh-icon>
             </button>
             <span slot="content">${playlabel}</span>
           </rh-tooltip>
 
           <div id="full-title">
             <rh-audio-player-scrolling-text-overflow id="mediaseries" ?hidden=${!this.mediaseries}>
-              <slot name="series" @slotchange=${this.#onTitleChange}>${this.mediaseries}</slot>
+              <slot @slotchange=${this.#onTitleChange} name="series">${this.mediaseries}</slot>
             </rh-audio-player-scrolling-text-overflow>
             <rh-audio-player-scrolling-text-overflow id="mediatitle" ?hidden=${!this.mediatitle}>
-              <slot name="title" @slotchange=${this.#onTitleChange}>${this.mediatitle}</slot>
+              <slot @slotchange=${this.#onTitleChange} name="title">${this.mediatitle}</slot>
             </rh-audio-player-scrolling-text-overflow>
           </div>
 
           <rh-tooltip id="time-tooltip">
             <input id="time"
                    class="toolbar-button"
+                   type="range"
+                   ?disabled="${this.duration === 0}"
+                   @input=${this.#onTimeSlider}
                    aria-label="${this.#translation.get('seek')}"
-                   min="0"
                    max="100"
+                   min="0"
                    step="1"
-                   type="range"
-                   value="${currentTimePct}"
-                   ?disabled="${this.duration === 0}"
-                   @input=${this.#onTimeSlider}>
+                   value="${currentTimePct}">
             <span slot="content">${this.#translation.get('seek')}</span>
           </rh-tooltip>
 
@@ -428,21 +428,21 @@ export class RhAudioPlayer extends LitElement {
           <div class="spacer"></div>
 
           <rh-audio-player-rate-stepper id="playback-rate"
-                                        @playback-rate-select="${this.#onPlaybackRateSelect}"
                                         ?hidden="${this.#isFull || this.#isMini}"
                                         .disabled="${!this.#mediaElement}"
+                                        .label="${this.#translation.get('speed')}"
                                         .playbackRate="${this.playbackRate}"
-                                        .label="${this.#translation.get('speed')}"></rh-audio-player-rate-stepper>
+                                        @playback-rate-select="${this.#onPlaybackRateSelect}"></rh-audio-player-rate-stepper>
 
           ${this.#isMobileSafari ? '' : html`
 
           <rh-tooltip id="mute-tooltip">
             <button id="mute"
-                    aria-label="${mutelabel}"
                     class="toolbar-button"
                     ?disabled=${!this.#mediaElement}
-                    @click=${this.#onMuteButton}>
-              <rh-icon set="ui" icon="${this.muted ? 'mute-fill' : 'volume-up-fill'}"></rh-icon>
+                    @click=${this.#onMuteButton}
+                    aria-label="${mutelabel}">
+              <rh-icon icon="${this.muted ? 'mute-fill' : 'volume-up-fill'}" set="ui"></rh-icon>
             </button>
             <span slot="content">${mutelabel}</span>
           </rh-tooltip>${this.#isMini ? '' : html`
@@ -451,14 +451,14 @@ export class RhAudioPlayer extends LitElement {
             <span slot="content">${this.#translation.get('volume')}</span>
             <input id="volume"
                       class="toolbar-button"
+                      type="range"
+                      ?disabled="${!this.#mediaElement}"
+                      @input=${this.#onVolumeSlider}
                       aria-label="${this.#translation.get('volume')}"
-                      min="0"
                       max=${!this.#mediaElement ? 0 : 100}
+                      min="0"
                       step="1"
-                      type="range"
-                      value=${this.volume * 100}
-                      ?disabled="${!this.#mediaElement}"
-                      @input=${this.#onVolumeSlider}>
+                      value=${this.volume * 100}>
             </rh-tooltip>
           `}
           `}${!this.#isFull ? '' : html`
@@ -472,22 +472,22 @@ export class RhAudioPlayer extends LitElement {
           <div class="full-spacer"></div>
 
           <rh-audio-player-rate-stepper id="full-playback-rate"
-                                        @playback-rate-select="${this.#onPlaybackRateSelect}"
                                         ?hidden="${this.expanded || !this.#isFull}"
                                         .disabled="${!this.#mediaElement}"
+                                        .label="${this.#translation.get('speed')}"
                                         .playbackRate="${this.playbackRate}"
-                                        .label="${this.#translation.get('speed')}"></rh-audio-player-rate-stepper>
+                                        @playback-rate-select="${this.#onPlaybackRateSelect}"></rh-audio-player-rate-stepper>
 
           <rh-tooltip id="rewind-tooltip">
             <button id="rewind"
-                    aria-label="${this.#translation.get('rewind')}"
                     class="toolbar-button"
                     ?disabled=${rewinddisabled}
-                    @click=${() => this.rewind()}>
-              <svg xmlns="http://www.w3.org/2000/svg"
+                    @click=${() => this.rewind()}
+                    aria-label="${this.#translation.get('rewind')}">
+              <svg class="scrubber"
+                   role="presentation"
                    viewBox="0 0 32 32"
-                   class="scrubber"
-                   role="presentation">
+                   xmlns="http://www.w3.org/2000/svg">
                 <path d="M10.4,19.5h1.8v-5l-1.8,0.8v-1l2.2-0.9h0.7v6.2h1.9v1h-4.8V19.5z"/>
                 <path d="M16.4,19.6l0.7-0.8c0.6,0.5,1.2,0.8,1.9,0.8c0.9,0,1.5-0.6,1.5-1.4c0-0.8-0.6-1.3-1.5-1.3 c-0.5,0-0.9,0.1-1.4,0.4L16.8,17l0.2-3.7h4.3v1h-3.3l-0.1,2c0.5-0.2,1-0.3,1.5-0.3c1.4,0,2.4,0.9,2.4,2.1c0,1.4-1.1,2.4-2.7,2.4 C18,20.5,17.1,20.2,16.4,19.6z"/>
                 <path d="M4,6.6L9.5,2v3.7h7.4c6.1,0,11.1,5,11.1,11.1c0,6.1-5,11.1-11.1,11.1H9.5V26h1.8h5.5 c5.1,0,9.2-4.1,9.2-9.2c0-5.1-4.1-9.2-9.2-9.2h-5.5H9.5v3.7L4,6.6z"/>
@@ -498,26 +498,26 @@ export class RhAudioPlayer extends LitElement {
 
           <rh-tooltip id="full-play-tooltip">
             <button id="full-play"
-                    aria-label="${playlabel}"
                     class="toolbar-button"
                     ?disabled=${!this.#mediaElement || playdisabled}
                     @click=${this.#onPlayClick}
-                    @focus=${this.#onPlayFocus}>
-              <rh-icon set="ui" icon="${this.paused ? 'play-fill' : 'pause-fill'}"></rh-icon>
+                    @focus=${this.#onPlayFocus}
+                    aria-label="${playlabel}">
+              <rh-icon icon="${this.paused ? 'play-fill' : 'pause-fill'}" set="ui"></rh-icon>
             </button>
             <span slot="content">${playlabel}</span>
           </rh-tooltip>
 
           <rh-tooltip id="forward-tooltip">
             <button id="forward"
-                    aria-label="${this.#translation.get('advance')}"
                     class="toolbar-button"
                     ?disabled=${forwarddisabled}
-                    @click=${() => this.forward()}>
-              <svg xmlns="http://www.w3.org/2000/svg"
+                    @click=${() => this.forward()}
+                    aria-label="${this.#translation.get('advance')}">
+              <svg class="scrubber"
+                   role="presentation"
                    viewBox="0 0 32 32"
-                   class="scrubber"
-                   role="presentation">
+                   xmlns="http://www.w3.org/2000/svg">
                 <path d="M10.4,19.5h1.8v-5l-1.8,0.8v-1l2.2-0.9h0.7v6.2h1.9v1h-4.8V19.5z"/>
                 <path d="M16.4,19.6l0.7-0.8c0.6,0.5,1.2,0.8,1.9,0.8c0.9,0,1.5-0.6,1.5-1.4c0-0.8-0.6-1.3-1.5-1.3 c-0.5,0-0.9,0.1-1.4,0.4L16.8,17l0.2-3.7h4.3v1h-3.3l-0.1,2c0.5-0.2,1-0.3,1.5-0.3c1.4,0,2.4,0.9,2.4,2.1c0,1.4-1.1,2.4-2.7,2.4 C18,20.5,17.1,20.2,16.4,19.6z"/>
                 <path d="M28,6.6L22.4,2v3.7h-7.4C9,5.7,4,10.6,4,16.7c0,6.1,5,11.1,11.1,11.1h7.4V26h-1.8h-5.5c-5.1,0-9.2-4.1-9.2-9.2 c0-5.1,4.1-9.2,9.2-9.2h5.5h1.8v3.7L28,6.6z"/>
@@ -531,45 +531,45 @@ export class RhAudioPlayer extends LitElement {
                       position="${this.#menuOpen ? 'left' : 'top'}">
             <button id="menu-button"
                     class="toolbar-button"
-                    aria-label="${this.#translation.get('menu')}"
+                    @click="${this.#onMenuToggle}"
                     aria-controls="menu"
                     aria-haspopup="true"
-                    @click="${this.#onMenuToggle}">
-              <rh-icon set="ui" icon="ellipsis-horizontal-fill"></rh-icon>
+                    aria-label="${this.#translation.get('menu')}">
+              <rh-icon icon="ellipsis-horizontal-fill" set="ui"></rh-icon>
             </button>
             <span slot="content">${this.#translation.get('menu')}</span>
           </rh-tooltip>
 
           <rh-menu id="menu"
-                   aria-labelledby="menu-button"
-                   ?inert="${!this.#menuOpen}"
-                   style="${styleMap(styles)}"
                    class="${classMap({ open })}"
+                   style="${styleMap(styles)}"
+                   ?inert="${!this.#menuOpen}"
                    .getItems="${(items: HTMLElement[]) => this.#getMenuItems(items)}"
+                   @focusout="${this.#onMenuFocusout}"
                    @keydown="${this.#onMenuKeydown}"
-                   @focusout="${this.#onMenuFocusout}">${this.#panels.map(x => !x.panel ? '' : html`
+                   aria-labelledby="menu-button">${this.#panels.map(x => !x.panel ? '' : html`
             <button id="${x.id}-menu-item"
-                    aria-label="${x.panel.menuLabel}"
+                    @click="${() => this.#selectOpenPanel(x.panel)}"
                     aria-controls="panel"
-                    @click="${() => this.#selectOpenPanel(x.panel)}">
+                    aria-label="${x.panel.menuLabel}">
               ${x.panel.menuLabel}
             </button>`)}
             <rh-audio-player-rate-stepper id="mini-playback-rate"
-                                          @playback-rate-select="${this.#onPlaybackRateSelect}"
                                           ?hidden="${!this.#isMini}"
                                           .disabled="${!this.#mediaElement}"
+                                          .label="${this.#translation.get('speed')}"
                                           .playbackRate="${this.playbackRate}"
-                                          .label="${this.#translation.get('speed')}"></rh-audio-player-rate-stepper>
+                                          @playback-rate-select="${this.#onPlaybackRateSelect}"></rh-audio-player-rate-stepper>
           </rh-menu>`}
           <rh-tooltip id="close-tooltip">
             <button id="close"
-                    aria-label="${this.#translation.get('close')}"
                     class="toolbar-button"
                     ?disabled="${!this.#mediaElement}"
-                    aria-controls="panel"
                     @click="${this.#selectOpenPanel}"
-                    @keydown="${this.#onCloseKeydown}">
-              <rh-icon set="ui" icon="close"></rh-icon>
+                    @keydown="${this.#onCloseKeydown}"
+                    aria-controls="panel"
+                    aria-label="${this.#translation.get('close')}">
+              <rh-icon icon="close" set="ui"></rh-icon>
             </button>
             <span slot="content">${this.#translation.get('close')}</span>
           </rh-tooltip>
@@ -577,27 +577,27 @@ export class RhAudioPlayer extends LitElement {
         </div>
 
         <div id="panel"
-             role="dialog"
-             aria-live="polite"
-             aria-labelledby="about-menu-item"
              part="panel"
-             ?hidden=${!this.expanded || !this.#hasMenu}>
+             ?hidden=${!this.expanded || !this.#hasMenu}
+             aria-labelledby="about-menu-item"
+             aria-live="polite"
+             role="dialog">
           <slot id="about-slot"
-                name="about"
                 part="about"
-                @slotchange=${this.#onPanelChange}>
+                @slotchange=${this.#onPanelChange}
+                name="about">
             <rh-audio-player-about></rh-audio-player-about>
           </slot>
           <slot id="subscribe-slot"
-                name="subscribe"
                 part="subscribe"
-                @slotchange=${this.#onPanelChange}>
+                @slotchange=${this.#onPanelChange}
+                name="subscribe">
           </slot>
           <slot id="transcribe-slot"
-                name="transcript"
                 part="transcript"
                 @slotchange=${this.#onPanelChange}
-                @transcriptdownload=${this.#onTranscriptDownload}>
+                @transcriptdownload=${this.#onTranscriptDownload}
+                name="transcript">
           </slot>
         </div>
       </div>
diff --git a/elements/rh-audio-player/rh-cue.ts b/elements/rh-audio-player/rh-cue.ts
index 30cd0f0718..5883ebee50 100644
--- a/elements/rh-audio-player/rh-cue.ts
+++ b/elements/rh-audio-player/rh-cue.ts
@@ -120,9 +120,9 @@ export class RhCue extends LitElement {
     ].filter(Boolean).join('');
     return html`
       <a id="${id}"
-         href="#${id}"
          ?active="${this.active && !heading}"
-         @click=${this.#onClick}>${content}</a>`;
+         @click=${this.#onClick}
+         href="#${id}">${content}</a>`;
   }
 
   #onClick() {
diff --git a/elements/rh-audio-player/rh-transcript.ts b/elements/rh-audio-player/rh-transcript.ts
index 394e9d550e..a164f8fc8c 100644
--- a/elements/rh-audio-player/rh-transcript.ts
+++ b/elements/rh-audio-player/rh-transcript.ts
@@ -75,7 +75,7 @@ export class RhTranscript extends LitElement {
         </label>
         <rh-tooltip id="download-tooltip">
           <button id="download" @click="${this.#onDownloadClick}" aria-label="${this.downloadLabel}">
-            <rh-icon set="ui" icon="download"></rh-icon>
+            <rh-icon icon="download" set="ui"></rh-icon>
           </button>
           <span slot="content">${this.downloadLabel}</span>
         </rh-tooltip>`}
diff --git a/elements/rh-audio-player/test/rh-audio-player.spec.ts b/elements/rh-audio-player/test/rh-audio-player.spec.ts
index 633e43de7d..7dbd299852 100644
--- a/elements/rh-audio-player/test/rh-audio-player.spec.ts
+++ b/elements/rh-audio-player/test/rh-audio-player.spec.ts
@@ -36,8 +36,8 @@ describe('<rh-audio-player>', function() {
         <rh-audio-player layout="${ifDefined(layout)}" poster="/elements/rh-audio-player/test/poster.png">
           <p slot="series">Code Comments</p>
           <h3 slot="title">Bringing Deep Learning to Enterprise Applications</h3>
-          <audio crossorigin="anonymous" slot="media" controls preload="auto">
-            <source type="audio/mp3" srclang="en" src="/elements/rh-audio-player/test/test.1mb.mp3">
+          <audio slot="media" controls crossorigin="anonymous" preload="auto">
+            <source type="audio/mp3" src="/elements/rh-audio-player/test/test.1mb.mp3" srclang="en">
           </audio>
           <rh-transcript slot="transcript">
               <rh-cue start="00:01" voice="Burr Sutter"></rh-cue>
@@ -223,20 +223,20 @@ describe('<rh-audio-player>', function() {
       await createFixture<RhAudioPlayer>(html`
         <div>
           <rh-audio-player id="a">
-            <audio src="/elements/rh-audio-player/test/test.100k.mp3"
-                   slot="media"
+            <audio slot="media"
+                   controls
                    crossorigin="anonymous"
+                   loop
                    preload="auto"
-                   controls
-                   loop></audio>
+                   src="/elements/rh-audio-player/test/test.100k.mp3"></audio>
           </rh-audio-player>
           <rh-audio-player id="b">
-            <audio src="/elements/rh-audio-player/test/test.100k.mp3"
-                   slot="media"
+            <audio slot="media"
+                   controls
                    crossorigin="anonymous"
+                   loop
                    preload="auto"
-                   controls
-                   loop></audio>
+                   src="/elements/rh-audio-player/test/test.100k.mp3"></audio>
           </rh-audio-player>
         </div>
       `);
diff --git a/elements/rh-avatar/rh-avatar.ts b/elements/rh-avatar/rh-avatar.ts
index 34298f853e..87cf96a68d 100644
--- a/elements/rh-avatar/rh-avatar.ts
+++ b/elements/rh-avatar/rh-avatar.ts
@@ -82,12 +82,12 @@ export class RhAvatar extends LitElement {
     return html`
       <div id="container" class="${classMap({ mobile })}">${this.pattern ? html`
         <canvas part="canvas"></canvas>` : this.src ? html`
-        <img src="${this.src}" role="presentation" part="img">` : html`
-        <svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 36 36" viewBox="0 0 36 36" role="presentation" part="img" id="default">
-          <path d="M0 0h36v36H0z" class="st1"/><path d="M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z" class="st3"/>
-          <path d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z" class="st2"/>
-          <path d="m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z" class="st4"/>
-          <path d="m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z" class="st2"/>
+        <img part="img" role="presentation" src="${this.src}">` : html`
+        <svg id="default" part="img" style="enable-background:new 0 0 36 36" role="presentation" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+          <path class="st1" d="M0 0h36v36H0z"/><path class="st3" d="M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z"/>
+          <path class="st2" d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z"/>
+          <path class="st4" d="m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z"/>
+          <path class="st2" d="m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z"/>
         </svg>
         `}
         <slot id="title">${this.name}</slot>
diff --git a/elements/rh-back-to-top/rh-back-to-top.ts b/elements/rh-back-to-top/rh-back-to-top.ts
index 48c87f6e41..a8734f14da 100644
--- a/elements/rh-back-to-top/rh-back-to-top.ts
+++ b/elements/rh-back-to-top/rh-back-to-top.ts
@@ -74,9 +74,9 @@ export class RhBackToTop extends LitElement {
 
   render() {
     return html`
-      <a href="${ifDefined(this.href)}" ?hidden="${!this.#visible}" part="trigger">
+      <a part="trigger" ?hidden="${!this.#visible}" href="${ifDefined(this.href)}">
         <slot>Back to top</slot>
-        <rh-icon set="ui" icon="caret-up"></rh-icon>
+        <rh-icon icon="caret-up" set="ui"></rh-icon>
       </a>
     `;
   }
diff --git a/elements/rh-blockquote/rh-blockquote.ts b/elements/rh-blockquote/rh-blockquote.ts
index 4863e50245..cda5e42fb3 100644
--- a/elements/rh-blockquote/rh-blockquote.ts
+++ b/elements/rh-blockquote/rh-blockquote.ts
@@ -56,7 +56,7 @@ export class RhBlockquote extends LitElement {
     const { highlight } = this;
     return html`
       <figure id="container" class="${classMap({ highlight })}">
-        <rh-icon set="standard" icon="quotemark-open"></rh-icon>
+        <rh-icon icon="quotemark-open" set="standard"></rh-icon>
         <blockquote id="quote">
           <slot></slot>
         </blockquote>
diff --git a/elements/rh-breadcrumb/rh-breadcrumb.ts b/elements/rh-breadcrumb/rh-breadcrumb.ts
index e27b8f8c73..aaa4d62c0e 100644
--- a/elements/rh-breadcrumb/rh-breadcrumb.ts
+++ b/elements/rh-breadcrumb/rh-breadcrumb.ts
@@ -54,7 +54,7 @@ export class RhBreadcrumb extends LitElement {
   render() {
     const label = this.accessibleLabel ? this.accessibleLabel : 'Breadcrumb';
     return html`
-      <nav aria-label="${label}" part="container" id="container">
+      <nav id="container" part="container" aria-label="${label}">
         <slot></slot>
       </nav>
     `;
diff --git a/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts
index da6f36bdb2..7c39710000 100644
--- a/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts
+++ b/elements/rh-breadcrumb/test/rh-breadcrumb.spec.ts
@@ -29,7 +29,7 @@ describe('<rh-breadcrumb>', function() {
             <li><a href="#">Red Hat OpenShift on AWS</a></li>
             <li><a href="#">4</a></li>
             <li><a href="#">Introduction to ROSA</a></li>
-            <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
+            <li><a aria-current="page" href="#">Chapter 1. Understanding ROSA</a></li>
           </ol>
         </rh-breadcrumb>
       `);
@@ -94,7 +94,7 @@ describe('<rh-breadcrumb>', function() {
             <li><a href="#">Red Hat OpenShift on AWS</a></li>
             <li><a href="#">4</a></li>
             <li><a href="#">Introduction to ROSA</a></li>
-            <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
+            <li><a aria-current="page" href="#">Chapter 1. Understanding ROSA</a></li>
           </ol>
         </rh-breadcrumb>
       `);
diff --git a/elements/rh-button/demo/form-control.html b/elements/rh-button/demo/form-control.html
index c917b42a22..513924b43d 100644
--- a/elements/rh-button/demo/form-control.html
+++ b/elements/rh-button/demo/form-control.html
@@ -55,7 +55,7 @@
 
   /** @this{HTMLInputElement} */
   function onChange({ target: { checked, dataset: { controls } } }) {
-    // eslint-disable-next-line no-console
+     
     console.log(`${controls}.disabled =`, checked);
     const el = document.getElementById(controls);
     if (el) {
diff --git a/elements/rh-button/rh-button.ts b/elements/rh-button/rh-button.ts
index 922cd5cef8..9f0183bd5e 100644
--- a/elements/rh-button/rh-button.ts
+++ b/elements/rh-button/rh-button.ts
@@ -101,17 +101,17 @@ export class RhButton extends LitElement {
     const { danger, variant } = this;
     const hasIcon = this.#hasIcon;
     return html`
-      <button aria-label="${ifDefined(this.label)}"
-              class="${classMap({
+      <button class="${classMap({
                 danger,
                 hasIcon,
                 [variant]: true,
               })}"
               part="button"
               type="${ifDefined(this.type)}"
-              value="${ifDefined(this.value)}"
               @click="${this.#onClick}"
-              aria-disabled=${String(!!this.disabled || !!this.#internals.formDisabled) as 'true' | 'false'}>
+              aria-disabled=${String(!!this.disabled || !!this.#internals.formDisabled) as 'true' | 'false'}
+              aria-label="${ifDefined(this.label)}"
+              value="${ifDefined(this.value)}">
         <span aria-hidden="true">
           <slot id="icon"
                 part="icon"
@@ -146,11 +146,11 @@ export class RhButton extends LitElement {
   #renderIcon(): TemplateResult {
     switch (this.variant.toLowerCase()) {
       case 'close':
-        return html`<rh-icon set="microns" icon="close"></rh-icon>`;
+        return html`<rh-icon icon="close" set="microns"></rh-icon>`;
       case 'play':
-        return html`<rh-icon set="ui" icon="play-fill"></rh-icon>`;
+        return html`<rh-icon icon="play-fill" set="ui"></rh-icon>`;
       default:
-        return html`<rh-icon set="${this.iconSet ?? 'ui'}" icon="${this.icon}"></rh-icon>`;
+        return html`<rh-icon icon="${this.icon}" set="${this.iconSet ?? 'ui'}"></rh-icon>`;
     }
   }
 
diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts
index 62cd957354..fcbc0e42bb 100644
--- a/elements/rh-card/rh-card.ts
+++ b/elements/rh-card/rh-card.ts
@@ -112,19 +112,18 @@ export class RhCard extends LitElement {
     const hasBody = this.#slots.hasSlotted(null);
     const header = html`
       <div id="header"
-           part="header"
-           class="${classMap({ empty: !hasHeader })}">
+           class="${classMap({ empty: !hasHeader })}"
+           part="header">
         <slot name="header"></slot>
       </div>`;
     const footer = html`
       <div id="footer"
-           part="footer"
-           class="${classMap({ empty: !hasFooter })}">
+           class="${classMap({ empty: !hasFooter })}"
+           part="footer">
         <slot name="footer"></slot>
       </div>`;
     return html`
      <div id="container"
-          part="container"
           class="${classMap({
             standard,
             body: hasBody,
@@ -133,15 +132,16 @@ export class RhCard extends LitElement {
             image: hasImage,
             [variant]: !!variant,
             [computedPalette ?? '']: !!computedPalette,
-          })}">${promo ? '' : header}
+          })}"
+          part="container">${promo ? '' : header}
         <div id="image"
-             part="image"
-             class="${classMap({ empty: !hasImage })}">
+             class="${classMap({ empty: !hasImage })}"
+             part="image">
           <slot name="image"></slot>
         </div>
         <div id="body"
-             part="body"
-             class="${classMap({ empty: !hasBody })}">
+             class="${classMap({ empty: !hasBody })}"
+             part="body">
           ${!promo ? '' : header}
           <slot></slot>
           ${!promo ? '' : footer}
diff --git a/elements/rh-card/test/rh-card.spec.ts b/elements/rh-card/test/rh-card.spec.ts
index c6cc290e2d..ad383febf0 100644
--- a/elements/rh-card/test/rh-card.spec.ts
+++ b/elements/rh-card/test/rh-card.spec.ts
@@ -24,7 +24,7 @@ describe('<rh-card>', function() {
         <rh-card>
           <h3 slot="header">Default</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est</p>
-          <a href="#" slot="footer">Link</a>
+          <a slot="footer" href="#">Link</a>
         </rh-card>
       `);
     });
@@ -56,7 +56,7 @@ describe('<rh-card>', function() {
         <rh-card>
           <h3>Default</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est</p>
-          <a href="#" slot="footer">Link</a>
+          <a slot="footer" href="#">Link</a>
         </rh-card>
       `);
     });
diff --git a/elements/rh-chip/rh-chip.ts b/elements/rh-chip/rh-chip.ts
index 52450db90d..52fa10f280 100644
--- a/elements/rh-chip/rh-chip.ts
+++ b/elements/rh-chip/rh-chip.ts
@@ -72,14 +72,14 @@ export class RhChip extends LitElement {
 
   render() {
     return html`
-      <label part="chip" class=${classMap({ [`size-${this.size}`]: !!this.size })}>
+      <label class=${classMap({ [`size-${this.size}`]: !!this.size })} part="chip">
         <slot></slot>
         <input type="checkbox"
-               value="${ifDefined(this.value)}"
-               @change="${this.#onChecked}"
                .checked="${this.checked}"
-               aria-disabled="${String(this.disabled || this.#formDisabled) as 'true' | 'false'}">
-        <rh-icon id="close-icon" set="ui" icon="close-circle"></rh-icon>
+               @change="${this.#onChecked}"
+               aria-disabled="${String(this.disabled || this.#formDisabled) as 'true' | 'false'}"
+               value="${ifDefined(this.value)}">
+        <rh-icon id="close-icon" icon="close-circle" set="ui"></rh-icon>
       </label>
     `;
   }
diff --git a/elements/rh-code-block/rh-code-block.ts b/elements/rh-code-block/rh-code-block.ts
index 3dd4326029..4bd0dd7d84 100644
--- a/elements/rh-code-block/rh-code-block.ts
+++ b/elements/rh-code-block/rh-code-block.ts
@@ -56,28 +56,28 @@ interface CodeLineHeightsInfo {
 export class RhCodeBlock extends LitElement {
   private static actionIcons = new Map([
     ['wrap', html`
-      <svg xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
-          viewBox="0 0 20 20">
+      <svg fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
         <path d="M19 0c.313.039.781-.077 1 .057V20c-.313-.039-.781.077-1-.057V0ZM10.82 4.992C9.877 4.996 8.31 5.57 8.174 6c1.21.03 2.432-.073 3.635.08 2.181.383 3.677 2.796 3.066 4.922-.41 1.753-2.108 2.995-3.877 3.014L11 14H5.207l2.682-2.682-.707-.707L3.293 14.5l3.889 3.889.707-.707L5.207 15h5.736l.004-.008c1.444.005 2.896-.59 3.832-1.722 1.65-1.82 1.612-4.85-.08-6.63A5 5 0 0 0 11 5a1.948 1.948 0 0 0-.18-.008z"/>
         <path d="M4 5h7c-.039.313.077.781-.057 1H4V5ZM0 0c.313.039.781-.077 1 .057V20c-.313-.039-.781.077-1-.057V0Z"/>
       </svg>
     `],
     ['wrap-active', html`
-      <svg xmlns="http://www.w3.org/2000/svg"
-           fill="none"
-           viewBox="0 0 21 20">
-        <path fill="currentColor" d="M12 13h1v7h-1zM12 0h1v7h-1z"/>
-        <path stroke="currentColor" d="M16.465 6.464 20 10l-3.535 3.536"/>
-        <path fill="currentColor" d="M3 9.5h17v1H3zM0 0h1v20H0z"/>
+      <svg fill="none"
+           viewBox="0 0 21 20"
+           xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 13h1v7h-1zM12 0h1v7h-1z" fill="currentColor"/>
+        <path d="M16.465 6.464 20 10l-3.535 3.536" stroke="currentColor"/>
+        <path d="M3 9.5h17v1H3zM0 0h1v20H0z" fill="currentColor"/>
       </svg>
     `],
     ['copy', html`
-      <svg xmlns="http://www.w3.org/2000/svg"
-           version="1.1"
-           viewBox="0 0 20 20">
-        <path fill="currentColor" d="M12 0H2C.9 0 0 .9 0 2v10h1V2c0-.6.4-1 1-1h10V0z"/>
-        <path fill="currentColor" d="M18 20H8c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2zM8 7c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V8c0-.6-.4-1-1-1H8z"/>
+      <svg version="1.1"
+           viewBox="0 0 20 20"
+           xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 0H2C.9 0 0 .9 0 2v10h1V2c0-.6.4-1 1-1h10V0z" fill="currentColor"/>
+        <path d="M18 20H8c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2zM8 7c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V8c0-.6-.4-1-1-1H8z" fill="currentColor"/>
       </svg>
     `],
   ]);
@@ -196,20 +196,20 @@ export class RhCodeBlock extends LitElement {
 
         <button id="expand"
                 ?hidden="${!expandable}"
+                @click="${this.#onClickExpand}"
                 aria-controls="content-lines"
-                aria-expanded="${String(!!fullHeight) as 'true' | 'false'}"
-                @click="${this.#onClickExpand}">
-          <slot name="show-more" ?hidden="${this.fullHeight}">Show more</slot>
-          <slot name="show-less" ?hidden="${!this.fullHeight}">Show less</slot>
-          <svg xmlns="http://www.w3.org/2000/svg"
-               fill="currentColor"
-               viewBox="0 0 11 7">
+                aria-expanded="${String(!!fullHeight) as 'true' | 'false'}">
+          <slot ?hidden="${this.fullHeight}" name="show-more">Show more</slot>
+          <slot ?hidden="${!this.fullHeight}" name="show-less">Show less</slot>
+          <svg fill="currentColor"
+               viewBox="0 0 11 7"
+               xmlns="http://www.w3.org/2000/svg">
             <path d="M4.919.239.242 4.847a.801.801 0 0 0 0 1.148l.778.766a.83.83 0 0 0 1.165 0L5.5 3.495 8.815 6.76a.83.83 0 0 0 1.165 0l.778-.766a.802.802 0 0 0 0-1.148L6.08.239a.826.826 0 0 0-1.162 0Z"/>
           </svg>
         </button>
       </div>
 
-      <slot name="legend" ?hidden="${this.#slots.isEmpty('legend')}"></slot>
+      <slot ?hidden="${this.#slots.isEmpty('legend')}" name="legend"></slot>
     `;
   }
 
diff --git a/elements/rh-cta/demo/analytics.html b/elements/rh-cta/demo/analytics.html
index dbc8024c0a..84bd8d2374 100644
--- a/elements/rh-cta/demo/analytics.html
+++ b/elements/rh-cta/demo/analytics.html
@@ -146,7 +146,7 @@ <h2>Last CTA Analytics Event</h2>
         <rh-cta><slot name="default"></slot></rh-cta>
         <rh-cta variant="primary"><slot name="primary"></slot></rh-cta>
         <rh-cta variant="secondary"><slot name="secondary"></slot></rh-cta>
-        <rh-cta variant="brick" style="width:auto;"><slot name="brick"></slot></rh-cta>
+        <rh-cta style="width:auto;" variant="brick"><slot name="brick"></slot></rh-cta>
       `;
     }
   });
diff --git a/elements/rh-cta/rh-cta.ts b/elements/rh-cta/rh-cta.ts
index 32fa1c3f29..438e831462 100644
--- a/elements/rh-cta/rh-cta.ts
+++ b/elements/rh-cta/rh-cta.ts
@@ -135,15 +135,15 @@ export class RhCta extends LitElement {
       !(variant === 'brick' && icon) ? '' : html`<rh-icon .icon=${icon} set="${iconSet ?? 'ui'}"></rh-icon>`;
     const linkContent =
         !href ? html`<slot></slot>${follower}`
-      : html`<a href=${href}
-                download="${ifDefined(download)}"
-                rel="${ifDefined(rel)}"
+      : html`<a download="${ifDefined(download)}"
+                href=${href}
                 referrerpolicy="${ifDefined(referrerpolicy)}"
+                rel="${ifDefined(rel)}"
                 target="${ifDefined(target)}"><slot></slot>${follower}</a>`;
     return html`
       <span id="container"
-            part="container"
             class=${classMap({ icon: !!icon, svg })}
+            part="container"
             @slotchange=${this.firstUpdated}>${iconContent}${linkContent}</span>`;
   }
 
diff --git a/elements/rh-dialog/rh-dialog.ts b/elements/rh-dialog/rh-dialog.ts
index 1c5c1b2d45..4225ce31af 100644
--- a/elements/rh-dialog/rh-dialog.ts
+++ b/elements/rh-dialog/rh-dialog.ts
@@ -139,14 +139,14 @@ export class RhDialog extends LitElement {
                     ?hidden="${!this.open}">
           <dialog id="dialog"
                   part="dialog"
-                  aria-labelledby=${ifDefined(this.accessibleLabel ? undefined : headerId)}
+                  @cancel=${this.#onNativeDialogCancel}
                   aria-label=${ifDefined(this.accessibleLabel ? this.accessibleLabel : (!headerId ? triggerLabel : undefined))}
-                  @cancel=${this.#onNativeDialogCancel}>
-            <rh-button variant="close"
-                       id="close-button"
+                  aria-labelledby=${ifDefined(this.accessibleLabel ? undefined : headerId)}>
+            <rh-button id="close-button"
                        part="close-button"
                        type="button"
-                       @click=${this.close}>
+                       @click=${this.close}
+                       variant="close">
               <span class="visually-hidden">Close Dialog</span>
             </rh-button>
             <div id="content" part="content">
diff --git a/elements/rh-dialog/test/rh-dialog.spec.ts b/elements/rh-dialog/test/rh-dialog.spec.ts
index 79b679e51c..8cbf1d36a5 100644
--- a/elements/rh-dialog/test/rh-dialog.spec.ts
+++ b/elements/rh-dialog/test/rh-dialog.spec.ts
@@ -34,10 +34,10 @@ describe('<rh-dialog>', function() {
     beforeEach(async function() {
       const storeEvent = (event: DialogEvent) => events.set(event.type, event);
       element = await createFixture(html`
-        <rh-dialog trigger="trigger"
-                   @cancel="${storeEvent}"
+        <rh-dialog @cancel="${storeEvent}"
+                   @close="${storeEvent}"
                    @open="${storeEvent}"
-                   @close="${storeEvent}">
+                   trigger="trigger">
           <h2 slot="header">Header</h2>
           <p>Body</p>
           <rh-button slot="footer">Footer Action</rh-button>
@@ -144,7 +144,7 @@ describe('<rh-dialog>', function() {
               </p>
               <div>
                 <button id="cancellationButton" value="cancel">Cancel</button>
-                <button type="submit" id="confirmation-button" value="default">Submit</button>
+                <button id="confirmation-button" type="submit" value="default">Submit</button>
               </div>
             </form>
           </rh-dialog>
diff --git a/elements/rh-disclosure/rh-disclosure.ts b/elements/rh-disclosure/rh-disclosure.ts
index 8d346d9bce..99e981cea6 100644
--- a/elements/rh-disclosure/rh-disclosure.ts
+++ b/elements/rh-disclosure/rh-disclosure.ts
@@ -82,7 +82,7 @@ export class RhDisclosure extends LitElement {
           @keydown="${this.#onKeydown}"
           @toggle="${this.#onToggle}">
         <summary>
-          <rh-icon id="caret" set="ui" icon="caret-down"></rh-icon>
+          <rh-icon id="caret" icon="caret-down" set="ui"></rh-icon>
           <slot name="summary">${this.summary}</slot>
         </summary>
         <div id="details-content">
diff --git a/elements/rh-footer/rh-footer-links.ts b/elements/rh-footer/rh-footer-links.ts
index 7595055401..d63b2dc181 100644
--- a/elements/rh-footer/rh-footer-links.ts
+++ b/elements/rh-footer/rh-footer-links.ts
@@ -50,10 +50,10 @@ export class RhFooterLinks extends LitElement {
 
   render() {
     return html`
-      <div part="header" class="header">
+      <div class="header" part="header">
         <slot name="header"></slot>
       </div>
-      <div part="default" class="default">
+      <div class="default" part="default">
         <slot name="panel"></slot>
         <slot></slot>
       </div>
diff --git a/elements/rh-footer/rh-footer-social-link.ts b/elements/rh-footer/rh-footer-social-link.ts
index 18258d1fd8..299cb022b3 100644
--- a/elements/rh-footer/rh-footer-social-link.ts
+++ b/elements/rh-footer/rh-footer-social-link.ts
@@ -34,9 +34,9 @@ export class RhFooterSocialLink extends LitElement {
 
   render() {
     return html`
-      <a href="${this.href}" aria-label="${this.accessibleLabel}">
+      <a aria-label="${this.accessibleLabel}" href="${this.href}">
         <slot>
-          <rh-icon set="social" icon="${this.icon}"></rh-icon>
+          <rh-icon icon="${this.icon}" set="social"></rh-icon>
         </slot>
       </a>
     `;
diff --git a/elements/rh-footer/rh-footer-universal.ts b/elements/rh-footer/rh-footer-universal.ts
index 03749c9c6e..8e09c9e132 100644
--- a/elements/rh-footer/rh-footer-universal.ts
+++ b/elements/rh-footer/rh-footer-universal.ts
@@ -85,13 +85,13 @@ export class RhFooterUniversal extends LitElement {
               <slot name="logo">
                 <a class="global-logo-anchor"
                     part="logo-anchor"
-                    href="https://redhat.com"
-                    aria-label="Visit Red Hat">
+                    aria-label="Visit Red Hat"
+                    href="https://redhat.com">
                   <svg class="global-logo-image"
                       part="logo-image"
                       data-name="Layer 1"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 192 145">
+                      viewBox="0 0 192 145"
+                      xmlns="http://www.w3.org/2000/svg">
                       <title>Red Hat logo</title>
                     <defs>
                       <style>
diff --git a/elements/rh-footer/rh-footer.ts b/elements/rh-footer/rh-footer.ts
index 1ed295f08c..ccfb3f1532 100644
--- a/elements/rh-footer/rh-footer.ts
+++ b/elements/rh-footer/rh-footer.ts
@@ -161,7 +161,7 @@ export class RhFooter extends LitElement {
       <slot name="links"></slot>
       ` : html`
 
-      <rh-accordion on="dark" color-palette="darkest">${children.map((child, i) => {
+      <rh-accordion color-palette="darkest" on="dark">${children.map((child, i) => {
           const type = isHeaderTagName(child.tagName) ? 'header' : 'panel';
           // SEE https://github.com/asyncLiz/minify-html-literals/issues/37
           switch (type) {
diff --git a/elements/rh-footer/test/rh-footer.spec.ts b/elements/rh-footer/test/rh-footer.spec.ts
index dbf0d8577f..c89bcc9443 100644
--- a/elements/rh-footer/test/rh-footer.spec.ts
+++ b/elements/rh-footer/test/rh-footer.spec.ts
@@ -9,8 +9,8 @@ import '@patternfly/pfe-tools/test/stub-logger.js';
 const KITCHEN_SINK_TEMPLATE = html`
   <rh-footer>
     <a slot="logo" href="/">
-      <img src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg" alt="Red Hat logo"
-        loading="lazy"/>
+      <img alt="Red Hat logo" loading="lazy"
+        src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg"/>
     </a>
     <rh-footer-social-link slot="social-links" icon="linkedin">
       <a href="http://www.linkedin.com/company/red-hat">LinkedIn</a>
@@ -116,7 +116,7 @@ const KITCHEN_SINK_TEMPLATE = html`
       </div>
     </rh-footer-universal>
   </rh-footer>
-  <link rel="stylesheet" href="/elements/rh-footer/rh-footer-lightdom.css">
+  <link href="/elements/rh-footer/rh-footer-lightdom.css" rel="stylesheet">
 `;
 
 const UNIVERSAL_FOOTER_TEMPLATE = html`
@@ -145,7 +145,7 @@ const UNIVERSAL_FOOTER_TEMPLATE = html`
       <a href="#">*We’ve updated our privacy statement effective December 30, 202X.</a>
     </div>
   </rh-footer-universal>
-  <link rel="stylesheet" href="/elements/rh-footer/rh-footer-lightdom.css">
+  <link href="/elements/rh-footer/rh-footer-lightdom.css" rel="stylesheet">
 `;
 
 describe('<rh-footer>', function() {
diff --git a/elements/rh-health-index/rh-health-index.ts b/elements/rh-health-index/rh-health-index.ts
index 1800b7f5d3..2bd03281e0 100644
--- a/elements/rh-health-index/rh-health-index.ts
+++ b/elements/rh-health-index/rh-health-index.ts
@@ -58,8 +58,8 @@ export class RhHealthIndex extends LitElement {
     const grade = this.grade.toLowerCase();
     return html`
       <div id="container"
-           aria-hidden="true"
-           class="${classMap({ [size]: true })}">
+           class="${classMap({ [size]: true })}"
+           aria-hidden="true">
         <div id="grade" ?hidden="${size !== 'md'}">${grade}</div>${size === 'sm' ? html`
         <div class="box ${classMap({ [grade]: true, [size]: true })}">${grade}</div>` : grades.map(letter => html`
         <div class="box ${classMap({ [letter]: true, [size]: true, active: letter === grade })}">
diff --git a/elements/rh-icon/rh-icon.ts b/elements/rh-icon/rh-icon.ts
index 6ee62d1c6d..d95732cd21 100644
--- a/elements/rh-icon/rh-icon.ts
+++ b/elements/rh-icon/rh-icon.ts
@@ -113,8 +113,8 @@ export class RhIcon extends LitElement {
     const content = this.#getContent();
     return html`
       <div id="container"
-           aria-hidden="${String(!!content)}"
-           class="${classMap({ [set]: set })}">${!isServer ? content
+           class="${classMap({ [set]: set })}"
+           aria-hidden="${String(!!content)}">${!isServer ? content
         : unsafeHTML(content as unknown as string)}<span part="fallback" ?hidden="${content}"><slot></slot></span>
       </div>
     `;
diff --git a/elements/rh-jump-links/rh-jump-link.ts b/elements/rh-jump-links/rh-jump-link.ts
index c5580a3d4e..a4b7efcc69 100644
--- a/elements/rh-jump-links/rh-jump-link.ts
+++ b/elements/rh-jump-links/rh-jump-link.ts
@@ -48,9 +48,9 @@ export class RhJumpLink extends LitElement {
     const { active, orientation = 'vertical' } = this;
     return html`
       <a class="${classMap({ active, [orientation]: true })}"
+         @click="${this.#onClick}"
          aria-current="${ifDefined(this.active ? 'location' : undefined)}"
-         href="${ifDefined(this.href)}"
-         @click="${this.#onClick}">
+         href="${ifDefined(this.href)}">
         <slot></slot>
       </a>
     `;
diff --git a/elements/rh-jump-links/rh-jump-links.ts b/elements/rh-jump-links/rh-jump-links.ts
index bea9214706..5fddefcfd1 100644
--- a/elements/rh-jump-links/rh-jump-links.ts
+++ b/elements/rh-jump-links/rh-jump-links.ts
@@ -76,13 +76,13 @@ export class RhJumpLinks extends LitElement {
     return html`
         <button id="scroll-start"
                 class="overflow-button"
+                ?disabled="${!overflowLeft}"
                 ?hidden="${!overflow}"
-                tabindex="-1"
-                data-direction="start"
+                @click="${this.#onClickScroll}"
                 aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll back'}"
-                ?disabled="${!overflowLeft}"
-                @click="${this.#onClickScroll}">
-          <rh-icon set="ui" icon="caret-left" loading="eager"></rh-icon>
+                data-direction="start"
+                tabindex="-1">
+          <rh-icon icon="caret-left" loading="eager" set="ui"></rh-icon>
         </button>
 
         <div id="container" role="list">
@@ -91,13 +91,13 @@ export class RhJumpLinks extends LitElement {
 
         <button id="scroll-end"
                 class="overflow-button"
+                ?disabled="${!overflowRight}"
                 ?hidden="${!overflow}"
-                tabindex="-1"
-                data-direction="end"
+                @click="${this.#onClickScroll}"
                 aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll forward'}"
-                ?disabled="${!overflowRight}"
-                @click="${this.#onClickScroll}">
-           <rh-icon set="ui" icon="caret-right" loading="eager"></rh-icon>
+                data-direction="end"
+                tabindex="-1">
+           <rh-icon icon="caret-right" loading="eager" set="ui"></rh-icon>
         </button>
     `;
   }
diff --git a/elements/rh-navigation-primary/rh-navigation-primary.ts b/elements/rh-navigation-primary/rh-navigation-primary.ts
index 6d3f816f6e..bf75161f19 100644
--- a/elements/rh-navigation-primary/rh-navigation-primary.ts
+++ b/elements/rh-navigation-primary/rh-navigation-primary.ts
@@ -168,11 +168,11 @@ export class RhNavigationPrimary extends LitElement {
           <div id="logo">
             <slot name="logo">
               <a href="/">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613 145" height="30" width="125">
+                <svg height="30" viewBox="0 0 613 145" width="125" xmlns="http://www.w3.org/2000/svg">
                   <title>Red Hat</title>
-                  <path fill="var(--rh-color-brand-red, #ee0000)" d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"/>
+                  <path d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78" fill="var(--rh-color-brand-red, #ee0000)"/>
                   <path d="M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33l3.66-9.06A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45,12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42Z"/>
-                  <path fill="var(--rh-color-text-primary, #151515)" d="M579.74,92.8c0,11.89,7.15,17.67,20.19,17.67a52.11,52.11,0,0,0,11.89-1.68V95a24.84,24.84,0,0,1-7.68,1.16c-5.37,0-7.36-1.68-7.36-6.73V68.3h15.56V54.1H596.78v-18l-17,3.68V54.1H568.49V68.3h11.25Zm-53,.32c0-3.68,3.69-5.47,9.26-5.47a43.12,43.12,0,0,1,10.1,1.26v7.15a21.51,21.51,0,0,1-10.63,2.63c-5.46,0-8.73-2.1-8.73-5.57m5.2,17.56c6,0,10.84-1.26,15.36-4.31v3.37h16.82V74.08c0-13.56-9.14-21-24.39-21-8.52,0-16.94,2-26,6.1l6.1,12.52c6.52-2.74,12-4.42,16.83-4.42,7,0,10.62,2.73,10.62,8.31v2.73a49.53,49.53,0,0,0-12.62-1.58c-14.31,0-22.93,6-22.93,16.73,0,9.78,7.78,17.24,20.19,17.24m-92.44-.94h18.09V80.92h30.29v28.82H506V36.12H487.93V64.41H457.64V36.12H439.55ZM370.62,81.87c0-8,6.31-14.1,14.62-14.1A17.22,17.22,0,0,1,397,72.09V91.54A16.36,16.36,0,0,1,385.24,96c-8.2,0-14.62-6.1-14.62-14.09m26.61,27.87h16.83V32.44l-17,3.68V57.05a28.3,28.3,0,0,0-14.2-3.68c-16.19,0-28.92,12.51-28.92,28.5a28.25,28.25,0,0,0,28.4,28.6,25.12,25.12,0,0,0,14.93-4.83ZM320,67c5.36,0,9.88,3.47,11.67,8.83H308.47C310.15,70.3,314.36,67,320,67M291.33,82c0,16.2,13.25,28.82,30.28,28.82,9.36,0,16.2-2.53,23.25-8.42l-11.26-10c-2.63,2.74-6.52,4.21-11.14,4.21a14.39,14.39,0,0,1-13.68-8.83h39.65V83.55c0-17.67-11.88-30.39-28.08-30.39a28.57,28.57,0,0,0-29,28.81M262,51.58c6,0,9.36,3.78,9.36,8.31S268,68.2,262,68.2H244.11V51.58Zm-36,58.16h18.09V82.92h13.77l13.89,26.82H292l-16.2-29.45a22.27,22.27,0,0,0,13.88-20.72c0-13.25-10.41-23.45-26-23.45H226Z"/>
+                  <path d="M579.74,92.8c0,11.89,7.15,17.67,20.19,17.67a52.11,52.11,0,0,0,11.89-1.68V95a24.84,24.84,0,0,1-7.68,1.16c-5.37,0-7.36-1.68-7.36-6.73V68.3h15.56V54.1H596.78v-18l-17,3.68V54.1H568.49V68.3h11.25Zm-53,.32c0-3.68,3.69-5.47,9.26-5.47a43.12,43.12,0,0,1,10.1,1.26v7.15a21.51,21.51,0,0,1-10.63,2.63c-5.46,0-8.73-2.1-8.73-5.57m5.2,17.56c6,0,10.84-1.26,15.36-4.31v3.37h16.82V74.08c0-13.56-9.14-21-24.39-21-8.52,0-16.94,2-26,6.1l6.1,12.52c6.52-2.74,12-4.42,16.83-4.42,7,0,10.62,2.73,10.62,8.31v2.73a49.53,49.53,0,0,0-12.62-1.58c-14.31,0-22.93,6-22.93,16.73,0,9.78,7.78,17.24,20.19,17.24m-92.44-.94h18.09V80.92h30.29v28.82H506V36.12H487.93V64.41H457.64V36.12H439.55ZM370.62,81.87c0-8,6.31-14.1,14.62-14.1A17.22,17.22,0,0,1,397,72.09V91.54A16.36,16.36,0,0,1,385.24,96c-8.2,0-14.62-6.1-14.62-14.09m26.61,27.87h16.83V32.44l-17,3.68V57.05a28.3,28.3,0,0,0-14.2-3.68c-16.19,0-28.92,12.51-28.92,28.5a28.25,28.25,0,0,0,28.4,28.6,25.12,25.12,0,0,0,14.93-4.83ZM320,67c5.36,0,9.88,3.47,11.67,8.83H308.47C310.15,70.3,314.36,67,320,67M291.33,82c0,16.2,13.25,28.82,30.28,28.82,9.36,0,16.2-2.53,23.25-8.42l-11.26-10c-2.63,2.74-6.52,4.21-11.14,4.21a14.39,14.39,0,0,1-13.68-8.83h39.65V83.55c0-17.67-11.88-30.39-28.08-30.39a28.57,28.57,0,0,0-29,28.81M262,51.58c6,0,9.36,3.78,9.36,8.31S268,68.2,262,68.2H244.11V51.58Zm-36,58.16h18.09V82.92h13.77l13.89,26.82H292l-16.2-29.45a22.27,22.27,0,0,0,13.88-20.72c0-13.25-10.41-23.45-26-23.45H226Z" fill="var(--rh-color-text-primary, #151515)"/>
                 </svg>
               </a>
             </slot>
diff --git a/elements/rh-navigation-primary/test/fixtures.ts b/elements/rh-navigation-primary/test/fixtures.ts
index 60cf3a9d8b..f0b39c8d0e 100644
--- a/elements/rh-navigation-primary/test/fixtures.ts
+++ b/elements/rh-navigation-primary/test/fixtures.ts
@@ -2,15 +2,15 @@ import { html } from '@open-wc/testing';
 
 export const NAV = html`
   <rh-navigation-primary>
-    <rh-navigation-primary-item variant="dropdown" summary="Item 1">
+    <rh-navigation-primary-item summary="Item 1" variant="dropdown">
       Item 1 Content
     </rh-navigation-primary-item>
 
-    <rh-navigation-primary-item variant="dropdown" summary="Item 2">
+    <rh-navigation-primary-item summary="Item 2" variant="dropdown">
       Item 2 Content
     </rh-navigation-primary-item>
 
-    <rh-navigation-primary-item variant="dropdown" summary="Item 3">
+    <rh-navigation-primary-item summary="Item 3" variant="dropdown">
       Item 3 Content
     </rh-navigation-primary-item>
 
@@ -26,7 +26,7 @@ export const NAV = html`
 
     <rh-navigation-primary-item slot="event">
       <a href="#summit">
-        <svg width="64" height="35" viewBox="0 0 64 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg fill="none" height="35" viewBox="0 0 64 35" width="64" xmlns="http://www.w3.org/2000/svg">
           <title>Red Hat Summit logo</title>
           <path d="M61.9356 1.34412H2.06356C1.08623 1.34412 0.293945 2.1364 0.293945 3.11373V27.8382C0.293945 28.8156 1.08623 29.6079 2.06356 29.6079H26.4849C26.9543 29.6079 27.4044 29.7943 27.7363 30.1262L30.7477 33.1377C31.4388 33.8287 32.5591 33.8288 33.2502 33.1379L36.263 30.126C36.5948 29.7942 37.0449 29.6079 37.5141 29.6079H61.9356C62.913 29.6079 63.7053 28.8156 63.7053 27.8382V3.11373C63.7053 2.1364 62.913 1.34412 61.9356 1.34412Z" fill="#EE0000"/>
           <path d="M18.3535 12.4776V7.41943H20.9404C21.2873 7.41943 21.5955 7.48805 21.8654 7.62537C22.1351 7.76262 22.3459 7.953 22.4977 8.19616C22.6495 8.43947 22.7252 8.7177 22.7252 9.03079C22.7252 9.34876 22.6385 9.63305 22.4651 9.88348C22.2917 10.134 22.0628 10.3242 21.7787 10.4543L22.8842 12.4776H21.4969L20.5431 10.6349H19.5963V12.4776H18.3535ZM19.5963 9.62332H20.8248C21.0175 9.62332 21.1729 9.57039 21.2909 9.46433C21.4089 9.3584 21.4679 9.22117 21.4679 9.05245C21.4679 8.88388 21.4089 8.74657 21.2909 8.64057C21.1728 8.53465 21.0175 8.48159 20.8248 8.48159H19.5963V9.62332Z" fill="white"/>
@@ -49,15 +49,15 @@ export const NAV = html`
     <rh-navigation-primary-item slot="links">Link 2</rh-navigation-primary-item>
     <rh-navigation-primary-item slot="links">Link 3</rh-navigation-primary-item>
 
-    <rh-navigation-primary-item slot="dropdowns" variant="dropdown" hide="sm" summary="Item 6">
+    <rh-navigation-primary-item slot="dropdowns" hide="sm" summary="Item 6" variant="dropdown">
       Item 6 Content
     </rh-navigation-primary-item>
 
-    <rh-navigation-primary-item slot="dropdowns" variant="dropdown" hide="sm" summary="Item 7">
+    <rh-navigation-primary-item slot="dropdowns" hide="sm" summary="Item 7" variant="dropdown">
       Item 7 Content
     </rh-navigation-primary-item>
 
-    <rh-navigation-primary-item slot="dropdowns" variant="dropdown" summary="Item 8">
+    <rh-navigation-primary-item slot="dropdowns" summary="Item 8" variant="dropdown">
       Item 8 Content
     </rh-navigation-primary-item>
   </rh-navigation-primary>
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.ts b/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.ts
index 485511f5fc..5bacbf68ff 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.ts
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.ts
@@ -66,7 +66,7 @@ export class RhNavigationSecondaryDropdown extends LitElement {
     const classes = { 'expanded': this.expanded, 'highlight': this.#highlight };
 
     return html`
-      <div id="container" part="container" class="${classMap(classes)}">
+      <div id="container" class="${classMap(classes)}" part="container">
         <slot name="link"></slot>
         <slot name="menu"></slot>
       </div>
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.ts b/elements/rh-navigation-secondary/rh-navigation-secondary.ts
index 33b2b90e4a..e9b021c1bb 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary.ts
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary.ts
@@ -179,14 +179,14 @@ export class RhNavigationSecondary extends LitElement {
     // CTA must always be 'lightest' on mobile screens
     const dropdownPalette = this.#compact ? 'lightest' : this.#computedPalette;
     return html`
-      <div part="nav"
-           class="${classMap({ compact: this.#compact })}">
+      <div class="${classMap({ compact: this.#compact })}"
+           part="nav">
         ${this.#logoCopy}
-        <div id="container" part="container" class="${classMap({ expanded })}">
-          <slot name="logo" id="logo"></slot>
-          <button aria-controls="container"
-                  aria-expanded="${String(expanded) as 'true' | 'false'}"
-                  @click="${this.#toggleMobileMenu}"><slot name="mobile-menu">Menu</slot></button>
+        <div id="container" class="${classMap({ expanded })}" part="container">
+          <slot id="logo" name="logo"></slot>
+          <button @click="${this.#toggleMobileMenu}"
+                  aria-controls="container"
+                  aria-expanded="${String(expanded) as 'true' | 'false'}"><slot name="mobile-menu">Menu</slot></button>
           <rh-surface color-palette="${dropdownPalette}">
             <slot name="nav"></slot>
             <div id="cta" part="cta">
diff --git a/elements/rh-navigation-secondary/test/fixtures.ts b/elements/rh-navigation-secondary/test/fixtures.ts
index 4206b26aff..cd78ddb7dd 100644
--- a/elements/rh-navigation-secondary/test/fixtures.ts
+++ b/elements/rh-navigation-secondary/test/fixtures.ts
@@ -2,14 +2,14 @@ import { html } from '@open-wc/testing';
 
 export const NAV = html`
 <rh-navigation-secondary role="navigation">
-  <a href="#" slot="logo">Red Hat Ansible Automation Platform</a>
+  <a slot="logo" href="#">Red Hat Ansible Automation Platform</a>
   <ul slot="nav">
     <li>
       <rh-navigation-secondary-dropdown>
-        <a href="#" slot="link">Explore</a>
+        <a slot="link" href="#">Explore</a>
         <rh-navigation-secondary-menu slot="menu">
           <rh-navigation-secondary-menu-section slot="section">
-            <h3 slot="header" id="ansible-platform"><a href="#">Why Red Hat Ansible Automation Platforms</a></h3>
+            <h3 id="ansible-platform" slot="header"><a href="#">Why Red Hat Ansible Automation Platforms</a></h3>
             <ul slot="links">
               <li><a href="#">Integrations</a></li>
               <li><a href="#">Custom success stories </a></li>
@@ -53,7 +53,7 @@ export const NAV = html`
     </li>
     <li>
       <rh-navigation-secondary-dropdown>
-        <a href="#" slot="link">Use cases</a>
+        <a slot="link" href="#">Use cases</a>
         <rh-navigation-secondary-menu slot="menu">
           <ul slot="section">
             <li><a href="#">Infrastructure</a></li>
@@ -70,7 +70,7 @@ export const NAV = html`
     </li>
     <li>
       <rh-navigation-secondary-dropdown>
-        <a href="#" slot="link">Fixed Width</a>
+        <a slot="link" href="#">Fixed Width</a>
         <rh-navigation-secondary-menu slot="menu" type="fixed-width">
           <ul slot="links">
             <li><a href="#">Containers</a></li>
@@ -87,15 +87,15 @@ export const NAV = html`
 `;
 
 export const DARKVARIANT = html`
-<rh-navigation-secondary role="navigation" color-palette="dark">
-  <a href="#" slot="logo">Red Hat Ansible Automation Platform</a>
+<rh-navigation-secondary color-palette="dark" role="navigation">
+  <a slot="logo" href="#">Red Hat Ansible Automation Platform</a>
   <ul slot="nav">
     <li>
       <rh-navigation-secondary-dropdown>
-        <a href="#" slot="link">Explore</a>
+        <a slot="link" href="#">Explore</a>
         <rh-navigation-secondary-menu slot="menu">
           <rh-navigation-secondary-menu-section slot="section">
-            <h3 slot="header" id="ansible-platform"><a href="#">Why Red Hat Ansible Automation Platforms</a></h3>
+            <h3 id="ansible-platform" slot="header"><a href="#">Why Red Hat Ansible Automation Platforms</a></h3>
             <ul slot="links">
               <li><a href="#">Integrations</a></li>
               <li><a href="#">Custom success stories </a></li>
@@ -139,7 +139,7 @@ export const DARKVARIANT = html`
     </li>
     <li>
       <rh-navigation-secondary-dropdown>
-        <a href="#" slot="link">Use cases</a>
+        <a slot="link" href="#">Use cases</a>
         <rh-navigation-secondary-menu slot="menu">
           <ul slot="section">
             <li><a href="#">Infrastructure</a></li>
@@ -156,7 +156,7 @@ export const DARKVARIANT = html`
     </li>
     <li>
       <rh-navigation-secondary-dropdown>
-        <a href="#" slot="link">Fixed Width</a>
+        <a slot="link" href="#">Fixed Width</a>
         <rh-navigation-secondary-menu slot="menu" type="fixed-width">
           <ul slot="links">
             <li><a href="#">Containers</a></li>
diff --git a/elements/rh-pagination/rh-pagination.ts b/elements/rh-pagination/rh-pagination.ts
index c68f288134..6b6bcf1bc9 100644
--- a/elements/rh-pagination/rh-pagination.ts
+++ b/elements/rh-pagination/rh-pagination.ts
@@ -14,12 +14,12 @@ import { themable } from '@rhds/elements/lib/themable.js';
 import styles from './rh-pagination.css';
 
 const L1 = html`
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 14">
+  <svg viewBox="0 0 9 14" xmlns="http://www.w3.org/2000/svg">
     <path d="M.3 6.26 6.24.3C6.63-.1 7.3-.1 7.7.3l.99.99c.4.4.4 1.07 0 1.48L4.49 7l4.2 4.22c.41.4.41 1.07 0 1.48l-.98 1c-.41.4-1.07.4-1.48 0L.31 7.73a1.05 1.05 0 0 1 0-1.48Z"/>
   </svg>`;
 
 const L2 = html`
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.44 14">
+  <svg viewBox="0 0 17.44 14" xmlns="http://www.w3.org/2000/svg">
     <path d="M8.7 6.26 14.66.3a1.05 1.05 0 0 1 1.49 0l.98.99c.42.4.42 1.07 0 1.48L12.92 7l4.2 4.22c.42.4.42 1.07 0 1.48l-.98 1c-.41.4-1.08.4-1.48 0L8.7 7.73a1.05 1.05 0 0 1 0-1.48zM.3 7.74l5.96 5.95c.4.41 1.07.41 1.48 0l.99-.99c.4-.4.4-1.07 0-1.48L4.52 7l4.21-4.22c.41-.4.41-1.07 0-1.48l-.99-1a1.05 1.05 0 0 0-1.48 0L.31 6.27a1.05 1.05 0 0 0 0 1.48z"/>
   </svg>`;
 
@@ -170,14 +170,14 @@ export class RhPagination extends LitElement {
       <div id="container" part="container">
         <a id="first"
            class="stepper"
-           href="${ifDefined(firstHref)}"
            .inert="${this.#currentLink === this.#firstLink}"
-           aria-label="${labelFirst}">${L2}</a>
+           aria-label="${labelFirst}"
+           href="${ifDefined(firstHref)}">${L2}</a>
         <a id="prev"
            class="stepper"
-           href="${ifDefined(prevHref)}"
            .inert="${this.#currentLink === this.#prevLink || this.#currentLink === this.#firstLink}"
-           aria-label="${labelPrevious}">${L1}</a>
+           aria-label="${labelPrevious}"
+           href="${ifDefined(prevHref)}">${L1}</a>
         <nav aria-label="${label}">
           <slot></slot>
         </nav>
@@ -186,14 +186,14 @@ export class RhPagination extends LitElement {
         </div>
         <a id="next"
            class="stepper"
-           href="${ifDefined(nextHref)}"
            .inert="${this.#currentLink === this.#nextLink || this.#currentLink === this.#lastLink}"
-           aria-label="${labelNext}">${L1}</a>
+           aria-label="${labelNext}"
+           href="${ifDefined(nextHref)}">${L1}</a>
         <a id="last"
            class="stepper"
-           href="${ifDefined(lastHref)}"
            .inert="${this.#currentLink === this.#lastLink}"
-           aria-label="${labelLast}">${L2}</a>
+           aria-label="${labelLast}"
+           href="${ifDefined(lastHref)}">${L2}</a>
         <div id="numeric-end" part="numeric-end">
           ${this.#numericContent(currentPage, lastHref)}
         </div>
@@ -209,14 +209,14 @@ export class RhPagination extends LitElement {
             Page
           </slot>
         </span>
-        <input inputmode="numeric"
-               required
-               min="1"
-               max="${this.total}"
-               aria-labelledby="go-to-page"
+        <input .value="${currentPage}"
                @change="${this.#onChange}"
                @keyup="${this.#onKeyup}"
-               .value="${currentPage}">
+               aria-labelledby="go-to-page"
+               inputmode="numeric"
+               max="${this.total}"
+               min="1"
+               required>
         <slot ?hidden="${!this.total}" name="out-of">of</slot>
         <a ?hidden="${!this.total}" href="${ifDefined(lastHref)}">${this.total}</a>
       </div>
diff --git a/elements/rh-site-status/rh-site-status.ts b/elements/rh-site-status/rh-site-status.ts
index 3bb0878739..c99d015be0 100644
--- a/elements/rh-site-status/rh-site-status.ts
+++ b/elements/rh-site-status/rh-site-status.ts
@@ -188,12 +188,12 @@ export class RhSiteStatus extends LitElement {
     const { icon, status } = this.#icon;
     return html`
       <div id="container" class="${classMap({ loading })}">
-        <a href="https://status.redhat.com/"
-           aria-busy="${String(this.#loading) as 'true' | 'false'}"
-           aria-live="polite">${this.#loading ? html`
+        <a aria-busy="${String(this.#loading) as 'true' | 'false'}"
+           aria-live="polite"
+           href="https://status.redhat.com/">${this.#loading ? html`
           <rh-spinner size="sm"></rh-spinner>
           <span><slot name="loading-text">Loading</slot></span>` : html`
-          <rh-icon loading="eager" set="ui" icon="${icon}" class="${status}"></rh-icon>
+          <rh-icon class="${status}" icon="${icon}" loading="eager" set="ui"></rh-icon>
           <span>${this.#text}</span>`}
         </a>
       </div>
diff --git a/elements/rh-spinner/rh-spinner.ts b/elements/rh-spinner/rh-spinner.ts
index 1843c95c04..687c815f00 100644
--- a/elements/rh-spinner/rh-spinner.ts
+++ b/elements/rh-spinner/rh-spinner.ts
@@ -27,9 +27,9 @@ export class RhSpinner extends LitElement {
 
   render() {
     return html`
-      <svg role="status" viewBox="0 0 100 100" aria-live="polite">
-        <circle class="track" cx="50" cy="50" r="40" fill="none" vector-effect="non-scaling-stroke"/>
-        <circle class="dash" cx="50" cy="50" r="40" fill="none" vector-effect="non-scaling-stroke"/>
+      <svg aria-live="polite" role="status" viewBox="0 0 100 100">
+        <circle class="track" cx="50" cy="50" fill="none" r="40" vector-effect="non-scaling-stroke"/>
+        <circle class="dash" cx="50" cy="50" fill="none" r="40" vector-effect="non-scaling-stroke"/>
       </svg>
       <slot></slot>
     `;
diff --git a/elements/rh-stat/test/rh-stat.spec.ts b/elements/rh-stat/test/rh-stat.spec.ts
index 198cf13713..11cead33bc 100644
--- a/elements/rh-stat/test/rh-stat.spec.ts
+++ b/elements/rh-stat/test/rh-stat.spec.ts
@@ -59,8 +59,8 @@ describe('<rh-stat>', function() {
   describe('adjusting window size', function() {
     beforeEach(async function() {
       element = await fixture<RhStat>(html`
-        <rh-stat titleplacement="below" size="large" top="statistic">
-            <rh-icon slot="icon" set="standard" icon="atom"></rh-icon>
+        <rh-stat size="large" titleplacement="below" top="statistic">
+            <rh-icon slot="icon" icon="atom" set="standard"></rh-icon>
             <span slot="title">Overwrite Title</span>
             <p>Stat body that includes two lines and a footnote.</p>
             <span slot="statistic">Overwrite Statistic</span>
diff --git a/elements/rh-subnav/rh-subnav.ts b/elements/rh-subnav/rh-subnav.ts
index c2c42494d6..29faa2bc6f 100644
--- a/elements/rh-subnav/rh-subnav.ts
+++ b/elements/rh-subnav/rh-subnav.ts
@@ -103,22 +103,22 @@ export class RhSubnav extends LitElement {
       <nav part="container" aria-label="${this.accessibleLabel}">
         ${!this.#overflow.showScrollButtons ? '' : html`
           <button id="previous"
-                  tabindex="-1"
-                  data-direction="start"
-                  aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll back'}"
                   ?disabled="${!this.#overflow.overflowLeft}"
-                  @click="${this.#onClickScroll}">
-            <rh-icon set="ui" icon="caret-left" loading="eager"></rh-icon>
+                  @click="${this.#onClickScroll}"
+                  aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll back'}"
+                  data-direction="start"
+                  tabindex="-1">
+            <rh-icon icon="caret-left" loading="eager" set="ui"></rh-icon>
           </button>`}
         <slot part="links" @slotchange="${this.#onSlotchange}"></slot>
         ${!this.#overflow.showScrollButtons ? '' : html`
           <button id="next"
-                  tabindex="-1"
-                  data-direction="end"
-                  aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll forward'}"
                   ?disabled="${!this.#overflow.overflowRight}"
-                  @click="${this.#onClickScroll}">
-            <rh-icon set="ui" icon="caret-right" loading="eager"></rh-icon>
+                  @click="${this.#onClickScroll}"
+                  aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll forward'}"
+                  data-direction="end"
+                  tabindex="-1">
+            <rh-icon icon="caret-right" loading="eager" set="ui"></rh-icon>
           </button>`}
       </nav>
     `;
diff --git a/elements/rh-subnav/test/rh-subnav.spec.ts b/elements/rh-subnav/test/rh-subnav.spec.ts
index e52c4be040..011cf23202 100644
--- a/elements/rh-subnav/test/rh-subnav.spec.ts
+++ b/elements/rh-subnav/test/rh-subnav.spec.ts
@@ -7,7 +7,7 @@ const element = html`
     <a href="#">Users</a>
     <a href="#">Containers</a>
     <a href="#">Databases</a>
-    <a href="#" active>Servers</a>
+    <a active href="#">Servers</a>
     <a href="#">System</a>
     <a href="#">Network</a>
     <a href="#">Cloud</a>
diff --git a/elements/rh-switch/rh-switch.ts b/elements/rh-switch/rh-switch.ts
index a68fc7d603..dbbe9981e1 100644
--- a/elements/rh-switch/rh-switch.ts
+++ b/elements/rh-switch/rh-switch.ts
@@ -104,19 +104,19 @@ export class RhSwitch extends LitElement {
   render() {
     const { reversed, checked } = this;
     const slots = html`
-      <slot class="message" name="message-on" ?hidden="${!this.checked}"><span aria-hidden="true">${this.messageOn}</span></slot>
-      <slot class="message" name="message-off" ?hidden="${this.checked}"><span aria-hidden="true">${this.messageOff}</span></slot>`;
+      <slot class="message" ?hidden="${!this.checked}" name="message-on"><span aria-hidden="true">${this.messageOn}</span></slot>
+      <slot class="message" ?hidden="${this.checked}" name="message-off"><span aria-hidden="true">${this.messageOff}</span></slot>`;
     return html`
       <div id="container"
-           part="container"
-           class="${classMap({ checked })}">
+           class="${classMap({ checked })}"
+           part="container">
         ${reversed ? slots : ''}
         <div id="switch"
              part="switch">
           <rh-icon id="toggle"
+                   ?hidden="${!this.showCheckIcon}"
                    icon="checkmark"
-                   set="microns"
-                   ?hidden="${!this.showCheckIcon}"></rh-icon>
+                   set="microns"></rh-icon>
         </div>
         ${reversed ? '' : slots}
       </div>
diff --git a/elements/rh-switch/test/rh-switch.spec.ts b/elements/rh-switch/test/rh-switch.spec.ts
index 46172e6267..77cee1ab67 100644
--- a/elements/rh-switch/test/rh-switch.spec.ts
+++ b/elements/rh-switch/test/rh-switch.spec.ts
@@ -45,7 +45,7 @@ describe('<rh-switch>', function() {
     let snapshot: A11yTreeSnapshot;
     beforeEach(async function() {
       element = await createFixture<RhSwitch>(html`
-        <rh-switch accessible-label="Dark Mode" message-on="Message when on" message-off="Message when off"></rh-switch>
+        <rh-switch accessible-label="Dark Mode" message-off="Message when off" message-on="Message when on"></rh-switch>
       `);
       await element.updateComplete;
     });
@@ -128,7 +128,7 @@ describe('<rh-switch>', function() {
     let snapshot: A11yTreeSnapshot;
     beforeEach(async function() {
       element = await createFixture<RhSwitch>(html`
-        <rh-switch checked accessible-label="Change Message" message-on="Message when on" message-off="Message when off"></rh-switch>
+        <rh-switch accessible-label="Change Message" checked message-off="Message when off" message-on="Message when on"></rh-switch>
       `);
 
       await element.updateComplete;
@@ -147,7 +147,7 @@ describe('<rh-switch>', function() {
     let snapshot: A11yTreeSnapshot;
     beforeEach(async function() {
       element = await createFixture<RhSwitch>(html`
-        <rh-switch accessible-label="Change Message" message-on="Message when on" message-off="Message when off"></rh-switch>
+        <rh-switch accessible-label="Change Message" message-off="Message when off" message-on="Message when on"></rh-switch>
       `);
 
       await element.updateComplete;
@@ -166,7 +166,7 @@ describe('<rh-switch>', function() {
     let element: RhSwitch;
     beforeEach(async function() {
       element = await createFixture<RhSwitch>(html`
-        <rh-switch checked show-check-icon accessible-label="Change Message" message-on="Message when on" message-off="Message when off"></rh-switch>
+        <rh-switch accessible-label="Change Message" checked message-off="Message when off" message-on="Message when on" show-check-icon></rh-switch>
       `);
     });
     it('should display a check icon', async function() {
@@ -186,7 +186,7 @@ describe('<rh-switch>', function() {
       const container = await createFixture<HTMLLabelElement>(html`
         <fieldset>
           <label for="with-label">Dark Mode</label>
-          <rh-switch id="with-label" message-on="Message when on" message-off="Message when off"></rh-switch>
+          <rh-switch id="with-label" message-off="Message when off" message-on="Message when on"></rh-switch>
         </fieldset>
       `);
       label = container.querySelector('label')!;
@@ -226,7 +226,7 @@ describe('<rh-switch>', function() {
       const container = await createFixture<HTMLLabelElement>(html`
         <fieldset>
           <label>Dark Mode
-            <rh-switch aria-describedby="switch-messages" message-on="Message when on" message-off="Message when off"></rh-switch>
+            <rh-switch aria-describedby="switch-messages" message-off="Message when off" message-on="Message when on"></rh-switch>
           </label>
         </fieldset>
       `);
diff --git a/elements/rh-table/rh-sort-button.ts b/elements/rh-table/rh-sort-button.ts
index d3b61efaaf..b369d30274 100644
--- a/elements/rh-table/rh-sort-button.ts
+++ b/elements/rh-table/rh-sort-button.ts
@@ -54,13 +54,13 @@ export class RhSortButton extends LitElement {
       <button id="sort-button" part="sort-button" @click="${this.sort}" aria-label="Sort">
         <span class="visually-hidden">${!this.sortDirection ? '' : `(sort${!this.column ? '' : ` by ${this.column}`} in ${this.sortDirection === 'asc' ? 'ascending' : 'descending'} order)`}</span>
         <span id="sort-indicator" part="sort-indicator">
-          <svg fill="currentColor"
-               height="1em"
-               width="1em"
-               viewBox="0 0 320 512"
+          <svg style="vertical-align: -0.125em;"
                aria-hidden="true"
+               fill="currentColor"
+               height="1em"
                role="img"
-               style="vertical-align: -0.125em;">
+               viewBox="0 0 320 512"
+               width="1em">
             ${svg`<path d="${paths.get(this.sortDirection ?? 'sort')}"></path>`}
           </svg>
         </span>
diff --git a/elements/rh-tabs/rh-tab.ts b/elements/rh-tabs/rh-tab.ts
index 8e6bfe4c55..bcf80ab834 100644
--- a/elements/rh-tabs/rh-tab.ts
+++ b/elements/rh-tabs/rh-tab.ts
@@ -92,11 +92,11 @@ export class RhTab extends LitElement {
     const last = lastTab === this;
     return html`
       <div id="button"
+           class="${classMap({ active, box, vertical, first, last })}"
            part="button"
-           ?disabled="${this.disabled}"
-           class="${classMap({ active, box, vertical, first, last })}">
-        <slot name="icon"
-              part="icon"></slot>
+           ?disabled="${this.disabled}">
+        <slot part="icon"
+              name="icon"></slot>
         <slot part="text"></slot>
       </div>
     `;
diff --git a/elements/rh-tabs/rh-tabs.ts b/elements/rh-tabs/rh-tabs.ts
index 99922489a0..8988fc6dd7 100644
--- a/elements/rh-tabs/rh-tabs.ts
+++ b/elements/rh-tabs/rh-tabs.ts
@@ -169,25 +169,25 @@ export class RhTabs extends LitElement {
     const { vertical = false, box = false, centered = false } = this;
     const inset = this.box === 'inset' ? 'inset' : '';
     return html`
-      <div id="container" part="container" class="${classMap({ vertical, box, inset, centered, overflow: this.#overflow.showScrollButtons })}">
+      <div id="container" class="${classMap({ vertical, box, inset, centered, overflow: this.#overflow.showScrollButtons })}" part="container">
         <div part="tabs-container">${!this.#overflow.showScrollButtons ? '' : html`
-          <button id="previous-tab" tabindex="-1"
+          <button id="previous-tab" ?disabled="${!this.#overflow.overflowLeft}"
+                  @click="${() => !this.matches(':dir(rtl)') ? this.#overflow.scrollLeft() : this.#overflow.scrollRight()}"
                   aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll left'}"
-                  ?disabled="${!this.#overflow.overflowLeft}"
-                  @click="${() => !this.matches(':dir(rtl)') ? this.#overflow.scrollLeft() : this.#overflow.scrollRight()}">
-            <rh-icon set="ui" icon="caret-left" loading="eager"></rh-icon>
+                  tabindex="-1">
+            <rh-icon icon="caret-left" loading="eager" set="ui"></rh-icon>
           </button>`}
           <div id="tablist" role="tablist">
-            <slot name="tab"
-                  part="tabs"
-                  @slotchange="${this.#onSlotchange}"></slot>
+            <slot part="tabs"
+                  @slotchange="${this.#onSlotchange}"
+                  name="tab"></slot>
           </div>${!this.#overflow.showScrollButtons ? '' : html`
           <button id="next-tab"
-                  tabindex="-1"
-                  aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll right'}"
                   ?disabled="${!this.#overflow.overflowRight}"
-                  @click="${() => !this.matches(':dir(rtl)') ? this.#overflow.scrollRight() : this.#overflow.scrollLeft()}">
-             <rh-icon set="ui" icon="caret-right" loading="eager"></rh-icon>
+                  @click="${() => !this.matches(':dir(rtl)') ? this.#overflow.scrollRight() : this.#overflow.scrollLeft()}"
+                  aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll right'}"
+                  tabindex="-1">
+             <rh-icon icon="caret-right" loading="eager" set="ui"></rh-icon>
           </button>`}
         </div>
         <slot part="panels" @slotchange="${this.#onSlotchange}"></slot>
diff --git a/elements/rh-tag/rh-tag.ts b/elements/rh-tag/rh-tag.ts
index 6c6888cd20..667ade0b95 100644
--- a/elements/rh-tag/rh-tag.ts
+++ b/elements/rh-tag/rh-tag.ts
@@ -84,7 +84,7 @@ export class RhTag extends LitElement {
               teal: color === 'cyan' || color === 'teal',
               [variant]: true,
               [color]: true })}">
-        <slot name="icon" part="icon">
+        <slot part="icon" name="icon">
           <rh-icon ?hidden="${!icon}" icon="${ifDefined(icon)}" set="${this.iconSet}"></rh-icon>
         </slot>${!this.href ? html`
         <slot id="text"></slot>` : html`
diff --git a/elements/rh-tag/test/rh-tag.spec.ts b/elements/rh-tag/test/rh-tag.spec.ts
index 925c791da2..94b85a19f1 100644
--- a/elements/rh-tag/test/rh-tag.spec.ts
+++ b/elements/rh-tag/test/rh-tag.spec.ts
@@ -108,7 +108,7 @@ describe('<rh-tag>', async function() {
       element = await createFixture<RhTag>(html`
         <rh-tag>
           Default
-          <rh-icon set="ui" icon="information"></rh-icon>
+          <rh-icon icon="information" set="ui"></rh-icon>
         </rh-tag>
       `);
       container = unslotted.shadowRoot!.querySelector('#container')!;
diff --git a/elements/rh-tile/rh-tile.ts b/elements/rh-tile/rh-tile.ts
index 2a418e614f..53bac0f995 100644
--- a/elements/rh-tile/rh-tile.ts
+++ b/elements/rh-tile/rh-tile.ts
@@ -200,33 +200,33 @@ export class RhTile extends LitElement {
     return html`
       <div id="outer" class="${classMap({ bleed, checkable, compact, checked, desaturated, disabled })}">
         <slot id="image"
-              name="image"
               ?hidden="${this.checkable}"
+              name="image"
         ></slot>
         <div id="inner">
           <slot id="icon"
                 class="${classMap({ compact, checkable })}"
-                name="icon"
-                ?hidden="${this.icon === undefined && !hasSlottedIcon}">${this.icon === undefined ? ''
+                ?hidden="${this.icon === undefined && !hasSlottedIcon}"
+                name="icon">${this.icon === undefined ? ''
       : html`<rh-icon icon="${ifDefined(this.icon)}" set="${this.iconSet}"></rh-icon>`}
           </slot>
           <div id="content">
             <div id="header">
               <slot id="title"
-                    name="title"
-                    ?hidden="${this.checkable || this.compact}"></slot>
+                    ?hidden="${this.checkable || this.compact}"
+                    name="title"></slot>
               <slot id="headline" name="headline"></slot>
-              <div id="input-outer" aria-hidden="true" ?hidden="${!this.#isCheckable}" ?inert="${!this.#isCheckable}">
+              <div id="input-outer" ?hidden="${!this.#isCheckable}" ?inert="${!this.#isCheckable}" aria-hidden="true">
                 <input id="input"
                        type="${this.radioGroup ? 'radio' : 'checkbox'}"
-                       tabindex="-1"
                        ?checked="${checked}"
-                       ?disabled="${disabled}"></input>
+                       ?disabled="${disabled}"
+                       tabindex="-1"></input>
               </div>
             </div>
             <slot id="body" class="${classMap({ empty: this.#slots.isEmpty() })}"></slot>
             <div id="footer" class="${classMap({ empty: this.#slots.isEmpty('footer') })}">
-              <slot id="footer-text" name="footer"></slot><rh-icon set="ui" icon="${linkIcon}"></rh-icon>
+              <slot id="footer-text" name="footer"></slot><rh-icon icon="${linkIcon}" set="ui"></rh-icon>
             </div>
           </div>
         </div>
diff --git a/elements/rh-tile/test/rh-tile.spec.ts b/elements/rh-tile/test/rh-tile.spec.ts
index ec50406bac..a20c018392 100644
--- a/elements/rh-tile/test/rh-tile.spec.ts
+++ b/elements/rh-tile/test/rh-tile.spec.ts
@@ -38,7 +38,7 @@ describe('<rh-tile>', function() {
     beforeEach(async function() {
       element = await createFixture<RhTile>(html`
         <rh-tile>
-          <img slot="image" src="${dataurl}" alt="296 X 50 placeholder">
+          <img slot="image" alt="296 X 50 placeholder" src="${dataurl}">
           <div slot="title">Title</div>
           <h2 slot="headline"><a href="#top">Link</a></h2>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -58,7 +58,7 @@ describe('<rh-tile>', function() {
     beforeEach(async function() {
       element = await createFixture<RhTile>(html`
         <rh-tile checkable>
-          <img slot="image" src="${dataurl}" alt="296 X 50 placeholder">
+          <img slot="image" alt="296 X 50 placeholder" src="${dataurl}">
           <div slot="title">Title</div>
           <h2 slot="headline"><a href="#top">Link</a></h2>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
diff --git a/elements/rh-timestamp/test/rh-timestamp.spec.ts b/elements/rh-timestamp/test/rh-timestamp.spec.ts
index ef79cdba62..2ff593b050 100644
--- a/elements/rh-timestamp/test/rh-timestamp.spec.ts
+++ b/elements/rh-timestamp/test/rh-timestamp.spec.ts
@@ -86,7 +86,7 @@ describe('<rh-timestamp>', function() {
     };
     const expected = new Date(dateString).toLocaleString('en-US', options);
     const element = await createFixture<RhTimestamp>(html`
-      <rh-timestamp date="Sat Jan 01 2022 00:00:00" .customFormat=${options}></rh-timestamp>
+      <rh-timestamp .customFormat=${options} date="Sat Jan 01 2022 00:00:00"></rh-timestamp>
     `);
     expect(element.time).to.equal(expected);
   });
@@ -146,7 +146,7 @@ describe('<rh-timestamp>', function() {
     const date = new Date(2022, 1, 1, 13, 0).toString();
     const expected = new Date(date).toLocaleString('en-US', { hour12: false });
     const element = await createFixture<RhTimestamp>(html`
-      <rh-timestamp date="${date}" locale="en-US" hour-12="false"></rh-timestamp>
+      <rh-timestamp date="${date}" hour-12="false" locale="en-US"></rh-timestamp>
     `);
 
     expect(element.time).to.equal(expected);
@@ -156,7 +156,7 @@ describe('<rh-timestamp>', function() {
     const date = new Date(2022, 1, 1, 13, 0).toString();
     const expected = new Date(date).toLocaleString('en-GB', { hour12: true });
     const element = await createFixture<RhTimestamp>(html`
-      <rh-timestamp date="${date}" locale="en-GB" hour-12></rh-timestamp>
+      <rh-timestamp date="${date}" hour-12 locale="en-GB"></rh-timestamp>
     `);
 
     expect(element.time).to.equal(expected);
diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts
index 9d434dd096..135890598d 100644
--- a/elements/rh-tooltip/rh-tooltip.ts
+++ b/elements/rh-tooltip/rh-tooltip.ts
@@ -115,11 +115,11 @@ export class RhTooltip extends LitElement {
 
     return html`
       <div id="container"
-           style="${styleMap(styles)}"
            class="${classMap({ open,
                                initialized: !!this.#initialized,
                                [anchor]: !!anchor,
-                               [alignment]: !!alignment })}">
+                               [alignment]: !!alignment })}"
+           style="${styleMap(styles)}">
         <div id="invoker">
           <slot id="invoker-slot"></slot>
         </div>
diff --git a/elements/rh-tooltip/test/rh-tooltip.spec.ts b/elements/rh-tooltip/test/rh-tooltip.spec.ts
index 35ce88b46e..1b8435bb3b 100644
--- a/elements/rh-tooltip/test/rh-tooltip.spec.ts
+++ b/elements/rh-tooltip/test/rh-tooltip.spec.ts
@@ -37,7 +37,7 @@ describe('<rh-tooltip>', function() {
     beforeEach(async function() {
       element = await fixture<RhTooltip>(html`
         <rh-tooltip position="left">
-          <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512">
+          <svg height="24" viewBox="0 0 512 512" width="24" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z">
             </path>
diff --git a/elements/rh-video-embed/rh-video-embed.ts b/elements/rh-video-embed/rh-video-embed.ts
index 210c67e9fd..a0947b9b52 100644
--- a/elements/rh-video-embed/rh-video-embed.ts
+++ b/elements/rh-video-embed/rh-video-embed.ts
@@ -137,8 +137,8 @@ export class RhVideoEmbed extends LitElement {
     const show = consent ? 'consent' : video ? 'video' : 'thumbnail';
 
     return html`
-      <figure part="figure" class="${classMap({ video, consent })}">
-        <div part="video" id="video">
+      <figure class="${classMap({ video, consent })}" part="figure">
+        <div id="video" part="video">
           <div aria-hidden="${show !== 'thumbnail'}">
             <slot id="thumbnail" name="thumbnail"></slot>
           </div>
@@ -146,41 +146,41 @@ export class RhVideoEmbed extends LitElement {
           <div id="autoplay"><slot name="autoplay"></slot></div>
           ${this.#showConsent ? html`
             <rh-surface id="consent" color-palette="darker">
-              <svg id="watermark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1136 639">
+              <svg id="watermark" viewBox="0 0 1136 639" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                 <defs>
                   <clipPath id="clip-path">
-                    <rect id="Rectangle" width="1136" height="639" transform="translate(150 212)" fill="#212427"/>
+                    <rect id="Rectangle" fill="#212427" height="639" transform="translate(150 212)" width="1136"/>
                   </clipPath>
                   <clipPath id="clip-path-2">
-                    <rect id="Rectangle_1" data-name="Rectangle 1" width="1000.925" height="756.901" fill="none"/>
+                    <rect id="Rectangle_1" data-name="Rectangle 1" fill="none" height="756.901" width="1000.925"/>
                   </clipPath>
                 </defs>
-                <g id="Mask_Group_1" data-name="Mask Group 1" transform="translate(-150 -212)" clip-path="url(#clip-path)">
-                  <g id="Group_2000" data-name="Group 2000" transform="translate(50.847 23.483)" opacity="0.2">
-                    <g id="Group_1999" data-name="Group 1999" clip-path="url(#clip-path-2)">
-                      <path id="Path_3" data-name="Path 3" d="M667.591,436.2c65.743-.063,160.93-13.755,160.857-91.955-.005-6.1-.173-12.042-1.645-17.992L787.482,156.147c-9.114-37.392-17.046-54.39-82.815-87.2C653.636,42.937,542.528-.032,509.656,0c-30.6.026-39.626,39.7-75.9,39.731-35.126.032-61.218-29.408-94.094-29.376-31.72.032-52.114,21.576-67.935,65.8,0,0-44.093,124.706-49.749,142.834a33.047,33.047,0,0,0-1.156,10.213c.047,48.45,191.011,207.231,446.766,207m171.085-60.229c9.114,43.058,9.114,47.589,9.119,53.255.074,73.68-82.641,114.546-191.432,114.645-245.953.226-461.415-143.507-461.5-238.71a97,97,0,0,1,7.889-38.543C114.352,271.234-.1,287.2,0,388.072.148,553.538,392.488,757.185,703.022,756.9c238.021-.216,297.977-107.934,297.9-192.935-.068-66.884-57.932-142.75-162.245-187.994" transform="translate(0.004 0)"/>
+                <g id="Mask_Group_1" clip-path="url(#clip-path)" data-name="Mask Group 1" transform="translate(-150 -212)">
+                  <g id="Group_2000" data-name="Group 2000" opacity="0.2" transform="translate(50.847 23.483)">
+                    <g id="Group_1999" clip-path="url(#clip-path-2)" data-name="Group 1999">
+                      <path id="Path_3" d="M667.591,436.2c65.743-.063,160.93-13.755,160.857-91.955-.005-6.1-.173-12.042-1.645-17.992L787.482,156.147c-9.114-37.392-17.046-54.39-82.815-87.2C653.636,42.937,542.528-.032,509.656,0c-30.6.026-39.626,39.7-75.9,39.731-35.126.032-61.218-29.408-94.094-29.376-31.72.032-52.114,21.576-67.935,65.8,0,0-44.093,124.706-49.749,142.834a33.047,33.047,0,0,0-1.156,10.213c.047,48.45,191.011,207.231,446.766,207m171.085-60.229c9.114,43.058,9.114,47.589,9.119,53.255.074,73.68-82.641,114.546-191.432,114.645-245.953.226-461.415-143.507-461.5-238.71a97,97,0,0,1,7.889-38.543C114.352,271.234-.1,287.2,0,388.072.148,553.538,392.488,757.185,703.022,756.9c238.021-.216,297.977-107.934,297.9-192.935-.068-66.884-57.932-142.75-162.245-187.994" data-name="Path 3" transform="translate(0.004 0)"/>
                     </g>
                   </g>
                 </g>
               </svg>
-              <div part="consent-body" id="consent-body">
+              <div id="consent-body" part="consent-body">
                 <slot name="consent-message">
                   <p id="consent-message">View this video by opting in to “Advertising Cookies.”</p>
                 </slot>
                 <rh-button
                   id="consent-button"
-                  variant="tertiary"
                   @click="${this.#handleConsentClick}"
-                  @keyup="${this.#handleConsentKeyup}"><slot name="consent-button-text">Update preferences</slot></rh-button>
+                  @keyup="${this.#handleConsentKeyup}"
+                  variant="tertiary"><slot name="consent-button-text">Update preferences</slot></rh-button>
               </div>
             </rh-surface>
           ` : ''}
-          <rh-button part="play"
-                     id="play"
-                     variant="play"
+          <rh-button id="play"
+                     part="play"
                      ?hidden="${show !== 'thumbnail'}"
                      @click="${this.#handlePlayClick}"
-                     @keyup="${this.#handlePlayKeyup}">
+                     @keyup="${this.#handlePlayKeyup}"
+                     variant="play">
             <span class="visually-hidden"><slot name="play-button-text">${playLabel}</slot></span>
           </rh-button>
         </div>
diff --git a/elements/rh-video-embed/test/rh-video-embed.spec.ts b/elements/rh-video-embed/test/rh-video-embed.spec.ts
index 24b6098aeb..6ae3c95289 100644
--- a/elements/rh-video-embed/test/rh-video-embed.spec.ts
+++ b/elements/rh-video-embed/test/rh-video-embed.spec.ts
@@ -55,16 +55,16 @@ describe('<rh-video-embed>', function() {
     beforeEach(async function() {
       element = await createFixture<RhVideoEmbed>(html`
       <rh-video-embed>
-        <img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="fakethumb"/>
+        <img slot="thumbnail" alt="fakethumb" src="https://fakeimg.pl/900x499/282828/eae0d0"/>
         <template>
-          <iframe title="videotitle"
-                  width="900"
-                  height="499"
-                  src="https://www.youtube.com/embed/Hc8emNr2igU"
+          <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
                   frameborder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  height="499"
                   referrerpolicy="strict-origin-when-cross-origin"
-                  allowfullscreen></iframe>
+                  src="https://www.youtube.com/embed/Hc8emNr2igU"
+                  title="videotitle"
+                  width="900"></iframe>
         </template>
        <p slot="caption">Caption</caption>
       </rh-video-embed>`);
@@ -109,9 +109,9 @@ describe('<rh-video-embed>', function() {
     beforeEach(async function() {
       element = await createFixture<RhVideoEmbed>(html`
       <rh-video-embed>
-        <img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="fakethumb"/>
+        <img slot="thumbnail" alt="fakethumb" src="https://fakeimg.pl/900x499/282828/eae0d0"/>
         <template>
-          <iframe title="videotitle" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen frameborder="0" height="499" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/Hc8emNr2igU" title="videotitle" width="900"></iframe>
         </template>
       </rh-video-embed>`);
       element?.focusableElement?.focus();
@@ -133,9 +133,9 @@ describe('<rh-video-embed>', function() {
     beforeEach(async function() {
       element = await createFixture<RhVideoEmbed>(html`
       <rh-video-embed>
-        <img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="fakethumb"/>
+        <img slot="thumbnail" alt="fakethumb" src="https://fakeimg.pl/900x499/282828/eae0d0"/>
         <template>
-          <iframe title="videotitle" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen frameborder="0" height="499" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/Hc8emNr2igU" title="videotitle" width="900"></iframe>
         </template>
       </rh-video-embed>`);
       await clickElementAtCenter(element.focusableElement);
@@ -156,9 +156,9 @@ describe('<rh-video-embed>', function() {
     beforeEach(async function() {
       element = await createFixture<RhVideoEmbed>(html`
       <rh-video-embed require-consent>
-        <img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="fakethumb"/>
+        <img slot="thumbnail" alt="fakethumb" src="https://fakeimg.pl/900x499/282828/eae0d0"/>
         <template>
-          <iframe title="videotitle" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen frameborder="0" height="499" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/Hc8emNr2igU" title="videotitle" width="900"></iframe>
         </template>
        <p slot="caption">Caption</caption>
       </rh-video-embed>`);
@@ -199,9 +199,9 @@ describe('<rh-video-embed>', function() {
     beforeEach(async function() {
       element = await createFixture<RhVideoEmbed>(html`
       <rh-video-embed require-consent>
-        <img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="fakethumb"/>
+        <img slot="thumbnail" alt="fakethumb" src="https://fakeimg.pl/900x499/282828/eae0d0"/>
         <template>
-          <iframe title="videotitle" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen frameborder="0" height="499" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/Hc8emNr2igU" title="videotitle" width="900"></iframe>
         </template>
       </rh-video-embed>`);
       element.consentButton?.focus();
@@ -225,9 +225,9 @@ describe('<rh-video-embed>', function() {
     beforeEach(async function() {
       element = await createFixture<RhVideoEmbed>(html`
       <rh-video-embed require-consent>
-        <img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="fakethumb"/>
+        <img slot="thumbnail" alt="fakethumb" src="https://fakeimg.pl/900x499/282828/eae0d0"/>
         <template>
-          <iframe title="videotitle" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen frameborder="0" height="499" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/Hc8emNr2igU" title="videotitle" width="900"></iframe>
         </template>
       </rh-video-embed>`);
       await clickElementAtCenter(element.focusableElement.shadowRoot!.querySelector('button')!);
diff --git a/eslint.config.js b/eslint.config.js
index f0149c30e5..76ffa9aabf 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -19,6 +19,9 @@ export default tseslint.config(
       '@html-eslint/prefer-https': 'error',
       '@html-eslint/no-target-blank': 'error',
       '@html-eslint/quotes': 'error',
+      '@html-eslint/sort-attrs': ['error', {
+        priority: ['id', 'class', 'part', 'slot', 'type', 'style'],
+      }],
     },
   },
   {
diff --git a/lib/context/headings/consumer.ts b/lib/context/headings/consumer.ts
index eda928cf60..2e1f7be891 100644
--- a/lib/context/headings/consumer.ts
+++ b/lib/context/headings/consumer.ts
@@ -43,12 +43,12 @@ export class HeadingLevelContextConsumer extends ContextConsumer<typeof context,
     const id = options?.id;
     const hidden = options?.hidden ?? false;
     switch (offsetLevel) {
-      case 1: return html`<h1 ?hidden=${hidden} id="${ifDefined(id)}">${content}</h1>`;
-      case 2: return html`<h2 ?hidden=${hidden} id="${ifDefined(id)}">${content}</h2>`;
-      case 3: return html`<h3 ?hidden=${hidden} id="${ifDefined(id)}">${content}</h3>`;
-      case 4: return html`<h4 ?hidden=${hidden} id="${ifDefined(id)}">${content}</h4>`;
-      case 5: return html`<h5 ?hidden=${hidden} id="${ifDefined(id)}">${content}</h5>`;
-      default: return html`<h6 ?hidden=${hidden} id="${ifDefined(id)}">${content}</h6>`;
+      case 1: return html`<h1 id="${ifDefined(id)}" ?hidden=${hidden}>${content}</h1>`;
+      case 2: return html`<h2 id="${ifDefined(id)}" ?hidden=${hidden}>${content}</h2>`;
+      case 3: return html`<h3 id="${ifDefined(id)}" ?hidden=${hidden}>${content}</h3>`;
+      case 4: return html`<h4 id="${ifDefined(id)}" ?hidden=${hidden}>${content}</h4>`;
+      case 5: return html`<h5 id="${ifDefined(id)}" ?hidden=${hidden}>${content}</h5>`;
+      default: return html`<h6 id="${ifDefined(id)}" ?hidden=${hidden}>${content}</h6>`;
     }
   }
 }
diff --git a/lib/elements/rh-context-demo/rh-context-demo.ts b/lib/elements/rh-context-demo/rh-context-demo.ts
index 0af5b60d8d..cc9f549e74 100644
--- a/lib/elements/rh-context-demo/rh-context-demo.ts
+++ b/lib/elements/rh-context-demo/rh-context-demo.ts
@@ -29,8 +29,8 @@ export class RhContextDemo extends LitElement {
       <div id="provider" @change="${this.#onChange}">
           <div id="picker-container">
             <rh-context-picker id="picker"
-                               .value="${colorPalette}"
-                               .target="${this}"></rh-context-picker>
+                               .target="${this}"
+                               .value="${colorPalette}"></rh-context-picker>
             <label for="picker">${this.label}</label>
             <slot name="controls"></slot>
           </div>
diff --git a/lib/elements/rh-context-picker/rh-context-picker.ts b/lib/elements/rh-context-picker/rh-context-picker.ts
index 494a337ad8..afdb8d06bd 100644
--- a/lib/elements/rh-context-picker/rh-context-picker.ts
+++ b/lib/elements/rh-context-picker/rh-context-picker.ts
@@ -84,16 +84,16 @@ export class RhContextPicker extends LitElement {
       <div id="container"
            @input="${this.#onInput}">
         ${allow.map(palette => html`
-        <label for="radio-${palette}" class="visually-hidden">${palette}</label>
+        <label class="visually-hidden" for="radio-${palette}">${palette}</label>
         <rh-tooltip>
           <span slot="content">${palette}</span>
           <input id="radio-${palette}"
                  class="${classMap({ [palette]: true })}"
-                 name="palette"
                  type="radio"
-                 value="${palette}"
+                 ?checked="${value === palette}"
                  aria-describedby="host-label"
-                 ?checked="${value === palette}">
+                 name="palette"
+                 value="${palette}">
         </rh-tooltip>`)}
       </div>
     `;
diff --git a/scripts/validate-prs.js b/scripts/validate-prs.js
index 2ad2fa5b21..da52651ff1 100644
--- a/scripts/validate-prs.js
+++ b/scripts/validate-prs.js
@@ -1,7 +1,6 @@
 import { default as read } from '@changesets/read';
 import semanticRelease from 'semantic-release';
 
-/** @typedef {'major'|'minor'|'patch'} ReleaseType */
 
 /**
  * named capture group 1 `commitType`:
@@ -18,7 +17,6 @@ async function getReleaseType(title, mergeType) {
       dryRun: true,
       branches: ['main'],
     }) ?? {};
-    /** @type {ReleaseType} */
     const type = result?.nextRelease?.type;
     return type;
   } else {
@@ -44,7 +42,6 @@ export async function validate({ context }) {
   const type = await getReleaseType(title, autoMerge?.merge_method) ?? null;
   const sets = await read(process.cwd());
 
-  /** @type {ReleaseType} */
   const release = sets.reduce((greatest, type) => {
     switch (greatest) {
       case null:
diff --git a/uxdot/uxdot-best-practice.ts b/uxdot/uxdot-best-practice.ts
index 4738dfe495..d37d420026 100644
--- a/uxdot/uxdot-best-practice.ts
+++ b/uxdot/uxdot-best-practice.ts
@@ -28,7 +28,7 @@ export class UxdotBestPractice extends LitElement {
       <figure id="container">
         <slot name="image"></slot>
         <figcaption id="${variant}">
-          <span><rh-icon set="ui" icon="${iconMap[variant]}" size="md"></rh-icon>${titleMap[variant]}</span>
+          <span><rh-icon icon="${iconMap[variant]}" set="ui" size="md"></rh-icon>${titleMap[variant]}</span>
           <slot></slot>
         </figcaption>
       </figure>
diff --git a/uxdot/uxdot-color-scheme-picker.ts b/uxdot/uxdot-color-scheme-picker.ts
index c0b44fb557..029ebe7ef2 100644
--- a/uxdot/uxdot-color-scheme-picker.ts
+++ b/uxdot/uxdot-color-scheme-picker.ts
@@ -41,18 +41,18 @@ export class UxdotColorSchemePicker extends LitElement {
         <div id="button-group">
           <label title="Light">
             <span class="visually-hidden">Light</span>
-            <input type="radio" name="scheme" value="light" ?checked="${!isServer && this.scheme === 'light'}">
-            <rh-icon set="ui" icon="light-mode"></rh-icon>
+            <input type="radio" ?checked="${!isServer && this.scheme === 'light'}" name="scheme" value="light">
+            <rh-icon icon="light-mode" set="ui"></rh-icon>
           </label>
           <label title="Dark">
             <span class="visually-hidden">Dark</span>
-            <input type="radio" name="scheme" value="dark" ?checked="${!isServer && this.scheme === 'dark'}">
-            <rh-icon set="ui" icon="dark-mode"></rh-icon>
+            <input type="radio" ?checked="${!isServer && this.scheme === 'dark'}" name="scheme" value="dark">
+            <rh-icon icon="dark-mode" set="ui"></rh-icon>
           </label>
           <label title="Device default">
             <span class="visually-hidden">Device default</span>
-            <input type="radio" name="scheme" value="light dark" ?checked="${isServer || this.scheme === 'light dark'}">
-            <rh-icon set="ui" icon="auto-light-dark-mode"></rh-icon>
+            <input type="radio" ?checked="${isServer || this.scheme === 'light dark'}" name="scheme" value="light dark">
+            <rh-icon icon="auto-light-dark-mode" set="ui"></rh-icon>
           </label>
         </div>
       </fieldset>
diff --git a/uxdot/uxdot-copy-button.ts b/uxdot/uxdot-copy-button.ts
index e1128a4325..0ce5f42a38 100644
--- a/uxdot/uxdot-copy-button.ts
+++ b/uxdot/uxdot-copy-button.ts
@@ -31,7 +31,7 @@ export class UxdotCopyButton extends LitElement {
           <code><slot></slot></code>
           <slot name="extra-content"></slot>
           <span class="visually-hidden">Click to copy</span>
-          <rh-icon aria-hidden="true" set="ui" .icon="${this.icon}"></rh-icon>
+          <rh-icon .icon="${this.icon}" aria-hidden="true" set="ui"></rh-icon>
         </button>
       </rh-tooltip>
     `;
diff --git a/uxdot/uxdot-copy-permalink.ts b/uxdot/uxdot-copy-permalink.ts
index 773123200c..8af3eb4d2a 100644
--- a/uxdot/uxdot-copy-permalink.ts
+++ b/uxdot/uxdot-copy-permalink.ts
@@ -22,10 +22,10 @@ export class UxdotCopyPermalink extends LitElement {
     return html`
       <slot></slot>
       <span id="signifier">(permalink)</span>
-      <button @click="${this.#copyLink}"
-              id="button"
+      <button id="button"
+              @click="${this.#copyLink}"
               aria-label="${this.copyButtonLabel}">
-        <rh-icon set="ui" icon="link"></rh-icon>
+        <rh-icon icon="link" set="ui"></rh-icon>
       </button>
     `;
   }
diff --git a/uxdot/uxdot-demo.ts b/uxdot/uxdot-demo.ts
index 74e8bd10b5..0d12f4de96 100644
--- a/uxdot/uxdot-demo.ts
+++ b/uxdot/uxdot-demo.ts
@@ -26,9 +26,9 @@ export class UxdotDemo extends LitElement {
   render() {
     return html`
       <div id="container">
-        <iframe loading="lazy" title="${this.demoTitle}" src="${this.demoUrl}"></iframe>
-        <rh-card ssr-hint-has-slotted-default
-                 ssr-hint-has-slotted="footer">
+        <iframe loading="lazy" src="${this.demoUrl}" title="${this.demoTitle}"></iframe>
+        <rh-card ssr-hint-has-slotted="footer"
+                 ssr-hint-has-slotted-default>
           <rh-tabs class="code-tabs" active-index="0">
             <rh-tab slot="tab" active>HTML</rh-tab>
             <rh-tab-panel><slot name="html"></slot></rh-tab-panel>
@@ -38,15 +38,15 @@ export class UxdotDemo extends LitElement {
             <rh-tab-panel><slot name="js"></slot></rh-tab-panel>
           </rh-tabs>
           <rh-button slot="footer"
-                     variant="tertiary"
+                     @click="${this.#toggleFullscreen}"
                      icon="expand"
                      icon-set="ui"
-                     @click="${this.#toggleFullscreen}">FullScreen</rh-button>
+                     variant="tertiary">FullScreen</rh-button>
           <rh-button slot="footer"
-                     variant="tertiary"
+                     @click="${this.#reloadIframe}"
                      icon="refresh"
                      icon-set="ui"
-                     @click="${this.#reloadIframe}">Reload</rh-button>
+                     variant="tertiary">Reload</rh-button>
           <rh-cta slot="footer" href="${this.demoSourceUrl}">View source on GitHub</rh-cta>
           <rh-cta slot="footer" href="${this.demoUrl}" target="_blank">View In Own Tab</rh-cta>
         </rh-card>
diff --git a/uxdot/uxdot-example.ts b/uxdot/uxdot-example.ts
index 9b0cd30de1..34007175f6 100644
--- a/uxdot/uxdot-example.ts
+++ b/uxdot/uxdot-example.ts
@@ -48,8 +48,8 @@ export class UxdotExample extends LitElement {
     const { widthAdjustment, alignment } = this;
     return html`
       <div id="container"
-           part="container"
            class="${classMap({ widthAdjustment: widthAdjustment !== '100%' })}"
+           part="container"
            style="--_width: ${widthAdjustment}; --_alignment: ${alignment}">
         <slot></slot>
       </div>
diff --git a/uxdot/uxdot-feedback.ts b/uxdot/uxdot-feedback.ts
index d278a75af9..f97202e028 100644
--- a/uxdot/uxdot-feedback.ts
+++ b/uxdot/uxdot-feedback.ts
@@ -21,7 +21,7 @@ export class UxdotFeedback extends LitElement {
         <h2>Feedback</h2>
           <p>
             To give feedback about anything on this page,
-            <a href="https://github.com/RedHat-UX/red-hat-design-system/discussions" class="feedback-contact-link">contact us</a>.
+            <a class="feedback-contact-link" href="https://github.com/RedHat-UX/red-hat-design-system/discussions">contact us</a>.
           </p>
         </div>
       </div>
diff --git a/uxdot/uxdot-header.ts b/uxdot/uxdot-header.ts
index e35eeae4eb..cdcc5c1937 100644
--- a/uxdot/uxdot-header.ts
+++ b/uxdot/uxdot-header.ts
@@ -23,12 +23,12 @@ export class UxdotHeader extends LitElement {
     const { hasSubnav, hasSearch } = this;
     return html`
       <div id="container"
-           part="container"
-           class=${classMap({ hasSubnav, hasSearch })}>
+           class=${classMap({ hasSubnav, hasSearch })}
+           part="container">
         <slot part="heading"></slot>
-        <slot name="search" part="search"></slot>
+        <slot part="search" name="search"></slot>
       </div>
-      <slot name="subnav" part="subnav"></slot>
+      <slot part="subnav" name="subnav"></slot>
     `;
   }
 }
diff --git a/uxdot/uxdot-masthead.ts b/uxdot/uxdot-masthead.ts
index 712f902cde..c1545e7e45 100644
--- a/uxdot/uxdot-masthead.ts
+++ b/uxdot/uxdot-masthead.ts
@@ -21,20 +21,20 @@ export class UxdotMasthead extends LitElement {
         <div id="logo">
           <a href="/">
             <img alt="Red Hat Design System logo"
+                 height="40"
                  src="/assets/red-hat-design-system.svg"
-                 width="188"
-                 height="40">
+                 width="188">
           </a>
         </div>
         <uxdot-color-scheme-picker id="scheme"></uxdot-color-scheme-picker>
         <div id="links">
           <a id="github" href="https://github.com/RedHat-UX/red-hat-design-system/">
             <span class="display-xs">Contribute on Github</span>
-            <rh-icon set="social" icon="github" size="lg"></rh-icon>
+            <rh-icon icon="github" set="social" size="lg"></rh-icon>
           </a>
-          <a id="version" href="https://github.com/RedHat-UX/red-hat-design-system/releases/tag/v${version}/"
-             title="Version ${version}"
-             aria-label="Version ${version}">v${version}</a>
+          <a id="version" aria-label="Version ${version}"
+             href="https://github.com/RedHat-UX/red-hat-design-system/releases/tag/v${version}/"
+             title="Version ${version}">v${version}</a>
         </div>
       </div>
       <slot></slot>
diff --git a/uxdot/uxdot-pattern.ts b/uxdot/uxdot-pattern.ts
index 192fb4c9c9..c99dfb4899 100644
--- a/uxdot/uxdot-pattern.ts
+++ b/uxdot/uxdot-pattern.ts
@@ -73,7 +73,7 @@ export class UxdotPattern extends SSRFailureRecoverableElement {
 
     const actionsLabels = html`
       <span slot="action-label-copy">Copy to Clipboard</span>
-      <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
+      <span slot="action-label-copy" data-code-block-state="active" hidden>Copied!</span>
       <span slot="action-label-wrap">Toggle line wrap</span>
     `;
 
@@ -87,9 +87,9 @@ export class UxdotPattern extends SSRFailureRecoverableElement {
           <label for="picker">Color palette</label>
           <rh-context-picker id="picker"
                              @change="${this.#onChange}"
-                             value="${this.colorPalette}"
+                             allow="${this.allow}"
                              target="${this.target}"
-                             allow="${this.allow}"></rh-context-picker>
+                             value="${this.colorPalette}"></rh-context-picker>
         </form>
 
         <div id="description"><slot></slot></div>
@@ -98,32 +98,32 @@ export class UxdotPattern extends SSRFailureRecoverableElement {
 
         <rh-tabs id="code-tabs"
                  class="code-tabs"
-                 active-index="${ifDefined(!this.#picked ? ['html', 'css', 'js'].indexOf(activeTab) : undefined)}"
                  ?hidden="${this.noCodeTabs}"
-                 @expand="${this.#onExpand}">
+                 @expand="${this.#onExpand}"
+                 active-index="${ifDefined(!this.#picked ? ['html', 'css', 'js'].indexOf(activeTab) : undefined)}">
           <rh-tab id="html-tab" slot="tab">HTML</rh-tab>
           <rh-tab-panel id="html-panel">
-            <rh-code-block highlighting="prerendered"
+            <rh-code-block ?full-height="${this.fullHeight}"
                            actions="copy wrap"
-                           ?full-height="${this.fullHeight}">
+                           highlighting="prerendered">
               ${htmlContent}
               ${actionsLabels}
             </rh-code-block>
           </rh-tab-panel>
           <rh-tab id="css-tab" slot="tab" .disabled="${!hasCss}">CSS</rh-tab>
           <rh-tab-panel id="css-panel">
-            <rh-code-block highlighting="prerendered"
+            <rh-code-block ?full-height="${this.fullHeight}"
                            actions="copy wrap"
-                           ?full-height="${this.fullHeight}">
+                           highlighting="prerendered">
               ${cssContent}
               ${actionsLabels}
             </rh-code-block>
           </rh-tab-panel>
           <rh-tab id="js-tab" slot="tab" .disabled="${!hasJs}">JS</rh-tab>
           <rh-tab-panel id="js-panel">
-            <rh-code-block highlighting="prerendered"
+            <rh-code-block ?full-height="${this.fullHeight}"
                            actions="copy wrap"
-                           ?full-height="${this.fullHeight}">
+                           highlighting="prerendered">
               ${jsContent}
               ${actionsLabels}
             </rh-code-block>
diff --git a/uxdot/uxdot-repo-status-checklist.ts b/uxdot/uxdot-repo-status-checklist.ts
index e2dae4d717..48735dd12c 100644
--- a/uxdot/uxdot-repo-status-checklist.ts
+++ b/uxdot/uxdot-repo-status-checklist.ts
@@ -18,7 +18,7 @@ export class UxdotRepoStatusChecklist extends UxdotRepoElement {
     const status = this.getStatus(this.element!);
     return html`
       <!-- TODO: remove lightdom after implementing auto-load-->
-      <link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
+      <link href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css" rel="stylesheet">
       <div id="container">
         <rh-table>
           <table>
@@ -40,8 +40,8 @@ export class UxdotRepoStatusChecklist extends UxdotRepoElement {
                 <td data-label="Status">
                   <span>
                     <rh-tag color="${x.color}"
-                            variant="${x.variant}"
-                            icon="${x.icon}">${x.status}</rh-tag>
+                            icon="${x.icon}"
+                            variant="${x.variant}">${x.status}</rh-tag>
                   </span>
                 </td>
                 <td>${x.description}</td>
diff --git a/uxdot/uxdot-repo-status-list.ts b/uxdot/uxdot-repo-status-list.ts
index b05d072430..daf0f470b5 100644
--- a/uxdot/uxdot-repo-status-list.ts
+++ b/uxdot/uxdot-repo-status-list.ts
@@ -16,17 +16,17 @@ export class UxdotRepoStatusList extends UxdotRepoElement {
     const status = this.getStatus(this.element!);
     return html`
       <!-- TODO: remove lightdom after implementing auto-load-->
-      <link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
+      <link href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css" rel="stylesheet">
       <div id="container">
-        <a href="#status-checklist" class="checklist">What do these mean?</a>
+        <a class="checklist" href="#status-checklist">What do these mean?</a>
         <div id="inner-container">
           <dl>${status?.libraries.map(x => x.key === 'docs' ? '' : html`
             <div>
               <dt>${x.name}:</dt>
               <dd>
                 <rh-tag color="${x.color}"
-                        variant="${x.variant}"
-                        icon="${x.icon}">${x.status}</rh-tag>
+                        icon="${x.icon}"
+                        variant="${x.variant}">${x.status}</rh-tag>
               </dd>
             </div>`)}
           </dl>
diff --git a/uxdot/uxdot-repo-status-table.ts b/uxdot/uxdot-repo-status-table.ts
index 3ce72bcec8..f0666bea14 100644
--- a/uxdot/uxdot-repo-status-table.ts
+++ b/uxdot/uxdot-repo-status-table.ts
@@ -18,7 +18,7 @@ export class UxdotRepoStatusTable extends UxdotRepoElement {
     const status = this.getStatus();
     return html`
       <!-- TODO: remove lightdom after implementing auto-load-->
-      <link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
+      <link href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css" rel="stylesheet">
       <div id="container">
         <rh-table>
           <table>
@@ -43,13 +43,13 @@ export class UxdotRepoStatusTable extends UxdotRepoElement {
                 <td>
                   <a href="/elements/${x.slug}/">${x?.name}</a>${x?.overallStatus === 'ready' ? '' : html`
                   <rh-tag color="${x?.color}"
-                          variant="${x?.variant}"
-                          icon="${x?.icon}">${x?.overallStatus}</rh-tag>`}
+                          icon="${x?.icon}"
+                          variant="${x?.variant}">${x?.overallStatus}</rh-tag>`}
                 </td>${x?.libraries.map(x => html`
                 <td>
                   <rh-tag color="${x.color}"
-                          variant="${x.variant}"
-                          icon="${x.icon}">${x.status}</rh-tag>
+                          icon="${x.icon}"
+                          variant="${x.variant}">${x.status}</rh-tag>
                 </td>`)}
               </tr>`)}
             </tbody>
diff --git a/uxdot/uxdot-search.ts b/uxdot/uxdot-search.ts
index d37e9bf2f6..f66489a9ee 100644
--- a/uxdot/uxdot-search.ts
+++ b/uxdot/uxdot-search.ts
@@ -87,31 +87,31 @@ export class UxdotSearch extends LitElement {
   render() {
     return html`
       <input id="input"
-             placeholder="${ifDefined(this.placeholder)}"
-             role="combobox"
-             aria-label="${ifDefined(this.#ariaLabel)}"
+             @input="${this.#onInput}"
              aria-autocomplete="list"
              aria-controls="listbox"
              aria-expanded="${String(this.expanded)}"
-             @input="${this.#onInput}">
-      <div id="container" tabindex="-1" ?hidden="${!this.expanded}">
+             aria-label="${ifDefined(this.#ariaLabel)}"
+             placeholder="${ifDefined(this.placeholder)}"
+             role="combobox">
+      <div id="container" ?hidden="${!this.expanded}" tabindex="-1">
         <ol id="listbox"
-            role="listbox"
-            aria-labelledby="input">${this.items.map((item, i) => !item ? '' : html`
-          <li role="option"
+            aria-labelledby="input"
+            role="listbox">${this.items.map((item, i) => !item ? '' : html`
+          <li aria-selected="${this.activeIndex === i}"
               data-i="${i}"
-              aria-selected="${this.activeIndex === i}">
+              role="option">
             <a id="i-${i}"
-               tabindex="${this.activeIndex === i ? 0 : -1}"
+               @blur="${this.#onBlur}"
                href="${item.value}"
-               @blur="${this.#onBlur}">${item.label}</a>
+               tabindex="${this.activeIndex === i ? 0 : -1}">${item.label}</a>
           </li>`)}
         </ol>
       </div>
       <rh-button id="button"
+                 @click="${this.#onClickSearch}"
                  aria-controls="listbox"
-                 aria-expanded="${String(this.expanded)}"
-                 @click="${this.#onClickSearch}">Search</rh-button>
+                 aria-expanded="${String(this.expanded)}">Search</rh-button>
     `;
   }
 
diff --git a/uxdot/uxdot-sidenav.ts b/uxdot/uxdot-sidenav.ts
index c26ea1b1ff..cd98204b88 100644
--- a/uxdot/uxdot-sidenav.ts
+++ b/uxdot/uxdot-sidenav.ts
@@ -56,10 +56,10 @@ export class UxdotSideNav extends LitElement {
         <div id="close-button-container">
           <button id="close-button"
               part="close-button"
-              aria-label="Close dialog"
+              @click=${this.toggle}
               @keydown=${this.#onKeydownCloseButton}
-              @click=${this.toggle}>
-            <rh-icon set="ui" icon="close" size="lg"></rh-icon>
+              aria-label="Close dialog">
+            <rh-icon icon="close" set="ui" size="lg"></rh-icon>
           </button>
         </div>
         <nav part="nav" aria-label="Main menu">
diff --git a/uxdot/uxdot-spacer-tokens-table.ts b/uxdot/uxdot-spacer-tokens-table.ts
index e409d895f6..021bfbcef5 100644
--- a/uxdot/uxdot-spacer-tokens-table.ts
+++ b/uxdot/uxdot-spacer-tokens-table.ts
@@ -63,15 +63,15 @@ export class UxdotSpacerTokensTable extends LitElement {
 
     return html`
       <!-- TODO: remove lightdom after implementing auto-load-->
-      <link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
+      <link href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css" rel="stylesheet">
       <rh-table color-palette="${this.colorPalette}">
         <table>
           <caption>${this.caption}</caption>
           <thead>
             <tr>
-              <th scope="col" data-label="Example">Example</th>
-              <th scope="col" data-label="Token">Token</th>
-              <th scope="col" data-label="Description">Description</th>
+              <th data-label="Example" scope="col">Example</th>
+              <th data-label="Token" scope="col">Token</th>
+              <th data-label="Description" scope="col">Description</th>
               <th scope="col"></th>
             </tr>
           </thead>
@@ -98,7 +98,7 @@ export class UxdotSpacerTokensTable extends LitElement {
                 <div>
                   <uxdot-copy-button copy="var(--${token.name}, ${token.$value})"></uxdot-copy-button>
                   <a href="/tokens/space/#${token.name}">
-                    <rh-icon icon="link" set="ui" aria-label="link"></rh-icon>
+                    <rh-icon aria-label="link" icon="link" set="ui"></rh-icon>
                   </a>
                 </div>
               </td>
diff --git a/uxdot/uxdot-toc.ts b/uxdot/uxdot-toc.ts
index b60750f5ff..2d2315eeb5 100644
--- a/uxdot/uxdot-toc.ts
+++ b/uxdot/uxdot-toc.ts
@@ -57,13 +57,13 @@ export class UxdotTocItem extends LitElement {
   render() {
     return html`
       <a href="${this.href}">
-        <svg xmlns="http://www.w3.org/2000/svg"
-             viewBox="0 0 31.56 31.56"
-             role="presentation"
+        <svg aria-hidden="true"
              fill="currentColor"
              focusable="false"
+             role="presentation"
+             viewBox="0 0 31.56 31.56"
              width="16px"
-             aria-hidden="true">
+             xmlns="http://www.w3.org/2000/svg">
           <path d="M15.78 0l-3.1 3.1 10.5 10.49H0v4.38h23.18l-10.5 10.49 3.1 3.1 15.78-15.78L15.78 0z"></path>
         </svg>
         <slot></slot>