@rogieking/figui3 8.9.19 → 8.9.21

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 anchored to the host. 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 anchored to the host. 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 anchored to the host. 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/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

@@ -1369,6 +1369,10 @@ input[type="color"] {
     outline-offset: var(--figma-focus-outline-offset);
   }
 
+  :is(fig-swatch, fig-chit):focus-within:not(:focus) & {
+    outline: 0;
+  }
+
   &::-webkit-color-swatch-wrapper {
     padding: 0;
     border: 0;
@@ -1514,6 +1518,16 @@ input[type="color"] {
   &[size="large"]::before {
     border-radius: calc(var(--border-radius) - var(--padding));
   }
+  &:focus,
+  &:active {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
+
+  &:focus-within:not(:focus) {
+    outline: 0;
+  }
+
   input[type="color"] {
     background: none;
     width: var(--width);
@@ -1522,6 +1536,11 @@ input[type="color"] {
     place-self: center;
     box-sizing: border-box;
     opacity: 0;
+
+    &:focus,
+    &:focus-visible {
+      outline: 0;
+    }
   }
 
   /* Gradient/Image types - inset thumbnail with hidden input */
@@ -3849,16 +3868,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,
@@ -3927,6 +3936,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,
@@ -3935,6 +3958,13 @@ 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;
   }