@rogieking/figui3 1.0.20 → 1.0.22

package/fig.css

@@ -602,26 +602,34 @@ 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 +641,7 @@ fig-button {
   }
 
   /* Variant: Ghost */
-  &[variant="ghost"],
-  &[variant="ghost"]>button {
+  &[variant="ghost"] {
     box-shadow: none;
     background: none;
     color: var(--figma-color-text);
@@ -649,15 +656,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);
@@ -732,11 +737,16 @@ fig-button {
   }
 
   &[selected]:not([selected=false]) {
-    color: var(--figma-color-icon-brand);
-    background-color: var(--figma-color-bg-selected);
+
+    &,
+    &:hover {
+      color: var(--figma-color-icon-brand);
+      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);
   }
@@ -995,12 +1005,16 @@ input[type=checkbox]:not(.switch) {
 
   &:checked {
     background-color: var(--figma-color-bg-brand);
+    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected-strong);
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
   }
 
   &:focus {
     outline: 0;
-    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+
+    &:not(:checked) {
+      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+    }
   }
 }
 
@@ -1031,6 +1045,7 @@ input[type=radio] {
 
   &:checked {
     background-color: var(--figma-color-bg-brand);
+    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected-strong);
 
     &::after {
       transform: scale(1);
@@ -1039,7 +1054,10 @@ input[type=radio] {
 
   &:focus {
     outline: 0;
-    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+
+    &:not(:checked) {
+      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+    }
   }
 
   &:hover:not(:checked) {

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.22"
 }