@c9up/nebula 0.1.0

package/src/adapters/css.ts

@@ -0,0 +1,75 @@
+/**
+ * The engine-free adapter.
+ *
+ * No Tailwind, no UnoCSS, no build step in the app at all: nebula ships a
+ * prebuilt `nebula.css` holding exactly the utilities its own components
+ * reference, and the app imports it.
+ *
+ * **Where the compilation actually happens.** nebula's own release build runs
+ * Tailwind over `src/**` and freezes the result (`scripts/build-css.ts`).
+ * Tailwind is therefore a devDependency *of nebula* and never reaches the
+ * app's dependency tree — which is the whole point. The set of utilities is
+ * knowable ahead of time because the components are nebula's, and they do not
+ * change between one app's install and another's.
+ *
+ * **The limitation, stated plainly.** The frozen stylesheet covers the
+ * components as nebula wrote them. The registry copies those sources into the
+ * app for the user to edit, and the moment an edit introduces a utility nebula
+ * never used — `bg-emerald-500`, `grid-cols-7` — nothing emits it, and the
+ * class silently does nothing.
+ *
+ * So this adapter suits an app that takes the components as they are and
+ * writes its own hand-rolled CSS around them. An app that intends to retune
+ * components through their class strings wants `tailwind` or `unocss`, where
+ * the scanner sees the edits.
+ *
+ * Lifting that limitation means compiling the app's copied sources too — a
+ * utility scanner and a CSS emitter over the finite surface nebula uses. That
+ * is a build-time, string-heavy, run-on-every-build job, which is the profile
+ * where moving it into `ream-cli` (Rust) pays; it is the one part of nebula
+ * where Rust would earn its place.
+ */
+
+import type { ResolvedNebulaConfig } from "../config.js";
+import type { GeneratedFile, StyleAdapter } from "./types.js";
+
+function stylesheet(): string {
+	return `/*
+ * nebula, engine-free.
+ *
+ * \`nebula.css\` is prebuilt and shipped with the package — no scanner runs in
+ * this project, so nothing here needs a build step.
+ *
+ * It covers nebula's components as published. A utility you add to a copied
+ * component will not be emitted; write the rule below by hand, or switch the
+ * adapter in \`config/nebula.ts\` to \`tailwind\` or \`unocss\`.
+ */
+@import "@c9up/nebula/nebula.css";
+
+/* Your own styles go here. */
+`;
+}
+
+export const cssAdapter: StyleAdapter = {
+	name: "css",
+	summary:
+		"No engine and no build step — nebula's prebuilt stylesheet, imported as-is.",
+	packages: [],
+
+	files(config: ResolvedNebulaConfig): readonly GeneratedFile[] {
+		return [
+			{ path: config.paths.css, contents: stylesheet(), skipIfExists: true },
+		];
+	},
+
+	/**
+	 * Nothing to compile.
+	 *
+	 * `null` rather than a copy command: the app serves the stylesheet straight
+	 * from the package, so there is no compile step for `ream build` to run and
+	 * none should be registered.
+	 */
+	commands(): null {
+		return null;
+	},
+};

package/src/adapters/index.ts

@@ -0,0 +1,40 @@
+/**
+ * The three style adapters.
+ *
+ * All three consume the same utility class names, which is what lets one set
+ * of components serve all of them. Switching is a one-word change in
+ * `config/nebula.ts` followed by `ream nebula:init`.
+ */
+
+import type { AdapterName } from "../config.js";
+import { cssAdapter } from "./css.js";
+import { tailwindAdapter } from "./tailwind.js";
+import type { StyleAdapter } from "./types.js";
+import { unocssAdapter } from "./unocss.js";
+
+export { cssAdapter } from "./css.js";
+export { tailwindAdapter } from "./tailwind.js";
+export type {
+	AdapterCommand,
+	GeneratedFile,
+	StyleAdapter,
+} from "./types.js";
+export { unocssAdapter } from "./unocss.js";
+
+const adapters: Readonly<Record<AdapterName, StyleAdapter>> = {
+	tailwind: tailwindAdapter,
+	unocss: unocssAdapter,
+	css: cssAdapter,
+};
+
+export function adapterFor(name: AdapterName): StyleAdapter {
+	return adapters[name];
+}
+
+export function adapterNames(): readonly AdapterName[] {
+	return Object.keys(adapters).filter(isAdapterName);
+}
+
+export function isAdapterName(value: string): value is AdapterName {
+	return value === "tailwind" || value === "unocss" || value === "css";
+}

package/src/adapters/tailwind.ts

@@ -0,0 +1,134 @@
+/**
+ * Tailwind CSS v4 adapter.
+ *
+ * The default, and the one shadcn itself targets — so the class strings in
+ * nebula's components are exactly the ones upstream uses, and a shadcn example
+ * pasted into a nebula project renders the same.
+ *
+ * v4 is configured in CSS rather than a JS config file, which is why this
+ * emits a stylesheet and no `tailwind.config.js`. Three directives do the
+ * work:
+ *
+ * - `@source` points the scanner at the copied components. Without it Tailwind
+ *   never sees `bg-primary` and emits none of it — the single most common way
+ *   a v4 setup produces an unstyled page.
+ * - `@custom-variant dark` makes `dark:` respond to a `.dark` class rather
+ *   than the system preference, so a theme toggle can override the OS.
+ * - `@theme inline` maps nebula's plain custom properties onto Tailwind's
+ *   colour namespace, which is what turns `--primary` into a `bg-primary`
+ *   utility.
+ *
+ * The build runs through `@tailwindcss/cli`, matching the aurora apps already
+ * in this workspace.
+ */
+
+import type { ResolvedNebulaConfig } from "../config.js";
+import type { GeneratedFile, StyleAdapter } from "./types.js";
+
+function stylesheet(config: ResolvedNebulaConfig): string {
+	return `@import "tailwindcss";
+@import "@c9up/nebula/theme.css";
+
+/* Scan the component tree so the utilities they use are emitted. */
+@source "${relativeFromCss(config)}";
+
+/* Class-based dark mode: \`dark:\` applies under any \`.dark\` ancestor. */
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * Map nebula's tokens onto Tailwind's namespaces.
+ *
+ * \`inline\` matters: without it Tailwind copies the *values* at build time and
+ * the \`.dark\` overrides never reach the utilities, so dark mode changes the
+ * custom properties and nothing else.
+ */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+`;
+}
+
+/**
+ * `@source` is resolved relative to the stylesheet, not the project root.
+ *
+ * The two are rarely the same — `resources/css/app.css` scanning
+ * `resources/pages` needs `../pages` — and getting it wrong fails silently:
+ * Tailwind finds no files, emits no utilities, and the page renders unstyled
+ * with no error anywhere.
+ */
+function relativeFromCss(config: ResolvedNebulaConfig): string {
+	const cssDirectory = config.paths.css.split("/").slice(0, -1);
+	const target = config.paths.components.split("/");
+
+	let shared = 0;
+	while (
+		shared < cssDirectory.length &&
+		shared < target.length &&
+		cssDirectory[shared] === target[shared]
+	) {
+		shared += 1;
+	}
+
+	const up = new Array(cssDirectory.length - shared).fill("..");
+	return [...up, ...target.slice(shared)].join("/");
+}
+
+export const tailwindAdapter: StyleAdapter = {
+	name: "tailwind",
+	summary: "Tailwind CSS v4, configured in CSS. What shadcn/ui itself targets.",
+	packages: ["tailwindcss", "@tailwindcss/cli"],
+
+	files(config: ResolvedNebulaConfig): readonly GeneratedFile[] {
+		return [
+			{
+				path: config.paths.css,
+				contents: stylesheet(config),
+				skipIfExists: true,
+			},
+		];
+	},
+
+	commands(config) {
+		const base = ["-i", config.paths.css, "-o", config.paths.output];
+		return {
+			build: { command: "tailwindcss", args: base },
+			dev: { command: "tailwindcss", args: [...base, "--watch"] },
+		};
+	},
+};

package/src/adapters/types.ts

@@ -0,0 +1,53 @@
+/**
+ * The style-adapter contract.
+ *
+ * An adapter answers three questions and nothing else:
+ *
+ * 1. What does the app need to install? nebula never installs it — the app
+ *    owns its dependencies, and a UI library quietly adding a build tool to
+ *    someone's `package.json` is how a dependency tree gets away from them.
+ * 2. What files should exist? The stylesheet entry, and any engine config.
+ * 3. What command compiles them? Handed to ream's `assets` config, which
+ *    `ream dev` and `ream build` already run — the same hook AdonisJS uses for
+ *    its bundler.
+ *
+ * Deliberately not in the contract: anything that would change how a component
+ * is written. All three adapters consume the same utility class names, which
+ * is what keeps one set of fifty-odd components serving all of them. An engine
+ * with a different authoring model — Panda's recipes, StyleX's compile-time
+ * API — cannot be added behind this interface, and pretending otherwise would
+ * mean a second version of every component.
+ */
+
+import type { ResolvedNebulaConfig } from "../config.js";
+
+export interface GeneratedFile {
+	/** Path relative to the project root. */
+	path: string;
+	contents: string;
+	/**
+	 * Leave an existing file alone. True for anything the user is expected to
+	 * edit — their stylesheet is theirs once it exists.
+	 */
+	skipIfExists: boolean;
+}
+
+export interface AdapterCommand {
+	command: string;
+	args: readonly string[];
+}
+
+export interface StyleAdapter {
+	readonly name: string;
+	/** One-line summary, printed by `nebula init`. */
+	readonly summary: string;
+	/** Packages the app must add itself. Empty for an engine-free adapter. */
+	readonly packages: readonly string[];
+	/** Stubs to write. */
+	files(config: ResolvedNebulaConfig): readonly GeneratedFile[];
+	/** Build and watch commands, or `null` when there is nothing to compile. */
+	commands(config: ResolvedNebulaConfig): {
+		build: AdapterCommand;
+		dev: AdapterCommand;
+	} | null;
+}

package/src/adapters/unocss.ts

@@ -0,0 +1,116 @@
+/**
+ * UnoCSS adapter.
+ *
+ * `presetWind4` implements Tailwind v4's utility syntax, so nebula's component
+ * sources are unchanged between this adapter and the Tailwind one — the whole
+ * reason both can be offered without a second set of components.
+ *
+ * What differs is the config format. UnoCSS is configured in JavaScript rather
+ * than CSS, so the theme mapping that `@theme inline` expresses for Tailwind
+ * is a `theme` object here, and the token definitions come in through
+ * `preflights` since UnoCSS has no `@import` of its own.
+ *
+ * The tokens still come from `theme.css`. One file remains the source of truth
+ * for the palette; only the plumbing around it changes.
+ */
+
+import type { ResolvedNebulaConfig } from "../config.js";
+import type { GeneratedFile, StyleAdapter } from "./types.js";
+
+const CONFIG_PATH = "uno.config.ts";
+
+function unoConfig(config: ResolvedNebulaConfig): string {
+	return `import { defineConfig, presetWind4 } from 'unocss'
+import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+
+const require = createRequire(import.meta.url)
+
+/*
+ * nebula's tokens, read from the package rather than copied.
+ *
+ * UnoCSS has no \`@import\`, so the custom properties are injected as a
+ * preflight. Reading the file keeps one source of truth for the palette —
+ * copying it here would drift the moment nebula retunes a colour.
+ */
+const tokens = readFileSync(require.resolve('@c9up/nebula/theme.css'), 'utf8')
+
+/**
+ * Map a token to a colour the utilities can reach.
+ *
+ * The indirection through \`var()\` is what makes dark mode work: the utility
+ * resolves the variable at paint time, so a \`.dark\` ancestor redefining it
+ * changes the rendered colour without a second stylesheet.
+ */
+const color = (name: string) => \`var(--\${name})\`
+
+export default defineConfig({
+  presets: [presetWind4()],
+  content: {
+    filesystem: ['${config.paths.components}/**/*.{ts,js}'],
+  },
+  preflights: [{ getCSS: () => tokens }],
+  // \`dark:\` follows a \`.dark\` class, so a theme toggle can override the OS.
+  darkMode: 'class',
+  theme: {
+    colors: {
+      background: color('background'),
+      foreground: color('foreground'),
+      card: { DEFAULT: color('card'), foreground: color('card-foreground') },
+      popover: { DEFAULT: color('popover'), foreground: color('popover-foreground') },
+      primary: { DEFAULT: color('primary'), foreground: color('primary-foreground') },
+      secondary: { DEFAULT: color('secondary'), foreground: color('secondary-foreground') },
+      muted: { DEFAULT: color('muted'), foreground: color('muted-foreground') },
+      accent: { DEFAULT: color('accent'), foreground: color('accent-foreground') },
+      destructive: { DEFAULT: color('destructive'), foreground: color('destructive-foreground') },
+      border: color('border'),
+      input: color('input'),
+      ring: color('ring'),
+      chart: {
+        1: color('chart-1'),
+        2: color('chart-2'),
+        3: color('chart-3'),
+        4: color('chart-4'),
+        5: color('chart-5'),
+      },
+      sidebar: {
+        DEFAULT: color('sidebar'),
+        foreground: color('sidebar-foreground'),
+        primary: color('sidebar-primary'),
+        accent: color('sidebar-accent'),
+        border: color('sidebar-border'),
+        ring: color('sidebar-ring'),
+      },
+    },
+    radius: {
+      sm: 'calc(var(--radius) - 4px)',
+      md: 'calc(var(--radius) - 2px)',
+      lg: 'var(--radius)',
+      xl: 'calc(var(--radius) + 4px)',
+    },
+  },
+})
+`;
+}
+
+export const unocssAdapter: StyleAdapter = {
+	name: "unocss",
+	summary:
+		"UnoCSS with presetWind4 — same class syntax, no PostCSS, faster builds.",
+	packages: ["unocss", "@unocss/cli"],
+
+	files(config: ResolvedNebulaConfig): readonly GeneratedFile[] {
+		return [
+			{ path: CONFIG_PATH, contents: unoConfig(config), skipIfExists: true },
+		];
+	},
+
+	commands(config) {
+		const patterns = `${config.paths.components}/**/*.{ts,js}`;
+		const base = [patterns, "-o", config.paths.output];
+		return {
+			build: { command: "unocss", args: base },
+			dev: { command: "unocss", args: [...base, "--watch"] },
+		};
+	},
+};

package/src/atoms/AspectRatio.ts

@@ -0,0 +1,28 @@
+/**
+ * AspectRatio — hold a box at a fixed width-to-height ratio.
+ *
+ * Radix's version predates the CSS `aspect-ratio` property and reproduces it
+ * with a padding-top percentage trick. That is no longer needed anywhere
+ * nebula runs, so this is the property, set inline because the value is
+ * arbitrary and cannot be a utility class.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { type Slot, slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read, readOr } from "../lib/props.js";
+
+export interface AspectRatioProps {
+	children?: Slot;
+	/** Width divided by height. `16 / 9` for widescreen, `1` for a square. */
+	ratio?: Reactive<number>;
+	class?: Reactive<string>;
+}
+
+export const AspectRatio = component<AspectRatioProps>((props) => {
+	return html`<div
+		data-slot="aspect-ratio"
+		style="${() => `aspect-ratio: ${readOr(props.ratio, 1)}`}"
+		class="${() => cn("relative w-full", read(props.class))}"
+	>${slot(props.children)}</div>`;
+});

package/src/atoms/Avatar.ts

@@ -0,0 +1,67 @@
+/**
+ * Avatar — a user's picture, with a fallback when there is none.
+ *
+ * shadcn splits this into `Avatar` / `AvatarImage` / `AvatarFallback` because
+ * Radix needs three components to track the image's load state across them.
+ * nebula tracks it in one signal inside one component, so the API is a `src`
+ * and a `fallback`.
+ *
+ * Three states, not two. An image that has not loaded *yet* must not show the
+ * fallback — swapping initials in and a photo over them a moment later is the
+ * flicker this component exists to avoid. So the fallback appears only once
+ * the image has actually failed, or when there was no `src` to begin with.
+ */
+
+import { component, html, signal } from "@c9up/aurora";
+import { type Slot, slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read, readOr } from "../lib/props.js";
+
+type LoadState = "pending" | "loaded" | "failed";
+
+export interface AvatarProps {
+	src?: Reactive<string | undefined>;
+	alt?: Reactive<string>;
+	/** Shown when there is no image, or it failed. Usually initials. */
+	fallback?: Slot;
+	class?: Reactive<string>;
+}
+
+export const Avatar = component<AvatarProps>((props) => {
+	const state = signal<LoadState>("pending");
+
+	const hasSrc = (): boolean => {
+		const src = read(props.src);
+		return src !== undefined && src !== "";
+	};
+
+	const showFallback = (): boolean => !hasSrc() || state() === "failed";
+
+	return html`<span
+		data-slot="avatar"
+		class="${() =>
+			cn(
+				"relative flex size-8 shrink-0 overflow-hidden rounded-full",
+				read(props.class),
+			)}"
+	>
+		${() =>
+			hasSrc() && state() !== "failed"
+				? html`<img
+						data-slot="avatar-image"
+						src="${() => read(props.src)}"
+						alt="${() => readOr(props.alt, "")}"
+						class="aspect-square size-full object-cover"
+						@load="${() => state("loaded")}"
+						@error="${() => state("failed")}"
+					/>`
+				: null}
+		${() =>
+			showFallback()
+				? html`<span
+						data-slot="avatar-fallback"
+						class="bg-muted flex size-full items-center justify-center rounded-full text-xs font-medium"
+					>${slot(props.fallback)}</span>`
+				: null}
+	</span>`;
+});

package/src/atoms/Badge.ts

@@ -0,0 +1,46 @@
+/**
+ * Badge — a small status or count marker.
+ *
+ * Exported variants as well as the component, for the same reason as Button:
+ * a badge is often a link to the thing it counts, and an anchor needs the
+ * classes without the element.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { type Slot, slot } from "../lib/children.js";
+import { cva, type VariantProps } from "../lib/cva.js";
+import { type Reactive, read } from "../lib/props.js";
+
+export const badgeVariants = cva(
+	"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+				destructive:
+					"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20",
+				outline:
+					"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: { variant: "default" },
+	},
+);
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
+
+export interface BadgeProps {
+	children?: Slot;
+	variant?: Reactive<BadgeVariants["variant"]>;
+	class?: Reactive<string>;
+}
+
+export const Badge = component<BadgeProps>((props) => {
+	return html`<span
+		data-slot="badge"
+		class="${() => badgeVariants({ variant: read(props.variant), class: read(props.class) })}"
+	>${slot(props.children)}</span>`;
+});

package/src/atoms/Button.ts

@@ -0,0 +1,96 @@
+/**
+ * Button — the reference component for the whole library.
+ *
+ * Every other nebula component follows the shape set here, so it is worth
+ * reading once:
+ *
+ * - Variants come from `cva`, exported separately as `buttonVariants` so a
+ *   link or a menu item can borrow the button's look without being a button.
+ *   shadcn does the same, and half its examples depend on it.
+ * - Every prop that can change is `Reactive<T>` and is bound through
+ *   `accessor()`. Aurora does not re-render; a value read once at setup is
+ *   frozen, so `disabled: form.pending` would be a bug that only shows up
+ *   after the first submit.
+ * - `data-slot` mirrors shadcn v4, which stamps one on every part. It gives
+ *   host CSS and tests a stable hook that does not depend on the utility
+ *   classes, which are the part a user is expected to edit.
+ *
+ * No `asChild`. React's Slot pattern clones an element and merges props into
+ * it; Aurora templates are compiled markup with no element to clone. Where
+ * shadcn would write `<Button asChild><a/></Button>`, nebula exports the
+ * variants and you put them on the anchor yourself — which is what the Slot
+ * was doing anyway, with a runtime in between.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { type Slot, slot } from "../lib/children.js";
+import { cva, type VariantProps } from "../lib/cva.js";
+import { accessor, type Reactive, read } from "../lib/props.js";
+
+export const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+export interface ButtonProps {
+	children?: Slot;
+	variant?: Reactive<ButtonVariants["variant"]>;
+	size?: Reactive<ButtonVariants["size"]>;
+	/** Defaults to `"button"` — never `"submit"`, which is HTML's default and
+	 * the cause of most accidental form submissions. */
+	type?: Reactive<"button" | "submit" | "reset">;
+	disabled?: Reactive<boolean>;
+	class?: Reactive<string>;
+	id?: string;
+	/** Sets `aria-label`. Required in practice for `size: "icon"`. */
+	label?: Reactive<string | undefined>;
+	onClick?: (event: MouseEvent) => void;
+}
+
+export const Button = component<ButtonProps>((props) => {
+	// An accessor, not a string: the renderer wraps it in an effect, so the
+	// class list tracks whichever of these props were given as signals.
+	const classes = (): string =>
+		buttonVariants({
+			variant: read(props.variant),
+			size: read(props.size),
+			class: read(props.class),
+		});
+
+	return html`<button
+		data-slot="button"
+		id="${props.id}"
+		type="${accessor(props.type, "button")}"
+		class="${classes}"
+		aria-label="${accessor(props.label, undefined)}"
+		?disabled="${accessor(props.disabled, false)}"
+		@click="${props.onClick}"
+	>${slot(props.children)}</button>`;
+});