feat: remove dir polyfill [CSS-222] (#4014)

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.

Author: castastrophe

.changeset/shiny-taxis-tease.md

@@ -0,0 +1,26 @@
+---
+"@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
+---
+
+This update 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. 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/accordion/dist/metadata.json

@@ -35,8 +35,7 @@
     ".spectrum-Accordion:dir(rtl)",
     ".spectrum-Accordion:lang(ja)",
     ".spectrum-Accordion:lang(ko)",
-    ".spectrum-Accordion:lang(zh)",
-    "[dir=\"rtl\"] .spectrum-Accordion"
+    ".spectrum-Accordion:lang(zh)"
   ],
   "modifiers": [
     "--mod-accordion-animation-duration",

components/actionbutton/dist/metadata.json

@@ -36,7 +36,6 @@
     ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
     ".spectrum-ActionButton:hover",
     ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
-    "[dir=\"rtl\"] .spectrum-ActionButton",
     "a.spectrum-ActionButton"
   ],
   "modifiers": [

components/assetlist/dist/metadata.json

@@ -24,8 +24,7 @@
     ".spectrum-AssetList-itemChildIndicator",
     ".spectrum-AssetList-itemLabel",
     ".spectrum-AssetList-itemSelector",
-    ".spectrum-AssetList:dir(rtl)",
-    "[dir=\"rtl\"] .spectrum-AssetList"
+    ".spectrum-AssetList:dir(rtl)"
   ],
   "modifiers": [
     "--mod-assetlist-border-color-key-focus",

components/breadcrumb/dist/metadata.json

@@ -29,8 +29,7 @@
     ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible",
     ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover",
     ".spectrum-Breadcrumbs-itemSeparator",
-    ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)",
-    "[dir=\"rtl\"] .spectrum-Breadcrumbs-itemSeparator"
+    ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)"
   ],
   "modifiers": [
     "--mod-breadcrumbs-action-button-color",

components/calendar/dist/metadata.json

@@ -54,8 +54,7 @@
     ".spectrum-Calendar-tableCell",
     ".spectrum-Calendar-tableCell:focus",
     ".spectrum-Calendar-title",
-    ".spectrum-Calendar:dir(rtl)",
-    "[dir=\"rtl\"] .spectrum-Calendar"
+    ".spectrum-Calendar:dir(rtl)"
   ],
   "modifiers": [
     "--mod-calendar-border-radius-reset",

components/colorarea/dist/metadata.json

@@ -9,8 +9,7 @@
     ".spectrum-ColorArea.is-disabled",
     ".spectrum-ColorArea.is-disabled .spectrum-ColorArea-gradient",
     ".spectrum-ColorArea.is-focused",
-    ".spectrum-ColorHandle-color",
-    "[dir=\"rtl\"] .spectrum-ColorArea-handle"
+    ".spectrum-ColorHandle-color"
   ],
   "modifiers": [
     "--mod-colorarea-border-color",

components/colorloupe/dist/metadata.json

@@ -9,8 +9,7 @@
     ".spectrum-ColorLoupe-outer-border",
     ".spectrum-ColorLoupe.is-disabled",
     ".spectrum-ColorLoupe.is-open",
-    ".spectrum-ColorLoupe:dir(rtl)",
-    "[dir=\"rtl\"] .spectrum-ColorLoupe"
+    ".spectrum-ColorLoupe:dir(rtl)"
   ],
   "modifiers": [
     "--mod-colorloupe-animation-distance",

components/colorslider/dist/metadata.json

@@ -13,8 +13,7 @@
     ".spectrum-ColorSlider.is-disabled",
     ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard",
     ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-gradient",
-    ".spectrum-ColorSlider.is-focused",
-    "[dir=\"rtl\"] .spectrum-ColorSlider-gradient"
+    ".spectrum-ColorSlider.is-focused"
   ],
   "modifiers": [
     "--mod-color-slider-background-color-disabled",

components/colorwheel/dist/metadata.json

@@ -17,8 +17,7 @@
     ".spectrum-ColorWheel.is-dragged",
     ".spectrum-ColorWheel.is-focused",
     ".spectrum-ColorWheel:after",
-    ".spectrum-ColorWheel:before",
-    "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle"
+    ".spectrum-ColorWheel:before"
   ],
   "modifiers": [
     "--mod-colorwheel-block-size",