@salmexio/ui 0.1.0 → 0.1.1

package/dist/dialogs/Modal/Modal.svelte

@@ -0,0 +1,427 @@
+<!--
+  @component Modal
+
+  Win2K × Basquiat — Dialog with canvas surface, bold 3px border, title bar header.
+  Follows WAI-ARIA Dialog (Modal) pattern: focus trap, restore focus on close,
+  aria-labelledby, aria-describedby, aria-modal. Escape and backdrop close.
+  For full inert support (background not focusable), render modal in a portal
+  and set inert on main content when modalOpenCount > 0 (see modalStore).
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { createFocusTrap, Keys, generateId } from '../../utils/keyboard.js';
+	import { modalOpenCount } from '../modalStore.js';
+
+	type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+	type ModalPosition = 'center' | 'top';
+	type ScrollBehavior = 'inside' | 'outside';
+	/** APG: 'first' = first focusable in body; 'title' = dialog title (for long content so AT reads title first). */
+	type InitialFocusStrategy = 'first' | 'title';
+
+	interface Props {
+		open?: boolean;
+		id?: string;
+		title?: string;
+		size?: ModalSize;
+		position?: ModalPosition;
+		scrollBehavior?: ScrollBehavior;
+		showCloseButton?: boolean;
+		closeOnBackdrop?: boolean;
+		closeOnEscape?: boolean;
+		preventClose?: boolean;
+		/** Element to focus when opening (overrides initialFocusStrategy). */
+		initialFocus?: HTMLElement | null;
+		/** APG: 'first' = first focusable; 'title' = focus title (tabindex="-1") so screen readers announce it first. */
+		initialFocusStrategy?: InitialFocusStrategy;
+		enableFocusTrap?: boolean;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+		class?: string;
+		onclose?: () => void;
+		closeBtnAriaLabel?: string;
+		testId?: string;
+	}
+
+	let {
+		open = false,
+		id,
+		title = 'Dialog',
+		size = 'md',
+		position = 'center',
+		scrollBehavior = 'inside',
+		showCloseButton = true,
+		closeOnBackdrop = true,
+		closeOnEscape = true,
+		preventClose = false,
+		initialFocus,
+		initialFocusStrategy = 'first',
+		enableFocusTrap = true,
+		header,
+		footer,
+		children,
+		class: className = '',
+		onclose,
+		closeBtnAriaLabel,
+		testId,
+	}: Props = $props();
+
+	const modalId = $derived(id ?? generateId('modal'));
+	const titleId = $derived(`${modalId}-title`);
+	const descriptionId = $derived(`${modalId}-description`);
+
+	let dialogElement = $state<HTMLDivElement | null>(null);
+	let focusTrap: ReturnType<typeof createFocusTrap> | null = null;
+	let previouslyFocusedElement: HTMLElement | null = null;
+	let hasActivated = $state(false);
+
+	function getScrollbarWidth(): number {
+		return window.innerWidth - document.documentElement.clientWidth;
+	}
+
+	const FOCUSABLE =
+		'button:not([disabled]):not([tabindex="-1"]), [href]:not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
+
+	function setInitialFocus() {
+		if (initialFocus) {
+			initialFocus.focus();
+			return;
+		}
+		if (!dialogElement) return;
+		const titleEl = dialogElement.querySelector<HTMLElement>('.salmex-modal-title-wrap');
+		const body = dialogElement.querySelector('.salmex-modal-body');
+		const first = body?.querySelector<HTMLElement>(FOCUSABLE);
+		const closeBtn = dialogElement.querySelector<HTMLElement>('.salmex-modal-close');
+
+		if (initialFocusStrategy === 'title' && titleEl) {
+			titleEl.focus();
+			return;
+		}
+		if (first) {
+			first.focus();
+		} else if (closeBtn) {
+			closeBtn.focus();
+		} else if (titleEl) {
+			titleEl.focus();
+		}
+	}
+
+	$effect(() => {
+		if (open) {
+			if (!hasActivated && dialogElement) {
+				previouslyFocusedElement = document.activeElement as HTMLElement | null;
+				modalOpenCount.update((n) => n + 1);
+				if (enableFocusTrap) {
+					focusTrap = createFocusTrap(dialogElement);
+					focusTrap.activate();
+				}
+				const scrollbarWidth = getScrollbarWidth();
+				document.body.style.overflow = 'hidden';
+				if (scrollbarWidth > 0) {
+					document.body.style.paddingRight = `${scrollbarWidth}px`;
+				}
+				hasActivated = true;
+				setTimeout(setInitialFocus, 0);
+			}
+		} else {
+			if (hasActivated) {
+				modalOpenCount.update((n) => Math.max(0, n - 1));
+				focusTrap?.deactivate();
+				focusTrap = null;
+				hasActivated = false;
+				document.body.style.overflow = '';
+				document.body.style.paddingRight = '';
+				if (previouslyFocusedElement?.focus) {
+					const el = previouslyFocusedElement;
+					setTimeout(() => el.focus(), 0);
+				}
+				previouslyFocusedElement = null;
+			}
+		}
+	});
+
+	function handleClose() {
+		if (!preventClose) onclose?.();
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (closeOnBackdrop && e.target === e.currentTarget) handleClose();
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (closeOnEscape && e.key === Keys.Escape) {
+			e.preventDefault();
+			handleClose();
+		}
+	}
+
+	const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
+</script>
+
+<svelte:window onkeydown={open ? handleKeyDown : undefined} />
+
+{#if open}
+	<!-- Backdrop -->
+	<div
+		class="salmex-modal-backdrop salmex-modal-position-{position}"
+		role="presentation"
+		onclick={handleBackdropClick}
+		onkeydown={() => {}}
+	>
+		<div
+			bind:this={dialogElement}
+			id={modalId}
+			class="salmex-modal-container salmex-modal-{size} salmex-modal-scroll-{scrollBehavior} {className}"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby={titleId}
+			aria-describedby={children ? descriptionId : undefined}
+			data-testid={testId}
+		>
+			{#if header || title || showCloseButton}
+				<div class="salmex-modal-header">
+					<div id={titleId} class="salmex-modal-title-wrap" tabindex="-1">
+						{#if header}
+							{@render header()}
+						{:else if title}
+							<h2 class="salmex-modal-title">{title}</h2>
+						{/if}
+					</div>
+					{#if showCloseButton && !preventClose}
+						<button
+							type="button"
+							class="salmex-modal-close"
+							onclick={handleClose}
+							aria-label={closeLabel}
+						>
+							<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+								<line x1="18" y1="6" x2="6" y2="18" />
+								<line x1="6" y1="6" x2="18" y2="18" />
+							</svg>
+						</button>
+					{/if}
+				</div>
+			{/if}
+			{#if children}
+				<div id={descriptionId} class="salmex-modal-body">
+					{@render children()}
+				</div>
+			{/if}
+			{#if footer}
+				<div class="salmex-modal-footer">
+					{@render footer()}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.salmex-modal-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: var(--salmex-z-modal-backdrop, 1040);
+		display: flex;
+		justify-content: center;
+		padding: var(--salmex-space-6);
+		background: rgb(0 0 0 / 0.6);
+		overflow-y: auto;
+		animation: salmex-modal-fade-in var(--salmex-transition-base);
+	}
+
+	.salmex-modal-position-center {
+		align-items: center;
+	}
+
+	.salmex-modal-position-top {
+		align-items: flex-start;
+		padding-top: 3rem;
+	}
+
+	@keyframes salmex-modal-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	.salmex-modal-container {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-height: calc(100vh - 2rem);
+		background: rgb(var(--salmex-window-surface));
+		border: 3px solid rgb(var(--salmex-button-dark-edge));
+		box-shadow: var(--salmex-shadow-lg);
+		animation: salmex-modal-scale-in var(--salmex-transition-slow) ease-out;
+		overflow: hidden;
+	}
+
+	@keyframes salmex-modal-scale-in {
+		from {
+			opacity: 0;
+			transform: scale(0.97) translateY(8px);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1) translateY(0);
+		}
+	}
+
+	.salmex-modal-sm {
+		max-width: 24rem;
+	}
+	.salmex-modal-md {
+		max-width: 28rem;
+	}
+	.salmex-modal-lg {
+		max-width: 32rem;
+	}
+	.salmex-modal-xl {
+		max-width: 40rem;
+	}
+	.salmex-modal-full {
+		max-width: 56rem;
+	}
+
+	.salmex-modal-scroll-inside {
+		max-height: calc(100vh - 4rem);
+	}
+
+	.salmex-modal-scroll-inside .salmex-modal-body {
+		overflow-y: auto;
+	}
+
+	/* Title bar — Win2K gradient */
+	.salmex-modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--salmex-space-4);
+		padding: var(--salmex-space-4);
+		background: linear-gradient(
+			90deg,
+			rgb(var(--salmex-electric-blue)),
+			rgb(var(--salmex-titlebar-bold))
+		);
+		color: rgb(var(--salmex-chalk-white));
+		border-bottom: 3px solid rgb(var(--salmex-button-dark-edge));
+		flex-shrink: 0;
+		font-family: var(--salmex-font-display);
+	}
+
+	:global([data-theme='dark']) .salmex-modal-header {
+		background: linear-gradient(
+			90deg,
+			rgb(0 100 220),
+			rgb(0 140 255)
+		);
+	}
+
+	.salmex-modal-title-wrap {
+		flex: 1;
+		min-width: 0;
+		outline: none;
+	}
+
+	.salmex-modal-title-wrap:focus-visible {
+		outline: 2px solid rgb(var(--salmex-crown-yellow));
+		outline-offset: 2px;
+	}
+
+	.salmex-modal-title {
+		margin: 0;
+		font-size: var(--salmex-font-size-md);
+		font-weight: 900;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		line-height: 1.3;
+	}
+
+	.salmex-modal-close {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		padding: 0;
+		background: rgb(var(--salmex-button-face));
+		border: 2px solid rgb(var(--salmex-button-dark-edge));
+		color: rgb(var(--salmex-text-primary));
+		cursor: pointer;
+		flex-shrink: 0;
+		box-shadow:
+			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
+			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
+			2px 2px 0 rgb(0 0 0 / 0.3);
+		transition: all var(--salmex-transition-fast);
+	}
+
+	.salmex-modal-close:hover {
+		background: rgb(var(--salmex-button-light));
+	}
+
+	.salmex-modal-close:active {
+		box-shadow:
+			inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
+			inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
+			1px 1px 0 rgb(0 0 0 / 0.3);
+		transform: translate(1px, 1px);
+	}
+
+	.salmex-modal-close:focus-visible {
+		outline: none;
+		box-shadow:
+			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
+			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
+			2px 2px 0 rgb(0 0 0 / 0.3),
+			0 0 0 2px rgb(var(--salmex-midnight-black)),
+			0 0 0 5px rgb(var(--salmex-crown-yellow));
+	}
+
+	.salmex-modal-body {
+		padding: var(--salmex-space-6);
+		flex: 1;
+		min-height: 0;
+		font-family: var(--salmex-font-system);
+		color: rgb(var(--salmex-text-primary));
+	}
+
+	.salmex-modal-footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: var(--salmex-space-3);
+		padding: var(--salmex-space-4);
+		border-top: 3px solid rgb(var(--salmex-button-dark-edge));
+		background: rgb(var(--salmex-bg-secondary));
+		flex-shrink: 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.salmex-modal-backdrop,
+		.salmex-modal-container {
+			animation: none;
+		}
+	}
+
+	@media (max-width: 640px) {
+		.salmex-modal-backdrop {
+			padding: 0;
+			align-items: flex-end;
+		}
+
+		.salmex-modal-position-top {
+			padding-top: 0;
+		}
+
+		.salmex-modal-container {
+			max-width: 100%;
+			max-height: 90vh;
+			margin: 0;
+		}
+	}
+</style>

package/dist/dialogs/Modal/Modal.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type ModalPosition = 'center' | 'top';
+type ScrollBehavior = 'inside' | 'outside';
+/** APG: 'first' = first focusable in body; 'title' = dialog title (for long content so AT reads title first). */
+type InitialFocusStrategy = 'first' | 'title';
+interface Props {
+    open?: boolean;
+    id?: string;
+    title?: string;
+    size?: ModalSize;
+    position?: ModalPosition;
+    scrollBehavior?: ScrollBehavior;
+    showCloseButton?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    preventClose?: boolean;
+    /** Element to focus when opening (overrides initialFocusStrategy). */
+    initialFocus?: HTMLElement | null;
+    /** APG: 'first' = first focusable; 'title' = focus title (tabindex="-1") so screen readers announce it first. */
+    initialFocusStrategy?: InitialFocusStrategy;
+    enableFocusTrap?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+    onclose?: () => void;
+    closeBtnAriaLabel?: string;
+    testId?: string;
+}
+/**
+ * Modal
+ *
+ * Win2K × Basquiat — Dialog with canvas surface, bold 3px border, title bar header.
+ * Follows WAI-ARIA Dialog (Modal) pattern: focus trap, restore focus on close,
+ * aria-labelledby, aria-describedby, aria-modal. Escape and backdrop close.
+ * For full inert support (background not focusable), render modal in a portal
+ * and set inert on main content when modalOpenCount > 0 (see modalStore).
+ */
+declare const Modal: import("svelte").Component<Props, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;
+//# sourceMappingURL=Modal.svelte.d.ts.map

package/dist/dialogs/Modal/Modal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/dialogs/Modal/Modal.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKrC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AACpD,KAAK,aAAa,GAAG,QAAQ,GAAG,KAAK,CAAC;AACtC,KAAK,cAAc,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC3C,iHAAiH;AACjH,KAAK,oBAAoB,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9C,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sEAAsE;IACtE,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,iHAAiH;IACjH,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA0KF;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/dialogs/Modal/index.d.ts

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

package/dist/dialogs/Modal/index.d.ts.map

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

package/dist/dialogs/Modal/index.js

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

package/dist/dialogs/index.d.ts

@@ -0,0 +1,3 @@
+export { Modal } from './Modal/index.js';
+export { modalOpenCount } from './modalStore.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dialogs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/dialogs/index.js

@@ -0,0 +1,2 @@
+export { Modal } from './Modal/index.js';
+export { modalOpenCount } from './modalStore.js';

package/dist/dialogs/modalStore.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Count of currently open Modal instances.
+ * Use this to set the `inert` attribute on main content when any modal is open,
+ * so keyboard and screen reader users cannot interact with background content (APG).
+ *
+ * Example (when using a portal so the modal renders outside the inert wrapper):
+ *   <div inert={$modalOpenCount > 0}>
+ *     <Sidebar />
+ *     <main>...</main>
+ *   </div>
+ */
+export declare const modalOpenCount: import("svelte/store").Writable<number>;
+//# sourceMappingURL=modalStore.d.ts.map

package/dist/dialogs/modalStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalStore.d.ts","sourceRoot":"","sources":["../../src/dialogs/modalStore.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,eAAO,MAAM,cAAc,yCAAc,CAAC"}

package/dist/dialogs/modalStore.js

@@ -0,0 +1,13 @@
+/**
+ * Count of currently open Modal instances.
+ * Use this to set the `inert` attribute on main content when any modal is open,
+ * so keyboard and screen reader users cannot interact with background content (APG).
+ *
+ * Example (when using a portal so the modal renders outside the inert wrapper):
+ *   <div inert={$modalOpenCount > 0}>
+ *     <Sidebar />
+ *     <main>...</main>
+ *   </div>
+ */
+import { writable } from 'svelte/store';
+export const modalOpenCount = writable(0);

package/dist/forms/Checkbox/Checkbox.svelte

@@ -0,0 +1,328 @@
+<!--
+  @component Checkbox
+
+  Win2K × Basquiat — 3D checkbox with bold borders, crown yellow check.
+  Uses native <input type="checkbox"> per WAI-ARIA APG (best practice: native over custom role="checkbox").
+  Label, description, error, indeterminate. Full a11y; focus and semantics follow the native input.
+-->
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { generateId } from '../../utils/keyboard.js';
+
+	type CheckboxSize = 'sm' | 'md' | 'lg';
+
+	interface Props {
+		id?: string;
+		name?: string;
+		value?: string;
+		label: string;
+		checked?: boolean;
+		description?: string;
+		required?: boolean;
+		disabled?: boolean;
+		error?: string;
+		indeterminate?: boolean;
+		size?: CheckboxSize;
+		hideLabel?: boolean;
+		class?: string;
+		onchange?: (event: Event) => void;
+		testId?: string;
+		validateOnMount?: boolean;
+	}
+
+	let {
+		id = generateId('checkbox'),
+		name,
+		value,
+		label,
+		checked = $bindable(false),
+		description = '',
+		required = false,
+		disabled = false,
+		error = '',
+		indeterminate = false,
+		size = 'md',
+		hideLabel = false,
+		class: className = '',
+		onchange,
+		testId,
+		validateOnMount = false,
+	}: Props = $props();
+
+	let inputElement = $state<HTMLInputElement | undefined>(undefined);
+	let hasInteracted = $state(false);
+
+	$effect(() => {
+		const el = inputElement;
+		if (el) el.indeterminate = indeterminate;
+	});
+
+	const showChecked = $derived(checked && !indeterminate);
+	const shouldValidate = $derived(hasInteracted || validateOnMount);
+	const showError = $derived(shouldValidate && !!error);
+	const errorId = $derived(`${id}-error`);
+	const descriptionId = $derived(`${id}-description`);
+	const ariaDescribedBy = $derived(
+		[showError && errorId, description && descriptionId].filter(Boolean).join(' ') || undefined
+	);
+
+	function handleChange(e: Event) {
+		hasInteracted = true;
+		onchange?.(e);
+	}
+</script>
+
+<div
+	class={cn(
+		'salmex-checkbox',
+		`salmex-checkbox-${size}`,
+		disabled && 'salmex-checkbox-disabled',
+		className
+	)}
+>
+	<label for={id} class="salmex-checkbox-label">
+		<input
+			bind:this={inputElement}
+			{id}
+			{name}
+			{value}
+			type="checkbox"
+			bind:checked
+			{disabled}
+			{required}
+			aria-invalid={showError}
+			aria-describedby={ariaDescribedBy}
+			class="salmex-checkbox-input"
+			data-testid={testId}
+			onchange={handleChange}
+		/>
+		<span
+			class={cn(
+				'salmex-checkbox-box',
+				(checked || indeterminate) && 'salmex-checkbox-box-checked',
+				indeterminate && 'salmex-checkbox-box-indeterminate',
+				showError && 'salmex-checkbox-box-error'
+			)}
+			aria-hidden="true"
+		>
+			{#if showChecked}
+				<svg class="salmex-checkbox-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<polyline points="20 6 9 17 4 12" />
+				</svg>
+			{:else if indeterminate}
+				<svg class="salmex-checkbox-icon salmex-checkbox-icon-minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true">
+					<line x1="5" y1="12" x2="19" y2="12" />
+				</svg>
+			{/if}
+		</span>
+		<span class="salmex-checkbox-content" class:salmex-sr-only={hideLabel}>
+			<span class="salmex-checkbox-text">
+				{label}
+				{#if required}
+					<span class="salmex-checkbox-required" aria-hidden="true">*</span>
+				{/if}
+			</span>
+			{#if description && !hideLabel}
+				<span id={descriptionId} class="salmex-checkbox-description">{description}</span>
+			{/if}
+		</span>
+	</label>
+	{#if showError}
+		<p id={errorId} class="salmex-checkbox-error" role="alert">{error}</p>
+	{/if}
+</div>
+
+<style>
+	.salmex-checkbox {
+		display: flex;
+		flex-direction: column;
+		gap: var(--salmex-space-1);
+	}
+
+	.salmex-checkbox-disabled {
+		opacity: 0.6;
+	}
+
+	.salmex-checkbox-label {
+		display: flex;
+		align-items: center;
+		gap: var(--salmex-space-2);
+		cursor: pointer;
+		user-select: none;
+		font-family: var(--salmex-font-system);
+	}
+
+	.salmex-checkbox-label:has(.salmex-checkbox-description) {
+		align-items: flex-start;
+	}
+
+	.salmex-checkbox-label:has(.salmex-checkbox-description) .salmex-checkbox-box {
+		margin-top: 2px;
+	}
+
+	.salmex-checkbox-disabled .salmex-checkbox-label {
+		cursor: not-allowed;
+	}
+
+	/* Visually hidden, not display:none — keeps focus and semantics */
+	.salmex-checkbox-input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	/* Win2K × Basquiat — 3D box */
+	.salmex-checkbox-box {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgb(var(--salmex-button-face));
+		border: 2px solid rgb(var(--salmex-button-dark-edge));
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow));
+		transition: background var(--salmex-transition-fast), border-color var(--salmex-transition-fast),
+			box-shadow var(--salmex-transition-fast);
+		color: rgb(var(--salmex-chalk-white));
+	}
+
+	.salmex-checkbox-sm .salmex-checkbox-box {
+		width: 16px;
+		height: 16px;
+	}
+
+	.salmex-checkbox-md .salmex-checkbox-box {
+		width: 20px;
+		height: 20px;
+	}
+
+	.salmex-checkbox-lg .salmex-checkbox-box {
+		width: 24px;
+		height: 24px;
+	}
+
+	.salmex-checkbox-icon {
+		width: 100%;
+		height: 100%;
+		padding: 2px;
+	}
+
+	.salmex-checkbox-icon-minus {
+		padding: 3px 4px;
+	}
+
+	/* Checked — electric blue fill, crown accent */
+	.salmex-checkbox-box-checked {
+		background: rgb(var(--salmex-electric-blue));
+		border-color: rgb(var(--salmex-button-dark-edge));
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
+			0 0 0 2px rgb(var(--salmex-border-dark));
+	}
+
+	:global([data-theme='dark']) .salmex-checkbox-box-checked {
+		background: rgb(var(--salmex-electric-blue));
+		border-color: rgb(var(--salmex-button-dark-edge));
+	}
+
+	/* Indeterminate — same as checked, minus icon */
+	.salmex-checkbox-box-indeterminate {
+		background: rgb(var(--salmex-electric-blue));
+		border-color: rgb(var(--salmex-button-dark-edge));
+	}
+
+	.salmex-checkbox-label:hover .salmex-checkbox-box:not(.salmex-checkbox-box-checked):not(.salmex-checkbox-box-indeterminate) {
+		border-color: rgb(var(--salmex-electric-blue));
+	}
+
+	/* Focus — crown yellow ring (design system) */
+	.salmex-checkbox-input:focus-visible + .salmex-checkbox-box {
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
+			0 0 0 2px rgb(var(--salmex-midnight-black)),
+			0 0 0 5px rgb(var(--salmex-crown-yellow));
+	}
+
+	:global([data-theme='dark']) .salmex-checkbox-input:focus-visible + .salmex-checkbox-box {
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
+			inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
+			0 0 0 3px rgb(var(--salmex-crown-yellow));
+	}
+
+	/* High contrast / forced colors: solid outline so focus is visible (APG) */
+	@media (forced-colors: active) {
+		.salmex-checkbox-input:focus-visible + .salmex-checkbox-box {
+			outline: 2px solid CanvasText;
+			outline-offset: 2px;
+		}
+	}
+
+	.salmex-checkbox-box-error {
+		border-color: rgb(var(--salmex-street-red));
+	}
+
+	:global([data-theme='dark']) .salmex-checkbox-box-error {
+		border-color: rgb(var(--salmex-street-red));
+	}
+
+	.salmex-checkbox-content {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.salmex-checkbox-text {
+		font-size: var(--salmex-font-size-sm);
+		font-weight: 600;
+		color: rgb(var(--salmex-text-primary));
+	}
+
+	.salmex-checkbox-required {
+		color: rgb(var(--salmex-street-red));
+		margin-left: 2px;
+	}
+
+	.salmex-checkbox-description {
+		font-size: var(--salmex-font-size-xs);
+		color: rgb(var(--salmex-text-secondary));
+	}
+
+	.salmex-checkbox-error {
+		font-size: var(--salmex-font-size-xs);
+		font-weight: 600;
+		color: rgb(var(--salmex-street-red));
+		margin: 0 0 0 calc(20px + var(--salmex-space-2));
+	}
+
+	.salmex-checkbox-lg .salmex-checkbox-error {
+		margin-left: calc(24px + var(--salmex-space-2));
+	}
+
+	.salmex-sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.salmex-checkbox-box {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,30 @@
+type CheckboxSize = 'sm' | 'md' | 'lg';
+interface Props {
+    id?: string;
+    name?: string;
+    value?: string;
+    label: string;
+    checked?: boolean;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    indeterminate?: boolean;
+    size?: CheckboxSize;
+    hideLabel?: boolean;
+    class?: string;
+    onchange?: (event: Event) => void;
+    testId?: string;
+    validateOnMount?: boolean;
+}
+/**
+ * Checkbox
+ *
+ * Win2K × Basquiat — 3D checkbox with bold borders, crown yellow check.
+ * Uses native <input type="checkbox"> per WAI-ARIA APG (best practice: native over custom role="checkbox").
+ * Label, description, error, indeterminate. Full a11y; focus and semantics follow the native input.
+ */
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,UAAU,KAAK;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AA+FF;;;;;;GAMG;AACH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

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

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

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

package/dist/forms/Checkbox/index.js

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

package/dist/forms/index.d.ts

@@ -1,2 +1,3 @@
 export { TextInput } from './TextInput/index.js';
+export { Checkbox } from './Checkbox/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"}
+{"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"}

package/dist/forms/index.js

@@ -1 +1,2 @@
 export { TextInput } from './TextInput/index.js';
+export { Checkbox } from './Checkbox/index.js';

package/dist/index.d.ts

@@ -3,5 +3,6 @@ export * from './navigation/index.js';
 export * from './layout/index.js';
 export * from './feedback/index.js';
 export * from './forms/index.js';
+export * from './dialogs/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,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

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

package/dist/styles/tokens.css

@@ -3,12 +3,9 @@
  * Win2K reimagined by Jean-Michel Basquiat
  * Raw. Expressive. Powerful. Unfinished.
  *
- * Typography: restrained Windows-2000-ish workhorse + Basquiat-like accents (Google Fonts).
- * Functional default: Work Sans (UI), Roboto Mono (code), Space Grotesk (display), Caveat Brush (accent).
- * ARIA-critical text uses system/mono; brush fonts for decorative/duplicate only.
+ * Typography: Work Sans (UI), Roboto Mono (code), Space Grotesk (display), Caveat Brush (accent).
+ * Load fonts first in your app (e.g. in root layout CSS): @import url('https://fonts.googleapis.com/...') before other imports.
  */
-@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&family=Roboto+Mono:wght@400;600;700&family=Space+Grotesk:wght@600;700&family=Caveat+Brush&display=swap');
-
 :root {
 	/* ========================================
 	   BASQUIAT × WIN2K COLORS

package/dist/utils/index.d.ts

@@ -1,2 +1,4 @@
 export { cn } from './cn.js';
+export { createFocusTrap, generateId, Keys } from './keyboard.js';
+export type { FocusTrap, Key } from './keyboard.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC"}

package/dist/utils/index.js

@@ -1 +1,2 @@
 export { cn } from './cn.js';
+export { createFocusTrap, generateId, Keys } from './keyboard.js';

package/dist/utils/keyboard.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Keyboard and focus utilities for accessible components.
+ * WCAG 2.1 / WAI-ARIA aligned; used by Modal and other dialogs.
+ */
+export declare const Keys: {
+    readonly Enter: "Enter";
+    readonly Space: " ";
+    readonly Escape: "Escape";
+    readonly Tab: "Tab";
+    readonly ArrowUp: "ArrowUp";
+    readonly ArrowDown: "ArrowDown";
+    readonly ArrowLeft: "ArrowLeft";
+    readonly ArrowRight: "ArrowRight";
+    readonly Home: "Home";
+    readonly End: "End";
+};
+export type Key = (typeof Keys)[keyof typeof Keys];
+export interface FocusTrap {
+    activate: () => void;
+    deactivate: () => void;
+}
+/**
+ * Trap focus within a container (e.g. modal). Tab cycles inside; restores focus on deactivate.
+ */
+export declare function createFocusTrap(container: HTMLElement): FocusTrap;
+/** Unique ID for aria attributes (per-instance safe). */
+export declare function generateId(prefix?: string): string;
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/utils/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/utils/keyboard.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;CAWP,CAAC;AAEX,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AAEnD,MAAM,WAAW,SAAS;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,WAAW,GAAG,SAAS,CA4CjE;AAED,yDAAyD;AACzD,wBAAgB,UAAU,CAAC,MAAM,SAAW,GAAG,MAAM,CAEpD"}

package/dist/utils/keyboard.js

@@ -0,0 +1,67 @@
+/**
+ * Keyboard and focus utilities for accessible components.
+ * WCAG 2.1 / WAI-ARIA aligned; used by Modal and other dialogs.
+ */
+export const Keys = {
+    Enter: 'Enter',
+    Space: ' ',
+    Escape: 'Escape',
+    Tab: 'Tab',
+    ArrowUp: 'ArrowUp',
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    ArrowRight: 'ArrowRight',
+    Home: 'Home',
+    End: 'End',
+};
+/**
+ * Trap focus within a container (e.g. modal). Tab cycles inside; restores focus on deactivate.
+ */
+export function createFocusTrap(container) {
+    let previouslyFocused = null;
+    const focusableSelector = [
+        'button:not([disabled]):not([tabindex="-1"])',
+        '[href]:not([tabindex="-1"])',
+        'input:not([disabled]):not([tabindex="-1"])',
+        'select:not([disabled]):not([tabindex="-1"])',
+        'textarea:not([disabled]):not([tabindex="-1"])',
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(', ');
+    function getFocusable() {
+        return Array.from(container.querySelectorAll(focusableSelector));
+    }
+    function onKeyDown(e) {
+        if (e.key !== Keys.Tab)
+            return;
+        const focusable = getFocusable();
+        if (focusable.length === 0)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+    return {
+        activate() {
+            previouslyFocused = document.activeElement;
+            container.addEventListener('keydown', onKeyDown, { capture: true });
+        },
+        deactivate() {
+            container.removeEventListener('keydown', onKeyDown, { capture: true });
+            if (previouslyFocused?.focus) {
+                previouslyFocused.focus();
+            }
+            previouslyFocused = null;
+        },
+    };
+}
+/** Unique ID for aria attributes (per-instance safe). */
+export function generateId(prefix = 'salmex') {
+    return `${prefix}-${Math.random().toString(36).slice(2, 11)}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@salmexio/ui",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "Salmex I/O Design System — Win2K-inspired UI component library for Salmex and Salmex I/O products",
 	"type": "module",
 	"license": "UNLICENSED",