ISW-5445: RTL styles for Select arrow

CHANGELOG.md

@@ -11,6 +11,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 ### Fixes
 
 - Fixed the double application of styles when a custom svg is passed into the `Icon` component.
+- Fixes the RTL styles for the dropdown arrow in the `Select` component.
 
 ## 4.1.4 (February 26, 2026)
 

src/components/Select/Select.mdx

@@ -20,7 +20,7 @@ import { changelogData } from "./selectChangelogData";
   componentName="Select"
   summary="Input element that allows a user to pick a single value from a list of related options"
   versionAdded="0.7.0"
-  versionLatest="4.0.0"
+  versionLatest="Prerelease"
 />
 
 <Canvas of={SelectStories.WithControls} />

src/components/Select/selectChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Fixes the RTL styles for the dropdown arrow."],
+  },
   {
     date: "2025-08-11",
     version: "4.0.0",

src/theme/components/select.ts

@@ -79,6 +79,19 @@ const Select = defineMultiStyleConfig({
           marginLeft:
             !showLabel && labelPosition === "inline" ? "0" : `${labelWidth}px`,
         },
+        /**
+         * Overriding Chakra default styles with styles that are RTL-aware to
+         * properly position the dropdown icon.
+         *
+         * To work properly, the `right` attribute needs to be unset before the
+         * `inset-inline-end` attribute is set. Additionally, `insetInlineEnd`
+         * which should map to `inset-inline-end` actually maps to `right`,
+         * which does not solve the problem. Maybe these are bugs in Chakra.
+         * */
+        ".chakra-select__icon-wrapper": {
+          right: "unset",
+          "inset-inline-end": "var(--nypl-space-2)",
+        },
       };
     }
   ),