@blockquote-web-components/blockquote-controller-context-meta 1.2.8 → 1.3.0

package/README.md

@@ -1,133 +1,45 @@
 ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
 
-`BaseContextMetaElement` is inspired by the concept of 'Customized Built-in Elements', focusing on extending native HTML elements like `div` using Lit's features and the Context API.
- This approach simplifies the integration of context providers into a standard elements, enhancing functionality while preserving the core behavior of standard elements. **[All Structural Roles and Their HTML Equivalents](https://www.w3.org/WAI/ARIA/apg/practices/structural-roles/#allstructuralrolesandtheirhtmlequivalents)**
-> [Is it possible to make normal dom elements context providers?](https://github.com/lit/lit/discussions/4690)
+`BaseContextMetaElement` simulates the behavior of a `div` using ARIA roles,
+preserving standard HTML behaviors while enhancing functionality.
 
- <hr>
-
-### Demo
+## Demo
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/oscarmarina/flow-element)
 
-### Features
-It incorporates functionality to handle context consumption and presentation as a standard block element.
-
-1. The `:host` CSS rules ensure the element behaves like a block-level element and respects the `hidden` attribute to hide itself.
-   ```js
-   static styles = [
-     css`
-       :host {
-         display: block;
-       }
-       :host([hidden]),
-       [hidden] {
-         display: none !important;
-       }
-     `,
-   ];
-   ```
-
-2. The initOrGetContextProvider method allows setting up a context consumer on the element. It creates a new BlockquoteControllerContextMeta if one does not already exist.
-   ```js
-     initOrGetContextProvider(contextOrOptions = contextMetaSymbol) {
-       const ctx =
-         contextOrOptions?.context !== undefined
-           ? { ...contextOrOptions }
-           : { context: contextOrOptions };
-
-       if (!this.#controllerBaseContextMeta) {
-         this.#controllerBaseContextMeta = new BlockquoteControllerContextMeta(this, ctx);
-       }
-       return this.#controllerBaseContextMeta;
-     }
-   ```
-
-3. Set a default role of 'presentation' to ensure it behaves semantically like a non-interactive container.
-   ```js
-   connectedCallback() {
-     super.connectedCallback?.();
-     Object.assign(this, { role: this.role ?? 'presentation' });
-   }
-   ```
-
-4. The render method includes a <slot>, which allows this element to be a flexible container for any child content, mimicking the behavior of a [flow element](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#flow_content).
-   ```js
-   render() {
-     return html`<slot></slot>`;
-   }
-   ```
-
-
-### Usage Example: FlownElement
-To demonstrate the utility of BaseContextMetaElement, let's create a derived class called FlownElement:
-
-1. Define Properties: The surface property is declared with reflection, allowing it to influence rendering and context behavior dynamically.
-  ```js
-  static properties = {
-    surface: { reflect: true },
-  };
-  ```
-
-2. Set Context on Construction: The constructor calls initOrGetContextProvider with a specific context, enabling the element to participate in the context API from its inception.
-  ```js
-  constructor() {
-    super();
-    this.surface = undefined;
-    this.flowController = this.initOrGetContextProvider(consumerContext);
-  }
-  ```
-
-3. Update Context Values: The willUpdate lifecycle method updates the context value whenever the surface property changes, ensuring context-sensitive operations react appropriately.
-  ```js
-  willUpdate(props) {
-    super.willUpdate?.(props);
-    if (props.has('surface')) {
-      this.flowController?.setValue(this.surface);
-    }
-  }
-  ```
-
-
-### Usage Example:
-Here's how you might use the FlownElement in your HTML:
-
-```html
-<flow-element surface="dim">
-  <!-- Child content that can consume context from this provider -->
-</flow-element>
-```
+## Features
+- Acts as a structural element that follows HTML flow content rules.
+- Provides a default ARIA role (`none`) to avoid unintended semantics.
+- Can be used as a wrapper for contextual metadata.
 
-With this setup, FlownElement behaves like a [flow element](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#flow_content) but provides the additional benefit of context management via Lit's context API, allowing you to seamlessly integrate context-sensitive behavior without altering the parent element hierarchy.
+## Accessibility
+By default, `BaseContextMetaElement` [assigns the role="none"](https://github.com/w3c/aria/pull/2383),
+ensuring that it does not introduce unintended semantics in assistive technologies.
+This behavior can be overridden by explicitly setting a different role.
 
+**Related:** [ARIA Structural Roles](https://www.w3.org/WAI/ARIA/apg/practices/structural-roles/#allstructuralrolesandtheirhtmlequivalents)
 
-### `src/BaseContextMetaElement.js`:
+> Inspired by the discussion: [Is it possible to make normal DOM elements context providers?](https://github.com/lit/lit/discussions/4690)
+**See Also:** [contextmeta provider directive](https://github.com/oscarmarina/blockquote-web-components/tree/main/packages/controllers/blockquote-controller-context-meta/src/directives/context-meta-provider.js)
 
-#### class: `BaseContextMetaElement`
+With this setup, `BaseContextMetaElement` behaves like a [flow element](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#flow_content).
 
-##### Methods
 
-| Name                       | Privacy | Description                                                  | Parameters                           | Return                            | Inherited From |
-| -------------------------- | ------- | ------------------------------------------------------------ | ------------------------------------ | --------------------------------- | -------------- |
-| `initOrGetContextProvider` |         | Initializes or returns the existing context meta controller. | `contextOrOptions: string \| Object` | `BlockquoteControllerContextMeta` |                |
-
-<details><summary>Private API</summary>
+<hr>
 
-##### Fields
 
-| Name                         | Privacy | Type                                           | Default     | Description                             | Inherited From |
-| ---------------------------- | ------- | ---------------------------------------------- | ----------- | --------------------------------------- | -------------- |
-| `#controllerBaseContextMeta` | private | `BlockquoteControllerContextMeta \| undefined` | `undefined` | Stores the context controller instance. |                |
+### `src/BaseContextMetaElement.js`:
 
-</details>
+#### class: `BaseContextMetaElement`, `base-context-meta`
 
 <hr/>
 
 #### Exports
 
-| Kind | Name                     | Declaration            | Module                        | Package |
-| ---- | ------------------------ | ---------------------- | ----------------------------- | ------- |
-| `js` | `BaseContextMetaElement` | BaseContextMetaElement | src/BaseContextMetaElement.js |         |
+| Kind                        | Name                     | Declaration            | Module                        | Package |
+| --------------------------- | ------------------------ | ---------------------- | ----------------------------- | ------- |
+| `js`                        | `BaseContextMetaElement` | BaseContextMetaElement | src/BaseContextMetaElement.js |         |
+| `custom-element-definition` | `base-context-meta`      | BaseContextMetaElement | src/BaseContextMetaElement.js |         |
 
 ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
 
@@ -177,7 +89,7 @@ export class ProviderEl extends LitElement {
   constructor() {
     super();
     this._provider = new BlockquoteControllerContextMeta(this, {
-      context: 'contextKey', // String used as key in Symbol.for when creating context with createContext(Symbol.for(context))
+      context: Symbol.for('contextKey')
     });
 
     this.data = 'Initial';
@@ -204,7 +116,7 @@ customElements.define('provider-el', ProviderEl);
 
 export class ConsumerEl extends LitElement {
   _consumer = new BlockquoteControllerContextMeta(this, {
-    context: 'contextKey', // String used as key in Symbol.for when creating context with createContext(Symbol.for(context))
+    context: Symbol.for('contextKey')
     callback: (v) => {
       this.setAttribute('data-callback', v);
     },
@@ -256,9 +168,9 @@ customElements.define('consumer-el', ConsumerEl);
 
 #### Variables
 
-| Name                | Description | Type     |
-| ------------------- | ----------- | -------- |
-| `contextMetaSymbol` |             | `string` |
+| Name                | Description | Type |
+| ------------------- | ----------- | ---- |
+| `contextMetaSymbol` |             |      |
 
 <hr/>
 
@@ -273,7 +185,51 @@ customElements.define('consumer-el', ConsumerEl);
 
 #### Exports
 
-| Kind | Name                              | Declaration                     | Module                               | Package |
-| ---- | --------------------------------- | ------------------------------- | ------------------------------------ | ------- |
-| `js` | `BlockquoteControllerContextMeta` | BlockquoteControllerContextMeta | ./BlockquoteControllerContextMeta.js |         |
-| `js` | `BaseContextMetaElement`          | BaseContextMetaElement          | ./BaseContextMetaElement.js          |         |
+| Kind | Name                              | Declaration                     | Module                                      | Package |
+| ---- | --------------------------------- | ------------------------------- | ------------------------------------------- | ------- |
+| `js` | `BlockquoteControllerContextMeta` | BlockquoteControllerContextMeta | ./BlockquoteControllerContextMeta.js        |         |
+| `js` | `BaseContextMetaElement`          | BaseContextMetaElement          | ./BaseContextMetaElement.js                 |         |
+| `js` | `contextMetaProvider`             | contextMetaProvider             | ./directives/context-meta-provider.js       |         |
+| `js` | `cacheContextMetaProvider`        | cacheContextMetaProvider        | ./directives/cache-context-meta-provider.js |         |
+| `js` | `contextMetaKeyProvider`          | contextMetaKeyProvider          | ./directives/cache-context-meta-provider.js |         |
+
+### `src/directives/cache-context-meta-provider.js`:
+
+#### Variables
+
+| Name                     | Description | Type |
+| ------------------------ | ----------- | ---- |
+| `contextMetaKeyProvider` |             |      |
+
+<hr/>
+
+#### Functions
+
+| Name                       | Description | Parameters                  | Return |
+| -------------------------- | ----------- | --------------------------- | ------ |
+| `cacheContextMetaProvider` |             | `element, contextOrOptions` |        |
+
+<hr/>
+
+#### Exports
+
+| Kind | Name                       | Declaration              | Module                                        | Package |
+| ---- | -------------------------- | ------------------------ | --------------------------------------------- | ------- |
+| `js` | `contextMetaKeyProvider`   | contextMetaKeyProvider   | src/directives/cache-context-meta-provider.js |         |
+| `js` | `cacheContextMetaProvider` | cacheContextMetaProvider | src/directives/cache-context-meta-provider.js |         |
+
+### `src/directives/context-meta-provider.js`:
+
+#### Variables
+
+| Name                  | Description | Type |
+| --------------------- | ----------- | ---- |
+| `contextMetaProvider` |             |      |
+
+<hr/>
+
+#### Exports
+
+| Kind | Name                  | Declaration         | Module                                  | Package |
+| ---- | --------------------- | ------------------- | --------------------------------------- | ------- |
+| `js` | `contextMetaProvider` | contextMetaProvider | src/directives/context-meta-provider.js |         |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-controller-context-meta",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "description": "Webcomponent blockquote-controller-context-meta following open-wc recommendations",
   "keywords": [
     "lit",
@@ -20,6 +20,12 @@
     "./BlockquoteControllerContextMeta.js": {
       "default": "./src/BlockquoteControllerContextMeta.js"
     },
+    "./BaseContextMetaElement.js": {
+      "default": "./src/BaseContextMetaElement.js"
+    },
+    "./contextMetaProvider.js": {
+      "default": "./directives/context-meta-provider.js"
+    },
     "./index.js": {
       "default": "./src/index.js"
     }
@@ -115,12 +121,12 @@
     "lit": "^3.2.1"
   },
   "devDependencies": {
-    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.11.1",
-    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.12.8"
+    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.11.2",
+    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.12.9"
   },
   "publishConfig": {
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "6be5182ac44e3e4c3b924f6b5ef5533e7b80790c"
+  "gitHead": "9a325725a904f541664565dd720f4bb6b2f0fa05"
 }

package/src/BaseContextMetaElement.js

@@ -1,150 +1,51 @@
 import {LitElement, html, css} from 'lit';
-import {
-  BlockquoteControllerContextMeta,
-  contextMetaSymbol,
-} from './BlockquoteControllerContextMeta.js';
+
 /**
  * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
  *
- * `BaseContextMetaElement` is inspired by the concept of 'Customized Built-in Elements', focusing on extending native HTML elements like `div` using Lit's features and the Context API.
- *  This approach simplifies the integration of context providers into a standard elements, enhancing functionality while preserving the core behavior of standard elements. **[All Structural Roles and Their HTML Equivalents](https://www.w3.org/WAI/ARIA/apg/practices/structural-roles/#allstructuralrolesandtheirhtmlequivalents)**
- * > [Is it possible to make normal dom elements context providers?](https://github.com/lit/lit/discussions/4690)
- *
- *  <hr>
+ * `BaseContextMetaElement` simulates the behavior of a `div` using ARIA roles,
+ * preserving standard HTML behaviors while enhancing functionality.
  *
- * ### Demo
+ * ## Demo
  *
  * [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/oscarmarina/flow-element)
  *
- * ### Features
- * It incorporates functionality to handle context consumption and presentation as a standard block element.
- *
- * 1. The `:host` CSS rules ensure the element behaves like a block-level element and respects the `hidden` attribute to hide itself.
- *    ```js
- *    static styles = [
- *      css`
- *        :host {
- *          display: block;
- *        }
- *
- *        :host([hidden]),
- *        [hidden] {
- *          display: none !important;
- *        }
- *      `,
- *    ];
- *    ```
- *
- * 2. The initOrGetContextProvider method allows setting up a context consumer on the element. It creates a new BlockquoteControllerContextMeta if one does not already exist.
- *    ```js
- *      initOrGetContextProvider(contextOrOptions = contextMetaSymbol) {
- *        const ctx =
- *          contextOrOptions?.context !== undefined
- *            ? { ...contextOrOptions }
- *            : { context: contextOrOptions };
- *
- *        if (!this.#controllerBaseContextMeta) {
- *          this.#controllerBaseContextMeta = new BlockquoteControllerContextMeta(this, ctx);
- *        }
- *        return this.#controllerBaseContextMeta;
- *      }
- *    ```
- *
- * 3. Set a default role of 'presentation' to ensure it behaves semantically like a non-interactive container.
- *    ```js
- *    connectedCallback() {
- *      super.connectedCallback?.();
- *      Object.assign(this, { role: this.role ?? 'presentation' });
- *    }
- *    ```
- *
- * 4. The render method includes a <slot>, which allows this element to be a flexible container for any child content, mimicking the behavior of a [flow element](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#flow_content).
- *    ```js
- *    render() {
- *      return html`<slot></slot>`;
- *    }
- *    ```
- *
- *
- * ### Usage Example: FlownElement
- * To demonstrate the utility of BaseContextMetaElement, let's create a derived class called FlownElement:
+ * ## Features
+ * - Acts as a structural element that follows HTML flow content rules.
+ * - Provides a default ARIA role (`none`) to avoid unintended semantics.
+ * - Can be used as a wrapper for contextual metadata.
  *
- * 1. Define Properties: The surface property is declared with reflection, allowing it to influence rendering and context behavior dynamically.
- *   ```js
- *   static properties = {
- *     surface: { reflect: true },
- *   };
- *   ```
+ * ## Accessibility
+ * By default, `BaseContextMetaElement` [assigns the role="none"](https://github.com/w3c/aria/pull/2383),
+ * ensuring that it does not introduce unintended semantics in assistive technologies.
+ * This behavior can be overridden by explicitly setting a different role.
  *
- * 2. Set Context on Construction: The constructor calls initOrGetContextProvider with a specific context, enabling the element to participate in the context API from its inception.
- *   ```js
- *   constructor() {
- *     super();
- *     this.surface = undefined;
- *     this.flowController = this.initOrGetContextProvider(consumerContext);
- *   }
- *   ```
+ * **Related:** [ARIA Structural Roles](https://www.w3.org/WAI/ARIA/apg/practices/structural-roles/#allstructuralrolesandtheirhtmlequivalents)
  *
- * 3. Update Context Values: The willUpdate lifecycle method updates the context value whenever the surface property changes, ensuring context-sensitive operations react appropriately.
- *   ```js
- *   willUpdate(props) {
- *     super.willUpdate?.(props);
- *     if (props.has('surface')) {
- *       this.flowController?.setValue(this.surface);
- *     }
- *   }
- *   ```
+ * > Inspired by the discussion: [Is it possible to make normal DOM elements context providers?](https://github.com/lit/lit/discussions/4690)
+ * **See Also:** [contextmeta provider directive](https://github.com/oscarmarina/blockquote-web-components/tree/main/packages/controllers/blockquote-controller-context-meta/src/directives/context-meta-provider.js)
  *
+ * With this setup, `BaseContextMetaElement` behaves like a [flow element](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#flow_content).
  *
- * ### Usage Example:
- * Here's how you might use the FlownElement in your HTML:
  *
- * ```html
- * <flow-element surface="dim">
- *   <!-- Child content that can consume context from this provider -->
- * </flow-element>
- * ```
- *
- * With this setup, FlownElement behaves like a [flow element](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#flow_content) but provides the additional benefit of context management via Lit's context API, allowing you to seamlessly integrate context-sensitive behavior without altering the parent element hierarchy.
+ * <hr>
  */
 export class BaseContextMetaElement extends LitElement {
-  /**
-   * Stores the context controller instance.
-   * @type {BlockquoteControllerContextMeta | undefined}
-   */
-  #controllerBaseContextMeta = undefined;
-
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-
-      :host([hidden]),
-      [hidden] {
-        display: none !important;
-      }
-    `,
-  ];
-
-  /**
-   * Initializes or returns the existing context meta controller.
-   * @param {string | Object} [contextOrOptions=contextMetaSymbol] - context name.
-   * @returns {BlockquoteControllerContextMeta} The instance of the context meta.
-   */
-  initOrGetContextProvider(contextOrOptions = contextMetaSymbol) {
-    const ctx =
-      contextOrOptions?.context !== undefined ? {...contextOrOptions} : {context: contextOrOptions};
-
-    if (!this.#controllerBaseContextMeta) {
-      this.#controllerBaseContextMeta = new BlockquoteControllerContextMeta(this, ctx);
+  static styles = css`
+    :host {
+      display: block;
     }
-    return this.#controllerBaseContextMeta;
-  }
+    :host([hidden]),
+    [hidden] {
+      display: none !important;
+    }
+  `;
 
   connectedCallback() {
     super.connectedCallback?.();
-    Object.assign(this, {role: this.role ?? 'presentation'});
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'none');
+    }
   }
 
   render() {
@@ -153,3 +54,5 @@ export class BaseContextMetaElement extends LitElement {
     `;
   }
 }
+
+customElements.define('base-context-meta', BaseContextMetaElement);

package/src/BlockquoteControllerContextMeta.d.ts

@@ -20,7 +20,7 @@ declare class ContextMeta<
       initialValue,
       callback,
     }: {
-      context?: string;
+      context?: unknown;
       initialValue?: ContextType<TMeta>;
       callback?: (v: ContextType<TMeta>, dispose?: () => void) => void;
     },

package/src/BlockquoteControllerContextMeta.js

@@ -1,6 +1,6 @@
 import {createContext, ContextProvider, ContextConsumer} from '@lit/context';
 
-export const contextMetaSymbol = 'context-meta-symbol';
+export const contextMetaSymbol = Symbol.for('context-meta-symbol');
 /**
  * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
  *
@@ -50,7 +50,7 @@ export const contextMetaSymbol = 'context-meta-symbol';
  *   constructor() {
  *     super();
  *     this._provider = new BlockquoteControllerContextMeta(this, {
- *       context: 'contextKey', // String used as key in Symbol.for when creating context with createContext(Symbol.for(context))
+ *       context: Symbol.for('contextKey')
  *     });
  *
  *     this.data = 'Initial';
@@ -77,7 +77,7 @@ export const contextMetaSymbol = 'context-meta-symbol';
  *
  * export class ConsumerEl extends LitElement {
  *   _consumer = new BlockquoteControllerContextMeta(this, {
- *     context: 'contextKey', // String used as key in Symbol.for when creating context with createContext(Symbol.for(context))
+ *     context: Symbol.for('contextKey')
  *     callback: (v) => {
  *       this.setAttribute('data-callback', v);
  *     },
@@ -106,13 +106,13 @@ class ContextMeta {
   /**
    * @param {import('lit').ReactiveElement} host - The host object.
    * @param {{
-   *   context?: string,
+   *   context?: *,
    *   initialValue?: import('@lit/context').ContextType<*>,
    *   callback?: (value: import('@lit/context').ContextType<*>, dispose?: () => void) => void
    * }} arg - The arguments for the constructor.
    */
   constructor(host, {context = contextMetaSymbol, initialValue, callback}) {
-    this.context = createContext(Symbol.for(context));
+    this.context = createContext(context);
     this.initialValue = initialValue;
     this.callback = callback;
     this.host = host;

package/src/directives/cache-context-meta-provider.js

@@ -0,0 +1,15 @@
+import {BlockquoteControllerContextMeta} from '../BlockquoteControllerContextMeta.js';
+
+export const contextMetaKeyProvider = Symbol();
+
+export const cacheContextMetaProvider = (element, contextOrOptions) => {
+  if (element[contextMetaKeyProvider]) {
+    return element[contextMetaKeyProvider];
+  }
+
+  const ctx =
+    contextOrOptions?.context !== undefined ? {...contextOrOptions} : {context: contextOrOptions};
+
+  element[contextMetaKeyProvider] = new BlockquoteControllerContextMeta(element, ctx);
+  return element[contextMetaKeyProvider];
+};

package/src/directives/context-meta-provider.js

@@ -0,0 +1,94 @@
+import {Directive, directive, PartType} from 'lit/directive.js';
+import {noChange} from 'lit';
+import {cacheContextMetaProvider, contextMetaKeyProvider} from './cache-context-meta-provider.js';
+
+/**
+ * `contextMetaProviderDirective` is a Lit directive that allows you to make normal DOM elements context providers.
+ * This directive can be used in both attribute and element bindings in Lit templates.
+ *
+ * > https://github.com/lit/lit/discussions/4690
+ *
+ * Usage:
+ * This directive converts a DOM element into a Lit context provider using the BlockquoteControllerContextMeta class, which is a
+ * Lit Reactive Controller that encapsulates the controllers provided by [@lit/context](https://lit.dev/docs/data/context/).
+ *
+ * ## Features
+ * - Allows non-Lit elements to provide context.
+ * - Works seamlessly with [`@lit/context`](https://lit.dev/docs/data/context/).
+ * - Utilizes `BlockquoteControllerContextMeta`, a Lit Reactive Controller for managing context.
+
+ *
+ * js```
+ *   <div ${contextMetaProviderDirective(myContext, someValue)}>
+ *     <!-- Children can consume the provided context -->
+ *   </div>
+ *  //
+ * <div data-info="${contextMetaProviderDirective(myContext, someValue)}"">
+ *     <!-- Children can consume the provided context -->
+ *   </div>
+ * ```;
+ */
+class ContextMetaProviderDirective extends Directive {
+  /** @type {*} */
+  #partInfo = undefined;
+  #currentValue = undefined;
+
+  /**
+   * @param {import('lit/directive.js').PartInfo} partInfo - Information about the part this directive is bound to
+   */
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== PartType.ATTRIBUTE && partInfo.type !== PartType.ELEMENT) {
+      throw new Error(
+        'contextMetaProviderDirective can only be used in an attribute or element directive.'
+      );
+    }
+
+    this.#partInfo = partInfo;
+  }
+
+  /**
+   * Main render method called by Lit.
+   * @param {*} value - The context value to provide.
+   * @param {{
+   *  context?: *,
+   *  initialValue?: import('@lit/context').ContextType<*>,
+   * }} context - The context object.
+   * @returns {unknown} - The serialized context value or noChange.
+   */
+  render(value, context) {
+    if (value !== this.#currentValue) {
+      this.#currentValue = value;
+      this.updateValue(value, context);
+      return this.resolveAttrValue();
+    }
+    return noChange;
+  }
+
+  /**
+   * Updates the context value for the element.
+   * @param {*} value - The new context value.
+   * @param {{
+   *  context?: *,
+   *  initialValue?: import('@lit/context').ContextType<*>,
+   * }} context - The context object.
+   */
+  updateValue(value, context) {
+    const element = this.#partInfo.element;
+    cacheContextMetaProvider(element, context);
+    element[contextMetaKeyProvider].setValue(value);
+  }
+
+  /**
+   * Decides whether to return the currentValue if the directive is used as an attribute.
+   * @returns {unknown} - The serialized context value or noChange.
+   */
+  resolveAttrValue() {
+    if (this.#partInfo.type !== PartType.ATTRIBUTE) {
+      return noChange;
+    }
+    return this.#currentValue;
+  }
+}
+
+export const contextMetaProvider = directive(ContextMetaProviderDirective);

package/src/index.js

@@ -1,2 +1,7 @@
 export {BlockquoteControllerContextMeta} from './BlockquoteControllerContextMeta.js';
 export {BaseContextMetaElement} from './BaseContextMetaElement.js';
+export {contextMetaProvider} from './directives/context-meta-provider.js';
+export {
+  cacheContextMetaProvider,
+  contextMetaKeyProvider,
+} from './directives/cache-context-meta-provider.js';