@makolabs/ripple 3.0.1 → 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/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,38 @@
 		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;
+		// 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;
+		}, 300);
 	}
 
+	$effect(() => {
+		return () => clearTimeout(debounceTimer);
+	});
+
 	function handleKey(e: KeyboardEvent) {
 		if (disabled) return;
 		if (e.key === 'ArrowDown') {
@@ -169,7 +188,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 +200,32 @@
 					</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="text-default-400 hover:text-default-600 flex cursor-pointer items-center justify-center rounded"
+				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(''),
@@ -206,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();
 	}
@@ -402,7 +410,7 @@
 	{/each}
 {/if}
 
-{#if open}
+{#if open && !isMobile}
 	<Portal target={labelRef}>
 		<div
 			class={containerClass_}
@@ -411,66 +419,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={closeOnOutsideClick ? close : undefined}
+	></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'