@salmexio/ui 0.4.0 → 1.1.0

package/dist/forms/TextInput/TextInput.svelte

@@ -1,7 +1,7 @@
 <!--
   @component TextInput
 
-  Win2K × Basquiat — Canvas-style text field with bold borders.
+  INFRARED — Clean text field with subtle borders and vermilion accents.
   Label, error, hint, prefix/suffix, clearable, password toggle. Full a11y.
 -->
 <script lang="ts">
@@ -151,33 +151,33 @@ function handleKeyDown(e: KeyboardEvent) {
 
 <div
 	class={cn(
-		'salmex-input-wrapper',
-		`salmex-input-${size}`,
-		disabled && 'salmex-input-disabled',
+		'sx-input-wrapper',
+		`sx-input-${size}`,
+		disabled && 'sx-input-disabled',
 		className
 	)}
 >
-	<label for={id} class={cn('salmex-input-label', hideLabel && 'salmex-sr-only')}>
+	<label for={id} class={cn('sx-input-label', hideLabel && 'sx-sr-only')}>
 		{label}
 		{#if required}
-			<span class="salmex-input-required" aria-hidden="true">*</span>
+			<span class="sx-input-required" aria-hidden="true">*</span>
 		{/if}
 	</label>
 
 	<div
 		class={cn(
-			'salmex-input-field-wrapper',
-			isFocused && 'salmex-input-focused',
-			showError && 'salmex-input-error',
-			showSuccess && 'salmex-input-valid',
-			disabled && 'salmex-input-disabled-wrap'
+			'sx-input-field-wrapper',
+			isFocused && 'sx-input-focused',
+			showError && 'sx-input-error',
+			showSuccess && 'sx-input-valid',
+			disabled && 'sx-input-disabled-wrap'
 		)}
 	>
 		{#if prefix}
-			<span class="salmex-input-prefix" aria-hidden="true">{prefix}</span>
+			<span class="sx-input-prefix" aria-hidden="true">{prefix}</span>
 		{/if}
 		{#if iconLeft}
-			<span class="salmex-input-icon-left" aria-hidden="true">
+			<span class="sx-input-icon-left" aria-hidden="true">
 				{@render iconLeft()}
 			</span>
 		{/if}
@@ -202,11 +202,11 @@ function handleKeyDown(e: KeyboardEvent) {
 			aria-required={required}
 			data-testid={testId}
 			class={cn(
-				'salmex-input-field',
-				prefix && 'salmex-input-has-prefix',
-				suffix && 'salmex-input-has-suffix',
-				iconLeft && 'salmex-input-has-icon-left',
-				hasRightContent && 'salmex-input-has-right'
+				'sx-input-field',
+				prefix && 'sx-input-has-prefix',
+				suffix && 'sx-input-has-suffix',
+				iconLeft && 'sx-input-has-icon-left',
+				hasRightContent && 'sx-input-has-right'
 			)}
 			oninput={handleInput}
 			onblur={handleBlur}
@@ -215,24 +215,24 @@ function handleKeyDown(e: KeyboardEvent) {
 			{...restProps}
 		/>
 
-		<div class="salmex-input-right">
+		<div class="sx-input-right">
 			{#if loading}
-				<span class="salmex-input-loading" aria-hidden="true">
-					<svg class="salmex-input-spinner" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+				<span class="sx-input-loading" aria-hidden="true">
+					<svg class="sx-input-spinner" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
 						<circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
 						<path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
 					</svg>
 				</span>
 			{:else if showError}
-				<span class="salmex-input-icon-error" aria-hidden="true">
+				<span class="sx-input-icon-error" aria-hidden="true">
 					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
 				</span>
 			{:else if showSuccess}
-				<span class="salmex-input-icon-success" aria-hidden="true">
+				<span class="sx-input-icon-success" aria-hidden="true">
 					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
 				</span>
 			{:else if iconRight}
-				<span class="salmex-input-icon-right" aria-hidden="true">
+				<span class="sx-input-icon-right" aria-hidden="true">
 					{@render iconRight()}
 				</span>
 			{/if}
@@ -240,7 +240,7 @@ function handleKeyDown(e: KeyboardEvent) {
 			{#if clearable && value && !disabled && !readonly}
 				<button
 					type="button"
-					class="salmex-input-clear"
+					class="sx-input-clear"
 					onclick={handleClear}
 					aria-label="Clear input"
 					tabindex={-1}
@@ -252,7 +252,7 @@ function handleKeyDown(e: KeyboardEvent) {
 			{#if showPasswordToggle && type === 'password'}
 				<button
 					type="button"
-					class="salmex-input-password-toggle"
+					class="sx-input-password-toggle"
 					onclick={togglePassword}
 					aria-label={passwordVisible ? 'Hide password' : 'Show password'}
 					aria-pressed={passwordVisible}
@@ -268,24 +268,24 @@ function handleKeyDown(e: KeyboardEvent) {
 		</div>
 
 		{#if suffix}
-			<span class="salmex-input-suffix" aria-hidden="true">{suffix}</span>
+			<span class="sx-input-suffix" aria-hidden="true">{suffix}</span>
 		{/if}
 	</div>
 
-	<div class="salmex-input-footer">
-		<div class="salmex-input-messages">
+	<div class="sx-input-footer">
+		<div class="sx-input-messages">
 			{#if showError}
-				<p id={errorId} class="salmex-input-message salmex-input-message-error" role="alert" aria-live="assertive">
+				<p id={errorId} class="sx-input-message sx-input-message-error" role="alert" aria-live="assertive">
 					{error}
 				</p>
 			{:else if showSuccess}
-				<p class="salmex-input-message salmex-input-message-success">{successMessage}</p>
+				<p class="sx-input-message sx-input-message-success" role="status" aria-live="polite">{successMessage}</p>
 			{:else if hint}
-				<p id={hintId} class="salmex-input-message salmex-input-message-hint">{hint}</p>
+				<p id={hintId} class="sx-input-message sx-input-message-hint">{hint}</p>
 			{/if}
 		</div>
 		{#if showCharCount && maxLength !== undefined}
-			<span class="salmex-input-charcount" class:salmex-input-charcount-warn={value.length > maxLength * 0.9}>
+			<span class="sx-input-charcount" class:sx-input-charcount-warn={value.length > maxLength * 0.9}>
 				{value.length}/{maxLength}
 			</span>
 		{/if}
@@ -293,29 +293,28 @@ function handleKeyDown(e: KeyboardEvent) {
 </div>
 
 <style>
-	.salmex-input-wrapper {
+	.sx-input-wrapper {
 		display: flex;
 		flex-direction: column;
-		gap: var(--salmex-space-1);
+		gap: var(--sx-space-1);
 	}
 
-	.salmex-input-disabled {
-		opacity: 0.6;
+	.sx-input-disabled {
+		opacity: 0.5;
 	}
 
-	.salmex-input-label {
-		font-family: var(--salmex-font-system);
-		font-weight: 600;
-		font-size: var(--salmex-font-size-sm);
-		letter-spacing: 0.3px;
-		color: rgb(var(--salmex-text-primary));
+	.sx-input-label {
+		font-family: var(--sx-font-body);
+		font-weight: 500;
+		font-size: var(--sx-text-sm);
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-input-required {
-		color: rgb(var(--salmex-street-red));
+	.sx-input-required {
+		color: var(--sx-color-red);
 	}
 
-	.salmex-sr-only {
+	.sx-sr-only {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -327,182 +326,172 @@ function handleKeyDown(e: KeyboardEvent) {
 		border: 0;
 	}
 
-	.salmex-input-field-wrapper {
+	.sx-input-field-wrapper {
 		position: relative;
 		display: flex;
 		align-items: center;
-		background: rgb(var(--salmex-button-face));
-		border: 1px solid rgb(var(--salmex-border-dark));
-		border-radius: var(--salmex-radius-sm);
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow));
-		transition: box-shadow var(--salmex-transition-fast), border-color var(--salmex-transition-fast);
+		background: var(--sx-color-surface);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		transition: border-color var(--sx-transition-fast), box-shadow var(--sx-transition-fast);
 	}
 
-	/* Focus - yellow ring with dark edge in light theme for visibility */
-	.salmex-input-focused {
-		border-color: rgb(var(--salmex-midnight-black));
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 2px rgb(var(--salmex-midnight-black)),
-			0 0 2px 4px rgb(var(--salmex-crown-yellow));
+	.sx-input-field-wrapper:hover:not(.sx-input-disabled-wrap):not(.sx-input-focused):not(.sx-input-error) {
+		border-color: var(--sx-color-border-hover);
 	}
 
-	:global([data-theme='dark']) .salmex-input-focused {
-		border-color: rgb(var(--salmex-border-light));
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			0 0 2px 3px rgb(var(--salmex-crown-yellow));
+	.sx-input-focused {
+		border-color: var(--sx-color-primary);
+		animation: sx-focus-breathe 2s ease-in-out infinite;
 	}
 
-	.salmex-input-error {
-		border-color: rgb(var(--salmex-street-red));
+	.sx-input-error {
+		border-color: var(--sx-color-red);
+		box-shadow: 0 0 0 3px var(--sx-color-red-ring);
+		animation: sx-error-shake 300ms ease-out;
 	}
 
-	.salmex-input-valid {
-		border-color: rgb(var(--salmex-urban-green));
+	.sx-input-valid {
+		border-color: var(--sx-color-green);
 	}
 
-	.salmex-input-disabled-wrap {
-		opacity: 0.7;
+	.sx-input-disabled-wrap {
+		opacity: 0.5;
 		cursor: not-allowed;
-		background: rgb(var(--salmex-bg-tertiary));
+		background: var(--sx-color-surface-2);
 	}
 
-	.salmex-input-prefix,
-	.salmex-input-suffix {
+	.sx-input-prefix,
+	.sx-input-suffix {
 		display: flex;
 		align-items: center;
 		flex-shrink: 0;
-		padding: 0 var(--salmex-space-2);
-		font-family: var(--salmex-font-mono);
-		font-size: var(--salmex-font-size-sm);
-		font-weight: 600;
-		color: rgb(var(--salmex-text-secondary));
-		border-right: 1px solid rgb(var(--salmex-border-default));
+		padding: 0 var(--sx-space-3);
+		font-family: var(--sx-font-mono);
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text-secondary);
+		border-right: 1px solid var(--sx-color-border);
 	}
 
-	.salmex-input-suffix {
+	.sx-input-suffix {
 		border-right: none;
-		border-left: 1px solid rgb(var(--salmex-border-default));
+		border-left: 1px solid var(--sx-color-border);
 		margin-left: 0;
 	}
 
-	.salmex-input-icon-left {
+	.sx-input-icon-left {
 		display: flex;
 		align-items: center;
-		padding-left: var(--salmex-space-2);
-		color: rgb(var(--salmex-text-secondary));
+		padding-left: var(--sx-space-3);
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-input-field {
+	.sx-input-field {
 		flex: 1;
 		min-width: 0;
 		border: none;
 		background: transparent;
-		color: rgb(var(--salmex-text-primary));
-		font-family: var(--salmex-font-system);
-		font-size: var(--salmex-font-size-base);
+		color: var(--sx-color-text);
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-sm);
 		outline: none;
-		padding: var(--salmex-space-2) var(--salmex-space-3);
+		padding: var(--sx-space-2) var(--sx-space-3);
 	}
 
 	/* Only the wrapper shows the focus ring; avoid double ring from global :focus-visible on the input */
-	.salmex-input-field:focus-visible {
+	.sx-input-field:focus-visible {
 		box-shadow: none;
 	}
 
-	.salmex-input-field::placeholder {
-		color: rgb(var(--salmex-text-disabled));
+	.sx-input-field::placeholder {
+		color: var(--sx-color-text-disabled);
 	}
 
-	.salmex-input-field:disabled {
+	.sx-input-field:disabled {
 		cursor: not-allowed;
 	}
 
-	.salmex-input-has-prefix {
-		padding-left: var(--salmex-space-1);
+	.sx-input-has-prefix {
+		padding-left: var(--sx-space-1);
 	}
 
-	.salmex-input-has-suffix {
-		padding-right: var(--salmex-space-1);
+	.sx-input-has-suffix {
+		padding-right: var(--sx-space-1);
 	}
 
-	.salmex-input-has-icon-left {
-		padding-left: var(--salmex-space-1);
+	.sx-input-has-icon-left {
+		padding-left: var(--sx-space-1);
 	}
 
-	.salmex-input-has-right {
-		padding-right: var(--salmex-space-1);
+	.sx-input-has-right {
+		padding-right: var(--sx-space-1);
 	}
 
-	.salmex-input-sm .salmex-input-field-wrapper {
-		min-height: 28px;
+	.sx-input-sm .sx-input-field-wrapper {
+		min-height: 32px;
 	}
 
-	.salmex-input-sm .salmex-input-field {
-		font-size: var(--salmex-font-size-sm);
-		padding: var(--salmex-space-1) var(--salmex-space-2);
+	.sx-input-sm .sx-input-field {
+		font-size: var(--sx-text-xs);
+		padding: var(--sx-space-1) var(--sx-space-2);
 	}
 
-	.salmex-input-md .salmex-input-field-wrapper {
-		min-height: 36px;
+	.sx-input-md .sx-input-field-wrapper {
+		min-height: 40px;
 	}
 
-	.salmex-input-lg .salmex-input-field-wrapper {
-		min-height: 44px;
+	.sx-input-lg .sx-input-field-wrapper {
+		min-height: 48px;
 	}
 
-	.salmex-input-lg .salmex-input-field {
-		font-size: var(--salmex-font-size-md);
-		padding: var(--salmex-space-3) var(--salmex-space-4);
+	.sx-input-lg .sx-input-field {
+		font-size: var(--sx-text-base);
+		padding: var(--sx-space-3) var(--sx-space-4);
 	}
 
-	.salmex-input-right {
+	.sx-input-right {
 		display: flex;
 		align-items: center;
-		gap: var(--salmex-space-1);
+		gap: var(--sx-space-1);
 		flex-shrink: 0;
-		padding-right: var(--salmex-space-2);
+		padding-right: var(--sx-space-2);
 	}
 
-	.salmex-input-icon-right,
-	.salmex-input-icon-error,
-	.salmex-input-icon-success {
+	.sx-input-icon-right,
+	.sx-input-icon-error,
+	.sx-input-icon-success {
 		display: flex;
 		align-items: center;
-		color: rgb(var(--salmex-text-secondary));
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-input-icon-error {
-		color: rgb(var(--salmex-street-red));
+	.sx-input-icon-error {
+		color: var(--sx-color-red);
 	}
 
-	.salmex-input-icon-success {
-		color: rgb(var(--salmex-urban-green));
+	.sx-input-icon-success {
+		color: var(--sx-color-green);
 	}
 
-	.salmex-input-loading {
+	.sx-input-loading {
 		display: flex;
 		align-items: center;
-		color: rgb(var(--salmex-electric-blue));
+		color: var(--sx-color-primary);
 	}
 
-	.salmex-input-spinner {
-		animation: salmex-spin-input 0.8s linear infinite;
+	.sx-input-spinner {
+		animation: sx-spin-input 0.8s linear infinite;
 	}
 
-	@keyframes salmex-spin-input {
+	@keyframes sx-spin-input {
 		to {
 			transform: rotate(360deg);
 		}
 	}
 
-	.salmex-input-clear,
-	.salmex-input-password-toggle {
+	.sx-input-clear,
+	.sx-input-password-toggle {
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -510,66 +499,71 @@ function handleKeyDown(e: KeyboardEvent) {
 		height: 28px;
 		padding: 0;
 		border: none;
+		border-radius: var(--sx-radius-sm);
 		background: transparent;
-		color: rgb(var(--salmex-text-secondary));
+		color: var(--sx-color-text-secondary);
 		cursor: pointer;
-		transition: background var(--salmex-transition-fast), color var(--salmex-transition-fast);
+		transition: background var(--sx-transition-fast), color var(--sx-transition-fast);
 	}
 
-	.salmex-input-clear:hover,
-	.salmex-input-password-toggle:hover {
-		background: rgb(var(--salmex-bg-tertiary));
-		color: rgb(var(--salmex-text-primary));
+	.sx-input-clear:hover,
+	.sx-input-password-toggle:hover {
+		background: var(--sx-color-surface-2);
+		color: var(--sx-color-text);
 	}
 
-	.salmex-input-clear:focus-visible,
-	.salmex-input-password-toggle:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 2px 4px rgb(var(--salmex-crown-yellow));
-	}
-
-	:global([data-theme='dark']) .salmex-input-clear:focus-visible,
-	:global([data-theme='dark']) .salmex-input-password-toggle:focus-visible {
-		box-shadow: 0 0 2px 3px rgb(var(--salmex-crown-yellow));
+	.sx-input-clear:focus-visible,
+	.sx-input-password-toggle:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 2px;
 	}
 
-	.salmex-input-footer {
+	.sx-input-footer {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		min-height: 1.25rem;
 	}
 
-	.salmex-input-message {
-		font-size: var(--salmex-font-size-xs);
+	.sx-input-message {
+		font-size: var(--sx-text-xs);
 		margin: 0;
 	}
 
-	.salmex-input-message-error {
-		color: rgb(var(--salmex-street-red));
-		font-weight: 600;
+	.sx-input-message-error {
+		color: var(--sx-color-red);
+		font-weight: 500;
 	}
 
-	.salmex-input-message-success {
-		color: rgb(var(--salmex-urban-green));
+	.sx-input-message-success {
+		color: var(--sx-color-green);
 	}
 
-	.salmex-input-message-hint {
-		color: rgb(var(--salmex-text-secondary));
+	.sx-input-message-hint {
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-input-charcount {
-		font-size: var(--salmex-font-size-xs);
-		font-family: var(--salmex-font-mono);
-		color: rgb(var(--salmex-text-secondary));
+	.sx-input-charcount {
+		font-size: var(--sx-text-xs);
+		font-family: var(--sx-font-mono);
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-input-charcount-warn {
-		color: rgb(var(--salmex-spray-orange));
+	.sx-input-charcount-warn {
+		color: var(--sx-color-secondary);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.salmex-input-spinner {
+		.sx-input-spinner {
+			animation: none;
+		}
+
+		.sx-input-focused {
+			animation: none;
+			box-shadow: 0 0 0 3px var(--sx-color-primary-ring);
+		}
+
+		.sx-input-error {
 			animation: none;
 		}
 	}

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

@@ -41,7 +41,7 @@ interface Props extends Omit<HTMLInputAttributes, 'class' | 'size' | 'inputmode'
 /**
  * TextInput
  *
- * Win2K × Basquiat — Canvas-style text field with bold borders.
+ * INFRARED — Clean text field with subtle borders and vermilion accents.
  * Label, error, hint, prefix/suffix, clearable, password toggle. Full a11y.
  */
 declare const TextInput: import("svelte").Component<Props, {}, "value">;