@rogieking/figui3 1.0.52 → 1.0.54

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;
 }
 

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));
@@ -121,7 +120,7 @@ class FigDropdown extends HTMLElement {
       this.select.appendChild(hiddenOption);
     }
     this.optionsSlot.assignedNodes().forEach((option) => {
-      if (option.nodeName === "OPTION") {
+      if (option.nodeName === "OPTION" || option.nodeName === "OPTGROUP") {
         if (option.hasAttribute("value") && option.hasAttribute("selected")) {
           this.value = option.getAttribute("value");
         }
@@ -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.52"
+  "version": "1.0.54"
 }