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

package/README.md

@@ -1,55 +1,10 @@
 ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
 
-`BaseContextMetaElement` simulates the behavior of a `div` using ARIA roles,
-preserving standard HTML behaviors while enhancing functionality.
-
-## Demo
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/oscarmarina/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.
-
-## 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)
-
-> 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).
-
-
-<hr>
-
-
-### `src/BaseContextMetaElement.js`:
-
-#### class: `BaseContextMetaElement`, `base-context-meta`
-
-<hr/>
-
-#### Exports
-
-| 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)
-
 `BlockquoteControllerContextMeta` is a Lit Reactive Controller that encapsulates the controllers provided by [@lit/context](https://lit.dev/docs/data/context/)
 
 **Features:**
-- It enables a component to serve as both a provider and a consumer.
-- It places the consumer after the first update to reduce the chance of a consumer in LightDOM requesting a context that currently lacks a provider.
-- Create a context object using a global symbol (Symbol.for('my-context')).
-
+- Allows a component to act simultaneously as a provider and a consumer.
+- Delays consumer initialization until after the first update, minimizing the risk of a consumer in the Light DOM requesting a context before a provider is available.
 <hr>
 
 ### Demo
@@ -233,3 +188,47 @@ customElements.define('consumer-el', ConsumerEl);
 | Kind | Name                  | Declaration         | Module                                  | Package |
 | ---- | --------------------- | ------------------- | --------------------------------------- | ------- |
 | `js` | `contextMetaProvider` | contextMetaProvider | src/directives/context-meta-provider.js |         |
+
+---
+
+![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
+
+`BaseContextMetaElement` emulates the behavior of a flow element using ARIA, preserving standard HTML functionality while enhancing its features.
+
+## Demo
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/oscarmarina/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.
+
+## 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)
+
+> 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).
+
+
+<hr>
+
+
+### `src/BaseContextMetaElement.js`:
+
+#### class: `BaseContextMetaElement`, `base-context-meta`
+
+<hr/>
+
+#### Exports
+
+| Kind                        | Name                     | Declaration            | Module                        | Package |
+| --------------------------- | ------------------------ | ---------------------- | ----------------------------- | ------- |
+| `js`                        | `BaseContextMetaElement` | BaseContextMetaElement | src/BaseContextMetaElement.js |         |
+| `custom-element-definition` | `base-context-meta`      | BaseContextMetaElement | src/BaseContextMetaElement.js |         |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-controller-context-meta",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Webcomponent blockquote-controller-context-meta following open-wc recommendations",
   "keywords": [
     "lit",
@@ -121,12 +121,12 @@
     "lit": "^3.2.1"
   },
   "devDependencies": {
-    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.11.2",
-    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.12.9"
+    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.11.3",
+    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.12.10"
   },
   "publishConfig": {
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "9a325725a904f541664565dd720f4bb6b2f0fa05"
+  "gitHead": "916dc8f19533a507267a049a0ae56e06ce5e69d3"
 }

package/src/BaseContextMetaElement.js

@@ -3,8 +3,7 @@ import {LitElement, html, css} from 'lit';
 /**
  * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
  *
- * `BaseContextMetaElement` simulates the behavior of a `div` using ARIA roles,
- * preserving standard HTML behaviors while enhancing functionality.
+ * `BaseContextMetaElement` emulates the behavior of a flow element using ARIA, preserving standard HTML functionality while enhancing its features.
  *
  * ## Demo
  *
@@ -35,6 +34,7 @@ export class BaseContextMetaElement extends LitElement {
     :host {
       display: block;
     }
+
     :host([hidden]),
     [hidden] {
       display: none !important;

package/src/BlockquoteControllerContextMeta.js

@@ -7,10 +7,8 @@ export const contextMetaSymbol = Symbol.for('context-meta-symbol');
  * `BlockquoteControllerContextMeta` is a Lit Reactive Controller that encapsulates the controllers provided by [@lit/context](https://lit.dev/docs/data/context/)
  *
  * **Features:**
- * - It enables a component to serve as both a provider and a consumer.
- * - It places the consumer after the first update to reduce the chance of a consumer in LightDOM requesting a context that currently lacks a provider.
- * - Create a context object using a global symbol (Symbol.for('my-context')).
- *
+ * - Allows a component to act simultaneously as a provider and a consumer.
+ * - Delays consumer initialization until after the first update, minimizing the risk of a consumer in the Light DOM requesting a context before a provider is available.
  * <hr>
  *
  * ### Demo
@@ -135,10 +133,13 @@ class ContextMeta {
 
   async hostConnected() {
     await this.host.updateComplete;
-    this._contextMetaConsumer = new ContextConsumer(this.host, {
-      context: this.context,
-      subscribe: true,
-      callback: this.callback,
+    // Await possible asynchronous completion of the host's update lifecycle
+    window.queueMicrotask(() => {
+      this._contextMetaConsumer = new ContextConsumer(this.host, {
+        context: this.context,
+        subscribe: true,
+        callback: this.callback,
+      });
     });
   }
 }

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

@@ -3,30 +3,29 @@ 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.
+ * `contextMetaProviderDirective` is a Lit directive that enables normal DOM elements to act as context providers.
+ * You can use this directive 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/).
+ * This directive transforms a DOM element into a Lit context provider using the BlockquoteControllerContextMeta class, a
+ * Lit Reactive Controller that encapsulates controllers provided by [@lit/context](https://lit.dev/docs/data/context/).
  *
  * ## Features
- * - Allows non-Lit elements to provide context.
+ * - Enables 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)}"">
+ *   //
+ *   <div data-info="${contextMetaProviderDirective(myContext, someValue)}">
  *     <!-- Children can consume the provided context -->
  *   </div>
- * ```;
+ * ```
  */
 class ContextMetaProviderDirective extends Directive {
   /** @type {*} */