3 files changed, 95 insertions, 40 deletions

diff --git a/examples/api/content.css b/examples/api/content.css
deleted file mode 100644
index 5463ba2..0000000
--- a/examples/api/content.css
+++ /dev/null
@@ -1,26 +0,0 @@
-
-#output-container-content {
-  padding: 0.5rem;
-  margin-top: 1rem;
-  border: 1px solid #888;
-
-  --cssx-children: counter-text btn-increment;
-  --count: '0';
-}
-#output-container-content::after {
-  content: "Loaded from external stylesheet";
-}
-
-#counter-text {}
-#counter-text::after { content: var(--count) }
-
-#btn-increment {
-  display: inline-block;
-  border: 1px solid gray;
-  padding: 0.3rem 0.6rem;
-  font-size: 0.9rem;
-  cursor: pointer;
-
-  --cssx-on-click: update(output-container-content, --count, '99');
-}
-#btn-increment::after { content: "Increment" }
diff --git a/examples/api/signup.css b/examples/api/signup.css
new file mode 100644
index 0000000..c5970c7
--- /dev/null
+++ b/examples/api/signup.css
@@ -0,0 +1,77 @@
+
+#signup-page-content {
+  border: 1px solid #888;
+  padding: 1rem;
+  max-width: 700px;
+  margin: 1rem auto;
+
+  --cssx-children: form#form;
+  --count: '0';
+}
+
+#signup-page-content::before {
+  content: "Sign-Up";
+  display: block;
+  font-size: 2rem;
+  border-bottom: 1px solid gray;
+}
+
+#form {
+  display: block;
+
+  --cssx-on-submit:
+    prevent-default()
+    add-class(form, 'submitting')
+    request('https://httpbin.org/post', POST)
+    remove-class(form, 'submitting')
+    add-class(form, 'submitted')
+  ;
+
+  --cssx-children: input#input-email input#input-password actions #message;
+}
+#form.submitted #message::after {
+  display: block;
+  content: "Form submitted successfully";
+}
+#form.submitting #submit-btn {
+  pointer-events: none;
+  opacity: .5;
+}
+
+#form input {
+  display: block;
+  width: 100%;
+  padding: 0.4rem 0.8rem;
+  margin-top: 1rem;
+}
+
+#input-email {
+  --cssx-on-mount:
+    set-attr('type', 'email')
+    set-attr('name', 'email')
+    set-attr('required', 'true')
+    set-attr('placeholder', 'Email. Eg:- mail@postbox.com')
+  ;
+}
+
+#input-password {
+  --cssx-on-mount:
+    set-attr('type', 'password')
+    set-attr('name', 'password')
+    set-attr('required', 'true')
+    set-attr('placeholder', 'Password. Eg:- password, password1, password2, password123')
+  ;
+}
+
+#actions {
+  text-align: right;
+  padding-top: 1rem;
+  --cssx-children: button#submit-btn;
+}
+
+#submit-btn {
+  padding: 0.4rem 0.7rem;
+  --cssx-on-mount: set-attr('type', 'submit');
+}
+#submit-btn::after { content: "Sign-Up"; }
+
diff --git a/examples/api/style.css b/examples/api/style.css
index cdf4559..b79f265 100644
--- a/examples/api/style.css
+++ b/examples/api/style.css
@@ -1,34 +1,38 @@
 body {
-  --cssx-children: button#load-btn output-container;
+  --cssx-children: button#signup-btn signup-page;
+}
+body * {
+  box-sizing: border-box;
 }
 
-#load-btn {
+#signup-btn {
   display: inline-block;
   background: #5180e9;
   color: #000;
   padding: 0.5rem 1rem;
   cursor: pointer;
 
+  --cssx-on-mount: set-attr('type', 'button');
+
   --cssx-on-click:
-    add-class(output-container, 'loading')
-    add-class(load-btn, 'loading')
-    load-cssx(output-container-content, './content.css')
-    remove-class(output-container, 'loading')
-    remove-class(load-btn, 'loading')
-    delay(0.7s)
-    js-eval('alert("Loaded page")')
+    add-class(signup-page, 'loading')
+    add-class(signup-btn, 'loading')
+    delay(0.5s)
+    load-cssx(signup-page-content, './signup.css')
+    remove-class(signup-page, 'loading')
+    remove-class(signup-btn, 'loading')
   ;
 }
-#load-btn::after { content: "Click me for magic"; }
-#load-btn.loading {
+#signup-btn::after { content: "Register now to start your free trail for $99"; }
+#signup-btn.loading {
   pointer-events: none;
   opacity: 0.4;
 }
 
-#output-container {
-  --cssx-children: output-container-content;
+#signup-page {
+  --cssx-children: signup-page-content;
 }
-#output-container.loading::after {
+#signup-page.loading::after {
   content: "Loading...";
 }