sveltacular 1.0.14 → 1.0.16

package/README.md

@@ -181,9 +181,8 @@ npm i sveltacular
 ### Images & Icons
 
 - **Image** - Image component with lazy loading
-- **Icon** - Icon component
-- **SvgIcon** - SVG icon wrapper
-- Built-in icons: AngleRightIcon, AngleUpIcon, CheckIcon, CopyIcon, EnvelopeIcon, FolderOpenIcon, HamburgerIcon, HomeIcon, LinkIcon, MobilePhoneIcon, PhoneIcon, UploadIcon
+- **Icon** - Unified icon component with type-safe icon types, CSS mask support, and external image support
+  - Built-in icon types: `angle-right`, `angle-up`, `check`, `copy`, `envelope`, `folder-open`, `hamburger`, `home`, `link`, `mobile-phone`, `phone`, `upload`
 
 ### Data
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
-	import CheckIcon from '../../icons/check-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 
@@ -12,6 +12,7 @@
 		name = undefined,
 		onChange = undefined,
 		label,
+		ariaLabel,
 		children,
 		size = 'full' as FormFieldSizeOptions,
 		helperText = undefined,
@@ -25,6 +26,7 @@
 		name?: string | undefined;
 		onChange?: ((data: { isChecked: boolean; value: string }) => void) | undefined;
 		label?: string;
+		ariaLabel?: string;
 		children?: Snippet;
 		size?: FormFieldSizeOptions;
 		helperText?: string;
@@ -33,6 +35,9 @@
 		inline?: boolean;
 	} = $props();
 
+	// Use ariaLabel if provided, otherwise fall back to label for accessibility
+	let inputAriaLabel = $derived(ariaLabel ?? label);
+
 	const id = uniqueId();
 
 	const onChecked = (event: Event) => {
@@ -56,18 +61,21 @@
 			bind:checked={isChecked}
 			onchange={onChecked}
 			{required}
+			aria-label={inputAriaLabel}
 		/>
 		<span class="checkbox">
-			<span class="checkmark"><CheckIcon /></span>
+			<span class="checkmark"><Icon type="check" size="sm" fill="#fff" mask /></span>
 		</span>
-		{#if children}
-			<div class="text">
-				{@render children()}
-			</div>
-		{:else if label}
-			<div class="text">
-				{label}
-			</div>
+		{#if !ariaLabel}
+			{#if children}
+				<div class="text">
+					{@render children()}
+				</div>
+			{:else if label}
+				<div class="text">
+					{label}
+				</div>
+			{/if}
 		{/if}
 	</label>
 {:else}
@@ -82,9 +90,10 @@
 				bind:checked={isChecked}
 				onchange={onChecked}
 				{required}
+				aria-label={inputAriaLabel}
 			/>
 			<span class="checkbox">
-				<span class="checkmark"><CheckIcon /></span>
+				<span class="checkmark"> <Icon type="check" size="sm" fill="#fff" mask /></span>
 			</span>
 			{#if children}
 				<div class="text">
@@ -123,7 +132,7 @@
   user-select: none;
 }
 .checkbox-label .checkbox .checkmark {
-  display: block;
+  display: none;
   position: absolute;
   top: 0;
   left: 0;
@@ -145,6 +154,7 @@
   border-color: var(--form-input-border);
 }
 .checkbox-label input:checked + .checkbox .checkmark {
+  display: block;
   width: 100%;
   height: 100%;
 }</style>

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

@@ -11,6 +11,7 @@ type $$ComponentProps = {
         value: string;
     }) => void) | undefined;
     label?: string;
+    ariaLabel?: string;
     children?: Snippet;
     size?: FormFieldSizeOptions;
     helperText?: string;

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

@@ -1,7 +1,7 @@
 <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 FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	const baseId = uniqueId();
@@ -23,6 +23,9 @@
 		required = false,
 		size = 'full' as FormFieldSizeOptions,
 		label = undefined as string | undefined,
+		helperText = undefined as string | undefined,
+		feedback = undefined as FormFieldFeedback | undefined,
+		disabled = false,
 		onChange = undefined as ((value: (number | null)[]) => void) | undefined
 	}: {
 		dimensions?: string[];
@@ -36,6 +39,9 @@
 		required?: boolean;
 		size?: FormFieldSizeOptions;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		disabled?: boolean;
 		onChange?: ((value: (number | null)[]) => void) | undefined;
 	} = $props();
 
@@ -97,13 +103,15 @@
 	const getPlaceholder = (dimension: string) => {
 		return dimension;
 	};
+
+	let hasError = $derived(!!feedback?.isError);
 </script>
 
-<FormField {size} {label} id={getDimensionId(0)} {required}>
+<FormField {size} {label} id={getDimensionId(0)} {required} {disabled} {helperText} {feedback}>
 	<div class="dimension-inputs">
 		{#each dimensions as dimension, index}
 			<div class="input-group">
-				<div class="input">
+				<div class="input {disabled ? 'disabled' : ''}" class:error={hasError}>
 					{#if prefix}
 						<span class="prefix">{prefix}</span>
 					{/if}
@@ -119,6 +127,7 @@
 						oninput={(e) => onInput(e, index)}
 						onkeypress={onKeyPress}
 						{required}
+						{disabled}
 					/>
 					{#if suffix}
 						<span class="suffix">{suffix}</span>
@@ -169,6 +178,12 @@
   user-select: none;
   white-space: nowrap;
 }
+.input.disabled {
+  opacity: 0.5;
+}
+.input.error {
+  border-color: var(--color-error, #dc3545);
+}
 .input input {
   background-color: transparent;
   border: none;

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

@@ -1,3 +1,4 @@
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 import type { FormFieldSizeOptions } from '../../types/form.js';
 type $$ComponentProps = {
     dimensions?: string[];
@@ -11,6 +12,9 @@ type $$ComponentProps = {
     required?: boolean;
     size?: FormFieldSizeOptions;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    disabled?: boolean;
     onChange?: ((value: (number | null)[]) => void) | undefined;
 };
 declare const DimensionBox: import("svelte").Component<$$ComponentProps, {}, "value">;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import UploadIcon from '../../icons/upload-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 
 	type SelectFilesTarget = null | { files: FileList | null | undefined };
 	type DroppedFiles = FileList | File[];
@@ -93,7 +93,7 @@
 		ondragexit={dragStop}
 	>
 		<input type="file" id="upload-button" accept="image/*" onchange={selectFiles} {disabled} />
-		<div class="icon"><UploadIcon /></div>
+		<div class="icon"><Icon type="upload" size="lg" /></div>
 		<div class="text">
 			{#if children}
 				{@render children?.()}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import LinkIcon from '../../icons/link-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 	import type { FormFieldSizeOptions } from '../../index.js';
 	import FormField from '../form-field/form-field.svelte';
 
@@ -20,7 +20,7 @@
 	<div class="input">
 		{#if href}
 			<span class="icon">
-				<LinkIcon />
+				<Icon type="link" size="sm" />
 			</span>
 			<a {href} class="text">{value}</a>
 		{:else}

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

@@ -3,7 +3,7 @@
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import Menu from '../../generic/menu/menu.svelte';
-	import AngleUpIcon from '../../icons/angle-up-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 	import debounce from '../../helpers/debounce.js';
 	import { browser } from '$app/environment';
 	import { onMount, untrack } from 'svelte';
@@ -311,7 +311,7 @@
 			aria-label={open ? 'Close options' : 'Open options'}
 			tabindex="-1"
 		>
-			<AngleUpIcon />
+			<Icon type="angle-up" size="sm" />
 		</button>
 		{#if text && isSearchable}
 			<button

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { uniqueId, type FormFieldSizeOptions } from '../../index.js';
-	import FormField from '../form-field/form-field.svelte';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import { untrack } from 'svelte';
 
 	const id = uniqueId();
@@ -16,6 +16,10 @@
 		units = 'ones' as 'ones' | 'cents',
 		min = 0,
 		max = null as number | null,
+		required = false,
+		helperText = undefined as string | undefined,
+		feedback = undefined as FormFieldFeedback | undefined,
+		disabled = false,
 		onChange = undefined,
 		label = undefined
 	}: {
@@ -29,6 +33,10 @@
 		units?: 'ones' | 'cents';
 		min?: number;
 		max?: number | null;
+		required?: boolean;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		disabled?: boolean;
 		onChange?: ((value: number | null) => void) | undefined;
 		label?: string;
 	} = $props();
@@ -217,10 +225,12 @@
 		cents = String(centValue).padStart(2, '0');
 		onChange?.(value);
 	};
+
+	let hasError = $derived(!!feedback?.isError);
 </script>
 
-<FormField {size} {label} {id}>
-	<div class="input {currency}" class:allowCents {id}>
+<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
+	<div class="input {currency}" class:allowCents class:disabled class:error={hasError} {id}>
 		{#if prefix}
 			<span class="prefix">{prefix}</span>
 		{/if}
@@ -240,6 +250,8 @@
 			name="dollars"
 			id="{id}-dollars"
 			inputmode="numeric"
+			{required}
+			{disabled}
 		/>
 		{#if allowCents}
 			<span class="separator">.</span>
@@ -258,6 +270,8 @@
 				name="cents"
 				id="{id}-cents"
 				inputmode="numeric"
+				{required}
+				{disabled}
 			/>
 		{/if}
 
@@ -286,6 +300,12 @@
   user-select: none;
   white-space: nowrap;
 }
+.input.disabled {
+  opacity: 0.5;
+}
+.input.error {
+  border-color: var(--color-error, #dc3545);
+}
 .input input {
   background-color: transparent;
   border: none;

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

@@ -1,4 +1,5 @@
 import { type FormFieldSizeOptions } from '../../index.js';
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 type $$ComponentProps = {
     value?: number | null;
     prefix?: string;
@@ -10,6 +11,10 @@ type $$ComponentProps = {
     units?: 'ones' | 'cents';
     min?: number;
     max?: number | null;
+    required?: boolean;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    disabled?: boolean;
     onChange?: ((value: number | null) => void) | undefined;
     label?: string;
 };

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

@@ -1,7 +1,7 @@
 <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 FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 
 	const minId = uniqueId();
@@ -22,6 +22,9 @@
 		required = false,
 		size = 'full' as FormFieldSizeOptions,
 		label = undefined as string | undefined,
+		helperText = undefined as string | undefined,
+		feedback = undefined as FormFieldFeedback | undefined,
+		disabled = false,
 		onChange = undefined as ((minValue: number | null, maxValue: number | null) => void) | undefined
 	}: {
 		minValue?: number | null;
@@ -38,6 +41,9 @@
 		required?: boolean;
 		size?: FormFieldSizeOptions;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		disabled?: boolean;
 		onChange?: ((minValue: number | null, maxValue: number | null) => void) | undefined;
 	} = $props();
 
@@ -104,12 +110,14 @@
 		if (!isAllowed) return e.preventDefault();
 		if (isDecimal && !allowDecimals) return e.preventDefault();
 	};
+
+	let hasError = $derived(!!feedback?.isError);
 </script>
 
-<FormField {size} {label} id={minId} {required}>
+<FormField {size} {label} id={minId} {required} {disabled} {helperText} {feedback}>
 	<div class="number-range-inputs">
 		<div class="input-group">
-			<div class="input">
+			<div class="input {disabled ? 'disabled' : ''}" class:error={hasError}>
 				{#if prefix}
 					<span class="prefix">{prefix}</span>
 				{/if}
@@ -125,6 +133,7 @@
 					oninput={(e) => onInput(e, true)}
 					onkeypress={(e) => onKeyPress(e, true)}
 					{required}
+					{disabled}
 				/>
 				{#if suffix}
 					<span class="suffix">{suffix}</span>
@@ -132,7 +141,7 @@
 			</div>
 		</div>
 		<div class="input-group">
-			<div class="input">
+			<div class="input {disabled ? 'disabled' : ''}" class:error={hasError}>
 				{#if prefix}
 					<span class="prefix">{prefix}</span>
 				{/if}
@@ -148,6 +157,7 @@
 					oninput={(e) => onInput(e, false)}
 					onkeypress={(e) => onKeyPress(e, false)}
 					{required}
+					{disabled}
 				/>
 				{#if suffix}
 					<span class="suffix">{suffix}</span>
@@ -185,6 +195,12 @@
   user-select: none;
   white-space: nowrap;
 }
+.input.disabled {
+  opacity: 0.5;
+}
+.input.error {
+  border-color: var(--color-error, #dc3545);
+}
 .input input {
   background-color: transparent;
   border: none;

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

@@ -1,3 +1,4 @@
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 import type { FormFieldSizeOptions } from '../../types/form.js';
 type $$ComponentProps = {
     minValue?: number | null;
@@ -14,6 +15,9 @@ type $$ComponentProps = {
     required?: boolean;
     size?: FormFieldSizeOptions;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    disabled?: boolean;
     onChange?: ((minValue: number | null, maxValue: number | null) => void) | undefined;
 };
 declare const NumberRangeBox: import("svelte").Component<$$ComponentProps, {}, "minValue" | "maxValue">;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
-	import CheckIcon from '../../icons/check-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 
 	type RadioValue = string | number | boolean | undefined | null;
 
@@ -9,12 +9,14 @@
 		value = undefined as RadioValue,
 		group = $bindable(undefined as string | undefined),
 		disabled = false,
+		ariaLabel,
 		children = undefined,
 		onChange = undefined
 	}: {
 		value?: RadioValue;
 		group?: string | undefined;
 		disabled?: boolean;
+		ariaLabel?: string;
 		children?: Snippet;
 		onChange?: ((value: string) => void) | undefined;
 	} = $props();
@@ -29,12 +31,13 @@
 		{value}
 		{disabled}
 		{id}
+		aria-label={ariaLabel}
 		onchange={() => onChange?.(String(value || ''))}
 	/>
-	<span class="checkbox">
-		<span class="checkmark"><CheckIcon /></span>
+	<span class="radio-circle">
+		<span class="radio-dot"></span>
 	</span>
-	{#if children}
+	{#if !ariaLabel && children}
 		<div class="text">
 			{@render children?.()}
 		</div>
@@ -49,43 +52,35 @@
   font-size: 1rem;
   cursor: pointer;
 }
-label .checkbox {
+label .radio-circle {
   position: relative;
   width: 1.2rem;
   height: 1.2rem;
-  border-radius: 0.6rem;
+  border-radius: 50%;
   border: 1px solid var(--form-input-border, black);
   background-color: var(--form-input-bg, white);
-  color: var(--form-input-fg, black);
-  font-size: 0.875rem;
-  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;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
   user-select: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-top: 0.1rem;
 }
-label .checkbox .checkmark {
-  display: block;
-  width: 0;
-  height: 0;
-  line-height: 100%;
-  color: var(--form-input-selected-fg, white);
-  fill: var(--form-input-selected-bg, #3182ce);
-  stroke: var(--form-input-selected-fg, white);
-  transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
+label .radio-circle .radio-dot {
+  display: none;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--form-input-selected-bg, #3182ce);
+  transition: opacity 0.2s ease-in-out;
 }
 label input {
   width: 0;
   height: 0;
   position: absolute;
 }
-label input:checked + .checkbox {
-  background-color: var(--form-input-selected-bg, #3182ce);
+label input:checked + .radio-circle {
+  border-color: var(--form-input-selected-bg, #3182ce);
 }
-label input:checked + .checkbox .checkmark {
-  width: 100%;
-  height: 100%;
+label input:checked + .radio-circle .radio-dot {
+  display: block;
 }</style>

package/dist/forms/radio-group/radio-box.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     value?: RadioValue;
     group?: string | undefined;
     disabled?: boolean;
+    ariaLabel?: string;
     children?: Snippet;
     onChange?: ((value: string) => void) | undefined;
 };

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

@@ -3,7 +3,7 @@
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import { animateShake, animateScaleIn } from '../../helpers/animations.js';
 	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
-	import CheckIcon from '../../icons/check-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 	import type { AllowedTextInputTypes, FormFieldSizeOptions } from '../../types/form.js';
 
 	const id = uniqueId();
@@ -186,7 +186,7 @@
 			</div>
 		{:else if hasSuccess}
 			<div class="success-indicator" bind:this={successIconElement}>
-				<CheckIcon />
+				<Icon type="check" size="sm" />
 			</div>
 		{/if}
 		{#if suffix}

package/dist/generic/email/email.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import EnvelopeIcon from '../../icons/envelope-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 
 	let { value }: { value: string } = $props();
 </script>
 
 <a href="mailto:{value}" title="Email Address">
 	<span class="icon">
-		<EnvelopeIcon />
+		<Icon type="envelope" size="sm" />
 	</span>
 	<span class="address">
 		{value}

package/dist/generic/menu/menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import CheckIcon from '../../icons/check-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 	import type { FormFieldSizeOptions, MenuOption } from '../../index.js';
 	import FlexItem from '../../layout/flex-item.svelte';
 	import FlexRow from '../../layout/flex-row.svelte';
@@ -123,7 +123,7 @@
 							</FlexItem>
 							<FlexItem>
 								{#if item.value === value}
-									<span class="check" aria-hidden="true"><CheckIcon /></span>
+									<span class="check" aria-hidden="true"><Icon type="check" size="sm" /></span>
 								{/if}
 							</FlexItem>
 						</FlexRow>
@@ -156,7 +156,7 @@
 						</FlexItem>
 						<FlexItem>
 							{#if item.value === value}
-								<span class="check" aria-hidden="true"><CheckIcon /></span>
+								<span class="check" aria-hidden="true"><Icon type="check" size="sm" /></span>
 							{/if}
 						</FlexItem>
 					</FlexRow>

package/dist/generic/phone/phone.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { capitalize } from '../../helpers/capitalize.js';
-	import MobilePhoneIcon from '../../icons/mobile-phone-icon.svelte';
-	import PhoneIcon from '../../icons/phone-icon.svelte';
+	import Icon from '../../icons/icon.svelte';
 
 	let {
 		value,
@@ -33,9 +32,9 @@
 <a href="{protocol}:{phoneNumberDigits}" title={capitalize(type)}>
 	<span class="icon">
 		{#if isCellPhone}
-			<MobilePhoneIcon />
+			<Icon type="mobile-phone" size="sm" />
 		{:else}
-			<PhoneIcon />
+			<Icon type="phone" size="sm" />
 		{/if}
 	</span>
 	<span class="number">

package/dist/icons/icon-data.d.ts

@@ -0,0 +1,28 @@
+import type { IconType } from './types.js';
+/**
+ * SVG path element data structure
+ */
+export interface IconPathData {
+    d?: string;
+    stroke?: string;
+    'stroke-linecap'?: string;
+    'stroke-linejoin'?: string;
+    'stroke-width'?: string | number;
+    fill?: string;
+}
+/**
+ * Icon data structure
+ */
+export interface IconData {
+    viewBox: string;
+    paths: IconPathData[];
+    fill: 'none' | 'currentColor';
+}
+/**
+ * Registry of all icon data
+ */
+export declare const iconRegistry: Record<IconType, IconData>;
+/**
+ * Get icon data for a given icon type
+ */
+export declare function getIconData(type: IconType): IconData;