New transition duration token for components

components/lib/accordion/style/AccordionStyle.js

@@ -23,7 +23,7 @@ const theme = ({ dt }) => `
     border-color: ${dt('accordion.header.border.color')};
     font-weight: ${dt('accordion.header.font.weight')};
     border-radius: ${dt('accordion.header.border.radius')};
-    transition: background ${dt('transition.duration')}; color ${dt('transition.duration')}color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('accordion.transition.duration')}; color ${dt('accordion.transition.duration')}color ${dt('accordion.transition.duration')}, outline-color ${dt('accordion.transition.duration')}, box-shadow ${dt('accordion.transition.duration')};
     outline-color: transparent;
 }
 

components/lib/autocomplete/style/AutoCompleteStyle.js

@@ -44,7 +44,7 @@ const theme = ({ dt }) => `
     border: 1px solid ${dt('autocomplete.dropdown.border.color')};
     border-left: 0 none;
     color: ${dt('autocomplete.dropdown.color')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    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')};
     outline-color: transparent;
 }
 
@@ -102,7 +102,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     color: ${dt('autocomplete.option.color')};
     background: transparent;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')};
+    transition: background ${dt('autocomplete.transition.duration')}, color ${dt('autocomplete.transition.duration')}, border-color ${dt('autocomplete.transition.duration')};
     border-radius: ${dt('autocomplete.option.border.radius')};
 }
 
@@ -144,7 +144,7 @@ const theme = ({ dt }) => `
     border: 1px solid ${dt('autocomplete.border.color')};
     border-radius: ${dt('autocomplete.border.radius')};
     width: 100%;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    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')};
     outline-color: transparent;
     box-shadow: ${dt('autocomplete.shadow')};
 }

components/lib/base/style/BaseStyle.js

@@ -89,7 +89,7 @@ const theme = ({ dt }) => `
 
 .p-overlay-mask {
     background: rgba(0, 0, 0, 0.4);
-    transition-duration: ${dt('transition.duration')};
+    transition-duration: ${dt('mask.transition.duration')};
     position: fixed;
     top: 0;
     left: 0;

components/lib/breadcrumb/style/BreadcrumbStyle.js

@@ -31,7 +31,7 @@ const theme = ({ dt }) => `
     text-decoration: none;
     display: flex;
     align-items: center;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('breadcrumb.transition.duration')}, color ${dt('breadcrumb.transition.duration')}, outline-color ${dt('breadcrumb.transition.duration')}, box-shadow ${dt('breadcrumb.transition.duration')};
     border-radius: ${dt('breadcrumb.item.border.radius')};
     outline-color: transparent;
     color: ${dt('breadcrumb.item.color')};

components/lib/button/style/ButtonStyle.js

@@ -16,7 +16,7 @@ const theme = ({ dt }) => `
     font-size: 1rem;
     font-family: inherit;
     font-feature-settings: inherit;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('button.transition.duration')}, color ${dt('button.transition.duration')}, border-color ${dt('button.transition.duration')}, outline-color ${dt('button.transition.duration')}, box-shadow ${dt('button.transition.duration')};
     border-radius: ${dt('button.border.radius')};
     outline-color: transparent;
     gap: ${dt('button.gap')};

components/lib/carousel/style/CarouselStyle.js

@@ -51,7 +51,7 @@ const theme = ({ dt }) => `
     width: ${dt('carousel.indicator.width')};
     height: ${dt('carousel.indicator.height')};
     border: 0 none;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('carousel.transition.duration')}, color ${dt('carousel.transition.duration')}, outline-color ${dt('carousel.transition.duration')}, box-shadow ${dt('carousel.transition.duration')};
     outline-color: transparent;
     border-radius: ${dt('carousel.indicator.border.radius')};
     padding: 0;

components/lib/cascadeselect/style/CascadeSelectStyle.js

@@ -8,7 +8,7 @@ const theme = ({ dt }) => `
     user-select: none;
     background: ${dt('cascadeselect.background')};
     border: 1px solid ${dt('cascadeselect.border.color')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('cascadeselect.transition.duration')}, color ${dt('cascadeselect.transition.duration')}, border-color ${dt('cascadeselect.transition.duration')}, outline-color ${dt('cascadeselect.transition.duration')}, box-shadow ${dt('cascadeselect.transition.duration')};
     border-radius: ${dt('cascadeselect.border.radius')};
     outline-color: transparent;
     box-shadow: ${dt('cascadeselect.shadow')};
@@ -130,7 +130,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     color: ${dt('cascadeselect.option.color')};
     background: transparent;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('cascadeselect.transition.duration')}, color ${dt('cascadeselect.transition.duration')}, border-color ${dt('cascadeselect.transition.duration')}, box-shadow ${dt('cascadeselect.transition.duration')}, outline-color ${dt('cascadeselect.transition.duration')};
     border-radius: ${dt('cascadeselect.option.border.radius')};
 }
 

components/lib/checkbox/style/CheckboxStyle.js

@@ -36,13 +36,13 @@ const theme = ({ dt }) => `
     background: ${dt('checkbox.background')};
     width: ${dt('checkbox.width')};
     height: ${dt('checkbox.width')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('checkbox.transition.duration')}, color ${dt('checkbox.transition.duration')}, border-color ${dt('checkbox.transition.duration')}, box-shadow ${dt('checkbox.transition.duration')}, outline-color ${dt('checkbox.transition.duration')};
     outline-color: transparent;
     box-shadow: ${dt('checkbox.shadow')};
 }
 
 .p-checkbox-icon {
-    transition-duration: ${dt('transition.duration')};
+    transition-duration: ${dt('checkbox.transition.duration')};
     color: ${dt('checkbox.icon.color')};
     font-size: ${dt('checkbox.icon.size')};
     width: ${dt('checkbox.icon.size')};

components/lib/chip/style/ChipStyle.js

@@ -41,7 +41,7 @@ const theme = ({ dt }) => `
     height: ${dt('chip.remove.icon.size')};
     color: ${dt('chip.remove.icon.color')};
     border-radius: 50%;
-    transition: outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: outline-color ${dt('chip.transition.duration')}, box-shadow ${dt('chip.transition.duration')};
     outline-color: transparent;
 }
 

components/lib/colorpicker/style/ColorPickerStyle.js

@@ -16,7 +16,7 @@ const theme = ({ dt }) => `
     padding: 0;
     border: 0 none;
     border-radius: ${dt('colorpicker.preview.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('colorpicker.transition.duration')}, color ${dt('colorpicker.transition.duration')}, border-color ${dt('colorpicker.transition.duration')}, outline-color ${dt('colorpicker.transition.duration')}, box-shadow ${dt('colorpicker.transition.duration')};
     outline-color: transparent;
     cursor: pointer;
 }

components/lib/contextmenu/style/ContextMenuStyle.js

@@ -39,7 +39,7 @@ const theme = ({ dt }) => `
 }
 
 .p-contextmenu-item-content {
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')};
+    transition: background ${dt('contextmenu.transition.duration')}, color ${dt('contextmenu.transition.duration')};
     border-radius: ${dt('contextmenu.item.border.radius')};
     color: ${dt('contextmenu.item.color')};
 }

components/lib/datatable/style/DataTableStyle.js

@@ -164,7 +164,7 @@ const theme = ({ dt }) => `
     color: ${dt('datatable.filter.constraint.color')};
     border-radius: ${dt('datatable.filter.constraint.border.radius')};
     cursor: pointer;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
 }
 
 .p-datatable-filter-constraint-selected {
@@ -297,14 +297,14 @@ const theme = ({ dt }) => `
     border-width: 0 0 1px 0;
     color: ${dt('datatable.header.cell.color')};
     font-weight: ${dt('datatable.header.font.weight')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
 }
 
 .p-datatable-tbody > tr {
     outline-color: transparent;
     background: ${dt('datatable.row.background')};
     color: ${dt('datatable.row.color')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
 }
 
 .p-datatable-tbody > tr > td {
@@ -365,7 +365,7 @@ const theme = ({ dt }) => `
 
 .p-datatable-sort-icon {
     color: ${dt('datatable.sort.icon.color')};
-    transition: color ${dt('transition.duration')};
+    transition: color ${dt('datatable.transition.duration')};
 }
 
 .p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
@@ -544,7 +544,7 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
     background: transparent;
     cursor: pointer;
     border-radius: ${dt('datatable.row.toggle.button.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
     outline-color: transparent;
     user-select: none;
 }

components/lib/datepicker/style/DatePickerStyle.js

@@ -32,7 +32,7 @@ const theme = ({ dt }) => `
     border: 1px solid ${dt('datepicker.dropdown.border.color')};
     border-left: 0 none;
     color: ${dt('datepicker.dropdown.color')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};
     outline-color: transparent;
 }
 
@@ -125,7 +125,7 @@ const theme = ({ dt }) => `
     margin: 0;
     cursor: pointer;
     font-weight: inherit;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')}, box-shadow ${dt('datepicker.transition.duration')};
 }
 
 .p-datepicker-view-month {
@@ -201,7 +201,7 @@ const theme = ({ dt }) => `
     width: ${dt('datepicker.date.width')};
     height: ${dt('datepicker.date.height')};
     border-radius: ${dt('datepicker.date.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};
     border: 1px solid transparent;
     outline-color: transparent;
     color: ${dt('datepicker.date.color')};
@@ -246,7 +246,7 @@ const theme = ({ dt }) => `
     overflow: hidden;
     position: relative;
     padding: ${dt('datepicker.date.padding')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};
     border-radius: ${dt('datepicker.month.border.radius')};
     outline-color: transparent;
     color: ${dt('datepicker.date.color')};
@@ -281,7 +281,7 @@ const theme = ({ dt }) => `
     overflow: hidden;
     position: relative;
     padding: ${dt('datepicker.date.padding')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};
     border-radius: ${dt('datepicker.year.border.radius')};
     outline-color: transparent;
     color: ${dt('datepicker.date.color')};

components/lib/fieldset/style/FieldsetStyle.js

@@ -17,7 +17,7 @@ const theme = ({ dt }) => `
     border-style: solid;
     border-color: ${dt('fieldset.legend.border.color')};
     padding: ${dt('fieldset.legend.padding')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('fieldset.transition.duration')}, color ${dt('fieldset.transition.duration')}, outline-color ${dt('fieldset.transition.duration')}, box-shadow ${dt('fieldset.transition.duration')};
 }
 
 .p-fieldset-toggleable > .p-fieldset-legend {
@@ -38,7 +38,7 @@ const theme = ({ dt }) => `
     background: transparent;
     border: 0 none;
     border-radius: ${dt('fieldset.legend.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('fieldset.transition.duration')}, color ${dt('fieldset.transition.duration')}, outline-color ${dt('fieldset.transition.duration')}, box-shadow ${dt('fieldset.transition.duration')};
     outline-color: transparent;
 }
 
@@ -59,7 +59,7 @@ const theme = ({ dt }) => `
 
 .p-fieldset-toggle-icon {
     color: ${dt('fieldset.toggle.icon.color')};
-    transition: color ${dt('transition.duration')};
+    transition: color ${dt('fieldset.transition.duration')};
 }
 
 .p-fieldset-toggleable > .p-fieldset-legend:hover .p-fieldset-toggle-icon {

components/lib/fileupload/style/FileUploadStyle.js

@@ -28,7 +28,7 @@ const theme = ({ dt }) => `
 .p-fileupload-content {
     border: 1px solid transparent;
     position: relative;
-    transition: border-color ${dt('transition.duration')};
+    transition: border-color ${dt('fileupload.transition.duration')};
     padding: ${dt('fileupload.content.padding')};
 }
 

components/lib/galleria/style/GalleriaStyle.js

@@ -37,7 +37,7 @@ const theme = ({ dt }) => `
     color: ${dt('galleria.nav.button.color')};
     width: ${dt('galleria.nav.button.size')};
     height: ${dt('galleria.nav.button.size')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')}, box-shadow ${dt('galleria.transition.duration')};
     margin: calc(-1 * calc(${dt('galleria.nav.button.size')}) / 2) ${dt('galleria.nav.button.gutter')} 0 ${dt('galleria.nav.button.gutter')};
     padding: 0;
     user-select: none;
@@ -85,7 +85,7 @@ const theme = ({ dt }) => `
 .p-galleria-hover-navigators .p-galleria-nav-button {
     pointer-events: none;
     opacity: 0;
-    transition: opacity ${dt('transition.duration')} ease-in-out;
+    transition: opacity ${dt('galleria.transition.duration')} ease-in-out;
 }
 
 .p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {
@@ -131,7 +131,7 @@ const theme = ({ dt }) => `
     color: ${dt('galleria.thumbnail.nav.button.color')};
     width: ${dt('galleria.thumbnail.nav.button.size')};
     height: ${dt('galleria.thumbnail.nav.button.size')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')};
     outline-color: transparent;
     border-radius: ${dt('galleria.thumbnail.nav.button.border.radius')};
 }
@@ -240,7 +240,7 @@ const theme = ({ dt }) => `
     background: ${dt('galleria.indicator.button.background')};
     width: ${dt('galleria.indicator.button.width')};
     height: ${dt('galleria.indicator.button.height')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')}, box-shadow ${dt('galleria.transition.duration')};
     outline-color: transparent;
     border-radius: ${dt('galleria.indicator.button.border.radius')};
     margin: 0;
@@ -362,7 +362,7 @@ const theme = ({ dt }) => `
     cursor: pointer;
     border-radius: ${dt('galleria.close.button.border.radius')};
     outline-color: transparent;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')};
 }
 
 .p-galleria-close-icon {

components/lib/image/style/ImageStyle.js

@@ -29,7 +29,7 @@ const theme = ({ dt }) => `
     cursor: pointer;
     background: transparent;
     color: ${dt('image.preview.mask.color')};
-    transition: background ${dt('transition.duration')};
+    transition: background ${dt('image.transition.duration')};
 }
 
 .p-image-preview:hover > .p-image-preview-mask {
@@ -77,7 +77,7 @@ const theme = ({ dt }) => `
     user-select: none;
     border-radius: ${dt('image.action.border.radius')};
     outline-color: transparent;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('image.transition.duration')}, color ${dt('image.transition.duration')}, outline-color ${dt('image.transition.duration')}, box-shadow ${dt('image.transition.duration')};
 }
 
 .p-image-action:hover {

components/lib/inplace/style/InplaceStyle.js

@@ -6,7 +6,7 @@ const theme = ({ dt }) => `
     cursor: pointer;
     padding: ${dt('inplace.padding')};
     border-radius: ${dt('inplace.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('inplace.transition.duration')}, color ${dt('inplace.transition.duration')}, outline-color ${dt('inplace.transition.duration')}, box-shadow ${dt('inplace.transition.duration')};
     outline-color: transparent;
 }
 

components/lib/inputchips/style/InputChipsStyle.js

@@ -20,7 +20,7 @@ const theme = ({ dt }) => `
     border: 1px solid ${dt('inputchips.border.color')};
     border-radius: ${dt('inputchips.border.radius')};
     width: 100%;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('inputchips.transition.duration')}, color ${dt('inputchips.transition.duration')}, border-color ${dt('inputchips.transition.duration')}, outline-color ${dt('inputchips.transition.duration')}, box-shadow ${dt('inputchips.transition.duration')};
     outline-color: transparent;
     box-shadow: ${dt('inputchips.shadow')};
 }
@@ -58,7 +58,7 @@ const theme = ({ dt }) => `
     padding-top: calc(${dt('inputchips.padding.y')} / 2);
     padding-bottom: calc(${dt('inputchips.padding.y')} / 2);
     border-radius: ${dt('inputchips.chip.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')};
+    transition: background ${dt('inputchips.transition.duration')}, color ${dt('inputchips.transition.duration')};
 }
 
 .p-inputchips-chip-item.p-focus .p-inputchips-chip {

components/lib/inputnumber/style/InputNumberStyle.js

@@ -15,7 +15,7 @@ const theme = ({ dt }) => `
     background: ${dt('inputnumber.button.background')};
     color: ${dt('inputnumber.button.color')};
     width: ${dt('inputnumber.button.width')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('inputnumber.transition.duration')}, color ${dt('inputnumber.transition.duration')}, border-color ${dt('inputnumber.transition.duration')}, outline-color ${dt('inputnumber.transition.duration')};
 }
 
 .p-inputnumber-button:hover {

components/lib/inputtext/style/InputTextStyle.js

@@ -9,7 +9,7 @@ const theme = ({ dt }) => `
     background: ${dt('inputtext.background')};
     padding: ${dt('inputtext.padding.y')} ${dt('inputtext.padding.x')};
     border: 1px solid ${dt('inputtext.border.color')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('inputtext.transition.duration')}, color ${dt('inputtext.transition.duration')}, border-color ${dt('inputtext.transition.duration')}, outline-color ${dt('inputtext.transition.duration')}, box-shadow ${dt('inputtext.transition.duration')};
     appearance: none;
     border-radius: ${dt('inputtext.border.radius')};
     outline-color: transparent;

components/lib/knob/style/KnobStyle.js

@@ -20,7 +20,7 @@ const theme = ({ dt }) => `
 .p-knob svg {
     border-radius: ${dt('border.radius.md')};
     outline-color: transparent;
-    transition: outline-color ${dt('transition.duration')};
+    transition: outline-color ${dt('knob.transition.duration')};
 }
 .p-knob svg:focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};

components/lib/listbox/style/ListboxStyle.js

@@ -6,7 +6,7 @@ const theme = ({ dt }) => `
     color: ${dt('listbox.color')};
     border: 1px solid ${dt('listbox.border.color')};
     border-radius: ${dt('listbox.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('listbox.transition.duration')}, color ${dt('listbox.transition.duration')}, border-color ${dt('listbox.transition.duration')}, box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};
     outline-color: transparent;
     box-shadow: ${dt('listbox.shadow')};
 }
@@ -64,7 +64,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     border-radius: ${dt('listbox.option.border.radius')};
     color: ${dt('listbox.option.color')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('listbox.transition.duration')}, color ${dt('listbox.transition.duration')}, border-color ${dt('listbox.transition.duration')}, box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};
 }
 
 .p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {

components/lib/megamenu/style/MegaMenuStyle.js

@@ -32,7 +32,7 @@ const theme = ({ dt }) => `
 }
 
 .p-megamenu-item-content {
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')};
+    transition: background ${dt('megamenu.transition.duration')}, color ${dt('megamenu.transition.duration')};
     border-radius: ${dt('megamenu.item.border.radius')};
     color: ${dt('megamenu.item.color')};
 }
@@ -230,7 +230,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     background: transparent;
     border-radius: ${dt('megamenu.mobile.button.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, ox-shadow ${dt('transition.duration')};
+    transition: background ${dt('megamenu.transition.duration')}, color ${dt('megamenu.transition.duration')}, outline-color ${dt('megamenu.transition.duration')}, ox-shadow ${dt('megamenu.transition.duration')};
     outline-color: transparent;
 }
 

components/lib/menu/style/MenuStyle.js

@@ -20,7 +20,7 @@ const theme = ({ dt }) => `
 }
 
 .p-menu-item-content {
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')};
+    transition: background ${dt('menu.transition.duration')}, color ${dt('menu.transition.duration')};
     border-radius: ${dt('menu.item.border.radius')};
     color: ${dt('menu.item.color')};
 }

components/lib/menubar/style/MenubarStyle.js

@@ -36,7 +36,7 @@ const theme = ({ dt }) => `
 }
 
 .p-menubar-item-content {
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')};
+    transition: background ${dt('menubar.transition.duration')}, color ${dt('menubar.transition.duration')};
     border-radius: ${dt('menubar.item.border.radius')};
     color: ${dt('menubar.item.color')};
 }
@@ -156,7 +156,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     background: transparent;
     border-radius: ${dt('menubar.mobile.button.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('menubar.transition.duration')}, color ${dt('menubar.transition.duration')}, outline-color ${dt('menubar.transition.duration')};
     outline-color: transparent;
 }
 

components/lib/message/style/MessageStyle.js

@@ -31,7 +31,7 @@ const theme = ({ dt }) => `
     height: ${dt('message.close.button.height')};
     border-radius: ${dt('message.close.button.border.radius')};
     background: transparent;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('message.transition.duration')}, color ${dt('message.transition.duration')}, outline-color ${dt('message.transition.duration')}, box-shadow ${dt('message.transition.duration')};
     outline-color: transparent;
     color: inherit;
     padding: 0;

components/lib/multiselect/style/MultiSelectStyle.js

@@ -8,7 +8,7 @@ const theme = ({ dt }) => `
     user-select: none;
     background: ${dt('multiselect.background')};
     border: 1px solid ${dt('multiselect.border.color')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('multiselect.transition.duration')}, color ${dt('multiselect.transition.duration')}, border-color ${dt('multiselect.transition.duration')}, outline-color ${dt('multiselect.transition.duration')}, box-shadow ${dt('multiselect.transition.duration')};
     border-radius: ${dt('multiselect.border.radius')};
     outline-color: transparent;
     box-shadow: ${dt('multiselect.shadow')};
@@ -145,7 +145,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     color: ${dt('multiselect.option.color')};
     background: transparent;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('multiselect.transition.duration')}, color ${dt('multiselect.transition.duration')}, border-color ${dt('multiselect.transition.duration')}, box-shadow ${dt('multiselect.transition.duration')}, outline-color ${dt('multiselect.transition.duration')};
     border-radius: ${dt('multiselect.option.border.radius')}
 }
 

components/lib/organizationchart/style/OrganizationChartStyle.js

@@ -21,7 +21,7 @@ const theme = ({ dt }) => `
     color: ${dt('organizationchart.node.color')};
     padding: ${dt('organizationchart.node.padding')};
     border-radius: ${dt('organizationchart.node.border.radius')};
-    transition: background ${dt('transition.duration')}, border-color ${dt('transition.duration')}, color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('organizationchart.transition.duration')}, border-color ${dt('organizationchart.transition.duration')}, color ${dt('organizationchart.transition.duration')}, box-shadow ${dt('organizationchart.transition.duration')};
 }
 
 .p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {
@@ -57,7 +57,7 @@ const theme = ({ dt }) => `
     justify-content: center;
     align-items: center;
     outline-color: transparent;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('organizationchart.transition.duration')}, color ${dt('organizationchart.transition.duration')}, border-color ${dt('organizationchart.transition.duration')}, outline-color ${dt('organizationchart.transition.duration')}, box-shadow ${dt('organizationchart.transition.duration')};
 }
 
 .p-organizationchart-node-toggle-button:hover {

components/lib/paginator/style/PaginatorStyle.js

@@ -39,7 +39,7 @@ const theme = ({ dt }) => `
     color: ${dt('paginator.nav.button.color')};
     min-width: ${dt('paginator.nav.button.width')};
     height: ${dt('paginator.nav.button.height')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('paginator.transition.duration')}, color ${dt('paginator.transition.duration')}, outline-color ${dt('paginator.transition.duration')}, box-shadow ${dt('paginator.transition.duration')};
     border-radius: ${dt('paginator.nav.button.border.radius')};
     padding: 0;
     margin: 0;

components/lib/panelmenu/style/PanelMenuStyle.js

@@ -35,7 +35,7 @@ const theme = ({ dt }) => `
 
 .p-panelmenu-header-content {
     border-radius: ${dt('panelmenu.item.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('panelmenu.transition.duration')}, color ${dt('panelmenu.transition.duration')}, outline-color ${dt('panelmenu.transition.duration')}, box-shadow ${dt('panelmenu.transition.duration')};
     outline-color: transparent;
     color: ${dt('panelmenu.item.color')};
 }
@@ -113,7 +113,7 @@ const theme = ({ dt }) => `
 
 .p-panelmenu-item-content {
     border-radius: ${dt('panelmenu.item.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('panelmenu.transition.duration')}, color ${dt('panelmenu.transition.duration')}, outline-color ${dt('panelmenu.transition.duration')}, box-shadow ${dt('panelmenu.transition.duration')};
     color: ${dt('panelmenu.item.color')};
     outline-color: transparent;
 }

components/lib/radiobutton/style/RadioButtonStyle.js

@@ -36,13 +36,13 @@ const theme = ({ dt }) => `
     background: ${dt('radiobutton.background')};
     width: ${dt('radiobutton.width')};
     height: ${dt('radiobutton.height')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('radiobutton.transition.duration')}, color ${dt('radiobutton.transition.duration')}, border-color ${dt('radiobutton.transition.duration')}, box-shadow ${dt('radiobutton.transition.duration')}, outline-color ${dt('radiobutton.transition.duration')};
     outline-color: transparent;
     box-shadow: ${dt('radiobutton.shadow')};
 }
 
 .p-radiobutton-icon {
-    transition-duration: ${dt('transition.duration')};
+    transition-duration: ${dt('radiobutton.transition.duration')};
     background: transparent;
     font-size: ${dt('radiobutton.icon.size')};
     width: ${dt('radiobutton.icon.size')};

components/lib/rating/style/RatingStyle.js

@@ -15,7 +15,7 @@ const theme = ({ dt }) => `
     outline-color: transparent;
     border-radius: 50%;
     cursor: pointer;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('rating.transition.duration')}, color ${dt('rating.transition.duration')}, border-color ${dt('rating.transition.duration')}, outline-color ${dt('rating.transition.duration')}, box-shadow ${dt('rating.transition.duration')};
 }
 
 .p-rating-option.p-focus-visible {
@@ -26,7 +26,7 @@ const theme = ({ dt }) => `
 
 .p-rating-icon {
     color: ${dt('rating.icon.color')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('rating.transition.duration')}, color ${dt('rating.transition.duration')}, border-color ${dt('rating.transition.duration')}, outline-color ${dt('rating.transition.duration')}, box-shadow ${dt('rating.transition.duration')};
     font-size: ${dt('rating.icon.size')};
     width: ${dt('rating.icon.size')};
     height: ${dt('rating.icon.size')};

components/lib/scrollpanel/style/ScrollPanelStyle.js

@@ -31,10 +31,10 @@ const theme = ({ dt }) => `
     cursor: pointer;
     opacity: 0;
     outline-color: transparent;
-    transition: outline-color ${dt('transition.duration')};
+    transition: outline-color ${dt('scrollpanel.transition.duration')};
     background: ${dt('scrollpanel.bar.background')};
     border: 0 none;
-    transition: outline-color ${dt('transition.duration')}, opacity ${dt('transition.duration')};
+    transition: outline-color ${dt('scrollpanel.transition.duration')}, opacity ${dt('scrollpanel.transition.duration')};
 }
 
 .p-scrollpanel-bar:focus-visible {

components/lib/select/style/SelectStyle.js

@@ -8,7 +8,7 @@ const theme = ({ dt }) => `
     user-select: none;
     background: ${dt('select.background')};
     border: 1px solid ${dt('select.border.color')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')}, outline-color ${dt('select.transition.duration')}, box-shadow ${dt('select.transition.duration')};
     border-radius: ${dt('select.border.radius')};
     outline-color: transparent;
     box-shadow: ${dt('select.shadow')};
@@ -156,7 +156,7 @@ input.p-select-label {
     border: 0 none;
     color: ${dt('select.option.color')};
     background: transparent;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')}, box-shadow ${dt('select.transition.duration')}, outline-color ${dt('select.transition.duration')};
     border-radius: ${dt('select.option.border.radius')};
 }
 

components/lib/slider/style/SliderStyle.js

@@ -17,7 +17,7 @@ const theme = ({ dt }) => `
     width: ${dt('slider.handle.width')};
     background: ${dt('slider.handle.background')};
     border-radius: ${dt('slider.handle.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('slider.transition.duration')}, color ${dt('slider.transition.duration')}, border-color ${dt('slider.transition.duration')}, box-shadow ${dt('slider.transition.duration')}, outline-color ${dt('slider.transition.duration')};
     outline-color: transparent;
 }
 
@@ -29,7 +29,7 @@ const theme = ({ dt }) => `
     background: ${dt('slider.handle.content.background')};
     border-radius: ${dt('slider.handle.content.border.radius')};
     box-shadow: ${dt('slider.handle.content.shadow')};
-    transition: background ${dt('transition.duration')};
+    transition: background ${dt('slider.transition.duration')};
 }
 
 .p-slider:not(.p-disabled) .p-slider-handle:hover {

components/lib/speeddial/style/SpeedDialStyle.js

@@ -12,8 +12,8 @@ const theme = ({ dt }) => `
 }
 
 .p-speeddial-button.p-speeddial-rotate {
-    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')},
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background ${dt('speeddial.transition.duration')}, color ${dt('speeddial.transition.duration')}, border-color ${dt('speeddial.transition.duration')},
-    box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    box-shadow ${dt('speeddial.transition.duration')}, outline-color ${dt('speeddial.transition.duration')};
     will-change: transform;
 }
 
@@ -24,7 +24,7 @@ const theme = ({ dt }) => `
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: top 0s linear ${dt('transition.duration')};
+    transition: top 0s linear ${dt('speeddial.transition.duration')};
     pointer-events: none;
     outline: 0 none;
     z-index: 2;

components/lib/splitter/style/SplitterStyle.js

@@ -27,7 +27,7 @@ const theme = ({ dt }) => `
 .p-splitter-gutter-handle {
     border-radius: ${dt('splitter.handle.border.radius')};
     background: ${dt('splitter.handle.background')};
-    transition: outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: outline-color ${dt('splitter.transition.duration')}, box-shadow ${dt('splitter.transition.duration')};
     outline-color: transparent;
 }
 

components/lib/stepper/style/StepperStyle.js

@@ -31,7 +31,7 @@ const theme = ({ dt }) => `
     align-items: center;
     text-decoration: none;
     cursor: pointer;
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('stepper.transition.duration')}, color ${dt('stepper.transition.duration')}, border-color ${dt('stepper.transition.duration')}, outline-color ${dt('stepper.transition.duration')}, box-shadow ${dt('stepper.transition.duration')};
     border-radius: ${dt('stepper.item.header.border.radius')};
     outline-color: transparent;
     background: transparent;
@@ -57,7 +57,7 @@ const theme = ({ dt }) => `
     max-width: 100%;
     color: ${dt('stepper.item.title.color')};
     font-weight: ${dt('stepper.item.title.font.weight')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('stepper.transition.duration')}, color ${dt('stepper.transition.duration')}, border-color ${dt('stepper.transition.duration')}, box-shadow ${dt('stepper.transition.duration')}, outline-color ${dt('stepper.transition.duration')};
 }
 
 .p-stepper-item-number {
@@ -113,7 +113,7 @@ const theme = ({ dt }) => `
     background: ${dt('stepper.separator.background')};
     width: 100%;
     height: ${dt('stepper.separator.size')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('stepper.transition.duration')}, color ${dt('stepper.transition.duration')}, border-color ${dt('stepper.transition.duration')}, box-shadow ${dt('stepper.transition.duration')}, outline-color ${dt('stepper.transition.duration')};
 }
 
 .p-stepper-panels {

components/lib/steps/style/StepsStyle.js

@@ -54,7 +54,7 @@ const theme = ({ dt }) => `
     align-items: center;
     overflow: hidden;
     text-decoration: none;
-    transition: outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: outline-color ${dt('steps.transition.duration')}, box-shadow ${dt('steps.transition.duration')};
     border-radius: ${dt('steps.item.link.border.radius')};
     outline-color: transparent;
     gap: ${dt('steps.item.link.gap')};

components/lib/tabmenu/style/TabMenuStyle.js

@@ -32,7 +32,7 @@ const theme = ({ dt }) => `
     color: ${dt('tabmenu.item.color')};
     padding: ${dt('tabmenu.item.padding')};
     font-weight: ${dt('tabmenu.item.font.weight')};
-    transition: background ${dt('transition.duration')}, border-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('tabmenu.transition.duration')}, border-color ${dt('tabmenu.transition.duration')}, color ${dt('tabmenu.transition.duration')}, outline-color ${dt('tabmenu.transition.duration')}, box-shadow ${dt('tabmenu.transition.duration')};
     margin: ${dt('tabmenu.item.margin')};
     outline-color: transparent;
     gap: ${dt('tabmenu.item.gap')};
@@ -47,7 +47,7 @@ const theme = ({ dt }) => `
 
 .p-tabmenu-item-icon {
     color: ${dt('tabmenu.item.icon.color')};
-    transition: background ${dt('transition.duration')}, border-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('tabmenu.transition.duration')}, border-color ${dt('tabmenu.transition.duration')}, color ${dt('tabmenu.transition.duration')}, outline-color ${dt('tabmenu.transition.duration')}, box-shadow ${dt('tabmenu.transition.duration')};
 }
 
 .p-tabmenu-item-label {

components/lib/tabs/style/TabsStyle.js

@@ -47,7 +47,7 @@ const theme = ({ dt }) => `
     background: ${dt('tabs.nav.button.background')};
     color: ${dt('tabs.nav.button.color')};
     width: ${dt('tabs.nav.button.width')};
-    transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: color ${dt('tabs.transition.duration')}, outline-color ${dt('tabs.transition.duration')}, box-shadow ${dt('tabs.transition.duration')};
     box-shadow: ${dt('tabs.nav.button.shadow')};
     outline-color: transparent;
     cursor: pointer;
@@ -84,7 +84,7 @@ const theme = ({ dt }) => `
     color: ${dt('tabs.tab.color')};
     padding: ${dt('tabs.tab.padding')};
     font-weight: ${dt('tabs.tab.font.weight')};
-    transition: background ${dt('transition.duration')}, border-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('tabs.transition.duration')}, border-color ${dt('tabs.transition.duration')}, color ${dt('tabs.transition.duration')}, outline-color ${dt('tabs.transition.duration')}, box-shadow ${dt('tabs.transition.duration')};
     margin: ${dt('tabs.tab.margin')};
     outline-color: transparent;
 }

components/lib/tabview/style/TabViewStyle.js

@@ -49,7 +49,7 @@ const theme = ({ dt }) => `
     font-weight: 600;
     border-top-right-radius: ${dt('border.radius.md')};
     border-top-left-radius: ${dt('border.radius.md')};
-    transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: color ${dt('tabview.transition.duration')}, outline-color ${dt('tabview.transition.duration')};
     margin: 0 0 -1px 0;
     outline-color: transparent;
 }
@@ -88,7 +88,7 @@ const theme = ({ dt }) => `
     width: 2.5rem;
     border-radius: 0;
     outline-color: transparent;
-    transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: color ${dt('tabview.transition.duration')}, outline-color ${dt('tabview.transition.duration')};
     box-shadow: ${dt('tabview.nav.button.shadow')};
     border: none;
     cursor: pointer;

components/lib/textarea/style/TextareaStyle.js

@@ -9,7 +9,7 @@ const theme = ({ dt }) => `
     background: ${dt('textarea.background')};
     padding: ${dt('textarea.padding.y')} ${dt('textarea.padding.x')};
     border: 1px solid ${dt('textarea.border.color')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('textarea.transition.duration')}, color ${dt('textarea.transition.duration')}, border-color ${dt('textarea.transition.duration')}, outline-color ${dt('textarea.transition.duration')}, box-shadow ${dt('textarea.transition.duration')};
     appearance: none;
     border-radius: ${dt('textarea.border.radius')};
     outline-color: transparent;

components/lib/themes/aura/accordion/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     panel: {
         borderWidth: '0 0 1px 0',
         borderColor: '{content.border.color}'

components/lib/themes/aura/autocomplete/index.js

@@ -21,7 +21,8 @@ export default {
             color: '{form.field.focus.ring.color}',
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     overlay: {
         background: '{overlay.select.background}',

components/lib/themes/aura/breadcrumb/index.js

@@ -2,7 +2,8 @@ export default {
     root: {
         padding: '1rem',
         background: '{content.background}',
-        gap: '0.5rem'
+        gap: '0.5rem',
+        transitionDuration: '{transition.duration}'
     },
     item: {
         color: '{text.muted.color}',

components/lib/themes/aura/button/index.js

@@ -24,7 +24,8 @@ export default {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',
             offset: '{focus.ring.offset}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     colorScheme: {
         light: {

components/lib/themes/aura/carousel/index.js

@@ -15,7 +15,8 @@ export default {
                 offset: '{focus.ring.offset}',
                 shadow: '{focus.ring.shadow}'
             }
-        }
+        },
+        transitionDuration: '{transition.duration}'
     },
     colorScheme: {
         light: {

components/lib/themes/aura/cascadeselect/index.js

@@ -21,7 +21,8 @@ export default {
             color: '{form.field.focus.ring.color}',
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     dropdown: {
         width: '2.5rem',

components/lib/themes/aura/checkbox/index.js

@@ -22,7 +22,8 @@ export default {
             color: '{focus.ring.color}',
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     icon: {
         size: '0.875rem',

components/lib/themes/aura/chip/index.js

@@ -3,7 +3,8 @@ export default {
         borderRadius: '16px',
         paddingX: '0.75rem',
         paddingY: '0.5rem',
-        gap: '0.5rem'
+        gap: '0.5rem',
+        transitionDuration: '{transition.duration}'
     },
     image: {
         width: '2rem',

components/lib/themes/aura/colorpicker/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     preview: {
         width: '1.5rem',
         height: '1.5rem',

components/lib/themes/aura/contextmenu/index.js

@@ -4,7 +4,8 @@ export default {
         borderColor: '{content.border.color}',
         color: '{content.color}',
         borderRadius: '{content.border.radius}',
-        shadow: '{overlay.navigation.shadow}'
+        shadow: '{overlay.navigation.shadow}',
+        transitionDuration: '{transition.duration}'
     },
     list: {
         padding: '{navigation.list.padding}',

components/lib/themes/aura/datatable/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     header: {
         background: '{content.background}',
         borderColor: '{datatable.border.color}',

components/lib/themes/aura/datepicker/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     panel: {
         background: '{content.background}',
         borderColor: '{content.border.color}',

components/lib/themes/aura/fieldset/index.js

@@ -4,7 +4,8 @@ export default {
         borderColor: '{content.border.color}',
         borderRadius: '{content.border.radius}',
         color: '{content.color}',
-        padding: '0 1.125rem 1.125rem 1.125rem'
+        padding: '0 1.125rem 1.125rem 1.125rem',
+        transitionDuration: '{transition.duration}'
     },
     legend: {
         background: '{content.background}',

components/lib/themes/aura/fileupload/index.js

@@ -3,7 +3,8 @@ export default {
         background: '{content.background}',
         borderColor: '{content.border.color}',
         color: '{content.color}',
-        borderRadius: '{content.border.radius}'
+        borderRadius: '{content.border.radius}',
+        transitionDuration: '{transition.duration}'
     },
     header: {
         background: 'transparent',

components/lib/themes/aura/galleria/index.js

@@ -2,7 +2,8 @@ export default {
     root: {
         borderWidth: '1px',
         borderColor: '{content.border.color}',
-        borderRadius: '{content.border.radius}'
+        borderRadius: '{content.border.radius}',
+        transitionDuration: '{transition.duration}'
     },
     navButton: {
         background: 'rgba(255, 255, 255, 0.1)',

components/lib/themes/aura/image/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     preview: {
         icon: {
             size: '1.5rem'

components/lib/themes/aura/index.js

@@ -150,7 +150,8 @@ export default {
                 color: 'transparent',
                 offset: '0',
                 shadow: 'none'
-            }
+            },
+            transitionDuration: '{transition.duration}'
         },
         list: {
             padding: '0.25rem 0.25rem',

components/lib/themes/aura/inplace/index.js

@@ -8,7 +8,8 @@ export default {
             color: '{focus.ring.color}',
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{transition.duration}'
     },
     display: {
         hoverBackground: '{content.hover.background}',

components/lib/themes/aura/inputchips/index.js

@@ -21,7 +21,8 @@ export default {
             color: '{form.field.focus.ring.color}',
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     chip: {
         borderRadius: '{border.radius.sm}'

components/lib/themes/aura/inputnumber/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     button: {
         width: '2.5rem',
         borderRadius: '{form.field.border.radius}',

components/lib/themes/aura/inputtext/index.js

@@ -21,6 +21,7 @@ export default {
             color: '{form.field.focus.ring.color}',
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     }
 };

components/lib/themes/aura/knob/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{form.field.transition.duration}'
+    },
     value: {
         background: '{primary.color}'
     },

components/lib/themes/aura/listbox/index.js

@@ -16,7 +16,8 @@ export default {
             color: '{form.field.focus.ring.color}',
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     list: {
         padding: '{list.padding}',

components/lib/themes/aura/megamenu/index.js

@@ -11,7 +11,8 @@ export default {
         },
         horizontalOrientation: {
             padding: '0.5rem 0.75rem'
-        }
+        },
+        transitionDuration: '{transition.duration}'
     },
     baseItem: {
         borderRadius: '{content.border.radius}',

components/lib/themes/aura/menu/index.js

@@ -4,7 +4,8 @@ export default {
         borderColor: '{content.border.color}',
         color: '{content.color}',
         borderRadius: '{content.border.radius}',
-        shadow: '{overlay.navigation.shadow}'
+        shadow: '{overlay.navigation.shadow}',
+        transitionDuration: '{transition.duration}'
     },
     list: {
         padding: '{navigation.list.padding}',

components/lib/themes/aura/menubar/index.js

@@ -5,7 +5,8 @@ export default {
         borderRadius: '{content.border.radius}',
         color: '{content.color}',
         gap: '0.5rem',
-        padding: '0.5rem 0.75rem'
+        padding: '0.5rem 0.75rem',
+        transitionDuration: '{transition.duration}'
     },
     baseItem: {
         borderRadius: '{content.border.radius}',

components/lib/themes/aura/message/index.js

@@ -2,7 +2,8 @@ export default {
     root: {
         margin: '1rem 0',
         borderRadius: '{content.border.radius}',
-        borderWidth: '1px'
+        borderWidth: '1px',
+        transitionDuration: '{transition.duration}'
     },
     content: {
         padding: '0.5rem 0.75rem',

components/lib/themes/aura/multiselect/index.js

@@ -21,7 +21,8 @@ export default {
             color: '{form.field.focus.ring.color}',
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     dropdown: {
         width: '2.5rem',

components/lib/themes/aura/organizationchart/index.js

@@ -1,6 +1,7 @@
 export default {
     root: {
-        gutter: '0.75rem'
+        gutter: '0.75rem',
+        transitionDuration: '{transition.duration}'
     },
     node: {
         background: '{content.background}',

components/lib/themes/aura/paginator/index.js

@@ -4,7 +4,8 @@ export default {
         gap: '0.25rem',
         borderRadius: '{content.border.radius}',
         background: '{content.background}',
-        color: '{content.color}'
+        color: '{content.color}',
+        transitionDuration: '{transition.duration}'
     },
     navButton: {
         hoverBackground: '{content.hover.background}',

components/lib/themes/aura/panelmenu/index.js

@@ -1,6 +1,7 @@
 export default {
     root: {
-        gap: '0.5rem'
+        gap: '0.5rem',
+        transitionDuration: '{transition.duration}'
     },
     panel: {
         background: '{content.background}',

components/lib/themes/aura/radiobutton/index.js

@@ -21,7 +21,8 @@ export default {
             color: '{focus.ring.color}',
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     icon: {
         size: '0.75rem',

components/lib/themes/aura/rating/index.js

@@ -1,6 +1,7 @@
 export default {
     root: {
-        gap: '0.25rem'
+        gap: '0.25rem',
+        transitionDuration: '{transition.duration}'
     },
     icon: {
         size: '1rem',

components/lib/themes/aura/scrollpanel/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     bar: {
         size: '9px',
         borderRadius: '{border.radius.sm}',

components/lib/themes/aura/select/index.js

@@ -21,7 +21,8 @@ export default {
             color: '{form.field.focus.ring.color}',
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     dropdown: {
         width: '2.5rem',

components/lib/themes/aura/slider/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     track: {
         background: '{content.border.color}',
         borderRadius: '{content.border.radius}',

components/lib/themes/aura/speeddial/index.js

@@ -1,5 +1,6 @@
 export default {
     root: {
-        gap: '0.5rem'
+        gap: '0.5rem',
+        transitionDuration: '{transition.duration}'
     }
 };

components/lib/themes/aura/splitter/index.js

@@ -2,7 +2,8 @@ export default {
     root: {
         background: '{content.background}',
         borderColor: '{content.border.color}',
-        color: '{content.color}'
+        color: '{content.color}',
+        transitionDuration: '{transition.duration}'
     },
     gutter: {
         background: '{content.border.color}'

components/lib/themes/aura/stepper/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     separator: {
         background: '{content.border.color}',
         activeBackground: '{primary.color}',

components/lib/themes/aura/steps/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     separator: {
         background: '{content.border.color}'
     },

components/lib/themes/aura/tabmenu/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     tablist: {
         borderWidth: '0 0 1px 0',
         background: '{content.background}',

components/lib/themes/aura/tabs/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     tablist: {
         borderWidth: '0 0 1px 0',
         background: '{content.background}',

components/lib/themes/aura/tabview/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     tabList: {
         background: '{content.background}',
         borderColor: '{content.border.color}'

components/lib/themes/aura/textarea/index.js

@@ -21,6 +21,7 @@ export default {
             color: '{form.field.focus.ring.color}',
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     }
 };

components/lib/themes/aura/tieredmenu/index.js

@@ -4,7 +4,8 @@ export default {
         borderColor: '{content.border.color}',
         color: '{content.color}',
         borderRadius: '{content.border.radius}',
-        shadow: '{overlay.navigation.shadow}'
+        shadow: '{overlay.navigation.shadow}',
+        transitionDuration: '{transition.duration}'
     },
     list: {
         padding: '{navigation.list.padding}',

components/lib/themes/aura/toast/index.js

@@ -2,7 +2,8 @@ export default {
     root: {
         width: '25rem',
         borderRadius: '{content.border.radius}',
-        borderWidth: '0 0 0 6px'
+        borderWidth: '0 0 0 6px',
+        transitionDuration: '{transition.duration}'
     },
     icon: {
         size: '1.125rem'

components/lib/themes/aura/togglebutton/index.js

@@ -14,7 +14,8 @@ export default {
             color: '{focus.ring.color}',
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     icon: {
         disabledColor: '{form.field.disabled.color}'

components/lib/themes/aura/toggleswitch/index.js

@@ -1,8 +1,4 @@
 export default {
-    handle: {
-        borderRadius: '50%',
-        size: '1rem'
-    },
     root: {
         width: '2.5rem',
         height: '1.5rem',
@@ -18,7 +14,12 @@ export default {
         },
         borderWidth: '1px',
         borderColor: 'transparent',
-        invalidBorderColor: '{form.field.invalid.border.color}'
+        invalidBorderColor: '{form.field.invalid.border.color}',
+        transitionDuration: '{form.field.transition.duration}'
+    },
+    handle: {
+        borderRadius: '50%',
+        size: '1rem'
     },
     colorScheme: {
         light: {

components/lib/themes/aura/tree/index.js

@@ -4,7 +4,8 @@ export default {
         color: '{content.color}',
         padding: '1rem',
         gap: '2px',
-        indent: '1rem'
+        indent: '1rem',
+        transitionDuration: '{transition.duration}'
     },
     node: {
         padding: '0.25rem 0.5rem',

components/lib/themes/aura/treeselect/index.js

@@ -21,7 +21,8 @@ export default {
             color: '{form.field.focus.ring.color}',
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     dropdown: {
         width: '2.5rem',

components/lib/themes/aura/treetable/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     header: {
         background: '{content.background}',
         borderColor: '{treetable.border.color}',

components/lib/themes/lara/accordion/index.js

@@ -1,4 +1,7 @@
 export default {
+    root: {
+        transitionDuration: '{transition.duration}'
+    },
     panel: {
         borderWidth: '0',
         borderColor: '{content.border.color}'

components/lib/themes/lara/autocomplete/index.js

@@ -21,7 +21,8 @@ export default {
             color: '{form.field.focus.ring.color}',
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     overlay: {
         background: '{overlay.select.background}',

components/lib/themes/lara/breadcrumb/index.js

@@ -2,7 +2,8 @@ export default {
     root: {
         padding: '1.25rem',
         background: '{content.background}',
-        gap: '0.5rem'
+        gap: '0.5rem',
+        transitionDuration: '{transition.duration}'
     },
     item: {
         color: '{text.muted.color}',

components/lib/themes/lara/button/index.js

@@ -24,7 +24,8 @@ export default {
             width: '{form.field.focus.ring.width}',
             style: '{form.field.focus.ring.style}',
             offset: '{form.field.focus.ring.offset}'
-        }
+        },
+        transitionDuration: '{form.field.transition.duration}'
     },
     colorScheme: {
         light: {

components/lib/themes/lara/carousel/index.js

@@ -15,7 +15,8 @@ export default {
                 offset: '{focus.ring.offset}',
                 shadow: '{focus.ring.shadow}'
             }
-        }
+        },
+        transitionDuration: '{transition.duration}'
     },
     colorScheme: {
         light: {