@krelborn/stylesui 0.8.1 → 0.9.0

package/dist/components/Menu/useMenuItemContent.js

@@ -0,0 +1,66 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import n from "../MenuSurface/MenuSurface.module.js";
+import { useId as r } from "react";
+import { c as i } from "react/compiler-runtime";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+// src/components/Menu/useMenuItemContent.tsx
+function c(c) {
+	let u = i(31), { describedBy: d, description: f, label: p, leading: m, trailing: h } = c, g = r(), _ = r(), v;
+	u[0] === f ? v = u[1] : (v = e(f), u[0] = f, u[1] = v);
+	let y = v, b;
+	u[2] === m ? b = u[3] : (b = e(m), u[2] = m, u[3] = b);
+	let x = b, S = y ? _ : void 0, C;
+	u[4] !== d || u[5] !== S ? (C = [S, d].filter(l), u[4] = d, u[5] = S, u[6] = C) : C = u[6];
+	let w = C.join(" "), T;
+	u[7] !== x || u[8] !== m ? (T = x && /* @__PURE__ */ o(t, {
+		as: "span",
+		className: n.leading,
+		"aria-hidden": !0,
+		children: m
+	}), u[7] = x, u[8] = m, u[9] = T) : T = u[9];
+	let E;
+	u[10] !== p || u[11] !== g ? (E = /* @__PURE__ */ o(t, {
+		as: "span",
+		className: n.label,
+		id: g,
+		children: p
+	}), u[10] = p, u[11] = g, u[12] = E) : E = u[12];
+	let D;
+	u[13] !== f || u[14] !== _ || u[15] !== y ? (D = y && /* @__PURE__ */ o(t, {
+		as: "span",
+		className: n.description,
+		id: _,
+		children: f
+	}), u[13] = f, u[14] = _, u[15] = y, u[16] = D) : D = u[16];
+	let O;
+	u[17] !== E || u[18] !== D ? (O = /* @__PURE__ */ s(t, {
+		as: "span",
+		className: n.text,
+		children: [E, D]
+	}), u[17] = E, u[18] = D, u[19] = O) : O = u[19];
+	let k;
+	u[20] === h ? k = u[21] : (k = e(h) && /* @__PURE__ */ o(t, {
+		as: "span",
+		className: n.trailing,
+		"aria-hidden": !0,
+		children: h
+	}), u[20] = h, u[21] = k);
+	let A;
+	u[22] !== T || u[23] !== O || u[24] !== k ? (A = /* @__PURE__ */ s(a, { children: [
+		T,
+		O,
+		k
+	] }), u[22] = T, u[23] = O, u[24] = k, u[25] = A) : A = u[25];
+	let j = A, M = w === "" ? void 0 : w, N;
+	return u[26] !== j || u[27] !== x || u[28] !== g || u[29] !== M ? (N = {
+		content: j,
+		describedBy: M,
+		hasLeading: x,
+		labelId: g
+	}, u[26] = j, u[27] = x, u[28] = g, u[29] = M, u[30] = N) : N = u[30], N;
+}
+function l(e) {
+	return e !== void 0 && e !== "";
+}
+export { c as useMenuItemContent };

package/dist/components/Menu/useMenuPointer.d.ts

@@ -0,0 +1,27 @@
+import type { PointerEvent } from "react";
+import type { Point } from "../../menus";
+/**
+ * A menu's pointer handling
+ */
+interface MenuPointer {
+    /**
+     * Focuses the item under the pointer, after a short delay when that would close an open submenu, and not at all while
+     * the pointer is heading into one
+     */
+    handlePointerMove: (event: PointerEvent<HTMLDivElement>) => void;
+    /**
+     * Cancels a focus the pointer was waiting to move once it leaves the menu and its submenus, for the page or the window
+     */
+    handlePointerOut: (event: PointerEvent<HTMLDivElement>) => void;
+    /**
+     * Lets the pointer cross the menu's other items on its way into a submenu that is open, without closing it
+     */
+    startPointerGrace: (exit: Point, submenu: HTMLElement) => void;
+}
+/**
+ * Moves focus in a menu with the pointer, so the pointer and the keyboard share one active item
+ *
+ * @returns the menu's pointer move and out handlers, and a way for a submenu to start the pointer's grace
+ */
+export declare function useMenuPointer(): MenuPointer;
+export {};

package/dist/components/Menu/useMenuPointer.js

@@ -0,0 +1,56 @@
+import { graceTriangle as e, isInsideTriangle as t } from "../../menus/pointerIntent.js";
+import { renderedItems as n } from "../../menus/renderedItems.js";
+import { useEffect as r, useRef as i } from "react";
+// src/components/Menu/useMenuPointer.ts
+var a = 100, o = 400;
+function s() {
+	let s = i(null), u = i(null), d = i(void 0), f = i(null);
+	r(() => () => clearTimeout(d.current), []);
+	function p(e, t, n) {
+		let r = n.activeElement;
+		m(), d.current = setTimeout(() => {
+			s.current = null, f.current = null, n.activeElement === r && c(e);
+		}, t);
+	}
+	function m() {
+		clearTimeout(d.current), f.current = null;
+	}
+	function h(t, n) {
+		s.current = e(t, n.getBoundingClientRect()), p(u.current, o, n.ownerDocument);
+	}
+	function g(e) {
+		let t = e.currentTarget, r = e.target;
+		if (e.pointerType === "touch") return;
+		if (r.closest("[role=\"menu\"]") !== t) {
+			s.current = null, m();
+			return;
+		}
+		let i = n(t).find((e) => e.contains(r)) ?? null;
+		u.current = i, v({
+			x: e.clientX,
+			y: e.clientY
+		}) ? p(i, o, t.ownerDocument) : (s.current = null, y(t, i));
+	}
+	function _(e) {
+		let t = e.relatedTarget;
+		t instanceof Node && e.currentTarget.contains(t) || m();
+	}
+	function v(e) {
+		return s.current !== null && t(e, s.current);
+	}
+	function y(e, t) {
+		(t === null || t !== f.current) && (m(), t !== null && t !== e.ownerDocument.activeElement && (l(e) && t.getAttribute("aria-expanded") !== "true" ? (p(t, a, e.ownerDocument), f.current = t) : c(t)));
+	}
+	return {
+		handlePointerMove: g,
+		handlePointerOut: _,
+		startPointerGrace: h
+	};
+}
+function c(e) {
+	e?.focus({ preventScroll: !0 });
+}
+function l(e) {
+	return n(e).some((e) => e.getAttribute("aria-expanded") === "true");
+}
+export { s as useMenuPointer };

package/dist/components/Menu/useMenuRadioGroupContext.d.ts

@@ -0,0 +1,9 @@
+import type { MenuRadioGroupContextValue } from "./MenuRadioGroupContext";
+/**
+ * Reads the state of the surrounding `MenuRadioGroup`
+ *
+ * @param part the name of the part reading it, for the error message
+ * @returns the surrounding `MenuRadioGroup`'s state
+ * @throws MissingContextError when the part is not inside a `MenuRadioGroup`
+ */
+export declare function useMenuRadioGroupContext(part: string): MenuRadioGroupContextValue;

package/dist/components/Menu/useMenuRadioGroupContext.js

@@ -0,0 +1,10 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { MenuRadioGroupContext as t } from "./MenuRadioGroupContext.js";
+import { useContext as n } from "react";
+// src/components/Menu/useMenuRadioGroupContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "MenuRadioGroup");
+	return i;
+}
+export { r as useMenuRadioGroupContext };

package/dist/components/MenuSurface/MenuSurface.css

@@ -0,0 +1 @@
+.sui-menu-OKRRs:popover-open{display:flex}.sui-menu-OKRRs{min-inline-size:12rem;max-inline-size:min(20rem, 100vw - var(--sui-space-2,.5rem) * 2);max-block-size:min(var(--sui-menu-max-block-size,24rem), 100dvh - var(--sui-space-2,.5rem) * 2);overscroll-behavior:contain;padding:var(--sui-space-1,.25rem);border:var(--sui-border-width,1px) solid var(--sui-color-border,#d1d5db);border-radius:var(--sui-radius-lg,8px);background-color:var(--sui-color-overlay,#fff);box-shadow:var(--sui-shadow-sm,0 1px 3px #0000001f);color:var(--sui-color-text,#111827);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-font-size-sm,.875rem);line-height:var(--sui-line-height-tight,1.25);transition:opacity .12s ease-out, translate var(--sui-motion-spring,.12s ease-out);flex-direction:column;gap:1px;overflow-y:auto}.sui-menu-OKRRs:popover-open:is([data-placement=top],[data-placement=bottom]){position-try-fallbacks:flip-block, --sui-menu-shrink}.sui-menu-OKRRs:popover-open:is([data-placement=start],[data-placement=end]){position-try-fallbacks:flip-inline, --sui-menu-shrink}.sui-menu-OKRRs:popover-open:is([data-placement$=-start],[data-placement$=-end]){position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline, --sui-menu-shrink}@position-try --sui-menu-shrink{max-block-size:100%;max-block-size:stretch}.sui-menu-OKRRs[data-context-menu]:popover-open{position-area:none;inset:auto;top:calc(anchor(top) + var(--_sui-context-menu-top,0px));left:calc(anchor(left) + var(--_sui-context-menu-left,0px));position-try-fallbacks:--sui-context-menu-up-right, --sui-context-menu-down-left, --sui-context-menu-up-left, --sui-menu-shrink;margin:0}.sui-menu-OKRRs[data-context-menu]:popover-open:dir(rtl){left:auto;right:calc(anchor(right) + var(--_sui-context-menu-right,0px));position-try-fallbacks:--sui-context-menu-up-left, --sui-context-menu-down-right, --sui-context-menu-up-right, --sui-menu-shrink}@position-try --sui-context-menu-down-right{inset:auto;top:calc(anchor(top) + var(--_sui-context-menu-top,0px));left:calc(anchor(left) + var(--_sui-context-menu-left,0px))}@position-try --sui-context-menu-down-left{inset:auto;top:calc(anchor(top) + var(--_sui-context-menu-top,0px));right:calc(anchor(right) + var(--_sui-context-menu-right,0px))}@position-try --sui-context-menu-up-right{inset:auto;bottom:calc(anchor(bottom) + var(--_sui-context-menu-bottom,0px));left:calc(anchor(left) + var(--_sui-context-menu-left,0px))}@position-try --sui-context-menu-up-left{inset:auto;bottom:calc(anchor(bottom) + var(--_sui-context-menu-bottom,0px));right:calc(anchor(right) + var(--_sui-context-menu-right,0px))}.sui-menu-OKRRs:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:calc(var(--sui-focus-ring-width,2px) * -1)}@starting-style{.sui-menu-OKRRs{opacity:0}.sui-menu-OKRRs[data-placement^=top]{translate:0 var(--sui-popover-offset,4px)}.sui-menu-OKRRs[data-placement^=bottom]{translate:0 calc(var(--sui-popover-offset,4px) * -1)}.sui-menu-OKRRs[data-placement=start]{translate:var(--sui-popover-offset,4px) 0}.sui-menu-OKRRs[data-placement=end],.sui-menu-OKRRs[data-placement=start]:dir(rtl){translate:calc(var(--sui-popover-offset,4px) * -1) 0}.sui-menu-OKRRs[data-placement=end]:dir(rtl){translate:var(--sui-popover-offset,4px) 0}.sui-menu-OKRRs[data-context-menu]{translate:none}}.sui-item-N41PT{--_sui-menu-ink:var(--sui-color-text,#111827);box-sizing:border-box;align-items:center;gap:var(--sui-space-2,.5rem);min-block-size:2rem;inline-size:100%;padding:var(--sui-space-1,.25rem) var(--sui-space-2,.5rem);border-radius:var(--sui-radius-md,4px);color:var(--_sui-menu-ink);font:inherit;text-align:start;cursor:default;scroll-margin-block:var(--sui-space-1,.25rem);background-color:#0000;border:0;padding-inline-start:calc(var(--sui-space-2,.5rem) + var(--_sui-menu-leading-column,0px));text-decoration:none;transition:background-color .12s,color .12s;display:flex;position:relative}.sui-item-N41PT:focus,.sui-item-N41PT[data-active]{--_sui-menu-ink:var(--sui-menu-on-highlight,var(--sui-color-text,#111827));background-color:var(--sui-menu-highlight,var(--sui-color-secondary-subtle,#f3f4f6));color:var(--_sui-menu-ink);outline:none}.sui-item-N41PT[aria-expanded=true]{--_sui-menu-ink:var(--sui-menu-on-highlight,var(--sui-color-text,#111827));background-color:var(--sui-menu-highlight,var(--sui-color-secondary-subtle,#f3f4f6));color:var(--_sui-menu-ink)}.sui-item-N41PT:focus-visible,.sui-item-N41PT[data-active=keyboard]{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:calc(var(--sui-focus-ring-width,2px) * -1)}.sui-menu-OKRRs[data-density=compact] .sui-item-N41PT{min-block-size:1.625rem;padding-block:2px}@media (pointer:coarse){.sui-item-N41PT,.sui-menu-OKRRs[data-density=compact] .sui-item-N41PT{min-block-size:2.75rem}}.sui-item-N41PT[data-tone=danger]{--_sui-menu-ink:var(--sui-color-danger-text,#b91c1c);color:var(--_sui-menu-ink)}.sui-item-N41PT[data-tone=danger]:focus{background-color:var(--sui-menu-danger-highlight,var(--sui-color-danger-subtle,#fff1f1));color:var(--_sui-menu-ink)}.sui-item-N41PT[aria-disabled=true],.sui-item-N41PT[aria-disabled=true]:focus,.sui-item-N41PT[aria-disabled=true][data-active]{--_sui-menu-part-opacity:.5;color:color-mix(in srgb, var(--_sui-menu-ink) 50%, transparent);cursor:not-allowed}.sui-menu-OKRRs{--_sui-menu-leading-column:0px}.sui-menu-OKRRs:has(>[data-leading],>*>[data-leading],>[role=group]>[role=none]>[data-leading]){--_sui-menu-leading-column:calc(1rem + var(--sui-space-2,.5rem))}.sui-leading-EuNjq{block-size:1rem;inline-size:1rem;color:var(--sui-color-text-muted,#4b5563);opacity:var(--_sui-menu-part-opacity,1);place-items:center;margin-block:auto;display:grid;position:absolute;inset-block:0;inset-inline-start:var(--sui-space-2,.5rem)}.sui-item-N41PT[data-tone=danger] .sui-leading-EuNjq,.sui-item-N41PT[aria-checked]>.sui-leading-EuNjq{color:var(--_sui-menu-ink)}.sui-item-N41PT[aria-checked=false]>.sui-leading-EuNjq{visibility:hidden}.sui-radioDot-C9sAp{border-radius:var(--sui-radius-full,9999px);border:.25rem solid;block-size:.5rem;inline-size:.5rem}.sui-text-vnHXY{flex-direction:column;flex:1;gap:2px;min-inline-size:0;display:flex}.sui-label-kOmli{overflow-wrap:anywhere}.sui-description-7UTMg{color:var(--sui-color-text-muted,#4b5563);opacity:var(--_sui-menu-part-opacity,1);font-size:var(--sui-font-size-xs,.75rem);overflow-wrap:anywhere}.sui-trailing-q5LOe{color:var(--sui-color-text-muted,#4b5563);font-size:var(--sui-font-size-xs,.75rem);letter-spacing:.04em;white-space:nowrap;opacity:var(--_sui-menu-part-opacity,1);flex:none;margin-inline-start:auto;padding-inline-start:var(--sui-space-6,1.5rem)}.sui-group-eutfz{flex-direction:column;gap:1px;display:flex}.sui-groupLabel-QJV6u{padding:var(--sui-space-2,.5rem) var(--sui-space-2,.5rem) var(--sui-space-1,.25rem);color:var(--sui-color-text-muted,#4b5563);font-size:var(--sui-font-size-xs,.75rem);font-weight:var(--sui-font-weight-bold,700);padding-inline-start:calc(var(--sui-space-2,.5rem) + var(--_sui-menu-leading-column,0px))}.sui-separator-rld2z{margin:var(--sui-space-1,.25rem) calc(var(--sui-space-1,.25rem) * -1);border:0;border-block-start:var(--sui-border-width,1px) solid var(--sui-color-border,#d1d5db)}.sui-menu-OKRRs.sui-submenuMenu-WY6D4:popover-open[data-placement]{position-area:span-self-block-end self-inline-end;position-try-fallbacks:flip-inline, flip-block, flip-block flip-inline, --sui-submenu-below, --sui-menu-shrink;align-self:normal;margin:0;margin-block-start:calc((var(--sui-space-1,.25rem) + var(--sui-border-width,1px)) * -1);margin-inline-start:calc(var(--sui-space-1,.25rem) + var(--sui-border-width,1px))}@position-try --sui-submenu-below{margin:0;margin-block-start:var(--sui-space-1,.25rem);position-area:self-block-end span-self-inline-end}@media (prefers-reduced-motion:reduce){.sui-menu-OKRRs{transition:opacity .12s ease-out}}@media (forced-colors:active){.sui-item-N41PT:focus,.sui-item-N41PT[data-active],.sui-item-N41PT[data-tone=danger]:focus,.sui-item-N41PT[aria-disabled=true]:focus,.sui-item-N41PT[aria-disabled=true][data-active],.sui-item-N41PT[aria-expanded=true]{--_sui-menu-ink:HighlightText;color:highlighttext;forced-color-adjust:none;background-color:highlight}.sui-item-N41PT:focus-visible,.sui-item-N41PT[data-active=keyboard]{outline-color:highlighttext}.sui-item-N41PT:focus *,.sui-item-N41PT[data-active] *,.sui-item-N41PT[aria-expanded=true] *{color:highlighttext}.sui-item-N41PT[aria-disabled=true]:not(:focus){--_sui-menu-part-opacity:1;color:graytext}.sui-item-N41PT[aria-disabled=true]:not(:focus) *{color:graytext}.sui-item-N41PT[aria-disabled=true][data-active],.sui-item-N41PT[aria-disabled=true][data-active] *{--_sui-menu-part-opacity:.5;color:highlighttext}}

package/dist/components/MenuSurface/MenuSurface.module.js

@@ -0,0 +1,16 @@
+import './MenuSurface.css';// src/components/MenuSurface/MenuSurface.module.css
+var e = "sui-menu-OKRRs", t = "sui-item-N41PT", n = "sui-leading-EuNjq", r = "sui-radioDot-C9sAp", i = "sui-text-vnHXY", a = "sui-label-kOmli", o = "sui-description-7UTMg", s = "sui-trailing-q5LOe", c = "sui-group-eutfz", l = "sui-groupLabel-QJV6u", u = "sui-separator-rld2z", d = "sui-submenuMenu-WY6D4", f = {
+	menu: e,
+	item: t,
+	leading: n,
+	radioDot: r,
+	text: i,
+	label: a,
+	description: o,
+	trailing: s,
+	group: c,
+	groupLabel: l,
+	separator: u,
+	submenuMenu: d
+};
+export { f as default, o as description, c as group, l as groupLabel, t as item, a as label, n as leading, e as menu, r as radioDot, u as separator, d as submenuMenu, i as text, s as trailing };

package/dist/components/Menubar/Menubar.css

@@ -0,0 +1 @@
+.sui-menubar-N3ZT4{align-items:center;gap:var(--sui-space-1,.25rem);flex-wrap:wrap;display:flex}.sui-entry-IWTly{display:flex}.sui-item-wM-61{min-block-size:1.625rem;padding:2px var(--sui-space-2,.5rem);border-radius:var(--sui-radius-md,4px);color:var(--sui-color-text,#111827);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-font-size-sm,.875rem);line-height:var(--sui-line-height-tight,1.25);cursor:default;background-color:#0000;border:0;align-items:center;transition:background-color .12s,color .12s;display:inline-flex}.sui-item-wM-61:hover,.sui-item-wM-61:focus-visible,.sui-item-wM-61[aria-expanded=true]{background-color:var(--sui-menu-highlight,var(--sui-color-secondary-subtle,#f3f4f6));color:var(--sui-menu-on-highlight,var(--sui-color-text,#111827))}.sui-item-wM-61:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:calc(var(--sui-focus-ring-width,2px) * -1)}@media (pointer:coarse){.sui-item-wM-61{min-block-size:2.75rem}}@media (forced-colors:active){.sui-item-wM-61:hover,.sui-item-wM-61:focus-visible,.sui-item-wM-61[aria-expanded=true]{color:highlighttext;forced-color-adjust:none;background-color:highlight}.sui-item-wM-61:focus-visible{outline-color:highlighttext}}

package/dist/components/Menubar/Menubar.d.ts

@@ -0,0 +1,23 @@
+import type { JSX } from "react";
+import type { RequiredAccessibleName } from "../../accessibility";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Menubar`: a required `aria-label` or `aria-labelledby` and every other `div` prop except those the
+ * menubar pattern sets
+ */
+export type MenubarProps = RequiredAccessibleName & Omit<BoxProps<"div">, "aria-activedescendant" | "aria-label" | "aria-labelledby" | "aria-orientation" | "as" | "role" | "tabIndex">;
+/**
+ * A row of menus for an app-like tool, such as an editor's "File Edit View", holding one `MenubarMenu` per menu. Name
+ * it with `aria-label` or `aria-labelledby`. The bar is one stop in the tab order: Left and Right Arrow move along it,
+ * and Down Arrow, Enter or Space open a menu. While a menu is open, moving along the bar, by key or by pointer, opens
+ * the next one instead, with focus left on the bar. A content site's header is navigation, which `NavBar` is for.
+ *
+ * @example
+ * <Menubar aria-label="Editor">
+ *   <MenubarMenu label="File">
+ *     <MenuItem onClick={create}>New</MenuItem>
+ *   </MenubarMenu>
+ *   <MenubarMenu label="Edit">…</MenubarMenu>
+ * </Menubar>
+ */
+export declare function Menubar({ className, onKeyDown, ...rest }: MenubarProps): JSX.Element;

package/dist/components/Menubar/Menubar.js

@@ -0,0 +1,67 @@
+import { extendTypeAheadQuery as e, isTypeAheadQueryLive as t, typeAheadTarget as n } from "../../collections/typeAhead.js";
+import { targetIndexForKey as r } from "../../collections/targetIndexForKey.js";
+import { hasModifier as i } from "../../menus/hasModifier.js";
+import { itemText as a } from "../../menus/itemText.js";
+import { syncPopover as o } from "../../overlays/syncPopover.js";
+import { Box as s } from "../Box/Box.js";
+import c from "./Menubar.module.js";
+import { MenubarContext as l } from "./MenubarContext.js";
+import { menubarItems as u } from "./menubarItems.js";
+import { findOpenMenubarItem as d } from "./findOpenMenubarItem.js";
+import { clsx as f } from "clsx";
+import { useRef as p, useState as m } from "react";
+import { jsx as h } from "react/jsx-runtime";
+// src/components/Menubar/Menubar.tsx
+function g({ className: o, onKeyDown: g, ...v }) {
+	let [y, b] = m(null), x = p(!1), S = p(null);
+	function C(e, t) {
+		x.current = t;
+		try {
+			e.focus();
+		} finally {
+			x.current = !1;
+		}
+	}
+	function w() {
+		return x.current;
+	}
+	function T(e) {
+		g?.(e);
+		let t = e.currentTarget, n = u(t), r = n.indexOf(e.target);
+		e.defaultPrevented || i(e) || r === -1 || (e.key === "Tab" ? _(n[r]) : E(e, n, r));
+	}
+	function E(e, t, n) {
+		let i = r({
+			count: t.length,
+			currentIndex: n,
+			direction: e.currentTarget.matches(":dir(rtl)") ? "rtl" : "ltr",
+			key: e.key,
+			orientation: "horizontal",
+			wraps: !0
+		}) ?? D(e.key, t, n);
+		i !== void 0 && (e.preventDefault(), i !== null && C(t[i], d(e.currentTarget) !== void 0));
+	}
+	function D(r, i, o) {
+		let s = Date.now();
+		if (!(Array.from(r).length !== 1 || r === " " && !t(S.current, s))) return S.current = e(S.current, r, s), n(i.map(a), o, S.current.text);
+	}
+	return /* @__PURE__ */ h(l.Provider, {
+		value: {
+			moveFocus: C,
+			opensMenuOnFocus: w,
+			setTabStop: b,
+			tabStopId: y
+		},
+		children: /* @__PURE__ */ h(s, {
+			...v,
+			className: f(c.menubar, o),
+			onKeyDown: T,
+			role: "menubar"
+		})
+	});
+}
+function _(e) {
+	let t = e.ownerDocument.getElementById(e.getAttribute("aria-controls") ?? "");
+	t !== null && o(t, !1);
+}
+export { g as Menubar };

package/dist/components/Menubar/Menubar.module.js

@@ -0,0 +1,7 @@
+import './Menubar.css';// src/components/Menubar/Menubar.module.css
+var e = "sui-menubar-N3ZT4", t = "sui-entry-IWTly", n = "sui-item-wM-61", r = {
+	menubar: e,
+	entry: t,
+	item: n
+};
+export { r as default, t as entry, n as item, e as menubar };

package/dist/components/Menubar/MenubarContext.d.ts

@@ -0,0 +1,29 @@
+import type { Dispatch, SetStateAction } from "react";
+/**
+ * State a `Menubar` shares with its `MenubarMenu`s
+ */
+export interface MenubarContextValue {
+    /**
+     * Moves focus to a bar item
+     *
+     * @param item the bar item
+     * @param opensMenu whether the item opens its menu as it takes focus, with focus left on it
+     */
+    moveFocus: (item: HTMLElement, opensMenu: boolean) => void;
+    /**
+     * Whether the bar item taking focus now opens its menu
+     */
+    opensMenuOnFocus: () => boolean;
+    /**
+     * Gives the tab stop to a bar item, by its id
+     */
+    setTabStop: Dispatch<SetStateAction<string | null>>;
+    /**
+     * The id of the bar item that is the bar's tab stop, or null before one is
+     */
+    tabStopId: string | null;
+}
+/**
+ * Carries a `Menubar`'s state to its menus; null outside a `Menubar`
+ */
+export declare const MenubarContext: import("react").Context<MenubarContextValue | null>;

package/dist/components/Menubar/MenubarContext.js

@@ -0,0 +1,4 @@
+import { createContext as e } from "react";
+// src/components/Menubar/MenubarContext.ts
+var t = e(null);
+export { t as MenubarContext };

package/dist/components/Menubar/MenubarMenu.d.ts

@@ -0,0 +1,26 @@
+import type { JSX, ReactNode } from "react";
+/**
+ * Props for `MenubarMenu`
+ */
+export interface MenubarMenuProps {
+    /**
+     * The menu's items: any menu parts, including `Submenu`
+     */
+    children?: ReactNode;
+    /**
+     * The label of the bar item that opens the menu, which names both
+     */
+    label: ReactNode;
+}
+/**
+ * One menu in a `Menubar`: an item in the bar and the compact `Menu` it opens below it, holding its children. Down
+ * Arrow, Enter or Space opens it on its first item, Up Arrow on its last, and a click with focus left on the bar item.
+ * In the menu, Right and Left Arrow move to the next or previous menu in the bar, except where they open or close a
+ * submenu. Escape closes it and returns focus to the bar item, and choosing an item closes it too.
+ *
+ * @example
+ * <MenubarMenu label="View">
+ *   <MenuItemCheckbox checked={showRuler} onCheckedChange={setShowRuler}>Ruler</MenuItemCheckbox>
+ * </MenubarMenu>
+ */
+export declare function MenubarMenu({ children, label }: MenubarMenuProps): JSX.Element;

package/dist/components/Menubar/MenubarMenu.js

@@ -0,0 +1,88 @@
+import { closeWhenFocusLeaves as e } from "../../menus/closeWhenFocusLeaves.js";
+import { hasModifier as t } from "../../menus/hasModifier.js";
+import { Box as n } from "../Box/Box.js";
+import { Menu as r } from "../Menu/Menu.js";
+import { useMenuButton as i } from "../Menu/useMenuButton.js";
+import a from "./Menubar.module.js";
+import { menubarItems as o } from "./menubarItems.js";
+import { findOpenMenubarItem as s } from "./findOpenMenubarItem.js";
+import { useMenubarContext as c } from "./useMenubarContext.js";
+import { useLayoutEffect as l, useRef as u } from "react";
+import { c as d } from "react/compiler-runtime";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+// src/components/Menubar/MenubarMenu.tsx
+function m(m) {
+	let g = d(43), { children: _, label: v } = m, y = c("MenubarMenu"), { setTabStop: b } = y, x = u(null), S;
+	g[0] === Symbol.for("react.memo_cache_sentinel") ? (S = { pointerOpeningFocus: "trigger" }, g[0] = S) : S = g[0];
+	let C = i(S), w;
+	g[1] === C ? w = g[2] : (w = C.getTriggerProps(), g[1] = C, g[2] = w);
+	let T = w, E = T.id, D;
+	g[3] !== E || g[4] !== y.tabStopId || g[5] !== b ? (D = () => {
+		let e = x.current, t = e?.closest("[role=\"menubar\"]");
+		y.tabStopId === null && t != null && o(t).at(0) === e && b(E);
+	}, g[3] = E, g[4] = y.tabStopId, g[5] = b, g[6] = D) : D = g[6], l(D);
+	let O, k;
+	g[7] !== E || g[8] !== b ? (O = () => () => {
+		b((e) => e === E ? null : e);
+	}, k = [E, b], g[7] = E, g[8] = b, g[9] = O, g[10] = k) : (O = g[9], k = g[10]), l(O, k);
+	let A;
+	g[11] !== E || g[12] !== C || g[13] !== y || g[14] !== b ? (A = function(e) {
+		b(E), y.opensMenuOnFocus() && C.show(e.currentTarget, "trigger");
+	}, g[11] = E, g[12] = C, g[13] = y, g[14] = b, g[15] = A) : A = g[15];
+	let j = A, M;
+	g[16] === T ? M = g[17] : (M = function(t) {
+		let n = t.currentTarget, r = n.ownerDocument.getElementById(T["aria-controls"]);
+		r !== null && e(r, t.relatedTarget, (e) => e === n);
+	}, g[16] = T, g[17] = M);
+	let N = M, P;
+	g[18] !== C || g[19] !== T ? (P = function(e) {
+		let t = e.currentTarget, n = t.ownerDocument.getElementById(T["aria-controls"])?.matches(":popover-open");
+		e.detail === 0 && n === !0 && (e.preventDefault(), C.show(t, "first")), T.onClick(e);
+	}, g[18] = C, g[19] = T, g[20] = P) : P = g[20];
+	let F = P, I;
+	g[21] === y ? I = g[22] : (I = function(e) {
+		let t = e.currentTarget, n = t.closest("[role=\"menubar\"]"), r = n === null ? void 0 : s(n);
+		e.pointerType !== "touch" && r !== void 0 && r !== t && y.moveFocus(t, !0);
+	}, g[21] = y, g[22] = I);
+	let L = I, R;
+	g[23] !== E || g[24] !== y ? (R = function(e) {
+		let n = e.currentTarget.ownerDocument.getElementById(E), r = n?.closest("[role=\"menubar\"]"), i = h(e.key, e.currentTarget);
+		if (e.defaultPrevented || t(e) || i === 0 || n === null || r == null) return;
+		let a = o(r), s = a.at((a.indexOf(n) + i) % a.length);
+		e.preventDefault(), s !== void 0 && y.moveFocus(s, !0);
+	}, g[23] = E, g[24] = y, g[25] = R) : R = g[25];
+	let z = R, B = y.tabStopId === E ? 0 : -1, V;
+	g[26] !== N || g[27] !== F || g[28] !== j || g[29] !== L || g[30] !== v || g[31] !== B || g[32] !== T ? (V = /* @__PURE__ */ f(n, {
+		...T,
+		as: "button",
+		className: a.item,
+		onBlur: N,
+		onClick: F,
+		onFocus: j,
+		onPointerMove: L,
+		ref: x,
+		role: "menuitem",
+		tabIndex: B,
+		type: "button",
+		children: v
+	}), g[26] = N, g[27] = F, g[28] = j, g[29] = L, g[30] = v, g[31] = B, g[32] = T, g[33] = V) : V = g[33];
+	let H;
+	g[34] !== z || g[35] !== C ? (H = C.getMenuProps({ onKeyDown: z }), g[34] = z, g[35] = C, g[36] = H) : H = g[36];
+	let U;
+	g[37] !== _ || g[38] !== H ? (U = /* @__PURE__ */ f(r, {
+		...H,
+		density: "compact",
+		children: _
+	}), g[37] = _, g[38] = H, g[39] = U) : U = g[39];
+	let W;
+	return g[40] !== V || g[41] !== U ? (W = /* @__PURE__ */ p(n, {
+		className: a.entry,
+		role: "none",
+		children: [V, U]
+	}), g[40] = V, g[41] = U, g[42] = W) : W = g[42], W;
+}
+function h(e, t) {
+	let n = t.matches(":dir(rtl)") ? "ArrowLeft" : "ArrowRight";
+	return e === n ? 1 : e === (n === "ArrowLeft" ? "ArrowRight" : "ArrowLeft") ? -1 : 0;
+}
+export { m as MenubarMenu };

package/dist/components/Menubar/findOpenMenubarItem.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Finds the bar item whose menu is open
+ *
+ * @param menubar the menubar element
+ * @returns the bar item, or undefined when none of the bar's menus is open
+ */
+export declare function findOpenMenubarItem(menubar: Element): HTMLElement | undefined;

package/dist/components/Menubar/findOpenMenubarItem.js

@@ -0,0 +1,6 @@
+import { menubarItems as e } from "./menubarItems.js";
+// src/components/Menubar/findOpenMenubarItem.ts
+function t(t) {
+	return e(t).find((e) => e.ownerDocument.getElementById(e.getAttribute("aria-controls") ?? "")?.matches(":popover-open"));
+}
+export { t as findOpenMenubarItem };

package/dist/components/Menubar/index.d.ts

@@ -0,0 +1,4 @@
+export { Menubar } from "./Menubar";
+export type { MenubarProps } from "./Menubar";
+export { MenubarMenu } from "./MenubarMenu";
+export type { MenubarMenuProps } from "./MenubarMenu";

package/dist/components/Menubar/menubarItems.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Reads the items a menubar renders
+ *
+ * @param menubar the menubar element
+ * @returns its own items in document order, leaving out the items of the menus they open
+ */
+export declare function menubarItems(menubar: Element): HTMLElement[];

package/dist/components/Menubar/menubarItems.js

@@ -0,0 +1,5 @@
+// src/components/Menubar/menubarItems.ts
+function e(e) {
+	return Array.from(e.querySelectorAll("[role=\"menuitem\"]")).filter((t) => t.parentElement?.closest("[role=\"menu\"], [role=\"menubar\"]") === e);
+}
+export { e as menubarItems };

package/dist/components/Menubar/useMenubarContext.d.ts

@@ -0,0 +1,9 @@
+import type { MenubarContextValue } from "./MenubarContext";
+/**
+ * Reads the state of the surrounding `Menubar`
+ *
+ * @param part the name of the part reading it, for the error message
+ * @returns the surrounding `Menubar`'s state
+ * @throws MissingContextError when the part is not inside a `Menubar`
+ */
+export declare function useMenubarContext(part: string): MenubarContextValue;

package/dist/components/Menubar/useMenubarContext.js

@@ -0,0 +1,10 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { MenubarContext as t } from "./MenubarContext.js";
+import { useContext as n } from "react";
+// src/components/Menubar/useMenubarContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "Menubar");
+	return i;
+}
+export { r as useMenubarContext };

package/dist/components/NavBar/NavBar.css

@@ -0,0 +1 @@
+.sui-bar-YKJoe{color:var(--sui-color-text,#111827);font-family:var(--sui-font-body,system-ui, sans-serif);line-height:var(--sui-line-height-tight,1.25);flex:1;container:sui-nav-bar/inline-size}.sui-layout-h4XLw{--_sui-nav-bar-below-collapse-width:0;align-items:center;gap:var(--sui-space-2,.5rem);flex-wrap:wrap;display:flex}.sui-bar-YKJoe[data-collapse=always]>.sui-layout-h4XLw{--_sui-nav-bar-below-collapse-width:1}@container sui-nav-bar (width<30rem){.sui-bar-YKJoe[data-collapse=sm]>.sui-layout-h4XLw{--_sui-nav-bar-below-collapse-width:1}}@container sui-nav-bar (width<48rem){.sui-bar-YKJoe[data-collapse=md]>.sui-layout-h4XLw{--_sui-nav-bar-below-collapse-width:1}}@container sui-nav-bar (width<64rem){.sui-bar-YKJoe[data-collapse=lg]>.sui-layout-h4XLw{--_sui-nav-bar-below-collapse-width:1}}.sui-start-7Cofw,.sui-end-KbxmI{align-items:center;gap:var(--sui-space-2,.5rem);flex:none;display:flex}.sui-navigation-CUxrs{--_sui-nav-bar-collapsed:0;flex:1;min-inline-size:0}.sui-list-pjBUp{align-items:center;gap:var(--sui-space-1,.25rem);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.sui-control-ORmQT{box-sizing:border-box;align-items:center;gap:var(--sui-space-1,.25rem);min-block-size:2rem;padding:var(--sui-space-1,.25rem) var(--sui-space-2,.5rem);border-radius:var(--sui-radius-md,4px);color:var(--sui-color-text,#111827);font:inherit;font-size:var(--sui-font-size-sm,.875rem);font-weight:var(--sui-font-weight-medium,500);text-align:start;cursor:pointer;background-color:#0000;border:0;text-decoration:none;transition:background-color .12s;display:inline-flex;position:relative}.sui-control-ORmQT:hover,.sui-control-ORmQT[aria-expanded=true]{background-color:var(--sui-color-secondary-subtle,#f3f4f6)}.sui-control-ORmQT:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}.sui-control-ORmQT:after{inset-block-end:0;inset-inline:var(--sui-space-2,.5rem);block-size:calc(var(--sui-border-width,1px) * 2);border-radius:var(--sui-radius-full,9999px);background-color:var(--sui-color-primary,#2563eb);content:"";display:none;position:absolute}.sui-control-ORmQT[aria-current]:not([aria-current=false]):after{display:block}.sui-section-P9Rex:has(.sui-panel-LFMyY [aria-current]:not([aria-current=false]))>.sui-control-ORmQT:after{display:block}.sui-toggle-4poR7{display:none}.sui-chevron-PDy4f{transition:rotate .12s ease-out}.sui-control-ORmQT[aria-expanded=true]>.sui-chevron-PDy4f{rotate:180deg}.sui-panel-LFMyY{z-index:1;position-area:self-block-end span-self-inline-end;position-try-fallbacks:flip-inline, --sui-nav-bar-panel-shrink;box-sizing:border-box;inline-size:max-content;max-inline-size:calc(100vw - var(--sui-space-2,.5rem) * 2);max-block-size:100%;max-block-size:stretch;overscroll-behavior:contain;padding:var(--sui-space-2,.5rem);border:var(--sui-border-width,1px) solid var(--sui-color-border,#d1d5db);border-radius:var(--sui-radius-lg,8px);background-color:var(--sui-color-overlay,#fff);box-shadow:var(--sui-shadow-sm,0 1px 3px #0000001f);transition:opacity .12s ease-out, translate var(--sui-motion-spring,.12s ease-out);margin-block-start:var(--sui-space-1,.25rem);position:fixed;overflow-y:auto}@position-try --sui-nav-bar-panel-shrink{inline-size:auto;margin-inline-end:var(--sui-space-2,.5rem)}@starting-style{.sui-panel-LFMyY{opacity:0;translate:0 calc(var(--sui-popover-offset,4px) * -1)}}.sui-panelList-o--Wi,.sui-groupList-BACy0{margin:0;padding:0;list-style:none}.sui-panelList-o--Wi{--_sui-nav-bar-columns:1;grid-template-columns:repeat(var(--_sui-nav-bar-columns), minmax(0, 18rem));gap:1px var(--sui-space-2,.5rem);display:grid}.sui-panel-LFMyY[data-columns="2"]>.sui-panelList-o--Wi{--_sui-nav-bar-columns:2}.sui-panel-LFMyY[data-columns="3"]>.sui-panelList-o--Wi{--_sui-nav-bar-columns:3}.sui-group-nS46Z,.sui-groupList-BACy0{flex-direction:column;gap:1px;display:flex}.sui-groupTitle-e3Nhq{padding:var(--sui-space-2,.5rem) var(--sui-space-2,.5rem) var(--sui-space-1,.25rem)}.sui-panelLink-PFMpf{box-sizing:border-box;min-block-size:2rem;padding:var(--sui-space-1,.25rem) var(--sui-space-2,.5rem);border-radius:var(--sui-radius-md,4px);color:var(--sui-color-text,#111827);font-size:var(--sui-font-size-sm,.875rem);flex-direction:column;justify-content:center;gap:2px;text-decoration:none;transition:background-color .12s;display:flex;position:relative}.sui-panelLink-PFMpf:hover{background-color:var(--sui-color-secondary-subtle,#f3f4f6)}.sui-panelLink-PFMpf:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:calc(var(--sui-focus-ring-width,2px) * -1)}.sui-title-db-od{font-weight:var(--sui-font-weight-medium,500);overflow-wrap:anywhere}.sui-panelLink-PFMpf[aria-current]:not([aria-current=false])>.sui-title-db-od{text-decoration-line:underline;-webkit-text-decoration-color:var(--sui-color-primary,#2563eb);text-decoration-color:var(--sui-color-primary,#2563eb);text-decoration-thickness:calc(var(--sui-border-width,1px) * 2);text-underline-offset:4px}.sui-description-FOS-6{color:var(--sui-color-text-muted,#4b5563);font-size:var(--sui-font-size-xs,.75rem);overflow-wrap:anywhere}.sui-control-ORmQT:before,.sui-panelLink-PFMpf:before{inset-block:var(--sui-space-1,.25rem);inline-size:calc(var(--sui-border-width,1px) * 2);border-radius:var(--sui-radius-full,9999px);background-color:var(--sui-color-primary,#2563eb);content:"";display:none;position:absolute;inset-inline-start:0}@media (prefers-reduced-motion:reduce){.sui-panel-LFMyY{transition:opacity .12s ease-out}.sui-chevron-PDy4f{transition:none}}@container style(--_sui-nav-bar-below-collapse-width:1){.sui-navigation-CUxrs{--_sui-nav-bar-collapsed:1}.sui-toggle-4poR7{gap:var(--sui-space-2,.5rem);margin-inline-start:auto;display:inline-flex}.sui-navigation-CUxrs{flex-basis:100%;order:1}.sui-navigation-CUxrs:not([data-open]){display:none}.sui-list-pjBUp{align-items:stretch;gap:var(--sui-space-1,.25rem);flex-direction:column}.sui-control-ORmQT,.sui-panelLink-PFMpf{min-block-size:2.75rem;inline-size:100%;font-size:var(--sui-font-size-md,1rem);display:flex}.sui-chevron-PDy4f{margin-inline-start:auto}.sui-toggle-4poR7.sui-control-ORmQT{inline-size:auto}.sui-panel-LFMyY{max-block-size:none;inline-size:auto;max-inline-size:none;padding:0;box-shadow:none;background-color:#0000;border:0;border-radius:0;margin:0;padding-inline-start:var(--sui-space-4,1rem);transition:none;position:static;overflow:visible}.sui-panelList-o--Wi{gap:var(--sui-space-1,.25rem);grid-template-columns:minmax(0,1fr)}.sui-panelLink-PFMpf:focus-visible{outline-offset:2px}.sui-description-FOS-6{font-size:var(--sui-font-size-sm,.875rem)}.sui-control-ORmQT[aria-current]:not([aria-current=false]),.sui-panelLink-PFMpf[aria-current]:not([aria-current=false]){background-color:var(--sui-color-primary-subtle,#edf5ff);color:var(--sui-color-primary,#2563eb);font-weight:var(--sui-font-weight-bold,700)}.sui-panelLink-PFMpf[aria-current]:not([aria-current=false])>.sui-title-db-od{font-weight:inherit;text-decoration-line:none}.sui-control-ORmQT[aria-current]:not([aria-current=false]):after{display:none}.sui-section-P9Rex:has(.sui-panel-LFMyY [aria-current]:not([aria-current=false]))>.sui-control-ORmQT:after{display:none}.sui-control-ORmQT[aria-current]:not([aria-current=false]):before,.sui-panelLink-PFMpf[aria-current]:not([aria-current=false]):before{display:block}}@media (forced-colors:active){.sui-control-ORmQT:before,.sui-control-ORmQT:after,.sui-panelLink-PFMpf:before{forced-color-adjust:none;background-color:highlight}.sui-panel-LFMyY{border-color:canvastext}}

package/dist/components/NavBar/NavBar.d.ts

@@ -0,0 +1,53 @@
+import type { JSX, ReactNode } from "react";
+import type { RequiredAccessibleName } from "../../accessibility";
+import type { BoxProps } from "../Box";
+/**
+ * Below which width of the bar its navigation collapses behind its "Menu" toggle: `sm` 30rem, `md` 48rem and `lg`
+ * 64rem, or `always` and `never`
+ */
+export type NavBarCollapse = "always" | "lg" | "md" | "never" | "sm";
+interface NavBarOwnProps {
+    /**
+     * The entries: `NavBarItem`s and `NavBarMenu`s
+     */
+    children: ReactNode;
+    /**
+     * Below which width of the bar the navigation collapses behind "Menu": `sm` 30rem, `md` 48rem, `lg` 64rem. Defaults
+     * to `md`.
+     */
+    collapse?: NavBarCollapse;
+    /**
+     * Content after the navigation in the bar, such as a search button. Stays in the first row when collapsed.
+     */
+    end?: ReactNode;
+    /**
+     * The toggle's visible label. Defaults to "Menu".
+     */
+    menuLabel?: string;
+    /**
+     * Content before the navigation in the bar, such as the site's name. Stays in the first row when collapsed.
+     */
+    start?: ReactNode;
+}
+/**
+ * Props for `NavBar`: its own props, a required `aria-label` or `aria-labelledby` for its `nav`, and every other `div`
+ * prop except `dangerouslySetInnerHTML`, which go to the bar
+ */
+export type NavBarProps = NavBarOwnProps & RequiredAccessibleName & Omit<BoxProps<"div">, "aria-label" | "aria-labelledby" | "as" | "children" | "dangerouslySetInnerHTML">;
+/**
+ * A site's header navigation, for blogs, docs and marketing sites: a row of `NavBarItem` links and `NavBarMenu`
+ * sections, each opening a panel of links. Below its `collapse` width, measured on the bar, the navigation hides behind
+ * a "Menu" toggle and opens below the bar's first row, pushing the page down. Choosing a link closes it. Name the
+ * navigation with `aria-label` or `aria-labelledby`. For an app's sidebar, use `NavList`; for commands, `Menu`.
+ *
+ * @example
+ * <NavBar aria-label="Main" start={<Link href="/" underline="hover">The Long Read</Link>}>
+ *   <NavBarItem href="/articles" aria-current="page">Articles</NavBarItem>
+ *   <NavBarMenu label="Topics">
+ *     <NavBarMenuItem href="/topics/design">Design</NavBarMenuItem>
+ *   </NavBarMenu>
+ *   <NavBarItem href="/about">About</NavBarItem>
+ * </NavBar>
+ */
+export declare function NavBar({ "aria-label": label, "aria-labelledby": labelledBy, children, className, collapse, end, menuLabel, start, ...rest }: NavBarProps): JSX.Element;
+export {};