ui-svelte 0.2.11 → 0.2.13

package/dist/display/Badge.svelte

@@ -5,7 +5,8 @@
 	type Props = {
 		text: string;
 		children: Snippet;
-		variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		variant?: 'solid' | 'soft';
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		class?: string;
 	};
@@ -13,7 +14,8 @@
 	let {
 		text,
 		children,
-		variant = 'primary',
+		color = 'primary',
+		variant = 'solid',
 		position = 'top-right',
 		class: className
 	}: Props = $props();
@@ -25,7 +27,7 @@
 		'bottom-right': 'is-bottom-right'
 	};
 
-	const variants = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
@@ -34,9 +36,14 @@
 		warning: 'is-warning',
 		danger: 'is-danger'
 	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
+	};
 </script>
 
-<div class={cn('badge', positions[position], variants[variant], className)}>
+<div class={cn('badge', positions[position], colors[color], variants[variant], className)}>
 	{@render children()}
 	<div class="badge-content">
 		<span class="badge-text">

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

@@ -2,7 +2,8 @@ import type { Snippet } from 'svelte';
 type Props = {
     text: string;
     children: Snippet;
-    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    variant?: 'solid' | 'soft';
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     class?: string;
 };

package/dist/display/Card.svelte

@@ -7,7 +7,7 @@
 		header?: Snippet;
 		footer?: Snippet;
 		cover?: string;
-		variant?:
+		color?:
 			| 'primary'
 			| 'secondary'
 			| 'muted'
@@ -16,16 +16,14 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'outlined'
-			| 'ghost';
+			| 'background';
+		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
 		rootClass?: string;
 		headerClass?: string;
 		footerClass?: string;
 		bodyClass?: string;
 		coverClass?: string;
 		overlayClass?: string;
-		isSolid?: boolean;
-		hasOverlay?: boolean;
 	};
 
 	const {
@@ -34,35 +32,38 @@
 		footer,
 		rootClass,
 		cover,
+		color = 'surface',
 		variant = 'outlined',
 		headerClass,
 		bodyClass,
 		footerClass,
 		coverClass,
-		overlayClass,
-		isSolid,
-		hasOverlay
+		overlayClass
 	}: Props = $props();
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
 		success: 'is-success',
 		info: 'is-info',
-		warning: 'is-warning',
 		danger: 'is-danger',
+		warning: 'is-warning',
 		surface: 'is-surface',
+		background: 'is-background'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
 		outlined: 'is-outlined',
 		ghost: 'is-ghost'
 	};
 </script>
 
-<div class={cn('card', variantClasses[variant], isSolid && 'is-solid', rootClass)}>
+<article class={cn('card', colors[color], variants[variant], rootClass)}>
 	{#if cover}
 		<img src={cover} alt="cover" class={cn('card-cover', coverClass)} />
-	{/if}
-	{#if hasOverlay}
 		<div class={cn('card-overlay', overlayClass)}></div>
 	{/if}
 	{#if header}
@@ -78,4 +79,4 @@
 			{@render footer()}
 		</div>
 	{/if}
-</div>
+</article>

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

@@ -4,15 +4,14 @@ type Props = {
     header?: Snippet;
     footer?: Snippet;
     cover?: string;
-    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'outlined' | 'ghost';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
+    variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
     rootClass?: string;
     headerClass?: string;
     footerClass?: string;
     bodyClass?: string;
     coverClass?: string;
     overlayClass?: string;
-    isSolid?: boolean;
-    hasOverlay?: boolean;
 };
 declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/display/Carousel.svelte

@@ -5,7 +5,7 @@
 		ArrowRight24RegularIcon,
 		ArrowUp24RegularIcon
 	} from '../icons/index.js';
-	import { Button, Icon } from '../index.js';
+	import { IconButton } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 	import type { Snippet } from 'svelte';
 	import { onMount, tick } from 'svelte';
@@ -19,13 +19,13 @@
 		slides: Slide[];
 		autoplay?: boolean;
 		autoplayInterval?: number;
-		loop?: boolean;
-		showControls?: boolean;
-		showIndicators?: boolean;
+		disableLoop?: boolean;
+		hideControls?: boolean;
+		hideIndicators?: boolean;
 		showNavigation?: boolean;
 		showCounter?: boolean;
 		orientation?: 'horizontal' | 'vertical';
-		variant?: 'primary' | 'secondary' | 'muted' | 'default';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 		size?: 'sm' | 'md' | 'lg';
 		indicatorType?: 'bar' | 'dot';
 		rootClass?: string;
@@ -33,6 +33,8 @@
 		onSlideChange?: (index: number) => void;
 		title?: string | Snippet;
 		slideWidth?: number;
+		slideHeight?: number;
+		slidesPerView?: number;
 		gap?: number;
 	};
 
@@ -42,18 +44,20 @@
 		slides = [],
 		autoplay = false,
 		autoplayInterval = 3000,
-		loop = true,
-		showControls = true,
-		showIndicators = true,
+		disableLoop = false,
+		hideControls = false,
+		hideIndicators = false,
 		showNavigation = false,
 		showCounter = false,
 		orientation = 'horizontal',
-		variant = 'default',
+		color = 'primary',
 		size = 'md',
 		indicatorType = 'bar',
 		onSlideChange,
 		title,
 		slideWidth: slideWidthProp,
+		slideHeight: slideHeightProp,
+		slidesPerView: slidesPerViewProp,
 		gap = 0
 	}: Props = $props();
 
@@ -66,12 +70,13 @@
 	let prevTranslate = $state(0);
 	let autoplayTimer: ReturnType<typeof setTimeout> | null = $state(null);
 	let computedSlideWidth = $state(0);
+	let computedSlideHeight = $state(0);
 	let computedSlidesPerView = $state(1);
 
 	const isVertical = $derived(orientation === 'vertical');
 	const maxIndex = $derived(Math.max(0, slides.length - Math.floor(computedSlidesPerView)));
-	const canGoPrev = $derived(loop || currentIndex > 0);
-	const canGoNext = $derived(loop || currentIndex < maxIndex);
+	const canGoPrev = $derived(!disableLoop || currentIndex > 0);
+	const canGoNext = $derived(!disableLoop || currentIndex < maxIndex);
 
 	const sizeClasses = {
 		sm: 'is-sm',
@@ -79,30 +84,71 @@
 		lg: 'is-lg'
 	};
 
+	const colorClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger'
+	};
+
 	const updateTransform = () => {
 		if (!containerEl || !viewportEl) return;
-		const viewportSize = isVertical ? viewportEl.offsetHeight : viewportEl.offsetWidth;
 
-		let slideWidth: number;
+		const slideElements = containerEl.querySelectorAll('.carousel-slide');
 
-		if (slideWidthProp) {
-			slideWidth = slideWidthProp;
-			computedSlidesPerView = viewportSize / (slideWidth + gap);
-		} else {
-			slideWidth = viewportSize;
+		if (isVertical) {
+			let slideHeight: number;
+
+			if (slideHeightProp) {
+				slideHeight = slideHeightProp;
+			} else {
+				const firstSlide = slideElements[0] as HTMLElement;
+				slideHeight = firstSlide?.offsetHeight || 200;
+			}
+
+			computedSlideHeight = slideHeight;
 			computedSlidesPerView = 1;
-		}
 
-		computedSlideWidth = slideWidth;
+			viewportEl.style.height = `${slideHeight}px`;
 
-		const slideElements = containerEl.querySelectorAll('.carousel-slide');
-		slideElements.forEach((el) => {
-			(el as HTMLElement).style.width = `${slideWidth}px`;
-		});
+			slideElements.forEach((el) => {
+				(el as HTMLElement).style.height = `${slideHeight}px`;
+				(el as HTMLElement).style.width = '100%';
+			});
 
-		const offset = -currentIndex * (slideWidth + gap);
-		const property = isVertical ? 'translateY' : 'translateX';
-		containerEl.style.transform = `${property}(${offset}px)`;
+			const offset = -currentIndex * (slideHeight + gap);
+			containerEl.style.transform = `translateY(${offset}px)`;
+		} else {
+			const viewportWidth = viewportEl.offsetWidth;
+			let slideWidth: number;
+
+			if (slidesPerViewProp && slidesPerViewProp > 1) {
+				const totalGap = (slidesPerViewProp - 1) * gap;
+				slideWidth = (viewportWidth - totalGap) / slidesPerViewProp;
+				computedSlidesPerView = slidesPerViewProp;
+			} else if (slideWidthProp) {
+				slideWidth = slideWidthProp;
+				computedSlidesPerView = viewportWidth / (slideWidth + gap);
+			} else {
+				slideWidth = viewportWidth;
+				computedSlidesPerView = 1;
+			}
+
+			computedSlideWidth = slideWidth;
+
+			viewportEl.style.height = '';
+
+			slideElements.forEach((el) => {
+				(el as HTMLElement).style.width = `${slideWidth}px`;
+				(el as HTMLElement).style.height = '';
+			});
+
+			const offset = -currentIndex * (slideWidth + gap);
+			containerEl.style.transform = `translateX(${offset}px)`;
+		}
 	};
 
 	const goToSlide = (index: number) => {
@@ -150,7 +196,7 @@
 	const startAutoplay = () => {
 		if (!autoplay) return;
 		autoplayTimer = setInterval(() => {
-			if (loop || currentIndex < slides.length - 1) {
+			if (!disableLoop || currentIndex < slides.length - 1) {
 				goToNext();
 			} else {
 				stopAutoplay();
@@ -203,14 +249,16 @@
 
 		currentTranslate = prevTranslate + percentageMoved;
 
-		const property = isVertical ? 'translateY' : 'translateX';
-
-		if (slideWidthProp) {
+		if (isVertical) {
+			const slideHeight = computedSlideHeight || slideHeightProp || 200;
+			const baseOffset = -currentIndex * (slideHeight + gap);
+			containerEl.style.transform = `translateY(${baseOffset + diff}px)`;
+		} else if (slideWidthProp) {
 			const slideWidth = computedSlideWidth || slideWidthProp;
 			const baseOffset = -currentIndex * (slideWidth + gap);
-			containerEl.style.transform = `${property}(${baseOffset + diff}px)`;
+			containerEl.style.transform = `translateX(${baseOffset + diff}px)`;
 		} else {
-			containerEl.style.transform = `${property}(calc(-${currentIndex * 100}% + ${diff}px))`;
+			containerEl.style.transform = `translateX(calc(-${currentIndex * 100}% + ${diff}px))`;
 		}
 	};
 
@@ -341,33 +389,22 @@
 					{/if}
 				</div>
 				<div class="carousel-header-controls">
-					<button
-						type="button"
-						class="carousel-header-nav is-prev"
+					<IconButton
 						onclick={goToPrev}
-						disabled={!canGoPrev}
-						aria-label="Previous slide"
-					>
-						{#if isVertical}
-							<Icon icon={ArrowUp24RegularIcon} />
-						{:else}
-							<Icon icon={ArrowLeft24RegularIcon} />
-						{/if}
-					</button>
-
-					<button
-						type="button"
-						class="carousel-header-nav is-next"
+						isDisabled={!canGoPrev}
+						icon={isVertical ? ArrowUp24RegularIcon : ArrowLeft24RegularIcon}
+						{color}
+						variant="ghost"
+						size="sm"
+					/>
+					<IconButton
 						onclick={goToNext}
-						disabled={!canGoNext}
-						aria-label="Next slide"
-					>
-						{#if isVertical}
-							<Icon icon={ArrowDown24RegularIcon} />
-						{:else}
-							<Icon icon={ArrowRight24RegularIcon} />
-						{/if}
-					</button>
+						isDisabled={!canGoNext}
+						icon={isVertical ? ArrowDown24RegularIcon : ArrowRight24RegularIcon}
+						{color}
+						variant="ghost"
+						size="sm"
+					/>
 				</div>
 			</div>
 		{/if}
@@ -385,49 +422,41 @@
 		</div>
 
 		{#if showNavigation}
-			<button
-				type="button"
+			<IconButton
 				class={cn('carousel-nav is-prev', sizeClasses[size])}
 				onclick={goToPrev}
-				disabled={!canGoPrev}
-				aria-label="Previous slide"
-			>
-				{#if isVertical}
-					<Icon icon={ArrowUp24RegularIcon} />
-				{:else}
-					<Icon icon={ArrowLeft24RegularIcon} />
-				{/if}
-			</button>
-
-			<button
-				type="button"
+				isDisabled={!canGoPrev}
+				icon={isVertical ? ArrowUp24RegularIcon : ArrowLeft24RegularIcon}
+				{color}
+				variant="overlay"
+				{size}
+			/>
+			<IconButton
 				class={cn('carousel-nav is-next', sizeClasses[size])}
 				onclick={goToNext}
-				disabled={!canGoNext}
-				aria-label="Next slide"
-			>
-				{#if isVertical}
-					<Icon icon={ArrowDown24RegularIcon} />
-				{:else}
-					<Icon icon={ArrowRight24RegularIcon} />
-				{/if}
-			</button>
+				isDisabled={!canGoNext}
+				icon={isVertical ? ArrowDown24RegularIcon : ArrowRight24RegularIcon}
+				{color}
+				variant="overlay"
+				{size}
+			/>
 		{/if}
 	</div>
 
-	{#if showControls || showIndicators || showCounter}
+	{#if !hideControls || !hideIndicators || showCounter}
 		<div class={cn('carousel-controls', isVertical && 'is-vertical')}>
-			{#if showControls}
-				<Button isDisabled={!canGoPrev} onclick={goToPrev} variant="ghost">
-					{#if isVertical}
-						<Icon icon={ArrowUp24RegularIcon} />
-					{:else}
-						<Icon icon={ArrowLeft24RegularIcon} />
-					{/if}
-				</Button>
+			{#if !hideControls}
+				<IconButton
+					isDisabled={!canGoPrev}
+					onclick={goToPrev}
+					icon={isVertical ? ArrowUp24RegularIcon : ArrowLeft24RegularIcon}
+					{color}
+					variant="ghost"
+					{size}
+				/>
 			{/if}
 
-			{#if showIndicators}
+			{#if !hideIndicators}
 				<div class={cn('carousel-indicators', isVertical && 'is-vertical')}>
 					{#each slides as slide, index (slide.id)}
 						<button
@@ -435,6 +464,7 @@
 							class={cn(
 								'carousel-indicator',
 								sizeClasses[size],
+								colorClasses[color],
 								currentIndex === index && 'is-active',
 								indicatorType === 'dot' && 'is-dot'
 							)}
@@ -451,14 +481,15 @@
 				</div>
 			{/if}
 
-			{#if showControls}
-				<Button isDisabled={!canGoNext} onclick={goToNext} variant="ghost">
-					{#if isVertical}
-						<Icon icon={ArrowDown24RegularIcon} />
-					{:else}
-						<Icon icon={ArrowRight24RegularIcon} />
-					{/if}
-				</Button>
+			{#if !hideControls}
+				<IconButton
+					isDisabled={!canGoNext}
+					onclick={goToNext}
+					icon={isVertical ? ArrowDown24RegularIcon : ArrowRight24RegularIcon}
+					{color}
+					variant="ghost"
+					{size}
+				/>
 			{/if}
 		</div>
 	{/if}

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

@@ -7,13 +7,13 @@ type Props = {
     slides: Slide[];
     autoplay?: boolean;
     autoplayInterval?: number;
-    loop?: boolean;
-    showControls?: boolean;
-    showIndicators?: boolean;
+    disableLoop?: boolean;
+    hideControls?: boolean;
+    hideIndicators?: boolean;
     showNavigation?: boolean;
     showCounter?: boolean;
     orientation?: 'horizontal' | 'vertical';
-    variant?: 'primary' | 'secondary' | 'muted' | 'default';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
     size?: 'sm' | 'md' | 'lg';
     indicatorType?: 'bar' | 'dot';
     rootClass?: string;
@@ -21,6 +21,8 @@ type Props = {
     onSlideChange?: (index: number) => void;
     title?: string | Snippet;
     slideWidth?: number;
+    slideHeight?: number;
+    slidesPerView?: number;
     gap?: number;
 };
 declare const Carousel: import("svelte").Component<Props, {}, "">;