@r2digisolutions/components 0.19.7 → 0.19.9

package/dist/components/molecules/Form/Form.svelte

@@ -178,6 +178,7 @@
 				};
 				check();
 			});
+			// Do not preventDefault — Kit remote attachment owns progressive enhancement.
 			return;
 		}
 		e.preventDefault();

package/dist/components/molecules/UserMenu/UserMenu.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { on } from 'svelte/events';
 	import Avatar from '../../atoms/Avatar/Avatar.svelte';
 	import Badge from '../../atoms/Badge/Badge.svelte';
 	import StatusDot from '../../atoms/StatusDot/StatusDot.svelte';
+	import { createId } from '../../../utils/id.js';
 
 	export interface UserMenuItem {
 		id: string;
@@ -74,7 +76,29 @@
 		onopenchange
 	}: UserMenuProps = $props();
 
-	let rootEl = $state<HTMLDivElement | null>(null);
+	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let menuEl = $state<HTMLDivElement | null>(null);
+	let menuStyle = $state('');
+	let menuId = $state('');
+
+	$effect(() => {
+		if (!menuId) menuId = createId('user-menu');
+	});
+
+	/**
+	 * Declarative invoker avoids the light-dismiss ↔ click race:
+	 * without an associated source, pointerup closes and click reopens.
+	 */
+	$effect(() => {
+		const btn = triggerEl;
+		const menu = menuEl;
+		if (!btn || !menu) return;
+		btn.popoverTargetElement = menu;
+		btn.popoverTargetAction = 'toggle';
+		return () => {
+			btn.popoverTargetElement = null;
+		};
+	});
 
 	const avatarSize = $derived(size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md');
 	const statusLabel = $derived(
@@ -94,39 +118,111 @@
 		onopenchange?.(next);
 	}
 
-	function toggle() {
-		setOpen(!open);
+	function positionMenu() {
+		if (!triggerEl || !menuEl) return;
+		if (!menuEl.matches(':popover-open')) return;
+
+		const rect = triggerEl.getBoundingClientRect();
+		const gap = 8;
+		const margin = 8;
+		const vv = window.visualViewport;
+		const viewW = vv?.width ?? window.innerWidth;
+		const viewH = vv?.height ?? window.innerHeight;
+		const viewLeft = vv?.offsetLeft ?? 0;
+		const viewTop = vv?.offsetTop ?? 0;
+
+		const width = Math.min(Math.max(rect.width, 280), viewW - margin * 2);
+		const height = menuEl.offsetHeight || 280;
+
+		const spaceBelow = viewTop + viewH - rect.bottom - gap - margin;
+		const spaceAbove = rect.top - viewTop - gap - margin;
+
+		let place: 'top' | 'bottom' = side;
+		if (side === 'bottom' && height > spaceBelow && spaceAbove > spaceBelow) place = 'top';
+		else if (side === 'top' && height > spaceAbove && spaceBelow > spaceAbove) place = 'bottom';
+
+		let top: number;
+		if (place === 'bottom') {
+			top = rect.bottom + gap;
+			if (top + height > viewTop + viewH - margin) {
+				top = Math.max(viewTop + margin, viewTop + viewH - margin - height);
+			}
+		} else {
+			top = rect.top - gap - height;
+			if (top < viewTop + margin) top = viewTop + margin;
+		}
+
+		let left = align === 'end' ? rect.right - width : rect.left;
+		left = Math.min(Math.max(left, viewLeft + margin), viewLeft + viewW - margin - width);
+
+		menuStyle = [
+			`top:${top}px`,
+			'bottom:auto',
+			`left:${left}px`,
+			'right:auto',
+			`width:${width}px`,
+			'height:auto',
+			'max-height:none'
+		].join(';');
+	}
+
+	function closeMenu() {
+		if (menuEl?.matches(':popover-open')) menuEl.hidePopover();
 	}
 
 	function select(item: UserMenuItem) {
 		if (item.disabled || item.separator) return;
 		onselect?.(item.id, item);
-		setOpen(false);
+		closeMenu();
 	}
 
-	function onDocPointer(e: PointerEvent) {
-		if (!open || !rootEl) return;
-		if (!rootEl.contains(e.target as Node)) setOpen(false);
+	function handleBeforeToggle(event: ToggleEvent) {
+		if (event.newState === 'open') {
+			queueMicrotask(() => {
+				positionMenu();
+				requestAnimationFrame(() => positionMenu());
+			});
+		}
 	}
 
-	function onKey(e: KeyboardEvent) {
-		if (!open) return;
-		if (e.key === 'Escape') setOpen(false);
+	function handleToggle(event: ToggleEvent) {
+		const next = event.newState === 'open';
+		setOpen(next);
+		if (next) {
+			queueMicrotask(() => {
+				positionMenu();
+				requestAnimationFrame(() => positionMenu());
+			});
+		}
 	}
 
 	$effect(() => {
-		if (typeof window === 'undefined') return;
-		document.addEventListener('pointerdown', onDocPointer);
-		window.addEventListener('keydown', onKey);
+		if (!open) return;
+		let frame = 0;
+		const reposition = (event?: Event) => {
+			const target = event?.target;
+			if (target instanceof Node && menuEl?.contains(target)) return;
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => positionMenu());
+		};
+		const offScroll = on(window, 'scroll', reposition, { capture: true, passive: true });
+		const offResize = on(window, 'resize', reposition);
+		const offVisual =
+			typeof window.visualViewport !== 'undefined' && window.visualViewport
+				? on(window.visualViewport, 'resize', reposition)
+				: () => {};
 		return () => {
-			document.removeEventListener('pointerdown', onDocPointer);
-			window.removeEventListener('keydown', onKey);
+			cancelAnimationFrame(frame);
+			offScroll();
+			offResize();
+			offVisual();
 		};
 	});
 </script>
 
-<div bind:this={rootEl} class={['relative flex w-full min-w-0', className]}>
+<div class={['relative flex w-full min-w-0', className]}>
 	<button
+		bind:this={triggerEl}
 		type="button"
 		class={[
 			'inline-flex w-full min-w-0 max-w-full items-center text-left transition-colors',
@@ -141,7 +237,7 @@
 		]}
 		aria-haspopup="menu"
 		aria-expanded={open}
-		onclick={toggle}
+		aria-controls={menuId || undefined}
 	>
 		<span class="shrink-0">
 			<Avatar {src} {name} size={avatarSize} {status} />
@@ -170,77 +266,90 @@
 		{/if}
 	</button>
 
-	{#if open}
-		<div
-			class={[
-				'absolute z-50 w-[min(100vw-2rem,18rem)] overflow-hidden rounded-2xl border border-border bg-surface-elevated shadow-xl',
-				side === 'top' ? 'bottom-full mb-2' : 'top-full mt-2',
-				align === 'end' ? 'right-0' : 'left-0'
-			]}
-			role="menu"
-			aria-label="User menu"
-		>
-			{#if header}
-				{@render header()}
-			{:else}
-				<div class="border-b border-border bg-surface-overlay/50 px-3.5 py-3">
-					<div class="flex items-start gap-3">
-						<Avatar {src} {name} size="lg" {status} />
-						<div class="min-w-0 flex-1 pt-0.5">
-							<p class="truncate text-sm font-semibold text-primary">{name}</p>
-							{#if email}
-								<p class="truncate text-xs text-muted">{email}</p>
+	<div
+		bind:this={menuEl}
+		id={menuId}
+		popover="auto"
+		role="menu"
+		tabindex={-1}
+		aria-label="User menu"
+		style={menuStyle}
+		ontoggle={handleToggle}
+		onbeforetoggle={handleBeforeToggle}
+		class="user-menu m-0 overflow-hidden rounded-2xl border border-border bg-surface-elevated shadow-xl inset-auto outline-none"
+	>
+		{#if header}
+			{@render header()}
+		{:else}
+			<div class="border-b border-border bg-surface-overlay/50 px-3.5 py-3">
+				<div class="flex items-start gap-3">
+					<Avatar {src} {name} size="lg" {status} />
+					<div class="min-w-0 flex-1 pt-0.5">
+						<p class="truncate text-sm font-semibold text-primary">{name}</p>
+						{#if email}
+							<p class="truncate text-xs text-muted">{email}</p>
+						{/if}
+						<div class="mt-2 flex flex-wrap items-center gap-2">
+							{#if status && statusLabel}
+								<StatusDot {status} size="sm" showLabel label={statusLabel} />
+							{/if}
+							{#if role}
+								<span
+									class="rounded-md bg-surface-elevated px-1.5 py-0.5 text-[10px] font-medium text-secondary ring-1 ring-border"
+								>
+									{role}
+								</span>
+							{/if}
+							{#if plan}
+								<Badge variant="primary" size="sm">{plan}</Badge>
 							{/if}
-							<div class="mt-2 flex flex-wrap items-center gap-2">
-								{#if status && statusLabel}
-									<StatusDot {status} size="sm" showLabel label={statusLabel} />
-								{/if}
-								{#if role}
-									<span class="rounded-md bg-surface-elevated px-1.5 py-0.5 text-[10px] font-medium text-secondary ring-1 ring-border">
-										{role}
-									</span>
-								{/if}
-								{#if plan}
-									<Badge variant="primary" size="sm">{plan}</Badge>
-								{/if}
-							</div>
 						</div>
 					</div>
 				</div>
-			{/if}
-
-			<div class="p-1.5">
-				{#each items as item (item.id)}
-					{#if item.separator}
-						<div class="my-1.5 border-t border-border" role="separator"></div>
-					{:else}
-						<button
-							type="button"
-							role="menuitem"
-							disabled={item.disabled}
-							onclick={() => select(item)}
-							class={[
-								'flex w-full items-start gap-2 rounded-xl px-2.5 py-2 text-left transition-colors',
-								'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
-								item.destructive
-									? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40'
-									: 'text-primary hover:bg-surface-overlay',
-								item.disabled && 'cursor-not-allowed opacity-40'
-							]}
-						>
-							<span class="min-w-0 flex-1">
-								<span class="block text-sm font-medium">{item.label}</span>
-								{#if item.description}
-									<span class="block text-xs text-muted">{item.description}</span>
-								{/if}
-							</span>
-							{#if item.shortcut}
-								<span class="mt-0.5 shrink-0 font-mono text-[10px] text-muted">{item.shortcut}</span>
-							{/if}
-						</button>
-					{/if}
-				{/each}
 			</div>
+		{/if}
+
+		<div class="p-1.5">
+			{#each items as item (item.id)}
+				{#if item.separator}
+					<div class="my-1.5 border-t border-border" role="separator"></div>
+				{:else}
+					<button
+						type="button"
+						role="menuitem"
+						disabled={item.disabled}
+						onclick={() => select(item)}
+						class={[
+							'flex w-full items-start gap-2 rounded-xl px-2.5 py-2 text-left transition-colors',
+							'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+							item.destructive
+								? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40'
+								: 'text-primary hover:bg-surface-overlay',
+							item.disabled && 'cursor-not-allowed opacity-40'
+						]}
+					>
+						<span class="min-w-0 flex-1">
+							<span class="block text-sm font-medium">{item.label}</span>
+							{#if item.description}
+								<span class="block text-xs text-muted">{item.description}</span>
+							{/if}
+						</span>
+						{#if item.shortcut}
+							<span class="mt-0.5 shrink-0 font-mono text-[10px] text-muted">{item.shortcut}</span>
+						{/if}
+					</button>
+				{/if}
+			{/each}
 		</div>
-	{/if}
+	</div>
 </div>
+
+<style>
+	.user-menu {
+		position: fixed;
+	}
+
+	.user-menu:popover-open {
+		display: block;
+	}
+</style>

package/dist/components/organisms/Dialog/Dialog.svelte

@@ -279,8 +279,13 @@
 		{#if children}
 			<div
 				class={[
-					'px-5 py-2 text-sm text-primary',
-					scrollable && 'max-h-[min(60vh,28rem)] overflow-y-auto'
+					'min-h-0 flex-1 px-5 py-2 text-sm text-primary',
+					scrollable &&
+						(size === 'full'
+							? 'max-h-[calc(100vh-11rem)] overflow-y-auto'
+							: size === 'xl'
+								? 'max-h-[min(70vh,36rem)] overflow-y-auto'
+								: 'max-h-[min(60vh,28rem)] overflow-y-auto')
 				]}
 			>
 				{@render children()}

package/dist/components/organisms/PricingTable/PricingTable.stories.d.ts

@@ -62,6 +62,7 @@ export declare const Bento: Story;
 export declare const Compact: Story;
 export declare const Split: Story;
 export declare const Table: Story;
+export declare const ListCompare: Story;
 export declare const CardsPlusComparison: Story;
 export declare const TwoPlans: Story;
 export declare const FourPlans: Story;

package/dist/components/organisms/PricingTable/PricingTable.stories.js

@@ -9,7 +9,17 @@ const meta = {
     argTypes: {
         layout: {
             control: 'select',
-            options: ['grid', 'horizontal', 'vertical', 'bento', 'compact', 'split', 'table']
+            options: [
+                'grid',
+                'horizontal',
+                'vertical',
+                'bento',
+                'compact',
+                'split',
+                'table',
+                'list',
+                'compare'
+            ]
         },
         columns: { control: 'select', options: [2, 3, 4] },
         planSet: {
@@ -39,6 +49,7 @@ export const Bento = { args: { layout: 'bento', planSet: 'bento' } };
 export const Compact = { args: { layout: 'compact', planSet: 'four', columns: 4 } };
 export const Split = { args: { layout: 'split' } };
 export const Table = { args: { layout: 'table', planSet: 'comparison' } };
+export const ListCompare = { args: { layout: 'list', planSet: 'comparison' } };
 export const CardsPlusComparison = {
     args: { layout: 'grid', showComparison: true, planSet: 'comparison' }
 };

package/dist/components/organisms/PricingTable/PricingTable.svelte

@@ -6,7 +6,9 @@
 		| 'bento'
 		| 'compact'
 		| 'split'
-		| 'table';
+		| 'table'
+		| 'list'
+		| 'compare';
 
 	export type PricingFeature =
 		| string
@@ -22,8 +24,12 @@
 		price: string;
 		/** Yearly price when billing toggle is yearly */
 		priceYearly?: string;
+		/** Struck-through list price (optional) */
+		compareAtPrice?: string;
 		period?: string;
 		periodYearly?: string;
+		/** Small hint under the price (e.g. savings) */
+		priceNote?: string;
 		description?: string;
 		features: PricingFeature[];
 		cta?: string;
@@ -45,6 +51,8 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import Check from '@lucide/svelte/icons/check';
+	import X from '@lucide/svelte/icons/x';
 	import Button from '../../atoms/Button/Button.svelte';
 	import Badge from '../../atoms/Badge/Badge.svelte';
 	import SegmentedControl from '../../molecules/SegmentedControl/SegmentedControl.svelte';
@@ -61,7 +69,8 @@
 		/** Show monthly/yearly toggle when plans have priceYearly */
 		showBillingToggle?: boolean;
 		billingPeriod?: 'monthly' | 'yearly';
-		/** Explicit feature matrix for `layout="table"` (auto-built when omitted) */
+		billingLabels?: { monthly?: string; yearly?: string };
+		/** Explicit feature matrix for compare/list/table (auto-built when omitted) */
 		comparisonRows?: PricingComparisonRow[];
 		/** Append comparison matrix below card layouts */
 		showComparison?: boolean;
@@ -81,6 +90,7 @@
 		maxFeatures,
 		showBillingToggle = false,
 		billingPeriod = $bindable<'monthly' | 'yearly'>('monthly'),
+		billingLabels,
 		comparisonRows,
 		showComparison = false,
 		class: className = '',
@@ -89,6 +99,10 @@
 		onbillingperiodchange
 	}: PricingTableProps = $props();
 
+	const isCompareLayout = $derived(
+		layout === 'table' || layout === 'list' || layout === 'compare'
+	);
+
 	const resolvedColumns = $derived.by(() => {
 		if (columns) return columns;
 		const n = plans.length;
@@ -138,12 +152,16 @@
 	}
 
 	function displayPeriod(plan: PricingPlan) {
-		if (billingPeriod === 'yearly') {
+		if (billingPeriod === 'yearly' && plan.priceYearly) {
 			return normalizePeriod(plan.periodYearly ?? 'yr');
 		}
 		return normalizePeriod(plan.period);
 	}
 
+	const canToggleBilling = $derived(
+		showBillingToggle && plans.some((p) => Boolean(p.priceYearly))
+	);
+
 	function featureList(plan: PricingPlan) {
 		const list = plan.features.map((f) =>
 			typeof f === 'string' ? { label: f, included: true as boolean | undefined } : f
@@ -189,7 +207,7 @@
 		}));
 	});
 
-	const showMatrix = $derived(layout === 'table' || showComparison);
+	const showMatrix = $derived(isCompareLayout || showComparison);
 
 	function select(id: string, disabled?: boolean) {
 		if (disabled) return;
@@ -221,8 +239,52 @@
 		billingPeriod = id as 'monthly' | 'yearly';
 		onbillingperiodchange?.(billingPeriod);
 	}
+
+	function planColClass(plan: PricingPlan) {
+		const selected = selectedId === plan.id;
+		return [
+			plan.featured && 'bg-brand-50/50 dark:bg-brand-950/20',
+			selected && 'bg-brand-50/80 ring-inset ring-2 ring-brand-500/35 dark:bg-brand-950/30'
+		];
+	}
 </script>
 
+{#snippet priceBlock(plan: PricingPlan, opts?: { large?: boolean; dense?: boolean; align?: 'left' | 'center' | 'right' })}
+	{@const large = opts?.large ?? false}
+	{@const dense = opts?.dense ?? false}
+	{@const align = opts?.align ?? 'left'}
+	<div
+		class={[
+			align === 'center' && 'text-center',
+			align === 'right' && 'text-right'
+		]}
+	>
+		{#if plan.compareAtPrice}
+			<p class={['text-muted line-through', dense ? 'text-[11px]' : 'text-xs']}>
+				{plan.compareAtPrice}
+			</p>
+		{/if}
+		<p>
+			<span
+				class={[
+					'font-semibold text-primary',
+					large ? 'text-4xl' : dense ? 'text-2xl' : 'text-3xl'
+				]}
+			>
+				{displayPrice(plan)}
+			</span>
+			{#if displayPeriod(plan)}
+				<span class="text-sm text-muted">{displayPeriod(plan)}</span>
+			{/if}
+		</p>
+		{#if plan.priceNote}
+			<p class={['mt-1 font-medium text-brand-600 dark:text-brand-400', dense ? 'text-[11px]' : 'text-xs']}>
+				{plan.priceNote}
+			</p>
+		{/if}
+	</div>
+{/snippet}
+
 {#snippet featureRows(plan: PricingPlan, dense = false)}
 	{@const { visible, more } = featureList(plan)}
 	{#if showFeatures && visible.length}
@@ -288,15 +350,8 @@
 						</div>
 					{/if}
 				</div>
-				<div class="flex shrink-0 flex-col items-stretch gap-3 sm:w-40 sm:items-stretch">
-					<p class="sm:text-right">
-						<span class={['font-semibold text-primary', large ? 'text-4xl' : 'text-2xl']}>
-							{displayPrice(plan)}
-						</span>
-						{#if displayPeriod(plan)}
-							<span class="text-sm text-muted">{displayPeriod(plan)}</span>
-						{/if}
-					</p>
+				<div class="flex shrink-0 flex-col items-stretch gap-3 sm:w-44 sm:items-stretch">
+					{@render priceBlock(plan, { large, dense: true, align: 'right' })}
 					<Button
 						variant={plan.featured || selectedId === plan.id ? 'primary' : 'secondary'}
 						size="sm"
@@ -328,19 +383,9 @@
 				{/if}
 			</div>
 
-			<p class={dense ? 'mb-3' : 'mb-4'}>
-				<span
-					class={[
-						'font-semibold text-primary',
-						large ? 'text-4xl' : dense ? 'text-2xl' : 'text-3xl'
-					]}
-				>
-					{displayPrice(plan)}
-				</span>
-				{#if displayPeriod(plan)}
-					<span class="text-sm text-muted">{displayPeriod(plan)}</span>
-				{/if}
-			</p>
+			<div class={dense ? 'mb-3' : 'mb-4'}>
+				{@render priceBlock(plan, { large, dense })}
+			</div>
 
 			<div class="mb-auto flex-1">
 				{@render featureRows(plan, dense)}
@@ -364,13 +409,16 @@
 {#snippet matrixCell(value: boolean | string)}
 	{#if typeof value === 'boolean'}
 		{#if value}
-			<span class="inline-flex text-brand-600 dark:text-brand-400" aria-label="Included">
-				<svg class="mx-auto h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-				</svg>
+			<span
+				class="inline-flex text-brand-600 dark:text-brand-400"
+				aria-label="Included"
+			>
+				<Check class="mx-auto h-4 w-4" strokeWidth={2.75} aria-hidden="true" />
 			</span>
 		{:else}
-			<span class="text-muted" aria-label="Not included">—</span>
+			<span class="inline-flex text-muted" aria-label="Not included">
+				<X class="mx-auto h-4 w-4" strokeWidth={2.25} aria-hidden="true" />
+			</span>
 		{/if}
 	{:else}
 		<span class="text-sm font-medium text-primary">{value}</span>
@@ -378,124 +426,150 @@
 {/snippet}
 
 {#snippet comparisonTable(withPricingHeader: boolean)}
-	{@const colCount = Math.max(plans.length, 1)}
-	{@const labelCol = 'minmax(10rem, 13rem)'}
-	{@const planCols = `repeat(${colCount}, minmax(9rem, 1fr))`}
-	{@const matrixCols = `${labelCol} ${planCols}`}
-	<div class="w-full overflow-x-auto rounded-2xl border border-border bg-surface-elevated shadow-sm">
-		{#if withPricingHeader}
-			<!-- Same column template as matrix rows so cards line up with values -->
-			<div
-				class="grid min-w-160 divide-x divide-border border-b border-border"
-				style:grid-template-columns={matrixCols}
-			>
-				<div class="bg-surface-overlay/30" aria-hidden="true"></div>
-				{#each plans as plan (plan.id)}
-					{@const badgeText = plan.badge ?? (plan.featured ? featuredBadgeLabel : undefined)}
-					<div
-						class={[
-							'flex flex-col items-center px-4 py-6 text-center',
-							plan.featured && 'bg-brand-50/70 dark:bg-brand-950/25'
-						]}
-					>
-						<div class="flex min-h-6 flex-wrap items-center justify-center gap-1.5">
-							<span class="text-sm font-semibold text-primary">{plan.name}</span>
-							{#if badgeText}
-								<Badge size="sm" variant="primary" class="whitespace-nowrap">{badgeText}</Badge>
-							{/if}
-						</div>
-						<p class="mt-1 min-h-8 max-w-44 text-xs leading-snug text-secondary">
-							{plan.description ?? '\u00a0'}
-						</p>
-						<p class="mt-3">
-							<span class="text-3xl font-semibold tracking-tight text-primary">
-								{displayPrice(plan)}
-							</span>
-							{#if displayPeriod(plan)}
-								<span class="text-xs text-muted">{displayPeriod(plan)}</span>
-							{/if}
-						</p>
-						<Button
-							variant={plan.featured || selectedId === plan.id ? 'primary' : 'secondary'}
-							size="sm"
-							class="mt-4 w-full max-w-40"
-							disabled={plan.disabled}
-							onclick={() => select(plan.id, plan.disabled)}
+	<div class="w-full overflow-x-auto rounded-xl border border-border bg-surface-elevated">
+		<table class="w-full min-w-160 border-collapse text-sm" aria-label="Plan feature comparison">
+			<thead class="sticky top-0 z-30">
+				{#if withPricingHeader}
+					<tr class="border-b border-border bg-surface-elevated shadow-sm">
+						<th
+							scope="col"
+							class="sticky left-0 z-40 bg-surface-elevated px-4 py-4 text-left align-bottom"
 						>
-							{plan.cta ?? 'Get started'}
-						</Button>
-					</div>
-				{/each}
-			</div>
-		{/if}
-
-		<div
-			class="border-b border-border bg-surface-overlay/60 px-4 py-2.5 text-[11px] font-semibold uppercase tracking-wider text-muted"
-		>
-			What's included
-		</div>
-
-		<div class="min-w-160" role="table" aria-label="Plan feature comparison">
-			<div
-				class="grid divide-x divide-border border-b border-border bg-surface/80"
-				style:grid-template-columns={matrixCols}
-				role="row"
-			>
-				<div class="px-4 py-2.5" role="columnheader"></div>
-				{#each plans as plan (plan.id)}
-					<div
+							<span class="text-muted text-[11px] font-semibold tracking-wide uppercase">
+								Incluye
+							</span>
+						</th>
+						{#each plans as plan (plan.id)}
+							{@const badgeText =
+								plan.badge ?? (plan.featured ? featuredBadgeLabel : undefined)}
+							{@const selected = selectedId === plan.id}
+							<th
+								scope="col"
+								class={[
+									'min-w-40 px-3 py-4 text-center align-top font-normal',
+									planColClass(plan)
+								]}
+							>
+								<button
+									type="button"
+									class={[
+										'flex w-full flex-col items-center gap-2 rounded-xl px-2 py-2 text-center transition-colors',
+										selected && 'bg-brand-500/10',
+										!plan.disabled && 'hover:bg-surface-overlay/50',
+										plan.disabled && 'cursor-not-allowed opacity-50'
+									]}
+									disabled={plan.disabled}
+									aria-pressed={selected}
+									onclick={() => select(plan.id, plan.disabled)}
+								>
+									<div class="flex min-h-6 flex-wrap items-center justify-center gap-1.5">
+										<span class="text-sm font-semibold text-primary">{plan.name}</span>
+										{#if badgeText}
+											<Badge size="sm" variant="primary" class="whitespace-nowrap">
+												{badgeText}
+											</Badge>
+										{/if}
+									</div>
+									{#if plan.description}
+										<p class="line-clamp-2 max-w-44 text-xs leading-snug text-secondary">
+											{plan.description}
+										</p>
+									{/if}
+									{@render priceBlock(plan, { dense: true, align: 'center' })}
+									<span
+										class={[
+											'inline-flex h-8 w-full max-w-40 items-center justify-center rounded-lg px-3 text-xs font-medium',
+											selected || plan.featured
+												? 'bg-brand-600 text-white'
+												: 'bg-surface-overlay text-primary ring-1 ring-border'
+										]}
+									>
+										{plan.cta ?? 'Select'}
+									</span>
+								</button>
+							</th>
+						{/each}
+					</tr>
+				{:else}
+					<tr class="border-b border-border bg-surface/80">
+						<th
+							scope="col"
+							class="sticky left-0 z-40 bg-surface px-4 py-2.5 text-left"
+						></th>
+						{#each plans as plan (plan.id)}
+							<th
+								scope="col"
+								class={[
+									'px-3 py-2.5 text-center text-xs font-semibold text-secondary',
+									planColClass(plan)
+								]}
+							>
+								<button
+									type="button"
+									class="w-full rounded-md px-1 py-0.5 hover:bg-surface-overlay/60"
+									disabled={plan.disabled}
+									aria-pressed={selectedId === plan.id}
+									onclick={() => select(plan.id, plan.disabled)}
+								>
+									{plan.name}
+								</button>
+							</th>
+						{/each}
+					</tr>
+				{/if}
+			</thead>
+			<tbody>
+				{#each resolvedComparisonRows as row, ri (row.id)}
+					<tr
 						class={[
-							'px-4 py-2.5 text-center text-xs font-semibold text-secondary',
-							plan.featured && 'bg-brand-50/40 text-brand-700 dark:bg-brand-950/15 dark:text-brand-300'
+							'border-b border-border last:border-b-0',
+							ri % 2 === 1 && 'bg-surface-overlay/25'
 						]}
-						role="columnheader"
 					>
-						{plan.name}
-					</div>
-				{/each}
-			</div>
-
-			{#each resolvedComparisonRows as row, ri (row.id)}
-				<div
-					class={[
-						'grid divide-x divide-border border-b border-border last:border-b-0',
-						ri % 2 === 1 && 'bg-surface-overlay/20'
-					]}
-					style:grid-template-columns={matrixCols}
-					role="row"
-				>
-					<div
-						class="flex items-center px-4 py-3.5 text-sm font-medium text-primary"
-						role="rowheader"
-					>
-						{row.label}
-					</div>
-					{#each row.values as value, vi}
-						{@const plan = plans[vi]}
-						<div
+						<th
+							scope="row"
 							class={[
-								'flex items-center justify-center px-4 py-3.5 text-center',
-								plan?.featured && 'bg-brand-50/30 dark:bg-brand-950/10'
+								'sticky left-0 z-10 border-r border-border px-4 py-3 text-left text-sm font-medium text-primary',
+								ri % 2 === 1 ? 'bg-surface-overlay/40' : 'bg-surface-elevated'
 							]}
-							role="cell"
 						>
-							{@render matrixCell(value)}
-						</div>
-					{/each}
-				</div>
-			{/each}
-		</div>
+							{row.label}
+						</th>
+						{#each row.values as value, vi (`${row.id}-${plans[vi]?.id ?? vi}`)}
+							{@const plan = plans[vi]}
+							<td
+								class={[
+									'px-3 py-3 text-center',
+									plan && planColClass(plan)
+								]}
+							>
+								{@render matrixCell(value)}
+							</td>
+						{/each}
+					</tr>
+				{:else}
+					<tr>
+						<td
+							class="text-muted px-4 py-8 text-center text-sm"
+							colspan={Math.max(plans.length, 1) + 1}
+						>
+							Sin características para comparar.
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
 	</div>
 {/snippet}
 
 <div class={['w-full space-y-4', className]}>
-	{#if showBillingToggle}
+	{#if canToggleBilling}
 		<div class="flex justify-center">
 			<SegmentedControl
 				size="sm"
 				items={[
-					{ id: 'monthly', label: 'Monthly' },
-					{ id: 'yearly', label: 'Yearly' }
+					{ id: 'monthly', label: billingLabels?.monthly ?? 'Monthly' },
+					{ id: 'yearly', label: billingLabels?.yearly ?? 'Yearly' }
 				]}
 				bind:value={billingPeriod}
 				onchange={onBillingChange}
@@ -503,7 +577,11 @@
 		</div>
 	{/if}
 
-	{#if layout === 'table'}
+	{#if plans.length === 0}
+		<p class="text-muted rounded-xl border border-border bg-surface-elevated px-4 py-8 text-center text-sm">
+			No hay tarifas disponibles para este periodo.
+		</p>
+	{:else if isCompareLayout}
 		{@render comparisonTable(true)}
 	{:else if layout === 'split' && featuredPlan}
 		<div class={containerClass} role="list">
@@ -553,7 +631,7 @@
 		</div>
 	{/if}
 
-	{#if showMatrix && layout !== 'table'}
+	{#if showMatrix && !isCompareLayout}
 		<div class="pt-2">
 			{@render comparisonTable(false)}
 		</div>

package/dist/components/organisms/PricingTable/PricingTable.svelte.d.ts

@@ -1,4 +1,4 @@
-export type PricingLayout = 'grid' | 'horizontal' | 'vertical' | 'bento' | 'compact' | 'split' | 'table';
+export type PricingLayout = 'grid' | 'horizontal' | 'vertical' | 'bento' | 'compact' | 'split' | 'table' | 'list' | 'compare';
 export type PricingFeature = string | {
     label: string;
     included?: boolean;
@@ -10,8 +10,12 @@ export interface PricingPlan {
     price: string;
     /** Yearly price when billing toggle is yearly */
     priceYearly?: string;
+    /** Struck-through list price (optional) */
+    compareAtPrice?: string;
     period?: string;
     periodYearly?: string;
+    /** Small hint under the price (e.g. savings) */
+    priceNote?: string;
     description?: string;
     features: PricingFeature[];
     cta?: string;
@@ -41,7 +45,11 @@ interface PricingTableProps {
     /** Show monthly/yearly toggle when plans have priceYearly */
     showBillingToggle?: boolean;
     billingPeriod?: 'monthly' | 'yearly';
-    /** Explicit feature matrix for `layout="table"` (auto-built when omitted) */
+    billingLabels?: {
+        monthly?: string;
+        yearly?: string;
+    };
+    /** Explicit feature matrix for compare/list/table (auto-built when omitted) */
     comparisonRows?: PricingComparisonRow[];
     /** Append comparison matrix below card layouts */
     showComparison?: boolean;

package/dist/components/organisms/PricingTable/PricingTableStory.svelte

@@ -190,7 +190,9 @@
 	const widthClass = $derived.by(() => {
 		const layout = props.layout ?? 'grid';
 		if (layout === 'vertical') return 'w-112 max-w-full';
-		if (layout === 'table' || props.showComparison) return 'w-208 max-w-full';
+		if (layout === 'table' || layout === 'list' || layout === 'compare' || props.showComparison) {
+			return 'w-208 max-w-full';
+		}
 		if (layout === 'horizontal') return 'w-192 max-w-full';
 		if (layout === 'bento' || layout === 'split') return 'w-208 max-w-full';
 		if ((props.columns ?? 3) >= 4 || planSet === 'four') return 'w-224 max-w-full';
@@ -209,7 +211,12 @@
 		showFeatures={props.showFeatures ?? true}
 		showComparison={props.showComparison ?? false}
 		maxFeatures={props.maxFeatures}
-		comparisonRows={planSet === 'comparison' || props.layout === 'table' ? comparisonRows : undefined}
+		comparisonRows={planSet === 'comparison' ||
+		props.layout === 'table' ||
+		props.layout === 'list' ||
+		props.layout === 'compare'
+			? comparisonRows
+			: undefined}
 		onselect={(id) => (selectedId = id)}
 	>
 		{#snippet footer()}

package/dist/components/organisms/Sidebar/Sidebar.svelte

@@ -175,7 +175,7 @@
 	</nav>
 
 	{#if footer}
-		<div class={['border-border min-w-0 overflow-hidden border-t p-3', collapsed && 'flex justify-center']}>
+		<div class={['border-border min-w-0 border-t p-3', collapsed && 'flex justify-center']}>
 			{@render footer()}
 		</div>
 	{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.19.7",
+	"version": "0.19.9",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",