@salmexio/ui 1.1.0 → 1.2.0

package/dist/dialogs/ContextMenu/ContextMenu.svelte

@@ -386,8 +386,18 @@ onMount(() => {
 		max-width: 320px;
 		background: var(--sx-color-surface-2);
 		border: 1px solid var(--sx-color-border-strong);
+		border-top-color: rgba(255, 255, 255, 0.05);
 		border-radius: var(--sx-radius-md);
-		box-shadow: var(--sx-shadow-lg);
+		box-shadow:
+			/* 3D extrusion */
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.14),
+			0 3px 0 0 rgba(0, 0, 0, 0.08),
+			/* Deep ambient shadow */
+			0 6px 16px -3px rgba(0, 0, 0, 0.45),
+			0 12px 32px -6px rgba(0, 0, 0, 0.2),
+			/* Warm edge glow */
+			0 0 12px -6px rgba(255, 107, 53, 0.08);
 		backdrop-filter: var(--sx-glass-blur);
 		padding: var(--sx-space-1) 0;
 		outline: none;

package/dist/dialogs/Modal/Modal.svelte

@@ -263,11 +263,37 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 		background: var(--sx-color-surface);
 		border: 1px solid var(--sx-color-border-strong);
 		border-radius: var(--sx-radius-lg);
-		box-shadow: var(--sx-shadow-xl);
+		box-shadow:
+			/* 3D extrusion underneath */
+			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),
+			/* Deep ambient shadow */
+			0 8px 24px -4px rgba(0, 0, 0, 0.5),
+			0 16px 48px -8px rgba(0, 0, 0, 0.3),
+			/* Warm forge glow on edges */
+			0 0 32px -8px rgba(255, 107, 53, 0.08);
 		animation: sx-modal-scale-in 200ms ease-out;
 		overflow: hidden;
 	}
 
+	/* Top-lit bevel */
+	.sx-modal-container::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: linear-gradient(
+			180deg,
+			rgba(255, 255, 255, 0.04) 0%,
+			transparent 30%,
+			rgba(0, 0, 0, 0.04) 100%
+		);
+		pointer-events: none;
+		z-index: 5;
+	}
+
 	@keyframes sx-modal-scale-in {
 		from {
 			opacity: 0;
@@ -313,6 +339,8 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 	   HEADER
 	   ======================================== */
 	.sx-modal-header {
+		position: relative;
+		z-index: 1;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -333,6 +361,7 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 	.sx-modal-title-wrap:focus-visible {
 		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
+		border-radius: var(--sx-radius-sm);
 	}
 
 	.sx-modal-title {
@@ -384,6 +413,8 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 	   BODY
 	   ======================================== */
 	.sx-modal-body {
+		position: relative;
+		z-index: 1;
 		padding: var(--sx-space-6);
 		flex: 1;
 		min-height: 0;
@@ -394,6 +425,8 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 	   FOOTER
 	   ======================================== */
 	.sx-modal-footer {
+		position: relative;
+		z-index: 1;
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;

package/dist/feedback/Alert/Alert.svelte

@@ -157,20 +157,41 @@ function toggleExpanded() {
 </div>
 
 <style>
-	/* INFRARED: surface card, left accent border, subtle type tint */
+	/* INFRARED: 3D status plate — left accent border, extrusion, bevel */
 	.sx-alert {
+		position: relative;
 		display: flex;
 		gap: var(--sx-space-3);
 		padding: var(--sx-space-4);
 		background: var(--sx-color-surface);
 		border: 1px solid var(--sx-color-border);
-		border-left: 2px solid var(--sx-color-border-strong);
+		border-left: 3px solid var(--sx-color-border-strong);
 		border-radius: var(--sx-radius-md);
 		font-family: var(--sx-font-body);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 2px 0 0 rgba(0, 0, 0, 0.1),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
 		transition: box-shadow var(--sx-transition-fast);
 		animation: sx-alert-in var(--sx-duration-base) var(--sx-ease-out) both;
 	}
 
+	/* Top-lit bevel */
+	.sx-alert::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: linear-gradient(
+			180deg,
+			rgba(255, 255, 255, 0.04) 0%,
+			transparent 40%,
+			rgba(0, 0, 0, 0.03) 100%
+		);
+		pointer-events: none;
+		z-index: 0;
+	}
+
 	.sx-alert-standard {
 		border-radius: var(--sx-radius-md);
 	}
@@ -190,6 +211,8 @@ function toggleExpanded() {
 	}
 
 	.sx-alert-icon {
+		position: relative;
+		z-index: 1;
 		flex-shrink: 0;
 		display: flex;
 		align-items: flex-start;
@@ -197,6 +220,8 @@ function toggleExpanded() {
 	}
 
 	.sx-alert-content {
+		position: relative;
+		z-index: 1;
 		flex: 1;
 		min-width: 0;
 		display: flex;
@@ -251,8 +276,8 @@ function toggleExpanded() {
 	}
 
 	.sx-alert-title-btn:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 2px var(--sx-color-primary);
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 2px;
 	}
 
 	.sx-alert-expand-icon {
@@ -264,6 +289,8 @@ function toggleExpanded() {
 
 	/* Dismiss button — transparent, minimal */
 	.sx-alert-dismiss {
+		position: relative;
+		z-index: 1;
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
@@ -288,14 +315,18 @@ function toggleExpanded() {
 	}
 
 	.sx-alert-dismiss:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 2px var(--sx-color-primary);
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 2px;
 	}
 
-	/* Type: success */
+	/* Type: success — green accent, green-tinted extrusion */
 	.sx-alert-success {
 		background: var(--sx-color-green-subtle);
 		border-left-color: var(--sx-color-green);
+		box-shadow:
+			0 1px 0 0 rgba(34, 120, 69, 0.25),
+			0 2px 0 0 rgba(34, 120, 69, 0.15),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
 	}
 
 	.sx-alert-success .sx-alert-icon {
@@ -306,10 +337,14 @@ function toggleExpanded() {
 		color: var(--sx-color-text);
 	}
 
-	/* Type: error */
+	/* Type: error — red accent, crimson-tinted extrusion */
 	.sx-alert-error {
 		background: var(--sx-color-red-subtle);
 		border-left-color: var(--sx-color-red);
+		box-shadow:
+			0 1px 0 0 rgba(180, 30, 30, 0.25),
+			0 2px 0 0 rgba(140, 20, 20, 0.15),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
 	}
 
 	.sx-alert-error .sx-alert-icon {
@@ -320,10 +355,14 @@ function toggleExpanded() {
 		color: var(--sx-color-text);
 	}
 
-	/* Type: warning */
+	/* Type: warning — brass accent, brass-tinted extrusion */
 	.sx-alert-warning {
 		background: var(--sx-color-brass-subtle);
 		border-left-color: var(--sx-color-secondary);
+		box-shadow:
+			0 1px 0 0 rgba(160, 134, 62, 0.25),
+			0 2px 0 0 rgba(130, 108, 50, 0.15),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
 	}
 
 	.sx-alert-warning .sx-alert-icon {
@@ -334,10 +373,14 @@ function toggleExpanded() {
 		color: var(--sx-color-text);
 	}
 
-	/* Type: info */
+	/* Type: info — vermilion accent, warm-tinted extrusion */
 	.sx-alert-info {
 		background: var(--sx-color-primary-subtle);
 		border-left-color: var(--sx-color-primary);
+		box-shadow:
+			0 1px 0 0 rgba(200, 85, 30, 0.25),
+			0 2px 0 0 rgba(160, 65, 20, 0.15),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
 	}
 
 	.sx-alert-info .sx-alert-icon {
@@ -348,7 +391,7 @@ function toggleExpanded() {
 		color: var(--sx-color-text);
 	}
 
-	/* Type: neutral */
+	/* Type: neutral — subtle neutral extrusion */
 	.sx-alert-neutral {
 		background: var(--sx-color-surface);
 		border-left-color: var(--sx-color-border-strong);

package/dist/feedback/ProgressBar/ProgressBar.svelte

@@ -7,13 +7,13 @@
   @example
   <ProgressBar value={65} label="Upload" />
   <ProgressBar indeterminate label="Loading..." />
-  <ProgressBar value={30} max={50} showValue color="cyan" />
+  <ProgressBar value={30} max={50} showValue color="primary" />
 -->
 <script lang="ts">
 import { cn } from '../../utils/cn.js';
 
 type ProgressSize = 'sm' | 'md' | 'lg';
-type ProgressColor = 'cyan' | 'green' | 'gold' | 'red' | 'purple';
+type ProgressColor = 'primary' | 'green' | 'brass' | 'red' | 'teal';
 
 interface Props {
 	/** Current value (0–max). Ignored when indeterminate. */
@@ -48,7 +48,7 @@ let {
 	showValue = false,
 	formatValue,
 	size = 'md',
-	color = 'cyan',
+	color = 'primary',
 	class: className = '',
 	testId
 }: Props = $props();
@@ -159,12 +159,15 @@ const labelId = $derived(label ? `${stableId}-label` : undefined);
 		align-self: flex-end;
 	}
 
-	/* Track */
+	/* Track — recessed channel */
 	.sx-progress-track {
 		width: 100%;
 		background: var(--sx-color-surface-2);
 		border-radius: var(--sx-radius-full);
 		overflow: hidden;
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
 	}
 
 	.sx-progress-sm {
@@ -201,8 +204,8 @@ const labelId = $derived(label ? `${stableId}-label` : undefined);
 	}
 
 	/* Colors */
-	.sx-progress-color-cyan {
-		background: var(--sx-color-primary);
+	.sx-progress-color-primary {
+		background: linear-gradient(90deg, #FF6B35, #C8A84E);
 		box-shadow: 0 0 8px rgba(255, 107, 53, 0.2);
 	}
 
@@ -211,7 +214,7 @@ const labelId = $derived(label ? `${stableId}-label` : undefined);
 		box-shadow: 0 0 8px rgba(74, 222, 128, 0.2);
 	}
 
-	.sx-progress-color-gold {
+	.sx-progress-color-brass {
 		background: var(--sx-color-secondary);
 		box-shadow: 0 0 8px rgba(200, 168, 78, 0.2);
 	}
@@ -221,7 +224,7 @@ const labelId = $derived(label ? `${stableId}-label` : undefined);
 		box-shadow: 0 0 8px rgba(220, 38, 38, 0.2);
 	}
 
-	.sx-progress-color-purple {
+	.sx-progress-color-teal {
 		background: var(--sx-color-teal);
 		box-shadow: 0 0 8px rgba(61, 139, 139, 0.2);
 	}

package/dist/feedback/ProgressBar/ProgressBar.svelte.d.ts

@@ -1,5 +1,5 @@
 type ProgressSize = 'sm' | 'md' | 'lg';
-type ProgressColor = 'cyan' | 'green' | 'gold' | 'red' | 'purple';
+type ProgressColor = 'primary' | 'green' | 'brass' | 'red' | 'teal';
 interface Props {
     /** Current value (0–max). Ignored when indeterminate. */
     value?: number;
@@ -32,7 +32,7 @@ interface Props {
  * @example
  * <ProgressBar value={65} label="Upload" />
  * <ProgressBar indeterminate label="Loading..." />
- * <ProgressBar value={30} max={50} showValue color="cyan" />
+ * <ProgressBar value={30} max={50} showValue color="primary" />
  */
 declare const ProgressBar: import("svelte").Component<Props, {}, "">;
 type ProgressBar = ReturnType<typeof ProgressBar>;

package/dist/feedback/ProgressBar/ProgressBar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/ProgressBar/ProgressBar.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvC,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElE,UAAU,KAAK;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAsED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProgressBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/ProgressBar/ProgressBar.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvC,KAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpE,UAAU,KAAK;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAsED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/feedback/Skeleton/Skeleton.svelte

@@ -112,6 +112,10 @@ const lineWidths = $derived(
 
 	.sx-skeleton-bone {
 		background: var(--sx-color-surface-2);
+		/* Recessed carved-out placeholder */
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.04);
 	}
 
 	.sx-skeleton-shimmer {
@@ -127,9 +131,9 @@ const lineWidths = $derived(
 			100deg,
 			transparent 0%,
 			transparent 35%,
-			rgba(255, 255, 255, 0.04) 45%,
-			var(--sx-color-surface-3) 50%,
-			rgba(255, 255, 255, 0.04) 55%,
+			rgba(255, 107, 53, 0.02) 45%,
+			rgba(200, 168, 78, 0.04) 50%,
+			rgba(255, 107, 53, 0.02) 55%,
 			transparent 65%,
 			transparent 100%
 		);

package/dist/feedback/Spinner/Spinner.svelte

@@ -214,6 +214,7 @@ const config = $derived(sizeConfig[size]);
 
 	.sx-spinner-arc {
 		transform-origin: center;
+		filter: drop-shadow(0 0 3px currentColor);
 	}
 
 	@keyframes sx-spin {
@@ -284,6 +285,7 @@ const config = $derived(sizeConfig[size]);
 		height: 28%;
 		border-radius: 50%;
 		background: currentColor;
+		box-shadow: 0 0 8px currentColor;
 		animation: sx-pulse-dot 1.5s ease-out infinite;
 	}
 

package/dist/feedback/Toast/Toaster.svelte

@@ -212,9 +212,10 @@ onMount(() => {
 		left: 0;
 	}
 
-	/* ========== TOAST ========== */
+	/* ========== TOAST — 3D floating notification plate ========== */
 	.sx-toast {
 		pointer-events: auto;
+		position: relative;
 		display: flex;
 		align-items: flex-start;
 		gap: var(--sx-space-3);
@@ -223,8 +224,15 @@ onMount(() => {
 		backdrop-filter: var(--sx-glass-blur);
 		-webkit-backdrop-filter: var(--sx-glass-blur);
 		border: 1px solid var(--sx-color-border-strong);
+		border-top-color: rgba(255, 255, 255, 0.05);
 		border-radius: var(--sx-radius-md);
-		box-shadow: var(--sx-shadow-lg);
+		box-shadow:
+			/* 3D extrusion */
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.12),
+			0 3px 0 0 rgba(0, 0, 0, 0.06),
+			/* Ambient shadow */
+			0 6px 16px -3px rgba(0, 0, 0, 0.4);
 		border-left: 3px solid var(--sx-color-text-secondary);
 		animation: sx-toast-in 250ms var(--sx-ease-out) both;
 		outline: none;
@@ -239,21 +247,45 @@ onMount(() => {
 		animation: sx-toast-out 150ms ease-in both;
 	}
 
-	/* Type border colors */
+	/* Type border colors + variant-tinted extrusion */
 	.sx-toast-success {
 		border-left-color: var(--sx-color-green);
+		box-shadow:
+			0 1px 0 0 rgba(34, 120, 69, 0.2),
+			0 2px 0 0 rgba(34, 120, 69, 0.1),
+			0 3px 0 0 rgba(0, 0, 0, 0.06),
+			0 6px 16px -3px rgba(0, 0, 0, 0.4),
+			0 0 8px -4px rgba(34, 197, 94, 0.12);
 	}
 
 	.sx-toast-error {
 		border-left-color: var(--sx-color-red);
+		box-shadow:
+			0 1px 0 0 rgba(180, 30, 30, 0.2),
+			0 2px 0 0 rgba(140, 20, 20, 0.1),
+			0 3px 0 0 rgba(0, 0, 0, 0.06),
+			0 6px 16px -3px rgba(0, 0, 0, 0.4),
+			0 0 8px -4px rgba(220, 38, 38, 0.12);
 	}
 
 	.sx-toast-warning {
 		border-left-color: var(--sx-color-secondary);
+		box-shadow:
+			0 1px 0 0 rgba(160, 134, 62, 0.2),
+			0 2px 0 0 rgba(130, 108, 50, 0.1),
+			0 3px 0 0 rgba(0, 0, 0, 0.06),
+			0 6px 16px -3px rgba(0, 0, 0, 0.4),
+			0 0 8px -4px rgba(200, 168, 78, 0.12);
 	}
 
 	.sx-toast-info {
 		border-left-color: var(--sx-color-primary);
+		box-shadow:
+			0 1px 0 0 rgba(200, 85, 30, 0.2),
+			0 2px 0 0 rgba(160, 65, 20, 0.1),
+			0 3px 0 0 rgba(0, 0, 0, 0.06),
+			0 6px 16px -3px rgba(0, 0, 0, 0.4),
+			0 0 8px -4px rgba(255, 107, 53, 0.12);
 	}
 
 	/* Icon */

package/dist/forms/Checkbox/Checkbox.svelte

@@ -185,6 +185,10 @@ function handleChange(e: Event) {
 		background: var(--sx-color-surface);
 		border: 1px solid var(--sx-color-border-strong);
 		border-radius: var(--sx-radius-sm);
+		/* Recessed well when unchecked */
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
 		transition: background var(--sx-transition-fast), border-color var(--sx-transition-fast),
 			box-shadow var(--sx-transition-fast);
 		color: #fff;
@@ -216,16 +220,22 @@ function handleChange(e: Event) {
 		padding: 3px 4px;
 	}
 
-	/* Checked -- vermilion fill, white checkmark */
+	/* Checked -- forge gradient fill, raised from the well */
 	.sx-checkbox-box-checked {
-		background: var(--sx-color-primary);
-		border-color: var(--sx-color-primary);
+		background: linear-gradient(135deg, #FF6B35, #C8A84E);
+		border-color: rgba(255, 107, 53, 0.6);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 0 6px -2px rgba(255, 107, 53, 0.3);
 	}
 
-	/* Indeterminate -- same as checked */
+	/* Indeterminate -- same forge gradient */
 	.sx-checkbox-box-indeterminate {
-		background: var(--sx-color-primary);
-		border-color: var(--sx-color-primary);
+		background: linear-gradient(135deg, #FF6B35, #C8A84E);
+		border-color: rgba(255, 107, 53, 0.6);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 0 6px -2px rgba(255, 107, 53, 0.3);
 	}
 
 	/* Hover -- border brightens on unchecked box */
@@ -233,10 +243,20 @@ function handleChange(e: Event) {
 		border-color: var(--sx-color-border-hover);
 	}
 
-	/* Focus -- primary outline */
+	/* Focus -- primary outline with forge glow */
 	.sx-checkbox-input:focus-visible + .sx-checkbox-box {
 		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			0 0 12px -4px rgba(255, 107, 53, 0.2);
+	}
+
+	.sx-checkbox-input:focus-visible + .sx-checkbox-box-checked,
+	.sx-checkbox-input:focus-visible + .sx-checkbox-box-indeterminate {
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 0 10px -2px rgba(255, 107, 53, 0.4);
 	}
 
 	/* High contrast / forced colors: solid outline so focus is visible (APG) */
@@ -249,6 +269,9 @@ function handleChange(e: Event) {
 
 	.sx-checkbox-box-error {
 		border-color: var(--sx-color-red);
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(220, 38, 38, 0.2);
 	}
 
 	.sx-checkbox-content {

package/dist/forms/Select/Select.svelte

@@ -623,6 +623,7 @@ onMount(() => {
 	/* ========================================
 	   TRIGGER -- Same style as TextInput
 	   ======================================== */
+	/* Trigger — recessed channel, same as TextInput */
 	.sx-select-trigger {
 		display: flex;
 		align-items: center;
@@ -638,6 +639,11 @@ onMount(() => {
 		cursor: pointer;
 		text-align: left;
 		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-select-trigger:hover:not(:disabled) {
@@ -647,22 +653,32 @@ onMount(() => {
 	.sx-select-trigger:focus-visible {
 		outline: none;
 		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-select-trigger-open {
 		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-select-trigger-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);
 	}
 
 	.sx-select-trigger-disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
+		box-shadow: none;
 	}
 
 	/* ========================================