@rvx/ui 0.4.4 → 0.4.6

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,24 @@
+import { ClassValue, Content, Expression, StyleValue } from "rvx";
+import { Action } from "../common/events.js";
+import { AriaCurrent } from "../common/types.js";
+export declare function NavBar(props: {
+    class?: ClassValue;
+    style?: StyleValue;
+    inlineSize?: Expression<string | undefined>;
+    start?: Content;
+    center?: Content;
+    end?: Content;
+}): unknown;
+export declare function NavBarButton(props: {
+    class?: ClassValue;
+    style?: StyleValue;
+    children?: unknown;
+    disabled?: Expression<boolean | undefined>;
+    action?: Action;
+    title?: Expression<string | undefined>;
+    current?: Expression<AriaCurrent | undefined>;
+    "aria-expanded"?: Expression<boolean | undefined>;
+    "aria-haspopup"?: Expression<string | undefined>;
+    "aria-controls"?: Expression<string | undefined>;
+}): 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;AAGjD,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,YAAY,CAAC,KAAK,EAAE;IACnC,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,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,WAoCA"}

package/dist/components/nav-bar.js

@@ -0,0 +1,37 @@
+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 } 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 NavBarButton(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: [
+            props.class,
+            styles.item,
+            map(props.current, current => current ? styles.current : 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"], "on:click": action, "on:keydown": event => {
+            if (isKey(event, "enter") || isKey(event, " ")) {
+                action(event);
+            }
+        }, children: _jsx(Row, { class: styles.item_content, 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":";AAAA,OAAO,MAAM,MAAM,6CAA6C,CAAC;AACjE,OAAO,EAAmC,GAAG,EAAE,GAAG,EAAc,MAAM,KAAK,CAAC;AAC5E,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,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,MAAM,UAAU,MAAM,CAAC,KAOtB;IACA,OAAO,cACN,KAAK,EAAE;YACN,MAAM,CAAC,GAAG;YACV,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE;YACN,KAAK,CAAC,KAAK;YACX;gBACC,uBAAuB,EAAE,KAAK,CAAC,UAAU;aACzC;SACD,YAED,eAAK,KAAK,EAAE,MAAM,CAAC,IAAI,aACtB,cAAK,KAAK,EAAE,MAAM,CAAC,KAAK,YACtB,KAAK,CAAC,KAAK,GACP,EACN,cAAK,KAAK,EAAE,MAAM,CAAC,MAAM,YACvB,KAAK,CAAC,MAAM,GACR,EACN,cAAK,KAAK,EAAE,MAAM,CAAC,GAAG,YACpB,KAAK,CAAC,GAAG,GACL,IACD,GACD,CAAC;AACR,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAY5B;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,KAAK,CAAC,KAAK;YACX,MAAM,CAAC,IAAI;YACX,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;SACnE,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,kBACJ,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,mBAC5B,cAAc,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,mBACtC,KAAK,CAAC,eAAe,CAAC,mBACtB,KAAK,CAAC,eAAe,CAAC,cAE3B,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,YAED,KAAC,GAAG,IAAC,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,KAAK,EAAC,QAAQ,YAC7C,KAAK,CAAC,QAAQ,GACV,GACE,CAAC;AACX,CAAC"}

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.4",
+	"version": "0.4.6",
 	"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,91 @@
+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 } from "rvx/convert";
+import { Action, handleActionEvent, isKey } from "../common/events.js";
+import { AriaCurrent } from "../common/types.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 NavBarButton(props: {
+	class?: ClassValue;
+	style?: StyleValue;
+	children?: unknown;
+	disabled?: Expression<boolean | undefined>;
+	action?: Action;
+	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);
+	}
+
+	return <button
+		type="button"
+		disabled={disabled}
+		class={[
+			props.class,
+			styles.item,
+			map(props.current, current => current ? styles.current : 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"]}
+
+		on:click={action}
+		on:keydown={event => {
+			if (isKey(event, "enter") || isKey(event, " ")) {
+				action(event);
+			}
+		}}
+	>
+		<Row class={styles.item_content} align="center">
+			{props.children}
+		</Row>
+	</button>;
+}

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/button.module.css

@@ -85,6 +85,7 @@
 }
 
 .item {
+	text-align: left;
 	--button-bg: var(--button-item-bg);
 	--button-fg: var(--button-item-fg);
 	--button-active: var(--button-item-active);

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

@@ -28,6 +28,9 @@
 		border-start-end-radius: 0;
 		border-end-end-radius: 0;
 	}
+	& > * {
+		margin-inline-start: calc((var(--space-scale) - 1) * var(--separator));
+	}
 }
 
 .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));
+	}
 }

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

@@ -0,0 +1,85 @@
+
+.nav {
+	background-color: var(--bg-alt);
+	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(--group-column-gap);
+}
+
+.start,
+.center,
+.end {
+	display: flex;
+	flex-direction: row;
+	gap: var(--group-column-gap);
+}
+
+.start {
+	justify-content: start;
+}
+
+.end {
+	justify-content: end;
+}
+
+.item {
+	display: flex;
+	flex-direction: row;
+	align-items: stretch;
+
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: 600;
+	line-height: 1;
+
+	cursor: pointer;
+	outline: none;
+
+	padding: 0;
+	border: none;
+
+	background-color: transparent;
+	color: var(--fg-secondary);
+
+	&[disabled] {
+		cursor: default;
+		filter: var(--control-disabled);
+	}
+}
+
+.item_content {
+	padding-block: var(--content-padding-block) calc(var(--content-padding-block) - var(--content-border));
+
+	border-block-end: var(--content-border) solid transparent;
+
+	transition: background-color var(--transition-color),
+		margin var(--transition-color),
+		padding var(--transition-color);
+
+	.item:hover:not(:active):not([disabled]) > &,
+	.item:focus-visible:not(:active):not([disabled]) > & {
+		background-color: var(--bg-active);
+	}
+
+	.item:hover:not([disabled]) > &,
+	.item:focus-visible:not([disabled]) > & {
+		margin-inline: calc(var(--group-column-gap) / -2);
+		padding-inline: calc(var(--group-column-gap) / 2);
+		z-index: 1;
+	}
+
+	.current > & {
+		color: var(--fg);
+		border-block-end-color: var(--accent);
+	}
+}

package/theme/components/tabs.module.css

@@ -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

@@ -67,10 +67,12 @@ body {
 	--bg: rgb(24 24 24);
 	--bg-alt: rgb(32 32 32);
 	--bg-selection: rgb(64 150 255 / .5);
+	--bg-active: rgb(48 48 48);
 
 	--fg: white;
 	--accent: rgb(64 160 255);
 	--fg-danger: rgb(255 64 64);
+	--fg-secondary: rgb(255 255 255 / .6);
 
 	--secondary-filter: opacity(.6);
 
@@ -95,10 +97,12 @@ body {
 	--bg: white;
 	--bg-alt: rgb(250 250 250);
 	--bg-selection: rgb(0 127 255 / .3);
+	--bg-active: rgb(232 232 232);
 
 	--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;
-}