# @f0rbit/ui v0.1.8 - Full Documentation

> A minimal, composable UI component library for SolidJS

This document contains the complete source code and documentation for LLM consumption.

## Installation

```bash
bun add @f0rbit/ui
```

## Setup

```tsx
import "@f0rbit/ui/styles.css";
import { Button, Card, Modal } from "@f0rbit/ui";
```

---

## Components

### Badge

```tsx
import { JSX, splitProps } from "solid-js";

export type BadgeVariant = "default" | "success" | "error" | "warning" | "info" | "accent";

export interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {
	variant?: BadgeVariant;
}

const variantClasses: Record<BadgeVariant, string> = {
	default: "",
	success: "badge-success",
	error: "badge-error",
	warning: "badge-warning",
	info: "badge-info",
	accent: "badge-accent",
};

export function Badge(props: BadgeProps) {
	const [local, rest] = splitProps(props, ["variant", "class", "children"]);

	const classes = () => {
		const parts = ["badge"];
		const variant = local.variant ?? "default";
		if (variant !== "default") {
			parts.push(variantClasses[variant]);
		}
		if (local.class) {
			parts.push(local.class);
		}
		return parts.join(" ");
	};

	return (
		<span class={classes()} {...rest}>
			{local.children}
		</span>
	);
}

```

---

### Button

```tsx
import { JSX, splitProps } from "solid-js";

export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
export type ButtonSize = "sm" | "md" | "lg";

export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
	variant?: ButtonVariant;
	size?: ButtonSize;
	icon?: boolean;
	label?: string;
	loading?: boolean;
}

const variantClasses: Record<ButtonVariant, string> = {
	primary: "",
	secondary: "btn-secondary",
	ghost: "btn-ghost",
	danger: "btn-danger",
};

const sizeClasses: Record<ButtonSize, string> = {
	sm: "btn-sm",
	md: "",
	lg: "btn-lg",
};

export function Button(props: ButtonProps) {
	const [local, rest] = splitProps(props, ["variant", "size", "icon", "label", "loading", "class", "disabled", "children"]);

	const classes = () => {
		const parts = ["btn"];
		parts.push(variantClasses[local.variant ?? "primary"]);
		if (local.size && local.size !== "md") {
			parts.push(sizeClasses[local.size]);
		}
		if (local.icon) {
			parts.push("btn-icon");
		}
		if (local.class) {
			parts.push(local.class);
		}
		return parts.join(" ");
	};

	return (
		<button
			class={classes()}
			aria-label={local.icon ? local.label : undefined}
			disabled={local.disabled || local.loading}
			{...rest}
		>
			{local.loading ? <span class="spinner spinner-sm" /> : local.children}
		</button>
	);
}

```

---

### Card

```tsx
import { JSX, splitProps } from "solid-js";

export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
	interactive?: boolean;
}

export interface CardHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {}
export interface CardTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {}
export interface CardDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {}
export interface CardContentProps extends JSX.HTMLAttributes<HTMLDivElement> {}
export interface CardFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {}

export function Card(props: CardProps) {
	const [local, rest] = splitProps(props, ["interactive", "class", "children"]);

	const classes = () => {
		const parts = ["card"];
		if (local.interactive) {
			parts.push("card-interactive");
		}
		if (local.class) {
			parts.push(local.class);
		}
		return parts.join(" ");
	};

	return (
		<div class={classes()} {...rest}>
			{local.children}
		</div>
	);
}

export function CardHeader(props: CardHeaderProps) {
	const [local, rest] = splitProps(props, ["class", "children"]);

	return (
		<div class={`card-header ${local.class ?? ""}`.trim()} {...rest}>
			{local.children}
		</div>
	);
}

export function CardTitle(props: CardTitleProps) {
	const [local, rest] = splitProps(props, ["class", "children"]);

	return (
		<h3 class={`card-title ${local.class ?? ""}`.trim()} {...rest}>
			{local.children}
		</h3>
	);
}

export function CardDescription(props: CardDescriptionProps) {
	const [local, rest] = splitProps(props, ["class", "children"]);

	return (
		<p class={`card-description ${local.class ?? ""}`.trim()} {...rest}>
			{local.children}
		</p>
	);
}

export function CardContent(props: CardContentProps) {
	const [local, rest] = splitProps(props, ["class", "children"]);

	return (
		<div class={`card-content ${local.class ?? ""}`.trim()} {...rest}>
			{local.children}
		</div>
	);
}

export function CardFooter(props: CardFooterProps) {
	const [local, rest] = splitProps(props, ["class", "children"]);

	return (
		<div class={`card-footer ${local.class ?? ""}`.trim()} {...rest}>
			{local.children}
		</div>
	);
}

```

---

### Checkbox

```tsx
import { type JSX, splitProps, createEffect, onMount } from "solid-js";

export interface CheckboxProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type"> {
	label?: string;
	description?: string;
	indeterminate?: boolean;
}

export function Checkbox(props: CheckboxProps) {
	const [local, rest] = splitProps(props, ["label", "description", "indeterminate", "class", "disabled", "id"]);
	
	let inputRef: HTMLInputElement | undefined;
	
	const setIndeterminate = () => {
		if (inputRef) inputRef.indeterminate = local.indeterminate ?? false;
	};
	
	onMount(setIndeterminate);
	createEffect(setIndeterminate);
	
	const classes = () => 
		`checkbox ${local.disabled ? "checkbox-disabled" : ""} ${local.class ?? ""}`.trim();
	
	const inputId = () => local.id ?? (local.label ? `checkbox-${local.label.toLowerCase().replace(/\s+/g, "-")}` : undefined);
	
	return (
		<label class={classes()}>
			<input
				ref={inputRef}
				type="checkbox"
				class="checkbox-input"
				id={inputId()}
				disabled={local.disabled}
				{...rest}
			/>
			<span class="checkbox-box" aria-hidden="true">
				<svg class="checkbox-check" viewBox="0 0 12 12" fill="none">
					<path d="M2 6L5 9L10 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
				<span class="checkbox-indeterminate" />
			</span>
			{(local.label || local.description) && (
				<span class="checkbox-content">
					{local.label && <span class="checkbox-label">{local.label}</span>}
					{local.description && <span class="checkbox-description">{local.description}</span>}
				</span>
			)}
		</label>
	);
}

```

---

### Chevron

```tsx
import { type JSX, splitProps } from "solid-js";

export type ChevronFacing = "right" | "down";

export interface ChevronProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
	expanded?: boolean;
	/** Which way the chevron points. Default: "right" */
	facing?: ChevronFacing;
	size?: number | string;
}

export function Chevron(props: ChevronProps) {
	const [local, rest] = splitProps(props, ["expanded", "facing", "size", "class"]);

	const classes = () => {
		const parts = ["chevron"];
		if (local.facing === "down") {
			parts.push("chevron-down");
		}
		if (local.expanded) {
			parts.push("active");
		}
		if (local.class) {
			parts.push(local.class);
		}
		return parts.join(" ");
	};

	const size = () => local.size ?? "1em";

	return (
		<svg class={classes()} viewBox="0 0 24 24" width={size()} height={size()} fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" {...rest}>
			<path d="m9 18 6-6-6-6" />
		</svg>
	);
}

```

---

### Clamp

```tsx
import { type JSX, splitProps, createSignal, Show } from "solid-js";

export interface ClampProps extends JSX.HTMLAttributes<HTMLDivElement> {
	lines?: number;
	showMoreText?: string;
	showLessText?: string;
}

export function Clamp(props: ClampProps) {
	const [local, rest] = splitProps(props, ["lines", "showMoreText", "showLessText", "class", "children"]);

	const lines = () => local.lines ?? 3;
	const showMoreText = () => local.showMoreText ?? "show more";
	const showLessText = () => local.showLessText ?? "show less";

	const [expanded, setExpanded] = createSignal(false);
	const [overflows, setOverflows] = createSignal(false);

	let contentRef: HTMLDivElement | undefined;

	const checkOverflow = () => {
		if (!contentRef) return;
		setOverflows(contentRef.scrollHeight > contentRef.clientHeight);
	};

	const toggle = () => setExpanded(prev => !prev);

	const wrapperClasses = () => `clamp ${local.class ?? ""}`.trim();

	const contentClasses = () => (expanded() ? "clamp-content" : "clamp-content clamp-clamped");

	return (
		<div class={wrapperClasses()} {...rest}>
			<div
				ref={el => {
					contentRef = el;
					requestAnimationFrame(checkOverflow);
				}}
				class={contentClasses()}
				style={`--clamp-lines: ${lines()}`}
			>
				{local.children}
			</div>
			<Show when={overflows() || expanded()}>
				<button class="clamp-toggle" onClick={toggle}>
					{expanded() ? showLessText() : showMoreText()}
				</button>
			</Show>
		</div>
	);
}

```

---

### Collapsible

```tsx
import { type JSX, splitProps, createSignal, Show } from "solid-js";
import { Chevron } from "./Chevron";

export interface CollapsibleProps {
	defaultOpen?: boolean;
	open?: boolean;
	onOpenChange?: (open: boolean) => void;
	children: JSX.Element;
	trigger: JSX.Element | string;
}

export function Collapsible(props: CollapsibleProps) {
	const [local, rest] = splitProps(props, ["defaultOpen", "open", "onOpenChange", "children", "trigger"]);

	const [internalOpen, setInternalOpen] = createSignal(local.defaultOpen ?? false);

	const isControlled = () => local.open !== undefined;
	const isOpen = () => (isControlled() ? local.open! : internalOpen());

	const toggle = () => {
		const next = !isOpen();
		if (!isControlled()) {
			setInternalOpen(next);
		}
		local.onOpenChange?.(next);
	};

	return (
		<div class="collapsible">
			<button class="collapsible-trigger" onClick={toggle}>
				{local.trigger}
				<Chevron class="collapsible-chevron" expanded={isOpen()} />
			</button>
			<Show when={isOpen()}>
				<div class="collapsible-content">{local.children}</div>
			</Show>
		</div>
	);
}

```

---

### Dropdown

```tsx
import { type JSX, splitProps, createSignal, Show, onMount, onCleanup, createContext, useContext } from "solid-js";
import { isServer } from "solid-js/web";

type DropdownContextValue = {
	open: () => boolean;
	setOpen: (value: boolean) => void;
	close: () => void;
};

const DropdownContext = createContext<DropdownContextValue>();

export interface DropdownProps {
	children: JSX.Element;
}

export interface DropdownTriggerProps {
	children: JSX.Element;
}

export interface DropdownMenuProps {
	children: JSX.Element;
}

export interface DropdownItemProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
	onClick?: () => void;
	active?: boolean;
	children: JSX.Element;
}

export function Dropdown(props: DropdownProps) {
	const [open, setOpen] = createSignal(false);
	let containerRef: HTMLDivElement | undefined;

	const close = () => setOpen(false);

	const handleClickOutside = (e: MouseEvent) => {
		if (!containerRef?.contains(e.target as Node)) {
			close();
		}
	};

	const handleKeyDown = (e: KeyboardEvent) => {
		if (e.key === "Escape" && open()) {
			close();
		}
	};

	onMount(() => {
		if (isServer) return;
		document.addEventListener("click", handleClickOutside);
		document.addEventListener("keydown", handleKeyDown);
	});

	onCleanup(() => {
		if (isServer) return;
		document.removeEventListener("click", handleClickOutside);
		document.removeEventListener("keydown", handleKeyDown);
	});

	return (
		<DropdownContext.Provider value={{ open, setOpen, close }}>
			<div ref={el => (containerRef = el)} class="dropdown">
				{props.children}
			</div>
		</DropdownContext.Provider>
	);
}

export function DropdownTrigger(props: DropdownTriggerProps) {
	const ctx = useContext(DropdownContext);

	const handleClick = (e: MouseEvent) => {
		e.stopPropagation();
		ctx?.setOpen(!ctx.open());
	};

	return (
		<div class="dropdown-trigger" onClick={handleClick}>
			{props.children}
		</div>
	);
}

export function DropdownMenu(props: DropdownMenuProps) {
	const ctx = useContext(DropdownContext);

	return (
		<Show when={ctx?.open()}>
			<div class="dropdown-menu">{props.children}</div>
		</Show>
	);
}

export function DropdownItem(props: DropdownItemProps) {
	const [local, rest] = splitProps(props, ["onClick", "active", "children"]);
	const ctx = useContext(DropdownContext);

	const handleClick = () => {
		local.onClick?.();
		ctx?.close();
	};

	const classes = () => `dropdown-item ${local.active ? "active" : ""}`.trim();

	return (
		<button type="button" class={classes()} onClick={handleClick} {...rest}>
			{local.children}
		</button>
	);
}

export function DropdownDivider() {
	return <div class="dropdown-divider" />;
}

```

---

### Empty

```tsx
import { type JSX, splitProps } from "solid-js";

type EmptyProps = {
	icon?: JSX.Element;
	title?: string;
	description?: string;
	children?: JSX.Element;
};

export function Empty(props: EmptyProps): JSX.Element {
	const [local] = splitProps(props, ["icon", "title", "description", "children"]);

	return (
		<div class="empty">
			{local.icon && <div class="empty-icon">{local.icon}</div>}
			{local.title && <h3 class="empty-title">{local.title}</h3>}
			{local.description && <p class="empty-description">{local.description}</p>}
			{local.children}
		</div>
	);
}
export type { EmptyProps };

```

---

### FormField

```tsx
import { type JSX, splitProps, Show } from "solid-js";

export interface FormFieldProps extends JSX.HTMLAttributes<HTMLDivElement> {
	label: string;
	error?: string;
	description?: string;
	required?: boolean;
	children: JSX.Element;
	id?: string;
}

export function FormField(props: FormFieldProps) {
	const [local, rest] = splitProps(props, ["label", "error", "description", "required", "children", "id", "class"]);
	const classes = () => `form-field ${local.error ? "form-field-has-error" : ""} ${local.class ?? ""}`.trim();

	return (
		<div class={classes()} {...rest}>
			<label class="form-field-label" for={local.id}>
				{local.label}
				<Show when={local.required}>
					<span class="form-field-required" aria-hidden="true">*</span>
				</Show>
			</label>
			<Show when={local.description}>
				<span class="form-field-description">{local.description}</span>
			</Show>
			{local.children}
			<Show when={local.error}>
				<span class="form-field-error" role="alert">{local.error}</span>
			</Show>
		</div>
	);
}

```

---

### Input

```tsx
import { type JSX, splitProps } from "solid-js";

export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
	error?: boolean;
}

export interface TextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
	error?: boolean;
}

export interface SelectProps extends JSX.SelectHTMLAttributes<HTMLSelectElement> {
	error?: boolean;
}

export function Input(props: InputProps) {
	const [local, rest] = splitProps(props, ["error", "class", "disabled"]);
	const classes = () => `input ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
	return <input class={classes()} disabled={local.disabled} {...rest} />;
}

export function Textarea(props: TextareaProps) {
	const [local, rest] = splitProps(props, ["error", "class", "disabled"]);
	const classes = () => `textarea ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
	return <textarea class={classes()} disabled={local.disabled} {...rest} />;
}

export function Select(props: SelectProps) {
	const [local, rest] = splitProps(props, ["error", "class", "disabled", "children"]);
	const classes = () => `select ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
	return (
		<select class={classes()} disabled={local.disabled} {...rest}>
			{local.children}
		</select>
	);
}

```

---

### Modal

```tsx
import { type JSX, splitProps, Show, onMount, onCleanup, createContext, useContext } from "solid-js";
import { Portal, isServer } from "solid-js/web";

type ModalContextValue = { onClose: () => void };
const ModalContext = createContext<ModalContextValue>();

export interface ModalProps extends JSX.DialogHtmlAttributes<HTMLDialogElement> {
	open: boolean;
	onClose: () => void;
}

export interface ModalHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {}
export interface ModalTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {}
export interface ModalBodyProps extends JSX.HTMLAttributes<HTMLDivElement> {}
export interface ModalFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {}

export function Modal(props: ModalProps) {
	const [local, rest] = splitProps(props, ["open", "onClose", "class", "children"]);

	const handleKeyDown = (e: KeyboardEvent) => {
		if (e.key === "Escape" && local.open) {
			local.onClose();
		}
	};

	const handleOverlayClick = (e: MouseEvent) => {
		if (e.target === e.currentTarget) {
			local.onClose();
		}
	};

	onMount(() => {
		if (isServer) return;
		document.addEventListener("keydown", handleKeyDown);
	});

	onCleanup(() => {
		if (isServer) return;
		document.removeEventListener("keydown", handleKeyDown);
	});

	const classes = () => `modal ${local.class ?? ""}`.trim();

	return (
		<Show when={local.open}>
			<Portal>
				<ModalContext.Provider value={{ onClose: local.onClose }}>
					<div class="overlay" onClick={handleOverlayClick} onKeyDown={(e: KeyboardEvent) => e.key === "Escape" && local.onClose()} role="presentation">
						<dialog class={classes()} open aria-modal="true" {...rest}>
							{local.children}
						</dialog>
					</div>
				</ModalContext.Provider>
			</Portal>
		</Show>
	);
}

export function ModalHeader(props: ModalHeaderProps) {
	const [local, rest] = splitProps(props, ["class", "children"]);
	const ctx = useContext(ModalContext);

	return (
		<div class={`modal-header ${local.class ?? ""}`.trim()} {...rest}>
			{local.children}
			<Show when={ctx}>
				<button type="button" class="modal-close" onClick={ctx?.onClose} aria-label="Close">
					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<line x1="18" y1="6" x2="6" y2="18" />
						<line x1="6" y1="6" x2="18" y2="18" />
					</svg>
				</button>
			</Show>
		</div>
	);
}

export function ModalTitle(props: ModalTitleProps) {
	const [local, rest] = splitProps(props, ["class", "children"]);

	return (
		<h2 class={`modal-title ${local.class ?? ""}`.trim()} {...rest}>
			{local.children}
		</h2>
	);
}

export function ModalBody(props: ModalBodyProps) {
	const [local, rest] = splitProps(props, ["class", "children"]);

	return (
		<div class={`modal-body ${local.class ?? ""}`.trim()} {...rest}>
			{local.children}
		</div>
	);
}

export function ModalFooter(props: ModalFooterProps) {
	const [local, rest] = splitProps(props, ["class", "children"]);

	return (
		<div class={`modal-footer ${local.class ?? ""}`.trim()} {...rest}>
			{local.children}
		</div>
	);
}

```

---

### Spinner

```tsx
import { type JSX, splitProps } from "solid-js";

export type SpinnerSize = "sm" | "md" | "lg";

export interface SpinnerProps extends JSX.HTMLAttributes<HTMLSpanElement> {
	size?: SpinnerSize;
}

const sizeClasses: Record<SpinnerSize, string> = {
	sm: "spinner-sm",
	md: "",
	lg: "spinner-lg",
};

export function Spinner(props: SpinnerProps) {
	const [local, rest] = splitProps(props, ["size", "class"]);

	const classes = () => {
		const parts = ["spinner"];
		const size = local.size ?? "md";
		if (size !== "md") {
			parts.push(sizeClasses[size]);
		}
		if (local.class) {
			parts.push(local.class);
		}
		return parts.join(" ");
	};

	return <span class={classes()} {...rest} />;
}

```

---

### Stat

```tsx
import { type JSX, splitProps } from "solid-js";

type StatProps = {
	value: string | number;
	label: string;
} & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children">;

export function Stat(props: StatProps): JSX.Element {
	const [local, rest] = splitProps(props, ["value", "label", "class"]);

	return (
		<div class={local.class ? `stat ${local.class}` : "stat"} {...rest}>
			<span class="stat-value">{local.value}</span>
			<span class="stat-label">{local.label}</span>
		</div>
	);
}
export type { StatProps };

```

---

### Status

```tsx
import { type JSX, splitProps } from "solid-js";

export type StatusState = "active" | "inactive" | "error" | "pending";

export interface StatusProps extends JSX.HTMLAttributes<HTMLSpanElement> {
	state: StatusState;
	label?: string;
}

const stateClasses: Record<StatusState, string> = {
	active: "status-active",
	inactive: "status-inactive",
	error: "status-error",
	pending: "status-pending",
};

const defaultLabels: Record<StatusState, string> = {
	active: "Active",
	inactive: "Inactive",
	error: "Error",
	pending: "Pending",
};

export function Status(props: StatusProps) {
	const [local, rest] = splitProps(props, ["state", "label", "class"]);

	const classes = () => {
		const parts = ["status", stateClasses[local.state]];
		if (local.class) {
			parts.push(local.class);
		}
		return parts.join(" ");
	};

	const displayLabel = () => local.label ?? defaultLabels[local.state];

	return (
		<span class={classes()} {...rest}>
			<span class="status-dot" />
			<span>{displayLabel()}</span>
		</span>
	);
}

```

---

### Stepper

```tsx
import { type JSX, splitProps, For, Show, createContext, useContext } from "solid-js";

export type StepStatus = "completed" | "current" | "upcoming";

type StepperContextValue = {
	registerStep: () => number;
};

const StepperContext = createContext<StepperContextValue>();

export interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {
	orientation?: "horizontal" | "vertical";
	children: JSX.Element;
}

export interface StepProps extends JSX.HTMLAttributes<HTMLDivElement> {
	title: string;
	description?: string;
	icon?: JSX.Element;
	status?: StepStatus;
	children?: JSX.Element;
	/** Explicit step number (optional, auto-increments if not provided) */
	number?: number;
	/** Explicit orientation (optional, uses context if not provided) */
	orientation?: "horizontal" | "vertical";
}

const statusClasses: Record<StepStatus, string> = {
	completed: "step-completed",
	current: "step-current",
	upcoming: "step-upcoming",
};

function CheckIcon() {
	return (
		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
			<polyline points="13 4 6 12 3 9" />
		</svg>
	);
}

type StepContextValue = {
	orientation: () => "horizontal" | "vertical";
};

const StepContext = createContext<StepContextValue>();

export function Step(props: StepProps) {
	const [local, rest] = splitProps(props, ["title", "description", "icon", "status", "class", "children", "number", "orientation"]);
	const stepperCtx = useContext(StepperContext);
	const stepCtx = useContext(StepContext);

	const stepNumber = local.number ?? stepperCtx?.registerStep() ?? 1;
	const orientation = () => local.orientation ?? stepCtx?.orientation() ?? "vertical";

	const status = () => local.status ?? "upcoming";

	const isVertical = () => orientation() === "vertical";

	const classes = () => {
		const parts = ["step", statusClasses[status()]];
		if (isVertical()) {
			parts.push("vertical-connector-item");
		}
		if (local.class) {
			parts.push(local.class);
		}
		return parts.join(" ");
	};

	const indicatorClasses = () => {
		const parts = ["step-indicator"];
		if (isVertical()) {
			parts.push("vertical-indicator");
		}
		return parts.join(" ");
	};

	const contentClasses = () => {
		const parts = ["step-content"];
		if (isVertical()) {
			parts.push("vertical-content");
		}
		return parts.join(" ");
	};

	const connectorClasses = () => {
		const parts = ["step-connector"];
		if (isVertical()) {
			parts.push("vertical-connector");
		}
		return parts.join(" ");
	};

	const indicator = () => {
		if (status() === "completed") {
			return <CheckIcon />;
		}
		if (local.icon) {
			return local.icon;
		}
		return stepNumber;
	};

	return (
		<div class={classes()} {...rest}>
			<div class={indicatorClasses()}>{indicator()}</div>
			<div class={contentClasses()}>
				<div class="step-title">{local.title}</div>
				<Show when={local.description}>
					<div class="step-description">{local.description}</div>
				</Show>
				<Show when={local.children}>
					<div class="step-body">{local.children}</div>
				</Show>
			</div>
			<div class={connectorClasses()} />
		</div>
	);
}

export function Stepper(props: StepperProps) {
	const [local, rest] = splitProps(props, ["orientation", "class", "children"]);

	let stepCounter = 0;
	const registerStep = () => ++stepCounter;

	const orientation = () => local.orientation ?? "horizontal";

	const classes = () => {
		const parts = ["stepper", orientation() === "horizontal" ? "stepper-horizontal" : "stepper-vertical"];
		if (local.class) {
			parts.push(local.class);
		}
		return parts.join(" ");
	};

	return (
		<StepperContext.Provider value={{ registerStep }}>
			<StepContext.Provider value={{ orientation }}>
				<div class={classes()} {...rest}>
					{local.children}
				</div>
			</StepContext.Provider>
		</StepperContext.Provider>
	);
}

```

---

### Tabs

```tsx
import { type JSX, splitProps, onMount, onCleanup, createSignal } from "solid-js";

/**
 * A tab container component that manages tab selection and panel visibility.
 *
 * Uses DOM-based discovery via data attributes, making it compatible with
 * Astro's island architecture where each child component hydrates independently.
 *
 * @example Basic usage in SolidJS
 * ```tsx
 * <Tabs defaultValue="tab1">
 *   <TabList>
 *     <Tab value="tab1">First Tab</Tab>
 *     <Tab value="tab2">Second Tab</Tab>
 *   </TabList>
 *   <TabPanel value="tab1">First panel content</TabPanel>
 *   <TabPanel value="tab2">Second panel content</TabPanel>
 * </Tabs>
 * ```
 *
 * @example Usage in Astro MDX (each component needs client:load)
 * ```mdx
 * <Tabs defaultValue="tab1" client:load>
 *   <TabList client:load>
 *     <Tab value="tab1" client:load>First Tab</Tab>
 *     <Tab value="tab2" client:load>Second Tab</Tab>
 *   </TabList>
 *   <TabPanel value="tab1" client:load>First panel content</TabPanel>
 *   <TabPanel value="tab2" client:load>Second panel content</TabPanel>
 * </Tabs>
 * ```
 *
 * @example Creating a wrapper to avoid multiple client:load directives
 * ```tsx
 * // MyTabs.tsx - your custom wrapper
 * import { Tabs, TabList, Tab, TabPanel } from '@f0rbit/ui';
 *
 * export function MyTabs() {
 *   return (
 *     <Tabs defaultValue="tab1">
 *       <TabList>
 *         <Tab value="tab1">First</Tab>
 *         <Tab value="tab2">Second</Tab>
 *       </TabList>
 *       <TabPanel value="tab1">Content 1</TabPanel>
 *       <TabPanel value="tab2">Content 2</TabPanel>
 *     </Tabs>
 *   );
 * }
 *
 * // Then in Astro: <MyTabs client:load />
 * ```
 */
export interface TabsProps extends JSX.HTMLAttributes<HTMLDivElement> {
	/** The value of the initially selected tab */
	defaultValue?: string;
	children: JSX.Element;
}

export function Tabs(props: TabsProps) {
	const [local, rest] = splitProps(props, ["defaultValue", "children", "class"]);
	let containerRef: HTMLDivElement | undefined;
	const [activeTab, setActiveTab] = createSignal(local.defaultValue ?? "");

	const updateTabs = (value: string) => {
		if (!containerRef) return;

		const tabs = containerRef.querySelectorAll<HTMLButtonElement>("[data-tab-value]");
		tabs.forEach((tab) => {
			const isActive = tab.dataset.tabValue === value;
			tab.setAttribute("aria-selected", String(isActive));
			tab.setAttribute("tabindex", isActive ? "0" : "-1");
			tab.classList.toggle("active", isActive);
		});

		const panels = containerRef.querySelectorAll<HTMLDivElement>("[data-panel-value]");
		panels.forEach((panel) => {
			const isActive = panel.dataset.panelValue === value;
			panel.hidden = !isActive;
		});
	};

	const initializeTabs = () => {
		if (!containerRef) return;

		let value = activeTab();
		if (!value) {
			const firstTab = containerRef.querySelector<HTMLButtonElement>("[data-tab-value]");
			value = firstTab?.dataset.tabValue ?? "";
			if (value) setActiveTab(value);
		}

		if (value) updateTabs(value);
	};

	onMount(() => {
		if (!containerRef) return;

		// Use event delegation for clicks - handles dynamically added children
		containerRef.addEventListener("click", (e) => {
			const tab = (e.target as HTMLElement).closest<HTMLButtonElement>("[data-tab-value]");
			if (tab?.dataset.tabValue) {
				setActiveTab(tab.dataset.tabValue);
				updateTabs(tab.dataset.tabValue);
			}
		});

		// Initialize with any children already present
		initializeTabs();

		// Watch for new children being added (e.g., Astro islands hydrating)
		const observer = new MutationObserver(() => {
			initializeTabs();
		});

		observer.observe(containerRef, {
			childList: true,
			subtree: true,
		});

		onCleanup(() => observer.disconnect());
	});

	const classes = () => `tabs ${local.class ?? ""}`.trim();

	return (
		<div ref={containerRef} class={classes()} data-default-value={local.defaultValue} {...rest}>
			{local.children}
		</div>
	);
}

/**
 * Container for Tab buttons. Provides the tablist role for accessibility.
 *
 * In Astro, requires `client:load` directive.
 */
export interface TabListProps extends JSX.HTMLAttributes<HTMLDivElement> {
	children: JSX.Element;
}

export function TabList(props: TabListProps) {
	const [local, rest] = splitProps(props, ["children", "class"]);
	const classes = () => `tab-list ${local.class ?? ""}`.trim();

	return (
		<div class={classes()} role="tablist" {...rest}>
			{local.children}
		</div>
	);
}

/**
 * A tab button that switches the active panel when clicked.
 *
 * The `value` prop must match a corresponding `TabPanel` value.
 * In Astro, requires `client:load` directive.
 */
export interface TabProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
	/** Unique identifier that links this tab to its panel */
	value: string;
	children: JSX.Element;
}

export function Tab(props: TabProps) {
	const [local, rest] = splitProps(props, ["value", "children", "class"]);
	const classes = () => `tab ${local.class ?? ""}`.trim();

	return (
		<button
			type="button"
			role="tab"
			aria-selected="false"
			tabIndex={-1}
			class={classes()}
			data-tab-value={local.value}
			{...rest}
		>
			{local.children}
		</button>
	);
}

/**
 * Content panel that is shown when its corresponding Tab is active.
 *
 * The `value` prop must match a corresponding `Tab` value.
 * Panels are hidden by default and shown when their tab is selected.
 * In Astro, requires `client:load` directive.
 */
export interface TabPanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
	/** Unique identifier that links this panel to its tab */
	value: string;
	children: JSX.Element;
}

export function TabPanel(props: TabPanelProps) {
	const [local, rest] = splitProps(props, ["value", "children", "class"]);
	const classes = () => `tab-panel ${local.class ?? ""}`.trim();

	return (
		<div class={classes()} role="tabpanel" data-panel-value={local.value} hidden {...rest}>
			{local.children}
		</div>
	);
}

```

---

### Timeline

```tsx
import { type JSX, splitProps, For, Show } from "solid-js";

export type TimelineItemVariant = "default" | "success" | "error" | "warning" | "info";

export interface TimelineItem {
	id: string | number;
	icon?: JSX.Element;
	title: string | JSX.Element;
	description?: string | JSX.Element;
	timestamp?: string | JSX.Element;
	variant?: TimelineItemVariant;
}

export interface TimelineProps extends JSX.HTMLAttributes<HTMLDivElement> {
	items: TimelineItem[];
}

const variantClasses: Record<TimelineItemVariant, string> = {
	default: "",
	success: "timeline-item-success",
	error: "timeline-item-error",
	warning: "timeline-item-warning",
	info: "timeline-item-info",
};

function DefaultDot() {
	return <div class="timeline-dot" />;
}

export function Timeline(props: TimelineProps) {
	const [local, rest] = splitProps(props, ["items", "class"]);

	const classes = () => {
		const parts = ["timeline"];
		if (local.class) parts.push(local.class);
		return parts.join(" ");
	};

	return (
		<div class={classes()} {...rest}>
			<For each={local.items}>
				{(item, index) => (
					<div
						class={`timeline-item vertical-connector-item ${variantClasses[item.variant ?? "default"]}`}
					>
						<div class="timeline-indicator vertical-indicator">
							<Show when={item.icon} fallback={<DefaultDot />}>
								{item.icon}
							</Show>
						</div>
						<div class="vertical-connector" />
						<div class="timeline-content vertical-content">
							<div class="timeline-title">{item.title}</div>
							<Show when={item.description}>
								<div class="timeline-description">{item.description}</div>
							</Show>
							<Show when={item.timestamp}>
								<div class="timeline-timestamp">{item.timestamp}</div>
							</Show>
						</div>
					</div>
				)}
			</For>
		</div>
	);
}

```

---

### Toggle

```tsx
import { type JSX, splitProps } from "solid-js";

export interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
	label?: string;
	description?: string;
	size?: "sm" | "md";
}

export function Toggle(props: ToggleProps) {
	const [local, rest] = splitProps(props, ["label", "description", "size", "class", "disabled"]);
	const size = () => local.size ?? "md";
	const classes = () => 
		`toggle ${size() === "sm" ? "toggle-sm" : ""} ${local.disabled ? "toggle-disabled" : ""} ${local.class ?? ""}`.trim();

	return (
		<label class={classes()}>
			<input type="checkbox" class="toggle-input" role="switch" disabled={local.disabled} {...rest} />
			<span class="toggle-track">
				<span class="toggle-knob" />
			</span>
			{(local.label || local.description) && (
				<span class="toggle-content">
					{local.label && <span class="toggle-label">{local.label}</span>}
					{local.description && <span class="toggle-description">{local.description}</span>}
				</span>
			)}
		</label>
	);
}

```

---

## Styles

### tokens.css

```css
@layer tokens {
	:root {
		--bg: oklch(97% 0.02 290);
		--bg-alt: oklch(96% 0.01 290);
		--border: oklch(91% 0.01 290);

		--fg: oklch(1% 0.02 290);
		--fg-muted: oklch(25% 0.02 290);
		--fg-subtle: oklch(35% 0.02 290);
		--fg-faint: oklch(50% 0.03 290);

		--accent: oklch(46% 0.015 300);
		--accent-fg: var(--bg);

		--success: oklch(0.95 0.05 150);
		--success-fg: oklch(0.35 0.15 150);
		--error: oklch(0.95 0.05 20);
		--error-fg: oklch(0.45 0.15 20);
		--warning: oklch(0.95 0.08 85);
		--warning-fg: oklch(0.45 0.15 85);
		--info: oklch(0.95 0.05 240);
		--info-fg: oklch(0.4 0.15 240);

		--font: "neue-haas-grotesk-text", "Inter", Helvetica, sans-serif;
		--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
		--font-semibold: 600;

		--text-xs: 0.75rem;
		--text-xs-lh: 1rem;
		--text-sm: 0.875rem;
		--text-sm-lh: 1.25rem;
		--text-base: 1rem;
		--text-base-lh: 1.5rem;
		--text-lg: 1.125rem;
		--text-lg-lh: 1.75rem;
		--text-xl: 1.25rem;
		--text-xl-lh: 1.75rem;
		--text-2xl: 1.5rem;
		--text-2xl-lh: 2rem;
		--text-3xl: 1.875rem;
		--text-3xl-lh: 2.25rem;
		--text-4xl: 2.25rem;
		--text-4xl-lh: 2.5rem;

		--leading-normal: 1.5;

		--space-xs: 0.25rem;
		--space-sm: 0.35rem;
		--space-md: 0.75rem;
		--space-lg: 1.5rem;
		--space-xl: 2.5rem;

		--radius: 0.25rem;
		--radius-lg: 0.5rem;

		--shadow: 0 1px 3px rgb(0 0 0 / 0.1);
		--shadow-lg: 0 10px 25px rgb(0 0 0 / 0.15);

		--transition: 150ms ease;

		--hover-filter: brightness(0.8);
	}

	/* Dark mode: system preference or explicit data-theme */
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) {
			--bg: oklch(21% 0.015 280);
			--bg-alt: oklch(27% 0.02 290);
			--border: oklch(32% 0.02 290);

			--fg: oklch(100% 0 0);
			--fg-muted: oklch(85% 0.02 290);
			--fg-subtle: oklch(75% 0.02 290);
			--fg-faint: oklch(60% 0.03 290);

			--accent: oklch(70% 0.035 280);

			--success: oklch(0.35 0.05 150);
			--success-fg: oklch(0.85 0.1 150);
			--error: oklch(0.35 0.05 20);
			--error-fg: oklch(0.85 0.1 20);
			--warning: oklch(0.35 0.08 85);
			--warning-fg: oklch(0.85 0.12 85);
			--info: oklch(0.35 0.05 240);
			--info-fg: oklch(0.85 0.1 240);

			--shadow: 0 1px 3px rgb(0 0 0 / 0.3);
			--shadow-lg: 0 10px 25px rgb(0 0 0 / 0.4);

			--hover-filter: brightness(1.2);
		}
	}

	/* Explicit dark theme override */
	:root[data-theme="dark"] {
		--bg: oklch(21% 0.015 280);
		--bg-alt: oklch(27% 0.02 290);
		--border: oklch(32% 0.02 290);

		--fg: oklch(100% 0 0);
		--fg-muted: oklch(85% 0.02 290);
		--fg-subtle: oklch(75% 0.02 290);
		--fg-faint: oklch(60% 0.03 290);

		--accent: oklch(70% 0.035 280);

		--success: oklch(0.35 0.05 150);
		--success-fg: oklch(0.85 0.1 150);
		--error: oklch(0.35 0.05 20);
		--error-fg: oklch(0.85 0.1 20);
		--warning: oklch(0.35 0.08 85);
		--warning-fg: oklch(0.85 0.12 85);
		--info: oklch(0.35 0.05 240);
		--info-fg: oklch(0.85 0.1 240);

		--shadow: 0 1px 3px rgb(0 0 0 / 0.3);
		--shadow-lg: 0 10px 25px rgb(0 0 0 / 0.4);

		--hover-filter: brightness(1.2);
	}
}

```

---

### reset.css

```css
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	body {
		line-height: var(--leading-normal, 1.5);
		-webkit-font-smoothing: antialiased;
		font-family: var(--font);
		background: var(--bg);
		color: var(--fg-muted);
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: var(--fg);
		font-weight: var(--font-semibold, 600);
	}

	a {
		color: var(--accent);
		text-decoration: none;
		transition: filter var(--transition);
	}

	a:hover {
		filter: var(--hover-filter);
	}

	ul,
	ol {
		list-style: none;
		padding: 0;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 2px;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}
}

```

---

### utilities.css

```css
@layer utilities {
	.stack {
		display: flex;
		flex-direction: column;
		gap: var(--stack-gap, var(--space-md));
	}

	.stack-sm {
		--stack-gap: var(--space-sm);
	}

	.stack-lg {
		--stack-gap: var(--space-lg);
	}

	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--row-gap, var(--space-sm));
	}

	.row-sm {
		--row-gap: var(--space-xs);
	}

	.row-lg {
		--row-gap: var(--space-md);
	}

	.row-between {
		justify-content: space-between;
	}

	.row-end {
		justify-content: flex-end;
	}

	.row-start {
		align-items: flex-start;
	}

	.cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-sm);
		align-items: center;
	}

	.center {
		max-width: var(--center-width, 65ch);
		margin-inline: auto;
		padding-inline: var(--space-md);
	}

	.center-narrow {
		--center-width: 45ch;
	}

	.center-wide {
		--center-width: 90ch;
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 250px), 1fr));
		gap: var(--space-md);
	}

	.grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.text-primary {
		color: var(--fg);
	}

	.text-muted {
		color: var(--fg-muted);
	}

	.text-subtle {
		color: var(--fg-subtle);
	}

	.text-faint {
		color: var(--fg-faint);
	}

	.text-accent {
		color: var(--accent);
	}

	.text-xs {
		font-size: var(--text-xs);
		line-height: var(--text-xs-lh);
	}

	.text-sm {
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
	}

	.text-base {
		font-size: var(--text-base);
		line-height: var(--text-base-lh);
	}

	.text-lg {
		font-size: var(--text-lg);
		line-height: var(--text-lg-lh);
	}

	.text-xl {
		font-size: var(--text-xl);
		line-height: var(--text-xl-lh);
	}

	.text-2xl {
		font-size: var(--text-2xl);
		line-height: var(--text-2xl-lh);
	}

	.text-3xl {
		font-size: var(--text-3xl);
		line-height: var(--text-3xl-lh);
	}

	.text-4xl {
		font-size: var(--text-4xl);
		line-height: var(--text-4xl-lh);
	}

	.font-medium {
		font-weight: 500;
	}

	.font-bold {
		font-weight: 700;
	}

	.font-mono {
		font-family: var(--font-mono);
	}

	.truncate {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.list {
		padding-left: var(--space-lg);
	}

	.list li {
		position: relative;
		padding-left: var(--space-sm);
		margin-bottom: var(--space-xs);
	}

	.list li::marker {
		color: var(--fg-faint);
	}

	.list li:last-child {
		margin-bottom: 0;
	}

	ul.list {
		list-style-type: disc;
	}

	ul.list ul {
		list-style-type: circle;
		margin-top: var(--space-xs);
		padding-left: var(--space-lg);
	}

	ul.list ul ul {
		list-style-type: square;
	}

	ol.list {
		list-style-type: decimal;
	}

	ol.list ol {
		list-style-type: lower-alpha;
		margin-top: var(--space-xs);
		padding-left: var(--space-lg);
	}

	ol.list ol ol {
		list-style-type: lower-roman;
	}

	.list li > ul,
	.list li > ol {
		margin-top: var(--space-xs);
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	.hidden {
		display: none;
	}

	.hover-reveal {
		opacity: 0;
		transition: opacity var(--transition);
	}

	*:hover > .hover-reveal,
	*:focus-within > .hover-reveal {
		opacity: 1;
	}

	.interactive {
		--_hover-border: var(--hover-border, var(--fg-faint));
		transition: border-color var(--transition);
	}

	.interactive:hover {
		border-color: var(--_hover-border);
	}

	.interactive-color {
		--_hover-color: var(--hover-color, var(--fg));
		transition: color var(--transition);
	}

	.interactive-color:hover {
		color: var(--_hover-color);
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes pulse {
		50% {
			opacity: 0.5;
		}
	}

	@keyframes fade-in {
		from {
			opacity: 0;
		}
	}

	.animate-spin {
		animation: spin 1s linear infinite;
	}

	.animate-pulse {
		animation: pulse 2s ease-in-out infinite;
	}

	@media (prefers-reduced-motion: reduce) {
		.animate-spin,
		.animate-pulse {
			animation: none;
		}
	}

	@media (max-width: 768px) {
		.hide-mobile {
			display: none;
		}

		.grid-2,
		.grid-3,
		.grid-4 {
			grid-template-columns: 1fr;
		}
	}
}

```

---

### components.css

```css
@layer components {
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-sm);
		padding: var(--space-sm) var(--space-md);
		font-size: var(--text-sm);
		font-weight: 500;
		line-height: var(--text-sm-lh);
		border-radius: var(--radius);
		border: 1px solid var(--border);
		cursor: pointer;
		transition: background var(--transition), border-color var(--transition), color var(--transition), filter var(--transition);
		white-space: nowrap;
		padding-bottom: calc(var(--space-sm) - 2px);
		background: transparent;
		color: var(--accent);
	}

	.btn:hover:not(:disabled) {
		border-color: var(--fg-faint);
	}

	.btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.btn-secondary {
		background: var(--bg-alt);
		color: var(--fg-muted);
		border-color: var(--border);
	}

	.btn-secondary:hover:not(:disabled) {
		border-color: var(--fg-faint);
	}

	.btn-ghost {
		background: transparent;
		color: var(--fg-muted);
		border-color: transparent;
	}

	.btn-ghost:hover:not(:disabled) {
		border-color: var(--border);
	}

	.btn-danger {
		background: var(--error);
		color: var(--error-fg);
	}

	.btn-icon {
		padding: var(--space-sm);
		aspect-ratio: 1;
	}

	.btn-sm {
		padding: var(--space-xs) var(--space-sm);
		font-size: var(--text-xs);
	}

	.btn-lg {
		padding: var(--space-sm) var(--space-lg);
		font-size: var(--text-base);
		line-height: var(--text-base-lh);
	}

	.badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		padding: 2px var(--space-sm);
		font-size: var(--text-xs);
		font-weight: 500;
		border-radius: 9999px;
		background: var(--bg-alt);
		color: var(--fg-muted);
		border: 1px solid var(--border);
	}

	.badge-success {
		background: var(--success);
		color: var(--success-fg);
		border-color: transparent;
	}

	.badge-error {
		background: var(--error);
		color: var(--error-fg);
		border-color: transparent;
	}

	.badge-warning {
		background: var(--warning);
		color: var(--warning-fg);
		border-color: transparent;
	}

	.badge-info {
		background: var(--info);
		color: var(--info-fg);
		border-color: transparent;
	}

	.badge-accent {
		background: var(--accent);
		color: var(--accent-fg);
		border-color: transparent;
	}

	.card {
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		padding: var(--space-md);
		box-shadow: var(--shadow);
	}

	.card-flat {
		box-shadow: none;
	}

	.card-icon {
		color: var(--fg-muted);
		line-height: 0;
	}

	.card-interactive {
		cursor: pointer;
		transition: border-color var(--transition), box-shadow var(--transition);
	}

	.card-interactive:hover {
		border-color: var(--fg-faint);
		box-shadow: var(--shadow-lg);
	}

	.card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--space-sm);
	}

	.card-title {
		font-size: var(--text-base);
		line-height: var(--text-base-lh);
		font-weight: 600;
		color: var(--fg);
		margin: 0;
	}

	.card-description {
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
		color: var(--fg-subtle);
		margin: 0;
	}

	.card-content {
		/* Content wrapper - card already provides padding */
	}

	.card-footer {
		display: flex;
		justify-content: flex-end;
		gap: var(--space-sm);
		margin-top: var(--space-md);
		padding-top: var(--space-md);
		border-top: 1px solid var(--border);
	}

	.input,
	.textarea,
	.select {
		display: block;
		width: 100%;
		padding: var(--space-sm);
		font-size: var(--text-sm);
		color: var(--fg);
		background: var(--bg-alt);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		transition: border-color var(--transition);
	}

	.input::placeholder,
	.textarea::placeholder {
		color: var(--fg-faint);
	}

	.input:focus,
	.textarea:focus,
	.select:focus {
		outline: none;
		border-color: var(--accent);
	}

	.input:disabled,
	.textarea:disabled,
	.select:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.input-error {
		border-color: var(--error-fg);
	}

	.textarea {
		min-height: 80px;
		resize: vertical;
	}

	.select {
		appearance: none;
		padding-right: var(--space-lg);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right var(--space-sm) center;
	}

	.label {
		display: block;
		font-size: var(--text-sm);
		font-weight: 500;
		color: var(--fg-muted);
		margin-bottom: var(--space-xs);
	}

	.form-error {
		font-size: var(--text-sm);
		color: var(--error-fg);
	}

	.overlay {
		position: fixed;
		inset: 0;
		background: rgb(0 0 0 / 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-md);
		z-index: 100;
	}

	.modal {
		position: relative;
		margin: 0;
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
		width: 100%;
		max-width: 480px;
		max-height: calc(100vh - var(--space-xl));
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-md);
		border-bottom: 1px solid var(--border);
	}

	.modal-title {
		font-size: var(--text-lg);
		line-height: var(--text-lg-lh);
		font-weight: 600;
		color: var(--fg);
		margin: 0;
	}

	.modal-close {
		padding: var(--space-xs);
		color: var(--fg-faint);
		background: transparent;
		border: 1px solid transparent;
		border-radius: var(--radius);
		cursor: pointer;
		transition: border-color var(--transition), color var(--transition);
	}

	.modal-close:hover {
		color: var(--fg);
		border-color: var(--border);
	}

	.modal-body {
		padding: var(--space-md);
		overflow-y: auto;
	}

	.modal-footer {
		display: flex;
		justify-content: flex-end;
		gap: var(--space-sm);
		padding: var(--space-md);
		border-top: 1px solid var(--border);
	}

	.stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--space-md);
		border: 1px solid var(--border);
		border-radius: var(--radius);
	}

	.stat-value {
		font-size: var(--text-xl);
		line-height: var(--text-xl-lh);
		font-weight: 600;
		color: var(--fg);
	}

	.stat-label {
		font-size: var(--text-xs);
		color: var(--fg-faint);
	}

	.status {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		font-size: var(--text-xs);
		padding: 2px var(--space-sm);
		border-radius: 9999px;
		background: var(--bg-alt);
		border: 1px solid var(--border);
	}

	.status-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: currentColor;
	}

	.status-active {
		color: var(--success-fg);
	}

	.status-inactive {
		color: var(--fg-faint);
	}

	.status-error {
		color: var(--error-fg);
	}

	.status-pending {
		color: var(--warning-fg);
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--space-xl) var(--space-md);
		color: var(--fg-faint);
	}

	.empty-icon {
		margin-bottom: var(--space-md);
		opacity: 0.5;
	}

	.empty-title {
		font-size: var(--text-lg);
		line-height: var(--text-lg-lh);
		font-weight: 500;
		color: var(--fg-muted);
		margin-bottom: var(--space-sm);
	}

	.empty-description {
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
		max-width: 400px;
		margin-bottom: var(--space-md);
	}

	.spinner {
		width: 16px;
		height: 16px;
		border: 2px solid var(--border);
		border-top-color: var(--accent);
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	.spinner-sm {
		width: 12px;
		height: 12px;
		border-width: 1.5px;
	}

	.spinner-lg {
		width: 24px;
		height: 24px;
		border-width: 3px;
	}

	.chevron {
		transition: transform var(--transition);
		color: var(--fg-faint);
	}

	.chevron.active {
		transform: rotate(90deg);
	}

	.chevron-down {
		transform: rotate(90deg);
	}

	.chevron-down.active {
		transform: rotate(180deg);
	}

	.dropdown-menu {
		position: absolute;
		top: calc(100% + var(--space-xs));
		right: 0;
		min-width: 100%;
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
		padding: var(--space-xs) 0;
		z-index: 100;
	}

	.dropdown-item {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		width: 100%;
		padding: var(--space-sm);
		padding-left: calc(var(--space-sm) + 2px);
		font-size: var(--text-sm);
		color: var(--fg-muted);
		background: transparent;
		border: none;
		border-left: 2px solid transparent;
		cursor: pointer;
		text-align: left;
		transition: border-color var(--transition), color var(--transition);
	}

	.dropdown-item:hover {
		border-left-color: var(--accent);
		color: var(--fg);
	}

	.dropdown {
		position: relative;
		display: inline-block;
	}

	.dropdown-trigger {
		display: inline-flex;
	}

	.dropdown-item.active {
		color: var(--fg);
		font-weight: 500;
	}

	.dropdown-divider {
		height: 1px;
		background: var(--border);
		margin: var(--space-xs) 0;
	}

	.clamp {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
	}

	.clamp-content {
		line-height: 1.5;
	}

	.clamp-clamped {
		display: -webkit-box;
		-webkit-line-clamp: var(--clamp-lines, 3);
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.clamp-toggle {
		background: none;
		border: none;
		padding: 0;
		font-size: var(--text-sm);
		color: var(--accent);
		cursor: pointer;
		width: fit-content;
		transition: filter var(--transition);
	}

	.clamp-toggle:hover {
		filter: var(--hover-filter);
	}

	.collapsible {
		display: flex;
		flex-direction: column;
	}

	.collapsible-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-sm);
		width: 100%;
		padding: var(--space-sm) 0;
		background: none;
		border: none;
		cursor: pointer;
		font-size: var(--text-sm);
		font-weight: 500;
		color: var(--fg-muted);
		text-align: left;
		transition: color var(--transition);
	}

	.collapsible-trigger:hover {
		color: var(--fg);
	}

	.collapsible-chevron {
		flex-shrink: 0;
		color: var(--fg-faint);
		transition: transform var(--transition);
	}

	.collapsible-chevron.active {
		transform: rotate(90deg);
	}

	.collapsible-content {
		padding: var(--space-sm) 0;
	}

	/* Shared vertical connector pattern - used by Stepper and Timeline */
	.vertical-connector {
		position: absolute;
		left: 16px;
		top: 32px;
		bottom: 0;
		width: 1px;
		background: var(--border);
	}

	.vertical-connector-item:last-child .vertical-connector {
		display: none;
	}

	.vertical-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		flex-shrink: 0;
		position: relative;
		z-index: 1;
	}

	.vertical-content {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding-bottom: var(--space-md);
		min-width: 0;
		flex: 1;
	}

	.vertical-connector-item:last-child .vertical-content {
		padding-bottom: 0;
	}

	.stepper {
		display: flex;
	}

	.stepper-horizontal {
		flex-direction: row;
		align-items: flex-start;
	}

	.stepper-vertical {
		flex-direction: column;
	}

	.step {
		display: flex;
		align-items: flex-start;
		gap: var(--space-sm);
		flex: 1;
		position: relative;
	}

	.stepper-vertical .step {
		flex-direction: row;
	}

	.stepper-horizontal .step {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.step-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		flex-shrink: 0;
		border-radius: 50%;
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
		background: transparent;
		color: var(--fg-faint);
		border: 1px solid var(--border);
	}

	.step-current .step-indicator {
		color: var(--accent);
		border-color: var(--accent);
	}

	.step-completed .step-indicator {
		color: var(--success-fg);
		border-color: var(--success);
	}

	.step-connector {
		position: absolute;
		background: var(--border);
	}

	.stepper-horizontal .step-connector {
		top: 16px;
		left: calc(50% + 16px);
		right: calc(-50% + 16px);
		height: 1px;
	}

	.stepper-horizontal .step:last-child .step-connector {
		display: none;
	}

	.step-completed .step-connector {
		background: var(--success);
	}

	.step-content {
		width: 100%;
		padding-top: var(--space-sm);
	}

	.step-title {
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
		font-weight: 500;
		color: var(--fg);
	}

	.step-current .step-title {
		color: var(--fg);
	}

	.step-completed .step-title {
		color: var(--fg-muted);
	}

	.step-upcoming .step-title {
		color: var(--fg-faint);
	}

	.step-description {
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
		color: var(--fg-muted);
	}

	.step-body {
		margin-top: var(--space-sm);
	}

	/* Tabs */
	.tabs {
		display: flex;
		flex-direction: column;
	}

	.tab-list {
		display: flex;
		gap: 0;
		border-bottom: 1px solid var(--border);
		position: relative;
	}

	.tab {
		padding: var(--space-sm) var(--space-md);
		background: transparent;
		border: 1px solid transparent;
		border-bottom: none;
		cursor: pointer;
		font-size: var(--text-sm);
		color: var(--fg-muted);
		border-radius: var(--radius) var(--radius) 0 0;
		margin-bottom: -1px !important;
		transition: color var(--transition), border-color var(--transition);
	}

	.tab:hover {
		color: var(--fg-subtle);
	}

	.tab.active {
		background: var(--bg);
		border-color: var(--border);
		border-bottom-color: var(--bg);
		color: var(--fg);
	}

	.tab-panel {
		padding: var(--space-md) 0;
	}

	/* Checkbox */
	.checkbox {
		display: inline-flex;
		align-items: flex-start;
		gap: var(--space-sm);
		cursor: pointer;
		user-select: none;
	}

	.checkbox-disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.checkbox-input {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
		pointer-events: none;
	}

	.checkbox-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.125em;
		height: 1.125em;
		flex-shrink: 0;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		background: var(--bg-alt);
		transition: border-color var(--transition), background var(--transition);
	}

	.checkbox:hover:not(.checkbox-disabled) .checkbox-box {
		border-color: var(--fg-faint);
	}

	.checkbox-input:focus-visible + .checkbox-box {
		outline: 2px solid var(--accent);
		outline-offset: 2px;
	}

	.checkbox-input:checked + .checkbox-box {
		background: var(--accent);
		border-color: var(--accent);
	}

	.checkbox-check {
		width: 0.75em;
		height: 0.75em;
		color: var(--accent-fg);
		opacity: 0;
		transform: scale(0.8);
		transition: opacity var(--transition), transform var(--transition);
	}

	.checkbox-input:checked + .checkbox-box .checkbox-check {
		opacity: 1;
		transform: scale(1);
	}

	.checkbox-indeterminate {
		width: 0.5em;
		height: 0.125em;
		background: var(--accent-fg);
		border-radius: 1px;
		opacity: 0;
		position: absolute;
		transition: opacity var(--transition);
	}

	.checkbox-input:indeterminate + .checkbox-box {
		background: var(--accent);
		border-color: var(--accent);
	}

	.checkbox-input:indeterminate + .checkbox-box .checkbox-check {
		opacity: 0;
	}

	.checkbox-input:indeterminate + .checkbox-box .checkbox-indeterminate {
		opacity: 1;
	}

	.checkbox-content {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding-top: 1px;
	}

	.checkbox-label {
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
		color: var(--fg);
	}

	.checkbox-description {
		font-size: var(--text-xs);
		line-height: var(--text-xs-lh);
		color: var(--fg-muted);
	}

	/* Toggle */
	.toggle {
		display: inline-flex;
		align-items: flex-start;
		gap: var(--space-sm);
		cursor: pointer;
	}

	.toggle-disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.toggle-input {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
		pointer-events: none;
	}

	.toggle-track {
		position: relative;
		width: 2.5em;
		height: 1.375em;
		background: var(--border);
		border-radius: 9999px;
		flex-shrink: 0;
		transition: background var(--transition);
	}

	.toggle-knob {
		position: absolute;
		top: 0.125em;
		left: 0.125em;
		width: 1.125em;
		height: 1.125em;
		background: var(--bg);
		border-radius: 50%;
		box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
		transition: transform var(--transition);
	}

	.toggle-input:checked + .toggle-track {
		background: var(--accent);
	}

	.toggle-input:checked + .toggle-track .toggle-knob {
		transform: translateX(1.125em);
	}

	.toggle-input:focus-visible + .toggle-track {
		outline: 2px solid var(--accent);
		outline-offset: 2px;
	}

	.toggle-content {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding-top: 2px;
	}

	.toggle-label {
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
		font-weight: 500;
		color: var(--fg);
	}

	.toggle-description {
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
		color: var(--fg-muted);
	}

	/* Toggle small variant */
	.toggle-sm .toggle-track {
		width: 2em;
		height: 1.125em;
	}

	.toggle-sm .toggle-knob {
		width: 0.875em;
		height: 0.875em;
	}

	.toggle-sm .toggle-input:checked + .toggle-track .toggle-knob {
		transform: translateX(0.875em);
	}

	/* FormField */
	.form-field {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
	}

	.form-field-label {
		display: block;
		font-size: var(--text-sm);
		font-weight: 500;
		color: var(--fg-muted);
	}

	.form-field-required {
		color: var(--error-fg);
		margin-left: var(--space-xs);
	}

	.form-field-description {
		font-size: var(--text-xs);
		line-height: var(--text-xs-lh);
		color: var(--fg-faint);
	}

	.form-field-error {
		font-size: var(--text-sm);
		color: var(--error-fg);
	}

	/* Timeline */
	.timeline {
		display: flex;
		flex-direction: column;
	}

	.timeline-item {
		display: flex;
		gap: var(--space-sm);
		position: relative;
	}

	.timeline-indicator {
		color: var(--fg-muted);
	}

	.timeline-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--border);
		border: 2px solid var(--bg);
		box-shadow: 0 0 0 2px var(--border);
	}

	.timeline-content {
		padding-top: var(--space-xs);
	}

	.timeline-title {
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
		font-weight: 500;
		color: var(--fg);
	}

	.timeline-description {
		font-size: var(--text-sm);
		line-height: var(--text-sm-lh);
		color: var(--fg-muted);
	}

	.timeline-timestamp {
		font-size: var(--text-xs);
		line-height: var(--text-xs-lh);
		color: var(--fg-faint);
	}

	/* Timeline variants */
	.timeline-item-success .timeline-indicator {
		color: var(--success-fg);
	}

	.timeline-item-success .timeline-dot {
		background: var(--success);
		box-shadow: 0 0 0 2px var(--success);
	}

	.timeline-item-error .timeline-indicator {
		color: var(--error-fg);
	}

	.timeline-item-error .timeline-dot {
		background: var(--error);
		box-shadow: 0 0 0 2px var(--error);
	}

	.timeline-item-warning .timeline-indicator {
		color: var(--warning-fg);
	}

	.timeline-item-warning .timeline-dot {
		background: var(--warning);
		box-shadow: 0 0 0 2px var(--warning);
	}

	.timeline-item-info .timeline-indicator {
		color: var(--info-fg);
	}

	.timeline-item-info .timeline-dot {
		background: var(--info);
		box-shadow: 0 0 0 2px var(--info);
	}
}

```

---