@prolibu-suite/cobalt-form 0.2.1 → 1.0.0

package/dist/esm/co-form-wizard.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-C1670_IO.js';
-import { c as collectQuizFields, a as computeScore, r as resolveTheme, t as themeToStyles, b as toPagedSchema, e as evaluateExpression } from './index-CPE0t-C2.js';
+import { c as collectQuizFields, a as computeScore, r as resolveTheme, t as themeToStyles, b as toPagedSchema, e as evaluateExpression } from './index-CzvtCEKX.js';
 
-const coFormWizardCss = () => `:host{display:block;font-family:var(--co-font-family-primary, sans-serif)}.co-form-wizard{max-width:720px;margin:0 auto;padding:var(--co-spacing-2xl, 24px);display:flex;flex-direction:column;gap:var(--co-spacing-lg, 16px)}.co-form-wizard[data-has-bg]{padding:var(--co-spacing-3xl, 32px) var(--co-spacing-2xl, 24px);background-repeat:no-repeat}.co-form-wizard__title-block{background:var(--co-form-header-bg, var(--co-semantic-surface-page, #fff));border:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));border-radius:var(--co-border-radius-lg, 16px);padding:var(--co-spacing-2xl, 24px) var(--co-spacing-3xl, 28px);box-shadow:0 1px 2px rgba(0, 0, 0, 0.04);min-height:var(--co-form-header-height, auto)}.co-form-wizard[data-hide-header] .co-form-wizard__title-block{display:none}.co-form-wizard[data-density="compact"] .co-form-wizard{gap:var(--co-spacing-sm, 8px)}.co-form-wizard[data-density="compact"] .co-form-wizard__title-block{padding:var(--co-spacing-lg, 16px) var(--co-spacing-xl, 20px)}.co-form-wizard[data-density="compact"] .co-form-wizard__page-head,.co-form-wizard[data-density="compact"] .co-form-wizard__nav{padding-top:var(--co-spacing-sm, 8px);padding-bottom:var(--co-spacing-sm, 8px)}.co-form-wizard__title{margin:0;font-size:24px;font-weight:700;letter-spacing:-0.02em;line-height:1.2;color:var(--co-semantic-text-default, #111827)}.co-form-wizard__title-desc{margin:6px 0 0;font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-wizard__stepper{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);list-style:none;padding:0;margin:0;flex-wrap:wrap}.co-form-wizard__step{display:flex;align-items:center;color:var(--co-semantic-text-secondary, #6b7280);font-size:var(--co-font-size-12, 12px)}.co-form-wizard__step-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);padding:4px 6px;border:0;background:transparent;border-radius:var(--co-border-radius-xxs, 4px);font:inherit;color:inherit;cursor:pointer}.co-form-wizard__step-btn:hover{background:var(--co-semantic-surface-hover, #f3f4f6);color:var(--co-semantic-text-default, #111827)}.co-form-wizard__step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--co-border-radius-full, 9999px);background:var(--co-semantic-surface-hover, #f3f4f6);font-weight:600}.co-form-wizard__step.is-active .co-form-wizard__step-num{background:var(--co-color-primary-azul, #2563eb);color:white}.co-form-wizard__step.is-done .co-form-wizard__step-num{background:var(--co-color-primary-verde, #02a270);color:white}.co-form-wizard__step.is-active{color:var(--co-semantic-text-default, #111827);font-weight:600}.co-form-wizard__page-card{background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));border-radius:var(--co-border-radius-lg, 16px);box-shadow:0 1px 2px rgba(0, 0, 0, 0.04);overflow:hidden;display:flex;flex-direction:column}.co-form-wizard__page-head{padding:var(--co-spacing-xl, 20px) var(--co-spacing-2xl, 24px);border-bottom:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));background:var(--co-semantic-surface-hover, #f9fafb)}.co-form-wizard__page-pill{display:inline-flex;font-size:10px;font-weight:700;letter-spacing:0.08em;color:var(--co-color-primary-azul, #2563eb);background:color-mix(in srgb, var(--co-color-primary-azul) 10%, transparent);padding:3px 8px;border-radius:var(--co-border-radius-full, 9999px);margin-bottom:6px}.co-form-wizard__page-title{margin:0;font-size:var(--co-font-size-18, 18px);font-weight:600;line-height:1.3;letter-spacing:-0.01em;color:var(--co-semantic-text-default, #111827)}.co-form-wizard__page-desc{margin:4px 0 0;font-size:var(--co-font-size-13, 13px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-wizard__page-card>co-form{display:block;padding:var(--co-spacing-xl, 20px) var(--co-spacing-2xl, 24px)}.co-form-wizard__nav{display:flex;justify-content:space-between;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-md, 12px) var(--co-spacing-2xl, 24px);border-top:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));background:var(--co-semantic-surface-hover, #f9fafb)}.co-form-wizard__empty{padding:var(--co-spacing-lg, 16px);text-align:center;color:var(--co-semantic-text-secondary, #6b7280)}.co-form-wizard__score{text-align:center;padding:var(--co-spacing-2xl, 24px);background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));border-radius:var(--co-border-radius-lg, 16px);box-shadow:0 1px 2px rgba(0, 0, 0, 0.04)}.co-form-wizard__score-title{margin:0;font-size:var(--co-font-size-18, 18px)}.co-form-wizard__score-num{font-size:48px;font-weight:600;color:var(--co-color-primary-azul, #2563eb);margin:var(--co-spacing-md, 12px) 0}.co-form-wizard__score-pct{font-size:var(--co-font-size-16, 16px);color:var(--co-semantic-text-secondary, #6b7280);margin-left:var(--co-spacing-sm, 8px)}.co-form-wizard__score-pass{display:inline-block;padding:var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);border-radius:var(--co-border-radius-full, 9999px);font-weight:600;margin-bottom:var(--co-spacing-md, 12px)}.co-form-wizard__score-pass.is-pass{background:var(--co-color-status-success, #0a7724);color:white}.co-form-wizard__score-pass.is-fail{background:var(--co-color-status-error, #aa2e1b);color:white}.co-form-wizard__score-feedback{text-align:left;list-style:disc;padding-left:var(--co-spacing-2xl, 24px);color:var(--co-semantic-text-default, #111827)}.co-form-wizard[data-has-bg] .co-form-wizard__title-block,.co-form-wizard[data-has-bg] .co-form-wizard__page-card,.co-form-wizard[data-has-bg] .co-form-wizard__score{border:0;box-shadow:0 4px 24px rgba(0, 0, 0, 0.08)}.co-form-wizard[data-theme="dark"]{--co-semantic-surface-page:#1a1f2b;--co-semantic-surface-secondary:#1a1f2b;--co-semantic-surface-primary:#ffffff;--co-semantic-surface-muted:#2a3142;--co-semantic-surface-hover:rgba(255, 255, 255, 0.06);--co-semantic-surface-disabled:rgba(255, 255, 255, 0.04);--co-semantic-text-default:#f9fafb;--co-semantic-text-secondary:#9ca3af;--co-semantic-text-muted:#6b7280;--co-semantic-text-disabled:#4b5563;--co-semantic-border-default:rgba(255, 255, 255, 0.12);--co-semantic-border-subtle:rgba(255, 255, 255, 0.14);--co-semantic-border-strong:rgba(255, 255, 255, 0.25);--co-semantic-border-focus:rgba(255, 255, 255, 0.25);--co-semantic-border-focus-ring:rgba(255, 255, 255, 0.1);color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__page-card,.co-form-wizard[data-theme="dark"] .co-form-wizard__score{background:var(--co-semantic-surface-page);border-color:var(--co-semantic-border-default);color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__title-block{background:var(--co-form-header-bg, var(--co-semantic-surface-page));border-color:var(--co-semantic-border-default);color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__title,.co-form-wizard[data-theme="dark"] .co-form-wizard__page-title{color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__title-desc,.co-form-wizard[data-theme="dark"] .co-form-wizard__page-desc{color:#9ca3af}.co-form-wizard[data-theme="dark"] .co-form-wizard__page-head,.co-form-wizard[data-theme="dark"] .co-form-wizard__nav{background:rgba(255, 255, 255, 0.03);border-color:var(--co-semantic-border-default)}.co-form-wizard[data-theme="dark"] .co-form-wizard__step-num{background:rgba(255, 255, 255, 0.1);color:#f9fafb}.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__title-block,.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__page-card,.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__score{box-shadow:0 4px 24px rgba(0, 0, 0, 0.4)}.co-form-wizard[data-appearance="flat"] .co-form-wizard__title-block,.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-card{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important}.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-head{background:transparent !important;border-bottom:0 !important;padding:0 0 var(--co-spacing-md, 12px) 0 !important}.co-form-wizard[data-appearance="flat"] .co-form-wizard__nav{background:transparent !important;border-top:0 !important;padding:var(--co-spacing-md, 12px) 0 0 !important}.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-card>co-form{padding:0 !important}.co-form-wizard[data-appearance="flat"][data-theme="dark"] .co-form-wizard__title-block,.co-form-wizard[data-appearance="flat"][data-theme="dark"] .co-form-wizard__page-card{color:#f9fafb}`;
+const coFormWizardCss = () => `:host{display:block;font-family:var(--co-font-family-primary, sans-serif)}.co-form-wizard{max-width:720px;margin:0 auto;padding:var(--co-spacing-2xl, 24px);display:flex;flex-direction:column;gap:var(--co-spacing-lg, 16px)}.co-form-wizard[data-has-bg]{padding:var(--co-spacing-3xl, 32px) var(--co-spacing-2xl, 24px);background-repeat:no-repeat}.co-form-wizard__title-block{background:var(--co-form-header-bg, var(--co-semantic-surface-page, #fff));border:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));border-radius:var(--co-border-radius-lg, 16px);padding:var(--co-spacing-2xl, 24px) var(--co-spacing-3xl, 28px);box-shadow:0 1px 2px rgba(0, 0, 0, 0.04);min-height:var(--co-form-header-height, auto)}.co-form-wizard[data-hide-header] .co-form-wizard__title-block{display:none}.co-form-wizard[data-density="compact"] .co-form-wizard{gap:var(--co-spacing-sm, 8px)}.co-form-wizard[data-density="compact"] .co-form-wizard__title-block{padding:var(--co-spacing-lg, 16px) var(--co-spacing-xl, 20px)}.co-form-wizard[data-density="compact"] .co-form-wizard__page-head,.co-form-wizard[data-density="compact"] .co-form-wizard__nav{padding-top:var(--co-spacing-sm, 8px);padding-bottom:var(--co-spacing-sm, 8px)}.co-form-wizard__title{margin:0;font-size:24px;font-weight:700;letter-spacing:-0.02em;line-height:1.2;color:var(--co-semantic-text-default, #111827)}.co-form-wizard__title-desc{margin:6px 0 0;font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-wizard__stepper{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);list-style:none;padding:0;margin:0;flex-wrap:wrap}.co-form-wizard__step{display:flex;align-items:center;color:var(--co-semantic-text-secondary, #6b7280);font-size:var(--co-font-size-12, 12px)}.co-form-wizard__step-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);padding:4px 6px;border:0;background:transparent;border-radius:var(--co-border-radius-xxs, 4px);font:inherit;color:inherit;cursor:pointer}.co-form-wizard__step-btn:hover{background:var(--co-semantic-surface-hover, #f3f4f6);color:var(--co-semantic-text-default, #111827)}.co-form-wizard__step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--co-border-radius-full, 9999px);background:var(--co-semantic-surface-hover, #f3f4f6);font-weight:600}.co-form-wizard__step.is-active .co-form-wizard__step-num{background:var(--co-color-primary-azul, #2563eb);color:white}.co-form-wizard__step.is-done .co-form-wizard__step-num{background:var(--co-color-primary-verde, #02a270);color:white}.co-form-wizard__step.is-active{color:var(--co-semantic-text-default, #111827);font-weight:600}.co-form-wizard__page-card{background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));border-radius:var(--co-border-radius-lg, 16px);box-shadow:0 1px 2px rgba(0, 0, 0, 0.04);overflow:hidden;display:flex;flex-direction:column}.co-form-wizard__page-head{padding:var(--co-spacing-xl, 20px) var(--co-spacing-2xl, 24px);border-bottom:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));background:var(--co-semantic-surface-hover, #f9fafb)}.co-form-wizard__page-pill{display:inline-flex;font-size:10px;font-weight:700;letter-spacing:0.08em;color:var(--co-color-primary-azul, #2563eb);background:color-mix(in srgb, var(--co-color-primary-azul) 10%, transparent);padding:3px 8px;border-radius:var(--co-border-radius-full, 9999px);margin-bottom:6px}.co-form-wizard__page-title{margin:0;font-size:var(--co-font-size-18, 18px);font-weight:600;line-height:1.3;letter-spacing:-0.01em;color:var(--co-semantic-text-default, #111827)}.co-form-wizard__page-desc{margin:4px 0 0;font-size:var(--co-font-size-13, 13px);color:var(--co-semantic-text-secondary, #6b7280)}.co-form-wizard__page-card>co-form{display:block;padding:var(--co-spacing-xl, 20px) var(--co-spacing-2xl, 24px)}.co-form-wizard__nav{display:flex;justify-content:space-between;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-md, 12px) var(--co-spacing-2xl, 24px);border-top:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));background:var(--co-semantic-surface-hover, #f9fafb)}.co-form-wizard__nav co-button:only-child{margin-left:auto}.co-form-wizard__empty{padding:var(--co-spacing-lg, 16px);text-align:center;color:var(--co-semantic-text-secondary, #6b7280)}.co-form-wizard__score{text-align:center;padding:var(--co-spacing-2xl, 24px);background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-default, rgba(17, 24, 39, 0.08));border-radius:var(--co-border-radius-lg, 16px);box-shadow:0 1px 2px rgba(0, 0, 0, 0.04)}.co-form-wizard__score-title{margin:0;font-size:var(--co-font-size-18, 18px)}.co-form-wizard__score-num{font-size:48px;font-weight:600;color:var(--co-color-primary-azul, #2563eb);margin:var(--co-spacing-md, 12px) 0}.co-form-wizard__score-pct{font-size:var(--co-font-size-16, 16px);color:var(--co-semantic-text-secondary, #6b7280);margin-left:var(--co-spacing-sm, 8px)}.co-form-wizard__score-pass{display:inline-block;padding:var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);border-radius:var(--co-border-radius-full, 9999px);font-weight:600;margin-bottom:var(--co-spacing-md, 12px)}.co-form-wizard__score-pass.is-pass{background:var(--co-color-status-success, #0a7724);color:white}.co-form-wizard__score-pass.is-fail{background:var(--co-color-status-error, #aa2e1b);color:white}.co-form-wizard__score-feedback{text-align:left;list-style:disc;padding-left:var(--co-spacing-2xl, 24px);color:var(--co-semantic-text-default, #111827)}.co-form-wizard[data-has-bg] .co-form-wizard__title-block,.co-form-wizard[data-has-bg] .co-form-wizard__page-card,.co-form-wizard[data-has-bg] .co-form-wizard__score{border:0;box-shadow:0 4px 24px rgba(0, 0, 0, 0.08)}.co-form-wizard[data-theme="dark"]{--co-semantic-surface-page:#1a1f2b;--co-semantic-surface-secondary:#1a1f2b;--co-semantic-surface-primary:#ffffff;--co-semantic-surface-muted:#2a3142;--co-semantic-surface-hover:rgba(255, 255, 255, 0.06);--co-semantic-surface-disabled:rgba(255, 255, 255, 0.04);--co-semantic-on-primary:#1a1f2b;--co-semantic-on-secondary:#f9fafb;--co-semantic-text-default:#f9fafb;--co-semantic-text-secondary:#9ca3af;--co-semantic-text-muted:#6b7280;--co-semantic-text-disabled:#4b5563;--co-semantic-border-default:rgba(255, 255, 255, 0.12);--co-semantic-border-subtle:rgba(255, 255, 255, 0.14);--co-semantic-border-strong:rgba(255, 255, 255, 0.25);--co-semantic-border-focus:rgba(255, 255, 255, 0.25);--co-semantic-border-focus-ring:rgba(255, 255, 255, 0.1);color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__page-card,.co-form-wizard[data-theme="dark"] .co-form-wizard__score{background:var(--co-semantic-surface-page);border-color:var(--co-semantic-border-default);color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__title-block{background:var(--co-form-header-bg, var(--co-semantic-surface-page));border-color:var(--co-semantic-border-default);color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__title,.co-form-wizard[data-theme="dark"] .co-form-wizard__page-title{color:#f9fafb}.co-form-wizard[data-theme="dark"] .co-form-wizard__title-desc,.co-form-wizard[data-theme="dark"] .co-form-wizard__page-desc{color:#9ca3af}.co-form-wizard[data-theme="dark"] .co-form-wizard__page-head,.co-form-wizard[data-theme="dark"] .co-form-wizard__nav{background:rgba(255, 255, 255, 0.03);border-color:var(--co-semantic-border-default)}.co-form-wizard[data-theme="dark"] .co-form-wizard__step-num{background:rgba(255, 255, 255, 0.1);color:#f9fafb}.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__title-block,.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__page-card,.co-form-wizard[data-theme="dark"][data-has-bg] .co-form-wizard__score{box-shadow:0 4px 24px rgba(0, 0, 0, 0.4)}.co-form-wizard[data-appearance="flat"] .co-form-wizard__title-block,.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-card{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important}.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-head{background:transparent !important;border-bottom:0 !important;padding:0 0 var(--co-spacing-md, 12px) 0 !important}.co-form-wizard[data-appearance="flat"] .co-form-wizard__nav{background:transparent !important;border-top:0 !important;padding:var(--co-spacing-md, 12px) 0 0 !important}.co-form-wizard[data-appearance="flat"] .co-form-wizard__page-card>co-form{padding:0 !important}.co-form-wizard[data-appearance="flat"][data-theme="dark"] .co-form-wizard__title-block,.co-form-wizard[data-appearance="flat"][data-theme="dark"] .co-form-wizard__page-card{color:#f9fafb}`;
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -23,17 +23,30 @@ function safeJsonParse(s) {
         return null;
     }
 }
+const DEFAULT_LABELS = {
+    result: 'Result',
+    passed: 'Passed',
+    failed: 'Failed',
+    prev: 'Previous',
+    next: 'Next',
+    submit: 'Submit',
+    empty: 'No pages to display.',
+    pagePrefix: 'PAGE',
+};
 const CoFormWizard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.coSubmit = createEvent(this, "coSubmit");
         this.coPageChange = createEvent(this, "coPageChange");
+        this.coChange = createEvent(this, "coChange");
         /** Locale for AJV error messages. */
         this.locale = 'es';
         /** Layout passed to each page's <co-form>. */
         this.layout = 'grid';
         /** Number of columns per page. */
         this.columns = 1;
+        /** When to run validation. Forwarded to each page's `<co-form>`. */
+        this.validateOn = 'change';
         this.currentIndex = 0;
         this.values = {};
         this.finalScore = null;
@@ -55,13 +68,13 @@ const CoFormWizard = class {
                 return;
             if (this.currentIndex < this.activePages.length - 1) {
                 this.currentIndex += 1;
-                this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+                this.emitPageChange();
             }
         };
         this.handlePrev = () => {
             if (this.currentIndex > 0) {
                 this.currentIndex -= 1;
-                this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+                this.emitPageChange();
             }
         };
         /**
@@ -75,7 +88,7 @@ const CoFormWizard = class {
                 return;
             if (targetIndex < this.currentIndex) {
                 this.currentIndex = targetIndex;
-                this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+                this.emitPageChange();
                 return;
             }
             // Forward jump — validate-and-advance one step at a time.
@@ -85,7 +98,7 @@ const CoFormWizard = class {
                     return;
                 this.currentIndex += 1;
             }
-            this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+            this.emitPageChange();
         };
         this.handleSubmit = async () => {
             const ok = await this.commitCurrentPage();
@@ -101,8 +114,17 @@ const CoFormWizard = class {
         };
         this.handlePageChange = (ev) => {
             this.values = Object.assign(Object.assign({}, this.values), { [ev.detail.name]: ev.detail.value });
+            this.coChange.emit(ev.detail);
         };
     }
+    get mergedLabels() {
+        if (!this.labels)
+            return DEFAULT_LABELS;
+        const parsed = safeJsonParse(this.labels);
+        if (!parsed || typeof parsed !== 'object')
+            return DEFAULT_LABELS;
+        return Object.assign(Object.assign({}, DEFAULT_LABELS), parsed);
+    }
     componentWillLoad() {
         this.parseSchema();
         this.values = this.parseInitialValues();
@@ -196,6 +218,12 @@ const CoFormWizard = class {
         var _a;
         return (_a = this.activePages[this.currentIndex]) !== null && _a !== void 0 ? _a : null;
     }
+    emitPageChange() {
+        const page = this.currentPage;
+        if (page) {
+            this.coPageChange.emit({ index: this.currentIndex, page });
+        }
+    }
     async commitCurrentPage() {
         var _a, _b;
         if (!this.currentFormEl)
@@ -231,7 +259,7 @@ const CoFormWizard = class {
         var _a;
         const pages = this.activePages;
         if (pages.length === 0) {
-            return (h(Host, Object.assign({}, this.hostProps()), h("div", { class: "co-form-wizard__empty" }, "No pages to display.")));
+            return (h(Host, Object.assign({}, this.hostProps()), h("div", { class: "co-form-wizard__empty" }, this.mergedLabels.empty)));
         }
         // Quiz finished — show the score panel.
         if (this.finalScore && ((_a = this.paged.scoring) === null || _a === void 0 ? void 0 : _a.showScore)) {
@@ -258,7 +286,7 @@ const CoFormWizard = class {
                 'co-form-wizard__step': true,
                 'is-active': i === this.currentIndex,
                 'is-done': i < this.currentIndex,
-            }, key: p.name }, h("button", { type: "button", class: "co-form-wizard__step-btn", onClick: () => this.handleStepClick(i) }, h("span", { class: "co-form-wizard__step-num" }, i + 1), h("span", { class: "co-form-wizard__step-label" }, p.title || p.name))))))), h("section", { class: "co-form-wizard__page-card" }, this.renderPageHead(current, pages.length > 1), h("co-form", { ref: (el) => (this.currentFormEl = el), schema: JSON.stringify(current.fields), "initial-values": JSON.stringify(pageInitial), locale: this.locale, layout: this.layout, columns: this.columns, theme: this.themeForChildren, "hide-footer": true, onCoChange: this.handlePageChange }), h("div", { class: "co-form-wizard__nav" }, h("co-button", { label: "Anterior", variant: "outlined", disabled: isFirst, onClick: this.handlePrev }), isLast ? (h("co-button", { label: "Enviar", variant: "primary", onClick: this.handleSubmit })) : (h("co-button", { label: "Siguiente", variant: "primary", onClick: this.handleNext })))), h("slot", { name: "footer" })));
+            }, key: p.name }, h("button", { type: "button", class: "co-form-wizard__step-btn", onClick: () => this.handleStepClick(i) }, h("span", { class: "co-form-wizard__step-num" }, i + 1), h("span", { class: "co-form-wizard__step-label" }, p.title || p.name))))))), h("section", { class: "co-form-wizard__page-card" }, this.renderPageHead(current, pages.length > 1), h("co-form", { ref: (el) => (this.currentFormEl = el), schema: JSON.stringify(current.fields), "initial-values": JSON.stringify(pageInitial), locale: this.locale, layout: this.layout, columns: this.columns, theme: this.themeForChildren, "validate-on": this.validateOn, "hide-footer": true, onCoChange: this.handlePageChange }), h("div", { class: "co-form-wizard__nav" }, pages.length > 1 && (h("co-button", { label: this.mergedLabels.prev, variant: "stroke", disabled: isFirst, onClick: this.handlePrev })), isLast ? (h("co-button", { label: this.mergedLabels.submit, variant: "primary", onClick: this.handleSubmit })) : (h("co-button", { label: this.mergedLabels.next, variant: "primary", onClick: this.handleNext })))), h("slot", { name: "footer" })));
     }
     /**
      * Smart page-head visibility:
@@ -280,11 +308,12 @@ const CoFormWizard = class {
         const wantsPill = isMulti && !current.hideTitle;
         if (!wantsPill && !wantsTitle && !wantsDesc)
             return null;
-        return (h("header", { class: "co-form-wizard__page-head" }, wantsPill && (h("span", { class: "co-form-wizard__page-pill" }, "PAGE ", this.currentIndex + 1)), wantsTitle && (h("h2", { class: "co-form-wizard__page-title" }, current.title)), wantsDesc && (h("p", { class: "co-form-wizard__page-desc" }, current.description))));
+        return (h("header", { class: "co-form-wizard__page-head" }, wantsPill && (h("span", { class: "co-form-wizard__page-pill" }, this.mergedLabels.pagePrefix, " ", this.currentIndex + 1)), wantsTitle && (h("h2", { class: "co-form-wizard__page-title" }, current.title)), wantsDesc && (h("p", { class: "co-form-wizard__page-desc" }, current.description))));
     }
     renderScorePanel(score) {
-        const passText = score.passed === true ? 'Aprobado' : score.passed === false ? 'No aprobado' : null;
-        return (h("div", { class: "co-form-wizard co-form-wizard__score" }, h("h2", { class: "co-form-wizard__score-title" }, "Resultado"), h("div", { class: "co-form-wizard__score-num" }, score.total, " / ", score.max, h("span", { class: "co-form-wizard__score-pct" }, "(", score.percent, "%)")), passText && (h("div", { class: {
+        const labels = this.mergedLabels;
+        const passText = score.passed === true ? labels.passed : score.passed === false ? labels.failed : null;
+        return (h("div", { class: "co-form-wizard co-form-wizard__score" }, h("h2", { class: "co-form-wizard__score-title" }, labels.result), h("div", { class: "co-form-wizard__score-num" }, score.total, " / ", score.max, h("span", { class: "co-form-wizard__score-pct" }, "(", score.percent, "%)")), passText && (h("div", { class: {
                 'co-form-wizard__score-pass': true,
                 'is-pass': score.passed === true,
                 'is-fail': score.passed === false,

package/dist/esm/co-form.entry.js

@@ -1,3 +1,3 @@
 export { CoForm as co_form } from './index.js';
 import './index-C1670_IO.js';
-import './index-CPE0t-C2.js';
+import './index-CzvtCEKX.js';

package/dist/esm/cobalt-form.js

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["co-form",[[260,"co-form",{"schema":[1],"initialValues":[1,"initial-values"],"schemaInstance":[16],"refResolver":[16],"locale":[1],"layout":[1],"excludeFields":[1,"exclude-fields"],"disabled":[4],"readOnly":[4,"read-only"],"columns":[2],"gap":[1],"footerAlign":[1,"footer-align"],"hideFooter":[4,"hide-footer"],"theme":[1],"snapshot":[32],"refStates":[32],"themeStyles":[32],"hasBg":[32],"setValue":[64],"getValue":[64],"touch":[64],"validateAndCollect":[64]},null,{"schema":[{"onSchemaChange":0}],"schemaInstance":[{"onSchemaChange":0}],"locale":[{"onSchemaChange":0}],"theme":[{"onThemeChange":0}]}]]],["co-form-wizard",[[260,"co-form-wizard",{"schema":[1],"initialValues":[1,"initial-values"],"locale":[1],"layout":[1],"columns":[2],"theme":[1],"currentIndex":[32],"values":[32],"finalScore":[32],"themeStyles":[32],"hasBg":[32]},null,{"schema":[{"onSchemaChange":0}],"theme":[{"onThemeChange":0}]}]]]], options);
+  return bootstrapLazy([["co-form",[[260,"co-form",{"schema":[1],"initialValues":[1,"initial-values"],"schemaInstance":[16],"refResolver":[16],"locale":[1],"layout":[1],"excludeFields":[1,"exclude-fields"],"disabled":[4],"readOnly":[4,"read-only"],"columns":[2],"gap":[1],"footerAlign":[1,"footer-align"],"hideFooter":[4,"hide-footer"],"validateOn":[1,"validate-on"],"theme":[1],"snapshot":[32],"refStates":[32],"themeStyles":[32],"hasBg":[32],"orderingDragIdx":[32],"orderingDropIdx":[32],"setValue":[64],"getValue":[64],"touch":[64],"validateAndCollect":[64]},null,{"schema":[{"onSchemaChange":0}],"schemaInstance":[{"onSchemaChange":0}],"locale":[{"onSchemaChange":0}],"theme":[{"onThemeChange":0}]}]]],["co-form-wizard",[[260,"co-form-wizard",{"schema":[1],"initialValues":[1,"initial-values"],"locale":[1],"layout":[1],"columns":[2],"theme":[1],"validateOn":[1,"validate-on"],"labels":[1],"currentIndex":[32],"values":[32],"finalScore":[32],"themeStyles":[32],"hasBg":[32]},null,{"schema":[{"onSchemaChange":0}],"theme":[{"onThemeChange":0}]}]]]], options);
 });

package/dist/esm/{index-CPE0t-C2.js → index-CzvtCEKX.js}

@@ -7388,7 +7388,31 @@ var RESOLVERS = [
   (orig) => orig.uiCom === "ColorPicker" ? "color" : void 0,
   (orig) => orig.uiCom === "Section" ? "section" : void 0,
   (orig) => orig.uiCom === "File" || orig.uiCom === "FileUpload" ? "file" : void 0,
+  // FillBlank deprecated — resolve to 'text' for backward compatibility.
+  (orig) => orig.uiCom === "FillBlank" ? "text" : void 0,
+  (orig) => orig.uiCom === "Ordering" ? "ordering" : void 0,
+  (orig) => orig.uiCom === "Matching" ? "matching" : void 0,
+  (orig) => orig.uiCom === "ImageRadioGroup" ? "image-choice" : void 0,
   (orig) => orig.uiCom === "Repeater" || orig.uiCom === "objectEditor" ? "array" : void 0,
+  // Phone with country code indicator.
+  (orig) => orig.uiCom === "PhoneWithIndicative" ? "phone" : void 0,
+  // Explicit date picker (renderer override, not a domain type). The
+  // underlying value stays a date-only string.
+  (orig) => orig.uiCom === "DatePicker" ? "date" : void 0,
+  // Radio / Checkbox group — explicit uiCom before the generic enum→select.
+  (orig) => orig.uiCom === "RadioGroup" ? "radio" : void 0,
+  (orig) => orig.uiCom === "CheckboxGroup" ? "checkbox" : void 0,
+  // Masked is a renderer behavior (not a domain type). Keep it after explicit
+  // uiCom mappings, but before ref/enum/type fallbacks.
+  (orig) => {
+    const mask = orig.mask;
+    if (typeof mask === "string") return mask.trim() ? "masked" : void 0;
+    if (mask && typeof mask === "object") return "masked";
+    return void 0;
+  },
+  // A `File` ref is an upload field, not a model picker — route it before the
+  // generic ref rule.
+  (orig) => orig.ref === "File" ? "file" : void 0,
   // Ref binds to a backend model.
   (orig) => orig.ref ? "ref" : void 0,
   // Enum → select.
@@ -7396,12 +7420,17 @@ var RESOLVERS = [
   // Array of objects → repeater (when no other uiCom matches).
   (orig) => Array.isArray(orig.type) && orig.type[0] && typeof orig.type[0] === "object" ? "array" : void 0,
   (orig) => orig.type === "array" && orig.itemSchema ? "array" : void 0,
+  // Array of primitives (e.g. Mongoose `type: [String]`) → free-text tags.
+  // Placed after the array-of-objects (repeater) rule so only primitive arrays
+  // reach it, and after `ref` so arrays of object-id refs stay multi-ref.
+  (orig) => Array.isArray(orig.type) && orig.type[0] && typeof orig.type[0] !== "object" ? "tags" : void 0,
   // File ref / file format.
   (orig) => orig.format === "file" || orig.type === "File" ? "file" : void 0,
   // Primitive types.
   (orig) => orig.type === "boolean" ? "boolean" : void 0,
   (orig) => orig.type === "number" || orig.type === "integer" ? "number" : void 0,
   (orig) => orig.type === "date" ? "date" : void 0,
+  (orig) => orig.type === "mixed" ? "mixed" : void 0,
   (orig) => orig.type === "string" ? "text" : void 0
 ];
 function resolveFieldKind(ajvProperty) {
@@ -7419,8 +7448,46 @@ function resolveFieldKind(ajvProperty) {
 function labelFromName(name) {
   return String(name).replace(/([a-z])([A-Z])/g, "$1 $2").replace(/_/g, " ").toLowerCase().replace(/^./, (c) => c.toUpperCase());
 }
-function describeField(name, ajvProperty) {
+function readColSpan(orig) {
+  const raw = orig.colSpan ?? orig.cols;
+  const n = Number(raw);
+  return Number.isFinite(n) && n >= 1 ? Math.floor(n) : void 0;
+}
+function resolveNestedSchema(ajvProperty, resolveRef) {
+  if (!ajvProperty || typeof ajvProperty !== "object") return null;
+  if (typeof ajvProperty.$ref === "string" && typeof resolveRef === "function") {
+    const sub = resolveRef(ajvProperty.$ref);
+    if (sub && sub.properties && typeof sub.properties === "object") return sub;
+  }
+  if (ajvProperty.properties && typeof ajvProperty.properties === "object") {
+    return ajvProperty;
+  }
+  return null;
+}
+function describeField(name, ajvProperty, resolveRef, path = name, requiredFromParent = false) {
   const orig = ajvProperty?.originalAttrs || {};
+  const required = !!orig.required || requiredFromParent;
+  if (!orig.hidden) {
+    const sub = resolveNestedSchema(ajvProperty, resolveRef);
+    if (sub) {
+      return {
+        name,
+        kind: "object",
+        label: orig.label || labelFromName(name),
+        placeholder: orig.placeholder || orig.eg || "",
+        required,
+        disabled: !!(orig.readOnly || orig.disabled),
+        hidden: false,
+        fullWidth: true,
+        // fieldsets span the full grid width
+        helperText: orig.helperText || orig.description || "",
+        originalAttrs: orig,
+        ajvProperty,
+        path,
+        children: describeFields(sub.properties, resolveRef, path, sub.required)
+      };
+    }
+  }
   const kind = resolveFieldKind(ajvProperty);
   if (kind === null) return null;
   return {
@@ -7428,19 +7495,23 @@ function describeField(name, ajvProperty) {
     kind,
     label: orig.label || labelFromName(name),
     placeholder: orig.placeholder || orig.eg || "",
-    required: !!orig.required,
+    required,
     disabled: !!(orig.readOnly || orig.disabled),
     hidden: !!orig.hidden,
     fullWidth: !!orig.full,
+    colSpan: readColSpan(orig),
     helperText: orig.helperText || orig.description || "",
     originalAttrs: orig,
-    ajvProperty
+    ajvProperty,
+    path
   };
 }
-function describeFields(properties) {
+function describeFields(properties, resolveRef, parentPath = "", requiredKeys) {
+  const requiredSet = new Set(Array.isArray(requiredKeys) ? requiredKeys : []);
   const out = [];
   for (const [name, property] of Object.entries(properties)) {
-    const desc = describeField(name, property);
+    const path = parentPath ? `${parentPath}.${name}` : name;
+    const desc = describeField(name, property, resolveRef, path, requiredSet.has(name));
     if (desc) out.push(desc);
   }
   return out;
@@ -7610,15 +7681,16 @@ function normalizeForValidation(data, properties) {
   }
   return out;
 }
+function instancePathToDot(instancePath) {
+  if (typeof instancePath !== "string" || instancePath.length === 0) return "";
+  return instancePath.split("/").filter((s) => s.length > 0 && !/^\d+$/.test(s)).join(".");
+}
 function extractFieldName(err) {
-  if (err.keyword === "required" && err.params?.missingProperty) {
-    return err.params.missingProperty;
-  }
-  if (typeof err.instancePath === "string" && err.instancePath.length > 0) {
-    const segments = err.instancePath.split("/").filter(Boolean);
-    return segments[0] || null;
+  const base = instancePathToDot(err.instancePath);
+  if ((err.keyword === "required" || err.keyword === "requiredNotNull") && err.params?.missingProperty) {
+    return base ? `${base}.${err.params.missingProperty}` : err.params.missingProperty;
   }
-  return null;
+  return base || null;
 }
 function groupErrorsByField(errors) {
   const out = {};
@@ -7659,10 +7731,16 @@ function fieldToJsonSchema(def) {
       break;
     case "date":
       out.type = "string";
-      out.format = "date-time";
+      out.format = "date";
       break;
     case "mixed":
       break;
+    case "array":
+      out.type = "array";
+      if (Array.isArray(def.enum) && def.enum.length > 0) {
+        out.items = { type: "string", enum: def.enum };
+      }
+      break;
     default:
       if (Array.isArray(def.type)) {
         const inner = typeof def.type[0] === "string" ? def.type[0].toLowerCase() : "string";
@@ -7670,7 +7748,7 @@ function fieldToJsonSchema(def) {
         out.items = { type: inner === "number" ? "number" : "string" };
       }
   }
-  if (Array.isArray(def.enum) && def.enum.length > 0) out.enum = def.enum;
+  if (Array.isArray(def.enum) && def.enum.length > 0 && out.type !== "array") out.enum = def.enum;
   if (typeof def.min === "number") out.minimum = def.min;
   if (typeof def.max === "number") out.maximum = def.max;
   if (typeof def.minLength === "number") out.minLength = def.minLength;
@@ -7769,7 +7847,7 @@ var FormController = class {
     __publicField(this, "listeners", /* @__PURE__ */ new Set());
     __publicField(this, "notifyScheduled", false);
     this.schemaInstance = resolveSchema(options.schema);
-    this.fields = describeFields(this.schemaInstance.formSchema.properties);
+    this.fields = this.describe();
     this.validateOn = options.validateOn ?? "change";
     const defaults = this.collectDefaults();
     const userInitial = options.initialValues ?? {};
@@ -7835,10 +7913,17 @@ var FormController = class {
     if (this.state.touched[name]) return;
     this.commit({ touched: { ...this.state.touched, [name]: true } });
   }
-  /** Mark every field as touched. Useful right before showing errors on submit. */
+  /** Mark every field as touched (recursing into nested object children by
+   *  their dot-`path`), so a submit reveals nested-field errors too. */
   touchAll() {
     const touched = { ...this.state.touched };
-    for (const f of this.fields) touched[f.name] = true;
+    const walk = (fields) => {
+      for (const f of fields) {
+        touched[f.path ?? f.name] = true;
+        if (f.children?.length) walk(f.children);
+      }
+    };
+    walk(this.fields);
     this.commit({ touched });
   }
   /**
@@ -7848,10 +7933,21 @@ var FormController = class {
    */
   setSchema(instance) {
     this.schemaInstance = instance;
-    this.fields = describeFields(instance.formSchema.properties);
+    this.fields = this.describe();
     this.runValidation();
     this.scheduleNotify();
   }
+  /** Build field descriptors, threading `$ref` resolution for nested objects. */
+  describe() {
+    const getSchema = this.schemaInstance.getSchema;
+    const resolveRef = typeof getSchema === "function" ? (ref) => getSchema.call(this.schemaInstance, ref) : void 0;
+    return describeFields(
+      this.schemaInstance.formSchema.properties,
+      resolveRef,
+      "",
+      this.schemaInstance.formSchema.required
+    );
+  }
   async submit() {
     this.commit({ isSubmitting: true });
     try {
@@ -7902,7 +7998,12 @@ var FormController = class {
     for (const f of this.fields) {
       const runtime = this.getFieldStateNoSnapshot(f, this.state.values);
       if (!runtime.visible) {
-        delete errors[f.name];
+        const key = f.path ?? f.name;
+        delete errors[key];
+        const prefix = `${key}.`;
+        for (const k of Object.keys(errors)) {
+          if (k.startsWith(prefix)) delete errors[k];
+        }
         continue;
       }
       if (runtime.required) {