@makolabs/ripple 1.11.0 → 1.13.0

package/dist/layout/card/MetricCardActionWrapper.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import MetricCard from './MetricCard.svelte';
+	import type { MetricCardProps } from '../../index.js';
+
+	type Props = Omit<MetricCardProps, 'action' | 'actionHover'> & {
+		actionText?: string;
+		actionHoverText?: string;
+	};
+
+	let { actionText, actionHoverText, ...rest }: Props = $props();
+</script>
+
+{#snippet actionSnippet()}
+	<span class="bg-default-100 text-default-700 rounded-full px-2 py-0.5 text-xs font-medium">
+		{actionText}
+	</span>
+{/snippet}
+
+{#snippet actionHoverSnippet()}
+	<span class="bg-primary-100 text-primary-700 rounded-full px-2 py-0.5 text-xs font-medium">
+		{actionHoverText}
+	</span>
+{/snippet}
+
+<MetricCard
+	{...rest}
+	action={actionText ? actionSnippet : undefined}
+	actionHover={actionHoverText ? actionHoverSnippet : undefined}
+/>

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

@@ -0,0 +1,8 @@
+import type { MetricCardProps } from '../../index.js';
+type Props = Omit<MetricCardProps, 'action' | 'actionHover'> & {
+    actionText?: string;
+    actionHoverText?: string;
+};
+declare const MetricCardActionWrapper: import("svelte").Component<Props, {}, "">;
+type MetricCardActionWrapper = ReturnType<typeof MetricCardActionWrapper>;
+export default MetricCardActionWrapper;

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

@@ -39,5 +39,24 @@ export type MetricCardProps = {
     percent?: number;
     segments?: ProgressSegment[];
     class?: ClassValue;
+    /**
+     * When provided, the card becomes a clickable button with cursor-pointer,
+     * an elevated hover shadow, a focus-visible ring, and a small action icon
+     * in the top-right corner. Omit for a purely presentational card.
+     */
+    onclick?: (event: MouseEvent) => void;
+    /**
+     * Custom content for the corner action slot (e.g. a pill or icon that
+     * signals what clicking will do). Only renders when `onclick` is set.
+     * If omitted, a default arrow-up-right icon is rendered.
+     */
+    action?: Snippet;
+    /**
+     * Optional alternate content for the corner action slot, shown only
+     * while the card is hovered. If provided, it crossfades with the base
+     * `action` (or default arrow) on :hover. Only renders when `onclick`
+     * is set.
+     */
+    actionHover?: Snippet;
     testId?: string;
 };

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

@@ -1,49 +1,49 @@
 export declare const metricCard: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            value?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            progress?: import("tailwind-merge").ClassNameValue;
-            detail?: import("tailwind-merge").ClassNameValue;
+    interactive: {
+        true: {
+            base: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            value?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            progress?: import("tailwind-merge").ClassNameValue;
-            detail?: import("tailwind-merge").ClassNameValue;
+        false: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     title: string;
     value: string;
     detail: string;
     progress: string;
+    action: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            value?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            progress?: import("tailwind-merge").ClassNameValue;
-            detail?: import("tailwind-merge").ClassNameValue;
+    interactive: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     title: string;
     value: string;
     detail: string;
     progress: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+    action: string;
+}, import("tailwind-variants").TVReturnType<{
+    interactive: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     title: string;
     value: string;
     detail: string;
     progress: string;
+    action: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/layout/card/metric-card.js

@@ -1,10 +1,24 @@
 import { tv } from 'tailwind-variants';
 export const metricCard = tv({
     slots: {
-        base: 'bg-white rounded-lg border border-default-200 p-6 shadow-sm hover:shadow-md transition-shadow',
+        base: 'bg-white rounded-lg border border-default-200 p-6 shadow-sm transition-all',
         title: 'text-sm text-default-500',
         value: 'text-3xl font-bold text-default-900 mt-2',
         detail: 'mt-3 space-y-1',
-        progress: 'mt-auto'
+        progress: 'mt-auto',
+        action: 'absolute top-3 right-3 inline-flex items-center text-default-400 transition-opacity duration-200 group-hover:text-primary-500'
+    },
+    variants: {
+        interactive: {
+            true: {
+                base: 'group relative cursor-pointer text-left w-full hover:shadow-lg hover:border-primary-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2'
+            },
+            false: {
+                base: 'hover:shadow-md'
+            }
+        }
+    },
+    defaultVariants: {
+        interactive: false
     }
 });

package/dist/layout/navbar/navbar.js

@@ -8,7 +8,7 @@ export const navbar = tv({
         brand: 'flex flex-shrink-0 items-center',
         menu: 'hidden sm:ml-6 sm:flex sm:space-x-8',
         mobileMenu: 'sm:hidden',
-        mobileMenuButton: 'inline-flex items-center justify-center rounded-md p-2',
+        mobileMenuButton: 'inline-flex cursor-pointer items-center justify-center rounded-md p-2',
         mobileMenuContainer: 'space-y-1 pb-3 pt-2',
         links: 'flex items-center space-x-4',
         link: 'inline-flex h-full items-center gap-2 border-b-2 px-1 pt-1 text-sm font-medium',

package/dist/modal/Modal.svelte

@@ -187,7 +187,7 @@
 	{#if !title && !description && !hideCloseButton}
 		<button
 			type="button"
-			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"
+			class="text-default-400 hover:bg-default-100 hover:text-default-600 absolute top-4 right-4 z-10 cursor-pointer rounded-lg p-2 transition-colors"
 			onclick={onclose}
 			aria-label="Close"
 			data-testid={buildTestId('modal', 'close', testId)}

package/dist/modal/ModalFooter.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'tailwind-variants';
+
+	type Props = {
+		class?: ClassValue;
+		align?: 'start' | 'center' | 'end' | 'between';
+		children: Snippet;
+		testId?: string;
+	};
+
+	let { class: className = '', align = 'end', children, testId }: Props = $props();
+
+	const alignClass = $derived(
+		{
+			start: 'justify-start',
+			center: 'justify-center',
+			end: 'justify-end',
+			between: 'justify-between'
+		}[align]
+	);
+</script>
+
+<div
+	class={cn(
+		'border-default-200 flex flex-wrap items-center gap-3 border-t px-6 py-4',
+		alignClass,
+		className
+	)}
+	data-testid={buildTestId('modal-footer', undefined, testId)}
+>
+	{@render children()}
+</div>

package/dist/modal/ModalFooter.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'tailwind-variants';
+type Props = {
+    class?: ClassValue;
+    align?: 'start' | 'center' | 'end' | 'between';
+    children: Snippet;
+    testId?: string;
+};
+declare const ModalFooter: import("svelte").Component<Props, {}, "">;
+type ModalFooter = ReturnType<typeof ModalFooter>;
+export default ModalFooter;

package/dist/modal/ModalFooterTestWrapper.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import ModalFooter from './ModalFooter.svelte';
+
+	let {
+		text = '',
+		align,
+		class: className
+	}: {
+		text?: string;
+		align?: 'start' | 'center' | 'end' | 'between';
+		class?: string;
+	} = $props();
+</script>
+
+<ModalFooter {align} class={className}>
+	<button type="button">{text}</button>
+</ModalFooter>

package/dist/modal/ModalFooterTestWrapper.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    text?: string;
+    align?: 'start' | 'center' | 'end' | 'between';
+    class?: string;
+};
+declare const ModalFooterTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModalFooterTestWrapper = ReturnType<typeof ModalFooterTestWrapper>;
+export default ModalFooterTestWrapper;

package/dist/modal/modal.js

@@ -10,7 +10,7 @@ export const modal = tv({
         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'
+        close: 'p-2 -mr-2 ml-4 rounded-lg text-default-400 cursor-pointer hover:text-default-600 hover:bg-default-100 transition-colors'
     },
     variants: {
         size: {

package/dist/pipeline/Pipeline.svelte

@@ -10,6 +10,7 @@
 		class: className = '',
 		size = 'base',
 		equalWidth = true,
+		chevronGap = 0,
 		selectedClass,
 		unselectedClass,
 		disabledClass,
@@ -33,8 +34,11 @@
 		});
 	}
 
-	function borderClassesFor(stage: PipelineStage, base: string): string {
-		return cn(base, stage.active ? selectedClass : unselectedClass);
+	function stateClassesFor(stage: PipelineStage): string | undefined {
+		if (stage.disabled) return undefined; // disabledClass applied separately
+		return stage.active
+			? (selectedClass as string | undefined)
+			: (unselectedClass as string | undefined);
 	}
 
 	function borderClipPath(isFirst: boolean): string {
@@ -81,12 +85,18 @@
 		{@const s = getStageStyles(stage)}
 		{@const isFirst = index === 0}
 		{@const renderAsButton = !!onstageclick}
+		{@const marginLeft = chevronGap - CHEVRON_WIDTH}
 		{@const stageStyle = isFirst
 			? `z-index: ${stages.length - index}`
-			: `margin-left: -${CHEVRON_WIDTH}px; z-index: ${stages.length - index}`}
+			: `margin-left: ${marginLeft}px; z-index: ${stages.length - index}`}
 
 		<div
-			class={cn('flex flex-col', s.stage(), stage.disabled ? disabledClass : undefined)}
+			class={cn(
+				'flex flex-col',
+				s.stage(),
+				stateClassesFor(stage),
+				stage.disabled ? disabledClass : undefined
+			)}
 			style={stageStyle}
 			data-pipeline-stage=""
 			role={onstagehover || onstageleave ? 'group' : undefined}
@@ -96,7 +106,7 @@
 			onmouseleave={onstageleave ? (e) => handleStageMouseLeave(stage, index, e) : undefined}
 		>
 			<div
-				class={borderClassesFor(stage, s.borderLayer())}
+				class={s.borderLayer()}
 				data-pipeline-border=""
 				style="clip-path: {borderClipPath(isFirst)};"
 			></div>
@@ -106,6 +116,7 @@
 					type="button"
 					class={s.innerLayer()}
 					style="clip-path: {innerClipPath(isFirst)};"
+					data-pipeline-inner=""
 					disabled={stage.disabled}
 					aria-disabled={stage.disabled ? 'true' : undefined}
 					onclick={(e) => handleStageClick(stage, index, e)}
@@ -113,7 +124,11 @@
 					{@render stageContent(stage, index, s)}
 				</button>
 			{:else}
-				<div class={s.innerLayer()} style="clip-path: {innerClipPath(isFirst)};">
+				<div
+					class={s.innerLayer()}
+					style="clip-path: {innerClipPath(isFirst)};"
+					data-pipeline-inner=""
+				>
 					{@render stageContent(stage, index, s)}
 				</div>
 			{/if}

package/dist/pipeline/pipeline-types.d.ts

@@ -20,6 +20,13 @@ export type PipelineProps = {
     class?: ClassValue;
     size?: 'sm' | 'base' | 'lg';
     equalWidth?: boolean;
+    /**
+     * Pixels of visible gap between chevrons. Independent of the chevron tip width.
+     * - `0` (default): tips tuck into notches, no visible gap
+     * - positive: visible gap between stages (reduces overlap)
+     * - negative: more overlap than default (tips extend past notches)
+     */
+    chevronGap?: number;
     children?: Snippet<[PipelineStage, number]>;
     beneathChildren?: Snippet<[PipelineStage, number]>;
     selectedClass?: ClassValue;

package/dist/pipeline/pipeline.d.ts

@@ -57,7 +57,7 @@ export declare const pipelineVariants: import("tailwind-variants").TVReturnType<
     };
     active: {
         true: {
-            borderLayer: string;
+            innerLayer: string;
         };
     };
     equalWidth: {
@@ -142,7 +142,7 @@ export declare const pipelineVariants: import("tailwind-variants").TVReturnType<
     };
     active: {
         true: {
-            borderLayer: string;
+            innerLayer: string;
         };
     };
     equalWidth: {
@@ -227,7 +227,7 @@ export declare const pipelineVariants: import("tailwind-variants").TVReturnType<
     };
     active: {
         true: {
-            borderLayer: string;
+            innerLayer: string;
         };
     };
     equalWidth: {

package/dist/pipeline/pipeline.js

@@ -66,7 +66,7 @@ export const pipelineVariants = tv({
         },
         active: {
             true: {
-                borderLayer: 'ring-2 ring-blue-500 ring-offset-2'
+                innerLayer: 'bg-blue-50 hover:bg-blue-100'
             }
         },
         equalWidth: {
@@ -74,7 +74,7 @@ export const pipelineVariants = tv({
         },
         interactive: {
             true: {
-                innerLayer: 'cursor-pointer focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                innerLayer: 'cursor-pointer hover:bg-default-100 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
             }
         },
         disabled: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.11.0",
+	"version": "1.13.0",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {