sveltacular 0.0.77 → 1.0.0

package/dist/index.js

@@ -1,136 +1,28 @@
-// Forms
-export { default as Button } from './forms/button/button.svelte';
-export { default as CheckBox } from './forms/check-box/check-box.svelte';
-export { default as CheckBoxGroup } from './forms/check-box/check-box-group.svelte';
-export { default as DateBox } from './forms/date-box/date-box.svelte';
-export { default as ListBox } from './forms/list-box/list-box.svelte';
-export { default as BoolBox } from './forms/bool-box/bool-box.svelte';
-export { default as FileBox } from './forms/file-box/file-box.svelte';
-export { default as FileArea } from './forms/file-area/file-area.svelte';
-export { default as NumberBox } from './forms/number-box/number-box.svelte';
-export { default as MoneyBox } from './forms/money-box/money-box.svelte';
-export { default as RadioGroup } from './forms/radio-group/radio-group.svelte';
-export { default as RadioBox } from './forms/radio-group/radio-box.svelte';
-export { default as TextArea } from './forms/text-area/text-area.svelte';
-export { default as TextBox } from './forms/text-box/text-box.svelte';
-export { default as FormField } from './forms/form-field.svelte';
-export { default as FormLabel } from './forms/form-label.svelte';
-export { default as Form } from './forms/form.svelte';
-export { default as FormHeader } from './forms/form-header.svelte';
-export { default as FormFooter } from './forms/form-footer.svelte';
-export { default as FormSection } from './forms/form-section.svelte';
-export { default as InfoBox } from './forms/info-box/info-box.svelte';
-export { default as UrlBox } from './forms/url-box/url-box.svelte';
-export { default as NewOrExistingCombo } from './forms/combo/new-or-existing-combo.svelte';
-export { default as PhoneBox } from './forms/phone-box/phone-box.svelte';
-// Generic
-export { default as Card } from './generic/card/card.svelte';
-export { default as CardContainer } from './generic/card/card-container.svelte';
-export { default as Divider } from './generic/divider/divider.svelte';
-export { default as Link } from './generic/link/link.svelte';
-export { default as Pill } from './generic/pill/pill.svelte';
-export { default as Scorecard } from './generic/scorecard/scorecard.svelte';
-export { default as Overlay } from './generic/overlay.svelte';
-export { default as Image } from './images/image.svelte';
-export { default as Icon } from './images/icon.svelte';
-export { default as Menu } from './generic/menu/menu.svelte';
-export { default as DateTime } from './generic/date/date-time.svelte';
-export { default as Panel } from './generic/panel/panel.svelte';
-export { default as Section } from './generic/section/section.svelte';
-export { default as Header } from './generic/header/header.svelte';
-export { default as Dot } from './generic/dot/dot.svelte';
-export { default as Notice } from './generic/notice/notice.svelte';
-export { default as Empty } from './generic/empty/empty.svelte';
-export { default as Email } from './generic/email/email.svelte';
-export { default as Phone } from './generic/phone/phone.svelte';
-export { default as Address } from './generic/address/address.svelte';
-export { default as Toaster } from './generic/toaster/toaster.svelte';
-export { default as List } from './generic/list/list.svelte';
-export { default as ListItem } from './generic/list/list-item.svelte';
-// Layout
-export { default as FlexCol } from './layout/flex-col.svelte';
-export { default as FlexRow } from './layout/flex-row.svelte';
-export { default as FlexItem } from './layout/flex-item.svelte';
-// Modals
-export { default as Alert } from './modals/alert.svelte';
-export { default as Confirm } from './modals/confirm.svelte';
-export { default as Modal } from './modals/modal.svelte';
-export { default as Prompt } from './modals/prompt.svelte';
-export { default as DialogBody } from './modals/dialog-body.svelte';
-export { default as DialogFooter } from './modals/dialog-footer.svelte';
-export { default as DialogHeader } from './modals/dialog-header.svelte';
-export { default as DialogWindow } from './modals/dialog-window.svelte';
-// Navigation
-export { default as Accordian } from './navigation/accordian/accordian.svelte';
-export { default as AppBar } from './navigation/app-bar/app-bar.svelte';
-export { default as Breadcrumbs } from './navigation/breadcrumbs/breadcrumbs.svelte';
-export { default as SideBar } from './navigation/side-bar/side-bar.svelte';
-export { default as TabGroup } from './navigation/tabs/tab-group.svelte';
-export { default as Tab } from './navigation/tabs/tab.svelte';
-export { default as AppLogo } from './navigation/app-bar/app-logo.svelte';
-export { default as AppNav } from './navigation/app-bar/app-nav.svelte';
-export { default as AppNavItem } from './navigation/app-bar/app-nav-item.svelte';
-export { default as AppBranding } from './navigation/app-bar/app-branding.svelte';
-export { default as Wizard } from './navigation/wizard/wizard.svelte';
-export { default as WizardStep } from './navigation/wizard/wizard-step.svelte';
-export { default as Pagination } from './navigation/pagination/pagination.svelte';
-export { default as DropdownItem } from './generic/dropdown-item/dropdown-item.svelte';
-// Tables
-export { default as DataGrid } from './tables/data-grid.svelte';
-export { default as Table } from './tables/table.svelte';
-export { default as TableBody } from './tables/table-body.svelte';
-export { default as TableCell } from './tables/table-cell.svelte';
-export { default as TableHeader } from './tables/table-header.svelte';
-export { default as TableHeaderCell } from './tables/table-header-cell.svelte';
-export { default as TableHeaderRow } from './tables/table-header-row.svelte';
-export { default as TableFooter } from './tables/table-footer.svelte';
-export { default as TableFooterCell } from './tables/table-footer-cell.svelte';
-export { default as TableFooterRow } from './tables/table-footer-row.svelte';
-export { default as TableRow } from './tables/table-row.svelte';
-// Typography
-export { default as Headline } from './typography/headline.svelte';
-export { default as Subtitle } from './typography/subtitle.svelte';
-export { default as Text } from './typography/text.svelte';
-export { default as CodeBlock } from './typography/code-block.svelte';
-export { default as Paragraph } from './typography/paragraph.svelte';
-// Timeline
-export { default as Timeline } from './timeline/timeline.svelte';
-export { default as TimelineItem } from './timeline/timeline-item.svelte';
-// Placeholders
-export { default as Loading } from './placeholders/loading.svelte';
-export { default as SkeletonText } from './placeholders/skeleton-text.svelte';
-// Types
-export * from './types/data.js';
-export * from './types/date.js';
-export * from './types/form.js';
-// Helpers
-export * from './helpers/ago.js';
-export * from './helpers/anchor.js';
-export * from './helpers/capitalize.js';
-export * from './helpers/date.js';
-export * from './helpers/debounce.js';
-export * from './helpers/navigate-to.js';
-export * from './helpers/nobr.js';
-export * from './helpers/random.js';
-export * from './helpers/remove-properties.js';
-export * from './helpers/round-to-decimals.js';
-export * from './helpers/split-new-lines.js';
-export * from './helpers/subscribable.js';
-export * from './helpers/transform.js';
-export * from './helpers/ucfirst.js';
-export * from './helpers/unique-id.js';
-// Data
+// Forms - re-export from category barrel
+export * from './forms/index.js';
+// Generic - re-export from category barrel
+export * from './generic/index.js';
+// Layout - re-export from category barrel
+export * from './layout/index.js';
+// Modals - re-export from category barrel
+export * from './modals/index.js';
+// Navigation - re-export from category barrel
+export * from './navigation/index.js';
+// Tables - re-export from category barrel
+export * from './tables/index.js';
+// Typography - re-export from category barrel
+export * from './typography/index.js';
+// Timeline - re-export from category barrel
+export * from './timeline/index.js';
+// Placeholders - re-export from category barrel
+export * from './placeholders/index.js';
+// Images - re-export from category barrel
+export * from './images/index.js';
+// Icons - re-export from category barrel
+export * from './icons/index.js';
+// Types - re-export from category barrel
+export * from './types/index.js';
+// Helpers - re-export from category barrel
+export * from './helpers/index.js';
+// Data - re-export from category barrel
 export * from './data/index.js';
-// Icons
-export { default as AngleRightIcon } from './icons/angle-right-icon.svelte';
-export { default as AngleUpIcon } from './icons/angle-up-icon.svelte';
-export { default as CheckIcon } from './icons/check-icon.svelte';
-export { default as EnvelopIcon } from './icons/envelope-icon.svelte';
-export { default as FolderOpenIcon } from './icons/folder-open-icon.svelte';
-export { default as HambugerIcon } from './icons/hamburger-icon.svelte';
-export { default as HomeIcon } from './icons/home-icon.svelte';
-export { default as LinkIcon } from './icons/link-icon.svelte';
-export { default as MobilePhoneIcon } from './icons/mobile-phone-icon.svelte';
-export { default as PhoneIcon } from './icons/phone-icon.svelte';
-export { default as SvgIcon } from './icons/svg-icon.svelte';
-export { default as UploadIcon } from './icons/upload-icon.svelte';

package/dist/layout/flex-col.svelte

@@ -1,22 +1,71 @@
-<script>export let marginBottom = 0;
-export let marginTop = 0;
-export let gap = "1rem";
-export let justifyContent = "start";
-export let alignItems = "stretch";
-export let alignContent = "stretch";
-$: _marginTop = typeof marginTop === "number" ? `${marginTop}px` : marginTop;
-$: _marginBottom = typeof marginBottom === "number" ? `${marginBottom}px` : marginBottom;
-$: _justifyContent = ["start", "end"].includes(justifyContent) ? `flex-${justifyContent}` : ["between", "around", "evenly"].includes(justifyContent) ? `space-${justifyContent}` : justifyContent;
-$: _alignContent = ["start", "end"].includes(alignContent) ? `flex-${alignContent}` : ["between", "around"].includes(alignContent) ? `space-${alignContent}` : alignContent;
-$: _alignItems = ["start", "end"].includes(alignItems) ? `flex-${alignItems}` : alignItems;
-$: _gap = typeof gap === "number" ? `${gap}px` : gap;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		marginBottom = 0,
+		marginTop = 0,
+		gap = '1rem',
+		justifyContent = 'start' as
+			| 'start'
+			| 'center'
+			| 'end'
+			| 'between'
+			| 'around'
+			| 'evenly'
+			| 'stretch'
+			| 'baseline',
+		alignItems = 'stretch' as 'start' | 'center' | 'end' | 'stretch' | 'auto',
+		alignContent = 'stretch' as 'start' | 'center' | 'end' | 'between' | 'around' | 'stretch',
+		children
+	}: {
+		marginBottom?: string | number;
+		marginTop?: string | number;
+		gap?: string | number;
+		justifyContent?:
+			| 'start'
+			| 'center'
+			| 'end'
+			| 'between'
+			| 'around'
+			| 'evenly'
+			| 'stretch'
+			| 'baseline';
+		alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
+		alignContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'stretch';
+		children: Snippet;
+	} = $props();
+
+	let _marginTop = $derived(typeof marginTop === 'number' ? `${marginTop}px` : marginTop);
+	let _marginBottom = $derived(
+		typeof marginBottom === 'number' ? `${marginBottom}px` : marginBottom
+	);
+	let _justifyContent = $derived(
+		['start', 'end'].includes(justifyContent)
+			? `flex-${justifyContent}`
+			: ['between', 'around', 'evenly'].includes(justifyContent)
+				? `space-${justifyContent}`
+				: justifyContent
+	);
+	let _alignContent = $derived(
+		['start', 'end'].includes(alignContent)
+			? `flex-${alignContent}`
+			: ['between', 'around'].includes(alignContent)
+				? `space-${alignContent}`
+				: alignContent
+	);
+	let _alignItems = $derived(
+		['start', 'end'].includes(alignItems) ? `flex-${alignItems}` : alignItems
+	);
+	let _gap = $derived(typeof gap === 'number' ? `${gap}px` : gap);
 </script>
 
-<div style={`
+<div
+	style={`
 	margin-top: ${_marginTop}; margin-bottom: ${_marginBottom}; 
-	gap: ${_gap}; jusify-content: ${_justifyContent}; align-items: ${_alignItems}; align-content: ${_alignContent}
-`}>
-	<slot />
+	gap: ${_gap}; justify-content: ${_justifyContent}; align-items: ${_alignItems}; align-content: ${_alignContent}
+`}
+>
+	{@render children?.()}
 </div>
 
 <style>div {

package/dist/layout/flex-col.svelte.d.ts

@@ -1,25 +1,13 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        marginBottom?: string | number;
-        marginTop?: string | number;
-        gap?: string | number;
-        justifyContent?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "baseline";
-        alignItems?: "start" | "center" | "end" | "stretch" | "auto";
-        alignContent?: "start" | "center" | "end" | "between" | "around" | "stretch";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    marginBottom?: string | number;
+    marginTop?: string | number;
+    gap?: string | number;
+    justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch' | 'baseline';
+    alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
+    alignContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'stretch';
+    children: Snippet;
 };
-export type FlexColProps = typeof __propDef.props;
-export type FlexColEvents = typeof __propDef.events;
-export type FlexColSlots = typeof __propDef.slots;
-export default class FlexCol extends SvelteComponent<FlexColProps, FlexColEvents, FlexColSlots> {
-}
-export {};
+declare const FlexCol: import("svelte").Component<$$ComponentProps, {}, "">;
+type FlexCol = ReturnType<typeof FlexCol>;
+export default FlexCol;

package/dist/layout/flex-item.svelte

@@ -1,7 +1,17 @@
-<script>export let grow = false;
-export let align = "auto";
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		grow = false,
+		align = 'auto',
+		children
+	}: {
+		grow?: boolean;
+		align?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
+		children: Snippet;
+	} = $props();
 </script>
 
 <div style={`flex: ${grow ? 1 : 0}; align-self: ${align}`}>
-	<slot />
+	{@render children?.()}
 </div>

package/dist/layout/flex-item.svelte.d.ts

@@ -1,21 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        grow?: boolean;
-        align?: "start" | "center" | "end" | "stretch" | "auto";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    grow?: boolean;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
+    children: Snippet;
 };
-export type FlexItemProps = typeof __propDef.props;
-export type FlexItemEvents = typeof __propDef.events;
-export type FlexItemSlots = typeof __propDef.slots;
-export default class FlexItem extends SvelteComponent<FlexItemProps, FlexItemEvents, FlexItemSlots> {
-}
-export {};
+declare const FlexItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type FlexItem = ReturnType<typeof FlexItem>;
+export default FlexItem;

package/dist/layout/flex-row.svelte

@@ -1,17 +1,72 @@
-<script>export let marginBottom = 0;
-export let marginTop = 0;
-export let gap = "1rem";
-export let size = "full";
-export let wrap = false;
-export let justifyContent = "space-between";
-export let alignItems = "stretch";
-export let alignContent = "stretch";
-$: _marginTop = typeof marginTop === "number" ? `${marginTop}px` : marginTop;
-$: _marginBottom = typeof marginBottom === "number" ? `${marginBottom}px` : marginBottom;
-$: _justifyContent = ["start", "end"].includes(justifyContent) ? `flex-${justifyContent}` : ["between", "around", "evenly"].includes(justifyContent) ? `space-${justifyContent}` : justifyContent;
-$: _alignContent = ["start", "end"].includes(alignContent) ? `flex-${alignContent}` : ["between", "around"].includes(alignContent) ? `space-${alignContent}` : alignContent;
-$: _alignItems = ["start", "end"].includes(alignItems) ? `flex-${alignItems}` : alignItems;
-$: _gap = typeof gap === "number" ? `${gap}px` : gap;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		marginBottom = 0,
+		marginTop = 0,
+		gap = '1rem',
+		size = 'full' as 'auto' | 'full',
+		wrap = false,
+		justifyContent = 'space-between' as
+			| 'start'
+			| 'center'
+			| 'end'
+			| 'space-between'
+			| 'space-around'
+			| 'space-evenly'
+			| 'stretch'
+			| 'baseline',
+		alignItems = 'stretch' as 'start' | 'center' | 'end' | 'stretch' | 'auto',
+		alignContent = 'stretch' as
+			| 'start'
+			| 'center'
+			| 'end'
+			| 'space-between'
+			| 'space-around'
+			| 'stretch',
+		children
+	}: {
+		marginBottom?: string | number;
+		marginTop?: string | number;
+		gap?: string | number;
+		size?: 'auto' | 'full';
+		wrap?: boolean;
+		justifyContent?:
+			| 'start'
+			| 'center'
+			| 'end'
+			| 'space-between'
+			| 'space-around'
+			| 'space-evenly'
+			| 'stretch'
+			| 'baseline';
+		alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
+		alignContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'stretch';
+		children: Snippet;
+	} = $props();
+
+	let _marginTop = $derived(typeof marginTop === 'number' ? `${marginTop}px` : marginTop);
+	let _marginBottom = $derived(
+		typeof marginBottom === 'number' ? `${marginBottom}px` : marginBottom
+	);
+	let _justifyContent = $derived(
+		['start', 'end'].includes(justifyContent)
+			? `flex-${justifyContent}`
+			: ['between', 'around', 'evenly'].includes(justifyContent)
+				? `space-${justifyContent}`
+				: justifyContent
+	);
+	let _alignContent = $derived(
+		['start', 'end'].includes(alignContent)
+			? `flex-${alignContent}`
+			: ['between', 'around'].includes(alignContent)
+				? `space-${alignContent}`
+				: alignContent
+	);
+	let _alignItems = $derived(
+		['start', 'end'].includes(alignItems) ? `flex-${alignItems}` : alignItems
+	);
+	let _gap = $derived(typeof gap === 'number' ? `${gap}px` : gap);
 </script>
 
 <div
@@ -21,7 +76,7 @@ $: _gap = typeof gap === "number" ? `${gap}px` : gap;
 	`}
 	class="size-{size} {wrap ? 'wrap' : 'nowrap'}"
 >
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>div {

package/dist/layout/flex-row.svelte.d.ts

@@ -1,27 +1,15 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        marginBottom?: string | number;
-        marginTop?: string | number;
-        gap?: string | number;
-        size?: "auto" | "full";
-        wrap?: boolean;
-        justifyContent?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | "stretch" | "baseline";
-        alignItems?: "start" | "center" | "end" | "stretch" | "auto";
-        alignContent?: "start" | "center" | "end" | "space-between" | "space-around" | "stretch";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    marginBottom?: string | number;
+    marginTop?: string | number;
+    gap?: string | number;
+    size?: 'auto' | 'full';
+    wrap?: boolean;
+    justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline';
+    alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
+    alignContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'stretch';
+    children: Snippet;
 };
-export type FlexRowProps = typeof __propDef.props;
-export type FlexRowEvents = typeof __propDef.events;
-export type FlexRowSlots = typeof __propDef.slots;
-export default class FlexRow extends SvelteComponent<FlexRowProps, FlexRowEvents, FlexRowSlots> {
-}
-export {};
+declare const FlexRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type FlexRow = ReturnType<typeof FlexRow>;
+export default FlexRow;

package/dist/layout/grid.svelte

@@ -1,5 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
 <div>
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>

package/dist/layout/grid.svelte.d.ts

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

package/dist/layout/index.d.ts

@@ -0,0 +1,4 @@
+export { default as FlexCol } from './flex-col.svelte';
+export { default as FlexRow } from './flex-row.svelte';
+export { default as FlexItem } from './flex-item.svelte';
+export { default as Grid } from './grid.svelte';

package/dist/layout/index.js

@@ -0,0 +1,4 @@
+export { default as FlexCol } from './flex-col.svelte';
+export { default as FlexRow } from './flex-row.svelte';
+export { default as FlexItem } from './flex-item.svelte';
+export { default as Grid } from './grid.svelte';

package/dist/modals/alert.svelte

@@ -1,43 +1,57 @@
-<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 Divider from "../generic/divider/divider.svelte";
-import Overlay from "../generic/overlay.svelte";
-import Button from "../forms/button/button.svelte";
-import DialogCloseButton from "./dialog-close-button.svelte";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let open = false;
-export let title = void 0;
-export let size = "md";
-export let buttonText = "OK";
-export let buttonStyle = "primary";
-export let showCloseButton = true;
-const close = () => {
-  dispatch("close");
-  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 Divider from '../generic/divider/divider.svelte';
+	import Overlay from '../generic/overlay.svelte';
+	import type { FormFieldSizeOptions } from '../types/form.js';
+	import Button from '../forms/button/button.svelte';
+	import DialogCloseButton from './dialog-close-button.svelte';
+
+	let {
+		open = $bindable(false),
+		title = undefined,
+		size = 'md' as FormFieldSizeOptions,
+		buttonText = 'OK',
+		buttonVariant = 'primary' as 'primary' | 'secondary' | 'danger',
+		showCloseButton = true,
+		onClose = undefined,
+		children
+	}: {
+		open?: boolean;
+		title?: string | undefined;
+		size?: FormFieldSizeOptions;
+		buttonText?: string;
+		buttonVariant?: 'primary' | 'secondary' | 'danger';
+		showCloseButton?: boolean;
+		onClose?: (() => void) | undefined;
+		children: Snippet;
+	} = $props();
+
+	const close = () => {
+		open = false;
+		onClose?.();
+	};
 </script>
 
 {#if open}
-	<Overlay on:click={close}>
-		<Dialog {size}>
+	<Overlay onClick={close}>
+		<Dialog {size} role="alertdialog" aria-modal="true" aria-labelledby={title ? 'alert-title' : undefined}>
 			{#if title}
-				<DialogHeader>
+				<DialogHeader id="alert-title">
 					{title}
 				</DialogHeader>
 				<Divider />
 			{/if}
-			<DialogCloseButton show={showCloseButton} on:click={close} />
+			<DialogCloseButton show={showCloseButton} onClick={close} />
 			<DialogBody>
-				<slot />
+				{@render children?.()}
 			</DialogBody>
 			<Divider />
 			<DialogFooter>
-				<Button on:click={close} size="full" style={buttonStyle}>
-					{buttonText}
-				</Button>
+				<Button onClick={close} size="full" variant={buttonVariant} label={buttonText} />
 			</DialogFooter>
 		</Dialog>
 	</Overlay>