@authhero/widget 0.37.0 → 0.38.0

package/dist/esm/authhero-node.entry.js

@@ -236,7 +236,184 @@ function getCountryByCode(code) {
         countries.find((c) => c.code === "US"));
 }
 
-const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:var(--ah-font-size-label, 16px);font-weight:var(--ah-font-weight-label, 400);color:var(--ah-color-text-muted, #65676e);pointer-events:none;transition:all 0.15s ease-out;background-color:transparent;padding:0;z-index:1}.input-label.floating,.input-field:focus+.input-label,.input-field:not(:placeholder-shown)+.input-label,select.input-field+.input-label,input[type="date"].input-field+.input-label{top:-8px;transform:translateY(0);font-size:12px;background-color:var(--ah-color-bg, #ffffff);padding:0 4px;left:12px;color:var(--ah-color-text-muted, #65676e)}.input-field:focus+.input-label{color:var(--ah-color-primary, #635dff)}.required{color:var(--ah-color-error, #d03c38);margin-left:2px}.input-field{width:100%;padding:16px;font-size:16px;font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid     var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out;box-sizing:border-box}.input-field::placeholder{color:transparent}.input-field:hover{border-color:var(--ah-color-border-hover, #65676e)}.input-field:focus{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.input-field.has-error{border-color:var(--ah-color-error, #d03c38)}.input-field.has-error:focus{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3);cursor:not-allowed;opacity:0.7}.password-container{position:relative;display:flex;align-items:center}.password-container .input-field{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--ah-color-icon, var(--ah-color-text-muted, #65676e));transition:color 0.15s ease}.password-toggle:hover{color:var(--ah-color-icon, var(--ah-color-text, #1e212a))}.password-toggle svg{width:20px;height:20px}.error-text{font-size:12px;color:var(--ah-color-error, #d03c38);margin-top:4px;line-height:1.4}.helper-text{font-size:12px;color:var(--ah-color-text-muted, #65676e);margin-top:4px;line-height:1.4}.field-link{display:block;text-align:left;margin-top:8px;margin-bottom:16px}.field-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);font-weight:var(--ah-font-weight-link, 400)}.field-link a:hover{text-decoration:underline}.checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:16px}.checkbox-wrapper input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--ah-color-primary, #635dff);cursor:pointer;flex-shrink:0}.checkbox-label{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a);line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;font-size:var(--ah-font-size-btn, 16px);font-weight:var(--ah-font-weight-btn, 400);font-family:inherit;line-height:1.25;text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 3px);cursor:pointer;transition:background-color 0.15s ease,     border-color 0.15s ease,     transform 0.1s ease;box-sizing:border-box}.btn:disabled{opacity:0.6;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(0.98)}.btn:focus-visible{outline:2px solid     var(--ah-color-focus-ring, var(--ah-color-primary, #635dff));outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #635dff);color:var(--ah-color-text-on-primary, #ffffff);margin-top:12px}.btn-primary:not(:disabled):hover{background-color:var(     --ah-color-primary-hover,     color-mix(in srgb, var(--ah-color-primary, #635dff) 85%, black)   )}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-btn-secondary-text, var(--ah-color-text, #1e212a));border:var(--ah-btn-border-width, 1px) solid     var(--ah-btn-secondary-border, var(--ah-color-border, #c9cace))}.btn-secondary:not(:disabled):hover{background-color:var(--ah-color-bg-hover, #f5f5f5);border-color:var(--ah-color-border-hover, #65676e)}.btn-link{background:none;border:none;color:var(--ah-color-link, #635dff);padding:8px 0;font-weight:var(--ah-font-weight-link, 400);text-decoration:none}.btn-link:hover{text-decoration:underline}.phone-input-wrapper{display:flex;align-items:stretch;gap:0;width:100%}.country-select{flex-shrink:0;width:auto;padding:12px 8px;font-size:var(--ah-font-size-body, 16px);font-family:var(--ah-font-family, inherit);border:var(--ah-input-border-width, 1px) solid     var(--ah-color-border, #c9cace);border-right:none;border-radius:var(--ah-input-radius, 4px) 0 0 var(--ah-input-radius, 4px);background-color:var(--ah-color-input-bg, var(--ah-color-surface, #fff));color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}.country-select:focus{outline:none;border-color:var(--ah-color-primary, #635dff);box-shadow:0 0 0 1px var(--ah-color-primary, #635dff)}.country-select:disabled{opacity:0.5;cursor:not-allowed}.phone-input-wrapper .input-container{flex:1;min-width:0}.phone-input-wrapper .input-field{border-radius:0 var(--ah-input-radius, 4px) var(--ah-input-radius, 4px) 0}.phone-input-wrapper .input-label.floating,.phone-input-wrapper .input-field:focus+.input-label,.phone-input-wrapper .input-field:not(:placeholder-shown)+.input-label{left:8px}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px;position:relative}.btn-social-badge{position:absolute;right:12px;top:0;transform:translateY(-50%);font-size:11px;font-weight:500;line-height:1;padding:4px 9px;border-radius:999px;background:var(--ah-color-last-used, var(--ah-color-primary, #635dff));color:var(--ah-color-last-used-text, var(--ah-color-text-on-primary, #fff));white-space:nowrap;pointer-events:none}.btn-social.btn-social-last-used{border-color:var(--ah-color-last-used, var(--ah-color-primary, #635dff));box-shadow:inset 0 0 0 1px     var(--ah-color-last-used, var(--ah-color-primary, #635dff))}.input-badge{position:absolute;right:12px;top:0;transform:translateY(-50%);font-size:11px;font-weight:500;line-height:1;padding:4px 9px;border-radius:999px;background:var(--ah-color-last-used, var(--ah-color-primary, #635dff));color:var(--ah-color-last-used-text, var(--ah-color-text-on-primary, #fff));white-space:nowrap;pointer-events:none;z-index:2}.btn-social-content{display:flex;flex-direction:column;align-items:center;text-align:center}.btn-social-subtitle{font-size:12px;font-style:italic;opacity:0.8;margin-top:2px}.btn-social-subtitle:empty{display:none}.social-icon{width:20px;height:20px;flex-shrink:0}@media (max-width: 480px){.social-buttons:has(.btn-social:nth-child(3)){flex-direction:row;flex-wrap:nowrap;justify-content:stretch;gap:8px}.social-buttons:has(.btn-social:nth-child(3)) .btn-social{width:auto;min-width:0;padding:12px;flex:1 1 0}.social-buttons:has(.btn-social:nth-child(3)) .btn-social span{display:none}.social-buttons:has(.btn-social:nth-child(3)) .social-icon{width:24px;height:24px}}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-icon img{width:100%;height:100%;object-fit:contain}.text-title{font-size:var(--ah-font-size-title, 20px);font-weight:var(--ah-font-weight-title, 400);color:var(--ah-color-text-header, var(--ah-color-header, #1e212a));margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:var(--ah-font-size-subtitle, 14px);font-weight:var(--ah-font-weight-subtitle, 400);color:var(--ah-color-text-muted, #65676e);margin:4px 0;line-height:1.5}.image{display:block;max-width:100%;height:auto;border-radius:4px}.image-centered{margin:0 auto 16px;width:52px;height:52px;object-fit:contain}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.node-error{padding:12px 16px;background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38);border-radius:0;font-size:14px;margin-bottom:16px}.node-success{padding:12px 16px;background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769);border-radius:0;font-size:14px;margin-bottom:16px}.divider{display:flex;align-items:center;text-align:center;margin:16px 0}.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0.5px}.rich-text{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);line-height:1.5;color:var(--ah-color-text, #1e212a)}.rich-text a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);transition:color 0.15s ease}.rich-text a:hover{text-decoration:underline}.rich-text .terms-text{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.rich-text .terms-text a{font-size:12px}.rich-text .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .passwordless-link{margin-top:16px;text-align:center;font-size:14px}.rich-text .passwordless-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none)}.rich-text .passwordless-link a:hover{text-decoration:underline}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}.code-field{position:relative}.code-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:none;background:transparent;color:transparent;caret-color:transparent;font-family:inherit;letter-spacing:0;outline:none;cursor:text;-webkit-text-fill-color:transparent}.code-boxes{display:flex;align-items:center;gap:var(--ah-code-group-gap, 12px);justify-content:center}.code-group{display:flex;gap:0}.code-separator{color:var(--ah-color-text-muted, #65676e);font-size:var(--ah-code-font-size, 24px);user-select:none}.code-box-placeholder{color:var(--ah-color-text-muted, #65676e);opacity:0.4}.code-box{position:relative;flex:0 0 auto;width:var(--ah-code-box-width, 48px);height:var(--ah-code-box-height, 56px);display:flex;align-items:center;justify-content:center;font-size:var(--ah-code-font-size, 24px);font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid     var(--ah-color-border, #c9cace);border-radius:0;transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out;box-sizing:border-box}.code-box+.code-box{margin-left:calc(-1 * var(--ah-input-border-width, 1px))}.code-group .code-box:first-child{border-top-left-radius:var(--ah-input-radius, 3px);border-bottom-left-radius:var(--ah-input-radius, 3px)}.code-group .code-box:last-child{border-top-right-radius:var(--ah-input-radius, 3px);border-bottom-right-radius:var(--ah-input-radius, 3px)}.code-field:focus-within .code-box.is-active{z-index:1;border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.code-field.has-error .code-box{border-color:var(--ah-color-error, #d03c38)}.code-input:disabled{cursor:not-allowed}.code-input:disabled~.code-boxes .code-box{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3)}`;
+/**
+ * Locale-aware layout for the segmented DATE input.
+ *
+ * The segment order is resolved from a static table rather than from
+ * `Intl.DateTimeFormat`, deliberately: the widget is server-rendered and then
+ * hydrated in the browser, and the two runtimes do not ship the same ICU data
+ * (a Workers runtime commonly falls back to en-US ordering). A static table
+ * gives the server and the client the same answer, so the hydrated DOM matches
+ * the rendered one.
+ */
+/** Languages that write dates big-endian: year, month, day. */
+const YEAR_FIRST_LANGUAGES = new Set([
+    "bo",
+    "dz",
+    "hu",
+    "ja",
+    "ko",
+    "lt",
+    "mn",
+    "sv",
+    "ug",
+    "zh",
+]);
+/**
+ * Regions that write month before day. Month-first is essentially a US
+ * convention plus the places that adopted it.
+ */
+const MONTH_FIRST_REGIONS = new Set(["us", "ph", "fm", "mh", "pw", "as", "gu"]);
+/**
+ * Locales whose language is normally year-first but which write dates
+ * day-first in a particular region — Finland-Swedish is d.m.yyyy, unlike
+ * Sweden-Swedish.
+ */
+const DAY_FIRST_TAGS = new Set(["sv-fi"]);
+const DEFAULT_TOKENS = {
+    day: "DD",
+    month: "MM",
+    year: "YYYY",
+};
+/**
+ * Split a BCP-47 tag into a lowercase language subtag and, when present, a
+ * two-letter region subtag. Script and variant subtags are ignored.
+ */
+function parseTag(locale) {
+    const tag = (locale || "").toLowerCase().replace(/_/g, "-");
+    const parts = tag.split("-").filter(Boolean);
+    const language = parts[0] || "";
+    const region = parts.slice(1).find((part) => /^[a-z]{2}$/.test(part));
+    return { language, region };
+}
+/**
+ * Resolve the segment order for a locale. Falls back to day-month-year, which
+ * is what most of the world writes.
+ */
+function getDateOrder(locale) {
+    const { language, region } = parseTag(locale);
+    if (region && MONTH_FIRST_REGIONS.has(region)) {
+        return ["month", "day", "year"];
+    }
+    if (region && DAY_FIRST_TAGS.has(`${language}-${region}`)) {
+        return ["day", "month", "year"];
+    }
+    if (YEAR_FIRST_LANGUAGES.has(language)) {
+        return ["year", "month", "day"];
+    }
+    // A bare "en" carries no region — treat it the way Intl does and assume
+    // en-US. Regional English (en-gb, en-au, …) falls through to day-first.
+    if (language === "en" && !region) {
+        return ["month", "day", "year"];
+    }
+    return ["day", "month", "year"];
+}
+/**
+ * Parse an explicit format string from the component config, e.g.
+ * "DD/MM/YYYY" or "YYYY-MM-DD". Returns null when the string does not name
+ * all three segments.
+ */
+function parseFormat(format) {
+    const matches = format.match(/y+|m+|d+/gi);
+    if (!matches)
+        return null;
+    const order = [];
+    const tokens = { ...DEFAULT_TOKENS };
+    for (const match of matches) {
+        const initial = match[0].toLowerCase();
+        const segment = initial === "y" ? "year" : initial === "m" ? "month" : "day";
+        if (order.includes(segment))
+            continue;
+        order.push(segment);
+        // A "YY" format still collects a four-digit year — the segment holds four
+        // characters and `toIsoDate` rejects anything shorter, with a two-digit
+        // entry expanded on blur. Showing "YY" as the placeholder would promise an
+        // input the field does not accept, so short year tokens are widened.
+        tokens[segment] =
+            segment === "year" && match.length < 4 ? DEFAULT_TOKENS.year : match;
+    }
+    if (order.length !== 3)
+        return null;
+    const separator = format.match(/[^a-z\s]/i)?.[0] ?? "/";
+    return { order, tokens, separator };
+}
+/**
+ * Resolve the full layout for a DATE field. An explicit `config.format` wins;
+ * otherwise the locale decides the order.
+ */
+function getDateLayout(format, locale) {
+    if (format) {
+        const parsed = parseFormat(format);
+        if (parsed)
+            return parsed;
+    }
+    const order = getDateOrder(locale);
+    return {
+        order,
+        tokens: DEFAULT_TOKENS,
+        separator: order[0] === "year" ? "-" : "/",
+    };
+}
+/** Number of days in a given month, honouring leap years. */
+function daysInMonth(year, month) {
+    if (month < 1 || month > 12)
+        return 0;
+    return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+/** Split an ISO "YYYY-MM-DD" value into its segments. */
+function parseIsoDate(value) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec((value || "").trim());
+    if (!match)
+        return null;
+    return { year: match[1], month: match[2], day: match[3] };
+}
+/**
+ * Build an ISO "YYYY-MM-DD" string from segment values. Returns "" unless all
+ * three segments are complete and form a real calendar date — a half-filled or
+ * impossible date (31 February) is not a value worth submitting.
+ */
+function toIsoDate(segments) {
+    const { year, month, day } = segments;
+    if (year.length !== 4 || month.length === 0 || day.length === 0)
+        return "";
+    const y = Number(year);
+    const m = Number(month);
+    const d = Number(day);
+    if (!Number.isInteger(y) || !Number.isInteger(m) || !Number.isInteger(d)) {
+        return "";
+    }
+    if (m < 1 || m > 12)
+        return "";
+    if (d < 1 || d > daysInMonth(y, m))
+        return "";
+    return `${String(y).padStart(4, "0")}-${String(m).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+}
+/**
+ * Expand a two-digit year into the most recent matching year at or before
+ * `anchorYear` — "85" becomes 1985, "05" becomes 2005. Anything that is not
+ * exactly two digits is returned unchanged, so a fully typed year is never
+ * second-guessed.
+ */
+function expandTwoDigitYear(year, anchorYear) {
+    if (!/^\d{2}$/.test(year))
+        return year;
+    const century = Math.floor(anchorYear / 100) * 100;
+    const candidate = century + Number(year);
+    return String(candidate > anchorYear ? candidate - 100 : candidate);
+}
+/**
+ * The latest year a two-digit entry may expand to. `config.max` pins it when
+ * the field has an upper bound; otherwise we assume a date in the past (the
+ * birthdate case) and anchor on the current year.
+ */
+function resolveYearAnchor(max, today) {
+    const parsed = parseIsoDate(max);
+    if (parsed)
+        return Number(parsed.year);
+    return today.getUTCFullYear();
+}
+
+const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:var(--ah-font-size-label, 16px);font-weight:var(--ah-font-weight-label, 400);color:var(--ah-color-text-muted, #65676e);pointer-events:none;transition:all 0.15s ease-out;background-color:transparent;padding:0;z-index:1}.input-label.floating,.input-field:focus+.input-label,.input-field:not(:placeholder-shown)+.input-label,select.input-field+.input-label,input[type="date"].input-field+.input-label{top:-8px;transform:translateY(0);font-size:12px;background-color:var(--ah-color-bg, #ffffff);padding:0 4px;left:12px;color:var(--ah-color-text-muted, #65676e)}.input-field:focus+.input-label{color:var(--ah-color-primary, #635dff)}.required{color:var(--ah-color-error, #d03c38);margin-left:2px}.input-field{width:100%;padding:16px;font-size:16px;font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid     var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out;box-sizing:border-box}.input-field::placeholder{color:transparent}.input-field:hover{border-color:var(--ah-color-border-hover, #65676e)}.input-field:focus{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.input-field.has-error{border-color:var(--ah-color-error, #d03c38)}.input-field.has-error:focus{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3);cursor:not-allowed;opacity:0.7}.password-container{position:relative;display:flex;align-items:center}.password-container .input-field{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--ah-color-icon, var(--ah-color-text-muted, #65676e));transition:color 0.15s ease}.password-toggle:hover{color:var(--ah-color-icon, var(--ah-color-text, #1e212a))}.password-toggle svg{width:20px;height:20px}.error-text{font-size:12px;color:var(--ah-color-error, #d03c38);margin-top:4px;line-height:1.4}.helper-text{font-size:12px;color:var(--ah-color-text-muted, #65676e);margin-top:4px;line-height:1.4}.field-link{display:block;text-align:left;margin-top:8px;margin-bottom:16px}.field-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);font-weight:var(--ah-font-weight-link, 400)}.field-link a:hover{text-decoration:underline}.checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:16px}.checkbox-wrapper input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--ah-color-primary, #635dff);cursor:pointer;flex-shrink:0}.checkbox-label{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a);line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;font-size:var(--ah-font-size-btn, 16px);font-weight:var(--ah-font-weight-btn, 400);font-family:inherit;line-height:1.25;text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 3px);cursor:pointer;transition:background-color 0.15s ease,     border-color 0.15s ease,     transform 0.1s ease;box-sizing:border-box}.btn:disabled{opacity:0.6;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(0.98)}.btn:focus-visible{outline:2px solid     var(--ah-color-focus-ring, var(--ah-color-primary, #635dff));outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #635dff);color:var(--ah-color-text-on-primary, #ffffff);margin-top:12px}.btn-primary:not(:disabled):hover{background-color:var(     --ah-color-primary-hover,     color-mix(in srgb, var(--ah-color-primary, #635dff) 85%, black)   )}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-btn-secondary-text, var(--ah-color-text, #1e212a));border:var(--ah-btn-border-width, 1px) solid     var(--ah-btn-secondary-border, var(--ah-color-border, #c9cace))}.btn-secondary:not(:disabled):hover{background-color:var(--ah-color-bg-hover, #f5f5f5);border-color:var(--ah-color-border-hover, #65676e)}.btn-link{background:none;border:none;color:var(--ah-color-link, #635dff);padding:8px 0;font-weight:var(--ah-font-weight-link, 400);text-decoration:none}.btn-link:hover{text-decoration:underline}.phone-input-wrapper{display:flex;align-items:stretch;gap:0;width:100%}.country-select{flex-shrink:0;width:auto;padding:12px 8px;font-size:var(--ah-font-size-body, 16px);font-family:var(--ah-font-family, inherit);border:var(--ah-input-border-width, 1px) solid     var(--ah-color-border, #c9cace);border-right:none;border-radius:var(--ah-input-radius, 4px) 0 0 var(--ah-input-radius, 4px);background-color:var(--ah-color-input-bg, var(--ah-color-surface, #fff));color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}.country-select:focus{outline:none;border-color:var(--ah-color-primary, #635dff);box-shadow:0 0 0 1px var(--ah-color-primary, #635dff)}.country-select:disabled{opacity:0.5;cursor:not-allowed}.phone-input-wrapper .input-container{flex:1;min-width:0}.phone-input-wrapper .input-field{border-radius:0 var(--ah-input-radius, 4px) var(--ah-input-radius, 4px) 0}.phone-input-wrapper .input-label.floating,.phone-input-wrapper .input-field:focus+.input-label,.phone-input-wrapper .input-field:not(:placeholder-shown)+.input-label{left:8px}.date-input{display:flex;align-items:center;width:100%;padding:16px;box-sizing:border-box;background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid     var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out}.date-input:hover{border-color:var(--ah-color-border-hover, #65676e)}.date-input:focus-within{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.date-input.has-error{border-color:var(--ah-color-error, #d03c38)}.date-input.has-error:focus-within{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}@media (forced-colors: active){.date-input:focus-within,.date-input.has-error:focus-within{outline:2px solid Highlight;outline-offset:1px}}.date-segment{width:3.25ch;min-width:0;padding:0;font-size:16px;font-family:inherit;text-align:center;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background:transparent;border:none;outline:none}.date-segment[data-date-segment="year"]{width:5.5ch}.date-segment::placeholder{color:var(--ah-color-text-muted, #65676e);opacity:1}.date-segment:disabled{color:var(--ah-color-text-disabled, #a0a0a0);cursor:not-allowed}.date-input:has(.date-segment:disabled){background-color:var(--ah-color-bg-disabled, #f5f5f5)}.date-separator{padding:0 4px;font-size:16px;color:var(--ah-color-text-muted, #65676e);user-select:none}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px;position:relative}.btn-social-badge{position:absolute;right:12px;top:0;transform:translateY(-50%);font-size:11px;font-weight:500;line-height:1;padding:4px 9px;border-radius:999px;background:var(--ah-color-last-used, var(--ah-color-primary, #635dff));color:var(--ah-color-last-used-text, var(--ah-color-text-on-primary, #fff));white-space:nowrap;pointer-events:none}.btn-social.btn-social-last-used{border-color:var(--ah-color-last-used, var(--ah-color-primary, #635dff));box-shadow:inset 0 0 0 1px     var(--ah-color-last-used, var(--ah-color-primary, #635dff))}.input-badge{position:absolute;right:12px;top:0;transform:translateY(-50%);font-size:11px;font-weight:500;line-height:1;padding:4px 9px;border-radius:999px;background:var(--ah-color-last-used, var(--ah-color-primary, #635dff));color:var(--ah-color-last-used-text, var(--ah-color-text-on-primary, #fff));white-space:nowrap;pointer-events:none;z-index:2}.btn-social-content{display:flex;flex-direction:column;align-items:center;text-align:center}.btn-social-subtitle{font-size:12px;font-style:italic;opacity:0.8;margin-top:2px}.btn-social-subtitle:empty{display:none}.social-icon{width:20px;height:20px;flex-shrink:0}@media (max-width: 480px){.social-buttons:has(.btn-social:nth-child(3)){flex-direction:row;flex-wrap:nowrap;justify-content:stretch;gap:8px}.social-buttons:has(.btn-social:nth-child(3)) .btn-social{width:auto;min-width:0;padding:12px;flex:1 1 0}.social-buttons:has(.btn-social:nth-child(3)) .btn-social span{display:none}.social-buttons:has(.btn-social:nth-child(3)) .social-icon{width:24px;height:24px}}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-icon img{width:100%;height:100%;object-fit:contain}.text-title{font-size:var(--ah-font-size-title, 20px);font-weight:var(--ah-font-weight-title, 400);color:var(--ah-color-text-header, var(--ah-color-header, #1e212a));margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:var(--ah-font-size-subtitle, 14px);font-weight:var(--ah-font-weight-subtitle, 400);color:var(--ah-color-text-muted, #65676e);margin:4px 0;line-height:1.5}.image{display:block;max-width:100%;height:auto;border-radius:4px}.image-centered{margin:0 auto 16px;width:52px;height:52px;object-fit:contain}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.node-error{padding:12px 16px;background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38);border-radius:0;font-size:14px;margin-bottom:16px}.node-success{padding:12px 16px;background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769);border-radius:0;font-size:14px;margin-bottom:16px}.divider{display:flex;align-items:center;text-align:center;margin:16px 0}.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0.5px}.rich-text{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);line-height:1.5;color:var(--ah-color-text, #1e212a)}.rich-text a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);transition:color 0.15s ease}.rich-text a:hover{text-decoration:underline}.rich-text .terms-text{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.rich-text .terms-text a{font-size:12px}.rich-text .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .passwordless-link{margin-top:16px;text-align:center;font-size:14px}.rich-text .passwordless-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none)}.rich-text .passwordless-link a:hover{text-decoration:underline}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}.code-field{position:relative}.code-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:none;background:transparent;color:transparent;caret-color:transparent;font-family:inherit;letter-spacing:0;outline:none;cursor:text;-webkit-text-fill-color:transparent}.code-boxes{display:flex;align-items:center;gap:var(--ah-code-group-gap, 12px);justify-content:center}.code-group{display:flex;gap:0}.code-separator{color:var(--ah-color-text-muted, #65676e);font-size:var(--ah-code-font-size, 24px);user-select:none}.code-box-placeholder{color:var(--ah-color-text-muted, #65676e);opacity:0.4}.code-box{position:relative;flex:0 0 auto;width:var(--ah-code-box-width, 48px);height:var(--ah-code-box-height, 56px);display:flex;align-items:center;justify-content:center;font-size:var(--ah-code-font-size, 24px);font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid     var(--ah-color-border, #c9cace);border-radius:0;transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out;box-sizing:border-box}.code-box+.code-box{margin-left:calc(-1 * var(--ah-input-border-width, 1px))}.code-group .code-box:first-child{border-top-left-radius:var(--ah-input-radius, 3px);border-bottom-left-radius:var(--ah-input-radius, 3px)}.code-group .code-box:last-child{border-top-right-radius:var(--ah-input-radius, 3px);border-bottom-right-radius:var(--ah-input-radius, 3px)}.code-field:focus-within .code-box.is-active{z-index:1;border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.code-field.has-error .code-box{border-color:var(--ah-color-error, #d03c38)}.code-input:disabled{cursor:not-allowed}.code-input:disabled~.code-boxes .code-box{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3)}`;
 
 const AuthheroNode = class {
     constructor(hostRef) {
@@ -254,6 +431,12 @@ const AuthheroNode = class {
      * Whether the component is disabled.
      */
     disabled = false;
+    /**
+     * BCP-47 locale used for locale-dependent field layout (currently the
+     * segment order of DATE fields). Resolved server-side so SSR and hydration
+     * agree; falls back to day-month-year when absent.
+     */
+    locale;
     /**
      * Whether the password field is visible.
      */
@@ -275,6 +458,15 @@ const AuthheroNode = class {
      * When true, the value is emitted as-is without dial code prefix.
      */
     telEmailMode = false;
+    /**
+     * Segment values for the DATE input, each held as typed (unpadded while the
+     * user is mid-entry) and normalised on blur.
+     */
+    dateSegments = {
+        year: "",
+        month: "",
+        day: "",
+    };
     /**
      * Emitted when a field value changes.
      */
@@ -286,13 +478,16 @@ const AuthheroNode = class {
     componentChanged() {
         this.initCountryFromConfig();
         this.initTelValue();
+        this.initDateValue();
     }
     valueChanged() {
         this.initTelValue();
+        this.initDateValue();
     }
     componentWillLoad() {
         this.initCountryFromConfig();
         this.initTelValue();
+        this.initDateValue();
     }
     componentDidLoad() {
         // Auto-focus a code field so the caret starts in the first (leftmost) box.
@@ -318,6 +513,20 @@ const AuthheroNode = class {
             }
         }
     }
+    /**
+     * The last value this field emitted for a TEL component. The widget mirrors
+     * every emitted value back onto the `value` prop, and that echo must not be
+     * re-parsed: the wire format carries only a dial code, so a country picked
+     * from the list would be replaced by the first entry sharing that code — a
+     * user who chose Canada would be silently moved to the US on their next
+     * keystroke.
+     */
+    lastEmittedTel;
+    /** Emit a TEL value and remember it, so the echo can be recognised. */
+    emitTelValue(value) {
+        this.lastEmittedTel = value;
+        this.fieldChange.emit({ id: this.component.id, value });
+    }
     /**
      * Hydrate localPhoneNumber (and selectedCountry) from the effective value
      * for TEL fields. The full value is stored as `{dialCode}{localNumber}`,
@@ -326,6 +535,10 @@ const AuthheroNode = class {
     initTelValue() {
         if (this.component?.type !== "TEL")
             return;
+        if (this.lastEmittedTel !== undefined &&
+            this.getEffectiveValue() === this.lastEmittedTel) {
+            return;
+        }
         const config = this.component.config;
         const allowEmail = config?.allow_email === true;
         const fullValue = this.getEffectiveValue();
@@ -360,11 +573,16 @@ const AuthheroNode = class {
     handleCountryChange = (e) => {
         const target = e.target;
         this.selectedCountry = getCountryByCode(target.value);
+        // A half-typed "+xx" prefix is replaced by the picked country, not kept
+        // as a local number (it would emit "+46+4").
+        if (this.localPhoneNumber.startsWith("+")) {
+            this.localPhoneNumber = "";
+        }
         // Re-emit the full phone number with new dial code
         const fullNumber = this.localPhoneNumber
             ? `${this.selectedCountry.dialCode}${this.localPhoneNumber}`
             : "";
-        this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+        this.emitTelValue(fullNumber);
     };
     /**
      * Try to detect a dial code prefix in the raw input (e.g. "+46", "0046")
@@ -402,7 +620,21 @@ const AuthheroNode = class {
             target.value = cleanedLocal;
             this.localPhoneNumber = cleanedLocal;
             const fullNumber = `${this.selectedCountry.dialCode}${cleanedLocal}`;
-            this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+            this.emitTelValue(fullNumber);
+        }
+        else if (value.startsWith("+")) {
+            // A leading "+" is an international prefix the user is still typing.
+            // Keep it in the field so the dial code can build up until it matches
+            // a country — stripping it per keystroke means "+46" never resolves to
+            // Sweden, since each character is discarded before the next arrives.
+            const cleaned = `+${value.slice(1).replace(/[^\d\s\-()]/g, "")}`;
+            if (cleaned !== value) {
+                target.value = cleaned;
+            }
+            this.localPhoneNumber = cleaned;
+            // Emit the partial prefix as-is; prefixing it with the (not yet chosen)
+            // country's dial code would produce nonsense like "+1+4".
+            this.emitTelValue(cleaned);
         }
         else {
             const cleaned = allowPlus
@@ -415,7 +647,7 @@ const AuthheroNode = class {
             const fullNumber = cleaned
                 ? `${this.selectedCountry.dialCode}${cleaned}`
                 : "";
-            this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+            this.emitTelValue(fullNumber);
         }
     }
     handlePhoneInput = (e) => {
@@ -435,7 +667,7 @@ const AuthheroNode = class {
             else {
                 // Email or text — emit as-is
                 this.localPhoneNumber = value;
-                this.fieldChange.emit({ id: this.component.id, value });
+                this.emitTelValue(value);
             }
             return;
         }
@@ -446,6 +678,196 @@ const AuthheroNode = class {
         const target = e.target;
         this.fieldChange.emit({ id: this.component.id, value: target.value });
     };
+    // ===========================================================================
+    // DATE segment handling
+    // ===========================================================================
+    /**
+     * The last ISO value this field emitted. The widget mirrors every emitted
+     * value back onto the `value` prop, and that echo must not be treated as an
+     * external change: it would re-format the segments under the caret while
+     * the user is still typing (a day of "3" comes back as "03", swallowing the
+     * next digit).
+     */
+    lastEmittedDate;
+    /** Hydrate the day/month/year segments from the effective ISO value. */
+    initDateValue() {
+        if (this.component?.type !== "DATE")
+            return;
+        if (this.lastEmittedDate !== undefined &&
+            this.getEffectiveValue() === this.lastEmittedDate) {
+            return;
+        }
+        const parsed = parseIsoDate(this.getEffectiveValue());
+        if (parsed) {
+            this.dateSegments = parsed;
+            return;
+        }
+        // No parseable value. Only clear when we currently hold a complete date,
+        // i.e. this is a genuine external reset: a half-typed date emits "" and
+        // the parent echoes that straight back as the value prop, which would
+        // otherwise wipe the segment the user just typed into.
+        if (toIsoDate(this.dateSegments) !== "") {
+            this.dateSegments = { year: "", month: "", day: "" };
+        }
+    }
+    dateConfig() {
+        return this.component.config;
+    }
+    getDateLayoutForField() {
+        const config = this.dateConfig();
+        return getDateLayout(config?.format, this.locale);
+    }
+    static SEGMENT_LENGTH = {
+        day: 2,
+        month: 2,
+        year: 4,
+    };
+    /** Birthdate autofill tokens — the common case for a typed date. */
+    static SEGMENT_AUTOCOMPLETE = {
+        day: "bday-day",
+        month: "bday-month",
+        year: "bday-year",
+    };
+    /**
+     * The submittable value for the current segments: an ISO date, or "" when
+     * it is incomplete, impossible, or outside the field's `min`/`max`. ISO
+     * strings compare chronologically, so the bounds need no parsing.
+     */
+    dateIsoValue(segments) {
+        const iso = toIsoDate(segments);
+        if (!iso)
+            return "";
+        const config = this.dateConfig();
+        const min = config?.min;
+        const max = config?.max;
+        if (typeof min === "string" && parseIsoDate(min) && iso < min)
+            return "";
+        if (typeof max === "string" && parseIsoDate(max) && iso > max)
+            return "";
+        return iso;
+    }
+    setDateSegments(segments) {
+        this.dateSegments = segments;
+        this.lastEmittedDate = this.dateIsoValue(segments);
+        this.fieldChange.emit({
+            id: this.component.id,
+            value: this.lastEmittedDate,
+        });
+    }
+    focusDateSegment(segment) {
+        const input = this.host.shadowRoot?.querySelector(`input[data-date-segment="${segment}"]`);
+        input?.focus();
+        input?.select();
+    }
+    /**
+     * Whether typing this digit completes the segment. A segment is complete at
+     * its full width, and also as soon as a further digit could not produce a
+     * valid number — no day starts with 4 and no month starts with 2.
+     */
+    isDateSegmentComplete(segment, value) {
+        if (value.length >= AuthheroNode.SEGMENT_LENGTH[segment])
+            return true;
+        if (value.length !== 1)
+            return false;
+        if (segment === "day")
+            return Number(value) > 3;
+        if (segment === "month")
+            return Number(value) > 1;
+        return false;
+    }
+    handleDateSegmentInput = (segment) => (e) => {
+        const target = e.target;
+        const digits = target.value
+            .replace(/\D/g, "")
+            .slice(0, AuthheroNode.SEGMENT_LENGTH[segment]);
+        if (digits !== target.value) {
+            target.value = digits;
+        }
+        this.setDateSegments({ ...this.dateSegments, [segment]: digits });
+        if (this.isDateSegmentComplete(segment, digits)) {
+            const order = this.getDateLayoutForField().order;
+            const next = order[order.indexOf(segment) + 1];
+            if (next)
+                this.focusDateSegment(next);
+        }
+    };
+    /**
+     * Pad a single digit ("5" -> "05") and expand a two-digit year against the
+     * field's upper bound ("85" -> 1985). Shared by blur and paste so a pasted
+     * date is read the same way as a typed one.
+     */
+    normalizeDateSegment(segment, value) {
+        if (segment !== "year")
+            return value.padStart(2, "0");
+        return expandTwoDigitYear(value, resolveYearAnchor(this.dateConfig()?.max, new Date()));
+    }
+    /**
+     * Normalise on blur: pad a single digit ("5" -> "05") and expand a two-digit
+     * year against the field's upper bound ("85" -> 1985).
+     */
+    handleDateSegmentBlur = (segment) => (e) => {
+        const target = e.target;
+        const value = target.value.replace(/\D/g, "");
+        if (!value)
+            return;
+        const normalized = this.normalizeDateSegment(segment, value);
+        if (normalized === value)
+            return;
+        target.value = normalized;
+        this.setDateSegments({ ...this.dateSegments, [segment]: normalized });
+    };
+    /**
+     * Backspace at the start of an empty segment moves to the previous one, so
+     * the whole date can be cleared without reaching for the mouse.
+     */
+    handleDateSegmentKeyDown = (segment) => (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            this.buttonClick.emit({ id: "submit", type: "submit", value: "next" });
+            return;
+        }
+        if (e.key !== "Backspace")
+            return;
+        const target = e.target;
+        if (target.value.length > 0 || target.selectionStart !== 0)
+            return;
+        const order = this.getDateLayoutForField().order;
+        const previous = order[order.indexOf(segment) - 1];
+        if (previous) {
+            e.preventDefault();
+            this.focusDateSegment(previous);
+        }
+    };
+    /**
+     * Pasting a whole date into any segment fills all three. An ISO value is
+     * read year-first; anything else follows the field's displayed order. A
+     * two-digit year is expanded the same way a typed one is, so "15/03/85"
+     * pastes as 1985 rather than falling through to the browser's own paste.
+     */
+    handleDatePaste = (e) => {
+        const text = e.clipboardData?.getData("text") ?? "";
+        const groups = text.match(/\d+/g);
+        if (!groups || groups.length < 3)
+            return;
+        const [first, second, third] = groups;
+        const isoLike = first.length === 4;
+        const order = isoLike
+            ? ["year", "month", "day"]
+            : this.getDateLayoutForField().order;
+        const segments = {
+            year: "",
+            month: "",
+            day: "",
+        };
+        [first, second, third].forEach((group, index) => {
+            const segment = order[index];
+            segments[segment] = this.normalizeDateSegment(segment, group.slice(0, AuthheroNode.SEGMENT_LENGTH[segment]));
+        });
+        if (!toIsoDate(segments))
+            return;
+        e.preventDefault();
+        this.setDateSegments(segments);
+    };
     handleKeyDown = (e) => {
         if (e.key === "Enter") {
             e.preventDefault();
@@ -458,7 +880,7 @@ const AuthheroNode = class {
             if (config?.allow_email === true && target.value.length === 0) {
                 this.telEmailMode = true;
                 this.localPhoneNumber = "";
-                this.fieldChange.emit({ id: this.component.id, value: "" });
+                this.emitTelValue("");
             }
         }
     };
@@ -733,17 +1155,40 @@ const AuthheroNode = class {
         const effectiveValue = this.getEffectiveValue();
         return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "url", name: component.id, value: effectiveValue ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
+    /**
+     * DATE is rendered as three numeric segments rather than `input type=date`.
+     * A native date input renders differently in every browser (Safari adds a
+     * stepper), keeps its dd/mm/yyyy hint visible while half-filled, and asks
+     * for a calendar gesture to reach a year decades back — all wrong for a
+     * date typed from memory, which is what these fields collect.
+     */
     renderDateField(component) {
-        const inputId = `input-${component.id}`;
         const errors = this.getErrors();
-        const { min, max } = component.config ?? {};
-        // Date fields always have a value (even if placeholder format), so always float the label
-        const hasValue = true;
-        const effectiveValue = this.getEffectiveValue();
-        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "date", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, min: min, max: max, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        const { format } = component.config ?? {};
+        const layout = getDateLayout(format, this.locale);
+        const isoValue = this.dateIsoValue(this.dateSegments);
+        // Every segment filled but no ISO value means the date does not exist
+        // (31 February) or falls outside min/max. Flag it rather than silently
+        // submitting nothing — the widget posts JSON, so the browser's own
+        // constraint validation never runs.
+        const isIncomplete = layout.order.some((segment) => this.dateSegments[segment].length === 0);
+        const hasInvalidDate = !isoValue && !isIncomplete;
+        const hasError = errors.length > 0 || hasInvalidDate;
+        const firstInputId = `input-${component.id}`;
+        const segmentInput = (segment) => (h("input", { key: segment, id: segment === layout.order[0] ? firstInputId : undefined, class: "date-segment", part: `input date-segment date-segment-${segment}`, type: "text", inputmode: "numeric", autocomplete: AuthheroNode.SEGMENT_AUTOCOMPLETE[segment], "data-date-segment": segment, maxlength: AuthheroNode.SEGMENT_LENGTH[segment], size: AuthheroNode.SEGMENT_LENGTH[segment], value: this.dateSegments[segment], placeholder: layout.tokens[segment], "aria-label": layout.tokens[segment], "aria-invalid": hasError ? "true" : "false", required: component.required, disabled: this.disabled, onInput: this.handleDateSegmentInput(segment), onBlur: this.handleDateSegmentBlur(segment), onKeyDown: this.handleDateSegmentKeyDown(segment), onPaste: this.handleDatePaste }));
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("div", { class: hasError ? "date-input has-error" : "date-input", part: "date-input", role: "group", "aria-label": component.label }, layout.order.map((segment, index) => [
+            index > 0 && (h("span", { key: `sep-${segment}`, class: "date-separator", part: "date-separator", "aria-hidden": "true" }, layout.separator)),
+            segmentInput(segment),
+        ])), this.renderFloatingLabel(component.label, firstInputId, component.required, true)), h("input", { type: "hidden", name: component.id, "data-input-name": component.id, value: isoValue }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderBooleanField(component) {
-        return (h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: this.value === "true" || component.config?.default_value === true, required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), h("span", { class: "checkbox-label", part: "checkbox-label" }, component.label)));
+        return (h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: 
+            // Once the field has a value it is authoritative — falling back to
+            // the default here would keep a ticked-by-default box ticked after
+            // the user unticks it.
+            this.value === undefined
+                ? component.config?.default_value === true
+                : this.value === "true", required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), h("span", { class: "checkbox-label", part: "checkbox-label" }, component.label)));
     }
     renderLegalField(component) {
         const text = component.config?.text ?? component.label ?? "";