@zywave/zui-slider 4.4.0-pre.4 → 4.4.0-pre.6

package/dist/custom-elements.json

@@ -94,46 +94,41 @@
               "kind": "field",
               "name": "#thumbInputState",
               "privacy": "private",
-              "default": "new Map< ThumbFlag, { visible: boolean; focused: boolean; timer?: ReturnType<typeof setTimeout>; debounceTimer?: ReturnType<typeof setTimeout>; } >([ ['thumb', { visible: false, focused: false }], ['startThumb', { visible: false, focused: false }], ['endThumb', { visible: false, focused: false }], ])"
+              "default": "new Map< ThumbFlag, { visible: boolean; focused: boolean; committed: boolean; timer?: ReturnType<typeof setTimeout>; } >([ ['thumb', { visible: false, focused: false, committed: false }], ['startThumb', { visible: false, focused: false, committed: false }], ['endThumb', { visible: false, focused: false, committed: false }], ])"
             },
             {
               "kind": "field",
-              "name": "#onThumbFloatingInput",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "#onStartThumbFloatingInput",
+              "name": "#onThumbFloatingChange",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onEndThumbFloatingInput",
+              "name": "#onStartThumbFloatingChange",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onThumbFloatingChange",
+              "name": "#onEndThumbFloatingChange",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onStartThumbFloatingChange",
+              "name": "#onFloatingInputKeydown",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onEndThumbFloatingChange",
+              "name": "#onRangeStartInput",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onRangeStartInput",
+              "name": "#onRangeEndInput",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#onRangeEndInput",
+              "name": "#stopClickPropagation",
               "privacy": "private"
             },
             {
@@ -141,9 +136,9 @@
               "name": "#h",
               "privacy": "private",
               "type": {
-                "text": "Record<ThumbFlag, { show: () => void; hide: () => void; focus: () => void; blur: () => void }>"
+                "text": "Record<\n    ThumbFlag,\n    { show: () => void; hide: () => void; focus: () => void; input: () => void; blurCommit: (e: FocusEvent) => void }\n  >"
               },
-              "default": "{ thumb: { show: () => this.#showThumbInput('thumb'), hide: () => this.#scheduleHideThumbInput('thumb'), focus: () => this.#focusFloatingInput('thumb'), blur: () => this.#blurFloatingInput('thumb'), }, startThumb: { show: () => this.#showThumbInput('startThumb'), hide: () => this.#scheduleHideThumbInput('startThumb'), focus: () => this.#focusFloatingInput('startThumb'), blur: () => this.#blurFloatingInput('startThumb'), }, endThumb: { show: () => this.#showThumbInput('endThumb'), hide: () => this.#scheduleHideThumbInput('endThumb'), focus: () => this.#focusFloatingInput('endThumb'), blur: () => this.#blurFloatingInput('endThumb'), }, }"
+              "default": "{ thumb: this.#makeThumbHandlers('thumb'), startThumb: this.#makeThumbHandlers('startThumb'), endThumb: this.#makeThumbHandlers('endThumb'), }"
             },
             {
               "kind": "field",
@@ -593,12 +588,6 @@
                     "text": "string"
                   }
                 },
-                {
-                  "name": "onInput",
-                  "type": {
-                    "text": "(e: Event) => void"
-                  }
-                },
                 {
                   "name": "onFloatingChange",
                   "type": {
@@ -691,7 +680,7 @@
             },
             {
               "kind": "method",
-              "name": "#makeFloatingChange",
+              "name": "#makeThumbHandlers",
               "privacy": "private",
               "parameters": [
                 {
@@ -699,24 +688,12 @@
                   "type": {
                     "text": "ThumbFlag"
                   }
-                },
-                {
-                  "name": "setter",
-                  "type": {
-                    "text": "(val: string) => void"
-                  }
-                },
-                {
-                  "name": "dispatch",
-                  "type": {
-                    "text": "() => void"
-                  }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "#onFloatingInput",
+              "name": "#makeFloatingChange",
               "privacy": "private",
               "parameters": [
                 {
@@ -730,6 +707,12 @@
                   "type": {
                     "text": "(val: string) => void"
                   }
+                },
+                {
+                  "name": "dispatch",
+                  "type": {
+                    "text": "() => void"
+                  }
                 }
               ]
             },

package/dist/zui-slider-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host .thumb-input input{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::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input:hover{border-color:var(--zui-gray-400)}:host .thumb-input input:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly]{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;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:auto}:host .thumb-input input{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input::-webkit-inner-spin-button,:host .thumb-input input::-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,:host .step-dots .step-dot--last{width:.125rem;height:1rem;border-radius:.125rem}:host .step-dots .step-dot-label{position:absolute;top:.375rem;font-weight:600;white-space:nowrap;color:var(--zui-gray-600);transform:translateX(-50%);user-select:none}:host .step-dots .step-dot-label:nth-child(2){transform:none}:host .step-dots .step-dot-label:last-child{transform:translateX(-100%)}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}: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;user-select:none}: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}`;
+export const style = css `:host .thumb-input input{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::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input:hover{border-color:var(--zui-gray-400)}:host .thumb-input input:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly]{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;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:auto}:host .thumb-input input{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input::-webkit-inner-spin-button,:host .thumb-input input::-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,:host .step-dots .step-dot--last{width:.125rem;height:1rem;border-radius:.125rem}:host .step-dots .step-dot-label{position:absolute;top:.375rem;font-size:.6875rem;font-weight:600;white-space:nowrap;color:var(--zui-gray-600);transform:translateX(-50%);user-select:none}:host .step-dots .step-dot-label:nth-child(2){transform:none}:host .step-dots .step-dot-label:last-child{transform:translateX(-100%)}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}: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;user-select:none}:host .min-max-labels .min-max-label{font-size:.6875rem;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

@@ -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,ozOAAozO,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .thumb-input input{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::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input:hover{border-color:var(--zui-gray-400)}:host .thumb-input input:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly]{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;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:auto}:host .thumb-input input{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input::-webkit-inner-spin-button,:host .thumb-input input::-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,:host .step-dots .step-dot--last{width:.125rem;height:1rem;border-radius:.125rem}:host .step-dots .step-dot-label{position:absolute;top:.375rem;font-weight:600;white-space:nowrap;color:var(--zui-gray-600);transform:translateX(-50%);user-select:none}:host .step-dots .step-dot-label:nth-child(2){transform:none}:host .step-dots .step-dot-label:last-child{transform:translateX(-100%)}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}: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;user-select:none}: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"]}
+{"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,01OAA01O,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .thumb-input input{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::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input:hover{border-color:var(--zui-gray-400)}:host .thumb-input input:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly]{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;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:auto}:host .thumb-input input{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input::-webkit-inner-spin-button,:host .thumb-input input::-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,:host .step-dots .step-dot--last{width:.125rem;height:1rem;border-radius:.125rem}:host .step-dots .step-dot-label{position:absolute;top:.375rem;font-size:.6875rem;font-weight:600;white-space:nowrap;color:var(--zui-gray-600);transform:translateX(-50%);user-select:none}:host .step-dots .step-dot-label:nth-child(2){transform:none}:host .step-dots .step-dot-label:last-child{transform:translateX(-100%)}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}: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;user-select:none}:host .min-max-labels .min-max-label{font-size:.6875rem;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.js

@@ -65,41 +65,29 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         this.#cachedNormalizedSteps = null;
         this.#cachedNumericValues = null;
         this.#thumbInputState = new Map([
-            ['thumb', { visible: false, focused: false }],
-            ['startThumb', { visible: false, focused: false }],
-            ['endThumb', { visible: false, focused: false }],
+            ['thumb', { visible: false, focused: false, committed: false }],
+            ['startThumb', { visible: false, focused: false, committed: false }],
+            ['endThumb', { visible: false, focused: false, committed: false }],
         ]);
-        // Pre-bound floating input handlers cached to avoid new function references on every render
-        this.#onThumbFloatingInput = this.#onFloatingInput('thumb', (v) => (this.value = v));
-        this.#onStartThumbFloatingInput = this.#onFloatingInput('startThumb', (v) => (this.valueStart = v));
-        this.#onEndThumbFloatingInput = this.#onFloatingInput('endThumb', (v) => (this.valueEnd = v));
-        // Cached floating input change handlers; flush debounce and dispatch immediately on commit (Enter/blur)
         this.#onThumbFloatingChange = this.#makeFloatingChange('thumb', (v) => (this.value = v), () => this.#onChange());
         this.#onStartThumbFloatingChange = this.#makeFloatingChange('startThumb', (v) => (this.valueStart = v), () => this.#onRangeChange());
         this.#onEndThumbFloatingChange = this.#makeFloatingChange('endThumb', (v) => (this.valueEnd = v), () => this.#onRangeChange());
-        // Cached range drag input handlers
+        // Cached keydown handler: Enter commits the floating input value in both number and text modes.
+        this.#onFloatingInputKeydown = (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                const input = e.target;
+                input.dispatchEvent(new Event('change'));
+            }
+        };
         this.#onRangeStartInput = this.#onRangeInput('start');
         this.#onRangeEndInput = this.#onRangeInput('end');
+        this.#stopClickPropagation = (e) => e.stopPropagation();
         // Cached pointer/focus handlers per thumb; prevents new closures on every render
         this.#h = {
-            thumb: {
-                show: () => this.#showThumbInput('thumb'),
-                hide: () => this.#scheduleHideThumbInput('thumb'),
-                focus: () => this.#focusFloatingInput('thumb'),
-                blur: () => this.#blurFloatingInput('thumb'),
-            },
-            startThumb: {
-                show: () => this.#showThumbInput('startThumb'),
-                hide: () => this.#scheduleHideThumbInput('startThumb'),
-                focus: () => this.#focusFloatingInput('startThumb'),
-                blur: () => this.#blurFloatingInput('startThumb'),
-            },
-            endThumb: {
-                show: () => this.#showThumbInput('endThumb'),
-                hide: () => this.#scheduleHideThumbInput('endThumb'),
-                focus: () => this.#focusFloatingInput('endThumb'),
-                blur: () => this.#blurFloatingInput('endThumb'),
-            },
+            thumb: this.#makeThumbHandlers('thumb'),
+            startThumb: this.#makeThumbHandlers('startThumb'),
+            endThumb: this.#makeThumbHandlers('endThumb'),
         };
         this.steps = [];
         this.stepParser = null;
@@ -119,17 +107,14 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     #cachedNormalizedSteps;
     #cachedNumericValues;
     #thumbInputState;
-    // Pre-bound floating input handlers cached to avoid new function references on every render
-    #onThumbFloatingInput;
-    #onStartThumbFloatingInput;
-    #onEndThumbFloatingInput;
-    // Cached floating input change handlers; flush debounce and dispatch immediately on commit (Enter/blur)
     #onThumbFloatingChange;
     #onStartThumbFloatingChange;
     #onEndThumbFloatingChange;
-    // Cached range drag input handlers
+    // Cached keydown handler: Enter commits the floating input value in both number and text modes.
+    #onFloatingInputKeydown;
     #onRangeStartInput;
     #onRangeEndInput;
+    #stopClickPropagation;
     // Cached pointer/focus handlers per thumb; prevents new closures on every render
     #h;
     static get styles() {
@@ -233,11 +218,10 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     #clearAllThumbInputState() {
         for (const entry of this.#thumbInputState.values()) {
             clearTimeout(entry.timer);
-            clearTimeout(entry.debounceTimer);
             entry.timer = undefined;
-            entry.debounceTimer = undefined;
             entry.visible = false;
             entry.focused = false;
+            entry.committed = false;
         }
     }
     #syncValuesToSteps() {
@@ -471,6 +455,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     #renderSingle() {
         const progress = this.progress;
         const { nativeMin, nativeMax, nativeStep } = this.#nativeRangeAttrs;
+        // live() required: direct DOM writes during drag don't trigger a state change, so Lit won't re-sync without it.
         const nativeValue = this.#stepsMode ? String(Math.max(0, this.#stepsIndexOf(this.#value))) : this.#value;
         return html `
       <div class="single-wrapper">
@@ -481,7 +466,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           .min="${nativeMin}"
           .max="${nativeMax}"
           .step="${nativeStep}"
-          .value="${nativeValue}"
+          .value="${live(nativeValue)}"
           ?disabled="${this.disabled || this.readOnly}"
           @input="${this.#onInput}"
           @change="${this.#onChange}"
@@ -490,7 +475,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           @focus="${this.#h.thumb.show}"
           @blur="${this.#h.thumb.hide}"
         />
-        ${this.#renderFloatingInput(this.#value, this.#onThumbFloatingInput, this.#onThumbFloatingChange, 'thumb', this.#isVisible('thumb'), progress)}
+        ${this.#renderFloatingInput(this.#value, this.#onThumbFloatingChange, 'thumb', this.#isVisible('thumb'), progress)}
         ${this.#renderStepDots()}
       </div>
     `;
@@ -501,9 +486,9 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         return html `
       <div class="range-wrapper" @click="${this.#onTrackClick}">
         ${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}
-        ${this.#renderFloatingInput(this.#valueStart, this.#onStartThumbFloatingInput, this.#onStartThumbFloatingChange, 'startThumb', this.#isVisible('startThumb'), progressStart)}
+        ${this.#renderFloatingInput(this.#valueStart, this.#onStartThumbFloatingChange, 'startThumb', this.#isVisible('startThumb'), progressStart)}
         ${this.#renderRangeInput('end')}
-        ${this.#renderFloatingInput(this.#valueEnd, this.#onEndThumbFloatingInput, this.#onEndThumbFloatingChange, 'endThumb', this.#isVisible('endThumb'), progressEnd)}
+        ${this.#renderFloatingInput(this.#valueEnd, this.#onEndThumbFloatingChange, 'endThumb', this.#isVisible('endThumb'), progressEnd)}
         ${this.#renderStepDots()}
       </div>
     `;
@@ -527,6 +512,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         .step="${nativeStep}"
         .value="${live(nativeValue)}"
         ?disabled="${this.disabled || this.readOnly}"
+        @click="${this.#stopClickPropagation}"
         @input="${onInput}"
         @change="${this.#onRangeChange}"
         @pointerenter="${h.show}"
@@ -536,15 +522,16 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
       />
     `;
     }
-    #renderFloatingInput(val, onInput, onFloatingChange, flag, visible, progress) {
+    #renderFloatingInput(val, onFloatingChange, flag, visible, progress) {
         const h = this.#h[flag];
         // type="text" in steps mode to allow label and stepParser input.
-        // live() required: same-value debounce resolutions skip reactive updates, so Lit won't re-sync without it.
+        // live() required: commits that snap/clamp to the current value skip reactive updates, so Lit won't re-sync without it.
         const ariaLabel = flag === 'startThumb' ? 'Range start value' : flag === 'endThumb' ? 'Range end value' : 'Slider value';
         return html `
       <div
         class=${classMap({ 'thumb-input': true, 'thumb-input--visible': visible })}
         style=${styleMap({ left: _a.#thumbPositionCSS(progress) })}
+        @click="${this.#stopClickPropagation}"
         @pointerenter="${h.show}"
         @pointerleave="${h.hide}"
       >
@@ -557,10 +544,11 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           .step="${this.#stepsMode ? '' : this.step > 0 ? String(this.step) : '1'}"
           ?disabled="${this.disabled}"
           ?readonly="${this.readOnly}"
-          @input="${onInput}"
+          @keydown="${this.#onFloatingInputKeydown}"
+          @input="${h.input}"
           @change="${onFloatingChange}"
           @focus="${h.focus}"
-          @blur="${h.blur}"
+          @blur="${h.blurCommit}"
         />
       </div>
     `;
@@ -616,7 +604,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         const normalized = this.#normalizedSteps;
         const minLabel = this.#stepsMode ? normalized[0]?.label ?? '' : String(this.min);
         const maxLabel = this.#stepsMode ? normalized[normalized.length - 1]?.label ?? '' : String(this.max);
-        const hidden = this.showStepLabels && this.#stepsMode;
+        const hidden = this.showStepLabels;
         return html `
       <div
         class="min-max-labels"
@@ -659,66 +647,86 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         }
         return this.#value;
     }
+    #makeThumbHandlers(flag) {
+        return {
+            show: () => this.#showThumbInput(flag),
+            hide: () => this.#scheduleHideThumbInput(flag),
+            focus: () => this.#focusFloatingInput(flag),
+            input: () => {
+                this.#thumbInputState.get(flag).committed = false;
+            },
+            blurCommit: (e) => {
+                const entry = this.#thumbInputState.get(flag);
+                if (!entry.committed) {
+                    e.target.dispatchEvent(new Event('change'));
+                }
+                entry.committed = false;
+                this.#blurFloatingInput(flag);
+            },
+        };
+    }
     #makeFloatingChange(flag, setter, dispatch) {
         return (e) => {
             if (this.readOnly) {
                 return;
             }
             const input = e.target;
-            const entry = this.#thumbInputState.get(flag);
-            clearTimeout(entry.debounceTimer);
-            entry.debounceTimer = undefined;
             if (input.value === '') {
                 input.value = this.#currentValueForFlag(flag);
                 return;
             }
+            const before = this.#currentValueForFlag(flag);
+            const commit = (value) => {
+                setter(value);
+                this.#thumbInputState.get(flag).committed = true;
+                if (this.#currentValueForFlag(flag) !== before) {
+                    dispatch();
+                }
+            };
             if (this.#stepsMode) {
                 const resolved = this.#resolveFloatingInput(input.value);
                 if (resolved !== null) {
-                    setter(resolved);
-                    this.requestUpdate();
-                    dispatch();
+                    let finalResolved = resolved;
+                    if (flag !== 'thumb') {
+                        const resolvedIdx = this.#stepsIndexOf(resolved);
+                        const endIdx = Math.max(0, this.#stepsIndexOf(this.#valueEnd));
+                        const startIdx = Math.max(0, this.#stepsIndexOf(this.#valueStart));
+                        if (flag === 'startThumb' && resolvedIdx >= endIdx) {
+                            const nudgedIdx = endIdx - 1;
+                            finalResolved = nudgedIdx >= 0 ? this.#stepAt(nudgedIdx) : this.#currentValueForFlag(flag);
+                        }
+                        else if (flag === 'endThumb' && resolvedIdx <= startIdx) {
+                            const nudgedIdx = startIdx + 1;
+                            finalResolved =
+                                nudgedIdx < this.#normalizedSteps.length ? this.#stepAt(nudgedIdx) : this.#currentValueForFlag(flag);
+                        }
+                    }
+                    commit(finalResolved);
                 }
                 else {
                     input.value = this.#currentValueForFlag(flag);
                 }
             }
             else {
-                setter(this.#processFloatingValue(parseFloat(input.value)));
-                this.requestUpdate();
-                dispatch();
-            }
-        };
-    }
-    #onFloatingInput(flag, setter) {
-        return (e) => {
-            if (this.readOnly) {
-                return;
-            }
-            const input = e.target;
-            const entry = this.#thumbInputState.get(flag);
-            clearTimeout(entry.debounceTimer);
-            entry.debounceTimer = undefined;
-            if (input.value === '') {
-                return;
-            }
-            if (this.#stepsMode) {
-                // Capture raw string at event time so the debounce closure reads the right value
-                const raw = input.value;
-                entry.debounceTimer = setTimeout(() => {
-                    const resolved = this.#resolveFloatingInput(raw);
-                    if (resolved !== null) {
-                        setter(resolved);
-                        this.requestUpdate();
+                let processed = this.#processFloatingValue(parseFloat(input.value));
+                if (flag !== 'thumb') {
+                    const effectiveStep = this.step > 0 ? this.step : 1;
+                    if (flag === 'startThumb') {
+                        const endNum = parseFloat(this.#valueEnd);
+                        if (parseFloat(processed) >= endNum) {
+                            const nudged = this.#processFloatingValue(endNum - effectiveStep);
+                            processed = parseFloat(nudged) < endNum ? nudged : this.#currentValueForFlag(flag);
+                        }
                     }
-                }, 500);
-            }
-            else {
-                const raw = parseFloat(input.value);
-                entry.debounceTimer = setTimeout(() => {
-                    setter(this.#processFloatingValue(raw));
-                    this.requestUpdate();
-                }, 500);
+                    else {
+                        const startNum = parseFloat(this.#valueStart);
+                        if (parseFloat(processed) <= startNum) {
+                            const nudged = this.#processFloatingValue(startNum + effectiveStep);
+                            processed = parseFloat(nudged) > startNum ? nudged : this.#currentValueForFlag(flag);
+                        }
+                    }
+                }
+                commit(processed);
             }
         };
     }
@@ -861,7 +869,9 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
             return;
         }
         this.#showThumbInput(flag);
-        this.#thumbInputState.get(flag).focused = true;
+        const entry = this.#thumbInputState.get(flag);
+        entry.focused = true;
+        entry.committed = false;
     }
     #blurFloatingInput(flag) {
         const entry = this.#thumbInputState.get(flag);