@rogieking/figui3 1.0.20 → 1.0.21

package/fig.css

@@ -602,26 +602,33 @@ fig-dropdown>option {
 /* Button */
 .fig-button,
 fig-button {
-  border-radius: var(--radius-medium);
   box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
   color: var(--figma-color-text-onbrand);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--spacer-4);
+  padding: 0 var(--spacer-2);
+  appearance: none;
+  border: 0;
+  color: inherit;
+  outline: 0;
+  border-radius: var(--radius-medium);
+  background-color: var(--figma-color-bg-brand);
+  font-weight: 500;
 
-  &,
   &>button {
+    background: transparent;
+    box-shadow: none;
+    border: 0;
+    appearance: none;
+    outline: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    border-radius: var(--radius-medium);
     height: var(--spacer-4);
     padding: 0 var(--spacer-2);
-    appearance: none;
-    border: 0;
-    color: inherit;
-    background-color: var(--figma-color-bg-brand);
-    font-weight: 500;
-  }
-
-  &>button {
-    background: transparent;
   }
 
   &:has(>button) {
@@ -633,8 +640,7 @@ fig-button {
   }
 
   /* Variant: Ghost */
-  &[variant="ghost"],
-  &[variant="ghost"]>button {
+  &[variant="ghost"] {
     box-shadow: none;
     background: none;
     color: var(--figma-color-text);
@@ -649,15 +655,13 @@ fig-button {
     }
   }
 
-  &[variant="ghost"][disabled=true],
-  &[variant="ghost"][disabled=true]>button {
+  &[variant="ghost"][disabled=true] {
     background-color: transparent;
   }
 
 
   /* Variant: Secondary */
-  &[variant="secondary"],
-  &[variant="secondary"]>button {
+  &[variant="secondary"] {
     box-shadow: inset 0 0 0 1px var(--figma-color-border);
     background: none;
     color: var(--figma-color-text);
@@ -736,7 +740,8 @@ fig-button {
     background-color: var(--figma-color-bg-selected);
   }
 
-  &:focus {
+  &:focus,
+  &:focus-within {
     outline: 0;
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
   }

package/fig.js

@@ -18,7 +18,7 @@ class FigButton extends HTMLElement {
         this.render()
     }
     render() {
-        this.#type = this.getAttribute("type")
+        this.#type = this.getAttribute("type") || "button"
         /*this.shadowRoot.innerHTML = `
             <style>
                 button, button:hover, button:active {
@@ -37,12 +37,17 @@ class FigButton extends HTMLElement {
                 <slot></slot>
             </button>
             `;*/
-        this.innerHTML = `<button type="${this.#type}">${this.innerHTML}</button>`
+
         this.#selected = this.hasAttribute("selected") && this.getAttribute("selected") !== "false"
-        this.button = this.querySelector('button')
         this.addEventListener("click", this.handleClick.bind(this))
 
 
+        //child nodes hack
+        requestAnimationFrame(() => {
+            this.innerHTML = `<button type="${this.#type}">${this.innerHTML}</button>`
+            this.button = this.querySelector('button')
+        })
+
     }
     get type() {
         return this.#type

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.20"
+  "version": "1.0.21"
 }