diff --git a/docs/foundations/color/usage.md b/docs/foundations/color/usage.md
index c809785f63..2153e9622d 100644
--- a/docs/foundations/color/usage.md
+++ b/docs/foundations/color/usage.md
@@ -10,16 +10,16 @@ subnav:
   collection: sortedColor
   order: 2
 permalink: /foundations/color/usage/index.html
-importElements: 
-  - rh-alert
-  - rh-tag
-  - rh-table
 ---
 
-<script type="module" src="/assets/javascript/elements/uxdot-best-practice.js"></script>
-
-<link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
+<script data-helmet type="module">
+  import '/assets/javascript/elements/uxdot-best-practice.js';
+  import '@rhds/elements/rh-alert/rh-alert.js';
+  import '@rhds/elements/rh-tag/rh-tag.js';
+  import '@rhds/elements/rh-table/rh-table.js';
+</script>
 
+<link data-helmet rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
 
 ## Using color
 
@@ -39,7 +39,7 @@ To learn more about our Red Hat red color, go to the [Brand
 standards](https://www.redhat.com/en/about/brand/standards) website.
 
 <rh-alert state="warning">
- <h4 slot="header">Usage Warning</h4>
+ <h4 slot="header">Usage warning</h4>
  <p>Do not apply the Red Hat red color to text in dark environments unless
 it meets <a href="https://www.w3.org/WAI/WCAG21/Understanding/">WCAG 2.1 AA</a>
 requirements.</p>
@@ -173,44 +173,20 @@ patterns like [alerts](/elements/alert), [badges](/elements/badge),
 
 <rh-alert state="warning">
   <h4 slot="header">Usage Warning</h4>
-  <p>The red-orange color is reserved for danger or error states, do not use it anywhere else.</p>
+  <p>The red-orange color is reserved for danger or error states. Do not use it anywhere else.</p>
 </rh-alert>
 
 <rh-table>
-  <table>
-    <thead>
-      <tr>
-        <th scope="col" data-label="Status">Status</th>
-        <th scope="col" data-label="Use case">Use case</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td data-label="Status">Note/Tip</td>
-        <td data-label="Use case">Use purple to communicate helpful or important information.</td>
-      </tr>
-      <tr>
-        <td data-label="Status">Neutral</td>
-        <td data-label="Use case">Use gray to communicate information that will have no impact on a user.</td>
-      </tr>
-      <tr>
-        <td data-label="Status">Success</td>
-        <td data-label="Use case">Use green to communicate a success state.</td>
-      </tr>
-      <tr>
-        <td data-label="Status">Caution</td>
-        <td data-label="Use case">Use yellow to communicate that an issue can be avoided.</td>
-      </tr>
-      <tr>
-        <td data-label="Status">Warning</td>
-        <td data-label="Use case">Use orange to communicate that a destructive action might occur if an issue is not resolved.</td>
-      </tr>
-      <tr>
-        <td data-label="Status">Danger/Error</td>
-        <td data-label="Use case">Use red-orange to communicate a destructive action or critical error.</td>
-      </tr>
-    </tbody>
-  </table>
+
+| Status  | Use case                                                                                                        |
+| ------- | --------------------------------------------------------------------------------------------------------------- |
+| Neutral | Use gray to communicate information that will have no impact on a user.                                         |
+| Info    | Use purple to communicate helpful or important information.<br>*Note:* "Info" was previously called "note/tip." |
+| Success | Use green to communicate a success state.                                                                       |
+| Warning | Use yellow to communicate that a destructive action might occur if an issue is not resolved.                    |
+| Caution | Use orange to communicate that an issue can be avoided.                                                         |
+| Danger  | Use red-orange to communicate a destructive action or critical error.                                           |
+
 </rh-table>
 
 
@@ -280,4 +256,4 @@ using elements and patterns from the desaturated theme instead.
 <uxdot-feedback>
   <h2>Foundations</h2>
   <p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
-</uxdot-feedback>
\ No newline at end of file
+</uxdot-feedback>
diff --git a/patches/@patternfly+pfe-core+4.0.2.patch b/patches/@patternfly+pfe-core+4.0.2.patch
new file mode 100644
index 0000000000..0d147a66fc
--- /dev/null
+++ b/patches/@patternfly+pfe-core+4.0.2.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/@patternfly/pfe-core/ssr-shims.js b/node_modules/@patternfly/pfe-core/ssr-shims.js
+index d432769..c7a30fb 100644
+--- a/node_modules/@patternfly/pfe-core/ssr-shims.js
++++ b/node_modules/@patternfly/pfe-core/ssr-shims.js
+@@ -42,6 +42,8 @@ globalThis.IntersectionObserver ?? (globalThis.IntersectionObserver = ObserverSh
+ // @ts-expect-error: this runs in node
+ globalThis.MutationObserver ?? (globalThis.MutationObserver = ObserverShim);
+ // @ts-expect-error: this runs in node
++globalThis.ResizeObserver ?? (globalThis.ResizeObserver = ObserverShim);
++// @ts-expect-error: this runs in node
+ globalThis.getComputedStyle ?? (globalThis.getComputedStyle = function () {
+     return {
+         getPropertyPriority() {