element-book 26.14.1 → 26.15.0

package/dist/ui/elements/book-nav/book-nav.element.d.ts

@@ -5,4 +5,3 @@ export declare const BookNav: import("element-vir").DeclarativeElementDefinition
     selectedPath: ReadonlyArray<string> | undefined;
     router: BookRouter | undefined;
 }, {}, {}, "book-nav-", "book-nav-internal-indent", readonly [], readonly []>;
-export declare function scrollSelectedNavElementIntoView(bookNavInstance: typeof BookNav.InstanceType): Promise<void>;

package/dist/ui/elements/book-nav/book-nav.element.js

@@ -1,5 +1,4 @@
 import { check } from '@augment-vir/assert';
-import { checkIfEntirelyInScrollView, waitForAnimationFrame } from '@augment-vir/web';
 import { classMap, css, html, renderIf } from 'element-vir';
 import { Element16Icon, ViraIcon } from 'vira';
 import { BookEntryType } from '../../../data/book-entry/book-entry-type.js';
@@ -119,14 +118,3 @@ export const BookNav = defineBookElement()({
         `;
     },
 });
-export async function scrollSelectedNavElementIntoView(bookNavInstance) {
-    await waitForAnimationFrame(2);
-    const selected = bookNavInstance.shadowRoot.querySelector('.selected');
-    if (!selected) {
-        throw new Error('Failed to find selected nav tree element.');
-    }
-    if (await checkIfEntirelyInScrollView(selected)) {
-        return;
-    }
-    selected.scrollIntoView({ behavior: 'smooth', block: 'center' });
-}

package/dist/ui/elements/element-book-app/element-book-app.element.js

@@ -1,7 +1,7 @@
 import { check } from '@augment-vir/assert';
 import { extractErrorMessage, makeWritable } from '@augment-vir/common';
 import { waitForAnimationFrame } from '@augment-vir/web';
-import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
 import { createNewControls, updateTreeControls, } from '../../../data/book-entry/book-page/controls-wrapper.js';
 import { createBookTreeFromEntries } from '../../../data/book-tree/book-tree.js';
 import { searchFlattenedNodes } from '../../../data/book-tree/search-nodes.js';
@@ -10,7 +10,7 @@ import { defaultBookFullRoute, extractSearchQuery, } from '../../../routing/book
 import { colorThemeCssVars, setThemeCssVars, } from '../../color-theme/color-theme.js';
 import { createTheme } from '../../color-theme/create-color-theme.js';
 import { ChangeRouteEvent } from '../../events/change-route.event.js';
-import { BookNav, scrollSelectedNavElementIntoView } from '../book-nav/book-nav.element.js';
+import { BookNav } from '../book-nav/book-nav.element.js';
 import { BookError } from '../common/book-error.element.js';
 import { BookPageControls } from '../entry-display/book-page/book-page-controls.element.js';
 import { BookEntryDisplay } from '../entry-display/entry-display/book-entry-display.element.js';
@@ -76,11 +76,6 @@ export const ElementBookApp = defineElement()({
             max-width: min(400px, 40%);
         }
     `,
-    init({ host, state }) {
-        setTimeout(async () => {
-            await scrollNav(host, extractSearchQuery(state.currentRoute.paths), state.currentRoute);
-        }, 500);
-    },
     cleanup({ state, updateState }) {
         if (state.router) {
             state.router.destroy();
@@ -211,7 +206,7 @@ export const ElementBookApp = defineElement()({
             return html `
                 <div
                     class="root"
-                    ${listen(ChangeRouteEvent, async (event) => {
+                    ${listen(ChangeRouteEvent, (event) => {
                 const newRoute = event.detail;
                 if (!areRoutesNew(newRoute)) {
                     return;
@@ -222,7 +217,6 @@ export const ElementBookApp = defineElement()({
                 if (!(navElement instanceof BookNav)) {
                     throw new TypeError(`Failed to find child '${BookNav.tagName}'`);
                 }
-                await scrollNav(host, searchQuery, state.currentRoute);
             })}
                     ${listen(BookPageControls.events.controlValueChange, (event) => {
                 if (!state.treeBasedControls) {
@@ -237,17 +231,24 @@ export const ElementBookApp = defineElement()({
                 });
             })}
                 >
-                    <${BookNav.assign({
-                flattenedNodes: originalTree.flattenedNodes,
-                router: state.router,
-                selectedPath: searchQuery ? undefined : state.currentRoute.paths.slice(1),
-            })}>
-                        <slot
-                            name=${ElementBookSlotName.NavHeader}
-                            slot=${ElementBookSlotName.NavHeader}
-                        ></slot>
-                    </${BookNav}>
+                    ${inputs.blockNavigation
+                ? nothing
+                : html `
+                              <${BookNav.assign({
+                    flattenedNodes: originalTree.flattenedNodes,
+                    router: state.router,
+                    selectedPath: searchQuery
+                        ? undefined
+                        : state.currentRoute.paths.slice(1),
+                })}>
+                                  <slot
+                                      name=${ElementBookSlotName.NavHeader}
+                                      slot=${ElementBookSlotName.NavHeader}
+                                  ></slot>
+                              </${BookNav}>
+                          `}
                     <${BookEntryDisplay.assign({
+                blockNavigation: !!inputs.blockNavigation,
                 controls: currentControls,
                 currentNodes,
                 currentRoute: state.currentRoute,
@@ -285,17 +286,3 @@ export const ElementBookApp = defineElement()({
         }
     },
 });
-async function scrollNav(host, searchQuery, currentRoutes) {
-    /** If there is a search query, then there will be no selected nav to scroll to. */
-    if (searchQuery) {
-        return;
-    }
-    if (currentRoutes.paths.length <= 1) {
-        return;
-    }
-    const navElement = host.shadowRoot.querySelector(BookNav.tagName);
-    if (!(navElement instanceof BookNav)) {
-        throw new TypeError(`Failed to find child '${BookNav.tagName}'`);
-    }
-    await scrollSelectedNavElementIntoView(navElement);
-}

package/dist/ui/elements/element-book-app/element-book-config.d.ts

@@ -23,6 +23,7 @@ export type OptionalConfig = {
     _debug: boolean;
     globalValues: GlobalValues;
     preventWindowTitleChange: boolean;
+    blockNavigation: boolean;
 } & RequireExactlyOne<Readonly<{
     /**
      * Set this internal router config if element-book is intended to be the current website's

package/dist/ui/elements/entry-display/book-page/book-page-wrapper.element.d.ts

@@ -3,6 +3,7 @@ import { type ControlsWrapper } from '../../../../data/book-entry/book-page/cont
 import { type BookTreeNode } from '../../../../data/book-tree/book-tree-node.js';
 import { type BookRouter } from '../../../../routing/book-router.js';
 export declare const BookPageWrapper: import("element-vir").DeclarativeElementDefinition<"book-page-wrapper", {
+    blockNavigation: boolean;
     isTopLevel: boolean;
     pageNode: BookTreeNode<BookEntryType.Page>;
     router: BookRouter | undefined;

package/dist/ui/elements/entry-display/book-page/book-page-wrapper.element.js

@@ -52,19 +52,24 @@ export const BookPageWrapper = defineBookElement()({
         if (error) {
             console.error(error);
         }
+        const headerTemplate = inputs.blockNavigation
+            ? titleTemplate
+            : html `
+                  <${BookRouteLink.assign({
+                route: {
+                    paths: linkPaths,
+                    hash: undefined,
+                    search: undefined,
+                },
+                router: inputs.router,
+            })}>
+                      ${titleTemplate}
+                  </${BookRouteLink}>
+              `;
         return html `
             <div class="page-header block-entry">
                 <div class="title-group">
-                    <${BookRouteLink.assign({
-            route: {
-                paths: linkPaths,
-                hash: undefined,
-                search: undefined,
-            },
-            router: inputs.router,
-        })}>
-                        ${titleTemplate}
-                    </${BookRouteLink}>
+                    ${headerTemplate}
                     ${error
             ? html `
                               <${BookError.assign({ message: error.message })}></${BookError}>

package/dist/ui/elements/entry-display/element-example/{book-element-example-controls.element.d.ts → book-element-example-title.element.d.ts}

@@ -1,7 +1,8 @@
 import { type BookEntryType } from '../../../../data/book-entry/book-entry-type.js';
 import { type BookTreeNode } from '../../../../data/book-tree/book-tree-node.js';
 import { type BookRouter } from '../../../../routing/book-router.js';
-export declare const BookElementExampleControls: import("element-vir").DeclarativeElementDefinition<"book-element-example-controls", {
+export declare const BookElementExampleTitle: import("element-vir").DeclarativeElementDefinition<"book-element-example-title", {
+    blockNavigation: boolean;
     elementExampleNode: BookTreeNode<BookEntryType.ElementExample>;
     router: BookRouter | undefined;
-}, {}, {}, "book-element-example-controls-", "book-element-example-controls-", readonly [], readonly []>;
+}, {}, {}, "book-element-example-title-", "book-element-example-title-", readonly [], readonly []>;

package/dist/ui/elements/entry-display/element-example/{book-element-example-controls.element.js → book-element-example-title.element.js}

@@ -3,8 +3,8 @@ import { BookMainRoute } from '../../../../routing/book-routing.js';
 import { colorThemeCssVars } from '../../../color-theme/color-theme.js';
 import { BookRouteLink } from '../../common/book-route-link.element.js';
 import { defineBookElement } from '../../define-book-element.js';
-export const BookElementExampleControls = defineBookElement()({
-    tagName: 'book-element-example-controls',
+export const BookElementExampleTitle = defineBookElement()({
+    tagName: 'book-element-example-title',
     styles: css `
         :host {
             display: flex;
@@ -14,6 +14,9 @@ export const BookElementExampleControls = defineBookElement()({
         }
     `,
     render({ inputs }) {
+        if (inputs.blockNavigation) {
+            return inputs.elementExampleNode.entry.title;
+        }
         const linkPaths = [
             BookMainRoute.Book,
             ...inputs.elementExampleNode.fullUrlBreadcrumbs,

package/dist/ui/elements/entry-display/element-example/book-element-example-wrapper.element.d.ts

@@ -3,6 +3,7 @@ import { type BookPageControlsValues } from '../../../../data/book-entry/book-pa
 import { type BookTreeNode } from '../../../../data/book-tree/book-tree-node.js';
 import { type BookRouter } from '../../../../routing/book-router.js';
 export declare const BookElementExampleWrapper: import("element-vir").DeclarativeElementDefinition<"book-element-example-wrapper", {
+    blockNavigation: boolean;
     elementExampleNode: BookTreeNode<BookEntryType.ElementExample>;
     currentPageControls: BookPageControlsValues;
     router: BookRouter | undefined;

package/dist/ui/elements/entry-display/element-example/book-element-example-wrapper.element.js

@@ -1,8 +1,7 @@
-import { omitObjectKeys } from '@augment-vir/common';
 import { css, html } from 'element-vir';
 import { colorThemeCssVars } from '../../../color-theme/color-theme.js';
 import { defineBookElement } from '../../define-book-element.js';
-import { BookElementExampleControls } from './book-element-example-controls.element.js';
+import { BookElementExampleTitle } from './book-element-example-title.element.js';
 import { BookElementExampleViewer } from './book-element-example-viewer.element.js';
 export const BookElementExampleWrapper = defineBookElement()({
     tagName: 'book-element-example-wrapper',
@@ -31,18 +30,22 @@ export const BookElementExampleWrapper = defineBookElement()({
             align-items: flex-start;
         }
 
-        ${BookElementExampleControls} {
+        ${BookElementExampleTitle} {
             color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
         }
 
-        :host(:hover) ${BookElementExampleControls} {
+        :host(:hover) ${BookElementExampleTitle} {
             color: ${colorThemeCssVars['element-book-accent-icon-color'].value};
         }
     `,
     render({ inputs }) {
         return html `
             <div class="individual-example-wrapper">
-                <${BookElementExampleControls.assign(omitObjectKeys(inputs, ['currentPageControls']))}></${BookElementExampleControls}>
+                <${BookElementExampleTitle.assign({
+            blockNavigation: inputs.blockNavigation,
+            elementExampleNode: inputs.elementExampleNode,
+            router: inputs.router,
+        })}></${BookElementExampleTitle}>
                 <${BookElementExampleViewer.assign(inputs)}></${BookElementExampleViewer}>
             </div>
         `;

package/dist/ui/elements/entry-display/entry-display/book-entry-display.element.d.ts

@@ -4,6 +4,7 @@ import { type BookTreeNode } from '../../../../data/book-tree/book-tree-node.js'
 import { type BookRouter } from '../../../../routing/book-router.js';
 import { type BookFullRoute } from '../../../../routing/book-routing.js';
 export declare const BookEntryDisplay: import("element-vir").DeclarativeElementDefinition<"book-entry-display", {
+    blockNavigation: boolean;
     controls: ControlsWrapper;
     currentNodes: ReadonlyArray<BookTreeNode>;
     currentRoute: Readonly<BookFullRoute>;

package/dist/ui/elements/entry-display/entry-display/book-entry-display.element.js

@@ -33,6 +33,7 @@ export const BookEntryDisplay = defineBookElement()({
         }
 
         .inline-entry {
+            display: inline-block;
             margin: 8px;
 
             &.block-entry {
@@ -78,6 +79,7 @@ export const BookEntryDisplay = defineBookElement()({
     render: ({ inputs, dispatch, events, state, updateState }) => {
         const currentSearch = extractSearchQuery(inputs.currentRoute.paths);
         const entryTemplates = createNodeTemplates({
+            blockNavigation: inputs.blockNavigation,
             currentNodes: inputs.currentNodes,
             isTopLevel: true,
             router: inputs.router,

package/dist/ui/elements/entry-display/entry-display/create-node-templates.d.ts

@@ -3,7 +3,8 @@ import { BookEntryType } from '../../../../data/book-entry/book-entry-type.js';
 import { type ControlsWrapper } from '../../../../data/book-entry/book-page/controls-wrapper.js';
 import { type BookTreeNode } from '../../../../data/book-tree/book-tree-node.js';
 import { type BookRouter } from '../../../../routing/book-router.js';
-export declare function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, controls, originalTree, }: {
+export declare function createNodeTemplates({ blockNavigation, currentNodes, isTopLevel, router, isSearching, controls, originalTree, }: {
+    blockNavigation: boolean;
     currentNodes: ReadonlyArray<BookTreeNode>;
     isTopLevel: boolean;
     router: BookRouter | undefined;

package/dist/ui/elements/entry-display/entry-display/create-node-templates.js

@@ -45,7 +45,7 @@ function getFlattenedControlsFromHiddenParents(currentNodes, currentControls, cu
         };
     }, { config: {}, current: {}, breadcrumbs: {} });
 }
-export function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, controls, originalTree, }) {
+export function createNodeTemplates({ blockNavigation, currentNodes, isTopLevel, router, isSearching, controls, originalTree, }) {
     if (!currentNodes.length && isSearching) {
         return [
             html `
@@ -71,6 +71,7 @@ export function createNodeTemplates({ currentNodes, isTopLevel, router, isSearch
         if (isBookTreeNode(currentNode, BookEntryType.Page)) {
             return html `
                     <${BookPageWrapper.assign({
+                blockNavigation,
                 isTopLevel,
                 pageNode: currentNode,
                 controls,
@@ -84,6 +85,7 @@ export function createNodeTemplates({ currentNodes, isTopLevel, router, isSearch
             const controlsForElementExample = traverseControls(controls, currentNode.fullUrlBreadcrumbs.slice(0, -1));
             const content = html `
                     <${BookElementExampleWrapper.assign({
+                blockNavigation,
                 elementExampleNode: currentNode,
                 currentPageControls: controlsForElementExample,
                 router,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "26.14.1",
+    "version": "26.15.0",
     "keywords": [
         "book",
         "design system",
@@ -14,7 +14,7 @@
         "storybook",
         "system"
     ],
-    "homepage": "https://electrovir.github.io/element-book/element-book",
+    "homepage": "https://electrovir.github.io/element-book",
     "bugs": {
         "url": "https://github.com/electrovir/element-book/issues"
     },
@@ -41,29 +41,29 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.57.3",
-        "@augment-vir/common": "^31.57.3",
-        "@augment-vir/web": "^31.57.3",
-        "colorjs.io": "0.5.2",
+        "@augment-vir/assert": "^31.58.0",
+        "@augment-vir/common": "^31.58.0",
+        "@augment-vir/web": "^31.58.0",
+        "colorjs.io": "^0.6.0",
         "date-vir": "^8.1.0",
         "lit-css-vars": "^3.0.11",
         "spa-router-vir": "^6.4.1",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.57.3",
+        "@augment-vir/test": "^31.58.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.1",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "element-vir": "^26.14.0",
+        "element-vir": "^26.14.1",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
-        "type-fest": "^5.3.1",
-        "typedoc": "^0.28.15",
+        "type-fest": "^5.4.1",
+        "typedoc": "^0.28.16",
         "typescript": "5.9.3",
-        "vira": "^28.13.0"
+        "vira": "^28.19.5"
     },
     "peerDependencies": {
         "element-vir": ">=17",