@blackcube/aurelia-kit 1.0.0-rc6 → 1.0.0-rc7

package/README.md

@@ -496,7 +496,13 @@ Behavior:
 
 - Listens on `Channels.Menu`: `MenuAction.Open` applies the show classes and opens the overlay, `MenuAction.Close`
   applies the hide classes and closes the overlay, `MenuAction.Toggle` does one or the other. `aria-hidden` follows.
-- A click on `[data-menu=close]` closes the menu; the menu closes too when the overlay closes.
+- A click on `[data-menu=close]` closes the menu; the menu closes too when the overlay closes, on `Escape` and on a
+  click on a link of the menu (the link is followed).
+- Open, the focus is trapped in the menu (`ITrapFocusService`), on `[data-menu=close]` first; once closed, it goes back
+  to what opened the menu (the burger).
+- The page follows: `<body>` takes the classes of the menu's `data-menu-page-show` while it is open and of its
+  `data-menu-page-hide` once closed — `data-menu-page-show="overflow-hidden"` keeps the page from scrolling under it.
+  Without these attributes, the page is left as is.
 - Publishes `MenuStatus.Opening`, `Opened`, `Closing`, `Closed` on `Channels.MenuStatus`.
 - `[data-menu=toggle-button-ID]` shows or hides `[data-menu=toggle-list-ID]` (`hidden` attribute), sets the
   data-menu-show / data-menu-hide classes of its `svg[data-menu=icon]` and its `aria-expanded`. Accordion: opening a

package/dist/index.es.js

@@ -473,11 +473,12 @@ var ge = u("bleet-menu"), _e, W;
 	p;
 	transitionService;
 	storageService;
+	trapFocusService;
 	static {
 		({c: [W, _e]} = he(this, [ge], []));
 	}
-	constructor(e = m(o).scopeTo("bleet-menu"), t = m(a), n = m(s), r = m(c), i = m(b), l = m(v)) {
-		this.logger = e, this.ea = t, this.element = n, this.p = r, this.transitionService = i, this.storageService = l, this.logger.trace("constructor");
+	constructor(e = m(o).scopeTo("bleet-menu"), t = m(a), n = m(s), r = m(c), i = m(b), l = m(v), u = m(S)) {
+		this.logger = e, this.ea = t, this.element = n, this.p = r, this.transitionService = i, this.storageService = l, this.trapFocusService = u, this.logger.trace("constructor");
 	}
 	disposable;
 	disposableOverlay;
@@ -485,35 +486,54 @@ var ge = u("bleet-menu"), _e, W;
 	toggleButtons;
 	sublists = /* @__PURE__ */ new Map();
 	isOpen = !1;
+	closingFromOverlay = !1;
 	attaching() {
 		this.logger.trace("attaching"), this.closeButton = this.element.querySelector("[data-menu=close]"), this.toggleButtons = this.element.querySelectorAll("[data-menu^=\"toggle-button\"]"), this.initMenuButtons();
 	}
 	attached() {
-		this.logger.trace("attached"), this.disposable = this.ea.subscribe(E.Menu, this.onMenuEvent), this.disposableOverlay = this.ea.subscribe(E.OverlayStatus, this.onOverlayStatus), this.closeButton?.addEventListener("click", this.onClickClose), this.element.addEventListener("click", this.onClickToggleButtons);
+		this.logger.trace("attached"), this.disposable = this.ea.subscribe(E.Menu, this.onMenuEvent), this.disposableOverlay = this.ea.subscribe(E.OverlayStatus, this.onOverlayStatus), this.closeButton?.addEventListener("click", this.onClickClose), this.element.addEventListener("click", this.onClickToggleButtons), this.element.addEventListener("click", this.onClickLink);
 	}
 	detaching() {
-		this.logger.trace("detaching"), this.closeButton?.removeEventListener("click", this.onClickClose), this.element.removeEventListener("click", this.onClickToggleButtons), this.disposableOverlay?.dispose(), this.disposable?.dispose();
+		this.logger.trace("detaching"), this.closeButton?.removeEventListener("click", this.onClickClose), this.element.removeEventListener("click", this.onClickToggleButtons), this.element.removeEventListener("click", this.onClickLink), this.isOpen === !0 && this.trapFocusService.stop().catch((e) => {
+			this.logger.trace("detaching: no trap to stop", e);
+		}), this.disposableOverlay?.dispose(), this.disposable?.dispose();
 	}
 	dispose() {
 		this.logger.trace("dispose"), this.disposableOverlay?.dispose(), this.disposable?.dispose();
 	}
 	open(e = !1) {
-		this.isOpen || (this.logger.trace("open"), this.isOpen = !0, this.transitionService.run(this.element, (t) => {
-			e || this.ea.publish(E.Overlay, { action: O.Open }), this.ea.publish(E.MenuStatus, { status: L.Opening }), w(t, "menu", "show"), t.ariaHidden = "false";
-		}, (e) => {
-			this.ea.publish(E.MenuStatus, { status: L.Opened });
-		}));
+		if (!this.isOpen) {
+			this.logger.trace("open"), this.isOpen = !0;
+			let t = this.p.document.activeElement;
+			this.transitionService.run(this.element, (n) => {
+				e || this.ea.publish(E.Overlay, { action: O.Open }), this.ea.publish(E.MenuStatus, { status: L.Opening }), w(n, "menu", "show"), w(this.p.document.body, "menu-page", "show", n), n.ariaHidden = "false", this.isOpen === !0 && this.trapFocusService.start(t, n, this.p.document.body, void 0, this.onStopTrapFocus, this.closeButton);
+			}, (e) => {
+				this.ea.publish(E.MenuStatus, { status: L.Opened });
+			});
+		}
 	}
 	close(e = !1) {
-		this.isOpen && (this.logger.trace("close"), this.isOpen = !1, this.transitionService.run(this.element, (t) => {
-			this.ea.publish(E.MenuStatus, { status: L.Closing }), e || this.ea.publish(E.Overlay, { action: O.Close }), w(t, "menu", "hide"), t.ariaHidden = "true";
+		this.isOpen && (this.logger.trace("close"), this.closingFromOverlay = e, this.trapFocusService.stop().catch((e) => {
+			this.logger.trace("close: no trap started", e), this.hide();
+		}));
+	}
+	hide() {
+		this.logger.trace("hide");
+		let e = this.closingFromOverlay;
+		this.isOpen = !1, this.closingFromOverlay = !1, this.transitionService.run(this.element, (t) => {
+			this.ea.publish(E.MenuStatus, { status: L.Closing }), e || this.ea.publish(E.Overlay, { action: O.Close }), w(t, "menu", "hide"), w(this.p.document.body, "menu-page", "hide", t), t.ariaHidden = "true";
 		}, (e) => {
 			this.ea.publish(E.MenuStatus, { status: L.Closed });
-		}));
+		});
 	}
+	onStopTrapFocus = () => (this.logger.trace("onStopTrapFocus"), this.hide(), Promise.resolve());
 	onClickClose = (e) => {
 		this.logger.trace("onClickClose", e), e.preventDefault(), this.close();
 	};
+	onClickLink = (e) => {
+		let t = e.target.closest("a");
+		t !== null && this.isOpen === !0 && (this.logger.trace("onClickLink", t), this.close());
+	};
 	onClickToggleButtons = (e) => {
 		let t = e.target.closest("[data-menu^=\"toggle-button\"]");
 		t && t.matches("[data-menu^=\"toggle-button\"]") && (e.preventDefault(), this.toggleButton(t));