@rokkit/ui 1.0.0-next.127 → 1.0.0-next.129

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.127",
+  "version": "1.0.0-next.129",
   "description": "Data driven UI components for Rokkit applications",
   "type": "module",
   "svelte": "./src/index.ts",
@@ -25,8 +25,6 @@
   ],
   "scripts": {
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
     "build": "echo 'No build step needed for source-only package'"
   },
   "keywords": [
@@ -37,26 +35,18 @@
     "dropdown"
   ],
   "dependencies": {
-    "@rokkit/core": "1.0.0-next.127",
-    "@rokkit/data": "1.0.0-next.127",
-    "@rokkit/states": "1.0.0-next.127",
-    "@rokkit/actions": "1.0.0-next.127"
+    "@rokkit/core": "1.0.0-next.129",
+    "@rokkit/data": "1.0.0-next.129",
+    "@rokkit/states": "1.0.0-next.129",
+    "@rokkit/actions": "1.0.0-next.129"
   },
   "peerDependencies": {
     "shiki": "^3.23.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/svelte": "^5.3.1",
-    "@testing-library/user-event": "^14.6.1",
-    "@vitest/browser": "^4.0.18",
-    "playwright": "^1.58.2",
     "svelte": "^5.53.5",
     "svelte-check": "^4.4.3",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "typescript": "^5.9.3"
   }
 }

package/src/components/BreadCrumbs.svelte

@@ -1,18 +1,23 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
-	import { ItemProxy, type ItemFields } from '../types/item-proxy.js'
+	import { ProxyItem, messages } from '@rokkit/states'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+
+	interface BreadCrumbsIcons {
+		separator?: string
+	}
 
 	interface BreadCrumbsProps {
 		/** Array of breadcrumb items */
 		items?: unknown[]
 		/** Custom field mappings */
-		fields?: Partial<ItemFields>
-		/** Separator icon class (default: 'i-lucide:chevron-right') */
-		separator?: string
+		fields?: Record<string, string>
+		/** Custom icons */
+		icons?: BreadCrumbsIcons
 		/** Callback when a breadcrumb is clicked */
 		onclick?: (value: unknown, item: unknown) => void
 		/** Custom snippet for rendering each crumb */
-		crumb?: Snippet<[ItemProxy, boolean]>
+		crumb?: Snippet<[ProxyItem, boolean]>
 		/** Additional CSS class */
 		class?: string
 	}
@@ -20,29 +25,32 @@
 	const {
 		items = [],
 		fields,
-		separator = 'i-lucide:chevron-right',
+		label = messages.current.breadcrumbs.label,
+		icons: userIcons = {} as BreadCrumbsIcons,
 		onclick,
 		crumb,
 		class: className = ''
-	}: BreadCrumbsProps = $props()
+	}: BreadCrumbsProps & { label?: string } = $props()
 
-	function createProxy(item: unknown): ItemProxy {
-		return new ItemProxy(item as Record<string, unknown>, fields)
+	const icons = $derived({ separator: DEFAULT_STATE_ICONS.navigate.right, ...userIcons })
+
+	function createProxy(item: unknown): ProxyItem {
+		return new ProxyItem(item, fields)
 	}
 
-	function handleClick(proxy: ItemProxy) {
-		onclick?.(proxy.itemValue, proxy.original)
+	function handleClick(proxy: ProxyItem) {
+		onclick?.(proxy.value, proxy.original)
 	}
 </script>
 
-{#snippet defaultCrumb(proxy: ItemProxy, _isLast: boolean)}
-	{#if proxy.icon}
-		<span data-breadcrumb-icon class={proxy.icon} aria-hidden="true"></span>
+{#snippet defaultCrumb(proxy: ProxyItem, _isLast: boolean)}
+	{#if proxy.get('icon')}
+		<span data-breadcrumb-icon class={proxy.get('icon')} aria-hidden="true"></span>
 	{/if}
-	<span data-breadcrumb-label>{proxy.text}</span>
+	<span data-breadcrumb-label>{proxy.label}</span>
 {/snippet}
 
-<nav data-breadcrumbs class={className || undefined} aria-label="Breadcrumb">
+<nav data-breadcrumbs class={className || undefined} aria-label={label}>
 	<ol data-breadcrumb-list>
 		{#each items as item, index (index)}
 			{@const proxy = createProxy(item)}
@@ -50,7 +58,7 @@
 
 			{#if index > 0}
 				<li data-breadcrumb-separator aria-hidden="true">
-					<span class={separator}></span>
+					<span class={icons.separator}></span>
 				</li>
 			{/if}
 
@@ -63,6 +71,18 @@
 							{@render defaultCrumb(proxy, isLast)}
 						{/if}
 					</span>
+				{:else if proxy.get('href')}
+					<a
+						href={proxy.get('href')}
+						data-breadcrumb-link
+						onclick={() => handleClick(proxy)}
+					>
+						{#if crumb}
+							{@render crumb(proxy, isLast)}
+						{:else}
+							{@render defaultCrumb(proxy, isLast)}
+						{/if}
+					</a>
 				{:else}
 					<button
 						type="button"

package/src/components/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { ButtonProps } from '../types/button.js'
-	import { ItemProxy } from '../types/item-proxy.js'
+	import { ProxyItem } from '@rokkit/states'
 	import ItemContent from './ItemContent.svelte'
 
 	let {
@@ -12,23 +12,25 @@
 		icon,
 		iconRight,
 		href,
-		target,
+		target = '_self',
+		title,
 		disabled = false,
 		loading = false,
 		onclick,
 		class: className = '',
-		children
+		children,
+		...rest
 	}: ButtonProps = $props()
 
 	const isIconOnly = $derived(Boolean(icon) && !label && !children)
 	const isDisabled = $derived(disabled || loading)
 
 	/**
-	 * Create an ItemProxy for default content rendering.
+	 * Create a ProxyItem for default content rendering.
 	 * Constructs a minimal item from button props.
 	 */
 	const proxy = $derived(
-		new ItemProxy({ text: label, icon, iconRight }, { text: 'text', icon: 'icon' })
+		new ProxyItem({ text: label, icon, iconRight })
 	)
 </script>
 
@@ -46,6 +48,7 @@
 	<a
 		{href}
 		{target}
+		{title}
 		data-button
 		data-variant={variant}
 		data-style={style}
@@ -55,6 +58,7 @@
 		class={className || undefined}
 		aria-label={label}
 		aria-busy={loading || undefined}
+		{...rest}
 	>
 		{#if children}
 			{@render children()}
@@ -65,6 +69,7 @@
 {:else}
 	<button
 		{type}
+		{title}
 		data-button
 		data-variant={variant}
 		data-style={style}
@@ -77,6 +82,7 @@
 		aria-label={label}
 		aria-busy={loading || undefined}
 		{onclick}
+		{...rest}
 	>
 		{#if children}
 			{@render children()}

package/src/components/Carousel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 	import { swipeable, keyboard } from '@rokkit/actions'
+	import { messages } from '@rokkit/states'
 
 	interface CarouselProps {
 		/** Number of slides (required when using children snippet) */
@@ -36,10 +37,13 @@
 		showDots = true,
 		showArrows = true,
 		transition = 'slide',
+		labels: userLabels = {},
 		class: className = '',
 		slide,
 		children
-	}: CarouselProps = $props()
+	}: CarouselProps & { labels?: Record<string, string> } = $props()
+
+	const labels = $derived({ ...messages.current.carousel, ...userLabels })
 
 	let hovered = $state(false)
 
@@ -85,13 +89,14 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
 	data-carousel
 	data-carousel-transition={transition}
 	class={className || undefined}
-	role="group"
+	role="application"
 	aria-roledescription="carousel"
-	aria-label="Carousel"
+	aria-label={labels.label}
 	tabindex="0"
 	use:swipeable={{ horizontal: true, vertical: false }}
 	use:keyboard={keyMap}
@@ -133,7 +138,7 @@
 		<button
 			data-carousel-prev
 			type="button"
-			aria-label="Previous slide"
+			aria-label={labels.prev}
 			onclick={prev}
 			disabled={!loop && current === 0}
 		>
@@ -143,7 +148,7 @@
 		<button
 			data-carousel-next
 			type="button"
-			aria-label="Next slide"
+			aria-label={labels.next}
 			onclick={next}
 			disabled={!loop && current === count - 1}
 		>
@@ -152,7 +157,7 @@
 	{/if}
 
 	{#if showDots && count > 1}
-		<div data-carousel-dots role="tablist" aria-label="Slide navigation">
+		<div data-carousel-dots role="tablist" aria-label={labels.slides}>
 			{#each Array(count) as _, index (index)}
 				<button
 					data-carousel-dot

package/src/components/Code.svelte

@@ -2,6 +2,7 @@
 	import type { CodeProps, CodeStateIcons } from '../types/index.js'
 	import { defaultCodeStateIcons } from '../types/code.js'
 	import { highlightCode } from '../utils/shiki.js'
+	import { messages } from '@rokkit/states'
 
 	const {
 		code,
@@ -9,9 +10,12 @@
 		theme = 'dark',
 		showLineNumbers = false,
 		showCopyButton = true,
+		labels: userLabels = {},
 		icons: userIcons,
 		class: className = ''
-	}: CodeProps = $props()
+	}: CodeProps & { labels?: Record<string, string> } = $props()
+
+	const labels = $derived({ ...messages.current.code, ...userLabels })
 
 	// Merge icons with defaults
 	const icons = $derived<CodeStateIcons>({ ...defaultCodeStateIcons, ...userIcons })
@@ -55,7 +59,7 @@
 			type="button"
 			class="copy-button"
 			onclick={copyToClipboard}
-			aria-label={copied ? 'Copied!' : 'Copy code'}
+			aria-label={copied ? labels.copied : labels.copy}
 		>
 			{#if copied}
 				<span class="copy-icon {icons.copysuccess}"></span>

package/src/components/FloatingAction.svelte

@@ -3,16 +3,17 @@
 		FloatingActionProps,
 		FloatingActionItem,
 		FloatingActionItemSnippet,
-		FloatingActionItemHandlers
+		FloatingActionItemHandlers,
+		FloatingActionIcons
 	} from '../types/floating-action.js'
 	import { getSnippet } from '../types/floating-action.js'
-	import { ItemProxy } from '../types/item-proxy.js'
+	import { ProxyItem } from '@rokkit/states'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
 
 	let {
 		items = [],
 		fields: userFields,
-		icon = 'i-lucide:plus',
-		closeIcon = 'i-lucide:x',
+		icons: userIcons = {} as FloatingActionIcons,
 		label = 'Actions',
 		size = 'md',
 		position = 'bottom-right',
@@ -30,11 +31,13 @@
 		...snippets
 	}: FloatingActionProps & { [key: string]: FloatingActionItemSnippet | unknown } = $props()
 
+	const icons = $derived({ add: DEFAULT_STATE_ICONS.action.add, close: DEFAULT_STATE_ICONS.action.close, ...userIcons })
+
 	/**
-	 * Create an ItemProxy for the given item
+	 * Create a ProxyItem for the given item
 	 */
-	function createProxy(item: FloatingActionItem): ItemProxy {
-		return new ItemProxy(item, userFields)
+	function createProxy(item: FloatingActionItem): ProxyItem {
+		return new ProxyItem(item, userFields)
 	}
 
 	let fabRef = $state<HTMLDivElement | null>(null)
@@ -82,9 +85,9 @@
 	/**
 	 * Handle item selection
 	 */
-	function handleItemClick(item: { proxy: ItemProxy; original: FloatingActionItem }) {
+	function handleItemClick(item: { proxy: ProxyItem; original: FloatingActionItem }) {
 		if (item.proxy.disabled) return
-		onselect?.(item.proxy.itemValue, item.original)
+		onselect?.(item.proxy.value, item.original)
 		close()
 		// Return focus to trigger
 		const trigger = fabRef?.querySelector('[data-fab-trigger]') as HTMLElement | undefined
@@ -162,7 +165,7 @@
 	 */
 	function handleItemKeyDown(
 		event: KeyboardEvent,
-		item: { proxy: ItemProxy; original: FloatingActionItem }
+		item: { proxy: ProxyItem; original: FloatingActionItem }
 	) {
 		if (event.key === 'Enter' || event.key === ' ') {
 			event.preventDefault()
@@ -190,7 +193,7 @@
 	 * Create handlers object for custom snippets
 	 */
 	function createHandlers(item: {
-		proxy: ItemProxy
+		proxy: ProxyItem
 		original: FloatingActionItem
 	}): FloatingActionItemHandlers {
 		return {
@@ -202,8 +205,8 @@
 	/**
 	 * Resolve which snippet to use for an item
 	 */
-	function resolveItemSnippet(proxy: ItemProxy): FloatingActionItemSnippet | null {
-		const snippetName = proxy.snippetName
+	function resolveItemSnippet(proxy: ProxyItem): FloatingActionItemSnippet | null {
+		const snippetName = proxy.get('snippet')
 		if (snippetName) {
 			const namedSnippet = getSnippet(snippets, snippetName)
 			if (namedSnippet) {
@@ -240,7 +243,7 @@
 </script>
 
 {#snippet defaultItem(
-	proxy: ItemProxy,
+	proxy: ProxyItem,
 	handlers: FloatingActionItemHandlers,
 	index: number,
 	total: number
@@ -251,22 +254,22 @@
 		data-fab-index={index}
 		data-disabled={proxy.disabled || undefined}
 		disabled={proxy.disabled || disabled}
-		aria-label={proxy.label || proxy.text}
+		aria-label={proxy.label}
 		style="--fab-index: {index}; --fab-total: {total}; --fab-delay: {getItemDelay(index)}"
 		onclick={handlers.onclick}
 		onkeydown={handlers.onkeydown}
 	>
-		{#if proxy.icon}
-			<span data-fab-item-icon class={proxy.icon} aria-hidden="true"></span>
+		{#if proxy.get('icon')}
+			<span data-fab-item-icon class={proxy.get('icon')} aria-hidden="true"></span>
 		{/if}
-		{#if proxy.text}
-			<span data-fab-item-label>{proxy.text}</span>
+		{#if proxy.label}
+			<span data-fab-item-label>{proxy.label}</span>
 		{/if}
 	</button>
 {/snippet}
 
 {#snippet renderItem(
-	item: { proxy: ItemProxy; original: FloatingActionItem },
+	item: { proxy: ProxyItem; original: FloatingActionItem },
 	index: number,
 	total: number
 )}
@@ -326,6 +329,6 @@
 		onclick={toggle}
 		onkeydown={handleTriggerKeyDown}
 	>
-		<span data-fab-icon class={open ? closeIcon : icon} aria-hidden="true"></span>
+		<span data-fab-icon class={open ? icons.close : icons.add} aria-hidden="true"></span>
 	</button>
 </div>

package/src/components/FloatingNavigation.svelte

@@ -1,22 +1,29 @@
 <script lang="ts">
-	import type { FloatingNavigationProps } from '../types/floating-navigation.js'
-	import { ItemProxy } from '../types/item-proxy.js'
+	import type { FloatingNavigationProps, FloatingNavigationIcons } from '../types/floating-navigation.js'
+	import { ProxyItem, messages } from '@rokkit/states'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
 
 	let {
 		items = [],
 		fields: userFields,
+		icons: userIcons = {} as FloatingNavigationIcons,
 		value = $bindable(),
 		position = 'right',
 		pinned = $bindable(false),
 		observe = true,
 		observerOptions = { rootMargin: '-20% 0px -70% 0px', threshold: 0 },
 		size = 'md',
-		label = 'Page navigation',
+		label = messages.current.floatingNav.label,
+		labels: userLabels = {},
 		onselect,
 		onpinchange,
 		item: itemSnippet,
 		class: className = ''
-	}: FloatingNavigationProps = $props()
+	}: FloatingNavigationProps & { labels?: Record<string, string> } = $props()
+
+	const labels = $derived({ ...messages.current.floatingNav, ...userLabels })
+
+	const icons = $derived({ pin: DEFAULT_STATE_ICONS.action.pin, unpin: DEFAULT_STATE_ICONS.action.unpin, ...userIcons })
 
 	let navRef = $state<HTMLElement | null>(null)
 	let expanded = $state(false)
@@ -26,13 +33,13 @@
 
 	const itemProxies = $derived(
 		items.map((item) => ({
-			proxy: new ItemProxy(item, userFields),
+			proxy: new ProxyItem(item, userFields),
 			original: item
 		}))
 	)
 
 	const activeIndex = $derived(
-		itemProxies.findIndex((item) => item.proxy.itemValue === value)
+		itemProxies.findIndex((item) => item.proxy.value === value)
 	)
 
 	function togglePin() {
@@ -49,13 +56,13 @@
 		if (!pinned) expanded = false
 	}
 
-	function handleItemClick(item: { proxy: ItemProxy; original: Record<string, unknown> }) {
-		value = item.proxy.itemValue
-		onselect?.(item.proxy.itemValue, item.original)
+	function handleItemClick(item: { proxy: ProxyItem; original: Record<string, unknown> }) {
+		value = item.proxy.value
+		onselect?.(item.proxy.value, item.original)
 
 		// Smooth scroll to target section
-		const href = item.proxy.has('href') ? String(item.original[userFields?.href ?? 'href'] ?? '') : ''
-		const targetId = href.startsWith('#') ? href.slice(1) : String(item.proxy.itemValue)
+		const href = item.proxy.get('href') !== undefined ? String(item.original[userFields?.href ?? 'href'] ?? '') : ''
+		const targetId = href.startsWith('#') ? href.slice(1) : String(item.proxy.value)
 		const el = document.getElementById(targetId)
 		el?.scrollIntoView({ behavior: 'smooth' })
 	}
@@ -116,24 +123,24 @@
 			for (const entry of entries) {
 				if (entry.isIntersecting) {
 					const match = itemProxies.find((item) => {
-						const href = item.proxy.has('href')
+						const href = item.proxy.get('href') !== undefined
 							? String(item.original[userFields?.href ?? 'href'] ?? '')
 							: ''
-						const targetId = href.startsWith('#') ? href.slice(1) : String(item.proxy.itemValue)
+						const targetId = href.startsWith('#') ? href.slice(1) : String(item.proxy.value)
 						return targetId === entry.target.id
 					})
 					if (match) {
-						value = match.proxy.itemValue
+						value = match.proxy.value
 					}
 				}
 			}
 		}, observerOptions)
 
 		for (const item of itemProxies) {
-			const href = item.proxy.has('href')
+			const href = item.proxy.get('href') !== undefined
 				? String(item.original[userFields?.href ?? 'href'] ?? '')
 				: ''
-			const targetId = href.startsWith('#') ? href.slice(1) : String(item.proxy.itemValue)
+			const targetId = href.startsWith('#') ? href.slice(1) : String(item.proxy.value)
 			const el = document.getElementById(targetId)
 			if (el) observer.observe(el)
 		}
@@ -164,21 +171,21 @@
 			type="button"
 			data-floating-nav-pin
 			aria-pressed={pinned}
-			aria-label={pinned ? 'Unpin navigation' : 'Pin navigation'}
+			aria-label={pinned ? labels.unpin : labels.pin}
 			onclick={togglePin}
 		>
-			<span class={pinned ? 'i-lucide:pin-off' : 'i-lucide:pin'} aria-hidden="true"></span>
+			<span data-floating-nav-pin-icon class={pinned ? icons.unpin : icons.pin} aria-hidden="true"></span>
 		</button>
 	</div>
 
 	<div data-floating-nav-items>
-		{#each itemProxies as item, index (item.proxy.itemValue ?? index)}
-			{@const isActive = item.proxy.itemValue === value}
-			{@const isLink = item.proxy.has('href')}
+		{#each itemProxies as item, index (item.proxy.value ?? index)}
+			{@const isActive = item.proxy.value === value}
+			{@const isLink = item.proxy.get('href') !== undefined}
 			{#if itemSnippet}
 				{@render itemSnippet(item.original, {
-					text: item.proxy.text,
-					icon: item.proxy.icon,
+					text: item.proxy.label,
+					icon: item.proxy.get('icon'),
 					active: isActive
 				})}
 			{:else if isLink}
@@ -194,10 +201,10 @@
 						handleItemClick(item)
 					}}
 				>
-					{#if item.proxy.icon}
-						<span data-floating-nav-icon class={item.proxy.icon} aria-hidden="true"></span>
+					{#if item.proxy.get('icon')}
+						<span data-floating-nav-icon class={item.proxy.get('icon')} aria-hidden="true"></span>
 					{/if}
-					<span data-floating-nav-label>{item.proxy.text}</span>
+					<span data-floating-nav-label>{item.proxy.label}</span>
 				</a>
 			{:else}
 				<button
@@ -209,10 +216,10 @@
 					style="--fn-index: {index}; --fn-total: {itemProxies.length}"
 					onclick={() => handleItemClick(item)}
 				>
-					{#if item.proxy.icon}
-						<span data-floating-nav-icon class={item.proxy.icon} aria-hidden="true"></span>
+					{#if item.proxy.get('icon')}
+						<span data-floating-nav-icon class={item.proxy.get('icon')} aria-hidden="true"></span>
 					{/if}
-					<span data-floating-nav-label>{item.proxy.text}</span>
+					<span data-floating-nav-label>{item.proxy.label}</span>
 				</button>
 			{/if}
 		{/each}