@makolabs/ripple 3.7.1 → 3.8.1

package/dist/elements/accordion/Accordion.svelte

@@ -26,6 +26,7 @@
 		header,
 		children,
 		icon: Icon,
+		iconPosition = 'start',
 		testId
 	}: AccordionProps = $props();
 
@@ -109,7 +110,7 @@
 
 {#snippet accordionHeaderContent()}
 	<div class="flex items-start justify-start gap-3">
-		{#if Icon}
+		{#if Icon && iconPosition === 'start'}
 			<Icon class="text-default-500 size-5" />
 		{/if}
 		<div class="flex flex-col items-start text-left">
@@ -120,6 +121,9 @@
 				<p class="text-default-500 text-xs font-normal">{description}</p>
 			{/if}
 		</div>
+		{#if Icon && iconPosition === 'end'}
+			<Icon class="text-default-500 size-5" />
+		{/if}
 	</div>
 	{@render summary?.()}
 {/snippet}

package/dist/elements/dropdown/Select.svelte

@@ -26,6 +26,7 @@
 		multiple = false,
 		placeholder = 'Select an option',
 		searchable = false,
+		clearable = false,
 		disabled = false,
 		size = Size.MD,
 		class: className = '',
@@ -95,6 +96,7 @@
 			items.find((i) => i.value === value)
 	);
 	const selectedItems = $derived(items.filter((i) => valueArray.includes(i.value)));
+	const hasSelection = $derived(valueArray.some((v) => v !== ''));
 
 	const filteredItems = $derived.by<SelectItem[]>(() => {
 		if (isAsync) return asyncResults;
@@ -215,6 +217,15 @@
 		}
 	}
 
+	function handleClear(event: MouseEvent) {
+		// Don't let the click bubble to the trigger and open the dropdown.
+		event.stopPropagation();
+		event.preventDefault();
+		if (disabled) return;
+		value = multiple ? [] : '';
+		onselect({ value });
+	}
+
 	function handleClickOutside(event: MouseEvent) {
 		if (!open) return;
 		// On mobile the sheet handles its own close via backdrop.
@@ -385,6 +396,24 @@
 	</span>
 
 	<span class="ml-auto flex flex-shrink-0 items-center pl-2">
+		{#if clearable && hasSelection && !disabled}
+			<button
+				type="button"
+				onclick={handleClear}
+				aria-label="Clear selection"
+				class="text-default-400 hover:text-default-700 relative z-10 mr-1 flex size-5 cursor-pointer items-center justify-center rounded"
+				data-testid={buildTestId('select', 'clear', testId)}
+			>
+				<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+					<path
+						d="M3 3l6 6M9 3l-6 6"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</button>
+		{/if}
 		{#if Icon}
 			<Icon class={triggerIconClass} />
 		{:else}

package/dist/elements/file-upload/FileUpload.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import { fileUpload } from './file-upload.js';
 	import Button from '../../button/Button.svelte';
 	import Spinner from '../spinner/Spinner.svelte';
@@ -25,7 +26,8 @@
 		clearButtonLabel = 'Clear All',
 		filesListLabel = 'Selected files',
 		listMaxHeight = 'max-h-64',
-		header
+		header,
+		testId
 	}: FileUploadProps = $props();
 
 	const slots = $derived(fileUpload({ size }));
@@ -169,7 +171,10 @@
 	}
 </script>
 
-<div class={cn('flex w-full flex-col gap-4', className)}>
+<div
+	class={cn('flex w-full flex-col gap-4', className)}
+	data-testid={testId ? buildTestId('fileupload', undefined, testId) : undefined}
+>
 	{#if header}
 		{@render header()}
 	{/if}
@@ -191,6 +196,7 @@
 		ondrop={handleDrop}
 		for={id}
 		data-dropzone-full={dropzoneFull ? 'true' : undefined}
+		data-testid={testId ? buildTestId('fileupload', 'dropzone', testId) : undefined}
 	>
 		<input
 			type="file"
@@ -200,6 +206,7 @@
 			disabled={!dropzoneEnabled}
 			class="hidden"
 			onchange={handleInputChange}
+			data-testid={testId ? buildTestId('fileupload', 'input', testId) : undefined}
 			{id}
 		/>
 
@@ -327,12 +334,13 @@
 					listMaxHeight
 				)}
 			>
-				{#each files as stagedFile (stagedFile.id)}
+				{#each files as stagedFile, rowIndex (stagedFile.id)}
 					{@const status = stagedFile.status ?? 'ready'}
 					<li
 						class={cn('flex items-center gap-3 px-3 py-2', status === 'success' && 'opacity-60')}
 						data-fileupload-row=""
 						data-status={status}
+						data-testid={testId ? buildTestId('fileupload', 'row', testId, rowIndex) : undefined}
 						transition:fade={{ duration: 300, easing: quintOut }}
 						animate:flip={{ duration: 350, easing: quintOut }}
 					>

package/dist/elements/file-upload/FilesPreview.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import type { FilePreviewProps } from '../../index.js';
 
-	let { files = [], ondelete, class: className = '' }: FilePreviewProps = $props();
+	let { files = [], ondelete, class: className = '', testId }: FilePreviewProps = $props();
 
 	function formatFileSize(bytes: number): string {
 		if (bytes === 0) return '0 B';
@@ -14,9 +15,13 @@
 </script>
 
 {#if files.length > 0}
-	<ul class={cn('mt-6 space-y-3', className)}>
+	<ul
+		class={cn('mt-6 space-y-3', className)}
+		data-testid={buildTestId('filespreview', undefined, testId)}
+	>
 		{#each files as file, i (i)}
 			<li
+				data-testid={buildTestId('filespreview', 'item', testId, i)}
 				class={cn('flex items-center justify-between rounded-xl p-4 ring-4', {
 					'bg-danger-50 ring-danger-100': file.status === 'error',
 					'bg-success-50 ring-success-100': file.status === 'success',
@@ -71,6 +76,7 @@
 
 				<button
 					type="button"
+					data-testid={buildTestId('filespreview', 'delete', testId, i)}
 					aria-label="Delete file"
 					class={cn('ml-4 flex size-6 cursor-pointer items-center justify-center rounded-lg', {
 						'bg-danger-100 text-danger-500': file.status === 'error',

package/dist/file-browser/FileBrowser.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import { Button, Table, Color, Size, Spinner, Skeleton } from '../index.js';
 	import type { TableColumn, FileBrowserProps } from '../index.js';
 	import { formatDate } from '../utils/dateUtils.js';
@@ -22,10 +23,15 @@
 		isSelectable,
 		height = 'h-[500px]',
 		class: className = '',
+		testId,
 		selectedItems = $bindable<FileItem[]>([]),
 		selectedFiles = $bindable<string[]>([])
 	}: FileBrowserProps = $props();
 
+	// Namespaced testId forwarded to the inner Table so its data-testids are
+	// prefixed under the FileBrowser's own id (e.g. `{testId}-filebrowser-table-row-0`).
+	const tableTestId = $derived(testId ? buildTestId('filebrowser', undefined, testId) : undefined);
+
 	let files = $state<FileItem[]>([]);
 	let displayFiles = $state<FileItem[]>([]);
 	let currentPath = $state(startPath || '');
@@ -767,6 +773,7 @@
 		height,
 		className
 	)}
+	data-testid={testId ? buildTestId('filebrowser', undefined, testId) : undefined}
 >
 	<div class="flex min-w-0 flex-1 flex-col">
 		{#if !isAuthenticated && adapter.authenticate}
@@ -960,6 +967,7 @@
 						{selectAllScope}
 						{onselect}
 						{selected}
+						testId={tableTestId}
 					/>
 				{/if}
 			</div>

package/dist/filters/CompactFilters.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import type {
 		FilterTab,
 		FilterGroup,
@@ -24,7 +25,8 @@
 		class: className,
 		summaryClass,
 		expandedClass,
-		FilterIcon
+		FilterIcon,
+		testId
 	}: CompactFiltersProps = $props();
 
 	// Search input only renders when the consumer bound to searchQuery.
@@ -187,7 +189,10 @@
 	</svg>
 {/snippet}
 
-<div class={cn(card && 'border-default-200 rounded-lg border bg-white p-3 shadow-sm', className)}>
+<div
+	class={cn(card && 'border-default-200 rounded-lg border bg-white p-3 shadow-sm', className)}
+	data-testid={testId ? buildTestId('compact-filters', undefined, testId) : undefined}
+>
 	{#if card || expandable}
 		<!-- Header row: title | search | clear | chevron -->
 		<div class="mb-2 flex flex-wrap items-center gap-2">
@@ -214,6 +219,7 @@
 						placeholder={searchPlaceholder}
 						bind:value={searchQuery}
 						data-filters-search=""
+						data-testid={testId ? buildTestId('compact-filters', 'search', testId) : undefined}
 					/>
 					{#if searchQuery}
 						<button
@@ -222,6 +228,9 @@
 							class="text-default-400 hover:text-default-700 absolute top-1/2 right-1 flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded"
 							aria-label="Clear search"
 							data-filters-search-clear=""
+							data-testid={testId
+								? buildTestId('compact-filters', 'search-clear', testId)
+								: undefined}
 						>
 							<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
 								<path
@@ -242,6 +251,7 @@
 					onclick={clearAll}
 					class="text-default-600 hover:bg-default-100 cursor-pointer rounded-md px-2 py-1 text-xs font-medium"
 					data-filters-clear-all=""
+					data-testid={testId ? buildTestId('compact-filters', 'clear-all', testId) : undefined}
 				>
 					{clearAllLabel}
 				</button>
@@ -269,10 +279,11 @@
 	{#if !isExpanded}
 		<div class={cn('flex flex-wrap gap-2', summaryClass)}>
 			{#if chipSummary}
-				{#each chips as chip (chip.key + '::' + chip.value)}
+				{#each chips as chip, index (chip.key + '::' + chip.value)}
 					<span
 						class="bg-primary-50 text-primary-700 border-primary-200 flex items-center gap-1 rounded-full border px-2 py-1 text-xs"
 						data-filters-chip=""
+						data-testid={testId ? buildTestId('compact-filters', 'chip', testId, index) : undefined}
 					>
 						<span class="font-medium">{chip.groupLabel}:</span>
 						<span>{chip.label}</span>

package/dist/funcs/clerk-requests.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Pure builders for Clerk user-API requests, extracted from
+ * `user-management.remote.ts` so the request shape is unit-testable — a
+ * `*.remote.ts` module cannot be imported in vitest (SvelteKit's plugin rejects
+ * any non-remote export).
+ *
+ * They also document the rule that caused minted API keys to silently never
+ * persist: Clerk deprecated sending `private_metadata` in the body of
+ * `PATCH /users/{id}` (it now returns 422 `form_param_deprecated`). User
+ * metadata must be written through the dedicated `PATCH /users/{id}/metadata`
+ * endpoint, which merges into the existing metadata.
+ */
+export interface ClerkRequest {
+    endpoint: string;
+    init: {
+        method: string;
+        body: string;
+    };
+}
+/**
+ * Build a request that persists `privateMetadata` on a Clerk user via the
+ * dedicated metadata endpoint. Clerk merges the provided keys into the user's
+ * existing private metadata.
+ */
+export declare function clerkMetadataPatch(userId: string, privateMetadata: Record<string, unknown>): ClerkRequest;
+/**
+ * Build the body for a profile update (`PATCH /users/{id}`). Metadata is
+ * intentionally excluded — it must go through {@link clerkMetadataPatch}.
+ */
+export declare function clerkProfilePatchBody(userData: {
+    first_name?: string;
+    last_name?: string;
+    username?: string;
+}): Record<string, string>;

package/dist/funcs/clerk-requests.js

@@ -0,0 +1,38 @@
+/**
+ * Pure builders for Clerk user-API requests, extracted from
+ * `user-management.remote.ts` so the request shape is unit-testable — a
+ * `*.remote.ts` module cannot be imported in vitest (SvelteKit's plugin rejects
+ * any non-remote export).
+ *
+ * They also document the rule that caused minted API keys to silently never
+ * persist: Clerk deprecated sending `private_metadata` in the body of
+ * `PATCH /users/{id}` (it now returns 422 `form_param_deprecated`). User
+ * metadata must be written through the dedicated `PATCH /users/{id}/metadata`
+ * endpoint, which merges into the existing metadata.
+ */
+/**
+ * Build a request that persists `privateMetadata` on a Clerk user via the
+ * dedicated metadata endpoint. Clerk merges the provided keys into the user's
+ * existing private metadata.
+ */
+export function clerkMetadataPatch(userId, privateMetadata) {
+    return {
+        endpoint: `/users/${userId}/metadata`,
+        init: { method: 'PATCH', body: JSON.stringify({ private_metadata: privateMetadata }) }
+    };
+}
+/**
+ * Build the body for a profile update (`PATCH /users/{id}`). Metadata is
+ * intentionally excluded — it must go through {@link clerkMetadataPatch}.
+ */
+export function clerkProfilePatchBody(userData) {
+    const body = {};
+    if (userData.first_name !== undefined)
+        body.first_name = userData.first_name;
+    if (userData.last_name !== undefined)
+        body.last_name = userData.last_name;
+    if (userData.username !== undefined && userData.username !== '') {
+        body.username = userData.username;
+    }
+    return body;
+}

package/dist/funcs/user-management.remote.js

@@ -2,6 +2,7 @@ import { command } from '$app/server';
 import { getRequestEvent } from '$app/server';
 import { env } from '$env/dynamic/private';
 import { building } from '$app/environment';
+import { clerkMetadataPatch, clerkProfilePatchBody } from './clerk-requests.js';
 const CLIENT_ID = env.CLIENT_ID;
 const ORGANIZATION_ID = env.ALLOWED_ORG_ID;
 if (!CLIENT_ID && !building) {
@@ -248,6 +249,16 @@ async function createUserPermissions(email, permissions, clientId = CLIENT_ID) {
     log.trace('createUserPermissions', 'Result:', result);
     return result;
 }
+/**
+ * Persist private metadata on a Clerk user via the dedicated metadata endpoint.
+ * Clerk deprecated `private_metadata` in the body of `PATCH /users/{id}` (it
+ * now returns 422 form_param_deprecated), which silently dropped minted API
+ * keys. Routes through `PATCH /users/{id}/metadata` (which merges) instead.
+ */
+async function writeClerkMetadata(userId, privateMetadata) {
+    const { endpoint, init } = clerkMetadataPatch(userId, privateMetadata);
+    return makeClerkRequest(endpoint, init);
+}
 export const getUsers = command('unchecked', async (options) => {
     log.trace('getUsers', 'Called with options:', options);
     try {
@@ -347,14 +358,9 @@ export const createUser = command('unchecked', async (userData) => {
                 const apiKey = adminKeyResult?.data?.key;
                 log.trace('createUser', 'Admin key created, has key:', !!apiKey);
                 if (adminKeyResult && apiKey) {
-                    const updatedUser = await makeClerkRequest(`/users/${result.id}`, {
-                        method: 'PATCH',
-                        body: JSON.stringify({
-                            private_metadata: {
-                                ...result.private_metadata,
-                                mako_api_key: apiKey
-                            }
-                        })
+                    const updatedUser = await writeClerkMetadata(result.id, {
+                        ...result.private_metadata,
+                        mako_api_key: apiKey
                     });
                     // Ensure updatedUser is serializable
                     result = JSON.parse(JSON.stringify(updatedUser));
@@ -385,22 +391,19 @@ export const updateUser = command('unchecked', async (options) => {
     const { userId, userData } = options;
     log.trace('updateUser', 'Called for userId:', userId, 'fields:', Object.keys(userData));
     try {
-        const updateData = {};
-        if (userData.first_name !== undefined)
-            updateData.first_name = userData.first_name;
-        if (userData.last_name !== undefined)
-            updateData.last_name = userData.last_name;
-        if (userData.username !== undefined && userData.username !== '') {
-            updateData.username = userData.username;
-        }
+        // Profile fields and metadata live behind different Clerk endpoints —
+        // `private_metadata` is no longer accepted on PATCH /users/{id}.
+        const profileBody = clerkProfilePatchBody(userData);
+        log.trace('updateUser', 'Profile payload:', profileBody);
+        let result = Object.keys(profileBody).length > 0
+            ? await makeClerkRequest(`/users/${userId}`, {
+                method: 'PATCH',
+                body: JSON.stringify(profileBody)
+            })
+            : await makeClerkRequest(`/users/${userId}`);
         if (userData.private_metadata !== undefined) {
-            updateData.private_metadata = userData.private_metadata;
+            result = await writeClerkMetadata(userId, userData.private_metadata);
         }
-        log.trace('updateUser', 'Update payload:', updateData);
-        let result = await makeClerkRequest(`/users/${userId}`, {
-            method: 'PATCH',
-            body: JSON.stringify(updateData)
-        });
         // Ensure result is serializable
         result = JSON.parse(JSON.stringify(result));
         if (userData.permissions !== undefined) {
@@ -572,14 +575,9 @@ export const updateUserPermissions = command('unchecked', async (options) => {
             const newKeyResult = await createUserPermissions(email, permissions);
             const newApiKey = newKeyResult?.data?.key;
             if (newApiKey) {
-                await makeClerkRequest(`/users/${userId}`, {
-                    method: 'PATCH',
-                    body: JSON.stringify({
-                        private_metadata: {
-                            ...(user.private_metadata || {}),
-                            mako_api_key: newApiKey
-                        }
-                    })
+                await writeClerkMetadata(userId, {
+                    ...(user.private_metadata || {}),
+                    mako_api_key: newApiKey
                 });
                 log.trace('updateUserPermissions', 'New key stored in Clerk metadata');
             }
@@ -742,14 +740,9 @@ export const generateApiKey = command('unchecked', async (options) => {
                 currentUser = await makeClerkRequest(`/users/${options.userId}`);
             }
             if (currentUser) {
-                await makeClerkRequest(`/users/${options.userId}`, {
-                    method: 'PATCH',
-                    body: JSON.stringify({
-                        private_metadata: {
-                            ...(currentUser.private_metadata || {}),
-                            mako_api_key: newApiKey
-                        }
-                    })
+                await writeClerkMetadata(options.userId, {
+                    ...(currentUser.private_metadata || {}),
+                    mako_api_key: newApiKey
                 });
                 log.trace('generateApiKey', 'Clerk metadata updated with new key');
             }
@@ -874,11 +867,9 @@ export const approveUser = command('unchecked', async (input) => {
         if (!apiKey) {
             throw new Error('Failed to mint API key during approval');
         }
-        await makeClerkRequest(`/users/${input.userId}`, {
-            method: 'PATCH',
-            body: JSON.stringify({
-                private_metadata: { ...(user.private_metadata || {}), mako_api_key: apiKey }
-            })
+        await writeClerkMetadata(input.userId, {
+            ...(user.private_metadata || {}),
+            mako_api_key: apiKey
         });
         log.trace('approveUser', 'Approved and key issued');
         return JSON.parse(JSON.stringify({ apiKey }));

package/dist/header/PageHeader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import type { PageHeaderProps } from '../index.js';
 	import Breadcrumbs from './Breadcrumbs.svelte';
 
@@ -10,7 +11,8 @@
 		children,
 		class: className = '',
 		titleClass = '',
-		layout = 'vertical'
+		layout = 'vertical',
+		testId
 	}: PageHeaderProps = $props();
 
 	const defaultTitleClasses =
@@ -19,9 +21,13 @@
 	const hasBreadcrumbs = $derived(breadcrumbs && breadcrumbs.length > 0);
 	const titleClasses = $derived(cn(defaultTitleClasses, titleClass));
 	const containerClass = $derived(cn('space-y-4', className as string));
+
+	// Root data-testid for the whole header; the Breadcrumbs child receives a
+	// prefixed testId so its selectors nest under this header's namespace.
+	const rootTestId = $derived(testId ? buildTestId('pageheader', undefined, testId) : undefined);
 </script>
 
-<div class="pb-4">
+<div class="pb-4" data-testid={rootTestId}>
 	{#if layout === 'horizontal'}
 		<div
 			class="flex flex-col space-y-3 md:flex-row md:items-start md:justify-between md:space-y-0 {className}"
@@ -29,7 +35,7 @@
 			<!-- Title and subtitle grouped together as one unit -->
 			<div class="min-w-0 flex-1 gap-4">
 				{#if hasBreadcrumbs}
-					<Breadcrumbs items={breadcrumbs} />
+					<Breadcrumbs items={breadcrumbs} testId={rootTestId} />
 				{/if}
 				<h2 class={titleClasses}>{title}</h2>
 				{#if subtitle}
@@ -52,7 +58,7 @@
 			<!-- Title and subtitle grouped together -->
 			<div class="min-w-0 gap-4">
 				{#if hasBreadcrumbs}
-					<Breadcrumbs items={breadcrumbs} />
+					<Breadcrumbs items={breadcrumbs} testId={rootTestId} />
 				{/if}
 				<h2 class={titleClasses}>{title}</h2>
 				{#if subtitle}

package/dist/layout/sidebar/NavGroup.svelte

@@ -2,12 +2,14 @@
 	import { getContext } from 'svelte';
 	import type { MenuBar, NavGroupProps } from '../../index.js';
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 
 	let {
 		labelArea,
 		children,
 		class: className = '',
-		active: isActive = false
+		active: isActive = false,
+		testId
 	}: NavGroupProps = $props();
 
 	function toggle() {
@@ -58,7 +60,7 @@
 	);
 </script>
 
-<div>
+<div data-testid={buildTestId('navgroup', undefined, testId)}>
 	<button type="button" class={navGroupClasses} onclick={toggle}>
 		{@render labelArea(labelClasses, iconClasses)}
 		{@render ChevronIcon(chevronIconClasses, 0.7)}

package/dist/layout/sidebar/NavItem.svelte

@@ -3,9 +3,10 @@
 	import { getContext } from 'svelte';
 	import type { MenuBar, NavItemProps } from '../../index.js';
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import { resolve } from '$app/paths';
 
-	let { href, children, active, class: className = '' }: NavItemProps = $props();
+	let { href, children, active, class: className = '', testId }: NavItemProps = $props();
 
 	const menubar: MenuBar = getContext('menubar');
 
@@ -25,6 +26,10 @@
 	);
 </script>
 
-<a href={resolve(href as `/`)} class={navItemClasses}>
+<a
+	href={resolve(href as `/`)}
+	class={navItemClasses}
+	data-testid={buildTestId('navitem', undefined, testId)}
+>
 	{@render children?.(navChildrenClasses)}
 </a>

package/dist/layout/tabs/Tab.svelte

@@ -16,8 +16,9 @@
 		onclick = () => {},
 		variant = 'line',
 		index = 0,
+		class: className = '',
 		testId
-	}: TabProps & { index?: number } = $props();
+	}: TabProps & { index?: number; class?: string } = $props();
 
 	function handleClick(event: Event & { currentTarget: EventTarget & HTMLButtonElement }) {
 		event.preventDefault();
@@ -35,7 +36,7 @@
 		})
 	);
 
-	const triggerClass = $derived(cn(trigger()));
+	const triggerClass = $derived(cn(trigger(), className));
 </script>
 
 <button

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

@@ -1,6 +1,7 @@
 import type { TabProps } from '../../index.js';
 type $$ComponentProps = TabProps & {
     index?: number;
+    class?: string;
 };
 declare const Tab: import("svelte").Component<$$ComponentProps, {}, "">;
 type Tab = ReturnType<typeof Tab>;

package/dist/layout/tabs/TabGroup.svelte

@@ -17,6 +17,7 @@
 		variant = 'line',
 		class: className = '',
 		listClass = '',
+		triggerClass = '',
 		panelClass = '',
 		onchange = () => {},
 		children,
@@ -33,6 +34,7 @@
 
 	const baseClass = $derived(cn(base(), className));
 	const listClass_ = $derived(cn(list(), listClass));
+	const triggerClass_ = $derived(cn(triggerClass));
 	const panelClass_ = $derived(cn(panel(), panelClass));
 
 	function handleTabClick(value: string) {
@@ -56,6 +58,7 @@
 				{size}
 				{variant}
 				{index}
+				class={triggerClass_}
 				testId={buildTestId('tabgroup', 'tab', testId, index)}
 				onclick={() => handleTabClick(tab.value)}
 			/>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "3.7.1",
+	"version": "3.8.1",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -139,7 +139,8 @@
 		"uuid": ">=11.1.1",
 		"devalue": ">=5.8.1",
 		"fast-xml-builder": ">=1.1.7",
-		"esbuild": ">=0.28.1"
+		"esbuild": ">=0.28.1",
+		"cookie": ">=0.7.0 <1.0.0"
 	},
 	"dependencies": {
 		"@aws-sdk/client-s3": "^3.1029.0",