microui-wc 0.1.0

package/demo/content/cards.html

@@ -0,0 +1,121 @@
+<!-- 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

@@ -0,0 +1,178 @@
+<!-- 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

@@ -0,0 +1,67 @@
+<!-- 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

@@ -0,0 +1,101 @@
+<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

@@ -0,0 +1,115 @@
+<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>