pxd 0.0.55 → 0.0.61

package/dist/components/scrollable/index.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
-import { useResizeObserver } from "../../composables/use-browser-observer";
+import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { useMutationObserver, useResizeObserver } from "../../composables/use-browser-observer";
 import { getStyle } from "../../utils/dom";
-import { cachedOff, cachedOn, once } from "../../utils/event";
+import { cachedOff, cachedOn, off, once } from "../../utils/event";
 import { isServer } from "../../utils/is";
 import { throttleByRaf } from "../../utils/throttle";
 import PFader from "../fader/index.vue";
@@ -12,37 +12,43 @@ defineOptions({
 });
 const props = defineProps({
   fader: { type: Boolean, required: false, default: true },
+  loading: { type: Boolean, required: false },
+  scrollbar: { type: Boolean, required: false, default: true },
   faderSize: { type: Number, required: false },
   faderColor: { type: String, required: false },
   faderDirection: { type: String, required: false },
-  scrollbar: { type: Boolean, required: false, default: true },
   wrapperClass: { type: [String, Array, Object], required: false },
   contentClass: { type: [String, Array, Object], required: false },
   contentStyle: { type: [Object, String], required: false },
   scrollbarSize: { type: Number, required: false },
   scrollbarColor: { type: String, required: false },
   scrollbarHoverColor: { type: String, required: false },
-  loading: { type: Boolean, required: false },
-  endThreshold: { type: Number, required: false, default: 10 }
+  bottomThreshold: { type: Number, required: false, default: 10 }
 });
-const emits = defineEmits(["scroll", "end"]);
+const emits = defineEmits(["scroll", "bottom"]);
 const wrapperRef = shallowRef();
 const contentRef = shallowRef();
+const isScrollableX = shallowRef(false);
+const isScrollableY = shallowRef(false);
+const verticalThumbTop = shallowRef(0);
+const horizontalThumbLeft = shallowRef(0);
+const verticalThumbHeight = shallowRef(0);
+const horizontalThumbWidth = shallowRef(0);
 const MIN_THUMB = 30;
+let triggerRightFired = false;
+let triggerBottomFired = false;
 let dragState = {
   isDragging: false,
   direction: null,
   startClientPos: 0,
   startThumbPos: 0
 };
-const scrollInfo = ref({
-  isScrollableX: false,
-  isScrollableY: false,
-  verticalThumbHeight: 0,
-  horizontalThumbWidth: 0,
-  verticalThumbTop: 0,
-  horizontalThumbLeft: 0
-});
+let cachedPadding = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+};
 const computedStyle = computed(() => {
   return {
     "--scrollbar-size": props.scrollbarSize,
@@ -51,23 +57,22 @@ const computedStyle = computed(() => {
   };
 });
 const verticalThumbStyle = computed(() => ({
-  height: `${scrollInfo.value.verticalThumbHeight}px`,
-  transform: `translateY(${scrollInfo.value.verticalThumbTop}px)`
+  height: `${verticalThumbHeight.value}px`,
+  transform: `translateY(${verticalThumbTop.value}px)`
 }));
 const horizontalThumbStyle = computed(() => ({
-  width: `${scrollInfo.value.horizontalThumbWidth}px`,
-  transform: `translateX(${scrollInfo.value.horizontalThumbLeft}px)`
+  width: `${horizontalThumbWidth.value}px`,
+  transform: `translateX(${horizontalThumbLeft.value}px)`
 }));
 function updateScrollbarMetrics() {
+  if (!props.scrollbar) {
+    return;
+  }
   const contentEl = contentRef.value;
-  if (!contentEl || !props.scrollbar) {
+  if (!contentEl || !contentEl.isConnected) {
     return;
   }
-  const { paddingTop, paddingRight, paddingBottom, paddingLeft } = getStyle(contentEl);
-  const pt = Number.parseFloat(paddingTop) || 0;
-  const pb = Number.parseFloat(paddingBottom) || 0;
-  const pl = Number.parseFloat(paddingLeft) || 0;
-  const pr = Number.parseFloat(paddingRight) || 0;
+  const { top: pt, bottom: pb, left: pl, right: pr } = cachedPadding;
   const {
     clientWidth: clientW,
     clientHeight: clientH,
@@ -80,28 +85,26 @@ function updateScrollbarMetrics() {
   const effClientH = Math.max(0, clientH - pt - pb);
   const effScrollW = Math.max(effClientW, scrollW - pl - pr);
   const effScrollH = Math.max(effClientH, scrollH - pt - pb);
-  const isScrollableX = effScrollW > effClientW;
-  const isScrollableY = effScrollH > effClientH;
+  const _isScrollableX = effScrollW > effClientW;
+  const _isScrollableY = effScrollH > effClientH;
   const verticalRatio = effScrollH > 0 ? effClientH / effScrollH : 0;
   const horizontalRatio = effScrollW > 0 ? effClientW / effScrollW : 0;
-  const verticalThumbHeight = Math.max(Math.round(trackH * verticalRatio), MIN_THUMB);
-  const horizontalThumbWidth = Math.max(Math.round(trackW * horizontalRatio), MIN_THUMB);
-  const scrollableWidth = Math.max(0, trackW - horizontalThumbWidth);
-  const scrollableHeight = Math.max(0, trackH - verticalThumbHeight);
+  const _verticalThumbHeight = Math.max(Math.round(trackH * verticalRatio), MIN_THUMB);
+  const _horizontalThumbWidth = Math.max(Math.round(trackW * horizontalRatio), MIN_THUMB);
+  const scrollableWidth = Math.max(0, trackW - _horizontalThumbWidth);
+  const scrollableHeight = Math.max(0, trackH - _verticalThumbHeight);
   const maxScrollX = Math.max(1, scrollW - clientW);
   const maxScrollY = Math.max(1, scrollH - clientH);
   const verticalScrollPercentage = Math.min(1, Math.max(0, contentEl.scrollTop / maxScrollY));
   const horizontalScrollPercentage = Math.min(1, Math.max(0, contentEl.scrollLeft / maxScrollX));
-  const verticalThumbTop = verticalScrollPercentage * scrollableHeight;
-  const horizontalThumbLeft = horizontalScrollPercentage * scrollableWidth;
-  scrollInfo.value = {
-    isScrollableX,
-    isScrollableY,
-    verticalThumbHeight,
-    horizontalThumbWidth,
-    verticalThumbTop,
-    horizontalThumbLeft
-  };
+  const _verticalThumbTop = verticalScrollPercentage * scrollableHeight;
+  const _horizontalThumbLeft = horizontalScrollPercentage * scrollableWidth;
+  isScrollableX.value = _isScrollableX;
+  isScrollableY.value = _isScrollableY;
+  verticalThumbHeight.value = _verticalThumbHeight;
+  horizontalThumbWidth.value = _horizontalThumbWidth;
+  verticalThumbTop.value = _verticalThumbTop;
+  horizontalThumbLeft.value = _horizontalThumbLeft;
 }
 const throttledUpdate = throttleByRaf(updateScrollbarMetrics);
 let lastScrollTop = 0;
@@ -134,17 +137,26 @@ function onContainerScroll(ev) {
     movedY = currTop !== lastScrollTop;
     movedX = currLeft !== lastScrollLeft;
   }
-  const endDistance = props.endThreshold ?? 0;
+  const threshold = props.bottomThreshold ?? 0;
   if (movedY) {
-    const distanceToBottom = el.scrollHeight - (currTop + el.clientHeight);
-    if (distanceToBottom <= endDistance) {
-      emits("end", ev, "vertical");
+    const scrollBottom = Math.floor(currTop + el.clientHeight);
+    if (scrollBottom >= el.scrollHeight - threshold) {
+      if (!triggerBottomFired) {
+        triggerBottomFired = true;
+        emits("bottom", "vertical", ev);
+      }
+    } else {
+      triggerBottomFired = false;
     }
-  }
-  if (movedX) {
-    const distanceToRight = el.scrollWidth - (currLeft + el.clientWidth);
-    if (distanceToRight <= endDistance) {
-      emits("end", ev, "horizontal");
+  } else if (movedX) {
+    const scrollRight = Math.floor(currLeft + el.clientWidth);
+    if (scrollRight >= el.scrollWidth - threshold) {
+      if (!triggerRightFired) {
+        triggerRightFired = true;
+        emits("bottom", "horizontal", ev);
+      }
+    } else {
+      triggerRightFired = false;
     }
   }
   lastScrollTop = currTop;
@@ -160,7 +172,7 @@ function startDragVertical(e) {
     isDragging: true,
     direction: "vertical",
     startClientPos: e.clientY,
-    startThumbPos: scrollInfo.value.verticalThumbTop
+    startThumbPos: verticalThumbTop.value
   };
   cachedOn(document, "mousemove", onDragMove);
   once(document, "mouseup", onEndDrag);
@@ -175,7 +187,7 @@ function startDragHorizontal(e) {
     isDragging: true,
     direction: "horizontal",
     startClientPos: e.clientX,
-    startThumbPos: scrollInfo.value.horizontalThumbLeft
+    startThumbPos: horizontalThumbLeft.value
   };
   cachedOn(document, "mousemove", onDragMove);
   once(document, "mouseup", onEndDrag);
@@ -190,23 +202,23 @@ function onDragMove(e) {
   }
   if (dragState.direction === "vertical") {
     const trackH = wrapperRef.value.clientHeight ?? contentEl.clientHeight;
-    const thumbH = scrollInfo.value.verticalThumbHeight;
+    const thumbH = verticalThumbHeight.value;
     const scrollableH = Math.max(0, trackH - thumbH);
     const delta2 = e.clientY - dragState.startClientPos;
     const newThumbTop = Math.max(0, Math.min(scrollableH, dragState.startThumbPos + delta2));
     const maxScroll2 = Math.max(0, contentEl.scrollHeight - contentEl.clientHeight);
     contentEl.scrollTop = scrollableH > 0 ? newThumbTop / scrollableH * maxScroll2 : 0;
-    scrollInfo.value.verticalThumbTop = newThumbTop;
+    verticalThumbTop.value = newThumbTop;
     return;
   }
   const trackW = wrapperRef.value.clientWidth ?? contentEl.clientWidth;
-  const thumbW = scrollInfo.value.horizontalThumbWidth;
+  const thumbW = horizontalThumbWidth.value;
   const scrollableW = Math.max(0, trackW - thumbW);
   const delta = e.clientX - dragState.startClientPos;
   const newThumbLeft = Math.max(0, Math.min(scrollableW, dragState.startThumbPos + delta));
   const maxScroll = Math.max(0, contentEl.scrollWidth - contentEl.clientWidth);
   contentEl.scrollLeft = scrollableW > 0 ? newThumbLeft / scrollableW * maxScroll : 0;
-  scrollInfo.value.horizontalThumbLeft = newThumbLeft;
+  horizontalThumbLeft.value = newThumbLeft;
 }
 function onEndDrag(ev) {
   ev.stopPropagation();
@@ -223,7 +235,26 @@ function scrollTo(top, left) {
   contentRef.value.scrollTo({ top, left });
 }
 if (props.scrollbar) {
-  useResizeObserver(contentRef, throttledUpdate);
+  useResizeObserver(wrapperRef, throttledUpdate);
+  useMutationObserver(contentRef, throttledUpdate, { childList: true, subtree: true });
+}
+function getContainerPadding() {
+  const contentEl = contentRef.value;
+  if (!contentEl) {
+    return;
+  }
+  const { paddingTop, paddingRight, paddingBottom, paddingLeft } = getStyle(contentEl);
+  cachedPadding = {
+    top: Number.parseFloat(paddingTop) || 0,
+    bottom: Number.parseFloat(paddingBottom) || 0,
+    left: Number.parseFloat(paddingLeft) || 0,
+    right: Number.parseFloat(paddingRight) || 0
+  };
+}
+function forceUpdate() {
+  throttledUpdate.cancel();
+  getContainerPadding();
+  updateScrollbarMetrics();
 }
 onMounted(async () => {
   if (isServer()) {
@@ -232,25 +263,24 @@ onMounted(async () => {
   if (!props.scrollbar && !props.fader) {
     return;
   }
-  cachedOn(window, "resize", updateScrollbarMetrics, { passive: true });
+  getContainerPadding();
   requestAnimationFrame(updateScrollbarMetrics);
 });
 onBeforeUnmount(() => {
-  cachedOff(window, "resize", updateScrollbarMetrics);
-  cachedOff(document, "mousemove", onDragMove);
-  cachedOff(document, "mouseup", onEndDrag);
   throttledUpdate.cancel();
+  cachedOff(document, "mousemove", onDragMove);
+  off(document, "mouseup", onEndDrag);
 });
 defineExpose({
   scrollTo,
-  forceUpdate: throttledUpdate
+  forceUpdate
 });
 </script>
 
 <template>
   <div
     ref="wrapperRef"
-    class="pxd-scrollable group/scrollable relative flex overflow-hidden hover:[--o:1] pointer-fine:[--o:0]"
+    class="pxd-scrollable group/scrollable relative flex flex-col overflow-hidden hover:[--o:1] pointer-fine:[--o:0]"
     :class="wrapperClass"
     :style="computedStyle"
     v-bind="$attrs"
@@ -259,7 +289,7 @@ defineExpose({
       ref="contentRef"
       :class="contentClass"
       :style="contentStyle"
-      class="pxd-scrollable--content relative scrollbar-hidden max-h-full flex-1 shrink-0 overflow-scroll"
+      class="pxd-scrollable--content relative scrollbar-none h-full max-h-inherit max-w-full flex-1 shrink-0 overflow-scroll intrinsic-size-auto"
       @scroll.passive="onContainerScroll"
     >
       <slot />
@@ -275,7 +305,7 @@ defineExpose({
 
     <template v-if="scrollbar">
       <div
-        v-if="scrollInfo.isScrollableX"
+        v-if="isScrollableX"
         aria-hidden="true"
         class="pxd-scrollable--scrollbar-x left-0 right-0 bottom-0 absolute touch-none opacity-(--o) delay-1000 select-none group-hover/scrollable:delay-0 active:opacity-100 motion-safe:transition-opacity"
       >
@@ -287,7 +317,7 @@ defineExpose({
       </div>
 
       <div
-        v-if="scrollInfo.isScrollableY"
+        v-if="isScrollableY"
         aria-hidden="true"
         class="pxd-scrollable--scrollbar-y top-0 right-0 bottom-0 absolute touch-none opacity-(--o) delay-1000 select-none group-hover/scrollable:delay-0 active:opacity-100 motion-safe:transition-opacity"
       >
@@ -301,21 +331,6 @@ defineExpose({
   </div>
 </template>
 
-<style lang="postcss">
-.pxd-scrollable--scrollbar-x {
-  height: calc(var(--scrollbar-size, 6) * 1px);
-}
-
-.pxd-scrollable--scrollbar-y {
-  width: calc(var(--scrollbar-size, 6) * 1px);
-}
-
-.pxd-scrollable--thumb {
-  background-color: var(--scrollbar-color, var(--color-gray-alpha-300));
-
-  &:hover,
-  &:active {
-    background-color: var(--scrollbar-hover-color, var(--color-gray-alpha-500));
-  }
-}
+<style>
+.pxd-scrollable--scrollbar-x{height:calc(var(--scrollbar-size, 6)*1px)}.pxd-scrollable--scrollbar-y{width:calc(var(--scrollbar-size, 6)*1px)}.pxd-scrollable--thumb{background-color:var(--scrollbar-color,var(--color-gray-alpha-300))}.pxd-scrollable--thumb:active,.pxd-scrollable--thumb:hover{background-color:var(--scrollbar-hover-color,var(--color-gray-alpha-500))}
 </style>

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

@@ -1,24 +1,37 @@
+import type { ComponentClass, ComponentDirection, Nullable } from '../../types/shared'
 import type { CSSProperties } from 'vue'
 
-import type { ComponentClass, ComponentDirection } from '../../types/shared'
-
 export interface ScrollableProps {
   fader?: boolean
+  loading?: boolean
+  scrollbar?: boolean
   faderSize?: number
   faderColor?: string
   faderDirection?: ComponentDirection | 'both'
-  scrollbar?: boolean
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
   contentStyle?: CSSProperties | string
   scrollbarSize?: number
   scrollbarColor?: string
   scrollbarHoverColor?: string
-  loading?: boolean
-  endThreshold?: number
+  bottomThreshold?: number
 }
 
 export interface ScrollableEmits {
   scroll: [Event]
-  end: [Event, ComponentDirection]
+  bottom: [ComponentDirection, Event]
+}
+
+export interface ScrollableDragState {
+  isDragging: boolean
+  direction: Nullable<ComponentDirection>
+  startClientPos: number
+  startThumbPos: number
+}
+
+export interface ScrollableCachedPadding {
+  top: number
+  bottom: number
+  left: number
+  right: number
 }

package/dist/components/skeleton/index.vue

@@ -1,7 +1,7 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { getCssUnitValue, increaseWithUnit } from "../../utils/format";
-import { skeletonVariant } from "./cn";
 defineOptions({
   name: "PSkeleton",
   inheritAttrs: false
@@ -14,6 +14,29 @@ const props = defineProps({
   boxHeight: { type: [String, Number], required: false },
   shape: { type: String, required: false, default: "default" }
 });
+const skeletonVariant = tv({
+  base: "pxd-skeleton relative block shrink-0 overflow-hidden",
+  variants: {
+    loading: {
+      true: "loading invisible content-visibility-auto intrinsic-size-auto",
+      false: ""
+    },
+    shape: {
+      default: "rounded-md",
+      square: "rounded-none",
+      rounded: "rounded-full"
+    },
+    animated: {
+      true: "animated after:default-animation-timing-function!",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    loading: true,
+    shape: "default",
+    animated: true
+  }
+});
 const computedStyle = computed(() => {
   const { width, height, boxHeight } = props;
   const styles = {

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

@@ -1,14 +1,14 @@
 import type { SliderProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<SliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: NonNullable<number | [number, number] | null | undefined>) => any;
-    "update:modelValue": (args_0: NonNullable<number | [number, number] | null | undefined>) => any;
+    change: (args_0: NonNullable<number | number[] | null | undefined>) => any;
+    "update:modelValue": (args_0: NonNullable<number | number[] | null | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<SliderProps> & Readonly<{
-    onChange?: ((args_0: NonNullable<number | [number, number] | null | undefined>) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: NonNullable<number | [number, number] | null | undefined>) => any) | undefined;
+    onChange?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
 }>, {
-    variant: import("../../types/shared").ComponentVariant | "secondary";
     max: number;
-    modelValue: number | [number, number] | null;
+    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

@@ -1,11 +1,14 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useModelValue } from "../../composables/use-model-value";
+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";
 defineOptions({
   name: "PSlider",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -44,14 +47,14 @@ const VARIANTS = {
   error: "hsl(var(--color-red-700-value))"
 };
 let isDragging = false;
-let lastClientX;
-let animationFrameId;
+let sliderRect = null;
+let lastClientX = null;
 const configProvider = useConfigProvider();
 const sliderRef = shallowRef();
 const modelValue = useModelValue(props, emits);
 const activeThumb = shallowRef();
 const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
-const valueArray = computed(() => {
+const valueRange = computed(() => {
   if (props.range) {
     return Array.isArray(modelValue.value) ? modelValue.value : [props.min, modelValue.value];
   }
@@ -62,8 +65,8 @@ function getPercentage(value) {
   const range = max - min;
   return Math.max(0, Math.min(100, (value - min) / range * 100));
 }
-const startPercentage = computed(() => getPercentage(valueArray.value[0]));
-const endPercentage = computed(() => getPercentage(valueArray.value[1]));
+const startPercentage = computed(() => getPercentage(valueRange.value[0]));
+const endPercentage = computed(() => getPercentage(valueRange.value[1]));
 const trackStyle = computed(() => {
   const backgroundColor = props.disabled ? "var(--color-gray-alpha-400)" : getFallbackValue(props.variant, VARIANTS, "primary");
   if (props.range) {
@@ -82,7 +85,7 @@ function updateValueFromPosition(clientX) {
   if (!sliderRef.value || !activeThumb.value) {
     return;
   }
-  const rect = sliderRef.value.getBoundingClientRect();
+  const rect = sliderRect ?? sliderRef.value.getBoundingClientRect();
   const posPercentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
   const range = props.max - props.min;
   const rawValue = props.min + posPercentage * range;
@@ -91,7 +94,7 @@ function updateValueFromPosition(clientX) {
     Math.min(props.max, props.step > 0 ? Math.round(rawValue / props.step) * props.step : rawValue)
   );
   if (props.range) {
-    const newValueArray = [...valueArray.value];
+    const newValueArray = [...valueRange.value];
     if (activeThumb.value === "start") {
       newValueArray[0] = newValue;
       if (newValue > newValueArray[1]) {
@@ -107,28 +110,23 @@ function updateValueFromPosition(clientX) {
         activeThumb.value = "start";
       }
     }
-    if (valueArray.value[0] !== newValueArray[0] || valueArray.value[1] !== newValueArray[1]) {
+    if (valueRange.value[0] !== newValueArray[0] || valueRange.value[1] !== newValueArray[1]) {
       modelValue.value = newValueArray;
     }
   } else if (modelValue.value !== newValue) {
     modelValue.value = newValue;
   }
 }
-function scheduleUpdate() {
-  if (animationFrameId) {
-    return;
+const scheduleUpdate = throttleByRaf(() => {
+  if (lastClientX !== null) {
+    updateValueFromPosition(lastClientX);
   }
-  animationFrameId = requestAnimationFrame(() => {
-    animationFrameId = null;
-    if (lastClientX !== null) {
-      updateValueFromPosition(lastClientX);
-    }
-    if (isDragging) {
-      scheduleUpdate();
-    }
-  });
-}
+});
 function startDragging(ev, thumb) {
+  if (!sliderRef.value) {
+    return;
+  }
+  sliderRect = sliderRef.value.getBoundingClientRect();
   isDragging = true;
   activeThumb.value = thumb;
   lastClientX = ev.clientX;
@@ -148,11 +146,9 @@ function handleMove(ev) {
 function endDragging() {
   isDragging = false;
   lastClientX = null;
+  sliderRect = null;
   activeThumb.value = null;
-  if (animationFrameId) {
-    cancelAnimationFrame(animationFrameId);
-    animationFrameId = null;
-  }
+  scheduleUpdate.cancel();
   cachedOff(document, "pointermove", handleMove);
   cachedOff(document, "pointercancel", endDragging);
 }
@@ -184,14 +180,43 @@ function initModelValue() {
   if (props.range && !Array.isArray(modelValue.value)) {
     modelValue.value = [props.min, modelValue.value];
   } else if (!props.range && Array.isArray(modelValue.value)) {
-    modelValue.value = modelValue.value[1];
+    modelValue.value = modelValue.value[1] ?? 0;
+  }
+}
+function onThumbKeydown(ev) {
+  if (props.disabled) {
+    return;
+  }
+  const { code } = ev;
+  const delta = code === "ArrowLeft" ? -props.step : code === "ArrowRight" ? props.step : 0;
+  if (!delta) {
+    return;
+  }
+  ev.preventDefault();
+  const target = ev.target;
+  const isStart = target.dataset.rangeStart === "true";
+  if (props.range) {
+    const [startVal, endVal] = valueRange.value;
+    const newRange = [startVal, endVal];
+    if (isStart) {
+      newRange[0] = Math.max(props.min, Math.min(endVal, startVal + delta));
+    } else {
+      newRange[1] = Math.max(startVal, Math.min(props.max, endVal + delta));
+    }
+    if (newRange[0] !== startVal || newRange[1] !== endVal) {
+      modelValue.value = newRange;
+    }
+  } else {
+    const current = modelValue.value;
+    const newValue = Math.max(props.min, Math.min(props.max, current + delta));
+    if (newValue !== current) {
+      modelValue.value = newValue;
+    }
   }
 }
 initModelValue();
 onBeforeUnmount(() => {
-  if (animationFrameId) {
-    cancelAnimationFrame(animationFrameId);
-  }
+  scheduleUpdate.cancel();
   cachedOff(document, "pointermove", handleMove);
   cachedOff(document, "pointerup", endDragging);
   cachedOff(document, "pointercancel", endDragging);
@@ -200,9 +225,10 @@ onBeforeUnmount(() => {
 
 <template>
   <div
+    v-bind="$attrs"
     ref="sliderRef"
     :role="range ? 'group' : 'slider'"
-    class="pxd-slider group/slider relative flex touch-none items-center rounded-full bg-gray-200 select-none"
+    class="pxd-slider group/slider relative flex w-full max-w-full shrink-0 touch-none items-center rounded-full bg-gray-200 select-none"
     :class="[{ 'cursor-not-allowed': disabled }, computedSize.track]"
     @pointerdown.prevent="onWrapperPointerdown"
   >
@@ -210,27 +236,43 @@ onBeforeUnmount(() => {
 
     <div
       v-if="props.range"
-      class="pxd-slider--thumb rounded-xs absolute -translate-x-1/2 touch-none bg-background-100 hover:scale-130 active:z-1 active:scale-130 motion-safe:transition-transform"
-      :class="[
-  { 'scale-130': activeThumb === 'start', 'pointer-events-none': disabled },
-  computedSize.thumb
-]"
+      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="[{ 'pointer-events-none': disabled }, computedSize.thumb]"
       :style="{ left: `${startPercentage}%` }"
+      @keydown="onThumbKeydown"
+      @contextmenu.prevent="NOOP"
       @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"
+      >
+        {{ valueRange[0] }}
+      </span>
+    </div>
 
     <div
-      class="pxd-slider--thumb rounded-xs absolute -translate-x-1/2 touch-none bg-background-100 hover:scale-130 active:z-1 active:scale-130 motion-safe:transition-transform"
-      :class="[
-  { 'scale-130': activeThumb === 'end', 'pointer-events-none': disabled },
-  computedSize.thumb
-]"
+      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="[{ 'pointer-events-none': disabled }, computedSize.thumb]"
       :style="{ left: `${endPercentage}%` }"
+      @keydown="onThumbKeydown"
+      @contextmenu.prevent="NOOP"
       @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"
+      >
+        {{ valueRange[1] }}
+      </span>
+    </div>
   </div>
 </template>
 
 <style>
-.pxd-slider--thumb{box-shadow:0 0 0 1px var(--color-gray-alpha-500),0 1px 2px var(--color-gray-alpha-100)}.pxd-slider--thumb:after{content:"";height:200%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:200%}.pxd-slider:active .pxd-slider--thumb,.pxd-slider:active .pxd-slider--track{will-change:width,left}
+.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>