From a16250038a0d2388abaf3a7f25ae1d5b192dd89e Mon Sep 17 00:00:00 2001 From: jasonpnp <153245762+jasonpnp@users.noreply.github.com> Date: Thu, 18 Sep 2025 13:47:42 -0700 Subject: [PATCH 1/7] Improve range slider styling - Increase container gap from 12px to 16px - Center align input text in range slider components - Update package dependencies --- .../dash-core-components/package-lock.json | 114 ++++-------------- .../src/components/css/sliders.css | 4 +- .../src/fragments/RangeSlider.tsx | 31 +++++ components/dash-table/package-lock.json | 5 - 4 files changed, 57 insertions(+), 97 deletions(-) diff --git a/components/dash-core-components/package-lock.json b/components/dash-core-components/package-lock.json index 5bb043d4a8..58ffbe174e 100644 --- a/components/dash-core-components/package-lock.json +++ b/components/dash-core-components/package-lock.json @@ -3273,7 +3273,6 @@ "version": "0.3.6", "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz", "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==", - "dev": true, "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25" @@ -3977,7 +3976,6 @@ "version": "9.6.1", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz", "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==", - "dev": true, "dependencies": { "@types/estree": "*", "@types/json-schema": "*" @@ -3987,7 +3985,6 @@ "version": "3.7.7", "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz", "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==", - "dev": true, "dependencies": { "@types/eslint": "*", "@types/estree": "*" @@ -3997,7 +3994,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", - "dev": true, "license": "MIT" }, "node_modules/@types/fast-isnumeric": { @@ -4056,8 +4052,7 @@ "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", - "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", - "dev": true + "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==" }, "node_modules/@types/json5": { "version": "0.0.29", @@ -4069,7 +4064,6 @@ "version": "22.13.10", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.10.tgz", "integrity": "sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw==", - "dev": true, "dependencies": { "undici-types": "~6.20.0" } @@ -4078,7 +4072,7 @@ "version": "15.7.15", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@types/ramda": { @@ -4095,7 +4089,7 @@ "version": "16.14.65", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.65.tgz", "integrity": "sha512-Guc3kE+W8LrQB9I3bF3blvNH15dXFIVIHIJTqrF8cp5XI/3IJcHGo4C3sJNPb8Zx49aofXKnAGIKyonE4f7XWg==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -4107,7 +4101,7 @@ "version": "16.9.25", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.25.tgz", "integrity": "sha512-ZK//eAPhwft9Ul2/Zj+6O11YR6L4JX0J2sVeBC9Ft7x7HFN7xk7yUV/zDxqV6rjvqgl6r8Dq7oQImxtyf/Mzcw==", - "dev": true, + "devOptional": true, "license": "MIT", "peerDependencies": { "@types/react": "^16.0.0" @@ -4117,7 +4111,7 @@ "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@types/semver": { @@ -4433,7 +4427,6 @@ "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz", "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==", - "dev": true, "dependencies": { "@webassemblyjs/helper-numbers": "1.13.2", "@webassemblyjs/helper-wasm-bytecode": "1.13.2" @@ -4442,26 +4435,22 @@ "node_modules/@webassemblyjs/floating-point-hex-parser": { "version": "1.13.2", "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz", - "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==", - "dev": true + "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==" }, "node_modules/@webassemblyjs/helper-api-error": { "version": "1.13.2", "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz", - "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==", - "dev": true + "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==" }, "node_modules/@webassemblyjs/helper-buffer": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz", - "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==", - "dev": true + "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==" }, "node_modules/@webassemblyjs/helper-numbers": { "version": "1.13.2", "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz", "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==", - "dev": true, "dependencies": { "@webassemblyjs/floating-point-hex-parser": "1.13.2", "@webassemblyjs/helper-api-error": "1.13.2", @@ -4471,14 +4460,12 @@ "node_modules/@webassemblyjs/helper-wasm-bytecode": { "version": "1.13.2", "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz", - "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==", - "dev": true + "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==" }, "node_modules/@webassemblyjs/helper-wasm-section": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz", "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==", - "dev": true, "dependencies": { "@webassemblyjs/ast": "1.14.1", "@webassemblyjs/helper-buffer": "1.14.1", @@ -4490,7 +4477,6 @@ "version": "1.13.2", "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz", "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==", - "dev": true, "dependencies": { "@xtuc/ieee754": "^1.2.0" } @@ -4499,7 +4485,6 @@ "version": "1.13.2", "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz", "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==", - "dev": true, "dependencies": { "@xtuc/long": "4.2.2" } @@ -4507,14 +4492,12 @@ "node_modules/@webassemblyjs/utf8": { "version": "1.13.2", "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz", - "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==", - "dev": true + "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==" }, "node_modules/@webassemblyjs/wasm-edit": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz", "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==", - "dev": true, "dependencies": { "@webassemblyjs/ast": "1.14.1", "@webassemblyjs/helper-buffer": "1.14.1", @@ -4530,7 +4513,6 @@ "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz", "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==", - "dev": true, "dependencies": { "@webassemblyjs/ast": "1.14.1", "@webassemblyjs/helper-wasm-bytecode": "1.13.2", @@ -4543,7 +4525,6 @@ "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz", "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==", - "dev": true, "dependencies": { "@webassemblyjs/ast": "1.14.1", "@webassemblyjs/helper-buffer": "1.14.1", @@ -4555,7 +4536,6 @@ "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz", "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==", - "dev": true, "dependencies": { "@webassemblyjs/ast": "1.14.1", "@webassemblyjs/helper-api-error": "1.13.2", @@ -4569,7 +4549,6 @@ "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz", "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==", - "dev": true, "dependencies": { "@webassemblyjs/ast": "1.14.1", "@xtuc/long": "4.2.2" @@ -4622,14 +4601,12 @@ "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", - "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==", - "dev": true + "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==" }, "node_modules/@xtuc/long": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", - "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", - "dev": true + "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==" }, "node_modules/abort-controller": { "version": "3.0.0", @@ -4646,7 +4623,6 @@ "version": "8.8.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", - "dev": true, "bin": { "acorn": "bin/acorn" }, @@ -4705,7 +4681,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", - "dev": true, "dependencies": { "ajv": "^8.0.0" }, @@ -4722,7 +4697,6 @@ "version": "8.12.0", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", - "dev": true, "dependencies": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", @@ -4737,8 +4711,7 @@ "node_modules/ajv-formats/node_modules/json-schema-traverse": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "dev": true + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" }, "node_modules/ansi-escapes": { "version": "4.3.2", @@ -5556,8 +5529,7 @@ "node_modules/buffer-from": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", - "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", - "dev": true + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==" }, "node_modules/buffer-xor": { "version": "1.0.3", @@ -5775,7 +5747,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==", - "dev": true, "engines": { "node": ">=6.0" } @@ -6623,7 +6594,6 @@ "version": "5.18.2", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz", "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==", - "dev": true, "license": "MIT", "dependencies": { "graceful-fs": "^4.2.4", @@ -6824,8 +6794,7 @@ "node_modules/es-module-lexer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz", - "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==", - "dev": true + "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==" }, "node_modules/es-object-atoms": { "version": "1.1.1", @@ -7326,7 +7295,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", - "dev": true, "dependencies": { "estraverse": "^5.2.0" }, @@ -7338,7 +7306,6 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", - "dev": true, "engines": { "node": ">=4.0" } @@ -7447,8 +7414,7 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-glob": { "version": "3.3.2", @@ -7849,8 +7815,7 @@ "node_modules/glob-to-regexp": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", - "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==", - "dev": true + "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==" }, "node_modules/global-cache": { "version": "1.2.1", @@ -7924,8 +7889,7 @@ "node_modules/graceful-fs": { "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", - "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", - "dev": true + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" }, "node_modules/graphemer": { "version": "1.4.0", @@ -10882,7 +10846,6 @@ "version": "27.5.1", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz", "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==", - "dev": true, "dependencies": { "@types/node": "*", "merge-stream": "^2.0.0", @@ -10896,7 +10859,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, "engines": { "node": ">=8" } @@ -10905,7 +10867,6 @@ "version": "8.1.1", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", - "dev": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -10965,8 +10926,7 @@ "node_modules/json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" }, "node_modules/json-schema-traverse": { "version": "0.4.1", @@ -11098,7 +11058,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==", - "dev": true, "engines": { "node": ">=6.11.5" } @@ -11275,8 +11234,7 @@ "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", - "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", - "dev": true + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==" }, "node_modules/merge2": { "version": "1.4.1", @@ -11322,7 +11280,6 @@ "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", - "dev": true, "engines": { "node": ">= 0.6" } @@ -11331,7 +11288,6 @@ "version": "2.1.35", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", - "dev": true, "dependencies": { "mime-db": "1.52.0" }, @@ -12595,7 +12551,6 @@ "version": "16.14.0", "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", @@ -12675,7 +12630,6 @@ "version": "16.14.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", @@ -13128,7 +13082,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -13399,7 +13352,6 @@ "version": "0.19.1", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", @@ -13410,7 +13362,6 @@ "version": "4.3.2", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz", "integrity": "sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==", - "dev": true, "license": "MIT", "dependencies": { "@types/json-schema": "^7.0.9", @@ -13430,7 +13381,6 @@ "version": "8.12.0", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", - "dev": true, "dependencies": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", @@ -13446,7 +13396,6 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", - "dev": true, "dependencies": { "fast-deep-equal": "^3.1.3" }, @@ -13457,8 +13406,7 @@ "node_modules/schema-utils/node_modules/json-schema-traverse": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "dev": true + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" }, "node_modules/semver": { "version": "6.3.1", @@ -13472,7 +13420,6 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", - "dev": true, "dependencies": { "randombytes": "^2.1.0" } @@ -13615,7 +13562,6 @@ "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -13635,7 +13581,6 @@ "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", - "dev": true, "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" @@ -14030,7 +13975,6 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz", "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==", - "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -14040,7 +13984,6 @@ "version": "5.39.0", "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz", "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==", - "dev": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.8.2", @@ -14058,7 +14001,6 @@ "version": "5.3.14", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.14.tgz", "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==", - "dev": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "jest-worker": "^27.4.5", @@ -14091,8 +14033,7 @@ "node_modules/terser/node_modules/commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" }, "node_modules/test-exclude": { "version": "6.0.0", @@ -14546,8 +14487,7 @@ "node_modules/undici-types": { "version": "6.20.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", - "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", - "dev": true + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==" }, "node_modules/unherit": { "version": "1.1.3", @@ -14705,7 +14645,6 @@ "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", - "dev": true, "dependencies": { "punycode": "^2.1.0" } @@ -14811,7 +14750,6 @@ "version": "2.4.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==", - "dev": true, "dependencies": { "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.1.2" @@ -14824,7 +14762,6 @@ "version": "5.101.0", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.101.0.tgz", "integrity": "sha512-B4t+nJqytPeuZlHuIKTbalhljIFXeNRqrUGAQgTGlfOl2lXXKXw+yZu6bicycP+PUlM44CxBjCFD6aciKFT3LQ==", - "dev": true, "license": "MIT", "dependencies": { "@types/eslint-scope": "^3.7.7", @@ -14941,7 +14878,6 @@ "version": "3.3.3", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.3.tgz", "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==", - "dev": true, "license": "MIT", "engines": { "node": ">=10.13.0" @@ -14951,7 +14887,6 @@ "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", - "dev": true, "license": "MIT", "bin": { "acorn": "bin/acorn" @@ -14964,7 +14899,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz", "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==", - "dev": true, "license": "MIT", "engines": { "node": ">=10.13.0" @@ -14977,7 +14911,6 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", - "dev": true, "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^4.1.1" @@ -14990,7 +14923,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", - "dev": true, "engines": { "node": ">=4.0" } diff --git a/components/dash-core-components/src/components/css/sliders.css b/components/dash-core-components/src/components/css/sliders.css index bacaf6fc89..7f0e79597e 100644 --- a/components/dash-core-components/src/components/css/sliders.css +++ b/components/dash-core-components/src/components/css/sliders.css @@ -165,7 +165,7 @@ .dash-slider-container { display: flex; align-items: center; - gap: 12px; + gap: 16px; width: 100%; } @@ -183,11 +183,13 @@ .dash-range-slider-min-input { min-width: 64px; + text-align: center; } .dash-range-slider-input { width: 64px; margin-top: 8px; + text-align: center; -moz-appearance: textfield; } diff --git a/components/dash-core-components/src/fragments/RangeSlider.tsx b/components/dash-core-components/src/fragments/RangeSlider.tsx index b99a97a8ee..6d5ee7e138 100644 --- a/components/dash-core-components/src/fragments/RangeSlider.tsx +++ b/components/dash-core-components/src/fragments/RangeSlider.tsx @@ -166,6 +166,35 @@ export default function RangeSlider(props: RangeSliderProps) { }); }, [min, max, processedMarks, step, sliderWidth]); + // Calculate dynamic input width based on digits needed and container size + const inputWidth = useMemo(() => { + if (!sliderWidth) { + return '64px'; // fallback to current width + } + + // Count digits needed for min and max values + const maxDigits = Math.max( + String(Math.floor(Math.abs(minMaxValues.max_mark))).length, + String(Math.floor(Math.abs(minMaxValues.min_mark))).length + ); + + // Add 1 for minus sign if min is negative + const totalChars = maxDigits + (minMaxValues.min_mark < 0 ? 1 : 0); + + // Calculate width as percentage of container (5% min, 15% max) + /* eslint-disable no-magic-numbers */ + const minWidth = sliderWidth * 0.05; + const maxWidth = sliderWidth * 0.15; + const charBasedWidth = totalChars * 12; // approx 12px per character + /* eslint-enable no-magic-numbers */ + + const calculatedWidth = Math.max( + minWidth, + Math.min(maxWidth, charBasedWidth) + ); + return `${calculatedWidth}px`; + }, [sliderWidth, minMaxValues.min_mark, minMaxValues.max_mark]); + const handleValueChange = (newValue: number[]) => { let adjustedValue = newValue; @@ -205,6 +234,7 @@ export default function RangeSlider(props: RangeSliderProps) { { const inputValue = e.target.value; @@ -338,6 +368,7 @@ export default function RangeSlider(props: RangeSliderProps) { { const inputValue = e.target.value; diff --git a/components/dash-table/package-lock.json b/components/dash-table/package-lock.json index 057c95b600..01cc36ce14 100644 --- a/components/dash-table/package-lock.json +++ b/components/dash-table/package-lock.json @@ -8095,7 +8095,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -8677,7 +8676,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -9413,7 +9411,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -10231,7 +10228,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -10534,7 +10530,6 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, "node_modules/react-select": { From a9b668325789a302b6c36a728cf61e6be9ca654e Mon Sep 17 00:00:00 2001 From: jasonpnp <153245762+jasonpnp@users.noreply.github.com> Date: Wed, 24 Sep 2025 09:55:32 -0700 Subject: [PATCH 2/7] Remove min-width constraint on range slider input --- components/dash-core-components/src/components/css/sliders.css | 1 - 1 file changed, 1 deletion(-) diff --git a/components/dash-core-components/src/components/css/sliders.css b/components/dash-core-components/src/components/css/sliders.css index 7f0e79597e..245ea1ca53 100644 --- a/components/dash-core-components/src/components/css/sliders.css +++ b/components/dash-core-components/src/components/css/sliders.css @@ -182,7 +182,6 @@ } .dash-range-slider-min-input { - min-width: 64px; text-align: center; } From e8b73226a3be9c9b5ff732b80a19c9626e9cd7f8 Mon Sep 17 00:00:00 2001 From: jasonpnp <153245762+jasonpnp@users.noreply.github.com> Date: Wed, 24 Sep 2025 10:31:35 -0700 Subject: [PATCH 3/7] Fix slider padding and range input styling --- .../dash-core-components/src/components/css/sliders.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/components/dash-core-components/src/components/css/sliders.css b/components/dash-core-components/src/components/css/sliders.css index 245ea1ca53..b25b3fa6f8 100644 --- a/components/dash-core-components/src/components/css/sliders.css +++ b/components/dash-core-components/src/components/css/sliders.css @@ -7,12 +7,16 @@ touch-action: none; width: 100%; height: 14px; - padding: 8px 0 28px 0; + padding: 18px 0 18px 0; box-sizing: border-box; /* Override Radix's default margin/padding behavior */ --radix-slider-thumb-width: 16px; } +.dash-slider-root.has-marks { + padding: 8px 0 28px 0; +} + .dash-slider-root[data-orientation='vertical'].has-marks { padding-bottom: 0px; } @@ -187,7 +191,6 @@ .dash-range-slider-input { width: 64px; - margin-top: 8px; text-align: center; -moz-appearance: textfield; } From d5129108a5f530547cfd65f5a1beea6a55f4f955 Mon Sep 17 00:00:00 2001 From: jasonpnp <153245762+jasonpnp@users.noreply.github.com> Date: Wed, 24 Sep 2025 11:46:40 -0700 Subject: [PATCH 4/7] Add fallback values to CSS variables --- .../src/components/css/input.css | 20 ++++++------- .../src/components/css/sliders.css | 30 +++++++++---------- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/components/dash-core-components/src/components/css/input.css b/components/dash-core-components/src/components/css/input.css index ef4e444c1e..a6187bb292 100644 --- a/components/dash-core-components/src/components/css/input.css +++ b/components/dash-core-components/src/components/css/input.css @@ -5,9 +5,9 @@ align-items: center; width: 170px; /* default input width */ height: 32px; - background: var(--Dash-Fill-Inverse-Strong); - border-radius: var(--Dash-Spacing); - border: 1px solid var(--Dash-Stroke-Strong); + background: var(--Dash-Fill-Inverse-Strong, #fff); + border-radius: var(--Dash-Spacing, 4px); + border: 1px solid var(--Dash-Stroke-Strong, rgba(0, 18, 77, 0.45)); box-sizing: border-box; container-type: inline-size; vertical-align: middle; @@ -21,11 +21,11 @@ /* Input field styles */ .dash-input-element { - padding: var(--Dash-Spacing) calc(2 * var(--Dash-Spacing)); + padding: var(--Dash-Spacing, 4px) calc(2 * var(--Dash-Spacing, 4px)); color: inherit; background: inherit; border: none; - border-radius: var(--Dash-Spacing); + border-radius: var(--Dash-Spacing, 4px); flex: 1 1 0; min-width: 0; height: 100%; @@ -66,23 +66,23 @@ width: 32px; height: 100%; border: none; - background: var(--Dash-Fill-Inverse-Strong); + background: var(--Dash-Fill-Inverse-Strong, #fff); cursor: pointer; font-size: 16px; font-weight: bold; - color: var(--Dash-Text-Primary); + color: var(--Dash-Text-Primary, rgba(0, 18, 77, 0.87)); } .dash-input-stepper:hover { - background: var(--Dash-Fill-Primary-Hover); + background: var(--Dash-Fill-Primary-Hover, rgba(0, 18, 77, 0.04)); } .dash-input-stepper:active { - background: var(--Dash-Fill-Primary-Active); + background: var(--Dash-Fill-Primary-Active, rgba(0, 18, 77, 0.08)); } .dash-input-stepper:disabled { - background: var(--Dash-Fill-Inverse-Strong); + background: var(--Dash-Fill-Inverse-Strong, #fff); opacity: 0.5; cursor: default; } diff --git a/components/dash-core-components/src/components/css/sliders.css b/components/dash-core-components/src/components/css/sliders.css index b25b3fa6f8..ffad2debf9 100644 --- a/components/dash-core-components/src/components/css/sliders.css +++ b/components/dash-core-components/src/components/css/sliders.css @@ -32,7 +32,7 @@ flex-grow: 1; border-radius: 9999px; height: 4px; - background-color: var(--Dash-Fill-Disabled); + background-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); } .dash-slider-root[data-orientation='vertical'] .dash-slider-track { @@ -45,7 +45,7 @@ position: absolute; border-radius: 9999px; height: 100%; - background-color: var(--Dash-Fill-Interactive-Strong); + background-color: var(--Dash-Fill-Interactive-Strong, #7f4bc4); } .dash-slider-root[data-orientation='vertical'] .dash-slider-range { @@ -57,8 +57,8 @@ display: block; width: 16px; height: 16px; - background-color: var(--Dash-Fill-Interactive-Strong); - border: 2px solid var(--Dash-Fill-Inverse-Strong); + background-color: var(--Dash-Fill-Interactive-Strong, #7f4bc4); + border: 2px solid var(--Dash-Fill-Inverse-Strong, #fff); border-radius: 50%; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); cursor: pointer; @@ -86,7 +86,7 @@ position: absolute; font-size: 12px; line-height: 12px; - color: var(--Dash-Text-Strong); + color: var(--Dash-Text-Strong, rgba(0, 9, 38, 0.9)); white-space: nowrap; pointer-events: none; } @@ -97,7 +97,7 @@ bottom: 100%; left: 50%; transform: translateX(-50%); - background-color: var(--Dash-Fill-Disabled); + background-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); width: 4px; height: 6px; border-radius: 2px; @@ -117,21 +117,21 @@ width: 8px; height: 8px; border-radius: 50%; - background-color: var(--Dash-Fill-Disabled); + background-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); } .dash-slider-tooltip { display: none; position: absolute; - border-radius: var(--Dash-Spacing); - padding: calc(var(--Dash-Spacing) * 3); + border-radius: var(--Dash-Spacing, 4px); + padding: calc(var(--Dash-Spacing, 4px) * 3); font-size: 12px; line-height: 1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); - background-color: var(--Dash-Fill-Inverse-Strong); + background-color: var(--Dash-Fill-Inverse-Strong, #fff); user-select: none; z-index: 1000; - fill: var(--Dash-Fill-Inverse-Strong); + fill: var(--Dash-Fill-Inverse-Strong, #fff); } .dash-slider-tooltip.always-visible { @@ -140,7 +140,7 @@ /* Include property to mimic rc-slider behavior */ .dash-slider-root:not([data-included='false']) .dash-slider-range { - background-color: var(--Dash-Fill-Interactive-Strong); + background-color: var(--Dash-Fill-Interactive-Strong, #7f4bc4); } .dash-slider-root[data-included='false'] .dash-slider-range { @@ -154,16 +154,16 @@ } .dash-slider-root[data-disabled] .dash-slider-track { - background-color: var(--Dash-Fill-Disabled); + background-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); } .dash-slider-root[data-disabled] .dash-slider-range { - background-color: var(--Dash-Fill-Disabled); + background-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); } .dash-slider-root[data-disabled] .dash-slider-thumb { cursor: not-allowed; - border-color: var(--Dash-Fill-Disabled); + border-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); } .dash-slider-container { From 5a649c465cc7e450ca5728d8eb5d86ba5615016c Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Mon, 29 Sep 2025 15:26:07 -0600 Subject: [PATCH 5/7] empty commit for ci From acde80337fdaa0bad775a0ae6a13df056a0d7c2a Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Mon, 29 Sep 2025 16:03:34 -0600 Subject: [PATCH 6/7] fix tests that started failing due to adjusted slider input widths --- .../tests/integration/misc/test_persistence.py | 2 +- .../tests/integration/sliders/test_sliders.py | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/dash-core-components/tests/integration/misc/test_persistence.py b/components/dash-core-components/tests/integration/misc/test_persistence.py index abc9a88d5f..f0df98c18d 100644 --- a/components/dash-core-components/tests/integration/misc/test_persistence.py +++ b/components/dash-core-components/tests/integration/misc/test_persistence.py @@ -168,7 +168,7 @@ def make_output(*args): ["4️⃣", "6️⃣"], "yes maybe", "r", - [5, 9], + [5, 8], 22, "C", "knock knock\nwho's there?", diff --git a/components/dash-core-components/tests/integration/sliders/test_sliders.py b/components/dash-core-components/tests/integration/sliders/test_sliders.py index e07e9b4c77..51f6c580dd 100644 --- a/components/dash-core-components/tests/integration/sliders/test_sliders.py +++ b/components/dash-core-components/tests/integration/sliders/test_sliders.py @@ -30,7 +30,7 @@ def update_output(value): dash_dcc.click_at_coord_fractions(slider, 0.5, 0.25) dash_dcc.wait_for_text_to_equal("#out", "You have selected 11") dash_dcc.click_at_coord_fractions(slider, 0.75, 0.25) - dash_dcc.wait_for_text_to_equal("#out", "You have selected 17") + dash_dcc.wait_for_text_to_equal("#out", "You have selected 16") assert dash_dcc.get_logs() == [] @@ -265,7 +265,7 @@ def update_output2(value): dash_dcc.click_and_hold_at_coord_fractions(slider, 0.25, 0.25) dash_dcc.move_to_coord_fractions(slider, 0.75, 0.25) - dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 17") + dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 16") dash_dcc.move_to_coord_fractions(slider, 0.5, 0.25) dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 11") dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5") From ff61bcd8ea96d0bbedeb9bc2310fa63210f3b466 Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Mon, 29 Sep 2025 16:10:48 -0600 Subject: [PATCH 7/7] Revert "Add fallback values to CSS variables" This reverts commit d5129108a5f530547cfd65f5a1beea6a55f4f955. --- .../src/components/css/input.css | 20 ++++++------- .../src/components/css/sliders.css | 30 +++++++++---------- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/components/dash-core-components/src/components/css/input.css b/components/dash-core-components/src/components/css/input.css index a6187bb292..ef4e444c1e 100644 --- a/components/dash-core-components/src/components/css/input.css +++ b/components/dash-core-components/src/components/css/input.css @@ -5,9 +5,9 @@ align-items: center; width: 170px; /* default input width */ height: 32px; - background: var(--Dash-Fill-Inverse-Strong, #fff); - border-radius: var(--Dash-Spacing, 4px); - border: 1px solid var(--Dash-Stroke-Strong, rgba(0, 18, 77, 0.45)); + background: var(--Dash-Fill-Inverse-Strong); + border-radius: var(--Dash-Spacing); + border: 1px solid var(--Dash-Stroke-Strong); box-sizing: border-box; container-type: inline-size; vertical-align: middle; @@ -21,11 +21,11 @@ /* Input field styles */ .dash-input-element { - padding: var(--Dash-Spacing, 4px) calc(2 * var(--Dash-Spacing, 4px)); + padding: var(--Dash-Spacing) calc(2 * var(--Dash-Spacing)); color: inherit; background: inherit; border: none; - border-radius: var(--Dash-Spacing, 4px); + border-radius: var(--Dash-Spacing); flex: 1 1 0; min-width: 0; height: 100%; @@ -66,23 +66,23 @@ width: 32px; height: 100%; border: none; - background: var(--Dash-Fill-Inverse-Strong, #fff); + background: var(--Dash-Fill-Inverse-Strong); cursor: pointer; font-size: 16px; font-weight: bold; - color: var(--Dash-Text-Primary, rgba(0, 18, 77, 0.87)); + color: var(--Dash-Text-Primary); } .dash-input-stepper:hover { - background: var(--Dash-Fill-Primary-Hover, rgba(0, 18, 77, 0.04)); + background: var(--Dash-Fill-Primary-Hover); } .dash-input-stepper:active { - background: var(--Dash-Fill-Primary-Active, rgba(0, 18, 77, 0.08)); + background: var(--Dash-Fill-Primary-Active); } .dash-input-stepper:disabled { - background: var(--Dash-Fill-Inverse-Strong, #fff); + background: var(--Dash-Fill-Inverse-Strong); opacity: 0.5; cursor: default; } diff --git a/components/dash-core-components/src/components/css/sliders.css b/components/dash-core-components/src/components/css/sliders.css index 514c0b9c9c..b36cf71785 100644 --- a/components/dash-core-components/src/components/css/sliders.css +++ b/components/dash-core-components/src/components/css/sliders.css @@ -32,7 +32,7 @@ flex-grow: 1; border-radius: 9999px; height: 4px; - background-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); + background-color: var(--Dash-Fill-Disabled); } .dash-slider-root[data-orientation='vertical'] .dash-slider-track { @@ -45,7 +45,7 @@ position: absolute; border-radius: 9999px; height: 100%; - background-color: var(--Dash-Fill-Interactive-Strong, #7f4bc4); + background-color: var(--Dash-Fill-Interactive-Strong); } .dash-slider-root[data-orientation='vertical'] .dash-slider-range { @@ -59,8 +59,8 @@ display: block; width: 16px; height: 16px; - background-color: var(--Dash-Fill-Interactive-Strong, #7f4bc4); - border: 2px solid var(--Dash-Fill-Inverse-Strong, #fff); + background-color: var(--Dash-Fill-Interactive-Strong); + border: 2px solid var(--Dash-Fill-Inverse-Strong); border-radius: 50%; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); cursor: pointer; @@ -88,7 +88,7 @@ position: absolute; font-size: 12px; line-height: 12px; - color: var(--Dash-Text-Strong, rgba(0, 9, 38, 0.9)); + color: var(--Dash-Text-Strong); white-space: nowrap; pointer-events: none; } @@ -99,7 +99,7 @@ bottom: 100%; left: 50%; transform: translateX(-50%); - background-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); + background-color: var(--Dash-Fill-Disabled); width: 4px; height: 6px; border-radius: 2px; @@ -119,21 +119,21 @@ width: 8px; height: 8px; border-radius: 50%; - background-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); + background-color: var(--Dash-Fill-Disabled); } .dash-slider-tooltip { display: none; position: absolute; - border-radius: var(--Dash-Spacing, 4px); - padding: calc(var(--Dash-Spacing, 4px) * 3); + border-radius: var(--Dash-Spacing); + padding: calc(var(--Dash-Spacing) * 3); font-size: 12px; line-height: 1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); - background-color: var(--Dash-Fill-Inverse-Strong, #fff); + background-color: var(--Dash-Fill-Inverse-Strong); user-select: none; z-index: 1000; - fill: var(--Dash-Fill-Inverse-Strong, #fff); + fill: var(--Dash-Fill-Inverse-Strong); } .dash-slider-tooltip.always-visible { @@ -142,7 +142,7 @@ /* Include property to mimic rc-slider behavior */ .dash-slider-root:not([data-included='false']) .dash-slider-range { - background-color: var(--Dash-Fill-Interactive-Strong, #7f4bc4); + background-color: var(--Dash-Fill-Interactive-Strong); } .dash-slider-root[data-included='false'] .dash-slider-range { @@ -156,16 +156,16 @@ } .dash-slider-root[data-disabled] .dash-slider-track { - background-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); + background-color: var(--Dash-Fill-Disabled); } .dash-slider-root[data-disabled] .dash-slider-range { - background-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); + background-color: var(--Dash-Fill-Disabled); } .dash-slider-root[data-disabled] .dash-slider-thumb { cursor: not-allowed; - border-color: var(--Dash-Fill-Disabled, rgba(0, 24, 102, 0.1)); + border-color: var(--Dash-Fill-Disabled); } .dash-slider-container {