sveltacular 1.0.0 → 1.0.1

package/dist/forms/check-box/check-box-group.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import CheckBox from './check-box.svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 
@@ -31,13 +31,20 @@
 	// Sync itemsWithState when items or group changes (one-way: items/group -> itemsWithState)
 	// Reassign the entire array to avoid reading itemsWithState in the effect
 	$effect(() => {
-		// Rebuild itemsWithState from items, using group to determine checked state
-		// Reassign instead of mutate to avoid circular dependency
-		const newItems = items.map((item) => ({
-			...item,
-			isChecked: group.includes(item.value ?? '')
-		}));
-		itemsWithState = newItems;
+		// Track items and group as dependencies
+		const currentItems = items;
+		const currentGroup = group;
+		
+		// Use untrack to prevent writing to itemsWithState from triggering this effect again
+		untrack(() => {
+			// Rebuild itemsWithState from items, using group to determine checked state
+			// Reassign instead of mutate to avoid circular dependency
+			const newItems = currentItems.map((item) => ({
+				...item,
+				isChecked: currentGroup.includes(item.value ?? '')
+			}));
+			itemsWithState = newItems;
+		});
 	});
 
 	const handleCheckboxChange = (data: { isChecked: boolean; value: string }) => {
@@ -53,10 +60,7 @@
 	};
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {required} {label} />
-	{/if}
+<FormField {size} {label} {id} {required} {disabled}>
 	<div>
 		{#each itemsWithState as item}
 			<CheckBox

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

@@ -19,9 +19,9 @@
 	 * />
 	 * ```
 	 */
+	import { untrack } from 'svelte';
 	import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import Menu from '../../generic/menu/menu.svelte';
 	import AngleUpIcon from '../../icons/angle-up-icon.svelte';
@@ -40,7 +40,7 @@
 		multiSelect = false,
 		placeholder = '',
 		label = undefined,
-		helpText = undefined,
+		helperText = undefined,
 		errorText = undefined,
 		successText = undefined,
 		maxSelections = undefined as number | undefined,
@@ -68,8 +68,8 @@
 		placeholder?: string;
 		/** Label text for the combobox */
 		label?: string;
-		/** Help text displayed below the input */
-		helpText?: string;
+		/** Helper text displayed below the input */
+		helperText?: string;
 		/** Error message to display */
 		errorText?: string;
 		/** Success message to display */
@@ -368,9 +368,28 @@
 		}
 	};
 
-	// Initial filter
+	// Filter items when items or searchQuery changes
+	// Use untrack to prevent reading filteredItems/highlightIndex from triggering the effect
 	$effect(() => {
-		applyFilter();
+		// Track only the dependencies we care about
+		const query = searchQuery.trim().toLowerCase();
+		const currentItems = items;
+		
+		// Use untrack to write to state without triggering this effect again
+		untrack(() => {
+			if (query && searchable) {
+				filteredItems = currentItems.filter((item) =>
+					item.name.toLowerCase().includes(query)
+				);
+			} else {
+				filteredItems = [...currentItems];
+			}
+
+			// Reset highlight if out of bounds
+			if (highlightIndex >= filteredItems.length) {
+				highlightIndex = Math.max(0, filteredItems.length - 1);
+			}
+		});
 	});
 
 	// Derived state for open/closed
@@ -379,16 +398,15 @@
 	// Clear search query when menu closes in single-select mode
 	$effect(() => {
 		if (!isMenuOpen && !multiSelect) {
-			searchQuery = '';
+			// Use untrack to prevent triggering other effects
+			untrack(() => {
+				searchQuery = '';
+			});
 		}
 	});
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {required} {disabled} {label} />
-	{/if}
-
+<FormField {size} {label} {id} {required} {disabled} {helperText} {errorText} {successText}>
 	<div class="combobox-wrapper {open ? 'open' : 'closed'} {disabled ? 'disabled' : 'enabled'}">
 		<!-- Multi-select chip display -->
 		{#if multiSelect && selectedItems.length > 0}
@@ -423,7 +441,7 @@
 				aria-activedescendant={activeDescendant}
 				aria-haspopup="listbox"
 				aria-label={label}
-				aria-describedby={helpText || errorText || successText ? `${id}-description` : undefined}
+				aria-describedby={helperText || errorText || successText ? `${id}-helper ${id}-error ${id}-success` : undefined}
 				aria-invalid={errorText ? 'true' : undefined}
 				onfocus={() => {
 					if (!disabled) {
@@ -489,19 +507,6 @@
 		</div>
 	</div>
 
-	<!-- Help/Error/Success text -->
-	{#if helpText || errorText || successText}
-		<div id="{id}-description" class="description">
-			{#if errorText}
-				<span class="error-text" role="alert">{errorText}</span>
-			{:else if successText}
-				<span class="success-text" role="status">{successText}</span>
-			{:else if helpText}
-				<span class="help-text">{helpText}</span>
-			{/if}
-		</div>
-	{/if}
-
 	<!-- Max selections indicator -->
 	{#if multiSelect && maxSelections !== undefined}
 		<div class="max-selections-indicator">
@@ -629,23 +634,6 @@ button:focus-visible {
   margin-top: 0.25rem;
 }
 
-.description {
-  margin-top: 0.5rem;
-  font-size: var(--font-sm);
-  line-height: 1.4;
-}
-.description .help-text {
-  color: var(--gray-600);
-}
-.description .error-text {
-  color: var(--danger);
-  font-weight: 500;
-}
-.description .success-text {
-  color: var(--success);
-  font-weight: 500;
-}
-
 .max-selections-indicator {
   margin-top: 0.5rem;
   font-size: var(--font-sm);

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

@@ -1,23 +1,3 @@
-/**
-     * Combobox Component
-     *
-     * A searchable select component with typeahead, multi-select support, and virtual scrolling.
-     * Follows the ARIA 1.2 Combobox pattern for full accessibility.
-     *
-     * @component
-     * @example
-     * ```svelte
-     * <ComboBox
-     *   bind:value
-     *   items={[
-     *     { value: '1', name: 'Option 1' },
-     *     { value: '2', name: 'Option 2' }
-     *   ]}
-     *   label="Select an option"
-     *   searchable
-     * />
-     * ```
-     */
 import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
 type $$ComponentProps = {
     /** Current selected value(s) - string for single-select, string[] for multi-select */
@@ -38,8 +18,8 @@ type $$ComponentProps = {
     placeholder?: string;
     /** Label text for the combobox */
     label?: string;
-    /** Help text displayed below the input */
-    helpText?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
     /** Error message to display */
     errorText?: string;
     /** Success message to display */

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

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { addUnits, currentDateTime, isDateString, isDateOrDateTimeString, isDateTimeString } from '../../helpers/date.js';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import type { DateUnit, FormFieldSizeOptions } from '../../index.js';
 	import Button from '../button/button.svelte';
 
@@ -68,17 +68,17 @@
 
 	$effect(() => {
 		if (!value) {
-			if (nullable) enabled = false;
-			else value = getDefaultValue();
+			// Use untrack to prevent writes to enabled/value from triggering this effect again
+			untrack(() => {
+				if (nullable) enabled = false;
+				else value = getDefaultValue();
+			});
 		}
 	});
 	let disabled = $derived(!enabled);
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {required} {label} />
-	{/if}
+<FormField {size} {label} {id} {required} {disabled}>
 	<div class:nullable class:disabled>
 		<span class="input">
 			<input {...{ type }} {id} {placeholder} {disabled} bind:value {required} oninput={onInput} />

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

@@ -2,7 +2,6 @@
 	import type { Snippet } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	const id = uniqueId();
@@ -32,10 +31,7 @@
 	} = $props();
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {required} {label} />
-	{/if}
+<FormField {size} {label} {id} {required} {disabled}>
 	<div>
 		<input
 			{id}

package/dist/forms/form-field.svelte

@@ -2,24 +2,82 @@
 	import type { Snippet } from 'svelte';
 	import type { ComponentSize } from '../types/size.js';
 	import { getMaxWidth, getDisplayType } from '../types/size.js';
+	import FormLabel from './form-label.svelte';
 
 	let {
 		size = 'full',
+		label = undefined,
+		id = undefined,
+		required = false,
+		disabled = false,
+		helperText = undefined,
+		errorText = undefined,
+		successText = undefined,
 		children
 	}: {
 		size?: ComponentSize;
+		label?: string | undefined;
+		id?: string | undefined;
+		required?: boolean;
+		disabled?: boolean;
+		helperText?: string | undefined;
+		errorText?: string | undefined;
+		successText?: string | undefined;
 		children: Snippet;
 	} = $props();
 
 	let displayType = $derived(getDisplayType(size));
 	let maxWidth = $derived(getMaxWidth(size));
+
+	let showHelperText = $derived(!!helperText && !errorText && !successText);
+	let showSuccessText = $derived(!!successText && !errorText);
+	let showErrorText = $derived(!!errorText);
 </script>
 
 <div style={`display: ${displayType}; width: 100%; min-width: 10rem; max-width: ${maxWidth}`}>
+	{#if label}
+		<FormLabel {id} {required} {disabled} {label} />
+	{/if}
 	{@render children?.()}
+	{#if showHelperText}
+		<div class="helper-text" id="{id}-helper">{helperText}</div>
+	{/if}
+	{#if showSuccessText}
+		<div class="success-text" id="{id}-success" role="status" aria-live="polite">
+			{successText}
+		</div>
+	{/if}
+	{#if showErrorText}
+		<div class="error-text" id="{id}-error" role="alert" aria-live="assertive">
+			{errorText}
+		</div>
+	{/if}
 </div>
 
 <style>div {
   margin-bottom: var(--spacing-base);
   margin-right: var(--spacing-base);
+}
+
+.helper-text {
+  font-size: var(--font-sm);
+  line-height: 1.25rem;
+  padding: var(--spacing-xs);
+  color: var(--body-fg);
+}
+
+.success-text {
+  font-size: var(--font-sm);
+  line-height: 1.25rem;
+  padding: var(--spacing-xs);
+  color: var(--success, #28a745);
+  font-weight: 500;
+}
+
+.error-text {
+  font-size: var(--font-sm);
+  line-height: 1.25rem;
+  padding: var(--spacing-xs);
+  color: var(--danger, #dc3545);
+  font-weight: 500;
 }</style>

package/dist/forms/form-field.svelte.d.ts

@@ -2,6 +2,13 @@ import type { Snippet } from 'svelte';
 import type { ComponentSize } from '../types/size.js';
 type $$ComponentProps = {
     size?: ComponentSize;
+    label?: string | undefined;
+    id?: string | undefined;
+    required?: boolean;
+    disabled?: boolean;
+    helperText?: string | undefined;
+    errorText?: string | undefined;
+    successText?: string | undefined;
     children: Snippet;
 };
 declare const FormField: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/forms/form-row.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+<div class="form-row">
+	{@render children()}
+</div>
+
+<style>/* ============================================
+   BREAKPOINTS - Responsive Design
+   ============================================ */
+.form-row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-base);
+  align-items: flex-start;
+}
+@media (max-width: 479.98px) {
+  .form-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}</style>

package/dist/forms/form-row.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+}
+declare const FormRow: import("svelte").Component<Props, {}, "">;
+type FormRow = ReturnType<typeof FormRow>;
+export default FormRow;

package/dist/forms/form.svelte

@@ -33,3 +33,9 @@
 		{@render children()}
 	</form>
 </Section>
+
+<style>form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-base);
+}</style>

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

@@ -2,7 +2,6 @@
 	import LinkIcon from '../../icons/link-icon.svelte';
 	import type { FormFieldSizeOptions } from '../../index.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 
 	let {
 		size = 'md' as FormFieldSizeOptions,
@@ -17,10 +16,7 @@
 	} = $props();
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {label} />
-	{/if}
+<FormField {size} {label}>
 	<div class="input">
 		{#if href}
 			<span class="icon">

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { DropdownOption, FormFieldSizeOptions, MenuOption } from '../../types/form.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import Menu from '../../generic/menu/menu.svelte';
 	import AngleUpIcon from '../../icons/angle-up-icon.svelte';
@@ -151,10 +150,7 @@
 	let open = $derived(isMenuOpen && !disabled);
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {required} {disabled} {label} />
-	{/if}
+<FormField {size} {label} {id} {required} {disabled}>
 	<div class="{open ? 'open' : 'closed'} {disabled ? 'disabled' : 'enabled'}">
 		<input
 			type="text"

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { uniqueId, type FormFieldSizeOptions } from '../../index.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import { untrack } from 'svelte';
 	
 	const id = uniqueId();
@@ -58,8 +57,11 @@
 	]);
 	$effect(() => {
 		if (value !== null && value >= 0) {
-			dollars = getDollarsFromValue();
-			cents = getCentsFromValue();
+			// Use untrack to prevent writes to dollars/cents from triggering this effect again
+			untrack(() => {
+				dollars = getDollarsFromValue();
+				cents = getCentsFromValue();
+			});
 		}
 	});
 
@@ -207,10 +209,7 @@
 
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {label} />
-	{/if}
+<FormField {size} {label} {id}>
 	<div class="input {currency}" class:allowCents {id}>
 		{#if prefix}
 			<span class="prefix">{prefix}</span>

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

@@ -2,7 +2,6 @@
 	import { roundToDecimals } from '../../helpers/round-to-decimals.js';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 	const id = uniqueId();
 
@@ -64,10 +63,7 @@
 	};
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {label} />
-	{/if}
+<FormField {size} {label} {id}>
 	<div class="input {type}">
 		{#if prefix}
 			<span class="prefix">{prefix}</span>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { uniqueId, type FormFieldSizeOptions } from '../../index.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 
 	let {
 		value = $bindable('' as string | null),
@@ -135,16 +135,18 @@
 	setValue(value ?? '');
 
 	$effect(() => {
-		if (areaCode || localExt || lastFour) {
-			publishChange();
+		// Only trigger when the phone number parts change
+		const hasValue = areaCode || localExt || lastFour;
+		if (hasValue) {
+			// Use untrack to prevent value changes from triggering this effect again
+			untrack(() => {
+				publishChange();
+			});
 		}
 	});
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel id="{id}-areaCode" {label} />
-	{/if}
+<FormField {size} {label} id="{id}-areaCode">
 	<div class="input">
 		<span class="areaCode segment">
 			<span>(</span>

package/dist/forms/radio-group/radio-group.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import RadioBox from './radio-box.svelte';
 
@@ -24,10 +23,7 @@
 	} = $props();
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {required} {label} />
-	{/if}
+<FormField {size} {label} {id} {required} {disabled}>
 	<div>
 		{#each items as item}
 			<RadioBox bind:group {disabled} value={item.value}>{item.name}</RadioBox>

package/dist/forms/slider/slider.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import type { ComponentSize } from '../../types/size.js';
 
 	const id = uniqueId();
@@ -53,10 +52,7 @@
 	let displayValue = $derived(formatValue ? formatValue(value) : String(value));
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {label} />
-	{/if}
+<FormField {size} {label} {id} {disabled}>
 	<div class="slider-wrapper">
 		<div class="slider-track-container">
 			<input

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

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	const id = uniqueId();
@@ -55,31 +55,34 @@
 	// Run auto-resize when value changes
 	$effect(() => {
 		if (value !== null && value !== undefined) {
-			handleAutoResize();
+			// Use untrack to prevent DOM manipulations from triggering effects
+			untrack(() => {
+				handleAutoResize();
+			});
 		}
 	});
 
 	// Run auto-resize on mount
 	$effect(() => {
 		if (textareaElement && autoResize) {
-			handleAutoResize();
+			// Use untrack to prevent DOM manipulations from triggering effects
+			untrack(() => {
+				handleAutoResize();
+			});
 		}
 	});
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {required} {label} />
-	{/if}
-	<textarea 
-		wrap="soft" 
-		{id} 
-		{placeholder} 
-		rows={autoResize ? minRows : rows} 
-		bind:value 
+<FormField {size} {label} {id} {required} {disabled}>
+	<textarea
+		wrap="soft"
+		{id}
+		{placeholder}
+		rows={autoResize ? minRows : rows}
+		bind:value
 		bind:this={textareaElement}
-		{required} 
-		{disabled} 
+		{required}
+		{disabled}
 		{readonly}
 		data-auto-resize={autoResize}
 		oninput={handleAutoResize}

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

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import { animateShake, animateScaleIn } from '../../helpers/animations.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import CheckIcon from '../../icons/check-icon.svelte';
 	import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../../types/form.js';
 
@@ -73,26 +73,45 @@
 				: 'near-limit'
 			: ''
 	);
-	
+
+	// Update describedByIds array when helper/error/success text changes
 	$effect(() => {
-		describedByIds = [];
-		if (helperText) describedByIds.push(`${id}-helper`);
-		if (errorText) describedByIds.push(`${id}-error`);
-		if (successText) describedByIds.push(`${id}-success`);
+		// Track the dependencies we care about
+		const hasHelper = !!helperText;
+		const hasErrorMsg = !!errorText;
+		const hasSuccessMsg = !!successText;
+
+		// 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`);
+		});
 	});
 
-	// Trigger shake animation when error appears
+	// Trigger shake animation when error appears (track previous error state)
+	let prevHasError = $state(false);
 	$effect(() => {
-		if (hasError && inputElement) {
-			animateShake(inputElement);
+		if (hasError && !prevHasError && inputElement) {
+			// Use untrack to prevent animation from triggering effect again
+			untrack(() => {
+				animateShake(inputElement!); // Already checked above
+			});
 		}
+		prevHasError = hasError;
 	});
 
-	// Trigger scale-in animation when success appears
+	// Trigger scale-in animation when success appears (track previous success state)
+	let prevHasSuccess = $state(false);
 	$effect(() => {
-		if (hasSuccess && successIconElement) {
-			animateScaleIn(successIconElement);
+		if (hasSuccess && !prevHasSuccess && successIconElement) {
+			// Use untrack to prevent animation from triggering effect again
+			untrack(() => {
+				animateScaleIn(successIconElement!); // Already checked above
+			});
 		}
+		prevHasSuccess = hasSuccess;
 	});
 
 	// Don't allow certain characters to be typed into the input
@@ -130,11 +149,13 @@
 	};
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {required} {label} />
-	{/if}
-	<div class="input {disabled ? 'disabled' : 'enabled'}" class:error={hasError} class:success={hasSuccess} bind:this={inputElement}>
+<FormField {size} {label} {id} {required} {disabled} {helperText} {errorText} {successText}>
+	<div
+		class="input {disabled ? 'disabled' : 'enabled'}"
+		class:error={hasError}
+		class:success={hasSuccess}
+		bind:this={inputElement}
+	>
 		{#if prefix}
 			<div class="prefix">{prefix}</div>
 		{/if}
@@ -174,19 +195,6 @@
 			{characterCount} / {maxlength}
 		</div>
 	{/if}
-	{#if helperText}
-		<div class="helper-text" id="{id}-helper">{helperText}</div>
-	{/if}
-	{#if successText}
-		<div class="success-text" id="{id}-success" role="status" aria-live="polite">
-			{successText}
-		</div>
-	{/if}
-	{#if errorText}
-		<div class="error-text" id="{id}-error" role="alert" aria-live="assertive">
-			{errorText}
-		</div>
-	{/if}
 </FormField>
 
 <style>.input {
@@ -283,6 +291,8 @@
   padding: var(--spacing-xs);
   text-align: right;
   color: var(--body-fg);
+  position: absolute;
+  right: 0;
 }
 .character-count.near-limit {
   color: var(--warning, #ffc107);
@@ -291,27 +301,4 @@
 .character-count.at-limit {
   color: var(--danger, #dc3545);
   font-weight: 600;
-}
-
-.helper-text {
-  font-size: var(--font-sm);
-  line-height: 1.25rem;
-  padding: var(--spacing-xs);
-  color: var(--body-fg);
-}
-
-.success-text {
-  font-size: var(--font-sm);
-  line-height: 1.25rem;
-  padding: var(--spacing-xs);
-  color: var(--success, #28a745);
-  font-weight: 500;
-}
-
-.error-text {
-  font-size: var(--font-sm);
-  line-height: 1.25rem;
-  padding: var(--spacing-xs);
-  color: var(--danger, #dc3545);
-  font-weight: 500;
 }</style>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import FormField from '../form-field.svelte';
-	import FormLabel from '../form-label.svelte';
 	import type { ComponentSize } from '../../types/size.js';
 
 	const id = uniqueId();
@@ -29,10 +28,7 @@
 	};
 </script>
 
-<FormField {size}>
-	{#if label}
-		<FormLabel {id} {required} {label} />
-	{/if}
+<FormField {size} {label} {id} {required} {disabled}>
 	<input
 		{id}
 		type="time"

package/dist/generic/avatar/avatar.svelte

@@ -84,3 +84,4 @@
 
 
 
+

package/dist/generic/chip/chip.svelte

@@ -88,3 +88,4 @@
 
 
 
+

package/dist/navigation/context-menu/README.md

@@ -144,3 +144,4 @@ Due to limitations in the Storybook Svelte CSF parser with advanced Svelte 5 syn
 
 
 
+

package/dist/navigation/context-menu/context-menu-divider.svelte

@@ -19,3 +19,4 @@
 
 
 
+

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",