@photoroom/ui 0.1.181 → 0.1.183

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.181",
+  "version": "0.1.183",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [
@@ -43,6 +43,7 @@
     "@radix-ui/react-checkbox": "1.3.3",
     "@radix-ui/react-context-menu": "2.2.16",
     "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-direction": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "2.1.16",
     "@radix-ui/react-menu": "2.1.16",
     "@radix-ui/react-popover": "1.1.15",

package/theme.css

@@ -118,6 +118,8 @@
   --color-background-subdued: var(--color-background-subdued);
   --color-background-subdued-hover: var(--color-background-subdued-hover);
   --color-background-subdued-down: var(--color-background-subdued-down);
+  --color-background-borderless-subdued-hover: var(--color-background-borderless-subdued-hover);
+  --color-background-borderless-subdued-down: var(--color-background-borderless-subdued-down);
   --color-background-accent: var(--color-background-accent);
   --color-background-accent-hover: var(--color-background-accent-hover);
   --color-background-accent-down: var(--color-background-accent-down);
@@ -713,49 +715,49 @@
  * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12592
  */
 @utility text-to-leading-300 {
-  margin-left: 6px;
+  margin-inline-start: 6px;
 }
 @utility text-to-leading-400 {
-  margin-left: 7px;
+  margin-inline-start: 7px;
 }
 @utility text-to-leading-500 {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 @utility text-to-leading-600 {
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 @utility text-to-leading-700 {
-  margin-left: 12px;
+  margin-inline-start: 12px;
 }
 @utility text-to-leading-compact-300 {
-  margin-left: 3px;
+  margin-inline-start: 3px;
 }
 @utility text-to-leading-compact-400 {
-  margin-left: 3.3px;
+  margin-inline-start: 3.3px;
 }
 @utility text-to-leading-compact-500 {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 @utility text-to-leading-compact-600 {
-  margin-left: 5px;
+  margin-inline-start: 5px;
 }
 @utility text-to-leading-compact-700 {
-  margin-left: 6px;
+  margin-inline-start: 6px;
 }
 @utility text-to-leading-spacious-300 {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 @utility text-to-leading-spacious-400 {
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 @utility text-to-leading-spacious-500 {
-  margin-left: 12px;
+  margin-inline-start: 12px;
 }
 @utility text-to-leading-spacious-600 {
-  margin-left: 14px;
+  margin-inline-start: 14px;
 }
 @utility text-to-leading-spacious-700 {
-  margin-left: 17px;
+  margin-inline-start: 17px;
 }
 
 /*
@@ -930,6 +932,12 @@
 @utility content-to-edge-pr-* {
   padding-right: --value(--content-edge-*);
 }
+@utility content-to-edge-ps-* {
+  padding-inline-start: --value(--content-edge-*);
+}
+@utility content-to-edge-pe-* {
+  padding-inline-end: --value(--content-edge-*);
+}
 @utility content-to-edge-px-* {
   padding-inline: --value(--content-edge-*);
 }
@@ -945,6 +953,12 @@
 @utility content-to-edge-spacious-px-* {
   padding-inline: --value(--content-edge-spacious-*);
 }
+@utility content-to-edge-spacious-ps-* {
+  padding-inline-start: --value(--content-edge-spacious-*);
+}
+@utility content-to-edge-spacious-pe-* {
+  padding-inline-end: --value(--content-edge-spacious-*);
+}
 
 /* Icon to edge (replaces src/plugins/icon-to-edge.js) */
 @utility icon-to-edge-pl-* {
@@ -953,6 +967,12 @@
 @utility icon-to-edge-pr-* {
   padding-right: --value(--icon-edge-*);
 }
+@utility icon-to-edge-ps-* {
+  padding-inline-start: --value(--icon-edge-*);
+}
+@utility icon-to-edge-pe-* {
+  padding-inline-end: --value(--icon-edge-*);
+}
 @utility icon-to-edge-py-* {
   padding-block: --value(--icon-edge-*);
 }
@@ -962,6 +982,12 @@
 @utility icon-to-edge-spacious-pr-* {
   padding-right: --value(--icon-edge-spacious-*);
 }
+@utility icon-to-edge-spacious-ps-* {
+  padding-inline-start: --value(--icon-edge-spacious-*);
+}
+@utility icon-to-edge-spacious-pe-* {
+  padding-inline-end: --value(--icon-edge-spacious-*);
+}
 
 /*
  * Size utilities (replaces src/plugins/size.js)
@@ -1417,4 +1443,13 @@
   input[type="search"]::-webkit-search-decoration {
     appearance: none;
   }
+
+  /*
+   * @tailwindcss/forms paints the select dropdown chevron with a physical
+   * `background-position: right 8px center`, which doesn't flip in RTL and
+   * causes the chevron to overlap the option text. Mirror it for RTL.
+   */
+  [dir="rtl"] select {
+    background-position: left 8px center;
+  }
 }