element-book 26.10.1 → 26.11.0

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

@@ -1,4 +1,4 @@
-import { type Overwrite, type SetOptionalAndNullable } from '@augment-vir/common';
+import { type Overwrite, type PartialWithUndefined, type SetOptionalAndNullable } from '@augment-vir/common';
 import { type CSSResult, type HtmlInterpolation, type PropertyInitMapBase, type RenderParams, type TypedEvent } from 'element-vir';
 import { type GlobalValues } from '../../../ui/elements/element-book-app/global-values.js';
 import { type BaseBookEntry } from '../base-book-entry.js';
@@ -19,13 +19,14 @@ export type BookPage<GlobalValuesType extends GlobalValues = {}, ParentPage exte
 }> & {
     controls: ControlsInit;
     elementExamples: Record<string, BookElementExample>;
+    useVerticalExamples: boolean;
 };
 /**
  * All parameters required for rendering an element-book page.
  *
  * @category Internal
  */
-export type BookPageExampleRenderParams<GlobalValuesType extends GlobalValues, ControlsInit extends BookPageControlsInitBase, State extends PropertyInitMapBase> = Pick<RenderParams<any, any, State, any, any, any, any>, 'state' | 'updateState'> & {
+export type BookPageExampleRenderParams<GlobalValuesType extends GlobalValues, ControlsInit extends BookPageControlsInitBase, State extends PropertyInitMapBase> = Pick<RenderParams<any, any, State, any, any, any, any, any>, 'state' | 'updateState'> & {
     controls: ControlsToValues<ControlsInit> & GlobalValuesType;
 };
 /**
@@ -36,26 +37,27 @@ export type BookPageExampleRenderParams<GlobalValuesType extends GlobalValues, C
 export type BookElementExample<GlobalValuesType extends GlobalValues = {}, ControlsInit extends BookPageControlsInitBase = {}, State extends PropertyInitMapBase = {}> = Overwrite<BaseBookEntry, {
     parent: BookPage | undefined;
     entryType: BookEntryType.ElementExample;
-} & {
+    isVertical: boolean;
+    /** Render the example. */
+    render: (renderParams: BookPageExampleRenderParams<GlobalValuesType, ControlsInit, State>) => HtmlInterpolation;
+} & PartialWithUndefined<{
     /**
      * Initialize the state for this example. This is only called once, before the first render
      * of the example.
      */
-    state?: (() => State) | undefined;
+    state: () => State;
     /** Specify which events this example should intercept (so the user can see them). */
-    showEvents?: ReadonlyArray<string | TypedEvent> | undefined;
+    showEvents: ReadonlyArray<string | TypedEvent>;
     /**
      * Style the element example. You can even use the :host selector to style this specific
      * example's wrapper element!
      */
-    styles?: CSSResult | undefined;
-    /** Render the example. */
-    render: (renderParams: BookPageExampleRenderParams<GlobalValuesType, ControlsInit, State>) => HtmlInterpolation;
-}>;
+    styles: CSSResult;
+}>>;
 /**
  * The properties that are necessary to initialize an element example. Missing properties will be
  * filled in by the parent.
  *
  * @category Internal
  */
-export type BookElementExampleInit<GlobalValuesType extends GlobalValues, Controls extends BookPageControlsInitBase, State extends PropertyInitMapBase> = SetOptionalAndNullable<Omit<BookElementExample<GlobalValuesType, Controls, State>, 'entryType' | 'parent' | 'errors'>, 'descriptionParagraphs'>;
+export type BookElementExampleInit<GlobalValuesType extends GlobalValues, Controls extends BookPageControlsInitBase, State extends PropertyInitMapBase> = SetOptionalAndNullable<Omit<BookElementExample<GlobalValuesType, Controls, State>, 'entryType' | 'parent' | 'errors' | 'isVertical'>, 'descriptionParagraphs'>;

package/dist/data/book-entry/book-page/define-book-page.d.ts

@@ -40,7 +40,7 @@ RecursionDepth = InfiniteRecursionLimiter> = GlobalValuesType & (RecursionDepth
  *
  * @category Type
  */
-export type BookPageInit<GlobalValuesType extends GlobalValues, ParentPage extends BookPage | undefined, CurrentControlsInit extends BookPageControlsInitBase> = SetOptionalAndNullable<Omit<BookPage<any, ParentPage, CurrentControlsInit>, 'entryType' | 'elementExamples' | 'errors'>, 'controls' | 'descriptionParagraphs'> & {
+export type BookPageInit<GlobalValuesType extends GlobalValues, ParentPage extends BookPage | undefined, CurrentControlsInit extends BookPageControlsInitBase> = SetOptionalAndNullable<Omit<BookPage<any, ParentPage, CurrentControlsInit>, 'entryType' | 'elementExamples' | 'errors'>, 'controls' | 'descriptionParagraphs' | 'useVerticalExamples'> & {
     defineExamples?: ElementExamplesDefiner<CollapseGlobalValuesType<ParentPage, GlobalValuesType>, CollapseControlsInit<ParentPage, CurrentControlsInit>> | undefined;
 };
 /**

package/dist/data/book-entry/book-page/define-book-page.js

@@ -22,6 +22,7 @@ export function defineBookPage(pageInit) {
     const page = {
         ...pageInit,
         entryType: BookEntryType.Page,
+        useVerticalExamples: !!pageInit.useVerticalExamples,
         elementExamples: {},
         descriptionParagraphs: pageInit.descriptionParagraphs ?? [],
         controls: pageInit.controls ?? {},
@@ -33,6 +34,7 @@ export function defineBookPage(pageInit) {
             defineExample(elementExampleInit) {
                 const newExample = {
                     ...elementExampleInit,
+                    isVertical: page.useVerticalExamples,
                     entryType: BookEntryType.ElementExample,
                     parent: page,
                     descriptionParagraphs: elementExampleInit.descriptionParagraphs ?? [],

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

@@ -3,4 +3,4 @@ import { type BookFullRoute } from '../../routing/book-routing.js';
 export declare const BookBreadcrumbs: import("element-vir").DeclarativeElementDefinition<"book-breadcrumbs", {
     currentRoute: Readonly<BookFullRoute>;
     router: Readonly<BookRouter> | undefined;
-}, {}, {}, "book-breadcrumbs-", "book-breadcrumbs-", readonly []>;
+}, {}, {}, "book-breadcrumbs-", "book-breadcrumbs-", readonly [], readonly []>;

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

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

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

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

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

@@ -3,4 +3,4 @@ import { type BookFullRoute } from '../../../routing/book-routing.js';
 export declare const BookRouteLink: import("element-vir").DeclarativeElementDefinition<"book-route-link", {
     route: Partial<BookFullRoute>;
     router: Readonly<BookRouter> | undefined;
-}, {}, {}, "book-route-link-", "book-route-link-anchor-padding", readonly []>;
+}, {}, {}, "book-route-link-", "book-route-link-anchor-padding", readonly [], readonly []>;

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

@@ -1,2 +1,2 @@
 export type BookTagName = `book-${string}`;
-export declare const defineBookElement: <Inputs extends {}>(...errorParams: import("element-vir").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `book-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("element-vir").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare const defineBookElement: <Inputs extends {}>(...errorParams: import("element-vir").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `book-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly [], const TestIds extends ReadonlyArray<string> = readonly []>(inputs: import("element-vir").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

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 []>;
+}, "element-book-app-", "element-book-app-", readonly [], readonly []>;

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

@@ -4,4 +4,4 @@ export declare const BookBreadcrumbsBar: import("element-vir").DeclarativeElemen
     currentSearch: string;
     currentRoute: Readonly<BookFullRoute>;
     router: Readonly<BookRouter> | undefined;
-}, {}, {}, "book-breadcrumbs-bar-", "book-breadcrumbs-bar-", readonly []>;
+}, {}, {}, "book-breadcrumbs-bar-", "book-breadcrumbs-bar-", readonly [], readonly []>;

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

@@ -1,4 +1,4 @@
 import { type HTMLTemplateResult } from 'element-vir';
 export declare const BookEntryDescription: import("element-vir").DeclarativeElementDefinition<"book-entry-description", {
     descriptionParagraphs: ReadonlyArray<string | HTMLTemplateResult>;
-}, {}, {}, "book-entry-description-", "book-entry-description-", readonly []>;
+}, {}, {}, "book-entry-description-", "book-entry-description-", readonly [], readonly []>;

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

@@ -14,4 +14,4 @@ export declare const BookPageControls: import("element-vir").DeclarativeElementD
         fullUrlBreadcrumbs: ReadonlyArray<string>;
         newValues: BookPageControlsValues;
     }>;
-}, "book-page-controls-has-controls", "book-page-controls-", readonly []>;
+}, "book-page-controls-has-controls", "book-page-controls-", readonly [], readonly []>;

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

@@ -7,4 +7,4 @@ export declare const BookPageWrapper: import("element-vir").DeclarativeElementDe
     pageNode: BookTreeNode<BookEntryType.Page>;
     router: BookRouter | undefined;
     controls: ControlsWrapper;
-}, {}, {}, "book-page-wrapper-", "book-page-wrapper-", readonly []>;
+}, {}, {}, "book-page-wrapper-", "book-page-wrapper-", readonly [], readonly []>;

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

@@ -4,4 +4,4 @@ import { type BookRouter } from '../../../../routing/book-router.js';
 export declare const BookElementExampleControls: import("element-vir").DeclarativeElementDefinition<"book-element-example-controls", {
     elementExampleNode: BookTreeNode<BookEntryType.ElementExample>;
     router: BookRouter | undefined;
-}, {}, {}, "book-element-example-controls-", "book-element-example-controls-", readonly []>;
+}, {}, {}, "book-element-example-controls-", "book-element-example-controls-", readonly [], readonly []>;

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

@@ -4,4 +4,4 @@ import { type BookTreeNode } from '../../../../data/book-tree/book-tree-node.js'
 export declare const BookElementExampleViewer: import("element-vir").DeclarativeElementDefinition<"book-element-example-viewer", {
     elementExampleNode: BookTreeNode<BookEntryType.ElementExample>;
     currentPageControls: BookPageControlsValues;
-}, any, {}, "book-element-example-viewer-", "book-element-example-viewer-", readonly []>;
+}, any, {}, "book-element-example-viewer-", "book-element-example-viewer-", readonly [], readonly []>;

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

@@ -6,4 +6,4 @@ export declare const BookElementExampleWrapper: import("element-vir").Declarativ
     elementExampleNode: BookTreeNode<BookEntryType.ElementExample>;
     currentPageControls: BookPageControlsValues;
     router: BookRouter | undefined;
-}, {}, {}, "book-element-example-wrapper-", "book-element-example-wrapper-", readonly []>;
+}, {}, {}, "book-element-example-wrapper-", "book-element-example-wrapper-", readonly [], readonly []>;

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

@@ -8,9 +8,7 @@ export const BookElementExampleWrapper = defineBookElement()({
     tagName: 'book-element-example-wrapper',
     styles: css `
         :host {
-            display: inline-flex;
-            flex-direction: column;
-            gap: 24px;
+            display: inline-block;
             max-width: 100%;
         }
 
@@ -30,6 +28,7 @@ export const BookElementExampleWrapper = defineBookElement()({
             flex-direction: column;
             gap: 24px;
             max-width: 100%;
+            align-items: flex-start;
         }
 
         ${BookElementExampleControls} {

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

@@ -15,4 +15,4 @@ export declare const BookEntryDisplay: import("element-vir").DeclarativeElementD
     lastElement: undefined | Element;
 }, {
     loadingRender: import("element-vir").DefineEvent<boolean>;
-}, "book-entry-display-", "book-entry-display-", readonly []>;
+}, "book-entry-display-", "book-entry-display-", readonly [], readonly []>;

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

@@ -24,10 +24,6 @@ export const BookEntryDisplay = defineBookElement()({
             padding: 32px;
         }
 
-        .inline-entry {
-            margin: 8px;
-        }
-
         * + .block-entry {
             margin-top: 32px;
         }
@@ -36,6 +32,14 @@ export const BookEntryDisplay = defineBookElement()({
             margin-top: 32px;
         }
 
+        .inline-entry {
+            margin: 8px;
+
+            &.block-entry {
+                display: block;
+            }
+        }
+
         h1 {
             margin: 0;
             padding: 0;

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

@@ -1,6 +1,6 @@
 import { check } from '@augment-vir/assert';
 import { mapObjectValues } from '@augment-vir/common';
-import { html, nothing, repeat } from 'element-vir';
+import { classMap, html, nothing, repeat, } from 'element-vir';
 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';
@@ -87,7 +87,9 @@ export function createNodeTemplates({ currentNodes, isTopLevel, router, isSearch
                 currentPageControls: controlsForElementExample,
                 router,
             })}
-                        class="inline-entry"
+                        class="inline-entry ${classMap({
+                'block-entry': currentNode.entry.isVertical,
+            })}"
                     ></${BookElementExampleWrapper}>
                 `;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "26.10.1",
+    "version": "26.11.0",
     "keywords": [
         "book",
         "design system",
@@ -36,7 +36,6 @@
         "build": "npm run docs",
         "compile": "virmator compile",
         "docs": "virmator docs",
-        "start": "virmator frontend",
         "test": "virmator test web",
         "test:coverage": "npm run test coverage",
         "test:docs": "virmator docs check"
@@ -58,7 +57,7 @@
         "@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.10.1",
+        "element-vir": "^26.11.0",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
         "type-fest": "^5.1.0",