@rogieking/figui3 2.24.0 → 2.25.0

package/components.css

@@ -601,6 +601,7 @@ fig-dropdown,
     display: flex;
     align-items: center;
     flex: 1;
+    width: 100%;
   }
 
   /* Chevron icon using mask-image for light-dark support */
@@ -721,6 +722,7 @@ fig-button {
 
     &:active {
       background-color: var(--figma-color-bg-secondary);
+      color: var(--figma-color-text);
     }
 
     &:focus-visible {
@@ -2985,6 +2987,10 @@ fig-shimmer:not([playing="false"]) > * {
 /* Fill Picker */
 fig-fill-picker {
   display: contents;
+
+  > [slot^="mode-"] {
+    display: none;
+  }
 }
 
 .fig-fill-picker-dialog {

package/fig.js

@@ -3384,16 +3384,29 @@ class FigInputColor extends HTMLElement {
     return this.getAttribute("picker") || "native";
   }
 
+  #buildFillPickerAttrs() {
+    const attrs = {};
+    const experimental = this.getAttribute("experimental");
+    if (experimental) attrs["experimental"] = experimental;
+    // picker-* attributes forwarded to fill picker (except anchor, handled programmatically)
+    for (const { name, value } of this.attributes) {
+      if (name.startsWith("picker-") && name !== "picker-anchor") {
+        attrs[name.slice(7)] = value;
+      }
+    }
+    if (!attrs["dialog-position"]) attrs["dialog-position"] = "left";
+    return Object.entries(attrs)
+      .map(([k, v]) => `${k}="${v}"`)
+      .join(" ");
+  }
+
   connectedCallback() {
     this.#setValues(this.getAttribute("value"));
 
     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}"` : "";
-    const dialogPos = this.getAttribute("dialog-position") || "left";
-    const dialogPosAttr = `dialog-position="${dialogPos}"`;
+    const fpAttrs = this.#buildFillPickerAttrs();
 
     let html = ``;
     if (this.getAttribute("text")) {
@@ -3418,7 +3431,7 @@ class FigInputColor extends HTMLElement {
       let swatchElement = "";
       if (!hidePicker) {
         swatchElement = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${dialogPosAttr} ${expAttr} ${
+          ? `<fig-fill-picker mode="solid" ${fpAttrs} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -3436,7 +3449,7 @@ class FigInputColor extends HTMLElement {
         html = ``;
       } else {
         html = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${dialogPosAttr} ${expAttr} ${
+          ? `<fig-fill-picker mode="solid" ${fpAttrs} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -3460,6 +3473,13 @@ class FigInputColor extends HTMLElement {
 
       // Setup fill picker (figma picker)
       if (this.#fillPicker) {
+        const anchor = this.getAttribute("picker-anchor");
+        if (anchor === "self") {
+          this.#fillPicker.anchorElement = this;
+        } else if (anchor) {
+          const el = document.querySelector(anchor);
+          if (el) this.#fillPicker.anchorElement = el;
+        }
         if (this.hasAttribute("disabled")) {
           this.#fillPicker.setAttribute("disabled", "");
         }
@@ -3628,7 +3648,7 @@ class FigInputColor extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "style", "mode", "picker", "experimental", "dialog-position"];
+    return ["value", "style", "mode", "picker", "experimental"];
   }
 
   get mode() {
@@ -3863,6 +3883,25 @@ class FigInputFill extends HTMLElement {
     }
   }
 
+  #buildFillPickerAttrs() {
+    const attrs = {};
+    // Backward-compat: direct attributes forwarded to fill picker
+    const mode = this.getAttribute("mode");
+    if (mode) attrs["mode"] = mode;
+    const experimental = this.getAttribute("experimental");
+    if (experimental) attrs["experimental"] = experimental;
+    // picker-* overrides (except anchor, handled programmatically)
+    for (const { name, value } of this.attributes) {
+      if (name.startsWith("picker-") && name !== "picker-anchor") {
+        attrs[name.slice(7)] = value;
+      }
+    }
+    if (!attrs["dialog-position"]) attrs["dialog-position"] = "left";
+    return Object.entries(attrs)
+      .map(([k, v]) => `${k}="${v}"`)
+      .join(" ");
+  }
+
   #render() {
     const disabled = this.hasAttribute("disabled");
     const fillPickerValue = JSON.stringify(this.value);
@@ -3960,13 +3999,12 @@ class FigInputFill extends HTMLElement {
         break;
     }
 
-    const modeAttr = this.getAttribute("mode");
-    const experimentalAttr = this.getAttribute("experimental");
+    const fpAttrs = this.#buildFillPickerAttrs();
     this.innerHTML = `
       <div class="input-combo">
-        <fig-fill-picker dialog-position="left" value='${fillPickerValue}' ${
+        <fig-fill-picker ${fpAttrs} value='${fillPickerValue}' ${
       disabled ? "disabled" : ""
-    } ${modeAttr ? `mode="${modeAttr}"` : ""} ${experimentalAttr ? `experimental="${experimentalAttr}"` : ""}></fig-fill-picker>
+    }></fig-fill-picker>
         ${controlsHtml}
       </div>`;
 
@@ -3991,6 +4029,14 @@ class FigInputFill extends HTMLElement {
       }
 
       if (this.#fillPicker) {
+        const anchor = this.getAttribute("picker-anchor");
+        if (!anchor || anchor === "self") {
+          this.#fillPicker.anchorElement = this;
+        } else {
+          const el = document.querySelector(anchor);
+          if (el) this.#fillPicker.anchorElement = el;
+        }
+
         this.#fillPicker.addEventListener("input", (e) => {
           e.stopPropagation();
           const detail = e.detail;
@@ -6223,6 +6269,7 @@ class FigFillPicker extends HTMLElement {
   #chit = null;
   #dialog = null;
   #activeTab = "solid";
+  anchorElement = null;
 
   // Fill state
   #fillType = "solid";
@@ -6241,6 +6288,10 @@ class FigFillPicker extends HTMLElement {
   #video = { url: null, scaleMode: "fill", scale: 50 };
   #webcam = { stream: null, snapshot: null };
 
+  // Custom mode slots and data
+  #customSlots = {};
+  #customData = {};
+
   // DOM references for solid tab
   #colorArea = null;
   #colorAreaHandle = null;
@@ -6275,7 +6326,9 @@ class FigFillPicker extends HTMLElement {
   }
 
   #setupTrigger() {
-    const child = this.firstElementChild;
+    const child = Array.from(this.children).find(
+      (el) => !el.getAttribute("slot")?.startsWith("mode-")
+    );
 
     if (!child) {
       // Scenario 1: Empty - create fig-chit
@@ -6315,6 +6368,8 @@ class FigFillPicker extends HTMLElement {
     const valueAttr = this.getAttribute("value");
     if (!valueAttr) return;
 
+    const builtinTypes = ["solid", "gradient", "image", "video", "webcam"];
+
     try {
       const parsed = JSON.parse(valueAttr);
       if (parsed.type) this.#fillType = parsed.type;
@@ -6337,6 +6392,12 @@ class FigFillPicker extends HTMLElement {
         this.#gradient = { ...this.#gradient, ...parsed.gradient };
       if (parsed.image) this.#image = { ...this.#image, ...parsed.image };
       if (parsed.video) this.#video = { ...this.#video, ...parsed.video };
+
+      // Store full parsed data for custom (non-built-in) types
+      if (parsed.type && !builtinTypes.includes(parsed.type)) {
+        const { type, ...rest } = parsed;
+        this.#customData[parsed.type] = rest;
+      }
     } catch (e) {
       // If not JSON, treat as hex color
       if (valueAttr.startsWith("#")) {
@@ -6387,7 +6448,8 @@ class FigFillPicker extends HTMLElement {
         }
         break;
       default:
-        bg = "#D9D9D9";
+        const slot = this.#customSlots[this.#fillType];
+        bg = slot?.element?.getAttribute("chit-background") || "#D9D9D9";
     }
 
     this.#chit.setAttribute("background", bg);
@@ -6434,6 +6496,18 @@ class FigFillPicker extends HTMLElement {
   }
 
   #createDialog() {
+    // Collect slotted custom mode content before any DOM changes
+    this.#customSlots = {};
+    this.querySelectorAll('[slot^="mode-"]').forEach((el) => {
+      const modeName = el.getAttribute("slot").slice(5);
+      this.#customSlots[modeName] = {
+        element: el,
+        label:
+          el.getAttribute("label") ||
+          modeName.charAt(0).toUpperCase() + modeName.slice(1),
+      };
+    });
+
     this.#dialog = document.createElement("dialog", { is: "fig-popup" });
     this.#dialog.setAttribute("is", "fig-popup");
     this.#dialog.setAttribute("drag", "true");
@@ -6441,14 +6515,12 @@ class FigFillPicker extends HTMLElement {
     this.#dialog.setAttribute("autoresize", "false");
     this.#dialog.classList.add("fig-fill-picker-dialog");
 
-    this.#dialog.anchor = this.#trigger;
+    this.#dialog.anchor = this.anchorElement || this.#trigger;
     const dialogPosition = this.getAttribute("dialog-position") || "left";
     this.#dialog.setAttribute("position", dialogPosition);
 
-    // Check for allowed modes (supports comma-separated values like "solid,gradient")
-    const mode = this.getAttribute("mode");
-    const allModes = ["solid", "gradient", "image", "video", "webcam"];
-    const modeLabels = {
+    const builtinModes = ["solid", "gradient", "image", "video", "webcam"];
+    const builtinLabels = {
       solid: "Solid",
       gradient: "Gradient",
       image: "Image",
@@ -6456,24 +6528,33 @@ class FigFillPicker extends HTMLElement {
       webcam: "Webcam",
     };
 
-    // Parse allowed modes
-    let allowedModes = allModes;
+    // Build allowed modes: built-ins filtered normally, custom names accepted if slot exists
+    const mode = this.getAttribute("mode");
+    let allowedModes;
     if (mode) {
-      const requestedModes = mode.split(",").map((m) => m.trim().toLowerCase());
-      allowedModes = requestedModes.filter((m) => allModes.includes(m));
-      if (allowedModes.length === 0) allowedModes = allModes;
+      const requested = mode.split(",").map((m) => m.trim().toLowerCase());
+      allowedModes = requested.filter(
+        (m) => builtinModes.includes(m) || this.#customSlots[m]
+      );
+      if (allowedModes.length === 0) allowedModes = [...builtinModes];
+    } else {
+      allowedModes = [...builtinModes];
+    }
+
+    // Build labels map: built-in labels + custom slot labels
+    const modeLabels = { ...builtinLabels };
+    for (const [name, { label }] of Object.entries(this.#customSlots)) {
+      modeLabels[name] = label;
     }
 
-    // If current fillType not in allowed modes, switch to first allowed
     if (!allowedModes.includes(this.#fillType)) {
       this.#fillType = allowedModes[0];
       this.#activeTab = allowedModes[0];
     }
 
-    // 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 = `<h3 class="fig-fill-picker-type-label">${modeLabels[allowedModes[0]]}</h3>`;
@@ -6486,6 +6567,11 @@ class FigFillPicker extends HTMLElement {
         </fig-dropdown>`;
     }
 
+    // Generate tab containers for all allowed modes
+    const tabDivs = allowedModes
+      .map((m) => `<div class="fig-fill-picker-tab" data-tab="${m}"></div>`)
+      .join("\n        ");
+
     this.#dialog.innerHTML = `
       <fig-header>
         ${headerContent}
@@ -6494,16 +6580,33 @@ class FigFillPicker extends HTMLElement {
         </fig-button>
       </fig-header>
       <div class="fig-fill-picker-content">
-        <div class="fig-fill-picker-tab" data-tab="solid"></div>
-        <div class="fig-fill-picker-tab" data-tab="gradient"></div>
-        <div class="fig-fill-picker-tab" data-tab="image"></div>
-        <div class="fig-fill-picker-tab" data-tab="video"></div>
-        <div class="fig-fill-picker-tab" data-tab="webcam"></div>
+        ${tabDivs}
       </div>
     `;
 
     document.body.appendChild(this.#dialog);
 
+    // Populate custom tab containers and emit modeready
+    for (const [modeName, { element }] of Object.entries(this.#customSlots)) {
+      const container = this.#dialog.querySelector(
+        `[data-tab="${modeName}"]`
+      );
+      if (!container) continue;
+
+      // Move children (not the element itself) for vanilla HTML usage
+      while (element.firstChild) {
+        container.appendChild(element.firstChild);
+      }
+
+      // Emit modeready so frameworks can render into the container
+      this.dispatchEvent(
+        new CustomEvent("modeready", {
+          bubbles: true,
+          detail: { mode: modeName, container },
+        })
+      );
+    }
+
     // Setup type dropdown switching (only if not locked)
     const typeDropdown = this.#dialog.querySelector(".fig-fill-picker-type");
     if (typeDropdown) {
@@ -6518,34 +6621,50 @@ class FigFillPicker extends HTMLElement {
         this.#dialog.open = false;
       });
 
-    // Emit change on close
     this.#dialog.addEventListener("close", () => {
       this.#emitChange();
     });
 
-    // Initialize tabs
-    this.#initSolidTab();
-    this.#initGradientTab();
-    this.#initImageTab();
-    this.#initVideoTab();
-    this.#initWebcamTab();
-  }
-
-  #switchTab(tabName) {
-    // Check for allowed modes - prevent switching to disallowed mode
-    const mode = this.getAttribute("mode");
-    const allModes = ["solid", "gradient", "image", "video", "webcam"];
-
-    let allowedModes = allModes;
-    if (mode) {
-      const requestedModes = mode.split(",").map((m) => m.trim().toLowerCase());
-      allowedModes = requestedModes.filter((m) => allModes.includes(m));
-      if (allowedModes.length === 0) allowedModes = allModes;
+    // Initialize built-in tabs (skip any overridden by custom slots)
+    const builtinInits = {
+      solid: () => this.#initSolidTab(),
+      gradient: () => this.#initGradientTab(),
+      image: () => this.#initImageTab(),
+      video: () => this.#initVideoTab(),
+      webcam: () => this.#initWebcamTab(),
+    };
+    for (const [name, init] of Object.entries(builtinInits)) {
+      if (!this.#customSlots[name] && allowedModes.includes(name)) init();
     }
 
-    if (!allowedModes.includes(tabName)) {
-      return; // Don't allow switching to disallowed mode
+    // Listen for input/change from custom tab content
+    for (const modeName of Object.keys(this.#customSlots)) {
+      if (builtinModes.includes(modeName)) continue;
+      const container = this.#dialog.querySelector(
+        `[data-tab="${modeName}"]`
+      );
+      if (!container) continue;
+      container.addEventListener("input", (e) => {
+        if (e.target === this) return;
+        e.stopPropagation();
+        if (e.detail) this.#customData[modeName] = e.detail;
+        this.#emitInput();
+      });
+      container.addEventListener("change", (e) => {
+        if (e.target === this) return;
+        e.stopPropagation();
+        if (e.detail) this.#customData[modeName] = e.detail;
+        this.#emitChange();
+      });
     }
+  }
+
+  #switchTab(tabName) {
+    // Only allow switching to modes that have a tab container in the dialog
+    const tab = this.#dialog?.querySelector(
+      `.fig-fill-picker-tab[data-tab="${tabName}"]`
+    );
+    if (!tab) return;
 
     this.#activeTab = tabName;
     this.#fillType = tabName;
@@ -6566,6 +6685,12 @@ class FigFillPicker extends HTMLElement {
       }
     });
 
+    // Zero out content padding for custom mode tabs
+    const contentEl = this.#dialog.querySelector(".fig-fill-picker-content");
+    if (contentEl) {
+      contentEl.style.padding = this.#customSlots[tabName] ? "0" : "";
+    }
+
     // Update tab-specific UI after visibility change
     if (tabName === "gradient") {
       // Use RAF to ensure layout is complete before updating angle input
@@ -6987,7 +7112,7 @@ class FigFillPicker extends HTMLElement {
         <fig-input-number class="fig-fill-picker-stop-position" min="0" max="100" value="${
           stop.position
         }" units="%"></fig-input-number>
-        <fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" dialog-position="right" value="${
+        <fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${
           stop.color
         }"></fig-input-color>
         <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${
@@ -7015,9 +7140,18 @@ class FigFillPicker extends HTMLElement {
             this.#emitInput();
           });
 
-        row
-          .querySelector(".fig-fill-picker-stop-color")
-          .addEventListener("input", (e) => {
+        const stopColor = row.querySelector(".fig-fill-picker-stop-color");
+        const stopFillPicker = stopColor.querySelector("fig-fill-picker");
+        if (stopFillPicker) {
+          stopFillPicker.anchorElement = this.#dialog;
+        } else {
+          requestAnimationFrame(() => {
+            const fp = stopColor.querySelector("fig-fill-picker");
+            if (fp) fp.anchorElement = this.#dialog;
+          });
+        }
+
+        stopColor.addEventListener("input", (e) => {
             this.#gradient.stops[index].color =
               e.target.hexOpaque || e.target.value;
             const parsedAlpha = parseFloat(e.target.alpha);
@@ -7711,7 +7845,7 @@ class FigFillPicker extends HTMLElement {
           image: { url: this.#webcam.snapshot, scaleMode: "fill", scale: 50 },
         };
       default:
-        return base;
+        return { ...base, ...this.#customData[this.#fillType] };
     }
   }
 

package/index.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet"
           type="text/css"
           href="fig.css">
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css">
     <script src="fig.js"></script>
     <style>
         * {
@@ -161,6 +163,97 @@
             color: var(--figma-color-text);
         }
 
+        pre[class*="language-"] {
+            background: var(--figma-color-bg-secondary);
+            border: 1px solid var(--figma-color-border);
+            border-radius: 6px;
+            padding: 12px 16px;
+            margin: 0;
+            overflow-x: auto;
+        }
+
+        pre[class*="language-"]>code[class*="language-"] {
+            display: block;
+            background: transparent;
+            padding: 0;
+            font-family: "SF Mono", Monaco, Consolas, monospace;
+            font-size: 12px;
+            line-height: 1.5;
+            color: var(--figma-color-text);
+            text-shadow: none;
+        }
+
+        :root {
+            --code-token-comment: #6b7280;
+            --code-token-punctuation: #374151;
+            --code-token-primary: #b42318;
+            --code-token-string: #0f766e;
+            --code-token-operator: #1d4ed8;
+            --code-token-keyword: #6d28d9;
+            --code-token-function: #9a3412;
+        }
+
+        html[style*="color-scheme: dark"] {
+            --code-token-comment: #8b93a7;
+            --code-token-punctuation: #c7cfdd;
+            --code-token-primary: #ff8f8f;
+            --code-token-string: #6dd3b6;
+            --code-token-operator: #7fb4ff;
+            --code-token-keyword: #b79bff;
+            --code-token-function: #ffc27a;
+        }
+
+        /* Keep token colors aligned with theme and improve contrast in light mode */
+        .token.comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: var(--code-token-comment);
+        }
+
+        .token.punctuation {
+            color: var(--code-token-punctuation);
+        }
+
+        .token.property,
+        .token.tag,
+        .token.boolean,
+        .token.number,
+        .token.constant,
+        .token.symbol,
+        .token.deleted {
+            color: var(--code-token-primary);
+        }
+
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.char,
+        .token.builtin,
+        .token.inserted {
+            color: var(--code-token-string);
+        }
+
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .language-css .token.string,
+        .style .token.string {
+            color: var(--code-token-operator);
+            background: transparent;
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.keyword {
+            color: var(--code-token-keyword);
+        }
+
+        .token.function,
+        .token.class-name {
+            color: var(--code-token-function);
+        }
+
         .toolbelt {
             position: fixed;
             bottom: 0.75rem;
@@ -1650,9 +1743,208 @@
             </fig-fill-picker>
 
             <h3>Custom Trigger</h3>
+            <p class="description">Any child element can act as the trigger. If the child is not a
+                <code>fig-chit</code>, it becomes click-only — the fill picker won't update its appearance.
+            </p>
+
+            <h4>Button Trigger</h4>
             <fig-fill-picker value='{"type":"solid","color":"#95E1D3"}'>
                 <fig-button>Edit Fill</fig-button>
             </fig-fill-picker>
+            <pre
+                 style="background: var(--figma-color-bg-secondary); padding: 12px 16px; border-radius: 6px; overflow-x: auto; margin: 0;"><code style="font-family: monospace; font-size: 12px; color: var(--figma-color-text);">&lt;fig-fill-picker value='{"type":"solid","color":"#95E1D3"}'&gt;
+  &lt;fig-button&gt;Edit Fill&lt;/fig-button&gt;
+&lt;/fig-fill-picker&gt;</code></pre>
+
+            <h4>Icon Button Trigger</h4>
+            <fig-fill-picker value='{"type":"solid","color":"#667eea"}'>
+                <fig-button icon
+                            variant="ghost"
+                            title="Pick a fill">
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-eyedropper)"></span>
+                </fig-button>
+            </fig-fill-picker>
+            <pre
+                 style="background: var(--figma-color-bg-secondary); padding: 12px 16px; border-radius: 6px; overflow-x: auto; margin: 0;"><code style="font-family: monospace; font-size: 12px; color: var(--figma-color-text);">&lt;fig-fill-picker value='{"type":"solid","color":"#667eea"}'&gt;
+  &lt;fig-button icon variant="ghost" title="Pick a fill"&gt;
+    &lt;span class="fig-mask-icon" style="--icon: var(--icon-eyedropper)"&gt;&lt;/span&gt;
+  &lt;/fig-button&gt;
+&lt;/fig-fill-picker&gt;</code></pre>
+
+            <h4>Inline Text Trigger</h4>
+            <fig-fill-picker value='{"type":"solid","color":"#F38181"}'>
+                <span style="cursor: pointer; text-decoration: underline; color: var(--figma-color-text-brand)">Change
+                    background</span>
+            </fig-fill-picker>
+            <pre
+                 style="background: var(--figma-color-bg-secondary); padding: 12px 16px; border-radius: 6px; overflow-x: auto; margin: 0;"><code style="font-family: monospace; font-size: 12px; color: var(--figma-color-text);">&lt;fig-fill-picker value='{"type":"solid","color":"#F38181"}'&gt;
+  &lt;span style="cursor: pointer"&gt;Change background&lt;/span&gt;
+&lt;/fig-fill-picker&gt;</code></pre>
+
+            <h4>Swatch with Custom Size</h4>
+            <fig-fill-picker id="fill-picker-custom-swatch"
+                             value='{"type":"gradient","gradient":{"type":"linear","angle":135,"stops":[{"position":0,"color":"#f093fb","opacity":100},{"position":100,"color":"#f5576c","opacity":100}]}}'>
+                <div id="custom-swatch-preview"
+                     style="width: 3rem; height: 3rem; border-radius: 0.5rem; cursor: pointer; background: linear-gradient(135deg, #f093fb, #f5576c)">
+                </div>
+            </fig-fill-picker>
+            <pre
+                 style="background: var(--figma-color-bg-secondary); padding: 12px 16px; border-radius: 6px; overflow-x: auto; margin: 0;"><code style="font-family: monospace; font-size: 12px; color: var(--figma-color-text);">&lt;fig-fill-picker value='{"type":"gradient",...}'&gt;
+  &lt;div style="width: 3rem; height: 3rem; border-radius: 0.5rem;
+              cursor: pointer; background: linear-gradient(...)"&gt;
+  &lt;/div&gt;
+&lt;/fig-fill-picker&gt;</code></pre>
+            <script>
+                (() => {
+                    const picker = document.getElementById('fill-picker-custom-swatch');
+                    const swatch = document.getElementById('custom-swatch-preview');
+                    if (!picker || !swatch) return;
+
+                    const getSizingForMedia = (scaleMode, scale) => {
+                        switch (scaleMode) {
+                            case 'fit':
+                                return { size: 'contain', position: 'center' };
+                            case 'tile':
+                                return { size: `${scale || 50}%`, position: 'top left' };
+                            case 'fill':
+                            case 'crop':
+                            default:
+                                return { size: 'cover', position: 'center' };
+                        }
+                    };
+
+                    const updateSwatchPreview = (fill) => {
+                        if (!fill) return;
+
+                        let background = 'transparent';
+                        let backgroundSize = 'cover';
+                        let backgroundPosition = 'center';
+
+                        if (fill.type === 'solid') {
+                            background = fill.color || '#D9D9D9';
+                        } else if (fill.type === 'gradient') {
+                            background = fill.css || background;
+                        } else if (fill.type === 'image' && fill.image?.url) {
+                            background = `url(${fill.image.url})`;
+                            const sizing = getSizingForMedia(fill.image.scaleMode, fill.image.scale);
+                            backgroundSize = sizing.size;
+                            backgroundPosition = sizing.position;
+                        } else if (fill.type === 'video' && fill.video?.url) {
+                            background = `url(${fill.video.url})`;
+                            const sizing = getSizingForMedia(fill.video.scaleMode, fill.video.scale);
+                            backgroundSize = sizing.size;
+                            backgroundPosition = sizing.position;
+                        } else if (fill.type === 'webcam' && fill.image?.url) {
+                            background = `url(${fill.image.url})`;
+                        }
+
+                        swatch.style.background = background;
+                        swatch.style.backgroundSize = backgroundSize;
+                        swatch.style.backgroundPosition = backgroundPosition;
+                    };
+
+                    picker.addEventListener('input', (e) => updateSwatchPreview(e.detail));
+                    picker.addEventListener('change', (e) => updateSwatchPreview(e.detail));
+                    updateSwatchPreview(picker.value);
+                })();
+            </script>
+
+            <h3>Custom Mode (Slots)</h3>
+            <p class="description">Add custom modes via <code>slot="mode-{name}"</code> children. The mode name must
+                also appear in the <code>mode</code> attribute. Custom slot content manages its own UI; dispatch
+                <code>input</code>/<code>change</code> events with a <code>detail</code> payload to relay values back.
+            </p>
+
+            <h4>Custom "Shader" Mode</h4>
+            <fig-fill-picker mode="solid,shader"
+                             value='{"type":"solid","color":"#95E1D3"}'
+                             experimental="modern">
+                <div slot="mode-shader"
+                     label="Shader">
+                    <fig-field label="Fragment Shader">
+                        <fig-input-text multiline
+                                        placeholder="void main() { ... }"
+                                        value="void main() {&#10;  gl_FragColor = vec4(1.0, 0.0, 0.5, 1.0);&#10;}"></fig-input-text>
+                    </fig-field>
+                </div>
+            </fig-fill-picker>
+            <pre
+                 style="background: var(--figma-color-bg-secondary); padding: 12px 16px; border-radius: 6px; overflow-x: auto; margin: 0;"><code style="font-family: monospace; font-size: 12px; color: var(--figma-color-text);">&lt;fig-fill-picker mode="solid,shader"&gt;
+  &lt;div slot="mode-shader" label="Shader"&gt;
+    &lt;fig-field label="Fragment Shader"&gt;
+      &lt;fig-input-text multiline
+        placeholder="void main() { ... }"
+        value="..."&gt;&lt;/fig-input-text&gt;
+    &lt;/fig-field&gt;
+  &lt;/div&gt;
+&lt;/fig-fill-picker&gt;</code></pre>
+
+            <h4>React Custom Mode (via <code>modeready</code>)</h4>
+            <p class="description">Frameworks like React can listen for the <code>modeready</code> event and render
+                directly into the provided container. The DOM is never moved — React owns its tree from the start.</p>
+            <fig-fill-picker id="react-picker" mode="solid,react-demo">
+                <div slot="mode-react-demo" label="React"></div>
+            </fig-fill-picker>
+            <script type="module">
+                import React from 'https://esm.sh/react@18';
+                import { createRoot } from 'https://esm.sh/react-dom@18/client';
+
+                const h = React.createElement;
+                const picker = document.getElementById('react-picker');
+
+                picker.addEventListener('modeready', (e) => {
+                    if (e.detail.mode !== 'react-demo') return;
+
+                    function ColorButtons() {
+                        const [color, setColor] = React.useState('#667eea');
+                        const colors = ['#FF6B6B', '#4ECDC4', '#667eea', '#f093fb', '#95E1D3'];
+                        return h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
+                            h('p', {
+                                style: {
+                                    fontSize: 11,
+                                    color: 'var(--figma-color-text-secondary)',
+                                    margin: 0,
+                                }
+                            }, `Selected: ${color}`),
+                            h('div', { style: { display: 'flex', gap: 4, flexWrap: 'wrap' } },
+                                colors.map((c) =>
+                                    h('button', {
+                                        key: c,
+                                        onClick: () => setColor(c),
+                                        style: {
+                                            width: 28,
+                                            height: 28,
+                                            borderRadius: 4,
+                                            border: c === color ? '2px solid var(--figma-color-text)' : '1px solid var(--figma-color-border)',
+                                            background: c,
+                                            cursor: 'pointer',
+                                            padding: 0,
+                                        }
+                                    })
+                                )
+                            )
+                        );
+                    }
+
+                    createRoot(e.detail.container).render(h(ColorButtons));
+                });
+            </script>
+            <pre
+                 style="background: var(--figma-color-bg-secondary); padding: 12px 16px; border-radius: 6px; overflow-x: auto; margin: 0;"><code style="font-family: monospace; font-size: 12px; color: var(--figma-color-text);">&lt;fig-fill-picker id="react-picker" mode="solid,react-demo"&gt;
+  &lt;div slot="mode-react-demo" label="React"&gt;&lt;/div&gt;
+&lt;/fig-fill-picker&gt;
+
+&lt;script type="module"&gt;
+  import React from 'https://esm.sh/react@18';
+  import { createRoot } from 'https://esm.sh/react-dom@18/client';
+
+  const picker = document.getElementById('react-picker');
+  picker.addEventListener('modeready', (e) =&gt; {
+    if (e.detail.mode !== 'react-demo') return;
+    createRoot(e.detail.container).render(&lt;MyComponent /&gt;);
+  });
+&lt;/script&gt;</code></pre>
 
             <h3>Without Alpha</h3>
             <fig-fill-picker alpha="false"
@@ -3274,9 +3566,11 @@
 &lt;/dialog&gt;</code></pre>
 
             <h3>Viewport Margin</h3>
-            <p class="description">Use <code>viewport-margin</code> to define safe areas the popup should avoid (e.g. a bottom toolbar). Uses CSS margin shorthand: <code>top right bottom left</code>.</p>
+            <p class="description">Use <code>viewport-margin</code> to define safe areas the popup should avoid (e.g. a
+                bottom toolbar). Uses CSS margin shorthand: <code>top right bottom left</code>.</p>
             <fig-button id="popup-open-viewport-margin"
-                        onclick="document.getElementById('popup-viewport-margin').open = true">Open (64px bottom margin)</fig-button>
+                        onclick="document.getElementById('popup-viewport-margin').open = true">Open (64px bottom
+                margin)</fig-button>
             <dialog id="popup-viewport-margin"
                     is="fig-popup"
                     anchor="#popup-open-viewport-margin"
@@ -3285,7 +3579,9 @@
                     viewport-margin="8 8 64 8">
                 <vstack style="min-width: 14rem;">
                     <strong style="padding: 0 var(--spacer-1);">Viewport Margin</strong>
-                    <p style="padding: 0 var(--spacer-1); margin: 0; font-size: var(--font-size-small); color: var(--figma-color-text-secondary);">This popup won't overlap the bottom 64px of the viewport.</p>
+                    <p
+                       style="padding: 0 var(--spacer-1); margin: 0; font-size: var(--font-size-small); color: var(--figma-color-text-secondary);">
+                        This popup won't overlap the bottom 64px of the viewport.</p>
                     <fig-input-text placeholder="Try scrolling down"></fig-input-text>
                 </vstack>
             </dialog>
@@ -4565,7 +4861,50 @@ button.addEventListener('click', () => {
         </section>
     </div>
 
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-css.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-clike.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
     <script>
+        function detectCodeLanguage(codeText) {
+            const source = codeText.trim();
+            if (!source) return 'javascript';
+
+            if (
+                source.startsWith('<') ||
+                source.startsWith('&lt;') ||
+                source.includes('&lt;/') ||
+                source.includes('</')
+            ) {
+                return 'markup';
+            }
+
+            if (
+                /(^|[\n\r])\s*[@.#a-zA-Z][\w\s.#:[\]-]*\{/.test(source) ||
+                /--[\w-]+\s*:/.test(source)
+            ) {
+                return 'css';
+            }
+
+            return 'javascript';
+        }
+
+        function highlightCodeBlocks() {
+            const blocks = document.querySelectorAll('pre > code');
+            blocks.forEach((code) => {
+                if (!code.className.includes('language-')) {
+                    const language = detectCodeLanguage(code.textContent || '');
+                    code.classList.add(`language-${language}`);
+                    code.parentElement?.classList.add(`language-${language}`);
+                }
+            });
+
+            if (window.Prism) {
+                window.Prism.highlightAll();
+            }
+        }
+
         // Highlight nav item based on hash
         function updateActiveNav() {
             const hash = location.hash || '#avatar';
@@ -4610,6 +4949,7 @@ button.addEventListener('click', () => {
 
         // Initial state
         window.addEventListener('load', () => {
+            highlightCodeBlocks();
             updateActiveNav();
             if (location.hash) {
                 document.querySelector(location.hash)?.scrollIntoView();

package/package.json

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