@rogieking/figui3 1.0.15 → 1.0.17

package/example.html

@@ -48,8 +48,9 @@
                 </svg>
             </fig-button>
             <fig-tooltip text="Toggle off/on">
-                <fig-button variant="toggle"
+                <fig-button variant="ghost"
                             icon="true"
+                            type="toggle"
                             selected="true">
                     <svg width="24"
                          height="24"

package/fig.css

@@ -616,6 +616,7 @@ input[type=button] {
   color: var(--figma-color-text-onbrand);
   border-radius: var(--radius-medium);
   font-weight: 500;
+  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
 
   &:active {
     background-color: var(--figma-color-bg-brand-pressed);
@@ -1213,6 +1214,7 @@ fig-slider {
       bottom: 0;
       border-radius: 0.5rem;
       min-width: var(--slider-height);
+      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
       width: calc(var(--slider-percent) + (1 - var(--slider-complete)) * var(--slider-height));
       max-width: 100%;
     }

package/fig.js

@@ -8,6 +8,8 @@ function supportsPopover() {
 
 /* Button */
 class FigButton extends HTMLElement {
+    #type
+    #selected
     constructor() {
         super()
         this.attachShadow({ mode: 'open' })
@@ -21,11 +23,12 @@ class FigButton extends HTMLElement {
                 button, button:hover, button:active {
                     padding: 0;
                     appearance: none;
-                    display: block;
+                    display: flex;
                     border: 0;
                     font: inherit;
                     color: inherit;
                     outline: 0;
+                    place-items: center; 
                     background: transparent;
                 }
             </style>
@@ -33,7 +36,30 @@ class FigButton extends HTMLElement {
                 <slot></slot>
             </button>
             `;
+        this.#selected = this.hasAttribute("selected") && this.getAttribute("selected") !== "false"
+        this.#type = this.getAttribute("type")
         this.button = this.shadowRoot.querySelector('button')
+        this.addEventListener("click", this.handleClick.bind(this))
+    }
+    get type() {
+        return this.#type
+    }
+    set type(value) {
+        this.#type = value
+        this.setAttribute("type", value)
+    }
+    get selected() {
+        return this.#selected
+    }
+    set selected(value) {
+        this.#selected = value
+        this.setAttribute("selected", value)
+    }
+
+    handleClick() {
+        if (this.#type === "toggle") {
+            this.selected = !this.#selected
+        }
     }
     static get observedAttributes() {
         return ['disabled'];

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.15"
+  "version": "1.0.17"
 }