From 6c459a5e6334cb901e202bb502576218d37b507d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 1 Aug 2023 15:56:15 +0300
Subject: [PATCH 1/4] Refactor #4211 - For Carousel

---
 components/lib/carousel/Carousel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index 041c63ec4..a73c8e6cd 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -56,7 +56,7 @@
                 </button>
             </div>
             <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
-                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator')" :data-p-highlight="d_page === i">
+                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i">
                     <button
                         :class="cx('indicatorButton')"
                         type="button"

From 6085cdec7f29fdeed7ffe72e63230815f771cb99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 1 Aug 2023 16:00:18 +0300
Subject: [PATCH 2/4] Typo fix

---
 pages/accordion/index.vue   | 2 +-
 pages/avatar/index.vue      | 2 +-
 pages/badge/index.vue       | 2 +-
 pages/blockui/index.vue     | 2 +-
 pages/carousel/index.vue    | 2 +-
 pages/chip/index.vue        | 2 +-
 pages/divider/index.vue     | 2 +-
 pages/fieldset/index.vue    | 2 +-
 pages/galleria/index.vue    | 2 +-
 pages/inplace/index.vue     | 2 +-
 pages/message/index.vue     | 2 +-
 pages/progressbar/index.vue | 2 +-
 pages/skeleton/index.vue    | 2 +-
 pages/splitter/index.vue    | 2 +-
 pages/tabview/index.vue     | 2 +-
 pages/tag/index.vue         | 2 +-
 pages/terminal/index.vue    | 2 +-
 pages/toolbar/index.vue     | 2 +-
 18 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/pages/accordion/index.vue b/pages/accordion/index.vue
index d5fc89ab4..eb182e64e 100755
--- a/pages/accordion/index.vue
+++ b/pages/accordion/index.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Accordion/theming/index.vue';
 import AccessibilityDoc from '@/doc/accordion/AccessibilityDoc';
 import BasicDoc from '@/doc/accordion/BasicDoc';
 import ControlledDoc from '@/doc/accordion/ControlledDoc.vue';
@@ -21,6 +20,7 @@ import ImportDoc from '@/doc/accordion/ImportDoc';
 import MultipleDoc from '@/doc/accordion/MultipleDoc.vue';
 import TemplateDoc from '@/doc/accordion/TemplateDoc.vue';
 import PTComponent from '@/doc/accordion/pt/index.vue';
+import ThemingDoc from '@/doc/accordion/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index 3fca7b992..ba384fa5d 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Avatar/theming/index.vue';
 import AccessibilityDoc from '@/doc/avatar/AccessibilityDoc';
 import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc';
 import IconDoc from '@/doc/avatar/IconDoc';
@@ -19,6 +18,7 @@ import ImageDoc from '@/doc/avatar/ImageDoc';
 import ImportDoc from '@/doc/avatar/ImportDoc';
 import LabelDoc from '@/doc/avatar/LabelDoc';
 import PTComponent from '@/doc/avatar/pt/index.vue';
+import ThemingDoc from '@/doc/avatar/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/badge/index.vue b/pages/badge/index.vue
index 3681c84dc..2d7b9be55 100644
--- a/pages/badge/index.vue
+++ b/pages/badge/index.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Badge/theming/index.vue';
 import AccessibilityDoc from '@/doc/badge/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/badge/BasicDoc.vue';
 import ButtonDoc from '@/doc/badge/ButtonDoc.vue';
@@ -12,6 +11,7 @@ import PositionDoc from '@/doc/badge/PositionDoc.vue';
 import SeverityDoc from '@/doc/badge/SeverityDoc.vue';
 import SizeDoc from '@/doc/badge/SizeDoc.vue';
 import PTComponent from '@/doc/badge/pt/index.vue';
+import ThemingDoc from '@/doc/badge/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/blockui/index.vue b/pages/blockui/index.vue
index 60ab52447..acaeea96a 100755
--- a/pages/blockui/index.vue
+++ b/pages/blockui/index.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Blockui/theming/index.vue';
 import AccessibilityDoc from '@/doc/blockui/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/blockui/BasicDoc.vue';
 import DocumentDoc from '@/doc/blockui/DocumentDoc.vue';
 import ImportDoc from '@/doc/blockui/ImportDoc.vue';
 import PTComponent from '@/doc/blockui/pt/index.vue';
+import ThemingDoc from '@/doc/blockui/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/carousel/index.vue b/pages/carousel/index.vue
index a7fa6b8b7..c5596f33a 100755
--- a/pages/carousel/index.vue
+++ b/pages/carousel/index.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Carousel/theming/index.vue';
 import AccessibilityDoc from '@/doc/carousel/AccessibilityDoc';
 import BasicDoc from '@/doc/carousel/BasicDoc';
 import CircularDoc from '@/doc/carousel/CircularDoc';
@@ -20,6 +19,7 @@ import NumScrollDoc from '@/doc/carousel/NumScrollDoc';
 import ResponsiveDoc from '@/doc/carousel/ResponsiveDoc';
 import VerticalDoc from '@/doc/carousel/VerticalDoc';
 import PTComponent from '@/doc/carousel/pt/index.vue';
+import ThemingDoc from '@/doc/carousel/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/chip/index.vue b/pages/chip/index.vue
index f91edbbdd..d62fd4c82 100644
--- a/pages/chip/index.vue
+++ b/pages/chip/index.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Chip/theming/index.vue';
 import AccessibilityDoc from '@/doc/chip/AccessibilityDoc';
 import BasicDoc from '@/doc/chip/BasicDoc';
 import IconDoc from '@/doc/chip/IconDoc';
@@ -11,6 +10,7 @@ import ImageDoc from '@/doc/chip/ImageDoc';
 import ImportDoc from '@/doc/chip/ImportDoc';
 import TemplateDoc from '@/doc/chip/TemplateDoc';
 import PTComponent from '@/doc/chip/pt/index.vue';
+import ThemingDoc from '@/doc/chip/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/divider/index.vue b/pages/divider/index.vue
index b5ec60caa..22db5158e 100644
--- a/pages/divider/index.vue
+++ b/pages/divider/index.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Divider/theming/index.vue';
 import AccessibilityDoc from '@/doc/divider/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/divider/BasicDoc.vue';
 import ContentDoc from '@/doc/divider/ContentDoc.vue';
@@ -12,6 +11,7 @@ import LoginDoc from '@/doc/divider/LoginDoc.vue';
 import TypeDoc from '@/doc/divider/TypeDoc.vue';
 import VerticalDoc from '@/doc/divider/VerticalDoc.vue';
 import PTComponent from '@/doc/divider/pt/index.vue';
+import ThemingDoc from '@/doc/divider/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/fieldset/index.vue b/pages/fieldset/index.vue
index eeeff22c7..bce6a791f 100755
--- a/pages/fieldset/index.vue
+++ b/pages/fieldset/index.vue
@@ -3,13 +3,13 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Fieldset/theming/index.vue';
 import AccessibilityDoc from '@/doc/fieldset/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/fieldset/BasicDoc.vue';
 import ImportDoc from '@/doc/fieldset/ImportDoc.vue';
 import TemplateDoc from '@/doc/fieldset/TemplateDoc.vue';
 import ToggleableDoc from '@/doc/fieldset/ToggleableDoc.vue';
 import PTComponent from '@/doc/fieldset/pt/index.vue';
+import ThemingDoc from '@/doc/fieldset/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/galleria/index.vue b/pages/galleria/index.vue
index ec6026710..517b7235a 100755
--- a/pages/galleria/index.vue
+++ b/pages/galleria/index.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Galleria/theming/index.vue';
 import AccessibilityDoc from '@/doc/galleria/AccessibilityDoc';
 import AdvancedDoc from '@/doc/galleria/AdvancedDoc';
 import AutoPlayDoc from '@/doc/galleria/AutoPlayDoc';
@@ -25,6 +24,7 @@ import IndicatorsDoc from '@/doc/galleria/navigator/IndicatorsDoc';
 import ItemThumbnailsDoc from '@/doc/galleria/navigator/ItemThumbnailsDoc';
 import ItemWithoutThumbnailsDoc from '@/doc/galleria/navigator/ItemWithoutThumbnailsDoc';
 import PTComponent from '@/doc/galleria/pt/index.vue';
+import ThemingDoc from '@/doc/galleria/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/inplace/index.vue b/pages/inplace/index.vue
index f733c9e9d..efab20e8c 100755
--- a/pages/inplace/index.vue
+++ b/pages/inplace/index.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Inplace/theming/index.vue';
 import AccessibilityDoc from '@/doc/inplace/AccessibilityDoc';
 import BasicDoc from '@/doc/inplace/BasicDoc';
 import ImageDoc from '@/doc/inplace/ImageDoc';
@@ -19,6 +18,7 @@ import ImportDoc from '@/doc/inplace/ImportDoc';
 import InputDoc from '@/doc/inplace/InputDoc';
 import LazyDoc from '@/doc/inplace/LazyDoc';
 import PTComponent from '@/doc/inplace/pt/index.vue';
+import ThemingDoc from '@/doc/inplace/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/message/index.vue b/pages/message/index.vue
index 5fcef94fb..38ada6c73 100755
--- a/pages/message/index.vue
+++ b/pages/message/index.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Message/theming/index.vue';
 import AccessibilityDoc from '@/doc/message/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/message/BasicDoc.vue';
 import ClosabledDoc from '@/doc/message/ClosableDoc.vue';
@@ -14,6 +13,7 @@ import SeverityDoc from '@/doc/message/SeverityDoc.vue';
 import StickyDoc from '@/doc/message/StickyDoc.vue';
 import TemplateDoc from '@/doc/message/TemplateDoc.vue';
 import PTComponent from '@/doc/message/pt/index.vue';
+import ThemingDoc from '@/doc/message/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/progressbar/index.vue b/pages/progressbar/index.vue
index 2ab2486cf..14ae545a8 100755
--- a/pages/progressbar/index.vue
+++ b/pages/progressbar/index.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Progressbar/theming/index.vue';
 import AccessibilityDoc from '@/doc/progressbar/AccessibilityDoc';
 import BasicDoc from '@/doc/progressbar/BasicDoc';
 import DynamicDoc from '@/doc/progressbar/DynamicDoc';
@@ -11,6 +10,7 @@ import ImportDoc from '@/doc/progressbar/ImportDoc';
 import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc';
 import TemplateDoc from '@/doc/progressbar/TemplateDoc';
 import PTComponent from '@/doc/progressbar/pt/index.vue';
+import ThemingDoc from '@/doc/progressbar/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/skeleton/index.vue b/pages/skeleton/index.vue
index 302b86005..13e814fb5 100644
--- a/pages/skeleton/index.vue
+++ b/pages/skeleton/index.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Skeleton/theming/index.vue';
 import Accessibility from '@/doc/skeleton/AccessibilityDoc.vue';
 import CardDoc from '@/doc/skeleton/CardDoc.vue';
 import DataTableDoc from '@/doc/skeleton/DataTableDoc.vue';
@@ -19,6 +18,7 @@ import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
 import ListDoc from '@/doc/skeleton/ListDoc.vue';
 import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
 import PTComponent from '@/doc/skeleton/pt/index.vue';
+import ThemingDoc from '@/doc/skeleton/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/splitter/index.vue b/pages/splitter/index.vue
index 930e01862..a8f7666e2 100644
--- a/pages/splitter/index.vue
+++ b/pages/splitter/index.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Splitter/theming/index.vue';
 import AccessibilityDoc from '@/doc/splitter/AccessibilityDoc';
 import HorizontalDoc from '@/doc/splitter/HorizontalDoc.vue';
 import ImportDoc from '@/doc/splitter/ImportDoc';
@@ -19,6 +18,7 @@ import NestedDoc from '@/doc/splitter/NestedDoc.vue';
 import SizeDoc from '@/doc/splitter/SizeDoc.vue';
 import VerticalDoc from '@/doc/splitter/VerticalDoc.vue';
 import PTComponent from '@/doc/splitter/pt/index.vue';
+import ThemingDoc from '@/doc/splitter/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/tabview/index.vue b/pages/tabview/index.vue
index b626c7d56..0e1bc80dd 100755
--- a/pages/tabview/index.vue
+++ b/pages/tabview/index.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Tabview/theming/index.vue';
 import AccessibilityDoc from '@/doc/tabview/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/tabview/BasicDoc.vue';
 import ControlledDoc from '@/doc/tabview/ControlledDoc.vue';
@@ -21,6 +20,7 @@ import ImportDoc from '@/doc/tabview/ImportDoc.vue';
 import ScrollableDoc from '@/doc/tabview/ScrollableDoc.vue';
 import TemplateDoc from '@/doc/tabview/TemplateDoc.vue';
 import PTComponent from '@/doc/tabview/pt/index.vue';
+import ThemingDoc from '@/doc/tabview/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/tag/index.vue b/pages/tag/index.vue
index 519c4246d..990efd615 100644
--- a/pages/tag/index.vue
+++ b/pages/tag/index.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Tag/theming/index.vue';
 import AccessibilityDoc from '@/doc/tag/AccessibilityDoc';
 import BasicDoc from '@/doc/tag/BasicDoc';
 import IconDoc from '@/doc/tag/IconDoc';
@@ -12,6 +11,7 @@ import PillDoc from '@/doc/tag/PillDoc';
 import SeverityDoc from '@/doc/tag/SeverityDoc';
 import TemplateDoc from '@/doc/tag/TemplateDoc';
 import PTComponent from '@/doc/tag/pt/index.vue';
+import ThemingDoc from '@/doc/tag/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/terminal/index.vue b/pages/terminal/index.vue
index 32989afbc..160d213ea 100755
--- a/pages/terminal/index.vue
+++ b/pages/terminal/index.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import ThemingDoc from '@/doc/Terminal/theming/index.vue';
 import AccessibilityDoc from '@/doc/terminal/AccessibilityDoc';
 import BasicDoc from '@/doc/terminal/BasicDoc';
 import ImportDoc from '@/doc/terminal/ImportDoc';
 import PTComponent from '@/doc/terminal/pt/index.vue';
+import ThemingDoc from '@/doc/terminal/theming/index.vue';
 
 export default {
     data() {
diff --git a/pages/toolbar/index.vue b/pages/toolbar/index.vue
index 895060e07..8041bf8b3 100755
--- a/pages/toolbar/index.vue
+++ b/pages/toolbar/index.vue
@@ -2,11 +2,11 @@
     <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 <script>
-import ThemingDoc from '@/doc/Toolbar/theming/index.vue';
 import AccessibilityDoc from '@/doc/toolbar/AccessibilityDoc';
 import BasicDoc from '@/doc/toolbar/BasicDoc';
 import ImportDoc from '@/doc/toolbar/ImportDoc';
 import PTComponent from '@/doc/toolbar/pt/index.vue';
+import ThemingDoc from '@/doc/toolbar/theming/index.vue';
 
 export default {
     data() {

From 4f4496eec819eb408da01f5155006b54e514409e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 1 Aug 2023 16:06:10 +0300
Subject: [PATCH 3/4] Tailwind grow & shrink class typo fixes

---
 components/lib/tailwind/Tailwind.js | 44 ++++++++++++++---------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/components/lib/tailwind/Tailwind.js b/components/lib/tailwind/Tailwind.js
index 68ee7e293..b44a5951e 100644
--- a/components/lib/tailwind/Tailwind.js
+++ b/components/lib/tailwind/Tailwind.js
@@ -271,7 +271,7 @@ export default {
         },
 
         gutter: ({ props }) => ({
-            class: ['flex items-center justify-center  flex-shrink-0', 'transition-all duration-200 bg-gray-100 dark:bg-gray-800', { 'cursor-col-resize': props.layout == 'horizontal', 'cursor-row-resize': props.layout !== 'horizontal' }]
+            class: ['flex items-center justify-center  shrink-0', 'transition-all duration-200 bg-gray-100 dark:bg-gray-800', { 'cursor-col-resize': props.layout == 'horizontal', 'cursor-row-resize': props.layout !== 'horizontal' }]
         }),
         gutterhandler: ({ props }) => ({
             class: ['bg-gray-300 dark:bg-gray-600 transition-all duration-200', { 'h-7': props.layout == 'horizontal', 'w-7 h-2': props.layout !== 'horizontal' }]
@@ -279,7 +279,7 @@ export default {
     },
     splitterpanel: {
         root: ({ props }) => ({
-            class: ['flex-grow', 'flex justify-center items-center']
+            class: ['grow', 'flex justify-center items-center']
         })
     },
     dialog: {
@@ -287,7 +287,7 @@ export default {
             class: ['rounded-lg shadow-lg border-0', 'flex flex-col max-h-90 transform scale-100', 'm-0  w-[50vw] z-40 relative', '', 'dark:border dark:border-blue-900/40']
         }),
         header: {
-            class: ['flex items-center justify-between flex-shrink-0', 'bg-white text-gray-800 border-t-0  rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900  dark:text-white/80']
+            class: ['flex items-center justify-between shrink-0', 'bg-white text-gray-800 border-t-0  rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900  dark:text-white/80']
         },
         headerTitle: {
             class: ['font-bold text-lg']
@@ -311,7 +311,7 @@ export default {
             class: ['overflow-y-auto', 'bg-white text-gray-700 px-6 pb-8 pt-0', 'rounded-bl-lg rounded-br-lg', 'dark:bg-gray-900  dark:text-white/80 ']
         },
         footer: {
-            class: ['flex-shrink-0 ', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900  dark:text-white/80']
+            class: ['shrink-0 ', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900  dark:text-white/80']
         },
         mask: {
             class: ['fixed top-0 left-0 w-full h-full flex items-center justify-center pointer-events-auto', 'bg-black bg-opacity-40 transition duration-200 z-20']
@@ -385,7 +385,7 @@ export default {
             class: ['w-4 h-4 inline-block']
         },
         content: {
-            class: ['p-5 pt-0 h-full w-full', 'flex-grow overflow-y-auto']
+            class: ['p-5 pt-0 h-full w-full', 'grow overflow-y-auto']
         },
         mask: ({ props, state }) => ({
             class: [
@@ -435,7 +435,7 @@ export default {
             class: ['flex items-center flex-wrap', 'p-4 border border-gray-300 dark:border-blue-900/40 rounded gap-2 mb-2', 'last:mb-0']
         },
         thumbnail: {
-            class: ['flex-shrink-0']
+            class: ['shrink-0']
         },
         fileName: {
             class: ['mb-2']
@@ -511,7 +511,7 @@ export default {
             class: ['w-6 h-6', 'text-lg mr-2']
         },
         text: {
-            class: ['text-base font-normal flex flex-col flex-1 flex-grow-1 flex-shrink-1 ml-4']
+            class: ['text-base font-normal flex flex-col flex-1 grow shrink ml-4']
         },
         summary: {
             class: ['font-bold block']
@@ -802,7 +802,7 @@ export default {
             class: ['block whitespace-nowrap overflow-hidden flex flex-1 w-1 text-overflow-ellipsis cursor-pointer', 'bg-transparent border-0 p-3 text-gray-700 dark:text-white/80', 'appearance-none rounded-md']
         },
         dropdownbutton: {
-            class: ['flex items-center justify-center flex-shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6']
+            class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6']
         },
         panel: {
             class: ['absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md']
@@ -1047,7 +1047,7 @@ export default {
             ]
         }),
         trigger: {
-            class: ['flex items-center justify-center flex-shrink-0', 'bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg']
+            class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg']
         },
         wrapper: {
             class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
@@ -1289,7 +1289,7 @@ export default {
             class: ['ml-2']
         },
         trigger: {
-            class: ['flex items-center justify-center flex-shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
+            class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
         },
         panel: {
             class: ['bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg']
@@ -1404,7 +1404,7 @@ export default {
             class: ['block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis', 'text-gray-800 dark:text-white/80', 'p-3 transition duration-200']
         }),
         trigger: {
-            class: ['flex items-center justify-center flex-shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
+            class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
         },
         panel: {
             class: ['bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg']
@@ -1681,7 +1681,7 @@ export default {
             class: ['text-yellow-400']
         },
         commandtext: {
-            class: ['flex-1 flex-shrink-1 flex-grow-0 border-0 bg-transparent text-inherit p-0 outline-none']
+            class: ['flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none']
         }
     },
 
@@ -2144,14 +2144,14 @@ export default {
             class: ['flex justify-center items-center h-full w-full']
         },
         thumbnailwrapper: {
-            class: ['flex flex-col overflow-auto flex-shrink-0']
+            class: ['flex flex-col overflow-auto shrink-0']
         },
         thumbnailcontainer: {
             class: ['flex flex-row', 'bg-black/90 p-4']
         },
         previousthumbnailbutton: {
             class: [
-                'self-center flex flex-shrink-0 justify-center items-center overflow-hidden relative',
+                'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
                 'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
                 'hover:bg-white/10 hover:text-white',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
@@ -2164,11 +2164,11 @@ export default {
             class: ['flex']
         },
         thumbnailitem: {
-            class: ['overflow-auto flex items-center justify-center cursor-pointer opacity-50', 'flex-1 flex-grow-0 flex-shrink-0 w-20', 'hover:opacity-100 hover:transition-opacity hover:duration-300']
+            class: ['overflow-auto flex items-center justify-center cursor-pointer opacity-50', 'flex-1 grow-0 shrink-0 w-20', 'hover:opacity-100 hover:transition-opacity hover:duration-300']
         },
         nextthumbnailbutton: {
             class: [
-                'self-center flex flex-shrink-0 justify-center items-center overflow-hidden relative',
+                'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
                 'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
                 'hover:bg-white/10 hover:text-white',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
@@ -2235,7 +2235,7 @@ export default {
             class: ['flex', { 'flex-row': props.orientation !== 'vertical', 'flex-col': props.orientation == 'vertical' }]
         }),
         previousbutton: ({ props, context }) => ({
-            class: ['flex justify-center items-center self-center overflow-hidden relative flex-shrink-0 flex-grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2']
+            class: ['flex justify-center items-center self-center overflow-hidden relative shrink-0 grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2']
         }),
         itemscontent: {
             class: ['overflow-hidden w-full']
@@ -2244,7 +2244,7 @@ export default {
             class: ['flex ', { 'flex-row': props.orientation !== 'vertical', 'flex-col h-full': props.orientation == 'vertical' }]
         }),
         item: ({ props, context }) => ({
-            class: ['flex flex-shrink-0 grow', { 'w-1/3': props.orientation !== 'vertical', 'w-full': props.orientation == 'vertical' }]
+            class: ['flex shrink-0 grow', { 'w-1/3': props.orientation !== 'vertical', 'w-full': props.orientation == 'vertical' }]
         }),
         indicators: {
             class: ['flex flex-row justify-center flex-wrap']
@@ -2283,7 +2283,7 @@ export default {
         }),
         toggler: ({ context }) => ({
             class: [
-                'cursor-pointer select-none inline-flex items-center justify-center overflow-hidden relative flex-shrink-0',
+                'cursor-pointer select-none inline-flex items-center justify-center overflow-hidden relative shrink-0',
                 'mr-2 w-8 h-8 border-0 bg-transparent rounded-full transition duration-200',
                 'hover:border-transparent focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 { 'text-gray-500 dark:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-800 dark:hover:text-white/80': !context.selected, 'text-blue-600 hover:bg-white/30': context.selected }
@@ -2329,7 +2329,7 @@ export default {
     timeline: {
         root: ({ props }) => ({
             class: [
-                'flex flex-grow',
+                'flex grow',
                 {
                     'flex-col': props.layout === 'vertical',
                     'flex-row flex-1': props.layout === 'horizontal'
@@ -2373,7 +2373,7 @@ export default {
         },
         connector: ({ props }) => ({
             class: [
-                'flex-grow bg-gray-300 dark:bg-blue-900/40',
+                'grow bg-gray-300 dark:bg-blue-900/40',
                 {
                     'w-[2px]': props.layout === 'vertical',
                     'w-full h-[2px]': props.layout === 'horizontal'
@@ -2393,7 +2393,7 @@ export default {
                 },
                 {
                     'min-h-0': props.layout === 'vertical' && context.index === context.count,
-                    'flex-grow-0': props.layout === 'horizontal' && context.index === context.count
+                    'grow-0': props.layout === 'horizontal' && context.index === context.count
                 }
             ]
         })

From 25d40dd4e448a5bd53ebe29aaf5e946437034823 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 1 Aug 2023 16:35:17 +0300
Subject: [PATCH 4/4] Refactor #4211 - For Carousel & Galleria

---
 components/lib/carousel/Carousel.vue     | 2 +-
 components/lib/galleria/GalleriaItem.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index a73c8e6cd..1c07aeef2 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -64,7 +64,7 @@
                         :aria-label="ariaPageLabel(i + 1)"
                         :aria-current="d_page === i ? 'page' : undefined"
                         @click="onIndicatorClick($event, i)"
-                        v-bind="ptm('indicatorButton')"
+                        v-bind="ptm('indicatorButton', getIndicatorPTOptions(i))"
                     />
                 </li>
             </ul>
diff --git a/components/lib/galleria/GalleriaItem.vue b/components/lib/galleria/GalleriaItem.vue
index 42db874f3..e23433cb7 100755
--- a/components/lib/galleria/GalleriaItem.vue
+++ b/components/lib/galleria/GalleriaItem.vue
@@ -29,7 +29,7 @@
                 v-bind="ptm('indicator', getIndicatorPTOptions(index))"
                 :data-p-highlight="isIndicatorItemActive(index)"
             >
-                <button v-if="!templates['indicator']" type="button" tabindex="-1" :class="cx('indicatorButton')" v-bind="ptm('indicatorButton')"></button>
+                <button v-if="!templates['indicator']" type="button" tabindex="-1" :class="cx('indicatorButton')" v-bind="ptm('indicatorButton', getIndicatorPTOptions(index))"></button>
                 <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
             </li>
         </ul>