@happyvertical/smrt-ui 0.30.0

package/dist/components/feedback/LoadingOverlay.svelte

@@ -0,0 +1,281 @@
+<script lang="ts">
+/**
+ * Loading Overlay Component
+ *
+ * A generic full-screen loading overlay for any async operation.
+ * Shows progress, completed items, and error states.
+ */
+
+/** Props for LoadingOverlay component */
+export interface Props {
+  /** Whether to show the overlay */
+  show?: boolean;
+  /** Loading message to display */
+  message?: string;
+  /** Progress percentage (0-100) */
+  progress?: number;
+  /** List of completed items */
+  items?: string[];
+  /** Error object with message */
+  error?: { message: string } | null;
+  /** Allow dismissing the overlay */
+  dismissible?: boolean;
+  /** Custom CSS class */
+  class?: string;
+  /** Callback when dismissed */
+  ondismiss?: () => void;
+}
+
+let {
+  show = false,
+  message = 'Loading...',
+  progress = 0,
+  items = [],
+  error = null,
+  dismissible = false,
+  class: className = '',
+  ondismiss,
+}: Props = $props();
+
+let dismissed = $state(false);
+
+// Reset dismissed state when show becomes false
+$effect(() => {
+  if (!show) {
+    dismissed = false;
+  }
+});
+
+function handleDismiss() {
+  if (dismissible) {
+    dismissed = true;
+    ondismiss?.();
+  }
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && dismissible) {
+    e.preventDefault();
+    handleDismiss();
+  }
+}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if show && !dismissed}
+	<div
+		class="loading-overlay {className}"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="loading-title"
+		aria-describedby={items.length > 0 ? 'loading-items' : undefined}
+		aria-busy={!error}
+	>
+		<div class="overlay-backdrop"></div>
+
+		<div class="overlay-content">
+			<div class="loading-icon">
+				{#if error}
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="icon error">
+						<circle cx="12" cy="12" r="10" stroke-width="2" />
+						<path d="M12 8v4m0 4h.01" stroke-width="2" stroke-linecap="round" />
+					</svg>
+				{:else}
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="icon spinner">
+						<path
+							d="M12 2a10 10 0 0 1 10 10"
+							stroke-width="2"
+							stroke-linecap="round"
+						/>
+					</svg>
+				{/if}
+			</div>
+
+			<h2 id="loading-title" class="title">
+				{message}
+			</h2>
+
+			{#if progress > 0}
+				<div class="progress-container">
+					<div class="progress-bar">
+						<div class="progress-fill" style:width="{progress}%"></div>
+					</div>
+					<span class="progress-text">{progress}%</span>
+				</div>
+			{/if}
+
+			{#if items.length > 0}
+				<div class="items-container" id="loading-items">
+					{#each items as item}
+						<span class="item-badge">{item}</span>
+					{/each}
+				</div>
+			{/if}
+
+			{#if error}
+				<p class="error-message">{error.message}</p>
+			{/if}
+
+			{#if dismissible}
+				<button type="button" class="dismiss-btn" onclick={handleDismiss}>
+					Continue
+				</button>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.loading-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: var(--smrt-z-index-loading, 1700);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.overlay-backdrop {
+		position: absolute;
+		inset: 0;
+		background: var(--smrt-color-scrim, rgba(0, 0, 0, 0.5));
+		backdrop-filter: blur(4px);
+	}
+
+	.overlay-content {
+		position: relative;
+		background: var(--smrt-color-surface-container-high, white);
+		border-radius: var(--smrt-radius-xl, 16px);
+		padding: var(--smrt-spacing-8, 32px) var(--smrt-spacing-10, 40px);
+		max-width: 400px;
+		width: 90%;
+		text-align: center;
+		box-shadow: var(--smrt-elevation-5, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+	}
+
+	.loading-icon {
+		width: 48px;
+		height: 48px;
+		margin: 0 auto var(--smrt-spacing-4, 16px);
+	}
+
+	.icon {
+		width: 100%;
+		height: 100%;
+	}
+
+	.icon.spinner {
+		color: var(--smrt-color-primary, #3b82f6);
+		animation: spin 1s linear infinite;
+	}
+
+	.icon.error {
+		color: var(--smrt-color-error, #ef4444);
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.title {
+		font-size: var(--smrt-typography-title-large-size, 1.25rem);
+		font-weight: var(--smrt-typography-weight-semibold, 600);
+		color: var(--smrt-color-on-surface, #1f2937);
+		margin: 0 0 var(--smrt-spacing-4, 16px);
+	}
+
+	.progress-container {
+		display: flex;
+		align-items: center;
+		gap: var(--smrt-spacing-3, 12px);
+		margin: var(--smrt-spacing-4, 16px) 0;
+	}
+
+	.progress-bar {
+		flex: 1;
+		height: 8px;
+		background: var(--smrt-color-surface-container-highest, #e5e7eb);
+		border-radius: var(--smrt-radius-sm, 4px);
+		overflow: hidden;
+	}
+
+	.progress-fill {
+		height: 100%;
+		background: linear-gradient(
+			90deg,
+			var(--smrt-color-primary),
+			color-mix(in srgb, var(--smrt-color-primary) 70%, white)
+		);
+		border-radius: var(--smrt-radius-sm, 4px);
+		transition: width var(--smrt-duration-short4, 300ms) var(--smrt-easing-standard, ease);
+	}
+
+	.progress-text {
+		font-size: var(--smrt-typography-label-large-size, 0.875rem);
+		font-weight: var(--smrt-typography-weight-semibold, 600);
+		color: var(--smrt-color-primary, #3b82f6);
+		min-width: 40px;
+	}
+
+	.items-container {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--smrt-spacing-2, 8px);
+		justify-content: center;
+		margin-top: var(--smrt-spacing-4, 16px);
+	}
+
+	.item-badge {
+		font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+		padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-3, 12px);
+		border-radius: var(--smrt-radius-full, 9999px);
+		background: var(--smrt-color-primary-container, #dcfce7);
+		color: var(--smrt-color-on-primary-container, #166534);
+	}
+
+	.error-message {
+		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+		color: var(--smrt-color-error, #ef4444);
+		margin: var(--smrt-spacing-4, 16px) 0 0;
+		padding: var(--smrt-spacing-3, 12px);
+		background: var(--smrt-color-error-container, #fef2f2);
+		border-radius: var(--smrt-radius-md, 8px);
+	}
+
+	.dismiss-btn {
+		margin-top: var(--smrt-spacing-5, 20px);
+		padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-5, 20px);
+		font-size: var(--smrt-typography-label-large-size, 0.875rem);
+		color: var(--smrt-color-on-surface-variant, #6b7280);
+		background: transparent;
+		border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+		border-radius: var(--smrt-radius-md, 8px);
+		cursor: pointer;
+		transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+	}
+
+	.dismiss-btn:hover {
+		background: var(--smrt-color-surface-container-highest, #f3f4f6);
+		border-color: var(--smrt-color-outline, #9ca3af);
+	}
+
+	.dismiss-btn:focus-visible {
+		outline: 2px solid var(--smrt-color-primary);
+		outline-offset: 2px;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.icon.spinner {
+			animation: none;
+		}
+		.progress-fill {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/feedback/LoadingOverlay.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Loading Overlay Component
+ *
+ * A generic full-screen loading overlay for any async operation.
+ * Shows progress, completed items, and error states.
+ */
+/** Props for LoadingOverlay component */
+export interface Props {
+    /** Whether to show the overlay */
+    show?: boolean;
+    /** Loading message to display */
+    message?: string;
+    /** Progress percentage (0-100) */
+    progress?: number;
+    /** List of completed items */
+    items?: string[];
+    /** Error object with message */
+    error?: {
+        message: string;
+    } | null;
+    /** Allow dismissing the overlay */
+    dismissible?: boolean;
+    /** Custom CSS class */
+    class?: string;
+    /** Callback when dismissed */
+    ondismiss?: () => void;
+}
+declare const LoadingOverlay: import("svelte").Component<Props, {}, "">;
+type LoadingOverlay = ReturnType<typeof LoadingOverlay>;
+export default LoadingOverlay;
+//# sourceMappingURL=LoadingOverlay.svelte.d.ts.map

package/dist/components/feedback/LoadingOverlay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/LoadingOverlay.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AAEH,yCAAyC;AACzC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,gCAAgC;IAChC,KAAK,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnC,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAiGD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/feedback/Modal.svelte

@@ -0,0 +1,393 @@
+<script lang="ts">
+/**
+ * Modal - An accessible dialog component
+ *
+ * Features:
+ * - Native dialog element for accessibility
+ * - Backdrop click to close (optional)
+ * - Escape key to close
+ * - Focus trap
+ * - Multiple sizes
+ * - Custom header/footer via snippets
+ * - Material 3 styling
+ */
+
+import type { Snippet } from 'svelte';
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+
+const { t } = useI18n();
+
+/** Props for Modal component */
+export interface Props {
+  /** Whether the modal is open */
+  open?: boolean;
+  /** Callback when modal requests to close */
+  onClose?: () => void;
+  /** Modal title */
+  title?: string;
+  /** Modal size variant */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /** Placement: center (default) or end for a right-anchored full-height drawer */
+  placement?: 'center' | 'end';
+  /** Whether clicking backdrop closes modal */
+  closeOnBackdrop?: boolean;
+  /** Whether pressing Escape closes modal */
+  closeOnEscape?: boolean;
+  /** Show close button */
+  showClose?: boolean;
+  /** Custom header snippet */
+  header?: Snippet;
+  /** Custom footer snippet */
+  footer?: Snippet;
+  /** Main content */
+  children?: Snippet;
+  /** ARIA label for the dialog */
+  ariaLabel?: string;
+  /** ARIA described by ID */
+  ariaDescribedBy?: string;
+}
+
+let {
+  open = $bindable(false),
+  onClose,
+  title,
+  size = 'md',
+  placement = 'center',
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  showClose = true,
+  header,
+  footer,
+  children,
+  ariaLabel,
+  ariaDescribedBy,
+}: Props = $props();
+
+let dialogEl: HTMLDialogElement | null = $state(null);
+
+// Sync open state with dialog
+$effect(() => {
+  if (!dialogEl) return;
+
+  if (open && !dialogEl.open) {
+    dialogEl.showModal();
+  } else if (!open && dialogEl.open) {
+    dialogEl.close();
+  }
+});
+
+function handleClose() {
+  open = false;
+  onClose?.();
+}
+
+function handleBackdropClick(event: MouseEvent) {
+  if (!closeOnBackdrop) return;
+
+  // Only close if clicking directly on the dialog (backdrop)
+  if (event.target === dialogEl) {
+    handleClose();
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && closeOnEscape) {
+    event.preventDefault();
+    handleClose();
+  }
+}
+
+function handleCancel(event: Event) {
+  // Prevent default browser behavior and handle ourselves
+  event.preventDefault();
+  if (closeOnEscape) {
+    handleClose();
+  }
+}
+
+const sizeClasses = {
+  sm: 'modal--sm',
+  md: 'modal--md',
+  lg: 'modal--lg',
+  xl: 'modal--xl',
+  full: 'modal--full',
+};
+
+const placementClass = $derived(
+  placement === 'end' ? 'modal--end' : 'modal--center',
+);
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<dialog
+  bind:this={dialogEl}
+  class="modal {sizeClasses[size]} {placementClass}"
+  onclick={handleBackdropClick}
+  onkeydown={handleKeydown}
+  oncancel={handleCancel}
+  aria-label={ariaLabel ?? title}
+  aria-describedby={ariaDescribedBy}
+>
+  <div class="modal__container">
+    {#if header}
+      <header class="modal__header modal__header--custom">
+        {@render header()}
+      </header>
+    {:else if title || showClose}
+      <header class="modal__header">
+        {#if title}
+          <h2 class="modal__title">{title}</h2>
+        {:else}
+          <span></span>
+        {/if}
+        {#if showClose}
+          <button
+            type="button"
+            class="modal__close"
+            onclick={handleClose}
+            aria-label={t(M['ui.modal.close'])}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        {/if}
+      </header>
+    {/if}
+
+    <div class="modal__body">
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+
+    {#if footer}
+      <footer class="modal__footer">
+        {@render footer()}
+      </footer>
+    {/if}
+  </div>
+</dialog>
+
+<style>
+  .modal {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .modal::backdrop {
+    background: var(--smrt-color-scrim, rgba(0, 0, 0, 0.5));
+    backdrop-filter: blur(2px);
+  }
+
+  .modal:not([open]) {
+    display: none;
+  }
+
+  .modal__container {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - var(--smrt-spacing-8, 2rem));
+    max-width: calc(100vw - var(--smrt-spacing-8, 2rem));
+    background: var(--smrt-color-surface, #ffffff);
+    border-radius: var(--smrt-radius-large, 0.75rem);
+    box-shadow: var(--smrt-elevation-3, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+    overflow: hidden;
+    animation: modal-enter var(--smrt-duration-medium2, 300ms) var(--smrt-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  @keyframes modal-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.9) translateY(-16px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .modal__container {
+      animation: none;
+    }
+  }
+
+  /* Size variants */
+  .modal--sm .modal__container {
+    width: 100%;
+    max-width: 24rem; /* 384px */
+  }
+
+  .modal--md .modal__container {
+    width: 100%;
+    max-width: 32rem; /* 512px */
+  }
+
+  .modal--lg .modal__container {
+    width: 100%;
+    max-width: 48rem; /* 768px */
+  }
+
+  .modal--xl .modal__container {
+    width: 100%;
+    max-width: 64rem; /* 1024px */
+  }
+
+  .modal--full .modal__container {
+    width: calc(100vw - var(--smrt-spacing-8, 2rem));
+    height: calc(100vh - var(--smrt-spacing-8, 2rem));
+    max-width: none;
+    max-height: none;
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+  }
+
+  /* Placement: end = right-anchored, full-height drawer (e.g. detail panels).
+     The size variant still sets the panel width. */
+  .modal--end {
+    justify-content: flex-end;
+    align-items: stretch;
+  }
+
+  .modal--end .modal__container {
+    height: 100%;
+    max-height: 100%;
+    border-radius: var(--smrt-radius-none, 0);
+    animation: modal-slide-end var(--smrt-duration-medium2, 300ms)
+      var(--smrt-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  @keyframes modal-slide-end {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .modal--end .modal__container {
+      animation: none;
+    }
+  }
+
+  /* Header */
+  .modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-3, 0.75rem);
+    padding: var(--smrt-spacing-4, 1rem) var(--smrt-spacing-5, 1.25rem);
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    flex-shrink: 0;
+  }
+
+  .modal__header--custom {
+    padding: 0;
+    border-bottom: none;
+  }
+
+  .modal__title {
+    margin: 0;
+    font-size: var(--smrt-typography-headline-small-size, 1.125rem);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    color: var(--smrt-color-on-surface, #1b1b1f);
+    line-height: var(--smrt-typography-headline-small-line-height, 1.4);
+  }
+
+  .modal__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    cursor: pointer;
+    transition: all var(--smrt-duration-short3, 150ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+    flex-shrink: 0;
+  }
+
+  .modal__close:hover {
+    background: var(--smrt-color-surface-container-highest, #e0e2ec);
+    color: var(--smrt-color-on-surface, #1b1b1f);
+  }
+
+  .modal__close:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: 2px;
+  }
+
+  /* Body */
+  .modal__body {
+    flex: 1;
+    padding: var(--smrt-spacing-5, 1.25rem);
+    overflow-y: auto;
+    color: var(--smrt-color-on-surface, #1b1b1f);
+  }
+
+  /* Footer */
+  .modal__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--smrt-spacing-3, 0.75rem);
+    padding: var(--smrt-spacing-4, 1rem) var(--smrt-spacing-5, 1.25rem);
+    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    flex-shrink: 0;
+  }
+
+  /* Responsive */
+  @media (max-width: 640px) {
+    .modal__container {
+      max-height: calc(100vh - var(--smrt-spacing-4, 1rem));
+      max-width: calc(100vw - var(--smrt-spacing-4, 1rem));
+    }
+
+    .modal--sm .modal__container,
+    .modal--md .modal__container,
+    .modal--lg .modal__container,
+    .modal--xl .modal__container {
+      max-width: calc(100vw - var(--smrt-spacing-4, 1rem));
+    }
+
+    /* A drawer goes full-bleed on mobile — no backdrop strip. Declared after the
+       size-cap rule above so it wins for end placement regardless of size. */
+    .modal--end .modal__container {
+      width: 100%;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+</style>