element-book 8.0.0 → 9.0.0

package/dist/data/book-entry/book-page/current-controls.d.ts

@@ -10,4 +10,4 @@ export type CurrentControls = {
 };
 export declare function traverseCurrentControls(currentControls: CurrentControls, fullUrlBreadcrumbs: ReadonlyArray<string>): BookPageControlsValues;
 export declare function createNewCurrentControls(currentControls: CurrentControls, fullUrlBreadcrumbs: ReadonlyArray<string>, newValues: BookPageControlsValues): CurrentControls;
-export declare function createControlsFromTree(node: BookTreeNode, globalControls: GlobalValues): CurrentControls;
+export declare function createControlsFromTree(node: BookTreeNode, globalValues: GlobalValues): CurrentControls;

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

@@ -43,7 +43,7 @@ export function createNewCurrentControls(currentControls, fullUrlBreadcrumbs, ne
     internalTraverseCurrentControls(newCurrentControls, fullUrlBreadcrumbs, newValues);
     return newCurrentControls;
 }
-export function createControlsFromTree(node, globalControls) {
+export function createControlsFromTree(node, globalValues) {
     const currentControls = mapObjectValues(node.children, (childName, child) => {
         if (!isBookTreeNode(child, BookEntryTypeEnum.Page)) {
             return {
@@ -54,7 +54,7 @@ export function createControlsFromTree(node, globalControls) {
         return {
             children: createControlsFromTree(child, {}),
             controls: {
-                ...globalControls,
+                ...globalValues,
                 ...mapObjectValues(child.entry.controls, (name, setup) => {
                     return setup.initValue;
                 }),

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

@@ -1,4 +1,4 @@
-import { assign, css, html } from 'element-vir';
+import { css, html } from 'element-vir';
 import { BookMainRoute } from '../../routing/book-routing';
 import { BookRouteLink } from './common/book-route-link.element';
 import { defineBookElement } from './define-book-element';
@@ -30,8 +30,7 @@ export const BookBreadcrumbs = defineBookElement()({
                       <span class="spacer">&gt;</span>
                   `;
             return html `
-                <${BookRouteLink}
-                    ${assign(BookRouteLink, {
+                <${BookRouteLink.assign({
                 route: {
                     hash: undefined,
                     search: undefined,
@@ -41,8 +40,7 @@ export const BookBreadcrumbs = defineBookElement()({
                     ],
                 },
                 router: inputs.router,
-            })}
-                >
+            })}>
                     ${currentPath}
                 </${BookRouteLink}>
                 ${spacer}

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

@@ -1,6 +1,6 @@
 import { checkIfEntirelyInScrollView, waitForAnimationFrame } from '@augment-vir/browser';
 import { areJsonEqual } from '@augment-vir/common';
-import { assign, classMap, css, html, renderIf } from 'element-vir';
+import { classMap, css, html, renderIf } from 'element-vir';
 import { Element16Icon, ViraIcon } from 'vira';
 import { BookEntryTypeEnum } from '../../data/book-entry/book-entry-type';
 import { isBookTreeNode } from '../../data/book-tree/book-tree';
@@ -76,8 +76,7 @@ export const BookNav = defineBookElement()({
             `;
             return html `
                 <li style=${liStyle}>
-                    <${BookRouteLink}
-                        ${assign(BookRouteLink, {
+                    <${BookRouteLink.assign({
                 router: inputs.router,
                 route: {
                     paths: [
@@ -95,9 +94,7 @@ export const BookNav = defineBookElement()({
                     >
                         <div class="title-text">
                             ${renderIf(isBookTreeNode(treeNode, BookEntryTypeEnum.ElementExample), html `
-                                    <${ViraIcon}
-                                        ${assign(ViraIcon, { icon: Element16Icon })}
-                                    ></${ViraIcon}>
+                                    <${ViraIcon.assign({ icon: Element16Icon })}></${ViraIcon}>
                                 `)}
                             ${treeNode.entry.title}
                         </div>

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

@@ -12,7 +12,7 @@ export declare const ElementBookApp: import("element-vir").DeclarativeElementDef
     colors: ColorThemeState;
     treeBasedCurrentControls: {
         entries: ElementBookConfig['entries'];
-        globalControls: GlobalValues;
+        globalValues: GlobalValues;
         currentControls: CurrentControls;
     } | undefined;
 }, {

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

@@ -1,5 +1,5 @@
 import { areJsonEqual, extractErrorMessage } from '@augment-vir/common';
-import { assign, css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
 import { createControlsFromTree, createNewCurrentControls, } from '../../../data/book-entry/book-page/current-controls';
 import { createBookTreeFromEntries } from '../../../data/book-tree/book-tree';
 import { searchFlattenedNodes } from '../../../data/book-tree/search-nodes';
@@ -133,12 +133,12 @@ export const ElementBookApp = defineElement()({
             });
             if (!state.treeBasedCurrentControls ||
                 state.treeBasedCurrentControls.entries !== inputs.entries ||
-                state.treeBasedCurrentControls.globalControls !== inputs.globalControls) {
+                state.treeBasedCurrentControls.globalValues !== inputs.globalValues) {
                 updateState({
                     treeBasedCurrentControls: {
                         entries: inputs.entries,
-                        globalControls: inputs.globalControls ?? {},
-                        currentControls: createControlsFromTree(originalTree.tree, inputs.globalControls ?? {}),
+                        globalValues: inputs.globalValues ?? {},
+                        currentControls: createControlsFromTree(originalTree.tree, inputs.globalValues ?? {}),
                     },
                 });
             }
@@ -154,9 +154,9 @@ export const ElementBookApp = defineElement()({
             const currentControls = state.treeBasedCurrentControls?.currentControls;
             if (!currentControls) {
                 return html `
-                    <${BookError}
-                        ${assign(BookError, { message: 'Failed to generate page controls.' })}
-                    ></${BookError}>
+                    <${BookError.assign({
+                    message: 'Failed to generate page controls.',
+                })}></${BookError}>
                 `;
             }
             if (inputs.debug) {
@@ -193,30 +193,24 @@ export const ElementBookApp = defineElement()({
                 });
             })}
                 >
-                    <${BookNav}
-                        ${assign(BookNav, {
+                    <${BookNav.assign({
                 flattenedNodes: originalTree.flattenedNodes,
                 router: state.router,
-                selectedPath: searchQuery
-                    ? undefined
-                    : state.currentRoute.paths.slice(1),
-            })}
-                    >
+                selectedPath: searchQuery ? undefined : state.currentRoute.paths.slice(1),
+            })}>
                         <slot
                             name=${ElementBookSlotName.NavHeader}
                             slot=${ElementBookSlotName.NavHeader}
                         ></slot>
                     </${BookNav}>
-                    <${BookEntryDisplay}
-                        ${assign(BookEntryDisplay, {
+                    <${BookEntryDisplay.assign({
                 currentRoute: state.currentRoute,
                 currentNodes,
                 router: state.router,
                 debug,
                 currentControls,
                 originalTree: originalTree.tree,
-            })}
-                    >
+            })}>
                         <slot
                             name=${ElementBookSlotName.Footer}
                             slot=${ElementBookSlotName.Footer}

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

@@ -13,7 +13,7 @@ type OptionalConfig = {
     everythingTitle: string;
     everythingDescriptionParagraphs: ReadonlyArray<string>;
     debug: boolean;
-    globalControls: GlobalValues;
+    globalValues: GlobalValues;
 } & RequireExactlyOne<{
     /**
      * Set this internal router config if element-book is intended to be the current website's

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

@@ -1,5 +1,5 @@
 import { wait } from '@augment-vir/common';
-import { assign, css, html, listen, renderIf } from 'element-vir';
+import { css, html, listen, renderIf } from 'element-vir';
 import { BookMainRoute, defaultBookFullRoute, } from '../../../routing/book-routing';
 import { colorThemeCssVars } from '../../color-theme/color-theme';
 import { ChangeRouteEvent } from '../../events/change-route.event';
@@ -26,12 +26,10 @@ export const BookBreadcrumbsBar = defineBookElement()({
             ${renderIf(!!inputs.currentSearch, html `
                      
                 `, html `
-                    <${BookBreadcrumbs}
-                        ${assign(BookBreadcrumbs, {
+                    <${BookBreadcrumbs.assign({
             currentRoute: inputs.currentRoute,
             router: inputs.router,
-        })}
-                    ></${BookBreadcrumbs}>
+        })}></${BookBreadcrumbs}>
                 `)}
             <input
                 placeholder="search"

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

@@ -52,13 +52,11 @@ export const BookEntryDisplay = defineBookElement()({
             originalTree: inputs.originalTree,
         });
         return html `
-            <${BookBreadcrumbsBar}
-                ${assign(BookBreadcrumbsBar, {
+            <${BookBreadcrumbsBar.assign({
             currentSearch,
             currentRoute: inputs.currentRoute,
             router: inputs.router,
-        })}
-            ></${BookBreadcrumbsBar}>
+        })}></${BookBreadcrumbsBar}>
             <div class="all-book-entries-wrapper">${entryTemplates}</div>
             <slot name=${ElementBookSlotName.Footer}></slot>
         `;
@@ -114,39 +112,35 @@ function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, cu
         : undefined;
     const hiddenAncestorControlsTemplate = hiddenAncestorControls && isLengthAtLeast(currentNodes, 1)
         ? html `
-                  <${BookPageControls}
-                      ${assign(BookPageControls, {
+                  <${BookPageControls.assign({
             config: hiddenAncestorControls.config,
             currentValues: hiddenAncestorControls.current,
             fullUrlBreadcrumbs: hiddenAncestorControls.breadcrumbs,
-        })}
-                  ></${BookPageControls}>
+        })}></${BookPageControls}>
               `
         : '';
     const templates = repeat(currentNodes, (node) => node.fullUrlBreadcrumbs.join('>'), (currentNode, index) => {
         if (isBookTreeNode(currentNode, BookEntryTypeEnum.Page)) {
             return html `
-                    <${BookPageWrapper}
-                        class="block-entry"
-                        ${assign(BookPageWrapper, {
+                    <${BookPageWrapper.assign({
                 isTopLevel,
                 pageNode: currentNode,
                 currentControls,
                 router,
             })}
+                        class="block-entry"
                     ></${BookPageWrapper}>
                 `;
         }
         else if (isBookTreeNode(currentNode, BookEntryTypeEnum.ElementExample)) {
             const controlsForElementExample = traverseCurrentControls(currentControls, currentNode.fullUrlBreadcrumbs.slice(0, -1));
             return html `
-                    <${BookElementExampleWrapper}
-                        class="inline-entry"
-                        ${assign(BookElementExampleWrapper, {
+                    <${BookElementExampleWrapper.assign({
                 elementExampleNode: currentNode,
                 currentPageControls: controlsForElementExample,
                 router,
             })}
+                        class="inline-entry"
                     ></${BookElementExampleWrapper}>
                 `;
         }

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

@@ -1,6 +1,6 @@
 import { extractEventTarget } from '@augment-vir/browser';
 import { isRuntimeTypeOf } from '@augment-vir/common';
-import { assign, css, defineElementEvent, html, listen, renderIf } from 'element-vir';
+import { css, defineElementEvent, html, listen, renderIf } from 'element-vir';
 import { Options24Icon, ViraIcon } from 'vira';
 import { BookPageControlTypeEnum, isControlInitType, } from '../../../../data/book-entry/book-page/book-page-controls';
 import { colorThemeCssVars } from '../../../color-theme/color-theme';
@@ -74,9 +74,8 @@ export const BookPageControls = defineBookElement()({
             return html `
                     <div class="control-wrapper">
                         ${renderIf(index === 0, html `
-                                <${ViraIcon}
+                                <${ViraIcon.assign({ icon: Options24Icon })}
                                     class="options-icon"
-                                    ${assign(ViraIcon, { icon: Options24Icon })}
                                 ></${ViraIcon}>
                             `)}
                         <label class="control-wrapper">

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

@@ -1,5 +1,5 @@
 import { combineErrors } from '@augment-vir/common';
-import { assign, css, html } from 'element-vir';
+import { css, html } from 'element-vir';
 import { traverseCurrentControls, } from '../../../../data/book-entry/book-page/current-controls';
 import { BookMainRoute } from '../../../../routing/book-routing';
 import { BookError } from '../../common/book-error.element';
@@ -53,37 +53,29 @@ export const BookPageWrapper = defineBookElement()({
         return html `
             <div class="page-header block-entry">
                 <div class="title-group">
-                    <${BookRouteLink}
-                        ${assign(BookRouteLink, {
+                    <${BookRouteLink.assign({
             route: {
                 paths: linkPaths,
                 hash: undefined,
                 search: undefined,
             },
             router: inputs.router,
-        })}
-                    >
+        })}>
                         ${titleTemplate}
                     </${BookRouteLink}>
                     ${!!error
             ? html `
-                              <${BookError}
-                                  ${assign(BookError, { message: error.message })}
-                              ></${BookError}>
+                              <${BookError.assign({ message: error.message })}></${BookError}>
                           `
             : html `
-                              <${BookEntryDescription}
-                                  ${assign(BookEntryDescription, {
+                              <${BookEntryDescription.assign({
                 descriptionParagraphs: inputs.pageNode.entry.descriptionParagraphs ?? [],
-            })}
-                              ></${BookEntryDescription}>
-                              <${BookPageControls}
-                                  ${assign(BookPageControls, {
+            })}></${BookEntryDescription}>
+                              <${BookPageControls.assign({
                 config: inputs.pageNode.entry.controls,
                 currentValues: traverseCurrentControls(inputs.currentControls, inputs.pageNode.fullUrlBreadcrumbs),
                 fullUrlBreadcrumbs: inputs.pageNode.fullUrlBreadcrumbs,
-            })}
-                              ></${BookPageControls}>
+            })}></${BookPageControls}>
                           `}
                 </div>
             </div>

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

@@ -1,4 +1,4 @@
-import { assign, css, html } from 'element-vir';
+import { css, html } from 'element-vir';
 import { BookMainRoute } from '../../../../routing/book-routing';
 import { colorThemeCssVars } from '../../../color-theme/color-theme';
 import { BookRouteLink } from '../../common/book-route-link.element';
@@ -19,16 +19,14 @@ export const BookElementExampleControls = defineBookElement()({
             ...inputs.elementExampleNode.fullUrlBreadcrumbs,
         ];
         return html `
-            <${BookRouteLink}
-                ${assign(BookRouteLink, {
+            <${BookRouteLink.assign({
             route: {
                 paths: linkPaths,
                 hash: undefined,
                 search: undefined,
             },
             router: inputs.router,
-        })}
-            >
+        })}>
                 ${inputs.elementExampleNode.entry.title}
             </${BookRouteLink}>
         `;

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

@@ -1,5 +1,5 @@
 import { combineErrors, extractErrorMessage } from '@augment-vir/common';
-import { assign, html, renderIf } from 'element-vir';
+import { html, renderIf } from 'element-vir';
 import { unsetInternalState } from '../../../../data/unset';
 import { BookError } from '../../common/book-error.element';
 import { defineBookElement } from '../../define-book-element';
@@ -43,11 +43,9 @@ export const BookElementExampleViewer = defineBookElement()({
         catch (error) {
             console.error(error);
             return html `
-                <${BookError}
-                    ${assign(BookError, {
+                <${BookError.assign({
                 message: `${inputs.elementExampleNode.entry.title} failed: ${extractErrorMessage(error)}`,
-            })}
-                ></${BookError}>
+            })}></${BookError}>
             `;
         }
     },

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

@@ -1,4 +1,5 @@
-import { assign, css, html } from 'element-vir';
+import { omitObjectKeys } from '@augment-vir/common';
+import { css, html } from 'element-vir';
 import { colorThemeCssVars } from '../../../color-theme/color-theme';
 import { defineBookElement } from '../../define-book-element';
 import { BookElementExampleControls } from './book-element-example-controls.element';
@@ -41,12 +42,8 @@ export const BookElementExampleWrapper = defineBookElement()({
     renderCallback({ inputs }) {
         return html `
             <div class="individual-example-wrapper">
-                <${BookElementExampleControls}
-                    ${assign(BookElementExampleControls, inputs)}
-                ></${BookElementExampleControls}>
-                <${BookElementExampleViewer}
-                    ${assign(BookElementExampleViewer, inputs)}
-                ></${BookElementExampleViewer}>
+                <${BookElementExampleControls.assign(omitObjectKeys(inputs, ['currentPageControls']))}></${BookElementExampleControls}>
+                <${BookElementExampleViewer.assign(inputs)}></${BookElementExampleViewer}>
             </div>
         `;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "8.0.0",
+    "version": "9.0.0",
     "keywords": [
         "book",
         "design system",
@@ -39,28 +39,28 @@
         "test:watch": "web-test-runner --color --watch --config configs/web-test-runner.config.mjs"
     },
     "dependencies": {
-        "@augment-vir/browser": "^15.3.0",
-        "@augment-vir/common": "^15.3.0",
+        "@augment-vir/browser": "^15.4.0",
+        "@augment-vir/common": "^15.4.0",
         "colorjs.io": "0.4.5",
-        "element-vir": "^14.0.3",
+        "element-vir": "^14.2.1",
         "lit-css-vars": "^2.0.3",
         "object-shape-tester": "^0.3.0",
         "spa-router-vir": "^2.1.1",
-        "typed-event-target": "^1.3.0",
-        "vira": "^0.6.0"
+        "typed-event-target": "^1.3.1",
+        "vira": "^0.6.1"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^15.3.0",
+        "@augment-vir/browser-testing": "^15.4.0",
         "@open-wc/testing": "^3.2.0",
         "@types/chai": "^4.3.5",
         "@types/mocha": "^10.0.1",
         "@web/dev-server-esbuild": "^0.4.1",
-        "@web/test-runner": "^0.16.1",
-        "@web/test-runner-commands": "^0.7.0",
+        "@web/test-runner": "^0.17.0",
+        "@web/test-runner-commands": "^0.8.0",
         "@web/test-runner-playwright": "^0.10.1",
-        "@web/test-runner-visual-regression": "^0.8.0",
+        "@web/test-runner-visual-regression": "^0.8.2",
         "istanbul-smart-text-reporter": "^1.1.2",
-        "type-fest": "^3.12.0",
+        "type-fest": "^4.0.0",
         "typescript": "^5.1.6"
     }
 }