@saasbase-io/core-elements 1.21.0 → 1.22.0

package/dist/index.mjs

@@ -56,7 +56,7 @@ class li {
   }
 }
 const oe = li.Instance;
-class xt extends Error {
+class $t extends Error {
   constructor(e, r, i) {
     super(r), this.name = "LoginflowError", this.code = e, this.details = i;
   }
@@ -74,11 +74,11 @@ class Qe {
         const b = yield fetch(o, Object.assign(Object.assign({}, i), { signal: h.signal, headers: Object.assign(Object.assign(Object.assign({ "Content-Type": "application/json" }, s.apiKey && { Authorization: `Bearer ${s.apiKey}` }), s.headers), i.headers) }));
         if (clearTimeout(p), !b.ok) {
           const y = yield b.json().catch(() => ({}));
-          throw new xt(y.code || "API_ERROR", y.message || `HTTP ${b.status}: ${b.statusText}`, y.details);
+          throw new $t(y.code || "API_ERROR", y.message || `HTTP ${b.status}: ${b.statusText}`, y.details);
         }
         return yield b.json();
       } catch (b) {
-        throw clearTimeout(p), b instanceof xt ? b : b instanceof Error ? b.name === "AbortError" ? new xt("TIMEOUT", "Request timeout") : new xt("NETWORK_ERROR", b.message) : new xt("UNKNOWN_ERROR", "An unknown error occurred");
+        throw clearTimeout(p), b instanceof $t ? b : b instanceof Error ? b.name === "AbortError" ? new $t("TIMEOUT", "Request timeout") : new $t("NETWORK_ERROR", b.message) : new $t("UNKNOWN_ERROR", "An unknown error occurred");
       }
     });
   }
@@ -191,7 +191,7 @@ class Bt {
           expires_at: Date.now() + r.expires_in * 1e3
         };
       } catch (r) {
-        return r instanceof xt ? console.error("Token refresh failed:", r.message, r.details) : console.error("Token refresh failed:", r), this.clearSession(), null;
+        return r instanceof $t ? console.error("Token refresh failed:", r.message, r.details) : console.error("Token refresh failed:", r), this.clearSession(), null;
       }
     });
   }
@@ -343,11 +343,11 @@ class sa {
     ]);
     const n = oe.getConfig();
     if (!n.domain)
-      throw new xt("CONFIG_ERROR", "Domain is required");
+      throw new $t("CONFIG_ERROR", "Domain is required");
     if (!n.appId)
-      throw new xt("CONFIG_ERROR", "App ID is required");
+      throw new $t("CONFIG_ERROR", "App ID is required");
     if (!n.clientSecret)
-      throw new xt("CONFIG_ERROR", "Client Secret is required");
+      throw new $t("CONFIG_ERROR", "Client Secret is required");
     this.flowId = e, this.location = i, this.flowStateManager = s || new fc(), this.flowEventBus = r || new vc(), this.navigationTypeDetector = o || new vh(), Bt.Instance.cleanExpiredSession(), Bt.Instance.scheduleTokenRefresh();
   }
   static init(e, r, i, s, o) {
@@ -369,7 +369,7 @@ class sa {
   startFlow(e, r) {
     return K(this, void 0, void 0, function* () {
       if (!r.app_id)
-        throw new xt("VALIDATION_ERROR", "Client ID is required");
+        throw new $t("VALIDATION_ERROR", "Client ID is required");
       const i = `/v1/auth-flow/${e}/start`;
       return this.executeFlowRequest(() => this.httpClient.post(i, r), "START_FLOW_ERROR", "Failed to start flow");
     });
@@ -389,7 +389,7 @@ class sa {
   processEvent(e, r) {
     return K(this, void 0, void 0, function* () {
       if (!e.event)
-        throw new xt("VALIDATION_ERROR", "Event type is required");
+        throw new $t("VALIDATION_ERROR", "Event type is required");
       const i = this.eventHandlers.get(e.event);
       return i ? yield i() : yield this.processServerEvent(e, r);
     });
@@ -403,7 +403,7 @@ class sa {
         const o = yield e();
         return s && (yield s(o)), this.processAuthResult(o.auth_result), o.redirection && this.redirect(o.redirection), o;
       } catch (o) {
-        throw o instanceof xt ? o : new xt(r, i, o instanceof Error ? { originalError: o.message, stack: o.stack } : o);
+        throw o instanceof $t ? o : new $t(r, i, o instanceof Error ? { originalError: o.message, stack: o.stack } : o);
       }
     });
   }
@@ -414,7 +414,7 @@ class sa {
     return K(this, void 0, void 0, function* () {
       let i = this.flowStateManager.getFlowState();
       if (!i && (console.warn("Flow state expired, restarting flow before processing event"), yield this.initializeFlowInternal(), i = this.flowStateManager.getFlowState(), !i))
-        throw new xt("FLOW_RESTART_ERROR", "Failed to restart flow - no flow state after initialization");
+        throw new $t("FLOW_RESTART_ERROR", "Failed to restart flow - no flow state after initialization");
       const s = i.state, o = `/v1/auth-flow/${i.flowType}/events`, n = yield this.executeFlowRequest(() => this.httpClient.post(o, e), "PROCESS_EVENT_ERROR", "Failed to process event", r);
       if (!n.auth_result) {
         this.flowStateManager.saveFlowState(i.flowType, i.flow_id, n);
@@ -461,7 +461,7 @@ class sa {
    */
   validateFlowType(e) {
     if (e === "custom" && !this.flowId)
-      throw new xt("FLOW_ID_ERROR", "Flow ID is required for custom flows");
+      throw new $t("FLOW_ID_ERROR", "Flow ID is required for custom flows");
   }
   /**
    * Check if we should resume an existing flow.
@@ -547,7 +547,7 @@ class sa {
         return this.flowId || "signup-flow";
       case "custom":
         if (!this.flowId)
-          throw new xt("FLOW_ID_ERROR", "Flow ID is required for custom flows");
+          throw new $t("FLOW_ID_ERROR", "Flow ID is required for custom flows");
         return this.flowId;
     }
   }
@@ -1128,11 +1128,11 @@ class di {
   }
   ensureConfigured() {
     if (!this.configured)
-      throw new xt("NOT_CONFIGURED", "Auth.configure() must be called before using Auth methods");
+      throw new $t("NOT_CONFIGURED", "Auth.configure() must be called before using Auth methods");
   }
   ensureLoginflowInitialized() {
     if (!this.loginflow)
-      throw new xt("LOGINFLOW_NOT_INITIALIZED", "Call Auth.startLoginflow() first");
+      throw new $t("LOGINFLOW_NOT_INITIALIZED", "Call Auth.startLoginflow() first");
   }
   startLoginflowInternal(e) {
     return K(this, arguments, void 0, function* (r, i = !1) {
@@ -1160,7 +1160,7 @@ class di {
   }
   configure(e) {
     if (!e.domain || !e.appId || !e.clientSecret)
-      throw new xt("CONFIG_ERROR", "domain, appId, and clientSecret are required");
+      throw new $t("CONFIG_ERROR", "domain, appId, and clientSecret are required");
     oe.setConfig(e), this.configured = !0;
   }
   isAuthenticated() {
@@ -1290,7 +1290,7 @@ class di {
     this.ensureConfigured(), Bt.Instance.clearSession(), Bt.Instance.cleanup(), this.loginflow && (this.loginflow.cleanup(), this.loginflow = null), this.navigationManager && (this.navigationManager.destroy(), this.navigationManager = null), this.flowEventBus && (this.flowEventBus.clear(), this.flowEventBus = null), window.location.reload(), console.log("Refreshed the page to clear any in-memory state");
   }
 }
-const St = di.Instance;
+const Ct = di.Instance;
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -5489,13 +5489,13 @@ var pa = "-", dp = (t) => {
       }
       S = !1;
     }
-    let T = bp(y).join(":"), I = w ? T + Dc : T, z = I + k;
+    let T = bp(y).join(":"), A = w ? T + Dc : T, z = A + k;
     if (o.includes(z)) continue;
     o.push(z);
     let J = s(k, S);
     for (let Y = 0; Y < J.length; ++Y) {
-      let nt = J[Y];
-      o.push(I + nt);
+      let at = J[Y];
+      o.push(A + at);
     }
     h = b + (h.length > 0 ? " " + h : h);
   }
@@ -5542,7 +5542,7 @@ var it = (t) => {
   let i = Mc.exec(t);
   return i ? i[1] ? typeof e == "string" ? i[1] === e : e.has(i[1]) : r(i[2]) : !1;
 }, zp = (t) => Cp.test(t) && !Ep.test(t), Fc = () => !1, jp = (t) => kp.test(t), Dp = (t) => Rp.test(t), Up = /* @__PURE__ */ _p(() => {
-  let t = it("colors"), e = it("spacing"), r = it("blur"), i = it("brightness"), s = it("borderColor"), o = it("borderRadius"), n = it("borderSpacing"), h = it("borderWidth"), p = it("contrast"), b = it("grayscale"), y = it("hueRotate"), w = it("invert"), E = it("gap"), C = it("gradientColorStops"), S = it("gradientColorStopPositions"), k = it("inset"), T = it("margin"), I = it("opacity"), z = it("padding"), J = it("saturate"), Y = it("scale"), nt = it("sepia"), gt = it("skew"), jt = it("space"), G = it("translate"), Yt = () => [
+  let t = it("colors"), e = it("spacing"), r = it("blur"), i = it("brightness"), s = it("borderColor"), o = it("borderRadius"), n = it("borderSpacing"), h = it("borderWidth"), p = it("contrast"), b = it("grayscale"), y = it("hueRotate"), w = it("invert"), E = it("gap"), C = it("gradientColorStops"), S = it("gradientColorStopPositions"), k = it("inset"), T = it("margin"), A = it("opacity"), z = it("padding"), J = it("saturate"), Y = it("scale"), at = it("sepia"), gt = it("skew"), jt = it("space"), G = it("translate"), Yt = () => [
     "auto",
     "contain",
     "none"
@@ -5556,7 +5556,7 @@ var it = (t) => {
     "auto",
     V,
     e
-  ], L = () => [V, e], hr = () => [
+  ], N = () => [V, e], hr = () => [
     "",
     Ae,
     Me
@@ -5640,25 +5640,25 @@ var it = (t) => {
         Fe,
         V
       ],
-      borderSpacing: L(),
+      borderSpacing: N(),
       borderWidth: hr(),
       contrast: mt(),
       grayscale: Xt(),
       hueRotate: mt(),
       invert: Xt(),
-      gap: L(),
+      gap: N(),
       gradientColorStops: [t],
       gradientColorStopPositions: [Op, Me],
       inset: Oe(),
       margin: Oe(),
       opacity: mt(),
-      padding: L(),
+      padding: N(),
       saturate: mt(),
       scale: mt(),
       sepia: Xt(),
       skew: mt(),
-      space: L(),
-      translate: L()
+      space: N(),
+      translate: N()
     },
     classGroups: {
       aspect: [{ aspect: [
@@ -6029,7 +6029,7 @@ var it = (t) => {
       ] }],
       "list-style-position": [{ list: ["inside", "outside"] }],
       "placeholder-color": [{ placeholder: [t] }],
-      "placeholder-opacity": [{ "placeholder-opacity": [I] }],
+      "placeholder-opacity": [{ "placeholder-opacity": [A] }],
       "text-alignment": [{ text: [
         "left",
         "center",
@@ -6039,7 +6039,7 @@ var it = (t) => {
         "end"
       ] }],
       "text-color": [{ text: [t] }],
-      "text-opacity": [{ "text-opacity": [I] }],
+      "text-opacity": [{ "text-opacity": [A] }],
       "text-decoration": [
         "underline",
         "overline",
@@ -6076,7 +6076,7 @@ var it = (t) => {
         "balance",
         "pretty"
       ] }],
-      indent: [{ indent: L() }],
+      indent: [{ indent: N() }],
       "vertical-align": [{ align: [
         "baseline",
         "top",
@@ -6119,7 +6119,7 @@ var it = (t) => {
         "content",
         "text"
       ] }],
-      "bg-opacity": [{ "bg-opacity": [I] }],
+      "bg-opacity": [{ "bg-opacity": [A] }],
       "bg-origin": [{ "bg-origin": [
         "border",
         "padding",
@@ -6184,13 +6184,13 @@ var it = (t) => {
       "border-w-r": [{ "border-r": [h] }],
       "border-w-b": [{ "border-b": [h] }],
       "border-w-l": [{ "border-l": [h] }],
-      "border-opacity": [{ "border-opacity": [I] }],
+      "border-opacity": [{ "border-opacity": [A] }],
       "border-style": [{ border: [...ce(), "hidden"] }],
       "divide-x": [{ "divide-x": [h] }],
       "divide-x-reverse": ["divide-x-reverse"],
       "divide-y": [{ "divide-y": [h] }],
       "divide-y-reverse": ["divide-y-reverse"],
-      "divide-opacity": [{ "divide-opacity": [I] }],
+      "divide-opacity": [{ "divide-opacity": [A] }],
       "divide-style": [{ divide: ce() }],
       "border-color": [{ border: [s] }],
       "border-color-x": [{ "border-x": [s] }],
@@ -6209,7 +6209,7 @@ var it = (t) => {
       "ring-w": [{ ring: hr() }],
       "ring-w-inset": ["ring-inset"],
       "ring-color": [{ ring: [t] }],
-      "ring-opacity": [{ "ring-opacity": [I] }],
+      "ring-opacity": [{ "ring-opacity": [A] }],
       "ring-offset-w": [{ "ring-offset": [Ae, Me] }],
       "ring-offset-color": [{ "ring-offset": [t] }],
       shadow: [{ shadow: [
@@ -6220,7 +6220,7 @@ var it = (t) => {
         Np
       ] }],
       "shadow-color": [{ shadow: [Ri] }],
-      opacity: [{ opacity: [I] }],
+      opacity: [{ opacity: [A] }],
       "mix-blend": [{ "mix-blend": [
         ...te(),
         "plus-lighter",
@@ -6241,7 +6241,7 @@ var it = (t) => {
       "hue-rotate": [{ "hue-rotate": [y] }],
       invert: [{ invert: [w] }],
       saturate: [{ saturate: [J] }],
-      sepia: [{ sepia: [nt] }],
+      sepia: [{ sepia: [at] }],
       "backdrop-filter": [{ "backdrop-filter": ["", "none"] }],
       "backdrop-blur": [{ "backdrop-blur": [r] }],
       "backdrop-brightness": [{ "backdrop-brightness": [i] }],
@@ -6249,9 +6249,9 @@ var it = (t) => {
       "backdrop-grayscale": [{ "backdrop-grayscale": [b] }],
       "backdrop-hue-rotate": [{ "backdrop-hue-rotate": [y] }],
       "backdrop-invert": [{ "backdrop-invert": [w] }],
-      "backdrop-opacity": [{ "backdrop-opacity": [I] }],
+      "backdrop-opacity": [{ "backdrop-opacity": [A] }],
       "backdrop-saturate": [{ "backdrop-saturate": [J] }],
-      "backdrop-sepia": [{ "backdrop-sepia": [nt] }],
+      "backdrop-sepia": [{ "backdrop-sepia": [at] }],
       "border-collapse": [{ border: ["collapse", "separate"] }],
       "border-spacing": [{ "border-spacing": [n] }],
       "border-spacing-x": [{ "border-spacing-x": [n] }],
@@ -6360,24 +6360,24 @@ var it = (t) => {
         ""
       ] }],
       "scroll-behavior": [{ scroll: ["auto", "smooth"] }],
-      "scroll-m": [{ "scroll-m": L() }],
-      "scroll-mx": [{ "scroll-mx": L() }],
-      "scroll-my": [{ "scroll-my": L() }],
-      "scroll-ms": [{ "scroll-ms": L() }],
-      "scroll-me": [{ "scroll-me": L() }],
-      "scroll-mt": [{ "scroll-mt": L() }],
-      "scroll-mr": [{ "scroll-mr": L() }],
-      "scroll-mb": [{ "scroll-mb": L() }],
-      "scroll-ml": [{ "scroll-ml": L() }],
-      "scroll-p": [{ "scroll-p": L() }],
-      "scroll-px": [{ "scroll-px": L() }],
-      "scroll-py": [{ "scroll-py": L() }],
-      "scroll-ps": [{ "scroll-ps": L() }],
-      "scroll-pe": [{ "scroll-pe": L() }],
-      "scroll-pt": [{ "scroll-pt": L() }],
-      "scroll-pr": [{ "scroll-pr": L() }],
-      "scroll-pb": [{ "scroll-pb": L() }],
-      "scroll-pl": [{ "scroll-pl": L() }],
+      "scroll-m": [{ "scroll-m": N() }],
+      "scroll-mx": [{ "scroll-mx": N() }],
+      "scroll-my": [{ "scroll-my": N() }],
+      "scroll-ms": [{ "scroll-ms": N() }],
+      "scroll-me": [{ "scroll-me": N() }],
+      "scroll-mt": [{ "scroll-mt": N() }],
+      "scroll-mr": [{ "scroll-mr": N() }],
+      "scroll-mb": [{ "scroll-mb": N() }],
+      "scroll-ml": [{ "scroll-ml": N() }],
+      "scroll-p": [{ "scroll-p": N() }],
+      "scroll-px": [{ "scroll-px": N() }],
+      "scroll-py": [{ "scroll-py": N() }],
+      "scroll-ps": [{ "scroll-ps": N() }],
+      "scroll-pe": [{ "scroll-pe": N() }],
+      "scroll-pt": [{ "scroll-pt": N() }],
+      "scroll-pr": [{ "scroll-pr": N() }],
+      "scroll-pb": [{ "scroll-pb": N() }],
+      "scroll-pl": [{ "scroll-pl": N() }],
       "snap-align": [{ snap: [
         "start",
         "end",
@@ -7883,10 +7883,10 @@ var gl = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, ml = zc, ua
                     <tr class=${m("calendar-week", X.week)}>
                       ${o.slice(y * 7, (y + 1) * 7).map((w, E) => {
       var jt, G, Yt;
-      let C = new Date(this.currentDate.getFullYear(), w.month, Number(w.day)), S = C.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), k = this.mode === "range" && C.toDateString() === ((jt = this.selectedStartDate) == null ? void 0 : jt.toDateString()), T = this.mode === "range" && this.isDayInRange(C, !0), I = this.mode === "range" && C.toDateString() === ((G = this.selectedEndDate) == null ? void 0 : G.toDateString()), z = this.mode === "single" && C.toDateString() === ((Yt = this.selectedStartDate) == null ? void 0 : Yt.toDateString()), J = z || k || T || I, Y = E === 0, nt = E === 6, gt = S ? "Today, " : "";
+      let C = new Date(this.currentDate.getFullYear(), w.month, Number(w.day)), S = C.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), k = this.mode === "range" && C.toDateString() === ((jt = this.selectedStartDate) == null ? void 0 : jt.toDateString()), T = this.mode === "range" && this.isDayInRange(C, !0), A = this.mode === "range" && C.toDateString() === ((G = this.selectedEndDate) == null ? void 0 : G.toDateString()), z = this.mode === "single" && C.toDateString() === ((Yt = this.selectedStartDate) == null ? void 0 : Yt.toDateString()), J = z || k || T || A, Y = E === 0, at = E === 6, gt = S ? "Today, " : "";
       return gt += Vp(C), gt += J ? ", selected" : "", d`
                             <td
-                              class=${m("calendar-day", X.day.base, S && !J && X.day.today, J && X.day.selected.common, z && X.day.selected.single, k && X.day.selected.range.start, T && X.day.selected.range.middle, I && X.day.selected.range.end, Y && X.day.index.first, nt && X.day.index.last, !1)}
+                              class=${m("calendar-day", X.day.base, S && !J && X.day.today, J && X.day.selected.common, z && X.day.selected.single, k && X.day.selected.range.start, T && X.day.selected.range.middle, A && X.day.selected.range.end, Y && X.day.index.first, at && X.day.index.last, !1)}
                               role="gridcell"
                               data-day=${C.toISOString().slice(0, 10)}
                               ?data-disabled=${void 0}
@@ -7907,8 +7907,8 @@ var gl = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, ml = zc, ua
                                 data-selected-single=${z.toString()}
                                 data-range-start=${k.toString()}
                                 data-range-middle=${T.toString()}
-                                data-range-end=${I.toString()}
-                                tabindex=${z || I ? "0" : "-1"}
+                                data-range-end=${A.toString()}
+                                tabindex=${z || A ? "0" : "-1"}
                                 type="button"
                                 aria-label=${gt}
                                 @click="${() => this.selectDate(Number(w.day), w.isOutside)}"
@@ -16176,11 +16176,11 @@ function Vc(t = window.React, e, r, i, s) {
     }
     render() {
       let { _$Gl: S, ...k } = this.props;
-      this.h !== S && (this.u = (I) => {
-        S !== null && _u(S, I), this.o = I, this.h = S;
+      this.h !== S && (this.u = (A) => {
+        S !== null && _u(S, A), this.o = A, this.h = S;
       }), this.i = {};
       let T = { ref: this.u };
-      for (let [I, z] of Object.entries(k)) yu.has(I) ? T[I === "className" ? "class" : I] = z : y.has(I) || I in h.prototype ? this.i[I] = z : T[I] = z;
+      for (let [A, z] of Object.entries(k)) yu.has(A) ? T[A === "className" ? "class" : A] = z : y.has(A) || A in h.prototype ? this.i[A] = z : T[A] = z;
       return T.suppressHydrationWarning = !0, b(n, T);
     }
   }
@@ -16206,9 +16206,9 @@ var xu = /* @__PURE__ */ Lc(((t) => {
     },
     enqueueSetState: function() {
     }
-  }, T = Object.assign, I = {};
+  }, T = Object.assign, A = {};
   function z(f, $, q) {
-    this.props = f, this.context = $, this.refs = I, this.updater = q || k;
+    this.props = f, this.context = $, this.refs = A, this.updater = q || k;
   }
   z.prototype.isReactComponent = {}, z.prototype.setState = function(f, $) {
     if (typeof f != "object" && typeof f != "function" && f != null) throw Error("takes an object of state variables to update or a function which returns an object of state variables.");
@@ -16220,10 +16220,10 @@ var xu = /* @__PURE__ */ Lc(((t) => {
   }
   J.prototype = z.prototype;
   function Y(f, $, q) {
-    this.props = f, this.context = $, this.refs = I, this.updater = q || k;
+    this.props = f, this.context = $, this.refs = A, this.updater = q || k;
   }
-  var nt = Y.prototype = new J();
-  nt.constructor = Y, T(nt, z.prototype), nt.isPureReactComponent = !0;
+  var at = Y.prototype = new J();
+  at.constructor = Y, T(at, z.prototype), at.isPureReactComponent = !0;
   var gt = Array.isArray;
   function jt() {
   }
@@ -16246,7 +16246,7 @@ var xu = /* @__PURE__ */ Lc(((t) => {
   function Oe(f, $) {
     return de(f.type, $, f.props);
   }
-  function L(f) {
+  function N(f) {
     return typeof f == "object" && !!f && f.$$typeof === e;
   }
   function hr(f) {
@@ -16305,7 +16305,7 @@ var xu = /* @__PURE__ */ Lc(((t) => {
     }
     if (rt) return W = W(f), rt = B === "" ? "." + Ie(f, 0) : B, gt(W) ? (q = "", rt != null && (q = rt.replace(Qt, "$&/") + "/"), te(W, $, q, "", function(fh) {
       return fh;
-    })) : W != null && (L(W) && (W = Oe(W, q + (W.key == null || f && f.key === W.key ? "" : ("" + W.key).replace(Qt, "$&/") + "/") + rt)), $.push(W)), 1;
+    })) : W != null && (N(W) && (W = Oe(W, q + (W.key == null || f && f.key === W.key ? "" : ("" + W.key).replace(Qt, "$&/") + "/") + rt)), $.push(W)), 1;
     rt = 0;
     var _e = B === "" ? "." : B + ":";
     if (gt(f)) for (var Mt = 0; Mt < f.length; Mt++) B = f[Mt], Q = _e + Ie(B, Mt), rt += te(B, $, q, Q, W);
@@ -16368,7 +16368,7 @@ var xu = /* @__PURE__ */ Lc(((t) => {
       }) || [];
     },
     only: function(f) {
-      if (!L(f)) throw Error("React.Children.only expected to receive a single React element child.");
+      if (!N(f)) throw Error("React.Children.only expected to receive a single React element child.");
       return f;
     }
   };
@@ -16424,7 +16424,7 @@ var xu = /* @__PURE__ */ Lc(((t) => {
       $$typeof: p,
       render: f
     };
-  }, t.isValidElement = L, t.lazy = function(f) {
+  }, t.isValidElement = N, t.lazy = function(f) {
     return {
       $$typeof: w,
       _payload: {
@@ -16505,7 +16505,7 @@ Vc({
 });
 const $u = "sb-relative sb-overflow-hidden sb-w-1/3 sb-h-2 sb-linear-bar", Su = "sb-min-w-[375px] sb-max-w-[609px] sb-w-[calc(100%-30px)] sm:sb-max-w-[735px] md:sb-w-[calc(100%-32px)] md:sb-max-w-[800px] lg:sb-min-w-[800px]", Cu = "sb-h-[100%] sb-min-w-[375px] sb-max-w-[609px] sb-w-[calc(100vw-30px)] sm:sb-max-w-[735px] md:sb-w-[calc(100vw-32px)] md:sb-max-w-[800px] lg:sb-min-w-[800px]", Eu = "sb-fixed sb-inset-0 sb-z-[9999] sb-flex sb-items-center sb-justify-center sb-p-4 sb-overflow-auto", ku = "sb-w-fit sb-flex sb-max-h-[calc(100vh-60px)] sb-bg-background sb-shadow-2xl sb-ring-1 sb-ring-border sb-rounded-xl sb-overflow-hidden", Ru = "sb-justify-self-center sb-rotate-0", Ou = "sb-border-0 sb-bg-background !sb-m-0", Iu = "sb-border sb-rounded-2xl sb-relative sb-py-6", Au = "!sb-text-left sb-text-foreground sb-font-normal hover:!sb-bg-muted !sb-text-sm sb-rounded-md !sb-shadow-none data-[state=active]:!sb-bg-muted", Tu = "!sb-flex !sb-justify-start !sb-flex-nowrap !sb-w-full !rtg-grid-cols-2 !sb-gap-2 sb-mx-6", Lu = "!sb-w-[160px] sb-gap-4 ";
 var F = /* @__PURE__ */ ((t) => (t.USER_PROFILE_CARD_HEADER_CONTAINER = "sb-user-profile-card-header-container", t.USER_PROFILE_CONTAINER = "sb-user-profile", t.USER_PROFILE_SIDEBAR = "sb-user-profile-sidebar-tabs", t.USER_PROFILE_SIDEBAR_TABS = "sb-user-profile-sidebar-tabs", t.USER_PROFILE_SIDEBAR_BURGER_MENU = "sb-user-profile-sidebar-burger-menu", t.USER_PROFILE_INPUT_LABEL = "sb-user-profile-input-label", t.USER_PROFILE_INPUT_FIELD = "sb-user-profile-input-field", t.USER_PROFILE_EDIT_FORM = "sb-user-profile-edit-form", t.USER_PROFILE_CARD_CONTAINER = "sb-user-profile-card-container", t.USER_PROFILE_EDITABLE_INPUT_FIELD = "sb-user-profile-editable-input-field", t.USER_PROFILE_DEFAULT_BUTTON = "sb-user-profile-default-button", t.USER_PROFILE_OUTLINE_BUTTON = "sb-user-profile-outline-button", t.USER_PROFILE_OTP = "sb-user-profile-otp", t.USER_PROFILE_EDIT_BUTTON = "sb-user-profile-edit-button", t))(F || {});
-const kt = {
+const Ot = {
   xs: "475px",
   // Tailwind's unofficial 'xs' breakpoint
   sm: "640px",
@@ -16736,18 +16736,18 @@ const fa = "-", Du = (t) => {
     const p = [];
     let b = 0, y = 0, w;
     for (let T = 0; T < h.length; T++) {
-      let I = h[T];
+      let A = h[T];
       if (b === 0) {
-        if (I === s && (i || h.slice(T, T + o) === e)) {
+        if (A === s && (i || h.slice(T, T + o) === e)) {
           p.push(h.slice(y, T)), y = T + o;
           continue;
         }
-        if (I === "/") {
+        if (A === "/") {
           w = T;
           continue;
         }
       }
-      I === "[" ? b++ : I === "]" && b--;
+      A === "[" ? b++ : A === "]" && b--;
     }
     const E = p.length === 0 ? h : h.substring(y), C = E.startsWith(sh), S = C ? E.substring(1) : E, k = w && w > y ? w - y : void 0;
     return {
@@ -16799,14 +16799,14 @@ const fa = "-", Du = (t) => {
       }
       S = !1;
     }
-    const T = Hu(y).join(":"), I = w ? T + sh : T, z = I + k;
+    const T = Hu(y).join(":"), A = w ? T + sh : T, z = A + k;
     if (o.includes(z))
       continue;
     o.push(z);
     const J = s(k, S);
     for (let Y = 0; Y < J.length; ++Y) {
-      const nt = J[Y];
-      o.push(I + nt);
+      const at = J[Y];
+      o.push(A + at);
     }
     h = b + (h.length > 0 ? " " + h : h);
   }
@@ -16855,7 +16855,7 @@ const st = (t) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   tg.test(t) && !eg.test(t)
 ), ah = () => !1, pg = (t) => rg.test(t), ug = (t) => ig.test(t), gg = () => {
-  const t = st("colors"), e = st("spacing"), r = st("blur"), i = st("brightness"), s = st("borderColor"), o = st("borderRadius"), n = st("borderSpacing"), h = st("borderWidth"), p = st("contrast"), b = st("grayscale"), y = st("hueRotate"), w = st("invert"), E = st("gap"), C = st("gradientColorStops"), S = st("gradientColorStopPositions"), k = st("inset"), T = st("margin"), I = st("opacity"), z = st("padding"), J = st("saturate"), Y = st("scale"), nt = st("sepia"), gt = st("skew"), jt = st("space"), G = st("translate"), Yt = () => ["auto", "contain", "none"], de = () => ["auto", "hidden", "clip", "visible", "scroll"], Oe = () => ["auto", H, e], L = () => [H, e], hr = () => ["", Pe, Ke], Qt = () => ["auto", gi, H], Ie = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], ce = () => ["solid", "dashed", "dotted", "double", "none"], te = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], ee = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], Xt = () => ["", "0", H], Ue = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], mt = () => [gi, H];
+  const t = st("colors"), e = st("spacing"), r = st("blur"), i = st("brightness"), s = st("borderColor"), o = st("borderRadius"), n = st("borderSpacing"), h = st("borderWidth"), p = st("contrast"), b = st("grayscale"), y = st("hueRotate"), w = st("invert"), E = st("gap"), C = st("gradientColorStops"), S = st("gradientColorStopPositions"), k = st("inset"), T = st("margin"), A = st("opacity"), z = st("padding"), J = st("saturate"), Y = st("scale"), at = st("sepia"), gt = st("skew"), jt = st("space"), G = st("translate"), Yt = () => ["auto", "contain", "none"], de = () => ["auto", "hidden", "clip", "visible", "scroll"], Oe = () => ["auto", H, e], N = () => [H, e], hr = () => ["", Pe, Ke], Qt = () => ["auto", gi, H], Ie = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], ce = () => ["solid", "dashed", "dotted", "double", "none"], te = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], ee = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], Xt = () => ["", "0", H], Ue = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], mt = () => [gi, H];
   return {
     cacheSize: 500,
     separator: ":",
@@ -16866,25 +16866,25 @@ const st = (t) => {
       brightness: mt(),
       borderColor: [t],
       borderRadius: ["none", "", "full", We, H],
-      borderSpacing: L(),
+      borderSpacing: N(),
       borderWidth: hr(),
       contrast: mt(),
       grayscale: Xt(),
       hueRotate: mt(),
       invert: Xt(),
-      gap: L(),
+      gap: N(),
       gradientColorStops: [t],
       gradientColorStopPositions: [sg, Ke],
       inset: Oe(),
       margin: Oe(),
       opacity: mt(),
-      padding: L(),
+      padding: N(),
       saturate: mt(),
       scale: mt(),
       sepia: Xt(),
       skew: mt(),
-      space: L(),
-      translate: L()
+      space: N(),
+      translate: N()
     },
     classGroups: {
       // Layout
@@ -17637,7 +17637,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/placeholder-opacity
        */
       "placeholder-opacity": [{
-        "placeholder-opacity": [I]
+        "placeholder-opacity": [A]
       }],
       /**
        * Text Alignment
@@ -17658,7 +17658,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/text-opacity
        */
       "text-opacity": [{
-        "text-opacity": [I]
+        "text-opacity": [A]
       }],
       /**
        * Text Decoration
@@ -17715,7 +17715,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/text-indent
        */
       indent: [{
-        indent: L()
+        indent: N()
       }],
       /**
        * Vertical Alignment
@@ -17773,7 +17773,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/background-opacity
        */
       "bg-opacity": [{
-        "bg-opacity": [I]
+        "bg-opacity": [A]
       }],
       /**
        * Background Origin
@@ -18037,7 +18037,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/border-opacity
        */
       "border-opacity": [{
-        "border-opacity": [I]
+        "border-opacity": [A]
       }],
       /**
        * Border Style
@@ -18075,7 +18075,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/divide-opacity
        */
       "divide-opacity": [{
-        "divide-opacity": [I]
+        "divide-opacity": [A]
       }],
       /**
        * Divide Style
@@ -18206,7 +18206,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/ring-opacity
        */
       "ring-opacity": [{
-        "ring-opacity": [I]
+        "ring-opacity": [A]
       }],
       /**
        * Ring Offset Width
@@ -18242,7 +18242,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/opacity
        */
       opacity: [{
-        opacity: [I]
+        opacity: [A]
       }],
       /**
        * Mix Blend Mode
@@ -18328,7 +18328,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/sepia
        */
       sepia: [{
-        sepia: [nt]
+        sepia: [at]
       }],
       /**
        * Backdrop Filter
@@ -18385,7 +18385,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/backdrop-opacity
        */
       "backdrop-opacity": [{
-        "backdrop-opacity": [I]
+        "backdrop-opacity": [A]
       }],
       /**
        * Backdrop Saturate
@@ -18399,7 +18399,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/backdrop-sepia
        */
       "backdrop-sepia": [{
-        "backdrop-sepia": [nt]
+        "backdrop-sepia": [at]
       }],
       // Tables
       /**
@@ -18606,126 +18606,126 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-m": [{
-        "scroll-m": L()
+        "scroll-m": N()
       }],
       /**
        * Scroll Margin X
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mx": [{
-        "scroll-mx": L()
+        "scroll-mx": N()
       }],
       /**
        * Scroll Margin Y
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-my": [{
-        "scroll-my": L()
+        "scroll-my": N()
       }],
       /**
        * Scroll Margin Start
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-ms": [{
-        "scroll-ms": L()
+        "scroll-ms": N()
       }],
       /**
        * Scroll Margin End
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-me": [{
-        "scroll-me": L()
+        "scroll-me": N()
       }],
       /**
        * Scroll Margin Top
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mt": [{
-        "scroll-mt": L()
+        "scroll-mt": N()
       }],
       /**
        * Scroll Margin Right
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mr": [{
-        "scroll-mr": L()
+        "scroll-mr": N()
       }],
       /**
        * Scroll Margin Bottom
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mb": [{
-        "scroll-mb": L()
+        "scroll-mb": N()
       }],
       /**
        * Scroll Margin Left
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-ml": [{
-        "scroll-ml": L()
+        "scroll-ml": N()
       }],
       /**
        * Scroll Padding
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-p": [{
-        "scroll-p": L()
+        "scroll-p": N()
       }],
       /**
        * Scroll Padding X
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-px": [{
-        "scroll-px": L()
+        "scroll-px": N()
       }],
       /**
        * Scroll Padding Y
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-py": [{
-        "scroll-py": L()
+        "scroll-py": N()
       }],
       /**
        * Scroll Padding Start
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-ps": [{
-        "scroll-ps": L()
+        "scroll-ps": N()
       }],
       /**
        * Scroll Padding End
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pe": [{
-        "scroll-pe": L()
+        "scroll-pe": N()
       }],
       /**
        * Scroll Padding Top
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pt": [{
-        "scroll-pt": L()
+        "scroll-pt": N()
       }],
       /**
        * Scroll Padding Right
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pr": [{
-        "scroll-pr": L()
+        "scroll-pr": N()
       }],
       /**
        * Scroll Padding Bottom
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pb": [{
-        "scroll-pb": L()
+        "scroll-pb": N()
       }],
       /**
        * Scroll Padding Left
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pl": [{
-        "scroll-pl": L()
+        "scroll-pl": N()
       }],
       /**
        * Scroll Snap Align
@@ -18907,12 +18907,12 @@ function Dt(t) {
   const e = {}, r = {};
   for (const i in t) {
     const s = t[i];
-    s != null && (i in kt && typeof s == "object" ? r[i] = s : e[i] = s);
+    s != null && (i in Ot && typeof s == "object" ? r[i] = s : e[i] = s);
   }
   return { base: e, responsive: r };
 }
 function vg(t) {
-  return { ...kt, ...t ?? {} };
+  return { ...Ot, ...t ?? {} };
 }
 function Ut(t, e, r) {
   const i = vg(r);
@@ -19042,7 +19042,7 @@ let ro = class extends v {
     return Ut(
       this.element.id,
       i,
-      ((o = (s = this.component.customizations) == null ? void 0 : s.config) == null ? void 0 : o.breakpoints) ?? kt
+      ((o = (s = this.component.customizations) == null ? void 0 : s.config) == null ? void 0 : o.breakpoints) ?? Ot
     ), d`
       <p id=${this.element.id} class=${t} style=${R(r)}>
         ${this.element.properties.content}
@@ -19159,7 +19159,7 @@ let Zi = class extends v {
     return Ut(
       this.element.id,
       w,
-      ((C = (E = this.component.customizations) == null ? void 0 : E.config) == null ? void 0 : C.breakpoints) ?? kt
+      ((C = (E = this.component.customizations) == null ? void 0 : E.config) == null ? void 0 : C.breakpoints) ?? Ot
     ), d`
       <rtg-button
         variant=${t}
@@ -19239,7 +19239,7 @@ let so = class extends v {
     return Ut(
       this.element.id,
       i,
-      ((h = (n = this.component.customizations) == null ? void 0 : n.config) == null ? void 0 : h.breakpoints) ?? kt
+      ((h = (n = this.component.customizations) == null ? void 0 : n.config) == null ? void 0 : h.breakpoints) ?? Ot
     ), io`
       <rtg-field-separator
         id=${this.element.id}
@@ -19358,7 +19358,7 @@ let oo = class extends v {
     return Ut(
       this.element.id,
       i,
-      ((o = (s = this.component.customizations) == null ? void 0 : s.config) == null ? void 0 : o.breakpoints) ?? kt
+      ((o = (s = this.component.customizations) == null ? void 0 : s.config) == null ? void 0 : o.breakpoints) ?? Ot
     ), d`
       <rtg-field
         orientation="horizontal"
@@ -19619,7 +19619,7 @@ let ao = class extends v {
     Ut(
       this.element.id,
       i,
-      ((b = (p = this.component.customizations) == null ? void 0 : p.config) == null ? void 0 : b.breakpoints) ?? kt
+      ((b = (p = this.component.customizations) == null ? void 0 : p.config) == null ? void 0 : b.breakpoints) ?? Ot
     );
     const s = this.element.properties.variant || "digits_only";
     return io`
@@ -19690,7 +19690,7 @@ let lo = class extends v {
     return Ut(
       this.element.id,
       i,
-      ((p = (h = this.component.customizations) == null ? void 0 : h.config) == null ? void 0 : p.breakpoints) ?? kt
+      ((p = (h = this.component.customizations) == null ? void 0 : h.config) == null ? void 0 : p.breakpoints) ?? Ot
     ), d`
       <rtg-alert
         variant=${this.element.properties.variant ?? "destructive"}
@@ -19751,7 +19751,7 @@ let co = class extends v {
     return Ut(
       this.element.id,
       i,
-      ((o = (s = this.component.customizations) == null ? void 0 : s.config) == null ? void 0 : o.breakpoints) ?? kt
+      ((o = (s = this.component.customizations) == null ? void 0 : s.config) == null ? void 0 : o.breakpoints) ?? Ot
     ), d`
       <div id=${this.element.id} class=${t} style=${R(r)}>
         ${ca(xg(this.element.properties.content))}
@@ -19797,7 +19797,7 @@ let ho = class extends v {
     return Ut(
       this.element.id,
       o,
-      ((h = (n = this.component.customizations) == null ? void 0 : n.config) == null ? void 0 : h.breakpoints) ?? kt
+      ((h = (n = this.component.customizations) == null ? void 0 : n.config) == null ? void 0 : h.breakpoints) ?? Ot
     ), d`
       <div
         id=${this.element.id}
@@ -19868,7 +19868,7 @@ let Ji = class extends v {
     return Ut(
       this.element.id,
       i,
-      ((p = (h = this.component.customizations) == null ? void 0 : h.config) == null ? void 0 : p.breakpoints) ?? kt
+      ((p = (h = this.component.customizations) == null ? void 0 : h.config) == null ? void 0 : p.breakpoints) ?? Ot
     ), d`
       <div id=${this.element.id} class=${t} style=${R(r)}>
         <span>${this.renderContent()}</span>
@@ -19910,7 +19910,7 @@ let po = class extends v {
     return Ut(
       this.element.id,
       i,
-      ((p = (h = this.component.customizations) == null ? void 0 : h.config) == null ? void 0 : p.breakpoints) ?? kt
+      ((p = (h = this.component.customizations) == null ? void 0 : h.config) == null ? void 0 : p.breakpoints) ?? Ot
     ), d`
       <sb-spinner
         size="20"
@@ -20088,7 +20088,7 @@ let uo = class extends v {
     return Ut(
       this.element.id,
       i,
-      ((h = (n = this.component.customizations) == null ? void 0 : n.config) == null ? void 0 : h.breakpoints) ?? kt
+      ((h = (n = this.component.customizations) == null ? void 0 : n.config) == null ? void 0 : h.breakpoints) ?? Ot
     ), d`
       <div id=${this.element.id} class=${t} style=${R(r)}>
         ${this.renderChildren()}
@@ -20148,7 +20148,7 @@ let Qi = class extends v {
     return Ut(
       this.element.id,
       s,
-      ((n = (o = this.component.customizations) == null ? void 0 : o.config) == null ? void 0 : n.breakpoints) ?? kt
+      ((n = (o = this.component.customizations) == null ? void 0 : o.config) == null ? void 0 : n.breakpoints) ?? Ot
     ), d`
       <img class=${t} src=${r} style=${R(i)} />
     `;
@@ -20260,7 +20260,7 @@ let ts = class extends v {
     Ut(
       this.element.id,
       i,
-      ((b = (p = this.component.customizations) == null ? void 0 : p.config) == null ? void 0 : b.breakpoints) ?? kt
+      ((b = (p = this.component.customizations) == null ? void 0 : p.config) == null ? void 0 : b.breakpoints) ?? Ot
     );
     const s = va(
       this.element.properties.image_url,
@@ -20407,7 +20407,7 @@ let mo = class extends v {
     Ut(
       this.element.id,
       i,
-      ((w = (y = this.component.customizations) == null ? void 0 : y.config) == null ? void 0 : w.breakpoints) ?? kt
+      ((w = (y = this.component.customizations) == null ? void 0 : y.config) == null ? void 0 : w.breakpoints) ?? Ot
     );
     const { class: s, style: o } = O(
       "",
@@ -20477,7 +20477,7 @@ let bo = class extends v {
     return Ut(
       this.element.id,
       i,
-      ((p = (h = this.component.customizations) == null ? void 0 : h.config) == null ? void 0 : p.breakpoints) ?? kt
+      ((p = (h = this.component.customizations) == null ? void 0 : h.config) == null ? void 0 : p.breakpoints) ?? Ot
     ), d`
       <rtg-label
         for=${this.element.properties.for ?? g}
@@ -20627,7 +20627,7 @@ var bm = Object.defineProperty, fm = Object.getOwnPropertyDescriptor, Si = (t, e
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && bm(e, r, s), s;
 };
-let $t = class extends v {
+let St = class extends v {
   constructor() {
     super(...arguments), this.seed = Nt(), this.variant = "default", this.content = { description: "Something went wrong." };
   }
@@ -20649,28 +20649,28 @@ let $t = class extends v {
    * derived from the component's part name and `seed`.
    */
   get rootId() {
-    return this.childId ?? `sb-${$t.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${St.parts.root}-${this.seed}`;
   }
   /**
    * The `id` of the spinner element, derived from `rootId` with the icon part
    * name appended.
    */
   get iconId() {
-    return `${this.rootId}-${$t._ICON}`;
+    return `${this.rootId}-${St._ICON}`;
   }
   /**
    * The `id` of the spinner element, derived from `rootId` with the title part
    * name appended.
    */
   get titleId() {
-    return `${this.rootId}-${$t._TITLE}`;
+    return `${this.rootId}-${St._TITLE}`;
   }
   /**
    * The `id` of the spinner element, derived from `rootId` with the description
    * part name appended.
    */
   get descriptionId() {
-    return `${this.rootId}-${$t._DESCRIPTION}`;
+    return `${this.rootId}-${St._DESCRIPTION}`;
   }
   /**
    * Uses the `variant` prop to derive the `variant` prop passed to `rtg-alert`.
@@ -20686,14 +20686,14 @@ let $t = class extends v {
     return d`
       <rtg-alert
         id="${this.rootId}"
-        part="${$t.parts.root}"
+        part="${St.parts.root}"
         variant="${this._variant}"
       >
-        ${t ? t(this.iconId, $t.parts.icon) : g}
+        ${t ? t(this.iconId, St.parts.icon) : g}
         ${e ? d`
               <rtg-alert-title
                 id="${this.titleId}"
-                part="${$t.parts.title}"
+                part="${St.parts.title}"
               >
                 ${e}
               </rtg-alert-title>
@@ -20701,7 +20701,7 @@ let $t = class extends v {
         ${r ? d`
               <rtg-alert-description
                 id="${this.descriptionId}"
-                part="${$t.parts.description}"
+                part="${St.parts.description}"
               >
                 ${r}
               </rtg-alert-description>
@@ -20710,47 +20710,47 @@ let $t = class extends v {
     `;
   }
 };
-$t._ROOT = "error";
-$t._ICON = "icon";
-$t._TITLE = "title";
-$t._DESCRIPTION = "description";
+St._ROOT = "error";
+St._ICON = "icon";
+St._TITLE = "title";
+St._DESCRIPTION = "description";
 Si([
   a({ type: String })
-], $t.prototype, "seed", 2);
+], St.prototype, "seed", 2);
 Si([
   a({ attribute: "child-id", type: String })
-], $t.prototype, "childId", 2);
+], St.prototype, "childId", 2);
 Si([
   a({ type: String })
-], $t.prototype, "variant", 2);
+], St.prototype, "variant", 2);
 Si([
   a({ type: Object })
-], $t.prototype, "content", 2);
+], St.prototype, "content", 2);
 Si([
   a({ type: String })
-], $t.prototype, "icon", 2);
-$t = Si([
+], St.prototype, "icon", 2);
+St = Si([
   u("sb-error")
-], $t);
-var vm = Object.defineProperty, ym = Object.getOwnPropertyDescriptor, lt = (t, e, r, i) => {
+], St);
+var vm = Object.defineProperty, ym = Object.getOwnPropertyDescriptor, nt = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? ym(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && vm(e, r, s), s;
 };
-let A = class extends v {
+let I = class extends v {
   constructor() {
-    super(...arguments), this.seed = Nt(), this.name = "password", this.variant = "simple", this.content = "split", this.label = "Password", this.rules = [
+    super(...arguments), this.seed = Nt(), this.name = "password", this.variant = "toggle", this.content = "split", this.label = "Password", this.rules = [
       { name: "uppercase", error: "Must contain an uppercase letter." },
       { name: "lowercase", error: "Must contain a lowercase letter." },
       { name: "number", error: "Must contain a number." },
       { name: "special", error: "Must contain a special character." }
-    ], this.requiredError = "Password is a required field.", this.formatError = "Enter a valid password.", this._invalid = !1, this._errors = [], this._value = "", this._form = null, this._handleInput = (t) => {
+    ], this.validation = "default", this.requiredError = "Password is a required field.", this.formatError = "Enter a valid password.", this._invalid = !1, this._errors = [], this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
-      e.matches(`[part="${A.parts.input}"] input`) && (this._value = e.value);
+      e.matches(`[part="${I.parts.input}"] input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
       this._validate() || t.preventDefault();
     }, this._handleFormReset = () => {
-      const t = `[part="${A.parts.input}"]`, e = this.variant === "toggle" ? `rtg-password-input${t}` : `rtg-input${t}`, r = this.querySelector(e);
+      const t = `[part="${I.parts.input}"]`, e = this.variant === "toggle" ? `rtg-password-input${t}` : `rtg-input${t}`, r = this.querySelector(e);
       r && (r.value = ""), this._value = "", this._invalid = !1, this._errors = [];
     };
   }
@@ -20778,49 +20778,49 @@ let A = class extends v {
    * derived from the component's part name and `seed`.
    */
   get rootId() {
-    return this.childId ?? `sb-${A.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${I.parts.root}-${this.seed}`;
   }
   /**
    * The `id` of the field content element, derived from `rootId` with the
    * content part name appended.
    */
   get contentId() {
-    return `${this.rootId}-${A._CONTENT}`;
+    return `${this.rootId}-${I._CONTENT}`;
   }
   /**
    * The `id` of the field label element, derived from `rootId` with the label
    * part name appended.
    */
   get labelId() {
-    return `${this.rootId}-${A._LABEL}`;
+    return `${this.rootId}-${I._LABEL}`;
   }
   /**
    * The `id` of the field description element, derived from `rootId` with the
    * description part name appended.
    */
   get descriptionId() {
-    return `${this.rootId}-${A._DESCRIPTION}`;
+    return `${this.rootId}-${I._DESCRIPTION}`;
   }
   /**
    * The `id` of the mark element, derived from `rootId` with the mark part name
    * appended.
    */
   get markId() {
-    return `${this.rootId}-${A._MARK}`;
+    return `${this.rootId}-${I._MARK}`;
   }
   /**
    * The `id` of the input element, equal to `fieldId` when provided, otherwise
    * derived from `rootId` with the input part name appended.
    */
   get inputId() {
-    return this.fieldId ?? `${this.rootId}-${A._INPUT}`;
+    return this.fieldId ?? `${this.rootId}-${I._INPUT}`;
   }
   /**
    * The `id` of the field error element, derived from `rootId` with the error
    * part name appended.
    */
   get errorId() {
-    return `${this.rootId}-${A._ERROR}`;
+    return `${this.rootId}-${I._ERROR}`;
   }
   /**
    * Returns sanitized `minlength` and `maxlength` values, filtering out
@@ -20859,7 +20859,7 @@ let A = class extends v {
    * Defines and dispatches the validate event.
    */
   _dispatchValidate(t, e, r, i) {
-    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(A.validateEventName, {
+    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(I.validateEventName, {
       detail: { id: s, parentId: o, name: n, value: r, valid: t, type: e, message: i },
       bubbles: !0,
       composed: !0
@@ -20867,66 +20867,50 @@ let A = class extends v {
     this.dispatchEvent(h);
   }
   /**
-   * Handles the required condition validation, accepting empty non-required
-   * fields and non-empty required fields, otherwise dispatching and displaying
-   * the required error.
+   * Clears the invalid state and error, and dispatches a valid validate event.
    */
-  _validateRequired(t) {
-    if (!this.required || t) return !0;
-    const e = this.requiredError;
-    return this._invalid = !0, this._errors = [e], this._dispatchValidate(!1, "required", t, e), !1;
-  }
-  /**
-   * Handles the minlength condition validation, determining if a valid
-   * `minlength` prop was provided, dispatching and displaying the minlength
-   * error if the value is shorter than accepted.
-   */
-  _validateMinlength(t) {
-    const { minlength: e } = this._lengths;
-    if (!e || t.length >= e) return !0;
-    const r = this.minlengthError ?? `Password must be at least ${e} characters.`;
-    return this._invalid = !0, this._errors = [r], this._dispatchValidate(!1, "minlength", t, r), !1;
-  }
-  /**
-   * Handles the maxlength condition validation, determining if a valid
-   * `maxlength` prop was provided, dispatching and displaying the maxlength
-   * error if the value is longer than accepted.
-   */
-  _validateMaxlength(t) {
-    const { maxlength: e } = this._lengths;
-    if (!e || t.length <= e) return !0;
-    const r = this.maxlengthError ?? `Password must be at most ${e} characters.`;
-    return this._invalid = !0, this._errors = [r], this._dispatchValidate(!1, "maxlength", t, r), !1;
+  _handleValidateSuccess(t, e = "Valid password.") {
+    this._invalid = !1, this._errors = [], this._dispatchValidate(!0, "success", t, e);
   }
   /**
-   * Handles the format condition validation, testing against each of the
-   * `rules` patterns, and dispatching and displaying the relevant or fallback
-   * format error(s) for an invalid value.
+   * Sets the invalid state and error, and dispatches an invalid validate event.
    */
-  _validateFormat(t) {
-    let e = !0;
-    const r = [];
-    for (const s of this.rules)
-      (s.name ? A._PATTERNS[s.name] : new RegExp(s.pattern)).test(t) || (e = !1, s.error && r.push(s.error));
-    if (e) return !0;
-    const i = r.length ? r.join(" ") : this.formatError;
-    return this._invalid = !0, this._errors = r.length ? r : [this.formatError], this._dispatchValidate(!1, "format", t, i), !1;
+  _handleValidateError(t, e, r = "Invalid password.", i = []) {
+    i.length || i.push(r), this._invalid = !0, this._errors = i, this._dispatchValidate(!1, t, e, i.join(" "));
   }
   /**
-   * Resets the `_invalid` and `_errors` private props and dispatches the
-   * validate event, indicating a successfully validated and valid password.
-   */
-  _doValidateSuccess(t, e) {
-    this._invalid = !1, this._errors = [], this._dispatchValidate(!0, "success", t, e);
-  }
-  /**
-   * Handles validation and dispatches the success event if the required,
-   * length, and format conditions are met.
+   * Validates the current value against the applicable rules in sequence,
+   * dispatches the validate event, and returns `true` if the value passes.
    */
   _validate() {
     const t = this._value;
-    let e = this._validateRequired(t);
-    return e ? t ? (e = this._validateMinlength(t), !e || (e = this._validateMaxlength(t), !e) || (e = this._validateFormat(t), !e) ? !1 : (this._doValidateSuccess(t, "Valid password."), !0)) : (this._doValidateSuccess(t, "Valid password (optional and empty)."), !0) : !1;
+    if (this.required && !t)
+      return this._handleValidateError("required", t, this.requiredError), !1;
+    if (!t || this.validation === "simple")
+      return this._handleValidateSuccess(t), !0;
+    const { minlength: e, maxlength: r } = this._lengths;
+    if (e && t.length < e)
+      return this._handleValidateError(
+        "minlength",
+        t,
+        this.minlengthError ?? `Password must be at least ${e} characters.`
+      ), !1;
+    if (r && t.length > r)
+      return this._handleValidateError(
+        "maxlength",
+        t,
+        this.maxlengthError ?? `Password must be at most ${r} characters.`
+      ), !1;
+    let i = !0;
+    const s = [];
+    for (const o of this.rules)
+      (o.name ? I._PATTERNS[o.name] : new RegExp(o.pattern)).test(t) || (i = !1, o.error && s.push(o.error));
+    return i ? (this._handleValidateSuccess(t), !0) : (this._handleValidateError(
+      "format",
+      t,
+      s.length ? void 0 : this.formatError,
+      s
+    ), !1);
   }
   /**
    * Conditionally returns the mark template for the field label. When `caret`
@@ -20939,7 +20923,7 @@ let A = class extends v {
     return !this.mark && (!this.caret || !this.required) ? g : d`
       <span
         id="${this.markId}"
-        part="${A.parts.mark}"
+        part="${I.parts.mark}"
         data-content="${this.mark ? "text" : "caret"}"
       >
         ${this.mark ? this.mark : d`&ast;`}
@@ -20953,7 +20937,7 @@ let A = class extends v {
     return d`
       <rtg-field-label
         id="${this.labelId}"
-        part="${A.parts.label}"
+        part="${I.parts.label}"
         for="${this.inputId}"
       >
         ${this.label} ${this._renderMark()}
@@ -20967,7 +20951,7 @@ let A = class extends v {
     return this.description ? d`
       <rtg-field-description
         id="${this.descriptionId}"
-        part="${A.parts.description}"
+        part="${I.parts.description}"
       >
         ${this.description}
       </rtg-field-description>
@@ -20983,7 +20967,7 @@ let A = class extends v {
     return d`
       <rtg-field-error
         id="${this.errorId}"
-        part="${A.parts.error}"
+        part="${I.parts.error}"
         .errors=${t}
       ></rtg-field-error>
     `;
@@ -20993,7 +20977,7 @@ let A = class extends v {
     return d`
       <rtg-field
         id="${this.rootId}"
-        part="${A.parts.root}"
+        part="${I.parts.root}"
         data-variant="${this.variant}"
         data-content="${this.content}"
         ?disabled="${this.disabled}"
@@ -21002,7 +20986,7 @@ let A = class extends v {
         ${this.content === "group" ? d`
               <rtg-field-content
                 id="${this.contentId}"
-                part="${A.parts.content}"
+                part="${I.parts.content}"
               >
                 ${this._renderLabel()} ${this._renderDescription()}
               </rtg-field-content>
@@ -21010,7 +20994,7 @@ let A = class extends v {
         ${this.variant === "toggle" ? d`
               <rtg-password-input
                 id="${this.inputId}"
-                part="${A.parts.input}"
+                part="${I.parts.input}"
                 name="${this.name}"
                 placeholder="${this.placeholder ?? g}"
                 minlength="${t ?? g}"
@@ -21022,7 +21006,7 @@ let A = class extends v {
             ` : d`
               <rtg-input
                 id="${this.inputId}"
-                part="${A.parts.input}"
+                part="${I.parts.input}"
                 type="password"
                 name="${this.name}"
                 placeholder="${this.placeholder ?? g}"
@@ -21039,92 +21023,95 @@ let A = class extends v {
     `;
   }
 };
-A._ROOT = "password-field";
-A._CONTENT = "content";
-A._LABEL = "label";
-A._MARK = "mark";
-A._DESCRIPTION = "description";
-A._INPUT = "input";
-A._ERROR = "error";
-A.TAG = `sb-${A._ROOT}`;
-A._PATTERNS = {
+I._ROOT = "password-field";
+I._CONTENT = "content";
+I._LABEL = "label";
+I._MARK = "mark";
+I._DESCRIPTION = "description";
+I._INPUT = "input";
+I._ERROR = "error";
+I.TAG = `sb-${I._ROOT}`;
+I._PATTERNS = {
   uppercase: /[A-Z]/,
   lowercase: /[a-z]/,
   number: /[0-9]/,
   special: /[!@#$%^&*()_=+{}[\]|\\;:"<>,./?-]/
 };
-lt([
+nt([
   a({ type: String })
-], A.prototype, "seed", 2);
-lt([
+], I.prototype, "seed", 2);
+nt([
   a({ attribute: "child-id", type: String })
-], A.prototype, "childId", 2);
-lt([
+], I.prototype, "childId", 2);
+nt([
   a({ attribute: "field-id", type: String })
-], A.prototype, "fieldId", 2);
-lt([
+], I.prototype, "fieldId", 2);
+nt([
   a({ type: String })
-], A.prototype, "name", 2);
-lt([
+], I.prototype, "name", 2);
+nt([
   a({ type: String })
-], A.prototype, "variant", 2);
-lt([
+], I.prototype, "variant", 2);
+nt([
   a({ type: String })
-], A.prototype, "content", 2);
-lt([
+], I.prototype, "content", 2);
+nt([
   a({ type: String })
-], A.prototype, "label", 2);
-lt([
+], I.prototype, "label", 2);
+nt([
   a({ type: String })
-], A.prototype, "placeholder", 2);
-lt([
+], I.prototype, "placeholder", 2);
+nt([
   a({ type: String })
-], A.prototype, "description", 2);
-lt([
+], I.prototype, "description", 2);
+nt([
   a({ type: String })
-], A.prototype, "mark", 2);
-lt([
+], I.prototype, "mark", 2);
+nt([
   a({ type: Boolean })
-], A.prototype, "caret", 2);
-lt([
+], I.prototype, "caret", 2);
+nt([
   a({ type: Boolean })
-], A.prototype, "disabled", 2);
-lt([
+], I.prototype, "disabled", 2);
+nt([
   a({ type: Boolean })
-], A.prototype, "required", 2);
-lt([
+], I.prototype, "required", 2);
+nt([
   a({ type: Number })
-], A.prototype, "minlength", 2);
-lt([
+], I.prototype, "minlength", 2);
+nt([
   a({ type: Number })
-], A.prototype, "maxlength", 2);
-lt([
+], I.prototype, "maxlength", 2);
+nt([
   a({ type: Array })
-], A.prototype, "rules", 2);
-lt([
+], I.prototype, "rules", 2);
+nt([
+  a({ type: String })
+], I.prototype, "validation", 2);
+nt([
   a({ attribute: "required-error", type: String })
-], A.prototype, "requiredError", 2);
-lt([
+], I.prototype, "requiredError", 2);
+nt([
   a({ attribute: "minlength-error", type: String })
-], A.prototype, "minlengthError", 2);
-lt([
+], I.prototype, "minlengthError", 2);
+nt([
   a({ attribute: "maxlength-error", type: String })
-], A.prototype, "maxlengthError", 2);
-lt([
+], I.prototype, "maxlengthError", 2);
+nt([
   a({ attribute: "format-error", type: String })
-], A.prototype, "formatError", 2);
-lt([
+], I.prototype, "formatError", 2);
+nt([
   x()
-], A.prototype, "_invalid", 2);
-lt([
+], I.prototype, "_invalid", 2);
+nt([
   x()
-], A.prototype, "_errors", 2);
-lt([
+], I.prototype, "_errors", 2);
+nt([
   x()
-], A.prototype, "_value", 2);
-A = lt([
+], I.prototype, "_value", 2);
+I = nt([
   u("sb-password-field")
-], A);
+], I);
 var wm = Object.defineProperty, _m = Object.getOwnPropertyDescriptor, _t = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? _m(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
@@ -21132,7 +21119,7 @@ var wm = Object.defineProperty, _m = Object.getOwnPropertyDescriptor, _t = (t, e
 };
 let j = class extends v {
   constructor() {
-    super(...arguments), this.seed = Nt(), this.name = "confirm", this.variant = "simple", this.content = "split", this.pair = "sb-password-field", this.label = "Confirm Password", this.requiredError = "Confirm password is a required field.", this.matchError = "Passwords do not match.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
+    super(...arguments), this.seed = Nt(), this.name = "confirm", this.variant = "toggle", this.content = "split", this.pair = "sb-password-field", this.label = "Confirm Password", this.validation = "default", this.requiredError = "Confirm password is a required field.", this.matchError = "Passwords do not match.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
       e.matches(`[part="${j.parts.input}"] input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
@@ -21239,7 +21226,7 @@ let j = class extends v {
     const t = this._form ?? document, e = this.pair, r = t.querySelector(e);
     if (!r) return "";
     const i = r.querySelector(
-      `[part="${A.parts.input}"] input`
+      `[part="${I.parts.input}"] input`
     );
     return (i == null ? void 0 : i.value) ?? "";
   }
@@ -21265,44 +21252,29 @@ let j = class extends v {
     this.dispatchEvent(b);
   }
   /**
-   * Handles the required condition validation, accepting empty non-required
-   * fields and non-empty required fields, otherwise dispatching and displaying
-   * the required error.
-   */
-  _validateRequired(t) {
-    if (!this.required || t) return !0;
-    const e = this.requiredError;
-    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "required", t, e), !1;
-  }
-  /**
-   * Handles the match condition validation, obtaining the paired field's value,
-   * comparing it to the confirm field's value, dispatching and displaying the
-   * match error if the values do not match.
+   * Clears the invalid state and error, and dispatches a valid validate event.
    */
-  _validateMatch(t) {
-    const e = this._pairValue();
-    if (t === e) return !0;
-    const r = this.matchError;
-    return this._invalid = !0, this._error = r, this._dispatchValidate(!1, "match", t, r, e), !1;
+  _handleValidateSuccess(t, e = "Valid confirm.") {
+    this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, e);
   }
   /**
-   * Resets the `_invalid` and `_error` private props and dispatches the
-   * validate event, indicating a successfully validated and valid confirm.
+   * Sets the invalid state and error, and dispatches an invalid validate event.
    */
-  _doValidateSuccess(t, e) {
-    this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, e);
+  _handleValidateError(t, e, r) {
+    this._invalid = !0, this._error = r, this._dispatchValidate(!1, t, e, r);
   }
   /**
-   * Handles validation and dispatches the success event if the required,
-   * length, and format conditions are met.
+   * Validates the current value against the applicable rules in sequence,
+   * dispatches the validate event, and returns `true` if the value passes.
    */
   _validate() {
     const t = this._value;
-    let e = this._validateRequired(t);
-    return e ? t ? (e = this._validateMatch(t), e ? (this._doValidateSuccess(t, "Valid confirm password."), !0) : !1) : (this._doValidateSuccess(
-      t,
-      "Valid confirm password (optional and empty)."
-    ), !0) : !1;
+    if (this.required && !t)
+      return this._handleValidateError("required", t, this.requiredError), !1;
+    if (!t || this.validation === "simple")
+      return this._handleValidateSuccess(t), !0;
+    const e = this._pairValue();
+    return t !== e ? (this._handleValidateError("match", t, this.matchError), !1) : (this._handleValidateSuccess(t), !0);
   }
   /**
    * Conditionally returns the mark template for the field label. When `caret`
@@ -21458,6 +21430,9 @@ _t([
 _t([
   a({ type: Boolean })
 ], j.prototype, "required", 2);
+_t([
+  a({ type: String })
+], j.prototype, "validation", 2);
 _t([
   a({ attribute: "required-error", type: String })
 ], j.prototype, "requiredError", 2);
@@ -21476,14 +21451,14 @@ _t([
 j = _t([
   u("sb-confirm-field")
 ], j);
-var xm = Object.defineProperty, $m = Object.getOwnPropertyDescriptor, Rt = (t, e, r, i) => {
+var xm = Object.defineProperty, $m = Object.getOwnPropertyDescriptor, Et = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? $m(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && xm(e, r, s), s;
 };
 let D = class extends v {
   constructor() {
-    super(...arguments), this.seed = Nt(), this.name = "email", this.content = "split", this.label = "Email", this.requiredError = "Email is a required field.", this.formatError = "Enter a valid email address.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
+    super(...arguments), this.seed = Nt(), this.name = "email", this.content = "split", this.label = "Email", this.validation = "default", this.requiredError = "Email is a required field.", this.formatError = "Enter a valid email address.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
       e.matches(`[part="${D.parts.input}"]>input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
@@ -21603,36 +21578,24 @@ let D = class extends v {
     this.dispatchEvent(h);
   }
   /**
-   * Handles the required condition validation, accepting empty non-required
-   * fields and non-empty required fields, otherwise dispatching and displaying
-   * the required error.
+   * Clears the invalid state and error, and dispatches a valid validate event.
    */
-  _validateRequired(t) {
-    if (!this.required || t) return !0;
-    const e = this.requiredError;
-    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "required", t, e), !1;
+  _handleValidateSuccess(t, e = "Valid email.") {
+    this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, e);
   }
   /**
-   * Handles the format condition validation with `_PATTERN`, accepting empty
-   * non-required fields and non-empty fields that satisfy the pattern,
-   * otherwise dispatching and displaying the format error.
+   * Sets the invalid state and error, and dispatches an invalid validate event.
    */
-  _validateFormat(t) {
-    if (!this.required && t === "" || D._PATTERN.test(t))
-      return !0;
-    const e = this.formatError;
-    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "format", t, e), !1;
+  _handleValidateError(t, e, r) {
+    this._invalid = !0, this._error = r, this._dispatchValidate(!1, t, e, r);
   }
   /**
-   * Handles validation and dispatches the success event if the required and
-   * format conditions are met.
+   * Validates the current value against the applicable rules in sequence,
+   * dispatches the validate event, and returns `true` if the value passes.
    */
   _validate() {
     const t = this._normalizedValue;
-    let e = this._validateRequired(t);
-    if (!e || (e = this._validateFormat(t), !e)) return !1;
-    const r = `Valid email address${!t && " (optional and empty)"}.`;
-    return this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, r), !0;
+    return this.required && !t ? (this._handleValidateError("required", t, this.requiredError), !1) : !t || this.validation === "simple" ? (this._handleValidateSuccess(t), !0) : D._PATTERN.test(t) ? (this._handleValidateSuccess(t), !0) : (this._handleValidateError("format", t, this.formatError), !1);
   }
   /**
    * Conditionally returns the mark template for the field label. When `caret`
@@ -21736,68 +21699,71 @@ D._INPUT = "input";
 D._ERROR = "error";
 D.TAG = `sb-${D._ROOT}`;
 D._PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-Rt([
+Et([
   a({ type: String })
 ], D.prototype, "seed", 2);
-Rt([
+Et([
   a({ attribute: "child-id", type: String })
 ], D.prototype, "childId", 2);
-Rt([
+Et([
   a({ attribute: "field-id", type: String })
 ], D.prototype, "fieldId", 2);
-Rt([
+Et([
   a({ type: String })
 ], D.prototype, "name", 2);
-Rt([
+Et([
   a({ type: String })
 ], D.prototype, "content", 2);
-Rt([
+Et([
   a({ type: String })
 ], D.prototype, "label", 2);
-Rt([
+Et([
   a({ type: String })
 ], D.prototype, "placeholder", 2);
-Rt([
+Et([
   a({ type: String })
 ], D.prototype, "description", 2);
-Rt([
+Et([
   a({ type: String })
 ], D.prototype, "mark", 2);
-Rt([
+Et([
   a({ type: Boolean })
 ], D.prototype, "caret", 2);
-Rt([
+Et([
   a({ type: Boolean })
 ], D.prototype, "disabled", 2);
-Rt([
+Et([
   a({ type: Boolean })
 ], D.prototype, "required", 2);
-Rt([
+Et([
+  a({ type: String })
+], D.prototype, "validation", 2);
+Et([
   a({ attribute: "required-error", type: String })
 ], D.prototype, "requiredError", 2);
-Rt([
+Et([
   a({ attribute: "format-error", type: String })
 ], D.prototype, "formatError", 2);
-Rt([
+Et([
   x()
 ], D.prototype, "_invalid", 2);
-Rt([
+Et([
   x()
 ], D.prototype, "_error", 2);
-Rt([
+Et([
   x()
 ], D.prototype, "_value", 2);
-D = Rt([
+D = Et([
   u("sb-email-field")
 ], D);
-var Sm = Object.defineProperty, Cm = Object.getOwnPropertyDescriptor, Ct = (t, e, r, i) => {
+var Sm = Object.defineProperty, Cm = Object.getOwnPropertyDescriptor, xt = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? Cm(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Sm(e, r, s), s;
 };
 let M = class extends v {
   constructor() {
-    super(...arguments), this.seed = Nt(), this.name = "identifier", this.identifiers = [], this.content = "split", this.requiredError = "Identifier is a required field.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
+    super(...arguments), this.seed = Nt(), this.name = "identifier", this.identifiers = [], this.content = "split", this.validation = "default", this.requiredError = "Identifier is a required field.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
       e.matches(`[part="${M.parts.input}"]>input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
@@ -21938,24 +21904,24 @@ let M = class extends v {
     this.dispatchEvent(p);
   }
   /**
-   * Handles the required condition validation, accepting empty non-required
-   * fields and non-empty required fields, otherwise dispatching and displaying
-   * the required error.
+   * Clears the invalid state and error, and dispatches a valid validate event.
+   */
+  _handleValidateSuccess(t, e = "Valid identifier.") {
+    this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, e);
+  }
+  /**
+   * Sets the invalid state and error, and dispatches an invalid validate event.
    */
-  _validateRequired(t) {
-    if (!this.required || t) return !0;
-    const e = this.requiredError;
-    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "required", t, e), !1;
+  _handleValidateError(t, e, r) {
+    this._invalid = !0, this._error = r, this._dispatchValidate(!1, t, e, r);
   }
   /**
-   * Handles validation and dispatches the success event if the required
-   * condition is met.
+   * Validates the current value against the applicable rules in sequence,
+   * dispatches the validate event, and returns `true` if the value passes.
    */
   _validate() {
     const t = this._normalizedValue;
-    if (!this._validateRequired(t)) return !1;
-    const r = `Valid identifier${t ? "" : " (optional and empty)"}.`;
-    return this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, r), !0;
+    return this.required && !t ? (this._handleValidateError("required", t, this.requiredError), !1) : !t || this.validation === "simple" ? (this._handleValidateSuccess(t), !0) : (this._handleValidateSuccess(t), !0);
   }
   /**
    * Conditionally returns the mark template for the field label. When `caret`
@@ -22059,78 +22025,81 @@ M._DESCRIPTION = "description";
 M._INPUT = "input";
 M._ERROR = "error";
 M.TAG = `sb-${M._ROOT}`;
-Ct([
+xt([
   a({ type: String })
 ], M.prototype, "seed", 2);
-Ct([
+xt([
   a({ attribute: "child-id", type: String })
 ], M.prototype, "childId", 2);
-Ct([
+xt([
   a({ attribute: "field-id", type: String })
 ], M.prototype, "fieldId", 2);
-Ct([
+xt([
   a({ type: String })
 ], M.prototype, "name", 2);
-Ct([
+xt([
   a({ type: Array })
 ], M.prototype, "identifiers", 2);
-Ct([
+xt([
   a({ type: String })
 ], M.prototype, "content", 2);
-Ct([
+xt([
   a({ type: String })
 ], M.prototype, "label", 2);
-Ct([
+xt([
   a({ type: String })
 ], M.prototype, "placeholder", 2);
-Ct([
+xt([
   a({ type: String })
 ], M.prototype, "description", 2);
-Ct([
+xt([
   a({ type: String })
 ], M.prototype, "mark", 2);
-Ct([
+xt([
   a({ type: Boolean })
 ], M.prototype, "caret", 2);
-Ct([
+xt([
   a({ type: Boolean })
 ], M.prototype, "disabled", 2);
-Ct([
+xt([
   a({ type: String })
 ], M.prototype, "autocomplete", 2);
-Ct([
+xt([
   a({ type: Boolean })
 ], M.prototype, "required", 2);
-Ct([
+xt([
+  a({ type: String })
+], M.prototype, "validation", 2);
+xt([
   a({ attribute: "required-error", type: String })
 ], M.prototype, "requiredError", 2);
-Ct([
+xt([
   x()
 ], M.prototype, "_invalid", 2);
-Ct([
+xt([
   x()
 ], M.prototype, "_error", 2);
-Ct([
+xt([
   x()
 ], M.prototype, "_value", 2);
-M = Ct([
+M = xt([
   u("sb-identifier-field")
 ], M);
-var Em = Object.defineProperty, km = Object.getOwnPropertyDescriptor, ht = (t, e, r, i) => {
+var Em = Object.defineProperty, km = Object.getOwnPropertyDescriptor, dt = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? km(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Em(e, r, s), s;
 };
-let P = class extends v {
+let L = class extends v {
   constructor() {
-    super(...arguments), this.seed = Nt(), this.name = "name", this.content = "split", this.label = "Name", this.requiredError = "Name is a required field.", this.formatError = "Enter a valid name.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
+    super(...arguments), this.seed = Nt(), this.name = "name", this.content = "split", this.label = "Name", this.validation = "default", this.requiredError = "Name is a required field.", this.formatError = "Enter a valid name.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
-      e.matches(`[part="${P.parts.input}"]>input`) && (this._value = e.value);
+      e.matches(`[part="${L.parts.input}"]>input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
       this._validate() || t.preventDefault();
     }, this._handleFormReset = () => {
       const t = this.querySelector(
-        `rtg-input[part="${P.parts.input}"]`
+        `rtg-input[part="${L.parts.input}"]`
       );
       t && (t.value = ""), this._value = "", this._invalid = !1, this._error = "";
     };
@@ -22159,49 +22128,49 @@ let P = class extends v {
    * derived from the component's part name and `seed`.
    */
   get rootId() {
-    return this.childId ?? `sb-${P.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${L.parts.root}-${this.seed}`;
   }
   /**
    * The `id` of the field content element, derived from `rootId` with the
    * content part name appended.
    */
   get contentId() {
-    return `${this.rootId}-${P._CONTENT}`;
+    return `${this.rootId}-${L._CONTENT}`;
   }
   /**
    * The `id` of the field label element, derived from `rootId` with the label
    * part name appended.
    */
   get labelId() {
-    return `${this.rootId}-${P._LABEL}`;
+    return `${this.rootId}-${L._LABEL}`;
   }
   /**
    * The `id` of the field description element, derived from `rootId` with the
    * description part name appended.
    */
   get descriptionId() {
-    return `${this.rootId}-${P._DESCRIPTION}`;
+    return `${this.rootId}-${L._DESCRIPTION}`;
   }
   /**
    * The `id` of the mark element, derived from `rootId` with the mark part name
    * appended.
    */
   get markId() {
-    return `${this.rootId}-${P._MARK}`;
+    return `${this.rootId}-${L._MARK}`;
   }
   /**
    * The `id` of the input element, equal to `fieldId` when provided, otherwise
    * derived from `rootId` with the input part name appended.
    */
   get inputId() {
-    return this.fieldId ?? `${this.rootId}-${P._INPUT}`;
+    return this.fieldId ?? `${this.rootId}-${L._INPUT}`;
   }
   /**
    * The `id` of the field error element, derived from `rootId` with the error
    * part name appended.
    */
   get errorId() {
-    return `${this.rootId}-${P._ERROR}`;
+    return `${this.rootId}-${L._ERROR}`;
   }
   /**
    * Returns the normalized value of `_value` by trimming leading/trailing
@@ -22227,7 +22196,7 @@ let P = class extends v {
    * `pattern` prop when provided, otherwise falling back to `_PATTERN`.
    */
   get _pattern() {
-    return this.pattern ? new RegExp(this.pattern) : P._PATTERN;
+    return this.pattern ? new RegExp(this.pattern) : L._PATTERN;
   }
   /**
    * Adds the input, form submit, and form reset event listeners.
@@ -22254,7 +22223,7 @@ let P = class extends v {
    * Defines and dispatches the validate event.
    */
   _dispatchValidate(t, e, r, i) {
-    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(P.validateEventName, {
+    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(L.validateEventName, {
       detail: { id: s, parentId: o, name: n, value: r, valid: t, type: e, message: i },
       bubbles: !0,
       composed: !0
@@ -22262,61 +22231,37 @@ let P = class extends v {
     this.dispatchEvent(h);
   }
   /**
-   * Handles the required condition validation, accepting empty non-required
-   * fields and non-empty required fields, otherwise dispatching and displaying
-   * the required error.
-   */
-  _validateRequired(t) {
-    if (!this.required || t) return !0;
-    const e = this.requiredError;
-    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "required", t, e), !1;
-  }
-  /**
-   * Handles the minlength condition validation, determining if a valid
-   * `minlength` prop was provided, dispatching and displaying the minlength
-   * error if the value is shorter than accepted.
-   */
-  _validateMinlength(t) {
-    const { minlength: e } = this._lengths;
-    if (!e || t.length >= e) return !0;
-    const r = this.minlengthError ?? `Name must be at least ${e} characters.`;
-    return this._invalid = !0, this._error = r, this._dispatchValidate(!1, "minlength", t, r), !1;
-  }
-  /**
-   * Handles the maxlength condition validation, determining if a valid
-   * `maxlength` prop was provided, dispatching and displaying the maxlength
-   * error if the value is longer than accepted.
-   */
-  _validateMaxlength(t) {
-    const { maxlength: e } = this._lengths;
-    if (!e || t.length <= e) return !0;
-    const r = this.maxlengthError ?? `Name must be at most ${e} characters.`;
-    return this._invalid = !0, this._error = r, this._dispatchValidate(!1, "maxlength", t, r), !1;
-  }
-  /**
-   * Handles the format condition validation, testing against `_pattern`, and
-   * dispatching and displaying the format error for an invalid value.
+   * Clears the invalid state and error, and dispatches a valid validate event.
    */
-  _validateFormat(t) {
-    if (this._pattern.test(t)) return !0;
-    const e = this.formatError;
-    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "format", t, e), !1;
+  _handleValidateSuccess(t, e = "Valid name.") {
+    this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, e);
   }
   /**
-   * Resets the `_invalid` and `_error` private props and dispatches the
-   * validate event, indicating a successfully validated and valid name.
+   * Sets the invalid state and error, and dispatches an invalid validate event.
    */
-  _doValidateSuccess(t, e) {
-    this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, e);
+  _handleValidateError(t, e, r) {
+    this._invalid = !0, this._error = r, this._dispatchValidate(!1, t, e, r);
   }
   /**
-   * Handles validation and dispatches the success event if the required,
-   * length, and format conditions are met.
+   * Validates the current value against the applicable rules in sequence,
+   * dispatches the validate event, and returns `true` if the value passes.
    */
   _validate() {
     const t = this._normalizedValue;
-    let e = this._validateRequired(t);
-    return e ? t ? (e = this._validateMinlength(t), !e || (e = this._validateMaxlength(t), !e) || (e = this._validateFormat(t), !e) ? !1 : (this._doValidateSuccess(t, "Valid name."), !0)) : (this._doValidateSuccess(t, "Valid name (optional and empty)."), !0) : !1;
+    if (this.required && !t)
+      return this._handleValidateError("required", t, this.requiredError), !1;
+    if (!t || this.validation === "simple")
+      return this._handleValidateSuccess(t), !0;
+    const { minlength: e, maxlength: r } = this._lengths;
+    return e && t.length < e ? (this._handleValidateError(
+      "minlength",
+      t,
+      this.minlengthError ?? `Username must be at least ${e} characters.`
+    ), !1) : r && t.length > r ? (this._handleValidateError(
+      "maxlength",
+      t,
+      this.maxlengthError ?? `Username must be at most ${r} characters.`
+    ), !1) : this._pattern.test(t) ? (this._handleValidateSuccess(t), !0) : (this._handleValidateError("format", t, this.formatError), !1);
   }
   /**
    * Conditionally returns the mark template for the field label. When `caret`
@@ -22329,7 +22274,7 @@ let P = class extends v {
     return !this.mark && (!this.caret || !this.required) ? g : d`
       <span
         id="${this.markId}"
-        part="${P.parts.mark}"
+        part="${L.parts.mark}"
         data-content="${this.mark ? "text" : "caret"}"
       >
         ${this.mark ? this.mark : d`&ast;`}
@@ -22343,7 +22288,7 @@ let P = class extends v {
     return d`
       <rtg-field-label
         id="${this.labelId}"
-        part="${P.parts.label}"
+        part="${L.parts.label}"
         for="${this.inputId}"
       >
         ${this.label} ${this._renderMark()}
@@ -22357,7 +22302,7 @@ let P = class extends v {
     return this.description ? d`
       <rtg-field-description
         id="${this.descriptionId}"
-        part="${P.parts.description}"
+        part="${L.parts.description}"
       >
         ${this.description}
       </rtg-field-description>
@@ -22371,7 +22316,7 @@ let P = class extends v {
     return this._invalid ? d`
       <rtg-field-error
         id="${this.errorId}"
-        part="${P.parts.error}"
+        part="${L.parts.error}"
         .errors=${[{ message: this._error }]}
       ></rtg-field-error>
     ` : g;
@@ -22381,7 +22326,7 @@ let P = class extends v {
     return d`
       <rtg-field
         id="${this.rootId}"
-        part="${P.parts.root}"
+        part="${L.parts.root}"
         data-content="${this.content}"
         ?disabled="${this.disabled}"
         ?invalid="${this._invalid}"
@@ -22389,7 +22334,7 @@ let P = class extends v {
         ${this.content === "group" ? d`
               <rtg-field-content
                 id="${this.contentId}"
-                part="${P.parts.content}"
+                part="${L.parts.content}"
               >
                 ${this._renderLabel()} ${this._renderDescription()}
               </rtg-field-content>
@@ -22397,11 +22342,10 @@ let P = class extends v {
 
         <rtg-input
           id="${this.inputId}"
-          part="${P.parts.input}"
+          part="${L.parts.input}"
           type="text"
           name="${this.name}"
           placeholder="${this.placeholder ?? g}"
-          pattern="${this._pattern.source}"
           minlength="${t ?? g}"
           maxlength="${e ?? g}"
           ?disabled="${this.disabled}"
@@ -22415,92 +22359,95 @@ let P = class extends v {
     `;
   }
 };
-P._ROOT = "name-field";
-P._CONTENT = "content";
-P._LABEL = "label";
-P._MARK = "mark";
-P._DESCRIPTION = "description";
-P._INPUT = "input";
-P._ERROR = "error";
-P.TAG = `sb-${P._ROOT}`;
-P._PATTERN = /^[\p{L} .'-]*$/u;
-ht([
+L._ROOT = "name-field";
+L._CONTENT = "content";
+L._LABEL = "label";
+L._MARK = "mark";
+L._DESCRIPTION = "description";
+L._INPUT = "input";
+L._ERROR = "error";
+L.TAG = `sb-${L._ROOT}`;
+L._PATTERN = /^[\p{L} .'-]*$/u;
+dt([
   a({ type: String })
-], P.prototype, "seed", 2);
-ht([
+], L.prototype, "seed", 2);
+dt([
   a({ attribute: "child-id", type: String })
-], P.prototype, "childId", 2);
-ht([
+], L.prototype, "childId", 2);
+dt([
   a({ attribute: "field-id", type: String })
-], P.prototype, "fieldId", 2);
-ht([
+], L.prototype, "fieldId", 2);
+dt([
   a({ type: String })
-], P.prototype, "name", 2);
-ht([
+], L.prototype, "name", 2);
+dt([
   a({ type: String })
-], P.prototype, "content", 2);
-ht([
+], L.prototype, "content", 2);
+dt([
   a({ type: String })
-], P.prototype, "label", 2);
-ht([
+], L.prototype, "label", 2);
+dt([
   a({ type: String })
-], P.prototype, "placeholder", 2);
-ht([
+], L.prototype, "placeholder", 2);
+dt([
   a({ type: String })
-], P.prototype, "description", 2);
-ht([
+], L.prototype, "description", 2);
+dt([
   a({ type: String })
-], P.prototype, "mark", 2);
-ht([
+], L.prototype, "mark", 2);
+dt([
   a({ type: Boolean })
-], P.prototype, "caret", 2);
-ht([
+], L.prototype, "caret", 2);
+dt([
   a({ type: Boolean })
-], P.prototype, "disabled", 2);
-ht([
+], L.prototype, "disabled", 2);
+dt([
   a({ type: Boolean })
-], P.prototype, "required", 2);
-ht([
+], L.prototype, "required", 2);
+dt([
   a({ type: Number })
-], P.prototype, "minlength", 2);
-ht([
+], L.prototype, "minlength", 2);
+dt([
   a({ type: Number })
-], P.prototype, "maxlength", 2);
-ht([
+], L.prototype, "maxlength", 2);
+dt([
   a({ type: String })
-], P.prototype, "pattern", 2);
-ht([
+], L.prototype, "pattern", 2);
+dt([
+  a({ type: String })
+], L.prototype, "validation", 2);
+dt([
   a({ attribute: "required-error", type: String })
-], P.prototype, "requiredError", 2);
-ht([
+], L.prototype, "requiredError", 2);
+dt([
   a({ attribute: "minlength-error", type: String })
-], P.prototype, "minlengthError", 2);
-ht([
+], L.prototype, "minlengthError", 2);
+dt([
   a({ attribute: "maxlength-error", type: String })
-], P.prototype, "maxlengthError", 2);
-ht([
+], L.prototype, "maxlengthError", 2);
+dt([
   a({ attribute: "format-error", type: String })
-], P.prototype, "formatError", 2);
-ht([
+], L.prototype, "formatError", 2);
+dt([
   x()
-], P.prototype, "_invalid", 2);
-ht([
+], L.prototype, "_invalid", 2);
+dt([
   x()
-], P.prototype, "_error", 2);
-ht([
+], L.prototype, "_error", 2);
+dt([
   x()
-], P.prototype, "_value", 2);
-P = ht([
+], L.prototype, "_value", 2);
+L = dt([
   u("sb-name-field")
-], P);
-var Rm = Object.defineProperty, Om = Object.getOwnPropertyDescriptor, Ot = (t, e, r, i) => {
+], L);
+var Rm = Object.defineProperty, Om = Object.getOwnPropertyDescriptor, kt = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? Om(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Rm(e, r, s), s;
 };
 let U = class extends v {
   constructor() {
-    super(...arguments), this.seed = Nt(), this.name = "phone", this.content = "split", this.label = "Phone", this.requiredError = "Phone is a required field.", this.formatError = "Enter a valid phone number.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
+    super(...arguments), this.seed = Nt(), this.name = "phone", this.content = "split", this.label = "Phone", this.validation = "default", this.requiredError = "Phone is a required field.", this.formatError = "Enter a valid phone number.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
       e.matches(`[part="${U.parts.input}"]>input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
@@ -22619,36 +22566,24 @@ let U = class extends v {
     this.dispatchEvent(h);
   }
   /**
-   * Handles the required condition validation, accepting empty non-required
-   * fields and non-empty required fields, otherwise dispatching and displaying
-   * the required error.
+   * Clears the invalid state and error, and dispatches a valid validate event.
    */
-  _validateRequired(t) {
-    if (!this.required || t) return !0;
-    const e = this.requiredError;
-    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "required", t, e), !1;
+  _handleValidateSuccess(t, e = "Valid phone.") {
+    this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, e);
   }
   /**
-   * Handles the format condition validation with `_PATTERN`, accepting empty
-   * non-required fields and non-empty fields that satisfy the pattern,
-   * otherwise dispatching and displaying the format error.
+   * Sets the invalid state and error, and dispatches an invalid validate event.
    */
-  _validateFormat(t) {
-    if (!this.required && t === "" || U._PATTERN.test(t))
-      return !0;
-    const e = this.formatError;
-    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "format", t, e), !1;
+  _handleValidateError(t, e, r) {
+    this._invalid = !0, this._error = r, this._dispatchValidate(!1, t, e, r);
   }
   /**
-   * Handles validation and dispatches the success event if the required and
-   * format conditions are met.
+   * Validates the current value against the applicable rules in sequence,
+   * dispatches the validate event, and returns `true` if the value passes.
    */
   _validate() {
     const t = this._normalizedValue;
-    let e = this._validateRequired(t);
-    if (!e || (e = this._validateFormat(t), !e)) return !1;
-    const r = `Valid phone number${!t && " (optional and empty)"}.`;
-    return this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, r), !0;
+    return this.required && !t ? (this._handleValidateError("required", t, this.requiredError), !1) : !t || this.validation === "simple" ? (this._handleValidateSuccess(t), !0) : U._PATTERN.test(t) ? (this._handleValidateSuccess(t), !0) : (this._handleValidateError("format", t, this.formatError), !1);
   }
   /**
    * Conditionally returns the mark template for the field label. When `caret`
@@ -22752,75 +22687,78 @@ U._INPUT = "input";
 U._ERROR = "error";
 U.TAG = `sb-${U._ROOT}`;
 U._PATTERN = /^\+?(\d[\d-.() ]+)?(\([\d-.() ]+\))?[\d-.() ]+\d$/;
-Ot([
+kt([
   a({ type: String })
 ], U.prototype, "seed", 2);
-Ot([
+kt([
   a({ attribute: "child-id", type: String })
 ], U.prototype, "childId", 2);
-Ot([
+kt([
   a({ attribute: "field-id", type: String })
 ], U.prototype, "fieldId", 2);
-Ot([
+kt([
   a({ type: String })
 ], U.prototype, "name", 2);
-Ot([
+kt([
   a({ type: String })
 ], U.prototype, "content", 2);
-Ot([
+kt([
   a({ type: String })
 ], U.prototype, "label", 2);
-Ot([
+kt([
   a({ type: String })
 ], U.prototype, "placeholder", 2);
-Ot([
+kt([
   a({ type: String })
 ], U.prototype, "description", 2);
-Ot([
+kt([
   a({ type: String })
 ], U.prototype, "mark", 2);
-Ot([
+kt([
   a({ type: Boolean })
 ], U.prototype, "caret", 2);
-Ot([
+kt([
   a({ type: Boolean })
 ], U.prototype, "disabled", 2);
-Ot([
+kt([
   a({ type: Boolean })
 ], U.prototype, "required", 2);
-Ot([
+kt([
+  a({ type: String })
+], U.prototype, "validation", 2);
+kt([
   a({ attribute: "required-error", type: String })
 ], U.prototype, "requiredError", 2);
-Ot([
+kt([
   a({ attribute: "format-error", type: String })
 ], U.prototype, "formatError", 2);
-Ot([
+kt([
   x()
 ], U.prototype, "_invalid", 2);
-Ot([
+kt([
   x()
 ], U.prototype, "_error", 2);
-Ot([
+kt([
   x()
 ], U.prototype, "_value", 2);
-U = Ot([
+U = kt([
   u("sb-phone-field")
 ], U);
-var Im = Object.defineProperty, Am = Object.getOwnPropertyDescriptor, pt = (t, e, r, i) => {
+var Im = Object.defineProperty, Am = Object.getOwnPropertyDescriptor, ct = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? Am(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Im(e, r, s), s;
 };
-let N = class extends v {
+let P = class extends v {
   constructor() {
-    super(...arguments), this.seed = Nt(), this.name = "username", this.content = "split", this.label = "Username", this.requiredError = "Username is a required field.", this.formatError = "Enter a valid username.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
+    super(...arguments), this.seed = Nt(), this.name = "username", this.content = "split", this.label = "Username", this.validation = "default", this.requiredError = "Username is a required field.", this.formatError = "Enter a valid username.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
-      e.matches(`[part="${N.parts.input}"]>input`) && (this._value = e.value);
+      e.matches(`[part="${P.parts.input}"]>input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
       this._validate() || t.preventDefault();
     }, this._handleFormReset = () => {
       const t = this.querySelector(
-        `rtg-input[part="${N.parts.input}"]`
+        `rtg-input[part="${P.parts.input}"]`
       );
       t && (t.value = ""), this._value = "", this._invalid = !1, this._error = "";
     };
@@ -22849,49 +22787,49 @@ let N = class extends v {
    * derived from the component's part name and `seed`.
    */
   get rootId() {
-    return this.childId ?? `sb-${N.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${P.parts.root}-${this.seed}`;
   }
   /**
    * The `id` of the field content element, derived from `rootId` with the
    * content part name appended.
    */
   get contentId() {
-    return `${this.rootId}-${N._CONTENT}`;
+    return `${this.rootId}-${P._CONTENT}`;
   }
   /**
    * The `id` of the field label element, derived from `rootId` with the label
    * part name appended.
    */
   get labelId() {
-    return `${this.rootId}-${N._LABEL}`;
+    return `${this.rootId}-${P._LABEL}`;
   }
   /**
    * The `id` of the field description element, derived from `rootId` with the
    * description part name appended.
    */
   get descriptionId() {
-    return `${this.rootId}-${N._DESCRIPTION}`;
+    return `${this.rootId}-${P._DESCRIPTION}`;
   }
   /**
    * The `id` of the mark element, derived from `rootId` with the mark part name
    * appended.
    */
   get markId() {
-    return `${this.rootId}-${N._MARK}`;
+    return `${this.rootId}-${P._MARK}`;
   }
   /**
    * The `id` of the input element, equal to `fieldId` when provided, otherwise
    * derived from `rootId` with the input part name appended.
    */
   get inputId() {
-    return this.fieldId ?? `${this.rootId}-${N._INPUT}`;
+    return this.fieldId ?? `${this.rootId}-${P._INPUT}`;
   }
   /**
    * The `id` of the field error element, derived from `rootId` with the error
    * part name appended.
    */
   get errorId() {
-    return `${this.rootId}-${N._ERROR}`;
+    return `${this.rootId}-${P._ERROR}`;
   }
   /**
    * Returns a the normalized value of `_value` by trimming whitespace and
@@ -22917,7 +22855,7 @@ let N = class extends v {
    * `pattern` prop when provided, otherwise falling back to `_PATTERN`.
    */
   get _pattern() {
-    return this.pattern ? new RegExp(this.pattern) : N._PATTERN;
+    return this.pattern ? new RegExp(this.pattern) : P._PATTERN;
   }
   /**
    * Adds the input, form submit, and form reset event listeners.
@@ -22944,7 +22882,7 @@ let N = class extends v {
    * Defines and dispatches the validate event.
    */
   _dispatchValidate(t, e, r, i) {
-    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(N.validateEventName, {
+    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(P.validateEventName, {
       detail: { id: s, parentId: o, name: n, value: r, valid: t, type: e, message: i },
       bubbles: !0,
       composed: !0
@@ -22952,61 +22890,37 @@ let N = class extends v {
     this.dispatchEvent(h);
   }
   /**
-   * Handles the required condition validation, accepting empty non-required
-   * fields and non-empty required fields, otherwise dispatching and displaying
-   * the required error.
-   */
-  _validateRequired(t) {
-    if (!this.required || t) return !0;
-    const e = this.requiredError;
-    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "required", t, e), !1;
-  }
-  /**
-   * Handles the minlength condition validation, determining if a valid
-   * `minlength` prop was provided, dispatching and displaying the minlength
-   * error if the value is shorter than accepted.
+   * Clears the invalid state and error, and dispatches a valid validate event.
    */
-  _validateMinlength(t) {
-    const { minlength: e } = this._lengths;
-    if (!e || t.length >= e) return !0;
-    const r = this.minlengthError ?? `Username must be at least ${e} characters.`;
-    return this._invalid = !0, this._error = r, this._dispatchValidate(!1, "minlength", t, r), !1;
-  }
-  /**
-   * Handles the maxlength condition validation, determining if a valid
-   * `maxlength` prop was provided, dispatching and displaying the maxlength
-   * error if the value is longer than accepted.
-   */
-  _validateMaxlength(t) {
-    const { maxlength: e } = this._lengths;
-    if (!e || t.length <= e) return !0;
-    const r = this.maxlengthError ?? `Username must be at most ${e} characters.`;
-    return this._invalid = !0, this._error = r, this._dispatchValidate(!1, "maxlength", t, r), !1;
-  }
-  /**
-   * Handles the format condition validation, testing against `_pattern`, and
-   * dispatching and displaying the format error for an invalid value.
-   */
-  _validateFormat(t) {
-    if (this._pattern.test(t)) return !0;
-    const e = this.formatError;
-    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "format", t, e), !1;
+  _handleValidateSuccess(t, e = "Valid username.") {
+    this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, e);
   }
   /**
-   * Resets the `_invalid` and `_error` private props and dispatches the
-   * validate event, indicating a successfully validated and valid username.
+   * Sets the invalid state and error, and dispatches an invalid validate event.
    */
-  _doValidateSuccess(t, e) {
-    this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, e);
+  _handleValidateError(t, e, r) {
+    this._invalid = !0, this._error = r, this._dispatchValidate(!1, t, e, r);
   }
   /**
-   * Handles validation and dispatches the success event if the required,
-   * length, and format conditions are met.
+   * Validates the current value against the applicable rules in sequence,
+   * dispatches the validate event, and returns `true` if the value passes.
    */
   _validate() {
     const t = this._normalizedValue;
-    let e = this._validateRequired(t);
-    return e ? t ? (e = this._validateMinlength(t), !e || (e = this._validateMaxlength(t), !e) || (e = this._validateFormat(t), !e) ? !1 : (this._doValidateSuccess(t, "Valid username."), !0)) : (this._doValidateSuccess(t, "Valid username (optional and empty)."), !0) : !1;
+    if (this.required && !t)
+      return this._handleValidateError("required", t, this.requiredError), !1;
+    if (!t || this.validation === "simple")
+      return this._handleValidateSuccess(t), !0;
+    const { minlength: e, maxlength: r } = this._lengths;
+    return e && t.length < e ? (this._handleValidateError(
+      "minlength",
+      t,
+      this.minlengthError ?? `Username must be at least ${e} characters.`
+    ), !1) : r && t.length > r ? (this._handleValidateError(
+      "maxlength",
+      t,
+      this.maxlengthError ?? `Username must be at most ${r} characters.`
+    ), !1) : this._pattern.test(t) ? (this._handleValidateSuccess(t), !0) : (this._handleValidateError("format", t, this.formatError), !1);
   }
   /**
    * Conditionally returns the mark template for the field label. When `caret`
@@ -23019,7 +22933,7 @@ let N = class extends v {
     return !this.mark && (!this.caret || !this.required) ? g : d`
       <span
         id="${this.markId}"
-        part="${N.parts.mark}"
+        part="${P.parts.mark}"
         data-content="${this.mark ? "text" : "caret"}"
       >
         ${this.mark ? this.mark : d`&ast;`}
@@ -23033,7 +22947,7 @@ let N = class extends v {
     return d`
       <rtg-field-label
         id="${this.labelId}"
-        part="${N.parts.label}"
+        part="${P.parts.label}"
         for="${this.inputId}"
       >
         ${this.label} ${this._renderMark()}
@@ -23047,7 +22961,7 @@ let N = class extends v {
     return this.description ? d`
       <rtg-field-description
         id="${this.descriptionId}"
-        part="${N.parts.description}"
+        part="${P.parts.description}"
       >
         ${this.description}
       </rtg-field-description>
@@ -23061,7 +22975,7 @@ let N = class extends v {
     return this._invalid ? d`
       <rtg-field-error
         id="${this.errorId}"
-        part="${N.parts.error}"
+        part="${P.parts.error}"
         .errors=${[{ message: this._error }]}
       ></rtg-field-error>
     ` : g;
@@ -23071,7 +22985,7 @@ let N = class extends v {
     return d`
       <rtg-field
         id="${this.rootId}"
-        part="${N.parts.root}"
+        part="${P.parts.root}"
         data-content="${this.content}"
         ?disabled="${this.disabled}"
         ?invalid="${this._invalid}"
@@ -23079,7 +22993,7 @@ let N = class extends v {
         ${this.content === "group" ? d`
               <rtg-field-content
                 id="${this.contentId}"
-                part="${N.parts.content}"
+                part="${P.parts.content}"
               >
                 ${this._renderLabel()} ${this._renderDescription()}
               </rtg-field-content>
@@ -23087,11 +23001,10 @@ let N = class extends v {
 
         <rtg-input
           id="${this.inputId}"
-          part="${N.parts.input}"
+          part="${P.parts.input}"
           type="text"
           name="${this.name}"
           placeholder="${this.placeholder ?? g}"
-          pattern="${this._pattern.source}"
           minlength="${t ?? g}"
           maxlength="${e ?? g}"
           ?disabled="${this.disabled}"
@@ -23105,94 +23018,97 @@ let N = class extends v {
     `;
   }
 };
-N._ROOT = "username-field";
-N._CONTENT = "content";
-N._LABEL = "label";
-N._MARK = "mark";
-N._DESCRIPTION = "description";
-N._INPUT = "input";
-N._ERROR = "error";
-N.TAG = `sb-${N._ROOT}`;
-N._PATTERN = /^[a-z0-9_]*$/;
-pt([
+P._ROOT = "username-field";
+P._CONTENT = "content";
+P._LABEL = "label";
+P._MARK = "mark";
+P._DESCRIPTION = "description";
+P._INPUT = "input";
+P._ERROR = "error";
+P.TAG = `sb-${P._ROOT}`;
+P._PATTERN = /^[a-z0-9_]*$/;
+ct([
   a({ type: String })
-], N.prototype, "seed", 2);
-pt([
+], P.prototype, "seed", 2);
+ct([
   a({ attribute: "child-id", type: String })
-], N.prototype, "childId", 2);
-pt([
+], P.prototype, "childId", 2);
+ct([
   a({ attribute: "field-id", type: String })
-], N.prototype, "fieldId", 2);
-pt([
+], P.prototype, "fieldId", 2);
+ct([
   a({ type: String })
-], N.prototype, "name", 2);
-pt([
+], P.prototype, "name", 2);
+ct([
   a({ type: String })
-], N.prototype, "content", 2);
-pt([
+], P.prototype, "content", 2);
+ct([
   a({ type: String })
-], N.prototype, "label", 2);
-pt([
+], P.prototype, "label", 2);
+ct([
   a({ type: String })
-], N.prototype, "placeholder", 2);
-pt([
+], P.prototype, "placeholder", 2);
+ct([
   a({ type: String })
-], N.prototype, "description", 2);
-pt([
+], P.prototype, "description", 2);
+ct([
   a({ type: String })
-], N.prototype, "mark", 2);
-pt([
+], P.prototype, "mark", 2);
+ct([
   a({ type: Boolean })
-], N.prototype, "caret", 2);
-pt([
+], P.prototype, "caret", 2);
+ct([
   a({ type: Boolean })
-], N.prototype, "disabled", 2);
-pt([
+], P.prototype, "disabled", 2);
+ct([
   a({ type: Boolean })
-], N.prototype, "required", 2);
-pt([
+], P.prototype, "required", 2);
+ct([
   a({ type: Number })
-], N.prototype, "minlength", 2);
-pt([
+], P.prototype, "minlength", 2);
+ct([
   a({ type: Number })
-], N.prototype, "maxlength", 2);
-pt([
+], P.prototype, "maxlength", 2);
+ct([
+  a({ type: String })
+], P.prototype, "pattern", 2);
+ct([
   a({ type: String })
-], N.prototype, "pattern", 2);
-pt([
+], P.prototype, "validation", 2);
+ct([
   a({ attribute: "required-error", type: String })
-], N.prototype, "requiredError", 2);
-pt([
+], P.prototype, "requiredError", 2);
+ct([
   a({ attribute: "minlength-error", type: String })
-], N.prototype, "minlengthError", 2);
-pt([
+], P.prototype, "minlengthError", 2);
+ct([
   a({ attribute: "maxlength-error", type: String })
-], N.prototype, "maxlengthError", 2);
-pt([
+], P.prototype, "maxlengthError", 2);
+ct([
   a({ attribute: "format-error", type: String })
-], N.prototype, "formatError", 2);
-pt([
+], P.prototype, "formatError", 2);
+ct([
   x()
-], N.prototype, "_invalid", 2);
-pt([
+], P.prototype, "_invalid", 2);
+ct([
   x()
-], N.prototype, "_error", 2);
-pt([
+], P.prototype, "_error", 2);
+ct([
   x()
-], N.prototype, "_value", 2);
-N = pt([
+], P.prototype, "_value", 2);
+P = ct([
   u("sb-username-field")
-], N);
+], P);
 var Tm = Object.defineProperty, Lm = Object.getOwnPropertyDescriptor, ve = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? Lm(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Tm(e, r, s), s;
 };
-let at = class extends v {
+let lt = class extends v {
   constructor() {
     super(...arguments), this.seed = Nt(), this.variant = "default", this.size = "default", this.label = "Submit", this.spinnerAlign = "start", this._loading = !1, this._handleClick = () => {
       this.disabled || this.isLoading || this.dispatchEvent(
-        new CustomEvent(at.clickEventName, {
+        new CustomEvent(lt.clickEventName, {
           detail: { id: this.rootId, event: this.event },
           bubbles: !0,
           composed: !0
@@ -23224,14 +23140,14 @@ let at = class extends v {
    * derived from the component's part name and `seed`.
    */
   get rootId() {
-    return this.childId ?? `sb-${at.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${lt.parts.root}-${this.seed}`;
   }
   /**
    * The `id` of the spinner element, derived from `rootId` with the spinner
    * part name appended.
    */
   get spinnerId() {
-    return `${this.rootId}-${at._SPINNER}`;
+    return `${this.rootId}-${lt._SPINNER}`;
   }
   /**
    * The loading state, derived from the private `_loading` and `loading` prop.
@@ -23258,7 +23174,7 @@ let at = class extends v {
     return this.isLoading ? d`
       <rtg-spinner
         id="${this.spinnerId}"
-        part="${at.parts.spinner}"
+        part="${lt.parts.spinner}"
         class="rtg-icon-inline-${this.spinnerAlign}"
       ></rtg-spinner>
     ` : g;
@@ -23267,7 +23183,7 @@ let at = class extends v {
     return d`
       <rtg-button
         id="${this.rootId}"
-        part="${at.parts.root}"
+        part="${lt.parts.root}"
         data-event="${this.event}"
         ?data-loading=${this.isLoading}
         variant="${this.variant}"
@@ -23282,49 +23198,49 @@ let at = class extends v {
     `;
   }
 };
-at._ROOT = "form-submit";
-at._SPINNER = "spinner";
-at.TAG = `sb-${at._ROOT}`;
+lt._ROOT = "form-submit";
+lt._SPINNER = "spinner";
+lt.TAG = `sb-${lt._ROOT}`;
 ve([
   a({ type: String })
-], at.prototype, "seed", 2);
+], lt.prototype, "seed", 2);
 ve([
   a({ attribute: "child-id", type: String })
-], at.prototype, "childId", 2);
+], lt.prototype, "childId", 2);
 ve([
   a({ type: String })
-], at.prototype, "variant", 2);
+], lt.prototype, "variant", 2);
 ve([
   a({ type: String })
-], at.prototype, "size", 2);
+], lt.prototype, "size", 2);
 ve([
   a({ type: String })
-], at.prototype, "label", 2);
+], lt.prototype, "label", 2);
 ve([
   a({ attribute: "spinner-align", type: String })
-], at.prototype, "spinnerAlign", 2);
+], lt.prototype, "spinnerAlign", 2);
 ve([
   a({ type: Boolean })
-], at.prototype, "disabled", 2);
+], lt.prototype, "disabled", 2);
 ve([
   a({ type: Boolean })
-], at.prototype, "loading", 2);
+], lt.prototype, "loading", 2);
 ve([
   a({ type: String })
-], at.prototype, "event", 2);
+], lt.prototype, "event", 2);
 ve([
   x()
-], at.prototype, "_loading", 2);
-at = ve([
+], lt.prototype, "_loading", 2);
+lt = ve([
   u("sb-form-submit")
-], at);
+], lt);
 const ph = [
   D,
   U,
-  N,
-  M,
   P,
-  A,
+  M,
+  L,
+  I,
   j
 ], Pm = ph.map((t) => t.TAG).join(", "), uc = ph.map((t) => t.validateEventName);
 var Nm = Object.defineProperty, zm = Object.getOwnPropertyDescriptor, cs = (t, e, r, i) => {
@@ -23357,7 +23273,7 @@ let yt = class extends v {
       const h = e.map((p) => !!p.disabled);
       this._setLoading(!0, e, h);
       try {
-        await St.processLoginflowEvent({
+        await Ct.processLoginflowEvent({
           event: n,
           ...Object.keys(r).length ? { data: r } : {}
         }), this._dispatch(yt.SUCCESS_EVENT, { id: this.rootId, data: r, event: n });
@@ -23415,21 +23331,21 @@ let yt = class extends v {
    */
   get _submit() {
     const t = this._form;
-    return t ? t.querySelector(at.TAG) : null;
+    return t ? t.querySelector(lt.TAG) : null;
   }
   /**
    * Subscribes to the `sb-form-submit:click` event so the auth event string
    * is captured before the native form `submit` event fires.
    */
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener(at.clickEventName, this._handleSubmitClick);
+    super.connectedCallback(), this.addEventListener(lt.clickEventName, this._handleSubmitClick);
   }
   /**
    * Removes the `sb-form-submit:click` listener.
    */
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener(
-      at.clickEventName,
+      lt.clickEventName,
       this._handleSubmitClick
     );
   }
@@ -23565,7 +23481,7 @@ let Z = class extends v {
           })
         );
         try {
-          this.event && await St.processLoginflowEvent({ event: this.event });
+          this.event && await Ct.processLoginflowEvent({ event: this.event });
         } finally {
           this._loading = !1;
         }
@@ -23718,19 +23634,19 @@ var Fm = Object.defineProperty, Bm = Object.getOwnPropertyDescriptor, ye = (t, e
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Fm(e, r, s), s;
 };
-let ct = class extends v {
+let pt = class extends v {
   constructor() {
     super(...arguments), this.seed = Nt(), this.variant = "secondary", this.size = "default", this.label = "Use Passkey", this.spinnerAlign = "start", this._loading = !1, this._handleClick = async () => {
       if (!(this.disabled || this.isLoading)) {
         this._loading = !0, this.dispatchEvent(
-          new CustomEvent(ct.CLICK_EVENT, {
+          new CustomEvent(pt.CLICK_EVENT, {
             detail: { id: this.rootId, event: this.event },
             bubbles: !0,
             composed: !0
           })
         );
         try {
-          this.event && await St.processLoginflowEvent({ event: this.event });
+          this.event && await Ct.processLoginflowEvent({ event: this.event });
         } finally {
           this._loading = !1;
         }
@@ -23755,13 +23671,13 @@ let ct = class extends v {
    * derived from the component's part name and `seed`.
    */
   get rootId() {
-    return this.childId ?? `sb-${ct.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${pt.parts.root}-${this.seed}`;
   }
   /**
    * The `id` of the spinner element, derived from `rootId` and the part name.
    */
   get spinnerId() {
-    return `${this.rootId}-${ct._SPINNER}`;
+    return `${this.rootId}-${pt._SPINNER}`;
   }
   /**
    * The loading state, derived from the private `_loading` and `loading` prop.
@@ -23788,7 +23704,7 @@ let ct = class extends v {
     return this.isLoading ? d`
       <rtg-spinner
         id="${this.spinnerId}"
-        part="${ct.parts.spinner}"
+        part="${pt.parts.spinner}"
         class="rtg-icon-inline-${this.spinnerAlign}"
       ></rtg-spinner>
     ` : g;
@@ -23797,7 +23713,7 @@ let ct = class extends v {
     return d`
       <rtg-button
         id="${this.rootId}"
-        part="${ct.parts.root}"
+        part="${pt.parts.root}"
         data-event="${this.event ?? g}"
         data-loading="${this.isLoading ? "true" : g}"
         variant="${this.variant}"
@@ -23811,43 +23727,43 @@ let ct = class extends v {
     `;
   }
 };
-ct._ROOT = "passkey-button";
-ct._SPINNER = "spinner";
-ct.TAG = `sb-${ct._ROOT}`;
-ct.CLICK_EVENT = `${ct.TAG}:click`;
+pt._ROOT = "passkey-button";
+pt._SPINNER = "spinner";
+pt.TAG = `sb-${pt._ROOT}`;
+pt.CLICK_EVENT = `${pt.TAG}:click`;
 ye([
   a({ type: String })
-], ct.prototype, "seed", 2);
+], pt.prototype, "seed", 2);
 ye([
   a({ attribute: "child-id", type: String })
-], ct.prototype, "childId", 2);
+], pt.prototype, "childId", 2);
 ye([
   a({ type: String })
-], ct.prototype, "variant", 2);
+], pt.prototype, "variant", 2);
 ye([
   a({ type: String })
-], ct.prototype, "size", 2);
+], pt.prototype, "size", 2);
 ye([
   a({ type: String })
-], ct.prototype, "label", 2);
+], pt.prototype, "label", 2);
 ye([
   a({ attribute: "spinner-align", type: String })
-], ct.prototype, "spinnerAlign", 2);
+], pt.prototype, "spinnerAlign", 2);
 ye([
   a({ type: Boolean })
-], ct.prototype, "disabled", 2);
+], pt.prototype, "disabled", 2);
 ye([
   a({ type: Boolean })
-], ct.prototype, "loading", 2);
+], pt.prototype, "loading", 2);
 ye([
   a({ type: String })
-], ct.prototype, "event", 2);
+], pt.prototype, "event", 2);
 ye([
   x()
-], ct.prototype, "_loading", 2);
-ct = ye([
+], pt.prototype, "_loading", 2);
+pt = ye([
   u("sb-passkey-button")
-], ct);
+], pt);
 const qm = {
   apple: "Apple",
   discord: "Discord",
@@ -23874,7 +23790,7 @@ var Hm = Object.defineProperty, Gm = Object.getOwnPropertyDescriptor, Kt = (t, e
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Hm(e, r, s), s;
 };
-let dt = class extends v {
+let ht = class extends v {
   constructor() {
     super(...arguments), this.seed = Nt(), this.content = "icon-label", this.variant = "outline", this.size = "default", this.prompt = "Use", this.iconAlign = "start", this._loading = !1, this._handleClick = () => {
       this.disabled || this.isLoading || (this._loading = !0, this._dispatchClick(), this._emitClickEvent());
@@ -23904,14 +23820,14 @@ let dt = class extends v {
    * derived from the component's part name, `seed`, and `provider`.
    */
   get rootId() {
-    return this.childId ?? `sb-${dt.parts.root}-${this.provider}-${this.seed}`;
+    return this.childId ?? `sb-${ht.parts.root}-${this.provider}-${this.seed}`;
   }
   /**
    * The `id` of the icon (logo and spinner) element, derived from `rootId` with
    * the icon part name appended.
    */
   get iconId() {
-    return `${this.rootId}-${dt._ICON}`;
+    return `${this.rootId}-${ht._ICON}`;
   }
   /**
    * The `class` given to the icon part handling button alignment.
@@ -23941,7 +23857,7 @@ let dt = class extends v {
    * Defines and dispatches the click event.
    */
   _dispatchClick() {
-    const t = new CustomEvent(dt.clickEventName, {
+    const t = new CustomEvent(ht.clickEventName, {
       detail: { id: this.rootId, provider: this.provider, event: this.event },
       bubbles: !0,
       composed: !0
@@ -23955,7 +23871,7 @@ let dt = class extends v {
     if (this.event) {
       this._loading || (this._loading = !0);
       try {
-        await St.processLoginflowEvent({ event: this.event });
+        await Ct.processLoginflowEvent({ event: this.event });
       } finally {
         this._loading = !1;
       }
@@ -23968,7 +23884,7 @@ let dt = class extends v {
     return d`
       <svg
         id="${this.iconId}"
-        part="${dt.parts.icon}"
+        part="${ht.parts.icon}"
         data-icon="logo"
         data-provider="${this.provider}"
         xmlns="http://www.w3.org/2000/svg"
@@ -23987,7 +23903,7 @@ let dt = class extends v {
     return d`
       <rtg-spinner
         id="${this.iconId}"
-        part="${dt.parts.icon}"
+        part="${ht.parts.icon}"
         data-icon="spinner"
         class="${this.iconCn}"
       ></rtg-spinner>
@@ -24005,7 +23921,7 @@ let dt = class extends v {
     return d`
       <rtg-button
         id="${this.rootId}"
-        part="${dt.parts.root}"
+        part="${ht.parts.root}"
         data-provider="${this.provider}"
         data-content="${this.content}"
         data-event="${this.event}"
@@ -24022,50 +23938,50 @@ let dt = class extends v {
     `;
   }
 };
-dt._ROOT = "provider-button";
-dt._ICON = "icon";
+ht._ROOT = "provider-button";
+ht._ICON = "icon";
 Kt([
   a({ type: String })
-], dt.prototype, "seed", 2);
+], ht.prototype, "seed", 2);
 Kt([
   a({ attribute: "child-id", type: String })
-], dt.prototype, "childId", 2);
+], ht.prototype, "childId", 2);
 Kt([
   a({ type: String })
-], dt.prototype, "provider", 2);
+], ht.prototype, "provider", 2);
 Kt([
   a({ type: String })
-], dt.prototype, "content", 2);
+], ht.prototype, "content", 2);
 Kt([
   a({ type: String })
-], dt.prototype, "variant", 2);
+], ht.prototype, "variant", 2);
 Kt([
   a({ type: String })
-], dt.prototype, "size", 2);
+], ht.prototype, "size", 2);
 Kt([
   a({ type: String })
-], dt.prototype, "prompt", 2);
+], ht.prototype, "prompt", 2);
 Kt([
   a({ attribute: "icon-align", type: String })
-], dt.prototype, "iconAlign", 2);
+], ht.prototype, "iconAlign", 2);
 Kt([
   a({ type: String })
-], dt.prototype, "label", 2);
+], ht.prototype, "label", 2);
 Kt([
   a({ type: Boolean })
-], dt.prototype, "disabled", 2);
+], ht.prototype, "disabled", 2);
 Kt([
   a({ type: Boolean })
-], dt.prototype, "loading", 2);
+], ht.prototype, "loading", 2);
 Kt([
   a({ type: String })
-], dt.prototype, "event", 2);
+], ht.prototype, "event", 2);
 Kt([
   x()
-], dt.prototype, "_loading", 2);
-dt = Kt([
+], ht.prototype, "_loading", 2);
+ht = Kt([
   u("sb-provider-button")
-], dt);
+], ht);
 var Km = Object.defineProperty, Wm = Object.getOwnPropertyDescriptor, Wt = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? Wm(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
@@ -25409,7 +25325,7 @@ let sr = class extends v {
     `;
   }
   render() {
-    var y, w, E, C, S, k, T, I, z, J, Y, nt, gt, jt;
+    var y, w, E, C, S, k, T, A, z, J, Y, at, gt, jt;
     const t = [
       { label: "Username", value: this.personal.username },
       { label: "First name", value: this.personal.first },
@@ -25427,7 +25343,7 @@ let sr = class extends v {
     ), h = O(
       zo,
       {},
-      (J = (z = (I = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : I.userProfileCard) == null ? void 0 : z.header) == null ? void 0 : J.title,
+      (J = (z = (A = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : A.userProfileCard) == null ? void 0 : z.header) == null ? void 0 : J.title,
       F.USER_PROFILE_CARD_HEADER_CONTAINER,
       this.customizations
     ), p = this.getLabelStyles(), b = this.isEditing ? r : e;
@@ -25445,7 +25361,7 @@ let sr = class extends v {
             customClass=${h.class}
             customStyle=${R(h.style)}
           >
-            ${(Y = this.content) != null && Y.icon ? (nt = this.content) == null ? void 0 : nt.icon : gb()}
+            ${(Y = this.content) != null && Y.icon ? (at = this.content) == null ? void 0 : at.icon : gb()}
 
             <span>
               ${(gt = this.content) != null && gt.title ? (jt = this.content) == null ? void 0 : jt.title : "Personal Info"}
@@ -25629,7 +25545,7 @@ let or = class extends v {
     `;
   }
   render() {
-    var y, w, E, C, S, k, T, I, z, J, Y, nt;
+    var y, w, E, C, S, k, T, A, z, J, Y, at;
     const t = [
       { label: "Location", value: this.locationInfo.location },
       { label: "Zone Info", value: this.locationInfo.zoneInfo }
@@ -25642,7 +25558,7 @@ let or = class extends v {
     ), h = O(
       zo,
       {},
-      (J = (z = (I = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : I.userProfileCard) == null ? void 0 : z.header) == null ? void 0 : J.title,
+      (J = (z = (A = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : A.userProfileCard) == null ? void 0 : z.header) == null ? void 0 : J.title,
       F.USER_PROFILE_CARD_HEADER_CONTAINER,
       this.customizations
     ), p = this.getLabelStyles(), b = this.isEditing ? r : e;
@@ -25662,7 +25578,7 @@ let or = class extends v {
           >
             ${(Y = this.content) != null && Y.icon ? this.content.icon : mb()}
             <span>
-              ${(nt = this.content) != null && nt.title ? this.content.title : "Location"}
+              ${(at = this.content) != null && at.title ? this.content.title : "Location"}
             </span>
           </rtg-card-title>
           ${this.isEditing ? null : d`
@@ -25845,7 +25761,7 @@ let nr = class extends v {
     `;
   }
   render() {
-    var y, w, E, C, S, k, T, I, z, J, Y, nt;
+    var y, w, E, C, S, k, T, A, z, J, Y, at;
     const t = [{ label: "Website", value: this.URLsInfo.website }], e = this.getContainerStyles(!1), r = this.getContainerStyles(!0), { defaultMapped: i, outlineMapped: s, ghostMapped: o } = this.getButtonStyles(), n = O(
       No,
       {},
@@ -25855,7 +25771,7 @@ let nr = class extends v {
     ), h = O(
       zo,
       {},
-      (J = (z = (I = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : I.userProfileCard) == null ? void 0 : z.header) == null ? void 0 : J.title,
+      (J = (z = (A = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : A.userProfileCard) == null ? void 0 : z.header) == null ? void 0 : J.title,
       F.USER_PROFILE_CARD_HEADER_CONTAINER,
       this.customizations
     ), p = this.getLabelStyles(), b = this.isEditing ? r : e;
@@ -25874,7 +25790,7 @@ let nr = class extends v {
             customStyle=${R(h.style)}
           >
             ${(Y = this.content) != null && Y.icon ? this.content.icon : bb()}
-            <span>${((nt = this.content) == null ? void 0 : nt.title) ?? "URLs"}</span>
+            <span>${((at = this.content) == null ? void 0 : at.title) ?? "URLs"}</span>
           </rtg-card-title>
 
           ${this.isEditing ? null : d`
@@ -25945,7 +25861,7 @@ var Rb = Object.defineProperty, Ob = Object.getOwnPropertyDescriptor, Tt = (t, e
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Rb(e, r, s), s;
 };
-let Et = class extends v {
+let Rt = class extends v {
   constructor() {
     super(...arguments), this.showAvatarMenu = !1, this.customizations = null, this.showIcons = !0, this.orientation = pe.HORIZONTAL, this.sidebarDisplayType = ne.REGULAR, this.mode = er == null ? void 0 : er.PAGE, this.widgetsLayout = Gt.ROW, this.content = null;
   }
@@ -25993,55 +25909,55 @@ let Et = class extends v {
 };
 Tt([
   a({ type: Object })
-], Et.prototype, "account", 2);
+], Rt.prototype, "account", 2);
 Tt([
   a({ type: Object })
-], Et.prototype, "personal", 2);
+], Rt.prototype, "personal", 2);
 Tt([
   a({ type: Object })
-], Et.prototype, "location", 2);
+], Rt.prototype, "location", 2);
 Tt([
   a({ type: Object })
-], Et.prototype, "urls", 2);
+], Rt.prototype, "urls", 2);
 Tt([
   a({ type: Boolean })
-], Et.prototype, "showAvatarMenu", 2);
+], Rt.prototype, "showAvatarMenu", 2);
 Tt([
   a({ type: Object })
-], Et.prototype, "customizations", 2);
+], Rt.prototype, "customizations", 2);
 Tt([
   a({ type: Boolean })
-], Et.prototype, "showIcons", 2);
+], Rt.prototype, "showIcons", 2);
 Tt([
   a({ attribute: !1 })
-], Et.prototype, "modalIcon", 2);
+], Rt.prototype, "modalIcon", 2);
 Tt([
   a({ type: String })
-], Et.prototype, "orientation", 2);
+], Rt.prototype, "orientation", 2);
 Tt([
   a({ type: String })
-], Et.prototype, "sidebarDisplayType", 2);
+], Rt.prototype, "sidebarDisplayType", 2);
 Tt([
   a({ type: String })
-], Et.prototype, "mode", 2);
+], Rt.prototype, "mode", 2);
 Tt([
   a({ type: String })
-], Et.prototype, "widgetsLayout", 2);
+], Rt.prototype, "widgetsLayout", 2);
 Tt([
   a({ type: Function })
-], Et.prototype, "toggleAvatarMenu", 2);
+], Rt.prototype, "toggleAvatarMenu", 2);
 Tt([
   a({ type: Function })
-], Et.prototype, "onAvatarChange", 2);
+], Rt.prototype, "onAvatarChange", 2);
 Tt([
   a({ type: Function })
-], Et.prototype, "onAvatarRemove", 2);
+], Rt.prototype, "onAvatarRemove", 2);
 Tt([
   a({ type: Object })
-], Et.prototype, "content", 2);
-Et = Tt([
+], Rt.prototype, "content", 2);
+Rt = Tt([
   u("sb-profile")
-], Et);
+], Rt);
 const Ib = "!sb-bg-background", gc = {
   vertical: "sb-justify-between sb-w-full",
   horizontal: "sb-flex-col !sb-items-start sb-mx-4 md:sb-ml-6"
@@ -26489,7 +26405,7 @@ let os = class extends v {
   }
   async waitForAuthConfigured(t = 5e3) {
     var i;
-    const e = St ?? ((i = window.__saasbaseCoreSdk) == null ? void 0 : i.Auth);
+    const e = Ct ?? ((i = window.__saasbaseCoreSdk) == null ? void 0 : i.Auth);
     if (!e || e.__configured) return;
     const r = e.__whenConfigured;
     r && await Promise.race([
@@ -26502,7 +26418,7 @@ let os = class extends v {
     if (super.connectedCallback(), !this.__flowInitAttempted && (this.__flowInitAttempted = !0, await this.waitForAuthConfigured(), !this.__flowStarted)) {
       this.__flowStarted = !0;
       try {
-        const e = await St.startLoginflow("signin-flow-passkey");
+        const e = await Ct.startLoginflow("signin-flow-passkey");
         console.log(
           e.isResumed ? "Resumed login flow" : "Started new login flow"
         );
@@ -26510,14 +26426,14 @@ let os = class extends v {
         if (console.error("Sign-in flow init failed:", e), e && typeof e.message == "string" && e.message.includes("Auth.configure() must be called")) {
           this.__saasbaseFailedForConfig = !0;
           try {
-            const r = St ?? ((t = window.__saasbaseCoreSdk) == null ? void 0 : t.Auth), i = r == null ? void 0 : r.__whenConfigured;
+            const r = Ct ?? ((t = window.__saasbaseCoreSdk) == null ? void 0 : t.Auth), i = r == null ? void 0 : r.__whenConfigured;
             if (i) {
               await Promise.race([
                 i,
                 new Promise((s) => setTimeout(s, 1e4))
               ]);
               try {
-                const s = await St.startLoginflow("signin-flow-passkey");
+                const s = await Ct.startLoginflow("signin-flow-passkey");
                 console.log(
                   s.isResumed ? "Resumed login flow" : "Started new login flow"
                 );
@@ -26589,7 +26505,7 @@ let ns = class extends v {
   }
   async waitForAuthConfigured(t = 5e3) {
     var i;
-    const e = St ?? ((i = window.__saasbaseCoreSdk) == null ? void 0 : i.Auth);
+    const e = Ct ?? ((i = window.__saasbaseCoreSdk) == null ? void 0 : i.Auth);
     if (!e || e.__configured) return;
     const r = e.__whenConfigured;
     r && await Promise.race([
@@ -26602,7 +26518,7 @@ let ns = class extends v {
     if (super.connectedCallback(), !this.__flowInitAttempted && (this.__flowInitAttempted = !0, await this.waitForAuthConfigured(), !this.__flowStarted)) {
       this.__flowStarted = !0;
       try {
-        const e = await St.startLoginflow("signup-flow");
+        const e = await Ct.startLoginflow("signup-flow");
         console.log(
           e.isResumed ? "Resumed signup flow" : "Started new signup flow"
         );
@@ -26610,14 +26526,14 @@ let ns = class extends v {
         if (console.error("Sign-up flow init failed:", e), e && typeof e.message == "string" && e.message.includes("Auth.configure() must be called")) {
           this.__saasbaseFailedForConfig = !0;
           try {
-            const r = St ?? ((t = window.__saasbaseCoreSdk) == null ? void 0 : t.Auth), i = r == null ? void 0 : r.__whenConfigured;
+            const r = Ct ?? ((t = window.__saasbaseCoreSdk) == null ? void 0 : t.Auth), i = r == null ? void 0 : r.__whenConfigured;
             if (i) {
               await Promise.race([
                 i,
                 new Promise((s) => setTimeout(s, 1e4))
               ]);
               try {
-                const s = await St.startLoginflow("signup-flow");
+                const s = await Ct.startLoginflow("signup-flow");
                 console.log(
                   s.isResumed ? "Resumed signup flow" : "Started new signup flow"
                 );
@@ -26787,7 +26703,7 @@ let je = class extends v {
   // --- everything else stays the same ---
   animateHeight() {
     var h, p;
-    const e = (((p = (h = this.customizations) == null ? void 0 : h.config) == null ? void 0 : p.breakpoints) ?? kt).sm, r = e ? parseInt(e.toString().replace(/\D/g, ""), 10) : 640;
+    const e = (((p = (h = this.customizations) == null ? void 0 : h.config) == null ? void 0 : p.breakpoints) ?? Ot).sm, r = e ? parseInt(e.toString().replace(/\D/g, ""), 10) : 640;
     if (window.innerWidth <= r)
       return;
     const s = this.renderRoot.querySelector("#root-container");
@@ -26836,13 +26752,13 @@ let je = class extends v {
     var r, i;
     if (e.element_type === "html")
       try {
-        await St.processLoginflowEvent({ event: t, data: {} });
+        await Ct.processLoginflowEvent({ event: t, data: {} });
       } finally {
         this.eventEmitting = !1;
       }
     else if (e.element_type === "otp")
       try {
-        await St.processLoginflowEvent({
+        await Ct.processLoginflowEvent({
           event: t,
           data: this.formData
         });
@@ -26862,7 +26778,7 @@ let je = class extends v {
       )) ?? !1)) {
         this.loadingButtons = { ...this.loadingButtons, [e.id]: !0 }, this.eventEmitting = !0;
         try {
-          await St.processLoginflowEvent({
+          await Ct.processLoginflowEvent({
             event: t,
             data: this.formData
           });
@@ -26963,7 +26879,7 @@ let lr = class extends v {
     super.connectedCallback(), fg(), (async () => {
       for (; !this.env || !this.env.domain; )
         await new Promise((e) => setTimeout(e, 20));
-      St.configure({
+      Ct.configure({
         domain: this.env.domain,
         appId: this.env.appId,
         clientSecret: this.env.clientSecret ?? "",
@@ -26980,7 +26896,7 @@ let lr = class extends v {
   }
   updated(t) {
     var e;
-    super.updated(t), t.has("customizations") && (this.providedCustomizations = this.customizations), t.has("env") && (e = this.env) != null && e.domain && St.configure({
+    super.updated(t), t.has("customizations") && (this.providedCustomizations = this.customizations), t.has("env") && (e = this.env) != null && e.domain && Ct.configure({
       domain: this.env.domain,
       appId: this.env.appId,
       clientSecret: this.env.clientSecret ?? "",
@@ -27003,7 +26919,7 @@ let lr = class extends v {
     }
   }
   refreshAuthState() {
-    this.auth = { isAuthenticated: St.isAuthenticated() };
+    this.auth = { isAuthenticated: Ct.isAuthenticated() };
   }
 };
 ti([
@@ -27121,13 +27037,13 @@ as = Ko([
   u("sb-authenticated")
 ], as);
 function ff() {
-  return St;
+  return Ct;
 }
 export {
   De as BaseElement,
   no as LinearLoader,
   ss as PreviewComponent,
-  Et as Profile,
+  Rt as Profile,
   je as SaasBaseLayout,
   At as SbAccountInfo,
   as as SbAuthenticated,
@@ -27140,11 +27056,11 @@ export {
   Ji as SbCountdownRenderer,
   so as SbDividerRenderer,
   D as SbEmailField,
-  $t as SbError,
+  St as SbError,
   lo as SbErrorRenderer,
   yt as SbForm,
   ir as SbFormSeparator,
-  at as SbFormSubmit,
+  lt as SbFormSubmit,
   Z as SbFormSwitch,
   es as SbGap,
   ho as SbGapRenderer,
@@ -27158,15 +27074,15 @@ export {
   or as SbLocationInfo,
   rs as SbLogo,
   ts as SbLogoRenderer,
-  P as SbNameField,
+  L as SbNameField,
   be as SbOtp,
   ao as SbOtpRenderer,
-  ct as SbPasskeyButton,
-  A as SbPasswordField,
+  pt as SbPasskeyButton,
+  I as SbPasswordField,
   sr as SbPersonalInfo,
   U as SbPhoneField,
   lr as SbProvider,
-  dt as SbProviderButton,
+  ht as SbProviderButton,
   wt as SbProviderField,
   os as SbSignIn,
   ns as SbSignUp,
@@ -27177,7 +27093,7 @@ export {
   yo as SbTitle,
   nr as SbUrlsInfo,
   we as SbUserProfile,
-  N as SbUsernameField,
+  P as SbUsernameField,
   qt as SbWatermark,
   go as SbWatermarkRenderer,
   ia as SignedIn,