@excom/super-form 0.1.0

package/.rush/temp/chunked-rush-logs/super-form.apply-exports.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/chunked-rush-logs/super-form.build_docs.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/chunked-rush-logs/super-form.build_package-metas.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/apply-exports/all.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/.rush/temp/operation/apply-exports/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/operation/apply-exports/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 39.44651799999997
+}

package/.rush/temp/operation/build_docs/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/.rush/temp/operation/build_docs/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/operation/build_docs/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 57.36623900000018
+}

package/.rush/temp/operation/build_package-metas/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/.rush/temp/operation/build_package-metas/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/build_package-metas/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 106.06559299999981
+}

package/.rush/temp/shrinkwrap-deps.json

@@ -0,0 +1,3 @@
+{
+  "../../packages/super-form": "../../packages/super-form:fgUo1XbKfCrQYlJAtIvTnfsOnmy+P0W0FMZOE7XPyBk=:"
+}

package/config/rig.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+  "rigPackageName": "@excom/heft-rig",
+  "rigProfile": "default"
+}

package/index.ts

@@ -0,0 +1,17 @@
+import { SuperForm } from "./super-form";
+
+SuperForm.define();
+
+export { SuperForm };
+
+type T_HTMLSuperFormElement = typeof SuperForm.CustomElement;
+declare global {
+  interface HTMLSuperFormElement extends T_HTMLSuperFormElement {}
+  interface Window {
+    HTMLSuperFormElement: HTMLSuperFormElement;
+  }
+  interface HTMLElementTagNameMap {
+    "super-form": HTMLSuperFormElement;
+  }
+}
+export type { HTMLSuperFormElement };

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@excom/super-form",
+  "version": "0.1.0",
+  "description": "<super-form> custom element",
+  "license": "MIT",
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@excom/fetchable-element": "^0.1.0",
+    "@excom/neutron": "^0.1.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@excom/heft-rig": "^0.1.0",
+    "@excom/kit-logger": "^0.1.0",
+    "@excom/quark": "^0.1.0",
+    "@excom/quark-sheet": "^0.1.0"
+  },
+  "repository": {
+    "url": "excom-dev/nucleus",
+    "directory": "packages/super-form"
+  },
+  "homepage": "https://github.com/excom-dev/nucleus/tree/main/packages/super-form/support/docs/README.md",
+  "bugs": "https://github.com/excom-dev/nucleus/issues",
+  "keywords": [
+    "super-form",
+    "neutron",
+    "custom-elements"
+  ],
+  "excom": {
+    "packageType": "kit-element"
+  },
+  "scripts": {
+    "build": "node node_modules/@excom/heft-rig/scripts/vite-build.mjs",
+    "build:watch": "node node_modules/@excom/heft-rig/scripts/vite-build-watch.mjs",
+    "format": "node node_modules/@excom/heft-rig/scripts/format.mjs",
+    "test": "node node_modules/@excom/heft-rig/scripts/vitest.mjs",
+    "coverage": "node node_modules/@excom/heft-rig/scripts/coverage.mjs",
+    "dev": "node node_modules/@excom/heft-rig/scripts/vite-dev.mjs",
+    "preview": "node node_modules/@excom/heft-rig/scripts/vite-preview.mjs",
+    "build:package-metas": "node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs",
+    "build:docs": "node node_modules/@excom/heft-rig/scripts/build-docs.mjs"
+  }
+}

package/rush-logs/super-form.apply-exports.cache.log

@@ -0,0 +1 @@
+Caching has been disabled for this project's "apply-exports" command.

package/rush-logs/super-form.apply-exports.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/rush-logs/super-form.build_docs.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:docs" command, so caching has been disabled.

package/rush-logs/super-form.build_docs.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/rush-logs/super-form.build_package-metas.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:package-metas" command, so caching has been disabled.

package/rush-logs/super-form.build_package-metas.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/super-form.ts

@@ -0,0 +1,100 @@
+import { FetchableElement } from "@excom/fetchable-element";
+import { Neutron, TEvent } from "@excom/neutron";
+
+export type FetchArgs = [url: string, requestInit: RequestInit];
+
+export type SuperFormSubmitEvent = TEvent & {
+  type: "super-form-submit";
+  detail: FetchArgs;
+};
+
+/** Native form `submit` this element intercepts, not a Neutron emit. */
+export type SuperFormNativeSubmitEvent = SubmitEvent & {
+  type: "submit";
+  bubbles: true;
+  cancelable: true;
+  composed: false;
+};
+
+/**
+ * Turns a plain `<form>` into a zero-JS `fetch()` submit — intercepts
+ * `submit`, converts the form's fields into a JSON payload (see
+ * `formToJson()` below), and sends it to the form's `action` (or
+ * `api-url` / `api-method`, if no `form-ref` form is found). Composes
+ * `FetchableElement`, so `is-loading` / `is-success` / `is-error` / `provision`
+ * and every request-building attribute (headers, credentials, …) are
+ * inherited — see that package's docs for the full list.
+ *
+ * Form field `name`s become JSON keys: dot-separated names nest
+ * (`address.city` → `{ address: { city } }`) and a trailing `[]` collects
+ * same-named fields into an array (`tags[]` → `{ tags: [...] }`).
+ *
+ * @summary Zero-JS `fetch()` submit for a plain `<form>`.
+ *
+ * @fires super-form-submit - Internal — dispatched whenever a submit is
+ *   about to run (real `submit` or the `--submit` command). Built by
+ *   `getFetchArgs()`. Cancelable; default action calls `doFetch()`.
+ * @type SuperFormSubmitEvent
+ * @listens submit - The default action of the `<form>` matched by
+ *   `form-ref` (or any descendant `<form>`); prevented, then converted
+ *   into `super-form-submit`.
+ * @type SuperFormNativeSubmitEvent
+ * @command --submit - Submits programmatically (`<button command="--submit"
+ *   commandfor="…">`) — the only option when `form-ref` points to a form
+ *   that isn't a descendant, since this element can't hear its `submit`
+ *   event directly.
+ * @default-action super-form-submit - Calls `doFetch(url, requestInit)`
+ *   with the event's detail.
+ *
+ * @example
+ * <super-form>
+ *   <form action="/api/signup" method="post">
+ *     <input name="email" type="email" required>
+ *     <button type="submit">Sign up</button>
+ *   </form>
+ * </super-form>
+ */
+export const SuperForm = Neutron.compose([
+  FetchableElement,
+  Neutron({
+    tag: "super-form",
+    props: {
+      /**
+       * @option
+       * CSS selector for the `<form>` to intercept. The form's
+       * `action` / `method` / `enctype` take priority over `api-url` /
+       * `api-method` below. Must be a descendant to be heard directly —
+       * point elsewhere and invoke the `--submit` command instead.
+       * @default :scope form
+       * @values <CSS Selector>
+       */
+      formRef: {
+        type: String,
+        // Non-descendant form: this element won't hear `submit`; invoke `--submit`
+        defaultValue: () => ":scope form",
+      },
+      /**
+       * @option
+       * HTTP method used when the form itself has no `method`.
+       * @default POST
+       */
+      apiMethod: {
+        type: String,
+        defaultValue: () => "POST",
+      },
+    },
+  }),
+])
+  .onEvent("submit", ({ getFetchArgs }, e) => {
+    // Block the native submit
+    e.preventDefault();
+    return {
+      emit: ["super-form-submit", { detail: [getFetchArgs()] }],
+    };
+  })
+  .onCommand("--submit", ({ getFetchArgs }) => ({
+    emit: ["super-form-submit", { detail: [getFetchArgs()] }],
+  }))
+  .onEventDefault("super-form-submit", (_, { detail }) => ({
+    doFetch: [detail[0], detail[1]],
+  }));

package/support/custom-elements.json

@@ -0,0 +1,107 @@
+{
+  "schemaVersion": "1.0.0",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "super-form.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "SuperForm",
+          "customElement": true,
+          "tagName": "super-form",
+          "mixins": [
+            {
+              "name": "FetchableElement",
+              "package": "@excom/fetchable-element"
+            }
+          ],
+          "summary": "Zero-JS `fetch()` submit for a plain `<form>`.",
+          "description": "Native form `submit` this element intercepts, not a Neutron emit.",
+          "attributes": [
+            {
+              "name": "form-ref",
+              "type": {
+                "text": "string"
+              },
+              "description": "CSS selector for the `<form>` to intercept. The form's `action` / `method` / `enctype` take priority over `api-url` / `api-method` below. Must be a descendant to be heard directly — point elsewhere and invoke the `--submit` command instead.",
+              "fieldName": "formRef",
+              "default": ":scope form",
+              "values": [
+                "<CSS Selector>"
+              ]
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "formRef",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "readonly": false,
+              "description": "CSS selector for the `<form>` to intercept. The form's `action` / `method` / `enctype` take priority over `api-url` / `api-method` below. Must be a descendant to be heard directly — point elsewhere and invoke the `--submit` command instead.",
+              "default": ":scope form",
+              "_neutron": {
+                "surface": "option"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "super-form-submit",
+              "description": "Internal — dispatched whenever a submit is about to run (real `submit` or the `--submit` command). Built by `getFetchArgs()`. Cancelable; default action calls `doFetch()`.",
+              "type": {
+                "text": "SuperFormSubmitEvent",
+                "expanded": "CustomEvent & { type: \"super-form-submit\"; detail: [url: string, requestInit: RequestInit]; bubbles: true; cancelable: true; composed: true }"
+              }
+            }
+          ],
+          "_neutron": {
+            "listens": [
+              {
+                "name": "submit",
+                "description": "The default action of the `<form>` matched by `form-ref` (or any descendant `<form>`); prevented, then converted into `super-form-submit`.",
+                "type": {
+                  "text": "SuperFormNativeSubmitEvent",
+                  "expanded": "SubmitEvent & { type: \"submit\"; bubbles: true; cancelable: true; composed: false; }"
+                }
+              }
+            ],
+            "commands": [
+              {
+                "name": "--submit",
+                "description": "Submits programmatically (`<button command=\"--submit\" commandfor=\"…\">`) — the only option when `form-ref` points to a form that isn't a descendant, since this element can't hear its `submit` event directly."
+              }
+            ],
+            "defaultActions": [
+              {
+                "name": "super-form-submit",
+                "description": "Calls `doFetch(url, requestInit)` with the event's detail."
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SuperForm",
+          "declaration": {
+            "name": "SuperForm",
+            "module": "super-form.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "super-form",
+          "declaration": {
+            "name": "SuperForm",
+            "module": "super-form.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/support/demos/external-trigger.html

@@ -0,0 +1,43 @@
+<section>
+  <super-form id="demo-super-form-external" class="tag-article grid">
+    <form action="/api/echo" method="post">
+      <label>
+        Nickname
+        <input type="text" name="nickname" placeholder="John" required>
+      </label>
+    </form>
+    <ul></ul>
+    <ul></ul>
+    <template id="demo-super-form-item">
+      <li class="tag-code"></li>
+    </template>
+  </super-form>
+  <button type="button" command="--submit" commandfor="demo-super-form-external">
+    Save (outside the form)
+  </button>
+  <style>
+    #demo-super-form-external-trigger { max-width: none; }
+    #demo-super-form-external-trigger super-form {
+      &[is-loading] {
+        opacity: 0.5;
+        border: 1px dashed yellow;
+      }
+      &[is-success] { border: 1px solid green; }
+      &[is-error] {
+        border: 1px solid red;
+        &::before { content: "An error occurred."; }
+      }
+      ul:first-of-type::before { content: "Submitted JSON:"; }
+      ul:last-of-type::before { content: "Response data:"; }
+      li { display: block; }
+    }
+  </style>
+  <quark-sheet>
+    super-form[is-success] {
+      $res: prop("provision");
+      li { content: "#{index}: #{item}"; }
+      ul:first-of-type { content: iterate($res.body.json, "#demo-super-form-item"); }
+      ul:last-of-type { content: iterate($res, "#demo-super-form-item"); }
+    }
+  </quark-sheet>
+</section>

package/support/demos/simple.html

@@ -0,0 +1,31 @@
+<section>
+  <super-form>
+    <form action="/api/echo" method="post">
+      <input type="text" name="name" placeholder="Your name" required>
+      <button type="submit">Submit</button>
+    </form>
+    <h4></h4>
+    <span></span>
+  </super-form>
+  <quark-sheet>
+    super-form[is-success] {
+      $res: prop("provision");
+      h4 { content: "Echoed name: #{$res.body.json.name}"; }
+    }
+    super-form {
+      $res: prop("provision");
+      span { content: "HTTP status code: #{$res.status or ""}"; }
+    }
+  </quark-sheet>
+  <style>
+    #demo-super-form-simple super-form[is-loading] {
+      animation: pulse 1s linear infinite;
+      pointer-events: none;
+    }
+    @keyframes pulse {
+      0% { opacity: 0.2; }
+      50% { opacity: 0.6; }
+      100% { opacity: 0.2; }
+    }
+  </style>
+</section>

package/support/dist-docs/super-form.md

@@ -0,0 +1,212 @@
+# super-form
+
+Submit AJAX requests with HTML forms. Pair it with Quark to render the response.
+
+
+```html
+<section>
+  <super-form>
+    <form action="/api/echo" method="post">
+      <input type="text" name="name" placeholder="Your name" required>
+      <button type="submit">Submit</button>
+    </form>
+    <h4></h4>
+    <span></span>
+  </super-form>
+  <quark-sheet>
+    super-form[is-success] {
+      $res: prop("provision");
+      h4 { content: "Echoed name: #{$res.body.json.name}"; }
+    }
+    super-form {
+      $res: prop("provision");
+      span { content: "HTTP status code: #{$res.status or ""}"; }
+    }
+  </quark-sheet>
+  <style>
+    #demo-super-form-simple super-form[is-loading] {
+      animation: pulse 1s linear infinite;
+      pointer-events: none;
+    }
+    @keyframes pulse {
+      0% { opacity: 0.2; }
+      50% { opacity: 0.6; }
+      100% { opacity: 0.2; }
+    }
+  </style>
+</section>
+```
+
+
+## Features
+
+- **Makes AJAX requests** JSON payload is built from each input's `name` and `type` attributes
+- **Progressively enhanced** Doesn't replace the native `form`; it enhances it. Everything you know about `form` and `input` still applies.
+- **Provides data** Use Quark to render the response
+- **Submit command** `--submit` submits programmatically (`<button command="--submit" commandfor="…">`)
+- **Highly configurable** Headers, credentials, redirect, etc
+
+## Installation
+
+
+`@excom/super-form` v0.1.0
+
+```bash
+pnpm add @excom/super-form
+```
+
+```bash
+npm install @excom/super-form
+```
+
+```bash
+yarn add @excom/super-form
+```
+
+### Import
+
+```ts
+import "@excom/super-form";
+```
+
+
+
+## Usage
+
+Just wrap a regular form. Form fields become a JSON payload via their `name`: dot-separated names nest, and a trailing `[]` collects same-named fields into an array. `input[type]` determines the type conversion.
+
+```html
+<super-form>
+  <form action="/api/signup" method="post">
+    <input name="isAvailable" type="checkbox"> <!-- -> { isAvailable: true } -->
+    <input name="address.city" value="Anytown"> <!-- -> { address: { city: "Anytown" } } -->
+    <input name="tags[]" value="smart">
+    <input name="tags[]" value="kind"> <!-- -> { tags: ["smart", "kind"] } -->
+    <button type="submit">Sign up</button>
+  </form>
+</super-form>
+```
+
+Hook the lifecycle state with CSS:
+
+```css
+super-form[is-loading] { /* form currently submitting, show loading spinner */ }
+super-form[is-error]::before { content: "An error occurred." }
+```
+
+Or Quark:
+
+```quark
+super-form[is-success] {
+  $res: prop("provision").body;
+  span { content: $res.json.email; }
+}
+```
+
+### API Reference
+
+
+#### Attributes
+
+| Name | Surface | Type | Default | Values | Description | Inherited from |
+| --- | --- | --- | --- | --- | --- | --- |
+| `form-ref` | option | `string` | `":scope form"` | `<CSS Selector>` | CSS selector for the `<form>` to intercept. The form's `action` / `method` / `enctype` take priority over `api-url` / `api-method` below. Must be a descendant to be heard directly — point elsewhere and invoke the `--submit` command instead. |  |
+| `has-body` | option | `boolean` |  |  | Force a request body even for methods that don't imply one (`GET` / `HEAD`). Already implied for `POST` / `PUT` / `PATCH`. | `@excom/fetchable-element` |
+| `api-url` | option | `string` | `""` |  | Endpoint URL. When the request has no body, the JSON payload (from `form-ref` or custom `doFetch()` args) is merged in as query params instead. | `@excom/fetchable-element` |
+| `api-method` | option | `string` | `"GET"` |  | HTTP method. Always uppercased before the request is sent. | `@excom/fetchable-element` |
+| `header-accept` | option | `string` | `"application/json"` |  | `Accept` request header. | `@excom/fetchable-element` |
+| `header-content-type` | option | `string` | `"application/json"` |  | `Content-Type` request header. Dropped entirely when the request has no body. | `@excom/fetchable-element` |
+| `header-cache-control` | option | `string` |  |  | `Cache-Control` request header. Unset by default (browser default caching applies). | `@excom/fetchable-element` |
+| `fetch-redirect` | option | `string` |  | `"follow"` \| `"error"` \| `"manual"` | `RequestInit.redirect` mode. Unset defers to the browser default (`follow`). | `@excom/fetchable-element` |
+| `fetch-credentials` | option | `string` | `"include"` | `"omit"` \| `"same-origin"` \| `"include"` | `RequestInit.credentials` mode. | `@excom/fetchable-element` |
+| `is-loading` | state | `boolean` |  |  | A request is currently in flight. | `@excom/fetchable-element` |
+| `is-success` | state | `boolean` |  |  | The most recent request resolved successfully. Mutually exclusive with `is-error`. | `@excom/fetchable-element` |
+| `is-error` | state | `boolean` |  |  | The most recent request failed (non-2xx status, network error, or a thrown error other than `AbortError`). Fires with the `error` event. | `@excom/fetchable-element` |
+
+#### Provision
+
+| Name | Type | Description | Inherited from |
+| --- | --- | --- | --- |
+| `provision` | `FetchResponse` (`{ bodyUsed: boolean; headers: [string, string][]; ok: boolean; redirected: boolean; status: number; statusText: string; type: ResponseType; url: string; body: unknown; }`) | Response payload on success, or error payload on failure. Success shape: `{ status, statusText, ok, headers, url, redirected, bodyUsed, type, body }`. Failure shape is either that same response shape (server responded with an error status) or `{ message, stack }` (request never completed). Not reflected as an attribute. | `@excom/fetchable-element` |
+
+#### Fires
+
+| Name | Type | Description | Inherited from |
+| --- | --- | --- | --- |
+| `super-form-submit` | `SuperFormSubmitEvent` (`CustomEvent & { type: "super-form-submit"; detail: [url: string, requestInit: RequestInit]; bubbles: true; cancelable: true; composed: true }`) | Internal — dispatched whenever a submit is about to run (real `submit` or the `--submit` command). Built by `getFetchArgs()`. Cancelable; default action calls `doFetch()`. |  |
+| `super-form-loading` | `FetchableLoadingEvent` (`CustomEvent & { type: "{tag}-loading"; detail: void; bubbles: true; cancelable: true; composed: true }`) | Dispatched immediately before the request is sent. | `@excom/fetchable-element` |
+| `super-form-success` | `FetchableSuccessEvent` (`CustomEvent & { type: "{tag}-success"; detail: { bodyUsed: boolean; headers: [string, string][]; ok: boolean; redirected: boolean; status: number; statusText: string; type: ResponseType; url: string; body: unknown; }; bubbles: true; cancelable: true; composed: true }`) | Dispatched when the request resolves successfully. `event.detail` is the parsed response (see `provision`). | `@excom/fetchable-element` |
+| `super-form-error` | `FetchableErrorEvent` (`CustomEvent & { type: "{tag}-error"; detail: { bodyUsed: boolean; headers: [string, string][]; ok: boolean; redirected: boolean; status: number; statusText: string; type: ResponseType; url: string; body: unknown; } \| { message: string; stack?: string }; bubbles: true; cancelable: true; composed: true }`) | Dispatched when the request fails — non-2xx status, network error, or a thrown error. `event.detail` is the error payload (see `provision`). Not dispatched for aborted requests. | `@excom/fetchable-element` |
+
+#### Listens for
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `submit` | `SuperFormNativeSubmitEvent` (`SubmitEvent & { type: "submit"; bubbles: true; cancelable: true; composed: false; }`) | The default action of the `<form>` matched by `form-ref` (or any descendant `<form>`); prevented, then converted into `super-form-submit`. |
+
+#### Commands
+
+| Command | Action |
+| --- | --- |
+| `--submit` | Submits programmatically (`<button command="--submit" commandfor="…">`) — the only option when `form-ref` points to a form that isn't a descendant, since this element can't hear its `submit` event directly. |
+
+#### Default actions
+
+| Event | Default behavior (unless preventDefault() is called) |
+| --- | --- |
+| `super-form-submit` | Calls `doFetch(url, requestInit)` with the event's detail. |
+
+
+
+### Examples
+
+#### Comprehensive
+
+This example shows loading state, error state, rendering, and triggering from outside the form.
+
+
+```html
+<section>
+  <super-form id="demo-super-form-external" class="tag-article grid">
+    <form action="/api/echo" method="post">
+      <label>
+        Nickname
+        <input type="text" name="nickname" placeholder="John" required>
+      </label>
+    </form>
+    <ul></ul>
+    <ul></ul>
+    <template id="demo-super-form-item">
+      <li class="tag-code"></li>
+    </template>
+  </super-form>
+  <button type="button" command="--submit" commandfor="demo-super-form-external">
+    Save (outside the form)
+  </button>
+  <style>
+    #demo-super-form-external-trigger { max-width: none; }
+    #demo-super-form-external-trigger super-form {
+      &[is-loading] {
+        opacity: 0.5;
+        border: 1px dashed yellow;
+      }
+      &[is-success] { border: 1px solid green; }
+      &[is-error] {
+        border: 1px solid red;
+        &::before { content: "An error occurred."; }
+      }
+      ul:first-of-type::before { content: "Submitted JSON:"; }
+      ul:last-of-type::before { content: "Response data:"; }
+      li { display: block; }
+    }
+  </style>
+  <quark-sheet>
+    super-form[is-success] {
+      $res: prop("provision");
+      li { content: "#{index}: #{item}"; }
+      ul:first-of-type { content: iterate($res.body.json, "#demo-super-form-item"); }
+      ul:last-of-type { content: iterate($res, "#demo-super-form-item"); }
+    }
+  </quark-sheet>
+</section>
+```