@justeattakeaway/pie-switch 1.3.7 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,7 +35,7 @@
35
35
  "type": {
36
36
  "text": "DefaultProps"
37
37
  },
38
- "default": "{\n checked: false,\n disabled: false,\n labelPlacement: 'leading',\n required: false,\n value: 'on',\n}"
38
+ "default": "{\r\n checked: false,\r\n disabled: false,\r\n labelPlacement: 'leading',\r\n required: false,\r\n value: 'on',\r\n}"
39
39
  }
40
40
  ],
41
41
  "exports": [
@@ -186,7 +186,7 @@
186
186
  "text": ""
187
187
  }
188
188
  },
189
- "description": "Returns a boolean value which indicates validity of the value of the component. If the value is invalid, this method also fires the invalid event on the component.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity"
189
+ "description": "Returns a boolean value which indicates validity of the value of the component. If the value is invalid, this method also fires the invalid event on the component.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity"
190
190
  },
191
191
  {
192
192
  "kind": "method",
@@ -197,7 +197,7 @@
197
197
  "text": ""
198
198
  }
199
199
  },
200
- "description": "If the value is invalid, this method also fires the invalid event on the element, and (if the event isn't canceled) reports the problem to the user.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity"
200
+ "description": "If the value is invalid, this method also fires the invalid event on the element, and (if the event isn't canceled) reports the problem to the user.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity"
201
201
  },
202
202
  {
203
203
  "kind": "method",
@@ -216,7 +216,7 @@
216
216
  }
217
217
  }
218
218
  ],
219
- "description": "Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity"
219
+ "description": "Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity"
220
220
  },
221
221
  {
222
222
  "kind": "field",
@@ -225,7 +225,7 @@
225
225
  "text": "ValidityState"
226
226
  },
227
227
  "privacy": "public",
228
- "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
228
+ "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
229
229
  "readonly": true
230
230
  },
231
231
  {
@@ -235,7 +235,7 @@
235
235
  "text": "string"
236
236
  },
237
237
  "privacy": "public",
238
- "description": "(Read-only) Returns a string representing a localized message that describes the validation constraints that the control does not satisfy (if any).\nThis string is empty if the component is valid.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage",
238
+ "description": "(Read-only) Returns a string representing a localized message that describes the validation constraints that the control does not satisfy (if any).\r\nThis string is empty if the component is valid.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage",
239
239
  "readonly": true
240
240
  },
241
241
  {
@@ -250,7 +250,7 @@
250
250
  }
251
251
  }
252
252
  ],
253
- "description": "If a label is provided, renders it if `labelPlacement` matches the given position.\nIf no label is provided, or `labelPlacement` does not match the given position, nothing is rendered."
253
+ "description": "If a label is provided, renders it if `labelPlacement` matches the given position.\r\nIf no label is provided, or `labelPlacement` does not match the given position, nothing is rendered."
254
254
  },
255
255
  {
256
256
  "kind": "method",
package/dist/index.js CHANGED
@@ -1,25 +1,19 @@
1
- import { LitElement as It, unsafeCSS as Vt, nothing as L, html as N } from "lit";
2
- import { property as y, query as ct } from "lit/decorators.js";
1
+ import { LitElement as Ft, nothing as L, html as N, unsafeCSS as It } from "lit";
2
+ import { property as y, query as dt } from "lit/decorators.js";
3
3
  import { classMap as St } from "lit/directives/class-map.js";
4
- import { ifDefined as Tt } from "lit/directives/if-defined.js";
5
- import { FormControlMixin as Lt, RtlMixin as Nt, wrapNativeEvent as Ot, validPropertyValues as Pt, defineCustomElement as _t } from "@justeattakeaway/pie-webc-core";
4
+ import { ifDefined as Vt } from "lit/directives/if-defined.js";
5
+ import { FormControlMixin as Tt, RtlMixin as Lt, wrapNativeEvent as Nt, validPropertyValues as Ot, safeCustomElement as Pt } from "@justeattakeaway/pie-webc-core";
6
6
  import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
7
- var $t = Object.defineProperty, Rt = (f, s, c, h) => {
8
- for (var l = void 0, m = f.length - 1, E; m >= 0; m--)
9
- (E = f[m]) && (l = E(s, c, l) || l);
10
- return l && $t(s, c, l), l;
11
- };
12
- class dt extends It {
13
- constructor() {
14
- super(...arguments), this.v = "1.3.7";
7
+ const O = class O extends Ft {
8
+ willUpdate() {
9
+ this.getAttribute("v") || this.setAttribute("v", O.v);
15
10
  }
16
- }
17
- Rt([
18
- y({ type: String, reflect: !0 })
19
- ], dt.prototype, "v");
11
+ };
12
+ O.v = "1.4.1";
13
+ let q = O;
20
14
  (function() {
21
- (function(f) {
22
- const s = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), F = {
15
+ (function(n) {
16
+ const l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), F = {
23
17
  ariaAtomic: "aria-atomic",
24
18
  ariaAutoComplete: "aria-autocomplete",
25
19
  ariaBusy: "aria-busy",
@@ -62,7 +56,7 @@ Rt([
62
56
  ariaValueNow: "aria-valuenow",
63
57
  ariaValueText: "aria-valuetext",
64
58
  role: "role"
65
- }, ut = (e, t) => {
59
+ }, ht = (e, t) => {
66
60
  for (let i in F) {
67
61
  t[i] = null;
68
62
  let a = null;
@@ -71,187 +65,187 @@ Rt([
71
65
  get() {
72
66
  return a;
73
67
  },
74
- set(o) {
75
- a = o, e.isConnected ? e.setAttribute(r, o) : C.set(e, t);
68
+ set(s) {
69
+ a = s, e.isConnected ? e.setAttribute(r, s) : A.set(e, t);
76
70
  }
77
71
  });
78
72
  }
79
73
  };
80
- function G(e) {
81
- const t = l.get(e), { form: i } = t;
82
- tt(e, i, t), Z(e, t.labels);
74
+ function Y(e) {
75
+ const t = c.get(e), { form: i } = t;
76
+ et(e, i, t), tt(e, t.labels);
83
77
  }
84
- const Y = (e, t = !1) => {
78
+ const J = (e, t = !1) => {
85
79
  const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
86
- acceptNode(o) {
87
- return l.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
80
+ acceptNode(s) {
81
+ return c.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
88
82
  }
89
83
  });
90
84
  let a = i.nextNode();
91
85
  const r = !t || e.disabled;
92
86
  for (; a; )
93
- a.formDisabledCallback && r && $(a, e.disabled), a = i.nextNode();
94
- }, J = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = T() ? new MutationObserver((e) => {
87
+ a.formDisabledCallback && r && R(a, e.disabled), a = i.nextNode();
88
+ }, Q = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = T() ? new MutationObserver((e) => {
95
89
  for (const t of e) {
96
90
  const i = t.target;
97
- if (t.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Y(i)), t.attributeName === "name" && i.constructor.formAssociated) {
98
- const a = l.get(i), r = q.get(i);
91
+ if (t.attributeName === "disabled" && (i.constructor.formAssociated ? R(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && J(i)), t.attributeName === "name" && i.constructor.formAssociated) {
92
+ const a = c.get(i), r = B.get(i);
99
93
  a.setFormValue(r);
100
94
  }
101
95
  }
102
96
  }) : {};
103
- function P(e) {
97
+ function _(e) {
104
98
  e.forEach((t) => {
105
- const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), o = Array.from(a);
106
- r.forEach((n) => {
99
+ const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), s = Array.from(a);
100
+ r.forEach((o) => {
107
101
  var u;
108
- if (l.has(n) && n.constructor.formAssociated && G(n), C.has(n)) {
109
- const d = C.get(n);
102
+ if (c.has(o) && o.constructor.formAssociated && Y(o), A.has(o)) {
103
+ const d = A.get(o);
110
104
  Object.keys(F).filter((b) => d[b] !== null).forEach((b) => {
111
- n.setAttribute(F[b], d[b]);
112
- }), C.delete(n);
105
+ o.setAttribute(F[b], d[b]);
106
+ }), A.delete(o);
113
107
  }
114
- if (A.has(n)) {
115
- const d = A.get(n);
116
- n.setAttribute("internals-valid", d.validity.valid.toString()), n.setAttribute("internals-invalid", (!d.validity.valid).toString()), n.setAttribute("aria-invalid", (!d.validity.valid).toString()), A.delete(n);
108
+ if (C.has(o)) {
109
+ const d = C.get(o);
110
+ o.setAttribute("internals-valid", d.validity.valid.toString()), o.setAttribute("internals-invalid", (!d.validity.valid).toString()), o.setAttribute("aria-invalid", (!d.validity.valid).toString()), C.delete(o);
117
111
  }
118
- if (n.localName === "form") {
119
- const d = k.get(n), g = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
120
- acceptNode(W) {
121
- return l.has(W) && W.constructor.formAssociated && !(d && d.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
112
+ if (o.localName === "form") {
113
+ const d = g.get(o), w = document.createTreeWalker(o, NodeFilter.SHOW_ELEMENT, {
114
+ acceptNode(z) {
115
+ return c.has(z) && z.constructor.formAssociated && !(d && d.has(z)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
122
116
  }
123
117
  });
124
- let b = g.nextNode();
118
+ let b = w.nextNode();
125
119
  for (; b; )
126
- G(b), b = g.nextNode();
120
+ Y(b), b = w.nextNode();
127
121
  }
128
- n.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, n, J), Y(n, !0));
129
- }), o.forEach((n) => {
130
- const u = l.get(n);
131
- u && h.get(u) && Q(u), O.has(n) && O.get(n).disconnect();
122
+ o.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, o, Q), J(o, !0));
123
+ }), s.forEach((o) => {
124
+ const u = c.get(o);
125
+ u && m.get(u) && X(u), P.has(o) && P.get(o).disconnect();
132
126
  });
133
127
  });
134
128
  }
135
- function pt(e) {
129
+ function ut(e) {
136
130
  e.forEach((t) => {
137
131
  const { removedNodes: i } = t;
138
132
  i.forEach((a) => {
139
- const r = j.get(t.target);
140
- l.has(a) && it(a), r.disconnect();
133
+ const r = K.get(t.target);
134
+ c.has(a) && at(a), r.disconnect();
141
135
  });
142
136
  });
143
137
  }
144
- const mt = (e) => {
138
+ const pt = (e) => {
145
139
  var t, i;
146
- const a = new MutationObserver(pt);
147
- !((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 }), j.set(e, a);
140
+ const a = new MutationObserver(ut);
141
+ !((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 }), K.set(e, a);
148
142
  };
149
- T() && new MutationObserver(P);
150
- const _ = {
143
+ T() && new MutationObserver(_);
144
+ const $ = {
151
145
  childList: !0,
152
146
  subtree: !0
153
- }, $ = (e, t) => {
147
+ }, R = (e, t) => {
154
148
  e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
155
- }, Q = (e) => {
156
- h.get(e).forEach((i) => {
149
+ }, X = (e) => {
150
+ m.get(e).forEach((i) => {
157
151
  i.remove();
158
- }), h.set(e, []);
159
- }, X = (e, t) => {
152
+ }), m.set(e, []);
153
+ }, Z = (e, t) => {
160
154
  const i = document.createElement("input");
161
- return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), h.get(t).push(i), i;
162
- }, ft = (e, t) => {
155
+ return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), m.get(t).push(i), i;
156
+ }, mt = (e, t) => {
163
157
  var i;
164
- h.set(t, []), (i = I.observe) === null || i === void 0 || i.call(I, e, J);
165
- }, Z = (e, t) => {
158
+ m.set(t, []), (i = I.observe) === null || i === void 0 || i.call(I, e, Q);
159
+ }, tt = (e, t) => {
166
160
  if (t.length) {
167
161
  Array.from(t).forEach((a) => a.addEventListener("click", e.click.bind(e)));
168
162
  let i = t[0].id;
169
163
  t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
170
164
  }
171
- }, V = (e) => {
172
- const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = k.get(e) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => l.get(o).validity.valid), r = [...t, ...a].includes(!1);
165
+ }, S = (e) => {
166
+ const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = g.get(e) || [], a = Array.from(i).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), r = [...t, ...a].includes(!1);
173
167
  e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
168
+ }, ft = (e) => {
169
+ S(V(e.target));
174
170
  }, bt = (e) => {
175
- V(S(e.target));
171
+ S(V(e.target));
176
172
  }, vt = (e) => {
177
- V(S(e.target));
178
- }, wt = (e) => {
179
173
  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(",");
180
174
  e.addEventListener("click", (i) => {
181
175
  if (i.target.closest(t)) {
182
- const r = k.get(e);
176
+ const r = g.get(e);
183
177
  if (e.noValidate)
184
178
  return;
185
- r.size && Array.from(r).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && i.preventDefault();
179
+ r.size && Array.from(r).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
186
180
  }
187
181
  });
188
- }, gt = (e) => {
189
- const t = k.get(e.target);
182
+ }, wt = (e) => {
183
+ const t = g.get(e.target);
190
184
  t && t.size && t.forEach((i) => {
191
185
  i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
192
186
  });
193
- }, tt = (e, t, i) => {
187
+ }, et = (e, t, i) => {
194
188
  if (t) {
195
- const a = k.get(t);
189
+ const a = g.get(t);
196
190
  if (a)
197
191
  a.add(e);
198
192
  else {
199
193
  const r = /* @__PURE__ */ new Set();
200
- r.add(e), k.set(t, r), wt(t), t.addEventListener("reset", gt), t.addEventListener("input", bt), t.addEventListener("change", vt);
194
+ r.add(e), g.set(t, r), vt(t), t.addEventListener("reset", wt), t.addEventListener("input", ft), t.addEventListener("change", bt);
201
195
  }
202
- E.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
196
+ M.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
203
197
  e.formAssociatedCallback.apply(e, [t]);
204
- }, 0), V(t);
198
+ }, 0), S(t);
205
199
  }
206
- }, S = (e) => {
200
+ }, V = (e) => {
207
201
  let t = e.parentNode;
208
- return t && t.tagName !== "FORM" && (t = S(t)), t;
209
- }, w = (e, t, i = DOMException) => {
202
+ return t && t.tagName !== "FORM" && (t = V(t)), t;
203
+ }, v = (e, t, i = DOMException) => {
210
204
  if (!e.constructor.formAssociated)
211
205
  throw new i(t);
212
- }, et = (e, t, i) => {
213
- const a = k.get(e);
206
+ }, it = (e, t, i) => {
207
+ const a = g.get(e);
214
208
  return a && a.size && a.forEach((r) => {
215
- l.get(r)[i]() || (t = !1);
209
+ c.get(r)[i]() || (t = !1);
216
210
  }), t;
217
- }, it = (e) => {
211
+ }, at = (e) => {
218
212
  if (e.constructor.formAssociated) {
219
- const t = l.get(e), { labels: i, form: a } = t;
220
- Z(e, i), tt(e, a, t);
213
+ const t = c.get(e), { labels: i, form: a } = t;
214
+ tt(e, i), et(e, a, t);
221
215
  }
222
216
  };
223
217
  function T() {
224
218
  return typeof MutationObserver < "u";
225
219
  }
226
- class yt {
220
+ class gt {
227
221
  constructor() {
228
222
  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);
229
223
  }
230
224
  }
231
- const Et = (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), kt = (e, t, i) => (e.valid = Mt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && V(i), e), Mt = (e) => {
225
+ const yt = (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), Et = (e, t, i) => (e.valid = kt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && S(i), e), kt = (e) => {
232
226
  let t = !0;
233
227
  for (let i in e)
234
228
  i !== "valid" && e[i] !== !1 && (t = !1);
235
229
  return t;
236
- }, R = /* @__PURE__ */ new WeakMap();
237
- function at(e, t) {
230
+ }, D = /* @__PURE__ */ new WeakMap();
231
+ function rt(e, t) {
238
232
  e.toggleAttribute(t, !0), e.part && e.part.add(t);
239
233
  }
240
- class D extends Set {
234
+ class H extends Set {
241
235
  static get isPolyfilled() {
242
236
  return !0;
243
237
  }
244
238
  constructor(t) {
245
239
  if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
246
240
  throw new TypeError("Illegal constructor");
247
- R.set(this, t);
241
+ D.set(this, t);
248
242
  }
249
243
  add(t) {
250
244
  if (!/^--/.test(t) || typeof t != "string")
251
245
  throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
252
- const i = super.add(t), a = R.get(this), r = `state${t}`;
253
- return a.isConnected ? at(a, r) : setTimeout(() => {
254
- at(a, r);
246
+ const i = super.add(t), a = D.get(this), r = `state${t}`;
247
+ return a.isConnected ? rt(a, r) : setTimeout(() => {
248
+ rt(a, r);
255
249
  }), i;
256
250
  }
257
251
  clear() {
@@ -260,24 +254,24 @@ Rt([
260
254
  super.clear();
261
255
  }
262
256
  delete(t) {
263
- const i = super.delete(t), a = R.get(this);
257
+ const i = super.delete(t), a = D.get(this);
264
258
  return a.isConnected ? (a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`)) : setTimeout(() => {
265
259
  a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`);
266
260
  }), i;
267
261
  }
268
262
  }
269
- function rt(e, t, i, a) {
263
+ function st(e, t, i, a) {
270
264
  if (typeof t == "function" ? e !== t || !0 : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
271
265
  return i === "m" ? a : i === "a" ? a.call(e) : a ? a.value : t.get(e);
272
266
  }
273
- function xt(e, t, i, a, r) {
267
+ function Mt(e, t, i, a, r) {
274
268
  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");
275
269
  return t.set(e, i), i;
276
270
  }
277
271
  var x;
278
- class Ct {
272
+ class xt {
279
273
  constructor(t) {
280
- x.set(this, void 0), xt(this, x, t);
274
+ x.set(this, void 0), Mt(this, x, t);
281
275
  for (let i = 0; i < t.length; i++) {
282
276
  let a = t[i];
283
277
  this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
@@ -285,10 +279,10 @@ Rt([
285
279
  Object.freeze(this);
286
280
  }
287
281
  get length() {
288
- return rt(this, x, "f").length;
282
+ return st(this, x, "f").length;
289
283
  }
290
284
  [(x = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
291
- return rt(this, x, "f")[Symbol.iterator]();
285
+ return st(this, x, "f")[Symbol.iterator]();
292
286
  }
293
287
  item(t) {
294
288
  return this[t] == null ? null : this[t];
@@ -302,40 +296,40 @@ Rt([
302
296
  HTMLFormElement.prototype.checkValidity = i;
303
297
  const t = HTMLFormElement.prototype.reportValidity;
304
298
  HTMLFormElement.prototype.reportValidity = a;
305
- function i(...o) {
306
- let n = e.apply(this, o);
307
- return et(this, n, "checkValidity");
299
+ function i(...s) {
300
+ let o = e.apply(this, s);
301
+ return it(this, o, "checkValidity");
308
302
  }
309
- function a(...o) {
310
- let n = t.apply(this, o);
311
- return et(this, n, "reportValidity");
303
+ function a(...s) {
304
+ let o = t.apply(this, s);
305
+ return it(this, o, "reportValidity");
312
306
  }
313
307
  const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
314
308
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
315
- get(...o) {
316
- const n = r.call(this, ...o), u = Array.from(k.get(this) || []);
309
+ get(...s) {
310
+ const o = r.call(this, ...s), u = Array.from(g.get(this) || []);
317
311
  if (u.length === 0)
318
- return n;
319
- const d = Array.from(n).concat(u).sort((g, b) => g.compareDocumentPosition ? g.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
320
- return new Ct(d);
312
+ return o;
313
+ const d = Array.from(o).concat(u).sort((w, b) => w.compareDocumentPosition ? w.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
314
+ return new xt(d);
321
315
  }
322
316
  });
323
317
  }
324
- class st {
318
+ class ot {
325
319
  static get isPolyfilled() {
326
320
  return !0;
327
321
  }
328
322
  constructor(t) {
329
323
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
330
324
  throw new TypeError("Illegal constructor");
331
- const i = t.getRootNode(), a = new yt();
332
- this.states = new D(t), s.set(this, t), c.set(this, a), l.set(t, this), ut(t, this), ft(t, this), Object.seal(this), i instanceof DocumentFragment && mt(i);
325
+ const i = t.getRootNode(), a = new gt();
326
+ this.states = new H(t), l.set(this, t), h.set(this, a), c.set(t, this), ht(t, this), mt(t, this), Object.seal(this), i instanceof DocumentFragment && pt(i);
333
327
  }
334
328
  checkValidity() {
335
- const t = s.get(this);
336
- if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
329
+ const t = l.get(this);
330
+ if (v(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
337
331
  return !0;
338
- const i = c.get(this);
332
+ const i = h.get(this);
339
333
  if (!i.valid) {
340
334
  const a = new Event("invalid", {
341
335
  bubbles: !1,
@@ -347,75 +341,75 @@ Rt([
347
341
  return i.valid;
348
342
  }
349
343
  get form() {
350
- const t = s.get(this);
351
- w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
344
+ const t = l.get(this);
345
+ v(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
352
346
  let i;
353
- return t.constructor.formAssociated === !0 && (i = S(t)), i;
347
+ return t.constructor.formAssociated === !0 && (i = V(t)), i;
354
348
  }
355
349
  get labels() {
356
- const t = s.get(this);
357
- w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
350
+ const t = l.get(this);
351
+ v(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
358
352
  const i = t.getAttribute("id"), a = t.getRootNode();
359
353
  return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
360
354
  }
361
355
  reportValidity() {
362
- const t = s.get(this);
363
- if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
356
+ const t = l.get(this);
357
+ if (v(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
364
358
  return !0;
365
- const i = this.checkValidity(), a = U.get(this);
359
+ const i = this.checkValidity(), a = j.get(this);
366
360
  if (a && !t.constructor.formAssociated)
367
361
  throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
368
362
  return !i && a && (t.focus(), a.focus()), i;
369
363
  }
370
364
  setFormValue(t) {
371
- const i = s.get(this);
372
- if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Q(this), t != null && !(t instanceof FormData)) {
365
+ const i = l.get(this);
366
+ if (v(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), X(this), t != null && !(t instanceof FormData)) {
373
367
  if (i.getAttribute("name")) {
374
- const a = X(i, this);
368
+ const a = Z(i, this);
375
369
  a.value = t;
376
370
  }
377
371
  } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([a, r]) => {
378
372
  if (typeof r == "string") {
379
- const o = X(i, this);
380
- o.name = a, o.value = r;
373
+ const s = Z(i, this);
374
+ s.name = a, s.value = r;
381
375
  }
382
376
  });
383
- q.set(i, t);
377
+ B.set(i, t);
384
378
  }
385
379
  setValidity(t, i, a) {
386
- const r = s.get(this);
387
- if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
380
+ const r = l.get(this);
381
+ if (v(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
388
382
  throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
389
- U.set(this, a);
390
- const o = c.get(this), n = {};
391
- for (const g in t)
392
- n[g] = t[g];
393
- Object.keys(n).length === 0 && Et(o);
394
- const u = Object.assign(Object.assign({}, o), n);
383
+ j.set(this, a);
384
+ const s = h.get(this), o = {};
385
+ for (const w in t)
386
+ o[w] = t[w];
387
+ Object.keys(o).length === 0 && yt(s);
388
+ const u = Object.assign(Object.assign({}, s), o);
395
389
  delete u.valid;
396
- const { valid: d } = kt(o, u, this.form);
390
+ const { valid: d } = Et(s, u, this.form);
397
391
  if (!d && !i)
398
392
  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.");
399
- m.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : A.set(r, this);
393
+ E.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : C.set(r, this);
400
394
  }
401
395
  get shadowRoot() {
402
- const t = s.get(this), i = B.get(t);
396
+ const t = l.get(this), i = U.get(t);
403
397
  return i || null;
404
398
  }
405
399
  get validationMessage() {
406
- const t = s.get(this);
407
- return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), m.get(this);
400
+ const t = l.get(this);
401
+ return v(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), E.get(this);
408
402
  }
409
403
  get validity() {
410
- const t = s.get(this);
411
- return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), c.get(this);
404
+ const t = l.get(this);
405
+ return v(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
412
406
  }
413
407
  get willValidate() {
414
- const t = s.get(this);
415
- return w(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"));
408
+ const t = l.get(this);
409
+ return v(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"));
416
410
  }
417
411
  }
418
- function Ft() {
412
+ function Ct() {
419
413
  if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
420
414
  return !1;
421
415
  class e extends HTMLElement {
@@ -439,22 +433,22 @@ Rt([
439
433
  "reportValidity"
440
434
  ].every((a) => a in i.internals);
441
435
  }
442
- let ot = !1, nt = !1;
443
- function H(e) {
444
- nt || (nt = !0, window.CustomStateSet = D, e && (HTMLElement.prototype.attachInternals = function(...t) {
436
+ let nt = !1, lt = !1;
437
+ function W(e) {
438
+ lt || (lt = !0, window.CustomStateSet = H, e && (HTMLElement.prototype.attachInternals = function(...t) {
445
439
  const i = e.call(this, t);
446
- return i.states = new D(this), i;
440
+ return i.states = new H(this), i;
447
441
  }));
448
442
  }
449
- function lt(e = !0) {
450
- if (!ot) {
451
- if (ot = !0, typeof window < "u" && (window.ElementInternals = st), typeof CustomElementRegistry < "u") {
443
+ function ct(e = !0) {
444
+ if (!nt) {
445
+ if (nt = !0, typeof window < "u" && (window.ElementInternals = ot), typeof CustomElementRegistry < "u") {
452
446
  const t = CustomElementRegistry.prototype.define;
453
447
  CustomElementRegistry.prototype.define = function(i, a, r) {
454
448
  if (a.formAssociated) {
455
- const o = a.prototype.connectedCallback;
449
+ const s = a.prototype.connectedCallback;
456
450
  a.prototype.connectedCallback = function() {
457
- K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), it(this);
451
+ G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), s != null && s.apply(this), at(this);
458
452
  };
459
453
  }
460
454
  t.call(this, i, a, r);
@@ -465,46 +459,47 @@ Rt([
465
459
  if (this.tagName.indexOf("-") === -1)
466
460
  throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
467
461
  } else return {};
468
- if (l.has(this))
462
+ if (c.has(this))
469
463
  throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
470
- return new st(this);
464
+ return new ot(this);
471
465
  }), typeof Element < "u") {
472
466
  let t = function(...a) {
473
467
  const r = i.apply(this, a);
474
- if (B.set(this, r), T()) {
475
- const o = new MutationObserver(P);
476
- window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), O.set(this, o);
468
+ if (U.set(this, r), T()) {
469
+ const s = new MutationObserver(_);
470
+ window.ShadyDOM ? s.observe(this, $) : s.observe(r, $), P.set(this, s);
477
471
  }
478
472
  return r;
479
473
  };
480
474
  const i = Element.prototype.attachShadow;
481
475
  Element.prototype.attachShadow = t;
482
476
  }
483
- T() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && At(), (e || typeof window < "u" && !window.CustomStateSet) && H();
477
+ T() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, $), typeof HTMLFormElement < "u" && At(), (e || typeof window < "u" && !window.CustomStateSet) && W();
484
478
  }
485
479
  }
486
- return !!customElements.polyfillWrapFlushCallback || (Ft() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : lt(!1)), f.forceCustomStateSetPolyfill = H, f.forceElementInternalsPolyfill = lt, Object.defineProperty(f, "__esModule", { value: !0 }), f;
480
+ return !!customElements.polyfillWrapFlushCallback || (Ct() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : ct(!1)), n.forceCustomStateSetPolyfill = W, n.forceElementInternalsPolyfill = ct, Object.defineProperty(n, "__esModule", { value: !0 }), n;
487
481
  })({});
488
482
  })();
489
- const Dt = "*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);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 (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)){.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:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)){.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-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.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)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper--rtl .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--dt-color-interactive-brand)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-label{color:var(--dt-color-content-default)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}", Ht = ["leading", "trailing"], Yt = "change", M = {
483
+ const _t = "*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);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 (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)){.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:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)){.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-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.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)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper--rtl .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--dt-color-interactive-brand)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-label{color:var(--dt-color-content-default)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}", $t = ["leading", "trailing"], Gt = "change", k = {
490
484
  checked: !1,
491
485
  disabled: !1,
492
486
  labelPlacement: "leading",
493
487
  required: !1,
494
488
  value: "on"
495
489
  };
496
- var Wt = Object.defineProperty, v = (f, s, c, h) => {
497
- for (var l = void 0, m = f.length - 1, E; m >= 0; m--)
498
- (E = f[m]) && (l = E(s, c, l) || l);
499
- return l && Wt(s, c, l), l;
490
+ var Rt = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, f = (n, l, h, m) => {
491
+ for (var c = m > 1 ? void 0 : m ? Dt(l, h) : l, E = n.length - 1, M; E >= 0; E--)
492
+ (M = n[E]) && (c = (m ? M(l, h, c) : M(c)) || c);
493
+ return m && c && Rt(l, h, c), c;
500
494
  };
501
- const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
495
+ const Ht = "pie-switch";
496
+ let p = class extends Tt(Lt(q)) {
502
497
  constructor() {
503
- super(...arguments), this.labelPlacement = M.labelPlacement, this.checked = M.checked, this.required = M.required, this.value = M.value, this.disabled = M.disabled;
498
+ super(...arguments), this.labelPlacement = k.labelPlacement, this.checked = k.checked, this.required = k.required, this.value = k.value, this.disabled = k.disabled;
504
499
  }
505
500
  firstUpdated() {
506
- this.handleFormAssociation(), this.input.addEventListener("invalid", (s) => {
507
- this.dispatchEvent(new Event("invalid", s));
501
+ this.handleFormAssociation(), this.input.addEventListener("invalid", (n) => {
502
+ this.dispatchEvent(new Event("invalid", n));
508
503
  });
509
504
  }
510
505
  updated() {
@@ -520,10 +515,10 @@ const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
520
515
  * The handleChange function updates the checkbox state and emits an event for consumers.
521
516
  * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
522
517
  */
523
- handleChange(s) {
524
- const { checked: c } = s == null ? void 0 : s.currentTarget;
525
- this.checked = c;
526
- const h = Ot(s);
518
+ handleChange(n) {
519
+ const { checked: l } = n == null ? void 0 : n.currentTarget;
520
+ this.checked = l;
521
+ const h = Nt(n);
527
522
  this.dispatchEvent(h), this.handleFormAssociation();
528
523
  }
529
524
  /**
@@ -546,8 +541,8 @@ const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
546
541
  * Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.
547
542
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
548
543
  */
549
- setCustomValidity(s) {
550
- this.input.setCustomValidity(s), this._internals.setValidity(this.validity, this.validationMessage, this.input);
544
+ setCustomValidity(n) {
545
+ this.input.setCustomValidity(n), this._internals.setValidity(this.validity, this.validationMessage, this.input);
551
546
  }
552
547
  /**
553
548
  * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -570,18 +565,18 @@ const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
570
565
  *
571
566
  * @private
572
567
  */
573
- renderSwitchLabel(s) {
574
- const { label: c, labelPlacement: h } = this;
575
- return !c || h !== s ? L : N`
568
+ renderSwitchLabel(n) {
569
+ const { label: l, labelPlacement: h } = this;
570
+ return !l || h !== n ? L : N`
576
571
  <span
577
572
  data-test-id="switch-label-${h}"
578
573
  class="c-switch-label">
579
- ${c}
574
+ ${l}
580
575
  </span>`;
581
576
  }
582
577
  renderAriaDescription() {
583
- var s;
584
- return (s = this.aria) != null && s.describedBy ? N`
578
+ var n;
579
+ return (n = this.aria) != null && n.describedBy ? N`
585
580
  <div
586
581
  id="switch-description"
587
582
  data-test-id="switch-description"
@@ -591,37 +586,37 @@ const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
591
586
  }
592
587
  render() {
593
588
  const {
594
- aria: s,
595
- checked: c,
589
+ aria: n,
590
+ checked: l,
596
591
  disabled: h,
597
- isRTL: l,
598
- required: m
592
+ isRTL: m,
593
+ required: c
599
594
  } = this;
600
595
  return N`
601
596
  <label
602
597
  class="${St({
603
598
  "c-switch-wrapper": !0,
604
- "c-switch-wrapper--rtl": l
599
+ "c-switch-wrapper--rtl": m
605
600
  })}"
606
601
  ?disabled=${h}>
607
602
  ${this.renderSwitchLabel("leading")}
608
603
  <div
609
604
  data-test-id="switch-component"
610
605
  class="c-switch"
611
- ?checked=${c}>
606
+ ?checked=${l}>
612
607
  <input
613
608
  data-test-id="switch-input"
614
609
  role="switch"
615
610
  type="checkbox"
616
611
  class="c-switch-input"
617
- .required=${m}
618
- .checked="${c}"
612
+ .required=${c}
613
+ .checked="${l}"
619
614
  .disabled="${h}"
620
615
  @change="${this.handleChange}"
621
- aria-label="${Tt(s == null ? void 0 : s.label)}"
622
- aria-describedby="${s != null && s.describedBy ? "switch-description" : L}">
616
+ aria-label="${Vt(n == null ? void 0 : n.label)}"
617
+ aria-describedby="${n != null && n.describedBy ? "switch-description" : L}">
623
618
  <div class="c-switch-control">
624
- ${c ? N`<icon-check></icon-check>` : L}
619
+ ${l ? N`<icon-check></icon-check>` : L}
625
620
  </div>
626
621
  </div>
627
622
  ${this.renderSwitchLabel("trailing")}
@@ -629,43 +624,44 @@ const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
629
624
  </label>`;
630
625
  }
631
626
  };
632
- z.styles = Vt(Dt);
633
- let p = z;
634
- v([
627
+ p.styles = It(_t);
628
+ f([
635
629
  y({ type: String })
636
- ], p.prototype, "label");
637
- v([
630
+ ], p.prototype, "label", 2);
631
+ f([
638
632
  y({ type: String }),
639
- Pt(ht, Ht, M.labelPlacement)
640
- ], p.prototype, "labelPlacement");
641
- v([
633
+ Ot(Ht, $t, k.labelPlacement)
634
+ ], p.prototype, "labelPlacement", 2);
635
+ f([
642
636
  y({ type: Object })
643
- ], p.prototype, "aria");
644
- v([
637
+ ], p.prototype, "aria", 2);
638
+ f([
645
639
  y({ type: Boolean, reflect: !0 })
646
- ], p.prototype, "checked");
647
- v([
640
+ ], p.prototype, "checked", 2);
641
+ f([
648
642
  y({ type: Boolean, reflect: !0 })
649
- ], p.prototype, "required");
650
- v([
643
+ ], p.prototype, "required", 2);
644
+ f([
651
645
  y({ type: String })
652
- ], p.prototype, "value");
653
- v([
646
+ ], p.prototype, "value", 2);
647
+ f([
654
648
  y({ type: String, reflect: !0 })
655
- ], p.prototype, "name");
656
- v([
649
+ ], p.prototype, "name", 2);
650
+ f([
657
651
  y({ type: Boolean, reflect: !0 })
658
- ], p.prototype, "disabled");
659
- v([
660
- ct('input[type="checkbox"]')
661
- ], p.prototype, "input");
662
- v([
663
- ct("label")
664
- ], p.prototype, "focusTarget");
665
- _t(ht, p);
652
+ ], p.prototype, "disabled", 2);
653
+ f([
654
+ dt('input[type="checkbox"]')
655
+ ], p.prototype, "input", 2);
656
+ f([
657
+ dt("label")
658
+ ], p.prototype, "focusTarget", 2);
659
+ p = f([
660
+ Pt("pie-switch")
661
+ ], p);
666
662
  export {
667
- Yt as ON_SWITCH_CHANGED_EVENT,
663
+ Gt as ON_SWITCH_CHANGED_EVENT,
668
664
  p as PieSwitch,
669
- M as defaultProps,
670
- Ht as labelPlacements
665
+ k as defaultProps,
666
+ $t as labelPlacements
671
667
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-switch",
3
3
  "description": "PIE Design System Switch built using Web Components",
4
- "version": "1.3.7",
4
+ "version": "1.4.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -45,8 +45,8 @@
45
45
  "cem-plugin-module-file-extensions": "0.0.5"
46
46
  },
47
47
  "dependencies": {
48
- "@justeattakeaway/pie-icons-webc": "1.9.0",
49
- "@justeattakeaway/pie-webc-core": "0.25.1",
48
+ "@justeattakeaway/pie-icons-webc": "1.10.1",
49
+ "@justeattakeaway/pie-webc-core": "1.0.0",
50
50
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
51
51
  "element-internals-polyfill": "1.3.11"
52
52
  },
package/src/index.ts CHANGED
@@ -8,7 +8,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
8
8
  import 'element-internals-polyfill';
9
9
 
10
10
  import {
11
- RtlMixin, validPropertyValues, defineCustomElement, FormControlMixin, wrapNativeEvent, type PIEInputElement,
11
+ RtlMixin, validPropertyValues, FormControlMixin, wrapNativeEvent, type PIEInputElement,
12
+ safeCustomElement,
12
13
  } from '@justeattakeaway/pie-webc-core';
13
14
  import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
14
15
 
@@ -24,6 +25,7 @@ const componentSelector = 'pie-switch';
24
25
  * @tagname pie-switch
25
26
  * @event {CustomEvent} change - when the switch checked state is changed.
26
27
  */
28
+ @safeCustomElement('pie-switch')
27
29
  export class PieSwitch extends FormControlMixin(RtlMixin(PieElement)) implements SwitchProps, PIEInputElement {
28
30
  @property({ type: String })
29
31
  public label: SwitchProps['label'];
@@ -226,8 +228,6 @@ export class PieSwitch extends FormControlMixin(RtlMixin(PieElement)) implements
226
228
  }
227
229
  }
228
230
 
229
- defineCustomElement(componentSelector, PieSwitch);
230
-
231
231
  declare global {
232
232
  interface HTMLElementTagNameMap {
233
233
  [componentSelector]: PieSwitch;