@mohasinac/appkit 3.8.2 → 3.9.0

package/dist/ui/components/SectionTabs.style.css

@@ -1,164 +0,0 @@
-.appkit-section-tabs {
-  position: sticky;
-  top: var(--header-height, 0px);
-  z-index: var(--appkit-z-raised);
-  background: var(--appkit-color-surface);
-  border-bottom: 1px solid var(--appkit-color-border);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-}
-
-.dark .appkit-section-tabs {
-  background: var(--appkit-color-bg);
-  border-bottom-color: var(--appkit-color-border);
-}
-
-.appkit-section-tabs--admin {
-  background-image: linear-gradient(to right, rgba(250, 245, 255, 0.75), transparent, rgba(238, 242, 255, 0.45));
-}
-
-.appkit-section-tabs--user {
-  background-image: linear-gradient(to right, rgba(238, 242, 255, 0.75), transparent, rgba(240, 253, 250, 0.45));
-}
-
-.dark .appkit-section-tabs--admin {
-  background-image: linear-gradient(to right, rgba(88, 28, 135, 0.2), transparent, rgba(49, 46, 129, 0.12));
-}
-
-.dark .appkit-section-tabs--user {
-  background-image: linear-gradient(to right, rgba(30, 58, 138, 0.2), transparent, rgba(19, 78, 74, 0.12));
-}
-
-.appkit-section-tabs__container {
-  width: min(80rem, 100%);
-  margin: 0 auto;
-}
-
-.appkit-section-tabs__scroll {
-  overflow-x: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  touch-action: pan-x;
-  padding-bottom: 0.125rem;
-}
-
-.appkit-section-tabs__scroll::-webkit-scrollbar {
-  display: none;
-}
-
-.appkit-section-tabs__scroll--padded {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-section-tabs__scroll--padded {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-}
-
-.appkit-section-tabs__track {
-  display: flex;
-  min-width: max-content;
-}
-
-@media (min-width: 1024px) {
-  .appkit-section-tabs__track--full {
-    min-width: 0;
-    width: 100%;
-  }
-}
-
-.appkit-section-tabs__tab {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  flex: 1;
-  min-width: fit-content;
-  flex-shrink: 0;
-  white-space: nowrap;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border: 1px solid transparent;
-  border-radius: 9999px;
-  padding: 0.625rem 1rem;
-  transition: all 0.2s ease;
-}
-
-@media (min-width: 640px) {
-  .appkit-section-tabs__tab {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-}
-
-.appkit-section-tabs__tab:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.55);
-}
-
-.dark .appkit-section-tabs__tab:focus-visible {
-  box-shadow: 0 0 0 2px rgba(240, 99, 185, 0.6);
-}
-
-.appkit-section-tabs__tab--active {
-  border-color: rgba(80, 156, 2, 0.35);
-  background: var(--appkit-color-secondary-600);
-  color: var(--appkit-color-text-on-primary);
-  box-shadow: 0 10px 24px -12px rgba(34, 197, 94, 0.7);
-}
-
-.dark .appkit-section-tabs__tab--active {
-  border-color: rgba(233, 30, 140, 0.4);
-  background: var(--appkit-color-primary);
-  color: var(--appkit-color-text-on-primary);
-  box-shadow: 0 10px 24px -12px rgba(236, 72, 153, 0.9);
-}
-
-.appkit-section-tabs__tab--inactive {
-  border-color: rgba(80, 156, 2, 0.2);
-  background: rgba(80, 156, 2, 0.1);
-  color: var(--appkit-color-secondary-600);
-}
-
-.appkit-section-tabs__tab--inactive:hover {
-  background: rgba(80, 156, 2, 0.18);
-}
-
-.dark .appkit-section-tabs__tab--inactive {
-  border-color: var(--appkit-color-border);
-  background: rgba(30, 41, 59, 0.8);
-  color: var(--appkit-color-primary-300);
-}
-
-.dark .appkit-section-tabs__tab--inactive:hover {
-  background: rgba(51, 65, 85, 0.9);
-  color: var(--appkit-color-primary-100);
-}
-
-.appkit-section-tabs__icon {
-  flex-shrink: 0;
-}
-
-.appkit-section-tabs__count {
-  flex-shrink: 0;
-  font-size: 0.75rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: 9999px;
-}
-
-.appkit-section-tabs__count--active {
-  background: rgba(255, 255, 255, 0.2);
-  color: var(--appkit-color-text-on-primary);
-}
-
-.appkit-section-tabs__count--inactive {
-  background: var(--appkit-color-zinc-100);
-  color: var(--appkit-color-zinc-500);
-}
-
-.dark .appkit-section-tabs__count--inactive {
-  background: var(--appkit-color-slate-700);
-  color: var(--appkit-color-slate-300);
-}

package/dist/ui/components/__tests__/BulkActionBar.test.d.ts

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

package/dist/ui/components/__tests__/BulkActionBar.test.js

@@ -1,96 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { BulkActionBar } from "../BulkActionBar";
-const actions = [
-    { id: "publish", label: "Publish", onClick: vi.fn() },
-    { id: "delete", label: "Delete", variant: "danger", onClick: vi.fn() },
-];
-describe("BulkActionBar", () => {
-    it("renders nothing when selectedCount is 0", () => {
-        render(_jsx(BulkActionBar, { selectedCount: 0, actions: actions }));
-        expect(screen.queryByTestId("bulk-action-bar")).toBeNull();
-    });
-    it("renders the bar when selectedCount > 0", () => {
-        render(_jsx(BulkActionBar, { selectedCount: 3, actions: actions }));
-        expect(screen.getByTestId("bulk-action-bar")).toBeTruthy();
-    });
-    it("shows the selected count in the count pill", () => {
-        render(_jsx(BulkActionBar, { selectedCount: 5, actions: actions }));
-        expect(screen.getByTestId("bulk-selected-count").textContent).toContain("5");
-    });
-    it("calls onClearSelection when the count pill button is clicked", () => {
-        const onClear = vi.fn();
-        render(_jsx(BulkActionBar, { selectedCount: 2, actions: actions, onClearSelection: onClear }));
-        fireEvent.click(screen.getByRole("button", { name: /clear selection/i }));
-        expect(onClear).toHaveBeenCalledOnce();
-    });
-    it("renders no action buttons when actions array is empty", () => {
-        render(_jsx(BulkActionBar, { selectedCount: 1, actions: [] }));
-        expect(screen.queryByRole("button", { name: /apply/i })).toBeNull();
-    });
-    it("renders the picker trigger and apply button when actions are provided", () => {
-        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actions }));
-        // Apply button must exist
-        expect(screen.getByRole("button", { name: /apply/i })).toBeTruthy();
-        // Picker trigger has aria-haspopup="listbox"
-        expect(screen.getByRole("button", { expanded: false })).toBeTruthy();
-    });
-    it("opens the action picker on trigger click", () => {
-        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actions }));
-        const trigger = screen.getByRole("button", { expanded: false });
-        fireEvent.click(trigger);
-        // Trigger now has aria-expanded="true"
-        expect(screen.getByRole("button", { expanded: true })).toBeTruthy();
-    });
-    it("selects an action when an option is clicked and closes the picker", () => {
-        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actions }));
-        // Open picker
-        const trigger = screen.getByRole("button", { expanded: false });
-        fireEvent.click(trigger);
-        // Trigger is expanded
-        expect(trigger.getAttribute("aria-expanded")).toBe("true");
-        // Click Delete option
-        fireEvent.click(screen.getByRole("option", { name: /delete/i }));
-        // Picker should close — aria-expanded returns to false
-        expect(trigger.getAttribute("aria-expanded")).toBe("false");
-    });
-    it("calls the selected action's onClick when Apply is clicked", () => {
-        const publishFn = vi.fn();
-        const actionsWithFns = [
-            { id: "publish", label: "Publish", onClick: publishFn },
-        ];
-        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actionsWithFns }));
-        fireEvent.click(screen.getByRole("button", { name: /apply/i }));
-        expect(publishFn).toHaveBeenCalledOnce();
-    });
-    it("executes the newly selected action when a different option is chosen then Apply clicked", () => {
-        const publishFn = vi.fn();
-        const deleteFn = vi.fn();
-        const actionsWithFns = [
-            { id: "publish", label: "Publish", onClick: publishFn },
-            { id: "delete", label: "Delete", variant: "danger", onClick: deleteFn },
-        ];
-        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actionsWithFns }));
-        // Select Delete via picker
-        fireEvent.click(screen.getByRole("button", { expanded: false }));
-        fireEvent.click(screen.getByRole("option", { name: /delete/i }));
-        // Apply
-        fireEvent.click(screen.getByRole("button", { name: /apply/i }));
-        expect(deleteFn).toHaveBeenCalledOnce();
-        expect(publishFn).not.toHaveBeenCalled();
-    });
-    it("disables the apply button when the selected action is disabled", () => {
-        const disabledActions = [
-            { id: "archive", label: "Archive", onClick: vi.fn(), disabled: true },
-        ];
-        render(_jsx(BulkActionBar, { selectedCount: 1, actions: disabledActions }));
-        const applyBtn = screen.getByRole("button", { name: /apply/i });
-        expect(applyBtn.disabled).toBe(true);
-    });
-    it("uses custom labels", () => {
-        render(_jsx(BulkActionBar, { selectedCount: 2, actions: actions, labels: { apply: "Run", selected: "chosen" } }));
-        expect(screen.getByRole("button", { name: /run/i })).toBeTruthy();
-        expect(screen.getByTestId("bulk-selected-count").textContent).toContain("chosen");
-    });
-});

package/dist/ui/components/__tests__/ListingToolbar.test.d.ts

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

package/dist/ui/components/__tests__/ListingToolbar.test.js

@@ -1,125 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { ListingToolbar } from "../ListingToolbar";
-describe("ListingToolbar", () => {
-    it("renders the toolbar container", () => {
-        render(_jsx(ListingToolbar, {}));
-        expect(screen.getByTestId("listing-toolbar")).toBeTruthy();
-    });
-    it("renders search input when onSearchChange is provided", () => {
-        render(_jsx(ListingToolbar, { onSearchChange: vi.fn(), searchValue: "", searchPlaceholder: "Find\u2026" }));
-        expect(screen.getByPlaceholderText("Find…")).toBeTruthy();
-    });
-    it("does not render search input when onSearchChange is absent", () => {
-        render(_jsx(ListingToolbar, {}));
-        expect(screen.queryByRole("textbox")).toBeNull();
-    });
-    it("calls onSearchChange when typing in the search input", () => {
-        const onChange = vi.fn();
-        render(_jsx(ListingToolbar, { onSearchChange: onChange, searchValue: "" }));
-        fireEvent.change(screen.getByRole("textbox"), { target: { value: "pokemon" } });
-        expect(onChange).toHaveBeenCalledWith("pokemon");
-    });
-    it("calls onSearchCommit when Enter is pressed in the search input", () => {
-        const onCommit = vi.fn();
-        render(_jsx(ListingToolbar, { onSearchChange: vi.fn(), onSearchCommit: onCommit, searchValue: "" }));
-        fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" });
-        expect(onCommit).toHaveBeenCalledOnce();
-    });
-    it("calls onSearchCommit when the search button is clicked", () => {
-        const onCommit = vi.fn();
-        render(_jsx(ListingToolbar, { onSearchChange: vi.fn(), onSearchCommit: onCommit, searchValue: "" }));
-        fireEvent.click(screen.getByRole("button", { name: /search/i }));
-        expect(onCommit).toHaveBeenCalledOnce();
-    });
-    it("renders filters button when onFiltersClick is provided", () => {
-        const onClick = vi.fn();
-        render(_jsx(ListingToolbar, { onFiltersClick: onClick }));
-        const btn = screen.getByRole("button", { name: /filters/i });
-        expect(btn).toBeTruthy();
-        fireEvent.click(btn);
-        expect(onClick).toHaveBeenCalledOnce();
-    });
-    it("does not render filters button when onFiltersClick is absent", () => {
-        render(_jsx(ListingToolbar, {}));
-        expect(screen.queryByRole("button", { name: /filters/i })).toBeNull();
-    });
-    it("shows filter count badge when filterCount > 0", () => {
-        render(_jsx(ListingToolbar, { onFiltersClick: vi.fn(), filterCount: 3 }));
-        expect(screen.getByText("3")).toBeTruthy();
-    });
-    it("renders grid and list view buttons when onViewChange is provided", () => {
-        render(_jsx(ListingToolbar, { onViewChange: vi.fn(), view: "grid" }));
-        expect(screen.getByRole("button", { name: /grid view/i })).toBeTruthy();
-        expect(screen.getByRole("button", { name: /list view/i })).toBeTruthy();
-    });
-    it("does not render view buttons when hideViewToggle is true", () => {
-        render(_jsx(ListingToolbar, { onViewChange: vi.fn(), hideViewToggle: true, view: "grid" }));
-        expect(screen.queryByRole("button", { name: /grid view/i })).toBeNull();
-    });
-    it("calls onViewChange with 'list' when list button is clicked", () => {
-        const onViewChange = vi.fn();
-        render(_jsx(ListingToolbar, { onViewChange: onViewChange, view: "grid" }));
-        fireEvent.click(screen.getByRole("button", { name: /list view/i }));
-        expect(onViewChange).toHaveBeenCalledWith("list");
-    });
-    it("renders table view button only when showTableView is true", () => {
-        const { rerender } = render(_jsx(ListingToolbar, { onViewChange: vi.fn(), view: "grid" }));
-        expect(screen.queryByRole("button", { name: /table view/i })).toBeNull();
-        rerender(_jsx(ListingToolbar, { onViewChange: vi.fn(), view: "grid", showTableView: true }));
-        expect(screen.getByRole("button", { name: /table view/i })).toBeTruthy();
-    });
-    it("shows reset-all button only when onResetAll + hasActiveState are both truthy", () => {
-        const onReset = vi.fn();
-        const { rerender } = render(_jsx(ListingToolbar, { onResetAll: onReset, hasActiveState: false }));
-        expect(screen.queryByRole("button", { name: /reset all/i })).toBeNull();
-        rerender(_jsx(ListingToolbar, { onResetAll: onReset, hasActiveState: true }));
-        expect(screen.getByRole("button", { name: /reset all/i })).toBeTruthy();
-        fireEvent.click(screen.getByRole("button", { name: /reset all/i }));
-        expect(onReset).toHaveBeenCalledOnce();
-    });
-    it("renders bulk-mode controls when bulkMode is true", () => {
-        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 2, bulkTotalCount: 10, onBulkSelectAll: vi.fn(), onBulkClear: vi.fn() }));
-        expect(screen.getByText(/select all/i)).toBeTruthy();
-        expect(screen.getByText(/2 selected/i)).toBeTruthy();
-        expect(screen.getByText(/clear/i)).toBeTruthy();
-    });
-    it("calls onBulkSelectAll when Select All is clicked", () => {
-        const onSelectAll = vi.fn();
-        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 0, bulkTotalCount: 5, onBulkSelectAll: onSelectAll }));
-        fireEvent.click(screen.getByText(/select all/i));
-        expect(onSelectAll).toHaveBeenCalledOnce();
-    });
-    it("calls onBulkClear when Clear button is clicked", () => {
-        const onClear = vi.fn();
-        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 2, bulkTotalCount: 5, onBulkClear: onClear }));
-        fireEvent.click(screen.getByText(/clear/i));
-        expect(onClear).toHaveBeenCalledOnce();
-    });
-    it("shows 'Deselect All' label when all items are selected", () => {
-        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 5, bulkTotalCount: 5, onBulkSelectAll: vi.fn() }));
-        expect(screen.getByText(/deselect all/i)).toBeTruthy();
-    });
-    it("renders pill toggle buttons from the toggles prop", () => {
-        const onToggle = vi.fn();
-        const toggles = [
-            { label: "In Stock", active: false, onChange: onToggle },
-            { label: "Featured", active: true, onChange: vi.fn() },
-        ];
-        render(_jsx(ListingToolbar, { toggles: toggles }));
-        expect(screen.getByRole("switch", { name: "In Stock" })).toBeTruthy();
-        expect(screen.getByRole("switch", { name: "Featured" })).toBeTruthy();
-    });
-    it("calls toggle onChange with flipped value when a pill toggle is clicked", () => {
-        const onChange = vi.fn();
-        const toggles = [{ label: "In Stock", active: false, onChange }];
-        render(_jsx(ListingToolbar, { toggles: toggles }));
-        fireEvent.click(screen.getByRole("switch", { name: "In Stock" }));
-        expect(onChange).toHaveBeenCalledWith(true);
-    });
-    it("uses custom labels from the labels prop", () => {
-        render(_jsx(ListingToolbar, { onFiltersClick: vi.fn(), labels: { filters: "Refine" } }));
-        expect(screen.getByRole("button", { name: /refine/i })).toBeTruthy();
-    });
-});

package/dist/ui/components/__tests__/new-primitives.test.d.ts

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

package/dist/ui/components/__tests__/new-primitives.test.js

@@ -1,187 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { render, screen } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
-import { Anchor } from "../Anchor";
-import { Details, Summary } from "../Details";
-import { FallbackShell } from "../FallbackShell";
-import { Fieldset, Legend } from "../Fieldset";
-import { Hide, Show } from "../Responsive";
-import { HorizontalRule } from "../HorizontalRule";
-import { HotspotMarker } from "../HotspotMarker";
-import { IconBox } from "../IconBox";
-import { Iframe } from "../Iframe";
-import { Kbd } from "../Kbd";
-import { Quote } from "../Quote";
-import { SiteLogo } from "../SiteLogo";
-import { StickyToolbar } from "../StickyToolbar";
-describe("variant-catalogue primitives", () => {
-    describe("Anchor", () => {
-        it("auto-applies target/rel for external https URLs", () => {
-            render(_jsx(Anchor, { href: "https://example.com", children: "Example" }));
-            const link = screen.getByRole("link", { name: "Example" });
-            expect(link.getAttribute("target")).toBe("_blank");
-            expect(link.getAttribute("rel")).toBe("noopener noreferrer");
-        });
-        it("does not target=_blank for mailto: links", () => {
-            render(_jsx(Anchor, { href: "mailto:hi@example.com", children: "Email" }));
-            const link = screen.getByRole("link", { name: "Email" });
-            expect(link.getAttribute("target")).toBeNull();
-        });
-        it("applies the tone class", () => {
-            render(_jsx(Anchor, { href: "https://example.com", tone: "danger", children: "Danger" }));
-            const link = screen.getByRole("link", { name: "Danger" });
-            expect(link.className).toContain("var(--appkit-color-error)");
-        });
-    });
-    describe("Iframe", () => {
-        it("renders aspect + rounded classes from typed enums", () => {
-            const { container } = render(_jsx(Iframe, { src: "https://example.com/embed", title: "Embed", aspect: "square", rounded: "2xl" }));
-            const iframe = container.querySelector("iframe");
-            expect(iframe).not.toBeNull();
-            expect(iframe?.className).toContain("aspect-square");
-            expect(iframe?.className).toContain("rounded-2xl");
-        });
-        it("applies the default sandbox", () => {
-            const { container } = render(_jsx(Iframe, { src: "https://example.com/embed", title: "Embed" }));
-            const iframe = container.querySelector("iframe");
-            expect(iframe?.getAttribute("sandbox")).toMatch(/allow-same-origin/);
-        });
-    });
-    describe("HorizontalRule", () => {
-        it("renders an <hr> with separator role", () => {
-            render(_jsx(HorizontalRule, {}));
-            const hr = screen.getByRole("separator");
-            expect(hr.tagName).toBe("HR");
-        });
-        it("renders the accent gradient class for tone=accent", () => {
-            const { container } = render(_jsx(HorizontalRule, { tone: "accent" }));
-            const hr = container.querySelector("hr");
-            expect(hr?.className).toContain("appkit-gradient-accent-divider");
-        });
-    });
-    describe("Kbd", () => {
-        it("renders a <kbd> with size + tone classes", () => {
-            render(_jsx(Kbd, { size: "sm", tone: "brand", children: "Ctrl" }));
-            const kbd = screen.getByText("Ctrl");
-            expect(kbd.tagName).toBe("KBD");
-            expect(kbd.className).toContain("appkit-color-primary");
-        });
-    });
-    describe("Quote", () => {
-        it("renders inline <q> by default", () => {
-            const { container } = render(_jsx(Quote, { children: "hi" }));
-            expect(container.querySelector("q")).not.toBeNull();
-        });
-        it("renders <blockquote> when block is set", () => {
-            const { container } = render(_jsx(Quote, { block: true, children: "longer text" }));
-            expect(container.querySelector("blockquote")).not.toBeNull();
-        });
-    });
-    describe("IconBox", () => {
-        it("renders a <div> by default with size+tone+rounded classes", () => {
-            const { container } = render(_jsx(IconBox, { tone: "brand", children: "\uD83C\uDFF7\uFE0F" }));
-            const box = container.firstElementChild;
-            expect(box.tagName).toBe("DIV");
-            expect(box.className).toContain("w-10");
-            expect(box.className).toContain("rounded-xl");
-            expect(box.className).toContain("appkit-color-primary");
-        });
-        it("renders a <span> when as=span", () => {
-            const { container } = render(_jsx(IconBox, { as: "span", children: "\uD83C\uDFF7\uFE0F" }));
-            expect(container.firstElementChild?.tagName).toBe("SPAN");
-        });
-    });
-    describe("StickyToolbar", () => {
-        it("composes header offset by default", () => {
-            const { container } = render(_jsx(StickyToolbar, { children: _jsx("span", { children: "Toolbar" }) }));
-            const root = container.firstElementChild;
-            expect(root.className).toContain("top-[var(--header-height,0px)]");
-        });
-        it("composes header+nav offset", () => {
-            const { container } = render(_jsx(StickyToolbar, { offset: "header+nav", children: _jsx("span", { children: "Toolbar" }) }));
-            const root = container.firstElementChild;
-            expect(root.className).toContain("top-[calc(var(--header-height,0px)+44px)]");
-        });
-        it("accepts a numeric offset", () => {
-            const { container } = render(_jsx(StickyToolbar, { offset: 56, children: _jsx("span", { children: "Toolbar" }) }));
-            const root = container.firstElementChild;
-            expect(root.className).toContain("top-[56px]");
-        });
-    });
-    describe("Fieldset + Legend", () => {
-        it("renders the field group with a legend", () => {
-            const { container } = render(_jsxs(Fieldset, { tone: "success", children: [_jsx(Legend, { children: "Group" }), _jsx("span", { children: "body" })] }));
-            expect(container.querySelector("fieldset")?.className).toContain("appkit-color-success");
-            expect(container.querySelector("legend")?.textContent).toBe("Group");
-        });
-        it("hides the legend visually when srOnly", () => {
-            render(_jsx(Legend, { srOnly: true, children: "Hidden" }));
-            expect(screen.getByText("Hidden").className).toContain("sr-only");
-        });
-    });
-    describe("Details + Summary", () => {
-        it("renders the disclosure with summary", () => {
-            const { container } = render(_jsxs(Details, { defaultOpen: true, children: [_jsx(Summary, { children: "Click" }), _jsx("span", { children: "body" })] }));
-            const details = container.querySelector("details");
-            expect(details).not.toBeNull();
-            expect(details?.open).toBe(true);
-            expect(container.querySelector("summary")?.textContent).toBe("Click");
-        });
-    });
-    describe("Show / Hide", () => {
-        it("Show above=md uses hidden md:block", () => {
-            const { container } = render(_jsx(Show, { above: "md", children: "visible" }));
-            const root = container.firstElementChild;
-            expect(root.className).toBe("hidden md:block");
-        });
-        it("Hide below=md hides below md and shows at md+", () => {
-            // Hide(below=md) = inverse of Show(below=md). Show(below=md) is
-            // visible at < md and hidden at >= md (`block md:hidden`); Hide(below=md)
-            // is therefore hidden at < md and visible at >= md (`hidden md:block`).
-            const { container } = render(_jsx(Hide, { below: "md", children: "hidden" }));
-            const root = container.firstElementChild;
-            expect(root.className).toBe("hidden md:block");
-        });
-        it("inline render uses span", () => {
-            const { container } = render(_jsx(Show, { above: "md", inline: true, children: "inline-show" }));
-            expect(container.firstElementChild?.tagName).toBe("SPAN");
-        });
-    });
-    describe("FallbackShell", () => {
-        it("renders the title with role=alert", () => {
-            render(_jsx(FallbackShell, { title: "Boom", description: "Crashed" }));
-            const alert = screen.getByRole("alert");
-            expect(alert).not.toBeNull();
-            expect(screen.getByText("Boom")).not.toBeNull();
-            expect(screen.getByText("Crashed")).not.toBeNull();
-        });
-    });
-    describe("HotspotMarker", () => {
-        it("renders an interactive button with inline position style", () => {
-            const { container } = render(_jsx(HotspotMarker, { xPct: 25, yPct: 75, size: "md", tone: "brand", children: "1" }));
-            const button = container.querySelector("button");
-            expect(button).not.toBeNull();
-            expect(button?.style.left).toBe("25%");
-            expect(button?.style.top).toBe("75%");
-        });
-        it("clamps out-of-range coordinates", () => {
-            const { container } = render(_jsx(HotspotMarker, { xPct: -5, yPct: 120, size: "md", tone: "brand", children: "x" }));
-            const button = container.querySelector("button");
-            expect(button?.style.left).toBe("0%");
-            expect(button?.style.top).toBe("100%");
-        });
-    });
-    describe("SiteLogo", () => {
-        it("renders the SVG wordmark by default at size=md", () => {
-            const { container } = render(_jsx(SiteLogo, {}));
-            const svg = container.querySelector("svg");
-            expect(svg).not.toBeNull();
-            expect(svg?.getAttribute("class")).toContain("h-7");
-        });
-        it("renders a solid fill when tone=mono", () => {
-            const { container } = render(_jsx(SiteLogo, { tone: "mono" }));
-            const text = container.querySelector("svg text");
-            expect(text?.getAttribute("fill")).toBe("currentColor");
-        });
-    });
-});