@human-synthesis/norns-ui 0.0.1 → 0.0.3

package/README.md

@@ -2,7 +2,9 @@
 
 UI library for the [Norns](https://github.com/human-synthesis/norns) ecosystem — Pug + Civet components on Tailwind v4.
 
-**Status: Phase 1 (foundation).** Currently ships `Btn` and the atom CSS layer. Forms tier (Input, Field, Form, …) lands in Phase 2; Bits-UI-backed behavior tier (Dialog, Popover, Tabs, Toast, …) in Phase 3.
+**Status: Phase 3 (behavior tier).** Currently ships `Btn`, `Form`, `Field`, `FieldGroup`, `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, the in-house `ToastProvider` + `toast()` helper, and the Bits-UI-backed `Dialog`, `Sheet`, `Popover`, `Dropdown`, `Tooltip`, `Tabs`. Data tier (Combobox, Listbox, Pagination, Accordion) and polish tier (Avatar, Badge, Spinner, …) land in Phase 4–5.
+
+> **Required: scope your preprocessors to project files.** Bits UI ships TypeScript-typed `<script lang="ts">` source, and the default Norns preprocess pipeline (svelte-preprocess + auto-import) corrupts those node_modules files. Wrap each preprocessor with a `node_modules` guard so they no-op on third-party `.svelte` files; vite-plugin-svelte handles them natively from there. See the **Setup** section below for the four-line `scopeToProject` helper.
 
 ## Stack
 
@@ -11,6 +13,7 @@ UI library for the [Norns](https://github.com/human-synthesis/norns) ecosystem
 - [Civet](https://civet.dev) — `<script>` language
 - [Tailwind CSS v4](https://tailwindcss.com) — styling, **hard peer dep**
 - [tailwind-merge](https://github.com/dcastil/tailwind-merge) — class deduplication
+- [Bits UI](https://bits-ui.com) — headless behavior backing `Dialog`/`Popover`/`Tabs`/etc.
 - `@human-synthesis/norns` `^0.0.7` — peer (`nornsAutoImport` for the registration flow)
 
 ## Install
@@ -23,7 +26,7 @@ bun add -D @human-synthesis/norns-ui
 
 ### 1. Wire `presetUI()` into `nornsAutoImport`
 
-So `<Btn>`, `<Card>`, `<Field>` resolve in markup without explicit imports.
+So `<Btn>`, `<Field>`, `<Input>`, etc. resolve in markup without explicit imports.
 
 ```js
 // vite.config.js
@@ -53,6 +56,27 @@ Same shape goes in `svelte.config.js`'s `preprocess` array.
 
 `componentDirs` resolves first — your `src/lib/components/Btn.n` silently shadows the library's `Btn` whenever you want to override.
 
+### 1b. Scope project preprocessors to skip `node_modules`
+
+Wrap `nornsPreprocess()` outputs and `nornsAutoImport(...)` so their hooks no-op on third-party `.svelte` files. Bits UI's `lang="ts"` source compiles cleanly under vite-plugin-svelte's native TS handling, but breaks under our project-side svelte-preprocess + auto-import pipeline.
+
+```js
+// svelte.config.js
+const scopeToProject = (p) => ({
+	name: p.name,
+	markup: p.markup ? (a) => (a.filename?.includes('/node_modules/') ? null : p.markup(a)) : undefined,
+	script: p.script ? (a) => (a.filename?.includes('/node_modules/') ? null : p.script(a)) : undefined,
+	style: p.style ? (a) => (a.filename?.includes('/node_modules/') ? null : p.style(a)) : undefined
+});
+
+export default nornsConfig({
+	preprocess: [
+		...nornsPreprocess().map(scopeToProject),
+		scopeToProject(nornsAutoImport({ /* … */ }))
+	]
+});
+```
+
 ### 2. Import the styles
 
 ```css
@@ -69,28 +93,32 @@ Same shape goes in `svelte.config.js`'s `preprocess` array.
 ### 3. Use components in Pug
 
 ```pug
-section.space-y-3
-	h1.text-3xl Notes
-	form(method="POST" action="?/create")
-		input.input(name="title" required)
+section.space-y-4
+	h1.text-3xl New note
+
+	Form(method="POST" action="?/create")
+		Field(label="Title" required error!="{form?.errors?.title}")
+			Input(name="title" required)
+		Field(label="Body" help="Optional — supports plain text only")
+			Textarea(name="body" rows="4")
 		Btn(type="submit" variant="primary") Create note
 ```
 
-## What ships
-
-### Atoms (CSS-only — Tailwind `@layer components`)
-
-Use directly via Pug class shorthand:
+## Component catalog
 
-- `.btn` + variants: `.btn-primary`, `.btn-secondary`, `.btn-ghost`, `.btn-danger`, `.btn-link`
-- `.btn` + sizes: `.btn-sm`, `.btn-lg` (default md is built into `.btn`)
-- `.ui-spinner` — small inline spinner
+### Phase 1 — atoms
 
-More atoms (`.input`, `.card`, `.badge`, `.field-*`) land in Phase 2.
+CSS classes via `@layer components`. Use directly via Pug class shorthand:
 
-### Components
+- `.btn` + variants (`primary`, `secondary`, `ghost`, `danger`, `link`) + sizes (`sm`, `lg`)
+- `.input` / `.textarea` / `.select` + `-err` modifier
+- `.checkbox` / `.radio` / `.switch` + `-err` modifier
+- `.field` / `.field-label` / `.field-required` / `.field-help` / `.field-error`
+- `.field-group` / `.field-group-legend`
+- `.form`
+- `.ui-spinner`
 
-#### `<Btn>` ([source](src/components/Btn.n))
+### Phase 1 — Btn
 
 Wrapped `<button>` with class merging, variant/size props, loading state, and snippet-prop API for icons.
 
@@ -108,12 +136,129 @@ Props (see [`src/types/Btn.d.ts`](src/types/Btn.d.ts)):
 - `variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link'` (default `'primary'`)
 - `size?: 'sm' | 'md' | 'lg'` (default `'md'`)
 - `loading?: boolean` — replaces leading icon with `.ui-spinner`, sets `disabled` and `aria-busy`
-- `disabled?: boolean`
-- `type?: 'button' | 'submit' | 'reset'` (default `'button'`)
-- `onclick?: (event) => void`
-- `class?: string` — merged via [`tailwind-merge`](https://github.com/dcastil/tailwind-merge)
-- `children` — default snippet (the button label)
-- `leading`, `trailing` — snippet slots for icons
+- `disabled?: boolean`, `type?`, `onclick?`, `class?`, `children`, `leading`, `trailing`
+
+### Phase 2 — forms tier
+
+#### `<Field>`
+
+Wraps a control with label + optional help/error text. Provides `id` and `hasError` to descendant controls via Svelte context — child Inputs auto-pick up the right `id` for `<label for=>` and switch to error styling.
+
+```pug
+Field(label="Email" required error!="{form?.errors?.email}" help="We'll never share it")
+	Input(name="email" type="email" required)
+```
+
+Props: `label?`, `help?`, `error?`, `required?`, `id?`, `class?`, `children`.
+
+#### `<Form>`, `<FieldGroup>`
+
+Styled `<form>` (vertical stack via `.form`) and `<fieldset>` (`.field-group` with optional legend).
+
+```pug
+Form(action="?/save")
+	FieldGroup(legend="Profile")
+		Field(label="Name")
+			Input(name="name" required)
+		Field(label="Bio")
+			Textarea(name="bio" rows="3")
+	Btn(type="submit") Save
+```
+
+#### Form controls
+
+All accept `class?` (merged via `cn`), pull `id` + `hasError` from a parent `<Field>` automatically, and surface `aria-invalid` + `aria-describedby` for accessibility:
+
+| Component | Bind | Common props |
+|---|---|---|
+| `<Input>` | `bind:value` | `type`, `size`, `name`, `placeholder`, `required`, `disabled`, `readonly`, `autocomplete` |
+| `<Textarea>` | `bind:value` | `name`, `placeholder`, `rows` (default 4), `required`, `disabled`, `readonly` |
+| `<Select>` | `bind:value` | `name`, `required`, `disabled`. Children: `<option>` elements |
+| `<Checkbox>` | `bind:checked` | `name`, `value`, `required`, `disabled` |
+| `<Radio>` | `bind:group` | `name`, `value`, `required`, `disabled` |
+| `<Switch>` | `bind:checked` | `name`, `value`, `required`, `disabled`. Renders as a styled toggle (`role="switch"`) |
+
+Each has a hand-rolled `.d.ts` shim under `src/types/`.
+
+### Phase 3 — behavior tier (Bits UI)
+
+Headless behavior + accessibility from [Bits UI](https://bits-ui.com), wrapped with default Tailwind styling and a snippet-prop API designed for Pug.
+
+#### `<Dialog>`
+
+```pug
+Dialog(bind:open!="{deleteOpen}" title="Delete note?" description="This cannot be undone.")
+	+snippet('trigger')
+		Btn(variant="danger" size="sm") Delete
+	+snippet('actions')
+		Btn(variant="ghost" onclick!="{() => deleteOpen = false}") Cancel
+		Btn(variant="danger" onclick!="{confirm}") Delete
+```
+
+Props: `open` (bindable), `title`, `description`, `hideClose`, `trigger`, `actions`, `children`, `class`, `overlayClass`, `triggerClass`.
+
+#### `<Sheet>`
+
+Same API as `Dialog` plus `side?: 'top' | 'right' | 'bottom' | 'left'` (default `'right'`). Slides in from the chosen edge instead of centering.
+
+#### `<Popover>` and `<Dropdown>`
+
+```pug
+Popover
+	+snippet('trigger')
+		Btn(variant="ghost" size="sm") Filters
+	.space-y-2
+		Field(label="Status")
+			Select(name="status")
+				option(value="all") All
+				option(value="open") Open
+
+Dropdown(items!="{[{label:'Edit', onSelect: edit}, {separator: true}, {label:'Delete', onSelect: del}]}")
+	+snippet('trigger')
+		Btn(variant="ghost") ⋯
+```
+
+#### `<Tooltip>`
+
+```pug
+Tooltip(content="Saved 2 minutes ago")
+	+snippet('trigger')
+		Btn(variant="ghost" size="sm") ⓘ
+```
+
+#### `<Tabs>`
+
+```pug
++snippet('panelHuman')
+	p Play against another person on this device.
++snippet('panelCpu')
+	p Play against a simple CPU.
+
+Tabs(bind:value!="{mode}" items!="{[
+	{ value: 'human', label: 'Human', panel: panelHuman },
+	{ value: 'cpu',   label: 'CPU',   panel: panelCpu }
+]}")
+```
+
+#### `<ToastProvider>` + `toast()`
+
+Mount once near the app root, then call `toast()` from anywhere:
+
+```pug
+// +layout.n
+ToastProvider
+| {@render children?.()}
+```
+
+```civet
+import { toast } from '@human-synthesis/norns-ui/toast'
+
+handleSave := =>
+	await save()
+	toast 'Saved!', { variant: 'success' }
+```
+
+Variants: `info` (default), `success`, `warning`, `error`. Default duration 4000ms; pass `duration: 0` for sticky.
 
 ## Theming
 
@@ -126,14 +271,15 @@ Dark mode: toggle via `<html data-theme="dark">`. The library's tokens.css ships
 Every component takes a `class` prop merged via `tailwind-merge` (the `cn` helper):
 
 ```svelte
-<Btn variant="primary" class="w-full" /> <!-- both classes survive; later wins on conflicts -->
+<Btn variant="primary" class="w-full" />
+<Input class="font-mono" />
 ```
 
 `cn` is exported from `@human-synthesis/norns-ui/cn` if you want to swap in plain `clsx` for smaller bundle:
 
 ```js
 import { cn } from '@human-synthesis/norns-ui/cn';
-cn('btn', isActive && 'btn-active', extra)
+cn('btn', isActive && 'btn-active', extra);
 ```
 
 ## Override a component

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-synthesis/norns-ui",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"description": "UI library for the Norns ecosystem — Pug + Civet components on Tailwind v4.",
 	"license": "MIT",
 	"author": "Daniel Teodoroiu (https://humansynthesis.ai)",
@@ -20,6 +20,7 @@
 		".": "./src/index.js",
 		"./auto-import": "./src/auto-import.js",
 		"./cn": "./src/lib/cn.js",
+		"./toast": "./src/lib/toast.svelte.js",
 		"./styles": "./src/styles/index.css",
 		"./styles/tokens": "./src/styles/tokens.css",
 		"./styles/atoms": "./src/styles/atoms.css",
@@ -34,19 +35,20 @@
 	},
 	"peerDependenciesMeta": {
 		"@human-synthesis/norns": {
-		"optional": false
+			"optional": false
+		},
+		"@human-synthesis/norns-core": {
+			"optional": false
+		}
 	},
-	"@human-synthesis/norns-core": {
-	"optional": false
-}
-},
-"dependencies": {
-	"tailwind-merge": "^2.5.0"
-},
-"engines": {
-	"node": ">=18"
-},
-"publishConfig": {
-	"access": "public"
-}
+	"dependencies": {
+		"bits-ui": "^2.18.1",
+		"tailwind-merge": "^2.5.0"
+	},
+	"engines": {
+		"node": ">=18"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
 }

package/src/auto-import.js

@@ -9,39 +9,56 @@
  *
  *   const ui = presetUI();
  *
- *   // vite.config.js
  *   plugins: [
  *     nornsCivetPlugin(),
  *     nornsAutoImport({
- *       componentDirs: ['src/lib/components'],   // user folder wins
- *       components: ui.components,                // norns-ui as fallback
- *       helpers: ui.helpers
+ *       componentDirs: ['src/lib/components'],
+ *       components: ui.components,
+ *       helpers: [...DEFAULT_HELPERS, ...ui.helpers]
  *     }),
  *     sveltekit()
  *   ]
  *
- * Components are imported via bare specifiers so the consumer's
- * `node_modules/@human-synthesis/norns-ui/...` is the resolution target.
- * Helpers (functional APIs like `toast()`) are added incrementally as the
- * library grows.
- *
  * @typedef {Object} UIPreset
- * @property {Record<string, string>} components  name → bare-specifier import path
- * @property {Array<{ from: string, imports: string[] }>} helpers  name groups for nornsAutoImport
+ * @property {Record<string, string>} components
+ * @property {Array<{ from: string, imports: string[] }>} helpers
  *
  * @returns {UIPreset}
  */
 export function presetUI() {
 	return {
 		components: {
-			Btn: '@human-synthesis/norns-ui/components/Btn.n'
-			// Phase 2+ adds: Input, Textarea, Select, Checkbox, Radio, Switch,
-			// Field, Form, FieldGroup, Card, Dialog, Sheet, Popover, Dropdown,
-			// Tooltip, Tabs, Accordion, Toast, Listbox, Combobox, Pagination,
-			// Avatar, Badge, Spinner, Progress, Skeleton, Icon
+			// Phase 1
+			Btn: '@human-synthesis/norns-ui/components/Btn.n',
+
+			// Phase 2 — forms tier
+			Field: '@human-synthesis/norns-ui/components/Field.n',
+			FieldGroup: '@human-synthesis/norns-ui/components/FieldGroup.n',
+			Form: '@human-synthesis/norns-ui/components/Form.n',
+			Input: '@human-synthesis/norns-ui/components/Input.n',
+			Textarea: '@human-synthesis/norns-ui/components/Textarea.n',
+			Select: '@human-synthesis/norns-ui/components/Select.n',
+			Checkbox: '@human-synthesis/norns-ui/components/Checkbox.n',
+			Radio: '@human-synthesis/norns-ui/components/Radio.n',
+			Switch: '@human-synthesis/norns-ui/components/Switch.n',
+
+			// Phase 3 — behavior tier (Bits UI)
+			Dialog: '@human-synthesis/norns-ui/components/Dialog.n',
+			Sheet: '@human-synthesis/norns-ui/components/Sheet.n',
+			Popover: '@human-synthesis/norns-ui/components/Popover.n',
+			Dropdown: '@human-synthesis/norns-ui/components/Dropdown.n',
+			Tooltip: '@human-synthesis/norns-ui/components/Tooltip.n',
+			Tabs: '@human-synthesis/norns-ui/components/Tabs.n',
+			ToastProvider: '@human-synthesis/norns-ui/components/ToastProvider.n'
+
+			// Phase 4+ adds: Accordion, Listbox, Combobox, Pagination,
+			// Avatar, Badge, Spinner, Progress, Skeleton, Icon, Card
 		},
 		helpers: [
-			// Phase 3+: { from: '@human-synthesis/norns-ui', imports: ['toast'] }
+			{
+				from: '@human-synthesis/norns-ui/toast',
+				imports: ['toast', 'notify', 'dismiss']
+			}
 		]
 	};
 }

package/src/components/Checkbox.n

@@ -0,0 +1,33 @@
+input(
+	type="checkbox"
+	id!="{resolvedId}"
+	name!="{name}"
+	value!="{value}"
+	bind:checked
+	required!="{required}"
+	disabled!="{disabled}"
+	aria-invalid!="{hasError ? 'true' : undefined}"
+	class!="{classes}"
+)
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { getContext } from 'svelte'
+
+	{
+		checked = $bindable(false)
+		value
+		name
+		id: providedId
+		required = false
+		disabled = false
+		error: explicitError = false
+		class: extra = ''
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+
+	classes := cn 'checkbox', hasError && 'checkbox-err', extra
+</script>

package/src/components/Dialog.n

@@ -0,0 +1,54 @@
+DialogRoot(bind:open)
+	+if('trigger')
+		DialogTrigger(class!="{triggerClass ?? undefined}")
+			| {@render trigger()}
+	DialogPortal
+		DialogOverlay(class!="{overlayClasses}")
+		DialogContent(class!="{contentClasses}")
+			+if('title')
+				DialogTitle.dialog-title
+					| {title}
+			+if('description')
+				DialogDescription.dialog-description
+					| {description}
+			+if('children')
+				.dialog-body
+					| {@render children()}
+			+if('actions')
+				.dialog-actions
+					| {@render actions()}
+			+if('!hideClose')
+				DialogClose.dialog-close(aria-label="Close")
+					| ✕
+
+<script>
+	import { Dialog } from 'bits-ui'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		Root: DialogRoot
+		Trigger: DialogTrigger
+		Portal: DialogPortal
+		Overlay: DialogOverlay
+		Content: DialogContent
+		Title: DialogTitle
+		Description: DialogDescription
+		Close: DialogClose
+	} := Dialog
+
+	{
+		open = $bindable(false)
+		title
+		description
+		hideClose = false
+		trigger
+		actions
+		children
+		triggerClass
+		overlayClass = ''
+		class: extra = ''
+	} .= $props()
+
+	overlayClasses := cn 'dialog-overlay', overlayClass
+	contentClasses := cn 'dialog-content', extra
+</script>

package/src/components/Dropdown.n

@@ -0,0 +1,41 @@
+MenuRoot(bind:open)
+	+if('trigger')
+		MenuTrigger(class!="{triggerClass ?? undefined}")
+			| {@render trigger()}
+	MenuPortal
+		MenuContent(class!="{contentClasses}" side!="{side}" align!="{align}" sideOffset!="{sideOffset}")
+			+each('items as item, i')
+				+if('item.separator')
+					MenuSeparator.dropdown-separator
+				+if('!item.separator')
+					MenuItem.dropdown-item(disabled!="{item.disabled}" onSelect!="{item.onSelect}")
+						| {item.label}
+			| {@render children?.()}
+
+<script>
+	import { DropdownMenu } from 'bits-ui'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		Root: MenuRoot
+		Trigger: MenuTrigger
+		Portal: MenuPortal
+		Content: MenuContent
+		Item: MenuItem
+		Separator: MenuSeparator
+	} := DropdownMenu
+
+	{
+		open = $bindable(false)
+		side = 'bottom'
+		align = 'start'
+		sideOffset = 4
+		items = []
+		trigger
+		children
+		triggerClass
+		class: extra = ''
+	} .= $props()
+
+	contentClasses := cn 'dropdown-content', extra
+</script>

package/src/components/Field.n

@@ -0,0 +1,56 @@
+.field(class!="{classes}")
+	+if('label')
+		label.field-label(for!="{resolvedId}")
+			| {label}
+			+if('required')
+				span.field-required *
+	| {@render children?.()}
+	+if('resolvedError')
+		p.field-error(role="alert" id!="{resolvedId ? `${resolvedId}-error` : undefined}")
+			| {resolvedError}
+	+if('!resolvedError && help')
+		p.field-help(id!="{resolvedId ? `${resolvedId}-help` : undefined}")
+			| {help}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { setContext, getContext } from 'svelte'
+
+	{
+		label
+		help
+		error
+		name
+		required = false
+		id: providedId
+		children
+		class: extra = ''
+	} := $props()
+
+	// Error resolution order:
+	//   1. explicit `error` prop wins (caller has full control)
+	//   2. else look up `name` in the parent <Form>'s errors map (auto-wired)
+	//   3. else no error
+	formCtx := getContext 'norns-ui:form'
+	resolvedError := $derived error ?? (name && formCtx?.errors?.[name]) ?? undefined
+
+	// Deterministic id derivation. SSR-safe (no random fallback):
+	//   1. explicit `id` prop wins
+	//   2. else `name` (single source of truth for submission + id)
+	//   3. else slugify the label
+	//   4. else undefined — no label, no <label for=> association needed
+	slugify := (s) => s.toLowerCase().trim().replace(/[^\w]+/g, '-').replace(/^-+|-+$/g, '')
+	resolvedId := $derived providedId ?? name ?? (label && `field-${slugify(label)}`) ?? undefined
+
+	// Shared with descendants. Getters wrap $derived so context reads
+	// remain reactive in both SSR (synchronous) and client (post-mount)
+	// — `$effect` would only fire client-side, leaving SSR with stale
+	// initial values.
+	ctx := {
+		get id() { resolvedId }
+		get hasError() { !!resolvedError }
+	}
+	setContext 'norns-ui:field', ctx
+
+	classes := cn 'field', extra
+</script>

package/src/components/FieldGroup.n

@@ -0,0 +1,17 @@
+fieldset(class!="{classes}")
+	+if('legend')
+		legend.field-group-legend
+			| {legend}
+	| {@render children?.()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	{
+		legend
+		children
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'field-group', extra
+</script>

package/src/components/Form.n

@@ -0,0 +1,45 @@
+form(
+	method!="{method}"
+	action!="{action}"
+	enctype!="{enctype}"
+	class!="{classes}"
+	onsubmit!="{onsubmit}"
+)
+	| {@render children?.()}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { setContext } from 'svelte'
+
+	{
+		method = 'POST'
+		action
+		enctype
+		onsubmit
+		form
+		children
+		class: extra = ''
+	} := $props()
+
+	// Errors-by-name map. Built reactively from the valibot issue list so
+	// descendant Fields can look up their own error by `name` without a
+	// per-page $derived helper.
+	//
+	// $derived (not $state + $effect) is critical for SSR — $effect runs
+	// only client-side, so an effect-based context would produce empty
+	// errors during initial server render.
+	errorsMap := $derived.by =>
+		out := {}
+		if form?.errors
+			for issue of form.errors
+				name := issue.path?.[0]?.key
+				if name && !out[name]
+					out[name] = issue.message
+		out
+
+	// Getter wraps the $derived so context consumers re-evaluate on read.
+	ctx := { get errors() { errorsMap } }
+	setContext 'norns-ui:form', ctx
+
+	classes := cn 'form', extra
+</script>

package/src/components/Input.n

@@ -0,0 +1,41 @@
+input(
+	type!="{type}"
+	id!="{resolvedId}"
+	name!="{name}"
+	bind:value
+	placeholder!="{placeholder}"
+	required!="{required}"
+	disabled!="{disabled}"
+	readonly!="{readonly}"
+	autocomplete!="{autocomplete}"
+	aria-invalid!="{hasError ? 'true' : undefined}"
+	aria-describedby!="{describedBy}"
+	class!="{classes}"
+)
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import { getContext } from 'svelte'
+
+	{
+		value = $bindable('')
+		type = 'text'
+		size = 'md'
+		name
+		id: providedId
+		placeholder
+		required = false
+		disabled = false
+		readonly = false
+		autocomplete
+		error: explicitError = false
+		class: extra = ''
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+	describedBy := resolvedId && hasError ? `${resolvedId}-error` : undefined
+
+	classes := cn 'input', size !== 'md' && `input-${size}`, hasError && 'input-err', extra
+</script>