@makolabs/ripple 3.0.2 → 3.0.4

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()}
@@ -333,24 +342,26 @@
 	{/if}
 
 	{#if isOpen && isMobile}
-		<button
-			type="button"
-			class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
-			aria-label="Close"
-			onclick={() => (isOpen = false)}
-		></button>
-		<div
-			class="fixed inset-x-0 bottom-0 z-[9999] flex max-h-[85vh] min-h-48 flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl"
-			transition:fly={{ y: 300, duration: 200, easing: quintOut }}
-			bind:this={calendarRef}
-		>
-			<div class="flex justify-center py-2">
-				<div class="bg-default-300 h-1 w-8 rounded-full"></div>
-			</div>
-			<div class="flex-1 cursor-pointer overflow-y-auto p-4">
-				{@render calendarContent()}
+		<Portal target={datePickerRef}>
+			<button
+				type="button"
+				class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
+				aria-label="Close"
+				onclick={() => (isOpen = false)}
+			></button>
+			<div
+				class="fixed inset-x-0 bottom-0 z-[9999] flex max-h-[85vh] min-h-48 flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl"
+				transition:fly={{ y: 300, duration: 200, easing: quintOut }}
+				bind:this={calendarRef}
+			>
+				<div class="flex justify-center py-2">
+					<div class="bg-default-300 h-1 w-8 rounded-full"></div>
+				</div>
+				<div class="flex-1 cursor-pointer overflow-y-auto p-4">
+					{@render calendarContent()}
+				</div>
 			</div>
-		</div>
+		</Portal>
 	{/if}
 </div>
 

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

@@ -230,7 +230,6 @@
 	class={cn(
 		'inline-block bg-white select-none',
 		'border-default-200 rounded-lg border shadow-xs',
-		'max-sm:w-full max-sm:rounded-none max-sm:border-0 max-sm:shadow-none',
 		density.panel,
 		density.padding,
 		className
@@ -247,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">
@@ -257,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}
@@ -266,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">
@@ -284,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>
@@ -298,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/date-picker/DatePicker.svelte

@@ -127,7 +127,14 @@
 		</button>
 
 		{#snippet content()}
-			<Calendar {value} {minDate} {maxDate} {size} onselect={(d) => handleSelect(d as Date)} />
+			<Calendar
+				{value}
+				{minDate}
+				{maxDate}
+				{size}
+				class="max-sm:w-full max-sm:rounded-none max-sm:border-0 max-sm:shadow-none"
+				onselect={(d) => handleSelect(d as Date)}
+			/>
 		{/snippet}
 	</Popover>
 

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

@@ -118,7 +118,10 @@
 
 	function setThisMonth() {
 		const now = new Date();
-		value = new Date(now.getFullYear(), now.getMonth(), 1);
+		const d = new Date(now.getFullYear(), now.getMonth(), 1);
+		if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), 1)) return;
+		if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), 1)) return;
+		value = d;
 		onselect?.(value);
 		open = false;
 	}
@@ -135,14 +138,18 @@
 	});
 </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}
 		</label>
 	{/if}
 
-	<input type="hidden" {name} value={value?.toISOString() ?? ''} />
+	<input
+		type="hidden"
+		{name}
+		value={value ? `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}` : ''}
+	/>
 
 	<Popover trigger="manual" bind:open placement="bottom" {disabled}>
 		<button
@@ -239,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>
@@ -251,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;
 };