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

An [`element-vir`](https://npmjs.com/package/element-vir) drop-in element for building, testing, and demonstrating a collection of elements (or, in other words, a design system).

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';
import { BookElementExampleViewer } from './book-element-example-viewer.element.js';
export const BookElementExampleWrapper = defineBookElement()({
    tagName: 'book-element-example-wrapper',
    styles: css `
        :host {
            display: inline-block;
            max-width: 100%;
        }

        .examples-wrapper {
            display: flex;
            gap: 32px;
            flex-wrap: wrap;
        }

        .individual-example-wrapper {
            display: flex;
            flex-direction: column;
            gap: 24px;
            max-width: 100%;
            align-items: flex-start;
        }

        ${BookElementExampleTitle} {
            color: ${viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value};
        }

        :host(:hover) ${BookElementExampleTitle} {
            color: ${colorThemeCssVars['element-book-accent-icon-color'].value};
        }
    `,
    render({ inputs }) {
        return html `
            <div class="individual-example-wrapper">
                <${BookElementExampleTitle.assign({
            blockNavigation: inputs.blockNavigation,
            elementExampleNode: inputs.elementExampleNode,
            router: inputs.router,
        })}></${BookElementExampleTitle}>
                <${BookElementExampleViewer.assign(inputs)}></${BookElementExampleViewer}>
            </div>
        `;
    },
});