@rokkit/ui 1.0.0-next.107 → 1.0.0-next.108

package/dist/index.d.ts

@@ -22,7 +22,6 @@ export { default as Toggle } from "./Toggle.svelte";
 export { default as Switch } from "./Switch.svelte";
 export { default as List } from "./List.svelte";
 export { default as Accordion } from "./Accordion.svelte";
-export { default as NestedList } from "./NestedList.svelte";
 export { default as Tree } from "./Tree.svelte";
 export { default as Tabs } from "./Tabs.svelte";
 export { default as Select } from "./Select.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.107",
+  "version": "1.0.0-next.108",
   "description": "Organisms are larger, more complex building blocks that are composed of multiple molecules",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",

package/src/Accordion.svelte

@@ -1,10 +1,18 @@
 <script>
 	import { equals } from 'ramda'
-	import { createEmitter, noop, getKeyFromPath, getSnippet } from '@rokkit/core'
-	import { NestedProxy } from '@rokkit/states'
+	import {
+		createEmitter,
+		noop,
+		getKeyFromPath,
+		getSnippet,
+		defaultFields,
+		hasChildren
+	} from '@rokkit/core'
+	import { NestedController } from '@rokkit/states'
 	import { navigator } from '@rokkit/actions'
 	import Summary from './Summary.svelte'
 	import Item from './Item.svelte'
+	import ListBody from './ListBody.svelte'
 
 	/**
 	 * @typedef {Object} Props
@@ -35,39 +43,25 @@
 	let emitter = $derived(
 		createEmitter(events, ['collapse', 'change', 'expand', 'click', 'select', 'move'])
 	)
-	let wrapper = new NestedProxy(items, value, fields, { events, multiselect, autoCloseSiblings })
+	let wrapper = new NestedController(items, value, fields, {
+		events,
+		multiselect,
+		autoCloseSiblings
+	})
+	let derivedFields = $derived({ ...defaultFields, ...fields })
 </script>
 
-{#snippet listItems(nodes, onchange = noop)}
-	{#each nodes as node}
-		{@const template = getSnippet(extra, node.get('component')) ?? stub}
-		{@const path = getKeyFromPath(node.path)}
-		{@const props = node.get('props') || {}}
-		<rk-list-item
-			role="option"
-			data-path={path}
-			aria-selected={node.selected}
-			aria-current={node.focused}
-		>
-			{#if template}
-				{@render template(node, props, onchange)}
-			{:else}
-				<Item value={node.value} fields={node.fields} />
-			{/if}
-		</rk-list-item>
-	{/each}
-{/snippet}
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <rk-accordion
 	class={classes}
 	tabindex="0"
-	use:navigator={{ wrapper }}
+	use:navigator={{ wrapper, nested: true }}
 	onactivate={() => (value = wrapper.value)}
 >
 	{#if header}
 		<rk-header>{@render header()}</rk-header>
 	{/if}
-	{#if wrapper.nodes.length === 0}
+	{#if items.length === 0}
 		<rk-list-item role="presentation">
 			{#if empty}
 				{@render empty()}
@@ -76,22 +70,32 @@
 			{/if}
 		</rk-list-item>
 	{/if}
-	{#each wrapper.nodes as node, index}
+	{#each items as item, index}
+		{@const key = `${index}`}
+		{@const expanded = item[derivedFields.expanded]}
 		<div
 			class="flex flex-col"
-			class:is-expanded={node.expanded}
-			class:is-selected={node.selected}
+			class:is-expanded={expanded}
+			class:is-selected={wrapper.selectedKeys.has(key)}
 			data-path={index}
 		>
 			<Summary
-				bind:value={wrapper.nodes[index].value}
-				fields={node.fields}
-				expanded={node.expanded}
-				hasChildren={node.hasChildren()}
+				bind:value={items[index]}
+				{fields}
+				{expanded}
+				hasChildren={hasChildren(item, derivedFields)}
 			/>
-			{#if node.expanded}
+			{#if expanded}
 				<rk-list role="listbox" tabindex="-1">
-					{@render listItems(node.children, events.change)}
+					<ListBody
+						bind:items={items[fields.children]}
+						bind:value
+						fields={fields.fields ?? fields}
+						{selected}
+						{stub}
+						onchange={emitter.change}
+						{extra}
+					/>
 				</rk-list>
 			{/if}
 		</div>

package/src/Icon.svelte

@@ -63,6 +63,7 @@
 	onclick={handleClick}
 	onkeydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
 	data-state={state}
+	data-tag="icon"
 	tabindex={validatedTabindex}
 	onmouseenter={emitter.mouseenter}
 	onnmouseleave={emitter.nmouseleave}

package/src/Link.svelte

@@ -12,8 +12,8 @@
 
 	/** @type {Props} */
 	let { class: classes = '', value, mapping = new FieldMapper(), href = '#', ...rest } = $props()
-	let url = $derived(mapping.getAttribute(value, 'url') ?? href)
-	let props = $derived({ ...mapping.getAttribute(value, 'props'), ...rest })
+	let url = $derived(mapping.get('url', value, href))
+	let props = $derived({ ...mapping.get('props', value, {}), ...rest })
 </script>
 
 <a href={url} class={classes} {...props}>

package/src/List.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { createEmitter, noop, getKeyFromPath, getSnippet } from '@rokkit/core'
+	import { createEmitter } from '@rokkit/core'
 	import { navigator } from '@rokkit/actions'
-	import Item from './Item.svelte'
-	import { ListProxy } from '@rokkit/states'
+	import ListBody from './ListBody.svelte'
+	import { ListController } from '@rokkit/states'
 	import { omit, has } from 'ramda'
 
 	/**
@@ -34,17 +34,21 @@
 		...events
 	} = $props()
 
+	let selected = $state([])
+
 	function handleAction(event) {
-		value = wrapper.currentNode.value
-		console.log(event.detail)
-		if (has(event.detail.eventName, emitter)) {
-			emitter[event.detail.eventName](event.detail.data)
+		const { name, data } = event.detail
+
+		if (has(name, emitter)) {
+			value = data.value
+			selected = data.selected
+			emitter[name](data)
 		}
 	}
 
 	let emitter = createEmitter(events, ['select', 'change', 'move'])
 	let extra = omit(['onselect', 'onchange', 'onmove'], events)
-	let wrapper = new ListProxy(items, value, fields, { multiSelect })
+	let wrapper = new ListController(items, value, fields, { multiSelect })
 </script>
 
 <rk-list
@@ -59,30 +63,23 @@
 		<rk-header>{@render header()}</rk-header>
 	{/if}
 	<rk-body>
-		{#if wrapper.nodes.length === 0}
+		{#if items.length === 0}
 			{#if empty}
 				{@render empty()}
 			{:else}
 				<rk-message>No items found.</rk-message>
 			{/if}
 		{:else}
-			{#each wrapper.nodes as node}
-				{@const template = getSnippet(extra, node.get('component')) ?? stub}
-				{@const path = getKeyFromPath(node.path)}
-				{@const props = node.get('props') || {}}
-				<rk-list-item
-					role="option"
-					data-path={path}
-					aria-selected={node.selected}
-					aria-current={node.focused}
-				>
-					{#if template}
-						{@render template(node, props, emitter.change)}
-					{:else}
-						<Item value={node.value} fields={node.fields} />
-					{/if}
-				</rk-list-item>
-			{/each}
+			<ListBody
+				bind:items
+				bind:value
+				{fields}
+				selectedKeys={wrapper.selectedKeys}
+				focusedKey={wrapper.focusedKey}
+				{stub}
+				onchange={emitter.change}
+				{extra}
+			/>
 		{/if}
 	</rk-body>
 	{#if footer}

package/src/ListBody.svelte

@@ -0,0 +1,43 @@
+<script>
+	import { getKeyFromPath, FieldMapper, getSnippet } from '@rokkit/core'
+	import Item from './Item.svelte'
+	import { equals } from 'ramda'
+
+	let {
+		items = $bindable([]),
+		value = null,
+		fields,
+		path = [],
+		onchange = () => {},
+		selectedKeys = new SvelteSet(),
+		focusedKey = null,
+		stub = null,
+		extra
+	} = $props()
+	let fm = $derived.by(() => {
+		return new FieldMapper(fields)
+	})
+</script>
+
+{#each items as item, index}
+	{@const template = getSnippet(extra, fm.get('snippet', item, stub))}
+	{@const pathKey = getKeyFromPath([...path, index])}
+	{@const props = fm.get('props', item) || {}}
+	<rk-list-item
+		role="option"
+		data-path={pathKey}
+		aria-selected={selectedKeys.has(pathKey)}
+		aria-current={focusedKey === pathKey}
+	>
+		<svelte:boundary>
+			{#if template}
+				{@render template(item, props, onchange)}
+				{#snippet failed()}
+					<Item value={item} {fields} />
+				{/snippet}
+			{:else}
+				<Item value={item} {fields} />
+			{/if}
+		</svelte:boundary>
+	</rk-list-item>
+{/each}

package/src/NestedList.svelte

@@ -1,33 +1,77 @@
 <script>
-	import { defaultStateIcons, getLineTypes } from '@rokkit/core'
+	import { SvelteSet } from 'svelte/reactivity'
+	import {
+		defaultStateIcons,
+		getLineTypes,
+		getKeyFromPath,
+		getNestedFields,
+		hasChildren
+	} from '@rokkit/core'
 	import Node from './Node.svelte'
 	import NestedList from './NestedList.svelte'
 
 	/**
 	 * @typedef {Object} Props
-	 * @property {Array<NodeProxy>} [items]
-	 * @property {import('./types').ConnectionType[]} [types]
-	 * @property {any} [value]
-	 * @property {import('./types').NodeStateIcons} icons
+	 * @property {Array<NodeProxy>}                   [items=[]]
+	 * @property {any}                                [value=null]
+	 * @property {import('./types').FieldMapping}     fields
+	 * @property {number[]}                           [path=[]]
+	 * @property {import('./types').NodeStateIcons}   icons
+	 * @property {import('./types').ConnectionType[]} [types=[]]
+	 * @property {string}                             [focusedKey]
+	 * @property {SvelteSet}                          [selectedKeys]
 	 */
 
 	/** @type {Props} */
-	let { items = $bindable([]), types = [], value = $bindable(null), icons = {} } = $props()
+	let {
+		items = $bindable([]),
+		value = $bindable(null),
+		fields,
+		path = [],
+		icons = {},
+		types = [],
+		focusedKey,
+		selectedKeys = new SvelteSet(),
+		stub,
+		snippets
+	} = $props()
 
 	const stateIcons = $derived({ ...defaultStateIcons.node, ...icons })
+	const childFields = $derived(getNestedFields(fields))
+	// $inspect(childFields, items[0], expandedKeys)
 </script>
 
 <rk-nested-list role="tree">
 	{#each items as item, index}
-		{@const hasChildren = item.hasChildren()}
+		{@const nodePath = [...path, index]}
+		{@const key = getKeyFromPath(nodePath)}
+		{@const expanded = item[fields.expanded]}
 		{@const nodeType = index === items.length - 1 ? 'last' : 'child'}
-		{@const connectors = getLineTypes(hasChildren, types, nodeType)}
+		{@const connectors = getLineTypes(hasChildren(item, fields), types, nodeType)}
 
-		<Node value={items[index]} types={connectors} {stateIcons}>
-			{#if items[index].expanded}
-				<!-- <div role="treeitem" aria-selected={false}> -->
-				<NestedList items={item.children} {value} icons={stateIcons} types={connectors} />
-				<!-- </div> -->
+		<Node
+			value={item}
+			{fields}
+			{stateIcons}
+			types={connectors}
+			focused={focusedKey === key}
+			selected={selectedKeys.has(key)}
+			{expanded}
+			path={nodePath}
+			{stub}
+			{snippets}
+		>
+			{#if hasChildren(item, fields) && expanded}
+				<NestedList
+					items={item[fields.children]}
+					{value}
+					fields={childFields}
+					path={nodePath}
+					icons={stateIcons}
+					types={connectors}
+					{focusedKey}
+					{selectedKeys}
+				/>
 			{/if}
 		</Node>
 	{/each}

package/src/Node.svelte

@@ -5,41 +5,52 @@
 	import Item from './Item.svelte'
 
 	/**
-	 * @typedef {Object} Props
-	 * @property {any} value
-	 * @property {any} [types]
+	 * @typedef {Object}                            Props
+	 * @property {any}                              value
+	 * @property {import('./types').FieldMapping}   fields
+	 * @property {any}                              [types]
 	 * @property {import('./types').NodeStateIcons} [stateIcons]
+	 * @property {number[]}                         [path=[]]
+	 * @property {boolean}                          [focused=false]
+	 * @property {boolean}                          [selected=false]
+	 * @property {boolean}                          [expanded=false]
+	 * @property {Function}                         [children]
+	 * @property {Function}                         [stub=null]
+	 * @property {Object<string, Function>}         [snippets={}]
 	 */
 
 	/** @type {Props} */
 	let {
-		value = $bindable(),
+		value = $bindable(null),
+		fields,
 		types = [],
 		stateIcons = defaultStateIcons.node,
-		stub = null,
+		path = [],
+		focused = false,
+		selected = false,
+		expanded = false,
 		children,
-		...extra
+		stub = null,
+		snippets = {}
 	} = $props()
 
+	let stateName = $derived(expanded ? 'opened' : 'closed')
 	let icons = $derived({ ...defaultStateIcons.node, ...stateIcons })
-	let stateName = $derived(value.expanded ? 'opened' : 'closed')
 	let state = $derived(
-		value.expanded
-			? { icon: icons.opened, label: 'collapse' }
-			: { icon: icons.closed, label: 'expand' }
+		expanded ? { icon: icons.opened, label: 'collapse' } : { icon: icons.closed, label: 'expand' }
 	)
 
-	const template = getSnippet(value.get('component'), extra) ?? stub
-	// $inspect(value.focused, value.expanded, value.selected, value.get('text'))
+	const template = getSnippet(value[fields.snippet], snippets, stub)
+	$inspect(template)
 </script>
 
 <rk-node
-	aria-current={value.focused}
-	aria-selected={value.selected}
-	aria-expanded={value.expanded}
+	aria-current={focused}
+	aria-selected={selected}
+	aria-expanded={expanded}
 	role="treeitem"
-	data-path={getKeyFromPath(value.path)}
-	data-depth={value.path.length}
+	data-path={getKeyFromPath(path)}
+	data-depth={path.length}
 >
 	<div class="flex flex-row items-center">
 		{#each types as type}
@@ -50,11 +61,16 @@
 			{/if}
 		{/each}
 		<rk-item>
-			{#if template}
+			<svelte:boundary>
+				<!-- {#if template} -->
 				{@render template(value)}
-			{:else}
-				<Item value={value.value} fields={value.fields} />
-			{/if}
+				{#snippet failed()}
+					<Item {value} {fields} />
+				{/snippet}
+				<!-- {:else}
+					<Item {value} {fields} />
+				{/if} -->
+			</svelte:boundary>
 		</rk-item>
 	</div>
 	{@render children?.()}

package/src/RadioGroup.svelte

@@ -38,8 +38,9 @@
 	class:disabled={readOnly}
 >
 	{#each options as item}
-		{@const itemValue = mapping.getValue(item)}
-		{@const label = mapping.getText(item)}
+		{@const label = mapping.get('text', item)}
+		{@const itemValue = mapping.get('value', item, label)}
+
 		{@const state = equals(itemValue, value) ? 'on' : 'off'}
 
 		<label class="flex {flexDirection} items-center gap-2">

package/src/ResponsiveGrid.svelte

@@ -65,7 +65,7 @@
 >
 	{#each items as item, index}
 		{@const segmentClass = 'col-' + (index + 1)}
-		{@const props = mapping.getAttribute(item, 'props')}
+		{@const props = mapping.get('props', item, {})}
 		{@const Template = item[mapping.fields.component]}
 		{#if small && equals(index, activeIndex)}
 			<rk-segment

package/src/Switch.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { equals } from 'ramda'
-	import { noop } from '@rokkit/core'
+	import { noop, getSnippet, FieldMapper } from '@rokkit/core'
 	import { keyboard } from '@rokkit/actions'
 	import { defaultMapping } from './constants'
 
@@ -19,10 +19,12 @@
 		class: classes = '',
 		value = $bindable(),
 		options = [false, true],
-		mapping = defaultMapping,
+		fields,
 		compact = false,
 		disabled = false,
-		onchange = noop
+		onchange = noop,
+		stub,
+		...extra
 	} = $props()
 
 	let cursor = $state([])
@@ -50,6 +52,7 @@
 		prev: ['ArrowLeft', 'ArrowUp']
 	}
 	let useComponent = $derived(!options.every((item) => [false, true].includes(item)))
+	let mapper = new FieldMapper(fields)
 </script>
 
 {#if !Array.isArray(options) || options.length < 2}
@@ -72,13 +75,13 @@
 		onclick={handleClick}
 	>
 		{#each options as item, index (item)}
-			{@const Template = useComponent ? mapping.getComponent(item) : null}
+			{@const Template = getSnippet(extra, mapper.get('snippet', item), stub)}
 			<rk-item class="relative" role="option" aria-selected={equals(item, value)} data-path={index}>
 				{#if equals(item, value)}
 					<rk-indicator class="absolute bottom-0 left-0 right-0 top-0"></rk-indicator>
 				{/if}
 				{#if Template}
-					<Template value={item} {mapping} />
+					<Template value={item} {fields} />
 				{/if}
 			</rk-item>
 		{/each}

package/src/TableCell.svelte

@@ -31,7 +31,7 @@
 		path = null
 	} = $props()
 
-	const Template = $derived(mapping.getComponent(value))
+	const Template = $derived(mapping.get('component', value))
 </script>
 
 <td class={classes}>

package/src/Tabs.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { defaultFields, defaultStateIcons, noop, getSnippet } from '@rokkit/core'
-	import { ListProxy } from '@rokkit/states'
+	import { defaultFields, defaultStateIcons, noop, getSnippet, FieldMapper } from '@rokkit/core'
+	import { ListController } from '@rokkit/states'
 	import { navigator } from '@rokkit/actions'
 	import Icon from './Icon.svelte'
 	import Item from './Item.svelte'
@@ -34,8 +34,6 @@
 		...extra
 	} = $props()
 
-	let cursor = $state([])
-
 	function handleRemove(event) {
 		if (typeof event.detail === Object) {
 			event.detail[fields.isDeleted] = true
@@ -56,8 +54,9 @@
 		onselect({ item: value, indices: cursor })
 	}
 	let stateIcons = $derived({ ...defaultStateIcons.action, ...icons })
-	let filtered = $derived(options.filter((item) => !item[fields.isDeleted]))
-	let wrapper = new ListProxy(options, value, fields)
+	let filtered = $derived(options.filter((item) => !item[fields.deleted]))
+	let wrapper = $derived(new ListController(options, value, fields))
+	let mapper = new FieldMapper(fields)
 </script>
 
 <rk-tabs
@@ -67,15 +66,19 @@
 	class:justify-end={align === 'right'}
 	tabindex="0"
 	role="listbox"
-	use:navigator={{ wrapper }}
+	use:navigator={{ wrapper, horizontal: true }}
 	onaction={handleNav}
 	onremove={handleRemove}
 	onadd={handleAdd}
 >
-	{#each wrapper.nodes as item, index}
-		{@const Template = getSnippet(extra, item.get('component')) ?? stub}
+	{#each filtered as item, index}
+		{@const Template = getSnippet(extra, mapper.get('snippet', item), stub)}
 		<rk-tab>
-			<Template value={item} {mapping} />
+			{#if Template}
+				<Template value={item} {fields} />
+			{:else}
+				<Item value={item} {fields} />
+			{/if}
 			{#if editable}
 				<Icon
 					name="remove"

package/src/Toggle.svelte

@@ -1,8 +1,7 @@
 <script>
-	import { FieldMapper, noop } from '@rokkit/core'
+	// import { FieldMapper, noop } from '@rokkit/core'
 	import { keyboard } from '@rokkit/actions'
 	import Item from './Item.svelte'
-	import { defaultMapping } from './constants'
 
 	/**
 	 * @typedef {Object} Props
@@ -17,8 +16,9 @@
 		class: classes = '',
 		value = $bindable(null),
 		options = [false, true],
-		mapping = defaultMapping,
-		onchange = noop
+		fields,
+		label = 'toggle',
+		onchange
 	} = $props()
 
 	const keyMappings = {
@@ -37,7 +37,7 @@
 		}
 
 		value = options[nextIndex]
-		onchange(value)
+		onchange?.(value)
 	}
 </script>
 
@@ -47,8 +47,8 @@
 		onnext={() => toggle()}
 		onprev={() => toggle(-1)}
 		onclick={() => toggle()}
-		aria-label={mapping.getLabel(value)}
+		aria-label={label}
 	>
-		<Item {value} {mapping} />
+		<Item {value} {fields} />
 	</button>
 </rk-toggle>

package/src/Tree.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { createEmitter } from '@rokkit/core'
+	import { createEmitter, defaultFields } from '@rokkit/core'
 	import { navigator } from '@rokkit/actions'
 	import NestedList from './NestedList.svelte'
-	import { NestedProxy } from '@rokkit/states'
+	import { NestedController } from '@rokkit/states'
 	import { omit, has } from 'ramda'
 	/**
 	 * @typedef {Object} Props
@@ -13,6 +13,10 @@
 	 * @property {import('./types').NodeStateIcons|Object} [icons]
 	 * @property {boolean} [autoCloseSiblings=false]
 	 * @property {boolean} [multiselect=false]
+	 * @property {Function} [header]
+	 * @property {Function} [footer]
+	 * @property {Function} [empty]
+	 * @property {Function} [stub]
 	 */
 
 	/** @type {Props & { [key: string]: any }} */
@@ -24,37 +28,52 @@
 		icons = {},
 		autoCloseSiblings = false,
 		multiselect = false,
-		keys = null,
 		header,
 		footer,
 		empty,
+		stub,
 		...events
 	} = $props()
 
-	let emitter = createEmitter(events, ['select', 'move', 'collapse', 'expand'])
-	let wrapper = new NestedProxy(items, value, fields, { autoCloseSiblings, multiselect })
+	let emitter = createEmitter(events, ['select', 'move', 'toggle'])
+	let wrapper = new NestedController(items, value, fields, { autoCloseSiblings, multiselect })
+	let snippets = omit(['onselect', 'onmove', 'ontoggle'], events)
+	let derivedFields = $derived({ ...defaultFields, ...fields })
 
 	function handleAction(event) {
-		const { eventName, data } = event.detail
-		if (eventName === 'select') value = wrapper.currentNode?.value
-
-		if (has([eventName], emitter)) emitter[eventName](data)
+		const { name, data } = event.detail
+		if (name === 'select') value = data.value
+		if (has([name], emitter)) emitter[name](data)
 	}
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<rk-tree tabindex="0" class={classes} use:navigator={{ wrapper }} onaction={handleAction}>
+<rk-tree
+	tabindex="0"
+	class={classes}
+	use:navigator={{ wrapper, nested: true }}
+	onaction={handleAction}
+>
 	{#if header}
 		<rk-header>{@render header()}</rk-header>
 	{/if}
-	{#if wrapper.nodes.length === 0}
+	{#if items.length === 0}
 		{#if empty}
 			{@render empty()}
 		{:else}
 			<div class="m-auto p-4 text-center text-gray-500">No data available</div>
 		{/if}
 	{/if}
-	<NestedList items={wrapper.nodes} {value} {icons} />
+	<NestedList
+		{items}
+		fields={derivedFields}
+		{value}
+		{icons}
+		focusedKey={wrapper.currentKey}
+		selectedKeys={wrapper.selectedKeys}
+		{stub}
+		{snippets}
+	/>
 	{#if footer}
 		<rk-footer>{@render footer()}</rk-footer>
 	{/if}

package/src/TreeTable.svelte

@@ -134,7 +134,7 @@
 				>
 					{#each columns as col, index}
 						{@const value = { ...pick(['icon'], col), ...item }}
-						{@const SvelteComponent = mapping.getComponent(item)}
+						{@const SvelteComponent = mapping.get('component', item)}
 						<td>
 							<cell>
 								{#if multiselect && index === 0}

package/src/index.js

@@ -25,7 +25,6 @@ export { default as Toggle } from './Toggle.svelte'
 export { default as Switch } from './Switch.svelte'
 export { default as List } from './List.svelte'
 export { default as Accordion } from './Accordion.svelte'
-export { default as NestedList } from './NestedList.svelte'
 export { default as Tree } from './Tree.svelte'
 export { default as Tabs } from './Tabs.svelte'
 export { default as Select } from './Select.svelte'

package/src/lib/tree.js

@@ -13,7 +13,7 @@ export function addRootNode(items, root = '/', mapping = defaultMapping) {
 		return [
 			{
 				[mapping.fields.text]: root,
-				[mapping.fields.isOpen]: true,
+				[mapping.fields.expanded]: true,
 				[mapping.fields.children]: items
 			}
 		]

package/src/wrappers/Category.svelte

@@ -1,13 +1,12 @@
 <script>
 	import { getContext } from 'svelte'
-	import { defaultFields, FieldMapper } from '@rokkit/core'
 
 	const registry = getContext('registry')
 
 	let {
 		class: className = '',
 		options = [],
-		fields = defaultFields,
+		fields,
 		navigator = 'tabs',
 		type = 'vertical',
 		category = null,
@@ -19,7 +18,9 @@
 </script>
 
 <section class={className}>
-	<Template {options} {fields} bind:value={category} {...restProps} />
+	{#if Template}
+		<Template {options} {fields} bind:value={category} {...restProps} />
+	{/if}
 	<field-layout class={type}>
 		{@render children?.()}
 	</field-layout>