@rogieking/figui3 1.0.17 → 1.0.19

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"
@@ -49,8 +50,8 @@
             </fig-button>
             <fig-tooltip text="Toggle off/on">
                 <fig-button variant="ghost"
-                            icon="true"
                             type="toggle"
+                            icon="true"
                             selected="true">
                     <svg width="24"
                          height="24"
@@ -123,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

@@ -18,6 +18,7 @@ class FigButton extends HTMLElement {
         this.render()
     }
     render() {
+        this.#type = this.getAttribute("type")
         this.shadowRoot.innerHTML = `
             <style>
                 button, button:hover, button:active {
@@ -32,12 +33,11 @@ class FigButton extends HTMLElement {
                     background: transparent;
                 }
             </style>
-            <button>
+            <button type="${this.#type}">
                 <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))
     }
@@ -46,6 +46,7 @@ class FigButton extends HTMLElement {
     }
     set type(value) {
         this.#type = value
+        this.button.type = value
         this.setAttribute("type", value)
     }
     get selected() {
@@ -574,12 +575,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))
         }
@@ -587,6 +582,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.17"
+  "version": "1.0.19"
 }