element-book 26.16.1 → 26.17.1

package/dist/data/book-entry/book-page/controls-wrapper.js

@@ -35,7 +35,9 @@ function traverseAndInsertNewControls(controlsWrapper, urlBreadcrumbs, newValues
  * @category Internal
  */
 export function createNewControls(controlsWrapper, breadcrumbsForNewValue, newValues) {
-    const newControls = { ...controlsWrapper };
+    const newControls = {
+        ...controlsWrapper,
+    };
     traverseAndInsertNewControls(newControls, [
         /** Empty string represents the breadcrumb for the root node */
         '',

package/dist/data/book-tree/book-tree.js

@@ -42,7 +42,12 @@ export function createBookTreeFromEntries({ entries, debug, }) {
         return cachedTree;
     }
     const tree = createEmptyBookTreeRoot();
-    entries.forEach((newEntry) => addEntryToTree({ tree, newEntry, debug, manuallyAdded: true }));
+    entries.forEach((newEntry) => addEntryToTree({
+        tree,
+        newEntry,
+        debug,
+        manuallyAdded: true,
+    }));
     const flattenedNodes = flattenTree(tree);
     const bookTree = {
         tree,
@@ -65,7 +70,12 @@ function getOrAddImmediateParent(tree, entry, debug) {
     if (debug) {
         console.info(`parent of ${entry.title} not found in tree; adding it now.`);
     }
-    addEntryToTree({ tree, newEntry: entry.parent, debug, manuallyAdded: false });
+    addEntryToTree({
+        tree,
+        newEntry: entry.parent,
+        debug,
+        manuallyAdded: false,
+    });
     const immediateParentAfterAdding = traverseToImmediateParent(entry, tree);
     if (!immediateParentAfterAdding) {
         throw new Error(`Failed to find node despite having just added it: ${listUrlBreadcrumbs(entry, false).join(' > ')}`);
@@ -105,7 +115,12 @@ function addEntryToTree({ tree, newEntry, debug, manuallyAdded, }) {
     immediateParent.children[newEntryUrlBreadcrumb] = newNode;
     if (isBookEntry(newEntry, BookEntryType.Page) &&
         Object.values(newEntry.elementExamples).length) {
-        Object.values(newEntry.elementExamples).forEach((elementExample) => addEntryToTree({ tree, newEntry: elementExample, debug, manuallyAdded }));
+        Object.values(newEntry.elementExamples).forEach((elementExample) => addEntryToTree({
+            tree,
+            newEntry: elementExample,
+            debug,
+            manuallyAdded,
+        }));
     }
 }
 export function traverseToImmediateParent(entryOrNode, currentTree) {

package/dist/index.d.ts

@@ -11,7 +11,6 @@ export * from './data/book-tree/book-tree-node.js';
 export * from './routing/book-routing.js';
 export * from './ui/color-theme/color-theme.js';
 export * from './ui/color-theme/create-color-theme.js';
-export * from './ui/elements/element-book-app/element-book-app-slots.js';
 export * from './ui/elements/element-book-app/element-book-app.element.js';
 export * from './ui/elements/element-book-app/element-book-config.js';
 export * from './ui/elements/element-book-app/global-values.js';

package/dist/index.js

@@ -11,7 +11,6 @@ export * from './data/book-tree/book-tree-node.js';
 export * from './routing/book-routing.js';
 export * from './ui/color-theme/color-theme.js';
 export * from './ui/color-theme/create-color-theme.js';
-export * from './ui/elements/element-book-app/element-book-app-slots.js';
 export * from './ui/elements/element-book-app/element-book-app.element.js';
 export * from './ui/elements/element-book-app/element-book-config.js';
 export * from './ui/elements/element-book-app/global-values.js';

package/dist/ui/color-theme/color-theme.d.ts

@@ -22,12 +22,6 @@ export type ColorTheme = {
     accent: {
         icon: CSSResult;
     };
-    page: ColorPair & {
-        backgroundFaint1: CSSResult;
-        backgroundFaint2: CSSResult;
-        foregroundFaint1: CSSResult;
-        foregroundFaint2: CSSResult;
-    };
 };
 /**
  * All color theme CSS vars for the element-book app.
@@ -42,12 +36,6 @@ export declare const colorThemeCssVars: import("lit-css-vars").CssVarDefinitions
     readonly 'element-book-nav-selected-background-color': "magenta";
     readonly 'element-book-nav-selected-foreground-color': "magenta";
     readonly 'element-book-accent-icon-color': "magenta";
-    readonly 'element-book-page-background-color': "magenta";
-    readonly 'element-book-page-background-faint-level-1-color': "magenta";
-    readonly 'element-book-page-background-faint-level-2-color': "magenta";
-    readonly 'element-book-page-foreground-color': "magenta";
-    readonly 'element-book-page-foreground-faint-level-1-color': "magenta";
-    readonly 'element-book-page-foreground-faint-level-2-color': "magenta";
 }>;
 /**
  * Sets a new color theme's CSS vars on the given HTML element for the element-book app.

package/dist/ui/color-theme/color-theme.js

@@ -13,12 +13,6 @@ export const colorThemeCssVars = defineCssVars({
     'element-book-nav-selected-background-color': 'magenta',
     'element-book-nav-selected-foreground-color': 'magenta',
     'element-book-accent-icon-color': 'magenta',
-    'element-book-page-background-color': 'magenta',
-    'element-book-page-background-faint-level-1-color': 'magenta',
-    'element-book-page-background-faint-level-2-color': 'magenta',
-    'element-book-page-foreground-color': 'magenta',
-    'element-book-page-foreground-faint-level-1-color': 'magenta',
-    'element-book-page-foreground-faint-level-2-color': 'magenta',
 });
 const colorThemeCssVarMapping = {
     nav: {
@@ -38,14 +32,6 @@ const colorThemeCssVarMapping = {
     accent: {
         icon: colorThemeCssVars['element-book-accent-icon-color'],
     },
-    page: {
-        background: colorThemeCssVars['element-book-page-background-color'],
-        backgroundFaint1: colorThemeCssVars['element-book-page-background-faint-level-1-color'],
-        backgroundFaint2: colorThemeCssVars['element-book-page-background-faint-level-2-color'],
-        foreground: colorThemeCssVars['element-book-page-foreground-color'],
-        foregroundFaint1: colorThemeCssVars['element-book-page-foreground-faint-level-1-color'],
-        foregroundFaint2: colorThemeCssVars['element-book-page-foreground-faint-level-2-color'],
-    },
 };
 /**
  * Sets a new color theme's CSS vars on the given HTML element for the element-book app.

package/dist/ui/color-theme/create-color-theme.d.ts

@@ -5,7 +5,7 @@ import { type ColorTheme } from './color-theme.js';
  *
  * @category Internal
  */
-export declare const defaultThemeStartColor = "dodgerblue";
+export declare const defaultThemeStartColor: string;
 /**
  * Theme style options for the element-book app.
  *
@@ -29,4 +29,4 @@ export type ThemeConfig = PartialWithUndefined<{
  *
  * @category Internal
  */
-export declare function createTheme({ themeColor: inputThemeColor, themeStyle, }?: ThemeConfig): ColorTheme;
+export declare function createTheme({ themeColor: inputThemeColor, }?: ThemeConfig): ColorTheme;

package/dist/ui/color-theme/create-color-theme.js

@@ -1,32 +1,29 @@
-import { mapObjectValues } from '@augment-vir/common';
 import Color from 'colorjs.io';
 import { unsafeCSS } from 'element-vir';
-function colorsObjectToCssResult(colors) {
-    return mapObjectValues(colors, (key, value) => {
-        if (value instanceof Color) {
-            return unsafeCSS(value.toString({ format: 'hex' }));
-        }
-        else {
-            return colorsObjectToCssResult(value);
-        }
-    });
+import { viraColorPalette } from 'vira';
+function colorToCss(color) {
+    return unsafeCSS(color.toString({
+        format: 'hex',
+    }));
 }
 /**
  * The default theme color.
  *
  * @category Internal
  */
-export const defaultThemeStartColor = 'dodgerblue';
+export const defaultThemeStartColor = viraColorPalette['vira-accent-500'].default;
 function calculateTextColorString(color) {
     const onWhite = Math.abs(color.contrast('white', 'APCA'));
     const onBlack = Math.abs(color.contrast('black', 'APCA'));
     const textColorString = onWhite > onBlack ? 'white' : 'black';
     return textColorString;
 }
-function createColorPair({ background, foreground, }) {
+function createCssColorPair({ background, foreground, }) {
+    const bg = background ?? new Color(calculateTextColorString(foreground));
+    const fg = foreground ?? new Color(calculateTextColorString(background));
     return {
-        background: background ?? new Color(calculateTextColorString(foreground)),
-        foreground: foreground ?? new Color(calculateTextColorString(background)),
+        background: colorToCss(bg),
+        foreground: colorToCss(fg),
     };
 }
 /**
@@ -39,55 +36,35 @@ export var ThemeStyle;
     ThemeStyle["Dark"] = "dark";
     ThemeStyle["Light"] = "light";
 })(ThemeStyle || (ThemeStyle = {}));
-function flipBackForeground(input) {
-    return input === 'black' ? 'white' : 'black';
-}
-const faintForegroundColors = {
-    black: {
-        foregroundFaint1: new Color('#ccc'),
-        foregroundFaint2: new Color('#eee'),
-    },
-    white: {
-        foregroundFaint1: new Color('#ccc'),
-        foregroundFaint2: new Color('#eee'),
-    },
-};
-const faintBackgroundColors = {
-    black: {
-        backgroundFaint1: new Color('#666'),
-        backgroundFaint2: new Color('#444'),
-    },
-    white: {
-        backgroundFaint1: new Color('#ccc'),
-        backgroundFaint2: new Color('#fafafa'),
-    },
-};
 /**
  * Creates a theme from the given theme configuration.
  *
  * @category Internal
  */
-export function createTheme({ themeColor: inputThemeColor = defaultThemeStartColor, themeStyle = ThemeStyle.Light, } = {}) {
+export function createTheme({ themeColor: inputThemeColor = defaultThemeStartColor, } = {}) {
     const themeColor = new Color(inputThemeColor);
-    const backgroundColor = new Color(themeStyle === ThemeStyle.Dark ? 'black' : 'white');
-    const foregroundColorString = calculateTextColorString(backgroundColor);
-    const foregroundColor = new Color(foregroundColorString);
-    const colors = {
+    return {
         nav: {
-            hover: createColorPair({ background: themeColor.clone().set({ 'hsl.l': 93 }) }),
-            active: createColorPair({ background: themeColor.clone().set({ 'hsl.l': 90 }) }),
-            selected: createColorPair({ background: themeColor.clone().set({ 'hsl.l': 85 }) }),
+            hover: createCssColorPair({
+                background: themeColor.clone().set({
+                    'hsl.l': 93,
+                }),
+            }),
+            active: createCssColorPair({
+                background: themeColor.clone().set({
+                    'hsl.l': 90,
+                }),
+            }),
+            selected: createCssColorPair({
+                background: themeColor.clone().set({
+                    'hsl.l': 85,
+                }),
+            }),
         },
         accent: {
-            icon: themeColor.clone().set({ 'hsl.l': 40 }),
-        },
-        page: {
-            background: backgroundColor,
-            ...faintBackgroundColors[flipBackForeground(foregroundColorString)],
-            foreground: foregroundColor,
-            ...faintForegroundColors[foregroundColorString],
+            icon: colorToCss(themeColor.clone().set({
+                'hsl.l': 40,
+            })),
         },
     };
-    const convertedToCssResults = colorsObjectToCssResult(colors);
-    return convertedToCssResults;
 }

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

@@ -1,4 +1,5 @@
 import { css, html } from 'element-vir';
+import { viraTheme } from 'vira';
 import { BookMainRoute } from '../../routing/book-routing.js';
 import { BookRouteLink } from './common/book-route-link.element.js';
 import { defineBookElement } from './define-book-element.js';
@@ -7,7 +8,7 @@ export const BookBreadcrumbs = defineBookElement()({
     styles: css `
         :host {
             display: flex;
-            color: #999;
+            color: ${viraTheme.colors['vira-grey-foreground-header'].foreground.value};
         }
 
         .spacer {

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

@@ -4,7 +4,7 @@ export function shouldShowTreeNodeInNav(currentNode, selectedPath) {
     if (currentNode.entry.entryType === BookEntryType.Root) {
         return false;
     }
-    if (currentNode.entry.entryType === BookEntryType.Page) {
+    else if (currentNode.entry.entryType === BookEntryType.Page) {
         return true;
     }
     const isParentSelected = check.jsonEquals(selectedPath, currentNode.fullUrlBreadcrumbs.slice(0, -1));

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

@@ -1,13 +1,12 @@
 import { check } from '@augment-vir/assert';
 import { classMap, css, html, renderIf } from 'element-vir';
-import { Element16Icon, ViraIcon } from 'vira';
+import { Element16Icon, ViraIcon, viraTheme } from 'vira';
 import { BookEntryType } from '../../../data/book-entry/book-entry-type.js';
 import { isBookTreeNode } from '../../../data/book-tree/book-tree.js';
 import { BookMainRoute, defaultBookFullRoute } 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';
-import { ElementBookSlotName } from '../element-book-app/element-book-app-slots.js';
 import { shouldShowTreeNodeInNav } from './book-nav-filter.js';
 export const BookNav = defineBookElement()({
     tagName: 'book-nav',
@@ -19,7 +18,9 @@ export const BookNav = defineBookElement()({
             display: flex;
             flex-direction: column;
             padding: 16px 0;
-            background-color: ${colorThemeCssVars['element-book-page-background-faint-level-2-color'].value};
+
+            background-color: ${viraTheme.colors['vira-grey-behind-fg-highest-contrast'].background
+        .value};
         }
 
         .title-row:hover {
@@ -97,7 +98,9 @@ export const BookNav = defineBookElement()({
                     >
                         <div class="title-text">
                             ${renderIf(isBookTreeNode(treeNode, BookEntryType.ElementExample), html `
-                                    <${ViraIcon.assign({ icon: Element16Icon })}></${ViraIcon}>
+                                    <${ViraIcon.assign({
+                icon: Element16Icon,
+            })}></${ViraIcon}>
                                 `)}
                             ${treeNode.entry.title}
                         </div>
@@ -110,7 +113,7 @@ export const BookNav = defineBookElement()({
             route: defaultBookFullRoute,
             router: inputs.router,
         })}>
-                <slot name=${ElementBookSlotName.NavHeader}>Book</slot>
+                <slot>Book</slot>
             </${BookRouteLink}>
             <ul>
                 ${navTreeTemplates}

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

@@ -30,6 +30,9 @@ export declare const ElementBookApp: import("element-vir").DeclarativeElementDef
         controls: ControlsWrapper;
     } | undefined;
     originalWindowTitle: string | undefined;
+    isDarkMode: boolean;
+    /** Cleanup callback for the dark mode media query listener. */
+    darkModeCleanup: (() => void) | undefined;
 }, {
     pathUpdate: import("element-vir").DefineEvent<readonly string[]>;
-}, "element-book-app-", "element-book-app-", readonly [], readonly []>;
+}, "element-book-app-", "element-book-app-", readonly ["footer", "navHeader"], readonly []>;

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

@@ -1,20 +1,22 @@
 import { check } from '@augment-vir/assert';
 import { extractErrorMessage, makeWritable } from '@augment-vir/common';
 import { waitForAnimationFrame } from '@augment-vir/web';
+import { colorCss } from '@electrovir/color';
 import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
+import { applyCssVarsViaStyleElement } from 'lit-css-vars';
+import { themeDefaultKey } from 'theme-vir';
+import { ViraError, viraTheme, viraThemeDarkOverride } from 'vira';
 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';
 import { createBookRouter } from '../../../routing/book-router.js';
 import { defaultBookFullRoute, extractSearchQuery, } from '../../../routing/book-routing.js';
-import { colorThemeCssVars, setThemeCssVars, } from '../../color-theme/color-theme.js';
+import { 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 } 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';
-import { ElementBookSlotName } from './element-book-app-slots.js';
 import { getCurrentNodes } from './get-current-nodes.js';
 /**
  * The element-book app itself. Instantiate one of these where you want your element-book pages to
@@ -35,11 +37,26 @@ export const ElementBookApp = defineElement()({
             },
             treeBasedControls: undefined,
             originalWindowTitle: undefined,
+            isDarkMode: globalThis.matchMedia('(prefers-color-scheme: dark)').matches,
+            /** Cleanup callback for the dark mode media query listener. */
+            darkModeCleanup: undefined,
         };
     },
     events: {
         pathUpdate: defineElementEvent(),
     },
+    slotNames: [
+        /**
+         * Used to specify a footer for the main element example viewer. It always appears at the
+         * bottom of the viewer's scroll area.
+         */
+        'footer',
+        /**
+         * Used to specify a header above the navigation sidebar. This is a particularly good place
+         * for branding.
+         */
+        'navHeader',
+    ],
     styles: css `
         :host {
             display: flex;
@@ -47,12 +64,7 @@ export const ElementBookApp = defineElement()({
             height: 100%;
             width: 100%;
             font-family: sans-serif;
-            background-color: ${colorThemeCssVars['element-book-page-background-color'].value};
-            color: ${colorThemeCssVars['element-book-page-foreground-color'].value};
-        }
-
-        .error {
-            color: red;
+            ${colorCss(viraTheme.colors[themeDefaultKey])}
         }
 
         .root {
@@ -79,10 +91,16 @@ export const ElementBookApp = defineElement()({
     cleanup({ state, updateState }) {
         if (state.router) {
             state.router.destroy();
-            updateState({ router: undefined });
         }
+        if (state.darkModeCleanup) {
+            state.darkModeCleanup();
+        }
+        updateState({
+            router: undefined,
+            darkModeCleanup: undefined,
+        });
     },
-    render: ({ state, inputs, host, updateState, dispatch, events }) => {
+    render: ({ state, inputs, host, updateState, dispatch, events, slotNames }) => {
         if (inputs._debug) {
             console.info('rendering element-book app');
         }
@@ -99,7 +117,9 @@ export const ElementBookApp = defineElement()({
         function updateWindowTitle(topNodeTitle) {
             if (!inputs.preventWindowTitleChange) {
                 if (!state.originalWindowTitle) {
-                    updateState({ originalWindowTitle: document.title });
+                    updateState({
+                        originalWindowTitle: document.title,
+                    });
                 }
                 document.title = [
                     state.originalWindowTitle,
@@ -133,11 +153,15 @@ export const ElementBookApp = defineElement()({
         try {
             if (inputs.elementBookRoutePaths &&
                 !check.jsonEquals(inputs.elementBookRoutePaths, state.currentRoute.paths)) {
-                updateRoutes({ paths: makeWritable(inputs.elementBookRoutePaths) });
+                updateRoutes({
+                    paths: makeWritable(inputs.elementBookRoutePaths),
+                });
             }
             if (inputs.internalRouterConfig?.useInternalRouter && !state.router) {
                 const router = createBookRouter(inputs.internalRouterConfig.basePath);
-                updateState({ router });
+                updateState({
+                    router,
+                });
                 router.listen(true, (fullRoute) => {
                     updateState({
                         currentRoute: fullRoute,
@@ -160,6 +184,23 @@ export const ElementBookApp = defineElement()({
                 });
                 setThemeCssVars(host, newTheme);
             }
+            if (!state.darkModeCleanup) {
+                const query = globalThis.matchMedia('(prefers-color-scheme: dark)');
+                const listener = (event) => {
+                    updateState({
+                        isDarkMode: event.matches,
+                    });
+                };
+                query.addEventListener('change', listener);
+                updateState({
+                    isDarkMode: query.matches,
+                    darkModeCleanup: () => {
+                        query.removeEventListener('change', listener);
+                    },
+                });
+            }
+            const isDarkMode = inputs.darkMode ?? state.isDarkMode;
+            applyCssVarsViaStyleElement(isDarkMode ? viraThemeDarkOverride.overrides : {}, 'element-book-dark-mode');
             const debug = inputs._debug ?? false;
             const originalTree = createBookTreeFromEntries({
                 entries: inputs.pages,
@@ -195,13 +236,13 @@ export const ElementBookApp = defineElement()({
             const currentControls = state.treeBasedControls?.controls;
             if (!currentControls) {
                 return html `
-                    <${BookError.assign({
-                    message: 'Failed to generate page controls.',
-                })}></${BookError}>
+                    <${ViraError}>Failed to generate page controls.</${ViraError}>
                 `;
             }
             if (inputs._debug) {
-                console.info({ currentControls });
+                console.info({
+                    currentControls,
+                });
             }
             return html `
                 <div
@@ -211,7 +252,9 @@ export const ElementBookApp = defineElement()({
                 if (!areRoutesNew(newRoute)) {
                     return;
                 }
-                updateState({ loading: true });
+                updateState({
+                    loading: true,
+                });
                 updateRoutes(newRoute);
                 const navElement = host.shadowRoot.querySelector(BookNav.tagName);
                 if (!(navElement instanceof BookNav)) {
@@ -241,10 +284,7 @@ export const ElementBookApp = defineElement()({
                         ? undefined
                         : state.currentRoute.paths.slice(1),
                 })}>
-                                  <slot
-                                      name=${ElementBookSlotName.NavHeader}
-                                      slot=${ElementBookSlotName.NavHeader}
-                                  ></slot>
+                                  <slot name=${slotNames.navHeader}></slot>
                               </${BookNav}>
                           `}
                     <${BookEntryDisplay.assign({
@@ -261,19 +301,21 @@ export const ElementBookApp = defineElement()({
                 await waitForAnimationFrame();
                 const entryDisplay = host.shadowRoot.querySelector(BookEntryDisplay.tagName);
                 if (entryDisplay) {
-                    entryDisplay.scroll({ top: 0, behavior: 'instant' });
+                    entryDisplay.scroll({
+                        top: 0,
+                        behavior: 'instant',
+                    });
                 }
                 else {
                     console.error(`Failed to find '${BookEntryDisplay.tagName}' for scrolling.`);
                 }
                 await waitForAnimationFrame();
-                updateState({ loading: !event.detail });
+                updateState({
+                    loading: !event.detail,
+                });
             })}
                     >
-                        <slot
-                            name=${ElementBookSlotName.Footer}
-                            slot=${ElementBookSlotName.Footer}
-                        ></slot>
+                        <slot name=${slotNames.footer}></slot>
                     </${BookEntryDisplay}>
                 </div>
             `;
@@ -281,7 +323,7 @@ export const ElementBookApp = defineElement()({
         catch (error) {
             console.error(error);
             return html `
-                <p class="error">${extractErrorMessage(error)}</p>
+                <${ViraError}>${extractErrorMessage(error)}</${ViraError}>
             `;
         }
     },

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

@@ -20,6 +20,8 @@ export type ElementBookConfig = {
 export type OptionalConfig = {
     /** The base theme color from which all other element-book colors will be generated from. */
     themeColor: string;
+    /** Force dark mode on or off. When `undefined`, follows the system preference. */
+    darkMode: boolean;
     _debug: boolean;
     globalValues: GlobalValues;
     preventWindowTitleChange: boolean;

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

@@ -1,7 +1,8 @@
 import { wait } from '@augment-vir/common';
 import { css, html, listen, renderIf } from 'element-vir';
+import { themeDefaultKey } from 'theme-vir';
+import { viraTheme } from 'vira';
 import { BookMainRoute, defaultBookFullRoute, } from '../../../routing/book-routing.js';
-import { colorThemeCssVars } from '../../color-theme/color-theme.js';
 import { ChangeRouteEvent } from '../../events/change-route.event.js';
 import { BookBreadcrumbs } from '../book-breadcrumbs.element.js';
 import { defineBookElement } from '../define-book-element.js';
@@ -10,9 +11,9 @@ export const BookBreadcrumbsBar = defineBookElement()({
     styles: css `
         :host {
             border-bottom: 1px solid
-                ${colorThemeCssVars['element-book-page-foreground-faint-level-2-color'].value};
+                ${viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value};
             padding: 4px 8px;
-            background-color: ${colorThemeCssVars['element-book-page-background-color'].value};
+            background-color: ${viraTheme.colors[themeDefaultKey].background.value};
             display: flex;
             gap: 16px;
             justify-content: space-between;
@@ -38,7 +39,9 @@ export const BookBreadcrumbsBar = defineBookElement()({
             }
             const preThrottleValue = inputElement.value;
             // throttle it a bit
-            await wait({ milliseconds: 200 });
+            await wait({
+                milliseconds: 200,
+            });
             if (inputElement.value !== preThrottleValue) {
                 return;
             }

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

@@ -1,18 +1,19 @@
 import { css, html } from 'element-vir';
-import { colorThemeCssVars } from '../../color-theme/color-theme.js';
+import { themeDefaultKey } from 'theme-vir';
+import { viraTheme } from 'vira';
 import { defineBookElement } from '../define-book-element.js';
 export const BookEntryDescription = defineBookElement()({
     tagName: 'book-entry-description',
     styles: css `
         :host {
-            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
+            color: ${viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value};
             display: inline-flex;
             flex-direction: column;
             gap: 8px;
         }
 
         :host(:hover) {
-            color: ${colorThemeCssVars['element-book-page-foreground-color'].value};
+            color: ${viraTheme.colors[themeDefaultKey].foreground.value};
         }
 
         p {

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

@@ -1,9 +1,8 @@
 import { check } from '@augment-vir/assert';
 import { VirColorPicker } from '@electrovir/color';
 import { css, defineElementEvent, html, listen, renderIf } from 'element-vir';
-import { Options24Icon, ViraCheckbox, ViraIcon, ViraInput, ViraSelect } from 'vira';
+import { Options24Icon, ViraCheckbox, ViraError, ViraIcon, ViraInput, ViraSelect, viraTheme, } from 'vira';
 import { BookPageControlType, isControlInitType, } from '../../../../data/book-entry/book-page/book-page-controls.js';
-import { colorThemeCssVars } from '../../../color-theme/color-theme.js';
 import { defineBookElement } from '../../define-book-element.js';
 export const BookPageControls = defineBookElement()({
     tagName: 'book-page-controls',
@@ -22,7 +21,7 @@ export const BookPageControls = defineBookElement()({
             align-content: flex-start;
             gap: 16px;
             row-gap: 10px;
-            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
+            color: ${viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value};
         }
 
         ${hostClasses['book-page-controls-has-controls'].selector} {
@@ -36,11 +35,6 @@ export const BookPageControls = defineBookElement()({
             flex-direction: column;
         }
 
-        .error {
-            font-weight: bold;
-            color: red;
-        }
-
         ${ViraInput}, ${ViraSelect} {
             height: 24px;
             max-width: 128px;
@@ -87,7 +81,9 @@ export const BookPageControls = defineBookElement()({
             return html `
                     <div class="control-wrapper">
                         ${renderIf(index === 0, html `
-                                <${ViraIcon.assign({ icon: Options24Icon })}
+                                <${ViraIcon.assign({
+                icon: Options24Icon,
+            })}
                                     class="options-icon"
                                 ></${ViraIcon}>
                             `)}
@@ -183,9 +179,9 @@ function createControlInput(value, controlInit, valueChange) {
     }
     else {
         return html `
-            <p class="error">
+            <${ViraError}>
                 ${controlInit.controlType} controls are not implemented yet.
-            </p>
+            </${ViraError}>
         `;
     }
 }

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

@@ -1,8 +1,8 @@
 import { combineErrors } from '@augment-vir/common';
 import { css, html } from 'element-vir';
+import { ViraError } from 'vira';
 import { traverseControls, } from '../../../../data/book-entry/book-page/controls-wrapper.js';
 import { BookMainRoute } from '../../../../routing/book-routing.js';
-import { BookError } from '../../common/book-error.element.js';
 import { BookRouteLink } from '../../common/book-route-link.element.js';
 import { defineBookElement } from '../../define-book-element.js';
 import { BookEntryDescription } from '../book-entry-description.element.js';
@@ -72,7 +72,7 @@ export const BookPageWrapper = defineBookElement()({
                     ${headerTemplate}
                     ${error
             ? html `
-                              <${BookError.assign({ message: error.message })}></${BookError}>
+                              <${ViraError}>${error.message}</${ViraError}>
                           `
             : html `
                               <${BookEntryDescription.assign({

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

@@ -1,6 +1,6 @@
 import { css, html } from 'element-vir';
+import { viraTheme } from 'vira';
 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 BookElementExampleTitle = defineBookElement()({
@@ -8,7 +8,7 @@ export const BookElementExampleTitle = defineBookElement()({
     styles: css `
         :host {
             display: flex;
-            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
+            color: ${viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value};
             border-bottom: 1px solid currentColor;
             padding: 0 8px 4px;
         }

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

@@ -1,7 +1,7 @@
 import { combineErrors, extractErrorMessage } from '@augment-vir/common';
 import { html, renderIf } from 'element-vir';
+import { ViraError } from 'vira';
 import { unsetInternalState } from '../../../../data/unset.js';
-import { BookError } from '../../common/book-error.element.js';
 import { defineBookElement } from '../../define-book-element.js';
 export const BookElementExampleViewer = defineBookElement()({
     tagName: 'book-element-example-viewer',
@@ -15,7 +15,7 @@ export const BookElementExampleViewer = defineBookElement()({
             if (inputs.elementExampleNode.entry.errors.length) {
                 throw combineErrors(inputs.elementExampleNode.entry.errors);
             }
-            if (
+            else if (
             /** This is a check to make sure the input entry _does_ match the expected type. */
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             !inputs.elementExampleNode.entry.render ||
@@ -49,9 +49,9 @@ export const BookElementExampleViewer = defineBookElement()({
             console.error('ERROR HERE', extractErrorMessage(error));
             console.error(error);
             return html `
-                <${BookError.assign({
-                message: `${inputs.elementExampleNode.entry.title} failed: ${extractErrorMessage(error)}`,
-            })}></${BookError}>
+                <${ViraError}>
+                    ${inputs.elementExampleNode.entry.title} failed: ${extractErrorMessage(error)}
+                </${ViraError}>
             `;
         }
     },

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

@@ -1,4 +1,5 @@
 import { css, html } from 'element-vir';
+import { viraTheme } from 'vira';
 import { colorThemeCssVars } from '../../../color-theme/color-theme.js';
 import { defineBookElement } from '../../define-book-element.js';
 import { BookElementExampleTitle } from './book-element-example-title.element.js';
@@ -17,11 +18,6 @@ export const BookElementExampleWrapper = defineBookElement()({
             flex-wrap: wrap;
         }
 
-        .error {
-            color: red;
-            font-weight: bold;
-        }
-
         .individual-example-wrapper {
             display: flex;
             flex-direction: column;
@@ -31,7 +27,7 @@ export const BookElementExampleWrapper = defineBookElement()({
         }
 
         ${BookElementExampleTitle} {
-            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
+            color: ${viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value};
         }
 
         :host(:hover) ${BookElementExampleTitle} {

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

@@ -1,8 +1,9 @@
+import { colorCss } from '@electrovir/color';
 import { css, defineElementEvent, html, onDomCreated, renderIf } from 'element-vir';
-import { LoaderAnimated24Icon, ViraIcon, viraAnimationDurations } from 'vira';
+import { themeDefaultKey } from 'theme-vir';
+import { LoaderAnimated24Icon, ViraIcon, viraAnimationDurations, viraTheme } from 'vira';
 import { extractSearchQuery } from '../../../../routing/book-routing.js';
 import { defineBookElement } from '../../define-book-element.js';
-import { ElementBookSlotName } from '../../element-book-app/element-book-app-slots.js';
 import { BookBreadcrumbsBar } from '../book-breadcrumbs-bar.element.js';
 import { createNodeTemplates } from './create-node-templates.js';
 export const BookEntryDisplay = defineBookElement()({
@@ -20,6 +21,7 @@ export const BookEntryDisplay = defineBookElement()({
         }
 
         .all-book-entries-wrapper {
+            background-color: ${viraTheme.colors[themeDefaultKey].background.value};
             flex-grow: 1;
             padding: 32px;
         }
@@ -54,7 +56,7 @@ export const BookEntryDisplay = defineBookElement()({
             flex-grow: 1;
             padding: 64px;
             position: absolute;
-            background-color: white;
+            ${colorCss(viraTheme.colors[themeDefaultKey])}
             animation: fade-in linear
                 ${viraAnimationDurations['vira-interaction-animation-duration'].value} forwards;
             z-index: 100;
@@ -101,22 +103,26 @@ export const BookEntryDisplay = defineBookElement()({
         })}
                         class="loading"
                     >
-                        <${ViraIcon.assign({ icon: LoaderAnimated24Icon })}></${ViraIcon}>
+                        <${ViraIcon.assign({
+            icon: LoaderAnimated24Icon,
+        })}></${ViraIcon}>
                     </div>
                     ${renderIf(!!state.lastElement, html `
                             ${state.lastElement}
-                            <slot name=${ElementBookSlotName.Footer}></slot>
+                            <slot></slot>
                         `)}
                 `, html `
                     <div
                         ${onDomCreated((element) => {
-            updateState({ lastElement: element });
+            updateState({
+                lastElement: element,
+            });
         })}
                         class="all-book-entries-wrapper"
                     >
                         ${entryTemplates}
                     </div>
-                    <slot name=${ElementBookSlotName.Footer}></slot>
+                    <slot></slot>
                 `)}
         `;
     },

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

@@ -97,9 +97,13 @@ export const BookLazyEntry = defineBookElement()({
             if (state.placeholderElement) {
                 unobserveElement(state.placeholderElement);
             }
-            updateState({ placeholderElement: element });
+            updateState({
+                placeholderElement: element,
+            });
             observedElements.set(element, () => {
-                updateState({ hasRendered: true });
+                updateState({
+                    hasRendered: true,
+                });
             });
             getSharedObserver().observe(element);
         })}

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

@@ -1,10 +1,10 @@
 import { check } from '@augment-vir/assert';
 import { mapObjectValues } from '@augment-vir/common';
 import { classMap, html, nothing, repeat, } from 'element-vir';
+import { ViraError } from 'vira';
 import { BookEntryType } from '../../../../data/book-entry/book-entry-type.js';
 import { traverseControls, } from '../../../../data/book-entry/book-page/controls-wrapper.js';
 import { isBookTreeNode, traverseToImmediateParent } from '../../../../data/book-tree/book-tree.js';
-import { BookError } from '../../common/book-error.element.js';
 import { BookPageControls } from '../book-page/book-page-controls.element.js';
 import { BookPageWrapper } from '../book-page/book-page-wrapper.element.js';
 import { BookElementExampleWrapper } from '../element-example/book-element-example-wrapper.element.js';
@@ -43,7 +43,11 @@ function getFlattenedControlsFromHiddenParents(currentNodes, currentControls, cu
                 ...currentControls.breadcrumbs,
             },
         };
-    }, { config: {}, current: {}, breadcrumbs: {} });
+    }, {
+        config: {},
+        current: {},
+        breadcrumbs: {},
+    });
 }
 export function createNodeTemplates({ blockNavigation, currentNodes, isTopLevel, router, isSearching, controls, originalTree, }) {
     if (!currentNodes.length && isSearching) {
@@ -106,9 +110,9 @@ export function createNodeTemplates({ blockNavigation, currentNodes, isTopLevel,
         }
         else {
             const content = html `
-                    <${BookError.assign({
-                message: `Unknown entry type for rendering: '${currentNode.entry.entryType}'`,
-            })}></${BookError}>
+                    <${ViraError}>
+                        Unknown entry type for rendering: '${currentNode.entry.entryType}'
+                    </${ViraError}>
                 `;
             return html `
                     <${BookLazyEntry.assign({

package/dist/util/fuzzy-search.js

@@ -36,12 +36,11 @@ searchIn, }) {
     if (searchQueryLength > searchInLength) {
         return false;
     }
-    if (searchQueryLength === searchInLength) {
+    else if (searchQueryLength === searchInLength) {
         return searchQuery === searchIn;
     }
     const lowercaseSearchIn = searchIn.toLowerCase();
     const lowercaseSearchQuery = searchQuery.toLowerCase();
-    // eslint-disable-next-line sonarjs/no-labels
     outer: for (let i = 0, j = 0; i < searchQueryLength; i++) {
         const charCode = lowercaseSearchQuery.codePointAt(i);
         while (j < searchInLength) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "26.16.1",
+    "version": "26.17.1",
     "keywords": [
         "book",
         "design system",
@@ -41,33 +41,35 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.59.3",
-        "@augment-vir/common": "^31.59.3",
-        "@augment-vir/web": "^31.59.3",
-        "@electrovir/color": "^1.7.8",
+        "@augment-vir/assert": "^31.68.2",
+        "@augment-vir/common": "^31.68.2",
+        "@augment-vir/web": "^31.68.2",
+        "@electrovir/color": "^1.7.9",
         "colorjs.io": "^0.6.1",
-        "date-vir": "^8.1.1",
-        "lit-css-vars": "^3.5.0",
+        "date-vir": "^8.2.1",
+        "lit-css-vars": "^3.6.2",
         "spa-router-vir": "^6.4.1",
-        "typed-event-target": "^4.1.0"
+        "typed-event-target": "^4.3.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.59.3",
+        "@augment-vir/test": "^31.68.2",
         "@web/dev-server-esbuild": "^1.0.5",
         "@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.3",
+        "element-vir": "^26.15.1",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
-        "type-fest": "^5.4.4",
-        "typedoc": "^0.28.16",
+        "theme-vir": "^28.25.0",
+        "type-fest": "^5.5.0",
+        "typedoc": "^0.28.18",
         "typescript": "5.9.3",
-        "vira": "^29.3.2"
+        "vira": "^31.13.0"
     },
     "peerDependencies": {
         "element-vir": ">=17",
+        "theme-vir": ">=28.0.0",
         "vira": ">=28.0.0"
     },
     "engines": {

package/dist/ui/elements/common/book-error.element.d.ts

@@ -1,3 +0,0 @@
-export declare const BookError: import("element-vir").DeclarativeElementDefinition<"book-error", {
-    message: string | ReadonlyArray<string>;
-}, {}, {}, "book-error-", "book-error-", readonly [], readonly []>;

package/dist/ui/elements/common/book-error.element.js

@@ -1,25 +0,0 @@
-import { check } from '@augment-vir/assert';
-import { css, html } from 'element-vir';
-import { defineBookElement } from '../define-book-element.js';
-export const BookError = defineBookElement()({
-    tagName: 'book-error',
-    styles: css `
-        :host {
-            display: flex;
-            flex-direction: column;
-            color: red;
-            font-weight: bold;
-        }
-
-        p {
-            margin: 0;
-            padding: 0;
-        }
-    `,
-    render({ inputs }) {
-        const paragraphs = check.isArray(inputs.message) ? inputs.message : [inputs.message];
-        return paragraphs.map((paragraph) => html `
-                <p>${paragraph}</p>
-            `);
-    },
-});

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

@@ -1,17 +0,0 @@
-/**
- * Slots to be used on an element-book app instance for inserting custom HTML into the app.
- *
- * @category Main
- */
-export declare enum ElementBookSlotName {
-    /**
-     * Used to specify a footer for the main element example viewer. It always appears at the bottom
-     * of the viewer's scroll area.
-     */
-    Footer = "book-footer",
-    /**
-     * Used to specify a header above the navigation sidebar. This is a particularly good place for
-     * branding.
-     */
-    NavHeader = "book-nav-header"
-}

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

@@ -1,18 +0,0 @@
-/**
- * Slots to be used on an element-book app instance for inserting custom HTML into the app.
- *
- * @category Main
- */
-export var ElementBookSlotName;
-(function (ElementBookSlotName) {
-    /**
-     * Used to specify a footer for the main element example viewer. It always appears at the bottom
-     * of the viewer's scroll area.
-     */
-    ElementBookSlotName["Footer"] = "book-footer";
-    /**
-     * Used to specify a header above the navigation sidebar. This is a particularly good place for
-     * branding.
-     */
-    ElementBookSlotName["NavHeader"] = "book-nav-header";
-})(ElementBookSlotName || (ElementBookSlotName = {}));