element-book 26.17.0 → 26.17.2

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,34 +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-brand-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),
     };
 }
 /**
@@ -41,69 +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({
+            hover: createCssColorPair({
                 background: themeColor.clone().set({
                     'hsl.l': 93,
                 }),
             }),
-            active: createColorPair({
+            active: createCssColorPair({
                 background: themeColor.clone().set({
                     'hsl.l': 90,
                 }),
             }),
-            selected: createColorPair({
+            selected: createCssColorPair({
                 background: themeColor.clone().set({
                     'hsl.l': 85,
                 }),
             }),
         },
         accent: {
-            icon: themeColor.clone().set({
+            icon: colorToCss(themeColor.clone().set({
                 'hsl.l': 40,
-            }),
-        },
-        page: {
-            background: backgroundColor,
-            ...faintBackgroundColors[flipBackForeground(foregroundColorString)],
-            foreground: foregroundColor,
-            ...faintForegroundColors[foregroundColorString],
+            })),
         },
     };
-    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,6 +1,6 @@
 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';
@@ -18,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 {

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 ["footer", "navHeader"], readonly []>;

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

@@ -1,17 +1,20 @@
 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 { getCurrentNodes } from './get-current-nodes.js';
@@ -34,6 +37,9 @@ 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: {
@@ -58,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 {
@@ -90,10 +91,14 @@ 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, slotNames }) => {
         if (inputs._debug) {
@@ -179,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,
@@ -214,9 +236,7 @@ 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) {
@@ -303,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;

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;
@@ -185,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,9 +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,5 +1,7 @@
+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 { BookBreadcrumbsBar } from '../book-breadcrumbs-bar.element.js';
@@ -19,6 +21,7 @@ export const BookEntryDisplay = defineBookElement()({
         }
 
         .all-book-entries-wrapper {
+            background-color: ${viraTheme.colors[themeDefaultKey].background.value};
             flex-grow: 1;
             padding: 32px;
         }
@@ -53,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;

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';
@@ -110,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.17.0",
+    "version": "26.17.2",
     "keywords": [
         "book",
         "design system",
@@ -41,33 +41,35 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.67.0",
-        "@augment-vir/common": "^31.67.0",
-        "@augment-vir/web": "^31.67.0",
-        "@electrovir/color": "^1.7.8",
+        "@augment-vir/assert": "^31.68.4",
+        "@augment-vir/common": "^31.68.4",
+        "@augment-vir/web": "^31.68.4",
+        "@electrovir/color": "^1.7.9",
         "colorjs.io": "^0.6.1",
-        "date-vir": "^8.2.0",
-        "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.67.0",
+        "@augment-vir/test": "^31.68.4",
         "@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.4",
+        "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.17",
+        "theme-vir": "^28.25.0",
+        "type-fest": "^5.5.0",
+        "typedoc": "^0.28.18",
         "typescript": "5.9.3",
-        "vira": "^30.0.0"
+        "vira": "^31.14.1"
     },
     "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>
-            `);
-    },
-});