Fixed Some Bugs

2025-08-17 15:05:44 +05:30
parent f8a0e82076
commit b362d10519
16 changed files with 549 additions and 306 deletions
@@ -27,6 +27,8 @@ const {
    { key: "sunset",  label: "Sunset" },
    { key: "grape",   label: "Grape" },
    { key: "slate",   label: "Slate" },
+    { key: "gray",  label: "Gray" },
+    { key: "neutral",  label: "Neutral" },
    { key: "mint",    label: "Mint" },
    { key: "amber",   label: "Amber" },
    { key: "crimson", label: "Crimson" },
@@ -197,13 +197,18 @@ const id = `dd-${Math.random().toString(36).slice(2)}`;

            const side = sideOf(pref);
            const align = alignOf(pref);
+
+            const AR = showArrow && arrowEl ? 8 : 0; // arrow size
+            const SAFE = Math.max(shiftPadding, 8); // viewport padding
+            const GAP = offset + AR; // desired gap + arrow
+
            let x = 0,
                y = 0;

-            if (side === "bottom") y = t.bottom + offset;
-            else if (side === "top") y = t.top - p.height - offset;
-            else if (side === "right") x = t.right + offset;
-            else if (side === "left") x = t.left - p.width - offset;
+            if (side === "bottom") y = t.bottom + GAP;
+            else if (side === "top") y = t.top - p.height - GAP;
+            else if (side === "right") x = t.right + GAP;
+            else if (side === "left") x = t.left - p.width - GAP;

            if (side === "top" || side === "bottom") {
                if (align === "start") x = t.left;
@@ -215,116 +220,99 @@ const id = `dd-${Math.random().toString(36).slice(2)}`;
                else y = t.top + (t.height - p.height) / 2;
            }

-            const pad = shiftPadding;
-            x = Math.max(pad, Math.min(x, vw - p.width - pad));
-            y = Math.max(pad, Math.min(y, vh - p.height - pad));
-            return { x, y }; // no Math.round
-        }
+            // Clamp into viewport
+            x = Math.max(SAFE, Math.min(x, vw - p.width - SAFE));
+            y = Math.max(SAFE, Math.min(y, vh - p.height - SAFE));

-        function positionPanel() {
-            if (!open) return;
-            if (matchTriggerWidth) {
-                const w = Math.max(192, trigger.getBoundingClientRect().width);
-                panel.style.minWidth = `${w}px`;
-            }
-            const best = smartPosition();
-            panel.style.left = `${best.x}px`;
-            panel.style.top = `${best.y}px`;
+            // Return overflow score (lower is better)
+            const over =
+                Math.max(0, SAFE - x) +
+                Math.max(0, SAFE - y) +
+                Math.max(0, x + p.width - (vw - SAFE)) +
+                Math.max(0, y + p.height - (vh - SAFE));

-            const side = sideOf(best.cand),
-                align = alignOf(best.cand);
-            setOriginFor(side, align);
-            panel.dataset.side = side;
-
-            if (showArrow && arrowEl) {
-                Object.assign(arrowEl.style, {
-                    left: "",
-                    top: "",
-                    right: "",
-                    bottom: "",
-                });
-                const t = trigger.getBoundingClientRect();
-                const p = panel.getBoundingClientRect();
-                const aw = arrowEl.getBoundingClientRect().width;
-                const ah = arrowEl.getBoundingClientRect().height;
-                const AR = 7;
-
-                if (side === "bottom") {
-                    arrowEl.style.top = `${-AR}px`;
-                    const cx = t.left + t.width / 2;
-                    arrowEl.style.left = `${cx - p.left - aw / 2}px`;
-                } else if (side === "top") {
-                    arrowEl.style.bottom = `${-AR}px`;
-                    const cx = t.left + t.width / 2;
-                    arrowEl.style.left = `${cx - p.left - aw / 2}px`;
-                } else if (side === "right") {
-                    arrowEl.style.left = `${-AR}px`;
-                    const cy = t.top + t.height / 2;
-                    arrowEl.style.top = `${cy - p.top - ah / 2}px`;
-                } else if (side === "left") {
-                    arrowEl.style.right = `${-AR}px`;
-                    const cy = t.top + t.height / 2;
-                    arrowEl.style.top = `${cy - p.top - ah / 2}px`;
-                }
-            }
+            return { x: Math.round(x), y: Math.round(y), over };
        }

        function smartPosition() {
-            const s = sideOf(placement),
-                a = alignOf(placement);
-            const flips = {
+            const s = sideOf(placement);
+            const a = alignOf(placement);
+
+            const flipSide = {
                top: "bottom",
                bottom: "top",
                left: "right",
                right: "left",
-            };
-            const candidates = [placement, `${flips[s]}${a ? `-${a}` : ""}`];
-            if (s === "top" || s === "bottom")
-                candidates.push(
-                    `left-${a || "start"}`,
-                    `right-${a || "start"}`,
-                );
-            else
-                candidates.push(
-                    `top-${a || "start"}`,
-                    `bottom-${a || "start"}`,
-                );
+            }[s];

-            const vw = document.documentElement.clientWidth;
-            const vh = document.documentElement.clientHeight;
+            // Try: requested → side flipped → align flipped → both flipped → orthogonal sides
+            const aligns = a
+                ? [a, a === "start" ? "end" : "start", "center"]
+                : ["center", "start", "end"];
+            const candidates = [];
+
+            aligns.forEach((al) =>
+                candidates.push(`${s}${al === "center" ? "" : "-" + al}`),
+            );
+            aligns.forEach((al) =>
+                candidates.push(
+                    `${flipSide}${al === "center" ? "" : "-" + al}`,
+                ),
+            );
+
+            if (s === "top" || s === "bottom") {
+                aligns.forEach((al) =>
+                    candidates.push(`left-${al === "center" ? "start" : al}`),
+                );
+                aligns.forEach((al) =>
+                    candidates.push(`right-${al === "center" ? "start" : al}`),
+                );
+            } else {
+                aligns.forEach((al) =>
+                    candidates.push(`top-${al === "center" ? "start" : al}`),
+                );
+                aligns.forEach((al) =>
+                    candidates.push(`bottom-${al === "center" ? "start" : al}`),
+                );
+            }

            let best = null;
            for (const cand of candidates) {
                const pos = placeOnce(cand);
-                const p = panel.getBoundingClientRect();
-                const w = p.width,
-                    h = p.height;
-                const over =
-                    Math.max(0, -pos.x) +
-                    Math.max(0, -pos.y) +
-                    Math.max(0, pos.x + w - vw) +
-                    Math.max(0, pos.y + h - vh);
-                if (!best || over < best.score)
-                    best = { cand, ...pos, score: over };
+                if (!best || pos.over < best.over) best = { cand, ...pos };
+                if (pos.over === 0) break; // perfect fit
            }
            return best;
        }

        function positionPanel() {
            if (!open) return;
+
+            // Constrain size so the panel never forces overflow
+            const vw = document.documentElement.clientWidth;
+            const vh = document.documentElement.clientHeight;
+            const PAD = Math.max(shiftPadding, 8);
+
+            // Optional: match trigger width
            if (matchTriggerWidth) {
                const w = Math.max(192, trigger.getBoundingClientRect().width);
                panel.style.minWidth = `${Math.round(w)}px`;
            }
+
+            panel.style.maxWidth = `${vw - PAD * 2}px`;
+            panel.style.maxHeight = `${vh - PAD * 2}px`;
+            panel.style.overflow = "auto"; // scroll when needed
+
            const best = smartPosition();
            panel.style.left = best.x + "px";
            panel.style.top = best.y + "px";

-            const side = sideOf(best.cand),
-                align = alignOf(best.cand);
+            const side = sideOf(best.cand);
+            const align = alignOf(best.cand);
            setOriginFor(side, align);
            panel.dataset.side = side;

+            // Arrow
            if (showArrow && arrowEl) {
                Object.assign(arrowEl.style, {
                    left: "",
@@ -336,26 +324,60 @@ const id = `dd-${Math.random().toString(36).slice(2)}`;
                const p = panel.getBoundingClientRect();
                const aw = arrowEl.getBoundingClientRect().width;
                const ah = arrowEl.getBoundingClientRect().height;
-                const AR = 7;
+                const AR = 8;

                if (side === "bottom") {
                    arrowEl.style.top = -AR + "px";
                    const cx = t.left + t.width / 2;
                    arrowEl.style.left =
-                        Math.round(cx - p.left - aw / 2) + "px";
+                        Math.round(
+                            Math.max(
+                                PAD,
+                                Math.min(
+                                    cx - p.left - aw / 2,
+                                    p.width - PAD - aw,
+                                ),
+                            ),
+                        ) + "px";
                } else if (side === "top") {
                    arrowEl.style.bottom = -AR + "px";
                    const cx = t.left + t.width / 2;
                    arrowEl.style.left =
-                        Math.round(cx - p.left - aw / 2) + "px";
+                        Math.round(
+                            Math.max(
+                                PAD,
+                                Math.min(
+                                    cx - p.left - aw / 2,
+                                    p.width - PAD - aw,
+                                ),
+                            ),
+                        ) + "px";
                } else if (side === "right") {
                    arrowEl.style.left = -AR + "px";
                    const cy = t.top + t.height / 2;
-                    arrowEl.style.top = Math.round(cy - p.top - ah / 2) + "px";
+                    arrowEl.style.top =
+                        Math.round(
+                            Math.max(
+                                PAD,
+                                Math.min(
+                                    cy - p.top - ah / 2,
+                                    p.height - PAD - ah,
+                                ),
+                            ),
+                        ) + "px";
                } else if (side === "left") {
                    arrowEl.style.right = -AR + "px";
                    const cy = t.top + t.height / 2;
-                    arrowEl.style.top = Math.round(cy - p.top - ah / 2) + "px";
+                    arrowEl.style.top =
+                        Math.round(
+                            Math.max(
+                                PAD,
+                                Math.min(
+                                    cy - p.top - ah / 2,
+                                    p.height - PAD - ah,
+                                ),
+                            ),
+                        ) + "px";
                }
            }
        }
@@ -53,7 +53,7 @@ const descId = p.description ? `${fieldId}-desc` : undefined;
 const errId = `${fieldId}-err`;

 const inputBase = cva(
-    "wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:sm:text-sm wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
+    "wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-border wr:rounded-lg wr:sm:text-sm wr:focus:border-border wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
    {
        variants: {
            size: {
@@ -68,7 +68,7 @@ const inputBase = cva(
 );

 const selectBase = cva(
-    "wr:py-3 wr:px-4 wr:pe-9 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:text-sm wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
+    "wr:py-3 wr:px-4 wr:pe-9 wr:block wr:w-full wr:border-border wr:rounded-lg wr:text-sm wr:focus:border-border wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
    {
        variants: {
            size: {
@@ -90,7 +90,7 @@ const helpCls = "wr:mt-2 wr:text-sm wr:text-gray-500 wr:dark:text-neutral-500";
 const errCls = "wr:text-sm wr:text-red-600 wr:mt-2";
 const groupCls = "wr:relative wr:flex wr:items-stretch";
 const addonBase =
-    "wr:px-4 wr:inline-flex wr:items-center wr:min-w-fit wr:rounded-md wr:border wr:border-gray-200 wr:bg-gray-50 wr:text-sm wr:text-gray-500 wr:dark:bg-neutral-700 wr:dark:border-neutral-700 wr:dark:text-neutral-400";
+    "wr:px-4 wr:inline-flex wr:items-center wr:min-w-fit wr:rounded-md wr:border wr:border-border wr:bg-gray-200 wr:text-sm wr:text-gray-500 wr:dark:bg-card wr:dark:border-border wr:dark:text-neutral-400";
 const controlWrap = "wr:relative";
 ---

@@ -220,7 +220,7 @@ const controlWrap = "wr:relative";
                        name={p.name}
                        type={(p.kind as any) ?? "text"}
                        class={cn(
-                            "wr:block wr:w-full wr:border wr:border-gray-200 wr:shadow-sm wr:rounded-lg wr:text-sm wr:focus:z-10 wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:file:bg-gray-50 wr:file:border-0 wr:file:me-4 wr:file:py-3 wr:file:px-4 wr:dark:file:bg-neutral-700 wr:dark:file:text-neutral-400",
+                            "wr:block wr:w-full wr:border wr:border-border wr:shadow-sm wr:rounded-lg wr:text-sm wr:focus:z-10 wr:focus:border-border wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:file:bg-gray-50 wr:file:border-0 wr:file:me-4 wr:file:py-3 wr:file:px-4 wr:dark:file:bg-input wr:dark:file:text-neutral-400",
                            p.prefixText && "wr:rounded-l-none",
                            p.suffixText && "wr:rounded-r-none",
                            p.error &&
@@ -281,7 +281,7 @@ const controlWrap = "wr:relative";
                            .join(" ") || undefined
                    }
                    class={cn(
-                        "wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:sm:text-sm wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
+                        "wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-border wr:rounded-lg wr:sm:text-sm wr:focus:border-border wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
                        p.size === "sm"
                            ? "wr:text-sm wr:p-3"
                            : p.size === "lg"
@@ -352,7 +352,7 @@ const controlWrap = "wr:relative";
                    id={fieldId}
                    name={p.name}
                    type="checkbox"
-                    class="wr:shrink-0 wr:mt-0.5 wr:border-gray-200 wr:rounded-sm wr:text-blue-600 wr:focus:ring-blue-500 wr:checked:border-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-800 wr:dark:border-neutral-700 wr:dark:checked:bg-blue-500 wr:dark:checked:border-blue-500 wr:dark:focus:ring-offset-gray-800"
+                    class="wr:shrink-0 wr:mt-0.5 wr:border-border wr:rounded-sm wr:text-blue-600 wr:focus:ring-blue-500 wr:checked:border-border wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:checked:bg-blue-500 wr:dark:checked:border-border wr:dark:focus:ring-offset-gray-800"
                    checked={!!p.value}
                    disabled={p.disabled}
                    data-control
@@ -395,7 +395,7 @@ const controlWrap = "wr:relative";
                                name={p.name}
                                value={opt.value}
                                checked={String(p.value) === opt.value}
-                                class="wr:shrink-0 wr:mt-0.5 wr:border-gray-200 wr:rounded-full wr:text-blue-600 wr:focus:ring-blue-500 wr:checked:border-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-800 wr:dark:border-neutral-700 wr:dark:checked:bg-blue-500 wr:dark:checked:border-blue-500 wr:dark:focus:ring-offset-gray-800"
+                                class="wr:shrink-0 wr:mt-0.5 wr:border-border wr:rounded-full wr:text-blue-600 wr:focus:ring-blue-500 wr:checked:border-border wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:checked:bg-blue-500 wr:dark:checked:border-border wr:dark:focus:ring-offset-gray-800"
                                disabled={opt.disabled || p.disabled}
                                data-control
                            />
@@ -422,8 +422,8 @@ const controlWrap = "wr:relative";
                        disabled={p.disabled}
                        data-control
                    />
-                    <span class="wr:absolute wr:inset-0 wr:bg-gray-200 wr:rounded-full wr:transition-colors wr:duration-200 wr:ease-in-out wr:peer-checked:bg-blue-600 wr:dark:bg-neutral-700 wr:dark:peer-checked:bg-blue-500 wr:peer-disabled:opacity-50 wr:peer-disabled:pointer-events-none" />
-                    <span class="wr:absolute wr:top-1/2 wr:start-0.5 wr:-translate-y-1/2 wr:size-5 wr:bg-white wr:rounded-full wr:shadow-xs wr:transition-transform wr:duration-200 wr:ease-in-out wr:peer-checked:translate-x-full wr:dark:bg-neutral-400 wr:dark:peer-checked:bg-white" />
+                    <span class="wr:absolute wr:inset-0 wr:bg-gray-200 wr:rounded-full wr:transition-colors wr:duration-200 wr:ease-in-out wr:peer-checked:bg-blue-600 wr:dark:bg-input wr:dark:peer-checked:bg-blue-500 wr:peer-disabled:opacity-50 wr:peer-disabled:pointer-events-none" />
+                    <span class="wr:absolute wr:top-1/2 wr:start-0.5 wr:-translate-y-1/2 wr:size-5 wr:bg-white wr:rounded-full wr:shadow-xs wr:transition-transform wr:duration-200 wr:ease-in-out wr:peer-checked:translate-x-full wr:dark:bg-white wr:dark:peer-checked:bg-white" />
                </label>
                {p.label && (
                    <label
@@ -51,7 +51,7 @@ const sizeCls =
 const controlCls =
    "wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:sm:text-sm " +
    "wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none " +
-    "wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600";
+    "wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600";

 const chipBase =
    "wr:inline-flex wr:items-center wr:gap-1 wr:rounded-full wr:px-2 wr:py-0.5 wr:text-xs wr:bg-muted wr:text-foreground";
@@ -133,7 +133,7 @@ const displayMode = p.display ?? "text";
        </div>

        <div
-            class="wr:absolute wr:border-border wr:bg-popover wr:text-popover-foreground wr:shadow-lg wr:hidden wr:mt-2 wr:z-50 wr:w-full wr:max-h-72 wr:p-1 wr:space-y-0.5 wr:bg-white wr:border wr:border-gray-200 wr:rounded-lg wr:overflow-hidden wr:overflow-y-auto wr:[&::-webkit-scrollbar]:w-2 wr:[&::-webkit-scrollbar-thumb]:rounded-full wr:[&::-webkit-scrollbar-track]:bg-gray-100 wr:[&::-webkit-scrollbar-thumb]:bg-gray-300 wr:dark:[&::-webkit-scrollbar-track]:bg-neutral-700 wr:dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 wr:dark:bg-neutral-900 wr:dark:border-neutral-700"
+            class="wr:absolute wr:text-popover-foreground wr:shadow-lg wr:hidden wr:mt-2 wr:z-50 wr:w-full wr:max-h-96 wr:p-1 wr:space-y-0.5 wr:bg-white wr:border wr:border-gray-200 wr:rounded-lg wr:overflow-hidden wr:overflow-y-auto wr:[&::-webkit-scrollbar]:w-2 wr:[&::-webkit-scrollbar-thumb]:rounded-full wr:[&::-webkit-scrollbar-track]:bg-gray-100 wr:[&::-webkit-scrollbar-thumb]:bg-gray-300 wr:dark:[&::-webkit-scrollbar-track]:bg-input wr:dark:[&::-webkit-scrollbar-thumb]:bg-input wr:dark:bg-input wr:dark:border-border"
            id={`${containerId}-panel`}
        >
            {
@@ -147,7 +147,7 @@ const displayMode = p.display ?? "text";
                            <input
                                type="text"
                                class={cn(
-                                    "wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:sm:text-sm wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
+                                    "wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:sm:text-sm wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-neutral-400 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-400 wr:dark:focus:ring-neutral-400",
                                    "wr:h-9 wr:pl-8 wr:pr-2 wr:text-sm",
                                )}
                                placeholder="Search…"
@@ -226,7 +226,7 @@ const displayMode = p.display ?? "text";
        p.description && (
            <p
                id={descId}
-                class="wr:mt-2 wr:text-sm wr:text-gray-500 wr:dark:text-neutral-500"
+                class="wr:mt-2 wr:text-sm wr:text-gray-500 wr:dark:text-input"
            >
                {p.description}
            </p>
@@ -1,198 +1,158 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import Dropdown from "./Dropdown.astro";
 import { Icon } from "astro-icon/components";

 interface Props extends HTMLAttributes<"div"> {
  storageKey?: string;
-  rootSelector?: string;   // where to toggle theme, e.g. "html"
-  compact?: boolean;       // smaller trigger button
-  darkBgClass?: string[];    // non–pure-black dark background class
-  lightBgClass?: string[];   // light background class
-  rootExtraClass?: string; // always-on root class (optional)
-  showLabel?: boolean;     // show text next to icon in trigger
+  rootSelector?: string;
+  compact?: boolean;
+  showLabel?: boolean;
+  darkBgClass?: string[];
+  lightBgClass?: string[];
+  rootExtraClass?: string;
 }

 const {
  storageKey = "wr-theme",
  rootSelector = "html",
  compact = false,
-  darkBgClass = ["wr-theme-dark-soft"],
-  lightBgClass = ["wr-theme-light"],
-  rootExtraClass = "",
  showLabel = false,
+  darkBgClass = [],
+  lightBgClass = [],
+  rootExtraClass = "",
  class: className,
  ...rest
 }: Props = Astro.props;

-const iconBtn =
-  "wr:py-3 wr:px-4 wr:inline-flex wr:items-center wr:gap-x-2 wr:text-sm wr:font-medium wr:rounded-lg wr:border wr:border-gray-200 wr:bg-white wr:text-gray-800 wr:shadow-2xs wr:hover:bg-gray-50 wr:focus:outline-hidden wr:focus:bg-gray-50 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-800 wr:dark:border-neutral-700 wr:dark:text-white wr:dark:hover:bg-neutral-700 wr:dark:focus:bg-neutral-700";
-
-const menuBtn =
-  "wr:py-3 wr:px-4 wr:inline-flex wr:items-center wr:gap-x-2 wr:text-sm wr:font-medium wr:rounded-lg wr:border wr:border-gray-200 wr:bg-white wr:text-gray-800 wr:shadow-2xs wr:hover:bg-gray-50 wr:focus:outline-hidden wr:focus:bg-gray-50 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-800 wr:dark:border-neutral-700 wr:dark:text-white wr:dark:hover:bg-neutral-700 wr:dark:focus:bg-neutral-700";
-
+const containerId = `ts-${Math.random().toString(36).slice(2)}`;
+const icon = "wr:size-4";
 const item =
  "wr:flex wr:items-center wr:gap-3 wr:w-full wr:px-3 wr:py-2.5 wr:rounded-lg wr:text-sm wr:hover:bg-muted/70 wr:transition wr:duration-150";
-
-const icon = "wr:size-4";
 const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
-const containerId = `ts-${Math.random().toString(36).slice(2)}`;
 ---

-<div id={containerId} class={["wr:relative", className].join(" ")} {...rest}>
-  <!-- Trigger: icon-only by default; set showLabel=true to include text -->
-  <button
-    type="button"
-    class={showLabel ? menuBtn : [iconBtn, compact && "wr:h-8 wr:w-8"].filter(Boolean).join(" ")}
-    data-menu-trigger
-    aria-haspopup="menu"
-    aria-expanded="false"
-    title="Theme"
-  >
-    <span class="wr:inline-flex wr:items-center wr:gap-2">
-      <span data-current-icon="light" class="wr:inline"><Icon name="mdi:weather-sunny" class={icon} /></span>
-      <span data-current-icon="dark" class="wr:hidden"><Icon name="mdi:weather-night" class={icon} /></span>
-      <span data-current-icon="system" class="wr:hidden"><Icon name="mdi:laptop" class={icon} /></span>
+<div id={containerId} class={["wr:inline-flex", className].join(" ")} data-compact={compact ? "1" : ""} {...rest}>
+  <Dropdown openOn="click" placement="bottom-end" offset={10} shiftPadding={10} showArrow={true} closeOnSelect={true}>
+    <span slot="trigger" class="wr:inline-flex wr:items-center wr:gap-2">
+      <span data-current-icon="light" class="wr:inline">
+        <Icon name="mdi:weather-sunny" class={icon} />
+      </span>
+      <span data-current-icon="dark" class="wr:hidden">
+        <Icon name="mdi:weather-night" class={icon} />
+      </span>
+      <span data-current-icon="system" class="wr:hidden">
+        <Icon name="mdi:laptop" class={icon} />
+      </span>
      {showLabel && <span data-current-label class="wr:text-sm wr:font-medium">System</span>}
+      <svg data-dd-chev class="wr:size-4 wr:opacity-70 wr:transition-transform wr:duration-150" viewBox="0 0 24 24" fill="none">
+        <path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
    </span>
-    {showLabel && <Icon name="mdi:chevron-down" class="wr:size-4 wr:opacity-70" />}
-  </button>

-  <!-- Dropdown -->
-  <div
-    class="wr:absolute wr:right-0 wr:z-50 wr:w-56 wr:border-border wr:bg-popover/90 wr:backdrop-blur-md wr:text-popover-foreground wr:p-1.5 wr:origin-top-right wr:scale-95 wr:duration-150 wr:ease-out wr:transition-[opacity,margin] wr:border wr:border-gray-100 wr:duration wr:hs-dropdown-open:opacity-100 wr:opacity-0 wr:hidden wr:min-w-60 wr:bg-white wr:shadow-md wr:rounded-lg wr:mt-2 wr:dark:bg-neutral-800 wr:dark:border wr:dark:border-neutral-700 wr:dark:divide-neutral-700 wr:after:h-4 wr:after:absolute wr:after:-bottom-4 wr:after:start-0 wr:after:w-full wr:before:h-4 wr:before:absolute wr:before:-top-4 wr:before:start-0 wr:before:w-full"
-    role="menu"
-    aria-label="Theme"
-    data-menu-panel
-  >
-    <button type="button" role="menuitemradio" aria-checked="false" class={item} data-set-theme="light">
+    <!-- Note: each item carries data-owner={containerId} so we can find it after portal -->
+    <button type="button" role="menuitemradio" aria-checked="false" class={item} data-dd-item data-set-theme="light" data-owner={containerId}>
      <Icon name="mdi:weather-sunny" class={icon} />
      <div class="wr:flex-1 wr:font-medium">Light</div>
      <Icon name="mdi:check" class={checkBase} data-check />
    </button>
-    <button type="button" role="menuitemradio" aria-checked="false" class={item} data-set-theme="dark">
+
+    <button type="button" role="menuitemradio" aria-checked="false" class={item} data-dd-item data-set-theme="dark" data-owner={containerId}>
      <Icon name="mdi:weather-night" class={icon} />
      <div class="wr:flex-1 wr:font-medium">Dark</div>
      <Icon name="mdi:check" class={checkBase} data-check />
    </button>
-    <button type="button" role="menuitemradio" aria-checked="true" class={item} data-set-theme="system">
+
+    <button type="button" role="menuitemradio" aria-checked="true" class={item} data-dd-item data-set-theme="system" data-owner={containerId}>
      <Icon name="mdi:laptop" class={icon} />
      <div class="wr:flex-1 wr:font-medium">System</div>
      <Icon name="mdi:check" class={checkBase} data-check />
    </button>
-  </div>
+  </Dropdown>
 </div>

-<script is:inline define:vars={{ containerId, storageKey, rootSelector, darkBgClass, lightBgClass, rootExtraClass }}>
-  (() => {
-    const host = document.getElementById(containerId);
-    if (!host) return;
-
-    const root = rootSelector === "html"
-      ? document.documentElement
-      : document.querySelector(rootSelector) || document.documentElement;
-
-    const mql = window.matchMedia("(prefers-color-scheme: dark)");
-    let lastThemeClasses = [];
-
-    function setRootClasses(list) {
-      lastThemeClasses.forEach(c => c && root.classList.remove(c));
-      list.filter(Boolean).forEach(c => root.classList.add(c));
-      lastThemeClasses = list.filter(Boolean);
-    }
-
-    function reflectUI(mode) {
-      // Trigger icon + optional label
-      const trig = host.querySelector("[data-menu-trigger]");
-      if (trig) {
-        const labelSpan = trig.querySelector("[data-current-label]");
-        if (labelSpan) labelSpan.textContent = mode[0].toUpperCase() + mode.slice(1);
-        trig.querySelectorAll("[data-current-icon]").forEach(el => {
-          const is = el.getAttribute("data-current-icon") === mode;
-          el.classList.toggle("wr:hidden", !is);
-          el.classList.toggle("wr:inline", is);
-        });
-      }
-
-      // Menu radios & checks
-      const panel = host.querySelector("[data-menu-panel]");
-      if (panel) {
-        panel.querySelectorAll("[role='menuitemradio']").forEach(item => {
-          const active = item.getAttribute("data-set-theme") === mode;
-          item.setAttribute("aria-checked", active ? "true" : "false");
-          item.classList.toggle("wr:bg-muted/60", active);
-        });
-      }
-    }
-
-    function openMenu(open) {
-      const trigger = host.querySelector("[data-menu-trigger]");
-      const panel = host.querySelector("[data-menu-panel]");
-      trigger?.setAttribute("aria-expanded", open ? "true" : "false");
-      if (!panel) return;
-      if (open) {
-        panel.classList.remove("wr:hidden");
-        requestAnimationFrame(() => {
-          panel.classList.remove("wr:scale-95","wr:opacity-0");
-          panel.classList.add("wr:scale-100","wr:opacity-100");
-        });
-      } else {
-        panel.classList.add("wr:scale-95","wr:opacity-0");
-        setTimeout(() => panel.classList.add("wr:hidden"), 150);
-      }
-    }
-
-    function apply(mode) {
-      const resolved = mode === "system" ? (mql.matches ? "dark" : "light") : mode;
-      root.classList.toggle("dark", resolved === "dark");
-      root.setAttribute("data-theme", resolved);
-      document.documentElement.style.colorScheme = resolved;
-      setRootClasses([rootExtraClass, ...(resolved === "dark" ? darkBgClass : lightBgClass)]);
-      localStorage.setItem(storageKey, mode);
-      reflectUI(mode);
-    }
-
-    // Init
-    const saved = (localStorage.getItem(storageKey) ) || "system";
-    apply(saved);
-
-    // react to system changes when mode=system
-    mql.addEventListener?.("change", () => {
-      if ((localStorage.getItem(storageKey) ) === "system") apply("system");
-    });
-
-    // Events (scoped to this component)
-    host.addEventListener("click", (e) => {
-      const trigger = (e.target )?.closest?.("[data-menu-trigger]");
-      if (trigger && host.contains(trigger)) {
-        const expanded = trigger.getAttribute("aria-expanded") === "true";
-        openMenu(!expanded);
-        return;
-      }
-
-      const choose = (e.target )?.closest?.("[data-set-theme]");
-      if (choose && host.contains(choose)) {
-        apply(choose.getAttribute("data-set-theme") );
-        openMenu(false);
-        return;
-      }
-    });
-
-    // Close on outside click
-    document.addEventListener("click", (e) => {
-      if (!host.contains(e.target )) openMenu(false);
-    });
-
-    // Esc to close
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") openMenu(false);
-    });
-  })();
-</script>
-
 <style is:inline>
-/* Check icon ONLY on active item */
-#{containerId} [role="menuitemradio"][aria-checked="true"] [data-check] {
+/* Compact trigger tweak without touching Dropdown source */
+#{containerId}[data-compact="1"] [data-dd-trigger]{
+  height: 2.25rem;
+  padding-left: .5rem;
+  padding-right: .5rem;
+}
+
+/* Show check icon ONLY on active */
+#{containerId} [role="menuitemradio"][aria-checked="true"] [data-check]{
  opacity: 1 !important;
  transform: scale(1) !important;
 }
-</style>
+
+/* Subtle active row styling */
+#{containerId} [role="menuitemradio"][aria-checked="true"]{
+  background-color: color-mix(in hsl, hsl(var(--muted)) 70%, transparent);
+}
+</style>
+
+<script is:inline define:vars={{ containerId, storageKey, rootSelector, darkBgClass, lightBgClass, rootExtraClass }}>
+(() => {
+  const host = document.getElementById(containerId);
+  if (!host) return;
+
+  const root = rootSelector === "html"
+    ? document.documentElement
+    : document.querySelector(rootSelector) || document.documentElement;
+
+  const mql = window.matchMedia("(prefers-color-scheme: dark)");
+  let lastThemeClasses = [];
+  const itemSelector = `[data-set-theme][data-owner="${containerId}"]`;
+
+  function setRootClasses(list) {
+    lastThemeClasses.forEach(c => c && root.classList.remove(c));
+    list.filter(Boolean).forEach(c => root.classList.add(c));
+    lastThemeClasses = list.filter(Boolean);
+  }
+
+  function reflectUI(mode) {
+    const label = host.querySelector("[data-current-label]");
+    if (label) label.textContent = mode[0].toUpperCase() + mode.slice(1);
+
+    host.querySelectorAll("[data-current-icon]").forEach(el => {
+      const on = el.getAttribute("data-current-icon") === mode;
+      el.classList.toggle("wr:hidden", !on);
+      el.classList.toggle("wr:inline", on);
+    });
+
+    // Items are portaled; query document by owner
+    document.querySelectorAll(itemSelector).forEach((el) => {
+      const active = el.getAttribute("data-set-theme") === mode;
+      el.setAttribute("aria-checked", active ? "true" : "false");
+    });
+  }
+
+  function apply(mode) {
+    const resolved = mode === "system" ? (mql.matches ? "dark" : "light") : mode;
+    root.classList.toggle("dark", resolved === "dark");
+    root.setAttribute("data-theme", resolved);
+    document.documentElement.style.colorScheme = resolved;
+
+    setRootClasses([rootExtraClass, ...(resolved === "dark" ? darkBgClass : lightBgClass)]);
+
+    localStorage.setItem(storageKey, mode);
+    reflectUI(mode);
+  }
+
+  // Init
+  const saved = (localStorage.getItem(storageKey)) || "system";
+  apply(saved);
+
+  // React to system changes when mode=system
+  mql.addEventListener?.("change", () => {
+    if ((localStorage.getItem(storageKey)) === "system") apply("system");
+  });
+
+  // Listen globally because panel is portaled outside host
+  document.addEventListener("click", (e) => {
+    const btn = (e.target)?.closest?.(itemSelector);
+    if (!btn) return;
+    apply(btn.getAttribute("data-set-theme"));
+  });
+})();
+</script>