@y14e/path-bar 1.0.0 → 1.0.2

package/README.md

@@ -10,16 +10,16 @@ npm i @y14e/path-bar
 
 ```ts
 // npm
-import PathBar from '@y14e/path-bar@1.0.0';
+import PathBar from '@y14e/path-bar@1.0.2';
 // with middleware
-import PathBar, { flip, offset, shift } from '@y14e/path-bar@1.0.0';
+import PathBar, { flip, offset, shift } from '@y14e/path-bar@1.0.2';
 
 // CDNs
-import PathBar from 'https://esm.sh/@y14e/path-bar@1.0.0';
+import PathBar from 'https://esm.sh/@y14e/path-bar@1.0.2';
 // or
-import PathBar from 'https://cdn.jsdelivr.net/npm/@y14e/path-bar@1.0.0/+esm';
+import PathBar from 'https://cdn.jsdelivr.net/npm/@y14e/path-bar@1.0.2/+esm';
 // or
-import PathBar from 'https://esm.unpkg.com/@y14e/path-bar@1.0.0';
+import PathBar from 'https://esm.unpkg.com/@y14e/path-bar@1.0.2';
 ```
 
 ## Usage

package/dist/index.cjs

@@ -2414,7 +2414,13 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
@@ -2502,7 +2508,6 @@ var RovingTabIndex = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -2663,7 +2668,6 @@ var Menu = class _Menu {
   #cleanupRovingTabIndex = null;
   #timers = [];
   #animation = null;
-  #animationId = 0;
   #buttons = [];
   #submenus = [];
   #submenuTimer;
@@ -3080,14 +3084,14 @@ var Menu = class _Menu {
     const opacity = getComputedStyle(this.#listElement).getPropertyValue(
       "opacity"
     );
-    const animationId = ++this.#animationId;
     this.#animation?.cancel();
-    this.#animation = this.#listElement.animate(
+    const animation = this.#listElement.animate(
       { opacity: isOpen ? [opacity, "1"] : [opacity, "0"] },
       { duration: this.#settings.animation.duration, easing: "ease" }
     );
+    this.#animation = animation;
     const cleanupAnimation = () => {
-      if (animationId === this.#animationId) {
+      if (this.#animation === animation) {
         this.#animation = null;
       }
     };
@@ -3099,7 +3103,7 @@ var Menu = class _Menu {
     this.#animation.addEventListener(
       "finish",
       () => {
-        if (animationId !== this.#animationId) {
+        if (this.#animation !== animation) {
           return;
         }
         cleanupAnimation();
@@ -3634,7 +3638,13 @@ function createRovingTabIndex2(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex2(container, settings);
@@ -3722,7 +3732,6 @@ var RovingTabIndex2 = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -4180,6 +4189,7 @@ var PathBar = class _PathBar {
   #rootElement;
   #defaults = {
     animation: { duration: 300 },
+    delay: 200,
     popover: {
       arrow: true,
       middleware: [flip2(), offset2(), shift2()],
@@ -4234,11 +4244,11 @@ var PathBar = class _PathBar {
       console.warn("Missing item elements");
       return;
     }
-    this.#linkElements = [
-      ...this.#listElement.querySelectorAll(
-        `${selector.list} > * > a`
-      )
-    ];
+    this.#linkElements = [];
+    this.#itemElements.forEach((item) => {
+      const link = item.querySelector("a");
+      link && this.#linkElements.push(link);
+    });
     if (!this.#linkElements.length) {
       console.warn("Missing <a> elements");
       return;
@@ -4276,18 +4286,26 @@ var PathBar = class _PathBar {
     });
     this.#linkElements.forEach((link) => {
       link.addEventListener("keydown", this.#onKeyDown, { signal });
-      const menuRoot = link.nextElementSibling;
-      if (!(menuRoot instanceof HTMLElement)) {
+      const root = link.closest(this.#settings.selector.item);
+      if (!(root instanceof HTMLElement)) {
         return;
       }
-      const { animation, popover, selector } = this.#settings;
-      const menuInstance = new Menu(
-        menuRoot,
-        { animation, popover: { menu: popover }, selector: selector.menu },
+      const { animation, delay, popover, selector } = this.#settings;
+      if (!root.querySelector(selector.menu.trigger)) {
+        return;
+      }
+      const menu = new Menu(
+        root,
+        {
+          animation,
+          delay,
+          popover: { menu: popover },
+          selector: selector.menu
+        },
         { externalTrigger: link, isMenubar: true }
       );
-      this.#bindings.set(link, createBinding(link, menuInstance));
-      this.#menus.push(menuInstance);
+      this.#bindings.set(link, createBinding(link, menu));
+      this.#menus.push(menu);
     });
     this.#cleanupRovingTabIndex = createRovingTabIndex2(this.#listElement, {
       direction: "horizontal",
@@ -4384,7 +4402,7 @@ function createBinding(link, menu) {
  * Breadcrumb-style path bar implementation in TypeScript.
  * Supports keyboard navigation, integrated menus, and seamless menu traversal.
  *
- * @version 1.0.0
+ * @version 1.0.2
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4398,7 +4416,7 @@ function createBinding(link, menu) {
    * WAI-ARIA compliant menu (menu button) pattern implementation in TypeScript.
    * Supports checkbox item, radio item, and infinitely nested menus.
    *
-   * @version 1.7.1
+   * @version 1.7.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4473,7 +4491,7 @@ function createBinding(link, menu) {
      * Lightweight roving tabindex utility with fully focus management.
      * Designed for accessible menus, tabs, toolbars, and composite widgets.
      *
-     * @version 2.2.0
+     * @version 3.0.0
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4513,7 +4531,7 @@ function createBinding(link, menu) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.2.0
+   * @version 3.0.0
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -6,7 +6,7 @@ export { flip, offset, shift } from '@y14e/menu';
  * Breadcrumb-style path bar implementation in TypeScript.
  * Supports keyboard navigation, integrated menus, and seamless menu traversal.
  *
- * @version 1.0.0
+ * @version 1.0.2
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -17,6 +17,7 @@ interface PathBarOptions {
     readonly animation?: {
         readonly duration?: number;
     };
+    readonly delay?: number;
     readonly popover?: PathBarPopoverOptions;
     readonly selector?: {
         readonly item?: string;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { flip, offset, shift } from '@y14e/menu';
  * Breadcrumb-style path bar implementation in TypeScript.
  * Supports keyboard navigation, integrated menus, and seamless menu traversal.
  *
- * @version 1.0.0
+ * @version 1.0.2
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -17,6 +17,7 @@ interface PathBarOptions {
     readonly animation?: {
         readonly duration?: number;
     };
+    readonly delay?: number;
     readonly popover?: PathBarPopoverOptions;
     readonly selector?: {
         readonly item?: string;

package/dist/index.js

@@ -2410,7 +2410,13 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
@@ -2498,7 +2504,6 @@ var RovingTabIndex = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -2659,7 +2664,6 @@ var Menu = class _Menu {
   #cleanupRovingTabIndex = null;
   #timers = [];
   #animation = null;
-  #animationId = 0;
   #buttons = [];
   #submenus = [];
   #submenuTimer;
@@ -3076,14 +3080,14 @@ var Menu = class _Menu {
     const opacity = getComputedStyle(this.#listElement).getPropertyValue(
       "opacity"
     );
-    const animationId = ++this.#animationId;
     this.#animation?.cancel();
-    this.#animation = this.#listElement.animate(
+    const animation = this.#listElement.animate(
       { opacity: isOpen ? [opacity, "1"] : [opacity, "0"] },
       { duration: this.#settings.animation.duration, easing: "ease" }
     );
+    this.#animation = animation;
     const cleanupAnimation = () => {
-      if (animationId === this.#animationId) {
+      if (this.#animation === animation) {
         this.#animation = null;
       }
     };
@@ -3095,7 +3099,7 @@ var Menu = class _Menu {
     this.#animation.addEventListener(
       "finish",
       () => {
-        if (animationId !== this.#animationId) {
+        if (this.#animation !== animation) {
           return;
         }
         cleanupAnimation();
@@ -3630,7 +3634,13 @@ function createRovingTabIndex2(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex2(container, settings);
@@ -3718,7 +3728,6 @@ var RovingTabIndex2 = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -4176,6 +4185,7 @@ var PathBar = class _PathBar {
   #rootElement;
   #defaults = {
     animation: { duration: 300 },
+    delay: 200,
     popover: {
       arrow: true,
       middleware: [flip2(), offset2(), shift2()],
@@ -4230,11 +4240,11 @@ var PathBar = class _PathBar {
       console.warn("Missing item elements");
       return;
     }
-    this.#linkElements = [
-      ...this.#listElement.querySelectorAll(
-        `${selector.list} > * > a`
-      )
-    ];
+    this.#linkElements = [];
+    this.#itemElements.forEach((item) => {
+      const link = item.querySelector("a");
+      link && this.#linkElements.push(link);
+    });
     if (!this.#linkElements.length) {
       console.warn("Missing <a> elements");
       return;
@@ -4272,18 +4282,26 @@ var PathBar = class _PathBar {
     });
     this.#linkElements.forEach((link) => {
       link.addEventListener("keydown", this.#onKeyDown, { signal });
-      const menuRoot = link.nextElementSibling;
-      if (!(menuRoot instanceof HTMLElement)) {
+      const root = link.closest(this.#settings.selector.item);
+      if (!(root instanceof HTMLElement)) {
         return;
       }
-      const { animation, popover, selector } = this.#settings;
-      const menuInstance = new Menu(
-        menuRoot,
-        { animation, popover: { menu: popover }, selector: selector.menu },
+      const { animation, delay, popover, selector } = this.#settings;
+      if (!root.querySelector(selector.menu.trigger)) {
+        return;
+      }
+      const menu = new Menu(
+        root,
+        {
+          animation,
+          delay,
+          popover: { menu: popover },
+          selector: selector.menu
+        },
         { externalTrigger: link, isMenubar: true }
       );
-      this.#bindings.set(link, createBinding(link, menuInstance));
-      this.#menus.push(menuInstance);
+      this.#bindings.set(link, createBinding(link, menu));
+      this.#menus.push(menu);
     });
     this.#cleanupRovingTabIndex = createRovingTabIndex2(this.#listElement, {
       direction: "horizontal",
@@ -4380,7 +4398,7 @@ function createBinding(link, menu) {
  * Breadcrumb-style path bar implementation in TypeScript.
  * Supports keyboard navigation, integrated menus, and seamless menu traversal.
  *
- * @version 1.0.0
+ * @version 1.0.2
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4394,7 +4412,7 @@ function createBinding(link, menu) {
    * WAI-ARIA compliant menu (menu button) pattern implementation in TypeScript.
    * Supports checkbox item, radio item, and infinitely nested menus.
    *
-   * @version 1.7.1
+   * @version 1.7.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4469,7 +4487,7 @@ function createBinding(link, menu) {
      * Lightweight roving tabindex utility with fully focus management.
      * Designed for accessible menus, tabs, toolbars, and composite widgets.
      *
-     * @version 2.2.0
+     * @version 3.0.0
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4509,7 +4527,7 @@ function createBinding(link, menu) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.2.0
+   * @version 3.0.0
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/path-bar",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -44,8 +44,8 @@
   "devDependencies": {
     "@floating-ui/dom": "^1.7.6",
     "@y14e/attributes-utils": "^1.1.1",
-    "@y14e/menu": "^1.7.1",
-    "@y14e/roving-tabindex": "^2.2.0",
+    "@y14e/menu": "^1.7.3",
+    "@y14e/roving-tabindex": "^3.0.0",
     "bun-types": "latest",
     "power-focusable": "^4.3.2",
     "tsup": "^8.0.0",