@salmexio/ui 1.0.0 → 1.1.0

package/dist/layout/ThermalBackground/ThermalBackground.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    /** Show film grain overlay */
+    grain?: boolean;
+    /** Show radar sweep line */
+    sweep?: boolean;
+    /** Blob intensity: low = barely visible, default = subtle, high = pronounced */
+    intensity?: 'low' | 'default' | 'high';
+    /** Additional CSS class */
+    class?: string;
+    /** Test ID */
+    testId?: string;
+}
+declare const ThermalBackground: import("svelte").Component<Props, {}, "">;
+type ThermalBackground = ReturnType<typeof ThermalBackground>;
+export default ThermalBackground;
+//# sourceMappingURL=ThermalBackground.svelte.d.ts.map

package/dist/layout/ThermalBackground/ThermalBackground.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThermalBackground.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/ThermalBackground/ThermalBackground.svelte.ts"],"names":[],"mappings":"AAGC,UAAU,KAAK;IACd,8BAA8B;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gFAAgF;IAChF,SAAS,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC;IACvC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAuCF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/layout/ThermalBackground/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ThermalBackground } from './ThermalBackground.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/ThermalBackground/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/ThermalBackground/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/layout/ThermalBackground/index.js

@@ -0,0 +1 @@
+export { default as ThermalBackground } from './ThermalBackground.svelte';

package/dist/layout/index.d.ts

@@ -1,3 +1,4 @@
 export { Card } from './Card/index.js';
 export { Container } from './Container/index.js';
+export { ThermalBackground } from './ThermalBackground/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/layout/index.js

@@ -1,2 +1,3 @@
 export { Card } from './Card/index.js';
 export { Container } from './Container/index.js';
+export { ThermalBackground } from './ThermalBackground/index.js';

package/dist/navigation/CommandPalette/CommandPalette.svelte

@@ -1,7 +1,7 @@
 <!--
   @component CommandPalette
 
-  Neo-Brutalist Dark — Premium keyboard-first command launcher.
+  INFRARED — Premium keyboard-first command launcher.
   Glass backdrop, entrance animations, fuzzy search with match highlighting,
   categorised results, shortcut display, live result count announcements.
 
@@ -515,7 +515,7 @@ function getItemId(itemId: string): string {
 	.sx-command-search-icon {
 		flex-shrink: 0;
 		display: flex;
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 		opacity: 0.7;
 	}
 
@@ -639,13 +639,13 @@ function getItemId(itemId: string): string {
 	}
 
 	.sx-command-item-active {
-		background: var(--sx-color-cyan-hover);
+		background: var(--sx-color-primary-hover);
 		color: var(--sx-color-text);
-		border-left-color: var(--sx-color-cyan);
+		border-left-color: var(--sx-color-primary);
 	}
 
 	.sx-command-item:active:not(.sx-command-item-disabled) {
-		background: var(--sx-color-cyan-active);
+		background: var(--sx-color-primary-active);
 	}
 
 	.sx-command-item-disabled {
@@ -664,7 +664,7 @@ function getItemId(itemId: string): string {
 	}
 
 	.sx-command-item-active .sx-command-item-icon {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-command-item-content {
@@ -691,12 +691,12 @@ function getItemId(itemId: string): string {
 	/* Match highlighting */
 	.sx-command-match {
 		background: none;
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 		font-weight: 700;
 	}
 
 	.sx-command-item-active .sx-command-match {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-command-item-desc {

package/dist/navigation/CommandPalette/CommandPalette.svelte.d.ts

@@ -30,7 +30,7 @@ interface Props {
 /**
  * CommandPalette
  *
- * Neo-Brutalist Dark — Premium keyboard-first command launcher.
+ * INFRARED — Premium keyboard-first command launcher.
  * Glass backdrop, entrance animations, fuzzy search with match highlighting,
  * categorised results, shortcut display, live result count announcements.
  *

package/dist/navigation/Tabs/Tabs.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Tabs
 
-  Neo-Brutalist Dark tabbed interface with underline indicator.
+  INFRARED tabbed interface with underline indicator.
   Clean structure, dark surfaces, world-class accessibility.
 
   @example
@@ -266,23 +266,52 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 
 	.sx-tab:hover:not(.sx-tab-disabled):not(.sx-tab-selected) {
 		color: var(--sx-color-text);
-		background: var(--sx-color-cyan-subtle);
+		background: var(--sx-color-primary-subtle);
 	}
 
 	.sx-tab:active:not(.sx-tab-disabled):not(.sx-tab-selected) {
-		background: var(--sx-color-cyan-hover);
+		background: var(--sx-color-primary-hover);
 	}
 
-	/* Selected tab — underline indicator */
+	/* Selected tab — underline indicator via ::after for smooth transitions */
 	.sx-tab-selected {
 		color: var(--sx-color-text);
 		font-weight: 600;
-		border-bottom-color: var(--sx-color-cyan);
+		border-bottom-color: transparent;
 	}
 
-	/* Focus — cyan ring */
+	/* Animated underline — scales in horizontally on select */
+	.sx-tab::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: var(--sx-space-4);
+		right: var(--sx-space-4);
+		height: 2px;
+		background: var(--sx-color-primary);
+		border-radius: 1px;
+		transform: scaleX(0);
+		transform-origin: center;
+		transition: transform var(--sx-duration-base) var(--sx-ease-out);
+	}
+
+	.sx-tab-sm::after {
+		left: var(--sx-space-3);
+		right: var(--sx-space-3);
+	}
+
+	.sx-tab-lg::after {
+		left: var(--sx-space-5);
+		right: var(--sx-space-5);
+	}
+
+	.sx-tab-selected::after {
+		transform: scaleX(1);
+	}
+
+	/* Focus — primary ring */
 	.sx-tab:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: -2px;
 		border-radius: var(--sx-radius-sm);
 	}
@@ -313,16 +342,16 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 		min-width: 18px;
 		height: 18px;
 		padding: 0 var(--sx-space-1-5);
-		background: var(--sx-color-cyan-active);
+		background: var(--sx-color-primary-active);
 		border: none;
 		font-size: var(--sx-text-xs);
 		font-weight: 600;
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 		border-radius: var(--sx-radius-full);
 	}
 
 	.sx-tab-selected .sx-tab-badge {
-		background: rgba(0, 212, 255, 0.18);
+		background: rgba(255, 107, 53, 0.18);
 	}
 
 	/* ========================================
@@ -371,5 +400,9 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 		.sx-tab {
 			transition: none;
 		}
+
+		.sx-tab::after {
+			transition: none;
+		}
 	}
 </style>

package/dist/navigation/Tabs/Tabs.svelte.d.ts

@@ -41,7 +41,7 @@ interface Props {
 /**
  * Tabs
  *
- * Neo-Brutalist Dark tabbed interface with underline indicator.
+ * INFRARED tabbed interface with underline indicator.
  * Clean structure, dark surfaces, world-class accessibility.
  *
  * @example

package/dist/primitives/Badge/Badge.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Badge
 
-  Neo-Brutalist Dark — Status badge for labels, counts, and states.
+  INFRARED — Status badge for labels, counts, and states.
   Pill-shaped, translucent backgrounds, role="status" for screen readers.
 
   @example
@@ -90,6 +90,7 @@ let {
 		transition: box-shadow var(--sx-transition-fast);
 		border: 1px solid transparent;
 		box-shadow: none;
+		animation: sx-badge-pop 200ms var(--sx-ease-spring) both;
 	}
 
 	/* Pill shape for all non-dot badges */
@@ -153,7 +154,7 @@ let {
 	}
 
 	/* ========================================
-	   STATUS VARIANTS - Neo-Brutalist Dark
+	   STATUS VARIANTS - INFRARED
 	   ======================================== */
 
 	/* Neutral */
@@ -167,14 +168,14 @@ let {
 		border: none;
 	}
 
-	/* Primary — cyan */
+	/* Primary — vermilion */
 	.sx-badge-primary {
-		background: var(--sx-color-cyan-active);
-		color: var(--sx-color-cyan);
+		background: var(--sx-color-primary-active);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-badge-dot.sx-badge-primary {
-		background: var(--sx-color-cyan);
+		background: var(--sx-color-primary);
 		border: none;
 	}
 
@@ -189,14 +190,14 @@ let {
 		border: none;
 	}
 
-	/* Warning — gold */
+	/* Warning — brass */
 	.sx-badge-warning {
-		background: var(--sx-color-gold-subtle);
-		color: var(--sx-color-gold);
+		background: var(--sx-color-brass-subtle);
+		color: var(--sx-color-secondary);
 	}
 
 	.sx-badge-dot.sx-badge-warning {
-		background: var(--sx-color-gold);
+		background: var(--sx-color-secondary);
 		border: none;
 	}
 
@@ -211,14 +212,14 @@ let {
 		border: none;
 	}
 
-	/* Info — purple */
+	/* Info — teal */
 	.sx-badge-info {
-		background: var(--sx-color-purple-subtle);
-		color: var(--sx-color-purple);
+		background: var(--sx-color-teal-subtle);
+		color: var(--sx-color-teal);
 	}
 
 	.sx-badge-dot.sx-badge-info {
-		background: var(--sx-color-purple);
+		background: var(--sx-color-teal);
 		border: none;
 	}
 
@@ -237,6 +238,7 @@ let {
 	@media (prefers-reduced-motion: reduce) {
 		.sx-badge {
 			transition: none;
+			animation: none;
 		}
 	}
 </style>

package/dist/primitives/Badge/Badge.svelte.d.ts

@@ -20,7 +20,7 @@ interface Props {
 /**
  * Badge
  *
- * Neo-Brutalist Dark — Status badge for labels, counts, and states.
+ * INFRARED — Status badge for labels, counts, and states.
  * Pill-shaped, translucent backgrounds, role="status" for screen readers.
  *
  * @example

package/dist/primitives/Button/Button.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Button
 
-  Neo-Brutalist Dark — Glassmorphism button with glow effects.
+  INFRARED — Glassmorphism button with glow effects.
   Clean geometry, expressive energy, world-class accessibility.
 
   @example
@@ -107,7 +107,7 @@ const isDisabled = $derived(disabled);
 
 <style>
 	/* ========================================
-	   BASE BUTTON - Neo-Brutalist Dark
+	   BASE BUTTON - INFRARED
 	   ======================================== */
 	.sx-btn {
 		position: relative;
@@ -134,11 +134,11 @@ const isDisabled = $derived(disabled);
 
 	/* Focus */
 	.sx-btn:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
 	}
 
-	/* Primary focus needs white outline since cyan-on-cyan is invisible */
+	/* Primary focus needs white outline since vermilion-on-vermilion is invisible */
 	.sx-btn-primary:focus-visible {
 		outline-color: var(--sx-white);
 	}
@@ -206,7 +206,7 @@ const isDisabled = $derived(disabled);
 	}
 
 	/* ========================================
-	   VARIANT STYLES - Neo-Brutalist Dark
+	   VARIANT STYLES - INFRARED
 	   ======================================== */
 
 	/* Default variant */
@@ -216,22 +216,86 @@ const isDisabled = $derived(disabled);
 		border: 1px solid var(--sx-color-border-strong);
 	}
 
-	/* Primary variant — cyan glow */
+	/* Primary variant — Aurora grain.
+	   Two-layer background: mostly-opaque vermilion on top with slight
+	   edge transparency, a slow-drifting brass/teal/vermilion aurora
+	   underneath that bleeds through at the margins. SVG noise grain
+	   overlay for tactile feel. Breathing glow pulse at rest. */
 	.sx-btn-primary {
-		background: var(--sx-color-cyan);
+		background:
+			radial-gradient(
+				ellipse at center,
+				rgba(255, 107, 53, 0.97) 25%,
+				rgba(255, 107, 53, 0.82) 100%
+			),
+			linear-gradient(
+				135deg,
+				#C8A84E 0%,
+				#3D8B8B 35%,
+				#FF6B35 65%,
+				#C8A84E 100%
+			);
+		background-size: 100% 100%, 280% 280%;
 		color: var(--sx-color-text-inverse);
 		border: none;
 		font-weight: 600;
+		overflow: hidden;
+		animation:
+			sx-primary-aurora 10s ease-in-out infinite,
+			sx-primary-glow 4s ease-in-out infinite;
+	}
+
+	/* Grain texture — SVG feTurbulence noise at low opacity */
+	.sx-btn-primary::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		opacity: 0.06;
+		mix-blend-mode: overlay;
+		background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+	}
+
+	/* Aurora drift — moves the underlayer gradient position */
+	@keyframes sx-primary-aurora {
+		0%, 100% { background-position: center, 0% 50%; }
+		33% { background-position: center, 100% 0%; }
+		66% { background-position: center, 50% 100%; }
+	}
+
+	/* Breathing glow pulse */
+	@keyframes sx-primary-glow {
+		0%, 100% {
+			box-shadow:
+				var(--sx-shadow-sm),
+				0 0 12px -3px rgba(255, 107, 53, 0.3);
+		}
+		50% {
+			box-shadow:
+				var(--sx-shadow-sm),
+				0 0 20px -2px rgba(255, 107, 53, 0.5);
+		}
 	}
 
 	.sx-btn-primary:hover:not(:disabled) {
 		transform: translateY(-2px);
-		box-shadow: var(--sx-shadow-glow-cyan);
+		animation:
+			sx-primary-aurora 10s ease-in-out infinite;
+		box-shadow:
+			var(--sx-shadow-md),
+			0 0 24px -3px rgba(255, 107, 53, 0.55);
 	}
 
 	.sx-btn-primary:active:not(:disabled) {
 		transform: translateY(0);
-		box-shadow: var(--sx-shadow-sm);
+		box-shadow:
+			var(--sx-shadow-sm),
+			0 0 8px -2px rgba(255, 107, 53, 0.2);
+	}
+
+	.sx-btn-primary:disabled {
+		animation-play-state: paused;
 	}
 
 	/* Ghost variant — transparent, subtle */
@@ -259,14 +323,14 @@ const isDisabled = $derived(disabled);
 	.sx-btn-danger {
 		background: var(--sx-color-red-hover);
 		color: var(--sx-color-red);
-		border: 1px solid rgba(255, 59, 59, 0.2);
+		border: 1px solid rgba(220, 38, 38, 0.2);
 	}
 
 	.sx-btn-danger:hover:not(:disabled) {
-		background: rgba(255, 59, 59, 0.2);
+		background: rgba(220, 38, 38, 0.2);
 		transform: translateY(-2px);
 		box-shadow: var(--sx-shadow-glow-red);
-		border-color: rgba(255, 59, 59, 0.4);
+		border-color: rgba(220, 38, 38, 0.4);
 	}
 
 	.sx-btn-danger:active:not(:disabled) {
@@ -302,15 +366,15 @@ const isDisabled = $derived(disabled);
 		border-radius: var(--sx-radius-sm);
 	}
 
-	/* Shortcut on primary: white text on darker translucent bg */
+	/* Shortcut on primary: semi-transparent against the vermilion fill */
 	.sx-btn-primary .sx-btn-shortcut {
-		background: rgba(0, 0, 0, 0.3);
-		color: var(--sx-white);
+		background: rgba(0, 0, 0, 0.15);
+		color: var(--sx-color-text-inverse);
 	}
 
 	/* Shortcut on danger: match the red text */
 	.sx-btn-danger .sx-btn-shortcut {
-		background: rgba(255, 59, 59, 0.15);
+		background: rgba(220, 38, 38, 0.15);
 		color: var(--sx-color-red);
 	}
 
@@ -335,5 +399,12 @@ const isDisabled = $derived(disabled);
 		.sx-btn:active:not(:disabled) {
 			transform: none;
 		}
+
+		/* Fallback: solid vermilion, no aurora/glow animation */
+		.sx-btn-primary {
+			animation: none;
+			background: var(--sx-color-primary);
+			box-shadow: var(--sx-shadow-sm);
+		}
 	}
 </style>

package/dist/primitives/Button/Button.svelte.d.ts

@@ -27,7 +27,7 @@ interface Props extends Omit<HTMLButtonAttributes, 'class'> {
 /**
  * Button
  *
- * Neo-Brutalist Dark — Glassmorphism button with glow effects.
+ * INFRARED — Glassmorphism button with glow effects.
  * Clean geometry, expressive energy, world-class accessibility.
  *
  * @example

package/dist/primitives/Tooltip/Tooltip.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Tooltip
 
-  Neo-Brutalist Dark — Accessible tooltip with configurable placement,
+  INFRARED — Accessible tooltip with configurable placement,
   keyboard support, hover/focus triggers, and arrow indicator.
   Uses fixed positioning with smart viewport-aware flipping.
 

package/dist/primitives/Tooltip/Tooltip.svelte.d.ts

@@ -18,7 +18,7 @@ interface Props {
 /**
  * Tooltip
  *
- * Neo-Brutalist Dark — Accessible tooltip with configurable placement,
+ * INFRARED — Accessible tooltip with configurable placement,
  * keyboard support, hover/focus triggers, and arrow indicator.
  * Uses fixed positioning with smart viewport-aware flipping.
  *