Merge pull request #2 from niconiahi/feat/button-iteration

feat(button): add default value

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": ["@ariabones/playground"]
 }

.changeset/rotten-mice-walk.md

@@ -0,0 +1,5 @@
+---
+"@ariabones/button": minor
+---
+
+accept default value through data-pressed attribute

apps/playground/index.html

@@ -11,17 +11,13 @@
     <div id="root"></div>
     <script type="module" src="/src/main.ts"></script>
     <section style="display: grid; grid-template-columns: 1fr; row-gap: 8px">
-      <button
-        id="disable-button"
-        _="on click set @disabled to true"
-        is="ariabones-button"
-      >
+      <button is="ariabones-button" _="on click set @disabled to true">
         Disable button
       </button>
       <button
-        id="toggle-button"
-        _type="toggle"
         is="ariabones-button"
+        data-type="toggle"
+        data-pressed="true"
         style="display: flex; align-items: center; justify-content: center"
       >
         Toggle button

packages/button/src/index.ts

@@ -6,7 +6,7 @@ class Button extends HTMLButtonElement {
   }
 
   static get observedAttributes(): string[] {
-    return ["disabled", "_type", "style"]
+    return ["disabled", "data-type"]
   }
 
   attributeChangedCallback(
@@ -22,11 +22,18 @@ class Button extends HTMLButtonElement {
         this.removeAttribute("aria-disabled")
       }
     }
-    if (name === "_type") {
+    if (name === "data-type") {
       // toggle
       if (newValue === "toggle") {
-        this.setAttribute("_", "on click if @aria-pressed equals 'false' set @aria-pressed to 'true' else set @aria-pressed to 'false'")
-        this.setAttribute("aria-pressed", "false")
+        const pressed = this.getAttribute("data-pressed")
+        this.setAttribute("aria-pressed", pressed ?? "false")
+        this.setAttribute("_", `
+        on click 
+          if @aria-pressed equals 'true' 
+            set @aria-pressed to 'false'
+          else 
+            set @aria-pressed to 'true'
+        `)
       }
 
       // menu