[{"data":1,"prerenderedAt":6},["ShallowReactive",2],{"playground-demo-files:disabled-form":3},{"src\u002FApp.vue":4,"src\u002Fstyles.css":5},"\u003Cscript setup lang=\"ts\">\n  import { ref } from 'vue'\n  import { useForm } from 'attaform'\n  import { z } from 'zod'\n  import '.\u002Fstyles.css'\n\n  const frozen = ref(false)\n\n  const form = useForm({\n    schema: z.object({\n      fullName: z.string().min(1, 'Your name is required'),\n      email: z.email('Enter a valid email'),\n      role: z.enum(['engineer', 'designer', 'manager']),\n    }),\n    defaultValues: { fullName: 'Ada Lovelace', email: 'ada@example.com', role: 'engineer' },\n    disabled: frozen,\n    key: 'disabled-demo',\n  })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"demo\">\n    \u003Clabel class=\"row toggle\">\n      \u003Cinput v-model=\"frozen\" type=\"checkbox\" \u002F>\n      Freeze the form\n      \u003Cspan class=\"badge\" :class=\"{ on: form.meta.disabled }\">\n        {{ form.meta.disabled ? 'read-only' : 'editable' }}\n      \u003C\u002Fspan>\n    \u003C\u002Flabel>\n\n    \u003Cform class=\"stack\" @submit.prevent>\n      \u003Clabel>\n        \u003Cspan>Full name\u003C\u002Fspan>\n        \u003Cinput v-register=\"form.register('fullName')\" autocomplete=\"name\" \u002F>\n      \u003C\u002Flabel>\n      \u003Clabel>\n        \u003Cspan>Email\u003C\u002Fspan>\n        \u003Cinput v-register=\"form.register('email')\" type=\"email\" autocomplete=\"email\" \u002F>\n      \u003C\u002Flabel>\n      \u003Clabel>\n        \u003Cspan>Role\u003C\u002Fspan>\n        \u003Cselect v-register=\"form.register('role')\">\n          \u003Coption value=\"engineer\">Engineer\u003C\u002Foption>\n          \u003Coption value=\"designer\">Designer\u003C\u002Foption>\n          \u003Coption value=\"manager\">Manager\u003C\u002Foption>\n        \u003C\u002Fselect>\n      \u003C\u002Flabel>\n    \u003C\u002Fform>\n\n    \u003Cpre>{{ form.values }}\u003C\u002Fpre>\n\n    \u003Cp class=\"hint\">\n      Flip \u003Ccode>disabled\u003C\u002Fcode> and every input freezes at once. Attaform sets the native\n      \u003Ccode>disabled\u003C\u002Fcode> attribute on each control, so the greyed, not-allowed look is plain\n      \u003Ccode>input:disabled\u003C\u002Fcode> CSS with nothing wired per field. The freeze reaches the data\n      layer too: typing while frozen leaves \u003Ccode>form.values\u003C\u002Fcode> untouched.\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n  .demo .toggle {\n    align-items: center;\n    font-weight: 500;\n  }\n  .demo .badge.on {\n    color: var(--color-accent-soft-fg);\n    background: var(--color-accent-soft);\n  }\n\u003C\u002Fstyle>\n","\u002F* GENERATED by apps\u002Fsite\u002Fscripts\u002Fdemo-styles\u002Fcodegen.mjs (do not edit).\n   Composed from registry.mjs + this demo's styles.json ({ \"with\": [...] }).\n   Regenerated on dev\u002Fbuild and gitignored. See ..\u002FREADME.md. *\u002F\n\n.demo-disabled-form .demo {\n  --color-bg: #ffffff;\n  --color-fg: #101828;\n  --color-fg-muted: #475467;\n  --color-fg-subtle: #667085;\n  --color-surface: #f9fafb;\n  --color-surface-2: #f2f4f7;\n  --color-surface-3: #eaecf0;\n  --color-border: #eaecf0;\n  --color-border-strong: #d0d5dd;\n  --color-accent: #6938ef;\n  --color-accent-hover: #5925dc;\n  --color-accent-fg: #ffffff;\n  --color-accent-soft: #f4f3ff;\n  --color-accent-soft-fg: #5925dc;\n  --color-success: #17b26a;\n  --color-success-soft: #ecfdf3;\n  --color-warning: #f79009;\n  --color-warning-soft: #fffaeb;\n  --color-danger: #f04438;\n  --color-danger-soft: #fef3f2;\n\n  display: flex;\n  flex-direction: column;\n  gap: 0.875rem;\n  max-width: 30rem;\n  color: var(--color-fg);\n  font-size: 0.875rem;\n}\n\n.dark .demo-disabled-form .demo {\n  --color-bg: #0c111d;\n  --color-fg: #f9fafb;\n  --color-fg-muted: #98a2b3;\n  --color-fg-subtle: #667085;\n  --color-surface: #101828;\n  --color-surface-2: #1d2939;\n  --color-surface-3: #344054;\n  --color-border: #1d2939;\n  --color-border-strong: #344054;\n  --color-accent: #7a5af8;\n  --color-accent-hover: #9b8afb;\n  --color-accent-fg: #0c111d;\n  --color-accent-soft: #27115f;\n  --color-accent-soft-fg: #bdb4fe;\n  --color-success: #47cd89;\n  --color-success-soft: #074d31;\n  --color-warning: #fdb022;\n  --color-warning-soft: #7a2e0e;\n  --color-danger: #f97066;\n  --color-danger-soft: #7a271a;\n}\n\n.demo-disabled-form .demo input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'], [type='color'])) {\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  background: var(--color-bg);\n  color: var(--color-fg);\n  font-family: inherit;\n  font-size: 0.875rem;\n}\n.demo-disabled-form .demo input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'], [type='color'])):focus {\n  outline: 2px solid var(--color-accent);\n  outline-offset: -1px;\n}\n.demo-disabled-form .demo input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'], [type='color'])):read-only {\n  background: var(--color-surface);\n  color: var(--color-fg-muted);\n}\n.demo-disabled-form .demo input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'], [type='color'])):disabled {\n  background: var(--color-surface);\n  color: var(--color-fg-subtle);\n  cursor: not-allowed;\n}\n\n.demo-disabled-form .demo select {\n  padding: 0.4rem 0.6rem;\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  background: var(--color-bg);\n  color: var(--color-fg);\n  font-family: inherit;\n  font-size: 0.875rem;\n}\n.demo-disabled-form .demo select:focus {\n  outline: 2px solid var(--color-accent);\n  outline-offset: -1px;\n}\n.demo-disabled-form .demo select:disabled {\n  background: var(--color-surface);\n  color: var(--color-fg-subtle);\n  cursor: not-allowed;\n}\n\n.demo-disabled-form .demo label {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n\n.demo-disabled-form .demo .row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 400;\n}\n.demo-disabled-form .demo .row input {\n  margin: 0;\n}\n.demo-disabled-form .demo .row.compact {\n  gap: 0.4rem;\n  font-size: 0.75rem;\n  color: var(--color-fg-subtle);\n}\n.demo-disabled-form .demo .row.compact input {\n  width: auto;\n}\n\n.demo-disabled-form .demo .hint {\n  margin: 0;\n  font-size: 0.75rem;\n  line-height: 1.5;\n  color: var(--color-fg-muted);\n}\n\n.demo-disabled-form .demo code {\n  padding: 0.05rem 0.3rem;\n  border-radius: 0.25rem;\n  background: var(--color-surface-2);\n  font-family: ui-monospace, monospace;\n  font-size: 0.9em;\n}\n\n.demo-disabled-form .demo pre {\n  margin: 0;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  background: var(--color-surface);\n  color: var(--color-fg);\n  font-family: ui-monospace, monospace;\n  font-size: 0.75rem;\n  overflow: auto;\n}\n\n.demo-disabled-form .demo .badge {\n  min-width: 4.25rem;\n  padding: 0.15rem 0.55rem;\n  border-radius: 999px;\n  background: var(--color-surface-2);\n  color: var(--color-fg-muted);\n  text-align: center;\n  font-family: ui-monospace, monospace;\n  font-size: 0.75rem;\n  font-weight: 600;\n}\n.demo-disabled-form .demo .badge.idle {\n  background: var(--color-surface-2);\n  color: var(--color-fg-muted);\n}\n.demo-disabled-form .demo .badge.pending {\n  background: var(--color-accent-soft);\n  color: var(--color-accent-soft-fg);\n}\n.demo-disabled-form .demo .badge.busy {\n  background: var(--color-warning-soft);\n  color: var(--color-warning);\n}\n.demo-disabled-form .demo .badge.valid,\n.demo-disabled-form .demo .badge.success {\n  background: var(--color-success-soft);\n  color: var(--color-success);\n}\n.demo-disabled-form .demo .badge.error {\n  background: var(--color-danger-soft);\n  color: var(--color-danger);\n}\n\n.demo-disabled-form .demo .stack {\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n}\n",1784252108691]