diff --git a/.circleci/config.yml b/.circleci/config.yml index 3882d8a012..1cd92d42c5 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 05afdc523f9693f606a7aa613f6e6c5988c90161 + default: 544d1b8027472155a6a451074fdbf96a5b4bf304 wireit_cache_name: type: string default: wireit diff --git a/packages/slider/package.json b/packages/slider/package.json index 76f51d360d..e240b4d96c 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -83,7 +83,7 @@ "@spectrum-web-components/theme": "^0.40.5" }, "devDependencies": { - "@spectrum-css/slider": "^4.3.0" + "@spectrum-css/slider": "^4.3.2" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css index 391e8798f2..c4e973350e 100644 --- a/packages/slider/src/spectrum-slider.css +++ b/packages/slider/src/spectrum-slider.css @@ -716,6 +716,12 @@ governing permissions and limitations under the License. overflow: hidden; } .track:before { + background: var( + --highcontrast-slider-track-color-static, + var(--mod-slider-track-color, var(--spectrum-slider-track-color)) + ); +} +.track:not(:has(~ .spectrum-Slider-fill)):before { background: var( --highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color)) @@ -732,7 +738,7 @@ governing permissions and limitations under the License. } :host([variant='filled']) .track:first-child:before { background: var( - --highcontrast-slider-track-fill-color, + --highcontrast-slider-filled-track-fill-color, var( --mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color) @@ -741,7 +747,7 @@ governing permissions and limitations under the License. } .fill:before { background: var( - --highcontrast-slider-track-fill-color, + --highcontrast-slider-filled-track-fill-color, var( --mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color) @@ -847,9 +853,9 @@ governing permissions and limitations under the License. ) ); } -:host([variant='range']) .track:not(:first-of-type):not(:last-of-type):before { +:host([variant='range']) .track:not(:first-of-type, :last-of-type):before { background: var( - --highcontrast-slider-track-fill-icolor, + --highcontrast-slider-filled-track-fill-color, var( --mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color) @@ -976,7 +982,7 @@ governing permissions and limitations under the License. ); } :host([disabled][variant='range']) - .track:not(:first-of-type):not(:last-of-type):before { + .track:not(:first-of-type, :last-of-type):before { background: var( --highcontrast-slider-track-color-disabled, var( @@ -988,7 +994,9 @@ governing permissions and limitations under the License. @media (forced-colors: active) { :host { --highcontrast-slider-track-color: ButtonText; + --highcontrast-slider-track-color-static: ButtonText; --highcontrast-slider-track-fill-color: ButtonText; + --highcontrast-slider-filled-track-fill-color: Highlight; --highcontrast-slider-ramp-track-color: ButtonText; --highcontrast-slider-ramp-track-color-disabled: GrayText; --highcontrast-slider-tick-mark-color: ButtonText; @@ -1027,9 +1035,12 @@ governing permissions and limitations under the License. :host([variant='ramp']) .handle { forced-color-adjust: none; } - :host:not(.is-disabled) #controls.handle-highlight, - :host:not(.is-disabled) #controls:active, - :host:not(.is-disabled) #controls:focus-within { + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) + #controls.handle-highlight, + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) + #controls:active, + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) + #controls:focus-within { --highcontrast-slider-track-fill-color: Highlight; --highcontrast-slider-track-color: Highlight; --highcontrast-slider-handle-border-color: Highlight; @@ -1037,7 +1048,8 @@ governing permissions and limitations under the License. --highcontrast-slider-tick-mark-color: Highlight; } @media (hover: hover) { - :host:not(.is-disabled) #controls:hover { + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) + #controls:hover { --highcontrast-slider-track-fill-color: Highlight; --highcontrast-slider-track-color: Highlight; --highcontrast-slider-handle-border-color: Highlight; diff --git a/yarn.lock b/yarn.lock index ecee9bb86b..062bddec61 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5887,7 +5887,7 @@ resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== -"@playwright/test@1.41.2", "@playwright/test@^1.41.2": +"@playwright/test@^1.41.2": version "1.41.2" resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.41.2.tgz#bd9db40177f8fd442e16e14e0389d23751cdfc54" integrity sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg== @@ -6861,10 +6861,10 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-4.2.0.tgz#078cafc2788f5f43ac070f28ccc70e58fd07fec7" integrity sha512-OTykAnooYpSVJRyeQi/pprcS/A2q8jqp+dlQOfHqkw5Zmyij3Qsv5qIjwzPwscfxwChuhla/hEI5aqyIuH3MYQ== -"@spectrum-css/slider@^4.3.0": - version "4.3.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-4.3.1.tgz#f1f97755d7d443eb89f596f46009d246ba787ea9" - integrity sha512-r5tYFuAGi5qom9rYD7hgG/CBA/PmNe4KGtf3GNyXv3+jVDQaFIgv2by7eNBsvBAhoKR7xB1u7rqHh/dTmfSobg== +"@spectrum-css/slider@^4.3.2": + version "4.3.2" + resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-4.3.2.tgz#75d83230b81f3e54bc97f2c88298848bade538d8" + integrity sha512-mrq8d/9v8wn+UDOINkWQkYeJJi3BmH7w6Taj8l6fswBFFNQ89MtZ2jBJuwWs74hGaaletpYj0Y+kchNQ5LFgnA== "@spectrum-css/splitbutton@^8.1.0": version "8.1.0"