diff --git a/packages/slider/package.json b/packages/slider/package.json index f35bffacb4..a9bb181449 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -83,7 +83,7 @@ "@spectrum-web-components/theme": "^0.47.0" }, "devDependencies": { - "@spectrum-css/slider": "^5.1.0" + "@spectrum-css/slider": "^5.2.4" }, "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 842fbbf104..78bb016eb1 100644 --- a/packages/slider/src/spectrum-slider.css +++ b/packages/slider/src/spectrum-slider.css @@ -133,6 +133,9 @@ governing permissions and limitations under the License. --spectrum-slider-label-text-color: var( --spectrum-neutral-content-color-default ); + --spectrum-slider-tick-label-color: var( + --spectrum-neutral-content-color-default + ); --spectrum-slider-label-text-color-disabled: var( --spectrum-disabled-content-color ); @@ -145,7 +148,7 @@ governing permissions and limitations under the License. ); --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); --spectrum-slider-range-track-reset: 0; - z-index: 1; + z-index: 0; min-inline-size: var( --mod-slider-min-size, var(--spectrum-slider-min-size) @@ -531,7 +534,7 @@ governing permissions and limitations under the License. transform: translate(-50%, -50%); } -.handle:dir(rtl):before, +:host:dir(rtl) .handle:before, :host([dir='rtl']) .handle:before { transform: translate(50%, -50%); } @@ -716,6 +719,13 @@ governing permissions and limitations under the License. .tick .tickLabel { font-size: var(--mod-font-size-75, var(--spectrum-font-size-75)); line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + color: var( + --highcontrast-slider-label-text-color, + var( + --mod-slider-tick-label-color, + var(--spectrum-slider-tick-label-color) + ) + ); justify-content: center; align-items: center; display: flex; @@ -913,7 +923,7 @@ 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-filled-track-fill-color, var( @@ -1043,7 +1053,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( @@ -1056,65 +1066,51 @@ governing permissions and limitations under the License. @media (forced-colors: active) { :host { --highcontrast-slider-track-color: ButtonText; + --highcontrast-slider-track-color-disabled: GrayText; --highcontrast-slider-track-color-static: ButtonText; --highcontrast-slider-track-fill-color: ButtonText; + --highcontrast-slider-track-fill-color-disabled: GrayText; --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; + --highcontrast-slider-tick-mark-color-disabled: GrayText; --highcontrast-slider-handle-border-color: ButtonText; --highcontrast-slider-handle-border-color-hover: Highlight; --highcontrast-slider-handle-border-color-down: Highlight; --highcontrast-slider-handle-border-color-key-focus: Highlight; + --highcontrast-slider-handle-border-color-disabled: GrayText; --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText; --highcontrast-slider-handle-background-color: ButtonFace; + --highcontrast-slider-handle-background-color-disabled: GrayText; + --highcontrast-slider-handle-disabled-background-color: GrayText; --highcontrast-slider-ramp-handle-border-color-active: ButtonFace; --highcontrast-slider-ramp-handle-background-color: ButtonFace; - --spectrum-slider-track-color: ButtonText; - --spectrum-slider-track-fill-color: ButtonText; - --spectrum-slider-ramp-track-color: ButtonText; - --spectrum-slider-ramp-track-color-disabled: GrayText; - --spectrum-slider-handle-background-color: ButtonFace; - --spectrum-slider-handle-background-color-disabled: GrayText; - --spectrum-slider-handle-border-color: ButtonText; - --spectrum-slider-handle-disabled-background-color: GrayText; - --spectrum-slider-tick-mark-color: ButtonText; - --spectrum-slider-tick-mark-color-disabled: GrayText; - --spectrum-slider-handle-border-color-hover: Highlight; - --spectrum-slider-handle-border-color-down: Highlight; - --spectrum-slider-handle-border-color-key-focus: Highlight; - --spectrum-slider-handle-focus-ring-color-key-focus: Highlight; - --spectrum-slider-track-color-disabled: GrayText; - --spectrum-slider-track-fill-color-disabled: GrayText; - --spectrum-slider-handle-border-color-disabled: GrayText; - --spectrum-slider-label-text-color: CanvasText; - --spectrum-slider-label-text-color-disabled: GrayText; - --spectrum-slider-ramp-handle-border-color-active: ButtonText; + --highcontrast-slider-label-text-color: CanvasText; + --highcontrast-slider-label-text-color-disabled: GrayText; } - :host([variant='ramp']) .handle, - .handle.handle-highlight:before { + .handle.handle-highlight:before, + :host([variant='ramp']) .handle { forced-color-adjust: none; } :host([focus-within]) - .js-focus-within:not(.is-disabled):not(.spectrum-Slider--filled):not( + .js-focus-within:not( + .is-disabled, + .spectrum-Slider--filled, .spectrum-Slider--range ) #controls, - :host:not(.is-disabled):not(.spectrum-Slider--filled):not( - .spectrum-Slider--range - ) + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls.handle-highlight, - :host:not(.is-disabled):not(.spectrum-Slider--filled):not( - .spectrum-Slider--range - ) + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:active, - :host:not(.is-disabled):not(.spectrum-Slider--filled):not( - .spectrum-Slider--range - ) + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:focus-within, - :host([focus-within]):not(.is-disabled):not(.spectrum-Slider--filled):not( + :host([focus-within]):not( + .is-disabled, + .spectrum-Slider--filled, .spectrum-Slider--range ).js-focus-within #controls { @@ -1126,7 +1122,9 @@ governing permissions and limitations under the License. } @media (hover: hover) { - :host:not(.is-disabled):not(.spectrum-Slider--filled):not( + :host:not( + .is-disabled, + .spectrum-Slider--filled, .spectrum-Slider--range ) #controls:hover { diff --git a/patches/@spectrum-css+slider+5.1.0.patch b/patches/@spectrum-css+slider+5.1.0.patch deleted file mode 100644 index 941c08db04..0000000000 --- a/patches/@spectrum-css+slider+5.1.0.patch +++ /dev/null @@ -1,26 +0,0 @@ -diff --git a/node_modules/@spectrum-css/slider/dist/index-vars.css b/node_modules/@spectrum-css/slider/dist/index-vars.css -index 8af5c45..61d23f1 100644 ---- a/node_modules/@spectrum-css/slider/dist/index-vars.css -+++ b/node_modules/@spectrum-css/slider/dist/index-vars.css -@@ -293,7 +293,7 @@ governing permissions and limitations under the License. - border-radius: 100%; - transform: translate(-50%, -50%); - } --.spectrum-Slider-handle:before:dir(rtl), -+.spectrum-Slider-handle:dir(rtl):before, - [dir="rtl"] .spectrum-Slider-handle:before { - transform: translate(50%, -50%); - } -diff --git a/node_modules/@spectrum-css/slider/dist/index.css b/node_modules/@spectrum-css/slider/dist/index.css -index 8af5c45..61d23f1 100644 ---- a/node_modules/@spectrum-css/slider/dist/index.css -+++ b/node_modules/@spectrum-css/slider/dist/index.css -@@ -293,7 +293,7 @@ governing permissions and limitations under the License. - border-radius: 100%; - transform: translate(-50%, -50%); - } --.spectrum-Slider-handle:before:dir(rtl), -+.spectrum-Slider-handle:dir(rtl):before, - [dir="rtl"] .spectrum-Slider-handle:before { - transform: translate(50%, -50%); - } diff --git a/yarn.lock b/yarn.lock index 3ec23d49f8..923315f7e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5233,10 +5233,10 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-5.1.0.tgz#dee43b8e377c5f349f810540885e296b7c8741c1" integrity sha512-gV5KH03P+hj1pIFtWKi73TKiFth5gjEyZ8F+SpZ9hfQK3BRNtrbp8IulOW+d8My0bQlO+SloHxgYQYTHFthkuw== -"@spectrum-css/slider@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-5.1.0.tgz#e49d4062bf5482f5e47df12689e040a048164103" - integrity sha512-h+mB/ft0tGGHuxN7oXmB3QyaQANWB4BxQCT7/C9oRt3Nao/oM51E1WsOHaW9H+w7E1hSXRpOBxOI24Xfo4ZHiw== +"@spectrum-css/slider@^5.2.4": + version "5.2.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-5.2.4.tgz#5906629ff05974901463c31f0b5ea7ef2ee4d577" + integrity sha512-5cgJYmHOWXOaCB5OsW6en/mx2CoV/m9FR+Sm9yz9zsY2uBAFf5YWGhG8ahNQeDRLUQMPVOEbSGGwKPSitd/ojw== "@spectrum-css/splitbutton@^8.1.2": version "8.1.2" @@ -5349,7 +5349,7 @@ integrity sha512-rGfd7jqXOdR69bEjrRP58ynuIeJU0czPfwQvzhtCzg7jKVukV+efNHqrs086sC6xutB3W4TF71K/dZMr3oyTyg== "@spectrum-web-components/eslint-plugin@file:./linters/eslint": - version "0.46.0" + version "0.47.0" "@storybook/addon-a11y@^7.5.0": version "7.6.19" @@ -23793,7 +23793,16 @@ string-similarity@^4.0.4: resolved "https://registry.yarnpkg.com/string-similarity/-/string-similarity-4.0.4.tgz#42d01ab0b34660ea8a018da8f56a3309bb8b2a5b" integrity sha512-/q/8Q4Bl4ZKAPjj8WerIBJWALKkaPRfrvhfF8k/B23i4nzrlRj2/go1m90In7nG/3XDSbOo0+pu6RvCTM9RGMQ== -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -23922,7 +23931,7 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -23955,6 +23964,13 @@ strip-ansi@^5.1.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.0, strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -26557,7 +26573,7 @@ workbox-window@7.0.0: "@types/trusted-types" "^2.0.2" workbox-core "7.0.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -26575,6 +26591,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"