sveltacular 1.0.10 → 1.0.13

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

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import { roundToDecimals } from '../../helpers/round-to-decimals.js';
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import FormField from '../form-field/form-field.svelte';
+	import type { FormFieldSizeOptions } from '../../types/form.js';
+
+	const baseId = uniqueId();
+
+	// Generate unique IDs for each dimension input
+	function getDimensionId(index: number) {
+		return `${baseId}-dimension-${index}`;
+	}
+
+	let {
+		dimensions = ['Width', 'Depth', 'Height'] as string[],
+		value = $bindable([] as (number | null)[]),
+		minAllowed = 0,
+		maxAllowed = 99999,
+		step = 1,
+		decimals = 0,
+		prefix = null as string | null,
+		suffix = null as string | null,
+		required = false,
+		size = 'full' as FormFieldSizeOptions,
+		label = undefined as string | undefined,
+		onChange = undefined as ((value: (number | null)[]) => void) | undefined
+	}: {
+		dimensions?: string[];
+		value?: (number | null)[];
+		minAllowed?: number;
+		maxAllowed?: number;
+		step?: number;
+		decimals?: number;
+		prefix?: string | null;
+		suffix?: string | null;
+		required?: boolean;
+		size?: FormFieldSizeOptions;
+		label?: string;
+		onChange?: ((value: (number | null)[]) => void) | undefined;
+	} = $props();
+
+	// Ensure value array matches dimensions array length
+	$effect(() => {
+		if (dimensions.length > 0 && value.length !== dimensions.length) {
+			const newValue = Array(dimensions.length)
+				.fill(null)
+				.map((_, i) => (i < value.length && value[i] !== undefined ? value[i] : null));
+			value = newValue;
+		}
+	});
+
+	const handleChange = (index: number) => {
+		const currentValue = value[index];
+
+		if (currentValue === null || currentValue === undefined) {
+			onChange?.(value);
+			return;
+		}
+
+		// Round to decimals
+		value[index] = roundToDecimals(currentValue, decimals);
+
+		// Ensure value is within allowed range
+		if (value[index]! < minAllowed) {
+			value[index] = minAllowed;
+		}
+		if (value[index]! > maxAllowed) {
+			value[index] = maxAllowed;
+		}
+
+		onChange?.(value);
+	};
+
+	const onInput = (e: Event, index: number) => {
+		const input = e.target as HTMLInputElement;
+		const newValue = parseFloat(input.value);
+		if (isNaN(newValue)) {
+			value[index] = null;
+			return;
+		}
+		value[index] = newValue;
+	};
+
+	// Don't allow certain characters to be typed into the input
+	const onKeyPress = (e: KeyboardEvent) => {
+		const isNumber = !isNaN(Number(e.key));
+		const isDecimal = e.key === '.';
+		const allowDecimals = decimals > 0;
+		const isAllowed =
+			isNumber ||
+			isDecimal ||
+			['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', '-'].includes(e.key);
+		if (!isAllowed) return e.preventDefault();
+		if (isDecimal && !allowDecimals) return e.preventDefault();
+	};
+
+	const getPlaceholder = (dimension: string) => {
+		return dimension;
+	};
+</script>
+
+<FormField {size} {label} id={getDimensionId(0)} {required}>
+	<div class="dimension-inputs">
+		{#each dimensions as dimension, index}
+			<div class="input-group">
+				<div class="input">
+					{#if prefix}
+						<span class="prefix">{prefix}</span>
+					{/if}
+					<input
+						id={getDimensionId(index)}
+						type="number"
+						placeholder={getPlaceholder(dimension)}
+						min={minAllowed}
+						max={maxAllowed}
+						{step}
+						bind:value={value[index]}
+						onchange={() => handleChange(index)}
+						oninput={(e) => onInput(e, index)}
+						onkeypress={onKeyPress}
+						{required}
+					/>
+					{#if suffix}
+						<span class="suffix">{suffix}</span>
+					{/if}
+				</div>
+			</div>
+			{#if index < dimensions.length - 1}
+				<span class="separator">×</span>
+			{/if}
+		{/each}
+	</div>
+</FormField>
+
+<style>.dimension-inputs {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  width: 100%;
+}
+
+.input-group {
+  flex: 1;
+}
+
+.separator {
+  font-size: var(--font-lg);
+  font-weight: 500;
+  color: var(--form-input-fg);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.input {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  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-md);
+  font-weight: 500;
+  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 input {
+  background-color: transparent;
+  border: none;
+  line-height: 2rem;
+  font-size: var(--font-md);
+  width: 100%;
+  flex-grow: 1;
+  padding-left: var(--spacing-base);
+}
+.input input:focus {
+  outline: none;
+}
+.input input::placeholder {
+  color: var(--form-input-placeholder);
+}
+.input .prefix,
+.input .suffix {
+  font-size: var(--font-md);
+  line-height: 2rem;
+  padding-left: var(--spacing-base);
+  padding-right: var(--spacing-base);
+  background-color: var(--form-input-accent-bg);
+  color: var(--form-input-accent-fg);
+}
+.input .prefix {
+  border-right: var(--border-thin) solid var(--form-input-border);
+}
+.input .suffix {
+  border-left: var(--border-thin) solid var(--form-input-border);
+}</style>

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

@@ -0,0 +1,18 @@
+import type { FormFieldSizeOptions } from '../../types/form.js';
+type $$ComponentProps = {
+    dimensions?: string[];
+    value?: (number | null)[];
+    minAllowed?: number;
+    maxAllowed?: number;
+    step?: number;
+    decimals?: number;
+    prefix?: string | null;
+    suffix?: string | null;
+    required?: boolean;
+    size?: FormFieldSizeOptions;
+    label?: string;
+    onChange?: ((value: (number | null)[]) => void) | undefined;
+};
+declare const DimensionBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DimensionBox = ReturnType<typeof DimensionBox>;
+export default DimensionBox;

package/dist/forms/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Button } from './button/button.svelte';
 export { default as BoolBox } from './bool-box/bool-box.svelte';
 export { default as DateBox } from './date-box/date-box.svelte';
+export { default as DimensionBox } from './dimension-box/dimension-box.svelte';
 export { default as FileArea } from './file-area/file-area.svelte';
 export { default as FileBox } from './file-box/file-box.svelte';
 export { default as InfoBox } from './info-box/info-box.svelte';

package/dist/forms/index.js

@@ -2,6 +2,7 @@
 export { default as Button } from './button/button.svelte';
 export { default as BoolBox } from './bool-box/bool-box.svelte';
 export { default as DateBox } from './date-box/date-box.svelte';
+export { default as DimensionBox } from './dimension-box/dimension-box.svelte';
 export { default as FileArea } from './file-area/file-area.svelte';
 export { default as FileBox } from './file-box/file-box.svelte';
 export { default as InfoBox } from './info-box/info-box.svelte';

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

@@ -193,7 +193,6 @@
   width: 100%;
   flex-grow: 1;
   padding-left: var(--spacing-base);
-  padding-right: var(--spacing-base);
 }
 .input input:focus {
   outline: none;

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

@@ -21,6 +21,7 @@
 		helperText = undefined,
 		feedback = undefined,
 		isLoading = false,
+		showCharacterCount = false,
 		maxlength = undefined,
 		minlength = undefined,
 		pattern = undefined
@@ -39,6 +40,7 @@
 		helperText?: string;
 		feedback?: FormFieldFeedback;
 		isLoading?: boolean;
+		showCharacterCount?: boolean;
 		maxlength?: number | undefined;
 		minlength?: number | undefined;
 		pattern?: string | undefined;
@@ -46,6 +48,16 @@
 
 	let textareaElement: HTMLTextAreaElement | null = $state(null);
 
+	// Character count functionality
+	let characterCount = $derived((value || '').length);
+	let characterLimitClass = $derived(
+		maxlength && characterCount > maxlength * 0.9
+			? characterCount >= maxlength
+				? 'at-limit'
+				: 'near-limit'
+			: ''
+	);
+
 	// Auto-resize functionality
 	const handleAutoResize = () => {
 		if (!autoResize || !textareaElement) return;
@@ -86,25 +98,37 @@
 </script>
 
 <FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
-	<textarea
-		wrap="soft"
-		{id}
-		{placeholder}
-		rows={autoResize ? minRows : rows}
-		bind:value
-		bind:this={textareaElement}
-		{required}
-		{disabled}
-		{readonly}
-		{maxlength}
-		{minlength}
-		aria-busy={isLoading}
-		data-auto-resize={autoResize}
-		oninput={handleAutoResize}
-	></textarea>
+	<div class="textarea-container">
+		<textarea
+			wrap="soft"
+			{id}
+			{placeholder}
+			rows={autoResize ? minRows : rows}
+			bind:value
+			bind:this={textareaElement}
+			{required}
+			{disabled}
+			{readonly}
+			{maxlength}
+			{minlength}
+			aria-busy={isLoading}
+			data-auto-resize={autoResize}
+			oninput={handleAutoResize}
+		></textarea>
+		{#if showCharacterCount && maxlength}
+			<div class="character-count {characterLimitClass}">
+				{characterCount} / {maxlength}
+			</div>
+		{/if}
+	</div>
 </FormField>
 
-<style>textarea {
+<style>.textarea-container {
+  position: relative;
+  width: 100%;
+}
+
+textarea {
   width: 100%;
   height: auto;
   padding: 0.5rem 1rem;
@@ -128,4 +152,23 @@ textarea::placeholder {
 textarea[data-auto-resize=true] {
   resize: none;
   overflow-y: hidden;
+}
+
+.character-count {
+  font-size: var(--font-sm);
+  line-height: 1.25rem;
+  padding: var(--spacing-xs);
+  text-align: right;
+  color: var(--body-fg);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+.character-count.near-limit {
+  color: var(--warning, #ffc107);
+  font-weight: 500;
+}
+.character-count.at-limit {
+  color: var(--danger, #dc3545);
+  font-weight: 600;
 }</style>

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

@@ -15,6 +15,7 @@ type $$ComponentProps = {
     helperText?: string;
     feedback?: FormFieldFeedback;
     isLoading?: boolean;
+    showCharacterCount?: boolean;
     maxlength?: number | undefined;
     minlength?: number | undefined;
     pattern?: string | undefined;

package/dist/layout/index.d.ts

@@ -2,3 +2,4 @@ export { default as FlexCol } from './flex-col.svelte';
 export { default as FlexRow } from './flex-row.svelte';
 export { default as FlexItem } from './flex-item.svelte';
 export { default as Grid } from './grid.svelte';
+export { default as Main } from './main/main.svelte';

package/dist/layout/index.js

@@ -2,3 +2,4 @@ export { default as FlexCol } from './flex-col.svelte';
 export { default as FlexRow } from './flex-row.svelte';
 export { default as FlexItem } from './flex-item.svelte';
 export { default as Grid } from './grid.svelte';
+export { default as Main } from './main/main.svelte';

package/dist/layout/main/main.svelte

@@ -9,6 +9,11 @@
 </script>
 
 <main>
+	<a
+		id="top"
+		aria-hidden="true"
+		style="position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
+	></a>
 	{@render children?.()}
 </main>
 
@@ -16,6 +21,7 @@
    BREAKPOINTS - Responsive Design
    ============================================ */
 main {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -23,6 +29,9 @@ main {
   max-width: 1000px; /* Desktop: good for 1366px-1920px screens */
   margin: 0 auto;
   padding: 0 var(--spacing-base, 1rem);
+  /* Improve touch scrolling on iOS */
+  -webkit-overflow-scrolling: touch;
+  overflow-x: hidden; /* Prevent horizontal scroll */
   /* Responsive padding for larger screens */
 }
 @media (min-width: 641px) {
@@ -38,4 +47,12 @@ main {
   main {
     max-width: 1440px;
   }
+}
+main {
+  /* Add extra bottom padding on mobile for better UX */
+}
+@media (max-width: 319.98px) {
+  main {
+    padding-bottom: 2rem;
+  }
 }</style>

package/dist/navigation/tabs/tab-context.d.ts

@@ -2,7 +2,6 @@ export type TabVariant = 'traditional' | 'underline' | 'outline' | 'overline' |
 export type TabDefinition = {
     id: string;
     label: string;
-    defaultActive: boolean;
     index: number;
     disabled?: boolean;
     href?: string;
@@ -14,6 +13,6 @@ export interface TabContext {
     };
     variant: TabVariant;
     groupId: string;
-    register: (id: string, label: string, isActive: boolean, href?: string) => void;
+    register: (id: string, label: string, href?: string, disabled?: boolean) => void;
 }
 export declare const tabContext = "tabContext";

package/dist/navigation/tabs/tab-group.svelte

@@ -7,10 +7,12 @@
 	let {
 		variant = 'traditional' as TabVariant,
 		onChange = undefined,
+		activeTab = $bindable(null as string | null),
 		children
 	}: {
 		variant?: TabVariant;
 		onChange?: ((id: string | null) => void) | undefined;
+		activeTab?: string | null;
 		children: Snippet;
 	} = $props();
 
@@ -26,11 +28,73 @@
 	let registrationIndex = 0;
 	let isInitialized = $state(false);
 
-	const register = (id: string, label: string, isActive: boolean, href?: string) => {
+	// Cache for tab lookups to improve performance
+	const tabCache = new Map<string, TabDefinition>();
+
+	const register = (id: string, label: string, href?: string, disabled = false) => {
+		// Prevent duplicate registrations
+		if (tabCache.has(id)) {
+			console.warn(`Tab with id "${id}" is already registered. Ignoring duplicate.`);
+			return;
+		}
+
 		const index = registrationIndex++;
-		tabState.tabs.push({ id, label, defaultActive: isActive, index, href });
+		const tab: TabDefinition = { id, label, index, href, disabled };
+		tabState.tabs.push(tab);
+		tabCache.set(id, tab);
 	};
 
+	// Sync from activeTab (parent) to tabState.active (internal)
+	// This allows parent to control which tab is active
+	// Using untrack to prevent reactive dependencies that could cause loops
+	$effect(() => {
+		const currentActiveTab = activeTab;
+		const currentActiveState = tabState.active;
+
+		// Check if current active tab becomes disabled - clear it if so
+		if (currentActiveState !== null) {
+			const activeTabDef = tabCache.get(currentActiveState);
+			if (activeTabDef?.disabled) {
+				// Active tab was disabled, find first enabled tab or clear
+				const enabledTabs = tabState.tabs.filter((tab) => !tab.disabled);
+				if (enabledTabs.length > 0) {
+					const firstEnabled = enabledTabs.sort((a, b) => a.index - b.index)[0];
+					tabState.active = firstEnabled.id;
+					activeTab = firstEnabled.id;
+				} else {
+					tabState.active = null;
+					activeTab = null;
+				}
+				return;
+			}
+		}
+
+		// Skip if values are already in sync
+		if (currentActiveTab === currentActiveState) return;
+
+		// If activeTab is explicitly set (including null), sync it to internal state
+		if (currentActiveTab !== undefined) {
+			if (currentActiveTab === null) {
+				// Parent wants to clear active tab
+				if (currentActiveState !== null) {
+					tabState.active = null;
+				}
+			} else {
+				// Only update if the tab exists and is not disabled
+				const tab = tabCache.get(currentActiveTab);
+				if (tab) {
+					if (!tab.disabled && currentActiveState !== currentActiveTab) {
+						tabState.active = currentActiveTab;
+					} else if (tab.disabled) {
+						// If parent tries to activate a disabled tab, revert activeTab
+						activeTab = currentActiveState;
+					}
+				}
+				// If tabs haven't registered yet, initialization will handle it
+			}
+		}
+	});
+
 	// Initialize active tab - only run once when tabs are available
 	$effect(() => {
 		// Skip if already initialized or no tabs yet
@@ -45,6 +109,16 @@
 			const currentTabs = tabState.tabs;
 			if (currentTabs.length === 0) return;
 
+			// If activeTab is already set by parent, use it (after verifying it's valid and not disabled)
+			if (activeTab !== null && activeTab !== undefined) {
+				const tab = tabCache.get(activeTab);
+				if (tab && !tab.disabled) {
+					tabState.active = activeTab;
+					isInitialized = true;
+					return;
+				}
+			}
+
 			// Check for anchor in URL first (but only if it matches a tab in THIS group)
 			const anchor = getAnchor();
 			if (anchor) {
@@ -52,58 +126,60 @@
 				const groupPrefix = `${groupId}-`;
 				if (anchor.startsWith(groupPrefix)) {
 					const tabId = anchor.slice(groupPrefix.length);
-					const tabExists = currentTabs.some((tab) => tab.id === tabId);
-					if (tabExists) {
+					const tab = tabCache.get(tabId);
+					if (tab && !tab.disabled) {
 						tabState.active = tabId;
+						activeTab = tabId;
 						isInitialized = true;
 						return;
 					}
 				}
 				// Also check for direct tab ID match (for backward compatibility)
-				const tabExists = currentTabs.some((tab) => tab.id === anchor);
-				if (tabExists) {
+				const tab = tabCache.get(anchor);
+				if (tab && !tab.disabled) {
 					tabState.active = anchor;
+					activeTab = anchor;
 					isInitialized = true;
 					return;
 				}
 			}
 
-			// Check for defaultActive tab
-			const defaultActiveTab = currentTabs.find((tab) => tab.defaultActive);
-			if (defaultActiveTab) {
-				tabState.active = defaultActiveTab.id;
-				isInitialized = true;
-				return;
-			}
-
-			// Default to first tab (by registration index, which should be the first in DOM order)
+			// Default to first enabled tab (by registration index, which should be the first in DOM order)
 			// Sort by index to get the first registered tab (lowest index = first)
-			const sortedTabs = [...currentTabs].sort((a, b) => a.index - b.index);
+			const sortedTabs = [...currentTabs]
+				.filter((tab) => !tab.disabled)
+				.sort((a, b) => a.index - b.index);
 			const firstTab = sortedTabs[0];
 			if (firstTab) {
 				tabState.active = firstTab.id;
+				activeTab = firstTab.id;
 				isInitialized = true;
 			}
 		});
 	});
 	const selectTab = (id: string) => {
-		const tab = tabState.tabs.find((t) => t.id === id);
-		if (tab?.disabled) return;
+		// Use cache for faster lookup
+		const tab = tabCache.get(id);
+		if (!tab || tab.disabled) return;
 
-		tabState.active = id;
+		// Only update if different to avoid unnecessary re-renders
+		if (tabState.active !== id) {
+			tabState.active = id;
+			activeTab = id;
 
-		// Only use anchor navigation if tab doesn't have href (href navigation is handled by Tab component)
-		// Scope anchor to this group to avoid conflicts with multiple tab groups
-		if (!tab?.href) {
-			navigateToAnchor(`${groupId}-${id}`);
-		}
+			// Only use anchor navigation if tab doesn't have href (href navigation is handled by Tab component)
+			// Scope anchor to this group to avoid conflicts with multiple tab groups
+			if (!tab.href) {
+				navigateToAnchor(`${groupId}-${id}`);
+			}
 
-		onChange?.(id);
+			onChange?.(id);
 
-		// Focus the selected tab (scoped to this group)
-		const button = document.getElementById(`tab-${groupId}-${id}`);
-		if (button) {
-			button.focus();
+			// Focus the selected tab (scoped to this group)
+			const button = document.getElementById(`tab-${groupId}-${id}`);
+			if (button) {
+				button.focus();
+			}
 		}
 	};
 
@@ -161,15 +237,17 @@
 	<div class="tab-head">
 		<div role="tablist">
 			{#each tabState.tabs as tab}
-				<li class={tabState.active == tab.id ? 'active' : 'inactive'}>
+				<li class={tabState.active == tab.id ? 'active' : 'inactive'} class:disabled={tab.disabled}>
 					<button
 						id="tab-{groupId}-{tab.id}"
 						role="tab"
 						aria-selected={tabState.active === tab.id}
 						aria-controls="tabpanel-{groupId}-{tab.id}"
-						tabindex={tabState.active === tab.id ? 0 : -1}
+						aria-disabled={tab.disabled || false}
+						tabindex={tab.disabled ? -1 : tabState.active === tab.id ? 0 : -1}
+						disabled={tab.disabled || false}
 						onclick={() => selectTab(tab.id)}
-						onkeydown={(e) => handleKeydown(e, tab.id)}
+						onkeydown={(e) => !tab.disabled && handleKeydown(e, tab.id)}
 					>
 						{tab.label}
 					</button>
@@ -206,6 +284,10 @@
   font-weight: 700;
   cursor: default;
 }
+.tab-head li.disabled button {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 .tab-head button {
   appearance: none;
   border: none 0;

package/dist/navigation/tabs/tab-group.svelte.d.ts

@@ -3,8 +3,9 @@ import { type TabVariant } from './tab-context.js';
 type $$ComponentProps = {
     variant?: TabVariant;
     onChange?: ((id: string | null) => void) | undefined;
+    activeTab?: string | null;
     children: Snippet;
 };
-declare const TabGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const TabGroup: import("svelte").Component<$$ComponentProps, {}, "activeTab">;
 type TabGroup = ReturnType<typeof TabGroup>;
 export default TabGroup;

package/dist/navigation/tabs/tab.svelte

@@ -8,15 +8,15 @@
 	let {
 		label,
 		href,
-		defaultActive = false,
 		id = undefined,
+		disabled = false,
 		onActivate = undefined,
 		children = undefined
 	}: {
 		label: string;
 		href?: string | undefined;
-		defaultActive?: boolean;
 		id?: string | undefined;
+		disabled?: boolean;
 		onActivate?: ((id: string) => void) | undefined;
 		children?: Snippet;
 	} = $props();
@@ -32,7 +32,7 @@
 
 	// Register this tab once on mount (like wizard does)
 	onMount(() => {
-		ctx.register(_id, label, defaultActive, href);
+		ctx.register(_id, label, href, disabled);
 	});
 
 	// Access the $state object's properties directly - THIS creates reactive dependencies!

package/dist/navigation/tabs/tab.svelte.d.ts

@@ -2,8 +2,8 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
     href?: string | undefined;
-    defaultActive?: boolean;
     id?: string | undefined;
+    disabled?: boolean;
     onActivate?: ((id: string) => void) | undefined;
     children?: Snippet;
 };

package/package.json

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