From b858eb87acdc8e95833f723fd87d57f337de6d3e Mon Sep 17 00:00:00 2001
From: Diwanshi Gadgil <diwanshipandey@gmail.com>
Date: Tue, 7 May 2024 10:28:21 -0400
Subject: [PATCH 1/8] docs: fix repo-status tag padding in mobile (#1551)

* wrapping rh-tag inside a span to fix padding in mobile

* wraps tagname and status tag inside a span
---
 docs/_plugins/shortcodes/repoStatus.cjs | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/_plugins/shortcodes/repoStatus.cjs b/docs/_plugins/shortcodes/repoStatus.cjs
index 90695662ae..746488e5e2 100644
--- a/docs/_plugins/shortcodes/repoStatus.cjs
+++ b/docs/_plugins/shortcodes/repoStatus.cjs
@@ -250,10 +250,13 @@ function repoStatusTable() {
     return /* html */`
 <tr>
 <td data-label="Name">
-  <a href="/elements/${listItem.name}">${listItem.name}</a>
-  ${listItem.overallStatus !== 'Available' ? `<rh-tag color="${STATUS_LEGEND[listItem.overallStatus].color}" variant="${STATUS_LEGEND[listItem.overallStatus].variant}">
-    ${listItem.overallStatus}${STATUS_LEGEND[listItem.overallStatus].icon}
-  </rh-tag>` : ''}
+  <span>
+    <a href="/elements/${listItem.name}">${listItem.name}</a>
+    ${listItem.overallStatus !== 'Available' ?
+      `<rh-tag color="${STATUS_LEGEND[listItem.overallStatus].color}" variant="${STATUS_LEGEND[listItem.overallStatus].variant}">
+        ${listItem.overallStatus}${STATUS_LEGEND[listItem.overallStatus].icon}
+      </rh-tag>` : ''}
+  </span>
 </td>
 ${listItem.libraries.map(lib => {
     return /* html */`

From c8046bf841fbeb14d0a52c72d27ec2ad3020ca08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?=
 =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?=
 <bennypowers@users.noreply.github.com>
Date: Wed, 8 May 2024 18:43:04 +0300
Subject: [PATCH 2/8] chore: attempt to make builds less flakey (#1559)

use wireit's file cache to hopefully prevent failures like https://github.com/RedHat-UX/red-hat-design-system/actions/runs/8988133555/job/24688276034
---
 package.json | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 42c6d29dce..0417ff83cb 100644
--- a/package.json
+++ b/package.json
@@ -158,7 +158,14 @@
       ]
     },
     "bundle": {
-      "command": "node scripts/bundle.js"
+      "command": "node scripts/bundle.js",
+      "files": [
+        "elements/**/*.{ts,js,map}",
+        "elements/**/*.css"
+      ],
+      "output": [
+        "rhds.min.js"
+      ]
     },
     "analyze": {
       "command": "cem analyze && node scripts/cem-tokens.js && node scripts/system-tokens.js",

From 727c7994ebaa787f39961c255131aeced480a7f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?=
 =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?=
 <bennypowers@users.noreply.github.com>
Date: Thu, 9 May 2024 15:44:24 +0300
Subject: [PATCH 3/8] fix(card): header font (#1557)

* fix(card): header fonts

Closes #1516
Closes #1497

* docs(card): demo for image with heading

* docs: changeset

* fix: review comments

* docs: review comments
---
 .changeset/shy-houses-arrive.md       |   4 +
 elements/rh-card/demo/variants.html   | 264 +++++++++++++-------------
 elements/rh-card/rh-card.css          |  12 +-
 elements/rh-card/test/rh-card.spec.ts |  74 ++++----
 4 files changed, 187 insertions(+), 167 deletions(-)
 create mode 100644 .changeset/shy-houses-arrive.md

diff --git a/.changeset/shy-houses-arrive.md b/.changeset/shy-houses-arrive.md
new file mode 100644
index 0000000000..3cf7b3bed1
--- /dev/null
+++ b/.changeset/shy-houses-arrive.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: applied heading font to card headings
diff --git a/elements/rh-card/demo/variants.html b/elements/rh-card/demo/variants.html
index 9cea4f5ec8..e2c1a727e0 100644
--- a/elements/rh-card/demo/variants.html
+++ b/elements/rh-card/demo/variants.html
@@ -1,128 +1,130 @@
-<rh-card>
-  <h2 slot="header">Default card, slotted content and footer</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Nullam eleifend elit sed est egestas, a sollicitudin mauris
-    tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
-    felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card>
-  <h2 slot="header">Slotted title, content, and footer</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Nullam eleifend elit sed est egestas, a sollicitudin mauris
-    tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
-    felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card color-palette="lighter">
-  <h2 slot="header">Lighter color palette</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Nullam eleifend elit sed est egestas, a sollicitudin mauris
-    tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
-    felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card color-palette="lighter" class="bar">
-  <h2 slot="header">Lighter color palette and custom header</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Nullam eleifend elit sed est egestas, a sollicitudin mauris
-    tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
-    felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="bar">
-  <h2 slot="header">Custom header</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Nullam eleifend elit sed est egestas, a sollicitudin mauris
-    tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
-    felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="center">
-  <h2 slot="header">Center aligned content, footer</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Nullam eleifend elit sed est egestas, a sollicitudin mauris
-    tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
-    felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="end">
-  <h2 slot="header">End aligned content, footer</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Nullam eleifend elit sed est egestas, a sollicitudin mauris
-    tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
-    felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="full">
-  <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+<section id="card-variants">
+  <rh-card>
+    <h2 slot="header">Default card, slotted content and footer</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card>
+    <h2 slot="header">Slotted title, content, and footer</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <h2 slot="header">Lighter color palette</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter" class="bar">
+    <h2 slot="header">Lighter color palette and custom header</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="bar">
+    <h2 slot="header">Custom header</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="center">
+    <h2 slot="header">Center aligned content, footer</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="end">
+    <h2 slot="header">End aligned content, footer</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="image">
+    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+        <title>A placeholder image in a card header slot</title>
+        <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
+        <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
+        <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
+      </svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="image">
+    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+        <title>A placeholder image in a card header slot</title>
+        <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
+        <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
+        <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
+      </svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="image heading">
+    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
       <title>A placeholder image in a card header slot</title>
       <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
       <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
       <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
-    </svg> 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Nullam eleifend elit sed est egestas, a sollicitudin mauris
-    tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
-    felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="full">
-  <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
-      <title>A placeholder image in a card header slot</title>
-      <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
-      <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
-      <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
-    </svg> 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Nullam eleifend elit sed est egestas, a sollicitudin mauris
-    tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
-    felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="full">
-  <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
-      <title>A placeholder image in a card header slot</title>
-      <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
-      <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
-      <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
-    </svg> 
-  <h2 slot="header">Card with slotted image header. Full width image.</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Nullam eleifend elit sed est egestas, a sollicitudin mauris
-    tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
-    felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
+    </svg>
+    <h2>Card with slotted image header. Full width image.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nullam eleifend elit sed est egestas, a sollicitudin mauris
+      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+</section>
 
 <script type="module">
   import '@rhds/elements/rh-card/rh-card.js';
@@ -130,7 +132,7 @@ <h2 slot="header">Card with slotted image header. Full width image.</h2>
 </script>
 
 <style>
-  [data-demo="rh-card"] {
+  #card-variants {
     padding: 0.5em;
     display: grid;
     gap: 1em;
@@ -151,25 +153,27 @@ <h2 slot="header">Card with slotted image header. Full width image.</h2>
       font-weight: var(--rh-font-weight-heading-regular, 300);
       font-size: var(--rh-font-size-body-text-md, 1rem);
     }
-    &::part(body) {
-      /* margin: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px); */
-    }
   }
 
-  rh-card.full {
+  rh-card.image {
     &::part(header) {
       margin: 0;
     }
 
-    & :is(h1, h2, h3, h4, h5, h6)[slot="header"] {
-      padding-inline: var(--rh-space-xl, 24px);
-    }
-
     & img {
       display: block;
       min-width: 100%;
       height: auto;
     }
+
+    &.heading {
+      & h2 {
+        font-weight: var(--rh-font-weight-heading-medium, 500);
+        font-size: var(--rh-font-size-heading-md, 1.75rem);
+        margin-block-start: 0;
+        margin-block-end: var(--rh-space-lg, 16px);
+      }
+    }
   }
 
   rh-card.center::part(body),
diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
index 054d84d47a..b0edf1f367 100644
--- a/elements/rh-card/rh-card.css
+++ b/elements/rh-card/rh-card.css
@@ -10,14 +10,9 @@ article {
 }
 
 ::slotted(*) {
-  font-family: inherit !important;
   line-height: inherit !important;
 }
 
-::slotted(:is(h1, h2, h3, h4, h5, h6)) {
-  font-size: inherit !important;
-}
-
 #container {
   align-self: stretch;
   display: flex;
@@ -58,11 +53,17 @@ article {
   margin-inline: var(--rh-space-xl, 24px);
 }
 
+#header ::slotted(:is(h1, h2, h3, h4, h5, h6)),
+#body ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+  font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
+}
+
 #header {
   display: flex;
   flex-direction: column;
   gap: var(--rh-space-lg, 16px);
   box-sizing: border-box;
+  font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
   font-size: var(--rh-card-header-font-size, var(--rh-font-size-heading-sm, 1.5rem));
   margin-block-start: var(--rh-space-lg, 16px);
 }
@@ -80,6 +81,7 @@ article {
 #header ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
   margin: unset;
   font-weight: var(--rh-font-weight-body-text-medium, 500);
+  font-size: inherit;
 }
 
 #body ::slotted(:not([slot]):first-child) {
diff --git a/elements/rh-card/test/rh-card.spec.ts b/elements/rh-card/test/rh-card.spec.ts
index 061d5af488..5cf855e84a 100644
--- a/elements/rh-card/test/rh-card.spec.ts
+++ b/elements/rh-card/test/rh-card.spec.ts
@@ -1,76 +1,86 @@
 import { expect, html, fixture } from '@open-wc/testing';
 import { RhCard } from '../rh-card.js';
 
-const defaultTemplate = html`
-  <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>
-  </rh-card>
-`;
-
-const noSlottedHeaderTemplate = html`
-  <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>
-  </rh-card>
-`;
+import { tokens } from '@rhds/tokens/meta.js';
 
 const shouldUpgrade = (element: unknown) => {
   const klass = customElements.get('rh-card');
   expect(element).to.be.an.instanceOf(klass).and.to.be.an.instanceOf(RhCard);
 };
 
-const checkFontSize = (element: HTMLElement, fontSize: string) => {
-  const styles = getComputedStyle(element);
-  expect(styles.getPropertyValue('font-size')).to.equal(fontSize);
+const remToPx = remOrPx => {
+  if (remOrPx.endsWith('px')) {
+    return remOrPx;
+  } else {
+    return `${parseFloat(remOrPx) * 16}px`;
+  }
 };
 
 describe('<rh-card>', function() {
   describe('default element', function() {
     let element: RhCard;
     beforeEach(async function() {
-      element = await fixture<RhCard>(defaultTemplate);
+      element = await fixture<RhCard>(html`
+        <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>
+        </rh-card>
+      `);
     });
 
     it('should upgrade', async function() {
       shouldUpgrade(element);
     });
 
-    describe('header', function() {
-      it('should default to a font-size of 24px', async function() {
-        checkFontSize(element.querySelector('h3') as HTMLElement, '24px');
+    describe('heading', function() {
+      it('should have font-size --rh-font-size-heading-sm', async function() {
+        expect(getComputedStyle(element.querySelector('h3')!).getPropertyValue('font-size'))
+            .to.equal(remToPx(tokens.get('--rh-font-size-heading-sm').$value));
       });
     });
 
     describe('body', function() {
-      it('should default to a font-size of 16px', async function() {
-        checkFontSize(element.querySelector('p') as HTMLElement, '16px');
+      it('should have font-size --rh-font-size-body-text-md', async function() {
+        expect(getComputedStyle(element.querySelector('p')!).getPropertyValue('font-size'))
+            .to.equal(remToPx(tokens.get('--rh-font-size-body-text-md').$value));
       });
     });
   });
 
   describe('no slotted header element', function() {
-    let noSlottedHeaderElement: RhCard;
+    let element: RhCard;
 
     beforeEach(async function() {
-      noSlottedHeaderElement = await fixture<RhCard>(noSlottedHeaderTemplate);
+      element = await fixture<RhCard>(html`
+        <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>
+        </rh-card>
+      `);
     });
 
     it('should upgrade', async function() {
-      shouldUpgrade(noSlottedHeaderElement);
+      shouldUpgrade(element);
     });
 
-    describe('header', function() {
-      it('should default to a font-size of 16', async function() {
-        checkFontSize(noSlottedHeaderElement.querySelector('h3') as HTMLElement, '16px');
+    describe('heading in body', function() {
+      it('should have initial font-size', function() {
+        const expectedEl = document.createElement('h3');
+        expectedEl.textContent = 'a';
+        document.body.append(expectedEl);
+        const expected = getComputedStyle(expectedEl).getPropertyValue('font-size');
+        expectedEl.remove();
+        expect(getComputedStyle(element.querySelector('h3')!).getPropertyValue('font-size'))
+            .to.equal(expected);
       });
     });
 
     describe('body', function() {
-      it('should default to a font-size of 16px', async function() {
-        checkFontSize(noSlottedHeaderElement.querySelector('p') as HTMLElement, '16px');
+      it('should have font-size --rh-font-size-body-text-md', function() {
+        expect(getComputedStyle(element.querySelector('p')!).getPropertyValue('font-size'))
+            .to.equal(remToPx(tokens.get('--rh-font-size-body-text-md').$value));
       });
     });
   });

From 2f1324e88da7dfa0651b98ef80c08b9b8003fa4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?=
 =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?=
 <bennypowers@users.noreply.github.com>
Date: Thu, 9 May 2024 15:48:28 +0300
Subject: [PATCH 4/8] fix(card): remove landmarks (#1560)

---
 .changeset/wet-feet-pull.md |  4 ++++
 elements/rh-card/rh-card.ts | 22 ++++++++++++----------
 2 files changed, 16 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/wet-feet-pull.md

diff --git a/.changeset/wet-feet-pull.md b/.changeset/wet-feet-pull.md
new file mode 100644
index 0000000000..1c351913b7
--- /dev/null
+++ b/.changeset/wet-feet-pull.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: removes landmark semantics from card, simplifying page navigation for screen reader users
diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts
index 377b054a83..a91026f5a6 100644
--- a/elements/rh-card/rh-card.ts
+++ b/elements/rh-card/rh-card.ts
@@ -56,23 +56,25 @@ export class RhCard extends LitElement {
   override render() {
     const { on = '', colorPalette = '' } = this;
     return html`
-     <article part="container" id="container" class="${classMap({ [on]: !!on, [colorPalette]: !!colorPalette })}">
-        <header id="header"
-                part="header"
-                class="${classMap({ empty: !this.#slots.hasSlotted('header') })}">
+     <div id="container"
+          part="container"
+          class="${classMap({ [on]: !!on, [colorPalette]: !!colorPalette })}">
+        <div id="header"
+             part="header"
+             class="${classMap({ empty: !this.#slots.hasSlotted('header') })}">
           <slot name="header"></slot>
-        </header>
+        </div>
         <div id="body"
              part="body"
              class="${classMap({ empty: !this.querySelector(':not([slot])') })}">
           <slot></slot>
         </div>
-        <footer id="footer"
-                part="footer"
-                class="${classMap({ empty: !this.#slots.hasSlotted('footer') })}">
+        <div id="footer"
+             part="footer"
+             class="${classMap({ empty: !this.#slots.hasSlotted('footer') })}">
           <slot name="footer"></slot>
-        </footer>
-      </article>
+        </div>
+      </div>
     `;
   }
 }

From 1b204642370bf2aeb7c2a3afc6595eb87a30af7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?=
 =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?=
 <bennypowers@users.noreply.github.com>
Date: Thu, 9 May 2024 20:00:04 +0300
Subject: [PATCH 5/8] fix: ship react wrappers (#1563)

Closes #1562
---
 .changeset/curly-ways-march.md | 4 ++++
 package.json                   | 1 +
 2 files changed, 5 insertions(+)
 create mode 100644 .changeset/curly-ways-march.md

diff --git a/.changeset/curly-ways-march.md b/.changeset/curly-ways-march.md
new file mode 100644
index 0000000000..c81ecdc195
--- /dev/null
+++ b/.changeset/curly-ways-march.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+React: add generated react wrappers to NPM package
diff --git a/package.json b/package.json
index 0417ff83cb..315874fe27 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "!elements/*/docs/**/*.{js,html,css,md}",
     "!elements/*/demo/**/*.{js,html,css,md}",
     "!elements/*/test/*.{spec,e2e}.{ts,d.ts}",
+    "react/**/*",
     "lib/**/*.{js,md,map,css,svg,md,html,txt,d.ts}",
     "custom-elements.json",
     "rhds.min*"

From 434b8c8f638e20e6acdd8a51af65bbf7e388d194 Mon Sep 17 00:00:00 2001
From: Marionne Patel <95588923+marionnegp@users.noreply.github.com>
Date: Thu, 9 May 2024 17:13:56 -0400
Subject: [PATCH 6/8] docs(get started): add links to accessibility docs
 (#1553)

Co-authored-by: Adam Johnson <adam.b.johnson1@gmail.com>
---
 docs/get-started/designers.md        | 4 ++++
 docs/get-started/developers/index.md | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/get-started/designers.md b/docs/get-started/designers.md
index 5fa0e3fc87..be53c9d084 100644
--- a/docs/get-started/designers.md
+++ b/docs/get-started/designers.md
@@ -40,6 +40,10 @@ Our design system libraries and the documentation website offer assets and guida
         <h3>Elements and patterns</h3>
         <p>Our libraries include <a href="/elements">elements</a> and <a href="/patterns">patterns</a> you can use to create digital experiences.</p>
     </div>
+    <div>
+        <h3>Accessibility</h3>
+        <p><a href="/accessibility/design/">Designer-specific guidelines</a> equip you with the information to create inclusive digital experiences.</p>
+    </div>
 </div>
 
 ## Access Figma
diff --git a/docs/get-started/developers/index.md b/docs/get-started/developers/index.md
index 462f43a14b..d25fdc1ec7 100644
--- a/docs/get-started/developers/index.md
+++ b/docs/get-started/developers/index.md
@@ -32,7 +32,7 @@ Our design system libraries and the documentation website offer assets and guida
     </div>
     <div>
         <h3>Documentation</h3>
-        <p>This website offers guidance about how to use our <a href="elements">elements</a> and <a href="patterns">patterns</a> correctly.</p>
+        <p>This website offers guidance about how to use our <a href="elements">elements</a> and <a href="patterns">patterns</a>. Learn how to apply them accessibily with <a href="/accessibility/development/">developer-specific guidelines</a>.</p>
     </div>
     <div>
         <h3>GitHub repositories</h3>

From d52aad6ec1d5e4d2e1a5fabbb73f73410bbf7ef8 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Sun, 12 May 2024 02:22:05 -0400
Subject: [PATCH 7/8] fix(cta): add lightdom css (#1495)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: draft release notes

* fix(tabs): improve long tab content with container queries (#1411)

* fix(tabs): improve long tab content with container queries

* chore(tabs): add changeset

* docs(tabs): update long tab content

* docs: update .changeset/silver-hornets-cry.md

---------

Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>

* fix(cta): add lightdom css

* chore(cta): add changeset

* fix(cta): lint

* chore: remove unexpected changeset

* fix(cta): include `-shim` extension to denote optional file

* chore(cta): lint

* chore(call-to-action): update changeset

---------

Co-authored-by: Benny Powers <web@bennypowers.com>
Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
---
 .changeset/rh-cta-lightdom-shim.md            |   5 +
 docs/_includes/layout-base.njk                |   1 +
 .../demo/color-context-with-lightdom-css.html |  15 ++
 elements/rh-cta/demo/rh-cta.html              |   1 -
 elements/rh-cta/demo/right-to-left.html       |   1 -
 elements/rh-cta/rh-cta-lightdom-shim.css      | 208 ++++++++++++++++++
 6 files changed, 229 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/rh-cta-lightdom-shim.md
 create mode 100644 elements/rh-cta/demo/color-context-with-lightdom-css.html
 create mode 100644 elements/rh-cta/rh-cta-lightdom-shim.css

diff --git a/.changeset/rh-cta-lightdom-shim.md b/.changeset/rh-cta-lightdom-shim.md
new file mode 100644
index 0000000000..e44cf02c78
--- /dev/null
+++ b/.changeset/rh-cta-lightdom-shim.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-cta>`: Added `rh-cta-lightdom-shim.css` as an optional file to help reduce layout shift before element is defined, where declarative shadow DOM is not an option.
diff --git a/docs/_includes/layout-base.njk b/docs/_includes/layout-base.njk
index 32f1f44865..ed6a2f9847 100644
--- a/docs/_includes/layout-base.njk
+++ b/docs/_includes/layout-base.njk
@@ -26,6 +26,7 @@
   <link rel="stylesheet" href="{{ '/assets/prism.css' | url }}" >
   <link rel="stylesheet" href="{{ '/assets/rhds.min.css' | url }}">
   <link rel="stylesheet" href="{{ '/assets/packages/@rhds/elements/elements/rh-footer/rh-footer-lightdom.css' | url }}">
+  <link rel="stylesheet" href="{{ '/assets/packages/@rhds/elements/elements/rh-cta/rh-cta-lightdom-shim.css' | url }}">
   <link rel="stylesheet" href="{{ '/assets/packages/@rhds/elements/elements/rh-subnav/rh-subnav-lightdom.css' | url }}">
 
   {% sassFile false %}
diff --git a/elements/rh-cta/demo/color-context-with-lightdom-css.html b/elements/rh-cta/demo/color-context-with-lightdom-css.html
new file mode 100644
index 0000000000..75bc09c679
--- /dev/null
+++ b/elements/rh-cta/demo/color-context-with-lightdom-css.html
@@ -0,0 +1,15 @@
+<rh-context-demo>
+  <rh-cta><a href="#default">Default</a></rh-cta>
+  <rh-cta icon="play-circle"><a href="#default-video">Default Video</a></rh-cta>
+  <rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
+  <rh-cta variant="primary" icon="play-circle"><a href="#primary-video">Video</a></rh-cta>
+  <rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
+  <rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
+  <rh-cta variant="brick" icon="play-circle"><a href="#brick-video">Brick Video</a></rh-cta>
+</rh-context-demo>
+
+<link rel="stylesheet" href="../rh-cta-lightdom-shim.css">
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+</script>
diff --git a/elements/rh-cta/demo/rh-cta.html b/elements/rh-cta/demo/rh-cta.html
index 848d5a6659..1aac713fd4 100644
--- a/elements/rh-cta/demo/rh-cta.html
+++ b/elements/rh-cta/demo/rh-cta.html
@@ -2,7 +2,6 @@
   <a href="#">Call to Action</a>
 </rh-cta>
 
-
 <script type="module">
   import '@rhds/elements/rh-cta/rh-cta.js';
 </script>
diff --git a/elements/rh-cta/demo/right-to-left.html b/elements/rh-cta/demo/right-to-left.html
index ddb655c615..f267855e2d 100644
--- a/elements/rh-cta/demo/right-to-left.html
+++ b/elements/rh-cta/demo/right-to-left.html
@@ -89,7 +89,6 @@ <h2>Deep Shadow RTL</h2>
   </shadow-root>
 </section>
 
-
 <style>
 shadow-root:not(:defined) {
   display: block;
diff --git a/elements/rh-cta/rh-cta-lightdom-shim.css b/elements/rh-cta/rh-cta-lightdom-shim.css
new file mode 100644
index 0000000000..dc83fda97a
--- /dev/null
+++ b/elements/rh-cta/rh-cta-lightdom-shim.css
@@ -0,0 +1,208 @@
+rh-cta:not(:defined) {
+  width: fit-content !important;
+  display: inline-flex !important;
+  color: var(--rh-cta-color);
+  font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
+  font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+  font-weight: 600; /* WARNING: not a token value */
+  line-height: var(--rh-line-height-body-text, 1.5);
+  background-color: var(--rh-cta-background-color);
+  border-color: var(--rh-cta-border-color, transparent);
+  border-radius: var(--rh-border-radius-default, 3px);
+  border-width: var(--rh-border-width-sm, 1px);
+}
+
+rh-cta:not(:defined, [variant]) {
+  --rh-cta-background-color: transparent;
+  --rh-cta-border-color: transparent;
+  --rh-cta-color: var(--rh-color-interactive-blue-darker, #0066cc);
+  --rh-cta-hover-background-color: transparent;
+  --rh-cta-hover-border-color: transparent;
+  --rh-cta-hover-inner-border-color: transparent;
+  --rh-cta-hover-color: var(--rh-color-interactive-blue-darkest, #003366);
+  --rh-cta-hover-text-decoration: none;
+  --rh-cta-focus-background-color: transparent;
+  --rh-cta-focus-container-background-color: #0066cc1a;
+  --rh-cta-focus-border-color: transparent;
+  --rh-cta-focus-inner-border-color: transparent;
+  --rh-cta-focus-color: var(--rh-color-interactive-blue-darker, #0066cc);
+  --rh-cta-focus-text-decoration: none;
+  --rh-cta-active-container-background-color: #0066cc1a;
+  --rh-cta-active-inner-border-color: transparent;
+  --rh-cta-active-text-decoration: none;
+}
+
+[data-rh-theme^="dark"] rh-cta:not(:defined, [variant]),
+[color-palette^="dark"] rh-cta:not(:defined, [variant]),
+rh-cta[color-palette^="dark"]:not(:defined, [variant]) {
+  --rh-cta-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
+  --rh-cta-hover-color: var(--rh-color-interactive-blue-lightest, #b9dafc);
+
+  /* --rh-color-interactive-blue-lighter with 25% opacity */
+  --rh-cta-focus-container-background-color: #73bcf740;
+  --rh-cta-focus-border-color: transparent;
+  --rh-cta-focus-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
+  --rh-cta-focus-inner-border-color: transparent;
+  --rh-cta-focus-text-decoration: none;
+
+  /* --rh-color-interactive-blue-lighter with 25% opacity */
+  --rh-cta-active-container-background-color: #73bcf740;
+  --rh-cta-active-text-decoration: none;
+}
+
+rh-cta:not(:defined):focus-within {
+  border-color: var(--rh-cta-focus-border-color);
+  background-color:
+    var(
+        --rh-cta-focus-container-background-color,
+        var(--rh-cta-focus-background-color)
+      );
+
+  --rh-cta-color: var(--rh-cta-focus-color);
+  --rh-cta-text-decoration: var(--rh-cta-focus-text-decoration);
+}
+
+rh-cta:not(:defined):hover {
+  color: var(--rh-cta-hover-color);
+  border-color: var(--rh-cta-hover-border-color);
+  background-color: var(--rh-cta-hover-background-color);
+
+  --rh-cta-text-decoration: var(--rh-cta-hover-text-decoration);
+}
+
+rh-cta:not(:defined):active {
+  background-color: var(--rh-cta-active-background-color);
+}
+
+rh-cta[variant="primary"]:not(:defined) {
+  border-style: solid;
+
+  --rh-cta-background-color: var(--rh-color-brand-red-on-light, #ee0000);
+  --rh-cta-border-color: var(--rh-color-brand-red-on-light, #ee0000);
+  --rh-cta-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --rh-cta-hover-background-color: var(--rh-color-brand-red-dark, #a60000);
+  --rh-cta-hover-border-color: var(--rh-color-brand-red-dark, #a60000);
+  --rh-cta-hover-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --rh-cta-focus-background-color: var(--rh-color-brand-red-on-light, #ee0000);
+  --rh-cta-focus-border-color: var(--rh-color-brand-red-on-light, #ee0000);
+  --rh-cta-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --rh-cta-focus-inner-border-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --rh-cta-active-background-color: var(--rh-color-brand-red-dark, #a60000);
+  --rh-cta-active-inner-border-color: var(--rh-color-text-primary-on-dark, #ffffff);
+}
+
+[data-rh-theme^="dark"] rh-cta[variant="primary"]:not(:defined),
+[color-palette^="dark"] rh-cta[variant="primary"]:not(:defined),
+rh-cta[variant="primary"][color-palette^="dark"]:not(:defined) {
+  --rh-cta-hover-border-color: var(--rh-color-brand-red-dark, #a60000);
+}
+
+rh-cta[variant="secondary"]:not(:defined) {
+  border-style: solid;
+
+  --rh-cta-background-color: transparent;
+  --rh-cta-border-color: var(--rh-color-border-strong-on-light, #151515);
+  --rh-cta-color: var(--rh-color-text-primary-on-light, #151515);
+  --rh-cta-hover-background-color: var(--rh-color-surface-darkest, #151515);
+  --rh-cta-hover-border-color: var(--rh-color-border-strong-on-light, #151515);
+  --rh-cta-hover-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --rh-cta-focus-background-color: var(--rh-color-surface-lighter, #f2f2f2);
+  --rh-cta-focus-border-color: var(--rh-color-border-strong-on-light, #151515);
+  --rh-cta-focus-color: var(--rh-color-surface-darkest, #151515);
+  --rh-cta-focus-inner-border-color: var(--rh-color-border-strong-on-light, #151515);
+  --rh-cta-active-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --rh-cta-active-background-color: var(--rh-color-border-strong-on-light, #151515);
+  --rh-cta-active-inner-border-color: var(--rh-color-surface-light, #e0e0e0);
+}
+
+[data-rh-them^="dark"] rh-cta[variant="secondary"]:not(:defined),
+[color-palette^="dark"] rh-cta[variant="secondary"]:not(:defined),
+rh-cta[variant="secondary"][color-palette^="dark"]:not(:defined) {
+  --rh-cta-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
+  --rh-cta-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --rh-cta-hover-background-color: var(--rh-color-surface-lightest, #ffffff);
+  --rh-cta-hover-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
+  --rh-cta-hover-color: var(--rh-color-text-primary-on-light, #151515);
+  --rh-cta-focus-background-color: var(--rh-color-surface-dark, #383838);
+  --rh-cta-focus-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
+  --rh-cta-focus-inner-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
+  --rh-cta-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --rh-cta-active-color: var(--rh-color-text-primary-on-light, #151515);
+  --rh-cta-active-background-color: var(--rh-color-surface-lightest, #ffffff);
+  --rh-cta-active-inner-border-color: var(--rh-color-border-strong-on-light, #151515);
+}
+
+rh-cta[variant="brick"]:not(:defined) {
+  border-style: solid;
+  font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
+  font-weight: var(--rh-font-weight-body-text-regular, 400);
+
+  --rh-cta-background-color: transparent;
+  --rh-cta-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
+  --rh-cta-color: var(--rh-color-interactive-blue-darker, #0066cc);
+  --rh-cta-hover-background-color: var(--rh-color-surface-lighter, #f2f2f2);
+  --rh-cta-hover-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
+  --rh-cta-hover-color: var(--rh-color-interactive-blue-darkest, #003366);
+  --rh-cta-hover-text-decoration: underline;
+  --rh-cta-focus-color: var(--rh-color-interactive-blue-darker, #0066cc);
+  --rh-cta-focus-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
+  --rh-cta-focus-inner-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
+  --rh-cta-focus-text-decoration: none;
+  --rh-cta-active-background-color: var(--rh-color-surface-lighter, #f2f2f2);
+  --rh-cta-active-inner-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
+  --rh-cta-active-text-decoration: underline;
+}
+
+[data-rh-theme^="dark"] rh-cta[variant="brick"]:not(:defined),
+[color-palette^="dark"] rh-cta[variant="brick"]:not(:defined),
+rh-cta[variant="brick"][color-palette^="dark"]:not(:defined) {
+  --rh-cta-border-color: var(--rh-color-border-subtle-on-dark, #707070);
+  --rh-cta-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
+  --rh-cta-hover-background-color: var(--rh-color-surface-darker, #1f1f1f);
+  --rh-cta-hover-border-color: var(--rh-color-border-subtle-on-dark, #707070);
+  --rh-cta-hover-color: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --rh-cta-hover-text-decoration: underline;
+  --rh-cta-focus-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
+  --rh-cta-focus-border-color: var(--rh-color-border-subtle-on-dark, #707070);
+  --rh-cta-focus-inner-border-color: var(--rh-color-border-subtle-on-dark, #707070);
+  --rh-cta-focus-text-decoration: none;
+  --rh-cta-active-background-color: var(--rh-color-surface-darker, #1f1f1f);
+  --rh-cta-active-inner-border-color: var(--rh-color-border-subtle-on-dark, #707070);
+  --rh-cta-active-text-decoration: underline;
+}
+
+rh-cta:not(:defined) * {
+  display: inline !important;
+  border: none !important;
+  background-color: transparent !important;
+  text-decoration: var(--rh-cta-text-decoration);
+  color: inherit !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+}
+
+rh-cta:not(:defined) *:focus {
+  outline: none !important;
+}
+
+rh-cta[variant]:not(:defined) * {
+  padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px) !important;
+}
+
+rh-cta[variant$="ary"]:not(:defined) * {
+  padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px) !important;
+}
+
+rh-cta[variant="primary"]:not(:defined) *:focus {
+  outline:
+    var(
+        --rh-border-width-sm,
+        1px
+      ) solid var(
+        --rh-color-text-primary-on-dark,
+        #ffffff
+      ) !important;
+  outline-offset: -2px;
+}

From cb7b0e3df2fa58b88a66af744b0b8a06edd95d35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?=
 =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?=
 <bennypowers@users.noreply.github.com>
Date: Sun, 12 May 2024 09:26:51 +0300
Subject: [PATCH 8/8] chore: changeset validating github action (#1500)

* chore: changeset validating github action

* test: Create metal-birds-share.md

* style: lint

---------

Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com>
---
 .changeset/metal-birds-share.md   |  5 +++
 .github/workflows/validate-pr.yml | 25 ++++++++++++
 scripts/validate-prs.js           | 67 +++++++++++++++++++++++++++++++
 3 files changed, 97 insertions(+)
 create mode 100644 .changeset/metal-birds-share.md
 create mode 100644 .github/workflows/validate-pr.yml
 create mode 100644 scripts/validate-prs.js

diff --git a/.changeset/metal-birds-share.md b/.changeset/metal-birds-share.md
new file mode 100644
index 0000000000..5dde4075a1
--- /dev/null
+++ b/.changeset/metal-birds-share.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": major
+---
+DELETE THIS FILE BEFORE MERGING
+chore: changeset validating github action
diff --git a/.github/workflows/validate-pr.yml b/.github/workflows/validate-pr.yml
new file mode 100644
index 0000000000..3bb682f067
--- /dev/null
+++ b/.github/workflows/validate-pr.yml
@@ -0,0 +1,25 @@
+name: Validate PRs
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - edited
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+      - run: npm i semantic-release @changesets/read --prefer-offline
+      - uses: actions/github-script@v7
+        with:
+          script: |
+            const { validate } = await import('${{ github.workspace }}/scripts/validate-prs.js');
+            await validate({ context });
diff --git a/scripts/validate-prs.js b/scripts/validate-prs.js
new file mode 100644
index 0000000000..2ad2fa5b21
--- /dev/null
+++ b/scripts/validate-prs.js
@@ -0,0 +1,67 @@
+import { default as read } from '@changesets/read';
+import semanticRelease from 'semantic-release';
+
+/** @typedef {'major'|'minor'|'patch'} ReleaseType */
+
+/**
+ * named capture group 1 `commitType`:
+ * > Either `feat`, `fix`, `chore`, `docs`, or `style`
+ * **ANY** (_>= 0x_)
+ * named capture group 2 `bang`:
+ * > `!`
+ */
+const COMMIT_TYPE_RE = /(?<commitType>feat|fix|chore|docs|style).*(?<bang>!)/;
+
+async function getReleaseType(title, mergeType) {
+  if (mergeType === 'rebase') {
+    const result = await semanticRelease({
+      dryRun: true,
+      branches: ['main'],
+    }) ?? {};
+    /** @type {ReleaseType} */
+    const type = result?.nextRelease?.type;
+    return type;
+  } else {
+    const { commitType, bang } = title.match(COMMIT_TYPE_RE)?.groups ?? {};
+    if (bang) {
+      return 'major';
+    } else {
+      switch (commitType) {
+        case 'feat': return 'minor';
+        case 'fix': return 'patch';
+      }
+    }
+  }
+}
+
+export async function validate({ context }) {
+  const { base, title, auto_merge: autoMerge } = context.payload.pull_request;
+
+  if (base.ref.startsWith('staging/')) {
+    return true;
+  }
+
+  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:
+      case 'major':
+        return greatest;
+      case 'minor':
+        return type === 'major' ? type : greatest;
+      case 'patch':
+        return (type === 'major' || type === 'minor') ? type : greatest;
+    }
+  }, null);
+
+  if (!release && type?.match(/m(aj|in)or/)) {
+    throw new Error(`PR conventional commit title has type (${type}) but no changesets were detected.`);
+  }
+
+  if (type !== release) {
+    throw new Error(`PR conventional commit title type (${type}) does not match release type (${release}).`);
+  }
+}