ui-svelte 0.2.14 → 0.2.16

package/dist/charts/css/area-chart.css

@@ -212,31 +212,31 @@
 	}
 
 	.area-chart-point.is-primary {
-		@apply fill-primary stroke-on-primary;
+		@apply fill-primary stroke-muted;
 	}
 
 	.area-chart-point.is-secondary {
-		@apply fill-secondary stroke-on-secondary;
+		@apply fill-secondary stroke-muted;
 	}
 
 	.area-chart-point.is-success {
-		@apply fill-success stroke-on-success;
+		@apply fill-success stroke-muted;
 	}
 
 	.area-chart-point.is-info {
-		@apply fill-info stroke-on-info;
+		@apply fill-info stroke-muted;
 	}
 
 	.area-chart-point.is-warning {
-		@apply fill-warning stroke-on-warning;
+		@apply fill-warning stroke-muted;
 	}
 
 	.area-chart-point.is-danger {
-		@apply fill-danger stroke-on-danger;
+		@apply fill-danger stroke-muted;
 	}
 
 	.area-chart-point.is-muted {
-		@apply fill-muted stroke-on-muted;
+		@apply fill-muted stroke-muted;
 	}
 
 	.area-chart-tooltip {

package/dist/charts/css/line-chart.css

@@ -129,31 +129,31 @@
 	}
 
 	.line-chart-point.is-primary {
-		@apply fill-primary stroke-on-primary;
+		@apply fill-primary stroke-muted;
 	}
 
 	.line-chart-point.is-secondary {
-		@apply fill-secondary stroke-on-secondary;
+		@apply fill-secondary stroke-muted;
 	}
 
 	.line-chart-point.is-success {
-		@apply fill-success stroke-on-success;
+		@apply fill-success stroke-muted;
 	}
 
 	.line-chart-point.is-info {
-		@apply fill-info stroke-on-info;
+		@apply fill-info stroke-muted;
 	}
 
 	.line-chart-point.is-warning {
-		@apply fill-warning stroke-on-warning;
+		@apply fill-warning stroke-muted;
 	}
 
 	.line-chart-point.is-danger {
-		@apply fill-danger stroke-on-danger;
+		@apply fill-danger stroke-muted;
 	}
 
 	.line-chart-point.is-muted {
-		@apply fill-muted stroke-on-muted;
+		@apply fill-muted stroke-muted;
 	}
 
 	.line-chart-tooltip {

package/dist/charts/css/pie-chart.css

@@ -74,31 +74,31 @@
 	}
 
 	.pie-chart-slice.is-primary {
-		@apply fill-primary stroke-on-primary;
+		@apply fill-primary stroke-muted;
 	}
 
 	.pie-chart-slice.is-secondary {
-		@apply fill-secondary stroke-on-secondary;
+		@apply fill-secondary stroke-muted;
 	}
 
 	.pie-chart-slice.is-success {
-		@apply fill-success stroke-on-success;
+		@apply fill-success stroke-muted;
 	}
 
 	.pie-chart-slice.is-info {
-		@apply fill-info stroke-on-info;
+		@apply fill-info stroke-muted;
 	}
 
 	.pie-chart-slice.is-warning {
-		@apply fill-warning stroke-on-warning;
+		@apply fill-warning stroke-muted;
 	}
 
 	.pie-chart-slice.is-danger {
-		@apply fill-danger stroke-on-danger;
+		@apply fill-danger stroke-muted;
 	}
 
 	.pie-chart-slice.is-muted {
-		@apply fill-muted stroke-on-muted;
+		@apply fill-muted stroke-muted;
 	}
 
 	.pie-chart-slice-label {

package/dist/control/Audio.svelte

@@ -17,7 +17,7 @@
 		class: className,
 		src,
 		color = 'primary',
-		variant = 'soft',
+		variant = 'solid',
 		avatarSrc,
 		subtitle
 	}: Props = $props();

package/dist/control/Record.svelte

@@ -40,7 +40,7 @@
 		class: className,
 		name,
 		color = 'primary',
-		variant = 'soft',
+		variant = 'solid',
 		url,
 		headers,
 		onRecordingComplete

package/dist/control/ToggleGroup.svelte

@@ -28,7 +28,7 @@
 		value = $bindable(items[0]?.id ?? ''),
 		onchange,
 		color = 'muted',
-		variant = 'soft',
+		variant = 'solid',
 		size = 'md',
 		class: className,
 		isWide,

package/dist/control/ToggleTheme.svelte

@@ -10,7 +10,7 @@
 		class?: string;
 	};
 
-	let { color = 'primary', variant = 'ghost', size = 'md', class: className }: Props = $props();
+	let { color = 'primary', variant = 'solid', size = 'md', class: className }: Props = $props();
 </script>
 
 <IconButton

package/dist/display/Accordion.svelte

@@ -36,7 +36,7 @@
 
 	const {
 		items = [],
-		variant = 'ghost',
+		variant = 'solid',
 		color = 'background',
 		multiple = false,
 		rootClass,

package/dist/display/Card.svelte

@@ -33,7 +33,7 @@
 		rootClass,
 		cover,
 		color = 'surface',
-		variant = 'outlined',
+		variant = 'solid',
 		headerClass,
 		bodyClass,
 		footerClass,

package/dist/display/Chip.svelte

@@ -22,8 +22,8 @@
 	const {
 		children,
 		onclose,
-		color = 'primary',
-		variant = 'solid',
+		color = 'muted',
+		variant = 'soft',
 		size = 'md',
 		class: className,
 		startIcon,

package/dist/display/Collapsible.svelte

@@ -33,7 +33,7 @@
 		content,
 		disabled = false,
 		defaultOpen = false,
-		variant = 'ghost',
+		variant = 'solid',
 		color = 'background',
 		rootClass,
 		headerClass,

package/dist/display/Item.svelte

@@ -11,16 +11,7 @@
 		description?: string;
 		icon?: IconData;
 		src?: string;
-		color?:
-			| 'primary'
-			| 'secondary'
-			| 'muted'
-			| 'success'
-			| 'info'
-			| 'warning'
-			| 'danger'
-			| 'surface'
-			| 'default';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
 		size?: 'sm' | 'md' | 'lg';
 		status?: 'online' | 'offline' | 'busy' | 'away';
@@ -44,7 +35,7 @@
 		description,
 		src,
 		icon,
-		color = 'default',
+		color = 'muted',
 		variant = 'ghost',
 		size = 'md',
 		status,
@@ -69,9 +60,7 @@
 		success: 'is-success',
 		info: 'is-info',
 		warning: 'is-warning',
-		danger: 'is-danger',
-		surface: 'is-surface',
-		default: 'is-default'
+		danger: 'is-danger'
 	};
 
 	const variantClasses = {

package/dist/display/Item.svelte.d.ts

@@ -6,7 +6,7 @@ type Props = {
     description?: string;
     icon?: IconData;
     src?: string;
-    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
     variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
     size?: 'sm' | 'md' | 'lg';
     status?: 'online' | 'offline' | 'busy' | 'away';

package/dist/display/Section.svelte

@@ -30,7 +30,7 @@
 		overlayClass,
 		cover,
 		color = 'background',
-		variant = 'ghost',
+		variant = 'solid',
 		children,
 		isBoxed
 	}: Props = $props();

package/dist/display/css/item.css

@@ -117,20 +117,20 @@
 		&.is-primary.is-ghost,
 		&.is-primary.is-soft {
 			&.is-active {
-				@apply bg-primary/20 text-primary;
+				@apply bg-primary text-on-primary;
 			}
 			&.is-interactive {
-				@apply hover:bg-primary/20 hover:text-primary;
+				@apply hover:bg-primary hover:text-on-primary;
 			}
 		}
 
 		&.is-secondary.is-ghost,
 		&.is-secondary.is-soft {
 			&.is-active {
-				@apply bg-secondary/20 text-secondary;
+				@apply bg-secondary text-on-secondary;
 			}
 			&.is-interactive {
-				@apply hover:bg-secondary/20 hover:text-secondary;
+				@apply hover:bg-secondary hover:text-on-secondary;
 			}
 		}
 
@@ -147,40 +147,40 @@
 		&.is-success.is-ghost,
 		&.is-success.is-soft {
 			&.is-active {
-				@apply bg-success/20 text-success;
+				@apply bg-success text-on-success;
 			}
 			&.is-interactive {
-				@apply hover:bg-success/20 hover:text-success;
+				@apply hover:bg-success hover:text-on-success;
 			}
 		}
 
 		&.is-info.is-ghost,
 		&.is-info.is-soft {
 			&.is-active {
-				@apply bg-info/20 text-info;
+				@apply bg-info text-on-info;
 			}
 			&.is-interactive {
-				@apply hover:bg-info/20 hover:text-info;
+				@apply hover:bg-info hover:text-on-info;
 			}
 		}
 
 		&.is-warning.is-ghost,
 		&.is-warning.is-soft {
 			&.is-active {
-				@apply bg-warning/20 text-warning;
+				@apply bg-warning text-on-warning;
 			}
 			&.is-interactive {
-				@apply hover:bg-warning/20 hover:text-warning;
+				@apply hover:bg-warning hover:text-on-warning;
 			}
 		}
 
 		&.is-danger.is-ghost,
 		&.is-danger.is-soft {
 			&.is-active {
-				@apply bg-danger/20 text-danger;
+				@apply bg-danger text-on-danger;
 			}
 			&.is-interactive {
-				@apply hover:bg-danger/20 hover:text-danger;
+				@apply hover:bg-danger hover:text-on-danger;
 			}
 		}
 	}

package/dist/form/ColorField.svelte

@@ -46,7 +46,7 @@
 		showCmyk = false,
 		showOklch = false,
 		variant = 'outlined',
-		color = 'muted',
+		color = 'primary',
 		size = 'md',
 		name,
 		rootClass,

package/dist/form/ComboBox.svelte

@@ -47,7 +47,7 @@
 		loadingMoreText = 'Loading more...',
 		onchange,
 		variant = 'outlined',
-		color = 'muted',
+		color = 'primary',
 		size = 'md',
 		name,
 		label,

package/dist/form/CsvField.svelte

@@ -25,8 +25,8 @@
 		requiredColumns = [],
 		onMappingComplete = () => {},
 		acceptMultipleFiles = false,
-		color = 'muted',
-		variant = 'soft',
+		color = 'primary',
+		variant = 'solid',
 		size = 'md',
 		class: className,
 		buttonText = 'Select CSV file',

package/dist/form/DateField.svelte

@@ -26,7 +26,7 @@
 		placeholder = 'Select an option',
 		onchange,
 		variant = 'outlined',
-		color = 'muted',
+		color = 'primary',
 		size = 'md',
 		name,
 		label,

package/dist/form/DateRange.svelte

@@ -29,7 +29,7 @@
 		placeholder = 'Select date range',
 		onchange,
 		variant = 'outlined',
-		color = 'muted',
+		color = 'primary',
 		size = 'md',
 		name,
 		label,

package/dist/form/DragDrop.svelte

@@ -44,7 +44,7 @@
 		groupClass,
 		itemClass,
 		color = 'muted',
-		variant = 'soft',
+		variant = 'solid',
 		size = 'md',
 		direction = 'vertical',
 		isDisabled = false,

package/dist/form/Dropzone.svelte

@@ -49,8 +49,8 @@
 		class: className,
 		controlClass,
 		icon,
-		color = 'background',
-		variant = 'outlined',
+		color = 'primary',
+		variant = 'solid',
 		size = 'md',
 		name,
 		label,

package/dist/form/Editor.svelte

@@ -191,7 +191,7 @@
 		onchange,
 		oninput,
 		variant = 'outlined',
-		color = 'muted',
+		color = 'primary',
 		size = 'md',
 		name,
 		label,

package/dist/form/ImageCropper.svelte

@@ -47,8 +47,8 @@
 		icon = ImageAddRegularIcon,
 		size = 'md',
 		shape = 'circle',
-		color = 'muted',
-		variant = 'soft',
+		color = 'primary',
+		variant = 'solid',
 		disabled = false,
 		onCrop,
 		onChange,

package/dist/form/PasswordField.svelte

@@ -37,7 +37,7 @@
 		onchange,
 		oninput,
 		variant = 'outlined',
-		color = 'muted',
+		color = 'primary',
 		size = 'md',
 		name,
 		label,

package/dist/form/PhoneField.svelte

@@ -39,7 +39,7 @@
 		placeholder = 'Enter phone number',
 		onchange,
 		variant = 'outlined',
-		color = 'muted',
+		color = 'primary',
 		size = 'md',
 		name,
 		dialCodeName = 'dialCode',

package/dist/form/PinField.svelte

@@ -19,7 +19,7 @@
 	let {
 		class: className,
 		variant = 'outlined',
-		color = 'muted',
+		color = 'primary',
 		size = 'md',
 		label,
 		name,

package/dist/form/Select.svelte

@@ -37,7 +37,7 @@
 		placeholder = 'Select an option',
 		onchange,
 		variant = 'outlined',
-		color = 'muted',
+		color = 'primary',
 		size = 'md',
 		name,
 		label,
@@ -342,6 +342,7 @@
 						isActive={value === item.id}
 						isFocused={focusedIndex === index}
 						size="sm"
+						variant="ghost"
 						isCompact
 					/>
 				</li>

package/dist/form/TextField.svelte

@@ -14,8 +14,8 @@
 		controlClass?: string;
 		startIcon?: IconData;
 		endIcon?: IconData;
-		startText?: string | Snippet;
-		endText?: string | Snippet;
+		startContent?: string | Snippet;
+		endContent?: string | Snippet;
 		onchange?: (value: unknown) => void;
 		oninput?: (value: unknown) => void;
 		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
@@ -44,12 +44,12 @@
 		controlClass,
 		startIcon,
 		endIcon,
-		startText,
-		endText,
+		startContent,
+		endContent,
 		onchange,
 		oninput,
 		variant = 'outlined',
-		color = 'muted',
+		color = 'primary',
 		size = 'md',
 		name,
 		label,
@@ -137,11 +137,11 @@
 			<Icon icon={startIcon} class={iconClasses} />
 		{/if}
 
-		{#if startText}
-			{#if typeof startText === 'string'}
-				<span class={textClasses}>{startText}</span>
+		{#if startContent}
+			{#if typeof startContent === 'string'}
+				<span class={textClasses}>{startContent}</span>
 			{:else}
-				{@render startText()}
+				{@render startContent()}
 			{/if}
 		{/if}
 
@@ -167,11 +167,11 @@
 			onfocusout={() => (isFocused = false)}
 		/>
 
-		{#if endText}
-			{#if typeof endText === 'string'}
-				<span class={textClasses}>{endText}</span>
+		{#if endContent}
+			{#if typeof endContent === 'string'}
+				<span class={textClasses}>{endContent}</span>
 			{:else}
-				{@render endText()}
+				{@render endContent()}
 			{/if}
 		{/if}
 

package/dist/form/TextField.svelte.d.ts

@@ -11,8 +11,8 @@ type Props = {
     controlClass?: string;
     startIcon?: IconData;
     endIcon?: IconData;
-    startText?: string | Snippet;
-    endText?: string | Snippet;
+    startContent?: string | Snippet;
+    endContent?: string | Snippet;
     onchange?: (value: unknown) => void;
     oninput?: (value: unknown) => void;
     color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';

package/dist/form/Textarea.svelte

@@ -36,7 +36,7 @@
 		onchange,
 		oninput,
 		variant = 'outlined',
-		color = 'muted',
+		color = 'primary',
 		size = 'md',
 		name,
 		label,

package/dist/index.css

@@ -90,7 +90,7 @@
 	--color-on-light: var(--on-light, oklch(25% 0.01 30));
 
 	--color-primary: var(--primary, oklch(75% 0.15 145));
-	--color-soft-primary: var(--soft-primary, oklch(95% 0.05 145));
+	--color-soft-primary: var(--soft-primary, oklch(97% 0.01 145));
 	--color-on-primary: var(--on-primary, var(--on-light));
 
 	--color-secondary: var(--secondary, oklch(28.42% 0.0467 259.99));

package/dist/layout/AppBar.svelte

@@ -21,7 +21,7 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'default';
+			| 'background';
 		variant?: 'solid' | 'soft';
 		isBlurred?: boolean;
 		isBordered?: boolean;
@@ -42,8 +42,8 @@
 		startClass,
 		centerClass,
 		endClass,
-		color = 'default',
-		variant = 'soft',
+		color = 'surface',
+		variant = 'solid',
 		isBordered,
 		borderOnScrollOnly = false,
 		isBlurred,
@@ -70,7 +70,7 @@
 		warning: 'is-warning',
 		danger: 'is-danger',
 		surface: 'is-surface',
-		default: 'is-default'
+		background: 'is-background'
 	};
 
 	const variants = {

package/dist/layout/AppBar.svelte.d.ts

@@ -8,7 +8,7 @@ type Props = {
     startClass?: string;
     centerClass?: string;
     endClass?: string;
-    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
     variant?: 'solid' | 'soft';
     isBlurred?: boolean;
     isBordered?: boolean;

package/dist/layout/Sidebar.svelte

@@ -32,7 +32,7 @@
 		headerClass,
 		footerClass,
 		color = 'surface',
-		variant = 'ghost'
+		variant = 'solid'
 	}: Props = $props();
 
 	const colors = {

package/dist/layout/css/app-bar.css

@@ -28,7 +28,7 @@
 		}
 
 		&.is-floating {
-			@apply mt-4 w-[calc(100%-2rem)] rounded-box shadow-md shadow-muted border border-muted;
+			@apply mt-4 w-[calc(100%-2rem)] rounded-box border border-muted;
 		}
 
 		&.is-floating-enabled:not(.is-floating) {
@@ -58,7 +58,7 @@
 			&.is-danger {
 				@apply bg-soft-danger text-danger;
 			}
-			&.is-default {
+			&.is-background {
 				@apply bg-background text-on-background;
 			}
 			&.is-surface {
@@ -88,7 +88,7 @@
 			&.is-danger {
 				@apply bg-danger text-on-danger;
 			}
-			&.is-default {
+			&.is-background {
 				@apply bg-background text-on-background;
 			}
 			&.is-surface {

package/dist/overlay/Drawer.svelte

@@ -44,7 +44,7 @@
 		headerClass,
 		bodyClass,
 		footerClass,
-		color = 'background',
+		color = 'surface',
 		variant = 'solid',
 		disableOverlayClose,
 		hideCloseButton

package/dist/overlay/Modal.svelte

@@ -42,7 +42,7 @@
 		headerClass,
 		contentClass,
 		footerClass,
-		color = 'background',
+		color = 'surface',
 		variant = 'solid',
 		disableOverlayClose,
 		hideCloseButton

package/dist/overlay/Toast.svelte

@@ -22,7 +22,7 @@
 	const {
 		class: className,
 		position = 'bottom-left',
-		variant = 'soft',
+		variant = 'solid',
 		showIcon
 	}: Props = $props();
 

package/dist/overlay/Tooltip.svelte

@@ -15,8 +15,8 @@
 	let {
 		label,
 		children,
-		color = 'primary',
-		variant = 'soft',
+		color = 'muted',
+		variant = 'solid',
 		position = 'top',
 		class: className
 	}: Props = $props();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.14",
+	"version": "0.2.16",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"