@rogieking/figui3 8.9.49 → 8.10.0

package/fig-lab.css

@@ -217,6 +217,48 @@ fig-chat-message {
   }
 }
 
+:is(
+  propskit-switch,
+  propskit-color,
+  propskit-fill,
+  propskit-gradient,
+  propskit-palette,
+  propskit-select,
+  propskit-easing,
+  propskit-text,
+  propskit-number,
+  propskit-origin,
+  propskit-position,
+  propskit-joystick,
+  propskit-spring,
+  propskit-color-point,
+  propskit-point-radius,
+  propskit-point-radius-angle,
+  propskit-point-point,
+  propskit-group,
+  propskit-slider,
+  propskit-wheel,
+  propskit-oscillator
+) {
+  --figma-focus-outline-radius: var(--radius-medium-large);
+  user-select: none;
+
+  :is(
+    input:not([type]),
+    input[type="text"],
+    input[type="number"],
+    input[type="email"],
+    input[type="password"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="url"],
+    textarea,
+    [contenteditable="true"]
+  ) {
+    user-select: text;
+  }
+}
+
 propskit-group {
   display: block;
   width: 100%;
@@ -362,9 +404,13 @@ fig-content:has(> propskit-group[name]:last-child) {
   propskit-fill,
   propskit-gradient,
   propskit-select,
+  propskit-easing,
   propskit-text,
   propskit-number,
+  propskit-origin,
   propskit-position,
+  propskit-joystick,
+  propskit-spring,
   propskit-color-point,
   propskit-point-radius,
   propskit-point-radius-angle,
@@ -379,58 +425,70 @@ fig-content:has(> propskit-group[name]:last-child) {
   box-shadow: none;
 }
 
-/* Large is the default size: use wider field padding and nudge trailing
-   controls in from the right. propskit-select uses shared label padding. */
-:is(
-  propskit-switch,
-  propskit-color,
-  propskit-fill,
-  propskit-gradient,
-  propskit-text,
-  propskit-number,
-  propskit-slider
-):not([size="small"]) {
-  fig-field:not([direction="vertical"]) {
-    padding-left: var(--spacer-2-5);
-  }
-}
-
-/* Flex-positioned numbers — margin works. Absolute numbers use right: calc(...) below. */
-propskit-number {
-  fig-field fig-input-number {
-    margin-right: var(--spacer-1);
-  }
-}
-
-propskit-text {
-  fig-field > fig-input-text {
-    margin-right: var(--spacer-1);
-  }
-}
-
 propskit-switch {
   --propskit-switch-height: 2rem;
-  --propskit-switch-vertical-padding: var(--spacer-1);
-  --propskit-switch-horizontal-padding: var(--spacer-3);
+  --_propskit-padding-block: var(
+    --propskit-switch-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-switch-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-switch-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-switch-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-switch-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-switch-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-switch-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-switch-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-switch-label-inline-size,
+    var(--propskit-label-inline-size, 75%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-switch-input-inline-size,
+    var(
+      --propskit-input-inline-size,
+      var(--_propskit-switch-control-inline-size, 2rem)
+    )
+  );
 
   display: block;
+  box-sizing: border-box;
   width: 100%;
   height: calc(
-    var(--propskit-switch-height) + var(--propskit-switch-vertical-padding) * 2
+    var(--propskit-switch-height) + var(--_propskit-padding-block) * 2
   );
-  padding: var(--propskit-switch-vertical-padding)
-    var(--propskit-switch-horizontal-padding);
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
 
-  &:not([size="small"]) fig-field:not([direction="vertical"]) {
-    padding-right: var(--spacer-1);
+  &[variant="segmented-control"] {
+    --_propskit-switch-control-inline-size: 4.5rem;
   }
 
-  &[size="small"] {
-    --propskit-switch-height: 1.5rem;
-
-    fig-field:not([direction="vertical"]) {
-      padding-right: 0;
-    }
+  &:not([variant="segmented-control"]) .propskit-switch-surface {
+    padding-inline-end: var(--spacer-2);
   }
 
   &[disabled]:not([disabled="false"]) {
@@ -441,25 +499,33 @@ propskit-switch {
     }
   }
 
-  fig-field:not([direction="vertical"]) {
+  .propskit-switch-surface {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
-    padding: 0 0 0 var(--spacer-2);
-    border-radius: var(--radius-medium);
-    background-color: var(--figma-color-bg-secondary);
+    padding-inline: var(--spacer-2-5) var(--spacer-1);
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
+    cursor: default;
 
     &::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
+      border: var(--_propskit-border);
       pointer-events: none;
     }
 
-    &:hover::after {
-      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    &:hover {
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
+
+      &::after {
+        border: var(--_propskit-hover-border);
+      }
     }
 
     & > label {
@@ -469,9 +535,9 @@ propskit-switch {
       flex: 1 1 auto;
       min-width: 0;
       margin: 0;
-      padding: 0;
       overflow: hidden;
-      color: var(--figma-color-text-secondary);
+      max-inline-size: var(--_propskit-label-inline-size);
+      color: inherit;
       text-overflow: ellipsis;
       white-space: nowrap;
       pointer-events: none;
@@ -481,32 +547,125 @@ propskit-switch {
       }
     }
 
-    fig-segmented-control {
+    :is(fig-switch, fig-segmented-control) {
       flex: 0 0 auto;
-      margin-left: auto;
-      min-width: 4.5rem;
+      margin-inline-start: auto;
+      inline-size: var(--_propskit-input-inline-size);
+      min-inline-size: var(--_propskit-input-inline-size);
+    }
+
+    fig-switch {
+      justify-content: flex-end;
+      padding-block: 0;
     }
   }
 }
 
+propskit-color {
+  --_propskit-padding-block: var(
+    --propskit-color-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-color-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-color-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-color-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-color-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-color-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-color-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-color-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-color-label-inline-size,
+    var(--propskit-label-inline-size, 40%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-color-input-inline-size,
+    var(--propskit-input-inline-size, 33%)
+  );
+}
+
+propskit-fill {
+  --_propskit-padding-block: var(
+    --propskit-fill-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-fill-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-fill-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-fill-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-fill-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-fill-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-fill-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-fill-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-fill-label-inline-size,
+    var(--propskit-label-inline-size, 40%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-fill-input-inline-size,
+    var(--propskit-input-inline-size, 33%)
+  );
+}
+
 propskit-color,
 propskit-fill {
   --propskit-color-height: 2rem;
-  --propskit-color-vertical-padding: var(--spacer-1);
-  --propskit-color-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
 
   display: block;
+  box-sizing: border-box;
   width: 100%;
   height: calc(
-    var(--propskit-color-height) + var(--propskit-color-vertical-padding) * 2
+    var(--propskit-color-height) + var(--_propskit-padding-block) * 2
   );
-  padding: var(--propskit-color-vertical-padding)
-    var(--propskit-color-horizontal-padding);
-
-  &[size="small"] {
-    --propskit-color-height: 1.5rem;
-  }
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
 
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
@@ -516,26 +675,33 @@ propskit-fill {
     }
   }
 
-  fig-field:not([direction="vertical"]) {
+  :is(.propskit-color-surface, .propskit-fill-surface) {
     position: relative;
     display: flex;
     align-items: center;
     gap: var(--spacer-2);
     height: 100%;
-    padding: 0 0 0 var(--spacer-2);
-    border-radius: var(--radius-medium);
-    background-color: var(--figma-color-bg-secondary);
+    padding-inline-start: var(--spacer-2-5);
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
 
     &::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
+      border: var(--_propskit-border);
       pointer-events: none;
     }
 
-    &:hover::after {
-      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    &:hover {
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
+
+      &::after {
+        border: var(--_propskit-hover-border);
+      }
     }
 
     & > label {
@@ -544,12 +710,12 @@ propskit-fill {
       display: flex;
       align-items: center;
       flex: 0 1 auto;
-      max-width: 40%;
+      max-inline-size: var(--_propskit-label-inline-size);
       min-width: 0;
       margin: 0;
       padding: 0;
       overflow: hidden;
-      color: var(--figma-color-text-secondary);
+      color: inherit;
       text-overflow: ellipsis;
       white-space: nowrap;
       pointer-events: none;
@@ -565,10 +731,10 @@ propskit-fill {
 
     fig-swatch {
       position: relative;
-      flex: 0 0 33%;
-      width: 33%;
+      flex: 0 0 var(--_propskit-input-inline-size);
+      inline-size: var(--_propskit-input-inline-size);
       min-width: 0;
-      margin-left: auto;
+      margin-inline-start: auto;
       overflow: hidden;
       contain: paint;
       --width: 100%;
@@ -583,24 +749,63 @@ propskit-fill {
 
 propskit-gradient {
   --propskit-gradient-height: 2rem;
-  --propskit-gradient-vertical-padding: var(--spacer-1);
-  --propskit-gradient-horizontal-padding: var(--spacer-3);
+  --_propskit-padding-block: var(
+    --propskit-gradient-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-gradient-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-gradient-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-gradient-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-gradient-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-gradient-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-gradient-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-gradient-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-gradient-label-inline-size,
+    var(--propskit-label-inline-size, 40%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-gradient-input-inline-size,
+    var(--propskit-input-inline-size, 33%)
+  );
   --figma-focus-outline-offset: 1px;
 
   display: block;
+  box-sizing: border-box;
   width: 100%;
   height: calc(
-    var(--propskit-gradient-height) + var(--propskit-gradient-vertical-padding) * 2
+    var(--propskit-gradient-height) + var(--_propskit-padding-block) * 2
   );
-  padding: var(--propskit-gradient-vertical-padding)
-    var(--propskit-gradient-horizontal-padding);
-
-  &[size="small"] {
-    --propskit-gradient-height: 1.5rem;
-  }
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
 
   fig-input-gradient {
     --fig-input-gradient-height: var(--propskit-gradient-height);
+    --fig-input-gradient-swatch-border-radius: var(--radius-medium);
     height: var(--propskit-gradient-height);
 
     fig-swatch {
@@ -618,26 +823,33 @@ propskit-gradient {
     }
   }
 
-  fig-field:not([direction="vertical"]) {
+  .propskit-gradient-surface {
     position: relative;
     display: flex;
     align-items: center;
     gap: var(--spacer-2);
     height: 100%;
-    padding: 0 0 0 var(--spacer-2);
-    border-radius: var(--radius-medium);
-    background-color: var(--figma-color-bg-secondary);
+    padding-inline-start: var(--spacer-2-5);
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
 
     &::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
+      border: var(--_propskit-border);
       pointer-events: none;
     }
 
-    &:hover::after {
-      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    &:hover {
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
+
+      &::after {
+        border: var(--_propskit-hover-border);
+      }
     }
 
     & > label {
@@ -646,12 +858,12 @@ propskit-gradient {
       display: flex;
       align-items: center;
       flex: 0 1 auto;
-      max-width: 40%;
+      max-inline-size: var(--_propskit-label-inline-size);
       min-width: 0;
       margin: 0;
       padding: 0;
       overflow: hidden;
-      color: var(--figma-color-text-secondary);
+      color: inherit;
       text-overflow: ellipsis;
       white-space: nowrap;
       pointer-events: none;
@@ -663,10 +875,10 @@ propskit-gradient {
 
     fig-input-gradient {
       position: relative;
-      flex: 0 0 33%;
-      width: 33%;
+      flex: 0 0 var(--_propskit-input-inline-size);
+      inline-size: var(--_propskit-input-inline-size);
       min-width: 0;
-      margin-left: auto;
+      margin-inline-start: auto;
       border-radius: var(--radius-medium);
       background-color: transparent;
     }
@@ -677,15 +889,21 @@ propskit-gradient {
   outline: none;
 
   fig-swatch {
+    --border-radius: var(--radius-medium);
+    --fig-swatch-border-radius: var(--radius-medium);
+
+    border-radius: var(--radius-medium);
     background-color: transparent !important;
   }
 
-  fig-field:not([direction="vertical"]) {
+  :is(.propskit-color-surface, .propskit-fill-surface, .propskit-gradient-surface) {
     outline: none;
   }
 
-  &:focus-within fig-field:not([direction="vertical"]),
-  &.has-popup-open fig-field:not([direction="vertical"]) {
+  &:focus-within
+    :is(.propskit-color-surface, .propskit-fill-surface, .propskit-gradient-surface),
+  &.has-popup-open
+    :is(.propskit-color-surface, .propskit-fill-surface, .propskit-gradient-surface) {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
@@ -716,59 +934,61 @@ propskit-gradient {
   }
 }
 
-propskit-select {
-  --propskit-select-height: 2rem;
-  --propskit-select-vertical-padding: var(--spacer-1);
-  --propskit-select-horizontal-padding: var(--spacer-3);
+propskit-palette {
+  --propskit-palette-height: 2rem;
+  --_propskit-padding-block: var(
+    --propskit-palette-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-palette-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-palette-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-palette-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-palette-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-palette-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-palette-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-palette-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-palette-label-inline-size,
+    var(--propskit-label-inline-size, 40%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-palette-input-inline-size,
+    var(--propskit-input-inline-size, 60%)
+  );
   --figma-focus-outline-offset: 1px;
 
   display: block;
+  box-sizing: border-box;
   width: 100%;
   height: calc(
-    var(--propskit-select-height) + var(--propskit-select-vertical-padding) * 2
+    var(--propskit-palette-height) + var(--_propskit-padding-block) * 2
   );
-  padding: var(--propskit-select-vertical-padding)
-    var(--propskit-select-horizontal-padding);
-
-  fig-field:not([direction="vertical"]) {
-    :is(fig-select, fig-dropdown) {
-      padding-right: var(--spacer-1);
-
-      &::after {
-        right: calc(0.25rem + var(--spacer-1));
-      }
-    }
-
-    fig-select::part(trigger) {
-      padding-left: var(--spacer-2-5);
-    }
-
-    fig-dropdown > select {
-      padding-left: var(--spacer-2-5);
-    }
-  }
-
-  &[size="small"] {
-    --propskit-select-height: 1.5rem;
-
-    fig-field:not([direction="vertical"]) {
-      :is(fig-select, fig-dropdown) {
-        padding-right: 0;
-
-        &::after {
-          right: 0.25rem;
-        }
-      }
-
-      fig-select::part(trigger) {
-        padding-left: var(--spacer-2);
-      }
-
-      fig-dropdown > select {
-        padding-left: var(--spacer-2);
-      }
-    }
-  }
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
 
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
@@ -778,123 +998,384 @@ propskit-select {
     }
   }
 
-  fig-field:not([direction="vertical"]) {
+  .propskit-palette-surface {
     position: relative;
     display: flex;
     align-items: center;
+    gap: var(--spacer-2);
+    box-sizing: border-box;
     height: 100%;
-    /* Reset fig-field vertical padding so select fills the chrome. */
-    padding: 0;
-    border-radius: var(--radius-medium);
-    background-color: var(--figma-color-bg-secondary);
+    padding-inline-start: var(--spacer-2-5);
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
+    cursor: default;
 
     &::after {
       content: "";
       position: absolute;
       inset: 0;
+      border: var(--_propskit-border);
       border-radius: inherit;
       pointer-events: none;
     }
 
-    &:hover::after {
-      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    &:hover {
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
+
+      &::after {
+        border: var(--_propskit-hover-border);
+      }
+    }
+
+    &:focus-within {
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
     }
 
-    /* Label geometry comes from the shared propskit horizontal-label rules. */
     & > label {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      flex: 0 1 auto;
+      max-inline-size: var(--_propskit-label-inline-size);
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      color: inherit;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: none;
+
       fig-icon:first-child {
         margin-left: calc(var(--spacer-1) * -1);
       }
     }
 
-    :is(fig-select, fig-dropdown) {
-      position: relative;
+    & > fig-select {
+      --fig-select-trigger-width: 100%;
+
+      position: absolute;
+      inset: 0;
+      z-index: 1;
       display: flex;
-      flex: 1 1 auto;
-      align-self: stretch;
-      align-items: stretch;
       width: 100%;
       min-width: 0;
+      max-width: none;
       height: 100%;
-      border-radius: var(--radius-medium);
+      margin: 0;
+      border-radius: inherit;
       background: transparent;
       box-shadow: none;
-    }
-
-    fig-select {
-      --fig-select-trigger-width: 100%;
 
-      &::part(label) {
-        text-align: right;
+      &::part(trigger) {
+        gap: var(--spacer-1);
+        min-width: 0;
+        padding-left: calc(
+          var(--_propskit-label-inline-size) + var(--spacer-2)
+        );
+        background: transparent;
       }
-    }
 
-    /* fig-dropdown fallback: match fig-select trigger layout in the field.
-       Native select defaults to --spacer-4; stretch it to the field height. */
-    fig-dropdown > select {
-      flex: 1 1 auto;
-      align-self: stretch;
-      box-sizing: border-box;
-      width: 100%;
-      height: auto;
-      min-height: 100%;
-      padding: 0 var(--spacer-4) 0 var(--spacer-2);
-      text-align: right;
-      text-align-last: right;
-      color: inherit;
-      background: transparent;
-      box-shadow: none;
+      &::part(prepend) {
+        display: flex;
+        flex: 1 1 auto;
+        min-width: 0;
+        margin: 0;
+      }
     }
   }
-}
 
-propskit-text {
-  --propskit-text-height: 2rem;
-  --propskit-text-vertical-padding: var(--spacer-1);
-  --propskit-text-horizontal-padding: var(--spacer-3);
-  --figma-focus-outline-offset: 1px;
+  .propskit-palette-preview {
+    --fig-input-palette-height: calc(
+      var(--propskit-palette-height) - var(--spacer-2)
+    );
+    --fig-input-palette-padding: 0px;
 
-  display: block;
-  width: 100%;
-  height: calc(
-    var(--propskit-text-height) + var(--propskit-text-vertical-padding) * 2
-  );
-  padding: var(--propskit-text-vertical-padding)
-    var(--propskit-text-horizontal-padding);
+    width: 100%;
+    min-width: 0;
+    border-radius: var(--radius-medium);
+    opacity: 1;
+    pointer-events: none;
 
-  &[size="small"] {
-    --propskit-text-height: 1.5rem;
-  }
+    &[hidden] {
+      display: none !important;
+    }
 
-  &[disabled]:not([disabled="false"]) {
-    pointer-events: none;
+    & > .palette-colors-inline {
+      padding: 0;
+      border-radius: var(--radius-medium);
+      background: transparent;
 
-    label,
-    input {
-      color: var(--figma-color-text-disabled);
+      & > .palette-colors {
+        border-radius: var(--radius-medium);
+      }
     }
   }
 
-  fig-field:not([direction="vertical"]) {
-    position: relative;
+  .propskit-palette-options {
+    fig-select-option {
+      min-height: var(--propskit-palette-height);
+      cursor: default;
+
+      & > .propskit-palette-option-preview {
+        display: flex;
+        flex: 1 1 auto;
+        min-width: 0;
+        margin-block: 0;
+        margin-inline-end: 0;
+      }
+
+      .propskit-palette-preview {
+        --fig-input-palette-height: var(--spacer-4);
+        --fig-input-palette-padding: 0px;
+      }
+    }
+  }
+}
+
+propskit-select {
+  --propskit-select-height: 2rem;
+  --_propskit-padding-block: var(
+    --propskit-select-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-select-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-select-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-select-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-select-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-select-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-select-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-select-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-select-label-inline-size,
+    var(--propskit-label-inline-size, 75%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-select-input-inline-size,
+    var(--propskit-input-inline-size, 100%)
+  );
+  --figma-focus-outline-offset: 1px;
+
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(
+    var(--propskit-select-height) + var(--_propskit-padding-block) * 2
+  );
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
+
+  .propskit-select-surface {
+    fig-select {
+      padding-right: var(--spacer-1);
+
+      &::after {
+        right: calc(0.25rem + var(--spacer-1));
+      }
+    }
+
+    fig-select::part(trigger) {
+      padding-left: var(--spacer-2-5);
+    }
+
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+
+    label {
+      color: var(--figma-color-text-disabled);
+    }
+  }
+
+  .propskit-select-surface {
+    position: relative;
     display: flex;
     align-items: center;
-    gap: var(--spacer-2);
     height: 100%;
-    padding-left: var(--spacer-2);
-    border-radius: var(--radius-medium);
-    background-color: var(--figma-color-bg-secondary);
+    padding: 0;
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      border: var(--_propskit-border);
+      pointer-events: none;
+    }
+
+    &:hover {
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
+
+      &::after {
+        border: var(--_propskit-hover-border);
+      }
+    }
+
+    /* Label geometry comes from the shared propskit horizontal-label rules. */
+    & > label {
+      fig-icon:first-child {
+        margin-left: calc(var(--spacer-1) * -1);
+      }
+    }
+
+    fig-select {
+      position: relative;
+      display: flex;
+      flex: 1 1 auto;
+      align-self: stretch;
+      align-items: stretch;
+      inline-size: var(--_propskit-input-inline-size);
+      min-width: 0;
+      height: 100%;
+      border-radius: inherit;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    fig-select {
+      --fig-select-trigger-width: 100%;
+
+      &::part(label) {
+        text-align: right;
+      }
+    }
+
+  }
+}
+
+propskit-text {
+  --propskit-text-height: 2rem;
+  --_propskit-padding-block: var(
+    --propskit-text-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-text-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-text-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-text-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-text-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-text-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-text-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-text-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-text-label-inline-size,
+    var(--propskit-label-inline-size, 50%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-text-input-inline-size,
+    var(--propskit-input-inline-size, fit-content)
+  );
+  --figma-focus-outline-offset: 1px;
+
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: calc(
+    var(--propskit-text-height) + var(--_propskit-padding-block) * 2
+  );
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+
+    label,
+    :is(input, textarea) {
+      color: var(--figma-color-text-disabled);
+    }
+  }
+
+  .propskit-text-surface {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    box-sizing: border-box;
+    min-height: var(--propskit-text-height);
+    padding-block: var(--spacer-1);
+    padding-inline: var(--spacer-2-5) var(--spacer-1);
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
+    outline: none;
+
+    &:focus-within {
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
+    }
 
     &::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
+      border: var(--_propskit-border);
       pointer-events: none;
     }
 
-    &:hover::after {
-      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    &:hover {
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
+
+      &::after {
+        border: var(--_propskit-hover-border);
+      }
     }
 
     & > label {
@@ -902,14 +1383,14 @@ propskit-text {
       z-index: 1;
       display: flex;
       align-items: center;
+      align-self: flex-start;
       flex: 0 0 auto;
-      width: auto;
-      max-width: 50%;
       min-width: 0;
-      margin: 0;
+      margin: var(--spacer-1) 0 0;
       padding: 0;
+      max-inline-size: var(--_propskit-label-inline-size);
       overflow: hidden;
-      color: var(--figma-color-text-secondary);
+      color: inherit;
       text-overflow: ellipsis;
       white-space: nowrap;
       pointer-events: none;
@@ -925,33 +1406,39 @@ propskit-text {
       position: relative;
       align-self: center;
       flex: 0 1 auto !important;
-      width: fit-content !important;
+      width: var(--_propskit-input-inline-size) !important;
       max-width: none;
       min-width: 0;
-      margin-left: auto;
-      height: var(--propskit-text-height);
+      margin-inline-start: auto;
+      min-height: var(--control-height);
       border-radius: var(--radius-medium);
       background-color: transparent;
       box-shadow: none;
+      outline: none !important;
 
-      &:has(input:focus) {
-        outline: var(--figma-focus-outline) !important;
-        outline-offset: var(--figma-focus-outline-offset) !important;
+      &:has(:is(input, textarea):focus) {
+        outline: none !important;
       }
 
-      input {
-        field-sizing: content;
+      :is(input, textarea) {
         width: auto;
         max-width: 100%;
         min-width: 0;
         flex: 0 0 auto;
         text-align: right;
+      }
 
-        &:not(:focus) {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
+      input:not(:focus) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      textarea {
+        min-height: 1lh;
+        max-height: calc(4lh + var(--spacer-2));
+        overflow-y: auto;
+        white-space: pre-wrap;
       }
     }
   }
@@ -959,21 +1446,59 @@ propskit-text {
 
 propskit-number {
   --propskit-number-height: 2rem;
-  --propskit-number-vertical-padding: var(--spacer-1);
-  --propskit-number-horizontal-padding: var(--spacer-3);
+  --_propskit-padding-block: var(
+    --propskit-number-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-number-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-number-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-number-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-number-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-number-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-number-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-number-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-number-label-inline-size,
+    var(--propskit-label-inline-size, 75%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-number-input-inline-size,
+    var(--propskit-input-inline-size, fit-content)
+  );
   --figma-focus-outline-offset: 1px;
 
   display: block;
+  box-sizing: border-box;
   width: 100%;
   height: calc(
-    var(--propskit-number-height) + var(--propskit-number-vertical-padding) * 2
+    var(--propskit-number-height) + var(--_propskit-padding-block) * 2
   );
-  padding: var(--propskit-number-vertical-padding)
-    var(--propskit-number-horizontal-padding);
-
-  &[size="small"] {
-    --propskit-number-height: 1.5rem;
-  }
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
 
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
@@ -988,12 +1513,17 @@ propskit-number {
     padding-right: 0;
   }
 
-  fig-field:not([direction="vertical"]) {
+  .propskit-number-surface {
     position: relative;
     display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    box-sizing: border-box;
     height: 100%;
-    border-radius: var(--radius-medium);
-    background-color: var(--figma-color-bg-secondary);
+    padding-inline: var(--spacer-2-5) var(--spacer-1);
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
     outline: none;
 
     &:focus-within {
@@ -1006,16 +1536,33 @@ propskit-number {
       position: absolute;
       inset: 0;
       border-radius: inherit;
+      border: var(--_propskit-border);
       pointer-events: none;
     }
 
-    &:hover::after {
-      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    &:hover {
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
+
+      &::after {
+        border: var(--_propskit-hover-border);
+      }
     }
 
-    /* Label geometry comes from the shared propskit horizontal-label rules. */
     & > label {
-      color: var(--figma-color-text-secondary);
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      flex: 0 0 auto;
+      min-width: 0;
+      padding: 0;
+      max-inline-size: var(--_propskit-label-inline-size);
+      overflow: hidden;
+      color: inherit;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: none;
 
       fig-icon:first-child {
         margin-left: calc(var(--spacer-1) * -1);
@@ -1023,12 +1570,15 @@ propskit-number {
     }
 
     fig-input-number {
+      --figma-focus-outline-offset: 1px;
+
       position: relative;
       align-self: center;
-      flex: 0 0 auto;
-      width: fit-content;
+      flex: 0 1 auto !important;
+      width: var(--_propskit-input-inline-size) !important;
+      max-width: none;
       min-width: 0;
-      margin-left: auto;
+      margin-inline-start: auto;
       height: var(--control-height);
       border-radius: var(--radius-medium);
       background-color: transparent;
@@ -1042,6 +1592,7 @@ propskit-number {
       input {
         field-sizing: content;
         width: auto;
+        max-width: 100%;
         min-width: 0;
         flex: 0 0 auto;
         text-align: right;
@@ -1058,8 +1609,49 @@ propskit-slider {
   --propskit-slider-elastic-origin: left center;
   --propskit-slider-elastic-transition: 0.18s cubic-bezier(0.2, 1.45, 0.35, 1);
   --propskit-slider-height: 2rem;
-  --propskit-slider-vertical-padding: var(--spacer-1);
-  --propskit-slider-horizontal-padding: var(--spacer-3);
+  --_propskit-padding-block: var(
+    --propskit-slider-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-slider-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-slider-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-slider-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-slider-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-slider-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-slider-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-slider-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-slider-label-inline-size,
+    var(--propskit-label-inline-size, 75%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-slider-input-inline-size,
+    var(--propskit-input-inline-size, 100%)
+  );
   --figma-focus-outline-offset: 1px;
   --propskit-slider-progress-shadow: inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
   --field-text-shadow: 0 1px 1.5px
@@ -1078,31 +1670,22 @@ propskit-slider {
 
   display: block;
   position: relative;
+  box-sizing: border-box;
   width: 100%;
   height: calc(
-    var(--propskit-slider-height) + var(--propskit-slider-vertical-padding) * 2
+    var(--propskit-slider-height) + var(--_propskit-padding-block) * 2
   );
-  border-radius: var(--radius-medium);
+  border-radius: var(--radius-medium-large);
   transform-origin: var(--propskit-slider-elastic-origin);
   transition: transform var(--propskit-slider-elastic-transition);
-  padding-top: var(--propskit-slider-vertical-padding);
-  padding-bottom: var(--propskit-slider-vertical-padding);
-  padding-left: var(--propskit-slider-horizontal-padding);
-  padding-right: var(--propskit-slider-horizontal-padding);
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
 
   &:hover,
   &:focus-within {
     --propskit-slider-handle-reveal: 1;
   }
 
-  &[size="small"] {
-    --propskit-slider-height: 1.5rem;
-    --propskit-slider-fig-slider-thumb-height: calc(
-      var(--propskit-slider-fig-slider-height) - var(--spacer-2-5)
-    );
-    --propskit-slider-number-right: 2px;
-  }
-  
   label {
     pointer-events: none;
     z-index: 1;
@@ -1133,19 +1716,27 @@ propskit-slider {
   }
  
 
-  fig-field:not([direction="vertical"]) {
+  .propskit-slider-surface {
     position: relative;
-    padding-left: var(--spacer-2);
+    padding-inline-start: var(--spacer-2-5);
     display: flex;
     height: 100%;
+    border-radius: var(--figma-focus-outline-radius);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
+    outline: none;
+
+    &:focus-within {
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
+    }
 
     & > label {
       min-width: 0;
-      max-width: none;
-      width: 100%;
+      max-width: var(--_propskit-label-inline-size);
+      width: var(--_propskit-label-inline-size);
       flex: 1 1 auto;
-      color: var(--figma-color-text-secondary);
-      padding: 0;
+      color: inherit;
       display: flex;
       align-items: center;
       gap: var(--spacer-1);
@@ -1158,14 +1749,18 @@ propskit-slider {
 
     fig-slider {
       position: absolute;
-      inset: 0;
+      inset-block: 0;
+      inset-inline-end: 0;
+      inline-size: var(--_propskit-input-inline-size);
       padding: 0;
       background-color: transparent;
+      border-radius: inherit;
+      outline: none;
       --slider-height: var(--propskit-slider-fig-slider-height);
 
-      &:focus-within {
-        outline: var(--figma-focus-outline);
-        outline-offset: var(--figma-focus-outline-offset);
+      &:focus-within,
+      &:has(input[type="range"]:focus-visible) {
+        outline: none;
       }
       --slider-field-height: var(--propskit-slider-height);
       --slider-thumb-width: var(--spacer-1);
@@ -1175,7 +1770,7 @@ propskit-slider {
           min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
       );*/
       --slider-thumb-height: var(--propskit-slider-fig-slider-thumb-height);
-      --slider-border-radius: var(--radius-medium);
+      --slider-border-radius: var(--radius-medium-large);
       --slider-tick-width: 0.125rem;
       --slider-tick-height: var(--spacer-2);
       --slider-tick-radius: var(--radius-medium);
@@ -1225,17 +1820,26 @@ propskit-slider {
 
       .fig-slider-input-container {
         box-shadow: none !important;
-        background-color: var(--figma-color-bg-secondary) !important;
+        background-color: var(--_propskit-background) !important;
         overflow: hidden;
+
+        &::after {
+          border: var(--_propskit-border);
+        }
+
         &:hover,
         &:focus-within {
+          background-color: var(--_propskit-hover-background) !important;
+          color: var(--_propskit-hover-color);
+
           &::after {
             content: "";
             position: absolute;
             inset: 0;
             pointer-events: none;
             border-radius: var(--slider-border-radius);
-            box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent) !important;
+            border: var(--_propskit-hover-border);
+            box-shadow: none !important;
           }
         }
         &::before {
@@ -1440,7 +2044,7 @@ propskit-slider {
       container-type: inline-size;
     }
 
-    fig-field:not([direction="vertical"]) > label {
+    .propskit-slider-surface > label {
       --propskit-slider-label-fill-edge: clamp(
         0%,
         calc(var(--propskit-slider-complete, 0) * 133.333333%),
@@ -1620,8 +2224,49 @@ propskit-wheel {
   --propskit-wheel-elastic-transition: 0.28s
     cubic-bezier(0.34, 1.56, 0.64, 1);
   --propskit-wheel-height: 2rem;
-  --propskit-wheel-vertical-padding: var(--spacer-1);
-  --propskit-wheel-horizontal-padding: var(--spacer-3);
+  --_propskit-padding-block: var(
+    --propskit-wheel-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-wheel-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-wheel-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-wheel-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-wheel-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-wheel-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-wheel-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-wheel-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-wheel-label-inline-size,
+    var(--propskit-label-inline-size, 75%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-wheel-input-inline-size,
+    var(--propskit-input-inline-size, fit-content)
+  );
   --propskit-wheel-number-right: calc(2px + var(--spacer-1));
   --propskit-wheel-track-inset: 3rem;
   --propskit-wheel-track-inset-left: var(--propskit-wheel-track-inset);
@@ -1633,12 +2278,12 @@ propskit-wheel {
   box-sizing: border-box;
   width: 100%;
   height: calc(
-    var(--propskit-wheel-height) + var(--propskit-wheel-vertical-padding) * 2
+    var(--propskit-wheel-height) + var(--_propskit-padding-block) * 2
   );
   transform-origin: var(--propskit-wheel-elastic-origin);
   transition: transform var(--propskit-wheel-elastic-transition);
-  padding: var(--propskit-wheel-vertical-padding)
-    var(--propskit-wheel-horizontal-padding);
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
 
   &[data-label-empty] {
     --propskit-wheel-track-inset-left: var(--spacer-2);
@@ -1648,21 +2293,6 @@ propskit-wheel {
     --propskit-wheel-track-inset-right: var(--spacer-2);
   }
 
-  &[size="small"] {
-    --propskit-wheel-height: 1.5rem;
-    --propskit-wheel-number-right: 2px;
-
-    .propskit-wheel-surface > label {
-      padding-left: var(--spacer-2);
-    }
-
-    .propskit-wheel-surface > fig-input-wheel {
-      --fig-input-wheel-handle-height: calc(
-        var(--propskit-wheel-height) - var(--spacer-2-5)
-      );
-    }
-  }
-
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
 
@@ -1678,8 +2308,9 @@ propskit-wheel {
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    border-radius: var(--radius-medium);
-    background-color: var(--figma-color-bg-secondary);
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
     overflow: hidden;
     cursor: ew-resize;
     touch-action: none;
@@ -1695,24 +2326,30 @@ propskit-wheel {
       position: absolute;
       inset: 0;
       border-radius: inherit;
+      border: var(--_propskit-border);
       pointer-events: none;
     }
 
-    &:hover::after {
-      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-    }
+    &:hover {
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
 
-    > label {
+      &::after {
+        border: var(--_propskit-hover-border);
+      }
+    }
+
+    > label {
       position: absolute;
       inset: 0;
       z-index: 1;
       display: block;
       box-sizing: border-box;
-      width: 75%;
-      max-width: 75%;
-      padding: 0 0 0 var(--spacer-2-5);
+      width: var(--_propskit-label-inline-size);
+      max-width: var(--_propskit-label-inline-size);
+      padding-inline-start: var(--spacer-2-5);
       overflow: hidden;
-      color: var(--figma-color-text-secondary);
+      color: inherit;
       text-overflow: ellipsis;
       white-space: nowrap;
       align-content: center;
@@ -1742,12 +2379,12 @@ propskit-wheel {
     box-shadow: none !important;
     font-variant-numeric: var(--font-variant-numeric);
     position: absolute;
-    right: var(--propskit-wheel-number-right);
+    inset-inline-end: var(--propskit-wheel-number-right);
     top: 50%;
     bottom: auto;
     z-index: 2;
     height: var(--control-height);
-    width: fit-content;
+    width: var(--_propskit-input-inline-size);
     min-width: fit-content;
     max-width: max-content;
     flex: 0 0 auto;
@@ -1802,88 +2439,28 @@ body.propskit-slider-dragging * {
 }
 
 :is(
-  propskit-switch,
-  propskit-color,
-  propskit-fill,
-  propskit-gradient,
-  propskit-select,
-  propskit-text,
-  propskit-number,
-  propskit-slider
-) fig-field:not([direction="vertical"]) > label {
+  .propskit-switch-surface,
+  .propskit-color-surface,
+  .propskit-fill-surface,
+  .propskit-gradient-surface,
+  .propskit-select-surface,
+  .propskit-slider-surface
+) > label {
   position: absolute;
   inset: 0;
   z-index: 1;
   display: block;
   align-content: center;
   box-sizing: border-box;
-  width: 75%;
-  max-width: 75%;
-  padding: 0 0 0 var(--spacer-2);
+  width: var(--_propskit-label-inline-size);
+  max-width: var(--_propskit-label-inline-size);
+  padding-inline-start: var(--spacer-2-5);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   pointer-events: none;
 }
 
-:is(
-  propskit-switch,
-  propskit-color,
-  propskit-fill,
-  propskit-gradient,
-  propskit-select,
-  propskit-text,
-  propskit-number,
-  propskit-slider
-) {
-  fig-field {
-    --fig-field-label-max-height: var(--spacer-5);
-  }
-
-  fig-field:not([direction="vertical"]) > label {
-    padding-left: var(--spacer-2-5);
-  }
-}
-
-:is(
-  propskit-switch,
-  propskit-color,
-  propskit-fill,
-  propskit-gradient,
-  propskit-select,
-  propskit-text,
-  propskit-number,
-  propskit-slider
-)[size="small"] {
-  fig-field {
-    --fig-field-label-max-height: var(--spacer-4);
-  }
-
-  fig-field:not([direction="vertical"]) > label {
-    padding-left: var(--spacer-2);
-  }
-}
-
-:is(
-  propskit-switch,
-  propskit-color,
-  propskit-fill,
-  propskit-gradient,
-  propskit-text,
-  propskit-number,
-  propskit-slider
-)[size="small"] {
-  fig-field:not([direction="vertical"]) {
-    padding-left: var(--spacer-2);
-  }
-}
-
-:is(propskit-text, propskit-number)[size="small"] {
-  fig-field > :is(fig-input-text, fig-input-number) {
-    margin-right: 0;
-  }
-}
-
 propskit-color-point,
 propskit-point-point,
 propskit-point-radius,
@@ -1893,8 +2470,49 @@ propskit-point-radius-angle {
 
 propskit-position {
   --propskit-position-height: 2rem;
-  --propskit-position-vertical-padding: var(--spacer-1);
-  --propskit-position-horizontal-padding: var(--spacer-3);
+  --_propskit-padding-block: var(
+    --propskit-position-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-position-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-position-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-position-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-position-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-position-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-position-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-position-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-position-label-inline-size,
+    var(--propskit-label-inline-size, auto)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-position-input-inline-size,
+    var(--propskit-input-inline-size, 3.85rem)
+  );
   --figma-focus-outline-offset: 1px;
 
   display: flex;
@@ -1902,28 +2520,18 @@ propskit-position {
   gap: var(--spacer-1);
   box-sizing: border-box;
   width: 100%;
-  padding: var(--propskit-position-vertical-padding)
-    var(--propskit-position-horizontal-padding);
-
-  &[size="small"] {
-    --propskit-position-height: 1.5rem;
-
-    .propskit-position-row {
-      --fig-field-label-max-height: var(--spacer-4);
-      padding-left: var(--spacer-2);
-    }
-  }
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
 
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
 
-    .propskit-position-row > label {
+    .propskit-position-surface > label {
       color: var(--figma-color-text-disabled);
     }
   }
 
-  .propskit-position-row {
-    --fig-field-label-max-height: var(--spacer-5);
+  .propskit-position-surface {
     position: relative;
     display: flex;
     align-items: center;
@@ -1932,21 +2540,27 @@ propskit-position {
     min-width: 0;
     height: var(--propskit-position-height);
     min-height: var(--propskit-position-height);
-    padding: 0 var(--spacer-1) 0 var(--spacer-2-5);
-    padding-right: 0;
-    border-radius: var(--radius-medium);
-    background-color: var(--figma-color-bg-secondary);
+    padding-inline-start: var(--spacer-2-5);
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
 
     &::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
+      border: var(--_propskit-border);
       pointer-events: none;
     }
 
-    &:hover::after {
-      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    &:hover {
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
+
+      &::after {
+        border: var(--_propskit-hover-border);
+      }
     }
 
     & > label {
@@ -1955,11 +2569,12 @@ propskit-position {
       display: flex;
       align-items: center;
       flex: 1 1 auto;
+      inline-size: var(--_propskit-label-inline-size);
       min-width: 0;
       margin: 0 auto 0 0;
       padding: 0;
       overflow: hidden;
-      color: var(--figma-color-text-secondary);
+      color: inherit;
       text-overflow: ellipsis;
       white-space: nowrap;
       pointer-events: none;
@@ -1974,7 +2589,7 @@ propskit-position {
   }
 
   fig-input-number {
-    width: 3.85rem;
+    width: var(--_propskit-input-inline-size);
     height: var(--control-height);
     border: 0;
     background-color: transparent;
@@ -1995,79 +2610,511 @@ propskit-position {
   }
 }
 
-:is(
-  propskit-number,
-  propskit-position
-) fig-input-number:is(:focus-within, :active, :has(input:active)) {
-  background-color: var(--figma-color-bg);
-}
+propskit-joystick {
+  --_propskit-padding-block: var(
+    --propskit-joystick-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-joystick-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-joystick-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-joystick-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-joystick-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-joystick-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-joystick-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-joystick-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-joystick-label-inline-size,
+    var(--propskit-label-inline-size, 100%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-joystick-input-inline-size,
+    var(--propskit-input-inline-size, 100%)
+  );
 
-:is(
-  propskit-slider,
-  propskit-wheel
-) fig-input-number:has(input:focus) {
-  background-color: var(--figma-color-bg);
-}
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
 
-:is(
-  propskit-switch,
-  propskit-color,
-  propskit-fill,
-  propskit-gradient,
-  propskit-select,
-  propskit-text,
-  propskit-number,
-  propskit-slider,
-  propskit-position,
-  propskit-wheel
-)[variant="minimal"] {
-  --propskit-switch-vertical-padding: 0px;
-  --propskit-color-vertical-padding: 0px;
-  --propskit-gradient-vertical-padding: 0px;
-  --propskit-select-vertical-padding: 0px;
-  --propskit-text-vertical-padding: 0px;
-  --propskit-number-vertical-padding: 0px;
-  --propskit-slider-vertical-padding: 0px;
-  --propskit-position-vertical-padding: 0px;
-  --propskit-wheel-vertical-padding: 0px;
-
-  & > fig-field {
-    background-color: transparent;
+  .propskit-joystick-surface {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacer-2);
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    padding: var(--spacer-2);
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border: var(--_propskit-border);
+      border-radius: inherit;
+      pointer-events: none;
+    }
 
     &:hover {
-      background-color: var(--figma-color-bg-secondary);
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
 
       &::after {
-        box-shadow: none;
+        border: var(--_propskit-hover-border);
       }
     }
+
+    & > label {
+      display: block;
+      width: var(--_propskit-label-inline-size);
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      padding-inline-start: calc(var(--spacer-2-5) - var(--spacer-2));
+      overflow: hidden;
+      color: inherit;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: none;
+    }
+  }
+
+  fig-joystick {
+    --size: 100%;
+    align-self: flex-end;
+    width: var(--_propskit-input-inline-size);
+    min-width: 0;
+
+    .fig-input-joystick-guides {
+      background-color: var(
+        --propskit-bg-subfield,
+        rgba(255, 255, 255, 0.05)
+      );
+      --figma-color-border: var(
+        --propskit-color-border-subfield,
+        var(--figma-color-bordertranslucent)
+      );
+    }
+
+    .joystick-values > fig-input-number {
+      border: 0;
+      background-color: var(
+        --propskit-bg-subfield,
+        rgba(255, 255, 255, 0.05)
+      );
+      box-shadow: none;
+    }
+
+    .fig-joystick-reset {
+      display: none;
+    }
+  }
+
+  &[variant="minimal"] .propskit-joystick-surface {
+    background: transparent;
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    .propskit-joystick-surface {
+      color: var(--figma-color-text-disabled);
+    }
+
+    fig-joystick {
+      filter: grayscale(100%);
+      opacity: 0.5;
+    }
   }
 }
 
-propskit-wheel[variant="minimal"] {
-  .propskit-wheel-surface {
-    background-color: transparent;
+propskit-origin {
+  --_propskit-padding-block: var(
+    --propskit-origin-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-origin-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-origin-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-origin-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-origin-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-origin-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-origin-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-origin-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-origin-label-inline-size,
+    var(--propskit-label-inline-size, 100%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-origin-input-inline-size,
+    var(--propskit-input-inline-size, 100%)
+  );
+}
+
+propskit-easing {
+  --_propskit-padding-block: var(
+    --propskit-easing-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-easing-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-easing-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-easing-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-easing-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-easing-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-easing-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-easing-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-easing-label-inline-size,
+    var(--propskit-label-inline-size, 100%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-easing-input-inline-size,
+    var(--propskit-input-inline-size, 100%)
+  );
+}
+
+propskit-spring {
+  --_propskit-padding-block: var(
+    --propskit-spring-padding-block,
+    var(--propskit-padding-block, var(--spacer-1))
+  );
+  --_propskit-padding-inline: var(
+    --propskit-spring-padding-inline,
+    var(--propskit-padding-inline, var(--spacer-3))
+  );
+  --_propskit-background: var(
+    --propskit-spring-background,
+    var(--propskit-background, var(--figma-color-bg-secondary))
+  );
+  --_propskit-border: var(
+    --propskit-spring-border,
+    var(--propskit-border, 0 solid transparent)
+  );
+  --_propskit-color: var(
+    --propskit-spring-color,
+    var(--propskit-color, var(--figma-color-text-secondary))
+  );
+  --_propskit-hover-background: var(
+    --propskit-spring-hover-background,
+    var(--propskit-hover-background, var(--_propskit-background))
+  );
+  --_propskit-hover-border: var(
+    --propskit-spring-hover-border,
+    var(
+      --propskit-hover-border,
+      1px solid var(--figma-color-bordertranslucent)
+    )
+  );
+  --_propskit-hover-color: var(
+    --propskit-spring-hover-color,
+    var(--propskit-hover-color, var(--_propskit-color))
+  );
+  --_propskit-label-inline-size: var(
+    --propskit-spring-label-inline-size,
+    var(--propskit-label-inline-size, 100%)
+  );
+  --_propskit-input-inline-size: var(
+    --propskit-spring-input-inline-size,
+    var(--propskit-input-inline-size, 100%)
+  );
+}
+
+:is(propskit-origin, propskit-easing, propskit-spring) {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding-block: var(--_propskit-padding-block);
+  padding-inline: var(--_propskit-padding-inline);
+
+  & > :is(
+    .propskit-origin-surface,
+    .propskit-easing-surface,
+    .propskit-spring-surface
+  ) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacer-2);
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    padding: var(--spacer-2);
+    border-radius: var(--radius-medium-large);
+    background: var(--_propskit-background);
+    color: var(--_propskit-color);
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border: var(--_propskit-border);
+      border-radius: inherit;
+      pointer-events: none;
+    }
 
     &:hover {
-      background-color: var(--figma-color-bg-secondary);
+      background: var(--_propskit-hover-background);
+      color: var(--_propskit-hover-color);
 
       &::after {
-        box-shadow: none;
+        border: var(--_propskit-hover-border);
       }
     }
+
+    & > label {
+      display: block;
+      width: var(--_propskit-label-inline-size);
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      padding-inline-start: calc(var(--spacer-2-5) - var(--spacer-2));
+      overflow: hidden;
+      color: inherit;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: none;
+    }
+  }
+
+  &[variant="minimal"] > :is(
+    .propskit-origin-surface,
+    .propskit-easing-surface,
+    .propskit-spring-surface
+  ) {
+    background: transparent;
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    & > :is(
+      .propskit-origin-surface,
+      .propskit-easing-surface,
+      .propskit-spring-surface
+    ) {
+      color: var(--figma-color-text-disabled);
+    }
+
+    :is(fig-origin-grid, fig-easing-curve) {
+      filter: grayscale(100%);
+      opacity: 0.5;
+    }
   }
 }
 
-propskit-slider[variant="minimal"] {
-  & > fig-field fig-slider .fig-slider-input-container {
-    background-color: transparent !important;
+propskit-origin {
+  fig-origin-grid {
+    --figma-color-border: var(
+      --propskit-color-border-subfield,
+      var(--figma-color-bordertranslucent)
+    );
 
-    &:hover::after {
-      box-shadow: none !important;
+    align-self: flex-end;
+    width: var(--_propskit-input-inline-size);
+    min-width: 0;
+
+    .origin-grid,
+    .origin-values > fig-input-number {
+      background-color: var(
+        --propskit-bg-subfield,
+        rgba(255, 255, 255, 0.05)
+      );
+    }
+  }
+}
+
+:is(propskit-easing, propskit-spring) {
+  fig-easing-curve {
+    --figma-color-border: var(
+      --propskit-color-border-subfield,
+      var(--figma-color-bordertranslucent)
+    );
+
+    align-self: flex-end;
+    width: var(--_propskit-input-inline-size);
+    min-width: 0;
+
+    .fig-easing-curve-svg-container,
+    .fig-easing-curve-value-input {
+      background-color: var(
+        --propskit-bg-subfield,
+        rgba(255, 255, 255, 0.05)
+      );
     }
+
+    .fig-easing-curve-boundary,
+    .fig-easing-curve-target {
+      stroke: var(
+        --propskit-color-border-subfield,
+        var(--figma-color-bordertranslucent)
+      );
+    }
+  }
+}
+
+:is(propskit-easing, propskit-spring)
+  fig-easing-curve
+  .fig-easing-curve-select {
+  background-color: var(
+    --propskit-bg-subfield,
+    rgba(255, 255, 255, 0.05)
+  );
+
+  &:hover:not([disabled]):not([disabled="false"]) {
+    background-color: var(
+      --propskit-bg-subfield,
+      rgba(255, 255, 255, 0.05)
+    );
   }
 }
 
+:is(
+  propskit-number,
+  propskit-position,
+  propskit-joystick,
+  propskit-origin
+) fig-input-number:is(:focus-within, :active, :has(input:active)) {
+  background-color: var(--figma-color-bg);
+}
+
+propskit-text
+  fig-input-text:is(
+    :focus-within,
+    :active,
+    :has(:is(input, textarea):active)
+  ) {
+  background-color: var(--figma-color-bg);
+}
+
+:is(
+  propskit-slider,
+  propskit-wheel
+) fig-input-number:has(input:focus) {
+  background-color: var(--figma-color-bg);
+}
+
+:is(
+  propskit-palette,
+  propskit-select,
+  propskit-text,
+  propskit-number,
+  propskit-slider,
+  propskit-wheel
+)
+  :is(
+    .propskit-palette-surface,
+    .propskit-select-surface,
+    .propskit-text-surface,
+    .propskit-number-surface,
+    .propskit-slider-surface,
+    .propskit-wheel-surface
+  ):focus-within,
+:is(propskit-color, propskit-fill, propskit-gradient):is(
+    :focus-within,
+    .has-popup-open
+  )
+  :is(
+    .propskit-color-surface,
+    .propskit-fill-surface,
+    .propskit-gradient-surface
+  ) {
+  outline: var(--figma-focus-outline);
+  outline-offset: var(--figma-focus-outline-offset);
+  outline-color: transparent;
+  overflow: visible;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: calc(-1px - var(--figma-focus-outline-offset));
+    box-sizing: border-box;
+    border: var(--figma-focus-outline);
+    border-radius: calc(
+      var(--figma-focus-outline-radius) + var(--figma-focus-outline-offset) +
+        1px
+    );
+    pointer-events: none;
+    z-index: 4;
+  }
+}
+
+:is(.propskit-palette-surface, .propskit-select-surface) fig-select::part(trigger) {
+  outline: none;
+}
+
 /* Canvas Control */
 body {
   --fig-lab-cursor: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_20065_231516)"><g filter="url(%23filter0_d_20065_231516)"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z" fill="white"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z" fill="black"/></g><defs><filter id="filter0_d_20065_231516" x="-0.5" y="0.5" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1.5"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_20065_231516"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_20065_231516" result="shape"/></filter><clipPath id="clip0_20065_231516"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>') 3 3, default;
@@ -2297,7 +3344,7 @@ propskit-oscillator {
   --propskit-oscillator-playhead-radius: 5px;
 
   .propskit-oscillator-svg-container {
-    border-radius: var(--radius-medium);
+    border-radius: var(--radius-medium-large);
     padding: var(--spacer-3) var(--spacer-5);
     margin-bottom: var(--spacer-2);
     overflow: hidden;
@@ -2308,7 +3355,7 @@ propskit-oscillator {
       inset: 0 var(--spacer-3);
       content: "";
       background: var(--figma-color-bg-secondary);
-      border-radius: var(--radius-medium);
+      border-radius: var(--radius-medium-large);
     }
 
     &:is(:hover, :active, :focus, :focus-visible, :focus-within) {