@mrintel/villain-ui 0.8.2 → 0.9.1

package/dist/components/forms/DateTimePicker.svelte

@@ -256,7 +256,7 @@ const errorClasses = $derived(hasError ? 'error-state' : '');
 			role="dialog"
 			aria-modal="true"
 			aria-label="Choose date and time"
-			class="datetime-picker-dropdown {variant === 'glass' ? 'glass-panel' : 'panel-floating'} rounded-lg overflow-hidden"
+			class="datetime-picker-dropdown {variant === 'glass' ? 'glass-panel' : 'panel-floating'} rounded-[var(--radius-sm)] overflow-hidden"
 			onclick={(e) => e.stopPropagation()}
 		>
 			<!-- Tab navigation -->
@@ -308,6 +308,8 @@ const errorClasses = $derived(hasError ? 'error-state' : '');
 						selectedDate={selectedDate}
 						onDateSelect={handleDateSelect}
 						highlightToday={true}
+						minDate={minDateStr ? new Date(minDateStr + 'T00:00:00') : undefined}
+						maxDate={maxDateStr ? new Date(maxDateStr + 'T00:00:00') : undefined}
 						class="calendar-picker"
 					/>
 				{:else}

package/dist/components/forms/FileUpload.svelte

@@ -67,7 +67,7 @@ const fileList = $derived(files ? Array.from(files) : []);
     ondrop={handleDrop}
     onclick={handleClick}
     onkeydown={(e) => e.key === 'Enter' && handleClick()}
-    class="panel-raised rounded-[var(--radius-lg)] p-8 text-center cursor-pointer transition-all duration-300 ease-luxe {isDragging ? 'border-2 border-accent accent-glow bg-base-2' : ''} {hasError && !isDragging ? 'border-2 border-error' : ''} {disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}"
+    class="panel-raised rounded-[var(--radius-sm)] p-8 text-center cursor-pointer transition-all duration-300 ease-luxe {isDragging ? 'border-2 border-accent accent-glow bg-base-2' : ''} {hasError && !isDragging ? 'border-2 border-error' : ''} {disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}"
   >
     <div class="flex flex-col items-center gap-2">
       {#if icon}

package/dist/components/forms/FormSection.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">let { legend, description, columns = 1, class: className = '', children, ...restProps } = $props();
+export {};
+</script>
+
+<fieldset class="border-0 p-0 m-0 min-w-0 {className}" {...restProps}>
+	{#if legend}
+		<legend
+			class="font-[var(--font-mono)] text-xs uppercase tracking-[0.08em] text-[var(--color-text-soft)] p-0 mb-2 w-full border-b border-[var(--color-border-subtle)] pb-3"
+		>
+			{legend}
+		</legend>
+	{/if}
+	{#if description}
+		<p class="text-sm text-[var(--color-text-soft)] mt-3 mb-6">{description}</p>
+	{:else if legend}
+		<div class="mt-6"></div>
+	{/if}
+	<div class="grid gap-5 {columns === 2 ? 'md:grid-cols-2' : ''}">
+		{@render children?.()}
+	</div>
+</fieldset>

package/dist/components/forms/FormSection.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Mono uppercase section label (e.g. "01 / IDENTITY"). */
+    legend?: string;
+    /** Supporting copy under the legend. */
+    description?: string;
+    /** Field layout: single column (default) or two columns on md+. */
+    columns?: 1 | 2;
+    class?: string;
+    children?: Snippet;
+}
+declare const FormSection: import("svelte").Component<Props, {}, "">;
+type FormSection = ReturnType<typeof FormSection>;
+export default FormSection;

package/dist/components/forms/InputGroup.svelte

@@ -2,6 +2,6 @@
 // No props needed for standard slot usage
 </script>
 
-<div class="flex items-stretch rounded-[var(--radius-lg)] overflow-hidden panel-raised [&>*:not(:first-child)]:ml-[-1px] [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none">
+<div class="flex items-stretch rounded-[var(--radius-sm)] overflow-hidden panel-raised [&>*:not(:first-child)]:ml-[-1px] [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none">
   <slot />
 </div>

package/dist/components/forms/RadioGroup.svelte

@@ -83,5 +83,4 @@ export {};
     height: 0.75rem;
     border-radius: var(--radius-pill);
     background: var(--color-accent);
-    box-shadow: var(--shadow-accent-glow);
   }</style>

package/dist/components/forms/RangeSlider.svelte

@@ -47,7 +47,6 @@ const percentage = $derived(max === min ? 0 : ((value - min) / (max - min)) * 10
     height: 1.25rem;
     border-radius: var(--radius-pill);
     background: var(--color-accent);
-    box-shadow: var(--shadow-accent-glow);
     cursor: pointer;
     transition: transform 0.2s var(--ease-luxe);
   }
@@ -62,7 +61,6 @@ const percentage = $derived(max === min ? 0 : ((value - min) / (max - min)) * 10
     height: 1.25rem;
     border-radius: var(--radius-pill);
     background: var(--color-accent);
-    box-shadow: var(--shadow-accent-glow);
     cursor: pointer;
     transition: transform 0.2s var(--ease-luxe);
     border: none;
@@ -73,15 +71,13 @@ const percentage = $derived(max === min ? 0 : ((value - min) / (max - min)) * 10
   }
 
   input[type="range"]:focus::-webkit-slider-thumb {
-    box-shadow: 
-      var(--shadow-accent-glow),
+    box-shadow:
       0 0 0 3px var(--color-base-1),
       0 0 0 5px var(--color-accent);
   }
 
   input[type="range"]:focus::-moz-range-thumb {
-    box-shadow: 
-      var(--shadow-accent-glow),
+    box-shadow:
       0 0 0 3px var(--color-base-1),
       0 0 0 5px var(--color-accent);
   }

package/dist/components/forms/SelectMenu.svelte

@@ -86,16 +86,17 @@ function handleListboxKeyDown(event) {
             break;
     }
 }
-function scrollOptionIntoView(index) {
+function scrollOptionIntoView(index, block = 'nearest') {
     requestAnimationFrame(() => {
         const optionEl = listboxElement?.querySelector(`[data-index="${index}"]`);
-        optionEl?.scrollIntoView({ block: 'nearest' });
+        optionEl?.scrollIntoView({ block });
     });
 }
-// Set highlighted index and focus listbox when dropdown opens
+// Set highlighted index, scroll it into view, and focus listbox when dropdown opens
 $effect(() => {
     if (open) {
         highlightedIndex = selectedIndex >= 0 ? selectedIndex : 0;
+        scrollOptionIntoView(highlightedIndex, 'center');
         if (listboxElement) {
             requestAnimationFrame(() => listboxElement?.focus());
         }

package/dist/components/forms/Switch.svelte

@@ -14,7 +14,7 @@ const hasError = $derived(error || !!validationMessage);
       {disabled}
       bind:checked
       onchange={onchange}
-      class="w-14 h-7 rounded-pill bg-base-3 border appearance-none transition-all duration-300 ease-luxe cursor-pointer checked:bg-accent checked:accent-glow focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-base-1 relative {hasError ? 'border-error' : 'border-border'} {disabled ? 'cursor-not-allowed' : ''}"
+      class="w-14 h-7 rounded-pill bg-base-3 border appearance-none transition-all duration-300 ease-luxe cursor-pointer checked:bg-accent focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-base-1 relative {hasError ? 'border-error' : 'border-border'} {disabled ? 'cursor-not-allowed' : ''}"
     />
     {#if iconBefore}
       <span class="inline-flex items-center justify-center text-text-soft">

package/dist/components/forms/TimePicker.svelte

@@ -169,7 +169,7 @@ const errorClasses = $derived(hasError ? 'error-state' : '');
 			role="dialog"
 			aria-modal="true"
 			aria-label="Choose time"
-			class="time-picker-dropdown {variant === 'glass' ? 'glass-panel' : 'panel-floating'} rounded-lg overflow-hidden"
+			class="time-picker-dropdown {variant === 'glass' ? 'glass-panel' : 'panel-floating'} rounded-[var(--radius-sm)] overflow-hidden"
 		>
 			<TimePickerGrid
 				bind:hours={selectedHours}

package/dist/components/forms/TimePickerGrid.svelte

@@ -445,7 +445,6 @@ $effect(() => {
 		border-color: var(--color-accent);
 		color: var(--color-base-0);
 		font-weight: 700;
-		box-shadow: 0 0 12px var(--color-accent-glow);
 	}
 
 	.time-option.disabled,
@@ -482,8 +481,6 @@ $effect(() => {
 
 	.confirm-button:hover:not(:disabled) {
 		background: var(--color-accent-hover);
-		box-shadow: 0 0 20px var(--color-accent-glow);
-		transform: translateY(-1px);
 	}
 
 	.confirm-button:active:not(:disabled) {

package/dist/components/forms/formClasses.d.ts

@@ -1,3 +1,3 @@
-export declare const baseInputClasses = "glass-panel rounded-[var(--radius-lg)] px-5 py-3.5 font-body text-text placeholder:text-text-muted transition-all duration-300 ease-luxe w-full";
-export declare const focusClasses = "focus:outline-none focus:border-accent focus:accent-glow";
+export declare const baseInputClasses = "input-well rounded-[var(--radius-sm)] px-5 py-3.5 font-body text-text placeholder:text-text-muted transition-all duration-150 ease-luxe w-full";
+export declare const focusClasses = "focus:outline-none focus:border-[var(--color-accent)]";
 export declare const disabledClasses = "opacity-50 cursor-not-allowed";

package/dist/components/forms/formClasses.js

@@ -1,3 +1,3 @@
-export const baseInputClasses = 'glass-panel rounded-[var(--radius-lg)] px-5 py-3.5 font-body text-text placeholder:text-text-muted transition-all duration-300 ease-luxe w-full';
-export const focusClasses = 'focus:outline-none focus:border-accent focus:accent-glow';
+export const baseInputClasses = 'input-well rounded-[var(--radius-sm)] px-5 py-3.5 font-body text-text placeholder:text-text-muted transition-all duration-150 ease-luxe w-full';
+export const focusClasses = 'focus:outline-none focus:border-[var(--color-accent)]';
 export const disabledClasses = 'opacity-50 cursor-not-allowed';

package/dist/components/forms/index.d.ts

@@ -11,3 +11,4 @@ export { default as DatePicker } from './DatePicker.svelte';
 export { default as TimePicker } from './TimePicker.svelte';
 export { default as DateTimePicker } from './DateTimePicker.svelte';
 export { default as SelectMenu } from './SelectMenu.svelte';
+export { default as FormSection } from './FormSection.svelte';

package/dist/components/forms/index.js

@@ -11,3 +11,4 @@ export { default as DatePicker } from './DatePicker.svelte';
 export { default as TimePicker } from './TimePicker.svelte';
 export { default as DateTimePicker } from './DateTimePicker.svelte';
 export { default as SelectMenu } from './SelectMenu.svelte';
+export { default as FormSection } from './FormSection.svelte';

package/dist/components/navigation/Breadcrumbs.svelte

@@ -9,7 +9,7 @@ export {};
         {#if item.href}
           <a
             href={item.href}
-            class="flex items-center gap-2 text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)]"
+            class="flex items-center gap-2 text-xs font-[var(--font-mono)] uppercase tracking-[0.08em] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)]"
           >
             {#if item.icon}
               <span class="inline-flex items-center justify-center">
@@ -21,7 +21,7 @@ export {};
         {:else if item.onclick}
           <button
             onclick={item.onclick}
-            class="flex items-center gap-2 text-sm font-[var(--font-body)] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)] cursor-pointer"
+            class="flex items-center gap-2 text-xs font-[var(--font-mono)] uppercase tracking-[0.08em] text-[var(--color-text-soft)] hover:text-[var(--color-accent)] hover:underline transition-colors duration-200 ease-[var(--ease-luxe)] cursor-pointer"
           >
             {#if item.icon}
               <span class="inline-flex items-center justify-center">
@@ -31,7 +31,7 @@ export {};
             {item.label}
           </button>
         {:else}
-          <span class="flex items-center gap-2 text-sm font-[var(--font-body)] {index === items.length - 1 ? 'text-[var(--color-text)]' : 'text-[var(--color-text-soft)]'}">
+          <span class="flex items-center gap-2 text-xs font-[var(--font-mono)] uppercase tracking-[0.08em] {index === items.length - 1 ? 'text-[var(--color-text)]' : 'text-[var(--color-text-soft)]'}">
             {#if item.icon}
               <span class="inline-flex items-center justify-center">
                 {@render item.icon()}

package/dist/components/navigation/ContextMenu.svelte

@@ -111,7 +111,7 @@ $effect(() => {
     role="menu"
     tabindex="-1"
     onkeydown={handleMenuKeyDown}
-    class="fixed z-[var(--z-50)] glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-in_0.15s_var(--ease-luxe)]"
+    class="fixed z-[var(--z-50)] glass-panel rounded-[var(--radius-sm)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-in_0.15s_var(--ease-luxe)]"
     style="left: {x}px; top: {y}px;"
   >
     {#each items as item, index}
@@ -121,7 +121,7 @@ $effect(() => {
         tabindex={index === selectedIndex ? 0 : -1}
         onclick={() => handleItemClick(item)}
         disabled={item.disabled}
-        class="w-full text-left px-4 py-2 text-sm text-text hover:bg-base-3 transition-colors duration-200 flex items-center gap-2 {item.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
+        class="w-full text-left px-4 py-2 font-[var(--font-mono)] text-xs uppercase tracking-[0.08em] text-text hover:bg-base-3 transition-colors duration-200 flex items-center gap-2 {item.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
       >
         {#if item.icon}
           {@render item.icon()}

package/dist/components/navigation/DropdownMenu.svelte

@@ -117,7 +117,7 @@ $effect(() => {
       role="menu"
       tabindex="-1"
       onkeydown={handleMenuKeyDown}
-      class="absolute {placementClasses[placement]} z-[var(--z-50)] glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-up_0.2s_var(--ease-luxe)]"
+      class="absolute {placementClasses[placement]} z-[var(--z-50)] glass-panel rounded-[var(--radius-sm)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[scale-in_0.15s_var(--ease-sharp)]"
     >
       {#each items as item, index}
         <button
@@ -126,7 +126,7 @@ $effect(() => {
           tabindex={index === selectedIndex ? 0 : -1}
           onclick={() => handleItemClick(item)}
           disabled={item.disabled}
-          class="w-full text-left px-4 py-2 text-sm text-text hover:bg-base-3 transition-colors duration-200 flex items-center gap-2 {item.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
+          class="w-full text-left px-4 py-2 font-[var(--font-mono)] text-xs uppercase tracking-[0.08em] text-text hover:bg-base-3 transition-colors duration-200 flex items-center gap-2 {item.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
         >
           {#if item.icon}
             {@render item.icon()}

package/dist/components/navigation/Menu.svelte

@@ -49,7 +49,7 @@ $effect(() => {
 export {};
 </script>
 
-<div bind:this={menuContainer} role="menu" tabindex="-1" onkeydown={handleMenuKeyDown} class="glass-panel rounded-[var(--radius-lg)] p-3 shadow-[var(--shadow-deep)]">
+<div bind:this={menuContainer} role="menu" tabindex="-1" onkeydown={handleMenuKeyDown} class="glass-panel rounded-[var(--radius-sm)] p-3 shadow-[var(--shadow-deep)]">
   {#if children}
     {@render children()}
   {:else if items}
@@ -60,7 +60,7 @@ export {};
         tabindex={index === selectedIndex ? 0 : -1}
         onclick={() => handleItemClick(item)}
         disabled={item.disabled}
-        class="flex items-center gap-2 w-full px-4 py-3 rounded-[var(--radius-md)] text-[var(--color-text)] text-sm font-[var(--font-body)] hover:bg-[var(--color-base-3)] hover-lift transition-all duration-200 ease-[var(--ease-luxe)] {item.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
+        class="flex items-center gap-2 w-full px-4 py-3 rounded-[var(--radius-sm)] text-[var(--color-text)] text-xs font-[var(--font-mono)] uppercase tracking-[0.08em] hover:bg-[var(--color-base-3)] hover-lift transition-all duration-200 ease-[var(--ease-luxe)] {item.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
       >
         {#if item.icon}
           {@render item.icon()}

package/dist/components/navigation/Navbar.svelte

@@ -80,9 +80,18 @@ export {};
 </nav>
 
 <style>
+  /* System text: navigation is mono, uppercase, tracked */
+  nav :global(a),
+  nav :global(button) {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
   nav :global(.navbar-logo) {
     color: var(--color-accent);
-    font-weight: 600;
+    font-weight: 700;
     font-size: var(--text-lg);
   }
 
@@ -102,7 +111,6 @@ export {};
     right: 0;
     height: 2px;
     background: var(--color-accent);
-    box-shadow: var(--shadow-accent-glow);
   }
 
   nav :global(a:not(.active):hover),

package/dist/components/navigation/Sidebar.svelte

@@ -171,7 +171,7 @@ export {};
     justify-content: center;
     width: 2.5rem;
     height: 2.5rem;
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-sm);
     background: var(--color-accent-overlay-20);
     color: var(--color-accent);
     font-weight: 600;
@@ -204,11 +204,6 @@ export {};
     font-weight: 600;
   }
 
-  aside :global(a.active),
-  aside :global(button.active) {
-    box-shadow: var(--shadow-accent-glow);
-  }
-
   aside :global(a:not(.active):hover),
   aside :global(button:not(.active):hover) {
     background: var(--color-base-3);
@@ -222,7 +217,7 @@ export {};
     gap: 0.75rem;
     padding: 0.75rem 1rem;
     margin: 0.25rem 0.5rem;
-    border-radius: var(--radius-md);
+    border-radius: 0;
     color: var(--color-text-soft);
     text-decoration: none;
     transition: all 0.2s var(--ease-luxe);
@@ -231,6 +226,8 @@ export {};
     background: transparent;
     width: calc(100% - 1rem);
     text-align: left;
-    font-family: var(--font-body);
-    font-size: 0.875rem;
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
   }</style>

package/dist/components/navigation/Tabs.svelte

@@ -59,7 +59,7 @@ const orientationClasses = {
     horizontal: 'flex flex-row',
     vertical: 'flex flex-col'
 };
-const radiusClass = variant === 'pills' ? 'rounded-pill' : 'rounded-[var(--radius-md)]';
+const radiusClass = variant === 'pills' ? 'rounded-pill' : 'rounded-none';
 export {};
 </script>
 
@@ -73,7 +73,7 @@ export {};
       onclick={() => handleTabClick(tab.id, tab.disabled)}
       onkeydown={(e) => handleKeyDown(e, tab.id)}
       disabled={tab.disabled}
-      class="flex items-center gap-2 px-6 py-3 {radiusClass} font-body text-sm transition-all duration-300 ease-luxe {activeTab === tab.id ? 'bg-accent text-text accent-glow' : 'text-text-soft hover:bg-base-3'} {tab.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
+      class="flex items-center gap-2 px-6 py-3 {radiusClass} font-mono text-xs uppercase tracking-[0.08em] transition-all duration-150 ease-luxe {activeTab === tab.id ? 'bg-accent text-text' : 'text-text-soft hover:bg-base-3'} {tab.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
     >
       {#if tab.iconBefore}
         <span class="inline-flex items-center justify-center">

package/dist/components/overlays/Alert.svelte

@@ -40,7 +40,7 @@ export {};
 
 {#if visible}
   <div
-    class="glass-panel rounded-[var(--radius-lg)] p-4 flex gap-3 {variantClasses[variant]} {className} animate-[fade-in_0.2s_var(--ease-sharp)]"
+    class="glass-panel rounded-[var(--radius-sm)] p-4 flex gap-3 {variantClasses[variant]} {className} animate-[fade-in_0.2s_var(--ease-sharp)]"
     role={roleMap[variant]}
     aria-live={ariaLiveMap[variant]}
   >

package/dist/components/overlays/CommandPalette.svelte

@@ -103,12 +103,12 @@ $effect(() => {
 
 {#if open}
   <div
-    class="fixed inset-0 z-[var(--z-50)] flex items-start justify-center pt-[20vh] p-4 bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
+    class="fixed inset-0 z-[var(--z-50)] flex items-start justify-center pt-[20vh] p-4 bg-overlay animate-[fade-in_0.2s_var(--ease-luxe)]"
     onclick={handleBackdropClick}
     role="presentation"
   >
     <div
-      class="panel-floating rounded-xl shadow-deep w-full max-w-[36rem] animate-[fade-up_0.3s_var(--ease-luxe)]"
+      class="panel-floating rounded-[var(--radius-md)] shadow-deep w-full max-w-[36rem] animate-[scale-in_0.2s_var(--ease-sharp)]"
       role="combobox"
       aria-expanded="true"
       aria-haspopup="listbox"

package/dist/components/overlays/Drawer.svelte

@@ -34,10 +34,10 @@ const positionClasses = {
     bottom: 'bottom-0 left-0 w-full'
 };
 const animationClasses = {
-    left: 'animate-[slide-in-left_0.3s_var(--ease-luxe)]',
-    right: 'animate-[slide-in-right_0.3s_var(--ease-luxe)]',
-    top: 'animate-[slide-in-top_0.3s_var(--ease-luxe)]',
-    bottom: 'animate-[slide-in-bottom_0.3s_var(--ease-luxe)]'
+    left: 'animate-[slide-in-left_0.2s_var(--ease-sharp)]',
+    right: 'animate-[slide-in-right_0.2s_var(--ease-sharp)]',
+    top: 'animate-[slide-in-top_0.2s_var(--ease-sharp)]',
+    bottom: 'animate-[slide-in-bottom_0.2s_var(--ease-sharp)]'
 };
 function handleClose() {
     open = false;
@@ -106,7 +106,7 @@ $effect(() => {
 
 {#if open}
   <div
-    class="fixed inset-0 z-[var(--z-50)] bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
+    class="fixed inset-0 z-[var(--z-50)] bg-overlay animate-[fade-in_0.2s_var(--ease-luxe)]"
     onclick={handleBackdropClick}
     role="presentation"
   >

package/dist/components/overlays/Dropdown.svelte

@@ -76,7 +76,7 @@ $effect(() => {
     <div
       bind:this={dropdownElement}
       id={dropdownId}
-      class="absolute {placementClasses[placement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-up_0.2s_var(--ease-luxe)]"
+      class="absolute {placementClasses[placement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-sm)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[scale-in_0.15s_var(--ease-sharp)]"
       style={fullWidth && triggerWidth > 0 ? `width: ${triggerWidth}px` : ''}
       role="menu"
     >

package/dist/components/overlays/Modal.svelte

@@ -77,13 +77,13 @@ $effect(() => {
 
 {#if open}
   <div
-    class="fixed inset-0 z-[var(--z-50)] flex items-center justify-center p-4 bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
+    class="fixed inset-0 z-[var(--z-50)] flex items-center justify-center p-4 bg-overlay animate-[fade-in_0.2s_var(--ease-luxe)]"
     onclick={handleBackdropClick}
     role="presentation"
   >
     <div
       bind:this={modalElement}
-      class="panel-floating rounded-[var(--radius-lg)] shadow-deep w-full {sizeClasses[size]} {className} animate-[fade-up_0.3s_var(--ease-luxe)] flex flex-col max-h-[90vh]"
+      class="panel-floating rounded-[var(--radius-md)] shadow-deep w-full {sizeClasses[size]} {className} animate-[scale-in_0.2s_var(--ease-sharp)] flex flex-col max-h-[90vh]"
       role="dialog"
       aria-modal="true"
       aria-labelledby={title ? titleId : undefined}

package/dist/components/overlays/Popover.svelte

@@ -97,7 +97,7 @@ $effect(() => {
     <div
       bind:this={popoverElement}
       id={popoverId}
-      class="absolute {placementClasses[actualPlacement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-lg)] shadow-deep p-4 animate-[fade-up_0.2s_var(--ease-luxe)]"
+      class="absolute {placementClasses[actualPlacement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-sm)] shadow-deep p-4 animate-[scale-in_0.15s_var(--ease-sharp)]"
       role="dialog"
     >
       {@render children?.()}

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();