@lanrenbang/basecoat-ultra 0.1.3 → 0.1.5

package/dist/css/basecoat.css

@@ -89,7 +89,44 @@
   color-scheme: dark;
 }
 
-@import "../config.css";
+@theme {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
 
 @layer base {
   * {

package/dist/js/catppuccin-theme-switcher.js

@@ -39,6 +39,7 @@
     try {
       localStorage.setItem("catppuccin-theme", theme);
       localStorage.setItem("catppuccin-accent", accent);
+      localStorage.removeItem("basecoat-mode");
     } catch (e) {
     }
   }
@@ -46,10 +47,21 @@
     try {
       const savedTheme = localStorage.getItem("catppuccin-theme");
       const savedAccent = localStorage.getItem("catppuccin-accent");
+      const savedMode = localStorage.getItem("basecoat-mode");
       if (savedTheme && savedAccent) {
         setTheme(savedTheme, savedAccent);
+      } else if (savedMode) {
+        if (savedMode === "dark") {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
+      } else {
+        const isSystemDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+        document.documentElement.classList.toggle("dark", isSystemDark);
       }
     } catch (e) {
+      console.error("Basecoat: Theme initialization failed", e);
     }
   }
   initTheme();
@@ -57,8 +69,10 @@
     const flavorGroup = container.querySelector(".theme-flavors");
     const accentGrid = container.querySelector(".theme-accents");
     const resetButton = container.querySelector(".theme-reset");
-    let currentFlavor = localStorage.getItem("catppuccin-theme") || "latte";
-    if (!THEMES.includes(currentFlavor)) currentFlavor = "latte";
+    let currentFlavor = localStorage.getItem("catppuccin-theme");
+    if (!currentFlavor || !THEMES.includes(currentFlavor)) {
+      currentFlavor = document.documentElement.classList.contains("dark") ? "mocha" : "latte";
+    }
     if (flavorGroup) {
       flavorGroup.innerHTML = "";
       flavorGroup.className = "button-group w-full";
@@ -100,6 +114,7 @@
         btn.dataset.side = "top";
         btn.onclick = () => {
           setTheme(currentFlavor, acc);
+          updateFlavorUI();
         };
         accentGrid.appendChild(btn);
       });
@@ -116,15 +131,20 @@
     if (resetButton) {
       resetButton.addEventListener("click", () => {
         const root = document.documentElement;
+        const wasDark = root.classList.contains("dark");
         THEMES.forEach((t) => root.classList.remove(`theme-${t}`));
         ACCENTS.forEach((a) => root.classList.remove(`accent-${a}`));
         localStorage.removeItem("catppuccin-theme");
         localStorage.removeItem("catppuccin-accent");
-        if (DARK_THEMES.includes(currentFlavor)) {
+        localStorage.setItem("basecoat-mode", wasDark ? "dark" : "light");
+        if (wasDark) {
           root.classList.add("dark");
         } else {
           root.classList.remove("dark");
         }
+        currentFlavor = wasDark ? "mocha" : "latte";
+        updateFlavorUI();
+        renderAccents();
       });
     }
     updateFlavorUI();

package/dist/js/catppuccin-theme-switcher.min.js

@@ -1,5 +1,5 @@
 (() => {
-  const l = ["latte", "frappe", "macchiato", "mocha"], d = ["frappe", "macchiato", "mocha"], i = [
+  const l = ["latte", "frappe", "macchiato", "mocha"], p = ["frappe", "macchiato", "mocha"], i = [
     "rosewater",
     "flamingo",
     "pink",
@@ -15,59 +15,67 @@
     "blue",
     "lavender"
   ];
-  function f(c) {
-    if (!l.includes(c)) return {};
-    const t = { background: `var(--ctp-${c}-base)` };
-    return i.forEach((o) => {
-      t[o] = `var(--ctp-${c}-${o})`;
-    }), t;
+  function f(o) {
+    if (!l.includes(o)) return {};
+    const a = { background: `var(--ctp-${o}-base)` };
+    return i.forEach((t) => {
+      a[t] = `var(--ctp-${o}-${t})`;
+    }), a;
   }
-  function u(c, t) {
-    const o = document.documentElement;
-    l.forEach((s) => o.classList.remove(`theme-${s}`)), i.forEach((s) => o.classList.remove(`accent-${s}`)), o.classList.add(`theme-${c}`), o.classList.add(`accent-${t}`), d.includes(c) ? o.classList.add("dark") : o.classList.remove("dark");
+  function u(o, a) {
+    const t = document.documentElement;
+    l.forEach((r) => t.classList.remove(`theme-${r}`)), i.forEach((r) => t.classList.remove(`accent-${r}`)), t.classList.add(`theme-${o}`), t.classList.add(`accent-${a}`), p.includes(o) ? t.classList.add("dark") : t.classList.remove("dark");
     try {
-      localStorage.setItem("catppuccin-theme", c), localStorage.setItem("catppuccin-accent", t);
+      localStorage.setItem("catppuccin-theme", o), localStorage.setItem("catppuccin-accent", a), localStorage.removeItem("basecoat-mode");
     } catch {
     }
   }
   function h() {
     try {
-      const c = localStorage.getItem("catppuccin-theme"), t = localStorage.getItem("catppuccin-accent");
-      c && t && u(c, t);
-    } catch {
+      const o = localStorage.getItem("catppuccin-theme"), a = localStorage.getItem("catppuccin-accent"), t = localStorage.getItem("basecoat-mode");
+      if (o && a)
+        u(o, a);
+      else if (t)
+        t === "dark" ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark");
+      else {
+        const r = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+        document.documentElement.classList.toggle("dark", r);
+      }
+    } catch (o) {
+      console.error("Basecoat: Theme initialization failed", o);
     }
   }
   h();
-  const v = (c) => {
-    const t = c.querySelector(".theme-flavors"), o = c.querySelector(".theme-accents"), s = c.querySelector(".theme-reset");
-    let n = localStorage.getItem("catppuccin-theme") || "latte";
-    l.includes(n) || (n = "latte"), t && (t.innerHTML = "", t.className = "button-group w-full", l.forEach((a) => {
+  const g = (o) => {
+    const a = o.querySelector(".theme-flavors"), t = o.querySelector(".theme-accents"), r = o.querySelector(".theme-reset");
+    let n = localStorage.getItem("catppuccin-theme");
+    (!n || !l.includes(n)) && (n = document.documentElement.classList.contains("dark") ? "mocha" : "latte"), a && (a.innerHTML = "", a.className = "button-group w-full", l.forEach((c) => {
       const e = document.createElement("button");
-      e.type = "button", e.className = "btn btn-sm capitalize flex-1", e.textContent = a, e.dataset.flavor = a, t.appendChild(e);
+      e.type = "button", e.className = "btn btn-sm capitalize flex-1", e.textContent = c, e.dataset.flavor = c, a.appendChild(e);
     }));
-    const m = () => {
-      if (!t) return;
-      t.querySelectorAll("[data-flavor]").forEach((e) => {
+    const d = () => {
+      if (!a) return;
+      a.querySelectorAll("[data-flavor]").forEach((e) => {
         e.dataset.flavor === n ? (e.classList.remove("btn-outline", "btn-ghost"), e.classList.add("btn-primary")) : (e.classList.remove("btn-primary"), e.classList.add("btn-ghost"));
       });
-    }, p = () => {
-      if (!o) return;
-      o.innerHTML = "";
-      const a = f(n);
-      o.className = "theme-accents grid grid-cols-7 gap-3 place-items-center p-4 rounded-xl border border-border/50 mt-4 transition-colors duration-300", o.style.backgroundColor = a.background, i.forEach((e) => {
-        const r = document.createElement("button");
-        r.type = "button", r.className = "size-6 rounded-full border border-border/20 shadow-sm transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring", r.title = e, r.style.backgroundColor = a[e], r.dataset.tooltip = e, r.dataset.side = "top", r.onclick = () => {
-          u(n, e);
-        }, o.appendChild(r);
+    }, m = () => {
+      if (!t) return;
+      t.innerHTML = "";
+      const c = f(n);
+      t.className = "theme-accents grid grid-cols-7 gap-3 place-items-center p-4 rounded-xl border border-border/50 mt-4 transition-colors duration-300", t.style.backgroundColor = c.background, i.forEach((e) => {
+        const s = document.createElement("button");
+        s.type = "button", s.className = "size-6 rounded-full border border-border/20 shadow-sm transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring", s.title = e, s.style.backgroundColor = c[e], s.dataset.tooltip = e, s.dataset.side = "top", s.onclick = () => {
+          u(n, e), d();
+        }, t.appendChild(s);
       });
     };
-    t && t.addEventListener("click", (a) => {
-      const e = a.target.closest("[data-flavor]");
-      e && (n = e.dataset.flavor, m(), p());
-    }), s && s.addEventListener("click", () => {
-      const a = document.documentElement;
-      l.forEach((e) => a.classList.remove(`theme-${e}`)), i.forEach((e) => a.classList.remove(`accent-${e}`)), localStorage.removeItem("catppuccin-theme"), localStorage.removeItem("catppuccin-accent"), d.includes(n) ? a.classList.add("dark") : a.classList.remove("dark");
-    }), m(), p();
+    a && a.addEventListener("click", (c) => {
+      const e = c.target.closest("[data-flavor]");
+      e && (n = e.dataset.flavor, d(), m());
+    }), r && r.addEventListener("click", () => {
+      const c = document.documentElement, e = c.classList.contains("dark");
+      l.forEach((s) => c.classList.remove(`theme-${s}`)), i.forEach((s) => c.classList.remove(`accent-${s}`)), localStorage.removeItem("catppuccin-theme"), localStorage.removeItem("catppuccin-accent"), localStorage.setItem("basecoat-mode", e ? "dark" : "light"), e ? c.classList.add("dark") : c.classList.remove("dark"), n = e ? "mocha" : "latte", d(), m();
+    }), d(), m();
   };
-  window.basecoat && window.basecoat.register("catppuccin-theme-switcher", ".catppuccin-theme-switcher", v);
+  window.basecoat && window.basecoat.register("catppuccin-theme-switcher", ".catppuccin-theme-switcher", g);
 })();

package/dist/js/command.js

@@ -121,7 +121,6 @@
     input.addEventListener("keydown", handleKeyNavigation);
     if (visibleMenuItems.length > 0) {
       setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
-      visibleMenuItems[0].scrollIntoView({ block: "nearest" });
     }
     container.dataset.commandInitialized = true;
     container.dispatchEvent(new CustomEvent("basecoat:initialized"));

package/dist/js/command.min.js

@@ -70,7 +70,7 @@
         const n = r.closest("dialog.command-dialog");
         n && !e.hasAttribute("data-keep-command-open") && n.close();
       }
-    }), o.addEventListener("keydown", h), i.length > 0 && (d(s.indexOf(i[0])), i[0].scrollIntoView({ block: "nearest" })), r.dataset.commandInitialized = !0, r.dispatchEvent(new CustomEvent("basecoat:initialized"));
+    }), o.addEventListener("keydown", h), i.length > 0 && d(s.indexOf(i[0])), r.dataset.commandInitialized = !0, r.dispatchEvent(new CustomEvent("basecoat:initialized"));
   };
   window.basecoat && window.basecoat.register("command", ".command:not([data-command-initialized])", f);
 })();

package/dist/js/sidebar.js

@@ -18,14 +18,25 @@
     const breakpoint = parseInt(sidebarComponent.dataset.breakpoint) || 768;
     let open = breakpoint > 0 ? window.innerWidth >= breakpoint ? initialOpen : initialMobileOpen : initialOpen;
     const updateCurrentPageLinks = () => {
-      const currentPath = window.location.pathname.replace(/\/$/, "");
+      const currentUrl = new URL(window.location.href);
+      const currentPath = currentUrl.pathname.replace(/\/$/, "");
       sidebarComponent.querySelectorAll("a").forEach((link) => {
         if (link.hasAttribute("data-ignore-current")) return;
+        const linkUrl = new URL(link.href, window.location.origin);
+        if (linkUrl.hash) {
+          const linkPath2 = linkUrl.pathname.replace(/\/$/, "");
+          if (linkPath2 === currentPath && linkUrl.hash === currentUrl.hash) {
+            link.setAttribute("aria-current", "page");
+          } else {
+            link.removeAttribute("aria-current");
+          }
+          return;
+        }
         if (link.getAttribute("href") === "#") {
           link.removeAttribute("aria-current");
           return;
         }
-        const linkPath = new URL(link.href).pathname.replace(/\/$/, "");
+        const linkPath = linkUrl.pathname.replace(/\/$/, "");
         if (linkPath === currentPath) {
           link.setAttribute("aria-current", "page");
         } else {

package/dist/js/sidebar.min.js

@@ -1,53 +1,58 @@
 (() => {
   if (!window.history.__basecoatPatched) {
     const t = window.history.pushState;
-    window.history.pushState = function(...i) {
-      t.apply(this, i), window.dispatchEvent(new Event("basecoat:locationchange"));
+    window.history.pushState = function(...n) {
+      t.apply(this, n), window.dispatchEvent(new Event("basecoat:locationchange"));
     };
-    const r = window.history.replaceState;
-    window.history.replaceState = function(...i) {
-      r.apply(this, i), window.dispatchEvent(new Event("basecoat:locationchange"));
+    const s = window.history.replaceState;
+    window.history.replaceState = function(...n) {
+      s.apply(this, n), window.dispatchEvent(new Event("basecoat:locationchange"));
     }, window.history.__basecoatPatched = !0;
   }
-  const u = (t) => {
-    const r = t.dataset.initialOpen !== "false", i = t.dataset.initialMobileOpen === "true", s = parseInt(t.dataset.breakpoint) || 768;
-    let c = s > 0 ? window.innerWidth >= s ? r : i : r;
-    const o = () => {
-      const a = window.location.pathname.replace(/\/$/, "");
+  const h = (t) => {
+    const s = t.dataset.initialOpen !== "false", n = t.dataset.initialMobileOpen === "true", d = parseInt(t.dataset.breakpoint) || 768;
+    let o = d > 0 ? window.innerWidth >= d ? s : n : s;
+    const l = () => {
+      const a = new URL(window.location.href), i = a.pathname.replace(/\/$/, "");
       t.querySelectorAll("a").forEach((e) => {
         if (e.hasAttribute("data-ignore-current")) return;
+        const c = new URL(e.href, window.location.origin);
+        if (c.hash) {
+          c.pathname.replace(/\/$/, "") === i && c.hash === a.hash ? e.setAttribute("aria-current", "page") : e.removeAttribute("aria-current");
+          return;
+        }
         if (e.getAttribute("href") === "#") {
           e.removeAttribute("aria-current");
           return;
         }
-        new URL(e.href).pathname.replace(/\/$/, "") === a ? e.setAttribute("aria-current", "page") : e.removeAttribute("aria-current");
+        c.pathname.replace(/\/$/, "") === i ? e.setAttribute("aria-current", "page") : e.removeAttribute("aria-current");
       });
-    }, l = () => {
-      t.setAttribute("aria-hidden", !c), c ? t.removeAttribute("inert") : t.setAttribute("inert", "");
-    }, n = (a) => {
-      c = a, l();
+    }, u = () => {
+      t.setAttribute("aria-hidden", !o), o ? t.removeAttribute("inert") : t.setAttribute("inert", "");
+    }, r = (a) => {
+      o = a, u();
     }, w = t.id;
     document.addEventListener("basecoat:sidebar", (a) => {
       if (!(a.detail?.id && a.detail.id !== w))
         switch (a.detail?.action) {
           case "open":
-            n(!0);
+            r(!0);
             break;
           case "close":
-            n(!1);
+            r(!1);
             break;
           default:
-            n(!c);
+            r(!o);
             break;
         }
     }), t.addEventListener("click", (a) => {
-      const e = a.target, d = t.querySelector("nav");
-      if (window.innerWidth < s && e.closest("a, button") && !e.closest("[data-keep-mobile-sidebar-open]")) {
-        document.activeElement && document.activeElement.blur(), n(!1);
+      const i = a.target, e = t.querySelector("nav");
+      if (window.innerWidth < d && i.closest("a, button") && !i.closest("[data-keep-mobile-sidebar-open]")) {
+        document.activeElement && document.activeElement.blur(), r(!1);
         return;
       }
-      (e === t || d && !d.contains(e)) && (document.activeElement && document.activeElement.blur(), n(!1));
-    }), window.addEventListener("popstate", o), window.addEventListener("basecoat:locationchange", o), l(), o(), t.dataset.sidebarInitialized = !0, t.dispatchEvent(new CustomEvent("basecoat:initialized"));
+      (i === t || e && !e.contains(i)) && (document.activeElement && document.activeElement.blur(), r(!1));
+    }), window.addEventListener("popstate", l), window.addEventListener("basecoat:locationchange", l), u(), l(), t.dataset.sidebarInitialized = !0, t.dispatchEvent(new CustomEvent("basecoat:initialized"));
   };
-  window.basecoat && window.basecoat.register("sidebar", ".sidebar:not([data-sidebar-initialized])", u);
+  window.basecoat && window.basecoat.register("sidebar", ".sidebar:not([data-sidebar-initialized])", h);
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanrenbang/basecoat-ultra",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Basecoat UI - Ultra edition. A Tailwind-first component library.",
   "type": "module",
   "main": "./dist/js/all.js",
@@ -15,8 +15,9 @@
   ],
   "exports": {
     ".": "./dist/js/all.js",
-    "./accordion": "./dist/js/accordion.js",
     "./basecoat": "./dist/js/basecoat.js",
+    "./css": "./dist/css/basecoat.css",
+    "./accordion": "./dist/js/accordion.js",
     "./carousel": "./dist/js/carousel.js",
     "./catppuccin-theme-switcher": "./dist/js/catppuccin-theme-switcher.js",
     "./command": "./dist/js/command.js",
@@ -51,5 +52,13 @@
   "dependencies": {
     "flatpickr": "^4.6.13",
     "split.js": "^1.6.5"
+  },
+  "devDependencies": {
+    "@lanrenbang/basecoat-ultra": "^0.1.4",
+    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/bun": "latest",
+    "tailwindcss": "^4.1.18",
+    "vite": "^7.3.0"
   }
-}
+}