svelte-comp 1.2.7 → 1.3.5

package/dist/lib/Toast.svelte

@@ -33,7 +33,7 @@
    */
   import { fade } from "svelte/transition";
   import type { ToastVariant } from "./types";
-  import { cx } from "../utils";
+  import NoticeBase from "./NoticeBase.svelte";
 
   type Props = {
     title?: string;
@@ -84,128 +84,10 @@
     }
   });
 
-  const rootClass = $derived(
-    cx(
-      "fixed bottom-4 right-4 flex items-center gap-3 px-4 py-3 rounded-[var(--radius-lg)] shadow-lg min-w-[220px] max-w-[calc(100vw-2rem)] border border-[var(--border-color-default)] backdrop-blur-sm",
-      variantClasses(variant),
-      externalClass
-    )
-  );
 </script>
 
 {#if visible}
-  <div
-    class={rootClass}
-    role="status"
-    aria-live="polite"
-    in:fade={{ duration: 200 }}
-    out:fade={{ duration: 200 }}
-  >
-    {#if showIcon}
-      <span class="w-5 h-5 flex-shrink-0" aria-hidden="true">
-        {#if variant === "success"}
-          <svg fill="none" viewBox="0 0 26 26">
-            <path
-              d="M8.5 14L11.1 16.6"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-miterlimit="10"
-              stroke-width="2"
-            />
-            <path
-              d="M18.2 10L11.6 16.6"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-miterlimit="10"
-              stroke-width="2"
-            />
-            <path
-              d="M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-miterlimit="10"
-              stroke-width="2"
-            />
-          </svg>
-        {:else if variant === "danger"}
-          <svg fill="none" viewBox="0 0 26 26">
-            <path
-              d="M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-miterlimit="10"
-              stroke-width="2"
-            />
-            <path
-              d="M9 9.5L16.7 17.3"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-miterlimit="10"
-              stroke-width="2"
-            />
-            <path
-              d="M16.7 9.5L9 17.3"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-miterlimit="10"
-              stroke-width="2"
-            />
-          </svg>
-        {:else if variant === "warning"}
-          <svg fill="none" viewBox="0 0 27 27">
-            <path
-              d="M4.6 25.925H22.5C25.2 25.925 26.8 23.022 25.6 20.6195L16.6 3.80194C15.3 1.29934 11.8 1.29934 10.5 3.80194L1.5 20.6195C0.299997 23.022 1.9 25.925 4.6 25.925Z"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-miterlimit="10"
-              stroke-width="2"
-            />
-            <path
-              d="M13.9 18.0168H13.2C12.5 18.0168 12.6 17.4162 12.6 16.7154L11.9 9.30769C11.9 8.60696 12.5 8.00635 13.2 8.00635H13.9C14.6 8.00635 15.2 8.60696 15.2 9.30769L14.5 16.7154C14.5 17.4162 14.6 18.0168 13.9 18.0168Z"
-              fill="currentColor"
-            />
-            <path
-              d="M13.5 21.9208C14.4389 21.9208 15.2 21.3382 15.2 20.6195C15.2 19.9008 14.4389 19.3181 13.5 19.3181C12.5611 19.3181 11.8 19.9008 11.8 20.6195C11.8 21.3382 12.5611 21.9208 13.5 21.9208Z"
-              fill="currentColor"
-            />
-          </svg>
-        {:else}
-          <svg fill="none" viewBox="0 0 26 26">
-            <path
-              d="M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z"
-              stroke="currentColor"
-              stroke-miterlimit="10"
-              stroke-width="2"
-            />
-            <path
-              d="M13 9.00003C13.718 9.00003 14.3 8.41801 14.3 7.70004C14.3 6.98207 13.718 6.40002 13 6.40002C12.282 6.40002 11.7 6.98207 11.7 7.70004C11.7 8.41801 12.282 9.00003 13 9.00003Z"
-              fill="currentColor"
-            />
-            <path
-              d="M13 19.7C12.2 19.7 11.6 19.1 11.6 18.4V11.6C11.6 10.9 12.2 10.3 12.9 10.3H13C13.7 10.3 14.3 10.9 14.3 11.6V18.4C14.3 19.1 13.8 19.7 13 19.7Z"
-              fill="currentColor"
-            />
-          </svg>
-        {/if}
-      </span>
-    {/if}
-
-    <div class="flex-1 min-w-0">
-      {#if title}
-        <div
-          class="font-[var(--font-weight-medium)] truncate [font-size:var(--text-md)] max-sm:[font-size:var(--text-sm)]"
-        >
-          {title}
-        </div>
-      {/if}
-      <div
-        class="line-clamp-3 [font-size:var(--text-sm)] max-sm:[font-size:var(--text-xs)]"
-        title={message}
-      >
-        {message}
-      </div>
-    </div>
-
+  {#snippet end()}
     {#if closable}
       <button
         class="opacity-70 hover:opacity-100 transition-opacity duration-[var(--transition-fast)] ml-3"
@@ -222,5 +104,20 @@
         </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

@@ -74,19 +74,19 @@
   });
 
   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",
+    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-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",
+      "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"
     )
   );

package/dist/lib/Topbar.svelte

@@ -0,0 +1,112 @@
+<!-- src/lib/Topbar.svelte -->
+<script lang="ts">
+  import { Hamburger, ThemeToggle, InstallPWA } from "../lib";
+  /**
+   * @component Topbar
+   * @description A responsive top navigation bar with optional hamburger menu and PWA install button.
+   *
+   * @prop title {string} - The title displayed in the center of the topbar
+   * @default "App"
+   *
+   * @prop menuItems {Array<{ id: string; label: string }>} - Items for the hamburger menu
+   * @default []
+   *
+   * @prop onMenuSelect {(id: string) => void} - Callback when a menu item is selected
+   * @default () => {}
+   *
+   * @prop hamburgerHeader {import("svelte").Snippet} - Custom header content for the hamburger menu
+   * @default undefined
+   *
+   * @prop hamburgerFooter {import("svelte").Snippet} - Custom footer content for the hamburger menu
+   * @default undefined
+   *
+   * @prop showHamburger {boolean} - Whether to show the hamburger menu
+   * @default false
+   *
+   * @prop children {import("svelte").Snippet} - Custom content to display in the center of the topbar
+   * @default undefined
+   *
+   * @prop right {import("svelte").Snippet} - Custom content to display on the right side of the topbar
+   * @default undefined
+   */
+
+  type Props = {
+    title?: string;
+    menuItems?: Array<{ id: string; label: string }>;
+    onMenuSelect?: (id: string) => void;
+    hamburgerHeader?: import("svelte").Snippet;
+    hamburgerFooter?: import("svelte").Snippet;
+    showHamburger?: boolean;
+    children?: import("svelte").Snippet;
+    right?: import("svelte").Snippet;
+  };
+
+  let {
+    title = "App",
+    menuItems = [],
+    onMenuSelect = () => {},
+    hamburgerHeader,
+    hamburgerFooter,
+    showHamburger = false,
+    children,
+    right,
+  }: Props = $props();
+
+  let viewportWidth = $state(0);
+  const hamburgerWidth = $derived(viewportWidth < 768 ? 250 : 300);
+  const hamburgerTextClass = $derived(viewportWidth < 768 ? "text-sm" : "text-base");
+  const isMobile = $derived(viewportWidth < 640);
+</script>
+
+{#snippet mobileHamburgerHeader()}
+  <div class="flex flex-col gap-2 items-center">
+    {@render hamburgerHeader?.()}
+    <InstallPWA alwaysShow={true} inline={true} class="w-auto self-center" />
+  </div>
+{/snippet}
+
+<svelte:window bind:innerWidth={viewportWidth} />
+
+<header
+  class="fixed top-0 left-0 right-0 z-40 grid grid-cols-[auto_1fr_auto] items-center gap-2 bg-[var(--color-bg-surface)] text-[var(--color-text-default)] border-b border-[var(--border-color-default)] font-[var(--font-sans)] px-3 h-16 w-screen max-w-none box-border sm:px-2 sm:h-14"
+>
+  <div class="flex items-center h-full min-w-0 shrink-0 sm:min-w-9">
+    {#if showHamburger}
+      {#if isMobile}
+        <Hamburger
+          header={mobileHamburgerHeader}
+          footer={hamburgerFooter}
+          menuItems={menuItems}
+          onSelect={onMenuSelect}
+          closeOnSelect={true}
+          width={hamburgerWidth}
+          class={hamburgerTextClass}
+        />
+      {:else}
+        <Hamburger
+          header={hamburgerHeader}
+          footer={hamburgerFooter}
+          menuItems={menuItems}
+          onSelect={onMenuSelect}
+          closeOnSelect={true}
+          width={hamburgerWidth}
+          class={hamburgerTextClass}
+        />
+      {/if}
+    {/if}
+  </div>
+  <div
+    class="min-w-0 flex items-center justify-center text-center text-[var(--text-md)] font-semibold overflow-hidden px-2 sm:text-[var(--text-sm)] sm:px-2 gap-2"
+  >
+    <span class="truncate max-w-full">
+      {#if children}{@render children()}{:else}{title}{/if}
+    </span>
+    {#if !isMobile}
+      <InstallPWA inline={true} class="max-w-full shrink-0" />
+    {/if}
+  </div>
+  <div class="flex items-center h-full min-w-0 shrink-0 sm:min-w-9 gap-2">
+    {@render right?.()}
+    <ThemeToggle />
+  </div>
+</header>

package/dist/lib/Topbar.svelte.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @component Topbar
+ * @description A responsive top navigation bar with optional hamburger menu and PWA install button.
+ *
+ * @prop title {string} - The title displayed in the center of the topbar
+ * @default "App"
+ *
+ * @prop menuItems {Array<{ id: string; label: string }>} - Items for the hamburger menu
+ * @default []
+ *
+ * @prop onMenuSelect {(id: string) => void} - Callback when a menu item is selected
+ * @default () => {}
+ *
+ * @prop hamburgerHeader {import("svelte").Snippet} - Custom header content for the hamburger menu
+ * @default undefined
+ *
+ * @prop hamburgerFooter {import("svelte").Snippet} - Custom footer content for the hamburger menu
+ * @default undefined
+ *
+ * @prop showHamburger {boolean} - Whether to show the hamburger menu
+ * @default false
+ *
+ * @prop children {import("svelte").Snippet} - Custom content to display in the center of the topbar
+ * @default undefined
+ *
+ * @prop right {import("svelte").Snippet} - Custom content to display on the right side of the topbar
+ * @default undefined
+ */
+type Props = {
+    title?: string;
+    menuItems?: Array<{
+        id: string;
+        label: string;
+    }>;
+    onMenuSelect?: (id: string) => void;
+    hamburgerHeader?: import("svelte").Snippet;
+    hamburgerFooter?: import("svelte").Snippet;
+    showHamburger?: boolean;
+    children?: import("svelte").Snippet;
+    right?: import("svelte").Snippet;
+};
+declare const Topbar: import("svelte").Component<Props, {}, "">;
+type Topbar = ReturnType<typeof Topbar>;
+export default Topbar;

package/dist/lib/__tests__/Accordion.test.d.ts

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

package/dist/lib/__tests__/Accordion.test.js

@@ -0,0 +1,171 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+// $lib/__tests__/Accordion.test.ts
+import { render, fireEvent } from "@testing-library/svelte";
+import { describe, it, expect, vi } from "vitest";
+import Accordion from "../Accordion.svelte";
+describe("Accordion", function () {
+    var sampleItems = [
+        { title: "Item 1", content: "Content 1" },
+        { title: "Item 2", content: "Content 2" },
+        { title: "Item 3", content: "Content 3" },
+    ];
+    it("renders all accordion items", function () {
+        var getByText = render(Accordion, {
+            props: { items: sampleItems },
+        }).getByText;
+        expect(getByText("Item 1")).toBeTruthy();
+        expect(getByText("Item 2")).toBeTruthy();
+        expect(getByText("Item 3")).toBeTruthy();
+    });
+    it("toggles item when clicked", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByText, firstButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByText = render(Accordion, {
+                        props: { items: sampleItems },
+                    }).getByText;
+                    firstButton = getByText("Item 1").closest("button");
+                    expect(firstButton.getAttribute("aria-expanded")).toBe("false");
+                    return [4 /*yield*/, fireEvent.click(firstButton)];
+                case 1:
+                    _a.sent();
+                    expect(firstButton.getAttribute("aria-expanded")).toBe("true");
+                    return [4 /*yield*/, fireEvent.click(firstButton)];
+                case 2:
+                    _a.sent();
+                    expect(firstButton.getAttribute("aria-expanded")).toBe("false");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("supports single item mode by default", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByText, firstButton, secondButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByText = render(Accordion, {
+                        props: { items: sampleItems },
+                    }).getByText;
+                    firstButton = getByText("Item 1").closest("button");
+                    secondButton = getByText("Item 2").closest("button");
+                    return [4 /*yield*/, fireEvent.click(firstButton)];
+                case 1:
+                    _a.sent();
+                    expect(firstButton.getAttribute("aria-expanded")).toBe("true");
+                    return [4 /*yield*/, fireEvent.click(secondButton)];
+                case 2:
+                    _a.sent();
+                    expect(firstButton.getAttribute("aria-expanded")).toBe("false");
+                    expect(secondButton.getAttribute("aria-expanded")).toBe("true");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("supports multiple items when multiple=true", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByText, firstButton, secondButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByText = render(Accordion, {
+                        props: { items: sampleItems, multiple: true },
+                    }).getByText;
+                    firstButton = getByText("Item 1").closest("button");
+                    secondButton = getByText("Item 2").closest("button");
+                    return [4 /*yield*/, fireEvent.click(firstButton)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, fireEvent.click(secondButton)];
+                case 2:
+                    _a.sent();
+                    expect(firstButton.getAttribute("aria-expanded")).toBe("true");
+                    expect(secondButton.getAttribute("aria-expanded")).toBe("true");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("calls onToggle callback when item is toggled", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mockOnToggle, getByText, firstButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mockOnToggle = vi.fn();
+                    getByText = render(Accordion, {
+                        props: { items: sampleItems, onToggle: mockOnToggle },
+                    }).getByText;
+                    firstButton = getByText("Item 1").closest("button");
+                    return [4 /*yield*/, fireEvent.click(firstButton)];
+                case 1:
+                    _a.sent();
+                    expect(mockOnToggle).toHaveBeenCalledWith(0, true);
+                    return [4 /*yield*/, fireEvent.click(firstButton)];
+                case 2:
+                    _a.sent();
+                    expect(mockOnToggle).toHaveBeenCalledWith(0, false);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("opens default items", function () {
+        var getByText = render(Accordion, {
+            props: { items: sampleItems, defaultOpen: [0, 1] },
+        }).getByText;
+        var firstButton = getByText("Item 1").closest("button");
+        var secondButton = getByText("Item 2").closest("button");
+        expect(firstButton.getAttribute("aria-expanded")).toBe("true");
+        expect(secondButton.getAttribute("aria-expanded")).toBe("true");
+    });
+    it("rotates chevron icon when open", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByText, button;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByText = render(Accordion, {
+                        props: { items: sampleItems },
+                    }).getByText;
+                    button = getByText("Item 1").closest("button");
+                    expect(button.getAttribute("aria-expanded")).toBe("false");
+                    return [4 /*yield*/, fireEvent.click(button)];
+                case 1:
+                    _a.sent();
+                    expect(button.getAttribute("aria-expanded")).toBe("true");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/dist/lib/__tests__/Badge.test.d.ts

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

package/dist/lib/__tests__/Badge.test.js

@@ -0,0 +1,41 @@
+// $lib/__tests__/Badge.test.ts
+import { render } from "@testing-library/svelte";
+import { describe, it, expect } from "vitest";
+import Badge from "../Badge.svelte";
+describe("Badge", function () {
+    it("renders message text", function () {
+        var getByText = render(Badge, {
+            props: { message: "Active" },
+        }).getByText;
+        expect(getByText("Active")).toBeTruthy();
+    });
+    it("hides icon by default", function () {
+        var container = render(Badge, {
+            props: { message: "No icon" },
+        }).container;
+        expect(container.querySelector('span[aria-hidden="true"]')).toBeNull();
+    });
+    it("shows icon when enabled", function () {
+        var container = render(Badge, {
+            props: { message: "Icon", showIcon: true },
+        }).container;
+        expect(container.querySelector('span[aria-hidden="true"]')).toBeTruthy();
+    });
+    it("applies variant styling classes", function () {
+        var variants = [
+            { variant: "success", token: "color-bg-success" },
+            { variant: "danger", token: "color-bg-danger" },
+            { variant: "warning", token: "color-bg-warning" },
+            { variant: "info", token: "color-bg-page" },
+        ];
+        variants.forEach(function (_a) {
+            var variant = _a.variant, token = _a.token;
+            var container = render(Badge, {
+                props: { message: "Badge", variant: variant },
+            }).container;
+            var root = container.firstElementChild;
+            expect(root.className).toContain(token);
+            expect(root.className).not.toContain("shadow-lg");
+        });
+    });
+});

package/dist/lib/__tests__/Button.test.d.ts

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