@rvx/ui 0.4.5 → 0.4.7

package/dist/common/types.d.ts

@@ -1,4 +1,5 @@
 export type SizeContext = "content" | "group" | "control";
 export type AriaLive = "off" | "polite" | "assertive";
 export type AriaRelevant = "additions" | "removals" | "text" | "all" | "additions removals" | "additions text" | "removals text";
+export type AriaCurrent = "page" | "step" | "location" | boolean;
 //# sourceMappingURL=types.d.ts.map

package/dist/common/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/common/types.tsx"],"names":[],"mappings":"AACA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,oBAAoB,GAAG,gBAAgB,GAAG,eAAe,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/common/types.tsx"],"names":[],"mappings":"AACA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,oBAAoB,GAAG,gBAAgB,GAAG,eAAe,CAAC;AACjI,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC"}

package/dist/components/nav-bar.d.ts

@@ -0,0 +1,36 @@
+import { ClassValue, Content, Expression, StyleValue } from "rvx";
+import { Action } from "../common/events.js";
+import { AriaCurrent } from "../common/types.js";
+import { LinkAnchorRel, LinkAnchorTarget, LinkReferrerPolicy } from "./link.js";
+export declare function NavBar(props: {
+    class?: ClassValue;
+    style?: StyleValue;
+    inlineSize?: Expression<string | undefined>;
+    start?: Content;
+    center?: Content;
+    end?: Content;
+}): unknown;
+export declare function NavBarItem(props: {
+    class?: ClassValue;
+    style?: StyleValue;
+    children?: Content;
+    disabled?: Expression<boolean | undefined>;
+    action?: Action;
+    download?: Expression<string | boolean | undefined>;
+    href?: Expression<string | undefined>;
+    hreflang?: Expression<string | undefined>;
+    target?: Expression<LinkAnchorTarget | string | undefined>;
+    referrerpolicy?: Expression<LinkReferrerPolicy | undefined>;
+    rel?: Expression<LinkAnchorRel | LinkAnchorRel[] | undefined>;
+    title?: Expression<string | undefined>;
+    current?: Expression<AriaCurrent | undefined>;
+    "aria-expanded"?: Expression<boolean | undefined>;
+    "aria-haspopup"?: Expression<string | undefined>;
+    "aria-controls"?: Expression<string | undefined>;
+}): unknown;
+export declare function NavBarContent(props: {
+    class?: ClassValue;
+    style?: StyleValue;
+    children?: Content;
+}): unknown;
+//# sourceMappingURL=nav-bar.d.ts.map

package/dist/components/nav-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-bar.d.ts","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAY,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5E,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAGhF,wBAAgB,MAAM,CAAC,KAAK,EAAE;IAC7B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;CACd,WAyBA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE;IACjC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;IAKpD,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAKtC,QAAQ,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAK1C,MAAM,CAAC,EAAE,UAAU,CAAC,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAO3D,cAAc,CAAC,EAAE,UAAU,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAC;IAO5D,GAAG,CAAC,EAAE,UAAU,CAAC,aAAa,GAAG,aAAa,EAAE,GAAG,SAAS,CAAC,CAAC;IAE9D,KAAK,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,UAAU,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAE9C,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAClD,eAAe,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACjD,WA6CA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACpC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,WAWA"}

package/dist/components/nav-bar.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "rvx/jsx-runtime";
+import styles from "@rvx/ui/theme/components/nav-bar.module.css";
+import { get, map } from "rvx";
+import { isPending } from "rvx/async";
+import { optionalString, separated } from "rvx/convert";
+import { handleActionEvent, isKey } from "../common/events.js";
+import { Row } from "./row.js";
+export function NavBar(props) {
+    return _jsx("nav", { class: [
+            styles.nav,
+            props.class,
+        ], style: [
+            props.style,
+            {
+                "--nav-bar-inline-size": props.inlineSize,
+            }
+        ], children: _jsxs("div", { class: styles.grid, children: [_jsx("div", { class: styles.start, children: props.start }), _jsx("div", { class: styles.center, children: props.center }), _jsx("div", { class: styles.end, children: props.end })] }) });
+}
+export function NavBarItem(props) {
+    const disabled = () => isPending() || get(props.disabled);
+    function action(event) {
+        if (disabled() || !props.action) {
+            return;
+        }
+        handleActionEvent(event, props.action);
+    }
+    const isLink = props.href !== undefined;
+    const Tag = isLink ? "a" : "button";
+    return _jsx(Tag, { type: isLink ? undefined : "button", disabled: disabled, class: [
+            props.class,
+            styles.item,
+            map(props.current, current => current ? styles.current : undefined),
+            map(props["aria-expanded"], expanded => expanded ? styles.expanded : undefined),
+        ], style: props.style, title: props.title, "aria-current": optionalString(props.current), "aria-expanded": optionalString(props["aria-expanded"]), "aria-haspopup": props["aria-haspopup"], "aria-controls": props["aria-controls"], download: isLink && props.download, href: isLink && props.href, hreflang: isLink && props.hreflang, target: isLink && props.target, referrerpolicy: isLink && map(props.referrerpolicy, v => v ?? "no-referrer"), rel: isLink && separated(map(props.rel, v => v ?? "noreferrer"), " "), "on:click": action, "on:keydown": event => {
+            if (isKey(event, "enter") || isKey(event, " ")) {
+                action(event);
+            }
+        }, children: props.children });
+}
+export function NavBarContent(props) {
+    return _jsx(Row, { class: [
+            props.class,
+            styles.content
+        ], style: props.style, align: "center", children: props.children });
+}
+//# sourceMappingURL=nav-bar.js.map

package/dist/components/nav-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-bar.js","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import "@rvx/ui/theme/global.css";
+import "@rvx/ui/theme/types.d.ts";
 export * from "./common/context.js";
 export * from "./common/coupling.js";
 export * from "./common/events.js";
@@ -23,7 +24,7 @@ export * from "./components/heading.js";
 export * from "./components/label.js";
 export * from "./components/layer.js";
 export * from "./components/link.js";
-export * from "./components/nav-list.js";
+export * from "./components/nav-bar.js";
 export * from "./components/notifications.js";
 export * from "./components/page.js";
 export * from "./components/placeholder.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,0BAA0B,CAAC;AAElC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 import "@rvx/ui/theme/global.css";
+import "@rvx/ui/theme/types.d.ts";
 export * from "./common/context.js";
 export * from "./common/coupling.js";
 export * from "./common/events.js";
@@ -23,7 +24,7 @@ export * from "./components/heading.js";
 export * from "./components/label.js";
 export * from "./components/layer.js";
 export * from "./components/link.js";
-export * from "./components/nav-list.js";
+export * from "./components/nav-bar.js";
 export * from "./components/notifications.js";
 export * from "./components/page.js";
 export * from "./components/placeholder.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,0BAA0B,CAAC;AAElC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}

package/package.json

@@ -12,7 +12,7 @@
 		"rvx"
 	],
 	"license": "MIT",
-	"version": "0.4.5",
+	"version": "0.4.7",
 	"type": "module",
 	"main": "./dist/index.js",
 	"sideEffects": false,

package/src/common/types.tsx

@@ -3,3 +3,4 @@ export type SizeContext = "content" | "group" | "control";
 
 export type AriaLive = "off" | "polite" | "assertive";
 export type AriaRelevant = "additions" | "removals" | "text" | "all" | "additions removals" | "additions text" | "removals text";
+export type AriaCurrent = "page" | "step" | "location" | boolean;

package/src/components/nav-bar.tsx

@@ -0,0 +1,149 @@
+import styles from "@rvx/ui/theme/components/nav-bar.module.css";
+import { ClassValue, Content, Expression, get, map, StyleValue } from "rvx";
+import { isPending } from "rvx/async";
+import { optionalString, separated } from "rvx/convert";
+import { Action, handleActionEvent, isKey } from "../common/events.js";
+import { AriaCurrent } from "../common/types.js";
+import { LinkAnchorRel, LinkAnchorTarget, LinkReferrerPolicy } from "./link.js";
+import { Row } from "./row.js";
+
+export function NavBar(props: {
+	class?: ClassValue;
+	style?: StyleValue;
+	inlineSize?: Expression<string | undefined>;
+	start?: Content;
+	center?: Content;
+	end?: Content;
+}) {
+	return <nav
+		class={[
+			styles.nav,
+			props.class,
+		]}
+		style={[
+			props.style,
+			{
+				"--nav-bar-inline-size": props.inlineSize,
+			}
+		]}
+	>
+		<div class={styles.grid}>
+			<div class={styles.start}>
+				{props.start}
+			</div>
+			<div class={styles.center}>
+				{props.center}
+			</div>
+			<div class={styles.end}>
+				{props.end}
+			</div>
+		</div>
+	</nav>;
+}
+
+export function NavBarItem(props: {
+	class?: ClassValue;
+	style?: StyleValue;
+	children?: Content;
+	disabled?: Expression<boolean | undefined>;
+	action?: Action;
+	download?: Expression<string | boolean | undefined>;
+
+	/**
+	 * The url this link points to.
+	 */
+	href?: Expression<string | undefined>;
+
+	/**
+	 * Hints the human language of the linked url.
+	 */
+	hreflang?: Expression<string | undefined>;
+
+	/**
+	 * The link target.
+	 */
+	target?: Expression<LinkAnchorTarget | string | undefined>;
+
+	/**
+	 * How much of the referrer to send when following the link.
+	 *
+	 * @default "no-referrer"
+	 */
+	referrerpolicy?: Expression<LinkReferrerPolicy | undefined>;
+
+	/**
+	 * The link type.
+	 *
+	 * @default "noreferrer"
+	 */
+	rel?: Expression<LinkAnchorRel | LinkAnchorRel[] | undefined>;
+
+	title?: Expression<string | undefined>;
+	current?: Expression<AriaCurrent | undefined>;
+
+	"aria-expanded"?: Expression<boolean | undefined>;
+	"aria-haspopup"?: Expression<string | undefined>;
+	"aria-controls"?: Expression<string | undefined>;
+}) {
+	const disabled = () => isPending() || get(props.disabled);
+
+	function action(event: Event) {
+		if (disabled() || !props.action) {
+			return;
+		}
+		handleActionEvent(event, props.action);
+	}
+
+	const isLink = props.href !== undefined;
+	const Tag = isLink ? "a" : "button";
+
+	return <Tag
+		type={isLink ? undefined : "button"}
+		disabled={disabled}
+		class={[
+			props.class,
+			styles.item,
+			map(props.current, current => current ? styles.current : undefined),
+			map(props["aria-expanded"], expanded => expanded ? styles.expanded : undefined),
+		]}
+		style={props.style}
+		title={props.title}
+		aria-current={optionalString(props.current)}
+		aria-expanded={optionalString(props["aria-expanded"])}
+		aria-haspopup={props["aria-haspopup"]}
+		aria-controls={props["aria-controls"]}
+
+		download={isLink && props.download}
+		href={isLink && props.href}
+		hreflang={isLink && props.hreflang}
+		target={isLink && props.target}
+		referrerpolicy={isLink && map(props.referrerpolicy, v => v ?? "no-referrer")}
+		rel={isLink && separated(map(props.rel, v => v ?? "noreferrer"), " ")}
+
+		on:click={action}
+		on:keydown={event => {
+			if (isKey(event, "enter") || isKey(event, " ")) {
+				action(event);
+			}
+		}}
+	>
+		{props.children}
+	</Tag>;
+}
+
+export function NavBarContent(props: {
+	class?: ClassValue;
+	style?: StyleValue;
+	children?: Content;
+}) {
+	return <Row
+		class={[
+			props.class,
+			styles.content
+		]}
+		style={props.style}
+		align="center"
+	>
+		{props.children}
+	</Row>;
+}

package/src/index.tsx

@@ -1,5 +1,5 @@
-/// <reference types="@rvx/ui/theme/types.d.ts" />
 import "@rvx/ui/theme/global.css";
+import "@rvx/ui/theme/types.d.ts";
 
 export * from "./common/context.js";
 export * from "./common/coupling.js";
@@ -25,7 +25,7 @@ export * from "./components/heading.js";
 export * from "./components/label.js";
 export * from "./components/layer.js";
 export * from "./components/link.js";
-export * from "./components/nav-list.js";
+export * from "./components/nav-bar.js";
 export * from "./components/notifications.js";
 export * from "./components/page.js";
 export * from "./components/placeholder.js";

package/theme/components/control-group.module.css

@@ -3,7 +3,7 @@
 	display: flex;
 	box-shadow: var(--control-shadow);
 	border-radius: var(--control-radius);
-	gap: var(--separator);
+	gap: var(--separator-size);
 
 	& > * {
 		box-shadow: none;
@@ -28,6 +28,9 @@
 		border-start-end-radius: 0;
 		border-end-end-radius: 0;
 	}
+	& > * {
+		margin-inline-start: calc((var(--space-scale) - 1) * var(--separator-size));
+	}
 }
 
 .column {
@@ -48,4 +51,7 @@
 		border-end-start-radius: 0;
 		border-end-end-radius: 0;
 	}
+	& > * {
+		margin-block-start: calc((var(--space-scale) - 1) * var(--separator-size));
+	}
 }

package/theme/components/nav-bar.module.css

@@ -0,0 +1,92 @@
+
+.nav {
+	background-color: var(--nav-bar-bg);
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.grid {
+	flex-grow: 1;
+	max-inline-size: var(--nav-bar-inline-size);
+	margin-inline: var(--page-padding-inline);
+
+	display: grid;
+	grid-template-columns: 1fr auto 1fr;
+	gap: var(--content-column-gap);
+}
+
+.start,
+.center,
+.end {
+	display: flex;
+	flex-direction: row;
+	gap: var(--content-column-gap);
+}
+
+.start {
+	justify-content: start;
+}
+
+.end {
+	justify-content: end;
+}
+
+.item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	white-space: nowrap;
+
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: 600;
+	line-height: 1;
+
+	cursor: pointer;
+	outline: none;
+	text-decoration: none;
+
+	padding-inline: 0;
+	padding-block: calc(var(--content-padding-block) + var(--marker-size)) var(--content-padding-block);
+
+	border: none;
+	border-block-end: var(--marker-size) solid transparent;
+
+	background-color: transparent;
+	color: var(--fg-secondary);
+
+	&[disabled] {
+		cursor: default;
+		filter: var(--control-disabled);
+	}
+
+	transition: border-block-end-color var(--transition-color),
+		color var(--transition-color);
+
+	&:hover:not([disabled]),
+	&:focus-visible:not([disabled]),
+	&.expanded {
+		color: var(--fg);
+		border-block-end-color: var(--nav-bar-marker-hover);
+	}
+
+	&.current.current {
+		color: var(--fg);
+		border-block-end-color: var(--accent);
+	}
+}
+
+.content {
+	padding-block: var(--group-padding-block);
+}
+
+:global(.rvx-dark) {
+	--nav-bar-bg: rgb(32 32 32);
+	--nav-bar-marker-hover: rgb(80 80 80);
+}
+
+:global(.rvx-light) {
+	--nav-bar-bg: rgb(240 240 240);
+	--nav-bar-marker-hover: rgb(172 172 172);
+}

package/theme/components/separated.module.css

@@ -7,7 +7,7 @@
 		overflow: hidden;
 	}
 	& > :not(.has_separator) + :not(.has_separator) {
-		border-block-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
+		border-block-start: calc(var(--separator-size) * var(--space-scale)) solid var(--separator-color);
 	}
 }
 
@@ -19,6 +19,6 @@
 		overflow: hidden;
 	}
 	& > :not(.has_separator) + :not(.has_separator) {
-		border-inline-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
+		border-inline-start: calc(var(--separator-size) * var(--space-scale)) solid var(--separator-color);
 	}
 }

package/theme/components/tabs.module.css

@@ -2,7 +2,7 @@
 .list {
 	display: flex;
 	flex-direction: row;
-	border-bottom: var(--separator) solid var(--separator-color);
+	border-bottom: var(--separator-size) solid var(--separator-color);
 }
 
 .list_padded {
@@ -18,7 +18,7 @@
 	cursor: pointer;
 	outline: none;
 
-	padding-block: var(--control-padding-block);
+	padding-block: calc(var(--control-padding-block) + var(--control-border)) var(--control-padding-block);
 	padding-inline: calc(var(--control-padding-inline) + var(--control-border));
 
 	background-color: transparent;

package/theme/global.css

@@ -53,7 +53,8 @@ body {
 	--transition-color: .1s ease;
 	--transition-layout: .25s ease;
 
-	--separator: calc(2rem / 14);
+	--separator-size: calc(2rem / 14);
+	--marker-size: calc(3rem / 14);
 
 	--overflow-safe-area: calc(2rem / 14);
 	--input-extension: calc(5rem / 14);
@@ -71,6 +72,7 @@ body {
 	--fg: white;
 	--accent: rgb(64 160 255);
 	--fg-danger: rgb(255 64 64);
+	--fg-secondary: rgb(255 255 255 / .6);
 
 	--secondary-filter: opacity(.6);
 
@@ -99,6 +101,7 @@ body {
 	--fg: rgb(42 42 42);
 	--accent: rgb(0 127 255);
 	--fg-danger: rgb(255 64 64);
+	--fg-secondary: rgb(42 42 42 / .6);
 
 	--secondary-filter: opacity(.65);
 

package/dist/components/nav-list.d.ts

@@ -1,19 +0,0 @@
-import { ClassValue, Expression, StyleValue } from "rvx";
-import { Action } from "../common/events.js";
-export declare function NavList(props: {
-    role?: Expression<string | false | undefined>;
-    class?: ClassValue;
-    style?: StyleValue;
-    id?: Expression<string | undefined>;
-    children?: unknown;
-}): unknown;
-export declare function NavListButton(props: {
-    current?: Expression<boolean | undefined>;
-    disabled?: Expression<boolean | undefined>;
-    class?: ClassValue;
-    style?: StyleValue;
-    id?: Expression<string | undefined>;
-    action?: Action;
-    children?: unknown;
-}): unknown;
-//# sourceMappingURL=nav-list.d.ts.map

package/dist/components/nav-list.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-list.d.ts","sourceRoot":"","sources":["../../src/components/nav-list.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAY,UAAU,EAAE,MAAM,KAAK,CAAC;AAGnE,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AAEvE,wBAAgB,OAAO,CAAC,KAAK,EAAE;IAM9B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC,CAAC;IAE9C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,EAAE,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAeV;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAIpC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAE1C,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,EAAE,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CA8BV"}

package/dist/components/nav-list.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "rvx/jsx-runtime";
-import styles from "@rvx/ui/theme/components/nav-list.module.css";
-import { get, map } from "rvx";
-import { isPending } from "rvx/async";
-import { optionalString } from "rvx/convert";
-import { handleActionEvent, isKey } from "../common/events.js";
-export function NavList(props) {
-    return _jsx("div", { class: [
-            styles.nav_list,
-            props.class,
-        ], style: [
-            { "--nav-list-depth": String(0) },
-            props.style,
-        ], id: props.id, role: map(props.role, role => role ?? "navigation"), children: props.children });
-}
-export function NavListButton(props) {
-    const disabled = () => isPending() || get(props.disabled);
-    function action(event) {
-        if (disabled() || !props.action) {
-            return;
-        }
-        handleActionEvent(event, props.action);
-    }
-    return _jsx("button", { type: "button", disabled: disabled, class: [
-            styles.item,
-            map(props.current, current => current && styles.item_current),
-            props.class,
-        ], style: props.style, id: props.id, "on:click": action, "on:keydown": event => {
-            if (isKey(event, "enter") || isKey(event, " ")) {
-                action(event);
-            }
-        }, "aria-current": optionalString(props.current), children: props.children });
-}
-//# sourceMappingURL=nav-list.js.map

package/dist/components/nav-list.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-list.js","sourceRoot":"","sources":["../../src/components/nav-list.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,8CAA8C,CAAC;AAClE,OAAO,EAA0B,GAAG,EAAE,GAAG,EAAc,MAAM,KAAK,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAU,iBAAiB,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAEvE,MAAM,UAAU,OAAO,CAAC,KAYvB;IACA,OAAO,cACN,KAAK,EAAE;YACN,MAAM,CAAC,QAAQ;YACf,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE;YACN,EAAE,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE;YACjC,KAAK,CAAC,KAAK;SACX,EACD,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,YAAY,CAAC,YAElD,KAAK,CAAC,QAAQ,GACV,CAAC;AACR,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAY7B;IACA,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE1D,SAAS,MAAM,CAAC,KAAY;QAC3B,IAAI,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACjC,OAAO;QACR,CAAC;QACD,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC;IAED,OAAO,iBACN,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;YACN,MAAM,CAAC,IAAI;YACX,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,IAAI,MAAM,CAAC,YAAY,CAAC;YAC7D,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,EAAE,EAAE,KAAK,CAAC,EAAE,cACF,MAAM,gBACJ,KAAK,CAAC,EAAE;YACnB,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC;gBAChD,MAAM,CAAC,KAAK,CAAC,CAAC;YACf,CAAC;QACF,CAAC,kBACa,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,YAE1C,KAAK,CAAC,QAAQ,GACP,CAAC;AACX,CAAC"}

package/src/components/nav-list.tsx

@@ -1,78 +0,0 @@
-import styles from "@rvx/ui/theme/components/nav-list.module.css";
-import { ClassValue, Expression, get, map, StyleValue } from "rvx";
-import { isPending } from "rvx/async";
-import { optionalString } from "rvx/convert";
-import { Action, handleActionEvent, isKey } from "../common/events.js";
-
-export function NavList(props: {
-	/**
-	 * The element role or `false` to disable.
-	 *
-	 * @default "navigation"
-	 */
-	role?: Expression<string | false | undefined>;
-
-	class?: ClassValue;
-	style?: StyleValue;
-	id?: Expression<string | undefined>;
-	children?: unknown;
-}): unknown {
-	return <div
-		class={[
-			styles.nav_list,
-			props.class,
-		]}
-		style={[
-			{ "--nav-list-depth": String(0) },
-			props.style,
-		]}
-		id={props.id}
-		role={map(props.role, role => role ?? "navigation")}
-	>
-		{props.children}
-	</div>;
-}
-
-export function NavListButton(props: {
-	/**
-	 * True if this is the currently selected item.
-	 */
-	current?: Expression<boolean | undefined>;
-
-	disabled?: Expression<boolean | undefined>;
-	class?: ClassValue;
-	style?: StyleValue;
-	id?: Expression<string | undefined>;
-	action?: Action;
-	children?: unknown;
-}): unknown {
-	const disabled = () => isPending() || get(props.disabled);
-
-	function action(event: Event) {
-		if (disabled() || !props.action) {
-			return;
-		}
-		handleActionEvent(event, props.action);
-	}
-
-	return <button
-		type="button"
-		disabled={disabled}
-		class={[
-			styles.item,
-			map(props.current, current => current && styles.item_current),
-			props.class,
-		]}
-		style={props.style}
-		id={props.id}
-		on:click={action}
-		on:keydown={event => {
-			if (isKey(event, "enter") || isKey(event, " ")) {
-				action(event);
-			}
-		}}
-		aria-current={optionalString(props.current)}
-	>
-		{props.children}
-	</button>;
-}

package/theme/components/nav-list.module.css

@@ -1,76 +0,0 @@
-
-.nav_list {
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	z-index: 0;
-}
-
-.item {
-	font-family: inherit;
-	font-size: inherit;
-	font-weight: 600;
-	line-height: 1;
-	text-align: left;
-
-	background-color: var(--nav-list-item-bg);
-	color: var(--nav-list-item-fg);
-	border: var(--nav-list-item-border) solid var(--control-border);
-	border-radius: var(--control-radius);
-
-	cursor: pointer;
-
-	outline: none;
-	padding-block: var(--control-padding-block);
-	padding-inline: var(--control-padding-inline);
-
-	transition: var(--transition-color) background-color,
-		var(--transition-color) border-color;
-
-	&[disabled] {
-		cursor: default;
-		filter: var(--control-disabled);
-	}
-
-	&:hover:not(:active):not([disabled]),
-	&:focus-visible {
-		color: var(--nav-list-item-fg-hover);
-		background-color: var(--nav-list-item-bg-hover);
-	}
-
-	&:active {
-		color: var(--nav-list-item-fg-active);
-		background-color: var(--nav-list-item-bg-active);
-	}
-}
-
-.item_current {
-	color: var(--nav-list-item-fg-current);
-	background-color: var(--nav-list-item-bg-current);
-	box-shadow: var(--control-shadow);
-	z-index: 1;
-}
-
-:global(.rvx-dark) {
-	--nav-list-item-bg: transparent;
-	--nav-list-item-bg-hover: rgb(255 255 255 / .1);
-	--nav-list-item-bg-active: rgb(255 255 255 / .08);
-	--nav-list-item-bg-current: rgb(255 255 255 / .1);
-	--nav-list-item-fg: rgb(172 172 172);
-	--nav-list-item-fg-hover: var(--fg);
-	--nav-list-item-fg-active: var(--fg);
-	--nav-list-item-fg-current: var(--fg);
-	--nav-list-item-border: transparent;
-}
-
-:global(.rvx-light) {
-	--nav-list-item-bg: transparent;
-	--nav-list-item-bg-hover: rgb(0 0 0 / .075);
-	--nav-list-item-bg-active: rgb(0 0 0 / .125);
-	--nav-list-item-bg-current: rgb(0 0 0 / .125);
-	--nav-list-item-fg: rgb(72 72 72);
-	--nav-list-item-fg-hover: var(--fg);
-	--nav-list-item-fg-active: var(--fg);
-	--nav-list-item-fg-current: var(--fg);
-	--nav-list-item-border: transparent;
-}