@human-synthesis/norns-ui 0.0.5 → 0.0.7

package/src/components/Dialog.n

@@ -1,15 +1,28 @@
-DialogRoot(bind:open)
-	+if('trigger')
-		DialogTrigger(class!="{triggerClass ?? undefined}")
-			| {@render trigger()}
-	DialogPortal
-		DialogOverlay(class!="{overlayClasses}")
-		DialogContent(class!="{contentClasses}")
++if('trigger')
+	span(class!="{triggerClass ?? ''}" onclick!="{() => open = true}")
+		| {@render trigger()}
+
++if('open')
+	div(use:portal use:scrollLock)
+		div(
+			data-state="open"
+			class!="{overlayClasses}"
+			onclick!="{onOverlayClick}"
+		)
+		div(
+			role="dialog"
+			aria-modal="true"
+			aria-label!="{title ?? ariaLabel}"
+			class!="{contentClasses}"
+			data-state="open"
+			use:focusTrap
+			use:escape!="{[onClose, open]}"
+		)
 			+if('title')
-				DialogTitle.dialog-title
+				h2.dialog-title
 					| {title}
 			+if('description')
-				DialogDescription.dialog-description
+				p.dialog-description
 					| {description}
 			+if('children')
 				.dialog-body
@@ -18,29 +31,23 @@ DialogRoot(bind:open)
 				.dialog-actions
 					| {@render actions()}
 			+if('!hideClose')
-				DialogClose.dialog-close(aria-label="Close")
+				button.dialog-close(type="button" aria-label="Close" onclick!="{onClose}")
 					| ✕
 
 <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
+	import { portal } from '@human-synthesis/norns-ui/behaviors/portal.svelte.js'
+	import { scrollLock } from '@human-synthesis/norns-ui/behaviors/scrollLock.svelte.js'
+	import { focusTrap } from '@human-synthesis/norns-ui/behaviors/focusTrap.svelte.js'
+	import { escape } from '@human-synthesis/norns-ui/behaviors/escape.svelte.js'
 
 	{
 		open = $bindable(false)
 		title
 		description
 		hideClose = false
+		dismissable = true
+		ariaLabel
 		trigger
 		actions
 		children
@@ -51,4 +58,10 @@ DialogRoot(bind:open)
 
 	overlayClasses := cn 'dialog-overlay', overlayClass
 	contentClasses := cn 'dialog-content', extra
+
+	onClose := => open = false
+
+	onOverlayClick := (e) =>
+		return unless dismissable
+		open = false if e.target === e.currentTarget
 </script>

package/src/components/Dropdown.n

@@ -1,29 +1,44 @@
-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?.()}
++if('trigger')
+	span(use:refAction bind:this!="{triggerEl}" class!="{triggerClass ?? ''}" onclick!="{toggle}")
+		| {@render trigger()}
+
++if('open')
+	div(
+		use:portal
+		use:floatAction
+		use:clickOutside!="{[onClose, open, triggerEl]}"
+		use:escape!="{[onClose, open]}"
+		use:rovingTabindex!="{{ orientation: 'vertical', selector: '[data-roving]' }}"
+		class!="{contentClasses}"
+		data-state="open"
+		role="menu"
+	)
+		+each('items as item, i')
+			+if('item.separator')
+				.dropdown-separator(role="separator")
+			+if('!item.separator')
+				button.dropdown-item(
+					type="button"
+					role="menuitem"
+					data-roving
+					data-disabled!="{item.disabled ? '' : undefined}"
+					disabled!="{item.disabled}"
+					onclick!="{() => onItem(item)}"
+				)
+					+if('item.icon')
+						Icon(name!="{item.icon}" size="size-3.5" class="text-fg-muted shrink-0")
+					span.flex-1 {item.label}
+		+if('children')
+			| {@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
+	import { portal } from '@human-synthesis/norns-ui/behaviors/portal.svelte.js'
+	import { clickOutside } from '@human-synthesis/norns-ui/behaviors/clickOutside.svelte.js'
+	import { escape } from '@human-synthesis/norns-ui/behaviors/escape.svelte.js'
+	import { rovingTabindex } from '@human-synthesis/norns-ui/behaviors/rovingTabindex.svelte.js'
+	import { useFloating } from '@human-synthesis/norns-ui/behaviors/floating.svelte.js'
+	import Icon from './Icon.n'
 
 	{
 		open = $bindable(false)
@@ -37,5 +52,21 @@ MenuRoot(bind:open)
 		class: extra = ''
 	} .= $props()
 
+	placement := align === 'center' ? side : `${side}-${align}`
+
+	{ reference: refAction, floating: floatAction } := useFloating
+		placement: placement
+		offset: sideOffset
+
 	contentClasses := cn 'dropdown-content', extra
+
+	triggerEl .= $state null
+
+	toggle := => open = !open
+	onClose := => open = false
+
+	onItem := (item) =>
+		return if item.disabled
+		item.onSelect?.()
+		open = false
 </script>

package/src/components/MultiSelect.n

@@ -1,56 +1,158 @@
-ComboboxRoot(bind:value bind:open type="multiple")
-	.combobox-input-wrap
-		ComboboxInput.input.combobox-input(
-			placeholder!="{placeholder}"
-			disabled!="{disabled}"
-			oninput!="{(e) => term = e.currentTarget.value}"
-		)
-		ComboboxTrigger.combobox-trigger(aria-label="Toggle options")
-			Icon(name="lucide:chevrons-up-down" size="size-4")
-	+if('value.length > 0')
-		.flex.flex-wrap.gap-1.mt-2
-			+each('value as v')
-				span.chip
-					| {labelOf(v)}
-	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
+.tags-input.multi-select(
+	use:refAction
+	bind:this!="{wrapEl}"
+	class!="{hasError ? 'tags-input-err' : ''}"
+	onclick!="{focusInput}"
+)
+	+each('value as v')
+		span.chip
+			| {labelOf(v)}
+			button.chip-remove(
+				type="button"
+				aria-label="Remove"
+				onclick!="{(e) => { e.stopPropagation(); unpick(v) }}"
+				onpointerdown!="{(e) => e.stopPropagation()}"
+			)
+				Icon(name="lucide:x" size="size-3")
+	input.tags-input-field(
+		bind:this!="{inputEl}"
+		type="text"
+		bind:value!="{term}"
+		placeholder!="{value.length === 0 ? placeholder : ''}"
+		disabled!="{disabled}"
+		role="combobox"
+		aria-expanded!="{open}"
+		aria-controls!="{listboxId}"
+		aria-autocomplete="list"
+		id!="{resolvedId}"
+		aria-invalid!="{hasError ? 'true' : undefined}"
+		oninput!="{onInput}"
+		onkeydown!="{onKeyDown}"
+		onfocus!="{() => open = true}"
+		onblur!="{onBlur}"
+	)
+	button.multi-select-toggle.shrink-0(
+		type="button"
+		tabindex="-1"
+		aria-label="Toggle options"
+		onclick!="{(e) => { e.stopPropagation(); toggle() }}"
+	)
+		Icon(name="lucide:chevrons-up-down" size="size-4")
+
++if('open && filtered.length > 0')
+	ul(
+		use:portal
+		use:floatAction
+		use:clickOutside!="{[onClose, open, wrapEl]}"
+		class="dropdown-content combobox-listbox"
+		data-state="open"
+		id!="{listboxId}"
+		role="listbox"
+		aria-multiselectable="true"
+	)
+		+each('filtered as item, i (item.value)')
+			li.dropdown-item(
+				role="option"
+				aria-selected!="{value.includes(item.value)}"
+				data-active!="{i === active ? 'true' : undefined}"
+				onpointerdown!="{(e) => { e.preventDefault(); pick(item) }}"
+			)
+				Icon(name="lucide:check" size="size-3.5" class!="{value.includes(item.value) ? '' : 'opacity-0'}")
+				span {item.label}
++if('open && filtered.length === 0')
+	div(use:portal use:floatAction use:clickOutside!="{[onClose, open, wrapEl]}" class="dropdown-content combobox-listbox" data-state="open")
+		.combobox-empty No matches
 
 <script>
-	import { Combobox } from 'bits-ui'
+	import { getContext } from 'svelte'
 	import Icon from './Icon.n'
-
-	{
-		Root: ComboboxRoot
-		Input: ComboboxInput
-		Trigger: ComboboxTrigger
-		Portal: ComboboxPortal
-		Content: ComboboxContent
-		Viewport: ComboboxViewport
-		Item: ComboboxItem
-	} := Combobox
+	import { portal } from '@human-synthesis/norns-ui/behaviors/portal.svelte.js'
+	import { clickOutside } from '@human-synthesis/norns-ui/behaviors/clickOutside.svelte.js'
+	import { useFloating } from '@human-synthesis/norns-ui/behaviors/floating.svelte.js'
 
 	{
 		items = []
 		value = $bindable([])
 		open = $bindable(false)
-		placeholder = 'Search…'
+		placeholder = 'Pick options…'
 		disabled = false
+		name
+		id: providedId
+		error: explicitError = false
 	} .= $props()
 
+	field := getContext 'norns-ui:field'
+	resolvedId := providedId ?? field?.id
+	hasError := explicitError || field?.hasError || false
+
+	uid := Math.random().toString(36).slice(2, 8)
+	listboxId := `listbox-${uid}`
+
+	{ reference: refAction, floating: floatAction } := useFloating
+		placement: 'bottom-start'
+		offset: 4
+		matchWidth: true
+
 	term .= $state ''
+	active .= $state 0
+	inputEl .= $state null
+	wrapEl .= $state null
 
 	filtered := $derived.by =>
 		return items unless term
 		t := term.toLowerCase()
 		items.filter (it) => it.label.toLowerCase().includes(t)
 
+	$effect =>
+		active = 0 if active >= filtered.length
+
 	labelOf := (v) => items.find((it) => it.value === v)?.label ?? v
+
+	focusInput := => inputEl?.focus()
+
+	onInput := =>
+		open = true
+		active = 0
+
+	toggle := =>
+		open = !open
+		inputEl?.focus() if open
+
+	onClose := => open = false
+
+	onBlur := =>
+		setTimeout (=> open = false), 100
+
+	pick := (item) =>
+		if value.includes(item.value)
+			value = value.filter (v) => v !== item.value
+		else
+			value = [...value, item.value]
+		term = ''
+
+	unpick := (v) =>
+		value = value.filter (x) => x !== v
+		inputEl?.focus()
+
+	onKeyDown := (e) =>
+		switch e.key
+			when 'ArrowDown'
+				e.preventDefault()
+				open = true
+				active = Math.min(filtered.length - 1, active + 1)
+			when 'ArrowUp'
+				e.preventDefault()
+				open = true
+				active = Math.max(0, active - 1)
+			when 'Enter'
+				if open && filtered[active]
+					e.preventDefault()
+					pick filtered[active]
+			when 'Backspace'
+				if !term && value.length > 0
+					value = value.slice(0, -1)
+			when 'Escape'
+				open = false
+			when 'Tab'
+				open = false
 </script>

package/src/components/Popover.n

@@ -1,21 +1,25 @@
-PopoverRoot(bind:open)
-	+if('trigger')
-		PopoverTrigger(class!="{triggerClass ?? undefined}")
-			| {@render trigger()}
-	PopoverPortal
-		PopoverContent(class!="{contentClasses}" side!="{side}" align!="{align}" sideOffset!="{sideOffset}")
-			| {@render children?.()}
++if('trigger')
+	span(use:refAction bind:this!="{triggerEl}" class!="{triggerClass ?? ''}" onclick!="{toggle}")
+		| {@render trigger()}
+
++if('open')
+	div(
+		use:portal
+		use:floatAction
+		use:clickOutside!="{[onClose, open, triggerEl]}"
+		use:escape!="{[onClose, open]}"
+		class!="{contentClasses}"
+		data-state="open"
+		role="dialog"
+	)
+		| {@render children?.()}
 
 <script>
-	import { Popover } from 'bits-ui'
 	import { cn } from '@human-synthesis/norns-ui/cn'
-
-	{
-		Root: PopoverRoot
-		Trigger: PopoverTrigger
-		Portal: PopoverPortal
-		Content: PopoverContent
-	} := Popover
+	import { portal } from '@human-synthesis/norns-ui/behaviors/portal.svelte.js'
+	import { clickOutside } from '@human-synthesis/norns-ui/behaviors/clickOutside.svelte.js'
+	import { escape } from '@human-synthesis/norns-ui/behaviors/escape.svelte.js'
+	import { useFloating } from '@human-synthesis/norns-ui/behaviors/floating.svelte.js'
 
 	{
 		open = $bindable(false)
@@ -28,5 +32,16 @@ PopoverRoot(bind:open)
 		class: extra = ''
 	} .= $props()
 
+	placement := align === 'center' ? side : `${side}-${align}`
+
+	{ reference: refAction, floating: floatAction } := useFloating
+		placement: placement
+		offset: sideOffset
+
 	contentClasses := cn 'popover-content', extra
+
+	triggerEl .= $state null
+
+	toggle := => open = !open
+	onClose := => open = false
 </script>

package/src/components/ScrollArea.n

@@ -1,31 +1,20 @@
-ScrollAreaRoot.scroll-area(class!="{classes}" type!="{type}")
-	ScrollAreaViewport.scroll-area-viewport
-		| {@render children?.()}
-	ScrollAreaScrollbar.scroll-area-scrollbar(orientation="vertical")
-		ScrollAreaThumb.scroll-area-thumb
-	+if('horizontal')
-		ScrollAreaScrollbar.scroll-area-scrollbar.scroll-area-scrollbar-h(orientation="horizontal")
-			ScrollAreaThumb.scroll-area-thumb
-	ScrollAreaCorner
+div(class!="{classes}")
+	| {@render children?.()}
 
 <script>
-	import { ScrollArea } from 'bits-ui'
 	import { cn } from '@human-synthesis/norns-ui/cn'
 
 	{
-		Root: ScrollAreaRoot
-		Viewport: ScrollAreaViewport
-		Scrollbar: ScrollAreaScrollbar
-		Thumb: ScrollAreaThumb
-		Corner: ScrollAreaCorner
-	} := ScrollArea
-
-	{
-		type = 'hover'
 		horizontal = false
 		children
 		class: extra = ''
 	} := $props()
 
-	classes := cn 'relative overflow-hidden', extra
+	// Atoms defined in atoms.css — see `.norns-scroll-area*` rules. The
+	// utility-class approach (`overflow-y-auto overflow-x-hidden`) cannot
+	// be used here because Tailwind's content scanner doesn't see strings
+	// inside library-side `cn()` calls.
+	classes := cn
+		horizontal ? 'norns-scroll-area-horizontal' : 'norns-scroll-area'
+		extra
 </script>

package/src/components/Sheet.n

@@ -1,15 +1,29 @@
-DialogRoot(bind:open)
-	+if('trigger')
-		DialogTrigger(class!="{triggerClass ?? undefined}")
-			| {@render trigger()}
-	DialogPortal
-		DialogOverlay(class!="{overlayClasses}")
-		DialogContent(class!="{contentClasses}" data-side!="{side}")
++if('trigger')
+	span(class!="{triggerClass ?? ''}" onclick!="{() => open = true}")
+		| {@render trigger()}
+
++if('open')
+	div(use:portal use:scrollLock)
+		div(
+			data-state="open"
+			class!="{overlayClasses}"
+			onclick!="{onOverlayClick}"
+		)
+		div(
+			role="dialog"
+			aria-modal="true"
+			aria-label!="{title ?? ariaLabel}"
+			class!="{contentClasses}"
+			data-state="open"
+			data-side!="{side}"
+			use:focusTrap
+			use:escape!="{[onClose, open]}"
+		)
 			+if('title')
-				DialogTitle.dialog-title
+				h2.dialog-title
 					| {title}
 			+if('description')
-				DialogDescription.dialog-description
+				p.dialog-description
 					| {description}
 			+if('children')
 				.sheet-body
@@ -18,23 +32,15 @@ DialogRoot(bind:open)
 				.dialog-actions
 					| {@render actions()}
 			+if('!hideClose')
-				DialogClose.dialog-close(aria-label="Close")
+				button.dialog-close(type="button" aria-label="Close" onclick!="{onClose}")
 					| ✕
 
 <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
+	import { portal } from '@human-synthesis/norns-ui/behaviors/portal.svelte.js'
+	import { scrollLock } from '@human-synthesis/norns-ui/behaviors/scrollLock.svelte.js'
+	import { focusTrap } from '@human-synthesis/norns-ui/behaviors/focusTrap.svelte.js'
+	import { escape } from '@human-synthesis/norns-ui/behaviors/escape.svelte.js'
 
 	{
 		open = $bindable(false)
@@ -42,6 +48,8 @@ DialogRoot(bind:open)
 		title
 		description
 		hideClose = false
+		dismissable = true
+		ariaLabel
 		trigger
 		actions
 		children
@@ -52,4 +60,10 @@ DialogRoot(bind:open)
 
 	overlayClasses := cn 'dialog-overlay', overlayClass
 	contentClasses := cn 'sheet-content', `sheet-${side}`, extra
+
+	onClose := => open = false
+
+	onOverlayClick := (e) =>
+		return unless dismissable
+		open = false if e.target === e.currentTarget
 </script>

package/src/components/Tabs.n

@@ -1,28 +1,54 @@
-TabsRoot(bind:value class!="{rootClasses}")
-	TabsList.tabs-list
+.tabs-root(class!="{rootClasses}")
+	.tabs-list(
+		role="tablist"
+		aria-label!="{label}"
+		use:rovingTabindex!="{{ orientation: 'horizontal' }}"
+	)
 		+each('items as item (item.value)')
-			TabsTrigger.tabs-trigger(value!="{item.value}" disabled!="{item.disabled}")
+			button.tabs-trigger(
+				type="button"
+				role="tab"
+				id!="{tabId(item.value)}"
+				aria-selected!="{value === item.value}"
+				aria-controls!="{panelId(item.value)}"
+				data-state!="{value === item.value ? 'active' : 'inactive'}"
+				data-roving
+				disabled!="{item.disabled}"
+				onclick!="{() => select(item.value)}"
+			)
 				| {item.label}
 	+each('items as item (item.value)')
-		TabsContent.tabs-content(value!="{item.value}")
-			| {@render item.panel?.()}
+		.tabs-content(
+			role="tabpanel"
+			id!="{panelId(item.value)}"
+			aria-labelledby!="{tabId(item.value)}"
+			tabindex="0"
+			hidden!="{value !== item.value ? 'until-found' : undefined}"
+		)
+			+if('value === item.value')
+				| {@render item.panel?.()}
 
 <script>
-	import { Tabs } from 'bits-ui'
 	import { cn } from '@human-synthesis/norns-ui/cn'
-
-	{
-		Root: TabsRoot
-		List: TabsList
-		Trigger: TabsTrigger
-		Content: TabsContent
-	} := Tabs
+	import { rovingTabindex } from '@human-synthesis/norns-ui/behaviors/rovingTabindex.svelte.js'
 
 	{
 		value = $bindable()
 		items = []
+		label = 'Tabs'
 		class: extra = ''
 	} .= $props()
 
 	rootClasses := cn 'tabs-root', extra
+
+	// Lazy default to first tab if no value bound.
+	$effect =>
+		if value === undefined && items.length > 0 && !items[0].disabled
+			value = items[0].value
+
+	uid := Math.random().toString(36).slice(2, 8)
+	tabId := (v) => `tab-${uid}-${v}`
+	panelId := (v) => `tabpanel-${uid}-${v}`
+
+	select := (v) => value = v
 </script>