@makolabs/ripple 3.0.1 → 3.0.2

package/dist/elements/accordion/Accordion.svelte

@@ -56,7 +56,7 @@
 				styles.header(),
 				'flex gap-3',
 				headerClass,
-				disabled && 'cursor-not-allowed opacity-50'
+				disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
 			)}
 			aria-expanded={open}
 			aria-controls={id}

package/dist/elements/combobox/ComboBox.svelte

@@ -47,9 +47,7 @@
 	};
 
 	const filteredItems = $derived(
-		onsearch
-			? items // when server-side, parent controls the filtered list
-			: items.filter((item) => (filter ?? defaultFilter)(item, query))
+		onsearch ? items : items.filter((item) => (filter ?? defaultFilter)(item, debouncedQuery))
 	);
 
 	// Reset highlight when list shrinks
@@ -62,6 +60,10 @@
 
 	function openMenu() {
 		if (disabled) return;
+		if (skipNextFocusOpen) {
+			skipNextFocusOpen = false;
+			return;
+		}
 		open = true;
 		query = '';
 	}
@@ -78,21 +80,35 @@
 		closeMenu();
 	}
 
+	let skipNextFocusOpen = false;
+
 	function clear(e: MouseEvent) {
 		e.stopPropagation();
 		value = null;
 		onchange?.(null);
+		skipNextFocusOpen = true;
 		inputEl?.focus();
 	}
 
+	let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+	let debouncedQuery = $state('');
+
 	function handleInput(e: Event) {
 		const v = (e.currentTarget as HTMLInputElement).value;
 		query = v;
 		open = true;
-		highlightedIndex = 0;
-		onsearch?.(v);
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			debouncedQuery = v;
+			highlightedIndex = 0;
+			onsearch?.(v);
+		}, 1000);
 	}
 
+	$effect(() => {
+		return () => clearTimeout(debounceTimer);
+	});
+
 	function handleKey(e: KeyboardEvent) {
 		if (disabled) return;
 		if (e.key === 'ArrowDown') {
@@ -169,7 +185,7 @@
 					type="button"
 					onclick={clear}
 					aria-label="Clear selection"
-					class="text-default-400 hover:text-default-700 flex size-5 items-center justify-center rounded"
+					class="text-default-400 hover:text-default-700 flex size-5 cursor-pointer items-center justify-center rounded"
 				>
 					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
 						<path
@@ -181,18 +197,35 @@
 					</svg>
 				</button>
 			{/if}
-			<svg
-				class={cn('text-default-400 size-4 transition-transform', open && 'rotate-180')}
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				aria-hidden="true"
+			<button
+				type="button"
+				onclick={(e) => {
+					e.stopPropagation();
+					if (!disabled) {
+						if (open) closeMenu();
+						else openMenu();
+					}
+				}}
+				class={cn(
+					'text-default-400 hover:text-default-700 flex cursor-pointer items-center justify-center rounded',
+					!disabled && 'hover:text-default-600'
+				)}
+				aria-label={open ? 'Close suggestions' : 'Open suggestions'}
+				{disabled}
 			>
-				<path
-					fill-rule="evenodd"
-					d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z"
-					clip-rule="evenodd"
-				/>
-			</svg>
+				<svg
+					class={cn('size-4 transition-transform', open && 'rotate-180')}
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					aria-hidden="true"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
 		</div>
 
 		{#snippet content()}

package/dist/elements/dropdown/Select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { tick } from 'svelte';
+	import { tick, onMount } from 'svelte';
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
 	import { selectTV } from './select.js';
@@ -10,6 +10,16 @@
 	import { Size } from '../../variants.js';
 	import Portal from '../../utils/Portal.svelte';
 
+	let isMobile = $state(
+		typeof window !== 'undefined' && window.matchMedia('(max-width: 639.98px)').matches
+	);
+	onMount(() => {
+		const mql = window.matchMedia('(max-width: 639.98px)');
+		const handler = (e: MediaQueryListEvent) => (isMobile = e.matches);
+		mql.addEventListener('change', handler);
+		return () => mql.removeEventListener('change', handler);
+	});
+
 	let {
 		items = [],
 		value = $bindable(''),
@@ -402,7 +412,7 @@
 	{/each}
 {/if}
 
-{#if open}
+{#if open && !isMobile}
 	<Portal target={labelRef}>
 		<div
 			class={containerClass_}
@@ -411,66 +421,92 @@
 			data-testid={buildTestId('select', 'list', testId)}
 			transition:fly={{ y: -8, duration: 300, easing: quintOut }}
 		>
-			{#if isSearchable}
-				<div class={searchInputClass_}>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="12"
-						height="12"
-						viewBox="0 0 12 12"
-						class="size-4"
-					>
-						<path
-							fill="currentColor"
-							d="M5 1a4 4 0 1 0 2.452 7.16l2.694 2.693a.5.5 0 1 0 .707-.707L8.16 7.453A4 4 0 0 0 5 1M2 5a3 3 0 1 1 6 0a3 3 0 0 1-6 0"
-						/>
-					</svg>
-					<input
-						bind:this={searchInputRef}
-						bind:value={searchQuery}
-						type="text"
-						class="w-full ring-0 outline-0"
-						placeholder="Search..."
-						aria-label="Search select options"
-						oninput={() => (hasSearched = true)}
-						data-testid={buildTestId('select', 'search', testId)}
-					/>
-				</div>
-			{/if}
-
-			{#if asyncLoading}
-				<div class={emptyMessageClass} data-select-loading="">{loadingText}</div>
-			{:else if filteredItems.length === 0}
-				<div class={emptyMessageClass}>{emptyText}</div>
-			{:else if groupedItems}
-				<ul class={listClass_}>
-					{#each groupedItems as group, gIdx (group.label ?? `__null__${gIdx}`)}
-						{#if group.label !== null}
-							<li
-								class="text-default-500 bg-default-50 px-3 py-1.5 text-xs font-semibold tracking-wide uppercase"
-								role="presentation"
-								data-select-group={group.label}
-							>
-								{group.label}
-							</li>
-						{/if}
-						{#each group.items as groupItem (groupItem.value)}
-							{@const flatIdx = filteredItems.indexOf(groupItem)}
-							{@const selected = valueArray.includes(groupItem.value)}
-							{@const highlighted = flatIdx === highlightedIndex}
-							{@render itemButton(groupItem, flatIdx, selected, highlighted)}
-						{/each}
-					{/each}
-				</ul>
-			{:else}
-				<ul class={listClass_}>
-					{#each filteredItems as flatItem, index (flatItem.value)}
-						{@const selected = valueArray.includes(flatItem.value)}
-						{@const highlighted = index === highlightedIndex}
-						{@render itemButton(flatItem, index, selected, highlighted)}
-					{/each}
-				</ul>
-			{/if}
+			{@render selectListContent()}
 		</div>
 	</Portal>
 {/if}
+
+{#if open && isMobile}
+	<button
+		type="button"
+		class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
+		aria-label="Close"
+		onclick={() => (open = 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"
+		role="listbox"
+		aria-labelledby="{selectId}-label"
+		transition:fly={{ y: 300, duration: 200, easing: quintOut }}
+	>
+		<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">
+			{@render selectListContent()}
+		</div>
+	</div>
+{/if}
+
+{#snippet selectListContent()}
+	{#if isSearchable}
+		<div class={searchInputClass_}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="12"
+				height="12"
+				viewBox="0 0 12 12"
+				class="size-4"
+			>
+				<path
+					fill="currentColor"
+					d="M5 1a4 4 0 1 0 2.452 7.16l2.694 2.693a.5.5 0 1 0 .707-.707L8.16 7.453A4 4 0 0 0 5 1M2 5a3 3 0 1 1 6 0a3 3 0 0 1-6 0"
+				/>
+			</svg>
+			<input
+				bind:this={searchInputRef}
+				bind:value={searchQuery}
+				type="text"
+				class="w-full ring-0 outline-0"
+				placeholder="Search..."
+				aria-label="Search select options"
+				oninput={() => (hasSearched = true)}
+				data-testid={buildTestId('select', 'search', testId)}
+			/>
+		</div>
+	{/if}
+
+	{#if asyncLoading}
+		<div class={emptyMessageClass} data-select-loading="">{loadingText}</div>
+	{:else if filteredItems.length === 0}
+		<div class={emptyMessageClass}>{emptyText}</div>
+	{:else if groupedItems}
+		<ul class={listClass_}>
+			{#each groupedItems as group, gIdx (group.label ?? `__null__${gIdx}`)}
+				{#if group.label !== null}
+					<li
+						class="text-default-500 bg-default-50 px-3 py-1.5 text-xs font-semibold tracking-wide uppercase"
+						role="presentation"
+						data-select-group={group.label}
+					>
+						{group.label}
+					</li>
+				{/if}
+				{#each group.items as groupItem (groupItem.value)}
+					{@const flatIdx = filteredItems.indexOf(groupItem)}
+					{@const selected = valueArray.includes(groupItem.value)}
+					{@const highlighted = flatIdx === highlightedIndex}
+					{@render itemButton(groupItem, flatIdx, selected, highlighted)}
+				{/each}
+			{/each}
+		</ul>
+	{:else}
+		<ul class={listClass_}>
+			{#each filteredItems as flatItem, index (flatItem.value)}
+				{@const selected = valueArray.includes(flatItem.value)}
+				{@const highlighted = index === highlightedIndex}
+				{@render itemButton(flatItem, index, selected, highlighted)}
+			{/each}
+		</ul>
+	{/if}
+{/snippet}

package/dist/elements/popover/Popover.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+	import { onMount } from 'svelte';
 	import type { PopoverProps, PopoverPlacement } from './popover-types.js';
 
 	let {
@@ -25,13 +28,25 @@
 	let showTimer: ReturnType<typeof setTimeout> | undefined;
 	let hideTimer: ReturnType<typeof setTimeout> | undefined;
 
-	// Panel position in viewport coordinates — updated on open and on
-	// scroll/resize so the panel tracks the trigger. Kept reactive so the
-	// style attribute re-renders when these change.
 	let panelTop = $state(0);
 	let panelLeft = $state(0);
 	let panelTransform = $state('');
 
+	// Mobile detection — below `sm` (640px), click/manual popovers
+	// render as a bottom sheet instead of a positioned dropdown.
+	// Hover popovers are skipped on mobile (no hover).
+	let isMobile = $state(
+		typeof window !== 'undefined' && window.matchMedia('(max-width: 639.98px)').matches
+	);
+	onMount(() => {
+		const mql = window.matchMedia('(max-width: 639.98px)');
+		const handler = (e: MediaQueryListEvent) => (isMobile = e.matches);
+		mql.addEventListener('change', handler);
+		return () => mql.removeEventListener('change', handler);
+	});
+
+	const useSheet = $derived(isMobile && trigger !== 'hover');
+
 	function show() {
 		if (disabled) return;
 		clearTimeout(showTimer);
@@ -65,7 +80,6 @@
 		open = false;
 	}
 
-	// Clean up any in-flight timers on unmount.
 	$effect(() => {
 		return () => {
 			clearTimeout(showTimer);
@@ -79,23 +93,12 @@
 
 	function handleWindowClick(e: MouseEvent) {
 		if (!closeOnOutsideClick || !open) return;
+		if (useSheet) return;
 		const target = e.target as Node;
-		// The panel lives outside the trigger wrapper in the DOM, so check both.
 		if (wrapper?.contains(target) || panelEl?.contains(target)) return;
 		close();
 	}
 
-	/**
-	 * Compute panel position from the trigger's bounding rect. Uses
-	 * `position: fixed` + a very high z-index so the panel sits above
-	 * sibling content (Storybook sidebars, sticky headers, etc.) instead
-	 * of being clipped / layered under it.
-	 *
-	 * The computed position is then clamped to the viewport with an 8px
-	 * gutter — this keeps panels on-screen near viewport edges on narrow
-	 * devices. We measure the panel's own rect so the clamp accounts for
-	 * the `translate(-50%, 0)` etc. transforms that re-anchor the panel.
-	 */
 	function updatePosition() {
 		if (!wrapper || !panelEl) return;
 		const r = wrapper.getBoundingClientRect();
@@ -124,10 +127,6 @@
 				break;
 		}
 
-		// Clamp to viewport. We re-measure the panel after applying the
-		// transform (next frame) because its true on-screen rect depends
-		// on `panelTransform`. Adjust `panelLeft`/`panelTop` so the rect
-		// ends up inside [VIEWPORT_GUTTER, viewport - VIEWPORT_GUTTER].
 		requestAnimationFrame(() => {
 			if (!panelEl) return;
 			const pr = panelEl.getBoundingClientRect();
@@ -144,13 +143,8 @@
 		});
 	}
 
-	/**
-	 * Re-measure on every open, and while open, on scroll/resize so the
-	 * panel follows its trigger when the page scrolls.
-	 */
 	$effect(() => {
-		if (!open) return;
-		// Initial placement (defer one frame so panelEl has mounted).
+		if (!open || useSheet) return;
 		requestAnimationFrame(updatePosition);
 
 		const handler = () => updatePosition();
@@ -162,15 +156,6 @@
 		};
 	});
 
-	/**
-	 * Portal the panel element to `document.body` once it mounts, so any
-	 * ancestor with `transform` / `filter` / `will-change` (Storybook's
-	 * docs container, a scaled preview, a card with transform-based
-	 * hover, etc.) doesn't re-parent our `position: fixed` panel and
-	 * clip / mis-position it. On unmount, we simply remove the node —
-	 * Svelte's own `{#if}` teardown will still work because it tracks
-	 * the element by reference, not by DOM path.
-	 */
 	$effect(() => {
 		if (!panelEl) return;
 		const el = panelEl;
@@ -202,14 +187,6 @@
 	data-testid={buildTestId('popover', undefined, testId)}
 >
 	{#if trigger === 'click'}
-		<!--
-			Click-mode: forward clicks to toggle. Do NOT add role/tabindex here
-			— consumers pass an interactive child (Button, <a>, etc.) that
-			handles its own focus/keyboard; adding them here would nest
-			interactive elements (invalid HTML + a11y issue). Keyboard support
-			comes via Enter/Space on the inner button dispatching a click,
-			which bubbles to this handler.
-		-->
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<span class="inline-flex" aria-haspopup="dialog" aria-expanded={open} onclick={toggle}>
@@ -227,12 +204,12 @@
 			{@render children()}
 		</span>
 	{:else}
-		<!-- manual — consumer drives `open` -->
 		<span class="inline-flex">{@render children()}</span>
 	{/if}
 </span>
 
-{#if open}
+<!-- Desktop: positioned panel -->
+{#if open && !useSheet}
 	<div
 		bind:this={panelEl}
 		role="dialog"
@@ -252,3 +229,29 @@
 		{@render content({ close })}
 	</div>
 {/if}
+
+<!-- Mobile: bottom sheet -->
+{#if open && useSheet}
+	<button
+		type="button"
+		class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
+		aria-label="Close"
+		onclick={close}
+	></button>
+	<div
+		role="dialog"
+		tabindex="-1"
+		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 }}
+		data-testid={buildTestId('popover', 'sheet', testId)}
+	>
+		<!-- Drag handle -->
+		<div class="flex cursor-pointer justify-center py-2">
+			<div class="bg-default-300 h-1 w-8 rounded-full"></div>
+		</div>
+		<!-- Content -->
+		<div class="flex-1 cursor-pointer overflow-y-auto p-2">
+			{@render content({ close })}
+		</div>
+	</div>
+{/if}

package/dist/filters/CompactFilters.svelte

@@ -314,7 +314,7 @@
 									type="button"
 									onclick={() => handleSelect(group, tab.value)}
 									class={cn(
-										'rounded-full border px-3 py-1 text-xs font-medium whitespace-nowrap',
+										'cursor-pointer rounded-full border px-3 py-1 text-xs font-medium whitespace-nowrap',
 										active
 											? 'bg-primary-50 text-primary-700 border-primary-200'
 											: 'border-default-200 text-default-700 hover:bg-default-50'