sveltacular 0.0.76 → 1.0.0

package/dist/generic/empty/empty.svelte.d.ts

@@ -1,22 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        text?: string | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | undefined;
-        orientation?: "horizontal" | "vertical" | undefined;
-        reverse?: boolean | undefined;
-        align?: "start" | "center" | "end" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    text?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    orientation?: 'horizontal' | 'vertical';
+    reverse?: boolean;
+    align?: 'center' | 'start' | 'end';
+    children?: Snippet;
 };
-export type EmptyProps = typeof __propDef.props;
-export type EmptyEvents = typeof __propDef.events;
-export type EmptySlots = typeof __propDef.slots;
-export default class Empty extends SvelteComponent<EmptyProps, EmptyEvents, EmptySlots> {
-}
-export {};
+declare const Empty: import("svelte").Component<$$ComponentProps, {}, "">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/generic/header/header.svelte

@@ -1,12 +1,26 @@
-<script>import FlexRow from "../../layout/flex-row.svelte";
-import Headline from "../../typography/headline.svelte";
-import Subtitle from "../../typography/subtitle.svelte";
-import { getContext } from "svelte";
-const section = getContext("section");
-export let level = section?.level || 2;
-export let title = section?.title || "";
-export let subtitle = "";
-export let underline = false;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FlexRow from '../../layout/flex-row.svelte';
+	import type { SectionLevel } from '../../types/generic.js';
+	import Headline from '../../typography/headline.svelte';
+	import Subtitle from '../../typography/subtitle.svelte';
+	import { getContext } from 'svelte';
+
+	const section: { title: string; level: SectionLevel } | undefined = getContext('section');
+
+	let {
+		level = (section?.level || 2) as SectionLevel,
+		title = section?.title || '',
+		subtitle = '',
+		underline = false,
+		children = undefined
+	}: {
+		level?: SectionLevel;
+		title?: string;
+		subtitle?: string;
+		underline?: boolean;
+		children?: Snippet;
+	} = $props();
 </script>
 
 <header class:underline data-level={level}>
@@ -18,7 +32,9 @@ export let underline = false;
 			{/if}
 		</hgroup>
 		<div>
-			<slot />
+			{#if children}
+				{@render children?.()}
+			{/if}
 		</div>
 	</FlexRow>
 </header>

package/dist/generic/header/header.svelte.d.ts

@@ -1,22 +1,12 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 import type { SectionLevel } from '../../types/generic.js';
-declare const __propDef: {
-    props: {
-        level?: SectionLevel | undefined;
-        title?: string | undefined;
-        subtitle?: string | undefined;
-        underline?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = {
+    level?: SectionLevel;
+    title?: string;
+    subtitle?: string;
+    underline?: boolean;
+    children?: Snippet;
 };
-export type HeaderProps = typeof __propDef.props;
-export type HeaderEvents = typeof __propDef.events;
-export type HeaderSlots = typeof __propDef.slots;
-export default class Header extends SvelteComponent<HeaderProps, HeaderEvents, HeaderSlots> {
-}
-export {};
+declare const Header: import("svelte").Component<$$ComponentProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/generic/index.d.ts

@@ -0,0 +1,28 @@
+export { default as Address } from './address/address.svelte';
+export { default as DateTime } from './date/date-time.svelte';
+export { default as Divider } from './divider/divider.svelte';
+export { default as Dot } from './dot/dot.svelte';
+export { default as DropdownItem } from './dropdown-item/dropdown-item.svelte';
+export { default as Email } from './email/email.svelte';
+export { default as Empty } from './empty/empty.svelte';
+export { default as Header } from './header/header.svelte';
+export { default as Link } from './link/link.svelte';
+export { default as Menu } from './menu/menu.svelte';
+export { default as Notice } from './notice/notice.svelte';
+export { default as Overlay } from './overlay.svelte';
+export { default as Panel } from './panel/panel.svelte';
+export { default as Phone } from './phone/phone.svelte';
+export { default as Pill } from './pill/pill.svelte';
+export { default as Scorecard } from './scorecard/scorecard.svelte';
+export { default as Section } from './section/section.svelte';
+export { default as Toaster } from './toaster/toaster.svelte';
+export * from './card/index.js';
+export * from './list/index.js';
+export * from './theme-provider/index.js';
+export { default as Tooltip } from './tooltip/tooltip.svelte';
+export { default as Badge } from './badge/badge.svelte';
+export { default as Spinner } from './spinner/spinner.svelte';
+export { default as Avatar } from './avatar/avatar.svelte';
+export { default as Popover } from './popover/popover.svelte';
+export { default as Rating } from './rating/rating.svelte';
+export { default as Chip } from './chip/chip.svelte';

package/dist/generic/index.js

@@ -0,0 +1,31 @@
+// Individual generic components
+export { default as Address } from './address/address.svelte';
+export { default as DateTime } from './date/date-time.svelte';
+export { default as Divider } from './divider/divider.svelte';
+export { default as Dot } from './dot/dot.svelte';
+export { default as DropdownItem } from './dropdown-item/dropdown-item.svelte';
+export { default as Email } from './email/email.svelte';
+export { default as Empty } from './empty/empty.svelte';
+export { default as Header } from './header/header.svelte';
+export { default as Link } from './link/link.svelte';
+export { default as Menu } from './menu/menu.svelte';
+export { default as Notice } from './notice/notice.svelte';
+export { default as Overlay } from './overlay.svelte';
+export { default as Panel } from './panel/panel.svelte';
+export { default as Phone } from './phone/phone.svelte';
+export { default as Pill } from './pill/pill.svelte';
+export { default as Scorecard } from './scorecard/scorecard.svelte';
+export { default as Section } from './section/section.svelte';
+export { default as Toaster } from './toaster/toaster.svelte';
+// Generic components with barrel files
+export * from './card/index.js';
+export * from './list/index.js';
+export * from './theme-provider/index.js';
+// New generic components
+export { default as Tooltip } from './tooltip/tooltip.svelte';
+export { default as Badge } from './badge/badge.svelte';
+export { default as Spinner } from './spinner/spinner.svelte';
+export { default as Avatar } from './avatar/avatar.svelte';
+export { default as Popover } from './popover/popover.svelte';
+export { default as Rating } from './rating/rating.svelte';
+export { default as Chip } from './chip/chip.svelte';

package/dist/generic/link/link.svelte

@@ -1,17 +1,30 @@
-<script>export let href;
-export let target = void 0;
-export let underline = "none";
-export let disabled = false;
-export let display = "inline";
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		href,
+		target = undefined,
+		underline = 'none' as 'none' | 'hover' | 'always',
+		disabled = false,
+		display = 'inline' as 'inline' | 'block' | 'inline-block',
+		children
+	}: {
+		href: string;
+		target?: string;
+		underline?: 'none' | 'hover' | 'always';
+		disabled?: boolean;
+		display?: 'inline' | 'block' | 'inline-block';
+		children: Snippet;
+	} = $props();
 </script>
 
 {#if disabled}
 	<span class="link disabled underline-{underline} {display}">
-		<slot />
+		{@render children?.()}
 	</span>
 {:else}
 	<a {href} {target} class="link underline-{underline} {display}">
-		<slot />
+		{@render children?.()}
 	</a>
 {/if}
 

package/dist/generic/link/link.svelte.d.ts

@@ -1,22 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        href: string;
-        target?: string | undefined;
-        underline?: "none" | "hover" | "always" | undefined;
-        disabled?: boolean | undefined;
-        display?: "block" | "inline-block" | "inline" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    href: string;
+    target?: string;
+    underline?: 'none' | 'hover' | 'always';
+    disabled?: boolean;
+    display?: 'inline' | 'block' | 'inline-block';
+    children: Snippet;
 };
-export type LinkProps = typeof __propDef.props;
-export type LinkEvents = typeof __propDef.events;
-export type LinkSlots = typeof __propDef.slots;
-export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
-}
-export {};
+declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/generic/list/index.d.ts

@@ -0,0 +1,4 @@
+export { default as List } from './list.svelte';
+export { default as ListItem } from './list-item.svelte';
+export type { ListVariant, ListContext } from './list.js';
+export { listContext } from './list.js';

package/dist/generic/list/index.js

@@ -0,0 +1,3 @@
+export { default as List } from './list.svelte';
+export { default as ListItem } from './list-item.svelte';
+export { listContext } from './list.js';

package/dist/generic/list/list-item.svelte

@@ -1,23 +1,27 @@
-<script>import { getContext } from "svelte";
-import { listContext } from "./list.js";
-const ctx = getContext(listContext);
-const listStyle = ctx.style || "none";
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getContext } from 'svelte';
+	import { listContext, type ListContext } from './list.js';
+
+	let { children }: { children: Snippet } = $props();
+
+	const ctx = getContext<ListContext>(listContext);
+	const listStyle = ctx.variant || 'none';
 </script>
 
-<li class="{listStyle}">
-    <slot />
+<li class={listStyle}>
+	{@render children?.()}
 </li>
 
-
 <style>
 	li.striped {
-        background-color: var(--list-row-bg, #fff);
+		background-color: var(--list-row-bg, #fff);
 		color: var(--list-row-fg, #000);
-        padding: 0.5rem;
+		padding: 0.5rem;
 
-        &:nth-of-type(odd) {
-            background-color: var(--list-row-alt-bg, #eee);
-            color: var(--list-row-alt-fg, #000);
-        }
+		&:nth-of-type(odd) {
+			background-color: var(--list-row-alt-bg, #eee);
+			color: var(--list-row-alt-fg, #000);
+		}
 	}
 </style>

package/dist/generic/list/list-item.svelte.d.ts

@@ -1,16 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
 };
-export type ListItemProps = typeof __propDef.props;
-export type ListItemEvents = typeof __propDef.events;
-export type ListItemSlots = typeof __propDef.slots;
-export default class ListItem extends SvelteComponent<ListItemProps, ListItemEvents, ListItemSlots> {
-}
-export {};
+declare const ListItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/generic/list/list.d.ts

@@ -1,5 +1,5 @@
-export type ListStyle = 'none' | 'disc' | 'circle' | 'square' | 'decimal' | 'decimal-leading-zero' | 'striped';
+export type ListVariant = 'none' | 'disc' | 'circle' | 'square' | 'decimal' | 'decimal-leading-zero' | 'striped';
 export interface ListContext {
-    style: ListStyle;
+    variant: ListVariant;
 }
 export declare const listContext = "listContext";

package/dist/generic/list/list.svelte

@@ -1,21 +1,34 @@
-<script>import { setContext } from "svelte";
-import { listContext } from "./list.js";
-export let type = "unordered";
-export let style = "none";
-const ctx = {
-  style
-};
-setContext(listContext, ctx);
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+	import { listContext, type ListContext, type ListVariant } from './list.js';
+
+	let {
+		type = 'unordered' as 'unordered' | 'ordered',
+		variant = 'none' as ListVariant,
+		children
+	}: {
+		type?: 'unordered' | 'ordered';
+		variant?: ListVariant;
+		children: Snippet;
+	} = $props();
+
+	const ctx: ListContext = {
+		get variant() {
+			return variant;
+		}
+	};
+	setContext(listContext, ctx);
 </script>
 
 {#if type === 'unordered'}
-    <ul class="{style}">
-        <slot />
-    </ul>
+	<ul class={variant}>
+		{@render children?.()}
+	</ul>
 {:else}
-    <ol>
-        <slot />
-    </ol>
+	<ol>
+		{@render children?.()}
+	</ol>
 {/if}
 
 <style>.none {
@@ -46,4 +59,4 @@ setContext(listContext, ctx);
 
 .decimal-leading-zero {
   list-style-type: decimal-leading-zero;
-}</style>
+}</style>

package/dist/generic/list/list.svelte.d.ts

@@ -1,20 +1,10 @@
-import { SvelteComponent } from "svelte";
-import { type ListStyle } from "./list.js";
-declare const __propDef: {
-    props: {
-        type?: "unordered" | "ordered" | undefined;
-        style?: ListStyle | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+import { type ListVariant } from './list.js';
+type $$ComponentProps = {
+    type?: 'unordered' | 'ordered';
+    variant?: ListVariant;
+    children: Snippet;
 };
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
-export default class List extends SvelteComponent<ListProps, ListEvents, ListSlots> {
-}
-export {};
+declare const List: import("svelte").Component<$$ComponentProps, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/generic/menu/menu.svelte

@@ -1,64 +1,170 @@
-<script>import CheckIcon from "../../icons/check-icon.svelte";
-import FlexItem from "../../layout/flex-item.svelte";
-import FlexRow from "../../layout/flex-row.svelte";
-import { createEventDispatcher } from "svelte";
-export let items = [];
-export let value = null;
-export let instructions = "";
-export let open = false;
-export let size = "md";
-export let closeAfterSelect = true;
-export let searchText = "";
-export let highlightIndex = 0;
-const dispatch = createEventDispatcher();
-const selectItem = (item) => {
-  value = item.value;
-  dispatch("select", item);
-  if (closeAfterSelect)
-    open = false;
-};
-const scrollToItem = (index) => {
-  const el = document.querySelector(`[data-index="${index}"]`);
-  if (el)
-    el.scrollIntoView({ block: "nearest" });
-};
-$:
-  highlightIndex >= 0 && scrollToItem(highlightIndex);
+<script lang="ts">
+	import CheckIcon from '../../icons/check-icon.svelte';
+	import type { FormFieldSizeOptions, MenuOption } from '../../index.js';
+	import FlexItem from '../../layout/flex-item.svelte';
+	import FlexRow from '../../layout/flex-row.svelte';
+	import { useVirtualList } from '../../helpers/use-virtual-list.svelte.js';
+	import { onMount } from 'svelte';
+
+	let {
+		items = [] as MenuOption[],
+		value = $bindable(null as string | null),
+		instructions = '',
+		open = $bindable(false),
+		size = 'md' as FormFieldSizeOptions,
+		closeAfterSelect = true,
+		searchText = '',
+		highlightIndex = $bindable(0),
+		onSelect = undefined,
+		virtualScroll = false,
+		itemHeight = 40,
+		listboxId = undefined
+	}: {
+		items?: MenuOption[];
+		value?: string | null;
+		instructions?: string;
+		open?: boolean;
+		size?: FormFieldSizeOptions;
+		closeAfterSelect?: boolean;
+		searchText?: string;
+		highlightIndex?: number;
+		onSelect?: ((item: MenuOption) => void) | undefined;
+		virtualScroll?: boolean;
+		itemHeight?: number;
+		listboxId?: string | undefined;
+	} = $props();
+
+	const selectItem = (item: MenuOption) => {
+		value = item.value;
+		onSelect?.(item);
+		if (closeAfterSelect) open = false;
+	};
+
+	const scrollToItem = (index: number) => {
+		if (virtualScroll && virtual) {
+			virtual.scrollToIndex(index, 'smooth');
+		} else {
+			const el = document.querySelector(`[data-index="${index}"]`);
+			if (el) el.scrollIntoView({ block: 'nearest' });
+		}
+	};
+
+	// Virtual scrolling setup
+	let containerRef: HTMLElement | null = null;
+	let virtual = $state<ReturnType<typeof useVirtualList<MenuOption>> | null>(null);
+
+	// Initialize virtual list
+	$effect(() => {
+		if (virtualScroll) {
+			if (!virtual) {
+				virtual = useVirtualList(items, { itemHeight });
+				if (containerRef) {
+					virtual.setContainer(containerRef);
+				}
+			} else {
+				virtual.setItems(items);
+			}
+		} else if (virtual) {
+			virtual.destroy();
+			virtual = null;
+		}
+	});
+
+	// Set container when ref is available
+	$effect(() => {
+		if (virtual && containerRef) {
+			virtual.setContainer(containerRef);
+		}
+	});
+
+	$effect(() => {
+		if (highlightIndex >= 0) {
+			scrollToItem(highlightIndex);
+		}
+	});
 </script>
 
-<ul role="listbox" class="menu {open ? 'open' : 'closed'} {size}">
+<ul 
+	role="listbox"
+	id={listboxId}
+	class="menu {open ? 'open' : 'closed'} {size}"
+	bind:this={containerRef}
+	aria-label="Options"
+>
 	{#if instructions}
-		<li class="instructions">{instructions}</li>
+		<li class="instructions" role="presentation">{instructions}</li>
+	{/if}
+	
+	{#if virtualScroll && virtual}
+		<!-- Virtual scrolling mode -->
+		<div style="height: {virtual.totalHeight}px; position: relative;">
+			{#each virtual.visibleItems as vItem (vItem.index)}
+				{@const item = vItem.data}
+				{@const i = vItem.index}
+				<li
+					id={listboxId ? `${listboxId}-option-${i}` : undefined}
+					onclick={() => selectItem(item)}
+					onkeypress={() => selectItem(item)}
+					role="option"
+					aria-selected={item.value === value}
+					data-index={i}
+					style="position: absolute; top: {vItem.offsetTop}px; height: {vItem.height}px; width: 100%; box-sizing: border-box;"
+				>
+					<div class:selected={i == highlightIndex}>
+						<FlexRow>
+							<FlexItem grow>
+								{#if searchText}
+									{@html item.name.replace(
+										new RegExp(searchText, 'gi'),
+										(match) => `<strong>${match}</strong>`
+									)}
+								{:else}
+									{item.name}
+								{/if}
+							</FlexItem>
+							<FlexItem>
+								{#if item.value === value}
+									<span class="check" aria-hidden="true"><CheckIcon /></span>
+								{/if}
+							</FlexItem>
+						</FlexRow>
+					</div>
+				</li>
+			{/each}
+		</div>
+	{:else}
+		<!-- Regular rendering mode -->
+		{#each items as item, i}
+			<li
+				id={listboxId ? `${listboxId}-option-${i}` : undefined}
+				onclick={() => selectItem(item)}
+				onkeypress={() => selectItem(item)}
+				role="option"
+				aria-selected={item.value === value}
+				data-index={i}
+			>
+				<div class:selected={i == highlightIndex}>
+					<FlexRow>
+						<FlexItem grow>
+							{#if searchText}
+								{@html item.name.replace(
+									new RegExp(searchText, 'gi'),
+									(match) => `<strong>${match}</strong>`
+								)}
+							{:else}
+								{item.name}
+							{/if}
+						</FlexItem>
+						<FlexItem>
+							{#if item.value === value}
+								<span class="check" aria-hidden="true"><CheckIcon /></span>
+							{/if}
+						</FlexItem>
+					</FlexRow>
+				</div>
+			</li>
+		{/each}
 	{/if}
-	{#each items as item, i}
-		<li
-			on:click={() => selectItem(item)}
-			on:keypress={() => selectItem(item)}
-			role="option"
-			aria-selected={item.value === value}
-			data-index={i}
-		>
-			<div class:selected={i == highlightIndex}>
-				<FlexRow>
-					<FlexItem grow>
-						{#if searchText}
-							{@html item.name.replace(
-								new RegExp(searchText, 'gi'),
-								(match) => `<strong>${match}</strong>`
-							)}
-						{:else}
-							{item.name}
-						{/if}
-					</FlexItem>
-					<FlexItem>
-						{#if item.value === value}
-							<span class="check"><CheckIcon /></span>
-						{/if}
-					</FlexItem>
-				</FlexRow>
-			</div>
-		</li>
-	{/each}
 </ul>
 
 <style>.menu {