@salmexio/ui 0.4.0 → 1.0.0

package/dist/forms/Toggle/Toggle.svelte

@@ -0,0 +1,239 @@
+<!--
+  @component Toggle
+
+  Neo-Brutalist Dark — Accessible toggle switch with on/off states,
+  label positioning, size variants, and keyboard support.
+  Uses role="switch" with aria-checked for screen readers.
+
+  @example
+  <Toggle label="Dark mode" bind:checked={darkMode} />
+  <Toggle label="Notifications" checked size="lg" />
+  <Toggle label="Auto-save" labelPosition="left" disabled />
+-->
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+
+type ToggleSize = 'sm' | 'md' | 'lg';
+type LabelPosition = 'left' | 'right';
+
+interface Props {
+	/** Accessible label text. */
+	label: string;
+	/** Current checked state. */
+	checked?: boolean;
+	/** Disabled state. */
+	disabled?: boolean;
+	/** Size variant. */
+	size?: ToggleSize;
+	/** Label placement relative to the switch. */
+	labelPosition?: LabelPosition;
+	/** Hide the visible label (still announced to SR). */
+	hideLabel?: boolean;
+	/** Description text shown below the label. */
+	description?: string;
+	/** Additional CSS class. */
+	class?: string;
+	/** Change handler. */
+	onchange?: (checked: boolean) => void;
+	testId?: string;
+}
+
+let {
+	label,
+	checked = $bindable(false),
+	disabled = false,
+	size = 'md',
+	labelPosition = 'right',
+	hideLabel = false,
+	description,
+	class: className = '',
+	onchange,
+	testId
+}: Props = $props();
+
+const id = `toggle-${Math.random().toString(36).slice(2, 9)}`;
+const descId = $derived(description ? `${id}-desc` : undefined);
+
+function toggle() {
+	if (disabled) return;
+	checked = !checked;
+	onchange?.(checked);
+}
+
+
+</script>
+
+<div
+	class={cn(
+		'sx-toggle-wrapper',
+		`sx-toggle-${size}`,
+		labelPosition === 'left' && 'sx-toggle-label-left',
+		disabled && 'sx-toggle-disabled',
+		className
+	)}
+	data-testid={testId}
+>
+	<button
+		type="button"
+		{id}
+		role="switch"
+		aria-checked={checked}
+		aria-label={hideLabel ? label : undefined}
+		aria-describedby={descId}
+		{disabled}
+		class={cn('sx-toggle-track', checked && 'sx-toggle-checked')}
+		onclick={toggle}
+	>
+		<span class="sx-toggle-thumb" aria-hidden="true"></span>
+	</button>
+
+	{#if !hideLabel}
+		<div class="sx-toggle-text">
+			<label for={id} class="sx-toggle-label">
+				{label}
+			</label>
+			{#if description}
+				<p id={descId} class="sx-toggle-description">{description}</p>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.sx-toggle-wrapper {
+		display: inline-flex;
+		align-items: flex-start;
+		gap: var(--sx-space-3);
+	}
+
+	.sx-toggle-label-left {
+		flex-direction: row-reverse;
+	}
+
+	.sx-toggle-disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	/* Track */
+	.sx-toggle-track {
+		position: relative;
+		flex-shrink: 0;
+		display: inline-flex;
+		align-items: center;
+		width: var(--sx-toggle-w, 44px);
+		height: var(--sx-toggle-h, 24px);
+		padding: 2px;
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-full);
+		background: var(--sx-color-surface-2);
+		cursor: pointer;
+		transition:
+			background var(--sx-transition-fast),
+			border-color var(--sx-transition-fast);
+	}
+
+	.sx-toggle-track:hover:not(:disabled) {
+		border-color: var(--sx-color-border-hover);
+	}
+
+	.sx-toggle-track:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px var(--sx-color-cyan-ring);
+	}
+
+	.sx-toggle-checked {
+		background: var(--sx-color-cyan);
+		border-color: var(--sx-color-cyan);
+	}
+
+	.sx-toggle-checked:hover:not(:disabled) {
+		border-color: var(--sx-color-cyan);
+		background: var(--sx-color-cyan-bright, var(--sx-color-cyan));
+	}
+
+	/* Thumb */
+	.sx-toggle-thumb {
+		display: block;
+		width: var(--sx-toggle-thumb, 18px);
+		height: var(--sx-toggle-thumb, 18px);
+		border-radius: var(--sx-radius-full);
+		background: var(--sx-color-text);
+		transition: transform var(--sx-transition-fast);
+		box-shadow: var(--sx-shadow-sm);
+	}
+
+	.sx-toggle-checked .sx-toggle-thumb {
+		transform: translateX(calc(var(--sx-toggle-w, 44px) - var(--sx-toggle-thumb, 18px) - 6px));
+	}
+
+	/* Size variants */
+	.sx-toggle-sm {
+		--sx-toggle-w: 36px;
+		--sx-toggle-h: 20px;
+		--sx-toggle-thumb: 14px;
+	}
+
+	.sx-toggle-md {
+		--sx-toggle-w: 44px;
+		--sx-toggle-h: 24px;
+		--sx-toggle-thumb: 18px;
+	}
+
+	.sx-toggle-lg {
+		--sx-toggle-w: 52px;
+		--sx-toggle-h: 28px;
+		--sx-toggle-thumb: 22px;
+	}
+
+	/* Text */
+	.sx-toggle-text {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-0-5);
+		min-width: 0;
+	}
+
+	.sx-toggle-label {
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text);
+		line-height: var(--sx-leading-normal);
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.sx-toggle-description {
+		margin: 0;
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
+		line-height: var(--sx-leading-relaxed);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-toggle-track,
+		.sx-toggle-thumb {
+			transition: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.sx-toggle-track {
+			border: 2px solid ButtonText;
+		}
+
+		.sx-toggle-checked {
+			background: Highlight;
+			border-color: Highlight;
+		}
+
+		.sx-toggle-thumb {
+			background: ButtonText;
+		}
+
+		.sx-toggle-checked .sx-toggle-thumb {
+			background: HighlightText;
+		}
+	}
+</style>

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

@@ -0,0 +1,39 @@
+type ToggleSize = 'sm' | 'md' | 'lg';
+type LabelPosition = 'left' | 'right';
+interface Props {
+    /** Accessible label text. */
+    label: string;
+    /** Current checked state. */
+    checked?: boolean;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Size variant. */
+    size?: ToggleSize;
+    /** Label placement relative to the switch. */
+    labelPosition?: LabelPosition;
+    /** Hide the visible label (still announced to SR). */
+    hideLabel?: boolean;
+    /** Description text shown below the label. */
+    description?: string;
+    /** Additional CSS class. */
+    class?: string;
+    /** Change handler. */
+    onchange?: (checked: boolean) => void;
+    testId?: string;
+}
+/**
+ * Toggle
+ *
+ * Neo-Brutalist Dark — Accessible toggle switch with on/off states,
+ * label positioning, size variants, and keyboard support.
+ * Uses role="switch" with aria-checked for screen readers.
+ *
+ * @example
+ * <Toggle label="Dark mode" bind:checked={darkMode} />
+ * <Toggle label="Notifications" checked size="lg" />
+ * <Toggle label="Auto-save" labelPosition="left" disabled />
+ */
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;
+//# sourceMappingURL=Toggle.svelte.d.ts.map

package/dist/forms/Toggle/Toggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtC,UAAU,KAAK;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA4DD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/forms/Toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Toggle } from './Toggle.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/Toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/forms/Toggle/index.js

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

package/dist/forms/index.d.ts

@@ -2,4 +2,7 @@ export { TextInput } from './TextInput/index.js';
 export { Checkbox } from './Checkbox/index.js';
 export { Select } from './Select/index.js';
 export type { SelectOption, SelectGroup } from './Select/index.js';
+export { Textarea } from './Textarea/index.js';
+export { Slider } from './Slider/index.js';
+export { Toggle } from './Toggle/index.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/forms/index.js

@@ -1,3 +1,6 @@
 export { TextInput } from './TextInput/index.js';
 export { Checkbox } from './Checkbox/index.js';
 export { Select } from './Select/index.js';
+export { Textarea } from './Textarea/index.js';
+export { Slider } from './Slider/index.js';
+export { Toggle } from './Toggle/index.js';

package/dist/index.d.ts

@@ -4,6 +4,5 @@ export * from './layout/index.js';
 export * from './feedback/index.js';
 export * from './forms/index.js';
 export * from './dialogs/index.js';
-export * from './windowing/index.js';
 export * from './utils/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/dist/index.js

@@ -4,5 +4,4 @@ export * from './layout/index.js';
 export * from './feedback/index.js';
 export * from './forms/index.js';
 export * from './dialogs/index.js';
-export * from './windowing/index.js';
 export * from './utils/index.js';

package/dist/layout/Card/Card.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Card
 
-  Win2K × Basquiat — Panel with canvas background, bold 3px borders, flat shadow.
+  Neo-Brutalist Dark — Glassmorphic panel with frosted background, subtle borders.
   Optional header/footer, semantic element support.
 
   @example
@@ -43,9 +43,9 @@ let {
 }: Props = $props();
 
 const paddingValues: Record<CardPadding, string> = {
-	sm: 'var(--salmex-space-4)',
-	md: 'var(--salmex-space-6)',
-	lg: 'var(--salmex-space-8)'
+	sm: 'var(--sx-space-4)',
+	md: 'var(--sx-space-6)',
+	lg: 'var(--sx-space-8)'
 };
 
 const currentPadding = $derived(paddingValues[padding]);
@@ -54,21 +54,21 @@ const currentPadding = $derived(paddingValues[padding]);
 {#snippet cardContent()}
 	{#if header}
 		<div
-			class="salmex-card-header"
-			style="margin: calc(-1 * {currentPadding}) calc(-1 * {currentPadding}) {currentPadding}; padding: var(--salmex-space-4) {currentPadding};"
+			class="sx-card-header"
+			style="margin: calc(-1 * {currentPadding}) calc(-1 * {currentPadding}) {currentPadding}; padding: var(--sx-space-4) {currentPadding};"
 		>
 			{@render header()}
 		</div>
 	{/if}
 	{#if children}
-		<div class="salmex-card-content">
+		<div class="sx-card-content">
 			{@render children()}
 		</div>
 	{/if}
 	{#if footer}
 		<div
-			class="salmex-card-footer"
-			style="margin: {currentPadding} calc(-1 * {currentPadding}) calc(-1 * {currentPadding}); padding: var(--salmex-space-4) {currentPadding};"
+			class="sx-card-footer"
+			style="margin: {currentPadding} calc(-1 * {currentPadding}) calc(-1 * {currentPadding}); padding: var(--sx-space-4) {currentPadding};"
 		>
 			{@render footer()}
 		</div>
@@ -80,63 +80,88 @@ const currentPadding = $derived(paddingValues[padding]);
 	this={as}
 	{id}
 	class={cn(
-		'salmex-card',
-		`salmex-card-padding-${padding}`,
+		'sx-card',
+		`sx-card-padding-${padding}`,
+		onclick && 'sx-card-clickable',
 		className
 	)}
+	role={onclick ? 'button' : undefined}
+	tabindex={onclick ? 0 : undefined}
 	aria-labelledby={ariaLabelledby}
 	data-testid={testId}
 	{onclick}
-	{onkeydown}
+	onkeydown={(e: KeyboardEvent) => {
+		if (onclick && (e.key === 'Enter' || e.key === ' ')) {
+			e.preventDefault();
+			onclick(e as unknown as MouseEvent);
+		}
+		onkeydown?.(e);
+	}}
 >
 	{@render cardContent()}
 </svelte:element>
 
 <style>
-	.salmex-card {
+	.sx-card {
 		position: relative;
 		overflow: hidden;
-		border-radius: var(--salmex-radius-sm);
-		background: rgb(var(--salmex-window-surface));
-		/* Bold 2px border, flat shadow — Win2K × Basquiat */
-		border: 2px solid rgb(var(--salmex-border-dark));
-		box-shadow: var(--salmex-shadow-lg);
+		border-radius: var(--sx-radius-lg);
+		background: var(--sx-glass-bg);
+		border: var(--sx-glass-border);
+		backdrop-filter: var(--sx-glass-blur);
+		-webkit-backdrop-filter: var(--sx-glass-blur);
+		transition: var(--sx-transition-base);
+		transition-property: transform, border-color, box-shadow;
 	}
 
-	.salmex-card-padding-sm {
-		padding: var(--salmex-space-4);
+	.sx-card-clickable {
+		cursor: pointer;
 	}
 
-	.salmex-card-padding-md {
-		padding: var(--salmex-space-6);
+	.sx-card-clickable:hover {
+		transform: translateY(-2px);
+		border-color: var(--sx-color-cyan-active);
+		box-shadow: var(--sx-shadow-md);
 	}
 
-	.salmex-card-padding-lg {
-		padding: var(--salmex-space-8);
+	.sx-card-clickable:focus-visible {
+		outline: 2px solid var(--sx-color-cyan);
+		outline-offset: 2px;
 	}
 
-	.salmex-card-header {
-		border-bottom: 1px solid rgb(var(--salmex-border-default));
-		font-weight: 700;
-		letter-spacing: 0.3px;
+	@media (prefers-reduced-motion: reduce) {
+		.sx-card {
+			transition: none;
+		}
+
+		.sx-card-clickable:hover {
+			transform: none;
+		}
 	}
 
-	.salmex-card-footer {
-		border-top: 1px solid rgb(var(--salmex-border-default));
+	.sx-card-padding-sm {
+		padding: var(--sx-space-4);
 	}
 
-	.salmex-card-content {
-		display: block;
+	.sx-card-padding-md {
+		padding: var(--sx-space-6);
 	}
 
-	/* Dark mode — heavier shadow (flat shadow on near-black bg is invisible) */
-	:global([data-theme='dark']) .salmex-card {
-		box-shadow: 4px 4px 2px rgb(0 0 0 / 0.6);
+	.sx-card-padding-lg {
+		padding: var(--sx-space-8);
 	}
 
-	@media (prefers-color-scheme: dark) {
-		:global(:root:not([data-theme='light'])) .salmex-card {
-			box-shadow: 4px 4px 2px rgb(0 0 0 / 0.6);
-		}
+	.sx-card-header {
+		border-bottom: 1px solid var(--sx-color-border);
+		font-weight: 700;
+		letter-spacing: 0.3px;
+	}
+
+	.sx-card-footer {
+		border-top: 1px solid var(--sx-color-border);
+	}
+
+	.sx-card-content {
+		display: block;
 	}
 </style>

package/dist/layout/Card/Card.svelte.d.ts

@@ -16,7 +16,7 @@ interface Props {
 /**
  * Card
  *
- * Win2K × Basquiat — Panel with canvas background, bold 3px borders, flat shadow.
+ * Neo-Brutalist Dark — Glassmorphic panel with frosted background, subtle borders.
  * Optional header/footer, semantic element support.
  *
  * @example

package/dist/layout/Card/Card.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA8DD;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}