diff --git a/test/visual/rtl.html b/test/visual/rtl.html
new file mode 100644
index 0000000..0d493df
--- /dev/null
+++ b/test/visual/rtl.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 0
+ Item 1
+ Item 2 (selected)
+ Item 3 (disabled)
+ Item 4
+
+
+
diff --git a/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/chrome.png b/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/chrome.png
new file mode 100644
index 0000000..8b272cf
Binary files /dev/null and b/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/chrome.png differ
diff --git a/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/firefox.png b/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/firefox.png
new file mode 100644
index 0000000..5e84030
Binary files /dev/null and b/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/firefox.png differ
diff --git a/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/chrome.png b/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/chrome.png
new file mode 100644
index 0000000..ceaa1ac
Binary files /dev/null and b/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/chrome.png differ
diff --git a/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/firefox.png b/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/firefox.png
new file mode 100644
index 0000000..f52f899
Binary files /dev/null and b/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/firefox.png differ
diff --git a/test/visual/test.js b/test/visual/test.js
index 4602307..6f48bae 100644
--- a/test/visual/test.js
+++ b/test/visual/test.js
@@ -20,6 +20,13 @@ gemini.suite('vaadin-list-box', function(rootSuite) {
.setCaptureElements('#list-box-tests')
.capture('list-box');
});
+
+ gemini.suite(`rtl-list-box-${theme}`, function(suite) {
+ suite
+ .setUrl(`rtl.html?theme=${theme}`)
+ .setCaptureElements('#rtl-list-box-tests')
+ .capture('list-box');
+ });
});
});
diff --git a/theme/lumo/vaadin-list-box-styles.html b/theme/lumo/vaadin-list-box-styles.html
index 9c1212d..76d60dc 100644
--- a/theme/lumo/vaadin-list-box-styles.html
+++ b/theme/lumo/vaadin-list-box-styles.html
@@ -71,6 +71,13 @@
margin: var(--lumo-space-s) var(--lumo-border-radius);
background-color: var(--lumo-contrast-10pct);
}
+
+ /* RTL specific styles */
+
+ :host([dir="rtl"]) [part="items"] ::slotted(vaadin-item) {
+ padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+ padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4));
+ }
diff --git a/theme/material/vaadin-list-box-styles.html b/theme/material/vaadin-list-box-styles.html
index 41b47f2..32350d3 100644
--- a/theme/material/vaadin-list-box-styles.html
+++ b/theme/material/vaadin-list-box-styles.html
@@ -56,6 +56,12 @@
margin: 8px 0;
background-color: var(--material-divider-color);
}
+
+ /* RTL specific styles */
+
+ :host([dir="rtl"]) [part="items"] ::slotted(vaadin-item) {
+ padding: 8px 10px 8px 32px;
+ }