@c9up/nebula 0.1.0

package/dist/atoms/Label.js

@@ -0,0 +1,26 @@
+/**
+ * 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 { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { 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 const Label = component((props) => {
+    return html `<label
+		data-slot="label"
+		id="${props.id}"
+		for="${props.for}"
+		class="${() => cn(labelClasses, read(props.class))}"
+	>${slot(props.children)}</label>`;
+});

package/dist/atoms/Marker.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 type { Child } from "../lib/children.js";
+import { type VariantProps } from "../lib/cva.js";
+import { type Reactive } from "../lib/props.js";
+export declare const markerVariants: (props?: (import("../index.js").VariantSelection<{
+    variant: {
+        default: string;
+        muted: string;
+        destructive: string;
+    };
+    align: {
+        center: string;
+        start: string;
+    };
+}> & import("../index.js").ClassOverrides) | undefined) => string;
+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 declare const Marker: (props?: MarkerProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/Marker.js

@@ -0,0 +1,55 @@
+/**
+ * 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 { cva } from "../lib/cva.js";
+import { 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 const Marker = component((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/dist/atoms/NativeSelect.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 { type Reactive } from "../lib/props.js";
+export interface NativeSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Groups consecutive options under an `<optgroup>`. */
+    group?: string;
+}
+export declare 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;
+}
+export declare const NativeSelect: (props?: NativeSelectProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/NativeSelect.js

@@ -0,0 +1,81 @@
+/**
+ * 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, read } from "../lib/props.js";
+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";
+function selectedValue(event) {
+    const target = event.target;
+    return target instanceof HTMLSelectElement ? target.value : "";
+}
+export const NativeSelect = component((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() {
+        const out = [];
+        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) => 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) => 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/dist/atoms/Progress.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { type Reactive } 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 declare const Progress: (props?: ProgressProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/Progress.js

@@ -0,0 +1,48 @@
+/**
+ * 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 { read, readOr } from "../lib/props.js";
+export const Progress = component((props) => {
+    const max = () => {
+        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 = () => {
+        const given = readOr(props.value, 0);
+        if (given === null)
+            return null;
+        return Math.min(Math.max(given, 0), max());
+    };
+    const percent = () => {
+        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/dist/atoms/ScrollArea.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 { type Slot } from "../lib/children.js";
+import { type Reactive } from "../lib/props.js";
+export declare const scrollAreaClasses: string;
+export interface ScrollAreaProps {
+    children?: Slot;
+    /** Which axis may scroll. Default `"vertical"`. */
+    orientation?: Reactive<"vertical" | "horizontal" | "both">;
+    class?: Reactive<string>;
+}
+export declare const ScrollArea: (props?: ScrollAreaProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/ScrollArea.js

@@ -0,0 +1,37 @@
+/**
+ * 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 { slot } from "../lib/children.js";
+import { cn } from "../lib/cn.js";
+import { 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 const ScrollArea = component((props) => {
+    const axisClass = () => {
+        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/dist/atoms/Separator.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 { type Reactive } 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 declare const Separator: (props?: SeparatorProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/Separator.js

@@ -0,0 +1,21 @@
+/**
+ * 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 { read, readOr } from "../lib/props.js";
+export const Separator = component((props) => {
+    const orientation = () => 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/dist/atoms/Skeleton.d.ts

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

package/dist/atoms/Skeleton.js

@@ -0,0 +1,18 @@
+/**
+ * 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 { read } from "../lib/props.js";
+export const Skeleton = component((props) => {
+    return html `<div
+		data-slot="skeleton"
+		aria-hidden="true"
+		class="${() => cn("bg-accent animate-pulse rounded-md", read(props.class))}"
+	></div>`;
+});

package/dist/atoms/Slider.d.ts

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

package/dist/atoms/Slider.js

@@ -0,0 +1,40 @@
+/**
+ * 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, 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]");
+function inputValue(event) {
+    const target = event.target;
+    return target instanceof HTMLInputElement ? Number(target.value) : 0;
+}
+export const Slider = component((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) => props.onValueChange?.(inputValue(event), event)}"
+	/>`;
+});

package/dist/atoms/Spinner.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Spinner — an indeterminate activity indicator.
+ *
+ * `role="status"` with a visually hidden label, so a screen reader announces
+ * that something is loading. A bare spinning glyph is invisible to a reader
+ * and the user is left with silence where a sighted user sees motion.
+ *
+ * `motion-reduce:animate-none` stops the rotation for users who asked the
+ * system to reduce motion. The glyph stays, so the indicator does not vanish.
+ */
+import { type Reactive } from "../lib/props.js";
+export interface SpinnerProps {
+    /** Announced to assistive technology. Defaults to `"Loading"`. */
+    label?: Reactive<string>;
+    class?: Reactive<string>;
+}
+export declare const Spinner: (props?: SpinnerProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/Spinner.js

@@ -0,0 +1,20 @@
+/**
+ * Spinner — an indeterminate activity indicator.
+ *
+ * `role="status"` with a visually hidden label, so a screen reader announces
+ * that something is loading. A bare spinning glyph is invisible to a reader
+ * and the user is left with silence where a sighted user sees motion.
+ *
+ * `motion-reduce:animate-none` stops the rotation for users who asked the
+ * system to reduce motion. The glyph stays, so the indicator does not vanish.
+ */
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { LoaderIcon } from "../lib/icons.js";
+import { read, readOr } from "../lib/props.js";
+export const Spinner = component((props) => {
+    return html `<span data-slot="spinner" role="status" class="inline-flex">
+		${LoaderIcon({ class: cn("size-4 animate-spin motion-reduce:animate-none", read(props.class)) })}
+		<span class="sr-only">${() => readOr(props.label, "Loading")}</span>
+	</span>`;
+});

package/dist/atoms/Switch.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Switch — an on/off toggle that applies immediately.
+ *
+ * Same native-input approach as Checkbox, with `role="switch"` so assistive
+ * technology announces "on/off" rather than "checked". The distinction is not
+ * cosmetic: a checkbox is a choice you confirm by submitting, a switch is a
+ * setting that takes effect the moment you flip it.
+ *
+ * The thumb is a sibling translated by `peer-checked:`, not a pseudo-element,
+ * so the travel distance stays expressible in utility classes and a user can
+ * retune the size without leaving the class string.
+ */
+import { type Reactive } from "../lib/props.js";
+export declare const switchTrackClasses = "peer absolute inset-0 size-full appearance-none rounded-full border border-transparent bg-input shadow-xs outline-none transition-colors dark:bg-input/80 checked:bg-primary focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50";
+export interface SwitchProps {
+    id?: string;
+    name?: string;
+    checked?: Reactive<boolean>;
+    disabled?: Reactive<boolean>;
+    label?: Reactive<string | undefined>;
+    class?: Reactive<string>;
+    onCheckedChange?: (checked: boolean, event: Event) => void;
+}
+export declare const Switch: (props?: SwitchProps | undefined) => import("@c9up/aurora").TemplateResult;

package/dist/atoms/Switch.js

@@ -0,0 +1,41 @@
+/**
+ * Switch — an on/off toggle that applies immediately.
+ *
+ * Same native-input approach as Checkbox, with `role="switch"` so assistive
+ * technology announces "on/off" rather than "checked". The distinction is not
+ * cosmetic: a checkbox is a choice you confirm by submitting, a switch is a
+ * setting that takes effect the moment you flip it.
+ *
+ * The thumb is a sibling translated by `peer-checked:`, not a pseudo-element,
+ * so the travel distance stays expressible in utility classes and a user can
+ * retune the size without leaving the class string.
+ */
+import { component, html } from "@c9up/aurora";
+import { cn } from "../lib/cn.js";
+import { accessor, read } from "../lib/props.js";
+export const switchTrackClasses = "peer absolute inset-0 size-full appearance-none rounded-full border border-transparent bg-input shadow-xs outline-none transition-colors dark:bg-input/80 checked:bg-primary focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50";
+function inputChecked(event) {
+    const target = event.target;
+    return target instanceof HTMLInputElement ? target.checked : false;
+}
+export const Switch = component((props) => {
+    return html `<span
+		data-slot="switch"
+		class="${() => cn("relative inline-flex h-[1.15rem] w-8 shrink-0 items-center", read(props.class))}"
+	>
+		<input
+			type="checkbox"
+			role="switch"
+			id="${props.id}"
+			name="${props.name}"
+			aria-label="${accessor(props.label, undefined)}"
+			?disabled="${accessor(props.disabled, false)}"
+			.checked="${accessor(props.checked, false)}"
+			class="${switchTrackClasses}"
+			@change="${(event) => props.onCheckedChange?.(inputChecked(event), event)}"
+		/>
+		<span
+			class="pointer-events-none ml-px block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform peer-checked:translate-x-[calc(100%-2px)] dark:peer-checked:bg-primary-foreground"
+		></span>
+	</span>`;
+});