@rogieking/figui3 8.9.32 → 8.9.34

package/fig-lab.css

@@ -1473,40 +1473,131 @@ propskit-slider {
   }
 }
 
+fig-input-wheel {
+  --fig-input-wheel-elastic-distance: calc(var(--spacer-2) + 0.25rem);
+  --fig-input-wheel-elastic-scale: 1;
+  --fig-input-wheel-elastic-origin: left center;
+  --fig-input-wheel-elastic-transition: 0.28s
+    cubic-bezier(0.34, 1.56, 0.64, 1);
+  --fig-input-wheel-handle-drag-max: 0.5rem;
+  --fig-input-wheel-handle-drag-offset: 0px;
+  --fig-input-wheel-handle-spring: 0.28s
+    cubic-bezier(0.34, 1.56, 0.64, 1);
+  --fig-input-wheel-keyboard-handle-spring: 0.14s
+    cubic-bezier(0.34, 1.56, 0.64, 1);
+  --fig-input-wheel-tick-width: 0.125rem;
+  --fig-input-wheel-tick-width-min: 1px;
+  --fig-input-wheel-tick-height: calc(
+    var(--fig-input-wheel-handle-height) - 4px
+  );
+  --fig-input-wheel-tick-height-min: 8px;
+  --fig-input-wheel-tick-fade: 1rem;
+  --fig-input-wheel-tick-opacity: 0.5;
+  --fig-input-wheel-tick-opacity-min: 0.1;
+  --fig-input-wheel-handle-width: var(--spacer-1);
+  --fig-input-wheel-handle-height: calc(
+    var(--control-height) - var(--spacer-2)
+  );
+  --fig-input-wheel-handle-color: light-dark(
+    var(--figma-color-text-secondary),
+    var(--figma-color-text)
+  );
+
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--control-height);
+  border-radius: var(--radius-medium);
+  background-color: var(--figma-color-bg-secondary);
+  outline: none;
+  cursor: ew-resize;
+  transform-origin: var(--fig-input-wheel-elastic-origin);
+  transition: transform var(--fig-input-wheel-elastic-transition);
+
+  &:focus-visible {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .fig-input-wheel-svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    color: var(--figma-color-icon-tertiary);
+    mask-image: linear-gradient(
+      to right,
+      rgb(0 0 0 / var(--fig-input-wheel-tick-opacity-min)) 0,
+      rgb(0 0 0 / var(--fig-input-wheel-tick-opacity))
+        var(--fig-input-wheel-tick-fade),
+      rgb(0 0 0 / var(--fig-input-wheel-tick-opacity))
+        calc(100% - var(--fig-input-wheel-tick-fade)),
+      rgb(0 0 0 / var(--fig-input-wheel-tick-opacity-min)) 100%
+    );
+  }
+
+  .fig-input-wheel-tick {
+    fill: currentColor;
+    stroke: none;
+  }
+
+  .fig-input-wheel-handle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 1;
+    width: var(--fig-input-wheel-handle-width);
+    height: var(--fig-input-wheel-handle-height);
+    border-radius: calc(var(--fig-input-wheel-handle-width) / 2);
+    background: transparent;
+    pointer-events: none;
+    transform: translate(
+      calc(-50% + var(--fig-input-wheel-handle-drag-offset)),
+      -50%
+    );
+    transition: transform var(--fig-input-wheel-handle-spring);
+    box-shadow:
+      inset 0 0 0 var(--fig-input-wheel-handle-height)
+        var(--fig-input-wheel-handle-color),
+      var(--handle-shadow);
+  }
+
+  &[data-fig-input-wheel-elastic-dragging] {
+    transform: scaleX(var(--fig-input-wheel-elastic-scale));
+    transition: none;
+
+    .fig-input-wheel-handle {
+      transition: none;
+    }
+  }
+
+  &[data-fig-input-wheel-keyboard-moving] .fig-input-wheel-handle {
+    transition: none;
+  }
+
+  &[data-fig-input-wheel-keyboard-settling] .fig-input-wheel-handle {
+    transition: transform var(--fig-input-wheel-keyboard-handle-spring);
+  }
+}
+
 propskit-wheel {
-  --propskit-wheel-elastic-distance: calc(var(--spacer-2) + 0.25rem);
   --propskit-wheel-elastic-scale: 1;
   --propskit-wheel-elastic-origin: left center;
   --propskit-wheel-elastic-transition: 0.28s
     cubic-bezier(0.34, 1.56, 0.64, 1);
-  --propskit-wheel-handle-drag-max: 0.5rem;
-  --propskit-wheel-handle-drag-offset: 0px;
-  --propskit-wheel-handle-spring: 0.28s
-    cubic-bezier(0.34, 1.56, 0.64, 1);
-  --propskit-wheel-keyboard-handle-spring: 0.14s
-    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-wheel-number-right: calc(2px + var(--spacer-1));
-  --propskit-wheel-handle-width: var(--spacer-1);
-  --propskit-wheel-handle-height: calc(
-    var(--propskit-wheel-height) - var(--spacer-3)
-  );
-  --propskit-wheel-handle-color: light-dark(
-    var(--figma-color-text-secondary),
-    var(--figma-color-text)
-  );
-  --propskit-wheel-tick-width: 0.125rem;
-  --propskit-wheel-tick-width-min: 1px;
-  --propskit-wheel-tick-height: calc(
-    var(--propskit-wheel-handle-height) - 4px
-  );
-  --propskit-wheel-tick-height-min: 8px;
-  --propskit-wheel-tick-inset: 3rem;
-  --propskit-wheel-tick-fade: 1rem;
-  --propskit-wheel-tick-opacity: 0.5;
-  --propskit-wheel-tick-opacity-min: 0.1;
+  --propskit-wheel-track-inset: 3rem;
+  --propskit-wheel-track-inset-left: var(--propskit-wheel-track-inset);
+  --propskit-wheel-track-inset-right: var(--propskit-wheel-track-inset);
   --figma-focus-outline-offset: 1px;
 
   display: block;
@@ -1521,16 +1612,27 @@ propskit-wheel {
   padding: var(--propskit-wheel-vertical-padding)
     var(--propskit-wheel-horizontal-padding);
 
+  &[data-label-empty] {
+    --propskit-wheel-track-inset-left: var(--spacer-2);
+  }
+
+  &[text="false"] {
+    --propskit-wheel-track-inset-right: var(--spacer-2);
+  }
+
   &[size="small"] {
     --propskit-wheel-height: 1.5rem;
-    --propskit-wheel-handle-height: calc(
-      var(--propskit-wheel-height) - var(--spacer-2-5)
-    );
     --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"]) {
@@ -1540,10 +1642,6 @@ propskit-wheel {
     input {
       color: var(--figma-color-text-disabled);
     }
-
-    .propskit-wheel-wheel {
-      opacity: 0.5;
-    }
   }
 
   .propskit-wheel-surface {
@@ -1591,66 +1689,21 @@ propskit-wheel {
     }
   }
 
-  .propskit-wheel-wheel {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    outline: none;
-    cursor: ew-resize;
-    mask-image: linear-gradient(
-      to right,
-      rgb(0 0 0 / var(--propskit-wheel-tick-opacity-min))
-        var(--propskit-wheel-tick-inset),
-      rgb(0 0 0 / var(--propskit-wheel-tick-opacity))
-        calc(
-          var(--propskit-wheel-tick-inset) + var(--propskit-wheel-tick-fade)
-        ),
-      rgb(0 0 0 / var(--propskit-wheel-tick-opacity))
-        calc(
-          100% - var(--propskit-wheel-tick-inset) -
-            var(--propskit-wheel-tick-fade)
-        ),
-      rgb(0 0 0 / var(--propskit-wheel-tick-opacity-min))
-        calc(100% - var(--propskit-wheel-tick-inset))
+  .propskit-wheel-surface > fig-input-wheel {
+    --fig-input-wheel-handle-height: calc(
+      var(--propskit-wheel-height) - var(--spacer-3)
     );
 
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .propskit-wheel-wheel-svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-    overflow: visible;
-    color: var(--figma-color-icon-tertiary);
-  }
-
-  .propskit-wheel-tick {
-    fill: currentColor;
-    stroke: none;
-  }
-
-  .propskit-wheel-handle {
     position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 1;
-    width: var(--propskit-wheel-handle-width);
-    height: var(--propskit-wheel-handle-height);
-    border-radius: calc(var(--propskit-wheel-handle-width) / 2);
-    background: transparent;
-    pointer-events: none;
-    transform: translate(
-      calc(-50% + var(--propskit-wheel-handle-drag-offset)),
-      -50%
-    );
-    transition: transform var(--propskit-wheel-handle-spring);
-    box-shadow:
-      inset 0 0 0 var(--propskit-wheel-handle-height)
-        var(--propskit-wheel-handle-color),
-      var(--handle-shadow);
+    inset: 0 var(--propskit-wheel-track-inset-right) 0
+      var(--propskit-wheel-track-inset-left);
+    z-index: 0;
+    width: auto;
+    height: 100%;
+    background-color: transparent;
+    outline: none;
+    transform: none;
+    transition: none;
   }
 
   fig-input-number {
@@ -1693,26 +1746,14 @@ propskit-wheel {
     }
   }
 
-  &[data-elastic-dragging="true"] {
+  &[data-propskit-wheel-elastic-dragging] {
     transform: scaleX(var(--propskit-wheel-elastic-scale));
     transition: none;
-
-    .propskit-wheel-handle {
-      transition: none;
-    }
-  }
-
-  &[data-keyboard-moving] .propskit-wheel-handle {
-    transition: none;
-  }
-
-  &[data-keyboard-settling] .propskit-wheel-handle {
-    transition: transform var(--propskit-wheel-keyboard-handle-spring);
   }
 }
 
-body.fig-propskit-wheel-dragging,
-body.fig-propskit-wheel-dragging * {
+body.fig-input-wheel-dragging,
+body.fig-input-wheel-dragging * {
   cursor: grabbing !important;
   user-select: none !important;
   -webkit-user-select: none !important;
@@ -1720,7 +1761,8 @@ body.fig-propskit-wheel-dragging * {
 
 @media (prefers-reduced-motion: reduce) {
   propskit-wheel,
-  propskit-wheel .propskit-wheel-handle {
+  fig-input-wheel,
+  fig-input-wheel .fig-input-wheel-handle {
     transition: none;
   }
 }