@rogieking/figui3 8.9.20 → 8.9.21

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

@@ -49,9 +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. 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-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` |

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 */