diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts
index b41e325297..6c8c14d107 100644
--- a/elements/rh-accordion/rh-accordion-header.ts
+++ b/elements/rh-accordion/rh-accordion-header.ts
@@ -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,7 +66,7 @@ export class RhAccordionHeader extends LitElement {
     ariaLevel: '2',
   });
 
-  #heading = new HeadingLevelController(this);
+  #heading = new HeadingLevelContextProvider(this);
 
   override connectedCallback() {
     super.connectedCallback();
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/rh-card.html b/elements/rh-card/demo/rh-card.html
index 97b629bd4c..ddd38e8147 100644
--- a/elements/rh-card/demo/rh-card.html
+++ b/elements/rh-card/demo/rh-card.html
@@ -1,12 +1,10 @@
-<rh-card>
+<rh-card id="card-d" color-palette="darkest">
   <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">
-    <a href="#">Call to action</a>
-  </rh-cta>
+  <rh-cta id="cta-d" 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-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/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..74b7eb2b3c 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, type ContextType } 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,102 +18,22 @@ 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.
  * The consumer has no direct access to the context, it must receive it from the provider.
  */
-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;
-  }
-
-  /** 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);
+export class ColorContextConsumer extends ContextConsumer<typeof context, ReactiveElement> {
+  constructor(
+    host: ReactiveElement,
+    callback: (value: ContextType<typeof context>, dispose?: () => void) => void,
+  ) {
+    super(host, {
+      callback,
+      context,
+      subscribe: true,
+    });
+    new StyleController(host, styles);
   }
 }
 
@@ -124,15 +41,13 @@ 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, (value: ColorTheme | null) => {
+        console.log(`${instance.id ?? instance.localName} receiving`, { key, value });
+        (instance as T)[key as keyof T] = value as T[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..0c4cc98103 100644
--- a/lib/context/color/provider.ts
+++ b/lib/context/color/provider.ts
@@ -1,17 +1,13 @@
-import { isServer, type ReactiveController, type ReactiveElement } from 'lit';
-import type { ContextCallback, ContextRequestEvent, UnknownContext } from '../event.js';
+import { ReactiveElement } from 'lit';
 
-import {
-  contextEvents,
-  ColorContextController,
-  type ColorContextOptions,
-} from './controller.js';
+import { ContextProvider } from '@lit/context';
 
-import { ColorContextConsumer, type ColorTheme } from './consumer.js';
+import { StyleController } from '@patternfly/pfe-core/controllers/style-controller.js';
 
-import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+import { context } from './context.js';
 
 import styles from '@rhds/tokens/css/color-context-provider.css.js';
+import type { ColorTheme } from './consumer.js';
 
 /**
  * A `ColorPalette` is a collection of specific color values
@@ -32,177 +28,58 @@ export type ColorPalette = (
   | 'darkest'
 );
 
-export interface ColorContextProviderOptions<T extends ReactiveElement>
-  extends ColorContextOptions<T> {
-  /** Attribute to set context. Providers only */
-  attribute?: string;
-}
-
 /**
  * `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) {
+    super(host, { context });
   }
+}
 
-  /**
-   * 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);
-      }
-    }
-  }
+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,
+}));
 
-  /**
-   * 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);
-    }
-  }
-}
 
 /**
  * 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: string) => {
+    const controllers = new WeakMap<ReactiveElement, ColorContextProvider>();
+    const values = new Map<ReactiveElement, ColorTheme | null>();
     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 currently supports the `color-palette` attribute only.');
+    }
+    klass.addInitializer((instance: ReactiveElement) => {
+      controllers.set(instance, new ColorContextProvider(instance));
+      new StyleController(instance, styles);
+    });
+    Object.defineProperty(proto, key, {
+      get(this: ReactiveElement) {
+        return values.get(this);
+      },
+      set(this: ReactiveElement, value: ColorPalette) {
+        const background = paletteBackgroundMap.get(value) ?? null;
+        if (this.id === 'card-d' || this.outerHTML?.includes('card-d')) {
+          console.log({ value, background });
+        }
+        controllers.get(this)!.setValue(background);
+        values.set(this, background);
+      },
+      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/@patternfly+pfe-core+4.0.4.patch b/patches/@patternfly+pfe-core+4.0.4.patch
index db57726aaa..8cc1be72be 100644
--- a/patches/@patternfly+pfe-core+4.0.4.patch
+++ b/patches/@patternfly+pfe-core+4.0.4.patch
@@ -1,5 +1,5 @@
 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 +44,4 @@ index d2a82be..67be76d 100644
      };
  }
  //# sourceMappingURL=observes.js.map
+\ No newline at end of file
diff --git a/patches/@patternfly+pfe-tools+4.0.1.patch b/patches/@patternfly+pfe-tools+4.0.1.patch
index 4db41dd759..5e3c78476c 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) {