origam 2.17.1 → 2.18.1

package/dist/src/utils/Commons/a11y.util.cjs

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.warnMissingAccessibleName = warnMissingAccessibleName;
+exports.warnMissingLandmarkName = warnMissingLandmarkName;
+exports.warnMissingNativeControlName = warnMissingNativeControlName;
+const _warnedCommandNameKeys = /* @__PURE__ */new Set();
+function warnMissingAccessibleName(component, zone, prop) {
+  if (typeof console === "undefined") return;
+  if (!process.env?.DEV) return;
+  const key = `${component}::${zone}`;
+  if (_warnedCommandNameKeys.has(key)) return;
+  _warnedCommandNameKeys.add(key);
+  console.warn(`[origam] <${component}> the "${zone}" zone has a click listener but no accessible name, so it is NOT exposed as a button and NOT reachable by keyboard \u2014 a screen reader would announce "button" and nothing else (WCAG 2.1 4.1.2). Set "${prop}" to an i18n key or a literal label to make it a real control.`);
+}
+const _warnedNativeCommandKeys = /* @__PURE__ */new Set();
+function warnMissingNativeControlName(component, hint) {
+  if (typeof console === "undefined") return;
+  if (!process.env?.DEV) return;
+  const key = `${component}::${hint}`;
+  if (_warnedNativeCommandKeys.has(key)) return;
+  _warnedNativeCommandKeys.add(key);
+  console.warn(`[origam] <${component}> renders a control with no accessible name: ${hint}. Add aria-label (or aria-labelledby) \u2014 an unnamed button announces as "button" and nothing else (WCAG 2.1 4.1.2).`);
+}
+const _warnedLandmarkKeys = /* @__PURE__ */new Set();
+function warnMissingLandmarkName(component, role, roleDescription) {
+  if (typeof console === "undefined") return;
+  if (!process.env?.DEV) return;
+  const key = `${component}::${role}`;
+  if (_warnedLandmarkKeys.has(key)) return;
+  _warnedLandmarkKeys.add(key);
+  console.warn(`[origam] <${component}> has no accessible name, so it does NOT declare role="${role}" / aria-roledescription="${roleDescription}". An unnamed "${role}" is not a navigable landmark (WAI-ARIA 1.2 \u2014 name required), and a roledescription with no name describes nothing. Pass aria-label (or aria-labelledby) to <${component}> \u2014 it falls through to the root element.`);
+}

package/dist/src/utils/Commons/a11y.util.d.ts

@@ -0,0 +1,63 @@
+/*********************************************************
+ * a11y.util — dev-time accessibility warnings
+ *
+ * @description
+ * ⛔ issues #747 / #653 / #660. Same once-per-key, `import.meta.env.DEV`-gated
+ * shape as `warnUnsupportedProp` (`color.util.ts`), but filed here rather
+ * than grown as a fifth warning inside a colour utility — these two say
+ * nothing about colour.
+ *
+ * Both warnings are SILENT in production builds. They exist to tell the
+ * developer what to add, at the moment they can still add it; shipping the
+ * string to an end user's console would help nobody.
+ ********************************************************/
+/*********************************************************
+ * warnMissingAccessibleName
+ *
+ * @description
+ * A zone the DS would have promoted to `role="button"` has no accessible
+ * name, so `useAccessibleCommand` emitted no role and no tab stop. Names
+ * the exact prop that restores it.
+ ********************************************************/
+export declare function warnMissingAccessibleName(component: string, zone: string, prop: string): void;
+/*********************************************************
+ * warnMissingNativeControlName
+ *
+ * @description
+ * A NATIVE control (`<button>`, `<a href>`) renders with no text and no
+ * `aria-label` / `aria-labelledby`. Unlike a `role="button"` the DS added
+ * itself, this one cannot be withdrawn — the element IS a control. All the
+ * DS can do is say so, loudly, in development.
+ *
+ * @description
+ * No label is fabricated: a guessed string would silence axe while telling
+ * the user nothing (#622 shipped exactly that once, an auto-label that
+ * overwrote a visible `<label for>`).
+ ********************************************************/
+export declare function warnMissingNativeControlName(component: string, hint: string): void;
+/*********************************************************
+ * warnMissingLandmarkName
+ *
+ * @description
+ * ⛔ issue #781 — same rule as `warnMissingAccessibleName`, one rung up: a
+ * LANDMARK the DS would have declared has no accessible name, so the DS
+ * declared nothing.
+ *
+ * @description
+ * `region` is one of the few roles whose ARIA definition marks the
+ * accessible name as REQUIRED (WAI-ARIA 1.2, role `region`: "Name Required:
+ * True"), and HTML-AAM says the same thing from the other side — a
+ * `<section>` maps to `region` only when it is named, and to `generic`
+ * otherwise. An unnamed `role="region"` is therefore not a landmark a user
+ * can usefully navigate to; it is an authoring error that puts a nameless
+ * entry in the landmark list. `aria-roledescription` riding along makes it
+ * worse, not better: it replaces the role name a screen reader would have
+ * announced with a description attached to nothing.
+ *
+ * @description
+ * No name is fabricated. "Carousel" as a default label would name every
+ * carousel on a page identically — exactly the defect `OrigamCode`'s
+ * scroller was corrected for (five homonymous regions in one landmark
+ * list). The consumer holds the only string that distinguishes them.
+ ********************************************************/
+export declare function warnMissingLandmarkName(component: string, role: string, roleDescription: string): void;

package/dist/src/utils/Commons/a11y.util.js

@@ -0,0 +1,33 @@
+const _warnedCommandNameKeys = /* @__PURE__ */ new Set();
+export function warnMissingAccessibleName(component, zone, prop) {
+  if (typeof console === "undefined") return;
+  if (!import.meta.env?.DEV) return;
+  const key = `${component}::${zone}`;
+  if (_warnedCommandNameKeys.has(key)) return;
+  _warnedCommandNameKeys.add(key);
+  console.warn(
+    `[origam] <${component}> the "${zone}" zone has a click listener but no accessible name, so it is NOT exposed as a button and NOT reachable by keyboard \u2014 a screen reader would announce "button" and nothing else (WCAG 2.1 4.1.2). Set "${prop}" to an i18n key or a literal label to make it a real control.`
+  );
+}
+const _warnedNativeCommandKeys = /* @__PURE__ */ new Set();
+export function warnMissingNativeControlName(component, hint) {
+  if (typeof console === "undefined") return;
+  if (!import.meta.env?.DEV) return;
+  const key = `${component}::${hint}`;
+  if (_warnedNativeCommandKeys.has(key)) return;
+  _warnedNativeCommandKeys.add(key);
+  console.warn(
+    `[origam] <${component}> renders a control with no accessible name: ${hint}. Add aria-label (or aria-labelledby) \u2014 an unnamed button announces as "button" and nothing else (WCAG 2.1 4.1.2).`
+  );
+}
+const _warnedLandmarkKeys = /* @__PURE__ */ new Set();
+export function warnMissingLandmarkName(component, role, roleDescription) {
+  if (typeof console === "undefined") return;
+  if (!import.meta.env?.DEV) return;
+  const key = `${component}::${role}`;
+  if (_warnedLandmarkKeys.has(key)) return;
+  _warnedLandmarkKeys.add(key);
+  console.warn(
+    `[origam] <${component}> has no accessible name, so it does NOT declare role="${role}" / aria-roledescription="${roleDescription}". An unnamed "${role}" is not a navigable landmark (WAI-ARIA 1.2 \u2014 name required), and a roledescription with no name describes nothing. Pass aria-label (or aria-labelledby) to <${component}> \u2014 it falls through to the root element.`
+  );
+}

package/dist/src/utils/Commons/clickOutside.util.cjs

@@ -26,11 +26,15 @@ function checkIsActive(e, binding) {
 function directive(e, el, binding) {
   const handler = typeof binding.value === "function" ? binding.value : binding.value.handler;
   if (el._clickOutside?.lastMousedownWasOutside && checkEvent(e, el, binding)) {
-    setTimeout(() => {
+    const store = el._clickOutside;
+    const id = setTimeout(() => {
+      store.timers?.delete(id);
       if (checkIsActive(e, binding) && handler) {
         handler(e);
       }
     }, 0);
+    store.timers ??= /* @__PURE__ */new Set();
+    store.timers.add(id);
   }
 }
 function handleShadow(el, callback) {

package/dist/src/utils/Commons/clickOutside.util.js

@@ -17,11 +17,15 @@ export function checkIsActive(e, binding) {
 export function directive(e, el, binding) {
   const handler = typeof binding.value === "function" ? binding.value : binding.value.handler;
   if (el._clickOutside?.lastMousedownWasOutside && checkEvent(e, el, binding)) {
-    setTimeout(() => {
+    const store = el._clickOutside;
+    const id = setTimeout(() => {
+      store.timers?.delete(id);
       if (checkIsActive(e, binding) && handler) {
         handler(e);
       }
     }, 0);
+    store.timers ??= /* @__PURE__ */ new Set();
+    store.timers.add(id);
   }
 }
 export function handleShadow(el, callback) {

package/dist/src/utils/Commons/color.util.cjs

@@ -27,6 +27,7 @@ exports.getLuma = getLuma;
 exports.intentBgExpr = intentBgExpr;
 exports.intentFgExpr = intentFgExpr;
 exports.intentTokenBase = intentTokenBase;
+exports.isCompleteCssColor = isCompleteCssColor;
 exports.isCssColor = isCssColor;
 exports.isIntent = isIntent;
 exports.isParsableColor = isParsableColor;
@@ -39,7 +40,6 @@ exports.rawBgExprWithState = rawBgExprWithState;
 exports.toHex = toHex;
 exports.tokenForegroundForIntent = tokenForegroundForIntent;
 exports.tokenStylesForIntent = tokenStylesForIntent;
-exports.warnDeprecatedEmit = warnDeprecatedEmit;
 exports.warnDeprecatedProp = warnDeprecatedProp;
 exports.warnLegacyColor = warnLegacyColor;
 exports.warnUnsupportedProp = warnUnsupportedProp;
@@ -53,6 +53,13 @@ function isCssColor(color) {
 function isParsableColor(color) {
   return isCssColor(color) && !/^((rgb|hsl)a?\()?var\(--/.test(color) && !/^color-mix\(/i.test(color);
 }
+function isCompleteCssColor(color) {
+  if (!color) return false;
+  if (color.startsWith("#")) {
+    return /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color);
+  }
+  return isCssColor(color);
+}
 function parseColor(color) {
   if (typeof color === "number") {
     if (isNaN(color) || color < 0 || color > 16777215) {
@@ -368,15 +375,13 @@ function intentBgExpr(intent, role) {
   const base = intentTokenBase(intent);
   const baseVar = `var(--origam-color__${base}---bg)`;
   if (role === "default") return baseVar;
-  if (role === "disabled") return `var(--origam-color__${base}---bgDisabled)`;
   const pct = role === "hover" ? _color.COLOR_HOVER_MIX_PCT : _color.COLOR_ACTIVE_MIX_PCT;
   const slot = role === "hover" ? "bgHover" : "bgActive";
   return `var(--origam-color__${base}---${slot}, color-mix(in srgb, ${baseVar}, black ${pct}%))`;
 }
-function intentFgExpr(intent, role) {
+function intentFgExpr(intent, _role) {
   const base = intentTokenBase(intent);
-  const slot = role === "disabled" ? "fgDisabled" : "fg";
-  return `var(--origam-color__${base}---${slot})`;
+  return `var(--origam-color__${base}---fg)`;
 }
 function tokenStylesForIntent(intent, role = _color2.BG_FG_ROLE.DEFAULT) {
   return {
@@ -386,7 +391,6 @@ function tokenStylesForIntent(intent, role = _color2.BG_FG_ROLE.DEFAULT) {
 }
 function rawBgExprWithState(raw, role) {
   if (role === "default") return raw;
-  if (role === "disabled") return raw;
   const pct = role === "hover" ? _color.COLOR_HOVER_MIX_PCT : _color.COLOR_ACTIVE_MIX_PCT;
   return `color-mix(in srgb, ${raw}, black ${pct}%)`;
 }
@@ -426,13 +430,4 @@ function warnUnsupportedProp(component, prop, reason) {
   if (_warnedUnsupportedPropKeys.has(key)) return;
   _warnedUnsupportedPropKeys.add(key);
   console.warn(`[origam] <${component}> prop "${prop}" has no effect on this component: ${reason}`);
-}
-const _warnedDeprecatedEmitKeys = /* @__PURE__ */new Set();
-function warnDeprecatedEmit(component, emit, replacement, removalVersion = "v3.0.0") {
-  if (typeof console === "undefined") return;
-  if (!process.env?.DEV) return;
-  const key = `${component}::${emit}`;
-  if (_warnedDeprecatedEmitKeys.has(key)) return;
-  _warnedDeprecatedEmitKeys.add(key);
-  console.warn(`[origam] <${component}> emit "${emit}" is deprecated and will be removed in ${removalVersion}. ${replacement}`);
 }

package/dist/src/utils/Commons/color.util.d.ts

@@ -49,6 +49,30 @@ export declare function isCssColor(color?: string | null | false): boolean;
  * @returns …
  ********************************************************/
 export declare function isParsableColor(color: string): boolean;
+/*********************************************************
+ * isCompleteCssColor
+ *
+ * @description
+ * Is complete css color — a strictER sibling of `isCssColor`, meant to
+ * gate a COMMIT (a user's typed keystroke reaching the model), not a
+ * style-consumption path.
+ *
+ * @description
+ * `isCssColor`'s hex branch deliberately only checks the `#` prefix
+ * (`/^#/`) — a value that fails to paint at the CSS-consumption layer is
+ * harmless, so `#f`, `#ff`, `#fffff` (5 digits) all pass it today. That
+ * tolerance is wrong for a commit gate: a user mid-typing `#ff00aa`
+ * passes through `#f`, `#ff`, `#ff0`… and only a SYNTACTICALLY COMPLETE
+ * hex (3, 4, 6 or 8 digits) should actually reach `modelValue` — #859
+ * (`OrigamColorPickerField` / `OrigamDatePickerField` direct-typing
+ * wiring). Every other category (functional notation, named colors,
+ * `var()`) reuses `isCssColor` unchanged — its check is already exact
+ * there.
+ *
+ * @param color …
+ * @returns …
+ ********************************************************/
+export declare function isCompleteCssColor(color: string): boolean;
 /*********************************************************
  * parseColor
  *
@@ -384,18 +408,23 @@ export declare function intentTokenBase(intent: TIntent): string;
  *   • `default`  → `var(--…-bg)`
  *   • `hover`    → `var(--…-bgHover, color-mix(in srgb, var(--…-bg), black 20%))`
  *   • `active`   → `var(--…-bgActive, color-mix(in srgb, var(--…-bg), black 30%))`
- *   • `disabled` → `var(--…-bgDisabled)`
+ *
+ * @description
+ * There is no `disabled` rung — disabled is an opacity veil, not a token
+ * swap. See `BG_FG_ROLE` (#823) for why emitting one would erase the
+ * surface rather than repaint it.
  ********************************************************/
 export declare function intentBgExpr(intent: TIntent, role: TBgFgRole): string;
 /*********************************************************
  * intentFgExpr
  *
  * @description
- * Foreground stays the same hue across hover / active by design — we
- * darken the surface around the text, the text itself keeps the
- * WCAG-paired contrast token.
+ * Foreground stays the same hue across every role by design — we darken
+ * the surface around the text, the text itself keeps the WCAG-paired
+ * contrast token. `role` is therefore accepted for signature symmetry with
+ * `intentBgExpr` and does not branch (there is no `disabled` rung — #823).
  ********************************************************/
-export declare function intentFgExpr(intent: TIntent, role: TBgFgRole): string;
+export declare function intentFgExpr(intent: TIntent, _role: TBgFgRole): string;
 /*********************************************************
  * tokenStylesForIntent
  *
@@ -463,26 +492,3 @@ export declare function warnDeprecatedProp(component: string, oldProp: string, n
  * bullishColor/bearishColor").
  ********************************************************/
 export declare function warnUnsupportedProp(component: string, prop: string, reason: string): void;
-/*********************************************************
- * warnDeprecatedEmit
- *
- * @description
- * Warn (once per component / emit, dev builds only) that the consumer
- * attached a listener to an emit scheduled for removal. The emit KEEPS
- * FIRING until the removal version — this announces the break instead of
- * shipping it. `replacement` should name what to do instead, not merely
- * say the emit is going away. Same once-per-key cache as the three
- * warnings above, but for a public EMIT rather than a prop.
- *
- * @description
- * First use case: `click:prepend` / `click:append` on `<OrigamBtn>` (#443).
- * Those two were reachable by MOUSE ONLY — the emit is bound to a
- * descendant span, while keyboard activation synthesises its click on the
- * button root. The `role="button"` + tab-stop remedy `useAdjacent` applies
- * on the other ten consumers is ILLEGAL here: Btn's root is a
- * `<button>`/`<a>`, whose content model forbids both an interactive
- * descendant and any descendant carrying `tabindex`. A control that already
- * owns one action cannot host a second — two actions are two buttons
- * (`origam-btn-group`).
- ********************************************************/
-export declare function warnDeprecatedEmit(component: string, emit: string, replacement: string, removalVersion?: string): void;

package/dist/src/utils/Commons/color.util.js

@@ -8,6 +8,13 @@ export function isCssColor(color) {
 export function isParsableColor(color) {
   return isCssColor(color) && !/^((rgb|hsl)a?\()?var\(--/.test(color) && !/^color-mix\(/i.test(color);
 }
+export function isCompleteCssColor(color) {
+  if (!color) return false;
+  if (color.startsWith("#")) {
+    return /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color);
+  }
+  return isCssColor(color);
+}
 export function parseColor(color) {
   if (typeof color === "number") {
     if (isNaN(color) || color < 0 || color > 16777215) {
@@ -274,15 +281,13 @@ export function intentBgExpr(intent, role) {
   const base = intentTokenBase(intent);
   const baseVar = `var(--origam-color__${base}---bg)`;
   if (role === "default") return baseVar;
-  if (role === "disabled") return `var(--origam-color__${base}---bgDisabled)`;
   const pct = role === "hover" ? COLOR_HOVER_MIX_PCT : COLOR_ACTIVE_MIX_PCT;
   const slot = role === "hover" ? "bgHover" : "bgActive";
   return `var(--origam-color__${base}---${slot}, color-mix(in srgb, ${baseVar}, black ${pct}%))`;
 }
-export function intentFgExpr(intent, role) {
+export function intentFgExpr(intent, _role) {
   const base = intentTokenBase(intent);
-  const slot = role === "disabled" ? "fgDisabled" : "fg";
-  return `var(--origam-color__${base}---${slot})`;
+  return `var(--origam-color__${base}---fg)`;
 }
 export function tokenStylesForIntent(intent, role = BG_FG_ROLE.DEFAULT) {
   return {
@@ -292,7 +297,6 @@ export function tokenStylesForIntent(intent, role = BG_FG_ROLE.DEFAULT) {
 }
 export function rawBgExprWithState(raw, role) {
   if (role === "default") return raw;
-  if (role === "disabled") return raw;
   const pct = role === "hover" ? COLOR_HOVER_MIX_PCT : COLOR_ACTIVE_MIX_PCT;
   return `color-mix(in srgb, ${raw}, black ${pct}%)`;
 }
@@ -339,14 +343,3 @@ export function warnUnsupportedProp(component, prop, reason) {
     `[origam] <${component}> prop "${prop}" has no effect on this component: ${reason}`
   );
 }
-const _warnedDeprecatedEmitKeys = /* @__PURE__ */ new Set();
-export function warnDeprecatedEmit(component, emit, replacement, removalVersion = "v3.0.0") {
-  if (typeof console === "undefined") return;
-  if (!import.meta.env?.DEV) return;
-  const key = `${component}::${emit}`;
-  if (_warnedDeprecatedEmitKeys.has(key)) return;
-  _warnedDeprecatedEmitKeys.add(key);
-  console.warn(
-    `[origam] <${component}> emit "${emit}" is deprecated and will be removed in ${removalVersion}. ${replacement}`
-  );
-}

package/dist/src/utils/Commons/goTo.util.cjs

@@ -68,7 +68,7 @@ function clampTarget(container, value, horizontal) {
   }
   return Math.max(Math.min(value, max), min);
 }
-async function scrollTo(_target, _options, horizontal, goTo) {
+async function scrollTo(_target, _options, horizontal, goTo, signal) {
   const rtl = goTo?.rtl.value;
   const property = horizontal ? "scrollLeft" : "scrollTop";
   const options = (0, _commons.mergeDeep)(goTo?.options ?? genDefaults(), _options);
@@ -95,17 +95,34 @@ async function scrollTo(_target, _options, horizontal, goTo) {
   if (targetLocation === startLocation) return Promise.resolve(targetLocation);
   const startTime = performance.now();
   const duration = options.duration;
-  return new Promise(resolve => requestAnimationFrame(function step(currentTime) {
-    const timeElapsed = currentTime - startTime;
-    const progress = timeElapsed / duration;
-    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease((0, _commons.clamp)(progress, 0, 1)));
-    container[property] = location;
-    if (progress >= 1 && Math.abs(location - container[property]) < 10) {
-      return resolve(targetLocation);
-    } else if (progress > 2) {
-      (0, _console.consoleWarn)("Scroll target is not reachable");
-      return resolve(container[property]);
-    }
-    requestAnimationFrame(step);
-  }));
+  return new Promise(resolve => {
+    let frame = -1;
+    const onAbort = () => {
+      if (frame !== -1) {
+        cancelAnimationFrame(frame);
+        frame = -1;
+      }
+      resolve(container[property] ?? startLocation);
+    };
+    frame = requestAnimationFrame(function step(currentTime) {
+      frame = -1;
+      if (signal?.aborted) return;
+      const timeElapsed = currentTime - startTime;
+      const progress = timeElapsed / duration;
+      const location = Math.floor(startLocation + (targetLocation - startLocation) * ease((0, _commons.clamp)(progress, 0, 1)));
+      container[property] = location;
+      if (progress >= 1 && Math.abs(location - container[property]) < 10) {
+        signal?.removeEventListener("abort", onAbort);
+        return resolve(targetLocation);
+      } else if (progress > 2) {
+        (0, _console.consoleWarn)("Scroll target is not reachable");
+        signal?.removeEventListener("abort", onAbort);
+        return resolve(container[property]);
+      }
+      frame = requestAnimationFrame(step);
+    });
+    signal?.addEventListener("abort", onAbort, {
+      once: true
+    });
+  });
 }

package/dist/src/utils/Commons/goTo.util.d.ts

@@ -40,4 +40,4 @@ export declare function clampTarget(container: HTMLElement, value: number, horiz
  * @param horizontal …
  * @param goTo       …
  */
-export declare function scrollTo(_target: ComponentPublicInstance | HTMLElement | number | string, _options: Partial<IGoToOptions>, horizontal?: boolean, goTo?: IGoToInstance): Promise<unknown>;
+export declare function scrollTo(_target: ComponentPublicInstance | HTMLElement | number | string, _options: Partial<IGoToOptions>, horizontal?: boolean, goTo?: IGoToInstance, signal?: AbortSignal): Promise<unknown>;

package/dist/src/utils/Commons/goTo.util.js

@@ -54,7 +54,7 @@ export function clampTarget(container, value, horizontal) {
   }
   return Math.max(Math.min(value, max), min);
 }
-export async function scrollTo(_target, _options, horizontal, goTo) {
+export async function scrollTo(_target, _options, horizontal, goTo, signal) {
   const rtl = goTo?.rtl.value;
   const property = horizontal ? "scrollLeft" : "scrollTop";
   const options = mergeDeep(goTo?.options ?? genDefaults(), _options);
@@ -81,19 +81,34 @@ export async function scrollTo(_target, _options, horizontal, goTo) {
   if (targetLocation === startLocation) return Promise.resolve(targetLocation);
   const startTime = performance.now();
   const duration = options.duration;
-  return new Promise((resolve) => requestAnimationFrame(function step(currentTime) {
-    const timeElapsed = currentTime - startTime;
-    const progress = timeElapsed / duration;
-    const location = Math.floor(
-      startLocation + (targetLocation - startLocation) * ease(clamp(progress, 0, 1))
-    );
-    container[property] = location;
-    if (progress >= 1 && Math.abs(location - container[property]) < 10) {
-      return resolve(targetLocation);
-    } else if (progress > 2) {
-      consoleWarn("Scroll target is not reachable");
-      return resolve(container[property]);
-    }
-    requestAnimationFrame(step);
-  }));
+  return new Promise((resolve) => {
+    let frame = -1;
+    const onAbort = () => {
+      if (frame !== -1) {
+        cancelAnimationFrame(frame);
+        frame = -1;
+      }
+      resolve(container[property] ?? startLocation);
+    };
+    frame = requestAnimationFrame(function step(currentTime) {
+      frame = -1;
+      if (signal?.aborted) return;
+      const timeElapsed = currentTime - startTime;
+      const progress = timeElapsed / duration;
+      const location = Math.floor(
+        startLocation + (targetLocation - startLocation) * ease(clamp(progress, 0, 1))
+      );
+      container[property] = location;
+      if (progress >= 1 && Math.abs(location - container[property]) < 10) {
+        signal?.removeEventListener("abort", onAbort);
+        return resolve(targetLocation);
+      } else if (progress > 2) {
+        consoleWarn("Scroll target is not reachable");
+        signal?.removeEventListener("abort", onAbort);
+        return resolve(container[property]);
+      }
+      frame = requestAnimationFrame(step);
+    });
+    signal?.addEventListener("abort", onAbort, { once: true });
+  });
 }

package/dist/src/utils/Commons/location.util.cjs

@@ -63,6 +63,17 @@ function connectedLocationStrategy(data, props, contentStyles) {
     }
     return typeof props.offset === "number" ? [props.offset, 0] : [0, 0];
   });
+  let disposed = false;
+  const frames = /* @__PURE__ */new Set();
+  const scheduleFrame = cb => {
+    if (disposed || typeof requestAnimationFrame === "undefined") return;
+    const id = requestAnimationFrame(() => {
+      frames.delete(id);
+      if (disposed) return;
+      cb();
+    });
+    frames.add(id);
+  };
   let observe = false;
   const observer = new ResizeObserver(() => {
     if (observe) updateLocation();
@@ -76,11 +87,14 @@ function connectedLocationStrategy(data, props, contentStyles) {
     immediate: true
   });
   (0, _vue.onScopeDispose)(() => {
+    disposed = true;
+    for (const id of frames) cancelAnimationFrame(id);
+    frames.clear();
     observer.disconnect();
   });
   const updateLocation = () => {
     observe = false;
-    requestAnimationFrame(() => observe = true);
+    scheduleFrame(() => observe = true);
     if (!data.target.value || !data.contentEl.value) return;
     const targetBox = (0, _box2.getTargetBox)(data.target.value);
     const contentBox = getIntrinsicSize(data.contentEl.value);
@@ -265,6 +279,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
   };
   (0, _vue.watch)(() => [preferredAnchor.value, preferredOrigin.value, props.offset, props.minWidth, props.minHeight, props.maxWidth, props.maxHeight], () => updateLocation());
   (0, _vue.nextTick)(() => {
+    if (disposed) return;
     const result = updateLocation();
     if (!result) return;
     const {
@@ -272,9 +287,9 @@ function connectedLocationStrategy(data, props, contentStyles) {
       contentBox
     } = result;
     if (contentBox.height > available.y) {
-      requestAnimationFrame(() => {
+      scheduleFrame(() => {
         updateLocation();
-        requestAnimationFrame(() => {
+        scheduleFrame(() => {
           updateLocation();
         });
       });

package/dist/src/utils/Commons/location.util.js

@@ -50,6 +50,17 @@ export function connectedLocationStrategy(data, props, contentStyles) {
     }
     return typeof props.offset === "number" ? [props.offset, 0] : [0, 0];
   });
+  let disposed = false;
+  const frames = /* @__PURE__ */ new Set();
+  const scheduleFrame = (cb) => {
+    if (disposed || typeof requestAnimationFrame === "undefined") return;
+    const id = requestAnimationFrame(() => {
+      frames.delete(id);
+      if (disposed) return;
+      cb();
+    });
+    frames.add(id);
+  };
   let observe = false;
   const observer = new ResizeObserver(() => {
     if (observe) updateLocation();
@@ -63,11 +74,14 @@ export function connectedLocationStrategy(data, props, contentStyles) {
     immediate: true
   });
   onScopeDispose(() => {
+    disposed = true;
+    for (const id of frames) cancelAnimationFrame(id);
+    frames.clear();
     observer.disconnect();
   });
   const updateLocation = () => {
     observe = false;
-    requestAnimationFrame(() => observe = true);
+    scheduleFrame(() => observe = true);
     if (!data.target.value || !data.contentEl.value) return;
     const targetBox = getTargetBox(data.target.value);
     const contentBox = getIntrinsicSize(data.contentEl.value);
@@ -237,13 +251,14 @@ export function connectedLocationStrategy(data, props, contentStyles) {
     () => updateLocation()
   );
   nextTick(() => {
+    if (disposed) return;
     const result = updateLocation();
     if (!result) return;
     const { available, contentBox } = result;
     if (contentBox.height > available.y) {
-      requestAnimationFrame(() => {
+      scheduleFrame(() => {
         updateLocation();
-        requestAnimationFrame(() => {
+        scheduleFrame(() => {
           updateLocation();
         });
       });

package/dist/src/utils/Commons/ripple.util.cjs

@@ -149,11 +149,15 @@ function rippleHide(e) {
     });
     return;
   }
-  window.setTimeout(() => {
+  const store = element._ripple;
+  const resetTouched = setTimeout(() => {
+    store.timers?.delete(resetTouched);
     if (element._ripple) {
       element._ripple.touched = false;
     }
   });
+  store.timers ??= /* @__PURE__ */new Set();
+  store.timers.add(resetTouched);
   _ripple.RIPPLES.hide(element);
 }
 function rippleCancelShow(e) {

package/dist/src/utils/Commons/ripple.util.js

@@ -110,11 +110,15 @@ export function rippleHide(e) {
     });
     return;
   }
-  window.setTimeout(() => {
+  const store = element._ripple;
+  const resetTouched = setTimeout(() => {
+    store.timers?.delete(resetTouched);
     if (element._ripple) {
       element._ripple.touched = false;
     }
   });
+  store.timers ??= /* @__PURE__ */ new Set();
+  store.timers.add(resetTouched);
   RIPPLES.hide(element);
 }
 export function rippleCancelShow(e) {