@makolabs/ripple 3.0.2 → 3.0.4

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/modal/modal.js

@@ -2,11 +2,11 @@ import { tv } from 'tailwind-variants';
 import { Size } from '../index.js';
 export const modal = tv({
     slots: {
-        base: 'fixed inset-0 z-50 flex items-center justify-center p-4',
+        base: 'fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4',
         backdrop: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
-        container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl',
-        header: 'px-6 py-4 border-b border-default-200 flex items-center justify-between shrink-0',
-        body: 'flex-1 px-6 py-4 overflow-y-auto',
+        container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl max-sm:max-w-none max-sm:max-h-[95vh]',
+        header: 'px-4 py-3 sm:px-6 sm:py-4 border-b border-default-200 flex items-center justify-between shrink-0',
+        body: 'flex-1 px-4 py-3 sm:px-6 sm:py-4 overflow-y-auto',
         footer: 'bg-default-50/80 rounded-b-xl shrink-0',
         title: 'text-lg font-semibold text-default-900',
         description: 'text-sm text-default-600 mt-1',

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.2",
+	"version": "3.0.4",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {