@happyvertical/smrt-ui 0.38.26 → 0.39.0

package/dist/components/feedback/Modal.svelte

@@ -28,8 +28,8 @@ export interface Props {
   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';
+  /** Placement: center (default), start, or end for full-height drawers */
+  placement?: 'center' | 'start' | 'end';
   /** Whether clicking backdrop closes modal */
   closeOnBackdrop?: boolean;
   /** Whether pressing Escape closes modal */
@@ -114,9 +114,7 @@ const sizeClasses = {
   full: 'modal--full',
 };
 
-const placementClass = $derived(
-  placement === 'end' ? 'modal--end' : 'modal--center',
-);
+const placementClass = $derived(`modal--${placement}`);
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
@@ -269,11 +267,17 @@ const placementClass = $derived(
 
   /* Placement: end = right-anchored, full-height drawer (e.g. detail panels).
      The size variant still sets the panel width. */
+  .modal--start,
   .modal--end {
     justify-content: flex-end;
     align-items: stretch;
   }
 
+  .modal--start {
+    justify-content: flex-start;
+  }
+
+  .modal--start .modal__container,
   .modal--end .modal__container {
     height: 100%;
     max-height: 100%;

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

@@ -21,8 +21,8 @@ export interface Props {
     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';
+    /** Placement: center (default), start, or end for full-height drawers */
+    placement?: 'center' | 'start' | 'end';
     /** Whether clicking backdrop closes modal */
     closeOnBackdrop?: boolean;
     /** Whether pressing Escape closes modal */

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

@@ -1 +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"}
+{"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,yEAAyE;IACzE,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACvC,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;AA2HD,QAAA,MAAM,KAAK,+CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/feedback/Progress.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+export interface Props {
+  value?: number;
+  min?: number;
+  max?: number;
+  label?: string;
+  variant?: 'linear' | 'circular';
+  size?: 'sm' | 'md' | 'lg';
+  showValue?: boolean;
+  class?: string;
+}
+let {
+  value,
+  min = 0,
+  max = 100,
+  label = 'Progress',
+  variant = 'linear',
+  size = 'md',
+  showValue = false,
+  class: className = '',
+}: Props = $props();
+const indeterminate = $derived(value === undefined);
+const normalized = $derived(
+  indeterminate || max <= min
+    ? 0
+    : Math.min(100, Math.max(0, (((value ?? min) - min) / (max - min)) * 100)),
+);
+const displayValue = $derived(
+  value === undefined ? '' : `${Math.round(normalized)}%`,
+);
+</script>
+{#if variant === 'circular'}
+  <div class="progress progress--circular progress--{size} {className}" class:indeterminate role="progressbar" aria-label={label}
+    aria-valuemin={indeterminate ? undefined : min} aria-valuemax={indeterminate ? undefined : max} aria-valuenow={value}>
+    <svg viewBox="0 0 44 44" aria-hidden="true"><circle class="track" cx="22" cy="22" r="18"></circle><circle class="indicator" cx="22" cy="22" r="18" style={`--progress: ${normalized}`}></circle></svg>
+    {#if showValue && !indeterminate}<span>{displayValue}</span>{/if}
+  </div>
+{:else}
+  <div class="progress progress--linear progress--{size} {className}" class:indeterminate role="progressbar" aria-label={label}
+    aria-valuemin={indeterminate ? undefined : min} aria-valuemax={indeterminate ? undefined : max} aria-valuenow={value}>
+    <span class="track"><span class="indicator" style:width={indeterminate ? undefined : `${normalized}%`}></span></span>
+    {#if showValue && !indeterminate}<span class="value">{displayValue}</span>{/if}
+  </div>
+{/if}
+<style>
+  .progress--linear { display: flex; align-items: center; gap: var(--smrt-spacing-2); width: 100%; }
+  .progress--linear .track { position: relative; display: block; flex: 1; height: 4px; overflow: hidden; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-highest); }
+  .progress--linear.progress--sm .track { height: 2px; } .progress--linear.progress--lg .track { height: 8px; }
+  .progress--linear .indicator { display: block; height: 100%; border-radius: inherit; background: var(--smrt-color-primary); transition: width var(--smrt-duration-short4) var(--smrt-easing-standard); }
+  .progress--linear.indeterminate .indicator { position: absolute; width: 35%; animation: linear-progress 1.25s ease-in-out infinite; }
+  .value { min-width: 3ch; font: var(--smrt-typography-label-small-font); color: var(--smrt-color-on-surface-variant); }
+  .progress--circular { position: relative; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; }
+  .progress--circular.progress--sm { width: 1.75rem; height: 1.75rem; } .progress--circular.progress--lg { width: 4rem; height: 4rem; }
+  .progress--circular svg { width: 100%; height: 100%; transform: rotate(-90deg); }
+  .progress--circular circle { fill: none; stroke-width: 4; } .progress--circular .track { stroke: var(--smrt-color-surface-container-highest); }
+  .progress--circular .indicator { stroke: var(--smrt-color-primary); stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: calc(113.1 - (113.1 * var(--progress)) / 100); transition: stroke-dashoffset var(--smrt-duration-short4); }
+  .progress--circular.indeterminate svg { animation: spin 1s linear infinite; } .progress--circular.indeterminate .indicator { stroke-dasharray: 70 113.1; }
+  .progress--circular > span { position: absolute; font: var(--smrt-typography-label-small-font); }
+  @keyframes linear-progress { from { left: -40%; } to { left: 105%; } } @keyframes spin { to { transform: rotate(270deg); } }
+  @media (prefers-reduced-motion: reduce) { .indicator { transition: none !important; animation-duration: 2.5s !important; } }
+</style>

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

@@ -0,0 +1,14 @@
+export interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    variant?: 'linear' | 'circular';
+    size?: 'sm' | 'md' | 'lg';
+    showValue?: boolean;
+    class?: string;
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;
+//# sourceMappingURL=Progress.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Progress.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsCD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/feedback/Spinner.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+export interface Props {
+  label?: string;
+  size?: 'sm' | 'md' | 'lg';
+  class?: string;
+}
+let { label = 'Loading', size = 'md', class: className = '' }: Props = $props();
+</script>
+<span class="spinner spinner--{size} {className}" role="status"><span class="spinner__ring" aria-hidden="true"></span><span class="visually-hidden">{label}</span></span>
+<style>
+  .spinner { display: inline-flex; }
+  .spinner__ring { width: 1.5rem; height: 1.5rem; border: 2px solid var(--smrt-color-surface-container-highest); border-top-color: var(--smrt-color-primary); border-radius: 50%; animation: spin .75s linear infinite; }
+  .spinner--sm .spinner__ring { width: 1rem; height: 1rem; } .spinner--lg .spinner__ring { width: 2.5rem; height: 2.5rem; border-width: 3px; }
+  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .spinner__ring { animation-duration: 1.5s; } }
+</style>

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

@@ -0,0 +1,9 @@
+export interface Props {
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;
+//# sourceMappingURL=Spinner.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Spinner.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAUD,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/feedback/ToastViewport.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+import Alert from './Alert.svelte';
+import {
+  toaster as defaultToaster,
+  type Toast,
+  type Toaster,
+} from './toast.js';
+
+export interface Props {
+  toaster?: Toaster;
+  position?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+  class?: string;
+}
+let {
+  toaster = defaultToaster,
+  position = 'bottom-end',
+  class: className = '',
+}: Props = $props();
+let toasts = $state<Toast[]>([]);
+
+$effect(() => toaster.subscribe((next) => (toasts = next)));
+
+async function runAction(toast: Toast) {
+  await toast.action?.run();
+  toaster.dismiss(toast.id);
+}
+</script>
+
+<section class="viewport viewport--{position} {className}" aria-label="Notifications" aria-live="polite">
+  {#each toasts as toast (toast.id)}
+    <Alert variant={toast.variant} title={toast.title} dismissible ondismiss={() => toaster.dismiss(toast.id)}>
+      {toast.message}
+      {#snippet action()}
+        {#if toast.action}<button type="button" onclick={() => runAction(toast)}>{toast.action.label}</button>{/if}
+      {/snippet}
+    </Alert>
+  {/each}
+</section>
+
+<style>
+  .viewport { position: fixed; z-index: var(--smrt-z-index-toast, 1200); display: grid; width: min(24rem, calc(100vw - 2 * var(--smrt-spacing-4))); gap: var(--smrt-spacing-2); pointer-events: none; }
+  .viewport :global(.alert) { pointer-events: auto; box-shadow: var(--smrt-elevation-3); }
+  .viewport--top-start { top: var(--smrt-spacing-4); left: var(--smrt-spacing-4); }
+  .viewport--top-end { top: var(--smrt-spacing-4); right: var(--smrt-spacing-4); }
+  .viewport--bottom-start { bottom: var(--smrt-spacing-4); left: var(--smrt-spacing-4); }
+  .viewport--bottom-end { right: var(--smrt-spacing-4); bottom: var(--smrt-spacing-4); }
+  button { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border: 1px solid currentColor; border-radius: var(--smrt-radius-small); background: transparent; color: inherit; font: inherit; cursor: pointer; }
+</style>

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

@@ -0,0 +1,10 @@
+import { type Toaster } from './toast.js';
+export interface Props {
+    toaster?: Toaster;
+    position?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    class?: string;
+}
+declare const ToastViewport: import("svelte").Component<Props, {}, "">;
+type ToastViewport = ReturnType<typeof ToastViewport>;
+export default ToastViewport;
+//# sourceMappingURL=ToastViewport.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastViewport.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ToastViewport.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,OAAO,EACb,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmCD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import ToastViewport from '../ToastViewport.svelte';
+import { createToaster } from '../toast.js';
+describe('toast', () => {
+    it('publishes, acts on, and dismisses notifications', async () => {
+        const toaster = createToaster();
+        const action = vi.fn();
+        render(ToastViewport, { props: { toaster } });
+        toaster.show({
+            message: 'Draft restored',
+            duration: 0,
+            action: { label: 'Undo', run: action },
+        });
+        expect(await screen.findByText('Draft restored')).toBeInTheDocument();
+        await userEvent.click(screen.getByRole('button', { name: 'Undo' }));
+        expect(action).toHaveBeenCalledTimes(1);
+        expect(screen.queryByText('Draft restored')).not.toBeInTheDocument();
+    });
+    it('provides success and error conveniences', () => {
+        const toaster = createToaster();
+        const seen = [];
+        toaster.subscribe((toasts) => seen.push(...toasts.map((toast) => toast.variant)));
+        toaster.success('Saved', { duration: 0 });
+        toaster.error('Failed', { duration: 0 });
+        expect(seen).toEqual(expect.arrayContaining(['success', 'error']));
+    });
+    it('restarts dismissal timing when a toast id is reused', () => {
+        vi.useFakeTimers();
+        try {
+            const toaster = createToaster();
+            let visibleIds = [];
+            toaster.subscribe((toasts) => {
+                visibleIds = toasts.map((toast) => toast.id);
+            });
+            toaster.show({ id: 'saving', message: 'Saving', duration: 1000 });
+            vi.advanceTimersByTime(500);
+            toaster.show({ id: 'saving', message: 'Still saving', duration: 1000 });
+            vi.advanceTimersByTime(500);
+            expect(visibleIds).toEqual(['saving']);
+            vi.advanceTimersByTime(500);
+            expect(visibleIds).toEqual([]);
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+});

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

@@ -1,8 +1,16 @@
 /**
  * Feedback components - User feedback and status indicators
  */
+export { default as Alert } from './Alert.svelte';
 export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as Drawer, default as Sheet } from './Drawer.svelte';
 export { default as LoadingOverlay } from './LoadingOverlay.svelte';
+export { default as Meter } from './Meter.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as Progress } from './Progress.svelte';
 export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as ToastViewport } from './ToastViewport.svelte';
+export type { Toast, ToastAction, Toaster, ToastInput, ToastVariant, } from './toast.js';
+export { createToaster, toaster } from './toast.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAKH,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EACV,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAU,EACV,YAAY,GACb,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/feedback/index.js

@@ -1,10 +1,17 @@
 /**
  * Feedback components - User feedback and status indicators
  */
+// 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.
+export { default as Alert } from './Alert.svelte';
 export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as Drawer, default as Sheet } from './Drawer.svelte';
 export { default as LoadingOverlay } from './LoadingOverlay.svelte';
+export { default as Meter } from './Meter.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as Progress } from './Progress.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.
+export { default as Spinner } from './Spinner.svelte';
+export { default as ToastViewport } from './ToastViewport.svelte';
+export { createToaster, toaster } from './toast.js';

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

@@ -0,0 +1,28 @@
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error';
+export interface ToastAction {
+    label: string;
+    run(): void | Promise<void>;
+}
+export interface Toast {
+    id: string;
+    title?: string;
+    message: string;
+    variant: ToastVariant;
+    duration: number;
+    action?: ToastAction;
+}
+export interface ToastInput extends Partial<Omit<Toast, 'id' | 'message'>> {
+    id?: string;
+    message: string;
+}
+export interface Toaster {
+    show(input: string | ToastInput): string;
+    success(message: string, input?: Omit<ToastInput, 'message' | 'variant'>): string;
+    error(message: string, input?: Omit<ToastInput, 'message' | 'variant'>): string;
+    dismiss(id: string): void;
+    clear(): void;
+    subscribe(listener: (toasts: Toast[]) => void): () => void;
+}
+export declare function createToaster(): Toaster;
+export declare const toaster: Toaster;
+//# sourceMappingURL=toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/toast.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,WAAW,UAAW,SAAQ,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC,CAAC;IACxE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IACzC,OAAO,CACL,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,GAC9C,MAAM,CAAC;IACV,KAAK,CACH,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,GAC9C,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,IAAI,IAAI,CAAC;IACd,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC5D;AAID,wBAAgB,aAAa,IAAI,OAAO,CA0DvC;AAED,eAAO,MAAM,OAAO,SAAkB,CAAC"}

package/dist/components/feedback/toast.js

@@ -0,0 +1,58 @@
+let nextToastId = 0;
+export function createToaster() {
+    let toasts = [];
+    const listeners = new Set();
+    const timers = new Map();
+    const publish = () => {
+        for (const listener of listeners)
+            listener([...toasts]);
+    };
+    function dismiss(id) {
+        const timer = timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        timers.delete(id);
+        toasts = toasts.filter((toast) => toast.id !== id);
+        publish();
+    }
+    function show(input) {
+        const normalized = typeof input === 'string' ? { message: input } : input;
+        const id = normalized.id ?? `toast-${++nextToastId}`;
+        const existingTimer = timers.get(id);
+        if (existingTimer)
+            clearTimeout(existingTimer);
+        timers.delete(id);
+        const toast = {
+            id,
+            message: normalized.message,
+            title: normalized.title,
+            variant: normalized.variant ?? 'info',
+            duration: normalized.duration ?? 5000,
+            action: normalized.action,
+        };
+        toasts = [...toasts.filter((item) => item.id !== id), toast];
+        publish();
+        if (toast.duration > 0)
+            timers.set(id, setTimeout(() => dismiss(id), toast.duration));
+        return id;
+    }
+    return {
+        show,
+        success: (message, input) => show({ ...input, message, variant: 'success' }),
+        error: (message, input) => show({ ...input, message, variant: 'error' }),
+        dismiss,
+        clear() {
+            for (const timer of timers.values())
+                clearTimeout(timer);
+            timers.clear();
+            toasts = [];
+            publish();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            listener([...toasts]);
+            return () => listeners.delete(listener);
+        },
+    };
+}
+export const toaster = createToaster();

package/dist/components/forms/Checkbox.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+import type { HTMLInputAttributes } from 'svelte/elements';
+import {
+  emitControlChange,
+  highlightControl,
+  revealControl,
+} from './control-dom.js';
+import type { ControlInteractionOptions } from './control-interaction.js';
+import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import { tryGetFormGroupContext } from './form-group-context.js';
+import { useControlRegistration } from './use-control-registration.svelte.js';
+
+export interface Props
+  extends Omit<HTMLInputAttributes, 'type' | 'class' | 'checked'> {
+  checked?: boolean;
+  indeterminate?: boolean;
+  label?: string;
+  class?: string;
+  interaction?: ControlInteractionOptions | false;
+}
+
+let {
+  checked = $bindable(false),
+  indeterminate = false,
+  label,
+  id,
+  name,
+  value,
+  disabled = false,
+  required = false,
+  class: className = '',
+  interaction,
+  onchange,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedby,
+  ...rest
+}: Props = $props();
+
+const instanceId = $props.id();
+const formGroup = tryGetFormGroupContext();
+const interactionContext = tryGetControlInteractionContext();
+let inputEl = $state<HTMLInputElement | null>(null);
+const resolvedId = $derived(
+  id ?? formGroup?.().inputId ?? `smrt-checkbox-${instanceId}`,
+);
+const resolvedDescription = $derived(
+  ariaDescribedby ?? formGroup?.().describedBy,
+);
+const resolvedInteraction = $derived.by(() => {
+  const inherited = formGroup?.().interaction;
+  if (interaction === false || inherited === false) return false;
+  return { ...(inherited ?? {}), ...(interaction ?? {}) };
+});
+const controlId = $derived(
+  resolvedInteraction === false
+    ? undefined
+    : (resolvedInteraction.id ?? name ?? resolvedId),
+);
+
+$effect(() => {
+  if (inputEl) inputEl.indeterminate = indeterminate;
+});
+
+function setChecked(next: unknown) {
+  checked =
+    typeof next === 'string'
+      ? ['true', '1', 'yes', 'on'].includes(next.toLowerCase())
+      : Boolean(next);
+  if (inputEl) emitControlChange(inputEl);
+}
+
+function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+  checked = event.currentTarget.checked;
+  onchange?.(event);
+}
+
+useControlRegistration(() => {
+  const element = inputEl;
+  const options = resolvedInteraction;
+  if (!element || options === false) return false;
+  return {
+    controlId,
+    subject: options.subject,
+    metadata: {
+      kind: 'checkbox',
+      label: formGroup?.().label ?? label ?? ariaLabel ?? undefined,
+      description: options.description ?? formGroup?.().description,
+      sensitivity: options.sensitivity ?? 'public',
+      readable: options.readable,
+      writable: options.writable,
+      constraints: { required: required === true },
+    },
+    getValue: () => checked,
+    setValue: setChecked,
+    clear: () => setChecked(false),
+    focus: () => element.focus(),
+    reveal: () => revealControl(element),
+    highlight: (durationMs) =>
+      highlightControl(element.closest('label') ?? element, durationMs),
+    validate: () => element.reportValidity(),
+    getState: () => ({
+      disabled: element.disabled,
+      readonly: false,
+      valid: element.validity.valid,
+      validationMessage: element.validationMessage || undefined,
+    }),
+  };
+});
+</script>
+
+<label
+  class="checkbox {className}"
+  class:checkbox--disabled={disabled}
+  data-smrt-control={controlId}
+  data-smrt-form={interactionContext?.formId}
+>
+  <input
+    bind:this={inputEl}
+    id={resolvedId}
+    type="checkbox"
+    {name}
+    {value}
+    {disabled}
+    {required}
+    checked={checked}
+    aria-label={ariaLabel ?? (!label && !formGroup ? 'Checkbox' : undefined)}
+    aria-describedby={resolvedDescription}
+    aria-invalid={formGroup?.().invalid ? 'true' : undefined}
+    onchange={handleChange}
+    {...rest}
+  />
+  <span class="checkbox__box" aria-hidden="true">
+    {#if indeterminate}<span class="checkbox__dash"></span>{:else if checked}<span class="checkbox__check">✓</span>{/if}
+  </span>
+  {#if label}<span class="checkbox__label">{label}</span>{/if}
+</label>
+
+<style>
+  .checkbox { display: inline-flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); cursor: pointer; color: var(--smrt-color-on-surface); }
+  .checkbox--disabled { opacity: .5; cursor: not-allowed; }
+  input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+  .checkbox__box { width: 1.125rem; height: 1.125rem; display: grid; place-items: center; border: 2px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-extra-small, 3px); background: var(--smrt-color-surface); transition: background var(--smrt-duration-short2), border-color var(--smrt-duration-short2); }
+  input:checked + .checkbox__box, input:indeterminate + .checkbox__box { background: var(--smrt-color-primary); border-color: var(--smrt-color-primary); color: var(--smrt-color-on-primary); }
+  input:focus-visible + .checkbox__box { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  .checkbox__check { font-size: .8rem; font-weight: 800; line-height: 1; }
+  .checkbox__dash { width: .6rem; height: 2px; background: currentColor; }
+  .checkbox[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
+  @media (prefers-reduced-motion: reduce) { .checkbox__box { transition: none; } }
+</style>

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

@@ -0,0 +1,13 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { ControlInteractionOptions } from './control-interaction.js';
+export interface Props extends Omit<HTMLInputAttributes, 'type' | 'class' | 'checked'> {
+    checked?: boolean;
+    indeterminate?: boolean;
+    label?: string;
+    class?: string;
+    interaction?: ControlInteractionOptions | false;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAM1E,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AA+GD,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}