pxd 0.0.13 → 0.0.16

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

@@ -0,0 +1,27 @@
+import type { CSSProperties } from 'vue';
+import type { ComponentVariant } from '../../types/components';
+interface Props {
+    content?: string;
+    desktopOnly?: boolean;
+    popoverClass?: string;
+    popoverStyle?: CSSProperties | string;
+    variant?: ComponentVariant;
+}
+declare var __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    content?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: ComponentVariant;
+    popoverClass: string;
+    popoverStyle: CSSProperties | string;
+}, {}, {}, {}, 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/composables/index.d.ts

@@ -1,5 +1,7 @@
 export * from './useComputedSize.js';
 export * from './useConfigProviderContext.js';
+export * from './useDelayChange.js';
+export * from './useIntersectionObserver.js';
 export * from './useMediaQuery.js';
 export * from './useModelValue.js';
 export * from './useRandomValueContext.js';

package/dist/composables/index.js

@@ -1,5 +1,7 @@
 export * from "./useComputedSize.js";
 export * from "./useConfigProviderContext.js";
+export * from "./useDelayChange.js";
+export * from "./useIntersectionObserver.js";
 export * from "./useMediaQuery.js";
 export * from "./useModelValue.js";
 export * from "./useRandomValueContext.js";

package/dist/composables/useConfigProviderContext.d.ts

@@ -2,6 +2,7 @@ import type { ComponentSize } from '../types/components';
 export declare const injectionKey = "configProvider";
 export interface ConfigProviderProps {
     size?: ComponentSize;
+    locale?: Record<string, any>;
 }
 export declare function provideConfigProvider(configProvider: ConfigProviderProps): void;
 export declare function useConfigProvider(): Required<ConfigProviderProps>;

package/dist/composables/useConfigProviderContext.js

@@ -1,11 +1,13 @@
 import { inject, provide } from "vue";
+import enUS from "../locales/en-US.js";
 export const injectionKey = "configProvider";
 export function provideConfigProvider(configProvider) {
   provide(injectionKey, configProvider);
 }
 export function useConfigProvider() {
   const defaultConfig = {
-    size: "md"
+    size: "md",
+    locale: enUS
   };
   return inject(injectionKey, defaultConfig);
 }

package/dist/composables/useDelayChange.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from 'vue';
+interface UseDelayChangeReturnType<T> {
+    value: Ref<T>;
+    set: (value: T) => void;
+    setImmediate: (value: T) => void;
+}
+export declare function useDelayChange<T>(value: T, delay?: number): UseDelayChangeReturnType<T>;
+export {};

package/dist/composables/useDelayChange.js

@@ -0,0 +1,20 @@
+import { shallowRef } from "vue";
+export function useDelayChange(value, delay = 1e3) {
+  const delayValue = shallowRef(value);
+  let timerId;
+  function set(value2) {
+    clearTimeout(timerId);
+    timerId = setTimeout(() => {
+      setImmediate(value2);
+    }, delay);
+  }
+  function setImmediate(value2) {
+    clearTimeout(timerId);
+    delayValue.value = value2;
+  }
+  return {
+    value: delayValue,
+    set,
+    setImmediate
+  };
+}

package/dist/composables/useIntersectionObserver.d.ts

@@ -0,0 +1,7 @@
+import type { MaybeRef } from 'vue';
+interface UseIntersectionObserverReturnType {
+    observer: IntersectionObserver | undefined;
+    stop: () => void;
+}
+export declare function useIntersectionObserver(target: MaybeRef<HTMLElement | null | undefined>, callback: (entries: IntersectionObserverEntry) => void): UseIntersectionObserverReturnType;
+export {};

package/dist/composables/useIntersectionObserver.js

@@ -0,0 +1,44 @@
+import { onBeforeUnmount, unref, watch } from "vue";
+export function useIntersectionObserver(target, callback) {
+  let observer;
+  const cleanup = () => {
+    if (!observer) {
+      return;
+    }
+    observer.disconnect();
+    observer = void 0;
+  };
+  const unwatch = watch(
+    () => unref(target),
+    (newVal, oldVal) => {
+      if (typeof window === "undefined" || typeof IntersectionObserver === "undefined") {
+        return;
+      }
+      cleanup();
+      observer = new IntersectionObserver((entries) => {
+        entries.forEach(callback);
+      });
+      if (oldVal) {
+        observer.unobserve(oldVal);
+      }
+      if (newVal) {
+        observer.observe(newVal);
+      }
+    },
+    {
+      immediate: true,
+      flush: "post"
+    }
+  );
+  const stop = () => {
+    unwatch();
+    cleanup();
+  };
+  onBeforeUnmount(() => {
+    stop();
+  });
+  return {
+    observer,
+    stop
+  };
+}

package/dist/composables/useMediaQuery.d.ts

@@ -1,4 +1,5 @@
-export declare function useMediaQuery(query: string): import("vue").ShallowRef<boolean, boolean>;
+import type { Ref } from 'vue';
+export declare function useMediaQuery(query: string): Ref<boolean>;
 export declare const MEDIA_QUERY: {
     MOTION_REDUCE: string;
     MOTION_NO_PREFERENCE: string;

package/dist/composables/useMediaQuery.js

@@ -1,4 +1,5 @@
 import { onUnmounted, shallowRef } from "vue";
+import { on } from "../utils/events.js";
 export function useMediaQuery(query) {
   const matches = shallowRef(false);
   if (typeof window === "undefined" || !window.matchMedia) {
@@ -9,10 +10,8 @@ export function useMediaQuery(query) {
   const handler = (event) => {
     matches.value = event.matches;
   };
-  mediaQuery.addEventListener("change", handler, { passive: true });
-  onUnmounted(() => {
-    mediaQuery.removeEventListener("change", handler);
-  });
+  const unbindEvent = on(mediaQuery, "change", handler, { passive: true });
+  onUnmounted(unbindEvent);
   return matches;
 }
 export const MEDIA_QUERY = {

package/dist/composables/useModelValue.d.ts

@@ -1,3 +1,4 @@
+import type { WritableComputedRef } from 'vue';
 interface Options {
     get?: (value: any) => any;
     set?: (value: any) => void;
@@ -6,5 +7,5 @@ export declare function useModelValue<P extends {
     modelValue: any;
 }, E extends {
     (event: 'update:modelValue', ...args: any[]): void;
-}>(props: P, emits: E, options?: Options): import("vue").WritableComputedRef<P["modelValue"], P["modelValue"]>;
+}>(props: P, emits: E, options?: Options): WritableComputedRef<NonNullable<P['modelValue']>>;
 export {};

package/dist/composables/useRandomValueContext.js

@@ -1,11 +1,11 @@
 import { inject, provide } from "vue";
-import { getRandomId } from "../utils/random.js";
+import { getRandomKey } from "../utils/random.js";
 export function provideRandomValue(provideKey = "randomValue") {
-  const randomValue = getRandomId();
-  provide(provideKey, randomValue);
-  return randomValue;
+  const randomKey = getRandomKey();
+  provide(provideKey, randomKey);
+  return randomKey;
 }
 export function useRandomValue(provideKey = "randomValue") {
-  const randomValue = inject(provideKey, getRandomId());
-  return randomValue;
+  const injectedValue = inject(provideKey, getRandomKey());
+  return injectedValue;
 }

package/dist/composables/useResizeObserver.d.ts

@@ -1,5 +1,7 @@
 import type { MaybeRef } from 'vue';
-export declare function useResizeObserver(target: MaybeRef<HTMLElement | null>, callback: (entries: ResizeObserverEntry) => void): {
-    observer: ResizeObserver;
+interface UseResizeObserverReturnType {
+    observer: ResizeObserver | undefined;
     stop: () => void;
-};
+}
+export declare function useResizeObserver(target: MaybeRef<HTMLElement | null | undefined>, callback: (entries: ResizeObserverEntry) => void): UseResizeObserverReturnType;
+export {};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import type { App } from 'vue';
 export * from './components/index';
-export declare const version = "0.0.13";
+export declare const version = "0.0.16";
 export default function install(app: App, prefix?: string): void;

package/dist/index.js

@@ -1,6 +1,6 @@
 import * as components from "./components/index.js";
 export * from "./components/index.js";
-export const version = "0.0.13";
+export const version = "0.0.16";
 export default function install(app, prefix = "P") {
   Object.entries(components).forEach(([key, component]) => {
     app.component(`${prefix}${key}`, component);

package/dist/locales/en-US.d.ts

@@ -0,0 +1,32 @@
+declare const _default: {
+    date: {
+        month: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            11: string;
+        };
+        day: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+        };
+    };
+    compare: {
+        less: string;
+        more: string;
+    };
+};
+export default _default;

package/dist/locales/en-US.js

@@ -0,0 +1,31 @@
+export default {
+  date: {
+    month: {
+      0: "Jan",
+      1: "Feb",
+      2: "Mar",
+      3: "Apr",
+      4: "May",
+      5: "Jun",
+      6: "Jul",
+      7: "Aug",
+      8: "Sep",
+      9: "Oct",
+      10: "Nov",
+      11: "Dec"
+    },
+    day: {
+      0: "Sun",
+      1: "Mon",
+      2: "Tue",
+      3: "Wed",
+      4: "Thu",
+      5: "Fri",
+      6: "Sat"
+    }
+  },
+  compare: {
+    less: "Less",
+    more: "More"
+  }
+};

package/dist/locales/index.d.ts

@@ -0,0 +1,2 @@
+export { default as enUS } from './en-US.js';
+export { default as zhCN } from './zh-CN.js';

package/dist/locales/index.js

@@ -0,0 +1,2 @@
+export { default as enUS } from "./en-US.js";
+export { default as zhCN } from "./zh-CN.js";

package/dist/locales/zh-CN.d.ts

@@ -0,0 +1,32 @@
+declare const _default: {
+    date: {
+        month: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            11: string;
+        };
+        day: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+        };
+    };
+    compare: {
+        less: string;
+        more: string;
+    };
+};
+export default _default;

package/dist/locales/zh-CN.js

@@ -0,0 +1,31 @@
+export default {
+  date: {
+    month: {
+      0: "\u4E00\u6708",
+      1: "\u4E8C\u6708",
+      2: "\u4E09\u6708",
+      3: "\u56DB\u6708",
+      4: "\u4E94\u6708",
+      5: "\u516D\u6708",
+      6: "\u4E03\u6708",
+      7: "\u516B\u6708",
+      8: "\u4E5D\u6708",
+      9: "\u5341\u6708",
+      10: "\u5341\u4E00\u6708",
+      11: "\u5341\u4E8C\u6708"
+    },
+    day: {
+      0: "\u65E5",
+      1: "\u4E00",
+      2: "\u4E8C",
+      3: "\u4E09",
+      4: "\u56DB",
+      5: "\u4E94",
+      6: "\u516D"
+    }
+  },
+  compare: {
+    less: "\u5C11",
+    more: "\u591A"
+  }
+};

package/dist/styles/dst.css

@@ -0,0 +1,277 @@
+:root {
+  --radius: 0.5rem;
+
+  --background-100: #fff;
+  --background-200: #f8f8f8;
+
+  --ring: var(--color-blue-900-value);
+  --primary: var(--color-gray-1000-value);
+
+  --color-gray-alpha-100: hsla(0, 0%, 0%, 0.05);
+  --color-gray-alpha-200: hsla(0, 0%, 0%, 0.08);
+  --color-gray-alpha-300: hsla(0, 0%, 0%, 0.12);
+  --color-gray-alpha-400: hsla(0, 0%, 0%, 0.17);
+  --color-gray-alpha-500: hsla(0, 0%, 0%, 0.21);
+  --color-gray-alpha-600: hsla(0, 0%, 0%, 0.34);
+  --color-gray-alpha-700: hsla(0, 0%, 0%, 0.44);
+  --color-gray-alpha-800: hsla(0, 0%, 0%, 0.51);
+  --color-gray-alpha-900: hsla(0, 0%, 0%, 0.61);
+  --color-gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
+
+  --color-gray-100-value: 0, 0%, 95%;
+  --color-gray-200-value: 0, 0%, 93%;
+  --color-gray-300-value: 0, 0%, 90%;
+  --color-gray-400-value: 0, 0%, 85%;
+  --color-gray-500-value: 0, 0%, 79%;
+  --color-gray-600-value: 0, 0%, 66%;
+  --color-gray-700-value: 0, 0%, 56%;
+  --color-gray-800-value: 0, 0%, 49%;
+  --color-gray-900-value: 0, 0%, 40%;
+  --color-gray-1000-value: 0, 0%, 9%;
+
+  --color-blue-100-value: 212, 100%, 97%;
+  --color-blue-200-value: 210, 100%, 96%;
+  --color-blue-300-value: 210, 100%, 94%;
+  --color-blue-400-value: 209, 100%, 90%;
+  --color-blue-500-value: 209, 100%, 80%;
+  --color-blue-600-value: 208, 100%, 66%;
+  --color-blue-700-value: 212, 100%, 48%;
+  --color-blue-800-value: 212, 100%, 41%;
+  --color-blue-900-value: 211, 100%, 42%;
+  --color-blue-1000-value: 211, 100%, 15%;
+
+  --color-red-100-value: 0, 100%, 97%;
+  --color-red-200-value: 0, 100%, 96%;
+  --color-red-300-value: 0, 100%, 95%;
+  --color-red-400-value: 0, 90%, 92%;
+  --color-red-500-value: 0, 82%, 85%;
+  --color-red-600-value: 359, 90%, 71%;
+  --color-red-700-value: 358, 75%, 59%;
+  --color-red-800-value: 358, 70%, 52%;
+  --color-red-900-value: 358, 66%, 48%;
+  --color-red-1000-value: 355, 49%, 15%;
+
+  --color-amber-100-value: 39, 100%, 95%;
+  --color-amber-200-value: 44, 100%, 92%;
+  --color-amber-300-value: 43, 96%, 90%;
+  --color-amber-400-value: 42, 100%, 78%;
+  --color-amber-500-value: 38, 100%, 71%;
+  --color-amber-600-value: 36, 90%, 62%;
+  --color-amber-700-value: 39, 100%, 57%;
+  --color-amber-800-value: 35, 100%, 52%;
+  --color-amber-900-value: 30, 100%, 32%;
+  --color-amber-1000-value: 20, 79%, 17%;
+
+  --color-green-100-value: 120, 60%, 96%;
+  --color-green-200-value: 120, 60%, 95%;
+  --color-green-300-value: 120, 60%, 91%;
+  --color-green-400-value: 122, 60%, 86%;
+  --color-green-500-value: 124, 60%, 75%;
+  --color-green-600-value: 125, 60%, 64%;
+  --color-green-700-value: 131, 41%, 46%;
+  --color-green-800-value: 132, 43%, 39%;
+  --color-green-900-value: 133, 50%, 32%;
+  --color-green-1000-value: 128, 29%, 15%;
+
+  --color-teal-100-value: 169, 70%, 96%;
+  --color-teal-200-value: 167, 70%, 94%;
+  --color-teal-300-value: 168, 70%, 90%;
+  --color-teal-400-value: 170, 70%, 85%;
+  --color-teal-500-value: 170, 70%, 72%;
+  --color-teal-600-value: 170, 70%, 57%;
+  --color-teal-700-value: 173, 80%, 36%;
+  --color-teal-800-value: 173, 83%, 30%;
+  --color-teal-900-value: 174, 91%, 25%;
+  --color-teal-1000-value: 171, 80%, 13%;
+
+  --color-purple-100-value: 276, 100%, 97%;
+  --color-purple-200-value: 277, 87%, 97%;
+  --color-purple-300-value: 274, 78%, 95%;
+  --color-purple-400-value: 276, 71%, 92%;
+  --color-purple-500-value: 274, 70%, 82%;
+  --color-purple-600-value: 273, 72%, 73%;
+  --color-purple-700-value: 272, 51%, 54%;
+  --color-purple-800-value: 272, 47%, 45%;
+  --color-purple-900-value: 274, 71%, 43%;
+  --color-purple-1000-value: 276, 100%, 15%;
+
+  --color-pink-100-value: 330, 100%, 96%;
+  --color-pink-200-value: 340, 90%, 96%;
+  --color-pink-300-value: 340, 82%, 94%;
+  --color-pink-400-value: 341, 76%, 91%;
+  --color-pink-500-value: 340, 75%, 84%;
+  --color-pink-600-value: 341, 75%, 73%;
+  --color-pink-700-value: 336, 80%, 58%;
+  --color-pink-800-value: 336, 74%, 51%;
+  --color-pink-900-value: 336, 65%, 45%;
+  --color-pink-1000-value: 333, 74%, 15%;
+
+  color-scheme: light;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
+:root.dark {
+  --background-100: #121212;
+  --background-200: #000;
+
+  --color-gray-alpha-100: hsla(0, 0%, 100%, .06);
+  --color-gray-alpha-200: hsla(0, 0%, 100%, .09);
+  --color-gray-alpha-300: hsla(0, 0%, 100%, .13);
+  --color-gray-alpha-400: hsla(0, 0%, 100%, .14);
+  --color-gray-alpha-500: hsla(0, 0%, 100%, .24);
+  --color-gray-alpha-600: hsla(0, 0%, 100%, .51);
+  --color-gray-alpha-700: hsla(0, 0%, 100%, .54);
+  --color-gray-alpha-800: hsla(0, 0%, 100%, .47);
+  --color-gray-alpha-900: hsla(0, 0%, 100%, .61);
+  --color-gray-alpha-1000: hsla(0, 0%, 100%, .92);
+
+  --color-gray-100-value: 0, 0%, 10%;
+  --color-gray-200-value: 0, 0%, 12%;
+  --color-gray-300-value: 0, 0%, 16%;
+  --color-gray-400-value: 0, 0%, 18%;
+  --color-gray-500-value: 0, 0%, 27%;
+  --color-gray-600-value: 0, 0%, 53%;
+  --color-gray-700-value: 0, 0%, 56%;
+  --color-gray-800-value: 0, 0%, 49%;
+  --color-gray-900-value: 0, 0%, 63%;
+  --color-gray-1000-value: 0, 0%, 93%;
+
+  --color-blue-100-value: 216, 50%, 12%;
+  --color-blue-200-value: 214, 59%, 15%;
+  --color-blue-300-value: 213, 71%, 20%;
+  --color-blue-400-value: 212, 78%, 23%;
+  --color-blue-500-value: 211, 86%, 27%;
+  --color-blue-600-value: 206, 100%, 50%;
+  --color-blue-700-value: 212, 100%, 48%;
+  --color-blue-800-value: 212, 100%, 41%;
+  --color-blue-900-value: 210, 100%, 66%;
+  --color-blue-1000-value: 206, 100%, 96%;
+
+  --color-red-100-value: 357, 37%, 12%;
+  --color-red-200-value: 357, 46%, 16%;
+  --color-red-300-value: 356, 54%, 22%;
+  --color-red-400-value: 357, 55%, 26%;
+  --color-red-500-value: 357, 60%, 32%;
+  --color-red-600-value: 358, 75%, 59%;
+  --color-red-700-value: 358, 75%, 59%;
+  --color-red-800-value: 358, 69%, 52%;
+  --color-red-900-value: 358, 100%, 69%;
+  --color-red-1000-value: 353, 90%, 96%;
+
+  --color-amber-100-value: 35, 100%, 8%;
+  --color-amber-200-value: 32, 100%, 10%;
+  --color-amber-300-value: 33, 100%, 15%;
+  --color-amber-400-value: 35, 100%, 17%;
+  --color-amber-500-value: 35, 91%, 22%;
+  --color-amber-600-value: 39, 85%, 49%;
+  --color-amber-700-value: 39, 100%, 57%;
+  --color-amber-800-value: 35, 100%, 52%;
+  --color-amber-900-value: 39, 90%, 50%;
+  --color-amber-1000-value: 40, 94%, 93%;
+
+  --color-green-100-value: 136, 50%, 9%;
+  --color-green-200-value: 137, 50%, 12%;
+  --color-green-300-value: 136, 50%, 14%;
+  --color-green-400-value: 135, 70%, 16%;
+  --color-green-500-value: 135, 70%, 23%;
+  --color-green-600-value: 135, 70%, 34%;
+  --color-green-700-value: 131, 41%, 46%;
+  --color-green-800-value: 132, 43%, 39%;
+  --color-green-900-value: 131, 43%, 57%;
+  --color-green-1000-value: 136, 73%, 94%;
+
+  --color-teal-100-value: 169, 78%, 7%;
+  --color-teal-200-value: 170, 74%, 9%;
+  --color-teal-300-value: 171, 75%, 13%;
+  --color-teal-400-value: 171, 85%, 13%;
+  --color-teal-500-value: 172, 85%, 20%;
+  --color-teal-600-value: 172, 85%, 32%;
+  --color-teal-700-value: 173, 80%, 36%;
+  --color-teal-800-value: 173, 83%, 30%;
+  --color-teal-900-value: 174, 90%, 41%;
+  --color-teal-1000-value: 166, 71%, 93%;
+
+  --color-purple-100-value: 283, 30%, 12%;
+  --color-purple-200-value: 281, 38%, 16%;
+  --color-purple-300-value: 279, 44%, 23%;
+  --color-purple-400-value: 277, 46%, 28%;
+  --color-purple-500-value: 274, 49%, 35%;
+  --color-purple-600-value: 272, 51%, 54%;
+  --color-purple-700-value: 272, 51%, 54%;
+  --color-purple-800-value: 272, 47%, 45%;
+  --color-purple-900-value: 275, 80%, 71%;
+  --color-purple-1000-value: 281, 73%, 96%;
+
+  --color-pink-100-value: 335, 32%, 12%;
+  --color-pink-200-value: 335, 43%, 16%;
+  --color-pink-300-value: 335, 47%, 21%;
+  --color-pink-400-value: 335, 51%, 22%;
+  --color-pink-500-value: 335, 57%, 27%;
+  --color-pink-600-value: 336, 75%, 40%;
+  --color-pink-700-value: 336, 80%, 58%;
+  --color-pink-800-value: 336, 74%, 51%;
+  --color-pink-900-value: 341, 90%, 67%;
+  --color-pink-1000-value: 333, 90%, 96%;
+
+  color-scheme: dark;
+}
+
+.scrollbar-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
+.rounded-inherit {
+  border-radius: inherit;
+}
+
+.peer:focus-visible ~ .peer-focus-ring {
+  box-shadow: 0 0 0 2px var(--background-100),0 0 0 4px hsl(var(--ring))
+}
+
+.self-focus-ring:focus-visible {
+  box-shadow: 0 0 0 2px var(--background-100),0 0 0 4px hsl(var(--ring))
+}
+
+.z-1 {
+  z-index: 1;
+}
+
+.size-em {
+  width: 1em;
+  height: 1em;
+}
+
+.smallest {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+* {
+  border-color: var(--color-border);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .pxd-transition--fade-enter-active,
+  .pxd-transition--fade-leave-active {
+    transition: opacity 0.2s ease;
+  }
+
+  .pxd-transition--fade-enter-from,
+  .pxd-transition--fade-leave-to {
+    opacity: 0;
+  }
+}