@rogieking/figui3 1.3.7 → 1.3.9

package/example.html

@@ -23,6 +23,31 @@
         <h2>UI3 Components</h2>
     </fig-header>
     <fig-content>
+        <fig-field>
+            <fig-slider type="delta"
+                        value=".25"
+                        default="2"
+                        step="0.1"
+                        max="5"
+                        min="-5">
+            </fig-slider>
+        </fig-field>
+
+        <br /><br />
+        <fig-input-angle value="45"
+                         text="true"></fig-input-angle>
+        <br /><br />
+        <fig-slider min="0.01"
+                    max="0.25"
+                    name="u_thickness"
+                    variant="minimal"
+                    step="0.01"
+                    value="1"
+                    text="true"
+                    type="range"
+                    units="%"
+                    transform="100">
+        </fig-slider>
         <fig-input-text type="number"
                         min="1"
                         style="width: 100px;"

package/fig.css

@@ -1,6 +1,7 @@
 :root {
   --figma-color-bg: #ffffff;
   --figma-color-bg-brand: #0d99ff;
+
   --figma-color-bg-brand-hover: #007be5;
   --figma-color-bg-brand-pressed: #007be5;
   --figma-color-bg-brand-secondary: #0768cf;
@@ -160,6 +161,7 @@
   --figma-color-text-onwarning-tertiary: #0000004d;
   --figma-color-text-secondary: #00000080;
   --figma-color-text-secondary-hover: #000000e5;
+  --figma-color-text-selection: rgba(13, 153, 255, 0.4);
   --figma-color-text-selected: #007be5;
   --figma-color-text-selected-secondary: #007be5;
   --figma-color-text-selected-tertiary: #007be5;
@@ -478,6 +480,14 @@ html {
   box-sizing: border-box;
 }
 
+::selection {
+  background-color: var(--figma-color-text-selection);
+}
+
+::-moz-selection {
+  background-color: var(--figma-color-text-selection);
+}
+
 body {
   font-size: var(--body-medium-fontSize);
   letter-spacing: var(--body-letter-spacing);
@@ -1504,6 +1514,12 @@ fig-slider {
   }
 
   &[type="delta"] {
+    datalist option {
+      position: absolute;
+      margin: 0;
+      left: calc(var(--start-percent) - var(--slider-tick-size) / 2);
+      top: calc(50% - var(--slider-tick-size) / 2);
+    }
     .fig-slider-input-container {
       &::before {
         --left-start: calc(var(--start-percent) - var(--slider-height) / 2);
@@ -1525,19 +1541,6 @@ fig-slider {
         --abs-delta: max(var(--delta), -1 * var(--delta));
         opacity: calc(var(--abs-delta) * 100);
       }
-
-      &::after {
-        content: "";
-        width: var(--slider-tick-size);
-        height: var(--slider-tick-size);
-        aspect-ratio: 1;
-        border-radius: 100%;
-        font-size: 0;
-        position: absolute;
-        left: calc(var(--start-percent) - var(--slider-tick-size) / 2);
-        top: calc(50% - var(--slider-tick-size) / 2);
-        background: var(--figma-color-icon-onbrand);
-      }
     }
   }
 
@@ -2261,7 +2264,7 @@ fig-segmented-control {
     justify-content: center;
     position: relative;
     appearance: none;
-    color: var(--figma-color-text-secondary);
+    color: var(--figma-color-text-se);
     padding: 0 var(--spacer-2);
 
     &[selected]:not([selected="false"]),

package/fig.js

@@ -757,6 +757,14 @@ class FigSlider extends HTMLElement {
         }
         this.inputContainer.append(this.datalist);
         this.input.setAttribute("list", this.datalist.getAttribute("id"));
+      } else if (this.type === "delta") {
+        this.datalist = document.createElement("datalist");
+        this.datalist.setAttribute("id", figUniqueId());
+        let option = document.createElement("option");
+        option.setAttribute("value", this.default);
+        this.datalist.append(option);
+        this.inputContainer.append(this.datalist);
+        this.input.setAttribute("list", this.datalist.getAttribute("id"));
       }
       if (this.datalist) {
         let defaultOption = this.datalist.querySelector(
@@ -2023,8 +2031,9 @@ class FigInputAngle extends HTMLElement {
     this.handle = null;
     this.angleInput = null;
     this.plane = null;
+  }
 
-    // Initialize position
+  connectedCallback() {
     requestAnimationFrame(() => {
       this.precision = this.getAttribute("precision") || 1;
       this.precision = parseInt(this.precision);
@@ -2263,3 +2272,4 @@ class FigInputAngle extends HTMLElement {
     }
   }
 }
+customElements.define("fig-input-angle", FigInputAngle);

package/package.json

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