@makolabs/ripple 1.7.11 → 1.8.0

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

@@ -1,4 +1,3 @@
-import { Color } from '../../variants.js';
 export declare const table: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
@@ -27,32 +26,32 @@ export declare const table: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        [Color.PRIMARY]: {
+        default: {
             th: string;
-            tr: string;
         };
-        [Color.SECONDARY]: {
+        primary: {
             th: string;
             tr: string;
         };
-        [Color.INFO]: {
+        secondary: {
             th: string;
             tr: string;
         };
-        [Color.SUCCESS]: {
+        info: {
             th: string;
             tr: string;
         };
-        [Color.WARNING]: {
+        success: {
             th: string;
             tr: string;
         };
-        [Color.DANGER]: {
+        warning: {
             th: string;
             tr: string;
         };
-        default: {
+        danger: {
             th: string;
+            tr: string;
         };
     };
     bordered: {
@@ -112,32 +111,32 @@ export declare const table: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        [Color.PRIMARY]: {
+        default: {
             th: string;
-            tr: string;
         };
-        [Color.SECONDARY]: {
+        primary: {
             th: string;
             tr: string;
         };
-        [Color.INFO]: {
+        secondary: {
             th: string;
             tr: string;
         };
-        [Color.SUCCESS]: {
+        info: {
             th: string;
             tr: string;
         };
-        [Color.WARNING]: {
+        success: {
             th: string;
             tr: string;
         };
-        [Color.DANGER]: {
+        warning: {
             th: string;
             tr: string;
         };
-        default: {
+        danger: {
             th: string;
+            tr: string;
         };
     };
     bordered: {
@@ -197,32 +196,32 @@ export declare const table: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        [Color.PRIMARY]: {
+        default: {
             th: string;
-            tr: string;
         };
-        [Color.SECONDARY]: {
+        primary: {
             th: string;
             tr: string;
         };
-        [Color.INFO]: {
+        secondary: {
             th: string;
             tr: string;
         };
-        [Color.SUCCESS]: {
+        info: {
             th: string;
             tr: string;
         };
-        [Color.WARNING]: {
+        success: {
             th: string;
             tr: string;
         };
-        [Color.DANGER]: {
+        warning: {
             th: string;
             tr: string;
         };
-        default: {
+        danger: {
             th: string;
+            tr: string;
         };
     };
     bordered: {

package/dist/layout/tabs/Tab.svelte

@@ -12,7 +12,8 @@
 		color = Color.PRIMARY,
 		size = Size.BASE,
 		onclick = () => {},
-		variant = 'line'
+		variant = 'line',
+		testId
 	}: TabProps = $props();
 
 	function handleClick(event: Event & { currentTarget: EventTarget & HTMLButtonElement }) {
@@ -43,6 +44,7 @@
 	id={`tab-${value}`}
 	aria-controls={`panel-${value}`}
 	aria-selected={selected ? 'true' : 'false'}
+	data-testid={testId}
 	onclick={handleClick}
 	onkeydown={(e) => {
 		if (e.key === 'Enter' || e.key === ' ') {

package/dist/layout/tabs/TabGroup.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import Tab from './Tab.svelte';
 	import { tabs } from './tabs.js';
 	import type { TabsGroupProps } from '../../index.js';
@@ -16,7 +17,8 @@
 		listClass = '',
 		panelClass = '',
 		onchange = () => {},
-		children
+		children,
+		testId
 	}: TabsGroupProps = $props();
 
 	const { base, list, panel } = $derived(
@@ -40,8 +42,8 @@
 </script>
 
 <div class={baseClass}>
-	<div class={listClass_} role="tablist">
-		{#each tabItems as tab (tab.value)}
+	<div class={listClass_} role="tablist" data-testid={buildTestId('tabgroup', 'list', testId)}>
+		{#each tabItems as tab, index (tab.value)}
 			<Tab
 				value={tab.value}
 				label={tab.label}
@@ -51,12 +53,13 @@
 				{color}
 				{size}
 				{variant}
+				testId={buildTestId('tabgroup', 'tab', testId, index)}
 				onclick={() => handleTabClick(tab.value)}
 			/>
 		{/each}
 	</div>
 
-	<div class={panelClass_}>
+	<div class={panelClass_} data-testid={buildTestId('tabgroup', 'panel', testId)}>
 		{@render children?.(selected)}
 	</div>
 </div>

package/dist/layout/tabs/tabs.d.ts

@@ -1,31 +1,30 @@
-import { Color, Size } from '../../index.js';
 export declare const tabs: import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.PRIMARY]: {};
-        [Color.SECONDARY]: {};
-        [Color.SUCCESS]: {};
-        [Color.WARNING]: {};
-        [Color.DANGER]: {};
-        [Color.INFO]: {};
-        [Color.DEFAULT]: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+        default: {};
     };
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
         };
     };
@@ -47,31 +46,31 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
     panel: string;
 }, undefined, {
     color: {
-        [Color.PRIMARY]: {};
-        [Color.SECONDARY]: {};
-        [Color.SUCCESS]: {};
-        [Color.WARNING]: {};
-        [Color.DANGER]: {};
-        [Color.INFO]: {};
-        [Color.DEFAULT]: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+        default: {};
     };
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
         };
     };
@@ -93,31 +92,31 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
     panel: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.PRIMARY]: {};
-        [Color.SECONDARY]: {};
-        [Color.SUCCESS]: {};
-        [Color.WARNING]: {};
-        [Color.DANGER]: {};
-        [Color.INFO]: {};
-        [Color.DEFAULT]: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+        default: {};
     };
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
         };
     };

package/dist/modal/Modal.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
+	import { onDestroy, tick } from 'svelte';
+	import { browser } from '$app/environment';
 	import { fade, scale } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
+	import { warnDeprecatedProps } from '../helper/deprecation.js';
 	import { modal } from './modal.js';
 	import type { ModalProps } from '../index.js';
 
@@ -13,32 +17,55 @@
 		size,
 		hideCloseButton = false,
 		class: className = '',
-		contentclass: contentClassName = '',
-		bodyclass: bodyClassName = '',
-		titleclass: titleClassName = '',
-		headerclass: headerClassName = '',
-		backdropclass: backdropClassName = '',
+		contentclass,
+		contentClass = contentclass ?? '',
+		bodyclass,
+		bodyClass = bodyclass ?? '',
+		titleclass,
+		titleClass = titleclass ?? '',
+		headerclass,
+		headerClass = headerclass ?? '',
+		backdropclass,
+		backdropClass = backdropclass ?? '',
+		footerclass,
+		footerClass = footerclass ?? '',
 		children,
 		footer,
-		header
+		header,
+		testId
 	}: ModalProps = $props();
 
+	warnDeprecatedProps(
+		'Modal',
+		{ contentclass, bodyclass, titleclass, headerclass, backdropclass, footerclass },
+		{
+			contentclass: 'contentClass',
+			bodyclass: 'bodyClass',
+			titleclass: 'titleClass',
+			headerclass: 'headerClass',
+			backdropclass: 'backdropClass',
+			footerclass: 'footerClass'
+		}
+	);
+
+	let modalElement: HTMLDivElement | undefined = $state();
+
 	const styles = $derived(modal({ size }));
 
 	const baseClass = $derived(cn(styles.base(), className));
-	const backdropClass = $derived(cn(styles.backdrop(), backdropClassName));
-	const containerClass = $derived(cn(styles.container(), contentClassName));
-	const headerClass = $derived(cn(styles.header(), headerClassName));
-	const titleClass = $derived(cn(styles.title(), titleClassName));
-	const bodyClass = $derived(
+	const backdropClasses = $derived(cn(styles.backdrop(), backdropClass));
+	const containerClass = $derived(cn(styles.container(), contentClass));
+	const headerClasses = $derived(cn(styles.header(), headerClass));
+	const titleClasses = $derived(cn(styles.title(), titleClass));
+	const bodyClasses = $derived(
 		cn(
 			'flex-1 px-6 overflow-y-auto',
 			// Adjust top padding based on header presence
 			title || description ? 'py-4' : 'pt-6 pb-4',
-			bodyClassName
+			bodyClass
 		)
 	);
-	const footerClass = $derived(cn(styles.footer(), ''));
+	const footerClasses = $derived(cn(styles.footer(), footerClass));
 	const closeClass = $derived(cn(styles.close(), ''));
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const descriptionClass = $derived(cn(styles.description(), ''));
@@ -53,13 +80,59 @@
 		}
 	}
 
+	let previouslyFocusedElement: HTMLElement | null = null;
+
+	function trapFocus(element: HTMLElement) {
+		const focusableElements = element.querySelectorAll(
+			'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+		);
+
+		if (focusableElements.length === 0) return;
+
+		const firstElement = focusableElements[0] as HTMLElement;
+		const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+		function handleTabKey(e: KeyboardEvent) {
+			if (e.key !== 'Tab') return;
+
+			if (e.shiftKey) {
+				if (document.activeElement === firstElement) {
+					lastElement.focus();
+					e.preventDefault();
+				}
+			} else {
+				if (document.activeElement === lastElement) {
+					firstElement.focus();
+					e.preventDefault();
+				}
+			}
+		}
+
+		element.addEventListener('keydown', handleTabKey);
+		firstElement.focus();
+
+		return () => {
+			element.removeEventListener('keydown', handleTabKey);
+		};
+	}
+
 	$effect(() => {
 		if (open) {
+			previouslyFocusedElement = document.activeElement as HTMLElement;
 			document.body.style.overflow = 'hidden';
 			document.addEventListener('keydown', handleKeydown);
+
+			tick().then(() => {
+				if (modalElement) {
+					trapFocus(modalElement);
+				}
+			});
 		} else {
 			document.body.style.overflow = '';
 			document.removeEventListener('keydown', handleKeydown);
+			if (previouslyFocusedElement) {
+				previouslyFocusedElement.focus();
+			}
 		}
 
 		return () => {
@@ -67,18 +140,36 @@
 			document.removeEventListener('keydown', handleKeydown);
 		};
 	});
+
+	onDestroy(() => {
+		if (browser && document.body.style.overflow === 'hidden') {
+			document.body.style.overflow = '';
+		}
+	});
 </script>
 
 {#snippet predefinedHeader()}
 	{#if title || description}
-		<header class={headerClass}>
+		<header class={headerClasses}>
 			<div class="flex-1">
 				{#if title}
-					<h2 class={titleClass}>{title}</h2>
+					<h2
+						id="modal-title"
+						class={titleClasses}
+						data-testid={buildTestId('modal', 'title', testId)}
+					>
+						{title}
+					</h2>
 				{/if}
 			</div>
 			{#if !hideCloseButton}
-				<button type="button" class={closeClass} onclick={onclose} aria-label="Close">
+				<button
+					type="button"
+					class={closeClass}
+					onclick={onclose}
+					aria-label="Close"
+					data-testid={buildTestId('modal', 'close', testId)}
+				>
 					<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
 						<path
 							d="M15 5L5 15M5 5L15 15"
@@ -99,6 +190,7 @@
 			class="text-default-400 hover:bg-default-100 hover:text-default-600 absolute top-4 right-4 z-10 rounded-lg p-2 transition-colors"
 			onclick={onclose}
 			aria-label="Close"
+			data-testid={buildTestId('modal', 'close', testId)}
 		>
 			<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
 				<path
@@ -113,17 +205,28 @@
 {/snippet}
 
 {#if open}
-	<div class={baseClass} role="dialog" aria-modal="true">
+	<div
+		class={baseClass}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={title ? 'modal-title' : undefined}
+		bind:this={modalElement}
+	>
 		<!-- Backdrop -->
 		<div
-			class={backdropClass}
+			class={backdropClasses}
 			onclick={handleBackdropClick}
 			transition:fade={{ duration: 200 }}
 			role="presentation"
+			data-testid={buildTestId('modal', 'backdrop', testId)}
 		></div>
 
 		<!-- Modal Container -->
-		<div class={containerClass} transition:scale={{ duration: 200, easing: quintOut, start: 0.95 }}>
+		<div
+			class={containerClass}
+			transition:scale={{ duration: 200, easing: quintOut, start: 0.95 }}
+			data-testid={buildTestId('modal', 'dialog', testId)}
+		>
 			<!-- Header -->
 			{#if header}
 				{@render header()}
@@ -133,14 +236,14 @@
 
 			<!-- Body -->
 			{#if children}
-				<div class={bodyClass}>
+				<div class={bodyClasses} data-testid={buildTestId('modal', 'body', testId)}>
 					{@render children()}
 				</div>
 			{/if}
 
 			<!-- Footer -->
 			{#if footer}
-				<footer class={footerClass}>
+				<footer class={footerClasses} data-testid={buildTestId('modal', 'footer', testId)}>
 					{@render footer()}
 				</footer>
 			{/if}

package/dist/modal/modal.d.ts

@@ -1,22 +1,21 @@
-import { Size } from '../index.js';
 export declare const modal: import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.XS]: {
+        xs: {
             container: string;
         };
-        [Size.SM]: {
+        sm: {
             container: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
         };
-        [Size.XL]: {
+        xl: {
             container: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             container: string;
         };
     };
@@ -32,22 +31,22 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     close: string;
 }, undefined, {
     size: {
-        [Size.XS]: {
+        xs: {
             container: string;
         };
-        [Size.SM]: {
+        sm: {
             container: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
         };
-        [Size.XL]: {
+        xl: {
             container: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             container: string;
         };
     };
@@ -63,22 +62,22 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.XS]: {
+        xs: {
             container: string;
         };
-        [Size.SM]: {
+        sm: {
             container: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
         };
-        [Size.XL]: {
+        xl: {
             container: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             container: string;
         };
     };

package/dist/modal/modal.js

@@ -4,10 +4,10 @@ export const modal = tv({
     slots: {
         base: 'fixed inset-0 z-50 flex items-center justify-center 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 overflow-hidden',
+        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',
-        footer: 'px-6 py-4 border-t border-default-200 bg-default-50/80 shrink-0',
+        footer: 'px-6 py-4 border-t border-default-200 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',
         close: 'p-2 -mr-2 ml-4 rounded-lg text-default-400 hover:text-default-600 hover:bg-default-100 transition-colors'

package/dist/user-management/UserModal.svelte

@@ -287,7 +287,7 @@
 	{open}
 	onclose={handleClose}
 	title={getModalTitle()}
-	contentclass="max-w-4xl"
+	contentClass="max-w-4xl"
 	class={cn(className)}
 >
 	<form bind:this={formElement} onsubmit={handleSubmit} class="flex gap-6" data-testid="user-form">

package/dist/user-management/UserTable.svelte

@@ -223,8 +223,8 @@
 	onpagesizechange={onPageSizeChange}
 	onsort={handleTableSort}
 	paginationPosition="bottom"
-	paginationclass="whitespace-nowrap flex-wrap gap-3 justify-between items-center"
-	wrapperclass="overflow-x-auto"
-	tableclass="min-w-full w-full"
+	paginationClass="whitespace-nowrap flex-wrap gap-3 justify-between items-center"
+	wrapperClass="overflow-x-auto"
+	tableClass="min-w-full w-full"
 	class={className}
 />

package/dist/user-management/UserViewModal.svelte

@@ -83,8 +83,8 @@
 	{open}
 	onclose={handleClose}
 	title={getModalTitle()}
-	contentclass="max-w-4xl"
-	bodyclass="flex flex-col"
+	contentClass="max-w-4xl"
+	bodyClass="flex flex-col"
 	class={cn(className)}
 >
 	<div class="flex gap-6">