diff --git a/.nvmrc b/.nvmrc
index 0f576a16ca..c9758a53fa 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v23.2.0
+v23.6.0
diff --git a/docs/_includes/partials/javascript/dsd-init.html b/docs/_includes/partials/javascript/dsd-init.html
index cc227374fc..a25059246c 100644
--- a/docs/_includes/partials/javascript/dsd-init.html
+++ b/docs/_includes/partials/javascript/dsd-init.html
@@ -1,13 +1,13 @@
-  <script type="module">
-    // although we load these ssr support modules elsewhere, we still
-    // need them here to ensure no double-rendering on webkit
-    import '/assets/javascript/ssr-support.js';
-    // include these, which are often internal to elements,
-    // and are definitely required by context-picker and context-demo
-    // to avoid SSR defer-hydration bugs and SSR double-rendering bugs
-    import '@rhds/elements/rh-icon/rh-icon.js';
-    import '@rhds/elements/rh-surface/rh-surface.js';
-    import '@rhds/elements/rh-button/rh-button.js';
-    import '@rhds/elements/rh-tooltip/rh-tooltip.js';
-    import '@rhds/elements/rh-tag/rh-tag.js';
-  </script>
+    <script type="module">
+      // although we load these ssr support modules elsewhere, we still
+      // need them here to ensure no double-rendering on webkit
+      import '/assets/javascript/ssr-support.js';
+      // include these, which are often internal to elements,
+      // and are definitely required by context-picker and context-demo
+      // to avoid SSR defer-hydration bugs and SSR double-rendering bugs
+      import '@rhds/elements/rh-icon/rh-icon.js';
+      import '@rhds/elements/rh-surface/rh-surface.js';
+      import '@rhds/elements/rh-button/rh-button.js';
+      import '@rhds/elements/rh-tooltip/rh-tooltip.js';
+      import '@rhds/elements/rh-tag/rh-tag.js';
+    </script>
diff --git a/docs/_plugins/lit-ssr/worker.ts b/docs/_plugins/lit-ssr/worker.ts
index d073e7e64c..bd07534d2f 100644
--- a/docs/_plugins/lit-ssr/worker.ts
+++ b/docs/_plugins/lit-ssr/worker.ts
@@ -5,6 +5,8 @@ import type { RenderRequestMessage, RenderResponseMessage } from './lit.js';
 
 import { LitElementRenderer } from '@lit-labs/ssr/lib/lit-element-renderer.js';
 
+import '@patternfly/pfe-core/ssr-shims.js';
+
 import { register } from 'node:module';
 import { register as registerTS } from 'tsx/esm/api';
 
@@ -93,4 +95,3 @@ export default async function renderPage({
   const end = performance.now();
   return { page, rendered, durationMs: end - start };
 }
-
diff --git a/docs/_plugins/rhds.ts b/docs/_plugins/rhds.ts
index aff4119313..880f903aeb 100644
--- a/docs/_plugins/rhds.ts
+++ b/docs/_plugins/rhds.ts
@@ -13,6 +13,8 @@ import RHDSElementDocsPlugin from '#11ty-plugins/element-docs.js';
 import RHDSElementDemosPlugin from '#11ty-plugins/element-demos.js';
 import LitSSRPlugin from '#11ty-plugins/lit-ssr/lit.js';
 
+import '@patternfly/pfe-core/ssr-shims.js';
+
 import { getPfeConfig } from '@patternfly/pfe-tools/config.js';
 import { capitalize } from '#11ty-plugins/tokensHelpers.js';
 
diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts
index b41e325297..c0354669ba 100644
--- a/elements/rh-accordion/rh-accordion-header.ts
+++ b/elements/rh-accordion/rh-accordion-header.ts
@@ -1,7 +1,7 @@
 import type { RhAccordion } from './rh-accordion.js';
 import type { RhAccordionContext } from './context.js';
 
-import { html, LitElement } from 'lit';
+import { html, isServer, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
@@ -18,7 +18,8 @@ import { consume } from '@lit/context';
 import { context } from './context.js';
 
 import styles from './rh-accordion-header.css';
-import { HeadingLevelController } from '@rhds/elements/lib/context/headings/controller.js';
+
+import { HeadingLevelContextProvider } from '@rhds/elements/lib/context/headings/provider.js';
 
 export class AccordionHeaderChangeEvent extends Event {
   declare target: RhAccordionHeader;
@@ -65,22 +66,15 @@ export class RhAccordionHeader extends LitElement {
     ariaLevel: '2',
   });
 
-  #heading = new HeadingLevelController(this);
+  #heading = new HeadingLevelContextProvider(this);
 
   override connectedCallback() {
     super.connectedCallback();
     this.id ||= getRandomId(this.localName);
-    const accordion = this.closest('rh-accordion');
-    const heading = this.closest('h1,h2,h3,h4,h5,h6');
-    if (heading && accordion?.contains(heading)) {
-      this.#internals.ariaLevel = heading.localName.replace('h', '');
-      heading.replaceWith(this);
-    } else {
-      this.#internals.ariaLevel = Math.max(2, this.#heading.level).toString();
-    }
+    this.#initDom();
   }
 
-  render() {
+  override render() {
     const { expanded, on = 'light' } = this;
     const { accents, large = false } = this.ctx ?? {};
     const rtl = this.#dir.dir === 'rtl';
@@ -102,6 +96,20 @@ export class RhAccordionHeader extends LitElement {
     `;
   }
 
+  #initDom() {
+    if (!isServer) {
+      // TODO: replace with context?
+      const accordion = this.closest('rh-accordion');
+      const heading = this.closest('h1,h2,h3,h4,h5,h6');
+      if (heading && accordion?.contains(heading)) {
+        this.#internals.ariaLevel = heading.localName.replace('h', '');
+        heading.replaceWith(this);
+      } else {
+        this.#internals.ariaLevel = Math.max(2, this.#heading.level).toString();
+      }
+    }
+  }
+
   #onClick(event: MouseEvent) {
     const accordion = event.composedPath().find(isAccordion);
     if (accordion) {
diff --git a/elements/rh-accordion/rh-accordion.ts b/elements/rh-accordion/rh-accordion.ts
index bf23421f7f..7282b54db1 100644
--- a/elements/rh-accordion/rh-accordion.ts
+++ b/elements/rh-accordion/rh-accordion.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, type TemplateResult } from 'lit';
+import { LitElement, html, isServer, type TemplateResult } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
@@ -145,11 +145,13 @@ export class RhAccordion extends LitElement {
 
   @provide({ context }) private ctx = this.#makeContext();
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
     this.addEventListener('change', this.#onChange as EventListener);
-    this.#mo.observe(this, { childList: true });
-    this.updateAccessibility();
+    if (!isServer) {
+      this.updateAccessibility();
+      this.#mo.observe(this, { childList: true });
+    }
   }
 
   override render(): TemplateResult {
@@ -262,6 +264,10 @@ export class RhAccordion extends LitElement {
    * open
    */
   public updateAccessibility() {
+    if (isServer) {
+      return;
+    }
+
     const { headers } = this;
 
     // For each header in the accordion, attach the aria connections
diff --git a/elements/rh-audio-player/rh-audio-player-about.ts b/elements/rh-audio-player/rh-audio-player-about.ts
index 42306bbccf..946714b49f 100644
--- a/elements/rh-audio-player/rh-audio-player-about.ts
+++ b/elements/rh-audio-player/rh-audio-player-about.ts
@@ -9,7 +9,7 @@ import '@rhds/elements/rh-avatar/rh-avatar.js';
 import panelStyles from './rh-audio-player-panel.css';
 import styles from './rh-audio-player-about.css';
 
-import { HeadingLevelContextConsumer } from '../../lib/context/headings/consumer.js';
+import { HeadingLevelContextConsumer, wrap } from '../../lib/context/headings/consumer.js';
 
 /**
  * Audio Player About Panel
@@ -42,7 +42,7 @@ export class RhAudioPlayerAbout extends LitElement {
   override render() {
     const { label, mediaseries, mediatitle } = this;
     const hasContent = (this.content?.length ?? 0) >= 1;
-    const heading = this.#headings.wrap(mediatitle ?? '');
+    const heading = wrap.call(this.#headings, mediatitle ?? '');
 
     return html`
       <rh-audio-player-scrolling-text-overflow id="title" part="heading">
diff --git a/elements/rh-audio-player/rh-audio-player-subscribe.ts b/elements/rh-audio-player/rh-audio-player-subscribe.ts
index 2f2cc0c984..9eebbe7920 100644
--- a/elements/rh-audio-player/rh-audio-player-subscribe.ts
+++ b/elements/rh-audio-player/rh-audio-player-subscribe.ts
@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
 
-import { HeadingLevelContextConsumer } from '../../lib/context/headings/consumer.js';
+import { HeadingLevelContextConsumer, wrap } from '../../lib/context/headings/consumer.js';
 
 import './rh-audio-player-scrolling-text-overflow.js';
 
@@ -37,7 +37,7 @@ export class RhAudioPlayerSubscribe extends LitElement {
   override render() {
     return html`
       <rh-audio-player-scrolling-text-overflow part="heading">
-        <slot name="heading">${this.#headings.wrap(this.menuLabel)}</slot>
+        <slot name="heading">${wrap.call(this.#headings, this.menuLabel)}</slot>
       </rh-audio-player-scrolling-text-overflow>
       <slot part="body" ?hidden="${(this.body?.length ?? 0) < 1}"></slot>
       <slot name="link" part="links"></slot>`;
diff --git a/elements/rh-audio-player/rh-cue.ts b/elements/rh-audio-player/rh-cue.ts
index 30cd0f0718..0d72173b12 100644
--- a/elements/rh-audio-player/rh-cue.ts
+++ b/elements/rh-audio-player/rh-cue.ts
@@ -2,7 +2,7 @@ import { LitElement, html, nothing } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
-import { HeadingLevelContextConsumer } from '../../lib/context/headings/consumer.js';
+import { HeadingLevelContextConsumer, wrap } from '../../lib/context/headings/consumer.js';
 
 import styles from './rh-cue.css';
 
@@ -105,7 +105,7 @@ export class RhCue extends LitElement {
 
   render() {
     const { start, voice } = this;
-    return html`${!this.#hasVoice ? nothing : this.#headings.wrap(this.#linkTemplate(html`
+    return html`${!this.#hasVoice ? nothing : wrap.call(this.#headings, this.#linkTemplate(html`
       <span id="start">${start}</span> - <span id="voice">${voice}</span>`, true))}${this.#linkTemplate(html`
       <slot></slot>
     `)}`;
diff --git a/elements/rh-audio-player/rh-transcript.ts b/elements/rh-audio-player/rh-transcript.ts
index a68812623d..98ea6b55af 100644
--- a/elements/rh-audio-player/rh-transcript.ts
+++ b/elements/rh-audio-player/rh-transcript.ts
@@ -6,8 +6,7 @@ import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js
 
 import { RhCue, getFormattedTime } from './rh-cue.js';
 
-import { HeadingLevelContextConsumer } from '@rhds/elements/lib/context/headings/consumer.js';
-import { HeadingLevelContextProvider } from '@rhds/elements/lib/context/headings/provider.js';
+import { HeadingLevelContextProvider, wrap } from '@rhds/elements/lib/context/headings/provider.js';
 
 import buttonStyles from './rh-audio-player-button.css';
 import panelStyles from './rh-audio-player-panel.css';
@@ -48,10 +47,7 @@ export class RhTranscript extends LitElement {
 
   #duration?: number;
 
-  #headings = new HeadingLevelContextProvider(this, {
-    offset: 0,
-    parent: new HeadingLevelContextConsumer(this),
-  });
+  #headings = new HeadingLevelContextProvider(this, { offset: 0 });
 
   set autoscrollLabel(label: string) {
     this._autoscroll = label;
@@ -84,7 +80,7 @@ export class RhTranscript extends LitElement {
   render() {
     return html`
       <rh-audio-player-scrolling-text-overflow part="heading">
-        <slot name="heading">${this.#headings.wrap(this.menuLabel)}</slot>
+        <slot name="heading">${wrap.call(this.#headings, this.menuLabel)}</slot>
       </rh-audio-player-scrolling-text-overflow>
       <div class="panel-toolbar" part="toolbar">${this._cues.length < 0 ? '' : html`
         <label>
diff --git a/elements/rh-card/demo/color-context.html b/elements/rh-card/demo/color-context.html
index f7a56ae253..0563a8044a 100644
--- a/elements/rh-card/demo/color-context.html
+++ b/elements/rh-card/demo/color-context.html
@@ -6,9 +6,7 @@ <h2 slot="header">Default card, slotted content and footer</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card id="custom">
@@ -17,9 +15,7 @@ <h2 slot="header">Slotted title, content, and footer</h2>
     <rh-context-picker id="picker"
                        target="custom"
                        allow="darkest, lighter, lightest"></rh-context-picker>
-    <rh-cta variant="primary" slot="footer">
-      <a href="#">Call to action</a>
-    </rh-cta>
+    <rh-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card class="full">
@@ -38,9 +34,7 @@ <h2 slot="header">Card with slotted image header. Full width image.</h2>
       at felis
       sem.
     </p>
-    <rh-cta variant="primary" slot="footer">
-      <a href="#">Call to action</a>
-    </rh-cta>
+    <rh-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card class="bar">
@@ -49,9 +43,7 @@ <h2 slot="header">Custom header</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card class="bar">
@@ -60,9 +52,7 @@ <h2 slot="header">Custom header</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
 </rh-context-demo>
diff --git a/elements/rh-card/demo/darkest.html b/elements/rh-card/demo/darkest.html
new file mode 100644
index 0000000000..6ea85d85e4
--- /dev/null
+++ b/elements/rh-card/demo/darkest.html
@@ -0,0 +1,22 @@
+<rh-card color-palette="darkest" ssr-hint-has-slotted-anonymous ssr-hint-has-slotted="header,footer">
+  <h2 slot="header">Card</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 slot="footer" priority="primary" href="#">Call to action</rh-cta>
+</rh-card>
+
+<style>
+  rh-card {
+    & h2 {
+      font-size: initial;
+    }
+  }
+</style>
+
+<script type="module">
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>
+
diff --git a/elements/rh-card/demo/rh-card.html b/elements/rh-card/demo/rh-card.html
index 97b629bd4c..5bd9181f81 100644
--- a/elements/rh-card/demo/rh-card.html
+++ b/elements/rh-card/demo/rh-card.html
@@ -4,9 +4,7 @@ <h2 slot="header">Card</h2>
      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 slot="footer" priority="primary">
-    <a href="#">Call to action</a>
-  </rh-cta>
+  <rh-cta slot="footer" priority="primary" href="#">Call to action</rh-cta>
 </rh-card>
 
 <style>
@@ -18,7 +16,7 @@ <h2 slot="header">Card</h2>
 </style>
 
 <script type="module">
-  import '@rhds/elements/rh-cta/rh-cta.js';
   import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
 </script>
 
diff --git a/elements/rh-card/demo/variants.html b/elements/rh-card/demo/variants.html
index 676ca915e0..16f82e6998 100644
--- a/elements/rh-card/demo/variants.html
+++ b/elements/rh-card/demo/variants.html
@@ -5,9 +5,7 @@ <h2 slot="header">Default card, slotted content and footer</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card>
@@ -16,9 +14,7 @@ <h2 slot="header">Slotted title, content, and footer</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card color-palette="lighter">
@@ -27,9 +23,7 @@ <h2 slot="header">Lighter color palette</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card color-palette="lighter" class="bar">
@@ -38,9 +32,7 @@ <h2 slot="header">Lighter color palette and custom header</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card class="bar">
@@ -49,9 +41,7 @@ <h2 slot="header">Custom header</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card class="center">
@@ -60,9 +50,7 @@ <h2 slot="header">Center aligned content, footer</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card class="end">
@@ -71,9 +59,7 @@ <h2 slot="header">End aligned content, footer</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card class="image">
@@ -87,9 +73,7 @@ <h2 slot="header">End aligned content, footer</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card class="image">
@@ -103,9 +87,7 @@ <h2 slot="header">End aligned content, footer</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 
   <rh-card class="image heading">
@@ -120,9 +102,7 @@ <h2>Card with slotted image header. Full width image.</h2>
       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-cta variant="primary" slot="footer" href="#">Call to action</rh-cta>
   </rh-card>
 </section>
 
diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts
index 4b5785f3c9..e43da8e482 100644
--- a/elements/rh-card/rh-card.ts
+++ b/elements/rh-card/rh-card.ts
@@ -43,6 +43,8 @@ import styles from './rh-card.css';
 export class RhCard extends LitElement {
   static styles = [styles];
 
+  @property({ reflect: true }) id = '';
+
   /**
    * Sets color palette, which affects the element's styles as well as descendants' color theme.
    * Overrides parent color context.
@@ -69,6 +71,7 @@ export class RhCard extends LitElement {
   #slots = new SlotController(this, 'header', 'image', null, 'footer');
 
   #isPromo = this.variant === 'promo';
+
   #isStandardPromo = false;
 
   willUpdate() {
diff --git a/elements/rh-code-block/rh-code-block.ts b/elements/rh-code-block/rh-code-block.ts
index ca12d5f5a2..b18bfcb38f 100644
--- a/elements/rh-code-block/rh-code-block.ts
+++ b/elements/rh-code-block/rh-code-block.ts
@@ -1,5 +1,5 @@
 import type { DirectiveResult } from 'lit-html/directive.js';
-import { CSSResult, LitElement, html, type PropertyValues } from 'lit';
+import { CSSResult, LitElement, html, isServer, type PropertyValues } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -149,8 +149,10 @@ export class RhCodeBlock extends LitElement {
 
   override connectedCallback() {
     super.connectedCallback();
-    this.#ro.observe(this);
-    this.#onSlotChange();
+    if (!isServer) {
+      this.#ro.observe(this);
+      this.#onSlotChange();
+    }
   }
 
   override disconnectedCallback() {
diff --git a/elements/rh-cta/rh-cta.ts b/elements/rh-cta/rh-cta.ts
index dade2cc79f..91a3d061a6 100644
--- a/elements/rh-cta/rh-cta.ts
+++ b/elements/rh-cta/rh-cta.ts
@@ -75,6 +75,8 @@ function isSupportedContent(el: Element | null): el is HTMLAnchorElement | HTMLB
 export class RhCta extends LitElement {
   static readonly styles = [style];
 
+  @property({ reflect: true }) id = '';
+
   /**
    * Indicates the importance of this call-to-action in the context of the page.
    * Will also influence how the call-to-action is styled.
diff --git a/elements/rh-table/rh-table.ts b/elements/rh-table/rh-table.ts
index d157a4d9c8..e17a752b92 100644
--- a/elements/rh-table/rh-table.ts
+++ b/elements/rh-table/rh-table.ts
@@ -76,8 +76,10 @@ export class RhTable extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.#init();
-    this.#mo.observe(this, { childList: true });
+    if (!isServer) {
+      this.#init();
+      this.#mo.observe(this, { childList: true });
+    }
   }
 
   protected willUpdate(): void {
diff --git a/elements/rh-tabs/rh-tab.ts b/elements/rh-tabs/rh-tab.ts
index 06767c73a4..2afcd6c030 100644
--- a/elements/rh-tabs/rh-tab.ts
+++ b/elements/rh-tabs/rh-tab.ts
@@ -1,6 +1,6 @@
 import type { RhTabsContext } from './context.js';
 
-import { html, LitElement } from 'lit';
+import { html, isServer, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
@@ -79,6 +79,7 @@ export class RhTab extends LitElement {
     const { box = false, vertical = false, firstTab, lastTab } = this.ctx ?? {};
     const first = firstTab === this;
     const last = lastTab === this;
+    // TODO: slotted hints for this.icons
     return html`
       <div id="button"
            part="button"
@@ -86,7 +87,7 @@ export class RhTab extends LitElement {
            class="${classMap({ active, box, vertical, first, last, on: true, [on]: true })}">
         <slot name="icon"
               part="icon"
-              ?hidden="${!this.icons.length}"
+              ?hidden="${isServer || !this.icons.length}"
               @slotchange="${() => this.requestUpdate()}"></slot>
         <slot part="text"></slot>
       </div>
diff --git a/eleventy.config.ts b/eleventy.config.ts
index 7d10a776c3..c672d9b82f 100644
--- a/eleventy.config.ts
+++ b/eleventy.config.ts
@@ -208,6 +208,7 @@ export default async function(eleventyConfig: UserConfig) {
       'elements/rh-code-block/rh-code-block.ts',
       'elements/rh-table/rh-table.ts',
       'elements/rh-accordion/rh-accordion.ts',
+      'elements/rh-card/rh-card.ts',
       'elements/rh-cta/rh-cta.ts',
       'elements/rh-footer/rh-footer-universal.ts',
       'elements/rh-skip-link/rh-skip-link.ts',
diff --git a/lib/context/color/consumer.ts b/lib/context/color/consumer.ts
index 3a8d7c5d8b..d0da30f1bd 100644
--- a/lib/context/color/consumer.ts
+++ b/lib/context/color/consumer.ts
@@ -1,12 +1,9 @@
-import { isServer, type ReactiveController, type ReactiveElement } from 'lit';
+import type { ReactiveElement } from 'lit';
 
-import {
-  contextEvents,
-  ColorContextController,
-  type ColorContextOptions,
-} from './controller.js';
+import { ContextConsumer } from '@lit/context';
+import { StyleController } from '@patternfly/pfe-core/controllers/style-controller.js';
 
-import { ContextRequestEvent } from '../event.js';
+import { context } from './context.js';
 
 import styles from '@rhds/tokens/css/color-context-consumer.css.js';
 
@@ -21,11 +18,6 @@ export type ColorTheme = (
   | 'saturated'
 );
 
-interface ColorContextConsumerOptions<T extends ReactiveElement> extends ColorContextOptions<T> {
-  /** Private callback for instances where a consumer is also a provider. */
-  callback?: (value: ColorTheme) => void;
-}
-
 /**
  * A color context consumer receives sets it's context property based on the context provided
  * by the closest color context provider.
@@ -33,90 +25,17 @@ interface ColorContextConsumerOptions<T extends ReactiveElement> extends ColorCo
  */
 export class ColorContextConsumer<
   T extends ReactiveElement
-> extends ColorContextController<T> implements ReactiveController {
-  #propertyName: keyof T;
-
-  get #propertyValue() {
-    return this.host[this.#propertyName] as ColorTheme;
-  }
-
-  set #propertyValue(x) {
-    this.host[this.#propertyName] = x as T[keyof T];
-    this.host.requestUpdate();
-  }
-
-  get value() {
-    return this.#propertyValue;
-  }
-
-  #dispose?: () => void;
-
-  #override: ColorTheme | null = null;
-
-  constructor(host: T, private options?: ColorContextConsumerOptions<T>) {
-    super(host, styles);
-    this.#propertyName = options?.propertyName ?? 'on' as keyof T;
+> extends ContextConsumer<typeof context, T> {
+  constructor(
+    host: T,
+    key: keyof T
+  ) {
+    new StyleController(host, styles);
+    super(host, { callback: v => this.update(v, key), context, subscribe: true });
   }
 
-  /** When a consumer connects, it requests colour context from the closest provider. */
-  async hostConnected() {
-    const { context } = ColorContextController;
-    const event = new ContextRequestEvent(context, e => this.#contextCallback(e), true);
-    this.#override = this.#propertyValue;
-    contextEvents.set(this.host, event);
-    await this.host.updateComplete;
-    this.host.dispatchEvent(event);
-    this.#override = null;
-  }
-
-  async hostUpdated() {
-    if (!isServer && !this.host.hasUpdated) {
-      // This is definitely overkill, but it's the only
-      // way we've found so far to work around lit-ssr hydration woes
-      const original = this.#propertyValue;
-
-      if (original) {
-        await this.host.updateComplete;
-        this.#propertyValue = '__LIT_SSR_WORKAROUND__' as ColorTheme;
-        await this.host.updateComplete;
-        this.#propertyValue = original as ColorTheme;
-      }
-    }
-  }
-
-  /** When a consumer disconnects, it's removed from the list of consumers. */
-  hostDisconnected() {
-    this.#dispose?.();
-    this.#dispose = undefined;
-    contextEvents.delete(this.host);
-  }
-
-  /**
-   * Register the dispose callback for hosts that requested multiple updates,
-   * then update the colour-context
-   * @param value the color theme
-   * @param dispose cleanup callback
-   */
-  #contextCallback(value: ColorTheme | null, dispose?: () => void) {
-    // protect against changing providers
-    if (dispose && dispose !== this.#dispose) {
-      this.#dispose?.();
-      this.#dispose = dispose;
-    }
-    this.update(value);
-  }
-
-  /**
-   * Sets the `on` attribute on the host and any children that requested multiple updates
-   * @param next the color theme
-   */
-  public update(next: ColorTheme | null) {
-    const { last } = this;
-    if (!this.#override && next !== last) {
-      this.last = next;
-      this.#propertyValue = (next ?? undefined) as ColorTheme;
-    }
-    this.options?.callback?.(this.#propertyValue);
+  update(value: ColorTheme | null, key: keyof T) {
+    this.host[key as 'ariaLabel'] = value;
   }
 }
 
@@ -124,15 +43,10 @@ export class ColorContextConsumer<
  * Makes this element a color context consumer
  * @param options options
  */
-export function colorContextConsumer<
-  T extends ReactiveElement
->(options?: ColorContextOptions<T>) {
-  return function(proto: T, _propertyName: string | keyof T) {
-    const propertyName = _propertyName as keyof T;
-    (proto.constructor as typeof ReactiveElement).addInitializer(instance => {
-      const controller = new ColorContextConsumer(instance as T, { propertyName, ...options });
-      // @ts-expect-error: this assignment is strictly for debugging purposes
-      instance.__DEBUG_colorContextConsumer = controller;
+export function colorContextConsumer<T extends ReactiveElement>() {
+  return function(proto: T, key: string | keyof T) {
+    (proto.constructor as typeof ReactiveElement).addInitializer((instance: ReactiveElement) => {
+      new ColorContextConsumer(instance as T, key as keyof T);
     });
   };
 }
diff --git a/lib/context/color/context.ts b/lib/context/color/context.ts
new file mode 100644
index 0000000000..2c6e8046b4
--- /dev/null
+++ b/lib/context/color/context.ts
@@ -0,0 +1,6 @@
+import type { ColorTheme } from './consumer.js';
+
+import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js';
+
+/** The context object which acts as the key for providers and consumers */
+export const context = createContextWithRoot<ColorTheme | null>('rh-color-context');
diff --git a/lib/context/color/controller.ts b/lib/context/color/controller.ts
deleted file mode 100644
index ad3c9063c5..0000000000
--- a/lib/context/color/controller.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import type { ColorTheme } from './consumer.js';
-import type { CSSResult, ReactiveController } from 'lit';
-
-import { ReactiveElement } from 'lit';
-
-import { StyleController } from '@patternfly/pfe-core/controllers/style-controller.js';
-
-import { createContext, type ContextRequestEvent, type UnknownContext } from '../event.js';
-
-export interface ColorContextOptions<T extends ReactiveElement> {
-  prefix?: string;
-  propertyName?: keyof T;
-}
-
-type ColorContext = typeof ColorContextController.context;
-
-/**
-* Maps from consumer host elements to already-fired request events
-* We hold these in memory in order to re-fire the events every time a new provider connects.
-* This is a hedge against cases where an early-upgrading provider claims an early-upgrading
-* consumer before a late-upgrading provider has a chance to register as the rightful provider
-* @example Monkey-in-the-middle error
-*          In this example, we must re-fire the event from eager-consumer when late-provider
-*          upgrades, so as to ensure that late-provider claims it for itself
-*          ```html
-*          <early-provider>
-*            <late-provider>
-*              <eager-consumer></eager-consumer>
-*            </late-provider>
-*          </early-provider>
-*          ```
-*/
-export const contextEvents = new Map<
-  ReactiveElement,
-  ContextRequestEvent<ColorContext>
->();
-
-export const isColorContextEvent =
-  (event: ContextRequestEvent<UnknownContext>): event is ContextRequestEvent<ColorContext> =>
-    event.context === ColorContextController.context;
-
-/**
- * Color context is derived from the `--context` css custom property,
- * which *must* be set by the `color-palette` attribute
- * This property is set (in most cases) in `color-context.scss`,
- * which is added to components via `StyleController`.
- *
- * In this way, we avoid the need to execute javascript in order to convert from a given
- * `ColorPalette` to a given `ColorTheme`, since those relationships are specified in CSS.
- */
-export abstract class ColorContextController<
-  T extends ReactiveElement
-> implements ReactiveController {
-  /** The context object which acts as the key for providers and consumers */
-  public static readonly context = createContext<ColorTheme | null>(Symbol('rh-color-context'));
-
-  /** The last-known color context on the host */
-  protected last: ColorTheme | null = null;
-
-  hostUpdate?(): void;
-
-  /** callback which updates the context value on consumers */
-  abstract update(next?: ColorTheme | null): void;
-
-  constructor(protected host: T, styles: CSSStyleSheet | CSSResult) {
-    new StyleController(host, styles);
-    if (this.host instanceof ReactiveElement) {
-      const Class = (this.host.constructor as typeof ReactiveElement);
-      Class.styles = [Class.styles].flat().filter(x => !!x).concat([styles]);
-    }
-    host.addController(this);
-  }
-}
diff --git a/lib/context/color/provider.ts b/lib/context/color/provider.ts
index d62dbec16b..a150960437 100644
--- a/lib/context/color/provider.ts
+++ b/lib/context/color/provider.ts
@@ -1,15 +1,12 @@
-import { isServer, type ReactiveController, type ReactiveElement } from 'lit';
-import type { ContextCallback, ContextRequestEvent, UnknownContext } from '../event.js';
+import type { ColorTheme } from './consumer.js';
 
-import {
-  contextEvents,
-  ColorContextController,
-  type ColorContextOptions,
-} from './controller.js';
+import { isServer, ReactiveElement } from 'lit';
 
-import { ColorContextConsumer, type ColorTheme } from './consumer.js';
+import { ContextProvider } from '@lit/context';
 
-import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+import { StyleController } from '@patternfly/pfe-core/controllers/style-controller.js';
+
+import { context } from './context.js';
 
 import styles from '@rhds/tokens/css/color-context-provider.css.js';
 
@@ -32,177 +29,68 @@ export type ColorPalette = (
   | 'darkest'
 );
 
-export interface ColorContextProviderOptions<T extends ReactiveElement>
-  extends ColorContextOptions<T> {
-  /** Attribute to set context. Providers only */
-  attribute?: string;
-}
+const controllers = new WeakMap<ReactiveElement, ColorContextProvider>();
+const values = new WeakMap<ReactiveElement, ColorTheme | null>();
 
 /**
  * `ColorContextProvider` is responsible to derive a context value from CSS and provide it to its
  * descendents.
  */
-export class ColorContextProvider<
-  T extends ReactiveElement
-> extends ColorContextController<T> implements ReactiveController {
-  static contexts = new Map(Object.entries({
-    darkest: 'dark' as const,
-    darker: 'dark' as const,
-    dark: 'dark' as const,
-    light: 'light' as const,
-    lighter: 'light' as const,
-    lightest: 'light' as const,
-  }));
-
-  #attribute: string;
-
-  /** Cache of context callbacks. Call each to update consumers */
-  #callbacks = new Set<ContextCallback<ColorTheme | null>>();
-
-  /** Mutation observer which updates consumers when `color-palette` attribute change. */
-  #mo = new MutationObserver(() => this.update());
-
-  /**
-   * Cached (live) computed style declaration
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
-   */
-  // eslint-disable-next-line no-unused-private-class-members
-  #style: CSSStyleDeclaration;
-
-  #initialized = false;
-
-  #logger: Logger;
-
-  #consumer: ColorContextConsumer<T>;
-
-  get local() {
-    return this.#local;
-  }
-
-  get #local() {
-    return ColorContextProvider
-        .contexts.get(this.host.getAttribute(this.#attribute) ?? '');
-  }
-
-  get value(): ColorTheme {
-    return this.#local ?? this.#consumer.value;
-  }
-
-  constructor(host: T, options?: ColorContextProviderOptions<T>) {
-    const { attribute = 'color-palette' } = options ?? {};
-    super(host, styles);
-    this.#consumer = new ColorContextConsumer(host, {
-      callback: value => this.update(value),
-    });
-    this.#logger = new Logger(host);
-    this.#style = window.getComputedStyle(host);
-    this.#attribute = attribute;
-    if (this.#attribute !== 'color-palette') {
-      this.#logger.warn('color context currently supports the `color-palette` attribute only.');
-    }
-  }
-
-  /**
-     * When a context provider connects, it listens for context-request events
-     * it also fires all previously fired context-request events from their hosts,
-     * in case this context provider upgraded after and is closer to a given consumer.
-     */
-  async hostConnected() {
-    this.host.addEventListener('context-request', e => this.#onChildContextRequestEvent(e));
-    this.#mo.observe(this.host, { attributes: true, attributeFilter: [this.#attribute] });
-    await this.host.updateComplete;
-    for (const [host, fired] of contextEvents) {
-      host.dispatchEvent(fired);
-    }
-    this.update();
-    return true;
-  }
-
-  async hostUpdated() {
-    if (!this.#initialized) {
-      this.hostConnected();
-    }
-    this.#initialized ||= await this.hostConnected();
-    if (this.#local && this.value !== this.#consumer.value) {
-      this.#consumer.update(this.#local);
-      this.update();
-    }
-    if (!isServer) {
-      // This is definitely overkill, but it's the only
-      // way we've found so far to work around lit-ssr hydration woes
-      this.update();
-    }
-  }
-
-  /**
-   * When a context provider disconnects, it disconnects its mutation observer
-   */
-  hostDisconnected() {
-    this.#callbacks.forEach(x => this.#callbacks.delete(x));
-    this.#mo.disconnect();
-  }
-
-  /**
-   * Was the context event fired requesting our colour-context context?
-   * @param event some event
-   */
-  #isColorContextEvent(
-    event: ContextRequestEvent<UnknownContext>
-  ): event is ContextRequestEvent<typeof ColorContextController.context> {
-    return event.composedPath().at(0) !== this.host
-      && event.context === ColorContextController.context;
+class ColorContextProvider extends ContextProvider<typeof context> {
+  constructor(protected host: ReactiveElement, initialValue?: ColorTheme | null) {
+    super(host, { context, initialValue });
   }
 
-  /**
-   * Provider part of context API
-   * When a child connects, claim its context-request event
-   * and add its callback to the Set of children if it requests multiple updates
-   * @param event context-request event
-   */
-  async #onChildContextRequestEvent(event: ContextRequestEvent<UnknownContext>) {
-    // only handle ContextEvents relevant to colour context
-    if (this.#isColorContextEvent(event)) {
-      event.stopPropagation();
-
-      // Run the callback to initialize the child's colour-context
-      event.callback(this.value);
-
-      // Cache the callback for future updates, if requested
-      if (event.subscribe) {
-        this.#callbacks.add(event.callback);
-      }
-    }
-  }
-
-  /**
-   * Calls the context callback for all consumers
-   * @param [force] override theme
-   */
-  public override async update(force?: ColorTheme) {
-    for (const cb of this.#callbacks) {
-      cb(force ?? this.value);
-    }
+  update(palette?: ColorPalette | null) {
+    // @ts-expect-error: blahy
+    palette ??= this.host.colorPalette ?? null as ColorPalette | null;
+    const background = paletteBackgroundMap.get(palette!) ?? null;
+    this.setValue(background, isServer);
+    values.set(this.host, background);
   }
 }
 
+const paletteBackgroundMap = new Map(Object.entries({
+  darkest: 'dark' as const,
+  darker: 'dark' as const,
+  dark: 'dark' as const,
+  light: 'light' as const,
+  lighter: 'light' as const,
+  lightest: 'light' as const,
+}));
+
 /**
  * Makes this element a color context provider which updates its consumers when the decorated field changes
  * @param options options
  */
-export function colorContextProvider<T extends ReactiveElement>(options?: ColorContextOptions<T>) {
-  return function(proto: T, _propertyName: string) {
-    const propertyName = _propertyName as keyof T;
+export function colorContextProvider() {
+  return (proto: ReactiveElement, key: 'colorPalette') => {
+    if (key !== 'colorPalette') {
+      throw new Error('color context only supports the `colorPalette` property.');
+    }
     const klass = (proto.constructor as typeof ReactiveElement);
-    const propOpts = klass.getPropertyOptions(_propertyName);
+    const propOpts = klass.getPropertyOptions(key);
     const attribute = typeof propOpts.attribute === 'boolean' ? undefined : propOpts.attribute;
-    klass.addInitializer(instance => {
-      const controller = new ColorContextProvider(instance as T, {
-        propertyName,
-        attribute,
-        ...options,
-      });
-      // @ts-expect-error: this assignment is strictly for debugging purposes
-      instance.__DEBUG_colorContextProvider = controller;
+    if (attribute !== 'color-palette') {
+      throw new Error('color context only supports the `color-palette` attribute.');
+    }
+    klass.addInitializer((instance: ReactiveElement) => {
+      new StyleController(instance, styles);
+      const controller = new ColorContextProvider(instance);
+      controllers.set(instance, controller);
+      controller.update();
+    });
+    const orig = Object.getOwnPropertyDescriptor(proto, key);
+    Object.defineProperty(proto, key, {
+      get(this: ReactiveElement) {
+        return values.get(this);
+      },
+      set(this: ReactiveElement, palette: ColorPalette) {
+        controllers.get(this)!.update(palette);
+        orig?.set?.call(this, palette);
+      },
+      enumerable: true,
+      configurable: true,
     });
   };
 }
diff --git a/lib/context/event.ts b/lib/context/event.ts
deleted file mode 100644
index a8c2e18df3..0000000000
--- a/lib/context/event.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Context Protocol
- * @link https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md
- */
-
-/**
- * A context key.
- *
- * A context key can be any type of object, including strings and symbols. The
- *  Context type brands the key type with the `__context__` property that
- * carries the type of the value the context references.
- */
-export type Context<KeyType, ValueType> = KeyType & {
-  __context__: ValueType;
-};
-
-/**
- * An unknown context type
- */
-export type UnknownContext = Context<unknown, unknown>;
-
-/**
- * A helper type which can extract a Context value type from a Context type
- */
-export type ContextType<T extends UnknownContext> = T extends Context<infer _, infer V>
-  ? V
-  : never;
-
-/**
- * A function which creates a Context value object
- * @param key context key
- */
-export function createContext<ValueType>(
-  key: unknown,
-): Readonly<Context<typeof key, ValueType>> {
-  return key as Context<typeof key, ValueType>;
-}
-
-/**
- * A callback which is provided by a context requester and is called with the value satisfying the request.
- * This callback can be called multiple times by context providers as the requested value is changed.
- */
-export type ContextCallback<ValueType> = (
-  value: ValueType,
-  unsubscribe?: () => void
-) => void;
-
-/**
- * An event fired by a context requester to signal it desires a named context.
- *
- * A provider should inspect the `context` property of the event to determine if it has a value that can
- * satisfy the request, calling the `callback` with the requested value if so.
- *
- * If the requested context event contains a truthy `subscribe` value, then a provider can call the callback
- * multiple times if the value is changed, if this is the case the provider should pass an `unsubscribe`
- * function to the callback which requesters can invoke to indicate they no longer wish to receive these updates.
- */
-export class ContextRequestEvent<T extends UnknownContext> extends Event {
-  public constructor(
-    public readonly context: T,
-    public readonly callback: ContextCallback<ContextType<T>>,
-    public readonly subscribe?: boolean
-  ) {
-    super('context-request', { bubbles: true, composed: true });
-  }
-}
-
-declare global {
-  interface HTMLElementEventMap {
-    /**
-     * A 'context-request' event can be emitted by any element which desires
-     * a context value to be injected by an external provider.
-     */
-    'context-request': ContextRequestEvent<Context<unknown, unknown>>;
-  }
-}
diff --git a/lib/context/headings/consumer.ts b/lib/context/headings/consumer.ts
index 2d4fc84c9f..4822826c30 100644
--- a/lib/context/headings/consumer.ts
+++ b/lib/context/headings/consumer.ts
@@ -1,6 +1,8 @@
-import { ContextRequestEvent } from '../event.js';
+import type { ReactiveElement } from 'lit';
 
-import { contextEvents, HeadingLevelController } from './controller.js';
+import { ContextConsumer } from '@lit/context';
+
+import { context } from './context.js';
 
 export interface HeadingTemplateOptions {
   id?: string;
@@ -8,45 +10,22 @@ export interface HeadingTemplateOptions {
   level?: number;
 }
 
+export { wrap } from './context.js';
+
 /**
  * Determines which heading level immediately precedes the host element,
  * and provides templates for shadow headings.
  */
-export class HeadingLevelContextConsumer extends HeadingLevelController {
-  #dispose?: () => void;
+export class HeadingLevelContextConsumer extends ContextConsumer<typeof context, ReactiveElement> {
+  public level = 1;
 
-  /** When a consumer connects, it requests context from the closest provider. */
-  hostConnected() {
-    const { context } = HeadingLevelController;
-    const event = new ContextRequestEvent<typeof context>(
+  constructor(host: ReactiveElement) {
+    super(host, {
       context,
-      e => this.#contextCallback(e),
-      true,
-    );
-    this.host.dispatchEvent(event);
-    contextEvents.set(this.host, event);
-  }
-
-  /** When a consumer disconnects, it's removed from the list of consumers. */
-  hostDisconnected() {
-    this.#dispose?.();
-    this.#dispose = undefined;
-    contextEvents.delete(this.host);
-  }
-
-  /** Register the dispose callback for hosts that requested multiple updates, then update the colour-context */
-  #contextCallback(value: number, dispose?: () => void) {
-    // protect against changing providers
-    if (dispose && dispose !== this.#dispose) {
-      this.#dispose?.();
-      this.#dispose = dispose;
-    }
-    this.update(value);
-  }
-
-  /** Sets the heading level on the host and any children that requested multiple updates */
-  public update(next: number) {
-    this.level = next;
-    this.host.requestUpdate();
+      subscribe: true,
+      callback: value => {
+        this.level = value.level ?? 1;
+      },
+    });
   }
 }
diff --git a/lib/context/headings/context.ts b/lib/context/headings/context.ts
new file mode 100644
index 0000000000..d0d8aeda72
--- /dev/null
+++ b/lib/context/headings/context.ts
@@ -0,0 +1,61 @@
+import type { HeadingLevelContextConsumer } from './consumer.js';
+import type { HeadingLevelContextProvider } from './provider.js';
+
+import { html } from 'lit';
+
+import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+
+export interface HeadingLevelTemplateOptions {
+  id?: string;
+  hidden?: boolean;
+}
+
+export interface HeadingLevelContextOptions {
+  /** Root Heading level. default 1 */
+  level?: number;
+  /** Heading offset for children. default 1 */
+  offset?: number;
+  /**
+   * Attribute to read on the host which will determine root heading level.
+   */
+  attribute?: string;
+  /**
+   * Only for providers which are also consumers.
+   */
+  parent?: HeadingLevelContextConsumer;
+}
+
+interface HeadingLevelContext {
+  level: number;
+  offset?: number;
+}
+
+/**
+ * Determines which heading level immediately precedes the host element,
+ * and provides templates for shadow headings.
+ */
+export const context = createContextWithRoot<HeadingLevelContext>('rh-heading-level-context');
+
+/**
+   * Wraps any renderable content in a heading, based on heading level
+   * @param content
+   * @param options
+   */
+export function wrap(
+  this: HeadingLevelContextConsumer | HeadingLevelContextProvider,
+  content: unknown,
+  options?: HeadingLevelTemplateOptions,
+) {
+  const { level, offset } = this.value ?? { level: 1, offset: 1 };
+  const id = options?.id;
+  const hidden = options?.hidden ?? false;
+  switch (Math.max(1, level + (offset ?? 1))) {
+    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>`;
+  }
+}
diff --git a/lib/context/headings/controller.ts b/lib/context/headings/controller.ts
deleted file mode 100644
index 9b42acac21..0000000000
--- a/lib/context/headings/controller.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import type { ReactiveController, ReactiveElement, TemplateResult } from 'lit';
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-
-import {
-  createContext,
-  type ContextRequestEvent,
-  type UnknownContext,
-} from '../event.js';
-
-import type { HeadingLevelContextConsumer } from './consumer.js';
-
-export interface HeadingLevelTemplateOptions {
-  id?: string;
-  hidden?: boolean;
-}
-
-export interface HeadingLevelContextOptions {
-  /** Root Heading level. default 1 */
-  level?: number;
-  /** Heading offset for children. default 1 */
-  offset?: number;
-  /**
-   * Attribute to read on the host which will determine root heading level.
-   */
-  attribute?: string;
-  /**
-   * Only for providers which are also consumers.
-   */
-  parent?: HeadingLevelContextConsumer;
-}
-
-/**
- * Maps from consumer host elements to already-fired request events
- * We hold these in memory in order to re-fire the events every time a new provider connects.
- * This is a hedge against cases where an early-upgrading provider claims an early-upgrading
- * consumer before a late-upgrading provider has a chance to register as the rightful provider
- * @example Monkey-in-the-middle error
- *          In this example, we must re-fire the event from eager-consumer when late-provider
- *          upgrades, so as to ensure that late-provider claims it for itself
- *          ```html
- *          <early-provider>
- *            <late-provider>
- *              <eager-consumer></eager-consumer>
- *            </late-provider>
- *          </early-provider>
- *          ```
- */
-export const contextEvents = new Map<ReactiveElement, ContextRequestEvent<UnknownContext>>();
-
-/**
- * Determines which heading level immediately precedes the host element,
- * and provides templates for shadow headings.
- */
-export class HeadingLevelController implements ReactiveController {
-  public static readonly context = createContext<number>(Symbol('rh-heading-level-context'));
-
-  public offset: number;
-
-  #level = 1;
-
-  get level(): number {
-    return this.#level;
-  }
-
-  set level(level: string | number | undefined | null) {
-    const val = typeof level === 'string' ? parseInt(level) : level;
-    if (typeof val === 'number' && !Number.isNaN(val)) {
-      this.#level = val;
-    }
-  }
-
-  constructor(
-    protected host: ReactiveElement,
-    /** Heading level preceding component document, as in 1 for <h1>, 2 for <h2> etc. */
-    protected options?: HeadingLevelContextOptions,
-  ) {
-    host.addController(this);
-    this.offset = options?.offset ?? 1;
-    if (options?.parent) {
-      this.level = options.parent.level;
-    } else if (options?.level) {
-      this.level = options.level;
-    }
-  }
-
-  hostConnected?(): void;
-
-  /**
-   * Wraps any renderable content in a heading, based on heading level
-   */
-  wrap(content: unknown, options?: HeadingLevelTemplateOptions): TemplateResult {
-    const level = Math.max(1, this.level + this.offset);
-    const id = options?.id;
-    const hidden = options?.hidden ?? false;
-    switch (level) {
-      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>`;
-    }
-  }
-}
diff --git a/lib/context/headings/provider.ts b/lib/context/headings/provider.ts
index c6b63a1216..d5a4b1c000 100644
--- a/lib/context/headings/provider.ts
+++ b/lib/context/headings/provider.ts
@@ -1,10 +1,13 @@
-import { contextEvents, HeadingLevelController } from './controller.js';
+import type { HeadingLevelContextOptions } from './context.js';
+import type { ReactiveElement } from 'lit';
 
-import {
-  ContextRequestEvent,
-  type UnknownContext,
-  type ContextCallback,
-} from '../event.js';
+import { isServer } from 'lit';
+
+import { ContextProvider } from '@lit/context';
+
+import { context } from './context.js';
+
+export { wrap } from './context.js';
 
 const SELECTORS = `H1,H2,H3,H4,H5,H6`;
 
@@ -30,18 +33,35 @@ function canQuery(node: Node): node is Document | ShadowRoot {
  * Determines which heading level immediately precedes the host element,
  * and provides templates for shadow headings.
  */
-export class HeadingLevelContextProvider extends HeadingLevelController {
-  /** Cache of context callbacks. Call each to update consumers */
-  #callbacks = new Set<ContextCallback<number>>();
+export class HeadingLevelContextProvider extends ContextProvider<typeof context, ReactiveElement> {
+  get level(): number {
+    return this.value.level;
+  }
+
+  set level(lvl: string | number | undefined | null) {
+    const level = typeof lvl === 'string' ? parseInt(lvl) : lvl;
+    if (typeof level === 'number' && !Number.isNaN(level)) {
+      const { offset } = this.value;
+      this.setValue({ level, offset });
+    }
+  }
+
+  constructor(
+    host: ReactiveElement,
+    /** Heading level preceding component document, as in 1 for <h1>, 2 for <h2> etc. */
+    protected options?: HeadingLevelContextOptions,
+  ) {
+    super(host, { context, initialValue: {
+      offset: options?.offset ?? 1,
+      level: options?.level ?? 1,
+    } });
+  }
 
   hostConnected() {
-    this.host.addEventListener('context-request', e => this.#onChildContextRequestEvent(e));
-    for (const [host, fired] of contextEvents) {
-      host.dispatchEvent(fired);
+    super.hostConnected();
+    if (!isServer) {
+      this.level = this.#computeLevelFromChildren();
     }
-    this.level =
-      this.host.getAttribute(this.options?.attribute ?? '')
-      ?? this.#computeLevelFromChildren();
   }
 
   #computeLevelFromChildren() {
@@ -59,27 +79,4 @@ export class HeadingLevelContextProvider extends HeadingLevelController {
       }
     }
   }
-
-  /** Was the context event fired requesting our colour-context context? */
-  #isHeadingContextRequestEvent(
-    event: ContextRequestEvent<UnknownContext>
-  ): event is ContextRequestEvent<typeof HeadingLevelController.context> {
-    return event.target !== this.host && event.context === HeadingLevelController.context;
-  }
-
-  async #onChildContextRequestEvent(event: ContextRequestEvent<UnknownContext>) {
-    // only handle ContextRequestEvents relevant to colour context
-    if (this.#isHeadingContextRequestEvent(event)) {
-      // claim the context-request event for ourselves (required by context protocol)
-      event.stopPropagation();
-
-      // Run the callback to initialize the child's value
-      event.callback(this.level);
-
-      // Cache the callback for future updates, if requested
-      if (event.subscribe) {
-        this.#callbacks.add(event.callback);
-      }
-    }
-  }
 }
diff --git a/package-lock.json b/package-lock.json
index 7d6bd27430..c392349b42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "lit": "^3.2.1",
         "prism-esm": "^1.29.0-fix.6",
         "tslib": "^2.7.0",
-        "web-dev-server-plugin-lit-css": "^3.0.1"
+        "web-dev-server-plugin-lit-css": "^3.0.2"
       },
       "devDependencies": {
         "@11ty/eleventy": "^3.0.0",
@@ -25,8 +25,8 @@
         "@11ty/eleventy-plugin-rss": "^2.0.2",
         "@commitlint/cli": "^19.5.0",
         "@commitlint/config-conventional": "^19.5.0",
-        "@lit-labs/eleventy-plugin-lit": "^1.0.3",
-        "@lit-labs/ssr": "^3.2.2",
+        "@lit-labs/eleventy-plugin-lit": "^1.0.4",
+        "@lit-labs/ssr": "^3.3.0",
         "@lit-labs/ssr-client": "^1.1.7",
         "@lit/reactive-element": "^2.0.4",
         "@lit/ts-transformers": "^2.0.1",
@@ -81,7 +81,7 @@
         "ts-patch": "^3.2.1",
         "tsx": "^4.19.1",
         "typescript": "^5.6.3",
-        "typescript-transform-lit-css": "^2.0.0",
+        "typescript-transform-lit-css": "^2.0.1",
         "wireit": "^0.14.9"
       },
       "optionalDependencies": {
@@ -2730,11 +2730,13 @@
       }
     },
     "node_modules/@lit-labs/eleventy-plugin-lit": {
-      "version": "1.0.3",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@lit-labs/eleventy-plugin-lit/-/eleventy-plugin-lit-1.0.4.tgz",
+      "integrity": "sha512-daOZzKqJIGuuM2W+SMIoRsUNl5I6jdGF0189BO3ZkClU9vXfjQIcbWZWGTdP1rCQ1vJ7pGxzXEkPCk8Wg1Sf+w==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@lit-labs/ssr": "^3.1.8",
+        "@lit-labs/ssr": "^3.3.0",
         "lit": "^2.7.0 || ^3.0.0"
       },
       "engines": {
@@ -2742,14 +2744,14 @@
       }
     },
     "node_modules/@lit-labs/ssr": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr/-/ssr-3.2.2.tgz",
-      "integrity": "sha512-He5TzeNPM9ECmVpgXRYmVlz0UA5YnzHlT43kyLi2Lu6mUidskqJVonk9W5K699+2DKhoXp8Ra4EJmHR6KrcW1Q==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr/-/ssr-3.3.0.tgz",
+      "integrity": "sha512-OGlPfWfJIC2CXQLuXXRtbWlgidryVI8VOEFUPc++Vk7gQ4aapAJwHJFi7Mi614ekebNLzhkpA/10IZy5g+nGcQ==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "@lit-labs/ssr-client": "^1.1.7",
-        "@lit-labs/ssr-dom-shim": "^1.2.0",
+        "@lit-labs/ssr-dom-shim": "^1.3.0",
         "@lit/reactive-element": "^2.0.4",
         "@parse5/tools": "^0.3.0",
         "@types/node": "^16.0.0",
@@ -2777,7 +2779,9 @@
       }
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
-      "version": "1.2.1",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.3.0.tgz",
+      "integrity": "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@lit-labs/ssr/node_modules/@parse5/tools": {
@@ -4605,447 +4609,12 @@
       }
     },
     "node_modules/@pwrs/lit-css": {
-      "version": "3.0.0",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@pwrs/lit-css/-/lit-css-3.0.1.tgz",
+      "integrity": "sha512-N3oac0XYqKEEoWMT7y02EDxoyM++805V+nXh3rEBGV2IW2Y0NjK4hepLea65HGFlu+ezSK48XAJYD4xAyvVsaQ==",
       "license": "ISC",
       "dependencies": {
-        "cssnano": "^6.1.2"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/cssnano": {
-      "version": "6.1.2",
-      "license": "MIT",
-      "dependencies": {
-        "cssnano-preset-default": "^6.1.2",
-        "lilconfig": "^3.1.1"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/cssnano"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/cssnano-preset-default": {
-      "version": "6.1.2",
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.23.0",
-        "css-declaration-sorter": "^7.2.0",
-        "cssnano-utils": "^4.0.2",
-        "postcss-calc": "^9.0.1",
-        "postcss-colormin": "^6.1.0",
-        "postcss-convert-values": "^6.1.0",
-        "postcss-discard-comments": "^6.0.2",
-        "postcss-discard-duplicates": "^6.0.3",
-        "postcss-discard-empty": "^6.0.3",
-        "postcss-discard-overridden": "^6.0.2",
-        "postcss-merge-longhand": "^6.0.5",
-        "postcss-merge-rules": "^6.1.1",
-        "postcss-minify-font-values": "^6.1.0",
-        "postcss-minify-gradients": "^6.0.3",
-        "postcss-minify-params": "^6.1.0",
-        "postcss-minify-selectors": "^6.0.4",
-        "postcss-normalize-charset": "^6.0.2",
-        "postcss-normalize-display-values": "^6.0.2",
-        "postcss-normalize-positions": "^6.0.2",
-        "postcss-normalize-repeat-style": "^6.0.2",
-        "postcss-normalize-string": "^6.0.2",
-        "postcss-normalize-timing-functions": "^6.0.2",
-        "postcss-normalize-unicode": "^6.1.0",
-        "postcss-normalize-url": "^6.0.2",
-        "postcss-normalize-whitespace": "^6.0.2",
-        "postcss-ordered-values": "^6.0.2",
-        "postcss-reduce-initial": "^6.1.0",
-        "postcss-reduce-transforms": "^6.0.2",
-        "postcss-svgo": "^6.0.3",
-        "postcss-unique-selectors": "^6.0.4"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/cssnano-utils": {
-      "version": "4.0.2",
-      "license": "MIT",
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-calc": {
-      "version": "9.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.11",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.2"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-colormin": {
-      "version": "6.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.23.0",
-        "caniuse-api": "^3.0.0",
-        "colord": "^2.9.3",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-convert-values": {
-      "version": "6.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.23.0",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-discard-comments": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-discard-duplicates": {
-      "version": "6.0.3",
-      "license": "MIT",
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-discard-empty": {
-      "version": "6.0.3",
-      "license": "MIT",
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-discard-overridden": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-merge-longhand": {
-      "version": "6.0.5",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^6.1.1"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-merge-rules": {
-      "version": "6.1.1",
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.23.0",
-        "caniuse-api": "^3.0.0",
-        "cssnano-utils": "^4.0.2",
-        "postcss-selector-parser": "^6.0.16"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-minify-font-values": {
-      "version": "6.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-minify-gradients": {
-      "version": "6.0.3",
-      "license": "MIT",
-      "dependencies": {
-        "colord": "^2.9.3",
-        "cssnano-utils": "^4.0.2",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-minify-params": {
-      "version": "6.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.23.0",
-        "cssnano-utils": "^4.0.2",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-minify-selectors": {
-      "version": "6.0.4",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.16"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-normalize-charset": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-normalize-display-values": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-normalize-positions": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-normalize-repeat-style": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-normalize-string": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-normalize-timing-functions": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-normalize-unicode": {
-      "version": "6.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.23.0",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-normalize-url": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-normalize-whitespace": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-ordered-values": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "cssnano-utils": "^4.0.2",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-reduce-initial": {
-      "version": "6.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.23.0",
-        "caniuse-api": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-reduce-transforms": {
-      "version": "6.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-svgo": {
-      "version": "6.0.3",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0",
-        "svgo": "^3.2.0"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >= 18"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/postcss-unique-selectors": {
-      "version": "6.0.4",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.16"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
-      }
-    },
-    "node_modules/@pwrs/lit-css/node_modules/stylehacks": {
-      "version": "6.1.1",
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.23.0",
-        "postcss-selector-parser": "^6.0.16"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.31"
+        "cssnano": "^7.0.6"
       }
     },
     "node_modules/@rhds/icons": {
@@ -11570,7 +11139,6 @@
     },
     "node_modules/cssnano": {
       "version": "7.0.6",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssnano-preset-default": "^7.0.6",
@@ -11589,7 +11157,6 @@
     },
     "node_modules/cssnano-preset-default": {
       "version": "7.0.6",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.23.3",
@@ -11632,7 +11199,6 @@
     },
     "node_modules/cssnano-utils": {
       "version": "5.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
@@ -20851,7 +20417,6 @@
     },
     "node_modules/postcss-calc": {
       "version": "10.0.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-selector-parser": "^6.1.2",
@@ -20866,7 +20431,6 @@
     },
     "node_modules/postcss-colormin": {
       "version": "7.0.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.23.3",
@@ -20883,7 +20447,6 @@
     },
     "node_modules/postcss-convert-values": {
       "version": "7.0.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.23.3",
@@ -20898,7 +20461,6 @@
     },
     "node_modules/postcss-discard-comments": {
       "version": "7.0.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-selector-parser": "^6.1.2"
@@ -20912,7 +20474,6 @@
     },
     "node_modules/postcss-discard-duplicates": {
       "version": "7.0.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
@@ -20923,7 +20484,6 @@
     },
     "node_modules/postcss-discard-empty": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
@@ -20934,7 +20494,6 @@
     },
     "node_modules/postcss-discard-overridden": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
@@ -20945,7 +20504,6 @@
     },
     "node_modules/postcss-merge-longhand": {
       "version": "7.0.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0",
@@ -20960,7 +20518,6 @@
     },
     "node_modules/postcss-merge-rules": {
       "version": "7.0.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.23.3",
@@ -20977,7 +20534,6 @@
     },
     "node_modules/postcss-minify-font-values": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -20991,7 +20547,6 @@
     },
     "node_modules/postcss-minify-gradients": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "colord": "^2.9.3",
@@ -21007,7 +20562,6 @@
     },
     "node_modules/postcss-minify-params": {
       "version": "7.0.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.23.3",
@@ -21023,7 +20577,6 @@
     },
     "node_modules/postcss-minify-selectors": {
       "version": "7.0.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -21091,7 +20644,6 @@
     },
     "node_modules/postcss-normalize-charset": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^18.12.0 || ^20.9.0 || >=22.0"
@@ -21102,7 +20654,6 @@
     },
     "node_modules/postcss-normalize-display-values": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -21116,7 +20667,6 @@
     },
     "node_modules/postcss-normalize-positions": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -21130,7 +20680,6 @@
     },
     "node_modules/postcss-normalize-repeat-style": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -21144,7 +20693,6 @@
     },
     "node_modules/postcss-normalize-string": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -21158,7 +20706,6 @@
     },
     "node_modules/postcss-normalize-timing-functions": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -21172,7 +20719,6 @@
     },
     "node_modules/postcss-normalize-unicode": {
       "version": "7.0.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.23.3",
@@ -21187,7 +20733,6 @@
     },
     "node_modules/postcss-normalize-url": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -21201,7 +20746,6 @@
     },
     "node_modules/postcss-normalize-whitespace": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -21215,7 +20759,6 @@
     },
     "node_modules/postcss-ordered-values": {
       "version": "7.0.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssnano-utils": "^5.0.0",
@@ -21238,7 +20781,6 @@
     },
     "node_modules/postcss-reduce-initial": {
       "version": "7.0.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.23.3",
@@ -21253,7 +20795,6 @@
     },
     "node_modules/postcss-reduce-transforms": {
       "version": "7.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -21306,7 +20847,6 @@
     },
     "node_modules/postcss-svgo": {
       "version": "7.0.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0",
@@ -21321,7 +20861,6 @@
     },
     "node_modules/postcss-unique-selectors": {
       "version": "7.0.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-selector-parser": "^6.1.2"
@@ -24208,7 +23747,6 @@
     },
     "node_modules/stylehacks": {
       "version": "7.0.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.23.3",
@@ -25749,11 +25287,13 @@
       }
     },
     "node_modules/typescript-transform-lit-css": {
-      "version": "2.0.0",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/typescript-transform-lit-css/-/typescript-transform-lit-css-2.0.1.tgz",
+      "integrity": "sha512-653wRTbE8hYno91oZUWhXfvSTsXAd9IiBZYegGPYDHFipI8adNmuswa9/CQeCwEqX1buhmaLZAO/qVj0UuaX/g==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "@pwrs/lit-css": "^3.0.0"
+        "@pwrs/lit-css": "^3.0.1"
       },
       "peerDependencies": {
         "clean-css": "^5",
@@ -26274,10 +25814,12 @@
       }
     },
     "node_modules/web-dev-server-plugin-lit-css": {
-      "version": "3.0.1",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/web-dev-server-plugin-lit-css/-/web-dev-server-plugin-lit-css-3.0.2.tgz",
+      "integrity": "sha512-4vjTpJ3ECi73jySuIKs76ejEss5hHzSbAbdANqAkn/muFNH2SJEgI2lVn0bskP46E1vILsnTFG/q95bSwW8crw==",
       "license": "ISC",
       "dependencies": {
-        "@pwrs/lit-css": "^3.0.0",
+        "@pwrs/lit-css": "^3.0.1",
         "@rollup/pluginutils": "^5.1.0"
       }
     },
diff --git a/package.json b/package.json
index 5cf92a5bbe..ebc9438c7f 100644
--- a/package.json
+++ b/package.json
@@ -292,7 +292,7 @@
     "lit": "^3.2.1",
     "prism-esm": "^1.29.0-fix.6",
     "tslib": "^2.7.0",
-    "web-dev-server-plugin-lit-css": "^3.0.1"
+    "web-dev-server-plugin-lit-css": "^3.0.2"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
@@ -300,8 +300,8 @@
     "@11ty/eleventy-plugin-rss": "^2.0.2",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@lit-labs/eleventy-plugin-lit": "^1.0.3",
-    "@lit-labs/ssr": "^3.2.2",
+    "@lit-labs/eleventy-plugin-lit": "^1.0.4",
+    "@lit-labs/ssr": "^3.3.0",
     "@lit-labs/ssr-client": "^1.1.7",
     "@lit/reactive-element": "^2.0.4",
     "@lit/ts-transformers": "^2.0.1",
@@ -356,7 +356,7 @@
     "ts-patch": "^3.2.1",
     "tsx": "^4.19.1",
     "typescript": "^5.6.3",
-    "typescript-transform-lit-css": "^2.0.0",
+    "typescript-transform-lit-css": "^2.0.1",
     "wireit": "^0.14.9"
   },
   "optionalDependencies": {
diff --git a/patches/@lit+context+1.1.2.patch b/patches/@lit+context+1.1.2.patch
deleted file mode 100644
index 4db5348a54..0000000000
--- a/patches/@lit+context+1.1.2.patch
+++ /dev/null
@@ -1,11 +0,0 @@
-diff --git a/node_modules/@lit/context/lib/controllers/context-provider.js b/node_modules/@lit/context/lib/controllers/context-provider.js
-index 4a2c228..bab057f 100644
---- a/node_modules/@lit/context/lib/controllers/context-provider.js
-+++ b/node_modules/@lit/context/lib/controllers/context-provider.js
-@@ -3,5 +3,5 @@ import{ContextRequestEvent as t}from"../context-request-event.js";import{ValueNo
-  * @license
-  * Copyright 2021 Google LLC
-  * SPDX-License-Identifier: BSD-3-Clause
-- */class e extends Event{constructor(t){super("context-provider",{bubbles:!0,composed:!0}),this.context=t}}class i extends s{constructor(s,e,i){super(void 0!==e.context?e.initialValue:i),this.onContextRequest=t=>{const s=t.composedPath()[0];t.context===this.context&&s!==this.host&&(t.stopPropagation(),this.addCallback(t.callback,s,t.subscribe))},this.onProviderRequest=s=>{const e=s.composedPath()[0];if(s.context!==this.context||e===this.host)return;const i=new Set;for(const[s,{consumerHost:e}]of this.subscriptions)i.has(s)||(i.add(s),e.dispatchEvent(new t(this.context,s,!0)));s.stopPropagation()},this.host=s,void 0!==e.context?this.context=e.context:this.context=e,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new e(this.context))}}export{i as ContextProvider,e as ContextProviderEvent};
-+ */class e extends Event{constructor(t){super("context-provider",{bubbles:!0,composed:!0}),this.context=t}}class i extends s{constructor(s,e,i){super(void 0!==e.context?e.initialValue:i),this.onContextRequest=t=>{const s=t.composedPath()[0];t.context===this.context&&s!==this.host&&(t.stopPropagation(),this.addCallback(t.callback,s,t.subscribe))},this.onProviderRequest=s=>{const e=s.composedPath()[0];if(s.context!==this.context||e===this.host)return;const i=new Set;for(const[s,{consumerHost:e}]of this.subscriptions)i.has(s)||(i.add(s),e.dispatchEvent(new t(this.context,s,!0)));s.stopPropagation()},this.host=s,void 0!==e.context?this.context=e.context:this.context=e,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener?.("context-request",this.onContextRequest),this.host.addEventListener?.("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new e(this.context))}}export{i as ContextProvider,e as ContextProviderEvent};
- //# sourceMappingURL=context-provider.js.map
diff --git a/patches/@lit+context+1.1.3.patch b/patches/@lit+context+1.1.3.patch
deleted file mode 100644
index 4db5348a54..0000000000
--- a/patches/@lit+context+1.1.3.patch
+++ /dev/null
@@ -1,11 +0,0 @@
-diff --git a/node_modules/@lit/context/lib/controllers/context-provider.js b/node_modules/@lit/context/lib/controllers/context-provider.js
-index 4a2c228..bab057f 100644
---- a/node_modules/@lit/context/lib/controllers/context-provider.js
-+++ b/node_modules/@lit/context/lib/controllers/context-provider.js
-@@ -3,5 +3,5 @@ import{ContextRequestEvent as t}from"../context-request-event.js";import{ValueNo
-  * @license
-  * Copyright 2021 Google LLC
-  * SPDX-License-Identifier: BSD-3-Clause
-- */class e extends Event{constructor(t){super("context-provider",{bubbles:!0,composed:!0}),this.context=t}}class i extends s{constructor(s,e,i){super(void 0!==e.context?e.initialValue:i),this.onContextRequest=t=>{const s=t.composedPath()[0];t.context===this.context&&s!==this.host&&(t.stopPropagation(),this.addCallback(t.callback,s,t.subscribe))},this.onProviderRequest=s=>{const e=s.composedPath()[0];if(s.context!==this.context||e===this.host)return;const i=new Set;for(const[s,{consumerHost:e}]of this.subscriptions)i.has(s)||(i.add(s),e.dispatchEvent(new t(this.context,s,!0)));s.stopPropagation()},this.host=s,void 0!==e.context?this.context=e.context:this.context=e,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new e(this.context))}}export{i as ContextProvider,e as ContextProviderEvent};
-+ */class e extends Event{constructor(t){super("context-provider",{bubbles:!0,composed:!0}),this.context=t}}class i extends s{constructor(s,e,i){super(void 0!==e.context?e.initialValue:i),this.onContextRequest=t=>{const s=t.composedPath()[0];t.context===this.context&&s!==this.host&&(t.stopPropagation(),this.addCallback(t.callback,s,t.subscribe))},this.onProviderRequest=s=>{const e=s.composedPath()[0];if(s.context!==this.context||e===this.host)return;const i=new Set;for(const[s,{consumerHost:e}]of this.subscriptions)i.has(s)||(i.add(s),e.dispatchEvent(new t(this.context,s,!0)));s.stopPropagation()},this.host=s,void 0!==e.context?this.context=e.context:this.context=e,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener?.("context-request",this.onContextRequest),this.host.addEventListener?.("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new e(this.context))}}export{i as ContextProvider,e as ContextProviderEvent};
- //# sourceMappingURL=context-provider.js.map
diff --git a/patches/@patternfly+pfe-core+4.0.4.patch b/patches/@patternfly+pfe-core+4.0.4.patch
index db57726aaa..9eb4f0fabe 100644
--- a/patches/@patternfly+pfe-core+4.0.4.patch
+++ b/patches/@patternfly+pfe-core+4.0.4.patch
@@ -1,5 +1,318 @@
+diff --git a/node_modules/@patternfly/pfe-core/controllers/slot-controller-server.d.ts b/node_modules/@patternfly/pfe-core/controllers/slot-controller-server.d.ts
+new file mode 100644
+index 0000000..4723455
+--- /dev/null
++++ b/node_modules/@patternfly/pfe-core/controllers/slot-controller-server.d.ts
+@@ -0,0 +1,17 @@
++import type { ReactiveElement } from 'lit';
++import { type SlotControllerArgs, type SlotControllerPublicAPI } from './slot-controller.js';
++export declare class SlotController implements SlotControllerPublicAPI {
++    host: ReactiveElement;
++    static default: symbol;
++    /** @deprecated use `default` */
++    static anonymous: symbol;
++    static property: "ssrHintHasSlotted";
++    static attribute: "ssr-hint-has-slotted";
++    static anonymousAttribute: "ssr-hint-has-slotted-anonymous";
++    constructor(host: ReactiveElement, ..._: SlotControllerArgs);
++    hostConnected?(): Promise<void>;
++    private fromAttribute;
++    getSlotted<T extends Element = Element>(..._: string[]): T[];
++    hasSlotted(...names: (string | null)[]): boolean;
++    isEmpty(...names: (string | null)[]): boolean;
++}
+diff --git a/node_modules/@patternfly/pfe-core/controllers/slot-controller-server.js b/node_modules/@patternfly/pfe-core/controllers/slot-controller-server.js
+new file mode 100644
+index 0000000..5da25fa
+--- /dev/null
++++ b/node_modules/@patternfly/pfe-core/controllers/slot-controller-server.js
+@@ -0,0 +1,33 @@
++var _a;
++import {} from './slot-controller.js';
++export class SlotController {
++    constructor(host, ..._) {
++        this.host = host;
++        host.addController(this);
++    }
++    fromAttribute(slots) {
++        return (slots ?? '')
++            .split(/[, ]/)
++            .map(x => x.trim());
++    }
++    getSlotted(..._) {
++        return [];
++    }
++    hasSlotted(...names) {
++        const attr = this.host.getAttribute(_a.attribute);
++        const anon = this.host.hasAttribute(_a.anonymousAttribute);
++        const hints = new Set(this.fromAttribute(attr));
++        return names.every(x => x === null ? anon : hints.has(x));
++    }
++    isEmpty(...names) {
++        return !this.hasSlotted(...names);
++    }
++}
++_a = SlotController;
++SlotController.default = Symbol('default slot');
++/** @deprecated use `default` */
++SlotController.anonymous = _a.default;
++SlotController.property = 'ssrHintHasSlotted';
++SlotController.attribute = 'ssr-hint-has-slotted';
++SlotController.anonymousAttribute = 'ssr-hint-has-slotted-anonymous';
++//# sourceMappingURL=slot-controller-server.js.map
+\ No newline at end of file
+diff --git a/node_modules/@patternfly/pfe-core/controllers/slot-controller.d.ts b/node_modules/@patternfly/pfe-core/controllers/slot-controller.d.ts
+index 3fae8f3..784dd4e 100644
+--- a/node_modules/@patternfly/pfe-core/controllers/slot-controller.d.ts
++++ b/node_modules/@patternfly/pfe-core/controllers/slot-controller.d.ts
+@@ -1,4 +1,4 @@
+-import type { ReactiveController, ReactiveElement } from 'lit';
++import { type ReactiveController, type ReactiveElement } from 'lit';
+ interface AnonymousSlot {
+     hasContent: boolean;
+     elements: Element[];
+@@ -9,8 +9,9 @@ interface NamedSlot extends AnonymousSlot {
+     initialized: true;
+ }
+ export type Slot = NamedSlot | AnonymousSlot;
++export type SlotName = string | null;
+ export interface SlotsConfig {
+-    slots: (string | null)[];
++    slots: SlotName[];
+     /**
+      * Object mapping new slot name keys to deprecated slot name values
+      * @example `pf-modal--header` is deprecated in favour of `header`
+@@ -25,16 +26,58 @@ export interface SlotsConfig {
+      */
+     deprecations?: Record<string, string>;
+ }
+-export declare class SlotController implements ReactiveController {
++export type SlotControllerArgs = [SlotsConfig] | SlotName[];
++export declare function isObjectSpread(config: SlotControllerArgs): config is [SlotsConfig];
++export declare class SlotControllerPublicAPI implements ReactiveController {
++    static default: symbol;
++    host: ReactiveElement;
++    constructor(host: ReactiveElement, ...args: SlotControllerArgs);
++    hostConnected?(): Promise<void>;
++    hostDisconnected?(): void;
++    hostUpdated?(): void;
++    /**
++     * Given a slot name or slot names, returns elements assigned to the requested slots as an array.
++     * If no value is provided, it returns all children not assigned to a slot (without a slot attribute).
++     * @param slotNames slots to query
++     * @example Get header-slotted elements
++     *          ```js
++     *          this.getSlotted('header')
++     *          ```
++     * @example Get header- and footer-slotted elements
++     *          ```js
++     *          this.getSlotted('header', 'footer')
++     *          ```
++     * @example Get default-slotted elements
++     *          ```js
++     *          this.getSlotted();
++     *          ```
++     */
++    getSlotted<T extends Element = Element>(...slotNames: string[]): T[];
++    /**
++     * Returns a boolean statement of whether or not any of those slots exists in the light DOM.
++     * @param names The slot names to check.
++     * @example this.hasSlotted('header');
++     */
++    hasSlotted(...names: (string | null | undefined)[]): boolean;
++    /**
++     * Whether or not all the requested slots are empty.
++     * @param  names The slot names to query.  If no value is provided, it returns the default slot.
++     * @example this.isEmpty('header', 'footer');
++     * @example this.isEmpty();
++     * @returns
++     */
++    isEmpty(...names: (string | null | undefined)[]): boolean;
++}
++export declare class SlotController implements SlotControllerPublicAPI {
+     #private;
+     host: ReactiveElement;
+     static default: symbol;
+     /** @deprecated use `default` */
+     static anonymous: symbol;
+-    constructor(host: ReactiveElement, ...config: ([SlotsConfig] | (string | null)[]));
++    constructor(host: ReactiveElement, ...args: SlotControllerArgs);
+     hostConnected(): Promise<void>;
+-    hostUpdated(): void;
+     hostDisconnected(): void;
++    hostUpdated(): void;
+     /**
+      * Given a slot name or slot names, returns elements assigned to the requested slots as an array.
+      * If no value is provided, it returns all children not assigned to a slot (without a slot attribute).
+diff --git a/node_modules/@patternfly/pfe-core/controllers/slot-controller.js b/node_modules/@patternfly/pfe-core/controllers/slot-controller.js
+index 7162155..43c66c0 100644
+--- a/node_modules/@patternfly/pfe-core/controllers/slot-controller.js
++++ b/node_modules/@patternfly/pfe-core/controllers/slot-controller.js
+@@ -1,7 +1,7 @@
+-var _SlotController_instances, _a, _SlotController_nodes, _SlotController_logger, _SlotController_firstUpdated, _SlotController_mo, _SlotController_slotNames, _SlotController_deprecations, _SlotController_onSlotChange, _SlotController_onMutation, _SlotController_getChildrenForSlot, _SlotController_initSlot;
++var _SlotController_instances, _a, _SlotController_nodes, _SlotController_slotMapInitialized, _SlotController_slotNames, _SlotController_ssrHintHasSlotted, _SlotController_deprecations, _SlotController_mo, _SlotController_initialize, _SlotController_initSlotMap, _SlotController_getSlotElement, _SlotController_getChildrenForSlot;
+ import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+-import { Logger } from './logger.js';
+-function isObjectConfigSpread(config) {
++import { isServer } from 'lit';
++export function isObjectSpread(config) {
+     return config.length === 1 && typeof config[0] === 'object' && config[0] !== null;
+ }
+ /**
+@@ -12,80 +12,42 @@ function isObjectConfigSpread(config) {
+ const isSlot = (n) => (child) => n === SlotController.default ? !child.hasAttribute('slot')
+     : child.getAttribute('slot') === n;
+ export class SlotController {
+-    constructor(host, ...config) {
++    constructor(host, ...args) {
+         _SlotController_instances.add(this);
+         this.host = host;
+         _SlotController_nodes.set(this, new Map());
+-        _SlotController_logger.set(this, void 0);
+-        _SlotController_firstUpdated.set(this, false);
+-        _SlotController_mo.set(this, new MutationObserver(records => __classPrivateFieldGet(this, _SlotController_onMutation, "f").call(this, records)));
+-        _SlotController_slotNames.set(this, void 0);
++        _SlotController_slotMapInitialized.set(this, false);
++        _SlotController_slotNames.set(this, []);
++        _SlotController_ssrHintHasSlotted.set(this, []);
+         _SlotController_deprecations.set(this, {});
+-        _SlotController_onSlotChange.set(this, (event) => {
+-            const slotName = event.target.name;
+-            __classPrivateFieldGet(this, _SlotController_initSlot, "f").call(this, slotName);
+-            this.host.requestUpdate();
+-        });
+-        _SlotController_onMutation.set(this, async (records) => {
+-            const changed = [];
+-            for (const { addedNodes, removedNodes } of records) {
+-                for (const node of [...addedNodes, ...removedNodes]) {
+-                    if (node instanceof HTMLElement && node.slot) {
+-                        __classPrivateFieldGet(this, _SlotController_initSlot, "f").call(this, node.slot);
+-                        changed.push(node.slot);
+-                    }
+-                }
+-            }
+-            this.host.requestUpdate();
+-        });
+-        _SlotController_initSlot.set(this, (slotName) => {
+-            const name = slotName || _a.default;
+-            const elements = __classPrivateFieldGet(this, _SlotController_nodes, "f").get(name)?.slot?.assignedElements?.()
+-                ?? __classPrivateFieldGet(this, _SlotController_instances, "m", _SlotController_getChildrenForSlot).call(this, name);
+-            const selector = slotName ? `slot[name="${slotName}"]` : 'slot:not([name])';
+-            const slot = this.host.shadowRoot?.querySelector?.(selector) ?? null;
+-            const hasContent = !!elements.length;
+-            __classPrivateFieldGet(this, _SlotController_nodes, "f").set(name, { elements, name: slotName ?? '', hasContent, slot });
+-            __classPrivateFieldGet(this, _SlotController_logger, "f").debug(slotName, hasContent);
+-        });
+-        __classPrivateFieldSet(this, _SlotController_logger, new Logger(this.host), "f");
+-        if (isObjectConfigSpread(config)) {
+-            const [{ slots, deprecations }] = config;
+-            __classPrivateFieldSet(this, _SlotController_slotNames, slots, "f");
+-            __classPrivateFieldSet(this, _SlotController_deprecations, deprecations ?? {}, "f");
+-        }
+-        else if (config.length >= 1) {
+-            __classPrivateFieldSet(this, _SlotController_slotNames, config, "f");
+-            __classPrivateFieldSet(this, _SlotController_deprecations, {}, "f");
+-        }
+-        else {
++        _SlotController_mo.set(this, new MutationObserver(__classPrivateFieldGet(this, _SlotController_instances, "m", _SlotController_initSlotMap).bind(this)));
++        __classPrivateFieldGet(this, _SlotController_instances, "m", _SlotController_initialize).call(this, ...args);
++        host.addController(this);
++        if (!__classPrivateFieldGet(this, _SlotController_slotNames, "f").length) {
+             __classPrivateFieldSet(this, _SlotController_slotNames, [null], "f");
+         }
+-        host.addController(this);
+     }
+     async hostConnected() {
+-        this.host.addEventListener('slotchange', __classPrivateFieldGet(this, _SlotController_onSlotChange, "f"));
+-        __classPrivateFieldSet(this, _SlotController_firstUpdated, false, "f");
+         __classPrivateFieldGet(this, _SlotController_mo, "f").observe(this.host, { childList: true });
++        __classPrivateFieldSet(this, _SlotController_ssrHintHasSlotted, this.host
++            // @ts-expect-error: this is a ponyfill for ::has-slotted, is not intended as a public API
++            .ssrHintHasSlotted
++            ?? [], "f");
+         // Map the defined slots into an object that is easier to query
+         __classPrivateFieldGet(this, _SlotController_nodes, "f").clear();
+-        // Loop over the properties provided by the schema
+-        __classPrivateFieldGet(this, _SlotController_slotNames, "f").forEach(__classPrivateFieldGet(this, _SlotController_initSlot, "f"));
+-        Object.values(__classPrivateFieldGet(this, _SlotController_deprecations, "f")).forEach(__classPrivateFieldGet(this, _SlotController_initSlot, "f"));
+-        this.host.requestUpdate();
++        __classPrivateFieldGet(this, _SlotController_instances, "m", _SlotController_initSlotMap).call(this);
+         // insurance for framework integrations
+         await this.host.updateComplete;
+         this.host.requestUpdate();
+     }
+-    hostUpdated() {
+-        if (!__classPrivateFieldGet(this, _SlotController_firstUpdated, "f")) {
+-            __classPrivateFieldGet(this, _SlotController_slotNames, "f").forEach(__classPrivateFieldGet(this, _SlotController_initSlot, "f"));
+-            __classPrivateFieldSet(this, _SlotController_firstUpdated, true, "f");
+-        }
+-    }
+     hostDisconnected() {
+         __classPrivateFieldGet(this, _SlotController_mo, "f").disconnect();
+     }
++    hostUpdated() {
++        if (!__classPrivateFieldGet(this, _SlotController_slotMapInitialized, "f")) {
++            __classPrivateFieldGet(this, _SlotController_instances, "m", _SlotController_initSlotMap).call(this);
++        }
++    }
+     /**
+      * Given a slot name or slot names, returns elements assigned to the requested slots as an array.
+      * If no value is provided, it returns all children not assigned to a slot (without a slot attribute).
+@@ -134,9 +96,49 @@ export class SlotController {
+         return !this.hasSlotted(...names);
+     }
+ }
+-_a = SlotController, _SlotController_nodes = new WeakMap(), _SlotController_logger = new WeakMap(), _SlotController_firstUpdated = new WeakMap(), _SlotController_mo = new WeakMap(), _SlotController_slotNames = new WeakMap(), _SlotController_deprecations = new WeakMap(), _SlotController_onSlotChange = new WeakMap(), _SlotController_onMutation = new WeakMap(), _SlotController_initSlot = new WeakMap(), _SlotController_instances = new WeakSet(), _SlotController_getChildrenForSlot = function _SlotController_getChildrenForSlot(name) {
+-    const children = Array.from(this.host.children);
+-    return children.filter(isSlot(name));
++_a = SlotController, _SlotController_nodes = new WeakMap(), _SlotController_slotMapInitialized = new WeakMap(), _SlotController_slotNames = new WeakMap(), _SlotController_ssrHintHasSlotted = new WeakMap(), _SlotController_deprecations = new WeakMap(), _SlotController_mo = new WeakMap(), _SlotController_instances = new WeakSet(), _SlotController_initialize = function _SlotController_initialize(...config) {
++    if (isObjectSpread(config)) {
++        const [{ slots, deprecations }] = config;
++        __classPrivateFieldSet(this, _SlotController_slotNames, slots, "f");
++        __classPrivateFieldSet(this, _SlotController_deprecations, deprecations ?? {}, "f");
++    }
++    else if (config.length >= 1) {
++        __classPrivateFieldSet(this, _SlotController_slotNames, config, "f");
++        __classPrivateFieldSet(this, _SlotController_deprecations, {}, "f");
++    }
++}, _SlotController_initSlotMap = function _SlotController_initSlotMap() {
++    // Loop over the properties provided by the schema
++    for (const slotName of __classPrivateFieldGet(this, _SlotController_slotNames, "f")
++        .concat(Object.values(__classPrivateFieldGet(this, _SlotController_deprecations, "f")))) {
++        const slotId = slotName || _a.default;
++        const name = slotName ?? '';
++        const elements = __classPrivateFieldGet(this, _SlotController_instances, "m", _SlotController_getChildrenForSlot).call(this, slotId);
++        const slot = __classPrivateFieldGet(this, _SlotController_instances, "m", _SlotController_getSlotElement).call(this, slotId);
++        const hasContent = isServer ? __classPrivateFieldGet(this, _SlotController_ssrHintHasSlotted, "f").includes(slotName)
++            : !!elements.length || !!slot?.assignedNodes?.()?.filter(x => x.textContent?.trim()).length;
++        __classPrivateFieldGet(this, _SlotController_nodes, "f").set(slotId, { elements, name, hasContent, slot });
++    }
++    this.host.requestUpdate();
++    __classPrivateFieldSet(this, _SlotController_slotMapInitialized, true, "f");
++}, _SlotController_getSlotElement = function _SlotController_getSlotElement(slotId) {
++    if (isServer) {
++        return null;
++    }
++    else {
++        const selector = slotId === _a.default ? 'slot:not([name])' : `slot[name="${slotId}"]`;
++        return this.host.shadowRoot?.querySelector?.(selector) ?? null;
++    }
++}, _SlotController_getChildrenForSlot = function _SlotController_getChildrenForSlot(name) {
++    if (isServer) {
++        return [];
++    }
++    else if (__classPrivateFieldGet(this, _SlotController_nodes, "f").has(name)) {
++        return (__classPrivateFieldGet(this, _SlotController_nodes, "f").get(name).slot?.assignedElements?.() ?? []);
++    }
++    else {
++        const children = Array.from(this.host.children);
++        return children.filter(isSlot(name));
++    }
+ };
+ SlotController.default = Symbol('default slot');
+ /** @deprecated use `default` */
 diff --git a/node_modules/@patternfly/pfe-core/decorators/observes.js b/node_modules/@patternfly/pfe-core/decorators/observes.js
-index d2a82be..67be76d 100644
+index d2a82be..5c38c6f 100644
 --- a/node_modules/@patternfly/pfe-core/decorators/observes.js
 +++ b/node_modules/@patternfly/pfe-core/decorators/observes.js
 @@ -13,18 +13,30 @@ import { PropertyObserverController, } from '@patternfly/pfe-core/controllers/pr
@@ -44,3 +357,21 @@ index d2a82be..67be76d 100644
      };
  }
  //# sourceMappingURL=observes.js.map
+\ No newline at end of file
+diff --git a/node_modules/@patternfly/pfe-core/package.json b/node_modules/@patternfly/pfe-core/package.json
+index 55fdb01..c772d45 100644
+--- a/node_modules/@patternfly/pfe-core/package.json
++++ b/node_modules/@patternfly/pfe-core/package.json
+@@ -32,7 +32,11 @@
+     "./controllers/property-observer-controller.js": "./controllers/property-observer-controller.js",
+     "./controllers/roving-tabindex-controller.js": "./controllers/roving-tabindex-controller.js",
+     "./controllers/scroll-spy-controller.js": "./controllers/scroll-spy-controller.js",
+-    "./controllers/slot-controller.js": "./controllers/slot-controller.js",
++    "./controllers/slot-controller.js": {
++      "node": "./controllers/slot-controller-server.js",
++      "import": "./controllers/slot-controller.js",
++      "default": "./controllers/slot-controller.js"
++    },
+     "./controllers/style-controller.js": "./controllers/style-controller.js",
+     "./controllers/timestamp-controller.js": "./controllers/timestamp-controller.js",
+     "./controllers/tabs-controller.js": "./controllers/tabs-controller.js",
diff --git a/patches/@patternfly+pfe-tools+4.0.1.patch b/patches/@patternfly+pfe-tools+4.0.1.patch
index 4db41dd759..5e5b69b668 100644
--- a/patches/@patternfly+pfe-tools+4.0.1.patch
+++ b/patches/@patternfly+pfe-tools+4.0.1.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/@patternfly/pfe-tools/dev-server/plugins/import-map-generator.js b/node_modules/@patternfly/pfe-tools/dev-server/plugins/import-map-generator.js
-index ad61e24..40ade17 100644
+index ad61e24..40579d3 100644
 --- a/node_modules/@patternfly/pfe-tools/dev-server/plugins/import-map-generator.js
 +++ b/node_modules/@patternfly/pfe-tools/dev-server/plugins/import-map-generator.js
 @@ -92,6 +92,8 @@ export function importMapGeneratorPlugin(options) {
@@ -11,3 +11,37 @@ index ad61e24..40ade17 100644
              }), options));
          },
      };
+diff --git a/node_modules/@patternfly/pfe-tools/ssr/ssr.d.ts b/node_modules/@patternfly/pfe-tools/ssr/ssr.d.ts
+index b72548d..f4fa234 100644
+--- a/node_modules/@patternfly/pfe-tools/ssr/ssr.d.ts
++++ b/node_modules/@patternfly/pfe-tools/ssr/ssr.d.ts
+@@ -1,4 +1,5 @@
+ /**
++ * composes the `unsafeHTML`, `html`, `render`, and `collectResult` functions from lit ssr
+  * @param input html partial
+  */
+ export declare function ssr(input: string): Promise<string>;
+diff --git a/node_modules/@patternfly/pfe-tools/ssr/ssr.js b/node_modules/@patternfly/pfe-tools/ssr/ssr.js
+index 5ddd0d2..112545a 100644
+--- a/node_modules/@patternfly/pfe-tools/ssr/ssr.js
++++ b/node_modules/@patternfly/pfe-tools/ssr/ssr.js
+@@ -1,8 +1,8 @@
+-import { render } from '@lit-labs/ssr';
++import { render, html } from '@lit-labs/ssr';
+ import { collectResult } from '@lit-labs/ssr/lib/render-result.js';
+-import { html } from 'lit';
+ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+ /**
++ * composes the `unsafeHTML`, `html`, `render`, and `collectResult` functions from lit ssr
+  * @param input html partial
+  */
+ export async function ssr(input) {
+diff --git a/node_modules/@patternfly/pfe-tools/ssr/ssr.js.map b/node_modules/@patternfly/pfe-tools/ssr/ssr.js.map
+index df66b5b..de18fcd 100644
+--- a/node_modules/@patternfly/pfe-tools/ssr/ssr.js.map
++++ b/node_modules/@patternfly/pfe-tools/ssr/ssr.js.map
+@@ -1 +1 @@
+-{"version":3,"file":"ssr.js","sourceRoot":"","sources":["ssr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,GAAG,CAAC,KAAa;IACrC,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,CAAA,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;AAC3D,CAAC","sourcesContent":["import { render } from '@lit-labs/ssr';\nimport { collectResult } from '@lit-labs/ssr/lib/render-result.js';\nimport { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\n/**\n * @param input html partial\n */\nexport async function ssr(input: string): Promise<string> {\n  return collectResult(render(html`${unsafeHTML(input)}`));\n}\n"]}
+\ No newline at end of file
++{"version":3,"file":"ssr.js","sourceRoot":"","sources":["ssr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,GAAG,CAAC,KAAa;IACrC,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,CAAA,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;AAC3D,CAAC","sourcesContent":["import { render, html } from '@lit-labs/ssr';\nimport { collectResult } from '@lit-labs/ssr/lib/render-result.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\n/**\n * composes the `unsafeHTML`, `html`, `render`, and `collectResult` functions from lit ssr\n * @param input html partial\n */\nexport async function ssr(input: string): Promise<string> {\n  return collectResult(render(html`${unsafeHTML(input)}`));\n}\n"]}
+\ No newline at end of file
diff --git a/patches/@rhds+tokens+2.1.0.patch b/patches/@rhds+tokens+2.1.1.patch
similarity index 100%
rename from patches/@rhds+tokens+2.1.0.patch
rename to patches/@rhds+tokens+2.1.1.patch
diff --git a/uxdot/uxdot-sidenav.ts b/uxdot/uxdot-sidenav.ts
index e795ca1f60..1a9ac65c27 100644
--- a/uxdot/uxdot-sidenav.ts
+++ b/uxdot/uxdot-sidenav.ts
@@ -29,11 +29,11 @@ export class UxdotSideNav extends LitElement {
   async connectedCallback() {
     super.connectedCallback();
 
-    const root = this.getRootNode() as Document | ShadowRoot;
-    if (this.trigger) {
-      this.#triggerElement = root.getElementById(this.trigger);
-    }
     if (!isServer) {
+      const root = this.getRootNode() as Document | ShadowRoot;
+      if (this.trigger) {
+        this.#triggerElement = root.getElementById(this.trigger);
+      }
       this.#triggerElement?.addEventListener('click', this.#onTriggerClick.bind(this));
       this.addEventListener('click', this.#onClick.bind(this));
       this.addEventListener('keydown', this.#onKeydown.bind(this));