app.js

@@ -1,109 +1,45 @@
 const {DOM, Tag, H} = Gale({
-  Form:{
-    padding: "20px"
-  },
-  Input:{
-    display:"inlnine-block",
-    padding:"0.5rem 1rem",
-    borderRadius:"0.5rem",
-    outline:"1px solid #ddd",
-    ":focus":{
-      outline: "2px solid green"
-    }
-  },
     Button: {
-    display:"inline-block",
+        padding: "20px",
-    padding:"1rem",
+        background: "orange",
-    background:"green",
+        ".Inner": {
-    color:"white",
+            fontSize: "10rem"
-    borderRadius:"0.5rem",
+        }
-    cursor:"pointer",
-    textTransform:"uppercase",
-    fontWeight:"bolder",
-    ":hover":{background:"black"}
     },
-  Complete:{
+    Outline: {
-    fontSize:"0.6rem",
+        border: "2px solid orange"
-    padding:"0.5rem",
-    background:"limegreen"
     },
-  Incomplete:{
+    Window:{
-    fontSize:"0.6rem",
+      height: "100vh",
-    padding:"0.5rem",
+      border: "2px solid black",
-    background:"yellow",
-    color:"black",
-  },
-  Delete:{
-    fontSize:"0.6rem",
-    padding:"0.5rem",
-    background:"tomato"
-  },
-
-  Title:{
-    fontSize: "2rem"
-  },
-  List:{
-    padding:"1rem",
-    background:"#ddd"
-  },
-  Item:{
       display: "flex",
-    gap:"1rem",
+      flexDirection: "row",
-    alignItems:"center"
+      alignItems: "end",
+      justifyContent: "center",
+      gap: "10px"
     },
-  Done:{
+    Ability:{
-    textDecoration:"line-through"
+      width: "50px",
+      height: "50px",
+      background: "red",
+      transition: "all 0.4s",
+      ":hover":{
+        transform:"scale(1.1)"
       }
-});
-
-/** @typedef {{name:string, done:boolean}} Todo */
-
-/** @type {{pending:string, list:Todo[]}} */
-const InitialState = {pending:"todo name", list:[]};
-const Store = vanX.Store(InitialState, "todos_v1");
-
-const PendingCreate=()=>{
-  const newTodo = /** @type {Todo} */({name:Store.pending, done:false});
-  Store.list.unshift(newTodo);
-  Store.pending = "";
-  console.log(Store);
-}
-const PendingChange =(/** @type {InputEvent}*/e)=>{
-  console.log(e);
-  Store.pending = /** @type {HTMLInputElement}*/(e.target).value;
-}
-
-
-function Form()
-{
-  const input = DOM.input.Input({value:Store.pending, oninput:PendingChange})
-  return DOM.form.Form(
-    {onsubmit(e){e.preventDefault(); PendingCreate();}},
-    ()=>
-    {
-        input.value = Store.pending;
-        input.setAttribute("data-value", Store.pending);
-        return input;
     },
-    ()=>DOM.button.Button({disabled:Store.pending == ""}, "Create")
+    Orange:{
+        background:"orange"
+    }
+}, "abilities");
+
+const UI =()=>
+{
+  return H.Window(
+    H.Ability({class:Tag("Ability", "Orange")}),
+    H.Ability(),
+    H.Ability(),
+    H.Ability.Orange(),
   )
 }
 
-function List()
+van.add(document.body, UI());
-{
-  return ()=>Store.list.length && vanX.list(DOM.ul.List, Store.list, (v, d)=>DOM.li.Item(
-    v.val.done ? DOM.button.Button.Complete({onclick(){v.val.done = false}}, "Complete") : DOM.button.Button.Incomplete({onclick(){v.val.done = true}}, "Incomplete"),
-    DOM.span({class: v.val.done ? Tag("Done") : ""}, v.val.name),
-    DOM.button.Button.Delete({onclick:d}, "Delete")
-  ));
-}
-
-van.add(
-  document.body, H.Form
-  (
-    H.Title("todos"),
-    Form(),
-    List(),
-    ()=>H.Item(Store.pending)
-  )
-);

src/gale.js

@@ -23,7 +23,7 @@ globalThis.Gale = (sheet, hash="")=>
                 case KeyGroup :
                     return Tier(`&:hover .${key.substring(KeyGroup.length)}${suffix}`, value, suffix);
             }
-            return `${ key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() }: ${value};`
+            return `${ key.replace(/([a-z])([A-Z])/g, '$1-$2') }: ${value};`
         });
     
         return `${selector}{${styles.join("\n")}}`;