@prolibu-suite/cobalt-form 0.1.1 → 0.2.0

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

@@ -0,0 +1,305 @@
+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';
+
+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) {
+        registerInstance(this, hostRef);
+        this.coSubmit = createEvent(this, "coSubmit");
+        this.coPageChange = 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 = collectQuizFields(this.paged.pages);
+                score = 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 = resolveTheme(raw);
+        this.themeStyles = 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 = 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 ? 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 (h(Host, Object.assign({}, this.hostProps()), 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 (h(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 (h(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 (h("div", Object.assign({}, this.wrapperProps()), customCss && h("style", null, customCss), h("slot", { name: "header" }, (this.paged.title || this.paged.description) && (h("header", { class: "co-form-wizard__title-block" }, this.paged.title && (h("h1", { class: "co-form-wizard__title" }, this.paged.title)), this.paged.description && (h("p", { class: "co-form-wizard__title-desc" }, this.paged.description))))), pages.length > 1 && (h("ol", { class: "co-form-wizard__stepper" }, pages.map((p, i) => (h("li", { 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" })));
+    }
+    /**
+     * 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 (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))));
+    }
+    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: {
+                'co-form-wizard__score-pass': true,
+                'is-pass': score.passed === true,
+                'is-fail': score.passed === false,
+            } }, passText)), score.feedback.length > 0 && (h("ul", { class: "co-form-wizard__score-feedback" }, score.feedback.map((m) => (h("li", null, m)))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "schema": [{
+                "onSchemaChange": 0
+            }],
+        "theme": [{
+                "onThemeChange": 0
+            }]
+    }; }
+};
+CoFormWizard.style = coFormWizardCss();
+
+export { CoFormWizard as co_form_wizard };

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

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

package/dist/esm/cobalt-form.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-X0Keifac.js';
-export { s as setNonce } from './index-X0Keifac.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-C1670_IO.js';
+export { s as setNonce } from './index-C1670_IO.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.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"],"snapshot":[32],"refStates":[32],"setValue":[64],"getValue":[64],"touch":[64]},null,{"schema":[{"onSchemaChange":0}],"schemaInstance":[{"onSchemaChange":0}],"locale":[{"onSchemaChange":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"],"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);
 });

package/dist/esm/{index-X0Keifac.js → index-C1670_IO.js}

@@ -108,6 +108,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
+                case 'co-form-wizard':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './co-form-wizard.entry.js').then(processMod, consoleError);
                 case 'co-form':
                     return import(
                       /* webpackMode: "lazy" */
@@ -571,6 +575,9 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
+    if (propType & 2 /* Number */) {
+      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
+    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -1990,4 +1997,4 @@ function transformTag(tag) {
   return tag;
 }
 
-export { bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };