@prolibu-suite/cobalt-form 0.2.2 → 2.0.0

package/dist/collection/components/co-form/co-form.css

@@ -68,13 +68,13 @@ form[data-has-bg] {
   padding: var(--co-spacing-2xl, 24px);
   background: var(--co-semantic-surface-page, #fff);
   border-radius: var(--co-border-radius-sm, 12px);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--co-shadow-lg, 0 4px 24px var(--co-color-opacity-negro-8));
 }
 
 form[data-theme="dark"][data-has-bg] {
-  background: #232936;
-  color: #f9fafb;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  background: var(--co-semantic-surface-page);
+  color: var(--co-semantic-text-default);
+  box-shadow: 0 4px 24px var(--co-color-opacity-negro-50);
 }
 
 /* Dark mode — re-bind ALL semantic tokens so cards, inputs, and buttons
@@ -189,3 +189,325 @@ form[data-hide-header] .co-form-layout > slot[name="header"] {
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: var(--co-spacing-sm, 8px);
 }
+
+/* Textarea (long answer) */
+.co-form-textarea-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-xxs, 2px);
+}
+
+.co-form-textarea-wrap__label {
+  font-size: var(--co-font-size-14, 14px);
+  font-weight: 500;
+  color: var(--co-semantic-text-default, #111);
+}
+
+.co-form-textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);
+  font-family: var(--co-font-family-primary, sans-serif);
+  font-size: var(--co-font-size-14, 14px);
+  color: var(--co-semantic-text-default, #111);
+  background: var(--co-semantic-surface-secondary, #f7f6f0);
+  border: 1px solid var(--co-semantic-border-default, #e5e7eb);
+  border-radius: var(--co-border-radius-xxs, 4px);
+  resize: vertical;
+  outline: none;
+  transition: border-color 120ms;
+  box-sizing: border-box;
+}
+
+.co-form-textarea:focus {
+  border-color: var(--co-color-primary-azul, #2563eb);
+}
+
+.co-form-textarea--error {
+  border-color: var(--co-color-status-error, #AA2E1B);
+}
+
+.co-form-textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.co-form-textarea-wrap__helper {
+  margin: 0;
+  font-size: var(--co-font-size-12, 12px);
+  color: var(--co-semantic-text-secondary, #6b7280);
+}
+
+.co-form-textarea-wrap__helper[data-status="error"] {
+  color: var(--co-color-status-error, #AA2E1B);
+}
+
+/* Number field — constrain width */
+co-number-field {
+  max-width: 240px;
+}
+
+/* Ordering */
+.co-form-ordering {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-xs, 4px);
+}
+
+.co-form-ordering__label {
+  font-size: var(--co-font-size-14, 14px);
+  font-weight: 500;
+  color: var(--co-semantic-text-default, #111);
+  margin-bottom: var(--co-spacing-xs, 4px);
+}
+
+.co-form-ordering__helper {
+  margin: 0 0 var(--co-spacing-xs, 4px);
+  font-size: var(--co-font-size-12, 12px);
+  color: var(--co-semantic-text-secondary, #6b7280);
+}
+
+.co-form-ordering__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-xs, 4px);
+}
+
+.co-form-ordering__item {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm, 8px);
+  padding: var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);
+  border: 1px solid var(--co-semantic-border-default, #e5e7eb);
+  border-radius: var(--co-border-radius-xxs, 4px);
+  background: var(--co-semantic-surface-secondary, #f7f6f0);
+  transition: border-color 120ms, box-shadow 120ms, opacity 120ms;
+  cursor: grab;
+  user-select: none;
+}
+
+.co-form-ordering__item:hover {
+  border-color: var(--co-color-primary-azul, #2563eb);
+}
+
+.co-form-ordering__item.is-dragging {
+  opacity: 0.4;
+  cursor: grabbing;
+}
+
+.co-form-ordering__item.is-drop-target {
+  border-color: var(--co-color-primary-azul, #2563eb);
+  box-shadow: 0 -2px 0 0 var(--co-color-primary-azul, #2563eb);
+}
+
+.co-form-ordering__grip {
+  display: flex;
+  align-items: center;
+  color: var(--co-semantic-text-muted, #9ca3af);
+  flex-shrink: 0;
+  cursor: grab;
+}
+
+.co-form-ordering__num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--co-border-radius-full, 9999px);
+  background: color-mix(in srgb, var(--co-color-primary-azul, #2563eb) 10%, transparent);
+  color: var(--co-color-primary-azul, #2563eb);
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.co-form-ordering__text {
+  flex: 1;
+  font-size: var(--co-font-size-14, 14px);
+  color: var(--co-semantic-text-default, #111);
+}
+
+.co-form-ordering__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex-shrink: 0;
+}
+
+.co-form-ordering__move-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--co-semantic-text-muted, #9ca3af);
+  cursor: pointer;
+  border-radius: var(--co-border-radius-xxs, 4px);
+}
+
+.co-form-ordering__move-btn:hover:not(:disabled) {
+  background: var(--co-semantic-surface-hover, #f3f4f6);
+  color: var(--co-semantic-text-default, #111);
+}
+
+.co-form-ordering__move-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* Matching */
+.co-form-matching {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-xs, 4px);
+}
+
+.co-form-matching__label {
+  font-size: var(--co-font-size-14, 14px);
+  font-weight: 500;
+  color: var(--co-semantic-text-default, #111);
+  margin-bottom: var(--co-spacing-xs, 4px);
+}
+
+.co-form-matching__helper {
+  margin: 0 0 var(--co-spacing-xs, 4px);
+  font-size: var(--co-font-size-12, 12px);
+  color: var(--co-semantic-text-secondary, #6b7280);
+}
+
+.co-form-matching__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm, 8px);
+}
+
+.co-form-matching__row {
+  display: grid;
+  grid-template-columns: 1fr 20px 1fr;
+  gap: var(--co-spacing-sm, 8px);
+  align-items: center;
+}
+
+.co-form-matching__term {
+  font-size: var(--co-font-size-14, 14px);
+  font-weight: 500;
+  color: var(--co-semantic-text-default, #111);
+  padding: var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);
+  border: 1px solid var(--co-semantic-border-default, #e5e7eb);
+  border-radius: var(--co-border-radius-xxs, 4px);
+  background: var(--co-semantic-surface-secondary, #f7f6f0);
+}
+
+.co-form-matching__row co-icon {
+  color: var(--co-semantic-text-muted, #9ca3af);
+  justify-self: center;
+}
+
+.co-form-matching__select {
+  min-width: 0;
+}
+
+/* Image Choice */
+.co-form-image-choice {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-xs, 4px);
+}
+
+.co-form-image-choice__label {
+  font-size: var(--co-font-size-14, 14px);
+  font-weight: 500;
+  color: var(--co-semantic-text-default, #111);
+  margin-bottom: var(--co-spacing-xs, 4px);
+}
+
+.co-form-image-choice__helper {
+  margin: 0 0 var(--co-spacing-xs, 4px);
+  font-size: var(--co-font-size-12, 12px);
+  color: var(--co-semantic-text-secondary, #6b7280);
+}
+
+.co-form-image-choice__helper[data-status="error"] {
+  color: var(--co-color-status-error, #AA2E1B);
+}
+
+.co-form-image-choice__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: var(--co-spacing-sm, 8px);
+}
+
+.co-form-image-choice__card {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid var(--co-semantic-border-default, #e5e7eb);
+  border-radius: var(--co-border-radius-xs, 8px);
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 120ms, box-shadow 120ms;
+  background: var(--co-semantic-surface-secondary, #f7f6f0);
+}
+
+.co-form-image-choice__card:hover:not(.is-disabled) {
+  border-color: var(--co-color-primary-azul, #2563eb);
+}
+
+.co-form-image-choice__card.is-selected {
+  border-color: var(--co-color-primary-azul, #2563eb);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-color-primary-azul, #2563eb) 20%, transparent);
+}
+
+.co-form-image-choice__card.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.co-form-image-choice__img-wrap {
+  width: 100%;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--co-semantic-text-muted, #9ca3af);
+}
+
+.co-form-image-choice__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.co-form-image-choice__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs, 4px);
+  padding: var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);
+  border-top: 1px solid var(--co-semantic-border-default, #e5e7eb);
+  min-height: 32px;
+}
+
+.co-form-image-choice__check {
+  flex-shrink: 0;
+  display: flex;
+  color: var(--co-semantic-text-muted, #9ca3af);
+}
+
+.co-form-image-choice__card.is-selected .co-form-image-choice__check {
+  color: var(--co-color-primary-azul, #2563eb);
+}
+
+.co-form-image-choice__text {
+  font-size: var(--co-font-size-13, 13px);
+  color: var(--co-semantic-text-default, #111);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/collection/components/co-form/co-form.js

@@ -53,6 +53,8 @@ export class CoForm {
         this.footerAlign = 'end';
         /** Hide the entire footer (use when embedded in a wizard or custom shell). */
         this.hideFooter = false;
+        /** When to run validation: on every change, on blur, or only on submit. */
+        this.validateOn = 'change';
         this.snapshot = {
             values: {},
             errors: {},
@@ -128,6 +130,9 @@ export class CoForm {
             }
             this.handleFieldChange(f.name, value);
         };
+        // ── Ordering (kind: 'ordering') ───────────────────────────────────────────
+        this.orderingDragIdx = null;
+        this.orderingDropIdx = null;
     }
     componentWillLoad() {
         this.rebuildController();
@@ -195,6 +200,7 @@ export class CoForm {
         this.controller = createForm({
             schema: { instance },
             initialValues,
+            validateOn: this.validateOn,
         });
         this.fields = describeFields(instance.formSchema.properties);
         this.snapshot = this.controller.state;
@@ -455,8 +461,14 @@ export class CoForm {
         switch (f.kind) {
             case 'text':
                 return (h("co-input", Object.assign({}, common, { value: value !== null && value !== void 0 ? value : '', onCoInput: (e) => this.handleFieldChange(f.name, e.detail) })));
-            case 'textarea':
-                return (h("co-input", Object.assign({}, common, { multiline: true, value: value !== null && value !== void 0 ? value : '', onCoInput: (e) => this.handleFieldChange(f.name, e.detail) })));
+            case 'textarea': {
+                const textareaId = `co-form-${f.name}`;
+                const helperId = helperText ? `co-form-${f.name}-helper` : undefined;
+                return (h("div", { class: "co-form-textarea-wrap", "data-full": f.originalAttrs.full ? 'true' : undefined }, f.label && h("label", { class: "co-form-textarea-wrap__label", htmlFor: textareaId }, f.label), h("textarea", { id: textareaId, class: {
+                        'co-form-textarea': true,
+                        'co-form-textarea--error': status === 'error',
+                    }, name: f.name, placeholder: f.placeholder, disabled: disabled, required: required, rows: 4, "aria-invalid": status === 'error' ? 'true' : undefined, "aria-describedby": helperId, value: value !== null && value !== void 0 ? value : '', onInput: (e) => this.handleFieldChange(f.name, e.target.value) }), helperText && h("p", { id: helperId, class: "co-form-textarea-wrap__helper", "data-status": status }, helperText)));
+            }
             case 'html':
                 return (h("co-input", Object.assign({}, common, { multiline: true, value: value !== null && value !== void 0 ? value : '', onCoInput: (e) => this.handleFieldChange(f.name, e.detail) })));
             case 'date':
@@ -467,16 +479,28 @@ export class CoForm {
                 return (h("co-switch", Object.assign({}, common, { checked: !!value, onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
             case 'select':
                 return (h("co-select", Object.assign({}, common, { options: JSON.stringify(this.optionsFor(f)), value: String(value !== null && value !== void 0 ? value : ''), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
+            case 'radio':
+                return (h("co-radio-group", Object.assign({}, common, { options: JSON.stringify(this.optionsFor(f)), value: String(value !== null && value !== void 0 ? value : ''), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
+            case 'checkbox':
+                return (h("co-checkbox-group", Object.assign({}, common, { options: JSON.stringify(this.optionsFor(f)), value: JSON.stringify(Array.isArray(value) ? value : []), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
             case 'rating':
                 return (h("co-rating", Object.assign({}, common, { value: typeof value === 'number' ? value : 0, max: Number((_c = f.originalAttrs.max) !== null && _c !== void 0 ? _c : 5), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
             case 'slider':
                 return (h("co-slider", Object.assign({}, common, { value: typeof value === 'number' ? value : Number((_d = f.originalAttrs.min) !== null && _d !== void 0 ? _d : 0), min: Number((_e = f.originalAttrs.min) !== null && _e !== void 0 ? _e : 0), max: Number((_f = f.originalAttrs.max) !== null && _f !== void 0 ? _f : 100), step: Number((_g = f.originalAttrs.step) !== null && _g !== void 0 ? _g : 1), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
             case 'color':
-                return (h("co-input", Object.assign({}, common, { type: "color", value: typeof value === 'string' ? value : '#000000', onCoInput: (e) => this.handleFieldChange(f.name, e.detail) })));
+                return (h("co-color-picker", Object.assign({}, common, { value: typeof value === 'string' ? value : '', presets: f.originalAttrs.presets ? JSON.stringify(f.originalAttrs.presets) : undefined, onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
             case 'section':
                 return (h("div", { class: "co-form-section", key: f.name }, h("h3", { class: "co-form-section__title" }, f.label), f.helperText && h("p", { class: "co-form-section__desc" }, f.helperText)));
+            case 'phone':
+                return (h("co-phone-field", Object.assign({}, common, { value: typeof value === 'string' ? value : '', defaultCountry: f.originalAttrs.defaultCountry || '', onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
             case 'file':
                 return (h("co-input", Object.assign({}, common, { type: "file", onCoInput: (e) => this.handleFieldChange(f.name, e.detail) })));
+            case 'ordering':
+                return this.renderOrdering(f, value);
+            case 'matching':
+                return this.renderMatching(f, value);
+            case 'image-choice':
+                return this.renderImageChoice(f, value);
             case 'array':
                 return this.renderRepeater(f, value);
             case 'ref': {
@@ -529,6 +553,123 @@ export class CoForm {
             return (h("co-input", { key: n, label: ((_a = itemSchema[n]) === null || _a === void 0 ? void 0 : _a.label) || n, value: (_b = row[n]) !== null && _b !== void 0 ? _b : '', disabled: this.disabled || f.disabled, onCoInput: (e) => patchRow(idx, n, e.detail) }));
         })), h("co-icon-button", { icon: "trash", variant: "ghost", onClick: () => removeRow(idx), disabled: this.disabled || f.disabled })))), h("co-button", { label: "Agregar", variant: "outlined", "icon-left": "plus", onClick: addRow, disabled: this.disabled || f.disabled })));
     }
+    // ── Image Choice (kind: 'image-choice') ────────────────────────────────
+    renderImageChoice(f, value) {
+        const opts = Array.isArray(f.originalAttrs.enum) ? f.originalAttrs.enum : [];
+        const images = Array.isArray(f.originalAttrs.optionImages) ? f.originalAttrs.optionImages : [];
+        const isMulti = !!f.originalAttrs.multiSelect;
+        const isDisabled = this.disabled || f.disabled;
+        const isTouched = !!this.snapshot.touched[f.name];
+        const errors = isTouched ? this.snapshot.errors[f.name] || [] : [];
+        const helperText = errors[0] || f.helperText;
+        // For single select: value is a string (option text or index).
+        // For multi select: value is an array.
+        const selected = isMulti
+            ? (Array.isArray(value) ? value : [])
+            : (value != null && value !== '' ? [String(value)] : []);
+        const toggle = (opt) => {
+            if (isDisabled)
+                return;
+            if (isMulti) {
+                const next = selected.includes(opt)
+                    ? selected.filter((s) => s !== opt)
+                    : [...selected, opt];
+                this.handleFieldChange(f.name, next);
+            }
+            else {
+                this.handleFieldChange(f.name, opt);
+            }
+        };
+        return (h("div", { class: "co-form-image-choice", key: f.name, "data-full": f.originalAttrs.full ? 'true' : undefined }, f.label && h("label", { class: "co-form-image-choice__label" }, f.label), helperText && h("p", { class: "co-form-image-choice__helper", "data-status": errors.length ? 'error' : undefined }, helperText), h("div", { class: "co-form-image-choice__grid", role: isMulti ? 'group' : 'radiogroup', "aria-label": f.label || f.name }, opts.map((opt, idx) => {
+            const isSelected = selected.includes(opt);
+            const imgSrc = images[idx] || '';
+            return (h("div", { class: `co-form-image-choice__card ${isSelected ? 'is-selected' : ''} ${isDisabled ? 'is-disabled' : ''}`, key: `${f.name}-${idx}`, onClick: () => toggle(opt), onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        toggle(opt);
+                    }
+                }, role: isMulti ? 'checkbox' : 'radio', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": isDisabled ? 'true' : undefined, tabIndex: isDisabled ? -1 : 0 }, h("div", { class: "co-form-image-choice__img-wrap" }, imgSrc
+                ? h("img", { src: imgSrc, alt: opt, class: "co-form-image-choice__img" })
+                : h("co-icon", { name: "image-square", size: "32" })), h("div", { class: "co-form-image-choice__footer" }, h("span", { class: "co-form-image-choice__check" }, isSelected && h("co-icon", { name: "check-circle", size: "18", weight: "fill" }), !isSelected && h("co-icon", { name: "circle", size: "18" })), opt && h("span", { class: "co-form-image-choice__text" }, opt))));
+        }))));
+    }
+    renderOrdering(f, value) {
+        const items = Array.isArray(f.originalAttrs.enum) ? f.originalAttrs.enum : [];
+        // Value is the user's ordering: an array of item strings in the order they chose.
+        const ordered = Array.isArray(value) ? value : [...items];
+        const isDisabled = this.disabled || f.disabled;
+        const isTouched = !!this.snapshot.touched[f.name];
+        const errors = isTouched ? this.snapshot.errors[f.name] || [] : [];
+        const helperText = errors[0] || f.helperText;
+        const onDragStart = (ev, idx) => {
+            if (isDisabled)
+                return;
+            this.orderingDragIdx = idx;
+            if (ev.dataTransfer) {
+                ev.dataTransfer.effectAllowed = 'move';
+                ev.dataTransfer.setData('text/plain', String(idx));
+            }
+        };
+        const onDragOver = (ev, idx) => {
+            if (this.orderingDragIdx === null)
+                return;
+            ev.preventDefault();
+            if (ev.dataTransfer)
+                ev.dataTransfer.dropEffect = 'move';
+            this.orderingDropIdx = idx;
+        };
+        const onDrop = (ev, idx) => {
+            ev.preventDefault();
+            const fromIdx = this.orderingDragIdx;
+            this.orderingDragIdx = null;
+            this.orderingDropIdx = null;
+            if (fromIdx === null || fromIdx === idx)
+                return;
+            const next = [...ordered];
+            const [moved] = next.splice(fromIdx, 1);
+            // Adjust target for downward moves: removing fromIdx shifts later indices down by 1
+            const insertAt = fromIdx < idx ? idx - 1 : idx;
+            next.splice(insertAt, 0, moved);
+            this.handleFieldChange(f.name, next);
+        };
+        const onDragEnd = () => {
+            this.orderingDragIdx = null;
+            this.orderingDropIdx = null;
+        };
+        const moveItem = (fromIdx, toIdx) => {
+            if (isDisabled || toIdx < 0 || toIdx >= ordered.length)
+                return;
+            const next = [...ordered];
+            const [moved] = next.splice(fromIdx, 1);
+            next.splice(toIdx, 0, moved);
+            this.handleFieldChange(f.name, next);
+        };
+        return (h("div", { class: "co-form-ordering", key: f.name, "data-full": f.originalAttrs.full ? 'true' : undefined }, f.label && h("label", { class: "co-form-ordering__label" }, f.label), helperText && h("p", { class: "co-form-ordering__helper" }, helperText), h("div", { class: "co-form-ordering__list", role: "list", "aria-label": f.label }, ordered.map((item, idx) => (h("div", { class: {
+                'co-form-ordering__item': true,
+                'is-dragging': this.orderingDragIdx === idx,
+                'is-drop-target': this.orderingDropIdx === idx && this.orderingDragIdx !== idx,
+            }, key: `${f.name}-${idx}`, role: "listitem", draggable: !isDisabled, onDragStart: (ev) => onDragStart(ev, idx), onDragOver: (ev) => onDragOver(ev, idx), onDrop: (ev) => onDrop(ev, idx), onDragEnd: onDragEnd }, h("span", { class: "co-form-ordering__grip", "aria-hidden": "true" }, h("co-icon", { name: "dots-six-vertical", size: "16" })), h("span", { class: "co-form-ordering__num" }, idx + 1), h("span", { class: "co-form-ordering__text" }, item), h("span", { class: "co-form-ordering__actions" }, h("button", { type: "button", class: "co-form-ordering__move-btn", disabled: isDisabled || idx === 0, onClick: () => moveItem(idx, idx - 1), "aria-label": `Move ${item} up` }, h("co-icon", { name: "caret-up", size: "14" })), h("button", { type: "button", class: "co-form-ordering__move-btn", disabled: isDisabled || idx === ordered.length - 1, onClick: () => moveItem(idx, idx + 1), "aria-label": `Move ${item} down` }, h("co-icon", { name: "caret-down", size: "14" })))))))));
+    }
+    // ── Matching (kind: 'matching') ───────────────────────────────────────────
+    renderMatching(f, value) {
+        const leftItems = Array.isArray(f.originalAttrs.matchLeft) ? f.originalAttrs.matchLeft : [];
+        const rightItems = Array.isArray(f.originalAttrs.matchRight) ? f.originalAttrs.matchRight : [];
+        // Value is an object mapping left index → selected right value string.
+        const pairs = value && typeof value === 'object' ? value : {};
+        const isDisabled = this.disabled || f.disabled;
+        const isTouched = !!this.snapshot.touched[f.name];
+        const errors = isTouched ? this.snapshot.errors[f.name] || [] : [];
+        const helperText = errors[0] || f.helperText;
+        const rightOptions = rightItems.map((r) => ({ label: r, value: r }));
+        const handleSelect = (leftIdx, selectedValue) => {
+            const next = Object.assign(Object.assign({}, pairs), { [String(leftIdx)]: selectedValue });
+            this.handleFieldChange(f.name, next);
+        };
+        return (h("div", { class: "co-form-matching", key: f.name, "data-full": f.originalAttrs.full ? 'true' : undefined }, f.label && h("label", { class: "co-form-matching__label" }, f.label), helperText && h("p", { class: "co-form-matching__helper" }, helperText), h("div", { class: "co-form-matching__list" }, leftItems.map((term, idx) => {
+            var _a;
+            return (h("div", { class: "co-form-matching__row", key: `${f.name}-${idx}` }, h("span", { class: "co-form-matching__term" }, term), h("co-icon", { name: "arrow-right", size: "16" }), h("co-select", { class: "co-form-matching__select", options: JSON.stringify(rightOptions), value: (_a = pairs[String(idx)]) !== null && _a !== void 0 ? _a : '', placeholder: "Select match\u2026", disabled: isDisabled, onCoChange: (e) => handleSelect(idx, e.detail) })));
+        }))));
+    }
     static get is() { return "co-form"; }
     static get originalStyleUrls() {
         return {
@@ -814,6 +955,26 @@ export class CoForm {
                 "attribute": "hide-footer",
                 "defaultValue": "false"
             },
+            "validateOn": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'change' | 'blur' | 'submit'",
+                    "resolved": "\"blur\" | \"change\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When to run validation: on every change, on blur, or only on submit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validate-on",
+                "defaultValue": "'change'"
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,
@@ -847,7 +1008,9 @@ export class CoForm {
             "snapshot": {},
             "refStates": {},
             "themeStyles": {},
-            "hasBg": {}
+            "hasBg": {},
+            "orderingDragIdx": {},
+            "orderingDropIdx": {}
         };
     }
     static get events() {

package/dist/collection/components/co-form-wizard/co-form-wizard.css

@@ -190,6 +190,11 @@
   background: var(--co-semantic-surface-hover, #f9fafb);
 }
 
+/* When only the submit/next button is present, push it right */
+.co-form-wizard__nav co-button:only-child {
+  margin-left: auto;
+}
+
 .co-form-wizard__empty {
   padding: var(--co-spacing-lg, 16px);
   text-align: center;