@riebeckite/plugin-navigation 0.0.27 → 0.0.28

package/README.md

@@ -5,8 +5,8 @@
 Site navigation as a Riebeckite plugin. `navigation()` derives the primary
 navigation from the notes already in the vault, so an existing Obsidian vault
 becomes navigable with no Riebeckite-specific file and no required frontmatter.
-The plugin owns the navigation *model* and the *rendering mechanics*; the Site
-owns placement — where each rendered list appears.
+The plugin owns the navigation *model*, rendered UI, and interaction styling;
+the Site owns placement — where each rendered navigation appears.
 
 [日本語](./README_ja.md)
 
@@ -56,23 +56,32 @@ site without navigation keeps working.
 
 ### Rendering
 
-`SiteNav` renders a resolved tree as a `<nav>` landmark with nested lists. It
-owns the rendering mechanics — recursive children, active-path detection,
-locale-aware normalization, external-link handling, and `aria-current` — and
-ships the structural CSS for that `rb-nav` tree in its own `style.css`, loaded
-through the generated plugin styles. The Site decides where the tree is placed
-and whether to wrap it in a `<details>` element on small screens:
+`SiteNav` renders a resolved tree as a `<nav>` landmark with nested lists.
+`MobileSiteNav` renders its compact `<details>` menu. The plugin owns both
+components' `rb-nav` UI — list flow, links, nested menus, focus treatment, and
+the mobile panel — in its own `style.css`, loaded through the generated plugin
+styles. The Site places the component roots in its own layout wrappers; it must
+not style `rb-nav` descendants or construct the mobile menu markup:
 
 ```tsx
-import { SiteNav } from "@riebeckite/plugin-navigation";
+import { MobileSiteNav, SiteNav } from "@riebeckite/plugin-navigation";
 
 <header class="site-header rb-site-header">
   <a href="/" class="site-header__home rb-site-header__home">My Site</a>
-  <SiteNav
-    items={primary}
-    path={c.req.path}
-    language={c.get("htmlLanguage")}
-  />
+  <div class="site-header__primary-navigation">
+    <SiteNav
+      items={primary}
+      path={c.req.path}
+      language={c.get("htmlLanguage")}
+    />
+  </div>
+  <div class="site-header__mobile-navigation">
+    <MobileSiteNav
+      items={primary}
+      path={c.req.path}
+      language={c.get("htmlLanguage")}
+    />
+  </div>
 </header>;
 ```
 
@@ -82,6 +91,14 @@ active item, so unlocalized authored hrefs still match localized pages. Pass
 `localizeHref` to rewrite hrefs for the current language, `label` to change the
 landmark label, and `class`/`className` to extend the `<nav>` classes.
 
+For an intentional root-level visual override, set these public custom
+properties on the `SiteNav` root or a wrapper: `--rb-nav-gap`,
+`--rb-nav-list-flex-wrap`, `--rb-nav-list-justify-content`,
+`--rb-nav-item-display`, `--rb-nav-item-padding`,
+`--rb-nav-item-font-family`, `--rb-nav-item-font-size`,
+`--rb-nav-item-font-weight`, `--rb-nav-item-letter-spacing`, and
+`--rb-nav-item-text-transform`. Do not select `rb-nav` descendants.
+
 ## Authored navigation
 
 Automated derivation cannot express everything, and some sites curate their
@@ -140,8 +157,9 @@ tab.
   the model, or `null`
 - `validateNavigationOptions(options)` — option validation
 - `SiteNav` — render a resolved tree with the standard `rb-nav` structure
+- `MobileSiteNav` — render the plugin-owned compact navigation menu
 - Types: `NavigationItem`, `NavigationOptions`, `NavigationSource`,
-  `SiteNavigation`, `SiteNavProps`
+  `SiteNavigation`, `SiteNavProps`, `MobileSiteNavProps`
 
 ## Limitations
 

package/README_ja.md

@@ -5,7 +5,7 @@
 サイトナビゲーションを提供する Riebeckite プラグインです。`navigation()` は
 Vault にすでにあるノートから主要ナビゲーションを導出します。Riebeckite 専用の
 ファイルも必須 frontmatter も不要なので、既存の Obsidian Vault をそのまま
-公開できます。ナビゲーションの「モデル」と描画の仕組みはプラグインが持ち、
+公開できます。ナビゲーションの「モデル」、UI、操作に関わるスタイルはプラグインが持ち、
 配置は Site が担当します。
 
 [English](./README.md)
@@ -57,22 +57,32 @@ const secondary = model?.secondary ?? [];
 ### 描画
 
 `SiteNav` は解決済みのツリーを `<nav>` ランドマークとネストしたリストとして
-描画します。子の再帰描画、現在パスの判定、言語を考慮した正規化、外部リンクの
-扱い、`aria-current` といった描画の仕組みを担当し、その `rb-nav` ツリーを
-成立させる構造 CSS を自身の `style.css` に同梱します（自動生成される plugin
-styles 経由で読み込まれます）。ツリーをどこに置くか、モバイルで `<details>` を
-使うかは Site が決めます。
+描画し、`MobileSiteNav` はコンパクトな `<details>` メニューを描画します。子の
+再帰描画、現在パスの判定、言語を考慮した正規化、外部リンクの扱い、`aria-current`
+に加え、リスト・リンク・子メニュー・フォーカス表示・モバイルパネルの `rb-nav` UI は
+プラグインが自身の `style.css` で担当します（自動生成される plugin styles 経由で
+読み込まれます）。Site はコンポーネントの root を独自のレイアウト用ラッパーに置き、
+`rb-nav` の子要素をスタイルしたりモバイルメニューのマークアップを組み立てたりしません。
 
 ```tsx
-import { SiteNav } from "@riebeckite/plugin-navigation";
+import { MobileSiteNav, SiteNav } from "@riebeckite/plugin-navigation";
 
 <header class="site-header rb-site-header">
   <a href="/" class="site-header__home rb-site-header__home">My Site</a>
-  <SiteNav
-    items={primary}
-    path={c.req.path}
-    language={c.get("htmlLanguage")}
-  />
+  <div class="site-header__primary-navigation">
+    <SiteNav
+      items={primary}
+      path={c.req.path}
+      language={c.get("htmlLanguage")}
+    />
+  </div>
+  <div class="site-header__mobile-navigation">
+    <MobileSiteNav
+      items={primary}
+      path={c.req.path}
+      language={c.get("htmlLanguage")}
+    />
+  </div>
 </header>;
 ```
 
@@ -83,6 +93,14 @@ import { SiteNav } from "@riebeckite/plugin-navigation";
 `label` でランドマークのラベルを、`class` / `className` で `<nav>` のクラスを
 拡張できます。
 
+root レベルで意図的に見た目を上書きする場合は、`SiteNav` の root またはラッパーに
+次の公開カスタムプロパティを指定します。`--rb-nav-gap`、
+`--rb-nav-list-flex-wrap`、`--rb-nav-list-justify-content`、
+`--rb-nav-item-display`、`--rb-nav-item-padding`、
+`--rb-nav-item-font-family`、`--rb-nav-item-font-size`、
+`--rb-nav-item-font-weight`、`--rb-nav-item-letter-spacing`、
+`--rb-nav-item-text-transform` です。`rb-nav` の子要素は選択しません。
+
 ## 手書きナビゲーション
 
 自動導出ですべてを表現できるわけではなく、リンクを意図的に整えたいサイトも
@@ -133,16 +151,17 @@ navigation({
 
 ## エクスポート
 
-- `navigation(options?)` — プラグインファクトリ
-- `navigationPlugin` — `navigation` のエイリアス
-- `NAVIGATION_PLUGIN_NAME` — プラグイン名 `"navigation"`
-- `buildNavigation(entries, options?)` — マニフェストエントリからモデルを構築する
-- `resolveSiteNavigation(config, manifest)` — 有効なプラグインを見つけてモデルを
+- `navigation(options?)`：プラグインファクトリ
+- `navigationPlugin`：`navigation` のエイリアス
+- `NAVIGATION_PLUGIN_NAME`：プラグイン名 `"navigation"`
+- `buildNavigation(entries, options?)`：マニフェストエントリからモデルを構築する
+- `resolveSiteNavigation(config, manifest)`：有効なプラグインを見つけてモデルを
   構築する。なければ `null`
-- `validateNavigationOptions(options)` — オプションの検証
-- `SiteNav` — 解決済みツリーを標準の `rb-nav` 構造で描画する
+- `validateNavigationOptions(options)`：オプションの検証
+- `SiteNav`：解決済みツリーを標準の `rb-nav` 構造で描画する
+- `MobileSiteNav`：プラグイン所有のコンパクトなナビゲーションメニューを描画する
 - 型: `NavigationItem`, `NavigationOptions`, `NavigationSource`,
-  `SiteNavigation`, `SiteNavProps`
+  `SiteNavigation`, `SiteNavProps`, `MobileSiteNavProps`
 
 ## 制約
 

package/dist/components/site-nav.d.ts

@@ -19,6 +19,9 @@ export type SiteNavProps = {
     readonly className?: string;
     readonly omitHome?: boolean;
 };
+export type MobileSiteNavProps = SiteNavProps & {
+    readonly menuLabel?: string;
+};
 /**
  * Renders a resolved navigation tree as a `<nav>` landmark with nested lists.
  *
@@ -28,3 +31,4 @@ export type SiteNavProps = {
  * where each tree is rendered.
  */
 export declare function SiteNav(props: SiteNavProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
+export declare function MobileSiteNav(props: MobileSiteNavProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import type { NavigationOptions } from "./src/types.js";
-export type { SiteNavProps } from "./components/site-nav.js";
-export { SiteNav } from "./components/site-nav.js";
+export type { MobileSiteNavProps, SiteNavProps, } from "./components/site-nav.js";
+export { MobileSiteNav, SiteNav } from "./components/site-nav.js";
 export { buildNavigation, NAVIGATION_PLUGIN_NAME, resolveSiteNavigation, } from "./src/navigation.js";
 export type { NavigationItem, NavigationOptions, NavigationSource, SiteNavigation, } from "./src/types.js";
 export declare function navigation(options?: NavigationOptions): import("@riebeckite/core").RiebeckitePlugin<NavigationOptions>;

package/dist/index.js

@@ -191,6 +191,13 @@ function SiteNav(props) {
     }
   );
 }
+function MobileSiteNav(props) {
+  const { menuLabel = "Menu", ...siteNavProps } = props;
+  return /* @__PURE__ */ jsxs("details", { class: "rb-nav__mobile", children: [
+    /* @__PURE__ */ jsx("summary", { class: "rb-nav__toggle", children: menuLabel }),
+    /* @__PURE__ */ jsx(SiteNav, { ...siteNavProps })
+  ] });
+}
 function NavigationItems(props) {
   return /* @__PURE__ */ jsx("ul", { class: props.nested ? "rb-nav__list rb-nav__children" : "rb-nav__list", children: props.items.map((item) => /* @__PURE__ */ jsx(
     NavigationItemView,
@@ -267,6 +274,7 @@ function navigation(options = {}) {
 }
 var navigationPlugin = navigation;
 export {
+  MobileSiteNav,
   NAVIGATION_PLUGIN_NAME,
   SiteNav,
   buildNavigation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-navigation",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -16,12 +16,13 @@
   },
   "dependencies": {
     "hono": "^4.12.25",
-    "@riebeckite/core": "0.0.27",
-    "@riebeckite/ui": "0.0.27"
+    "@riebeckite/ui": "0.0.28",
+    "@riebeckite/core": "0.0.28"
   },
   "devDependencies": {
+    "puppeteer": "^25.11.0",
     "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.27"
+    "@riebeckite/test": "0.0.28"
   },
   "publishConfig": {
     "access": "public"
@@ -56,6 +57,7 @@
   ],
   "scripts": {
     "build": "node ../../../scripts/build_package.mjs",
-    "test": "node --import tsx --test \"test/*.test.ts\""
+    "test": "node --import tsx --test \"test/*.test.ts\"",
+    "test:browser": "node --import tsx --test \"test/browser/*.test.ts\""
   }
 }

package/style.css

@@ -1,4 +1,8 @@
 @layer components {
+  .rb-nav {
+    color: var(--rb-color-ink);
+  }
+
   .rb-nav > .rb-nav__list,
   .rb-nav__children {
     margin: 0;
@@ -6,7 +10,12 @@
   }
 
   .rb-nav > .rb-nav__list {
+    display: flex;
+    align-items: center;
+    gap: var(--rb-nav-gap, var(--rb-space-3, 1.5rem));
     padding: 0;
+    flex-wrap: var(--rb-nav-list-flex-wrap, nowrap);
+    justify-content: var(--rb-nav-list-justify-content, flex-start);
   }
 
   .rb-nav__item {
@@ -19,6 +28,13 @@
     top: 100%;
     left: 0;
     min-width: max-content;
+    padding: var(--rb-space-2, 1rem);
+    background: var(--rb-color-surface);
+    border: 1px solid var(--rb-color-border);
+  }
+
+  .rb-nav__children {
+    z-index: 50;
   }
 
   .rb-nav__item:hover > .rb-nav__children,
@@ -26,4 +42,98 @@
     display: flex;
     flex-direction: column;
   }
+
+  .rb-nav__link {
+    display: var(--rb-nav-item-display, inline);
+    padding: var(--rb-nav-item-padding, 0);
+    color: inherit;
+    font-family: var(--rb-nav-item-font-family, inherit);
+    font-size: var(--rb-nav-item-font-size, inherit);
+    font-weight: var(--rb-nav-item-font-weight, inherit);
+    letter-spacing: var(--rb-nav-item-letter-spacing, normal);
+    text-decoration: none;
+    text-transform: var(--rb-nav-item-text-transform, none);
+  }
+
+  .rb-nav__label {
+    display: var(--rb-nav-item-display, inline);
+    padding: var(--rb-nav-item-padding, 0);
+    font-family: var(--rb-nav-item-font-family, inherit);
+    font-size: var(--rb-nav-item-font-size, inherit);
+    font-weight: var(--rb-nav-item-font-weight, inherit);
+    letter-spacing: var(--rb-nav-item-letter-spacing, normal);
+    text-transform: var(--rb-nav-item-text-transform, none);
+  }
+
+  .rb-nav__link:hover,
+  .rb-nav__link:focus-visible,
+  .rb-nav__link--active {
+    color: var(--rb-color-accent);
+  }
+
+  .rb-nav__link:focus-visible,
+  .rb-nav__toggle:focus-visible {
+    outline: 2px solid var(--rb-color-accent);
+    outline-offset: 2px;
+  }
+
+  .rb-nav__mobile {
+    position: relative;
+    display: none;
+  }
+
+  .rb-nav__toggle {
+    cursor: pointer;
+  }
+
+  @media (min-width: 30.001rem) and (max-width: 48rem) {
+    .rb-nav > .rb-nav__list {
+      flex-wrap: wrap;
+    }
+  }
+
+  @media (max-width: 30rem) {
+    .rb-nav__mobile {
+      display: block;
+    }
+
+    .rb-nav__mobile > .rb-nav {
+      position: absolute;
+      z-index: 10;
+      top: calc(100% + var(--rb-space-2, 1rem));
+      right: 0;
+      min-width: var(--rb-nav-menu-min-width, 12rem);
+      max-width: calc(100vw - 2rem);
+      padding: var(--rb-space-3, 1.5rem);
+      background: var(--rb-color-surface);
+      border: 1px solid var(--rb-color-border);
+      box-shadow: 0 4px 12px
+        color-mix(in oklab, var(--rb-color-ink) 14%, transparent);
+    }
+
+    .rb-nav__mobile .rb-nav__list,
+    .rb-nav__mobile .rb-nav__children {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--rb-space-2, 1rem);
+    }
+
+    .rb-nav__mobile .rb-nav__list {
+      padding: 0;
+    }
+
+    .rb-nav__mobile .rb-nav__children {
+      position: static;
+      margin-top: var(--rb-space-2, 1rem);
+      padding: 0;
+      background: transparent;
+      border: 0;
+    }
+
+    .rb-nav__mobile .rb-nav__link,
+    .rb-nav__mobile .rb-nav__label {
+      overflow-wrap: anywhere;
+    }
+  }
 }