@justeattakeaway/pie-switch 2.5.5 → 2.6.0

package/custom-elements.json

@@ -142,6 +142,14 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_contextAria",
+              "type": {
+                "text": "ContextualAria | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "input",

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PI
     value: string;
     name: SwitchProps['name'];
     disabled: boolean;
+    private _contextAria?;
     private input;
     private switchBody;
     focusTarget: HTMLElement;

package/dist/index.js

@@ -1,23 +1,76 @@
-import { LitElement as Se, nothing as P, html as B, unsafeCSS as Ve } from "lit";
-import { unsafeStatic as Te, html as Le } from "lit/static-html.js";
-import { property as y, query as U, state as Ne } from "lit/decorators.js";
-import { classMap as Pe } from "lit/directives/class-map.js";
-import { ifDefined as _e } from "lit/directives/if-defined.js";
-import { live as Oe } from "lit/directives/live.js";
-import { AssociatedLabelMixin as $e, FormControlMixin as De, DelegatesFocusMixin as Re, wrapNativeEvent as He, validPropertyValues as We, safeCustomElement as ze } from "@justeattakeaway/pie-webc-core";
+import { LitElement as _t, nothing as O, html as U, unsafeCSS as Nt } from "lit";
+import { unsafeStatic as Pt, html as Ot } from "lit/static-html.js";
+import { property as E, state as bt, query as K } from "lit/decorators.js";
+import { classMap as ht } from "lit/directives/class-map.js";
+import { ifDefined as ut } from "lit/directives/if-defined.js";
+import { live as $t } from "lit/directives/live.js";
+import { AssociatedLabelMixin as Dt, FormControlMixin as Rt, DelegatesFocusMixin as Ht, wrapNativeEvent as Wt, validPropertyValues as zt, safeCustomElement as qt, ariaContext as Bt } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
-const _ = class _ extends Se {
+const $ = class $ extends _t {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", _.v);
+    this.getAttribute("v") || this.setAttribute("v", $.v);
   }
 };
-_.v = "2.5.5";
-let q = _;
-var he = {}, ue;
-function Be() {
-  return ue || (ue = 1, (function() {
-    (function(n) {
-      const l = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), S = {
+$.v = "2.6.0";
+let j = $;
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let Ut = class extends Event {
+  constructor(c, d, h, l) {
+    super("context-request", { bubbles: !0, composed: !0 }), this.context = c, this.contextTarget = d, this.callback = h, this.subscribe = l ?? !1;
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class pt {
+  constructor(c, d, h, l) {
+    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (p, v) => {
+      this.unsubscribe && (this.unsubscribe !== v && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = p, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(p, v)), this.unsubscribe = v;
+    }, this.host = c, d.context !== void 0) {
+      const p = d;
+      this.context = p.context, this.callback = p.callback, this.subscribe = p.subscribe ?? !1;
+    } else this.context = d, this.callback = h, this.subscribe = l ?? !1;
+    this.host.addController(this);
+  }
+  hostConnected() {
+    this.dispatchRequest();
+  }
+  hostDisconnected() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
+  }
+  dispatchRequest() {
+    this.host.dispatchEvent(new Ut(this.context, this.host, this.t, this.subscribe));
+  }
+}
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function jt({ context: s, subscribe: c }) {
+  return (d, h) => {
+    typeof h == "object" ? h.addInitializer((function() {
+      new pt(this, { context: s, callback: (l) => {
+        d.set.call(this, l);
+      }, subscribe: c });
+    })) : d.constructor.addInitializer(((l) => {
+      new pt(l, { context: s, callback: (p) => {
+        l[h] = p;
+      }, subscribe: c });
+    }));
+  };
+}
+var mt = {}, ft;
+function Kt() {
+  return ft || (ft = 1, (function() {
+    (function(s) {
+      const c = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), T = {
         ariaAtomic: "aria-atomic",
         ariaAutoComplete: "aria-autocomplete",
         ariaBusy: "aria-busy",
@@ -60,278 +113,278 @@ function Be() {
         ariaValueNow: "aria-valuenow",
         ariaValueText: "aria-valuetext",
         role: "role"
-      }, pe = (t, e) => {
-        for (let i in S) {
-          e[i] = null;
+      }, vt = (e, t) => {
+        for (let i in T) {
+          t[i] = null;
           let a = null;
-          const r = S[i];
-          Object.defineProperty(e, i, {
+          const r = T[i];
+          Object.defineProperty(t, i, {
             get() {
               return a;
             },
             set(o) {
-              a = o, t.isConnected ? t.setAttribute(r, o) : M.set(t, e);
+              a = o, e.isConnected ? e.setAttribute(r, o) : x.set(e, t);
             }
           });
         }
       };
-      function Q(t) {
-        const e = c.get(t), { form: i } = e;
-        ie(t, i, e), te(t, e.labels);
+      function Q(e) {
+        const t = l.get(e), { form: i } = t;
+        it(e, i, t), et(e, t.labels);
       }
-      const X = (t, e = !1) => {
-        const i = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT, {
+      const X = (e, t = !1) => {
+        const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
           acceptNode(o) {
-            return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+            return l.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
           }
         });
         let a = i.nextNode();
-        const r = !e || t.disabled;
+        const r = !t || e.disabled;
         for (; a; )
-          a.formDisabledCallback && r && D(a, t.disabled), a = i.nextNode();
-      }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = N() ? new MutationObserver((t) => {
-        for (const e of t) {
-          const i = e.target;
-          if (e.attributeName === "disabled" && (i.constructor.formAssociated ? D(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && X(i)), e.attributeName === "name" && i.constructor.formAssociated) {
-            const a = c.get(i), r = F.get(i);
+          a.formDisabledCallback && r && H(a, e.disabled), a = i.nextNode();
+      }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, L = P() ? new MutationObserver((e) => {
+        for (const t of e) {
+          const i = t.target;
+          if (t.attributeName === "disabled" && (i.constructor.formAssociated ? H(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && X(i)), t.attributeName === "name" && i.constructor.formAssociated) {
+            const a = l.get(i), r = S.get(i);
             a.setFormValue(r);
           }
         }
       }) : {};
-      function O(t) {
-        t.forEach((e) => {
-          const { addedNodes: i, removedNodes: a } = e, r = Array.from(i), o = Array.from(a);
-          r.forEach((s) => {
-            var m;
-            if (c.has(s) && s.constructor.formAssociated && Q(s), M.has(s)) {
-              const h = M.get(s);
-              Object.keys(S).filter((v) => h[v] !== null).forEach((v) => {
-                s.setAttribute(S[v], h[v]);
-              }), M.delete(s);
+      function D(e) {
+        e.forEach((t) => {
+          const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), o = Array.from(a);
+          r.forEach((n) => {
+            var f;
+            if (l.has(n) && n.constructor.formAssociated && Q(n), x.has(n)) {
+              const u = x.get(n);
+              Object.keys(T).filter((g) => u[g] !== null).forEach((g) => {
+                n.setAttribute(T[g], u[g]);
+              }), x.delete(n);
             }
-            if (I.has(s)) {
-              const h = I.get(s);
-              s.setAttribute("internals-valid", h.validity.valid.toString()), s.setAttribute("internals-invalid", (!h.validity.valid).toString()), s.setAttribute("aria-invalid", (!h.validity.valid).toString()), I.delete(s);
+            if (V.has(n)) {
+              const u = V.get(n);
+              n.setAttribute("internals-valid", u.validity.valid.toString()), n.setAttribute("internals-invalid", (!u.validity.valid).toString()), n.setAttribute("aria-invalid", (!u.validity.valid).toString()), V.delete(n);
             }
-            if (s.localName === "form") {
-              const h = b.get(s), g = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
-                acceptNode(z) {
-                  return c.has(z) && z.constructor.formAssociated && !(h && h.has(z)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+            if (n.localName === "form") {
+              const u = w.get(n), k = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
+                acceptNode(B) {
+                  return l.has(B) && B.constructor.formAssociated && !(u && u.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
                 }
               });
-              let v = g.nextNode();
-              for (; v; )
-                Q(v), v = g.nextNode();
+              let g = k.nextNode();
+              for (; g; )
+                Q(g), g = k.nextNode();
             }
-            s.localName === "fieldset" && ((m = V.observe) === null || m === void 0 || m.call(V, s, Y), X(s, !0));
-          }), o.forEach((s) => {
-            const m = c.get(s);
-            m && u.get(m) && Z(m), C.has(s) && C.get(s).disconnect();
+            n.localName === "fieldset" && ((f = L.observe) === null || f === void 0 || f.call(L, n, Y), X(n, !0));
+          }), o.forEach((n) => {
+            const f = l.get(n);
+            f && h.get(f) && Z(f), C.has(n) && C.get(n).disconnect();
           });
         });
       }
-      function me(t) {
-        t.forEach((e) => {
-          const { removedNodes: i } = e;
+      function wt(e) {
+        e.forEach((t) => {
+          const { removedNodes: i } = t;
           i.forEach((a) => {
-            const r = G.get(e.target);
-            c.has(a) && re(a), r.disconnect();
+            const r = G.get(t.target);
+            l.has(a) && rt(a), r.disconnect();
           });
         });
       }
-      const fe = (t) => {
-        var e, i;
-        const a = new MutationObserver(me);
-        !((e = window == null ? void 0 : window.ShadyDOM) === null || e === void 0) && e.inUse && t.mode && t.host && (t = t.host), (i = a.observe) === null || i === void 0 || i.call(a, t, { childList: !0 }), G.set(t, a);
+      const gt = (e) => {
+        var t, i;
+        const a = new MutationObserver(wt);
+        !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = a.observe) === null || i === void 0 || i.call(a, e, { childList: !0 }), G.set(e, a);
       };
-      N() && new MutationObserver(O);
-      const $ = {
+      P() && new MutationObserver(D);
+      const R = {
         childList: !0,
         subtree: !0
-      }, D = (t, e) => {
-        t.toggleAttribute("internals-disabled", e), e ? t.setAttribute("aria-disabled", "true") : t.removeAttribute("aria-disabled"), t.formDisabledCallback && t.formDisabledCallback.apply(t, [e]);
-      }, Z = (t) => {
-        u.get(t).forEach((i) => {
+      }, H = (e, t) => {
+        e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
+      }, Z = (e) => {
+        h.get(e).forEach((i) => {
           i.remove();
-        }), u.set(t, []);
-      }, ee = (t, e) => {
+        }), h.set(e, []);
+      }, tt = (e, t) => {
         const i = document.createElement("input");
-        return i.type = "hidden", i.name = t.getAttribute("name"), t.after(i), u.get(e).push(i), i;
-      }, be = (t, e) => {
+        return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), h.get(t).push(i), i;
+      }, yt = (e, t) => {
         var i;
-        u.set(e, []), (i = V.observe) === null || i === void 0 || i.call(V, t, Y);
-      }, te = (t, e) => {
-        if (e.length) {
-          Array.from(e).forEach((a) => a.addEventListener("click", t.click.bind(t)));
-          let i = e[0].id;
-          e[0].id || (i = `${e[0].htmlFor}_Label`, e[0].id = i), t.setAttribute("aria-labelledby", i);
-        }
-      }, T = (t) => {
-        const e = Array.from(t.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = b.get(t) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), r = [...e, ...a].includes(!1);
-        t.toggleAttribute("internals-invalid", r), t.toggleAttribute("internals-valid", !r);
-      }, ve = (t) => {
-        T(L(t.target));
-      }, we = (t) => {
-        T(L(t.target));
-      }, ge = (t) => {
-        const e = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${t.id ? `,${i}[form='${t.id}']` : ""}`).join(",");
-        t.addEventListener("click", (i) => {
-          if (i.target.closest(e)) {
-            const r = b.get(t);
-            if (t.noValidate)
+        h.set(t, []), (i = L.observe) === null || i === void 0 || i.call(L, e, Y);
+      }, et = (e, t) => {
+        if (t.length) {
+          Array.from(t).forEach((a) => a.addEventListener("click", e.click.bind(e)));
+          let i = t[0].id;
+          t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
+        }
+      }, _ = (e) => {
+        const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = w.get(e) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => l.get(o).validity.valid), r = [...t, ...a].includes(!1);
+        e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
+      }, kt = (e) => {
+        _(N(e.target));
+      }, Et = (e) => {
+        _(N(e.target));
+      }, xt = (e) => {
+        const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
+        e.addEventListener("click", (i) => {
+          if (i.target.closest(t)) {
+            const r = w.get(e);
+            if (e.noValidate)
               return;
-            r.size && Array.from(r).reverse().map((m) => c.get(m).reportValidity()).includes(!1) && i.preventDefault();
+            r.size && Array.from(r).reverse().map((f) => l.get(f).reportValidity()).includes(!1) && i.preventDefault();
           }
         });
-      }, ye = (t) => {
-        const e = b.get(t.target);
-        e && e.size && e.forEach((i) => {
+      }, Mt = (e) => {
+        const t = w.get(e.target);
+        t && t.size && t.forEach((i) => {
           i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
         });
-      }, ie = (t, e, i) => {
-        if (e) {
-          const a = b.get(e);
+      }, it = (e, t, i) => {
+        if (t) {
+          const a = w.get(t);
           if (a)
-            a.add(t);
+            a.add(e);
           else {
             const r = /* @__PURE__ */ new Set();
-            r.add(t), b.set(e, r), ge(e), e.addEventListener("reset", ye), e.addEventListener("input", ve), e.addEventListener("change", we);
+            r.add(e), w.set(t, r), xt(t), t.addEventListener("reset", Mt), t.addEventListener("input", kt), t.addEventListener("change", Et);
           }
-          E.set(e, { ref: t, internals: i }), t.constructor.formAssociated && t.formAssociatedCallback && setTimeout(() => {
-            t.formAssociatedCallback.apply(t, [e]);
-          }, 0), T(e);
-        }
-      }, L = (t) => {
-        let e = t.parentNode;
-        return e && e.tagName !== "FORM" && (e = L(e)), e;
-      }, w = (t, e, i = DOMException) => {
-        if (!t.constructor.formAssociated)
-          throw new i(e);
-      }, ae = (t, e, i) => {
-        const a = b.get(t);
+          v.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
+            e.formAssociatedCallback.apply(e, [t]);
+          }, 0), _(t);
+        }
+      }, N = (e) => {
+        let t = e.parentNode;
+        return t && t.tagName !== "FORM" && (t = N(t)), t;
+      }, y = (e, t, i = DOMException) => {
+        if (!e.constructor.formAssociated)
+          throw new i(t);
+      }, at = (e, t, i) => {
+        const a = w.get(e);
         return a && a.size && a.forEach((r) => {
-          c.get(r)[i]() || (e = !1);
-        }), e;
-      }, re = (t) => {
-        if (t.constructor.formAssociated) {
-          const e = c.get(t), { labels: i, form: a } = e;
-          te(t, i), ie(t, a, e);
+          l.get(r)[i]() || (t = !1);
+        }), t;
+      }, rt = (e) => {
+        if (e.constructor.formAssociated) {
+          const t = l.get(e), { labels: i, form: a } = t;
+          et(e, i), it(e, a, t);
         }
       };
-      function N() {
+      function P() {
         return typeof MutationObserver < "u";
       }
-      class ke {
+      class Ct {
         constructor() {
           this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
         }
       }
-      const Ee = (t) => (t.badInput = !1, t.customError = !1, t.patternMismatch = !1, t.rangeOverflow = !1, t.rangeUnderflow = !1, t.stepMismatch = !1, t.tooLong = !1, t.tooShort = !1, t.typeMismatch = !1, t.valid = !0, t.valueMissing = !1, t), Me = (t, e, i) => (t.valid = xe(e), Object.keys(e).forEach((a) => t[a] = e[a]), i && T(i), t), xe = (t) => {
-        let e = !0;
-        for (let i in t)
-          i !== "valid" && t[i] !== !1 && (e = !1);
-        return e;
-      }, R = /* @__PURE__ */ new WeakMap();
-      function oe(t, e) {
-        t.toggleAttribute(e, !0), t.part && t.part.add(e);
+      const At = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), Ft = (e, t, i) => (e.valid = It(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && _(i), e), It = (e) => {
+        let t = !0;
+        for (let i in e)
+          i !== "valid" && e[i] !== !1 && (t = !1);
+        return t;
+      }, W = /* @__PURE__ */ new WeakMap();
+      function st(e, t) {
+        e.toggleAttribute(t, !0), e.part && e.part.add(t);
       }
-      class H extends Set {
+      class z extends Set {
         static get isPolyfilled() {
           return !0;
         }
-        constructor(e) {
-          if (super(), !e || !e.tagName || e.tagName.indexOf("-") === -1)
+        constructor(t) {
+          if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
             throw new TypeError("Illegal constructor");
-          R.set(this, e);
-        }
-        add(e) {
-          if (!/^--/.test(e) || typeof e != "string")
-            throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${e} must start with '--'.`);
-          const i = super.add(e), a = R.get(this), r = `state${e}`;
-          return a.isConnected ? oe(a, r) : setTimeout(() => {
-            oe(a, r);
+          W.set(this, t);
+        }
+        add(t) {
+          if (!/^--/.test(t) || typeof t != "string")
+            throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
+          const i = super.add(t), a = W.get(this), r = `state${t}`;
+          return a.isConnected ? st(a, r) : setTimeout(() => {
+            st(a, r);
           }), i;
         }
         clear() {
-          for (let [e] of this.entries())
-            this.delete(e);
+          for (let [t] of this.entries())
+            this.delete(t);
           super.clear();
         }
-        delete(e) {
-          const i = super.delete(e), a = R.get(this);
-          return a.isConnected ? (a.toggleAttribute(`state${e}`, !1), a.part && a.part.remove(`state${e}`)) : setTimeout(() => {
-            a.toggleAttribute(`state${e}`, !1), a.part && a.part.remove(`state${e}`);
+        delete(t) {
+          const i = super.delete(t), a = W.get(this);
+          return a.isConnected ? (a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`)) : setTimeout(() => {
+            a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`);
           }), i;
         }
       }
-      function se(t, e, i, a) {
-        if (typeof e == "function" ? t !== e || !a : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return i === "m" ? a : i === "a" ? a.call(t) : a ? a.value : e.get(t);
+      function ot(e, t, i, a) {
+        if (typeof t == "function" ? e !== t || !a : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return i === "m" ? a : i === "a" ? a.call(e) : a ? a.value : t.get(e);
       }
-      function Ce(t, e, i, a, r) {
-        if (typeof e == "function" ? t !== e || !0 : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return e.set(t, i), i;
+      function St(e, t, i, a, r) {
+        if (typeof t == "function" ? e !== t || !0 : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return t.set(e, i), i;
       }
-      var A;
-      class Ae {
-        constructor(e) {
-          A.set(this, void 0), Ce(this, A, e);
-          for (let i = 0; i < e.length; i++) {
-            let a = e[i];
+      var I;
+      class Vt {
+        constructor(t) {
+          I.set(this, void 0), St(this, I, t);
+          for (let i = 0; i < t.length; i++) {
+            let a = t[i];
             this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
           }
           Object.freeze(this);
         }
         get length() {
-          return se(this, A, "f").length;
+          return ot(this, I, "f").length;
         }
-        [(A = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-          return se(this, A, "f")[Symbol.iterator]();
+        [(I = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+          return ot(this, I, "f")[Symbol.iterator]();
         }
-        item(e) {
-          return this[e] == null ? null : this[e];
+        item(t) {
+          return this[t] == null ? null : this[t];
         }
-        namedItem(e) {
-          return this[e] == null ? null : this[e];
+        namedItem(t) {
+          return this[t] == null ? null : this[t];
         }
       }
-      function Fe() {
-        const t = HTMLFormElement.prototype.checkValidity;
+      function Tt() {
+        const e = HTMLFormElement.prototype.checkValidity;
         HTMLFormElement.prototype.checkValidity = i;
-        const e = HTMLFormElement.prototype.reportValidity;
+        const t = HTMLFormElement.prototype.reportValidity;
         HTMLFormElement.prototype.reportValidity = a;
         function i(...o) {
-          let s = t.apply(this, o);
-          return ae(this, s, "checkValidity");
+          let n = e.apply(this, o);
+          return at(this, n, "checkValidity");
         }
         function a(...o) {
-          let s = e.apply(this, o);
-          return ae(this, s, "reportValidity");
+          let n = t.apply(this, o);
+          return at(this, n, "reportValidity");
         }
         const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
         Object.defineProperty(HTMLFormElement.prototype, "elements", {
           get(...o) {
-            const s = r.call(this, ...o), m = Array.from(b.get(this) || []);
-            if (m.length === 0)
-              return s;
-            const h = Array.from(s).concat(m).sort((g, v) => g.compareDocumentPosition ? g.compareDocumentPosition(v) & 2 ? 1 : -1 : 0);
-            return new Ae(h);
+            const n = r.call(this, ...o), f = Array.from(w.get(this) || []);
+            if (f.length === 0)
+              return n;
+            const u = Array.from(n).concat(f).sort((k, g) => k.compareDocumentPosition ? k.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
+            return new Vt(u);
           }
         });
       }
-      class ne {
+      class nt {
         static get isPolyfilled() {
           return !0;
         }
-        constructor(e) {
-          if (!e || !e.tagName || e.tagName.indexOf("-") === -1)
+        constructor(t) {
+          if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
             throw new TypeError("Illegal constructor");
-          const i = e.getRootNode(), a = new ke();
-          this.states = new H(e), l.set(this, e), d.set(this, a), c.set(e, this), pe(e, this), be(e, this), Object.seal(this), i instanceof DocumentFragment && fe(i);
+          const i = t.getRootNode(), a = new Ct();
+          this.states = new z(t), c.set(this, t), d.set(this, a), l.set(t, this), vt(t, this), yt(t, this), Object.seal(this), i instanceof DocumentFragment && gt(i);
         }
         checkValidity() {
-          const e = l.get(this);
-          if (w(e, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+          const t = c.get(this);
+          if (y(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
             return !0;
           const i = d.get(this);
           if (!i.valid) {
@@ -340,90 +393,90 @@ function Be() {
               cancelable: !0,
               composed: !1
             });
-            e.dispatchEvent(a);
+            t.dispatchEvent(a);
           }
           return i.valid;
         }
         get form() {
-          const e = l.get(this);
-          w(e, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+          const t = c.get(this);
+          y(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
           let i;
-          return e.constructor.formAssociated === !0 && (i = L(e)), i;
+          return t.constructor.formAssociated === !0 && (i = N(t)), i;
         }
         get labels() {
-          const e = l.get(this);
-          w(e, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
-          const i = e.getAttribute("id"), a = e.getRootNode();
+          const t = c.get(this);
+          y(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+          const i = t.getAttribute("id"), a = t.getRootNode();
           return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
         }
         reportValidity() {
-          const e = l.get(this);
-          if (w(e, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+          const t = c.get(this);
+          if (y(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
             return !0;
-          const i = this.checkValidity(), a = K.get(this);
-          if (a && !e.constructor.formAssociated)
+          const i = this.checkValidity(), a = F.get(this);
+          if (a && !t.constructor.formAssociated)
             throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
-          return !i && a && (e.focus(), a.focus()), i;
+          return !i && a && (t.focus(), a.focus()), i;
         }
-        setFormValue(e) {
-          const i = l.get(this);
-          if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Z(this), e != null && !(e instanceof FormData)) {
+        setFormValue(t) {
+          const i = c.get(this);
+          if (y(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Z(this), t != null && !(t instanceof FormData)) {
             if (i.getAttribute("name")) {
-              const a = ee(i, this);
-              a.value = e;
+              const a = tt(i, this);
+              a.value = t;
             }
-          } else e != null && e instanceof FormData && Array.from(e).reverse().forEach(([a, r]) => {
+          } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([a, r]) => {
             if (typeof r == "string") {
-              const o = ee(i, this);
+              const o = tt(i, this);
               o.name = a, o.value = r;
             }
           });
-          F.set(i, e);
+          S.set(i, t);
         }
-        setValidity(e, i, a) {
-          const r = l.get(this);
-          if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !e)
+        setValidity(t, i, a) {
+          const r = c.get(this);
+          if (y(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
             throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
-          K.set(this, a);
-          const o = d.get(this), s = {};
-          for (const g in e)
-            s[g] = e[g];
-          Object.keys(s).length === 0 && Ee(o);
-          const m = Object.assign(Object.assign({}, o), s);
-          delete m.valid;
-          const { valid: h } = Me(o, m, this.form);
-          if (!h && !i)
+          F.set(this, a);
+          const o = d.get(this), n = {};
+          for (const k in t)
+            n[k] = t[k];
+          Object.keys(n).length === 0 && At(o);
+          const f = Object.assign(Object.assign({}, o), n);
+          delete f.valid;
+          const { valid: u } = Ft(o, f, this.form);
+          if (!u && !i)
             throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
-          k.set(this, h ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !h), r.toggleAttribute("internals-valid", h), r.setAttribute("aria-invalid", `${!h}`)) : I.set(r, this);
+          p.set(this, u ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !u), r.toggleAttribute("internals-valid", u), r.setAttribute("aria-invalid", `${!u}`)) : V.set(r, this);
         }
         get shadowRoot() {
-          const e = l.get(this), i = j.get(e);
+          const t = c.get(this), i = A.get(t);
           return i || null;
         }
         get validationMessage() {
-          const e = l.get(this);
-          return w(e, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), k.get(this);
+          const t = c.get(this);
+          return y(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), p.get(this);
         }
         get validity() {
-          const e = l.get(this);
-          return w(e, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), d.get(this);
+          const t = c.get(this);
+          return y(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), d.get(this);
         }
         get willValidate() {
-          const e = l.get(this);
-          return w(e, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(e.disabled || e.hasAttribute("disabled") || e.hasAttribute("readonly"));
+          const t = c.get(this);
+          return y(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
         }
       }
-      function Ie() {
+      function Lt() {
         if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
           return !1;
-        class t extends HTMLElement {
+        class e extends HTMLElement {
           constructor() {
             super(), this.internals = this.attachInternals();
           }
         }
-        const e = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
-        customElements.define(e, t);
-        const i = new t();
+        const t = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
+        customElements.define(t, e);
+        const i = new e();
         return [
           "shadowRoot",
           "form",
@@ -437,25 +490,25 @@ function Be() {
           "reportValidity"
         ].every((a) => a in i.internals);
       }
-      let le = !1, ce = !1;
-      function W(t) {
-        ce || (ce = !0, window.CustomStateSet = H, t && (HTMLElement.prototype.attachInternals = function(...e) {
-          const i = t.call(this, e);
-          return i.states = new H(this), i;
+      let ct = !1, lt = !1;
+      function q(e) {
+        lt || (lt = !0, window.CustomStateSet = z, e && (HTMLElement.prototype.attachInternals = function(...t) {
+          const i = e.call(this, t);
+          return i.states = new z(this), i;
         }));
       }
-      function de(t = !0) {
-        if (!le) {
-          if (le = !0, typeof window < "u" && (window.ElementInternals = ne), typeof CustomElementRegistry < "u") {
-            const e = CustomElementRegistry.prototype.define;
+      function dt(e = !0) {
+        if (!ct) {
+          if (ct = !0, typeof window < "u" && (window.ElementInternals = nt), typeof CustomElementRegistry < "u") {
+            const t = CustomElementRegistry.prototype.define;
             CustomElementRegistry.prototype.define = function(i, a, r) {
               if (a.formAssociated) {
                 const o = a.prototype.connectedCallback;
                 a.prototype.connectedCallback = function() {
-                  J.has(this) || (J.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), o != null && o.apply(this), re(this);
+                  J.has(this) || (J.set(this, !0), this.hasAttribute("disabled") && H(this, !0)), o != null && o.apply(this), rt(this);
                 };
               }
-              e.call(this, i, a, r);
+              t.call(this, i, a, r);
             };
           }
           if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
@@ -463,30 +516,30 @@ function Be() {
               if (this.tagName.indexOf("-") === -1)
                 throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
             } else return {};
-            if (c.has(this))
+            if (l.has(this))
               throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-            return new ne(this);
+            return new nt(this);
           }), typeof Element < "u") {
-            let e = function(...a) {
+            let t = function(...a) {
               const r = i.apply(this, a);
-              if (j.set(this, r), N()) {
-                const o = new MutationObserver(O);
-                window.ShadyDOM ? o.observe(this, $) : o.observe(r, $), C.set(this, o);
+              if (A.set(this, r), P()) {
+                const o = new MutationObserver(D);
+                window.ShadyDOM ? o.observe(this, R) : o.observe(r, R), C.set(this, o);
               }
               return r;
             };
             const i = Element.prototype.attachShadow;
-            Element.prototype.attachShadow = e;
+            Element.prototype.attachShadow = t;
           }
-          N() && typeof document < "u" && new MutationObserver(O).observe(document.documentElement, $), typeof HTMLFormElement < "u" && Fe(), (t || typeof window < "u" && !window.CustomStateSet) && W();
+          P() && typeof document < "u" && new MutationObserver(D).observe(document.documentElement, R), typeof HTMLFormElement < "u" && Tt(), (e || typeof window < "u" && !window.CustomStateSet) && q();
         }
       }
-      return !!customElements.polyfillWrapFlushCallback || (Ie() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : de(!1)), n.forceCustomStateSetPolyfill = W, n.forceElementInternalsPolyfill = de, Object.defineProperty(n, "__esModule", { value: !0 }), n;
+      return !!customElements.polyfillWrapFlushCallback || (Lt() ? typeof window < "u" && !window.CustomStateSet && q(HTMLElement.prototype.attachInternals) : dt(!1)), s.forceCustomStateSetPolyfill = q, s.forceElementInternalsPolyfill = dt, Object.defineProperty(s, "__esModule", { value: !0 }), s;
     })({});
-  })()), he;
+  })()), mt;
 }
-Be();
-const qe = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);vertical-align:top;font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--int-states-mixin-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--int-states-mixin-bg-color)}@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--hover-modifier)))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-form))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-form))}}.c-switch[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}[disabled] .c-switch{--int-states-mixin-bg-color: var(--switch-bg-color--disabled);pointer-events:none}.c-switch:has(.c-switch-input:focus-visible){box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch-input{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-input *{overflow:hidden}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}.c-switch-wrapper:dir(rtl) .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.c-switch[checked] .c-switch-control{transform:translate(var(--switch-translation))}.c-switch[checked] .c-switch-control .c-pieIcon--check{color:var(--dt-color-interactive-brand)}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}.c-switch-label{color:var(--dt-color-content-default-solid)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-description *{overflow:hidden}.c-switch-wrapper--label-leading{flex-direction:row-reverse}.c-switch-wrapper--label-trailing{flex-direction:row}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch[checked] .c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch[checked] .c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:disabled~.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper:dir(rtl) .c-switch[checked] .c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}", Ue = ["leading", "trailing"], rt = "change", x = {
+Kt();
+const Gt = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);vertical-align:top;font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--int-states-mixin-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--int-states-mixin-bg-color)}@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--hover-modifier)))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-form))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-form))}}.c-switch[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}[disabled] .c-switch{--int-states-mixin-bg-color: var(--switch-bg-color--disabled);pointer-events:none}.c-switch:has(.c-switch-input:focus-visible){box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch--in-interactive-container{background-image:linear-gradient(var(--interactive-container-tint, transparent) 0 0)}.c-switch--in-interactive-container:hover:not(:disabled),.c-switch--in-interactive-container:active:not(:disabled){--int-states-mixin-bg-color: var(--dt-color-interactive-form)}.c-switch--in-interactive-container[checked]:hover:not(:disabled),.c-switch--in-interactive-container[checked]:active:not(:disabled){--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}.c-switch-input{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-input *{overflow:hidden}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}.c-switch-wrapper:dir(rtl) .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.c-switch[checked] .c-switch-control{transform:translate(var(--switch-translation))}.c-switch[checked] .c-switch-control .c-pieIcon--check{color:var(--dt-color-interactive-brand)}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}.c-switch-label{color:var(--dt-color-content-default-solid)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-description *{overflow:hidden}.c-switch-wrapper--label-leading{flex-direction:row-reverse}.c-switch-wrapper--label-trailing{flex-direction:row}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch[checked] .c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch[checked] .c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:disabled~.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper:dir(rtl) .c-switch[checked] .c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}", Jt = ["leading", "trailing"], le = "change", M = {
   checked: !1,
   defaultChecked: !1,
   disabled: !1,
@@ -494,37 +547,37 @@ const qe = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before
   required: !1,
   value: "on"
 };
-var je = Object.defineProperty, Ke = Object.getOwnPropertyDescriptor, f = (n, l, d, u) => {
-  for (var c = u > 1 ? void 0 : u ? Ke(l, d) : l, k = n.length - 1, E; k >= 0; k--)
-    (E = n[k]) && (c = (u ? E(l, d, c) : E(c)) || c);
-  return u && c && je(l, d, c), c;
+var Qt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, b = (s, c, d, h) => {
+  for (var l = h > 1 ? void 0 : h ? Xt(c, d) : c, p = s.length - 1, v; p >= 0; p--)
+    (v = s[p]) && (l = (h ? v(c, d, l) : v(l)) || l);
+  return h && l && Qt(c, d, l), l;
 };
-const Ge = "pie-switch";
-let p = class extends $e(De(Re(q))) {
+const Yt = "pie-switch";
+let m = class extends Dt(Rt(Ht(j))) {
   constructor() {
-    super(...arguments), this.labelPlacement = x.labelPlacement, this.checked = x.checked, this.defaultChecked = x.defaultChecked, this.required = x.required, this.value = x.value, this.disabled = x.disabled, this._isAnimationAllowed = !1;
+    super(...arguments), this.labelPlacement = M.labelPlacement, this.checked = M.checked, this.defaultChecked = M.defaultChecked, this.required = M.required, this.value = M.value, this.disabled = M.disabled, this._isAnimationAllowed = !1;
   }
-  firstUpdated(n) {
-    super.firstUpdated(n);
-    const { signal: l } = this._abortController;
+  firstUpdated(s) {
+    super.firstUpdated(s);
+    const { signal: c } = this._abortController;
     this.handleFormAssociation(), this.input.addEventListener("invalid", (d) => {
       this.dispatchEvent(new Event("invalid", d));
-    }, { signal: l });
+    }, { signal: c });
   }
   connectedCallback() {
     super.connectedCallback(), this._abortController = new AbortController();
-    const { signal: n } = this._abortController;
-    this.addEventListener("click", (l) => {
-      const [d] = l.composedPath();
+    const { signal: s } = this._abortController;
+    this.addEventListener("click", (c) => {
+      const [d] = c.composedPath();
       if (this.disabled || d === this.input)
         return;
-      const u = !this.label && l.composedPath().includes(this.switchBody);
-      (d === this || u) && this.input.click();
-    }, { signal: n });
+      const h = !this.label && c.composedPath().includes(this.switchBody);
+      (d === this || h) && this.input.click();
+    }, { signal: s });
   }
   disconnectedCallback() {
-    var n;
-    super.disconnectedCallback(), (n = this._abortController) == null || n.abort();
+    var s;
+    super.disconnectedCallback(), (s = this._abortController) == null || s.abort();
   }
   updated() {
     this.handleFormAssociation();
@@ -539,10 +592,10 @@ let p = class extends $e(De(Re(q))) {
    * The handleChange function updates the checkbox state and emits an event for consumers.
    * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
    */
-  handleChange(n) {
-    const { checked: l } = n == null ? void 0 : n.currentTarget;
-    this.checked = l;
-    const d = He(n);
+  handleChange(s) {
+    const { checked: c } = s == null ? void 0 : s.currentTarget;
+    this.checked = c;
+    const d = Wt(s);
     this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(d), this.handleFormAssociation();
   }
   /**
@@ -565,8 +618,8 @@ let p = class extends $e(De(Re(q))) {
    * Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.
    * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
    */
-  setCustomValidity(n) {
-    this.input.setCustomValidity(n), this._internals.setValidity(this.validity, this.validationMessage, this.input);
+  setCustomValidity(s) {
+    this.input.setCustomValidity(s), this._internals.setValidity(this.validity, this.validationMessage, this.input);
   }
   /**
    * Called when the containing form is reset.
@@ -576,8 +629,8 @@ let p = class extends $e(De(Re(q))) {
     if (this.checked === this.defaultChecked)
       return;
     this.checked = this.defaultChecked;
-    const n = new Event("change", { bubbles: !0, composed: !0 });
-    this.dispatchEvent(n), this.handleFormAssociation();
+    const s = new Event("change", { bubbles: !0, composed: !0 });
+    this.dispatchEvent(s), this.handleFormAssociation();
   }
   /**
    * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -595,116 +648,122 @@ let p = class extends $e(De(Re(q))) {
     return this.input.validationMessage;
   }
   renderAriaDescription() {
-    var n;
-    return (n = this.aria) != null && n.describedBy ? B`
+    var s;
+    return (s = this.aria) != null && s.describedBy ? U`
             <div
                 aria-hidden="true"
                 id="switch-description"
                 data-test-id="switch-description"
                 class="c-switch-description">
                 ${this.aria.describedBy}
-            </div>` : P;
+            </div>` : O;
   }
   renderSwitchLabel() {
-    const { label: n, labelPlacement: l } = this;
-    return n ? B`
+    const { label: s, labelPlacement: c } = this;
+    return s ? U`
             <span
                 aria-hidden="true"
-                data-test-id="switch-label-${l}"
+                data-test-id="switch-label-${c}"
                 class="c-switch-label">
-                ${n}
-            </span>` : P;
+                ${s}
+            </span>` : O;
   }
   render() {
+    var A, F;
     const {
-      label: n,
-      labelPlacement: l,
+      label: s,
+      labelPlacement: c,
       aria: d,
-      checked: u,
-      disabled: c,
-      required: k,
-      _isAnimationAllowed: E,
+      checked: h,
+      disabled: l,
+      required: p,
+      _isAnimationAllowed: v,
       associatedLabelText: C
-    } = this, b = (d == null ? void 0 : d.label) || n || C, F = {
+    } = this, w = (d == null ? void 0 : d.label) || s || ((A = this._contextAria) == null ? void 0 : A.label) || C, S = {
       "c-switch-wrapper": !0,
-      "c-switch-wrapper--allow-animation": E,
-      [`c-switch-wrapper--label-${l}`]: !0
-    }, M = Te(n ? "label" : "div");
-    return Le`
-            <${M}
-                class="${Pe(F)}"
-                ?disabled=${c}>
+      "c-switch-wrapper--allow-animation": v,
+      [`c-switch-wrapper--label-${c}`]: !0
+    }, x = Pt(s ? "label" : "div");
+    return Ot`
+            <${x}
+                class="${ht(S)}"
+                ?disabled=${l}>
                 <div
                     data-test-id="switch-component"
-                    class="c-switch"
-                    ?checked=${u}>
+                    class="${ht({ "c-switch": !0, "c-switch--in-interactive-container": !!this._contextAria })}"
+                    ?checked=${h}>
                     <input
                         data-test-id="switch-input"
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
-                        ?required=${k}
-                        .checked="${Oe(u)}"
-                        ?disabled="${c}"
+                        ?required=${p}
+                        .checked="${$t(h)}"
+                        ?disabled="${l}"
                         @change="${this.handleChange}"
-                        aria-label="${_e(b)}"
-                        aria-describedby="${d != null && d.describedBy ? "switch-description" : P}">
+                        aria-label="${ut(w)}"
+                        aria-description="${ut((F = this._contextAria) == null ? void 0 : F.description)}"
+                        aria-describedby="${d != null && d.describedBy ? "switch-description" : O}">
                     <div class="c-switch-control">
-                        ${u ? B`<icon-check></icon-check>` : P}
+                        ${h ? U`<icon-check></icon-check>` : O}
                     </div>
                 </div>
                 ${this.renderSwitchLabel()}
                 ${this.renderAriaDescription()}
-            </${M}>`;
+            </${x}>`;
   }
 };
-p.styles = Ve(qe);
-f([
-  y({ type: String })
-], p.prototype, "label", 2);
-f([
-  y({ type: String }),
-  We(Ge, Ue, x.labelPlacement)
-], p.prototype, "labelPlacement", 2);
-f([
-  y({ type: Object })
-], p.prototype, "aria", 2);
-f([
-  y({ type: Boolean, reflect: !0 })
-], p.prototype, "checked", 2);
-f([
-  y({ type: Boolean, reflect: !0 })
-], p.prototype, "defaultChecked", 2);
-f([
-  y({ type: Boolean, reflect: !0 })
-], p.prototype, "required", 2);
-f([
-  y({ type: String })
-], p.prototype, "value", 2);
-f([
-  y({ type: String, reflect: !0 })
-], p.prototype, "name", 2);
-f([
-  y({ type: Boolean, reflect: !0 })
-], p.prototype, "disabled", 2);
-f([
-  U('input[type="checkbox"]')
-], p.prototype, "input", 2);
-f([
-  U(".c-switch")
-], p.prototype, "switchBody", 2);
-f([
-  U('label, input[type="checkbox"]')
-], p.prototype, "focusTarget", 2);
-f([
-  Ne()
-], p.prototype, "_isAnimationAllowed", 2);
-p = f([
-  ze("pie-switch")
-], p);
+m.styles = Nt(Gt);
+b([
+  E({ type: String })
+], m.prototype, "label", 2);
+b([
+  E({ type: String }),
+  zt(Yt, Jt, M.labelPlacement)
+], m.prototype, "labelPlacement", 2);
+b([
+  E({ type: Object })
+], m.prototype, "aria", 2);
+b([
+  E({ type: Boolean, reflect: !0 })
+], m.prototype, "checked", 2);
+b([
+  E({ type: Boolean, reflect: !0 })
+], m.prototype, "defaultChecked", 2);
+b([
+  E({ type: Boolean, reflect: !0 })
+], m.prototype, "required", 2);
+b([
+  E({ type: String })
+], m.prototype, "value", 2);
+b([
+  E({ type: String, reflect: !0 })
+], m.prototype, "name", 2);
+b([
+  E({ type: Boolean, reflect: !0 })
+], m.prototype, "disabled", 2);
+b([
+  jt({ context: Bt, subscribe: !0 }),
+  bt()
+], m.prototype, "_contextAria", 2);
+b([
+  K('input[type="checkbox"]')
+], m.prototype, "input", 2);
+b([
+  K(".c-switch")
+], m.prototype, "switchBody", 2);
+b([
+  K('label, input[type="checkbox"]')
+], m.prototype, "focusTarget", 2);
+b([
+  bt()
+], m.prototype, "_isAnimationAllowed", 2);
+m = b([
+  qt("pie-switch")
+], m);
 export {
-  rt as ON_SWITCH_CHANGED_EVENT,
-  p as PieSwitch,
-  x as defaultProps,
-  Ue as labelPlacements
+  le as ON_SWITCH_CHANGED_EVENT,
+  m as PieSwitch,
+  M as defaultProps,
+  Jt as labelPlacements
 };

package/dist/react.d.ts

@@ -43,6 +43,7 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
     value: string;
     name: SwitchProps['name'];
     disabled: boolean;
+    private _contextAria?;
     private input;
     private switchBody;
     focusTarget: HTMLElement;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "2.5.5",
+  "version": "2.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -44,13 +44,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.3.1",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.7",
+    "@justeattakeaway/pie-css": "1.3.2",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.8",
     "@justeattakeaway/pie-wrapper-react": "0.14.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "1.27.0",
-    "@justeattakeaway/pie-webc-core": "16.0.0",
+    "@justeattakeaway/pie-icons-webc": "1.27.1",
+    "@justeattakeaway/pie-webc-core": "16.1.0",
     "element-internals-polyfill": "1.3.11"
   },
   "customElements": "custom-elements.json",

package/src/index.ts

@@ -7,6 +7,7 @@ import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
+import { consume } from '@lit/context';
 import 'element-internals-polyfill';
 
 import {
@@ -16,7 +17,9 @@ import {
     AssociatedLabelMixin,
     wrapNativeEvent,
     safeCustomElement,
+    ariaContext,
     type PIEInputElement,
+    type ContextualAria,
 } from '@justeattakeaway/pie-webc-core';
 import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
 
@@ -62,6 +65,12 @@ export class PieSwitch extends AssociatedLabelMixin(FormControlMixin(DelegatesFo
     @property({ type: Boolean, reflect: true })
     public disabled = defaultProps.disabled;
 
+    // Optional ARIA supplied by an ancestor (for example a `pie-list-item`), folded into the
+    // input's ARIA below as a fallback behind the switch's own label. Undefined when standalone.
+    @consume({ context: ariaContext, subscribe: true })
+    @state()
+    private _contextAria?: ContextualAria;
+
     @query('input[type="checkbox"]')
     private input!: HTMLInputElement;
 
@@ -266,7 +275,7 @@ export class PieSwitch extends AssociatedLabelMixin(FormControlMixin(DelegatesFo
             associatedLabelText,
         } = this;
 
-        const ariaLabel = aria?.label || label || associatedLabelText;
+        const ariaLabel = aria?.label || label || this._contextAria?.label || associatedLabelText;
 
         const classes = {
             'c-switch-wrapper': true,
@@ -282,7 +291,7 @@ export class PieSwitch extends AssociatedLabelMixin(FormControlMixin(DelegatesFo
                 ?disabled=${disabled}>
                 <div
                     data-test-id="switch-component"
-                    class="c-switch"
+                    class="${classMap({ 'c-switch': true, 'c-switch--in-interactive-container': Boolean(this._contextAria) })}"
                     ?checked=${checked}>
                     <input
                         data-test-id="switch-input"
@@ -294,6 +303,7 @@ export class PieSwitch extends AssociatedLabelMixin(FormControlMixin(DelegatesFo
                         ?disabled="${disabled}"
                         @change="${this.handleChange}"
                         aria-label="${ifDefined(ariaLabel)}"
+                        aria-description="${ifDefined(this._contextAria?.description)}"
                         aria-describedby="${aria?.describedBy ? 'switch-description' : nothing}">
                     <div class="c-switch-control">
                         ${checked ? html`<icon-check></icon-check>` : nothing}

package/src/switch.scss

@@ -68,6 +68,27 @@
     }
 }
 
+// Inside an interactive container (such as a `pie-list-item`) the whole container is the click
+// target, so the track should tint with the container rather than only on a direct hover of the
+// switch. The container exposes its current hover/active tint as `--interactive-container-tint` (an
+// inherited custom property that flows through the slot into this shadow tree); we layer it over
+// the track. We also opt the switch out of its own hover/active tint here, so hovering the switch
+// directly (which also hovers the container) does not tint twice. The class is added by the
+// component when it consumes an ancestor's ARIA context.
+.c-switch--in-interactive-container {
+    background-image: linear-gradient(var(--interactive-container-tint, transparent) 0 0);
+
+    &:hover:not(:disabled),
+    &:active:not(:disabled) {
+        --int-states-mixin-bg-color: var(--dt-color-interactive-form);
+    }
+
+    &[checked]:hover:not(:disabled),
+    &[checked]:active:not(:disabled) {
+        --int-states-mixin-bg-color: var(--dt-color-interactive-brand);
+    }
+}
+
 .c-switch-input {
     @include p.visually-hidden;