@rogieking/figui3 1.0.18 → 1.0.20

package/fig.css

@@ -600,23 +600,33 @@ fig-dropdown>option {
 }
 
 /* Button */
-button,
-.button,
-fig-button,
-input[type=submit],
-input[type=button] {
-  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);
+.fig-button,
+fig-button {
   border-radius: var(--radius-medium);
-  font-weight: 500;
   box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+  color: var(--figma-color-text-onbrand);
+
+  &,
+  &>button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    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) {
+    padding: 0;
+  }
 
   &:active {
     background-color: var(--figma-color-bg-brand-pressed);
@@ -730,6 +740,7 @@ input[type=button] {
     outline: 0;
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
   }
+
 }
 
 fig-button>button {
@@ -1599,6 +1610,11 @@ fig-tooltip {
   display: inline-flex;
   gap: var(--spacer-2);
   user-select: none;
+
+  &[full] {
+    display: flex;
+    width: 100%;
+  }
 }
 
 fig-input-text {
@@ -1791,6 +1807,9 @@ fig-spinner {
   animation: fig-spinner-spin 1.0s linear infinite;
 }
 
+/* Utilities */
+
+
 @keyframes fig-spinner-spin {
   from {
     transform: rotate(0deg);

package/fig.js

@@ -12,13 +12,14 @@ class FigButton extends HTMLElement {
     #selected
     constructor() {
         super()
-        this.attachShadow({ mode: 'open' })
+        //this.attachShadow({ mode: 'open' })
     }
     connectedCallback() {
         this.render()
     }
     render() {
-        this.shadowRoot.innerHTML = `
+        this.#type = this.getAttribute("type")
+        /*this.shadowRoot.innerHTML = `
             <style>
                 button, button:hover, button:active {
                     padding: 0;
@@ -32,20 +33,23 @@ class FigButton extends HTMLElement {
                     background: transparent;
                 }
             </style>
-            <button>
+            <button type="${this.#type}">
                 <slot></slot>
             </button>
-            `;
+            `;*/
+        this.innerHTML = `<button type="${this.#type}">${this.innerHTML}</button>`
         this.#selected = this.hasAttribute("selected") && this.getAttribute("selected") !== "false"
-        this.#type = this.getAttribute("type")
-        this.button = this.shadowRoot.querySelector('button')
+        this.button = this.querySelector('button')
         this.addEventListener("click", this.handleClick.bind(this))
+
+
     }
     get type() {
         return this.#type
     }
     set type(value) {
         this.#type = value
+        this.button.type = value
         this.setAttribute("type", value)
     }
     get selected() {
@@ -56,10 +60,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.18"
+  "version": "1.0.20"
 }