element-book 7.0.1 → 7.0.2

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

@@ -15,6 +15,6 @@ export type BaseBookEntry = {
      * A description that will be displayed below the entry title. Each item in the array will be a
      * separate paragraph.
      */
-    descriptionParagraphs: string[];
+    descriptionParagraphs: ReadonlyArray<string>;
     errors: Error[];
 };

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

@@ -1,5 +1,5 @@
+import { SetOptionalAndNullable } from '@augment-vir/common';
 import { PropertyInitMapBase } from 'element-vir';
-import { SetOptional } from 'type-fest';
 import { InfiniteRecursionLimiter } from '../../../util/type';
 import { BookElementExampleInit } from '../book-element-example/book-element-example';
 import { BookPage } from './book-page';
@@ -11,7 +11,7 @@ export type ElementExamplesDefiner<ControlsInit extends BookPageControlsInitBase
 type CollapseControlsInit<ParentPage extends BookPage | undefined, CurrentControlsInit extends BookPageControlsInitBase, 
 /** Prevent infinite recursion TypeScript errors. */
 RecursionDepth = InfiniteRecursionLimiter> = CurrentControlsInit & (RecursionDepth extends [any, ...infer RemainingDepth] ? ParentPage extends BookPage<infer GrandParentPage, infer ParentControls> ? CollapseControlsInit<GrandParentPage, ParentControls, RemainingDepth> : {} : {});
-export type BookPageInit<ParentPage extends BookPage | undefined, CurrentControlsInit extends BookPageControlsInitBase> = SetOptional<Omit<BookPage<ParentPage, CurrentControlsInit>, 'entryType' | 'elementExamples' | 'errors'>, 'controls' | 'descriptionParagraphs'> & {
+export type BookPageInit<ParentPage extends BookPage | undefined, CurrentControlsInit extends BookPageControlsInitBase> = SetOptionalAndNullable<Omit<BookPage<ParentPage, CurrentControlsInit>, 'entryType' | 'elementExamples' | 'errors'>, 'controls' | 'descriptionParagraphs'> & {
     elementExamplesCallback?: ElementExamplesDefiner<CollapseControlsInit<ParentPage, CurrentControlsInit>> | undefined;
 };
 export declare function defineBookPage<const ParentPage extends BookPage | undefined, const ControlsInit extends BookPageControlsInitBase = {}>(pageInit: BookPageInit<ParentPage, ControlsInit>): BookPage<ParentPage, ControlsInit>;

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

@@ -25,14 +25,14 @@ export const BookEntryDisplay = defineBookElement()({
         }
 
         .inline-entry {
-            margin-top: 32px;
+            margin: 8px;
         }
 
-        .inline-entry + .inline-entry {
-            margin-left: 16px;
+        * + .block-entry {
+            margin-top: 32px;
         }
 
-        * + .block-entry {
+        .block-entry + * {
             margin-top: 32px;
         }
 

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

@@ -1,6 +1,7 @@
 import { extractEventTarget } from '@augment-vir/browser';
 import { isRuntimeTypeOf } from '@augment-vir/common';
-import { css, defineElementEvent, html, listen } from 'element-vir';
+import { assign, 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';
 import { defineBookElement } from '../../define-book-element';
@@ -16,8 +17,11 @@ export const BookPageControls = defineBookElement()({
         :host {
             display: flex;
             flex-wrap: wrap;
-            opacity: 0.7;
+            align-items: flex-end;
+            padding-left: 36px;
+            align-content: flex-start;
             gap: 16px;
+            row-gap: 10px;
             color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
         }
 
@@ -26,6 +30,7 @@ export const BookPageControls = defineBookElement()({
         }
 
         .control-wrapper {
+            position: relative;
             display: flex;
             gap: 4px;
             flex-direction: column;
@@ -35,12 +40,19 @@ export const BookPageControls = defineBookElement()({
             font-weight: bold;
             color: red;
         }
+
+        ${ViraIcon}.options-icon {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            margin-left: -32px;
+        }
     `,
     renderCallback({ inputs, dispatch, events }) {
         if (!Object.entries(inputs.config).length) {
             return '';
         }
-        return Object.entries(inputs.config).map(([controlName, controlInit,]) => {
+        return Object.entries(inputs.config).map(([controlName, controlInit,], index) => {
             if (controlInit.controlType === BookPageControlTypeEnum.Hidden) {
                 return '';
             }
@@ -60,10 +72,18 @@ export const BookPageControls = defineBookElement()({
                 }));
             });
             return html `
-                    <label class="control-wrapper">
-                        <span>${controlName}</span>
-                        ${controlInputTemplate}
-                    </label>
+                    <div class="control-wrapper">
+                        ${renderIf(index === 0, html `
+                                <${ViraIcon}
+                                    class="options-icon"
+                                    ${assign(ViraIcon, { icon: Options24Icon })}
+                                ></${ViraIcon}>
+                            `)}
+                        <label class="control-wrapper">
+                            <span>${controlName}</span>
+                            ${controlInputTemplate}
+                        </label>
+                    </div>
                 `;
         });
     },

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

@@ -31,6 +31,10 @@ export const BookElementExampleWrapper = defineBookElement()({
         }
 
         ${BookElementExampleControls} {
+            color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
+        }
+
+        :host(:hover) ${BookElementExampleControls} {
             color: ${colorThemeCssVars['element-book-accent-icon-color'].value};
         }
     `,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "7.0.1",
+    "version": "7.0.2",
     "keywords": [
         "book",
         "design system",
@@ -39,18 +39,18 @@
         "test:watch": "web-test-runner --color --watch --config configs/web-test-runner.config.mjs"
     },
     "dependencies": {
-        "@augment-vir/browser": "^15.1.0",
-        "@augment-vir/common": "^15.1.0",
+        "@augment-vir/browser": "^15.2.1",
+        "@augment-vir/common": "^15.2.1",
         "colorjs.io": "0.4.3",
-        "element-vir": "^14.0.0",
+        "element-vir": "^14.0.3",
         "lit-css-vars": "^2.0.3",
         "object-shape-tester": "^0.3.0",
         "spa-router-vir": "^2.1.0",
         "typed-event-target": "^1.2.1",
-        "vira": "^0.4.0"
+        "vira": "^0.5.0"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^15.1.0",
+        "@augment-vir/browser-testing": "^15.2.1",
         "@open-wc/testing": "^3.2.0",
         "@types/chai": "^4.3.5",
         "@types/mocha": "^10.0.1",