origam 0.3.9 → 2.2.1

package/dist/src/composables/DataTable/select.composable.d.ts

@@ -1,7 +1,13 @@
 import type { IDataTableProvideSelection, IDataTableSelectableItem, IDataTableSelectProps } from '../../interfaces';
 import { Ref } from 'vue';
+/*********************************************************
+ * provideSelection
+ ********************************************************/
 export declare function provideSelection(props: IDataTableSelectProps, { allItems, currentPage }: {
     allItems: Ref<Array<IDataTableSelectableItem>>;
     currentPage: Ref<Array<IDataTableSelectableItem>>;
 }): IDataTableProvideSelection;
+/*********************************************************
+ * useSelection
+ ********************************************************/
 export declare function useSelection(): IDataTableProvideSelection;

package/dist/src/composables/DataTable/sort.composable.d.ts

@@ -1,22 +1,34 @@
 import type { IDataTableProvideSort, IDataTableSortItem, IDataTableSortProps, IInternalDataTableHeader, IInternalItem } from '../../interfaces';
 import type { TDataTableCompareFunction } from '../../types';
 import { Ref } from 'vue';
+/*********************************************************
+ * createSort
+ ********************************************************/
 export declare function createSort(props: IDataTableSortProps): {
     sortBy: import("../../types").TVModel<IDataTableSortProps, "sortBy", IDataTableSortItem[] | undefined>;
     mustSort: Ref<boolean | undefined, boolean | undefined>;
     multiSort: Ref<boolean | undefined, boolean | undefined>;
 };
+/*********************************************************
+ * provideSort
+ ********************************************************/
 export declare function provideSort(options: {
     sortBy: Ref<Array<IDataTableSortItem>>;
     mustSort: Ref<boolean>;
     multiSort: Ref<boolean>;
     page?: Ref<number>;
 }): IDataTableProvideSort;
+/*********************************************************
+ * useSort
+ ********************************************************/
 export declare function useSort(): {
     sortBy: Ref<Array<IDataTableSortItem>>;
     toggleSort: (column: IInternalDataTableHeader) => void;
     isSorted: (column: IInternalDataTableHeader) => boolean;
 };
+/*********************************************************
+ * useSortedItems
+ ********************************************************/
 export declare function useSortedItems<T extends IInternalItem>(props: {
     customKeySort: TDataTableCompareFunction | undefined;
 }, items: Ref<T[]>, sortBy: Ref<Array<IDataTableSortItem>>, options?: {

package/dist/src/composables/Form/form.composable.d.ts

@@ -1,4 +1,7 @@
 import type { IFormField, IFormProps, IValidationFieldResult } from '../../interfaces';
+/*********************************************************
+ * useForm
+ ********************************************************/
 export declare function useForm(props: IFormProps): {
     errors: import("vue").Ref<{
         id: number | string;

package/dist/src/composables/Icon/icon.composable.cjs

@@ -36,6 +36,12 @@ const useIcon = props => {
         icon
       };
     }
+    if (/^[MmLlHhVvCcSsQqTtAaZz][\s\d,.-]/.test(icon)) {
+      return {
+        component: _components.OrigamSvgIcon,
+        icon
+      };
+    }
     const iconSetName = Object.keys(icons.sets).find(setName => typeof icon === "string" && icon.startsWith(`${setName}:`));
     const iconName = iconSetName ? icon.slice(iconSetName.length + 1) : icon;
     const iconSet = icons.sets[iconSetName ?? icons.defaultSet];

package/dist/src/composables/Icon/icon.composable.d.ts

@@ -3,4 +3,7 @@ import type { TIcon, TIconInstance, TIconOptions } from '../../types';
 export declare const useIcon: (props: Ref<TIcon | undefined>) => {
     iconData: import("vue").ComputedRef<TIconInstance>;
 };
+/*********************************************************
+ * createIcons
+ ********************************************************/
 export declare function createIcons(options?: TIconOptions): Record<string, unknown>;

package/dist/src/composables/Icon/icon.composable.js

@@ -27,6 +27,12 @@ export const useIcon = (props) => {
         icon
       };
     }
+    if (/^[MmLlHhVvCcSsQqTtAaZz][\s\d,.-]/.test(icon)) {
+      return {
+        component: OrigamSvgIcon,
+        icon
+      };
+    }
     const iconSetName = Object.keys(icons.sets).find(
       (setName) => typeof icon === "string" && icon.startsWith(`${setName}:`)
     );

package/dist/src/composables/List/list.composable.d.ts

@@ -1,10 +1,16 @@
 import { ComputedRef } from 'vue';
+/*********************************************************
+ * useCreateList
+ ********************************************************/
 export declare function useCreateList(): {
     hasPrepend: import("vue").Ref<boolean>;
     updateHasPrepend: (value: ComputedRef<boolean>) => void;
     hasAppend: import("vue").Ref<boolean>;
     updateHasAppend: (value: ComputedRef<boolean>) => void;
 };
+/*********************************************************
+ * useList
+ ********************************************************/
 export declare function useList(): {
     hasPrepend: import("vue").Ref<boolean>;
     updateHasPrepend: (value: ComputedRef<boolean>) => void;

package/dist/src/composables/NumberField/hold.composable.d.ts

@@ -1,3 +1,6 @@
+/*********************************************************
+ * useHold
+ ********************************************************/
 export declare function useHold({ toggleUpDown }: {
     toggleUpDown: (increment: boolean) => void;
 }, holdRepeat?: number, holdDelay?: number): {

package/dist/src/composables/Parallax/transform.composable.d.ts

@@ -1,4 +1,7 @@
 import type { IParallaxElementProps } from '../../interfaces';
+/*********************************************************
+ * useParallaxTransform
+ ********************************************************/
 export declare function useParallaxTransform(props: IParallaxElementProps): {
     transformStyles: (x: number, y: number) => any;
     strength: import("vue").ComputedRef<number>;

package/dist/src/composables/PasswordField/passwordStrength.composable.cjs

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DEFAULT_PASSWORD_REQUIREMENTS", {
+  enumerable: true,
+  get: function () {
+    return _consts.DEFAULT_PASSWORD_REQUIREMENTS;
+  }
+});
+exports.computeStrength = computeStrength;
+var _consts = require("../../consts/index.cjs");
+function computeStrength(value) {
+  const v = (value ?? "").toString();
+  if (v.length === 0) {
+    return {
+      score: 0,
+      level: "weak"
+    };
+  }
+  let raw = 0;
+  if (v.length >= 8) raw += 1;
+  if (v.length >= 12) raw += 1;
+  if (/\d/.test(v)) raw += 1;
+  if (/[a-z]/.test(v) && /[A-Z]/.test(v)) raw += 1;
+  if (/[^A-Za-z0-9]/.test(v)) raw += 1;
+  const score = raw > 4 ? 4 : raw;
+  let level;
+  if (score <= 1) level = "weak";else if (score === 2) level = "fair";else if (score === 3) level = "good";else level = "strong";
+  return {
+    score,
+    level
+  };
+}

package/dist/src/composables/PasswordField/passwordStrength.composable.d.ts

@@ -0,0 +1,34 @@
+/**
+ * `passwordStrength.composable.ts`
+ *
+ * Pure-function helper used by `<OrigamPasswordField>` to compute a
+ * 0..4 strength score from a password value, plus a default rule set
+ * for the inline checklist mode.
+ *
+ * Heuristic (deliberately simple — no third-party `zxcvbn` dependency):
+ *   +1 length ≥ 8
+ *   +1 length ≥ 12
+ *   +1 contains a digit
+ *   +1 contains an uppercase letter AND a lowercase letter
+ *   +1 contains a non-alphanumeric character
+ * Then clamped to 0..4 and mapped to a discrete level:
+ *   0       → weak (empty / very short)
+ *   1       → weak
+ *   2       → fair
+ *   3       → good
+ *   4 / 5+  → strong
+ *
+ * Why score *and* level: the score drives how many of the 4 segments
+ * fill, the level drives the colour token (`--origam-password-field
+ * __strength---bg-{level}`).
+ */
+import type { IPasswordStrength } from '../../interfaces';
+/**
+ * Compute the strength of a password string. Pure — no side effects,
+ * safe to call inside a `computed()` block.
+ */
+/*********************************************************
+ * computeStrength
+ ********************************************************/
+export declare function computeStrength(value: string | null | undefined): IPasswordStrength;
+export { DEFAULT_PASSWORD_REQUIREMENTS } from '../../consts';

package/dist/src/composables/PasswordField/passwordStrength.composable.js

@@ -0,0 +1,20 @@
+export function computeStrength(value) {
+  const v = (value ?? "").toString();
+  if (v.length === 0) {
+    return { score: 0, level: "weak" };
+  }
+  let raw = 0;
+  if (v.length >= 8) raw += 1;
+  if (v.length >= 12) raw += 1;
+  if (/\d/.test(v)) raw += 1;
+  if (/[a-z]/.test(v) && /[A-Z]/.test(v)) raw += 1;
+  if (/[^A-Za-z0-9]/.test(v)) raw += 1;
+  const score = raw > 4 ? 4 : raw;
+  let level;
+  if (score <= 1) level = "weak";
+  else if (score === 2) level = "fair";
+  else if (score === 3) level = "good";
+  else level = "strong";
+  return { score, level };
+}
+export { DEFAULT_PASSWORD_REQUIREMENTS } from "../../consts/index.js";

package/dist/src/composables/Progress/progress.composable.d.ts

@@ -1,4 +1,7 @@
 import type { IProgressTypeProps } from '../../interfaces';
+/*********************************************************
+ * useProgress
+ ********************************************************/
 export declare function useProgress(props: IProgressTypeProps): {
     progressClasses: import("vue").ComputedRef<(string | string[] | {
         'origam-progress--indeterminate': boolean | undefined;

package/dist/src/composables/Responsive/aspect.composable.d.ts

@@ -1,3 +1,6 @@
+/*********************************************************
+ * useAspectRatio
+ ********************************************************/
 export declare function useAspectRatio(props: {
     aspectRatio?: string | number;
 }): {

package/dist/src/composables/Sheet/sheetSwipe.composable.cjs

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DEFAULT_SHEET_SNAP_POINTS", {
+  enumerable: true,
+  get: function () {
+    return _consts.DEFAULT_SHEET_SNAP_POINTS;
+  }
+});
+exports.useSheetSwipe = useSheetSwipe;
+var _vue = require("vue");
+var _consts = require("../../consts/index.cjs");
+const FAST_FLICK_THRESHOLD = 0.5;
+function resolveHeightPx(height) {
+  if (typeof height === "number") return height;
+  if (typeof window === "undefined") return 0;
+  const value = String(height).trim();
+  const match = value.match(/^([\d.]+)(px|vh|vw|%|rem|em)?$/i);
+  if (!match) return 0;
+  const num = parseFloat(match[1]);
+  const unit = (match[2] ?? "px").toLowerCase();
+  switch (unit) {
+    case "px":
+      return num;
+    // For a bottom-sheet, `vh`, `%` and `vw` all map to viewport
+    // height — `%` is the conventional shorthand designers reach for
+    // even though strictly speaking a percentage on `height` resolves
+    // against the parent. We expose `vh` as the canonical unit and
+    // treat % the same way; documented in the prop's TSDoc.
+    case "vh":
+    case "%":
+      return window.innerHeight * num / 100;
+    case "vw":
+      return window.innerWidth * num / 100;
+    case "rem":
+    case "em":
+      {
+        const root = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+        return num * root;
+      }
+    default:
+      return num;
+  }
+}
+function useSheetSwipe(options) {
+  const {
+    el,
+    handle,
+    snapPoints,
+    defaultSnap,
+    disabled,
+    persistent
+  } = options;
+  const sortedSnaps = (0, _vue.computed)(() => {
+    const src = snapPoints?.value ?? _consts.DEFAULT_SHEET_SNAP_POINTS;
+    return [...src].sort((a, b) => resolveHeightPx(a.height) - resolveHeightPx(b.height));
+  });
+  const currentSnap = (0, _vue.ref)(defaultSnap?.value ?? "half");
+  const currentSnapHeight = (0, _vue.computed)(() => {
+    const snap = sortedSnaps.value.find(s => s.id === currentSnap.value) ?? sortedSnaps.value[Math.floor(sortedSnaps.value.length / 2)];
+    return resolveHeightPx(snap?.height ?? 0);
+  });
+  const dragOffset = (0, _vue.shallowRef)(0);
+  const isDragging = (0, _vue.shallowRef)(false);
+  (0, _vue.watch)(() => defaultSnap?.value, next => {
+    if (next && next !== currentSnap.value) currentSnap.value = next;
+  });
+  let startY = 0;
+  let startTime = 0;
+  let baselineHeight = 0;
+  let activePointer = null;
+  function resolveSnap(delta, velocity) {
+    const snaps = sortedSnaps.value;
+    if (snaps.length === 0) return currentSnap.value;
+    const currentIdx = Math.max(0, snaps.findIndex(s => s.id === currentSnap.value));
+    const goingUp = velocity > 0;
+    const goingDown = velocity < 0;
+    const speed = Math.abs(velocity);
+    if (speed >= FAST_FLICK_THRESHOLD) {
+      const nextIdx = goingUp ? Math.min(snaps.length - 1, currentIdx + 1) : goingDown ? Math.max(0, currentIdx - 1) : currentIdx;
+      const candidate = snaps[nextIdx];
+      return enforcePersistent(candidate.id, snaps);
+    }
+    const projectedHeight = baselineHeight + delta;
+    let bestId = snaps[0].id;
+    let bestDist = Number.POSITIVE_INFINITY;
+    for (const s of snaps) {
+      const dist = Math.abs(resolveHeightPx(s.height) - projectedHeight);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestId = s.id;
+      }
+    }
+    return enforcePersistent(bestId, snaps);
+  }
+  function enforcePersistent(candidate, snaps) {
+    if (!persistent?.value) return candidate;
+    if (candidate !== "closed") return candidate;
+    const fallback = snaps.find(s => s.id !== "closed" && resolveHeightPx(s.height) > 0);
+    return fallback ? fallback.id : candidate;
+  }
+  function snapTo(id) {
+    const snaps = sortedSnaps.value;
+    const target = enforcePersistent(id, snaps);
+    if (snaps.some(s => s.id === target)) {
+      currentSnap.value = target;
+      dragOffset.value = 0;
+    }
+  }
+  function dismiss() {
+    snapTo("closed");
+  }
+  function onPointerDown(e) {
+    if (disabled?.value) return;
+    const target = handle.value;
+    if (!target) return;
+    activePointer = e.pointerId;
+    startY = e.clientY;
+    startTime = e.timeStamp;
+    baselineHeight = currentSnapHeight.value;
+    dragOffset.value = 0;
+    isDragging.value = true;
+    try {
+      target.setPointerCapture(e.pointerId);
+    } catch {}
+  }
+  function onPointerMove(e) {
+    if (!isDragging.value || activePointer !== e.pointerId) return;
+    if (e.cancelable) e.preventDefault();
+    const delta = startY - e.clientY;
+    dragOffset.value = delta;
+  }
+  function onPointerUp(e) {
+    if (!isDragging.value || activePointer !== e.pointerId) return;
+    const delta = startY - e.clientY;
+    const dt = Math.max(1, e.timeStamp - startTime);
+    const velocity = delta / dt;
+    try {
+      handle.value?.releasePointerCapture(e.pointerId);
+    } catch {}
+    const next = resolveSnap(delta, velocity);
+    currentSnap.value = next;
+    dragOffset.value = 0;
+    isDragging.value = false;
+    activePointer = null;
+  }
+  function onPointerCancel() {
+    dragOffset.value = 0;
+    isDragging.value = false;
+    activePointer = null;
+  }
+  function bind() {
+    const target = handle.value;
+    if (!target) return;
+    target.addEventListener("pointerdown", onPointerDown, {
+      passive: false
+    });
+    target.addEventListener("pointermove", onPointerMove, {
+      passive: false
+    });
+    target.addEventListener("pointerup", onPointerUp, {
+      passive: false
+    });
+    target.addEventListener("pointercancel", onPointerCancel, {
+      passive: false
+    });
+    target.addEventListener("pointerleave", onPointerCancel, {
+      passive: false
+    });
+  }
+  function unbind() {
+    const target = handle.value;
+    if (!target) return;
+    target.removeEventListener("pointerdown", onPointerDown);
+    target.removeEventListener("pointermove", onPointerMove);
+    target.removeEventListener("pointerup", onPointerUp);
+    target.removeEventListener("pointercancel", onPointerCancel);
+    target.removeEventListener("pointerleave", onPointerCancel);
+  }
+  (0, _vue.onMounted)(() => {
+    bind();
+  });
+  (0, _vue.watch)(handle, (next, prev) => {
+    if (prev) {
+      prev.removeEventListener("pointerdown", onPointerDown);
+      prev.removeEventListener("pointermove", onPointerMove);
+      prev.removeEventListener("pointerup", onPointerUp);
+      prev.removeEventListener("pointercancel", onPointerCancel);
+      prev.removeEventListener("pointerleave", onPointerCancel);
+    }
+    if (next) bind();
+  });
+  (0, _vue.onBeforeUnmount)(() => {
+    unbind();
+  });
+  void el;
+  return {
+    currentSnap,
+    dragOffset,
+    isDragging,
+    snapTo,
+    dismiss,
+    currentSnapHeight
+  };
+}

package/dist/src/composables/Sheet/sheetSwipe.composable.d.ts

@@ -0,0 +1,26 @@
+import type { ISheetSwipeOptions, ISheetSwipeReturn } from '../../interfaces';
+export { DEFAULT_SHEET_SNAP_POINTS } from '../../consts';
+/**
+ * Bottom-sheet swipe gesture composable.
+ *
+ * Encapsulates pointerdown → pointermove → pointerup tracking, exposes
+ * a reactive `currentSnap` plus live drag offset, and snaps to the
+ * nearest point on release using either velocity (fast flick) or
+ * absolute distance (slow drag). Pointer events cover both mouse and
+ * touch, so the same code path drives the desktop story and the mobile
+ * device.
+ *
+ * Contract:
+ * - Only the **handle** receives pointer events. The rest of the sheet
+ *   stays interactive (lists scroll, buttons click) — exactly like the
+ *   Material 3 / iOS sheet patterns.
+ * - During a drag we set `transition: none` via the `isDragging` flag so
+ *   the user sees 1:1 finger tracking. On release we restore the
+ *   transition and animate to the resolved snap.
+ * - `persistent` blocks the `closed` snap; the gesture falls back to
+ *   the next-lowest snap point.
+ */
+/*********************************************************
+ * useSheetSwipe
+ ********************************************************/
+export declare function useSheetSwipe(options: ISheetSwipeOptions): ISheetSwipeReturn;

package/dist/src/composables/Sheet/sheetSwipe.composable.js

@@ -0,0 +1,194 @@
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  watch
+} from "vue";
+import { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/index.js";
+export { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/index.js";
+const FAST_FLICK_THRESHOLD = 0.5;
+function resolveHeightPx(height) {
+  if (typeof height === "number") return height;
+  if (typeof window === "undefined") return 0;
+  const value = String(height).trim();
+  const match = value.match(/^([\d.]+)(px|vh|vw|%|rem|em)?$/i);
+  if (!match) return 0;
+  const num = parseFloat(match[1]);
+  const unit = (match[2] ?? "px").toLowerCase();
+  switch (unit) {
+    case "px":
+      return num;
+    // For a bottom-sheet, `vh`, `%` and `vw` all map to viewport
+    // height — `%` is the conventional shorthand designers reach for
+    // even though strictly speaking a percentage on `height` resolves
+    // against the parent. We expose `vh` as the canonical unit and
+    // treat % the same way; documented in the prop's TSDoc.
+    case "vh":
+    case "%":
+      return window.innerHeight * num / 100;
+    case "vw":
+      return window.innerWidth * num / 100;
+    case "rem":
+    case "em": {
+      const root = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+      return num * root;
+    }
+    default:
+      return num;
+  }
+}
+export function useSheetSwipe(options) {
+  const {
+    el,
+    handle,
+    snapPoints,
+    defaultSnap,
+    disabled,
+    persistent
+  } = options;
+  const sortedSnaps = computed(() => {
+    const src = snapPoints?.value ?? DEFAULT_SHEET_SNAP_POINTS;
+    return [...src].sort((a, b) => resolveHeightPx(a.height) - resolveHeightPx(b.height));
+  });
+  const currentSnap = ref(defaultSnap?.value ?? "half");
+  const currentSnapHeight = computed(() => {
+    const snap = sortedSnaps.value.find((s) => s.id === currentSnap.value) ?? sortedSnaps.value[Math.floor(sortedSnaps.value.length / 2)];
+    return resolveHeightPx(snap?.height ?? 0);
+  });
+  const dragOffset = shallowRef(0);
+  const isDragging = shallowRef(false);
+  watch(() => defaultSnap?.value, (next) => {
+    if (next && next !== currentSnap.value) currentSnap.value = next;
+  });
+  let startY = 0;
+  let startTime = 0;
+  let baselineHeight = 0;
+  let activePointer = null;
+  function resolveSnap(delta, velocity) {
+    const snaps = sortedSnaps.value;
+    if (snaps.length === 0) return currentSnap.value;
+    const currentIdx = Math.max(0, snaps.findIndex((s) => s.id === currentSnap.value));
+    const goingUp = velocity > 0;
+    const goingDown = velocity < 0;
+    const speed = Math.abs(velocity);
+    if (speed >= FAST_FLICK_THRESHOLD) {
+      const nextIdx = goingUp ? Math.min(snaps.length - 1, currentIdx + 1) : goingDown ? Math.max(0, currentIdx - 1) : currentIdx;
+      const candidate = snaps[nextIdx];
+      return enforcePersistent(candidate.id, snaps);
+    }
+    const projectedHeight = baselineHeight + delta;
+    let bestId = snaps[0].id;
+    let bestDist = Number.POSITIVE_INFINITY;
+    for (const s of snaps) {
+      const dist = Math.abs(resolveHeightPx(s.height) - projectedHeight);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestId = s.id;
+      }
+    }
+    return enforcePersistent(bestId, snaps);
+  }
+  function enforcePersistent(candidate, snaps) {
+    if (!persistent?.value) return candidate;
+    if (candidate !== "closed") return candidate;
+    const fallback = snaps.find((s) => s.id !== "closed" && resolveHeightPx(s.height) > 0);
+    return fallback ? fallback.id : candidate;
+  }
+  function snapTo(id) {
+    const snaps = sortedSnaps.value;
+    const target = enforcePersistent(id, snaps);
+    if (snaps.some((s) => s.id === target)) {
+      currentSnap.value = target;
+      dragOffset.value = 0;
+    }
+  }
+  function dismiss() {
+    snapTo("closed");
+  }
+  function onPointerDown(e) {
+    if (disabled?.value) return;
+    const target = handle.value;
+    if (!target) return;
+    activePointer = e.pointerId;
+    startY = e.clientY;
+    startTime = e.timeStamp;
+    baselineHeight = currentSnapHeight.value;
+    dragOffset.value = 0;
+    isDragging.value = true;
+    try {
+      target.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  }
+  function onPointerMove(e) {
+    if (!isDragging.value || activePointer !== e.pointerId) return;
+    if (e.cancelable) e.preventDefault();
+    const delta = startY - e.clientY;
+    dragOffset.value = delta;
+  }
+  function onPointerUp(e) {
+    if (!isDragging.value || activePointer !== e.pointerId) return;
+    const delta = startY - e.clientY;
+    const dt = Math.max(1, e.timeStamp - startTime);
+    const velocity = delta / dt;
+    try {
+      handle.value?.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    const next = resolveSnap(delta, velocity);
+    currentSnap.value = next;
+    dragOffset.value = 0;
+    isDragging.value = false;
+    activePointer = null;
+  }
+  function onPointerCancel() {
+    dragOffset.value = 0;
+    isDragging.value = false;
+    activePointer = null;
+  }
+  function bind() {
+    const target = handle.value;
+    if (!target) return;
+    target.addEventListener("pointerdown", onPointerDown, { passive: false });
+    target.addEventListener("pointermove", onPointerMove, { passive: false });
+    target.addEventListener("pointerup", onPointerUp, { passive: false });
+    target.addEventListener("pointercancel", onPointerCancel, { passive: false });
+    target.addEventListener("pointerleave", onPointerCancel, { passive: false });
+  }
+  function unbind() {
+    const target = handle.value;
+    if (!target) return;
+    target.removeEventListener("pointerdown", onPointerDown);
+    target.removeEventListener("pointermove", onPointerMove);
+    target.removeEventListener("pointerup", onPointerUp);
+    target.removeEventListener("pointercancel", onPointerCancel);
+    target.removeEventListener("pointerleave", onPointerCancel);
+  }
+  onMounted(() => {
+    bind();
+  });
+  watch(handle, (next, prev) => {
+    if (prev) {
+      prev.removeEventListener("pointerdown", onPointerDown);
+      prev.removeEventListener("pointermove", onPointerMove);
+      prev.removeEventListener("pointerup", onPointerUp);
+      prev.removeEventListener("pointercancel", onPointerCancel);
+      prev.removeEventListener("pointerleave", onPointerCancel);
+    }
+    if (next) bind();
+  });
+  onBeforeUnmount(() => {
+    unbind();
+  });
+  void el;
+  return {
+    currentSnap,
+    dragOffset,
+    isDragging,
+    snapTo,
+    dismiss,
+    currentSnapHeight
+  };
+}