@rogieking/figui3 8.9.17 → 8.9.19

package/.cursor/skills/fig-editor/SKILL.md

@@ -128,7 +128,7 @@ Full fill editor. Core `fig-input-color` / `fig-input-fill` auto-open it when re
 </fig-fill-picker>
 ```
 
-Playground: `#fill-picker` — `all-modes`, `solid`, `gradient`, `image`, `video`, `webcam`.
+Playground: `#fill-picker` — `all-modes`, `solid`, `gradient`, `image`, `video`, `webcam`, `shader` (custom `slot="mode-shader"`).
 
 | Attr | Notes |
 |---|---|
@@ -161,13 +161,12 @@ Do not use `picker` or `picker-anchor` on `fig-input-color`. Forward picker chro
 ### Custom modes (vanilla)
 
 ```html
-<fig-fill-picker mode="solid,tokens">
-  <fig-swatch></fig-swatch>
+<fig-input-fill mode="solid,tokens" value='{"type":"tokens"}'>
   <div slot="mode-tokens" label="Tokens">Token UI</div>
-</fig-fill-picker>
+</fig-input-fill>
 ```
 
-Child `slot="mode-<name>"` plus `<name>` in `mode`. Custom content must dispatch `input` / `change` with `detail` so the picker stores mode data.
+Child `slot="mode-<name>"` plus `<name>` in `mode`. `fig-input-fill` forwards those slots to the inner picker and uses image-style chrome (type label + opacity). Custom content must dispatch `input` / `change` with `detail` so the picker stores mode data.
 
 ### Custom modes (React)
 
@@ -178,7 +177,7 @@ Child `slot="mode-<name>"` plus `<name>` in `mode`. Custom content must dispatch
 
 ## `fig-interpolation-swatch`
 
-Preview for gradient interpolation (linear or polar hue arc). Playground attrs: `size="small|large"`. Used inside the fill picker gradient UI; can be used standalone with a gradient `value`.
+Preview for gradient interpolation (linear or polar hue arc). Playground attrs: `size="small|large"`. Can be used standalone with a gradient `value`. The fill picker interpolation row is hidden for now and locks to `srgb`.
 
 ## Maintainer notes
 

package/.cursor/skills/figui3/SKILL.md

@@ -138,7 +138,7 @@ Playground hashes: `/figui3#{id}`. Full attrs: [reference.md](reference.md).
 | Tag | Playground | Notes |
 |---|---|---|
 | `fig-input-color` | (propkit `#color`) | Solid color. `text`, `alpha`. Auto-detects `fig-fill-picker` |
-| `fig-input-fill` | `#fill-input` | Solid/gradient/image/video/webcam JSON `value`. Same `webcam` / `video.poster` shape as the picker. `webcam-mode`, `default-video`, `picker-*` forwarded if picker registered |
+| `fig-input-fill` | `#fill-input` | Solid/gradient/image/video/webcam/custom JSON `value`. Custom `mode-*` slots forward to the inner picker and use image-style chrome. Same `webcam` / `video.poster` shape as the picker. `webcam-mode`, `default-video`, `picker-*` forwarded if picker registered |
 | `fig-input-palette` | (propkit `#palette`) | Multi-color. `fixed`, `open` |
 | `fig-input-gradient` | (propkit `#gradient`) | Stops. `edit`, `mode="handle\|tip"` |
 | `fig-swatch` | `#swatch` | `size`, `selected`, `alpha` |

package/components.css

@@ -436,7 +436,7 @@
     0px 10px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35)),
     0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)),
     inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
-    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.075));
+    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
 
   --fig-popover-shadow:
     drop-shadow(0px 1px 1.5px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)))
@@ -1495,7 +1495,8 @@ input[type="color"] {
   }
   &::before {
     content: "";
-    background: var(--swatch-background);
+    background-color: transparent;
+    background-image: var(--swatch-background);
     background-size: var(--swatch-bg-size);
     background-position: var(--swatch-bg-position);
     background-repeat: no-repeat;
@@ -1780,6 +1781,18 @@ fig-media-controls {
   gap: var(--spacer-1);
   width: 100%;
 
+  /* display:contents on fig-tooltip drops the play button out of this flex
+     row until hover/reflow. Keep a real box so the control is always visible. */
+  > fig-tooltip {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+
+  fig-icon {
+    contain: none;
+  }
+
   &[overlay]:not([overlay="false"]) {
     border-radius: var(--radius-medium);
     background-color: var(--figma-color-bg);
@@ -3153,7 +3166,6 @@ dialog[is="fig-popup"] {
     position: sticky;
     top: 0;
     z-index: 2;
-    background: var(--fig-popup-bg-color, var(--figma-color-bg));
   }
 
   &:has(> fig-header) {
@@ -3923,6 +3935,10 @@ fig-input-number {
 }
 
 fig-input-fill {
+  & > [slot^="mode-"] {
+    display: none;
+  }
+
   & > .input-combo > fig-fill-picker {
     display: contents;
   }
@@ -4891,7 +4907,9 @@ fig-skeleton {
 
 .fig-mask-icon,
 fig-icon {
-  contain: strict;
+  /* size only — paint containment skips mask-image when `name` / `--icon` updates
+     until a sibling hover (e.g. fig-preview) forces a repaint. */
+  contain: size;
   --size: var(--spacer-4);
   --icon: var(--icon-24-add);