@rokkit/core 1.0.0-next.22 → 1.0.0-next.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.22",
+  "version": "1.0.0-next.24",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -16,18 +16,19 @@
   "devDependencies": {
     "@jerrythomas/eslint-config-svelte": "^1.0.2",
     "@jerrythomas/prettier-config": "^1.0.0",
-    "@sveltejs/vite-plugin-svelte": "^2.1.1",
+    "@sveltejs/vite-plugin-svelte": "^2.2.0",
     "@testing-library/svelte": "^3.2.2",
-    "@vitest/coverage-istanbul": "^0.28.5",
-    "@vitest/ui": "~0.12.10",
-    "eslint": "^7.32.0",
-    "jsdom": "^19.0.0",
-    "svelte": "^3.58.0",
-    "typescript": "^4.9.5",
+    "@vitest/coverage-c8": "^0.31.0",
+    "@vitest/coverage-istanbul": "^0.31.0",
+    "@vitest/ui": "~0.31.0",
+    "eslint": "^8.40.0",
+    "jsdom": "^22.0.0",
+    "svelte": "^3.59.1",
+    "typescript": "^5.0.4",
     "validators": "latest",
-    "vite": "^4.3.4",
-    "vitest": "~0.19.1",
-    "shared-config": "1.0.0"
+    "vite": "^4.3.5",
+    "vitest": "~0.31.0",
+    "shared-config": "1.0.0-next.23"
   },
   "files": [
     "src/**/*.js",
@@ -47,7 +48,7 @@
     }
   },
   "dependencies": {
-    "ramda": "^0.28.0"
+    "ramda": "^0.29.0"
   },
   "scripts": {
     "lint": "prettier --check --plugin-search-dir=. . && eslint .",

package/src/Accordion.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
 	import { defaultFields } from './constants'
-	import { Text, Summary } from './items'
+	import { Item, Summary } from './items'
 	import List from './List.svelte'
 	import { navigator } from './actions/navigator'
 
@@ -16,7 +16,7 @@
 	let cursor = []
 
 	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Text, ...using }
+	$: using = { default: Item, ...using }
 
 	function handle(event) {
 		// console.log(event.type, event.detail)
@@ -63,7 +63,7 @@
 			class:is-selected={item === value}
 			data-path={index}
 		>
-			<Summary {fields} {using} bind:content={item} />
+			<Summary {fields} {using} bind:value={item} />
 			{#if hasItems && item[fields.isOpen]}
 				<List
 					bind:items={item[fields.children]}

package/src/BreadCrumbs.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { defaultFields } from './constants'
-	import { Text } from './items'
+	import { Item } from './items'
 
 	export let items = []
 	export let separator = '/'
@@ -8,7 +8,7 @@
 	export let using
 
 	$: fields = { ...defaultFields, ...(fields ?? {}) }
-	$: using = { default: Text, ...(using ?? {}) }
+	$: using = { default: Item, ...(using ?? {}) }
 </script>
 
 <crumbs class="flex">
@@ -27,7 +27,7 @@
 				</span>
 			{/if}
 			<crumb class:is-selected={index == items.length - 1}>
-				<svelte:component this={component} content={item} {fields} />
+				<svelte:component this={component} value={item} {fields} />
 			</crumb>
 		{/if}
 	{/each}

package/src/DropDown.svelte

@@ -4,7 +4,7 @@
 	import { defaultFields, defaultStateIcons } from './constants.js'
 
 	import Icon from './Icon.svelte'
-	import Text from './items/Text.svelte'
+	import Item from './items/Item.svelte'
 	import List from './List.svelte'
 	import Slider from './Slider.svelte'
 
@@ -14,13 +14,13 @@
 	export { className as class }
 	export let items = []
 	export let fields = defaultFields
-	export let using = { default: Text }
+	export let using = { default: Item }
 	export let value = null
-	export let title
-	export let icon
+	export let title = null
+	export let icon = null
 	export let small = false
 
-	$: using = { default: Text, ...using }
+	$: using = { default: Item, ...using }
 	$: fields = { ...defaultFields, ...fields }
 
 	let offsetTop = 0
@@ -46,7 +46,7 @@
 >
 	<button
 		on:click|stopPropagation={() => (open = !open)}
-		class="flex"
+		class="flex items-center"
 		bind:clientHeight={offsetTop}
 		tabindex="-1"
 	>
@@ -54,7 +54,7 @@
 			<Icon name={icon} />
 		{/if}
 		{#if !small && title}
-			<p>{title}</p>
+			<p class="flex w-full">{title}</p>
 		{/if}
 		{#if open}
 			<icon class={icons.opened} />

package/src/DropSearch.svelte

@@ -2,14 +2,14 @@
 	import { defaultFields } from './constants.js'
 	import List from './List.svelte'
 	import Slider from './Slider.svelte'
-	import { Text } from './items'
+	import { Item } from './items'
 
 	export let data
 	export let value = null
 	export let fields = defaultFields
-	export let using = { default: Text }
+	export let using = { default: Item }
 
-	$: using = { default: Text, ...using }
+	$: using = { default: Item, ...using }
 	$: fields = { ...defaultFields, ...fields }
 
 	let opened = false

package/src/Icon.svelte

@@ -1,17 +1,31 @@
 <script>
 	let className = ''
 	export { className as class }
+	export let name
+	export let size = 'base'
+	export let role = 'img'
+	export let label = name
+	export let disabled = false
+	export let tabindex = 0
 
-	export let name = ''
-	let h
+	$: tabindex = role !== 'button' || disabled ? -1 : tabindex
+	$: small = size === 'small' || className.includes('small')
+	$: medium = size === 'medium' || className.includes('medium')
+	$: large = size === 'large' || className.includes('large')
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<square-icon
-	class="flex flex-col flex-shrink-0 h-full items-center justify-center {className}"
-	bind:clientHeight={h}
-	style:width="{h}px"
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<icon
+	class="flex flex-shrink-0 items-center justify-center {className}"
+	class:small
+	class:medium
+	class:large
+	class:disabled
+	{role}
+	aria-label={label}
 	on:click
+	on:keydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
+	{tabindex}
 >
-	<icon class={name} aria-hidden="true" />
-</square-icon>
+	<i class={name} aria-hidden="true" />
+</icon>

package/src/List.svelte

@@ -2,7 +2,7 @@
 	import { navigator } from './actions'
 	import { createEventDispatcher } from 'svelte'
 	import { defaultFields } from './constants'
-	import { Text } from './items'
+	import { Item } from './items'
 
 	const dispatch = createEventDispatcher()
 
@@ -24,7 +24,7 @@
 	}
 
 	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Text, ...using }
+	$: using = { default: Item, ...using }
 	$: filtered = items.filter((item) => !item[fields.isDeleted])
 </script>
 
@@ -47,6 +47,7 @@
 			? using[item[fields.component]] || using.default
 			: using.default}
 		{@const path = [...hierarchy, index].join(',')}
+		{@const props = item[fields.props] || { fields }}
 		<item
 			class="flex flex-shrink-0 flex-grow-0 items-center cursor-pointer w-full gap-2 select-none item"
 			role="option"
@@ -56,8 +57,8 @@
 		>
 			<svelte:component
 				this={component}
-				bind:content={item}
-				{fields}
+				bind:value={item}
+				{...props}
 				on:change
 			/>
 		</item>

package/src/NestedList.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Node, Text } from './items'
+	import { Node, Item } from './items'
 	import { defaultFields, defaultStateIcons } from './constants'
 	import { getLineTypes } from './lib/connector'
 
@@ -14,7 +14,7 @@
 	export let hierarchy = []
 	export let icons
 
-	$: using = { default: Text, ...using }
+	$: using = { default: Item, ...using }
 	$: fields = { ...defaultFields, ...fields }
 	$: nodeTypes = items.map((_, index) =>
 		index === items.length - 1 ? 'last' : 'child'
@@ -28,35 +28,25 @@
 	class:rtl
 	tabindex="-1"
 >
-	<!-- tabindex={hierarchy.length == 0 ? 0 : -1}
-	use:navigator={{ items, fields, indices, enabled: hierarchy.length == 0 }}
-	on:select={handle}
-	on:move={handle}
-	on:expand={handle}
-	on:collapse={handle}
-> -->
-	{#each items as content, index}
-		<!-- {@const type = nodeTypes[index] === 'middle' ? 'line' : 'empty'} -->
-		{@const hasChildren = fields.children in content}
-		<!-- {@const connectors =   types.slice(0, -1)} -->
+	{#each items as item, index}
+		{@const hasChildren = fields.children in item}
 		{@const path = [...hierarchy, index]}
 		{@const connectors = getLineTypes(hasChildren, types, nodeTypes[index])}
 
-		<!-- types={[...connectors, nodeTypes[index]]} -->
 		<Node
-			bind:content
+			bind:value={item}
 			{fields}
 			{using}
 			types={connectors}
 			{rtl}
 			{path}
 			stateIcons={icons}
-			selected={value === content}
+			selected={value === item}
 		/>
 		<!-- types={[...connectors, type, nodeTypes[index]]} -->
-		{#if hasChildren && content[fields.isOpen]}
+		{#if hasChildren && item[fields.isOpen]}
 			<svelte:self
-				items={content[fields.children]}
+				items={item[fields.children]}
 				bind:value
 				{fields}
 				{using}

package/src/NestedPaginator.svelte

@@ -1,7 +1,7 @@
 <script>
 	import BreadCrumbs from './BreadCrumbs.svelte'
 	import { defaultFields } from './constants'
-	import { Text } from './items'
+	import { Item } from './items'
 	import { flattenNestedList } from './lib/nested'
 	import { createEventDispatcher } from 'svelte'
 
@@ -50,7 +50,7 @@
 
 	$: flatList = flattenNestedList(items, fields)
 	$: fields = { ...defaultFields, ...(fields ?? {}) }
-	$: using = { default: Text, ...(using ?? {}) }
+	$: using = { default: Item, ...(using ?? {}) }
 </script>
 
 <pages>

package/src/SpinList.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
 	import { defaultFields } from './constants'
-	import { Text } from './items'
+	import { Item } from './items'
 	import { navigable } from './actions'
 	import { getComponent } from './list'
 
@@ -24,7 +24,7 @@
 		dispatch('select', items[index])
 	}
 
-	$: using = { default: Text, ...using }
+	$: using = { default: Item, ...using }
 	$: fields = { ...defaultFields, ...fields }
 	$: value = index >= 0 ? items[index] : null
 	$: component = getComponent(value, fields)
@@ -41,7 +41,7 @@
 		on:next={moveNext}
 		on:previous={moveBack}
 	/>
-	<!-- <svelte:component this={component} bind:content={value} {fields} on:change /> -->
+	<!-- <svelte:component this={component} bind:value={value} {fields} on:change /> -->
 	<square class="h-full position-absolute right-0">
 		<icon class="i-carbon-chevron-sort" />
 	</square>

package/src/Switch.svelte

@@ -1,52 +1,67 @@
 <script>
+	import { createEventDispatcher } from 'svelte'
 	import { defaultFields } from './constants'
-	import { Text } from './items'
+	import { Item } from './items'
+	import { navigator } from './actions'
+	import { getComponent } from './lib'
+
+	const dispatch = createEventDispatcher()
 
 	let className = ''
 	export { className as class }
 	export let items = [false, true]
 	export let fields = defaultFields
-	export let using = { default: Text }
+	export let using = {}
 	export let compact = true
 	export let value
+	let cursor = []
 
-	const getComponent = (item, fields) => {
-		return fields.component
-			? item[fields.component] ?? using.default
-			: using.default
-	}
+	function handleNav(event) {
+		value = event.detail.node
+		cursor = event.detail.path
 
-	const onItemClick = (item) => {
-		value = item
+		dispatch('change', { item: value, indices: cursor })
 	}
 
 	$: useComponent = !items.every((item) => [false, true].includes(item))
 	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Text, ...using }
+	$: using = { default: Item, ...using }
 </script>
 
 {#if !Array.isArray(items) || items.length < 2}
 	<error>Items should be an array with at least two items.</error>
 {:else}
-	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<toggle-switch
 		class="flex items-center {className}"
+		class:is-off={items.length == 2 && value === items[0]}
+		class:is-on={items.length == 2 && value === items[1]}
 		class:compact
 		tabindex="0"
+		role="listbox"
+		use:navigator={{
+			items,
+			fields,
+			vertical: false,
+			indices: cursor
+		}}
+		on:move={handleNav}
+		on:select={handleNav}
 	>
 		{#each items as item, index (item)}
-			{@const component = useComponent ? getComponent(item, fields) : null}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			{@const component = useComponent
+				? getComponent(item, fields, using)
+				: null}
 			<item
 				class="flex relative"
-				class:is-selected={item === value}
-				on:click={() => onItemClick(item)}
+				role="option"
+				aria-selected={item === value}
+				data-path={index}
 			>
 				{#if item == value}
 					<indicator class="absolute top-0 left-0 right-0 bottom-0" />
 				{/if}
 				{#if component}
-					<svelte:component this={component} content={item} {fields} />
+					<svelte:component this={component} value={item} {fields} />
 				{/if}
 			</item>
 		{/each}

package/src/TabItem.svelte

@@ -3,25 +3,28 @@
 
 	const dispatch = createEventDispatcher()
 
-	export let icon = null
-	export let label
-	export let active = false
-	export let allowClose = false
+	export let fields = {}
+	export let using = {}
+	export let value = null
+	export let index = 0
+	export let icons
+	export let selected = false
+	export let removable = false
+
+	$: component = value[fields.component]
+		? using[value[fields.component]] || using.default
+		: using.default
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<tab class="flex flex-row items-center" class:active on:click>
-	{#if icon}
-		<icon class={icon} aria-label={icon} />
-	{/if}
-	{#if label}
-		<p class="flex flex-shrink-0 flex-grow justify-center">{label}</p>
-	{/if}
-	{#if allowClose}
-		<icon
-			class="remove small"
-			aria-label="remove"
-			on:click={() => dispatch('remove')}
-		/>
+<tab
+	class="flex flex-row items-center"
+	role="option"
+	aria-selected={selected}
+	data-path={index}
+>
+	<svelte:component this={component} {value} {fields} />
+	{#if removable}
+		<icon class={icons.close} on:click={() => dispatch('remove')} />
 	{/if}
 </tab>

package/src/Tabs.svelte

@@ -1,6 +1,7 @@
 <script>
-	import { defaultFields } from './constants'
-	import { Text } from './items'
+	import { defaultFields, defaultStateIcons } from './constants'
+	import Icon from './Icon.svelte'
+	import { ItemWrapper } from './items'
 	import { navigator } from './actions'
 	import { createEventDispatcher } from 'svelte'
 
@@ -12,20 +13,38 @@
 	export let fields = {}
 	export let using = {}
 	export let value = null
+	export let below = false
+	export let align = 'left'
+	export let editable = false
+	export let icons = defaultStateIcons.action
+
 	let cursor = []
 
+	function handleRemove(item) {
+		if (typeof item === Object) {
+			item[fields.isDeleted] = true
+		} else {
+			items = items.filter((i) => i !== item)
+		}
+
+		dispatch('remove', { item })
+	}
 	function handleNav(event) {
 		value = event.detail.node
 		cursor = event.detail.path
 
 		dispatch('select', { item: value, indices: cursor })
 	}
+	$: icons = { ...defaultStateIcons.action, ...icons }
+	$: filtered = items.filter((item) => !item[fields.isDeleted])
 	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Text, ...using }
 </script>
 
 <tabs
 	class="flex w-full {className}"
+	class:is-below={below}
+	class:justify-center={align == 'center'}
+	class:justify-end={align == 'right'}
 	tabindex="0"
 	role="listbox"
 	use:navigator={{
@@ -37,13 +56,26 @@
 	on:move={handleNav}
 	on:select={handleNav}
 >
-	{#each items as item, index}
-		{@const component = item[fields.component]
-			? using[item[fields.component]] || using.default
-			: using.default}
-
-		<item class="flex" class:is-selected={item === value} data-path={index}>
-			<svelte:component this={component} content={item} {fields} />
-		</item>
+	{#each filtered as item, index}
+		<ItemWrapper
+			value={item}
+			{index}
+			{fields}
+			{using}
+			removable={editable}
+			selected={item === value}
+			{icons}
+			class="tab"
+			on:remove={handleRemove}
+		/>
 	{/each}
+	{#if editable}
+		<Icon
+			name="add"
+			role="button"
+			label="Add Tab"
+			size="small"
+			on:click={() => dispatch('add')}
+		/>
+	{/if}
 </tabs>

package/src/Tree.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
 	import NestedList from './NestedList.svelte'
-	import { Text } from './items'
+	import { Item } from './items'
 	import { defaultFields } from './constants'
 	import { navigator } from './actions/navigator'
 
@@ -10,7 +10,7 @@
 	export { className as class }
 	export let items = []
 	export let fields = {}
-	export let using = { default: Text }
+	export let using = { default: Item }
 	export let root = null
 	export let value = null
 

package/src/actions/navigable.js

@@ -2,7 +2,6 @@ export function navigable(
 	node,
 	{ horizontal = true, nested = false, enabled = true } = {}
 ) {
-	// console.log(node, enabled)
 	if (!enabled) return { destroy() {} }
 	const previous = () => node.dispatchEvent(new CustomEvent('previous'))
 	const next = () => node.dispatchEvent(new CustomEvent('next'))

package/src/actions/swipeable.js

@@ -1,4 +1,3 @@
-// const defaultOptions = { horizontal: true, vertical: false, threshold: 100 }
 export function swipeable(
 	node,
 	{ horizontal = true, vertical = false, threshold = 100, enabled = true } = {}

package/src/constants.js

@@ -93,32 +93,3 @@ export function stateIconsFromNames(icons) {
 }
 
 export const defaultStateIcons = stateIconsFromNames(defaultIcons)
-// export const defaultStateIcons = {
-// 	accordion: {
-// 		opened: 'accordion-opened',
-// 		closed: 'accordion-closed'
-// 	},
-// 	item: {
-// 		remove: 'item-remove',
-// 		add: 'item-add',
-// 		clear: 'item-clear',
-// 		search: 'item-search'
-// 	},
-// 	node: {
-// 		opened: 'node-opened',
-// 		closed: 'node-closed'
-// 	},
-// 	list: {
-// 		selector: 'list-selector'
-// 	},
-// 	checkbox: {
-// 		checked: 'checkbox-checked',
-// 		unchecked: 'checkbox-unchecked',
-// 		unknown: 'checkbox-unknown'
-// 	},
-// 	rating: { filled: 'rating-filled', empty: 'rating-empty' },
-// 	radio: {
-// 		off: 'radio-off',
-// 		on: 'radio-on'
-// 	}
-// }

package/src/items/Item.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { defaultFields } from '../constants'
+	import Icon from '../Icon.svelte'
+
+	export let value
+	export let fields = defaultFields
+
+	$: isObject = typeof value == 'object'
+	$: text = isObject ? value[fields.text] : value
+</script>
+
+{#if isObject}
+	{#if value[fields.icon]}
+		{@const iconName =
+			typeof value[fields.icon] == 'object'
+				? value[fields.icon][value[fields.state]]
+				: value[fields.icon]}
+		<Icon name={iconName} />
+	{:else if value[fields.image]}
+		<img
+			class="h-4 w-4 object-cover"
+			alt={value[fields.text]}
+			src={value[fields.image]}
+		/>
+	{/if}
+{/if}
+{#if text}
+	<p class="flex w-full">{text}</p>
+{/if}

package/src/items/{Pill.svelte → ItemWrapper.svelte}

@@ -1,32 +1,47 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
 	import { defaultFields, defaultStateIcons } from '../constants'
-	import Text from './Text.svelte'
+	import Item from './Item.svelte'
+	import Icon from '../Icon.svelte'
+
 	const dispatch = createEventDispatcher()
 
+	let className = ''
+	export { className as class }
 	export let value
 	export let fields = defaultFields
-	export let using = { default: Text }
+	export let using = { default: Item }
 	export let removable = false
+	export let selected = false
+	export let index = null
+	export let icons = defaultStateIcons.action
 
 	function handleClick() {
 		dispatch('remove', value)
 	}
+
 	$: component =
 		typeof value == 'object'
 			? using[value[fields.component] ?? 'default']
 			: using.default
 </script>
 
-<pill class="flex flex-row items-center">
+<wrap-item
+	class="flex flex-row items-center {className}"
+	role="option"
+	aria-selected={selected}
+	data-path={index}
+>
 	<item class="flex flex-row items-center">
-		<svelte:component this={component} content={value} {fields} />
+		<svelte:component this={component} bind:value {fields} />
 	</item>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	{#if removable}
-		<icon
-			class="{defaultStateIcons.action.remove} cursor-pointer"
+		<Icon
+			name={icons.remove}
+			role="button"
+			label="Remove"
+			size="small"
 			on:click={handleClick}
 		/>
 	{/if}
-</pill>
+</wrap-item>

package/src/items/Link.svelte

@@ -1,18 +1,18 @@
 <script>
-	import Text from './Text.svelte'
+	import Item from './Item.svelte'
 	import { defaultFields } from '../constants'
 
-	export let content
+	export let value
 	export let fields = defaultFields
 
-	$: target = fields.target ? content[fields.target] : ''
+	$: target = fields.target ? value[fields.target] : ''
 </script>
 
 <a
 	class="flex flex-row flex-grow items-center"
-	href={content[fields.url]}
+	href={value[fields.url]}
 	{target}
 	tabindex="-1"
 >
-	<Text {content} {fields} />
+	<Item {value} {fields} />
 </a>

package/src/items/Node.svelte

@@ -1,8 +1,9 @@
 <script>
-	import Connector from './Connector.svelte'
 	import { defaultFields, defaultStateIcons } from '../constants'
+	import Icon from '../Icon.svelte'
+	import Connector from './Connector.svelte'
 
-	export let content
+	export let value
 	export let fields = defaultFields
 	export let types = []
 	export let stateIcons = defaultStateIcons.node
@@ -13,13 +14,13 @@
 	export let path = []
 
 	$: stateIcons = { ...defaultStateIcons.node, ...(stateIcons ?? {}) }
-	$: hasChildren = fields.children in content
+	$: hasChildren = fields.children in value
 	$: state =
-		hasChildren && content[fields.isOpen]
+		hasChildren && value[fields.isOpen]
 			? { icon: stateIcons.opened, label: 'collapse' }
 			: { icon: stateIcons.closed, label: 'expand' }
-	$: component = content[fields.component]
-		? using[content[fields.component]] || using.default
+	$: component = value[fields.component]
+		? using[value[fields.component]] || using.default
 		: using.default
 </script>
 
@@ -35,14 +36,12 @@
 >
 	{#each types as type}
 		{#if type === 'icon'}
-			<span class="flex flex-col w-4 h-full items-center justify-center">
-				<icon class={state.icon} aria-label={state.label} tabindex="-1" />
-			</span>
+			<Icon name={state.icon} label={state.label} class="w-4 small" />
 		{:else}
 			<Connector {type} />
 		{/if}
 	{/each}
 	<item>
-		<svelte:component this={component} bind:content {fields} />
+		<svelte:component this={component} bind:value {fields} />
 	</item>
 </node>

package/src/items/Summary.svelte

@@ -1,24 +1,24 @@
 <script>
 	import { defaultFields } from '../constants'
-	import Text from './Text.svelte'
+	import Item from './Item.svelte'
 
-	export let content
+	export let value
 	export let fields = {}
 	export let using = {}
 
 	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Text, ...using }
-	$: hasItems = content[fields.children] && content[fields.children].length > 0
-	$: component = using[content[fields.component] ?? 'default']
+	$: using = { default: Item, ...using }
+	$: hasItems = value[fields.children] && value[fields.children].length > 0
+	$: component = using[value[fields.component] ?? 'default']
 </script>
 
 <summary
 	class="flex flex-row flex-shrink-0 items-center w-full cursor-pointer"
 	tabindex="-1"
 >
-	<svelte:component this={component} bind:content {fields} />
+	<svelte:component this={component} bind:value {fields} />
 	{#if hasItems}
-		{#if content[fields.isOpen]}
+		{#if value[fields.isOpen]}
 			<icon class="sm accordion-opened" aria-label="expand" />
 		{:else}
 			<icon class="sm accordion-closed" aria-label="collapse" />

package/src/items/index.js

@@ -1,8 +1,7 @@
-export { default as Text } from './Text.svelte'
+export { default as Item } from './Item.svelte'
 export { default as Link } from './Link.svelte'
 export { default as Node } from './Node.svelte'
-export { default as Pill } from './Pill.svelte'
-export { default as Collapsible } from './Collapsible.svelte'
+export { default as ItemWrapper } from './ItemWrapper.svelte'
 export { default as Connector } from './Connector.svelte'
 export { default as Separator } from './Separator.svelte'
 export { default as Summary } from './Summary.svelte'

package/src/lib/index.js

@@ -1 +1,7 @@
 export * from './nested'
+
+export function getComponent(item, fields, using) {
+	return fields.component
+		? item[fields.component] ?? using.default
+		: using.default
+}

package/src/mocks/Custom.svelte

@@ -1,7 +1,6 @@
 <script>
-	import { defaultFields } from '../../src/constants'
-	export let content
-	export let fields = defaultFields
+	export let value
+	export let fields
 </script>
 
-<span>{content[fields.text]}</span>
+<span>{value[fields.text]}</span>

package/src/List-Discard.svelte

@@ -1,48 +0,0 @@
-<script>
-	import ListActions from './ListActions.svelte'
-	import ListItems from './List.svelte'
-
-	let className = 'list'
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = {}
-	export let value = null
-	export let searchable = false
-	export let editable = false
-
-	let search
-	let filtered
-
-	function addItem() {
-		items = [...items, {}]
-		value = items[items.length - 1]
-	}
-	function deleteSelection() {
-		if (value) value.isDeleted = true
-	}
-	function clearSelection() {
-		value = null
-	}
-
-	$: filtered =
-		searchable && search && search.length
-			? items.filter((item) => item[fields.text].includes(search))
-			: items
-</script>
-
-<list class="flex flex-col w-full {className}">
-	{#if searchable || editable}
-		<ListActions
-			bind:search
-			{searchable}
-			{editable}
-			on:delete={deleteSelection}
-			on:clear={clearSelection}
-			on:add={addItem}
-		/>
-	{/if}
-	<scroll class="flex flex-col h-full overflow-scroll">
-		<ListItems bind:items={filtered} {fields} {using} bind:value on:select />
-	</scroll>
-</list>

package/src/items/Collapsible.svelte

@@ -1,51 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from '../constants'
-
-	const dispatch = createEventDispatcher()
-
-	export let content
-	export let fields = {}
-
-	$: fields = { ...defaultFields, ...fields }
-	$: hasItems = content[fields.children] && content[fields.children].length > 0
-
-	function toggle() {
-		if (hasItems) {
-			content.isOpen = !content.isOpen
-		}
-		dispatch('toggle', content)
-	}
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<collapsible
-	class="flex flex-row flex-shrink-0 items-center w-full leading-loose cursor-pointer"
-	class:expanded={content.isOpen}
-	on:click={toggle}
->
-	{#if content[fields.image]}
-		<img
-			class="h-8 w-8 rounded-full"
-			alt={content[fields.text]}
-			src={content[fields.image]}
-		/>
-	{/if}
-	{#if content[fields.icon]}
-		<icon class={content[fields.icon]} />
-	{/if}
-	{#if content[fields.url]}
-		<a href={content[fields.url]} class="flex flex-grow">
-			{content[fields.text]}
-		</a>
-	{:else}
-		<p class="flex flex-grow">{content[fields.text]}</p>
-	{/if}
-	{#if hasItems}
-		{#if content.isOpen}
-			<icon class="sm accordion-opened" aria-label="expand" />
-		{:else}
-			<icon class="sm accordion-closed" aria-label="collapse" />
-		{/if}
-	{/if}
-</collapsible>

package/src/items/Text.svelte

@@ -1,28 +0,0 @@
-<script>
-	import { defaultFields } from '../constants'
-
-	export let content
-	export let fields = defaultFields
-
-	$: isObject = typeof content == 'object'
-	$: text = isObject ? content[fields.text] : content
-</script>
-
-{#if isObject}
-	{#if content[fields.icon]}
-		{@const iconName =
-			typeof content[fields.icon] == 'object'
-				? content[fields.icon][content[fields.state]]
-				: content[fields.icon]}
-		<icon class={iconName} />
-	{:else if content[fields.image]}
-		<img
-			class="h-4 w-4 object-cover"
-			alt={content[fields.text]}
-			src={content[fields.image]}
-		/>
-	{/if}
-{/if}
-{#if text}
-	<p class="flex w-full">{text}</p>
-{/if}