sveltacular 0.0.77 → 1.0.1

package/dist/modals/modal.svelte

@@ -1,28 +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}

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

@@ -1,26 +1,16 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 import type { FormFieldSizeOptions } from '../types/form.js';
-declare const __propDef: {
-    props: {
-        open?: boolean;
-        size?: FormFieldSizeOptions;
-        showCloseButton?: boolean;
-        dismissable?: boolean;
-    };
-    events: {
-        close: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type $$ComponentProps = {
+    open?: boolean;
+    size?: FormFieldSizeOptions;
+    showCloseButton?: boolean;
+    dismissable?: boolean;
+    blur?: boolean;
+    glass?: boolean;
+    title?: string | undefined;
+    onClose?: (() => void) | undefined;
+    children: Snippet;
 };
-export type ModalProps = typeof __propDef.props;
-export type ModalEvents = typeof __propDef.events;
-export type ModalSlots = typeof __propDef.slots;
-export default class Modal extends SvelteComponent<ModalProps, ModalEvents, ModalSlots> {
-}
-export {};
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/modals/prompt.svelte

@@ -1,61 +1,83 @@
-<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 TextBox from "../forms/text-box/text-box.svelte";
-import DialogCloseButton from "./dialog-close-button.svelte";
-export let open = false;
-export let title = void 0;
-export let size = "md";
-export let okText = "Yes";
-export let cancelText = "No";
-export let okStyle = "primary";
-export let cancelStyle = "secondary";
-export let showCloseButton = true;
-export let placeholder = "";
-export let type = "text";
-export let required = false;
-let value = "";
-const dispatch = createEventDispatcher();
-const no = () => {
-  open = false;
-  dispatch("cancel");
-};
-const yes = () => {
-  if (required && !value) return;
-  open = false;
-  dispatch("ok", value);
-};
+<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 { AllowedTextInputTypes, FormFieldSizeOptions } from '../types/form.js';
+	import Button from '../forms/button/button.svelte';
+	import Divider from '../generic/divider/divider.svelte';
+	import TextBox from '../forms/text-box/text-box.svelte';
+	import DialogCloseButton from './dialog-close-button.svelte';
+
+	let {
+		open = $bindable(false),
+		title = undefined,
+		size = 'md' as FormFieldSizeOptions,
+		okText = 'Yes',
+		cancelText = 'No',
+		okVariant = 'primary' as 'primary' | 'secondary' | 'danger',
+		cancelVariant = 'secondary' as 'primary' | 'secondary' | 'danger',
+		showCloseButton = true,
+		placeholder = '',
+		type = 'text' as AllowedTextInputTypes,
+		required = false,
+		onOk = undefined,
+		onCancel = undefined,
+		children
+	}: {
+		open?: boolean;
+		title?: string | undefined;
+		size?: FormFieldSizeOptions;
+		okText?: string;
+		cancelText?: string;
+		okVariant?: 'primary' | 'secondary' | 'danger';
+		cancelVariant?: 'primary' | 'secondary' | 'danger';
+		showCloseButton?: boolean;
+		placeholder?: string;
+		type?: AllowedTextInputTypes;
+		required?: boolean;
+		onOk?: ((value: string) => void) | undefined;
+		onCancel?: (() => void) | undefined;
+		children?: Snippet;
+	} = $props();
+
+	let value = $state('');
+
+	const no = () => {
+		open = false;
+		onCancel?.();
+	};
+
+	const yes = () => {
+		if (required && !value) return;
+		open = false;
+		onOk?.(value);
+	};
 </script>
 
 {#if open}
-	<Overlay on:click={no}>
-		<Dialog {size}>
+	<Overlay onClick={no}>
+		<Dialog {size} role="dialog" aria-modal="true" aria-labelledby={title ? 'prompt-title' : undefined}>
 			{#if title}
-				<DialogHeader>
+				<DialogHeader id="prompt-title">
 					{title}
 				</DialogHeader>
 				<Divider />
 			{/if}
-			<DialogCloseButton show={showCloseButton} on:click={no} />
-			<DialogBody>
-				<TextBox bind:value {placeholder} {type} {required} size="full">
-					<slot />
-				</TextBox>
-			</DialogBody>
+			<DialogCloseButton show={showCloseButton} onClick={no} />
+		<DialogBody>
+			<TextBox bind:value {placeholder} {type} {required} size="full" />
+			{#if children}
+				{@render children()}
+			{/if}
+		</DialogBody>
 			<Divider />
-			<DialogFooter>
-				<Button on:click={no} style={cancelStyle} size="full">
-					{cancelText}
-				</Button>
-				<Button on:click={yes} style={okStyle} size="full">
-					{okText}
-				</Button>
-			</DialogFooter>
+		<DialogFooter>
+			<Button onClick={no} variant={cancelVariant} size="full" label={cancelText} />
+			<Button onClick={yes} variant={okVariant} size="full" label={okText} />
+		</DialogFooter>
 		</Dialog>
 	</Overlay>
 {/if}

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

@@ -1,34 +1,21 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../types/form.js';
-declare const __propDef: {
-    props: {
-        open?: boolean;
-        title?: string | undefined;
-        size?: FormFieldSizeOptions;
-        okText?: string;
-        cancelText?: string;
-        okStyle?: "primary" | "secondary" | "danger";
-        cancelStyle?: "primary" | "secondary" | "danger";
-        showCloseButton?: boolean;
-        placeholder?: string;
-        type?: AllowedTextInputTypes;
-        required?: boolean;
-    };
-    events: {
-        ok: CustomEvent<string>;
-        cancel: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type $$ComponentProps = {
+    open?: boolean;
+    title?: string | undefined;
+    size?: FormFieldSizeOptions;
+    okText?: string;
+    cancelText?: string;
+    okVariant?: 'primary' | 'secondary' | 'danger';
+    cancelVariant?: 'primary' | 'secondary' | 'danger';
+    showCloseButton?: boolean;
+    placeholder?: string;
+    type?: AllowedTextInputTypes;
+    required?: boolean;
+    onOk?: ((value: string) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    children?: Snippet;
 };
-export type PromptProps = typeof __propDef.props;
-export type PromptEvents = typeof __propDef.events;
-export type PromptSlots = typeof __propDef.slots;
-export default class Prompt extends SvelteComponent<PromptProps, PromptEvents, PromptSlots> {
-}
-export {};
+declare const Prompt: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Prompt = ReturnType<typeof Prompt>;
+export default Prompt;

package/dist/navigation/accordion/accordion.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import AngleUpIcon from '../../icons/angle-up-icon.svelte';
+	import { uniqueId } from '../../helpers/unique-id.js';
+
+	let {
+		title,
+		expanded = $bindable(false),
+		children
+	}: {
+		title: string;
+		expanded?: boolean;
+		children: Snippet;
+	} = $props();
+
+	const id = uniqueId();
+	const buttonId = `accordion-button-${id}`;
+	const panelId = `accordion-panel-${id}`;
+
+	const toggle = () => {
+		expanded = !expanded;
+	};
+
+	const handleKeyDown = (e: KeyboardEvent) => {
+		// Space and Enter should toggle
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault();
+			toggle();
+		}
+	};
+</script>
+
+<div class:expanded class="accordion">
+	<h3>
+		<button
+			type="button"
+			id={buttonId}
+			aria-expanded={expanded}
+			aria-controls={panelId}
+			onclick={toggle}
+			onkeydown={handleKeyDown}
+		>
+			<span class="title">
+				{title}
+			</span>
+			<span class="icon" aria-hidden="true">
+				<AngleUpIcon />
+			</span>
+		</button>
+	</h3>
+	<div
+		id={panelId}
+		role="region"
+		aria-labelledby={buttonId}
+		class="menu"
+		hidden={!expanded}
+	>
+		{@render children?.()}
+	</div>
+</div>
+
+<style>.accordion {
+  background: #eee;
+  color: #000;
+  max-height: 3rem;
+  transition: max-height 1s ease;
+  overflow: hidden;
+}
+.accordion button {
+  appearance: none;
+  width: 100%;
+  padding: 1rem;
+  border: none;
+  text-align: left;
+  outline: none;
+  transition: background 0.3s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 1rem;
+}
+.accordion button .icon {
+  width: 1rem;
+  height: 1rem;
+  display: block;
+  transition: transform 0.3s linear;
+}
+.accordion button:hover {
+  background: #ccc;
+}
+.accordion .menu {
+  padding: 1rem;
+  opacity: 0;
+  transition: opacity 0.3s linear;
+}
+.accordion.expanded {
+  max-height: 800px;
+}
+.accordion.expanded .menu {
+  opacity: 1;
+}
+.accordion.expanded .icon {
+  transform: rotate(180deg);
+}</style>

package/dist/navigation/accordion/accordion.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    expanded?: boolean;
+    children: Snippet;
+};
+declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "expanded">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/navigation/app-bar/app-bar.svelte

@@ -1,18 +1,32 @@
-<script>import { setContext } from "svelte";
-export let isFixed = true;
-export let position = "top";
-export let size = "md";
-export let padding = "md";
-setContext("app-bar", {
-  isFixed,
-  position,
-  size,
-  padding
-});
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FormFieldSizeOptions } from '../../types/form.js';
+	import { setContext } from 'svelte';
+
+	let {
+		isFixed = true,
+		position = 'top' as 'top' | 'bottom',
+		size = 'md' as FormFieldSizeOptions | 'xs',
+		padding = 'md' as 'none' | FormFieldSizeOptions,
+		children
+	}: {
+		isFixed?: boolean;
+		position?: 'top' | 'bottom';
+		size?: FormFieldSizeOptions | 'xs';
+		padding?: 'none' | FormFieldSizeOptions;
+		children: Snippet;
+	} = $props();
+
+	setContext('app-bar', {
+		get isFixed() { return isFixed; },
+		get position() { return position; },
+		get size() { return size; },
+		get padding() { return padding; }
+	});
 </script>
 
 <header class="{position} {size} padding-{padding} {isFixed ? 'fixed' : 'absolute'}">
-	<slot />
+	{@render children?.()}
 </header>
 
 <style>header {

package/dist/navigation/app-bar/app-bar.svelte.d.ts

@@ -1,24 +1,12 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 import type { FormFieldSizeOptions } from '../../types/form.js';
-declare const __propDef: {
-    props: {
-        isFixed?: boolean;
-        position?: "top" | "bottom";
-        size?: FormFieldSizeOptions | "xs";
-        padding?: "none" | FormFieldSizeOptions;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type $$ComponentProps = {
+    isFixed?: boolean;
+    position?: 'top' | 'bottom';
+    size?: FormFieldSizeOptions | 'xs';
+    padding?: 'none' | FormFieldSizeOptions;
+    children: Snippet;
 };
-export type AppBarProps = typeof __propDef.props;
-export type AppBarEvents = typeof __propDef.events;
-export type AppBarSlots = typeof __propDef.slots;
-export default class AppBar extends SvelteComponent<AppBarProps, AppBarEvents, AppBarSlots> {
-}
-export {};
+declare const AppBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppBar = ReturnType<typeof AppBar>;
+export default AppBar;

package/dist/navigation/app-bar/app-branding.svelte

@@ -1,9 +1,14 @@
-<script>import { setContext } from "svelte";
-setContext("app-branding", true);
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+
+	let { children }: { children?: Snippet } = $props();
+
+	setContext('app-branding', true);
 </script>
 
 <div class="branding">
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>
@@ -14,7 +19,7 @@ setContext("app-branding", true);
 		flex-direction: column;
 		width: 100%;
 		height: 100%;
-		padding-left: 0.5rem;
-		padding-right: 0.5rem;
+		padding-left: var(--spacing-sm);
+		padding-right: var(--spacing-sm);
 	}
 </style>

package/dist/navigation/app-bar/app-branding.svelte.d.ts

@@ -1,18 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
 };
-export type AppBrandingProps = typeof __propDef.props;
-export type AppBrandingEvents = typeof __propDef.events;
-export type AppBrandingSlots = typeof __propDef.slots;
-export default class AppBranding extends SvelteComponent<AppBrandingProps, AppBrandingEvents, AppBrandingSlots> {
-}
-export {};
+declare const AppBranding: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppBranding = ReturnType<typeof AppBranding>;
+export default AppBranding;

package/dist/navigation/app-bar/app-logo.svelte

@@ -1,14 +1,29 @@
-<script>import Image from "../../images/image.svelte";
-export let src = void 0;
-export let alt;
-export let href;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Image from '../../images/image.svelte';
+
+	let {
+		src = undefined,
+		alt,
+		href,
+		children = undefined
+	}: {
+		src?: string;
+		alt: string;
+		href: string;
+		children?: Snippet;
+	} = $props();
 </script>
 
 <div class="logo">
 	{#if src}
 		<Image {src} {alt} {href} align="left" />
 	{:else}
-		<a {href} title={alt}><slot /></a>
+		<a {href} title={alt}>
+			{#if children}
+				{@render children?.()}
+			{/if}
+		</a>
 	{/if}
 </div>
 

package/dist/navigation/app-bar/app-logo.svelte.d.ts

@@ -1,22 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        src?: string | undefined;
-        alt: string;
-        href: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    src?: string;
+    alt: string;
+    href: string;
+    children?: Snippet;
 };
-export type AppLogoProps = typeof __propDef.props;
-export type AppLogoEvents = typeof __propDef.events;
-export type AppLogoSlots = typeof __propDef.slots;
-export default class AppLogo extends SvelteComponent<AppLogoProps, AppLogoEvents, AppLogoSlots> {
-}
-export {};
+declare const AppLogo: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppLogo = ReturnType<typeof AppLogo>;
+export default AppLogo;