@makolabs/ripple 1.7.11 → 1.9.0

package/dist/elements/alert/Alert.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import { Color } from '../../variants.js';
-	import type { AlertProps } from '../../index.js';
+	import type { AlertProps, VariantColors } from '../../index.js';
 
 	let {
 		title,
@@ -9,30 +10,40 @@
 		color = Color.DEFAULT,
 		onclose,
 		footer,
-		class: className = ''
+		icon: Icon,
+		class: className = '',
+		testId
 	}: AlertProps = $props();
 
 	function handleClose() {
 		onclose?.();
 	}
 
-	const colorClasses = {
+	const colorClasses: Record<VariantColors, string> = {
 		[Color.DEFAULT]: 'bg-default-50 border-default-200 text-default-800',
 		[Color.PRIMARY]: 'bg-primary-50 border-primary-200 text-primary-800',
+		[Color.SECONDARY]: 'bg-secondary-50 border-secondary-200 text-secondary-800',
+		[Color.INFO]: 'bg-info-50 border-info-200 text-info-800',
 		[Color.SUCCESS]: 'bg-success-50 border-success-200 text-success-800',
 		[Color.WARNING]: 'bg-warning-50 border-warning-200 text-warning-800',
-		[Color.DANGER]: 'bg-danger-50 border-danger-200 text-danger-800',
-		[Color.INFO]: 'bg-info-50 border-info-200 text-info-800'
+		[Color.DANGER]: 'bg-danger-50 border-danger-200 text-danger-800'
 	};
 </script>
 
-<div class={cn('relative rounded-lg border p-4', colorClasses[color], className)}>
+<div
+	role="alert"
+	class={cn('relative rounded-lg border p-4', colorClasses[color], className)}
+	data-testid={buildTestId('alert', undefined, testId)}
+>
 	<div class="flex items-start justify-between gap-4">
+		{#if Icon}
+			<Icon class="mt-0.5 h-5 w-5 shrink-0" />
+		{/if}
 		<div class="flex-1">
 			{#if title}
-				<h4 class="font-semibold">{title}</h4>
+				<h4 class="font-semibold" data-testid={buildTestId('alert', 'title', testId)}>{title}</h4>
 			{/if}
-			<p class="text-sm">{message}</p>
+			<p class="text-sm" data-testid={buildTestId('alert', 'message', testId)}>{message}</p>
 		</div>
 		{#if onclose}
 			<button
@@ -40,6 +51,7 @@
 				class="hover:bg-default-200/20 flex-shrink-0 cursor-pointer rounded-md p-1"
 				onclick={handleClose}
 				aria-label="Close alert"
+				data-testid={buildTestId('alert', 'close', testId)}
 			>
 				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 					<path

package/dist/elements/badge/Badge.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import { badge } from './badge.js';
 	import { Size, Color } from '../../variants.js';
 	import type { BadgeProps } from '../../index.js';
@@ -9,7 +10,8 @@
 		color = Color.DEFAULT,
 		class: className = '',
 		children,
-		onclose: onClose
+		onclose: onClose,
+		testId
 	}: BadgeProps = $props();
 
 	const { base } = $derived(
@@ -27,7 +29,7 @@
 	}
 </script>
 
-<span class={baseClass}>
+<span class={baseClass} data-testid={buildTestId('badge', undefined, testId)}>
 	{@render children()}
 	{#if onClose}
 		<button
@@ -37,6 +39,7 @@
 			title="Close"
 			tabindex="0"
 			type="button"
+			data-testid={buildTestId('badge', 'close', testId)}
 		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"

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

@@ -0,0 +1,11 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantColors, VariantSizes } from '../../index.js';
+export type BadgeProps = {
+    size?: VariantSizes;
+    color?: VariantColors;
+    class?: ClassValue;
+    children: Snippet;
+    onclose?: (event: MouseEvent) => void;
+    testId?: string;
+};

package/dist/elements/badge/badge-types.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/badge/badge.d.ts

@@ -1,57 +1,56 @@
-import { Size, Color } from '../../variants.js';
 export declare const badge: import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.XS]: {
+        xs: {
             base: string;
             icon: string;
         };
-        [Size.SM]: {
+        sm: {
             base: string;
             icon: string;
         };
-        [Size.BASE]: {
+        base: {
             base: string;
             icon: string;
         };
-        [Size.LG]: {
+        lg: {
             base: string;
             icon: string;
         };
-        [Size.XL]: {
+        xl: {
             base: string;
             icon: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             base: string;
             icon: string;
         };
     };
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             icon: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             icon: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             icon: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             icon: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             icon: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             icon: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             icon: string;
         };
@@ -61,57 +60,57 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
     icon: string;
 }, undefined, {
     size: {
-        [Size.XS]: {
+        xs: {
             base: string;
             icon: string;
         };
-        [Size.SM]: {
+        sm: {
             base: string;
             icon: string;
         };
-        [Size.BASE]: {
+        base: {
             base: string;
             icon: string;
         };
-        [Size.LG]: {
+        lg: {
             base: string;
             icon: string;
         };
-        [Size.XL]: {
+        xl: {
             base: string;
             icon: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             base: string;
             icon: string;
         };
     };
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             icon: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             icon: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             icon: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             icon: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             icon: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             icon: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             icon: string;
         };
@@ -121,57 +120,57 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
     icon: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.XS]: {
+        xs: {
             base: string;
             icon: string;
         };
-        [Size.SM]: {
+        sm: {
             base: string;
             icon: string;
         };
-        [Size.BASE]: {
+        base: {
             base: string;
             icon: string;
         };
-        [Size.LG]: {
+        lg: {
             base: string;
             icon: string;
         };
-        [Size.XL]: {
+        xl: {
             base: string;
             icon: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             base: string;
             icon: string;
         };
     };
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             icon: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             icon: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             icon: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             icon: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             icon: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             icon: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             icon: string;
         };

package/dist/elements/dropdown/Dropdown.svelte

@@ -6,6 +6,7 @@
 	import { Size } from '../../variants.js';
 	import Portal from '../../utils/Portal.svelte';
 	import { resolve } from '$app/paths';
+	import { buildTestId } from '../../helper/testid.js';
 
 	let {
 		sections = [],
@@ -19,7 +20,8 @@
 		disabled = false,
 		position = 'bottom-left',
 		width = 'w-56',
-		header
+		header,
+		testId
 	}: DropdownMenuProps = $props();
 
 	// Determine if we're in icon-only mode
@@ -134,6 +136,16 @@
 		if (item.onclick) item.onclick();
 		isOpen = false;
 	}
+
+	/**
+	 * Compute cumulative item counts per section so we can derive flat indices.
+	 */
+	const sectionOffsets = $derived(
+		sections.reduce<number[]>((acc, sec, i) => {
+			acc.push(i === 0 ? 0 : acc[i - 1] + sections[i - 1].items.length);
+			return acc;
+		}, [])
+	);
 </script>
 
 <svelte:window onclick={handleClickOutside} />
@@ -148,6 +160,7 @@
 			class={triggerClass_}
 			onclick={handleToggle}
 			{disabled}
+			data-testid={buildTestId('dropdown', 'trigger', testId)}
 		>
 			{#if label}
 				{label}
@@ -183,6 +196,7 @@
 			aria-labelledby="menu-button"
 			style={dropdownStyles}
 			transition:fly={{ duration: 150, y: 5, opacity: 0 }}
+			data-testid={buildTestId('dropdown', 'menu', testId)}
 		>
 			{#if header}
 				<button class={headerClass_} onclick={header.onclick} aria-label="Header Actions">
@@ -202,12 +216,14 @@
 			{#each sections as section_, sectionIndex (sectionIndex)}
 				<div class={sectionClass}>
 					{#each section_.items as menuItem, itemIndex (itemIndex)}
+						{@const flatIndex = sectionOffsets[sectionIndex] + itemIndex}
 						{@const itemProps = {
 							class: itemClass_,
 							role: 'menuitem',
 							tabindex: -1,
 							id: `menu-item-${sectionIndex}-${itemIndex}`,
-							'data-active': menuItem.active
+							'data-active': menuItem.active,
+							'data-testid': buildTestId('dropdown', 'item', testId, flatIndex)
 						}}
 						{#if menuItem.href}
 							<a href={resolve(menuItem.href as `/`)} {...itemProps}>

package/dist/elements/dropdown/Select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { tick } from 'svelte';
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import { selectTV } from './select.js';
 	import type { SelectItem, SelectProps } from '../../index.js';
 	import Badge from '../badge/Badge.svelte';
@@ -25,7 +26,8 @@
 		triggerClass = '', // recently, just now
 		onselect = () => {},
 		onopen = () => {},
-		onclose = () => {}
+		onclose = () => {},
+		testId
 	}: SelectProps = $props();
 
 	let open = $state(false);
@@ -34,6 +36,8 @@
 	let searchInputRef = $state<HTMLInputElement | null>(null);
 	let highlightedIndex = $state(-1);
 
+	const selectId = crypto.randomUUID().slice(0, 8);
+
 	// Convert value to array for internal processing if multiple is true
 	const valueArray = $derived.by(() => {
 		if (multiple) {
@@ -199,8 +203,9 @@
 	class={triggerClass_}
 	aria-disabled={disabled}
 	aria-haspopup="listbox"
-	aria-labelledby="select-label"
+	aria-labelledby="{selectId}-label"
 	data-state={open ? 'open' : 'closed'}
+	data-testid={buildTestId('select', 'trigger', testId)}
 >
 	<button
 		type="button"
@@ -219,11 +224,11 @@
 				</Badge>
 			{/each}
 		{:else if !multiple && selectedItem}
-			<span id="select-label" class="flex-1 truncate text-left">
+			<span id="{selectId}-label" class="flex-1 truncate text-left">
 				{selectedItem.label}
 			</span>
 		{:else}
-			<span id="select-label" class="text-default-500 px-1">
+			<span id="{selectId}-label" class="text-default-500 px-1">
 				{placeholder}
 			</span>
 		{/if}
@@ -251,7 +256,12 @@
 
 {#if open}
 	<Portal target={labelRef}>
-		<div class={containerClass_} role="listbox" aria-labelledby="select-label">
+		<div
+			class={containerClass_}
+			role="listbox"
+			aria-labelledby="{selectId}-label"
+			data-testid={buildTestId('select', 'list', testId)}
+		>
 			{#if searchable}
 				<div class={searchInputClass_}>
 					<svg
@@ -273,6 +283,7 @@
 						class="ring-0 outline-0"
 						placeholder="Search..."
 						aria-label="Search select options"
+						data-testid={buildTestId('select', 'search', testId)}
 					/>
 				</div>
 			{/if}
@@ -296,6 +307,7 @@
 								data-selected={valueArray.includes(item.value)}
 								data-highlighted={index === highlightedIndex}
 								data-index={index}
+								data-testid={buildTestId('select', 'option', testId, index)}
 							>
 								<span class="flex w-full items-center justify-between">
 									<span class="flex items-center gap-2 overflow-hidden">

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

@@ -0,0 +1,68 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+import type { VariantSizes } from '../../index.js';
+export type DropdownItem = {
+    label: string;
+    href?: `/${string}`;
+    icon?: Component;
+    onclick?: () => void;
+    active?: boolean;
+};
+export type DropSection = {
+    items: DropdownItem[];
+};
+export type DropHeaderConfig = {
+    title?: string;
+    subtitle?: string;
+    content?: Snippet<[]>;
+    class?: ClassValue;
+    titleClass?: ClassValue;
+    subtitleClass?: ClassValue;
+    onclick?: () => void;
+};
+export type DropdownMenuProps = {
+    open?: boolean;
+    sections: DropSection[];
+    label?: string;
+    icon?: Component;
+    containerClass?: ClassValue;
+    itemClass?: ClassValue;
+    class?: ClassValue;
+    size?: VariantSizes;
+    disabled?: boolean;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    width?: string;
+    header?: DropHeaderConfig;
+    testId?: string;
+};
+export type SelectItem = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    icon?: Component;
+};
+export type SelectProps = {
+    items: SelectItem[];
+    value?: string | string[];
+    multiple?: boolean;
+    placeholder?: string;
+    searchable?: boolean;
+    disabled?: boolean;
+    size?: VariantSizes;
+    class?: ClassValue;
+    containerClass?: ClassValue;
+    listClass?: ClassValue;
+    itemClass?: ClassValue;
+    triggerClass?: ClassValue;
+    searchInputClass?: ClassValue;
+    clearable?: boolean;
+    icon?: Component;
+    iconClass?: ClassValue;
+    onselect?: ({ value }: {
+        value: string | string[];
+    }) => void;
+    onopen?: () => void;
+    onclose?: () => void;
+    testId?: string;
+};

package/dist/elements/dropdown/dropdown-types.js

@@ -0,0 +1 @@
+export {};