microui-wc 0.1.0 → 0.1.2

package/demo/content/cards.html

@@ -1,121 +0,0 @@
-<!-- Cards Content Fragment -->
-<div id="page-cards" class="page active">
-    <h1 class="page-title">Card</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-card&gt;</code> is a surface container that holds related content.
-        MD3 defines 3 card variants with different elevation and emphasis levels.
-    </p>
-
-    <mu-tabs active="0" id="card-doc-tabs" style="margin-bottom: 24px;">
-        <mu-tab>OVERVIEW</mu-tab>
-        <mu-tab>API</mu-tab>
-        <mu-tab>STYLING</mu-tab>
-        <mu-tab>EXAMPLES</mu-tab>
-    </mu-tabs>
-
-    <div id="card-overview" class="doc-tab-content">
-        <mu-example title="Card variants">
-            <div slot="demo">
-                <mu-card variant="elevated" style="min-width: 160px; flex: 1;">
-                    <h3>Elevated</h3>
-                    <p>With shadow for depth.</p>
-                </mu-card>
-                <mu-card variant="filled" style="min-width: 160px; flex: 1;">
-                    <h3>Filled</h3>
-                    <p>Surface container color.</p>
-                </mu-card>
-                <mu-card variant="outlined" style="min-width: 160px; flex: 1;">
-                    <h3>Outlined</h3>
-                    <p>With border, no shadow.</p>
-                </mu-card>
-            </div>
-        </mu-example>
-
-        <div class="component-section">
-            <h2 class="section-title">Choosing a card variant</h2>
-            <mu-stack gap="lg">
-                <mu-card variant="outlined">
-                    <mu-stack direction="row" gap="md" align="center">
-                        <strong>Elevated</strong>
-                        <span>High emphasis - main content, hero sections</span>
-                    </mu-stack>
-                </mu-card>
-                <mu-card variant="outlined">
-                    <mu-stack direction="row" gap="md" align="center">
-                        <strong>Filled</strong>
-                        <span>Medium emphasis - grouped items, list items</span>
-                    </mu-stack>
-                </mu-card>
-                <mu-card variant="outlined">
-                    <mu-stack direction="row" gap="md" align="center">
-                        <strong>Outlined</strong>
-                        <span>Low emphasis - subtle containers, nested cards</span>
-                    </mu-stack>
-                </mu-card>
-            </mu-stack>
-        </div>
-    </div>
-
-    <div id="card-api" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">Attributes</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="variant" type="string" default="elevated">Card style: 'elevated' |
-                    'filled' | 'outlined'</mu-api-row>
-                <mu-api-row name="clickable" type="boolean" default="false">Whether card is clickable with
-                    hover state</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="card-styling" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">CSS Custom Properties</h2>
-            <mu-api-table type="tokens">
-                <mu-api-row name="--md-sys-color-surface" default="#fef7ff">Card background</mu-api-row>
-                <mu-api-row name="--md-sys-color-outline-variant" default="#cac4d0">Outlined
-                    border</mu-api-row>
-                <mu-api-row name="--md-sys-shape-corner-medium" default="12px">Border radius</mu-api-row>
-                <mu-api-row name="--md-sys-elevation-1" default="0 1px 3px...">Elevated shadow</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="card-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Product card">
-            <div slot="demo">
-                <mu-card variant="elevated" style="max-width: 320px;">
-                    <mu-stack gap="md">
-                        <div
-                            style="background: var(--md-sys-color-secondary-container); height: 140px; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
-                            <mu-icon name="image" style="font-size: 48px; opacity: 0.5;"></mu-icon>
-                        </div>
-                        <h3 style="margin: 0;">Product Title</h3>
-                        <p style="margin: 0; color: var(--md-sys-color-on-surface-variant);">A brief
-                            description of the product.</p>
-                        <mu-stack direction="row" gap="sm">
-                            <mu-button variant="filled">Buy Now</mu-button>
-                            <mu-button variant="outlined">Learn More</mu-button>
-                        </mu-stack>
-                    </mu-stack>
-                </mu-card>
-            </div>
-        </mu-example>
-
-        <mu-example title="Nested cards">
-            <div slot="demo">
-                <mu-card variant="filled">
-                    <h3>Parent Card</h3>
-                    <mu-stack gap="sm">
-                        <mu-card variant="outlined">
-                            <p>Nested child 1</p>
-                        </mu-card>
-                        <mu-card variant="outlined">
-                            <p>Nested child 2</p>
-                        </mu-card>
-                    </mu-stack>
-                </mu-card>
-            </div>
-        </mu-example>
-    </div>
-</div>

package/demo/content/checkboxes.html

@@ -1,178 +0,0 @@
-<!-- Checkboxes Content Fragment -->
-<div id="page-checkboxes" class="page active">
-    <h1 class="page-title">Checkbox</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-checkbox&gt;</code> provides the same functionality as a native
-        <code>&lt;input type="checkbox"&gt;</code> enhanced with Material Design 3 styling and animations.
-    </p>
-
-    <!-- Documentation Tabs -->
-    <mu-tabs active="0" id="checkbox-doc-tabs" style="margin-bottom: 24px;">
-        <mu-tab>OVERVIEW</mu-tab>
-        <mu-tab>API</mu-tab>
-        <mu-tab>STYLING</mu-tab>
-        <mu-tab>EXAMPLES</mu-tab>
-    </mu-tabs>
-
-    <!-- OVERVIEW Tab Content -->
-    <div id="checkbox-overview" class="doc-tab-content">
-        <mu-example title="Basic checkboxes">
-            <div slot="demo">
-                <mu-checkbox checked>Check me!</mu-checkbox>
-                <mu-checkbox disabled>Disabled</mu-checkbox>
-            </div>
-
-        </mu-example>
-
-        <mu-example title="Indeterminate state">
-            <div slot="demo">
-                <mu-stack gap="sm">
-                    <mu-checkbox indeterminate>Parent task</mu-checkbox>
-                    <mu-stack gap="xs" style="padding-left: 24px;">
-                        <mu-checkbox checked>Child task 1</mu-checkbox>
-                        <mu-checkbox>Child task 2</mu-checkbox>
-                        <mu-checkbox>Child task 3</mu-checkbox>
-                    </mu-stack>
-                </mu-stack>
-            </div>
-
-        </mu-example>
-
-        <div class="component-section">
-            <h2 class="section-title">Checkbox label</h2>
-            <p style="color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
-                The checkbox label is provided as the content to the <code>&lt;mu-checkbox&gt;</code>
-                element.
-                Alternatively, use the <code>label</code> attribute. For accessibility, always provide a
-                label.
-            </p>
-        </div>
-
-        <div class="component-section"
-            style="background: var(--md-sys-color-primary-container); border-left: 4px solid var(--md-sys-color-primary);">
-            <h2 class="section-title" style="color: var(--md-sys-color-on-primary-container);">Accessibility
-            </h2>
-            <p style="color: var(--md-sys-color-on-primary-container); line-height: 1.6;">
-                <code>&lt;mu-checkbox&gt;</code> uses a native <code>role="checkbox"</code> and
-                manages <code>aria-checked</code> automatically based on state.
-                The indeterminate state uses <code>aria-checked="mixed"</code>.
-            </p>
-        </div>
-    </div>
-
-    <!-- API Tab Content -->
-    <div id="checkbox-api" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">Selector</h2>
-            <div class="code-block" style="display: inline-block;">&lt;mu-checkbox&gt;</div>
-        </div>
-
-        <div class="component-section">
-            <h2 class="section-title">Attributes</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="checked" type="boolean" default="false">Whether the checkbox is
-                    checked</mu-api-row>
-                <mu-api-row name="indeterminate" type="boolean" default="false">Whether in indeterminate
-                    state (horizontal line)</mu-api-row>
-                <mu-api-row name="disabled" type="boolean" default="false">Whether the checkbox is
-                    disabled</mu-api-row>
-                <mu-api-row name="label" type="string" default="">Alternative way to set label
-                    text</mu-api-row>
-                <mu-api-row name="name" type="string" default="">Form input name for form
-                    submission</mu-api-row>
-            </mu-api-table>
-        </div>
-
-        <div class="component-section">
-            <h2 class="section-title">Properties</h2>
-            <mu-api-table type="properties">
-                <mu-api-row name="checked" type="boolean">Gets/sets the checked state</mu-api-row>
-                <mu-api-row name="indeterminate" type="boolean">Gets/sets the indeterminate
-                    state</mu-api-row>
-            </mu-api-table>
-        </div>
-
-        <div class="component-section">
-            <h2 class="section-title">Methods</h2>
-            <mu-api-table type="methods">
-                <mu-api-row name="toggle" signature="toggle(): void">Toggles the checked state</mu-api-row>
-            </mu-api-table>
-        </div>
-
-        <div class="component-section">
-            <h2 class="section-title">Events</h2>
-            <mu-api-table type="events">
-                <mu-api-row name="mu-change" detail="{ checked: boolean, indeterminate: boolean }">Emitted
-                    when the checkbox state changes</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <!-- STYLING Tab Content -->
-    <div id="checkbox-styling" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">CSS Custom Properties</h2>
-            <p style="color: var(--md-sys-color-on-surface-variant); margin-bottom: 16px;">
-                Customize the checkbox using MD3 design tokens.
-            </p>
-            <mu-api-table type="tokens">
-                <mu-api-row name="--md-sys-color-primary" default="#6750a4">Checked state background and
-                    border</mu-api-row>
-                <mu-api-row name="--md-sys-color-on-primary" default="#ffffff">Checkmark color</mu-api-row>
-                <mu-api-row name="--md-sys-color-outline" default="#79747e">Unchecked border
-                    color</mu-api-row>
-                <mu-api-row name="--md-sys-color-on-surface" default="#1d1b20">Label text color</mu-api-row>
-                <mu-api-row name="--md-sys-motion-easing-standard" default="ease-out">Animation
-                    easing</mu-api-row>
-            </mu-api-table>
-        </div>
-
-        <div class="component-section">
-            <h2 class="section-title">Theming Example</h2>
-            <div class="code-block">/* Custom checkbox theme */
-                mu-checkbox {
-                --md-sys-color-primary: #006d3b;
-                --md-sys-color-on-primary: #ffffff;
-                }</div>
-        </div>
-    </div>
-
-    <!-- EXAMPLES Tab Content -->
-    <div id="checkbox-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Configurable checkbox">
-            <div slot="demo">
-                <mu-stack gap="md">
-                    <mu-checkbox id="config-checkbox" checked>Configurable checkbox</mu-checkbox>
-                    <mu-stack direction="row" gap="sm">
-                        <mu-button variant="outlined" size="sm"
-                            onclick="document.getElementById('config-checkbox').checked = !document.getElementById('config-checkbox').checked">Toggle
-                            Checked</mu-button>
-                        <mu-button variant="outlined" size="sm"
-                            onclick="document.getElementById('config-checkbox').indeterminate = !document.getElementById('config-checkbox').indeterminate">Toggle
-                            Indeterminate</mu-button>
-                    </mu-stack>
-                </mu-stack>
-            </div>
-        </mu-example>
-
-        <mu-example title="With icons (styled label)">
-            <div slot="demo">
-                <mu-checkbox>
-                    <mu-stack direction="row" gap="sm" align="center">
-                        <mu-icon name="check" style="color: var(--md-sys-color-primary);"></mu-icon>
-                        Accept terms and conditions
-                    </mu-stack>
-                </mu-checkbox>
-            </div>
-        </mu-example>
-
-        <mu-example title="Form integration">
-            <div slot="demo">
-                <mu-form>
-                    <mu-checkbox name="newsletter" checked>Subscribe to newsletter</mu-checkbox>
-                    <mu-checkbox name="terms">I accept the terms</mu-checkbox>
-                </mu-form>
-            </div>
-        </mu-example>
-    </div>
-</div>

package/demo/content/chips.html

@@ -1,67 +0,0 @@
-<!-- Chips Content Fragment -->
-<div id="page-chips" class="page active">
-    <h1 class="page-title">Chip</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-chip&gt;</code> compact elements for filters, selections,
-        or tags. Supports selection state and click interactions.
-    </p>
-
-    <mu-tabs active="0" id="chip-doc-tabs" style="margin-bottom: 24px;">
-        <mu-tab>OVERVIEW</mu-tab>
-        <mu-tab>API</mu-tab>
-        <mu-tab>STYLING</mu-tab>
-        <mu-tab>EXAMPLES</mu-tab>
-    </mu-tabs>
-
-    <div id="chip-overview" class="doc-tab-content">
-        <mu-example title="Selectable chips">
-            <div slot="demo">
-                <mu-chip>React</mu-chip>
-                <mu-chip selected>Vue</mu-chip>
-                <mu-chip>Angular</mu-chip>
-                <mu-chip>Svelte</mu-chip>
-            </div>
-
-        </mu-example>
-    </div>
-
-    <div id="chip-api" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">Attributes</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="selected" type="boolean" default="false">Whether chip is in selected
-                    state</mu-api-row>
-                <mu-api-row name="removable" type="boolean" default="false">Shows remove (x)
-                    button</mu-api-row>
-            </mu-api-table>
-        </div>
-        <div class="component-section">
-            <h2 class="section-title">Events</h2>
-            <mu-api-table type="events">
-                <mu-api-row name="mu-remove" detail="{}">Emitted when remove button clicked</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="chip-styling" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">CSS Custom Properties</h2>
-            <mu-api-table type="tokens">
-                <mu-api-row name="--md-sys-color-secondary-container" default="#e8def8">Selected
-                    background</mu-api-row>
-                <mu-api-row name="--md-sys-color-outline" default="#79747e">Border color</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="chip-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Filter chips">
-            <div slot="demo">
-                <mu-chip selected>All</mu-chip>
-                <mu-chip>Music</mu-chip>
-                <mu-chip>Sports</mu-chip>
-                <mu-chip>News</mu-chip>
-            </div>
-        </mu-example>
-    </div>
-</div>

package/demo/content/codeblocks.html

@@ -1,101 +0,0 @@
-<div class="page active">
-    <h1 class="page-title">Code Block</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-code&gt;</code> displays code with syntax highlighting
-        and a copy-to-clipboard button.
-    </p>
-
-    <mu-tabs active="0" id="codeblock-doc-tabs" style="margin-bottom: 24px;">
-        <mu-tab>OVERVIEW</mu-tab>
-        <mu-tab>API</mu-tab>
-        <mu-tab>STYLING</mu-tab>
-        <mu-tab>EXAMPLES</mu-tab>
-    </mu-tabs>
-
-    <div id="codeblock-overview" class="doc-tab-content">
-        <mu-example title="HTML syntax highlighting">
-            <div slot="demo">
-                <mu-code language="html">&lt;mu-button variant="filled"&gt;Click me&lt;/mu-button&gt;
-                    &lt;mu-card variant="elevated"&gt;
-                    &lt;h2&gt;Card Title&lt;/h2&gt;
-                    &lt;p&gt;Card content goes here.&lt;/p&gt;
-                    &lt;/mu-card&gt;
-                </mu-code>
-            </div>
-        </mu-example>
-
-        <mu-example title="JavaScript syntax highlighting">
-            <div slot="demo">
-                <mu-code language="javascript">import { muConfirm } from 'microui-wc';
-async function deleteItem(id) {
-const ok = await muConfirm('Delete this?');
-if (ok) {
-await fetch(`/api/items/${id}`, { method: 'DELETE' });
-}
-}
-                </mu-code>
-            </div>
-        </mu-example>
-
-        <div class="component-section">
-            <h2 class="section-title">Features</h2>
-            <mu-stack gap="sm">
-                <p>✓ Syntax highlighting for HTML and JavaScript</p>
-                <p>✓ Copy-to-clipboard button with feedback</p>
-                <p>✓ Language badge</p>
-                <p>✓ Scrollable for long code</p>
-            </mu-stack>
-        </div>
-    </div>
-
-    <div id="codeblock-api" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">Selector</h2>
-            <div class="code-block" style="display: inline-block;">&lt;mu-code&gt;</div>
-        </div>
-
-        <div class="component-section">
-            <h2 class="section-title">Attributes</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="language" type="string" default="'html'">'html' | 'javascript' | 'js'</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="codeblock-styling" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">CSS Classes</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="mu-code__header" type="class">Header with language badge and copy button</mu-api-row>
-                <mu-api-row name="mu-code__language" type="class">Language badge</mu-api-row>
-                <mu-api-row name="mu-code__copy" type="class">Copy button</mu-api-row>
-                <mu-api-row name="mu-code__pre" type="class">Pre element container</mu-api-row>
-                <mu-api-row name="mu-code__content" type="class">Code content</mu-api-row>
-            </mu-api-table>
-        </div>
-
-        <div class="component-section">
-            <h2 class="section-title">Syntax Colors</h2>
-            <mu-api-table type="tokens">
-                <mu-api-row name="mu-code__tag" type="class">HTML tag names (primary color)</mu-api-row>
-                <mu-api-row name="mu-code__attr" type="class">Attributes (tertiary color)</mu-api-row>
-                <mu-api-row name="mu-code__string" type="class">String values (secondary color)</mu-api-row>
-                <mu-api-row name="mu-code__keyword" type="class">JS keywords (primary, bold)</mu-api-row>
-                <mu-api-row name="mu-code__comment" type="class">Comments (outline, italic)</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="codeblock-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="CSS code (default highlighting)">
-            <div slot="demo">
-                <mu-code language="css">.mu-button {
-                    background: var(--md-sys-color-primary);
-                    color: var(--md-sys-color-on-primary);
-                    border-radius: var(--md-sys-shape-corner-full);
-                    }
-                </mu-code>
-            </div>
-        </mu-example>
-    </div>
-</div>

package/demo/content/confirms.html

@@ -1,115 +0,0 @@
-<div class="page active">
-    <h1 class="page-title">Confirm Dialog</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-confirm&gt;</code> is a Promise-based confirmation dialog.
-        Use <code>muConfirm()</code> for one-line confirm prompts.
-    </p>
-
-    <mu-tabs active="0" id="confirm-doc-tabs" style="margin-bottom: 24px;">
-        <mu-tab>OVERVIEW</mu-tab>
-        <mu-tab>API</mu-tab>
-        <mu-tab>STYLING</mu-tab>
-        <mu-tab>EXAMPLES</mu-tab>
-    </mu-tabs>
-
-    <div id="confirm-overview" class="doc-tab-content">
-        <mu-example title="Basic confirm dialog">
-            <div slot="demo">
-                <mu-button variant="filled" onclick="testConfirm()">Delete Item</mu-button>
-                <script>
-                    async function testConfirm() {
-                        const { muConfirm } = await import('../dist/components/mu-confirm.js');
-                        const ok = await muConfirm('Are you sure you want to delete this item?', {
-                            title: 'Confirm Delete',
-                            confirmText: 'Delete',
-                            cancelText: 'Cancel',
-                            variant: 'danger'
-                        });
-                        if (ok) {
-                            window.muToast?.('Item deleted', 'success');
-                        }
-                    }
-                </script>
-            </div>
-            <div slot="code">import { muConfirm } from 'microui-wc';
-
-                const ok = await muConfirm('Delete this item?', {
-                title: 'Confirm Delete',
-                confirmText: 'Delete',
-                variant: 'danger'
-                });
-                if (ok) deleteItem();</div>
-        </mu-example>
-
-        <div class="component-section">
-            <h2 class="section-title">Promise-based API</h2>
-            <p style="color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
-                <code>muConfirm()</code> returns a Promise that resolves to <code>true</code> when confirmed,
-                or <code>false</code> when cancelled. Use with <code>async/await</code> for clean one-liner
-                confirmations.
-            </p>
-        </div>
-    </div>
-
-    <div id="confirm-api" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">Function Signature</h2>
-            <div class="code-block">muConfirm(message: string, options?: ConfirmOptions): Promise&lt;boolean&gt;</div>
-        </div>
-
-        <div class="component-section">
-            <h2 class="section-title">Options</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="title" type="string" default="'Confirm'">Dialog title</mu-api-row>
-                <mu-api-row name="confirmText" type="string" default="'Confirm'">Confirm button text</mu-api-row>
-                <mu-api-row name="cancelText" type="string" default="'Cancel'">Cancel button text</mu-api-row>
-                <mu-api-row name="variant" type="string" default="'primary'">'primary' | 'danger' |
-                    'warning'</mu-api-row>
-            </mu-api-table>
-        </div>
-
-        <div class="component-section">
-            <h2 class="section-title">Events</h2>
-            <mu-api-table type="events">
-                <mu-api-row name="mu-confirm" detail="void">Emitted when user confirms</mu-api-row>
-                <mu-api-row name="mu-cancel" detail="void">Emitted when user cancels (or presses ESC)</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="confirm-styling" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">CSS Classes</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="mu-confirm__overlay" type="class">Backdrop overlay</mu-api-row>
-                <mu-api-row name="mu-confirm__dialog" type="class">Dialog container</mu-api-row>
-                <mu-api-row name="mu-confirm__title" type="class">Title element</mu-api-row>
-                <mu-api-row name="mu-confirm__message" type="class">Message text</mu-api-row>
-                <mu-api-row name="mu-confirm__actions" type="class">Button container</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="confirm-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Danger variant">
-            <div slot="demo">
-                <mu-button variant="danger" onclick="testDangerConfirm()">Delete Account</mu-button>
-                <script>
-                    async function testDangerConfirm() {
-                        const { muConfirm } = await import('../dist/components/mu-confirm.js');
-                        await muConfirm('This action cannot be undone.', {
-                            title: 'Delete Account?',
-                            confirmText: 'Delete Forever',
-                            variant: 'danger'
-                        });
-                    }
-                </script>
-            </div>
-            <div slot="code">await muConfirm('This action cannot be undone.', {
-                title: 'Delete Account?',
-                confirmText: 'Delete Forever',
-                variant: 'danger'
-                });</div>
-        </mu-example>
-    </div>
-</div>