@salmexio/ui 0.4.0 → 1.0.0

package/dist/forms/Select/Select.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Select
 
-  Win2K × Basquiat — Dropdown select with sunken trigger field, raised panel,
+  Neo-Brutalist Dark — 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
@@ -219,7 +219,7 @@ function scrollActiveIntoView() {
 	if (!listboxEl || activeIndex < 0) return;
 	const active = listboxEl.querySelector(`[data-option-index="${activeIndex}"]`) as HTMLElement;
 	if (!active) return;
-	// Manual scroll math — only scrolls the listbox, never the page
+	// Manual scroll math -- only scrolls the listbox, never the page
 	const listTop = listboxEl.scrollTop;
 	const listHeight = listboxEl.clientHeight;
 	const elTop = active.offsetTop;
@@ -430,29 +430,29 @@ onMount(() => {
 </script>
 
 <div
-	class={cn('salmex-select-wrapper', `salmex-select-${size}`, className)}
+	class={cn('sx-select-wrapper', `sx-select-${size}`, className)}
 	data-testid={testId}
 >
 	<!-- Label -->
 	<label
 		id={labelId}
 		for={id}
-		class={cn('salmex-select-label', hideLabel && 'salmex-sr-only')}
+		class={cn('sx-select-label', hideLabel && 'sx-sr-only')}
 	>
 		{label}
-		{#if required}<span class="salmex-select-required" aria-hidden="true">*</span>{/if}
+		{#if required}<span class="sx-select-required" aria-hidden="true">*</span>{/if}
 	</label>
 
-	<!-- Trigger button — DOM focus always stays here -->
+	<!-- Trigger button -- DOM focus always stays here -->
 	<button
 		bind:this={triggerEl}
 		{id}
 		type="button"
 		class={cn(
-			'salmex-select-trigger',
-			isOpen && 'salmex-select-trigger-open',
-			showError && 'salmex-select-trigger-error',
-			disabled && 'salmex-select-trigger-disabled'
+			'sx-select-trigger',
+			isOpen && 'sx-select-trigger-open',
+			showError && 'sx-select-trigger-error',
+			disabled && 'sx-select-trigger-disabled'
 		)}
 		role="combobox"
 		aria-expanded={isOpen}
@@ -467,10 +467,10 @@ onMount(() => {
 		onclick={toggle}
 		onkeydown={handleKeydown}
 	>
-		<span class="salmex-select-value" class:salmex-select-placeholder={!selectedOption && selectedLabels.length === 0}>
+		<span class="sx-select-value" class:sx-select-placeholder={!selectedOption && selectedLabels.length === 0}>
 			{displayText}
 		</span>
-		<span class="salmex-select-chevron" aria-hidden="true">
+		<span class="sx-select-chevron" aria-hidden="true">
 			<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
 				<path d="M3 4.5L6 7.5L9 4.5" />
 			</svg>
@@ -478,22 +478,22 @@ onMount(() => {
 	</button>
 
 	<!-- Footer: error / hint -->
-	<div class="salmex-select-footer">
+	<div class="sx-select-footer">
 		{#if showError}
-			<p id={errorId} class="salmex-select-error" role="alert" aria-live="assertive">{error}</p>
+			<p id={errorId} class="sx-select-error" role="alert" aria-live="assertive">{error}</p>
 		{:else if hint}
-			<p id={hintId} class="salmex-select-hint">{hint}</p>
+			<p id={hintId} class="sx-select-hint">{hint}</p>
 		{/if}
 	</div>
 </div>
 
-<!-- Dropdown panel — fixed positioning to escape overflow/stacking contexts -->
+<!-- Dropdown panel -- fixed positioning to escape overflow/stacking contexts -->
 {#if isOpen}
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<div
 		bind:this={listboxEl}
 		id={listboxId}
-		class="salmex-select-panel"
+		class="sx-select-panel"
 		style="position:fixed;left:{panelLeft}px;{placeAbove ? `bottom:${window.innerHeight - panelTop}px` : `top:${panelTop}px`};width:{panelWidth}px;max-height:{panelMaxHeight}px;"
 		role="listbox"
 		aria-labelledby={labelId}
@@ -504,7 +504,7 @@ onMount(() => {
 		{#if groups.length > 0}
 			{#each groups as group, gi}
 				<div role="group" aria-label={group.label}>
-					<div class="salmex-select-group-label">{group.label}</div>
+					<div class="sx-select-group-label">{group.label}</div>
 					{#each group.options as opt, oi}
 						{@const globalIdx = getGlobalIndex(gi, oi)}
 						{@const isActive = globalIdx === activeIndex}
@@ -513,10 +513,10 @@ onMount(() => {
 						<div
 							id={getOptionId(globalIdx)}
 							class={cn(
-								'salmex-select-option',
-								isActive && 'salmex-select-option-active',
-								isSelected && 'salmex-select-option-selected',
-								opt.disabled && 'salmex-select-option-disabled'
+								'sx-select-option',
+								isActive && 'sx-select-option-active',
+								isSelected && 'sx-select-option-selected',
+								opt.disabled && 'sx-select-option-disabled'
 							)}
 							role="option"
 							tabindex="-1"
@@ -527,15 +527,15 @@ onMount(() => {
 							onmousedown={(e) => handleOptionMouseDown(e, opt)}
 						>
 							{#if multiple}
-								<span class="salmex-select-check" aria-hidden="true">
+								<span class="sx-select-check" aria-hidden="true">
 									{#if isSelected}
 										<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M2.5 6L5 8.5L9.5 3.5" /></svg>
 									{/if}
 								</span>
 							{/if}
-							<span class="salmex-select-option-label">{opt.label}</span>
+							<span class="sx-select-option-label">{opt.label}</span>
 							{#if !multiple && isSelected}
-								<span class="salmex-select-checkmark" aria-hidden="true">
+								<span class="sx-select-checkmark" aria-hidden="true">
 									<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M2.5 6L5 8.5L9.5 3.5" /></svg>
 								</span>
 							{/if}
@@ -551,10 +551,10 @@ onMount(() => {
 				<div
 					id={getOptionId(i)}
 					class={cn(
-						'salmex-select-option',
-						isActive && 'salmex-select-option-active',
-						isSelected && 'salmex-select-option-selected',
-						opt.disabled && 'salmex-select-option-disabled'
+						'sx-select-option',
+						isActive && 'sx-select-option-active',
+						isSelected && 'sx-select-option-selected',
+						opt.disabled && 'sx-select-option-disabled'
 					)}
 					role="option"
 					tabindex="-1"
@@ -565,15 +565,15 @@ onMount(() => {
 					onmousedown={(e) => handleOptionMouseDown(e, opt)}
 				>
 					{#if multiple}
-						<span class="salmex-select-check" aria-hidden="true">
+						<span class="sx-select-check" aria-hidden="true">
 							{#if isSelected}
 								<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M2.5 6L5 8.5L9.5 3.5" /></svg>
 							{/if}
 						</span>
 					{/if}
-					<span class="salmex-select-option-label">{opt.label}</span>
+					<span class="sx-select-option-label">{opt.label}</span>
 					{#if !multiple && isSelected}
-						<span class="salmex-select-checkmark" aria-hidden="true">
+						<span class="sx-select-checkmark" aria-hidden="true">
 							<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M2.5 6L5 8.5L9.5 3.5" /></svg>
 						</span>
 					{/if}
@@ -587,29 +587,28 @@ onMount(() => {
 	/* ========================================
 	   WRAPPER
 	   ======================================== */
-	.salmex-select-wrapper {
+	.sx-select-wrapper {
 		display: flex;
 		flex-direction: column;
-		gap: var(--salmex-space-1);
-		font-family: var(--salmex-font-system);
+		gap: var(--sx-space-1);
+		font-family: var(--sx-font-body);
 	}
 
 	/* ========================================
 	   LABEL
 	   ======================================== */
-	.salmex-select-label {
-		font-size: var(--salmex-font-size-sm);
-		font-weight: 700;
-		letter-spacing: 0.3px;
-		color: rgb(var(--salmex-text-primary));
+	.sx-select-label {
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-select-required {
-		color: rgb(var(--salmex-street-red));
+	.sx-select-required {
+		color: var(--sx-color-red);
 		margin-left: 2px;
 	}
 
-	.salmex-sr-only {
+	.sx-sr-only {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -622,177 +621,146 @@ onMount(() => {
 	}
 
 	/* ========================================
-	   TRIGGER — Sunken field matching TextInput
+	   TRIGGER -- Same style as TextInput
 	   ======================================== */
-	.salmex-select-trigger {
+	.sx-select-trigger {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: var(--salmex-space-2);
+		gap: var(--sx-space-2);
 		width: 100%;
-		border: 1px solid rgb(var(--salmex-border-dark));
-		border-radius: var(--salmex-radius-sm);
-		background: rgb(var(--salmex-bg-primary));
-		color: rgb(var(--salmex-text-primary));
-		font-family: var(--salmex-font-system);
-		font-weight: 600;
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		background: var(--sx-color-surface);
+		color: var(--sx-color-text);
+		font-family: var(--sx-font-body);
+		font-weight: 500;
 		cursor: pointer;
 		text-align: left;
-		transition: all var(--salmex-transition-fast);
-		/* Sunken inset — same as TextInput */
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight));
+		transition: border-color var(--sx-transition-fast), box-shadow var(--sx-transition-fast);
 	}
 
-	.salmex-select-trigger:hover:not(:disabled) {
-		border-color: rgb(var(--salmex-text-primary));
+	.sx-select-trigger:hover:not(:disabled) {
+		border-color: var(--sx-color-border-hover);
 	}
 
-	.salmex-select-trigger:focus-visible {
+	.sx-select-trigger:focus-visible {
 		outline: none;
-		border-color: rgb(var(--salmex-text-primary));
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
-			0 0 0 2px rgb(var(--salmex-midnight-black)),
-			0 0 2px 4px rgb(var(--salmex-crown-yellow));
-	}
-
-	:global([data-theme='dark']) .salmex-select-trigger:focus-visible {
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
-			0 0 2px 3px rgb(var(--salmex-crown-yellow));
+		border-color: var(--sx-color-cyan);
+		box-shadow: 0 0 0 3px var(--sx-color-cyan-ring);
 	}
 
-	.salmex-select-trigger-open {
-		border-color: rgb(var(--salmex-text-primary));
+	.sx-select-trigger-open {
+		border-color: var(--sx-color-cyan);
+		box-shadow: 0 0 0 3px var(--sx-color-cyan-ring);
 	}
 
-	.salmex-select-trigger-error {
-		border-color: rgb(var(--salmex-street-red));
+	.sx-select-trigger-error {
+		border-color: var(--sx-color-red);
+		box-shadow: 0 0 0 3px var(--sx-color-red-ring);
 	}
 
-	.salmex-select-trigger-disabled {
+	.sx-select-trigger-disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
-		filter: grayscale(0.5);
 	}
 
 	/* ========================================
 	   SIZES
 	   ======================================== */
-	.salmex-select-sm .salmex-select-trigger {
-		min-height: 24px;
-		padding: 0 var(--salmex-space-3);
-		font-size: var(--salmex-font-size-xs);
-	}
-
-	.salmex-select-md .salmex-select-trigger {
+	.sx-select-sm .sx-select-trigger {
 		min-height: 32px;
-		padding: 0 var(--salmex-space-4);
-		font-size: var(--salmex-font-size-base);
+		padding: 0 var(--sx-space-3);
+		font-size: var(--sx-text-xs);
 	}
 
-	.salmex-select-lg .salmex-select-trigger {
+	.sx-select-md .sx-select-trigger {
 		min-height: 40px;
-		padding: 0 var(--salmex-space-5);
-		font-size: var(--salmex-font-size-md);
+		padding: 0 var(--sx-space-4);
+		font-size: var(--sx-text-sm);
+	}
+
+	.sx-select-lg .sx-select-trigger {
+		min-height: 48px;
+		padding: 0 var(--sx-space-5);
+		font-size: var(--sx-text-base);
 	}
 
 	/* ========================================
 	   VALUE DISPLAY
 	   ======================================== */
-	.salmex-select-value {
+	.sx-select-value {
 		flex: 1;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
-	.salmex-select-placeholder {
-		color: rgb(var(--salmex-text-disabled));
+	.sx-select-placeholder {
+		color: var(--sx-color-text-disabled);
 	}
 
-	.salmex-select-chevron {
+	.sx-select-chevron {
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
-		transition: transform var(--salmex-transition-fast);
-		color: rgb(var(--salmex-text-secondary));
+		transition: transform var(--sx-transition-fast);
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-select-trigger-open .salmex-select-chevron {
+	.sx-select-trigger-open .sx-select-chevron {
 		transform: rotate(180deg);
 	}
 
 	/* ========================================
-	   DROPDOWN PANEL — Raised, bold shadow, fixed position
+	   DROPDOWN PANEL -- Glass surface, shadow, blur
 	   ======================================== */
-	.salmex-select-panel {
-		z-index: var(--salmex-z-dropdown);
+	.sx-select-panel {
+		z-index: var(--sx-z-dropdown);
 		overflow-y: auto;
 		overflow-x: hidden;
-		background: rgb(var(--salmex-bg-primary));
-		border: 2px solid rgb(var(--salmex-border-dark));
-		border-radius: var(--salmex-radius-md);
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			4px 4px 2px rgb(0 0 0 / 0.3);
+		background: var(--sx-color-surface-2);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		box-shadow: var(--sx-shadow-lg);
+		backdrop-filter: var(--sx-glass-blur);
+		-webkit-backdrop-filter: var(--sx-glass-blur);
 		outline: none;
-		padding: var(--salmex-space-1) 0;
-		font-family: var(--salmex-font-system);
-	}
-
-	:global([data-theme='dark']) .salmex-select-panel {
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			4px 4px 2px rgb(0 0 0 / 0.6);
+		padding: var(--sx-space-1) 0;
+		font-family: var(--sx-font-body);
 	}
 
 	/* ========================================
 	   OPTION
 	   ======================================== */
-	.salmex-select-option {
+	.sx-select-option {
 		display: flex;
 		align-items: center;
-		gap: var(--salmex-space-2);
-		padding: var(--salmex-space-2) var(--salmex-space-4);
-		font-size: var(--salmex-font-size-sm);
-		font-weight: 600;
-		color: rgb(var(--salmex-text-primary));
+		gap: var(--sx-space-2);
+		padding: var(--sx-space-2) var(--sx-space-4);
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text);
 		cursor: pointer;
 		user-select: none;
-		transition: background var(--salmex-transition-fast);
+		transition: background var(--sx-transition-fast), color var(--sx-transition-fast);
 	}
 
-	.salmex-select-option-active {
-		background: rgb(var(--salmex-electric-blue));
-		color: rgb(var(--salmex-chalk-white));
+	.sx-select-option-active {
+		background: var(--sx-color-cyan-hover);
+		color: var(--sx-color-cyan);
 	}
 
-	:global([data-theme='dark']) .salmex-select-option-active {
-		background: rgb(var(--salmex-primary-light));
-		color: rgb(var(--salmex-midnight-black));
+	.sx-select-option-selected:not(.sx-select-option-active) {
+		background: var(--sx-color-cyan-subtle);
 	}
 
-	.salmex-select-option-selected:not(.salmex-select-option-active) {
-		background: rgb(var(--salmex-electric-blue) / 0.1);
-	}
-
-	:global([data-theme='dark']) .salmex-select-option-selected:not(.salmex-select-option-active) {
-		background: rgb(var(--salmex-primary-light) / 0.15);
-	}
-
-	.salmex-select-option-disabled {
+	.sx-select-option-disabled {
 		opacity: 0.4;
 		cursor: not-allowed;
 	}
 
-	.salmex-select-option-label {
+	.sx-select-option-label {
 		flex: 1;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -800,74 +768,64 @@ onMount(() => {
 	}
 
 	/* Checkmark for single select */
-	.salmex-select-checkmark {
+	.sx-select-checkmark {
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
-		color: rgb(var(--salmex-electric-blue));
-	}
-
-	.salmex-select-option-active .salmex-select-checkmark {
-		color: rgb(var(--salmex-chalk-white));
+		color: var(--sx-color-cyan);
 	}
 
-	:global([data-theme='dark']) .salmex-select-option-active .salmex-select-checkmark {
-		color: rgb(var(--salmex-midnight-black));
+	.sx-select-option-active .sx-select-checkmark {
+		color: var(--sx-color-cyan);
 	}
 
 	/* Checkbox square for multi select */
-	.salmex-select-check {
+	.sx-select-check {
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		width: 16px;
 		height: 16px;
-		border: 1px solid rgb(var(--salmex-border-dark));
-		border-radius: var(--salmex-radius-sm);
-		background: rgb(var(--salmex-bg-primary));
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight));
-	}
-
-	.salmex-select-option-active .salmex-select-check {
-		border-color: rgb(var(--salmex-chalk-white));
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-sm);
+		background: var(--sx-color-surface);
 	}
 
-	:global([data-theme='dark']) .salmex-select-option-active .salmex-select-check {
-		border-color: rgb(var(--salmex-midnight-black));
+	.sx-select-option-active .sx-select-check {
+		border-color: var(--sx-color-cyan);
 	}
 
 	/* ========================================
 	   GROUP LABELS
 	   ======================================== */
-	.salmex-select-group-label {
-		padding: var(--salmex-space-2) var(--salmex-space-4) var(--salmex-space-1);
-		font-size: var(--salmex-font-size-xs);
-		font-weight: 700;
-		letter-spacing: 0.4px;
-		color: rgb(var(--salmex-text-secondary));
+	.sx-select-group-label {
+		padding: var(--sx-space-2) var(--sx-space-4) var(--sx-space-1);
+		font-size: var(--sx-text-xs);
+		font-weight: 600;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		color: var(--sx-color-text-disabled);
 		user-select: none;
 	}
 
 	/* ========================================
-	   FOOTER — Error / Hint
+	   FOOTER -- Error / Hint
 	   ======================================== */
-	.salmex-select-footer {
+	.sx-select-footer {
 		min-height: 18px;
 	}
 
-	.salmex-select-error {
-		font-size: var(--salmex-font-size-xs);
-		font-weight: 600;
-		color: rgb(var(--salmex-street-red));
+	.sx-select-error {
+		font-size: var(--sx-text-xs);
+		font-weight: 500;
+		color: var(--sx-color-red);
 		margin: 0;
 	}
 
-	.salmex-select-hint {
-		font-size: var(--salmex-font-size-xs);
-		color: rgb(var(--salmex-text-secondary));
+	.sx-select-hint {
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
 		margin: 0;
 	}
 
@@ -875,9 +833,9 @@ onMount(() => {
 	   REDUCED MOTION
 	   ======================================== */
 	@media (prefers-reduced-motion: reduce) {
-		.salmex-select-trigger,
-		.salmex-select-option,
-		.salmex-select-chevron {
+		.sx-select-trigger,
+		.sx-select-option,
+		.sx-select-chevron {
 			transition: none;
 		}
 	}

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

@@ -47,7 +47,7 @@ interface Props {
 /**
  * Select
  *
- * Win2K × Basquiat — Dropdown select with sunken trigger field, raised panel,
+ * Neo-Brutalist Dark — 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