feat: stepped form docs

Author: logaretm

package.json

@@ -25,7 +25,7 @@
     "@astrojs/ts-plugin": "^1.10.4",
     "@astrojs/vue": "^5.1.0",
     "@floating-ui/vue": "^1.1.6",
-    "@formwerk/core": "https://pkg.pr.new/formwerkjs/formwerk/@formwerk/core@fc7d3b2",
+    "@formwerk/core": "^0.11.0",
     "@iconify-json/vscode-icons": "^1.2.22",
     "@stackblitz/sdk": "^1.11.0",
     "@types/byte-size": "^8.1.2",

pnpm-lock.yaml

@@ -139,7 +139,7 @@ const store = useStore({
         '@standard-schema/utils':
           'https://unpkg.com/@standard-schema/utils@0.3.0/dist/index.js',
         vue: `https://unpkg.com/vue@${version}/dist/vue.esm-browser.prod.js`,
-        '@formwerk/core': `http://127.0.0.1:8080/dist/core.mjs`,
+        '@formwerk/core': `https://unpkg.com/@formwerk/core@${fwVersion}/dist/core.mjs`,
         '@internationalized/date': `https://esm.sh/@internationalized/date`,
         zod: 'https://unpkg.com/@awaddev/zod@3.23.8-standard-schema/lib/index.mjs',
         '@vueuse/core': 'https://unpkg.com/@vueuse/core?module',

src/components/MdxRepl.vue

@@ -19,8 +19,9 @@
       body {
         margin: 0;
         box-sizing: border-box;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        font-family:
+          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+          Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         height: var(--height);
         width: 100%;
         background: linear-gradient(to right, rgb(16 185 129), rgb(5 150 105));
@@ -50,21 +51,31 @@
           0 8px 10px -6px rgb(0 0 0 / 0.1);
       }
 
-      button {
-        cursor: pointer;
+      button + button {
+        margin-left: 0.5rem;
       }
 
-      button[type='submit'] {
+      form > button {
+        cursor: pointer;
         border-radius: 0.25rem;
-        background-color: rgb(5, 150, 105);
+        background-color: rgb(209 213 219);
         padding: 0.5rem 1rem;
         font-weight: 500;
-        color: white;
+        color: #000;
         border: none;
         margin-top: 1rem;
 
         &:hover {
-          background-color: rgb(6 95 70);
+          background-color: rgb(156 163 175);
+        }
+
+        &[type='submit'] {
+          background-color: rgb(5, 150, 105);
+          color: white;
+
+          &:hover {
+            background-color: rgb(6 95 70);
+          }
         }
       }
     </style>