ui-svelte 0.2.10 → 0.2.12

package/dist/css/typography.css

@@ -0,0 +1,291 @@
+@layer components {
+	.display-2xl {
+		@apply font-bold tracking-tight leading-none;
+		font-size: clamp(3rem, 8vw, 6rem);
+	}
+
+	.display-xl {
+		@apply font-bold tracking-tight leading-none;
+		font-size: clamp(2.5rem, 6vw, 4.5rem);
+	}
+
+	.display-lg {
+		@apply font-bold tracking-tight leading-tight;
+		font-size: clamp(2rem, 5vw, 3.75rem);
+	}
+
+	.display-md {
+		@apply font-semibold tracking-tight leading-tight;
+		font-size: clamp(1.75rem, 4vw, 3rem);
+	}
+
+	.display-sm {
+		@apply font-semibold tracking-tight leading-tight;
+		font-size: clamp(1.5rem, 3vw, 2.25rem);
+	}
+
+	.heading-xl {
+		@apply font-bold tracking-tight leading-snug;
+		font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+	}
+
+	.heading-lg {
+		@apply font-semibold tracking-tight leading-snug;
+		font-size: clamp(1.5rem, 3vw, 2rem);
+	}
+
+	.heading-md {
+		@apply font-semibold leading-snug;
+		font-size: clamp(1.25rem, 2.5vw, 1.5rem);
+	}
+
+	.heading-sm {
+		@apply font-medium leading-snug;
+		font-size: clamp(1.125rem, 2vw, 1.25rem);
+	}
+
+	.heading-xs {
+		@apply font-medium leading-snug;
+		font-size: clamp(1rem, 1.5vw, 1.125rem);
+	}
+
+	.body-xl {
+		@apply font-normal leading-relaxed;
+		font-size: clamp(1.125rem, 1.5vw, 1.25rem);
+	}
+
+	.body-lg {
+		@apply font-normal leading-relaxed;
+		font-size: clamp(1rem, 1.25vw, 1.125rem);
+	}
+
+	.body-md {
+		@apply font-normal leading-relaxed;
+		font-size: 1rem;
+	}
+
+	.body-sm {
+		@apply font-normal leading-relaxed;
+		font-size: 0.875rem;
+	}
+
+	.body-xs {
+		@apply font-normal leading-relaxed;
+		font-size: 0.75rem;
+	}
+
+	.label-lg {
+		@apply font-medium leading-normal truncate;
+		font-size: 1rem;
+	}
+
+	.label-md {
+		@apply font-medium leading-normal truncate;
+		font-size: 0.875rem;
+	}
+
+	.label-sm {
+		@apply font-medium leading-normal truncate;
+		font-size: 0.75rem;
+	}
+
+	.caption-lg {
+		@apply font-normal leading-normal;
+		font-size: 0.875rem;
+	}
+
+	.caption-md {
+		@apply font-normal leading-normal;
+		font-size: 0.75rem;
+	}
+
+	.caption-sm {
+		@apply font-normal leading-normal ;
+		font-size: 0.625rem;
+	}
+
+	.hero-title {
+		@apply font-bold tracking-tight leading-none;
+		font-size: clamp(2.5rem, 8vw, 5rem);
+		text-wrap: balance;
+	}
+
+	.hero-subtitle {
+		@apply font-medium leading-relaxed;
+		font-size: clamp(1.125rem, 2vw, 1.5rem);
+		text-wrap: balance;
+	}
+
+	.hero-description {
+		@apply font-normal leading-relaxed;
+		font-size: clamp(1rem, 1.5vw, 1.25rem);
+		max-width: 65ch;
+		text-wrap: pretty;
+	}
+
+	.section-title {
+		@apply font-bold tracking-tight leading-tight;
+		font-size: clamp(1.75rem, 4vw, 2.5rem);
+		text-wrap: balance;
+	}
+
+	.section-subtitle {
+		@apply font-medium leading-relaxed;
+		font-size: clamp(1rem, 1.5vw, 1.25rem);
+		text-wrap: balance;
+	}
+
+	.section-description {
+		@apply font-normal leading-relaxed;
+		font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
+		max-width: 60ch;
+		text-wrap: pretty;
+	}
+
+	.cta-title {
+		@apply font-bold tracking-tight leading-tight;
+		font-size: clamp(1.5rem, 3.5vw, 2.25rem);
+		text-wrap: balance;
+	}
+
+	.cta-subtitle {
+		@apply font-medium leading-relaxed;
+		font-size: clamp(1rem, 1.5vw, 1.125rem);
+		text-wrap: balance;
+	}
+
+	.cta-description {
+		@apply font-normal leading-relaxed;
+		font-size: clamp(0.875rem, 1.25vw, 1rem);
+		max-width: 50ch;
+		text-wrap: pretty;
+	}
+
+	.subheading {
+		@apply font-semibold uppercase tracking-widest;
+		font-size: clamp(0.75rem, 1vw, 0.875rem);
+		color: var(--primary);
+	}
+
+	.subheading-muted {
+		@apply font-semibold uppercase tracking-widest;
+		font-size: clamp(0.75rem, 1vw, 0.875rem);
+	}
+
+	.lead {
+		@apply font-normal leading-relaxed;
+		font-size: clamp(1.125rem, 1.5vw, 1.375rem);
+		text-wrap: pretty;
+	}
+
+	.lead-lg {
+		@apply font-normal leading-relaxed;
+		font-size: clamp(1.25rem, 2vw, 1.5rem);
+		text-wrap: pretty;
+	}
+
+	.overline {
+		@apply font-semibold uppercase tracking-widest;
+		font-size: 0.75rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.overline-primary {
+		@apply overline;
+		color: var(--primary);
+	}
+
+	.overline-secondary {
+		@apply overline;
+		color: var(--secondary);
+	}
+
+	.overline-muted {
+		@apply overline;
+	}
+
+	.quote {
+		@apply font-medium italic leading-relaxed;
+		font-size: clamp(1.125rem, 2vw, 1.5rem);
+	}
+
+	.quote-lg {
+		@apply font-medium italic leading-relaxed;
+		font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+	}
+
+	.feature-title {
+		@apply font-semibold leading-snug;
+		font-size: clamp(1.125rem, 1.5vw, 1.25rem);
+	}
+
+	.feature-description {
+		@apply font-normal leading-relaxed;
+		font-size: clamp(0.875rem, 1.25vw, 1rem);
+	}
+
+	.card-title {
+		@apply font-semibold leading-snug;
+		font-size: clamp(1rem, 1.25vw, 1.125rem);
+	}
+
+	.card-description {
+		@apply font-normal leading-relaxed;
+		font-size: clamp(0.8125rem, 1vw, 0.875rem);
+	}
+
+	.nav-item {
+		@apply font-medium leading-normal;
+		font-size: 0.875rem;
+	}
+
+	.nav-item-lg {
+		@apply font-medium leading-normal;
+		font-size: 1rem;
+	}
+
+	.code-inline {
+		@apply font-mono bg-muted text-on-muted rounded;
+		@apply px-[0.3rem] py-[0.2rem];
+		font-size: 0.875em;
+	}
+
+	.code-block {
+		@apply font-mono leading-relaxed bg-muted text-on-muted rounded;
+		@apply px-[0.3rem] py-[0.2rem];
+		font-size: 0.875rem;
+	}
+
+	.text-balance {
+		text-wrap: balance;
+	}
+
+	.text-pretty {
+		text-wrap: pretty;
+	}
+
+	.truncate-lines-2 {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.truncate-lines-3 {
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.truncate-lines-4 {
+		display: -webkit-box;
+		-webkit-line-clamp: 4;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.prose-narrow { max-width: 45ch; }
+	.prose-normal { max-width: 65ch; }
+	.prose-wide { max-width: 80ch; }
+}

package/dist/display/Accordion.svelte

@@ -16,7 +16,17 @@
 
 	type Props = {
 		items: AccordionItem[];
-		variant?: 'primary' | 'secondary' | 'muted' | 'outline';
+		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+		color?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'default';
 		multiple?: boolean;
 		rootClass?: string;
 		itemClass?: string;
@@ -26,7 +36,8 @@
 
 	const {
 		items = [],
-		variant = 'muted',
+		variant = 'ghost',
+		color = 'default',
 		multiple = false,
 		rootClass,
 		itemClass,
@@ -35,6 +46,7 @@
 	}: Props = $props();
 
 	let openItems = $state<Record<string, boolean>>(
+		// svelte-ignore state_referenced_locally
 		items.reduce(
 			(acc, item) => {
 				if (item.defaultOpen) {
@@ -47,10 +59,22 @@
 	);
 
 	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		outlined: 'is-outlined',
+		ghost: 'is-ghost'
+	};
+
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
-		outline: 'is-outline'
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		surface: 'is-surface',
+		default: 'is-default'
 	};
 
 	function toggleItem(itemId: string, disabled?: boolean) {
@@ -65,7 +89,7 @@
 	}
 </script>
 
-<div class={cn('accordion', variants[variant], rootClass)}>
+<div class={cn('accordion', variants[variant], colors[color], rootClass)}>
 	{#each items as item}
 		<div class={cn('accordion-item', itemClass, item.disabled && 'is-disabled')}>
 			<!-- svelte-ignore a11y_click_events_have_key_events -->

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

@@ -8,7 +8,8 @@ type AccordionItem = {
 };
 type Props = {
     items: AccordionItem[];
-    variant?: 'primary' | 'secondary' | 'muted' | 'outline';
+    variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
     multiple?: boolean;
     rootClass?: string;
     itemClass?: string;

package/dist/display/Alert.svelte

@@ -10,39 +10,59 @@
 	import type { Snippet } from 'svelte';
 	import type { IconData } from './Icon.svelte';
 
-	type AlertStatus = 'info' | 'success' | 'warning' | 'danger';
-
 	type Props = {
 		title?: string;
 		description?: string;
 		children?: Snippet;
 		showIcon?: boolean;
 		icon?: IconData;
-		status?: AlertStatus;
-		isSolid?: boolean;
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft';
 	};
 
-	let { title, description, children, showIcon, icon, status = 'info', isSolid }: Props = $props();
+	let {
+		title,
+		description,
+		children,
+		showIcon,
+		icon,
+		color = 'info',
+		variant = 'soft'
+	}: Props = $props();
 
-	const STATUS_COLORS: Record<AlertStatus, string> = {
-		info: 'is-info',
+	const colors = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
 		success: 'is-success',
-		warning: 'is-warning',
-		danger: 'is-danger'
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
 	};
 
-	const DEFAULT_ICONS: Record<AlertStatus, IconData> = {
+	const DEFAULT_ICONS: Record<
+		'primary' | 'secondary' | 'muted' | 'info' | 'success' | 'warning' | 'danger',
+		IconData
+	> = {
+		primary: Info24RegularIcon,
+		secondary: Info24RegularIcon,
+		muted: Info24RegularIcon,
 		info: Info24RegularIcon,
 		success: CheckmarkCircle24RegularIcon,
 		warning: Warning24RegularIcon,
 		danger: DismissCircle24RegularIcon
 	};
 
-	const currentIcon = $derived(icon ?? DEFAULT_ICONS[status]);
+	const currentIcon = $derived(icon ?? DEFAULT_ICONS[color as keyof typeof DEFAULT_ICONS]);
 	const hasContent = $derived(description || children);
 </script>
 
-<div class={cn('alert', STATUS_COLORS[status], isSolid && 'is-solid')}>
+<div class={cn('alert', colors[color], variants[variant])}>
 	{#if showIcon}
 		<div class="alert-start">
 			<Icon icon={currentIcon} class="alert-icon" />

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

@@ -1,14 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { IconData } from './Icon.svelte';
-type AlertStatus = 'info' | 'success' | 'warning' | 'danger';
 type Props = {
     title?: string;
     description?: string;
     children?: Snippet;
     showIcon?: boolean;
     icon?: IconData;
-    status?: AlertStatus;
-    isSolid?: boolean;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft';
 };
 declare const Alert: import("svelte").Component<Props, {}, "">;
 type Alert = ReturnType<typeof Alert>;

package/dist/display/Avatar.svelte

@@ -1,22 +1,21 @@
 <script lang="ts">
+	import type { IconData } from './Icon.svelte';
+	import { Icon } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 
 	type Props = {
 		src?: string;
 		name?: string;
 		alt?: string;
-		variant?:
-			| 'primary'
-			| 'secondary'
-			| 'muted'
-			| 'success'
-			| 'warning'
-			| 'danger'
-			| 'info'
-			| 'transparent';
+		href?: string;
+		onclick?: () => void;
+		target?: '_self' | '_blank' | '_parent' | '_top';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft';
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		status?: 'online' | 'offline' | 'busy' | 'away';
 		isBordered?: boolean;
+		icon?: IconData;
 		class?: string;
 	};
 
@@ -24,25 +23,34 @@
 		src,
 		name,
 		alt = 'Avatar',
-		size = 'lg',
-		variant = 'primary',
+		href,
+		onclick,
+		target,
+		color = 'primary',
+		variant = 'solid',
+		size = 'md',
 		status,
 		isBordered,
+		icon,
 		class: className
 	}: Props = $props();
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
 		success: 'is-success',
-		warning: 'is-warning',
-		danger: 'is-danger',
 		info: 'is-info',
-		transparent: 'is-transparent'
+		danger: 'is-danger',
+		warning: 'is-warning'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
 	};
 
-	const sizeClasses = {
+	const sizes = {
 		xs: 'is-xs',
 		sm: 'is-sm',
 		md: 'is-md',
@@ -56,17 +64,21 @@
 		busy: 'is-busy',
 		away: 'is-away'
 	};
+
+	const baseClasses = $derived(
+		cn(
+			'avatar',
+			colors[color],
+			sizes[size],
+			variants[variant],
+			isBordered && 'is-bordered',
+			(href || onclick) && 'is-clickable',
+			className
+		)
+	);
 </script>
 
-<div
-	class={cn(
-		'avatar',
-		sizeClasses[size],
-		variantClasses[variant],
-		isBordered && 'is-bordered',
-		className
-	)}
->
+{#snippet avatarContent()}
 	{#if status}
 		<div class="avatar-status">
 			<div class={cn('avatar-indicator', statusClasses[status])}></div>
@@ -74,7 +86,23 @@
 	{/if}
 	{#if src}
 		<img {src} {alt} class="avatar-image" />
+	{:else if icon}
+		<Icon {icon} class="avatar-icon" />
 	{:else}
 		<span class="avatar-name">{name?.charAt(0).toUpperCase() || alt.charAt(0).toUpperCase()}</span>
 	{/if}
-</div>
+{/snippet}
+
+{#if href}
+	<a class={baseClasses} {href} {target}>
+		{@render avatarContent()}
+	</a>
+{:else if onclick}
+	<button type="button" class={baseClasses} {onclick}>
+		{@render avatarContent()}
+	</button>
+{:else}
+	<div class={baseClasses}>
+		{@render avatarContent()}
+	</div>
+{/if}

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

@@ -1,11 +1,17 @@
+import type { IconData } from './Icon.svelte';
 type Props = {
     src?: string;
     name?: string;
     alt?: string;
-    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'warning' | 'danger' | 'info' | 'transparent';
+    href?: string;
+    onclick?: () => void;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     status?: 'online' | 'offline' | 'busy' | 'away';
     isBordered?: boolean;
+    icon?: IconData;
     class?: string;
 };
 declare const Avatar: import("svelte").Component<Props, {}, "">;

package/dist/display/AvatarGroup.svelte

@@ -6,53 +6,61 @@
 		src?: string;
 		name?: string;
 		alt?: string;
+		href?: string;
+		onclick?: () => void;
+		target?: '_self' | '_blank' | '_parent' | '_top';
 	};
 
 	type Props = {
 		items: AvatarItem[];
-		variant?:
-			| 'primary'
-			| 'secondary'
-			| 'muted'
-			| 'success'
-			| 'warning'
-			| 'danger'
-			| 'info'
-			| 'transparent';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft';
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		max?: number;
-		stacked?: boolean;
+		isInline?: boolean;
 		isBordered?: boolean;
-		class?: string;
+		classRoot?: string;
+		classAvatar?: string;
+		classCounter?: string;
 	};
 
 	const {
 		items,
-		variant = 'primary',
-		size = 'lg',
+		variant = 'solid',
+		color = 'primary',
+		size = 'md',
 		max,
-		stacked = true,
-		isBordered = false,
-		class: className
+		isInline,
+		isBordered,
+		classRoot,
+		classAvatar,
+		classCounter
 	}: Props = $props();
 
 	const visibleItems = $derived(max && max < items.length ? items.slice(0, max) : items);
 	const remainingCount = $derived(max && max < items.length ? items.length - max : 0);
 </script>
 
-<div class={cn('avatar-group', stacked && 'is-stacked', className)}>
+<div class={cn('avatar-group', !isInline && 'is-stacked', classRoot)}>
 	{#each visibleItems as item, i}
 		<Avatar
 			src={item.src}
 			name={item.name}
 			alt={item.alt || `Avatar ${i + 1}`}
+			href={item.href}
+			onclick={item.onclick}
+			target={item.target}
 			{variant}
 			{size}
+			{color}
 			{isBordered}
+			class={classAvatar}
 		/>
 	{/each}
 	{#if remainingCount > 0}
-		<div class={cn('avatar-group-counter', `is-${size}`)}>
+		<div
+			class={cn('avatar-group-counter', `is-${size}`, `is-${variant}`, `is-${color}`, classCounter)}
+		>
 			+{remainingCount}
 		</div>
 	{/if}