@makolabs/ripple 1.7.11 → 1.8.0

package/dist/layout/activity-list/activity-list.d.ts

@@ -1,37 +1,36 @@
-import { Color } from '../../variants.js';
 export declare const activityList: import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             header: string;
             title: string;
@@ -51,37 +50,37 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
     itemActions: string;
 }, undefined, {
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             header: string;
             title: string;
@@ -101,37 +100,37 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
     itemActions: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             header: string;
             title: string;

package/dist/layout/card/Card.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { warnDeprecatedProps } from '../../helper/deprecation.js';
 	import { card } from './card.js';
 	import type { CardProps } from '../../index.js';
 	import { Color } from '../../variants.js';
@@ -10,10 +12,22 @@
 		title,
 		color = Color.DEFAULT,
 		class: className = '',
-		titleclass: titleClass = '',
-		bodyclass: bodyClass = ''
+		titleclass,
+		titleClass = titleclass ?? '',
+		bodyclass,
+		bodyClass = bodyclass ?? '',
+		testId
 	}: CardProps = $props();
 
+	warnDeprecatedProps(
+		'Card',
+		{ titleclass, bodyclass },
+		{
+			titleclass: 'titleClass',
+			bodyclass: 'bodyClass'
+		}
+	);
+
 	const { base, title: titleSlot, body: bodySlot } = $derived(card({ color }));
 
 	const baseClass = $derived(cn(base(), className));
@@ -21,15 +35,15 @@
 	const bodyClasses = $derived(cn(bodySlot(), bodyClass));
 </script>
 
-<div class={baseClass}>
+<div class={baseClass} data-testid={buildTestId('card', undefined, testId)}>
 	{#if custom}
 		{@render custom()}
 	{:else}
 		{#if title}
-			<h3 class={titleClasses}>{title}</h3>
+			<h3 class={titleClasses} data-testid={buildTestId('card', 'title', testId)}>{title}</h3>
 		{/if}
 		{#if children}
-			<div class={bodyClasses}>
+			<div class={bodyClasses} data-testid={buildTestId('card', 'body', testId)}>
 				{@render children()}
 			</div>
 		{/if}

package/dist/layout/card/card.d.ts

@@ -1,37 +1,36 @@
-import { Color } from '../../variants.js';
 export declare const card: import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             title: string;
             body: string;
@@ -43,37 +42,37 @@ export declare const card: import("tailwind-variants").TVReturnType<{
     body: string;
 }, undefined, {
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             title: string;
             body: string;
@@ -85,37 +84,37 @@ export declare const card: import("tailwind-variants").TVReturnType<{
     body: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             title: string;
             body: string;

package/dist/layout/card/ranked-card.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from 'tailwind-variants';
 export declare const rankedCard: import("tailwind-variants").TVReturnType<{
     columns: {
         1: {
@@ -100,5 +101,5 @@ export type RankedCardItem = {
 export type RankedCardProps = {
     items: RankedCardItem[];
     columns?: 1 | 2 | 3 | 4;
-    class?: string;
+    class?: ClassValue;
 };

package/dist/layout/navbar/Navbar.svelte

@@ -5,12 +5,19 @@
 	import { isRouteActive } from '../../helper/nav.svelte.js';
 	import { slide } from 'svelte/transition';
 	import { resolve } from '$app/paths';
+	import { buildTestId } from '../../helper/testid.js';
 
-	let { logo, links = [], class: className = '', brand, children, actions }: NavbarProps = $props();
+	let {
+		logo,
+		links = [],
+		class: className = '',
+		brand,
+		children,
+		actions,
+		testId
+	}: NavbarProps = $props();
 
 	let mobileMenuOpen = $state(false);
-	let scrolled = $state(false);
-	let isScrollingDown = $state(false);
 
 	onNavigate(() => {
 		mobileMenuOpen = false;
@@ -31,13 +38,7 @@
 		actions: actionsSlot
 	} = $derived(navbar());
 
-	const baseClass = $derived(
-		cn(base(), className, {
-			'shadow-md': scrolled,
-			'translate-y-0': !isScrollingDown || mobileMenuOpen,
-			'-translate-y-full': isScrollingDown && !mobileMenuOpen && scrolled
-		})
-	);
+	const baseClass = $derived(cn(base(), className));
 	const wrapperClasses = $derived(cn(wrapper()));
 	const containerClasses = $derived(cn(container()));
 	const brandClasses = $derived(cn(brandSlot()));
@@ -79,13 +80,9 @@
 </script>
 
 <nav
-	class={baseClass}
+	class={cn(baseClass, 'z-10')}
 	aria-label="Main navigation"
-	class:sticky={scrolled}
-	class:top-0={scrolled}
-	class:z-10={true}
-	class:transition-transform={true}
-	class:duration-300={true}
+	data-testid={buildTestId('navbar', undefined, testId)}
 >
 	<div class={wrapperClasses}>
 		<div class={containerClasses}>
@@ -112,6 +109,7 @@
 					aria-controls="mobile-menu"
 					aria-expanded={mobileMenuOpen}
 					onclick={toggleMobileMenu}
+					data-testid={buildTestId('navbar', 'toggle', testId)}
 				>
 					<span class="sr-only">Open main menu</span>
 					{#if mobileMenuOpen}

package/dist/layout/navbar/navbar.d.ts

@@ -1,7 +1,6 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { Component } from 'svelte';
-import { Size, Color } from '../../variants.js';
 export type NavbarLinkItem = {
     label: string;
     href: string;
@@ -11,21 +10,21 @@ export type NavbarLinkItem = {
 };
 export declare const navbar: import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             mobileMenuButton: string;
             link: string;
@@ -34,17 +33,17 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.SM]: {
+        sm: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
             link: string;
             mobileLink: string;
@@ -73,21 +72,21 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     divider: string;
 }, undefined, {
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             mobileMenuButton: string;
             link: string;
@@ -96,17 +95,17 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.SM]: {
+        sm: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
             link: string;
             mobileLink: string;
@@ -135,21 +134,21 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     divider: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             mobileMenuButton: string;
             link: string;
             mobileLink: string;
             selectItem: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             mobileMenuButton: string;
             link: string;
@@ -158,17 +157,17 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.SM]: {
+        sm: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.BASE]: {
+        base: {
             container: string;
             link: string;
             mobileLink: string;
         };
-        [Size.LG]: {
+        lg: {
             container: string;
             link: string;
             mobileLink: string;
@@ -203,4 +202,5 @@ export type NavbarProps = {
     brand?: Snippet;
     children?: Snippet;
     actions?: Snippet;
+    testId?: string;
 };

package/dist/layout/sidebar/Sidebar.svelte

@@ -4,8 +4,9 @@
 	import clsx from 'clsx';
 	import { isRouteActive } from '../../helper/nav.svelte.js';
 	import { resolve } from '$app/paths';
+	import { buildTestId } from '../../helper/testid.js';
 
-	let { items = [], logo, footer }: SidebarProps = $props();
+	let { items = [], logo, footer, testId }: SidebarProps = $props();
 	let menubar: MenuBar = $state({
 		collapsed: false
 	});
@@ -91,7 +92,7 @@
 	);
 </script>
 
-<div class={sidebarClasses}>
+<div class={sidebarClasses} data-testid={buildTestId('sidebar', undefined, testId)}>
 	<div class={logoWrapperClasses}>
 		<div class="flex items-center gap-x-1">
 			{#if logo.src && !menubar.collapsed}
@@ -127,7 +128,7 @@
 							</h3>
 						{/if}
 						<div class={menubar.collapsed ? '' : 'mt-2 space-y-1'}>
-							{#each item.children as child (child.label)}
+							{#each item.children as child, childIndex (child.label)}
 								<a
 									href={resolve(child.href as `/`)}
 									class="group hover:bg-default-500/10 flex w-full cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-150 ease-in-out hover:text-white {child.active
@@ -136,6 +137,7 @@
 									class:text-white={child.active}
 									class:text-default-300={!child.active}
 									title={menubar.collapsed ? child.label : ''}
+									data-testid={buildTestId('sidebar', 'item', testId, `${index}-${childIndex}`)}
 								>
 									{#if child.Icon}
 										{@const Icon = child.Icon}
@@ -161,6 +163,7 @@
 						class:text-white={item.active}
 						class:text-default-300={!item.active}
 						title={menubar.collapsed ? item.label : ''}
+						data-testid={buildTestId('sidebar', 'item', testId, index)}
 					>
 						{#if item.Icon}
 							{@const Icon = item.Icon}