@salmexio/ui 1.1.0 → 1.2.1

package/dist/primitives/Button/Button.svelte

@@ -209,40 +209,112 @@ const isDisabled = $derived(disabled);
 	   VARIANT STYLES - INFRARED
 	   ======================================== */
 
-	/* Default variant */
+	/* Default variant — Neutral 3D panel.
+	   Same physical language as primary but with neutral
+	   surface colors. Top-lit bevel + stacked extrusion. */
 	.sx-btn-default {
 		background: var(--sx-color-surface-2);
 		color: var(--sx-color-text);
 		border: 1px solid var(--sx-color-border-strong);
+		overflow: hidden;
+
+		/* 3D extrusion — neutral dark tones */
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.04),
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.15),
+			0 3px 0 0 rgba(0, 0, 0, 0.1),
+			0 5px 10px -3px rgba(0, 0, 0, 0.4);
+	}
+
+	/* Top-lit bevel for default */
+	.sx-btn-default::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		z-index: 1;
+		background:
+			linear-gradient(
+				180deg,
+				rgba(255, 255, 255, 0.06) 0%,
+				rgba(255, 255, 255, 0.02) 35%,
+				transparent 50%,
+				rgba(0, 0, 0, 0.08) 100%
+			);
+	}
+
+	.sx-btn-default:hover:not(:disabled) {
+		transform: translateY(-2px);
+		border-color: var(--sx-color-border-hover);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.05),
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.15),
+			0 3px 0 0 rgba(0, 0, 0, 0.1),
+			0 4px 0 0 rgba(0, 0, 0, 0.06),
+			0 8px 16px -3px rgba(0, 0, 0, 0.5);
+	}
+
+	.sx-btn-default:active:not(:disabled) {
+		transform: translateY(1px);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.1),
+			0 1px 3px -1px rgba(0, 0, 0, 0.2);
+		transition: transform 60ms ease, box-shadow 60ms ease;
 	}
 
-	/* 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. */
+	/* Primary variant — INFRARED Forge.
+	   Multi-color gradient surface (vermilion → brass → teal) that
+	   drifts slowly. 3D extruded depth via stacked box-shadows.
+	   Top-lit bevel highlight via ::before. Grain texture via ::after.
+	   Traveling border-light sweep on hover. */
 	.sx-btn-primary {
 		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%
+				#FF6B35 0%,
+				#E05520 20%,
+				#C8A84E 50%,
+				#8B8B3D 80%,
+				#FF6B35 100%
 			);
-		background-size: 100% 100%, 280% 280%;
+		background-size: 300% 300%;
 		color: var(--sx-color-text-inverse);
 		border: none;
-		font-weight: 600;
+		font-weight: 700;
+		letter-spacing: 0.3px;
 		overflow: hidden;
-		animation:
-			sx-primary-aurora 10s ease-in-out infinite,
-			sx-primary-glow 4s ease-in-out infinite;
+		isolation: isolate;
+		animation: sx-forge-drift 8s ease-in-out infinite;
+
+		/* 3D extrusion — stacked shadows create physical depth */
+		box-shadow:
+			0 1px 0 0 rgba(255, 140, 90, 0.4),
+			0 2px 0 0 #A63D10,
+			0 3px 0 0 #8B3210,
+			0 4px 0 0 #702810,
+			0 6px 12px -2px rgba(0, 0, 0, 0.5),
+			0 0 16px -4px rgba(255, 107, 53, 0.3);
+	}
+
+	/* Top-lit bevel — light source from above */
+	.sx-btn-primary::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		z-index: 1;
+		background:
+			linear-gradient(
+				180deg,
+				rgba(255, 255, 255, 0.25) 0%,
+				rgba(255, 255, 255, 0.08) 30%,
+				transparent 50%,
+				rgba(0, 0, 0, 0.15) 100%
+			);
 	}
 
 	/* Grain texture — SVG feTurbulence noise at low opacity */
@@ -252,56 +324,56 @@ const isDisabled = $derived(disabled);
 		inset: 0;
 		border-radius: inherit;
 		pointer-events: none;
-		opacity: 0.06;
+		z-index: 2;
+		opacity: 0.08;
 		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);
-		}
+	/* Gradient drift — visible color shift across the surface */
+	@keyframes sx-forge-drift {
+		0%, 100% { background-position: 0% 50%; }
+		25% { background-position: 100% 0%; }
+		50% { background-position: 100% 100%; }
+		75% { background-position: 0% 100%; }
 	}
 
 	.sx-btn-primary:hover:not(:disabled) {
-		transform: translateY(-2px);
-		animation:
-			sx-primary-aurora 10s ease-in-out infinite;
+		transform: translateY(-3px);
+		animation: sx-forge-drift 5s ease-in-out infinite;
+
+		/* Lift increases the extrusion depth */
 		box-shadow:
-			var(--sx-shadow-md),
-			0 0 24px -3px rgba(255, 107, 53, 0.55);
+			0 1px 0 0 rgba(255, 140, 90, 0.5),
+			0 2px 0 0 #A63D10,
+			0 3px 0 0 #8B3210,
+			0 4px 0 0 #702810,
+			0 5px 0 0 #5A2010,
+			0 6px 0 0 #451810,
+			0 10px 20px -3px rgba(0, 0, 0, 0.6),
+			0 0 28px -4px rgba(255, 107, 53, 0.5);
 	}
 
+	/* Active — press into the surface, collapse depth */
 	.sx-btn-primary:active:not(:disabled) {
-		transform: translateY(0);
+		transform: translateY(2px);
 		box-shadow:
-			var(--sx-shadow-sm),
-			0 0 8px -2px rgba(255, 107, 53, 0.2);
+			0 1px 0 0 #8B3210,
+			0 2px 4px -1px rgba(0, 0, 0, 0.4),
+			0 0 8px -3px rgba(255, 107, 53, 0.2);
+		transition: transform 60ms ease, box-shadow 60ms ease;
 	}
 
 	.sx-btn-primary:disabled {
 		animation-play-state: paused;
 	}
 
-	/* Ghost variant — transparent, subtle */
+	/* Ghost variant — Flat at rest, materializes on hover.
+	   Rises out of the surface with a thin extrusion when
+	   you reach for it. Stays part of the physical language. */
 	.sx-btn-ghost {
 		background: transparent;
-		border: none;
+		border: 1px solid transparent;
 		color: var(--sx-color-text-secondary);
 		box-shadow: none;
 	}
@@ -309,33 +381,86 @@ const isDisabled = $derived(disabled);
 	.sx-btn-ghost:hover:not(:disabled) {
 		background: var(--sx-color-surface-2);
 		color: var(--sx-color-text);
-		transform: none;
-		box-shadow: none;
+		border-color: var(--sx-color-border);
+		transform: translateY(-1px);
+
+		/* Materializes — thin extrusion appears */
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 2px 0 0 rgba(0, 0, 0, 0.08),
+			0 3px 6px -2px rgba(0, 0, 0, 0.25);
 	}
 
 	.sx-btn-ghost:active:not(:disabled) {
 		background: var(--sx-color-surface-2);
 		transform: translateY(0);
-		box-shadow: none;
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.08),
+			0 1px 2px -1px rgba(0, 0, 0, 0.15);
+		transition: transform 60ms ease, box-shadow 60ms ease;
 	}
 
-	/* Danger variant — red glow */
+	/* Danger variant — Dark crimson surface, light text.
+	   Red enough to read as danger, dark enough to not
+	   overwhelm. Light text for readability. */
 	.sx-btn-danger {
-		background: var(--sx-color-red-hover);
-		color: var(--sx-color-red);
-		border: 1px solid rgba(220, 38, 38, 0.2);
+		background: #3A1010;
+		color: var(--sx-color-text);
+		border: 1px solid rgba(220, 38, 38, 0.3);
+		overflow: hidden;
+
+		/* 3D extrusion — deep crimson tones */
+		box-shadow:
+			0 1px 0 0 rgba(220, 60, 60, 0.12),
+			0 2px 0 0 #2A0808,
+			0 3px 0 0 #1E0505,
+			0 4px 0 0 #140303,
+			0 6px 12px -2px rgba(0, 0, 0, 0.5),
+			0 0 12px -4px rgba(220, 38, 38, 0.2);
+	}
+
+	/* Top-lit bevel for danger — red-tinted highlight */
+	.sx-btn-danger::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		z-index: 1;
+		background:
+			linear-gradient(
+				180deg,
+				rgba(220, 60, 60, 0.12) 0%,
+				rgba(255, 255, 255, 0.04) 25%,
+				transparent 50%,
+				rgba(0, 0, 0, 0.15) 100%
+			);
 	}
 
 	.sx-btn-danger:hover:not(:disabled) {
-		background: rgba(220, 38, 38, 0.2);
 		transform: translateY(-2px);
-		box-shadow: var(--sx-shadow-glow-red);
-		border-color: rgba(220, 38, 38, 0.4);
+		background: #451212;
+		border-color: rgba(220, 38, 38, 0.45);
+
+		box-shadow:
+			0 1px 0 0 rgba(220, 60, 60, 0.18),
+			0 2px 0 0 #2A0808,
+			0 3px 0 0 #1E0505,
+			0 4px 0 0 #140303,
+			0 5px 0 0 #0C0202,
+			0 9px 18px -3px rgba(0, 0, 0, 0.6),
+			0 0 22px -4px rgba(220, 38, 38, 0.3);
 	}
 
 	.sx-btn-danger:active:not(:disabled) {
-		transform: translateY(0);
-		box-shadow: var(--sx-shadow-sm);
+		transform: translateY(2px);
+		background: #2A0808;
+		box-shadow:
+			0 1px 0 0 #1E0505,
+			0 2px 4px -1px rgba(0, 0, 0, 0.4),
+			0 0 6px -3px rgba(220, 38, 38, 0.12);
+		transition: transform 60ms ease, box-shadow 60ms ease;
 	}
 
 	/* ========================================
@@ -346,7 +471,7 @@ const isDisabled = $derived(disabled);
 		align-items: center;
 		gap: var(--sx-space-2);
 		position: relative;
-		z-index: 1;
+		z-index: 3;
 	}
 
 	.sx-btn-icon {
@@ -366,16 +491,18 @@ const isDisabled = $derived(disabled);
 		border-radius: var(--sx-radius-sm);
 	}
 
-	/* Shortcut on primary: semi-transparent against the vermilion fill */
+	/* Shortcut on primary: frosted inset against the multi-color fill */
 	.sx-btn-primary .sx-btn-shortcut {
-		background: rgba(0, 0, 0, 0.15);
+		background: rgba(0, 0, 0, 0.25);
 		color: var(--sx-color-text-inverse);
+		border: 1px solid rgba(255, 255, 255, 0.1);
 	}
 
-	/* Shortcut on danger: match the red text */
+	/* Shortcut on danger: red-tinted badge */
 	.sx-btn-danger .sx-btn-shortcut {
-		background: rgba(220, 38, 38, 0.15);
-		color: var(--sx-color-red);
+		background: rgba(220, 38, 38, 0.12);
+		color: var(--sx-color-text);
+		border: 1px solid rgba(220, 38, 38, 0.15);
 	}
 
 	/* Shortcut on ghost: subtle */
@@ -400,11 +527,33 @@ const isDisabled = $derived(disabled);
 			transform: none;
 		}
 
-		/* Fallback: solid vermilion, no aurora/glow animation */
+		/* Primary — solid gradient, no drift, simple depth */
 		.sx-btn-primary {
 			animation: none;
-			background: var(--sx-color-primary);
-			box-shadow: var(--sx-shadow-sm);
+			background: linear-gradient(135deg, #FF6B35, #C8A84E);
+			box-shadow:
+				0 2px 0 0 #8B3210,
+				0 4px 8px -2px rgba(0, 0, 0, 0.4);
+		}
+
+		.sx-btn-primary:hover:not(:disabled) {
+			box-shadow:
+				0 3px 0 0 #8B3210,
+				0 6px 12px -2px rgba(0, 0, 0, 0.5);
+		}
+
+		/* Default — simple depth */
+		.sx-btn-default {
+			box-shadow:
+				0 2px 0 0 rgba(0, 0, 0, 0.15),
+				0 4px 8px -2px rgba(0, 0, 0, 0.3);
+		}
+
+		/* Danger — simple depth */
+		.sx-btn-danger {
+			box-shadow:
+				0 2px 0 0 #4A0A0A,
+				0 4px 8px -2px rgba(0, 0, 0, 0.3);
 		}
 	}
 </style>

package/dist/primitives/Tooltip/Tooltip.svelte

@@ -17,6 +17,7 @@
 import type { Snippet } from 'svelte';
 import { cn } from '../../utils/cn.js';
 import { tick } from 'svelte';
+import { onMount } from 'svelte';
 
 type Placement = 'top' | 'bottom' | 'left' | 'right';
 
@@ -140,6 +141,28 @@ function positionTooltip() {
 	computedLeft = `${left}px`;
 	placementOverride = finalPlacement;
 }
+
+// Portal: move tooltip to document.body so position:fixed is viewport-relative
+// (ancestors with transform/backdrop-filter would otherwise create a containing block)
+$effect(() => {
+	if (tooltipEl && visible) {
+		document.body.appendChild(tooltipEl);
+		tick().then(() => positionTooltip());
+		return () => {
+			if (tooltipEl?.parentNode === document.body) {
+				document.body.removeChild(tooltipEl);
+			}
+		};
+	}
+});
+
+onMount(() => {
+	return () => {
+		if (tooltipEl?.parentNode === document.body) {
+			document.body.removeChild(tooltipEl);
+		}
+	};
+});
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
@@ -187,15 +210,24 @@ function positionTooltip() {
 		padding: var(--sx-space-1-5) var(--sx-space-3);
 		background: var(--sx-color-surface-3);
 		border: 1px solid var(--sx-color-border-strong);
+		border-top-color: rgba(255, 255, 255, 0.06);
 		border-radius: var(--sx-radius-sm);
 		font-family: var(--sx-font-body);
 		font-size: var(--sx-text-xs);
 		font-weight: 500;
 		color: var(--sx-color-text);
 		line-height: var(--sx-leading-normal);
-		box-shadow: var(--sx-shadow-lg);
+		box-shadow:
+			/* Thin 3D extrusion */
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.1),
+			/* Ambient shadow */
+			0 4px 12px -2px rgba(0, 0, 0, 0.4),
+			/* Subtle warm edge glow */
+			0 0 8px -4px rgba(255, 107, 53, 0.1);
 		pointer-events: none;
 		animation: sx-tooltip-in 150ms var(--sx-ease-out) both;
+		white-space: normal;
 		word-wrap: break-word;
 	}
 

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,UAAU,KAAK;IACd,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAyID;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,UAAU,KAAK;IACd,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAgKD;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/styles/tokens.css

@@ -294,6 +294,7 @@
 :focus-visible {
 	outline: 2px solid var(--sx-color-primary);
 	outline-offset: 2px;
+	border-radius: inherit;
 }
 
 /* ========================================

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@salmexio/ui",
-	"version": "1.1.0",
+	"version": "1.2.1",
 	"description": "Salmex I/O Design System — INFRARED component library for Salmex products",
 	"type": "module",
 	"license": "UNLICENSED",