@rogieking/figui3 8.9.18 → 8.9.20

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)
 

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

@@ -49,8 +49,9 @@ Shared:
 | Tag | Playground | Inner control | Notes |
 |---|---|---|---|
 | `propskit-switch` | `#propskit-switch` | `fig-switch` | `checked`, `default` boolean |
-| `propskit-color` | `#propskit-color` | `fig-fill-picker` + `fig-swatch` | Solid swatch, same size as gradient. Opens the fill picker. `alpha` default true |
-| `propskit-gradient` | `#propskit-gradient` | `fig-input-gradient` | Default `edit="picker"`. `mode="handle\|tip"` for inline edit |
+| `propskit-color` | `#propskit-color` | `fig-fill-picker` + `fig-swatch` | Solid swatch, same size as gradient. Clicking the field opens the picker. Focus ring on the field, not the swatch. `alpha` default true |
+| `propskit-fill` | `#propskit-fill` | `fig-fill-picker` + `fig-swatch` | Same chrome as color. Clicking the field opens the picker. Focus ring on the field, not the swatch. Full fill JSON (`solid` / `gradient` / `image` / `video` / `webcam` / custom). Forwards `mode-*` slots |
+| `propskit-gradient` | `#propskit-gradient` | `fig-input-gradient` | Default `edit="picker"`. Clicking the field opens the picker. Focus ring on the field, not the gradient. `mode="handle\|tip"` for inline edit |
 | `propskit-select` | `#propskit-select` | `fig-select` | `options` or slotted `fig-select-options` |
 | `propskit-text` | `#propskit-text` | `fig-input-text` | `type`, `readonly` |
 | `propskit-number` | `#propskit-number` | `fig-input-number` | `min`, `max`, `step`, `precision`, `units`, `steppers` |
@@ -142,7 +143,7 @@ These are layout shells. Wire behavior yourself.
 | Labeled exact number | `propskit-number` |
 | Labeled text | `propskit-text` |
 | Labeled discrete list | `propskit-select` (not `fig-dropdown`) |
-| Labeled color / gradient | `propskit-color` / `propskit-gradient` |
+| Labeled color / fill / gradient | `propskit-color` / `propskit-fill` / `propskit-gradient` |
 | X/Y | `propskit-position` |
 | Spatial on a canvas | `fig-canvas-control` |
 | Angle | `fig-input-angle` |

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/.cursor/skills/propkit/SKILL.md

@@ -69,7 +69,7 @@ On `fig-*` and `<dialog is="fig-...">`, use `class` not `className`.
 | Larger / rich list | `fig-select` (editor) | `propskit-select` |
 | Native select only | `fig-dropdown` | — |
 | Color | `fig-input-color` `text="true"` | `propskit-color` (fill-picker swatch) |
-| Fill | `fig-input-fill` | — |
+| Fill | `fig-input-fill` | `propskit-fill` (fill-picker swatch) |
 | Gradient | `fig-input-gradient` | `propskit-gradient` |
 | Image | `fig-image` `upload` | — |
 | Easing | `fig-easing-curve` | — |

package/README.md

@@ -105,6 +105,7 @@ Minimal example:
 | [Slider](#slider) | `<fig-slider>` | Range, hue, opacity, delta, stepper |
 | [Propskit Slider](#propskit-slider) | `<propskit-slider>` | Labeled field + slider combo |
 | [Propskit Color](#propskit-color) | `<propskit-color>` | Full-surface labeled color control |
+| [Propskit Fill](#propskit-fill) | `<propskit-fill>` | Full-surface labeled fill control |
 | [Propskit Gradient](#propskit-gradient) | `<propskit-gradient>` | Full-surface labeled gradient control |
 | [Propskit Number](#propskit-number) | `<propskit-number>` | Full-surface labeled number control |
 | [Propskit Position](#propskit-position) | `<propskit-position>` | Compact X/Y control |
@@ -392,7 +393,7 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore `defaul
 
 `<propskit-color>`
 
-Composes a `<fig-field>` and a solid `fig-fill-picker` swatch into a full-surface property control. Clicking the swatch opens the color picker. There is no hex/opacity text field.
+Composes a `<fig-field>` and a solid `fig-fill-picker` swatch into a full-surface property control. Clicking the field opens the color picker. There is no hex/opacity text field.
 
 **Attributes:** `label`, `value`, `default`, `alpha`, `disabled`, `size`
 
@@ -401,7 +402,28 @@ Composes a `<fig-field>` and a solid `fig-fill-picker` swatch into a full-surfac
 Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial color.
 
 ```html
-<propskit-color label="Fill" value="#0D99FF" alpha="true"></propskit-color>
+<propskit-color label="Background" value="#0D99FF" alpha="true"></propskit-color>
+```
+
+---
+
+#### Propskit Fill
+
+`<propskit-fill>`
+
+Composes a `<fig-field>` and a `fig-fill-picker` swatch into a full-surface property control, same chrome as `propskit-color`. Clicking the field opens the fill picker for solid, gradient, image, video, webcam, and custom modes. There is no hex/opacity text field.
+
+**Attributes:** `label`, `value` (fill JSON), `default`, `mode`, `alpha`, `webcam-mode`, `default-video`, `disabled`, `size`
+
+**Events:** `input`, `change` — fill object in `event.detail` (`{ type, ... }`).
+
+Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial fill. Slot `mode-*` children onto the host to add custom picker tabs.
+
+```html
+<propskit-fill
+  label="Fill"
+  value='{"type":"solid","color":"#0D99FF","alpha":1}'
+></propskit-fill>
 ```
 
 ---
@@ -410,7 +432,7 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore `defaul
 
 `<propskit-gradient>`
 
-Composes a `<fig-field>` and `<fig-input-gradient>` into a full-surface property control. Defaults to `edit="picker"` — click the swatch to open the fill picker.
+Composes a `<fig-field>` and `<fig-input-gradient>` into a full-surface property control. Defaults to `edit="picker"` — click the field to open the fill picker.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
@@ -426,7 +448,7 @@ Composes a `<fig-field>` and `<fig-input-gradient>` into a full-surface property
 
 **Methods and state:** `defaultValue`, `isDefault`, and `resetToDefault()`. JSON defaults use structural equality, so object key order does not affect dirty state.
 
-Click the swatch to open the fill picker. With `edit="true"`, the first stop receives focus; Arrow keys move the selected stop, Shift+Arrow moves by 5%, Tab cycles stops, and Delete/Backspace removes a stop while preserving the two-stop minimum.
+Click the field to open the fill picker. With `edit="true"`, the first stop receives focus; Arrow keys move the selected stop, Shift+Arrow moves by 5%, Tab cycles stops, and Delete/Backspace removes a stop while preserving the two-stop minimum.
 
 ```html
 <propskit-gradient

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)))
@@ -3166,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) {
@@ -3850,16 +3849,6 @@ fig-input-fill {
   background-color: var(--figma-color-bg-secondary);
   border-radius: var(--radius-medium);
   box-shadow: none !important;
-  &:focus,
-  &:focus-within,
-  &.has-popup-open {
-    outline: var(--figma-focus-outline) !important;
-    outline-offset: var(--figma-focus-outline-offset) !important;
-  }
-  &:hover {
-    outline: 1px solid var(--figma-color-border);
-    outline-offset: -1px !important;
-  }
 
   & > .input-combo > :is(fig-swatch, fig-chit):not(:only-child),
   & > .input-combo > :is(fig-swatch, fig-chit):not(:only-child) input,
@@ -3928,6 +3917,20 @@ fig-input-fill {
   }
 }
 
+fig-input-color,
+fig-input-gradient {
+  &:focus,
+  &:focus-within,
+  &.has-popup-open {
+    outline: var(--figma-focus-outline) !important;
+    outline-offset: var(--figma-focus-outline-offset) !important;
+  }
+  &:hover {
+    outline: 1px solid var(--figma-color-border);
+    outline-offset: -1px !important;
+  }
+}
+
 fig-input-color,
 fig-input-fill,
 fig-input-text,
@@ -3936,6 +3939,17 @@ fig-input-number {
 }
 
 fig-input-fill {
+  outline: none !important;
+
+  &:is(:hover, :focus, :focus-visible, :focus-within),
+  &.has-popup-open {
+    outline: none !important;
+  }
+
+  & > [slot^="mode-"] {
+    display: none;
+  }
+
   & > .input-combo > fig-fill-picker {
     display: contents;
   }