pxd 0.0.60 → 0.0.62

package/dist/components/button/index.vue

@@ -1,32 +1,34 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
+import { BASIC_HEIGHTS } from "../../constants/size";
+import { useButtonGroupContext } from "../../contexts/button";
 import { useConfigProvider } from "../../contexts/config-provider";
 import { isTruthyProp } from "../../utils/format";
 import PSpinner from "../spinner/index.vue";
-import { tv } from "tailwind-variants";
 defineOptions({
   name: "PButton",
   inheritAttrs: false
 });
 const props = defineProps({
   as: { type: [String, Object], required: false, default: "button" },
-  variant: { type: String, required: false, default: "default" },
+  variant: { type: String, required: false },
   size: { type: String, required: false },
   shape: { type: String, required: false },
-  align: { type: String, required: false, default: "center" },
+  align: { type: String, required: false },
   icon: { type: Boolean, required: false, default: false },
   loading: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   fullWidth: { type: Boolean, required: false }
 });
 const buttonVariants = tv({
-  base: "pxd-button inline-flex shrink-0 cursor-pointer touch-manipulation items-center font-inherit select-none motion-safe:transition-all",
+  base: "pxd-button inline-flex shrink-0 cursor-pointer touch-manipulation items-center font-inherit select-none motion-safe:transition-appearance [[data-button-group]>&]:-ml-px [[data-button-group]>&]:not-first:rounded-l-none [[data-button-group]>&]:not-last:rounded-r-none [[data-button-group]>&]:enabled:hover:z-1",
   variants: {
     size: {
-      xs: "h-6 px-1 text-sm rounded-sm",
-      sm: "h-7.5 px-1.5 text-sm rounded-md",
-      md: "h-9 px-2.5 text-sm rounded-md",
-      lg: "h-10 px-3.5 text-base rounded-lg"
+      xs: `${BASIC_HEIGHTS.xs} px-1 text-xs rounded-sm`,
+      sm: `${BASIC_HEIGHTS.sm} px-1.5 text-sm rounded-md`,
+      md: `${BASIC_HEIGHTS.md} px-2.5 text-sm rounded-md`,
+      lg: `${BASIC_HEIGHTS.lg} px-3.5 text-base rounded-lg`
     },
     shape: {
       square: "rounded-none",
@@ -40,9 +42,8 @@ const buttonVariants = tv({
     },
     variant: {
       simple: "",
-      icon: "p-0! aspect-square",
       link: "font-medium hover:underline hover:opacity-70 active:opacity-90 motion-safe:transition-opacity",
-      default: "border-input bg-background-100 text-foreground hover:bg-background-hover active:bg-background-active",
+      default: "bg-background-100 text-foreground hover:bg-background-hover active:bg-background-active",
       ghost: "border-transparent bg-transparent text-foreground hover:bg-background-hover active:bg-background-active",
       primary: "border-transparent bg-primary text-gray-100 hover:bg-primary-hover active:bg-primary-active",
       error: "text-white border-transparent bg-red-800 hover:bg-red-700 active:bg-red-900",
@@ -56,7 +57,8 @@ const buttonVariants = tv({
       true: "w-full"
     },
     icon: {
-      true: "p-0! aspect-square"
+      true: "p-0 aspect-square",
+      false: "[[data-button-group]>&]:flex-1"
     },
     loading: {
       true: ""
@@ -66,25 +68,23 @@ const buttonVariants = tv({
     {
       variant: ["default", "ghost", "primary", "error", "warning", "success"],
       class: "border self-focus-ring outline-none"
-    },
-    {
-      icon: true,
-      class: "p-0! aspect-square"
     }
   ]
 });
 const configProvider = useConfigProvider();
+const buttonGroupContext = useButtonGroupContext();
 const isDisabled = computed(
-  () => isTruthyProp(props.disabled) || isTruthyProp(props.loading)
+  () => isTruthyProp(props.disabled) || isTruthyProp(props.loading) || buttonGroupContext?.props.disabled || false
 );
 const computedClasses = computed(() => {
-  const { size = configProvider.size, shape, align, variant, fullWidth, icon } = props;
+  const { size, shape, align, variant, fullWidth, icon } = props;
+  const internalAlign = icon ? "center" : align;
   return buttonVariants({
     icon,
-    size,
-    shape,
-    align,
-    variant,
+    size: size || buttonGroupContext?.props.size || configProvider.size,
+    shape: buttonGroupContext ? "default" : shape,
+    align: internalAlign || buttonGroupContext?.props.align || "center",
+    variant: variant || buttonGroupContext?.props.variant || "default",
     fullWidth,
     disabled: isDisabled.value
   });
@@ -92,7 +92,16 @@ const computedClasses = computed(() => {
 </script>
 
 <template>
-  <Component :is="as" role="button" :class="computedClasses" :disabled="isDisabled" v-bind="$attrs">
+  <Component
+    :is="as"
+    tabindex="0"
+    aria-label="Action"
+    :aria-busy="loading"
+    :aria-disabled="isDisabled"
+    :class="computedClasses"
+    :disabled="isDisabled"
+    v-bind="$attrs"
+  >
     <PSpinner v-if="loading" />
 
     <slot name="prefix" />

package/dist/components/button/types.d.ts

@@ -1,18 +1,19 @@
 import type {
   ComponentAs,
+  ComponentAlign,
   ComponentShape,
   ComponentSizeWithXs,
   ComponentVariantWithDefault,
 } from '../../types/shared'
 
-export type ButtonVariant = ComponentVariantWithDefault | 'ghost' | 'simple' | 'icon' | 'link'
+export type ButtonVariant = ComponentVariantWithDefault | 'ghost' | 'simple' | 'link'
 
 export interface ButtonProps {
   as?: ComponentAs
   variant?: ButtonVariant
   size?: ComponentSizeWithXs
   shape?: ComponentShape
-  align?: 'left' | 'center' | 'right'
+  align?: ComponentAlign
   icon?: boolean
   loading?: boolean
   disabled?: boolean

package/dist/components/button-group/index.d.vue.ts

@@ -0,0 +1,14 @@
+import type { ButtonGroupProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/button-group/index.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { provideButtonGroupContext } from "../../contexts/button";
+defineOptions({
+  name: "PButtonGroup",
+  inheritAttrs: false
+});
+const props = defineProps({
+  size: { type: String, required: false },
+  align: { type: String, required: false },
+  variant: { type: String, required: false },
+  disabled: { type: Boolean, required: false }
+});
+provideButtonGroupContext({ props });
+</script>
+
+<template>
+  <div
+    role="group"
+    aria-label="Actions"
+    data-button-group
+    class="pxd-button-group flex max-w-full"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/dist/components/button-group/types.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentSizeWithXs, ComponentAlign } from '../../types/shared'
+import type { ButtonVariant } from '../button/types'
+
+export interface ButtonGroupProps {
+  size?: ComponentSizeWithXs
+  align?: ComponentAlign
+  variant?: ButtonVariant
+  disabled?: boolean
+}

package/dist/components/carousel/index.d.vue.ts

@@ -13,16 +13,16 @@ declare const __VLS_base: import("vue").DefineComponent<CarouselProps, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<CarouselProps> & Readonly<{
     onChange?: ((index: number) => any) | undefined;
 }>, {
-    index: number;
+    direction: import("../../types/shared").ComponentDirection;
     height: number | string;
+    index: number;
     loop: boolean;
     arrow: boolean;
     autoplay: boolean;
     interval: number;
     indicator: boolean;
-    direction: import("../../types/shared").ComponentDirection;
     indicatorType: "dot" | "line";
-    indicatorPosition: import("../../types/shared").BasePosition;
+    indicatorPosition: import("../../types/shared").BasePosition | "center";
     pauseOnHover: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/carousel/index.vue

@@ -1,7 +1,9 @@
 <script setup>
 import ChevronRightIcon from "@gdsicon/vue/chevron-right";
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { useSwipeGesture } from "../../composables/use-swipe-gesture";
 import { provideCarouselContext } from "../../contexts/carousel";
+import { awaitAnimationEnd } from "../../utils/dom";
 import { getCssUnitValue } from "../../utils/format";
 defineOptions({
   name: "PCarousel",
@@ -16,67 +18,100 @@ const props = defineProps({
   interval: { type: Number, required: false, default: 3e3 },
   indicator: { type: Boolean, required: false, default: true },
   direction: { type: String, required: false, default: "horizontal" },
-  indicatorType: { type: String, required: false, default: "line" },
-  indicatorPosition: { type: String, required: false, default: "bottom" },
+  indicatorType: { type: String, required: false, default: "dot" },
+  indicatorPosition: { type: String, required: false, default: "center" },
   pauseOnHover: { type: Boolean, required: false, default: true },
   toggleOnWheel: { type: Boolean, required: false }
 });
 const emits = defineEmits(["change"]);
-const TRANSITION_CLASSES = ["transition-transform", "duration-[calc(var(--duration,200ms)+100ms)]"];
-let autoPlayRafId = null;
-let autoPlaySession = 0;
+let isToggling = false;
+let pendingDelta = null;
+let autoPlayTimerId = null;
 let isPointerEntering = false;
-let toggleQueue = Promise.resolve();
+let maxDrag = 0;
 const carousels = ref([]);
 const sliderRef = shallowRef();
 const virtualIndex = shallowRef(props.index);
-const correctIndex = computed(() => {
-  const index = virtualIndex.value;
-  if (index >= carousels.value.length) {
+const gestureMoveOffset = shallowRef(0);
+const displayIndex = computed(() => {
+  const length = carousels.value.length;
+  if (length === 0) {
     return 0;
   }
-  if (index <= -1) {
-    return carousels.value.length - 1;
-  }
-  return index;
+  return (virtualIndex.value % length + length) % length;
 });
+const isAtFirst = computed(() => displayIndex.value === 0);
+const isAtLast = computed(() => displayIndex.value === carousels.value.length - 1);
+const isHorizontal = computed(() => props.direction === "horizontal");
 const computedStyle = computed(() => {
-  const translateValue = virtualIndex.value * -100;
-  const styles = {
-    transform: props.direction === "horizontal" ? `translateX(${translateValue}%)` : `translateY(${translateValue}%)`
+  const translateValue = `calc(${virtualIndex.value * -100}% + ${gestureMoveOffset.value}px)`;
+  return {
+    transform: `translate${isHorizontal.value ? "X" : "Y"}(${translateValue})`
   };
-  return styles;
 });
-function translateItems() {
-  carousels.value.forEach((carousel, index) => {
-    carousel.translateItem(index, virtualIndex.value);
-  });
-}
-async function awaitAnimationEnd() {
-  const animations = sliderRef.value?.getAnimations() ?? [];
-  await Promise.allSettled(animations.map((a) => a.finished));
-}
+useSwipeGesture(sliderRef, {
+  direction: () => props.direction,
+  onPress: ({ size }) => {
+    maxDrag = size;
+    gestureMoveOffset.value = 0;
+    onPointerEnter();
+  },
+  onFollow: (ev) => {
+    if (!props.loop && (isAtFirst.value && ev.delta > 0 || isAtLast.value && ev.delta < 0)) {
+      return;
+    }
+    gestureMoveOffset.value = Math.max(-maxDrag, Math.min(maxDrag, ev.displacement));
+  },
+  onRelease: ({ swiped, direction }) => {
+    gestureMoveOffset.value = 0;
+    onPointerLeave();
+    if (!swiped || !direction) {
+      return;
+    }
+    if (isHorizontal.value) {
+      performToggle(direction === "left" ? 1 : -1);
+    } else {
+      performToggle(direction === "top" ? 1 : -1);
+    }
+  }
+});
 async function performToggle(delta) {
   const length = carousels.value.length;
   if (length === 0) {
     return;
   }
-  await awaitAnimationEnd();
+  await awaitAnimationEnd(sliderRef.value);
   if (props.loop) {
     virtualIndex.value += delta;
-    translateItems();
+    await nextTick();
+    await awaitAnimationEnd(sliderRef.value);
+    if (virtualIndex.value >= length) {
+      await resetSliderPosition(0);
+    } else if (virtualIndex.value <= -1) {
+      await resetSliderPosition(length - 1);
+    }
   } else {
     virtualIndex.value = Math.max(0, Math.min(virtualIndex.value + delta, length - 1));
   }
-  emits("change", correctIndex.value);
-  nextTick(onPointerLeave);
+  emits("change", virtualIndex.value);
+  restartAutoPlay();
 }
-function onToggleClick(delta) {
-  toggleQueue = toggleQueue.catch(() => {
-  }).then(async () => {
+async function onToggleClick(delta) {
+  if (isToggling) {
+    pendingDelta = delta;
+    return;
+  }
+  isToggling = true;
+  try {
     await performToggle(delta);
-  });
-  return toggleQueue;
+    while (pendingDelta != null) {
+      const next = pendingDelta;
+      pendingDelta = null;
+      await performToggle(next);
+    }
+  } finally {
+    isToggling = false;
+  }
 }
 function onWheelToggle(ev) {
   if (!props.toggleOnWheel) {
@@ -87,11 +122,9 @@ function onWheelToggle(ev) {
     return;
   }
   const delta = ev.deltaY > 0 ? 1 : -1;
-  const indexBefore = virtualIndex.value;
-  const lastIndex = length - 1;
   if (!props.loop) {
-    const isAtFirstAndGoPrev = indexBefore <= 0 && delta < 0;
-    const isAtLastAndGoNext = indexBefore >= lastIndex && delta > 0;
+    const isAtFirstAndGoPrev = isAtFirst.value && delta < 0;
+    const isAtLastAndGoNext = isAtLast.value && delta > 0;
     if (isAtFirstAndGoPrev || isAtLastAndGoNext) {
       return;
     }
@@ -101,51 +134,31 @@ function onWheelToggle(ev) {
   }
   onToggleClick(delta);
 }
-function resetContainerPosition(resetIndex) {
-  const containerClassList = sliderRef.value.classList;
-  containerClassList.remove(...TRANSITION_CLASSES);
-  virtualIndex.value = resetIndex;
-  translateItems();
-  setTimeout(() => {
-    containerClassList.add(...TRANSITION_CLASSES);
-  }, 0);
-}
-function onTransitionsEnd(ev) {
-  if (ev.propertyName !== "transform" || ev.target !== sliderRef.value) {
+async function resetSliderPosition(resetIndex) {
+  const el = sliderRef.value;
+  if (!el) {
     return;
   }
-  if (!props.loop) {
-    return;
-  }
-  if (virtualIndex.value >= carousels.value.length) {
-    resetContainerPosition(0);
-  } else if (virtualIndex.value <= -1) {
-    resetContainerPosition(carousels.value.length - 1);
-  }
+  el.style.transition = "none";
+  virtualIndex.value = resetIndex;
+  await nextTick();
+  void el.offsetHeight;
+  el.style.transition = "";
 }
 function clearAutoPlayTimer() {
-  autoPlaySession++;
-  if (autoPlayRafId != null) {
-    cancelAnimationFrame(autoPlayRafId);
-    autoPlayRafId = null;
+  if (autoPlayTimerId != null) {
+    clearTimeout(autoPlayTimerId);
+    autoPlayTimerId = null;
   }
 }
-function setAutoPlayTimer() {
-  const mySession = autoPlaySession;
-  const startTime = performance.now();
-  const onAnimationFrame = () => {
-    if (mySession !== autoPlaySession || isPointerEntering) {
-      return;
-    }
-    const currentTime = performance.now();
-    const elapsedTime = currentTime - startTime;
-    if (elapsedTime >= props.interval) {
-      onToggleClick(1);
-      return;
-    }
-    autoPlayRafId = requestAnimationFrame(onAnimationFrame);
-  };
-  autoPlayRafId = requestAnimationFrame(onAnimationFrame);
+function restartAutoPlay() {
+  clearAutoPlayTimer();
+  if (!props.autoplay || isPointerEntering) {
+    return;
+  }
+  autoPlayTimerId = setTimeout(() => {
+    onToggleClick(1);
+  }, props.interval);
 }
 function onPointerEnter() {
   if (props.pauseOnHover) {
@@ -155,41 +168,43 @@ function onPointerEnter() {
 }
 function onPointerLeave() {
   isPointerEntering = false;
-  if (!props.autoplay) {
-    return;
-  }
-  clearAutoPlayTimer();
-  setAutoPlayTimer();
+  restartAutoPlay();
 }
 function onIndicatorClick(ev) {
-  clearAutoPlayTimer();
   const targetEl = ev.target.closest("[data-index]");
   const targetIndex = Number(targetEl?.dataset.index);
   if (Number.isNaN(targetIndex)) {
     return;
   }
-  const deltaIndex = targetIndex - virtualIndex.value;
+  const deltaIndex = targetIndex - displayIndex.value;
   if (deltaIndex !== 0) {
+    clearAutoPlayTimer();
     onToggleClick(deltaIndex);
   }
-  nextTick(onPointerLeave);
+}
+function updateItemIndex() {
+  carousels.value.forEach((carousel, i) => {
+    carousel.updateItemIndex(i);
+  });
 }
 function registerCarousel(state) {
   carousels.value.push(state);
+  updateItemIndex();
 }
 function unregisterCarousel(id) {
   carousels.value = carousels.value.filter(({ uid }) => uid !== id);
+  updateItemIndex();
 }
 provideCarouselContext({
   props,
   carousels,
+  virtualIndex,
   registerCarousel,
   unregisterCarousel
 });
 onMounted(async () => {
-  onPointerLeave();
   await nextTick();
-  translateItems();
+  restartAutoPlay();
 });
 onBeforeUnmount(() => {
   clearAutoPlayTimer();
@@ -200,7 +215,7 @@ onBeforeUnmount(() => {
 <template>
   <div
     v-bind="$attrs"
-    :data-direction="direction"
+    :data-orientation="direction"
     :data-indicator-type="indicatorType"
     :data-indicator-position="indicatorPosition"
     class="pxd-carousel group relative w-full touch-none overflow-hidden"
@@ -209,13 +224,11 @@ onBeforeUnmount(() => {
     @pointerleave="onPointerLeave"
     @wheel="onWheelToggle"
   >
-    <div class="pxd-carousel--container size-full">
+    <div class="pxd-carousel--container size-full overflow-clip">
       <div
         ref="sliderRef"
-        class="pxd-carousel--slider translate-z-0 size-full"
+        class="pxd-carousel--slider translate-z-0 size-full active:transition-none motion-safe:transition-transform"
         :style="computedStyle"
-        :class="TRANSITION_CLASSES"
-        @transitionend="onTransitionsEnd"
       >
         <slot />
       </div>
@@ -223,37 +236,39 @@ onBeforeUnmount(() => {
 
     <div
       v-if="indicator"
-      class="pxd-carousel--indicator gap-2 absolute flex w-max items-center"
+      class="pxd-carousel--indicator gap-2 absolute z-1 flex w-max items-center"
       @click="onIndicatorClick"
     >
-      <slot name="indicator" :current="correctIndex + 1" :total="carousels.length">
+      <slot name="indicator" :current="displayIndex" :total="carousels.length">
         <button
           v-for="(_, i) in carousels.length"
           :key="i"
           :data-index="i"
           class="pxd-carousel--indicator-item relative h-(--carousel-dot-height) w-(--carousel-dot-width) cursor-pointer appearance-none rounded-full bg-gray-alpha-200 font-inherit self-focus-ring outline-none hover:bg-gray-alpha-400 motion-safe:transition-colors"
-          :class="{ 'bg-primary!': i === correctIndex }"
+          :class="{ 'bg-primary!': i === displayIndex }"
         />
       </slot>
     </div>
 
-    <div v-if="arrow" class="pxd-carousel--toggler gap-2 absolute flex">
+    <div v-if="arrow" class="pxd-carousel--toggler gap-2 pointer-events-none absolute z-1 flex">
       <button
         type="button"
         aria-label="Carousel arrow left"
-        class="pxd-carousel--prev-btn p-1.5 cursor-pointer appearance-none rounded-md bg-gray-alpha-100 font-inherit text-foreground-secondary self-focus-ring outline-none hover:bg-background-hover active:bg-background-active disabled:pointer-events-none motion-safe:transition-colors"
+        :disabled="!loop && isAtFirst"
+        class="pxd-carousel--prev-btn p-1.5 pointer-events-auto cursor-pointer appearance-none rounded-md bg-gray-alpha-100 font-inherit text-foreground-secondary self-focus-ring outline-none enabled:hover:bg-background-hover enabled:active:bg-background-active disabled:cursor-not-allowed disabled:opacity-50 motion-safe:transition-colors"
         @click="onToggleClick(-1)"
       >
-        <ChevronRightIcon class="rotate-180" />
+        <ChevronRightIcon class="pointer-events-none rotate-180" />
       </button>
 
       <button
         type="button"
         aria-label="Carousel arrow right"
-        class="pxd-carousel--next-btn p-1.5 cursor-pointer appearance-none rounded-md bg-gray-alpha-100 font-inherit text-foreground-secondary self-focus-ring outline-none hover:bg-background-hover active:bg-background-active disabled:pointer-events-none motion-safe:transition-colors"
+        :disabled="!loop && isAtLast"
+        class="pxd-carousel--next-btn p-1.5 pointer-events-auto cursor-pointer appearance-none rounded-md bg-gray-alpha-100 font-inherit text-foreground-secondary self-focus-ring outline-none enabled:hover:bg-background-hover enabled:active:bg-background-active disabled:cursor-not-allowed disabled:opacity-50 motion-safe:transition-colors"
         @click="onToggleClick(1)"
       >
-        <ChevronRightIcon />
+        <ChevronRightIcon class="pointer-events-none" />
       </button>
     </div>
   </div>
@@ -268,7 +283,8 @@ onBeforeUnmount(() => {
 
   &[data-indicator-type='line'] {
     &[data-indicator-position='top'],
-    &[data-indicator-position='bottom'] {
+    &[data-indicator-position='bottom'],
+    &[data-indicator-position='center'] {
       --carousel-dot-width: 1rem;
       --carousel-dot-height: 0.25rem;
     }
@@ -282,7 +298,7 @@ onBeforeUnmount(() => {
 
   &[data-indicator-position='top'] {
     .pxd-carousel--indicator {
-      left: 12px;
+      left: 0.75rem;
       top: 0.5rem;
     }
 
@@ -294,7 +310,7 @@ onBeforeUnmount(() => {
 
   &[data-indicator-position='bottom'] {
     .pxd-carousel--indicator {
-      left: 12px;
+      left: 0.75rem;
       bottom: 0.5rem;
     }
 
@@ -307,7 +323,7 @@ onBeforeUnmount(() => {
   &[data-indicator-position='left'] {
     .pxd-carousel--indicator {
       left: 0.5rem;
-      top: 12px;
+      top: 0.75rem;
     }
 
     .pxd-carousel--toggler {
@@ -319,7 +335,7 @@ onBeforeUnmount(() => {
   &[data-indicator-position='right'] {
     .pxd-carousel--indicator {
       right: 0.5rem;
-      top: 12px;
+      top: 0.75rem;
     }
 
     .pxd-carousel--toggler {
@@ -328,14 +344,20 @@ onBeforeUnmount(() => {
     }
   }
 
-  &[data-direction='horizontal'] .pxd-carousel--slider {
-    display: flex;
-  }
+  &[data-indicator-position='center'] {
+    .pxd-carousel--indicator {
+      left: 50%;
+      bottom: 0.5rem;
+      transform: translateX(-50%);
+    }
 
-  &[data-direction='vertical'] {
-    .pxd-carousel--prev-btn,
-    .pxd-carousel--next-btn {
-      transform: rotate(90deg);
+    .pxd-carousel--toggler {
+      left: 0;
+      top: 50%;
+      width: 100%;
+      padding-inline: 1rem;
+      justify-content: space-between;
+      transform: translateY(-50%);
     }
   }
 
@@ -346,6 +368,17 @@ onBeforeUnmount(() => {
       flex-direction: column;
     }
   }
+
+  &[data-orientation='horizontal'] .pxd-carousel--slider {
+    display: flex;
+  }
+
+  &[data-orientation='vertical'] {
+    .pxd-carousel--prev-btn,
+    .pxd-carousel--next-btn {
+      transform: rotate(90deg);
+    }
+  }
 }
 
 .pxd-carousel--indicator-item::before {

package/dist/components/carousel/types.d.ts

@@ -10,7 +10,7 @@ export interface CarouselProps {
   indicator?: boolean
   direction?: ComponentDirection
   indicatorType?: 'dot' | 'line'
-  indicatorPosition?: BasePosition
+  indicatorPosition?: BasePosition | 'center'
   pauseOnHover?: boolean
   toggleOnWheel?: boolean
 }