@c9up/nebula 0.1.0

package/dist/adapters/unocss.js

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ */
+const CONFIG_PATH = "uno.config.ts";
+function unoConfig(config) {
+    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 = {
+    name: "unocss",
+    summary: "UnoCSS with presetWind4 — same class syntax, no PostCSS, faster builds.",
+    packages: ["unocss", "@unocss/cli"],
+    files(config) {
+        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/dist/atoms/AspectRatio.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 { type Slot } from "../lib/children.js";
+import { type Reactive } 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 declare const AspectRatio: (props?: AspectRatioProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/AspectRatio.js

@@ -0,0 +1,19 @@
+/**
+ * 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 { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { read, readOr } from "../lib/props.js";
+export const AspectRatio = component((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/dist/atoms/Avatar.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { type Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+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 declare const Avatar: (props?: AvatarProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/Avatar.js

@@ -0,0 +1,46 @@
+/**
+ * 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 { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { read, readOr } from "../lib/props.js";
+export const Avatar = component((props) => {
+    const state = signal("pending");
+    const hasSrc = () => {
+        const src = read(props.src);
+        return src !== undefined && src !== "";
+    };
+    const showFallback = () => !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/dist/atoms/Badge.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 { type Slot } from "../lib/children.js";
+import { type VariantProps } from "../lib/cva.js";
+import { type Reactive } from "../lib/props.js";
+export declare const badgeVariants: (props?: (import("../index.js").VariantSelection<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}> & import("../index.js").ClassOverrides) | undefined) => string;
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
+export interface BadgeProps {
+    children?: Slot;
+    variant?: Reactive<BadgeVariants["variant"]>;
+    class?: Reactive<string>;
+}
+export declare const Badge: (props?: BadgeProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/Badge.js

@@ -0,0 +1,28 @@
+/**
+ * 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 { slot } from "../lib/children.js";
+import { cva } from "../lib/cva.js";
+import { 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 const Badge = component((props) => {
+    return html `<span
+		data-slot="badge"
+		class="${() => badgeVariants({ variant: read(props.variant), class: read(props.class) })}"
+	>${slot(props.children)}</span>`;
+});

package/dist/atoms/Button.d.ts

@@ -0,0 +1,58 @@
+/**
+ * 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 { type Slot } from "../lib/children.js";
+import { type VariantProps } from "../lib/cva.js";
+import { type Reactive } from "../lib/props.js";
+export declare const buttonVariants: (props?: (import("../index.js").VariantSelection<{
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+    };
+}> & import("../index.js").ClassOverrides) | undefined) => string;
+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 declare const Button: (props?: ButtonProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/Button.js

@@ -0,0 +1,67 @@
+/**
+ * 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 { slot } from "../lib/children.js";
+import { cva } from "../lib/cva.js";
+import { accessor, 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 const Button = component((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 = () => 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>`;
+});

package/dist/atoms/Checkbox.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 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 { type Reactive } from "../lib/props.js";
+export declare 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;
+}
+export declare const Checkbox: (props?: CheckboxProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/Checkbox.js

@@ -0,0 +1,47 @@
+/**
+ * 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, 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";
+function inputChecked(event) {
+    const target = event.target;
+    return target instanceof HTMLInputElement ? target.checked : false;
+}
+export const Checkbox = component((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) => 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/dist/atoms/Input.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 { type Reactive } from "../lib/props.js";
+export declare 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;
+}
+export declare const Input: (props?: InputProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/Input.js

@@ -0,0 +1,50 @@
+/**
+ * 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, 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";
+/**
+ * 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) {
+    const target = event.target;
+    return target instanceof HTMLInputElement ? target.value : "";
+}
+export const Input = component((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) => props.onInput?.(inputValue(event), event)}"
+		@change="${(event) => props.onChange?.(inputValue(event), event)}"
+		@blur="${props.onBlur}"
+		@keydown="${props.onKeyDown}"
+	/>`;
+});

package/dist/atoms/Kbd.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { type Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export interface KbdProps {
+    children?: Slot;
+    class?: Reactive<string>;
+}
+export declare const Kbd: (props?: KbdProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/Kbd.js

@@ -0,0 +1,17 @@
+/**
+ * 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 { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { read } from "../lib/props.js";
+export const Kbd = component((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/dist/atoms/Label.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 { type Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export declare 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 declare const Label: (props?: LabelProps | undefined) => import("@c9up/aurora").TemplateResult;