diff --git a/.changeset/angry-moons-exist.md b/.changeset/angry-moons-exist.md new file mode 100644 index 00000000000..de4354edd23 --- /dev/null +++ b/.changeset/angry-moons-exist.md @@ -0,0 +1,9 @@ +--- +'@spectrum-web-components/slider': patch +--- + +[#​3611](https://github.com/adobe/spectrum-css/pull/3611) Thanks [@​aramos-adobe](https://github.com/aramos-adobe)! + +The border radius styles were not being applied to the second instance of the slider track when the offset variant is activated. When the offset is selected, the template structure changes as fill gets added to the slider. + +Adding a sibling combinator to track when offset is activated resolved the issue. diff --git a/packages/slider/package.json b/packages/slider/package.json index 678cceaaba9..bc62bd44c49 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -90,7 +90,7 @@ "@spectrum-web-components/theme": "1.4.0" }, "devDependencies": { - "@spectrum-css/slider": "6.0.1" + "@spectrum-css/slider": "6.3.0" }, "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 09dd4d3d019..be3571689f7 100644 --- a/packages/slider/src/spectrum-slider.css +++ b/packages/slider/src/spectrum-slider.css @@ -453,6 +453,11 @@ governing permissions and limitations under the License. background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); } +.track ~ .track:before { + border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); +} + .track:not(:has(~ .spectrum-Slider-fill)):before { background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); } @@ -508,6 +513,8 @@ governing permissions and limitations under the License. :host([variant='range']) .track:not(:first-of-type, :last-of-type):before { background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + border-start-end-radius: 0; + border-end-end-radius: 0; } :host([disabled]), @@ -595,11 +602,9 @@ governing permissions and limitations under the License. forced-color-adjust: none; } - :host([focus-within]) .js-focus-within:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls, :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, - :host([focus-within]):not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range).js-focus-within #controls { + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:focus-within { --highcontrast-slider-track-color: Highlight; --highcontrast-slider-handle-border-color: Highlight; --highcontrast-slider-ramp-track-color: Highlight; diff --git a/yarn.lock b/yarn.lock index 1f02d254cb3..1ab76e6dbe9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7574,13 +7574,18 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/slider@npm:6.0.1": - version: 6.0.1 - resolution: "@spectrum-css/slider@npm:6.0.1" +"@spectrum-css/slider@npm:6.3.0": + version: 6.3.0 + resolution: "@spectrum-css/slider@npm:6.3.0" peerDependencies: - "@spectrum-css/stepper": ">=6" - "@spectrum-css/tokens": ">=14 || >=15" - checksum: 10c0/84c262e874ec01e5b22ab84c5562bd2ce820a1c45510807b90e8e301f41e9c278029d11cc99bc205ad1c304b9293c5a5f3e8de7eb3ee5393858e2744f3610bef + "@spectrum-css/stepper": ">=7.0.0 <8.0.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + peerDependenciesMeta: + "@spectrum-css/stepper": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/21d68772a025bd0cc902e2586df5d09672a2f3182eef5b2355c3a8898303e614ef3b76fe579dabc3a094d746d1149117cabbfdf51da12cd276ed8e5e26f645f3 languageName: node linkType: hard @@ -8705,7 +8710,7 @@ __metadata: dependencies: "@internationalized/number": "npm:^3.6.0" "@lit-labs/observers": "npm:^2.0.2" - "@spectrum-css/slider": "npm:6.0.1" + "@spectrum-css/slider": "npm:6.3.0" "@spectrum-web-components/base": "npm:1.4.0" "@spectrum-web-components/field-label": "npm:1.4.0" "@spectrum-web-components/number-field": "npm:1.4.0"