@orvui/vue 0.0.0-stage → 0.1.1

package/src/motion/popover/src/geometry.ts

@@ -0,0 +1,94 @@
+export type Side = "top" | "bottom";
+export type Align = "start" | "center" | "end";
+export interface Rect { x: number; y: number; w: number; h: number; r: number }
+export interface Geo {
+  layerW: number; layerH: number; left: number; top: number;
+  trigger: Rect; panel: Rect;
+}
+
+/** Place both surfaces in the bounding box of their union. */
+export function buildGeo(tW: number, tH: number, cW: number, cH: number, side: Side, align: Align, gap: number, panelRadius: number, position?: { x: number; y: number }): Geo {
+  const horizontal = position?.x ?? { start: 0, center: (tW - cW) / 2, end: tW - cW }[align];
+  const vertical = position?.y ?? (side === "top" ? -cH - gap : tH + gap);
+  const left = Math.min(0, horizontal), top = Math.min(0, vertical);
+  const layerW = Math.max(tW, horizontal + cW) - left;
+  const layerH = Math.max(tH, vertical + cH) - top;
+  return {
+    layerW, layerH, left, top,
+    trigger: { x: -left, y: -top, w: tW, h: tH, r: Math.min(tH / 2, panelRadius) },
+    panel: { x: horizontal - left, y: vertical - top, w: cW, h: cH, r: panelRadius },
+  };
+}
+export function positionPopover(
+  trigger: { left: number; top: number; width: number; height: number },
+  content: { width: number; height: number },
+  viewport: { width: number; height: number },
+  options: { side: Side; align: Align; gap: number; radius: number },
+) {
+  const gutter = 12;
+  const free = {
+    top: Math.max(0, trigger.top - options.gap - gutter),
+    bottom: Math.max(0, viewport.height - trigger.top - trigger.height - options.gap - gutter),
+  };
+  const alternative = options.side === "top" ? "bottom" : "top";
+  const side = content.height > free[options.side] && free[alternative] > free[options.side] ? alternative : options.side;
+  const height = Math.min(content.height, free[side]);
+  const preferred = trigger.left + { start: 0, center: (trigger.width - content.width) / 2, end: trigger.width - content.width }[options.align];
+  const left = Math.max(gutter, Math.min(preferred, viewport.width - content.width - gutter));
+  const top = side === "top" ? trigger.top - options.gap - height : trigger.top + trigger.height + options.gap;
+  return {
+    side, availableHeight: free[side],
+    geometry: buildGeo(trigger.width, trigger.height, content.width, height, side, options.align, options.gap, options.radius, { x: left - trigger.left, y: top - trigger.top }),
+  };
+}
+export function rectAtProgress(geo: Geo, progress: number): Rect {
+  const interpolate = (key: keyof Rect) => geo.trigger[key] * (1 - progress) + geo.panel[key] * progress;
+  return { x: interpolate("x"), y: interpolate("y"), w: interpolate("w"), h: interpolate("h"), r: interpolate("r") };
+}
+export function insetFor(rect: Rect, layerW: number, layerH: number) {
+  const edges = [rect.y, layerW - rect.x - rect.w, layerH - rect.y - rect.h, rect.x];
+  return `inset(${edges.map(edge => `${edge}px`).join(" ")} round ${rect.r}px)`;
+}
+function outline(rect: Rect) {
+  const radius = Math.max(0, Math.min(rect.r, rect.w / 2, rect.h / 2));
+  const left = rect.x, top = rect.y, right = rect.x + rect.w, bottom = rect.y + rect.h;
+  const handles = radius * 0.5523;
+  return {
+    radius, start: [left + radius, top],
+    corners: [
+      { line: [right - radius, top], end: [right, top + radius], a: [right - radius + handles, top], b: [right, top + radius - handles] },
+      { line: [right, bottom - radius], end: [right - radius, bottom], a: [right, bottom - radius + handles], b: [right - radius + handles, bottom] },
+      { line: [left + radius, bottom], end: [left, bottom - radius], a: [left + radius - handles, bottom], b: [left, bottom - radius + handles] },
+      { line: [left, top + radius], end: [left + radius, top], a: [left, top + radius - handles], b: [left + radius - handles, top] },
+    ],
+  };
+}
+export function roundedRectShape(rect: Rect) {
+  const shape = outline(rect);
+  const point = (coordinates: number[]) => coordinates.map(coordinate => `${coordinate.toFixed(3)}px`).join(" ");
+  const commands = shape.corners.flatMap(corner => [
+    `line to ${point(corner.line)}`,
+    `curve to ${point(corner.end)} with ${point(corner.a)} / ${point(corner.b)}`,
+  ]);
+  return `shape(from ${point(shape.start)}, ${commands.join(", ")}, close)`;
+}
+export function clipForProgress(geo: Geo, progress: number, supportsShape: boolean) {
+  const surface = rectAtProgress(geo, progress);
+  return supportsShape ? roundedRectShape(surface) : insetFor(surface, geo.layerW, geo.layerH);
+}
+export function roundedRectPath(rect: Rect) {
+  const shape = outline(rect);
+  const point = (coordinates: number[]) => coordinates.map(coordinate => coordinate.toFixed(3)).join(" ");
+  const arc = `A${shape.radius.toFixed(3)} ${shape.radius.toFixed(3)} 0 0 1`;
+  let path = `M${point(shape.start)}`;
+  shape.corners.forEach((corner, index) => {
+    const axis = index % 2 === 0 ? 0 : 1;
+    path += `${axis === 0 ? "H" : "V"}${corner.line[axis]!.toFixed(3)}${arc} ${point(corner.end)}`;
+  });
+  return path + "Z";
+}
+/** An even-odd path leaves the real trigger visible through the goo surface. */
+export function triggerCutout(geo: Geo, padding = 0) {
+  const bounds: Rect = { x: -padding, y: -padding, w: geo.layerW + padding * 2, h: geo.layerH + padding * 2, r: 0 };
+  return `path(evenodd, "${roundedRectPath(bounds)} ${roundedRectPath(geo.trigger)}")`;
+}

package/src/motion/popover/src/morph-focus.ts

@@ -0,0 +1,84 @@
+import { isRef, nextTick, onBeforeUnmount, type Ref } from "vue";
+import { resolveElement } from "../../../lib/composables";
+type Options = {
+  initialFocus?: HTMLElement | Ref<HTMLElement | null> | null;
+  onOpenAutoFocus?: (content: HTMLDivElement) => void;
+};
+export function createMorphFocus(
+  options: Options,
+  allowed: () => boolean,
+  takeIntent: () => boolean,
+) {
+  let epoch = 0;
+  let used = false;
+  let detach: (() => void) | undefined;
+  let disposed = false;
+  function reset() {
+    ++epoch;
+    used = false;
+    detach?.();
+    detach = undefined;
+  }
+  async function focus(panel: HTMLElement | null) {
+    if (used || !panel || !allowed()) return;
+    used = true;
+    if (options.onOpenAutoFocus) {
+      options.onOpenAutoFocus(panel as HTMLDivElement);
+      takeIntent();
+      return;
+    }
+    if (!takeIntent()) return;
+    const version = epoch;
+    await nextTick();
+    if (disposed || version !== epoch || !allowed()) return;
+    const document = panel.ownerDocument;
+    const previous = document.activeElement;
+    const untouched = () =>
+      document.activeElement === previous || document.activeElement === panel;
+    const first = () => {
+      const initial = resolveElement<HTMLElement>(
+        isRef(options.initialFocus)
+          ? options.initialFocus.value
+          : options.initialFocus,
+      );
+      const candidates = [
+        initial,
+        ...panel.querySelectorAll<HTMLElement>(
+          'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])',
+        ),
+      ];
+      for (const candidate of candidates) {
+        candidate?.focus({ preventScroll: true });
+        if (!untouched()) {
+          candidate?.scrollIntoView?.({ block: "nearest" });
+          return true;
+        }
+      }
+      panel.focus({ preventScroll: true });
+      return false;
+    };
+    if (first()) return;
+    const wrapper = panel.parentElement;
+    const cancel = () => {
+      detach?.();
+      detach = undefined;
+    };
+    const retry = (event: TransitionEvent) => {
+      if (event.propertyName === "visibility" && (!untouched() || first()))
+        cancel();
+    };
+    wrapper?.addEventListener("transitionend", retry);
+    document.addEventListener("keydown", cancel, true);
+    document.addEventListener("pointerdown", cancel, true);
+    detach = () => {
+      wrapper?.removeEventListener("transitionend", retry);
+      document.removeEventListener("keydown", cancel, true);
+      document.removeEventListener("pointerdown", cancel, true);
+    };
+  }
+  onBeforeUnmount(() => {
+    disposed = true;
+    reset();
+  });
+  return { focus, reset };
+}

package/src/motion/preview-rail/index.ts

@@ -0,0 +1,5 @@
+export { default as PreviewRail } from "./src/PreviewRail.vue";
+
+export type * from "./src/api-types";
+
+export type * from "./src/public-types";

package/src/motion/preview-rail/src/PreviewRail.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, ref, useId } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT, SPRING_LAYOUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import { useMotionState } from "../../state";
+import { useRailState, type RailEntry } from "./rail-state";
+interface RailItem extends RailEntry {}
+const props = withDefaults(defineProps<{ items: RailItem[]; label?: string; orientation?: "vertical" | "horizontal"; activeId?: string; defaultActiveId?: string; showPreview?: boolean; previewSide?: "before" | "after"; highlightActive?: boolean; itemSize?: number; railClassName?: string; previewContainerClassName?: string; previewClassName?: string }>(), { label: "Section navigation", orientation: "vertical", showPreview: true, previewSide: "after", highlightActive: false, itemSize: 24 });
+const emit = defineEmits<{ "update:activeId": [id: string]; activeChange: [id: string]; itemSelect: [item: RailItem] }>();
+const root = ref<HTMLElement | null>(null);
+const active = useMotionState(props, emit, "activeId", props.defaultActiveId ?? props.items[0]?.id ?? "");
+const state = useRailState(root, props, active, emit);
+const reduced = useReducedMotion();
+const id = useId();
+const horizontal = computed(() => props.orientation === "horizontal");
+const grid = computed(() => { const tracks = props.items.length ? `repeat(${props.items.length}, ${props.itemSize}px)` : undefined; return horizontal.value ? { gridTemplateColumns: tracks } : { gridTemplateRows: tracks }; });
+const dimension = computed(() => horizontal.value ? { width: `${props.itemSize}px` } : { height: `${props.itemSize}px` });
+</script>
+<template>
+  <div ref="root" @focusout="state.blur" :class="cn('isolate relative flex w-full overflow-visible', horizontal ? 'min-h-64 flex-col items-center justify-center' : 'min-h-80')">
+    <nav :aria-label="label" @pointerleave="state.leave" :style="grid" :class="cn('relative z-10 grid shrink-0', horizontal ? 'h-12 w-fit max-w-full self-center justify-center' : 'w-12 content-center', railClassName)">
+      <component :is="item.href ? 'a' : 'button'" v-for="(item, index) in items" :key="item.id" data-slot="preview-rail-item" :type="item.href ? undefined : 'button'" :href="item.href" :target="item.target" :rel="item.rel ?? (item.target === '_blank' ? 'noreferrer noopener' : undefined)" :aria-label="item.ariaLabel ?? item.label" :aria-current="state.selected.value === item.id ? item.href ? 'page' : 'location' : undefined" @pointerenter="state.enter($event, item)" @pointerdown="state.down($event, item)" @pointermove="state.move" @pointercancel="state.cancel" @keydown="state.cancel" @focus="state.focus($event, item)" @click="state.select($event, item)" :style="dimension" :class="cn('relative flex text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', horizontal ? 'h-12 w-6 items-end justify-center' : 'h-6 w-12 items-center')">
+        <motion.span data-slot="preview-rail-tick" aria-hidden="true" :animate="horizontal ? { scaleY: state.scale(index) } : { scaleX: state.scale(index) }" :transition="reduced ? { duration: 0 } : SPRING_LAYOUT" :class="cn('block bg-current', horizontal ? 'h-12 w-0.5 origin-bottom' : 'h-0.5 w-12 origin-left', state.highlighted.value === item.id && 'text-foreground')" />
+      </component>
+    </nav>
+    <div v-if="showPreview" aria-hidden="true" :style="grid" :class="cn('pointer-events-none absolute z-50 grid', horizontal ? 'top-1/2 left-1/2 h-5 w-fit max-w-full -translate-x-1/2 -translate-y-1/2 justify-center' : previewSide === 'before' ? 'inset-y-0 right-16 left-4 content-center' : 'inset-y-0 right-4 left-16 content-center', previewContainerClassName)">
+      <div v-for="item in items" :key="item.id" :style="dimension" :class="cn('relative flex items-center', horizontal && 'justify-center')"><div v-if="item.id === state.preview.value" :class="cn(horizontal ? 'absolute bottom-12 left-1/2 w-72 -translate-x-1/2' : cn('w-full max-w-sm', previewSide === 'before' && 'ml-auto'), previewClassName)">
+        <motion.div :layout-id="`preview-rail-card-${id}`" :transition="reduced ? { duration: 0 } : SPRING_LAYOUT"><AnimatePresence mode="wait" :initial="false"><motion.div :key="item.id" :initial="reduced ? { opacity: 0 } : { opacity: 0, y: 4, filter: 'blur(6px)' }" :animate="reduced ? { opacity: 1 } : { opacity: 1, y: 0, filter: 'blur(0px)' }" :exit="reduced ? { opacity: 0 } : { opacity: 0, y: -2, filter: 'blur(4px)', transition: { duration: .12, ease: EASE_OUT } }" :transition="{ duration: reduced ? 0 : .18, ease: EASE_OUT }"><slot name="preview" :item="item"><div data-slot="preview-rail-card" class="rounded-2xl border border-border bg-card p-4 shadow-sm"><p data-slot="preview-rail-title" class="font-medium text-card-foreground">{{ item.label }}</p><div v-if="item.description" data-slot="preview-rail-description" class="mt-1 text-sm leading-6 text-muted-foreground">{{ item.description }}</div></div></slot></motion.div></AnimatePresence></motion.div>
+      </div></div>
+    </div>
+    <div v-if="$slots.default" class="min-h-0 min-w-0 flex-1"><slot /></div>
+  </div>
+</template>

package/src/motion/preview-rail/src/api-types.ts

@@ -0,0 +1,4 @@
+// Vue public prop types, derived from the actual components.
+export type PreviewRailProps = InstanceType<
+  (typeof import("./PreviewRail.vue"))["default"]
+>["$props"];

package/src/motion/preview-rail/src/public-types.ts

@@ -0,0 +1,2 @@
+import type { PreviewRailProps } from "./api-types";
+export type PreviewRailItem = PreviewRailProps["items"][number];

package/src/motion/preview-rail/src/rail-state.ts

@@ -0,0 +1,26 @@
+import { computed, onBeforeUnmount, onMounted, ref, type Ref } from "vue";
+export interface RailEntry { id: string; label: string; description?: string; href?: string; ariaLabel?: string; target?: "_blank" | "_self" | "_parent" | "_top"; rel?: string }
+export function useRailState(root: Ref<HTMLElement | null>, props: { items: RailEntry[]; highlightActive: boolean }, active: Ref<string>, emit: { (event: "activeChange", value: string): void; (event: "itemSelect", value: RailEntry): void }) {
+  const hovered = ref<string | null>(null);
+  const pinned = ref<string | null>(null);
+  const focused = ref<string | null>(null);
+  const selected = computed(() => props.items.some(item => item.id === active.value) ? active.value : props.items[0]?.id ?? "");
+  const preview = computed(() => hovered.value ?? pinned.value ?? focused.value ?? "");
+  const highlighted = computed(() => preview.value || (props.highlightActive ? selected.value : ""));
+  const index = computed(() => props.items.findIndex(item => item.id === highlighted.value));
+  let pointer: { id: number; kind: string; x: number; y: number; pinned: boolean } | undefined;
+  function down(event: PointerEvent, item: RailEntry) { pointer = { id: event.pointerId, kind: event.pointerType, x: event.clientX, y: event.clientY, pinned: pinned.value === item.id }; focused.value = null; }
+  function move(event: PointerEvent) { if (pointer && Math.hypot(event.clientX - pointer.x, event.clientY - pointer.y) > 10) pointer = undefined; }
+  function cancel() { pointer = undefined; }
+  function focus(event: FocusEvent, item: RailEntry) { if ((event.currentTarget as HTMLElement).matches(":focus-visible")) focused.value = item.id; }
+  function select(event: MouseEvent, item: RailEntry) { const gesture = pointer; cancel(); if (gesture && gesture.kind !== "mouse") { pinned.value = item.id; if (item.href && !gesture.pinned) { event.preventDefault(); return; } } active.value = item.id; emit("activeChange", item.id); emit("itemSelect", item); }
+  function enter(event: PointerEvent, item: RailEntry) { if (event.pointerType !== "touch") hovered.value = item.id; }
+  function leave(event: PointerEvent) { if (event.pointerType !== "touch") hovered.value = null; }
+  function outside(event: PointerEvent) { if (!root.value?.contains(event.target as Node)) pinned.value = null; }
+  function blur(event: FocusEvent) { if (!root.value?.contains(event.relatedTarget as Node)) { focused.value = null; pinned.value = null; } }
+  function scale(at: number) { const distance = index.value < 0 ? Infinity : Math.abs(at - index.value); return [1, .68, .44][distance] ?? .25; }
+  let owner: Document | undefined;
+  onMounted(() => { owner = root.value?.ownerDocument ?? document; owner.addEventListener("pointerdown", outside); });
+  onBeforeUnmount(() => { owner?.removeEventListener("pointerdown", outside); cancel(); });
+  return { selected, preview, highlighted, down, move, cancel, focus, select, enter, leave, blur, scale };
+}

package/src/motion/pull-to-refresh/index.ts

@@ -0,0 +1,5 @@
+export { default as PullToRefresh } from "./src/PullToRefresh.vue";
+
+export type * from "./src/api-types";
+
+export type * from "./src/public-types";

package/src/motion/pull-to-refresh/src/PullToRefresh.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed, ref, type Component, type VNodeChild } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import RenderContent from "../../../lib/RenderContent";
+import RefreshBuddy from "./RefreshBuddy.vue";
+import { usePullState } from "./pull-state";
+const props = withDefaults(defineProps<{ onRefresh?: () => void | Promise<void>; refreshing?: boolean; disabled?: boolean; threshold?: number; maxPull?: number; holdDistance?: number; pullingLabel?: VNodeChild | Component; releaseLabel?: VNodeChild | Component; refreshingLabel?: VNodeChild | Component; ariaLabel?: string; contentClassName?: string; indicatorClassName?: string }>(), { threshold: 76, maxPull: 132, holdDistance: 68, pullingLabel: "Pull to refresh", releaseLabel: "Release to refresh", refreshingLabel: "Refreshing", ariaLabel: "Refreshable content" });
+const emit = defineEmits<{ error: [error: unknown] }>();
+const root = ref<HTMLElement | null>(null);
+const reduce = useReducedMotion();
+const { status, refreshing, y, progress, opacity, scale, amount, down, move, end } = usePullState(root, props, reduce, error => emit("error", error));
+const label = computed(() => status.value === "refreshing" ? props.refreshingLabel : status.value === "ready" ? props.releaseLabel : props.pullingLabel);
+</script>
+<template>
+  <section ref="root" :aria-label="ariaLabel" :aria-busy="refreshing" :data-state="status" :data-disabled="disabled || undefined" @pointerdown="down" @pointermove="move" @pointerup="end" @pointercancel="end" :class="cn('relative w-full overflow-y-auto overscroll-contain bg-background [-webkit-touch-callout:none] pointer-coarse:select-none', status === 'pulling' || status === 'ready' ? 'cursor-grabbing select-none' : 'cursor-grab', (disabled || refreshing) && 'cursor-default')">
+    <motion.div aria-live="polite" aria-atomic="true" :style="reduce ? { opacity } : { opacity, scale }" :class="cn('pointer-events-none absolute inset-x-0 top-0 z-20 flex h-[4.25rem] flex-col items-center justify-center gap-0.5 bg-gradient-to-b from-background via-background/95 to-transparent text-[11px] font-medium text-muted-foreground', indicatorClassName)"><RefreshBuddy :progress="progress" :status="status" :reduce="reduce" /><span class="relative h-4 min-w-24 text-center"><AnimatePresence :initial="false" mode="wait"><motion.span :key="status" :initial="reduce ? { opacity: 0 } : { opacity: 0, y: 3 }" :animate="reduce ? { opacity: 1 } : { opacity: 1, y: 0 }" :exit="reduce ? { opacity: 0 } : { opacity: 0, y: -3 }" :transition="{ duration: .16, ease: EASE_OUT }" class="absolute inset-x-0 whitespace-nowrap"><RenderContent :node="label" /></motion.span></AnimatePresence></span></motion.div>
+    <motion.div :style="reduce ? undefined : { y }" :class="cn('relative z-10 min-h-full bg-inherit will-change-transform', contentClassName)"><slot :status="status" :progress="amount" /></motion.div>
+  </section>
+</template>

package/src/motion/pull-to-refresh/src/RefreshBuddy.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion, useTransform, type MotionValue } from "motion-v";
+import { EASE_IN_OUT, SPRING_SWAP } from "../../../lib/ease";
+const props = defineProps<{ progress: MotionValue<number>; status: string; reduce: boolean }>();
+const y = useTransform(props.progress, [0, 1], [-7, 0]);
+const rotate = useTransform(props.progress, [0, 1], [-10, 0]);
+const scaleY = useTransform(props.progress, [0, .55, 1], [.68, 1.1, .92]);
+const ready = computed(() => props.status === "ready");
+const busy = computed(() => props.status === "refreshing");
+const repeat = computed(() => ({ duration: props.reduce ? 1.2 : .9, ease: EASE_IN_OUT, repeat: Infinity }));
+const body = computed(() => busy.value ? props.reduce ? { opacity: [.55, 1, .55] } : { y: [0, -2, 0], rotate: [-3, 3, -3] } : props.reduce ? { opacity: 1 } : { y: 0, rotate: 0, scale: ready.value ? 1.08 : 1 });
+const orbit = computed(() => busy.value && !props.reduce ? { rotate: [0, 360] } : props.reduce ? undefined : { rotate: ready.value ? 0 : -35 });
+const eyes = computed(() => busy.value && !props.reduce ? { scaleY: [1, 1, .15, 1, 1] } : props.reduce ? { opacity: 1 } : { scaleY: ready.value ? 1.18 : 1 });
+</script>
+<template>
+  <motion.span :style="reduce ? undefined : { y, rotate, scaleY }" class="block h-9 w-9 origin-bottom"><motion.svg aria-hidden="true" viewBox="0 0 36 36" :style="{ opacity: 1 }" class="h-full w-full overflow-visible" :animate="body" :transition="busy ? repeat : SPRING_SWAP">
+    <motion.g :style="{ transformOrigin: '18px 18px' }" :animate="orbit" :transition="busy ? repeat : SPRING_SWAP" :class="['transition-opacity duration-150', ready || busy ? 'opacity-100' : 'opacity-0']"><path d="M18 2.5a15.5 15.5 0 0 1 12.7 6.6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" class="text-muted-foreground" /><circle cx="31.3" cy="10.2" r="2.2" class="fill-foreground" /></motion.g>
+    <rect x="7" y="7" width="22" height="22" rx="9" class="fill-foreground" />
+    <motion.g :style="{ opacity: 1, transformOrigin: '18px 16px' }" :animate="eyes" :transition="busy && !reduce ? repeat : SPRING_SWAP"><circle v-for="x in [14.2, 21.8]" :key="x" :cx="x" cy="16" r="1.45" class="fill-background" /></motion.g>
+    <path v-for="mouth in [{ path: 'M14.5 21h7', show: !ready && !busy }, { path: 'M14 20.5c1 2.4 7 2.4 8 0', show: ready }]" :key="mouth.path" :d="mouth.path" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" :class="['text-background transition-opacity duration-150', mouth.show ? 'opacity-100' : 'opacity-0']" /><circle cx="18" cy="21" r="1.6" :class="['fill-background transition-opacity duration-150', busy ? 'opacity-100' : 'opacity-0']" />
+  </motion.svg></motion.span>
+</template>

package/src/motion/pull-to-refresh/src/api-types.ts

@@ -0,0 +1,4 @@
+// Vue public prop types, derived from the actual components.
+export type PullToRefreshProps = InstanceType<
+  (typeof import("./PullToRefresh.vue"))["default"]
+>["$props"];

package/src/motion/pull-to-refresh/src/public-types.ts

@@ -0,0 +1 @@
+export type PullToRefreshStatus = "idle" | "pulling" | "ready" | "refreshing";

package/src/motion/pull-to-refresh/src/pull-state.ts

@@ -0,0 +1,41 @@
+import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from "vue";
+import { animate, useMotionValue, useTransform } from "motion-v";
+import { SPRING_PANEL } from "../../../lib/ease";
+interface PullOptions { onRefresh?: () => void | Promise<void>; refreshing?: boolean; disabled?: boolean; threshold: number; maxPull: number; holdDistance: number }
+export type PullPhase = "idle" | "pulling" | "ready" | "refreshing";
+export function usePullState(root: Ref<HTMLElement | null>, props: PullOptions, reduced: Ref<boolean>, emitError: (error: unknown) => void) {
+  const pending = ref(false);
+  const status = ref<PullPhase>("idle");
+  const threshold = computed(() => Math.max(24, props.threshold));
+  const limit = computed(() => Math.max(props.maxPull, threshold.value + 24));
+  const rest = computed(() => Math.min(Math.max(0, props.holdDistance), threshold.value));
+  const refreshing = computed(() => props.refreshing || pending.value);
+  const y = useMotionValue(0);
+  const thresholdMotion = useMotionValue(threshold.value);
+  const progress = useTransform(() => Math.max(0, Math.min(1, y.get() / thresholdMotion.get())));
+  const opacity = useTransform(() => { const distance = y.get(); return distance < 10 ? Math.max(0, distance / 10 * .45) : Math.min(1, .45 + (distance - 10) / (thresholdMotion.get() - 10) * .55); });
+  const scale = useTransform(progress, value => .86 + value * .14);
+  const amount = ref(0);
+  const unsubscribe = progress.on("change", value => amount.value = value);
+  let gesture: { x: number; y: number; id: number | null } | undefined;
+  let animation: { stop: () => void } | undefined;
+  let disposed = false;
+  let host: HTMLElement | null = null;
+  watch(threshold, value => thresholdMotion.set(value), { flush: "sync" });
+  function settle(value: number) { animation?.stop(); if (reduced.value) y.set(value); else animation = animate(y, value, SPRING_PANEL); }
+  function releaseCapture() { if (gesture?.id != null && root.value) try { if (root.value.hasPointerCapture(gesture.id)) root.value.releasePointerCapture(gesture.id); } catch {} gesture = undefined; }
+  function pull(distance: number) { if (props.disabled || refreshing.value) return; animation?.stop(); const resisted = limit.value * -Math.expm1(-Math.max(0, distance) / limit.value); y.set(resisted); status.value = resisted >= threshold.value ? "ready" : "pulling"; }
+  async function refresh() { if (props.disabled || refreshing.value) return; pending.value = true; status.value = "refreshing"; settle(rest.value); try { await props.onRefresh?.(); } catch (error) { if (!disposed) emitError(error); } finally { if (!disposed) { pending.value = false; if (!props.refreshing) { status.value = "idle"; settle(0); } } } }
+  function finish() { const accepted = y.get() >= threshold.value && !props.disabled && !refreshing.value; releaseCapture(); if (accepted) void refresh(); else { status.value = "idle"; settle(0); } }
+  function canBegin() { return !!root.value && root.value.scrollTop <= 0 && !props.disabled && !refreshing.value; }
+  function down(event: PointerEvent) { if (event.pointerType === "touch" || event.button !== 0 || !canBegin()) return; gesture = { x: event.clientX, y: event.clientY, id: event.pointerId }; try { root.value!.setPointerCapture(event.pointerId); } catch {} }
+  function move(event: PointerEvent) { if (!gesture || gesture.id !== event.pointerId) return; const dy = event.clientY - gesture.y; if (dy < 0 || Math.abs(event.clientX - gesture.x) > dy) return; event.preventDefault(); pull(dy); }
+  function end(event: PointerEvent) { if (gesture?.id === event.pointerId) finish(); }
+  function touchStart(event: TouchEvent) { if (event.touches.length !== 1 || !canBegin()) return; const touch = event.touches[0]; gesture = { x: touch.clientX, y: touch.clientY, id: null }; }
+  function touchMove(event: TouchEvent) { const touch = event.touches[0]; if (!gesture || !touch) return; const dy = touch.clientY - gesture.y; if ((root.value?.scrollTop ?? 0) > 0 || dy < 0) { gesture = undefined; return; } if (Math.abs(touch.clientX - gesture.x) > dy) return; event.preventDefault(); pull(dy); }
+  function touchEnd() { if (gesture) finish(); }
+  watch([refreshing, rest, reduced], ([busy]) => { if (busy) { status.value = "refreshing"; settle(rest.value); } else if (status.value === "refreshing") { status.value = "idle"; settle(0); } });
+  onMounted(() => { host = root.value; if (refreshing.value) { status.value = "refreshing"; settle(rest.value); } host?.addEventListener("touchstart", touchStart, { passive: true }); host?.addEventListener("touchmove", touchMove, { passive: false }); host?.addEventListener("touchend", touchEnd); host?.addEventListener("touchcancel", touchEnd); });
+  onBeforeUnmount(() => { disposed = true; releaseCapture(); animation?.stop(); unsubscribe(); host?.removeEventListener("touchstart", touchStart); host?.removeEventListener("touchmove", touchMove); host?.removeEventListener("touchend", touchEnd); host?.removeEventListener("touchcancel", touchEnd); });
+  return { status, refreshing, y, progress, opacity, scale, amount, down, move, end };
+}

package/src/motion/radio/index.ts

@@ -0,0 +1,4 @@
+export { default as RadioGroup } from "./src/RadioGroup.vue";
+export { default as RadioGroupItem } from "./src/RadioGroupItem.vue";
+
+export type * from "./src/api-types";

package/src/motion/radio/src/RadioGroup.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, provide, shallowRef, useId } from "vue";
+import { cn } from "../../../lib/utils";
+import { useMotionState } from "../../state";
+import type { RadioContext } from "./context";
+
+const props = withDefaults(defineProps<{
+  modelValue?: string; defaultValue?: string; orientation?: "vertical" | "horizontal"; name?: string;
+}>(), { defaultValue: "", orientation: "vertical" });
+const emit = defineEmits(["update:modelValue", "change"]);
+const selected = useMotionState(props, emit, "modelValue", props.defaultValue);
+const instanceId = useId();
+const registry = shallowRef(new Map<string, boolean>());
+const tabStop = computed(() => {
+  const enabled = [...registry.value].filter(([, disabled]) => !disabled).map(([key]) => key);
+  if (!registry.value.size) return null;
+  return enabled.includes(selected.value) ? selected.value : enabled[0] ?? "";
+});
+const context: RadioContext = {
+  value: selected, id: instanceId, name: computed(() => props.name ?? instanceId), tabStop,
+  register(key, disabled) {
+    if (registry.value.has(key) && registry.value.get(key) === disabled) return;
+    registry.value = new Map([...registry.value, [key, disabled]]);
+  },
+  unregister(key) {
+    const remaining = new Map(registry.value);
+    remaining.delete(key);
+    registry.value = remaining;
+  },
+  setValue(next) { selected.value = next; },
+};
+provide("orvui-radio", context);
+function navigate(event: KeyboardEvent) {
+  if (event.defaultPrevented) return;
+  const root = event.currentTarget as HTMLElement;
+  const controls = [...root.querySelectorAll<HTMLButtonElement>('[role="radio"]')]
+    .filter(control => !control.disabled && control.closest('[role="radiogroup"]') === root);
+  const active = event.target === root ? root.ownerDocument.activeElement : event.target;
+  const index = controls.indexOf(active as HTMLButtonElement);
+  if (index < 0 || !controls.length) return;
+  let destination: number;
+  switch (event.key) {
+    case "Home": destination = 0; break;
+    case "End": destination = controls.length - 1; break;
+    case "ArrowRight": case "ArrowDown": destination = (index + 1) % controls.length; break;
+    case "ArrowLeft": case "ArrowUp": destination = (index + controls.length - 1) % controls.length; break;
+    default: return;
+  }
+  event.preventDefault();
+  controls[destination]!.focus();
+  controls[destination]!.click();
+}
+</script>
+
+<template>
+  <div role="radiogroup" :aria-orientation="orientation" @keydown="navigate"
+    :class="cn('flex gap-3', orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap', $attrs.class)">
+    <slot />
+  </div>
+</template>

package/src/motion/radio/src/RadioGroupItem.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, inject, onBeforeUnmount, onMounted, useId, watch } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { SPRING_LAYOUT, SPRING_PRESS } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import type { RadioContext } from "./context";
+
+const props = defineProps<{ value: string; label?: string; description?: string; disabled?: boolean; id?: string }>();
+const group = inject<RadioContext>("orvui-radio");
+if (!group) throw new Error("RadioGroupItem must be inside RadioGroup");
+const generatedId = useId(), reduced = useReducedMotion();
+const controlId = computed(() => props.id ?? generatedId);
+const selected = computed(() => props.value === group.value.value);
+const labelId = computed(() => props.description && props.label ? `${controlId.value}-label` : undefined);
+const isTabStop = computed(() => !props.disabled && (group.tabStop.value === null || group.tabStop.value === props.value));
+function select(event: MouseEvent) { if (!props.disabled && !event.defaultPrevented) group!.setValue(props.value); }
+onMounted(() => group.register(props.value, !!props.disabled));
+watch(() => [props.value, props.disabled] as const, ([value, disabled], [previous]) => {
+  if (value !== previous) group.unregister(previous);
+  group.register(value, !!disabled);
+});
+onBeforeUnmount(() => group.unregister(props.value));
+</script>
+
+<template>
+  <label :for="controlId" :style="$attrs.style as any"
+    :class="cn('inline-flex gap-3', description ? 'items-start' : 'items-center', disabled ? 'cursor-not-allowed' : 'cursor-pointer', $attrs.class as string)">
+    <motion.button v-bind="{ ...$attrs, class: undefined, style: undefined }" :id="controlId"
+      type="button" role="radio" :aria-checked="selected" :aria-labelledby="labelId"
+      :aria-describedby="[$attrs['aria-describedby'] as string, description ? `${controlId}-description` : undefined].filter(Boolean).join(' ') || undefined"
+      :disabled="disabled" :tabindex="isTabStop ? 0 : -1" :data-state="selected ? 'checked' : 'unchecked'" @click="select"
+      :while-press="reduced || disabled ? undefined : { scale: 0.92 }" :transition="SPRING_PRESS"
+      :class="cn('relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-60', selected ? 'border-primary' : 'border-muted-foreground/65 hover:border-muted-foreground')">
+      <motion.span v-if="selected" :layout-id="group.id" :transition="reduced ? { duration: 0 } : SPRING_LAYOUT"
+        class="absolute inset-1 rounded-full bg-primary" />
+    </motion.button>
+    <input type="radio" :name="group.name.value" :value="value" :checked="selected" :disabled="disabled" hidden />
+    <span v-if="label || description" :class="cn('flex min-w-0 flex-col gap-0.5 select-none', disabled && 'opacity-60')">
+      <span v-if="label" :id="labelId" :class="cn('text-sm text-foreground', description && 'leading-4')">{{ label }}</span>
+      <span v-if="description" :id="controlId + '-description'" class="text-xs text-muted-foreground">{{ description }}</span>
+    </span>
+  </label>
+</template>

package/src/motion/radio/src/api-types.ts

@@ -0,0 +1,7 @@
+// Vue public prop types, derived from the actual components.
+export type RadioGroupItemProps = InstanceType<
+  (typeof import("./RadioGroupItem.vue"))["default"]
+>["$props"];
+export type RadioGroupProps = InstanceType<
+  (typeof import("./RadioGroup.vue"))["default"]
+>["$props"];

package/src/motion/radio/src/context.ts

@@ -0,0 +1,10 @@
+import type { ComputedRef, WritableComputedRef } from "vue";
+export interface RadioContext {
+  value: WritableComputedRef<string>;
+  id: string;
+  name: ComputedRef<string>;
+  tabStop: ComputedRef<string | null>;
+  register(value: string, disabled: boolean): void;
+  unregister(value: string): void;
+  setValue(value: string): void;
+}

package/src/motion/range-slider/index.ts

@@ -0,0 +1,9 @@
+export { default as RangeSlider } from "./src/RangeSlider.vue";
+
+export { default as WaveSlider } from "./src/WaveSlider.vue";
+export { default as FluidSlider } from "./src/FluidSlider.vue";
+export { default as BubbleSlider } from "./src/BubbleSlider.vue";
+export { default as RulerSlider } from "./src/RulerSlider.vue";
+export { default as InlineSlider } from "./src/InlineSlider.vue";
+
+export type * from "./src/api-types";

package/src/motion/range-slider/src/BubbleSlider.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { AnimatePresence, motion, useSpring, useTransform, useVelocity } from "motion-v";
+import { useReducedMotion } from "../../../lib/composables";
+import { SPRING_PRESS, SPRING_PANEL } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { useSlider, type SliderOptions } from "./useSlider";
+import { useSliderMotion } from "./visual-state";
+const props = defineProps<SliderOptions & { format?: (v: number) => string }>();
+const emit = defineEmits(["update:modelValue", "change", "valueCommit"]);
+const { current, percent, dragging, trackRef, sliderRef, trackProps, sliderProps } = useSlider(props, emit);
+const reduced = useReducedMotion();
+const { spring, position } = useSliderMotion(percent, reduced);
+const left = useTransform(position, value => `${value}%`);
+const speed = useVelocity(spring);
+const lean = useSpring(useTransform(speed, [-320, 0, 320], [1, 0, -1], { clamp: true }), { stiffness: 260, damping: 22, mass: .4 });
+const rotate = useTransform(lean, value => value * 16);
+const scaleX = useTransform(lean, value => 1 + Math.abs(value) * .18);
+const scaleY = useTransform(lean, value => 1 - Math.abs(value) * .12);
+</script>
+<template><div :class="cn('relative flex h-20 w-full items-end px-5 pb-5', disabled && 'pointer-events-none opacity-50')"><div ref="trackRef" v-bind="trackProps" class="relative h-2 w-full touch-none rounded-full bg-muted cursor-grab active:cursor-grabbing"><motion.div class="absolute inset-y-0 left-0 rounded-full bg-foreground" :style="{ width: left }" /><motion.div class="absolute top-1/2 size-5 rounded-full border-2 border-foreground bg-background shadow-sm" :style="{ left, x: '-50%', y: '-50%' }" :animate="reduced ? undefined : { scale: dragging ? 1.25 : 1 }" :transition="SPRING_PRESS" /><motion.div class="pointer-events-none absolute bottom-6" :style="{ left, x: '-50%' }"><AnimatePresence><motion.div v-if="dragging" :initial="reduced ? { opacity: 0 } : { opacity: 0, scale: .4, y: 10 }" :animate="{ opacity: 1, scale: 1, y: 0 }" :exit="reduced ? { opacity: 0 } : { opacity: 0, scale: .5, y: 8 }" :transition="reduced ? { duration: .12 } : SPRING_PANEL" :style="reduced ? undefined : { rotate, scaleX, scaleY, originY: 1 }" class="relative rounded-xl bg-foreground px-2.5 py-1 text-sm font-medium tabular-nums text-background shadow-md">{{ format ? format(current) : current }}<span class="absolute -bottom-1 left-1/2 size-2.5 -translate-x-1/2 rotate-45 rounded-[3px] bg-foreground" /></motion.div></AnimatePresence></motion.div><button ref="sliderRef" type="button" v-bind="sliderProps" class="absolute -inset-y-5 inset-x-0 touch-none rounded-full outline-none ring-foreground/30 focus-visible:ring-4" /></div></div></template>

package/src/motion/range-slider/src/FluidSlider.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { motion, useTransform } from "motion-v";
+import { useReducedMotion } from "../../../lib/composables";
+import { SPRING_PRESS } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { useSlider, type SliderOptions } from "./useSlider";
+import { useSliderMotion } from "./visual-state";
+const props = withDefaults(defineProps<SliderOptions & { label?: string; format?: (v: number) => string }>(), { format: (v: number) => `${v}%` });
+const emit = defineEmits(["update:modelValue", "change", "valueCommit"]);
+const { current, percent, dragging, trackRef, sliderRef, trackProps, sliderProps } = useSlider(props, emit);
+const reduced = useReducedMotion();
+const { position } = useSliderMotion(percent, reduced);
+const clip = useTransform(position, value => `inset(0 ${100 - value}% 0 0 round 9999px)`);
+</script>
+<template><div ref="trackRef" v-bind="trackProps" :class="cn('relative flex h-12 w-full touch-none overflow-hidden rounded-full bg-muted select-none', disabled ? 'pointer-events-none opacity-50' : 'cursor-grab active:cursor-grabbing')"><motion.div :animate="reduced ? undefined : { scale: dragging ? 1.03 : 1 }" :transition="SPRING_PRESS" class="absolute inset-0"><div class="pointer-events-none absolute inset-0 flex items-center justify-between px-5 text-sm font-medium text-foreground"><span class="truncate">{{ label }}</span><span class="tabular-nums">{{ format(current) }}</span></div><motion.div class="absolute inset-0" :style="{ clipPath: clip }"><div class="absolute inset-0 bg-foreground" /><div class="pointer-events-none absolute inset-0 flex items-center justify-between px-5 text-sm font-medium text-background"><span class="truncate">{{ label }}</span><span class="tabular-nums">{{ format(current) }}</span></div></motion.div></motion.div><button ref="sliderRef" type="button" v-bind="sliderProps" class="absolute inset-0 touch-none rounded-full outline-none ring-inset ring-foreground/40 focus-visible:ring-4" /></div></template>

package/src/motion/range-slider/src/InlineSlider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { motion } from "motion-v";
+import { useReducedMotion } from "../../../lib/composables";
+import { cn } from "../../../lib/utils";
+import type { SliderOptions } from "./useSlider";
+import { useInlineSlider } from "./inline-state";
+const props = withDefaults(defineProps<SliderOptions & { label: string; format?: (v: number) => string; showTicks?: boolean }>(), { format: String, showTicks: true });
+const emit = defineEmits(["update:modelValue", "change", "valueCommit"]);
+const reduced = useReducedMotion();
+const { current, trackRef, sliderRef, sliderProps, labelRef, readoutRef, dragging, handleX, fillX, stemOpacity, capTop, capBottom, ticks, down, move, end, key } = useInlineSlider(props, emit, reduced);
+</script>
+<template><div ref="trackRef" @pointerdown="down" @pointermove="move" @pointerup="end" @pointercancel="end" @lostpointercapture="end" :class="cn('relative h-10 w-full touch-none select-none overflow-hidden rounded-lg bg-muted', disabled ? 'pointer-events-none opacity-50' : 'cursor-grab active:cursor-grabbing')"><div aria-hidden="true" class="pointer-events-none absolute inset-x-[2px] inset-y-0 overflow-hidden rounded-lg"><motion.div class="absolute inset-0 rounded-lg bg-foreground/15" :style="{ x: fillX }" /></div><div aria-hidden="true" class="pointer-events-none absolute inset-0 text-foreground"><span ref="labelRef" class="absolute left-5 top-1/2 max-w-[40%] -translate-y-1/2 truncate text-sm font-medium leading-5">{{ label }}</span><span ref="readoutRef" class="absolute right-5 top-1/2 max-w-[40%] -translate-y-1/2 truncate text-[13px] font-semibold leading-[18px] tracking-tight tabular-nums">{{ format(current) }}</span><span v-for="left in ticks" :key="left" class="absolute top-1/2 size-1 -translate-y-1/2 rounded-full bg-foreground/25" :style="{ left: `${left}px` }" /></div><motion.div aria-hidden="true" :animate="reduced ? undefined : { scaleY: dragging ? 1.35 : 1 }" :transition="{ type: 'spring', stiffness: 500, damping: 14, mass: .7 }" class="pointer-events-none absolute left-0 top-2 h-6 w-1 text-foreground" :style="{ x: handleX }"><motion.span class="absolute top-0 size-1 rounded-full bg-current" :style="{ y: reduced ? 0 : capTop }" /><motion.span class="absolute inset-y-0 w-1 rounded-full bg-current" :style="{ opacity: stemOpacity }" /><motion.span class="absolute bottom-0 size-1 rounded-full bg-current" :style="{ y: reduced ? 0 : capBottom }" /></motion.div><button ref="sliderRef" type="button" v-bind="{ ...sliderProps, onKeydown: undefined, 'aria-label': ariaLabel ?? label, 'aria-valuetext': formatValueText?.(current) ?? format(current) }" @keydown="key" class="absolute inset-0 cursor-inherit touch-none rounded-lg border-0 outline-none" /></div></template>

package/src/motion/range-slider/src/RangeSlider.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion, useMotionValue, useTransform } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion, resolveElement } from "../../../lib/composables";
+import { useSlider, type SliderOptions } from "./useSlider";
+import { useSliderMotion, observeSliderGeometry } from "./visual-state";
+const props = withDefaults(defineProps<SliderOptions & { showTicks?: boolean; name?: string }>(), { showTicks: true });
+const emit = defineEmits(["update:modelValue", "change", "valueCommit"]);
+const slider = useSlider(props, emit);
+const reduced = useReducedMotion();
+const { position } = useSliderMotion(slider.percent, reduced);
+const width = useMotionValue(292);
+const thumbX = useTransform(() => 8 + Math.max(0, width.get() - 20) * position.get() / 100);
+const fillX = useTransform(position, value => value >= 100 ? "0%" : `calc(${value - 100}% + ${14 - .16 * value}px)`);
+const ticks = computed(() => { const intervals = Math.floor(Number(((slider.max.value - slider.min.value) / slider.step.value).toFixed(6))); return props.showTicks && intervals > 0 && intervals <= 50 ? Array.from({ length: intervals + 1 }, (_, index) => Number((slider.min.value + index * slider.step.value).toFixed(6))) : []; });
+observeSliderGeometry(() => [slider.trackRef.value], () => { const measured = slider.trackRef.value?.getBoundingClientRect().width; if (measured && measured > 0) width.set(measured); });
+</script>
+<template><div :ref="element => slider.trackRef.value = resolveElement<HTMLElement>(element)" v-bind="slider.trackProps" :class="cn('relative flex h-10 w-full touch-none items-center overflow-hidden rounded-lg bg-muted select-none [-webkit-touch-callout:none]', disabled ? 'pointer-events-none opacity-50' : 'cursor-grab active:cursor-grabbing')"><div aria-hidden="true" class="pointer-events-none absolute inset-x-[2px] inset-y-0 overflow-hidden rounded-lg"><motion.div class="absolute inset-0 rounded-lg bg-foreground/15" :style="{ x: fillX }" /></div><div class="pointer-events-none absolute inset-x-[10px] inset-y-0"><span v-for="tick in ticks" :key="tick" class="absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/35" :style="{ left: `${(tick - slider.min.value) / (slider.max.value - slider.min.value) * 100}%` }" /></div><motion.div :ref="element => slider.sliderRef.value = resolveElement<HTMLElement>(element)" v-bind="slider.sliderProps.value" :animate="reduced ? undefined : { scaleY: slider.dragging.value ? 1.35 : 1 }" :transition="{ type: 'spring', stiffness: 500, damping: 14, mass: .7 }" class="absolute left-0 top-1/2 h-6 w-1 rounded-full bg-foreground outline-none ring-inset ring-foreground/30 focus-visible:ring-4" :style="{ x: thumbX, y: '-50%' }" /><input v-if="name" type="hidden" :name="name" :value="slider.current.value" :disabled="disabled" /></div></template>