@makolabs/ripple 3.0.8 → 3.0.10

package/dist/drawer/Drawer.svelte

@@ -12,8 +12,10 @@
 		open = $bindable(false),
 		onclose: onClose = () => {},
 		title,
+		description,
 		position = 'right',
 		size = 'sm',
+		footerAlign,
 		children,
 		header,
 		footer,
@@ -23,6 +25,7 @@
 		headerClass = '',
 		bodyClass = '',
 		titleClass = '',
+		descriptionClass = '',
 		footerClass = '',
 		testId
 	}: DrawerProps = $props();
@@ -37,12 +40,14 @@
 		header: headerVClass,
 		body,
 		footer: footerVClass,
-		title: titleVClass
+		title: titleVClass,
+		description: descriptionVClass
 	} = $derived(
 		drawer({
 			open,
 			position,
-			size
+			size,
+			footerAlign
 		})
 	);
 
@@ -53,6 +58,7 @@
 	const headerClasses = $derived(cn(headerVClass(), headerClass));
 	const bodyClasses = $derived(cn(body(), bodyClass));
 	const titleClasses = $derived(cn(titleVClass(), titleClass));
+	const descriptionClasses = $derived(cn(descriptionVClass(), descriptionClass));
 	const footerClasses = $derived(cn(footerVClass(), 'mt-auto', footerClass));
 
 	function handleBackdropClick(e: MouseEvent) {
@@ -161,6 +167,8 @@
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby={title ? 'drawer-title' : undefined}
+		aria-describedby={description ? 'drawer-description' : undefined}
+		aria-label={!title ? 'Drawer' : undefined}
 	>
 		{#key open}
 			<!-- Backdrop -->
@@ -196,19 +204,32 @@
 					</button>
 
 					<!-- Header -->
-					{#if title}
+					{#if header}
 						<div class={headerClasses}>
-							<h3
-								id="drawer-title"
-								class={titleClasses}
-								data-testid={buildTestId('drawer', 'title', testId)}
-							>
-								{title}
-							</h3>
+							{@render header()}
 						</div>
-					{:else if header}
+					{:else if title || description}
 						<div class={headerClasses}>
-							{@render header()}
+							<div class="flex min-w-0 flex-1 flex-col">
+								{#if title}
+									<h3
+										id="drawer-title"
+										class={titleClasses}
+										data-testid={buildTestId('drawer', 'title', testId)}
+									>
+										{title}
+									</h3>
+								{/if}
+								{#if description}
+									<p
+										id="drawer-description"
+										class={descriptionClasses}
+										data-testid={buildTestId('drawer', 'description', testId)}
+									>
+										{description}
+									</p>
+								{/if}
+							</div>
 						</div>
 					{/if}
 

package/dist/drawer/drawer-types.d.ts

@@ -12,10 +12,8 @@ import type { VariantSizes } from '../index.js';
  * <Drawer bind:open title="Filters" position="right">
  *   <FilterPanel bind:filters />
  *   {#snippet footer()}
- *     <div class="flex justify-end gap-2 p-4">
- *       <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
- *       <Button onclick={apply}>Apply</Button>
- *     </div>
+ *     <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+ *     <Button onclick={apply}>Apply</Button>
  *   {/snippet}
  * </Drawer>
  * ```
@@ -27,6 +25,8 @@ export type DrawerProps = {
     onclose?: () => void;
     /** Header title text. Ignored if a `header` snippet is provided. */
     title?: string;
+    /** Smaller muted line directly below the title. */
+    description?: string;
     /** Side the drawer slides in from. @default 'right' */
     position?: 'left' | 'right';
     /** @default 'sm' */
@@ -48,7 +48,15 @@ export type DrawerProps = {
     children?: Snippet;
     /** Replace the default title bar. */
     header?: Snippet;
-    /** Footer content (usually action buttons). */
+    /**
+     * Footer content — typically action buttons. The footer wrapper renders
+     * with a tinted background, hairline separator, padding, and flex layout
+     * built-in, so the snippet can just contain `<Button>`s directly.
+     */
     footer?: Snippet;
+    /** How to align footer items horizontally. @default 'end' */
+    footerAlign?: 'start' | 'center' | 'end' | 'between';
+    /** Classes on the description element. */
+    descriptionClass?: ClassValue;
     testId?: string;
 };

package/dist/drawer/drawer.d.ts

@@ -1,4 +1,18 @@
 export declare const drawer: import("tailwind-variants").TVReturnType<{
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     open: {
         true: {
             base: string;
@@ -50,8 +64,23 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
     body: string;
     footer: string;
     title: string;
+    description: string;
     closeButton: string;
 }, undefined, {
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     open: {
         true: {
             base: string;
@@ -103,8 +132,23 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
     body: string;
     footer: string;
     title: string;
+    description: string;
     closeButton: string;
 }, import("tailwind-variants").TVReturnType<{
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     open: {
         true: {
             base: string;
@@ -156,5 +200,6 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
     body: string;
     footer: string;
     title: string;
+    description: string;
     closeButton: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/drawer/drawer.js

@@ -6,13 +6,21 @@ export const drawer = tv({
         backdrop: 'fixed inset-0 transition-opacity bg-black/50',
         contentWrapper: 'absolute flex flex-col transform transition-transform max-w-[100vw]',
         content: 'relative flex flex-col h-full w-full overflow-y-auto bg-white',
-        header: 'flex items-center justify-between px-4 py-3 border-b border-default-200',
-        body: 'flex-1 overflow-y-auto p-4',
-        footer: 'flex justify-end border-t border-default-200 p-4',
-        title: 'text-default-900 leading-6 text-base font-semibold',
+        // Header/footer tinted to match Modal/Card visual language.
+        header: 'flex items-center justify-between gap-3 px-5 py-3 bg-default-100/50 border-b border-default-200',
+        body: 'flex-1 overflow-y-auto p-5 text-sm text-default-700',
+        footer: 'flex flex-wrap items-center gap-3 px-5 py-3 bg-default-100/50 border-t border-default-200',
+        title: 'text-default-900 text-sm font-semibold leading-tight',
+        description: 'text-default-500 text-xs font-normal',
         closeButton: 'text-default-400 hover:text-default-500 rounded-md cursor-pointer'
     },
     variants: {
+        footerAlign: {
+            start: { footer: 'justify-start' },
+            center: { footer: 'justify-center' },
+            end: { footer: 'justify-end' },
+            between: { footer: 'justify-between' }
+        },
         open: {
             true: {
                 base: 'visible',
@@ -76,6 +84,7 @@ export const drawer = tv({
     defaultVariants: {
         open: false,
         position: 'right',
-        size: 'sm'
+        size: 'sm',
+        footerAlign: 'end'
     }
 });

package/dist/index.d.ts

@@ -65,7 +65,6 @@ export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
 export { default as Button } from './button/Button.svelte';
 export { default as Modal } from './modal/Modal.svelte';
-export { default as ModalFooter } from './modal/ModalFooter.svelte';
 export { default as ConfirmDialog } from './modal/ConfirmDialog.svelte';
 export { default as Pipeline } from './pipeline/Pipeline.svelte';
 export { pipelineVariants } from './pipeline/pipeline.js';

package/dist/index.js

@@ -25,7 +25,6 @@ export { isRouteActive } from './helper/nav.svelte.js';
 export { default as Button } from './button/Button.svelte';
 // Modal
 export { default as Modal } from './modal/Modal.svelte';
-export { default as ModalFooter } from './modal/ModalFooter.svelte';
 export { default as ConfirmDialog } from './modal/ConfirmDialog.svelte';
 // Pipeline
 export { default as Pipeline } from './pipeline/Pipeline.svelte';

package/dist/layout/table/Table.svelte

@@ -607,29 +607,8 @@
 {/snippet}
 
 {#if hasHeader}
-	<Card>
-		{#snippet custom()}
-			<!-- Header Section -->
-			<div class="border-default-200 mb-4 border-b pb-3">
-				<div class="flex items-center justify-between">
-					<div>
-						{#if title}
-							<h2 class="text-default-900 text-lg font-semibold">{title}</h2>
-						{/if}
-						{#if subtitle}
-							<p class="text-default-500 mt-1 text-xs">{subtitle}</p>
-						{/if}
-					</div>
-					{#if headerActions}
-						<div class="flex items-center">
-							{@render headerActions()}
-						</div>
-					{/if}
-				</div>
-			</div>
-
-			{@render tableContent()}
-		{/snippet}
+	<Card {title} {subtitle} headerEnd={headerActions} bodyClass="p-0">
+		{@render tableContent()}
 	</Card>
 {:else}
 	{@render tableContent()}

package/dist/modal/ConfirmDialog.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Modal from './Modal.svelte';
-	import ModalFooter from './ModalFooter.svelte';
 	import Button from '../button/Button.svelte';
 	import type { ConfirmDialogProps } from './confirm-dialog-types.js';
 	import { Color } from '../variants.js';
@@ -53,13 +52,11 @@
 	</div>
 
 	{#snippet footer()}
-		<ModalFooter align="end">
-			<Button variant="outline" onclick={handleCancel} disabled={busy}>
-				{cancelLabel}
-			</Button>
-			<Button color={confirmColor} onclick={handleConfirm} loading={busy}>
-				{confirmLabel}
-			</Button>
-		</ModalFooter>
+		<Button variant="outline" onclick={handleCancel} disabled={busy}>
+			{cancelLabel}
+		</Button>
+		<Button color={confirmColor} onclick={handleConfirm} loading={busy}>
+			{confirmLabel}
+		</Button>
 	{/snippet}
 </Modal>

package/dist/modal/Modal.svelte

@@ -14,6 +14,7 @@
 		title,
 		description,
 		size,
+		footerAlign,
 		hideCloseButton = false,
 		class: className = '',
 		contentClass = '',
@@ -30,25 +31,17 @@
 
 	let modalElement: HTMLDivElement | undefined = $state();
 
-	const styles = $derived(modal({ size }));
+	const styles = $derived(modal({ size, footerAlign }));
 
 	const baseClass = $derived(cn(styles.base(), className));
 	const backdropClasses = $derived(cn(styles.backdrop(), backdropClass));
 	const containerClass = $derived(cn(styles.container(), contentClass));
 	const headerClasses = $derived(cn(styles.header(), headerClass));
 	const titleClasses = $derived(cn(styles.title(), titleClass));
-	const bodyClasses = $derived(
-		cn(
-			'flex-1 px-6 overflow-y-auto',
-			// Adjust top padding based on header presence
-			title || description ? 'py-4' : 'pt-6 pb-4',
-			bodyClass
-		)
-	);
+	const bodyClasses = $derived(cn(styles.body(), bodyClass));
 	const footerClasses = $derived(cn(styles.footer(), footerClass));
 	const closeClass = $derived(cn(styles.close(), ''));
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const descriptionClass = $derived(cn(styles.description(), ''));
+	const descriptionClasses = $derived(cn(styles.description(), ''));
 
 	function handleBackdropClick() {
 		onclose();
@@ -131,15 +124,24 @@
 {#snippet predefinedHeader()}
 	{#if title || description}
 		<header class={headerClasses}>
-			<div class="flex-1">
+			<div class="flex min-w-0 flex-1 flex-col">
 				{#if title}
-					<h2
+					<h3
 						id="modal-title"
 						class={titleClasses}
 						data-testid={buildTestId('modal', 'title', testId)}
 					>
 						{title}
-					</h2>
+					</h3>
+				{/if}
+				{#if description}
+					<p
+						id="modal-description"
+						class={descriptionClasses}
+						data-testid={buildTestId('modal', 'description', testId)}
+					>
+						{description}
+					</p>
 				{/if}
 			</div>
 			{#if !hideCloseButton}
@@ -190,6 +192,8 @@
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby={title ? 'modal-title' : undefined}
+		aria-describedby={description ? 'modal-description' : undefined}
+		aria-label={!title ? 'Modal dialog' : undefined}
 		bind:this={modalElement}
 	>
 		<!-- Backdrop -->

package/dist/modal/modal-types.d.ts

@@ -12,10 +12,8 @@ import type { VariantSizes } from '../index.js';
  * <Modal bind:open title="Edit profile">
  *   <ProfileForm />
  *   {#snippet footer()}
- *     <ModalFooter align="end">
- *       <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
- *       <Button onclick={save}>Save</Button>
- *     </ModalFooter>
+ *     <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+ *     <Button onclick={save}>Save</Button>
  *   {/snippet}
  * </Modal>
  * ```
@@ -65,8 +63,14 @@ export type ModalProps = {
     footerClass?: ClassValue;
     /** Body content. */
     children?: Snippet;
-    /** Footer content — usually `<ModalFooter>` with action buttons. */
+    /**
+     * Footer content — typically action buttons. The footer wrapper renders
+     * with a tinted background, hairline separator, padding, and flex layout
+     * built-in, so the snippet can just contain `<Button>`s directly.
+     */
     footer?: Snippet;
+    /** How to align footer items horizontally. @default 'end' */
+    footerAlign?: 'start' | 'center' | 'end' | 'between';
     /** Replace the default title bar entirely. */
     header?: Snippet;
     testId?: string;

package/dist/modal/modal.d.ts

@@ -1,4 +1,18 @@
 export declare const modal: import("tailwind-variants").TVReturnType<{
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     size: {
         xs: {
             container: string;
@@ -30,6 +44,20 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     description: string;
     close: string;
 }, undefined, {
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     size: {
         xs: {
             container: string;
@@ -61,6 +89,20 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     description: string;
     close: string;
 }, import("tailwind-variants").TVReturnType<{
+    footerAlign: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+        between: {
+            footer: string;
+        };
+    };
     size: {
         xs: {
             container: string;

package/dist/modal/modal.js

@@ -4,15 +4,24 @@ export const modal = tv({
     slots: {
         base: 'fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4',
         backdrop: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
-        container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl max-sm:max-w-none max-sm:max-h-[95vh]',
-        header: 'px-4 py-3 sm:px-6 sm:py-4 border-b border-default-200 flex items-center justify-between shrink-0',
-        body: 'flex-1 px-4 py-3 sm:px-6 sm:py-4 overflow-y-auto',
-        footer: 'bg-default-50/80 rounded-b-xl shrink-0',
-        title: 'text-lg font-semibold text-default-900',
-        description: 'text-sm text-default-600 mt-1',
-        close: 'p-2 -mr-2 ml-4 rounded-lg text-default-400 cursor-pointer hover:text-default-600 hover:bg-default-100 transition-colors'
+        container: 'relative w-full flex flex-col bg-white rounded-lg shadow-2xl max-sm:max-w-none max-sm:max-h-[95vh]',
+        // Header: matches Card chrome — translucent bg-default-100/50 tint + hairline
+        // separator. Padding sits between Card md and lg: dialogs deserve a touch
+        // more presence than inline panels but stay compact relative to legacy modal.
+        header: 'px-5 py-3 bg-default-100/50 border-b border-default-200 flex items-center justify-between shrink-0',
+        body: 'flex-1 p-5 overflow-y-auto text-sm text-default-700',
+        footer: 'bg-default-100/50 border-t border-default-200 rounded-b-lg shrink-0 flex flex-wrap items-center gap-3 px-5 py-3',
+        title: 'text-sm font-semibold text-default-900 leading-tight',
+        description: 'text-xs text-default-500 font-normal',
+        close: 'p-1.5 -mr-1.5 ml-4 rounded-md text-default-400 cursor-pointer hover:text-default-600 hover:bg-default-200/70 transition-colors'
     },
     variants: {
+        footerAlign: {
+            start: { footer: 'justify-start' },
+            center: { footer: 'justify-center' },
+            end: { footer: 'justify-end' },
+            between: { footer: 'justify-between' }
+        },
         size: {
             [Size.XS]: {
                 container: 'max-w-xs max-h-[80vh]'
@@ -35,6 +44,7 @@ export const modal = tv({
         }
     },
     defaultVariants: {
-        size: Size.MD
+        size: Size.MD,
+        footerAlign: 'end'
     }
 });

package/dist/user-management/UserManagement.svelte

@@ -66,8 +66,20 @@
 		}
 	}
 
-	// Refresh the query cache to get fresh data
+	// Refresh the query cache and re-fetch.
+	//
+	// SvelteKit `query()` results are cached per-arg-combo. After a mutating
+	// `command()`, the cache is stale — calling the query again returns the
+	// old data until `.refresh()` is invoked. We detect a query by the
+	// presence of a `.refresh` method and invalidate before re-fetching.
+	// Plain async-function adapters (no caching) skip this branch.
 	async function refreshUsersQuery() {
+		const fn = adapter.getUsers as typeof adapter.getUsers & {
+			refresh?: () => Promise<unknown>;
+		};
+		if (typeof fn.refresh === 'function') {
+			await fn.refresh();
+		}
 		await loadUsers();
 	}
 

package/dist/user-management/UserModal.svelte

@@ -290,6 +290,7 @@
 	{open}
 	onclose={handleClose}
 	title={getModalTitle()}
+	footerAlign="between"
 	contentClass="max-w-4xl"
 	class={cn(className)}
 >
@@ -630,35 +631,33 @@
 		</div>
 	</form>
 
-	<!-- Form Actions -->
+	<!-- Form Actions: error on left, buttons on right via footerAlign="between" -->
 	{#snippet footer()}
-		<div class="flex items-center justify-between gap-4">
-			{#if formErrors.submit}
-				<p class="text-danger-500 text-sm">{formErrors.submit}</p>
-			{:else}
-				<div></div>
-			{/if}
-			<div class="flex gap-3">
-				<Button
-					variant="outline"
-					onclick={handleClose}
-					disabled={saving}
-					type="button"
-					data-testid="cancel-button"
-				>
-					Cancel
-				</Button>
-				<Button
-					type="button"
-					color="primary"
-					onclick={() => formElement?.requestSubmit()}
-					disabled={saving}
-					loading={saving}
-					data-testid="save-user-button"
-				>
-					{mode === 'create' ? 'Create User' : 'Save Changes'}
-				</Button>
-			</div>
+		{#if formErrors.submit}
+			<p class="text-danger-500 text-sm">{formErrors.submit}</p>
+		{:else}
+			<div></div>
+		{/if}
+		<div class="flex gap-3">
+			<Button
+				variant="outline"
+				onclick={handleClose}
+				disabled={saving}
+				type="button"
+				data-testid="cancel-button"
+			>
+				Cancel
+			</Button>
+			<Button
+				type="button"
+				color="primary"
+				onclick={() => formElement?.requestSubmit()}
+				disabled={saving}
+				loading={saving}
+				data-testid="save-user-button"
+			>
+				{mode === 'create' ? 'Create User' : 'Save Changes'}
+			</Button>
 		</div>
 	{/snippet}
 </Modal>

package/package.json

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

package/dist/modal/ModalFooter.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { cn } from '../helper/cls.js';
-	import { buildTestId } from '../helper/testid.js';
-	import type { Snippet } from 'svelte';
-	import type { ClassValue } from 'tailwind-variants';
-
-	type Props = {
-		class?: ClassValue;
-		align?: 'start' | 'center' | 'end' | 'between';
-		children: Snippet;
-		testId?: string;
-	};
-
-	let { class: className = '', align = 'end', children, testId }: Props = $props();
-
-	const alignClass = $derived(
-		{
-			start: 'justify-start',
-			center: 'justify-center',
-			end: 'justify-end',
-			between: 'justify-between'
-		}[align]
-	);
-</script>
-
-<div
-	class={cn(
-		'border-default-200 flex flex-wrap items-center gap-3 border-t px-6 py-4',
-		alignClass,
-		className
-	)}
-	data-testid={buildTestId('modal-footer', undefined, testId)}
->
-	{@render children()}
-</div>

package/dist/modal/ModalFooter.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ClassValue } from 'tailwind-variants';
-type Props = {
-    class?: ClassValue;
-    align?: 'start' | 'center' | 'end' | 'between';
-    children: Snippet;
-    testId?: string;
-};
-declare const ModalFooter: import("svelte").Component<Props, {}, "">;
-type ModalFooter = ReturnType<typeof ModalFooter>;
-export default ModalFooter;