@devslab/dds-solid 0.28.0 → 0.29.0

package/dist/index.js

@@ -4,126 +4,165 @@ import { t as l } from "./direction-CS85IDNU.js";
 import { DatePicker as u } from "./date-picker.js";
 import { t as d } from "./time-picker-BWz2wQUk.js";
 import { DateRangePicker as f } from "./date-range-picker.js";
-import { MonthPicker as p } from "./month-picker.js";
-import { Input as m, InputGroup as h } from "./input.js";
-import { Combobox as g } from "./combobox.js";
-import { SelectPicker as _ } from "./select-picker.js";
-import { DropdownMenu as v } from "./dropdown-menu.js";
-import { Popover as y } from "./popover.js";
-import { Calendar as b } from "./calendar.js";
-import { SegmentedControl as x, validateSegmentedItems as S } from "./segmented-control.js";
-import { NumberInput as C, normalizeNumberText as w, numberInputMessages as T } from "./number-input.js";
-import { For as E, Show as D, createContext as O, createEffect as k, createMemo as A, createSignal as j, createUniqueId as M, getOwner as N, mergeProps as P, onCleanup as F, onMount as I, splitProps as L, useContext as ee } from "solid-js";
-import { Dynamic as te, Portal as ne, className as R, createComponent as z, delegateEvents as re, effect as B, getNextElement as V, getNextMarker as H, insert as U, isServer as ie, memo as W, mergeProps as G, runHydrationEvents as K, setAttribute as q, setProperty as ae, spread as oe, template as J } from "solid-js/web";
-import { Dialog as Y, useDialog as se } from "@ark-ui/solid/dialog";
-import { usePresenceContext as ce } from "@ark-ui/solid/presence";
-import { FocusTrap as le } from "@zag-js/focus-trap";
-import { ariaHidden as ue } from "@zag-js/aria-hidden";
+import { MonthPicker as ee } from "./month-picker.js";
+import { Input as p, InputGroup as m } from "./input.js";
+import { Combobox as h } from "./combobox.js";
+import { SelectPicker as g } from "./select-picker.js";
+import { DropdownMenu as _ } from "./dropdown-menu.js";
+import { Popover as v } from "./popover.js";
+import { Calendar as y } from "./calendar.js";
+import { SegmentedControl as b, validateSegmentedItems as x } from "./segmented-control.js";
+import { NumberInput as S, normalizeNumberText as C, numberInputMessages as w } from "./number-input.js";
+import { For as T, Show as E, createContext as D, createEffect as O, createMemo as te, createSignal as k, createUniqueId as A, getOwner as j, mergeProps as M, onCleanup as N, onMount as P, splitProps as F, useContext as ne } from "solid-js";
+import { Dynamic as re, Portal as ie, className as I, createComponent as L, delegateEvents as R, effect as z, getNextElement as B, getNextMarker as V, insert as H, isServer as ae, memo as U, mergeProps as W, runHydrationEvents as G, setAttribute as K, setProperty as oe, spread as se, template as q, use as J } from "solid-js/web";
+import { Dialog as Y, useDialog as ce } from "@ark-ui/solid/dialog";
+import { usePresenceContext as le } from "@ark-ui/solid/presence";
+import { FocusTrap as ue } from "@zag-js/focus-trap";
+import { ariaHidden as de } from "@zag-js/aria-hidden";
 import { RadioGroup as X } from "@ark-ui/solid/radio-group";
-import { directionPolicy as de, icons as fe } from "@devslab/dds-icons";
-import { Tabs as Z, useTabsContext as pe } from "@ark-ui/solid/tabs";
-import { LocaleProvider as me } from "@ark-ui/solid/locale";
-import { Toast as Q, Toaster as he, createToaster as ge } from "@ark-ui/solid/toast";
-import { space as _e } from "@devslab/dds-tokens";
-import { Tooltip as $, useTooltip as ve } from "@ark-ui/solid/tooltip";
-//#region src/console-shell.tsx
-var ye = /*#__PURE__*/ J("<dl class=dds-console-rail__context>"), be = /*#__PURE__*/ J("<div class=dds-console-rail__foot>"), xe = /*#__PURE__*/ J("<p class=dds-console-page-eyebrow>"), Se = /*#__PURE__*/ J("<div class=dds-console-page-header__actions>"), Ce = /*#__PURE__*/ J("<div class=dds-console-shell><a class=\"dds-console-skip dds-visually-hidden\"href=#dds-console-main></a><button class=dds-console-rail__toggle type=button data-action=toggle-rail aria-controls=dds-console-rail><span aria-hidden=true></span><span class=dds-visually-hidden></span></button><div class=dds-console-rail__scrim></div><aside id=dds-console-rail class=dds-console-rail><a class=dds-console-rail__brand><img alt width=20 height=20><strong></strong></a><!$><!/><nav class=dds-console-rail__nav></nav><!$><!/></aside><main id=dds-console-main class=dds-console-main tabindex=-1><header class=dds-console-page-header><div class=dds-console-page-header__text><!$><!/><h1></h1></div><!$><!/></header><!$><!/>"), we = /*#__PURE__*/ J("<div><dt></dt><dd>"), Te = /*#__PURE__*/ J("<section class=dds-console-rail__group><h2 class=dds-console-rail__group-label></h2><ul>"), Ee = /*#__PURE__*/ J("<span class=dds-console-rail__badge>"), De = /*#__PURE__*/ J("<li><a class=dds-console-rail__item><span></span><!$><!/>");
-function Oe(e, t, n) {
+import { directionPolicy as fe, icons as pe } from "@devslab/dds-icons";
+import { Tabs as Z, useTabsContext as me } from "@ark-ui/solid/tabs";
+import { LocaleProvider as he } from "@ark-ui/solid/locale";
+import { Toast as Q, Toaster as ge, createToaster as _e } from "@ark-ui/solid/toast";
+import { space as ve } from "@devslab/dds-tokens";
+import { Tooltip as $, useTooltip as ye } from "@ark-ui/solid/tooltip";
+//#region src/left-nav.tsx
+var be = /*#__PURE__*/ q("<nav class=\"dds-console-rail__nav dds-left-nav\">"), xe = /*#__PURE__*/ q("<button type=button class=dds-console-rail__group-toggle><span></span><span class=dds-console-rail__chevron aria-hidden=true>"), Se = /*#__PURE__*/ q("<section class=dds-console-rail__group><h2 class=dds-console-rail__group-label></h2><ul>"), Ce = /*#__PURE__*/ q("<span class=dds-console-rail__item-content><span class=dds-console-rail__item-icon aria-hidden=true></span><span>"), we = /*#__PURE__*/ q("<span class=dds-console-rail__badge>"), Te = /*#__PURE__*/ q("<li><a class=dds-console-rail__item><!$><!/><!$><!/>"), Ee = /*#__PURE__*/ q("<span>");
+function De(e, t, n) {
 	return n === void 0 ? t.split("/").filter(Boolean).length <= 1 ? e === t : e === t || e.startsWith(`${t}/`) : n;
 }
-function ke(e, t) {
+function Oe(e, t) {
 	return e.replace("{count}", () => String(t));
 }
-function Ae(e) {
-	let [t, n] = j(!1), r = () => n(!1), [i, a] = j(!1);
-	return I(() => {
-		a(!0);
-		let e = (e) => {
-			e.key === "Escape" && r();
-		};
-		document.addEventListener("keydown", e), F(() => document.removeEventListener("keydown", e));
-	}), (() => {
-		var a = V(Ce), o = a.firstChild, s = o.nextSibling, c = s.firstChild.nextSibling, l = s.nextSibling, u = l.nextSibling, d = u.firstChild, f = d.firstChild, p = f.nextSibling, m = d.nextSibling, [h, g] = H(m.nextSibling), _ = h.nextSibling, v = _.nextSibling, [y, b] = H(v.nextSibling), x = u.nextSibling, S = x.firstChild, C = S.firstChild, w = C.firstChild, [T, O] = H(w.nextSibling), k = T.nextSibling, A = C.nextSibling, [j, N] = H(A.nextSibling), P = S.nextSibling, [F, I] = H(P.nextSibling);
-		return U(o, () => e.labels.skip), s.$$click = () => n(!t()), U(c, (() => {
-			var n = W(() => !!t());
-			return () => n() ? e.labels.menuClose : e.labels.menuOpen;
-		})()), l.$$click = r, U(p, () => e.brand.name), U(u, z(D, {
-			get when() {
-				return W(() => !!e.context)() && e.context.length > 0;
-			},
-			get children() {
-				var t = V(ye);
-				return U(t, z(E, {
-					get each() {
-						return e.context;
-					},
-					children: (e) => (() => {
-						var t = V(we), n = t.firstChild, r = n.nextSibling;
-						return U(n, () => e.label), U(r, () => e.value), t;
-					})()
-				})), t;
-			}
-		}), h, g), U(_, z(E, {
+function ke(e) {
+	let [t, n] = k(e.defaultExpandedGroups ?? e.nav.flatMap((t, n) => t.collapsible && t.items.some((t) => De(e.activePath, t.href, t.active)) ? [t.id ?? `group-${n}`] : [])), r = () => e.expandedGroups ?? t(), i = (t) => {
+		let i = r().includes(t) ? r().filter((e) => e !== t) : [...r(), t];
+		e.expandedGroups === void 0 && n(i), e.onExpandedGroupsChange?.(i);
+	};
+	return (() => {
+		var t = B(be);
+		return H(t, L(T, {
 			get each() {
 				return e.nav;
 			},
-			children: (t) => {
-				let n = `dds-console-group-${M()}`;
+			children: (t, n) => {
+				let a = `dds-console-group-${A()}`, o = `${a}-items`, s = () => t.id ?? `group-${n()}`, c = () => !t.collapsible || r().includes(s());
 				return (() => {
-					var i = V(Te), a = i.firstChild, o = a.nextSibling;
-					return q(i, "aria-labelledby", n), q(a, "id", n), U(a, () => t.label), U(o, z(E, {
+					var n = B(Se), r = n.firstChild, l = r.nextSibling;
+					return K(n, "aria-labelledby", a), K(r, "id", a), H(r, L(E, {
+						get when() {
+							return t.collapsible;
+						},
+						get fallback() {
+							return t.label;
+						},
+						get children() {
+							var e = B(xe), n = e.firstChild;
+							return e.$$click = () => i(s()), K(e, "aria-controls", o), H(n, () => t.label), z(() => K(e, "aria-expanded", c())), G(), e;
+						}
+					})), K(l, "id", o), H(l, L(T, {
 						get each() {
 							return t.items;
 						},
 						children: (t) => (() => {
-							var n = V(De), i = n.firstChild, a = i.firstChild, o = a.nextSibling, [s, c] = H(o.nextSibling);
-							return i.$$click = r, U(a, () => t.label), U(i, z(D, {
+							var n = B(Te), r = n.firstChild, i = r.firstChild, [a, o] = V(i.nextSibling), s = a.nextSibling, [c, l] = V(s.nextSibling);
+							return r.$$click = () => e.onNavigate?.(), H(r, L(E, {
 								get when() {
-									return W(() => t.badge !== void 0)() && t.badge > 0;
+									return t.icon != null;
+								},
+								get fallback() {
+									return (() => {
+										var e = B(Ee);
+										return H(e, () => t.label), e;
+									})();
 								},
 								get children() {
-									var n = V(Ee);
-									return U(n, () => t.badge), B(() => q(n, "aria-label", ke(e.labels.badge, t.badge))), n;
+									var e = B(Ce), n = e.firstChild, r = n.nextSibling;
+									return H(n, () => t.icon), H(r, () => t.label), e;
 								}
-							}), s, c), B((n) => {
-								var r = `${e.surface}.${t.id}`, a = t.href, o = Oe(e.activePath, t.href, t.active) ? "page" : void 0;
-								return r !== n.e && q(i, "data-nav", n.e = r), a !== n.t && q(i, "href", n.t = a), o !== n.a && q(i, "aria-current", n.a = o), n;
+							}), a, o), H(r, L(E, {
+								get when() {
+									return U(() => t.badge !== void 0)() && t.badge > 0;
+								},
+								get children() {
+									var n = B(we);
+									return H(n, () => t.badge), z(() => K(n, "aria-label", Oe(e.labels.badge, t.badge))), n;
+								}
+							}), c, l), z((n) => {
+								var i = `${e.surface}.${t.id}`, a = t.href, o = De(e.activePath, t.href, t.active) ? "page" : void 0;
+								return i !== n.e && K(r, "data-nav", n.e = i), a !== n.t && K(r, "href", n.t = a), o !== n.a && K(r, "aria-current", n.a = o), n;
 							}, {
 								e: void 0,
 								t: void 0,
 								a: void 0
-							}), K(), n;
+							}), G(), n;
 						})()
-					})), i;
+					})), z((e) => {
+						var r = t.collapsible ? "true" : void 0, i = !c();
+						return r !== e.e && K(n, "data-collapsible", e.e = r), i !== e.t && oe(l, "hidden", e.t = i), e;
+					}, {
+						e: void 0,
+						t: void 0
+					}), n;
 				})();
 			}
-		})), U(u, z(D, {
-			get when() {
-				return e.foot;
-			},
-			get children() {
-				var t = V(be);
-				return U(t, () => e.foot), t;
-			}
-		}), y, b), U(C, z(D, {
-			get when() {
-				return e.header.eyebrow;
-			},
-			get children() {
-				var t = V(xe);
-				return U(t, () => e.header.eyebrow), t;
-			}
-		}), T, O), U(k, () => e.header.title), U(S, z(D, {
-			get when() {
-				return e.header.actions;
-			},
-			get children() {
-				var t = V(Se);
-				return U(t, () => e.header.actions), t;
+		})), z(() => K(t, "aria-label", e.labels.nav)), t;
+	})();
+}
+R(["click"]);
+//#endregion
+//#region src/layout.tsx
+var Ae = /*#__PURE__*/ q("<div class=\"dds-console-shell dds-layout\"><a class=\"dds-console-skip dds-visually-hidden\"></a><button class=dds-console-rail__toggle type=button data-action=toggle-rail><span aria-hidden=true></span><span class=dds-visually-hidden></span></button><div class=dds-console-rail__scrim></div><aside class=\"dds-console-rail dds-layout__navigation\"><!$><!/><!$><!/><!$><!/></aside><main class=\"dds-console-main dds-layout__main\"tabindex=-1><div class=dds-layout__content><!$><!/><!$><!/><!$><!/>"), je = /*#__PURE__*/ q("<header class=dds-layout__header>"), Me = /*#__PURE__*/ q("<footer class=dds-layout__footer>");
+function Ne(e) {
+	let t = A(), n = `dds-console-rail-${t}`, r = `dds-console-main-${t}`, [i, a] = k(!1), [o, s] = k(!1), c, l;
+	function u() {
+		a(!1), c?.focus();
+	}
+	function d() {
+		return [c, ...Array.from(l?.querySelectorAll("a[href],button,summary,input,select,textarea,[tabindex=\"0\"]") ?? [])].filter((e) => !!e && !e.closest("[hidden]") && e.getClientRects().length > 0 && getComputedStyle(e).visibility !== "hidden" && !Array.from(l?.querySelectorAll("details:not([open])") ?? []).some((t) => t.contains(e) && !t.querySelector("summary")?.contains(e)) && !e.hasAttribute("disabled"));
+	}
+	return P(() => {
+		if (s(!0), typeof window.matchMedia == "function") {
+			let e = window.matchMedia("(max-width: 56.25rem)"), t = () => {
+				e.matches || a(!1);
+			};
+			e.addEventListener("change", t), N(() => e.removeEventListener("change", t));
+		}
+		function e(e) {
+			if (i() && (e.key === "Escape" && (e.preventDefault(), u()), e.key === "Tab")) {
+				let t = d(), n = t[0], r = t.at(-1);
+				e.shiftKey && document.activeElement === n ? (e.preventDefault(), r?.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n?.focus());
 			}
-		}), j, N), U(x, () => e.children, F, I), B((n) => {
-			var r = e.surface, o = i() ? "true" : void 0, c = t(), p = t() ? "true" : "false", m = t() ? "true" : "false", h = e.brand.href, g = e.brand.mark, v = e.labels.nav;
-			return r !== n.e && q(a, "data-surface", n.e = r), o !== n.t && q(a, "data-hydrated", n.t = o), c !== n.a && q(s, "aria-expanded", n.a = c), p !== n.o && q(l, "data-open", n.o = p), m !== n.i && q(u, "data-open", n.i = m), h !== n.n && q(d, "href", n.n = h), g !== n.s && q(f, "src", n.s = g), v !== n.h && q(_, "aria-label", n.h = v), n;
+		}
+		document.addEventListener("keydown", e), N(() => document.removeEventListener("keydown", e));
+	}), (() => {
+		var t = B(Ae), s = t.firstChild, f = s.nextSibling, ee = f.firstChild.nextSibling, p = f.nextSibling, m = p.nextSibling, h = m.firstChild, [g, _] = V(h.nextSibling), v = g.nextSibling, [y, b] = V(v.nextSibling), x = y.nextSibling, [S, C] = V(x.nextSibling), w = m.nextSibling, T = w.firstChild, E = T.firstChild, [D, O] = V(E.nextSibling), te = D.nextSibling, [k, A] = V(te.nextSibling), j = k.nextSibling, [M, N] = V(j.nextSibling);
+		K(s, "href", `#${r}`), H(s, () => e.labels.skip), f.$$click = () => {
+			i() ? u() : (a(!0), queueMicrotask(() => d()[1]?.focus()));
+		};
+		var P = c;
+		typeof P == "function" ? J(P, f) : c = f, K(f, "aria-controls", n), H(ee, (() => {
+			var t = U(() => !!i());
+			return () => t() ? e.labels.menuClose : e.labels.menuOpen;
+		})()), p.$$click = u, m.$$click = (e) => {
+			i() && e.target instanceof Element && e.target.closest("a[href]") && u();
+		};
+		var F = l;
+		return typeof F == "function" ? J(F, m) : l = m, K(m, "id", n), H(m, () => e.railStart, g, _), H(m, () => e.navigation, y, b), H(m, () => e.railEnd, S, C), K(w, "id", r), H(T, (() => {
+			var t = U(() => !!e.header);
+			return () => t() && (() => {
+				var t = B(je);
+				return H(t, () => e.header), t;
+			})();
+		})(), D, O), H(T, () => e.children, k, A), H(T, (() => {
+			var t = U(() => !!e.footer);
+			return () => t() && (() => {
+				var t = B(Me);
+				return H(t, () => e.footer), t;
+			})();
+		})(), M, N), z((n) => {
+			var r = e.navigationPosition ?? "left", a = e.surface, s = o() ? "true" : void 0, c = i(), l = String(i()), u = String(i()), d = e.contentWidth ?? "workspace";
+			return r !== n.e && K(t, "data-navigation-position", n.e = r), a !== n.t && K(t, "data-surface", n.t = a), s !== n.a && K(t, "data-hydrated", n.a = s), c !== n.o && K(f, "aria-expanded", n.o = c), l !== n.i && K(p, "data-open", n.i = l), u !== n.n && K(m, "data-open", n.n = u), d !== n.s && K(T, "data-width", n.s = d), n;
 		}, {
 			e: void 0,
 			t: void 0,
@@ -131,15 +170,111 @@ function Ae(e) {
 			o: void 0,
 			i: void 0,
 			n: void 0,
-			s: void 0,
-			h: void 0
-		}), K(), a;
+			s: void 0
+		}), G(), t;
 	})();
 }
-re(["click"]);
+R(["click"]);
+//#endregion
+//#region src/console-shell.tsx
+var Pe = /*#__PURE__*/ q("<a class=dds-console-rail__brand><img alt width=20 height=20><strong>"), Fe = /*#__PURE__*/ q("<dl class=dds-console-rail__context>"), Ie = /*#__PURE__*/ q("<div><dt></dt><dd>"), Le = /*#__PURE__*/ q("<div class=dds-console-rail__foot>"), Re = /*#__PURE__*/ q("<p class=dds-console-page-eyebrow>"), ze = /*#__PURE__*/ q("<div class=dds-console-page-header__actions>"), Be = /*#__PURE__*/ q("<div class=dds-console-page-header><div class=dds-console-page-header__text><!$><!/><h1></h1></div><!$><!/>");
+function Ve(e) {
+	return L(Ne, {
+		get labels() {
+			return e.labels;
+		},
+		get surface() {
+			return e.surface;
+		},
+		get railStart() {
+			return [(() => {
+				var t = B(Pe), n = t.firstChild, r = n.nextSibling;
+				return H(r, () => e.brand.name), z((r) => {
+					var i = e.brand.href, a = e.brand.mark;
+					return i !== r.e && K(t, "href", r.e = i), a !== r.t && K(n, "src", r.t = a), r;
+				}, {
+					e: void 0,
+					t: void 0
+				}), t;
+			})(), L(E, {
+				get when() {
+					return U(() => !!e.context)() && e.context.length > 0;
+				},
+				get children() {
+					var t = B(Fe);
+					return H(t, L(T, {
+						get each() {
+							return e.context;
+						},
+						children: (e) => (() => {
+							var t = B(Ie), n = t.firstChild, r = n.nextSibling;
+							return H(n, () => e.label), H(r, () => e.value), t;
+						})()
+					})), t;
+				}
+			})];
+		},
+		get navigation() {
+			return e.navigation ?? L(ke, {
+				get surface() {
+					return e.surface;
+				},
+				get activePath() {
+					return e.activePath;
+				},
+				get nav() {
+					return e.nav ?? [];
+				},
+				get labels() {
+					return e.labels;
+				},
+				get expandedGroups() {
+					return e.expandedGroups;
+				},
+				get defaultExpandedGroups() {
+					return e.defaultExpandedGroups;
+				},
+				get onExpandedGroupsChange() {
+					return e.onExpandedGroupsChange;
+				}
+			});
+		},
+		get railEnd() {
+			return U(() => !!e.foot)() && (() => {
+				var t = B(Le);
+				return H(t, () => e.foot), t;
+			})();
+		},
+		get header() {
+			return (() => {
+				var t = B(Be), n = t.firstChild, r = n.firstChild, [i, a] = V(r.nextSibling), o = i.nextSibling, s = n.nextSibling, [c, l] = V(s.nextSibling);
+				return H(n, L(E, {
+					get when() {
+						return e.header.eyebrow;
+					},
+					get children() {
+						var t = B(Re);
+						return H(t, () => e.header.eyebrow), t;
+					}
+				}), i, a), H(o, () => e.header.title), H(t, L(E, {
+					get when() {
+						return e.header.actions;
+					},
+					get children() {
+						var t = B(ze);
+						return H(t, () => e.header.actions), t;
+					}
+				}), c, l), t;
+			})();
+		},
+		get children() {
+			return e.children;
+		}
+	});
+}
 //#endregion
 //#region src/dialog.tsx
-var je = /*#__PURE__*/ J("<div>");
+var He = /*#__PURE__*/ q("<div>");
 [
 	"a[href]",
 	"button:not([disabled])",
@@ -148,8 +283,8 @@ var je = /*#__PURE__*/ J("<div>");
 	"textarea:not([disabled])",
 	"[tabindex]:not([tabindex='-1'])"
 ].join(",");
-function Me(e) {
-	let t = M(), n = () => e.id ?? `dds-dialog-${t}`, [r, i] = j(), a = se(() => ({
+function Ue(e) {
+	let t = A(), n = () => e.id ?? `dds-dialog-${t}`, [r, i] = k(), a = ce(() => ({
 		id: n(),
 		open: e.open,
 		defaultOpen: e.defaultOpen,
@@ -164,18 +299,18 @@ function Me(e) {
 		trapFocus: !e.additionalFocusContainers,
 		preventScroll: !0,
 		role: e.role ?? "dialog",
-		persistentElements: ie ? [] : e.additionalFocusContainers?.().filter((e) => !!e).map((e) => () => e),
+		persistentElements: ae ? [] : e.additionalFocusContainers?.().filter((e) => !!e).map((e) => () => e),
 		ids: {
 			content: n(),
 			title: `${n()}-title`,
 			description: `${n()}-description`
 		}
-	})), o = A(() => a().open);
-	k(() => {
+	})), o = te(() => a().open);
+	O(() => {
 		let t = r();
 		if (!o() || !e.additionalFocusContainers || !t) return;
-		let n = t.ownerDocument.activeElement, i, a, [s, c] = j(!1), l = () => [t, ...e.additionalFocusContainers().filter((e) => !!(e?.isConnected && e.ownerDocument === t.ownerDocument))], u = t.ownerDocument.defaultView.requestAnimationFrame(() => {
-			i = new le(l(), {
+		let n = t.ownerDocument.activeElement, i, a, [s, c] = k(!1), l = () => [t, ...e.additionalFocusContainers().filter((e) => !!(e?.isConnected && e.ownerDocument === t.ownerDocument))], u = t.ownerDocument.defaultView.requestAnimationFrame(() => {
+			i = new ue(l(), {
 				document: t.ownerDocument,
 				escapeDeactivates: !1,
 				allowOutsideClick: !0,
@@ -187,26 +322,26 @@ function Me(e) {
 				setReturnFocus: () => e.finalFocus?.() ?? (n instanceof HTMLElement && n.isConnected ? n : !1)
 			}), c(!0), i.activate();
 		});
-		k(() => {
+		O(() => {
 			if (!s()) return;
 			let e = l();
-			i.updateContainerElements(e), a?.(), a = ue(e, { defer: !1 });
-		}), F(() => {
+			i.updateContainerElements(e), a?.(), a = de(e, { defer: !1 });
+		}), N(() => {
 			t.ownerDocument.defaultView.cancelAnimationFrame(u), a?.(), i?.deactivate({ returnFocus: e.restoreFocus !== !1 });
 		});
 	});
 	let s = (t, n) => c(e.unstyled ? void 0 : t, n), l = () => {
-		let t = ce(), r = (n) => z(te, G({ get component() {
+		let t = le(), r = (n) => L(re, W({ get component() {
 			return e.contentAs ?? "div";
 		} }, () => n({}), { ref: (e) => {
 			t().ref(e), i(e);
 		} }));
-		return z(Y.Positioner, {
+		return L(Y.Positioner, {
 			get class() {
 				return s("dds-dialog-overlay", e.overlayClass);
 			},
 			get children() {
-				return z(Y.Content, G(() => e.contentProps, {
+				return L(Y.Content, W(() => e.contentProps, {
 					ref: i,
 					get class() {
 						return s("dds-dialog", e.class);
@@ -217,13 +352,13 @@ function Me(e) {
 					},
 					"aria-modal": "true",
 					get "aria-describedby"() {
-						return W(() => !!e.description)() ? `${n()}-description` : void 0;
+						return U(() => !!e.description)() ? `${n()}-description` : void 0;
 					},
 					get children() {
 						return (() => {
 							let t = {
 								get title() {
-									return z(Y.Title, {
+									return L(Y.Title, {
 										get class() {
 											return s("dds-dialog__title", e.titleClass);
 										},
@@ -233,7 +368,7 @@ function Me(e) {
 									});
 								},
 								get description() {
-									return e.description && z(Y.Description, {
+									return e.description && L(Y.Description, {
 										get class() {
 											return s("dds-dialog__body", e.descriptionClass);
 										},
@@ -247,16 +382,16 @@ function Me(e) {
 								},
 								get actions() {
 									return e.actions && (() => {
-										var t = V(je);
-										return U(t, () => e.actions), B(() => R(t, s("dds-dialog__actions", e.actionsClass))), t;
+										var t = B(He);
+										return H(t, () => e.actions), z(() => I(t, s("dds-dialog__actions", e.actionsClass))), t;
 									})();
 								}
 							};
 							return e.frame ? e.frame(t) : [
-								W(() => t.title),
-								W(() => t.description),
-								W(() => t.children),
-								W(() => t.actions)
+								U(() => t.title),
+								U(() => t.description),
+								U(() => t.children),
+								U(() => t.actions)
 							];
 						})();
 					}
@@ -264,21 +399,21 @@ function Me(e) {
 			}
 		});
 	};
-	return z(Y.RootProvider, {
+	return L(Y.RootProvider, {
 		value: a,
 		lazyMount: !0,
 		unmountOnExit: !0,
 		get children() {
-			return z(D, {
+			return L(E, {
 				get when() {
 					return e.portal;
 				},
 				get fallback() {
-					return z(l, {});
+					return L(l, {});
 				},
 				get children() {
-					return z(ne, G(() => e.portalMount ? { mount: e.portalMount } : {}, { get children() {
-						return z(l, {});
+					return L(ie, W(() => e.portalMount ? { mount: e.portalMount } : {}, { get children() {
+						return L(l, {});
 					} }));
 				}
 			});
@@ -287,9 +422,9 @@ function Me(e) {
 }
 //#endregion
 //#region src/radio-group.tsx
-function Ne(e) {
+function We(e) {
 	let t = e.value ?? e.defaultValue;
-	return z(X.Root, {
+	return L(X.Root, {
 		get value() {
 			return e.value;
 		},
@@ -315,16 +450,16 @@ function Ne(e) {
 			return c("dds-radio-group", e.class);
 		},
 		get children() {
-			return [z(X.Label, {
+			return [L(X.Label, {
 				class: "dds-field__label",
 				get children() {
 					return e.label;
 				}
-			}), z(E, {
+			}), L(T, {
 				get each() {
 					return e.options;
 				},
-				children: (e) => z(X.Item, {
+				children: (e) => L(X.Item, {
 					get value() {
 						return e.value;
 					},
@@ -333,13 +468,13 @@ function Ne(e) {
 					},
 					class: "dds-check",
 					get children() {
-						return [z(X.ItemHiddenInput, {
+						return [L(X.ItemHiddenInput, {
 							class: "dds-check__input",
 							style: {},
 							ref: (n) => {
 								n.defaultChecked = t === e.value;
 							}
-						}), z(X.ItemText, { get children() {
+						}), L(X.ItemText, { get children() {
 							return e.label;
 						} })];
 					}
@@ -350,20 +485,20 @@ function Ne(e) {
 }
 //#endregion
 //#region src/icon.tsx
-var Pe = /*#__PURE__*/ J("<svg><!$><!/><g>"), Fe = /*#__PURE__*/ J("<title>");
-function Ie(e) {
-	let [t, n] = L(e, [
+var Ge = /*#__PURE__*/ q("<svg><!$><!/><g>"), Ke = /*#__PURE__*/ q("<title>");
+function qe(e) {
+	let [t, n] = F(e, [
 		"name",
 		"label",
 		"size",
 		"directional",
 		"class"
-	]), r = () => fe[t.name], i = () => t.directional ?? de.mirrorInRtl.includes(t.name);
+	]), r = () => pe[t.name], i = () => t.directional ?? fe.mirrorInRtl.includes(t.name);
 	return (() => {
-		var e = V(Pe), a = e.firstChild, [o, s] = H(a.nextSibling), l = o.nextSibling;
-		return oe(e, G(n, {
+		var e = B(Ge), a = e.firstChild, [o, s] = V(a.nextSibling), l = o.nextSibling;
+		return se(e, W(n, {
 			get class() {
-				return c(i() && de.cssClass, t.class);
+				return c(i() && fe.cssClass, t.class);
 			},
 			get viewBox() {
 				return r().viewBox;
@@ -390,22 +525,22 @@ function Ie(e) {
 			get "aria-hidden"() {
 				return t.label ? void 0 : "true";
 			}
-		}), !0, !0), U(e, (() => {
-			var e = W(() => !!t.label);
+		}), !0, !0), H(e, (() => {
+			var e = U(() => !!t.label);
 			return () => e() && (() => {
-				var e = V(Fe);
-				return U(e, () => t.label), e;
+				var e = B(Ke);
+				return H(e, () => t.label), e;
 			})();
-		})(), o, s), B(() => ae(l, "innerHTML", r().body)), K(), e;
+		})(), o, s), z(() => oe(l, "innerHTML", r().body)), G(), e;
 	})();
 }
 //#endregion
 //#region src/pending-action.ts
-function Le() {
-	let [e, t] = j(null), n = null, r = !1, i = () => {
+function Je() {
+	let [e, t] = k(null), n = null, r = !1, i = () => {
 		n?.abort(), n = null;
 	};
-	return N() && F(() => {
+	return j() && N(() => {
 		r = !0, i();
 	}), {
 		current: e,
@@ -429,8 +564,8 @@ function Le() {
 }
 //#endregion
 //#region src/status-pill.tsx
-var Re = /*#__PURE__*/ J("<code>"), ze = /*#__PURE__*/ J("<span>");
-function Be(e) {
+var Ye = /*#__PURE__*/ q("<code>"), Xe = /*#__PURE__*/ q("<span>");
+function Ze(e) {
 	let t = new Set(e.openDomains ?? []);
 	return function(n) {
 		let r = () => e.tones[n.domain]?.[n.value], i = () => e.label(n.domain, n.value, n.locale), a = () => !!(r() && i()), o = () => {
@@ -443,24 +578,24 @@ function Be(e) {
 				text: t
 			};
 		};
-		return z(D, {
+		return L(E, {
 			get when() {
 				return a() || !t.has(n.domain);
 			},
 			get fallback() {
 				return (() => {
-					var e = V(Re);
-					return U(e, () => n.value), B(() => q(e, "data-status", `${n.domain}.${n.value}`)), e;
+					var e = B(Ye);
+					return H(e, () => n.value), z(() => K(e, "data-status", `${n.domain}.${n.value}`)), e;
 				})();
 			},
 			get children() {
 				return (() => {
 					let e = o();
 					return (() => {
-						var t = V(ze);
-						return U(t, () => e.text), B((r) => {
+						var t = B(Xe);
+						return H(t, () => e.text), z((r) => {
 							var i = e.tone === "neutral" ? "dds-badge" : `dds-badge dds-badge--${e.tone}`, a = `${n.domain}.${n.value}`, o = e.tone;
-							return i !== r.e && R(t, r.e = i), a !== r.t && q(t, "data-status", r.t = a), o !== r.a && q(t, "data-tone", r.a = o), r;
+							return i !== r.e && I(t, r.e = i), a !== r.t && K(t, "data-status", r.t = a), o !== r.a && K(t, "data-tone", r.a = o), r;
 						}, {
 							e: void 0,
 							t: void 0,
@@ -474,16 +609,16 @@ function Be(e) {
 }
 //#endregion
 //#region src/tabs.tsx
-function Ve(e) {
-	let t = M(), n = () => e.id ?? `dds-tabs-${t}`, r, i = l(() => r, () => e.dir), a = e.asChild ? (t) => e.asChild(P(t({}), { ref: (e) => {
+function Qe(e) {
+	let t = A(), n = () => e.id ?? `dds-tabs-${t}`, r, i = l(() => r, () => e.dir), a = e.asChild ? (t) => e.asChild(M(t({}), { ref: (e) => {
 		r = e;
 	} })) : void 0;
-	return z(me, {
+	return L(he, {
 		get locale() {
 			return i() === "rtl" ? "ar" : "en";
 		},
 		get children() {
-			return z(Z.Root, G({
+			return L(Z.Root, W({
 				ref(e) {
 					var t = r;
 					typeof t == "function" ? t(e) : r = e;
@@ -521,13 +656,13 @@ function Ve(e) {
 		}
 	});
 }
-function He(e) {
-	let [t, n] = L(e, [
+function $e(e) {
+	let [t, n] = F(e, [
 		"class",
 		"children",
 		"unstyled"
 	]);
-	return z(Z.List, G(n, {
+	return L(Z.List, W(n, {
 		get class() {
 			return c(!t.unstyled && "dds-tabs", t.class);
 		},
@@ -536,15 +671,15 @@ function He(e) {
 		}
 	}));
 }
-function Ue(e) {
-	let [t, n] = L(e, [
+function et(e) {
+	let [t, n] = F(e, [
 		"class",
 		"children",
 		"value",
 		"unstyled",
 		"asChild"
-	]), r = t.asChild ? (n) => t.asChild(P(n({}), { ref: e.ref })) : void 0;
-	return z(Z.Trigger, G(n, {
+	]), r = t.asChild ? (n) => t.asChild(M(n({}), { ref: e.ref })) : void 0;
+	return L(Z.Trigger, W(n, {
 		get value() {
 			return t.value;
 		},
@@ -555,16 +690,16 @@ function Ue(e) {
 		return t.children;
 	} }));
 }
-function We(e) {
-	let [t, n] = L(e, [
+function tt(e) {
+	let [t, n] = F(e, [
 		"value",
 		"children",
 		"style"
-	]), r = pe(), i = () => r().value !== t.value, a = () => i() ? typeof t.style == "string" ? `${t.style.replace(/;+\s*$/, "")};display:none;` : {
+	]), r = me(), i = () => r().value !== t.value, a = () => i() ? typeof t.style == "string" ? `${t.style.replace(/;+\s*$/, "")};display:none;` : {
 		...t.style,
 		display: "none"
 	} : t.style;
-	return z(Z.Content, G(n, {
+	return L(Z.Content, W(n, {
 		get value() {
 			return t.value;
 		},
@@ -584,16 +719,16 @@ function We(e) {
 }
 //#endregion
 //#region src/toast.tsx
-var Ge = O();
-function Ke(e) {
-	let t = M(), n, r, i = () => r ??= new Proxy(n?.ownerDocument ?? document, { get(e, t) {
+var nt = D();
+function rt(e) {
+	let t = A(), n, r, i = () => r ??= new Proxy(n?.ownerDocument ?? document, { get(e, t) {
 		if (t === "getElementById") return (t) => t === "toast-group:bottom-end" ? n ?? null : e.getElementById(t);
 		let r = Reflect.get(e, t, e);
 		return typeof r == "function" ? r.bind(e) : r;
-	} }), a = ge({
+	} }), a = _e({
 		placement: "bottom-end",
 		overlap: !1,
-		gap: _e[8],
+		gap: ve[8],
 		offsets: "var(--dds-space-16)",
 		removeDelay: 0,
 		hotkey: ["DDS_NO_HOTKEY"],
@@ -616,10 +751,10 @@ function Ke(e) {
 		dismiss: (e) => a.remove(e),
 		clear: () => a.remove()
 	};
-	return F(s.clear), z(Ge.Provider, {
+	return N(s.clear), L(nt.Provider, {
 		value: s,
 		get children() {
-			return [W(() => e.children), z(he, {
+			return [U(() => e.children), L(ge, {
 				toaster: a,
 				ref(e) {
 					var t = n;
@@ -638,7 +773,7 @@ function Ke(e) {
 				},
 				children: (t) => {
 					let n = () => t().meta?.dds;
-					return z(Q.Root, {
+					return L(Q.Root, {
 						get class() {
 							return c("dds-toast", `dds-toast--${n().tone ?? "info"}`);
 						},
@@ -646,12 +781,12 @@ function Ke(e) {
 							return n().tone === "danger" ? "alert" : "status";
 						},
 						get children() {
-							return [z(Q.Description, { get children() {
+							return [L(Q.Description, { get children() {
 								return t().description;
-							} }), W(() => W(() => !!e.dismissLabel)() && z(Q.CloseTrigger, {
+							} }), U(() => U(() => !!e.dismissLabel)() && L(Q.CloseTrigger, {
 								class: "dds-iconbtn dds-iconbtn--sm",
 								get "aria-label"() {
-									return W(() => typeof e.dismissLabel == "function")() ? e.dismissLabel(n()) : e.dismissLabel;
+									return U(() => typeof e.dismissLabel == "function")() ? e.dismissLabel(n()) : e.dismissLabel;
 								},
 								children: "×"
 							}))];
@@ -662,20 +797,20 @@ function Ke(e) {
 		}
 	});
 }
-function qe() {
-	let e = ee(Ge);
+function it() {
+	let e = ne(nt);
 	if (!e) throw Error("useToast must be called inside <ToastProvider>");
 	return e;
 }
 //#endregion
 //#region src/tooltip.tsx
-var Je = /*#__PURE__*/ J("<span><!$><!/><!$><!/>");
-function Ye(e) {
-	let t = M(), n = () => e.id ?? `dds-tooltip-${t}`, [i, a] = r({
+var at = /*#__PURE__*/ q("<span><!$><!/><!$><!/>");
+function ot(e) {
+	let t = A(), n = () => e.id ?? `dds-tooltip-${t}`, [i, a] = r({
 		value: () => e.open,
 		defaultValue: e.defaultOpen ?? !1,
 		onChange: (t) => e.onOpenChange?.(t)
-	}), o = ve(() => ({
+	}), o = ye(() => ({
 		id: n(),
 		ids: { content: n() },
 		open: i(),
@@ -683,14 +818,14 @@ function Ye(e) {
 		openDelay: 0,
 		closeDelay: 0
 	}));
-	return z($.RootProvider, {
+	return L($.RootProvider, {
 		value: o,
 		lazyMount: !1,
 		unmountOnExit: !1,
 		get children() {
-			var t = V(Je), r = t.firstChild, [i, a] = H(r.nextSibling), s = i.nextSibling, [l, u] = H(s.nextSibling);
-			return U(t, z($.Trigger, { asChild: (t) => {
-				let [, r] = L(t(), ["onFocusIn", "onFocusOut"]);
+			var t = B(at), r = t.firstChild, [i, a] = V(r.nextSibling), s = i.nextSibling, [l, u] = V(s.nextSibling);
+			return H(t, L($.Trigger, { asChild: (t) => {
+				let [, r] = F(t(), ["onFocusIn", "onFocusOut"]);
 				return e.children({
 					...r,
 					"aria-describedby": n(),
@@ -699,18 +834,77 @@ function Ye(e) {
 					onPointerEnter: () => o().setOpen(!0),
 					onPointerLeave: () => o().setOpen(!1)
 				});
-			} }), i, a), U(t, z($.Positioner, { get children() {
-				return z($.Content, {
+			} }), i, a), H(t, L($.Positioner, { get children() {
+				return L($.Content, {
 					class: "dds-tooltip__bubble",
 					get children() {
 						return e.content;
 					}
 				});
-			} }), l, u), B(() => R(t, c("dds-tooltip", e.class))), t;
+			} }), l, u), z(() => I(t, c("dds-tooltip", e.class))), t;
 		}
 	});
 }
 //#endregion
-export { i as Button, b as Calendar, o as Checkbox, g as Combobox, Ae as ConsoleShell, u as DatePicker, f as DateRangePicker, Me as Dialog, v as DropdownMenu, n as Field, Ie as Icon, e as IconButton, m as Input, h as InputGroup, p as MonthPicker, C as NumberInput, y as Popover, a as Radio, Ne as RadioGroup, x as SegmentedControl, s as Select, _ as SelectPicker, t as Switch, Ue as Tab, He as TabList, We as TabPanel, Ve as Tabs, d as TimePicker, Ke as ToastProvider, Ye as Tooltip, r as createControllableSignal, Le as createPendingAction, Be as createStatusPill, w as normalizeNumberText, T as numberInputMessages, qe as useToast, S as validateSegmentedItems };
+//#region src/top-nav.tsx
+var st = /*#__PURE__*/ q("<nav class=dds-top-nav>"), ct = /*#__PURE__*/ q("<details class=dds-top-nav__group><summary class=dds-top-nav__trigger></summary><ul class=dds-top-nav__items>"), lt = /*#__PURE__*/ q("<li><a class=dds-top-nav__item><!$><!/><span></span><!$><!/>"), ut = /*#__PURE__*/ q("<span class=dds-top-nav__item-icon aria-hidden=true>"), dt = /*#__PURE__*/ q("<span class=dds-console-rail__badge>");
+function ft(e) {
+	let t;
+	return P(() => {
+		let e = (e) => {
+			t?.contains(e.target) || t?.querySelectorAll("details[open]").forEach((e) => e.removeAttribute("open"));
+		};
+		document.addEventListener("pointerdown", e), N(() => document.removeEventListener("pointerdown", e));
+	}), (() => {
+		var n = B(st);
+		n.$$keydown = (e) => {
+			if (e.key !== "Escape") return;
+			let t = e.target.closest("details");
+			t?.open && (e.preventDefault(), e.stopPropagation(), t.open = !1, t.querySelector("summary")?.focus());
+		};
+		var r = t;
+		return typeof r == "function" ? J(r, n) : t = n, H(n, L(T, {
+			get each() {
+				return e.nav;
+			},
+			children: (t) => (() => {
+				var n = B(ct), r = n.firstChild, i = r.nextSibling;
+				return H(r, () => t.label), H(i, L(T, {
+					get each() {
+						return t.items;
+					},
+					children: (t) => (() => {
+						var n = B(lt), r = n.firstChild, i = r.firstChild, [a, o] = V(i.nextSibling), s = a.nextSibling, c = s.nextSibling, [l, u] = V(c.nextSibling);
+						return r.$$click = (t) => {
+							t.currentTarget.closest("details")?.removeAttribute("open"), e.onNavigate?.();
+						}, H(r, (() => {
+							var e = U(() => t.icon != null);
+							return () => e() && (() => {
+								var e = B(ut);
+								return H(e, () => t.icon), e;
+							})();
+						})(), a, o), H(s, () => t.label), H(r, (() => {
+							var n = U(() => t.badge != null && t.badge > 0);
+							return () => n() && (() => {
+								var n = B(dt);
+								return H(n, () => t.badge), z(() => K(n, "aria-label", e.labels.badge.replace("{count}", () => String(t.badge)))), n;
+							})();
+						})(), l, u), z((n) => {
+							var i = `${e.surface}.${t.id}`, a = t.href, o = t.active ?? (e.activePath === t.href || t.href.split("/").filter(Boolean).length > 1 && e.activePath.startsWith(`${t.href}/`)) ? "page" : void 0;
+							return i !== n.e && K(r, "data-nav", n.e = i), a !== n.t && K(r, "href", n.t = a), o !== n.a && K(r, "aria-current", n.a = o), n;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0
+						}), G(), n;
+					})()
+				})), n;
+			})()
+		})), z(() => K(n, "aria-label", e.labels.nav)), G(), n;
+	})();
+}
+R(["keydown", "click"]);
+//#endregion
+export { i as Button, y as Calendar, o as Checkbox, h as Combobox, Ve as ConsoleShell, u as DatePicker, f as DateRangePicker, Ue as Dialog, _ as DropdownMenu, n as Field, qe as Icon, e as IconButton, p as Input, m as InputGroup, Ne as Layout, ke as LeftNav, ee as MonthPicker, S as NumberInput, v as Popover, a as Radio, We as RadioGroup, b as SegmentedControl, s as Select, g as SelectPicker, t as Switch, et as Tab, $e as TabList, tt as TabPanel, Qe as Tabs, d as TimePicker, rt as ToastProvider, ot as Tooltip, ft as TopNav, r as createControllableSignal, Je as createPendingAction, Ze as createStatusPill, C as normalizeNumberText, w as numberInputMessages, it as useToast, x as validateSegmentedItems };
 
 //# sourceMappingURL=index.js.map