yaxa-svelte 2.0.0 → 2.0.1

package/dist/components/charts/DonutChart.svelte

@@ -83,7 +83,7 @@
 			/>
 
 			<!-- Segments -->
-			{#each segments as seg, idx}
+			{#each segments as seg, idx (seg.item.label)}
 				<circle
 					role="graphics-symbol"
 					aria-label={seg.item.label}
@@ -131,9 +131,9 @@
 	<!-- Legend -->
 	{#if showLegend && data.length > 0}
 		<div
-			class="mt-4 flex flex-wrap justify-center gap-x-4 gap-y-2 text-xs text-neutral-600 dark:text-neutral-300"
+			class="mt-4 flex flex-wrap justify-center gap-x-3 gap-y-1.5 text-[11px] text-neutral-600 sm:gap-x-4 sm:gap-y-2 sm:text-xs dark:text-neutral-300"
 		>
-			{#each segments as seg, idx}
+			{#each segments as seg, idx (seg.item.label)}
 				<button
 					type="button"
 					onmouseenter={() => (hoveredIdx = idx)}

package/dist/components/layout/Header.svelte

@@ -80,8 +80,22 @@
 			</div>
 
 			<!-- Right Section: Search, Theme Toggle, Actions, Socials -->
-			<div class="flex items-center gap-2">
+			<div class="flex items-center gap-1.5 sm:gap-2">
 				{#if onOpenCommand}
+					<!-- Mobile Search Button -->
+					<Button
+						variant="ghost"
+						color="neutral"
+						square
+						size="sm"
+						class="sm:hidden"
+						onclick={onOpenCommand}
+						aria-label="Search documentation"
+					>
+						<Icon name="search" size="sm" />
+					</Button>
+
+					<!-- Desktop Search Pill -->
 					<button
 						onclick={onOpenCommand}
 						type="button"
@@ -110,7 +124,7 @@
 					{/if}
 				</Button>
 
-				<!-- GitHub Link -->
+				<!-- GitHub Link (Desktop) -->
 				{#if currentConfig.socials?.github}
 					<Button
 						href={currentConfig.socials.github}
@@ -118,13 +132,14 @@
 						color="neutral"
 						square
 						size="sm"
+						class="hidden sm:inline-flex"
 						aria-label="GitHub Repository"
 					>
 						<Icon name="github" size="sm" />
 					</Button>
 				{/if}
 
-				<!-- npm Link -->
+				<!-- npm Link (Desktop) -->
 				{#if currentConfig.socials?.npm}
 					<Button
 						href={currentConfig.socials.npm}
@@ -132,6 +147,7 @@
 						color="neutral"
 						square
 						size="sm"
+						class="hidden sm:inline-flex"
 						aria-label="npm Package"
 					>
 						<Icon name="npm" size="sm" />
@@ -173,17 +189,61 @@
 		<!-- Mobile Navigation Dropdown -->
 		{#if mobileMenuOpen}
 			<div class="border-t border-neutral-200 py-4 md:hidden dark:border-neutral-800">
-				<div class="flex flex-col space-y-2">
+				<div class="flex flex-col space-y-1">
 					{#each resolvedLinks as item (item.href)}
 						<a
 							href={item.href}
 							onclick={() => (mobileMenuOpen = false)}
-							class="rounded-lg px-3 py-2 text-base font-medium text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
+							class="flex items-center justify-between rounded-lg px-3 py-2 text-base font-medium text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
 						>
-							{item.label}
+							<span class="flex items-center gap-2">
+								{#if item.icon}
+									<Icon name={item.icon} size="xs" />
+								{/if}
+								{item.label}
+							</span>
+							{#if item.badge}
+								<span
+									class="rounded bg-primary-100 px-1.5 py-0.5 text-xs font-semibold text-primary-700 dark:bg-primary-950 dark:text-primary-300"
+								>
+									{item.badge}
+								</span>
+							{/if}
 						</a>
 					{/each}
 				</div>
+
+				<!-- Mobile Menu Socials -->
+				{#if currentConfig.socials?.github || currentConfig.socials?.npm}
+					<div
+						class="mt-4 flex items-center gap-2 border-t border-neutral-200 pt-4 dark:border-neutral-800"
+					>
+						{#if currentConfig.socials?.github}
+							<Button
+								href={currentConfig.socials.github}
+								variant="outline"
+								size="sm"
+								class="flex-1 justify-center"
+								aria-label="GitHub Repository"
+							>
+								<Icon name="github" size="xs" class="mr-1.5" />
+								GitHub
+							</Button>
+						{/if}
+						{#if currentConfig.socials?.npm}
+							<Button
+								href={currentConfig.socials.npm}
+								variant="outline"
+								size="sm"
+								class="flex-1 justify-center"
+								aria-label="npm Package"
+							>
+								<Icon name="npm" size="xs" class="mr-1.5" />
+								npm
+							</Button>
+						{/if}
+					</div>
+				{/if}
 			</div>
 		{/if}
 	</Container>

package/dist/components/navigation/Tabs.svelte

@@ -79,7 +79,7 @@
 		bind:this={listElement}
 		data-slot="list"
 		class={cn(
-			'relative flex',
+			'relative scrollbar-none flex max-w-full overflow-x-auto',
 			variant === 'segmented' &&
 				'rounded-xl border border-neutral-200/60 bg-neutral-100 p-1 dark:border-neutral-800/60 dark:bg-neutral-900',
 			variant === 'underline' && 'gap-6 border-b border-neutral-200 dark:border-neutral-800',
@@ -111,7 +111,7 @@
 				disabled={tab.disabled}
 				onclick={() => (value = tab.value)}
 				class={cn(
-					'relative z-10 inline-flex items-center justify-center gap-2 text-sm font-medium transition-all duration-150 select-none focus-visible:ring-2 focus-visible:ring-[var(--yaxa-ring)] focus-visible:outline-none motion-reduce:transition-none',
+					'relative z-10 inline-flex shrink-0 items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all duration-150 select-none focus-visible:ring-2 focus-visible:ring-(--yaxa-ring) focus-visible:outline-none motion-reduce:transition-none',
 					tab.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
 					variant === 'segmented' && [
 						'rounded-lg px-3 py-1.5',

package/dist/components/overlays/Modal.svelte

@@ -3,7 +3,7 @@
 	import type { Snippet } from 'svelte';
 
 	export const modalVariants = tv({
-		base: 'fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-neutral-200 bg-white p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 yaxa-surface-elevated motion-reduce:transition-none',
+		base: 'fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-neutral-200 bg-white p-4 sm:p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 yaxa-surface-elevated motion-reduce:transition-none',
 		variants: {
 			size: {
 				sm: 'max-w-sm',

package/dist/components/overlays/Modal.svelte.d.ts

@@ -8,7 +8,7 @@ export declare const modalVariants: import("tailwind-variants").TVReturnType<{
         xl: "max-w-4xl";
         full: "max-w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]";
     };
-}, undefined, "fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-neutral-200 bg-white p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 yaxa-surface-elevated motion-reduce:transition-none", {
+}, undefined, "fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-neutral-200 bg-white p-4 sm:p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 yaxa-surface-elevated motion-reduce:transition-none", {
     size: {
         sm: "max-w-sm";
         md: "max-w-lg";

package/dist/components/theme/ThemeStudio.svelte

@@ -91,20 +91,23 @@
 	{#if showHeader}
 		<!-- Top Bar -->
 		<div
-			class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-800 dark:bg-neutral-900"
+			class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-6 dark:border-neutral-800 dark:bg-neutral-900"
 		>
-			<div>
-				<h1 class="text-xl font-bold text-neutral-900 dark:text-white">Visual Web Theme Studio</h1>
+			<div class="min-w-0 flex-1">
+				<h1 class="text-lg font-bold text-neutral-900 sm:text-xl dark:text-white">
+					Visual Web Theme Studio
+				</h1>
 				<p class="mt-1 text-xs text-neutral-500">
 					Visually customize palettes, harmonic radii, fonts, and scrollbars with instant live
 					preview and zero FOUC.
 				</p>
 			</div>
 
-			<div class="flex items-center gap-2.5">
+			<div class="flex w-full flex-wrap items-center gap-2 sm:w-auto">
 				<Button
 					variant="outline"
 					size="sm"
+					class="flex-1 sm:flex-initial"
 					onclick={() => {
 						const chosen = theme.randomize();
 						toast.info(
@@ -117,22 +120,33 @@
 					Randomize
 				</Button>
 
-				<Button variant="outline" size="sm" onclick={() => theme.reset()}>
+				<Button
+					variant="outline"
+					size="sm"
+					class="flex-1 sm:flex-initial"
+					onclick={() => theme.reset()}
+				>
 					<Icon name="rotate-ccw" size="xs" class="mr-1.5" />
 					Reset
 				</Button>
 
-				<Button variant="solid" size="sm" onclick={() => (exportModalOpen = true)}>
+				<Button
+					variant="solid"
+					size="sm"
+					class="w-full sm:w-auto"
+					onclick={() => (exportModalOpen = true)}
+				>
 					<Icon name="download" size="xs" class="mr-1.5" />
 					Export Theme Tokens
 				</Button>
 			</div>
 		</div>
 	{:else}
-		<div class="flex items-center justify-end gap-2.5">
+		<div class="flex w-full flex-wrap items-center justify-end gap-2 sm:w-auto">
 			<Button
 				variant="outline"
 				size="sm"
+				class="flex-1 sm:flex-initial"
 				onclick={() => {
 					const chosen = theme.randomize();
 					toast.info(
@@ -145,12 +159,22 @@
 				Randomize
 			</Button>
 
-			<Button variant="outline" size="sm" onclick={() => theme.reset()}>
+			<Button
+				variant="outline"
+				size="sm"
+				class="flex-1 sm:flex-initial"
+				onclick={() => theme.reset()}
+			>
 				<Icon name="rotate-ccw" size="xs" class="mr-1.5" />
 				Reset
 			</Button>
 
-			<Button variant="solid" size="sm" onclick={() => (exportModalOpen = true)}>
+			<Button
+				variant="solid"
+				size="sm"
+				class="w-full sm:w-auto"
+				onclick={() => (exportModalOpen = true)}
+			>
 				<Icon name="download" size="xs" class="mr-1.5" />
 				Export Theme Tokens
 			</Button>
@@ -167,12 +191,12 @@
 					Color Mode
 				</div>
 				<div class="grid grid-cols-3 gap-1.5">
-					{#each ['light', 'dark', 'system'] as const as mode}
+					{#each ['light', 'dark', 'system'] as const as mode (mode)}
 						<Button
 							variant={theme.mode === mode ? 'solid' : 'outline'}
 							size="xs"
 							onclick={() => theme.setMode(mode)}
-							class="w-full justify-center px-1.5 py-1 text-[11px] capitalize"
+							class="min-h-9 w-full justify-center px-1.5 py-1 text-[11px] capitalize"
 						>
 							<Icon
 								name={mode === 'light' ? 'sun' : mode === 'dark' ? 'moon' : 'laptop'}
@@ -199,7 +223,7 @@
 					</span>
 				</div>
 				<div class="grid grid-cols-4 gap-1.5">
-					{#each Object.entries(ACCENT_PALETTES) as [key, pal]}
+					{#each Object.entries(ACCENT_PALETTES) as [key, pal] (key)}
 						<button
 							type="button"
 							onclick={() => theme.setAccent(key as AccentName)}
@@ -234,7 +258,7 @@
 					</span>
 				</div>
 				<div class="grid grid-cols-2 gap-2">
-					{#each Object.entries(NEUTRAL_PALETTES) as [key, pal]}
+					{#each Object.entries(NEUTRAL_PALETTES) as [key, pal] (key)}
 						{@const active = theme.neutral === key}
 						<button
 							type="button"
@@ -284,12 +308,12 @@
 					<span class="text-xs font-semibold text-primary-500 capitalize">{theme.radius}</span>
 				</div>
 				<div class="grid grid-cols-5 gap-1">
-					{#each Object.entries(RADIUS_PRESETS) as [key, r]}
+					{#each Object.entries(RADIUS_PRESETS) as [key, r] (key)}
 						{@const active = theme.radius === key}
 						<button
 							type="button"
 							onclick={() => theme.setRadius(key as RadiusPreset)}
-							class="border px-1 py-1.5 text-center text-[10px] font-semibold transition-all {active
+							class="min-h-9 min-w-0 border px-1 py-1.5 text-center text-[10px] font-semibold transition-all sm:text-xs {active
 								? 'border-primary-500 bg-primary-500 font-bold text-white shadow-xs'
 								: 'border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700'}"
 							style="border-radius: {r.value} !important;"
@@ -306,12 +330,12 @@
 					Typography & Sizing
 				</div>
 				<div class="grid grid-cols-3 gap-1">
-					{#each Object.entries(FONT_PRESETS) as [key, font]}
+					{#each Object.entries(FONT_PRESETS) as [key, font] (key)}
 						{@const active = theme.fontFamily === key}
 						<button
 							type="button"
 							onclick={() => theme.setFontFamily(key as FontFamily)}
-							class="rounded-md border px-1 py-1.5 text-center text-[11px] font-semibold capitalize transition-all {active
+							class="min-h-9 rounded-md border px-1 py-1.5 text-center text-[11px] font-semibold capitalize transition-all {active
 								? 'border-primary-500 bg-primary-500 text-white shadow-xs'
 								: 'border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700'}"
 							style="font-family: {font.value} !important;"
@@ -326,12 +350,12 @@
 						Density / Size Scale
 					</div>
 					<div class="grid grid-cols-3 gap-1">
-						{#each Object.entries(FONT_SIZE_PRESETS) as [key, sz]}
+						{#each Object.entries(FONT_SIZE_PRESETS) as [key, sz] (key)}
 							<Button
 								variant={theme.fontSize === key ? 'solid' : 'outline'}
 								size="xs"
 								onclick={() => theme.setFontSize(key as BaseFontSize)}
-								class="w-full justify-center px-1 py-1 text-[11px]"
+								class="min-h-8.5 w-full min-w-0 justify-center px-0.5 py-1 text-[10px] sm:px-1 sm:text-[11px]"
 							>
 								<span class="truncate">{sz.name}</span>
 							</Button>
@@ -342,14 +366,17 @@
 
 			<!-- Scrollbar Auto-Alignment -->
 			<Card padding="sm" class="space-y-2">
-				<div class="flex items-center justify-between">
-					<div>
+				<div class="flex items-center justify-between gap-3">
+					<div class="min-w-0 flex-1">
 						<div class="text-xs font-bold text-neutral-900 dark:text-white">Accent Scrollbars</div>
-						<div class="text-[11px] text-neutral-500">Sync scrollbar thumb to active accent</div>
+						<div class="truncate text-[11px] text-neutral-500 sm:whitespace-normal">
+							Sync scrollbar thumb to active accent
+						</div>
 					</div>
 					<Button
 						variant={theme.accentScrollbar ? 'solid' : 'outline'}
 						size="xs"
+						class="shrink-0"
 						onclick={() => theme.setAccentScrollbar(!theme.accentScrollbar)}
 					>
 						{theme.accentScrollbar ? 'Enabled' : 'Disabled'}
@@ -361,10 +388,10 @@
 		<!-- Right Live Sandbox Canvas (7 cols on xl, 8 cols on 2xl) -->
 		<div class="space-y-6 xl:col-span-7 2xl:col-span-8">
 			<!-- Elements Preview Card -->
-			<Card>
+			<Card ui={{ header: 'p-4 sm:p-6', body: 'p-4 sm:p-6 space-y-6' }}>
 				{#snippet header()}
 					<div class="flex items-center justify-between">
-						<span class="font-semibold text-neutral-900 dark:text-white">
+						<span class="text-sm font-semibold text-neutral-900 sm:text-base dark:text-white">
 							Interactive Component Sandbox
 						</span>
 						<Badge variant="soft" color="primary">Live Preview</Badge>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yaxa-svelte",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "The Intuitive Svelte UI Library — Nuxt UI v4 equivalent for SvelteKit 2 & 3 & Svelte 5 with automated SEO, dynamic OpenGraph cards, sitemaps, robots.txt, and Tailwind CSS v4.",
   "license": "MIT",
   "homepage": "https://yaxa.vercel.app",