@makolabs/ripple 3.0.6 → 3.0.8

package/dist/elements/accordion/Accordion.svelte

@@ -117,7 +117,7 @@
 				<h3 class={cn(styles.title(), titleClass)}>{title}</h3>
 			{/if}
 			{#if description}
-				<p class="text-default-500 text-xs whitespace-nowrap">{description}</p>
+				<p class="text-default-500 text-xs font-normal">{description}</p>
 			{/if}
 		</div>
 	</div>

package/dist/elements/accordion/accordion.d.ts

@@ -3,52 +3,52 @@ export declare const accordion: import("tailwind-variants").TVReturnType<{
         default: {
             base: string;
             header: string;
-            body: string;
+            title: string;
         };
         primary: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         secondary: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         success: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         warning: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         danger: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         info: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
     };
     open: {
-        true: {
-            base: string;
-            title: string;
-        };
-        false: {
-            base: string;
-        };
+        true: {};
+        false: {};
     };
     bordered: {
         true: {
             base: string;
-            body: string;
         };
         false: {
             base: string;
@@ -56,11 +56,9 @@ export declare const accordion: import("tailwind-variants").TVReturnType<{
     };
     hasChildren: {
         true: {
-            base: string;
             header: string;
         };
         false: {
-            base: string;
             header: string;
         };
     };
@@ -78,52 +76,52 @@ export declare const accordion: import("tailwind-variants").TVReturnType<{
         default: {
             base: string;
             header: string;
-            body: string;
+            title: string;
         };
         primary: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         secondary: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         success: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         warning: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         danger: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         info: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
     };
     open: {
-        true: {
-            base: string;
-            title: string;
-        };
-        false: {
-            base: string;
-        };
+        true: {};
+        false: {};
     };
     bordered: {
         true: {
             base: string;
-            body: string;
         };
         false: {
             base: string;
@@ -131,11 +129,9 @@ export declare const accordion: import("tailwind-variants").TVReturnType<{
     };
     hasChildren: {
         true: {
-            base: string;
             header: string;
         };
         false: {
-            base: string;
             header: string;
         };
     };
@@ -153,52 +149,52 @@ export declare const accordion: import("tailwind-variants").TVReturnType<{
         default: {
             base: string;
             header: string;
-            body: string;
+            title: string;
         };
         primary: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         secondary: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         success: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         warning: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         danger: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
         info: {
             base: string;
             header: string;
+            body: string;
             title: string;
         };
     };
     open: {
-        true: {
-            base: string;
-            title: string;
-        };
-        false: {
-            base: string;
-        };
+        true: {};
+        false: {};
     };
     bordered: {
         true: {
             base: string;
-            body: string;
         };
         false: {
             base: string;
@@ -206,11 +202,9 @@ export declare const accordion: import("tailwind-variants").TVReturnType<{
     };
     hasChildren: {
         true: {
-            base: string;
             header: string;
         };
         false: {
-            base: string;
             header: string;
         };
     };

package/dist/elements/accordion/accordion.js

@@ -1,77 +1,71 @@
 import { tv } from '../../helper/cls.js';
 import { Color } from '../../variants.js';
+// Visual language mirrors <Card> at md size: rounded-lg, border, shadow-sm,
+// translucent header tint over a white body, hairline separator. Differs from
+// Card in two ways: (1) the header is a clickable button with a hover state,
+// and (2) the body slides open/closed instead of being always-visible.
 export const accordion = tv({
     slots: {
-        base: 'w-full relative overflow-hidden rounded-xl transition-all duration-200 bg-white border border-default-200',
-        header: 'w-full flex cursor-pointer items-center justify-between p-4 transition-colors duration-200',
-        title: 'flex text-default-900 text-lg font-medium leading-tight',
-        body: 'w-full border-t border-default-200 p-4 pt-3 transition-all'
+        base: 'w-full relative overflow-hidden rounded-lg bg-white border border-default-200 shadow-sm transition-all duration-200',
+        header: 'w-full flex items-center justify-between px-4 py-2.5 transition-colors duration-200 bg-default-100/50',
+        title: 'text-default-900 text-sm font-semibold leading-tight',
+        body: 'w-full border-t border-default-200 p-4 transition-all'
     },
     variants: {
         color: {
             [Color.DEFAULT]: {
-                base: 'bg-white hover:border-default-300',
-                header: '',
-                body: ''
+                base: 'bg-white',
+                header: 'bg-default-100/50',
+                title: 'text-default-900'
             },
             [Color.PRIMARY]: {
-                base: 'bg-primary-50/50 hover:border-primary-300',
-                header: 'text-primary-700',
-                title: 'text-primary-700'
+                base: 'bg-primary-50/30 border-primary-200',
+                header: 'bg-primary-100/40 border-primary-200',
+                body: 'border-primary-200',
+                title: 'text-primary-900'
             },
             [Color.SECONDARY]: {
-                base: 'bg-secondary-50/50 hover:border-secondary-300',
-                header: 'text-secondary-700',
-                title: 'text-secondary-700'
+                base: 'bg-secondary-50/30 border-secondary-200',
+                header: 'bg-secondary-100/40 border-secondary-200',
+                body: 'border-secondary-200',
+                title: 'text-secondary-900'
             },
             [Color.SUCCESS]: {
-                base: 'bg-success-50/50 hover:border-success-300',
-                header: 'text-success-700',
-                title: 'text-success-700'
+                base: 'bg-success-50/30 border-success-200',
+                header: 'bg-success-100/40 border-success-200',
+                body: 'border-success-200',
+                title: 'text-success-900'
             },
             [Color.WARNING]: {
-                base: 'bg-warning-50/50 hover:border-warning-300',
-                header: 'text-warning-700',
-                title: 'text-warning-700'
+                base: 'bg-warning-50/30 border-warning-200',
+                header: 'bg-warning-100/40 border-warning-200',
+                body: 'border-warning-200',
+                title: 'text-warning-900'
             },
             [Color.DANGER]: {
-                base: 'bg-danger-50/50 hover:border-danger-300',
-                header: 'text-danger-700',
-                title: 'text-danger-700'
+                base: 'bg-danger-50/30 border-danger-200',
+                header: 'bg-danger-100/40 border-danger-200',
+                body: 'border-danger-200',
+                title: 'text-danger-900'
             },
             [Color.INFO]: {
-                base: 'bg-info-50/50 hover:border-info-300',
-                header: 'text-info-700',
-                title: 'text-info-700'
+                base: 'bg-info-50/30 border-info-200',
+                header: 'bg-info-100/40 border-info-200',
+                body: 'border-info-200',
+                title: 'text-info-900'
             }
         },
         open: {
-            true: {
-                base: 'shadow-sm',
-                title: 'text-default-900'
-            },
-            false: {
-                base: ''
-            }
+            true: {},
+            false: {}
         },
         bordered: {
-            true: {
-                base: 'border border-default-200',
-                body: 'border-t'
-            },
-            false: {
-                base: 'shadow-sm'
-            }
+            true: { base: 'border' },
+            false: { base: 'border-0' }
         },
         hasChildren: {
-            true: {
-                base: 'hover:shadow-md',
-                header: 'hover:bg-default-50'
-            },
-            false: {
-                base: 'hover:shadow-none',
-                header: 'cursor-default'
-            }
+            true: { header: 'cursor-pointer' },
+            false: { header: 'cursor-default' }
         },
         iconPosition: {
             start: {},
@@ -79,54 +73,14 @@ export const accordion = tv({
         }
     },
     compoundVariants: [
-        {
-            open: true,
-            class: {
-                header: 'border-b-0'
-            }
-        },
-        {
-            hasChildren: true,
-            color: Color.PRIMARY,
-            class: {
-                header: 'hover:bg-primary-50'
-            }
-        },
-        {
-            hasChildren: true,
-            color: Color.SECONDARY,
-            class: {
-                header: 'hover:bg-secondary-50'
-            }
-        },
-        {
-            hasChildren: true,
-            color: Color.SUCCESS,
-            class: {
-                header: 'hover:bg-success-50'
-            }
-        },
-        {
-            hasChildren: true,
-            color: Color.WARNING,
-            class: {
-                header: 'hover:bg-warning-50'
-            }
-        },
-        {
-            hasChildren: true,
-            color: Color.DANGER,
-            class: {
-                header: 'hover:bg-danger-50'
-            }
-        },
-        {
-            hasChildren: true,
-            color: Color.INFO,
-            class: {
-                header: 'hover:bg-info-50'
-            }
-        }
+        // Hover states only when the header is interactive.
+        { hasChildren: true, color: Color.DEFAULT, class: { header: 'hover:bg-default-100/80' } },
+        { hasChildren: true, color: Color.PRIMARY, class: { header: 'hover:bg-primary-100/70' } },
+        { hasChildren: true, color: Color.SECONDARY, class: { header: 'hover:bg-secondary-100/70' } },
+        { hasChildren: true, color: Color.SUCCESS, class: { header: 'hover:bg-success-100/70' } },
+        { hasChildren: true, color: Color.WARNING, class: { header: 'hover:bg-warning-100/70' } },
+        { hasChildren: true, color: Color.DANGER, class: { header: 'hover:bg-danger-100/70' } },
+        { hasChildren: true, color: Color.INFO, class: { header: 'hover:bg-info-100/70' } }
     ],
     defaultVariants: {
         color: Color.DEFAULT,

package/dist/elements/combobox/ComboBox.svelte

@@ -180,7 +180,7 @@
 				oninput={handleInput}
 				onfocus={openMenu}
 				onkeydown={handleKey}
-				class="flex-1 bg-transparent outline-none"
+				class="min-w-0 flex-1 bg-transparent outline-none"
 				data-testid={buildTestId('combobox', undefined, testId)}
 			/>
 			{#if clearable && value && !disabled}

package/dist/elements/popover/Popover.svelte

@@ -47,6 +47,11 @@
 
 	const useSheet = $derived(isMobile && trigger !== 'hover');
 
+	// Manual triggers are used by form controls (MonthPicker, DatePicker, ComboBox)
+	// that need to fill their parent's width. Click/hover triggers stay inline so
+	// tooltips and menus from buttons/icons size to content.
+	const triggerWrapperClass = $derived(trigger === 'manual' ? 'flex w-full' : 'inline-flex');
+
 	function show() {
 		if (disabled) return;
 		clearTimeout(showTimer);
@@ -183,7 +188,7 @@
 
 <span
 	bind:this={wrapper}
-	class={cn('relative inline-flex', className)}
+	class={cn('relative', triggerWrapperClass, className)}
 	data-testid={buildTestId('popover', undefined, testId)}
 >
 	{#if trigger === 'click'}
@@ -204,7 +209,7 @@
 			{@render children()}
 		</span>
 	{:else}
-		<span class="inline-flex">{@render children()}</span>
+		<span class={triggerWrapperClass}>{@render children()}</span>
 	{/if}
 </span>
 

package/dist/forms/SegmentedControl.svelte

@@ -6,7 +6,11 @@
 	import { segmentedLabelClasses, segmentedTrack, segmentClasses } from './segmented-control.js';
 	import type { SegmentedControlProps, VariantColors, VariantSizes } from '../index.js';
 
-	const groupId = `seg-${Math.random().toString(36).slice(2, 11)}`;
+	// Stable ID across SSR and CSR — using Math.random() here would mismatch
+	// between the server-rendered HTML and client hydration, triggering Svelte
+	// hydration warnings and (in some cases) DOM re-claim.
+	const instanceId = $props.id();
+	const groupId = `seg-${instanceId}`;
 
 	let {
 		options = [],

package/dist/forms/date-picker/DatePicker.svelte

@@ -91,7 +91,12 @@
 			)}
 			data-testid={buildTestId('date-picker', undefined, testId)}
 		>
-			<span class={cn('flex-1 text-left', !display && 'text-default-400')}>
+			<span
+				class={cn(
+					'min-w-0 flex-1 truncate text-left whitespace-nowrap',
+					!display && 'text-default-400'
+				)}
+			>
 				{display || placeholder}
 			</span>
 			{#if clearable && value && !disabled && !readonly}

package/dist/forms/month-picker/MonthPicker.svelte

@@ -177,7 +177,12 @@
 			)}
 			data-testid={buildTestId('month-picker', undefined, testId)}
 		>
-			<span class={cn('flex-1 text-left', !display && 'text-default-400')}>
+			<span
+				class={cn(
+					'min-w-0 flex-1 truncate text-left whitespace-nowrap',
+					!display && 'text-default-400'
+				)}
+			>
 				{display || placeholder}
 			</span>
 			{#if clearable && value && !disabled}

package/dist/index.d.ts

@@ -29,7 +29,6 @@ export type { ConfirmDialogProps } from './modal/confirm-dialog-types.js';
 export type { DrawerProps } from './drawer/drawer-types.js';
 export type { DropdownItem, DropSection, DropHeaderConfig, DropdownMenuProps, SelectItem, SelectProps } from './elements/dropdown/dropdown-types.js';
 export type { CardProps, AlertProps, MetricDetail, MetricCardProps } from './layout/card/card-types.js';
-export type { RankedCardProps, RankedCardItem, RankedCardMetric } from './layout/card/ranked-card.js';
 export type { DataRow, KeyType, StatusType, TableColumn, SortDirection, SortState, TableProps } from './layout/table/table-types.js';
 export type { BreadcrumbItem, BreadcrumbsProps, PageHeaderProps } from './header/header-types.js';
 export type { TabItem, TabProps, TabsGroupProps, TabContentProps } from './layout/tabs/tabs-types.js';
@@ -79,7 +78,6 @@ export { default as Dropdown } from './elements/dropdown/Dropdown.svelte';
 export { default as Select } from './elements/dropdown/Select.svelte';
 export { default as Card } from './layout/card/Card.svelte';
 export { default as MetricCard } from './layout/card/MetricCard.svelte';
-export { default as RankedCard } from './layout/card/RankedCard.svelte';
 export { default as Alert } from './elements/alert/Alert.svelte';
 export { default as Pagination } from './elements/pagination/Pagination.svelte';
 export type { PaginationProps } from './elements/pagination/Pagination.svelte';
@@ -138,7 +136,6 @@ export { drawer } from './drawer/drawer.js';
 export { selectTV } from './elements/dropdown/select.js';
 export { breadcrumbs } from './header/breadcrumbs.js';
 export { metricCard } from './layout/card/metric-card.js';
-export { rankedCard } from './layout/card/ranked-card.js';
 export { activityList } from './layout/activity-list/activity-list.js';
 export { slider } from './forms/slider.js';
 export type { SegmentAppearance } from './forms/segmented-control.js';

package/dist/index.js

@@ -42,7 +42,6 @@ export { default as Select } from './elements/dropdown/Select.svelte';
 // Elements - Card
 export { default as Card } from './layout/card/Card.svelte';
 export { default as MetricCard } from './layout/card/MetricCard.svelte';
-export { default as RankedCard } from './layout/card/RankedCard.svelte';
 // Elements - Alert
 export { default as Alert } from './elements/alert/Alert.svelte';
 export { default as Pagination } from './elements/pagination/Pagination.svelte';
@@ -128,7 +127,6 @@ export { drawer } from './drawer/drawer.js';
 export { selectTV } from './elements/dropdown/select.js';
 export { breadcrumbs } from './header/breadcrumbs.js';
 export { metricCard } from './layout/card/metric-card.js';
-export { rankedCard } from './layout/card/ranked-card.js';
 export { activityList } from './layout/activity-list/activity-list.js';
 export { slider } from './forms/slider.js';
 export { segmentedTrack, segmentClasses, segmentedLabelClasses } from './forms/segmented-control.js';

package/dist/layout/activity-list/ActivityList.svelte

@@ -8,6 +8,7 @@
 		highlightedRowClasses,
 		highlightedRingClasses
 	} from './activity-list.js';
+	import Card from '../card/Card.svelte';
 	import Badge from '../../elements/badge/Badge.svelte';
 	import Button from '../../button/Button.svelte';
 	import { Color, Size } from '../../variants.js';
@@ -20,7 +21,6 @@
 		size = 'md',
 		timeline = false,
 		class: className = '',
-		headerClass = '',
 		titleClass = '',
 		contentClass = '',
 		itemClass = '',
@@ -31,9 +31,6 @@
 	}: ActivityListProps = $props();
 
 	const {
-		base,
-		header,
-		title: titleSlot,
 		content,
 		item,
 		accentBar,
@@ -48,21 +45,15 @@
 		itemSubtitle,
 		itemTimestamp,
 		itemActions
-	} = $derived(activityList({ color, size }));
+	} = $derived(activityList({ size }));
 
-	const baseClass = $derived(cn(base(), className));
-	const headerClasses = $derived(cn(header(), headerClass));
-	const titleClasses = $derived(cn(titleSlot(), titleClass));
 	const contentClasses = $derived(cn(content(), contentClass, timeline && 'relative divide-y-0'));
+	// ActivityList's `md` size maps to Card's `md`; sm to sm. Items handle their
+	// own padding (px-6 py-4 / px-4 py-2.5), so we strip Card's body padding.
+	const cardSize = $derived(size === 'sm' ? Size.SM : Size.MD);
 </script>
 
-<div class={baseClass} data-testid={buildTestId('activity-list', undefined, testId)}>
-	{#if title}
-		<div class={headerClasses}>
-			<h2 class={titleClasses}>{title}</h2>
-		</div>
-	{/if}
-
+<Card {title} {color} size={cardSize} class={className} {titleClass} bodyClass="p-0" {testId}>
 	<div class={contentClasses}>
 		{#if children}
 			{@render children()}
@@ -244,4 +235,4 @@
 			{/each}
 		{/if}
 	</div>
-</div>
+</Card>

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

@@ -143,7 +143,6 @@ export type ActivityListProps = {
      */
     timeline?: boolean;
     class?: ClassValue;
-    headerClass?: ClassValue;
     titleClass?: ClassValue;
     contentClass?: ClassValue;
     itemClass?: ClassValue;