svelte-comp 1.3.3 → 1.3.6

package/dist/lib/Topbar.svelte

@@ -1,112 +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>
-
+<!-- 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 pt-10">
+  <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>
+
+<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/__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 {};