@makolabs/ripple 3.0.0 → 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

@@ -2,6 +2,7 @@
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
 	import { Size } from '../../variants.js';
+	import { formSizeTokens } from '../../forms/form-size.js';
 	import Popover from '../popover/Popover.svelte';
 	import type { ComboBoxProps, ComboBoxItem } from './combobox-types.js';
 
@@ -46,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
@@ -57,19 +56,14 @@
 		if (highlightedIndex >= filteredItems.length) highlightedIndex = 0;
 	});
 
-	const sizeClass = $derived(
-		{
-			[Size.XS]: 'h-7 text-xs',
-			[Size.SM]: 'h-8 text-sm',
-			[Size.MD]: 'h-10 text-sm',
-			[Size.LG]: 'h-12 text-base',
-			[Size.XL]: 'h-14 text-lg',
-			[Size.XXL]: 'h-16 text-lg'
-		}[size]
-	);
+	const tokens = $derived(formSizeTokens[size]);
 
 	function openMenu() {
 		if (disabled) return;
+		if (skipNextFocusOpen) {
+			skipNextFocusOpen = false;
+			return;
+		}
 		open = true;
 		query = '';
 	}
@@ -86,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') {
@@ -139,9 +147,14 @@
 	<Popover trigger="manual" bind:open panelClass="w-[var(--cbx-w,20rem)] p-0">
 		<div
 			class={cn(
-				'flex w-full items-center gap-2 rounded-lg border bg-white px-3 transition-colors',
+				'flex w-full items-center border bg-white transition-colors',
 				'focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-none',
-				sizeClass,
+				tokens.height,
+				tokens.padX,
+				tokens.text,
+				tokens.gap,
+				tokens.radius,
+				tokens.shadow,
 				hasErrors
 					? 'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500'
 					: 'border-default-300 focus-within:border-primary-500 focus-within:ring-primary-500',
@@ -172,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
@@ -184,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/dropdown/select.d.ts

@@ -1,45 +1,10 @@
 export declare const selectTV: import("tailwind-variants").TVReturnType<{
     size: {
-        xs: {
+        [k: string]: {
             trigger: string;
             triggerIcon: string;
-            container: string;
-            item: string;
-            base: string;
-        };
-        sm: {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
             item: string;
-            base: string;
-        };
-        md: {
-            trigger: string;
-            triggerIcon: string;
             container: string;
-            item: string;
-            base: string;
-        };
-        lg: {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
-            item: string;
-            base: string;
-        };
-        xl: {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
-            item: string;
-            base: string;
-        };
-        "2xl": {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
-            item: string;
             base: string;
         };
     };
@@ -71,46 +36,11 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
     emptyMessage: string;
 }, undefined, {
     size: {
-        xs: {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
-            item: string;
-            base: string;
-        };
-        sm: {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
-            item: string;
-            base: string;
-        };
-        md: {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
-            item: string;
-            base: string;
-        };
-        lg: {
+        [k: string]: {
             trigger: string;
             triggerIcon: string;
-            container: string;
             item: string;
-            base: string;
-        };
-        xl: {
-            trigger: string;
-            triggerIcon: string;
             container: string;
-            item: string;
-            base: string;
-        };
-        "2xl": {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
-            item: string;
             base: string;
         };
     };
@@ -142,46 +72,11 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
     emptyMessage: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
-        xs: {
+        [k: string]: {
             trigger: string;
             triggerIcon: string;
-            container: string;
             item: string;
-            base: string;
-        };
-        sm: {
-            trigger: string;
-            triggerIcon: string;
             container: string;
-            item: string;
-            base: string;
-        };
-        md: {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
-            item: string;
-            base: string;
-        };
-        lg: {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
-            item: string;
-            base: string;
-        };
-        xl: {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
-            item: string;
-            base: string;
-        };
-        "2xl": {
-            trigger: string;
-            triggerIcon: string;
-            container: string;
-            item: string;
             base: string;
         };
     };

package/dist/elements/dropdown/select.js

@@ -1,15 +1,49 @@
 import { tv } from 'tailwind-variants';
 import { Size } from '../../variants.js';
+import { formSizeTokens } from '../../forms/form-size.js';
+// Build the per-size slot overrides from the canonical form-size tokens
+// so Select coordinates visually with Input/Textarea/NumberInput at the
+// same `size` prop. Container max-heights and base min-widths stay here
+// because they're Select-specific (not tied to field sizing).
+const containerHeights = {
+    [Size.XS]: 'max-h-32',
+    [Size.SM]: 'max-h-40',
+    [Size.MD]: 'max-h-56',
+    [Size.LG]: 'max-h-64',
+    [Size.XL]: 'max-h-72',
+    [Size.XXL]: 'max-h-80'
+};
+const minWidths = {
+    [Size.XS]: 'min-w-20',
+    [Size.SM]: 'min-w-28',
+    [Size.MD]: 'min-w-32',
+    [Size.LG]: 'min-w-40',
+    [Size.XL]: 'min-w-48',
+    [Size.XXL]: 'min-w-56'
+};
+const sizeVariants = Object.fromEntries(Object.keys(formSizeTokens).map((key) => {
+    const t = formSizeTokens[key];
+    return [
+        key,
+        {
+            trigger: `${t.height} ${t.padX} ${t.padY} ${t.text} ${t.gap} ${t.radius} ${t.shadow}`,
+            triggerIcon: t.iconSize,
+            item: `${t.padX} ${t.padY} ${t.text}`,
+            container: containerHeights[key],
+            base: minWidths[key]
+        }
+    ];
+}));
 export const selectTV = tv({
     slots: {
         base: 'w-full',
         trigger: `relative flex items-center justify-between w-full text-left bg-white border
-			border-default-300 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:border-primary-500 focus-within:ring-primary-500 rounded-lg shadow-xs cursor-pointer transition-colors hover:border-default-400`,
+			border-default-300 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:border-primary-500 focus-within:ring-primary-500 cursor-pointer transition-colors hover:border-default-400`,
         triggerIcon: 'transition-transform duration-200 text-default-500',
         container: 'absolute z-50 w-full mt-1 bg-white overflow-clip border border-default-200 rounded-md shadow-sm origin-top-left top-full left-0 mt-2',
         searchInput: 'flex items-center gap-x-3 w-full outline-none px-2 h-10 border-b border-b-default-200',
         list: 'py-1 max-h-60 overflow-x-clip overflow-y-auto h-full',
-        item: `w-full px-3 py-2 text-sm text-left
+        item: `w-full text-left
 		data-[highlighted=true]:bg-default-100 data-[highlighted=true]:text-default-700
 		data-[selected=true]:bg-info-100 data-[selected=true]:text-info-500 data-[selected=true]:font-medium
 		data-[selected=true]:data-[highlighted=true]:bg-info-200 data-[selected=true]:data-[highlighted=true]:text-info-500
@@ -17,50 +51,7 @@ export const selectTV = tv({
         emptyMessage: 'px-3 py-2 text-sm text-default-500'
     },
     variants: {
-        size: {
-            [Size.XS]: {
-                trigger: 'h-6 px-2 py-1 text-xs gap-1',
-                triggerIcon: 'h-3 w-3',
-                container: 'max-h-40',
-                item: 'px-2 py-1 text-xs',
-                base: 'min-w-24'
-            },
-            [Size.SM]: {
-                trigger: 'h-8 px-3 py-2 text-sm gap-1.5',
-                triggerIcon: 'h-3.5 w-3.5',
-                container: 'max-h-48',
-                item: 'px-2.5 py-1.5 text-xs',
-                base: 'min-w-32'
-            },
-            [Size.MD]: {
-                trigger: 'h-10 px-3 py-2 text-base gap-2',
-                triggerIcon: 'h-4 w-4',
-                container: 'max-h-60',
-                item: 'px-3 py-2 text-sm',
-                base: 'min-w-40'
-            },
-            [Size.LG]: {
-                trigger: 'h-12 px-3 py-2 text-lg gap-2.5',
-                triggerIcon: 'h-5 w-5',
-                container: 'max-h-72',
-                item: 'px-4 py-2.5 text-base',
-                base: 'min-w-48'
-            },
-            [Size.XL]: {
-                trigger: 'h-12 px-5 py-3 text-lg gap-3',
-                triggerIcon: 'h-6 w-6',
-                container: 'max-h-80',
-                item: 'px-5 py-3 text-lg',
-                base: 'min-w-56'
-            },
-            [Size.XXL]: {
-                trigger: 'h-14 px-6 py-3.5 text-xl gap-4',
-                triggerIcon: 'h-7 w-7',
-                container: 'max-h-96',
-                item: 'px-6 py-3.5 text-xl',
-                base: 'min-w-64'
-            }
-        },
+        size: sizeVariants,
         disabled: {
             true: {
                 trigger: 'opacity-50 cursor-not-allowed hover:border-default-300',