@mrintel/villain-ui 0.8.1 → 0.9.1

package/dist/components/overlays/ProgressBar.svelte

@@ -9,7 +9,7 @@ const heightClasses = {
 </script>
 
 <div
-  class="relative bg-[var(--color-base-3)] border border-[var(--color-border)] rounded-[var(--radius-pill)] overflow-hidden shadow-[var(--shadow-deep)] {heightClasses[size]}"
+  class="relative bg-[var(--color-base-3)] border border-[var(--color-border)] rounded-none overflow-hidden shadow-[var(--shadow-deep)] {heightClasses[size]}"
   role="progressbar"
   aria-valuenow={value}
   aria-valuemin="0"
@@ -17,12 +17,12 @@ const heightClasses = {
   aria-label={label || `${percentage.toFixed(0)}% complete`}
 >
   <div
-    class="h-full bg-[var(--color-accent)] accent-glow transition-all duration-500 ease-[var(--ease-luxe)]"
+    class="h-full bg-[var(--color-accent)] transition-all duration-500 ease-[var(--ease-luxe)]"
     style="width: {percentage}%"
   ></div>
 
   {#if showLabel}
-    <div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-[var(--color-text)] text-glow">
+    <div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-[var(--color-text)]">
       {label || `${percentage.toFixed(0)}%`}
     </div>
   {/if}

package/dist/components/overlays/SkeletonLoader.svelte

@@ -8,7 +8,7 @@ const defaultDimensions = {
 const roundingClasses = {
     text: 'rounded-[var(--radius-sm)]',
     circular: 'rounded-[var(--radius-pill)]',
-    rectangular: 'rounded-[var(--radius-lg)]'
+    rectangular: 'rounded-[var(--radius-sm)]'
 };
 const finalWidth = width || defaultDimensions[variant].width;
 const finalHeight = height || defaultDimensions[variant].height;
@@ -53,7 +53,7 @@ const finalHeight = height || defaultDimensions[variant].height;
       var(--color-accent-overlay-10),
       transparent
     );
-    animation: shimmer 1.5s ease-in-out infinite;
+    animation: shimmer 2.8s ease-in-out infinite;
   }
 
   @keyframes shimmer {

package/dist/components/overlays/Spinner.svelte

@@ -14,7 +14,7 @@ const sizeClasses = {
   aria-label={label || 'Loading'}
 >
   <div
-    class="{sizeClasses[size]} border-[var(--color-base-3)] border-t-[var(--color-accent)] rounded-[var(--radius-pill)] accent-glow animate-spin"
+    class="{sizeClasses[size]} border-[var(--color-base-3)] border-t-[var(--color-accent)] rounded-[var(--radius-pill)] animate-spin"
   ></div>
   <span class="sr-only">{label || 'Loading'}</span>
 </div>

package/dist/components/overlays/Toast.svelte

@@ -42,7 +42,7 @@ const ariaLiveMap = {
     error: 'assertive'
 };
 const animationClasses = $derived(position.startsWith('bottom')
-    ? 'animate-[fade-up_0.3s_var(--ease-luxe)]'
+    ? 'animate-[scale-in_0.2s_var(--ease-sharp)]'
     : 'animate-[fade-in_0.3s_var(--ease-luxe)]');
 const stackOffset = $derived(position.startsWith('bottom')
     ? `translateY(-${index * 5}rem)`
@@ -75,7 +75,7 @@ $effect(() => {
     style="transform: {stackOffset}"
   >
     <div
-      class="panel-floating rounded-[var(--radius-lg)] p-4 min-w-[20rem] max-w-md flex gap-3 items-start {variantBorderClasses[variant]}"
+      class="panel-floating rounded-[var(--radius-sm)] p-4 min-w-[20rem] max-w-md flex gap-3 items-start {variantBorderClasses[variant]}"
       role={roleMap[variant]}
       aria-live={ariaLiveMap[variant]}
       aria-atomic="true"

package/dist/components/overlays/Tooltip.svelte

@@ -87,7 +87,7 @@ $effect(() => {
     id={tooltipId}
     role="tooltip"
     aria-hidden={visible ? 'false' : 'true'}
-    class="absolute {placementClasses[actualPlacement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-md)] px-4 py-2.5 text-sm text-text whitespace-nowrap pointer-events-none {className} {visible ? 'animate-[fade-in_0.15s_var(--ease-luxe)] opacity-100' : 'opacity-0 invisible'}"
+    class="absolute {placementClasses[actualPlacement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-sm)] px-4 py-2.5 text-sm text-text whitespace-nowrap pointer-events-none {className} {visible ? 'animate-[fade-in_0.15s_var(--ease-luxe)] opacity-100' : 'opacity-0 invisible'}"
   >
     {content}
   </div>

package/dist/components/typography/Code.svelte

@@ -3,7 +3,7 @@ let { children } = $props();
 </script>
 
 <code
-	class="inline-flex items-center transition-all duration-300 hover:shadow-[0_0_12px_var(--color-accent-overlay-30)]"
+	class="inline-flex items-center"
 	style="background: var(--color-accent-overlay-10); border: 1px solid var(--color-border); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); font-family: var(--font-mono); color: var(--color-accent-soft); font-size: 0.9em;"
 >
 	{@render children?.()}

package/dist/components/utilities/Carousel.svelte

@@ -64,7 +64,7 @@ export {};
 </script>
 
 <div class="relative">
-  <div class="panel-raised rounded-[var(--radius-lg)] overflow-hidden">
+  <div class="panel-raised rounded-none overflow-hidden">
     <div
       class="flex transition-transform duration-300 ease-luxe"
       style="transform: translateX(-{currentIndex * 100}%);"
@@ -88,7 +88,7 @@ export {};
     <button
       type="button"
       onclick={goToPrev}
-      class="absolute left-2 top-1/2 -translate-y-1/2 obsidian-surface metal-edge rounded-full p-2 text-text hover:accent-glow transition-all"
+      class="absolute left-2 top-1/2 -translate-y-1/2 obsidian-surface metal-edge rounded-[var(--radius-sm)] p-2 text-text hover:border-[var(--color-border-strong)] transition-all"
       aria-label="Previous item"
     >
       <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -99,7 +99,7 @@ export {};
     <button
       type="button"
       onclick={goToNext}
-      class="absolute right-2 top-1/2 -translate-y-1/2 obsidian-surface metal-edge rounded-full p-2 text-text hover:accent-glow transition-all"
+      class="absolute right-2 top-1/2 -translate-y-1/2 obsidian-surface metal-edge rounded-[var(--radius-sm)] p-2 text-text hover:border-[var(--color-border-strong)] transition-all"
       aria-label="Next item"
     >
       <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -114,7 +114,7 @@ export {};
         <button
           type="button"
           onclick={() => goToIndex(index)}
-          class="w-2 h-2 rounded-full transition-all {index === currentIndex ? 'accent-glow bg-accent w-8' : 'bg-text-muted'}"
+          class="w-2 h-2 rounded-full transition-all {index === currentIndex ? 'bg-accent w-8' : 'bg-text-muted'}"
           aria-label="Go to item {index + 1}"
         >
         </button>

package/dist/components/utilities/Collapse.svelte

@@ -11,7 +11,7 @@ let effectiveOpen = $derived(onToggle ? open : openLocal);
 let maxHeight = $derived(effectiveOpen && contentElement ? `${contentElement.scrollHeight}px` : '0px');
 </script>
 
-<div class="border border-border rounded-md overflow-hidden {effectiveOpen ? 'panel-raised' : ''}">
+<div class="border border-border rounded-[var(--radius-sm)] overflow-hidden {effectiveOpen ? 'panel-raised' : ''}">
   <button
     id={headerId}
     type="button"

package/dist/components/utilities/Hero.svelte

@@ -37,6 +37,7 @@ let { title, text, features, children, class: className = '', ...restProps } = $
 
 	.hero-section {
 		text-align: center;
-		padding-bottom: 3rem;
-		margin-bottom: 3rem;
+		padding-top: 2rem;
+		padding-bottom: 4rem;
+		margin-bottom: 4rem;
 	}</style>

package/dist/components/utilities/SystemConsole.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">let { messages = [], prompt = '>', placeholder = 'Enter command...', height = '500px', maxHeight = '80vh', showTimestamps = false, autoScroll = true, typewriterEffect = false, typewriterSpeed = 50, showScanlines = true, glowEffect = true, onSubmit, disabled = false, class: className = '', ...restProps } = $props();
+<script lang="ts">let { messages = [], prompt = '>', placeholder = 'Enter command...', height = '500px', maxHeight = '80vh', showTimestamps = false, autoScroll = true, typewriterEffect = false, typewriterSpeed = 50, showScanlines = true, glowEffect = false, onSubmit, disabled = false, class: className = '', ...restProps } = $props();
 let inputValue = $state('');
 let consoleContainer = $state();
 let inputElement = $state();

package/dist/components/utilities/SystemInterface.svelte

@@ -633,8 +633,7 @@ export {};
 	}
 
 	.input-wrapper:focus-within {
-		border-color: var(--color-accent-overlay-50);
-		box-shadow: 0 0 20px var(--color-accent-overlay-20);
+		border-color: var(--color-accent);
 	}
 
 	.input-prompt {

package/dist/components/wizard/StepForm.svelte

@@ -89,7 +89,7 @@ const layoutClasses = $derived(() => {
 				{@render errorSnippet({ step: currentStep, errors: currentErrors })}
 			{:else if showErrors}
 				<div
-					class="mt-4 rounded-[var(--radius-lg)] border-l-4 border-[var(--color-error)] bg-[var(--color-error-overlay-10)] px-4 py-3"
+					class="mt-4 rounded-[var(--radius-sm)] border-l-4 border-[var(--color-error)] bg-[var(--color-error-overlay-10)] px-4 py-3"
 					role="alert"
 					aria-live="polite"
 				>

package/dist/index.d.ts

@@ -4,9 +4,9 @@
  * This is the main entry point for the component library.
  */
 import './theme.css';
-export declare const version = "0.7.9";
+export declare const version = "0.9.1";
 export { Button, IconButton, ButtonGroup, LinkButton, FloatingActionButton } from './components/buttons';
-export { Input, Textarea, Select, SelectMenu, Checkbox, Switch, RadioGroup, RangeSlider, FileUpload, InputGroup, DatePicker, TimePicker, DateTimePicker } from './components/forms';
+export { Input, Textarea, Select, SelectMenu, Checkbox, Switch, RadioGroup, RangeSlider, FileUpload, InputGroup, DatePicker, TimePicker, DateTimePicker, FormSection } from './components/forms';
 export { Card, Panel, Grid, Container, SectionHeader, Divider } from './components/cards';
 export { Navbar, Sidebar, Tabs, Breadcrumbs, Menu, DropdownMenu, ContextMenu } from './components/navigation';
 export { Modal, Alert, Spinner, Tooltip, ProgressBar, SkeletonLoader, Toast, ToastHost, toast, toasts, dismissToast, Drawer, Popover, Dropdown, CommandPalette } from './components/overlays';

package/dist/index.js

@@ -5,11 +5,11 @@
  */
 // Import theme CSS to ensure it's bundled
 import './theme.css';
-export const version = '0.7.9';
+export const version = '0.9.1';
 // ===== Button Components =====
 export { Button, IconButton, ButtonGroup, LinkButton, FloatingActionButton } from './components/buttons';
 // ===== Form Components =====
-export { Input, Textarea, Select, SelectMenu, Checkbox, Switch, RadioGroup, RangeSlider, FileUpload, InputGroup, DatePicker, TimePicker, DateTimePicker } from './components/forms';
+export { Input, Textarea, Select, SelectMenu, Checkbox, Switch, RadioGroup, RangeSlider, FileUpload, InputGroup, DatePicker, TimePicker, DateTimePicker, FormSection } from './components/forms';
 // ===== Layout Components =====
 export { Card, Panel, Grid, Container, SectionHeader, Divider } from './components/cards';
 // ===== Navigation Components =====