pxd 0.0.21 → 0.0.22

package/README.md

@@ -1,10 +1,19 @@
 # PXD
-A universal UI component library for Vue2&3
+Realizing (slightly adjusting) the general component library of Vue2&3 based on Geist Design System.
+
+- [Geist Design System](https://vercel.com/geist/introduction)
+- [Figma(Community)](https://www.figma.com/design/1234567890/PXD-UI?node-id=0-1&t=1234567890-0)
+
+[Online Preview](https://pxd-ui.netlify.app/)
 
 > [!WARNING]
 > The project is under active development and is not ready for production.
 
-[Online Preview](https://pxd-ui.netlify.app/)
+## Features
+
+- Vue 3 Composition API
+- 100% compatible with Vue2&3
+- Complete tree-shaking support
 
 ## Contribution
 

package/dist/components/avatar/index.vue

@@ -113,12 +113,6 @@ defineExpose({
   }
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .pxd-avatar--loading::after {
-    animation: var(--animate-spin);
-  }
-}
-
 @keyframes placeholder {
   0% {
     background-position: 200% 0;
@@ -133,5 +127,9 @@ defineExpose({
   .pxd-avatar::before {
     animation: placeholder 8s ease-in-out infinite;
   }
+
+  .pxd-avatar--loading::after {
+    animation: var(--animate-spin);
+  }
 }
 </style>

package/dist/components/badge/index.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
-import { getFallbackVariant, useComputedSize } from "../../composables/useFallbackProps";
+import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
+import { getFallbackValue } from "../../utils/value";
 defineOptions({
   name: "PBadge"
 });
@@ -39,11 +40,11 @@ const VARIANTS = {
   "trial": "text-gray-100 dark:text-gray-1000",
   "turborepo": "text-gray-100 dark:text-gray-1000"
 };
-const computedSize = useComputedSize(props.size, SIZES);
+const computedSize = useConfigProviderSize(props.size, SIZES);
 const computedClass = computed(
   () => twMerge(
     "pxd-badge inline-flex items-center justify-center px-2.5 font-medium h-6 text-xs rounded-full font-sans gap-1 !no-underline motion-safe:transition-all",
-    getFallbackVariant(props.variant, VARIANTS, "gray"),
+    getFallbackValue(props.variant, VARIANTS, "gray"),
     computedSize.value,
     props.variant
   )

package/dist/components/button/index.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
-import { getFallbackVariant, useComputedSize } from "../../composables/useFallbackProps";
+import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
+import { getFallbackValue } from "../../utils/value";
 import PSpinner from "../spinner/index.vue";
 defineOptions({
   name: "PButton"
@@ -45,8 +46,8 @@ const ALIGNMENTS = {
   right: "justify-end"
 };
 const DISABLED_CLASS_NAMES = "is-disabled bg-gray-100 hover:bg-gray-100 active:bg-gray-100 cursor-not-allowed text-gray-700 border-gray-300";
-const computedSize = useComputedSize(props.size, SIZES);
-const computedFontSize = useComputedSize(props.size, FONT_SIZES);
+const computedSize = useConfigProviderSize(props.size, SIZES);
+const computedFontSize = useConfigProviderSize(props.size, FONT_SIZES);
 const computedDisabled = computed(() => props.disabled || props.loading);
 const computedClass = computed(() => {
   const classNames = ["pxd-button cursor-pointer select-none items-center motion-safe:transition-all", ALIGNMENTS[props.align]];
@@ -57,7 +58,7 @@ const computedClass = computed(() => {
   }
   if (variant !== "simple") {
     classNames.push("border outline-none self-focus-ring");
-    classNames.push(getFallbackVariant(variant, VARIANTS));
+    classNames.push(getFallbackValue(variant, VARIANTS));
     classNames.push(computedSize.value);
   }
   classNames.push(block ? "flex w-full" : "inline-flex");

package/dist/components/chip/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from "vue";
-import { getFallbackVariant } from "../../composables/useFallbackProps";
 import { getCssUnitValue } from "../../utils/format";
+import { getFallbackValue } from "../../utils/value";
 const props = defineProps({
   size: { type: [Number, String], required: false, default: 10 },
   inset: { type: Boolean, required: false },
@@ -24,7 +24,7 @@ const computedClass = computed(() => {
   if (!inset) {
     basic.push("translate-x-1/2 -translate-y-1/3");
   }
-  basic.push(getFallbackVariant(variant, variantPresets, "primary"));
+  basic.push(getFallbackValue(variant, variantPresets, "primary"));
   return basic;
 });
 </script>

package/dist/components/collapse/index.vue

@@ -104,10 +104,8 @@ onMounted(() => {
   will-change: height;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .pxd-transition--collapse-enter-active,
-  .pxd-transition--collapse-leave-active {
-    transition: height var(--default-transition-duration) var(--default-transition-timing-function);
-  }
+.pxd-transition--collapse-enter-active,
+.pxd-transition--collapse-leave-active {
+  transition: height var(--default-transition-duration) var(--default-transition-timing-function);
 }
 </style>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, provide, ref } from "vue";
-import { useComputedSize } from "../../composables/useFallbackProps";
+import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
 defineOptions({
   name: "PCollapseGroup"
 });
@@ -26,7 +26,7 @@ const SIZES = {
   }
 };
 const expandedItems = ref([]);
-const computedSize = useComputedSize(props.size, SIZES);
+const computedSize = useConfigProviderSize(props.size, SIZES);
 const computedStyle = computed(() => {
   const { padding, fontSize, fontWeight } = computedSize.value;
   return {

package/dist/components/gauge/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import ChartActivityIcon from "@gdsicon/vue/chart-activity";
 import { computed } from "vue";
-import { useComputedSize } from "../../composables/useFallbackProps";
+import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
 import { getColorByThreshold } from "../../utils/colors";
 defineOptions({
   name: "PGauge",
@@ -33,7 +33,7 @@ const defaultColors = {
   30: "var(--color-amber-800)",
   60: "var(--color-green-700)"
 };
-const computedSize = useComputedSize(props.size, SIZES);
+const computedSize = useConfigProviderSize(props.size, SIZES);
 const progress = computed(() => {
   if (props.indeterminate) {
     return 0;

package/dist/components/index.d.ts

@@ -25,8 +25,10 @@ export { default as Material } from './material/index.vue';
 export { default as Menu } from './menu/index.vue';
 export { default as MenuItem } from './menu-item/index.vue';
 export { default as MenuList } from './menu-list/index.vue';
+export { default as Modal } from './modal/index.vue';
 export { default as MoreButton } from './more-button/index.vue';
 export { default as Note } from './note/index.vue';
+export { default as Overlay } from './overlay/index.vue';
 export { default as Pagination } from './pagination/index.vue';
 export { default as PinInput } from './pin-input/index.vue';
 export { default as Popover } from './popover/index.vue';

package/dist/components/index.js

@@ -25,8 +25,10 @@ export { default as Material } from "./material/index.vue";
 export { default as Menu } from "./menu/index.vue";
 export { default as MenuItem } from "./menu-item/index.vue";
 export { default as MenuList } from "./menu-list/index.vue";
+export { default as Modal } from "./modal/index.vue";
 export { default as MoreButton } from "./more-button/index.vue";
 export { default as Note } from "./note/index.vue";
+export { default as Overlay } from "./overlay/index.vue";
 export { default as Pagination } from "./pagination/index.vue";
 export { default as PinInput } from "./pin-input/index.vue";
 export { default as Popover } from "./popover/index.vue";

package/dist/components/input/index.vue

@@ -4,7 +4,7 @@ import EyeIcon from "@gdsicon/vue/eye";
 import EyeOffIcon from "@gdsicon/vue/eye-off";
 import { twMerge } from "tailwind-merge";
 import { computed, shallowRef } from "vue";
-import { useComputedSize } from "../../composables/useFallbackProps";
+import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
 import { useModelValue } from "../../composables/useModelValue";
 import { getUniqueId } from "../../utils/uid";
 import PError from "../error/index.vue";
@@ -42,7 +42,7 @@ const SIZES = {
 };
 const modelValue = useModelValue(props, emits);
 const internalInputType = shallowRef(props.password ? "password" : "text");
-const computedSize = useComputedSize(props.size, SIZES);
+const computedSize = useConfigProviderSize(props.size, SIZES);
 const computedClass = computed(() => {
   const basic = ["pxd-input--border flex items-center relative h-full overflow-hidden rounded-md bg-background motion-safe:transition-all"];
   basic.push(computedSize.value);

package/dist/components/loading-dots/index.vue

@@ -28,7 +28,7 @@ defineOptions({
 
 @media (prefers-reduced-motion: no-preference) {
   .pxd-loading-dots .pxd-loading--dot {
-    animation: fade-loading 1.4s infinite ease-in-out;
+    animation: fade-loading 1.4s infinite var(--default-transition-timing-function);
   }
 }
 </style>

package/dist/components/modal/index.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { nextTick, shallowRef, watch } from "vue";
+import { useModelValue } from "../../composables/useModelValue";
+import POverlay from "../overlay/index.vue";
+import PScrollable from "../scrollable/index.vue";
+defineOptions({
+  name: "PModal"
+});
+const props = defineProps({
+  title: { type: [String, Number, Array, null], required: false },
+  subtitle: { type: [String, Number, Array, null], required: false },
+  width: { type: [Number, String], required: false },
+  modelValue: { type: Boolean, required: false, default: false },
+  headerStyle: { type: Boolean, required: false, default: false },
+  footerStyle: { type: Boolean, required: false, default: true },
+  appendToBody: { type: Boolean, required: false, default: true },
+  closeOnClickModal: { type: Boolean, required: false, default: false }
+});
+const emits = defineEmits(["open", "close", "click-outside", "update:modelValue"]);
+const modalRef = shallowRef();
+const isVisible = useModelValue(props, emits);
+function onOverlayClick(ev) {
+  emits("click-outside", ev);
+  if (!props.closeOnClickModal) {
+    return;
+  }
+  isVisible.value = false;
+}
+watch(() => isVisible.value, (visible) => {
+  nextTick(() => {
+    if (visible) {
+      emits("open");
+      return;
+    }
+    emits("close");
+  });
+}, { flush: "post" });
+</script>
+
+<template>
+  <POverlay v-model="isVisible" :append-to-body="appendToBody" @click="onOverlayClick">
+    <Transition name="pxd-transition--modal" mode="out-in">
+      <div
+        v-if="isVisible"
+        ref="modalRef"
+        class="pxd-modal fixed z-10 flex flex-col h-max overflow-hidden shadow-border-modal rounded-tl-lg rounded-tr-lg sm:rounded-xl bg-background dark:bg-background-secondary w-full max-w-full left-0 bottom-0 sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 motion-safe:transition-all"
+        :style="{ '--width': width }"
+      >
+        <header
+          class="pxd-modal--header relative shrink-0 py-5 px-6 -mb-6"
+          :class="{ 'mb-0 border-b bg-background-secondary dark:bg-background': headerStyle }"
+        >
+          <h3 class="text-2xl font-semibold">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </h3>
+
+          <div v-if="subtitle" class="mt-4">
+            <slot name="subtitle">
+              {{ subtitle }}
+            </slot>
+          </div>
+        </header>
+
+        <PScrollable
+          class="pxd-modal--content flex-1"
+          content-class="p-6"
+        >
+          <slot />
+        </PScrollable>
+
+        <footer
+          class="pxd-modal--footer relative p-4 shrink-0 flex items-center justify-between"
+          :class="{ 'border-t bg-background-secondary dark:bg-background': footerStyle }"
+        >
+          <slot name="footer" />
+        </footer>
+      </div>
+    </Transition>
+  </POverlay>
+</template>
+
+<style>
+.pxd-transition--modal-enter-active,
+.pxd-transition--modal-leave-active {
+  transition-timing-function: cubic-bezier(0.175,0.885,0.32,1.1);
+  transition:
+    transform var(--default-transition-duration),
+    opacity var(--default-transition-duration);
+}
+
+.pxd-transition--modal-enter-from,
+.pxd-transition--modal-leave-to {
+  transform: translate(0, 100%);
+}
+
+@media (width >= 40rem) {
+  .pxd-transition--modal-enter-from,
+  .pxd-transition--modal-leave-to {
+    opacity: 0;
+    transform: scale(0.98) !important;
+  }
+
+  .pxd-modal {
+    width: calc(var(--width, 540) * 1px);
+  }
+}
+
+.pxd-modal {
+  max-height: min(800px, 80vh);
+}
+</style>

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

@@ -0,0 +1,45 @@
+import type { ComponentLabel } from '../../types/components';
+interface Props {
+    title?: ComponentLabel;
+    subtitle?: ComponentLabel;
+    width?: number | string;
+    modelValue?: boolean;
+    headerStyle?: boolean;
+    footerStyle?: boolean;
+    appendToBody?: boolean;
+    closeOnClickModal?: boolean;
+}
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_20: {}, __VLS_22: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_13) => any;
+} & {
+    subtitle?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_20) => any;
+} & {
+    footer?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: () => any;
+    close: () => any;
+    "update:modelValue": (args_0: boolean) => any;
+    "click-outside": (args_0: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onOpen?: () => any;
+    onClose?: () => any;
+    "onUpdate:modelValue"?: (args_0: boolean) => any;
+    "onClick-outside"?: (args_0: MouseEvent) => any;
+}>, {
+    modelValue: boolean;
+    appendToBody: boolean;
+    headerStyle: boolean;
+    footerStyle: boolean;
+    closeOnClickModal: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/note/index.vue

@@ -5,7 +5,8 @@ import StopIcon from "@gdsicon/vue/stop";
 import WarningIcon from "@gdsicon/vue/warning";
 import { twMerge } from "tailwind-merge";
 import { computed, h } from "vue";
-import { getFallbackVariant, useComputedSize } from "../../composables/useFallbackProps";
+import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
+import { getFallbackValue } from "../../utils/value";
 defineOptions({
   name: "PNote"
 });
@@ -60,18 +61,18 @@ const VARIANTS = {
 const computedLabel = computed(() => {
   const { label } = props;
   if (label === true || label === "") {
-    return getFallbackVariant(props.variant, VARIANTS).icon;
+    return getFallbackValue(props.variant, VARIANTS).icon;
   }
   if (typeof label === "string" && label) {
     return h("span", null, label);
   }
   return false;
 });
-const computedSize = useComputedSize(props.size, SIZES);
+const computedSize = useConfigProviderSize(props.size, SIZES);
 const computedClass = computed(() => {
   const basic = ["pxd-note flex flex-col sm:flex-row sm:items-center gap-2 border rounded-md w-max max-w-full"];
   basic.push(computedSize.value);
-  const { fill, classes } = getFallbackVariant(props.variant, VARIANTS);
+  const { fill, classes } = getFallbackValue(props.variant, VARIANTS);
   basic.push(props.fill ? fill : classes);
   return twMerge(basic);
 });

package/dist/components/overlay/index.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, shallowRef, watch } from "vue";
+import { getScrollContainer } from "../../utils/dom";
+import PTeleport from "../teleport/index.vue";
+defineOptions({
+  name: "POverlay"
+});
+const props = defineProps({
+  zIndex: { type: Number, required: false },
+  modelValue: { type: Boolean, required: false, default: false },
+  appendToBody: { type: Boolean, required: false, default: true },
+  overlayClass: { type: String, required: false }
+});
+const emits = defineEmits(["click"]);
+const overlayRef = shallowRef();
+const computedStyle = computed(() => {
+  return {
+    "--z": props.zIndex
+  };
+});
+function onOverlayClick(ev) {
+  emits("click", ev);
+}
+let scrollContainer;
+watch(() => props.modelValue, (visible) => {
+  if (!visible) {
+    if (scrollContainer) {
+      scrollContainer.classList.remove("scroll-disabled");
+    }
+    return;
+  }
+  nextTick(() => {
+    if (!scrollContainer) {
+      const container = getScrollContainer(overlayRef.value);
+      scrollContainer = container === window ? document.documentElement : container;
+    }
+    scrollContainer.classList.add("scroll-disabled");
+  });
+}, { immediate: true });
+onBeforeUnmount(() => {
+  if (scrollContainer) {
+    scrollContainer.classList.remove("scroll-disabled");
+  }
+});
+</script>
+
+<template>
+  <PTeleport :disabled="!appendToBody">
+    <Transition name="pxd-transition--fade" mode="out-in">
+      <div
+        v-if="modelValue"
+        ref="overlayRef"
+        tabindex="-1"
+        class="pxd-overlay fixed inset-0 bg-black/40 sm:bg-background/80 motion-safe:transition-colors"
+        :class="overlayClass"
+        :style="computedStyle"
+        @click="onOverlayClick"
+      />
+    </Transition>
+
+    <slot />
+  </PTeleport>
+</template>
+
+<style>
+.pxd-overlay {
+  z-index: var(--z, 10);
+}
+</style>

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

@@ -0,0 +1,25 @@
+interface Props {
+    zIndex?: number;
+    modelValue?: boolean;
+    appendToBody?: boolean;
+    overlayClass?: string;
+}
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (args_0: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClick?: (args_0: MouseEvent) => any;
+}>, {
+    modelValue: boolean;
+    appendToBody: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/pin-input/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref, shallowRef } from "vue";
-import { useComputedSize } from "../../composables/useFallbackProps";
+import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
 import { useModelValue } from "../../composables/useModelValue";
 import PError from "../error/index.vue";
 defineOptions({
@@ -32,7 +32,7 @@ const SIZES = {
 };
 const inputsRef = shallowRef([]);
 const modelValue = useModelValue(props, emits);
-const computedSize = useComputedSize(props.size, SIZES);
+const computedSize = useConfigProviderSize(props.size, SIZES);
 const modelValueLocal = ref(
   (() => {
     if (typeof props.modelValue === "string") {
@@ -175,7 +175,7 @@ function onInputPastedValue(ev) {
     </div>
 
     <div
-      class="flex items-center gap-2"
+      class="flex items-center gap-1.5"
       @keydown="onContainerKeydown"
       @compositionend="onCompositionEnd"
     >

package/dist/components/popover/index.vue

@@ -566,50 +566,47 @@ defineExpose({
   }
 }
 
-@media (prefers-reduced-motion: no-preference) {
-
-  .showTransition.pxd-transition--popover-top-enter-active,
-  .hideTransition.pxd-transition--popover-top-leave-active,
-  .showTransition.pxd-transition--popover-bottom-enter-active,
-  .hideTransition.pxd-transition--popover-bottom-leave-active,
-  .showTransition.pxd-transition--popover-left-enter-active,
-  .hideTransition.pxd-transition--popover-left-leave-active,
-  .showTransition.pxd-transition--popover-right-enter-active,
-  .hideTransition.pxd-transition--popover-right-leave-active {
-    transition:
-      opacity var(--default-transition-duration) var(--default-transition-timing-function),
-      margin var(--default-transition-duration) var(--default-transition-timing-function);
-  }
+.showTransition.pxd-transition--popover-top-enter-active,
+.hideTransition.pxd-transition--popover-top-leave-active,
+.showTransition.pxd-transition--popover-bottom-enter-active,
+.hideTransition.pxd-transition--popover-bottom-leave-active,
+.showTransition.pxd-transition--popover-left-enter-active,
+.hideTransition.pxd-transition--popover-left-leave-active,
+.showTransition.pxd-transition--popover-right-enter-active,
+.hideTransition.pxd-transition--popover-right-leave-active {
+  transition:
+    opacity var(--default-transition-duration) var(--default-transition-timing-function),
+    margin var(--default-transition-duration) var(--default-transition-timing-function);
+}
 
-  .showTransition.pxd-transition--popover-top-enter-from,
-  .hideTransition.pxd-transition--popover-top-leave-to,
-  .showTransition.pxd-transition--popover-bottom-enter-from,
-  .hideTransition.pxd-transition--popover-bottom-leave-to,
-  .showTransition.pxd-transition--popover-left-enter-from,
-  .hideTransition.pxd-transition--popover-left-leave-to,
-  .showTransition.pxd-transition--popover-right-enter-from,
-  .hideTransition.pxd-transition--popover-right-leave-to {
-    opacity: 0;
-  }
+.showTransition.pxd-transition--popover-top-enter-from,
+.hideTransition.pxd-transition--popover-top-leave-to,
+.showTransition.pxd-transition--popover-bottom-enter-from,
+.hideTransition.pxd-transition--popover-bottom-leave-to,
+.showTransition.pxd-transition--popover-left-enter-from,
+.hideTransition.pxd-transition--popover-left-leave-to,
+.showTransition.pxd-transition--popover-right-enter-from,
+.hideTransition.pxd-transition--popover-right-leave-to {
+  opacity: 0;
+}
 
-  .showTransition.pxd-transition--popover-top-enter-from,
-  .hideTransition.pxd-transition--popover-top-leave-to {
-    margin-top: calc(1px * var(--translate-offset));
-  }
+.showTransition.pxd-transition--popover-top-enter-from,
+.hideTransition.pxd-transition--popover-top-leave-to {
+  margin-top: calc(1px * var(--translate-offset));
+}
 
-  .showTransition.pxd-transition--popover-bottom-enter-from,
-  .hideTransition.pxd-transition--popover-bottom-leave-to {
-    margin-top: calc(-1px * var(--translate-offset));
-  }
+.showTransition.pxd-transition--popover-bottom-enter-from,
+.hideTransition.pxd-transition--popover-bottom-leave-to {
+  margin-top: calc(-1px * var(--translate-offset));
+}
 
-  .showTransition.pxd-transition--popover-left-enter-from,
-  .hideTransition.pxd-transition--popover-left-leave-to {
-    margin-left: calc(1px * var(--translate-offset));
-  }
+.showTransition.pxd-transition--popover-left-enter-from,
+.hideTransition.pxd-transition--popover-left-leave-to {
+  margin-left: calc(1px * var(--translate-offset));
+}
 
-  .showTransition.pxd-transition--popover-right-enter-from,
-  .hideTransition.pxd-transition--popover-right-leave-to {
-    margin-left: calc(-1px * var(--translate-offset));
-  }
+.showTransition.pxd-transition--popover-right-enter-from,
+.hideTransition.pxd-transition--popover-right-leave-to {
+  margin-left: calc(-1px * var(--translate-offset));
 }
 </style>