🐛 fix(tree selectors): added support for RTL language

assets/scss/shared-ui/_tree-fancy.scss

@@ -1,3 +1,4 @@
+// $sui-wrap: true | $rtl: false
 @include body-class(true) {
 
 	.sui-tree-fancy {
@@ -403,4 +404,63 @@
 			}
 		}
 	}
+}
+
+// $sui-wrap: true | $rtl: true
+@include body-class(true, true) {
+
+	.sui-tree-fancy[data-tree="selector"] {
+
+		ul.ui-fancytree {
+
+			// ELEMENT: Item
+			li[role="treeitem"] {
+
+				> span.fancytree-node {
+					padding-left: 30px;
+					padding-right: 0;
+
+					> span.fancytree-expander {
+						left: 0;
+						right: unset;
+					}
+
+					> span.fancytree-checkbox {
+
+						~ span.fancytree-title {
+							margin-right: 10px;
+							margin-left: 0;
+						}
+					}
+				}
+
+				// VARIATION: Child items
+				ul[role="group"] {
+					padding: 0 26px 0 0;
+				}
+			}
+		}
+	}
+
+	.sui-tree-fancy[data-tree="directory"] {
+
+		ul.ui-fancytree {
+
+			// ELEMENT: Item
+			li[role="treeitem"] {
+
+				> span.fancytree-node {
+
+					// ELEMENT: Expander
+					> span.fancytree-expander {
+						margin: 3px -10px 3px 0;
+					}
+				}
+
+				ul[role="group"] {
+					padding: 0 20px 0 0;
+				}
+			}
+		}
+	}
 }

assets/scss/shared-ui/_tree-simple.scss

@@ -23,6 +23,7 @@ $tree--file-type: (
 	performance: 'performance',
 );
 
+// $sui-wrap: true | $rtl: false
 @include body-class(true) {
 
 	.sui-tree {
@@ -630,4 +631,60 @@ $tree--file-type: (
 			}
 		}
 	}
+}
+
+// $sui-wrap: true | $rtl: true
+@include body-class(true, true) {
+
+	.sui-tree {
+		direction: rtl;
+
+		// TREE: RTL Selector
+		&[data-tree="selector"] {
+
+			li[role="treeitem"] {
+
+				> .sui-tree-node {
+
+					> .sui-node-checkbox {
+
+						+ span {
+							margin-right: 10px;
+						}
+					}
+				}
+
+				ul[role="group"] {
+					padding-right: 26px;
+				}
+			}
+		}
+
+		// TREE: RTL Directory Browser
+		&[data-tree="directory"] {
+
+			li[role="treeitem"] {
+
+				> .sui-tree-node {
+
+					> span[role="button"],
+					> button[data-button] span[aria-hidden] {
+
+						&:first-child {
+							margin-left: 0;
+							margin-right: -10px;
+						}
+					}
+
+					> span[aria-hidden] {
+						margin: 7px 10px 7px 5px;
+					}
+				}
+
+				ul[role="group"] {
+					padding-right: 20px;
+				}
+			}
+		}
+	}
 }