@c9up/nebula 0.1.0

package/src/atoms/Checkbox.ts

@@ -0,0 +1,76 @@
+/**
+ * Checkbox.
+ *
+ * Radix renders a `<button role="checkbox">` plus a hidden input, because it
+ * needs a element it can put arbitrary children in. nebula keeps the native
+ * `<input type="checkbox">` and styles it with `appearance-none`.
+ *
+ * That is not just simpler, it is better behaved: the control participates in
+ * form submission and reset on its own, `:checked` and `:indeterminate` drive
+ * the visuals with no state to synchronise, and the label association through
+ * `for` works without a click forwarder. The tick and dash are siblings shown
+ * by `peer-checked:` / `peer-indeterminate:`, so the whole component is
+ * declarative — no JavaScript runs when the box is toggled.
+ *
+ * `indeterminate` is bound as a property because there is no attribute for it;
+ * it exists only in the DOM.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { CheckIcon, MinusIcon } from "../lib/icons.js";
+import { accessor, type Reactive, read } from "../lib/props.js";
+
+export const checkboxClasses =
+	"peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-transparent shadow-xs outline-none transition-shadow dark:bg-input/30 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20";
+
+export interface CheckboxProps {
+	id?: string;
+	name?: string;
+	value?: string;
+	checked?: Reactive<boolean>;
+	/** The mixed state — a parent box over partially selected children. */
+	indeterminate?: Reactive<boolean>;
+	disabled?: Reactive<boolean>;
+	required?: Reactive<boolean>;
+	invalid?: Reactive<boolean>;
+	/**
+	 * Accessible name, for a checkbox with no visible `<label>`.
+	 *
+	 * A checkbox in a table row or a toolbar has its meaning from what is beside
+	 * it, which a screen reader does not see — it announces "checkbox, unchecked"
+	 * and nothing else. Every such use needs this.
+	 */
+	label?: Reactive<string | undefined>;
+	class?: Reactive<string>;
+	onCheckedChange?: (checked: boolean, event: Event) => void;
+}
+
+function inputChecked(event: Event): boolean {
+	const target = event.target;
+	return target instanceof HTMLInputElement ? target.checked : false;
+}
+
+export const Checkbox = component<CheckboxProps>((props) => {
+	const marker =
+		"pointer-events-none absolute inset-0 size-4 p-px text-primary-foreground opacity-0 transition-opacity";
+
+	return html`<span data-slot="checkbox" class="relative inline-flex size-4 shrink-0">
+		<input
+			type="checkbox"
+			id="${props.id}"
+			name="${props.name}"
+			value="${props.value}"
+			aria-invalid="${() => (read(props.invalid) === true ? "true" : undefined)}"
+			aria-label="${accessor(props.label, undefined)}"
+			?disabled="${accessor(props.disabled, false)}"
+			?required="${accessor(props.required, false)}"
+			.checked="${accessor(props.checked, false)}"
+			.indeterminate="${accessor(props.indeterminate, false)}"
+			class="${() => cn(checkboxClasses, read(props.class))}"
+			@change="${(event: Event) => props.onCheckedChange?.(inputChecked(event), event)}"
+		/>
+		${CheckIcon({ class: cn(marker, "peer-checked:opacity-100 peer-indeterminate:opacity-0") })}
+		${MinusIcon({ class: cn(marker, "peer-indeterminate:opacity-100") })}
+	</span>`;
+});

package/src/atoms/Input.ts

@@ -0,0 +1,76 @@
+/**
+ * Input — a single-line text field.
+ *
+ * The value binding is the part that differs from React and is worth calling
+ * out. `.value` is a *property* slot, not an attribute: setting the `value`
+ * attribute only seeds the initial value, and after the user types once the
+ * attribute and the property diverge. Binding the property is what keeps a
+ * signal and the field in step in both directions.
+ *
+ * There is no controlled/uncontrolled split. Pass a signal and the field is
+ * controlled; pass nothing and the DOM owns the value, which is the right
+ * default for a form posted the classic way — the shape aurora apps use.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { accessor, type Reactive, read } from "../lib/props.js";
+
+export const inputClasses =
+	"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive";
+
+export interface InputProps {
+	id?: string;
+	name?: string;
+	type?: Reactive<string>;
+	value?: Reactive<string>;
+	placeholder?: Reactive<string>;
+	autocomplete?: string;
+	disabled?: Reactive<boolean>;
+	readonly?: Reactive<boolean>;
+	required?: Reactive<boolean>;
+	/** Renders `aria-invalid`, which the focus ring and border both key off. */
+	invalid?: Reactive<boolean>;
+	/** Names the element describing the error, for screen readers. */
+	describedBy?: Reactive<string | undefined>;
+	class?: Reactive<string>;
+	onInput?: (value: string, event: Event) => void;
+	onChange?: (value: string, event: Event) => void;
+	onBlur?: (event: FocusEvent) => void;
+	onKeyDown?: (event: KeyboardEvent) => void;
+}
+
+/**
+ * Pull the current text out of an input event.
+ *
+ * Reads the target rather than trusting the caller to, so a handler receives a
+ * plain string. The guard is not defensive padding: `event.target` is typed as
+ * the general `EventTarget`, and narrowing it here is what keeps the callback
+ * signature honest without a cast at every call site.
+ */
+function inputValue(event: Event): string {
+	const target = event.target;
+	return target instanceof HTMLInputElement ? target.value : "";
+}
+
+export const Input = component<InputProps>((props) => {
+	return html`<input
+		data-slot="input"
+		id="${props.id}"
+		name="${props.name}"
+		type="${accessor(props.type, "text")}"
+		placeholder="${accessor(props.placeholder, undefined)}"
+		autocomplete="${props.autocomplete}"
+		aria-invalid="${() => (read(props.invalid) === true ? "true" : undefined)}"
+		aria-describedby="${accessor(props.describedBy, undefined)}"
+		?disabled="${accessor(props.disabled, false)}"
+		?readonly="${accessor(props.readonly, false)}"
+		?required="${accessor(props.required, false)}"
+		.value="${accessor(props.value, "")}"
+		class="${() => cn(inputClasses, read(props.class))}"
+		@input="${(event: Event) => props.onInput?.(inputValue(event), event)}"
+		@change="${(event: Event) => props.onChange?.(inputValue(event), event)}"
+		@blur="${props.onBlur}"
+		@keydown="${props.onKeyDown}"
+	/>`;
+});

package/src/atoms/Kbd.ts

@@ -0,0 +1,28 @@
+/**
+ * Kbd — a keyboard key rendered inline.
+ *
+ * Used by Command and by menu items showing their shortcut. Kept as an atom
+ * rather than baked into those two, because shortcut hints show up in tooltips
+ * and documentation prose as well.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { type Slot, slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read } from "../lib/props.js";
+
+export interface KbdProps {
+	children?: Slot;
+	class?: Reactive<string>;
+}
+
+export const Kbd = component<KbdProps>((props) => {
+	return html`<kbd
+		data-slot="kbd"
+		class="${() =>
+			cn(
+				"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
+				read(props.class),
+			)}"
+	>${slot(props.children)}</kbd>`;
+});

package/src/atoms/Label.ts

@@ -0,0 +1,38 @@
+/**
+ * Label — the caption for a form control.
+ *
+ * Radix's Label exists mostly to stop a click on the label from selecting its
+ * text on double-click, and to forward clicks to the control. The browser
+ * already does the forwarding through `for`, so nebula keeps the native
+ * element and only adds `select-none`.
+ *
+ * The disabled styling is driven from outside: `peer-disabled:` picks up a
+ * sibling control marked disabled, `group-data-[disabled=true]:` picks up a
+ * wrapping `Field`. Both are why the label dims without being told anything
+ * about the control it captions.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { type Slot, slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read } from "../lib/props.js";
+
+export const labelClasses =
+	"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
+
+export interface LabelProps {
+	children?: Slot;
+	/** The `id` of the control this labels. */
+	for?: string;
+	id?: string;
+	class?: Reactive<string>;
+}
+
+export const Label = component<LabelProps>((props) => {
+	return html`<label
+		data-slot="label"
+		id="${props.id}"
+		for="${props.for}"
+		class="${() => cn(labelClasses, read(props.class))}"
+	>${slot(props.children)}</label>`;
+});

package/src/atoms/Marker.ts

@@ -0,0 +1,79 @@
+/**
+ * Marker — an inline annotation in a stream of content.
+ *
+ * "Yesterday", "3 unread", "Claude joined the conversation", "context
+ * truncated". A line that is *about* the conversation rather than part of it.
+ *
+ * `role="separator"` when it carries no text, `role="status"` when it does.
+ * The distinction matters: a bare rule between two days is structure and
+ * should be announced as a boundary, while "context truncated" is information
+ * the reader needs and would be lost as a separator.
+ *
+ * The rules on either side are `<span>`s with a border, not a `<hr>` — a
+ * horizontal rule cannot sit either side of a label without absolute
+ * positioning and a background colour matched to whatever is behind it, which
+ * breaks the moment the surface changes.
+ */
+
+import { component, html } from "@c9up/aurora";
+import type { Child } from "../lib/children.js";
+import { cva, type VariantProps } from "../lib/cva.js";
+import { type Reactive, read } from "../lib/props.js";
+
+export const markerVariants = cva(
+	"flex w-full items-center gap-2 text-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "text-muted-foreground",
+				muted: "text-muted-foreground/70",
+				destructive: "text-destructive",
+			},
+			align: {
+				center: "justify-center",
+				start: "justify-start",
+			},
+		},
+		defaultVariants: { variant: "default", align: "center" },
+	},
+);
+
+export type MarkerVariants = VariantProps<typeof markerVariants>;
+
+export interface MarkerProps {
+	/** The annotation. Omit for a plain rule. */
+	label?: Child;
+	icon?: Child;
+	variant?: Reactive<MarkerVariants["variant"]>;
+	align?: Reactive<MarkerVariants["align"]>;
+	/** Draw rules either side of the label. Default `true`. */
+	rules?: boolean;
+	class?: Reactive<string>;
+}
+
+export const Marker = component<MarkerProps>((props) => {
+	const hasLabel = props.label !== undefined;
+	const withRules = props.rules !== false;
+	const rule = html`<span aria-hidden="true" class="bg-border h-px flex-1"></span>`;
+
+	return html`<div
+		data-slot="marker"
+		role="${hasLabel ? "status" : "separator"}"
+		class="${() =>
+			markerVariants({
+				variant: read(props.variant),
+				align: read(props.align),
+				class: read(props.class),
+			})}"
+	>
+		${withRules ? rule : null}
+		${
+			hasLabel
+				? html`<span class="flex shrink-0 items-center gap-1.5 whitespace-nowrap"
+					>${props.icon}${props.label}</span
+				>`
+				: null
+		}
+		${withRules ? rule : null}
+	</div>`;
+});

package/src/atoms/NativeSelect.ts

@@ -0,0 +1,115 @@
+/**
+ * NativeSelect — a real `<select>`, styled.
+ *
+ * The counterpart to `Select`, and the one to reach for first. `Select` builds
+ * a listbox out of divs because the operating system draws a native popup that
+ * cannot be styled at all — options take no markup, no colours, no checkmarks.
+ * That freedom costs everything the native control does for free, and `Select`
+ * has to put it all back by hand: roles, `aria-activedescendant`, type-ahead,
+ * arrows, a hidden input.
+ *
+ * When the options are plain text, none of that is worth paying for. A native
+ * select gives you the platform's own picker — the wheel on iOS, the
+ * search-as-you-type list on desktop — form participation, and zero JavaScript.
+ * `appearance-none` plus a background chevron gets it to match the design
+ * system everywhere except the open popup itself.
+ *
+ * Use `Select` when an option needs an icon, a description, or a swatch. Use
+ * this one otherwise.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { accessor, type Reactive, read } from "../lib/props.js";
+
+export interface NativeSelectOption {
+	value: string;
+	label: string;
+	disabled?: boolean;
+	/** Groups consecutive options under an `<optgroup>`. */
+	group?: string;
+}
+
+export const nativeSelectClasses =
+	"border-input dark:bg-input/30 flex h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-3 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm aria-invalid:border-destructive aria-invalid:ring-destructive/20";
+
+export interface NativeSelectProps {
+	options: readonly NativeSelectOption[];
+	id?: string;
+	name?: string;
+	value?: Reactive<string | undefined>;
+	/** Shown as a disabled first entry while nothing is chosen. */
+	placeholder?: string;
+	disabled?: Reactive<boolean>;
+	required?: Reactive<boolean>;
+	invalid?: Reactive<boolean>;
+	describedBy?: Reactive<string | undefined>;
+	class?: Reactive<string>;
+	onValueChange?: (value: string, event: Event) => void;
+}
+
+function selectedValue(event: Event): string {
+	const target = event.target;
+	return target instanceof HTMLSelectElement ? target.value : "";
+}
+
+export const NativeSelect = component<NativeSelectProps>((props) => {
+	/**
+	 * Options grouped in source order.
+	 *
+	 * Consecutive entries sharing a `group` become one `<optgroup>`; a run that
+	 * starts again later becomes a second one. Sorting by group instead would
+	 * quietly reorder a list the caller arranged deliberately.
+	 */
+	function runs(): Array<{ group?: string; items: NativeSelectOption[] }> {
+		const out: Array<{ group?: string; items: NativeSelectOption[] }> = [];
+		for (const option of props.options) {
+			const last = out[out.length - 1];
+			if (last !== undefined && last.group === option.group)
+				last.items.push(option);
+			else out.push({ group: option.group, items: [option] });
+		}
+		return out;
+	}
+
+	const renderOption = (option: NativeSelectOption) =>
+		html`<option value="${option.value}" ?disabled="${option.disabled === true}">
+			${option.label}
+		</option>`;
+
+	return html`<div data-slot="native-select" class="relative inline-flex w-full items-center">
+		<select
+			id="${props.id}"
+			name="${props.name}"
+			aria-invalid="${() => (read(props.invalid) === true ? "true" : undefined)}"
+			aria-describedby="${accessor(props.describedBy, undefined)}"
+			?disabled="${accessor(props.disabled, false)}"
+			?required="${accessor(props.required, false)}"
+			.value="${accessor(props.value, "")}"
+			class="${() => cn(nativeSelectClasses, read(props.class))}"
+			@change="${(event: Event) => props.onValueChange?.(selectedValue(event), event)}"
+		>
+			${
+				props.placeholder === undefined
+					? null
+					: html`<option value="" disabled selected>${props.placeholder}</option>`
+			}
+			${runs().map((run) =>
+				run.group === undefined
+					? run.items.map(renderOption)
+					: html`<optgroup label="${run.group}">${run.items.map(renderOption)}</optgroup>`,
+			)}
+		</select>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+			class="pointer-events-none absolute end-3 size-4 opacity-50"
+		><path d="m6 9 6 6 6-6" /></svg>
+	</div>`;
+});

package/src/atoms/Progress.ts

@@ -0,0 +1,64 @@
+/**
+ * Progress — a determinate progress bar.
+ *
+ * The fill is a full-width child translated left by the remaining percentage,
+ * rather than a width animation. Transforms are composited off the main
+ * thread; animating `width` relayouts the bar on every frame, which is visible
+ * on a long upload.
+ *
+ * A `value` of `null` means indeterminate, and drops `aria-valuenow` — the
+ * ARIA spec is explicit that an absent value is how "unknown progress" is
+ * expressed, and reporting `0` instead tells the user it has not started.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read, readOr } from "../lib/props.js";
+
+export interface ProgressProps {
+	/** `0`–`max`, or `null` for indeterminate. */
+	value?: Reactive<number | null>;
+	max?: Reactive<number>;
+	label?: Reactive<string | undefined>;
+	class?: Reactive<string>;
+}
+
+export const Progress = component<ProgressProps>((props) => {
+	const max = (): number => {
+		const given = readOr(props.max, 100);
+		// A zero or negative maximum would make the percentage infinite or
+		// negative and push the fill off the track in one direction or the other.
+		return given > 0 ? given : 100;
+	};
+
+	const value = (): number | null => {
+		const given = readOr(props.value, 0);
+		if (given === null) return null;
+		return Math.min(Math.max(given, 0), max());
+	};
+
+	const percent = (): number => {
+		const current = value();
+		return current === null ? 0 : (current / max()) * 100;
+	};
+
+	return html`<div
+		data-slot="progress"
+		role="progressbar"
+		aria-valuemin="0"
+		aria-valuemax="${max}"
+		aria-valuenow="${() => value() ?? undefined}"
+		aria-label="${() => read(props.label)}"
+		class="${() =>
+			cn(
+				"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+				read(props.class),
+			)}"
+	>
+		<div
+			data-slot="progress-indicator"
+			class="bg-primary h-full w-full flex-1 transition-transform"
+			style="${() => `transform: translateX(-${100 - percent()}%)`}"
+		></div>
+	</div>`;
+});

package/src/atoms/ScrollArea.ts

@@ -0,0 +1,53 @@
+/**
+ * ScrollArea — a scroll container with a restrained scrollbar.
+ *
+ * A deliberate departure from Radix, which hides the native scrollbar and
+ * draws its own out of divs, driven by scroll and resize listeners. That buys
+ * pixel-identical scrollbars across platforms; it costs a virtualised
+ * scrollbar that has to re-derive thumb size and position on every frame, and
+ * that drops momentum scrolling on touch.
+ *
+ * The trade is not worth it here. `scrollbar-width` and `scrollbar-color` are
+ * supported everywhere nebula targets, the WebKit pseudo-elements cover the
+ * rest, and the result keeps native scrolling — including overscroll, momentum
+ * and the platform's own accessibility behaviour — for a handful of classes
+ * and no JavaScript.
+ *
+ * Apps needing a fully custom scrollbar should reach for a dedicated library;
+ * this component would be the wrong place to grow one.
+ */
+
+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 const scrollAreaClasses = cn(
+	"relative overflow-auto [scrollbar-width:thin] [scrollbar-color:var(--border)_transparent]",
+	"[&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar]:h-2.5",
+	"[&::-webkit-scrollbar-track]:bg-transparent",
+	"[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-thumb]:bg-clip-content",
+	"hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40",
+);
+
+export interface ScrollAreaProps {
+	children?: Slot;
+	/** Which axis may scroll. Default `"vertical"`. */
+	orientation?: Reactive<"vertical" | "horizontal" | "both">;
+	class?: Reactive<string>;
+}
+
+export const ScrollArea = component<ScrollAreaProps>((props) => {
+	const axisClass = (): string => {
+		const orientation = readOr(props.orientation, "vertical");
+		if (orientation === "horizontal")
+			return "overflow-x-auto overflow-y-hidden";
+		if (orientation === "both") return "overflow-auto";
+		return "overflow-y-auto overflow-x-hidden";
+	};
+
+	return html`<div
+		data-slot="scroll-area"
+		class="${() => cn(scrollAreaClasses, axisClass(), read(props.class))}"
+	>${slot(props.children)}</div>`;
+});

package/src/atoms/Separator.ts

@@ -0,0 +1,36 @@
+/**
+ * Separator — a rule between sections.
+ *
+ * `role="separator"` with an orientation, or `role="none"` when decorative.
+ * The distinction matters to screen readers: a separator is announced as a
+ * structural boundary, and a purely visual line between two buttons in a
+ * toolbar should not be. Decorative is the default, matching Radix.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read, readOr } from "../lib/props.js";
+
+export interface SeparatorProps {
+	orientation?: Reactive<"horizontal" | "vertical">;
+	/** `false` exposes it to assistive technology as a real boundary. */
+	decorative?: Reactive<boolean>;
+	class?: Reactive<string>;
+}
+
+export const Separator = component<SeparatorProps>((props) => {
+	const orientation = (): "horizontal" | "vertical" =>
+		readOr(props.orientation, "horizontal");
+
+	return html`<div
+		data-slot="separator"
+		data-orientation="${orientation}"
+		role="${() => (readOr(props.decorative, true) ? "none" : "separator")}"
+		aria-orientation="${() => (readOr(props.decorative, true) ? undefined : orientation())}"
+		class="${() =>
+			cn(
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+				read(props.class),
+			)}"
+	></div>`;
+});

package/src/atoms/Skeleton.ts

@@ -0,0 +1,24 @@
+/**
+ * Skeleton — a placeholder block while content loads.
+ *
+ * `aria-hidden` and no live region on purpose. A pulsing grey box carries no
+ * information, and announcing one per row of a loading table is worse than
+ * silence. The surrounding region should carry `aria-busy` instead, which says
+ * the same thing once.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { type Reactive, read } from "../lib/props.js";
+
+export interface SkeletonProps {
+	class?: Reactive<string>;
+}
+
+export const Skeleton = component<SkeletonProps>((props) => {
+	return html`<div
+		data-slot="skeleton"
+		aria-hidden="true"
+		class="${() => cn("bg-accent animate-pulse rounded-md", read(props.class))}"
+	></div>`;
+});

package/src/atoms/Slider.ts

@@ -0,0 +1,65 @@
+/**
+ * Slider — pick a number from a range.
+ *
+ * A native `<input type="range">`, restyled. Radix builds its own from a div
+ * and pointer maths because it supports multiple thumbs; nebula does not, and
+ * for the single-thumb case the native control already brings keyboard
+ * support (arrows, Page Up/Down, Home/End), the correct ARIA role and value
+ * announcements, and touch behaviour that no reimplementation gets right for
+ * free.
+ *
+ * The cost is the thumb, which can only be reached through the two vendor
+ * pseudo-elements. Both are written out; they cannot be combined into one
+ * selector, since a browser drops an entire rule containing a pseudo-element
+ * it does not recognise.
+ */
+
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { accessor, type Reactive, read } from "../lib/props.js";
+
+const THUMB =
+	"size-4 appearance-none rounded-full border border-primary bg-background shadow-sm transition-[color,box-shadow]";
+
+export const sliderClasses = cn(
+	"h-1.5 w-full cursor-pointer appearance-none rounded-full bg-primary/20 outline-none disabled:pointer-events-none disabled:opacity-50",
+	`[&::-webkit-slider-thumb]:${THUMB.split(" ").join(" [&::-webkit-slider-thumb]:")}`,
+	`[&::-moz-range-thumb]:${THUMB.split(" ").join(" [&::-moz-range-thumb]:")}`,
+	"focus-visible:[&::-webkit-slider-thumb]:ring-ring/50 focus-visible:[&::-webkit-slider-thumb]:ring-[3px]",
+	"focus-visible:[&::-moz-range-thumb]:ring-ring/50 focus-visible:[&::-moz-range-thumb]:ring-[3px]",
+);
+
+export interface SliderProps {
+	id?: string;
+	name?: string;
+	value?: Reactive<number>;
+	min?: Reactive<number>;
+	max?: Reactive<number>;
+	step?: Reactive<number>;
+	disabled?: Reactive<boolean>;
+	label?: Reactive<string | undefined>;
+	class?: Reactive<string>;
+	onValueChange?: (value: number, event: Event) => void;
+}
+
+function inputValue(event: Event): number {
+	const target = event.target;
+	return target instanceof HTMLInputElement ? Number(target.value) : 0;
+}
+
+export const Slider = component<SliderProps>((props) => {
+	return html`<input
+		type="range"
+		data-slot="slider"
+		id="${props.id}"
+		name="${props.name}"
+		min="${accessor(props.min, 0)}"
+		max="${accessor(props.max, 100)}"
+		step="${accessor(props.step, 1)}"
+		aria-label="${accessor(props.label, undefined)}"
+		?disabled="${accessor(props.disabled, false)}"
+		.value="${accessor(props.value, 0)}"
+		class="${() => cn(sliderClasses, read(props.class))}"
+		@input="${(event: Event) => props.onValueChange?.(inputValue(event), event)}"
+	/>`;
+});