@rogieking/figui3 4.15.1 → 4.15.4

package/README.md

@@ -764,7 +764,8 @@ A draggable handle element. Positioned on a `drag-surface` container with axis c
 | `drag-surface` | string | — | CSS selector for drag container (defaults to parent) |
 | `drag-axes` | string | `"xy"` | Constrain axes: `"x"`, `"y"`, `"xy"` |
 | `drag-snapping` | string | — | Snapping behavior |
-| `type` | string | — | `"color"` for color handle with `fig-color-tip` |
+| `type` | string | — | `"color"` for color handle with direct solid color picker |
+| `color-tip` | boolean | `false` | For `type="color"`, use the compact `fig-color-tip` interaction instead of opening the picker directly |
 | `control` | string | — | `"add"` or `"remove"` delegated to color tip |
 | `hit-area` | string | — | Expanded interaction zone (unitless px). `"8"`, `"8 12"` (v h), or `"8 circle"` |
 | `hit-area-mode` | string | `"handle"` | `"handle"` proxies to handle drag/select; `"delegate"` emits `hitareadown` event |
@@ -775,6 +776,8 @@ A draggable handle element. Positioned on a `drag-surface` container with axis c
 |---|---|
 | `input` | `{ x, y, px, py, shiftKey }` — while dragging |
 | `change` | `{ x, y, px, py }` — on release |
+| `input` | `{ color, opacity }` — while editing a `type="color"` handle |
+| `change` | `{ color, opacity }` — when committing a `type="color"` handle |
 | `add` | — (when control="add") |
 | `remove` | — (when control="remove") |
 | `hitareadown` | `{ originalEvent }` — when `hit-area-mode="delegate"` and the hit area is clicked |

package/components.css

@@ -282,11 +282,21 @@
       rgba(255, 255, 255, 0.2) 0% 50%
     )
     0 0 / 0.5rem 0.5rem;
-    --checkerboard-chit: repeating-conic-gradient(
+  --checkerboard-chit: repeating-conic-gradient(
       rgba(0, 0, 0, 0.2) 0% 25%,
       rgba(255, 255, 255, 0.2) 0% 50%
     )
-    0 0 / 14px 14px;
+    0 0 / 0.875rem 0.875rem;
+    --checkerboard-slider: repeating-conic-gradient(
+      rgba(0, 0, 0, 0.2) 0% 25%,
+      rgba(255, 255, 255, 0.2) 0% 50%
+    )
+    0 0 / 0.375rem 0.375rem;
+  --checkerboard-handle: repeating-conic-gradient(
+      rgba(0, 0, 0, 0.2) 0% 25%,
+      rgba(255, 255, 255, 0.2) 0% 50%
+    )
+    0 0 / 0.625rem 0.625rem;
   --bg-hue: linear-gradient(
     90deg,
     rgba(255, 0, 0, 1),
@@ -1910,6 +1920,7 @@ fig-origin-grid {
     --width: var(--origin-grid-handle-size);
     --height: var(--origin-grid-handle-size);
     --border-radius: var(--radius-small);
+    
     position: absolute;
     left: 50%;
     top: 50%;
@@ -2404,6 +2415,7 @@ fig-slider {
     0 0 0 1px var(--figma-color-border-selected);
   --slider-transition: none;
   --handle-transition: var(--slider-transition);
+  --slider-checkerboard: var(--checkerboard);
 
   display: flex;
   align-items: center;
@@ -2575,7 +2587,7 @@ fig-slider {
     &.opacity::-webkit-slider-runnable-track {
       background:
         linear-gradient(to right, transparent, var(--color)),
-        var(--checkerboard);
+        var(--slider-checkerboard);
     }
 
     /* Firefox thumb */
@@ -2630,7 +2642,7 @@ fig-slider {
     &.opacity::-moz-range-track {
       background:
         linear-gradient(to right, transparent, var(--color)),
-        var(--checkerboard);
+        var( --slider-checkerboard);
     }
   }
 
@@ -2684,6 +2696,7 @@ fig-slider {
         var(--slider-thumb-color),
       0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
       var(--figma-elevation-100);
+    --slider-checkerboard: var(--checkerboard-slider);
 
     background-color: var(--figma-color-bg-secondary);
     border-radius: var(--radius-medium);
@@ -2716,6 +2729,7 @@ fig-slider {
         height: auto;
       }
     }
+    
   }
 }
 
@@ -3459,7 +3473,6 @@ fig-input-palette {
     "inline    button";
   gap: var(--spacer-2);
   min-width: 0;
-  border-radius: var(--radius-medium);
 
   > .palette-colors-inline {
     grid-area: inline;
@@ -3550,12 +3563,14 @@ fig-input-palette {
       min-width: 0;
       grid-column: input / -1;
 
-      &:has(+ fig-button) {
+      &:has(+ fig-button),
+      &:has(+ fig-tooltip) {
         grid-column: input;
       }
     }
 
     > fig-button,
+    > fig-tooltip,
     > button {
       grid-column: button;
     }
@@ -3567,6 +3582,12 @@ fig-input-palette {
       border-radius: var(--radius-medium) !important;
     }
   }
+  fig-field &{
+    grid-template-columns: 1fr calc(var(--spacer-3) + var(--spacer-1));
+    .palette-colors-expanded {
+      grid-template-columns: [input] 1fr [button] calc(var(--spacer-3) + var(--spacer-1));
+    }
+  }
 }
 
 fig-field {
@@ -3639,6 +3660,10 @@ fig-field {
     &[columns="half"] {
       --fig-field-label-ratio: 2fr;
     }
+    &[columns="2/5"] {
+      --fig-field-label-ratio: 2fr;
+      --fig-field-input-ratio: 3fr;
+    }
     & > label {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -4932,6 +4957,7 @@ fig-handle {
   --border: none;
   --fig-handle-hit-area-opacity: 0;
   --fig-handle-hit-area-size: 0;
+  --fig-handle-checkerboard: var(--checkerboard);
 
   margin: 0;
   padding: 0;
@@ -4962,7 +4988,9 @@ fig-handle {
     width: calc(var(--width) - var(--ring-width) * 2);
     height: calc(var(--height) - var(--ring-width) * 2);
     background:
-      linear-gradient(var(--fill), var(--fill)), var(--checkerboard-chit);
+      linear-gradient(var(--fill), var(--fill)), var(--fig-handle-checkerboard);
+    background-position: 0 0;
+    background-size: 0.625rem 0.625rem;
     border-radius: var(--border-radius);
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
     place-self: center;
@@ -5008,6 +5036,7 @@ fig-handle {
 
   &[type="color"],
   &[control] {
+    position: relative;
     overflow: visible;
 
     fig-color-tip {