@makolabs/ripple 3.0.2 → 3.0.3

package/dist/charts/Chart.svelte

@@ -143,38 +143,6 @@
 		return rgbToHex(r * (1 - amount), g * (1 - amount), b * (1 - amount));
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	function barGradient(baseHex: string, stacked: boolean): any {
-		if (stacked) {
-			// Horizontal sheen — same light direction for all segments
-			return {
-				type: 'linear',
-				x: 0,
-				y: 0,
-				x2: 1,
-				y2: 0,
-				colorStops: [
-					{ offset: 0, color: baseHex },
-					{ offset: 0.5, color: lighten(baseHex, 0.1) },
-					{ offset: 1, color: baseHex }
-				]
-			};
-		}
-		// Standalone bars — top-to-bottom depth
-		return {
-			type: 'linear',
-			x: 0,
-			y: 0,
-			x2: 0,
-			y2: 1,
-			colorStops: [
-				{ offset: 0, color: lighten(baseHex, 0.2) },
-				{ offset: 0.6, color: baseHex },
-				{ offset: 1, color: darken(baseHex, 0.15) }
-			]
-		};
-	}
-
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	function lineGradient(baseHex: string): any {
 		return {
@@ -435,9 +403,10 @@
 				color: getColor(seriesConfig.color),
 				emphasis: seriesConfig.emphasis || {
 					focus: 'series',
-					blurScope: 'global'
+					blurScope: 'global',
+					itemStyle: { borderRadius: 0 }
 				},
-				blur: { itemStyle: { opacity: 0.25 }, lineStyle: { opacity: 0.25 } },
+				blur: { itemStyle: { opacity: 0.25, borderRadius: 0 }, lineStyle: { opacity: 0.25 } },
 				animation: true,
 				animationDuration: AnimationDuration,
 				...(axisMarkLine && { markLine: axisMarkLine }),
@@ -475,8 +444,11 @@
 					barGap: '10%',
 					color: getColor(seriesConfig.color),
 					itemStyle: {
-						color: barGradient(getColor(seriesConfig.color) ?? '#6366f1', !!seriesConfig.stack),
-						opacity: seriesConfig.opacity ?? 1
+						color: getColor(seriesConfig.color) ?? '#6366f1',
+						opacity: seriesConfig.opacity ?? 1,
+						borderColor: darken(getColor(seriesConfig.color) ?? '#6366f1', 0.15),
+						borderWidth: 1,
+						borderRadius: [0, 0, 0, 0]
 					}
 				}),
 

package/dist/drawer/Drawer.svelte

@@ -37,8 +37,7 @@
 		header: headerVClass,
 		body,
 		footer: footerVClass,
-		title: titleVClass,
-		closeButton
+		title: titleVClass
 	} = $derived(
 		drawer({
 			open,
@@ -54,7 +53,6 @@
 	const headerClasses = $derived(cn(headerVClass(), headerClass));
 	const bodyClasses = $derived(cn(body(), bodyClass));
 	const titleClasses = $derived(cn(titleVClass(), titleClass));
-	const closeButtonClasses = $derived(cn(closeButton(), ''));
 	const footerClasses = $derived(cn(footerVClass(), 'mt-auto', footerClass));
 
 	function handleBackdropClick(e: MouseEvent) {
@@ -181,41 +179,36 @@
 				data-testid={buildTestId('drawer', 'dialog', testId)}
 			>
 				<div class={contentClasses}>
+					<!-- Always-visible close button -->
+					<button
+						type="button"
+						class="bg-default-100 text-default-600 hover:bg-default-200 hover:text-default-900 absolute top-2 right-2 z-10 flex size-8 cursor-pointer items-center justify-center rounded-full transition-colors"
+						onclick={handleCloseClick}
+						aria-label="Close drawer"
+						data-testid={buildTestId('drawer', 'close', testId)}
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12">
+							<path
+								fill="currentColor"
+								d="m1.897 2.054l.073-.084a.75.75 0 0 1 .976-.073l.084.073L6 4.939l2.97-2.97a.75.75 0 1 1 1.06 1.061L7.061 6l2.97 2.97a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L6 7.061l-2.97 2.97A.75.75 0 1 1 1.97 8.97L4.939 6l-2.97-2.97a.75.75 0 0 1-.072-.976l.073-.084z"
+							/>
+						</svg>
+					</button>
+
 					<!-- Header -->
-					{#if header || title}
+					{#if title}
+						<div class={headerClasses}>
+							<h3
+								id="drawer-title"
+								class={titleClasses}
+								data-testid={buildTestId('drawer', 'title', testId)}
+							>
+								{title}
+							</h3>
+						</div>
+					{:else if header}
 						<div class={headerClasses}>
-							{#if header}
-								{@render header()}
-							{:else}
-								{#if title}
-									<h3
-										id="drawer-title"
-										class={titleClasses}
-										data-testid={buildTestId('drawer', 'title', testId)}
-									>
-										{title}
-									</h3>
-								{/if}
-								<button
-									type="button"
-									class={closeButtonClasses}
-									onclick={handleCloseClick}
-									aria-label="Close drawer"
-									data-testid={buildTestId('drawer', 'close', testId)}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										width="12"
-										height="12"
-										viewBox="0 0 12 12"
-									>
-										<path
-											fill="currentColor"
-											d="m1.897 2.054l.073-.084a.75.75 0 0 1 .976-.073l.084.073L6 4.939l2.97-2.97a.75.75 0 1 1 1.06 1.061L7.061 6l2.97 2.97a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L6 7.061l-2.97 2.97A.75.75 0 1 1 1.97 8.97L4.939 6l-2.97-2.97a.75.75 0 0 1-.072-.976l.073-.084z"
-										/>
-									</svg>
-								</button>
-							{/if}
+							{@render header()}
 						</div>
 					{/if}
 

package/dist/drawer/drawer.js

@@ -4,8 +4,8 @@ export const drawer = tv({
     slots: {
         base: 'fixed inset-0 z-50 flex overflow-hidden',
         backdrop: 'fixed inset-0 transition-opacity bg-black/50',
-        contentWrapper: 'absolute flex flex-col transform transition-transform',
-        content: 'flex flex-col h-full w-full overflow-y-auto bg-white',
+        contentWrapper: 'absolute flex flex-col transform transition-transform max-w-[100vw]',
+        content: 'relative flex flex-col h-full w-full overflow-y-auto bg-white',
         header: 'flex items-center justify-between px-4 py-3 border-b border-default-200',
         body: 'flex-1 overflow-y-auto p-4',
         footer: 'flex justify-end border-t border-default-200 p-4',

package/dist/elements/combobox/ComboBox.svelte

@@ -97,12 +97,15 @@
 		const v = (e.currentTarget as HTMLInputElement).value;
 		query = v;
 		open = true;
+		// Fire onsearch immediately (documented "every keystroke" contract).
+		// Only debounce local filtering so rapid typing doesn't churn the
+		// DOM with intermediate filter results.
+		onsearch?.(v);
 		clearTimeout(debounceTimer);
 		debounceTimer = setTimeout(() => {
 			debouncedQuery = v;
 			highlightedIndex = 0;
-			onsearch?.(v);
-		}, 1000);
+		}, 300);
 	}
 
 	$effect(() => {
@@ -206,10 +209,7 @@
 						else openMenu();
 					}
 				}}
-				class={cn(
-					'text-default-400 hover:text-default-700 flex cursor-pointer items-center justify-center rounded',
-					!disabled && 'hover:text-default-600'
-				)}
+				class="text-default-400 hover:text-default-600 flex cursor-pointer items-center justify-center rounded"
 				aria-label={open ? 'Close suggestions' : 'Open suggestions'}
 				{disabled}
 			>

package/dist/elements/dropdown/Select.svelte

@@ -216,19 +216,17 @@
 	}
 
 	function handleClickOutside(event: MouseEvent) {
-		// Check if the click is inside the portal content
+		if (!open) return;
+		// On mobile the sheet handles its own close via backdrop.
+		if (isMobile) return;
 		const portalContent = document.querySelector('.ripple-portal .portal-content');
-
-		// If the click is inside either the label (trigger) or the portal content, don't close
+		const target = event.target as Node;
 		if (
-			(labelRef && labelRef.contains(event.target as Node)) ||
-			(portalContent && portalContent.contains(event.target as Node)) ||
-			!open
+			(labelRef && labelRef.contains(target)) ||
+			(portalContent && portalContent.contains(target))
 		) {
 			return;
 		}
-
-		// Otherwise close the dropdown
 		open = false;
 		onclose();
 	}

package/dist/elements/popover/Popover.svelte

@@ -236,7 +236,7 @@
 		type="button"
 		class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
 		aria-label="Close"
-		onclick={close}
+		onclick={closeOnOutsideClick ? close : undefined}
 	></button>
 	<div
 		role="dialog"

package/dist/forms/DateRange.svelte

@@ -333,24 +333,26 @@
 	{/if}
 
 	{#if isOpen && isMobile}
-		<button
-			type="button"
-			class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
-			aria-label="Close"
-			onclick={() => (isOpen = false)}
-		></button>
-		<div
-			class="fixed inset-x-0 bottom-0 z-[9999] flex max-h-[85vh] min-h-48 flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl"
-			transition:fly={{ y: 300, duration: 200, easing: quintOut }}
-			bind:this={calendarRef}
-		>
-			<div class="flex justify-center py-2">
-				<div class="bg-default-300 h-1 w-8 rounded-full"></div>
-			</div>
-			<div class="flex-1 cursor-pointer overflow-y-auto p-4">
-				{@render calendarContent()}
+		<Portal target={datePickerRef}>
+			<button
+				type="button"
+				class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
+				aria-label="Close"
+				onclick={() => (isOpen = false)}
+			></button>
+			<div
+				class="fixed inset-x-0 bottom-0 z-[9999] flex max-h-[85vh] min-h-48 flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl"
+				transition:fly={{ y: 300, duration: 200, easing: quintOut }}
+				bind:this={calendarRef}
+			>
+				<div class="flex justify-center py-2">
+					<div class="bg-default-300 h-1 w-8 rounded-full"></div>
+				</div>
+				<div class="flex-1 cursor-pointer overflow-y-auto p-4">
+					{@render calendarContent()}
+				</div>
 			</div>
-		</div>
+		</Portal>
 	{/if}
 </div>
 

package/dist/forms/calendar/Calendar.svelte

@@ -230,7 +230,6 @@
 	class={cn(
 		'inline-block bg-white select-none',
 		'border-default-200 rounded-lg border shadow-xs',
-		'max-sm:w-full max-sm:rounded-none max-sm:border-0 max-sm:shadow-none',
 		density.panel,
 		density.padding,
 		className

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

@@ -127,7 +127,14 @@
 		</button>
 
 		{#snippet content()}
-			<Calendar {value} {minDate} {maxDate} {size} onselect={(d) => handleSelect(d as Date)} />
+			<Calendar
+				{value}
+				{minDate}
+				{maxDate}
+				{size}
+				class="max-sm:w-full max-sm:rounded-none max-sm:border-0 max-sm:shadow-none"
+				onselect={(d) => handleSelect(d as Date)}
+			/>
 		{/snippet}
 	</Popover>
 

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

@@ -118,7 +118,10 @@
 
 	function setThisMonth() {
 		const now = new Date();
-		value = new Date(now.getFullYear(), now.getMonth(), 1);
+		const d = new Date(now.getFullYear(), now.getMonth(), 1);
+		if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), 1)) return;
+		if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), 1)) return;
+		value = d;
 		onselect?.(value);
 		open = false;
 	}
@@ -142,7 +145,11 @@
 		</label>
 	{/if}
 
-	<input type="hidden" {name} value={value?.toISOString() ?? ''} />
+	<input
+		type="hidden"
+		{name}
+		value={value ? `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}` : ''}
+	/>
 
 	<Popover trigger="manual" bind:open placement="bottom" {disabled}>
 		<button

package/dist/modal/modal.js

@@ -2,11 +2,11 @@ import { tv } from 'tailwind-variants';
 import { Size } from '../index.js';
 export const modal = tv({
     slots: {
-        base: 'fixed inset-0 z-50 flex items-center justify-center p-4',
+        base: 'fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4',
         backdrop: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
-        container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl',
-        header: 'px-6 py-4 border-b border-default-200 flex items-center justify-between shrink-0',
-        body: 'flex-1 px-6 py-4 overflow-y-auto',
+        container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl max-sm:max-w-none max-sm:max-h-[95vh]',
+        header: 'px-4 py-3 sm:px-6 sm:py-4 border-b border-default-200 flex items-center justify-between shrink-0',
+        body: 'flex-1 px-4 py-3 sm:px-6 sm:py-4 overflow-y-auto',
         footer: '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',

package/package.json

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