sveltacular 1.0.6 → 1.0.9

package/dist/forms/text-box/text-box.svelte

@@ -2,7 +2,7 @@
 	import { untrack } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import { animateShake, animateScaleIn } from '../../helpers/animations.js';
-	import FormField from '../form-field/form-field.svelte';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import CheckIcon from '../../icons/check-icon.svelte';
 	import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../../types/form.js';
 
@@ -12,8 +12,7 @@
 		value = $bindable('' as string | null),
 		placeholder = '',
 		helperText = '',
-		errorText = '',
-		successText = '',
+		feedback = undefined,
 		isLoading = false,
 		showCharacterCount = false,
 		size = 'full',
@@ -37,8 +36,7 @@
 		value?: string | null;
 		placeholder?: string;
 		helperText?: string;
-		errorText?: string;
-		successText?: string;
+		feedback?: FormFieldFeedback;
 		isLoading?: boolean;
 		showCharacterCount?: boolean;
 		size?: FormFieldSizeOptions;
@@ -60,8 +58,8 @@
 		label?: string;
 	} = $props();
 
-	let hasError = $derived(!!errorText);
-	let hasSuccess = $derived(!!successText && !errorText);
+	let hasError = $derived(!!feedback?.isError);
+	let hasSuccess = $derived(!!feedback && !feedback.isError);
 	let describedByIds = $state<string[]>([]);
 	let inputElement: HTMLDivElement | null = $state(null);
 	let successIconElement: HTMLDivElement | null = $state(null);
@@ -74,19 +72,24 @@
 			: ''
 	);
 
-	// Update describedByIds array when helper/error/success text changes
+	// Update describedByIds array when helper/feedback changes
 	$effect(() => {
 		// Track the dependencies we care about
-		const hasHelper = !!helperText;
-		const hasErrorMsg = !!errorText;
-		const hasSuccessMsg = !!successText;
+		const hasHelper = !!helperText && !feedback;
+		const hasFeedback = !!feedback;
 
 		// Use untrack to write to describedByIds without triggering this effect again
 		untrack(() => {
 			describedByIds = [];
-			if (hasHelper) describedByIds.push(`${id}-helper`);
-			if (hasErrorMsg) describedByIds.push(`${id}-error`);
-			if (hasSuccessMsg) describedByIds.push(`${id}-success`);
+			if (hasHelper) {
+				describedByIds.push(`${id}-helper`);
+			} else if (hasFeedback) {
+				if (feedback.isError) {
+					describedByIds.push(`${id}-error`);
+				} else {
+					describedByIds.push(`${id}-success`);
+				}
+			}
 		});
 	});
 
@@ -149,7 +152,7 @@
 	};
 </script>
 
-<FormField {size} {label} {id} {required} {disabled} {helperText} {errorText} {successText}>
+<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
 	<div
 		class="input {disabled ? 'disabled' : 'enabled'}"
 		class:error={hasError}

package/dist/forms/text-box/text-box.svelte.d.ts

@@ -1,10 +1,10 @@
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../../types/form.js';
 type $$ComponentProps = {
     value?: string | null;
     placeholder?: string;
     helperText?: string;
-    errorText?: string;
-    successText?: string;
+    feedback?: FormFieldFeedback;
     isLoading?: boolean;
     showCharacterCount?: boolean;
     size?: FormFieldSizeOptions;

package/dist/forms/time-box/time-box.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { uniqueId } from '../../helpers/unique-id.js';
-	import FormField from '../form-field/form-field.svelte';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import type { ComponentSize } from '../../types/size.js';
 
 	const id = uniqueId();
@@ -11,7 +11,9 @@
 		disabled = false,
 		required = false,
 		onChange = undefined,
-		label = undefined
+		label = undefined,
+		helperText = undefined,
+		feedback = undefined
 	}: {
 		value?: string | null;
 		size?: ComponentSize;
@@ -19,6 +21,8 @@
 		required?: boolean;
 		onChange?: ((value: string) => void) | undefined;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
 	} = $props();
 
 	const handleInput = (e: Event) => {
@@ -28,7 +32,7 @@
 	};
 </script>
 
-<FormField {size} {label} {id} {required} {disabled}>
+<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
 	<div class="input" class:disabled>
 		<input
 			{id}

package/dist/forms/time-box/time-box.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 import type { ComponentSize } from '../../types/size.js';
 type $$ComponentProps = {
     value?: string | null;
@@ -6,6 +7,8 @@ type $$ComponentProps = {
     required?: boolean;
     onChange?: ((value: string) => void) | undefined;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
 };
 declare const TimeBox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type TimeBox = ReturnType<typeof TimeBox>;

package/dist/forms/url-box/url-box.svelte

@@ -8,13 +8,33 @@
 		value = $bindable('' as string | null),
 		size = 'lg' as FormFieldSizeOptions,
 		placeholder = 'example.com',
-		label = undefined
+		label = undefined,
+		helperText = undefined,
+		feedback = undefined,
+		disabled = false,
+		required = false,
+		readonly = false,
+		maxlength = undefined,
+		minlength = undefined,
+		pattern = undefined,
+		isLoading = false,
+		onChange = undefined
 	}: {
 		protocol?: HttpProtocol;
 		value?: string | null;
 		size?: FormFieldSizeOptions;
 		placeholder?: string;
 		label?: string;
+		helperText?: string;
+		feedback?: import('../form-field/form-field.svelte').FormFieldFeedback;
+		disabled?: boolean;
+		required?: boolean;
+		readonly?: boolean;
+		maxlength?: number | undefined;
+		minlength?: number | undefined;
+		pattern?: string | undefined;
+		isLoading?: boolean;
+		onChange?: ((value: string) => void) | undefined;
 	} = $props();
 
 	// On input, parse the value and set the protocol
@@ -25,6 +45,7 @@
 			protocol = urlParts[0] as HttpProtocol;
 			value = urlParts[1];
 		}
+		onChange?.(cleanValue);
 	};
 </script>
 
@@ -38,4 +59,13 @@
 	onChange={handleInput}
 	allowSpaces={false}
 	{label}
+	{helperText}
+	{feedback}
+	{disabled}
+	{required}
+	{readonly}
+	{maxlength}
+	{minlength}
+	{pattern}
+	{isLoading}
 />

package/dist/forms/url-box/url-box.svelte.d.ts

@@ -6,6 +6,16 @@ type $$ComponentProps = {
     size?: FormFieldSizeOptions;
     placeholder?: string;
     label?: string;
+    helperText?: string;
+    feedback?: import('../form-field/form-field.svelte').FormFieldFeedback;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    maxlength?: number | undefined;
+    minlength?: number | undefined;
+    pattern?: string | undefined;
+    isLoading?: boolean;
+    onChange?: ((value: string) => void) | undefined;
 };
 declare const UrlBox: import("svelte").Component<$$ComponentProps, {}, "value" | "protocol">;
 type UrlBox = ReturnType<typeof UrlBox>;

package/dist/generic/avatar/avatar.svelte

@@ -79,13 +79,3 @@
   width: 100%;
   height: 100%;
 }</style>
-
-
-
-
-
-
-
-
-
-

package/dist/generic/badge/badge.svelte

@@ -79,4 +79,3 @@
   background-color: var(--badge-warning-bg);
   color: var(--badge-warning-fg);
 }</style>
-

package/dist/generic/chip/chip.svelte

@@ -19,9 +19,7 @@
 <div class="chip {size} {variant}">
 	<span class="label">{label}</span>
 	{#if removable}
-		<button type="button" class="remove" onclick={onRemove} aria-label="Remove {label}">
-			×
-		</button>
+		<button type="button" class="remove" onclick={onRemove} aria-label="Remove {label}"> × </button>
 	{/if}
 </div>
 
@@ -83,13 +81,3 @@
   background-color: var(--chip-negative-bg, #ffcdd2);
   color: var(--chip-negative-fg, #c62828);
 }</style>
-
-
-
-
-
-
-
-
-
-

package/dist/generic/header/header.svelte

@@ -1,6 +1,5 @@
 <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';
@@ -24,26 +23,29 @@
 </script>
 
 <header class:underline data-level={level}>
-	<FlexRow>
-		<hgroup>
-			<Headline {level}>{title}</Headline>
-			{#if subtitle}
-				<Subtitle {level}>{subtitle}</Subtitle>
-			{/if}
-		</hgroup>
-		<div>
-			{#if children}
-				{@render children?.()}
-			{/if}
-		</div>
-	</FlexRow>
+	<hgroup>
+		<Headline {level}>{title}</Headline>
+		{#if subtitle}
+			<Subtitle {level}>{subtitle}</Subtitle>
+		{/if}
+	</hgroup>
+	<div>
+		{#if children}
+			{@render children?.()}
+		{/if}
+	</div>
 </header>
 
 <style>header {
-  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: var(--spacing-base, 1rem);
+  margin-bottom: var(--spacing-base, 1rem);
   font-family: var(--base-headline-font-family, sans-serif);
 }
 header.underline {
-  padding-bottom: 0.5rem;
-  border-bottom: solid 1px #ccc;
+  padding-bottom: var(--spacing-xs, 0.25rem);
+  border-bottom: solid var(--border-thin, 1px) var(--divider-color, rgba(127, 127, 127, 0.5));
 }</style>

package/dist/generic/menu/menu.svelte

@@ -4,7 +4,6 @@
 	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[],
@@ -84,7 +83,7 @@
 	});
 </script>
 
-<ul 
+<ul
 	role="listbox"
 	id={listboxId}
 	class="menu {open ? 'open' : 'closed'} {size}"
@@ -94,7 +93,7 @@
 	{#if instructions}
 		<li class="instructions" role="presentation">{instructions}</li>
 	{/if}
-	
+
 	{#if virtualScroll && virtual}
 		<!-- Virtual scrolling mode -->
 		<div style="height: {virtual.totalHeight}px; position: relative;">

package/dist/generic/rating/rating.svelte

@@ -59,10 +59,10 @@
 .rating .star.filled {
   color: var(--rating-filled-color, #ffc107);
 }
-.rating .star:hover:not([readonly]) {
+.rating .star:hover:not(:disabled) {
   color: var(--rating-hover-color, #ffb300);
 }
-.rating .star[readonly] {
+.rating .star:disabled {
   cursor: default;
 }
 .rating .star:focus {
@@ -82,4 +82,3 @@
 .rating.xl .star {
   font-size: 2.5rem;
 }</style>
-

package/dist/generic/section/section.svelte

@@ -21,9 +21,13 @@
 		children: Snippet;
 	} = $props();
 
-	setContext('section', { 
-		get level() { return level; },
-		get title() { return title; }
+	setContext('section', {
+		get level() {
+			return level;
+		},
+		get title() {
+			return title;
+		}
 	});
 </script>
 

package/dist/generic/spinner/spinner.svelte

@@ -61,4 +61,3 @@
     transform: rotate(360deg);
   }
 }</style>
-

package/dist/generic/theme-provider/theme-provider-demo.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	/**
 	 * Theme Provider Demo Component
-	 * 
+	 *
 	 * Demonstrates theme switching functionality with example components.
 	 */
 	import ThemeProvider from './theme-provider.svelte';
@@ -29,43 +29,41 @@
 		<Card>
 			<div style="padding: 1.5rem; margin-bottom: 2rem;">
 				<h2 style="margin-top: 0; margin-bottom: 1rem;">Theme Controls</h2>
-				
+
 				<div style="display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;">
-					<Button 
+					<Button
 						variant={theme.current === 'light' ? 'primary' : 'outline'}
 						onClick={() => theme.set('light')}
 					>
 						☀️ Light
 					</Button>
-					<Button 
+					<Button
 						variant={theme.current === 'dark' ? 'primary' : 'outline'}
 						onClick={() => theme.set('dark')}
 					>
 						🌙 Dark
 					</Button>
-					<Button 
+					<Button
 						variant={theme.current === 'system' ? 'primary' : 'outline'}
 						onClick={() => theme.set('system')}
 					>
 						💻 System
 					</Button>
-					<Button 
-						variant="secondary"
-						onClick={() => theme.toggle()}
-					>
-						🔄 Toggle
-					</Button>
+					<Button variant="secondary" onClick={() => theme.toggle()}>🔄 Toggle</Button>
 				</div>
 
 				<div style="display: flex; gap: 1rem; font-size: 0.875rem; color: var(--base-accent-fg);">
 					<div>
-						<strong>Current:</strong> {theme.current}
+						<strong>Current:</strong>
+						{theme.current}
 					</div>
 					<div>
-						<strong>Resolved:</strong> {theme.resolved}
+						<strong>Resolved:</strong>
+						{theme.resolved}
 					</div>
 					<div>
-						<strong>Is Dark:</strong> {theme.isDark}
+						<strong>Is Dark:</strong>
+						{theme.isDark}
 					</div>
 				</div>
 			</div>
@@ -108,18 +106,10 @@
 				<div style="padding: 1.5rem;">
 					<h4 style="margin-top: 0; margin-bottom: 1rem;">Notices</h4>
 					<div style="display: grid; gap: 0.75rem;">
-						<Notice variant="info">
-							This is an informational message.
-						</Notice>
-					<Notice variant="success">
-						Operation completed successfully!
-					</Notice>
-					<Notice variant="attention">
-						Please review your changes carefully.
-					</Notice>
-					<Notice variant="error">
-						An error occurred while processing your request.
-					</Notice>
+						<Notice variant="info">This is an informational message.</Notice>
+						<Notice variant="success">Operation completed successfully!</Notice>
+						<Notice variant="attention">Please review your changes carefully.</Notice>
+						<Notice variant="error">An error occurred while processing your request.</Notice>
 					</div>
 				</div>
 			</Card>
@@ -129,28 +119,13 @@
 				<div style="padding: 1.5rem;">
 					<h4 style="margin-top: 0; margin-bottom: 1rem;">Form Inputs</h4>
 					<div style="display: grid; gap: 1rem; max-width: 500px;">
-						<TextBox 
-							bind:value={textValue}
-							label="Text Input"
-							placeholder="Enter some text..."
-						/>
-						
-						<TextArea 
-							bind:value={textAreaValue}
-							label="Text Area"
-							rows={4}
-						/>
-						
-					<CheckBox 
-						bind:isChecked={checked}
-						label="Check Box Option"
-					/>
-					
-					<SwitchBox 
-						bind:checked={switchOn}
-					>
-						Switch Option
-					</SwitchBox>
+						<TextBox bind:value={textValue} label="Text Input" placeholder="Enter some text..." />
+
+						<TextArea bind:value={textAreaValue} label="Text Area" rows={4} />
+
+						<CheckBox bind:isChecked={checked} label="Check Box Option" />
+
+						<SwitchBox bind:checked={switchOn}>Switch Option</SwitchBox>
 					</div>
 				</div>
 			</Card>
@@ -159,24 +134,23 @@
 			<Card>
 				<div style="padding: 1.5rem;">
 					<h4 style="margin-top: 0; margin-bottom: 1rem;">Typography</h4>
-				<p style="margin-bottom: 0.5rem;">
-					This is regular text using the base foreground color.
-				</p>
-				<p style="margin-bottom: 0.5rem;">
-					<button
-						type="button"
-						style="background: none; border: none; padding: 0; color: var(--base-link-fg); text-decoration: underline; cursor: pointer; font: inherit;"
-						onclick={() => {}}
-					>
-						This is a link
-					</button> with proper link styling.
-				</p>
-				<p style="margin-bottom: 0; color: var(--base-accent-fg); font-size: 0.875rem;">
-					This is accent text using a muted color.
-				</p>
+					<p style="margin-bottom: 0.5rem;">
+						This is regular text using the base foreground color.
+					</p>
+					<p style="margin-bottom: 0.5rem;">
+						<button
+							type="button"
+							style="background: none; border: none; padding: 0; color: var(--base-link-fg); text-decoration: underline; cursor: pointer; font: inherit;"
+							onclick={() => {}}
+						>
+							This is a link
+						</button> with proper link styling.
+					</p>
+					<p style="margin-bottom: 0; color: var(--base-accent-fg); font-size: 0.875rem;">
+						This is accent text using a muted color.
+					</p>
 				</div>
 			</Card>
 		</div>
 	</div>
 </ThemeProvider>
-

package/dist/generic/theme-provider/theme-provider.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	/**
 	 * Theme Provider Component
-	 * 
+	 *
 	 * Wraps your application to provide theme management functionality.
 	 * Automatically applies the selected theme and syncs with system preferences.
-	 * 
+	 *
 	 * @component
 	 * @example
 	 * ```svelte
@@ -12,7 +12,7 @@
 	 *   <App />
 	 * </ThemeProvider>
 	 * ```
-	 * 
+	 *
 	 * Or with initial theme:
 	 * ```svelte
 	 * <ThemeProvider initialTheme="dark">
@@ -44,12 +44,7 @@
 		renderWrapper?: boolean;
 	}
 
-	let {
-		initialTheme,
-		children,
-		class: className,
-		renderWrapper = false
-	}: Props = $props();
+	let { initialTheme, children, class: className, renderWrapper = false }: Props = $props();
 
 	const theme = useTheme();
 
@@ -58,7 +53,7 @@
 		if (initialTheme) {
 			theme.set(initialTheme);
 		}
-		
+
 		// Apply theme to document
 		if (typeof document !== 'undefined') {
 			document.documentElement.setAttribute('data-theme', theme.resolved);
@@ -80,4 +75,3 @@
 {:else}
 	{@render children?.()}
 {/if}
-

package/dist/generic/toaster/toaster.svelte

@@ -39,4 +39,4 @@
 .toaster.bottom-right {
   bottom: 1rem;
   right: 1rem;
-}</style>
+}</style>

package/dist/helpers/use-position.svelte.js

@@ -111,7 +111,7 @@ export class PositionManager {
         }
         // Store cleanup function
         this.cleanup = () => {
-            listeners.forEach(cleanup => cleanup());
+            listeners.forEach((cleanup) => cleanup());
             if (this.rafId !== null) {
                 cancelAnimationFrame(this.rafId);
                 this.rafId = null;

package/dist/helpers/use-virtual-list.svelte.js

@@ -171,7 +171,7 @@ export class VirtualList {
             // Calculate end index for variable height
             let height = 0;
             endIndex = startIndex;
-            const targetHeight = this.containerHeight + (this.overscan * this.itemHeight * 2);
+            const targetHeight = this.containerHeight + this.overscan * this.itemHeight * 2;
             while (endIndex < this.items.length && height < targetHeight) {
                 height += this.getItemHeight(endIndex);
                 endIndex++;

package/dist/icons/check-icon.svelte

@@ -1,5 +1,3 @@
-
-
 <svg
 	class="w-6 h-6 text-gray-800 dark:text-white"
 	aria-hidden="true"

package/dist/icons/copy-icon.svelte

@@ -43,4 +43,3 @@
 		height: 100%;
 	}
 </style>
-

package/dist/modals/alert.svelte

@@ -38,7 +38,12 @@
 
 {#if open}
 	<Overlay onClick={close}>
-		<Dialog {size} role="alertdialog" aria-modal="true" aria-labelledby={title ? 'alert-title' : undefined}>
+		<Dialog
+			{size}
+			role="alertdialog"
+			aria-modal="true"
+			aria-labelledby={title ? 'alert-title' : undefined}
+		>
 			{#if title}
 				<DialogHeader id="alert-title">
 					{title}

package/dist/modals/confirm.svelte

@@ -49,7 +49,12 @@
 
 {#if open}
 	<Overlay onClick={no}>
-		<Dialog {size} role="alertdialog" aria-modal="true" aria-labelledby={title ? 'confirm-title' : undefined}>
+		<Dialog
+			{size}
+			role="alertdialog"
+			aria-modal="true"
+			aria-labelledby={title ? 'confirm-title' : undefined}
+		>
 			{#if title}
 				<DialogHeader id="confirm-title">
 					{title}