@makolabs/ripple 3.0.3 → 3.0.4

package/dist/ai/ai-types.d.ts

@@ -107,6 +107,13 @@ export interface FileBrowserProps {
     selectAllScope?: 'page' | 'all';
     /** Tailwind height class for the browser container. @default 'h-[500px]' */
     height?: string;
+    /**
+     * Allow clicking into subdirectories. When `false`, folder rows are
+     * still shown but clicking them does nothing — useful for flat file
+     * lists or when the adapter doesn't support folder traversal.
+     * @default true
+     */
+    allowFolderNavigation?: boolean;
     /** Additional CSS classes for the outer container. */
     class?: ClassValue;
     /**

package/dist/charts/Chart.svelte

@@ -42,6 +42,8 @@
 		GraphicComponent
 	]);
 
+	import { buildTestId } from '../helper/testid.js';
+
 	let {
 		data = [],
 		config,
@@ -50,7 +52,8 @@
 		class: className = '',
 		colors = {},
 		onpointclick,
-		onchartrender
+		onchartrender,
+		testId
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	}: ChartProps<any> = $props();
 
@@ -753,4 +756,10 @@
 	class={cn('advanced-chart', className)}
 	style="height: {height}; width: {width}"
 	bind:this={chartContainer}
+	data-testid={buildTestId('chart', undefined, testId)}
 ></div>
+{#if testId}
+	<div data-testid={buildTestId('chart', 'data', testId)} style="display:none" aria-hidden="true">
+		{JSON.stringify({ data, series: config.series, xAxis: config.xAxis, yAxis: config.yAxis })}
+	</div>
+{/if}

package/dist/charts/chart-types.d.ts

@@ -222,5 +222,12 @@ export interface ChartProps<T> {
      * access (custom plugins, imperative animation triggers, etc.).
      */
     onchartrender?: (event: ChartRenderType<T>) => void;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-chart` — root wrapper (around the canvas)
+     * - `{testId}-chart-data` — hidden element containing the chart's
+     *   source data as JSON, so test automation can read values without
+     *   parsing the canvas. The JSON shape is `{ data, series, xAxis, yAxis }`.
+     */
     testId?: string;
 }

package/dist/elements/progress/Progress.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import { Color, Size } from '../../variants.js';
 	import { Tween } from 'svelte/motion';
 	import { quintOut } from 'svelte/easing';
@@ -17,7 +18,8 @@
 		showLabels = false,
 		class: className = '',
 		labelClass = '',
-		barClass = ''
+		barClass = '',
+		testId
 	}: ProgressProps = $props();
 
 	// Function composition for better readability and maintainability
@@ -120,13 +122,14 @@
 	);
 </script>
 
-<div class={containerClass}>
+<div class={containerClass} data-testid={buildTestId('progress', undefined, testId)}>
 	<div
 		class={progressClass}
 		role="progressbar"
 		aria-valuenow={percentage}
 		aria-valuemin="0"
 		aria-valuemax="100"
+		data-testid={buildTestId('progress', 'track', testId)}
 	>
 		{#if segments}
 			{#each segmentPercentages as segment, index (segment.label ?? `segment-${index}`)}
@@ -135,11 +138,16 @@
 						class={cn(getColorClass(segment.color), barClass)}
 						style="width: {segmentTweens[index]?.current ?? 0}%"
 						title={segment.label || `${segment.value} (${segment.percentage}%)`}
+						data-testid={buildTestId('progress', 'segment', testId, index)}
 					></div>
 				{/if}
 			{/each}
 		{:else}
-			<div class={fillClass} style="width: {tween.current}%"></div>
+			<div
+				class={fillClass}
+				style="width: {tween.current}%"
+				data-testid={buildTestId('progress', 'fill', testId)}
+			></div>
 		{/if}
 	</div>
 
@@ -147,7 +155,10 @@
 		<div class="mt-1 flex justify-between">
 			{#each segmentPercentages as segment, index (segment.label ?? `segment-${index}`)}
 				{#if segment.percentage > 0}
-					<div class={labelTextClass}>
+					<div
+						class={labelTextClass}
+						data-testid={buildTestId('progress', 'segment-label', testId, index)}
+					>
 						{#if showLabels && segment.label}
 							{segment.label}
 						{/if}
@@ -162,6 +173,8 @@
 			{/each}
 		</div>
 	{:else if showLabel}
-		<span class={labelTextClass}>{percentage}%</span>
+		<span class={labelTextClass} data-testid={buildTestId('progress', 'value', testId)}
+			>{percentage}%</span
+		>
 	{/if}
 </div>

package/dist/elements/progress/progress-types.d.ts

@@ -65,5 +65,13 @@ export type ProgressProps = {
     labelClass?: ClassValue;
     /** Classes on the inner bar element(s). */
     barClass?: ClassValue;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-progress` — root wrapper
+     * - `{testId}-progress-track` — track bar
+     * - `{testId}-progress-fill` — fill bar (single mode)
+     * - `{testId}-progress-segment-{i}` — each segment
+     * - `{testId}-progress-value` — percentage display
+     */
     testId?: string;
 };

package/dist/file-browser/FileBrowser.svelte

@@ -18,6 +18,7 @@
 		actions = [],
 		infoSection,
 		selectAllScope = 'page',
+		allowFolderNavigation = true,
 		height = 'h-[500px]',
 		class: className = '',
 		selectedItems = $bindable<FileItem[]>([]),
@@ -197,6 +198,7 @@
 	}
 
 	function navigateToFolder(folderPath: string) {
+		if (!allowFolderNavigation) return;
 		// If we have the file info for this folder, cache its name in the adapter
 		// before navigating (useful for Google Drive adapter)
 		const folderFile = files.find((file) => file.key === folderPath);
@@ -290,9 +292,10 @@
 
 	// Sort files based on current sort state
 	function getSortedFiles(filesArray: FileItem[]): FileItem[] {
-		// Separate folders and files
-		const folders = filesArray.filter((file) => file.isFolder);
-		const files = filesArray.filter((file) => !file.isFolder);
+		// When folder navigation is off, hide folders entirely.
+		const filtered = allowFolderNavigation ? filesArray : filesArray.filter((f) => !f.isFolder);
+		const folders = filtered.filter((file) => file.isFolder);
+		const files = filtered.filter((file) => !file.isFolder);
 
 		// Handle default sort (folders alphabetically, files by date newest first)
 		if (sortState.column === 'default' && sortState.direction === 'default') {

package/dist/filters/CompactFilters.svelte

@@ -19,6 +19,8 @@
 		chipSummary = false,
 		isExpanded = $bindable(false),
 		title = 'Filters',
+		card = true,
+		expandable = true,
 		class: className,
 		summaryClass,
 		expandedClass,
@@ -28,7 +30,11 @@
 	// Search input only renders when the consumer bound to searchQuery.
 	const searchEnabled = $derived(searchQuery !== undefined);
 
+	// When not expandable, filters are always visible.
+	if (!expandable) isExpanded = true;
+
 	function toggleExpanded() {
+		if (!expandable) return;
 		isExpanded = !isExpanded;
 	}
 
@@ -181,80 +187,84 @@
 	</svg>
 {/snippet}
 
-<div class={cn('border-default-200 rounded-lg border bg-white p-3 shadow-sm', className)}>
-	<!-- Header row: title | search | clear | chevron.
-	     `flex-wrap` lets the search + controls drop to a second row on
-	     narrow viewports instead of overflowing off-screen. -->
-	<div class="mb-2 flex flex-wrap items-center gap-2">
-		<button
-			type="button"
-			onclick={toggleExpanded}
-			class="flex flex-1 cursor-pointer items-center gap-2"
-		>
-			{#if FilterIcon}
-				<FilterIcon size={16} class="text-default-500" />
-			{:else}
-				<span class="text-default-500">{@render DefaultFilterIcon()}</span>
-			{/if}
-			<span class="text-sm font-medium">{title}</span>
-		</button>
-
-		{#if searchEnabled}
-			<!-- `w-full sm:w-48` lets the search field fill the row on
-			     narrow viewports (after wrapping) but stay compact on wide. -->
-			<div class="relative order-last w-full sm:order-none sm:w-auto">
-				<input
-					type="text"
-					class="border-default-200 focus:border-primary-400 h-7 w-full rounded-md border px-2 pr-6 text-xs focus:outline-none sm:w-48"
-					placeholder={searchPlaceholder}
-					bind:value={searchQuery}
-					data-filters-search=""
-				/>
-				{#if searchQuery}
-					<button
-						type="button"
-						onclick={() => (searchQuery = '')}
-						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=""
-					>
-						<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}
-			</div>
-		{/if}
-
-		{#if showClearAll && isDirty}
+<div class={cn(card && 'border-default-200 rounded-lg border bg-white p-3 shadow-sm', className)}>
+	{#if card || expandable}
+		<!-- Header row: title | search | clear | chevron -->
+		<div class="mb-2 flex flex-wrap items-center gap-2">
 			<button
 				type="button"
-				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=""
+				onclick={toggleExpanded}
+				class="flex flex-1 cursor-pointer items-center gap-2"
 			>
-				{clearAllLabel}
+				{#if FilterIcon}
+					<FilterIcon size={16} class="text-default-500" />
+				{:else}
+					<span class="text-default-500">{@render DefaultFilterIcon()}</span>
+				{/if}
+				<span class="text-sm font-medium">{title}</span>
 			</button>
-		{/if}
 
-		<button
-			type="button"
-			onclick={toggleExpanded}
-			class="text-default-500 hover:bg-default-100 hover:text-default-700 cursor-pointer rounded-md p-1"
-			aria-label={isExpanded ? `Collapse ${title.toLowerCase()}` : `Expand ${title.toLowerCase()}`}
-		>
-			{#if isExpanded}
-				{@render DefaultChevronUp()}
-			{:else}
-				{@render DefaultChevronDown()}
+			{#if searchEnabled}
+				<!-- `w-full sm:w-48` lets the search field fill the row on
+			     narrow viewports (after wrapping) but stay compact on wide. -->
+				<div class="relative order-last w-full sm:order-none sm:w-auto">
+					<input
+						type="text"
+						class="border-default-200 focus:border-primary-400 h-7 w-full rounded-md border px-2 pr-6 text-xs focus:outline-none sm:w-48"
+						placeholder={searchPlaceholder}
+						bind:value={searchQuery}
+						data-filters-search=""
+					/>
+					{#if searchQuery}
+						<button
+							type="button"
+							onclick={() => (searchQuery = '')}
+							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=""
+						>
+							<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}
+				</div>
+			{/if}
+
+			{#if showClearAll && isDirty}
+				<button
+					type="button"
+					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=""
+				>
+					{clearAllLabel}
+				</button>
 			{/if}
-		</button>
-	</div>
+
+			{#if expandable}
+				<button
+					type="button"
+					onclick={toggleExpanded}
+					class="text-default-500 hover:bg-default-100 hover:text-default-700 cursor-pointer rounded-md p-1"
+					aria-label={isExpanded
+						? `Collapse ${title.toLowerCase()}`
+						: `Expand ${title.toLowerCase()}`}
+				>
+					{#if isExpanded}
+						{@render DefaultChevronUp()}
+					{:else}
+						{@render DefaultChevronDown()}
+					{/if}
+				</button>
+			{/if}
+		</div>
+	{/if}
 
 	{#if !isExpanded}
 		<div class={cn('flex flex-wrap gap-2', summaryClass)}>

package/dist/filters/filter-types.d.ts

@@ -82,6 +82,17 @@ export type CompactFiltersProps = {
     chipSummary?: boolean;
     isExpanded?: boolean;
     title?: string;
+    /**
+     * Render with a bordered card wrapper (border, shadow, padding,
+     * white background). Set to `false` to embed inside your own card
+     * or layout without double-bordering. @default true
+     */
+    card?: boolean;
+    /**
+     * Show the expand/collapse chevron toggle. When `false`, filters
+     * are always expanded (no collapsed chip summary). @default true
+     */
+    expandable?: boolean;
     class?: ClassValue;
     summaryClass?: ClassValue;
     expandedClass?: ClassValue;

package/dist/forms/DateRange.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import { Size } from '../variants.js';
 	import { formSizeTokens } from './form-size.js';
 	import type { DateRangeProps } from '../index.js';
@@ -23,7 +24,8 @@
 		size = Size.MD,
 		id,
 		name,
-		onselect
+		onselect,
+		testId
 	}: DateRangeProps = $props();
 
 	const tokens = $derived(formSizeTokens[size]);
@@ -249,7 +251,11 @@
 <input type="hidden" name={`${name}[format]`} value={format} />
 <input type="hidden" name={`${name}`} value={getValue()} />
 
-<div class={cn('relative block w-full', className)} bind:this={datePickerRef}>
+<div
+	class={cn('relative block w-full', className)}
+	bind:this={datePickerRef}
+	data-testid={buildTestId('date-range', undefined, testId)}
+>
 	<div class="relative">
 		<button
 			{id}
@@ -268,6 +274,7 @@
 						: 'focus-visible:border-primary-500 focus-visible:ring-primary-500 hover:border-default-400 focus-visible:ring-2'
 			)}
 			onclick={toggleDatepicker}
+			data-testid={buildTestId('date-range', 'trigger', testId)}
 			aria-haspopup="true"
 			aria-expanded={isOpen}
 			aria-describedby={errors?.length ? `${id}-errors` : undefined}
@@ -299,6 +306,7 @@
 					'right-8'
 				)}
 				onclick={clearDates}
+				data-testid={buildTestId('date-range', 'clear', testId)}
 				aria-label="Clear dates"
 			>
 				<svg class={cn(tokens.iconSize)} viewBox="0 0 20 20" fill="currentColor">
@@ -313,7 +321,7 @@
 	</div>
 
 	{#if errors?.length}
-		<div id="{id}-errors">
+		<div id="{id}-errors" data-testid={buildTestId('date-range', 'errors', testId)}>
 			{#each errors as error, i (i)}
 				<p class="text-danger-600 mt-1 text-sm">{error}</p>
 			{/each}
@@ -325,6 +333,7 @@
 			<div
 				bind:this={calendarRef}
 				class="ring-opacity-5 ring-default-300 absolute z-10 mt-1 w-full origin-top-left rounded-md bg-white p-4 shadow-lg ring-1 focus:outline-none"
+				data-testid={buildTestId('date-range', 'panel', testId)}
 				transition:fly={{ y: -8, duration: 300, easing: quintOut }}
 			>
 				{@render calendarContent()}

package/dist/forms/NumberInput.svelte

@@ -154,6 +154,7 @@
 			<button
 				type="button"
 				class="hover:bg-default-100 flex items-center gap-1 rounded px-1"
+				data-testid={buildTestId('numberinput', 'unit', testId)}
 				onclick={handleUnitToggle}
 				{disabled}
 			>
@@ -173,7 +174,10 @@
 		{:else if unit}
 			<!-- Static unit label — no chevron, not clickable. Matches the
 			     field's text size so it sits inline. -->
-			<span class={cn('text-default-500 flex items-center gap-1 pr-2', tokens.text)}>
+			<span
+				class={cn('text-default-500 flex items-center gap-1 pr-2', tokens.text)}
+				data-testid={buildTestId('numberinput', 'unit', testId)}
+			>
 				{#if selectedOption?.icon}
 					{@const Icon = selectedOption.icon}
 					<Icon />
@@ -183,7 +187,7 @@
 		{/if}
 
 		{#if showUnitDropdown && hasMultipleUnits}
-			<div class={dropdownClass}>
+			<div class={dropdownClass} data-testid={buildTestId('numberinput', 'unit-dropdown', testId)}>
 				{#each units as unitOption (unitOption.value)}
 					<button
 						type="button"

package/dist/forms/Tags.svelte

@@ -2,6 +2,7 @@
 	import Badge from '../elements/badge/Badge.svelte';
 	import { Size } from '../variants.js';
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import { formSizeTokens } from './form-size.js';
 	import { fade } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
@@ -18,7 +19,8 @@
 		class: className = '',
 		suggestions = [],
 		onaddtag: onAddTag,
-		onremovetag: onRemoveTag
+		onremovetag: onRemoveTag,
+		testId
 	}: TagsProps = $props();
 
 	let inputValue = $state('');
@@ -154,16 +156,17 @@
 	);
 </script>
 
-<div class="space-y-1">
+<div class="space-y-1" data-testid={buildTestId('tags', undefined, testId)}>
 	{#if label}
 		<label for={name} class="text-default-700 block text-sm font-medium">{label}</label>
 	{/if}
 	<div class={containerClass} onfocusout={handleFocusOut}>
-		{#each value as tag (tag)}
+		{#each value as tag, index (tag)}
 			<div
 				class="inline-flex"
 				transition:fade={{ duration: 250, easing: quintOut }}
 				animate:flip={{ duration: 300, easing: quintOut }}
+				data-testid={buildTestId('tags', 'tag', testId, index)}
 			>
 				<Badge size={chipSize} color="info" onclose={() => handleTagRemoval(tag)} class="shadow-xs">
 					{tag}
@@ -184,10 +187,11 @@
 			autocomplete="off"
 			onkeydown={handleKeydown}
 			onfocus={handleFocusIn}
+			data-testid={buildTestId('tags', 'input', testId)}
 		/>
 
 		{#if showSuggestions && filteredSuggestions.length > 0}
-			<div class={suggestionClass}>
+			<div class={suggestionClass} data-testid={buildTestId('tags', 'suggestions', testId)}>
 				{#each filteredSuggestions as suggestion, i (suggestion)}
 					<button
 						type="button"
@@ -196,6 +200,7 @@
 						onmouseover={() => handleSuggestionHover(i)}
 						onfocus={() => handleSuggestionHover(i)}
 						tabindex="-1"
+						data-testid={buildTestId('tags', 'suggestion', testId, i)}
 					>
 						{suggestion}
 					</button>

package/dist/forms/Toggle.svelte

@@ -68,15 +68,17 @@
 		)[size]
 	);
 
+	// On-position = track_width − thumb_width − 2px margin.
+	// Off-position = 2px margin (translate-x-0.5).
 	const thumbPosition = $derived(
 		(
 			{
-				[Size.XS]: value ? 'translate-x-3.5' : 'translate-x-0.5',
-				[Size.SM]: value ? 'translate-x-4' : 'translate-x-0.5',
-				[Size.MD]: value ? 'translate-x-5' : 'translate-x-0.5',
-				[Size.LG]: value ? 'translate-x-6' : 'translate-x-0.5',
-				[Size.XL]: value ? 'translate-x-7' : 'translate-x-0.5',
-				[Size.XXL]: value ? 'translate-x-7' : 'translate-x-0.5'
+				[Size.XS]: value ? 'translate-x-4' : 'translate-x-0.5',
+				[Size.SM]: value ? 'translate-x-[18px]' : 'translate-x-0.5',
+				[Size.MD]: value ? 'translate-x-[22px]' : 'translate-x-0.5',
+				[Size.LG]: value ? 'translate-x-[26px]' : 'translate-x-0.5',
+				[Size.XL]: value ? 'translate-x-[30px]' : 'translate-x-0.5',
+				[Size.XXL]: value ? 'translate-x-[30px]' : 'translate-x-0.5'
 			} satisfies Record<VariantSizes, string>
 		)[size]
 	);

package/dist/forms/calendar/Calendar.svelte

@@ -246,6 +246,7 @@
 					density.navBtn
 				)}
 				aria-label="Previous month"
+				data-testid={buildTestId('calendar', 'prev-month', testId)}
 				{disabled}
 			>
 				<svg class={density.navIcon} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -256,7 +257,10 @@
 					/>
 				</svg>
 			</button>
-			<span class={cn('text-default-800 font-semibold', density.monthText)}>{monthLabel}</span>
+			<span
+				class={cn('text-default-800 font-semibold', density.monthText)}
+				data-testid={buildTestId('calendar', 'month-label', testId)}>{monthLabel}</span
+			>
 			<button
 				type="button"
 				onclick={nextMonth}
@@ -265,6 +269,7 @@
 					density.navBtn
 				)}
 				aria-label="Next month"
+				data-testid={buildTestId('calendar', 'next-month', testId)}
 				{disabled}
 			>
 				<svg class={density.navIcon} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -283,6 +288,7 @@
 			'text-default-400 mb-1 grid grid-cols-7 gap-0.5 text-center font-medium',
 			density.dayHeaderText
 		)}
+		data-testid={buildTestId('calendar', 'day-headers', testId)}
 	>
 		{#each dayHeaders() as d (d)}
 			<div>{d}</div>
@@ -297,6 +303,7 @@
 				disabled={cell.disabled}
 				aria-pressed={cell.isSelected}
 				aria-label={cell.date.toLocaleDateString()}
+				data-testid={buildTestId('calendar', 'day', testId, cell.date.getDate())}
 				class={cn(
 					'relative flex items-center justify-center rounded transition-colors',
 					density.cell,

package/dist/forms/calendar/calendar-types.d.ts

@@ -50,5 +50,14 @@ export type CalendarProps = {
         from: Date | null;
         to: Date | null;
     }) => void;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-calendar` — root wrapper
+     * - `{testId}-calendar-prev-month` — prev button
+     * - `{testId}-calendar-next-month` — next button
+     * - `{testId}-calendar-month-label` — month/year header
+     * - `{testId}-calendar-day-headers` — weekday row
+     * - `{testId}-calendar-day-{dayNumber}` — each day cell
+     */
     testId?: string;
 };

package/dist/forms/form-types.d.ts

@@ -280,6 +280,13 @@ export type NumberInputProps = {
      * BCP 47 locale used for thousands-separator formatting. @default 'en-US'
      */
     locale?: string;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-numberinput` — root input
+     * - `{testId}-numberinput-label` — label
+     * - `{testId}-numberinput-unit` — unit label/button
+     * - `{testId}-numberinput-unit-dropdown` — unit dropdown
+     */
     testId?: string;
 };
 /**
@@ -334,6 +341,14 @@ export interface DateRangeProps {
     }) => void;
     id?: string;
     name?: string;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-date-range` — root wrapper
+     * - `{testId}-date-range-trigger` — trigger button
+     * - `{testId}-date-range-clear` — clear button
+     * - `{testId}-date-range-errors` — error container
+     * - `{testId}-date-range-panel` — calendar panel
+     */
     testId?: string;
 }
 /**
@@ -379,6 +394,14 @@ export type TagsProps = {
     onaddtag?: (tag: string) => void;
     /** Fires when a tag is removed (via × or backspace). */
     onremovetag?: (tag: string) => void;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-tags` — root wrapper
+     * - `{testId}-tags-input` — text input
+     * - `{testId}-tags-tag-{i}` — each tag badge
+     * - `{testId}-tags-suggestions` — dropdown
+     * - `{testId}-tags-suggestion-{i}` — each suggestion
+     */
     testId?: string;
 };
 /** Selection mode for `<Slider>`. */

package/dist/forms/month-picker/MonthPicker.svelte

@@ -138,7 +138,7 @@
 	});
 </script>
 
-<div class={cn('w-full', className)}>
+<div class={cn('w-full', className)} data-testid={buildTestId('month-picker', 'root', testId)}>
 	{#if label}
 		<label for={id} class="text-default-700 mb-1 block text-sm font-medium">
 			{label}
@@ -246,6 +246,7 @@
 						yearSelected ? 'bg-primary-50 text-primary-700' : 'bg-default-50 text-default-800'
 					)}
 					data-year={year}
+					data-testid={buildTestId('month-picker', 'year', testId, year)}
 				>
 					{year}
 				</div>
@@ -258,6 +259,7 @@
 						<button
 							type="button"
 							data-month={m}
+							data-testid={buildTestId('month-picker', 'month', testId, `${year}-${m}`)}
 							data-selected={sel || undefined}
 							data-current={cur || undefined}
 							onclick={() => entry && pick(entry)}

package/dist/forms/month-picker/month-picker-types.d.ts

@@ -18,5 +18,12 @@ export type MonthPickerProps = {
     errors?: string[];
     class?: ClassValue;
     onselect?: (value: Date | null) => void;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-month-picker-root` — root wrapper
+     * - `{testId}-month-picker` — trigger button
+     * - `{testId}-month-picker-year-{year}` — year header
+     * - `{testId}-month-picker-month-{year}-{month}` — month cell
+     */
     testId?: string;
 };

package/dist/header/Breadcrumbs.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import { breadcrumbs } from './breadcrumbs.js';
 	import type { BreadcrumbsProps } from '../index.js';
 	import { resolve } from '$app/paths';
@@ -14,7 +15,8 @@
 		listClass = '',
 		itemClass = '',
 		separatorClass = '',
-		wrapperClass = ''
+		wrapperClass = '',
+		testId
 	}: BreadcrumbsProps = $props();
 
 	const { base, list, item, separator, wrapper } = $derived(
@@ -33,10 +35,14 @@
 	const wrapperClasses = $derived(cn(wrapper(), wrapperClass));
 </script>
 
-<nav class={baseClass} aria-label="Breadcrumb">
+<nav
+	class={baseClass}
+	aria-label="Breadcrumb"
+	data-testid={buildTestId('breadcrumbs', undefined, testId)}
+>
 	<ol role="list" class={listClasses}>
 		{#each items as breadcrumbItem, index (index)}
-			<li>
+			<li data-testid={buildTestId('breadcrumbs', 'item', testId, index)}>
 				<div class={wrapperClasses}>
 					{#if index > 0}
 						<span class={separatorClasses} aria-hidden="true">
@@ -58,7 +64,11 @@
 						</span>
 					{/if}
 					{#if breadcrumbItem.current}
-						<span class={activeItemClasses} aria-current="page">
+						<span
+							class={activeItemClasses}
+							aria-current="page"
+							data-testid={buildTestId('breadcrumbs', 'current', testId, index)}
+						>
 							{#if breadcrumbItem.icon}
 								{@const ItemIcon = breadcrumbItem.icon}
 								<ItemIcon class="size-4 flex-shrink-0" />
@@ -66,7 +76,11 @@
 							{breadcrumbItem.label}
 						</span>
 					{:else}
-						<a href={resolve(breadcrumbItem.href as `/`)} class={itemClasses}>
+						<a
+							href={resolve(breadcrumbItem.href as `/`)}
+							class={itemClasses}
+							data-testid={buildTestId('breadcrumbs', 'link', testId, index)}
+						>
 							{#if breadcrumbItem.icon}
 								{@const ItemIcon = breadcrumbItem.icon}
 								<ItemIcon class="size-4 flex-shrink-0" />

package/dist/header/header-types.d.ts

@@ -49,6 +49,13 @@ export type BreadcrumbsProps = {
     separatorClass?: ClassValue;
     /** Classes on the inner item wrapper (icon + label). */
     wrapperClass?: ClassValue;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-breadcrumbs` — root nav
+     * - `{testId}-breadcrumbs-item-{i}` — each item
+     * - `{testId}-breadcrumbs-link-{i}` — link element
+     * - `{testId}-breadcrumbs-current-{i}` — current page
+     */
     testId?: string;
 };
 /**

package/dist/layout/activity-list/ActivityList.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import {
 		activityList,
 		iconCircleClasses,
@@ -25,7 +26,8 @@
 		itemClass = '',
 		onitemclick,
 		children,
-		customContent
+		customContent,
+		testId
 	}: ActivityListProps = $props();
 
 	const {
@@ -54,7 +56,7 @@
 	const contentClasses = $derived(cn(content(), contentClass, timeline && 'relative divide-y-0'));
 </script>
 
-<div class={baseClass}>
+<div class={baseClass} data-testid={buildTestId('activity-list', undefined, testId)}>
 	{#if title}
 		<div class={headerClasses}>
 			<h2 class={titleClasses}>{title}</h2>
@@ -85,6 +87,7 @@
 				<div
 					class={cn(item(), highlightClass, itemClass)}
 					data-activity-row=""
+					data-testid={buildTestId('activity-list', 'item', testId, index)}
 					data-activity-highlighted={activityItem.highlighted ? '' : undefined}
 				>
 					{#if accentBarColor}
@@ -113,9 +116,13 @@
 									data-activity-comment=""
 								>
 									<div class="mb-1 flex justify-between gap-x-4">
-										<div class="flex flex-wrap items-center gap-2">
+										<div
+											class="flex flex-wrap items-center gap-2"
+											data-testid={buildTestId('activity-list', 'badges', testId, index)}
+										>
 											<button
 												class="text-default-900 cursor-pointer text-sm font-medium"
+												data-testid={buildTestId('activity-list', 'title', testId, index)}
 												onclick={() => onitemclick?.(activityItem, index)}
 											>
 												{activityItem.title}
@@ -140,7 +147,11 @@
 											{/if}
 										</div>
 										{#if activityItem.timestamp}
-											<div class={itemTimestamp()} data-activity-timestamp="">
+											<div
+												class={itemTimestamp()}
+												data-activity-timestamp=""
+												data-testid={buildTestId('activity-list', 'timestamp', testId, index)}
+											>
 												{activityItem.timestamp}
 											</div>
 										{/if}
@@ -166,8 +177,15 @@
 					{:else}
 						<div class={itemContent()}>
 							<div class={itemMain()}>
-								<div class={itemHeader()}>
-									<button class={itemTitle()} onclick={() => onitemclick?.(activityItem, index)}>
+								<div
+									class={itemHeader()}
+									data-testid={buildTestId('activity-list', 'badges', testId, index)}
+								>
+									<button
+										class={itemTitle()}
+										data-testid={buildTestId('activity-list', 'title', testId, index)}
+										onclick={() => onitemclick?.(activityItem, index)}
+									>
 										{activityItem.title}
 									</button>
 									{#if activityItem.badges}
@@ -197,7 +215,11 @@
 							</div>
 
 							{#if activityItem.timestamp}
-								<div class={itemTimestamp()} data-activity-timestamp="">
+								<div
+									class={itemTimestamp()}
+									data-activity-timestamp=""
+									data-testid={buildTestId('activity-list', 'timestamp', testId, index)}
+								>
 									{activityItem.timestamp}
 								</div>
 							{/if}

package/dist/layout/activity-list/activity-list-types.d.ts

@@ -145,5 +145,13 @@ export type ActivityListProps = {
      * `custom: true` continue to use the default rendering.
      */
     customContent?: Snippet<[ActivityItem, number]>;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-activity-list` — root wrapper
+     * - `{testId}-activity-list-item-{i}` — each item
+     * - `{testId}-activity-list-title-{i}` — item title
+     * - `{testId}-activity-list-timestamp-{i}` — timestamp
+     * - `{testId}-activity-list-badges-{i}` — badges container
+     */
     testId?: string;
 };

package/dist/layout/card/MetricCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import { metricCard } from './metric-card.js';
 	import type { MetricCardProps } from '../../index.js';
 	import Progress from '../../elements/progress/Progress.svelte';
@@ -16,7 +17,8 @@
 		onclick,
 		action,
 		actionHover,
-		loading = false
+		loading = false,
+		testId
 	}: MetricCardProps = $props();
 
 	const interactive = $derived(!!onclick);
@@ -54,6 +56,7 @@
 		<span
 			class={cn(actionSlot(), hasHoverSwap && 'group-hover:opacity-0')}
 			data-metric-card-action=""
+			data-testid={buildTestId('metric-card', 'action', testId)}
 			aria-hidden="true"
 		>
 			{#if action}
@@ -90,17 +93,24 @@
 		</div>
 	{:else}
 		{#if title}
-			<div class={titleSlot()}>{title}</div>
+			<div class={titleSlot()} data-testid={buildTestId('metric-card', 'label', testId)}>
+				{title}
+			</div>
 		{/if}
 
 		{#if value !== undefined}
-			<div class={valueSlot()}>{value}</div>
+			<div class={valueSlot()} data-testid={buildTestId('metric-card', 'value', testId)}>
+				{value}
+			</div>
 		{/if}
 
 		{#if details.length > 0}
 			<div class={detailSlot()}>
 				{#each details as detail, index (detail.label + index)}
-					<div class="flex justify-between text-xs">
+					<div
+						class="flex justify-between text-xs"
+						data-testid={buildTestId('metric-card', 'detail', testId, index)}
+					>
 						<span class="text-default-500">{detail.label}</span>
 						<span class="font-medium {detail.color || 'text-default-900'}">{detail.value}</span>
 					</div>
@@ -109,7 +119,10 @@
 		{/if}
 
 		{#if segments}
-			<div class={cn(progressSlot(), 'pt-2')}>
+			<div
+				class={cn(progressSlot(), 'pt-2')}
+				data-testid={buildTestId('metric-card', 'trend', testId)}
+			>
 				<Progress
 					value={0}
 					{segments}
@@ -120,7 +133,10 @@
 				/>
 			</div>
 		{:else if percent !== undefined}
-			<div class={cn(progressSlot(), 'pt-2')}>
+			<div
+				class={cn(progressSlot(), 'pt-2')}
+				data-testid={buildTestId('metric-card', 'trend', testId)}
+			>
 				<Progress value={percent} size={Size.SM} color={Color.SUCCESS} showLabel={false} />
 			</div>
 		{/if}
@@ -128,11 +144,21 @@
 {/snippet}
 
 {#if interactive}
-	<button type="button" class={baseClass} data-metric-card="" onclick={handleClick}>
+	<button
+		type="button"
+		class={baseClass}
+		data-metric-card=""
+		data-testid={buildTestId('metric-card', undefined, testId)}
+		onclick={handleClick}
+	>
 		{@render body()}
 	</button>
 {:else}
-	<div class={baseClass} data-metric-card="">
+	<div
+		class={baseClass}
+		data-metric-card=""
+		data-testid={buildTestId('metric-card', undefined, testId)}
+	>
 		{@render body()}
 	</div>
 {/if}

package/dist/layout/card/RankedCard.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import { rankedCard, type RankedCardProps } from './ranked-card.js';
 
-	let { items, columns = 3, class: className = '' }: RankedCardProps = $props();
+	let { items, columns = 3, class: className = '', testId }: RankedCardProps = $props();
 
 	const {
 		container,
@@ -22,28 +23,51 @@
 	const containerClass = $derived(cn(container(), className));
 </script>
 
-<div class={containerClass}>
-	{#each items as item (item.rank)}
-		<div class={card()}>
+<div class={containerClass} data-testid={buildTestId('ranked-card', undefined, testId)}>
+	{#each items as item, index (item.rank)}
+		<div class={card()} data-testid={buildTestId('ranked-card', 'card', testId, index)}>
 			<!-- Header with Rank and Title -->
 			<div class={header()}>
-				<span class={rank()}>#{item.rank}</span>
-				<h4 class={title()}>{item.title}</h4>
+				<span class={rank()} data-testid={buildTestId('ranked-card', 'rank', testId, index)}
+					>#{item.rank}</span
+				>
+				<h4 class={title()} data-testid={buildTestId('ranked-card', 'title', testId, index)}>
+					{item.title}
+				</h4>
 			</div>
 
 			<!-- Metrics -->
 			<div class={metricsContainer()}>
-				{#each item.metrics as metric (metric.label)}
+				{#each item.metrics as metric, metricIndex (metric.label)}
 					<div class={metricRow()}>
-						<span class={metricLabel()}>{metric.label}:</span>
-						<span class={cn(metricValue(), metric.color || '')}>{metric.value}</span>
+						<span
+							class={metricLabel()}
+							data-testid={buildTestId(
+								'ranked-card',
+								'metric-label',
+								testId,
+								`${index}-${metricIndex}`
+							)}>{metric.label}:</span
+						>
+						<span
+							class={cn(metricValue(), metric.color || '')}
+							data-testid={buildTestId(
+								'ranked-card',
+								'metric-value',
+								testId,
+								`${index}-${metricIndex}`
+							)}>{metric.value}</span
+						>
 					</div>
 				{/each}
 			</div>
 
 			<!-- Action/Recommendation -->
 			{#if item.action}
-				<div class={actionContainer()}>
+				<div
+					class={actionContainer()}
+					data-testid={buildTestId('ranked-card', 'action', testId, index)}
+				>
 					<p class={actionText()}>
 						<span class={actionLabel()}>Action:</span>
 						<span class={item.action.color || ''}>{item.action.text}</span>

package/dist/layout/card/card-types.d.ts

@@ -168,5 +168,13 @@ export type MetricCardProps = {
      * data is loading. @default false
      */
     loading?: boolean;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-metric-card` — root wrapper
+     * - `{testId}-metric-card-value` — big number
+     * - `{testId}-metric-card-label` — label text
+     * - `{testId}-metric-card-detail-{i}` — each detail row
+     * - `{testId}-metric-card-action` — action area
+     */
     testId?: string;
 };

package/dist/layout/card/ranked-card.d.ts

@@ -102,4 +102,14 @@ export type RankedCardProps = {
     items: RankedCardItem[];
     columns?: 1 | 2 | 3 | 4;
     class?: ClassValue;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-ranked-card` — root wrapper
+     * - `{testId}-ranked-card-item-{i}` — each card
+     * - `{testId}-ranked-card-rank-{i}` — rank number
+     * - `{testId}-ranked-card-title-{i}` — title
+     * - `{testId}-ranked-card-metric-label-{i}-{j}` — metric label
+     * - `{testId}-ranked-card-metric-value-{i}-{j}` — metric value
+     */
+    testId?: string;
 };

package/dist/layout/table/Table.svelte

@@ -622,3 +622,8 @@
 {:else}
 	{@render tableContent()}
 {/if}
+{#if testId}
+	<div data-testid={buildTestId('table', 'data', testId)} style="display:none" aria-hidden="true">
+		{JSON.stringify(getPaginatedData())}
+	</div>
+{/if}

package/dist/layout/table/table-types.d.ts

@@ -202,5 +202,13 @@ export type TableProps<T = DataRow> = {
     rowKey?: string;
     /** Allow rows to expand/collapse showing `expandedContent`. @default false */
     expandable?: boolean;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-table` — root table element
+     * - `{testId}-table-head` — thead
+     * - `{testId}-table-data` — hidden element containing the current
+     *   page's row data as JSON, so test automation can read values
+     *   without parsing individual cells
+     */
     testId?: string;
 };

package/dist/pipeline/Pipeline.svelte

@@ -11,7 +11,7 @@
 		class: className = '',
 		size = 'md',
 		equalWidth = true,
-		chevronGap = 0,
+		chevronGap = 4,
 		selectedClass,
 		unselectedClass,
 		disabledClass,
@@ -74,9 +74,13 @@
 		{#if children}
 			{@render children(stage, index)}
 		{:else}
-			<span class={s.label()}>{stage.label}</span>
+			<span class={s.label()} data-testid={buildTestId('pipeline', 'label', testId, index)}
+				>{stage.label}</span
+			>
 			{#if stage.count !== undefined}
-				<span class={s.count()}>{stage.count}</span>
+				<span class={s.count()} data-testid={buildTestId('pipeline', 'count', testId, index)}
+					>{stage.count}</span
+				>
 			{/if}
 		{/if}
 	</div>

package/dist/pipeline/pipeline-types.d.ts

@@ -86,5 +86,11 @@ export type PipelineProps = {
     onstagehover?: (e: PipelineStagePointerEvent) => void;
     /** Fires on stage mouseleave. */
     onstageleave?: (e: PipelineStagePointerEvent) => void;
+    /**
+     * Test ID prefix. When set, the component emits these selectors:
+     * - `{testId}-pipeline` — root wrapper
+     * - `{testId}-pipeline-label-{i}` — stage label
+     * - `{testId}-pipeline-count-{i}` — stage count
+     */
     testId?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "3.0.3",
+	"version": "3.0.4",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {