sveltacular 1.0.21 → 1.0.24

package/README.md

@@ -50,7 +50,7 @@ npm i sveltacular
 	import { Button } from 'sveltacular';
 </script>
 
-<Button variant="primary" label="Hello World" />
+<Button variant="primary">Hello World</Button>
 ```
 
 **Note**: The stylesheet import is required for components to render with default styling. Import it once at the app level (not in individual components). If you prefer to provide your own theme, you can skip this import and define your own CSS variables (see [Theming](#theming) below).

package/dist/forms/button/button.svelte

@@ -6,10 +6,9 @@
 	import type { Snippet } from 'svelte';
 	import { navigateTo } from '../../helpers/navigate-to.js';
 	import type { ButtonVariant, FormFieldSizeOptions } from '../../types/form.js';
+	import Spinner from '../../generic/spinner/spinner.svelte';
 
 	let {
-		/** Button label text */
-		label,
 		/** Optional href for navigation */
 		href = undefined,
 		/** Button size */
@@ -26,7 +25,7 @@
 		disabled = $bindable(false),
 		/** Loading state */
 		loading = false,
-		/** ARIA label override */
+		/** ARIA label for accessibility (required if button content is not text) */
 		ariaLabel = undefined,
 		/** Remove margins */
 		noMargin = false,
@@ -36,10 +35,9 @@
 		repeatSubmitDelay = 500,
 		/** Click handler */
 		onClick = undefined,
-		/** Optional children snippet */
+		/** Button content */
 		children
 	}: {
-		label?: string;
 		href?: string | undefined;
 		size?: FormFieldSizeOptions;
 		variant?: ButtonVariant;
@@ -53,12 +51,12 @@
 		collapse?: boolean;
 		repeatSubmitDelay?: number | 'infinite';
 		onClick?: ((e?: Event) => void) | undefined;
-		children?: Snippet;
+		children: Snippet;
 	} = $props();
 
 	let isDisabled = $derived(disabled || loading);
 
-	const click = (e: Event) => {
+	const handleClick = (e: Event) => {
 		if (isDisabled) {
 			e.preventDefault();
 			e.stopPropagation();
@@ -79,25 +77,23 @@
 
 <button
 	{type}
-	onclick={click}
+	onclick={handleClick}
 	class="{size} {variant} {flex ? 'flex' : ''}"
 	class:block
 	class:noMargin
 	class:collapse
 	class:loading
 	disabled={isDisabled}
-	aria-label={ariaLabel || label}
+	aria-label={ariaLabel}
 	aria-busy={loading}
 	aria-disabled={isDisabled}
 >
 	{#if loading}
-		<span class="loading-indicator" aria-hidden="true">⏳</span>
-	{/if}
-	{#if children}
-		{@render children()}
-	{:else if label}
-		<span class="label">{label}</span>
+		<span class="spinner-wrapper" aria-hidden="true">
+			<Spinner {size} variant={variant === 'outline' ? 'secondary' : 'primary'} />
+		</span>
 	{/if}
+	{@render children()}
 </button>
 
 <style>button {
@@ -228,4 +224,10 @@ button.link {
 }
 button.link:hover {
   color: var(--base-link-hover-fg);
+}
+button .spinner-wrapper {
+  display: inline-flex;
+  align-items: center;
+  margin-right: var(--spacing-xs);
+  vertical-align: middle;
 }</style>

package/dist/forms/button/button.svelte.d.ts

@@ -5,7 +5,6 @@
 import type { Snippet } from 'svelte';
 import type { ButtonVariant, FormFieldSizeOptions } from '../../types/form.js';
 type $$ComponentProps = {
-    label?: string;
     href?: string | undefined;
     size?: FormFieldSizeOptions;
     variant?: ButtonVariant;
@@ -19,7 +18,7 @@ type $$ComponentProps = {
     collapse?: boolean;
     repeatSubmitDelay?: number | 'infinite';
     onClick?: ((e?: Event) => void) | undefined;
-    children?: Snippet;
+    children: Snippet;
 };
 declare const Button: import("svelte").Component<$$ComponentProps, {}, "disabled">;
 type Button = ReturnType<typeof Button>;

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

@@ -152,14 +152,11 @@
 		</FormInputWrapper>
 		{#if steps.length > 0}
 			<span class="steps">
-				{#each steps as step}
-					<Button
-						noMargin={true}
-						collapse={true}
-						onClick={() => incrementValue(step)}
-						label={step.label}
-					/>
-				{/each}
+			{#each steps as step}
+				<Button noMargin={true} collapse={true} onClick={() => incrementValue(step)}>
+					{step.label}
+				</Button>
+			{/each}
 			</span>
 		{/if}
 	</div>

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

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from '../button/button.svelte';
+	import type { ButtonVariant } from '../../types';
+
+	export type AdditionalButton = {
+		type?: 'button' | 'submit' | 'reset';
+		variant?: ButtonVariant;
+		text: string;
+		onClick?: ((e?: Event) => void) | undefined;
+		disabled?: boolean;
+	};
+
+	let {
+		children,
+		disabled = false,
+		onCancel = undefined,
+		onSubmit = undefined,
+		cancelText = 'Cancel',
+		cancelVariant = 'secondary',
+		submitText = 'Submit',
+		submitVariant = 'primary',
+		additionalButtons = []
+	}: {
+		children?: Snippet;
+		disabled?: boolean;
+		onCancel?: (() => void) | undefined;
+		cancelText?: string;
+		cancelVariant?: ButtonVariant;
+		submitText?: string;
+		submitVariant?: ButtonVariant;
+		onSubmit?: (() => void) | undefined;
+		additionalButtons?: AdditionalButton[];
+	} = $props();
+
+	const buttons = $derived(
+		[
+			onCancel
+				? {
+						type: 'button' as const,
+						variant: cancelVariant,
+						text: cancelText,
+						onClick: onCancel,
+						disabled
+					}
+				: undefined,
+			...additionalButtons.map((btn) => ({ ...btn, disabled: btn.disabled || disabled })),
+			{
+				type: 'submit' as const,
+				variant: submitVariant,
+				text: submitText,
+				onClick: onSubmit,
+				disabled
+			}
+		].filter(Boolean) as AdditionalButton[]
+	);
+</script>
+
+<div class="form-actions">
+	{#if children}
+		<div class="content">
+			{@render children()}
+		</div>
+	{/if}
+	<div class="buttons">
+		{#each buttons as button}
+			<Button
+				type={button.type ?? 'button'}
+				variant={button.variant ?? 'secondary'}
+				onClick={button.onClick}
+				disabled={button.disabled}
+			>
+				{button.text}
+			</Button>
+		{/each}
+	</div>
+</div>
+
+<style>/* ============================================
+   BREAKPOINTS - Responsive Design
+   ============================================ */
+.form-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  /* Vertical spacing - separate form from actions and actions from content below */
+  margin-top: var(--spacing-xl);
+  margin-bottom: var(--spacing-lg);
+  padding-top: var(--spacing-lg);
+  /* Optional: Add a subtle top border to visually separate from form content */
+  border-top: 1px solid var(--gray-200);
+}
+.form-actions .content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex: 0 1 auto; /* Don't grow, can shrink, auto basis */
+}
+.form-actions .buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex: 0 0 auto; /* Don't grow, don't shrink, auto basis */
+  margin-left: auto; /* Push to the right */
+}
+.form-actions {
+  /* Responsive: Stack on mobile */
+}
+@media (max-width: 479.98px) {
+  .form-actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-md);
+  }
+  .form-actions .content,
+  .form-actions .buttons {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  .form-actions .buttons {
+    margin-left: 0;
+    justify-content: flex-end;
+  }
+}</style>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { ButtonVariant } from '../../types';
+export type AdditionalButton = {
+    type?: 'button' | 'submit' | 'reset';
+    variant?: ButtonVariant;
+    text: string;
+    onClick?: ((e?: Event) => void) | undefined;
+    disabled?: boolean;
+};
+type $$ComponentProps = {
+    children?: Snippet;
+    disabled?: boolean;
+    onCancel?: (() => void) | undefined;
+    cancelText?: string;
+    cancelVariant?: ButtonVariant;
+    submitText?: string;
+    submitVariant?: ButtonVariant;
+    onSubmit?: (() => void) | undefined;
+    additionalButtons?: AdditionalButton[];
+};
+declare const FormActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormActions = ReturnType<typeof FormActions>;
+export default FormActions;

package/dist/forms/index.d.ts

@@ -21,10 +21,12 @@ export * from './list-box/index.js';
 export * from './phone-box/index.js';
 export * from './radio-group/index.js';
 export { default as Form } from './form.svelte';
+export { default as FormActions } from './form-actions/form-actions.svelte';
 export { default as FormField } from './form-field/form-field.svelte';
 export { default as FormFooter } from './form-footer.svelte';
 export { default as FormHeader } from './form-header.svelte';
 export { default as FormLabel } from './form-label/form-label.svelte';
 export { default as FormSection } from './form-section/form-section.svelte';
 export { default as FormRow } from './form-row/form-row.svelte';
+export type { AdditionalButton } from './form-actions/form-actions.svelte';
 export * from './validation.js';

package/dist/forms/index.js

@@ -24,6 +24,7 @@ export * from './phone-box/index.js';
 export * from './radio-group/index.js';
 // Form structure components
 export { default as Form } from './form.svelte';
+export { default as FormActions } from './form-actions/form-actions.svelte';
 export { default as FormField } from './form-field/form-field.svelte';
 export { default as FormFooter } from './form-footer.svelte';
 export { default as FormHeader } from './form-header.svelte';

package/dist/modals/alert.svelte

@@ -54,10 +54,10 @@
 			<DialogBody>
 				{@render children?.()}
 			</DialogBody>
-			<Divider />
-			<DialogFooter>
-				<Button onClick={close} size="full" variant={buttonVariant} label={buttonText} />
-			</DialogFooter>
+		<Divider />
+		<DialogFooter>
+			<Button onClick={close} size="full" variant={buttonVariant}>{buttonText}</Button>
+		</DialogFooter>
 		</Dialog>
 	</Overlay>
 {/if}

package/dist/modals/confirm.svelte

@@ -65,11 +65,11 @@
 			<DialogBody>
 				{@render children?.()}
 			</DialogBody>
-			<Divider />
-			<DialogFooter>
-				<Button onClick={no} variant={noVariant} size="full" label={noText} />
-				<Button onClick={yes} variant={yesVariant} size="full" label={yesText} />
-			</DialogFooter>
+		<Divider />
+		<DialogFooter>
+			<Button onClick={no} variant={noVariant} size="full">{noText}</Button>
+			<Button onClick={yes} variant={yesVariant} size="full">{yesText}</Button>
+		</DialogFooter>
 		</Dialog>
 	</Overlay>
 {/if}

package/dist/modals/prompt.svelte

@@ -78,11 +78,11 @@
 					{@render children()}
 				{/if}
 			</DialogBody>
-			<Divider />
-			<DialogFooter>
-				<Button onClick={no} variant={cancelVariant} size="full" label={cancelText} />
-				<Button onClick={yes} variant={okVariant} size="full" label={okText} />
-			</DialogFooter>
+		<Divider />
+		<DialogFooter>
+			<Button onClick={no} variant={cancelVariant} size="full">{cancelText}</Button>
+			<Button onClick={yes} variant={okVariant} size="full">{okText}</Button>
+		</DialogFooter>
 		</Dialog>
 	</Overlay>
 {/if}

package/dist/navigation/wizard/wizard.svelte

@@ -126,7 +126,7 @@
 	<footer>
 		<div>
 			{#if !isFirstStep}
-				<Button type="button" variant="secondary" onClick={previous} {disabled} label="Previous" />
+				<Button type="button" variant="secondary" onClick={previous} {disabled}>Previous</Button>
 			{/if}
 		</div>
 		<div>
@@ -134,9 +134,9 @@
 		</div>
 		<div>
 			{#if isLastStep}
-				<Button type="submit" variant="primary" onClick={done} {disabled} label="Done" />
+				<Button type="submit" variant="primary" onClick={done} {disabled}>Done</Button>
 			{:else}
-				<Button type="button" variant="primary" onClick={next} {disabled} label="Next" />
+				<Button type="button" variant="primary" onClick={next} {disabled}>Next</Button>
 			{/if}
 		</div>
 	</footer>

package/package.json

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