@makolabs/ripple 3.0.0 → 3.0.2

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,6 +156,17 @@
 		};
 	});
 
+	$effect(() => {
+		if (!panelEl) return;
+		const el = panelEl;
+		document.body.appendChild(el);
+		return () => {
+			if (el.parentNode === document.body) {
+				document.body.removeChild(el);
+			}
+		};
+	});
+
 	const arrowClass = $derived(
 		{
 			top: 'top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent',
@@ -182,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}>
@@ -207,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"
@@ -232,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'

package/dist/forms/Checkbox.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
 	import { buildTestId } from '../helper/testid.js';
-	import type { CheckboxProps } from '../index.js';
+	import { Size } from '../variants.js';
+	import { formSizeTokens } from './form-size.js';
+	import type { CheckboxProps, VariantSizes } from '../index.js';
 
 	let {
 		name,
@@ -10,21 +12,34 @@
 		disabled = false,
 		errors = [],
 		required = false,
+		size = Size.MD,
 		testId
 	}: CheckboxProps = $props();
 
+	// Checkbox box dimension uses Tailwind's `size-*` shorthand, scaling
+	// from size-3 (XS) up to size-7 (XXL) so it stays visually proportional
+	// to adjacent form controls at the same size.
+	const boxSize: Record<VariantSizes, string> = {
+		[Size.XS]: 'size-3',
+		[Size.SM]: 'size-3.5',
+		[Size.MD]: 'size-4',
+		[Size.LG]: 'size-5',
+		[Size.XL]: 'size-6',
+		[Size.XXL]: 'size-7'
+	};
+	const tokens = $derived(formSizeTokens[size]);
+
 	const checkboxClass = $derived(
-		cn('w-4 h-4 rounded text-primary-600 border-default-300 focus:ring-primary-500', {
-			'opacity-50 cursor-not-allowed': disabled,
-			'accent-danger-500': errors.length
-		})
+		cn(
+			'rounded text-primary-600 border-default-300 focus:ring-primary-500',
+			boxSize[size],
+			disabled && 'opacity-50 cursor-not-allowed',
+			errors.length && 'accent-danger-500'
+		)
 	);
 
 	const labelClass = $derived(
-		cn('text-sm font-medium', {
-			'text-default-700': !errors.length,
-			'text-danger-600': errors.length
-		})
+		cn('font-medium', tokens.text, errors.length ? 'text-danger-600' : 'text-default-700')
 	);
 </script>