shelving 1.209.0 → 1.210.0

package/markup/rule/link.js

@@ -8,9 +8,9 @@ import { createMarkupRule } from "../util/rule.js";
 /** Render `<a href="">` if the link is a valid one, or `<a>` (with no `href`) if it isn't. */
 function renderLinkMarkupRule({ groups: { title, href: unsafeHref } }, options, key) {
     const { url, root, schemes = HTTP_SCHEMES, rel } = options;
-    const resolved = getLink(unsafeHref, url, root);
-    const href = resolved && schemes.some(s => resolved.startsWith(s)) ? resolved : undefined;
-    const children = title ? renderMarkup(title, options, "link") : resolved ? formatURI(resolved) : "";
+    const link = getLink(unsafeHref, url, root);
+    const href = link && schemes.includes(link.protocol) ? link?.href : undefined;
+    const children = title ? renderMarkup(title, options, "link") : link ? formatURI(link) : "";
     return {
         key,
         $$typeof: REACT_ELEMENT_TYPE,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.209.0",
+	"version": "1.210.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",
@@ -76,7 +76,7 @@
 		"build": "bun run --sequential build:*",
 		"build:0:setup": "rm -rf ./dist && mkdir -p ./dist",
 		"build:1:copy": "cp package.json dist/package.json && cp LICENSE.md dist/LICENSE.md && cp README.md dist/README.md && cp .npmignore dist/.npmignore && cp -r modules/ui dist/ui",
-		"build:2:emit": "tsgo",
+		"build:2:emit": "tsgo -p tsconfig.build.json",
 		"build:3:syntax": "bun run ./dist/index.js",
 		"build:4:unit": "bun test ./dist/**/*.test.js --concurrent --only-failures --bail"
 	},

package/ui/block/Card.d.ts

@@ -15,4 +15,4 @@ export interface CardProps extends ClickableProps {
  * @example <Card><Heading>Static</Heading></Card>
  * @example <Card href="/foo" title="Open foo"><Heading>Clickable</Heading></Card>
  */
-export declare function Card({ children, disabled, href, onClick, title, target, download, ...variants }: CardProps): ReactElement;
+export declare function Card({ children, href, onClick, title, ...props }: CardProps): ReactElement;

package/ui/block/Card.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClickable } from "../form/Clickable.js";
+import { Clickable } from "../form/Clickable.js";
 import { getModuleClass } from "../util/css.js";
-import styles from "./Card.module.css";
+import CARD_CSS from "./Card.module.css";
 /**
  * Cards are boxed areas for content to sit within — rendered as `<article>` since each card represents a self-contained piece of content.
  * - When `href` or `onClick` is set the card becomes navigable: a stretched overlay `<a>` / `<button>` covers the entire card while the children render normally inside.
@@ -10,7 +10,7 @@ import styles from "./Card.module.css";
  * @example <Card><Heading>Static</Heading></Card>
  * @example <Card href="/foo" title="Open foo"><Heading>Clickable</Heading></Card>
  */
-export function Card({ children, disabled, href, onClick, title, target, download, ...variants }) {
-    const overlay = href || onClick ? getClickable({ disabled, href, onClick, title, target, download, children: title ?? "Open" }, styles.overlay) : null;
-    return (_jsxs("article", { className: getModuleClass(styles, "card", variants), children: [overlay, overlay ? _jsx("div", { children: children }) : children] }));
+export function Card({ children, href, onClick, title = "Open", ...props }) {
+    const overlay = (href || onClick) && _jsx(Clickable, { title: title, href: href, onClick: onClick, ...props, className: CARD_CSS.overlay });
+    return (_jsxs("article", { className: getModuleClass(CARD_CSS, "card", props), children: [overlay, overlay ? _jsx("div", { children: children }) : children] }));
 }

package/ui/block/Card.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement, ReactNode } from "react";
-import { type ClickableProps, getClickable } from "../form/Clickable.js";
+import { Clickable, type ClickableProps } from "../form/Clickable.js";
 import { getModuleClass } from "../util/css.js";
-import styles from "./Card.module.css";
+import CARD_CSS from "./Card.module.css";
 
 export interface CardProps extends ClickableProps {
 	children?: ReactNode;
@@ -21,11 +21,10 @@ export interface CardProps extends ClickableProps {
  * @example <Card><Heading>Static</Heading></Card>
  * @example <Card href="/foo" title="Open foo"><Heading>Clickable</Heading></Card>
  */
-export function Card({ children, disabled, href, onClick, title, target, download, ...variants }: CardProps): ReactElement {
-	const overlay =
-		href || onClick ? getClickable({ disabled, href, onClick, title, target, download, children: title ?? "Open" }, styles.overlay) : null;
+export function Card({ children, href, onClick, title = "Open", ...props }: CardProps): ReactElement {
+	const overlay = (href || onClick) && <Clickable title={title} href={href} onClick={onClick} {...props} className={CARD_CSS.overlay} />;
 	return (
-		<article className={getModuleClass(styles, "card", variants)}>
+		<article className={getModuleClass(CARD_CSS, "card", props)}>
 			{overlay}
 			{overlay ? <div>{children}</div> : children}
 		</article>

package/ui/docs/DirectoryPage.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Prose } from "../block/Prose.js";
 import { Markup } from "../misc/Markup.js";
-import { requireMeta } from "../misc/MetaContext.js";
 import { Page } from "../page/Page.js";
 import { TreeCards } from "../tree/TreeCards.js";
 /** Page renderer for a `tree-directory` element — shows title, content, and child cards. */
 export function DirectoryPage({ title, name, description, content, children }) {
-    const { url } = requireMeta();
-    const path = (url?.pathname ?? "/");
-    return (_jsxs(Page, { title: title ?? name, description: description, children: [content && (_jsx(Prose, { children: _jsx(Markup, { children: content }) })), _jsx(TreeCards, { path: path, children: children })] }));
+    return (_jsxs(Page, { title: title ?? name, description: description, children: [content && (_jsx(Prose, { children: _jsx(Markup, { children: content }) })), _jsx(TreeCards, { children: children })] }));
 }

package/ui/docs/DirectoryPage.tsx

@@ -1,16 +1,12 @@
 import type { ReactNode } from "react";
 import type { DirectoryElementProps } from "../../util/element.js";
-import type { AbsolutePath } from "../../util/path.js";
 import { Prose } from "../block/Prose.js";
 import { Markup } from "../misc/Markup.js";
-import { requireMeta } from "../misc/MetaContext.js";
 import { Page } from "../page/Page.js";
 import { TreeCards } from "../tree/TreeCards.js";
 
 /** Page renderer for a `tree-directory` element — shows title, content, and child cards. */
 export function DirectoryPage({ title, name, description, content, children }: DirectoryElementProps): ReactNode {
-	const { url } = requireMeta();
-	const path = (url?.pathname ?? "/") as AbsolutePath;
 	return (
 		<Page title={title ?? name} description={description}>
 			{content && (
@@ -18,7 +14,7 @@ export function DirectoryPage({ title, name, description, content, children }: D
 					<Markup>{content}</Markup>
 				</Prose>
 			)}
-			<TreeCards path={path}>{children}</TreeCards>
+			<TreeCards>{children}</TreeCards>
 		</Page>
 	);
 }

package/ui/form/ArrayInput.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import type { Schema } from "../../schema/Schema.js";
 import { type ImmutableArray } from "../../util/array.js";
-import { type ValueInputProps } from "./Input.js";
+import type { ValueInputProps } from "./Input.js";
 export interface ArrayInputProps<T> extends ValueInputProps<ImmutableArray<T>> {
     one?: string;
     many?: string;

package/ui/form/ArrayInput.js

@@ -5,7 +5,7 @@ import { splitMessage } from "../../util/error.js";
 import { formatUnit } from "../../util/format.js";
 import { Flex } from "../block/Flex.js";
 import { Button } from "./Button.js";
-import { Input } from "./Input.js";
+import { ButtonInput } from "./ButtonInput.js";
 import { SchemaInput } from "./SchemaInput.js";
 export function ArrayInput({ name, 
 // title,
@@ -17,7 +17,7 @@ placeholder, required = false, disabled = false, message = "", value = [], onVal
     return (_jsxs(Flex, { column: true, children: [length ? (value.map((v, i) => {
                 const k = i.toString();
                 return (_jsxs(Flex, { children: [_jsx(SchemaInput, { name: k, schema: items, value: v, onValue: x => onValue(withArrayIndex(value, i, x)), message: messages[k], disabled: disabled }), _jsx(Button, { onClick: () => onValue(omitArrayIndex(value, i)), disabled: disableRemove, title: disableRemove ? `Minimum ${formatUnit(min, one, { unitDisplay: "long", one, many })}` : `Remove ${one}`, children: _jsx(XMarkIcon, {}) })] }, k));
-            })) : (_jsx(Input, { onClick: addNewItem, name: name, required: required && min > 1, disabled: disabled, children: placeholder })), _jsxs(Flex, { children: [_jsxs(Button //
+            })) : (_jsx(ButtonInput, { onClick: addNewItem, name: name, required: required && min > 1, disabled: disabled, children: placeholder })), _jsxs(Flex, { children: [_jsxs(Button //
                     , { onClick: addNewItem, disabled: disabled || (typeof max === "number" && length >= max), small: true, children: [_jsx(PlusIcon, {}), " Add ", one] }), length && min < 1 ? (_jsxs(Button //
                     , { onClick: () => onValue([]), small: true, children: [_jsx(XMarkIcon, {}), " Clear ", many] })) : null] })] }));
 }

package/ui/form/ArrayInput.tsx

@@ -6,7 +6,8 @@ import { splitMessage } from "../../util/error.js";
 import { formatUnit } from "../../util/format.js";
 import { Flex } from "../block/Flex.js";
 import { Button } from "./Button.js";
-import { Input, type ValueInputProps } from "./Input.js";
+import { ButtonInput } from "./ButtonInput.js";
+import type { ValueInputProps } from "./Input.js";
 import { SchemaInput } from "./SchemaInput.js";
 
 export interface ArrayInputProps<T> extends ValueInputProps<ImmutableArray<T>> {
@@ -64,9 +65,9 @@ export function ArrayInput({
 					);
 				})
 			) : (
-				<Input onClick={addNewItem} name={name} required={required && min > 1} disabled={disabled}>
+				<ButtonInput onClick={addNewItem} name={name} required={required && min > 1} disabled={disabled}>
 					{placeholder}
-				</Input>
+				</ButtonInput>
 			)}
 			<Flex>
 				<Button //

package/ui/form/Button.d.ts

@@ -19,7 +19,7 @@ export interface ButtonVariants extends FlexVariants, StatusVariants, ColorVaria
 interface ButtonProps extends ButtonVariants, ClickableProps {
 }
 /** Return either a `<button>` or an `<a href="">` styled as an button, based on whether an `onClick` or `href` prop is provided. */
-export declare function Button({ disabled, href, onClick, title, target, download, children, ...variants }: ButtonProps): ReactElement;
+export declare function Button(props: ButtonProps): ReactElement;
 /** Get the full className for a button. */
 export declare function getButtonClass(variants: ButtonVariants): string;
 export {};

package/ui/form/Button.js

@@ -1,20 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { FLEX_CSS } from "../block/Flex.js";
 import { getColorClass } from "../misc/Color.js";
 import { getStatusClass } from "../misc/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import BUTTON_CSS from "./Button.module.css";
-import { getClickable } from "./Clickable.js";
+import { Clickable } from "./Clickable.js";
 /** Return either a `<button>` or an `<a href="">` styled as an button, based on whether an `onClick` or `href` prop is provided. */
-export function Button({ disabled, href, onClick, title, target, download, children, ...variants }) {
-    return getClickable({
-        disabled,
-        href,
-        onClick,
-        title,
-        target,
-        download,
-        children,
-    }, getButtonClass(variants));
+export function Button(props) {
+    return _jsx(Clickable, { ...props, className: getButtonClass(props) });
 }
 /** Get the full className for a button. */
 export function getButtonClass(variants) {

package/ui/form/Button.tsx

@@ -4,7 +4,7 @@ import { type ColorVariants, getColorClass } from "../misc/Color.js";
 import { getStatusClass, type StatusVariants } from "../misc/Status.js";
 import { type Classes, getClass, getModuleClass } from "../util/css.js";
 import BUTTON_CSS from "./Button.module.css";
-import { type ClickableProps, getClickable } from "./Clickable.js";
+import { Clickable, type ClickableProps } from "./Clickable.js";
 
 /** Variants for buttons. */
 export interface ButtonVariants extends FlexVariants, StatusVariants, ColorVariants {
@@ -23,19 +23,8 @@ export interface ButtonVariants extends FlexVariants, StatusVariants, ColorVaria
 interface ButtonProps extends ButtonVariants, ClickableProps {}
 
 /** Return either a `<button>` or an `<a href="">` styled as an button, based on whether an `onClick` or `href` prop is provided. */
-export function Button({ disabled, href, onClick, title, target, download, children, ...variants }: ButtonProps): ReactElement {
-	return getClickable(
-		{
-			disabled,
-			href,
-			onClick,
-			title,
-			target,
-			download,
-			children,
-		},
-		getButtonClass(variants),
-	);
+export function Button(props: ButtonProps): ReactElement {
+	return <Clickable {...props} className={getButtonClass(props)} />;
 }
 
 /** Get the full className for a button. */

package/ui/form/ButtonInput.d.ts

@@ -4,4 +4,4 @@ import { type InputProps } from "./Input.js";
 export interface ButtonInputProps extends InputProps, ClickableProps {
 }
 /** Return either a `<button>` or an `<a href="">` styled as an input, based on whether an `onClick` or `href` prop is provided. */
-export declare function ButtonInput({ title, placeholder, disabled, href, onClick, target, download, children, }: ButtonInputProps): ReactElement;
+export declare function ButtonInput({ title, placeholder, children, ...props }: ButtonInputProps): ReactElement;

package/ui/form/ButtonInput.js

@@ -1,19 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { notNullish } from "../../util/null.js";
-import { getClickable } from "./Clickable.js";
-import { ELEMENTS_BUTTON_INPUT_CLASS, PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS } from "./Input.js";
+import { Clickable } from "./Clickable.js";
+import { FLEX_BUTTON_INPUT_CLASS, PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS } from "./Input.js";
 /** Return either a `<button>` or an `<a href="">` styled as an input, based on whether an `onClick` or `href` prop is provided. */
-export function ButtonInput({ 
-// name,
-title, placeholder, disabled, href, onClick, target, 
-// message = "",
-download, children = title, }) {
+export function ButtonInput({ title, placeholder, children = title, ...props }) {
     const hasChildren = notNullish(children);
-    return getClickable({
-        disabled,
-        href,
-        onClick,
-        target,
-        download,
-        children: hasChildren ? children : placeholder,
-    }, hasChildren ? ELEMENTS_BUTTON_INPUT_CLASS : PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS);
+    return (_jsx(Clickable, { ...props, className: hasChildren ? FLEX_BUTTON_INPUT_CLASS : PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS, children: hasChildren ? children : placeholder }));
 }

package/ui/form/ButtonInput.tsx

@@ -1,33 +1,16 @@
 import type { ReactElement } from "react";
 import { notNullish } from "../../util/null.js";
-import { type ClickableProps, getClickable } from "./Clickable.js";
-import { ELEMENTS_BUTTON_INPUT_CLASS, type InputProps, PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS } from "./Input.js";
+import { Clickable, type ClickableProps } from "./Clickable.js";
+import { FLEX_BUTTON_INPUT_CLASS, type InputProps, PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS } from "./Input.js";
 
 export interface ButtonInputProps extends InputProps, ClickableProps {}
 
 /** Return either a `<button>` or an `<a href="">` styled as an input, based on whether an `onClick` or `href` prop is provided. */
-export function ButtonInput({
-	// name,
-	title,
-	placeholder,
-	disabled,
-	href,
-	onClick,
-	target,
-	// message = "",
-	download,
-	children = title,
-}: ButtonInputProps): ReactElement {
+export function ButtonInput({ title, placeholder, children = title, ...props }: ButtonInputProps): ReactElement {
 	const hasChildren = notNullish(children);
-	return getClickable(
-		{
-			disabled,
-			href,
-			onClick,
-			target,
-			download,
-			children: hasChildren ? children : placeholder,
-		},
-		hasChildren ? ELEMENTS_BUTTON_INPUT_CLASS : PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS,
+	return (
+		<Clickable {...props} className={hasChildren ? FLEX_BUTTON_INPUT_CLASS : PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS}>
+			{hasChildren ? children : placeholder}
+		</Clickable>
 	);
 }

package/ui/form/CheckboxInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { notNullish } from "../../util/null.js";
-import { CHECKBOX_CLASS, ELEMENTS_LABEL_INPUT_CLASS } from "./Input.js";
+import { CHECKBOX_CLASS, FLEX_LABEL_INPUT_CLASS } from "./Input.js";
 /** Checkbox element. */
 export function CheckboxInput({ name, title, placeholder = title || "Yes", required = false, disabled = false, message = "", value = false, onValue, children, }) {
     const hasChildren = notNullish(children);
-    return (_jsxs("label", { className: ELEMENTS_LABEL_INPUT_CLASS, "aria-invalid": !!message, children: [_jsx("input", { name: name, type: "checkbox", defaultChecked: !!value, onChange: e => onValue?.(!!e.currentTarget.checked), required: required, disabled: disabled, title: message, className: CHECKBOX_CLASS }), _jsx("span", { children: hasChildren ? children : placeholder })] }));
+    return (_jsxs("label", { className: FLEX_LABEL_INPUT_CLASS, "aria-invalid": !!message, children: [_jsx("input", { name: name, type: "checkbox", defaultChecked: !!value, onChange: e => onValue?.(!!e.currentTarget.checked), required: required, disabled: disabled, title: message, className: CHECKBOX_CLASS }), _jsx("span", { children: hasChildren ? children : placeholder })] }));
 }

package/ui/form/CheckboxInput.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from "react";
 import { notNullish } from "../../util/null.js";
-import { CHECKBOX_CLASS, ELEMENTS_LABEL_INPUT_CLASS, type ValueInputProps } from "./Input.js";
+import { CHECKBOX_CLASS, FLEX_LABEL_INPUT_CLASS, type ValueInputProps } from "./Input.js";
 
 export interface CheckboxProps extends ValueInputProps<boolean> {
 	children?: ReactNode | undefined;
@@ -20,7 +20,7 @@ export function CheckboxInput({
 }: CheckboxProps): ReactElement {
 	const hasChildren = notNullish(children);
 	return (
-		<label className={ELEMENTS_LABEL_INPUT_CLASS} aria-invalid={!!message}>
+		<label className={FLEX_LABEL_INPUT_CLASS} aria-invalid={!!message}>
 			<input
 				name={name}
 				type="checkbox"

package/ui/form/Clickable.d.ts

@@ -1,6 +1,6 @@
 import type { MouseEvent, ReactElement, ReactNode } from "react";
 import type { Path } from "../../util/path.js";
-import { type ImmutableURI, type URIString } from "../../util/uri.js";
+import type { ImmutableURI, URIString } from "../../util/uri.js";
 /***
  * Handler for a clickable `onClick` event.
  * - Returned value (if defined) is notified to the user using `notifySuccess()`
@@ -24,5 +24,12 @@ export interface ClickableProps {
     /** The contents of the clickable. */
     children?: ReactNode | undefined;
 }
+export interface StylableClickableProps extends ClickableProps {
+    className?: string | undefined;
+}
 /** Return either a `<button>` or an `<a href="">` based on whether an `onClick` or `href` prop is provided. */
-export declare function getClickable(props: ClickableProps, className?: string): ReactElement;
+export declare function Clickable(props: StylableClickableProps): ReactElement;
+/** Return an `<a href="">` element. */
+export declare function LinkClickable({ disabled, href, title, target, download, children, className, }: StylableClickableProps): ReactElement;
+/** Return a `<button>` element. */
+export declare function ButtonClickable({ disabled, onClick, title, children, className }: StylableClickableProps): ReactElement;

package/ui/form/Clickable.js

@@ -2,20 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useInstance } from "../../react/useInstance.js";
 import { useStore } from "../../react/useStore.js";
 import { BusyStore } from "../../store/BusyStore.js";
-import { isURI } from "../../util/uri.js";
+import { isURLActive } from "../../util/index.js";
+import { getLink } from "../../util/link.js";
 import { LOADING } from "../misc/Loading.js";
+import { requireMeta } from "../misc/MetaContext.js";
 import { callNotifiedElement } from "../util/notice.js";
 /** Return either a `<button>` or an `<a href="">` based on whether an `onClick` or `href` prop is provided. */
-export function getClickable(props, className) {
-    return props.href ? _jsx(LinkClickable, { ...props, className: className }) : _jsx(ButtonClickable, { ...props, className: className });
+export function Clickable(props) {
+    return props.href ? _jsx(LinkClickable, { ...props }) : _jsx(ButtonClickable, { ...props });
 }
 /** Return an `<a href="">` element. */
-function LinkClickable({ disabled = false, href, title, target, download, children = "Go", className, }) {
-    const link = disabled ? undefined : isURI(href) ? href.href : href;
-    return (_jsx("a", { href: link, title: title, download: download, target: target, className: className, children: children }));
+export function LinkClickable({ disabled = false, href, title, target, download, children = "Go", className, }) {
+    // Resolve `href` against the current page URL and site root so site-absolute paths (`/foo`) honour the base subfolder.
+    const { url, root } = requireMeta();
+    const link = disabled ? undefined : getLink(href, url, root);
+    const active = isURLActive(link, url);
+    return (_jsx("a", { href: link?.href, title: title, download: download, target: target, className: className, "aria-current": active ? "page" : undefined, children: children }));
 }
 /** Return a `<button>` element. */
-function ButtonClickable({ disabled = false, onClick, title, children = "Click", className, }) {
+export function ButtonClickable({ disabled = false, onClick, title, children = "Click", className }) {
     // Create a `BusyStore<undefined>` to keep track of the `onClick` call and any thrown errors.
     const store = useInstance(BusyStore, undefined);
     // Track the `busy/unbusy` state of the button to show a loading spinner appropriately.

package/ui/form/Clickable.tsx

@@ -2,9 +2,12 @@ import type { MouseEvent, ReactElement, ReactNode } from "react";
 import { useInstance } from "../../react/useInstance.js";
 import { useStore } from "../../react/useStore.js";
 import { BusyStore } from "../../store/BusyStore.js";
+import { isURLActive } from "../../util/index.js";
+import { getLink } from "../../util/link.js";
 import type { Path } from "../../util/path.js";
-import { type ImmutableURI, isURI, type URIString } from "../../util/uri.js";
+import type { ImmutableURI, URIString } from "../../util/uri.js";
 import { LOADING } from "../misc/Loading.js";
+import { requireMeta } from "../misc/MetaContext.js";
 import { callNotifiedElement } from "../util/notice.js";
 
 /***
@@ -32,13 +35,17 @@ export interface ClickableProps {
 	children?: ReactNode | undefined;
 }
 
+export interface StylableClickableProps extends ClickableProps {
+	className?: string | undefined;
+}
+
 /** Return either a `<button>` or an `<a href="">` based on whether an `onClick` or `href` prop is provided. */
-export function getClickable(props: ClickableProps, className?: string): ReactElement {
-	return props.href ? <LinkClickable {...props} className={className} /> : <ButtonClickable {...props} className={className} />;
+export function Clickable(props: StylableClickableProps): ReactElement {
+	return props.href ? <LinkClickable {...props} /> : <ButtonClickable {...props} />;
 }
 
 /** Return an `<a href="">` element. */
-function LinkClickable({
+export function LinkClickable({
 	disabled = false,
 	href,
 	title,
@@ -46,23 +53,20 @@ function LinkClickable({
 	download,
 	children = "Go",
 	className,
-}: ClickableProps & { className: string | undefined }): ReactElement {
-	const link: string | undefined = disabled ? undefined : isURI(href) ? href.href : href;
+}: StylableClickableProps): ReactElement {
+	// Resolve `href` against the current page URL and site root so site-absolute paths (`/foo`) honour the base subfolder.
+	const { url, root } = requireMeta();
+	const link = disabled ? undefined : getLink(href, url, root);
+	const active = isURLActive(link, url);
 	return (
-		<a href={link} title={title} download={download} target={target} className={className}>
+		<a href={link?.href} title={title} download={download} target={target} className={className} aria-current={active ? "page" : undefined}>
 			{children}
 		</a>
 	);
 }
 
 /** Return a `<button>` element. */
-function ButtonClickable({
-	disabled = false,
-	onClick,
-	title,
-	children = "Click",
-	className,
-}: ClickableProps & { className: string | undefined }): ReactElement {
+export function ButtonClickable({ disabled = false, onClick, title, children = "Click", className }: StylableClickableProps): ReactElement {
 	// Create a `BusyStore<undefined>` to keep track of the `onClick` call and any thrown errors.
 	const store = useInstance(BusyStore, undefined);
 

package/ui/form/DictionaryInput.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import type { Schema } from "../../schema/Schema.js";
 import type { ImmutableDictionary } from "../../util/dictionary.js";
-import { type ValueInputProps } from "./Input.js";
+import type { ValueInputProps } from "./Input.js";
 export interface DictionaryInputProps<T> extends ValueInputProps<ImmutableDictionary<T>> {
     one?: string;
     many?: string;

package/ui/form/DictionaryInput.js

@@ -6,7 +6,7 @@ import { formatUnit } from "../../util/format.js";
 import { omitProp } from "../../util/object.js";
 import { Flex } from "../block/Flex.js";
 import { Button } from "./Button.js";
-import { Input } from "./Input.js";
+import { ButtonInput } from "./ButtonInput.js";
 import { SchemaInput } from "./SchemaInput.js";
 import { TextInput } from "./TextInput.js";
 export function DictionaryInput({ name, 
@@ -26,7 +26,7 @@ placeholder, required = false, disabled = false, message = "", value = {}, onVal
                                 onValue(withDictionaryItem(omitDictionaryItem(value, k), x, v));
                                 k = x; // Update this so it works until content is re-rendered.
                             }, message: message, disabled: disabled }), _jsx(SchemaInput, { name: `${r}-value`, schema: items, value: v, onValue: x => onValue(withDictionaryItem(value, k, x)), message: message, disabled: disabled }), _jsx(Button, { onClick: () => onValue(omitProp(value, k)), disabled: disableRemove, title: disableRemove ? `Minimum ${formatUnit(min, one, { unitDisplay: "long", one, many })}` : `Remove ${one}`, children: _jsx(XMarkIcon, {}) })] }, r));
-            })) : (_jsx(Input, { onClick: addNewItem, name: name, required: required && min > 1, disabled: disabled, children: placeholder })), _jsxs(Flex, { children: [_jsxs(Button //
+            })) : (_jsx(ButtonInput, { onClick: addNewItem, name: name, required: required && min > 1, disabled: disabled, children: placeholder })), _jsxs(Flex, { children: [_jsxs(Button //
                     , { onClick: addNewItem, disabled: disabled || (typeof max === "number" && length >= max), small: true, children: [_jsx(PlusIcon, {}), " Add ", one] }), length && min < 1 ? (_jsxs(Button //
                     , { onClick: () => onValue({}), small: true, children: [_jsx(XMarkIcon, {}), " Clear ", many] })) : null] })] }));
 }

package/ui/form/DictionaryInput.tsx

@@ -8,7 +8,8 @@ import { formatUnit } from "../../util/format.js";
 import { omitProp } from "../../util/object.js";
 import { Flex } from "../block/Flex.js";
 import { Button } from "./Button.js";
-import { Input, type ValueInputProps } from "./Input.js";
+import { ButtonInput } from "./ButtonInput.js";
+import type { ValueInputProps } from "./Input.js";
 import { SchemaInput } from "./SchemaInput.js";
 import { TextInput } from "./TextInput.js";
 
@@ -80,9 +81,9 @@ export function DictionaryInput({
 					);
 				})
 			) : (
-				<Input onClick={addNewItem} name={name} required={required && min > 1} disabled={disabled}>
+				<ButtonInput onClick={addNewItem} name={name} required={required && min > 1} disabled={disabled}>
 					{placeholder}
-				</Input>
+				</ButtonInput>
 			)}
 			<Flex>
 				<Button //

package/ui/form/Input.d.ts

@@ -1,5 +1,4 @@
 import type { ReactElement, ReactNode } from "react";
-import { type ClickableProps } from "./Clickable.js";
 export declare const RADIO_CLASS: any;
 export declare const CHECKBOX_CLASS: any;
 export declare const PLACEHOLDER_CLASS: any;
@@ -9,11 +8,11 @@ export declare const MULTILINE_TEXT_INPUT_CLASS: string;
 export declare const SELECT_INPUT_CLASS: string;
 export declare const EMPTY_OPTION_INPUT_CLASS: any;
 export declare const VALUE_OPTION_INPUT_CLASS: any;
-export declare const ELEMENTS_INPUT_CLASS: string;
-export declare const ELEMENTS_BUTTON_INPUT_CLASS: string;
+export declare const FLEX_INPUT_CLASS: string;
+export declare const FLEX_BUTTON_INPUT_CLASS: string;
 export declare const PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS: string;
-export declare const ELEMENTS_LABEL_INPUT_CLASS: string;
-export declare const PLACEHOLDER_ELEMENTS_LABEL_INPUT_CLASS: string;
+export declare const FLEX_LABEL_INPUT_CLASS: string;
+export declare const PLACEHOLDER_FLEX_LABEL_INPUT_CLASS: string;
 export declare const WRAPPER_INPUT_CLASS: string;
 /** Props all inputs allow. */
 export interface InputProps {
@@ -37,11 +36,12 @@ export interface ValueInputProps<O, I = never> extends InputProps {
     /** Called when the value for the input changes, so you can make changes based on the new value (or `undefined` to set back to default). */
     onValue(value: O | undefined): void;
 }
-/** Return either a `<button>` or an `<a href="">` styled as an input, based on whether an `onClick` or `href` prop is provided. */
-export declare function Input({ title, placeholder, disabled, href, onClick, target, download, children, }: InputProps & ClickableProps): ReactElement;
 /** Input that is loading. */
 export declare const LOADING_INPUT: import("react/jsx-runtime").JSX.Element;
-/** Wraps an input with support for absolutely-positioned `data-slot` icon elements on either side. */
+/**
+ * Wraps an input with support for absolutely-positioned `data-slot` icon elements on either side.
+ * - This is so you can put an icon before or after an input.
+ */
 export declare function InputWrapper({ children }: {
     children: ReactNode;
 }): ReactElement;

package/ui/form/Input.js

@@ -2,7 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { FLEX_CSS } from "../block/Flex.js";
 import { LOADING } from "../misc/Loading.js";
 import { getClass } from "../util/css.js";
-import { getClickable } from "./Clickable.js";
 import INPUT_CSS from "./Input.module.css";
 // Precomposed classes.
 export const RADIO_CLASS = INPUT_CSS.radio;
@@ -14,30 +13,18 @@ export const MULTILINE_TEXT_INPUT_CLASS = getClass(TEXT_INPUT_CLASS, INPUT_CSS.m
 export const SELECT_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.select);
 export const EMPTY_OPTION_INPUT_CLASS = INPUT_CSS.empty;
 export const VALUE_OPTION_INPUT_CLASS = INPUT_CSS.value;
-export const ELEMENTS_INPUT_CLASS = getClass(INPUT_CSS.input, FLEX_CSS.elements, FLEX_CSS.center);
-export const ELEMENTS_BUTTON_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.button, FLEX_CSS.elements, FLEX_CSS.center);
-export const PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS = getClass(ELEMENTS_BUTTON_INPUT_CLASS, INPUT_CSS.placeholder);
-export const ELEMENTS_LABEL_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.label, FLEX_CSS.elements, FLEX_CSS.left);
-export const PLACEHOLDER_ELEMENTS_LABEL_INPUT_CLASS = getClass(ELEMENTS_LABEL_INPUT_CLASS, INPUT_CSS.placeholder);
+export const FLEX_INPUT_CLASS = getClass(INPUT_CSS.input, FLEX_CSS.elements, FLEX_CSS.center);
+export const FLEX_BUTTON_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.button, FLEX_CSS.elements, FLEX_CSS.center);
+export const PLACEHOLDER_ELEMENTS_BUTTON_INPUT_CLASS = getClass(FLEX_BUTTON_INPUT_CLASS, INPUT_CSS.placeholder);
+export const FLEX_LABEL_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.label, FLEX_CSS.elements, FLEX_CSS.left);
+export const PLACEHOLDER_FLEX_LABEL_INPUT_CLASS = getClass(FLEX_LABEL_INPUT_CLASS, INPUT_CSS.placeholder);
 export const WRAPPER_INPUT_CLASS = getClass(INPUT_CSS.input, INPUT_CSS.wrapper);
-/** Return either a `<button>` or an `<a href="">` styled as an input, based on whether an `onClick` or `href` prop is provided. */
-export function Input({ 
-// name,
-title, placeholder = title, 
-// message,
-disabled, href, onClick, target, download, children, }) {
-    return getClickable({
-        disabled,
-        href,
-        onClick,
-        target,
-        download,
-        children: children || placeholder,
-    }, getClass(INPUT_CSS.input, INPUT_CSS.button, children ? undefined : INPUT_CSS.placeholder));
-}
 /** Input that is loading. */
-export const LOADING_INPUT = _jsx("div", { className: ELEMENTS_INPUT_CLASS, children: LOADING });
-/** Wraps an input with support for absolutely-positioned `data-slot` icon elements on either side. */
+export const LOADING_INPUT = _jsx("div", { className: FLEX_INPUT_CLASS, children: LOADING });
+/**
+ * Wraps an input with support for absolutely-positioned `data-slot` icon elements on either side.
+ * - This is so you can put an icon before or after an input.
+ */
 export function InputWrapper({ children }) {
     return _jsx("div", { className: WRAPPER_INPUT_CLASS, children: children });
 }