@makolabs/ripple 3.7.0 → 3.8.0

package/dist/ai/AIChatInterface.svelte

@@ -133,7 +133,7 @@
 			messages.length === 0
 				? 'mx-auto max-w-4xl items-center justify-center px-6'
 				: 'overflow-hidden',
-			messages.length > 0 && background,
+			messages.length > 0 && background(),
 			className
 		)
 	);

package/dist/elements/accordion/Accordion.svelte

@@ -26,6 +26,7 @@
 		header,
 		children,
 		icon: Icon,
+		iconPosition = 'start',
 		testId
 	}: AccordionProps = $props();
 
@@ -109,7 +110,7 @@
 
 {#snippet accordionHeaderContent()}
 	<div class="flex items-start justify-start gap-3">
-		{#if Icon}
+		{#if Icon && iconPosition === 'start'}
 			<Icon class="text-default-500 size-5" />
 		{/if}
 		<div class="flex flex-col items-start text-left">
@@ -120,6 +121,9 @@
 				<p class="text-default-500 text-xs font-normal">{description}</p>
 			{/if}
 		</div>
+		{#if Icon && iconPosition === 'end'}
+			<Icon class="text-default-500 size-5" />
+		{/if}
 	</div>
 	{@render summary?.()}
 {/snippet}

package/dist/elements/dropdown/Select.svelte

@@ -26,6 +26,7 @@
 		multiple = false,
 		placeholder = 'Select an option',
 		searchable = false,
+		clearable = false,
 		disabled = false,
 		size = Size.MD,
 		class: className = '',
@@ -95,6 +96,7 @@
 			items.find((i) => i.value === value)
 	);
 	const selectedItems = $derived(items.filter((i) => valueArray.includes(i.value)));
+	const hasSelection = $derived(valueArray.some((v) => v !== ''));
 
 	const filteredItems = $derived.by<SelectItem[]>(() => {
 		if (isAsync) return asyncResults;
@@ -215,6 +217,15 @@
 		}
 	}
 
+	function handleClear(event: MouseEvent) {
+		// Don't let the click bubble to the trigger and open the dropdown.
+		event.stopPropagation();
+		event.preventDefault();
+		if (disabled) return;
+		value = multiple ? [] : '';
+		onselect({ value });
+	}
+
 	function handleClickOutside(event: MouseEvent) {
 		if (!open) return;
 		// On mobile the sheet handles its own close via backdrop.
@@ -385,6 +396,24 @@
 	</span>
 
 	<span class="ml-auto flex flex-shrink-0 items-center pl-2">
+		{#if clearable && hasSelection && !disabled}
+			<button
+				type="button"
+				onclick={handleClear}
+				aria-label="Clear selection"
+				class="text-default-400 hover:text-default-700 relative z-10 mr-1 flex size-5 cursor-pointer items-center justify-center rounded"
+				data-testid={buildTestId('select', 'clear', testId)}
+			>
+				<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+					<path
+						d="M3 3l6 6M9 3l-6 6"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</button>
+		{/if}
 		{#if Icon}
 			<Icon class={triggerIconClass} />
 		{:else}

package/dist/elements/file-upload/FileUpload.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import { fileUpload } from './file-upload.js';
 	import Button from '../../button/Button.svelte';
 	import Spinner from '../spinner/Spinner.svelte';
@@ -25,7 +26,8 @@
 		clearButtonLabel = 'Clear All',
 		filesListLabel = 'Selected files',
 		listMaxHeight = 'max-h-64',
-		header
+		header,
+		testId
 	}: FileUploadProps = $props();
 
 	const slots = $derived(fileUpload({ size }));
@@ -169,7 +171,10 @@
 	}
 </script>
 
-<div class={cn('flex w-full flex-col gap-4', className)}>
+<div
+	class={cn('flex w-full flex-col gap-4', className)}
+	data-testid={testId ? buildTestId('fileupload', undefined, testId) : undefined}
+>
 	{#if header}
 		{@render header()}
 	{/if}
@@ -191,6 +196,7 @@
 		ondrop={handleDrop}
 		for={id}
 		data-dropzone-full={dropzoneFull ? 'true' : undefined}
+		data-testid={testId ? buildTestId('fileupload', 'dropzone', testId) : undefined}
 	>
 		<input
 			type="file"
@@ -200,6 +206,7 @@
 			disabled={!dropzoneEnabled}
 			class="hidden"
 			onchange={handleInputChange}
+			data-testid={testId ? buildTestId('fileupload', 'input', testId) : undefined}
 			{id}
 		/>
 
@@ -327,12 +334,13 @@
 					listMaxHeight
 				)}
 			>
-				{#each files as stagedFile (stagedFile.id)}
+				{#each files as stagedFile, rowIndex (stagedFile.id)}
 					{@const status = stagedFile.status ?? 'ready'}
 					<li
 						class={cn('flex items-center gap-3 px-3 py-2', status === 'success' && 'opacity-60')}
 						data-fileupload-row=""
 						data-status={status}
+						data-testid={testId ? buildTestId('fileupload', 'row', testId, rowIndex) : undefined}
 						transition:fade={{ duration: 300, easing: quintOut }}
 						animate:flip={{ duration: 350, easing: quintOut }}
 					>

package/dist/elements/file-upload/FilesPreview.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import type { FilePreviewProps } from '../../index.js';
 
-	let { files = [], ondelete, class: className = '' }: FilePreviewProps = $props();
+	let { files = [], ondelete, class: className = '', testId }: FilePreviewProps = $props();
 
 	function formatFileSize(bytes: number): string {
 		if (bytes === 0) return '0 B';
@@ -14,9 +15,13 @@
 </script>
 
 {#if files.length > 0}
-	<ul class={cn('mt-6 space-y-3', className)}>
+	<ul
+		class={cn('mt-6 space-y-3', className)}
+		data-testid={buildTestId('filespreview', undefined, testId)}
+	>
 		{#each files as file, i (i)}
 			<li
+				data-testid={buildTestId('filespreview', 'item', testId, i)}
 				class={cn('flex items-center justify-between rounded-xl p-4 ring-4', {
 					'bg-danger-50 ring-danger-100': file.status === 'error',
 					'bg-success-50 ring-success-100': file.status === 'success',
@@ -71,6 +76,7 @@
 
 				<button
 					type="button"
+					data-testid={buildTestId('filespreview', 'delete', testId, i)}
 					aria-label="Delete file"
 					class={cn('ml-4 flex size-6 cursor-pointer items-center justify-center rounded-lg', {
 						'bg-danger-100 text-danger-500': file.status === 'error',

package/dist/file-browser/FileBrowser.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import { Button, Table, Color, Size, Spinner, Skeleton } from '../index.js';
 	import type { TableColumn, FileBrowserProps } from '../index.js';
 	import { formatDate } from '../utils/dateUtils.js';
@@ -22,10 +23,15 @@
 		isSelectable,
 		height = 'h-[500px]',
 		class: className = '',
+		testId,
 		selectedItems = $bindable<FileItem[]>([]),
 		selectedFiles = $bindable<string[]>([])
 	}: FileBrowserProps = $props();
 
+	// Namespaced testId forwarded to the inner Table so its data-testids are
+	// prefixed under the FileBrowser's own id (e.g. `{testId}-filebrowser-table-row-0`).
+	const tableTestId = $derived(testId ? buildTestId('filebrowser', undefined, testId) : undefined);
+
 	let files = $state<FileItem[]>([]);
 	let displayFiles = $state<FileItem[]>([]);
 	let currentPath = $state(startPath || '');
@@ -767,6 +773,7 @@
 		height,
 		className
 	)}
+	data-testid={testId ? buildTestId('filebrowser', undefined, testId) : undefined}
 >
 	<div class="flex min-w-0 flex-1 flex-col">
 		{#if !isAuthenticated && adapter.authenticate}
@@ -960,6 +967,7 @@
 						{selectAllScope}
 						{onselect}
 						{selected}
+						testId={tableTestId}
 					/>
 				{/if}
 			</div>

package/dist/filters/CompactFilters.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import type {
 		FilterTab,
 		FilterGroup,
@@ -24,7 +25,8 @@
 		class: className,
 		summaryClass,
 		expandedClass,
-		FilterIcon
+		FilterIcon,
+		testId
 	}: CompactFiltersProps = $props();
 
 	// Search input only renders when the consumer bound to searchQuery.
@@ -187,7 +189,10 @@
 	</svg>
 {/snippet}
 
-<div class={cn(card && 'border-default-200 rounded-lg border bg-white p-3 shadow-sm', className)}>
+<div
+	class={cn(card && 'border-default-200 rounded-lg border bg-white p-3 shadow-sm', className)}
+	data-testid={testId ? buildTestId('compact-filters', undefined, testId) : undefined}
+>
 	{#if card || expandable}
 		<!-- Header row: title | search | clear | chevron -->
 		<div class="mb-2 flex flex-wrap items-center gap-2">
@@ -214,6 +219,7 @@
 						placeholder={searchPlaceholder}
 						bind:value={searchQuery}
 						data-filters-search=""
+						data-testid={testId ? buildTestId('compact-filters', 'search', testId) : undefined}
 					/>
 					{#if searchQuery}
 						<button
@@ -222,6 +228,9 @@
 							class="text-default-400 hover:text-default-700 absolute top-1/2 right-1 flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded"
 							aria-label="Clear search"
 							data-filters-search-clear=""
+							data-testid={testId
+								? buildTestId('compact-filters', 'search-clear', testId)
+								: undefined}
 						>
 							<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
 								<path
@@ -242,6 +251,7 @@
 					onclick={clearAll}
 					class="text-default-600 hover:bg-default-100 cursor-pointer rounded-md px-2 py-1 text-xs font-medium"
 					data-filters-clear-all=""
+					data-testid={testId ? buildTestId('compact-filters', 'clear-all', testId) : undefined}
 				>
 					{clearAllLabel}
 				</button>
@@ -269,10 +279,11 @@
 	{#if !isExpanded}
 		<div class={cn('flex flex-wrap gap-2', summaryClass)}>
 			{#if chipSummary}
-				{#each chips as chip (chip.key + '::' + chip.value)}
+				{#each chips as chip, index (chip.key + '::' + chip.value)}
 					<span
 						class="bg-primary-50 text-primary-700 border-primary-200 flex items-center gap-1 rounded-full border px-2 py-1 text-xs"
 						data-filters-chip=""
+						data-testid={testId ? buildTestId('compact-filters', 'chip', testId, index) : undefined}
 					>
 						<span class="font-medium">{chip.groupLabel}:</span>
 						<span>{chip.label}</span>

package/dist/header/PageHeader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import type { PageHeaderProps } from '../index.js';
 	import Breadcrumbs from './Breadcrumbs.svelte';
 
@@ -10,7 +11,8 @@
 		children,
 		class: className = '',
 		titleClass = '',
-		layout = 'vertical'
+		layout = 'vertical',
+		testId
 	}: PageHeaderProps = $props();
 
 	const defaultTitleClasses =
@@ -19,9 +21,13 @@
 	const hasBreadcrumbs = $derived(breadcrumbs && breadcrumbs.length > 0);
 	const titleClasses = $derived(cn(defaultTitleClasses, titleClass));
 	const containerClass = $derived(cn('space-y-4', className as string));
+
+	// Root data-testid for the whole header; the Breadcrumbs child receives a
+	// prefixed testId so its selectors nest under this header's namespace.
+	const rootTestId = $derived(testId ? buildTestId('pageheader', undefined, testId) : undefined);
 </script>
 
-<div class="pb-4">
+<div class="pb-4" data-testid={rootTestId}>
 	{#if layout === 'horizontal'}
 		<div
 			class="flex flex-col space-y-3 md:flex-row md:items-start md:justify-between md:space-y-0 {className}"
@@ -29,7 +35,7 @@
 			<!-- Title and subtitle grouped together as one unit -->
 			<div class="min-w-0 flex-1 gap-4">
 				{#if hasBreadcrumbs}
-					<Breadcrumbs items={breadcrumbs} />
+					<Breadcrumbs items={breadcrumbs} testId={rootTestId} />
 				{/if}
 				<h2 class={titleClasses}>{title}</h2>
 				{#if subtitle}
@@ -52,7 +58,7 @@
 			<!-- Title and subtitle grouped together -->
 			<div class="min-w-0 gap-4">
 				{#if hasBreadcrumbs}
-					<Breadcrumbs items={breadcrumbs} />
+					<Breadcrumbs items={breadcrumbs} testId={rootTestId} />
 				{/if}
 				<h2 class={titleClasses}>{title}</h2>
 				{#if subtitle}

package/dist/layout/sidebar/NavGroup.svelte

@@ -2,12 +2,14 @@
 	import { getContext } from 'svelte';
 	import type { MenuBar, NavGroupProps } from '../../index.js';
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 
 	let {
 		labelArea,
 		children,
 		class: className = '',
-		active: isActive = false
+		active: isActive = false,
+		testId
 	}: NavGroupProps = $props();
 
 	function toggle() {
@@ -58,7 +60,7 @@
 	);
 </script>
 
-<div>
+<div data-testid={buildTestId('navgroup', undefined, testId)}>
 	<button type="button" class={navGroupClasses} onclick={toggle}>
 		{@render labelArea(labelClasses, iconClasses)}
 		{@render ChevronIcon(chevronIconClasses, 0.7)}

package/dist/layout/sidebar/NavItem.svelte

@@ -3,9 +3,10 @@
 	import { getContext } from 'svelte';
 	import type { MenuBar, NavItemProps } from '../../index.js';
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import { resolve } from '$app/paths';
 
-	let { href, children, active, class: className = '' }: NavItemProps = $props();
+	let { href, children, active, class: className = '', testId }: NavItemProps = $props();
 
 	const menubar: MenuBar = getContext('menubar');
 
@@ -25,6 +26,10 @@
 	);
 </script>
 
-<a href={resolve(href as `/`)} class={navItemClasses}>
+<a
+	href={resolve(href as `/`)}
+	class={navItemClasses}
+	data-testid={buildTestId('navitem', undefined, testId)}
+>
 	{@render children?.(navChildrenClasses)}
 </a>

package/dist/layout/tabs/Tab.svelte

@@ -16,8 +16,9 @@
 		onclick = () => {},
 		variant = 'line',
 		index = 0,
+		class: className = '',
 		testId
-	}: TabProps & { index?: number } = $props();
+	}: TabProps & { index?: number; class?: string } = $props();
 
 	function handleClick(event: Event & { currentTarget: EventTarget & HTMLButtonElement }) {
 		event.preventDefault();
@@ -35,7 +36,7 @@
 		})
 	);
 
-	const triggerClass = $derived(cn(trigger()));
+	const triggerClass = $derived(cn(trigger(), className));
 </script>
 
 <button

package/dist/layout/tabs/Tab.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { TabProps } from '../../index.js';
 type $$ComponentProps = TabProps & {
     index?: number;
+    class?: string;
 };
 declare const Tab: import("svelte").Component<$$ComponentProps, {}, "">;
 type Tab = ReturnType<typeof Tab>;

package/dist/layout/tabs/TabGroup.svelte

@@ -17,6 +17,7 @@
 		variant = 'line',
 		class: className = '',
 		listClass = '',
+		triggerClass = '',
 		panelClass = '',
 		onchange = () => {},
 		children,
@@ -33,6 +34,7 @@
 
 	const baseClass = $derived(cn(base(), className));
 	const listClass_ = $derived(cn(list(), listClass));
+	const triggerClass_ = $derived(cn(triggerClass));
 	const panelClass_ = $derived(cn(panel(), panelClass));
 
 	function handleTabClick(value: string) {
@@ -56,6 +58,7 @@
 				{size}
 				{variant}
 				{index}
+				class={triggerClass_}
 				testId={buildTestId('tabgroup', 'tab', testId, index)}
 				onclick={() => handleTabClick(tab.value)}
 			/>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -139,7 +139,8 @@
 		"uuid": ">=11.1.1",
 		"devalue": ">=5.8.1",
 		"fast-xml-builder": ">=1.1.7",
-		"esbuild": ">=0.28.1"
+		"esbuild": ">=0.28.1",
+		"cookie": ">=0.7.0 <1.0.0"
 	},
 	"dependencies": {
 		"@aws-sdk/client-s3": "^3.1029.0",