@makolabs/ripple 1.11.0 → 1.12.0

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.12.0",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {