From e99214ffdc72bd407a79d4611dc2b6c59dcf43a3 Mon Sep 17 00:00:00 2001
From: bat <bat@noreply.codeberg.org>
Date: Sun, 2 Apr 2023 05:47:23 +0000
Subject: [PATCH 1/2] Add button group component

---
 button-group.js | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 button-group.js

diff --git a/button-group.js b/button-group.js
new file mode 100644
index 0000000..a3e9617
--- /dev/null
+++ b/button-group.js
@@ -0,0 +1,45 @@
+export class ButtonGroup extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({open: true})
+  }
+
+  connectedCallback() {
+    const style = document.createElement('style')
+    style.value = `
+      :host {
+        display: flex;
+        direction: row-reverse;
+        gap: 5px;
+      }
+      button {
+        font-family: sans-serif;
+        font-weight: normal;
+        background: #111;
+        color: #eee;
+      }
+    `
+    this.shadowRoot.appendChild(style)
+  }
+
+  addButton(text, cls, handler) {
+    const el = document.createElement('button')
+    el.innerText = text
+    el.classList.add(cls)
+    el.addEventListener('click', () => handler)
+    this.shadowRoot.appendChild(el)
+    return el
+  }
+
+  addPrimary(text, handler) {
+    this.primary = this.addButton(
+      text, 'primary', handler
+    )
+  }
+
+  addCancel(text, handler) {
+    this.cancel = this.addButton(
+      text, 'cancel', handler
+    )
+  }
+}
\ No newline at end of file

From d8492c1a885473644decc9114d8819912dd076d5 Mon Sep 17 00:00:00 2001
From: bat <bat@noreply.codeberg.org>
Date: Sun, 2 Apr 2023 07:21:46 +0000
Subject: [PATCH 2/2] get it working

---
 button-group.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/button-group.js b/button-group.js
index a3e9617..3e6c26a 100644
--- a/button-group.js
+++ b/button-group.js
@@ -1,22 +1,27 @@
 export class ButtonGroup extends HTMLElement {
   constructor() {
     super()
-    this.attachShadow({open: true})
+    this.attachShadow({mode: 'open'})
   }
 
   connectedCallback() {
     const style = document.createElement('style')
-    style.value = `
+    style.textContent = `
       :host {
         display: flex;
-        direction: row-reverse;
+        flex-direction: row-reverse;
         gap: 5px;
       }
       button {
+        font-size: 16px;
         font-family: sans-serif;
         font-weight: normal;
         background: #111;
         color: #eee;
+        margin: 0;
+        border: none;
+        padding: 5px 10px;
+        border-radius: 3px;
       }
     `
     this.shadowRoot.appendChild(style)
@@ -26,7 +31,7 @@ export class ButtonGroup extends HTMLElement {
     const el = document.createElement('button')
     el.innerText = text
     el.classList.add(cls)
-    el.addEventListener('click', () => handler)
+    el.addEventListener('click', handler)
     this.shadowRoot.appendChild(el)
     return el
   }