@makolabs/ripple 2.5.8 → 3.0.0

package/dist/layout/table/Table.svelte

@@ -2,11 +2,13 @@
 	import { cn } from '../../helper/cls.js';
 	import { table } from './table.js';
 	import { buildTestId } from '../../helper/testid.js';
-	import { warnDeprecatedProps } from '../../helper/deprecation.js';
 	import type { TableProps, SortDirection, SortState, DataRow } from '../../index.js';
 	import Pagination from '../../elements/pagination/Pagination.svelte';
 	import Card from '../../layout/card/Card.svelte';
+	import Skeleton from '../../elements/skeleton/Skeleton.svelte';
 	import { SvelteSet } from 'svelte/reactivity';
+	import { slide } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 
 	let {
 		data = [],
@@ -24,30 +26,19 @@
 		onpagechange,
 		onpagesizechange,
 		class: classname = '',
-		wrapperclass,
-		wrapperClass = wrapperclass ?? '',
-		tableclass,
-		tableClass = tableclass ?? '',
-		theadclass,
-		theadClass = theadclass ?? '',
-		tbodyclass,
-		tbodyClass = tbodyclass ?? '',
-		trclass,
-		trClass = trclass ?? 'bg-white',
-		thclass,
-		thClass = thclass ?? '',
-		tdclass,
-		tdClass = tdclass ?? '',
-		footerclass,
-		footerClass = footerclass ?? '',
-		paginationclass,
-		paginationClass = paginationclass ?? '',
-		rowclass,
-		rowClass = rowclass ?? (() => ''),
+		wrapperClass = '',
+		tableClass = '',
+		theadClass = '',
+		tbodyClass = '',
+		trClass = 'bg-white',
+		thClass = '',
+		tdClass = '',
+		footerClass = '',
+		paginationClass = '',
+		rowClass = () => '',
 		loading = false,
 		expandedContent,
 		pagination = true,
-		showPagination = true,
 		showPageSize = false,
 		pageSizeOptions = [5, 10, 25, 50, 100],
 		paginationPosition = 'bottom',
@@ -62,34 +53,6 @@
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	}: TableProps<any> = $props();
 
-	warnDeprecatedProps(
-		'Table',
-		{
-			wrapperclass,
-			tableclass,
-			theadclass,
-			tbodyclass,
-			trclass,
-			thclass,
-			tdclass,
-			footerclass,
-			paginationclass,
-			rowclass
-		},
-		{
-			wrapperclass: 'wrapperClass',
-			tableclass: 'tableClass',
-			theadclass: 'theadClass',
-			tbodyclass: 'tbodyClass',
-			trclass: 'trClass',
-			thclass: 'thClass',
-			tdclass: 'tdClass',
-			footerclass: 'footerClass',
-			paginationclass: 'paginationClass',
-			rowclass: 'rowClass'
-		}
-	);
-
 	// Determine if we should use Card wrapper
 	const hasHeader = $derived(title !== undefined || subtitle !== undefined);
 
@@ -115,9 +78,7 @@
 
 	// Pagination is automatically determined by pageSize and pagination prop
 	const showPaginationControls = $derived(
-		pagination &&
-			showPagination &&
-			(data.length > internalPageSize || (totalItems ?? 0) > internalPageSize)
+		pagination && (data.length > internalPageSize || (totalItems ?? 0) > internalPageSize)
 	);
 
 	// Calculate total items and pages
@@ -156,6 +117,21 @@
 	const paginationClasses = $derived(cn(paginationBaseClass(), paginationClass));
 	const emptyStateClasses = $derived(emptyStateBaseClass());
 
+	/**
+	 * Map `column.hideBelow` to Tailwind classes that hide the column
+	 * below that breakpoint. Applied to both `<th>` and `<td>` so the
+	 * column disappears as a unit on narrow viewports.
+	 */
+	function hideBelowClass(hideBelow: 'sm' | 'md' | 'lg' | 'xl' | undefined): string {
+		if (!hideBelow) return '';
+		return {
+			sm: 'hidden sm:table-cell',
+			md: 'hidden md:table-cell',
+			lg: 'hidden lg:table-cell',
+			xl: 'hidden xl:table-cell'
+		}[hideBelow];
+	}
+
 	// Apply client-side sorting when no onsort handler is provided
 	const sortedData = $derived.by<DataRow[]>(() => {
 		if (onsort || !sortColumn || !sortDirection) {
@@ -228,30 +204,60 @@
 		onsort?.(newSortState);
 	}
 
+	// Synthetic per-row id used when `rowKey` isn't provided. WeakMap keys are
+	// identity-stable across Svelte 5 $state proxies, so this avoids the
+	// `state_proxy_equality_mismatch` warning that `selected.includes(row)` causes.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const rowIdMap = new WeakMap<DataRow, number>();
+	let rowIdCounter = 0;
+	function rowIdentity(row: DataRow): string | number {
+		if (rowKey) {
+			const v = row[rowKey];
+			// Only trust `rowKey` if it yields a primitive id. Falling back
+			// to the WeakMap below means a misconfigured `rowKey` (missing
+			// field, object value) still produces stable per-row identity
+			// instead of returning the same unusable value for every row.
+			if (typeof v === 'string' || typeof v === 'number') return v;
+		}
+		let id = rowIdMap.get(row);
+		if (id === undefined) {
+			id = ++rowIdCounter;
+			rowIdMap.set(row, id);
+		}
+		// Prefix synthetic IDs so they can never collide with a real
+		// numeric `rowKey` value (e.g. `id: 1`) when a dataset mixes rows
+		// that resolve `rowKey` with rows that fall back to this counter.
+		return `__table_row_fallback__${id}`;
+	}
+
+	function sameRow(a: DataRow, b: DataRow): boolean {
+		return rowIdentity(a) === rowIdentity(b);
+	}
+
 	function toggleRowSelection(row: DataRow) {
 		if (!selectable) return;
 
-		const index = rowKey
-			? selected.findIndex((r) => r[rowKey] === row[rowKey])
-			: selected.findIndex((r) => r === row);
+		const index = selected.findIndex((r) => sameRow(r, row));
 		if (index === -1) {
 			selected = [...selected, row];
 		} else {
-			selected = rowKey
-				? selected.filter((r) => r[rowKey] !== row[rowKey])
-				: selected.filter((r) => r !== row);
+			selected = selected.filter((r) => !sameRow(r, row));
 		}
 
 		onselect(selected);
 	}
 
 	function isRowSelected(row: DataRow) {
-		if (rowKey) return selected.some((r) => r[rowKey] === row[rowKey]);
-		return selected.includes(row);
+		return selected.some((r) => sameRow(r, row));
 	}
 
-	function getRowExpandKey(row: DataRow, index: number): string | number {
-		return rowKey ? row[rowKey] : index;
+	function getRowExpandKey(row: DataRow, _index: number): string | number {
+		// Share identity with selection so expanding row 0 on page 1 doesn't
+		// also expand row 0 after paging or resorting. `_index` is kept in
+		// the signature for call-site symmetry (callers have the index
+		// handy) but is deliberately unused now.
+		void _index;
+		return rowIdentity(row);
 	}
 
 	function toggleRowExpanded(row: DataRow, index: number) {
@@ -280,9 +286,7 @@
 			if (selectAllScope === 'all') {
 				selected = [];
 			} else {
-				selected = selected.filter(
-					(r) => !pageData.some((pr) => (rowKey ? pr[rowKey] === r[rowKey] : pr === r))
-				);
+				selected = selected.filter((r) => !pageData.some((pr) => sameRow(pr, r)));
 			}
 		} else {
 			if (selectAllScope === 'all') {
@@ -336,8 +340,8 @@
 					currentPage={internalCurrentPage}
 					totalItems={effectiveTotalItems}
 					pageSize={internalPageSize}
-					onPageChange={handlePageChange}
-					onPageSizeChange={handlePageSizeChange}
+					onpagechange={handlePageChange}
+					onpagesizechange={handlePageSizeChange}
 					{showPageSize}
 					{pageSizeOptions}
 					template={paginationTemplate === 'full' ? 'full' : 'compact'}
@@ -372,6 +376,7 @@
 									thClasses,
 									column.align === 'center' && 'text-center',
 									column.align === 'right' && 'text-right',
+									hideBelowClass(column.hideBelow),
 									column.class
 								)}
 								style={column.width ? `width: ${column.width}` : undefined}
@@ -442,37 +447,35 @@
 							<tr class={cn(trClasses, rowIdx % 2 === 1 && striped ? 'bg-default-50' : '')}>
 								{#if expandable && expandedContent}
 									<td class={cn(tdClasses, 'w-10')}>
-										<div class="bg-default-200 mx-auto h-4 w-4 animate-pulse rounded"></div>
+										<Skeleton class="mx-auto h-4 w-4" />
 									</td>
 								{/if}
 								{#if selectable}
 									<td class={cn(tdClasses, 'text-center')}>
-										<div class="bg-default-200 mx-auto h-4 w-4 animate-pulse rounded"></div>
+										<Skeleton class="mx-auto h-4 w-4" />
 									</td>
 								{/if}
 								{#each columns as column, colIdx (column.key)}
-									<td class={cn(tdClasses, column.class)}>
+									<td class={cn(tdClasses, hideBelowClass(column.hideBelow), column.class)}>
 										{#if colIdx === 0}
 											<div class="flex items-center gap-3">
-												<div
-													class="bg-default-200 h-8 w-8 shrink-0 animate-pulse rounded-full"
-												></div>
+												<Skeleton class="size-8 shrink-0" rounded="rounded-full" />
 												<div class="flex-1 space-y-2">
-													<div class="bg-default-200 h-3.5 w-28 animate-pulse rounded"></div>
-													<div class="bg-default-100 h-3 w-20 animate-pulse rounded"></div>
+													<Skeleton class="h-3.5 w-28" />
+													<Skeleton class="h-3 w-20" />
 												</div>
 											</div>
 										{:else if colIdx === columns.length - 1}
 											<div class="flex items-center justify-end gap-2">
-												<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
-												<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
-												<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
+												<Skeleton class="h-5 w-5" />
+												<Skeleton class="h-5 w-5" />
+												<Skeleton class="h-5 w-5" />
 											</div>
 										{:else}
-											<div
-												class="bg-default-200 h-3.5 animate-pulse rounded"
+											<Skeleton
+												class="h-3.5"
 												style="width: {60 + ((rowIdx * 17 + colIdx * 31) % 40)}%"
-											></div>
+											/>
 										{/if}
 									</td>
 								{/each}
@@ -543,6 +546,7 @@
 											tdClasses,
 											column.align === 'center' && 'text-center',
 											column.align === 'right' && 'text-right',
+											hideBelowClass(column.hideBelow),
 											column.class
 										)}
 									>
@@ -559,7 +563,9 @@
 							{#if expandedContent && (!expandable || isRowExpanded(row, rowIndex))}
 								<tr class="expandedContent-row">
 									<td colspan={totalColumnCount} class="border-0 p-0">
-										{@render expandedContent(row)}
+										<div transition:slide={{ duration: 350, easing: quintOut }}>
+											{@render expandedContent(row)}
+										</div>
 									</td>
 								</tr>
 							{/if}
@@ -575,8 +581,8 @@
 					currentPage={internalCurrentPage}
 					totalItems={effectiveTotalItems}
 					pageSize={internalPageSize}
-					onPageChange={handlePageChange}
-					onPageSizeChange={handlePageSizeChange}
+					onpagechange={handlePageChange}
+					onpagesizechange={handlePageSizeChange}
 					{showPageSize}
 					{pageSizeOptions}
 					template={paginationTemplate === 'full' ? 'full' : 'compact'}

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

@@ -1,82 +1,206 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
-export type DataRow = Record<string, any>;
+/**
+ * Default shape for a table row — any record. Consumers typically
+ * supply a stricter type via Table's generic parameter
+ * (`<Table<User> …>`).
+ */
+export type DataRow = Record<string, unknown>;
+/** Key type derived from `DataRow`. Used for column `key` references. */
 export type KeyType = keyof DataRow;
+/** Semantic status tokens recognised by the `Cells.Status` built-in renderer. */
 export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';
-export type TableColumn<T extends DataRow = any> = {
+/**
+ * Column definition for `<Table>`.
+ *
+ * @example
+ * ```ts
+ * const columns: TableColumn<User>[] = [
+ *   { key: 'name', header: 'Name', sortable: true },
+ *   { key: 'email', header: 'Email', cell: Cells.Email },
+ *   { key: 'lastSeen', header: 'Last seen', cell: Cells.DateCell, align: 'right' }
+ * ];
+ * ```
+ */
+export type TableColumn<T = DataRow> = {
+    /** Field name in the row object — used for default rendering and sort keys. */
     key: KeyType;
+    /** Column header text. */
     header: string;
+    /**
+     * Custom cell renderer. Receives `(row, key, index)`. For common cases
+     * use pre-built snippets from `Cells` (Currency, DateCell, Email, Status, etc.).
+     */
     cell?: Snippet<[row: T, key: KeyType, index?: number]>;
+    /** Enable click-to-sort on the column header. @default false */
     sortable?: boolean;
+    /**
+     * Override the sort identifier if it should differ from `key` (e.g.
+     * when multiple columns share a derived sort field).
+     */
     sortKey?: string;
+    /** Text alignment for the cells in this column. @default 'left' */
     align?: 'left' | 'center' | 'right';
+    /** CSS width value. Supports `'200px'`, `'20%'`, etc. */
     width?: string;
+    /** Classes applied to both header and cells in this column. */
     class?: ClassValue;
+    /**
+     * Hide this column below a Tailwind breakpoint. Lets you keep the
+     * most important columns visible on narrow viewports without writing
+     * responsive class strings yourself. Maps to `hidden sm:table-cell`
+     * (and equivalents for md / lg / xl). When unset, the column is
+     * always visible — the table's wrapper still allows horizontal
+     * scrolling as a fallback.
+     */
+    hideBelow?: 'sm' | 'md' | 'lg' | 'xl';
 };
+/** Sort direction. `null` = unsorted. */
 export type SortDirection = 'asc' | 'desc' | null;
+/** Current sort state — emitted by `onsort`. */
 export type SortState = {
     column: string | null;
     direction: SortDirection;
 };
-export type TableProps<T extends DataRow = any> = {
+/**
+ * Props for `<Table>` — a data table with sorting, selection, pagination,
+ * row expansion, and skeleton loading. Generic over the row type `T`.
+ *
+ * Use `<Cells.Currency>`, `<Cells.Email>`, `<Cells.DateCell>` etc. from
+ * `Cells` for common cell formatting without writing snippets yourself.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { Table, Cells } from '@makolabs/ripple';
+ *   import type { TableColumn } from '@makolabs/ripple';
+ *
+ *   const columns: TableColumn<User>[] = [
+ *     { key: 'name', header: 'Name', sortable: true },
+ *     { key: 'email', header: 'Email', cell: Cells.Email },
+ *     { key: 'createdAt', header: 'Joined', cell: Cells.DateCell }
+ *   ];
+ * </script>
+ *
+ * <Table
+ *   {columns}
+ *   data={users}
+ *   {loading}
+ *   pageSize={25}
+ *   title="Users"
+ *   onrowclick={(user) => goto(`/users/${user.id}`)}
+ * />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <!-- Selectable with expandable rows -->
+ * <Table
+ *   {columns}
+ *   data={orders}
+ *   selectable
+ *   bind:selected
+ *   expandable
+ *   rowKey="id"
+ * >
+ *   {#snippet expandedContent(row)}
+ *     <OrderLineItems orderId={row.id} />
+ *   {/snippet}
+ * </Table>
+ * ```
+ */
+export type TableProps<T = DataRow> = {
+    /** Array of rows to render. */
     data: T[];
+    /** Column definitions — see `TableColumn`. */
     columns: TableColumn<T>[];
+    /** Show horizontal/vertical borders. @default true (unless a title/subtitle is set) */
     bordered?: boolean;
+    /** Alternate row backgrounds. @default false */
     striped?: boolean;
+    /** Rows per page. @default 10 */
     pageSize?: number;
+    /** Bindable current page (1-indexed). */
     currentPage?: number;
+    /**
+     * Total item count — needed when doing server-side pagination where
+     * `data` only contains the current page.
+     */
     totalItems?: number;
+    /** Add a checkbox column and enable row selection. @default false */
     selectable?: boolean;
+    /** Bindable selected rows. */
     selected?: T[];
     class?: ClassValue;
-    /** @deprecated Use wrapperClass instead */
-    wrapperclass?: ClassValue;
+    /** Classes on the outer scroll container (default has `overflow-x-auto`). */
     wrapperClass?: ClassValue;
-    /** @deprecated Use tableClass instead */
-    tableclass?: ClassValue;
+    /** Classes on the `<table>` element. */
     tableClass?: ClassValue;
-    /** @deprecated Use theadClass instead */
-    theadclass?: ClassValue;
+    /** Classes on `<thead>`. */
     theadClass?: ClassValue;
-    /** @deprecated Use tbodyClass instead */
-    tbodyclass?: ClassValue;
+    /** Classes on `<tbody>`. */
     tbodyClass?: ClassValue;
-    /** @deprecated Use trClass instead */
-    trclass?: ClassValue;
+    /** Static classes on every `<tr>`. Use `rowClass` for per-row dynamic classes. */
     trClass?: ClassValue;
-    /** @deprecated Use thClass instead */
-    thclass?: ClassValue;
+    /** Classes on every `<th>`. */
     thClass?: ClassValue;
-    /** @deprecated Use tdClass instead */
-    tdclass?: ClassValue;
+    /** Classes on every `<td>`. */
     tdClass?: ClassValue;
-    /** @deprecated Use footerClass instead */
-    footerclass?: ClassValue;
+    /** Classes on the footer area (pagination row). */
     footerClass?: ClassValue;
-    /** @deprecated Use paginationClass instead */
-    paginationclass?: ClassValue;
+    /** Classes on the pagination control itself. */
     paginationClass?: ClassValue;
+    /** Fires when a row is clicked (ignored on checkbox cells). */
     onrowclick?: (row: T, index: number) => void;
+    /** Fires when the user changes the sort column/direction. */
     onsort?: (sortState: SortState) => void;
+    /** Fires when row selection changes (selectable mode). */
     onselect?: (selected: T[]) => void;
+    /** Fires on page change. */
     onpagechange?: (page: number) => void;
-    /** @deprecated Use rowClass instead */
-    rowclass?: (row: T, index: number) => ClassValue;
+    /** Per-row dynamic classes (e.g. tint by status). */
     rowClass?: (row: T, index: number) => ClassValue;
+    /** Show a skeleton placeholder instead of rows while loading. @default false */
     loading?: boolean;
+    /** Expanded-row content snippet. Only used when `expandable` is true. */
     expandedContent?: Snippet<[T]>;
+    /**
+     * Show pagination controls below (or above) the table when the data
+     * set exceeds `pageSize`. @default true
+     */
     pagination?: boolean;
-    showPagination?: boolean;
+    /** Show a "rows per page" selector in the pagination footer. @default false */
     showPageSize?: boolean;
+    /** Options for the page-size selector. @default [5, 10, 25, 50, 100] */
     pageSizeOptions?: number[];
+    /** Fires when the user changes the page size. */
     onpagesizechange?: (pageSize: number) => void;
+    /** Where to render pagination controls. @default 'bottom' */
     paginationPosition?: 'top' | 'bottom' | 'both';
+    /**
+     * Pagination layout:
+     * - `'simple'` — prev/next + "Page 3 of 7"
+     * - `'full'` (default) — full page-number buttons + first/last/prev/next
+     */
     paginationTemplate?: 'simple' | 'full';
+    /** Optional card title shown above the table. Auto-wraps the table in a `<Card>`. */
     title?: string;
+    /** Subtitle shown under the title. */
     subtitle?: string;
+    /** Content rendered on the right side of the header (e.g. Export button). */
     headerActions?: Snippet;
+    /**
+     * Whether "select all" picks the current page or the entire data set.
+     * `'all'` only makes sense for client-side pagination. @default 'page'
+     */
     selectAllScope?: 'page' | 'all';
+    /**
+     * Key used to deduplicate selections and track expanded rows. Required
+     * when `expandable` or `selectable` is used with an async/paged data
+     * source where array references aren't stable.
+     */
     rowKey?: string;
+    /** Allow rows to expand/collapse showing `expandedContent`. @default false */
     expandable?: boolean;
     testId?: string;
 };

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

@@ -8,7 +8,7 @@ export declare const table: import("tailwind-variants").TVReturnType<{
             th: string;
             td: string;
         };
-        base: {
+        md: {
             th: string;
             td: string;
         };
@@ -93,7 +93,7 @@ export declare const table: import("tailwind-variants").TVReturnType<{
             th: string;
             td: string;
         };
-        base: {
+        md: {
             th: string;
             td: string;
         };
@@ -178,7 +178,7 @@ export declare const table: import("tailwind-variants").TVReturnType<{
             th: string;
             td: string;
         };
-        base: {
+        md: {
             th: string;
             td: string;
         };

package/dist/layout/table/table.js

@@ -26,7 +26,7 @@ export const table = tv({
                 th: 'px-3 py-2 text-xs',
                 td: 'px-3 py-2 text-sm'
             },
-            base: {
+            md: {
                 th: 'px-4 py-3 text-sm',
                 td: 'px-4 py-3 text-sm'
             },
@@ -134,7 +134,7 @@ export const table = tv({
         }
     ],
     defaultVariants: {
-        size: 'base',
+        size: 'md',
         color: 'default',
         bordered: false,
         striped: false

package/dist/layout/tabs/Tab.svelte

@@ -2,6 +2,8 @@
 	import { cn } from '../../helper/cls.js';
 	import { tabs } from './tabs.js';
 	import { Color, Size } from '../../index.js';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 	import type { TabProps } from '../../index.js';
 	let {
 		value = '',
@@ -10,11 +12,12 @@
 		selected = false,
 		disabled = false,
 		color = Color.PRIMARY,
-		size = Size.BASE,
+		size = Size.MD,
 		onclick = () => {},
 		variant = 'line',
+		index = 0,
 		testId
-	}: TabProps = $props();
+	}: TabProps & { index?: number } = $props();
 
 	function handleClick(event: Event & { currentTarget: EventTarget & HTMLButtonElement }) {
 		event.preventDefault();
@@ -45,6 +48,7 @@
 	aria-controls={`panel-${value}`}
 	aria-selected={selected ? 'true' : 'false'}
 	data-testid={testId}
+	in:fly|global={{ y: -12, duration: 400, delay: index * 60, easing: quintOut }}
 	onclick={handleClick}
 	onkeydown={(e) => {
 		if (e.key === 'Enter' || e.key === ' ') {

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

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

package/dist/layout/tabs/TabGroup.svelte

@@ -5,13 +5,15 @@
 	import { tabs } from './tabs.js';
 	import type { TabsGroupProps } from '../../index.js';
 	import { setContext } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 	import type { VariantColors, VariantSizes } from '../../index.js';
 
 	let {
 		tabs: tabItems = [],
 		selected = $bindable(''),
 		color = 'primary' as VariantColors,
-		size = 'base' as VariantSizes,
+		size = 'md' as VariantSizes,
 		variant = 'line',
 		class: className = '',
 		listClass = '',
@@ -53,6 +55,7 @@
 				{color}
 				{size}
 				{variant}
+				{index}
 				testId={buildTestId('tabgroup', 'tab', testId, index)}
 				onclick={() => handleTabClick(tab.value)}
 			/>
@@ -60,6 +63,10 @@
 	</div>
 
 	<div class={panelClass_} data-testid={buildTestId('tabgroup', 'panel', testId)}>
-		{@render children?.(selected)}
+		{#key selected}
+			<div in:fade={{ duration: 500, easing: quintOut }}>
+				{@render children?.(selected)}
+			</div>
+		{/key}
 	</div>
 </div>