---

app.vue

@@ -45,7 +45,9 @@
         title="Dropdown"
         :title="''"
         :pt="{
-          root: { class: 'w-[100px] h-10 text-left relative' },
+          root: {
+            class: 'relative cursor-pointer w-[100px] h-10 text-left relative',
+          },
           dropdown: {
             class: 'w-[150px] right-[-50px] absolute mt-4 block',
           },
@@ -78,22 +80,21 @@
       :direction="'horizontal'"
       :pt="{
         root: { class: '' },
-        slider: { class: '' },
+        slider: { class: 'bg-black text-white' },
         counter: { class: '' },
+        progress: { class: '' },
       }"
       class="my-[50px] relative z-30"
     >
       <template #default="{ item }">
         <div
-          class="bg-white/85 dark:bg-BgDark/85 backdrop-blur-md mx-auto my-4 rounded-3xl w-80 md:w-[800px] shadow-custom-lrb text-black dark:text-white"
+          class="bg-white/85 backdrop-blur-md mx-auto my-4 rounded-3xl w-80 md:w-[800px] shadow-custom-lrb text-black"
         >
           <div class="flex justify-between items-center px-8 py-2 border-b-2">
             <p class="font-semibold text-[12px] uppercase tracking-widest">
               {{ item.title }}
             </p>
-            <div
+            <div class="bg-black rounded-lg w-5 h-0.5 cursor-pointer"></div>
-              class="bg-BgDark dark:bg-BgLight rounded-lg w-5 h-0.5 cursor-pointer"
-            ></div>
           </div>
           <div
             class="flex md:flex-row-reverse flex-col gap-8 py-12 md:py-8 md:w-[800px]"

src/components/Ml/DropDown/MlDropDown.vue

@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<DropDownProps>(), {
 
 const PT = {
   root: {
-    class: "relative pointer",
+    class: "",
   },
   dropdown: {
     class:

src/components/Ml/Slider/MlSlider.vue

@@ -27,36 +27,6 @@
         <slot :item="item" />
       </swiper-slide>
     </swiper>
-    <div>
-      <div :class="counterClasses">
-        <div
-          class="bg-BgDark dark:bg-BgLight mt-4 h-1 transition-all duration-500"
-          :style="`width: ${progerssBar}%`"
-        ></div>
-        <div class="flex justify-between my-4">
-          <button
-            :disabled="isPrevDisabled"
-            class="px-4 py-2 disabled:text-gray-400 cursor-pointer"
-            @click="
-              useRipple($event, true);
-              goPrev();
-            "
-          >
-            <ArrowLeftIcon class="size-5" />
-          </button>
-          <button
-            :disabled="isNextDisabled"
-            class="px-4 py-2 disabled:text-gray-400 cursor-pointer"
-            @click="
-              useRipple($event, true);
-              goNext();
-            "
-          >
-            <ArrowRightIcon class="size-5" />
-          </button>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -123,7 +93,10 @@ const classes = ref({
   counter: {
     class: `max-w-[1200px] mx-auto px-6 container`,
   },
-} as PTAttribs);
+  progress: {
+    class: "",
+  },
+} as unknown as PTAttribs);
 
 const rootClasses = computed(() =>
   twMerge(classes.value.root?.class, props.pt?.root?.class)
@@ -134,6 +107,9 @@ const sliderClasses = computed(() =>
 const counterClasses = computed(() =>
   twMerge(classes.value.counter?.class, props.pt?.counter?.class)
 );
+const progressClass = computed(() =>
+  twMerge(classes.value.progress?.class, props.pt?.progress?.class)
+);
 
 const items = props.items;
 </script>

src/components/Ml/Slider/types.ts

@@ -1,5 +1,5 @@
 export type SliderProps = {
-    direction: 'horizontal' | 'vertical';
+  direction: "horizontal" | "vertical";
   pt?: PTAttribs;
   items: Array<[{ title: string; info: string }]>;
 };
@@ -17,6 +17,9 @@ export type PTAttribs = {
   direction?: {
     direction: string;
   };
+  progress?: {
+    direction: string;
+  };
 };
 
-export type spinerPlace = 'suffix' | 'prefix';
+export type spinerPlace = "suffix" | "prefix";