sveltacular 1.0.7 → 1.0.10

package/README.md

@@ -75,7 +75,7 @@ npm i sveltacular
 - **SwitchBox** - Toggle switch component
 - **BoolBox** - Boolean input component
 - **MoneyBox** - Currency input with formatting
-- **TagInputBox** - Tag input with chip display
+- **TagBox** - Tag input with chip display
 - **UrlBox** - URL input with validation
 - **InfoBox** - Information display box
 - **NewOrExistingCombo** - Combo component for new/existing selection

package/dist/forms/index.d.ts

@@ -11,7 +11,7 @@ export { default as NumberRangeBox } from './number-range-box/number-range-box.s
 export { default as PhoneBox } from './phone-box/phone-box.svelte';
 export { default as Slider } from './slider/slider.svelte';
 export { default as SwitchBox } from './switch-box/switch-box.svelte';
-export { default as TagInputBox } from './tag-input-box/tag-input-box.svelte';
+export { default as TagBox } from './tag-box/tag-box.svelte';
 export { default as TextArea } from './text-area/text-area.svelte';
 export { default as TextBox } from './text-box/text-box.svelte';
 export { default as TimeBox } from './time-box/time-box.svelte';

package/dist/forms/index.js

@@ -12,7 +12,7 @@ export { default as NumberRangeBox } from './number-range-box/number-range-box.s
 export { default as PhoneBox } from './phone-box/phone-box.svelte';
 export { default as Slider } from './slider/slider.svelte';
 export { default as SwitchBox } from './switch-box/switch-box.svelte';
-export { default as TagInputBox } from './tag-input-box/tag-input-box.svelte';
+export { default as TagBox } from './tag-box/tag-box.svelte';
 export { default as TextArea } from './text-area/text-area.svelte';
 export { default as TextBox } from './text-box/text-box.svelte';
 export { default as TimeBox } from './time-box/time-box.svelte';

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

@@ -32,7 +32,7 @@
 <FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
 	<div>
 		{#each items as item}
-			<RadioBox bind:group {disabled} value={item.value} onChange={onChange}>{item.name}</RadioBox>
+			<RadioBox bind:group {disabled} value={item.value} {onChange}>{item.name}</RadioBox>
 		{/each}
 	</div>
 </FormField>

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

@@ -0,0 +1,225 @@
+<script lang="ts">
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
+	import Chip from '../../generic/chip/chip.svelte';
+	import type { FormFieldSizeOptions } from '../../types/form.js';
+
+	const id = uniqueId();
+	const datalistId = uniqueId();
+
+	let {
+		value = $bindable([] as string[]),
+		placeholder = 'Add a tag...',
+		required = false,
+		disabled = false,
+		autocomplete = [] as string[],
+		separators = [',', ';'] as string[],
+		size = 'full' as FormFieldSizeOptions,
+		label = undefined as string | undefined,
+		helperText = undefined as string | undefined,
+		feedback = undefined as FormFieldFeedback | undefined,
+		showAddButton = false,
+		onChange = undefined as ((value: string[]) => void) | undefined
+	}: {
+		value?: string[];
+		placeholder?: string;
+		required?: boolean;
+		disabled?: boolean;
+		autocomplete?: string[];
+		separators?: string[];
+		size?: FormFieldSizeOptions;
+		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		showAddButton?: boolean;
+		onChange?: ((value: string[]) => void) | undefined;
+	} = $props();
+
+	let newTag = $state('');
+
+	function addTag(tagToAdd?: string) {
+		const tag = tagToAdd || newTag.trim();
+		if (tag && !value.includes(tag)) {
+			value = [...value, tag];
+			newTag = '';
+			onChange?.(value);
+		}
+	}
+
+	function removeTag(tagToRemove: string) {
+		value = value.filter((tag) => tag !== tagToRemove);
+		onChange?.(value);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			addTag();
+		} else if (event.key === 'Backspace' && newTag === '' && value.length > 0) {
+			removeTag(value[value.length - 1]);
+		}
+	}
+
+	function handleInput(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const inputValue = input.value;
+
+		// Check if the last character is a separator
+		if (inputValue.length > 0) {
+			const lastChar = inputValue[inputValue.length - 1];
+			if (separators.includes(lastChar)) {
+				// Extract the tag before the separator
+				const tagBeforeSeparator = inputValue.slice(0, -1).trim();
+				if (tagBeforeSeparator) {
+					// Prevent the separator from being added
+					newTag = tagBeforeSeparator;
+					// Add the tag
+					addTag(tagBeforeSeparator);
+				} else {
+					// If there's no text before the separator, just clear it
+					newTag = '';
+				}
+			}
+		}
+	}
+</script>
+
+<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
+	<div class="tag-box">
+		<div class="input-container">
+			<div class="input {disabled ? 'disabled' : 'enabled'}">
+				<input
+					{id}
+					type="text"
+					bind:value={newTag}
+					{placeholder}
+					onkeydown={handleKeydown}
+					oninput={handleInput}
+					{disabled}
+					{required}
+					list={autocomplete.length > 0 ? datalistId : undefined}
+					aria-label="Tag input"
+				/>
+				{#if autocomplete.length > 0}
+					<datalist id={datalistId}>
+						{#each autocomplete as option}
+							<option value={option}></option>
+						{/each}
+					</datalist>
+				{/if}
+			</div>
+			{#if showAddButton}
+				<button
+					type="button"
+					class="add-button"
+					onclick={() => addTag()}
+					disabled={disabled || !newTag.trim()}
+					aria-label="Add tag"
+				>
+					Add
+				</button>
+			{/if}
+		</div>
+
+		{#if value.length > 0}
+			<div class="tags">
+				{#each value as tag}
+					<Chip label={tag} removable={true} onRemove={() => removeTag(tag)} />
+				{/each}
+			</div>
+		{/if}
+	</div>
+</FormField>
+
+<style>.tag-box {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  width: 100%;
+}
+.tag-box .input-container {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: stretch;
+}
+.tag-box .input-container .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;
+  flex: 1;
+}
+.tag-box .input-container .input.disabled {
+  opacity: 0.5;
+}
+.tag-box .input-container .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);
+  padding-right: var(--spacing-base);
+}
+.tag-box .input-container .input input:focus {
+  outline: none;
+}
+.tag-box .input-container .input input:focus-visible {
+  outline: 2px solid var(--focus-ring, #007bff);
+  outline-offset: 2px;
+}
+.tag-box .input-container .input input:disabled {
+  cursor: not-allowed;
+}
+.tag-box .input-container .input input::placeholder {
+  color: var(--form-input-placeholder);
+}
+.tag-box .input-container .add-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--spacing-base);
+  background-color: var(--button-primary-bg);
+  color: var(--button-primary-fg);
+  border: var(--border-thin) solid var(--button-primary-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-sm);
+  font-weight: 500;
+  cursor: pointer;
+  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);
+  white-space: nowrap;
+  height: 100%;
+  line-height: 2rem;
+}
+.tag-box .input-container .add-button:hover:not(:disabled) {
+  background-color: var(--button-primary-hover-bg);
+  color: var(--button-primary-hover-fg);
+}
+.tag-box .input-container .add-button:disabled {
+  background-color: var(--gray-400);
+  border-color: var(--gray-400);
+  color: var(--gray-600);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.tag-box .input-container .add-button:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.tag-box .tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+}</style>

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

@@ -0,0 +1,19 @@
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
+import type { FormFieldSizeOptions } from '../../types/form.js';
+type $$ComponentProps = {
+    value?: string[];
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    autocomplete?: string[];
+    separators?: string[];
+    size?: FormFieldSizeOptions;
+    label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    showAddButton?: boolean;
+    onChange?: ((value: string[]) => void) | undefined;
+};
+declare const TagBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TagBox = ReturnType<typeof TagBox>;
+export default TagBox;

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

@@ -98,7 +98,6 @@
 		{readonly}
 		{maxlength}
 		{minlength}
-		{pattern}
 		aria-busy={isLoading}
 		data-auto-resize={autoResize}
 		oninput={handleAutoResize}

package/dist/generic/avatar/avatar.svelte

@@ -79,14 +79,3 @@
   width: 100%;
   height: 100%;
 }</style>
-
-
-
-
-
-
-
-
-
-
-

package/dist/generic/badge/badge.svelte

@@ -79,4 +79,3 @@
   background-color: var(--badge-warning-bg);
   color: var(--badge-warning-fg);
 }</style>
-

package/dist/generic/chip/chip.svelte

@@ -19,9 +19,7 @@
 <div class="chip {size} {variant}">
 	<span class="label">{label}</span>
 	{#if removable}
-		<button type="button" class="remove" onclick={onRemove} aria-label="Remove {label}">
-			×
-		</button>
+		<button type="button" class="remove" onclick={onRemove} aria-label="Remove {label}"> × </button>
 	{/if}
 </div>
 
@@ -83,14 +81,3 @@
   background-color: var(--chip-negative-bg, #ffcdd2);
   color: var(--chip-negative-fg, #c62828);
 }</style>
-
-
-
-
-
-
-
-
-
-
-

package/dist/generic/header/header.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import FlexRow from '../../layout/flex-row.svelte';
 	import type { SectionLevel } from '../../types/generic.js';
 	import Headline from '../../typography/headline.svelte';
 	import Subtitle from '../../typography/subtitle.svelte';
 	import { getContext } from 'svelte';
+	import Paragraph from '../../typography/paragraph.svelte';
 
 	const section: { title: string; level: SectionLevel } | undefined = getContext('section');
 
@@ -12,38 +12,46 @@
 		level = (section?.level || 2) as SectionLevel,
 		title = section?.title || '',
 		subtitle = '',
+		description = '',
 		underline = false,
 		children = undefined
 	}: {
 		level?: SectionLevel;
-		title?: string;
-		subtitle?: string;
+		title?: string | undefined;
+		subtitle?: string | undefined;
+		description?: string | undefined;
 		underline?: boolean;
-		children?: Snippet;
+		children?: Snippet | undefined;
 	} = $props();
 </script>
 
 <header class:underline data-level={level}>
-	<FlexRow>
-		<hgroup>
-			<Headline {level}>{title}</Headline>
-			{#if subtitle}
-				<Subtitle {level}>{subtitle}</Subtitle>
-			{/if}
-		</hgroup>
-		<div>
-			{#if children}
-				{@render children?.()}
-			{/if}
-		</div>
-	</FlexRow>
+	<hgroup>
+		<Headline {level}>{title}</Headline>
+		{#if subtitle}
+			<Subtitle {level}>{subtitle}</Subtitle>
+		{/if}
+		{#if description}
+			<Paragraph>{description}</Paragraph>
+		{/if}
+	</hgroup>
+	<div>
+		{#if children}
+			{@render children?.()}
+		{/if}
+	</div>
 </header>
 
 <style>header {
-  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: var(--spacing-base, 1rem);
+  margin-bottom: var(--spacing-base, 1rem);
   font-family: var(--base-headline-font-family, sans-serif);
 }
 header.underline {
-  padding-bottom: 0.5rem;
-  border-bottom: solid 1px #ccc;
+  padding-bottom: var(--spacing-xs, 0.25rem);
+  border-bottom: solid var(--border-thin, 1px) var(--divider-color, rgba(127, 127, 127, 0.5));
 }</style>

package/dist/generic/header/header.svelte.d.ts

@@ -2,10 +2,11 @@ import type { Snippet } from 'svelte';
 import type { SectionLevel } from '../../types/generic.js';
 type $$ComponentProps = {
     level?: SectionLevel;
-    title?: string;
-    subtitle?: string;
+    title?: string | undefined;
+    subtitle?: string | undefined;
+    description?: string | undefined;
     underline?: boolean;
-    children?: Snippet;
+    children?: Snippet | undefined;
 };
 declare const Header: import("svelte").Component<$$ComponentProps, {}, "">;
 type Header = ReturnType<typeof Header>;

package/dist/generic/rating/rating.svelte

@@ -59,10 +59,10 @@
 .rating .star.filled {
   color: var(--rating-filled-color, #ffc107);
 }
-.rating .star:hover:not([readonly]) {
+.rating .star:hover:not(:disabled) {
   color: var(--rating-hover-color, #ffb300);
 }
-.rating .star[readonly] {
+.rating .star:disabled {
   cursor: default;
 }
 .rating .star:focus {
@@ -82,4 +82,3 @@
 .rating.xl .star {
   font-size: 2.5rem;
 }</style>
-

package/dist/generic/section/section.svelte

@@ -21,9 +21,13 @@
 		children: Snippet;
 	} = $props();
 
-	setContext('section', { 
-		get level() { return level; },
-		get title() { return title; }
+	setContext('section', {
+		get level() {
+			return level;
+		},
+		get title() {
+			return title;
+		}
 	});
 </script>
 

package/dist/generic/spinner/spinner.svelte

@@ -61,4 +61,3 @@
     transform: rotate(360deg);
   }
 }</style>
-

package/dist/generic/theme-provider/theme-provider-demo.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	/**
 	 * Theme Provider Demo Component
-	 * 
+	 *
 	 * Demonstrates theme switching functionality with example components.
 	 */
 	import ThemeProvider from './theme-provider.svelte';
@@ -29,43 +29,41 @@
 		<Card>
 			<div style="padding: 1.5rem; margin-bottom: 2rem;">
 				<h2 style="margin-top: 0; margin-bottom: 1rem;">Theme Controls</h2>
-				
+
 				<div style="display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;">
-					<Button 
+					<Button
 						variant={theme.current === 'light' ? 'primary' : 'outline'}
 						onClick={() => theme.set('light')}
 					>
 						☀️ Light
 					</Button>
-					<Button 
+					<Button
 						variant={theme.current === 'dark' ? 'primary' : 'outline'}
 						onClick={() => theme.set('dark')}
 					>
 						🌙 Dark
 					</Button>
-					<Button 
+					<Button
 						variant={theme.current === 'system' ? 'primary' : 'outline'}
 						onClick={() => theme.set('system')}
 					>
 						💻 System
 					</Button>
-					<Button 
-						variant="secondary"
-						onClick={() => theme.toggle()}
-					>
-						🔄 Toggle
-					</Button>
+					<Button variant="secondary" onClick={() => theme.toggle()}>🔄 Toggle</Button>
 				</div>
 
 				<div style="display: flex; gap: 1rem; font-size: 0.875rem; color: var(--base-accent-fg);">
 					<div>
-						<strong>Current:</strong> {theme.current}
+						<strong>Current:</strong>
+						{theme.current}
 					</div>
 					<div>
-						<strong>Resolved:</strong> {theme.resolved}
+						<strong>Resolved:</strong>
+						{theme.resolved}
 					</div>
 					<div>
-						<strong>Is Dark:</strong> {theme.isDark}
+						<strong>Is Dark:</strong>
+						{theme.isDark}
 					</div>
 				</div>
 			</div>
@@ -108,18 +106,10 @@
 				<div style="padding: 1.5rem;">
 					<h4 style="margin-top: 0; margin-bottom: 1rem;">Notices</h4>
 					<div style="display: grid; gap: 0.75rem;">
-						<Notice variant="info">
-							This is an informational message.
-						</Notice>
-					<Notice variant="success">
-						Operation completed successfully!
-					</Notice>
-					<Notice variant="attention">
-						Please review your changes carefully.
-					</Notice>
-					<Notice variant="error">
-						An error occurred while processing your request.
-					</Notice>
+						<Notice variant="info">This is an informational message.</Notice>
+						<Notice variant="success">Operation completed successfully!</Notice>
+						<Notice variant="attention">Please review your changes carefully.</Notice>
+						<Notice variant="error">An error occurred while processing your request.</Notice>
 					</div>
 				</div>
 			</Card>
@@ -129,28 +119,13 @@
 				<div style="padding: 1.5rem;">
 					<h4 style="margin-top: 0; margin-bottom: 1rem;">Form Inputs</h4>
 					<div style="display: grid; gap: 1rem; max-width: 500px;">
-						<TextBox 
-							bind:value={textValue}
-							label="Text Input"
-							placeholder="Enter some text..."
-						/>
-						
-						<TextArea 
-							bind:value={textAreaValue}
-							label="Text Area"
-							rows={4}
-						/>
-						
-					<CheckBox 
-						bind:isChecked={checked}
-						label="Check Box Option"
-					/>
-					
-					<SwitchBox 
-						bind:checked={switchOn}
-					>
-						Switch Option
-					</SwitchBox>
+						<TextBox bind:value={textValue} label="Text Input" placeholder="Enter some text..." />
+
+						<TextArea bind:value={textAreaValue} label="Text Area" rows={4} />
+
+						<CheckBox bind:isChecked={checked} label="Check Box Option" />
+
+						<SwitchBox bind:checked={switchOn}>Switch Option</SwitchBox>
 					</div>
 				</div>
 			</Card>
@@ -159,24 +134,23 @@
 			<Card>
 				<div style="padding: 1.5rem;">
 					<h4 style="margin-top: 0; margin-bottom: 1rem;">Typography</h4>
-				<p style="margin-bottom: 0.5rem;">
-					This is regular text using the base foreground color.
-				</p>
-				<p style="margin-bottom: 0.5rem;">
-					<button
-						type="button"
-						style="background: none; border: none; padding: 0; color: var(--base-link-fg); text-decoration: underline; cursor: pointer; font: inherit;"
-						onclick={() => {}}
-					>
-						This is a link
-					</button> with proper link styling.
-				</p>
-				<p style="margin-bottom: 0; color: var(--base-accent-fg); font-size: 0.875rem;">
-					This is accent text using a muted color.
-				</p>
+					<p style="margin-bottom: 0.5rem;">
+						This is regular text using the base foreground color.
+					</p>
+					<p style="margin-bottom: 0.5rem;">
+						<button
+							type="button"
+							style="background: none; border: none; padding: 0; color: var(--base-link-fg); text-decoration: underline; cursor: pointer; font: inherit;"
+							onclick={() => {}}
+						>
+							This is a link
+						</button> with proper link styling.
+					</p>
+					<p style="margin-bottom: 0; color: var(--base-accent-fg); font-size: 0.875rem;">
+						This is accent text using a muted color.
+					</p>
 				</div>
 			</Card>
 		</div>
 	</div>
 </ThemeProvider>
-