@rogieking/figui3 1.0.53 → 1.0.55

package/example.html

@@ -91,6 +91,20 @@
             </fig-tooltip>
         </hstack>
         <br />
+        <fig-field direction="horizontal">
+            <label>Grouped options</label>
+            <fig-dropdown>
+                <optgroup label="Numbers">
+                    <option>One</option>
+                    <option>Two</option>
+                </optgroup>
+                <optgroup label="Fruits">
+                    <option>Apple</option>
+                    <option>Banana</option>
+                </optgroup>
+            </fig-dropdown>
+        </fig-field>
+        <br />
         <fig-field direction="horizontal">
             <label>Dropdown</label>
             <fig-dropdown>

package/fig.css

@@ -611,7 +611,7 @@ fig-dropdown:has([trigger]) {
 }
 
 fig-dialog > *:not(dialog),
-fig-dropdown > option {
+fig-dropdown > *:not(select) {
   display: none !important;
 }
 
@@ -657,7 +657,8 @@ fig-button {
   }
 
   /* Variant: Ghost */
-  &[variant="ghost"] {
+  &[variant="ghost"],
+  &[variant="link"] {
     box-shadow: none;
     background: none;
     color: var(--figma-color-text);
@@ -676,6 +677,10 @@ fig-button {
     background-color: transparent;
   }
 
+  &[variant="link"] {
+    color: var(--figma-color-text-brand);
+  }
+
   /* Variant: Secondary */
   &[variant="secondary"] {
     box-shadow: inset 0 0 0 1px var(--figma-color-border);
@@ -698,6 +703,8 @@ fig-button {
   &[icon] > button {
     width: var(--spacer-4);
     padding: 0;
+    flex-grow: 0
+    flex-shrink: 0;
 
     &:hover {
       background-color: var(--figma-color-bg-ghost-hover);

package/fig.js

@@ -98,13 +98,12 @@ class FigDropdown extends HTMLElement {
   connectedCallback() {
     this.type = this.getAttribute("type") || "select";
     this.value = this.getAttribute("value") || "";
+
     this.select = document.createElement("select");
     this.optionsSlot = document.createElement("slot");
-
     this.appendChild(this.select);
     this.shadowRoot.appendChild(this.optionsSlot);
 
-    // Move slotted options into the select element
     this.optionsSlot.addEventListener("slotchange", this.slotChange.bind(this));
 
     this.select.addEventListener("input", this.handleDropdownInput.bind(this));
@@ -132,6 +131,7 @@ class FigDropdown extends HTMLElement {
       this.select.selectedIndex = -1;
     }
   }
+
   handleDropdownInput() {
     if (this.type === "dropdown") {
       this.value = this.select.value;

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.53"
+  "version": "1.0.55"
 }