@rvx/ui 0.1.12 → 0.1.13

package/dist/common/coupling.d.ts

@@ -0,0 +1,2 @@
+import { Expression } from "rvx";
+export declare function coupleMinMax<T extends number | bigint>(min: Expression<T>, max: Expression<T>): void;

package/dist/common/coupling.js

@@ -0,0 +1,18 @@
+import { Signal, watch } from "rvx";
+export function coupleMinMax(min, max) {
+    if (min instanceof Signal) {
+        watch(max, max => {
+            if (min.value > max) {
+                min.value = max;
+            }
+        });
+    }
+    if (max instanceof Signal) {
+        watch(min, min => {
+            if (max.value < min) {
+                max.value = min;
+            }
+        });
+    }
+}
+//# sourceMappingURL=coupling.js.map

package/dist/common/coupling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coupling.js","sourceRoot":"","sources":["../../src/common/coupling.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAEhD,MAAM,UAAU,YAAY,CAA4B,GAAkB,EAAE,GAAkB;IAC7F,IAAI,GAAG,YAAY,MAAM,EAAE,CAAC;QAC3B,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE;YAChB,IAAI,GAAG,CAAC,KAAK,GAAG,GAAG,EAAE,CAAC;gBACrB,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC;YACjB,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IACD,IAAI,GAAG,YAAY,MAAM,EAAE,CAAC;QAC3B,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE;YAChB,IAAI,GAAG,CAAC,KAAK,GAAG,GAAG,EAAE,CAAC;gBACrB,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC;YACjB,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;AACF,CAAC"}

package/dist/common/theme.d.ts

@@ -64,6 +64,9 @@ export interface Theme {
     heading?: string;
     label?: string;
     link?: string;
+    nav_list?: string;
+    nav_list_item?: string;
+    nav_list_item_current?: string;
     page?: string;
     page_scrollbar_comp?: string;
     page_content_col?: string;
@@ -86,6 +89,7 @@ export interface Theme {
     scroll_view_indicator_start?: string;
     scroll_view_indicator_end?: string;
     scroll_view_indicator_visible?: string;
+    slider_host?: string;
     text_input?: string;
     text?: string;
     validation_message?: string;

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

@@ -0,0 +1,26 @@
+import { ClassValue, Expression, StyleValue } from "rvx";
+import { Action } from "../common/events.js";
+export declare 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;
+export declare 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;

package/dist/components/nav-list.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "rvx/jsx-runtime";
+import { get, map, optionalString } from "rvx";
+import { isPending } from "rvx/async";
+import { handleActionEvent, keyFor } from "../common/events.js";
+import { THEME } from "../common/theme.js";
+export function NavList(props) {
+    const theme = THEME.current;
+    return _jsx("div", { class: [
+            theme?.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 theme = THEME.current;
+    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: [
+            theme?.nav_list_item,
+            map(props.current, current => current && theme?.nav_list_item_current),
+            props.class,
+        ], style: props.style, id: props.id, "on:click": action, "on:keydown": event => {
+            const key = keyFor(event);
+            if (key === "enter" || key === "space") {
+                action(event);
+            }
+        }, "aria-current": optionalString(props.current), children: props.children });
+}
+//# sourceMappingURL=nav-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-list.js","sourceRoot":"","sources":["../../src/components/nav-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,GAAG,EAAE,GAAG,EAAE,cAAc,EAAc,MAAM,KAAK,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAU,iBAAiB,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,MAAM,UAAU,OAAO,CAAC,KAYvB;IACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,OAAO,cACN,KAAK,EAAE;YACN,KAAK,EAAE,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,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,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,EAAE,aAAa;YACpB,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,IAAI,KAAK,EAAE,qBAAqB,CAAC;YACtE,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,EAAE,EAAE,KAAK,CAAC,EAAE,cACF,MAAM,gBACJ,KAAK,CAAC,EAAE;YACnB,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YAC1B,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,OAAO,EAAE,CAAC;gBACxC,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/dist/components/slider.d.ts

@@ -0,0 +1,11 @@
+import { Expression } from "rvx";
+export declare function Slider(props: {
+    id?: Expression<string | undefined>;
+    value?: Expression<number | undefined>;
+    min?: Expression<number | undefined>;
+    max?: Expression<number | undefined>;
+    step?: Expression<number | "any" | undefined>;
+    markers?: Expression<number[] | undefined>;
+    children?: unknown;
+}): unknown;
+export declare function sliderMarkers(min: number, max: number, step: number): number[];

package/dist/components/slider.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "rvx/jsx-runtime";
+import { map, Show, Signal } from "rvx";
+import { uniqueId } from "rvx/id";
+import { THEME } from "../common/theme.js";
+export function Slider(props) {
+    const theme = THEME.current;
+    const markerId = uniqueId();
+    const input = _jsx("input", { id: props.id, type: "range", min: map(props.min, min => min ?? 0), max: map(props.max, max => max ?? 100), step: map(props.step, step => step ?? 1), "prop:value": map(props.value, value => value ?? "0"), "on:input": () => {
+            if (props.value instanceof Signal) {
+                props.value.value = Number(input.value);
+            }
+        }, list: map(props.markers, markers => markers ? markerId : undefined) });
+    return _jsxs("div", { class: theme?.slider_host, children: [input, _jsx(Show, { when: props.markers, children: markers => _jsx("datalist", { id: markerId, children: markers.map(marker => _jsx("option", { value: marker })) }) }), props.children] });
+}
+export function sliderMarkers(min, max, step) {
+    if (min > max) {
+        [min, max] = [max, min];
+    }
+    const markers = [];
+    for (let i = min; i <= max; i += step) {
+        markers.push(i > max ? max : i);
+    }
+    return markers;
+}
+//# sourceMappingURL=slider.js.map

package/dist/components/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,MAAM,UAAU,MAAM,CAAC,KAQtB;IACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;IAE5B,MAAM,KAAK,GAAG,gBACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,EACpC,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,EACtC,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,gBAC5B,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,GAAG,CAAC,cACzC,GAAG,EAAE;YACd,IAAI,KAAK,CAAC,KAAK,YAAY,MAAM,EAAE,CAAC;gBACnC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACzC,CAAC;QACF,CAAC,EACD,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,GAC9C,CAAC;IAEvB,OAAO,eACN,KAAK,EAAE,KAAK,EAAE,WAAW,aAExB,KAAK,EAEN,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,OAAO,YACvB,OAAO,CAAC,EAAE,CAAC,mBAAU,EAAE,EAAE,QAAQ,YAChC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,iBAAQ,KAAK,EAAE,MAAM,GAAI,CAAC,GACvC,GACL,EAEN,KAAK,CAAC,QAAQ,IACV,CAAC;AACR,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,GAAW,EAAE,GAAW,EAAE,IAAY;IACnE,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC;QACf,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACzB,CAAC;IACD,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,KAAK,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC;QACvC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./common/coupling.js";
 export * from "./common/debounce.js";
 export * from "./common/events.js";
 export * from "./common/parsers.js";
@@ -19,12 +20,14 @@ 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/page.js";
 export * from "./components/popout.js";
 export * from "./components/popover.js";
 export * from "./components/radio-buttons.js";
 export * from "./components/row.js";
 export * from "./components/scroll-view.js";
+export * from "./components/slider.js";
 export * from "./components/text-input.js";
 export * from "./components/text.js";
 export * from "./components/validation.js";

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from "./common/coupling.js";
 export * from "./common/debounce.js";
 export * from "./common/events.js";
 export * from "./common/parsers.js";
@@ -19,12 +20,14 @@ 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/page.js";
 export * from "./components/popout.js";
 export * from "./components/popover.js";
 export * from "./components/radio-buttons.js";
 export * from "./components/row.js";
 export * from "./components/scroll-view.js";
+export * from "./components/slider.js";
 export * from "./components/text-input.js";
 export * from "./components/text.js";
 export * from "./components/validation.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,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,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,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,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}

package/dist/theme.module.css

@@ -575,6 +575,63 @@ h6.heading {
   text-decoration: underline;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --nav-list-item-bg: transparent;
+    --nav-list-item-bg-hover: rgba(255, 255, 255, 0.1);
+    --nav-list-item-bg-active: rgba(255, 255, 255, 0.08);
+    --nav-list-item-bg-current: rgba(255, 255, 255, 0.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;
+    color-scheme: dark;
+  }
+}
+.nav_list {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 0;
+}
+
+.nav_list_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);
+  cursor: pointer;
+  outline: none;
+  padding-block: calc(var(--control-pad-block-start) - var(--control-border)) calc(var(--control-pad-block-end) - var(--control-border));
+  padding-inline: calc(var(--control-pad-inline-start) - var(--control-border)) calc(var(--control-pad-inline-end) - var(--control-border));
+  border-radius: var(--control-radius);
+  transition: var(--color-transition) background-color, var(--color-transition) border-color;
+}
+.nav_list_item[disabled] {
+  cursor: default;
+  filter: var(--control-disabled);
+}
+.nav_list_item:hover:not(:active):not([disabled]), .nav_list_item:focus-visible {
+  color: var(--nav-list-item-fg-hover);
+  background-color: var(--nav-list-item-bg-hover);
+}
+.nav_list_item:active {
+  color: var(--nav-list-item-fg-active);
+  background-color: var(--nav-list-item-bg-active);
+}
+
+.nav_list_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;
+}
+
 .page {
   margin: 2rem;
   display: flex;
@@ -749,6 +806,18 @@ h6.heading {
   opacity: 1;
 }
 
+.slider_host {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--control-row-gap);
+}
+.slider_host > input {
+  outline: none;
+}
+.slider_host > input:focus-visible {
+  outline: var(--focus-outline);
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --text-input-bg: rgb(16, 16, 16);

package/dist/theme.module.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/button.scss","../src/theme/components/card.scss","../src/theme/components/checkbox.scss","../src/theme/components/collapse.scss","../src/theme/components/column.scss","../src/theme/components/control-group.scss","../src/theme/components/dialog.scss","../src/theme/components/dropdown.scss","../src/theme/components/flex-space.scss","../src/theme/components/heading.scss","../src/theme/components/label.scss","../src/theme/components/link.scss","../src/theme/components/page.scss","../src/theme/components/popover.scss","../src/theme/components/radio-buttons.scss","../src/theme/components/row.scss","../src/theme/components/scroll-view.scss","../src/theme/components/text-input.scss","../src/theme/components/text.scss","../src/theme/components/validation.scss","../src/theme/components/value.scss"],"names":[],"mappings":"AASA;EACC;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;EACA;EACA;EACA;EACA;ECDA;EACA;EACA;EACA;EDCA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;AC7BC;EAFD;IANE;IAAA;IAAA;IAUA;;;AD0CH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AC9DC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;ACgFH;EACC;EACA;EACA;EACA;EAEA;EAEA;EDnEC,eACC;EAED,gBACC;ECkEF;EACA;;AAGA;EACC;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKH;EACC;;;ADhIC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AEKH;EACC;EACA;EFcC,eACC;EAED,gBACC;;;AEbF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AC3BF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;;;ACtBD;EACC;EACA;EACA;;;AAGD;EACC,YACC;;;AAIF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC5DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;;AAHF;EACC;;AACA;EACC;;;AC/BH;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;ANHA;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AOEH;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;IACC;;;AAIF;EACC;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EP5BC,eACC;EAED,gBACC;;;AO4BH;EACC;;;APxDC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AQEH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ERPC,eACC;EAED,gBACC;;AQMF;EACC;;;AC9CF;EACC;EACA;EACA;;;ACHD;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;;AVxBC;EAFD;IANE;IAUA;;;AWPH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AXRA;EAFD;IANE;IAUA;;;AYPH;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;ACrBF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AbPC;EAFD;IANE;IAAA;IAAA;IAUA;;;AcDH;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EdnBC,eACC;EAED,gBACC;;;AevCH;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AC5BD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AhBAD;EAFD;IANE;IAAA;IAUA;;;AiBJH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AjBpCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AkBEH;EACC;EACA;EACA;EAEA;EAEA;ElBmBC,eACC;EAED,gBACC;EkBrBF;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC1CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AnBIA;EAFD;IANE;IAUA;;;AoBPH;EACC;;;AAGD;EACC;;;ACZD;EACC","file":"theme.module.css"}
+{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/button.scss","../src/theme/components/card.scss","../src/theme/components/checkbox.scss","../src/theme/components/collapse.scss","../src/theme/components/column.scss","../src/theme/components/control-group.scss","../src/theme/components/dialog.scss","../src/theme/components/dropdown.scss","../src/theme/components/flex-space.scss","../src/theme/components/heading.scss","../src/theme/components/label.scss","../src/theme/components/link.scss","../src/theme/components/nav-list.scss","../src/theme/components/page.scss","../src/theme/components/popover.scss","../src/theme/components/radio-buttons.scss","../src/theme/components/row.scss","../src/theme/components/scroll-view.scss","../src/theme/components/slider.scss","../src/theme/components/text-input.scss","../src/theme/components/text.scss","../src/theme/components/validation.scss","../src/theme/components/value.scss"],"names":[],"mappings":"AASA;EACC;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;EACA;EACA;EACA;EACA;ECDA;EACA;EACA;EACA;EDCA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;AC7BC;EAFD;IANE;IAAA;IAAA;IAUA;;;AD0CH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AC9DC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;ACgFH;EACC;EACA;EACA;EACA;EAEA;EAEA;EDnEC,eACC;EAED,gBACC;ECkEF;EACA;;AAGA;EACC;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKH;EACC;;;ADhIC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AEKH;EACC;EACA;EFcC,eACC;EAED,gBACC;;;AEbF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AC3BF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;;;ACtBD;EACC;EACA;EACA;;;AAGD;EACC,YACC;;;AAIF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC5DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;;AAHF;EACC;;AACA;EACC;;;AC/BH;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;ANHA;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AOEH;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;IACC;;;AAIF;EACC;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EP5BC,eACC;EAED,gBACC;;;AO4BH;EACC;;;APxDC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AQEH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ERPC,eACC;EAED,gBACC;;AQMF;EACC;;;AC9CF;EACC;EACA;EACA;;;ACHD;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;;AVxBC;EAFD;IANE;IAUA;;;AWPH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AXRA;EAFD;IANE;IAUA;;;AYPH;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AZTA;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AaiBH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EbhBC,eACC;EAED,gBACC;EaeF;EACA;;AAGA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;;AC/ED;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AdPC;EAFD;IANE;IAAA;IAAA;IAUA;;;AeDH;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EfnBC,eACC;EAED,gBACC;;;AgBvCH;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AC5BD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AjBAD;EAFD;IANE;IAAA;IAUA;;;AkBJH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AChDD;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;;AnBGD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AoBEH;EACC;EACA;EACA;EAEA;EAEA;EpBmBC,eACC;EAED,gBACC;EoBrBF;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC1CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;ArBIA;EAFD;IANE;IAUA;;;AsBPH;EACC;;;AAGD;EACC;;;ACZD;EACC","file":"theme.module.css"}

package/package.json

@@ -12,7 +12,7 @@
 		"rvx"
 	],
 	"license": "MIT",
-	"version": "0.1.12",
+	"version": "0.1.13",
 	"type": "module",
 	"main": "./dist/index.js",
 	"sideEffects": false,
@@ -28,6 +28,6 @@
 		"./dist/": "./dist/"
 	},
 	"dependencies": {
-		"rvx": "^19.0.2"
+		"rvx": "^19.5.1"
 	}
 }

package/src/common/coupling.tsx

@@ -0,0 +1,18 @@
+import { Expression, Signal, watch } from "rvx";
+
+export function coupleMinMax<T extends number | bigint>(min: Expression<T>, max: Expression<T>) {
+	if (min instanceof Signal) {
+		watch(max, max => {
+			if (min.value > max) {
+				min.value = max;
+			}
+		});
+	}
+	if (max instanceof Signal) {
+		watch(min, min => {
+			if (max.value < min) {
+				max.value = min;
+			}
+		});
+	}
+}

package/src/common/theme.tsx

@@ -78,6 +78,10 @@ export interface Theme {
 
 	link?: string;
 
+	nav_list?: string;
+	nav_list_item?: string;
+	nav_list_item_current?: string;
+
 	page?: string;
 	page_scrollbar_comp?: string;
 	page_content_col?: string;
@@ -105,6 +109,8 @@ export interface Theme {
 	scroll_view_indicator_end?: string;
 	scroll_view_indicator_visible?: string;
 
+	slider_host?: string;
+
 	text_input?: string;
 
 	text?: string;

package/src/components/nav-list.tsx

@@ -0,0 +1,80 @@
+import { ClassValue, Expression, get, map, optionalString, StyleValue } from "rvx";
+import { isPending } from "rvx/async";
+import { Action, handleActionEvent, keyFor } from "../common/events.js";
+import { THEME } from "../common/theme.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 {
+	const theme = THEME.current;
+	return <div
+		class={[
+			theme?.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 theme = THEME.current;
+	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={[
+			theme?.nav_list_item,
+			map(props.current, current => current && theme?.nav_list_item_current),
+			props.class,
+		]}
+		style={props.style}
+		id={props.id}
+		on:click={action}
+		on:keydown={event => {
+			const key = keyFor(event);
+			if (key === "enter" || key === "space") {
+				action(event);
+			}
+		}}
+		aria-current={optionalString(props.current)}
+	>
+		{props.children}
+	</button>;
+}

package/src/components/slider.tsx

@@ -0,0 +1,56 @@
+import { Expression, map, Show, Signal } from "rvx";
+import { uniqueId } from "rvx/id";
+import { THEME } from "../common/theme.js";
+
+export function Slider(props: {
+	id?: Expression<string | undefined>;
+	value?: Expression<number | undefined>;
+	min?: Expression<number | undefined>;
+	max?: Expression<number | undefined>;
+	step?: Expression<number | "any" | undefined>;
+	markers?: Expression<number[] | undefined>;
+	children?: unknown;
+}) {
+	const theme = THEME.current;
+	const markerId = uniqueId();
+
+	const input = <input
+		id={props.id}
+		type="range"
+		min={map(props.min, min => min ?? 0)}
+		max={map(props.max, max => max ?? 100)}
+		step={map(props.step, step => step ?? 1)}
+		prop:value={map(props.value, value => value ?? "0")}
+		on:input={() => {
+			if (props.value instanceof Signal) {
+				props.value.value = Number(input.value);
+			}
+		}}
+		list={map(props.markers, markers => markers ? markerId : undefined)}
+	/> as HTMLInputElement;
+
+	return <div
+		class={theme?.slider_host}
+	>
+		{input}
+
+		<Show when={props.markers}>
+			{markers => <datalist id={markerId}>
+				{markers.map(marker => <option value={marker} />)}
+			</datalist>}
+		</Show>
+
+		{props.children}
+	</div>;
+}
+
+export function sliderMarkers(min: number, max: number, step: number): number[] {
+	if (min > max) {
+		[min, max] = [max, min];
+	}
+	const markers: number[] = [];
+	for (let i = min; i <= max; i += step) {
+		markers.push(i > max ? max : i);
+	}
+	return markers;
+}

package/src/index.tsx

@@ -1,3 +1,4 @@
+export * from "./common/coupling.js";
 export * from "./common/debounce.js";
 export * from "./common/events.js";
 export * from "./common/parsers.js";
@@ -19,12 +20,14 @@ 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/page.js";
 export * from "./components/popout.js";
 export * from "./components/popover.js";
 export * from "./components/radio-buttons.js";
 export * from "./components/row.js";
 export * from "./components/scroll-view.js";
+export * from "./components/slider.js";
 export * from "./components/text-input.js";
 export * from "./components/text.js";
 export * from "./components/validation.js";

package/src/theme/components/nav-list.scss

@@ -0,0 +1,82 @@
+@use "../common";
+
+@include common.theme((
+	nav-list-item-bg: (
+		dark: transparent,
+	),
+	nav-list-item-bg-hover: (
+		dark: rgba(255, 255, 255, 0.1),
+	),
+	nav-list-item-bg-active: (
+		dark: rgba(255, 255, 255, 0.08),
+	),
+	nav-list-item-bg-current: (
+		dark: rgba(255, 255, 255, 0.1),
+	),
+	nav-list-item-fg: (
+		dark: rgb(172, 172, 172),
+	),
+	nav-list-item-fg-hover: (
+		dark: var(--fg),
+	),
+	nav-list-item-fg-active: (
+		dark: var(--fg),
+	),
+	nav-list-item-fg-current: (
+		dark: var(--fg),
+	),
+	nav-list-item-border: (
+		dark: transparent,
+	),
+));
+
+.nav_list {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	z-index: 0;
+}
+
+.nav_list_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);
+
+	cursor: pointer;
+
+	outline: none;
+	@include common.padding(control-pad, var(--control-border));
+
+	border-radius: var(--control-radius);
+	transition: var(--color-transition) background-color,
+		var(--color-transition) 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);
+	}
+}
+
+.nav_list_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;
+}

package/src/theme/components/slider.scss

@@ -0,0 +1,14 @@
+
+.slider_host {
+	display: flex;
+	flex-direction: column;
+	row-gap: var(--control-row-gap);
+
+	& > input {
+		outline: none;
+
+		&:focus-visible {
+			outline: var(--focus-outline);
+		}
+	}
+}

package/src/theme/theme.scss

@@ -12,11 +12,13 @@
 @forward "components/heading";
 @forward "components/label";
 @forward "components/link";
+@forward "components/nav-list";
 @forward "components/page";
 @forward "components/popover";
 @forward "components/radio-buttons";
 @forward "components/row";
 @forward "components/scroll-view";
+@forward "components/slider";
 @forward "components/text-input";
 @forward "components/text";
 @forward "components/validation";