varvara-typedoc-theme 0.2.0 → 0.3.0

package/assets/overrides.css

@@ -1,33 +1,26 @@
-@media (prefers-color-scheme: light) {
-  :root {
-    --va-color-foreground: #29353d;
-    --va-color-background: #f3f5f7;
-    --va-border-color: LightGray;
-    --va-color-primary: RoyalBlue;
-  }
+[data-theme='light'] {
+  color-scheme: light;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --va-color-foreground: #b3ccd6;
-    --va-color-background: #2a303c;
-    --va-border-color: LightSlateGray;
-    --va-color-primary: LightSkyBlue;
-  }
+[data-theme='dark'] {
+  color-scheme: dark;
 }
 
-[data-theme='light'] {
-  --va-color-foreground: #29353d;
-  --va-color-background: #f3f5f7;
-  --va-border-color: LightGray;
-  --va-color-primary: RoyalBlue;
+* {
+  box-sizing: border-box;
 }
 
-[data-theme='dark'] {
-  --va-color-foreground: #b3ccd6;
-  --va-color-background: #2a303c;
-  --va-border-color: LightSlateGray;
-  --va-color-primary: LightSkyBlue;
+.va-collapse {
+  overflow: hidden;
+}
+
+.va-button {
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  flex: 1;
 }
 
 body {
@@ -61,64 +54,20 @@ a {
   gap: 1rem;
 }
 
-.search {
-  position: relative;
-  display: flex;
-  margin-bottom: 1rem;
-}
-
-#tsd-search.has-focus {
-  background-color: transparent;
-}
-
-.search input,
-.search a:not([href='#']) {
-  flex: 1;
-}
-
-.search a[href='#'] {
-  display: none;
-}
-
-#tsd-search .field {
-  position: static;
-  width: 100%;
-}
-
-#tsd-search .field label {
-  position: static;
-}
-
-#tsd-search .field input {
-  top: auto;
-  font-size: 1rem;
-  opacity: 1; // Temporally
-}
-
-#tsd-search.has-focus .field input {
-  display: flex;
+#tsd-search-input {
+  border-radius: 0;
+  border-width: var(--va-input-border-width);
+  border-color: var(--va-input-border-color);
 }
 
-#tsd-search .results {
-  top: 100%;
-  z-index: 1;
+dialog {
+  background-color: var(--va-color-background);
 }
 
-.navigation-links a {
-  display: flex;
-}
 .navigation-links a span {
   flex: 1;
 }
 
-.navigation-links a svg {
-  color: var(--va-color-foreground);
-}
-
-.navigation-links a:active svg {
-  color: currentColor;
-}
-
 .settings .settings-label {
   margin-top: 1em;
   text-transform: none;
@@ -132,12 +81,12 @@ a {
 
 .settings .va-select {
   width: 100%;
-  border-left: 0;
+  border-left-color: transparent;
   border-right: 0;
   border-bottom: 0;
 }
 
-.settings .va-select-group {
+.settings label:has(.va-select) {
   padding-left: 0 !important;
 }
 
@@ -145,15 +94,6 @@ a {
   margin-top: 0;
 }
 
-.va-collapse {
-  overflow: hidden;
-}
-
-.va-button {
-  display: flex;
-  align-items: center;
-}
-
 .tsd-signature,
 pre {
   border: var(--va-border-width) solid var(--va-border-color);
@@ -176,9 +116,6 @@ footer {
   .page-toolbar {
     margin-top: 1rem;
   }
-  .search a[href='#'] {
-    display: inline-block;
-  }
   .has-menu .col-sidebar {
     padding: 1rem;
   }
@@ -194,7 +131,7 @@ footer {
   .container-main {
     grid-template-areas: 'header content' 'sidebar content';
     grid-auto-rows: auto 1fr;
-    margin: var(--va-space-8) 0;
+    margin: var(--va-space-8) auto;
   }
   .container {
     padding: 0 var(--va-space-8);

package/dist/index.js

@@ -2,27 +2,21 @@ import { createRequire } from "node:module";
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/themes/VarvaraTheme.tsx
-import {
-  DefaultTheme as DefaultTheme2,
-  JSX as JSX6,
-  RendererEvent
-} from "typedoc";
+import { DefaultTheme as DefaultTheme2, JSX as JSX6, RendererEvent } from "typedoc";
 import * as path from "path";
 import * as fs from "fs";
 import { fileURLToPath } from "url";
 
 // src/themes/VarvaraThemeContext.ts
-import {
-  DefaultThemeRenderContext as DefaultThemeRenderContext3
-} from "typedoc";
+import { DefaultThemeRenderContext as DefaultThemeRenderContext3 } from "typedoc";
 
 // src/partials/footer.tsx
-import { JSX } from "typedoc";
+import { i18n, JSX } from "typedoc";
 function footer(context) {
   const hideGenerator = context.options.getValue("hideGenerator");
   let generatorDisplay = /* @__PURE__ */ JSX.createElement(JSX.Fragment, null);
   if (!hideGenerator) {
-    const message = context.i18n.theme_generated_using_typedoc();
+    const message = i18n.theme_generated_using_typedoc();
     const index = message.indexOf("TypeDoc");
     if (index == -1) {
       generatorDisplay = /* @__PURE__ */ JSX.createElement("p", {
@@ -61,7 +55,7 @@ function footer(context) {
 }
 
 // src/partials/sidebar.tsx
-import { JSX as JSX2 } from "typedoc";
+import { i18n as i18n2, JSX as JSX2 } from "typedoc";
 function sidebar(context) {
   const navigation = context.getNavigation();
   return (props) => {
@@ -71,12 +65,9 @@ function sidebar(context) {
       class: "va-collapse tsd-accordion"
     }, /* @__PURE__ */ JSX2.createElement("summary", null, /* @__PURE__ */ JSX2.createElement("a", {
       href: context.urlTo(props.project)
-    }, context.i18n.kind_plural_module())), navigation.map((item) => /* @__PURE__ */ JSX2.createElement("a", {
+    }, i18n2.kind_plural_module())), navigation.map((item) => /* @__PURE__ */ JSX2.createElement("a", {
       href: `${context.relativeURL("./")}/${item.path}`,
-      class: [
-        "va-button",
-        item.path?.includes(props.url) && "va-button--active"
-      ].join(" ")
+      class: ["va-button", item.path?.includes(props.url) && "va-button--active"].join(" ")
     }, /* @__PURE__ */ JSX2.createElement("svg", {
       width: "20",
       height: "20",
@@ -90,10 +81,7 @@ function sidebar(context) {
 }
 
 // src/partials/navigation.tsx
-import {
-  JSX as JSX3,
-  ReflectionFlag
-} from "typedoc";
+import { JSX as JSX3, ReflectionFlag, i18n as i18n3, translateTagName, ReflectionFlags } from "typedoc";
 function pageSidebar(context) {
   return (props) => {
     return /* @__PURE__ */ JSX3.createElement("div", {
@@ -114,32 +102,30 @@ function settings(context) {
     for (const key of Object.keys(defaultFilters)) {
       if (key.startsWith("@")) {
         const filterName = key.substring(1).replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-        visibilityOptions.push(buildFilterItem(context, filterName, context.internationalization.translateTagName(key), defaultFilters[key]));
+        visibilityOptions.push(buildFilterItem(context, filterName, translateTagName(key), defaultFilters[key]));
       } else if (key === "protected" && !context.options.getValue("excludeProtected") || key === "private" && !context.options.getValue("excludePrivate") || key === "external" && !context.options.getValue("excludeExternals") || key === "inherited") {
-        visibilityOptions.push(buildFilterItem(context, key, context.internationalization.flagString(flagOptionNameToReflectionFlag[key]), defaultFilters[key]));
+        visibilityOptions.push(buildFilterItem(context, key, ReflectionFlags.flagString(flagOptionNameToReflectionFlag[key]), defaultFilters[key]));
       }
     }
     return /* @__PURE__ */ JSX3.createElement("details", {
       class: "va-collapse settings tsd-accordion",
       open: false
-    }, /* @__PURE__ */ JSX3.createElement("summary", null, context.i18n.theme_settings()), visibilityOptions.length && /* @__PURE__ */ JSX3.createElement("div", {
+    }, /* @__PURE__ */ JSX3.createElement("summary", null, i18n3.theme_settings()), visibilityOptions.length && /* @__PURE__ */ JSX3.createElement("div", {
       class: "tsd-filter-visibility"
     }, /* @__PURE__ */ JSX3.createElement("span", {
       class: "settings-label"
-    }, context.i18n.theme_member_visibility()), /* @__PURE__ */ JSX3.createElement("ul", {
+    }, i18n3.theme_member_visibility()), /* @__PURE__ */ JSX3.createElement("ul", {
       id: "tsd-filter-options"
-    }, ...visibilityOptions)), /* @__PURE__ */ JSX3.createElement("div", {
-      class: "va-select-group"
-    }, /* @__PURE__ */ JSX3.createElement("label", null, context.i18n.theme_theme()), /* @__PURE__ */ JSX3.createElement("select", {
+    }, ...visibilityOptions)), /* @__PURE__ */ JSX3.createElement("label", null, /* @__PURE__ */ JSX3.createElement("span", null, i18n3.theme_theme()), /* @__PURE__ */ JSX3.createElement("select", {
       id: "tsd-theme",
       class: "va-select"
     }, /* @__PURE__ */ JSX3.createElement("option", {
       value: "os"
-    }, context.i18n.theme_os()), /* @__PURE__ */ JSX3.createElement("option", {
+    }, i18n3.theme_os()), /* @__PURE__ */ JSX3.createElement("option", {
       value: "light"
-    }, context.i18n.theme_light()), /* @__PURE__ */ JSX3.createElement("option", {
+    }, i18n3.theme_light()), /* @__PURE__ */ JSX3.createElement("option", {
       value: "dark"
-    }, context.i18n.theme_dark()))));
+    }, i18n3.theme_dark()))));
   };
 }
 function buildSectionNavigation(context, headings) {
@@ -208,52 +194,39 @@ function pageNavigation(context) {
     return /* @__PURE__ */ JSX3.createElement("details", {
       open: false,
       class: "va-collapse page-navigation tsd-accordion"
-    }, /* @__PURE__ */ JSX3.createElement("summary", null, context.i18n.theme_on_this_page()), sections);
+    }, /* @__PURE__ */ JSX3.createElement("summary", null, i18n3.theme_on_this_page()), sections);
   };
 }
 
 // src/partials/toolbar.tsx
-import {
-  DeclarationReflection,
-  JSX as JSX4,
-  ProjectReflection
-} from "typedoc";
+import { i18n as i18n4, DeclarationReflection, JSX as JSX4, ProjectReflection } from "typedoc";
 function toolbar(context) {
   return (props) => /* @__PURE__ */ JSX4.createElement("header", {
     class: "page-toolbar"
   }, /* @__PURE__ */ JSX4.createElement("div", {
-    class: "search",
-    id: "tsd-search"
-  }, /* @__PURE__ */ JSX4.createElement("div", {
-    class: "field va-button-group"
+    class: "va-button-group"
   }, /* @__PURE__ */ JSX4.createElement("div", {
     class: "va-button-group va-button-group--horizontal"
   }, /* @__PURE__ */ JSX4.createElement("a", {
     href: context.options.getValue("titleLink") || context.relativeURL("index.html"),
-    class: "va-button"
+    class: "title va-button"
   }, /* @__PURE__ */ JSX4.createElement("b", null, props.project.name), (props.project instanceof DeclarationReflection || props.project instanceof ProjectReflection) && props.project.packageVersion && /* @__PURE__ */ JSX4.createElement("span", {
     class: "version-badge"
-  }, "v", props.project.packageVersion)), /* @__PURE__ */ JSX4.createElement("label", {
-    for: "tsd-search-field",
-    class: "va-button"
-  }, context.icons.search()), /* @__PURE__ */ JSX4.createElement("a", {
-    href: "#",
+  }, "v", props.project.packageVersion)), /* @__PURE__ */ JSX4.createElement("button", {
+    id: "tsd-search-trigger",
     class: "va-button",
-    "data-toggle": "menu",
-    "aria-label": context.i18n.theme_menu()
-  }, context.icons.menu())), /* @__PURE__ */ JSX4.createElement("input", {
-    type: "text",
-    id: "tsd-search-field",
-    class: "va-input",
-    placeholder: context.i18n.theme_search(),
-    "aria-label": context.i18n.theme_search()
-  })), /* @__PURE__ */ JSX4.createElement("ul", {
-    class: "results"
-  }, /* @__PURE__ */ JSX4.createElement("li", {
-    class: "state loading"
-  }, context.i18n.theme_preparing_search_index()), /* @__PURE__ */ JSX4.createElement("li", {
-    class: "state failure"
-  }, context.i18n.theme_search_index_not_available()))), /* @__PURE__ */ JSX4.createElement("div", {
+    "aria-label": i18n4.theme_search()
+  }, /* @__PURE__ */ JSX4.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "2.5",
+    width: "16",
+    height: "16",
+    stroke: "currentColor"
+  }, /* @__PURE__ */ JSX4.createElement("path", {
+    d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+  })))), /* @__PURE__ */ JSX4.createElement("div", {
     class: "navigation-links va-button-group"
   }, Object.entries(context.options.getValue("navigationLinks")).map(([label, url]) => /* @__PURE__ */ JSX4.createElement("a", {
     href: url,
@@ -269,14 +242,34 @@ function toolbar(context) {
     "clip-rule": "evenodd",
     d: "M1.52346 0.380859H15.6187V14.4761H13.333V4.28282L2.33158 15.2842L0.715332 13.668L11.7167 2.66657H1.52346V0.380859Z",
     fill: "currentColor"
-  }))))));
+  })))))), /* @__PURE__ */ JSX4.createElement("dialog", {
+    id: "tsd-search",
+    "aria-label": i18n4.theme_search()
+  }, /* @__PURE__ */ JSX4.createElement("input", {
+    role: "combobox",
+    class: "va-input",
+    id: "tsd-search-input",
+    "aria-controls": "tsd-search-results",
+    "aria-autocomplete": "list",
+    "aria-expanded": "true",
+    spellcheck: false,
+    autocapitalize: "off",
+    autocomplete: "off",
+    placeholder: i18n4.theme_search_placeholder(),
+    maxLength: 100
+  }), /* @__PURE__ */ JSX4.createElement("ul", {
+    role: "listbox",
+    id: "tsd-search-results"
+  }), /* @__PURE__ */ JSX4.createElement("div", {
+    id: "tsd-search-status",
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }, /* @__PURE__ */ JSX4.createElement("div", null, i18n4.theme_preparing_search_index()))));
 }
 
 // src/partials/layout.tsx
 import { extname } from "path";
-import {
-  JSX as JSX5
-} from "typedoc";
+import { JSX as JSX5 } from "typedoc";
 
 // src/utils.ts
 import {
@@ -432,8 +425,8 @@ function buildSiteMetadata(context) {
 
 // src/themes/VarvaraThemeContext.ts
 class VarvaraThemeContext extends DefaultThemeRenderContext3 {
-  constructor(theme, page, options) {
-    super(theme, page, options);
+  constructor(router, theme, page, options) {
+    super(router, theme, page, options);
     this.pageSidebar = pageSidebar(this);
     this.toolbar = toolbar(this);
     this.defaultLayout = layout(this);
@@ -464,7 +457,7 @@ class VarvaraTheme extends DefaultTheme2 {
     })));
   }
   getRenderContext(pageEvent) {
-    return new VarvaraThemeContext(this, pageEvent, this.application.options);
+    return new VarvaraThemeContext(this.router, this, pageEvent, this.application.options);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "varvara-typedoc-theme",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "Marc Mariné <shenobi@gmail.com>",
   "repository": {
     "type": "git",
@@ -8,20 +8,20 @@
     "directory": "packages/typedoc-theme"
   },
   "type": "module",
-  "description": "Seamless documentation experience for TypeScript projects.",
+  "description": "Varvara theme for TypeDoc.",
   "keywords": [
     "typedoc-theme",
     "varvara-css"
   ],
   "license": "MIT",
   "dependencies": {
-    "varvara-css": "^0.4.1"
+    "varvara-css": "latest"
   },
   "devDependencies": {
     "@types/bun": "latest"
   },
   "peerDependencies": {
-    "typedoc": "^0.27.5",
+    "typedoc": "^0.28.0",
     "typescript": "^5.0.0"
   },
   "scripts": {