microui-wc 0.1.1 → 0.1.2

package/demo/content/home.html

@@ -1,149 +0,0 @@
-<div style="text-align: center; margin-bottom: 32px;">
-    <picture>
-        <source srcset="../assets/logo-banner-400.webp 1x, ../assets/logo-banner-800.webp 2x" type="image/webp"><img
-            src="../assets/logo-banner-400.jpg" loading="eager" fetchpriority="high" decoding="async"
-            alt="microUI - AI First Web Components" width="400" height="223"
-            style="max-width: 100%; height: auto; aspect-ratio: 400/223; border-radius: var(--md-sys-shape-corner-large); box-shadow: var(--md-sys-elevation-2);">
-    </picture>
-</div>
-
-<h1 class="page-title" style="text-align: center;">microUI v0.1.0</h1>
-<p class="page-subtitle" style="text-align: center; font-size: 1.25rem; max-width: 600px; margin: 0 auto;">The only
-    AI-First
-    UI framework. 49 components. 808 tests. Zero config.</p>
-
-<!-- Agent-First Hero Badge with pulse animation -->
-<div style="display: flex; justify-content: center; gap: 16px; margin: 16px 0; flex-wrap: wrap;">
-    <div class="ai-badge-pulse"
-        style="background: linear-gradient(135deg, #7C4DFF, #536DFE); color: white; padding: 10px 24px; border-radius: 100px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 16px rgba(124, 77, 255, 0.4); animation: pulse-glow 2s ease-in-out infinite;">
-        🤖 Optimized for AI Agents
-    </div>
-    <a href="#buttons" style="text-decoration: none;">
-        <div style="background: linear-gradient(135deg, #6750A4, #4F378B); color: white; padding: 10px 24px; border-radius: 100px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 16px rgba(103, 80, 164, 0.4); cursor: pointer; transition: transform 0.2s;"
-            onmouseover="this.style.transform='scale(1.05)';" onmouseout="this.style.transform='scale(1)';">
-            🚀 Get Started
-        </div>
-    </a>
-</div>
-<style>
-    @keyframes pulse-glow {
-
-        0%,
-        100% {
-            transform: scale(1);
-            filter: brightness(1);
-        }
-
-        50% {
-            transform: scale(1.02);
-            filter: brightness(1.1);
-        }
-    }
-</style>
-
-<!-- Lighthouse Scores Highlight -->
-<div style="display: flex; justify-content: center; gap: 12px; margin: 24px 0; flex-wrap: wrap;">
-    <div
-        style="background: linear-gradient(135deg, #4CAF50, #2E7D32); color: white; padding: 14px 20px; border-radius: 16px; text-align: center; min-width: 100px; box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);">
-        <div style="font-size: 28px; font-weight: 700;">100%</div>
-        <div style="font-size: 11px; opacity: 0.9;">Lighthouse</div>
-    </div>
-    <div
-        style="background: linear-gradient(135deg, #2196F3, #1565C0); color: white; padding: 14px 20px; border-radius: 16px; text-align: center; min-width: 100px; box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);">
-        <div style="font-size: 28px; font-weight: 700;">808</div>
-        <div style="font-size: 11px; opacity: 0.9;">Tests Passing</div>
-    </div>
-    <div
-        style="background: linear-gradient(135deg, #9C27B0, #6A1B9A); color: white; padding: 14px 20px; border-radius: 16px; text-align: center; min-width: 100px; box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);">
-        <div style="font-size: 28px; font-weight: 700;">49</div>
-        <div style="font-size: 11px; opacity: 0.9;">Components</div>
-    </div>
-    <div
-        style="background: linear-gradient(135deg, #FF5722, #E64A19); color: white; padding: 14px 20px; border-radius: 16px; text-align: center; min-width: 100px; box-shadow: 0 4px 12px rgba(255, 87, 34, 0.4);">
-        <div style="font-size: 28px; font-weight: 700;">8KB</div>
-        <div style="font-size: 11px; opacity: 0.9;">Initial Load</div>
-    </div>
-    <div
-        style="background: linear-gradient(135deg, #00BCD4, #00838F); color: white; padding: 14px 20px; border-radius: 16px; text-align: center; min-width: 100px; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);">
-        <div style="font-size: 28px; font-weight: 700;">A</div>
-        <div style="font-size: 11px; opacity: 0.9;">Security Grade</div>
-    </div>
-</div>
-
-<!-- Agent-First Feature Highlight -->
-<div class="component-section"
-    style="background: linear-gradient(135deg, rgba(124, 77, 255, 0.15), rgba(83, 109, 254, 0.1)); border: 2px solid rgba(124, 77, 255, 0.3);">
-    <h2 class="section-title" style="display: flex; align-items: center; gap: 12px;">
-        🤖 Designed for AI Agents
-    </h2>
-    <p style="margin-bottom: 16px; color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
-        microUI is the first UI framework specifically optimized to be used by <strong>AI Coding
-            Agents</strong>.
-        AI agents can introspect components, read state, and generate code
-        efficiently.
-    </p>
-    <mu-stack direction="row" gap="md" wrap>
-        <mu-card variant="elevated" style="flex: 1; min-width: 200px;">
-            <strong>🔍 Agent API</strong>
-            <p style="font-size: 14px; color: var(--md-sys-color-on-surface); margin-top: 4px; font-weight: 500;">
-                <code>getMuComponentTree()</code> for structured parsing
-            </p>
-        </mu-card>
-        <mu-card variant="elevated" style="flex: 1; min-width: 200px;">
-            <strong>📋 AGENTS.md</strong>
-            <p style="font-size: 14px; color: var(--md-sys-color-on-surface); margin-top: 4px; font-weight: 500;">
-                LLM-optimized documentation
-            </p>
-        </mu-card>
-        <mu-card variant="elevated" style="flex: 1; min-width: 200px;">
-            <strong>🏗️ Enterprise Scale</strong>
-            <p style="font-size: 14px; color: var(--md-sys-color-on-surface); margin-top: 4px; font-weight: 500;">
-                Feature Registry, Namespaced Stores
-            </p>
-        </mu-card>
-    </mu-stack>
-</div>
-
-<div class="component-section">
-    <h2 class="section-title">Features</h2>
-    <mu-stack gap="md">
-        <mu-card variant="outlined"
-            style="background: linear-gradient(90deg, rgba(124, 77, 255, 0.08), transparent); border-left: 4px solid #7C4DFF;">
-            <mu-stack direction="row" gap="md" align="center">
-                <mu-icon name="smart_toy" style="color: #7C4DFF;"></mu-icon>
-                <div><strong>🤖 Agent-Optimized</strong> - Introspection API, DOM parsing, natural
-                    language descriptions</div>
-            </mu-stack>
-        </mu-card>
-        <mu-card variant="outlined">
-            <mu-stack direction="row" gap="md" align="center">
-                <mu-icon name="check" style="color: var(--md-sys-color-primary)"></mu-icon>
-                <div><strong>49 Components</strong> - Complete production UI toolkit</div>
-            </mu-stack>
-        </mu-card>
-        <mu-card variant="outlined">
-            <mu-stack direction="row" gap="md" align="center">
-                <mu-icon name="check" style="color: var(--md-sys-color-primary)"></mu-icon>
-                <div><strong>8KB Initial Load</strong> - Route-based code splitting</div>
-            </mu-stack>
-        </mu-card>
-        <mu-card variant="outlined">
-            <mu-stack direction="row" gap="md" align="center">
-                <mu-icon name="check" style="color: var(--md-sys-color-primary)"></mu-icon>
-                <div><strong>MD3 Compliant</strong> - Material Design 3</div>
-            </mu-stack>
-        </mu-card>
-        <mu-card variant="outlined">
-            <mu-stack direction="row" gap="md" align="center">
-                <mu-icon name="check" style="color: var(--md-sys-color-primary)"></mu-icon>
-                <div><strong>Zero Dependencies</strong> - Native Web Components</div>
-            </mu-stack>
-        </mu-card>
-        <mu-card variant="outlined">
-            <mu-stack direction="row" gap="md" align="center">
-                <mu-icon name="check" style="color: var(--md-sys-color-primary)"></mu-icon>
-                <div><strong>100% Lighthouse</strong> - Perfect scores across all categories</div>
-            </mu-stack>
-        </mu-card>
-    </mu-stack>
-</div>

package/demo/content/icons.html

@@ -1,89 +0,0 @@
-<!-- Icons Content Fragment -->
-<div id="page-icons" class="page active">
-    <h1 class="page-title">Icon</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-icon&gt;</code> provides a built-in SVG icon set
-        with 18+ common icons. Inherits color from parent.
-    </p>
-
-    <mu-tabs active="0" id="icon-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="icon-overview" class="doc-tab-content">
-        <mu-example title="Available icons">
-            <div slot="demo">
-                <mu-grid cols="6" gap="md">
-                    <mu-stack align="center" gap="xs"><mu-icon name="home"></mu-icon><span
-                            style="font-size: 11px;">home</span></mu-stack>
-                    <mu-stack align="center" gap="xs"><mu-icon name="search"></mu-icon><span
-                            style="font-size: 11px;">search</span></mu-stack>
-                    <mu-stack align="center" gap="xs"><mu-icon name="settings"></mu-icon><span
-                            style="font-size: 11px;">settings</span></mu-stack>
-                    <mu-stack align="center" gap="xs"><mu-icon name="user"></mu-icon><span
-                            style="font-size: 11px;">user</span></mu-stack>
-                    <mu-stack align="center" gap="xs"><mu-icon name="check"></mu-icon><span
-                            style="font-size: 11px;">check</span></mu-stack>
-                    <mu-stack align="center" gap="xs"><mu-icon name="close"></mu-icon><span
-                            style="font-size: 11px;">close</span></mu-stack>
-                    <mu-stack align="center" gap="xs"><mu-icon name="plus"></mu-icon><span
-                            style="font-size: 11px;">plus</span></mu-stack>
-                    <mu-stack align="center" gap="xs"><mu-icon name="minus"></mu-icon><span
-                            style="font-size: 11px;">minus</span></mu-stack>
-                    <mu-stack align="center" gap="xs"><mu-icon name="edit"></mu-icon><span
-                            style="font-size: 11px;">edit</span></mu-stack>
-                    <mu-stack align="center" gap="xs"><mu-icon name="delete"></mu-icon><span
-                            style="font-size: 11px;">delete</span></mu-stack>
-                    <mu-stack align="center" gap="xs"><mu-icon name="info"></mu-icon><span
-                            style="font-size: 11px;">info</span></mu-stack>
-                    <mu-stack align="center" gap="xs"><mu-icon name="warning"></mu-icon><span
-                            style="font-size: 11px;">warning</span></mu-stack>
-                </mu-grid>
-            </div>
-
-        </mu-example>
-    </div>
-
-    <div id="icon-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="name" type="string" default="">Icon name from built-in set</mu-api-row>
-                <mu-api-row name="size" type="string" default="24px">Icon dimensions</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="icon-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="color" default="inherit">Icon inherits parent color via
-                    currentColor</mu-api-row>
-                <mu-api-row name="font-size" default="24px">Can be used to scale icon</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="icon-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Button with icon">
-            <div slot="demo">
-                <mu-button variant="filled">
-                    <mu-icon name="plus" style="margin-right: 8px;"></mu-icon>
-                    Add Item
-                </mu-button>
-            </div>
-        </mu-example>
-
-        <mu-example title="Custom color">
-            <div slot="demo">
-                <mu-icon name="error" style="color: var(--md-sys-color-error);"></mu-icon>
-                <mu-icon name="success" style="color: #4caf50;"></mu-icon>
-                <mu-icon name="warning" style="color: #ff9800;"></mu-icon>
-            </div>
-        </mu-example>
-    </div>
-</div>

package/demo/content/inputs.html

@@ -1,135 +0,0 @@
-<!-- Inputs Content Fragment -->
-<div id="page-inputs" class="page active">
-    <h1 class="page-title">Text Field</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-input&gt;</code> and <code>&lt;mu-textarea&gt;</code> allow users to enter and edit
-        text.
-        Both support MD3 variants with floating labels and focus animations.
-    </p>
-
-    <!-- Documentation Tabs -->
-    <mu-tabs active="0" id="input-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="input-overview" class="doc-tab-content">
-        <mu-example title="Input variants">
-            <div slot="demo">
-                <mu-stack gap="md" style="width: 300px;">
-                    <mu-input label="Outlined" placeholder="Enter text..."></mu-input>
-                    <mu-input variant="filled" label="Filled"></mu-input>
-                </mu-stack>
-            </div>
-
-        </mu-example>
-
-        <mu-example title="Input types">
-            <div slot="demo">
-                <mu-stack gap="md" style="width: 300px;">
-                    <mu-input type="email" label="Email"></mu-input>
-                    <mu-input type="password" label="Password"></mu-input>
-                    <mu-input type="number" label="Amount"></mu-input>
-                </mu-stack>
-            </div>
-        </mu-example>
-
-        <mu-example title="Textarea">
-            <div slot="demo">
-                <mu-textarea placeholder="Write your message here..." style="width: 100%;"></mu-textarea>
-            </div>
-
-        </mu-example>
-
-        <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;">
-                Always provide a <code>label</code> attribute for screen readers.
-                The floating label animates when focused, providing clear visual feedback.
-                Focus states use box-shadow instead of border-width to prevent layout shifts.
-            </p>
-        </div>
-    </div>
-
-    <!-- API Tab Content -->
-    <div id="input-api" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">Selectors</h2>
-            <mu-stack direction="row" gap="md">
-                <div class="code-block" style="display: inline-block;">&lt;mu-input&gt;</div>
-                <div class="code-block" style="display: inline-block;">&lt;mu-textarea&gt;</div>
-            </mu-stack>
-        </div>
-
-        <div class="component-section">
-            <h2 class="section-title">Attributes (mu-input)</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="type" type="string" default="text">Input type: 'text' | 'email' |
-                    'password' | 'number' | 'tel' | 'url'</mu-api-row>
-                <mu-api-row name="variant" type="string" default="outlined">Input style: 'outlined' |
-                    'filled'</mu-api-row>
-                <mu-api-row name="label" type="string" default="">Floating label text</mu-api-row>
-                <mu-api-row name="placeholder" type="string" default="">Placeholder text</mu-api-row>
-                <mu-api-row name="value" type="string" default="">Current input value</mu-api-row>
-                <mu-api-row name="disabled" type="boolean" default="false">Whether input is
-                    disabled</mu-api-row>
-                <mu-api-row name="required" type="boolean" default="false">Whether input is
-                    required</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-input" detail="{ value: string }">Emitted on each
-                    keystroke</mu-api-row>
-                <mu-api-row name="mu-change" detail="{ value: string }">Emitted on blur with final
-                    value</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <!-- STYLING Tab Content -->
-    <div id="input-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-primary" default="#6750a4">Focus border/label
-                    color</mu-api-row>
-                <mu-api-row name="--md-sys-color-outline" default="#79747e">Default border
-                    color</mu-api-row>
-                <mu-api-row name="--md-sys-color-on-surface" default="#1d1b20">Text color</mu-api-row>
-                <mu-api-row name="--md-sys-color-surface-container-highest" default="#e6e0e9">Filled variant
-                    background</mu-api-row>
-                <mu-api-row name="--md-sys-shape-corner-small" default="4px">Border radius</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <!-- EXAMPLES Tab Content -->
-    <div id="input-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Form with validation">
-            <div slot="demo">
-                <mu-form>
-                    <mu-stack gap="md" style="width: 300px;">
-                        <mu-input label="Username" required></mu-input>
-                        <mu-input type="email" label="Email" required></mu-input>
-                        <mu-input type="password" label="Password" required></mu-input>
-                        <mu-button variant="filled" style="width: 100%;">Sign Up</mu-button>
-                    </mu-stack>
-                </mu-form>
-            </div>
-        </mu-example>
-
-        <mu-example title="Disabled state">
-            <div slot="demo">
-                <mu-input label="Disabled input" disabled value="Can't edit this"></mu-input>
-            </div>
-        </mu-example>
-    </div>
-</div>

package/demo/content/installation.html

@@ -1,16 +0,0 @@
-<!-- Installation Content Fragment -->
-<div id="page-installation" class="page active">
-    <h1 class="page-title">Installation</h1>
-    <p class="page-subtitle">Get started with microUI</p>
-
-    <div class="component-section">
-        <h2 class="section-title">NPM</h2>
-        <div class="code-block">npm install microui</div>
-    </div>
-
-    <div class="component-section">
-        <h2 class="section-title">CDN</h2>
-        <div class="code-block">&lt;link rel="stylesheet" href="dist/microui.css"&gt;
-            &lt;script type="module" src="dist/microui.esm.js"&gt;&lt;/script&gt;</div>
-    </div>
-</div>

package/demo/content/layout.html

@@ -1,136 +0,0 @@
-<!-- Layout Content Fragment -->
-<div id="page-layout" class="page active">
-    <h1 class="page-title">Stack & Grid</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-stack&gt;</code> and <code>&lt;mu-grid&gt;</code>
-        provide flexible layout primitives for arranging content.
-    </p>
-
-    <mu-tabs active="0" id="layout-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="layout-overview" class="doc-tab-content">
-        <mu-example title="Vertical stack">
-            <div slot="demo">
-                <mu-stack gap="sm">
-                    <mu-card variant="outlined">
-                        <p>Item 1</p>
-                    </mu-card>
-                    <mu-card variant="outlined">
-                        <p>Item 2</p>
-                    </mu-card>
-                    <mu-card variant="outlined">
-                        <p>Item 3</p>
-                    </mu-card>
-                </mu-stack>
-            </div>
-
-        </mu-example>
-
-        <mu-example title="Horizontal stack">
-            <div slot="demo">
-                <mu-stack direction="row" gap="sm">
-                    <mu-card variant="outlined">
-                        <p>A</p>
-                    </mu-card>
-                    <mu-card variant="outlined">
-                        <p>B</p>
-                    </mu-card>
-                    <mu-card variant="outlined">
-                        <p>C</p>
-                    </mu-card>
-                </mu-stack>
-            </div>
-        </mu-example>
-
-        <mu-example title="Grid layout">
-            <div slot="demo">
-                <mu-grid cols="4" gap="sm">
-                    <mu-card variant="outlined">
-                        <p>1</p>
-                    </mu-card>
-                    <mu-card variant="outlined">
-                        <p>2</p>
-                    </mu-card>
-                    <mu-card variant="outlined">
-                        <p>3</p>
-                    </mu-card>
-                    <mu-card variant="outlined">
-                        <p>4</p>
-                    </mu-card>
-                </mu-grid>
-            </div>
-        </mu-example>
-    </div>
-
-    <div id="layout-api" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">Attributes (mu-stack)</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="direction" type="string" default="column">Layout direction: 'column' |
-                    'row'</mu-api-row>
-                <mu-api-row name="gap" type="string" default="md">Gap size: 'xs' | 'sm' | 'md' | 'lg' |
-                    'xl'</mu-api-row>
-                <mu-api-row name="align" type="string" default="stretch">Align items: CSS align-items
-                    value</mu-api-row>
-                <mu-api-row name="justify" type="string" default="flex-start">Justify content: CSS
-                    justify-content value</mu-api-row>
-            </mu-api-table>
-        </div>
-        <div class="component-section">
-            <h2 class="section-title">Attributes (mu-grid)</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="cols" type="number" default="3">Number of columns</mu-api-row>
-                <mu-api-row name="gap" type="string" default="md">Gap size: 'xs' | 'sm' | 'md' | 'lg' |
-                    'xl'</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="layout-styling" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">Gap Sizes</h2>
-            <mu-api-table type="tokens">
-                <mu-api-row name="xs" default="4px">Extra small gap</mu-api-row>
-                <mu-api-row name="sm" default="8px">Small gap</mu-api-row>
-                <mu-api-row name="md" default="16px">Medium gap</mu-api-row>
-                <mu-api-row name="lg" default="24px">Large gap</mu-api-row>
-                <mu-api-row name="xl" default="32px">Extra large gap</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="layout-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Centered content">
-            <div slot="demo">
-                <mu-stack align="center" justify="center"
-                    style="height: 100px; background: var(--md-sys-color-surface-container-low); border-radius: 8px;">
-                    <mu-button variant="filled">Centered Button</mu-button>
-                </mu-stack>
-            </div>
-        </mu-example>
-
-        <mu-example title="Responsive grid">
-            <div slot="demo">
-                <mu-grid cols="3" gap="md">
-                    <mu-card variant="elevated">
-                        <h4>Card 1</h4>
-                        <p>Content</p>
-                    </mu-card>
-                    <mu-card variant="elevated">
-                        <h4>Card 2</h4>
-                        <p>Content</p>
-                    </mu-card>
-                    <mu-card variant="elevated">
-                        <h4>Card 3</h4>
-                        <p>Content</p>
-                    </mu-card>
-                </mu-grid>
-            </div>
-        </mu-example>
-    </div>
-</div>