@rogieking/figui3 2.15.0 → 2.17.0

package/components.css

@@ -2522,6 +2522,16 @@ fig-segmented-control {
       }
     }
   }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+
+    fig-segment {
+      color: var(--figma-color-text-disabled);
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
 }
 
 fig-input-joystick {

package/fig.js

@@ -167,6 +167,8 @@ customElements.define("fig-button", FigButton);
 class FigDropdown extends HTMLElement {
   #label = "Menu";
   #selectedValue = null; // Stores last selected value for dropdown type
+  #boundHandleSelectInput;
+  #boundHandleSelectChange;
 
   get label() {
     return this.#label;
@@ -179,11 +181,33 @@ class FigDropdown extends HTMLElement {
     this.select = document.createElement("select");
     this.optionsSlot = document.createElement("slot");
     this.attachShadow({ mode: "open" });
+    this.#boundHandleSelectInput = this.#handleSelectInput.bind(this);
+    this.#boundHandleSelectChange = this.#handleSelectChange.bind(this);
   }
 
   #addEventListeners() {
-    this.select.addEventListener("input", this.#handleSelectInput.bind(this));
-    this.select.addEventListener("change", this.#handleSelectChange.bind(this));
+    this.select.addEventListener("input", this.#boundHandleSelectInput);
+    this.select.addEventListener("change", this.#boundHandleSelectChange);
+  }
+
+  #hasPersistentControl(optionEl) {
+    if (!optionEl || !(optionEl instanceof Element)) return false;
+    return !!optionEl.querySelector(
+      'fig-checkbox, fig-switch, input[type="checkbox"]'
+    );
+  }
+
+  #keepPickerOpen() {
+    // Keep menu open for interactive controls inside option content.
+    if (typeof this.select.showPicker === "function") {
+      requestAnimationFrame(() => {
+        try {
+          this.select.showPicker();
+        } catch {
+          // Ignore if browser blocks reopening picker
+        }
+      });
+    }
   }
 
   connectedCallback() {
@@ -224,6 +248,15 @@ class FigDropdown extends HTMLElement {
   }
 
   #handleSelectInput(e) {
+    const selectedOption = e.target.selectedOptions?.[0];
+    if (this.#hasPersistentControl(selectedOption)) {
+      if (this.type === "dropdown") {
+        this.select.selectedIndex = -1;
+      }
+      this.#keepPickerOpen();
+      return;
+    }
+
     const selectedValue = e.target.value;
     // Store the selected value for dropdown type (before select gets reset)
     if (this.type === "dropdown") {
@@ -240,6 +273,15 @@ class FigDropdown extends HTMLElement {
   }
 
   #handleSelectChange(e) {
+    const selectedOption = e.target.selectedOptions?.[0];
+    if (this.#hasPersistentControl(selectedOption)) {
+      if (this.type === "dropdown") {
+        this.select.selectedIndex = -1;
+      }
+      this.#keepPickerOpen();
+      return;
+    }
+
     // Get the value before resetting (use stored value for dropdown type)
     const selectedValue =
       this.type === "dropdown" ? this.#selectedValue : this.select.value;
@@ -1292,6 +1334,14 @@ class FigSegment extends HTMLElement {
     this.removeEventListener("click", this.handleClick);
   }
   handleClick() {
+    const parentControl = this.closest("fig-segmented-control");
+    if (
+      parentControl &&
+      parentControl.hasAttribute("disabled") &&
+      parentControl.getAttribute("disabled") !== "false"
+    ) {
+      return;
+    }
     this.setAttribute("selected", "true");
   }
   get value() {
@@ -1335,9 +1385,16 @@ class FigSegmentedControl extends HTMLElement {
     super();
   }
 
+  static get observedAttributes() {
+    return ["disabled"];
+  }
+
   connectedCallback() {
     this.name = this.getAttribute("name") || "segmented-control";
     this.addEventListener("click", this.handleClick.bind(this));
+    this.#applyDisabled(
+      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false"
+    );
 
     // Ensure at least one segment is selected (default to first)
     requestAnimationFrame(() => {
@@ -1368,6 +1425,12 @@ class FigSegmentedControl extends HTMLElement {
   }
 
   handleClick(event) {
+    if (
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false"
+    ) {
+      return;
+    }
     const segment = event.target.closest("fig-segment");
     if (segment) {
       const segments = this.querySelectorAll("fig-segment");
@@ -1380,6 +1443,25 @@ class FigSegmentedControl extends HTMLElement {
       }
     }
   }
+
+  #applyDisabled(disabled) {
+    this.setAttribute("aria-disabled", disabled ? "true" : "false");
+    this.querySelectorAll("fig-segment").forEach((segment) => {
+      if (disabled) {
+        segment.setAttribute("disabled", "");
+        segment.setAttribute("aria-disabled", "true");
+      } else {
+        segment.removeAttribute("disabled");
+        segment.removeAttribute("aria-disabled");
+      }
+    });
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "disabled" && oldValue !== newValue) {
+      this.#applyDisabled(newValue !== null && newValue !== "false");
+    }
+  }
 }
 customElements.define("fig-segmented-control", FigSegmentedControl);
 
@@ -3581,6 +3663,7 @@ customElements.define("fig-input-fill", FigInputFill);
  */
 class FigCheckbox extends HTMLElement {
   #labelElement = null;
+  #boundHandleInput;
 
   constructor() {
     super();
@@ -3591,11 +3674,21 @@ class FigCheckbox extends HTMLElement {
     this.input.setAttribute("name", this.name);
     this.input.setAttribute("type", "checkbox");
     this.input.setAttribute("role", "checkbox");
+    this.#boundHandleInput = this.handleInput.bind(this);
   }
   connectedCallback() {
+    // Reuse cloned internals when this element is duplicated via option.cloneNode(true).
+    const existingInput = this.querySelector(":scope > input");
+    if (existingInput) {
+      this.input = existingInput;
+    } else if (!this.input.parentNode) {
+      this.append(this.input);
+    }
+
     this.input.checked =
       this.hasAttribute("checked") && this.getAttribute("checked") !== "false";
-    this.input.addEventListener("change", this.handleInput.bind(this));
+    this.input.removeEventListener("change", this.#boundHandleInput);
+    this.input.addEventListener("change", this.#boundHandleInput);
 
     if (this.hasAttribute("disabled")) {
       this.input.disabled = true;
@@ -3605,7 +3698,11 @@ class FigCheckbox extends HTMLElement {
       this.input.setAttribute("indeterminate", "true");
     }
 
-    this.append(this.input);
+    const existingLabel = this.querySelector(":scope > label");
+    if (existingLabel) {
+      this.#labelElement = existingLabel;
+      this.#labelElement.setAttribute("for", this.input.id);
+    }
 
     // Only create label if label attribute is present
     if (this.hasAttribute("label")) {
@@ -3663,6 +3760,7 @@ class FigCheckbox extends HTMLElement {
   }
 
   disconnectedCallback() {
+    this.input.removeEventListener("change", this.#boundHandleInput);
     this.input.remove();
   }
 

package/index.html

@@ -107,8 +107,10 @@
         main {
             margin-left: 180px;
             padding: 24px 32px;
-            overflow-y: auto;
             max-width: 800px;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
         }
 
         section {
@@ -156,6 +158,23 @@
             border-radius: 4px;
             color: var(--figma-color-text);
         }
+
+        fig-footer {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: var(--spacer-2);
+        }
+
+        fig-footer[sticky="true"] {
+            position: sticky;
+            bottom: 0;
+            z-index: 10;
+            margin-top: auto;
+            padding: var(--spacer-2) 0;
+            background: var(--figma-color-bg);
+            border-top: 1px solid var(--figma-color-border);
+        }
     </style>
 </head>
 
@@ -1168,29 +1187,70 @@
             </p>
             <fig-dropdown experimental="modern">
                 <option value="home">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M2 6.5L8 2L14 6.5V13.5C14 14 13.5 14.5 13 14.5H3C2.5 14.5 2 14 2 13.5V6.5Z" stroke="currentColor" stroke-opacity="0.9" fill="none"/>
+                    <svg width="16"
+                         height="16"
+                         viewBox="0 0 16 16"
+                         fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path d="M2 6.5L8 2L14 6.5V13.5C14 14 13.5 14.5 13 14.5H3C2.5 14.5 2 14 2 13.5V6.5Z"
+                              stroke="currentColor"
+                              stroke-opacity="0.9"
+                              fill="none" />
                     </svg>
                     <label>Home</label>
                 </option>
                 <option value="settings">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="8" cy="8" r="2" stroke="currentColor" stroke-opacity="0.9" fill="none"/>
-                        <path d="M8 1V3M8 13V15M1 8H3M13 8H15M2.5 2.5L4 4M12 12L13.5 13.5M2.5 13.5L4 12M12 4L13.5 2.5" stroke="currentColor" stroke-opacity="0.9"/>
+                    <svg width="16"
+                         height="16"
+                         viewBox="0 0 16 16"
+                         fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="8"
+                                cy="8"
+                                r="2"
+                                stroke="currentColor"
+                                stroke-opacity="0.9"
+                                fill="none" />
+                        <path d="M8 1V3M8 13V15M1 8H3M13 8H15M2.5 2.5L4 4M12 12L13.5 13.5M2.5 13.5L4 12M12 4L13.5 2.5"
+                              stroke="currentColor"
+                              stroke-opacity="0.9" />
                     </svg>
                     <label>Settings</label>
                 </option>
                 <option value="user">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="8" cy="5" r="3" stroke="currentColor" stroke-opacity="0.9" fill="none"/>
-                        <path d="M2 14C2 11 4.5 9 8 9C11.5 9 14 11 14 14" stroke="currentColor" stroke-opacity="0.9" fill="none"/>
+                    <svg width="16"
+                         height="16"
+                         viewBox="0 0 16 16"
+                         fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="8"
+                                cy="5"
+                                r="3"
+                                stroke="currentColor"
+                                stroke-opacity="0.9"
+                                fill="none" />
+                        <path d="M2 14C2 11 4.5 9 8 9C11.5 9 14 11 14 14"
+                              stroke="currentColor"
+                              stroke-opacity="0.9"
+                              fill="none" />
                     </svg>
                     <label>User Profile</label>
                 </option>
                 <option value="search">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="6.5" cy="6.5" r="4" stroke="currentColor" stroke-opacity="0.9" fill="none"/>
-                        <path d="M10 10L14 14" stroke="currentColor" stroke-opacity="0.9"/>
+                    <svg width="16"
+                         height="16"
+                         viewBox="0 0 16 16"
+                         fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="6.5"
+                                cy="6.5"
+                                r="4"
+                                stroke="currentColor"
+                                stroke-opacity="0.9"
+                                fill="none" />
+                        <path d="M10 10L14 14"
+                              stroke="currentColor"
+                              stroke-opacity="0.9" />
                     </svg>
                     <label>Search</label>
                 </option>
@@ -1337,7 +1397,8 @@
             <fig-fill-picker mode="image"></fig-fill-picker>
 
             <h3>Limited Mode Selection</h3>
-            <p class="description">Use comma-separated values in the <code>mode</code> attribute to limit available modes
+            <p class="description">Use comma-separated values in the <code>mode</code> attribute to limit available
+                modes
                 while still allowing switching between them.</p>
 
             <h4>Solid and Gradient Only</h4>
@@ -1347,7 +1408,8 @@
             <fig-fill-picker mode="solid,gradient,image"></fig-fill-picker>
 
             <h4>With fig-input-fill (mode passed through)</h4>
-            <fig-input-fill mode="solid,gradient" value='{"type":"solid","color":"#667eea"}'></fig-input-fill>
+            <fig-input-fill mode="solid,gradient"
+                            value='{"type":"solid","color":"#667eea"}'></fig-input-fill>
 
             <h3>Event Listening</h3>
             <fig-fill-picker id="fill-picker-events"
@@ -2651,13 +2713,25 @@
             <h3>With Icons</h3>
             <fig-segmented-control>
                 <fig-segment selected>
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M8.5 5.59686C8.80936 5.41829 9.19064 5.41829 9.5 5.59686L15 8.77264C15.6185 9.12984 15.9998 9.78984 16 10.5041V16.8557C15.9999 17.2128 15.8093 17.5433 15.5 17.7219C15.1907 17.9003 14.8093 17.9003 14.5 17.7219L14.2988 17.6057L14.1025 17.4924L13.9111 17.381L13.7236 17.2736L13.541 17.1672L13.3613 17.0637L13.1846 16.9621L13.0117 16.8625L12.8418 16.7639L12.6738 16.6672L12.5078 16.5715L12.3438 16.4767L12.1816 16.383L12.0205 16.2902L11.8613 16.1974L11.7012 16.1057L11.543 16.0139L11.0654 15.7385L10.9053 15.6457L10.7432 15.5519L10.5801 15.4582L10.416 15.3635L10.249 15.2668L10.0801 15.1691L9.9082 15.0705L9.73438 14.9699L9.55664 14.8674L9.375 14.7619L9.18945 14.6555L9.00098 14.5461C8.38287 14.1892 8.00002 13.5289 8 12.8137V6.46307C8 6.10581 8.1906 5.7755 8.5 5.59686ZM9 12.8137C9.00001 13.1709 9.1916 13.5012 9.50098 13.6799C11.542 14.8584 12.8291 15.6022 15 16.8557V10.5051C15 10.1925 14.8541 9.89983 14.6104 9.7121L14.5 9.63885L9 6.46307V12.8137Z" fill="black" fill-opacity="0.9"/>
+                    <svg width="24"
+                         height="24"
+                         viewBox="0 0 24 24"
+                         fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path d="M8.5 5.59686C8.80936 5.41829 9.19064 5.41829 9.5 5.59686L15 8.77264C15.6185 9.12984 15.9998 9.78984 16 10.5041V16.8557C15.9999 17.2128 15.8093 17.5433 15.5 17.7219C15.1907 17.9003 14.8093 17.9003 14.5 17.7219L14.2988 17.6057L14.1025 17.4924L13.9111 17.381L13.7236 17.2736L13.541 17.1672L13.3613 17.0637L13.1846 16.9621L13.0117 16.8625L12.8418 16.7639L12.6738 16.6672L12.5078 16.5715L12.3438 16.4767L12.1816 16.383L12.0205 16.2902L11.8613 16.1974L11.7012 16.1057L11.543 16.0139L11.0654 15.7385L10.9053 15.6457L10.7432 15.5519L10.5801 15.4582L10.416 15.3635L10.249 15.2668L10.0801 15.1691L9.9082 15.0705L9.73438 14.9699L9.55664 14.8674L9.375 14.7619L9.18945 14.6555L9.00098 14.5461C8.38287 14.1892 8.00002 13.5289 8 12.8137V6.46307C8 6.10581 8.1906 5.7755 8.5 5.59686ZM9 12.8137C9.00001 13.1709 9.1916 13.5012 9.50098 13.6799C11.542 14.8584 12.8291 15.6022 15 16.8557V10.5051C15 10.1925 14.8541 9.89983 14.6104 9.7121L14.5 9.63885L9 6.46307V12.8137Z"
+                              fill="black"
+                              fill-opacity="0.9" />
                     </svg>
                 </fig-segment>
                 <fig-segment>
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M14.4998 5.5968C14.8091 5.41823 15.1904 5.41823 15.4998 5.5968C15.8092 5.77543 15.9998 6.10575 15.9998 6.46301V12.8136C15.9997 13.5281 15.6185 14.1888 14.9998 14.546L9.49976 17.7218C9.19046 17.9003 8.80905 17.9003 8.49976 17.7218C8.19043 17.5432 7.99986 17.2127 7.99976 16.8556V10.504C7.99995 9.78978 8.38122 9.12978 8.99976 8.77258L14.4998 5.5968ZM9.49976 9.63879L9.3894 9.71204C9.14564 9.89977 8.99977 10.1924 8.99976 10.505V16.8556L14.4998 13.6798C14.7704 13.5235 14.9502 13.2513 14.991 12.9464L14.9998 12.8136V6.46301L9.49976 9.63879Z" fill="black" fill-opacity="0.9"/>
+                    <svg width="24"
+                         height="24"
+                         viewBox="0 0 24 24"
+                         fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path d="M14.4998 5.5968C14.8091 5.41823 15.1904 5.41823 15.4998 5.5968C15.8092 5.77543 15.9998 6.10575 15.9998 6.46301V12.8136C15.9997 13.5281 15.6185 14.1888 14.9998 14.546L9.49976 17.7218C9.19046 17.9003 8.80905 17.9003 8.49976 17.7218C8.19043 17.5432 7.99986 17.2127 7.99976 16.8556V10.504C7.99995 9.78978 8.38122 9.12978 8.99976 8.77258L14.4998 5.5968ZM9.49976 9.63879L9.3894 9.71204C9.14564 9.89977 8.99977 10.1924 8.99976 10.505V16.8556L14.4998 13.6798C14.7704 13.5235 14.9502 13.2513 14.991 12.9464L14.9998 12.8136V6.46301L9.49976 9.63879Z"
+                              fill="black"
+                              fill-opacity="0.9" />
                     </svg>
                 </fig-segment>
             </fig-segmented-control>
@@ -2670,6 +2744,39 @@
                 <fig-segment>L</fig-segment>
                 <fig-segment>XL</fig-segment>
             </fig-segmented-control>
+
+            <h3>Disabled (Text)</h3>
+            <fig-segmented-control disabled>
+                <fig-segment>List</fig-segment>
+                <fig-segment selected>Grid</fig-segment>
+                <fig-segment>Board</fig-segment>
+            </fig-segmented-control>
+
+            <h3>Disabled (Icons)</h3>
+            <fig-segmented-control disabled>
+                <fig-segment selected>
+                    <svg width="24"
+                         height="24"
+                         viewBox="0 0 24 24"
+                         fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path d="M8.5 5.59686C8.80936 5.41829 9.19064 5.41829 9.5 5.59686L15 8.77264C15.6185 9.12984 15.9998 9.78984 16 10.5041V16.8557C15.9999 17.2128 15.8093 17.5433 15.5 17.7219C15.1907 17.9003 14.8093 17.9003 14.5 17.7219L14.2988 17.6057L14.1025 17.4924L13.9111 17.381L13.7236 17.2736L13.541 17.1672L13.3613 17.0637L13.1846 16.9621L13.0117 16.8625L12.8418 16.7639L12.6738 16.6672L12.5078 16.5715L12.3438 16.4767L12.1816 16.383L12.0205 16.2902L11.8613 16.1974L11.7012 16.1057L11.543 16.0139L11.0654 15.7385L10.9053 15.6457L10.7432 15.5519L10.5801 15.4582L10.416 15.3635L10.249 15.2668L10.0801 15.1691L9.9082 15.0705L9.73438 14.9699L9.55664 14.8674L9.375 14.7619L9.18945 14.6555L9.00098 14.5461C8.38287 14.1892 8.00002 13.5289 8 12.8137V6.46307C8 6.10581 8.1906 5.7755 8.5 5.59686ZM9 12.8137C9.00001 13.1709 9.1916 13.5012 9.50098 13.6799C11.542 14.8584 12.8291 15.6022 15 16.8557V10.5051C15 10.1925 14.8541 9.89983 14.6104 9.7121L14.5 9.63885L9 6.46307V12.8137Z"
+                              fill="black"
+                              fill-opacity="0.9" />
+                    </svg>
+                </fig-segment>
+                <fig-segment>
+                    <svg width="24"
+                         height="24"
+                         viewBox="0 0 24 24"
+                         fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path d="M14.4998 5.5968C14.8091 5.41823 15.1904 5.41823 15.4998 5.5968C15.8092 5.77543 15.9998 6.10575 15.9998 6.46301V12.8136C15.9997 13.5281 15.6185 14.1888 14.9998 14.546L9.49976 17.7218C9.19046 17.9003 8.80905 17.9003 8.49976 17.7218C8.19043 17.5432 7.99986 17.2127 7.99976 16.8556V10.504C7.99995 9.78978 8.38122 9.12978 8.99976 8.77258L14.4998 5.5968ZM9.49976 9.63879L9.3894 9.71204C9.14564 9.89977 8.99977 10.1924 8.99976 10.505V16.8556L14.4998 13.6798C14.7704 13.5235 14.9502 13.2513 14.991 12.9464L14.9998 12.8136V6.46301L9.49976 9.63879Z"
+                              fill="black"
+                              fill-opacity="0.9" />
+                    </svg>
+                </fig-segment>
+            </fig-segmented-control>
         </section>
         <hr>
 
@@ -2729,7 +2836,8 @@
                         units="%"></fig-slider>
 
             <h3>With Precision</h3>
-            <p class="description">Control decimal places in the text input with the <code>precision</code> attribute.</p>
+            <p class="description">Control decimal places in the text input with the <code>precision</code> attribute.
+            </p>
             <fig-field direction="horizontal">
                 <label>Precision 0</label>
                 <fig-slider min="0"
@@ -3649,6 +3757,36 @@ button.addEventListener('click', () => {
                 </vstack>
             </details>
         </section>
+        <fig-footer sticky="true">
+            <fig-button icon="true"
+                        type="select"
+                        variant="ghost"
+                        title="Fill settings">
+                <svg width="16"
+                     height="16"
+                     viewBox="0 0 16 16"
+                     fill="none"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8 3.5A4.5 4.5 0 1 0 8 12.5A4.5 4.5 0 1 0 8 3.5Z"
+                          stroke="currentColor"
+                          stroke-opacity="0.9" />
+                    <path d="M8 1V2.25M8 13.75V15M15 8H13.75M2.25 8H1M12.95 3.05L12.06 3.94M3.94 12.06L3.05 12.95M12.95 12.95L12.06 12.06M3.94 3.94L3.05 3.05"
+                          stroke="currentColor"
+                          stroke-opacity="0.9"
+                          stroke-linecap="round" />
+                </svg>
+                <fig-dropdown experimental="modern"
+                              type="dropdown">
+                    <option value="existing-strokes">
+                        <fig-checkbox checked
+                                      label="Apply to existing strokes"></fig-checkbox>
+                    </option>
+                    <option value="shapes-with-fills">
+                        <fig-checkbox label="Apply to shapes with fills"></fig-checkbox>
+                    </option>
+                </fig-dropdown>
+            </fig-button>
+        </fig-footer>
     </main>
 
     <script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.15.0",
+  "version": "2.17.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",