@salmexio/ui 1.1.0 → 1.2.1

package/dist/forms/Slider/Slider.svelte

@@ -13,7 +13,7 @@
 import { cn } from '../../utils/cn.js';
 
 type SliderSize = 'sm' | 'md' | 'lg';
-type SliderColor = 'cyan' | 'green' | 'gold' | 'red' | 'purple';
+type SliderColor = 'primary' | 'green' | 'brass' | 'red' | 'teal';
 
 interface Props {
 	/** Accessible label. */
@@ -61,7 +61,7 @@ let {
 	formatValue,
 	hideLabel = false,
 	size = 'md',
-	color = 'cyan',
+	color = 'primary',
 	class: className = '',
 	oninput,
 	onchange,
@@ -207,7 +207,7 @@ function handleChange(e: Event) {
 		box-shadow: 0 0 0 1px var(--sx-slider-accent, var(--sx-color-primary));
 	}
 
-	/* Track — WebKit */
+	/* Track — WebKit — recessed channel */
 	.sx-slider-input::-webkit-slider-runnable-track {
 		height: var(--sx-slider-track-h, 6px);
 		border-radius: var(--sx-radius-full);
@@ -218,14 +218,20 @@ function handleChange(e: Event) {
 			var(--sx-color-surface-2) var(--sx-slider-fill),
 			var(--sx-color-surface-2) 100%
 		);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
 	}
 
-	/* Track — Firefox */
+	/* Track — Firefox — recessed channel */
 	.sx-slider-input::-moz-range-track {
 		height: var(--sx-slider-track-h, 6px);
 		border-radius: var(--sx-radius-full);
 		background: var(--sx-color-surface-2);
 		border: none;
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
 	}
 
 	.sx-slider-input::-moz-range-progress {
@@ -234,15 +240,19 @@ function handleChange(e: Event) {
 		background: var(--sx-slider-accent, var(--sx-color-primary));
 	}
 
-	/* Thumb — WebKit */
+	/* Thumb — WebKit — 3D raised knob */
 	.sx-slider-input::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		width: var(--sx-slider-thumb, 18px);
 		height: var(--sx-slider-thumb, 18px);
 		border-radius: var(--sx-radius-full);
-		background: var(--sx-color-text);
+		background: linear-gradient(180deg, #E8E0D8 0%, #B8B0A8 100%);
 		border: 2px solid var(--sx-slider-accent, var(--sx-color-primary));
 		margin-top: calc((var(--sx-slider-track-h, 6px) - var(--sx-slider-thumb, 18px)) / 2);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.12),
+			0 3px 6px -1px rgba(0, 0, 0, 0.25);
 		transition:
 			box-shadow var(--sx-transition-fast),
 			transform var(--sx-transition-fast),
@@ -252,24 +262,35 @@ function handleChange(e: Event) {
 
 	.sx-slider-input::-webkit-slider-thumb:hover {
 		transform: scale(1.15);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.12),
+			0 4px 8px -1px rgba(0, 0, 0, 0.3),
+			0 0 8px -2px var(--sx-slider-glow, rgba(255, 107, 53, 0.25));
 	}
 
 	.sx-slider-input:focus-visible::-webkit-slider-thumb {
 		box-shadow:
 			0 0 0 3px var(--sx-slider-ring, rgba(255, 107, 53, 0.35)),
-			0 0 12px var(--sx-slider-glow, rgba(255, 107, 53, 0.25));
+			0 0 12px var(--sx-slider-glow, rgba(255, 107, 53, 0.25)),
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.12);
 		transform: scale(1.2);
 		background: var(--sx-slider-accent, var(--sx-color-primary));
 		border-color: var(--sx-color-text);
 	}
 
-	/* Thumb — Firefox */
+	/* Thumb — Firefox — 3D raised knob */
 	.sx-slider-input::-moz-range-thumb {
 		width: var(--sx-slider-thumb, 18px);
 		height: var(--sx-slider-thumb, 18px);
 		border-radius: var(--sx-radius-full);
-		background: var(--sx-color-text);
+		background: linear-gradient(180deg, #E8E0D8 0%, #B8B0A8 100%);
 		border: 2px solid var(--sx-slider-accent, var(--sx-color-primary));
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.12),
+			0 3px 6px -1px rgba(0, 0, 0, 0.25);
 		transition:
 			box-shadow var(--sx-transition-fast),
 			transform var(--sx-transition-fast),
@@ -279,19 +300,26 @@ function handleChange(e: Event) {
 
 	.sx-slider-input::-moz-range-thumb:hover {
 		transform: scale(1.15);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.12),
+			0 4px 8px -1px rgba(0, 0, 0, 0.3),
+			0 0 8px -2px var(--sx-slider-glow, rgba(255, 107, 53, 0.25));
 	}
 
 	.sx-slider-input:focus-visible::-moz-range-thumb {
 		box-shadow:
 			0 0 0 3px var(--sx-slider-ring, rgba(255, 107, 53, 0.35)),
-			0 0 12px var(--sx-slider-glow, rgba(255, 107, 53, 0.25));
+			0 0 12px var(--sx-slider-glow, rgba(255, 107, 53, 0.25)),
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.12);
 		transform: scale(1.2);
 		background: var(--sx-slider-accent, var(--sx-color-primary));
 		border-color: var(--sx-color-text);
 	}
 
 	/* Color variants — accent + focus ring colors */
-	.sx-slider-color-cyan {
+	.sx-slider-color-primary {
 		--sx-slider-accent: var(--sx-color-primary);
 		--sx-slider-ring: rgba(255, 107, 53, 0.35);
 		--sx-slider-glow: rgba(255, 107, 53, 0.25);
@@ -301,7 +329,7 @@ function handleChange(e: Event) {
 		--sx-slider-ring: rgba(74, 222, 128, 0.35);
 		--sx-slider-glow: rgba(74, 222, 128, 0.25);
 	}
-	.sx-slider-color-gold {
+	.sx-slider-color-brass {
 		--sx-slider-accent: var(--sx-color-secondary);
 		--sx-slider-ring: rgba(200, 168, 78, 0.35);
 		--sx-slider-glow: rgba(200, 168, 78, 0.25);
@@ -311,7 +339,7 @@ function handleChange(e: Event) {
 		--sx-slider-ring: rgba(220, 38, 38, 0.35);
 		--sx-slider-glow: rgba(220, 38, 38, 0.25);
 	}
-	.sx-slider-color-purple {
+	.sx-slider-color-teal {
 		--sx-slider-accent: var(--sx-color-teal);
 		--sx-slider-ring: rgba(61, 139, 139, 0.35);
 		--sx-slider-glow: rgba(61, 139, 139, 0.25);

package/dist/forms/Slider/Slider.svelte.d.ts

@@ -1,5 +1,5 @@
 type SliderSize = 'sm' | 'md' | 'lg';
-type SliderColor = 'cyan' | 'green' | 'gold' | 'red' | 'purple';
+type SliderColor = 'primary' | 'green' | 'brass' | 'red' | 'teal';
 interface Props {
     /** Accessible label. */
     label: string;

package/dist/forms/Slider/Slider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Slider/Slider.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEhE,UAAU,KAAK;IACd,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oBAAoB;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAuED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Slider/Slider.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAElE,UAAU,KAAK;IACd,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oBAAoB;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAuED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/forms/TextInput/TextInput.svelte

@@ -326,6 +326,7 @@ function handleKeyDown(e: KeyboardEvent) {
 		border: 0;
 	}
 
+	/* Field wrapper — recessed channel carved into the surface */
 	.sx-input-field-wrapper {
 		position: relative;
 		display: flex;
@@ -334,31 +335,48 @@ function handleKeyDown(e: KeyboardEvent) {
 		border: 1px solid var(--sx-color-border-strong);
 		border-radius: var(--sx-radius-md);
 		transition: border-color var(--sx-transition-fast), box-shadow var(--sx-transition-fast);
+
+		/* Recessed inset — input sits below the surface */
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
 	}
 
 	.sx-input-field-wrapper:hover:not(.sx-input-disabled-wrap):not(.sx-input-focused):not(.sx-input-error) {
 		border-color: var(--sx-color-border-hover);
 	}
 
+	/* Focus — forge glow ring replaces flat ring */
 	.sx-input-focused {
 		border-color: var(--sx-color-primary);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-primary-ring),
+			0 0 12px -4px rgba(255, 107, 53, 0.15);
 		animation: sx-focus-breathe 2s ease-in-out infinite;
 	}
 
 	.sx-input-error {
 		border-color: var(--sx-color-red);
-		box-shadow: 0 0 0 3px var(--sx-color-red-ring);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-red-ring),
+			0 0 10px -4px rgba(220, 38, 38, 0.15);
 		animation: sx-error-shake 300ms ease-out;
 	}
 
 	.sx-input-valid {
 		border-color: var(--sx-color-green);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 8px -4px rgba(74, 222, 128, 0.15);
 	}
 
 	.sx-input-disabled-wrap {
 		opacity: 0.5;
 		cursor: not-allowed;
 		background: var(--sx-color-surface-2);
+		box-shadow: none;
 	}
 
 	.sx-input-prefix,

package/dist/forms/Textarea/Textarea.svelte

@@ -368,7 +368,7 @@ onMount(() => {
 		border: 0;
 	}
 
-	/* Field wrapper */
+	/* Field wrapper — recessed channel carved into the surface */
 	.sx-textarea-field-wrapper {
 		position: relative;
 		display: flex;
@@ -380,6 +380,11 @@ onMount(() => {
 		transition:
 			border-color var(--sx-transition-fast),
 			box-shadow var(--sx-transition-fast);
+
+		/* Recessed inset */
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
 	}
 
 	.sx-textarea-resizable {
@@ -392,22 +397,32 @@ onMount(() => {
 
 	.sx-textarea-focused {
 		border-color: var(--sx-color-primary);
-		box-shadow: 0 0 0 3px var(--sx-color-primary-ring);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-primary-ring),
+			0 0 12px -4px rgba(255, 107, 53, 0.15);
 	}
 
 	.sx-textarea-error-state {
 		border-color: var(--sx-color-red);
-		box-shadow: 0 0 0 3px var(--sx-color-red-ring);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-red-ring),
+			0 0 10px -4px rgba(220, 38, 38, 0.15);
 	}
 
 	.sx-textarea-success-state {
 		border-color: var(--sx-color-green);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 8px -4px rgba(74, 222, 128, 0.15);
 	}
 
 	.sx-textarea-disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
 		background: var(--sx-color-surface-2);
+		box-shadow: none;
 	}
 
 	.sx-textarea-dragging {

package/dist/forms/Toggle/Toggle.svelte

@@ -115,7 +115,7 @@ function toggle() {
 		pointer-events: none;
 	}
 
-	/* Track */
+	/* Track — recessed channel for the physical switch */
 	.sx-toggle-track {
 		position: relative;
 		flex-shrink: 0;
@@ -130,7 +130,13 @@ function toggle() {
 		cursor: pointer;
 		transition:
 			background var(--sx-transition-fast),
-			border-color var(--sx-transition-fast);
+			border-color var(--sx-transition-fast),
+			box-shadow var(--sx-transition-fast);
+
+		/* Recessed inset — the track sits below the surface */
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.4),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 	}
 
 	.sx-toggle-track:hover:not(:disabled) {
@@ -139,32 +145,80 @@ function toggle() {
 
 	.sx-toggle-track:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 3px var(--sx-color-primary-ring);
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.4),
+			0 0 0 3px var(--sx-color-primary-ring);
 	}
 
+	/* Active track — forge glow fills the channel */
 	.sx-toggle-checked {
-		background: var(--sx-color-primary);
-		border-color: var(--sx-color-primary);
+		background:
+			linear-gradient(
+				135deg,
+				#FF6B35 0%,
+				#C8A84E 50%,
+				#3D8B8B 100%
+			);
+		background-size: 200% 200%;
+		border-color: rgba(255, 107, 53, 0.4);
+		animation: sx-toggle-drift 6s ease-in-out infinite;
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 12px -3px rgba(255, 107, 53, 0.3);
 	}
 
 	.sx-toggle-checked:hover:not(:disabled) {
-		border-color: var(--sx-color-primary);
-		background: var(--sx-color-primary);
+		border-color: rgba(255, 107, 53, 0.5);
+	}
+
+	@keyframes sx-toggle-drift {
+		0%, 100% { background-position: 0% 50%; }
+		50% { background-position: 100% 50%; }
 	}
 
-	/* Thumb — spring easing for a snappy, physical feel */
+	/* Thumb — physical raised knob with 3D depth */
 	.sx-toggle-thumb {
 		display: block;
 		width: var(--sx-toggle-thumb, 18px);
 		height: var(--sx-toggle-thumb, 18px);
 		border-radius: var(--sx-radius-full);
-		background: var(--sx-color-text);
-		transition: transform 200ms var(--sx-ease-spring);
-		box-shadow: var(--sx-shadow-sm);
+		background:
+			linear-gradient(
+				180deg,
+				rgba(255, 255, 255, 0.15) 0%,
+				transparent 50%,
+				rgba(0, 0, 0, 0.1) 100%
+			),
+			var(--sx-gray-200);
+		transition: transform 200ms var(--sx-ease-spring),
+			box-shadow 200ms var(--sx-ease-spring);
+		position: relative;
+
+		/* 3D extrusion — raised knob */
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.2),
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 2px 0 0 rgba(0, 0, 0, 0.1),
+			0 3px 4px -1px rgba(0, 0, 0, 0.3);
 	}
 
 	.sx-toggle-checked .sx-toggle-thumb {
 		transform: translateX(calc(var(--sx-toggle-w, 44px) - var(--sx-toggle-thumb, 18px) - 6px));
+
+		/* Active knob glows with forge warmth */
+		box-shadow:
+			0 1px 0 0 rgba(255, 200, 150, 0.3),
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 2px 0 0 rgba(0, 0, 0, 0.1),
+			0 3px 4px -1px rgba(0, 0, 0, 0.3),
+			0 0 8px -2px rgba(255, 107, 53, 0.25);
+	}
+
+	/* Press — knob pushes down */
+	.sx-toggle-track:active:not(:disabled) .sx-toggle-thumb {
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.1),
+			0 1px 2px -1px rgba(0, 0, 0, 0.2);
 	}
 
 	/* Size variants */
@@ -216,6 +270,11 @@ function toggle() {
 		.sx-toggle-thumb {
 			transition: none;
 		}
+
+		.sx-toggle-checked {
+			animation: none;
+			background: var(--sx-color-primary);
+		}
 	}
 
 	@media (forced-colors: active) {

package/dist/layout/Card/Card.svelte

@@ -13,9 +13,12 @@ import type { Snippet } from 'svelte';
 import { cn } from '../../utils/cn.js';
 
 type CardPadding = 'sm' | 'md' | 'lg';
+type CardAccent = 'none' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
 
 interface Props {
 	padding?: CardPadding;
+	/** Left accent border color */
+	accent?: CardAccent;
 	as?: 'div' | 'article' | 'section';
 	id?: string;
 	ariaLabelledby?: string;
@@ -30,6 +33,7 @@ interface Props {
 
 let {
 	padding = 'md',
+	accent = 'none',
 	as = 'div',
 	id,
 	ariaLabelledby,
@@ -82,6 +86,7 @@ const currentPadding = $derived(paddingValues[padding]);
 	class={cn(
 		'sx-card',
 		`sx-card-padding-${padding}`,
+		accent !== 'none' && `sx-card-accent sx-card-accent-${accent}`,
 		onclick && 'sx-card-clickable',
 		className
 	)}
@@ -112,6 +117,30 @@ const currentPadding = $derived(paddingValues[padding]);
 		-webkit-backdrop-filter: var(--sx-glass-blur);
 		transition: var(--sx-transition-base);
 		transition-property: transform, border-color, box-shadow;
+
+		/* 3D extrusion — subtle panel depth */
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.15),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
+	}
+
+	/* Top-lit bevel — overhead light simulation */
+	.sx-card::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		z-index: 0;
+		background:
+			linear-gradient(
+				180deg,
+				rgba(255, 255, 255, 0.04) 0%,
+				transparent 40%,
+				rgba(0, 0, 0, 0.06) 100%
+			);
 	}
 
 	.sx-card-clickable {
@@ -119,11 +148,25 @@ const currentPadding = $derived(paddingValues[padding]);
 	}
 
 	.sx-card-clickable:hover {
-		transform: translateY(-2px);
-		border-color: rgba(255, 107, 53, 0.15);
+		transform: translateY(-3px);
+		border-color: rgba(255, 107, 53, 0.18);
+
+		/* Hover lifts the panel — deeper extrusion + vermilion glow */
 		box-shadow:
-			var(--sx-shadow-md),
-			0 0 24px -6px rgba(255, 107, 53, 0.08);
+			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 8px 20px -4px rgba(0, 0, 0, 0.4),
+			0 0 28px -8px rgba(255, 107, 53, 0.1);
+	}
+
+	.sx-card-clickable:active {
+		transform: translateY(0);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 2px 4px -1px rgba(0, 0, 0, 0.2);
+		transition: transform 60ms ease, box-shadow 60ms ease;
 	}
 
 	.sx-card-clickable:focus-visible {
@@ -131,6 +174,74 @@ const currentPadding = $derived(paddingValues[padding]);
 		outline-offset: 2px;
 	}
 
+	/* ========================================
+	   ACCENT — Left colored border with tinted extrusion
+	   ======================================== */
+
+	.sx-card-accent {
+		border-left: 3px solid var(--sx-color-border-strong);
+	}
+
+	/* Primary — vermilion */
+	.sx-card-accent-primary {
+		border-left-color: var(--sx-color-primary);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(200, 85, 30, 0.2),
+			0 2px 0 0 rgba(160, 65, 20, 0.12),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(255, 107, 53, 0.1);
+	}
+
+	/* Success — green */
+	.sx-card-accent-success {
+		border-left-color: var(--sx-color-green);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(34, 120, 69, 0.2),
+			0 2px 0 0 rgba(34, 120, 69, 0.12),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(34, 197, 94, 0.1);
+	}
+
+	/* Warning — brass */
+	.sx-card-accent-warning {
+		border-left-color: var(--sx-color-secondary);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(160, 134, 62, 0.2),
+			0 2px 0 0 rgba(130, 108, 50, 0.12),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(200, 168, 78, 0.1);
+	}
+
+	/* Error — crimson */
+	.sx-card-accent-error {
+		border-left-color: var(--sx-color-red);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(180, 30, 30, 0.2),
+			0 2px 0 0 rgba(140, 20, 20, 0.12),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(220, 38, 38, 0.1);
+	}
+
+	/* Info — teal */
+	.sx-card-accent-info {
+		border-left-color: var(--sx-color-teal);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(30, 80, 80, 0.2),
+			0 2px 0 0 rgba(30, 80, 80, 0.12),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(61, 139, 139, 0.1);
+	}
+
+	/* Neutral */
+	.sx-card-accent-neutral {
+		border-left-color: var(--sx-color-border-strong);
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.sx-card {
 			transition: none;
@@ -139,6 +250,10 @@ const currentPadding = $derived(paddingValues[padding]);
 		.sx-card-clickable:hover {
 			transform: none;
 		}
+
+		.sx-card-clickable:active {
+			transform: none;
+		}
 	}
 
 	.sx-card-padding-sm {
@@ -157,13 +272,19 @@ const currentPadding = $derived(paddingValues[padding]);
 		border-bottom: 1px solid var(--sx-color-border);
 		font-weight: 700;
 		letter-spacing: 0.3px;
+		position: relative;
+		z-index: 1;
 	}
 
 	.sx-card-footer {
 		border-top: 1px solid var(--sx-color-border);
+		position: relative;
+		z-index: 1;
 	}
 
 	.sx-card-content {
 		display: block;
+		position: relative;
+		z-index: 1;
 	}
 </style>

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

@@ -1,7 +1,10 @@
 import type { Snippet } from 'svelte';
 type CardPadding = 'sm' | 'md' | 'lg';
+type CardAccent = 'none' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
 interface Props {
     padding?: CardPadding;
+    /** Left accent border color */
+    accent?: CardAccent;
     as?: 'div' | 'article' | 'section';
     id?: string;
     ariaLabelledby?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,KAAK,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5F,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAwED;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}