shelving 1.207.0 → 1.208.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.207.0",
+	"version": "1.208.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/app/App.module.css

@@ -102,65 +102,10 @@
 	--shadow-element: 0 3px 16px -8px var(--color-overlay);
 	--shadow-block: 0 4px 24px -12px var(--color-overlay);
 
-	/* Primary colors */
-	--primary-text: var(--color-blue);
-	--primary-contrast: var(--color-white);
-	--primary-surface: color-mix(in srgb, var(--primary-text) 12%, white);
-
-	/* Secondary colors */
-	--secondary-text: var(--color-purple);
-	--secondary-contrast: var(--color-white);
-	--secondary-surface: color-mix(in srgb, var(--secondary-text) 12%, white);
-
-	/* Tertiary colors */
-	--tertiary-text: var(--color-cyan);
-	--tertiary-contrast: var(--color-white);
-	--tertiary-surface: color-mix(in srgb, var(--tertiary-text) 12%, white);
-
-	/* Quiet colors */
-	--quiet-text: var(--color-quiet);
-	--quiet-contrast: var(--color-contrast);
-	--quiet-surface: var(--color-surface);
-
 	/* Focus colors */
 	--focus-text: var(--color-focus);
 	--focus-contrast: var(--color-white);
 	--focus-surface: color-mix(in srgb, var(--focus-text) 12%, white);
-
-	/* Loading colors */
-	--loading-text: var(--color-loading);
-	--loading-contrast: var(--color-contrast);
-	--loading-surface: var(--color-surface);
-
-	/* Info colors */
-	--info-text: var(--color-blue);
-	--info-contrast: var(--color-white);
-	--info-surface: color-mix(in srgb, var(--info-text) 12%, white);
-
-	/* Success colors */
-	--success-text: var(--color-green);
-	--success-contrast: var(--color-white);
-	--success-surface: color-mix(in srgb, var(--success-text) 12%, white);
-
-	/* Warning colors */
-	--warning-text: var(--color-orange);
-	--warning-contrast: var(--color-white);
-	--warning-surface: color-mix(in srgb, var(--warning-text) 12%, white);
-
-	/* Error colors */
-	--error-text: var(--color-red);
-	--error-contrast: var(--color-white);
-	--error-surface: color-mix(in srgb, var(--error-text) 12%, white);
-
-	/* Danger colors */
-	--danger-text: var(--color-red);
-	--danger-contrast: var(--color-white);
-	--danger-surface: color-mix(in srgb, var(--danger-text) 12%, white);
-
-	/* Highlight colors */
-	--highlight-text: var(--color-yellow);
-	--highlight-contrast: var(--color-black);
-	--highlight-surface: color-mix(in srgb, var(--highlight-text) 12%, white);
 }
 
 .app {

package/ui/docs/DocumentationCard.d.ts

@@ -1,4 +1,4 @@
 import type { ReactNode } from "react";
 import type { DocumentationElementProps } from "../../util/element.js";
 /** Card renderer for a `tree-documentation` element. */
-export declare function DocumentationCard({ title, name, description, signatures }: DocumentationElementProps): ReactNode;
+export declare function DocumentationCard({ title, name, kind, description, signatures }: DocumentationElementProps): ReactNode;

package/ui/docs/DocumentationCard.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TREE_CARD_CLASS, TREE_CARD_DESCRIPTION_CLASS, TREE_CARD_TITLE_CLASS } from "../index.js";
 import { requireTreeHref } from "../tree/TreePathContext.js";
+import { DocumentationKind } from "./DocumentationKind.js";
 /** Card renderer for a `tree-documentation` element. */
-export function DocumentationCard({ title, name, description, signatures }) {
+export function DocumentationCard({ title, name, kind, description, signatures }) {
     const href = requireTreeHref();
-    return (_jsxs("a", { className: TREE_CARD_CLASS, href: href, children: [_jsx("h3", { className: TREE_CARD_TITLE_CLASS, children: _jsx("code", { children: title ?? name }) }), signatures?.map(sig => (_jsx("pre", { children: _jsx("code", { children: sig }) }, sig))), description && _jsx("p", { className: TREE_CARD_DESCRIPTION_CLASS, children: description })] }));
+    return (_jsxs("a", { className: TREE_CARD_CLASS, href: href, children: [_jsx("h3", { className: TREE_CARD_TITLE_CLASS, children: _jsx("code", { children: title ?? name }) }), kind && _jsx(DocumentationKind, { kind: kind }), signatures?.map(sig => (_jsx("pre", { children: _jsx("code", { children: sig }) }, sig))), description && _jsx("p", { className: TREE_CARD_DESCRIPTION_CLASS, children: description })] }));
 }

package/ui/docs/DocumentationCard.tsx

@@ -2,15 +2,17 @@ import type { ReactNode } from "react";
 import type { DocumentationElementProps } from "../../util/element.js";
 import { TREE_CARD_CLASS, TREE_CARD_DESCRIPTION_CLASS, TREE_CARD_TITLE_CLASS } from "../index.js";
 import { requireTreeHref } from "../tree/TreePathContext.js";
+import { DocumentationKind } from "./DocumentationKind.js";
 
 /** Card renderer for a `tree-documentation` element. */
-export function DocumentationCard({ title, name, description, signatures }: DocumentationElementProps): ReactNode {
+export function DocumentationCard({ title, name, kind, description, signatures }: DocumentationElementProps): ReactNode {
 	const href = requireTreeHref();
 	return (
 		<a className={TREE_CARD_CLASS} href={href}>
 			<h3 className={TREE_CARD_TITLE_CLASS}>
 				<code>{title ?? name}</code>
 			</h3>
+			{kind && <DocumentationKind kind={kind} />}
 			{signatures?.map(sig => (
 				<pre key={sig}>
 					<code>{sig}</code>

package/ui/docs/DocumentationKind.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+/** Props for `DocumentationKind`. */
+export interface DocumentationKindProps {
+    /** The documentation kind (e.g. `"function"`, `"class"`, `"interface"`, `"type"`, `"constant"`, `"method"`, `"property"`). */
+    readonly kind: string;
+}
+/**
+ * Colour-coded tag for a documented symbol's kind.
+ * - Thin wrapper over `<Tag>` that maps the kind string to a raw colour variant.
+ *
+ * @example <DocumentationKind kind="function" />
+ */
+export declare function DocumentationKind({ kind }: DocumentationKindProps): ReactElement;

package/ui/docs/DocumentationKind.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tag } from "../misc/Tag.js";
+/** Mapping from a documented symbol's `kind` to its tag colour. */
+const KIND_COLOR = {
+    function: "blue",
+    class: "purple",
+    interface: "cyan",
+    type: "pink",
+    constant: "green",
+    method: "orange",
+    property: "yellow",
+};
+/**
+ * Colour-coded tag for a documented symbol's kind.
+ * - Thin wrapper over `<Tag>` that maps the kind string to a raw colour variant.
+ *
+ * @example <DocumentationKind kind="function" />
+ */
+export function DocumentationKind({ kind }) {
+    const color = KIND_COLOR[kind];
+    return _jsx(Tag, { ...(color ? { [color]: true } : {}), children: kind });
+}

package/ui/docs/DocumentationKind.tsx

@@ -0,0 +1,31 @@
+import type { ReactElement } from "react";
+import type { Color } from "../misc/Color.js";
+import { Tag } from "../misc/Tag.js";
+
+/** Props for `DocumentationKind`. */
+export interface DocumentationKindProps {
+	/** The documentation kind (e.g. `"function"`, `"class"`, `"interface"`, `"type"`, `"constant"`, `"method"`, `"property"`). */
+	readonly kind: string;
+}
+
+/** Mapping from a documented symbol's `kind` to its tag colour. */
+const KIND_COLOR: { readonly [K in string]?: Color } = {
+	function: "blue",
+	class: "purple",
+	interface: "cyan",
+	type: "pink",
+	constant: "green",
+	method: "orange",
+	property: "yellow",
+};
+
+/**
+ * Colour-coded tag for a documented symbol's kind.
+ * - Thin wrapper over `<Tag>` that maps the kind string to a raw colour variant.
+ *
+ * @example <DocumentationKind kind="function" />
+ */
+export function DocumentationKind({ kind }: DocumentationKindProps): ReactElement {
+	const color = KIND_COLOR[kind];
+	return <Tag {...(color ? { [color]: true } : {})}>{kind}</Tag>;
+}

package/ui/docs/DocumentationPage.d.ts

@@ -5,4 +5,4 @@ import type { DocumentationElementProps } from "../../util/element.js";
  * - Renders title, signatures (one per overload), description, parameters, returns, throws, examples, and child symbols.
  * - All sections are conditional — only render when their array has entries.
  */
-export declare function DocumentationPage({ title, name, description, signatures, params, returns, throws, examples, children, }: DocumentationElementProps): ReactNode;
+export declare function DocumentationPage({ title, name, kind, description, signatures, params, returns, throws, examples, children, }: DocumentationElementProps): ReactNode;

package/ui/docs/DocumentationPage.js

@@ -1,12 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Page } from "../page/Page.js";
 import { TreeCards } from "../tree/TreeCards.js";
+import { DocumentationKind } from "./DocumentationKind.js";
 const DEFAULT_TYPE = "unknown";
 /**
  * Page renderer for a `tree-documentation` element.
  * - Renders title, signatures (one per overload), description, parameters, returns, throws, examples, and child symbols.
  * - All sections are conditional — only render when their array has entries.
  */
-export function DocumentationPage({ title, name, description, signatures, params, returns, throws, examples, children, }) {
-    return (_jsxs(Page, { title: title ?? name, children: [signatures?.map(sig => (_jsx("pre", { children: _jsx("code", { children: sig }) }, sig))), description && _jsx("p", { children: description }), params?.length && (_jsxs("section", { children: [_jsx("h2", { children: "Parameters" }), _jsx("dl", { children: params.map(({ name, type = DEFAULT_TYPE, description = "", optional }) => (_jsxs("div", { children: [_jsxs("dt", { children: [_jsx("code", { children: name }), ": ", _jsx("code", { children: type ?? DEFAULT_TYPE }), optional && _jsx(_Fragment, { children: " (optional)" })] }), description && _jsx("dd", { children: description })] }, `${name}-${type}-${description}`))) })] })), returns?.length && (_jsxs("section", { children: [_jsx("h2", { children: "Returns" }), _jsx("dl", { children: returns.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs("div", { children: [_jsx("dt", { children: _jsx("code", { children: type }) }), description && _jsx("dd", { children: description })] }, `${type}-${description}`))) })] })), throws?.length && (_jsxs("section", { children: [_jsx("h2", { children: "Throws" }), _jsx("dl", { children: throws.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs("div", { children: [_jsx("dt", { children: _jsx("code", { children: type }) }), description && _jsx("dd", { children: description })] }, `${type}-${description}`))) })] })), examples?.length && (_jsxs("section", { children: [_jsx("h2", { children: "Examples" }), examples.map(({ description }) => (_jsx("pre", { children: _jsx("code", { children: description }) }, description)))] })), children && _jsx(TreeCards, { children: children })] }));
+export function DocumentationPage({ title, name, kind, description, signatures, params, returns, throws, examples, children, }) {
+    return (_jsxs(Page, { title: title ?? name, children: [kind && _jsx(DocumentationKind, { kind: kind }), signatures?.map(sig => (_jsx("pre", { children: _jsx("code", { children: sig }) }, sig))), description && _jsx("p", { children: description }), params?.length && (_jsxs("section", { children: [_jsx("h2", { children: "Parameters" }), _jsx("dl", { children: params.map(({ name, type = DEFAULT_TYPE, description = "", optional }) => (_jsxs("div", { children: [_jsxs("dt", { children: [_jsx("code", { children: name }), ": ", _jsx("code", { children: type ?? DEFAULT_TYPE }), optional && _jsx(_Fragment, { children: " (optional)" })] }), description && _jsx("dd", { children: description })] }, `${name}-${type}-${description}`))) })] })), returns?.length && (_jsxs("section", { children: [_jsx("h2", { children: "Returns" }), _jsx("dl", { children: returns.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs("div", { children: [_jsx("dt", { children: _jsx("code", { children: type }) }), description && _jsx("dd", { children: description })] }, `${type}-${description}`))) })] })), throws?.length && (_jsxs("section", { children: [_jsx("h2", { children: "Throws" }), _jsx("dl", { children: throws.map(({ type = DEFAULT_TYPE, description = "" }) => (_jsxs("div", { children: [_jsx("dt", { children: _jsx("code", { children: type }) }), description && _jsx("dd", { children: description })] }, `${type}-${description}`))) })] })), examples?.length && (_jsxs("section", { children: [_jsx("h2", { children: "Examples" }), examples.map(({ description }) => (_jsx("pre", { children: _jsx("code", { children: description }) }, description)))] })), children && _jsx(TreeCards, { children: children })] }));
 }

package/ui/docs/DocumentationPage.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import type { DocumentationElementProps } from "../../util/element.js";
 import { Page } from "../page/Page.js";
 import { TreeCards } from "../tree/TreeCards.js";
+import { DocumentationKind } from "./DocumentationKind.js";
 
 const DEFAULT_TYPE = "unknown";
 
@@ -13,6 +14,7 @@ const DEFAULT_TYPE = "unknown";
 export function DocumentationPage({
 	title,
 	name,
+	kind,
 	description,
 	signatures,
 	params,
@@ -23,6 +25,7 @@ export function DocumentationPage({
 }: DocumentationElementProps): ReactNode {
 	return (
 		<Page title={title ?? name}>
+			{kind && <DocumentationKind kind={kind} />}
 			{signatures?.map(sig => (
 				<pre key={sig}>
 					<code>{sig}</code>

package/ui/docs/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./DirectoryCard.js";
 export * from "./DirectoryPage.js";
 export * from "./DocumentationCard.js";
+export * from "./DocumentationKind.js";
 export * from "./DocumentationPage.js";
 export * from "./FileCard.js";
 export * from "./FilePage.js";

package/ui/docs/index.js

@@ -1,6 +1,7 @@
 export * from "./DirectoryCard.js";
 export * from "./DirectoryPage.js";
 export * from "./DocumentationCard.js";
+export * from "./DocumentationKind.js";
 export * from "./DocumentationPage.js";
 export * from "./FileCard.js";
 export * from "./FilePage.js";

package/ui/docs/index.ts

@@ -1,6 +1,7 @@
 export * from "./DirectoryCard.js";
 export * from "./DirectoryPage.js";
 export * from "./DocumentationCard.js";
+export * from "./DocumentationKind.js";
 export * from "./DocumentationPage.js";
 export * from "./FileCard.js";
 export * from "./FilePage.js";

package/ui/form/Button.d.ts

@@ -1,10 +1,11 @@
 import type { ReactElement } from "react";
 import { type ElementsVariants } from "../block/Elements.js";
-import { type StatusVariants } from "../notice/Status.js";
+import { type ColorVariants } from "../misc/Color.js";
+import { type StatusVariants } from "../misc/Status.js";
 import BUTTON_CSS from "./Button.module.css";
 import { type ClickableProps } from "./Clickable.js";
 /** Variants for buttons. */
-export interface ButtonVariants extends ElementsVariants, StatusVariants {
+export interface ButtonVariants extends ElementsVariants, StatusVariants, ColorVariants {
     /** This is the default button in a form and should be displayed stronger. */
     strong?: boolean | undefined;
     /** Add plain styling (background only appears on hover or focus). */

package/ui/form/Button.js

@@ -1,5 +1,6 @@
 import { ELEMENTS_CSS } from "../block/Elements.js";
-import { getStatusClass } from "../notice/Status.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";
@@ -16,6 +17,7 @@ export function Button({ disabled, href, onClick, title, target, download, child
         download,
         children,
     }, getClass(ELEMENTS_BUTTON_CLASS, //
-    getModuleClass(BUTTON_CSS, variants), getModuleClass(ELEMENTS_CSS, variants), getStatusClass(variants)));
+    getModuleClass(BUTTON_CSS, variants), getModuleClass(ELEMENTS_CSS, variants), getStatusClass(variants), // Buttons have status colours.
+    getColorClass(variants)));
 }
 export { BUTTON_CSS };

package/ui/form/Button.tsx

@@ -1,12 +1,13 @@
 import type { ReactElement } from "react";
 import { ELEMENTS_CSS, type ElementsVariants } from "../block/Elements.js";
-import { getStatusClass, type StatusVariants } from "../notice/Status.js";
+import { type ColorVariants, getColorClass } from "../misc/Color.js";
+import { getStatusClass, type StatusVariants } from "../misc/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import BUTTON_CSS from "./Button.module.css";
 import { type ClickableProps, getClickable } from "./Clickable.js";
 
 /** Variants for buttons. */
-export interface ButtonVariants extends ElementsVariants, StatusVariants {
+export interface ButtonVariants extends ElementsVariants, StatusVariants, ColorVariants {
 	/** This is the default button in a form and should be displayed stronger. */
 	strong?: boolean | undefined;
 	/** Add plain styling (background only appears on hover or focus). */
@@ -41,6 +42,7 @@ export function Button({ disabled, href, onClick, title, target, download, child
 			getModuleClass(BUTTON_CSS, variants),
 			getModuleClass(ELEMENTS_CSS, variants),
 			getStatusClass(variants), // Buttons have status colours.
+			getColorClass(variants), // Buttons can also have raw colour overrides.
 		),
 	);
 }

package/ui/form/SubmitButton.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { ArrowRightIcon } from "@heroicons/react/24/solid";
 import { useStore } from "../../react/useStore.js";
 import { Loading } from "../misc/Loading.js";
-import { getStatusClass } from "../notice/Status.js";
+import { getStatusClass } from "../misc/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import { BUTTON_CSS, ELEMENTS_BUTTON_CLASS } from "./Button.js";
 import { requireForm } from "./FormContext.js";

package/ui/form/SubmitButton.tsx

@@ -2,7 +2,7 @@ import { ArrowRightIcon } from "@heroicons/react/24/solid";
 import type { ReactElement, ReactNode } from "react";
 import { useStore } from "../../react/useStore.js";
 import { Loading } from "../misc/Loading.js";
-import { getStatusClass } from "../notice/Status.js";
+import { getStatusClass } from "../misc/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import { BUTTON_CSS, type ButtonVariants, ELEMENTS_BUTTON_CLASS } from "./Button.js";
 import { requireForm } from "./FormContext.js";

package/ui/misc/Color.d.ts

@@ -0,0 +1,25 @@
+import COLOR_CSS from "./Color.module.css";
+/** Variants for raw colours — pure hue overrides independent of semantic status. */
+export type ColorVariants = {
+    /** Element has red colours. */
+    red?: boolean | undefined;
+    /** Element has orange colours. */
+    orange?: boolean | undefined;
+    /** Element has yellow colours. */
+    yellow?: boolean | undefined;
+    /** Element has green colours. */
+    green?: boolean | undefined;
+    /** Element has cyan colours. */
+    cyan?: boolean | undefined;
+    /** Element has blue colours. */
+    blue?: boolean | undefined;
+    /** Element has purple colours. */
+    purple?: boolean | undefined;
+    /** Element has pink colours. */
+    pink?: boolean | undefined;
+};
+/** Possible colour strings. */
+export type Color = keyof ColorVariants;
+/** Get a class for a colour. */
+export declare function getColorClass(color: Color | ColorVariants): string | undefined;
+export { COLOR_CSS };

package/ui/misc/Color.js

@@ -0,0 +1,7 @@
+import { getModuleClass } from "../util/css.js";
+import COLOR_CSS from "./Color.module.css";
+/** Get a class for a colour. */
+export function getColorClass(color) {
+    return getModuleClass(COLOR_CSS, color);
+}
+export { COLOR_CSS };

package/ui/misc/Color.module.css

@@ -0,0 +1,105 @@
+:root {
+	/* Red */
+	--red-text: var(--color-red);
+	--red-contrast: var(--color-white);
+	--red-surface: color-mix(in srgb, var(--red-text) 12%, white);
+
+	/* Orange */
+	--orange-text: var(--color-orange);
+	--orange-contrast: var(--color-black);
+	--orange-surface: color-mix(in srgb, var(--orange-text) 12%, white);
+
+	/* Yellow */
+	--yellow-text: var(--color-yellow);
+	--yellow-contrast: var(--color-black);
+	--yellow-surface: color-mix(in srgb, var(--yellow-text) 12%, white);
+
+	/* Green */
+	--green-text: var(--color-green);
+	--green-contrast: var(--color-black);
+	--green-surface: color-mix(in srgb, var(--green-text) 12%, white);
+
+	/* Cyan */
+	--cyan-text: var(--color-cyan);
+	--cyan-contrast: var(--color-black);
+	--cyan-surface: color-mix(in srgb, var(--cyan-text) 12%, white);
+
+	/* Blue */
+	--blue-text: var(--color-blue);
+	--blue-contrast: var(--color-white);
+	--blue-surface: color-mix(in srgb, var(--blue-text) 12%, white);
+
+	/* Purple */
+	--purple-text: var(--color-purple);
+	--purple-contrast: var(--color-white);
+	--purple-surface: color-mix(in srgb, var(--purple-text) 12%, white);
+
+	/* Pink */
+	--pink-text: var(--color-pink);
+	--pink-contrast: var(--color-white);
+	--pink-surface: color-mix(in srgb, var(--pink-text) 12%, white);
+}
+
+.red {
+	--color-text: var(--red-text);
+	--color-contrast: var(--red-contrast);
+	--color-link: var(--red-text);
+	--color-quiet: var(--red-text);
+	--color-surface: var(--red-surface);
+}
+
+.orange {
+	--color-text: var(--orange-text);
+	--color-contrast: var(--orange-contrast);
+	--color-link: var(--orange-text);
+	--color-quiet: var(--orange-text);
+	--color-surface: var(--orange-surface);
+}
+
+.yellow {
+	--color-text: var(--yellow-text);
+	--color-contrast: var(--yellow-contrast);
+	--color-link: var(--yellow-text);
+	--color-quiet: var(--yellow-text);
+	--color-surface: var(--yellow-surface);
+}
+
+.green {
+	--color-text: var(--green-text);
+	--color-contrast: var(--green-contrast);
+	--color-link: var(--green-text);
+	--color-quiet: var(--green-text);
+	--color-surface: var(--green-surface);
+}
+
+.cyan {
+	--color-text: var(--cyan-text);
+	--color-contrast: var(--cyan-contrast);
+	--color-link: var(--cyan-text);
+	--color-quiet: var(--cyan-text);
+	--color-surface: var(--cyan-surface);
+}
+
+.blue {
+	--color-text: var(--blue-text);
+	--color-contrast: var(--blue-contrast);
+	--color-link: var(--blue-text);
+	--color-quiet: var(--blue-text);
+	--color-surface: var(--blue-surface);
+}
+
+.purple {
+	--color-text: var(--purple-text);
+	--color-contrast: var(--purple-contrast);
+	--color-link: var(--purple-text);
+	--color-quiet: var(--purple-text);
+	--color-surface: var(--purple-surface);
+}
+
+.pink {
+	--color-text: var(--pink-text);
+	--color-contrast: var(--pink-contrast);
+	--color-link: var(--pink-text);
+	--color-quiet: var(--pink-text);
+	--color-surface: var(--pink-surface);
+}

package/ui/misc/Color.tsx

@@ -0,0 +1,32 @@
+import { getModuleClass } from "../util/css.js";
+import COLOR_CSS from "./Color.module.css";
+
+/** Variants for raw colours — pure hue overrides independent of semantic status. */
+export type ColorVariants = {
+	/** Element has red colours. */
+	red?: boolean | undefined;
+	/** Element has orange colours. */
+	orange?: boolean | undefined;
+	/** Element has yellow colours. */
+	yellow?: boolean | undefined;
+	/** Element has green colours. */
+	green?: boolean | undefined;
+	/** Element has cyan colours. */
+	cyan?: boolean | undefined;
+	/** Element has blue colours. */
+	blue?: boolean | undefined;
+	/** Element has purple colours. */
+	purple?: boolean | undefined;
+	/** Element has pink colours. */
+	pink?: boolean | undefined;
+};
+
+/** Possible colour strings. */
+export type Color = keyof ColorVariants;
+
+/** Get a class for a colour. */
+export function getColorClass(color: Color | ColorVariants): string | undefined {
+	return getModuleClass(COLOR_CSS, color);
+}
+
+export { COLOR_CSS };

package/ui/{notice → misc}/Status.module.css

@@ -1,3 +1,60 @@
+:root {
+	/* Primary colors */
+	--primary-text: var(--color-blue);
+	--primary-contrast: var(--color-white);
+	--primary-surface: color-mix(in srgb, var(--primary-text) 12%, white);
+
+	/* Secondary colors */
+	--secondary-text: var(--color-purple);
+	--secondary-contrast: var(--color-white);
+	--secondary-surface: color-mix(in srgb, var(--secondary-text) 12%, white);
+
+	/* Tertiary colors */
+	--tertiary-text: var(--color-cyan);
+	--tertiary-contrast: var(--color-white);
+	--tertiary-surface: color-mix(in srgb, var(--tertiary-text) 12%, white);
+
+	/* Quiet colors */
+	--quiet-text: var(--color-quiet);
+	--quiet-contrast: var(--color-contrast);
+	--quiet-surface: var(--color-surface);
+
+	/* Loading colors */
+	--loading-text: var(--color-loading);
+	--loading-contrast: var(--color-contrast);
+	--loading-surface: var(--color-surface);
+
+	/* Info colors */
+	--info-text: var(--color-blue);
+	--info-contrast: var(--color-white);
+	--info-surface: color-mix(in srgb, var(--info-text) 12%, white);
+
+	/* Success colors */
+	--success-text: var(--color-green);
+	--success-contrast: var(--color-white);
+	--success-surface: color-mix(in srgb, var(--success-text) 12%, white);
+
+	/* Warning colors */
+	--warning-text: var(--color-orange);
+	--warning-contrast: var(--color-white);
+	--warning-surface: color-mix(in srgb, var(--warning-text) 12%, white);
+
+	/* Error colors */
+	--error-text: var(--color-red);
+	--error-contrast: var(--color-white);
+	--error-surface: color-mix(in srgb, var(--error-text) 12%, white);
+
+	/* Danger colors */
+	--danger-text: var(--color-red);
+	--danger-contrast: var(--color-white);
+	--danger-surface: color-mix(in srgb, var(--danger-text) 12%, white);
+
+	/* Highlight colors */
+	--highlight-text: var(--color-yellow);
+	--highlight-contrast: var(--color-black);
+	--highlight-surface: color-mix(in srgb, var(--highlight-text) 12%, white);
+}
+
 .primary {
 	--color-text: var(--primary-text);
 	--color-contrast: var(--primary-contrast);
@@ -30,6 +87,14 @@
 	--color-surface: var(--quiet-surface);
 }
 
+.loading {
+	--color-text: var(--loading-text);
+	--color-contrast: var(--loading-contrast);
+	--color-link: var(--loading-text);
+	--color-quiet: var(--loading-text);
+	--color-surface: var(--loading-surface);
+}
+
 .info {
 	--color-text: var(--info-text);
 	--color-contrast: var(--info-contrast);

package/ui/{notice → misc}/StatusIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
-import { Loading } from "../misc/Loading.js";
 import { getModuleClass } from "../util/css.js";
+import { Loading } from "./Loading.js";
 import statusStyles from "./Status.module.css";
 import styles from "./StatusIcon.module.css";
 const STATUS_ICONS = {

package/ui/{notice → misc}/StatusIcon.tsx

@@ -1,7 +1,7 @@
 import { CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
 import type { ComponentType, ReactElement } from "react";
-import { Loading } from "../misc/Loading.js";
 import { getModuleClass } from "../util/css.js";
+import { Loading } from "./Loading.js";
 import type { Status } from "./Status.js";
 import statusStyles from "./Status.module.css";
 import styles from "./StatusIcon.module.css";

package/ui/misc/Tag.d.ts

@@ -0,0 +1,23 @@
+import type { ReactElement, ReactNode } from "react";
+import { type ClickableProps } from "../form/Clickable.js";
+import { type ColorVariants } from "./Color.js";
+import { type StatusVariants } from "./Status.js";
+import TAG_CSS from "./Tag.module.css";
+/** Variants for tags — accepts both status and raw colour variants. */
+export interface TagVariants extends StatusVariants, ColorVariants {
+    /** Make the tag appear smaller. */
+    small?: boolean | undefined;
+}
+export interface TagProps extends TagVariants, ClickableProps {
+    children?: ReactNode;
+}
+/**
+ * Small inline label used to annotate other content.
+ * - Delegates to `getClickable()` — renders as `<a>` when `href` is set, otherwise `<button>`.
+ * - Accepts a status variant (`success`, `info`, `error`, etc.) _or_ a raw colour variant (`red`, `blue`, `purple`, etc.).
+ *
+ * @example <Tag success>Active</Tag>
+ * @example <Tag purple href="/beta">Beta</Tag>
+ */
+export declare function Tag({ disabled, href, onClick, title, target, download, children, ...variants }: TagProps): ReactElement;
+export { TAG_CSS };

package/ui/misc/Tag.js

@@ -0,0 +1,18 @@
+import { getClickable } from "../form/Clickable.js";
+import { getClass, getModuleClass } from "../util/css.js";
+import { getColorClass } from "./Color.js";
+import { getStatusClass } from "./Status.js";
+import TAG_CSS from "./Tag.module.css";
+/**
+ * Small inline label used to annotate other content.
+ * - Delegates to `getClickable()` — renders as `<a>` when `href` is set, otherwise `<button>`.
+ * - Accepts a status variant (`success`, `info`, `error`, etc.) _or_ a raw colour variant (`red`, `blue`, `purple`, etc.).
+ *
+ * @example <Tag success>Active</Tag>
+ * @example <Tag purple href="/beta">Beta</Tag>
+ */
+export function Tag({ disabled, href, onClick, title, target, download, children, ...variants }) {
+    return getClickable({ disabled, href, onClick, title, target, download, children }, getClass(TAG_CSS.tag, //
+    getModuleClass(TAG_CSS, variants), getStatusClass(variants), getColorClass(variants)));
+}
+export { TAG_CSS };

package/ui/misc/Tag.module.css

@@ -0,0 +1,29 @@
+.tag {
+	display: inline-block;
+	padding: 0 var(--spacing-small);
+	border: 0;
+	border-radius: var(--radius-inline);
+	background: var(--color-surface);
+	color: var(--color-text);
+	font-family: var(--font-body);
+	font-size: var(--size-small);
+	font-weight: var(--weight-strong);
+	line-height: var(--leading-tight);
+	text-transform: uppercase;
+	text-decoration: none;
+	letter-spacing: 0.05em;
+
+	&.small {
+		font-size: calc(var(--size-small) * 0.85);
+		padding: 0 calc(var(--spacing-small) * 0.75);
+	}
+
+	&:hover {
+		filter: brightness(0.95);
+	}
+
+	&:focus-visible {
+		outline: var(--border-focus) solid var(--color-focus);
+		outline-offset: 2px;
+	}
+}

package/ui/misc/Tag.tsx

@@ -0,0 +1,38 @@
+import type { ReactElement, ReactNode } from "react";
+import { type ClickableProps, getClickable } from "../form/Clickable.js";
+import { getClass, getModuleClass } from "../util/css.js";
+import { type ColorVariants, getColorClass } from "./Color.js";
+import { getStatusClass, type StatusVariants } from "./Status.js";
+import TAG_CSS from "./Tag.module.css";
+
+/** Variants for tags — accepts both status and raw colour variants. */
+export interface TagVariants extends StatusVariants, ColorVariants {
+	/** Make the tag appear smaller. */
+	small?: boolean | undefined;
+}
+
+export interface TagProps extends TagVariants, ClickableProps {
+	children?: ReactNode;
+}
+
+/**
+ * Small inline label used to annotate other content.
+ * - Delegates to `getClickable()` — renders as `<a>` when `href` is set, otherwise `<button>`.
+ * - Accepts a status variant (`success`, `info`, `error`, etc.) _or_ a raw colour variant (`red`, `blue`, `purple`, etc.).
+ *
+ * @example <Tag success>Active</Tag>
+ * @example <Tag purple href="/beta">Beta</Tag>
+ */
+export function Tag({ disabled, href, onClick, title, target, download, children, ...variants }: TagProps): ReactElement {
+	return getClickable(
+		{ disabled, href, onClick, title, target, download, children },
+		getClass(
+			TAG_CSS.tag, //
+			getModuleClass(TAG_CSS, variants),
+			getStatusClass(variants),
+			getColorClass(variants),
+		),
+	);
+}
+
+export { TAG_CSS };

package/ui/misc/index.d.ts

@@ -1,3 +1,7 @@
 export * from "./Catcher.js";
+export * from "./Color.js";
 export * from "./Loading.js";
 export * from "./MetaContext.js";
+export * from "./Status.js";
+export * from "./StatusIcon.js";
+export * from "./Tag.js";

package/ui/misc/index.js

@@ -1,3 +1,7 @@
 export * from "./Catcher.js";
+export * from "./Color.js";
 export * from "./Loading.js";
 export * from "./MetaContext.js";
+export * from "./Status.js";
+export * from "./StatusIcon.js";
+export * from "./Tag.js";

package/ui/misc/index.tsx

@@ -1,3 +1,7 @@
 export * from "./Catcher.js";
+export * from "./Color.js";
 export * from "./Loading.js";
 export * from "./MetaContext.js";
+export * from "./Status.js";
+export * from "./StatusIcon.js";
+export * from "./Tag.js";

package/ui/notice/Message.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import { type ParagraphProps } from "../block/Paragraph.js";
-import { type Status } from "./Status.js";
-export interface MessageProps extends ParagraphProps {
+import { type ColorVariants } from "../misc/Color.js";
+import { type Status } from "../misc/Status.js";
+export interface MessageProps extends ParagraphProps, ColorVariants {
     children?: ReactNode;
     /** Status of the message (defaults to "error") */
     status?: Status | undefined;

package/ui/notice/Message.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PARAGRAPH_CSS } from "../block/Paragraph.js";
+import { getColorClass } from "../misc/Color.js";
 import { LOADING } from "../misc/Loading.js";
+import { getStatusClass } from "../misc/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import MESSAGE_CSS from "./Message.module.css";
-import { getStatusClass } from "./Status.js";
 /** Paragraph with status colours. */
 export function Message({ children, status = "info", ...variants }) {
     return (_jsx("p", { role: status === "error" || status === "danger" ? "alert" : "status", className: getClass(getModuleClass(PARAGRAPH_CSS, "paragraph", variants), //
-        MESSAGE_CSS.message, getStatusClass(status)), children: children }));
+        MESSAGE_CSS.message, getStatusClass(status), getColorClass(variants)), children: children }));
 }
 export const LOADING_MESSAGE = _jsx(Message, { status: "loading", children: LOADING });

package/ui/notice/Message.tsx

@@ -1,11 +1,12 @@
 import type { ReactNode } from "react";
 import { PARAGRAPH_CSS, type ParagraphProps } from "../block/Paragraph.js";
+import { type ColorVariants, getColorClass } from "../misc/Color.js";
 import { LOADING } from "../misc/Loading.js";
+import { getStatusClass, type Status } from "../misc/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import MESSAGE_CSS from "./Message.module.css";
-import { getStatusClass, type Status } from "./Status.js";
 
-export interface MessageProps extends ParagraphProps {
+export interface MessageProps extends ParagraphProps, ColorVariants {
 	children?: ReactNode;
 	/** Status of the message (defaults to "error") */
 	status?: Status | undefined;
@@ -20,6 +21,7 @@ export function Message({ children, status = "info", ...variants }: MessageProps
 				getModuleClass(PARAGRAPH_CSS, "paragraph", variants), //
 				MESSAGE_CSS.message,
 				getStatusClass(status),
+				getColorClass(variants),
 			)}
 		>
 			{children}

package/ui/notice/Notice.d.ts

@@ -1,8 +1,9 @@
 import type { ReactElement, ReactNode } from "react";
 import { type ElementsVariants } from "../block/Elements.js";
+import { type ColorVariants } from "../misc/Color.js";
+import { type Status } from "../misc/Status.js";
 import NOTICE_CSS from "./Notice.module.css";
-import { type Status } from "./Status.js";
-export interface NoticeProps extends ElementsVariants {
+export interface NoticeProps extends ElementsVariants, ColorVariants {
     /** Status for the notice. */
     status?: Status | undefined;
     /** Children for the notice. */

package/ui/notice/Notice.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ELEMENT_CSS } from "../block/Element.js";
 import { ELEMENTS_CSS } from "../block/Elements.js";
+import { getColorClass } from "../misc/Color.js";
+import { getStatusClass } from "../misc/Status.js";
+import { StatusIcon } from "../misc/StatusIcon.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import NOTICE_CSS from "./Notice.module.css";
-import { getStatusClass } from "./Status.js";
-import { StatusIcon } from "./StatusIcon.js";
 export function Notice({ children, status = children ? "info" : "loading", icon = _jsx(StatusIcon, { status: status }), ...variants }) {
     return (_jsxs("aside", { role: status === "danger" || status === "error" ? "alert" : "status", className: getClass(ELEMENT_CSS.element, getModuleClass(NOTICE_CSS, "notice", variants), //
-        getModuleClass(ELEMENTS_CSS, "elements", variants), getStatusClass(status)), children: [icon, children] }));
+        getModuleClass(ELEMENTS_CSS, "elements", variants), getStatusClass(status), // Notices have status colours.
+        getColorClass(variants)), children: [icon, children] }));
 }
 export const LOADING_NOTICE = _jsx(Notice, { status: "loading" });
 export { NOTICE_CSS };

package/ui/notice/Notice.tsx

@@ -1,12 +1,13 @@
 import type { ReactElement, ReactNode } from "react";
 import { ELEMENT_CSS } from "../block/Element.js";
 import { ELEMENTS_CSS, type ElementsVariants } from "../block/Elements.js";
+import { type ColorVariants, getColorClass } from "../misc/Color.js";
+import { getStatusClass, type Status } from "../misc/Status.js";
+import { StatusIcon } from "../misc/StatusIcon.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import NOTICE_CSS from "./Notice.module.css";
-import { getStatusClass, type Status } from "./Status.js";
-import { StatusIcon } from "./StatusIcon.js";
 
-export interface NoticeProps extends ElementsVariants {
+export interface NoticeProps extends ElementsVariants, ColorVariants {
 	/** Status for the notice. */
 	status?: Status | undefined;
 	/** Children for the notice. */
@@ -28,7 +29,8 @@ export function Notice({
 				ELEMENT_CSS.element,
 				getModuleClass(NOTICE_CSS, "notice", variants), //
 				getModuleClass(ELEMENTS_CSS, "elements", variants),
-				getStatusClass(status), // Buttons have status colours.
+				getStatusClass(status), // Notices have status colours.
+				getColorClass(variants), // Notices can also have raw colour overrides.
 			)}
 		>
 			{icon}

package/ui/notice/NoticesStore.d.ts

@@ -8,4 +8,4 @@ export declare class NoticesStore<S extends string> extends ArrayStore<NoticeSto
     [Symbol.asyncDispose](): Promise<void>;
 }
 /** Create a global list of shown notices allowing any of the default statuses. */
-export declare const NOTICES: NoticesStore<keyof import("./Status.js").StatusVariants>;
+export declare const NOTICES: NoticesStore<keyof import("../misc/Status.js").StatusVariants>;

package/ui/notice/NoticesStore.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from "react";
 import { ArrayStore } from "../../store/ArrayStore.js";
 import { awaitDispose } from "../../util/dispose.js";
+import type { Status } from "../misc/Status.js";
 import { NoticeStore } from "./NoticeStore.js";
-import type { Status } from "./Status.js";
 
 /** Store a list of notices. */
 export class NoticesStore<S extends string> extends ArrayStore<NoticeStore<S>> {

package/ui/notice/index.d.ts

@@ -3,5 +3,3 @@ export * from "./Notice.js";
 export * from "./NoticeStore.js";
 export * from "./Notices.js";
 export * from "./NoticesStore.js";
-export * from "./Status.js";
-export * from "./StatusIcon.js";

package/ui/notice/index.js

@@ -3,5 +3,3 @@ export * from "./Notice.js";
 export * from "./NoticeStore.js";
 export * from "./Notices.js";
 export * from "./NoticesStore.js";
-export * from "./Status.js";
-export * from "./StatusIcon.js";

package/ui/notice/index.ts

@@ -3,5 +3,3 @@ export * from "./Notice.js";
 export * from "./NoticeStore.js";
 export * from "./Notices.js";
 export * from "./NoticesStore.js";
-export * from "./Status.js";
-export * from "./StatusIcon.js";

package/ui/util/notice.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { Arguments } from "../../util/function.js";
-import type { Status } from "../notice/Status.js";
+import type { Status } from "../misc/Status.js";
 /**
  * Notify the user with a message by dispatching a notice event.
  * - This is how e.g. `<Button>` and `<FormNotify>` components send notices to the `<Notices>` list of global notices.

package/ui/util/notice.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import { isAsync } from "../../util/async.js";
 import { getMessage } from "../../util/error.js";
 import type { Arguments } from "../../util/function.js";
-import type { Status } from "../notice/Status.js";
+import type { Status } from "../misc/Status.js";
 
 // Constants.
 const NOTICE_EVENT = "notice";