@salmexio/ui 1.0.0 → 1.2.0

package/dist/navigation/NavMenu/NavMenu.svelte.d.ts

@@ -0,0 +1,81 @@
+import type { Snippet } from 'svelte';
+export interface NavMenuItem {
+    type: 'item';
+    /** Unique identifier for active state matching */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Link target (renders <a>); omit for button behavior */
+    href?: string;
+    /** Icon snippet */
+    icon?: Snippet;
+    /** Badge text (e.g. "New", count) */
+    badge?: string | number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Nested sub-items */
+    children?: NavMenuItem[];
+}
+export interface NavMenuGroup {
+    type: 'group';
+    /** Group heading label */
+    label: string;
+    /** Whether the group starts collapsed */
+    defaultCollapsed?: boolean;
+    /** Items in this group */
+    items: NavMenuEntry[];
+}
+export interface NavMenuSeparator {
+    type: 'separator';
+}
+export type NavMenuEntry = NavMenuItem | NavMenuGroup | NavMenuSeparator;
+interface Props {
+    /** Menu entries: items, groups, and separators */
+    items: NavMenuEntry[];
+    /** ID of the currently active item */
+    activeId?: string;
+    /** Fired when an item is activated (click or Enter) */
+    onselect?: (id: string, href?: string) => void;
+    /** Whether groups can be collapsed (default true) */
+    collapsible?: boolean;
+    /** Additional CSS class */
+    class?: string;
+    /** Accessible label for the nav element */
+    label?: string;
+    /** Test ID */
+    testId?: string;
+}
+/**
+ * NavMenu
+ *
+ * INFRARED — Persistent navigation menu with collapsible groups, sub-items,
+ * icons, badges, and keyboard navigation. Built for sidebars, settings panels,
+ * and any vertical nav structure.
+ *
+ * @example
+ * <NavMenu
+ *   items={[
+ *     {
+ *       type: 'group',
+ *       label: 'Getting Started',
+ *       items: [
+ *         { type: 'item', id: 'intro', label: 'Introduction', href: '/' },
+ *         { type: 'item', id: 'install', label: 'Installation', href: '/install', badge: 'New' },
+ *       ]
+ *     },
+ *     { type: 'separator' },
+ *     {
+ *       type: 'item',
+ *       id: 'settings',
+ *       label: 'Settings',
+ *       href: '/settings',
+ *       icon: settingsIcon,
+ *     }
+ *   ]}
+ *   activeId="intro"
+ * />
+ */
+declare const NavMenu: import("svelte").Component<Props, {}, "">;
+type NavMenu = ReturnType<typeof NavMenu>;
+export default NavMenu;
+//# sourceMappingURL=NavMenu.svelte.d.ts.map

package/dist/navigation/NavMenu/NavMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/navigation/NavMenu/NavMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,WAAW;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0BAA0B;IAC1B,KAAK,EAAE,YAAY,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAChC,IAAI,EAAE,WAAW,CAAC;CAClB;AAED,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAOzE,UAAU,KAAK;IACd,kDAAkD;IAClD,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA2TD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/navigation/NavMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NavMenu } from './NavMenu.svelte';
+export type { NavMenuItem, NavMenuGroup, NavMenuSeparator, NavMenuEntry } from './NavMenu.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation/NavMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/navigation/NavMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/navigation/NavMenu/index.js

@@ -0,0 +1 @@
+export { default as NavMenu } from './NavMenu.svelte';

package/dist/navigation/Tabs/Tabs.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Tabs
 
-  Neo-Brutalist Dark tabbed interface with underline indicator.
+  INFRARED tabbed interface with underline indicator.
   Clean structure, dark surfaces, world-class accessibility.
 
   @example
@@ -198,7 +198,7 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 	}
 
 	/* ========================================
-	   TABLIST — Flat underline style
+	   TABLIST — Recessed rail with depth
 	   ======================================== */
 	.sx-tabs-list {
 		display: flex;
@@ -211,6 +211,7 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 		position: relative;
 		background: var(--sx-color-surface);
 		border-bottom: 1px solid var(--sx-color-border);
+		box-shadow: inset 0 -2px 4px -2px rgba(0, 0, 0, 0.2);
 	}
 
 	.sx-tabs-list-sm {
@@ -266,23 +267,75 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 
 	.sx-tab:hover:not(.sx-tab-disabled):not(.sx-tab-selected) {
 		color: var(--sx-color-text);
-		background: var(--sx-color-cyan-subtle);
+		background: var(--sx-color-primary-subtle);
 	}
 
 	.sx-tab:active:not(.sx-tab-disabled):not(.sx-tab-selected) {
-		background: var(--sx-color-cyan-hover);
+		background: var(--sx-color-primary-hover);
 	}
 
-	/* Selected tab — underline indicator */
+	/* Selected tab — elevated with subtle depth */
 	.sx-tab-selected {
 		color: var(--sx-color-text);
 		font-weight: 600;
-		border-bottom-color: var(--sx-color-cyan);
+		border-bottom-color: transparent;
 	}
 
-	/* Focus — cyan ring */
+	/* Forge-gradient indicator rail — multi-color strip with glow bleed */
+	.sx-tab::after {
+		content: '';
+		position: absolute;
+		bottom: -1px;
+		left: var(--sx-space-4);
+		right: var(--sx-space-4);
+		height: 3px;
+		background:
+			linear-gradient(
+				90deg,
+				#FF6B35,
+				#C8A84E 50%,
+				#3D8B8B
+			);
+		background-size: 200% 100%;
+		border-radius: 3px 3px 0 0;
+		transform: scaleX(0);
+		transform-origin: center;
+		transition:
+			transform var(--sx-duration-base) var(--sx-ease-out),
+			box-shadow var(--sx-duration-base) var(--sx-ease-out);
+		box-shadow: none;
+	}
+
+	.sx-tab-sm::after {
+		left: var(--sx-space-3);
+		right: var(--sx-space-3);
+		height: 2px;
+	}
+
+	.sx-tab-lg::after {
+		left: var(--sx-space-5);
+		right: var(--sx-space-5);
+		height: 3px;
+	}
+
+	.sx-tab-selected::after {
+		transform: scaleX(1);
+		animation: sx-tab-forge 6s ease-in-out infinite;
+
+		/* Glow bleed underneath the indicator */
+		box-shadow:
+			0 0 8px -1px rgba(255, 107, 53, 0.4),
+			0 0 16px -4px rgba(200, 168, 78, 0.2);
+	}
+
+	@keyframes sx-tab-forge {
+		0%, 100% { background-position: 0% 50%; }
+		50% { background-position: 100% 50%; }
+	}
+
+	/* Focus — primary ring */
 	.sx-tab:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: -2px;
 		border-radius: var(--sx-radius-sm);
 	}
@@ -313,16 +366,16 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 		min-width: 18px;
 		height: 18px;
 		padding: 0 var(--sx-space-1-5);
-		background: var(--sx-color-cyan-active);
+		background: var(--sx-color-primary-active);
 		border: none;
 		font-size: var(--sx-text-xs);
 		font-weight: 600;
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 		border-radius: var(--sx-radius-full);
 	}
 
 	.sx-tab-selected .sx-tab-badge {
-		background: rgba(0, 212, 255, 0.18);
+		background: rgba(255, 107, 53, 0.18);
 	}
 
 	/* ========================================
@@ -371,5 +424,14 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 		.sx-tab {
 			transition: none;
 		}
+
+		.sx-tab::after {
+			transition: none;
+		}
+
+		.sx-tab-selected::after {
+			animation: none;
+			background: linear-gradient(90deg, #FF6B35, #C8A84E);
+		}
 	}
 </style>

package/dist/navigation/Tabs/Tabs.svelte.d.ts

@@ -41,7 +41,7 @@ interface Props {
 /**
  * Tabs
  *
- * Neo-Brutalist Dark tabbed interface with underline indicator.
+ * INFRARED tabbed interface with underline indicator.
  * Clean structure, dark surfaces, world-class accessibility.
  *
  * @example

package/dist/navigation/index.d.ts

@@ -2,4 +2,6 @@ export { Tabs } from './Tabs/index.js';
 export type { TabOption } from './Tabs/index.js';
 export { CommandPalette } from './CommandPalette/index.js';
 export type { CommandItem, CommandGroup } from './CommandPalette/index.js';
+export { NavMenu } from './NavMenu/index.js';
+export type { NavMenuItem, NavMenuGroup, NavMenuSeparator, NavMenuEntry } from './NavMenu/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/navigation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/navigation/index.js

@@ -1,2 +1,3 @@
 export { Tabs } from './Tabs/index.js';
 export { CommandPalette } from './CommandPalette/index.js';
+export { NavMenu } from './NavMenu/index.js';

package/dist/primitives/Badge/Badge.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Badge
 
-  Neo-Brutalist Dark — Status badge for labels, counts, and states.
+  INFRARED — Status badge for labels, counts, and states.
   Pill-shaped, translucent backgrounds, role="status" for screen readers.
 
   @example
@@ -79,17 +79,21 @@ let {
 {/if}
 
 <style>
-	/* Base */
+	/* Base — stamped metal tag with thin extrusion */
 	.sx-badge {
 		display: inline-flex;
 		align-items: center;
 		gap: var(--sx-space-1);
 		font-family: var(--sx-font-body);
-		font-weight: 500;
+		font-weight: 600;
+		letter-spacing: 0.02em;
 		white-space: nowrap;
 		transition: box-shadow var(--sx-transition-fast);
 		border: 1px solid transparent;
-		box-shadow: none;
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 4px -1px rgba(0, 0, 0, 0.2);
+		animation: sx-badge-pop 200ms var(--sx-ease-spring) both;
 	}
 
 	/* Pill shape for all non-dot badges */
@@ -153,90 +157,133 @@ let {
 	}
 
 	/* ========================================
-	   STATUS VARIANTS - Neo-Brutalist Dark
+	   STATUS VARIANTS - INFRARED
 	   ======================================== */
 
-	/* Neutral */
+	/* Neutral — metal surface */
 	.sx-badge-neutral {
 		background: var(--sx-color-surface-2);
 		color: var(--sx-color-text-secondary);
+		border-color: rgba(255, 255, 255, 0.04);
+		border-bottom-color: rgba(0, 0, 0, 0.15);
 	}
 
 	.sx-badge-dot.sx-badge-neutral {
 		background: var(--sx-color-text-secondary);
 		border: none;
+		box-shadow: 0 0 4px -1px rgba(160, 160, 180, 0.3);
 	}
 
-	/* Primary — cyan */
+	/* Primary — vermilion stamped tag */
 	.sx-badge-primary {
-		background: var(--sx-color-cyan-active);
-		color: var(--sx-color-cyan);
+		background: var(--sx-color-primary-active);
+		color: var(--sx-color-primary);
+		border-color: rgba(255, 107, 53, 0.1);
+		border-bottom-color: rgba(160, 50, 10, 0.2);
+		box-shadow:
+			0 1px 0 0 rgba(160, 50, 10, 0.25),
+			0 2px 4px -1px rgba(0, 0, 0, 0.2),
+			0 0 6px -2px rgba(255, 107, 53, 0.15);
 	}
 
 	.sx-badge-dot.sx-badge-primary {
-		background: var(--sx-color-cyan);
+		background: var(--sx-color-primary);
 		border: none;
+		box-shadow: 0 0 6px -1px rgba(255, 107, 53, 0.4);
 	}
 
-	/* Success — green */
+	/* Success — green stamped tag */
 	.sx-badge-success {
 		background: var(--sx-color-green-subtle);
 		color: var(--sx-color-green);
+		border-color: rgba(34, 197, 94, 0.08);
+		border-bottom-color: rgba(20, 100, 50, 0.2);
+		box-shadow:
+			0 1px 0 0 rgba(20, 100, 50, 0.25),
+			0 2px 4px -1px rgba(0, 0, 0, 0.2),
+			0 0 6px -2px rgba(34, 197, 94, 0.12);
 	}
 
 	.sx-badge-dot.sx-badge-success {
 		background: var(--sx-color-green);
 		border: none;
+		box-shadow: 0 0 6px -1px rgba(34, 197, 94, 0.4);
 	}
 
-	/* Warning — gold */
+	/* Warning — brass stamped tag */
 	.sx-badge-warning {
-		background: var(--sx-color-gold-subtle);
-		color: var(--sx-color-gold);
+		background: var(--sx-color-brass-subtle);
+		color: var(--sx-color-secondary);
+		border-color: rgba(200, 168, 78, 0.08);
+		border-bottom-color: rgba(130, 108, 50, 0.2);
+		box-shadow:
+			0 1px 0 0 rgba(130, 108, 50, 0.25),
+			0 2px 4px -1px rgba(0, 0, 0, 0.2),
+			0 0 6px -2px rgba(200, 168, 78, 0.12);
 	}
 
 	.sx-badge-dot.sx-badge-warning {
-		background: var(--sx-color-gold);
+		background: var(--sx-color-secondary);
 		border: none;
+		box-shadow: 0 0 6px -1px rgba(200, 168, 78, 0.4);
 	}
 
-	/* Error — red */
+	/* Error — crimson stamped tag */
 	.sx-badge-error {
 		background: var(--sx-color-red-hover);
 		color: var(--sx-color-red);
+		border-color: rgba(220, 38, 38, 0.08);
+		border-bottom-color: rgba(140, 20, 20, 0.2);
+		box-shadow:
+			0 1px 0 0 rgba(140, 20, 20, 0.25),
+			0 2px 4px -1px rgba(0, 0, 0, 0.2),
+			0 0 6px -2px rgba(220, 38, 38, 0.12);
 	}
 
 	.sx-badge-dot.sx-badge-error {
 		background: var(--sx-color-red);
 		border: none;
+		box-shadow: 0 0 6px -1px rgba(220, 38, 38, 0.4);
 	}
 
-	/* Info — purple */
+	/* Info — teal stamped tag */
 	.sx-badge-info {
-		background: var(--sx-color-purple-subtle);
-		color: var(--sx-color-purple);
+		background: var(--sx-color-teal-subtle);
+		color: var(--sx-color-teal);
+		border-color: rgba(61, 139, 139, 0.08);
+		border-bottom-color: rgba(30, 80, 80, 0.2);
+		box-shadow:
+			0 1px 0 0 rgba(30, 80, 80, 0.25),
+			0 2px 4px -1px rgba(0, 0, 0, 0.2),
+			0 0 6px -2px rgba(61, 139, 139, 0.12);
 	}
 
 	.sx-badge-dot.sx-badge-info {
-		background: var(--sx-color-purple);
+		background: var(--sx-color-teal);
 		border: none;
+		box-shadow: 0 0 6px -1px rgba(61, 139, 139, 0.4);
 	}
 
-	/* Outline — transparent with border */
+	/* Outline — recessed stamp, no fill */
 	.sx-badge-outline {
 		background: transparent;
 		color: var(--sx-color-text-secondary);
 		border: 1px solid var(--sx-color-border-strong);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.15),
+			0 1px 0 0 rgba(255, 255, 255, 0.03);
 	}
 
 	.sx-badge-dot.sx-badge-outline {
 		background: var(--sx-color-border-strong);
 		border: none;
+		box-shadow: none;
 	}
 
 	@media (prefers-reduced-motion: reduce) {
 		.sx-badge {
 			transition: none;
+			animation: none;
 		}
 	}
 </style>

package/dist/primitives/Badge/Badge.svelte.d.ts

@@ -20,7 +20,7 @@ interface Props {
 /**
  * Badge
  *
- * Neo-Brutalist Dark — Status badge for labels, counts, and states.
+ * INFRARED — Status badge for labels, counts, and states.
  * Pill-shaped, translucent backgrounds, role="status" for screen readers.
  *
  * @example