fix(slider,radio): dir before pseudo element

[mdt2]

Description

Per issue #2703 and #2704, some parsers see :pseudo:dir as invalid, so we've changed it so that the pseudo element comes last :dir :pseudo.

Before, the dist output was:

.spectrum-Slider-handle:before:dir(rtl),
[dir="rtl"] .spectrum-Slider-handle:before

.spectrum-Radio-button:after:dir(rtl),
[dir="rtl"] .spectrum-Radio-button:after

After, with this improvement, the dist output is:

.spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before,
[dir="rtl"] .spectrum-Slider .spectrum-Slider-handle:before {
  transform: translate(50%, -50%);
}

.spectrum-Radio:dir(rtl) .spectrum-Radio-button:after,
[dir="rtl"] .spectrum-Radio .spectrum-Radio-button:after {
  transform: translateX(50%) translateY(-50%);
}

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

• VRTs pass (@mdt2)

Slider

• Validate that the dist output looks correct after building locally
• Validate that the slider handle location looks correct in Storybook when RTL mode is on

Radio

• Validate that the dist output looks correct after building locally
• Validate that the radio focus looks correct in Storybook when RTL mode is on

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• I have tested these changes in Windows High Contrast mode.
• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: 9ccdc7a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@spectrum-css/slider	Patch
@spectrum-css/radio	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🚀 Deployed on https://pr-2744--spectrum-css.netlify.app

[github-actions]

File metrics

Summary

Total size: 4.65 MB^*
Total change (Δ): ⬆ 0.26 KB (0.01%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
radio	17.98 KB	⬆ 0.03 KB
slider	32.98 KB	⬆ 0.03 KB

Details

radio

File	Head	Base	Δ
index-base.css	16.91 KB	16.88 KB	⬆ 0.03 KB (0.19%)
index-theme.css	1.65 KB	1.65 KB	-
index-vars.css	17.98 KB	17.95 KB	⬆ 0.03 KB (0.17%)
index.css	17.98 KB	17.95 KB	⬆ 0.03 KB (0.17%)
metadata.json	9.30 KB	9.26 KB	⬆ 0.03 KB (0.34%)
themes/express.css	1.33 KB	1.33 KB	-
themes/spectrum.css	1.32 KB	1.32 KB	-

slider

File	Head	Base	Δ
index-base.css	30.64 KB	30.61 KB	⬆ 0.03 KB (0.11%)
index-theme.css	2.92 KB	2.92 KB	-
index-vars.css	32.98 KB	32.95 KB	⬆ 0.03 KB (0.10%)
index.css	32.98 KB	32.95 KB	⬆ 0.03 KB (0.10%)
metadata.json	14.17 KB	14.14 KB	⬆ 0.03 KB (0.23%)
themes/express.css	1.76 KB	1.76 KB	-
themes/spectrum.css	1.73 KB	1.73 KB	-

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[jawinn]

Looks good! I validated the changes in the dist output with yarn compare and looked at those two components in Storybook in RTL/LTR.

[castastrophe]

Can you take a look at the impact of changing the dir selector from querying locally to the component vs. looking to the root of the document? My thought is that if a product has a region of the page localized for example in a language requiring rtl, looking to the root element in the DOM tree will give the wrong result.