npm - @prolibu-suite/cobalt-form - Versions diffs - 0.1.0 → 0.2.0 - Mend

@prolibu-suite/cobalt-form 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/README.md +106 -0
package/dist/cjs/co-form-wizard.cjs.entry.js +307 -0
package/dist/cjs/co-form.cjs.entry.js +2 -1
package/dist/cjs/cobalt-form.cjs.js +2 -2
package/dist/cjs/index-CLL7Ervz.js +8155 -0
package/dist/cjs/{index-8raPCV5a.js → index-Mpsm3UE7.js} +8 -0
package/dist/cjs/index.cjs.js +151 -8869
package/dist/cjs/loader.cjs.js +2 -2
package/dist/cobalt-form/cobalt-form.esm.js +1 -1
package/dist/cobalt-form/index.esm.js +1 -7
package/dist/cobalt-form/p-2168be6b.entry.js +1 -0
package/dist/cobalt-form/p-7b8f67bc.entry.js +1 -0
package/dist/cobalt-form/p-C1670_IO.js +2 -0
package/dist/cobalt-form/p-CPE0t-C2.js +7 -0
package/dist/collection/collection-manifest.json +2 -1
package/dist/collection/components/co-form/co-form.css +167 -1
package/dist/collection/components/co-form/co-form.js +278 -9
package/dist/collection/components/co-form-wizard/co-form-wizard.css +363 -0
package/dist/collection/components/co-form-wizard/co-form-wizard.js +502 -0
package/dist/components/co-form-wizard.d.ts +11 -0
package/dist/components/co-form-wizard.js +1 -0
package/dist/components/index.js +5 -5
package/dist/esm/co-form-wizard.entry.js +305 -0
package/dist/esm/co-form.entry.js +2 -1
package/dist/esm/cobalt-form.js +3 -3
package/dist/esm/{index-X0Keifac.js → index-C1670_IO.js} +8 -1
package/dist/esm/index-CPE0t-C2.js +8144 -0
package/dist/esm/index.js +147 -8865
package/dist/esm/loader.js +3 -3
package/dist/types/components/co-form/co-form.d.ts +53 -1
package/dist/types/components/co-form-wizard/co-form-wizard.d.ts +118 -0
package/dist/types/components.d.ts +184 -2
package/package.json +7 -4
package/dist/cobalt-form/p-X0Keifac.js +0 -2
package/dist/cobalt-form/p-ef70e055.entry.js +0 -1

package/README.md ADDED Viewed

@@ -0,0 +1,106 @@
+# @prolibu-suite/cobalt-form
+`<co-form>` — Web Component schema-driven con validación AJV. Pegás un schema, obtenés un formulario completo. CDN entry point del **Cobalt Design System**.
+> Schema → formulario. Sin loops, sin componentes, sin framework.
+## Instalación
+```bash
+pnpm add @prolibu-suite/cobalt-form @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokens
+```
+## Uso
+```js
+import { defineCustomElements as defineCoreElements } from '@prolibu-suite/cobalt-core/loader';
+import { defineCustomElements as defineFormElements } from '@prolibu-suite/cobalt-form/loader';
+defineCoreElements(window);
+defineFormElements(window);
+```
+```html
+<co-form
+  locale="es"
+  layout="grid"
+  schema='{
+    "email":    { "type": "String", "required": true, "format": "email" },
+    "password": { "type": "String", "required": true, "minLength": 8 },
+    "newsletter": { "type": "Boolean", "label": "Suscribirme", "default": true }
+  }'
+></co-form>
+<script>
+  const form = document.querySelector('co-form');
+  form.addEventListener('coSubmit', (e) => {
+    console.log('values:', e.detail.values);
+  });
+</script>
+```
+## Sin build · vía CDN
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.1/build/css/tokens.css">
+  <script type="module" src="https://unpkg.com/@prolibu-suite/cobalt-core@0.1.1/dist/cobalt/cobalt.esm.js"></script>
+  <script type="module" src="https://unpkg.com/@prolibu-suite/cobalt-form@0.1.1/dist/cobalt-form/cobalt-form.esm.js"></script>
+</head>
+<body>
+  <co-form locale="es" schema='{ "email": { "type": "String", "required": true, "format": "email" } }'></co-form>
+</body>
+</html>
+```
+## Eventos
+| Evento | Detail | Cuándo |
+|---|---|---|
+| `coSubmit` | `{ values, isValid }` | Submit válido |
+| `coChange` | `{ name, value, values }` | Cambio de cualquier campo |
+| `coValidate` | `{ errors, isValid }` | Validación dispara |
+## Métodos públicos
+```js
+await form.setValue('email', 'nuevo@bar.com');
+await form.getValue('email');
+await form.touch('email');
+await form.submit();
+```
+## Slots para custom fields
+```html
+<co-form schema='{ "email": { "type": "String", "required": true, "format": "email" } }'>
+  <!-- Reemplazá el render del campo "email" con HTML propio -->
+  <div slot="field:email">
+    <input type="email" id="myEmail">
+  </div>
+</co-form>
+```
+## Demos en vivo
+5 niveles de personalización, todos sirviendo `<co-form>` desde unpkg:
+- [Default](https://dev10.prolibu.com/ui/static/cobalt-form-demo/01-default.html)
+- [Tokens theming](https://dev10.prolibu.com/ui/static/cobalt-form-demo/02-tokens.html)
+- [CSS local](https://dev10.prolibu.com/ui/static/cobalt-form-demo/03-css.html)
+- [Slot override](https://dev10.prolibu.com/ui/static/cobalt-form-demo/04-slot.html)
+- [Renderer propio](https://dev10.prolibu.com/ui/static/cobalt-form-demo/05-custom.html)
+## Si usás Vue 3
+Mirá [`@prolibu-suite/cobalt-form-vue`](https://www.npmjs.com/package/@prolibu-suite/cobalt-form-vue) — composable `useForm()` + `CoFormRenderer.vue`.
+## Documentación
+→ [cobalt-docs/formularios](https://dev10.prolibu.com/ui/static/cobalt-docs/formularios/introduccion/) — schemas, validación, ref fields, ejemplos.
+## License
+MIT

package/dist/cjs/co-form-wizard.cjs.entry.js ADDED Viewed

@@ -0,0 +1,307 @@
+'use strict';
+var index = require('./index-Mpsm3UE7.js');
+var index$1 = require('./index-CLL7Ervz.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}`;
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function safeJsonParse(s) {
+    try {
+        return JSON.parse(s);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+const CoFormWizard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coSubmit = index.createEvent(this, "coSubmit");
+        this.coPageChange = index.createEvent(this, "coPageChange");
+        /** 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;
+        this.currentIndex = 0;
+        this.values = {};
+        this.finalScore = null;
+        /**
+         * Resolved theme styles for the wizard. Stored as state so render() picks
+         * up changes — using `<Host>` to bind the data-attrs + inline styles
+         * dodges the `setAttribute()` timing issues we saw with shadow:false.
+         */
+        this.themeStyles = null;
+        this.hasBg = false;
+        this.paged = { pages: [] };
+        // Use `any` rather than HTMLCoFormElement: type generation happens at
+        // build time, and the wizard lives in the same package, so we can't
+        // depend on the generated type without a chicken-and-egg.
+        this.currentFormEl = null;
+        this.handleNext = async () => {
+            const ok = await this.commitCurrentPage();
+            if (!ok)
+                return;
+            if (this.currentIndex < this.activePages.length - 1) {
+                this.currentIndex += 1;
+                this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+            }
+        };
+        this.handlePrev = () => {
+            if (this.currentIndex > 0) {
+                this.currentIndex -= 1;
+                this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+            }
+        };
+        /**
+         * Click on a step in the stepper. Backwards navigation is unrestricted
+         * (the user already visited those pages). Forward jumps require the
+         * current page to validate first, then we hop one page at a time so we
+         * don't silently skip validation of intermediate pages.
+         */
+        this.handleStepClick = async (targetIndex) => {
+            if (targetIndex === this.currentIndex)
+                return;
+            if (targetIndex < this.currentIndex) {
+                this.currentIndex = targetIndex;
+                this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+                return;
+            }
+            // Forward jump — validate-and-advance one step at a time.
+            while (this.currentIndex < targetIndex) {
+                const ok = await this.commitCurrentPage();
+                if (!ok)
+                    return;
+                this.currentIndex += 1;
+            }
+            this.coPageChange.emit({ index: this.currentIndex, page: this.currentPage });
+        };
+        this.handleSubmit = async () => {
+            const ok = await this.commitCurrentPage();
+            if (!ok)
+                return;
+            let score;
+            if (this.paged.mode === 'quiz') {
+                const allFields = index$1.collectQuizFields(this.paged.pages);
+                score = index$1.computeScore(this.values, allFields, this.paged.scoring);
+                this.finalScore = score;
+            }
+            this.coSubmit.emit({ values: this.values, score });
+        };
+        this.handlePageChange = (ev) => {
+            this.values = Object.assign(Object.assign({}, this.values), { [ev.detail.name]: ev.detail.value });
+        };
+    }
+    componentWillLoad() {
+        this.parseSchema();
+        this.values = this.parseInitialValues();
+        this.applyTheme();
+    }
+    onSchemaChange() {
+        this.parseSchema();
+        this.currentIndex = 0;
+        this.applyTheme();
+    }
+    onThemeChange() {
+        this.applyTheme();
+    }
+    /**
+     * Compute the resolved theme styles and store in `@State()` so render()
+     * picks them up via `<Host>`. Children `<co-form>` receive a theme with
+     * the background stripped (see `themeForChildren`) so only the wizard's
+     * outer surface carries it — avoids the image leaking into each page.
+     */
+    applyTheme() {
+        var _a;
+        const raw = this.theme
+            ? (typeof this.theme === 'string' ? safeJsonParse(this.theme) : this.theme)
+            : this.paged.theme;
+        console.log('[co-form-wizard] applyTheme called', {
+            themeProp: this.theme,
+            pagedTheme: (_a = this.paged) === null || _a === void 0 ? void 0 : _a.theme,
+            raw,
+        });
+        if (!raw) {
+            this.themeStyles = null;
+            this.hasBg = false;
+            console.log('[co-form-wizard] no theme — cleared');
+            return;
+        }
+        const resolved = index$1.resolveTheme(raw);
+        this.themeStyles = index$1.themeToStyles(resolved);
+        this.hasBg = !!(resolved.background.color || resolved.background.imageUrl);
+        console.log('[co-form-wizard] theme resolved', {
+            resolved,
+            modifiers: this.themeStyles.modifiers,
+            customProps: this.themeStyles.customProperties,
+            hasBg: this.hasBg,
+        });
+    }
+    parseSchema() {
+        try {
+            const parsed = JSON.parse(this.schema);
+            this.paged = index$1.toPagedSchema(parsed);
+        }
+        catch (err) {
+            console.error('[co-form-wizard] failed to parse schema:', err);
+            this.paged = { pages: [] };
+        }
+    }
+    parseInitialValues() {
+        if (!this.initialValues)
+            return {};
+        try {
+            return JSON.parse(this.initialValues) || {};
+        }
+        catch (err) {
+            console.error('[co-form-wizard] failed to parse initialValues:', err);
+            return {};
+        }
+    }
+    /**
+     * Theme JSON forwarded to each child <co-form>. Background is stripped
+     * here — the wizard's host paints the backdrop, the inner form sits on
+     * a solid "page surface" so inputs stay readable.
+     */
+    get themeForChildren() {
+        var _a;
+        const raw = this.theme
+            ? (typeof this.theme === 'string' ? safeJsonParse(this.theme) : this.theme)
+            : (_a = this.paged) === null || _a === void 0 ? void 0 : _a.theme;
+        if (!raw || typeof raw !== 'object')
+            return undefined;
+        // Shallow clone + drop the bg block.
+        const _b = raw, rest = __rest(_b, ["background"]);
+        return JSON.stringify(rest);
+    }
+    /**
+     * Pages the user should see in order. Filters out pages whose `visibleIf`
+     * evaluates to false against the current values.
+     */
+    get activePages() {
+        return this.paged.pages.filter((p) => p.visibleIf ? index$1.evaluateExpression(p.visibleIf, this.values) : true);
+    }
+    get currentPage() {
+        var _a;
+        return (_a = this.activePages[this.currentIndex]) !== null && _a !== void 0 ? _a : null;
+    }
+    async commitCurrentPage() {
+        var _a, _b;
+        if (!this.currentFormEl)
+            return true;
+        const isValid = await ((_b = (_a = this.currentFormEl).validateAndCollect) === null || _b === void 0 ? void 0 : _b.call(_a));
+        if (!(isValid === null || isValid === void 0 ? void 0 : isValid.valid))
+            return false;
+        this.values = Object.assign(Object.assign({}, this.values), isValid.values);
+        return true;
+    }
+    /**
+     * Host element gets nothing extra — Stencil's shadow:false doesn't
+     * reliably rewrite `:host([attr])` selectors, so we put everything on
+     * the inner wrapper instead.
+     */
+    hostProps() {
+        return {};
+    }
+    /**
+     * Data attributes + inline styles for the inner `.co-form-wizard`
+     * wrapper. Scoped CSS targets descendants of this wrapper via normal
+     * descendant selectors that work regardless of Stencil scoping.
+     * CSS custom properties (accent / radius / header) cascade from here
+     * down to children — no need to also put them on the host.
+     */
+    wrapperProps() {
+        const t = this.themeStyles;
+        if (!t)
+            return { class: 'co-form-wizard' };
+        return Object.assign(Object.assign(Object.assign({ class: 'co-form-wizard', 'data-theme': t.modifiers.colorScheme, 'data-density': t.modifiers.density, 'data-appearance': t.modifiers.appearance, 'data-radius': t.modifiers.radius }, (this.hasBg ? { 'data-has-bg': '' } : {})), (t.modifiers.hideHeader ? { 'data-hide-header': '' } : {})), { style: Object.assign(Object.assign({}, t.customProperties), t.inlineStyles) });
+    }
+    render() {
+        var _a;
+        const pages = this.activePages;
+        if (pages.length === 0) {
+            return (index.h(index.Host, Object.assign({}, this.hostProps()), index.h("div", { class: "co-form-wizard__empty" }, "No pages to display.")));
+        }
+        // Quiz finished — show the score panel.
+        if (this.finalScore && ((_a = this.paged.scoring) === null || _a === void 0 ? void 0 : _a.showScore)) {
+            return (index.h(index.Host, Object.assign({}, this.hostProps()), this.renderScorePanel(this.finalScore)));
+        }
+        const current = pages[this.currentIndex];
+        const isFirst = this.currentIndex === 0;
+        const isLast = this.currentIndex === pages.length - 1;
+        // Each page is a fresh <co-form> with just its own fields. We pass
+        // initial values filtered to that page's field names so AJV doesn't
+        // complain about unknown properties from other pages.
+        const pageFields = Object.keys(current.fields);
+        const pageInitial = {};
+        for (const k of pageFields) {
+            if (k in this.values)
+                pageInitial[k] = this.values[k];
+        }
+        return (index.h(index.Host, Object.assign({}, this.hostProps()), this.renderInner(pages, current, isFirst, isLast, pageInitial)));
+    }
+    renderInner(pages, current, isFirst, isLast, pageInitial) {
+        var _a;
+        const customCss = (_a = this.themeStyles) === null || _a === void 0 ? void 0 : _a.customCss;
+        return (index.h("div", Object.assign({}, this.wrapperProps()), customCss && index.h("style", null, customCss), index.h("slot", { name: "header" }, (this.paged.title || this.paged.description) && (index.h("header", { class: "co-form-wizard__title-block" }, this.paged.title && (index.h("h1", { class: "co-form-wizard__title" }, this.paged.title)), this.paged.description && (index.h("p", { class: "co-form-wizard__title-desc" }, this.paged.description))))), pages.length > 1 && (index.h("ol", { class: "co-form-wizard__stepper" }, pages.map((p, i) => (index.h("li", { class: {
+                'co-form-wizard__step': true,
+                'is-active': i === this.currentIndex,
+                'is-done': i < this.currentIndex,
+            }, key: p.name }, index.h("button", { type: "button", class: "co-form-wizard__step-btn", onClick: () => this.handleStepClick(i) }, index.h("span", { class: "co-form-wizard__step-num" }, i + 1), index.h("span", { class: "co-form-wizard__step-label" }, p.title || p.name))))))), index.h("section", { class: "co-form-wizard__page-card" }, this.renderPageHead(current, pages.length > 1), index.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 }), index.h("div", { class: "co-form-wizard__nav" }, index.h("co-button", { label: "Anterior", variant: "outlined", disabled: isFirst, onClick: this.handlePrev }), isLast ? (index.h("co-button", { label: "Enviar", variant: "primary", onClick: this.handleSubmit })) : (index.h("co-button", { label: "Siguiente", variant: "primary", onClick: this.handleNext })))), index.h("slot", { name: "footer" })));
+    }
+    /**
+     * Smart page-head visibility:
+     *  - Multi-page → always show (pill + title for progress tracking),
+     *    unless the page explicitly hides title/description.
+     *  - Single-page with default title "Page N" and no description → hide
+     *    entirely; the form title block above already provides the context.
+     *  - Single-page with a custom title or a description → show the
+     *    relevant parts only.
+     *  - Explicit `hideTitle` / `hideDescription` overrides on the page
+     *    always win.
+     */
+    renderPageHead(current, isMulti) {
+        const titleIsDefault = !current.title || /^Page \d+$/i.test(current.title);
+        const customTitle = !!current.title && !titleIsDefault;
+        const hasDesc = !!current.description;
+        const wantsTitle = (customTitle || (isMulti && current.title)) && !current.hideTitle;
+        const wantsDesc = hasDesc && !current.hideDescription;
+        const wantsPill = isMulti && !current.hideTitle;
+        if (!wantsPill && !wantsTitle && !wantsDesc)
+            return null;
+        return (index.h("header", { class: "co-form-wizard__page-head" }, wantsPill && (index.h("span", { class: "co-form-wizard__page-pill" }, "PAGE ", this.currentIndex + 1)), wantsTitle && (index.h("h2", { class: "co-form-wizard__page-title" }, current.title)), wantsDesc && (index.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 (index.h("div", { class: "co-form-wizard co-form-wizard__score" }, index.h("h2", { class: "co-form-wizard__score-title" }, "Resultado"), index.h("div", { class: "co-form-wizard__score-num" }, score.total, " / ", score.max, index.h("span", { class: "co-form-wizard__score-pct" }, "(", score.percent, "%)")), passText && (index.h("div", { class: {
+                'co-form-wizard__score-pass': true,
+                'is-pass': score.passed === true,
+                'is-fail': score.passed === false,
+            } }, passText)), score.feedback.length > 0 && (index.h("ul", { class: "co-form-wizard__score-feedback" }, score.feedback.map((m) => (index.h("li", null, m)))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "schema": [{
+                "onSchemaChange": 0
+            }],
+        "theme": [{
+                "onThemeChange": 0
+            }]
+    }; }
+};
+CoFormWizard.style = coFormWizardCss();
+exports.co_form_wizard = CoFormWizard;

package/dist/cjs/co-form.cjs.entry.js CHANGED Viewed

@@ -1,7 +1,8 @@
 'use strict';
 var index = require('./index.cjs.js');
-require('./index-8raPCV5a.js');
+require('./index-Mpsm3UE7.js');
+require('./index-CLL7Ervz.js');

package/dist/cjs/cobalt-form.cjs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-8raPCV5a.js');
+var index = require('./index-Mpsm3UE7.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["co-form.cjs",[[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"],"snapshot":[32],"refStates":[32],"setValue":[64],"getValue":[64],"touch":[64]},null,{"schema":[{"onSchemaChange":0}],"schemaInstance":[{"onSchemaChange":0}],"locale":[{"onSchemaChange":0}]}]]]], options);
+  return index.bootstrapLazy([["co-form.cjs",[[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.cjs",[[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);
 });
 exports.setNonce = index.setNonce;