@salmexio/ui 0.1.0 → 0.2.0

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;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/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/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"}