pxd 0.0.61 → 0.0.63

package/dist/components/resizable/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, nextTick, onMounted, ref, shallowRef } from "vue";
+import { nextTick, onMounted, ref, shallowRef } from "vue";
 import { provideResizableContext } from "../../contexts/resizable";
 defineOptions({
   name: "PResizable",
@@ -8,10 +8,10 @@ defineOptions({
 const props = defineProps({
   direction: { type: String, required: false, default: "horizontal" }
 });
-const panelSizes = ref([]);
+const panelSizes = ref({});
 const panelConfigs = ref([]);
 const handleConfigs = ref([]);
-const orderCounter = ref(0);
+const orderCounter = shallowRef(0);
 const containerRef = shallowRef();
 function registerPanel(config) {
   const existingIndex = panelConfigs.value.findIndex((p) => p.id === config.id);
@@ -32,7 +32,8 @@ function unregisterPanel(id) {
   const index = panelConfigs.value.findIndex((p) => p.id === id);
   if (index !== -1) {
     panelConfigs.value.splice(index, 1);
-    panelSizes.value.splice(index, 1);
+    const { [id]: _, ...rest } = panelSizes.value;
+    panelSizes.value = rest;
   }
 }
 function registerHandle(config) {
@@ -54,8 +55,7 @@ function unregisterHandle(id) {
   }
 }
 function getPanelSize(id) {
-  const index = panelConfigs.value.findIndex((p) => p.id === id);
-  return index !== -1 ? panelSizes.value[index] || 0 : 0;
+  return panelSizes.value[id] || 0;
 }
 function onHandleDrag(handleId, delta) {
   const handleOrder = handleConfigs.value.find((h) => h.id === handleId)?.order;
@@ -74,40 +74,33 @@ function calculateContainerSize() {
   }
   return props.direction === "horizontal" ? containerRef.value.offsetWidth : containerRef.value.offsetHeight;
 }
-function calculateInitialPanelSizes(totalSize) {
-  const sizes = Array.from({ length: panelConfigs.value.length }, () => 0);
-  let remainingSize = totalSize;
-  const autoSizedPanelIndices = [];
+function calculateInitialPanelSizes() {
+  const sizes = {};
+  let remainingSize = 100;
+  const autoSizedPanelIds = [];
   const sortedConfigs = [...panelConfigs.value].sort((a, b) => a.order - b.order);
-  sortedConfigs.forEach((config, index) => {
+  sortedConfigs.forEach((config) => {
     const minSize = config.minSize || 0;
     const initialSizeNum = config.size;
     if (initialSizeNum !== null && initialSizeNum !== void 0) {
-      const size = Math.max(initialSizeNum, minSize);
-      sizes[index] = size;
-      remainingSize -= size;
+      sizes[config.id] = Math.max(initialSizeNum, minSize);
+      remainingSize -= sizes[config.id];
     } else {
-      sizes[index] = minSize;
+      sizes[config.id] = minSize;
       remainingSize -= minSize;
-      autoSizedPanelIndices.push(index);
+      autoSizedPanelIds.push(config.id);
     }
   });
-  return { sizes, remainingSize, autoSizedPanelIndices };
+  return { sizes, remainingSize, autoSizedPanelIds };
 }
-function distributeRemainingSpace(sizes, remainingSize, autoSizedPanelIndices) {
-  if (autoSizedPanelIndices.length === 0 || remainingSize <= 0) {
+function distributeRemainingSpace(sizes, remainingSize, autoSizedPanelIds) {
+  if (autoSizedPanelIds.length === 0 || remainingSize <= 0) {
     return sizes;
   }
-  const updatedSizes = [...sizes];
-  const avgSize = Math.floor(remainingSize / autoSizedPanelIndices.length);
-  let remainder = remainingSize % autoSizedPanelIndices.length;
-  autoSizedPanelIndices.forEach((index) => {
-    let sizeToAdd = avgSize;
-    if (remainder > 0) {
-      sizeToAdd++;
-      remainder--;
-    }
-    updatedSizes[index] += sizeToAdd;
+  const updatedSizes = { ...sizes };
+  const avgSize = remainingSize / autoSizedPanelIds.length;
+  autoSizedPanelIds.forEach((id) => {
+    updatedSizes[id] += avgSize;
   });
   return updatedSizes;
 }
@@ -116,25 +109,27 @@ async function initPanelSizes() {
     return;
   }
   await nextTick();
-  const totalSize = calculateContainerSize();
-  if (totalSize <= 0) {
-    return;
-  }
-  const { sizes, remainingSize, autoSizedPanelIndices } = calculateInitialPanelSizes(totalSize);
-  const finalSizes = distributeRemainingSpace(sizes, remainingSize, autoSizedPanelIndices);
-  panelSizes.value = finalSizes;
+  const { sizes, remainingSize, autoSizedPanelIds } = calculateInitialPanelSizes();
+  panelSizes.value = distributeRemainingSpace(sizes, remainingSize, autoSizedPanelIds);
 }
 function onDrag(index, { deltaX, deltaY }) {
-  if (index < 0 || index + 1 >= panelSizes.value.length) {
+  if (index < 0 || index + 1 >= panelConfigs.value.length) {
     return;
   }
+  const containerSize = calculateContainerSize();
+  if (containerSize <= 0) {
+    return;
+  }
+  const prevId = panelConfigs.value[index].id;
+  const nextId = panelConfigs.value[index + 1].id;
   const delta = props.direction === "horizontal" ? deltaX : deltaY;
-  const prevSize = panelSizes.value[index];
-  const nextSize = panelSizes.value[index + 1];
+  const deltaPercent = delta / containerSize * 100;
+  const prevSize = panelSizes.value[prevId] || 0;
+  const nextSize = panelSizes.value[nextId] || 0;
   const prevMinSize = panelConfigs.value[index]?.minSize || 0;
   const nextMinSize = panelConfigs.value[index + 1]?.minSize || 0;
-  let newPrevSize = prevSize + delta;
-  let newNextSize = nextSize - delta;
+  let newPrevSize = prevSize + deltaPercent;
+  let newNextSize = nextSize - deltaPercent;
   if (newPrevSize < prevMinSize) {
     const diff = prevMinSize - newPrevSize;
     newPrevSize = prevMinSize;
@@ -150,22 +145,19 @@ function onDrag(index, { deltaX, deltaY }) {
   if (newNextSize < nextMinSize) {
     newNextSize = nextMinSize;
   }
-  const newSizes = [...panelSizes.value];
-  newSizes[index] = newPrevSize;
-  newSizes[index + 1] = newNextSize;
-  panelSizes.value = newSizes;
+  panelSizes.value[prevId] = newPrevSize;
+  panelSizes.value[nextId] = newNextSize;
 }
 provideResizableContext({
+  props,
+  panelSizes,
   registerPanel,
   unregisterPanel,
   registerHandle,
   unregisterHandle,
   getPanelSize,
   onHandleDrag,
-  resetPanels: initPanelSizes,
-  direction: computed(() => props.direction),
-  panelSizes,
-  panelConfigs
+  resetPanels: initPanelSizes
 });
 onMounted(async () => {
   await nextTick();
@@ -176,8 +168,8 @@ onMounted(async () => {
 <template>
   <div
     ref="containerRef"
-    :data-direction="direction"
-    class="pxd-resizable flex size-full max-w-full flex-row overflow-hidden data-[direction=vertical]:flex-col"
+    :data-orientation="direction"
+    class="pxd-resizable flex size-full max-w-full flex-row overflow-hidden data-[orientation=vertical]:flex-col"
     v-bind="$attrs"
   >
     <slot />

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

@@ -3,8 +3,8 @@ import type { ComponentDirection } from '../../types/shared'
 export interface PanelConfig {
   id: string
   size?: number | null
-  minSize?: number
   order: number
+  minSize?: number
 }
 
 export interface HandleConfig {

package/dist/components/resizable-handle/index.d.vue.ts

@@ -1,3 +1,6 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+interface ResizableHandleProps {
+    withHandle?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<ResizableHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ResizableHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/resizable-handle/index.vue

@@ -6,6 +6,9 @@ defineOptions({
   name: "PResizableHandle",
   inheritAttrs: false
 });
+defineProps({
+  withHandle: { type: Boolean, required: false }
+});
 const uniqueId = getUniqueId();
 const resizableContext = useResizableContext();
 let isDragging = false;
@@ -48,7 +51,8 @@ onBeforeUnmount(() => {
 
 <template>
   <div
-    class="pxd-resizable-handle relative shrink-0 touch-none bg-border select-none hover:z-1 hover:after:bg-primary/20 active:after:bg-primary/30 motion-safe:transition-colors after:motion-safe:transition-colors"
+    class="pxd-resizable-handle relative shrink-0 touch-none bg-border select-none hover:after:bg-primary/15 active:after:bg-primary/20 motion-safe:transition-colors after:motion-safe:transition-colors"
+    :data-handler="withHandle"
     @pointerdown.prevent="handlePointerDown"
     @pointermove="handlePointerMove"
     @pointerup="handlePointerUp"
@@ -59,6 +63,18 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="postcss">
+.pxd-resizable-handle[data-handler='true']::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 0.5rem;
+  transform: translate(-50%, -50%);
+  background-color: var(--color-gray-300);
+  pointer-events: none;
+  z-index: 1;
+}
+
 .pxd-resizable-handle::after {
   content: '';
   position: absolute;
@@ -68,21 +84,31 @@ onBeforeUnmount(() => {
   transform: translate(-50%, -50%);
 }
 
-.pxd-resizable[data-direction='horizontal'] .pxd-resizable-handle {
+.pxd-resizable[data-orientation='horizontal'] .pxd-resizable-handle {
   width: 1px;
   height: 100%;
   cursor: ew-resize;
 
+  &::before {
+    width: 0.375rem;
+    height: 1.5rem;
+  }
+
   &::after {
     height: 100%;
   }
 }
 
-.pxd-resizable[data-direction='vertical'] .pxd-resizable-handle {
+.pxd-resizable[data-orientation='vertical'] .pxd-resizable-handle {
   width: 100%;
   height: 1px;
   cursor: ns-resize;
 
+  &::before {
+    width: 1.5rem;
+    height: 0.375rem;
+  }
+
   &::after {
     width: 100%;
   }

package/dist/components/resizable-panel/index.vue

@@ -16,15 +16,11 @@ const computedStyle = computed(() => {
   if (!resizableContext) {
     return {};
   }
-  const panelIndex = resizableContext.panelConfigs.value.findIndex((p) => p.id === uniqueId);
-  const size = panelIndex >= 0 ? resizableContext.panelSizes.value[panelIndex] || 0 : 0;
+  const size = resizableContext.panelSizes.value[uniqueId] || 0;
   return {
-    flexBasis: size > 0 ? `${size}px` : "auto",
+    flexBasis: size > 0 ? `${size}%` : "auto",
     flexGrow: size > 0 ? 0 : 1,
-    flexShrink: size > 0 ? 0 : 1,
-    // 在 Vue 2.7 中添加显式的 width/height 以确保更新生效
-    ...size > 0 && resizableContext.direction.value === "horizontal" ? { width: `${size}px` } : {},
-    ...size > 0 && resizableContext.direction.value === "vertical" ? { height: `${size}px` } : {}
+    flexShrink: size > 0 ? 0 : 1
   };
 });
 onMounted(() => {

package/dist/components/scalable-text/index.d.vue.ts

@@ -0,0 +1,9 @@
+import type { ScalableTextProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<ScalableTextProps, {
+    fittedFontSize: import("vue").ShallowRef<number | null, number | null>;
+    needsWrap: import("vue").ShallowRef<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalableTextProps> & Readonly<{}>, {
+    minFontSize: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/scalable-text/index.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { prepareWithSegments, measureNaturalWidth } from "@chenglou/pretext";
+import { shallowRef, computed, watch, nextTick, onBeforeUnmount } from "vue";
+import { useResizeObserver } from "../../composables/use-browser-observer";
+import { getStyle } from "../../utils/dom";
+import { caf, raf } from "../../utils/event";
+import { isServer } from "../../utils/is";
+defineOptions({
+  name: "PScalableText",
+  inheritAttrs: false
+});
+const props = defineProps({
+  text: { type: String, required: true },
+  minFontSize: { type: Number, required: false, default: 12 }
+});
+const PRECISION = 0.5;
+const needsWrap = shallowRef(false);
+const containerRef = shallowRef();
+const fittedFontSize = shallowRef(null);
+let rafId = 0;
+let pendingAdjust = false;
+function parseSize(value) {
+  return Number.parseFloat(value) || 0;
+}
+function buildFont(style, sizePx) {
+  const fontStyle = style.fontStyle || "normal";
+  const fontWeight = style.fontWeight || "400";
+  const fontFamily = style.fontFamily || "sans-serif";
+  return `${fontStyle} ${fontWeight} ${sizePx}px ${fontFamily}`;
+}
+function measureWidth(text, font) {
+  return measureNaturalWidth(prepareWithSegments(text, font));
+}
+function adjust() {
+  if (isServer()) {
+    return;
+  }
+  const el = containerRef.value;
+  if (!el?.isConnected) {
+    return;
+  }
+  const text = props.text ?? "";
+  if (!text) {
+    fittedFontSize.value = null;
+    needsWrap.value = false;
+    return;
+  }
+  const saved = el.style.fontSize;
+  el.style.fontSize = "";
+  const style = getStyle(el);
+  const defaultSize = parseSize(style.fontSize);
+  el.style.fontSize = saved;
+  if (defaultSize <= 0) {
+    return;
+  }
+  const padLeft = parseSize(style.paddingLeft);
+  const padRight = parseSize(style.paddingRight);
+  const available = el.clientWidth - padLeft - padRight;
+  if (available <= 0) {
+    return;
+  }
+  const min = Math.max(0, props.minFontSize);
+  const defaultWidth = measureWidth(text, buildFont(style, defaultSize));
+  if (defaultWidth <= available) {
+    fittedFontSize.value = null;
+    needsWrap.value = false;
+    return;
+  }
+  const minWidth = measureWidth(text, buildFont(style, min));
+  if (minWidth > available) {
+    fittedFontSize.value = min;
+    needsWrap.value = true;
+    return;
+  }
+  const prevFit = fittedFontSize.value;
+  const seed = prevFit !== null && prevFit > min && prevFit < defaultSize ? prevFit : available / defaultWidth * defaultSize;
+  const clampedEst = Math.max(min, Math.min(defaultSize, seed));
+  const estWidth = measureWidth(text, buildFont(style, clampedEst));
+  let best;
+  if (estWidth <= available) {
+    best = clampedEst;
+    let lo = clampedEst;
+    let hi = Math.min(defaultSize, clampedEst + PRECISION * 4);
+    while (hi - lo > PRECISION) {
+      const mid = (lo + hi) / 2;
+      if (measureWidth(text, buildFont(style, mid)) <= available) {
+        best = mid;
+        lo = mid;
+      } else {
+        hi = mid;
+      }
+    }
+  } else {
+    best = min;
+    let lo = min;
+    let hi = clampedEst;
+    while (hi - lo > PRECISION) {
+      const mid = (lo + hi) / 2;
+      if (measureWidth(text, buildFont(style, mid)) <= available) {
+        best = mid;
+        lo = mid;
+      } else {
+        hi = mid;
+      }
+    }
+  }
+  fittedFontSize.value = best;
+  needsWrap.value = false;
+}
+function scheduleAdjust() {
+  if (pendingAdjust) {
+    return;
+  }
+  pendingAdjust = true;
+  rafId = raf(() => {
+    pendingAdjust = false;
+    nextTick(adjust);
+  });
+}
+const computedStyle = computed(() => {
+  const size = fittedFontSize.value;
+  if (size === null) {
+    return void 0;
+  }
+  return { fontSize: `${size}px` };
+});
+watch(() => [props.text, props.minFontSize], scheduleAdjust, { flush: "post" });
+useResizeObserver(containerRef, scheduleAdjust);
+onBeforeUnmount(() => {
+  caf(rafId);
+});
+defineExpose({
+  fittedFontSize,
+  needsWrap
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="pxd-scalable-text max-w-full"
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
+    {{ text }}
+  </div>
+</template>

package/dist/components/scalable-text/types.d.ts

@@ -0,0 +1,12 @@
+export interface ScalableTextProps {
+  /**
+   * Text content to measure. Required for width calculation.
+   */
+  text: string
+  /**
+   * Minimum font size in pixels. When the text still overflows at this size,
+   * it will be allowed to wrap naturally.
+   * @default 12
+   */
+  minFontSize?: number
+}

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

@@ -9,11 +9,11 @@ declare const __VLS_base: import("vue").DefineComponent<ScrollableProps, {
     scrollTo: typeof scrollTo;
     forceUpdate: typeof forceUpdate;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    scroll: (args_0: Event) => any;
     bottom: (args_0: import("../../types/shared").ComponentDirection, args_1: Event) => any;
+    scroll: (args_0: Event) => any;
 }, string, import("vue").PublicProps, Readonly<ScrollableProps> & Readonly<{
-    onScroll?: ((args_0: Event) => any) | undefined;
     onBottom?: ((args_0: import("../../types/shared").ComponentDirection, args_1: Event) => any) | undefined;
+    onScroll?: ((args_0: Event) => any) | undefined;
 }>, {
     fader: boolean;
     scrollbar: boolean;

package/dist/components/scrollable/index.vue

@@ -3,8 +3,9 @@ import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
 import { useMutationObserver, useResizeObserver } from "../../composables/use-browser-observer";
 import { getStyle } from "../../utils/dom";
 import { cachedOff, cachedOn, off, once } from "../../utils/event";
+import { raf } from "../../utils/event";
 import { isServer } from "../../utils/is";
-import { throttleByRaf } from "../../utils/throttle";
+import { throttleByRaf } from "../../utils/timing";
 import PFader from "../fader/index.vue";
 defineOptions({
   name: "PScrollable",
@@ -226,7 +227,7 @@ function onEndDrag(ev) {
   dragState.direction = null;
   cachedOff(document, "mousemove", onDragMove);
   throttledUpdate.cancel();
-  requestAnimationFrame(updateScrollbarMetrics);
+  raf(updateScrollbarMetrics);
 }
 function scrollTo(top, left) {
   if (!contentRef.value) {
@@ -264,7 +265,7 @@ onMounted(async () => {
     return;
   }
   getContainerPadding();
-  requestAnimationFrame(updateScrollbarMetrics);
+  raf(updateScrollbarMetrics);
 });
 onBeforeUnmount(() => {
   throttledUpdate.cancel();

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

@@ -0,0 +1,6 @@
+import type { SeparatorProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+    direction: import("../../types/shared").ComponentDirection;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/separator/index.vue

@@ -0,0 +1,18 @@
+<script setup>
+defineOptions({
+  name: "PSeparator",
+  inheritAttrs: false
+});
+const props = defineProps({
+  direction: { type: String, required: false, default: "vertical" }
+});
+</script>
+
+<template>
+  <div
+    role="separator"
+    :aria-orientation="direction"
+    class="pxd-separator aria-[orientation=vertical]:h-3 inline-block bg-gray-300 leading-inherit aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=vertical]:w-px"
+    v-bind="$attrs"
+  />
+</template>

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

@@ -0,0 +1,5 @@
+import type { ComponentDirection } from '../../types/shared'
+
+export interface SeparatorProps {
+  direction?: ComponentDirection
+}

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

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
-    loading: boolean;
     height: string | number;
+    loading: boolean;
     shape: import("../../types/shared").ComponentShape;
     animated: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -6,9 +6,9 @@ declare const __VLS_export: import("vue").DefineComponent<SliderProps, {}, {}, {
     onChange?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
 }>, {
+    modelValue: number | number[] | null;
     max: number;
     variant: import("../../types/shared").ComponentVariant | "secondary";
-    modelValue: number | number[] | null;
     min: number;
     step: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/slider/index.vue

@@ -5,7 +5,7 @@ import { useConfigProvider } from "../../contexts/config-provider";
 import { cachedOff, cachedOn, once } from "../../utils/event";
 import { NOOP } from "../../utils/event";
 import { getFallbackValue } from "../../utils/get";
-import { throttleByRaf } from "../../utils/throttle";
+import { throttleByRaf } from "../../utils/timing";
 defineOptions({
   name: "PSlider",
   inheritAttrs: false,
@@ -239,7 +239,7 @@ onBeforeUnmount(() => {
       tabindex="0"
       :data-dragging="isDragging && activeThumb === 'start'"
       :data-range-start="true"
-      class="pxd-slider--thumb group rounded-xs absolute -translate-x-1/2 touch-none appearance-none bg-none self-focus-ring outline-none hover:z-1 active:[--slider-thumb-scale:1.3] motion-safe:before:transition-all pointer-fine:hover:[--slider-thumb-scale:1.3]"
+      class="pxd-slider--thumb group rounded-xs absolute -translate-x-1/2 transform-gpu touch-none appearance-none bg-none self-focus-ring outline-none hover:z-1 active:[--slider-thumb-scale:1.3] motion-safe:before:transition-appearance pointer-fine:hover:[--slider-thumb-scale:1.3]"
       :class="[{ 'pointer-events-none': disabled }, computedSize.thumb]"
       :style="{ left: `${startPercentage}%` }"
       @keydown="onThumbKeydown"
@@ -247,7 +247,7 @@ onBeforeUnmount(() => {
       @pointerdown.prevent.stop="startDragging($event, 'start')"
     >
       <span
-        class="py-1 px-1.5 text-xs -top-8 shadow-sm pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-md bg-gray-1000 whitespace-nowrap text-gray-100 opacity-0 select-none group-hover:opacity-100 group-data-[dragging=true]:opacity-100 motion-safe:transition-opacity"
+        class="py-1 px-1.5 text-xs -top-8 pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-md bg-gray-1000 whitespace-nowrap text-gray-100 opacity-0 shadow-border-base shadow-border-tooltip select-none group-hover:opacity-100 group-data-[dragging=true]:opacity-100 motion-safe:transition-opacity"
       >
         {{ valueRange[0] }}
       </span>
@@ -257,7 +257,7 @@ onBeforeUnmount(() => {
       tabindex="0"
       :data-range-start="range ? false : true"
       :data-dragging="isDragging && activeThumb === 'end'"
-      class="pxd-slider--thumb group rounded-xs absolute -translate-x-1/2 touch-none appearance-auto bg-none self-focus-ring outline-none hover:z-1 active:[--slider-thumb-scale:1.3] motion-safe:before:transition-all pointer-fine:hover:[--slider-thumb-scale:1.3]"
+      class="pxd-slider--thumb group rounded-xs absolute -translate-x-1/2 transform-gpu touch-none appearance-auto bg-none self-focus-ring outline-none hover:z-1 active:[--slider-thumb-scale:1.3] motion-safe:before:transition-appearance pointer-fine:hover:[--slider-thumb-scale:1.3]"
       :class="[{ 'pointer-events-none': disabled }, computedSize.thumb]"
       :style="{ left: `${endPercentage}%` }"
       @keydown="onThumbKeydown"
@@ -265,7 +265,7 @@ onBeforeUnmount(() => {
       @pointerdown.prevent.stop="startDragging($event, 'end')"
     >
       <span
-        class="py-1 px-1.5 text-xs -top-8 shadow-sm pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-md bg-gray-1000 whitespace-nowrap text-gray-100 opacity-0 select-none group-hover:opacity-100 group-data-[dragging=true]:opacity-100 motion-safe:transition-opacity"
+        class="py-1 px-1.5 text-xs -top-8 pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-md bg-gray-1000 whitespace-nowrap text-gray-100 opacity-0 shadow-border-base shadow-border-tooltip select-none group-hover:opacity-100 group-data-[dragging=true]:opacity-100 motion-safe:transition-opacity"
       >
         {{ valueRange[1] }}
       </span>
@@ -273,6 +273,38 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-<style>
-.pxd-slider--thumb[data-dragging=true]{--slider-thumb-scale:1.3}.pxd-slider--thumb:after,.pxd-slider--thumb:before{border-radius:inherit;content:"";left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) scale(var(--slider-thumb-scale,1))}.pxd-slider--thumb:before{background-color:#fff;box-shadow:0 0 0 1px var(--color-gray-alpha-500),0 1px 2px var(--color-gray-alpha-100);height:100%;width:100%}.dark .pxd-slider--thumb:before{box-shadow:0 0 0 1px #000,0 1px 2px #0000000a}.pxd-slider--thumb:after{height:200%;width:200%}.pxd-slider:active .pxd-slider--thumb,.pxd-slider:active .pxd-slider--track{will-change:width,left}
+<style lang="postcss">
+.pxd-slider--thumb {
+  &[data-dragging='true'] {
+    --slider-thumb-scale: 1.3;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: inherit;
+    transform: translate3d(-50%, -50%, 0) scale(var(--slider-thumb-scale, 1));
+  }
+
+  &::before {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    box-shadow:
+      0 0 0 1px var(--color-gray-alpha-500),
+      0 1px 2px var(--color-gray-alpha-100);
+  }
+
+  &::after {
+    width: 200%;
+    height: 200%;
+  }
+}
+
+.dark .pxd-slider--thumb::before {
+  box-shadow: 0 0 0 1px var(--color-background-200);
+}
 </style>