@salmexio/ui 1.0.0 → 1.2.0

package/dist/feedback/Toast/Toaster.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Toaster
 
-  Neo-Brutalist Dark — Toast notification container.
+  INFRARED — Toast notification container.
   Renders stacked toast notifications with slide-in/out animations,
   auto-dismiss with pause-on-hover, keyboard dismiss, and ARIA live region.
 
@@ -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,15 +224,22 @@ 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;
 	}
 
 	.sx-toast:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
 	}
 
@@ -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-gold);
+		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-cyan);
+		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 */
@@ -273,11 +305,11 @@ onMount(() => {
 	}
 
 	.sx-toast-warning .sx-toast-icon {
-		color: var(--sx-color-gold);
+		color: var(--sx-color-secondary);
 	}
 
 	.sx-toast-info .sx-toast-icon {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	/* Content */
@@ -317,7 +349,7 @@ onMount(() => {
 		font-family: var(--sx-font-body);
 		font-size: var(--sx-text-xs);
 		font-weight: 600;
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 		cursor: pointer;
 		padding: var(--sx-space-1) var(--sx-space-2);
 		border-radius: var(--sx-radius-sm);
@@ -325,11 +357,11 @@ onMount(() => {
 	}
 
 	.sx-toast-action-btn:hover {
-		background: var(--sx-color-cyan-subtle);
+		background: var(--sx-color-primary-subtle);
 	}
 
 	.sx-toast-action-btn:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 1px;
 	}
 
@@ -353,7 +385,7 @@ onMount(() => {
 	}
 
 	.sx-toast-close:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 1px;
 	}
 

package/dist/feedback/Toast/Toaster.svelte.d.ts

@@ -8,7 +8,7 @@ interface Props {
 /**
  * Toaster
  *
- * Neo-Brutalist Dark — Toast notification container.
+ * INFRARED — Toast notification container.
  * Renders stacked toast notifications with slide-in/out animations,
  * auto-dismiss with pause-on-hover, keyboard dismiss, and ARIA live region.
  *

package/dist/forms/Checkbox/Checkbox.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Checkbox
 
-  Neo-Brutalist Dark — Clean checkbox with cyan accent fill and white checkmark.
+  INFRARED — Clean checkbox with vermilion accent fill and white checkmark.
   Uses native <input type="checkbox"> per WAI-ARIA APG (best practice: native over custom role="checkbox").
   Label, description, error, indeterminate. Full a11y; focus and semantics follow the native input.
 -->
@@ -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;
@@ -209,22 +213,29 @@ function handleChange(e: Event) {
 		width: 100%;
 		height: 100%;
 		padding: 2px;
+		animation: sx-check-in var(--sx-duration-fast) var(--sx-ease-out) both;
 	}
 
 	.sx-checkbox-icon-minus {
 		padding: 3px 4px;
 	}
 
-	/* Checked -- cyan fill, white checkmark */
+	/* Checked -- forge gradient fill, raised from the well */
 	.sx-checkbox-box-checked {
-		background: var(--sx-color-cyan);
-		border-color: var(--sx-color-cyan);
+		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-cyan);
-		border-color: var(--sx-color-cyan);
+		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 */
@@ -232,10 +243,20 @@ function handleChange(e: Event) {
 		border-color: var(--sx-color-border-hover);
 	}
 
-	/* Focus -- cyan outline */
+	/* Focus -- primary outline with forge glow */
 	.sx-checkbox-input:focus-visible + .sx-checkbox-box {
-		outline: 2px solid var(--sx-color-cyan);
+		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) */
@@ -248,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 {
@@ -303,5 +327,9 @@ function handleChange(e: Event) {
 		.sx-checkbox-box {
 			transition: none;
 		}
+
+		.sx-checkbox-icon {
+			animation: none;
+		}
 	}
 </style>

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

@@ -20,7 +20,7 @@ interface Props {
 /**
  * Checkbox
  *
- * Neo-Brutalist Dark — Clean checkbox with cyan accent fill and white checkmark.
+ * INFRARED — Clean checkbox with vermilion accent fill and white checkmark.
  * Uses native <input type="checkbox"> per WAI-ARIA APG (best practice: native over custom role="checkbox").
  * Label, description, error, indeterminate. Full a11y; focus and semantics follow the native input.
  */

package/dist/forms/Select/Select.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Select
 
-  Neo-Brutalist Dark — Dropdown select with clean trigger field, glass-blur panel,
+  INFRARED — Dropdown select with clean trigger field, glass-blur panel,
   keyboard-first navigation, type-ahead search, option groups, and multi-select.
 
   Follows WAI-ARIA APG Select-Only Combobox pattern: DOM focus stays on
@@ -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) {
@@ -646,23 +652,33 @@ onMount(() => {
 
 	.sx-select-trigger:focus-visible {
 		outline: none;
-		border-color: var(--sx-color-cyan);
-		box-shadow: 0 0 0 3px var(--sx-color-cyan-ring);
+		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);
 	}
 
 	.sx-select-trigger-open {
-		border-color: var(--sx-color-cyan);
-		box-shadow: 0 0 0 3px var(--sx-color-cyan-ring);
+		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);
 	}
 
 	.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;
 	}
 
 	/* ========================================
@@ -747,12 +763,12 @@ onMount(() => {
 	}
 
 	.sx-select-option-active {
-		background: var(--sx-color-cyan-hover);
-		color: var(--sx-color-cyan);
+		background: var(--sx-color-primary-hover);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-select-option-selected:not(.sx-select-option-active) {
-		background: var(--sx-color-cyan-subtle);
+		background: var(--sx-color-primary-subtle);
 	}
 
 	.sx-select-option-disabled {
@@ -772,11 +788,11 @@ onMount(() => {
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-select-option-active .sx-select-checkmark {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	/* Checkbox square for multi select */
@@ -793,7 +809,7 @@ onMount(() => {
 	}
 
 	.sx-select-option-active .sx-select-check {
-		border-color: var(--sx-color-cyan);
+		border-color: var(--sx-color-primary);
 	}
 
 	/* ========================================

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

@@ -47,7 +47,7 @@ interface Props {
 /**
  * Select
  *
- * Neo-Brutalist Dark — Dropdown select with clean trigger field, glass-blur panel,
+ * INFRARED — Dropdown select with clean trigger field, glass-blur panel,
  * keyboard-first navigation, type-ahead search, option groups, and multi-select.
  *
  * Follows WAI-ARIA APG Select-Only Combobox pattern: DOM focus stays on

package/dist/forms/Slider/Slider.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Slider
 
-  Neo-Brutalist Dark — Range slider with keyboard support, optional value display,
+  INFRARED — Range slider with keyboard support, optional value display,
   step marks, min/max labels, and full ARIA compliance.
 
   @example
@@ -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,
@@ -199,50 +199,60 @@ function handleChange(e: Event) {
 
 	/* Focused track glow — WebKit */
 	.sx-slider-input:focus-visible::-webkit-slider-runnable-track {
-		box-shadow: 0 0 0 1px var(--sx-slider-accent, var(--sx-color-cyan));
+		box-shadow: 0 0 0 1px var(--sx-slider-accent, var(--sx-color-primary));
 	}
 
 	/* Focused track glow — Firefox */
 	.sx-slider-input:focus-visible::-moz-range-track {
-		box-shadow: 0 0 0 1px var(--sx-slider-accent, var(--sx-color-cyan));
+		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);
 		background: linear-gradient(
 			to right,
-			var(--sx-slider-accent, var(--sx-color-cyan)) 0%,
-			var(--sx-slider-accent, var(--sx-color-cyan)) var(--sx-slider-fill),
+			var(--sx-slider-accent, var(--sx-color-primary)) 0%,
+			var(--sx-slider-accent, var(--sx-color-primary)) var(--sx-slider-fill),
 			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 {
 		height: var(--sx-slider-track-h, 6px);
 		border-radius: var(--sx-radius-full);
-		background: var(--sx-slider-accent, var(--sx-color-cyan));
+		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);
-		border: 2px solid var(--sx-slider-accent, var(--sx-color-cyan));
+		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(0, 212, 255, 0.35)),
-			0 0 12px var(--sx-slider-glow, rgba(0, 212, 255, 0.25));
+			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 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-cyan));
+		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);
-		border: 2px solid var(--sx-slider-accent, var(--sx-color-cyan));
+		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,42 +300,49 @@ 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(0, 212, 255, 0.35)),
-			0 0 12px var(--sx-slider-glow, rgba(0, 212, 255, 0.25));
+			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 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-cyan));
+		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-accent: var(--sx-color-cyan);
-		--sx-slider-ring: rgba(0, 212, 255, 0.35);
-		--sx-slider-glow: rgba(0, 212, 255, 0.25);
+	.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);
 	}
 	.sx-slider-color-green {
 		--sx-slider-accent: var(--sx-color-green);
-		--sx-slider-ring: rgba(0, 255, 136, 0.35);
-		--sx-slider-glow: rgba(0, 255, 136, 0.25);
+		--sx-slider-ring: rgba(74, 222, 128, 0.35);
+		--sx-slider-glow: rgba(74, 222, 128, 0.25);
 	}
-	.sx-slider-color-gold {
-		--sx-slider-accent: var(--sx-color-gold);
-		--sx-slider-ring: rgba(255, 184, 0, 0.35);
-		--sx-slider-glow: rgba(255, 184, 0, 0.25);
+	.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);
 	}
 	.sx-slider-color-red {
 		--sx-slider-accent: var(--sx-color-red);
-		--sx-slider-ring: rgba(255, 82, 82, 0.35);
-		--sx-slider-glow: rgba(255, 82, 82, 0.25);
+		--sx-slider-ring: rgba(220, 38, 38, 0.35);
+		--sx-slider-glow: rgba(220, 38, 38, 0.25);
 	}
-	.sx-slider-color-purple {
-		--sx-slider-accent: var(--sx-color-purple);
-		--sx-slider-ring: rgba(168, 85, 247, 0.35);
-		--sx-slider-glow: rgba(168, 85, 247, 0.25);
+	.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);
 	}
 
 	/* Size variants */

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;
@@ -36,7 +36,7 @@ interface Props {
 /**
  * Slider
  *
- * Neo-Brutalist Dark — Range slider with keyboard support, optional value display,
+ * INFRARED — Range slider with keyboard support, optional value display,
  * step marks, min/max labels, and full ARIA compliance.
  *
  * @example

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"}