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

package/src/components/Tree.svelte

@@ -81,64 +81,64 @@
 		{@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-active={isActive || undefined}
-				role="treeitem"
-				aria-expanded={node.isExpandable ? proxy.expanded : undefined}
-				aria-selected={isActive}
-				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={proxy.expanded ? labels.collapse : labels.expand}
-								tabindex={-1}
-							>
-								<span class={proxy.expanded ? icons.opened : icons.closed} aria-hidden="true"></span>
-							</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-active={isActive || undefined}
+			role="treeitem"
+			aria-expanded={node.isExpandable ? proxy.expanded : undefined}
+			aria-selected={isActive}
+			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={proxy.expanded ? labels.collapse : labels.expand}
+							tabindex={-1}
 						>
-							{#if content}
-								{@render content(proxy)}
-							{:else}
-								<ItemContent {proxy} showIcon={!node.isExpandable} showSubtext={false} />
-							{/if}
+							<span class={proxy.expanded ? icons.opened : icons.closed} aria-hidden="true"></span>
 						</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}
 </div>

package/src/components/UploadFileStatus.svelte

@@ -28,7 +28,7 @@
 		onretry,
 		onremove,
 		labels: userLabels = {} as Record<string, string>,
-		icons: userIcons = {} as Record<string, string>,
+		icons: userIcons = {} as Record<string, string>
 	}: UploadFileStatusProps = $props()
 
 	const labels = $derived({ ...messages.current.uploadProgress, ...userLabels })
@@ -36,13 +36,17 @@
 		cancel: DEFAULT_STATE_ICONS.action.cancel,
 		retry: DEFAULT_STATE_ICONS.action.retry,
 		remove: DEFAULT_STATE_ICONS.action.remove,
-		...userIcons,
+		...userIcons
 	})
 
 	const status = $derived(String(proxy.get('status') ?? 'unknown'))
 	const progress = $derived(Number(proxy.get('progress') ?? 0))
 	const size = $derived(Number(proxy.get('size') ?? 0))
-	const fileIcon = $derived(proxy.get('icon') ? String(proxy.get('icon')) : inferIcon(proxy.get('type') as string | undefined))
+	const fileIcon = $derived(
+		proxy.get('icon')
+			? String(proxy.get('icon'))
+			: inferIcon(proxy.get('type') as string | undefined)
+	)
 	const statusLabel = $derived(labels[status] ?? status)
 
 	const showBar = $derived(progress > 0 && progress < 100)
@@ -64,17 +68,32 @@
 	{#if showCancel || showRetry || showRemove}
 		<div data-upload-actions>
 			{#if showCancel}
-				<button type="button" data-upload-cancel aria-label="{labels.cancel} {proxy.label}" onclick={() => oncancel?.(proxy)}>
+				<button
+					type="button"
+					data-upload-cancel
+					aria-label="{labels.cancel} {proxy.label}"
+					onclick={() => oncancel?.(proxy)}
+				>
 					<span class={icons.cancel} aria-hidden="true"></span>
 				</button>
 			{/if}
 			{#if showRetry}
-				<button type="button" data-upload-retry aria-label="{labels.retry} {proxy.label}" onclick={() => onretry?.(proxy)}>
+				<button
+					type="button"
+					data-upload-retry
+					aria-label="{labels.retry} {proxy.label}"
+					onclick={() => onretry?.(proxy)}
+				>
 					<span class={icons.retry} aria-hidden="true"></span>
 				</button>
 			{/if}
 			{#if showRemove}
-				<button type="button" data-upload-remove aria-label="{labels.remove} {proxy.label}" onclick={() => onremove?.(proxy)}>
+				<button
+					type="button"
+					data-upload-remove
+					aria-label="{labels.remove} {proxy.label}"
+					onclick={() => onremove?.(proxy)}
+				>
 					<span class={icons.remove} aria-hidden="true"></span>
 				</button>
 			{/if}

package/src/components/UploadProgress.svelte

@@ -51,7 +51,7 @@
 		progress: userFields.progress ?? 'progress',
 		size: userFields.size ?? 'size',
 		type: userFields.type ?? 'type',
-		error: userFields.error ?? 'error',
+		error: userFields.error ?? 'error'
 	})
 
 	// ─── Status summary ──────────────────────────────────────────────────────
@@ -101,11 +101,7 @@
 	/>
 {/snippet}
 
-<div
-	data-upload-progress
-	data-upload-view={view}
-	class={className || undefined}
->
+<div data-upload-progress data-upload-view={view} class={className || undefined}>
 	<!-- Header -->
 	<div data-upload-header>
 		<span>{files.length} files — {statusSummary}</span>

package/src/components/UploadTarget.svelte

@@ -32,7 +32,7 @@
 
 	const resolvedLabels = $derived({
 		...messages.current.uploadTarget,
-		...labels,
+		...labels
 	})
 
 	let inputRef = $state<HTMLInputElement | null>(null)

package/src/utils/palette.ts

@@ -20,7 +20,18 @@ export interface HSL {
 	l: number
 }
 
-export type ShadeKey = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950'
+export type ShadeKey =
+	| '50'
+	| '100'
+	| '200'
+	| '300'
+	| '400'
+	| '500'
+	| '600'
+	| '700'
+	| '800'
+	| '900'
+	| '950'
 
 export type Shades = Record<ShadeKey, string>
 
@@ -64,7 +75,7 @@ export function hexToRgb(hex: string): RGB {
 export function rgbToHex(rgb: RGB): string {
 	const toHex = (n: number) => {
 		const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16)
-		return hex.length === 1 ? `0${  hex}` : hex
+		return hex.length === 1 ? `0${hex}` : hex
 	}
 	return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`
 }
@@ -173,7 +184,7 @@ export function generateShades(hex: string): Shades {
 		'500': [1.0, hsl.l], // Keep original lightness
 		'600': [1.02, Math.max(hsl.l * 0.82, 25)],
 		'700': [1.04, Math.max(hsl.l * 0.65, 20)],
-		'800': [1.06, Math.max(hsl.l * 0.50, 15)],
+		'800': [1.06, Math.max(hsl.l * 0.5, 15)],
 		'900': [1.08, Math.max(hsl.l * 0.35, 12)],
 		'950': [1.12, Math.max(hsl.l * 0.22, 8)]
 	}
@@ -539,10 +550,31 @@ export function applyPalette(
  * Remove custom palette CSS variables (reset to theme defaults)
  */
 export function resetPalette(
-	roles: ColorRole[] = ['primary', 'secondary', 'accent', 'surface', 'success', 'warning', 'danger', 'info'],
+	roles: ColorRole[] = [
+		'primary',
+		'secondary',
+		'accent',
+		'surface',
+		'success',
+		'warning',
+		'danger',
+		'info'
+	],
 	element: HTMLElement = document.documentElement
 ): void {
-	const shadeKeys: ShadeKey[] = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950']
+	const shadeKeys: ShadeKey[] = [
+		'50',
+		'100',
+		'200',
+		'300',
+		'400',
+		'500',
+		'600',
+		'700',
+		'800',
+		'900',
+		'950'
+	]
 
 	for (const role of roles) {
 		element.style.removeProperty(`--color-${role}`)

package/src/utils/upload.js

@@ -14,7 +14,10 @@ const ARCHIVE_TYPES = new Set(['application/zip', 'application/gzip', 'applicati
 export function matchesAccept(file, accept) {
 	if (!accept) return true
 
-	const tokens = accept.split(',').map((t) => t.trim()).filter(Boolean)
+	const tokens = accept
+		.split(',')
+		.map((t) => t.trim())
+		.filter(Boolean)
 	if (tokens.length === 0) return true
 
 	return tokens.some((token) => {