diff --git a/apps/showcase/assets/styles/layout/_sidebar.scss b/apps/showcase/assets/styles/layout/_sidebar.scss
index 242df1efa..0a9a32e07 100644
--- a/apps/showcase/assets/styles/layout/_sidebar.scss
+++ b/apps/showcase/assets/styles/layout/_sidebar.scss
@@ -9,7 +9,7 @@
flex-direction: column;
padding: 0 0 0 0;
flex: 0 0 250px;
- margin-right: 4rem;
+ margin-inline-end: 4rem;
overflow: auto;
.logo {
@@ -18,7 +18,8 @@
}
nav {
- padding: 0 1rem 0 0;
+ padding: 0;
+ padding-inline-end: 1rem;
margin: 0;
flex-grow: 1;
}
@@ -56,7 +57,7 @@
width: 2rem;
height: 2rem;
border-radius: 6px;
- margin-right: .5rem;
+ margin-inline-end: .5rem;
border: 1px solid var(--border-color);
display: inline-flex;
align-items: center;
@@ -73,7 +74,7 @@
.menu-toggle-icon {
color: var(--text-secondary-color);
- margin-left: auto;
+ margin-inline-start: auto;
}
&:hover {
@@ -105,18 +106,20 @@
overflow: hidden;
ol {
- margin: 0 0 0 1rem;
+ margin: 0;
+ margin-inline-start: 1rem;
padding: .25rem 0;
list-style: none;
li {
a {
- border-left: 1px solid var(--border-color);
+ border-inline-start: 1px solid var(--border-color);
transition: all .2s;
font-weight: 450;
display: flex;
align-items: center;
- padding: .5rem .5rem .5rem 1rem;
+ padding: .5rem;
+ padding-inline-start: 1rem;
color: var(--text-secondary-color);
transition: outline-color 0.2s, border-color .2s;
outline-color: transparent;
@@ -153,7 +156,7 @@
.p-tag {
position: absolute;
- right: 0;
+ inset-inline-end: 0;
top: 50%;
transform: translateY(-50%);
@@ -165,7 +168,8 @@
.menu-child-category {
display: flex;
- padding: .5rem .5rem .5rem 0;
+ padding: .5rem;
+ padding-inline-start: 0;
font-size: .875rem;
font-weight: 600;
letter-spacing: 1px;
diff --git a/apps/showcase/assets/styles/layout/_topbar.scss b/apps/showcase/assets/styles/layout/_topbar.scss
index f2d0eabf2..c3c50a342 100644
--- a/apps/showcase/assets/styles/layout/_topbar.scss
+++ b/apps/showcase/assets/styles/layout/_topbar.scss
@@ -52,7 +52,7 @@
width: 25px;
}
}
-
+
.menu-button {
display: none;
}
@@ -84,13 +84,13 @@
outline-color: transparent;
background-color: var(--card-background);
cursor: pointer;
-
+
@include focus-visible();
-
+
&:hover {
border-color: var(--primary-color);
}
-
+
i, span {
color: var(--text-color);
}
@@ -98,7 +98,7 @@
.config-item {
background-color: var(--primary-color);
-
+
i {
color: var(--primary-contrast-color);
}
@@ -107,7 +107,7 @@
.config-panel {
position: absolute;
top: calc(100% + 2px);
- right: 0;
+ inset-inline-end: 0;
width: 18rem;
padding: .75rem;
background-color: var(--overlay-background);
@@ -115,7 +115,7 @@
border: 1px solid var(--border-color);
transform-origin: top;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-
+
.config-panel-content {
display: flex;
flex-direction: column;
@@ -135,7 +135,7 @@
display: flex;
gap: .5rem;
flex-wrap: wrap;
-
+
button {
border: none;
width: 1.25rem;
@@ -147,7 +147,7 @@
outline-width: 2px;
outline-style: solid;
outline-offset: 1px;
-
+
&.active-color {
outline-color: var(--primary-color);
}
@@ -218,4 +218,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/apps/showcase/layouts/AppConfigurator.vue b/apps/showcase/layouts/AppConfigurator.vue
index c48c43b2f..c76314849 100755
--- a/apps/showcase/layouts/AppConfigurator.vue
+++ b/apps/showcase/layouts/AppConfigurator.vue
@@ -33,9 +33,19 @@
Presets
-
@@ -98,7 +108,8 @@ export default {
name: 'ocean',
palette: { 0: '#ffffff', 50: '#fbfcfc', 100: '#F7F9F8', 200: '#EFF3F2', 300: '#DADEDD', 400: '#B1B7B6', 500: '#828787', 600: '#5F7274', 700: '#415B61', 800: '#29444E', 900: '#183240', 950: '#0c1920' }
}
- ]
+ ],
+ isRTL: false
};
},
methods: {
@@ -303,6 +314,15 @@ export default {
}
$t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
+ },
+ onRTLChange(value) {
+ const htmlElement = document.documentElement;
+
+ if (value) {
+ htmlElement.setAttribute('dir', 'rtl');
+ } else {
+ htmlElement.removeAttribute('dir');
+ }
}
},
computed: {
diff --git a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
index fdc28978a..c00cca073 100644
--- a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
+++ b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
@@ -10,11 +10,11 @@ const theme = ({ dt }) => `
position: absolute;
top: 50%;
margin-top: -0.5rem;
- right: ${dt('autocomplete.padding.x')};
+ inset-inline-end: ${dt('autocomplete.padding.x')};
}
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
- right: calc(${dt('autocomplete.dropdown.width')} + ${dt('autocomplete.padding.x')});
+ inset-inline-end: calc(${dt('autocomplete.dropdown.width')} + ${dt('autocomplete.padding.x')});
}
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
@@ -24,25 +24,24 @@ const theme = ({ dt }) => `
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
}
.p-autocomplete-dropdown {
cursor: pointer;
display: inline-flex;
- cursor: pointer;
user-select: none;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: ${dt('autocomplete.dropdown.width')};
- border-top-right-radius: ${dt('autocomplete.dropdown.border.radius')};
- border-bottom-right-radius: ${dt('autocomplete.dropdown.border.radius')};
+ border-start-end-radius: ${dt('autocomplete.dropdown.border.radius')};
+ border-end-end-radius: ${dt('autocomplete.dropdown.border.radius')};
background: ${dt('autocomplete.dropdown.background')};
border: 1px solid ${dt('autocomplete.dropdown.border.color')};
- border-left: 0 none;
+ border-inline-start: 0 none;
color: ${dt('autocomplete.dropdown.color')};
transition: background ${dt('autocomplete.transition.duration')}, color ${dt('autocomplete.transition.duration')}, border-color ${dt('autocomplete.transition.duration')}, outline-color ${dt('autocomplete.transition.duration')}, box-shadow ${dt(
'autocomplete.transition.duration'
@@ -190,14 +189,14 @@ const theme = ({ dt }) => `
}
.p-autocomplete-chip.p-chip {
- padding-top: calc(${dt('autocomplete.padding.y')} / 2);
- padding-bottom: calc(${dt('autocomplete.padding.y')} / 2);
+ padding-block-start: calc(${dt('autocomplete.padding.y')} / 2);
+ padding-block-end: calc(${dt('autocomplete.padding.y')} / 2);
border-radius: ${dt('autocomplete.chip.border.radius')};
}
.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
- padding-left: calc(${dt('autocomplete.padding.y')} / 2);
- padding-right: calc(${dt('autocomplete.padding.y')} / 2);
+ padding-inline-start: calc(${dt('autocomplete.padding.y')} / 2);
+ padding-inline-end: calc(${dt('autocomplete.padding.y')} / 2);
}
.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
@@ -208,8 +207,8 @@ const theme = ({ dt }) => `
.p-autocomplete-input-chip {
flex: 1 1 auto;
display: inline-flex;
- padding-top: calc(${dt('autocomplete.padding.y')} / 2);
- padding-bottom: calc(${dt('autocomplete.padding.y')} / 2);
+ padding-block-start: calc(${dt('autocomplete.padding.y')} / 2);
+ padding-block-end: calc(${dt('autocomplete.padding.y')} / 2);
}
.p-autocomplete-input-chip input {
diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
index 70088f7d9..e527d6fb9 100644
--- a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
+++ b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
@@ -56,8 +56,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 {
@@ -78,10 +78,6 @@ const theme = ({ dt }) => `
color: ${dt('cascadeselect.placeholder.color')};
}
-.p-cascadeselect-clearable .p-cascadeselect-label {
- padding-right: 1.75rem;
-}
-
.p-cascadeselect.p-disabled .p-cascadeselect-label {
color: ${dt('cascadeselect.disabled.color')};
}
@@ -126,7 +122,7 @@ const theme = ({ dt }) => `
padding: ${dt('cascadeselect.list.padding')};
display: flex;
flex-direction: column;
- gap: ${dt('cascadeselect.list.gap')}
+ gap: ${dt('cascadeselect.list.gap')};
}
.p-cascadeselect-option {
@@ -168,8 +164,8 @@ const theme = ({ dt }) => `
}
.p-cascadeselect-option-active > .p-cascadeselect-option-list {
- left: 100%;
- top: 0;
+ inset-inline-start: 100%;
+ inset-block-start: 0;
}
.p-cascadeselect-option-content {
@@ -192,12 +188,16 @@ const theme = ({ dt }) => `
color: ${dt('cascadeselect.option.icon.color')};
}
+.p-cascadeselect-group-icon:dir(rtl) {
+ transform: rotate(180deg);
+}
+
.p-cascadeselect-mobile-active .p-cascadeselect-option-list {
position: static;
box-shadow: none;
border: 0 none;
- padding-left: ${dt('tieredmenu.submenu.mobile.indent')};
- padding-right: 0;
+ padding-inline-start: ${dt('tieredmenu.submenu.mobile.indent')};
+ padding-inline-end: 0;
}
.p-cascadeselect-mobile-active .p-cascadeselect-group-icon {
diff --git a/packages/primevue/src/checkbox/style/CheckboxStyle.js b/packages/primevue/src/checkbox/style/CheckboxStyle.js
index aadebc470..46a739a70 100644
--- a/packages/primevue/src/checkbox/style/CheckboxStyle.js
+++ b/packages/primevue/src/checkbox/style/CheckboxStyle.js
@@ -14,8 +14,8 @@ const theme = ({ dt }) => `
cursor: pointer;
appearance: none;
position: absolute;
- top: 0;
- left: 0;
+ inset-block-start: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
padding: 0;
diff --git a/packages/primevue/src/colorpicker/style/ColorPickerStyle.js b/packages/primevue/src/colorpicker/style/ColorPickerStyle.js
index c5aad8d4a..345fb7355 100644
--- a/packages/primevue/src/colorpicker/style/ColorPickerStyle.js
+++ b/packages/primevue/src/colorpicker/style/ColorPickerStyle.js
@@ -54,8 +54,8 @@ const theme = ({ dt }) => `
.p-colorpicker-color-selector {
width: 150px;
height: 150px;
- top: 8px;
- left: 8px;
+ inset-block-start: 8px;
+ inset-inline-start: 8px;
position: absolute;
}
@@ -67,8 +67,8 @@ const theme = ({ dt }) => `
.p-colorpicker-color-handle {
position: absolute;
- top: 0px;
- left: 150px;
+ inset-block-start: 0px;
+ inset-inline-start: 150px;
border-radius: 100%;
width: 10px;
height: 10px;
@@ -83,8 +83,8 @@ const theme = ({ dt }) => `
.p-colorpicker-hue {
width: 17px;
height: 150px;
- top: 8px;
- left: 167px;
+ inset-block-start: 8px;
+ inset-inline-start: 167px;
position: absolute;
opacity: 0.85;
background: linear-gradient(0deg,
@@ -99,11 +99,11 @@ const theme = ({ dt }) => `
.p-colorpicker-hue-handle {
position: absolute;
- top: 150px;
- left: 0px;
+ inset-block-start: 150px;
+ inset-inline-start: 0px;
width: 21px;
- margin-left: -2px;
- margin-top: -5px;
+ margin-inline-start: -2px;
+ margin-block-start: -5px;
height: 10px;
border-width: 2px;
border-style: solid;
diff --git a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
index 0c718325c..5e190f892 100644
--- a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
+++ b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
@@ -15,7 +15,7 @@ const theme = ({ dt }) => `
transition-timing-function: ease;
line-height: 1;
font-weight: ${dt('floatlabel.font.weight')};
- left: ${dt('floatlabel.position.x')};
+ inset-inline-start: ${dt('floatlabel.position.x')};
color: ${dt('floatlabel.color')};
transition-duration: ${dt('floatlabel.transition.duration')};
}
@@ -26,7 +26,7 @@ const theme = ({ dt }) => `
}
.p-floatlabel:has(.p-inputicon:first-child) label {
- left: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
+ inset-inline-start: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
}
.p-floatlabel:has(.p-invalid) label {
@@ -54,27 +54,11 @@ const theme = ({ dt }) => `
.p-floatlabel:has(input:focus) label,
.p-floatlabel:has(input:-webkit-autofill) label,
-.p-floatlabel:has(textarea:focus) label ,
-.p-floatlabel:has(.p-inputwrapper-focus) label {
+.p-floatlabel:has(textarea:focus) label,
+.p-floatlabel:has(.p-inputwrapper-focus) label {
color: ${dt('floatlabel.focus.color')};
}
-/*.p-floatlabel .p-placeholder,
-.p-floatlabel input::placeholder,
-.p-floatlabel .p-inputtext::placeholder {
- opacity: 0;
- transition-property: all;
- transition-timing-function: ease;
-}
-
-.p-floatlabel .p-focus .p-placeholder,
-.p-floatlabel input:focus::placeholder,
-.p-floatlabel .p-inputtext:focus::placeholder {
- opacity: 1;
- transition-property: all;
- transition-timing-function: ease;
-}*/
-
.p-floatlabel-in .p-inputtext,
.p-floatlabel-in .p-textarea,
.p-floatlabel-in .p-select-label,
@@ -82,8 +66,8 @@ const theme = ({ dt }) => `
.p-floatlabel-in .p-autocomplete-input-multiple,
.p-floatlabel-in .p-cascadeselect-label,
.p-floatlabel-in .p-treeselect-label {
- padding-top: ${dt('floatlabel.in.input.padding.top')};
- padding-bottom: ${dt('floatlabel.in.input.padding.bottom')};
+ padding-block-start: ${dt('floatlabel.in.input.padding.top')};
+ padding-block-end: ${dt('floatlabel.in.input.padding.bottom')};
}
.p-floatlabel-in:has(input:focus) label,
diff --git a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
index 5a3bd4be4..2282ab6f4 100644
--- a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
+++ b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
@@ -15,7 +15,7 @@ const theme = ({ dt }) => `
line-height: 1;
font-size: ${dt('iftalabel.font.size')};
font-weight: ${dt('iftalabel.font.weight')};
- left: ${dt('iftalabel.position.x')};
+ inset-inline-start: ${dt('iftalabel.position.x')};
color: ${dt('iftalabel.color')};
transition-duration: ${dt('iftalabel.transition.duration')};
}
@@ -27,18 +27,18 @@ const theme = ({ dt }) => `
.p-iftalabel .p-autocomplete-input-multiple,
.p-iftalabel .p-cascadeselect-label,
.p-iftalabel .p-treeselect-label {
- padding-top: ${dt('iftalabel.input.padding.top')};
- padding-bottom: ${dt('iftalabel.input.padding.bottom')};
+ padding-block-start: ${dt('iftalabel.input.padding.top')};
+ padding-block-end: ${dt('iftalabel.input.padding.bottom')};
}
.p-iftalabel:has(.p-invalid) label {
color: ${dt('iftalabel.invalid.color')};
}
-.p-iftalabel:has(input:focus) label ,
+.p-iftalabel:has(input:focus) label,
.p-iftalabel:has(input:-webkit-autofill) label,
-.p-iftalabel:has(textarea:focus) label ,
-.p-iftalabel:has(.p-inputwrapper-focus) label {
+.p-iftalabel:has(textarea:focus) label,
+.p-iftalabel:has(.p-inputwrapper-focus) label {
color: ${dt('iftalabel.focus.color')};
}
@@ -47,22 +47,6 @@ const theme = ({ dt }) => `
transform: translateY(25%);
margin-top: 0;
}
-
-/*.p-iftalabel .p-placeholder,
-.p-iftalabel input::placeholder,
-.p-iftalabel .p-inputtext::placeholder {
- opacity: 0;
- transition-property: all;
- transition-timing-function: ease;
-}
-
-.p-iftalabel .p-focus .p-placeholder,
-.p-iftalabel input:focus::placeholder,
-.p-iftalabel .p-inputtext:focus::placeholder {
- opacity: 1;
- transition-property: all;
- transition-timing-function: ease;
-}*/
`;
const classes = {