@webority/ui-elements 0.12.4 → 0.12.5

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.
Files changed (3) hide show
  1. package/dist/ui-elements.global.js +7 -7
  2. package/dist/ui-elements.js +295 -242
  3. package/package.json +1 -1
package/dist/ui-elements.js CHANGED
@@ -942,24 +942,24 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
942
942
  "Th",
943
943
  "Fr",
944
944
  "Sa"
945
- ], oe = (e) => String(e).padStart(2, "0"), A = (e, t, n) => `${e}-${oe(t + 1)}-${oe(n)}`, j = (e) => {
945
+ ], A = (e) => String(e).padStart(2, "0"), j = (e, t, n) => `${e}-${A(t + 1)}-${A(n)}`, M = (e) => {
946
946
  let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
947
947
  return t ? {
948
948
  y: +t[1],
949
949
  m: t[2] - 1,
950
950
  d: +t[3]
951
951
  } : null;
952
- }, M = (e) => {
953
- let t = j(e);
954
- return t ? `${oe(t.d)} ${O[t.m].slice(0, 3)} ${t.y}` : "";
955
- }, N = (e, t) => new Date(e, t + 1, 0).getDate(), P = (e, t) => {
952
+ }, N = (e) => {
953
+ let t = M(e);
954
+ return t ? `${A(t.d)} ${O[t.m].slice(0, 3)} ${t.y}` : "";
955
+ }, P = (e, t) => new Date(e, t + 1, 0).getDate(), F = (e, t) => {
956
956
  for (; t < 0;) t += 12, --e;
957
957
  for (; t > 11;) t -= 12, e += 1;
958
958
  return {
959
959
  y: e,
960
960
  m: t
961
961
  };
962
- }, se = class extends e {
962
+ }, oe = class extends e {
963
963
  static formAssociated = !0;
964
964
  static get observedAttributes() {
965
965
  return [
@@ -971,7 +971,8 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
971
971
  "first-day",
972
972
  "size",
973
973
  "aria-label",
974
- "aria-describedby"
974
+ "aria-describedby",
975
+ "aria-invalid"
975
976
  ];
976
977
  }
977
978
  constructor() {
@@ -993,8 +994,16 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
993
994
  this._bindGlobal?.();
994
995
  }
995
996
  attributeChangedCallback(e, t, n) {
997
+ if (e === "aria-invalid") {
998
+ this._syncInvalid();
999
+ return;
1000
+ }
996
1001
  this._rendered && (e === "value" ? (this._value = n || "", this._syncFormValue(), this._syncTrigger()) : e === "first-day" ? this.querySelector(".datepicker-pop")?.hidden || this._renderView() : this.render());
997
1002
  }
1003
+ _syncInvalid() {
1004
+ let e = this.querySelector(".datepicker-trigger");
1005
+ e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
1006
+ }
998
1007
  formResetCallback() {
999
1008
  this.value = this._defaultValue || "";
1000
1009
  }
@@ -1010,13 +1019,13 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1010
1019
  }
1011
1020
  render() {
1012
1021
  this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
1013
- let e = this.getAttribute("placeholder") || "Enter Date", t = j(this._value);
1022
+ let e = this.getAttribute("placeholder") || "Enter Date", t = M(this._value);
1014
1023
  t && (this._viewY = t.y, this._viewM = t.m);
1015
1024
  let n = this.getAttribute("size"), r = n === "sm" ? " input-sm" : n === "lg" ? " input-lg" : "", i = this.getAttribute("aria-label"), a = this.getAttribute("aria-describedby");
1016
1025
  this.innerHTML = `
1017
1026
  <div class="datepicker">
1018
- <button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${i ? ` aria-label="${g(i)}"` : ""}${a ? ` aria-describedby="${g(a)}"` : ""}>
1019
- <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? M(this._value) : g(e)}</span>
1027
+ <button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${i ? ` aria-label="${g(i)}"` : ""}${a ? ` aria-describedby="${g(a)}"` : ""}>
1028
+ <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? N(this._value) : g(e)}</span>
1020
1029
  ${p("calendar-dots")}
1021
1030
  </button>
1022
1031
  <div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
@@ -1028,11 +1037,11 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1028
1037
  _syncTrigger() {
1029
1038
  let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
1030
1039
  if (!t) return;
1031
- let n = j(this._value);
1032
- t.textContent = n ? M(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
1040
+ let n = M(this._value);
1041
+ t.textContent = n ? N(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
1033
1042
  }
1034
1043
  _limits() {
1035
- let e = j(this.getAttribute("min")), t = j(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
1044
+ let e = M(this.getAttribute("min")), t = M(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
1036
1045
  return {
1037
1046
  dayDisabled: (e, t, i) => {
1038
1047
  let a = new Date(e, t, i).getTime();
@@ -1040,7 +1049,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1040
1049
  },
1041
1050
  monthDisabled: (e, t) => {
1042
1051
  let i = new Date(e, t, 1).getTime();
1043
- return new Date(e, t, N(e, t)).getTime() < n || i > r;
1052
+ return new Date(e, t, P(e, t)).getTime() < n || i > r;
1044
1053
  },
1045
1054
  yearDisabled: (e) => {
1046
1055
  let t = new Date(e, 0, 1).getTime();
@@ -1053,22 +1062,22 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1053
1062
  e && (this._mode === "months" ? e.innerHTML = this._monthsHtml() : this._mode === "years" ? e.innerHTML = this._yearsHtml() : e.innerHTML = this._daysHtml(), this._focusActive());
1054
1063
  }
1055
1064
  _daysHtml() {
1056
- let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n = N(this._viewY, this._viewM), r = j(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
1065
+ let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n = P(this._viewY, this._viewM), r = M(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
1057
1066
  y: this._viewY,
1058
1067
  m: this._viewM,
1059
1068
  d: 1
1060
1069
  }, s = (e, t, n, s) => {
1061
- let c = A(e, t, n), l = r && r.y === e && r.m === t && r.d === n, u = i.getFullYear() === e && i.getMonth() === t && i.getDate() === n, d = o.y === e && o.m === t && o.d === n, f = a(e, t, n);
1070
+ let c = j(e, t, n), l = r && r.y === e && r.m === t && r.d === n, u = i.getFullYear() === e && i.getMonth() === t && i.getDate() === n, d = o.y === e && o.m === t && o.d === n, f = a(e, t, n);
1062
1071
  return `<button type="button" class="${[
1063
1072
  "datepicker-day",
1064
1073
  s ? "is-outside" : "",
1065
1074
  u ? "is-today" : "",
1066
1075
  l ? "is-selected" : ""
1067
1076
  ].filter(Boolean).join(" ")}" data-iso="${c}" role="gridcell" tabindex="${d && !f ? "0" : "-1"}"${l ? " aria-selected=\"true\"" : ""}${f ? " disabled aria-disabled=\"true\"" : ""}>${n}</button>`;
1068
- }, c = "", l = P(this._viewY, this._viewM - 1), u = N(l.y, l.m);
1077
+ }, c = "", l = F(this._viewY, this._viewM - 1), u = P(l.y, l.m);
1069
1078
  for (let e = t - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
1070
1079
  for (let e = 1; e <= n; e++) c += s(this._viewY, this._viewM, e, !1);
1071
- let d = P(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
1080
+ let d = F(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
1072
1081
  for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
1073
1082
  let m = k.map((t, n) => k[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
1074
1083
  return `
@@ -1085,7 +1094,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1085
1094
  </div>`;
1086
1095
  }
1087
1096
  _monthsHtml() {
1088
- let e = j(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
1097
+ let e = M(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
1089
1098
  for (let i = 0; i < 12; i++) {
1090
1099
  let a = e && e.y === this._viewY && e.m === i, o = t.getFullYear() === this._viewY && t.getMonth() === i, s = n(this._viewY, i), c = [
1091
1100
  "datepicker-cell",
@@ -1103,7 +1112,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1103
1112
  <div class="datepicker-cells">${r}</div>`;
1104
1113
  }
1105
1114
  _yearsHtml() {
1106
- let e = j(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
1115
+ let e = M(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
1107
1116
  for (let a = 0; a < 12; a++) {
1108
1117
  let o = r + a, s = e && e.y === o, c = t === o, l = n(o), u = [
1109
1118
  "datepicker-cell",
@@ -1128,21 +1137,21 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1128
1137
  s(e, t, { clampHeight: !0 });
1129
1138
  }
1130
1139
  _setFocus(e, t, n, r) {
1131
- let { y: i, m: a } = P(e, t);
1140
+ let { y: i, m: a } = F(e, t);
1132
1141
  this._focus = {
1133
1142
  y: i,
1134
1143
  m: a,
1135
1144
  d: n
1136
1145
  };
1137
1146
  let o = i !== this._viewY || a !== this._viewM;
1138
- this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${A(i, a, n)}"]`)?.focus();
1147
+ this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${j(i, a, n)}"]`)?.focus();
1139
1148
  }
1140
1149
  _onKey(e) {
1141
1150
  if (this._mode !== "days") {
1142
1151
  e.key === "Escape" && this._close();
1143
1152
  return;
1144
1153
  }
1145
- let t = this._focus || j(this._value) || {
1154
+ let t = this._focus || M(this._value) || {
1146
1155
  y: this._viewY,
1147
1156
  m: this._viewM,
1148
1157
  d: 1
@@ -1160,17 +1169,17 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1160
1169
  case "End": return n(6 - (new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7, "slide-next");
1161
1170
  case "PageUp": {
1162
1171
  e.preventDefault();
1163
- let n = P(t.y, t.m - (e.shiftKey ? 12 : 1));
1164
- return this._setFocus(n.y, n.m, Math.min(t.d, N(n.y, n.m)), "slide-prev");
1172
+ let n = F(t.y, t.m - (e.shiftKey ? 12 : 1));
1173
+ return this._setFocus(n.y, n.m, Math.min(t.d, P(n.y, n.m)), "slide-prev");
1165
1174
  }
1166
1175
  case "PageDown": {
1167
1176
  e.preventDefault();
1168
- let n = P(t.y, t.m + (e.shiftKey ? 12 : 1));
1169
- return this._setFocus(n.y, n.m, Math.min(t.d, N(n.y, n.m)), "slide-next");
1177
+ let n = F(t.y, t.m + (e.shiftKey ? 12 : 1));
1178
+ return this._setFocus(n.y, n.m, Math.min(t.d, P(n.y, n.m)), "slide-next");
1170
1179
  }
1171
1180
  case "Enter":
1172
1181
  case " ":
1173
- e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = A(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
1182
+ e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = j(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
1174
1183
  return;
1175
1184
  case "Escape": return this._close();
1176
1185
  default:
@@ -1182,7 +1191,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1182
1191
  if (!e || !t) return;
1183
1192
  let r = () => !t.hidden;
1184
1193
  this._open = () => {
1185
- let r = /* @__PURE__ */ new Date(), i = j(this._value);
1194
+ let r = /* @__PURE__ */ new Date(), i = M(this._value);
1186
1195
  (i || !this._viewNavigated) && (this._viewY = r.getFullYear(), this._viewM = r.getMonth()), this._mode = "days";
1187
1196
  let a = r.getFullYear() === this._viewY && r.getMonth() === this._viewM, o = i && i.y === this._viewY && i.m === this._viewM;
1188
1197
  this._focus = o ? i : {
@@ -1197,7 +1206,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1197
1206
  let t = e.target.closest("[data-nav]");
1198
1207
  if (t) {
1199
1208
  this._viewNavigated = !0, this._slide = Number(t.dataset.nav) < 0 ? "slide-prev" : "slide-next";
1200
- let e = P(this._viewY, this._viewM + Number(t.dataset.nav));
1209
+ let e = F(this._viewY, this._viewM + Number(t.dataset.nav));
1201
1210
  this._viewY = e.y, this._viewM = e.m, this._focus = {
1202
1211
  y: e.y,
1203
1212
  m: e.m,
@@ -1236,7 +1245,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1236
1245
  }
1237
1246
  if (e.target.closest("[data-today]")) {
1238
1247
  let e = /* @__PURE__ */ new Date();
1239
- this.value = A(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
1248
+ this.value = j(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
1240
1249
  return;
1241
1250
  }
1242
1251
  if (e.target.closest("[data-clear]")) {
@@ -1264,7 +1273,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1264
1273
  disconnectedCallback() {
1265
1274
  this._teardown();
1266
1275
  }
1267
- }, ce = class extends e {
1276
+ }, se = class extends e {
1268
1277
  static formAssociated = !0;
1269
1278
  static get observedAttributes() {
1270
1279
  return [
@@ -1280,7 +1289,8 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1280
1289
  "aria-describedby",
1281
1290
  "name",
1282
1291
  "start-name",
1283
- "end-name"
1292
+ "end-name",
1293
+ "aria-invalid"
1284
1294
  ];
1285
1295
  }
1286
1296
  constructor() {
@@ -1302,8 +1312,16 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1302
1312
  this._bindGlobal?.();
1303
1313
  }
1304
1314
  attributeChangedCallback(e, t, n) {
1315
+ if (e === "aria-invalid") {
1316
+ this._syncInvalid();
1317
+ return;
1318
+ }
1305
1319
  this._rendered && (e === "start" || e === "end" ? (this._start = this.getAttribute("start") || "", this._end = this.getAttribute("end") || "", this._syncTrigger(), this._syncMirrors()) : this.render());
1306
1320
  }
1321
+ _syncInvalid() {
1322
+ let e = this.querySelector(".daterange-trigger");
1323
+ e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
1324
+ }
1307
1325
  get value() {
1308
1326
  return {
1309
1327
  start: this._start,
@@ -1323,18 +1341,18 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1323
1341
  text: e,
1324
1342
  empty: !0
1325
1343
  } : {
1326
- text: `${M(this._start) || "Start"} – ${M(this._end) || "End"}`,
1344
+ text: `${N(this._start) || "Start"} – ${N(this._end) || "End"}`,
1327
1345
  empty: !1
1328
1346
  };
1329
1347
  }
1330
1348
  render() {
1331
1349
  this._defaultStart === void 0 && (this._defaultStart = this.getAttribute("start") || "", this._defaultEnd = this.getAttribute("end") || "", this._start = this._defaultStart || this._start, this._end = this._defaultEnd || this._end);
1332
- let e = j(this._start);
1350
+ let e = M(this._start);
1333
1351
  e && (this._viewY = e.y, this._viewM = e.m);
1334
1352
  let t = this.getAttribute("size"), n = t === "sm" ? " input-sm" : t === "lg" ? " input-lg" : "", { text: r, empty: i } = this._label(), a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
1335
1353
  this.innerHTML = `
1336
1354
  <div class="daterange">
1337
- <button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${g(a)}"` : ""}${o ? ` aria-describedby="${g(o)}"` : ""}>
1355
+ <button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${g(a)}"` : ""}${o ? ` aria-describedby="${g(o)}"` : ""}>
1338
1356
  <span data-range-label class="${i ? "search-select-placeholder" : ""}">${g(r)}</span>
1339
1357
  ${p("calendar")}
1340
1358
  </button>
@@ -1363,20 +1381,20 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1363
1381
  r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute("data-range-mirror", e), this.appendChild(r)), r.name = t, r.value = n || "", r.disabled = this.hasAttribute("disabled");
1364
1382
  }
1365
1383
  _limits() {
1366
- let e = j(this.getAttribute("min")), t = j(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
1384
+ let e = M(this.getAttribute("min")), t = M(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
1367
1385
  return (e, t, i) => {
1368
1386
  let a = new Date(e, t, i).getTime();
1369
1387
  return a < n || a > r;
1370
1388
  };
1371
1389
  }
1372
1390
  _monthHtml(e, t) {
1373
- let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = N(e, t), a = this._limits(), o = k.map((e, t) => k[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
1374
- let i = A(e, t, n), o = a(e, t, n);
1391
+ let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = P(e, t), a = this._limits(), o = k.map((e, t) => k[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
1392
+ let i = j(e, t, n), o = a(e, t, n);
1375
1393
  return `<button type="button" class="${["datepicker-day", r ? "is-outside" : ""].filter(Boolean).join(" ")}" data-iso="${i}"${o ? " disabled" : ""}>${n}</button>`;
1376
- }, c = "", l = P(e, t - 1), u = N(l.y, l.m);
1394
+ }, c = "", l = F(e, t - 1), u = P(l.y, l.m);
1377
1395
  for (let e = r - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
1378
1396
  for (let n = 1; n <= i; n++) c += s(e, t, n, !1);
1379
- let d = P(e, t + 1), f = (7 - (r + i) % 7) % 7;
1397
+ let d = F(e, t + 1), f = (7 - (r + i) % 7) % 7;
1380
1398
  for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
1381
1399
  return `
1382
1400
  <div class="daterange-cal">
@@ -1388,7 +1406,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1388
1406
  _renderView() {
1389
1407
  let e = this.querySelector(".daterange-pop");
1390
1408
  if (!e) return;
1391
- let t = P(this._viewY, this._viewM + 1);
1409
+ let t = F(this._viewY, this._viewM + 1);
1392
1410
  e.innerHTML = `
1393
1411
  <div class="daterange-head">
1394
1412
  <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${p("chevron-left")}</button>
@@ -1414,7 +1432,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1414
1432
  n.classList.toggle("is-range-start", i), n.classList.toggle("is-range-end", a), n.classList.toggle("in-range", o);
1415
1433
  }
1416
1434
  let i = e.querySelector("[data-range-hint]");
1417
- i && (i.textContent = this._start ? this._end ? `${M(this._start)} – ${M(this._end)}` : "Pick an end date" : "Pick a start date");
1435
+ i && (i.textContent = this._start ? this._end ? `${N(this._start)} – ${N(this._end)}` : "Pick an end date" : "Pick a start date");
1418
1436
  }
1419
1437
  _position(e, t) {
1420
1438
  s(e, t, { clampHeight: !0 });
@@ -1436,7 +1454,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1436
1454
  if (!e || !t) return;
1437
1455
  let r = () => !t.hidden;
1438
1456
  this._open = () => {
1439
- let r = j(this._start);
1457
+ let r = M(this._start);
1440
1458
  if (r) this._viewY = r.y, this._viewM = r.m;
1441
1459
  else {
1442
1460
  let e = /* @__PURE__ */ new Date();
@@ -1449,7 +1467,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1449
1467
  this._popClick = !0;
1450
1468
  let t = e.target.closest("[data-nav]");
1451
1469
  if (t) {
1452
- let e = P(this._viewY, this._viewM + Number(t.dataset.nav));
1470
+ let e = F(this._viewY, this._viewM + Number(t.dataset.nav));
1453
1471
  this._viewY = e.y, this._viewM = e.m, this._renderView();
1454
1472
  return;
1455
1473
  }
@@ -1479,7 +1497,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1479
1497
  disconnectedCallback() {
1480
1498
  this._teardown();
1481
1499
  }
1482
- }, le = class extends e {
1500
+ }, ce = class extends e {
1483
1501
  static get observedAttributes() {
1484
1502
  return [
1485
1503
  "static",
@@ -1500,10 +1518,10 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1500
1518
  e === "static" && this.isConnected && this._wire();
1501
1519
  }
1502
1520
  _maxScale() {
1503
- return ue(this.getAttribute("max-scale"), 1.6);
1521
+ return le(this.getAttribute("max-scale"), 1.6);
1504
1522
  }
1505
1523
  _radius() {
1506
- return ue(this.getAttribute("radius"), 100);
1524
+ return le(this.getAttribute("radius"), 100);
1507
1525
  }
1508
1526
  _magnifyEnabled() {
1509
1527
  return !(this.hasAttribute("static") || typeof matchMedia == "function" && (matchMedia("(pointer: coarse)").matches || matchMedia("(prefers-reduced-motion: reduce)").matches));
@@ -1528,10 +1546,10 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1528
1546
  _teardown() {
1529
1547
  this._pointerMoveListener &&= (this.removeEventListener("pointermove", this._pointerMoveListener), null), this._pointerLeaveListener &&= (this.removeEventListener("pointerleave", this._pointerLeaveListener), null), this._resetMagnification();
1530
1548
  }
1531
- }, ue = (e, t) => {
1549
+ }, le = (e, t) => {
1532
1550
  let n = Number.parseFloat(e);
1533
1551
  return Number.isFinite(n) ? n : t;
1534
- }, de = "wui-feedback-submit", F = {
1552
+ }, ue = "wui-feedback-submit", I = {
1535
1553
  label: "Feedback",
1536
1554
  heading: "Share feedback",
1537
1555
  placeholder: "What's working, what isn't?",
@@ -1542,7 +1560,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1542
1560
  emptyError: "Please write a message before sending.",
1543
1561
  failedError: "That didn't send. Please try again.",
1544
1562
  thanks: "Thanks — we've got it."
1545
- }, fe = 1e4, pe = 1600, me = class extends e {
1563
+ }, de = 1e4, fe = 1600, pe = class extends e {
1546
1564
  static get observedAttributes() {
1547
1565
  return [
1548
1566
  "position",
@@ -1564,19 +1582,19 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1564
1582
  this.setAttribute("position", String(e ?? "bottom-right"));
1565
1583
  }
1566
1584
  get label() {
1567
- return this.getAttribute("label") || F.label;
1585
+ return this.getAttribute("label") || I.label;
1568
1586
  }
1569
1587
  set label(e) {
1570
1588
  this.setAttribute("label", String(e ?? ""));
1571
1589
  }
1572
1590
  get heading() {
1573
- return this.getAttribute("heading") || F.heading;
1591
+ return this.getAttribute("heading") || I.heading;
1574
1592
  }
1575
1593
  set heading(e) {
1576
1594
  this.setAttribute("heading", String(e ?? ""));
1577
1595
  }
1578
1596
  get placeholder() {
1579
- return this.getAttribute("placeholder") || F.placeholder;
1597
+ return this.getAttribute("placeholder") || I.placeholder;
1580
1598
  }
1581
1599
  set placeholder(e) {
1582
1600
  this.setAttribute("placeholder", String(e ?? ""));
@@ -1591,10 +1609,10 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1591
1609
  return this._open === !0;
1592
1610
  }
1593
1611
  addEventListener(e, t, n) {
1594
- e === de && (this._submitListeners += 1), super.addEventListener(e, t, n);
1612
+ e === ue && (this._submitListeners += 1), super.addEventListener(e, t, n);
1595
1613
  }
1596
1614
  removeEventListener(e, t, n) {
1597
- e === de && this._submitListeners > 0 && --this._submitListeners, super.removeEventListener(e, t, n);
1615
+ e === ue && this._submitListeners > 0 && --this._submitListeners, super.removeEventListener(e, t, n);
1598
1616
  }
1599
1617
  connectedCallback() {
1600
1618
  this._rendered || this.render();
@@ -1610,31 +1628,31 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1610
1628
  this.innerHTML = `
1611
1629
  <button type="button" class="feedback-trigger" aria-expanded="false" aria-haspopup="dialog">
1612
1630
  <span class="feedback-trigger-icon" aria-hidden="true">${p("message-square", { size: 18 })}</span>
1613
- <span class="feedback-trigger-label">${he(this.label)}</span>
1631
+ <span class="feedback-trigger-label">${me(this.label)}</span>
1614
1632
  </button>
1615
- <div class="feedback-panel" role="dialog" aria-label="${ge(this.heading)}" hidden>
1633
+ <div class="feedback-panel" role="dialog" aria-label="${he(this.heading)}" hidden>
1616
1634
  <div class="feedback-head">
1617
- <h2 class="feedback-heading">${he(this.heading)}</h2>
1635
+ <h2 class="feedback-heading">${me(this.heading)}</h2>
1618
1636
  <button type="button" class="feedback-close" aria-label="Close">${p("x", { size: 16 })}</button>
1619
1637
  </div>
1620
1638
  <div class="feedback-body">
1621
1639
  <label class="feedback-field">
1622
- <span class="feedback-field-label">${F.messageLabel}</span>
1623
- <textarea class="feedback-message" rows="4" required placeholder="${ge(this.placeholder)}"></textarea>
1640
+ <span class="feedback-field-label">${I.messageLabel}</span>
1641
+ <textarea class="feedback-message" rows="4" required placeholder="${he(this.placeholder)}"></textarea>
1624
1642
  </label>
1625
1643
  ${this.collectEmail ? `<label class="feedback-field">
1626
- <span class="feedback-field-label">${F.emailLabel}</span>
1644
+ <span class="feedback-field-label">${I.emailLabel}</span>
1627
1645
  <input type="email" class="feedback-email" autocomplete="email" placeholder="you@example.com" />
1628
1646
  </label>` : ""}
1629
1647
  <p class="feedback-error" role="alert" hidden></p>
1630
1648
  </div>
1631
1649
  <div class="feedback-actions">
1632
1650
  <button type="button" class="feedback-cancel">Cancel</button>
1633
- <button type="button" class="feedback-submit">${F.submitLabel}</button>
1651
+ <button type="button" class="feedback-submit">${I.submitLabel}</button>
1634
1652
  </div>
1635
1653
  <div class="feedback-thanks" hidden>
1636
1654
  <span class="feedback-thanks-icon" aria-hidden="true">${p("check-circle", { size: 20 })}</span>
1637
- <span class="feedback-thanks-text">${F.thanks}</span>
1655
+ <span class="feedback-thanks-text">${I.thanks}</span>
1638
1656
  </div>
1639
1657
  </div>`, this._rendered = !0, this._wire();
1640
1658
  let r = this._refs();
@@ -1672,18 +1690,18 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1672
1690
  let { thanks: e, error: t, submit: n, message: r, email: i } = this._refs();
1673
1691
  this._setBusy(!1), t && (t.hidden = !0, t.textContent = ""), e && (e.hidden = !1), this.querySelector(".feedback-body")?.setAttribute("hidden", ""), this.querySelector(".feedback-actions")?.setAttribute("hidden", ""), n && (n.disabled = !0), this._thanksTimer = setTimeout(() => {
1674
1692
  r && (r.value = ""), i && (i.value = ""), this._reset(), this.close();
1675
- }, pe);
1693
+ }, fe);
1676
1694
  }
1677
1695
  failed(e) {
1678
1696
  this._clearTimers(), this._state = "error", this._setBusy(!1);
1679
1697
  let { error: t, message: n } = this._refs();
1680
- t && (t.textContent = e || F.failedError, t.hidden = !1), n?.focus();
1698
+ t && (t.textContent = e || I.failedError, t.hidden = !1), n?.focus();
1681
1699
  }
1682
1700
  _submit() {
1683
1701
  if (this._state === "submitting") return;
1684
1702
  let { message: e, email: t, error: n } = this._refs(), r = (e?.value ?? "").trim();
1685
1703
  if (!r) {
1686
- n && (n.textContent = F.emptyError, n.hidden = !1), e?.focus();
1704
+ n && (n.textContent = I.emptyError, n.hidden = !1), e?.focus();
1687
1705
  return;
1688
1706
  }
1689
1707
  n && (n.hidden = !0, n.textContent = ""), this._state = "submitting", this._setBusy(!0);
@@ -1693,7 +1711,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1693
1711
  surface: this.getAttribute("surface") || "",
1694
1712
  screen: this.getAttribute("screen") || ""
1695
1713
  };
1696
- if (this.dispatchEvent(new CustomEvent(de, {
1714
+ if (this.dispatchEvent(new CustomEvent(ue, {
1697
1715
  bubbles: !0,
1698
1716
  composed: !0,
1699
1717
  detail: i
@@ -1703,11 +1721,11 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1703
1721
  }
1704
1722
  this._timer = setTimeout(() => {
1705
1723
  this._state === "submitting" && this.failed();
1706
- }, fe);
1724
+ }, de);
1707
1725
  }
1708
1726
  _setBusy(e) {
1709
1727
  let { submit: t } = this._refs();
1710
- t && (t.disabled = e, t.textContent = e ? F.sendingLabel : F.submitLabel, this.toggleAttribute("busy", e));
1728
+ t && (t.disabled = e, t.textContent = e ? I.sendingLabel : I.submitLabel, this.toggleAttribute("busy", e));
1711
1729
  }
1712
1730
  _reset() {
1713
1731
  this._clearTimers(), this._state = "idle", this._setBusy(!1);
@@ -1717,23 +1735,23 @@ var D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
1717
1735
  _clearTimers() {
1718
1736
  this._timer &&= (clearTimeout(this._timer), 0), this._thanksTimer &&= (clearTimeout(this._thanksTimer), 0);
1719
1737
  }
1720
- }, he = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), ge = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), _e = {
1738
+ }, me = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), he = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), ge = {
1721
1739
  enter: "Enter",
1722
1740
  comma: ",",
1723
1741
  space: " ",
1724
1742
  tab: "Tab"
1725
- }, ve = {
1743
+ }, _e = {
1726
1744
  enter: "\n",
1727
1745
  comma: ",",
1728
1746
  space: " ",
1729
1747
  tab: " "
1730
- }, ye = (e) => _e[e], be = (e) => ve[e];
1731
- function xe(e, t) {
1748
+ }, ve = (e) => ge[e], ye = (e) => _e[e];
1749
+ function be(e, t) {
1732
1750
  let n = [String(e ?? "")];
1733
1751
  for (let e of t) n = n.flatMap((t) => t.split(e));
1734
1752
  return n.map((e) => e.trim()).filter(Boolean);
1735
1753
  }
1736
- var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends e {
1754
+ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends e {
1737
1755
  static formAssociated = !0;
1738
1756
  _accessibleName() {
1739
1757
  return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -1833,7 +1851,7 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
1833
1851
  [h]: !0,
1834
1852
  selected: e.hasAttribute("selected")
1835
1853
  };
1836
- for (let [n, r] of Ce) {
1854
+ for (let [n, r] of Se) {
1837
1855
  let i = e.getAttribute(n);
1838
1856
  i && (t[r] = i);
1839
1857
  }
@@ -1864,23 +1882,23 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
1864
1882
  <div class="search-select${a}">
1865
1883
  <div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : ""}>
1866
1884
  ${r ? p(r, { className: "search-select-icon" }) : ""}
1867
- <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${z(o)}" aria-label="${z(this._accessibleName())}" aria-describedby="${z(e)}" autocomplete="off"${s ? " disabled" : ""} /></div>
1885
+ <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${B(o)}" aria-label="${B(this._accessibleName())}" aria-describedby="${B(e)}" autocomplete="off"${s ? " disabled" : ""} /></div>
1868
1886
  ${p("chevron-down", { className: "search-select-caret" })}
1869
1887
  </div>
1870
- <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${z(o)}" aria-multiselectable="true" tabindex="-1" hidden>
1888
+ <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${B(o)}" aria-multiselectable="true" tabindex="-1" hidden>
1871
1889
  <div class="search-select-options"></div>
1872
1890
  </div>
1873
1891
  </div>
1874
- <div class="field-error wui-ms-custom-error" id="${z(e)}" aria-live="polite" hidden></div>`;
1892
+ <div class="field-error wui-ms-custom-error" id="${B(e)}" aria-live="polite" hidden></div>`;
1875
1893
  } else this.innerHTML = `
1876
1894
  <div class="search-select${a}">
1877
- <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${z(o)}" aria-label="${z(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
1895
+ <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${B(o)}" aria-label="${B(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
1878
1896
  ${r ? p(r, { className: "search-select-icon" }) : ""}
1879
1897
  <div class="ms-chips" data-chips></div>
1880
1898
  ${p("chevron-down", { className: "search-select-caret" })}
1881
1899
  </div>
1882
- <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${z(o)}" aria-multiselectable="true" tabindex="-1" hidden>
1883
- ${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${z(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
1900
+ <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${B(o)}" aria-multiselectable="true" tabindex="-1" hidden>
1901
+ ${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${B(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
1884
1902
  <div class="search-select-options"></div>
1885
1903
  <div class="search-select-empty" hidden>No matches</div>
1886
1904
  </div>
@@ -1890,7 +1908,7 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
1890
1908
  _renderControl() {
1891
1909
  let e = this.querySelector("[data-chips]");
1892
1910
  if (!e) return;
1893
- let t = this.getAttribute("placeholder") || "Select…", n = this._allowCustom ? e.querySelector("[data-input]") : null, r = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${z(e)}" aria-label="Remove ${z(B(this._labelFor(e)))}">${p("x")}</button></span>`).join("");
1911
+ let t = this.getAttribute("placeholder") || "Select…", n = this._allowCustom ? e.querySelector("[data-input]") : null, r = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${B(e)}" aria-label="Remove ${B(V(this._labelFor(e)))}">${p("x")}</button></span>`).join("");
1894
1912
  if (n) {
1895
1913
  for (let t of [...e.querySelectorAll(":scope > .chip")]) t.remove();
1896
1914
  n.insertAdjacentHTML("beforebegin", r), n.placeholder = this._values.length ? "" : t, this._collapseChips();
@@ -1921,11 +1939,11 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
1921
1939
  i.textContent = `+${t.length - o}`;
1922
1940
  }
1923
1941
  _matches(e, t) {
1924
- return B(e.label).toLowerCase().includes(t) || String(e.description ?? "").toLowerCase().includes(t);
1942
+ return V(e.label).toLowerCase().includes(t) || String(e.description ?? "").toLowerCase().includes(t);
1925
1943
  }
1926
1944
  _optionNamed(e) {
1927
1945
  let t = e.trim().toLowerCase();
1928
- return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t || B(e.label).trim().toLowerCase() === t);
1946
+ return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t || V(e.label).trim().toLowerCase() === t);
1929
1947
  }
1930
1948
  _renderOptions(e) {
1931
1949
  let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
@@ -1934,9 +1952,9 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
1934
1952
  i && (a = a.filter((e) => this._matches(e, i)));
1935
1953
  let o = this._listboxId || `${this.id || "wui-multiselect"}-listbox`, s = this._allowCustom && r && !this._optionNamed(r), c = a.map((e, t) => {
1936
1954
  let n = this._values.includes(String(e.value)), r = `${o}-opt-${t}`;
1937
- return we(e) ? De(e, r, n) : `<button type="button" role="option" id="${z(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${z(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${v(e)}</span><span class="ms-check">${p("check")}</span></button>`;
1955
+ return Ce(e) ? Ee(e, r, n) : `<button type="button" role="option" id="${B(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${B(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${v(e)}</span><span class="ms-check">${p("check")}</span></button>`;
1938
1956
  });
1939
- s && c.push(`<button type="button" role="option" id="${z(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${z(r)}" data-custom="true" aria-selected="false">Add “${g(r)}”</button>`), t.innerHTML = c.join(""), n && (n.hidden = a.length > 0), this._active = -1, this._combobox()?.removeAttribute("aria-activedescendant"), this._allowCustom && this._syncCustomMenu?.(), this._reanchor?.();
1957
+ s && c.push(`<button type="button" role="option" id="${B(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${B(r)}" data-custom="true" aria-selected="false">Add “${g(r)}”</button>`), t.innerHTML = c.join(""), n && (n.hidden = a.length > 0), this._active = -1, this._combobox()?.removeAttribute("aria-activedescendant"), this._allowCustom && this._syncCustomMenu?.(), this._reanchor?.();
1940
1958
  }
1941
1959
  _combobox() {
1942
1960
  return this._allowCustom ? this.querySelector("[data-input]") : this.querySelector(".search-select-control");
@@ -1949,7 +1967,7 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
1949
1967
  _customRefusal(e) {
1950
1968
  let t = this.getAttribute("custom-invalid-message") || "Enter a valid value.", n = this.getAttribute("custom-pattern");
1951
1969
  if (n) {
1952
- let r = Oe(n);
1970
+ let r = De(n);
1953
1971
  if (r && !r.test(e)) return t;
1954
1972
  }
1955
1973
  let r = this._validateCustom;
@@ -2009,7 +2027,7 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
2009
2027
  }, ee = (e) => {
2010
2028
  this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(this._query()), S();
2011
2029
  }, w = (e, { quiet: t = !1 } = {}) => {
2012
- let n = this._values.length, r = I(e, L) ? xe(e, L) : [e], i = [], a = "";
2030
+ let n = this._values.length, r = L(e, R) ? be(e, R) : [e], i = [], a = "";
2013
2031
  for (let e of r) {
2014
2032
  let t = this._commitTyped(e);
2015
2033
  t && (i.push(e.trim()), a ||= t);
@@ -2087,7 +2105,7 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
2087
2105
  (e.key === "ArrowDown" || e.key === "ArrowUp") && !v() && b(), T(e);
2088
2106
  }), o.addEventListener("paste", (e) => {
2089
2107
  let t = e.clipboardData?.getData("text/plain") ?? "";
2090
- I(t, L) && (e.preventDefault(), w(`${o.value}${t}`));
2108
+ L(t, R) && (e.preventDefault(), w(`${o.value}${t}`));
2091
2109
  }), o.addEventListener("blur", (e) => {
2092
2110
  e.relatedTarget && this.contains(e.relatedTarget) || (o.value.trim() && w(o.value, { quiet: !0 }), x());
2093
2111
  });
@@ -2112,35 +2130,35 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
2112
2130
  disconnectedCallback() {
2113
2131
  this._teardown(), this._ro?.disconnect(), this._ro = null;
2114
2132
  }
2115
- }, L = [
2133
+ }, R = [
2116
2134
  ",",
2117
2135
  ";",
2118
2136
  "\n",
2119
2137
  " "
2120
- ], Ce = [
2138
+ ], Se = [
2121
2139
  ["description", "description"],
2122
2140
  ["avatar", "avatar"],
2123
2141
  ["initials", "initials"],
2124
2142
  ["disabled-hint", "disabledHint"]
2125
- ], we = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), Te = (e) => {
2143
+ ], Ce = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), we = (e) => {
2126
2144
  let t = String(e ?? "").trim();
2127
2145
  return /^(https?:)?\/\//i.test(t) || /^\/(?!\/)/.test(t) || /^data:image\/(png|jpe?g|gif|webp|avif);/i.test(t) ? t : "";
2128
- }, Ee = (e) => {
2129
- let t = Te(e.avatar);
2130
- return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${g(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${z(t)}" alt="" />` : ""}</span>`;
2131
- }, De = (e, t, n) => {
2146
+ }, Te = (e) => {
2147
+ let t = we(e.avatar);
2148
+ return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${g(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${B(t)}" alt="" />` : ""}</span>`;
2149
+ }, Ee = (e, t, n) => {
2132
2150
  let r = !!e.disabled, i = e.description ? `<span class="wui-opt-desc">${g(e.description)}</span>` : "", a = e.disabledHint && r ? `<span class="wui-opt-hint">${g(e.disabledHint)}</span>` : "";
2133
- return `<button type="button" role="option" id="${z(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${z(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${v(e)}</span>${i}</span>${a}${Ee(e)}<span class="ms-check">${p("check")}</span></button>`;
2134
- }, R = /* @__PURE__ */ new Map(), Oe = (e) => {
2135
- if (R.has(e)) return R.get(e);
2151
+ return `<button type="button" role="option" id="${B(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${B(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${v(e)}</span>${i}</span>${a}${Te(e)}<span class="ms-check">${p("check")}</span></button>`;
2152
+ }, z = /* @__PURE__ */ new Map(), De = (e) => {
2153
+ if (z.has(e)) return z.get(e);
2136
2154
  let t = null;
2137
2155
  try {
2138
2156
  t = RegExp(`^(?:${e})$`, "u");
2139
2157
  } catch {
2140
2158
  console.warn(`<wui-multiselect> custom-pattern is not a valid regular expression and is ignored: ${e}`);
2141
2159
  }
2142
- return R.set(e, t), t;
2143
- }, z = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), B = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), ke = /[^0-9]/g, Ae = /[^0-9a-zA-Z]/g, je = class extends e {
2160
+ return z.set(e, t), t;
2161
+ }, B = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), V = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), Oe = /[^0-9]/g, ke = /[^0-9a-zA-Z]/g, Ae = class extends e {
2144
2162
  static formAssociated = !0;
2145
2163
  static get observedAttributes() {
2146
2164
  return [
@@ -2171,7 +2189,7 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
2171
2189
  this._value = this._clean(e), d(this, this._value), this._paint();
2172
2190
  }
2173
2191
  _clean(e) {
2174
- return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? Ae : ke, "").slice(0, this.length);
2192
+ return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? ke : Oe, "").slice(0, this.length);
2175
2193
  }
2176
2194
  constructor() {
2177
2195
  super();
@@ -2262,7 +2280,7 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
2262
2280
  disconnectedCallback() {
2263
2281
  this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
2264
2282
  }
2265
- }, V = [
2283
+ }, H = [
2266
2284
  [
2267
2285
  "AF",
2268
2286
  "Afghanistan",
@@ -3488,11 +3506,11 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
3488
3506
  "Zimbabwe",
3489
3507
  "263"
3490
3508
  ]
3491
- ], H = (e) => (V.find((t) => t[0] === e) || [
3509
+ ], U = (e) => (H.find((t) => t[0] === e) || [
3492
3510
  "",
3493
3511
  "",
3494
3512
  ""
3495
- ])[2], Me = {
3513
+ ])[2], je = {
3496
3514
  AD: ["Europe/Andorra"],
3497
3515
  AE: ["Asia/Dubai"],
3498
3516
  AF: ["Asia/Kabul"],
@@ -3894,13 +3912,13 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends
3894
3912
  ZA: ["Africa/Johannesburg"],
3895
3913
  ZM: ["Africa/Lusaka"],
3896
3914
  ZW: ["Africa/Harare"]
3897
- }, Ne = new Set(V.map(([e]) => e)), Pe = /* @__PURE__ */ new Map();
3898
- for (let [e, t] of Object.entries(Me)) for (let n of t) Pe.set(n, e);
3899
- function Fe(e) {
3900
- let t = Pe.get(e);
3901
- return t && Ne.has(t) ? t : null;
3915
+ }, Me = new Set(H.map(([e]) => e)), Ne = /* @__PURE__ */ new Map();
3916
+ for (let [e, t] of Object.entries(je)) for (let n of t) Ne.set(n, e);
3917
+ function Pe(e) {
3918
+ let t = Ne.get(e);
3919
+ return t && Me.has(t) ? t : null;
3902
3920
  }
3903
- function Ie(e) {
3921
+ function Fe(e) {
3904
3922
  if (!e) return null;
3905
3923
  let t;
3906
3924
  try {
@@ -3908,9 +3926,9 @@ function Ie(e) {
3908
3926
  } catch {
3909
3927
  return null;
3910
3928
  }
3911
- return t && Ne.has(t) ? t : null;
3929
+ return t && Me.has(t) ? t : null;
3912
3930
  }
3913
- function Le() {
3931
+ function Ie() {
3914
3932
  let e;
3915
3933
  try {
3916
3934
  e = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -3918,77 +3936,77 @@ function Le() {
3918
3936
  e = void 0;
3919
3937
  }
3920
3938
  let t = typeof navigator > "u" ? void 0 : navigator.language;
3921
- return Fe(e) || Ie(t) || "IN";
3939
+ return Pe(e) || Fe(t) || "IN";
3922
3940
  }
3923
3941
  //#endregion
3924
3942
  //#region src/WuiPhone.js
3925
- var Re = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, U = null, ze = null;
3926
- function Be() {
3927
- return U ? Promise.resolve(U) : (ze ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (U = {
3943
+ var Le = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, W = null, Re = null;
3944
+ function ze() {
3945
+ return W ? Promise.resolve(W) : (Re ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (W = {
3928
3946
  AsYouType: e.AsYouType,
3929
3947
  getExampleNumber: e.getExampleNumber,
3930
3948
  isValidPhoneNumber: e.isValidPhoneNumber,
3931
3949
  parsePhoneNumber: e.parsePhoneNumber,
3932
3950
  examples: t.default || t
3933
- }, U)).catch(() => null), ze);
3951
+ }, W)).catch(() => null), Re);
3934
3952
  }
3935
- function Ve(e, t) {
3936
- let n = `+${H(e)}`;
3953
+ function Be(e, t) {
3954
+ let n = `+${U(e)}`;
3937
3955
  return t?.startsWith(n) ? t.slice(n.length).trimStart() : null;
3938
3956
  }
3939
- function W(e, t) {
3940
- if (!U || !t) return t;
3957
+ function G(e, t) {
3958
+ if (!W || !t) return t;
3941
3959
  try {
3942
- return Ve(e, new U.AsYouType(e).input(`+${H(e)}${t}`)) || t;
3960
+ return Be(e, new W.AsYouType(e).input(`+${U(e)}${t}`)) || t;
3943
3961
  } catch {
3944
3962
  return t;
3945
3963
  }
3946
3964
  }
3947
- function He(e, t) {
3965
+ function Ve(e, t) {
3948
3966
  if (t <= 0) return 0;
3949
3967
  let n = 0;
3950
3968
  for (let r = 0; r < e.length; r++) if (/[0-9]/.test(e[r]) && (n += 1, n === t)) return r + 1;
3951
3969
  return e.length;
3952
3970
  }
3953
- function G(e) {
3954
- if (!U) return null;
3971
+ function K(e) {
3972
+ if (!W) return null;
3955
3973
  try {
3956
- return Ve(e, U.getExampleNumber(e, U.examples)?.formatInternational()) || null;
3974
+ return Be(e, W.getExampleNumber(e, W.examples)?.formatInternational()) || null;
3957
3975
  } catch {
3958
3976
  return null;
3959
3977
  }
3960
3978
  }
3961
- function Ue(e) {
3962
- if (!U || !e) return null;
3979
+ function He(e) {
3980
+ if (!W || !e) return null;
3963
3981
  try {
3964
- if (!U.isValidPhoneNumber(e)) return !1;
3965
- let t = U.parsePhoneNumber(e)?.getType?.();
3982
+ if (!W.isValidPhoneNumber(e)) return !1;
3983
+ let t = W.parsePhoneNumber(e)?.getType?.();
3966
3984
  return t === void 0 || t === "MOBILE" || t === "FIXED_LINE_OR_MOBILE";
3967
3985
  } catch {
3968
3986
  return null;
3969
3987
  }
3970
3988
  }
3971
- function We(e) {
3972
- if (!U) return null;
3989
+ function Ue(e) {
3990
+ if (!W) return null;
3973
3991
  try {
3974
- let t = U.getExampleNumber(e, U.examples);
3992
+ let t = W.getExampleNumber(e, W.examples);
3975
3993
  return t?.nationalNumber ? t.nationalNumber.length : null;
3976
3994
  } catch {
3977
3995
  return null;
3978
3996
  }
3979
3997
  }
3980
- function Ge(e, t, n) {
3998
+ function We(e, t, n) {
3981
3999
  try {
3982
- let r = U.parsePhoneNumber(t, e), i = r?.nationalNumber;
4000
+ let r = W.parsePhoneNumber(t, e), i = r?.nationalNumber;
3983
4001
  return !i || r.country !== e || i.length > n || !t.endsWith(i) ? null : i;
3984
4002
  } catch {
3985
4003
  return null;
3986
4004
  }
3987
4005
  }
3988
- function Ke(e) {
3989
- if (!U || !e?.trim().startsWith("+")) return null;
4006
+ function Ge(e) {
4007
+ if (!W || !e?.trim().startsWith("+")) return null;
3990
4008
  try {
3991
- let t = new U.AsYouType();
4009
+ let t = new W.AsYouType();
3992
4010
  t.input(e.trim());
3993
4011
  let n = t.getCountry();
3994
4012
  return n ? {
@@ -3999,7 +4017,7 @@ function Ke(e) {
3999
4017
  return null;
4000
4018
  }
4001
4019
  }
4002
- var qe = class extends e {
4020
+ var Ke = class extends e {
4003
4021
  static formAssociated = !0;
4004
4022
  static get observedAttributes() {
4005
4023
  return [
@@ -4019,7 +4037,7 @@ var qe = class extends e {
4019
4037
  } catch {
4020
4038
  this._internals = null;
4021
4039
  }
4022
- this._defaultCountry = Le(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
4040
+ this._defaultCountry = Ie(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
4023
4041
  }
4024
4042
  connectedCallback() {
4025
4043
  if (!this._rendered) {
@@ -4046,13 +4064,13 @@ var qe = class extends e {
4046
4064
  this.value = this._defaultValue || "";
4047
4065
  }
4048
4066
  get value() {
4049
- return this._national ? `+${H(this._country)}${this._national}` : "";
4067
+ return this._national ? `+${U(this._country)}${this._national}` : "";
4050
4068
  }
4051
4069
  set value(e) {
4052
- let t = String(e ?? "").trim(), n = Ke(t);
4070
+ let t = String(e ?? "").trim(), n = Ge(t);
4053
4071
  if (n) this._country = n.country, this._national = n.national.replace(/[^0-9]/g, "");
4054
4072
  else if (t.startsWith("+")) {
4055
- let e = t.replace(/[^0-9]/g, ""), n = String(H(this._country));
4073
+ let e = t.replace(/[^0-9]/g, ""), n = String(U(this._country));
4056
4074
  n && e.startsWith(n) && (e = e.slice(n.length)), this._national = e;
4057
4075
  } else this._national = t.replace(/[^0-9]/g, "");
4058
4076
  n && this.getAttribute("country") !== this._country ? this.setAttribute("country", this._country) : this._rendered && this.render(), this._committedValue = this.value, this._syncMirror();
@@ -4068,25 +4086,25 @@ var qe = class extends e {
4068
4086
  }
4069
4087
  render() {
4070
4088
  this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._country = this.getAttribute("country") || this._country;
4071
- let e = this.getAttribute("placeholder") || G(this._country) || "Enter phone number";
4089
+ let e = this.getAttribute("placeholder") || K(this._country) || "Enter phone number";
4072
4090
  this.id ||= `wui-phone-${Math.random().toString(36).slice(2, 9)}`;
4073
4091
  let t = `${this.id}-listbox`;
4074
4092
  this._listboxId = t;
4075
- let n = V.map(([e, n, r], i) => `<button type="button" role="option" id="${K(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${Re(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
4093
+ let n = H.map(([e, n, r], i) => `<button type="button" role="option" id="${q(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${Le(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
4076
4094
  this.innerHTML = `
4077
4095
  <div class="phone-input-wrap">
4078
4096
  <div class="phone-country-adornment">
4079
- <button type="button" class="country-toggle" aria-label="Choose country" aria-haspopup="listbox" aria-expanded="false" aria-controls="${K(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
4080
- <span class="${Re(this._country)}" data-flag aria-hidden="true"></span>
4097
+ <button type="button" class="country-toggle" aria-label="Choose country" aria-haspopup="listbox" aria-expanded="false" aria-controls="${q(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
4098
+ <span class="${Le(this._country)}" data-flag aria-hidden="true"></span>
4081
4099
  ${p("chevron-down", { className: "phone-chevron" })}
4082
- <span class="phone-dial" data-dial>+${H(this._country)}</span>
4100
+ <span class="phone-dial" data-dial>+${U(this._country)}</span>
4083
4101
  </button>
4084
- <div class="country-dropdown-menu" role="listbox" id="${K(t)}" tabindex="-1" hidden>
4085
- <div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${p("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${K(t)}" aria-autocomplete="list" /></div>
4102
+ <div class="country-dropdown-menu" role="listbox" id="${q(t)}" tabindex="-1" hidden>
4103
+ <div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${p("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${q(t)}" aria-autocomplete="list" /></div>
4086
4104
  <div class="country-list-scroll">${n}<div class="country-empty" hidden>No countries found</div></div>
4087
4105
  </div>
4088
4106
  </div>
4089
- <input type="tel" class="input" placeholder="${K(e)}" value="${K(W(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${K(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${K(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
4107
+ <input type="tel" class="input" placeholder="${q(e)}" value="${q(G(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${q(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${q(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
4090
4108
  </div>
4091
4109
  <div class="field-error" data-phone-error hidden></div>`, this._rendered = !0, d(this, this.value), this._wire();
4092
4110
  }
@@ -4117,12 +4135,12 @@ var qe = class extends e {
4117
4135
  }
4118
4136
  a && (a.hidden = n > 0);
4119
4137
  }, v = (e) => {
4120
- this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), u && (u.className = Re(e)), d && (d.textContent = `+${H(e)}`);
4138
+ this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), u && (u.className = Le(e)), d && (d.textContent = `+${U(e)}`);
4121
4139
  for (let t of this._itemEls()) {
4122
4140
  let n = t.dataset.iso === e;
4123
4141
  t.classList.toggle("selected", n), t.setAttribute("aria-selected", String(n));
4124
4142
  }
4125
- !this.getAttribute("placeholder") && o && (o.placeholder = G(e) || "Enter phone number"), o && this._national && (o.value = W(e, this._national)), g(), this._syncMirror(), this._emitChange(), o?.focus();
4143
+ !this.getAttribute("placeholder") && o && (o.placeholder = K(e) || "Enter phone number"), o && this._national && (o.value = G(e, this._national)), g(), this._syncMirror(), this._emitChange(), o?.focus();
4126
4144
  }, y = (t) => {
4127
4145
  let n = this._visibleItems();
4128
4146
  if (t.key === "ArrowDown") {
@@ -4156,7 +4174,7 @@ var qe = class extends e {
4156
4174
  let b = this.querySelector("[data-phone-error]"), x = (e) => {
4157
4175
  if (o.classList.toggle("is-invalid", e), e ? o.setAttribute("aria-invalid", "true") : o.removeAttribute("aria-invalid"), b) {
4158
4176
  if (e) {
4159
- let e = G(this._country);
4177
+ let e = K(this._country);
4160
4178
  b.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
4161
4179
  }
4162
4180
  b.hidden = !e;
@@ -4164,24 +4182,24 @@ var qe = class extends e {
4164
4182
  };
4165
4183
  o.addEventListener("input", (e) => {
4166
4184
  e.stopPropagation();
4167
- let t = o.selectionStart ?? o.value.length, n = o.value.slice(0, t).replace(/[^0-9]/g, "").length, r = o.value.replace(/[^0-9]/g, ""), i = We(this._country);
4185
+ let t = o.selectionStart ?? o.value.length, n = o.value.slice(0, t).replace(/[^0-9]/g, "").length, r = o.value.replace(/[^0-9]/g, ""), i = Ue(this._country);
4168
4186
  if (i && r.length > i) {
4169
- let e = Ge(this._country, r, i);
4187
+ let e = We(this._country, r, i);
4170
4188
  e ? (n = Math.max(0, n - (r.length - e.length)), r = e) : r = r.slice(0, i);
4171
4189
  }
4172
4190
  this._national = r;
4173
- let a = W(this._country, this._national);
4191
+ let a = G(this._country, this._national);
4174
4192
  if (o.value !== a) {
4175
4193
  o.value = a;
4176
- let e = He(a, Math.min(n, r.length));
4194
+ let e = Ve(a, Math.min(n, r.length));
4177
4195
  o.setSelectionRange(e, e);
4178
4196
  }
4179
- this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || Ue(this.value) === !0) && x(!1);
4197
+ this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || He(this.value) === !0) && x(!1);
4180
4198
  }), o.addEventListener("change", (e) => e.stopPropagation()), o.addEventListener("blur", () => {
4181
- x(this._national.length > 0 && Ue(this.value) === !1), this.value !== this._committedValue && this._emitChange();
4199
+ x(this._national.length > 0 && He(this.value) === !1), this.value !== this._committedValue && this._emitChange();
4182
4200
  }), o.addEventListener("paste", (e) => {
4183
- let t = Ke(e.clipboardData?.getData("text"));
4184
- t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = W(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
4201
+ let t = Ge(e.clipboardData?.getData("text"));
4202
+ t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = G(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
4185
4203
  }), this._bindGlobal = () => {
4186
4204
  this._teardownGlobals?.(), this._onDocClick = (e) => {
4187
4205
  f() && !this.contains(e.target) && g();
@@ -4190,9 +4208,9 @@ var qe = class extends e {
4190
4208
  });
4191
4209
  }, this._teardownGlobals = () => {
4192
4210
  this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), l(this);
4193
- }, this._bindGlobal(), Be().then((e) => {
4194
- if (!(!e || !o.isConnected) && (this._national && (o.value = W(this._country, this._national)), !this.getAttribute("placeholder"))) {
4195
- let e = G(this._country);
4211
+ }, this._bindGlobal(), ze().then((e) => {
4212
+ if (!(!e || !o.isConnected) && (this._national && (o.value = G(this._country, this._national)), !this.getAttribute("placeholder"))) {
4213
+ let e = K(this._country);
4196
4214
  e && (o.placeholder = e);
4197
4215
  }
4198
4216
  }), this._syncMirror();
@@ -4203,7 +4221,7 @@ var qe = class extends e {
4203
4221
  disconnectedCallback() {
4204
4222
  this._teardown();
4205
4223
  }
4206
- }, K = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Je = class extends e {
4224
+ }, q = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), qe = class extends e {
4207
4225
  static formAssociated = !0;
4208
4226
  static get observedAttributes() {
4209
4227
  return [
@@ -4292,19 +4310,19 @@ var qe = class extends e {
4292
4310
  this._listboxId = u;
4293
4311
  let f = e.map((e, t) => {
4294
4312
  let n = String(e.value) === String(this._value);
4295
- return `<button type="button" role="option" id="${q(`${u}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${q(e.value)}" aria-selected="${n}">${v(e)}</button>`;
4313
+ return `<button type="button" role="option" id="${J(`${u}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${J(e.value)}" aria-selected="${n}">${v(e)}</button>`;
4296
4314
  }).join("");
4297
4315
  this.innerHTML = `
4298
4316
  <div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${i}">
4299
- <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${q(u)}" aria-label="${q(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}>
4317
+ <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${J(u)}" aria-label="${J(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}>
4300
4318
  ${a ? p(a, { className: "search-select-icon" }) : ""}
4301
4319
  ${o ? `<span class="search-select-prefix">${g(o)}</span>` : ""}
4302
4320
  <span class="${l ? "" : "search-select-placeholder"}" data-label>${l ? v(l) : g(s)}</span>
4303
4321
  ${n ? `<span class="search-select-reset" role="button" aria-label="Clear selection" hidden>${p("x")}</span>` : ""}
4304
4322
  ${p("chevron-down", { className: "search-select-caret" })}
4305
4323
  </button>
4306
- <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${q(u)}" tabindex="-1" hidden>
4307
- ${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${q(c)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
4324
+ <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${J(u)}" tabindex="-1" hidden>
4325
+ ${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${J(c)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
4308
4326
  <div class="search-select-options">${f}<div class="search-select-empty" hidden>No matches</div></div>
4309
4327
  </div>
4310
4328
  </div>`, this._rendered = !0, d(this, this._value), this._wire(), this._syncReset();
@@ -4409,7 +4427,7 @@ var qe = class extends e {
4409
4427
  disconnectedCallback() {
4410
4428
  this._teardown();
4411
4429
  }
4412
- }, q = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Ye = class extends e {
4430
+ }, J = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Je = class extends e {
4413
4431
  static formAssociated = !0;
4414
4432
  static get observedAttributes() {
4415
4433
  return [
@@ -4449,19 +4467,19 @@ var qe = class extends e {
4449
4467
  return this._value;
4450
4468
  }
4451
4469
  set value(e) {
4452
- this._value = this._snapToStep(this._clamp(J(e, this._value))), this._syncValue(), this._syncMirrors();
4470
+ this._value = this._snapToStep(this._clamp(Y(e, this._value))), this._syncValue(), this._syncMirrors();
4453
4471
  }
4454
4472
  get start() {
4455
4473
  return this._start;
4456
4474
  }
4457
4475
  set start(e) {
4458
- this._start = Math.min(this._snapToStep(this._clamp(J(e, this._start))), this._end), this._syncValue(), this._syncMirrors();
4476
+ this._start = Math.min(this._snapToStep(this._clamp(Y(e, this._start))), this._end), this._syncValue(), this._syncMirrors();
4459
4477
  }
4460
4478
  get end() {
4461
4479
  return this._end;
4462
4480
  }
4463
4481
  set end(e) {
4464
- this._end = Math.max(this._snapToStep(this._clamp(J(e, this._end))), this._start), this._syncValue(), this._syncMirrors();
4482
+ this._end = Math.max(this._snapToStep(this._clamp(Y(e, this._end))), this._start), this._syncValue(), this._syncMirrors();
4465
4483
  }
4466
4484
  attributeChangedCallback(e, t, n) {
4467
4485
  if (e === "value" || e === "start" || e === "end" || e === "min" || e === "max" || e === "step") {
@@ -4474,19 +4492,19 @@ var qe = class extends e {
4474
4492
  this._isRange() ? this._resetRange() : this._resetSingle();
4475
4493
  }
4476
4494
  _updateFromAttribute(e) {
4477
- e === "value" ? this._value = this._snapToStep(this._clamp(J(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(J(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(J(this.getAttribute("end"), this._end))));
4495
+ e === "value" ? this._value = this._snapToStep(this._clamp(Y(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(Y(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(Y(this.getAttribute("end"), this._end))));
4478
4496
  }
4479
4497
  _isRange() {
4480
4498
  return this.hasAttribute("range");
4481
4499
  }
4482
4500
  _min() {
4483
- return J(this.getAttribute("min"), 0);
4501
+ return Y(this.getAttribute("min"), 0);
4484
4502
  }
4485
4503
  _max() {
4486
- return J(this.getAttribute("max"), 100);
4504
+ return Y(this.getAttribute("max"), 100);
4487
4505
  }
4488
4506
  _step() {
4489
- return J(this.getAttribute("step"), 1);
4507
+ return Y(this.getAttribute("step"), 1);
4490
4508
  }
4491
4509
  _clamp(e) {
4492
4510
  return Math.max(this._min(), Math.min(e, this._max()));
@@ -4551,7 +4569,7 @@ var qe = class extends e {
4551
4569
  aria-valuenow="${this._value}"
4552
4570
  aria-valuetext="${this._formatValue(this._value)}"
4553
4571
  ${a ? "disabled" : ""}
4554
- aria-label="${Xe(this.getAttribute("aria-label") || "Value")}"
4572
+ aria-label="${Ye(this.getAttribute("aria-label") || "Value")}"
4555
4573
  ></button>
4556
4574
  `}
4557
4575
  ${this.hasAttribute("show-value") ? n ? `<span class="slider-value">${this._formatValue(this._start)} – ${this._formatValue(this._end)}</span>` : `<span class="slider-value">${this._formatValue(this._value)}</span>` : ""}
@@ -4651,10 +4669,10 @@ var qe = class extends e {
4651
4669
  disconnectedCallback() {
4652
4670
  this._teardown();
4653
4671
  }
4654
- }, J = (e, t) => {
4672
+ }, Y = (e, t) => {
4655
4673
  let n = Number.parseFloat(e);
4656
4674
  return Number.isFinite(n) ? n : t;
4657
- }, Xe = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Ze = class extends e {
4675
+ }, Ye = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Xe = class extends e {
4658
4676
  static formAssociated = !0;
4659
4677
  _accessibleName() {
4660
4678
  return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
@@ -4727,7 +4745,7 @@ var qe = class extends e {
4727
4745
  d(this, this._values.join(",")), this.innerHTML = `
4728
4746
  <div class="search-select${t}">
4729
4747
  <div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
4730
- <input type="text" class="ms-input" data-input aria-label="${Y(this._accessibleName())}" placeholder="${Y(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
4748
+ <input type="text" class="ms-input" data-input aria-label="${X(this._accessibleName())}" placeholder="${X(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
4731
4749
  <div class="ms-chips" data-chips></div>
4732
4750
  </div>
4733
4751
  </div>`, this._rendered = !0, d(this, this._values.join(",")), this._renderControl(), this._wire();
@@ -4739,14 +4757,14 @@ var qe = class extends e {
4739
4757
  e.innerHTML = "";
4740
4758
  return;
4741
4759
  }
4742
- e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${Qe(e)}</span><button type="button" class="chip-remove" data-remove="${Y(e)}" aria-label="Remove ${Y(e)}">${p("x")}</button></span>`).join("");
4760
+ e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${Ze(e)}</span><button type="button" class="chip-remove" data-remove="${X(e)}" aria-label="Remove ${X(e)}">${p("x")}</button></span>`).join("");
4743
4761
  }
4744
4762
  }
4745
4763
  _wire() {
4746
4764
  this._teardown();
4747
4765
  let e = this.querySelector(".search-select-control"), t = this.querySelector("[data-input]");
4748
4766
  if (!e || !t) return;
4749
- let n = () => this.hasAttribute("disabled"), r = (this.getAttribute("separators") || "enter,comma").split(",").map((e) => e.trim()), i = this.getAttribute("max-tags"), a = this.hasAttribute("allow-duplicates"), o = new Set(r.map(ye).filter(Boolean)), s = () => {
4767
+ let n = () => this.hasAttribute("disabled"), r = (this.getAttribute("separators") || "enter,comma").split(",").map((e) => e.trim()), i = this.getAttribute("max-tags"), a = this.hasAttribute("allow-duplicates"), o = new Set(r.map(ve).filter(Boolean)), s = () => {
4750
4768
  d(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
4751
4769
  }, c = (e) => {
4752
4770
  let t = e.trim();
@@ -4778,9 +4796,9 @@ var qe = class extends e {
4778
4796
  e.preventDefault();
4779
4797
  let n = e.clipboardData.getData("text/plain"), a = [];
4780
4798
  for (let e of r) {
4781
- let t = be(e) ?? e;
4782
- if (I(n, [t])) {
4783
- a.push(...xe(n, [t]));
4799
+ let t = ye(e) ?? e;
4800
+ if (L(n, [t])) {
4801
+ a.push(...be(n, [t]));
4784
4802
  break;
4785
4803
  }
4786
4804
  }
@@ -4808,18 +4826,18 @@ var qe = class extends e {
4808
4826
  disconnectedCallback() {
4809
4827
  this._teardown();
4810
4828
  }
4811
- }, Qe = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), Y = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), $e = (e) => String(e).padStart(2, "0"), et = (e, t) => `${$e(e)}:${$e(t)}`, X = (e) => {
4829
+ }, Ze = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), X = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Qe = (e) => String(e).padStart(2, "0"), $e = (e, t) => `${Qe(e)}:${Qe(t)}`, Z = (e) => {
4812
4830
  let t = /^(\d{2}):(\d{2})$/.exec(e || "");
4813
4831
  return t ? {
4814
4832
  h: +t[1],
4815
4833
  m: +t[2]
4816
4834
  } : null;
4817
- }, tt = (e, t = "24") => {
4835
+ }, et = (e, t = "24") => {
4818
4836
  if (!e) return "";
4819
- if (t === "24") return et(e.h, e.m);
4837
+ if (t === "24") return $e(e.h, e.m);
4820
4838
  let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
4821
- return `${n}:${$e(e.m)} ${r}`;
4822
- }, nt = class extends e {
4839
+ return `${n}:${Qe(e.m)} ${r}`;
4840
+ }, tt = class extends e {
4823
4841
  static formAssociated = !0;
4824
4842
  static get observedAttributes() {
4825
4843
  return [
@@ -4833,7 +4851,8 @@ var qe = class extends e {
4833
4851
  "required",
4834
4852
  "size",
4835
4853
  "aria-label",
4836
- "aria-describedby"
4854
+ "aria-describedby",
4855
+ "aria-invalid"
4837
4856
  ];
4838
4857
  }
4839
4858
  constructor() {
@@ -4853,8 +4872,16 @@ var qe = class extends e {
4853
4872
  this._bindGlobal?.();
4854
4873
  }
4855
4874
  attributeChangedCallback(e, t, n) {
4875
+ if (e === "aria-invalid") {
4876
+ this._syncInvalid();
4877
+ return;
4878
+ }
4856
4879
  this._rendered && (e === "value" ? (this._value = n || "", this._syncFormValue(), this._syncTrigger()) : this.render());
4857
4880
  }
4881
+ _syncInvalid() {
4882
+ let e = this.querySelector(".timepicker-trigger");
4883
+ e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
4884
+ }
4858
4885
  formResetCallback() {
4859
4886
  this.value = this._defaultValue || "";
4860
4887
  }
@@ -4866,11 +4893,11 @@ var qe = class extends e {
4866
4893
  }
4867
4894
  render() {
4868
4895
  this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
4869
- let e = this.getAttribute("placeholder") || "Select time", t = X(this._value), n = this.getAttribute("format") || "24", r = this.getAttribute("size"), i = r === "sm" ? " input-sm" : r === "lg" ? " input-lg" : "", a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
4896
+ let e = this.getAttribute("placeholder") || "Select time", t = Z(this._value), n = this.getAttribute("format") || "24", r = this.getAttribute("size"), i = r === "sm" ? " input-sm" : r === "lg" ? " input-lg" : "", a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
4870
4897
  this.innerHTML = `
4871
4898
  <div class="timepicker">
4872
- <button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${g(a)}"` : ""}${o ? ` aria-describedby="${g(o)}"` : ""}>
4873
- <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? tt(t, n) : g(e)}</span>
4899
+ <button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${g(a)}"` : ""}${o ? ` aria-describedby="${g(o)}"` : ""}>
4900
+ <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? et(t, n) : g(e)}</span>
4874
4901
  ${p("clock")}
4875
4902
  </button>
4876
4903
  <div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
@@ -4882,14 +4909,14 @@ var qe = class extends e {
4882
4909
  _syncTrigger() {
4883
4910
  let e = this.querySelector(".timepicker-trigger"), t = this.querySelector("[data-trigger-label]");
4884
4911
  if (!t) return;
4885
- let n = X(this._value), r = this.getAttribute("format") || "24";
4886
- t.textContent = n ? tt(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
4912
+ let n = Z(this._value), r = this.getAttribute("format") || "24";
4913
+ t.textContent = n ? et(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
4887
4914
  }
4888
4915
  _buildTimes() {
4889
- let e = Math.max(1, parseInt(this.getAttribute("step") || "30", 10)), t = this.getAttribute("min") || "00:00", n = this.getAttribute("max") || "23:59", r = X(t) || {
4916
+ let e = Math.max(1, parseInt(this.getAttribute("step") || "30", 10)), t = this.getAttribute("min") || "00:00", n = this.getAttribute("max") || "23:59", r = Z(t) || {
4890
4917
  h: 0,
4891
4918
  m: 0
4892
- }, i = X(n) || {
4919
+ }, i = Z(n) || {
4893
4920
  h: 23,
4894
4921
  m: 59
4895
4922
  }, a = [], o = r.h, s = r.m;
@@ -4902,10 +4929,10 @@ var qe = class extends e {
4902
4929
  _renderOptions() {
4903
4930
  let e = this.querySelector(".timepicker-pop");
4904
4931
  if (!e) return;
4905
- let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = X(this._value), i = this._focus, a = "";
4932
+ let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = Z(this._value), i = this._focus, a = "";
4906
4933
  for (let e = 0; e < n.length; e++) {
4907
- let o = n[e], s = et(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
4908
- a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${tt(o, t)}</button>`;
4934
+ let o = n[e], s = $e(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
4935
+ a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${et(o, t)}</button>`;
4909
4936
  }
4910
4937
  e.innerHTML = a, this._focusActive();
4911
4938
  }
@@ -5003,7 +5030,7 @@ var qe = class extends e {
5003
5030
  disconnectedCallback() {
5004
5031
  this._teardown();
5005
5032
  }
5006
- }, rt = "wui-wizard-step", it = class extends e {
5033
+ }, nt = "wui-wizard-step", rt = class extends e {
5007
5034
  static get observedAttributes() {
5008
5035
  return [
5009
5036
  "active",
@@ -5021,7 +5048,7 @@ var qe = class extends e {
5021
5048
  ];
5022
5049
  }
5023
5050
  constructor() {
5024
- super(), this._active = 0, this._skipped = /* @__PURE__ */ new Set(), this._invalid = /* @__PURE__ */ new Set(), this._finished = !1, this._rendered = !1, this._reflecting = !1, this._beforeNext = null, this._header = null, this._footer = null;
5051
+ super(), this._active = 0, this._skipped = /* @__PURE__ */ new Set(), this._invalid = /* @__PURE__ */ new Set(), this._finished = !1, this._rendered = !1, this._reflecting = !1, this._beforeNext = null, this._header = null, this._footer = null, this._known = [], this._observer = null;
5025
5052
  }
5026
5053
  get active() {
5027
5054
  return this._active;
@@ -5037,13 +5064,13 @@ var qe = class extends e {
5037
5064
  this._beforeNext = typeof e == "function" ? e : null;
5038
5065
  }
5039
5066
  get _steps() {
5040
- return [...this.querySelectorAll(`:scope > ${rt}`)];
5067
+ return [...this.querySelectorAll(`:scope > ${nt}`)];
5041
5068
  }
5042
5069
  refresh() {
5043
5070
  this._rendered && this._renderChrome();
5044
5071
  }
5045
5072
  connectedCallback() {
5046
- if (this._rendered) this._wire();
5073
+ if (this._rendered) this._wire(), this._onStepsMutated();
5047
5074
  else {
5048
5075
  let e = Number.parseInt(this.getAttribute("active"), 10);
5049
5076
  this._active = Number.isFinite(e) && e >= 0 ? e : 0, this.render();
@@ -5056,7 +5083,7 @@ var qe = class extends e {
5056
5083
  if (!(!this._rendered || this._reflecting)) {
5057
5084
  if (e === "active") {
5058
5085
  let e = Number.parseInt(n, 10);
5059
- Number.isFinite(e) && e !== this._active && this._go(e, "set");
5086
+ Number.isFinite(e) && this._go(e, "set");
5060
5087
  return;
5061
5088
  }
5062
5089
  this._renderChrome();
@@ -5064,16 +5091,40 @@ var qe = class extends e {
5064
5091
  }
5065
5092
  render() {
5066
5093
  let e = this._steps;
5067
- this._header || (this._header = document.createElement("nav"), this._header.className = "stepper wizard-stepper", this._footer = document.createElement("div"), this._footer.className = "form-actions wizard-footer form-actions-between", e.length ? (this.insertBefore(this._header, e[0]), e[e.length - 1].after(this._footer)) : (this.prepend(this._header), this.append(this._footer))), this._renderChrome(), this._rendered = !0, this._wire();
5094
+ this._header || (this._header = document.createElement("nav"), this._header.className = "stepper wizard-stepper", this._footer = document.createElement("div"), this._footer.className = "form-actions wizard-footer form-actions-between", e.length ? (this.insertBefore(this._header, e[0]), e[e.length - 1].after(this._footer)) : (this.prepend(this._header), this.append(this._footer))), this._known = e, this._renderChrome(), this._rendered = !0, this._wire();
5068
5095
  }
5069
5096
  _renderChrome() {
5070
- let e = this._steps;
5071
- this._clampActive(e), this._syncPanels(e), this._header.innerHTML = this._headerHtml(e), this._footer.innerHTML = this._footerHtml(e), this._header.hidden = this.hasAttribute("hide-stepper");
5097
+ let e = this._reconcileSteps();
5098
+ this._placeChrome(e), this._clampActive(e), this._syncPanels(e), this._header.innerHTML = this._headerHtml(e), this._footer.innerHTML = this._footerHtml(e), this._header.hidden = this.hasAttribute("hide-stepper");
5072
5099
  }
5073
5100
  _clampActive(e) {
5074
5101
  let t = Math.max(0, e.length - 1);
5075
5102
  this._active > t && (this._active = t), this._active < 0 && (this._active = 0);
5076
5103
  }
5104
+ _reconcileSteps() {
5105
+ let e = this._steps, t = this._known;
5106
+ if (this._known = e, it(e, t)) return e;
5107
+ let n = (n) => new Set([...n].map((n) => e.indexOf(t[n])).filter((e) => e >= 0));
5108
+ this._skipped = n(this._skipped), this._invalid = n(this._invalid);
5109
+ let r = t[this._active];
5110
+ if (!r) return e;
5111
+ let i = e.indexOf(r);
5112
+ if (i < 0) {
5113
+ let n = (t) => e.includes(t), r = t.slice(this._active + 1).find(n) ?? t.slice(0, this._active).reverse().find(n);
5114
+ i = r ? e.indexOf(r) : this._active;
5115
+ }
5116
+ return i = Math.min(i, Math.max(0, e.length - 1)), i !== this._active && (this._active = i, this._reflectActive(i)), e;
5117
+ }
5118
+ _placeChrome(e) {
5119
+ if (!e.length) return;
5120
+ let t = e[e.length - 1];
5121
+ this._header.nextElementSibling !== e[0] && this.insertBefore(this._header, e[0]), this._footer.previousElementSibling !== t && t.after(this._footer);
5122
+ }
5123
+ _onStepsMutated() {
5124
+ if (!this._rendered) return;
5125
+ let e = this._steps;
5126
+ (!e.length || this._header.nextElementSibling === e[0] && this._footer.previousElementSibling === e[e.length - 1]) && it(e, this._known) || (this._renderChrome(), this._observer?.takeRecords());
5127
+ }
5077
5128
  _syncPanels(e) {
5078
5129
  e.forEach((e, t) => {
5079
5130
  let n = t === this._active;
@@ -5096,13 +5147,13 @@ var qe = class extends e {
5096
5147
  return e.map((e, r) => {
5097
5148
  let a = this._stepStatus(e, r), o = e.getAttribute("label") || "", s = e.getAttribute("description") || "", c = e.getAttribute("icon") || "", l = r + 1, u;
5098
5149
  u = a === "done" ? p("check") : a === "error" ? p("alert-triangle") : a === "skipped" ? p("minus") : c ? p(c) : String(l);
5099
- let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "", m = i || r < this._active, h = s ? `<span class="step-desc">${Z(s)}</span>` : "", g;
5100
- return g = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${Z(o)}</span>${h}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${Z(o)}</span>${h}` : `<span class="step-circle">${u}</span><span class="step-label">${Z(o)}</span>${h}`, m ? `<button type="button" class="${d}" data-step="${r}"${f}>${g}</button>` : `<div class="${d}"${f}>${g}</div>`;
5150
+ let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "", m = i || r < this._active, h = s ? `<span class="step-desc">${Q(s)}</span>` : "", g;
5151
+ return g = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${h}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${h}` : `<span class="step-circle">${u}</span><span class="step-label">${Q(o)}</span>${h}`, m ? `<button type="button" class="${d}" data-step="${r}"${f}>${g}</button>` : `<div class="${d}"${f}>${g}</div>`;
5101
5152
  }).join("");
5102
5153
  }
5103
5154
  _footerHtml(e) {
5104
5155
  let t = this._active, n = e.length - 1, r = this.hasAttribute("disabled") ? " disabled" : "", i = e[t]?.hasAttribute("optional") || this.hasAttribute("skippable"), a = this.getAttribute("back-label") || "Back", o = this.getAttribute("next-label") || "Next", s = this.getAttribute("skip-label") || "Skip", c = this.getAttribute("finish-label") || "Finish";
5105
- return `${t > 0 ? `<button type="button" class="btn btn-secondary" data-nav="back"${r}>${p("arrow-left", { className: "me-2" })}${Z(a)}</button>` : "<span></span>"}<span class="wizard-footer-actions">${i && t < n ? `<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${Z(s)}</button>` : ""}${t < n ? `<button type="button" class="btn btn-primary" data-nav="next"${r}>${Z(o)}${p("arrow-right", { className: "ms-2" })}</button>` : `<button type="button" class="btn btn-primary" data-nav="finish"${r}>${Z(c)}</button>`}</span>`;
5156
+ return `${t > 0 ? `<button type="button" class="btn btn-secondary" data-nav="back"${r}>${p("arrow-left", { className: "me-2" })}${Q(a)}</button>` : "<span></span>"}<span class="wizard-footer-actions">${i && t < n ? `<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${Q(s)}</button>` : ""}${t < n ? `<button type="button" class="btn btn-primary" data-nav="next"${r}>${Q(o)}${p("arrow-right", { className: "ms-2" })}</button>` : `<button type="button" class="btn btn-primary" data-nav="finish"${r}>${Q(c)}</button>`}</span>`;
5106
5157
  }
5107
5158
  _wire() {
5108
5159
  this._teardown(), this._onHeaderClick = (e) => {
@@ -5113,10 +5164,10 @@ var qe = class extends e {
5113
5164
  if (!t || !this.contains(t) || this.hasAttribute("disabled")) return;
5114
5165
  let n = t.dataset.nav;
5115
5166
  n === "back" ? this._back() : n === "skip" ? this._skip() : (n === "next" || n === "finish") && this._next();
5116
- }, this._header.addEventListener("click", this._onHeaderClick), this._footer.addEventListener("click", this._onFooterClick);
5167
+ }, this._header.addEventListener("click", this._onHeaderClick), this._footer.addEventListener("click", this._onFooterClick), this._observer = new MutationObserver(() => this._onStepsMutated()), this._observer.observe(this, { childList: !0 });
5117
5168
  }
5118
5169
  _teardown() {
5119
- this._header && this._onHeaderClick && this._header.removeEventListener("click", this._onHeaderClick), this._footer && this._onFooterClick && this._footer.removeEventListener("click", this._onFooterClick);
5170
+ this._header && this._onHeaderClick && this._header.removeEventListener("click", this._onHeaderClick), this._footer && this._onFooterClick && this._footer.removeEventListener("click", this._onFooterClick), this._observer?.disconnect(), this._observer = null;
5120
5171
  }
5121
5172
  _stepTo(e) {
5122
5173
  this.hasAttribute("disabled") || !this.hasAttribute("non-linear") && e >= this._active || this._go(e, "step");
@@ -5125,9 +5176,10 @@ var qe = class extends e {
5125
5176
  this._active > 0 && this._go(this._active - 1, "back");
5126
5177
  }
5127
5178
  async _next() {
5128
- let e = this._active, t = e >= this._steps.length - 1;
5179
+ this._reconcileSteps();
5180
+ let e = this._active, t = this._steps, n = e >= t.length - 1, r = t[e];
5129
5181
  if (!this.dispatchEvent(new CustomEvent("wui-wizard:beforechange", {
5130
- detail: t ? {
5182
+ detail: n ? {
5131
5183
  index: e,
5132
5184
  next: e,
5133
5185
  reason: "finish"
@@ -5139,15 +5191,16 @@ var qe = class extends e {
5139
5191
  cancelable: !0
5140
5192
  }))) return this._flagInvalid(e);
5141
5193
  if (this._beforeNext) {
5142
- let t;
5194
+ let i;
5143
5195
  try {
5144
- t = await this._beforeNext(e);
5196
+ i = await this._beforeNext(e);
5145
5197
  } catch {
5146
- t = !1;
5198
+ i = !1;
5147
5199
  }
5148
- if (t === !1) return this._flagInvalid(e);
5200
+ if (this._reconcileSteps(), t = this._steps, e = t.indexOf(r), e < 0) return;
5201
+ if (n = e >= t.length - 1, i === !1) return this._flagInvalid(e);
5149
5202
  }
5150
- if (this._invalid.delete(e), this._skipped.delete(e), t) return this._finish();
5203
+ if (this._invalid.delete(e), this._skipped.delete(e), n) return this._finish();
5151
5204
  this._go(e + 1, "next");
5152
5205
  }
5153
5206
  _skip() {
@@ -5164,7 +5217,7 @@ var qe = class extends e {
5164
5217
  this._invalid.delete(this._active), this._finished = !0, this._renderChrome(), this.dispatchEvent(new CustomEvent("wui-wizard:finish", { detail: { index: this._active } }));
5165
5218
  }
5166
5219
  _go(e, t) {
5167
- let n = this._steps, r = Math.max(0, n.length - 1), i = Math.min(Math.max(e, 0), r), a = this._active;
5220
+ let n = this._reconcileSteps(), r = Math.max(0, n.length - 1), i = Math.min(Math.max(e, 0), r), a = this._active;
5168
5221
  this._finished = !1, this._invalid.delete(a), this._active = i, this._reflectActive(i), this._renderChrome(), t !== "silent" && i !== a && this.dispatchEvent(new CustomEvent("wui-wizard:change", { detail: {
5169
5222
  index: i,
5170
5223
  previous: a,
@@ -5174,7 +5227,7 @@ var qe = class extends e {
5174
5227
  _reflectActive(e) {
5175
5228
  this._reflecting = !0, this.setAttribute("active", String(e)), this._reflecting = !1;
5176
5229
  }
5177
- }, Z = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), at = class extends e {
5230
+ }, it = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), Q = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), at = class extends e {
5178
5231
  static get observedAttributes() {
5179
5232
  return [
5180
5233
  "label",
@@ -5268,22 +5321,22 @@ function vt(e, t = {}) {
5268
5321
  }
5269
5322
  //#endregion
5270
5323
  //#region src/passwordRules.js
5271
- var Q = {
5324
+ var yt = {
5272
5325
  minLength: 8,
5273
5326
  uppercase: !0,
5274
5327
  lowercase: !0,
5275
5328
  digit: !0,
5276
5329
  special: !0,
5277
5330
  uniqueChars: 0
5278
- }, yt = "Password Requirements";
5279
- function bt(e) {
5280
- return e === !0 || e == null ? { ...Q } : {
5281
- ...Q,
5331
+ }, bt = "Password Requirements";
5332
+ function xt(e) {
5333
+ return e === !0 || e == null ? { ...yt } : {
5334
+ ...yt,
5282
5335
  ...e
5283
5336
  };
5284
5337
  }
5285
- function xt(e) {
5286
- let t = bt(e), n = [];
5338
+ function St(e) {
5339
+ let t = xt(e), n = [];
5287
5340
  if (t.minLength > 0 && n.push({
5288
5341
  key: "length",
5289
5342
  label: `At least ${t.minLength} characters long`,
@@ -5314,25 +5367,25 @@ function xt(e) {
5314
5367
  }
5315
5368
  return n;
5316
5369
  }
5317
- function St(e, t) {
5370
+ function Ct(e, t) {
5318
5371
  let n = e == null ? "" : String(e);
5319
- return xt(t).map((e) => ({
5372
+ return St(t).map((e) => ({
5320
5373
  key: e.key,
5321
5374
  label: e.label,
5322
5375
  met: e.test(n)
5323
5376
  }));
5324
5377
  }
5325
- function Ct(e, t) {
5326
- return St(e, t).every((e) => e.met);
5378
+ function wt(e, t) {
5379
+ return Ct(e, t).every((e) => e.met);
5327
5380
  }
5328
5381
  //#endregion
5329
5382
  //#region src/index.js
5330
5383
  var $ = (e, t) => {
5331
5384
  typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
5332
5385
  };
5333
- function wt() {
5334
- $("wui-select", Je), $("wui-phone", qe), $("wui-datepicker", se), $("wui-date-range", ce), $("wui-dock", le), $("wui-feedback", me), $("wui-consent-banner", ie), $("wui-slider", Ye), $("wui-timepicker", nt), $("wui-autocomplete", y), $("wui-multiselect", Se), $("wui-taginput", Ze), $("wui-otp", je), $("wui-status-icon", r), $("wui-wizard-step", at), $("wui-wizard", it);
5386
+ function Tt() {
5387
+ $("wui-select", qe), $("wui-phone", Ke), $("wui-datepicker", oe), $("wui-date-range", se), $("wui-dock", ce), $("wui-feedback", pe), $("wui-consent-banner", ie), $("wui-slider", Je), $("wui-timepicker", tt), $("wui-autocomplete", y), $("wui-multiselect", xe), $("wui-taginput", Xe), $("wui-otp", Ae), $("wui-status-icon", r), $("wui-wizard-step", at), $("wui-wizard", rt);
5335
5388
  }
5336
- wt();
5389
+ Tt();
5337
5390
  //#endregion
5338
- export { ot as COPY_FEEDBACK_MS, ct as DEFAULT_IMAGE_ACCEPT, lt as DEFAULT_MAX_SIZE_MB, Q as DEFAULT_PASSWORD_RULES, yt as DEFAULT_REQUIREMENTS_TITLE, n as STATUS_TONES, y as WuiAutocomplete, ie as WuiConsentBanner, se as WuiDatePicker, ce as WuiDateRange, le as WuiDock, me as WuiFeedback, Se as WuiMultiSelect, je as WuiOtp, qe as WuiPhone, Je as WuiSelect, Ye as WuiSlider, r as WuiStatusIcon, Ze as WuiTagInput, nt as WuiTimePicker, it as WuiWizard, at as WuiWizardStep, gt as acceptLabel, xt as buildPasswordRules, st as copyTextToClipboard, wt as defineWeborityElements, St as evaluatePassword, p as glyphSvg, mt as isImageFile, ht as isImageOnlyAccept, _t as matchesAccept, Ct as passwordSatisfies, vt as validateFile };
5391
+ export { ot as COPY_FEEDBACK_MS, ct as DEFAULT_IMAGE_ACCEPT, lt as DEFAULT_MAX_SIZE_MB, yt as DEFAULT_PASSWORD_RULES, bt as DEFAULT_REQUIREMENTS_TITLE, n as STATUS_TONES, y as WuiAutocomplete, ie as WuiConsentBanner, oe as WuiDatePicker, se as WuiDateRange, ce as WuiDock, pe as WuiFeedback, xe as WuiMultiSelect, Ae as WuiOtp, Ke as WuiPhone, qe as WuiSelect, Je as WuiSlider, r as WuiStatusIcon, Xe as WuiTagInput, tt as WuiTimePicker, rt as WuiWizard, at as WuiWizardStep, gt as acceptLabel, St as buildPasswordRules, st as copyTextToClipboard, Tt as defineWeborityElements, Ct as evaluatePassword, p as glyphSvg, mt as isImageFile, ht as isImageOnlyAccept, _t as matchesAccept, wt as passwordSatisfies, vt as validateFile };