@rogieking/figui3 1.8.3 → 1.8.5

package/components.css

@@ -1883,6 +1883,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 {

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
@@ -294,8 +306,8 @@
             function updateImages() {
                 const images = document.querySelectorAll('fig-image');
                 images.forEach(image => {
-                    //image.setAttribute("src", "https://picsum.photos/200?random=" + Math.random());
-                    image.src = "https://picsum.photos/200?random=" + Math.random();
+                    image.setAttribute("src", "https://picsum.photos/200?random=" + Math.random());
+                    //image.src = "https://picsum.photos/200?random=" + Math.random();
                 });
             }
         </script>
@@ -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/fig.js

@@ -2101,10 +2101,7 @@ class FigImage extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "src") {
-      //this.src = newValue;
-      if (!this.chit) {
-        this.chit = this.querySelector("fig-chit");
-      }
+      this.#src = newValue;
       if (this.chit) {
         this.chit.setAttribute("src", this.#src);
       }

package/package.json

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