microui-wc 0.1.0 → 0.1.2

package/app/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/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/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/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/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/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/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/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/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/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>

package/app-dist/index.html

@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>microUI Demo</title>
-
-    <!-- Framework CSS -->
-    <link rel="stylesheet" href="/dist/microui.css">
-
-    <!-- App-specific styles -->
-    <style>
-        /* App shell styles */
-        .app-shell {
-            display: flex;
-            min-height: 100vh;
-        }
-
-        .app-sidebar {
-            width: 260px;
-            background: var(--md-sys-color-surface-container);
-            border-right: 1px solid var(--md-sys-color-outline-variant);
-            padding: 16px;
-        }
-
-        .app-main {
-            flex: 1;
-            padding: 24px;
-            overflow-y: auto;
-        }
-    </style>
-</head>
-
-<body>
-    <div class="app-shell">
-        <!-- Sidebar -->
-        <nav class="app-sidebar">
-            <h2>microUI</h2>
-            <mu-stack gap="sm">
-                <a href="#home" class="nav-link">Home</a>
-                <a href="#buttons" class="nav-link">Buttons</a>
-                <a href="#inputs" class="nav-link">Inputs</a>
-                <!-- More links added dynamically or manually -->
-            </mu-stack>
-        </nav>
-
-        <!-- Main content - router renders pages here -->
-        <main class="app-main">
-            <mu-router>
-                <!-- Pages loaded here by router -->
-            </mu-router>
-        </main>
-    </div>
-
-    <!-- Load router and page system -->
-    <script type="module">
-        // Import core components for shell
-        import '/dist/components/mu-stack.js';
-        import '/dist/components/mu-router.js';
-        import '/dist/components/mu-page.js';
-
-        // Router will handle loading pages from /app/pages/
-    </script>
-</body>
-
-</html>

package/app-dist/pages/alerts.html

@@ -1,23 +0,0 @@
-<mu-page route="alerts" title="Alerts">
-    <script type="x-dependencies">mu-alert, mu-stack, mu-example, mu-code</script>
-    <template>
-        <h1 class="page-title">Alert</h1>
-        <p class="page-subtitle"><code>&lt;mu-alert&gt;</code> displays important messages.</p>
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <mu-example>
-                    <mu-stack gap="md">
-                        <mu-alert variant="info">Informational message</mu-alert>
-                        <mu-alert variant="success">Success message</mu-alert>
-                        <mu-alert variant="warning">Warning message</mu-alert>
-                        <mu-alert variant="error">Error message</mu-alert>
-                    </mu-stack>
-                </mu-example>
-            </mu-tab>
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-alert variant="success"&gt;Saved!&lt;/mu-alert&gt;
-                    &lt;mu-alert variant="error"&gt;Error occurred&lt;/mu-alert&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/avatars.html

@@ -1,22 +0,0 @@
-<mu-page route="avatars" title="Avatars">
-    <script type="x-dependencies">mu-avatar, mu-stack, mu-example, mu-code</script>
-    <template>
-        <h1 class="page-title">Avatar</h1>
-        <p class="page-subtitle"><code>&lt;mu-avatar&gt;</code> displays user images or initials.</p>
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <mu-example>
-                    <mu-stack direction="row" gap="md" align="center">
-                        <mu-avatar size="sm" initials="AB"></mu-avatar>
-                        <mu-avatar size="md" initials="CD"></mu-avatar>
-                        <mu-avatar size="lg" initials="EF"></mu-avatar>
-                    </mu-stack>
-                </mu-example>
-            </mu-tab>
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-avatar initials="JD"&gt;&lt;/mu-avatar&gt;
-                    &lt;mu-avatar src="photo.jpg"&gt;&lt;/mu-avatar&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/badges.html

@@ -1,22 +0,0 @@
-<mu-page route="badges" title="Badges">
-    <script type="x-dependencies">mu-badge, mu-stack, mu-example, mu-code</script>
-    <template>
-        <h1 class="page-title">Badge</h1>
-        <p class="page-subtitle"><code>&lt;mu-badge&gt;</code> displays counts or status indicators.</p>
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <mu-example>
-                    <mu-stack direction="row" gap="lg">
-                        <mu-badge count="3">Notifications</mu-badge>
-                        <mu-badge count="99+">Messages</mu-badge>
-                        <mu-badge dot>Updates</mu-badge>
-                    </mu-stack>
-                </mu-example>
-            </mu-tab>
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-badge count="5"&gt;Label&lt;/mu-badge&gt;
-                    &lt;mu-badge dot&gt;New&lt;/mu-badge&gt;</mu-code>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/buttons.html

@@ -1,71 +0,0 @@
-<!--
-  Buttons Page - Performance optimized
-  Uses mu-example for demos, minimal inline styles
--->
-<mu-page route="buttons" title="Buttons">
-    <script type="x-dependencies">
-    mu-button
-    mu-stack
-    mu-tabs
-    mu-example
-    mu-code
-    mu-api-table
-  </script>
-
-    <template>
-        <h1 class="page-title">Button</h1>
-        <p class="page-subtitle">
-            <code>&lt;mu-button&gt;</code> is an interactive element that triggers actions.
-            MD3 defines 5 button types for different emphasis levels.
-        </p>
-
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <section class="component-section">
-                    <h2 class="section-title">Variants</h2>
-                    <mu-example>
-                        <mu-stack direction="row" gap="md" wrap>
-                            <mu-button variant="filled">Filled</mu-button>
-                            <mu-button variant="tonal">Tonal</mu-button>
-                            <mu-button variant="elevated">Elevated</mu-button>
-                            <mu-button variant="outlined">Outlined</mu-button>
-                            <mu-button variant="text">Text</mu-button>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-
-                <section class="component-section">
-                    <h2 class="section-title">Sizes</h2>
-                    <mu-example>
-                        <mu-stack direction="row" gap="md" align="center">
-                            <mu-button size="sm">Small</mu-button>
-                            <mu-button size="md">Medium</mu-button>
-                            <mu-button size="lg">Large</mu-button>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-
-                <section class="component-section">
-                    <h2 class="section-title">States</h2>
-                    <mu-example>
-                        <mu-stack direction="row" gap="md">
-                            <mu-button>Normal</mu-button>
-                            <mu-button disabled>Disabled</mu-button>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-            </mu-tab>
-
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-button variant="filled"&gt;Primary&lt;/mu-button&gt;
-                    &lt;mu-button variant="tonal"&gt;Secondary&lt;/mu-button&gt;
-                    &lt;mu-button variant="outlined"&gt;Outlined&lt;/mu-button&gt;
-                    &lt;mu-button disabled&gt;Disabled&lt;/mu-button&gt;</mu-code>
-            </mu-tab>
-
-            <mu-tab label="API">
-                <mu-api-table component="mu-button"></mu-api-table>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>

package/app-dist/pages/cards.html

@@ -1,54 +0,0 @@
-<!--
-  Cards Page - Performance optimized with ::before state layers via CSS
--->
-<mu-page route="cards" title="Cards">
-    <script type="x-dependencies">
-    mu-card
-    mu-stack
-    mu-tabs
-    mu-example
-    mu-code
-    mu-api-table
-  </script>
-
-    <template>
-        <h1 class="page-title">Card</h1>
-        <p class="page-subtitle">
-            <code>&lt;mu-card&gt;</code> is a container for related content and actions.
-        </p>
-
-        <mu-tabs>
-            <mu-tab label="Examples" active>
-                <section class="component-section">
-                    <h2 class="section-title">Variants</h2>
-                    <mu-example>
-                        <mu-stack direction="row" gap="md" wrap>
-                            <mu-card variant="elevated" style="width: 200px;">
-                                <h3>Elevated</h3>
-                                <p>Surface with shadow</p>
-                            </mu-card>
-                            <mu-card variant="filled" style="width: 200px;">
-                                <h3>Filled</h3>
-                                <p>Surface container</p>
-                            </mu-card>
-                            <mu-card variant="outlined" style="width: 200px;">
-                                <h3>Outlined</h3>
-                                <p>Border only</p>
-                            </mu-card>
-                        </mu-stack>
-                    </mu-example>
-                </section>
-            </mu-tab>
-
-            <mu-tab label="Code">
-                <mu-code language="html">&lt;mu-card variant="elevated"&gt;Content&lt;/mu-card&gt;
-                    &lt;mu-card variant="filled"&gt;Content&lt;/mu-card&gt;
-                    &lt;mu-card variant="outlined"&gt;Content&lt;/mu-card&gt;</mu-code>
-            </mu-tab>
-
-            <mu-tab label="API">
-                <mu-api-table component="mu-card"></mu-api-table>
-            </mu-tab>
-        </mu-tabs>
-    </template>
-</mu-page>