@salmexio/ui 1.0.0 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # @salmexio/ui
 
-Neo-Brutalist Dark component library for Salmex I/O products. Built with Svelte 5 and TypeScript.
+INFRARED component library for Salmex I/O products. Built with Svelte 5 and TypeScript.
 
 ## Install
 

package/dist/dialogs/ContextMenu/ContextMenu.svelte

@@ -1,7 +1,7 @@
 <!--
   @component ContextMenu
 
-  Neo-Brutalist Dark — Right-click context menu with glass panel, keyboard navigation,
+  INFRARED — Right-click context menu with glass panel, keyboard navigation,
   separators, section headers, submenus, and keyboard shortcut hints.
 
   @example
@@ -421,8 +421,8 @@ onMount(() => {
 	}
 
 	.sx-context-item-active {
-		background: var(--sx-color-cyan-hover);
-		color: var(--sx-color-cyan);
+		background: var(--sx-color-primary-hover);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-context-item-disabled {
@@ -450,7 +450,7 @@ onMount(() => {
 	}
 
 	.sx-context-item-active .sx-context-icon {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-context-icon-spacer {
@@ -474,7 +474,7 @@ onMount(() => {
 	}
 
 	.sx-context-item-active .sx-context-shortcut {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 		opacity: 0.7;
 	}
 
@@ -488,7 +488,7 @@ onMount(() => {
 	}
 
 	.sx-context-item-active .sx-context-submenu-arrow {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	/* ========================================

package/dist/dialogs/ContextMenu/ContextMenu.svelte.d.ts

@@ -28,7 +28,7 @@ interface Props {
 /**
  * ContextMenu
  *
- * Neo-Brutalist Dark — Right-click context menu with glass panel, keyboard navigation,
+ * INFRARED — Right-click context menu with glass panel, keyboard navigation,
  * separators, section headers, submenus, and keyboard shortcut hints.
  *
  * @example

package/dist/dialogs/Modal/Modal.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Modal
 
-  Neo-Brutalist Dark — Dialog with glass surface, subtle border, clean header.
+  INFRARED — Dialog with glass surface, subtle border, clean header.
   Follows WAI-ARIA Dialog (Modal) pattern: focus trap, restore focus on close,
   aria-labelledby, aria-describedby, aria-modal. Escape and backdrop close.
   For full inert support (background not focusable), render modal in a portal
@@ -331,7 +331,7 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 	}
 
 	.sx-modal-title-wrap:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
 	}
 
@@ -376,7 +376,7 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 	}
 
 	.sx-modal-close:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
 	}
 

package/dist/dialogs/Modal/Modal.svelte.d.ts

@@ -31,7 +31,7 @@ interface Props {
 /**
  * Modal
  *
- * Neo-Brutalist Dark — Dialog with glass surface, subtle border, clean header.
+ * INFRARED — Dialog with glass surface, subtle border, clean header.
  * Follows WAI-ARIA Dialog (Modal) pattern: focus trap, restore focus on close,
  * aria-labelledby, aria-describedby, aria-modal. Escape and backdrop close.
  * For full inert support (background not focusable), render modal in a portal

package/dist/feedback/Alert/Alert.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Alert
 
-  Neo-Brutalist Dark — Clean message banner. Left accent border, dark surface.
+  INFRARED — Clean message banner. Left accent border, dark surface.
   Dismissible, expandable, optional title; role="alert" for errors.
 -->
 <script lang="ts">
@@ -157,7 +157,7 @@ function toggleExpanded() {
 </div>
 
 <style>
-	/* Neo-Brutalist Dark: surface card, left accent border, subtle type tint */
+	/* INFRARED: surface card, left accent border, subtle type tint */
 	.sx-alert {
 		display: flex;
 		gap: var(--sx-space-3);
@@ -168,6 +168,7 @@ function toggleExpanded() {
 		border-radius: var(--sx-radius-md);
 		font-family: var(--sx-font-body);
 		transition: box-shadow var(--sx-transition-fast);
+		animation: sx-alert-in var(--sx-duration-base) var(--sx-ease-out) both;
 	}
 
 	.sx-alert-standard {
@@ -251,7 +252,7 @@ function toggleExpanded() {
 
 	.sx-alert-title-btn:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--sx-color-cyan);
+		box-shadow: 0 0 0 2px var(--sx-color-primary);
 	}
 
 	.sx-alert-expand-icon {
@@ -288,7 +289,7 @@ function toggleExpanded() {
 
 	.sx-alert-dismiss:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--sx-color-cyan);
+		box-shadow: 0 0 0 2px var(--sx-color-primary);
 	}
 
 	/* Type: success */
@@ -321,12 +322,12 @@ function toggleExpanded() {
 
 	/* Type: warning */
 	.sx-alert-warning {
-		background: var(--sx-color-gold-subtle);
-		border-left-color: var(--sx-color-gold);
+		background: var(--sx-color-brass-subtle);
+		border-left-color: var(--sx-color-secondary);
 	}
 
 	.sx-alert-warning .sx-alert-icon {
-		color: var(--sx-color-gold);
+		color: var(--sx-color-secondary);
 	}
 
 	.sx-alert-warning .sx-alert-title {
@@ -335,12 +336,12 @@ function toggleExpanded() {
 
 	/* Type: info */
 	.sx-alert-info {
-		background: var(--sx-color-cyan-subtle);
-		border-left-color: var(--sx-color-cyan);
+		background: var(--sx-color-primary-subtle);
+		border-left-color: var(--sx-color-primary);
 	}
 
 	.sx-alert-info .sx-alert-icon {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-alert-info .sx-alert-title {
@@ -362,7 +363,11 @@ function toggleExpanded() {
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.sx-alert,
+		.sx-alert {
+			transition: none;
+			animation: none;
+		}
+
 		.sx-alert-dismiss,
 		.sx-alert-title-btn {
 			transition: none;

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

@@ -21,7 +21,7 @@ interface Props {
 /**
  * Alert
  *
- * Neo-Brutalist Dark — Clean message banner. Left accent border, dark surface.
+ * INFRARED — Clean message banner. Left accent border, dark surface.
  * Dismissible, expandable, optional title; role="alert" for errors.
  */
 declare const Alert: import("svelte").Component<Props, {}, "">;

package/dist/feedback/ProgressBar/ProgressBar.svelte

@@ -1,7 +1,7 @@
 <!--
   @component ProgressBar
 
-  Neo-Brutalist Dark — Determinate & indeterminate progress indicator with
+  INFRARED — Determinate & indeterminate progress indicator with
   optional label, value display, size variants, and full ARIA compliance.
 
   @example
@@ -184,27 +184,46 @@ const labelId = $derived(label ? `${stableId}-label` : undefined);
 		height: 100%;
 		border-radius: var(--sx-radius-full);
 		transition: width 0.3s var(--sx-ease-out);
+		position: relative;
+	}
+
+	/* Leading-edge glow — subtle light at the tip of the bar */
+	.sx-progress-fill::after {
+		content: '';
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		width: 24px;
+		border-radius: inherit;
+		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
+		opacity: 0.6;
 	}
 
 	/* Colors */
 	.sx-progress-color-cyan {
-		background: var(--sx-color-cyan);
+		background: var(--sx-color-primary);
+		box-shadow: 0 0 8px rgba(255, 107, 53, 0.2);
 	}
 
 	.sx-progress-color-green {
 		background: var(--sx-color-green);
+		box-shadow: 0 0 8px rgba(74, 222, 128, 0.2);
 	}
 
 	.sx-progress-color-gold {
-		background: var(--sx-color-gold);
+		background: var(--sx-color-secondary);
+		box-shadow: 0 0 8px rgba(200, 168, 78, 0.2);
 	}
 
 	.sx-progress-color-red {
 		background: var(--sx-color-red);
+		box-shadow: 0 0 8px rgba(220, 38, 38, 0.2);
 	}
 
 	.sx-progress-color-purple {
-		background: var(--sx-color-purple);
+		background: var(--sx-color-teal);
+		box-shadow: 0 0 8px rgba(61, 139, 139, 0.2);
 	}
 
 	/* Indeterminate */

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

@@ -26,7 +26,7 @@ interface Props {
 /**
  * ProgressBar
  *
- * Neo-Brutalist Dark — Determinate & indeterminate progress indicator with
+ * INFRARED — Determinate & indeterminate progress indicator with
  * optional label, value display, size variants, and full ARIA compliance.
  *
  * @example

package/dist/feedback/Skeleton/Skeleton.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Skeleton
 
-  Neo-Brutalist Dark — Content placeholder with shimmer animation.
+  INFRARED — Content placeholder with shimmer animation.
   Supports text lines, circles (avatars), and rectangular shapes.
   Uses aria-busy for screen readers.
 
@@ -124,12 +124,16 @@ const lineWidths = $derived(
 		position: absolute;
 		inset: 0;
 		background: linear-gradient(
-			90deg,
+			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%,
+			transparent 65%,
 			transparent 100%
 		);
-		animation: sx-skeleton-sweep 1.8s ease-in-out infinite;
+		animation: sx-skeleton-sweep 1.8s var(--sx-ease-in-out) infinite;
 	}
 
 	@keyframes sx-skeleton-sweep {

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

@@ -21,7 +21,7 @@ interface Props {
 /**
  * Skeleton
  *
- * Neo-Brutalist Dark — Content placeholder with shimmer animation.
+ * INFRARED — Content placeholder with shimmer animation.
  * Supports text lines, circles (avatars), and rectangular shapes.
  * Uses aria-busy for screen readers.
  *

package/dist/feedback/Spinner/Spinner.svelte

@@ -1,8 +1,8 @@
 <!--
   @component Spinner
 
-  Neo-Brutalist Dark — Clean loading indicator.
-  Cyan accent, dark surfaces, geometric shapes.
+  INFRARED — Clean loading indicator.
+  Vermilion accent, dark surfaces, geometric shapes.
   role="status", aria-label, delay, overlay. prefers-reduced-motion respected.
 
   Three styles: ring (default), dots (inline), pulse (radar/broadcast).
@@ -191,7 +191,7 @@ const config = $derived(sizeConfig[size]);
 
 	/* Variants */
 	.sx-spinner-primary {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-spinner-secondary {

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

@@ -15,8 +15,8 @@ interface Props {
 /**
  * Spinner
  *
- * Neo-Brutalist Dark — Clean loading indicator.
- * Cyan accent, dark surfaces, geometric shapes.
+ * INFRARED — Clean loading indicator.
+ * Vermilion accent, dark surfaces, geometric shapes.
  * role="status", aria-label, delay, overlay. prefers-reduced-motion respected.
  *
  * Three styles: ring (default), dots (inline), pulse (radar/broadcast).

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.
 
@@ -231,7 +231,7 @@ onMount(() => {
 	}
 
 	.sx-toast:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
 	}
 
@@ -249,11 +249,11 @@ onMount(() => {
 	}
 
 	.sx-toast-warning {
-		border-left-color: var(--sx-color-gold);
+		border-left-color: var(--sx-color-secondary);
 	}
 
 	.sx-toast-info {
-		border-left-color: var(--sx-color-cyan);
+		border-left-color: var(--sx-color-primary);
 	}
 
 	/* Icon */
@@ -273,11 +273,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 +317,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 +325,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 +353,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.
 -->
@@ -209,22 +209,23 @@ 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 -- vermilion fill, white checkmark */
 	.sx-checkbox-box-checked {
-		background: var(--sx-color-cyan);
-		border-color: var(--sx-color-cyan);
+		background: var(--sx-color-primary);
+		border-color: var(--sx-color-primary);
 	}
 
 	/* Indeterminate -- same as checked */
 	.sx-checkbox-box-indeterminate {
-		background: var(--sx-color-cyan);
-		border-color: var(--sx-color-cyan);
+		background: var(--sx-color-primary);
+		border-color: var(--sx-color-primary);
 	}
 
 	/* Hover -- border brightens on unchecked box */
@@ -232,9 +233,9 @@ function handleChange(e: Event) {
 		border-color: var(--sx-color-border-hover);
 	}
 
-	/* Focus -- cyan outline */
+	/* Focus -- primary outline */
 	.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;
 	}
 
@@ -303,5 +304,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
@@ -646,13 +646,13 @@ 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: 0 0 0 3px var(--sx-color-primary-ring);
 	}
 
 	.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: 0 0 0 3px var(--sx-color-primary-ring);
 	}
 
 	.sx-select-trigger-error {
@@ -747,12 +747,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 +772,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 +793,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