@rogieking/figui3 3.21.2 → 3.23.0

package/.cursor/skills/propkit/SKILL.md

@@ -111,8 +111,7 @@ bootstrap();
 - Use `transform` when internal value scale differs from UI display (example: internal `0..1`, display `0..100%`).
 - Variants:
   - Default variant for most property panels.
-  - `variant="minimal"` for visually quieter contexts.
-  - `variant="neue"` only where explicitly requested for that panel's style.
+  - `variant="neue"` for a compact, visually quieter style.
 - Always set explicit `min`, `max`, and `step` (and `units` where applicable) to keep behavior predictable.
 
 ### Control Selection Heuristics
@@ -176,7 +175,7 @@ Use a horizontal fig-field, with a fig-slider, min=0 max=100 text=true units=%.
 </fig-field>
 <fig-field direction="horizontal">
   <label>Hue</label>
-  <fig-slider type="hue" value="180" text="true" variant="minimal" full></fig-slider>
+  <fig-slider type="hue" value="180" text="true" variant="neue" full></fig-slider>
 </fig-field>
 <fig-field direction="horizontal">
   <label>Offset</label>

package/README.md

@@ -451,7 +451,7 @@ An editable palette of solid colors, each rendered as a `<fig-input-color>` swat
 
 ```html
 <fig-input-palette value='["#FF0000","#00FF00","#0000FF"]'></fig-input-palette>
-<fig-input-palette value='[{"color":"#FF0000","alpha":0.5},{"color":"#00FF00","alpha":1}]' expanded="true"></fig-input-palette>
+<fig-input-palette value='[{"color":"#FF0000","alpha":0.5},{"color":"#00FF00","alpha":1}]' open></fig-input-palette>
 ```
 
 ---

package/components.css

@@ -1178,7 +1178,7 @@ fig-chit {
   --width: var(--size);
   --height: var(--size);
   --border-radius: var(--radius-medium);
-  --chit-background: #d9d9d9;
+  --chit-background: linear-gradient(#d9d9d9, #d9d9d9);
   --chit-bg-size: cover;
   --chit-bg-position: center;
   --selected: 0;
@@ -1194,9 +1194,14 @@ fig-chit {
 
   &::before,
   &::after,
+  div,
   input {
     grid-area: 1/1;
   }
+  & > div {
+    background: var(--checkerboard-small);
+    border-radius: var(--border-radius);
+  }
 
   /* Selection ring */
   &[selected]:not([selected="false"]) {
@@ -1210,6 +1215,9 @@ fig-chit {
     &[selected]:not([selected="false"]) {
       --padding: 3px;
     }
+    & > div {
+      background: var(--checkerboard);
+    }
   }
 
   &[size="medium"] {
@@ -1227,7 +1235,8 @@ fig-chit {
   }
 
   &::before,
-  &::after {
+  &::after,
+  & > div {
     content: "";
     width: calc(var(--width) - var(--padding) * 2);
     height: calc(var(--height) - var(--padding) * 2);
@@ -1242,12 +1251,10 @@ fig-chit {
   }
   &::before {
     content: "";
-    background: var(--chit-background), var(--checkerboard-small);
-    background-size:
-      var(--chit-bg-size),
-      0.5rem 0.5rem;
+    background: var(--chit-background);
+    background-size: var(--chit-bg-size);
     background-position: var(--chit-bg-position);
-    background-repeat: no-repeat, repeat;
+    background-repeat: no-repeat;
     border-radius: calc(var(--border-radius) - (var(--padding) / 2));
     mask-image: linear-gradient(
       to right,
@@ -1280,17 +1287,90 @@ fig-chit {
       display: none;
     }
   }
+}
 
-  /* Checkerboard for empty/missing images */
-  &[data-type="image"]:not([background])::after,
-  &[data-type="image"][background=""]::after,
-  &[data-type="image"][background="url()"]::after,
-  &[checkerboard]:not([checkerboard="false"])::after {
-    background: var(--checkerboard);
+/* Fig Image */
+fig-truncate {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: bottom;
+
+  &[position="left"] {
+    display: block;
+    direction: rtl;
+    text-align: left;
+  }
+
+  &[position="middle"] {
+    display: inline-flex;
+    text-overflow: clip;
+    gap: 0;
+
+    & > .start,
+    & > .end {
+      flex: 0 1 auto;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+
+    & > .end {
+      direction: rtl; /* technique #2 on right half */
+      text-align: left;
+      text-overflow: ellipsis;
+    }
+    &[tail] {
+      & > .end {
+        direction: ltr;
+        text-align: right;
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+
+fig-input-file {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-2);
+  min-width: 0;
+
+  &[full]:not([full="false"]) {
+    flex: 1 1 auto;
+    width: 100%;
+
+    & > fig-tooltip,
+    & > fig-button {
+      flex: 1;
+      min-width: 0;
+    }
+
+    & > fig-tooltip > fig-button {
+      width: 100%;
+    }
+  }
+
+  .fig-input-file-filename {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .fig-input-file-clear {
+    flex-shrink: 0;
+  }
+
+  &[dragover] {
+    outline: 2px dashed var(--figma-color-border-brand);
+    outline-offset: -2px;
+    border-radius: var(--radius-small);
   }
 }
 
-/* Fig Image */
 fig-image {
   --image-size: 2rem;
   --fit: cover;
@@ -2477,37 +2557,6 @@ fig-slider {
     }
   }
 
-  &[variant="minimal"] {
-    --slider-height: 0.375rem;
-    --slider-thumb-size: 0.75rem;
-    --slider-tick-width: calc(var(--slider-height) / 2);
-    --slider-tick-height: calc(var(--slider-height) / 2);
-    --handle-transition: none;
-    --slider-transition: none;
-    --slider-handle-shadow:
-      inset 0 0 0 calc(6px + 0.5rem * var(--unchanged))
-        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);
-
-    .fig-slider-input-container {
-      height: var(--slider-height);
-      position: relative;
-      display: block;
-      width: 100%;
-    }
-    fig-input-text {
-      height: calc(var(--slider-height) * 2);
-      background-color: transparent;
-    }
-
-    &:hover,
-    &:focus-within {
-      fig-input-text {
-        height: auto;
-      }
-    }
-  }
   &[variant="neue"] {
     --slider-height: 0.375rem;
     --slider-thumb-size: 0.75rem;
@@ -2816,7 +2865,7 @@ fig-tooltip {
   max-width: 180px;
   width: max-content;
   box-shadow: inset 0 0.5px 0 0
-    light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.06));
+    light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
   filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
     drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
     drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
@@ -2949,10 +2998,13 @@ fig-header {
   align-items: center;
   box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
   gap: 0.25rem;
+  user-select: none;
 
   & h3 {
     font-weight: var(--body-medium-strong-fontWeight);
     flex-grow: 1;
+    display: flex;
+    align-items: center;
   }
 
   &[borderless] {
@@ -2960,6 +3012,65 @@ fig-header {
   }
 }
 
+fig-group {
+  display: block;
+  padding-bottom: var(--spacer-2-5);
+
+  /* Sibling groups  */
+  & + fig-group {
+    box-shadow: inset 0 1px 0 0 var(--figma-color-border);
+    &:not([name]) {
+      padding-top: var(--spacer-2-5);
+    }
+    &:last-of-type {
+      padding-bottom: 0;
+    }
+  }
+
+  & > fig-header {
+    cursor: default;
+    padding-left: var(--spacer-3);
+    h3 {
+      .fig-group-chevron {
+        --icon: var(--icon-chevron);
+        --size: 1rem;
+        color: var(--figma-color-text-tertiary);
+        transform: rotate(-90deg);
+        transition: transform var(--transition-duration)
+          var(--transition-timing-function);
+        margin-left: calc(var(--spacer-3) * -1);
+      }
+    }
+  }
+
+  &[collapsible] > fig-header h3 {
+    user-select: none;
+  }
+
+  &[collapsible]:not([open]):not([open="true"]),
+  &[collapsible][open="false"] {
+    padding-bottom: 0;
+    fig-header {
+      color: var(--figma-color-text-secondary);
+      &:hover {
+        color: var(--figma-color-text);
+        .fig-group-chevron {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  &[open]:not([open="false"]) > fig-header .fig-group-chevron {
+    transform: rotate(0deg);
+  }
+
+  &[collapsible]:not([open]):not([open="true"]) > :not(fig-header),
+  &[collapsible][open="false"] > :not(fig-header) {
+    display: none;
+  }
+}
+
 fig-footer {
   display: flex;
   align-items: center;
@@ -3243,12 +3354,18 @@ fig-input-palette {
   flex-direction: column;
   gap: var(--spacer-2);
   min-width: 0;
+  border-radius: var(--radius-medium);
+
+  &:focus {
+    outline: 1px solid var(--figma-color-border-selected) !important;
+    outline-offset: -1px !important;
+  }
 
   .palette-colors {
     display: flex;
     flex-wrap: nowrap;
     gap: 0;
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-medium);
     overflow: hidden;
     grid-area: inputs;
     min-width: 0;
@@ -3263,18 +3380,14 @@ fig-input-palette {
     grid-template-columns: 1fr 24px;
     grid-template-areas: "inputs button";
     border-radius: var(--radius-medium);
-    background-color: var(--figma-color-bg-secondary);
     width: 100%;
-    gap: var(--spacer-1);
+    gap: var(--spacer-2);
     place-items: center;
 
     .palette-colors {
       display: flex;
-      --palette-colors-height: calc(1.5rem - var(--spacer-1));
+      --palette-colors-height: 1.5rem;
       height: var(--palette-colors-height);
-      margin-left: var(--spacer-1);
-
-      background-color: var(--figma-color-bg-secondary);
       fig-input-color {
         width: 100%;
       }
@@ -3298,7 +3411,7 @@ fig-input-palette {
       }
     }
   }
-  &[expanded]:not([expanded="false"]):not([edit="false"]) {
+  &[open]:not([open="false"]):not([edit="false"]) {
     .palette-colors-expanded {
       display: flex;
     }
@@ -3309,11 +3422,6 @@ fig-input-palette {
       grid-template-areas: "inputs inputs";
     }
   }
-  &[color-strip="false"] {
-    .palette-colors-inline {
-      display: none !important;
-    }
-  }
   .palette-colors-expanded {
     display: none;
     flex-direction: column;
@@ -3335,10 +3443,6 @@ fig-input-palette {
   }
 }
 
-fig-field[direction="horizontal"]:has(> fig-input-palette) {
-  padding-right: var(--spacer-2);
-}
-
 fig-slider {
   display: flex;
 
@@ -3384,30 +3488,46 @@ fig-field,
   & > label {
     flex: 0;
     padding: var(--spacer-1) 0;
-    display: flex;
-    justify-content: space-between;
     min-height: calc(1rem + var(--spacer-1) * 2);
+    display: flex;
     align-items: center;
     width: 100%;
+    user-select: none;
+  }
+
+  & > .fig-field-chevron {
+    --icon: var(--icon-chevron);
+    --size: 1rem;
+    color: var(--figma-color-text-tertiary);
+    transform: rotate(-90deg);
+    transition: transform var(--transition-duration)
+      var(--transition-timing-function);
+    flex-shrink: 0;
+    margin: var(--spacer-1) 0;
+    margin-left: calc(var(--spacer-3) * -1);
+    margin-right: calc(var(--spacer-2) * -1);
+  }
+
+  &:has(> [open]:not([open="false"])) > .fig-field-chevron {
+    transform: rotate(0deg);
   }
 
   &[direction="horizontal"] > label {
+    display: block;
     width: auto;
     min-width: var(--field-label-width);
     max-width: var(--field-label-width);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    padding: 0;
+    line-height: 1.5rem;
   }
 
   &[direction="horizontal"] {
     gap: var(--spacer-2);
     align-items: start;
     flex-direction: row;
-
-    & > label {
-      min-width: 4rem;
-    }
     &[columns="thirds"] {
       display: grid;
       grid-template-columns: repeat(3, 1fr);