@makolabs/ripple 3.0.0 → 3.0.1

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';
 
@@ -57,16 +58,7 @@
 		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;
@@ -139,9 +131,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',

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',

package/dist/elements/popover/Popover.svelte

@@ -162,6 +162,26 @@
 		};
 	});
 
+	/**
+	 * 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;
+		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',

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>
 

package/dist/forms/DateRange.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { Size } from '../variants.js';
+	import { formSizeTokens } from './form-size.js';
 	import type { DateRangeProps } from '../index.js';
 	import Portal from '../utils/Portal.svelte';
 	import { fly } from 'svelte/transition';
@@ -17,11 +19,14 @@
 		endLabel = 'End date',
 		format = 'MM/dd/yyyy',
 		errors = [],
+		size = Size.MD,
 		id,
 		name,
 		onselect
 	}: DateRangeProps = $props();
 
+	const tokens = $derived(formSizeTokens[size]);
+
 	let isOpen = $state(false);
 	let hoveredDate = $state<Date | null>(null);
 	let datePickerRef = $state<HTMLDivElement | null>(null);
@@ -239,7 +244,12 @@
 			{id}
 			type="button"
 			class={cn(
-				'border-default-300 flex w-full items-center justify-between rounded-lg border bg-white px-3 py-2 text-sm shadow-xs',
+				'border-default-300 flex w-full items-center justify-between border bg-white',
+				tokens.height,
+				tokens.padX,
+				tokens.text,
+				tokens.radius,
+				tokens.shadow,
 				disabled
 					? 'bg-default-100 text-default-400 cursor-not-allowed opacity-50'
 					: errors?.length
@@ -259,7 +269,7 @@
 						? `${formatDate(startDate)} - Select end date`
 						: placeholder}
 			</span>
-			<svg class="text-default-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+			<svg class={cn('text-default-400', tokens.iconSize)} viewBox="0 0 20 20" fill="currentColor">
 				<path
 					fill-rule="evenodd"
 					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
@@ -271,11 +281,16 @@
 		{#if startDate || endDate}
 			<button
 				type="button"
-				class="text-default-400 hover:text-default-500 absolute top-1/2 right-10 -translate-y-1/2"
+				class={cn(
+					'text-default-400 hover:text-default-500 absolute top-1/2 -translate-y-1/2',
+					// Sit just left of the calendar icon; use the token gap
+					// so the clear button stays visually tied to the icon.
+					'right-8'
+				)}
 				onclick={clearDates}
 				aria-label="Clear dates"
 			>
-				<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+				<svg class={cn(tokens.iconSize)} viewBox="0 0 20 20" fill="currentColor">
 					<path
 						fill-rule="evenodd"
 						d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"

package/dist/forms/Input.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 './form-size.js';
 	import type { InputProps } from '../index.js';
 
 	let {
@@ -20,26 +21,25 @@
 	}: InputProps = $props();
 
 	const BASIC_TYPES = ['text', 'email', 'password', 'number', 'tel', 'url', 'date', 'textarea'];
+	const tokens = $derived(formSizeTokens[size]);
 	const inputClasses = $derived(
 		cn(
-			'transition-colors placeholder:text-default-400',
-			{
-				'border rounded-lg shadow-xs w-full bg-white px-3 py-2 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2':
-					BASIC_TYPES.includes(type),
-				'w-full bg-white px-3 py-2 text-sm resize-y min-h-[100px]': type === 'textarea',
-				'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500':
-					errors.length,
-				'opacity-50 cursor-not-allowed': disabled,
-				...(BASIC_TYPES.includes(type)
-					? {
-							'h-8 text-sm': size === Size.SM,
-							'h-10 text-base': size === Size.MD,
-							'h-12 text-lg': size === Size.LG
-						}
-					: {}),
-				'border-default-300 focus-within:border-primary-500 focus-within:ring-primary-500':
-					!errors.length
-			},
+			'w-full bg-white transition-colors placeholder:text-default-400',
+			tokens.padX,
+			tokens.text,
+			// All basic types (including textarea) get the bordered look.
+			BASIC_TYPES.includes(type) && [
+				'border focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2',
+				tokens.radius,
+				tokens.shadow
+			],
+			// Single-line types get a fixed height; textarea is content-driven.
+			type !== 'textarea' && tokens.height,
+			type === 'textarea' && ['resize-y min-h-[100px]', tokens.padY],
+			errors.length
+				? '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',
+			disabled && 'opacity-50 cursor-not-allowed',
 			className
 		)
 	);

package/dist/forms/MarketSelector.svelte

@@ -19,7 +19,7 @@
 		labelLayout = 'inline',
 		labelClass = undefined,
 		color = Color.PRIMARY,
-		size = Size.SM,
+		size = Size.MD,
 		compact = false,
 		flagsOnly = false,
 		disabled = false,

package/dist/forms/NumberInput.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 './form-size.js';
 	import type { NumberInputProps } from '../index.js';
 
 	let {
@@ -26,18 +27,16 @@
 
 	const selectedOption = $derived(units.find((u) => u.value === unit));
 
+	const tokens = $derived(formSizeTokens[size]);
+
 	const containerClass = $derived(
 		cn(
-			'relative flex items-center gap-1 rounded-lg border bg-white shadow-xs',
-			{
-				'border-danger-300': errors?.length,
-				'cursor-not-allowed opacity-50': disabled
-			},
-			{
-				'h-8': size === Size.SM,
-				'h-10': size === Size.MD,
-				'h-12': size === Size.LG
-			},
+			'relative flex items-center gap-1 border bg-white',
+			tokens.radius,
+			tokens.shadow,
+			tokens.height,
+			errors?.length && 'border-danger-300',
+			disabled && 'cursor-not-allowed opacity-50',
 			'border-default-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
 			className
 		)
@@ -45,12 +44,9 @@
 
 	const inputClass = $derived(
 		cn(
-			'w-full bg-transparent outline-none disabled:cursor-not-allowed px-3 placeholder:text-default-400',
-			{
-				'text-sm': size === Size.SM,
-				'text-base': size === Size.MD,
-				'text-lg': size === Size.LG
-			}
+			'w-full bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-default-400',
+			tokens.padX,
+			tokens.text
 		)
 	);
 

package/dist/forms/RadioGroup.svelte

@@ -2,6 +2,7 @@
 	import { cn } from '../helper/cls.js';
 	import { buildTestId } from '../helper/testid.js';
 	import { Color, Size } from '../variants.js';
+	import { formSizeTokens } from './form-size.js';
 	import type { RadioGroupProps } from '../index.js';
 
 	let {
@@ -21,7 +22,10 @@
 	}: RadioGroupProps = $props();
 
 	const hasErrors = $derived(errors.length > 0);
+	const tokens = $derived(formSizeTokens[size]);
 
+	// Radio circle scales with the form ladder — `size-3` at xs through
+	// `size-6` at xl. 2xl aliases xl.
 	const dotSize = $derived(
 		{
 			[Size.XS]: 'size-3',
@@ -29,7 +33,7 @@
 			[Size.MD]: 'size-4',
 			[Size.LG]: 'size-5',
 			[Size.XL]: 'size-6',
-			[Size.XXL]: 'size-7'
+			[Size.XXL]: 'size-6'
 		}[size]
 	);
 
@@ -104,7 +108,7 @@
 					{/if}
 				</span>
 				<span class="flex flex-col">
-					<span class="text-default-800 text-sm">{option.label}</span>
+					<span class={cn('text-default-800', tokens.text)}>{option.label}</span>
 					{#if option.description}
 						<span class="text-default-500 text-xs">{option.description}</span>
 					{/if}

package/dist/forms/Tags.svelte

@@ -2,6 +2,7 @@
 	import Badge from '../elements/badge/Badge.svelte';
 	import { Size } from '../variants.js';
 	import { cn } from '../helper/cls.js';
+	import { formSizeTokens } from './form-size.js';
 	import { fade } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
 	import { quintOut } from 'svelte/easing';
@@ -34,6 +35,25 @@
 		showSuggestions ? suggestions.filter(isUnselected).filter(matchesInput).slice(0, 5) : []
 	);
 
+	const tokens = $derived(formSizeTokens[size]);
+
+	// Chip size shifted one tier down from the Tags container so chip
+	// text matches the container text (e.g. Tags `md` uses `text-xs`, so
+	// Badge `sm` — which is also `text-xs` — lines up, instead of Badge
+	// `md` which jumps to `text-sm`).
+	const chipSize = $derived(
+		(
+			{
+				[Size.XS]: Size.XS,
+				[Size.SM]: Size.XS,
+				[Size.MD]: Size.SM,
+				[Size.LG]: Size.MD,
+				[Size.XL]: Size.LG,
+				[Size.XXL]: Size.LG
+			} as const
+		)[size]
+	);
+
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Enter') {
 			event.preventDefault();
@@ -108,12 +128,14 @@
 
 	const containerClass = $derived(
 		cn(
-			'relative flex flex-wrap gap-2 rounded-lg border bg-white shadow-xs px-3 py-2',
+			'relative flex flex-wrap gap-2 border bg-white',
+			tokens.radius,
+			tokens.shadow,
+			tokens.padX,
+			tokens.padY,
 			'border-default-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
-			{
-				'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500':
-					errors?.length
-			},
+			errors?.length &&
+				'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500',
 			className
 		)
 	);
@@ -143,7 +165,7 @@
 				transition:fade={{ duration: 250, easing: quintOut }}
 				animate:flip={{ duration: 300, easing: quintOut }}
 			>
-				<Badge {size} color="info" onclose={() => handleTagRemoval(tag)} class="shadow-xs">
+				<Badge size={chipSize} color="info" onclose={() => handleTagRemoval(tag)} class="shadow-xs">
 					{tag}
 				</Badge>
 			</div>
@@ -154,11 +176,10 @@
 			{name}
 			id={name}
 			{placeholder}
-			class={cn('placeholder:text-default-400 min-w-[120px] flex-1 bg-transparent outline-none', {
-				'text-sm': size === Size.SM,
-				'text-base': size === Size.MD,
-				'text-lg': size === Size.LG
-			})}
+			class={cn(
+				'placeholder:text-default-400 min-w-[120px] flex-1 bg-transparent outline-none',
+				tokens.text
+			)}
 			type="text"
 			autocomplete="off"
 			onkeydown={handleKeydown}

package/dist/forms/Textarea.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 './form-size.js';
 	import type { TextareaProps } from '../index.js';
 
 	let {
@@ -27,25 +28,19 @@
 
 	let el = $state<HTMLTextAreaElement | undefined>();
 
-	const sizeClass = $derived(
-		{
-			[Size.XS]: 'text-xs',
-			[Size.SM]: 'text-sm',
-			[Size.MD]: 'text-sm',
-			[Size.LG]: 'text-base',
-			[Size.XL]: 'text-lg',
-			[Size.XXL]: 'text-lg'
-		}[size]
-	);
-
+	const tokens = $derived(formSizeTokens[size]);
 	const hasErrors = $derived(errors.length > 0);
 
 	const textareaClasses = $derived(
 		cn(
-			'w-full rounded-lg border bg-white px-3 py-2 shadow-xs transition-colors',
+			'w-full border bg-white transition-colors',
 			'placeholder:text-default-400',
 			'focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2',
-			sizeClass,
+			tokens.radius,
+			tokens.shadow,
+			tokens.padX,
+			tokens.padY,
+			tokens.text,
 			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',

package/dist/forms/Toggle.svelte

@@ -2,6 +2,7 @@
 	import { cn } from '../helper/cls.js';
 	import { Color, Size } from '../variants.js';
 	import { buildTestId } from '../helper/testid.js';
+	import { formSizeTokens } from './form-size.js';
 	import type { ToggleProps, VariantColors, VariantSizes } from '../index.js';
 
 	let {
@@ -35,13 +36,19 @@
 			)[color]
 	);
 
+	const tokens = $derived(formSizeTokens[size]);
+
+	// Track + thumb + on-state offset ladder. Chosen to roughly match the
+	// height of an Input at the same `size` (20/24/28/36/44px) so a row
+	// with a Toggle and an Input reads evenly. 2xl aliases xl — form
+	// controls cap at xl.
 	const toggleSize = $derived(
 		(
 			{
-				[Size.XS]: 'w-8 h-4',
-				[Size.SM]: 'w-8 h-4',
-				[Size.MD]: 'w-10 h-5',
-				[Size.LG]: 'w-12 h-6',
+				[Size.XS]: 'w-6 h-3',
+				[Size.SM]: 'w-7 h-3.5',
+				[Size.MD]: 'w-8 h-4',
+				[Size.LG]: 'w-10 h-5',
 				[Size.XL]: 'w-12 h-6',
 				[Size.XXL]: 'w-12 h-6'
 			} satisfies Record<VariantSizes, string>
@@ -51,10 +58,10 @@
 	const thumbSize = $derived(
 		(
 			{
-				[Size.XS]: 'h-3 w-3',
-				[Size.SM]: 'h-3 w-3',
-				[Size.MD]: 'h-4 w-4',
-				[Size.LG]: 'h-5 w-5',
+				[Size.XS]: 'h-2 w-2',
+				[Size.SM]: 'h-2.5 w-2.5',
+				[Size.MD]: 'h-3 w-3',
+				[Size.LG]: 'h-4 w-4',
 				[Size.XL]: 'h-5 w-5',
 				[Size.XXL]: 'h-5 w-5'
 			} satisfies Record<VariantSizes, string>
@@ -64,10 +71,10 @@
 	const thumbPosition = $derived(
 		(
 			{
-				[Size.XS]: value ? 'translate-x-4' : 'translate-x-0.5',
-				[Size.SM]: value ? 'translate-x-4' : 'translate-x-0.5',
-				[Size.MD]: value ? 'translate-x-5' : 'translate-x-0.5',
-				[Size.LG]: value ? 'translate-x-6' : 'translate-x-0.5',
+				[Size.XS]: value ? 'translate-x-3' : 'translate-x-0.5',
+				[Size.SM]: value ? 'translate-x-3.5' : 'translate-x-0.5',
+				[Size.MD]: value ? 'translate-x-4' : 'translate-x-0.5',
+				[Size.LG]: value ? 'translate-x-5' : 'translate-x-0.5',
 				[Size.XL]: value ? 'translate-x-6' : 'translate-x-0.5',
 				[Size.XXL]: value ? 'translate-x-6' : 'translate-x-0.5'
 			} satisfies Record<VariantSizes, string>
@@ -112,11 +119,12 @@
 	);
 
 	const labelClasses = $derived(
-		cn('text-sm font-medium', {
-			'text-default-700': !errors.length,
-			'text-danger-600': errors.length,
-			'opacity-50': disabled
-		})
+		cn(
+			'font-medium',
+			tokens.text,
+			errors.length ? 'text-danger-600' : 'text-default-700',
+			disabled && 'opacity-50'
+		)
 	);
 
 	function handleKeyDown(event: KeyboardEvent) {

package/dist/forms/calendar/Calendar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
+	import { Size } from '../../variants.js';
+	import type { VariantSizes } from '../../index.js';
 	import type { CalendarProps } from './calendar-types.js';
 
 	let {
@@ -14,11 +16,91 @@
 		weekStartsOn = 1,
 		hideHeader = false,
 		disabled = false,
+		size = Size.MD,
 		class: className = '',
 		onselect,
 		testId
 	}: CalendarProps = $props();
 
+	// Calendar dimensions don't map cleanly onto form-size tokens — a
+	// date grid's "size" means cell + panel width, not input height. So
+	// we maintain a dedicated ladder here, tuned so a Calendar at the
+	// same `size` as its enclosing DatePicker feels proportional.
+	type CalendarDensity = {
+		panel: string;
+		padding: string;
+		cell: string;
+		navBtn: string;
+		navIcon: string;
+		monthText: string;
+		dayHeaderText: string;
+		cellText: string;
+	};
+	const calendarSize: Record<VariantSizes, CalendarDensity> = {
+		[Size.XS]: {
+			panel: 'w-48',
+			padding: 'p-2',
+			cell: 'size-6',
+			navBtn: 'size-5',
+			navIcon: 'size-3',
+			monthText: 'text-xs',
+			dayHeaderText: 'text-[9px]',
+			cellText: 'text-[10px]'
+		},
+		[Size.SM]: {
+			panel: 'w-56',
+			padding: 'p-2.5',
+			cell: 'size-7',
+			navBtn: 'size-6',
+			navIcon: 'size-3.5',
+			monthText: 'text-xs',
+			dayHeaderText: 'text-[10px]',
+			cellText: 'text-xs'
+		},
+		[Size.MD]: {
+			panel: 'w-64',
+			padding: 'p-3',
+			cell: 'size-8',
+			navBtn: 'size-7',
+			navIcon: 'size-4',
+			monthText: 'text-sm',
+			dayHeaderText: 'text-[10px]',
+			cellText: 'text-xs'
+		},
+		[Size.LG]: {
+			panel: 'w-72',
+			padding: 'p-3.5',
+			cell: 'size-9',
+			navBtn: 'size-8',
+			navIcon: 'size-4',
+			monthText: 'text-base',
+			dayHeaderText: 'text-xs',
+			cellText: 'text-sm'
+		},
+		[Size.XL]: {
+			panel: 'w-80',
+			padding: 'p-4',
+			cell: 'size-10',
+			navBtn: 'size-9',
+			navIcon: 'size-5',
+			monthText: 'text-lg',
+			dayHeaderText: 'text-xs',
+			cellText: 'text-sm'
+		},
+		// Form controls cap at xl — see `form-size.ts`.
+		[Size.XXL]: {
+			panel: 'w-80',
+			padding: 'p-4',
+			cell: 'size-10',
+			navBtn: 'size-9',
+			navIcon: 'size-5',
+			monthText: 'text-lg',
+			dayHeaderText: 'text-xs',
+			cellText: 'text-sm'
+		}
+	};
+	const density = $derived(calendarSize[size]);
+
 	const anchor = $derived(initialMonth ?? value ?? valueStart ?? new Date());
 
 	let viewYear = $state(anchor.getFullYear());
@@ -146,7 +228,9 @@
 
 <div
 	class={cn(
-		'border-default-200 inline-block w-64 rounded-lg border bg-white p-3 shadow-xs select-none',
+		'border-default-200 inline-block rounded-lg border bg-white shadow-xs select-none',
+		density.panel,
+		density.padding,
 		className
 	)}
 	data-testid={buildTestId('calendar', undefined, testId)}
@@ -156,11 +240,14 @@
 			<button
 				type="button"
 				onclick={prevMonth}
-				class="text-default-500 hover:bg-default-100 hover:text-default-800 flex size-7 cursor-pointer items-center justify-center rounded"
+				class={cn(
+					'text-default-500 hover:bg-default-100 hover:text-default-800 flex cursor-pointer items-center justify-center rounded',
+					density.navBtn
+				)}
 				aria-label="Previous month"
 				{disabled}
 			>
-				<svg class="size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+				<svg class={density.navIcon} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
 					<path
 						fill-rule="evenodd"
 						d="M12.78 5.22a.75.75 0 0 1 0 1.06L9.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0z"
@@ -168,15 +255,18 @@
 					/>
 				</svg>
 			</button>
-			<span class="text-default-800 text-sm font-semibold">{monthLabel}</span>
+			<span class={cn('text-default-800 font-semibold', density.monthText)}>{monthLabel}</span>
 			<button
 				type="button"
 				onclick={nextMonth}
-				class="text-default-500 hover:bg-default-100 hover:text-default-800 flex size-7 cursor-pointer items-center justify-center rounded"
+				class={cn(
+					'text-default-500 hover:bg-default-100 hover:text-default-800 flex cursor-pointer items-center justify-center rounded',
+					density.navBtn
+				)}
 				aria-label="Next month"
 				{disabled}
 			>
-				<svg class="size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+				<svg class={density.navIcon} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
 					<path
 						fill-rule="evenodd"
 						d="M7.22 14.78a.75.75 0 0 1 0-1.06L10.94 10 7.22 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0z"
@@ -187,7 +277,12 @@
 		</div>
 	{/if}
 
-	<div class="text-default-400 mb-1 grid grid-cols-7 gap-0.5 text-center text-[10px] font-medium">
+	<div
+		class={cn(
+			'text-default-400 mb-1 grid grid-cols-7 gap-0.5 text-center font-medium',
+			density.dayHeaderText
+		)}
+	>
 		{#each dayHeaders() as d (d)}
 			<div>{d}</div>
 		{/each}
@@ -202,7 +297,9 @@
 				aria-pressed={cell.isSelected}
 				aria-label={cell.date.toLocaleDateString()}
 				class={cn(
-					'relative flex size-8 items-center justify-center rounded text-xs transition-colors',
+					'relative flex items-center justify-center rounded transition-colors',
+					density.cell,
+					density.cellText,
 					!cell.inMonth && 'text-default-300',
 					cell.inMonth && !cell.disabled && 'text-default-700 hover:bg-default-100 cursor-pointer',
 					cell.disabled && 'text-default-200 cursor-not-allowed',

package/dist/forms/calendar/calendar-types.d.ts

@@ -1,4 +1,5 @@
 import type { ClassValue } from 'tailwind-variants';
+import type { VariantSizes } from '../../index.js';
 /**
  * Calendar selection mode.
  * - `'single'`: one date. Bind to `value`.
@@ -31,6 +32,13 @@ export type CalendarProps = {
     hideHeader?: boolean;
     /** Disable all interaction. */
     disabled?: boolean;
+    /**
+     * Density preset. Scales day cells, headers, and overall panel width
+     * to match the tight form-size ladder so a `size="sm"` Calendar fits
+     * inside a `size="sm"` DatePicker / DateRange popover without feeling
+     * oversized. `2xl` aliases `xl`. @default 'md'
+     */
+    size?: VariantSizes;
     /** Wrapper class. */
     class?: ClassValue;
     /**

package/dist/forms/date-picker/DatePicker.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 '../form-size.js';
 	import Popover from '../../elements/popover/Popover.svelte';
 	import Calendar from '../calendar/Calendar.svelte';
 	import type { DatePickerProps } from './date-picker-types.js';
@@ -38,16 +39,7 @@
 	const display = $derived(value ? formatDate(value) : '');
 	const hasErrors = $derived(errors.length > 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 clear(e: MouseEvent) {
 		e.stopPropagation();
@@ -83,9 +75,14 @@
 			aria-expanded={open}
 			aria-invalid={hasErrors}
 			class={cn(
-				'flex w-full items-center justify-between gap-2 rounded-lg border bg-white px-3 transition-colors',
+				'flex w-full items-center justify-between 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',
@@ -115,7 +112,7 @@
 				</button>
 			{:else}
 				<svg
-					class="text-default-400 size-4"
+					class={cn('text-default-400', tokens.iconSize)}
 					viewBox="0 0 20 20"
 					fill="currentColor"
 					aria-hidden="true"
@@ -130,7 +127,7 @@
 		</button>
 
 		{#snippet content()}
-			<Calendar {value} {minDate} {maxDate} onselect={(d) => handleSelect(d as Date)} />
+			<Calendar {value} {minDate} {maxDate} {size} onselect={(d) => handleSelect(d as Date)} />
 		{/snippet}
 	</Popover>
 

package/dist/forms/form-size.d.ts

@@ -0,0 +1,37 @@
+import type { VariantSizes } from '../index.js';
+/**
+ * Canonical size tokens used by every form control — `Input`, `Textarea`,
+ * `NumberInput`, `Tags`, `Checkbox`, and the select-based controls.
+ *
+ * The goal is that a form using `size="sm"` across mixed controls looks
+ * vertically aligned and typographically coordinated. Before this map,
+ * each component had its own inline size map that disagreed with the
+ * others (e.g. `Input` only supported SM/MD/LG while `Textarea` supported
+ * all six, and `MD` meant `text-base` in `Input` but `text-sm` in
+ * `Textarea`).
+ *
+ * Multi-line controls (Textarea) read only `padX` / `padY` / `text` —
+ * height is content-driven. Single-line controls also read `height`.
+ */
+export type FormSizeTokens = {
+    /** Control height for single-line inputs (e.g. `h-10`). */
+    height: string;
+    /** Horizontal padding token (e.g. `px-3`). */
+    padX: string;
+    /** Vertical padding, used by multi-line controls and chip rows. */
+    padY: string;
+    /** Font size token (e.g. `text-base`). */
+    text: string;
+    /** Inline gap between leading icon and text (e.g. `gap-2`). */
+    gap: string;
+    /** Inline icon dimension (e.g. `size-4`). */
+    iconSize: string;
+    /** Rounded corner radius that scales with the control (e.g. `rounded-lg`). */
+    radius: string;
+    /**
+     * Drop shadow. `shadow-none` at the smallest sizes so `xs` / inline
+     * table cells don't stand out against their container.
+     */
+    shadow: string;
+};
+export declare const formSizeTokens: Record<VariantSizes, FormSizeTokens>;

package/dist/forms/form-size.js

@@ -0,0 +1,67 @@
+import { Size } from '../variants.js';
+// Tight ladder by design — we prefer compact, focused form controls
+// over bulky ones. `md` (the default) sits at `h-7` / `text-xs` so a
+// stock form reads dense; consumers who want roomier controls opt up to
+// `lg` / `xl`. `xs` is unmistakably inline-text-in-a-table-cell — 20px
+// tall, no shadow, barely-there rounded corners.
+//
+// `2xl` (`Size.XXL`) intentionally aliases `xl` for form controls: form
+// fields don't need a sixth, jumbo tier — anything larger reads as a
+// display element rather than an input. We still accept the token (the
+// `Size` enum exposes it library-wide) and quietly fall back to `xl`
+// rather than requiring every component to exclude it from its size type.
+const xl = {
+    height: 'h-11',
+    padX: 'px-3.5',
+    padY: 'py-2.5',
+    text: 'text-base',
+    gap: 'gap-2.5',
+    iconSize: 'size-5',
+    radius: 'rounded-lg',
+    shadow: 'shadow-xs'
+};
+export const formSizeTokens = {
+    [Size.XS]: {
+        height: 'h-5',
+        padX: 'px-1',
+        padY: 'py-0',
+        text: 'text-xs',
+        gap: 'gap-1',
+        iconSize: 'size-3',
+        radius: 'rounded-sm',
+        shadow: 'shadow-none'
+    },
+    [Size.SM]: {
+        height: 'h-6',
+        padX: 'px-1.5',
+        padY: 'py-0.5',
+        text: 'text-xs',
+        gap: 'gap-1',
+        iconSize: 'size-3',
+        radius: 'rounded',
+        shadow: 'shadow-xs'
+    },
+    [Size.MD]: {
+        height: 'h-7',
+        padX: 'px-2',
+        padY: 'py-1',
+        text: 'text-xs',
+        gap: 'gap-1.5',
+        iconSize: 'size-3.5',
+        radius: 'rounded-md',
+        shadow: 'shadow-xs'
+    },
+    [Size.LG]: {
+        height: 'h-9',
+        padX: 'px-2.5',
+        padY: 'py-1.5',
+        text: 'text-sm',
+        gap: 'gap-2',
+        iconSize: 'size-4',
+        radius: 'rounded-md',
+        shadow: 'shadow-xs'
+    },
+    [Size.XL]: xl,
+    // Form controls cap at xl visually — see comment above.
+    [Size.XXL]: xl
+};

package/dist/forms/form-types.d.ts

@@ -291,6 +291,11 @@ export interface DateRangeProps {
      */
     format?: string;
     errors?: string[];
+    /**
+     * Trigger control size — shares the form-size ladder with `Input`,
+     * `Select`, etc. so a row of mixed controls lines up. @default 'md'
+     */
+    size?: VariantSizes;
     /**
      * Fires when the user completes a selection. Both dates may be
      * undefined (cleared).

package/dist/forms/segmented-control.js

@@ -1,6 +1,7 @@
 import { tv } from 'tailwind-variants';
 import { cn } from '../helper/cls.js';
-import { Color, Size } from '../variants.js';
+import { Color } from '../variants.js';
+import { formSizeTokens } from './form-size.js';
 export const segmentedTrack = tv({
     // `max-w-full overflow-x-auto` + hidden scrollbar lets a long segment
     // row swipe on narrow viewports instead of bleeding past the parent.
@@ -36,18 +37,18 @@ const selectedByColor = {
     [Color.WARNING]: 'bg-warning-600 text-white shadow-sm',
     [Color.DANGER]: 'bg-danger-600 text-white shadow-sm'
 };
-const segmentSize = {
-    [Size.XS]: 'gap-1 px-2 py-1 text-xs',
-    [Size.SM]: 'gap-1.5 px-3 py-1.5 text-xs',
-    [Size.MD]: 'gap-1.5 px-3 py-1.5 text-sm',
-    [Size.LG]: 'gap-2 px-4 py-2 text-base',
-    [Size.XL]: 'gap-2 px-4 py-2.5 text-lg',
-    [Size.XXL]: 'gap-2 px-5 py-3 text-xl'
-};
+// Pull padding/text/gap from the shared form-size tokens so a
+// SegmentedControl at `size="md"` coordinates with Input / Select /
+// DateRange / etc. at the same tier. Segments don't use `height` —
+// their height falls out of text + padding.
+function segmentSize(size) {
+    const t = formSizeTokens[size];
+    return `${t.gap} ${t.padX} ${t.padY} ${t.text}`;
+}
 export function segmentClasses(args) {
     const { selected, disabled, appearance, color, size } = args;
     if (appearance === 'pills') {
-        const pillBase = cn('flex cursor-pointer items-center justify-center rounded-full font-medium transition-colors duration-150 shrink-0 whitespace-nowrap', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-offset-2', segmentSize[size], disabled && 'cursor-not-allowed opacity-50');
+        const pillBase = cn('flex cursor-pointer items-center justify-center rounded-full font-medium transition-colors duration-150 shrink-0 whitespace-nowrap', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-offset-2', segmentSize(size), disabled && 'cursor-not-allowed opacity-50');
         if (disabled)
             return cn(pillBase, 'text-default-400');
         if (selected)
@@ -57,7 +58,7 @@ export function segmentClasses(args) {
     const base = cn('flex cursor-pointer items-center justify-center font-medium transition-colors duration-150 shrink-0 whitespace-nowrap', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none', appearance === 'inverted' ? 'focus-visible:ring-offset-0' : 'focus-visible:ring-offset-2', 
     // Inverted track has p-0.5 padding around segments — give them inner radius
     // so selected segments don't render as square boxes (matches surface look).
-    appearance === 'inverted' && 'rounded-md', segmentSize[size], disabled && 'cursor-not-allowed opacity-50');
+    appearance === 'inverted' && 'rounded-md', segmentSize(size), disabled && 'cursor-not-allowed opacity-50');
     if (disabled) {
         return cn(base, 'text-default-400');
     }

package/dist/forms/slider.js

@@ -1,62 +1,69 @@
 import { tv } from 'tailwind-variants';
 import { Size } from '../variants.js';
+import { formSizeTokens } from './form-size.js';
+// Track/thumb dimensions are Slider-specific — a "size" for a slider
+// means the physical rail, not an input height. We keep these tuned per
+// tier but pull `text` classes from the shared form-size tokens so a
+// Slider's label reads the same size as an adjacent Input's text.
+const textFor = (size) => formSizeTokens[size].text;
 export const slider = tv({
     slots: {
         base: 'relative w-full',
-        track: 'absolute h-2 w-full rounded-full bg-default-200 cursor-pointer',
+        track: 'absolute w-full rounded-full bg-default-200 cursor-pointer',
         range: 'absolute h-full rounded-full bg-primary-500',
         thumb: [
             'absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white border-2 border-primary-500',
             'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
             'hover:scale-110 transition-transform cursor-pointer'
         ],
-        mark: 'absolute text-sm text-default-500 -translate-x-1/2',
-        label: 'mb-2 block text-sm font-medium text-default-700',
-        value: 'mt-1 text-sm text-default-500'
+        mark: 'absolute text-default-500 -translate-x-1/2',
+        label: 'mb-2 block font-medium text-default-700',
+        value: 'mt-1 text-default-500'
     },
     variants: {
         size: {
             [Size.XS]: {
-                track: 'h-1',
-                thumb: 'w-3 h-3',
-                mark: 'text-xs top-4',
-                label: 'text-xs',
-                value: 'text-xs'
+                track: 'h-0.5',
+                thumb: 'w-2.5 h-2.5',
+                mark: `${textFor(Size.XS)} top-3`,
+                label: textFor(Size.XS),
+                value: textFor(Size.XS)
             },
             [Size.SM]: {
                 track: 'h-1',
                 thumb: 'w-3 h-3',
-                mark: 'text-xs top-4',
-                label: 'text-xs',
-                value: 'text-xs'
+                mark: `${textFor(Size.SM)} top-4`,
+                label: textFor(Size.SM),
+                value: textFor(Size.SM)
             },
             [Size.MD]: {
-                track: 'h-2',
-                thumb: 'w-4 h-4',
-                mark: 'text-sm top-6',
-                label: 'text-sm',
-                value: 'text-sm'
+                track: 'h-1.5',
+                thumb: 'w-3.5 h-3.5',
+                mark: `${textFor(Size.MD)} top-5`,
+                label: textFor(Size.MD),
+                value: textFor(Size.MD)
             },
             [Size.LG]: {
-                track: 'h-3',
-                thumb: 'w-5 h-5',
-                mark: 'text-base top-7',
-                label: 'text-base',
-                value: 'text-base'
+                track: 'h-2',
+                thumb: 'w-4 h-4',
+                mark: `${textFor(Size.LG)} top-6`,
+                label: textFor(Size.LG),
+                value: textFor(Size.LG)
             },
             [Size.XL]: {
                 track: 'h-3',
                 thumb: 'w-5 h-5',
-                mark: 'text-base top-7',
-                label: 'text-base',
-                value: 'text-base'
+                mark: `${textFor(Size.XL)} top-7`,
+                label: textFor(Size.XL),
+                value: textFor(Size.XL)
             },
+            // Form controls cap at xl — see `form-size.ts`.
             [Size.XXL]: {
                 track: 'h-3',
                 thumb: 'w-5 h-5',
-                mark: 'text-base top-7',
-                label: 'text-base',
-                value: 'text-base'
+                mark: `${textFor(Size.XXL)} top-7`,
+                label: textFor(Size.XXL),
+                value: textFor(Size.XXL)
             }
         },
         disabled: {

package/package.json

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