fix: use @lit/context

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();

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

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>
 

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

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.

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