diff --git a/docs/support.md b/docs/support.md index a94b3ba55..04f4a858c 100644 --- a/docs/support.md +++ b/docs/support.md @@ -28,8 +28,8 @@ Current browsers and versions supported: Browser | Version ------- | ------- -Chrome | 112 + -Edge | 112 + +Chrome | 120 + +Edge | 120 + Firefox | 119 + Safari* | 16.4 + diff --git a/field/internal/_outlined-field.scss b/field/internal/_outlined-field.scss index dac42d682..16a129935 100644 --- a/field/internal/_outlined-field.scss +++ b/field/internal/_outlined-field.scss @@ -324,17 +324,6 @@ $_md-sys-motion: tokens.md-sys-motion-values(); inset-inline-start: var(--_focus-outline-width); } - // TODO(https://bugs.chromium.org/p/chromium/issues/detail?id=1420655): - // remove :host and :host-context once Chrome supports :dir - :host-context([dir='rtl']), - :host([dir='rtl']) { - .resizable .container { - clip-path: inset( - var(--_focus-outline-width) var(--_focus-outline-width) 0 0 - ); - } - } - .resizable .container:dir(rtl) { clip-path: inset( var(--_focus-outline-width) var(--_focus-outline-width) 0 0 diff --git a/progress/internal/_linear-progress.scss b/progress/internal/_linear-progress.scss index 086e08cb2..3a524be60 100644 --- a/progress/internal/_linear-progress.scss +++ b/progress/internal/_linear-progress.scss @@ -171,13 +171,6 @@ $_indeterminate-duration: 2s; calc($_indeterminate-duration * 2); } - // TODO(https://bugs.chromium.org/p/chromium/issues/detail?id=1420655): - // remove :host and :host-context once Chrome supports :dir - :host-context([dir='rtl']), - :host([dir='rtl']) { - transform: scale(-1); - } - :host(:dir(rtl)) { transform: scale(-1); } diff --git a/slider/internal/_slider.scss b/slider/internal/_slider.scss index 9a7bf908f..f09a1ce7f 100644 --- a/slider/internal/_slider.scss +++ b/slider/internal/_slider.scss @@ -201,11 +201,11 @@ $_md-sys-shape: tokens.md-sys-shape-values(); } // rtl for active track clipping - @include _get-rtl-selectors('.track', '::after') { + .track:dir(rtl)::after { clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip); } - @include _get-rtl-selectors('.tickmarks', '::after') { + .tickmarks:dir(rtl)::after { clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip); } @@ -440,7 +440,7 @@ $_md-sys-shape: tokens.md-sys-shape-values(); } // in 'rtl', clip right side of "lesser" input - @include _get-rtl-selectors('.ranged input.start') { + .ranged input.start:dir(rtl) { clip-path: inset(0 0 0 $_clip-to-end); } @@ -450,7 +450,7 @@ $_md-sys-shape: tokens.md-sys-shape-values(); } // in 'rtl', clip left side of "greater" input - @include _get-rtl-selectors('.ranged input.end') { + .ranged input.end:dir(rtl) { clip-path: inset(0 $_clip-to-start 0 0); } @@ -477,28 +477,6 @@ $_md-sys-shape: tokens.md-sys-shape-values(); } } -// Creates a mixin of rtl selectors to construct distinct rulesets. If `:dir` is -// supported, then it will take precedence over `:host-context` via a `@supports -// not selector(:dir(rtl))` at-rule. Seprating rulesets ensure they are not -// dropped on browsers where one is not supported; -// Note, `:where` cannot be used to create compound selectors that contain -// pseudo elements -// (e.g. this does not work: `:where(:host([dir="rtl"]) .foo::after)`), -@mixin _get-rtl-selectors($selector: '', $suffix: '') { - $host-context-selectors: ':host-context([dir="rtl"]) #{$selector}#{$suffix}, :host([dir="rtl"]) #{$selector}#{$suffix}'; - $dir-selector: '#{$selector}:dir(rtl)#{$suffix}'; - - @supports not selector(:dir(rtl)) { - #{$host-context-selectors} { - @content; - } - } - - #{$dir-selector} { - @content; - } -} - // Returns a background-image with sized circular ticks of the given color. @function _get-tick-image($color) { @return radial-gradient( @@ -537,10 +515,7 @@ $_md-sys-shape: tokens.md-sys-shape-values(); transform: translateX(var(--_x-translate)); } - @include _get-rtl-selectors( - 'input.#{$start-or-end}', - '::-webkit-slider-thumb' - ) { + input.#{$start-or-end}:dir(rtl)::-webkit-slider-thumb { transform: translateX(calc(-1 * var(--_x-translate))); } }