@makolabs/ripple 1.9.2 → 1.11.0

package/dist/forms/MarketSelector.svelte

@@ -14,8 +14,12 @@
 		name = '',
 		showFlags = true,
 		label = '',
+		variant = undefined,
+		collapsed = false,
 		appearance = 'surface',
 		orientation = 'horizontal',
+		labelLayout = undefined,
+		labelClass = undefined,
 		color = Color.PRIMARY,
 		size = Size.BASE,
 		compact = false,
@@ -25,6 +29,24 @@
 		testId
 	}: MarketSelectorProps = $props();
 
+	const resolvedAppearance = $derived.by(() => {
+		if (variant === 'default') return 'clarkDefault';
+		if (variant === 'sidebar') return 'clarkSidebar';
+		return appearance;
+	});
+
+	const resolvedLabelLayout = $derived(labelLayout ?? (variant !== undefined ? 'inline' : 'above'));
+
+	const resolvedOrientation = $derived(
+		variant === 'sidebar' && collapsed ? 'vertical' : orientation
+	);
+
+	const resolvedCompact = $derived(variant === 'sidebar' && collapsed ? true : compact);
+
+	const resolvedLabelClass = $derived(
+		labelClass ?? (variant === 'sidebar' && collapsed && label ? 'sr-only' : undefined)
+	);
+
 	const options = $derived.by((): SegmentedOption[] => {
 		return markets.map((code) => ({
 			value: code,
@@ -55,11 +77,13 @@
 		{options}
 		{name}
 		{label}
-		{appearance}
-		{orientation}
+		appearance={resolvedAppearance}
+		orientation={resolvedOrientation}
+		labelLayout={resolvedLabelLayout}
+		labelClass={resolvedLabelClass}
 		{color}
 		{size}
-		{compact}
+		compact={resolvedCompact}
 		{disabled}
 		{testId}
 		onchange={handleChange}

package/dist/forms/SegmentedControl.svelte

@@ -3,7 +3,7 @@
 	import { cn } from '../helper/cls.js';
 	import { buildTestId } from '../helper/testid.js';
 	import { Color, Size } from '../variants.js';
-	import { segmentedTrack, segmentClasses } from './segmented-control.js';
+	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)}`;
@@ -19,6 +19,8 @@
 		color = Color.PRIMARY,
 		size = Size.BASE,
 		compact = false,
+		labelLayout = 'above',
+		labelClass = '',
 		disabled = false,
 		errors = [],
 		onchange = undefined,
@@ -27,13 +29,30 @@
 
 	const hasError = $derived(errors && errors.length > 0);
 
+	const clarkCollapsed = $derived(
+		compact && appearance === 'clarkSidebar' && orientation === 'vertical'
+	);
+
 	const trackClass = $derived(
 		cn(
-			segmentedTrack({ appearance, orientation }),
-			orientation === 'vertical' && compact && 'items-stretch'
+			segmentedTrack({
+				appearance,
+				orientation,
+				clarkCollapsed
+			}),
+			orientation === 'vertical' && compact && appearance !== 'clarkSidebar' && 'items-stretch'
 		)
 	);
 
+	const rootClass = $derived(
+		cn(
+			labelLayout === 'inline' ? 'flex flex-row items-center gap-2' : 'flex flex-col gap-2',
+			className
+		)
+	);
+
+	const labelTextClass = $derived(cn(segmentedLabelClasses(appearance, !!hasError), labelClass));
+
 	async function handleSelect(optionValue: string, optionDisabled: boolean | undefined) {
 		if (disabled || optionDisabled) return;
 		if (optionValue === value) return;
@@ -91,20 +110,19 @@
 			}
 		}
 	}
+
+	const isClark = $derived(appearance === 'clarkDefault' || appearance === 'clarkSidebar');
 </script>
 
-<div class={cn('flex flex-col gap-2', className)}>
-	{#if hasError}
-		<div class="text-danger-500 text-sm">{errors[0]}</div>
-	{/if}
+<div class={rootClass}>
 	{#if label}
-		<span
-			id="{groupId}-label"
-			class={cn('text-sm font-medium', hasError ? 'text-danger-500' : 'text-default-700')}
-		>
+		<span id="{groupId}-label" class={labelTextClass}>
 			{label}
 		</span>
 	{/if}
+	{#if hasError}
+		<div class="text-danger-500 text-sm">{errors[0]}</div>
+	{/if}
 
 	<div
 		class={trackClass}
@@ -134,7 +152,8 @@
 					size: size as VariantSizes,
 					isFirst,
 					isLast,
-					orientation
+					orientation,
+					clarkCollapsed
 				})}
 				data-testid={buildTestId('segmented', 'item', testId, index)}
 				onclick={() => handleSelect(option.value, option.disabled)}
@@ -143,7 +162,13 @@
 				{#if option.prefix}
 					<span class="text-base leading-none" aria-hidden="true">{option.prefix}</span>
 				{/if}
-				<span class:text-sm={size === Size.XS || size === Size.SM} class:sr-only={compact}>
+				<span
+					class={cn(
+						!compact && (size === Size.XS || size === Size.SM) && !isClark && 'text-sm',
+						isClark && !compact && 'text-xs font-medium',
+						compact && 'sr-only'
+					)}
+				>
 					{option.label}
 				</span>
 			</button>

package/dist/forms/form-types.d.ts

@@ -180,13 +180,20 @@ export type SegmentedControlProps = {
     name?: string;
     label?: string;
     class?: ClassValue;
-    /** Light track (e.g. page toolbar) vs dark track (e.g. sidebar) */
-    appearance?: 'surface' | 'inverted';
+    /**
+     * - `surface` / `inverted`: generic Ripple styling (`color` applies).
+     * - `clarkDefault` / `clarkSidebar`: match Clark AR market bar (fixed blue selection, inline-friendly).
+     */
+    appearance?: 'surface' | 'inverted' | 'clarkDefault' | 'clarkSidebar';
     orientation?: 'horizontal' | 'vertical';
     color?: VariantColors;
     size?: VariantSizes;
-    /** Hide label text; keep prefix only (label is `sr-only` for screen readers) */
+    /** Hide segment label text; prefix only (`sr-only`); with Clark sidebar + vertical = collapsed column */
     compact?: boolean;
+    /** Label above the track vs beside the track (Clark uses `inline`) */
+    labelLayout?: 'above' | 'inline';
+    /** Optional class on the visible label (e.g. `sr-only` when collapsed sidebar) */
+    labelClass?: ClassValue;
     disabled?: boolean;
     errors?: string[];
     onchange?: (value: string) => void;

package/dist/forms/market/market-selector-types.d.ts

@@ -1,6 +1,8 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { CountryCode } from './country-data.js';
 import type { VariantColors, VariantSizes } from '../../index.js';
+/** Clark AR toolbar (`default`) vs dark sidebar (`sidebar`) — maps to SegmentedControl Clark appearances. */
+export type MarketSelectorVariant = 'default' | 'sidebar';
 export type MarketSelectorProps = {
     /**
      * Non-empty ordered list of ISO 3166-1 alpha-2 codes to show (e.g. `[Market.DE, Market.GB, Market.CH]`).
@@ -13,8 +15,21 @@ export type MarketSelectorProps = {
     defaultMarket?: CountryCode;
     showFlags?: boolean;
     label?: string;
-    appearance?: 'surface' | 'inverted';
+    /**
+     * Clark AR–style market bar. When set, overrides `appearance` to `clarkDefault` / `clarkSidebar`
+     * and defaults `labelLayout` to `inline` (override with `labelLayout`).
+     */
+    variant?: MarketSelectorVariant;
+    /**
+     * With `variant="sidebar"` only: vertical icon column and `sr-only` segment labels (Clark collapsed sidebar).
+     */
+    collapsed?: boolean;
+    appearance?: 'surface' | 'inverted' | 'clarkDefault' | 'clarkSidebar';
     orientation?: 'horizontal' | 'vertical';
+    /** Label above vs beside the track (Clark uses `inline` via `variant`). */
+    labelLayout?: 'above' | 'inline';
+    /** Extra classes on the visible label (e.g. override default `sr-only` when collapsed). */
+    labelClass?: ClassValue;
     color?: VariantColors;
     size?: VariantSizes;
     compact?: boolean;

package/dist/forms/segmented-control.d.ts

@@ -1,39 +1,72 @@
 import type { VariantColors, VariantSizes } from '../index.js';
+/** @see SegmentedControlProps['appearance'] */
+export type SegmentAppearance = 'surface' | 'inverted' | 'clarkDefault' | 'clarkSidebar';
 export declare const segmentedTrack: import("tailwind-variants").TVReturnType<{
     appearance: {
         surface: string;
         inverted: string;
+        /** Clark (light toolbar): flush segments, gray border, white track */
+        clarkDefault: string;
+        /** Clark (dark sidebar): translucent track */
+        clarkSidebar: string;
     };
     orientation: {
         horizontal: string;
         vertical: string;
     };
-}, undefined, "inline-flex overflow-hidden rounded-lg border p-0.5", {
+    /** Collapsed sidebar column layout (Clark) */
+    clarkCollapsed: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex overflow-hidden rounded-lg border", {
     appearance: {
         surface: string;
         inverted: string;
+        /** Clark (light toolbar): flush segments, gray border, white track */
+        clarkDefault: string;
+        /** Clark (dark sidebar): translucent track */
+        clarkSidebar: string;
     };
     orientation: {
         horizontal: string;
         vertical: string;
     };
+    /** Collapsed sidebar column layout (Clark) */
+    clarkCollapsed: {
+        true: string;
+        false: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     appearance: {
         surface: string;
         inverted: string;
+        /** Clark (light toolbar): flush segments, gray border, white track */
+        clarkDefault: string;
+        /** Clark (dark sidebar): translucent track */
+        clarkSidebar: string;
     };
     orientation: {
         horizontal: string;
         vertical: string;
     };
-}, undefined, "inline-flex overflow-hidden rounded-lg border p-0.5", unknown, unknown, undefined>>;
+    /** Collapsed sidebar column layout (Clark) */
+    clarkCollapsed: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex overflow-hidden rounded-lg border", unknown, unknown, undefined>>;
 export declare function segmentClasses(args: {
     selected: boolean;
     disabled: boolean;
-    appearance: 'surface' | 'inverted';
+    appearance: SegmentAppearance;
     color: VariantColors;
     size: VariantSizes;
     isFirst: boolean;
     isLast: boolean;
     orientation: 'horizontal' | 'vertical';
+    /** Clark sidebar collapsed: stacked segments, smaller padding */
+    clarkCollapsed?: boolean;
 }): string;
+/** Label next to / above the track (Clark uses muted gray or default-300 in sidebar). */
+export declare function segmentedLabelClasses(appearance: SegmentAppearance, hasError: boolean): string;

package/dist/forms/segmented-control.js

@@ -2,20 +2,37 @@ import { tv } from 'tailwind-variants';
 import { cn } from '../helper/cls.js';
 import { Color, Size } from '../variants.js';
 export const segmentedTrack = tv({
-    base: 'inline-flex overflow-hidden rounded-lg border p-0.5',
+    base: 'inline-flex overflow-hidden rounded-lg border',
     variants: {
         appearance: {
-            surface: 'border-default-200 bg-default-50',
-            inverted: 'border-white/20 bg-white/5'
+            surface: 'border-default-200 bg-default-50 p-0.5',
+            inverted: 'border-white/20 bg-white/5 p-0.5',
+            /** Clark (light toolbar): flush segments, gray border, white track */
+            clarkDefault: 'items-center border-gray-300 bg-white p-0',
+            /** Clark (dark sidebar): translucent track */
+            clarkSidebar: 'items-center border-white/20 bg-white/5 p-0'
         },
         orientation: {
             horizontal: 'flex-row',
             vertical: 'w-full flex-col'
+        },
+        /** Collapsed sidebar column layout (Clark) */
+        clarkCollapsed: {
+            true: 'gap-1',
+            false: ''
         }
     },
+    compoundVariants: [
+        {
+            appearance: ['clarkDefault', 'clarkSidebar'],
+            orientation: 'vertical',
+            class: 'items-center'
+        }
+    ],
     defaultVariants: {
         appearance: 'surface',
-        orientation: 'horizontal'
+        orientation: 'horizontal',
+        clarkCollapsed: false
     }
 });
 const selectedByColor = {
@@ -35,8 +52,31 @@ const segmentSize = {
     [Size.XL]: 'gap-2 px-4 py-2.5 text-lg',
     [Size.XXL]: 'gap-2 px-5 py-3 text-xl'
 };
+function isClark(appearance) {
+    return appearance === 'clarkDefault' || appearance === 'clarkSidebar';
+}
 export function segmentClasses(args) {
-    const { selected, disabled, appearance, color, size, isFirst, isLast, orientation } = args;
+    const { selected, disabled, appearance, color, size, isFirst, isLast, orientation, clarkCollapsed } = args;
+    if (isClark(appearance)) {
+        const isSidebar = appearance === 'clarkSidebar';
+        const rounding = clarkCollapsed && isSidebar
+            ? 'rounded-md'
+            : orientation === 'horizontal'
+                ? cn(isFirst && 'rounded-l-lg', isLast && 'rounded-r-lg')
+                : cn(isFirst && 'rounded-t-lg', isLast && 'rounded-b-lg');
+        const clarkPad = clarkCollapsed && isSidebar ? 'justify-center px-2 py-1.5' : 'gap-1.5 px-3 py-1.5';
+        const clarkBase = cn('group relative flex cursor-pointer items-center transition-all duration-150', clarkPad, 'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none', isSidebar ? 'focus-visible:ring-offset-0' : 'focus-visible:ring-offset-2', rounding, disabled && 'cursor-not-allowed opacity-50');
+        if (disabled) {
+            return cn(clarkBase, 'text-default-400');
+        }
+        if (selected) {
+            return cn(clarkBase, 'bg-blue-600 text-white');
+        }
+        if (appearance === 'clarkDefault') {
+            return cn(clarkBase, 'bg-white text-gray-600 hover:bg-gray-50');
+        }
+        return cn(clarkBase, 'text-default-200 hover:bg-white/10');
+    }
     const rounding = orientation === 'horizontal'
         ? cn(isFirst && 'rounded-l-md', isLast && 'rounded-r-md')
         : cn(isFirst && 'rounded-t-md', isLast && 'rounded-b-md');
@@ -48,7 +88,20 @@ export function segmentClasses(args) {
         return cn(base, selectedByColor[color]);
     }
     if (appearance === 'surface') {
-        return cn(base, 'text-default-700 hover:bg-white/90', 'bg-transparent');
+        return cn(base, 'bg-transparent text-default-700 hover:bg-white/90');
+    }
+    return cn(base, 'bg-transparent text-default-200 hover:bg-white/10');
+}
+/** Label next to / above the track (Clark uses muted gray or default-300 in sidebar). */
+export function segmentedLabelClasses(appearance, hasError) {
+    if (hasError) {
+        return 'text-sm font-medium text-danger-500';
+    }
+    if (appearance === 'clarkDefault') {
+        return 'text-sm text-gray-500';
+    }
+    if (appearance === 'clarkSidebar') {
+        return 'text-xs text-default-300';
     }
-    return cn(base, 'text-default-200 hover:bg-white/10', 'bg-transparent');
+    return cn('text-sm font-medium', 'text-default-700');
 }

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export type { CountryCode } from './forms/market/country-data.js';
 export type { MarketCode } from './forms/market/market.js';
 export { ALL_COUNTRY_CODES, COUNTRY_NAMES } from './forms/market/country-data.js';
 export { Market } from './forms/market/market.js';
-export type { MarketSelectorProps } from './forms/market/market-selector-types.js';
+export type { MarketSelectorProps, MarketSelectorVariant } from './forms/market/market-selector-types.js';
 export { countryCodeToFlagEmoji } from './forms/market/flag-emoji.js';
 export type { ProgressSegment, ProgressProps } from './elements/progress/progress-types.js';
 export type { AccordionProps } from './elements/accordion/accordion-types.js';
@@ -49,7 +49,8 @@ export { isRouteActive } from './helper/nav.svelte.js';
 export { default as Button } from './button/Button.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as Pipeline } from './pipeline/Pipeline.svelte';
-export type { PipelineStage } from './pipeline/Pipeline.svelte';
+export { pipelineVariants } from './pipeline/pipeline.js';
+export type { PipelineStage, PipelineStageColor, PipelineStageEvent, PipelineStageClickEvent, PipelineStagePointerEvent, PipelineProps } from './pipeline/pipeline-types.js';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as PageHeader } from './header/PageHeader.svelte';
 export { default as Breadcrumbs } from './header/Breadcrumbs.svelte';
@@ -106,7 +107,8 @@ 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 } from './forms/segmented-control.js';
+export type { SegmentAppearance } from './forms/segmented-control.js';
+export { segmentedTrack, segmentClasses, segmentedLabelClasses } from './forms/segmented-control.js';
 export { CompactFilters } from './filters/index.js';
 export * from './file-browser/index.js';
 export * from './adapters/storage/index.js';

package/dist/index.js

@@ -26,6 +26,7 @@ export { default as Button } from './button/Button.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 // Pipeline
 export { default as Pipeline } from './pipeline/Pipeline.svelte';
+export { pipelineVariants } from './pipeline/pipeline.js';
 // Drawer
 export { default as Drawer } from './drawer/Drawer.svelte';
 // Header
@@ -103,7 +104,7 @@ 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 } from './forms/segmented-control.js';
+export { segmentedTrack, segmentClasses, segmentedLabelClasses } from './forms/segmented-control.js';
 // ============================================================================
 // Re-export filters
 // ============================================================================

package/dist/pipeline/Pipeline.svelte

@@ -1,174 +1,123 @@
 <script lang="ts">
-	import { tv } from 'tailwind-variants';
-	import type { Snippet } from 'svelte';
+	import { cn } from '../helper/cls.js';
+	import { pipelineVariants } from './pipeline.js';
+	import type { PipelineProps, PipelineStage } from '../index.js';
 
-	export type PipelineStage = {
-		label: string;
-		count?: number | string;
-		color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
-		active?: boolean;
-	};
-
-	interface Props {
-		stages: PipelineStage[];
-		class?: string;
-		size?: 'sm' | 'base' | 'lg';
-		equalWidth?: boolean;
-		children?: Snippet<[PipelineStage, number]>;
-		beneathChildren?: Snippet<[PipelineStage, number]>;
-	}
+	const CHEVRON_WIDTH = 20;
 
 	let {
 		stages = [],
 		class: className = '',
 		size = 'base',
 		equalWidth = true,
+		selectedClass,
+		unselectedClass,
+		disabledClass,
+		onstageclick,
+		onstagehover,
+		onstageleave,
 		children,
 		beneathChildren
-	}: Props = $props();
-
-	const pipeline = tv({
-		slots: {
-			container: 'flex items-center gap-0 w-full',
-			stage: 'relative transition-all duration-300',
-			borderLayer: 'absolute inset-0 transition-all duration-300',
-			innerLayer: 'relative flex items-center justify-center bg-white transition-all duration-300',
-			content: 'text-center flex flex-col items-center justify-center',
-			label: 'font-medium text-default-600 leading-tight break-words',
-			count: 'font-bold text-default-900'
-		},
-		variants: {
-			size: {
-				sm: {
-					stage: 'min-w-[130px]',
-					borderLayer: 'h-20',
-					innerLayer: 'h-20',
-					label: 'text-[11px] max-w-[100px]',
-					count: 'text-xl mt-0.5',
-					content: 'px-4'
-				},
-				base: {
-					stage: 'min-w-[150px]',
-					borderLayer: 'h-24',
-					innerLayer: 'h-24',
-					label: 'text-xs max-w-[120px]',
-					count: 'text-2xl mt-1',
-					content: 'px-5'
-				},
-				lg: {
-					stage: 'min-w-[180px]',
-					borderLayer: 'h-28',
-					innerLayer: 'h-28',
-					label: 'text-sm max-w-[150px]',
-					count: 'text-3xl mt-1',
-					content: 'px-6'
-				}
-			},
-			color: {
-				default: {
-					borderLayer: 'bg-default-200'
-				},
-				primary: {
-					borderLayer: 'bg-blue-500',
-					label: 'text-default-700',
-					count: 'text-default-900'
-				},
-				success: {
-					borderLayer: 'bg-green-500',
-					label: 'text-default-700',
-					count: 'text-default-900'
-				},
-				warning: {
-					borderLayer: 'bg-amber-500',
-					label: 'text-default-700',
-					count: 'text-default-900'
-				},
-				danger: {
-					borderLayer: 'bg-rose-500',
-					label: 'text-default-700',
-					count: 'text-default-900'
-				},
-				info: {
-					borderLayer: 'bg-purple-500',
-					label: 'text-default-700',
-					count: 'text-default-900'
-				}
-			},
-			active: {
-				true: {
-					borderLayer: 'ring-2 ring-blue-500 ring-offset-2'
-				}
-			},
-			equalWidth: {
-				true: {
-					stage: 'flex-1'
-				},
-				false: {
-					stage: ''
-				}
-			}
-		}
-	});
+	}: PipelineProps = $props();
 
-	const styles = $derived(pipeline({ size, equalWidth }));
+	const containerStyles = $derived(pipelineVariants({ size, equalWidth }));
 
 	function getStageStyles(stage: PipelineStage) {
-		return pipeline({
+		return pipelineVariants({
 			size,
-			color: stage.color || 'default',
+			color: stage.color ?? 'default',
 			active: stage.active,
-			equalWidth
+			equalWidth,
+			interactive: !!onstageclick && !stage.disabled,
+			disabled: stage.disabled
 		});
 	}
+
+	function borderClassesFor(stage: PipelineStage, base: string): string {
+		return cn(base, stage.active ? selectedClass : unselectedClass);
+	}
+
+	function borderClipPath(isFirst: boolean): string {
+		const leftTip = isFirst ? '0' : `${CHEVRON_WIDTH}px`;
+		return `polygon(0 0%, calc(100% - ${CHEVRON_WIDTH}px) 0%, 100% 50%, calc(100% - ${CHEVRON_WIDTH}px) 100%, 0 100%, ${leftTip} 50%)`;
+	}
+
+	function innerClipPath(isFirst: boolean): string {
+		const leftTip = isFirst ? '2px' : `${CHEVRON_WIDTH + 2}px`;
+		return `polygon(2px 2px, calc(100% - ${CHEVRON_WIDTH}px - 2px) 2px, calc(100% - 2px) 50%, calc(100% - ${CHEVRON_WIDTH}px - 2px) calc(100% - 2px), 2px calc(100% - 2px), ${leftTip} 50%)`;
+	}
+
+	function handleStageClick(stage: PipelineStage, index: number, event: MouseEvent) {
+		if (stage.disabled || !onstageclick) return;
+		onstageclick({ stage, index, event });
+	}
+
+	function handleStageMouseEnter(stage: PipelineStage, index: number, event: MouseEvent) {
+		if (stage.disabled || !onstagehover) return;
+		onstagehover({ stage, index, event });
+	}
+
+	function handleStageMouseLeave(stage: PipelineStage, index: number, event: MouseEvent) {
+		if (stage.disabled || !onstageleave) return;
+		onstageleave({ stage, index, event });
+	}
 </script>
 
-<div class="{styles.container()} {className}">
+{#snippet stageContent(stage: PipelineStage, index: number, s: ReturnType<typeof getStageStyles>)}
+	<div class={s.content()}>
+		{#if children}
+			{@render children(stage, index)}
+		{:else}
+			<span class={s.label()}>{stage.label}</span>
+			{#if stage.count !== undefined}
+				<span class={s.count()}>{stage.count}</span>
+			{/if}
+		{/if}
+	</div>
+{/snippet}
+
+<div class={cn(containerStyles.container(), className)}>
 	{#each stages as stage, index (stage.label + index)}
+		{@const s = getStageStyles(stage)}
 		{@const isFirst = index === 0}
-		{@const chevronWidth = 20}
+		{@const renderAsButton = !!onstageclick}
+		{@const stageStyle = isFirst
+			? `z-index: ${stages.length - index}`
+			: `margin-left: -${CHEVRON_WIDTH}px; z-index: ${stages.length - index}`}
 
 		<div
-			class="flex flex-col {getStageStyles(stage).stage()}"
-			style={!isFirst
-				? `margin-left: -${chevronWidth}px; z-index: ${stages.length - index}`
-				: `z-index: ${stages.length - index}`}
+			class={cn('flex flex-col', s.stage(), stage.disabled ? disabledClass : undefined)}
+			style={stageStyle}
+			data-pipeline-stage=""
+			role={onstagehover || onstageleave ? 'group' : undefined}
+			aria-label={onstagehover || onstageleave ? stage.label : undefined}
+			aria-disabled={stage.disabled ? 'true' : undefined}
+			onmouseenter={onstagehover ? (e) => handleStageMouseEnter(stage, index, e) : undefined}
+			onmouseleave={onstageleave ? (e) => handleStageMouseLeave(stage, index, e) : undefined}
 		>
-			<!-- BACKGROUND LAYER (Border color - larger) -->
 			<div
-				class={getStageStyles(stage).borderLayer()}
-				style="clip-path: polygon({isFirst
-					? '0'
-					: '0'} 0%, calc(100% - {chevronWidth}px) 0%, 100% 50%, calc(100% - {chevronWidth}px) 100%, {isFirst
-					? '0'
-					: '0'} 100%, {isFirst ? '0' : `${chevronWidth}px`} 50%);"
+				class={borderClassesFor(stage, s.borderLayer())}
+				data-pipeline-border=""
+				style="clip-path: {borderClipPath(isFirst)};"
 			></div>
 
-			<!-- FOREGROUND LAYER (White - smaller, creates border effect) -->
-			<div
-				class={getStageStyles(stage).innerLayer()}
-				style="clip-path: polygon({isFirst
-					? '2px'
-					: '2px'} 2px, calc(100% - {chevronWidth}px - 2px) 2px, calc(100% - 2px) 50%, calc(100% - {chevronWidth}px - 2px) calc(100% - 2px), {isFirst
-					? '2px'
-					: '2px'} calc(100% - 2px), {isFirst ? '2px' : `${chevronWidth + 2}px`} 50%);"
-			>
-				<div class={getStageStyles(stage).content()}>
-					{#if children}
-						{@render children(stage, index)}
-					{:else}
-						<span class={getStageStyles(stage).label()}>
-							{stage.label}
-						</span>
-						{#if stage.count !== undefined}
-							<span class={getStageStyles(stage).count()}>
-								{stage.count}
-							</span>
-						{/if}
-					{/if}
+			{#if renderAsButton}
+				<button
+					type="button"
+					class={s.innerLayer()}
+					style="clip-path: {innerClipPath(isFirst)};"
+					disabled={stage.disabled}
+					aria-disabled={stage.disabled ? 'true' : undefined}
+					onclick={(e) => handleStageClick(stage, index, e)}
+				>
+					{@render stageContent(stage, index, s)}
+				</button>
+			{:else}
+				<div class={s.innerLayer()} style="clip-path: {innerClipPath(isFirst)};">
+					{@render stageContent(stage, index, s)}
 				</div>
-			</div>
+			{/if}
 
-			<!-- Beneath Children - Rendered directly below this stage -->
 			{#if beneathChildren}
 				<div class="mt-4">
 					{@render beneathChildren(stage, index)}

package/dist/pipeline/Pipeline.svelte.d.ts

@@ -1,18 +1,4 @@
-import type { Snippet } from 'svelte';
-export type PipelineStage = {
-    label: string;
-    count?: number | string;
-    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
-    active?: boolean;
-};
-interface Props {
-    stages: PipelineStage[];
-    class?: string;
-    size?: 'sm' | 'base' | 'lg';
-    equalWidth?: boolean;
-    children?: Snippet<[PipelineStage, number]>;
-    beneathChildren?: Snippet<[PipelineStage, number]>;
-}
-declare const Pipeline: import("svelte").Component<Props, {}, "">;
+import type { PipelineProps } from '../index.js';
+declare const Pipeline: import("svelte").Component<PipelineProps, {}, "">;
 type Pipeline = ReturnType<typeof Pipeline>;
 export default Pipeline;

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

@@ -0,0 +1,31 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+export type PipelineStageColor = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type PipelineStage = {
+    label: string;
+    count?: number | string;
+    color?: PipelineStageColor;
+    active?: boolean;
+    disabled?: boolean;
+};
+export type PipelineStageEvent<E extends Event = Event> = {
+    stage: PipelineStage;
+    index: number;
+    event: E;
+};
+export type PipelineStageClickEvent = PipelineStageEvent<MouseEvent>;
+export type PipelineStagePointerEvent = PipelineStageEvent<MouseEvent>;
+export type PipelineProps = {
+    stages: PipelineStage[];
+    class?: ClassValue;
+    size?: 'sm' | 'base' | 'lg';
+    equalWidth?: boolean;
+    children?: Snippet<[PipelineStage, number]>;
+    beneathChildren?: Snippet<[PipelineStage, number]>;
+    selectedClass?: ClassValue;
+    unselectedClass?: ClassValue;
+    disabledClass?: ClassValue;
+    onstageclick?: (e: PipelineStageClickEvent) => void;
+    onstagehover?: (e: PipelineStagePointerEvent) => void;
+    onstageleave?: (e: PipelineStagePointerEvent) => void;
+};

package/dist/pipeline/pipeline-types.js

@@ -0,0 +1 @@
+export {};

package/dist/pipeline/pipeline.d.ts

@@ -0,0 +1,256 @@
+export declare const pipelineVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        base: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        lg: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+    };
+    color: {
+        default: {
+            borderLayer: string;
+        };
+        primary: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        success: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        warning: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        danger: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        info: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+    };
+    active: {
+        true: {
+            borderLayer: string;
+        };
+    };
+    equalWidth: {
+        true: {
+            stage: string;
+        };
+    };
+    interactive: {
+        true: {
+            innerLayer: string;
+        };
+    };
+    disabled: {
+        true: {
+            stage: string;
+        };
+    };
+}, {
+    container: string;
+    stage: string;
+    borderLayer: string;
+    innerLayer: string;
+    content: string;
+    label: string;
+    count: string;
+}, undefined, {
+    size: {
+        sm: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        base: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        lg: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+    };
+    color: {
+        default: {
+            borderLayer: string;
+        };
+        primary: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        success: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        warning: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        danger: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        info: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+    };
+    active: {
+        true: {
+            borderLayer: string;
+        };
+    };
+    equalWidth: {
+        true: {
+            stage: string;
+        };
+    };
+    interactive: {
+        true: {
+            innerLayer: string;
+        };
+    };
+    disabled: {
+        true: {
+            stage: string;
+        };
+    };
+}, {
+    container: string;
+    stage: string;
+    borderLayer: string;
+    innerLayer: string;
+    content: string;
+    label: string;
+    count: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        base: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        lg: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+    };
+    color: {
+        default: {
+            borderLayer: string;
+        };
+        primary: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        success: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        warning: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        danger: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        info: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+    };
+    active: {
+        true: {
+            borderLayer: string;
+        };
+    };
+    equalWidth: {
+        true: {
+            stage: string;
+        };
+    };
+    interactive: {
+        true: {
+            innerLayer: string;
+        };
+    };
+    disabled: {
+        true: {
+            stage: string;
+        };
+    };
+}, {
+    container: string;
+    stage: string;
+    borderLayer: string;
+    innerLayer: string;
+    content: string;
+    label: string;
+    count: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/pipeline/pipeline.js

@@ -0,0 +1,91 @@
+import { tv } from 'tailwind-variants';
+export const pipelineVariants = tv({
+    slots: {
+        container: 'flex items-center gap-0 w-full',
+        stage: 'relative transition-all duration-300',
+        borderLayer: 'absolute inset-0 transition-all duration-300',
+        innerLayer: 'relative flex items-center justify-center bg-white transition-all duration-300 focus:outline-none',
+        content: 'text-center flex flex-col items-center justify-center',
+        label: 'font-medium text-default-600 leading-tight break-words',
+        count: 'font-bold text-default-900'
+    },
+    variants: {
+        size: {
+            sm: {
+                stage: 'min-w-[130px]',
+                borderLayer: 'h-20',
+                innerLayer: 'h-20',
+                label: 'text-[11px] max-w-[100px]',
+                count: 'text-xl mt-0.5',
+                content: 'px-4'
+            },
+            base: {
+                stage: 'min-w-[150px]',
+                borderLayer: 'h-24',
+                innerLayer: 'h-24',
+                label: 'text-xs max-w-[120px]',
+                count: 'text-2xl mt-1',
+                content: 'px-5'
+            },
+            lg: {
+                stage: 'min-w-[180px]',
+                borderLayer: 'h-28',
+                innerLayer: 'h-28',
+                label: 'text-sm max-w-[150px]',
+                count: 'text-3xl mt-1',
+                content: 'px-6'
+            }
+        },
+        color: {
+            default: { borderLayer: 'bg-default-200' },
+            primary: {
+                borderLayer: 'bg-blue-500',
+                label: 'text-default-700',
+                count: 'text-default-900'
+            },
+            success: {
+                borderLayer: 'bg-green-500',
+                label: 'text-default-700',
+                count: 'text-default-900'
+            },
+            warning: {
+                borderLayer: 'bg-amber-500',
+                label: 'text-default-700',
+                count: 'text-default-900'
+            },
+            danger: {
+                borderLayer: 'bg-rose-500',
+                label: 'text-default-700',
+                count: 'text-default-900'
+            },
+            info: {
+                borderLayer: 'bg-purple-500',
+                label: 'text-default-700',
+                count: 'text-default-900'
+            }
+        },
+        active: {
+            true: {
+                borderLayer: 'ring-2 ring-blue-500 ring-offset-2'
+            }
+        },
+        equalWidth: {
+            true: { stage: 'flex-1' }
+        },
+        interactive: {
+            true: {
+                innerLayer: 'cursor-pointer focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+            }
+        },
+        disabled: {
+            true: {
+                stage: 'opacity-50 cursor-not-allowed'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'base',
+        color: 'default',
+        equalWidth: true
+    }
+});

package/package.json

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