Fixed #16793 - RTL Support

packages/primeng/src/accordion/style/accordionstyle.ts

@@ -32,18 +32,18 @@ const theme = ({ dt }) => `
 
 .p-accordionpanel:first-child > .p-accordionheader {
     border-width: ${dt('accordion.header.first.border.width')};
-    border-top-left-radius: ${dt('accordion.header.first.top.border.radius')};
-    border-top-right-radius: ${dt('accordion.header.first.top.border.radius')};
+    border-start-start-radius: ${dt('accordion.header.first.top.border.radius')};
+    border-start-end-radius: ${dt('accordion.header.first.top.border.radius')};
 }
 
 .p-accordionpanel:last-child > .p-accordionheader {
-    border-bottom-left-radius: ${dt('accordion.header.last.bottom.border.radius')};
-    border-bottom-right-radius: ${dt('accordion.header.last.bottom.border.radius')};
+    border-end-start-radius: ${dt('accordion.header.last.bottom.border.radius')};
+    border-end-end-radius: ${dt('accordion.header.last.bottom.border.radius')};
 }
 
 .p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {
-    border-bottom-left-radius: ${dt('accordion.header.last.active.bottom.border.radius')};
-    border-bottom-right-radius:${dt('accordion.header.last.active.bottom.border.radius')};
+    border-end-start-radius: ${dt('accordion.header.last.active.bottom.border.radius')};
+    border-end-end-radius:${dt('accordion.header.last.active.bottom.border.radius')};
 }
 
 .p-accordionheader-toggle-icon {

packages/primeng/src/avatar/style/avatarstyle.ts

@@ -44,7 +44,7 @@ const theme = ({ dt }) => `
 }
 
 .p-avatar-lg .p-avatar-icon {
-        font-size: ${dt('avatar.lg.icon.size')};
+    font-size: ${dt('avatar.lg.icon.size')};
     width: ${dt('avatar.lg.icon.size')};
     height: ${dt('avatar.lg.icon.size')};
 }
@@ -65,7 +65,7 @@ const theme = ({ dt }) => `
 }
 
 .p-avatar-group .p-avatar + .p-avatar {
-    margin-left: ${dt('avatar.group.offset')};
+    margin-inline-start: ${dt('avatar.group.offset')};
 }
 
 .p-avatar-group .p-avatar {

packages/primeng/src/badge/style/badgestyle.ts

@@ -84,13 +84,13 @@ const theme = ({ dt }) => `
 /* For PrimeNG (directive)*/
 
 .p-overlay-badge {
-   position: relative;
+    position: relative;
 }
 
 .p-overlay-badge > .p-badge {
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     transform: translate(50%, -50%);
     transform-origin: 100% 0;
     margin: 0;

packages/primeng/src/breadcrumb/style/breadcrumbstyle.ts

@@ -24,6 +24,10 @@ const theme = ({ dt }) => `
     color: ${dt('breadcrumb.separator.color')};
 }
 
+.p-breadcrumb-separator .p-icon:dir(rtl) {
+    transform: rotate(180deg);
+}
+
 .p-breadcrumb::-webkit-scrollbar {
     display: none;
 }

packages/primeng/src/button/style/buttonstyle.ts

@@ -13,7 +13,8 @@ const theme = ({ dt }) => `
     color: ${dt('button.primary.color')};
     background: ${dt('button.primary.background')};
     border: 1px solid ${dt('button.primary.border.color')};
-    padding: ${dt('button.padding.y')} ${dt('button.padding.x')};
+    padding-block: ${dt('button.padding.y')};
+    padding-inline: ${dt('button.padding.x')};
     font-size: 1rem;
     font-family: inherit;
     font-feature-settings: inherit;
@@ -32,14 +33,22 @@ const theme = ({ dt }) => `
     order: 1;
 }
 
+.p-button-icon-right:dir(rtl) {
+    order: -1;
+}
+
+.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl) {
+    order: 1;
+}
+
 .p-button-icon-bottom {
     order: 2;
 }
 
 .p-button-icon-only {
     width: ${dt('button.icon.only.width')};
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
     gap: 0;
 }
 
@@ -55,7 +64,8 @@ const theme = ({ dt }) => `
 
 .p-button-sm {
     font-size: ${dt('button.sm.font.size')};
-    padding: ${dt('button.sm.padding.y')} ${dt('button.sm.padding.x')};
+    padding-block: ${dt('button.sm.padding.y')};
+    padding-inline: ${dt('button.sm.padding.x')};
 }
 
 .p-button-sm .p-button-icon {
@@ -64,7 +74,8 @@ const theme = ({ dt }) => `
 
 .p-button-lg {
     font-size: ${dt('button.lg.font.size')};
-    padding: ${dt('button.lg.padding.y')} ${dt('button.lg.padding.x')};
+    padding-block: ${dt('button.lg.padding.y')};
+    padding-inline: ${dt('button.lg.padding.x')};
 }
 
 .p-button-lg .p-button-icon {
@@ -626,7 +637,6 @@ const theme = ({ dt }) => `
 p-button[iconpos='right'] spinnericon {
     order: 1;
 }
-
 `;
 
 const classes = {

packages/primeng/src/buttongroup/style/buttongroupstyle.ts

@@ -16,13 +16,13 @@ const theme = ({ dt }) => `
 }
 
 .p-buttongroup .p-button:first-of-type:not(:only-of-type) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
 }
 
 .p-buttongroup .p-button:last-of-type:not(:only-of-type) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
 }
 
 .p-buttongroup .p-button:focus {
@@ -72,16 +72,16 @@ const theme = ({ dt }) => `
 .p-buttongroup p-button:first-of-type:not(:only-of-type) .p-button,
 .p-buttonset .p-button:first-of-type:not(:only-of-type),
 .p-buttonset p-button:first-of-type:not(:only-of-type) .p-button {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
 }
 
 .p-buttongroup .p-button:last-of-type:not(:only-of-type),
 .p-buttongroup p-button:last-of-type:not(:only-of-type) .p-button,
 .p-buttonset .p-button:last-of-type:not(:only-of-type),
 .p-buttonset p-button:last-of-type:not(:only-of-type) .p-button {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
 }
 
 p-button[iconpos='right'] spinnericon {

packages/primeng/src/calendar/style/calendarstyle.ts

@@ -14,8 +14,8 @@ position: relative;
 }
 
 .p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
 }
 
 .p-datepicker-dropdown {
@@ -28,8 +28,8 @@ position: relative;
     overflow: hidden;
     position: relative;
     width: ${dt('datepicker.dropdown.width')};
-    border-top-right-radius: ${dt('datepicker.dropdown.border.radius')};
-    border-bottom-right-radius: ${dt('datepicker.dropdown.border.radius')};
+    border-start-end-radius: ${dt('datepicker.dropdown.border.radius')};
+    border-end-end-radius: ${dt('datepicker.dropdown.border.radius')};
     background: ${dt('datepicker.dropdown.background')};
     border: 1px solid ${dt('datepicker.dropdown.border.color')};
     border-left: 0 none;

packages/primeng/src/carousel/style/carouselstyle.ts

@@ -19,6 +19,10 @@ const theme = ({ dt }) => `
     gap: ${dt('carousel.content.gap')};
 }
 
+.p-carousel-content:dir(rtl) {
+    flex-direction: row-reverse;
+}
+
 .p-carousel-viewport {
     overflow: hidden;
     width: 100%;
@@ -29,9 +33,14 @@ const theme = ({ dt }) => `
     flex-direction: row;
 }
 
+.p-carousel-item-list:dir(rtl) {
+    flex-direction: row-reverse;
+}
+
 .p-carousel-prev-button,
 .p-carousel-next-button {
     align-self: center;
+    flex-shrink: 0;
 }
 
 .p-carousel-indicator-list {

packages/primeng/src/cascadeselect/style/cascadeselectstyle.ts

@@ -53,8 +53,8 @@ const theme = ({ dt }) => `
     background: transparent;
     color: ${dt('cascadeselect.dropdown.color')};
     width: ${dt('cascadeselect.dropdown.width')};
-    border-top-right-radius: ${dt('border.radius.md')};
-    border-bottom-right-radius: ${dt('border.radius.md')};
+    border-start-end-radius: ${dt('border.radius.md')};
+    border-end-end-radius: ${dt('border.radius.md')};
 }
 
 .p-cascadeselect-label {
@@ -162,7 +162,7 @@ const theme = ({ dt }) => `
 
 .p-cascadeselect-option-active > .p-cascadeselect-option-list {
     display: block;
-    left: 100%;
+    inset-inline-start: 100%;
     top: 0;
 }
 
@@ -175,14 +175,13 @@ const theme = ({ dt }) => `
 }
 
 .p-cascadeselect-group-icon {
-    margin-left: auto;
+    margin-inline-start: auto;
     font-size: ${dt('cascadeselect.option.icon.size')};
     width: ${dt('cascadeselect.option.icon.size')};
     height: ${dt('cascadeselect.option.icon.size')};
     color: ${dt('cascadeselect.option.icon.color')};
 }
 
-
 .p-cascadeselect-group-icon:dir(rtl) {
     transform: rotate(180deg);
 }

packages/primeng/src/chip/style/chipstyle.ts

@@ -27,7 +27,7 @@ const theme = ({ dt }) => `
 }
 
 .p-chip:has(.p-chip-remove-icon) {
-    padding-right: ${dt('chip.padding.y')};
+    padding-inline-end: ${dt('chip.padding.y')};
 }
 
 .p-chip:has(.p-chip-image) {

packages/primeng/src/colorpicker/style/colorpickerstyle.ts

@@ -43,6 +43,11 @@ const theme = ({ dt }) => `
     left: 0;
 }
 
+.p-colorpicker-panel:dir(rtl) {
+    left: auto;
+    right: 0;
+}
+
 .p-colorpicker-panel-inline {
     box-shadow: none;
     position: static;
@@ -60,6 +65,11 @@ const theme = ({ dt }) => `
     position: absolute;
 }
 
+.p-colorpicker-color-selector:dir(rtl) {
+    left: auto;
+    right: 8px;
+}
+
 .p-colorpicker-color-background {
     width: 100%;
     height: 100%;
@@ -81,6 +91,12 @@ const theme = ({ dt }) => `
     border-color: ${dt('colorpicker.handle.color')};
 }
 
+.p-colorpicker-color-handle:dir(rtl) {
+    left: auto;
+    right: 150px;
+    margin: -5px -5px 0 0;
+}
+
 .p-colorpicker-hue {
     width: 17px;
     height: 150px;
@@ -98,6 +114,11 @@ const theme = ({ dt }) => `
         red);
 }
 
+.p-colorpicker-hue:dir(rtl) {
+    left: auto;
+    right: 167px;
+}
+
 .p-colorpicker-hue-handle {
     position: absolute;
     top: 150px;
@@ -112,6 +133,13 @@ const theme = ({ dt }) => `
     cursor: pointer;
     border-color: ${dt('colorpicker.handle.color')};
 }
+
+.p-colorpicker-hue-handle:dir(rtl) {
+    left: auto;
+    right: 0px;
+    margin-left: 0;
+    margin-right: -2px;
+}
 `;
 
 const classes = {

packages/primeng/src/common/style/commonstyle.ts

@@ -98,7 +98,7 @@ button {
 }
 
 .p-link {
-    text-align: left;
+    text-align: start;
     background-color: transparent;
     margin: 0;
     padding: 0;

packages/primeng/src/contextmenu/style/contextmenustyle.ts

@@ -75,6 +75,11 @@ const theme = ({ dt }) => `
     height: ${dt('contextmenu.submenu.icon.size')};
 }
 
+.p-contextmenu-submenu-icon:dir(rtl) {
+    margin-left: 0;
+    margin-right: auto;
+}
+
 .p-contextmenu-item.p-focus > .p-contextmenu-item-content {
     color: ${dt('contextmenu.item.focus.color')};
     background: ${dt('contextmenu.item.focus.background')};
@@ -148,6 +153,11 @@ const theme = ({ dt }) => `
 .p-contextmenu-submenu-icon.p-iconwrapper {
     margin-left: auto;
 }
+
+.p-contextmenu-submenu-icon.p-iconwrapper:dir(rtl) {
+    margin-left: 0;
+    margin-right: auto;
+}
 `;
 
 const classes = {