ui-svelte 0.2.1 → 0.2.2

package/dist/css/base.css

@@ -30,153 +30,357 @@
 	@supports not selector(::-webkit-scrollbar) {
 		* {
 			scrollbar-width: thin;
-			scrollbar-color: color-mix(in oklch, currentColor 80%, transparent)
-				color-mix(in oklch, currentColor 20%, transparent);
+			scrollbar-color: color-mix(in oklch, currentColor 80%, transparent) color-mix(in oklch, currentColor 20%, transparent);
 		}
 
 		body {
-			scrollbar-color: color-mix(in oklch, currentColor 80%, transparent)
-				color-mix(in oklch, currentColor 20%, transparent);
+			scrollbar-color: color-mix(in oklch, currentColor 80%, transparent) color-mix(in oklch, currentColor 20%, transparent);
 		}
 	}
 
+	/* Base headings - responsive typography without margins */
 	h1 {
-		@apply text-4xl font-extrabold lg:text-5xl;
+		@apply font-extrabold tracking-tight;
+		@apply text-[1.875rem] md:text-4xl lg:text-5xl;
+		@apply leading-9 md:leading-10 lg:leading-12;
 	}
 
 	h2 {
-		@apply text-3xl font-semibold;
+		@apply font-semibold tracking-tight;
+		@apply text-xl md:text-2xl lg:text-[1.875rem];
+		@apply leading-7 md:leading-8 lg:leading-10;
 	}
 
 	h3 {
-		@apply text-2xl font-semibold;
+		@apply font-semibold tracking-tight;
+		@apply text-lg md:text-xl lg:text-2xl;
+		@apply leading-7 md:leading-8 lg:leading-9;
 	}
 
 	h4 {
-		@apply text-xl font-semibold;
+		@apply font-semibold tracking-tight;
+		@apply text-base md:text-lg lg:text-xl;
+		@apply leading-6 md:leading-7 lg:leading-7;
 	}
 
 	h5 {
-		@apply text-lg font-semibold;
+		@apply font-semibold tracking-tight;
+		@apply text-sm md:text-base lg:text-lg;
+		@apply leading-5 md:leading-6 lg:leading-7;
 	}
 
 	h6 {
-		@apply text-base font-semibold;
+		@apply font-semibold tracking-tight;
+		@apply text-xs md:text-sm lg:text-base;
+		@apply leading-4 md:leading-5 lg:leading-6;
 	}
 
+	/* Text formatting */
 	strong {
 		@apply font-semibold;
 	}
 
+	em {
+		@apply italic;
+	}
+
+	/* Utility classes */
 	.snippet {
-		@apply relative rounded bg-muted text-on-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+		@apply relative rounded bg-muted text-on-muted font-mono font-semibold;
+		@apply px-[0.3rem] py-[0.2rem];
+		@apply text-[0.75rem] md:text-[0.875rem] lg:text-base;
 	}
 
 	.link {
-		@apply hover:text-primary underline underline-offset-4;
+		@apply font-medium text-primary underline underline-offset-4;
+		@apply hover:text-primary/80 transition-colors;
 	}
 
 	.tiny {
-		@apply text-xs font-medium leading-none;
+		@apply font-medium leading-none;
+		@apply text-[0.625rem] md:text-xs lg:text-xs;
 	}
 
 	.lead {
-		@apply text-lg;
+		@apply text-base md:text-lg lg:text-xl;
+		@apply leading-7 md:leading-8 lg:leading-8;
 	}
 
 	.label {
-		@apply text-sm select-none font-medium;
+		@apply select-none font-medium;
+		@apply text-xs md:text-sm lg:text-sm;
 	}
 
 	.hero-title {
-		@apply text-4xl font-semibold leading-tight tracking-tight;
-		@apply md:text-5xl lg:text-6xl xl:text-7xl;
+		@apply font-semibold leading-tight tracking-tight;
+		@apply text-4xl md:text-5xl lg:text-6xl xl:text-7xl;
 	}
 
 	.hero-subtitle {
-		@apply text-lg font-light text-on-muted;
-		@apply md:text-xl lg:text-2xl;
+		@apply font-light text-on-muted;
+		@apply text-lg md:text-xl lg:text-2xl;
 	}
 
+	/* Blockquote - keeping minimal spacing */
 	blockquote {
-		@apply mt-2 border-l-2 pl-6 italic;
+		@apply border-l-2 border-muted italic;
+		@apply pl-4 md:pl-5 lg:pl-6;
 	}
 
 	.prose {
+		/* Base font size and line height - responsive */
+		@apply text-sm md:text-base lg:text-lg;
+		@apply leading-6 md:leading-7 lg:leading-8;
+
+		/* Headings */
 		h1 {
-			@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
+			@apply scroll-m-20 font-extrabold tracking-tight;
+			@apply text-[1.875rem] md:text-4xl lg:text-5xl;
+			@apply leading-9 md:leading-10 lg:leading-12;
+			@apply mt-0 mb-3 md:mb-4 lg:mb-5;
 		}
 
 		h2 {
-			@apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0;
+			@apply scroll-m-20 font-semibold tracking-tight transition-colors;
+			@apply text-xl md:text-2xl lg:text-[1.875rem];
+			@apply leading-7 md:leading-8 lg:leading-10;
+			@apply mt-4 md:mt-5 lg:mt-6 mb-2 md:mb-3 lg:mb-3;
+			@apply border-b pb-2;
+
+			&:first-child {
+				@apply mt-0;
+			}
 		}
 
 		h3 {
-			@apply scroll-m-20 text-2xl font-semibold tracking-tight;
+			@apply scroll-m-20 font-semibold tracking-tight;
+			@apply text-lg md:text-xl lg:text-2xl;
+			@apply leading-7 md:leading-8 lg:leading-9;
+			@apply mt-3 md:mt-4 lg:mt-5 mb-1.5 md:mb-2 lg:mb-2;
 		}
 
 		h4 {
-			@apply scroll-m-20 text-xl font-semibold tracking-tight;
+			@apply scroll-m-20 font-semibold tracking-tight;
+			@apply text-base md:text-lg lg:text-xl;
+			@apply leading-6 md:leading-7 lg:leading-7;
+			@apply mt-3 md:mt-3 lg:mt-4 mb-1.5;
 		}
 
 		h5 {
-			@apply scroll-m-20 text-lg font-semibold tracking-tight;
+			@apply scroll-m-20 font-semibold tracking-tight;
+			@apply text-sm md:text-base lg:text-lg;
+			@apply leading-5 md:leading-6 lg:leading-7;
+			@apply mt-3 md:mt-3 lg:mt-4 mb-1.5;
 		}
 
 		h6 {
-			@apply scroll-m-20 text-base font-semibold tracking-tight;
+			@apply scroll-m-20 font-semibold tracking-tight;
+			@apply text-xs md:text-sm lg:text-base;
+			@apply leading-4 md:leading-5 lg:leading-6;
+			@apply mt-3 md:mt-3 lg:mt-4 mb-1.5;
 		}
 
+		/* Reset margins after headings */
+		h2+*,
+		h3+*,
+		h4+* {
+			@apply mt-0;
+		}
+
+		/* Paragraphs */
 		p {
-			@apply leading-7 text-on-muted;
-			&:not(:first-child) {
-				@apply mt-2 md:mt-3;
-			}
+			@apply text-on-muted;
+			@apply mt-4 md:mt-5 lg:mt-6 mb-4 md:mb-5 lg:mb-6;
+		}
+
+		/* Lead paragraph */
+		[class~='lead'] {
+			@apply text-base md:text-lg lg:text-xl;
+			@apply leading-7 md:leading-8 lg:leading-8;
+			@apply mt-4 md:mt-6 lg:mt-6 mb-4 md:mb-6 lg:mb-6;
+		}
+
+		/* Lists */
+		ul,
+		ol {
+			@apply mt-4 md:mt-5 lg:mt-6 mb-4 md:mb-5 lg:mb-6;
+			@apply pl-5.5 md:pl-6.5 lg:pl-6.5;
 		}
 
 		ul {
-			@apply my-6 ml-6 list-disc space-y-2;
+			@apply list-disc;
 		}
 
 		ol {
-			@apply my-6 ml-6 list-decimal space-y-2;
+			@apply list-decimal;
 		}
 
 		li {
-			@apply leading-7;
-			> ul,
-			> ol {
-				@apply my-2;
-			}
+			@apply mt-1 md:mt-2 lg:mt-2 mb-1 md:mb-2 lg:mb-2;
+			@apply pl-1.5 md:pl-1.5 lg:pl-1.5;
+		}
+
+		>ul>li p,
+		>ol>li p {
+			@apply mt-2 md:mt-3 lg:mt-3 mb-2 md:mb-3 lg:mb-3;
+		}
+
+		>ul>li>p:first-child,
+		>ol>li>p:first-child {
+			@apply mt-4 md:mt-5 lg:mt-5;
+		}
+
+		>ul>li>p:last-child,
+		>ol>li>p:last-child {
+			@apply mb-4 md:mb-5 lg:mb-5;
+		}
+
+		ul ul,
+		ul ol,
+		ol ul,
+		ol ol {
+			@apply mt-2 md:mt-3 lg:mb-3 mb-2 md:mb-3;
+		}
+
+		/* Definition lists */
+		dl {
+			@apply mt-4 md:mt-5 lg:mt-6 mb-4 md:mb-5 lg:mb-6;
+		}
+
+		dt {
+			@apply font-semibold mt-4 md:mt-5 lg:mt-5;
+		}
+
+		dd {
+			@apply mt-1 md:mt-2 lg:mt-2;
+			@apply pl-5.5 md:pl-6.5 lg:pl-6.5;
 		}
 
+		/* Links */
 		a {
-			@apply font-medium text-primary underline underline-offset-4 hover:text-primary/80 transition-colors;
+			@apply font-medium text-primary underline underline-offset-4;
+			@apply hover:text-primary/80 transition-colors;
 		}
 
+		/* Inline code */
 		code {
-			@apply relative rounded bg-muted text-on-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+			@apply relative rounded bg-muted text-on-muted font-mono font-semibold;
+			@apply px-[0.3rem] py-[0.2rem];
+			@apply text-[0.75rem] md:text-[0.875rem] lg:text-base;
+		}
+
+		h2 code {
+			@apply text-[0.875rem] md:text-[1.3125rem] lg:text-[1.625rem];
+		}
+
+		h3 code {
+			@apply text-base md:text-[1.125rem] lg:text-[1.3125rem];
 		}
 
+		/* Code blocks */
 		pre {
-			@apply my-6 overflow-x-auto rounded-lg bg-muted text-on-muted p-4;
+			@apply overflow-x-auto rounded-lg bg-muted text-on-muted;
+			@apply mt-5 md:mt-6 lg:mt-8 mb-5 md:mb-6 lg:mb-8;
+			@apply pt-2 md:pt-3 lg:pt-3 pb-2 md:pb-3 lg:pb-3;
+			@apply px-3 md:px-4 lg:px-4;
+			@apply text-[0.75rem] md:text-[0.875rem] lg:text-base;
+			@apply leading-5 md:leading-6 lg:leading-7;
+
 			code {
 				@apply bg-transparent p-0;
 			}
 		}
 
+		/* Blockquotes */
 		blockquote {
-			@apply my-6 border-l-4 border-muted pl-6 italic text-on-muted;
+			@apply border-l-4 border-muted italic text-on-muted;
+			@apply mt-6 md:mt-8 lg:mt-10 mb-6 md:mb-8 lg:mb-10;
+			@apply pl-5 md:pl-5 lg:pl-6;
 		}
 
+		/* Horizontal rules */
 		hr {
-			@apply my-8 border-muted;
+			@apply border-muted;
+			@apply my-10 md:my-12 lg:my-12;
 		}
 
-		img {
-			@apply my-6 rounded-ui;
+		hr+* {
+			@apply mt-0;
 		}
 
+		/* Images and media */
+		img,
+		video,
+		picture {
+			@apply mt-6 md:mt-8 lg:mt-8 mb-6 md:mb-8 lg:mb-8;
+			@apply rounded-ui;
+		}
+
+		picture>img {
+			@apply mt-0 mb-0;
+		}
+
+		/* Figures */
+		figure {
+			@apply mt-6 md:mt-8 lg:mt-8 mb-6 md:mb-8 lg:mb-8;
+		}
+
+		figure>* {
+			@apply mt-0 mb-0;
+		}
+
+		figcaption {
+			@apply text-[0.75rem] md:text-[0.875rem] lg:text-[0.875rem];
+			@apply leading-4 md:leading-5 lg:leading-5;
+			@apply mt-2 md:mt-3 lg:mt-3;
+		}
+
+		/* Tables */
+		table {
+			@apply w-full text-left;
+			@apply text-[0.75rem] md:text-[0.875rem] lg:text-base;
+			@apply leading-4.5 md:leading-6 lg:leading-6;
+		}
+
+		thead th {
+			@apply font-semibold align-bottom;
+			@apply px-2 md:px-2 lg:px-2 pb-2 md:pb-2 lg:pb-2;
+		}
+
+		thead th:first-child {
+			@apply pl-0;
+		}
+
+		thead th:last-child {
+			@apply pr-0;
+		}
+
+		tbody td,
+		tfoot td {
+			@apply align-baseline;
+			@apply px-2 md:px-2 lg:px-2 py-2 md:py-2 lg:py-2;
+		}
+
+		tbody td:first-child,
+		tfoot td:first-child {
+			@apply pl-0;
+		}
+
+		tbody td:last-child,
+		tfoot td:last-child {
+			@apply pr-0;
+		}
+
+		/* Keyboard input */
+		kbd {
+			@apply font-mono font-semibold;
+			@apply rounded bg-muted text-on-muted;
+			@apply text-[0.75rem] md:text-[0.875rem] lg:text-base;
+			@apply px-1.5 md:px-1.5 lg:px-2;
+			@apply py-0.5 md:py-0.75 lg:py-1;
+		}
+
+		/* Text formatting */
 		strong {
 			@apply font-semibold;
 		}
@@ -184,9 +388,22 @@
 		em {
 			@apply italic;
 		}
+
+		/* Reset first and last child margins */
+		> :first-child {
+			@apply mt-0;
+		}
+
+		> :last-child {
+			@apply mb-0;
+		}
 	}
 
 	.icon {
 		@apply h-full w-auto;
 	}
-}
+
+	.boxed {
+		@apply container mx-auto;
+	}
+}

package/dist/css/utilities.css

@@ -5,10 +5,6 @@
 	}
 }
 
-@utility boxed {
-	@apply container mx-auto;
-}
-
 @utility row {
 	@apply flex flex-row;
 }

package/dist/display/Accordion.svelte

@@ -18,7 +18,7 @@
 		items: AccordionItem[];
 		variant?: 'primary' | 'secondary' | 'muted' | 'outline';
 		multiple?: boolean;
-		class?: string;
+		rootClass?: string;
 		itemClass?: string;
 		headerClass?: string;
 		contentClass?: string;
@@ -28,7 +28,7 @@
 		items = [],
 		variant = 'muted',
 		multiple = false,
-		class: className,
+		rootClass,
 		itemClass,
 		headerClass,
 		contentClass
@@ -65,7 +65,7 @@
 	}
 </script>
 
-<div class={cn('accordion', variants[variant], className)}>
+<div class={cn('accordion', variants[variant], 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

@@ -10,7 +10,7 @@ type Props = {
     items: AccordionItem[];
     variant?: 'primary' | 'secondary' | 'muted' | 'outline';
     multiple?: boolean;
-    class?: string;
+    rootClass?: string;
     itemClass?: string;
     headerClass?: string;
     contentClass?: string;

package/dist/display/Alert.svelte

@@ -60,6 +60,4 @@
 			</div>
 		{/if}
 	</div>
-
-	<div class="alert-end"></div>
 </div>

package/dist/display/Card.svelte

@@ -6,7 +6,6 @@
 		children: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
-		class?: string;
 		cover?: string;
 		variant?:
 			| 'primary'
@@ -19,6 +18,7 @@
 			| 'surface'
 			| 'outlined'
 			| 'ghost';
+		rootClass?: string;
 		headerClass?: string;
 		footerClass?: string;
 		bodyClass?: string;
@@ -26,15 +26,13 @@
 		overlayClass?: string;
 		isSolid?: boolean;
 		hasOverlay?: boolean;
-		hasDivider?: boolean;
-		hasShadow?: boolean;
 	};
 
 	const {
 		children,
 		header,
 		footer,
-		class: className,
+		rootClass,
 		cover,
 		variant = 'outlined',
 		headerClass,
@@ -43,9 +41,7 @@
 		coverClass,
 		overlayClass,
 		isSolid,
-		hasOverlay,
-		hasDivider,
-		hasShadow
+		hasOverlay
 	}: Props = $props();
 
 	const variantClasses = {
@@ -62,16 +58,7 @@
 	};
 </script>
 
-<div
-	class={cn(
-		'card',
-		variantClasses[variant],
-		hasDivider && 'has-divider',
-		hasShadow && 'has-shadow',
-		isSolid && 'is-solid',
-		className
-	)}
->
+<div class={cn('card', variantClasses[variant], isSolid && 'is-solid', rootClass)}>
 	{#if cover}
 		<img src={cover} alt="cover" class={cn('card-cover', coverClass)} />
 	{/if}

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

@@ -3,9 +3,9 @@ type Props = {
     children: Snippet;
     header?: Snippet;
     footer?: Snippet;
-    class?: string;
     cover?: string;
     variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'outlined' | 'ghost';
+    rootClass?: string;
     headerClass?: string;
     footerClass?: string;
     bodyClass?: string;
@@ -13,8 +13,6 @@ type Props = {
     overlayClass?: string;
     isSolid?: boolean;
     hasOverlay?: boolean;
-    hasDivider?: boolean;
-    hasShadow?: boolean;
 };
 declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/display/Carousel.svelte

@@ -28,13 +28,13 @@
 		variant?: 'primary' | 'secondary' | 'muted' | 'default';
 		size?: 'sm' | 'md' | 'lg';
 		indicatorType?: 'bar' | 'dot';
-		class?: string;
+		rootClass?: string;
 		slideClass?: string;
 		onSlideChange?: (index: number) => void;
 	};
 
 	const {
-		class: className,
+		rootClass,
 		slideClass,
 		slides = [],
 		autoplay = false,
@@ -256,7 +256,7 @@
 	});
 </script>
 
-<div class={cn('carousel', isVertical && 'is-vertical', className)}>
+<div class={cn('carousel', isVertical && 'is-vertical', rootClass)}>
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="carousel-viewport"

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

@@ -16,7 +16,7 @@ type Props = {
     variant?: 'primary' | 'secondary' | 'muted' | 'default';
     size?: 'sm' | 'md' | 'lg';
     indicatorType?: 'bar' | 'dot';
-    class?: string;
+    rootClass?: string;
     slideClass?: string;
     onSlideChange?: (index: number) => void;
 };

package/dist/display/ChatBox.svelte

@@ -13,7 +13,7 @@
 	import type { Snippet } from 'svelte';
 
 	type Props = {
-		class?: string;
+		rootClass?: string;
 		chat: ChatState;
 		currentUserId: string;
 		variant?:
@@ -35,7 +35,7 @@
 	};
 
 	let {
-		class: className,
+		rootClass,
 		chat,
 		currentUserId,
 		variant = 'primary',
@@ -124,7 +124,7 @@
 	});
 </script>
 
-<div class={cn('chatbox', `chatbox-${variant}`, className)}>
+<div class={cn('chatbox', `chatbox-${variant}`, rootClass)}>
 	<!-- Header -->
 	<div class="chatbox-header">
 		<div class="chatbox-header-start">

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

@@ -1,7 +1,7 @@
 import type { ChatState } from '../hooks/use-chat.svelte.js';
 import type { Snippet } from 'svelte';
 type Props = {
-    class?: string;
+    rootClass?: string;
     chat: ChatState;
     currentUserId: string;
     variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'muted' | 'outlined';

package/dist/display/Collapsible.svelte

@@ -12,7 +12,7 @@
 		disabled?: boolean;
 		defaultOpen?: boolean;
 		variant?: 'primary' | 'secondary' | 'muted' | 'outline';
-		class?: string;
+		rootClass?: string;
 		headerClass?: string;
 		contentClass?: string;
 	};
@@ -24,7 +24,7 @@
 		disabled = false,
 		defaultOpen = false,
 		variant = 'muted',
-		class: className,
+		rootClass,
 		headerClass,
 		contentClass
 	}: Props = $props();
@@ -44,7 +44,7 @@
 	}
 </script>
 
-<div class={cn('collapsible', variants[variant], className, disabled && 'is-disabled')}>
+<div class={cn('collapsible', variants[variant], rootClass, disabled && 'is-disabled')}>
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class={cn('collapsible-header', headerClass, isOpen && 'is-open')} onclick={toggle}>

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

@@ -6,7 +6,7 @@ type Props = {
     disabled?: boolean;
     defaultOpen?: boolean;
     variant?: 'primary' | 'secondary' | 'muted' | 'outline';
-    class?: string;
+    rootClass?: string;
     headerClass?: string;
     contentClass?: string;
 };

package/dist/display/Empty.svelte

@@ -7,7 +7,7 @@
 		href?: string;
 		onclick?: () => void;
 	};
-	let { type = 'template', class: className }: Props = $props();
+	let { type = 'template', class: className, title, description }: Props = $props();
 </script>
 
 <div class="empty">
@@ -455,8 +455,14 @@
 			/>
 		</svg>
 	{/if}
-	<div>
-		<h6>Title</h6>
-		<p>Description Error</p>
-	</div>
+	{#if title || description}
+		<div class="column center">
+			{#if title}
+				<h6>{title}</h6>
+			{/if}
+			{#if description}
+				<p>{description}</p>
+			{/if}
+		</div>
+	{/if}
 </div>