@rogieking/figui3 1.0.96 → 1.0.98

package/example.html

@@ -64,14 +64,66 @@
         <option selected>Fourhundred sixty two</option>
     </fig-dropdown>
     <br /><br />
-    <fig-slider min="0"
-                max="1"
-                transform="100"
-                step="0.01"
-                text="true"
-                style="width:300px;"
-                value="0.5">
-    </fig-slider>
+    <fig-field style="width:300px;">
+        <label>Range slider</label>
+        <fig-slider min="0"
+                    max="1"
+                    transform="100"
+                    variant="minimal"
+                    step="0.01"
+                    text="true"
+                    style="width:300px;"
+                    value="0.5">
+        </fig-slider>
+    </fig-field>
+    <fig-field style="width:300px;">
+        <label>Opacity slider</label>
+        <fig-slider type="opacity"
+                    variant="minimal"
+                    value="0.75"
+                    color="#ff0000"
+                    units="%"
+                    text="true"></fig-slider>
+    </fig-field>
+
+    <fig-field style="width:300px;">
+        <label>Hue slider</label>
+        <fig-slider type="hue"
+                    variant="minimal"
+                    value="55"></fig-slider>
+    </fig-field>
+
+    <fig-field style="width:300px;">
+        <label>Stepper slider</label>
+        <fig-slider type="stepper"
+                    variant="minimal"
+                    value="25"
+                    default="50"
+                    step="25">
+            <datalist id="markers">
+                <option value="0"></option>
+                <option value="25"></option>
+                <option value="50"></option>
+                <option value="75"></option>
+                <option value="100"></option>
+            </datalist>
+        </fig-slider>
+    </fig-field>
+
+    <fig-field style="width:300px;">
+        <label>Delta slider</label>
+        <fig-slider type="delta"
+                    variant="minimal"
+                    value=".25"
+                    default="0"
+                    step="0.25"
+                    max="5"
+                    min="-5">
+            <datalist id="markers">
+                <option value="0"></option>
+            </datalist>
+        </fig-slider>
+    </fig-field>
     <br />
     <fig-input-text min="0"
                     max="1"

package/fig.css

@@ -1429,7 +1429,9 @@ details {
 /* Sliders */
 .fig-slider,
 fig-slider {
+  --slider-field-height: 1.5rem;
   --slider-height: 1rem;
+  --slider-thumb-size: var(--slider-height);
   --slider-percent: calc(var(--slider-complete) * 100%);
   --start-percent: calc(var(--default, 0) * 100%);
   --slider-tick-size: calc(var(--slider-height) / 4);
@@ -1441,16 +1443,20 @@ fig-slider {
     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),
     0 0 0 1px var(--figma-color-border-selected);
+  --slider-transition: all 0.1s ease-in-out;
 
   display: inline-flex;
   align-items: center;
   position: relative;
+  height: var(--slider-field-height);
+  transition: var(--slider-transition);
 
   .fig-slider-input-container {
     height: var(--slider-height);
     position: relative;
     display: block;
     width: 100%;
+    transition: var(--slider-transition);
 
     /* Track */
     &::before {
@@ -1547,6 +1553,7 @@ fig-slider {
     display: block;
     width: 100%;
     background-color: transparent;
+    transition: var(--slider-transition);
 
     &:active::-webkit-slider-thumb {
       cursor: grabbing;
@@ -1560,9 +1567,11 @@ fig-slider {
     &::-webkit-slider-thumb {
       appearance: none;
       -webkit-appearance: none;
-      border-radius: 0.5rem;
-      height: var(--slider-height);
-      width: var(--slider-height);
+      transition: var(--slider-transition);
+      border-radius: 100%;
+      height: var(--slider-thumb-size);
+      width: var(--slider-thumb-size);
+      margin-top: calc(var(--slider-height) / 2 - var(--slider-thumb-size) / 2);
       aspect-ratio: 1;
       border: none;
       position: relative;
@@ -1592,6 +1601,7 @@ fig-slider {
     &::-webkit-slider-runnable-track {
       height: var(--slider-height);
       background-color: transparent;
+      transition: var(--slider-transition);
       border-radius: calc(var(--slider-height) / 2);
       box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
       background: var(--figma-color-bg-secondary);
@@ -1616,6 +1626,7 @@ fig-slider {
     display: block;
     width: 100%;
     background-color: transparent;
+    transition: var(--slider-transition);
 
     &:focus {
       outline: none;
@@ -1628,9 +1639,9 @@ fig-slider {
 
     &::-moz-range-thumb {
       appearance: none;
-      border-radius: 0.5rem;
-      height: var(--slider-height);
-      width: var(--slider-height);
+      border-radius: 100%;
+      height: var(--slider-thumb-size);
+      width: var(--slider-thumb-size);
       aspect-ratio: 1;
       border: none;
       position: relative;
@@ -1638,6 +1649,7 @@ fig-slider {
       cursor: grab;
       cursor: -moz-grab;
       box-shadow: var(--slider-handle-shadow);
+      transition: var(--slider-transition);
     }
 
     &:disabled {
@@ -1663,6 +1675,7 @@ fig-slider {
       border-radius: calc(var(--slider-height) / 2);
       box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
       background: var(--figma-color-bg-secondary);
+      transition: var(--slider-transition);
     }
 
     &.hue::-moz-range-track {
@@ -1678,7 +1691,9 @@ fig-slider {
   datalist {
     position: absolute;
     inset: 0;
+    top: calc((var(--slider-field-height) - var(--slider-height))/2);
     display: flex;
+    transition: var(--slider-transition);
     background: transparent;
     align-items: center;
     margin: 0;
@@ -1707,8 +1722,58 @@ fig-slider {
       }
     }
   }
+
+  &[variant="minimal"] {
+    --slider-height: 0.25rem;
+    --slider-thumb-size: 0.5rem;
+    --slider-tick-size: calc(var(--slider-height) / 2);
+
+    .fig-slider-input-container {
+      height: var(--slider-height);
+      position: relative;
+      display: block;
+      width: 100%;
+
+      /* Track */
+      &::before {
+        box-shadow: none;
+        background: var(--figma-color-text-onbrand-tertiary);
+      }
+
+      input[type="range"] {
+        &::-webkit-slider-runnable-track {
+          box-shadow: none;
+        }
+      }
+    }
+    fig-input-text {
+      height: calc(var(--slider-height) * 2);
+      background-color: transparent;
+    }
+    &:hover,
+    &:focus-within {
+      --slider-height: 1rem;
+      --slider-thumb-size: 1rem;
+      --slider-tick-size: calc(var(--slider-height) / 4);
+      .fig-slider-input-container {
+        &::before {
+            box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+            background: var(--figma-color-bg-brand);
+          }
+        }
+        input[type="range"] {
+          &::-webkit-slider-runnable-track {
+            box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+          }
+        }
+        fig-input-text {
+          height: auto;
+        }
+    }
+  }
 }
 
+
 /* Popovers/Dialogs */
 .dialog,
 dialog,

package/index.ts

@@ -0,0 +1 @@
+console.log("Hello via Bun!");

package/package.json

@@ -1,4 +1,15 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.96"
+  "version": "1.0.98",
+  "module": "index.ts",
+  "type": "module",
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "bun build fig.js --minify --outdir dist"
+  }
 }

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}