@happyvertical/smrt-ui 0.30.0

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

@@ -0,0 +1,46 @@
+/**
+ * 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';
+/** 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;
+}
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;
+//# sourceMappingURL=Modal.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Modal.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,gCAAgC;AAChC,MAAM,WAAW,KAAK;IACpB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C,iFAAiF;IACjF,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA6HD,QAAA,MAAM,KAAK,+CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/feedback/ProgressBar.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+/**
+ * ProgressBar - Visual progress indicator
+ * refactored for Material 3
+ *
+ * Shows progress with optional status-based coloring.
+ * Useful for budget tracking, task completion, etc.
+ */
+
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+
+const { t } = useI18n();
+
+/** Props for ProgressBar component */
+export interface Props {
+  /** Current value (0-100 or custom range) */
+  value: number;
+  /** Maximum value (default 100) */
+  max?: number;
+  /** Status determines color */
+  status?: 'default' | 'healthy' | 'warning' | 'critical' | 'over';
+  /** Show percentage label */
+  showLabel?: boolean;
+  /** Custom label text */
+  label?: string;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Show value over max (e.g., "75/100") */
+  showValue?: boolean;
+}
+
+const {
+  value,
+  max = 100,
+  status = 'default',
+  showLabel = false,
+  label,
+  size = 'md',
+  showValue = false,
+}: Props = $props();
+
+// Calculate percentage (capped at 100 for display)
+const percentage = $derived(Math.min((value / max) * 100, 100));
+
+// Auto-determine status if not provided
+const autoStatus = $derived.by(() => {
+  if (status !== 'default') return status;
+  const pct = (value / max) * 100;
+  if (pct > 100) return 'over';
+  if (pct >= 90) return 'critical';
+  if (pct >= 75) return 'warning';
+  return 'healthy';
+});
+
+// Map status to M3 colors
+const barColorClass = $derived.by(() => {
+  switch (autoStatus) {
+    case 'healthy':
+      return 'color-primary';
+    case 'warning':
+      return 'color-tertiary';
+    case 'critical':
+    case 'over':
+      return 'color-error';
+    default:
+      return 'color-primary';
+  }
+});
+
+// Format display label
+const displayLabel = $derived.by(() => {
+  if (label) return label;
+  if (showValue) return `${value.toLocaleString()} / ${max.toLocaleString()}`;
+  return `${Math.round(percentage)}%`;
+});
+</script>
+
+<div class="progress-container" class:sm={size === 'sm'} class:lg={size === 'lg'}>
+  {#if showLabel || showValue}
+    <div class="progress-header">
+      <span class="progress-label">{displayLabel}</span>
+      {#if value > max}
+        <span class="over-badge">{t(M['ui.progress_bar.over_by'], { amount: Math.round(value - max).toLocaleString() })}</span>
+      {/if}
+    </div>
+  {/if}
+
+  <div
+    class="progress-track"
+    role="progressbar"
+    aria-label={label?.trim() ? label : t(M['ui.progress_bar.label'])}
+    aria-valuenow={value}
+    aria-valuemin={0}
+    aria-valuemax={max}
+  >
+    <div
+      class="progress-bar {barColorClass}"
+      style:width="{percentage}%"
+    ></div>
+  </div>
+</div>
+
+<style>
+  .progress-container {
+    width: 100%;
+  }
+
+  .progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--smrt-spacing-2, 8px);
+  }
+
+  .progress-label {
+    font: var(--smrt-typography-label-large-font);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .sm .progress-label {
+    font: var(--smrt-typography-label-medium-font);
+  }
+
+  .over-badge {
+    font: var(--smrt-typography-label-small-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    color: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .progress-track {
+    width: 100%;
+    height: 4px;
+    background-color: var(--smrt-color-surface-container-highest, #e0e2ec);
+    border-radius: var(--smrt-radius-sm, 4px);
+    overflow: hidden;
+  }
+
+  .sm .progress-track {
+    height: 2px;
+  }
+
+  .lg .progress-track {
+    height: 8px;
+    border-radius: var(--smrt-radius-sm, 4px);
+  }
+
+  .progress-bar {
+    height: 100%;
+    transition: width var(--smrt-duration-medium2, 300ms) var(--smrt-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-bar {
+      transition: none;
+    }
+  }
+
+  .color-primary { background-color: var(--smrt-color-primary, #005ac1); }
+  .color-tertiary { background-color: var(--smrt-color-tertiary, #6b5778); }
+  .color-error { background-color: var(--smrt-color-error, #ba1a1a); }
+</style>

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

@@ -0,0 +1,21 @@
+/** Props for ProgressBar component */
+export interface Props {
+    /** Current value (0-100 or custom range) */
+    value: number;
+    /** Maximum value (default 100) */
+    max?: number;
+    /** Status determines color */
+    status?: 'default' | 'healthy' | 'warning' | 'critical' | 'over';
+    /** Show percentage label */
+    showLabel?: boolean;
+    /** Custom label text */
+    label?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show value over max (e.g., "75/100") */
+    showValue?: boolean;
+}
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ProgressBar.svelte.ts"],"names":[],"mappings":"AAcA,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACjE,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA0ED,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/feedback/__tests__/ConfirmDialog.test.js

@@ -0,0 +1,111 @@
+/**
+ * Golden test for ConfirmDialog (Sweep S11, #1416).
+ *
+ * ConfirmDialog renders a backdrop `<div role="dialog" aria-modal="true">` only
+ * while `open` is true, with a title, message, and cancel/confirm buttons. It
+ * exposes `onconfirm`/`oncancel` callbacks; Escape and backdrop clicks both
+ * route to `oncancel`.
+ */
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import ConfirmDialog from '../ConfirmDialog.svelte';
+const baseProps = {
+    open: true,
+    title: 'Delete item',
+    message: 'This action cannot be undone.',
+};
+describe('ConfirmDialog', () => {
+    it('renders a labelled dialog with title and message when open', () => {
+        render(ConfirmDialog, { props: baseProps });
+        const dialog = screen.getByRole('dialog');
+        expect(dialog).toHaveAttribute('aria-modal', 'true');
+        expect(screen.getByRole('heading', { name: 'Delete item' })).toBeInTheDocument();
+        expect(dialog).toHaveAccessibleName('Delete item');
+        expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument();
+    });
+    it('renders nothing when closed', () => {
+        render(ConfirmDialog, { props: { ...baseProps, open: false } });
+        expect(screen.queryByRole('dialog')).toBeNull();
+    });
+    it('uses default Confirm / Cancel button labels', () => {
+        render(ConfirmDialog, { props: baseProps });
+        expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+    });
+    it('honors custom confirm/cancel labels', () => {
+        render(ConfirmDialog, {
+            props: { ...baseProps, confirmLabel: 'Delete', cancelLabel: 'Keep' },
+        });
+        expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Keep' })).toBeInTheDocument();
+    });
+    it('fires onconfirm when the confirm button is clicked', async () => {
+        const onconfirm = vi.fn();
+        render(ConfirmDialog, { props: { ...baseProps, onconfirm } });
+        await userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+        expect(onconfirm).toHaveBeenCalledTimes(1);
+    });
+    it('fires oncancel when the cancel button is clicked', async () => {
+        const oncancel = vi.fn();
+        render(ConfirmDialog, { props: { ...baseProps, oncancel } });
+        await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+        expect(oncancel).toHaveBeenCalledTimes(1);
+    });
+    it('fires oncancel when Escape is pressed', async () => {
+        const oncancel = vi.fn();
+        render(ConfirmDialog, { props: { ...baseProps, oncancel } });
+        screen.getByRole('dialog').focus();
+        await userEvent.keyboard('{Escape}');
+        expect(oncancel).toHaveBeenCalledTimes(1);
+    });
+    it('fires oncancel when the backdrop is clicked', async () => {
+        const oncancel = vi.fn();
+        render(ConfirmDialog, { props: { ...baseProps, oncancel } });
+        await userEvent.click(screen.getByRole('dialog'));
+        expect(oncancel).toHaveBeenCalledTimes(1);
+    });
+    it('does not fire oncancel when clicking inside the dialog content', async () => {
+        const oncancel = vi.fn();
+        render(ConfirmDialog, { props: { ...baseProps, oncancel } });
+        await userEvent.click(screen.getByRole('heading', { name: 'Delete item' }));
+        expect(oncancel).not.toHaveBeenCalled();
+    });
+    it('disables both buttons while loading', () => {
+        render(ConfirmDialog, { props: { ...baseProps, loading: true } });
+        expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();
+        expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled();
+    });
+    it('does not fire callbacks from disabled buttons while loading', async () => {
+        const onconfirm = vi.fn();
+        const oncancel = vi.fn();
+        render(ConfirmDialog, {
+            props: { ...baseProps, loading: true, onconfirm, oncancel },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+        expect(onconfirm).not.toHaveBeenCalled();
+        expect(oncancel).not.toHaveBeenCalled();
+    });
+    it('applies destructive styling to the confirm button', () => {
+        render(ConfirmDialog, {
+            props: { ...baseProps, destructive: true, confirmLabel: 'Delete' },
+        });
+        expect(screen.getByRole('button', { name: 'Delete' })).toHaveClass('destructive');
+    });
+    it('omits destructive styling by default', () => {
+        render(ConfirmDialog, { props: baseProps });
+        expect(screen.getByRole('button', { name: 'Confirm' })).not.toHaveClass('destructive');
+    });
+    it('is axe-clean while open', async () => {
+        const { container } = render(ConfirmDialog, { props: baseProps });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean in the destructive loading state', async () => {
+        const { container } = render(ConfirmDialog, {
+            props: { ...baseProps, destructive: true, loading: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/feedback/__tests__/LoadingOverlay.test.js

@@ -0,0 +1,99 @@
+/**
+ * Golden test for LoadingOverlay (Sweep S11, #1416).
+ *
+ * LoadingOverlay renders a full-screen `role="dialog"` busy surface only while
+ * `show` is true and not dismissed. It carries `aria-busy` (true unless an
+ * error is present), an `aria-labelledby` title from `message`, optional
+ * progress/items, an error message, and a dismiss button when `dismissible`.
+ */
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import LoadingOverlay from '../LoadingOverlay.svelte';
+describe('LoadingOverlay', () => {
+    it('renders nothing when not shown', () => {
+        render(LoadingOverlay, { props: { show: false } });
+        expect(screen.queryByRole('dialog')).toBeNull();
+    });
+    it('renders a busy dialog labelled by its message when shown', () => {
+        render(LoadingOverlay, {
+            props: { show: true, message: 'Importing data' },
+        });
+        const dialog = screen.getByRole('dialog');
+        expect(dialog).toHaveAttribute('aria-busy', 'true');
+        expect(dialog).toHaveAccessibleName('Importing data');
+        expect(screen.getByRole('heading', { name: 'Importing data' })).toBeInTheDocument();
+    });
+    it('uses a default message when none is provided', () => {
+        render(LoadingOverlay, { props: { show: true } });
+        expect(screen.getByRole('heading', { name: 'Loading...' })).toBeInTheDocument();
+    });
+    it('shows a progress percentage when progress > 0', () => {
+        render(LoadingOverlay, { props: { show: true, progress: 60 } });
+        expect(screen.getByText('60%')).toBeInTheDocument();
+    });
+    it('omits the progress readout when progress is 0', () => {
+        render(LoadingOverlay, { props: { show: true, progress: 0 } });
+        expect(screen.queryByText('0%')).toBeNull();
+    });
+    it('renders completed items', () => {
+        render(LoadingOverlay, {
+            props: { show: true, items: ['Profiles', 'Assets'] },
+        });
+        expect(screen.getByText('Profiles')).toBeInTheDocument();
+        expect(screen.getByText('Assets')).toBeInTheDocument();
+    });
+    it('clears aria-busy and shows the error message in the error state', () => {
+        render(LoadingOverlay, {
+            props: { show: true, error: { message: 'Import failed' } },
+        });
+        const dialog = screen.getByRole('dialog');
+        expect(dialog).toHaveAttribute('aria-busy', 'false');
+        expect(screen.getByText('Import failed')).toBeInTheDocument();
+    });
+    it('omits the dismiss button unless dismissible', () => {
+        render(LoadingOverlay, { props: { show: true } });
+        expect(screen.queryByRole('button', { name: 'Continue' })).toBeNull();
+    });
+    it('fires ondismiss and hides the overlay when the dismiss button is clicked', async () => {
+        const ondismiss = vi.fn();
+        render(LoadingOverlay, {
+            props: { show: true, dismissible: true, ondismiss },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+        expect(ondismiss).toHaveBeenCalledTimes(1);
+        expect(screen.queryByRole('dialog')).toBeNull();
+    });
+    it('dismisses via the Escape key when dismissible', async () => {
+        const ondismiss = vi.fn();
+        render(LoadingOverlay, {
+            props: { show: true, dismissible: true, ondismiss },
+        });
+        await userEvent.keyboard('{Escape}');
+        expect(ondismiss).toHaveBeenCalledTimes(1);
+        expect(screen.queryByRole('dialog')).toBeNull();
+    });
+    it('ignores Escape when not dismissible', async () => {
+        render(LoadingOverlay, { props: { show: true, dismissible: false } });
+        await userEvent.keyboard('{Escape}');
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+    it('is axe-clean in the loading state', async () => {
+        const { container } = render(LoadingOverlay, {
+            props: { show: true, message: 'Loading your workspace', progress: 45 },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean with completed items and a dismiss action', async () => {
+        const { container } = render(LoadingOverlay, {
+            props: {
+                show: true,
+                message: 'Almost done',
+                items: ['Step one'],
+                dismissible: true,
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/feedback/__tests__/Modal.test.js

@@ -0,0 +1,72 @@
+/**
+ * Golden test for Modal (Sweep L4, #1423).
+ *
+ * Modal wraps a native <dialog>; jsdom implements showModal()/close(), so the
+ * open/close effect runs. Content is always in the DOM — visibility is driven
+ * by the dialog's modal state.
+ */
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Modal from '../Modal.svelte';
+function bodySnippet(text) {
+    return createRawSnippet(() => ({ render: () => `<p>${text}</p>` }));
+}
+describe('Modal', () => {
+    it('exposes a dialog labelled by its title, with content', () => {
+        render(Modal, {
+            props: {
+                open: true,
+                title: 'Settings',
+                children: bodySnippet('Body copy'),
+            },
+        });
+        const dialog = screen.getByRole('dialog', { hidden: true });
+        expect(dialog).toHaveAttribute('aria-label', 'Settings');
+        expect(screen.getByRole('heading', { name: 'Settings', hidden: true })).toBeInTheDocument();
+        expect(screen.getByText('Body copy')).toBeInTheDocument();
+    });
+    it('invokes onClose from the close button', async () => {
+        const onClose = vi.fn();
+        render(Modal, { props: { open: true, title: 'X', onClose } });
+        await userEvent.click(screen.getByRole('button', { name: 'Close modal', hidden: true }));
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    it('omits the close button when showClose is false', () => {
+        render(Modal, { props: { open: true, title: 'X', showClose: false } });
+        expect(screen.queryByRole('button', { name: 'Close modal', hidden: true })).toBeNull();
+    });
+    it('defaults to centered placement', () => {
+        render(Modal, { props: { open: true, title: 'X' } });
+        expect(screen.getByRole('dialog', { hidden: true })).toHaveClass('modal--center');
+    });
+    it('applies the end (drawer) placement variant', () => {
+        render(Modal, { props: { open: true, title: 'X', placement: 'end' } });
+        const dialog = screen.getByRole('dialog', { hidden: true });
+        expect(dialog).toHaveClass('modal--end');
+        expect(dialog).not.toHaveClass('modal--center');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(Modal, {
+            props: {
+                open: true,
+                title: 'Accessible dialog',
+                children: bodySnippet('content'),
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean with end placement', async () => {
+        const { container } = render(Modal, {
+            props: {
+                open: true,
+                title: 'Detail drawer',
+                placement: 'end',
+                children: bodySnippet('content'),
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/feedback/__tests__/ProgressBar.test.js

@@ -0,0 +1,89 @@
+/**
+ * Golden test for ProgressBar (Sweep S11, #1416).
+ *
+ * ProgressBar renders a `role="progressbar"` track carrying
+ * `aria-valuenow`/`aria-valuemin`/`aria-valuemax` from its `value`/`max` props.
+ * An optional header shows a percentage, a value/max pair, or a custom label,
+ * plus an "over by" badge when `value` exceeds `max`.
+ */
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import ProgressBar from '../ProgressBar.svelte';
+describe('ProgressBar', () => {
+    it('gives the progressbar an accessible name (default and custom label)', async () => {
+        const { rerender } = render(ProgressBar, { props: { value: 40 } });
+        // Default accessible name comes from the i18n'd "Progress" label.
+        expect(screen.getByRole('progressbar', { name: 'Progress' })).toBeInTheDocument();
+        // rerender resolves the prop update asynchronously — await before querying.
+        await rerender({ value: 40, label: 'Upload' });
+        expect(screen.getByRole('progressbar', { name: 'Upload' })).toBeInTheDocument();
+    });
+    it('falls back to the default name when label is empty or whitespace', () => {
+        render(ProgressBar, { props: { value: 40, label: '   ' } });
+        expect(screen.getByRole('progressbar', { name: 'Progress' })).toBeInTheDocument();
+    });
+    it('exposes progressbar role with aria-value attributes', () => {
+        render(ProgressBar, { props: { value: 40 } });
+        const bar = screen.getByRole('progressbar');
+        expect(bar).toHaveAttribute('aria-valuenow', '40');
+        expect(bar).toHaveAttribute('aria-valuemin', '0');
+        expect(bar).toHaveAttribute('aria-valuemax', '100');
+    });
+    it('reflects a custom max in aria-valuemax', () => {
+        render(ProgressBar, { props: { value: 30, max: 200 } });
+        const bar = screen.getByRole('progressbar');
+        expect(bar).toHaveAttribute('aria-valuenow', '30');
+        expect(bar).toHaveAttribute('aria-valuemax', '200');
+    });
+    it('does not render a label by default', () => {
+        render(ProgressBar, { props: { value: 25 } });
+        expect(screen.queryByText('25%')).toBeNull();
+    });
+    it('shows a rounded percentage label when showLabel is set', () => {
+        render(ProgressBar, { props: { value: 33, showLabel: true } });
+        expect(screen.getByText('33%')).toBeInTheDocument();
+    });
+    it('shows a value / max label when showValue is set', () => {
+        render(ProgressBar, { props: { value: 75, max: 100, showValue: true } });
+        expect(screen.getByText('75 / 100')).toBeInTheDocument();
+    });
+    it('prefers a custom label over percentage and value', () => {
+        render(ProgressBar, {
+            props: { value: 50, showLabel: true, label: 'Almost there' },
+        });
+        expect(screen.getByText('Almost there')).toBeInTheDocument();
+        expect(screen.queryByText('50%')).toBeNull();
+    });
+    it('caps aria-valuenow display semantics but reports the raw over-budget value', () => {
+        render(ProgressBar, { props: { value: 120, max: 100, showLabel: true } });
+        const bar = screen.getByRole('progressbar');
+        expect(bar).toHaveAttribute('aria-valuenow', '120');
+        expect(bar).toHaveAttribute('aria-valuemax', '100');
+        expect(screen.getByText('Over by 20')).toBeInTheDocument();
+    });
+    it('is axe-clean at 0%', async () => {
+        const { container } = render(ProgressBar, {
+            props: { value: 0, showLabel: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean mid-progress', async () => {
+        const { container } = render(ProgressBar, {
+            props: { value: 50, showLabel: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean at 100%', async () => {
+        const { container } = render(ProgressBar, {
+            props: { value: 100, showLabel: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean in the over-budget state', async () => {
+        const { container } = render(ProgressBar, {
+            props: { value: 130, max: 100, showValue: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/feedback/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Feedback components - User feedback and status indicators
+ */
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as LoadingOverlay } from './LoadingOverlay.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/feedback/index.js

@@ -0,0 +1,10 @@
+/**
+ * Feedback components - User feedback and status indicators
+ */
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as LoadingOverlay } from './LoadingOverlay.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+// Note: Component prop types (ConfirmDialogProps, etc.) are available
+// via svelte-package build output but cannot be re-exported here because
+// tsc --noEmit cannot resolve type exports from .svelte files.