staffa 0.1.0

package/src/components/dialog.ts

@@ -0,0 +1,257 @@
+import A from "aberdeen";
+import { type Slot, type Styling, drawSlot } from "../core.js";
+import { button } from "./button.js";
+import { buttonGroup } from "./buttonGroup.js";
+import { textline } from "./textline.js";
+
+/** Options for {@link dialog}. */
+export interface DialogOptions {
+	/** Slot rendered in the styled header bar. */
+	header?: Slot;
+	/** Slot rendered in the styled footer bar. */
+	footer?: Slot;
+	/** Aberdeen attr/style string applied to the header bar. */
+	headerInner?: Styling;
+	/** Aberdeen attr/style string applied to the footer bar. */
+	footerInner?: Styling;
+	/** Aberdeen attr/style string applied to the scrollable content `<div>`. */
+	inner?: Styling;
+	/** Aberdeen attr/style string applied to the dialog panel itself. */
+	root?: Styling;
+	/**
+	 * Allow closing via Esc or clicking the backdrop. Defaults to `true`.
+	 * May be changed on a proxied options object while the dialog is open
+	 * (e.g. lock when form data is dirty).
+	 */
+	allowCancel?: boolean;
+	/**
+	 * Dialog body. Receives a `close()` function — call it to dismiss the dialog
+	 * programmatically.
+	 */
+	content?: (close: () => void) => void;
+	/**
+	 * Called when the dialog closes for any reason (explicit `close()`, Esc, or
+	 * backdrop click). Useful when you want a side-effect on close but don't need
+	 * the Promise returned by {@link dialog}.
+	 */
+	onClose?: () => void;
+}
+
+// Transition helper classes.
+// `.S_backdrop` = backdrop, hidden when another backdrop follows it in the DOM.
+// `.S_dialog`   = dialog box, slides + fades in/out.
+A.insertGlobalCss({
+	".S_backdrop": {
+		"&": "position:fixed inset:0 z-index:200; background: rgba(0,0,0,0.55); transition: opacity 0.2s ease;",
+		"&:not(:has(~ .S_backdrop))": "display:block",
+		"&:not(:has(~ .S_backdrop)) + .S_dialog": "display:flex flex-direction:column",
+		// Transition states: applied momentarily on create; re-applied on destroy.
+		"&.hidden": "opacity:0 pointer-events:none",
+	},
+	".S_dialog": {
+		"&":
+			"position:fixed z-index:201 top:50% left:50% " +
+			"transform:translate(-50%,-50%) " +
+			"min-width:20rem max-width:min(90vw,44rem) max-height:min(88vh,800px) " +
+			"bg:$sSurface border: 1px solid $sBorder; r:$sRadiusLg box-shadow:$sShadow overflow:hidden " +
+			"transition: opacity 0.2s ease, transform 0.2s ease;",
+		// Header and footer are fixed; only the content <div> scrolls.
+		"> header":
+			"display:flex align-items:center gap:$2 padding: $2 $3; " +
+			"bg:$sSurfaceHi border-bottom: 1px solid $sBorder; font-weight:600 flex-shrink:0",
+		"> footer":
+			"display:flex align-items:center gap:$2 padding: $2 $3; " +
+			"bg:$sSurfaceHi border-top: 1px solid $sBorder; flex-shrink:0",
+		"> div": "p:$3 gap:$3 display:flex flex-direction:column overflow-y:auto flex:1 min-height:0",
+		"&.hidden": "opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px));",
+		"&.hidden *": "pointer-events:none",
+	},
+});
+
+/**
+ * A dialog rendered into `document.body` via `A.mount`, with a dimming backdrop
+ * that fades in and out. Returns a `Promise<void>` that resolves when the dialog
+ * closes. Lifecycle is also tied to the parent reactive scope — when that scope
+ * is cleaned up the dialog disappears and the promise resolves.
+ *
+ * Only the **last** open dialog (and its backdrop) is visible; earlier pairs are
+ * hidden via the CSS `+` selector, so nested dialogs stack correctly.
+ *
+ * The header and footer are pinned; only the body content scrolls when it is
+ * taller than `88vh`.
+ *
+ * @example
+ * ```ts
+ * S.dialog({
+ *   header: "Confirm",
+ *   content: (close) => {
+ *     A("p #Are you sure?");
+ *     S.button({ text: "Yes", click: () => { doIt(); close(); } });
+ *     S.button({ text: "Cancel", variant: "outlined", click: close });
+ *   },
+ * });
+ * ```
+ */
+export function dialog(opts: DialogOptions): Promise<void> {
+	return new Promise<void>((resolve) => {
+		const $closed = A.proxy(false);
+		const close = () => { $closed.value = true; };
+
+		let resolved = false;
+		const onDone = () => {
+			if (resolved) return;
+			resolved = true;
+			opts.onClose?.();
+			resolve();
+		};
+
+		// A.mount ties this scope to the calling reactive scope — when the parent
+		// scope is torn down, the backdrop and dialog are removed from body too.
+		A.mount(document.body, () => {
+			// The 'peek' is there such that when 'closed' is first set, this scope doesn't need to watch anything anymore.
+			if (A.peek($closed, "value"), $closed.value) return;
+
+			// Global Esc listener — registered here so it's removed on close.
+			const onKey = (e: KeyboardEvent) => {
+				if (e.key === "Escape" && opts.allowCancel !== false) close();
+			};
+			document.addEventListener("keydown", onKey);
+			A.clean(() => {
+				document.removeEventListener("keydown", onKey);
+				// Fires when this render is torn down — either because $closed became
+				// true (normal close) or because the parent reactive scope was cleaned up.
+				onDone();
+			});
+
+			// Backdrop: fades in on creation, fades out on removal.
+			A("div.S_backdrop create=hidden destroy=hidden", () => {
+				A("click=", () => {
+					if (opts.allowCancel !== false) close();
+				});
+			});
+
+			// Dialog panel: fades + slides in/out.
+			A("div.S_dialog create=hidden destroy=hidden", opts.root, () => {
+				A(() => {
+					if (opts.header != null) {
+						A("header", opts.headerInner, () => drawSlot(opts.header));
+					}
+				});
+
+				A("div", opts.inner, () => {
+					if (opts.content) opts.content(close);
+				});
+
+				A(() => {
+					if (opts.footer != null) {
+						A("footer", opts.footerInner, () => drawSlot(opts.footer));
+					}
+				});
+			});
+		});
+	});
+}
+
+/**
+ * Shows a message dialog with a single OK button. Returns a `Promise<void>`
+ * that resolves when the user dismisses it.
+ *
+ * All properties of `opts` override the defaults, including `content`.
+ *
+ * @example
+ * ```ts
+ * await S.alert("File saved successfully.");
+ * ```
+ */
+export function alert(message: string, opts: Partial<DialogOptions> = {}): Promise<void> {
+	return dialog({
+		header: "Alert",
+		allowCancel: true,
+		content: (close) => {
+			A("p", () => { A("#", message); });
+			buttonGroup({ layout: "spaced", root: "align-self:flex-end", content: () => {
+				button({ text: "OK", click: close });
+			}});
+		},
+		...opts,
+	});
+}
+
+/**
+ * Shows a confirmation dialog with Cancel and OK buttons. Returns a
+ * `Promise<boolean>` — `true` if the user clicked OK, `false` otherwise
+ * (including Esc / backdrop click when `allowCancel` is not `false`).
+ *
+ * All properties of `opts` override the defaults, including `content`.
+ *
+ * @example
+ * ```ts
+ * if (await S.confirm("Delete this item?")) deleteItem();
+ * ```
+ */
+export function confirm(message: string, opts: Partial<DialogOptions> = {}): Promise<boolean> {
+	return new Promise<boolean>((resolve) => {
+		let confirmed = false;
+		dialog({
+			header: "Confirm",
+			allowCancel: true,
+			content: (close) => {
+				A("p", () => { A("#", message); });
+				buttonGroup({ layout: "spaced", root: "align-self:flex-end", content: () => {
+					button({ text: "Cancel", variant: "outlined", color: "neutral", click: close });
+					button({ text: "OK", click: () => { confirmed = true; close(); } });
+				}});
+			},
+			...opts,
+			onClose: () => {
+				resolve(confirmed);
+				opts.onClose?.();
+			},
+		});
+	});
+}
+
+/**
+ * Shows a prompt dialog with a text input. Returns a `Promise<string | null>` —
+ * the entered string if the user confirmed, or `null` if cancelled (Esc /
+ * backdrop click / Cancel button).
+ *
+ * All properties of `opts` override the defaults, including `content`.
+ *
+ * @example
+ * ```ts
+ * const name = await S.prompt("Enter your name:", "Alice");
+ * if (name !== null) greet(name);
+ * ```
+ */
+export function prompt(message: string, defaultValue = "", opts: Partial<DialogOptions> = {}): Promise<string | null> {
+	return new Promise<string | null>((resolve) => {
+		let result: string | null = null;
+		dialog({
+			header: "Input",
+			allowCancel: true,
+			content: (close) => {
+				A("p", () => { A("#", message); });
+				const $v = A.proxy({ value: defaultValue });
+				// Wrap in a form so Enter submits; display:contents keeps flex layout intact.
+				A("form display:contents", () => {
+					A("submit=", (e: Event) => {
+						e.preventDefault();
+						result = $v.value;
+						close();
+					});
+					textline({ bind: A.ref($v, "value") });
+					buttonGroup({ layout: "spaced", root: "align-self:flex-end", content: () => {
+						button({ text: "Cancel", variant: "outlined", color: "neutral", type: "button", click: close });
+						button({ text: "OK", type: "submit" });
+					}});
+				});
+			},
+			...opts,
+			onClose: () => {
+				resolve(result);
+				opts.onClose?.();
+			},
+		});
+	});
+}

package/src/components/field.ts

@@ -0,0 +1,115 @@
+import A from "aberdeen";
+import { type BaseOptions, type Bindable, type Slot, type Styling, drawSlot, uniqueId } from "../core.js";
+
+/**
+ * Options shared by all *form field* components (textline, textarea, checkbox,
+ * autocomplete, ...).
+ *
+ * Fields share a consistent vertical layout: an optional label, the control
+ * itself, and optional help/error text below it. {@link form} relies on this
+ * shared structure to align groups of fields.
+ */
+export interface FieldOptions extends BaseOptions {
+	/** Visible label, associated with the control via `for`/`id` for a11y. */
+	label?: Slot;
+	/** Helper text shown beneath the control. */
+	help?: Slot;
+	/**
+	 * Error message shown beneath the control. When set, the control is marked
+	 * `aria-invalid` and styled accordingly. May be reactive.
+	 */
+	error?: string;
+	/** Disables the control. */
+	disabled?: boolean;
+	/** Marks the field required (adds a `*` and the `aria-required` attribute). */
+	required?: boolean;
+	/** The `name` attribute, for native form submission. */
+	name?: string;
+	/** Explicit id for the control; auto-generated when omitted. */
+	id?: string;
+	/** Aberdeen attr/style string applied to the control element itself. */
+	control?: Styling;
+}
+
+A.insertGlobalCss({
+	".S_field": {
+		"&": "display:flex flex-direction:column gap:$1",
+		"> label": "font-weight:600 font-size:0.9em fg:$sFg user-select:none",
+	},
+	// Shared, reusable bits (also used by checkbox & autocomplete).
+	".S_req": "fg:$sDanger margin-left:2px",
+	".S_help": "font-size:0.82em fg:$sFgMuted",
+	".S_error": "font-size:0.82em fg:$sDanger",
+	// Shared look for text-like controls.
+	".S_input": {
+		"&": "w:100% bg:$sSurface fg:$sFg border: 1px solid $sBorder; r:$sRadius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;",
+		"&:hover:not(:disabled)": "border-color:$sBorderStrong",
+		"&:focus-visible": "border-color:$sPrimary box-shadow: 0 0 0 3px $sFocus; outline:none",
+		"&:disabled": "opacity:0.6 cursor:not-allowed",
+		"&[aria-invalid=true]": "border-color:$sDanger",
+	},
+});
+
+/**
+ * Render the standard field chrome (label + control + help/error) around a
+ * caller-supplied control.
+ *
+ * Each piece is read inside its own small reactive scope, so e.g. flipping
+ * `error` on a proxied options object only re-renders the error line — not the
+ * control.
+ *
+ * @param opts The field options.
+ * @param drawControl Receives the resolved `id` and the live "invalid" getter,
+ *   and must draw the actual control element (using class `S_input` where
+ *   appropriate, and passing `opts.control` as an arg for caller styling).
+ */
+export function drawField(
+	opts: FieldOptions,
+	drawControl: (id: string, isInvalid: () => boolean) => void,
+): void {
+	const id = opts.id ?? uniqueId("field");
+	const isInvalid = () => !!opts.error;
+
+	A("div.S_field", opts.root, () => {
+		A(() => {
+			if (opts.label != null) {
+				A(`label for=${id}`, () => {
+					drawSlot(opts.label);
+					if (opts.required) A("span.S_req aria-hidden=true #*");
+				});
+			}
+		});
+
+		drawControl(id, isInvalid);
+
+		A(() => {
+			if (opts.help != null && !opts.error) A("div.S_help", () => drawSlot(opts.help));
+		});
+		A(() => {
+			if (opts.error) A("div.S_error role=alert #", opts.error);
+		});
+	});
+}
+
+/**
+ * Apply the shared, reactive control attributes (`id`, `name`, `disabled`,
+ * `required`, `aria-invalid`, `bind`) to the current element. The dynamic ones
+ * each get their own scope so the control element is never recreated.
+ */
+export function applyControlAttrs(
+	opts: FieldOptions,
+	id: string,
+	isInvalid: () => boolean,
+	bind?: Bindable<unknown>,
+): void {
+	A(`id=${id}`);
+	if (opts.name) A(`name=${opts.name}`);
+	A(() => {
+		if (opts.disabled) A("disabled=true");
+	});
+	A(() => {
+		if (opts.required) A("aria-required=true");
+	});
+	A(() => A("aria-invalid=", isInvalid() ? "true" : "false"));
+	if (bind) A("bind=", bind);
+}

package/src/components/form.ts

@@ -0,0 +1,84 @@
+import A from "aberdeen";
+import { type Content, type ContentOptions, type Styling } from "../core.js";
+
+/** Options for {@link form}. */
+export interface FormOptions extends ContentOptions {
+	/**
+	 * Submit handler. Called with collected form data (keyed by each field's
+	 * `name`) and the original event. `preventDefault()` is already called.
+	 * Multi-value fields (e.g. multi-select) produce a `string[]`.
+	 */
+	submit?: (data: Record<string, string | string[]>, event: SubmitEvent) => void;
+	/**
+	 * Layout of fields. `"stacked"` (default) is a single column; `"grid"` packs
+	 * fields into a responsive multi-column grid. A field can span the full grid
+	 * width by adding the `.S_wide` class (e.g. `root: ".S_wide"`).
+	 */
+	layout?: "stacked" | "grid";
+	/** Aberdeen attr/style string for the action bar. */
+	actionsInner?: Styling;
+	/** Footer actions (typically a {@link import("./buttonGroup").buttonGroup} or buttons). */
+	actions?: Content;
+}
+
+A.insertGlobalCss({
+	".S_form": {
+		"&": "display:flex flex-direction:column gap:$3",
+		"&.grid": "display:grid grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap:$3",
+		"&.grid > .S_wide, &.grid > footer": "grid-column: 1 / -1;",
+		"> footer": "display:flex align-items:center gap:$2 flex-wrap:wrap margin-top:$1",
+	},
+});
+
+/**
+ * An opinionated `<form>` wrapper that lays its fields out consistently — a clean
+ * single column by default, or a responsive grid — and provides a standard
+ * action bar.
+ *
+ * Field components ({@link import("./textline").textline} et al.) drop straight
+ * in as {@link ContentOptions.content}. Submission is wired so the browser's
+ * native validation runs, but the page never reloads.
+ *
+ * @example
+ * ```ts
+ * S.form({
+ *   submit: () => save(),
+ *   content: () => {
+ *     S.textline({ label: "Name", required: true, bind: A.ref($u, "name") });
+ *     S.textline({ label: "Email", type: "email", bind: A.ref($u, "email") });
+ *   },
+ *   actions: () => S.button({ text: "Save", type: "submit" }),
+ * });
+ * ```
+ */
+export function form(opts: FormOptions | Content = {}): void {
+	const o: FormOptions = typeof opts === "function" ? { content: opts } : opts;
+
+	A(`form.S_form`, o.root, o.inner, () => {
+		// Toggle grid class in its own scope so changing layout doesn't recreate
+		// the fields (which would lose focus / input state).
+		A(() => {
+			A(".grid=", o.layout === 'grid');
+		});
+
+		A("submit=", (event: SubmitEvent) => {
+			event.preventDefault();
+			if (o.submit) {
+				const fd = new FormData(event.target as HTMLFormElement);
+				const data: Record<string, string | string[]> = {};
+				for (const key of new Set(fd.keys())) {
+					const vals = fd.getAll(key) as string[];
+					data[key] = vals.length === 1 ? vals[0]! : vals;
+				}
+				o.submit(data, event);
+			}
+		});
+
+		if (o.content) o.content();
+
+		// Own scope so toggling actions doesn't recreate the fields above.
+		A(() => {
+			if (o.actions) A("footer", o.actionsInner, () => o.actions?.());
+		});
+	});
+}

package/src/components/main.ts

@@ -0,0 +1,110 @@
+import A from "aberdeen";
+import { type BaseOptions, type Content, type Slot, type Styling, drawSlot } from "../core.js";
+
+/** Options for {@link main}. */
+export interface MainOptions extends BaseOptions {
+	/** App/page title shown in the top bar. */
+	title?: Slot;
+	/** Secondary line under the title. */
+	subtitle?: Slot;
+	/** Leading icon/logo in the top bar. */
+	icon?: Slot;
+	/** Action area on the right of the top bar (buttons, menu, ...). */
+	menu?: Content;
+	/** The scrollable page content. */
+	content?: Content;
+	/** Footer content, pinned below the scroll area. */
+	footer?: Slot;
+	/**
+	 * Max content width. When set, the content is centered in a "sheet" with a
+	 * drop shadow and a distinct surface, against the darker page background.
+	 * e.g. `"60rem"`.
+	 */
+	maxWidth?: string;
+	/** Aberdeen attr/style string applied to the content sheet. */
+	inner?: Styling;
+	/** Aberdeen attr/style string applied to the top bar. */
+	topbarInner?: Styling;
+}
+
+A.insertGlobalCss({
+	".S_main": {
+		"&": "display:flex flex-direction:column min-height:100vh max-height:100vh bg:$sBg fg:$sFg",
+		"> header": "display:flex align-items:center gap:$3 padding: $2 $3; bg:$sSurfaceHi border-bottom: 1px solid $sBorder; position:sticky top:0 z-index:10",
+		"> header .S_icon": "display:flex align-items:center font-size:1.4em",
+		"> header .S_titles": "display:flex flex-direction:column min-width:0 flex:1",
+		"> header .S_title": "font-weight:700 font-size:1.1em line-height:1.2 overflow:hidden text-overflow:ellipsis white-space:nowrap",
+		"> header .S_subtitle": "fg:$sFgMuted font-size:0.85em overflow:hidden text-overflow:ellipsis white-space:nowrap",
+		"> header .S_menu": "display:flex align-items:center gap:$2",
+		"> main": "flex:1 overflow-y:auto display:flex flex-direction:column",
+		"> main > .S_content": "width:100% flex:1",
+		"> main > .S_content.S_framed": "margin: $3 auto; bg:$sSurface border: 1px solid $sBorder; r:$sRadiusLg box-shadow:$sShadow p:$4",
+		"> main > .S_content.S_plain": "p:$3",
+		"> footer": "display:flex align-items:center gap:$2 padding: $2 $3; bg:$sSurfaceHi border-top: 1px solid $sBorder; fg:$sFgMuted",
+	},
+});
+
+/**
+ * An application shell that wires up the things almost every app needs: a sticky
+ * top bar (icon, title, subtitle, action menu), a scrollable content area, and a
+ * footer. With {@link MainOptions.maxWidth} the content becomes a centered,
+ * shadowed "sheet" — the common dashboard/document look — while staying fully
+ * customisable via the various draw-function options and styling strings.
+ *
+ * @example
+ * ```ts
+ * S.main({
+ *   icon: "✦",
+ *   title: "Staffa Demo",
+ *   subtitle: "Component playground",
+ *   maxWidth: "56rem",
+ *   menu: () => S.button({ text: "New", size: "sm" }),
+ *   content: () => drawPage(),
+ *   footer: "© 2026",
+ * });
+ * ```
+ */
+export function main(opts: MainOptions = {}): void {
+	A("div.S_main", opts.root, () => {
+		// Top bar — only rendered when there's something to show in it.
+		A(() => {
+			const hasBar = opts.title != null || opts.subtitle != null || opts.icon != null || opts.menu != null;
+			if (!hasBar) return;
+			A("header", opts.topbarInner, () => {
+				A(() => {
+					if (opts.icon != null) A("div.S_icon", () => drawSlot(opts.icon));
+				});
+				A("div.S_titles", () => {
+					A(() => {
+						if (opts.title != null) A("div.S_title", () => drawSlot(opts.title));
+					});
+					A(() => {
+						if (opts.subtitle != null) A("div.S_subtitle", () => drawSlot(opts.subtitle));
+					});
+				});
+				A(() => {
+					if (opts.menu) A("div.S_menu", () => opts.menu?.());
+				});
+			});
+		});
+
+		// Scrollable main region with the (optionally framed) content sheet.
+		A("main", () => {
+			A("div.S_content", opts.inner, () => {
+				// Framing applied in its own scope so changing maxWidth doesn't
+				// recreate the content (which holds the whole page).
+				A(() => {
+					const max = opts.maxWidth;
+					if (max != null) A(".S_framed max-width:", max);
+					else A(".S_plain");
+				});
+				if (opts.content) opts.content();
+			});
+		});
+
+		// Footer.
+		A(() => {
+			if (opts.footer != null) A("footer", () => drawSlot(opts.footer));
+		});
+	});
+}

package/src/components/select.ts

@@ -0,0 +1,75 @@
+import A from "aberdeen";
+import { type Bindable } from "../core.js";
+import { type FieldOptions, applyControlAttrs, drawField } from "./field.js";
+
+/** A selectable option: a bare string, or a `{ value, label }` pair. */
+export type SelectOptionInput = string | { value: string; label?: string };
+
+/** Options for {@link select}. */
+export interface SelectOptions extends FieldOptions {
+	/** The list of selectable options. */
+	options: SelectOptionInput[] | (() => SelectOptionInput[]);
+	/** Two-way binding for the selected value string (`""` when nothing is selected). */
+	bind?: Bindable<string>;
+	/** Placeholder option shown when nothing is selected yet. */
+	placeholder?: string;
+}
+
+// Wrapper provides the chevron via ::after (pseudo-elements on <select> are unreliable).
+A.insertGlobalCss({
+	".S_select_wrap": {
+		"&": "position:relative display:block",
+		"select": "w:100% cursor:pointer padding-right:2.2em; appearance:none",
+		"&::after": "content: '▾'; position:absolute right:0.7em top:50%; transform: translateY(-50%); pointer-events:none fg:$sFgMuted font-size:0.85em",
+	},
+});
+
+/**
+ * A single-select dropdown backed by a native `<select>` element. Looks like the
+ * other Staffa inputs but delegates all focus management, keyboard navigation, and
+ * mobile-native picker behaviour to the browser.
+ *
+ * @example
+ * ```ts
+ * S.select({ label: "Country", options: ["Belgium", "Netherlands"], bind: $sel });
+ * ```
+ */
+export function select(opts: SelectOptions): void {
+	drawField(opts, (id, isInvalid) => {
+		A("div.S_select_wrap", opts.control, () => {
+			A("select.S_input", () => {
+				applyControlAttrs(opts, id, isInvalid);
+
+				A("change=", (e: Event) => {
+					if (opts.bind) opts.bind.value = (e.target as HTMLSelectElement).value;
+				});
+
+				// Render options reactively; re-runs when options list or selected value changes.
+				A(() => {
+					const raw = typeof opts.options === "function" ? opts.options() : opts.options;
+					const current = (opts.bind?.value ?? "") as string;
+
+					if (opts.placeholder != null) {
+						A("option", () => {
+							A("value= disabled=true hidden=true");
+							if (!current) A("selected=true");
+							A("#", opts.placeholder!);
+						});
+					}
+
+					for (const o of raw) {
+						const opt =
+							typeof o === "string"
+								? { value: o, label: o }
+								: { value: o.value, label: o.label ?? o.value };
+						A("option", () => {
+							A("value=", opt.value);
+							if (opt.value === current) A("selected=true");
+							A("#", opt.label);
+						});
+					}
+				});
+			});
+		});
+	});
+}