@rogieking/figui3 1.0.16 → 1.0.18

package/example.html

@@ -33,6 +33,7 @@
             <fig-button variant="secondary">Secondary</fig-button>
             <fig-button variant="ghost">Ghost</fig-button>
             <fig-button variant="ghost"
+                        type="toggle"
                         icon="true">
                 <svg class="svg"
                      xmlns="http://www.w3.org/2000/svg"
@@ -48,7 +49,8 @@
                 </svg>
             </fig-button>
             <fig-tooltip text="Toggle off/on">
-                <fig-button variant="toggle"
+                <fig-button variant="ghost"
+                            type="toggle"
                             icon="true"
                             selected="true">
                     <svg width="24"
@@ -122,35 +124,59 @@
             <fig-input-text value=""
                             placeholder="Field placeholder"></fig-input-text>
         </fig-field>
-        <fig-slider></fig-slider>
-        <br />
-        <fig-slider text="true"
-                    value="50"></fig-slider>
-        <br />
-        <fig-slider type="opacity"
-                    value="0.75"
-                    color="#ff0000"></fig-slider>
-        <br />
-        <fig-slider type="hue"
-                    value="55"></fig-slider>
-        <br />
-        <fig-slider value="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>
-        <br />
-        <fig-slider type="delta"
-                    value="2"
-                    default="0"
-                    max="5"
-                    min="-5"></fig-slider>
-        <br />
+        <fig-field>
+            <label>Default slider</label>
+            <fig-slider></fig-slider>
+        </fig-field>
+
+        <fig-field>
+            <label>Number slider (with number input)</label>
+            <fig-slider text="true"
+                        value="50"></fig-slider>
+        </fig-field>
+
+        <fig-field>
+            <label>Opacity slider</label>
+            <fig-slider type="opacity"
+                        value="0.75"
+                        color="#ff0000"
+                        text="true"></fig-slider>
+        </fig-field>
+
+        <fig-field>
+            <label>Hue slider</label>
+            <fig-slider type="hue"
+                        value="55"></fig-slider>
+        </fig-field>
+
+        <fig-field>
+            <label>Stepper slider</label>
+            <fig-slider value="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>
+            <label>Delta slider</label>
+            <fig-slider type="delta"
+                        value=".25"
+                        default="0"
+                        step="0.25"
+                        max="5"
+                        min="-5">
+                <datalist id="markers">
+                    <option value="0"></option>
+                </datalist>
+            </fig-slider>
+        </fig-field>
+
         <fig-spinner></fig-spinner>
     </fig-content>
 

package/fig.css

@@ -1229,6 +1229,9 @@ fig-slider {
         --width: calc(var(--slider-percent) - var(--start-percent));
         --abs-width: max(var(--width) + var(--slider-height)/2, -1*var(--width) + var(--slider-height)/2);
         width: var(--abs-width);
+        --delta: calc(var(--slider-complete) - var(--default));
+        --abs-delta: max(var(--delta), -1*var(--delta));
+        opacity: calc(var(--abs-delta) * 100);
       }
 
       &::after {
@@ -1285,7 +1288,6 @@ fig-slider {
       aspect-ratio: 1;
       border: none;
       position: relative;
-      z-index: 1;
       box-shadow: var(--slider-handle-shadow);
     }
 
@@ -1347,7 +1349,6 @@ fig-slider {
       aspect-ratio: 1;
       border: none;
       position: relative;
-      z-index: 1;
       box-shadow: var(--slider-handle-shadow);
     }
 
@@ -1400,7 +1401,7 @@ fig-slider {
       width: var(--slider-tick-size);
       height: var(--slider-tick-size);
       aspect-ratio: 1;
-      margin: 0;
+      margin: 0 auto;
       padding: 0;
       border: 0;
       border-radius: 100%;

package/fig.js

@@ -8,6 +8,8 @@ function supportsPopover() {
 
 /* Button */
 class FigButton extends HTMLElement {
+    #type
+    #selected
     constructor() {
         super()
         this.attachShadow({ mode: 'open' })
@@ -34,7 +36,30 @@ class FigButton extends HTMLElement {
                 <slot></slot>
             </button>
             `;
+        this.#selected = this.hasAttribute("selected") && this.getAttribute("selected") !== "false"
+        this.#type = this.getAttribute("type")
         this.button = this.shadowRoot.querySelector('button')
+        this.addEventListener("click", this.handleClick.bind(this))
+    }
+    get type() {
+        return this.#type
+    }
+    set type(value) {
+        this.#type = value
+        this.setAttribute("type", value)
+    }
+    get selected() {
+        return this.#selected
+    }
+    set selected(value) {
+        this.#selected = value
+        this.setAttribute("selected", value)
+    }
+
+    handleClick() {
+        if (this.#type === "toggle") {
+            this.selected = !this.#selected
+        }
     }
     static get observedAttributes() {
         return ['disabled'];
@@ -549,12 +574,6 @@ class FigSlider extends HTMLElement {
         this.input.addEventListener("input", this.handleInput.bind(this))
         this.handleInput()
 
-        this.datalist = this.querySelector('datalist')
-        if (this.datalist) {
-            this.datalist.setAttribute("id", this.datalist.getAttribute("id") || uniqueId())
-            this.input.setAttribute('list', this.datalist.getAttribute("id"))
-        }
-
         if (this.textInput) {
             this.textInput.addEventListener("input", this.handleTextInput.bind(this))
         }
@@ -562,6 +581,14 @@ class FigSlider extends HTMLElement {
         if (this.default) {
             this.style.setProperty("--default", this.calculateNormal(this.default))
         }
+        //child nodes hack
+        requestAnimationFrame(() => {
+            this.datalist = this.querySelector('datalist')
+            if (this.datalist) {
+                this.datalist.setAttribute("id", this.datalist.getAttribute("id") || uniqueId())
+                this.input.setAttribute('list', this.datalist.getAttribute("id"))
+            }
+        })
     }
     static get observedAttributes() {
         return ['value', 'step', 'min', 'max', 'type', 'disabled']

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.16"
+  "version": "1.0.18"
 }