@makolabs/ripple 3.0.2 → 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();
 
@@ -143,38 +146,6 @@
 		return rgbToHex(r * (1 - amount), g * (1 - amount), b * (1 - amount));
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	function barGradient(baseHex: string, stacked: boolean): any {
-		if (stacked) {
-			// Horizontal sheen — same light direction for all segments
-			return {
-				type: 'linear',
-				x: 0,
-				y: 0,
-				x2: 1,
-				y2: 0,
-				colorStops: [
-					{ offset: 0, color: baseHex },
-					{ offset: 0.5, color: lighten(baseHex, 0.1) },
-					{ offset: 1, color: baseHex }
-				]
-			};
-		}
-		// Standalone bars — top-to-bottom depth
-		return {
-			type: 'linear',
-			x: 0,
-			y: 0,
-			x2: 0,
-			y2: 1,
-			colorStops: [
-				{ offset: 0, color: lighten(baseHex, 0.2) },
-				{ offset: 0.6, color: baseHex },
-				{ offset: 1, color: darken(baseHex, 0.15) }
-			]
-		};
-	}
-
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	function lineGradient(baseHex: string): any {
 		return {
@@ -435,9 +406,10 @@
 				color: getColor(seriesConfig.color),
 				emphasis: seriesConfig.emphasis || {
 					focus: 'series',
-					blurScope: 'global'
+					blurScope: 'global',
+					itemStyle: { borderRadius: 0 }
 				},
-				blur: { itemStyle: { opacity: 0.25 }, lineStyle: { opacity: 0.25 } },
+				blur: { itemStyle: { opacity: 0.25, borderRadius: 0 }, lineStyle: { opacity: 0.25 } },
 				animation: true,
 				animationDuration: AnimationDuration,
 				...(axisMarkLine && { markLine: axisMarkLine }),
@@ -475,8 +447,11 @@
 					barGap: '10%',
 					color: getColor(seriesConfig.color),
 					itemStyle: {
-						color: barGradient(getColor(seriesConfig.color) ?? '#6366f1', !!seriesConfig.stack),
-						opacity: seriesConfig.opacity ?? 1
+						color: getColor(seriesConfig.color) ?? '#6366f1',
+						opacity: seriesConfig.opacity ?? 1,
+						borderColor: darken(getColor(seriesConfig.color) ?? '#6366f1', 0.15),
+						borderWidth: 1,
+						borderRadius: [0, 0, 0, 0]
 					}
 				}),
 
@@ -781,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/drawer/Drawer.svelte

@@ -37,8 +37,7 @@
 		header: headerVClass,
 		body,
 		footer: footerVClass,
-		title: titleVClass,
-		closeButton
+		title: titleVClass
 	} = $derived(
 		drawer({
 			open,
@@ -54,7 +53,6 @@
 	const headerClasses = $derived(cn(headerVClass(), headerClass));
 	const bodyClasses = $derived(cn(body(), bodyClass));
 	const titleClasses = $derived(cn(titleVClass(), titleClass));
-	const closeButtonClasses = $derived(cn(closeButton(), ''));
 	const footerClasses = $derived(cn(footerVClass(), 'mt-auto', footerClass));
 
 	function handleBackdropClick(e: MouseEvent) {
@@ -181,41 +179,36 @@
 				data-testid={buildTestId('drawer', 'dialog', testId)}
 			>
 				<div class={contentClasses}>
+					<!-- Always-visible close button -->
+					<button
+						type="button"
+						class="bg-default-100 text-default-600 hover:bg-default-200 hover:text-default-900 absolute top-2 right-2 z-10 flex size-8 cursor-pointer items-center justify-center rounded-full transition-colors"
+						onclick={handleCloseClick}
+						aria-label="Close drawer"
+						data-testid={buildTestId('drawer', 'close', testId)}
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12">
+							<path
+								fill="currentColor"
+								d="m1.897 2.054l.073-.084a.75.75 0 0 1 .976-.073l.084.073L6 4.939l2.97-2.97a.75.75 0 1 1 1.06 1.061L7.061 6l2.97 2.97a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L6 7.061l-2.97 2.97A.75.75 0 1 1 1.97 8.97L4.939 6l-2.97-2.97a.75.75 0 0 1-.072-.976l.073-.084z"
+							/>
+						</svg>
+					</button>
+
 					<!-- Header -->
-					{#if header || title}
+					{#if title}
+						<div class={headerClasses}>
+							<h3
+								id="drawer-title"
+								class={titleClasses}
+								data-testid={buildTestId('drawer', 'title', testId)}
+							>
+								{title}
+							</h3>
+						</div>
+					{:else if header}
 						<div class={headerClasses}>
-							{#if header}
-								{@render header()}
-							{:else}
-								{#if title}
-									<h3
-										id="drawer-title"
-										class={titleClasses}
-										data-testid={buildTestId('drawer', 'title', testId)}
-									>
-										{title}
-									</h3>
-								{/if}
-								<button
-									type="button"
-									class={closeButtonClasses}
-									onclick={handleCloseClick}
-									aria-label="Close drawer"
-									data-testid={buildTestId('drawer', 'close', testId)}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										width="12"
-										height="12"
-										viewBox="0 0 12 12"
-									>
-										<path
-											fill="currentColor"
-											d="m1.897 2.054l.073-.084a.75.75 0 0 1 .976-.073l.084.073L6 4.939l2.97-2.97a.75.75 0 1 1 1.06 1.061L7.061 6l2.97 2.97a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L6 7.061l-2.97 2.97A.75.75 0 1 1 1.97 8.97L4.939 6l-2.97-2.97a.75.75 0 0 1-.072-.976l.073-.084z"
-										/>
-									</svg>
-								</button>
-							{/if}
+							{@render header()}
 						</div>
 					{/if}
 

package/dist/drawer/drawer.js

@@ -4,8 +4,8 @@ export const drawer = tv({
     slots: {
         base: 'fixed inset-0 z-50 flex overflow-hidden',
         backdrop: 'fixed inset-0 transition-opacity bg-black/50',
-        contentWrapper: 'absolute flex flex-col transform transition-transform',
-        content: 'flex flex-col h-full w-full overflow-y-auto bg-white',
+        contentWrapper: 'absolute flex flex-col transform transition-transform max-w-[100vw]',
+        content: 'relative flex flex-col h-full w-full overflow-y-auto bg-white',
         header: 'flex items-center justify-between px-4 py-3 border-b border-default-200',
         body: 'flex-1 overflow-y-auto p-4',
         footer: 'flex justify-end border-t border-default-200 p-4',

package/dist/elements/combobox/ComboBox.svelte

@@ -97,12 +97,15 @@
 		const v = (e.currentTarget as HTMLInputElement).value;
 		query = v;
 		open = true;
+		// Fire onsearch immediately (documented "every keystroke" contract).
+		// Only debounce local filtering so rapid typing doesn't churn the
+		// DOM with intermediate filter results.
+		onsearch?.(v);
 		clearTimeout(debounceTimer);
 		debounceTimer = setTimeout(() => {
 			debouncedQuery = v;
 			highlightedIndex = 0;
-			onsearch?.(v);
-		}, 1000);
+		}, 300);
 	}
 
 	$effect(() => {
@@ -206,10 +209,7 @@
 						else openMenu();
 					}
 				}}
-				class={cn(
-					'text-default-400 hover:text-default-700 flex cursor-pointer items-center justify-center rounded',
-					!disabled && 'hover:text-default-600'
-				)}
+				class="text-default-400 hover:text-default-600 flex cursor-pointer items-center justify-center rounded"
 				aria-label={open ? 'Close suggestions' : 'Open suggestions'}
 				{disabled}
 			>

package/dist/elements/dropdown/Select.svelte

@@ -216,19 +216,17 @@
 	}
 
 	function handleClickOutside(event: MouseEvent) {
-		// Check if the click is inside the portal content
+		if (!open) return;
+		// On mobile the sheet handles its own close via backdrop.
+		if (isMobile) return;
 		const portalContent = document.querySelector('.ripple-portal .portal-content');
-
-		// If the click is inside either the label (trigger) or the portal content, don't close
+		const target = event.target as Node;
 		if (
-			(labelRef && labelRef.contains(event.target as Node)) ||
-			(portalContent && portalContent.contains(event.target as Node)) ||
-			!open
+			(labelRef && labelRef.contains(target)) ||
+			(portalContent && portalContent.contains(target))
 		) {
 			return;
 		}
-
-		// Otherwise close the dropdown
 		open = false;
 		onclose();
 	}

package/dist/elements/popover/Popover.svelte

@@ -236,7 +236,7 @@
 		type="button"
 		class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
 		aria-label="Close"
-		onclick={close}
+		onclick={closeOnOutsideClick ? close : undefined}
 	></button>
 	<div
 		role="dialog"

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;