feat: adds instance element access + gets the todo example functional

3 files changed, 26 insertions, 19 deletions

diff --git a/examples/form/signup.css b/examples/form/signup.css
index e633243..3433b87 100644
--- a/examples/form/signup.css
+++ b/examples/form/signup.css
@@ -4,10 +4,11 @@
   max-width: 700px;
   margin: 1rem auto;
 
-  --cssx-disgustingly-set-innerhtml: "<h1 class='form-title'>Sign-<b>Up</b></h1>";
+  --count: '0';
 
+  --cssx-disgustingly-set-innerhtml:
+    "<h1 class='form-title'>Sign-<b>Up</b></h1>";
   --cssx-children: form#form;
-  --count: '0';
 }
 
 .form-title {
@@ -25,11 +26,15 @@
 #form {
   display: block;
 
-  --cssx-on-submit: prevent-default() add-class(form, 'submitting')
-    request('/examples/') remove-class(form, 'submitting')
-    add-class(form, 'submitted');
+  --cssx-on-submit:
+    prevent-default()
+    add-class(form, 'submitting')
+    request('/examples/')
+    remove-class(form, 'submitting')
+    add-class(form, 'submitted')
+  ;
 
-  --cssx-children: input#input-email input#input-password actions #message;
+  --cssx-children: input#input-email input#input-password #actions #message;
 }
 #form.submitted #message::after {
   display: block;
diff --git a/examples/form/style.css b/examples/form/style.css
index 63f758b..8229ef0 100644
--- a/examples/form/style.css
+++ b/examples/form/style.css
@@ -1,9 +1,7 @@
 body {
-  --cssx-children: button#signup-btn signup-page;
-}
-body * {
-  box-sizing: border-box;
+  --cssx-children: button#signup-btn #signup-page;
 }
+body * { box-sizing: border-box; }
 
 #signup-btn {
   display: inline-block;
@@ -14,10 +12,13 @@ body * {
   padding: 0.5rem 1rem;
   cursor: pointer;
 
-  --cssx-on-click: add-class(signup-page, 'loading')
-    add-class(signup-btn, 'loading') delay(0.5s)
+  --cssx-on-click:
+    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');
+    remove-class(signup-page, 'loading')
+    remove-class(signup-btn, 'loading');
 }
 #signup-btn::after {
   content: 'Register now to start your free trial for $99';
@@ -31,7 +32,7 @@ body * {
 }
 
 #signup-page {
-  --cssx-children: signup-page-content;
+  --cssx-children: div#signup-page-content;
 }
 #signup-page.loading::after {
   content: 'Loading...';
diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css
index b3b9d07..d4cd391 100644
--- a/examples/todo-list/style.css
+++ b/examples/todo-list/style.css
@@ -87,8 +87,10 @@ body * { box-sizing: border-box; }
   width: 100%;
   align-items: center;
 
+  --cssx-on-mount: update(--task-item-id, attr(data-element));
+
   --cssx-on-click: update(--done, if(get-var(--done), "false", "true"));
-  --cssx-on-update: update(checkbox, --checked, if(get-var(--done), true, false));
+  --cssx-on-update: update(":scope [data-element=checkbox]", --checked, if(get-var(--done), true, false));
 
   --cssx-children: div#checkbox div#task-text button#delete-task;
 }
@@ -97,7 +99,7 @@ body * { box-sizing: border-box; }
   flex: 2;
 }
 [data-instance=task-item] [data-element=task-text]::after {
-  content: "[" var(--done) "] " var(--text);
+  content: var(--text);
   padding-left: 0.8rem;
 }
 
@@ -115,11 +117,10 @@ body * { box-sizing: border-box; }
   background-color: transparent;
 
   --cssx-on-update:
-    update(background-color, if(get-var(--checked), get-var(--color-accent), transparent))
-  ;
+    update(background-color, if(get-var(--checked), get-var(--color-accent), transparent));
 }
 
 [data-instance=task-item] [data-element=delete-task] {
   --cssx-text: 'Delete';
-  --cssx-on-click: remove-element(task-item);
+  --cssx-on-click: remove-element(get-var(--task-item-id));
 }