@rokkit/ui 1.0.0-next.145 → 1.0.0-next.146

package/package.json

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

package/src/components/AlertList.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { SvelteSet } from 'svelte/reactivity'
+	import { alerts } from '@rokkit/states'
+	import Message from './Message.svelte'
+
+	interface AlertListProps {
+		/** Screen position for the toast stack */
+		position?:
+			| 'top-right'
+			| 'top-center'
+			| 'top-left'
+			| 'bottom-right'
+			| 'bottom-center'
+			| 'bottom-left'
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const { position = 'top-right', class: className = '' }: AlertListProps = $props()
+
+	let el: HTMLElement | undefined = $state()
+	const dismissing = new SvelteSet<string>()
+
+	// Portal to document.body so position:fixed is relative to the viewport,
+	// not clipped by any overflow:auto ancestor (e.g. the docs main column).
+	$effect(() => {
+		if (!el) return
+
+		document.body.appendChild(el)
+		return () => el?.remove()
+	})
+
+	function startDismiss(id: string) {
+		dismissing.add(id)
+	}
+
+	function onTransitionEnd(id: string, e: TransitionEvent) {
+		if (e.propertyName === 'max-height' && dismissing.has(id)) {
+			dismissing.delete(id)
+			alerts.dismiss(id)
+		}
+	}
+</script>
+
+<div bind:this={el} data-alert-list data-position={position} class={className || undefined}>
+	{#each alerts.current as alert (alert.id)}
+		<div
+			data-dismissing={dismissing.has(alert.id) || undefined}
+			ontransitionend={(e) => onTransitionEnd(alert.id, e)}
+		>
+			<Message
+				type={alert.type as 'error' | 'info' | 'success' | 'warning'}
+				text={alert.text}
+				dismissible={alert.dismissible}
+				actions={alert.actions as any}
+				ondismiss={() => startDismiss(alert.id)}
+			/>
+		</div>
+	{/each}
+</div>

package/src/components/Card.svelte

@@ -6,6 +6,8 @@
 		href?: string
 		/** Click handler (only applies when no href) */
 		onclick?: () => void
+		/** Visual variant */
+		variant?: 'default' | 'primary' | 'secondary' | 'tertiary'
 		/** Additional CSS class */
 		class?: string
 		/** Card header snippet */
@@ -16,7 +18,7 @@
 		children?: Snippet
 	}
 
-	const { href, onclick, class: className = '', header, footer, children }: CardProps = $props()
+	const { href, onclick, variant = 'default', class: className = '', header, footer, children }: CardProps = $props()
 </script>
 
 {#snippet cardContent()}
@@ -40,15 +42,15 @@
 {/snippet}
 
 {#if href}
-	<a {href} data-card class={className || undefined}>
+	<a {href} data-card data-variant={variant} class={className || undefined}>
 		{@render cardContent()}
 	</a>
 {:else if onclick}
-	<button type="button" data-card data-card-interactive class={className || undefined} {onclick}>
+	<button type="button" data-card data-card-interactive data-variant={variant} class={className || undefined} {onclick}>
 		{@render cardContent()}
 	</button>
 {:else}
-	<div data-card class={className || undefined}>
+	<div data-card data-variant={variant} class={className || undefined}>
 		{@render cardContent()}
 	</div>
 {/if}

package/src/components/Dropdown.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	/**
+	 * Dropdown — Trigger that shows the selected value + dropdown panel with options.
+	 *
+	 * Similar to Menu but the trigger label reflects the currently selected value
+	 * instead of a static label prop.
+	 *
+	 * Data attributes:
+	 *   data-dropdown          — root container
+	 *   data-dropdown-trigger  — trigger button
+	 *   data-dropdown-icon     — optional icon in trigger
+	 *   data-dropdown-label    — selected value text in trigger
+	 *   data-dropdown-arrow    — expand/collapse chevron
+	 *   data-dropdown-panel    — dropdown options panel
+	 *   data-dropdown-option   — each option item
+	 *   data-dropdown-separator — separator between options
+	 *   data-active            — marks the currently selected option
+	 *   data-open              — present on root when panel is open
+	 *   data-size              — size variant (sm | md | lg)
+	 *   data-align             — panel alignment (start | end)
+	 *   data-direction         — panel direction (down | up)
+	 */
+	// @ts-nocheck
+	import { ProxyTree, Wrapper } from '@rokkit/states'
+	import { Navigator, Trigger } from '@rokkit/actions'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+
+	interface DropdownIcons {
+		opened?: string
+		closed?: string
+	}
+
+	let {
+		items = [],
+		fields = {},
+		value = $bindable(),
+		placeholder = 'Select...',
+		icon,
+		size = 'md',
+		disabled = false,
+		showArrow = true,
+		align = 'start',
+		direction = 'down',
+		icons: userIcons = {} as DropdownIcons,
+		onchange,
+		class: className = ''
+	}: {
+		items?: unknown[]
+		fields?: Record<string, string>
+		value?: unknown
+		placeholder?: string
+		icon?: string
+		size?: string
+		disabled?: boolean
+		showArrow?: boolean
+		align?: 'start' | 'end'
+		direction?: 'up' | 'down'
+		icons?: DropdownIcons
+		onchange?: (value: unknown, item: unknown) => void
+		class?: string
+	} = $props()
+
+	const icons = $derived({ ...DEFAULT_STATE_ICONS.selector, ...userIcons })
+
+	// ─── State ────────────────────────────────────────────────────────────────
+
+	let isOpen = $state(false)
+	let rootRef = $state<HTMLElement | null>(null)
+	let triggerRef = $state<HTMLElement | null>(null)
+	let panelRef = $state<HTMLElement | null>(null)
+
+	// ─── Wrapper ──────────────────────────────────────────────────────────────
+
+	function handleSelect(v: unknown, proxy: unknown) {
+		if ((proxy as { disabled?: boolean }).disabled) return
+		value = v
+		onchange?.(v, (proxy as { original: unknown }).original)
+		isOpen = false
+		triggerRef?.focus()
+	}
+
+	const proxyTree = $derived(new ProxyTree(items, fields))
+	const wrapper = $derived(new Wrapper(proxyTree, { onselect: handleSelect }))
+
+	$effect(() => {
+		const w = wrapper
+		w.cancel = () => {
+			isOpen = false
+			triggerRef?.focus()
+		}
+		w.blur = () => {
+			isOpen = false
+		}
+	})
+
+	$effect(() => {
+		const _w = wrapper
+		if (isOpen) _w.first(null)
+	})
+
+	// ─── Trigger action ───────────────────────────────────────────────────────
+
+	$effect(() => {
+		if (!triggerRef || !rootRef || disabled) return
+		const t = new Trigger(triggerRef, rootRef, {
+			isOpen: () => isOpen,
+			onopen: () => {
+				isOpen = true
+				requestAnimationFrame(() => wrapper.first(null))
+			},
+			onclose: () => {
+				isOpen = false
+			},
+			onlast: () => requestAnimationFrame(() => wrapper.last(null))
+		})
+		return () => t.destroy()
+	})
+
+	// ─── Navigator on panel ───────────────────────────────────────────────────
+
+	$effect(() => {
+		if (!isOpen || !panelRef) return
+		const nav = new Navigator(panelRef, wrapper, {})
+		return () => nav.destroy()
+	})
+
+	// Focus sync — move DOM focus to focusedKey in panel
+	$effect(() => {
+		const key = wrapper.focusedKey
+		if (!isOpen || !panelRef || !key) return
+		requestAnimationFrame(() => {
+			const target = panelRef?.querySelector(`[data-path="${key}"]`) as HTMLElement | null
+			if (target && target !== document.activeElement) target.focus()
+		})
+	})
+
+	// ─── Selected label ───────────────────────────────────────────────────────
+
+	const selectedLabel = $derived.by(() => {
+		if (value === undefined || value === null) return null
+		for (const node of wrapper.flatView) {
+			if (node.proxy.value === value) return node.proxy.label
+		}
+		return String(value)
+	})
+</script>
+
+<div
+	bind:this={rootRef}
+	data-dropdown
+	data-open={isOpen || undefined}
+	data-size={size}
+	data-disabled={disabled || undefined}
+	data-align={align}
+	data-direction={direction}
+	class={className || undefined}
+>
+	<button
+		bind:this={triggerRef}
+		type="button"
+		data-dropdown-trigger
+		{disabled}
+		aria-haspopup="listbox"
+		aria-expanded={isOpen}
+	>
+		{#if icon}
+			<span data-dropdown-icon class={icon} aria-hidden="true"></span>
+		{/if}
+		<span data-dropdown-label>{selectedLabel ?? placeholder}</span>
+		{#if showArrow}
+			<span data-dropdown-arrow class={isOpen ? icons.opened : icons.closed} aria-hidden="true"
+			></span>
+		{/if}
+	</button>
+
+	{#if isOpen}
+		<div bind:this={panelRef} data-dropdown-panel role="listbox">
+			{#each wrapper.flatView as node (node.key)}
+				{@const proxy = node.proxy}
+				{@const isActive = proxy.value === value}
+
+				{#if node.type === 'separator'}
+					<hr data-dropdown-separator />
+				{:else}
+					<button
+						type="button"
+						data-dropdown-option
+						data-path={node.key}
+						data-active={isActive || undefined}
+						data-disabled={proxy.disabled || undefined}
+						disabled={proxy.disabled || disabled}
+						role="option"
+						aria-selected={isActive}
+						tabindex="-1"
+					>
+						<span data-dropdown-option-label>{proxy.label}</span>
+					</button>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>

package/src/components/FloatingNavigation.svelte

@@ -141,7 +141,10 @@
 		focusDomItem(index)
 	}
 
-	function matchesEntryId(item: { proxy: ProxyItem; original: Record<string, unknown> }, id: string): boolean {
+	function matchesEntryId(
+		item: { proxy: ProxyItem; original: Record<string, unknown> },
+		id: string
+	): boolean {
 		return resolveTargetId(item) === id
 	}
 

package/src/components/List.svelte

@@ -82,6 +82,15 @@
 		return () => nav.destroy()
 	})
 
+	// Expand all groups on mount and when items change.
+	// collapsible=false: groups are fixed section headers — must always show children.
+	// collapsible=true: groups start expanded; user can collapse individual groups.
+	$effect(() => {
+		for (const [, proxy] of wrapper.lookup) {
+			if (proxy.hasChildren) proxy.expanded = true
+		}
+	})
+
 	// ─── Sync external value → focused key ────────────────────────────────────
 
 	$effect(() => {

package/src/components/Message.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+
+	interface MessageProps {
+		/** Alert type — controls color and icon */
+		type?: 'error' | 'info' | 'success' | 'warning'
+		/** Icon class overrides per type */
+		icons?: { error?: string; info?: string; success?: string; warning?: string }
+		/** Text content (shorthand; children takes precedence) */
+		text?: string
+		/** Show dismiss button */
+		dismissible?: boolean
+		/** Auto-dismiss after N ms. Defaults to 4000 unless dismissible (persistent). Pass 0 to disable. */
+		timeout?: number
+		/** Optional action buttons snippet */
+		actions?: Snippet
+		/** Rich content (takes precedence over text) */
+		children?: Snippet
+		/** Called when dismissed (button click or timeout) */
+		ondismiss?: () => void
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const {
+		type = 'error',
+		icons = DEFAULT_STATE_ICONS.state as Record<string, string>,
+		text = undefined,
+		dismissible = false,
+		timeout = dismissible ? 0 : 4000,
+		actions,
+		children,
+		ondismiss,
+		class: className = ''
+	}: MessageProps = $props()
+
+	const role = $derived(type === 'error' || type === 'warning' ? 'alert' : 'status')
+	const icon = $derived(icons[type] ?? '')
+
+	$effect(() => {
+		if (timeout > 0) {
+			const timer = setTimeout(() => ondismiss?.(), timeout)
+			return () => clearTimeout(timer)
+		}
+	})
+</script>
+
+<div
+	data-message-root
+	data-type={type}
+	data-dismissible={dismissible}
+	{role}
+	class={className || undefined}
+>
+	<span data-message-icon class={icon} aria-hidden="true"></span>
+
+	<span data-message-text>
+		{#if children}
+			{@render children()}
+		{:else}
+			{text}
+		{/if}
+	</span>
+
+	{#if actions}
+		<div data-message-actions>
+			{@render actions()}
+		</div>
+	{/if}
+
+	{#if dismissible}
+		<button type="button" data-message-dismiss aria-label="Dismiss" onclick={ondismiss}
+			>×</button
+		>
+	{/if}
+</div>

package/src/components/Range.svelte

@@ -127,10 +127,22 @@
 	}
 
 	function applyUpperKey(key: string): boolean {
-		if (isIncreaseKey(key)) { nudgeUpper(1); return true }
-		if (isDecreaseKey(key)) { nudgeUpper(-1); return true }
-		if (key === 'Home') { jumpUpper(false); return true }
-		if (key === 'End') { jumpUpper(true); return true }
+		if (isIncreaseKey(key)) {
+			nudgeUpper(1)
+			return true
+		}
+		if (isDecreaseKey(key)) {
+			nudgeUpper(-1)
+			return true
+		}
+		if (key === 'Home') {
+			jumpUpper(false)
+			return true
+		}
+		if (key === 'End') {
+			jumpUpper(true)
+			return true
+		}
 		return false
 	}
 
@@ -173,10 +185,22 @@
 	}
 
 	function applyLowerKey(key: string): boolean {
-		if (isIncreaseKey(key)) { nudgeLower(1); return true }
-		if (isDecreaseKey(key)) { nudgeLower(-1); return true }
-		if (key === 'Home') { lower = min; return true }
-		if (key === 'End') { lower = upper; return true }
+		if (isIncreaseKey(key)) {
+			nudgeLower(1)
+			return true
+		}
+		if (isDecreaseKey(key)) {
+			nudgeLower(-1)
+			return true
+		}
+		if (key === 'Home') {
+			lower = min
+			return true
+		}
+		if (key === 'End') {
+			lower = upper
+			return true
+		}
 		return false
 	}
 

package/src/components/Select.svelte

@@ -107,13 +107,12 @@
 	const childrenField = $derived(fields?.children || 'children')
 
 	function childMatchesQuery(child: unknown, query: string): boolean {
-		return String((child as Record<string, unknown>)[textField] ?? '').toLowerCase().includes(query)
+		return String((child as Record<string, unknown>)[textField] ?? '')
+			.toLowerCase()
+			.includes(query)
 	}
 
-	function filterGroupChildren(
-		asRecord: Record<string, unknown>,
-		query: string
-	): unknown | null {
+	function filterGroupChildren(asRecord: Record<string, unknown>, query: string): unknown | null {
 		const children = asRecord[childrenField] as unknown[]
 		const matching = children.filter((child: unknown) => childMatchesQuery(child, query))
 		return matching.length > 0 ? { ...asRecord, [childrenField]: matching } : null

package/src/components/StatusList.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+
+	const DEFAULT_ICONS = DEFAULT_STATE_ICONS.badge
+
+	let { class: className = '', items, icons = {} } = $props()
+
+	const resolvedIcons = $derived({ ...DEFAULT_ICONS, ...icons })
+</script>
+
+<div data-status-list class={className} role="status">
+	{#each items as { text, status }, index (index)}
+		<div data-status-item data-status={status}>
+			<span class={resolvedIcons[status]} aria-hidden="true"></span>
+			<p>{text}</p>
+		</div>
+	{/each}
+</div>

package/src/components/Toolbar.svelte

@@ -17,6 +17,7 @@
 		fields: userFields,
 		position = 'top',
 		size = 'md',
+		width = 'full',
 		sticky = false,
 		compact = false,
 		showDividers = true,
@@ -252,6 +253,7 @@
 	data-toolbar
 	data-toolbar-position={position}
 	data-toolbar-size={size}
+	data-toolbar-width={width === 'fit' ? 'fit' : undefined}
 	data-toolbar-sticky={sticky || undefined}
 	data-toolbar-compact={compact || undefined}
 	data-toolbar-disabled={disabled || undefined}

package/src/components/index.ts

@@ -3,6 +3,7 @@ export { default as Button } from './Button.svelte'
 export { default as ButtonGroup } from './ButtonGroup.svelte'
 export { default as Code } from './Code.svelte'
 export { default as Menu } from './Menu.svelte'
+export { default as Dropdown } from './Dropdown.svelte'
 export { default as Select } from './Select.svelte'
 export { default as MultiSelect } from './MultiSelect.svelte'
 export { default as Toolbar } from './Toolbar.svelte'
@@ -36,3 +37,6 @@ export { default as UploadTarget } from './UploadTarget.svelte'
 export { default as UploadFileStatus } from './UploadFileStatus.svelte'
 export { default as UploadProgress } from './UploadProgress.svelte'
 export { default as FloatingNavigation } from './FloatingNavigation.svelte'
+export { default as StatusList } from './StatusList.svelte'
+export { default as Message } from './Message.svelte'
+export { default as AlertList } from './AlertList.svelte'

package/src/index.ts

@@ -4,6 +4,7 @@ export {
 	ButtonGroup,
 	Code,
 	Menu,
+	Dropdown,
 	Select,
 	MultiSelect,
 	Toolbar,
@@ -35,7 +36,10 @@ export {
 	Grid,
 	UploadTarget,
 	UploadFileStatus,
-	UploadProgress
+	UploadProgress,
+	StatusList,
+	Message,
+	AlertList
 } from './components/index.js'
 
 // Utilities

package/src/types/toolbar.ts

@@ -112,6 +112,9 @@ export interface ToolbarProps {
 	/** Size variant */
 	size?: 'sm' | 'md' | 'lg'
 
+	/** Width behaviour: full stretches to container, fit sizes to content */
+	width?: 'full' | 'fit'
+
 	/** Whether toolbar should stick to its position */
 	sticky?: boolean
 

package/src/utils/palette.ts

@@ -83,7 +83,11 @@ export function rgbToHex(rgb: RGB): string {
 /**
  * Convert RGB to HSL
  */
-interface NormalizedRGB { r: number; g: number; b: number }
+interface NormalizedRGB {
+	r: number
+	g: number
+	b: number
+}
 
 function computeHue(norm: NormalizedRGB, max: number, d: number): number {
 	const { r, g, b } = norm
@@ -545,11 +549,28 @@ export function applyPalette(
 }
 
 const DEFAULT_PALETTE_ROLES: ColorRole[] = [
-	'primary', 'secondary', 'accent', 'surface', 'success', 'warning', 'danger', 'info'
+	'primary',
+	'secondary',
+	'accent',
+	'surface',
+	'success',
+	'warning',
+	'danger',
+	'info'
 ]
 
 const ALL_SHADE_KEYS: ShadeKey[] = [
-	'50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'
+	'50',
+	'100',
+	'200',
+	'300',
+	'400',
+	'500',
+	'600',
+	'700',
+	'800',
+	'900',
+	'950'
 ]
 
 /**