@rokkit/ui 1.0.0-next.153 → 1.0.0-next.154

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.153",
+  "version": "1.0.0-next.154",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",

package/src/components/Dropdown.svelte

@@ -120,7 +120,7 @@
 
 	$effect(() => {
 		if (!isOpen || !panelRef) return
-		const nav = new Navigator(panelRef, wrapper, {})
+		const nav = new Navigator(panelRef, wrapper, { containScroll: true })
 		return () => nav.destroy()
 	})
 

package/src/components/Menu.svelte

@@ -150,7 +150,7 @@
 	$effect(() => {
 		if (!isOpen || !dropdownRef) return
 		const dir = getComputedStyle(dropdownRef).direction || 'ltr'
-		const nav = new Navigator(dropdownRef, wrapper, { collapsible, dir })
+		const nav = new Navigator(dropdownRef, wrapper, { collapsible, dir, containScroll: true })
 		return () => nav.destroy()
 	})
 

package/src/components/MultiSelect.svelte

@@ -204,7 +204,7 @@
 	$effect(() => {
 		if (!isOpen || !dropdownRef) return
 		const dir = getComputedStyle(dropdownRef).direction || 'ltr'
-		const nav = new Navigator(dropdownRef, wrapper, { dir })
+		const nav = new Navigator(dropdownRef, wrapper, { dir, containScroll: true })
 		return () => nav.destroy()
 	})
 

package/src/components/Select.svelte

@@ -250,7 +250,7 @@
 	$effect(() => {
 		if (!isOpen || !dropdownRef) return
 		const dir = getComputedStyle(dropdownRef).direction || 'ltr'
-		const nav = new Navigator(dropdownRef, wrapper, { dir })
+		const nav = new Navigator(dropdownRef, wrapper, { dir, containScroll: true })
 		return () => nav.destroy()
 	})
 

package/src/components/Tooltip.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	/**
+	 * Tooltip — contextual text revealed on hover or focus.
+	 *
+	 * Wraps any trigger element. Tooltip appears after a configurable delay
+	 * on mouseenter/focusin, hides immediately on mouseleave/focusout/Escape.
+	 * Position auto-flips when the preferred side would overflow the viewport.
+	 *
+	 * Data attributes:
+	 *   data-tooltip-root     — wrapper element (position: relative)
+	 *   data-tooltip-content  — tooltip bubble
+	 *   data-tooltip-position — actual position after auto-flip
+	 *   data-tooltip-visible  — "true" while visible
+	 */
+	import type { TooltipProps } from '../types/tooltip.js'
+
+	let {
+		content = '',
+		position = 'top',
+		delay = 300,
+		class: className,
+		children,
+		tooltipContent
+	}: TooltipProps = $props()
+
+	const id = `tt-${Math.random().toString(36).slice(2, 9)}`
+	let visible = $state(false)
+	// positionOverride is set by auto-flip during show; null resets to the position prop
+	let positionOverride = $state<typeof position | null>(null)
+	const resolvedPosition = $derived(positionOverride ?? position)
+	let timer: ReturnType<typeof setTimeout> | null = null
+	let rootEl = $state<HTMLElement | null>(null)
+	let tooltipEl = $state<HTMLElement | null>(null)
+
+	const GAP = 6
+
+	function resolveFlip(
+		triggerRect: DOMRect,
+		tooltipRect: DOMRect,
+		preferred: typeof position
+	): typeof position {
+		const vw = window.innerWidth
+		const vh = window.innerHeight
+		const fits: Record<string, boolean> = {
+			top: triggerRect.top >= tooltipRect.height + GAP,
+			bottom: triggerRect.bottom + tooltipRect.height + GAP <= vh,
+			left: triggerRect.left >= tooltipRect.width + GAP,
+			right: triggerRect.right + tooltipRect.width + GAP <= vw
+		}
+		if (fits[preferred]) return preferred
+		const flip: Record<string, typeof position> = {
+			top: 'bottom',
+			bottom: 'top',
+			left: 'right',
+			right: 'left'
+		}
+		if (fits[flip[preferred]]) return flip[preferred]
+		return (Object.keys(fits).find((p) => fits[p]) as typeof position) ?? preferred
+	}
+
+	function updatePosition() {
+		if (!rootEl || !tooltipEl) return
+		const triggerRect = rootEl.getBoundingClientRect()
+		const tooltipRect = tooltipEl.getBoundingClientRect()
+		positionOverride = resolveFlip(triggerRect, tooltipRect, position)
+	}
+
+	function show() {
+		updatePosition()
+		visible = true
+	}
+
+	function hide() {
+		if (timer) clearTimeout(timer)
+		visible = false
+		positionOverride = null
+	}
+
+	function onMouseEnter() {
+		timer = setTimeout(show, delay)
+	}
+
+	function onMouseLeave() {
+		if (timer) clearTimeout(timer)
+		hide()
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') hide()
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<span
+	data-tooltip-root
+	role="group"
+	aria-describedby={id}
+	class={className || undefined}
+	onmouseenter={onMouseEnter}
+	onmouseleave={onMouseLeave}
+	onfocusin={show}
+	onfocusout={hide}
+	onkeydown={onKeydown}
+	bind:this={rootEl}
+>
+	{@render children?.()}
+	<div
+		data-tooltip-content
+		data-tooltip-position={resolvedPosition}
+		data-tooltip-visible={visible ? 'true' : 'false'}
+		{id}
+		role="tooltip"
+		bind:this={tooltipEl}
+	>
+		{#if tooltipContent}
+			{@render tooltipContent()}
+		{:else}
+			{content}
+		{/if}
+	</div>
+</span>

package/src/components/UploadTarget.svelte

@@ -21,6 +21,7 @@
 		maxSize = Infinity,
 		multiple = false,
 		disabled = false,
+		size = 'full',
 		labels = {} as Record<string, string>,
 		onfiles,
 		onerror,
@@ -87,6 +88,7 @@
 
 <div
 	data-upload-target
+	data-size={size}
 	data-disabled={disabled || undefined}
 	data-dragging={dragging || undefined}
 	role="button"
@@ -106,8 +108,10 @@
 		{@render content(dragging)}
 	{:else}
 		<span data-upload-icon class="i-lucide:upload" aria-hidden="true"></span>
-		<p>Drop files here or click to browse</p>
-		<button type="button" data-upload-button {disabled}>Browse</button>
+		{#if size !== 'small'}
+			<p>Drop files here or click to browse</p>
+			<button type="button" data-upload-button {disabled}>Browse</button>
+		{/if}
 	{/if}
 
 	<input

package/src/components/index.ts

@@ -45,3 +45,4 @@ export { default as Divider } from './Divider.svelte'
 export { default as Stack } from './Stack.svelte'
 export { default as Badge } from './Badge.svelte'
 export { default as Avatar } from './Avatar.svelte'
+export { default as Tooltip } from './Tooltip.svelte'

package/src/index.ts

@@ -44,7 +44,8 @@ export {
 	Divider,
 	Stack,
 	Badge,
-	Avatar
+	Avatar,
+	Tooltip
 } from './components/index.js'
 
 export { default as MarkdownRenderer } from './MarkdownRenderer.svelte'

package/src/types/index.ts

@@ -53,3 +53,6 @@ export * from './floating-navigation.js'
 export * from './upload-target.js'
 export * from './upload-file-status.js'
 export * from './upload-progress.js'
+
+// Tooltip Types
+export * from './tooltip.js'

package/src/types/tooltip.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte'
+
+export interface TooltipProps {
+	/** Tooltip text (alternative: use tooltipContent snippet for rich content) */
+	content?: string
+
+	/** Preferred position — auto-flips when the preferred side overflows the viewport */
+	position?: 'top' | 'bottom' | 'left' | 'right'
+
+	/** Show delay in ms (default: 300) */
+	delay?: number
+
+	/** Additional CSS classes on the root wrapper */
+	class?: string
+
+	/** Trigger element(s) */
+	children?: Snippet
+
+	/** Rich tooltip content — overrides the content string */
+	tooltipContent?: Snippet
+}

package/src/types/upload-target.ts

@@ -60,6 +60,9 @@ export interface UploadTargetProps {
 	/** Called for each file that fails validation */
 	onerror?: (err: UploadError) => void
 
+	/** Size variant — full (default) fills available area; small shows only border + icon */
+	size?: 'full' | 'small'
+
 	/** Additional CSS classes */
 	class?: string