@salmexio/ui 0.4.0 → 1.0.0

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

@@ -1,9 +1,10 @@
+import type { Snippet } from 'svelte';
 export interface CommandItem {
     id: string;
     label: string;
     shortcut?: string;
     group?: string;
-    icon?: string;
+    icon?: Snippet;
     description?: string;
     disabled?: boolean;
     action: () => void;
@@ -29,8 +30,12 @@ interface Props {
 /**
  * CommandPalette
  *
- * Win2K × Basquiat — Keyboard-first command launcher with sunken search field,
- * categorised result list, fuzzy matching, and shortcut display.
+ * Neo-Brutalist Dark — Premium keyboard-first command launcher.
+ * Glass backdrop, entrance animations, fuzzy search with match highlighting,
+ * categorised results, shortcut display, live result count announcements.
+ *
+ * ARIA: dialog containing combobox with listbox. Focus stays on input;
+ * aria-activedescendant communicates visual focus to screen readers.
  *
  * @example
  * <CommandPalette

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.svelte.d.ts","sourceRoot":"","sources":["../../../src/navigation/CommandPalette/CommandPalette.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;CACrB;AASD,UAAU,KAAK;IACd,6BAA6B;IAC7B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAgRD;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,cAAc,+CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CommandPalette.svelte.d.ts","sourceRoot":"","sources":["../../../src/navigation/CommandPalette/CommandPalette.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,WAAW;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;CACrB;AASD,UAAU,KAAK;IACd,6BAA6B;IAC7B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAmVD;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,cAAc,+CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/navigation/Tabs/Tabs.svelte

@@ -1,9 +1,9 @@
 <!--
   @component Tabs
-  
-  Win2K × Basquiat tabbed interface with 3D beveled tabs.
-  Bold structure, expressive colors, world-class accessibility.
-  
+
+  Neo-Brutalist Dark tabbed interface with underline indicator.
+  Clean structure, dark surfaces, world-class accessibility.
+
   @example
   <Tabs
     label="Content sections"
@@ -66,7 +66,7 @@ interface Props {
 }
 
 let {
-	id = `tabs-${Math.random().toString(36).substr(2, 9)}`,
+	id = `tabs-${Math.random().toString(36).slice(2, 11)}`,
 	label,
 	tabs,
 	value = '',
@@ -131,8 +131,8 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 }
 </script>
 
-<div class={cn('salmex-tabs-root', className)} data-testid={testId} {id}>
-	<div class={cn('salmex-tabs-list', `salmex-tabs-list-${size}`)} role="tablist" aria-label={label}>
+<div class={cn('sx-tabs-root', className)} data-testid={testId} {id}>
+	<div class={cn('sx-tabs-list', `sx-tabs-list-${size}`)} role="tablist" aria-label={label}>
 		{#each tabs as tab, index (tab.value)}
 			{@const isSelected = value === tab.value}
 			{@const isDisabled = tab.disabled}
@@ -146,10 +146,10 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 				aria-disabled={isDisabled}
 				disabled={isDisabled}
 				class={cn(
-					'salmex-tab',
-					`salmex-tab-${size}`,
-					isSelected && 'salmex-tab-selected',
-					isDisabled && 'salmex-tab-disabled'
+					'sx-tab',
+					`sx-tab-${size}`,
+					isSelected && 'sx-tab-selected',
+					isDisabled && 'sx-tab-disabled'
 				)}
 				onclick={() => activateTab(index)}
 				onkeydown={(e) => handleKeydown(e, index)}
@@ -158,13 +158,13 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 				onmouseleave={() => !isDisabled && onmouseleave?.(tab.value)}
 			>
 				{#if tab.icon}
-					<span class="salmex-tab-icon" aria-hidden="true">
+					<span class="sx-tab-icon" aria-hidden="true">
 						{@render tab.icon()}
 					</span>
 				{/if}
-				<span class="salmex-tab-label">{tab.label}</span>
+				<span class="sx-tab-label">{tab.label}</span>
 				{#if tab.badge !== undefined && tab.badge !== null && tab.badge !== ''}
-					<span class="salmex-tab-badge" aria-hidden="true">{tab.badge}</span>
+					<span class="sx-tab-badge" aria-hidden="true">{tab.badge}</span>
 				{/if}
 			</button>
 		{/each}
@@ -178,7 +178,7 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 			aria-labelledby={getTabId(index)}
 			hidden={!isSelected}
 			tabindex={0}
-			class={cn('salmex-tabs-panel', !isSelected && 'salmex-tabs-panel-hidden')}
+			class={cn('sx-tabs-panel', !isSelected && 'sx-tabs-panel-hidden')}
 		>
 			{#if isSelected && children}
 				{@render children(tab.value)}
@@ -191,177 +191,109 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 	/* ========================================
 	   ROOT
 	   ======================================== */
-	.salmex-tabs-root {
+	.sx-tabs-root {
 		display: block;
 		width: 100%;
 		position: relative;
 	}
 
 	/* ========================================
-	   TABLIST - Tabs sit ON the panel edge
+	   TABLIST — Flat underline style
 	   ======================================== */
-	.salmex-tabs-list {
+	.sx-tabs-list {
 		display: flex;
-		gap: var(--salmex-space-3);
-		padding: var(--salmex-space-2) var(--salmex-space-2) 6px;
-		margin-bottom: -6px;
+		gap: var(--sx-space-1);
+		padding: 0 var(--sx-space-2);
 		overflow-x: auto;
 		overflow-y: hidden;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: thin;
 		position: relative;
-		z-index: 2;
+		background: var(--sx-color-surface);
+		border-bottom: 1px solid var(--sx-color-border);
 	}
 
-	.salmex-tabs-list-sm {
-		min-height: 48px;
+	.sx-tabs-list-sm {
+		min-height: 40px;
 	}
 
-	.salmex-tabs-list-md {
-		min-height: 54px;
+	.sx-tabs-list-md {
+		min-height: 44px;
 	}
 
-	.salmex-tabs-list-lg {
-		min-height: 60px;
+	.sx-tabs-list-lg {
+		min-height: 48px;
 	}
 
 	/* ========================================
-	   TAB - Bold 3D Win2K button style matching Button component
+	   TAB — Clean flat style, underline indicator
 	   ======================================== */
-	.salmex-tab {
+	.sx-tab {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--salmex-space-2);
-		background: rgb(var(--salmex-button-face));
-		padding: var(--salmex-space-2) var(--salmex-space-4);
-		font-family: var(--salmex-font-system);
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.3px;
+		gap: var(--sx-space-2);
+		background: transparent;
+		border: none;
+		border-bottom: 2px solid transparent;
+		padding: var(--sx-space-2) var(--sx-space-4);
+		font-family: inherit;
+		font-weight: 500;
+		letter-spacing: 0.01em;
 		cursor: pointer;
 		white-space: nowrap;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
-		color: rgb(var(--salmex-text-primary));
+		color: var(--sx-color-text-secondary);
 		position: relative;
-		
-		/* Keep consistent height - unselected tabs float higher above */
-		margin-bottom: 0;
-		
-		/* Move all unselected tabs up more */
-		transform: translateY(-8px);
-		
-		/* Simplified 3D - just 1px inset, cleaner look */
-		box-shadow:
-			/* Top-left highlight */
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			/* Bottom-right shadow */
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			/* Flat shadow - Basquiat style */
-			3px 3px 1px rgb(0 0 0 / 0.2);
-		
-		/* Always account for focus border space (transparent when not focused) */
-		outline: 2px dashed transparent;
-		outline-offset: 2px;
-		
-		border-radius: var(--salmex-radius-sm) var(--salmex-radius-sm) 0 0;
-		transition: all var(--salmex-transition-fast);
-	}
-
-	.salmex-tab-sm {
-		height: auto;
-		font-size: var(--salmex-font-size-xs);
-		padding: 6px var(--salmex-space-3);
-	}
-
-	.salmex-tab-md {
-		height: auto;
-		font-size: var(--salmex-font-size-sm);
+		outline: none;
+		border-radius: 0;
+		transition: color var(--sx-transition-fast), background var(--sx-transition-fast), border-color var(--sx-transition-fast);
 	}
 
-	.salmex-tab-lg {
-		height: auto;
-		font-size: var(--salmex-font-size-base);
-		padding: var(--salmex-space-3) var(--salmex-space-5);
+	.sx-tab-sm {
+		font-size: var(--sx-text-xs);
+		padding: var(--sx-space-1) var(--sx-space-3);
 	}
 
-	.salmex-tab:hover:not(.salmex-tab-disabled):not(.salmex-tab-selected) {
-		background: rgb(var(--salmex-button-light));
-		transform: translateY(-6px);
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			4px 4px 1px rgb(0 0 0 / 0.25);
+	.sx-tab-md {
+		font-size: var(--sx-text-sm);
 	}
 
-	/* Active (pressed) state - inverted shadow for tactile feedback */
-	.salmex-tab:active:not(.salmex-tab-disabled):not(.salmex-tab-selected) {
-		box-shadow:
-			/* Inverted shadows for pressed effect */
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
-			inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
-			/* Reduced flat shadow */
-			1px 1px 0 rgb(0 0 0 / 0.3);
-		
-		/* Shift down for pressed effect - relative to hover position */
-		transform: translate(1px, -5px);
+	.sx-tab-lg {
+		font-size: var(--sx-text-base);
+		padding: var(--sx-space-3) var(--sx-space-5);
 	}
 
-	/* Selected tab - merges with panel using transform */
-	.salmex-tab-selected {
-		/* Match panel background */
-		background: rgb(var(--salmex-window-surface));
-		color: rgb(var(--salmex-electric-blue));
-		font-weight: 900;
-		z-index: 3;
-		
-		/* Use transform to move down and merge - extends further into panel */
-		transform: translateY(2px);
-
-		/* No bottom border */
-		border-bottom: none;
-		
-		/* Subtle 3D on sides only - merges at bottom */
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px 0 0 rgb(var(--salmex-button-shadow));
+	.sx-tab:hover:not(.sx-tab-disabled):not(.sx-tab-selected) {
+		color: var(--sx-color-text);
+		background: var(--sx-color-cyan-subtle);
 	}
 
-	/* Dark mode selected - bright blue text with lighter grey shadow */
-	:global([data-theme='dark']) .salmex-tab-selected {
-		color: rgb(var(--salmex-primary-light));
-		text-shadow: 
-			0.5px 0.5px 0 rgb(var(--salmex-border-default)),
-			-0.5px -0.5px 0 rgb(var(--salmex-border-default));
+	.sx-tab:active:not(.sx-tab-disabled):not(.sx-tab-selected) {
+		background: var(--sx-color-cyan-hover);
 	}
 
-	/* Focus - yellow ring, visible in light and dark */
-	.salmex-tab:focus-visible {
-		outline: none;
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			3px 3px 1px rgb(0 0 0 / 0.2),
-			0 0 0 2px rgb(var(--salmex-midnight-black)),
-			0 0 2px 4px rgb(var(--salmex-crown-yellow));
-		z-index: 10;
+	/* Selected tab — underline indicator */
+	.sx-tab-selected {
+		color: var(--sx-color-text);
+		font-weight: 600;
+		border-bottom-color: var(--sx-color-cyan);
 	}
 
-	:global([data-theme='dark']) .salmex-tab:focus-visible {
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			3px 3px 1px rgb(0 0 0 / 0.2),
-			0 0 2px 3px rgb(var(--salmex-crown-yellow));
+	/* Focus — cyan ring */
+	.sx-tab:focus-visible {
+		outline: 2px solid var(--sx-color-cyan);
+		outline-offset: -2px;
+		border-radius: var(--sx-radius-sm);
 	}
 
-	.salmex-tab-disabled {
+	.sx-tab-disabled {
 		cursor: not-allowed;
 		opacity: 0.5;
-		color: rgb(var(--salmex-text-disabled));
+		color: var(--sx-color-text-disabled);
 	}
 
-	.salmex-tab-icon {
+	.sx-tab-icon {
 		display: inline-flex;
 		flex-shrink: 0;
 		align-items: center;
@@ -369,92 +301,74 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
 		line-height: 0;
 	}
 
-	.salmex-tab-label {
+	.sx-tab-label {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 
-	.salmex-tab-badge {
+	.sx-tab-badge {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		min-width: 18px;
 		height: 18px;
-		padding: 0 6px;
-		background: rgb(var(--salmex-bg-tertiary));
-		border: 1px solid rgb(var(--salmex-border-default));
-		font-size: 11px;
-		font-weight: 700;
-		color: rgb(var(--salmex-text-secondary));
-		border-radius: var(--salmex-radius-xl);
-	}
-
-	.salmex-tab-selected .salmex-tab-badge {
-		background: rgb(var(--salmex-crown-yellow) / 0.2);
-		color: rgb(var(--salmex-electric-blue));
-		border-color: rgb(var(--salmex-electric-blue));
+		padding: 0 var(--sx-space-1-5);
+		background: var(--sx-color-cyan-active);
+		border: none;
+		font-size: var(--sx-text-xs);
+		font-weight: 600;
+		color: var(--sx-color-cyan);
+		border-radius: var(--sx-radius-full);
 	}
 
-	:global([data-theme='dark']) .salmex-tab-selected .salmex-tab-badge {
-		background: rgb(var(--salmex-crown-yellow) / 0.3);
-		color: rgb(var(--salmex-crown-yellow));
-		border-color: rgb(var(--salmex-crown-yellow));
+	.sx-tab-selected .sx-tab-badge {
+		background: rgba(0, 212, 255, 0.18);
 	}
 
 	/* ========================================
-	   TABPANEL - Bold panel matching Button component style
+	   TABPANEL — Transparent, no border
 	   ======================================== */
-	.salmex-tabs-panel {
+	.sx-tabs-panel {
 		min-height: 0;
 		overflow: auto;
-		padding: var(--salmex-space-6);
-		margin-top: 0;
-		background: rgb(var(--salmex-window-surface));
+		padding: var(--sx-space-6);
+		background: transparent;
 		position: relative;
-		z-index: 1;
-		
-		border-radius: 0 0 var(--salmex-radius-sm) var(--salmex-radius-sm);
-
-		/* Simplified inset 3D effect */
-		box-shadow:
-			/* Inner shadows for depth */
-			inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight));
 	}
 
-	.salmex-tabs-panel-hidden {
+	.sx-tabs-panel-hidden {
 		display: none !important;
 	}
 
-	.salmex-tabs-panel:focus {
+	.sx-tabs-panel:focus {
 		outline: none;
 	}
 
 	/* ========================================
 	   SCROLLBAR STYLING
 	   ======================================== */
-	.salmex-tabs-list::-webkit-scrollbar {
-		height: 8px;
+	.sx-tabs-list::-webkit-scrollbar {
+		height: 4px;
 	}
 
-	.salmex-tabs-list::-webkit-scrollbar-track {
-		background: rgb(var(--salmex-bg-tertiary));
+	.sx-tabs-list::-webkit-scrollbar-track {
+		background: transparent;
 	}
 
-	.salmex-tabs-list::-webkit-scrollbar-thumb {
-		background: rgb(var(--salmex-button-shadow));
-		border: 1px solid rgb(var(--salmex-border-default));
+	.sx-tabs-list::-webkit-scrollbar-thumb {
+		background: var(--sx-color-border-strong);
+		border-radius: 2px;
 	}
 
-	.salmex-tabs-list::-webkit-scrollbar-thumb:hover {
-		background: rgb(var(--salmex-button-dark-edge));
+	.sx-tabs-list::-webkit-scrollbar-thumb:hover {
+		background: var(--sx-color-border-hover);
 	}
 
 	/* ========================================
 	   REDUCED MOTION
 	   ======================================== */
 	@media (prefers-reduced-motion: reduce) {
-		.salmex-tab {
+		.sx-tab {
 			transition: none;
 		}
 	}

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

@@ -41,8 +41,8 @@ interface Props {
 /**
  * Tabs
  *
- * Win2K × Basquiat tabbed interface with 3D beveled tabs.
- * Bold structure, expressive colors, world-class accessibility.
+ * Neo-Brutalist Dark tabbed interface with underline indicator.
+ * Clean structure, dark surfaces, world-class accessibility.
  *
  * @example
  * <Tabs