@1337exp/taoui 1.10.3 → 1.10.4

package/dist/index.d.ts

@@ -1545,7 +1545,7 @@ peek?: number;
 /** How many slides fit in the viewport. 5 = product strip. 1 = one card. */
 perView?: number;
 controls?: boolean;
-/** Interval in ms. 0 — off. Pauses on hover, focus, drag, and reduced motion. */
+/** Interval in ms. 0 — off. Pauses on hover, keyboard focus, drag, and reduced motion. */
 autoplay?: number;
 loop?: boolean;
 /** Pips under the track: one per snap. Inactive are dots, the current one stretches into a pill. */
@@ -1578,7 +1578,7 @@ peek?: number;
 /** How many slides fit in the viewport. 5 = product strip. 1 = one card. */
 perView?: number;
 controls?: boolean;
-/** Interval in ms. 0 — off. Pauses on hover, focus, drag, and reduced motion. */
+/** Interval in ms. 0 — off. Pauses on hover, keyboard focus, drag, and reduced motion. */
 autoplay?: number;
 loop?: boolean;
 /** Pips under the track: one per snap. Inactive are dots, the current one stretches into a pill. */

package/dist/index.mjs

@@ -7256,6 +7256,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     let dragMoved = 0;
     let dragPointer = -1;
     let scrollFrame = 0;
+    let focusFrame = 0;
     let autoplayTimer = 0;
     const step = computed(() => Math.max(1, Math.round(props.perView)));
     const lastIndex = computed(() => Math.max(count.value - step.value, 0));
@@ -7364,18 +7365,32 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       hoverPaused.value = false;
       syncAutoplay();
     }
-    function onFocusIn() {
-      focusPaused.value = true;
-      stopAutoplay();
+    function hasKeyboardFocus(root) {
+      const active = document.activeElement;
+      if (!(active instanceof HTMLElement) || !root.contains(active)) {
+        return false;
+      }
+      try {
+        return active.matches(":focus-visible");
+      } catch {
+        return true;
+      }
     }
-    function onFocusOut(event) {
+    function scheduleFocusPause(event) {
       const root = event.currentTarget;
-      const next = event.relatedTarget;
-      if (next && root.contains(next)) {
-        return;
-      }
-      focusPaused.value = false;
-      syncAutoplay();
+      cancelAnimationFrame(focusFrame);
+      focusFrame = requestAnimationFrame(() => {
+        if (!track.value) {
+          return;
+        }
+        const next = hasKeyboardFocus(root);
+        focusPaused.value = next;
+        if (next) {
+          stopAutoplay();
+          return;
+        }
+        syncAutoplay();
+      });
     }
     function onScroll() {
       if (dragging.value) {
@@ -7512,6 +7527,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(() => {
       endDrag();
       cancelAnimationFrame(scrollFrame);
+      cancelAnimationFrame(focusFrame);
       stopAutoplay();
       document.removeEventListener("visibilitychange", onVisibilityChange);
       window.removeEventListener("blur", onWindowBlur);
@@ -7523,8 +7539,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(trackStyle.value),
         onMouseenter: onMouseEnter,
         onMouseleave: onMouseLeave,
-        onFocusin: onFocusIn,
-        onFocusout: onFocusOut
+        onFocusin: scheduleFocusPause,
+        onFocusout: scheduleFocusPause
       }, [
         createElementVNode("div", _hoisted_1$4, [
           renderSlot(_ctx.$slots, "prev", {
@@ -7647,7 +7663,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TaoCarousel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-bc396e5d"]]);
+const TaoCarousel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-b4139b57"]]);
 const _hoisted_1$3 = ["aria-label"];
 const _hoisted_2$2 = ["aria-label"];
 const _hoisted_3$2 = {