@human-synthesis/norns-ui 0.0.2 → 0.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Daniel Teodoroiu / Human Synthesis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,8 +1,6 @@
 # `@human-synthesis/norns-ui`
 
-UI library for the [Norns](https://github.com/human-synthesis/norns) ecosystem — Pug + Civet components on Tailwind v4.
-
-**Status: Phase 2 (forms tier).** Currently ships `Btn`, `Form`, `Field`, `FieldGroup`, `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`. Bits-UI-backed behavior tier (Dialog, Popover, Tabs, Toast, …) lands in Phase 3.
+**UI library for the Norns ecosystem.** Pug + Civet components on Tailwind v4, with Bits UI behind the behavior tier and Iconify behind the icon system.
 
 ## Stack
 
@@ -10,8 +8,10 @@ UI library for the [Norns](https://github.com/human-synthesis/norns) ecosystem
 - [Pug](https://pugjs.org) — templates (in `.n` files)
 - [Civet](https://civet.dev) — `<script>` language
 - [Tailwind CSS v4](https://tailwindcss.com) — styling, **hard peer dep**
+- [Bits UI](https://bits-ui.com) — headless behavior (Dialog, Popover, Tabs, Accordion, …)
+- [Iconify](https://iconify.design) — icons; ships with [Lucide](https://lucide.dev) preset
 - [tailwind-merge](https://github.com/dcastil/tailwind-merge) — class deduplication
-- `@human-synthesis/norns` `^0.0.7` — peer (`nornsAutoImport` for the registration flow)
+- [`@human-synthesis/norns`](https://github.com/human-synthesis/norns) — peer (`nornsAutoImport`)
 
 ## Install
 
@@ -21,171 +21,119 @@ bun add -D @human-synthesis/norns-ui
 
 ## Setup
 
-### 1. Wire `presetUI()` into `nornsAutoImport`
-
-So `<Btn>`, `<Field>`, `<Input>`, etc. resolve in markup without explicit imports.
+`vite.config.js`:
 
 ```js
-// vite.config.js
-import { defineConfig } from 'vite';
-import { sveltekit } from '@sveltejs/kit/vite';
-import tailwindcss from '@tailwindcss/vite';
 import { nornsAutoImport } from '@human-synthesis/norns/auto-import';
-import { nornsCivetPlugin } from '@human-synthesis/norns/vite';
 import { presetUI } from '@human-synthesis/norns-ui/auto-import';
 
 const ui = presetUI();
 
-export default defineConfig({
-	plugins: [
-		nornsCivetPlugin(),
-		nornsAutoImport({
-			componentDirs: ['src/lib/components'],
-			components: ui.components
-		}),
-		tailwindcss(),
-		sveltekit()
-	]
-});
+export default {
+  plugins: [
+    nornsCivetPlugin(),
+    nornsAutoImport({
+      componentDirs: ['src/lib/components'],
+      components: ui.components
+    }),
+    tailwindcss(),
+    sveltekit()
+  ]
+};
 ```
 
-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.
-
-### 2. Import the styles
+`app.css`:
 
 ```css
-/* app.css */
 @import 'tailwindcss';
 @import '@human-synthesis/norns-ui/styles';
-
-/* override tokens here if you want a different brand color */
-@theme {
-	--color-primary-500: oklch(60% 0.2 200);
-}
-```
-
-### 3. Use components in Pug
-
-```pug
-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
 ```
 
-## Component catalog
-
-### Phase 1 — atoms
-
-CSS classes via `@layer components`. Use directly via Pug class shorthand:
+`svelte.config.js` — wrap our preprocessors so they no-op on `node_modules`. Without this, svelte-preprocess corrupts Bits UI's `<script lang="ts">` source:
 
-- `.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`
-
-### Phase 1 — Btn
+```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
+});
 
-Wrapped `<button>` with class merging, variant/size props, loading state, and snippet-prop API for icons.
+preprocess: [
+  ...nornsPreprocess().map(scopeToProject),
+  scopeToProject(nornsAutoImport({ /* … */ }))
+]
+```
 
-```pug
-Btn(variant="primary") Save
-Btn(variant="secondary" size="sm") Cancel
-Btn(loading!="{saving}" type="submit") Save
-Btn(variant="danger" onclick!="{remove}")
-	+snippet('leading')
-		// icon goes here
-	| Delete
+## Dark mode
+
+Toggle via `<html data-theme="dark">` — every component swaps. Persist the choice with a small inline script in `app.html` to avoid FOUC:
+
+```html
+<script>
+  (function () {
+    try {
+      var t = localStorage.getItem('theme');
+      if (t === 'dark' || (t === null && matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.dataset.theme = 'dark';
+      }
+    } catch (_) {}
+  })();
+</script>
 ```
 
-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?`, `onclick?`, `class?`, `children`, `leading`, `trailing`
+## Icons
 
-### Phase 2 — forms tier
+The library ships [`@iconify/svelte`](https://iconify.design/docs/icon-components/svelte/) with the [Lucide](https://lucide.dev) collection bundled. Register the collection once in your app entry so icons render in SSR and the client:
 
-#### `<Field>`
+```js
+// src/routes/+layout.svelte (or wherever fits)
+import { addCollection } from '@iconify/svelte';
+import lucide from '@iconify-json/lucide/icons.json';
+addCollection(lucide);
+```
 
-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.
+Then use `<Icon>` anywhere:
 
 ```pug
-Field(label="Email" required error!="{form?.errors?.email}" help="We'll never share it")
-	Input(name="email" type="email" required)
+Icon(name="lucide:check" size="size-5")
+Btn(icon="lucide:save") Save
 ```
 
-Props: `label?`, `help?`, `error?`, `required?`, `id?`, `class?`, `children`.
-
-#### `<Form>`, `<FieldGroup>`
+To mix in another icon set, install its JSON package (e.g. `@iconify-json/heroicons`) and `addCollection(...)` it the same way.
 
-Styled `<form>` (vertical stack via `.form`) and `<fieldset>` (`.field-group` with optional legend).
+## Usage
 
 ```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(action="?/save" form!="{form}")
+  Field(label="Title" name="title" required)
+    Input(name="title" placeholder="title…" required)
+  Btn(type="submit" variant="primary" icon="lucide:save") Save
 ```
 
-#### Form controls
+`<Field name="title">` reads its error from the parent `<Form>`'s context map; no per-page boilerplate.
 
-All accept `class?` (merged via `cn`), pull `id` + `hasError` from a parent `<Field>` automatically, and surface `aria-invalid` + `aria-describedby` for accessibility:
+## What's in here
 
-| 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"`) |
+- **Atoms** (CSS-only `@layer components`): `.btn`, `.input`, `.field`, `.form`, `.checkbox`, `.radio`, `.switch`, `.card`, `.banner`, `.badge`, `.chip`, `.avatar`, `.skeleton`, `.progress`, `.norns-header`, `.hero`, `.stepper`, `.breadcrumbs`, `.pagination`, `.accordion`, `.carousel`, plus variants/sizes.
+- **Forms**: `Btn`, `Form`, `Field`, `FieldGroup`, `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`.
+- **Behavior** (Bits UI): `Dialog`, `Sheet`, `Popover`, `Dropdown`, `Tooltip`, `Tabs`, `Accordion`, `Drawer`.
+- **Display**: `Card`, `Surface`, `Banner`, `Badge`, `Chip`, `Avatar`, `Skeleton`, `Progress`, `ProgressCircular`, `Icon`.
+- **Composite**: `Header`, `HeroBanner`, `Stepper`, `Breadcrumbs`, `Pagination`, `Carousel`.
+- **Toast**: `ToastProvider` + `toast()` / `notify()` / `dismiss()` from `@human-synthesis/norns-ui/toast`.
 
-Each has a hand-rolled `.d.ts` shim under `src/types/`.
+Hand-rolled `.d.ts` shims live under `src/types/`. Override any component by dropping `src/lib/components/<Name>.n` in your project — `nornsAutoImport`'s first-match-wins shadows the library silently.
 
 ## Theming
 
-Tokens live in [`src/styles/tokens.css`](src/styles/tokens.css) as a Tailwind v4 `@theme` block — colors, radii, sizes. Override by re-declaring `@theme { ... }` in your own `app.css` after the library import. Tailwind v4 merges layered theme blocks.
-
-Dark mode: toggle via `<html data-theme="dark">`. The library's tokens.css ships dark-theme overrides; Tailwind's existing dark-aware utilities continue to work.
-
-## Class merging
-
-Every component takes a `class` prop merged via `tailwind-merge` (the `cn` helper):
-
-```svelte
-<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);
-```
-
-## Override a component
+Tokens are in [`src/styles/tokens.css`](src/styles/tokens.css) as a Tailwind v4 `@theme` block. The library exposes:
 
-Drop a same-name file in your `src/lib/components/` and `nornsAutoImport`'s first-match-wins resolves to your version silently. No fork needed.
+- **Color scales** (50–950) for `primary`, `success`, `warning`, `danger`, `info` — all in `oklch` for perceptual uniformity. Use as `bg-primary-500`, `text-danger-700`, etc.
+- **Role tokens** that atoms reference (and that you should reach for in your own components): `--color-fg`, `--color-fg-muted`, `--color-fg-subtle`, `--color-bg`, `--color-bg-muted`, `--color-bg-subtle`, `--color-bg-elevated`, `--color-border`, `--color-border-strong`, `--color-ring`. These swap automatically on dark mode.
+- **Feedback tokens**: `--color-{success,warning,danger,info}-{bg,fg,border}` for tinted surfaces.
+- **Typography tokens**: `--font-sans`, `--font-mono`.
 
-```
-src/lib/components/Btn.n         ← your override wins
-node_modules/@human-synthesis/norns-ui/src/components/Btn.n   ← fallback
-```
+Override by re-declaring `@theme { … }` in your `app.css` after the library import.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-synthesis/norns-ui",
-	"version": "0.0.2",
+	"version": "0.0.5",
 	"description": "UI library for the Norns ecosystem — Pug + Civet components on Tailwind v4.",
 	"license": "MIT",
 	"author": "Daniel Teodoroiu (https://humansynthesis.ai)",
@@ -20,10 +20,13 @@
 		".": "./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",
 		"./components/*": "./src/components/*",
+		"./motion": "./src/motion/index.js",
+		"./motion/*": "./src/motion/*",
 		"./package.json": "./package.json"
 	},
 	"peerDependencies": {
@@ -34,19 +37,24 @@
 	},
 	"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": {
+		"@fontsource-variable/outfit": "^5.2.8",
+		"@iconify-json/lucide": "^1.2.105",
+		"@iconify/svelte": "^5.2.1",
+		"bits-ui": "^2.18.1",
+		"motion": "^12.38.0",
+		"tailwind-merge": "^2.5.0"
+	},
+	"engines": {
+		"node": ">=18"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
 }

package/src/auto-import.js

@@ -12,44 +12,118 @@
  *   plugins: [
  *     nornsCivetPlugin(),
  *     nornsAutoImport({
- *       componentDirs: ['src/lib/components'],   // user folder wins
- *       components: ui.components                 // norns-ui as fallback
+ *       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.
- *
  * @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() {
+	const c = (name) => `@human-synthesis/norns-ui/components/${name}.n`;
 	return {
 		components: {
 			// Phase 1
-			Btn: '@human-synthesis/norns-ui/components/Btn.n',
+			Btn: c('Btn'),
 
 			// 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+ adds: Card, Dialog, Sheet, Popover, Dropdown, Tooltip,
-			// Tabs, Accordion, Toast + ToastProvider, Listbox, Combobox,
-			// Pagination, Avatar, Badge, Spinner, Progress, Skeleton, Icon
+			Field: c('Field'),
+			FieldGroup: c('FieldGroup'),
+			Form: c('Form'),
+			Input: c('Input'),
+			Textarea: c('Textarea'),
+			Select: c('Select'),
+			Checkbox: c('Checkbox'),
+			Radio: c('Radio'),
+			Switch: c('Switch'),
+
+			// Phase 3 — behavior tier (Bits UI)
+			Dialog: c('Dialog'),
+			Sheet: c('Sheet'),
+			Popover: c('Popover'),
+			Dropdown: c('Dropdown'),
+			Tooltip: c('Tooltip'),
+			Tabs: c('Tabs'),
+			ToastProvider: c('ToastProvider'),
+
+			// 0.0.4 — display layer
+			Icon: c('Icon'),
+			Card: c('Card'),
+			Surface: c('Surface'),
+			Banner: c('Banner'),
+			Badge: c('Badge'),
+			Chip: c('Chip'),
+			Avatar: c('Avatar'),
+			Skeleton: c('Skeleton'),
+			Progress: c('Progress'),
+			ProgressCircular: c('ProgressCircular'),
+
+			// 0.0.4 — composite layer
+			Header: c('Header'),
+			Drawer: c('Drawer'),
+			HeroBanner: c('HeroBanner'),
+			Stepper: c('Stepper'),
+			Breadcrumbs: c('Breadcrumbs'),
+			Pagination: c('Pagination'),
+			Accordion: c('Accordion'),
+			Carousel: c('Carousel'),
+			Tree: c('Tree'),
+
+			// 0.0.4 — wave A: small/standalone
+			Separator: c('Separator'),
+			Toolbar: c('Toolbar'),
+			ButtonGroup: c('ButtonGroup'),
+			ToggleButton: c('ToggleButton'),
+			ToggleButtonGroup: c('ToggleButtonGroup'),
+			Collapsible: c('Collapsible'),
+			NumberInput: c('NumberInput'),
+			OtpField: c('OtpField'),
+			TagsInput: c('TagsInput'),
+			Image: c('Image'),
+			Audio: c('Audio'),
+			Video: c('Video'),
+			Timeline: c('Timeline'),
+
+			// 0.0.4 — wave B: medium / Bits-UI-backed
+			Autocomplete: c('Autocomplete'),
+			MultiSelect: c('MultiSelect'),
+			ContextMenu: c('ContextMenu'),
+			RichTooltip: c('RichTooltip'),
+			PreviewCard: c('PreviewCard'),
+			ScrollArea: c('ScrollArea'),
+			ColorPicker: c('ColorPicker'),
+			Uploader: c('Uploader'),
+			HierarchicalMenu: c('HierarchicalMenu'),
+			MegaMenu: c('MegaMenu'),
+
+			// 0.0.4 — wave C: pickers + table
+			DatePicker: c('DatePicker'),
+			DateRangePicker: c('DateRangePicker'),
+			TimePicker: c('TimePicker'),
+			Calendar: c('Calendar'),
+			DataTable: c('DataTable'),
+
+			// 0.0.5 — CSS-only motion components
+			AvatarGroup: c('AvatarGroup'),
+			GradientText: c('GradientText'),
+			CopyButton: c('CopyButton'),
+			ThemeToggler: c('ThemeToggler'),
+			ShinyButton: c('ShinyButton'),
+			RippleButton: c('RippleButton')
+			// Motion-driven components live in `@human-synthesis/norns-ui/motion`
+			// and are NOT registered here (opt-in import only).
 		},
 		helpers: [
-			// Phase 3+: { from: '@human-synthesis/norns-ui', imports: ['toast'] }
+			{
+				from: '@human-synthesis/norns-ui/toast',
+				imports: ['toast', 'notify', 'dismiss']
+			}
 		]
 	};
 }

package/src/components/Accordion.n

@@ -0,0 +1,38 @@
+AccordionRoot(
+	type!="{multiple ? 'multiple' : 'single'}"
+	bind:value
+	class!="{classes}"
+)
+	+each('items as item')
+		AccordionItem.accordion-item(value!="{item.value}")
+			AccordionHeader
+				AccordionTrigger.accordion-trigger
+					span
+						| {item.title}
+					.accordion-chevron
+						Icon(name="lucide:chevron-down" size="size-4")
+			AccordionContent.accordion-content
+				| {@render item.content?.()}
+
+<script>
+	import { Accordion } from 'bits-ui'
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		Root: AccordionRoot
+		Item: AccordionItem
+		Header: AccordionHeader
+		Trigger: AccordionTrigger
+		Content: AccordionContent
+	} := Accordion
+
+	{
+		items = []
+		multiple = false
+		value = $bindable(undefined)
+		class: extra = ''
+	} .= $props()
+
+	classes := cn 'accordion', extra
+</script>

package/src/components/Audio.n

@@ -0,0 +1,24 @@
+audio(src!="{src}" controls!="{controls}" autoplay!="{autoplay}" loop!="{looping}" muted!="{muted}" preload!="{preload}" class!="{classes}")
+	+each('sources as source')
+		source(src!="{source.src}" type!="{source.type}")
+	| {fallback}
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+
+	// Note: HTML attribute `loop` becomes `looping` here because `loop` is a
+	// Civet reserved word.
+	{
+		src
+		sources = []
+		controls = true
+		autoplay = false
+		loop: looping = false
+		muted = false
+		preload = 'metadata'
+		fallback = 'Your browser does not support the audio element.'
+		class: extra = ''
+	} := $props()
+
+	classes := cn 'audio-player w-full', extra
+</script>

package/src/components/Autocomplete.n

@@ -0,0 +1,59 @@
+ComboboxRoot(bind:value bind:open type="single")
+	.combobox-input-wrap
+		ComboboxInput.input.combobox-input(
+			placeholder!="{placeholder}"
+			disabled!="{disabled}"
+			oninput!="{(e) => term = e.currentTarget.value}"
+			id!="{resolvedId}"
+			aria-invalid!="{hasError ? 'true' : undefined}"
+		)
+		ComboboxTrigger.combobox-trigger(aria-label="Toggle options")
+			Icon(name="lucide:chevrons-up-down" size="size-4")
+	ComboboxPortal
+		ComboboxContent.dropdown-content
+			ComboboxViewport
+				+each('filtered as item')
+					ComboboxItem.dropdown-item(value!="{item.value}" label!="{item.label}")
+						Icon(name="lucide:check" size="size-3.5" class="opacity-0 data-[selected]:opacity-100")
+						span {item.label}
+				+if('filtered.length === 0')
+					.dropdown-item(class="text-fg-muted")
+						| No matches
+
+<script>
+	import { Combobox } from 'bits-ui'
+	import Icon from './Icon.n'
+	import { getContext } from 'svelte'
+
+	{
+		Root: ComboboxRoot
+		Input: ComboboxInput
+		Trigger: ComboboxTrigger
+		Portal: ComboboxPortal
+		Content: ComboboxContent
+		Viewport: ComboboxViewport
+		Item: ComboboxItem
+	} := Combobox
+
+	{
+		items = []
+		value = $bindable(undefined)
+		open = $bindable(false)
+		placeholder = 'Search…'
+		disabled = false
+		name
+		id: providedId
+		error: explicitError = false
+	} .= $props()
+
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+
+	term .= $state ''
+
+	filtered := $derived.by =>
+		return items unless term
+		t := term.toLowerCase()
+		items.filter (it) => it.label.toLowerCase().includes(t)
+</script>

package/src/components/Avatar.n

@@ -0,0 +1,27 @@
+span(class!="{classes}")
+	+if('src')
+		img(src!="{src}" alt!="{name ?? ''}" loading="lazy")
+	+if('!src && name')
+		| {initials}
+	+if('!src && !name')
+		Icon(name="lucide:user" size="size-1/2" class="opacity-50")
+
+<script>
+	import { cn } from '@human-synthesis/norns-ui/cn'
+	import Icon from './Icon.n'
+
+	{
+		src
+		name
+		size = 'md'
+		class: extra = ''
+		...rest
+	} := $props()
+
+	initials := $derived.by =>
+		return '' unless name
+		parts := name.trim().split /\s+/
+		`${parts[0][0] ?? ''}${parts[1]?.[0] ?? ''}`.toUpperCase()
+
+	classes := cn 'avatar', `avatar-${size}`, extra
+</script>