@justeattakeaway/pie-webc-core 16.0.0 → 16.1.1

package/dist/index.js

@@ -1,7 +1,12 @@
 import { customElement as d } from "lit/decorators.js";
-const p = (t, s, i) => function(n, r) {
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const p = Symbol("pie-aria"), m = Symbol("pie-parent-disabled"), v = (t, s, n) => function(i, r) {
   const o = `#${r}`;
-  Object.defineProperty(n, r, {
+  Object.defineProperty(i, r, {
     get() {
       return this[o];
     },
@@ -9,41 +14,41 @@ const p = (t, s, i) => function(n, r) {
       s.includes(a) ? this[o] = a : (console.error(
         `<${t}> Invalid value "${a}" provided for property "${r}".`,
         `Must be one of: ${s.join(" | ")}.`,
-        `Falling back to default value: "${i}"`
-      ), this[o] = i);
+        `Falling back to default value: "${n}"`
+      ), this[o] = n);
     },
     configurable: !0
   });
-}, u = (t) => t == null || typeof t == "string" && t.trim() === "", v = (t) => function(i, e) {
-  const n = `#${e}`, r = `#${e}HasBeenSet`, o = `#${e}HasWarned`;
-  Object.defineProperty(i, e, {
+}, u = (t) => t == null || typeof t == "string" && t.trim() === "", g = (t) => function(n, e) {
+  const i = `#${e}`, r = `#${e}HasBeenSet`, o = `#${e}HasWarned`;
+  Object.defineProperty(n, e, {
     get() {
-      return this[n];
+      return this[i];
     },
     set(l) {
-      this[r] = !0, u(l) && console.error(`<${t}> Missing required attribute "${e}"`), this[n] = l;
+      this[r] = !0, u(l) && console.error(`<${t}> Missing required attribute "${e}"`), this[i] = l;
     },
     configurable: !0
   });
-  const a = i, c = a.connectedCallback;
+  const a = n, c = a.connectedCallback;
   a.connectedCallback = function() {
     c == null || c.call(this), !this[r] && !this[o] && (this[o] = !0, console.error(`<${t}> Missing required attribute "${e}"`));
   };
 };
-function m(t) {
+function x(t) {
   return (s) => {
     try {
       d(t)(s);
-    } catch (i) {
-      const e = customElements.get(t), n = e == null ? void 0 : e.v;
-      s.v !== n && console.warn(
-        `PIE Web Component: "${t}" was already registered with version: ${n ?? "No version data found. Icon components do not contain version data. If the component is not an icon, please report the missing version data."}.`,
-        i
+    } catch (n) {
+      const e = customElements.get(t), i = e == null ? void 0 : e.v;
+      s.v !== i && console.warn(
+        `PIE Web Component: "${t}" was already registered with version: ${i ?? "No version data found. Icon components do not contain version data. If the component is not an icon, please report the missing version data."}.`,
+        n
       );
     }
   };
 }
-function g(t) {
+function L(t) {
   return new CustomEvent(t.type, {
     detail: {
       sourceEvent: t
@@ -52,19 +57,19 @@ function g(t) {
     cancelable: t.cancelable
   });
 }
-function x(t, s, i) {
+function M(t, s, n) {
   s.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
   const e = new CustomEvent(s, {
     bubbles: !0,
     composed: !0,
-    detail: i
+    detail: n
   });
   t.dispatchEvent(e);
 }
 function b() {
   return typeof navigator < "u" && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 }
-const L = (t) => {
+const T = (t) => {
   class s extends t {
     constructor() {
       super(...arguments), this._isRTL = !1, this.observer = null;
@@ -96,23 +101,23 @@ const L = (t) => {
     }
   }
   return s;
-}, M = (t) => {
-  const i = class i extends t {
+}, $ = (t) => {
+  const n = class n extends t {
     get form() {
       return this._internals.form;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(...n) {
-      super(...n), this._internals = this.attachInternals();
+    constructor(...i) {
+      super(...i), this._internals = this.attachInternals();
     }
   };
-  i.formAssociated = !0;
-  let s = i;
+  n.formAssociated = !0;
+  let s = n;
   return s;
-}, T = (t) => {
-  const i = class i extends t {
+}, E = (t) => {
+  const n = class n extends t {
   };
-  i.shadowRootOptions = {
+  n.shadowRootOptions = {
     // The `as any` cast is a safe way to access the static property
     // from the generic superclass constructor. LitElement provides a default.
     // This is unfortunately unavoidable and a common issue with mixins in TS.
@@ -120,12 +125,12 @@ const L = (t) => {
     ...t.shadowRootOptions,
     delegatesFocus: !0
   };
-  let s = i;
+  let s = n;
   return s;
-}, h = (t) => Array.from(t).map((i) => {
+}, h = (t) => Array.from(t).map((n) => {
   var e;
-  return ((e = i.textContent) == null ? void 0 : e.replace(/\s+/g, " ").trim()) ?? "";
-}).filter(Boolean).join(" ").trim() || void 0, $ = (t) => {
+  return ((e = n.textContent) == null ? void 0 : e.replace(/\s+/g, " ").trim()) ?? "";
+}).filter(Boolean).join(" ").trim() || void 0, w = (t) => {
   class s extends t {
     get associatedLabelText() {
       return this._associatedLabelText;
@@ -142,23 +147,25 @@ const L = (t) => {
     }
     observeAssociatedLabels() {
       const { labels: e } = this._internals;
-      !b() || !e.length || (this.updateAssociatedLabelText(), this._labelMutationObserver = new MutationObserver(() => this.updateAssociatedLabelText()), e.forEach((n) => {
+      !b() || !e.length || (this.updateAssociatedLabelText(), this._labelMutationObserver = new MutationObserver(() => this.updateAssociatedLabelText()), e.forEach((i) => {
         var r;
-        (r = this._labelMutationObserver) == null || r.observe(n, { childList: !0, characterData: !0, subtree: !0 });
+        (r = this._labelMutationObserver) == null || r.observe(i, { childList: !0, characterData: !0, subtree: !0 });
       }));
     }
   }
   return s;
 };
 export {
-  $ as AssociatedLabelMixin,
-  T as DelegatesFocusMixin,
-  M as FormControlMixin,
-  L as RtlMixin,
-  x as dispatchCustomEvent,
+  w as AssociatedLabelMixin,
+  E as DelegatesFocusMixin,
+  $ as FormControlMixin,
+  T as RtlMixin,
+  p as ariaContext,
+  M as dispatchCustomEvent,
   b as isSafari,
-  v as requiredProperty,
-  m as safeCustomElement,
-  p as validPropertyValues,
-  g as wrapNativeEvent
+  m as parentDisabledContext,
+  g as requiredProperty,
+  x as safeCustomElement,
+  v as validPropertyValues,
+  L as wrapNativeEvent
 };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "16.0.0",
+  "version": "16.1.1",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "dist/index.js",
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "files": [
+    "src/context",
     "src/decorators",
     "src/functions",
     "src/interfaces",
@@ -25,7 +26,8 @@
     "test:watch": "run -T vitest"
   },
   "dependencies": {
-    "lit": "3.2.0"
+    "@lit/context": "1.1.6",
+    "lit": "3.3.3"
   },
   "peerDependencies": {
     "@justeattakeaway/pie-css": "1.x"

package/src/context/aria-context.ts

@@ -0,0 +1,35 @@
+import { createContext } from '@lit/context';
+
+/**
+ * A bag of accessible-name/description values an ancestor component can supply to a descendant
+ * across the shadow boundary (where `aria-labelledby` / `aria-describedby` IDREFs cannot reach).
+ * Restricted to string ARIA that can be applied directly to an element.
+ *
+ * This is deliberately an extensible bag: any provider can set it (for example a `pie-list-item`
+ * stitching its text), and any component can consume it and decide for itself what to do with each
+ * field, applying it to whichever element carries its semantics. Extend it with further optional
+ * string/boolean ARIA as needed; a consumer simply ignores fields it does not apply. There is no
+ * shared "apply" helper on purpose: where and how each field maps is component-specific (a radio
+ * names its host, a checkbox its internal input), so each subscriber owns that logic even if a
+ * little set/remove code is repeated. That keeps the contract open to new ARIA without a central
+ * mapper having to know how every component applies it.
+ */
+export interface ContextualAria {
+    label?: string;
+    description?: string;
+}
+
+/**
+ * Context carrying a `ContextualAria` from a provider down to a consuming component. `undefined`
+ * when no ancestor provides ARIA (for example a standalone control).
+ *
+ * Why a context rather than ARIA props on each component:
+ * - it lets a wrapper name a control it does not own, carrying a resolved string across the shadow
+ *   boundary that `aria-labelledby` / `aria-describedby` IDREFs cannot cross;
+ * - it reaches consumers at any depth below the provider without prop drilling through the layers
+ *   in between;
+ * - it decouples provider from consumer (neither needs a reference to, or knowledge of, the other)
+ *   and is extensible by adding optional fields that consumers opt into.
+ * It is always a fallback behind a control's own ARIA props.
+ */
+export const ariaContext = createContext<ContextualAria | undefined>(Symbol('pie-aria'));

package/src/context/disabled-context.ts

@@ -0,0 +1,12 @@
+import { createContext } from '@lit/context';
+
+/**
+ * Context a container uses to tell its descendants it is disabled, so they can reflect it (for
+ * example a disabled `pie-radio-group` / `pie-checkbox-group` suppressing a `pie-list-item`'s
+ * interactive hover and active states). Defaults to `false` when no ancestor provides it.
+ *
+ * This is deliberately generic: any disabling ancestor can provide it and any descendant can
+ * consume it. Like `ariaContext`, it crosses shadow boundaries and reaches descendants at any depth
+ * without prop drilling, and decouples the provider from the consumer.
+ */
+export const parentDisabledContext = createContext<boolean>(Symbol('pie-parent-disabled'));

package/src/context/index.ts

@@ -0,0 +1,2 @@
+export * from './aria-context';
+export * from './disabled-context';

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './context';
 export * from './decorators';
 export * from './functions';
 export * from './interfaces';