@rogieking/figui3 1.8.4 → 1.8.6

package/components.css

@@ -418,9 +418,7 @@
   --body-medium-strong-fontWeight: 550;
   --body-large-strong-fontWeight: 500;
   --body-medium-fontWeight: 450;
-  --handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.05),
-    0px 1px 3px 0px rgba(0, 0, 0, 0.05), 0px 3px 8px 0px rgba(0, 0, 0, 0.05),
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
+  --handle-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
   --handle-color: #fff;
 
   --popover-min-width: 15rem;
@@ -1586,11 +1584,9 @@ fig-slider {
   --slider-tick-size: calc(var(--slider-height) / 4);
   --slider-handle-shadow: inset 0 0 0 calc(4px + 0.5rem * var(--unchanged))
       var(--handle-color),
-    inset 0 0 0 5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
+    var(--handle-shadow);
   --slider-handle-shadow-focus: inset 0 0 0 4px var(--handle-color),
-    inset 0 0 0 5px rgba(0, 0, 0, 0.1), 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
-    0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.18),
+    inset 0 0 0 5px rgba(0, 0, 0, 0.1), var(--handle-shadow),
     0 0 0 1px var(--figma-color-border-selected);
   --slider-transition: all 0.1s ease-in-out;
   --handle-transition: var(--slider-transition);
@@ -1883,6 +1879,41 @@ fig-slider {
       background-color: transparent;
     }
 
+    &:hover,
+    &:focus-within {
+      fig-input-text {
+        height: auto;
+      }
+    }
+  }
+  &[variant="neue"] {
+    --slider-height: 0.375rem;
+    --slider-thumb-size: 0.75rem;
+    --slider-tick-size: 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(--handle-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-200);
+
+    background-color: var(--figma-color-bg-secondary);
+    border-radius: var(--radius-medium);
+    padding-left: 0.5rem;
+
+    .fig-slider-input-container {
+      height: var(--slider-height);
+      position: relative;
+      display: block;
+      width: 100%;
+      box-shadow: none;
+      background-color: var(--figma-color-bg-tertiary);
+    }
+    fig-input-text {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
     &:hover,
     &:focus-within {
       fig-input-text {
@@ -2205,6 +2236,7 @@ fig-input-text {
   justify-content: center;
   user-select: all;
   gap: 0;
+  color: var(--figma-color-text);
 
   &[multiline] {
     display: block;

package/example.html

@@ -28,12 +28,24 @@
 
 
 
+
+
     <fig-input-text disabled
                     value="Disabled"><span slot="append">%</span></fig-input-text>
 
 
+    <fig-slider min="1"
+                max="100"
+                value="50"
+                step="1"
+                text="true"
+                units="%"
+                variant="neue">
+    </fig-slider>
+
+
     <fig-popover action="manual"
-                 open="true"
+                 open="false"
                  size="large">
         <fig-button>
             Hover me
@@ -535,6 +547,8 @@
                         Close
                     </fig-button>
                 </fig-tooltip>
+                <fig-input-text placeholder="Enter text"
+                                value="Hello"></fig-input-text>
                 <p>Some content here</p>
                 <fig-field direction="horizontal">
                     <label for="colorLevels">Color Levels</label>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {