@marwes-ui/svelte 1.3.0

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

@@ -0,0 +1,7 @@
+export { default as Tab } from "./Tab.svelte";
+export { default as TabPanel } from "./TabPanel.svelte";
+export { default as TabGroup } from "./TabGroup.svelte";
+export { default as NavigationTabs } from "./NavigationTabs.svelte";
+export { default as ContentTabs } from "./ContentTabs.svelte";
+export { default as SettingsTabs } from "./SettingsTabs.svelte";
+export type { TabProps, TabPanelProps, TabGroupProps, TabGroupItem, NavigationTabsProps, ContentTabsProps, SettingsTabsProps, } from "./types.js";

package/dist/components/tab/index.js

@@ -0,0 +1,6 @@
+export { default as Tab } from "./Tab.svelte";
+export { default as TabPanel } from "./TabPanel.svelte";
+export { default as TabGroup } from "./TabGroup.svelte";
+export { default as NavigationTabs } from "./NavigationTabs.svelte";
+export { default as ContentTabs } from "./ContentTabs.svelte";
+export { default as SettingsTabs } from "./SettingsTabs.svelte";

package/dist/components/tab/types.d.ts

@@ -0,0 +1,36 @@
+import type { TabOptions } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface TabProps extends TabOptions {
+    children?: Snippet;
+    class?: string;
+    id?: string;
+    onclick?: (e: MouseEvent) => void;
+}
+export interface TabPanelProps {
+    id: string;
+    tabId: string;
+    hidden?: boolean;
+    children?: Snippet;
+    class?: string;
+}
+export interface TabGroupItem {
+    value: string;
+    label: string;
+    panel: Snippet | string;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+export interface TabGroupProps {
+    id?: string;
+    label?: string;
+    ariaLabel?: string;
+    tabs: TabGroupItem[];
+    activeTab?: string;
+    defaultActiveTab?: string;
+    onactivetabchange?: (value: string) => void;
+    dataAttributes?: Record<string, string>;
+    class?: string;
+}
+export type NavigationTabsProps = TabGroupProps;
+export type ContentTabsProps = TabGroupProps;
+export type SettingsTabsProps = TabGroupProps;

package/dist/components/tab/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/toast/ErrorToast.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { IconName, createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import Icon from "../icon/Icon.svelte";
+  import Toast from "./Toast.svelte";
+  import type { ToastProps } from "./types.js";
+
+  let { dataAttributes, variant, ariaLive, icon, ...props }: ToastProps = $props();
+  const hasCustomIcon = $derived(icon !== undefined);
+</script>
+
+<Toast
+  {...props}
+  variant={variant ?? "outline"}
+  ariaLive={ariaLive ?? "assertive"}
+  dataAttributes={{ ...dataAttributes, ...createPurposeSemanticAttributes("error-toast") }}
+>
+  {#snippet icon()}
+    {#if hasCustomIcon}
+      {@render icon?.()}
+    {:else}
+      <Icon name={IconName.XCircle} decorative />
+    {/if}
+  {/snippet}
+</Toast>

package/dist/components/toast/ErrorToast.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToastProps } from "./types.js";
+declare const ErrorToast: import("svelte").Component<ToastProps, {}, "">;
+type ErrorToast = ReturnType<typeof ErrorToast>;
+export default ErrorToast;

package/dist/components/toast/InfoToast.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { IconName, createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import Icon from "../icon/Icon.svelte";
+  import Toast from "./Toast.svelte";
+  import type { ToastProps } from "./types.js";
+
+  let { dataAttributes, variant, ariaLive, icon, ...props }: ToastProps = $props();
+  const hasCustomIcon = $derived(icon !== undefined);
+</script>
+
+<Toast
+  {...props}
+  variant={variant ?? "outline"}
+  ariaLive={ariaLive ?? "polite"}
+  dataAttributes={{ ...dataAttributes, ...createPurposeSemanticAttributes("info-toast") }}
+>
+  {#snippet icon()}
+    {#if hasCustomIcon}
+      {@render icon?.()}
+    {:else}
+      <Icon name={IconName.Info} decorative />
+    {/if}
+  {/snippet}
+</Toast>

package/dist/components/toast/InfoToast.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToastProps } from "./types.js";
+declare const InfoToast: import("svelte").Component<ToastProps, {}, "">;
+type InfoToast = ReturnType<typeof InfoToast>;
+export default InfoToast;

package/dist/components/toast/README.md

@@ -0,0 +1,35 @@
+# Toast
+
+Svelte toast components are aligned with the React and Vue toast family.
+
+## Public Components
+
+- `Toast` — atom for a single live-region notification.
+- `ToastContainer` — positioned viewport that renders managed toasts.
+- `ToastProvider` — context provider with the imperative toast controller.
+- `SuccessToast` — purpose toast with success semantics.
+- `ErrorToast` — purpose toast with assertive error semantics.
+- `WarningToast` — purpose toast with warning semantics.
+- `InfoToast` — purpose toast with informational semantics.
+
+## Shared Contract
+
+- Uses `createToastRecipe` from `@marwes-ui/core`.
+- Wires `role="status"` or `role="alert"` from `ariaLive`.
+- Sets `aria-live` and `aria-atomic="true"`.
+- Supports icon, action, and dismiss slots.
+- Renders a dismiss button only when `ondismiss` is provided.
+- Applies canonical `data-component`, `data-purpose`, and `data-intent` attributes.
+- Keeps `ToastContainer` placement classes and `maxVisible` behavior aligned with React and Vue.
+- Keeps provider-managed toasts on the shared imperative API: `show()`, `dismiss()`, and `clear()`.
+- Defaults provider-managed toast duration to `4000ms`.
+- Keeps `duration={null}` toasts visible until product code dismisses them.
+- Pauses auto-dismiss while pointer hover or focus is inside the toast, then resumes with remaining time.
+
+## Svelte Notes
+
+- `useToast()` uses Svelte context through `getContext` and `setContext`.
+- Icon, action, and children content use Svelte snippets.
+- `ManagedToast.message` is a string, while React/Vue use framework-native node children.
+- Event naming follows Svelte conventions: `ondismiss`.
+- Class passthrough uses `class`, matching Svelte component conventions.

package/dist/components/toast/SuccessToast.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { IconName, createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import Icon from "../icon/Icon.svelte";
+  import Toast from "./Toast.svelte";
+  import type { ToastProps } from "./types.js";
+
+  let { dataAttributes, variant, ariaLive, icon, ...props }: ToastProps = $props();
+
+  const hasCustomIcon = $derived(icon !== undefined);
+</script>
+
+<Toast
+  {...props}
+  variant={variant ?? "outline"}
+  ariaLive={ariaLive ?? "polite"}
+  dataAttributes={{ ...dataAttributes, ...createPurposeSemanticAttributes("success-toast") }}
+>
+  {#snippet icon()}
+    {#if hasCustomIcon}
+      {@render icon?.()}
+    {:else}
+      <Icon name={IconName.Check} decorative />
+    {/if}
+  {/snippet}
+</Toast>

package/dist/components/toast/SuccessToast.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToastProps } from "./types.js";
+declare const SuccessToast: import("svelte").Component<ToastProps, {}, "">;
+type SuccessToast = ReturnType<typeof SuccessToast>;
+export default SuccessToast;

package/dist/components/toast/Toast.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { createToastRecipe } from "@marwes-ui/core";
+  import { mergeClass } from "../../internal/merge-class.js";
+  import type { ToastProps } from "./types.js";
+
+  let {
+    children,
+    icon,
+    action,
+    ondismiss,
+    class: className,
+    id,
+    dataAttributes,
+    ...coreProps
+  }: ToastProps = $props();
+
+  const kit = $derived(createToastRecipe(coreProps));
+  const mergedClass = $derived(mergeClass(kit.className, className));
+</script>
+
+<div
+  {id}
+  class={mergedClass}
+  role={kit.a11y.role}
+  aria-live={kit.a11y.ariaLive}
+  aria-atomic="true"
+  {...kit.dataAttributes}
+  {...dataAttributes}
+>
+  {#if icon}
+    <span class="mw-toast__icon" aria-hidden="true">
+      {@render icon()}
+    </span>
+  {/if}
+  <div class="mw-toast__body">
+    <span class="mw-toast__text">
+      {@render children?.()}
+    </span>
+    {#if action}
+      <span class="mw-toast__action">
+        {@render action()}
+      </span>
+    {/if}
+  </div>
+  {#if ondismiss}
+    <button
+      type="button"
+      class="mw-toast__dismiss"
+      aria-label="Dismiss"
+      onclick={ondismiss}
+    ></button>
+  {/if}
+</div>

package/dist/components/toast/Toast.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToastProps } from "./types.js";
+declare const Toast: import("svelte").Component<ToastProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/toast/ToastContainer.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+  import { mergeClass } from "../../internal/merge-class.js";
+  import ErrorToast from "./ErrorToast.svelte";
+  import InfoToast from "./InfoToast.svelte";
+  import SuccessToast from "./SuccessToast.svelte";
+  import Toast from "./Toast.svelte";
+  import WarningToast from "./WarningToast.svelte";
+  import type { ManagedToast, ToastContainerProps } from "./types.js";
+
+  let {
+    toasts,
+    placement = "top-right",
+    maxVisible,
+    class: className,
+    ondismiss,
+  }: ToastContainerProps = $props();
+
+  const mergedClass = $derived(
+    mergeClass("mw-toast-container", `mw-toast-container--${placement}`, className)
+  );
+
+  const visibleToasts = $derived(
+    maxVisible && maxVisible > 0 ? toasts.slice(-maxVisible) : toasts
+  );
+
+  type TimerState = {
+    duration: number | null | undefined;
+    focusInside: boolean;
+    handle: ReturnType<typeof setTimeout> | null;
+    pointerInside: boolean;
+    remaining: number | null;
+    startedAt: number | null;
+  };
+
+  const timerStates = new Map<string, TimerState>();
+
+  function getTimerState(toast: ManagedToast): TimerState {
+    let state = timerStates.get(toast.id);
+    if (!state) {
+      state = {
+        duration: undefined,
+        focusInside: false,
+        handle: null,
+        pointerInside: false,
+        remaining: null,
+        startedAt: null,
+      };
+      timerStates.set(toast.id, state);
+    }
+    return state;
+  }
+
+  function clearDismissTimer(state: TimerState): void {
+    if (state.handle === null) return;
+    clearTimeout(state.handle);
+    state.handle = null;
+    state.startedAt = null;
+  }
+
+  function scheduleDismissTimer(toast: ManagedToast, delay: number): void {
+    const state = getTimerState(toast);
+    if (!ondismiss || delay <= 0 || state.pointerInside || state.focusInside || state.handle !== null) {
+      return;
+    }
+
+    state.startedAt = Date.now();
+    state.handle = setTimeout(() => {
+      state.handle = null;
+      state.startedAt = null;
+      state.remaining = 0;
+      ondismiss?.(toast.id);
+    }, delay);
+  }
+
+  function pauseDismissTimer(toast: ManagedToast): void {
+    const state = getTimerState(toast);
+    if (state.handle === null || state.startedAt === null) return;
+
+    const elapsed = Date.now() - state.startedAt;
+    state.remaining = Math.max((state.remaining ?? 0) - elapsed, 0);
+    clearDismissTimer(state);
+  }
+
+  function resumeDismissTimer(toast: ManagedToast): void {
+    const state = getTimerState(toast);
+    if (state.pointerInside || state.focusInside || state.remaining === null || state.remaining <= 0) {
+      return;
+    }
+
+    scheduleDismissTimer(toast, state.remaining);
+  }
+
+  $effect(() => {
+    const visibleIds = new Set(visibleToasts.map((toast) => toast.id));
+
+    for (const [id, state] of timerStates) {
+      if (!visibleIds.has(id)) {
+        clearDismissTimer(state);
+        timerStates.delete(id);
+      }
+    }
+
+    for (const toast of visibleToasts) {
+      const state = getTimerState(toast);
+      if (state.duration === toast.duration) continue;
+
+      clearDismissTimer(state);
+      state.duration = toast.duration;
+      state.focusInside = false;
+      state.pointerInside = false;
+      state.remaining = toast.duration ?? null;
+
+      if (toast.duration !== null && toast.duration !== undefined && toast.duration > 0) {
+        scheduleDismissTimer(toast, toast.duration);
+      }
+    }
+  });
+</script>
+
+<div class={mergedClass}>
+  {#each visibleToasts as toast (toast.id)}
+    <div
+      class="mw-toast-container__item"
+      role="presentation"
+      onmouseenter={() => {
+        const state = getTimerState(toast);
+        state.pointerInside = true;
+        pauseDismissTimer(toast);
+      }}
+      onmouseleave={() => {
+        const state = getTimerState(toast);
+        state.pointerInside = false;
+        resumeDismissTimer(toast);
+      }}
+      onfocusin={() => {
+        const state = getTimerState(toast);
+        state.focusInside = true;
+        pauseDismissTimer(toast);
+      }}
+      onfocusout={(event) => {
+        const related = event.relatedTarget;
+        if (related instanceof Node && event.currentTarget.contains(related)) return;
+
+        const state = getTimerState(toast);
+        state.focusInside = false;
+        resumeDismissTimer(toast);
+      }}
+    >
+      {#if toast.intent === "success"}
+        <SuccessToast
+          id={toast.id}
+          {...(toast.class ? { class: toast.class } : {})}
+          {...(toast.variant ? { variant: toast.variant } : {})}
+          {...(toast.ariaLive ? { ariaLive: toast.ariaLive } : {})}
+          {...(ondismiss ? { ondismiss: () => ondismiss(toast.id) } : {})}
+          {...(toast.dataAttributes ? { dataAttributes: toast.dataAttributes } : {})}
+        >
+          {#snippet children()}{toast.message}{/snippet}
+        </SuccessToast>
+      {:else if toast.intent === "error"}
+        <ErrorToast
+          id={toast.id}
+          {...(toast.class ? { class: toast.class } : {})}
+          {...(toast.variant ? { variant: toast.variant } : {})}
+          {...(toast.ariaLive ? { ariaLive: toast.ariaLive } : {})}
+          {...(ondismiss ? { ondismiss: () => ondismiss(toast.id) } : {})}
+          {...(toast.dataAttributes ? { dataAttributes: toast.dataAttributes } : {})}
+        >
+          {#snippet children()}{toast.message}{/snippet}
+        </ErrorToast>
+      {:else if toast.intent === "warning"}
+        <WarningToast
+          id={toast.id}
+          {...(toast.class ? { class: toast.class } : {})}
+          {...(toast.variant ? { variant: toast.variant } : {})}
+          {...(toast.ariaLive ? { ariaLive: toast.ariaLive } : {})}
+          {...(ondismiss ? { ondismiss: () => ondismiss(toast.id) } : {})}
+          {...(toast.dataAttributes ? { dataAttributes: toast.dataAttributes } : {})}
+        >
+          {#snippet children()}{toast.message}{/snippet}
+        </WarningToast>
+      {:else if toast.intent === "info"}
+        <InfoToast
+          id={toast.id}
+          {...(toast.class ? { class: toast.class } : {})}
+          {...(toast.variant ? { variant: toast.variant } : {})}
+          {...(toast.ariaLive ? { ariaLive: toast.ariaLive } : {})}
+          {...(ondismiss ? { ondismiss: () => ondismiss(toast.id) } : {})}
+          {...(toast.dataAttributes ? { dataAttributes: toast.dataAttributes } : {})}
+        >
+          {#snippet children()}{toast.message}{/snippet}
+        </InfoToast>
+      {:else}
+        <Toast
+          id={toast.id}
+          {...(toast.class ? { class: toast.class } : {})}
+          {...(toast.variant ? { variant: toast.variant } : {})}
+          {...(toast.ariaLive ? { ariaLive: toast.ariaLive } : {})}
+          {...(ondismiss ? { ondismiss: () => ondismiss(toast.id) } : {})}
+          {...(toast.dataAttributes ? {
+            dataAttributes: {
+              ...toast.dataAttributes,
+              ...(toast.intent ? { "data-intent": toast.intent } : {}),
+            },
+          } : (toast.intent ? { dataAttributes: { "data-intent": toast.intent } } : {}))}
+        >
+          {#snippet children()}{toast.message}{/snippet}
+        </Toast>
+      {/if}
+    </div>
+  {/each}
+</div>

package/dist/components/toast/ToastContainer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToastContainerProps } from "./types.js";
+declare const ToastContainer: import("svelte").Component<ToastContainerProps, {}, "">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;

package/dist/components/toast/ToastProvider.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" module>
+  import { getContext, setContext } from "svelte";
+  import type { ToastController } from "./types.js";
+
+  const TOAST_CONTEXT_KEY = Symbol("marwes-toast");
+
+  export function setToastContext(controller: ToastController): void {
+    setContext(TOAST_CONTEXT_KEY, controller);
+  }
+
+  export function useToast(): ToastController {
+    const ctx = getContext<ToastController | undefined>(TOAST_CONTEXT_KEY);
+    if (!ctx) {
+      throw new Error("ToastProvider is missing. Wrap your app in <ToastProvider />.");
+    }
+    return ctx;
+  }
+</script>
+
+<script lang="ts">
+  import ToastContainer from "./ToastContainer.svelte";
+  import type { ManagedToast, ShowToastOptions, ToastProviderProps } from "./types.js";
+
+  let {
+    children,
+    placement,
+    maxVisible,
+    defaultDuration,
+    class: className,
+  }: ToastProviderProps = $props();
+
+  let toasts = $state<ManagedToast[]>([]);
+  let nextId = $state(0);
+
+  function show(options: ShowToastOptions): string {
+    nextId += 1;
+    const id = `mw-toast-${nextId}`;
+    const duration = options.duration === undefined
+      ? (defaultDuration === undefined ? 4000 : defaultDuration)
+      : options.duration;
+
+    toasts = [...toasts, { ...options, id, duration }];
+
+    return id;
+  }
+
+  function dismiss(id: string): void {
+    const toast = toasts.find((t) => t.id === id);
+    toast?.ondismiss?.();
+    toasts = toasts.filter((t) => t.id !== id);
+  }
+
+  function clear(): void {
+    for (const toast of toasts) {
+      toast.ondismiss?.();
+    }
+    toasts = [];
+  }
+
+  const controller: ToastController = { show, dismiss, clear };
+  setToastContext(controller);
+</script>
+
+{@render children?.()}
+<ToastContainer
+  {toasts}
+  ondismiss={dismiss}
+  {...(placement ? { placement } : {})}
+  {...(maxVisible !== undefined ? { maxVisible } : {})}
+  {...(className ? { class: className } : {})}
+/>

package/dist/components/toast/ToastProvider.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ToastController } from "./types.js";
+export declare function setToastContext(controller: ToastController): void;
+export declare function useToast(): ToastController;
+import type { ToastProviderProps } from "./types.js";
+declare const ToastProvider: import("svelte").Component<ToastProviderProps, {}, "">;
+type ToastProvider = ReturnType<typeof ToastProvider>;
+export default ToastProvider;

package/dist/components/toast/WarningToast.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { IconName, createPurposeSemanticAttributes } from "@marwes-ui/core";
+  import Icon from "../icon/Icon.svelte";
+  import Toast from "./Toast.svelte";
+  import type { ToastProps } from "./types.js";
+
+  let { dataAttributes, variant, ariaLive, icon, ...props }: ToastProps = $props();
+  const hasCustomIcon = $derived(icon !== undefined);
+</script>
+
+<Toast
+  {...props}
+  variant={variant ?? "outline"}
+  ariaLive={ariaLive ?? "polite"}
+  dataAttributes={{ ...dataAttributes, ...createPurposeSemanticAttributes("warning-toast") }}
+>
+  {#snippet icon()}
+    {#if hasCustomIcon}
+      {@render icon?.()}
+    {:else}
+      <Icon name={IconName.AlertTriangle} decorative />
+    {/if}
+  {/snippet}
+</Toast>

package/dist/components/toast/WarningToast.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToastProps } from "./types.js";
+declare const WarningToast: import("svelte").Component<ToastProps, {}, "">;
+type WarningToast = ReturnType<typeof WarningToast>;
+export default WarningToast;

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

@@ -0,0 +1,9 @@
+export { default as Toast } from "./Toast.svelte";
+export { default as ToastContainer } from "./ToastContainer.svelte";
+export { default as ToastProvider } from "./ToastProvider.svelte";
+export { useToast } from "./ToastProvider.svelte";
+export { default as SuccessToast } from "./SuccessToast.svelte";
+export { default as ErrorToast } from "./ErrorToast.svelte";
+export { default as WarningToast } from "./WarningToast.svelte";
+export { default as InfoToast } from "./InfoToast.svelte";
+export type { ManagedToast, ShowToastOptions, ToastContainerProps, ToastController, ToastProps, ToastProviderProps, SuccessToastProps, ErrorToastProps, WarningToastProps, InfoToastProps, } from "./types.js";

package/dist/components/toast/index.js

@@ -0,0 +1,8 @@
+export { default as Toast } from "./Toast.svelte";
+export { default as ToastContainer } from "./ToastContainer.svelte";
+export { default as ToastProvider } from "./ToastProvider.svelte";
+export { useToast } from "./ToastProvider.svelte";
+export { default as SuccessToast } from "./SuccessToast.svelte";
+export { default as ErrorToast } from "./ErrorToast.svelte";
+export { default as WarningToast } from "./WarningToast.svelte";
+export { default as InfoToast } from "./InfoToast.svelte";

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

@@ -0,0 +1,48 @@
+import type { ToastIntent, ToastOptions, ToastPlacement, ToastVariant } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+export interface ToastProps extends ToastOptions {
+    children?: Snippet;
+    icon?: Snippet;
+    action?: Snippet;
+    ondismiss?: () => void;
+    class?: string;
+    id?: string;
+    dataAttributes?: Record<string, string>;
+}
+export interface ManagedToast {
+    id: string;
+    message: string;
+    icon?: Snippet;
+    action?: Snippet;
+    ondismiss?: () => void;
+    class?: string;
+    variant?: ToastVariant;
+    ariaLive?: "polite" | "assertive";
+    intent?: ToastIntent;
+    duration?: number | null;
+    dataAttributes?: Record<string, string>;
+}
+export type ShowToastOptions = Omit<ManagedToast, "id">;
+export interface ToastContainerProps {
+    toasts: ManagedToast[];
+    placement?: ToastPlacement;
+    maxVisible?: number;
+    class?: string;
+    ondismiss?: (id: string) => void;
+}
+export interface ToastProviderProps {
+    children?: Snippet;
+    placement?: ToastPlacement;
+    maxVisible?: number;
+    defaultDuration?: number | null;
+    class?: string;
+}
+export interface ToastController {
+    show: (toast: ShowToastOptions) => string;
+    dismiss: (id: string) => void;
+    clear: () => void;
+}
+export type SuccessToastProps = ToastProps;
+export type ErrorToastProps = ToastProps;
+export type WarningToastProps = ToastProps;
+export type InfoToastProps = ToastProps;

package/dist/components/toast/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tooltip/README.md

@@ -0,0 +1,22 @@
+# Tooltip — Parity Findings
+
+## Svelte vs React/Vue
+
+### Aligned ✅
+- `Tooltip` atom with `createTooltipRecipe`
+- `role="tooltip"`, CSS vars for positioning
+- `TooltipGroup` molecule with icon trigger, hover/focus reveal
+- Controlled (`open`) and uncontrolled (`defaultOpen`) modes
+- `onopenchange` callback
+- Dismiss on pointer leave, focus leave, and Escape
+- Exit animation delay (160ms) before unmounting
+- Default icon: `IconName.HelpCircle`, swappable via `icon` prop
+- `triggerLabel` for accessible trigger button name
+- `aria-describedby` wired from trigger to tooltip when open
+
+### Svelte-specific
+- `content` prop accepts `Snippet | string` (React uses `ReactNode`)
+- Uses `$props.id()` for stable unique IDs
+
+### Notes
+- Tooltip is for non-interactive contextual help only. For interactive content, use a popover or dialog pattern.