svelte-comp 1.3.3 → 1.3.6

package/dist/lib/Toast.svelte

@@ -1,123 +1,123 @@
-<!-- src/lib/Toast.svelte -->
-<script lang="ts">
-  /**
-   * @component Toast
-   * @description Lightweight notification component for transient messages.
-   *
-   * @prop title {string} - Optional title displayed above the message
-   *
-   * @prop message {string} - Toast message content
-   *
-   * @prop variant {ToastVariant} - Visual style
-   * @options success|danger|warning|info
-   * @default info
-   *
-   * @prop showIcon {boolean} - Shows an icon matching the variant
-   * @default true
-   *
-   * @prop closable {boolean} - Shows a close button
-   * @default true
-   *
-   * @prop timeout {number} - Auto-hide timeout in milliseconds
-   * @default 3000
-   *
-   * @prop onClose {() => void} - Fired when the toast closes
-   * @default () => {}
-   *
-   * @prop class {string} - Additional wrapper classes
-   * @default ""
-   *
-   * @note Automatically hides after `timeout`.
-   * @note Can be closed manually if `closable = true`.
-   * @note Variant controls color and icon style.
-   */
-  import { fade } from "svelte/transition";
-  import type { ToastVariant } from "./types";
-  import NoticeBase from "./NoticeBase.svelte";
-
-  type Props = {
-    title?: string;
-    message: string;
-    variant?: ToastVariant;
-    showIcon?: boolean;
-    closable?: boolean;
-    timeout?: number;
-    onClose?: () => void;
-    class?: string;
-  };
-
-  let {
-    title,
-    message,
-    variant = "info",
-    showIcon = true,
-    closable = true,
-    timeout = 3000,
-    onClose = () => {},
-    class: externalClass = "",
-  }: Props = $props();
-
-  let visible = $state(true);
-
-  function variantClasses(v: ToastVariant) {
-    switch (v) {
-      case "success":
-        return "bg-[var(--color-bg-success)] text-[var(--color-text-success)]";
-      case "danger":
-        return "bg-[var(--color-bg-danger)] text-[var(--color-text-danger)]";
-      case "warning":
-        return "bg-[var(--color-bg-warning)] text-[var(--color-text-warning)]";
-      default:
-        return "bg-[var(--color-bg-page)] text-[var(--color-text-default)]";
-    }
-  }
-
-  function close() {
-    visible = false;
-    onClose();
-  }
-
-  $effect(() => {
-    if (timeout > 0) {
-      const id = setTimeout(() => close(), timeout);
-      return () => clearTimeout(id);
-    }
-  });
-
-</script>
-
-{#if visible}
-  {#snippet end()}
-    {#if closable}
-      <button
-        class="opacity-70 hover:opacity-100 transition-opacity duration-[var(--transition-fast)] ml-3"
-        aria-label="Close"
-        onclick={close}
-      >
-        <svg width="24" height="24" viewBox="0 0 20 20" fill="none">
-          <path
-            d="M7 7l6 6M13 7l-6 6"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-          />
-        </svg>
-      </button>
-    {/if}
-  {/snippet}
-
-  <div
-    class={`fixed bottom-4 right-4 min-w-[220px] max-w-[calc(100vw-2rem)] ${variantClasses(variant)} ${externalClass}`}
-    in:fade={{ duration: 200 }}
-    out:fade={{ duration: 200 }}
-  >
-    <NoticeBase
-      {title}
-      {message}
-      {variant}
-      {showIcon}
-      size="md"
-      end={end}
-    />
-  </div>
-{/if}
+<!-- src/lib/Toast.svelte -->
+<script lang="ts">
+  /**
+   * @component Toast
+   * @description Lightweight notification component for transient messages.
+   *
+   * @prop title {string} - Optional title displayed above the message
+   *
+   * @prop message {string} - Toast message content
+   *
+   * @prop variant {ToastVariant} - Visual style
+   * @options success|danger|warning|info
+   * @default info
+   *
+   * @prop showIcon {boolean} - Shows an icon matching the variant
+   * @default true
+   *
+   * @prop closable {boolean} - Shows a close button
+   * @default true
+   *
+   * @prop timeout {number} - Auto-hide timeout in milliseconds
+   * @default 3000
+   *
+   * @prop onClose {() => void} - Fired when the toast closes
+   * @default () => {}
+   *
+   * @prop class {string} - Additional wrapper classes
+   * @default ""
+   *
+   * @note Automatically hides after `timeout`.
+   * @note Can be closed manually if `closable = true`.
+   * @note Variant controls color and icon style.
+   */
+  import { fade } from "svelte/transition";
+  import type { ToastVariant } from "./types";
+  import NoticeBase from "./NoticeBase.svelte";
+
+  type Props = {
+    title?: string;
+    message: string;
+    variant?: ToastVariant;
+    showIcon?: boolean;
+    closable?: boolean;
+    timeout?: number;
+    onClose?: () => void;
+    class?: string;
+  };
+
+  let {
+    title,
+    message,
+    variant = "info",
+    showIcon = true,
+    closable = true,
+    timeout = 3000,
+    onClose = () => {},
+    class: externalClass = "",
+  }: Props = $props();
+
+  let visible = $state(true);
+
+  function variantClasses(v: ToastVariant) {
+    switch (v) {
+      case "success":
+        return "bg-[var(--color-bg-success)] text-[var(--color-text-success)]";
+      case "danger":
+        return "bg-[var(--color-bg-danger)] text-[var(--color-text-danger)]";
+      case "warning":
+        return "bg-[var(--color-bg-warning)] text-[var(--color-text-warning)]";
+      default:
+        return "bg-[var(--color-bg-page)] text-[var(--color-text-default)]";
+    }
+  }
+
+  function close() {
+    visible = false;
+    onClose();
+  }
+
+  $effect(() => {
+    if (timeout > 0) {
+      const id = setTimeout(() => close(), timeout);
+      return () => clearTimeout(id);
+    }
+  });
+
+</script>
+
+{#if visible}
+  {#snippet end()}
+    {#if closable}
+      <button
+        class="opacity-70 hover:opacity-100 transition-opacity duration-[var(--transition-fast)] ml-3"
+        aria-label="Close"
+        onclick={close}
+      >
+        <svg width="24" height="24" viewBox="0 0 20 20" fill="none">
+          <path
+            d="M7 7l6 6M13 7l-6 6"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+          />
+        </svg>
+      </button>
+    {/if}
+  {/snippet}
+
+  <div
+    class={`fixed bottom-4 right-4 min-w-[220px] max-w-[calc(100vw-2rem)] ${variantClasses(variant)} ${externalClass}`}
+    in:fade={{ duration: 200 }}
+    out:fade={{ duration: 200 }}
+  >
+    <NoticeBase
+      {title}
+      {message}
+      {variant}
+      {showIcon}
+      size="md"
+      end={end}
+    />
+  </div>
+{/if}

package/dist/lib/Tooltip.svelte

@@ -1,110 +1,110 @@
-<!-- src/lib/Tooltip.svelte -->
-<script lang="ts">
-  /**
-   * @component Tooltip
-   * @description Context-aware hint for inline controls and labels.
-   *
-   * @prop children {Snippet} - Inline trigger content
-   *
-   * @prop text {string} - Tooltip text
-   *
-   * @prop position {"top" | "bottom" | "left" | "right"} - Tooltip placement
-   * @default "top"
-   *
-   * @prop delay {number} - Delay before showing the tooltip (ms)
-   * @default 300
-   *
-   * @prop open {boolean} - Forces visibility when true
-   * @default false
-   *
-   * @prop class {string} - Wrapper classes
-   * @default ""
-   *
-   * @note Wraps any inline element and shows a floating bubble with `text`.
-   * @note `open` overrides hover/focus behavior when set to `true`.
-   * @note `position` controls which side of the trigger the bubble appears on.
-   * @note `delay` adds a small pause before showing the tooltip to avoid flicker.
-   * @note `class` is applied to the root wrapper, useful for layout tweaks.
-   */
-  import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
-  import type { Position } from "./types";
-  import { cx } from "../utils";
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    children?: Snippet;
-    position?: Position;
-    delay?: number;
-    open?: boolean;
-    text?: string;
-    class?: string;
-  };
-
-  let {
-    children,
-    position = "top",
-    delay = 300,
-    open = false,
-    text = "",
-    class: externalClass = "",
-    ...rest
-  }: Props = $props();
-
-  let visible = $state(false);
-  let isHover = $state(false);
-  let isFocus = $state(false);
-  let timeout: ReturnType<typeof setTimeout> | undefined;
-
-  const show = $derived(open || isHover || isFocus);
-
-  $effect(() => {
-    if (timeout) clearTimeout(timeout);
-
-    if (show) {
-      timeout = setTimeout(() => {
-        visible = true;
-      }, delay);
-    } else {
-      visible = false;
-    }
-
-    return () => {
-      if (timeout) clearTimeout(timeout);
-    };
-  });
-
-  const positionClass: Record<Position, string> = {
-    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-    left: "right-full top-1/2 -translate-y-1/2 mr-2",
-    right: "left-full top-1/2 -translate-y-1/2 ml-2",
-  };
-
-  const rootClass = $derived(cx("relative inline-block", externalClass));
-
-  const bubbleClass = $derived(
-    cx(
-      "absolute z-20 p-0.5 italic text-xs font-medium whitespace-nowrap rounded-[var(--radius-xs)]",
-      "bg-[var(--color-bg-surface)] text-[var(--color-text-default)] shadow-lg border border-[var(--border-color-default)]",
-      "transition-opacity duration-150 ease-linear",
-      visible ? "opacity-100" : "opacity-0 pointer-events-none"
-    )
-  );
-</script>
-
-<div
-  class={rootClass}
-  onmouseenter={() => (isHover = true)}
-  onmouseleave={() => (isHover = false)}
-  onfocus={() => (isFocus = true)}
-  onblur={() => (isFocus = false)}
-  {...rest}
->
-  {@render children?.()}
-
-  {#if text && visible}
-    <div role="tooltip" class={cx(bubbleClass, positionClass[position])}>
-      {text}
-    </div>
-  {/if}
-</div>
+<!-- src/lib/Tooltip.svelte -->
+<script lang="ts">
+  /**
+   * @component Tooltip
+   * @description Context-aware hint for inline controls and labels.
+   *
+   * @prop children {Snippet} - Inline trigger content
+   *
+   * @prop text {string} - Tooltip text
+   *
+   * @prop position {"top" | "bottom" | "left" | "right"} - Tooltip placement
+   * @default "top"
+   *
+   * @prop delay {number} - Delay before showing the tooltip (ms)
+   * @default 300
+   *
+   * @prop open {boolean} - Forces visibility when true
+   * @default false
+   *
+   * @prop class {string} - Wrapper classes
+   * @default ""
+   *
+   * @note Wraps any inline element and shows a floating bubble with `text`.
+   * @note `open` overrides hover/focus behavior when set to `true`.
+   * @note `position` controls which side of the trigger the bubble appears on.
+   * @note `delay` adds a small pause before showing the tooltip to avoid flicker.
+   * @note `class` is applied to the root wrapper, useful for layout tweaks.
+   */
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { Position } from "./types";
+  import { cx } from "../utils";
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+    position?: Position;
+    delay?: number;
+    open?: boolean;
+    text?: string;
+    class?: string;
+  };
+
+  let {
+    children,
+    position = "top",
+    delay = 300,
+    open = false,
+    text = "",
+    class: externalClass = "",
+    ...rest
+  }: Props = $props();
+
+  let visible = $state(false);
+  let isHover = $state(false);
+  let isFocus = $state(false);
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+
+  const show = $derived(open || isHover || isFocus);
+
+  $effect(() => {
+    if (timeout) clearTimeout(timeout);
+
+    if (show) {
+      timeout = setTimeout(() => {
+        visible = true;
+      }, delay);
+    } else {
+      visible = false;
+    }
+
+    return () => {
+      if (timeout) clearTimeout(timeout);
+    };
+  });
+
+  const positionClass: Record<Position, string> = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-[var(--spacing-sm)]",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-[var(--spacing-sm)]",
+    left: "right-full top-1/2 -translate-y-1/2 mr-[var(--spacing-sm)]",
+    right: "left-full top-1/2 -translate-y-1/2 ml-[var(--spacing-sm)]",
+  };
+
+  const rootClass = $derived(cx("relative inline-block", externalClass));
+
+  const bubbleClass = $derived(
+    cx(
+      "absolute z-20 p-[calc(var(--spacing-xs)/2)] italic [font-size:var(--text-xs)] font-medium whitespace-nowrap rounded-[var(--radius-sm)]",
+      "bg-[var(--color-bg-surface)] text-[var(--color-text-default)] shadow-[0_8px_16px_var(--shadow-color)] border border-[var(--border-color-default)]",
+      "transition-opacity duration-[var(--transition-fast)] ease-linear",
+      visible ? "opacity-100" : "opacity-0 pointer-events-none"
+    )
+  );
+</script>
+
+<div
+  class={rootClass}
+  onmouseenter={() => (isHover = true)}
+  onmouseleave={() => (isHover = false)}
+  onfocus={() => (isFocus = true)}
+  onblur={() => (isFocus = false)}
+  {...rest}
+>
+  {@render children?.()}
+
+  {#if text && visible}
+    <div role="tooltip" class={cx(bubbleClass, positionClass[position])}>
+      {text}
+    </div>
+  {/if}
+</div>