@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/ui/components/Typography.js

@@ -14,8 +14,16 @@ const TYPOGRAPHY = {
         base: "appkit-text--base",
         lg: "appkit-text--lg",
         xl: "appkit-text--xl",
+        "2xl": "appkit-text--2xl",
+        "3xl": "appkit-text--3xl",
+        "4xl": "appkit-text--4xl",
+        "5xl": "appkit-text--5xl",
+        "6xl": "text-6xl",
+        "7xl": "text-7xl",
+        "8xl": "text-8xl",
     },
     textWeight: {
+        light: "appkit-font--light",
         normal: "appkit-font--normal",
         medium: "appkit-font--medium",
         semibold: "appkit-font--semibold",
@@ -34,52 +42,246 @@ const TYPOGRAPHY = {
         none: "",
         inherit: "",
         accent: "appkit-color--accent",
+        inverse: "appkit-color--inverse",
     },
 };
-export function Heading({ level = 1, variant = "primary", color, className = "", children, ...props }) {
+function shapingClasses(opts) {
+    const out = [];
+    if (opts.transform && opts.transform !== "none") {
+        out.push(`appkit-text--transform-${opts.transform}`);
+    }
+    if (opts.truncate) {
+        const lines = typeof opts.truncate === "number" ? opts.truncate : 1;
+        out.push(`appkit-text--truncate-${lines}`);
+    }
+    if (opts.numeric)
+        out.push("appkit-text--numeric");
+    if (opts.italic)
+        out.push("appkit-text--italic");
+    if (opts.family)
+        out.push(`appkit-font--${opts.family}`);
+    if (opts.align)
+        out.push(`appkit-text--align-${opts.align}`);
+    if (opts.gradient && opts.gradient !== "none") {
+        out.push(`appkit-text--gradient-${opts.gradient}`);
+    }
+    return out;
+}
+function responsiveSizeClass(prefix, size) {
+    if (!size)
+        return "";
+    // Use raw Tailwind text-* utilities (which support responsive prefixes) rather
+    // than the custom .appkit-text--N classes (which don't).
+    return `${prefix}text-${size}`;
+}
+export function Heading({ level = 1, variant = "primary", color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, className = "", children, ...props }) {
     const Tag = `h${level}`;
     const resolvedColor = color ?? variant;
     return (_jsx(Tag, { className: [
             "appkit-heading",
             TYPOGRAPHY.headingLevel[level],
             TYPOGRAPHY.colorVariant[resolvedColor],
+            size ? TYPOGRAPHY.textSize[size] : "",
+            responsiveSizeClass("sm:", smSize),
+            responsiveSizeClass("md:", mdSize),
+            responsiveSizeClass("lg:", lgSize),
+            responsiveSizeClass("xl:", xlSize),
+            weight ? TYPOGRAPHY.textWeight[weight] : "",
+            ...shapingClasses({ transform, truncate, numeric, italic, family, align, gradient }),
             className,
         ]
             .filter(Boolean)
             .join(" "), ...props, children: children }));
 }
-export function Text({ variant = "primary", color, size = "base", weight = "normal", className = "", as: Tag = "p", children, ...props }) {
+const TEXT_PADDING_Y_MAP = {
+    none: "",
+    "2xs": "py-1",
+    xs: "py-2",
+    sm: "py-3",
+    md: "py-4",
+    lg: "py-6",
+    xl: "py-8",
+    "2xl": "py-10",
+    "3xl": "py-12",
+    "4xl": "py-16",
+};
+/**
+ * Shared layout class strings — referenced from TEXT_LAYOUT_MAP,
+ * LABEL_LAYOUT_MAP, and SPAN_LAYOUT_MAP below. Extracting them as constants
+ * keeps `audit-code-quality/REPEATED_STRING` at strict-zero (the audit fires
+ * when the same human-readable className appears ≥3 times across the file).
+ */
+const CLS_INLINE_FLEX = "inline-flex items-center";
+const CLS_FLEX = "flex items-center";
+const TEXT_LAYOUT_MAP = {
+    default: "",
+    "inline-flex": CLS_INLINE_FLEX,
+    flex: CLS_FLEX,
+    "inline-block": "inline-block",
+};
+const TEXT_GAP_MAP = {
+    none: "",
+    "1": "gap-1",
+    "1.5": "gap-1.5",
+    "2": "gap-2",
+    "3": "gap-3",
+};
+const TEXT_SHADOW_MAP = {
+    none: "",
+    sm: "drop-shadow-sm",
+    md: "drop-shadow-md",
+    lg: "drop-shadow-lg",
+    "2xl": "drop-shadow-2xl",
+};
+export function Text({ variant = "primary", color, size = "base", smSize, mdSize, lgSize, xlSize, weight = "normal", transform, truncate, numeric, italic, family, align, gradient, paddingY, layout, gap, shadow, className = "", as: Tag = "p", children, ...props }) {
     const resolvedColor = color ?? variant;
     return (_jsx(Tag, { className: [
             "appkit-text",
             TYPOGRAPHY.textSize[size],
+            responsiveSizeClass("sm:", smSize),
+            responsiveSizeClass("md:", mdSize),
+            responsiveSizeClass("lg:", lgSize),
+            responsiveSizeClass("xl:", xlSize),
             TYPOGRAPHY.textWeight[weight],
             TYPOGRAPHY.colorVariant[resolvedColor],
+            ...shapingClasses({ transform, truncate, numeric, italic, family, align, gradient }),
+            paddingY ? TEXT_PADDING_Y_MAP[paddingY] : "",
+            layout ? TEXT_LAYOUT_MAP[layout] : "",
+            gap ? TEXT_GAP_MAP[gap] : "",
+            shadow ? TEXT_SHADOW_MAP[shadow] : "",
             className,
         ]
             .filter(Boolean)
             .join(" "), ...props, children: children }));
 }
-export function Label({ required, className = "", children, ...props }) {
-    return (_jsxs("label", { className: ["appkit-label", className].filter(Boolean).join(" "), ...props, children: [children, required && _jsx("span", { className: "appkit-label__required", children: "*" })] }));
+const LABEL_LAYOUT_MAP = {
+    inline: "",
+    "inline-flex": CLS_INLINE_FLEX,
+    flex: CLS_FLEX,
+    /** Flex container with `items-start` cross-axis alignment — for checkbox + multi-line description rows. */
+    "flex-start": "flex items-start",
+};
+const LABEL_GAP_MAP = {
+    none: "",
+    xs: "gap-1",
+    sm: "gap-1.5",
+    md: "gap-2",
+    lg: "gap-3",
+};
+export function Label({ required, size, weight, color, transform, align, layout, gap, className = "", children, ...props }) {
+    return (_jsxs("label", { className: [
+            "appkit-label",
+            size ? TYPOGRAPHY.textSize[size] : "",
+            weight ? TYPOGRAPHY.textWeight[weight] : "",
+            color ? TYPOGRAPHY.colorVariant[color] : "",
+            transform && transform !== "none" ? `appkit-text--transform-${transform}` : "",
+            align ? `appkit-text--align-${align}` : "",
+            layout ? LABEL_LAYOUT_MAP[layout] : "",
+            gap ? LABEL_GAP_MAP[gap] : "",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), ...props, children: [children, required && _jsx("span", { className: "appkit-label__required", children: "*" })] }));
 }
-export function Caption({ variant = "default", className = "", children, ...props }) {
+export function Caption({ variant = "default", color, weight, className = "", children, ...props }) {
     const variantClasses = {
         default: "appkit-caption--default",
         accent: "appkit-caption--accent",
         inverse: "appkit-caption--inverse",
     };
-    return (_jsx("span", { className: ["appkit-caption", variantClasses[variant], className]
+    return (_jsx("span", { className: [
+            "appkit-caption",
+            variantClasses[variant],
+            color ? TYPOGRAPHY.colorVariant[color] : "",
+            weight ? TYPOGRAPHY.textWeight[weight] : "",
+            className,
+        ]
             .filter(Boolean)
             .join(" "), ...props, children: children }));
 }
-export function Span({ variant = "inherit", color, size, weight, className = "", children, ...props }) {
+const SPAN_BORDER_MAP = {
+    none: "",
+    default: "border border-zinc-200 dark:border-slate-700",
+    subtle: "border border-zinc-100 dark:border-zinc-800",
+    strong: "border border-zinc-300 dark:border-slate-600",
+};
+const SPAN_ROUNDED_MAP = {
+    none: "",
+    default: "rounded",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    full: "rounded-full",
+};
+const SPAN_PADDING_MAP = {
+    none: "",
+    "x-xs": "px-2",
+    "x-sm": "px-3",
+    "x-md": "px-4",
+    "y-2xs": "py-1",
+    "y-xs": "py-2",
+    "y-sm": "py-3",
+    "inline-sm": "px-2 py-0.5",
+    inline: "px-2 py-1",
+    "pill-2xs": "px-1.5 py-0.5",
+    "pill-xs": "px-2 py-0.5",
+    "pill-sm": "px-2.5 py-0.5",
+    "pill-sm-tall": "px-2.5 py-1",
+    "pill-md": "px-3 py-1",
+    "pill-lg": "px-4 py-1.5",
+};
+const SPAN_BG_MAP = {
+    none: "",
+    muted: "bg-[var(--appkit-color-bg)]",
+    subtle: "bg-[var(--appkit-color-border-subtle)]",
+    default: "bg-[var(--appkit-color-surface)]",
+    "success-surface": "bg-[var(--appkit-color-success-surface)]",
+    "danger-surface": "bg-[var(--appkit-color-error-surface)]",
+    "warning-surface": "bg-[var(--appkit-color-warning-surface)]",
+    "info-surface": "bg-[var(--appkit-color-info-surface)]",
+    "overlay-xs": "bg-black/40",
+    "overlay-sm": "bg-black/50",
+    "overlay-md": "bg-black/55",
+    "overlay-lg": "bg-black/60",
+    "overlay-xl": "bg-black/70",
+};
+const SPAN_LAYOUT_MAP = {
+    inline: "",
+    "inline-flex": CLS_INLINE_FLEX,
+    flex: CLS_FLEX,
+    "inline-flex-center": `${CLS_INLINE_FLEX} justify-center`,
+    "flex-center": `${CLS_FLEX} justify-center`,
+    "inline-block": "inline-block",
+    block: "block",
+};
+const SPAN_GAP_MAP = {
+    none: "",
+    "2xs": "gap-0.5",
+    xs: "gap-1",
+    sm: "gap-1.5",
+    md: "gap-2",
+    lg: "gap-3",
+};
+export function Span({ variant = "inherit", color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, rounded, padding, surface, border, layout, gap, className = "", children, ...props }) {
     const resolvedColor = color ?? variant;
     const classes = [
         "appkit-span",
         size ? TYPOGRAPHY.textSize[size] : "",
+        responsiveSizeClass("sm:", smSize),
+        responsiveSizeClass("md:", mdSize),
+        responsiveSizeClass("lg:", lgSize),
+        responsiveSizeClass("xl:", xlSize),
         weight ? TYPOGRAPHY.textWeight[weight] : "",
         TYPOGRAPHY.colorVariant[resolvedColor],
+        ...shapingClasses({ transform, truncate, numeric, italic, family, align, gradient }),
+        rounded ? SPAN_ROUNDED_MAP[rounded] : "",
+        padding ? SPAN_PADDING_MAP[padding] : "",
+        surface ? SPAN_BG_MAP[surface] : "",
+        border ? SPAN_BORDER_MAP[border] : "",
+        layout ? SPAN_LAYOUT_MAP[layout] : "",
+        gap ? SPAN_GAP_MAP[gap] : "",
         className,
     ]
         .filter(Boolean)

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

@@ -67,6 +67,30 @@
   font-size: 1.25rem;
 }
 
+.appkit-text--2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.appkit-text--3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.appkit-text--4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.appkit-text--5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.appkit-font--light {
+  font-weight: 300;
+}
+
 .appkit-font--normal {
   font-weight: 400;
 }
@@ -119,6 +143,10 @@
   color: var(--appkit-color-info, #0284c7);
 }
 
+.appkit-color--inverse {
+  color: var(--appkit-color-text-on-primary, #ffffff);
+}
+
 .dark .appkit-color--primary {
   color: var(--appkit-color-text);
 }
@@ -200,3 +228,41 @@
 .dark .appkit-caption--inverse {
   color: var(--appkit-color-primary-300);       /* #f79dd2 — light pink, readable on dark */
 }
+
+/* Variant catalogue extensions — transform / truncate / numeric / italic / family / align / gradient.
+   Added 2026-06-14 as part of the three-layer style system rollout. */
+.appkit-text--transform-uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
+.appkit-text--transform-lowercase { text-transform: lowercase; }
+.appkit-text--transform-capitalize { text-transform: capitalize; }
+
+.appkit-text--truncate-1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.appkit-text--truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.appkit-text--truncate-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.appkit-text--truncate-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+
+.appkit-text--numeric { font-variant-numeric: tabular-nums; }
+.appkit-text--italic { font-style: italic; }
+
+.appkit-font--sans { font-family: var(--appkit-font-sans); }
+.appkit-font--display { font-family: var(--appkit-font-display); }
+.appkit-font--editorial { font-family: var(--appkit-font-editorial); }
+.appkit-font--mono { font-family: var(--appkit-font-mono); }
+
+.appkit-text--align-start { text-align: start; }
+.appkit-text--align-center { text-align: center; }
+.appkit-text--align-end { text-align: end; }
+.appkit-text--align-justify { text-align: justify; }
+
+/* Gradient text variants — consume --appkit-gradient-* so they follow the active theme. */
+.appkit-text--gradient-brand,
+.appkit-text--gradient-brand-tri,
+.appkit-text--gradient-accent {
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+.appkit-text--gradient-brand     { background-image: var(--appkit-gradient-brand); }
+.appkit-text--gradient-brand-tri { background-image: var(--appkit-gradient-brand-tri); }
+.appkit-text--gradient-accent    { background-image: var(--appkit-gradient-accent); }
+

package/dist/ui/components/UnsavedChangesModal.js

@@ -16,7 +16,9 @@ export function UnsavedChangesModal({ labels = {} }) {
     const [isOpen, setIsOpen] = useState(false);
     const [resolve, setResolve] = useState(null);
     useEffect(() => {
-        const subscription = eventBus.on(UNSAVED_CHANGES_EVENT, (...args) => {
+        const subscription = eventBus.on(UNSAVED_CHANGES_EVENT, 
+        // audit-unknown-ok: ...args spread — caller-defined handler signature
+        (...args) => {
             const resolveFn = args[0];
             setResolve(() => resolveFn);
             setIsOpen(true);

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

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

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

@@ -0,0 +1,187 @@
+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");
+        });
+    });
+});