element-book 26.16.0 → 26.17.0

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/create-color-theme.js

@@ -4,7 +4,9 @@ import { unsafeCSS } from 'element-vir';
 function colorsObjectToCssResult(colors) {
     return mapObjectValues(colors, (key, value) => {
         if (value instanceof Color) {
-            return unsafeCSS(value.toString({ format: 'hex' }));
+            return unsafeCSS(value.toString({
+                format: 'hex',
+            }));
         }
         else {
             return colorsObjectToCssResult(value);
@@ -74,12 +76,26 @@ export function createTheme({ themeColor: inputThemeColor = defaultThemeStartCol
     const foregroundColor = new Color(foregroundColorString);
     const colors = {
         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: 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,
+                }),
+            }),
         },
         accent: {
-            icon: themeColor.clone().set({ 'hsl.l': 40 }),
+            icon: themeColor.clone().set({
+                'hsl.l': 40,
+            }),
         },
         page: {
             background: backgroundColor,

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

@@ -7,7 +7,6 @@ import { BookMainRoute, defaultBookFullRoute } from '../../../routing/book-routi
 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',
@@ -97,7 +96,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 +111,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

@@ -32,4 +32,4 @@ export declare const ElementBookApp: import("element-vir").DeclarativeElementDef
     originalWindowTitle: string | 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

@@ -14,7 +14,6 @@ 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
@@ -40,6 +39,18 @@ export const ElementBookApp = defineElement()({
     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;
@@ -79,10 +90,12 @@ export const ElementBookApp = defineElement()({
     cleanup({ state, updateState }) {
         if (state.router) {
             state.router.destroy();
-            updateState({ router: undefined });
+            updateState({
+                router: 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 +112,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 +148,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,
@@ -201,7 +220,9 @@ export const ElementBookApp = defineElement()({
                 `;
             }
             if (inputs._debug) {
-                console.info({ currentControls });
+                console.info({
+                    currentControls,
+                });
             }
             return html `
                 <div
@@ -211,7 +232,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 +264,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 +281,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>
             `;

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

@@ -38,7 +38,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-page/book-page-controls.element.js

@@ -87,7 +87,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}>
                             `)}
@@ -153,7 +155,7 @@ function createControlInput(value, controlInit, valueChange) {
         return html `
             <${ViraInput.assign({
             value,
-            allowedInputs: /\d/,
+            allowedInputs: /[\d.]/,
         })}
                 ${listen(ViraInput.events.valueChange, (event) => {
             valueChange(event.detail);

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

@@ -72,7 +72,9 @@ export const BookPageWrapper = defineBookElement()({
                     ${headerTemplate}
                     ${error
             ? html `
-                              <${BookError.assign({ message: error.message })}></${BookError}>
+                              <${BookError.assign({
+                message: error.message,
+            })}></${BookError}>
                           `
             : html `
                               <${BookEntryDescription.assign({

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

@@ -2,7 +2,6 @@ import { css, defineElementEvent, html, onDomCreated, renderIf } from 'element-v
 import { LoaderAnimated24Icon, ViraIcon, viraAnimationDurations } 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()({
@@ -101,22 +100,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

@@ -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) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "26.16.0",
+    "version": "26.17.0",
     "keywords": [
         "book",
         "design system",
@@ -41,30 +41,30 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.59.0",
-        "@augment-vir/common": "^31.59.0",
-        "@augment-vir/web": "^31.59.0",
-        "@electrovir/color": "^1.7.6",
+        "@augment-vir/assert": "^31.67.0",
+        "@augment-vir/common": "^31.67.0",
+        "@augment-vir/web": "^31.67.0",
+        "@electrovir/color": "^1.7.8",
         "colorjs.io": "^0.6.1",
-        "date-vir": "^8.1.0",
-        "lit-css-vars": "^3.3.0",
+        "date-vir": "^8.2.0",
+        "lit-css-vars": "^3.5.0",
         "spa-router-vir": "^6.4.1",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.59.0",
-        "@web/dev-server-esbuild": "^1.0.4",
+        "@augment-vir/test": "^31.67.0",
+        "@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.14.4",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
-        "type-fest": "^5.4.1",
-        "typedoc": "^0.28.16",
+        "type-fest": "^5.4.4",
+        "typedoc": "^0.28.17",
         "typescript": "5.9.3",
-        "vira": "^29.0.0"
+        "vira": "^30.0.0"
     },
     "peerDependencies": {
         "element-vir": ">=17",

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 = {}));