@rogieking/figui3 1.0.19 → 1.0.21

package/fig.css

@@ -600,31 +600,47 @@ fig-dropdown>option {
 }
 
 /* Button */
-button,
-.button,
-fig-button,
-input[type=submit],
-input[type=button] {
+.fig-button,
+fig-button {
+  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;
-  background-color: var(--figma-color-bg-brand);
   border: 0;
-  color: var(--figma-color-text-onbrand);
+  color: inherit;
+  outline: 0;
   border-radius: var(--radius-medium);
+  background-color: var(--figma-color-bg-brand);
   font-weight: 500;
-  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+
+  &>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);
+  }
+
+  &:has(>button) {
+    padding: 0;
+  }
 
   &:active {
     background-color: var(--figma-color-bg-brand-pressed);
   }
 
   /* Variant: Ghost */
-  &[variant="ghost"],
-  &[variant="ghost"]>button {
+  &[variant="ghost"] {
     box-shadow: none;
     background: none;
     color: var(--figma-color-text);
@@ -639,15 +655,13 @@ input[type=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);
@@ -726,10 +740,12 @@ input[type=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);
   }
+
 }
 
 fig-button>button {
@@ -1599,6 +1615,11 @@ fig-tooltip {
   display: inline-flex;
   gap: var(--spacer-2);
   user-select: none;
+
+  &[full] {
+    display: flex;
+    width: 100%;
+  }
 }
 
 fig-input-text {
@@ -1791,6 +1812,9 @@ fig-spinner {
   animation: fig-spinner-spin 1.0s linear infinite;
 }
 
+/* Utilities */
+
+
 @keyframes fig-spinner-spin {
   from {
     transform: rotate(0deg);

package/fig.js

@@ -12,14 +12,14 @@ class FigButton extends HTMLElement {
     #selected
     constructor() {
         super()
-        this.attachShadow({ mode: 'open' })
+        //this.attachShadow({ mode: 'open' })
     }
     connectedCallback() {
         this.render()
     }
     render() {
-        this.#type = this.getAttribute("type")
-        this.shadowRoot.innerHTML = `
+        this.#type = this.getAttribute("type") || "button"
+        /*this.shadowRoot.innerHTML = `
             <style>
                 button, button:hover, button:active {
                     padding: 0;
@@ -36,10 +36,18 @@ class FigButton extends HTMLElement {
             <button type="${this.#type}">
                 <slot></slot>
             </button>
-            `;
+            `;*/
+
         this.#selected = this.hasAttribute("selected") && this.getAttribute("selected") !== "false"
-        this.button = this.shadowRoot.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
@@ -57,10 +65,13 @@ class FigButton extends HTMLElement {
         this.setAttribute("selected", value)
     }
 
-    handleClick() {
+    handleClick(event) {
         if (this.#type === "toggle") {
             this.selected = !this.#selected
         }
+        if (this.#type === "submit") {
+            this.button.click()
+        }
     }
     static get observedAttributes() {
         return ['disabled'];

package/package.json

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