@xeplr/ui-factory 1.0.7 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeplr/ui-factory",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Design data-entry screens on @xeplr/ui-canvas, save them as JSON, run them as auto-saving forms with lists of saved records — built for Claude to draft and people to refine",
   "type": "module",
   "main": "src/index.js",

package/src/designs/ControlView.jsx

@@ -195,9 +195,9 @@ function RadioView({ node, p, design, value, error, options, onChange, onBlur, d
   const text = boxStyle(p.style)
   return (
     <Field node={node} p={p} error={error || (!design && options.error) || null}>
-      <div className={`xeplr-factory-group xeplr-factory-group--${p.layout === 'horizontal' ? 'horizontal' : 'vertical'}`} role="radiogroup" aria-labelledby={`${ids(node)}-label`}>
+      <div className={`xeplr-factory-choices xeplr-factory-choices--${p.layout === 'horizontal' ? 'horizontal' : 'vertical'}`} role="radiogroup" aria-labelledby={`${ids(node)}-label`}>
         {items.map((o) => (
-          <label key={String(o.id)} className="xeplr-factory-option" style={{ fontSize: text.fontSize, fontWeight: text.fontWeight, fontStyle: text.fontStyle, color: text.color }}>
+          <label key={String(o.id)} className="xeplr-factory-choice" style={{ fontSize: text.fontSize, fontWeight: text.fontWeight, fontStyle: text.fontStyle, color: text.color }}>
             <input
               type="radio"
               name={p.name}
@@ -228,9 +228,9 @@ function MultiselectView({ node, p, design, value, error, options, onChange, onB
   }
   return (
     <Field node={node} p={p} error={error || (!design && options.error) || null}>
-      <div className={`xeplr-factory-group xeplr-factory-group--${p.layout === 'horizontal' ? 'horizontal' : 'vertical'}`} role="group" aria-labelledby={`${ids(node)}-label`}>
+      <div className={`xeplr-factory-choices xeplr-factory-choices--${p.layout === 'horizontal' ? 'horizontal' : 'vertical'}`} role="group" aria-labelledby={`${ids(node)}-label`}>
         {items.map((o) => (
-          <label key={String(o.id)} className="xeplr-factory-option" style={{ fontSize: text.fontSize, fontWeight: text.fontWeight, fontStyle: text.fontStyle, color: text.color }}>
+          <label key={String(o.id)} className="xeplr-factory-choice" style={{ fontSize: text.fontSize, fontWeight: text.fontWeight, fontStyle: text.fontStyle, color: text.color }}>
             <input
               type="checkbox"
               name={p.name}

package/src/designs/factory.css

@@ -74,11 +74,11 @@
 /* ── option groups (radio, multi-select) ───────────────────────────────────
    The group scrolls rather than spilling over the control below it, so a long
    list of options cannot cover the next field. */
-.xeplr-factory-group { display: flex; gap: calc(6 * var(--xf-u)) calc(16 * var(--xf-u)); overflow: auto; min-height: 0; }
-.xeplr-factory-group--vertical { flex-direction: column; }
-.xeplr-factory-group--horizontal { flex-direction: row; flex-wrap: wrap; align-items: center; }
-.xeplr-factory-option { display: flex; align-items: center; gap: calc(8 * var(--xf-u)); cursor: pointer; color: var(--xf-ink); }
-.xeplr-factory-option input { width: calc(16 * var(--xf-u)); height: calc(16 * var(--xf-u)); min-width: 11px; min-height: 11px; margin: 0; accent-color: var(--xf-accent); }
+.xeplr-factory-choices { display: flex; gap: calc(6 * var(--xf-u)) calc(16 * var(--xf-u)); overflow: auto; min-height: 0; }
+.xeplr-factory-choices--vertical { flex-direction: column; }
+.xeplr-factory-choices--horizontal { flex-direction: row; flex-wrap: wrap; align-items: center; }
+.xeplr-factory-choice { display: flex; align-items: center; gap: calc(8 * var(--xf-u)); cursor: pointer; color: var(--xf-ink); }
+.xeplr-factory-choice input { width: calc(16 * var(--xf-u)); height: calc(16 * var(--xf-u)); min-width: 11px; min-height: 11px; margin: 0; accent-color: var(--xf-accent); }
 
 /* ── file ─────────────────────────────────────────────────────────────────── */
 .xeplr-factory-file { display: flex; align-items: center; gap: calc(8 * var(--xf-u)); min-width: 0; }