sveltacular 1.0.6 → 1.0.7

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

@@ -32,7 +32,7 @@
 </script>
 
 <FormField {size} {label} {id} {required} {disabled}>
-	<div>
+	<div class="input">
 		<input
 			{id}
 			{placeholder}
@@ -48,21 +48,47 @@
 	</div>
 </FormField>
 
-<style>input {
+<style>.input {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
   width: 100%;
-  padding: var(--spacing-sm) var(--spacing-base);
+  height: 100%;
+  box-sizing: border-box;
   border-radius: var(--radius-md);
   border: var(--border-thin) solid var(--form-input-border);
   background-color: var(--form-input-bg);
   color: var(--form-input-fg);
-  font-size: var(--font-base);
+  font-size: var(--font-md);
   font-weight: 500;
-  line-height: 1.25rem;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
+  line-height: 2rem;
+  transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out);
   user-select: none;
   white-space: nowrap;
 }
-input::placeholder {
+.input input {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  padding-left: var(--spacing-base);
+  padding-right: var(--spacing-base);
+  margin: 0;
+  background-color: transparent;
+  border: none;
+  line-height: 2rem;
+  font-size: var(--font-md);
+  color: inherit;
+}
+.input input:focus {
+  outline: none;
+}
+.input input:focus-visible {
+  outline: 2px solid var(--focus-ring, #007bff);
+  outline-offset: 2px;
+}
+.input input::placeholder {
   color: var(--form-input-placeholder, #888);
   font-style: italic;
 }</style>

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

@@ -1,18 +1,41 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { ComponentSize } from '../../types/size.js';
-	import { getMaxWidth, getDisplayType } from '../../types/size.js';
 	import FormLabel from '../form-label/form-label.svelte';
+	import type { AriaRole } from 'svelte/elements';
+
+	export type FormFieldMessage = {
+		text: string;
+		isError?: boolean;
+	};
+
+	export type FormFieldFeedback = FormFieldMessage & {
+		details?: FormFieldMessage[];
+	};
+
+	/**
+	 * Maps size to flex-grow value for relative sizing in flexbox containers (FormRow).
+	 * The size prop controls how much space the field takes relative to its siblings.
+	 */
+	const getFlexGrow = (size: ComponentSize): number => {
+		const flexMap: Record<ComponentSize, number> = {
+			sm: 1,
+			md: 2,
+			lg: 3,
+			xl: 4,
+			full: 4 // Map full to same as xl for backwards compatibility
+		};
+		return flexMap[size];
+	};
 
 	let {
-		size = 'full',
+		size = 'md',
 		label = undefined,
 		id = undefined,
 		required = false,
 		disabled = false,
-		helperText = undefined,
-		errorText = undefined,
-		successText = undefined,
+		helperText,
+		feedback,
 		children
 	}: {
 		size?: ComponentSize;
@@ -20,36 +43,70 @@
 		id?: string | undefined;
 		required?: boolean;
 		disabled?: boolean;
-		helperText?: string | undefined;
-		errorText?: string | undefined;
-		successText?: string | undefined;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
 		children: Snippet;
 	} = $props();
 
-	let displayType = $derived(getDisplayType(size));
-	let maxWidth = $derived(getMaxWidth(size));
+	let flexGrow = $derived(getFlexGrow(size));
+
+	// Determine which message to show: feedback takes precedence over helperText
+	let message = $derived.by<FormFieldFeedback | undefined>(() => {
+		if (feedback) return feedback;
+		if (helperText) {
+			return { text: helperText, isError: false };
+		}
+		return undefined;
+	});
+
+	// Determine if we're showing helper text (no feedback) or actual feedback
+	let isHelperText = $derived(!feedback && !!helperText);
+
+	let ariaLive = $derived<'assertive' | 'polite' | undefined>(
+		message && !isHelperText ? (message.isError ? 'assertive' : 'polite') : undefined
+	);
+
+	let ariaRole = $derived<AriaRole | undefined>(
+		message && !isHelperText ? (message.isError ? 'alert' : 'status') : undefined
+	);
+
+	let messageClass = $derived(
+		message ? (isHelperText ? 'helper' : message.isError ? 'error' : 'success') : undefined
+	);
 
-	let showHelperText = $derived(!!helperText && !errorText && !successText);
-	let showSuccessText = $derived(!!successText && !errorText);
-	let showErrorText = $derived(!!errorText);
+	let messageId = $derived(
+		message && id
+			? isHelperText
+				? `${id}-helper`
+				: message.isError
+					? `${id}-error`
+					: `${id}-success`
+			: undefined
+	);
 </script>
 
-<div class="form-field {size} {displayType} {maxWidth}">
+<div class="form-field {size}" style="--flex-grow: {flexGrow};">
 	{#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}
+	{#if message}
+		<div
+			class="message-container {messageClass}"
+			role={ariaRole}
+			aria-live={ariaLive}
+			id={messageId}
+		>
+			<div class="message-text">{message.text}</div>
+			{#if message.details && message.details.length > 0}
+				<ul class="message-details">
+					{#each message.details as detail}
+						<li class="message-detail" class:error={detail.isError} class:success={!detail.isError}>
+							{detail.text}
+						</li>
+					{/each}
+				</ul>
+			{/if}
 		</div>
 	{/if}
 </div>
@@ -61,7 +118,9 @@
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  flex: 1;
+  flex-grow: var(--flex-grow, 1);
+  flex-shrink: 1;
+  flex-basis: 0;
 }
 @media (max-width: 479.98px) {
   .form-field {
@@ -69,18 +128,54 @@
   }
 }
 
-.success-text {
+.message-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   font-size: var(--font-sm);
   line-height: 1.25rem;
   padding: var(--spacing-xs);
-  color: var(--success, #28a745);
+  transition: color var(--transition-base) var(--ease-in-out), opacity var(--transition-base) var(--ease-in-out);
+}
+.message-container.helper {
+  color: var(--form-input-helper-text-fg, var(--body-fg-muted));
+}
+.message-container.success {
+  color: var(--color-success, #28a745);
+  font-weight: 500;
+}
+.message-container.error {
+  color: var(--color-error, #dc3545);
   font-weight: 500;
 }
 
-.error-text {
-  font-size: var(--font-sm);
+.message-text {
   line-height: 1.25rem;
-  padding: var(--spacing-xs);
-  color: var(--danger, #dc3545);
-  font-weight: 500;
+}
+
+.message-details {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-left: var(--spacing-sm);
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.message-detail {
+  font-size: var(--font-sm);
+  margin: 0;
+  padding: 0;
+  transition: color var(--transition-base) var(--ease-in-out), opacity var(--transition-base) var(--ease-in-out);
+}
+.message-detail::before {
+  content: "- ";
+  border-radius: 50%;
+}
+.message-detail.error {
+  color: var(--color-error, #dc3545);
+}
+.message-detail.success {
+  color: var(--color-success, #28a745);
 }</style>

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

@@ -1,14 +1,20 @@
 import type { Snippet } from 'svelte';
 import type { ComponentSize } from '../../types/size.js';
+export type FormFieldMessage = {
+    text: string;
+    isError?: boolean;
+};
+export type FormFieldFeedback = FormFieldMessage & {
+    details?: FormFieldMessage[];
+};
 type $$ComponentProps = {
     size?: ComponentSize;
     label?: string | undefined;
     id?: string | undefined;
     required?: boolean;
     disabled?: boolean;
-    helperText?: string | undefined;
-    errorText?: string | undefined;
-    successText?: string | undefined;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
     children: Snippet;
 };
 declare const FormField: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/forms/form-label/form-label.svelte

@@ -5,10 +5,10 @@
 		disabled = false,
 		label = ''
 	}: {
-		id?: string | undefined;
+		id?: string;
 		required?: boolean;
 		disabled?: boolean;
-		label?: string;
+		label: string;
 	} = $props();
 </script>
 
@@ -19,10 +19,12 @@
   margin-bottom: var(--spacing-sm);
   font-weight: 500;
   font-size: var(--font-base);
+  margin: 0;
 }
 label.required::after {
   content: "*";
   margin-left: var(--spacing-xs);
+  color: var(--color-danger);
 }
 label.disabled {
   opacity: 0.5;

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

@@ -1,8 +1,8 @@
 type $$ComponentProps = {
-    id?: string | undefined;
+    id?: string;
     required?: boolean;
     disabled?: boolean;
-    label?: string;
+    label: string;
 };
 declare const FormLabel: import("svelte").Component<$$ComponentProps, {}, "">;
 type FormLabel = ReturnType<typeof FormLabel>;

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

@@ -30,16 +30,18 @@
 </FormField>
 
 <style>.input {
-  background-color: var(--form-input-disabled-bg, #ccc);
-  color: var(--form-input-fg, #000);
-  font-size: 1rem;
+  background-color: var(--form-input-disabled-bg);
+  color: var(--form-input-fg);
+  font-size: var(--font-md);
   width: 100%;
-  padding-left: 0.5rem;
-  border: solid 1px var(--form-input-border, black);
+  height: 100%;
+  padding-left: var(--spacing-base);
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--form-input-border);
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.5rem;
+  gap: var(--spacing-sm);
 }
 .input .icon {
   display: block;
@@ -50,7 +52,7 @@
 .input .text {
   line-height: 2rem;
   flex-grow: 1;
-  font-size: 1rem;
+  font-size: var(--font-md);
 }
 .input a {
   color: var(--form-input-fg, #000);