fix: use @lit/context

.nvmrc

@@ -1 +1 @@
-v23.2.0
+v23.6.0

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>

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 };
 }
-

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';
 

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) {

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

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">

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>`;

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>
     `)}`;

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>

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>

elements/rh-card/demo/darkest.html

@@ -0,0 +1,22 @@
+<rh-card 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" 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>
+

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>