Defect fixes for QA

apps/showcase/doc/confirmdialog/TemplateDoc.vue

@@ -5,7 +5,7 @@
     <ConfirmDialog group="templating">
         <template #message="slotProps">
             <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
-                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
+                <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
@@ -25,7 +25,7 @@ export default {
 <ConfirmDialog group="templating">
     <template #message="slotProps">
         <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
-            <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
+            <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
             <p>{{ slotProps.message.message }}</p>
         </div>
     </template>
@@ -37,7 +37,7 @@ export default {
     <ConfirmDialog group="templating">
         <template #message="slotProps">
             <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
-                <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+                <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
@@ -85,7 +85,7 @@ export default {
     <ConfirmDialog group="templating">
         <template #message="slotProps">
             <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
-                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
+                <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>

apps/showcase/layouts/AppConfigurator.vue

@@ -31,7 +31,7 @@
             </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Presets</span>
-                <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presets" :unselectable="false" />
+                <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presets" :allowEmpty="false" />
             </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Ripple</span>

packages/primevue/src/carousel/style/CarouselStyle.js

@@ -15,6 +15,7 @@ const theme = ({ dt }) => `
 .p-carousel-content {
     display: flex;
     flex-direction: row;
+    gap: ${dt('carousel.content.gap')};
 }
 
 .p-carousel-viewport {

packages/themes/src/presets/aura/carousel/index.js

@@ -1,23 +1,26 @@
 export default {
     root: {
-        indicatorList: {
-            padding: '1rem',
-            gap: '0.5rem'
-        },
-        indicator: {
-            width: '2rem',
-            height: '0.5rem',
-            borderRadius: '{content.border.radius}',
-            focusRing: {
-                width: '{focus.ring.width}',
-                style: '{focus.ring.style}',
-                color: '{focus.ring.color}',
-                offset: '{focus.ring.offset}',
-                shadow: '{focus.ring.shadow}'
-            }
-        },
         transitionDuration: '{transition.duration}'
     },
+    content: {
+        gap: '0.25rem'
+    },
+    indicatorList: {
+        padding: '1rem',
+        gap: '0.5rem'
+    },
+    indicator: {
+        width: '2rem',
+        height: '0.5rem',
+        borderRadius: '{content.border.radius}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
     colorScheme: {
         light: {
             indicator: {

packages/themes/src/presets/lara/carousel/index.js

@@ -1,23 +1,26 @@
 export default {
     root: {
-        indicatorList: {
-            padding: '1rem',
-            gap: '0.5rem'
-        },
-        indicator: {
-            width: '1rem',
-            height: '1rem',
-            borderRadius: '50',
-            focusRing: {
-                width: '{focus.ring.width}',
-                style: '{focus.ring.style}',
-                color: '{focus.ring.color}',
-                offset: '{focus.ring.offset}',
-                shadow: '{focus.ring.shadow}'
-            }
-        },
         transitionDuration: '{transition.duration}'
     },
+    content: {
+        gap: '0.25rem'
+    },
+    indicatorList: {
+        padding: '1rem',
+        gap: '0.5rem'
+    },
+    indicator: {
+        width: '1rem',
+        height: '1rem',
+        borderRadius: '50',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
     colorScheme: {
         light: {
             indicator: {

packages/themes/src/presets/nora/carousel/index.js

@@ -1,23 +1,26 @@
 export default {
     root: {
-        indicatorList: {
-            padding: '1rem',
-            gap: '0.5rem'
-        },
-        indicator: {
-            width: '2rem',
-            height: '0.5rem',
-            borderRadius: '{content.border.radius}',
-            focusRing: {
-                width: '{focus.ring.width}',
-                style: '{focus.ring.style}',
-                color: '{focus.ring.color}',
-                offset: '{focus.ring.offset}',
-                shadow: '{focus.ring.shadow}'
-            }
-        },
         transitionDuration: '{transition.duration}'
     },
+    content: {
+        gap: '0.25rem'
+    },
+    indicatorList: {
+        padding: '1rem',
+        gap: '0.5rem'
+    },
+    indicator: {
+        width: '2rem',
+        height: '0.5rem',
+        borderRadius: '{content.border.radius}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
     colorScheme: {
         light: {
             indicator: {

packages/themes/types/carousel/index.d.ts

@@ -15,81 +15,6 @@ export interface CarouselDesignTokens extends ColorSchemeDesignToken<CarouselDes
      * Used to pass tokens of the root section
      */
     root?: {
-        /**
-         * Indicator list of root
-         */
-        indicatorList?: {
-            /**
-             * Indicator list padding of root
-             *
-             * @designToken carousel.indicator.list.padding
-             */
-            padding?: string;
-            /**
-             * Indicator list gap of root
-             *
-             * @designToken carousel.indicator.list.gap
-             */
-            gap?: string;
-        };
-        /**
-         * Indicator of root
-         */
-        indicator?: {
-            /**
-             * Indicator width of root
-             *
-             * @designToken carousel.indicator.width
-             */
-            width?: string;
-            /**
-             * Indicator height of root
-             *
-             * @designToken carousel.indicator.height
-             */
-            height?: string;
-            /**
-             * Indicator border radius of root
-             *
-             * @designToken carousel.indicator.border.radius
-             */
-            borderRadius?: string;
-            /**
-             * Indicator focus ring of root
-             */
-            focusRing?: {
-                /**
-                 * Indicator focus ring width of root
-                 *
-                 * @designToken carousel.indicator.focus.ring.width
-                 */
-                width?: string;
-                /**
-                 * Indicator focus ring style of root
-                 *
-                 * @designToken carousel.indicator.focus.ring.style
-                 */
-                style?: string;
-                /**
-                 * Indicator focus ring color of root
-                 *
-                 * @designToken carousel.indicator.focus.ring.color
-                 */
-                color?: string;
-                /**
-                 * Indicator focus ring offset of root
-                 *
-                 * @designToken carousel.indicator.focus.ring.offset
-                 */
-                offset?: string;
-                /**
-                 * Indicator focus ring shadow of root
-                 *
-                 * @designToken carousel.indicator.focus.ring.shadow
-                 */
-                shadow?: string;
-            };
-        };
         /**
          * Transition duration of root
          *
@@ -98,9 +23,55 @@ export interface CarouselDesignTokens extends ColorSchemeDesignToken<CarouselDes
         transitionDuration?: string;
     };
     /**
-     * Used to pass tokens of the indicator section
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Gap of the content
+         *
+         * @designToken carousel.content.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Indicator list of root
+     */
+    indicatorList?: {
+        /**
+         * Indicator list padding of root
+         *
+         * @designToken carousel.indicator.list.padding
+         */
+        padding?: string;
+        /**
+         * Indicator list gap of root
+         *
+         * @designToken carousel.indicator.list.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Indicator of root
      */
     indicator?: {
+        /**
+         * Indicator width of root
+         *
+         * @designToken carousel.indicator.width
+         */
+        width?: string;
+        /**
+         * Indicator height of root
+         *
+         * @designToken carousel.indicator.height
+         */
+        height?: string;
+        /**
+         * Indicator border radius of root
+         *
+         * @designToken carousel.indicator.border.radius
+         */
+        borderRadius?: string;
         /**
          * Background of indicator
          *
@@ -119,5 +90,40 @@ export interface CarouselDesignTokens extends ColorSchemeDesignToken<CarouselDes
          * @designToken carousel.indicator.active.background
          */
         activeBackground?: string;
+        /**
+         * Indicator focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Indicator focus ring width of root
+             *
+             * @designToken carousel.indicator.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Indicator focus ring style of root
+             *
+             * @designToken carousel.indicator.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Indicator focus ring color of root
+             *
+             * @designToken carousel.indicator.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Indicator focus ring offset of root
+             *
+             * @designToken carousel.indicator.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Indicator focus ring shadow of root
+             *
+             * @designToken carousel.indicator.focus.ring.shadow
+             */
+            shadow?: string;
+        };
     };
 }