sveltacular 0.0.76 → 1.0.0

package/dist/modals/alert.svelte.d.ts

@@ -1,26 +1,15 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 import type { FormFieldSizeOptions } from '../types/form.js';
-declare const __propDef: {
-    props: {
-        open?: boolean | undefined;
-        title?: string | undefined;
-        size?: FormFieldSizeOptions | undefined;
-        buttonText?: string | undefined;
-        buttonStyle?: "primary" | "secondary" | "danger" | undefined;
-        showCloseButton?: boolean | undefined;
-    };
-    events: {
-        close: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = {
+    open?: boolean;
+    title?: string | undefined;
+    size?: FormFieldSizeOptions;
+    buttonText?: string;
+    buttonVariant?: 'primary' | 'secondary' | 'danger';
+    showCloseButton?: boolean;
+    onClose?: (() => void) | undefined;
+    children: Snippet;
 };
-export type AlertProps = typeof __propDef.props;
-export type AlertEvents = typeof __propDef.events;
-export type AlertSlots = typeof __propDef.slots;
-export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
-}
-export {};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/modals/confirm.svelte

@@ -1,52 +1,69 @@
-<script>import DialogBody from "./dialog-body.svelte";
-import DialogFooter from "./dialog-footer.svelte";
-import DialogHeader from "./dialog-header.svelte";
-import Dialog from "./dialog-window.svelte";
-import Overlay from "../generic/overlay.svelte";
-import { createEventDispatcher } from "svelte";
-import Button from "../forms/button/button.svelte";
-import Divider from "../generic/divider/divider.svelte";
-import DialogCloseButton from "./dialog-close-button.svelte";
-export let open = false;
-export let title = void 0;
-export let size = "md";
-export let yesText = "Yes";
-export let noText = "No";
-export let yesStyle = "primary";
-export let noStyle = "secondary";
-export let showCloseButton = true;
-const dispatch = createEventDispatcher();
-const no = () => {
-  dispatch("no");
-  open = false;
-};
-const yes = () => {
-  dispatch("yes");
-  open = false;
-};
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import DialogBody from './dialog-body.svelte';
+	import DialogFooter from './dialog-footer.svelte';
+	import DialogHeader from './dialog-header.svelte';
+	import Dialog from './dialog-window.svelte';
+	import Overlay from '../generic/overlay.svelte';
+	import type { FormFieldSizeOptions } from '../types/form.js';
+	import Button from '../forms/button/button.svelte';
+	import Divider from '../generic/divider/divider.svelte';
+	import DialogCloseButton from './dialog-close-button.svelte';
+
+	let {
+		open = $bindable(false),
+		title = undefined,
+		size = 'md' as FormFieldSizeOptions,
+		yesText = 'Yes',
+		noText = 'No',
+		yesVariant = 'primary' as 'primary' | 'secondary' | 'danger',
+		noVariant = 'secondary' as 'primary' | 'secondary' | 'danger',
+		showCloseButton = true,
+		onYes = undefined,
+		onNo = undefined,
+		children
+	}: {
+		open?: boolean;
+		title?: string | undefined;
+		size?: FormFieldSizeOptions;
+		yesText?: string;
+		noText?: string;
+		yesVariant?: 'primary' | 'secondary' | 'danger';
+		noVariant?: 'primary' | 'secondary' | 'danger';
+		showCloseButton?: boolean;
+		onYes?: (() => void) | undefined;
+		onNo?: (() => void) | undefined;
+		children: Snippet;
+	} = $props();
+
+	const no = () => {
+		open = false;
+		onNo?.();
+	};
+
+	const yes = () => {
+		open = false;
+		onYes?.();
+	};
 </script>
 
 {#if open}
-	<Overlay on:click={no}>
-		<Dialog {size}>
+	<Overlay onClick={no}>
+		<Dialog {size} role="alertdialog" aria-modal="true" aria-labelledby={title ? 'confirm-title' : undefined}>
 			{#if title}
-				<DialogHeader>
+				<DialogHeader id="confirm-title">
 					{title}
 				</DialogHeader>
 				<Divider />
 			{/if}
-			<DialogCloseButton show={showCloseButton} on:click={no} />
+			<DialogCloseButton show={showCloseButton} onClick={no} />
 			<DialogBody>
-				<slot />
+				{@render children?.()}
 			</DialogBody>
 			<Divider />
 			<DialogFooter>
-				<Button on:click={no} style={noStyle} size="full">
-					{noText}
-				</Button>
-				<Button on:click={yes} style={yesStyle} size="full">
-					{yesText}
-				</Button>
+				<Button onClick={no} variant={noVariant} size="full" label={noText} />
+				<Button onClick={yes} variant={yesVariant} size="full" label={yesText} />
 			</DialogFooter>
 		</Dialog>
 	</Overlay>

package/dist/modals/confirm.svelte.d.ts

@@ -1,29 +1,18 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 import type { FormFieldSizeOptions } from '../types/form.js';
-declare const __propDef: {
-    props: {
-        open?: boolean | undefined;
-        title?: string | undefined;
-        size?: FormFieldSizeOptions | undefined;
-        yesText?: string | undefined;
-        noText?: string | undefined;
-        yesStyle?: "primary" | "secondary" | "danger" | undefined;
-        noStyle?: "primary" | "secondary" | "danger" | undefined;
-        showCloseButton?: boolean | undefined;
-    };
-    events: {
-        yes: CustomEvent<void>;
-        no: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = {
+    open?: boolean;
+    title?: string | undefined;
+    size?: FormFieldSizeOptions;
+    yesText?: string;
+    noText?: string;
+    yesVariant?: 'primary' | 'secondary' | 'danger';
+    noVariant?: 'primary' | 'secondary' | 'danger';
+    showCloseButton?: boolean;
+    onYes?: (() => void) | undefined;
+    onNo?: (() => void) | undefined;
+    children: Snippet;
 };
-export type ConfirmProps = typeof __propDef.props;
-export type ConfirmEvents = typeof __propDef.events;
-export type ConfirmSlots = typeof __propDef.slots;
-export default class Confirm extends SvelteComponent<ConfirmProps, ConfirmEvents, ConfirmSlots> {
-}
-export {};
+declare const Confirm: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Confirm = ReturnType<typeof Confirm>;
+export default Confirm;

package/dist/modals/dialog-body.svelte

@@ -1,9 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children?: Snippet } = $props();
+</script>
+
 <div>
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>div {
-  color: #000;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  color: var(--modal-body-fg);
+  margin-top: var(--spacing-base);
+  margin-bottom: var(--spacing-base);
 }</style>

package/dist/modals/dialog-body.svelte.d.ts

@@ -1,27 +1,7 @@
-/** @typedef {typeof __propDef.props}  DialogBodyProps */
-/** @typedef {typeof __propDef.events}  DialogBodyEvents */
-/** @typedef {typeof __propDef.slots}  DialogBodySlots */
-export default class DialogBody extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type DialogBodyProps = typeof __propDef.props;
-export type DialogBodyEvents = typeof __propDef.events;
-export type DialogBodySlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
 };
-export {};
+declare const DialogBody: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogBody = ReturnType<typeof DialogBody>;
+export default DialogBody;

package/dist/modals/dialog-close-button.svelte

@@ -1,15 +1,21 @@
-<script>import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let show = true;
-const onClick = (e) => {
-  e.preventDefault();
-  e.stopPropagation();
-  dispatch("click");
-};
+<script lang="ts">
+	let {
+		show = true,
+		onClick = undefined
+	}: {
+		show?: boolean;
+		onClick?: (() => void) | undefined;
+	} = $props();
+
+	const handleClick = (e: Event) => {
+		e.preventDefault();
+		e.stopPropagation();
+		onClick?.();
+	};
 </script>
 
 {#if show}
-	<button type="button" on:click={onClick}>X</button>
+	<button type="button" onclick={handleClick} aria-label="Close dialog">X</button>
 {/if}
 
 <style>button {

package/dist/modals/dialog-close-button.svelte.d.ts

@@ -1,18 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        show?: boolean | undefined;
-    };
-    events: {
-        click: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    show?: boolean;
+    onClick?: (() => void) | undefined;
 };
-export type DialogCloseButtonProps = typeof __propDef.props;
-export type DialogCloseButtonEvents = typeof __propDef.events;
-export type DialogCloseButtonSlots = typeof __propDef.slots;
-export default class DialogCloseButton extends SvelteComponent<DialogCloseButtonProps, DialogCloseButtonEvents, DialogCloseButtonSlots> {
-}
-export {};
+declare const DialogCloseButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogCloseButton = ReturnType<typeof DialogCloseButton>;
+export default DialogCloseButton;

package/dist/modals/dialog-footer.svelte

@@ -1,9 +1,12 @@
-<script>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
 	import FlexRow from '../layout/flex-row.svelte';
+
+	let { children }: { children?: Snippet } = $props();
 </script>
 
 <footer>
-	<FlexRow layout="stretch">
-		<slot />
+	<FlexRow justifyContent="stretch">
+		{@render children?.()}
 	</FlexRow>
 </footer>

package/dist/modals/dialog-footer.svelte.d.ts

@@ -1,27 +1,7 @@
-/** @typedef {typeof __propDef.props}  DialogFooterProps */
-/** @typedef {typeof __propDef.events}  DialogFooterEvents */
-/** @typedef {typeof __propDef.slots}  DialogFooterSlots */
-export default class DialogFooter extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type DialogFooterProps = typeof __propDef.props;
-export type DialogFooterEvents = typeof __propDef.events;
-export type DialogFooterSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
 };
-export {};
+declare const DialogFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogFooter = ReturnType<typeof DialogFooter>;
+export default DialogFooter;

package/dist/modals/dialog-header.svelte

@@ -1,5 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		id = undefined,
+		children
+	}: {
+		id?: string | undefined;
+		children?: Snippet;
+	} = $props();
+</script>
+
 <header>
-	<h1><slot /></h1>
+	<h1 {id}>{@render children?.()}</h1>
 </header>
 
 <style>header {

package/dist/modals/dialog-header.svelte.d.ts

@@ -1,27 +1,8 @@
-/** @typedef {typeof __propDef.props}  DialogHeaderProps */
-/** @typedef {typeof __propDef.events}  DialogHeaderEvents */
-/** @typedef {typeof __propDef.slots}  DialogHeaderSlots */
-export default class DialogHeader extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type DialogHeaderProps = typeof __propDef.props;
-export type DialogHeaderEvents = typeof __propDef.events;
-export type DialogHeaderSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    id?: string | undefined;
+    children?: Snippet;
 };
-export {};
+declare const DialogHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogHeader = ReturnType<typeof DialogHeader>;
+export default DialogHeader;

package/dist/modals/dialog-window.svelte

@@ -1,24 +1,52 @@
-<script>export let size = "md";
-const captureClick = (e) => {
-  e.stopPropagation();
-};
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FormFieldSizeOptions } from '../types/form.js';
+
+	let {
+		size = 'md' as FormFieldSizeOptions,
+		glass = false,
+		children,
+		...restProps
+	}: {
+		size?: FormFieldSizeOptions;
+		glass?: boolean;
+		children: Snippet;
+		[key: string]: any;
+	} = $props();
+
+	const captureClick = (e: Event) => {
+		e.stopPropagation();
+	};
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class={size} on:click={captureClick}>
-	<slot />
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="{size} {glass ? 'glass' : ''}" onclick={captureClick} {...restProps}>
+	{@render children?.()}
 </div>
 
 <style>div {
   position: relative;
-  border: solid 0.1rem #000;
-  padding: 1rem;
-  background-color: #fff;
-  border-radius: 1rem;
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  border: solid var(--border-thin) var(--gray-300);
+  padding: var(--spacing-base);
+  background-color: var(--modal-bg);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-2xl);
   z-index: 9999;
-  font-family: var(--base-font-family, sans-serif);
+  font-family: var(--base-font-family);
+}
+div.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: var(--border-thin) solid var(--glass-border);
+  /* Fallback for browsers without backdrop-filter support */
+}
+@supports not (backdrop-filter: blur(12px)) {
+  div.glass {
+    background: var(--modal-bg);
+    border: var(--border-thin) solid var(--gray-300);
+  }
 }
 div.sm {
   width: 25rem;

package/dist/modals/dialog-window.svelte.d.ts

@@ -1,19 +1,11 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 import type { FormFieldSizeOptions } from '../types/form.js';
-declare const __propDef: {
-    props: {
-        size?: FormFieldSizeOptions | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = {
+    size?: FormFieldSizeOptions;
+    glass?: boolean;
+    children: Snippet;
+    [key: string]: any;
 };
-export type DialogWindowProps = typeof __propDef.props;
-export type DialogWindowEvents = typeof __propDef.events;
-export type DialogWindowSlots = typeof __propDef.slots;
-export default class DialogWindow extends SvelteComponent<DialogWindowProps, DialogWindowEvents, DialogWindowSlots> {
-}
-export {};
+declare const DialogWindow: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogWindow = ReturnType<typeof DialogWindow>;
+export default DialogWindow;

package/dist/modals/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Alert } from './alert.svelte';
+export { default as Confirm } from './confirm.svelte';
+export { default as Modal } from './modal.svelte';
+export { default as Prompt } from './prompt.svelte';
+export { default as DialogBody } from './dialog-body.svelte';
+export { default as DialogCloseButton } from './dialog-close-button.svelte';
+export { default as DialogFooter } from './dialog-footer.svelte';
+export { default as DialogHeader } from './dialog-header.svelte';
+export { default as DialogWindow } from './dialog-window.svelte';

package/dist/modals/index.js

@@ -0,0 +1,9 @@
+export { default as Alert } from './alert.svelte';
+export { default as Confirm } from './confirm.svelte';
+export { default as Modal } from './modal.svelte';
+export { default as Prompt } from './prompt.svelte';
+export { default as DialogBody } from './dialog-body.svelte';
+export { default as DialogCloseButton } from './dialog-close-button.svelte';
+export { default as DialogFooter } from './dialog-footer.svelte';
+export { default as DialogHeader } from './dialog-header.svelte';
+export { default as DialogWindow } from './dialog-window.svelte';

package/dist/modals/modal.svelte

@@ -1,30 +1,93 @@
-<script>import DialogBody from "./dialog-body.svelte";
-import Dialog from "./dialog-window.svelte";
-import Overlay from "../generic/overlay.svelte";
-import DialogCloseButton from "./dialog-close-button.svelte";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let open = false;
-export let size = "md";
-export let showCloseButton = true;
-export let dismissable = true;
-const close = () => {
-  if (!dismissable)
-    return;
-  dispatch("close");
-  open = false;
-};
-$:
-  _showCloseButton = dismissable && showCloseButton;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import DialogBody from './dialog-body.svelte';
+	import Dialog from './dialog-window.svelte';
+	import Overlay from '../generic/overlay.svelte';
+	import type { FormFieldSizeOptions } from '../types/form.js';
+	import DialogCloseButton from './dialog-close-button.svelte';
+	import { trapFocus, storeFocus, restoreFocus } from '../helpers/focus.js';
+	import { animateFadeIn, animateScaleIn } from '../helpers/animations.js';
+	import { browser } from '$app/environment';
+
+	let {
+		open = $bindable(false),
+		size = 'md' as FormFieldSizeOptions,
+		showCloseButton = true,
+		dismissable = true,
+		blur = false,
+		glass = false,
+		title = undefined,
+		onClose = undefined,
+		children
+	}: {
+		open?: boolean;
+		size?: FormFieldSizeOptions;
+		showCloseButton?: boolean;
+		dismissable?: boolean;
+		blur?: boolean;
+		glass?: boolean;
+		title?: string | undefined;
+		onClose?: (() => void) | undefined;
+		children: Snippet;
+	} = $props();
+
+	let dialogElement = $state<HTMLDivElement | null>(null);
+	let previousFocus = $state<HTMLElement | null>(null);
+
+	const close = () => {
+		if (!dismissable) return;
+		open = false;
+		onClose?.();
+		if (browser && previousFocus) {
+			restoreFocus(previousFocus);
+		}
+	};
+
+	let _showCloseButton = $derived(dismissable && showCloseButton);
+	let modalId = $derived(`modal-${Math.random().toString(36).substring(7)}`);
+	let titleId = $derived(title ? `${modalId}-title` : undefined);
+
+	$effect(() => {
+		if (open && browser) {
+			// Store cleanup function
+			let untrap: (() => void) | null = null;
+			
+			// Wait for next tick to ensure dialogElement is bound
+			setTimeout(() => {
+				if (dialogElement) {
+					previousFocus = storeFocus();
+					untrap = trapFocus(dialogElement);
+				}
+			}, 0);
+			
+			// Return cleanup function
+			return () => {
+				if (untrap) {
+					untrap();
+				}
+			};
+		}
+	});
+
+	// Trigger enter animation when modal opens
+	$effect(() => {
+		if (open && browser) {
+			setTimeout(() => {
+				if (dialogElement) animateScaleIn(dialogElement);
+			}, 10);
+		}
+	});
 </script>
 
 {#if open}
-	<Overlay on:click={close}>
-		<Dialog {size}>
-			<DialogCloseButton show={_showCloseButton} on:click={close} />
-			<DialogBody>
-				<slot />
-			</DialogBody>
-		</Dialog>
+	<Overlay {blur} onClick={close}>
+		<div bind:this={dialogElement}>
+			<Dialog {size} {glass} role="dialog" aria-modal="true" aria-labelledby={titleId}>
+				<DialogCloseButton show={_showCloseButton} onClick={close} />
+				<DialogBody>
+					{@render children?.()}
+				</DialogBody>
+			</Dialog>
+		</div>
 	</Overlay>
 {/if}