@vielzeug/refine 2.3.0 → 3.0.0

package/dist/sidebar.js

@@ -4,82 +4,95 @@ import r from "./layout/sidebar/sidebar.css.js";
 import i from "./layout/sidebar/sidebar-group.css.js";
 import a from "./layout/sidebar/sidebar-item.css.js";
 import { bind as o, createContext as s, define as c, getHost as l, html as u, inject as d, onCleanup as f, onMounted as p, prop as m, provide as h, useEmit as g, useSlots as _ } from "@vielzeug/ore";
-import { computed as v, signal as y, watch as b } from "@vielzeug/ripple";
-import { SentinelUnavailableError as x, createElementSize as S, createMediaQuery as C } from "@vielzeug/sentinel";
+import { computed as v, fromSubscribable as y, signal as b, watch as x } from "@vielzeug/ripple";
+import { SentinelUnavailableError as S, createElementSize as C, createMediaQuery as w } from "@vielzeug/sentinel";
 //#region src/layout/sidebar/sidebar.ts
-var w = (e) => {
+var T = (e) => {
 	let t = String(e ?? "").trim();
 	if (!t) return;
 	let n = /max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);
 	if (!n) return;
 	let r = Number.parseFloat(n[1]);
 	return Number.isFinite(r) ? r : void 0;
-}, T = (e) => {
+}, E = (e) => {
 	let t = e.parentElement;
 	for (; t?.tagName.toLowerCase() === "ore-grid-item";) t = t.parentElement;
 	return t;
-}, E = (e) => {
-	let t = T(e)?.clientWidth ?? 0;
+}, D = (e) => {
+	let t = E(e)?.clientWidth ?? 0;
 	return t > 0 ? t : e.offsetWidth;
-}, D = s("SidebarContext"), O = "ore-sidebar";
-c(O, {
+}, O = () => {
+	let e = document.activeElement;
+	for (; e?.shadowRoot?.activeElement instanceof HTMLElement;) e = e.shadowRoot.activeElement;
+	return e;
+}, k = s("SidebarContext"), A = "ore-sidebar";
+c(A, {
 	props: {
 		"bottom-nav-at": m.string(),
+		"close-on-select": m.bool(!1),
+		"collapse-label": m.string("Collapse sidebar"),
 		collapsed: m.bool(!1),
 		collapsible: m.bool(!1),
 		"container-breakpoints": m.bool(!1),
 		"default-collapsed": m.bool(!1),
+		"expand-label": m.string("Expand sidebar"),
 		label: m.string("Sidebar navigation"),
+		"mobile-close-label": m.string("Close sidebar"),
 		responsive: m.string(),
 		variant: m.string()
 	},
 	setup(e) {
-		let t = l(), n = g(), r = _(), i = () => r.has("header").value, a = () => r.has("footer").value, s = () => r.has("logo").value, c = y(t.hasAttribute("collapsed")), d = y(c.value ? t.hasAttribute("collapsed") : e["default-collapsed"].value), m = y(!1), O = y(!1), k = y([]), A = y(!1), j = y(!1), M = y(w(e.responsive.value)), N = y(!!String(e.responsive.value ?? "").trim()), P = y(!1), F = y(!1), I = y(w(e["bottom-nav-at"].value)), L = y(!1), R = () => d.value, z = v(() => m.value ? "bottom-nav" : d.value ? "collapsed" : "default"), B = () => {
-			let t = e["container-breakpoints"].value, n = t ? j.value : A.value || j.value, r = t ? F.value : P.value || F.value;
-			O.value || (m.value = r), !r && !O.value && U(!1, "responsive"), N.value && H(n, "responsive");
-		}, V = () => {
-			let e = r.elements().value.filter((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "ore-sidebar-item").map((e, t) => {
-				let n = e.querySelector(":scope > [slot=\"icon\"]") ?? e.querySelector("[slot=\"icon\"]"), r = n?.tagName.toLowerCase() === "ore-icon" ? n.getAttribute("name") : null, i = n?.querySelector("ore-icon")?.getAttribute("name") ?? null, a = (e.textContent ?? "").trim();
+		let t = l(), n = g(), r = _(), i = () => r.has("header").value, a = () => r.has("footer").value, s = () => r.has("logo").value, c = b(t.hasAttribute("collapsed")), d = b(c.value ? t.hasAttribute("collapsed") : e["default-collapsed"].value), m = b(!1), A = b(!1), j = b([]), M = b(!1), N = b(!1), P = b(T(e.responsive.value)), F = b(!!String(e.responsive.value ?? "").trim()), I = b(!1), L = b(!1), R = b(T(e["bottom-nav-at"].value)), z = b(!1), B = null, V = () => d.value, H = v(() => m.value ? "bottom-nav" : d.value ? "collapsed" : "default"), U = () => {
+			let t = e["container-breakpoints"].value, n = t ? N.value : M.value || N.value, r = t ? L.value : I.value || L.value;
+			A.value || (m.value = r), !r && !A.value && K(!1, "responsive"), F.value && G(n, "responsive");
+		}, W = () => {
+			let e = r.elements().value.filter((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "ore-sidebar-item"), n = [...t.querySelectorAll("ore-sidebar-item[bottom-nav]")], i = (n.length > 0 ? n : e).map((e, t) => {
+				let n = e, r = n.querySelector(":scope > [slot=\"icon\"]") ?? n.querySelector("[slot=\"icon\"]"), i = r?.tagName.toLowerCase() === "ore-icon" ? r.getAttribute("name") : null, a = r?.querySelector("ore-icon")?.getAttribute("name") ?? null, o = (n.textContent ?? "").trim();
 				return {
-					active: e.hasAttribute("active"),
-					disabled: e.hasAttribute("disabled"),
-					href: e.getAttribute("href") ?? void 0,
-					iconName: r ?? i ?? void 0,
-					label: a || `Item ${t + 1}`,
-					source: e
+					active: n.hasAttribute("active"),
+					disabled: n.hasAttribute("disabled"),
+					href: n.getAttribute("href") ?? void 0,
+					iconName: i ?? a ?? void 0,
+					label: n.getAttribute("bottom-nav-label")?.trim() || o || `Item ${t + 1}`,
+					source: n
 				};
 			});
-			k.value = e;
+			j.value = i;
 		};
-		h(D, {
+		h(k, {
+			closeMobile: () => K(!1, "toggle"),
+			closeOnSelect: e["close-on-select"],
 			collapsed: v(() => !m.value && d.value),
-			mobileOpen: v(() => m.value && O.value),
-			mode: z,
+			mobileOpen: v(() => m.value && A.value),
+			mode: H,
 			variant: e.variant
 		});
-		let H = (e, t) => {
-			R() !== e && (c.value || (d.value = e), n("collapsed-change", {
+		let G = (e, t) => {
+			V() !== e && (c.value || (d.value = e), n("collapsed-change", {
 				collapsed: e,
 				source: t
 			}));
-		}, U = (e, t) => {
-			let r = !!e;
-			if (r && !m.value && (m.value = !0), !m.value && !r) {
-				O.value &&= !1;
+		}, K = (e, r) => {
+			let i = !!e;
+			if (i && !m.value && (m.value = !0), !m.value && !i) {
+				A.value &&= !1;
 				return;
 			}
-			O.value !== r && (O.value = r, r || B(), n("mobile-open-change", {
-				open: r,
-				source: t
+			A.value !== i && (i && (B = O()), A.value = i, i ? queueMicrotask(() => t.shadowRoot?.querySelector("nav")?.focus()) : (U(), queueMicrotask(() => {
+				B?.isConnected && B.focus(), B = null;
+			})), n("mobile-open-change", {
+				open: i,
+				source: r
 			}));
-		}, W = () => {
-			H(!R(), "toggle");
-		}, G = t;
-		return G.setCollapsed = (e) => H(!!e, "api"), G.toggle = W, G.openMobile = () => U(!0, "api"), G.closeMobile = () => U(!1, "api"), G.toggleMobile = () => U(!O.value, "toggle"), o({ attr: {
+		}, q = () => {
+			G(!V(), "toggle");
+		}, J = t;
+		return J.setCollapsed = (e) => G(!!e, "api"), J.toggle = q, J.openMobile = () => K(!0, "api"), J.closeMobile = () => K(!1, "api"), J.toggleMobile = () => K(!A.value, "toggle"), o({ attr: {
 			"data-bottom-nav": () => m.value ? !0 : void 0,
-			"data-collapsed": () => R() && !m.value ? !0 : void 0,
-			"data-mobile-open": () => m.value && O.value ? !0 : void 0,
-			"data-preview-mode": () => L.value ? !0 : void 0
+			"data-collapsed": () => V() && !m.value ? !0 : void 0,
+			"data-has-logo": () => s() ? !0 : void 0,
+			"data-mobile-open": () => m.value && A.value ? !0 : void 0,
+			"data-preview-mode": () => z.value ? !0 : void 0
 		} }), p(() => {
 			t.setAttribute("data-no-transition", "");
 			let n = !1, i = () => {
@@ -87,88 +100,101 @@ c(O, {
 			};
 			requestAnimationFrame(() => requestAnimationFrame(i));
 			let a, o, s = /* @__PURE__ */ new Map(), l = new MutationObserver(() => {
-				!t.hasAttribute("collapsed") && !c.value || (c.value = !0, d.value = t.hasAttribute("collapsed"));
+				(t.hasAttribute("collapsed") || c.value) && (c.value = !0, d.value = t.hasAttribute("collapsed"));
 			});
 			l.observe(t, {
 				attributeFilter: ["collapsed"],
 				attributes: !0
-			}), b(e.responsive, (n) => {
+			});
+			let u = (e) => {
+				e.key === "Escape" && A.value && (e.preventDefault(), K(!1, "toggle"));
+			};
+			t.addEventListener("keydown", u), x(e.responsive, (n) => {
 				a?.(), a = void 0;
 				let r = String(n ?? "").trim();
-				N.value = !!r, M.value = w(r), A.value = !1;
-				let i = E(t);
-				if (j.value = i > 0 && M.value != null && i <= M.value, B(), !(e["container-breakpoints"].value && M.value != null) && r) try {
-					let e = C(r), t = (e) => {
-						e && (A.value = e.matches, B());
+				F.value = !!r, P.value = T(r), M.value = !1;
+				let i = D(t);
+				if (N.value = i > 0 && P.value != null && i <= P.value, U(), !(e["container-breakpoints"].value && P.value != null) && r) try {
+					let e = w(r), t = (e) => {
+						e && (M.value = e.matches, U());
 					};
-					t(e.value);
-					let n = b(e, t);
+					t(e.getSnapshot());
+					let n = x(y(e, { signal: e.disposalSignal }), t);
 					a = () => {
 						n.dispose(), e.dispose();
 					};
 				} catch (e) {
-					if (!(e instanceof x)) throw e;
+					if (!(e instanceof S)) throw e;
 				}
-			}, { immediate: !0 }), b(e["bottom-nav-at"], (n) => {
+			}, { immediate: !0 }), x(e["bottom-nav-at"], (n) => {
 				o?.(), o = void 0;
 				let r = String(n ?? "").trim();
-				I.value = w(r), P.value = !1;
-				let i = E(t);
-				if (F.value = i > 0 && I.value != null && i <= I.value, B(), !(e["container-breakpoints"].value && I.value != null) && r) try {
-					let e = C(r), t = (e) => {
-						e && (P.value = e.matches, B());
+				R.value = T(r), I.value = !1;
+				let i = D(t);
+				if (L.value = i > 0 && R.value != null && i <= R.value, U(), !(e["container-breakpoints"].value && R.value != null) && r) try {
+					let e = w(r), t = (e) => {
+						e && (I.value = e.matches, U());
 					};
-					t(e.value);
-					let n = b(e, t);
+					t(e.getSnapshot());
+					let n = x(y(e, { signal: e.disposalSignal }), t);
 					o = () => {
 						n.dispose(), e.dispose();
 					};
 				} catch (e) {
-					if (!(e instanceof x)) throw e;
+					if (!(e instanceof S)) throw e;
 				}
 			}, { immediate: !0 });
-			let u = typeof ResizeObserver == "function" ? (() => {
-				let e = S(t);
+			let p = typeof ResizeObserver == "function" ? (() => {
+				let e = C(t);
 				f(() => e.dispose());
-				let n = t.parentElement, r = T(t), a = n ? S(n) : void 0, o = r && r !== n ? S(r) : void 0;
-				a && f(() => a.dispose()), o && f(() => o.dispose());
-				let s;
-				return b(v(() => [
-					e.value?.width,
-					e.value?.height,
-					a?.value?.width,
-					a?.value?.height,
-					o?.value?.width,
-					o?.value?.height
+				let n = y(e, { signal: e.disposalSignal }), r = t.parentElement, a = E(t), o = r ? C(r) : void 0, s = a && a !== r ? C(a) : void 0;
+				o && f(() => o.dispose()), s && f(() => s.dispose());
+				let c = o ? y(o, { signal: o.disposalSignal }) : void 0, l = s ? y(s, { signal: s.disposalSignal }) : void 0, u;
+				return x(v(() => [
+					n.value?.width,
+					n.value?.height,
+					c?.value?.width,
+					c?.value?.height,
+					l?.value?.width,
+					l?.value?.height
 				]), () => {
-					s !== void 0 && cancelAnimationFrame(s), s = requestAnimationFrame(() => {
-						let e = T(t), n = E(t), r = j.value, a = F.value, o = e?.clientWidth ?? 0;
-						L.value = o > 0 && o < window.innerWidth, j.value = n > 0 && M.value != null && n <= M.value, F.value = n > 0 && I.value != null && n <= I.value, (r !== j.value || a !== F.value) && B(), i();
+					u !== void 0 && cancelAnimationFrame(u), u = requestAnimationFrame(() => {
+						let e = E(t), n = D(t), r = N.value, a = L.value, o = e?.clientWidth ?? 0;
+						z.value = o > 0 && o < window.innerWidth, N.value = n > 0 && P.value != null && n <= P.value, L.value = n > 0 && R.value != null && n <= R.value, (r !== N.value || a !== L.value) && U(), i();
 					});
 				});
-			})() : void 0, p = (e) => {
+			})() : void 0, h = (e) => {
 				let t = new Set(e);
 				for (let [e, n] of s) t.has(e) || (n.disconnect(), s.delete(e));
 				for (let t of e) {
 					if (s.has(t)) continue;
 					let e = new MutationObserver(() => {
-						m.value && V();
+						m.value && W();
 					});
 					e.observe(t, {
 						attributeFilter: [
 							"active",
+							"bottom-nav",
+							"bottom-nav-label",
 							"disabled",
 							"href"
 						],
-						attributes: !0
+						attributes: !0,
+						characterData: !0,
+						childList: !0,
+						subtree: !0
 					}), s.set(t, e);
 				}
+			}, g = () => {
+				h([...t.querySelectorAll("ore-sidebar-item")]), W();
 			};
-			return b(r.elements(), (e) => {
-				let t = e.filter((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "ore-sidebar-item");
-				p(t), V();
-			}, { immediate: !0 }), () => {
-				l.disconnect(), a?.(), o?.(), u?.dispose();
+			x(r.elements(), g, { immediate: !0 });
+			let _ = new MutationObserver(g);
+			return _.observe(t, {
+				childList: !0,
+				subtree: !0
+			}), () => {
+				l.disconnect(), _.disconnect(), t.removeEventListener("keydown", u), a?.(), o?.(), p?.dispose();
 				for (let e of s.values()) e.disconnect();
 				s.clear();
 			};
@@ -177,10 +203,10 @@ c(O, {
         class="mobile-backdrop"
         part="mobile-backdrop"
         type="button"
-        aria-label="Close sidebar"
-        ?hidden=${() => !m.value || !O.value}
-        @click=${() => U(!1, "toggle")}></button>
-      <nav aria-label="${e.label}" part="nav">
+        aria-label="${e["mobile-close-label"]}"
+        ?hidden=${() => !m.value || !A.value}
+        @click=${() => K(!1, "toggle")}></button>
+      <nav aria-label="${e.label}" part="nav" tabindex="-1">
         <div class="sidebar-header" part="header" ?hidden=${() => !i() && !e.collapsible.value}>
           <span class="sidebar-logo" ?hidden=${() => !s()}>
             <slot name="logo"></slot>
@@ -193,12 +219,15 @@ c(O, {
             part="toggle-btn"
             type="button"
             ?hidden=${() => !e.collapsible.value}
-            aria-label="${() => R() ? "Expand sidebar" : "Collapse sidebar"}"
-            aria-expanded="${() => !R()}"
-            @click="${W}">
-            <span class="toggle-icon" aria-hidden="true">
-              <ore-icon name="chevron-left" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
-            </span>
+            aria-label="${() => V() ? e["expand-label"].value : e["collapse-label"].value}"
+            aria-expanded="${() => !V()}"
+            @click="${q}">
+            <ore-icon
+              class="toggle-icon"
+              name=${() => V() ? "panel-left-open" : "panel-left-close"}
+              size="18"
+              stroke-width="2"
+              aria-hidden="true"></ore-icon>
           </button>
         </div>
         <div class="sidebar-content" part="content">
@@ -210,7 +239,7 @@ c(O, {
       </nav>
 
       <div class="bottom-bar" part="bottom-bar" ?hidden=${() => !m.value}>
-        ${() => k.value.map((e) => {
+        ${() => j.value.map((e) => {
 			let t = `bottom-tab${e.active ? " bottom-tab-active" : ""}`;
 			return e.href && !e.disabled ? u`
                 <a
@@ -247,8 +276,8 @@ c(O, {
 		r
 	]
 });
-var k = "ore-sidebar-group";
-c(k, {
+var j = "ore-sidebar-group";
+c(j, {
 	props: {
 		collapsible: m.bool(!1),
 		"default-open": m.bool(!0),
@@ -260,13 +289,13 @@ c(k, {
 		}
 	},
 	setup(e) {
-		let t = _(), n = () => t.has("icon").value, r = d(D);
+		let t = _(), n = () => t.has("icon").value, r = d(k);
 		o({ attr: {
 			"sidebar-bottom-nav": () => r?.mode.value === "bottom-nav" && !r?.mobileOpen.value || void 0,
 			"sidebar-collapsed": () => r?.collapsed.value ? !0 : void 0
 		} });
-		let i = () => e.open.value !== void 0, a = y(e["default-open"].value), s = v(() => e.collapsible.value ? i() ? e.open.value ?? !1 : a.value : !0);
-		return b(e.open, (e) => {
+		let i = () => e.open.value !== void 0, a = b(e["default-open"].value), s = v(() => e.collapsible.value ? i() ? e.open.value ?? !1 : a.value : !0);
+		return x(e.open, (e) => {
 			e !== void 0 && (a.value = e);
 		}), o({ attr: { open: () => s.value ? !0 : void 0 } }), u`
       <details class="group" part="group" ?open=${s}>
@@ -293,22 +322,26 @@ c(k, {
 	},
 	styles: [t, i]
 });
-var A = "ore-sidebar-item";
-c(A, {
+var M = "ore-sidebar-item";
+c(M, {
 	props: {
 		active: m.bool(!1),
+		"bottom-nav": m.bool(!1),
+		"bottom-nav-label": m.string(),
 		disabled: m.bool(!1),
 		href: m.string(),
 		rel: m.string(),
 		target: m.string()
 	},
 	setup(e) {
-		let t = _(), r = () => t.has("icon").value, i = () => t.has("end").value, a = d(D);
+		let t = _(), r = () => t.has("icon").value, i = () => t.has("end").value, a = d(k);
 		o({ attr: {
 			"sidebar-bottom-nav": () => a?.mode.value === "bottom-nav" && !a?.mobileOpen.value || void 0,
 			"sidebar-collapsed": () => a?.collapsed.value ? !0 : void 0
 		} });
-		let s = () => !!e.href.value && !e.disabled.value, c = v(() => n(e.rel.value, e.target.value)), l = () => u`
+		let s = () => !!e.href.value && !e.disabled.value, c = v(() => n(e.rel.value, e.target.value)), l = (e) => {
+			a?.closeOnSelect.value && a.mobileOpen.value && (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || queueMicrotask(a.closeMobile));
+		}, f = () => u`
       <span class="item-icon" part="item-icon" ?hidden=${() => !r()} aria-hidden="true">
         <slot name="icon"></slot>
       </span>
@@ -325,8 +358,9 @@ c(A, {
               href="${e.href}"
               rel="${c}"
               target="${e.target}"
-              aria-current="${() => e.active.value ? "page" : null}">
-              ${l()}
+              aria-current="${() => e.active.value ? "page" : null}"
+              @click=${l}>
+              ${f()}
             </a>
           ` : e.disabled.value ? u`
             <div
@@ -335,7 +369,7 @@ c(A, {
               aria-disabled="true"
               tabindex="-1"
               aria-current="${() => e.active.value ? "page" : null}">
-              ${l()}
+              ${f()}
             </div>
           ` : u`
           <button
@@ -343,8 +377,9 @@ c(A, {
             part="item"
             type="button"
             ?disabled="${e.disabled}"
-            aria-current="${() => e.active.value ? "page" : null}">
-            ${l()}
+            aria-current="${() => e.active.value ? "page" : null}"
+            @click=${l}>
+            ${f()}
           </button>
         `}
     `;
@@ -352,6 +387,6 @@ c(A, {
 	styles: [e, a]
 });
 //#endregion
-export { D as SIDEBAR_CTX, k as SIDEBAR_GROUP_TAG, A as SIDEBAR_ITEM_TAG, O as SIDEBAR_TAG };
+export { k as SIDEBAR_CTX, j as SIDEBAR_GROUP_TAG, M as SIDEBAR_ITEM_TAG, A as SIDEBAR_TAG };
 
 //# sourceMappingURL=sidebar.js.map