feat: remove dir polyfill [CSS-222]

[castastrophe]

Description

This PR removes the dir attribute polyfill (served via a PostCSS transform to compiled assets) as the fallback is no longer necessary. The dir attribute support is available in all supported browsers and has been tested to correctly inherit inside web component shadow DOMs.

Breaking change: This is a breaking change only to those relying on the dir attribute being present for styling, however, the :dir pseudo will correctly inherit values from their containers. To correctly determine the dir value of a node using JavaScript, you can use getComputedStyle(node).direction.

Components affected: This change affects 22 components that previously relied on the dir polyfill:

• accordion, actionbutton, assetlist, breadcrumb, calendar, colorarea, colorloupe, colorslider, colorwheel, combobox, menu, pagination, popover, progressbar, radio, slider, steplist, switch, table, tabs, tooltip, treeview

Technical changes:

• Removed "dir-pseudo-class": { preserve: true } from PostCSS config
• Updated metadata.json files across all affected components to remove [dir="rtl"] selectors
• Added changeset for major version bumps on all affected components

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

1. Test RTL layout in accordion component: @marissahuysentruyt

   • Open accordion storybook and set page direction to RTL
   • Verify accordion chevron icons flip correctly
   • Confirm accordion content flows right-to-left
   • Test keyboard navigation in RTL mode

2. Test RTL layout in breadcrumb component: @marissahuysentruyt

   • Open breadcrumb storybook and set page direction to RTL
   • Verify breadcrumb separator positioning is correct
   • Confirm breadcrumb items flow right-to-left
   • Test breadcrumb navigation in RTL mode

3. Test RTL layout in calendar component: @marissahuysentruyt

   • Open calendar storybook and set page direction to RTL
   • Verify calendar navigation arrows point in correct direction
   • Confirm calendar grid layout adapts to RTL
   • Test date selection in RTL mode

4. Test RTL layout in pagination component: @marissahuysentruyt

   • Open pagination storybook and set page direction to RTL
   • Verify previous/next button positioning is correct
   • Confirm page numbers flow right-to-left
   • Test pagination navigation in RTL mode

5. Test RTL layout in tabs component: @marissahuysentruyt

   • Open tabs storybook and set page direction to RTL
   • Verify tab indicators and borders are positioned correctly
   • Confirm tab content flows right-to-left
   • Test tab switching in RTL mode

6. Test that getComputedStyle(node).direction returns correct values: @marissahuysentruyt

   • Create test elements with dir="ltr" and dir="rtl" attributes
   • Verify getComputedStyle(node).direction returns "ltr" and "rtl" respectively
   • Test with nested elements to confirm inheritance works
   • Verify behavior in web component shadow DOMs

7. Run component comparison:

   • Execute yarn component:compare to verify changes against published versions
   • Review diff output to ensure only [dir="rtl"] selectors were removed
   • Confirm that :dir(rtl) selectors remain intact
   • Verify file size reductions in compiled CSS

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• The pages render correctly, are accessible, and are responsive.

2. If components have been modified, VRTs have been run on this branch:

• VRTs have been run and looked at.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

No visual changes expected - this is a technical cleanup removing polyfill code that is no longer needed.

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: fd04a38

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

This PR includes changesets to release 24 packages

Name	Type
@spectrum-css/actionbutton	Major
@spectrum-css/colorslider	Major
@spectrum-css/progressbar	Major
@spectrum-css/breadcrumb	Major
@spectrum-css/colorloupe	Major
@spectrum-css/colorwheel	Major
@spectrum-css/pagination	Major
@spectrum-css/accordion	Major
@spectrum-css/assetlist	Major
@spectrum-css/colorarea	Major
@spectrum-css/calendar	Major
@spectrum-css/combobox	Major
@spectrum-css/steplist	Major
@spectrum-css/treeview	Major
@spectrum-css/popover	Major
@spectrum-css/tooltip	Major
@spectrum-css/slider	Major
@spectrum-css/switch	Major
@spectrum-css/radio	Major
@spectrum-css/table	Major
@spectrum-css/menu	Major
@spectrum-css/tabs	Major
@spectrum-css/bundle	Patch
@spectrum-css/preview	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]

File metrics

Summary

Total size: 1.43 MB^*
✅ No change in file sizes

Package	Size	Minified	Gzipped
accordion	21.41 KB	20.56 KB	2.63 KB
actionbutton	23.95 KB	22.88 KB	3.05 KB
assetlist	7.28 KB	6.88 KB	1.49 KB
breadcrumb	13.74 KB	13.12 KB	2.14 KB
calendar	19.46 KB	18.46 KB	2.71 KB
colorarea	3.62 KB	3.42 KB	1.02 KB
colorloupe	3.92 KB	3.74 KB	1.03 KB
colorslider	4.08 KB	3.84 KB	1.07 KB
colorwheel	5.47 KB	5.15 KB	1.35 KB
combobox	27.42 KB	26.33 KB	3.21 KB
menu	48.28 KB	45.99 KB	5.13 KB
pagination	2.24 KB	2.14 KB	0.76 KB
popover	16.00 KB	15.42 KB	2.00 KB
progressbar	9.34 KB	8.87 KB	1.68 KB
radio	15.86 KB	15.04 KB	2.23 KB
slider	29.40 KB	27.73 KB	3.67 KB
steplist	9.80 KB	9.22 KB	1.67 KB
switch	25.38 KB	24.23 KB	2.73 KB
table	47.18 KB	44.96 KB	5.32 KB
tooltip	28.65 KB	27.55 KB	2.91 KB
treeview	17.53 KB	16.58 KB	2.40 KB

File change details

accordion

Filename	Head	Minified	Gzipped	Compared to base
index.css	21.41 KB	20.56 KB	2.63 KB	🟢 ⬇ 0.03 KB
metadata.json	11.43 KB	-	-	🟢 ⬇ 0.04 KB

actionbutton

Filename	Head	Minified	Gzipped	Compared to base
index.css	23.95 KB	22.88 KB	3.05 KB	🟢 ⬇ 0.04 KB
metadata.json	10.26 KB	-	-	🟢 ⬇ 0.04 KB

assetlist

Filename	Head	Minified	Gzipped	Compared to base
index.css	7.28 KB	6.88 KB	1.49 KB	🟢 ⬇ 0.03 KB
metadata.json	3.85 KB	-	-	🟢 ⬇ 0.04 KB

breadcrumb

Filename	Head	Minified	Gzipped	Compared to base
index.css	13.74 KB	13.12 KB	2.14 KB	🟢 ⬇ 0.05 KB
metadata.json	7.44 KB	-	-	🟢 ⬇ 0.06 KB

calendar

Filename	Head	Minified	Gzipped	Compared to base
index.css	19.46 KB	18.46 KB	2.71 KB	🟢 ⬇ 0.03 KB
metadata.json	9.02 KB	-	-	🟢 ⬇ 0.04 KB

colorarea

Filename	Head	Minified	Gzipped	Compared to base
index.css	3.62 KB	3.42 KB	1.02 KB	🟢 ⬇ 0.04 KB
metadata.json	1.64 KB	-	-	🟢 ⬇ 0.05 KB

colorloupe

Filename	Head	Minified	Gzipped	Compared to base
index.css	3.92 KB	3.74 KB	1.03 KB	🟢 ⬇ 0.03 KB
metadata.json	2.30 KB	-	-	🟢 ⬇ 0.04 KB

colorslider

Filename	Head	Minified	Gzipped	Compared to base
index.css	4.08 KB	3.84 KB	1.07 KB	🟢 ⬇ 0.04 KB
metadata.json	2.06 KB	-	-	🟢 ⬇ 0.05 KB

colorwheel

Filename	Head	Minified	Gzipped	Compared to base
index.css	5.47 KB	5.15 KB	1.35 KB	🟢 ⬇ 0.05 KB
metadata.json	2.00 KB	-	-	🟢 ⬇ 0.06 KB

combobox

Filename	Head	Minified	Gzipped	Compared to base
index.css	27.42 KB	26.33 KB	3.21 KB	🟢 ⬇ 0.05 KB
metadata.json	16.62 KB	-	-	🟢 ⬇ 0.06 KB

menu

Filename	Head	Minified	Gzipped	Compared to base
index.css	48.28 KB	45.99 KB	5.13 KB	🟢 ⬇ 0.05 KB
metadata.json	23.75 KB	-	-	🟢 ⬇ 0.06 KB

pagination

Filename	Head	Minified	Gzipped	Compared to base
index.css	2.24 KB	2.14 KB	0.76 KB	🟢 ⬇ 0.03 KB
metadata.json	1.24 KB	-	-	🟢 ⬇ 0.04 KB

popover

Filename	Head	Minified	Gzipped	Compared to base
index.css	16.00 KB	15.42 KB	2.00 KB	🟢 ⬇ 0.82 KB
metadata.json	7.30 KB	-	-	🟢 ⬇ 0.92 KB

progressbar

Filename	Head	Minified	Gzipped	Compared to base
index.css	9.34 KB	8.87 KB	1.68 KB	🟢 ⬇ 0.08 KB
metadata.json	5.28 KB	-	-	🟢 ⬇ 0.09 KB

radio

Filename	Head	Minified	Gzipped	Compared to base
index.css	15.86 KB	15.04 KB	2.23 KB	🟢 ⬇ 0.06 KB
metadata.json	8.86 KB	-	-	🟢 ⬇ 0.07 KB

slider

Filename	Head	Minified	Gzipped	Compared to base
index.css	29.40 KB	27.73 KB	3.67 KB	🟢 ⬇ 0.09 KB
metadata.json	12.71 KB	-	-	🟢 ⬇ 0.11 KB

steplist

Filename	Head	Minified	Gzipped	Compared to base
index.css	9.80 KB	9.22 KB	1.67 KB	🟢 ⬇ 0.18 KB
metadata.json	4.63 KB	-	-	🟢 ⬇ 0.21 KB

switch

Filename	Head	Minified	Gzipped	Compared to base
index.css	25.38 KB	24.23 KB	2.73 KB	🟢 ⬇ 0.31 KB
metadata.json	13.21 KB	-	-	🟢 ⬇ 0.33 KB

table

Filename	Head	Minified	Gzipped	Compared to base
index.css	47.18 KB	44.96 KB	5.32 KB	🟢 ⬇ 0.03 KB
metadata.json	22.06 KB	-	-	🟢 ⬇ 0.04 KB

tooltip

Filename	Head	Minified	Gzipped	Compared to base
index.css	28.65 KB	27.55 KB	2.91 KB	🟢 ⬇ 3.32 KB
metadata.json	16.84 KB	-	-	🟢 ⬇ 3.72 KB

treeview

Filename	Head	Minified	Gzipped	Compared to base
index.css	17.53 KB	16.58 KB	2.40 KB	🟢 ⬇ 0.03 KB
metadata.json	8.40 KB	-	-	🟢 ⬇ 0.04 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[github-actions]

📚 Branch preview

PR #4014 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-4014/index.html.

[castastrophe]

Manual VRT compare: https://www.chromatic.com/review?appId=64762974a45b8bc5ca1705a2&number=35&type=unlinked&view=activity

It uncovered only 1 diff which seems to have just been a test blip off spectrum-two's last baseline.

[marissahuysentruyt]

Checked all keyboard navigation and RTL content flow for each component. 👍 I noted some regressions with calendar and switch in RTL. I'm not sure if this is the PR to fix those, or if we wanted to make tickets for them.

For the compare, I did get infield progress circle surfaced. Looks like it's just white space changes, but want to mention it just in case.

[marissahuysentruyt]

👏👏👏👏

[marissahuysentruyt]

Do we need some additional CSS to fix the chevron from flipping? In the video, if I click the action buttons to advance the month, the chevron flips when the button is active.

Screen.Recording.2025-07-28.at.2.05.57.PM.mov

I think it's because of this transform:

spectrum-css/components/calendar/index.css

Line 180 in cc65f04

transform: var(--spectrum-logical-rotation,);

I don't think we can remove that line, but maybe we add the .spectrum-Calendar-prevMonth:active and
.spectrum-Calendar-nextMonth:active selectors, to the block? You might know of a more elegant solution.

[castastrophe]

Yes, great call-out. Let me take a look. I think this is the perfect place to make that update since this is a breaking change PR specifically to allow these styles to be used without the [dir] attribute polyfill.

[marissahuysentruyt]

We might have to address the switch too. When I select the switch in RTL, the position of the .spectrum-Switch-switch:before element isn't quite right. I haven't dug into where this is coming from though...

[marissahuysentruyt]

This one looks to already be in the spectrum-two branch, so maybe this is a bug. I can make a ticket for it!

[marissahuysentruyt]

looks great!