npm - boltdocs - Versions diffs - 1.3.0 → 1.3.1 - Mend

boltdocs 1.3.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/dist/node/index.js +21 -6
package/dist/node/index.mjs +21 -6
package/package.json +1 -1
package/src/client/app/index.tsx +344 -344
package/src/client/app/preload.tsx +56 -56
package/src/client/index.ts +40 -40
package/src/client/ssr.tsx +51 -51
package/src/client/theme/components/CodeBlock/CodeBlock.tsx +76 -76
package/src/client/theme/components/CodeBlock/index.ts +1 -1
package/src/client/theme/components/PackageManagerTabs/PackageManagerTabs.tsx +154 -154
package/src/client/theme/components/PackageManagerTabs/index.ts +1 -1
package/src/client/theme/components/PackageManagerTabs/pkg-tabs.css +64 -64
package/src/client/theme/components/Playground/Playground.tsx +124 -124
package/src/client/theme/components/Playground/index.ts +1 -1
package/src/client/theme/components/Playground/playground.css +168 -168
package/src/client/theme/components/Video/Video.tsx +84 -84
package/src/client/theme/components/Video/index.ts +1 -1
package/src/client/theme/components/Video/video.css +41 -41
package/src/client/theme/components/mdx/Admonition.tsx +80 -80
package/src/client/theme/components/mdx/Badge.tsx +31 -31
package/src/client/theme/components/mdx/Button.tsx +50 -50
package/src/client/theme/components/mdx/Card.tsx +80 -80
package/src/client/theme/components/mdx/List.tsx +57 -57
package/src/client/theme/components/mdx/Tabs.tsx +94 -94
package/src/client/theme/components/mdx/index.ts +18 -18
package/src/client/theme/components/mdx/mdx-components.css +424 -424
package/src/client/theme/icons/bun.tsx +62 -62
package/src/client/theme/icons/deno.tsx +20 -20
package/src/client/theme/icons/discord.tsx +12 -12
package/src/client/theme/icons/github.tsx +15 -15
package/src/client/theme/icons/npm.tsx +13 -13
package/src/client/theme/icons/pnpm.tsx +72 -72
package/src/client/theme/icons/twitter.tsx +12 -12
package/src/client/theme/styles/markdown.css +343 -343
package/src/client/theme/styles/variables.css +162 -162
package/src/client/theme/styles.css +37 -37
package/src/client/theme/ui/BackgroundGradient/BackgroundGradient.tsx +10 -10
package/src/client/theme/ui/BackgroundGradient/index.ts +1 -1
package/src/client/theme/ui/Breadcrumbs/Breadcrumbs.tsx +68 -68
package/src/client/theme/ui/Breadcrumbs/index.ts +1 -1
package/src/client/theme/ui/Footer/footer.css +32 -32
package/src/client/theme/ui/Head/Head.tsx +69 -69
package/src/client/theme/ui/Head/index.ts +1 -1
package/src/client/theme/ui/LanguageSwitcher/LanguageSwitcher.tsx +125 -125
package/src/client/theme/ui/LanguageSwitcher/index.ts +1 -1
package/src/client/theme/ui/LanguageSwitcher/language-switcher.css +98 -98
package/src/client/theme/ui/Layout/Layout.tsx +202 -202
package/src/client/theme/ui/Layout/base.css +76 -76
package/src/client/theme/ui/Layout/index.ts +2 -2
package/src/client/theme/ui/Layout/pagination.css +72 -72
package/src/client/theme/ui/Layout/responsive.css +36 -36
package/src/client/theme/ui/Link/Link.tsx +254 -254
package/src/client/theme/ui/Link/index.ts +2 -2
package/src/client/theme/ui/Loading/Loading.tsx +10 -10
package/src/client/theme/ui/Loading/index.ts +1 -1
package/src/client/theme/ui/Loading/loading.css +30 -30
package/src/client/theme/ui/Navbar/GithubStars.tsx +27 -27
package/src/client/theme/ui/Navbar/Navbar.tsx +145 -145
package/src/client/theme/ui/Navbar/index.ts +2 -2
package/src/client/theme/ui/Navbar/navbar.css +233 -233
package/src/client/theme/ui/NotFound/NotFound.tsx +19 -19
package/src/client/theme/ui/NotFound/index.ts +1 -1
package/src/client/theme/ui/NotFound/not-found.css +64 -64
package/src/client/theme/ui/OnThisPage/OnThisPage.tsx +235 -235
package/src/client/theme/ui/OnThisPage/index.ts +1 -1
package/src/client/theme/ui/OnThisPage/toc.css +132 -132
package/src/client/theme/ui/PoweredBy/PoweredBy.tsx +18 -18
package/src/client/theme/ui/PoweredBy/index.ts +1 -1
package/src/client/theme/ui/PoweredBy/powered-by.css +76 -76
package/src/client/theme/ui/SearchDialog/SearchDialog.tsx +199 -199
package/src/client/theme/ui/SearchDialog/index.ts +1 -1
package/src/client/theme/ui/SearchDialog/search.css +152 -152
package/src/client/theme/ui/Sidebar/Sidebar.tsx +204 -204
package/src/client/theme/ui/Sidebar/index.ts +1 -1
package/src/client/theme/ui/Sidebar/sidebar.css +236 -236
package/src/client/theme/ui/ThemeToggle/ThemeToggle.tsx +69 -69
package/src/client/theme/ui/ThemeToggle/index.ts +1 -1
package/src/client/theme/ui/VersionSwitcher/VersionSwitcher.tsx +136 -136
package/src/client/theme/ui/VersionSwitcher/index.ts +1 -1
package/src/client/types.ts +50 -50
package/src/client/utils.ts +26 -26
package/src/node/cache.ts +408 -408
package/src/node/config.ts +192 -192
package/src/node/index.ts +21 -21
package/src/node/mdx.ts +120 -120
package/src/node/plugin/entry.ts +58 -58
package/src/node/plugin/html.ts +55 -55
package/src/node/plugin/index.ts +193 -193
package/src/node/plugin/types.ts +11 -11
package/src/node/routes/cache.ts +28 -28
package/src/node/routes/index.ts +167 -167
package/src/node/routes/parser.ts +153 -127
package/src/node/routes/sorter.ts +42 -42
package/src/node/routes/types.ts +49 -49
package/src/node/ssg/index.ts +114 -114
package/src/node/ssg/meta.ts +34 -34
package/src/node/ssg/options.ts +13 -13
package/src/node/ssg/sitemap.ts +54 -54
package/src/node/utils.ts +134 -134
package/tsconfig.json +20 -20
package/tsup.config.ts +22 -22

package/src/client/theme/ui/Head/Head.tsx CHANGED Viewed

@@ -1,69 +1,69 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-interface HeadProps {
-  siteTitle: string;
-  siteDescription?: string;
-  routes: Array<{ path: string; title: string; description?: string }>;
-}
-export function Head({ siteTitle, siteDescription, routes }: HeadProps) {
-  const location = useLocation();
-  useEffect(() => {
-    // Find the current route's metadata
-    const currentRoute = routes.find((r) => r.path === location.pathname);
-    const pageTitle = currentRoute?.title;
-    const pageDescription = currentRoute?.description || siteDescription || "";
-    // Update document title
-    document.title = pageTitle ? `${pageTitle} | ${siteTitle}` : siteTitle;
-    // Update or create meta description
-    let metaDesc = document.querySelector(
-      'meta[name="description"]',
-    ) as HTMLMetaElement | null;
-    if (!metaDesc) {
-      metaDesc = document.createElement("meta");
-      metaDesc.name = "description";
-      document.head.appendChild(metaDesc);
-    }
-    metaDesc.content = pageDescription;
-    // Update OG tags
-    setMetaTag("property", "og:title", document.title);
-    setMetaTag("property", "og:description", pageDescription);
-    setMetaTag("property", "og:type", "article");
-    setMetaTag("property", "og:url", window.location.href);
-    // Twitter card
-    setMetaTag("name", "twitter:card", "summary");
-    setMetaTag("name", "twitter:title", document.title);
-    setMetaTag("name", "twitter:description", pageDescription);
-    // Canonical URL
-    let canonical = document.querySelector(
-      'link[rel="canonical"]',
-    ) as HTMLLinkElement | null;
-    if (!canonical) {
-      canonical = document.createElement("link");
-      canonical.rel = "canonical";
-      document.head.appendChild(canonical);
-    }
-    canonical.href = window.location.origin + location.pathname;
-  }, [location.pathname, siteTitle, siteDescription, routes]);
-  return null; // This component only manages <head>, no visual output
-}
-function setMetaTag(attr: "name" | "property", key: string, content: string) {
-  let tag = document.querySelector(
-    `meta[${attr}="${key}"]`,
-  ) as HTMLMetaElement | null;
-  if (!tag) {
-    tag = document.createElement("meta");
-    tag.setAttribute(attr, key);
-    document.head.appendChild(tag);
-  }
-  tag.content = content;
-}
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+interface HeadProps {
+  siteTitle: string;
+  siteDescription?: string;
+  routes: Array<{ path: string; title: string; description?: string }>;
+}
+export function Head({ siteTitle, siteDescription, routes }: HeadProps) {
+  const location = useLocation();
+  useEffect(() => {
+    // Find the current route's metadata
+    const currentRoute = routes.find((r) => r.path === location.pathname);
+    const pageTitle = currentRoute?.title;
+    const pageDescription = currentRoute?.description || siteDescription || "";
+    // Update document title
+    document.title = pageTitle ? `${pageTitle} | ${siteTitle}` : siteTitle;
+    // Update or create meta description
+    let metaDesc = document.querySelector(
+      'meta[name="description"]',
+    ) as HTMLMetaElement | null;
+    if (!metaDesc) {
+      metaDesc = document.createElement("meta");
+      metaDesc.name = "description";
+      document.head.appendChild(metaDesc);
+    }
+    metaDesc.content = pageDescription;
+    // Update OG tags
+    setMetaTag("property", "og:title", document.title);
+    setMetaTag("property", "og:description", pageDescription);
+    setMetaTag("property", "og:type", "article");
+    setMetaTag("property", "og:url", window.location.href);
+    // Twitter card
+    setMetaTag("name", "twitter:card", "summary");
+    setMetaTag("name", "twitter:title", document.title);
+    setMetaTag("name", "twitter:description", pageDescription);
+    // Canonical URL
+    let canonical = document.querySelector(
+      'link[rel="canonical"]',
+    ) as HTMLLinkElement | null;
+    if (!canonical) {
+      canonical = document.createElement("link");
+      canonical.rel = "canonical";
+      document.head.appendChild(canonical);
+    }
+    canonical.href = window.location.origin + location.pathname;
+  }, [location.pathname, siteTitle, siteDescription, routes]);
+  return null; // This component only manages <head>, no visual output
+}
+function setMetaTag(attr: "name" | "property", key: string, content: string) {
+  let tag = document.querySelector(
+    `meta[${attr}="${key}"]`,
+  ) as HTMLMetaElement | null;
+  if (!tag) {
+    tag = document.createElement("meta");
+    tag.setAttribute(attr, key);
+    document.head.appendChild(tag);
+  }
+  tag.content = content;
+}

package/src/client/theme/ui/Head/index.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export { Head } from "./Head";
1	+ export { Head } from "./Head";

package/src/client/theme/ui/LanguageSwitcher/LanguageSwitcher.tsx CHANGED Viewed

@@ -1,125 +1,125 @@
-import React, { useState, useRef, useEffect } from "react";
-import { Globe, ChevronDown } from "lucide-react";
-import { useNavigate, useLocation } from "react-router-dom";
-import { BoltdocsI18nConfig } from "../../../../node/config";
-import { ComponentRoute } from "../../../types";
-function getBaseFilePath(
-  filePath: string,
-  version: string | undefined,
-  locale: string | undefined,
-): string {
-  let path = filePath;
-  if (version && (path === version || path.startsWith(version + "/"))) {
-    path = path === version ? "index.md" : path.slice(version.length + 1);
-  }
-  if (locale && (path === locale || path.startsWith(locale + "/"))) {
-    path = path === locale ? "index.md" : path.slice(locale.length + 1);
-  }
-  return path;
-}
-export function LanguageSwitcher({
-  i18n,
-  currentLocale,
-  allRoutes,
-}: {
-  i18n: BoltdocsI18nConfig;
-  currentLocale: string;
-  allRoutes: ComponentRoute[];
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const navigate = useNavigate();
-  const location = useLocation();
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const handleSelect = (locale: string) => {
-    setIsOpen(false);
-    if (locale === currentLocale) return;
-    const currentRoute = allRoutes.find((r) => r.path === location.pathname);
-    let targetPath = "/";
-    if (currentRoute) {
-      const baseFile = getBaseFilePath(
-        currentRoute.filePath,
-        currentRoute.version,
-        currentRoute.locale,
-      );
-      const targetRoute = allRoutes.find(
-        (r) =>
-          getBaseFilePath(r.filePath, r.version, r.locale) === baseFile &&
-          (r.locale || i18n.defaultLocale) === locale &&
-          r.version === currentRoute.version,
-      );
-      if (targetRoute) {
-        targetPath = targetRoute.path;
-      } else {
-        const defaultIndexRoute = allRoutes.find(
-          (r) =>
-            getBaseFilePath(r.filePath, r.version, r.locale) === "index.md" &&
-            (r.locale || i18n.defaultLocale) === locale &&
-            r.version === currentRoute.version,
-        );
-        targetPath = defaultIndexRoute
-          ? defaultIndexRoute.path
-          : locale === i18n.defaultLocale
-            ? currentRoute.version
-              ? `/${currentRoute.version}`
-              : "/"
-            : currentRoute.version
-              ? `/${currentRoute.version}/${locale}`
-              : `/${locale}`;
-      }
-    } else {
-      targetPath = locale === i18n.defaultLocale ? "/" : `/${locale}`;
-    }
-    navigate(targetPath);
-  };
-  return (
-    <div className="boltdocs-language-switcher" ref={dropdownRef}>
-      <button
-        className="language-btn"
-        onClick={() => setIsOpen(!isOpen)}
-        aria-label="Switch language"
-        aria-expanded={isOpen}
-        aria-haspopup="listbox"
-      >
-        <Globe size={18} />
-        <span className="language-label">
-          {i18n.locales[currentLocale] || currentLocale}
-        </span>
-        <ChevronDown size={14} />
-      </button>
-      {isOpen && (
-        <div className="language-dropdown">
-          {Object.entries(i18n.locales).map(([key, label]) => (
-            <button
-              key={key}
-              className={`language-option ${key === currentLocale ? "active" : ""}`}
-              onClick={() => handleSelect(key)}
-            >
-              {label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+import React, { useState, useRef, useEffect } from "react";
+import { Globe, ChevronDown } from "lucide-react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { BoltdocsI18nConfig } from "../../../../node/config";
+import { ComponentRoute } from "../../../types";
+function getBaseFilePath(
+  filePath: string,
+  version: string | undefined,
+  locale: string | undefined,
+): string {
+  let path = filePath;
+  if (version && (path === version || path.startsWith(version + "/"))) {
+    path = path === version ? "index.md" : path.slice(version.length + 1);
+  }
+  if (locale && (path === locale || path.startsWith(locale + "/"))) {
+    path = path === locale ? "index.md" : path.slice(locale.length + 1);
+  }
+  return path;
+}
+export function LanguageSwitcher({
+  i18n,
+  currentLocale,
+  allRoutes,
+}: {
+  i18n: BoltdocsI18nConfig;
+  currentLocale: string;
+  allRoutes: ComponentRoute[];
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+  const location = useLocation();
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleSelect = (locale: string) => {
+    setIsOpen(false);
+    if (locale === currentLocale) return;
+    const currentRoute = allRoutes.find((r) => r.path === location.pathname);
+    let targetPath = "/";
+    if (currentRoute) {
+      const baseFile = getBaseFilePath(
+        currentRoute.filePath,
+        currentRoute.version,
+        currentRoute.locale,
+      );
+      const targetRoute = allRoutes.find(
+        (r) =>
+          getBaseFilePath(r.filePath, r.version, r.locale) === baseFile &&
+          (r.locale || i18n.defaultLocale) === locale &&
+          r.version === currentRoute.version,
+      );
+      if (targetRoute) {
+        targetPath = targetRoute.path;
+      } else {
+        const defaultIndexRoute = allRoutes.find(
+          (r) =>
+            getBaseFilePath(r.filePath, r.version, r.locale) === "index.md" &&
+            (r.locale || i18n.defaultLocale) === locale &&
+            r.version === currentRoute.version,
+        );
+        targetPath = defaultIndexRoute
+          ? defaultIndexRoute.path
+          : locale === i18n.defaultLocale
+            ? currentRoute.version
+              ? `/${currentRoute.version}`
+              : "/"
+            : currentRoute.version
+              ? `/${currentRoute.version}/${locale}`
+              : `/${locale}`;
+      }
+    } else {
+      targetPath = locale === i18n.defaultLocale ? "/" : `/${locale}`;
+    }
+    navigate(targetPath);
+  };
+  return (
+    <div className="boltdocs-language-switcher" ref={dropdownRef}>
+      <button
+        className="language-btn"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-label="Switch language"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        <Globe size={18} />
+        <span className="language-label">
+          {i18n.locales[currentLocale] || currentLocale}
+        </span>
+        <ChevronDown size={14} />
+      </button>
+      {isOpen && (
+        <div className="language-dropdown">
+          {Object.entries(i18n.locales).map(([key, label]) => (
+            <button
+              key={key}
+              className={`language-option ${key === currentLocale ? "active" : ""}`}
+              onClick={() => handleSelect(key)}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/theme/ui/LanguageSwitcher/index.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export { LanguageSwitcher } from "./LanguageSwitcher";
1	+ export { LanguageSwitcher } from "./LanguageSwitcher";

package/src/client/theme/ui/LanguageSwitcher/language-switcher.css CHANGED Viewed

@@ -1,98 +1,98 @@
-.boltdocs-language-switcher {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.language-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.4rem 0.6rem;
-  background: transparent;
-  color: var(--ld-text-muted);
-  border: none;
-  border-radius: var(--ld-radius-md);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-.language-btn svg {
-  width: 15px;
-  height: 15px;
-  opacity: 0.8;
-}
-.language-btn:hover {
-  background-color: var(--ld-bg-mute);
-  color: var(--ld-text-main);
-}
-.language-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 0.35rem;
-  min-width: 130px;
-  background-color: rgba(15, 15, 24, 0.85); /* Smooth translucent dark match */
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--ld-border-strong);
-  border-radius: var(--ld-radius-md);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-  padding: 0.35rem;
-  z-index: 200;
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  animation: languageDropdownIn 0.15s ease-out;
-}
-@keyframes languageDropdownIn {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-/* Light mode fallback */
-[data-theme="light"] .language-dropdown,
-.theme-light .language-dropdown {
-  background-color: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-}
-.language-option {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: 0.4rem 0.6rem;
-  background: transparent;
-  border: none;
-  border-radius: var(--ld-radius-sm);
-  color: var(--ld-text-muted);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
-}
-.language-option:hover {
-  background-color: var(--ld-bg-mute);
-  color: var(--ld-text-main);
-}
-.language-option.active {
-  background-color: var(--ld-color-primary-muted);
-  color: var(--ld-color-primary);
-}
+.boltdocs-language-switcher {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.language-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.6rem;
+  background: transparent;
+  color: var(--ld-text-muted);
+  border: none;
+  border-radius: var(--ld-radius-md);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+}
+.language-btn svg {
+  width: 15px;
+  height: 15px;
+  opacity: 0.8;
+}
+.language-btn:hover {
+  background-color: var(--ld-bg-mute);
+  color: var(--ld-text-main);
+}
+.language-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 0.35rem;
+  min-width: 130px;
+  background-color: rgba(15, 15, 24, 0.85); /* Smooth translucent dark match */
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--ld-border-strong);
+  border-radius: var(--ld-radius-md);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  padding: 0.35rem;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  animation: languageDropdownIn 0.15s ease-out;
+}
+@keyframes languageDropdownIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* Light mode fallback */
+[data-theme="light"] .language-dropdown,
+.theme-light .language-dropdown {
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+.language-option {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 0.4rem 0.6rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--ld-radius-sm);
+  color: var(--ld-text-muted);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+}
+.language-option:hover {
+  background-color: var(--ld-bg-mute);
+  color: var(--ld-text-main);
+}
+.language-option.active {
+  background-color: var(--ld-color-primary-muted);
+  color: var(--ld-color-primary);
+}