npm - @zywave/zui-slider - Versions diffs - 4.4.0-pre.1 → 4.4.0-pre.2 - Mend

@zywave/zui-slider 4.4.0-pre.1 → 4.4.0-pre.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/css/zui-slider.fouc.css +1 -1
package/dist/custom-elements.json +8 -6
package/dist/zui-slider-css.js +1 -1
package/dist/zui-slider-css.js.map +1 -1
package/dist/zui-slider.d.ts +1 -2
package/dist/zui-slider.js +8 -10
package/dist/zui-slider.js.map +1 -1
package/lab.html +0 -3
package/package.json +2 -2
package/src/css/zui-slider.fouc.scss +2 -1
package/src/zui-slider-css.js +1 -1
package/src/zui-slider.scss +69 -129
package/src/zui-slider.ts +8 -10
package/test/zui-slider.test.ts +33 -25

package/dist/css/zui-slider.fouc.css CHANGED Viewed

	@@ -1 +1 @@
1	- zui-slider:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;--zui-slider-thumb-size: 0.875rem;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}zui-slider:not(:defined)::before{display:block;content:"";height:.25rem;background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) 50%, var(--zui-gray-200) 50%, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)));border-radius:.1875rem}zui-slider:not(:defined)::after{position:absolute;top:50%;left:50%;content:"";width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;cursor:grab;transform:translate(-50%, -50%)}zui-slider:not(:defined):active::after{cursor:grabbing}zui-slider:not(:defined) ,zui-slider:not(:defined) ::before,zui-slider:not(:defined) ::after{box-sizing:inherit}zui-slider[range]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range]:not(:defined)::before{background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))}zui-slider[range]:not(:defined)::after{display:none}zui-slider[range]:not(:defined) ,zui-slider[range]:not(:defined) ::before,zui-slider[range]:not(:defined) ::after{box-sizing:inherit}zui-slider[disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;cursor:not-allowed}zui-slider[disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[disabled]:not(:defined)::after{background-color:var(--zui-gray);cursor:not-allowed}zui-slider[disabled]:not(:defined) ,zui-slider[disabled]:not(:defined) ::before,zui-slider[disabled]:not(:defined) ::after{box-sizing:inherit}zui-slider[range][disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range][disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[range][disabled]:not(:defined) ,zui-slider[range][disabled]:not(:defined) ::before,zui-slider[range][disabled]:not(:defined) ::after{box-sizing:inherit}
1	+ zui-slider:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;--zui-slider-thumb-size: 0.875rem;position:relative;display:block;margin:0 calc(var(--zui-slider-thumb-size)-1);padding:calc(var(--zui-slider-thumb-size)/2 - 0.125rem) 0}zui-slider:not(:defined)::before{display:block;content:"";height:.25rem;background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) 50%, var(--zui-gray-200) 50%, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)));border-radius:.1875rem}zui-slider:not(:defined)::after{position:absolute;top:50%;left:50%;content:"";width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;cursor:grab;transform:translate(-50%, -50%)}zui-slider:not(:defined):active::after{cursor:grabbing}zui-slider:not(:defined) ,zui-slider:not(:defined) ::before,zui-slider:not(:defined) ::after{box-sizing:inherit}zui-slider[range]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range]:not(:defined)::before{background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))}zui-slider[range]:not(:defined)::after{display:none}zui-slider[range]:not(:defined) ,zui-slider[range]:not(:defined) ::before,zui-slider[range]:not(:defined) ::after{box-sizing:inherit}zui-slider[disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;cursor:not-allowed}zui-slider[disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[disabled]:not(:defined)::after{background-color:var(--zui-gray);cursor:not-allowed}zui-slider[disabled]:not(:defined) ,zui-slider[disabled]:not(:defined) ::before,zui-slider[disabled]:not(:defined) ::after{box-sizing:inherit}zui-slider[range][disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range][disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[range][disabled]:not(:defined) ,zui-slider[range][disabled]:not(:defined) ::before,zui-slider[range][disabled]:not(:defined) *::after{box-sizing:inherit}

package/dist/custom-elements.json CHANGED Viewed

@@ -12,12 +12,7 @@
           "name": "ZuiSlider",
           "cssProperties": [
             {
-              "description": "Controls the visual dot size and thumb hit-area (hit area is 3× this value)",
-              "name": "--zui-slider-thumb-size",
-              "default": "0.875rem (14px)"
-            },
-            {
-              "description": "Width of the floating value input above each thumb",
+              "description": "Width of the floating value input above each slider thumb",
               "name": "--zui-slider-input-width",
               "default": "7ch"
             }
@@ -423,6 +418,13 @@
                   "type": {
                     "text": "'start' | 'end'"
                   }
+                },
+                {
+                  "name": "trackBg",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
                 }
               ]
             },

package/dist/zui-slider-css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border:0;border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:disabled{cursor:not-allowed}:host input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:active::-moz-range-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;
+export const style = css `:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block}:host .single-wrapper,:host .range-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:var(--zui-slider-thumb-size);margin:0;background:rgba(0,0,0,0);outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-moz-range-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-webkit-slider-thumb{transform:translateY(calc(-50% + 0.125rem));-webkit-appearance:none;appearance:none}:host input[type=range]::-moz-range-thumb{border:0}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper input[type=range]{position:absolute;pointer-events:none}:host .range-wrapper input[type=range]::-webkit-slider-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) input[type=range]:disabled{cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host([disabled]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host([disabled]) .step-dot{background-color:var(--zui-gray)}:host([disabled]) .range-wrapper{cursor:not-allowed}`;
 //# sourceMappingURL=zui-slider-css.js.map

package/dist/zui-slider-css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,~~6sPAA6sP~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block~~;padding:calc(var(--zui-slider-thumb-size)/2) 0~~}:host .single-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)-1)}:host input[type=range]{width:100%;height~~:.25rem~~;margin:0;background:~~var~~(~~--zui-gray-200~~);~~border-radius:.1875rem;~~outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)3);height:calc(var(--zui-slider-thumb-size)3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out~~;-webkit-appearance:none;appearance:none~~}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)3);height:calc(var(--zui-slider-thumb-size)3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border~~:0;border~~-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host ~~input[type=range]:disabled{cursor:not-allowed}:host input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0~~.~~0625rem), transparent calc(var(--zui-slider-~~thumb-~~size) / 2))}:host~~ input~~[type=range]:disabled::-webkit-slider-thumb:hover~~{box-shadow:none}:host input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper~~{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem~~ ~~calc(var(--zui-slider-thumb-size)-1)}:host .range-wrapper~~ input[type=range]{position:absolute;~~width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);~~pointer-events:none}~~@supports(-moz-appearance~~: ~~none){:~~host .range-wrapper input[type=range]~~{top:50%;left:0}}:host .range-wrapper input[type=range]~~::-webkit-slider-~~runnable~~-~~track{height:.25rem;background~~:~~rgba(0,0,0,0)~~}:host .range-wrapper input[type=range]::-~~webkit~~-~~slider~~-thumb{~~margin-top:.125rem;cursor:grab;~~pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-~~track~~{~~height:.25rem;~~background:rgba(0,0,0,0)}:host .~~range~~-~~wrapper input[type=range]::-moz~~-~~range-progress~~{~~background~~:~~rgba(0,0,0,0)~~}:host .~~range~~-~~wrapper~~ ~~input[type=range]::-moz~~-~~range~~-~~thumb~~{~~cursor~~:~~grab~~;~~pointer~~-~~events:all~~}:host ~~.range-wrapper input~~[~~type=~~range]~~:active::-webkit~~-~~slider~~-~~thumb~~{~~cursor:grabbing~~}:host ~~.range-wrapper~~ input[type=range]:~~active::-moz-range-thumb~~{cursor:~~grabbing~~}:host ~~.range-wrapper~~ input[type=range]:disabled::-webkit-slider-thumb{~~cursor~~:~~not~~-~~allowed~~;~~pointer-events~~:~~all~~}:host ~~.range-wrapper~~ input[type=range]:disabled::-moz-range-thumb{~~cursor~~:~~not~~-~~allowed;pointer-events:all}:host~~ ~~.range~~-~~wrapper~~ ~~.thumb-input{bottom:~~calc(var(--zui-slider-thumb-size)2 - 0.0625rem)~~}:host~~ ~~.min-max-labels{display:flex;justify-content:space-between}:host~~ ~~.min-max-labels .min-max-label{font-weight:600;color:~~var(--zui-~~gray~~-~~600~~)}:host([~~range~~]) ~~.min-max-labels~~{~~margin~~-~~top:.3125rem~~}:host([~~readonly~~]) input[type=range]:disabled{cursor:~~default~~}:host([~~readonly~~]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-~~blue~~) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:~~default~~}:host([~~readonly~~]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-~~blue~~) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:~~default}:host([disabled]){cursor:~~not-allowed}:host([disabled]) .range-~~wrapper~~{~~cursor~~:~~not-allowed~~}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;\n"]}
1	+ {"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,klOAAklO,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block}:host .single-wrapper,:host .range-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)-1)}:host input[type=range]{width:100%;height:var(--zui-slider-thumb-size);margin:0;background:rgba(0,0,0,0);outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-moz-range-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)3);height:calc(var(--zui-slider-thumb-size)3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)3);height:calc(var(--zui-slider-thumb-size)3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-webkit-slider-thumb{transform:translateY(calc(-50% + 0.125rem));-webkit-appearance:none;appearance:none}:host input[type=range]::-moz-range-thumb{border:0}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper input[type=range]{position:absolute;pointer-events:none}:host .range-wrapper input[type=range]::-webkit-slider-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) input[type=range]:disabled{cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host([disabled]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host([disabled]) .step-dot{background-color:var(--zui-gray)}:host([disabled]) .range-wrapper{cursor:not-allowed}`;\n"]}

package/dist/zui-slider.d.ts CHANGED Viewed

@@ -34,8 +34,7 @@ import { TemplateResult } from 'lit';
  * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed
  * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider
  *
- * @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)
- * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb
+ * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each slider thumb
  *
  * @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }
  */

package/dist/zui-slider.js CHANGED Viewed

@@ -46,8 +46,7 @@ import { style } from './zui-slider-css.js';
  * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed
  * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider
  *
- * @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)
- * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb
+ * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each slider thumb
  *
  * @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }
  */
@@ -325,7 +324,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
       <div class="single-wrapper">
         <input
           aria-label="Slider value"
-          style=${styleMap({ background: this.#singleTrackBackground(progress) })}
+          style=${styleMap({ '--zui-slider-track-bg': this.#singleTrackBackground(progress) })}
           type="range"
           .min="${String(this.min)}"
           .max="${String(this.max)}"
@@ -339,8 +338,8 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           @focus="${this.#h.thumb.show}"
           @blur="${this.#h.thumb.hide}"
         />
-        ${this.#renderStepDots()}
         ${this.#renderFloatingInput(this.#value, this.#onThumbFloatingInput, this.#onThumbFloatingChange, 'thumb', this.#isVisible('thumb'), progress)}
+        ${this.#renderStepDots()}
       </div>
     `;
     }
@@ -348,18 +347,16 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         const progressStart = this.progressStart;
         const progressEnd = this.progressEnd;
         return html `
-      <div
-        class="range-wrapper"
-        style=${styleMap({ background: this.#rangeTrackBackground(progressStart, progressEnd) })}
-      >
-        ${this.#renderStepDots()}${this.#renderRangeInput('start')}
+      <div class="range-wrapper">
+        ${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}
         ${this.#renderFloatingInput(this.#valueStart, this.#onStartThumbFloatingInput, this.#onStartThumbFloatingChange, 'startThumb', this.#isVisible('startThumb'), progressStart)}
         ${this.#renderRangeInput('end')}
         ${this.#renderFloatingInput(this.#valueEnd, this.#onEndThumbFloatingInput, this.#onEndThumbFloatingChange, 'endThumb', this.#isVisible('endThumb'), progressEnd)}
+        ${this.#renderStepDots()}
       </div>
     `;
     }
-    #renderRangeInput(which) {
+    #renderRangeInput(which, trackBg) {
         const flag = which === 'start' ? 'startThumb' : 'endThumb';
         const val = which === 'start' ? this.#valueStart : this.#valueEnd;
         const onInput = which === 'start' ? this.#onRangeStartInput : this.#onRangeEndInput;
@@ -372,6 +369,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         aria-label="${which === 'start' ? 'Range start' : 'Range end'}"
         class="range-${which}"
         type="range"
+        style=${trackBg ? styleMap({ '--zui-slider-track-bg': trackBg }) : nothing}
         .min="${String(this.min)}"
         .max="${String(this.max)}"
         .step="${this.step > 0 ? String(this.step) : '1'}"

package/dist/zui-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html, nothing, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\ntype ThumbFlag = 'thumb' \| 'startThumb' \| 'endThumb';\n\n/*\n A range form control for choosing values along a slider.\n * @element zui-slider\n \n @attr {string \| null} [name=null] - The name of this element that is associated with form submission\n * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @attr {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @attr {number} [value-start=0] - Represents the start (lower) value in range mode\n * @attr {number} [value-end=100] - Represents the end (upper) value in range mode\n * @attr {number} [min=0] - Represents the minimum permitted value\n * @attr {number} [max=100] - Represents the maximum permitted value\n * @attr {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @attr {boolean} [show-min-max=false] - Shows the min and max values beneath the slider\n \n @prop {string \| null} [name=null] - The name of this element that is associated with form submission\n * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value as a number. Invalid or non-numeric values are clamped to min; empty string (representing an in-progress edit) returns NaN\n * @prop {string} [value='50'] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line (single mode)\n * @prop {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @prop {string} [valueStart='0'] - Represents the start (lower) value in range mode\n * @prop {string} [valueEnd='100'] - Represents the end (upper) value in range mode\n * @prop {number} [progressStart=0] - Determines visual placement of the start thumb in range mode\n * @prop {number} [progressEnd=100] - Determines visual placement of the end thumb in range mode\n * @prop {number} [min=0] - Represents the minimum permitted value\n * @prop {number} [max=100] - Represents the maximum permitted value\n * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider\n \n @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)\n * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb\n \n @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }\n /\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n #defaultValue: string = '50';\n #defaultValueStart: string = '0';\n #defaultValueEnd: string = '100';\n\n #value: string = '50';\n #valueStart: string = '0';\n #valueEnd: string = '100';\n\n #thumbInputState = new Map<\n ThumbFlag,\n {\n visible: boolean;\n focused: boolean;\n timer?: ReturnType<typeof setTimeout>;\n debounceTimer?: ReturnType<typeof setTimeout>;\n }\n >([\n ['thumb', { visible: false, focused: false }],\n ['startThumb', { visible: false, focused: false }],\n ['endThumb', { visible: false, focused: false }],\n ]);\n\n // Pre-bound floating input handlers cached to avoid new function references on every render\n #onThumbFloatingInput = this.#onFloatingInput('thumb', (v) => (this.value = v));\n #onStartThumbFloatingInput = this.#onFloatingInput('startThumb', (v) => (this.valueStart = v));\n #onEndThumbFloatingInput = this.#onFloatingInput('endThumb', (v) => (this.valueEnd = v));\n\n // Cached floating input change handlers — flush debounce and dispatch immediately on commit (Enter/blur)\n #onThumbFloatingChange = this.#makeFloatingChange(\n 'thumb',\n (v) => (this.value = v),\n () => this.#onChange()\n );\n #onStartThumbFloatingChange = this.#makeFloatingChange(\n 'startThumb',\n (v) => (this.valueStart = v),\n () => this.#onRangeChange()\n );\n #onEndThumbFloatingChange = this.#makeFloatingChange(\n 'endThumb',\n (v) => (this.valueEnd = v),\n () => this.#onRangeChange()\n );\n\n // Cached range drag input handlers\n #onRangeStartInput = this.#onRangeInput('start');\n #onRangeEndInput = this.#onRangeInput('end');\n\n // Cached pointer/focus handlers per thumb — prevents new closures on every render\n #h: Record<ThumbFlag, { show: () => void; hide: () => void; focus: () => void; blur: () => void }> = {\n thumb: {\n show: () => this.#showThumbInput('thumb'),\n hide: () => this.#scheduleHideThumbInput('thumb'),\n focus: () => this.#focusFloatingInput('thumb'),\n blur: () => this.#blurFloatingInput('thumb'),\n },\n startThumb: {\n show: () => this.#showThumbInput('startThumb'),\n hide: () => this.#scheduleHideThumbInput('startThumb'),\n focus: () => this.#focusFloatingInput('startThumb'),\n blur: () => this.#blurFloatingInput('startThumb'),\n },\n endThumb: {\n show: () => this.#showThumbInput('endThumb'),\n hide: () => this.#scheduleHideThumbInput('endThumb'),\n focus: () => this.#focusFloatingInput('endThumb'),\n blur: () => this.#blurFloatingInput('endThumb'),\n },\n };\n\n static get styles() {\n return [super.styles, style];\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.updateComplete.then(() => {\n if (this.range) {\n const [startInput, endInput] = this.#rangeInputs();\n this.#valueStart = startInput.value;\n this.#valueEnd = endInput.value;\n this.#defaultValueStart = startInput.value;\n this.#defaultValueEnd = endInput.value;\n this._setFormValue(`${startInput.value},${endInput.value}`);\n } else {\n const input = this.#singleInput();\n this.#value = input.value;\n this.#defaultValue = input.value;\n this._setFormValue(input.value);\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#clearAllThumbInputState();\n // Schedule a re-render so the cleared visibility state is reflected in the DOM.\n // Lit defers this render until the element reconnects if it is currently disconnected.\n this.requestUpdate();\n }\n\n protected updated(changed: Map<PropertyKey, unknown>) {\n if (changed.has('disabled') && this.disabled) {\n this.#clearAllThumbInputState();\n }\n if (changed.has('min') \|\| changed.has('max')) {\n // The native inputs have already clamped (and step-snapped) their values to the new bounds.\n // Read them back and sync internal state + form value. If the value changed, request a\n // re-render so the floating input (which binds to #value/#valueStart/#valueEnd) stays in sync.\n if (this.range) {\n const [startInput, endInput] = this.#rangeInputs();\n const newStart = startInput.value;\n const newEnd = endInput.value;\n if (newStart !== this.#valueStart \|\| newEnd !== this.#valueEnd) {\n this.#valueStart = newStart;\n this.#valueEnd = newEnd;\n this.requestUpdate();\n }\n this._setFormValue(`${this.#valueStart},${this.#valueEnd}`);\n } else {\n const newValue = this.#singleInput().value;\n if (newValue !== this.#value) {\n this.#value = newValue;\n this.requestUpdate();\n }\n this._setFormValue(this.#value);\n }\n }\n }\n\n #singleInput(): HTMLInputElement {\n return this.shadowRoot!.querySelector<HTMLInputElement>('input[type=\"range\"]')!;\n }\n\n #rangeInputs(): [HTMLInputElement, HTMLInputElement] {\n const inputs = this.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type=\"range\"]');\n return [inputs[0], inputs[1]];\n }\n\n protected get _focusControlSelector() {\n return 'input';\n }\n\n protected get _formValue() {\n return this.range ? `${this.#valueStart},${this.#valueEnd}` : this.#value;\n }\n\n protected formResetCallback() {\n this.#clearAllThumbInputState();\n // Always request a re-render so the cleared thumb visibility is reflected even when the\n // reset value equals the current value (the named setter requestUpdate would be a no-op).\n this.requestUpdate();\n if (this.range) {\n this.valueStart = this.#defaultValueStart;\n this.valueEnd = this.#defaultValueEnd;\n } else {\n this.value = this.#defaultValue;\n }\n }\n\n #clearAllThumbInputState() {\n for (const entry of this.#thumbInputState.values()) {\n clearTimeout(entry.timer);\n clearTimeout(entry.debounceTimer);\n entry.timer = undefined;\n entry.debounceTimer = undefined;\n entry.visible = false;\n entry.focused = false;\n }\n }\n\n /\n Clamps a raw string value to the current [min, max] range.\n * Empty string is passed through unchanged (represents an in-progress floating input edit).\n * Non-numeric strings are passed through unchanged.\n /\n #clampToRange(rawVal: string): string {\n if (rawVal === '') {\n return rawVal;\n }\n const num = parseFloat(rawVal);\n if (isNaN(num)) {\n return rawVal;\n }\n return String(Math.min(this.max, Math.max(this.min, num)));\n }\n\n @property()\n get value() {\n return this.#value;\n }\n\n set value(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#value;\n this.#value = rawVal;\n this._setFormValue(rawVal);\n this.requestUpdate('value', oldVal);\n }\n\n get valueAsNumber() {\n return parseFloat(this.#value);\n }\n\n /\n Enables range mode with two thumbs for selecting a value range\n /\n @property({ type: Boolean }) range = false;\n\n @property({ attribute: 'value-start' })\n get valueStart() {\n return this.#valueStart;\n }\n\n set valueStart(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#valueStart;\n this.#valueStart = rawVal;\n this._setFormValue(`${rawVal},${this.#valueEnd}`);\n this.requestUpdate('valueStart', oldVal);\n }\n\n @property({ attribute: 'value-end' })\n get valueEnd() {\n return this.#valueEnd;\n }\n\n set valueEnd(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#valueEnd;\n this.#valueEnd = rawVal;\n this._setFormValue(`${this.#valueStart},${rawVal}`);\n this.requestUpdate('valueEnd', oldVal);\n }\n\n /\n Represents the minimum permitted value\n /\n @property({ type: Number }) min = 0;\n\n /\n Represents the maximum permitted value\n /\n @property({ type: Number }) max = 100;\n\n /\n Represents the stepping interval, used both for user interface and validation purposes\n /\n @property({ type: Number }) step = 0;\n\n /\n Shows the min and max values beneath the slider\n /\n @property({ type: Boolean, attribute: 'show-min-max' }) showMinMax = false;\n\n get #range() {\n return this.max - this.min;\n }\n\n get #progressColor() {\n return this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n }\n\n #isVisible(flag: ThumbFlag): boolean {\n return this.#thumbInputState.get(flag)!.visible && !this.disabled;\n }\n\n get progress() {\n return this.#computeProgress(this.#value);\n }\n\n get progressStart() {\n return this.#computeProgress(this.#valueStart);\n }\n\n get progressEnd() {\n return this.#computeProgress(this.#valueEnd);\n }\n\n #computeProgress(rawValue: string): number {\n if (this.#range === 0) {\n return 0;\n }\n const num = parseFloat(rawValue);\n return isNaN(num) ? 0 : parseFloat((((num - this.min) / this.#range) 100).toFixed(4));\n }\n\n #singleTrackBackground(progress: number): string {\n const c = this.#progressColor;\n const stop = ZuiSlider.#thumbPositionCSS(progress);\n return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), ${c} var(--zui-slider-thumb-size), ${c} ${stop}, var(--zui-gray-200) ${stop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n }\n\n #rangeTrackBackground(progressStart: number, progressEnd: number): string {\n const c = this.#progressColor;\n const startStop = ZuiSlider.#thumbPositionCSS(progressStart);\n const endStop = ZuiSlider.#thumbPositionCSS(progressEnd);\n return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-gray-200) var(--zui-slider-thumb-size), var(--zui-gray-200) ${startStop}, ${c} ${startStop}, ${c} ${endStop}, var(--zui-gray-200) ${endStop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n }\n\n render() {\n return html`${this.range ? this.#renderRange() : this.#renderSingle()}${this.#renderMinMaxLabels()}`;\n }\n\n #renderSingle() {\n const progress = this.progress;\n return html`\n <div class=\"single-wrapper\">\n <input\n aria-label=\"Slider value\"\n style=${styleMap({ background: this.#singleTrackBackground(progress) })}\n type=\"range\"\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n .value=\"${this.#value}\"\n ?disabled=\"${this.disabled \|\| this.readOnly}\"\n @input=\"${this.#onInput}\"\n @change=\"${this.#onChange}\"\n @pointerenter=\"${this.#h.thumb.show}\"\n @pointerleave=\"${this.#h.thumb.hide}\"\n @focus=\"${this.#h.thumb.show}\"\n @blur=\"${this.#h.thumb.hide}\"\n />\n ${this.#renderStepDots()}\n ${this.#renderFloatingInput(\n this.#value,\n this.#onThumbFloatingInput,\n this.#onThumbFloatingChange,\n 'thumb',\n this.#isVisible('thumb'),\n progress\n )}\n </div>\n `;\n }\n\n #renderRange() {\n const progressStart = this.progressStart;\n const progressEnd = this.progressEnd;\n return html`\n <div\n class=\"range-wrapper\"\n style=${styleMap({ background: this.#rangeTrackBackground(progressStart, progressEnd) })}\n >\n ${this.#renderStepDots()}${this.#renderRangeInput('start')}\n ${this.#renderFloatingInput(\n this.#valueStart,\n this.#onStartThumbFloatingInput,\n this.#onStartThumbFloatingChange,\n 'startThumb',\n this.#isVisible('startThumb'),\n progressStart\n )}\n ${this.#renderRangeInput('end')}\n ${this.#renderFloatingInput(\n this.#valueEnd,\n this.#onEndThumbFloatingInput,\n this.#onEndThumbFloatingChange,\n 'endThumb',\n this.#isVisible('endThumb'),\n progressEnd\n )}\n </div>\n `;\n }\n\n #renderRangeInput(which: 'start' \| 'end') {\n const flag: ThumbFlag = which === 'start' ? 'startThumb' : 'endThumb';\n const val = which === 'start' ? this.#valueStart : this.#valueEnd;\n const onInput = which === 'start' ? this.#onRangeStartInput : this.#onRangeEndInput;\n const h = this.#h[flag];\n // live() is required: when #onRangeInput snaps the DOM value back via direct input.value\n // assignment (drag past the other thumb), there is no state change → no re-render. live()\n // forces Lit to re-read the current DOM value and re-sync it on every render.\n return html`\n <input\n aria-label=\"${which === 'start' ? 'Range start' : 'Range end'}\"\n class=\"range-${which}\"\n type=\"range\"\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n .value=\"${live(val)}\"\n ?disabled=\"${this.disabled \|\| this.readOnly}\"\n @input=\"${onInput}\"\n @change=\"${this.#onRangeChange}\"\n @pointerenter=\"${h.show}\"\n @pointerleave=\"${h.hide}\"\n @focus=\"${h.show}\"\n @blur=\"${h.hide}\"\n />\n `;\n }\n\n #renderFloatingInput(\n val: string,\n onInput: (e: Event) => void,\n onFloatingChange: (e: Event) => void,\n flag: ThumbFlag,\n visible: boolean,\n progress: number\n ) {\n const h = this.#h[flag];\n // live() is required on the number input: when the debounced setter clamps a value to the\n // same string it already holds (e.g. typing 150 when max=100 clamps back to '100'), no\n // reactive property change occurs and Lit skips the DOM update. live() forces a re-read.\n return html`\n <div\n class=${classMap({ 'thumb-input': true, 'thumb-input--visible': visible })}\n style=${styleMap({ left: ZuiSlider.#thumbPositionCSS(progress) })}\n @pointerenter=\"${h.show}\"\n @pointerleave=\"${h.hide}\"\n >\n <input\n aria-label=\"${flag === 'startThumb'\n ? 'Range start value'\n : flag === 'endThumb'\n ? 'Range end value'\n : 'Slider value'}\"\n type=\"number\"\n .value=\"${live(val)}\"\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n ?disabled=\"${this.disabled}\"\n ?readonly=\"${this.readOnly}\"\n @input=\"${onInput}\"\n @change=\"${onFloatingChange}\"\n @focus=\"${h.focus}\"\n @blur=\"${h.blur}\"\n />\n </div>\n `;\n }\n\n #renderStepDots() {\n if (this.step <= 0 \|\| this.#range === 0) {\n return nothing;\n }\n const count = Math.round(this.#range / this.step);\n if (count > 100) {\n return nothing;\n }\n const dots: TemplateResult[] = [];\n for (let i = 0; i <= count; i++) {\n let left: string;\n if (i === 0) {\n left = 'var(--zui-slider-thumb-size)';\n } else if (i === count) {\n left = 'calc(100% - var(--zui-slider-thumb-size))';\n } else {\n const pos = parseFloat((((i * this.step) / this.#range) * 100).toFixed(4));\n left = ZuiSlider.#thumbPositionCSS(pos);\n }\n dots.push(html`<span class=\"step-dot\" style=\"left: ${left}\"></span>`);\n }\n return html`<div class=\"step-dots\">${dots}</div>`;\n }\n\n #renderMinMaxLabels() {\n if (!this.showMinMax) {\n return nothing;\n }\n return html`\n <div class=\"min-max-labels\">\n <span class=\"min-max-label\">${this.min}</span>\n <span class=\"min-max-label\">${this.max}</span>\n </div>\n `;\n }\n\n #onInput(e: Event) {\n if (this.readOnly) {\n return;\n }\n this.value = (e.target as HTMLInputElement).value;\n }\n\n #onChange() {\n this.dispatchEvent(new CustomEvent('change', { detail: this.#value, bubbles: true }));\n }\n\n #processFloatingValue(raw: number): string {\n const stepDecimals = this.step > 0 ? (String(this.step).split('.')[1] ?? '').length : 0;\n const stepped = this.step > 0 ? Math.round((raw - this.min) / this.step) * this.step + this.min : raw;\n const clamped = Math.min(this.max, Math.max(this.min, stepped));\n return stepDecimals > 0 ? clamped.toFixed(stepDecimals) : String(Math.round(clamped));\n }\n\n #makeFloatingChange(flag: ThumbFlag, setter: (val: string) => void, dispatch: () => void) {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (input.value === '') {\n return;\n }\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.debounceTimer);\n entry.debounceTimer = undefined;\n setter(this.#processFloatingValue(parseFloat(input.value)));\n dispatch();\n };\n }\n\n #onFloatingInput(flag: ThumbFlag, setter: (val: string) => void) {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (input.value === '') {\n return;\n }\n const raw = parseFloat(input.value);\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.debounceTimer);\n entry.debounceTimer = setTimeout(() => setter(this.#processFloatingValue(raw)), 300);\n };\n }\n\n #onRangeInput(which: 'start' \| 'end') {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (which === 'start') {\n if (parseFloat(input.value) >= parseFloat(this.#valueEnd)) {\n input.value = this.#valueStart;\n return;\n }\n this.valueStart = input.value;\n } else {\n if (parseFloat(input.value) <= parseFloat(this.#valueStart)) {\n input.value = this.#valueEnd;\n return;\n }\n this.valueEnd = input.value;\n }\n };\n }\n\n #onRangeChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: { valueStart: this.#valueStart, valueEnd: this.#valueEnd },\n bubbles: true,\n })\n );\n }\n\n #showThumbInput(flag: ThumbFlag) {\n if (this.disabled) {\n return;\n }\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.timer);\n entry.timer = undefined;\n entry.visible = true;\n this.requestUpdate();\n }\n\n #scheduleHideThumbInput(flag: ThumbFlag) {\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.timer);\n entry.timer = setTimeout(() => {\n if (!entry.focused) {\n entry.visible = false;\n this.requestUpdate();\n }\n }, 100);\n }\n\n #focusFloatingInput(flag: ThumbFlag) {\n if (this.disabled) {\n return;\n }\n this.#showThumbInput(flag);\n this.#thumbInputState.get(flag)!.focused = true;\n }\n\n #blurFloatingInput(flag: ThumbFlag) {\n const entry = this.#thumbInputState.get(flag)!;\n entry.focused = false;\n this.#scheduleHideThumbInput(flag);\n }\n\n // Maps a 0–100 progress value to a CSS multiplier for --zui-slider-thumb-size so that\n // `progress% + thumbSize * offset` lands on the thumb center within the inset wrapper.\n // At 0%: offset=1.5 → thumbSize1.5 (thumb center at min). At 100%: offset=-1.5 → -thumbSize1.5 (thumb center at max).\n static #thumbCenterOffset(progress: number): number {\n return 1.5 - (3 * progress) / 100;\n }\n\n static #thumbPositionCSS(progress: number): string {\n return `calc(${progress}% + var(--zui-slider-thumb-size) * ${ZuiSlider.#thumbCenterOffset(progress)})`;\n }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-slider': ZuiSlider;\n }\n}\n"]}
1	+ {"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,OAAO,SAAU,SAAQ,wBAAwB;IAAvD;;QACE,kBAAa,GAAW,IAAI,CAAC;QAC7B,uBAAkB,GAAW,GAAG,CAAC;QACjC,qBAAgB,GAAW,KAAK,CAAC;QAEjC,WAAM,GAAW,IAAI,CAAC;QACtB,gBAAW,GAAW,GAAG,CAAC;QAC1B,cAAS,GAAW,KAAK,CAAC;QAE1B,qBAAgB,GAAG,IAAI,GAAG,CAQxB;YACA,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;YAC7C,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;YAClD,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;SACjD,CAAC,CAAC;QAEH,4FAA4F;QAC5F,0BAAqB,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;QAChF,+BAA0B,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;QAC/F,6BAAwB,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC;QAEzF,yGAAyG;QACzG,2BAAsB,GAAG,IAAI,CAAC,mBAAmB,CAC/C,OAAO,EACP,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EACvB,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CACvB,CAAC;QACF,gCAA2B,GAAG,IAAI,CAAC,mBAAmB,CACpD,YAAY,EACZ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,EAC5B,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAC5B,CAAC;QACF,8BAAyB,GAAG,IAAI,CAAC,mBAAmB,CAClD,UAAU,EACV,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAC1B,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAC5B,CAAC;QAEF,mCAAmC;QACnC,uBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACjD,qBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7C,kFAAkF;QAClF,OAAE,GAAmG;YACnG,KAAK,EAAE;gBACL,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;gBACzC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC;gBACjD,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC;gBAC9C,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC;aAC7C;YACD,UAAU,EAAE;gBACV,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC;gBAC9C,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,CAAC,YAAY,CAAC;gBACtD,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC;gBACnD,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC;aAClD;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC;gBAC5C,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,CAAC,UAAU,CAAC;gBACpD,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC;gBACjD,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC;aAChD;SACF,CAAC;QAwIF;;WAEG;QAC0B,UAAK,GAAG,KAAK,CAAC;QA4B3C;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;QAEpC;;WAEG;QACyB,QAAG,GAAG,GAAG,CAAC;QAEtC;;WAEG;QACyB,SAAI,GAAG,CAAC,CAAC;QAErC;;WAEG;QACqD,eAAU,GAAG,KAAK,CAAC;IA0V7E,CAAC;IAvlBC,aAAa,CAAgB;IAC7B,kBAAkB,CAAe;IACjC,gBAAgB,CAAiB;IAEjC,MAAM,CAAgB;IACtB,WAAW,CAAe;IAC1B,SAAS,CAAiB;IAE1B,gBAAgB,CAYb;IAEH,4FAA4F;IAC5F,qBAAqB,CAA2D;IAChF,0BAA0B,CAAqE;IAC/F,wBAAwB,CAAiE;IAEzF,yGAAyG;IACzG,sBAAsB,CAIpB;IACF,2BAA2B,CAIzB;IACF,yBAAyB,CAIvB;IAEF,mCAAmC;IACnC,kBAAkB,CAA+B;IACjD,gBAAgB,CAA6B;IAE7C,kFAAkF;IAClF,EAAE,CAmBA;IAEF,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;gBACnD,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC;gBACpC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC;gBAChC,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC,KAAK,CAAC;gBAC3C,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACvC,IAAI,CAAC,aAAa,CAAC,GAAG,UAAU,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;YAC9D,CAAC;iBAAM,CAAC;gBACN,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;gBAC1B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC;gBACjC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAClC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,gFAAgF;QAChF,uFAAuF;QACvF,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAES,OAAO,CAAC,OAAkC;QAClD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7C,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YAC7C,4FAA4F;YAC5F,uFAAuF;YACvF,+FAA+F;YAC/F,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;gBACnD,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC;gBAClC,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC;gBAC9B,IAAI,QAAQ,KAAK,IAAI,CAAC,WAAW,IAAI,MAAM,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;oBAC/D,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;oBAC5B,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;oBACxB,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,CAAC;gBACD,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;YAC9D,CAAC;iBAAM,CAAC;gBACN,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC;gBAC3C,IAAI,QAAQ,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;oBAC7B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;oBACvB,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,CAAC;gBACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;IACH,CAAC;IAED,YAAY;QACV,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAmB,qBAAqB,CAAE,CAAC;IAClF,CAAC;IAED,YAAY;QACV,MAAM,MAAM,GAAG,IAAI,CAAC,UAAW,CAAC,gBAAgB,CAAmB,qBAAqB,CAAC,CAAC;QAC1F,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IAED,IAAc,qBAAqB;QACjC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IAC5E,CAAC;IAES,iBAAiB;QACzB,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,wFAAwF;QACxF,0FAA0F;QAC1F,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC;YAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QAClC,CAAC;IACH,CAAC;IAED,wBAAwB;QACtB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,EAAE,CAAC;YACnD,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC1B,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;YAClC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;YACxB,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;YAChC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;YACtB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAED;;;;OAIG;IACH,aAAa,CAAC,MAAc;QAC1B,IAAI,MAAM,KAAK,EAAE,EAAE,CAAC;YAClB,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;QAC/B,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;YACf,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7D,CAAC;IAGD,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,MAAc;QACtB,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3B,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,IAAI,aAAa;QACf,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAQD,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,UAAU,CAAC,MAAc;QAC3B,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;QAChC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IAGD,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,IAAI,QAAQ,CAAC,MAAc;QACzB,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,MAAM,EAAE,CAAC,CAAC;QACpD,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACzC,CAAC;IAsBD,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;IAC7B,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAC/D,CAAC;IAED,UAAU,CAAC,IAAe;QACxB,OAAO,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IACpE,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACjD,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/C,CAAC;IAED,gBAAgB,CAAC,QAAgB;QAC/B,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACtB,OAAO,CAAC,CAAC;QACX,CAAC;QACD,MAAM,GAAG,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QACjC,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1F,CAAC;IAED,sBAAsB,CAAC,QAAgB;QACrC,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC;QAC9B,MAAM,IAAI,GAAG,EAAS,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,uEAAuE,CAAC,kCAAkC,CAAC,IAAI,IAAI,yBAAyB,IAAI,yHAAyH,CAAC;IACnR,CAAC;IAED,qBAAqB,CAAC,aAAqB,EAAE,WAAmB;QAC9D,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC;QAC9B,MAAM,SAAS,GAAG,EAAS,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC;QAC7D,MAAM,OAAO,GAAG,EAAS,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;QACzD,OAAO,6IAA6I,SAAS,KAAK,CAAC,IAAI,SAAS,KAAK,CAAC,IAAI,OAAO,yBAAyB,OAAO,yHAAyH,CAAC;IAC7V,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC;IACvG,CAAC;IAED,aAAa;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,OAAO,IAAI,CAAA;;;;kBAIG,QAAQ,CAAC,EAAE,uBAAuB,EAAE,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,CAAC;;kBAE5E,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;kBAChB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;mBACf,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;oBACtC,IAAI,CAAC,MAAM;uBACR,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;oBACjC,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,SAAS;2BACR,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;2BAClB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;oBACzB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;mBACnB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;;UAE3B,IAAI,CAAC,oBAAoB,CACzB,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,qBAAqB,EAC1B,IAAI,CAAC,sBAAsB,EAC3B,OAAO,EACP,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EACxB,QAAQ,CACT;UACC,IAAI,CAAC,eAAe,EAAE;;KAE3B,CAAC;IACJ,CAAC;IAED,YAAY;QACV,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACzC,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;UACvF,IAAI,CAAC,oBAAoB,CACzB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,0BAA0B,EAC/B,IAAI,CAAC,2BAA2B,EAChC,YAAY,EACZ,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,EAC7B,aAAa,CACd;UACC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;UAC7B,IAAI,CAAC,oBAAoB,CACzB,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,wBAAwB,EAC7B,IAAI,CAAC,yBAAyB,EAC9B,UAAU,EACV,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAC3B,WAAW,CACZ;UACC,IAAI,CAAC,eAAe,EAAE;;KAE3B,CAAC;IACJ,CAAC;IAED,iBAAiB,CAAC,KAAsB,EAAE,OAAgB;QACxD,MAAM,IAAI,GAAc,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;QACtE,MAAM,GAAG,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QAClE,MAAM,OAAO,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;QACpF,MAAM,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QACxB,yFAAyF;QACzF,0FAA0F;QAC1F,8EAA8E;QAC9E,OAAO,IAAI,CAAA;;sBAEO,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW;uBAC9C,KAAK;;gBAEZ,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,uBAAuB,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO;gBAClE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;gBAChB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;iBACf,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;kBACtC,IAAI,CAAC,GAAG,CAAC;qBACN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;kBACjC,OAAO;mBACN,IAAI,CAAC,cAAc;yBACb,CAAC,CAAC,IAAI;yBACN,CAAC,CAAC,IAAI;kBACb,CAAC,CAAC,IAAI;iBACP,CAAC,CAAC,IAAI;;KAElB,CAAC;IACJ,CAAC;IAED,oBAAoB,CAClB,GAAW,EACX,OAA2B,EAC3B,gBAAoC,EACpC,IAAe,EACf,OAAgB,EAChB,QAAgB;QAEhB,MAAM,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QACxB,0FAA0F;QAC1F,uFAAuF;QACvF,yFAAyF;QACzF,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,CAAC;gBAClE,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAS,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC;yBAChD,CAAC,CAAC,IAAI;yBACN,CAAC,CAAC,IAAI;;;wBAGP,IAAI,KAAK,YAAY;YACjC,CAAC,CAAC,mBAAmB;YACrB,CAAC,CAAC,IAAI,KAAK,UAAU;gBACrB,CAAC,CAAC,iBAAiB;gBACnB,CAAC,CAAC,cAAc;;oBAER,IAAI,CAAC,GAAG,CAAC;kBACX,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;kBAChB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;mBACf,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;uBACnC,IAAI,CAAC,QAAQ;uBACb,IAAI,CAAC,QAAQ;oBAChB,OAAO;qBACN,gBAAgB;oBACjB,CAAC,CAAC,KAAK;mBACR,CAAC,CAAC,IAAI;;;KAGpB,CAAC;IACJ,CAAC;IAED,eAAe;QACb,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxC,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAClD,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YAChB,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,MAAM,IAAI,GAAqB,EAAE,CAAC;QAClC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YAChC,IAAI,IAAY,CAAC;YACjB,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBACZ,IAAI,GAAG,8BAA8B,CAAC;YACxC,CAAC;iBAAM,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;gBACvB,IAAI,GAAG,2CAA2C,CAAC;YACrD,CAAC;iBAAM,CAAC;gBACN,MAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC3E,IAAI,GAAG,EAAS,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;YAC1C,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAuC,IAAI,WAAW,CAAC,CAAC;QACxE,CAAC;QACD,OAAO,IAAI,CAAA,0BAA0B,IAAI,QAAQ,CAAC;IACpD,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,OAAO,IAAI,CAAA;;sCAEuB,IAAI,CAAC,GAAG;sCACR,IAAI,CAAC,GAAG;;KAEzC,CAAC;IACJ,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;IACpD,CAAC;IAED,SAAS;QACP,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,qBAAqB,CAAC,GAAW;QAC/B,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACxF,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QACtG,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;QAChE,OAAO,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,mBAAmB,CAAC,IAAe,EAAE,MAA6B,EAAE,QAAoB;QACtF,OAAO,CAAC,CAAQ,EAAE,EAAE;YAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;YAC/C,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;YAClC,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;YAChC,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC5D,QAAQ,EAAE,CAAC;QACb,CAAC,CAAC;IACJ,CAAC;IAED,gBAAgB,CAAC,IAAe,EAAE,MAA6B;QAC7D,OAAO,CAAC,CAAQ,EAAE,EAAE;YAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACpC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;YAC/C,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;YAClC,KAAK,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACvF,CAAC,CAAC;IACJ,CAAC;IAED,aAAa,CAAC,KAAsB;QAClC,OAAO,CAAC,CAAQ,EAAE,EAAE;YAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;gBACtB,IAAI,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;oBAC1D,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;oBAC/B,OAAO;gBACT,CAAC;gBACD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;YAChC,CAAC;iBAAM,CAAC;gBACN,IAAI,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;oBAC5D,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;oBAC7B,OAAO;gBACT,CAAC;gBACD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE;YAClE,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC;IAED,eAAe,CAAC,IAAe;QAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;QAC/C,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1B,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;QACxB,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,uBAAuB,CAAC,IAAe;QACrC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;QAC/C,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1B,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACnB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED,mBAAmB,CAAC,IAAe;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,OAAO,GAAG,IAAI,CAAC;IAClD,CAAC;IAED,kBAAkB,CAAC,IAAe;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;QAC/C,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAED,sFAAsF;IACtF,uFAAuF;IACvF,wHAAwH;IACxH,MAAM,CAAC,kBAAkB,CAAC,QAAgB;QACxC,OAAO,GAAG,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IACpC,CAAC;IAED,MAAM,CAAC,iBAAiB,CAAC,QAAgB;QACvC,OAAO,QAAQ,QAAQ,sCAAsC,EAAS,CAAC,kBAAkB,CAAC,QAAQ,CAAC,GAAG,CAAC;IACzG,CAAC;CACF;;AA3ZC;IADC,QAAQ,EAAE;sCAGV;AAiB4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAe;AAG3C;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;2CAGtC;AAWD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;yCAGpC;AAa2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAS;AAKR;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAW;AAKV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AAKmB;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;6CAAoB;AA4V7E,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html, nothing, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\ntype ThumbFlag = 'thumb' \| 'startThumb' \| 'endThumb';\n\n/*\n A range form control for choosing values along a slider.\n * @element zui-slider\n \n @attr {string \| null} [name=null] - The name of this element that is associated with form submission\n * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @attr {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @attr {number} [value-start=0] - Represents the start (lower) value in range mode\n * @attr {number} [value-end=100] - Represents the end (upper) value in range mode\n * @attr {number} [min=0] - Represents the minimum permitted value\n * @attr {number} [max=100] - Represents the maximum permitted value\n * @attr {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @attr {boolean} [show-min-max=false] - Shows the min and max values beneath the slider\n \n @prop {string \| null} [name=null] - The name of this element that is associated with form submission\n * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value as a number. Invalid or non-numeric values are clamped to min; empty string (representing an in-progress edit) returns NaN\n * @prop {string} [value='50'] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line (single mode)\n * @prop {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @prop {string} [valueStart='0'] - Represents the start (lower) value in range mode\n * @prop {string} [valueEnd='100'] - Represents the end (upper) value in range mode\n * @prop {number} [progressStart=0] - Determines visual placement of the start thumb in range mode\n * @prop {number} [progressEnd=100] - Determines visual placement of the end thumb in range mode\n * @prop {number} [min=0] - Represents the minimum permitted value\n * @prop {number} [max=100] - Represents the maximum permitted value\n * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider\n \n @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each slider thumb\n \n @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }\n /\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n #defaultValue: string = '50';\n #defaultValueStart: string = '0';\n #defaultValueEnd: string = '100';\n\n #value: string = '50';\n #valueStart: string = '0';\n #valueEnd: string = '100';\n\n #thumbInputState = new Map<\n ThumbFlag,\n {\n visible: boolean;\n focused: boolean;\n timer?: ReturnType<typeof setTimeout>;\n debounceTimer?: ReturnType<typeof setTimeout>;\n }\n >([\n ['thumb', { visible: false, focused: false }],\n ['startThumb', { visible: false, focused: false }],\n ['endThumb', { visible: false, focused: false }],\n ]);\n\n // Pre-bound floating input handlers cached to avoid new function references on every render\n #onThumbFloatingInput = this.#onFloatingInput('thumb', (v) => (this.value = v));\n #onStartThumbFloatingInput = this.#onFloatingInput('startThumb', (v) => (this.valueStart = v));\n #onEndThumbFloatingInput = this.#onFloatingInput('endThumb', (v) => (this.valueEnd = v));\n\n // Cached floating input change handlers — flush debounce and dispatch immediately on commit (Enter/blur)\n #onThumbFloatingChange = this.#makeFloatingChange(\n 'thumb',\n (v) => (this.value = v),\n () => this.#onChange()\n );\n #onStartThumbFloatingChange = this.#makeFloatingChange(\n 'startThumb',\n (v) => (this.valueStart = v),\n () => this.#onRangeChange()\n );\n #onEndThumbFloatingChange = this.#makeFloatingChange(\n 'endThumb',\n (v) => (this.valueEnd = v),\n () => this.#onRangeChange()\n );\n\n // Cached range drag input handlers\n #onRangeStartInput = this.#onRangeInput('start');\n #onRangeEndInput = this.#onRangeInput('end');\n\n // Cached pointer/focus handlers per thumb — prevents new closures on every render\n #h: Record<ThumbFlag, { show: () => void; hide: () => void; focus: () => void; blur: () => void }> = {\n thumb: {\n show: () => this.#showThumbInput('thumb'),\n hide: () => this.#scheduleHideThumbInput('thumb'),\n focus: () => this.#focusFloatingInput('thumb'),\n blur: () => this.#blurFloatingInput('thumb'),\n },\n startThumb: {\n show: () => this.#showThumbInput('startThumb'),\n hide: () => this.#scheduleHideThumbInput('startThumb'),\n focus: () => this.#focusFloatingInput('startThumb'),\n blur: () => this.#blurFloatingInput('startThumb'),\n },\n endThumb: {\n show: () => this.#showThumbInput('endThumb'),\n hide: () => this.#scheduleHideThumbInput('endThumb'),\n focus: () => this.#focusFloatingInput('endThumb'),\n blur: () => this.#blurFloatingInput('endThumb'),\n },\n };\n\n static get styles() {\n return [super.styles, style];\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.updateComplete.then(() => {\n if (this.range) {\n const [startInput, endInput] = this.#rangeInputs();\n this.#valueStart = startInput.value;\n this.#valueEnd = endInput.value;\n this.#defaultValueStart = startInput.value;\n this.#defaultValueEnd = endInput.value;\n this._setFormValue(`${startInput.value},${endInput.value}`);\n } else {\n const input = this.#singleInput();\n this.#value = input.value;\n this.#defaultValue = input.value;\n this._setFormValue(input.value);\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#clearAllThumbInputState();\n // Schedule a re-render so the cleared visibility state is reflected in the DOM.\n // Lit defers this render until the element reconnects if it is currently disconnected.\n this.requestUpdate();\n }\n\n protected updated(changed: Map<PropertyKey, unknown>) {\n if (changed.has('disabled') && this.disabled) {\n this.#clearAllThumbInputState();\n }\n if (changed.has('min') \|\| changed.has('max')) {\n // The native inputs have already clamped (and step-snapped) their values to the new bounds.\n // Read them back and sync internal state + form value. If the value changed, request a\n // re-render so the floating input (which binds to #value/#valueStart/#valueEnd) stays in sync.\n if (this.range) {\n const [startInput, endInput] = this.#rangeInputs();\n const newStart = startInput.value;\n const newEnd = endInput.value;\n if (newStart !== this.#valueStart \|\| newEnd !== this.#valueEnd) {\n this.#valueStart = newStart;\n this.#valueEnd = newEnd;\n this.requestUpdate();\n }\n this._setFormValue(`${this.#valueStart},${this.#valueEnd}`);\n } else {\n const newValue = this.#singleInput().value;\n if (newValue !== this.#value) {\n this.#value = newValue;\n this.requestUpdate();\n }\n this._setFormValue(this.#value);\n }\n }\n }\n\n #singleInput(): HTMLInputElement {\n return this.shadowRoot!.querySelector<HTMLInputElement>('input[type=\"range\"]')!;\n }\n\n #rangeInputs(): [HTMLInputElement, HTMLInputElement] {\n const inputs = this.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type=\"range\"]');\n return [inputs[0], inputs[1]];\n }\n\n protected get _focusControlSelector() {\n return 'input';\n }\n\n protected get _formValue() {\n return this.range ? `${this.#valueStart},${this.#valueEnd}` : this.#value;\n }\n\n protected formResetCallback() {\n this.#clearAllThumbInputState();\n // Always request a re-render so the cleared thumb visibility is reflected even when the\n // reset value equals the current value (the named setter requestUpdate would be a no-op).\n this.requestUpdate();\n if (this.range) {\n this.valueStart = this.#defaultValueStart;\n this.valueEnd = this.#defaultValueEnd;\n } else {\n this.value = this.#defaultValue;\n }\n }\n\n #clearAllThumbInputState() {\n for (const entry of this.#thumbInputState.values()) {\n clearTimeout(entry.timer);\n clearTimeout(entry.debounceTimer);\n entry.timer = undefined;\n entry.debounceTimer = undefined;\n entry.visible = false;\n entry.focused = false;\n }\n }\n\n /\n Clamps a raw string value to the current [min, max] range.\n * Empty string is passed through unchanged (represents an in-progress floating input edit).\n * Non-numeric strings are passed through unchanged.\n /\n #clampToRange(rawVal: string): string {\n if (rawVal === '') {\n return rawVal;\n }\n const num = parseFloat(rawVal);\n if (isNaN(num)) {\n return rawVal;\n }\n return String(Math.min(this.max, Math.max(this.min, num)));\n }\n\n @property()\n get value() {\n return this.#value;\n }\n\n set value(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#value;\n this.#value = rawVal;\n this._setFormValue(rawVal);\n this.requestUpdate('value', oldVal);\n }\n\n get valueAsNumber() {\n return parseFloat(this.#value);\n }\n\n /\n Enables range mode with two thumbs for selecting a value range\n /\n @property({ type: Boolean }) range = false;\n\n @property({ attribute: 'value-start' })\n get valueStart() {\n return this.#valueStart;\n }\n\n set valueStart(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#valueStart;\n this.#valueStart = rawVal;\n this._setFormValue(`${rawVal},${this.#valueEnd}`);\n this.requestUpdate('valueStart', oldVal);\n }\n\n @property({ attribute: 'value-end' })\n get valueEnd() {\n return this.#valueEnd;\n }\n\n set valueEnd(rawVal: string) {\n rawVal = this.#clampToRange(rawVal);\n const oldVal = this.#valueEnd;\n this.#valueEnd = rawVal;\n this._setFormValue(`${this.#valueStart},${rawVal}`);\n this.requestUpdate('valueEnd', oldVal);\n }\n\n /\n Represents the minimum permitted value\n /\n @property({ type: Number }) min = 0;\n\n /\n Represents the maximum permitted value\n /\n @property({ type: Number }) max = 100;\n\n /\n Represents the stepping interval, used both for user interface and validation purposes\n /\n @property({ type: Number }) step = 0;\n\n /\n Shows the min and max values beneath the slider\n /\n @property({ type: Boolean, attribute: 'show-min-max' }) showMinMax = false;\n\n get #range() {\n return this.max - this.min;\n }\n\n get #progressColor() {\n return this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n }\n\n #isVisible(flag: ThumbFlag): boolean {\n return this.#thumbInputState.get(flag)!.visible && !this.disabled;\n }\n\n get progress() {\n return this.#computeProgress(this.#value);\n }\n\n get progressStart() {\n return this.#computeProgress(this.#valueStart);\n }\n\n get progressEnd() {\n return this.#computeProgress(this.#valueEnd);\n }\n\n #computeProgress(rawValue: string): number {\n if (this.#range === 0) {\n return 0;\n }\n const num = parseFloat(rawValue);\n return isNaN(num) ? 0 : parseFloat((((num - this.min) / this.#range) 100).toFixed(4));\n }\n\n #singleTrackBackground(progress: number): string {\n const c = this.#progressColor;\n const stop = ZuiSlider.#thumbPositionCSS(progress);\n return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), ${c} var(--zui-slider-thumb-size), ${c} ${stop}, var(--zui-gray-200) ${stop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n }\n\n #rangeTrackBackground(progressStart: number, progressEnd: number): string {\n const c = this.#progressColor;\n const startStop = ZuiSlider.#thumbPositionCSS(progressStart);\n const endStop = ZuiSlider.#thumbPositionCSS(progressEnd);\n return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-gray-200) var(--zui-slider-thumb-size), var(--zui-gray-200) ${startStop}, ${c} ${startStop}, ${c} ${endStop}, var(--zui-gray-200) ${endStop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n }\n\n render() {\n return html`${this.range ? this.#renderRange() : this.#renderSingle()}${this.#renderMinMaxLabels()}`;\n }\n\n #renderSingle() {\n const progress = this.progress;\n return html`\n <div class=\"single-wrapper\">\n <input\n aria-label=\"Slider value\"\n style=${styleMap({ '--zui-slider-track-bg': this.#singleTrackBackground(progress) })}\n type=\"range\"\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n .value=\"${this.#value}\"\n ?disabled=\"${this.disabled \|\| this.readOnly}\"\n @input=\"${this.#onInput}\"\n @change=\"${this.#onChange}\"\n @pointerenter=\"${this.#h.thumb.show}\"\n @pointerleave=\"${this.#h.thumb.hide}\"\n @focus=\"${this.#h.thumb.show}\"\n @blur=\"${this.#h.thumb.hide}\"\n />\n ${this.#renderFloatingInput(\n this.#value,\n this.#onThumbFloatingInput,\n this.#onThumbFloatingChange,\n 'thumb',\n this.#isVisible('thumb'),\n progress\n )}\n ${this.#renderStepDots()}\n </div>\n `;\n }\n\n #renderRange() {\n const progressStart = this.progressStart;\n const progressEnd = this.progressEnd;\n return html`\n <div class=\"range-wrapper\">\n ${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}\n ${this.#renderFloatingInput(\n this.#valueStart,\n this.#onStartThumbFloatingInput,\n this.#onStartThumbFloatingChange,\n 'startThumb',\n this.#isVisible('startThumb'),\n progressStart\n )}\n ${this.#renderRangeInput('end')}\n ${this.#renderFloatingInput(\n this.#valueEnd,\n this.#onEndThumbFloatingInput,\n this.#onEndThumbFloatingChange,\n 'endThumb',\n this.#isVisible('endThumb'),\n progressEnd\n )}\n ${this.#renderStepDots()}\n </div>\n `;\n }\n\n #renderRangeInput(which: 'start' \| 'end', trackBg?: string) {\n const flag: ThumbFlag = which === 'start' ? 'startThumb' : 'endThumb';\n const val = which === 'start' ? this.#valueStart : this.#valueEnd;\n const onInput = which === 'start' ? this.#onRangeStartInput : this.#onRangeEndInput;\n const h = this.#h[flag];\n // live() is required: when #onRangeInput snaps the DOM value back via direct input.value\n // assignment (drag past the other thumb), there is no state change → no re-render. live()\n // forces Lit to re-read the current DOM value and re-sync it on every render.\n return html`\n <input\n aria-label=\"${which === 'start' ? 'Range start' : 'Range end'}\"\n class=\"range-${which}\"\n type=\"range\"\n style=${trackBg ? styleMap({ '--zui-slider-track-bg': trackBg }) : nothing}\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n .value=\"${live(val)}\"\n ?disabled=\"${this.disabled \|\| this.readOnly}\"\n @input=\"${onInput}\"\n @change=\"${this.#onRangeChange}\"\n @pointerenter=\"${h.show}\"\n @pointerleave=\"${h.hide}\"\n @focus=\"${h.show}\"\n @blur=\"${h.hide}\"\n />\n `;\n }\n\n #renderFloatingInput(\n val: string,\n onInput: (e: Event) => void,\n onFloatingChange: (e: Event) => void,\n flag: ThumbFlag,\n visible: boolean,\n progress: number\n ) {\n const h = this.#h[flag];\n // live() is required on the number input: when the debounced setter clamps a value to the\n // same string it already holds (e.g. typing 150 when max=100 clamps back to '100'), no\n // reactive property change occurs and Lit skips the DOM update. live() forces a re-read.\n return html`\n <div\n class=${classMap({ 'thumb-input': true, 'thumb-input--visible': visible })}\n style=${styleMap({ left: ZuiSlider.#thumbPositionCSS(progress) })}\n @pointerenter=\"${h.show}\"\n @pointerleave=\"${h.hide}\"\n >\n <input\n aria-label=\"${flag === 'startThumb'\n ? 'Range start value'\n : flag === 'endThumb'\n ? 'Range end value'\n : 'Slider value'}\"\n type=\"number\"\n .value=\"${live(val)}\"\n .min=\"${String(this.min)}\"\n .max=\"${String(this.max)}\"\n .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n ?disabled=\"${this.disabled}\"\n ?readonly=\"${this.readOnly}\"\n @input=\"${onInput}\"\n @change=\"${onFloatingChange}\"\n @focus=\"${h.focus}\"\n @blur=\"${h.blur}\"\n />\n </div>\n `;\n }\n\n #renderStepDots() {\n if (this.step <= 0 \|\| this.#range === 0) {\n return nothing;\n }\n const count = Math.round(this.#range / this.step);\n if (count > 100) {\n return nothing;\n }\n const dots: TemplateResult[] = [];\n for (let i = 0; i <= count; i++) {\n let left: string;\n if (i === 0) {\n left = 'var(--zui-slider-thumb-size)';\n } else if (i === count) {\n left = 'calc(100% - var(--zui-slider-thumb-size))';\n } else {\n const pos = parseFloat((((i * this.step) / this.#range) * 100).toFixed(4));\n left = ZuiSlider.#thumbPositionCSS(pos);\n }\n dots.push(html`<span class=\"step-dot\" style=\"left: ${left}\"></span>`);\n }\n return html`<div class=\"step-dots\">${dots}</div>`;\n }\n\n #renderMinMaxLabels() {\n if (!this.showMinMax) {\n return nothing;\n }\n return html`\n <div class=\"min-max-labels\">\n <span class=\"min-max-label\">${this.min}</span>\n <span class=\"min-max-label\">${this.max}</span>\n </div>\n `;\n }\n\n #onInput(e: Event) {\n if (this.readOnly) {\n return;\n }\n this.value = (e.target as HTMLInputElement).value;\n }\n\n #onChange() {\n this.dispatchEvent(new CustomEvent('change', { detail: this.#value, bubbles: true }));\n }\n\n #processFloatingValue(raw: number): string {\n const stepDecimals = this.step > 0 ? (String(this.step).split('.')[1] ?? '').length : 0;\n const stepped = this.step > 0 ? Math.round((raw - this.min) / this.step) * this.step + this.min : raw;\n const clamped = Math.min(this.max, Math.max(this.min, stepped));\n return stepDecimals > 0 ? clamped.toFixed(stepDecimals) : String(Math.round(clamped));\n }\n\n #makeFloatingChange(flag: ThumbFlag, setter: (val: string) => void, dispatch: () => void) {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (input.value === '') {\n return;\n }\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.debounceTimer);\n entry.debounceTimer = undefined;\n setter(this.#processFloatingValue(parseFloat(input.value)));\n dispatch();\n };\n }\n\n #onFloatingInput(flag: ThumbFlag, setter: (val: string) => void) {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (input.value === '') {\n return;\n }\n const raw = parseFloat(input.value);\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.debounceTimer);\n entry.debounceTimer = setTimeout(() => setter(this.#processFloatingValue(raw)), 300);\n };\n }\n\n #onRangeInput(which: 'start' \| 'end') {\n return (e: Event) => {\n if (this.readOnly) {\n return;\n }\n const input = e.target as HTMLInputElement;\n if (which === 'start') {\n if (parseFloat(input.value) >= parseFloat(this.#valueEnd)) {\n input.value = this.#valueStart;\n return;\n }\n this.valueStart = input.value;\n } else {\n if (parseFloat(input.value) <= parseFloat(this.#valueStart)) {\n input.value = this.#valueEnd;\n return;\n }\n this.valueEnd = input.value;\n }\n };\n }\n\n #onRangeChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: { valueStart: this.#valueStart, valueEnd: this.#valueEnd },\n bubbles: true,\n })\n );\n }\n\n #showThumbInput(flag: ThumbFlag) {\n if (this.disabled) {\n return;\n }\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.timer);\n entry.timer = undefined;\n entry.visible = true;\n this.requestUpdate();\n }\n\n #scheduleHideThumbInput(flag: ThumbFlag) {\n const entry = this.#thumbInputState.get(flag)!;\n clearTimeout(entry.timer);\n entry.timer = setTimeout(() => {\n if (!entry.focused) {\n entry.visible = false;\n this.requestUpdate();\n }\n }, 100);\n }\n\n #focusFloatingInput(flag: ThumbFlag) {\n if (this.disabled) {\n return;\n }\n this.#showThumbInput(flag);\n this.#thumbInputState.get(flag)!.focused = true;\n }\n\n #blurFloatingInput(flag: ThumbFlag) {\n const entry = this.#thumbInputState.get(flag)!;\n entry.focused = false;\n this.#scheduleHideThumbInput(flag);\n }\n\n // Maps a 0–100 progress value to a CSS multiplier for --zui-slider-thumb-size so that\n // `progress% + thumbSize * offset` lands on the thumb center within the inset wrapper.\n // At 0%: offset=1.5 → thumbSize1.5 (thumb center at min). At 100%: offset=-1.5 → -thumbSize1.5 (thumb center at max).\n static #thumbCenterOffset(progress: number): number {\n return 1.5 - (3 * progress) / 100;\n }\n\n static #thumbPositionCSS(progress: number): string {\n return `calc(${progress}% + var(--zui-slider-thumb-size) * ${ZuiSlider.#thumbCenterOffset(progress)})`;\n }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-slider': ZuiSlider;\n }\n}\n"]}

package/lab.html CHANGED Viewed

@@ -46,9 +46,6 @@
   <h3>zui slider negative values</h3>
   <zui-slider id="negative" value="0" min="-50" max="50"></zui-slider>
-  <h3>zui slider decimals + custom thumb size</h3>
-  <zui-slider id="decimals" step="0.01" value="50.01"></zui-slider>
   <h3>zui slider no text</h3>
   <zui-slider id="text" no-text></zui-slider>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-slider",
-  "version": "4.4.0-pre.1",
+  "version": "4.4.0-pre.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -27,5 +27,5 @@
   "devDependencies": {
     "@zywave/zui-input": "^4.2.3"
   },
-  "gitHead": "db515ad35b2532f6e15d6414f6fdf132df38ee09"
+  "gitHead": "b282c7bb47d522516c83a59aba2d9b24800c5d88"
 }

package/src/css/zui-slider.fouc.scss CHANGED Viewed

@@ -6,7 +6,8 @@ zui-slider {
     position: relative;
     display: block;
-    padding: calc(var(--zui-slider-thumb-size) / 2) 0;
+    margin: 0 calc(var(--zui-slider-thumb-size) * -1);
+    padding: calc(var(--zui-slider-thumb-size) / 2 - #{rem(2)}) 0;
     // Track — filled to default 50% (CSS cannot read the value attribute for positioning)
     &::before {

package/src/zui-slider-css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css`:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border:0;border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:disabled{cursor:not-allowed}:host input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:active::-moz-range-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;
+export const style = css`:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block}:host .single-wrapper,:host .range-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:var(--zui-slider-thumb-size);margin:0;background:rgba(0,0,0,0);outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-moz-range-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-webkit-slider-thumb{transform:translateY(calc(-50% + 0.125rem));-webkit-appearance:none;appearance:none}:host input[type=range]::-moz-range-thumb{border:0}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper input[type=range]{position:absolute;pointer-events:none}:host .range-wrapper input[type=range]::-webkit-slider-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) input[type=range]:disabled{cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host([disabled]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host([disabled]) .step-dot{background-color:var(--zui-gray)}:host([disabled]) .range-wrapper{cursor:not-allowed}`;

package/src/zui-slider.scss CHANGED Viewed

@@ -1,19 +1,45 @@
 @use '@zywave/zui-sass-scripts' as *;
 @use '@zywave/zui-input/src/input' as *;
+@mixin on-thumb {
+  &::-webkit-slider-thumb {
+    @content;
+  }
+  &::-moz-range-thumb {
+    @content;
+  }
+}
+@mixin on-track {
+  &::-webkit-slider-runnable-track {
+    @content;
+  }
+  &::-moz-range-track {
+    @content;
+  }
+}
+@mixin thumb-bg($color) {
+  background: radial-gradient(circle, $color calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
+}
 :host {
   --zui-slider-thumb-size: #{rem(14)};
   --zui-slider-input-width: 8ch;
   $thumb-ring-color: rgba(120, 120, 140, 0.16);
+  $thumb-ring-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
+  $track-height: rem(4);
   position: relative;
   display: block;
-  padding: calc(var(--zui-slider-thumb-size) / 2) 0;
   // Single mode
-  .single-wrapper {
+  .single-wrapper,
+  .range-wrapper {
     position: relative;
     display: flex;
     height: var(--zui-slider-thumb-size);
@@ -25,98 +51,63 @@
   input[type='range'] {
     width: 100%;
-    height: rem(4);
+    height: var(--zui-slider-thumb-size);
     margin: 0;
-    background: var(--zui-gray-200);
-    border-radius: rem(3);
+    background: transparent;
     outline: none;
     cursor: grab;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    &::-webkit-slider-thumb {
+    @include on-track {
+      height: $track-height;
+      background: var(--zui-slider-track-bg);
+    }
+    @include on-thumb {
       width: calc(var(--zui-slider-thumb-size) * 3);
       height: calc(var(--zui-slider-thumb-size) * 3);
-      background: radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
+      @include thumb-bg(var(--zui-blue));
       border-radius: 50%;
       box-shadow: none;
+      cursor: grab;
       transition: background 100ms ease-out, box-shadow 100ms ease-out;
-      -webkit-appearance: none;
-      appearance: none;
       &:hover {
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
+        box-shadow: $thumb-ring-shadow;
       }
     }
+    &::-webkit-slider-thumb {
+      transform: translateY(calc(-50% + #{rem(2)}));
+      -webkit-appearance: none;
+      appearance: none;
+    }
     &::-moz-range-thumb {
-      width: calc(var(--zui-slider-thumb-size) * 3);
-      height: calc(var(--zui-slider-thumb-size) * 3);
-      background: radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
       border: 0;
-      border-radius: 50%;
-      box-shadow: none;
-      transition: background 100ms ease-out, box-shadow 100ms ease-out;
-      &:hover {
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
-      }
     }
     &:hover {
-      &::-webkit-slider-thumb {
-        background: radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-      }
-      &::-moz-range-thumb {
-        background: radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
+      @include on-thumb {
+        @include thumb-bg(var(--zui-blue-400));
       }
     }
     &:focus {
-      &::-webkit-slider-thumb {
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
-      }
-      &::-moz-range-thumb {
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
+      @include on-thumb {
+        box-shadow: $thumb-ring-shadow;
       }
     }
     &:active {
-      &::-webkit-slider-thumb {
-        background: radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
-        cursor: grabbing;
-      }
-      &::-moz-range-thumb {
-        background: radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
+      @include on-thumb {
+        @include thumb-bg(var(--zui-blue-600));
+        box-shadow: $thumb-ring-shadow;
         cursor: grabbing;
       }
     }
-    &:disabled {
-      cursor: not-allowed;
-      &::-webkit-slider-thumb {
-        background: radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-        &:hover {
-          box-shadow: none;
-        }
-      }
-      &::-moz-range-thumb {
-        background: radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-        &:hover {
-          box-shadow: none;
-        }
-      }
-    }
   }
   // Shared: floating input above the thumb
@@ -178,76 +169,17 @@
   // Range mode
   .range-wrapper {
-    position: relative;
-    display: flex;
-    height: rem(4);
-    align-items: center;
-    overflow: visible;
-    margin: rem(5) calc(var(--zui-slider-thumb-size) * -1);
     input[type='range'] {
       position: absolute;
-      width: 100%;
-      height: var(--zui-slider-thumb-size);
-      background: transparent;
-      transform: translateY(-50%);
       pointer-events: none;
-      @supports (-moz-appearance: none) {
-        top: 50%;
-        left: 0;
-      }
-      &::-webkit-slider-runnable-track {
-        height: rem(4);
-        background: transparent;
-      }
-      &::-webkit-slider-thumb {
-        margin-top: rem(2);
-        cursor: grab;
+      @include on-thumb {
         pointer-events: all;
       }
-      &::-moz-range-track {
-        height: rem(4);
-        background: transparent;
-      }
       &::-moz-range-progress {
         background: transparent;
       }
-      &::-moz-range-thumb {
-        cursor: grab;
-        pointer-events: all;
-      }
-      &:active {
-        &::-webkit-slider-thumb {
-          cursor: grabbing;
-        }
-        &::-moz-range-thumb {
-          cursor: grabbing;
-        }
-      }
-      &:disabled {
-        &::-webkit-slider-thumb {
-          cursor: not-allowed;
-          pointer-events: all;
-        }
-        &::-moz-range-thumb {
-          cursor: not-allowed;
-          pointer-events: all;
-        }
-      }
-    }
-    .thumb-input {
-      bottom: calc(var(--zui-slider-thumb-size) * 2 - #{rem(1)});
     }
   }
@@ -276,13 +208,8 @@
   input[type='range']:disabled {
     cursor: default;
-    &::-webkit-slider-thumb {
-      background: radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-      cursor: default;
-    }
-    &::-moz-range-thumb {
-      background: radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
+    @include on-thumb {
+      @include thumb-bg(var(--zui-blue));
       cursor: default;
     }
   }
@@ -291,11 +218,24 @@
 :host([disabled]) {
   cursor: not-allowed;
-  .range-wrapper {
+  input[type='range']:disabled {
     cursor: not-allowed;
+    @include on-thumb {
+      @include thumb-bg(var(--zui-gray));
+      cursor: not-allowed;
+      &:hover {
+        box-shadow: none;
+      }
+    }
   }
   .step-dot {
     background-color: var(--zui-gray);
   }
+  .range-wrapper {
+    cursor: not-allowed;
+  }
 }

package/src/zui-slider.ts CHANGED Viewed

@@ -42,8 +42,7 @@ type ThumbFlag = 'thumb' | 'startThumb' | 'endThumb';
  * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed
  * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider
  *
- * @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)
- * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb
+ * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each slider thumb
  *
  * @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }
  */
@@ -358,7 +357,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
       <div class="single-wrapper">
         <input
           aria-label="Slider value"
-          style=${styleMap({ background: this.#singleTrackBackground(progress) })}
+          style=${styleMap({ '--zui-slider-track-bg': this.#singleTrackBackground(progress) })}
           type="range"
           .min="${String(this.min)}"
           .max="${String(this.max)}"
@@ -372,7 +371,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           @focus="${this.#h.thumb.show}"
           @blur="${this.#h.thumb.hide}"
         />
-        ${this.#renderStepDots()}
         ${this.#renderFloatingInput(
           this.#value,
           this.#onThumbFloatingInput,
@@ -381,6 +379,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           this.#isVisible('thumb'),
           progress
         )}
+        ${this.#renderStepDots()}
       </div>
     `;
   }
@@ -389,11 +388,8 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     const progressStart = this.progressStart;
     const progressEnd = this.progressEnd;
     return html`
-      <div
-        class="range-wrapper"
-        style=${styleMap({ background: this.#rangeTrackBackground(progressStart, progressEnd) })}
-      >
-        ${this.#renderStepDots()}${this.#renderRangeInput('start')}
+      <div class="range-wrapper">
+        ${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}
         ${this.#renderFloatingInput(
           this.#valueStart,
           this.#onStartThumbFloatingInput,
@@ -411,11 +407,12 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           this.#isVisible('endThumb'),
           progressEnd
         )}
+        ${this.#renderStepDots()}
       </div>
     `;
   }
-  #renderRangeInput(which: 'start' | 'end') {
+  #renderRangeInput(which: 'start' | 'end', trackBg?: string) {
     const flag: ThumbFlag = which === 'start' ? 'startThumb' : 'endThumb';
     const val = which === 'start' ? this.#valueStart : this.#valueEnd;
     const onInput = which === 'start' ? this.#onRangeStartInput : this.#onRangeEndInput;
@@ -428,6 +425,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         aria-label="${which === 'start' ? 'Range start' : 'Range end'}"
         class="range-${which}"
         type="range"
+        style=${trackBg ? styleMap({ '--zui-slider-track-bg': trackBg }) : nothing}
         .min="${String(this.min)}"
         .max="${String(this.max)}"
         .step="${this.step > 0 ? String(this.step) : '1'}"

package/test/zui-slider.test.ts CHANGED Viewed

@@ -102,13 +102,13 @@ suite('zui-slider', () => {
     await element.updateComplete;
     const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
     const thumbDiv = element.shadowRoot!.querySelector<HTMLElement>('.thumb-input')!;
-    const bgBefore = input.style.background;
+    const bgBefore = input.style.getPropertyValue('--zui-slider-track-bg');
     input.value = '75';
     input.dispatchEvent(new Event('input'));
     await element.updateComplete;
     assert.include(thumbDiv.style.left, '75%');
-    assert.notEqual(input.style.background, bgBefore);
-    assert.include(input.style.background, '75%');
+    assert.notEqual(input.style.getPropertyValue('--zui-slider-track-bg'), bgBefore);
+    assert.include(input.style.getPropertyValue('--zui-slider-track-bg'), '75%');
   });
   test('floating input change fires component change event', async () => {
@@ -232,7 +232,7 @@ suite('zui-slider', () => {
   test('single mode input has inline linear-gradient background with transparent insets', async () => {
     await element.updateComplete;
     const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
-    const bg = input.style.background;
+    const bg = input.style.getPropertyValue('--zui-slider-track-bg');
     assert.include(bg, 'linear-gradient');
     assert.include(bg, 'transparent var(--zui-slider-thumb-size)');
     assert.include(bg, 'transparent calc(100% - var(--zui-slider-thumb-size))');
@@ -242,13 +242,13 @@ suite('zui-slider', () => {
     element.disabled = true;
     await element.updateComplete;
     const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
-    assert.include(input.style.background, 'var(--zui-gray)');
-    assert.notInclude(input.style.background, 'var(--zui-blue)');
+    assert.include(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
+    assert.notInclude(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
     element.disabled = false;
     await element.updateComplete;
-    assert.include(input.style.background, 'var(--zui-blue)');
-    assert.notInclude(input.style.background, 'var(--zui-gray)');
+    assert.include(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
+    assert.notInclude(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
   });
   test('single mode gradient progress stop shifts when value changes', async () => {
@@ -256,13 +256,22 @@ suite('zui-slider', () => {
     element.value = '50';
     await element.updateComplete;
     const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
-    assert.include(input.style.background, 'calc(50% + var(--zui-slider-thumb-size) * 0)');
+    assert.include(
+      input.style.getPropertyValue('--zui-slider-track-bg'),
+      'calc(50% + var(--zui-slider-thumb-size) * 0)'
+    );
     // At value=75 (progress=75): offset = 1.5 - (3*75)/100 = -0.75
     element.value = '75';
     await element.updateComplete;
-    assert.include(input.style.background, 'calc(75% + var(--zui-slider-thumb-size) * -0.75)');
-    assert.notInclude(input.style.background, 'calc(50% + var(--zui-slider-thumb-size) * 0)');
+    assert.include(
+      input.style.getPropertyValue('--zui-slider-track-bg'),
+      'calc(75% + var(--zui-slider-thumb-size) * -0.75)'
+    );
+    assert.notInclude(
+      input.style.getPropertyValue('--zui-slider-track-bg'),
+      'calc(50% + var(--zui-slider-thumb-size) * 0)'
+    );
   });
   test('form reset hides visible floating input', async () => {
@@ -912,14 +921,13 @@ suite('zui-slider range', () => {
     await element.updateComplete;
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
     const thumbInputDivs = element.shadowRoot!.querySelectorAll<HTMLElement>('.thumb-input');
-    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
-    const bgBefore = wrapper.style.background;
+    const bgBefore = startInput.style.getPropertyValue('--zui-slider-track-bg');
     startInput.value = '30';
     startInput.dispatchEvent(new Event('input'));
     await element.updateComplete;
     assert.include(thumbInputDivs[0].style.left, '30%');
-    assert.notEqual(wrapper.style.background, bgBefore);
-    assert.include(wrapper.style.background, '30%');
+    assert.notEqual(startInput.style.getPropertyValue('--zui-slider-track-bg'), bgBefore);
+    assert.include(startInput.style.getPropertyValue('--zui-slider-track-bg'), '30%');
   });
   test('change event fires with valueStart and valueEnd detail on range-start change', async () => {
@@ -1021,14 +1029,14 @@ suite('zui-slider range', () => {
   test('range-wrapper gradient uses gray when disabled and reverts to blue when re-enabled', async () => {
     element.disabled = true;
     await element.updateComplete;
-    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
-    assert.include(wrapper.style.background, 'var(--zui-gray)');
-    assert.notInclude(wrapper.style.background, 'var(--zui-blue)');
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    assert.include(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
+    assert.notInclude(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
     element.disabled = false;
     await element.updateComplete;
-    assert.include(wrapper.style.background, 'var(--zui-blue)');
-    assert.notInclude(wrapper.style.background, 'var(--zui-gray)');
+    assert.include(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
+    assert.notInclude(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
   });
   test('form reset hides visible floating inputs in range mode', async () => {
@@ -1072,8 +1080,8 @@ suite('zui-slider range', () => {
   test('range-wrapper gradient insets are transparent outside thumb-size bounds', async () => {
     await element.updateComplete;
-    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
-    const bg = wrapper.style.background;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const bg = startInput.style.getPropertyValue('--zui-slider-track-bg');
     assert.include(bg, 'transparent var(--zui-slider-thumb-size)');
     assert.include(bg, 'transparent calc(100% - var(--zui-slider-thumb-size))');
   });
@@ -1098,13 +1106,13 @@ suite('zui-slider range', () => {
     element.valueStart = '25';
     element.valueEnd = '75';
     await element.updateComplete;
-    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
-    const bg25 = wrapper.style.background;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const bg25 = startInput.style.getPropertyValue('--zui-slider-track-bg');
     element.valueStart = '10';
     element.valueEnd = '90';
     await element.updateComplete;
-    const bg10 = wrapper.style.background;
+    const bg10 = startInput.style.getPropertyValue('--zui-slider-track-bg');
     assert.notEqual(bg25, bg10);
   });