@rokkit/ui 1.0.0-next.147 → 1.0.0-next.148

package/package.json

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

package/src/components/List.svelte

@@ -82,12 +82,30 @@
 		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.
+	// Expand groups based on collapsible mode and active value.
+	// collapsible=false: groups are fixed section headers — always expanded.
+	// collapsible=true: only expand the ancestor group of the active value;
+	//   all other groups start collapsed (user can toggle them).
 	$effect(() => {
-		for (const [, proxy] of wrapper.lookup) {
-			if (proxy.hasChildren) proxy.expanded = true
+		if (!collapsible) {
+			for (const [, proxy] of wrapper.lookup) {
+				if (proxy.hasChildren) proxy.expanded = true
+			}
+		} else {
+			let activeKey: string | null = null
+			for (const [key, proxy] of wrapper.lookup) {
+				if (proxy.value === value) {
+					activeKey = key
+					break
+				}
+			}
+			for (const [key, proxy] of wrapper.lookup) {
+				if (proxy.hasChildren) {
+					proxy.expanded =
+						activeKey !== null &&
+						(activeKey === key || activeKey.startsWith(`${key  }-`))
+				}
+			}
 		}
 	})
 

package/src/components/Swatch.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
+	import { Navigator } from '@rokkit/actions'
+
+	let {
+		options = [],
+		fields: userFields = {},
+		value = $bindable(),
+		multiple = false,
+		shape = 'square',
+		size = 'md',
+		disabled = false,
+		label = messages.current.swatch?.label ?? 'Select',
+		class: className = '',
+		onchange,
+		item: itemSnippet,
+		..._rest
+	} = $props()
+
+	const proxyTree = $derived(new ProxyTree(options, userFields))
+	const wrapper = $derived(new Wrapper(proxyTree, { onselect: handleSelect }))
+
+	let containerRef = $state<HTMLElement | null>(null)
+
+	$effect(() => {
+		if (!containerRef) return
+		const nav = new Navigator(containerRef, wrapper, { orientation: 'horizontal' })
+		return () => nav.destroy()
+	})
+
+	$effect(() => {
+		wrapper.moveToValue(value)
+	})
+
+	function isSelected(proxy) {
+		if (multiple && Array.isArray(value)) return value.includes(proxy.value)
+		return proxy.value === value
+	}
+
+	function handleSelect(extracted, proxy) {
+		if (proxy.disabled || disabled) return
+		if (multiple) {
+			const arr = Array.isArray(value) ? [...value] : []
+			const idx = arr.indexOf(extracted)
+			if (idx >= 0) arr.splice(idx, 1)
+			else arr.push(extracted)
+			value = arr
+			onchange?.(value, proxy.original)
+		} else if (extracted !== value) {
+			value = extracted
+			onchange?.(extracted, proxy.original)
+		}
+	}
+</script>
+
+<div
+	bind:this={containerRef}
+	data-swatch
+	data-swatch-size={size}
+	data-swatch-shape={shape}
+	data-swatch-disabled={disabled || undefined}
+	data-swatch-multiple={multiple || undefined}
+	role={multiple ? 'group' : 'radiogroup'}
+	aria-label={label}
+	aria-disabled={disabled || undefined}
+	class={className || undefined}
+>
+	{#each wrapper.flatView as node (node.key)}
+		{@const proxy = node.proxy}
+		{@const sel = isSelected(proxy)}
+		{@const fill = proxy.get(userFields.fill ?? 'fill')}
+		{@const stroke = proxy.get(userFields.stroke ?? 'stroke')}
+		<button
+			type="button"
+			data-swatch-item
+			data-path={node.key}
+			data-selected={sel || undefined}
+			data-disabled={proxy.disabled || undefined}
+			role={multiple ? 'checkbox' : 'radio'}
+			aria-checked={sel}
+			aria-label={proxy.label}
+			title={proxy.label}
+			disabled={proxy.disabled || disabled}
+			style={fill ? `--swatch-fill:${fill};--swatch-stroke:${stroke ?? fill}` : undefined}
+		>
+			{#if itemSnippet}
+				{@render itemSnippet(proxy, sel)}
+			{:else if shape === 'circle'}
+				<span data-swatch-circle></span>
+			{:else}
+				<span data-swatch-square></span>
+			{/if}
+		</button>
+	{/each}
+</div>

package/src/components/index.ts

@@ -10,6 +10,7 @@ export { default as Toolbar } from './Toolbar.svelte'
 export { default as ToolbarGroup } from './ToolbarGroup.svelte'
 export { default as Tabs } from './Tabs.svelte'
 export { default as Toggle } from './Toggle.svelte'
+export { default as Swatch } from './Swatch.svelte'
 export { default as List } from './List.svelte'
 export { default as Tree } from './Tree.svelte'
 export { default as LazyTree } from './LazyTree.svelte'

package/src/index.ts

@@ -11,6 +11,7 @@ export {
 	ToolbarGroup,
 	Tabs,
 	Toggle,
+	Swatch,
 	List,
 	Tree,
 	LazyTree,

package/src/types/button.ts

@@ -12,7 +12,7 @@ import type { Snippet } from 'svelte'
 // =============================================================================
 
 /** Semantic color variant */
-export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'danger'
+export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'accent' | 'danger'
 
 /** Visual style treatment */
 export type ButtonStyle = 'default' | 'outline' | 'ghost' | 'gradient' | 'link'