diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs
index 969e695cc9f1..83e72684964f 100644
--- a/packages/main/src/SegmentedButton.hbs
+++ b/packages/main/src/SegmentedButton.hbs
@@ -3,6 +3,7 @@
@focusin="{{_onfocusin}}"
class="ui5-segmentedbutton-root"
role="group"
+ dir="{{effectiveDir}}"
aria-roledescription="{{ariaDescription}}"
>
diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css
index 4991e322025d..eedc72d4c645 100644
--- a/packages/main/src/themes/SegmentedButton.css
+++ b/packages/main/src/themes/SegmentedButton.css
@@ -22,13 +22,36 @@
}
::slotted(ui5-togglebutton:last-child) {
- border-top-right-radius: 0.375rem;
- border-bottom-right-radius: 0.375rem;
+ border-top-right-radius: var(--_ui5_segmented_btn_border_radius);
+ border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius);
border-right: 1px solid var(--sapButton_Selected_BorderColor);
}
::slotted(ui5-togglebutton:first-child) {
- border-top-left-radius: 0.375rem;
- border-bottom-left-radius: 0.375rem;
+ border-top-left-radius: var(--_ui5_segmented_btn_border_radius);
+ border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius);
border-left: 1px solid var(--sapButton_Selected_BorderColor);
}
+
+[dir="rtl"] ::slotted(ui5-togglebutton:first-child) {
+ border-top-right-radius: var(--_ui5_segmented_btn_border_radius);
+ border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius);
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-right: 1px solid var(--sapButton_Selected_BorderColor);
+}
+
+[dir="rtl"] ::slotted(ui5-togglebutton:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-top-left-radius: var(--_ui5_segmented_btn_border_radius);
+ border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius);
+ border-left: 1px solid var(--sapButton_Selected_BorderColor);
+}
+
+[dir="rtl"] ::slotted(ui5-togglebutton:only-child) {
+ border-top-right-radius: var(--_ui5_segmented_btn_border_radius);
+ border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius);
+ border-top-left-radius: var(--_ui5_segmented_btn_border_radius);
+ border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius);
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
index 527e7c13e50a..8dc788227e82 100644
--- a/packages/main/src/themes/base/sizes-parameters.css
+++ b/packages/main/src/themes/base/sizes-parameters.css
@@ -66,6 +66,9 @@
--_ui5-tree-toggle-box-width: 2.75rem;
--_ui5-tree-toggle-box-height: 2.25rem;
--_ui5-tree-toggle-icon-size: 1.0625rem;
+
+ /* SegmentedButton */
+ --_ui5_segmented_btn_border_radius: 0.375rem;
}
[data-ui5-compact-size],
diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html
index de89fc4754ff..323444afafc7 100644
--- a/packages/main/test/pages/SegmentedButton.html
+++ b/packages/main/test/pages/SegmentedButton.html
@@ -25,6 +25,10 @@
Segmentedbutton example
+
+ Button
+
+