@rogieking/figui3 2.14.0 → 2.17.0

package/README.md

@@ -911,6 +911,36 @@ const onChange = (e) => {
 
 ---
 
+## Breaking Changes / Migration
+
+### v2.15.0: Experimental Features
+
+The `experimental` attribute now controls experimental CSS features instead of `variant="neue"`.
+
+**Before (deprecated):**
+```html
+<fig-dropdown variant="neue">
+  <option>Option 1</option>
+</fig-dropdown>
+```
+
+**After:**
+```html
+<fig-dropdown experimental="modern">
+  <option>Option 1</option>
+</fig-dropdown>
+```
+
+The `experimental` attribute uses space-separated feature names for granular control:
+- `experimental="modern"` - Enables the customizable select picker (`::picker(select)`, `appearance: base-select`)
+- Future features can be added: `experimental="modern popover"`
+
+Note: `variant="neue"` on `fig-slider` continues to work for visual styling.
+
+See [CHANGELOG.md](CHANGELOG.md) for full details.
+
+---
+
 ## Theming
 
 FigUI3 automatically adapts to light and dark themes using CSS custom properties. The library uses Figma's color variable naming convention:

package/components.css

@@ -478,7 +478,7 @@ input[type="text"][list] {
 }
 
 @supports (appearance: base-select) {
-  fig-dropdown[variant="neue"] {
+  fig-dropdown[experimental~="modern"] {
     &[type="dropdown"] {
       select:before {
         content: attr(aria-label);
@@ -517,11 +517,14 @@ input[type="text"][list] {
 
       option {
         display: flex;
-        gap: var(--spacer-1);
+        gap: var(--spacer-2);
         padding: 0 var(--spacer-4) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
         font-weight: var(--body-medium-fontWeight);
         color: var(--figma-color-text-menu);
         position: relative;
+        & * {
+          color: inherit;
+        }
         &[hidden] {
           display: none;
         }
@@ -598,6 +601,7 @@ input[type="text"][list] {
     /* https://codepen.io/editor/argyleink/pen/019c1f28-bbc2-7bac-ad4a-a7e41d3730f1 */
     ::picker(select) {
       appearance: base-select;
+      color-scheme: dark;
 
       /* Appearance/style */
       scrollbar-width: thin;
@@ -2518,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);
 
@@ -2538,6 +2620,8 @@ class FigInputColor extends HTMLElement {
     const useFigmaPicker = this.picker === "figma";
     const hidePicker = this.picker === "false";
     const showAlpha = this.getAttribute("alpha") === "true";
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     let html = ``;
     if (this.getAttribute("text")) {
@@ -2562,7 +2646,7 @@ class FigInputColor extends HTMLElement {
       let swatchElement = "";
       if (!hidePicker) {
         swatchElement = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${
+          ? `<fig-fill-picker mode="solid" ${expAttr} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -2580,7 +2664,7 @@ class FigInputColor extends HTMLElement {
         html = ``;
       } else {
         html = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${
+          ? `<fig-fill-picker mode="solid" ${expAttr} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -2772,7 +2856,7 @@ class FigInputColor extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "style", "mode", "picker"];
+    return ["value", "style", "mode", "picker", "experimental"];
   }
 
   get mode() {
@@ -2954,7 +3038,7 @@ class FigInputFill extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled", "mode"];
+    return ["value", "disabled", "mode", "experimental"];
   }
 
   connectedCallback() {
@@ -3105,11 +3189,12 @@ class FigInputFill extends HTMLElement {
     }
 
     const modeAttr = this.getAttribute("mode");
+    const experimentalAttr = this.getAttribute("experimental");
     this.innerHTML = `
       <div class="input-combo">
         <fig-fill-picker value='${fillPickerValue}' ${
       disabled ? "disabled" : ""
-    } ${modeAttr ? `mode="${modeAttr}"` : ""}></fig-fill-picker>
+    } ${modeAttr ? `mode="${modeAttr}"` : ""} ${experimentalAttr ? `experimental="${experimentalAttr}"` : ""}></fig-fill-picker>
         ${controlsHtml}
       </div>`;
 
@@ -3551,6 +3636,17 @@ class FigInputFill extends HTMLElement {
           this.#render();
         }
         break;
+      case "mode":
+      case "experimental":
+        // Pass through to internal fill picker
+        if (this.#fillPicker) {
+          if (newValue) {
+            this.#fillPicker.setAttribute(name, newValue);
+          } else {
+            this.#fillPicker.removeAttribute(name);
+          }
+        }
+        break;
     }
   }
 }
@@ -3567,6 +3663,7 @@ customElements.define("fig-input-fill", FigInputFill);
  */
 class FigCheckbox extends HTMLElement {
   #labelElement = null;
+  #boundHandleInput;
 
   constructor() {
     super();
@@ -3577,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;
@@ -3591,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")) {
@@ -3649,6 +3760,7 @@ class FigCheckbox extends HTMLElement {
   }
 
   disconnectedCallback() {
+    this.input.removeEventListener("change", this.#boundHandleInput);
     this.input.remove();
   }
 
@@ -3896,6 +4008,8 @@ class FigComboInput extends HTMLElement {
     this.options = this.getOptionsFromAttribute();
     this.placeholder = this.getAttribute("placeholder") || "";
     this.value = this.getAttribute("value") || "";
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
     this.innerHTML = `<div class="input-combo">
                         <fig-input-text placeholder="${this.placeholder}">
                         </fig-input-text> 
@@ -3903,7 +4017,7 @@ class FigComboInput extends HTMLElement {
                             <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
   <path d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='currentColor' stroke-opacity="0.9" stroke-linecap='round'/>
 </svg>
-                            <fig-dropdown type="dropdown">
+                            <fig-dropdown type="dropdown" ${expAttr}>
                               ${this.options
                                 .map((option) => `<option>${option}</option>`)
                                 .join("")}
@@ -3932,7 +4046,7 @@ class FigComboInput extends HTMLElement {
     this.value = this.input.value;
   }
   static get observedAttributes() {
-    return ["options", "placeholder", "value", "disabled"];
+    return ["options", "placeholder", "value", "disabled", "experimental"];
   }
   focus() {
     this.input.focus();
@@ -3979,6 +4093,15 @@ class FigComboInput extends HTMLElement {
       case "disabled":
         this.#applyDisabled(newValue !== null && newValue !== "false");
         break;
+      case "experimental":
+        if (this.dropdown) {
+          if (newValue) {
+            this.dropdown.setAttribute("experimental", newValue);
+          } else {
+            this.dropdown.removeAttribute("experimental");
+          }
+        }
+        break;
     }
   }
 }
@@ -5323,7 +5446,7 @@ class FigFillPicker extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled", "alpha", "mode"];
+    return ["value", "disabled", "alpha", "mode", "experimental"];
   }
 
   connectedCallback() {
@@ -5607,6 +5730,9 @@ class FigFillPicker extends HTMLElement {
     }
 
     // Build header content - label if single mode, dropdown if multiple
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
+    
     let headerContent;
     if (allowedModes.length === 1) {
       headerContent = `<span class="fig-fill-picker-type-label">${modeLabels[allowedModes[0]]}</span>`;
@@ -5614,7 +5740,7 @@ class FigFillPicker extends HTMLElement {
       const options = allowedModes
         .map((m) => `<option value="${m}">${modeLabels[m]}</option>`)
         .join("\n          ");
-      headerContent = `<fig-dropdown class="fig-fill-picker-type" variant="neue" value="${this.#fillType}">
+      headerContent = `<fig-dropdown class="fig-fill-picker-type" ${expAttr} value="${this.#fillType}">
           ${options}
         </fig-dropdown>`;
     }
@@ -5853,10 +5979,17 @@ class FigFillPicker extends HTMLElement {
     ctx.fillRect(0, 0, width, height);
   }
 
-  #updateHandlePosition() {
+  #updateHandlePosition(retryCount = 0) {
     if (!this.#colorAreaHandle || !this.#colorArea) return;
 
     const rect = this.#colorArea.getBoundingClientRect();
+    
+    // If the canvas isn't visible yet (0 dimensions), schedule a retry (max 5 attempts)
+    if ((rect.width === 0 || rect.height === 0) && retryCount < 5) {
+      requestAnimationFrame(() => this.#updateHandlePosition(retryCount + 1));
+      return;
+    }
+    
     const x = (this.#color.s / 100) * rect.width;
     const y = ((100 - this.#color.v) / 100) * rect.height;
 
@@ -5943,10 +6076,12 @@ class FigFillPicker extends HTMLElement {
   // ============ GRADIENT TAB ============
   #initGradientTab() {
     const container = this.#dialog.querySelector('[data-tab="gradient"]');
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     container.innerHTML = `
       <div class="fig-fill-picker-gradient-header">
-        <fig-dropdown class="fig-fill-picker-gradient-type" variant="neue" value="${
+        <fig-dropdown class="fig-fill-picker-gradient-type" ${expAttr} value="${
           this.#gradient.type
         }">
           <option value="linear" selected>Linear</option>

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>
 
@@ -654,6 +673,12 @@
             <fig-combo-input options="Red, Green, Blue, Yellow, Purple"
                              value="Blue"
                              placeholder="Select a color"></fig-combo-input>
+
+            <h3>Experimental Modern</h3>
+            <p class="description">Uses the modern CSS picker styling for the dropdown.</p>
+            <fig-combo-input options="House, Apartment, Condo, Townhouse, Other"
+                             experimental="modern"
+                             placeholder="Type of residence"></fig-combo-input>
         </section>
         <hr>
 
@@ -840,7 +865,7 @@
             <p class="description">A select dropdown menu with options.</p>
 
             <h3>Default</h3>
-            <fig-dropdown variant="neue">
+            <fig-dropdown>
                 <optgroup label="Numbers">
                     <option>One</option>
                     <option>Two</option>
@@ -854,8 +879,7 @@
             </fig-dropdown>
 
             <h3>Full Width</h3>
-            <fig-dropdown full
-                          variant="neue">
+            <fig-dropdown full>
                 <option>Full Width Dropdown</option>
                 <option>Option Two</option>
                 <option>Option Three</option>
@@ -865,8 +889,7 @@
             <p style="font-size: 12px; color: var(--figma-color-text-secondary); margin-bottom: 8px;">
                 Uses <code>field-sizing: content</code> to resize based on selected option.
             </p>
-            <fig-dropdown autoresize
-                          variant="neue">
+            <fig-dropdown autoresize>
                 <option>XS</option>
                 <option>Small</option>
                 <option>Medium</option>
@@ -875,8 +898,27 @@
                 <option>XXL Super Extended Option</option>
             </fig-dropdown>
 
-            <h3>Dropdown Neue Variant (with many options)</h3>
-            <fig-dropdown variant="neue"
+            <h3>Experimental Modern</h3>
+            <p class="description">
+                Use <code>experimental="modern"</code> to enable the customizable select picker using
+                <code>::picker(select)</code> and <code>appearance: base-select</code>. This is a progressive
+                enhancement that falls back to native select on unsupported browsers.
+            </p>
+            <fig-dropdown experimental="modern">
+                <optgroup label="Numbers">
+                    <option>One</option>
+                    <option>Two</option>
+                    <option>Three</option>
+                </optgroup>
+                <optgroup label="Fruits">
+                    <option>Apple</option>
+                    <option>Banana</option>
+                    <option>Cherry</option>
+                </optgroup>
+            </fig-dropdown>
+
+            <h3>Experimental Modern - Dropdown Type (with many options)</h3>
+            <fig-dropdown experimental="modern"
                           type="dropdown"
                           label="Choose">
                 <optgroup label="North America">
@@ -1007,9 +1049,9 @@
                 </optgroup>
             </fig-dropdown>
 
-            <h3>Select Neue Variant (with many options)</h3>
+            <h3>Experimental Modern - Select Type (with many options)</h3>
 
-            <fig-dropdown variant="neue">
+            <fig-dropdown experimental="modern">
                 <optgroup label="North America">
                     <option value="us">United States</option>
                     <option value="ca">Canada</option>
@@ -1137,6 +1179,82 @@
                     <option value="zeplin">Zeplin</option>
                 </optgroup>
             </fig-dropdown>
+
+            <h3>Experimental Modern - With Icons (Bleeding Edge)</h3>
+            <p class="description">
+                Using icons inside options requires <code>appearance: base-select</code> support.
+                This is bleeding edge and may not work in all browsers.
+            </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>
+                    <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>
+                    <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>
+                    <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>
+                    <label>Search</label>
+                </option>
+            </fig-dropdown>
         </section>
         <hr>
 
@@ -1279,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>
@@ -1289,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"
@@ -2593,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>
@@ -2612,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>
 
@@ -2671,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"
@@ -3591,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.14.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",