@insymetri/styleguide 0.1.44 → 0.1.46

package/dist/IIDateInput/IIDateInput.svelte

@@ -41,14 +41,40 @@
 	const showError = $derived(error || !!errorMessage)
 
 	let placeholder = $state<DateValue>(today(getLocalTimeZone()))
+	let inputEl = $state<HTMLElement | null>(null)
+	let internalValue = $state<DateValue | undefined>(value)
+
+	// Sync external value changes into internal state
+	$effect(() => {
+		internalValue = value
+	})
+
+	function allSegmentsEmpty() {
+		if (!inputEl) return true
+		const segments = inputEl.querySelectorAll('[data-segment]:not([data-segment="trigger"]):not([data-segment="literal"])')
+		return Array.from(segments).every(s => s.hasAttribute('data-placeholder'))
+	}
+
+	function handleValueChange(newValue: DateValue | undefined) {
+		if (newValue === undefined && !allSegmentsEmpty()) {
+			// A segment was partially cleared — restore the internal value
+			// to prevent bits-ui from wiping the date
+			internalValue = value
+			return
+		}
+		internalValue = newValue
+		value = newValue
+		onValueChange?.(newValue)
+	}
 </script>
 
 <div class={cn('flex flex-col gap-4', className)}>
-	<DatePicker.Root bind:value bind:placeholder {onValueChange} {disabled}>
+	<DatePicker.Root value={internalValue} bind:placeholder onValueChange={handleValueChange} {disabled}>
 		{#if label}
 			<DatePicker.Label class="text-small-emphasis text-secondary">{label}</DatePicker.Label>
 		{/if}
 		<DatePicker.Input
+			bind:ref={inputEl}
 			class={cn(
 				'flex items-center gap-4 px-12 border bg-input-bg border-input-border transition-all duration-fast hover:border-input-border-hover [&:has(:focus)]:border-accent [&:has(:focus)]:ring-3 [&:has(:focus)]:ring-primary motion-reduce:transition-none',
 				densityClasses[density.value],

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import {tick} from 'svelte'
 	import type {Snippet} from 'svelte'
 	import {IIIcon} from '../IIIcon'
 	import {cn} from '../utils/cn'
@@ -86,6 +87,55 @@
 		if (item) handleSelect(item)
 	}
 
+	let typeaheadBuffer = $state('')
+	let typeaheadTimer: ReturnType<typeof setTimeout> | undefined
+
+	function typeahead(char: string) {
+		const wasOpen = open
+		typeaheadBuffer += char.toLowerCase()
+		clearTimeout(typeaheadTimer)
+		typeaheadTimer = setTimeout(() => { typeaheadBuffer = '' }, 500)
+
+		const match = items.find(
+			i => !i.disabled && i.label.toLowerCase().startsWith(typeaheadBuffer)
+		)
+		if (match) {
+			value = match.value
+			onSelect?.(match.value)
+			if (!wasOpen) {
+				open = false
+				triggerEl?.focus()
+			} else {
+				tick().then(() => {
+					const el = floatingEl?.querySelector<HTMLElement>('[aria-selected="true"]')
+					el?.focus()
+					el?.scrollIntoView({block: 'nearest'})
+				})
+			}
+		}
+	}
+
+	function handleTriggerKeydown(e: KeyboardEvent) {
+		if (disabled) return
+
+		if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+			e.preventDefault()
+			if (!open) open = true
+			return
+		}
+
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault()
+			if (!open) open = true
+			return
+		}
+
+		if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			e.preventDefault()
+			typeahead(e.key)
+		}
+	}
+
 	function toggle() {
 		if (disabled) return
 		open = !open
@@ -102,12 +152,14 @@
 		}
 	})
 
-	// Focus first item when opened (non-searchable)
+	// Focus selected item (or first) when opened (non-searchable)
 	$effect(() => {
 		if (open && floatingEl && !searchable) {
 			requestAnimationFrame(() => {
-				const first = floatingEl?.querySelector<HTMLElement>('[role="option"]:not([data-disabled])')
-				first?.focus()
+				const selected = floatingEl?.querySelector<HTMLElement>('[role="option"][aria-selected="true"]:not([data-disabled])')
+				const target = selected ?? floatingEl?.querySelector<HTMLElement>('[role="option"]:not([data-disabled])')
+				target?.focus()
+				target?.scrollIntoView({block: 'nearest'})
 			})
 		}
 	})
@@ -132,6 +184,10 @@
 		const currentIndex = optionItems.indexOf(document.activeElement as HTMLElement)
 
 		switch (e.key) {
+			case 'Tab':
+				e.preventDefault()
+				focusItem(optionItems, currentIndex, e.shiftKey ? -1 : 1)
+				break
 			case 'ArrowDown':
 				e.preventDefault()
 				focusItem(optionItems, currentIndex, 1)
@@ -141,7 +197,6 @@
 				focusItem(optionItems, currentIndex, -1)
 				break
 			case 'Enter':
-			case ' ':
 				e.preventDefault()
 				;(document.activeElement as HTMLElement)?.click()
 				break
@@ -149,6 +204,12 @@
 				e.preventDefault()
 				close()
 				break
+			default:
+				if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+					e.preventDefault()
+					typeahead(e.key)
+				}
+				break
 		}
 	}
 </script>
@@ -171,6 +232,7 @@
 			className
 		)}
 		onclick={toggle}
+		onkeydown={handleTriggerKeydown}
 	>
 		{#if renderSelected && selectedItem}
 			{@render renderSelected(selectedItem)}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.44",
+	"version": "0.1.46",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {