@salmexio/ui 0.1.1 → 0.2.0

package/dist/dialogs/Modal/Modal.svelte

@@ -8,154 +8,154 @@
   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);
+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();
 			}
-		} 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;
+			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 handleClose() {
+	if (!preventClose) onclose?.();
+}
 
-	function handleKeyDown(e: KeyboardEvent) {
-		if (closeOnEscape && e.key === Keys.Escape) {
-			e.preventDefault();
-			handleClose();
-		}
+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');
+const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 </script>
 
 <svelte:window onkeydown={open ? handleKeyDown : undefined} />

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

@@ -1 +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"}
+{"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;AAKtC,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;AA0KD;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/feedback/Alert/Alert.svelte

@@ -5,69 +5,69 @@
   Dismissible, expandable, optional title; role="alert" for errors.
 -->
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { cn } from '../../utils/cn.js';
-
-	type AlertType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
-	type AlertVariant = 'standard' | 'slim' | 'bordered';
-	type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
-
-	interface Props {
-		type?: AlertType;
-		variant?: AlertVariant;
-		title?: string;
-		headingLevel?: HeadingLevel;
-		dismissible?: boolean;
-		showIcon?: boolean;
-		expandable?: boolean;
-		defaultExpanded?: boolean;
-		class?: string;
-		children?: Snippet;
-		actions?: Snippet;
-		onclose?: () => void;
-		closeBtnAriaLabel?: string;
-		id?: string;
-	}
-
-	let {
-		type = 'info',
-		variant = 'standard',
-		title = '',
-		headingLevel = 'h3',
-		dismissible = false,
-		showIcon = true,
-		expandable = false,
-		defaultExpanded = true,
-		class: className = '',
-		children,
-		actions,
-		onclose,
-		closeBtnAriaLabel,
-		id
-	}: Props = $props();
-
-	let isExpanded = $state(true);
-
-	$effect(() => {
-		isExpanded = defaultExpanded;
-	});
-
-	const generatedId = `alert-${Math.random().toString(36).slice(2, 9)}`;
-	const alertId = $derived(id ?? generatedId);
-	const contentId = $derived(`${alertId}-content`);
-	const titleId = $derived(`${alertId}-title`);
-
-	const ariaRole = $derived(type === 'error' || type === 'warning' ? 'alert' : 'status');
-	const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite');
-	const closeLabel = $derived(closeBtnAriaLabel ?? `Close ${title || type} notification`);
-
-	function handleDismiss() {
-		onclose?.();
-	}
-
-	function toggleExpanded() {
-		isExpanded = !isExpanded;
-	}
+import type { Snippet } from 'svelte';
+import { cn } from '../../utils/cn.js';
+
+type AlertType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+type AlertVariant = 'standard' | 'slim' | 'bordered';
+type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+
+interface Props {
+	type?: AlertType;
+	variant?: AlertVariant;
+	title?: string;
+	headingLevel?: HeadingLevel;
+	dismissible?: boolean;
+	showIcon?: boolean;
+	expandable?: boolean;
+	defaultExpanded?: boolean;
+	class?: string;
+	children?: Snippet;
+	actions?: Snippet;
+	onclose?: () => void;
+	closeBtnAriaLabel?: string;
+	id?: string;
+}
+
+let {
+	type = 'info',
+	variant = 'standard',
+	title = '',
+	headingLevel = 'h3',
+	dismissible = false,
+	showIcon = true,
+	expandable = false,
+	defaultExpanded = true,
+	class: className = '',
+	children,
+	actions,
+	onclose,
+	closeBtnAriaLabel,
+	id
+}: Props = $props();
+
+let isExpanded = $state(true);
+
+$effect(() => {
+	isExpanded = defaultExpanded;
+});
+
+const generatedId = `alert-${Math.random().toString(36).slice(2, 9)}`;
+const alertId = $derived(id ?? generatedId);
+const contentId = $derived(`${alertId}-content`);
+const titleId = $derived(`${alertId}-title`);
+
+const ariaRole = $derived(type === 'error' || type === 'warning' ? 'alert' : 'status');
+const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite');
+const closeLabel = $derived(closeBtnAriaLabel ?? `Close ${title || type} notification`);
+
+function handleDismiss() {
+	onclose?.();
+}
+
+function toggleExpanded() {
+	isExpanded = !isExpanded;
+}
 </script>
 
 <div

package/dist/feedback/Alert/Alert.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Alert/Alert.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIrC,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AACtE,KAAK,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AACrD,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;AAE3D,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AAmHF;;;;;GAKG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Alert/Alert.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AACtE,KAAK,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AACrD,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;AAE3D,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AAmHD;;;;;GAKG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/feedback/Spinner/Spinner.svelte

@@ -6,62 +6,62 @@
   role="status", aria-label, delay, overlay. prefers-reduced-motion respected.
 -->
 <script lang="ts">
-	import { cn } from '../../utils/cn.js';
-
-	type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-	type SpinnerVariant = 'primary' | 'secondary' | 'white';
-	type SpinnerStyle = 'ring' | 'bars' | 'segment' | 'dots' | 'pulse';
-
-	interface Props {
-		size?: SpinnerSize;
-		variant?: SpinnerVariant;
-		style?: SpinnerStyle;
-		label?: string;
-		showLabel?: boolean;
-		delay?: number;
-		overlay?: boolean;
-		class?: string;
-		id?: string;
+import { cn } from '../../utils/cn.js';
+
+type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerVariant = 'primary' | 'secondary' | 'white';
+type SpinnerStyle = 'ring' | 'bars' | 'segment' | 'dots' | 'pulse';
+
+interface Props {
+	size?: SpinnerSize;
+	variant?: SpinnerVariant;
+	style?: SpinnerStyle;
+	label?: string;
+	showLabel?: boolean;
+	delay?: number;
+	overlay?: boolean;
+	class?: string;
+	id?: string;
+}
+
+let {
+	size = 'md',
+	variant = 'primary',
+	style = 'ring',
+	label = 'Loading...',
+	showLabel = false,
+	delay = 0,
+	overlay = false,
+	class: className = '',
+	id
+}: Props = $props();
+
+let isVisible = $state(false);
+
+$effect(() => {
+	if (delay === 0) {
+		isVisible = true;
+		return;
 	}
-
-	let {
-		size = 'md',
-		variant = 'primary',
-		style = 'ring',
-		label = 'Loading...',
-		showLabel = false,
-		delay = 0,
-		overlay = false,
-		class: className = '',
-		id
-	}: Props = $props();
-
-	let isVisible = $state(false);
-
-	$effect(() => {
-		if (delay === 0) {
-			isVisible = true;
-			return;
-		}
-		isVisible = false;
-		const t = setTimeout(() => {
-			isVisible = true;
-		}, delay);
-		return () => clearTimeout(t);
-	});
-
-	const sizeConfig: Record<
-		SpinnerSize,
-		{ dimension: number; stroke: number; fontSize: string; dotSize: number }
-	> = {
-		xs: { dimension: 16, stroke: 2.5, fontSize: 'var(--salmex-font-size-xs)', dotSize: 4 },
-		sm: { dimension: 20, stroke: 3, fontSize: 'var(--salmex-font-size-sm)', dotSize: 5 },
-		md: { dimension: 28, stroke: 4, fontSize: 'var(--salmex-font-size-sm)', dotSize: 6 },
-		lg: { dimension: 40, stroke: 5, fontSize: 'var(--salmex-font-size-base)', dotSize: 8 },
-		xl: { dimension: 56, stroke: 6, fontSize: 'var(--salmex-font-size-md)', dotSize: 10 }
-	};
-
-	const config = $derived(sizeConfig[size]);
+	isVisible = false;
+	const t = setTimeout(() => {
+		isVisible = true;
+	}, delay);
+	return () => clearTimeout(t);
+});
+
+const sizeConfig: Record<
+	SpinnerSize,
+	{ dimension: number; stroke: number; fontSize: string; dotSize: number }
+> = {
+	xs: { dimension: 16, stroke: 2.5, fontSize: 'var(--salmex-font-size-xs)', dotSize: 4 },
+	sm: { dimension: 20, stroke: 3, fontSize: 'var(--salmex-font-size-sm)', dotSize: 5 },
+	md: { dimension: 28, stroke: 4, fontSize: 'var(--salmex-font-size-sm)', dotSize: 6 },
+	lg: { dimension: 40, stroke: 5, fontSize: 'var(--salmex-font-size-base)', dotSize: 8 },
+	xl: { dimension: 56, stroke: 6, fontSize: 'var(--salmex-font-size-md)', dotSize: 10 }
+};
+
+const config = $derived(sizeConfig[size]);
 </script>
 
 {#if isVisible}

package/dist/feedback/Spinner/Spinner.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpD,KAAK,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AACxD,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AA2GF;;;;;;GAMG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpD,KAAK,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AACxD,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AA2GD;;;;;;GAMG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}