microui-wc 0.1.0 → 0.1.2

package/app-dist/pages/checkboxes.html

@@ -1,39 +0,0 @@
-<!--
-  Checkboxes Page
--->
-<mu-page route="checkboxes" title="Checkboxes">
-    <script type="x-dependencies">
-    mu-checkbox
-    mu-stack
-    mu-tabs
-    mu-example
-    mu-code
-  </script>
-
-    <template>
-        <h1 class="page-title">Checkbox</h1>
-        <p class="page-subtitle">
-            <code>&lt;mu-checkbox&gt;</code> allows selection of multiple options.
-        </p>
-
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <section class="component-section">
-                    <h2 class="section-title">States</h2>
-                    <mu-example>
-                        <mu-stack gap="md">
-                            <mu-checkbox label="Unchecked"></mu-checkbox>
-                            <mu-checkbox label="Checked" checked></mu-checkbox>
-                            <mu-checkbox label="Disabled" disabled></mu-checkbox>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-            </mu-tab>
-
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-checkbox label="Option 1"&gt;&lt;/mu-checkbox&gt;
-                    &lt;mu-checkbox label="Selected" checked&gt;&lt;/mu-checkbox&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/chips.html

@@ -1,23 +0,0 @@
-<mu-page route="chips" title="Chips">
-    <script type="x-dependencies">mu-chip, mu-stack, mu-example, mu-code</script>
-    <template>
-        <h1 class="page-title">Chip</h1>
-        <p class="page-subtitle"><code>&lt;mu-chip&gt;</code> displays compact interactive elements.</p>
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <mu-example>
-                    <mu-stack direction="row" gap="sm" wrap>
-                        <mu-chip>Default</mu-chip>
-                        <mu-chip variant="outlined">Outlined</mu-chip>
-                        <mu-chip removable>Removable</mu-chip>
-                        <mu-chip selected>Selected</mu-chip>
-                    </mu-stack>
-                </mu-example>
-            </mu-tab>
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-chip&gt;Tag&lt;/mu-chip&gt;
-                    &lt;mu-chip removable&gt;Removable&lt;/mu-chip&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/dropdowns.html

@@ -1,41 +0,0 @@
-<!--
-  Dropdowns Page
--->
-<mu-page route="dropdowns" title="Dropdowns">
-    <script type="x-dependencies">
-    mu-dropdown
-    mu-stack
-    mu-tabs
-    mu-example
-    mu-code
-  </script>
-
-    <template>
-        <h1 class="page-title">Dropdown</h1>
-        <p class="page-subtitle">
-            <code>&lt;mu-dropdown&gt;</code> displays a list of options when clicked.
-        </p>
-
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <section class="component-section">
-                    <h2 class="section-title">Basic Usage</h2>
-                    <mu-example>
-                        <mu-dropdown label="Select option">
-                            <mu-option value="opt1">Option 1</mu-option>
-                            <mu-option value="opt2">Option 2</mu-option>
-                            <mu-option value="opt3">Option 3</mu-option>
-                        </mu-dropdown>
-                    </mu-example>
-                </section>
-            </mu-tab>
-
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-dropdown label="Choose"&gt;
-                    &lt;mu-option value="a"&gt;Option A&lt;/mu-option&gt;
-                    &lt;mu-option value="b"&gt;Option B&lt;/mu-option&gt;
-                    &lt;/mu-dropdown&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/home.html

@@ -1,59 +0,0 @@
-<!--
-  Home Page
-  Dependencies: mu-stack, mu-card, mu-icon
--->
-<mu-page route="home" title="Home">
-    <script type="x-dependencies">
-    mu-stack
-    mu-card
-    mu-icon
-  </script>
-
-    <template>
-        <mu-stack gap="lg" align="center" style="text-align: center; padding: 40px 20px;">
-            <img src="/assets/logo-banner-400.webp" alt="microUI" style="max-width: 300px;">
-
-            <h1>microUI v2</h1>
-            <p style="color: var(--md-sys-color-on-surface-variant); max-width: 500px;">
-                AI-First Web Components Library
-            </p>
-
-            <mu-stack direction="row" gap="md" wrap>
-                <mu-card variant="filled" style="text-align: center; padding: 16px;">
-                    <strong style="color: var(--md-sys-color-primary); font-size: 24px;">100%</strong>
-                    <p>Performance</p>
-                </mu-card>
-                <mu-card variant="filled" style="text-align: center; padding: 16px;">
-                    <strong style="color: var(--md-sys-color-primary); font-size: 24px;">100%</strong>
-                    <p>Accessibility</p>
-                </mu-card>
-                <mu-card variant="filled" style="text-align: center; padding: 16px;">
-                    <strong style="color: var(--md-sys-color-primary); font-size: 24px;">100%</strong>
-                    <p>SEO</p>
-                </mu-card>
-            </mu-stack>
-
-            <mu-card variant="outlined">
-                <h3>Features</h3>
-                <mu-stack gap="sm">
-                    <mu-stack direction="row" gap="sm" align="center">
-                        <mu-icon name="check"></mu-icon>
-                        <span><strong>40+ Components</strong> - Complete UI toolkit</span>
-                    </mu-stack>
-                    <mu-stack direction="row" gap="sm" align="center">
-                        <mu-icon name="check"></mu-icon>
-                        <span><strong>75 KB Bundle</strong> - Lightweight & fast</span>
-                    </mu-stack>
-                    <mu-stack direction="row" gap="sm" align="center">
-                        <mu-icon name="check"></mu-icon>
-                        <span><strong>MD3 Compliant</strong> - Material Design 3</span>
-                    </mu-stack>
-                    <mu-stack direction="row" gap="sm" align="center">
-                        <mu-icon name="check"></mu-icon>
-                        <span><strong>Zero Dependencies</strong> - Native Web Components</span>
-                    </mu-stack>
-                </mu-stack>
-            </mu-card>
-        </mu-stack>
-    </template>
-</mu-page>

package/app-dist/pages/icons.html

@@ -1,29 +0,0 @@
-<mu-page route="icons" title="Icons">
-    <script type="x-dependencies">mu-icon, mu-grid, mu-stack, mu-example, mu-code</script>
-    <template>
-        <h1 class="page-title">Icons</h1>
-        <p class="page-subtitle"><code>&lt;mu-icon&gt;</code> displays SVG icons from the built-in set.</p>
-        <mu-tabs>
-            <mu-tab label="Gallery" active>
-                <mu-grid cols="6" gap="md" style="text-align: center;">
-                    <mu-stack align="center"><mu-icon name="check"></mu-icon><small>check</small></mu-stack>
-                    <mu-stack align="center"><mu-icon name="close"></mu-icon><small>close</small></mu-stack>
-                    <mu-stack align="center"><mu-icon name="plus"></mu-icon><small>plus</small></mu-stack>
-                    <mu-stack align="center"><mu-icon name="minus"></mu-icon><small>minus</small></mu-stack>
-                    <mu-stack align="center"><mu-icon name="edit"></mu-icon><small>edit</small></mu-stack>
-                    <mu-stack align="center"><mu-icon name="delete"></mu-icon><small>delete</small></mu-stack>
-                    <mu-stack align="center"><mu-icon name="search"></mu-icon><small>search</small></mu-stack>
-                    <mu-stack align="center"><mu-icon name="menu"></mu-icon><small>menu</small></mu-stack>
-                    <mu-stack align="center"><mu-icon name="home"></mu-icon><small>home</small></mu-stack>
-                    <mu-stack align="center"><mu-icon name="settings"></mu-icon><small>settings</small></mu-stack>
-                    <mu-stack align="center"><mu-icon name="user"></mu-icon><small>user</small></mu-stack>
-                    <mu-stack align="center"><mu-icon name="sun"></mu-icon><small>sun</small></mu-stack>
-                </mu-grid>
-            </mu-tab>
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-icon name="check"&gt;&lt;/mu-icon&gt;
-                    &lt;mu-icon name="home" size="24"&gt;&lt;/mu-icon&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/inputs.html

@@ -1,66 +0,0 @@
-<!--
-  Inputs Page - Performance optimized
--->
-<mu-page route="inputs" title="Text Fields">
-    <script type="x-dependencies">
-    mu-input
-    mu-stack
-    mu-tabs
-    mu-example
-    mu-code
-    mu-api-table
-  </script>
-
-    <template>
-        <h1 class="page-title">Text Field</h1>
-        <p class="page-subtitle">
-            <code>&lt;mu-input&gt;</code> captures text input with MD3 styling and floating labels.
-        </p>
-
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <section class="component-section">
-                    <h2 class="section-title">Variants</h2>
-                    <mu-example>
-                        <mu-stack gap="md">
-                            <mu-input label="Filled (default)" placeholder="Enter text"></mu-input>
-                            <mu-input variant="outlined" label="Outlined" placeholder="Enter text"></mu-input>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-
-                <section class="component-section">
-                    <h2 class="section-title">Types</h2>
-                    <mu-example>
-                        <mu-stack gap="md">
-                            <mu-input type="text" label="Text" placeholder="Username"></mu-input>
-                            <mu-input type="email" label="Email" placeholder="email@example.com"></mu-input>
-                            <mu-input type="password" label="Password" placeholder="********"></mu-input>
-                            <mu-input type="number" label="Number" placeholder="0"></mu-input>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-
-                <section class="component-section">
-                    <h2 class="section-title">States</h2>
-                    <mu-example>
-                        <mu-stack gap="md">
-                            <mu-input label="Normal"></mu-input>
-                            <mu-input label="Disabled" disabled></mu-input>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-            </mu-tab>
-
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-input label="Username" placeholder="Enter username"&gt;&lt;/mu-input&gt;
-                    &lt;mu-input variant="outlined" label="Email"&gt;&lt;/mu-input&gt;
-                    &lt;mu-input type="password" label="Password"&gt;&lt;/mu-input&gt;</mu-code>
-            </mu-tab>
-
-            <mu-tab label="API">
-                <mu-api-table component="mu-input"></mu-api-table>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/installation.html

@@ -1,34 +0,0 @@
-<!--
-  Installation Page - Performance optimized
-  Uses minimal DOM, CSS classes > inline styles
--->
-<mu-page route="installation" title="Installation">
-    <script type="x-dependencies">
-    mu-stack
-    mu-card
-    mu-code
-  </script>
-
-    <template>
-        <h1 class="page-title">Installation</h1>
-        <p class="page-subtitle">Get started with microUI</p>
-
-        <section class="component-section">
-            <h2 class="section-title">NPM</h2>
-            <mu-code language="bash">npm install microui</mu-code>
-        </section>
-
-        <section class="component-section">
-            <h2 class="section-title">CDN</h2>
-            <mu-code language="html">&lt;link rel="stylesheet" href="dist/microui.css"&gt;
-                &lt;script type="module" src="dist/microui.esm.js"&gt;&lt;/script&gt;</mu-code>
-        </section>
-
-        <section class="component-section">
-            <h2 class="section-title">Per-Component Import</h2>
-            <mu-code language="javascript">// Only load what you need
-                import '/dist/components/mu-button.js';
-                import '/dist/components/mu-card.js';</mu-code>
-        </section>
-    </template>
-</mu-page>

package/app-dist/pages/layout.html

@@ -1,30 +0,0 @@
-<mu-page route="layout" title="Stack & Grid">
-    <script type="x-dependencies">mu-stack, mu-grid, mu-card, mu-example, mu-code</script>
-    <template>
-        <h1 class="page-title">Layout</h1>
-        <p class="page-subtitle"><code>&lt;mu-stack&gt;</code> and <code>&lt;mu-grid&gt;</code> for flexible layouts.
-        </p>
-        <mu-tabs>
-            <mu-tab label="Stack" active>
-                <mu-example>
-                    <mu-stack gap="md">
-                        <mu-card variant="outlined">Item 1</mu-card>
-                        <mu-card variant="outlined">Item 2</mu-card>
-                        <mu-card variant="outlined">Item 3</mu-card>
-                    </mu-stack>
-                </mu-example>
-                <mu-code language="html">&lt;mu-stack direction="row" gap="md"&gt;...&lt;/mu-stack&gt;</mu-code>
-            </mu-tab>
-            <mu-tab label="Grid">
-                <mu-example>
-                    <mu-grid cols="3" gap="md">
-                        <mu-card variant="outlined">1</mu-card>
-                        <mu-card variant="outlined">2</mu-card>
-                        <mu-card variant="outlined">3</mu-card>
-                    </mu-grid>
-                </mu-example>
-                <mu-code language="html">&lt;mu-grid cols="3" gap="md"&gt;...&lt;/mu-grid&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/modals.html

@@ -1,21 +0,0 @@
-<mu-page route="modals" title="Modals">
-    <script type="x-dependencies">mu-modal, mu-button, mu-stack, mu-example, mu-code</script>
-    <template>
-        <h1 class="page-title">Modal</h1>
-        <p class="page-subtitle"><code>&lt;mu-modal&gt;</code> displays content in a dialog overlay.</p>
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <mu-example>
-                    <mu-button onclick="document.getElementById('demo-modal').open()">Open Modal</mu-button>
-                    <mu-modal id="demo-modal" title="Example Modal">
-                        <p>This is modal content.</p>
-                    </mu-modal>
-                </mu-example>
-            </mu-tab>
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-button onclick="modal.open()"&gt;Open&lt;/mu-button&gt;
-                    &lt;mu-modal id="modal" title="Title"&gt;Content&lt;/mu-modal&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/navbar.html

@@ -1,22 +0,0 @@
-<mu-page route="navbar" title="Navbar">
-    <script type="x-dependencies">mu-navbar, mu-example, mu-code</script>
-    <template>
-        <h1 class="page-title">Navbar</h1>
-        <p class="page-subtitle"><code>&lt;mu-navbar&gt;</code> is a top navigation bar.</p>
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <mu-example>
-                    <mu-navbar title="My App">
-                        <mu-nav-item href="#">Home</mu-nav-item>
-                        <mu-nav-item href="#">About</mu-nav-item>
-                    </mu-navbar>
-                </mu-example>
-            </mu-tab>
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-navbar title="App"&gt;
-                    &lt;mu-nav-item href="/"&gt;Home&lt;/mu-nav-item&gt;
-                    &lt;/mu-navbar&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/progress.html

@@ -1,35 +0,0 @@
-<mu-page route="progress" title="Progress">
-    <script type="x-dependencies">mu-progress, mu-spinner, mu-stack, mu-example, mu-code</script>
-    <template>
-        <h1 class="page-title">Progress</h1>
-        <p class="page-subtitle">Progress indicators show loading state.</p>
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <section class="component-section">
-                    <h2 class="section-title">Linear Progress</h2>
-                    <mu-example>
-                        <mu-stack gap="md">
-                            <mu-progress value="30"></mu-progress>
-                            <mu-progress value="60"></mu-progress>
-                            <mu-progress indeterminate></mu-progress>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-                <section class="component-section">
-                    <h2 class="section-title">Spinner</h2>
-                    <mu-example>
-                        <mu-stack direction="row" gap="md" align="center">
-                            <mu-spinner size="sm"></mu-spinner>
-                            <mu-spinner size="md"></mu-spinner>
-                            <mu-spinner size="lg"></mu-spinner>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-            </mu-tab>
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-progress value="50"&gt;&lt;/mu-progress&gt;
-                    &lt;mu-spinner size="md"&gt;&lt;/mu-spinner&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/radios.html

@@ -1,40 +0,0 @@
-<!--
-  Radios Page
--->
-<mu-page route="radios" title="Radio Buttons">
-    <script type="x-dependencies">
-    mu-radio
-    mu-stack
-    mu-tabs
-    mu-example
-    mu-code
-  </script>
-
-    <template>
-        <h1 class="page-title">Radio</h1>
-        <p class="page-subtitle">
-            <code>&lt;mu-radio&gt;</code> allows selection of one option from a set.
-        </p>
-
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <section class="component-section">
-                    <h2 class="section-title">Radio Group</h2>
-                    <mu-example>
-                        <mu-stack gap="md">
-                            <mu-radio name="color" value="red" label="Red" checked></mu-radio>
-                            <mu-radio name="color" value="green" label="Green"></mu-radio>
-                            <mu-radio name="color" value="blue" label="Blue"></mu-radio>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-            </mu-tab>
-
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-radio name="size" value="sm" label="Small"&gt;&lt;/mu-radio&gt;
-                    &lt;mu-radio name="size" value="md" label="Medium" checked&gt;&lt;/mu-radio&gt;
-                    &lt;mu-radio name="size" value="lg" label="Large"&gt;&lt;/mu-radio&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/switches.html

@@ -1,39 +0,0 @@
-<!--
-  Switches Page
--->
-<mu-page route="switches" title="Switches">
-    <script type="x-dependencies">
-    mu-switch
-    mu-stack
-    mu-tabs
-    mu-example
-    mu-code
-  </script>
-
-    <template>
-        <h1 class="page-title">Switch</h1>
-        <p class="page-subtitle">
-            <code>&lt;mu-switch&gt;</code> toggles a single option on or off.
-        </p>
-
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <section class="component-section">
-                    <h2 class="section-title">States</h2>
-                    <mu-example>
-                        <mu-stack gap="md">
-                            <mu-switch label="Off"></mu-switch>
-                            <mu-switch label="On" checked></mu-switch>
-                            <mu-switch label="Disabled" disabled></mu-switch>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-            </mu-tab>
-
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-switch label="Notifications"&gt;&lt;/mu-switch&gt;
-                    &lt;mu-switch label="Dark mode" checked&gt;&lt;/mu-switch&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/tabs.html

@@ -1,30 +0,0 @@
-<mu-page route="tabs" title="Tabs">
-    <script type="x-dependencies">mu-tabs, mu-stack, mu-example, mu-code</script>
-    <template>
-        <h1 class="page-title">Tabs</h1>
-        <p class="page-subtitle"><code>&lt;mu-tabs&gt;</code> organizes content into sections.</p>
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <mu-example>
-                    <mu-tabs>
-                        <mu-tab label="Tab 1" active>
-                            <p>Content 1</p>
-                        </mu-tab>
-                        <mu-tab label="Tab 2">
-                            <p>Content 2</p>
-                        </mu-tab>
-                        <mu-tab label="Tab 3">
-                            <p>Content 3</p>
-                        </mu-tab>
-                    </mu-tabs>
-                </mu-example>
-            </mu-tab>
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-tabs&gt;
-                    &lt;mu-tab label="First" active&gt;Content&lt;/mu-tab&gt;
-                    &lt;mu-tab label="Second"&gt;Content&lt;/mu-tab&gt;
-                    &lt;/mu-tabs&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/toasts.html

@@ -1,22 +0,0 @@
-<mu-page route="toasts" title="Toasts">
-    <script type="x-dependencies">mu-toast, mu-button, mu-stack, mu-example, mu-code</script>
-    <template>
-        <h1 class="page-title">Toast</h1>
-        <p class="page-subtitle"><code>&lt;mu-toast&gt;</code> shows brief notifications.</p>
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <mu-example>
-                    <mu-stack direction="row" gap="md">
-                        <mu-button onclick="window.showToast('Info toast', {variant:'info'})">Info</mu-button>
-                        <mu-button onclick="window.showToast('Success!', {variant:'success'})">Success</mu-button>
-                        <mu-button onclick="window.showToast('Warning', {variant:'warning'})">Warning</mu-button>
-                        <mu-button onclick="window.showToast('Error!', {variant:'error'})">Error</mu-button>
-                    </mu-stack>
-                </mu-example>
-            </mu-tab>
-            <mu-tab label="Code">
-                <mu-code language="javascript">showToast('Message', { variant: 'success' });</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>