@rokkit/ui 1.0.0-next.133 → 1.0.0-next.136

package/src/components/LazyTree.svelte

@@ -49,13 +49,15 @@
 
 	const icons = $derived({ ...DEFAULT_STATE_ICONS.folder, ...userIcons })
 
-
 	const proxyTree = $derived(
 		new ProxyTree(items, fields, {
 			createProxy: (raw, f, key, level) =>
-				new LazyProxyItem(raw, f, key, level, onlazyload
-					? async (_value, rawItem) => onlazyload(rawItem)
-					: null
+				new LazyProxyItem(
+					raw,
+					f,
+					key,
+					level,
+					onlazyload ? async (_value, rawItem) => onlazyload(rawItem) : null
 				)
 		})
 	)
@@ -93,73 +95,78 @@
 		{@const content = resolveSnippet(snippets, proxy, ITEM_SNIPPET)}
 
 		<div
-				data-tree-node
-				data-tree-path={node.key}
-				data-tree-level={node.level - 1}
-				data-tree-has-children={node.isExpandable || undefined}
-				data-tree-loading={isLoading || undefined}
-				data-active={isActive || undefined}
-				role="treeitem"
-				aria-expanded={node.isExpandable ? proxy.expanded : undefined}
-				aria-selected={isActive}
-				aria-busy={isLoading || undefined}
-				aria-level={node.level}
-			>
-				<div data-tree-node-row>
-					{#each node.lineTypes as lineType, lineIndex (lineIndex)}
-						{#if lineType === 'icon'}
-							<button
-								type="button"
-								data-tree-toggle-btn
-								onclick={() => wrapper.toggle(node.key)}
-								aria-label={isLoading ? labels.loading : proxy.expanded ? labels.collapse : labels.expand}
-								tabindex={-1}
-							>
-								{#if isLoading}
-									<span data-tree-spinner aria-hidden="true"></span>
-								{:else}
-									<span class={proxy.expanded ? icons.opened : icons.closed} aria-hidden="true"></span>
-								{/if}
-							</button>
-						{:else}
-							<Connector type={lineType} />
-						{/if}
-					{/each}
-
-					{#if proxy.get('href')}
-						<a
-							href={proxy.get('href')}
-							data-tree-item-content
-							data-path={node.key}
-							data-active={isActive || undefined}
-							aria-label={proxy.label}
-							aria-current={isActive ? 'page' : undefined}
-						>
-							{#if content}
-								{@render content(proxy)}
-							{:else}
-								<ItemContent {proxy} showIcon={!node.isExpandable} showSubtext={false} />
-							{/if}
-						</a>
-					{:else}
+			data-tree-node
+			data-tree-path={node.key}
+			data-tree-level={node.level - 1}
+			data-tree-has-children={node.isExpandable || undefined}
+			data-tree-loading={isLoading || undefined}
+			data-active={isActive || undefined}
+			role="treeitem"
+			aria-expanded={node.isExpandable ? proxy.expanded : undefined}
+			aria-selected={isActive}
+			aria-busy={isLoading || undefined}
+			aria-level={node.level}
+		>
+			<div data-tree-node-row>
+				{#each node.lineTypes as lineType, lineIndex (lineIndex)}
+					{#if lineType === 'icon'}
 						<button
 							type="button"
-							data-tree-item-content
-							data-path={node.key}
-							data-active={isActive || undefined}
-							aria-label={proxy.label}
+							data-tree-toggle-btn
+							onclick={() => wrapper.toggle(node.key)}
+							aria-label={isLoading
+								? labels.loading
+								: proxy.expanded
+									? labels.collapse
+									: labels.expand}
+							tabindex={-1}
 						>
-							{#if content}
-								{@render content(proxy)}
+							{#if isLoading}
+								<span data-tree-spinner aria-hidden="true"></span>
 							{:else}
-								<ItemContent {proxy} showIcon={!node.isExpandable} showSubtext={false} />
+								<span class={proxy.expanded ? icons.opened : icons.closed} aria-hidden="true"
+								></span>
 							{/if}
 						</button>
+					{:else}
+						<Connector type={lineType} />
 					{/if}
-				</div>
+				{/each}
+
+				{#if proxy.get('href')}
+					<a
+						href={proxy.get('href')}
+						data-tree-item-content
+						data-path={node.key}
+						data-active={isActive || undefined}
+						aria-label={proxy.label}
+						aria-current={isActive ? 'page' : undefined}
+					>
+						{#if content}
+							{@render content(proxy)}
+						{:else}
+							<ItemContent {proxy} showIcon={!node.isExpandable} showSubtext={false} />
+						{/if}
+					</a>
+				{:else}
+					<button
+						type="button"
+						data-tree-item-content
+						data-path={node.key}
+						data-active={isActive || undefined}
+						aria-label={proxy.label}
+					>
+						{#if content}
+							{@render content(proxy)}
+						{:else}
+							<ItemContent {proxy} showIcon={!node.isExpandable} showSubtext={false} />
+						{/if}
+					</button>
+				{/if}
 			</div>
+		</div>
 	{/each}
 	{#if hasMore}
-		<Button label={labels.loadMore} style="ghost" size={size} onclick={() => wrapper.loadMore()} />
+		<Button label={labels.loadMore} style="ghost" {size} onclick={() => wrapper.loadMore()} />
 	{/if}
 </div>

package/src/components/List.svelte

@@ -87,11 +87,10 @@
 	$effect(() => {
 		wrapper.moveToValue(value)
 	})
-
 </script>
 
 {#snippet collapsibleIcon(proxy: ProxyItem)}
-  {#if collapsible && proxy.hasChildren}
+	{#if collapsible && proxy.hasChildren}
 		<span
 			data-list-expand-icon
 			class={proxy.expanded ? icons.opened : icons.closed}
@@ -113,7 +112,11 @@
 	{#each wrapper.flatView as node (node.key)}
 		{@const proxy = node.proxy}
 		{@const isActive = proxy.value === value}
-		{@const content = resolveSnippet(snippets as Record<string, unknown>, proxy, node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET)}
+		{@const content = resolveSnippet(
+			snippets as Record<string, unknown>,
+			proxy,
+			node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
+		)}
 
 		{#if node.type === 'separator'}
 			<hr data-list-separator />
@@ -137,10 +140,10 @@
 				{#if content}
 					{@render content(proxy)}
 				{:else}
-				<ItemContent {proxy} />
+					<ItemContent {proxy} />
 				{/if}
 
-        {@render collapsibleIcon(proxy)}
+				{@render collapsibleIcon(proxy)}
 			</button>
 		{:else if proxy.get('href')}
 			<!--
@@ -159,7 +162,7 @@
 				{#if content}
 					{@render content(proxy)}
 				{:else}
-				<ItemContent {proxy} />
+					<ItemContent {proxy} />
 				{/if}
 			</a>
 		{:else}
@@ -180,7 +183,7 @@
 				{#if content}
 					{@render content(proxy)}
 				{:else}
-				<ItemContent {proxy} />
+					<ItemContent {proxy} />
 				{/if}
 			</button>
 		{/if}

package/src/components/Menu.svelte

@@ -137,7 +137,9 @@
 				isOpen = true
 				requestAnimationFrame(() => wrapper.first(null))
 			},
-			onclose: () => { isOpen = false },
+			onclose: () => {
+				isOpen = false
+			},
 			onlast: () => requestAnimationFrame(() => wrapper.last(null))
 		})
 		return () => t.destroy()
@@ -213,16 +215,15 @@
 
 	{#if isOpen}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			bind:this={dropdownRef}
-			data-menu-dropdown
-			role="menu"
-			aria-orientation="vertical"
-		>
+		<div bind:this={dropdownRef} data-menu-dropdown role="menu" aria-orientation="vertical">
 			{#each wrapper.flatView as node (node.key)}
 				{@const proxy = node.proxy}
 				{@const isActive = proxy.value === value}
-				{@const content = resolveSnippet(snippets as Record<string, unknown>, proxy, node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET)}
+				{@const content = resolveSnippet(
+					snippets as Record<string, unknown>,
+					proxy,
+					node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
+				)}
 
 				{#if node.type === 'separator'}
 					<hr data-menu-separator />

package/src/components/MultiSelect.svelte

@@ -70,7 +70,12 @@
 		[key: string]: unknown
 	} = $props()
 
-	const icons = $derived({ ...DEFAULT_STATE_ICONS.selector, ...DEFAULT_STATE_ICONS.checkbox, ...DEFAULT_STATE_ICONS.action, ...userIcons })
+	const icons = $derived({
+		...DEFAULT_STATE_ICONS.selector,
+		...DEFAULT_STATE_ICONS.checkbox,
+		...DEFAULT_STATE_ICONS.action,
+		...userIcons
+	})
 
 	// ─── Dropdown state ───────────────────────────────────────────────────────
 
@@ -198,7 +203,9 @@
 				isOpen = true
 				requestAnimationFrame(() => wrapper.first(null))
 			},
-			onclose: () => { isOpen = false },
+			onclose: () => {
+				isOpen = false
+			},
 			onlast: () => requestAnimationFrame(() => wrapper.last(null))
 		})
 		return () => t.destroy()
@@ -322,7 +329,11 @@
 			{#each wrapper.flatView as node (node.key)}
 				{@const proxy = node.proxy}
 				{@const sel = !node.hasChildren && isItemSelected(proxy.value)}
-				{@const content = resolveSnippet(snippets as Record<string, unknown>, proxy, node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET)}
+				{@const content = resolveSnippet(
+					snippets as Record<string, unknown>,
+					proxy,
+					node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
+				)}
 
 				{#if node.type === 'separator'}
 					<hr data-select-separator />

package/src/components/PaletteManager.svelte

@@ -117,7 +117,7 @@
 
 		// Add # if missing
 		if (hex && !hex.startsWith('#')) {
-			hex = `#${  hex}`
+			hex = `#${hex}`
 		}
 
 		hexInputs[role] = hex
@@ -278,11 +278,7 @@
 	</div>
 {/snippet}
 
-<div
-	data-palette-manager
-	data-compact={compact || undefined}
-	class={className || undefined}
->
+<div data-palette-manager data-compact={compact || undefined} class={className || undefined}>
 	{#if showPresets && presets.length > 0}
 		<div data-palette-presets>
 			<span data-palette-presets-label>Presets</span>

package/src/components/ProgressBar.svelte

@@ -8,14 +8,14 @@
 		class?: string
 	}
 
-	const {
-		value = null,
-		max = 100,
-		class: className = ''
-	}: ProgressBarProps = $props()
+	const { value = null, max = 100, class: className = '' }: ProgressBarProps = $props()
 
-	const indeterminate = $derived(value === null || value === undefined || max === null || max === undefined)
-	const percentage = $derived(indeterminate ? 100 : Math.min(100, Math.max(0, (value! / max!) * 100)))
+	const indeterminate = $derived(
+		value === null || value === undefined || max === null || max === undefined
+	)
+	const percentage = $derived(
+		indeterminate ? 100 : Math.min(100, Math.max(0, (value! / max!) * 100))
+	)
 </script>
 
 <div

package/src/components/Range.svelte

@@ -62,9 +62,7 @@
 
 	let selectedLeft = $derived(rangeMode ? valueToPercent(lower) : 0)
 	let selectedWidth = $derived(
-		rangeMode
-			? valueToPercent(upper) - valueToPercent(lower)
-			: valueToPercent(value)
+		rangeMode ? valueToPercent(upper) - valueToPercent(lower) : valueToPercent(value)
 	)
 
 	// ─── Ticks ──────────────────────────────────────────────────────
@@ -87,7 +85,11 @@
 		if (disabled || trackWidth === 0) return
 		const dx = event.detail.dx as number
 		const currentPx = inverseLerp(rangeMode ? upper : value, min, max) * trackWidth
-		const newPx = clamp(currentPx + dx, rangeMode ? inverseLerp(lower, min, max) * trackWidth : 0, trackWidth)
+		const newPx = clamp(
+			currentPx + dx,
+			rangeMode ? inverseLerp(lower, min, max) * trackWidth : 0,
+			trackWidth
+		)
 		const raw = pixelToValue(newPx)
 		const snapped = snapToStep(clamp(raw, rangeMode ? lower : min, max))
 		if (rangeMode) {
@@ -243,19 +245,11 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	data-range
-	data-disabled={disabled || undefined}
-	class={className || undefined}
->
+<div data-range data-disabled={disabled || undefined} class={className || undefined}>
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<div data-range-track onclick={handleTrackClick}>
 		<div data-range-bar bind:clientWidth={trackWidth}></div>
-		<div
-			data-range-selected
-			style:left="{selectedLeft}%"
-			style:width="{selectedWidth}%"
-		></div>
+		<div data-range-selected style:left="{selectedLeft}%" style:width="{selectedWidth}%"></div>
 
 		{#if rangeMode}
 			<!-- Lower thumb -->
@@ -270,8 +264,12 @@
 				onpanmove={handleLowerPanMove}
 				onpanend={handleLowerPanEnd}
 				onkeydown={handleLowerKeyDown}
-				onfocus={() => { if (!disabled) slidingLower = true }}
-				onblur={() => { slidingLower = false }}
+				onfocus={() => {
+					if (!disabled) slidingLower = true
+				}}
+				onblur={() => {
+					slidingLower = false
+				}}
 				role="slider"
 				aria-valuenow={lower}
 				aria-valuemin={min}
@@ -293,8 +291,12 @@
 			onpanmove={handleUpperPanMove}
 			onpanend={handleUpperPanEnd}
 			onkeydown={handleUpperKeyDown}
-			onfocus={() => { if (!disabled) slidingUpper = true }}
-			onblur={() => { slidingUpper = false }}
+			onfocus={() => {
+				if (!disabled) slidingUpper = true
+			}}
+			onblur={() => {
+				slidingUpper = false
+			}}
 			role="slider"
 			aria-valuenow={rangeMode ? upper : value}
 			aria-valuemin={rangeMode ? lower : min}

package/src/components/Rating.svelte

@@ -92,8 +92,12 @@
 			aria-checked={filled}
 			aria-label="Rate {index + 1} of {max}"
 			onclick={() => handleClick(index)}
-			onmouseenter={() => { if (!disabled) hoverIndex = index }}
-			onmouseleave={() => { hoverIndex = -1 }}
+			onmouseenter={() => {
+				if (!disabled) hoverIndex = index
+			}}
+			onmouseleave={() => {
+				hoverIndex = -1
+			}}
 		>
 			<span data-rating-icon class={filled ? icons.filled : icons.empty} aria-hidden="true"></span>
 		</span>

package/src/components/SearchFilter.svelte

@@ -78,8 +78,8 @@
 							data-search-tag-remove
 							onclick={() => removeFilter(i)}
 							aria-label={labels.remove}
-							type="button"
-						>&times;</button>
+							type="button">&times;</button
+						>
 					</span>
 				{/if}
 			{/each}

package/src/components/Select.svelte

@@ -84,7 +84,11 @@
 		[key: string]: unknown
 	} = $props()
 
-	const icons = $derived({ ...DEFAULT_STATE_ICONS.selector, ...DEFAULT_STATE_ICONS.checkbox, ...userIcons })
+	const icons = $derived({
+		...DEFAULT_STATE_ICONS.selector,
+		...DEFAULT_STATE_ICONS.checkbox,
+		...userIcons
+	})
 
 	// ─── Dropdown state ───────────────────────────────────────────────────────
 
@@ -109,11 +113,17 @@
 				const children = item[childrenField]
 				if (Array.isArray(children) && children.length > 0) {
 					const matching = children.filter((child) =>
-						String(child[textField] ?? '').toLowerCase().includes(query)
+						String(child[textField] ?? '')
+							.toLowerCase()
+							.includes(query)
 					)
 					return matching.length > 0 ? { ...item, [childrenField]: matching } : null
 				}
-				return String(item[textField] ?? '').toLowerCase().includes(query) ? item : null
+				return String(item[textField] ?? '')
+					.toLowerCase()
+					.includes(query)
+					? item
+					: null
 			})
 			.filter(Boolean)
 	})
@@ -325,12 +335,7 @@
 
 	{#if isOpen}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			bind:this={dropdownRef}
-			data-select-dropdown
-			role="listbox"
-			aria-orientation="vertical"
-		>
+		<div bind:this={dropdownRef} data-select-dropdown role="listbox" aria-orientation="vertical">
 			{#if filterable}
 				<div data-select-filter>
 					<!-- svelte-ignore a11y_autofocus -->
@@ -347,7 +352,11 @@
 			{#each wrapper.flatView as node (node.key)}
 				{@const proxy = node.proxy}
 				{@const sel = !node.hasChildren && proxy.value === value}
-				{@const content = resolveSnippet(snippets as Record<string, unknown>, proxy, node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET)}
+				{@const content = resolveSnippet(
+					snippets as Record<string, unknown>,
+					proxy,
+					node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
+				)}
 
 				{#if node.type === 'separator'}
 					<hr data-select-separator />

package/src/components/Stepper.svelte

@@ -151,8 +151,10 @@
 						<button
 							type="button"
 							data-stepper-dot
-							data-active={index === current && stageIndex === currentStage || undefined}
-							data-completed={step.completed || (index === current && stageIndex < currentStage) || undefined}
+							data-active={(index === current && stageIndex === currentStage) || undefined}
+							data-completed={step.completed ||
+								(index === current && stageIndex < currentStage) ||
+								undefined}
 							disabled={!isClickable(index)}
 							aria-label="Stage {stageIndex + 1}"
 							onclick={() => handleDotClick(index, stageIndex)}

package/src/components/Table.svelte

@@ -28,11 +28,14 @@
 
 	// ─── Controller ─────────────────────────────────────────────────
 
-	let controller = untrack(() => new TableController(data, {
-		columns: userColumns,
-		fields: userFields,
-		value
-	}))
+	let controller = untrack(
+		() =>
+			new TableController(data, {
+				columns: userColumns,
+				fields: userFields,
+				value
+			})
+	)
 	let tableRef = $state<HTMLElement | null>(null)
 
 	// Sync data changes to controller
@@ -141,11 +144,7 @@
 	onfocusin={handleFocusIn}
 	use:navigator={{ wrapper: controller, orientation: 'vertical' }}
 >
-	<table
-		role="grid"
-		aria-label={caption}
-		data-striped={striped || undefined}
-	>
+	<table role="grid" aria-label={caption} data-striped={striped || undefined}>
 		{#if caption}
 			<caption data-table-caption>{caption}</caption>
 		{/if}
@@ -162,7 +161,11 @@
 							data-sortable={column.sortable !== false || undefined}
 							data-sort-order={column.sorted ?? 'none'}
 							scope="col"
-							aria-sort={column.sorted === 'ascending' ? 'ascending' : column.sorted === 'descending' ? 'descending' : 'none'}
+							aria-sort={column.sorted === 'ascending'
+								? 'ascending'
+								: column.sorted === 'descending'
+									? 'descending'
+									: 'none'}
 							style:width={column.width}
 							style:text-align={column.align}
 							onclick={(e) => handleSort(e, column)}
@@ -188,9 +191,7 @@
 					</tr>
 				{:else}
 					<tr data-table-empty-row>
-						<td data-table-empty colspan={controller.columns.length}>
-							No data
-						</td>
+						<td data-table-empty colspan={controller.columns.length}> No data </td>
 					</tr>
 				{/if}
 			{:else}
@@ -212,20 +213,12 @@
 						>
 							{#each controller.columns as column (column.name)}
 								{#if cellSnippet}
-									<td
-										data-table-cell
-										data-column={column.name}
-										style:text-align={column.align}
-									>
+									<td data-table-cell data-column={column.name} style:text-align={column.align}>
 										{@render cellSnippet(getCellValue(row, column), column, row)}
 									</td>
 								{:else}
 									{@const cellIcon = getCellIcon(row, column)}
-									<td
-										data-table-cell
-										data-column={column.name}
-										style:text-align={column.align}
-									>
+									<td data-table-cell data-column={column.name} style:text-align={column.align}>
 										{#if cellIcon}
 											<span data-cell-icon class={cellIcon} aria-hidden="true"></span>
 										{/if}

package/src/components/Tabs.svelte

@@ -49,7 +49,15 @@
 	// ─── Wrapper ──────────────────────────────────────────────────────────────
 
 	const proxyTree = $derived(new ProxyTree(options, userFields))
-	const wrapper = $derived(new Wrapper(proxyTree, {	onchange, onselect }))
+	const wrapper = $derived(
+		new Wrapper(proxyTree, {
+			onchange,
+			onselect: (v, proxy) => {
+				value = v
+				onselect?.(v, proxy)
+			}
+		})
+	)
 
 	// ─── Navigator ────────────────────────────────────────────────────────────
 
@@ -90,8 +98,17 @@
 			role="button"
 			tabindex="-1"
 			aria-label={labels.remove}
-			onclick={(e) => { e.stopPropagation(); handleRemove(proxy) }}
-			onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); e.preventDefault(); handleRemove(proxy) } }}
+			onclick={(e) => {
+				e.stopPropagation()
+				handleRemove(proxy)
+			}}
+			onkeydown={(e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.stopPropagation()
+					e.preventDefault()
+					handleRemove(proxy)
+				}
+			}}
 		>
 			<span class={DEFAULT_STATE_ICONS.action.close} aria-hidden="true"></span>
 		</span>
@@ -153,12 +170,7 @@
 				</button>
 			{/each}
 			{#if editable}
-				<button
-					type="button"
-					data-tabs-add
-					aria-label={labels.add}
-					onclick={handleAdd}
-				>
+				<button type="button" data-tabs-add aria-label={labels.add} onclick={handleAdd}>
 					<span class="i-lucide:plus" aria-hidden="true"></span>
 				</button>
 			{/if}