microui-wc 0.1.0

package/demo/api/sample-data.json

@@ -0,0 +1,38 @@
+{
+    "users": [
+        {
+            "id": 1,
+            "name": "Alice Johnson",
+            "email": "alice@example.com",
+            "role": "Admin"
+        },
+        {
+            "id": 2,
+            "name": "Bob Smith",
+            "email": "bob@example.com",
+            "role": "Developer"
+        },
+        {
+            "id": 3,
+            "name": "Carol Williams",
+            "email": "carol@example.com",
+            "role": "Designer"
+        },
+        {
+            "id": 4,
+            "name": "David Brown",
+            "email": "david@example.com",
+            "role": "Manager"
+        },
+        {
+            "id": 5,
+            "name": "Eve Davis",
+            "email": "eve@example.com",
+            "role": "Developer"
+        }
+    ],
+    "meta": {
+        "total": 5,
+        "fetched": "2026-01-29T11:00:00Z"
+    }
+}

package/demo/content/alerts.html

@@ -0,0 +1,115 @@
+<!-- Alerts Content Fragment -->
+<div id="page-alerts" class="page active">
+    <h1 class="page-title">Alert</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-alert&gt;</code> displays contextual feedback messages
+        to users. Supports 4 severity levels with semantic colors.
+    </p>
+
+    <mu-tabs active="0" id="alert-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="alert-overview" class="doc-tab-content">
+        <mu-example title="Alert severities">
+            <div slot="demo">
+                <mu-stack gap="md">
+                    <mu-alert severity="success">Operation completed successfully</mu-alert>
+                    <mu-alert severity="info">Here is some helpful information</mu-alert>
+                    <mu-alert severity="warning">Warning: Please review before proceeding</mu-alert>
+                    <mu-alert severity="error">Error: Something went wrong</mu-alert>
+                </mu-stack>
+            </div>
+
+        </mu-example>
+
+        <div class="component-section">
+            <h2 class="section-title">When to use</h2>
+            <mu-card variant="outlined">
+                <mu-stack gap="md">
+                    <mu-stack direction="row" gap="sm" align="start">
+                        <mu-icon name="check_circle" size="20"
+                            style="color: var(--md-sys-color-primary); margin-top: 2px;"></mu-icon>
+                        <div>
+                            <strong>Form validation errors</strong>
+                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">Errors that
+                                user must fix before proceeding — always visible</div>
+                        </div>
+                    </mu-stack>
+                    <mu-stack direction="row" gap="sm" align="start">
+                        <mu-icon name="check_circle" size="20"
+                            style="color: var(--md-sys-color-primary); margin-top: 2px;"></mu-icon>
+                        <div>
+                            <strong>Important contextual information</strong>
+                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">Warnings about
+                                data, requirements, or status that must stay visible</div>
+                        </div>
+                    </mu-stack>
+                    <mu-stack direction="row" gap="sm" align="start">
+                        <mu-icon name="check_circle" size="20"
+                            style="color: var(--md-sys-color-primary); margin-top: 2px;"></mu-icon>
+                        <div>
+                            <strong>Page-level status</strong>
+                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">"Feature is
+                                beta", "System maintenance soon", "Premium feature"</div>
+                        </div>
+                    </mu-stack>
+                </mu-stack>
+            </mu-card>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">When NOT to use</h2>
+            <mu-stack gap="md">
+                <mu-alert severity="warning">Don't use for <strong>success feedback after actions</strong> — use
+                    <code>showToast()</code> instead (disappears automatically)</mu-alert>
+                <mu-alert severity="warning">Don't use for <strong>confirmations before actions</strong> — use
+                    <code>&lt;mu-confirm&gt;</code> which blocks until user responds</mu-alert>
+            </mu-stack>
+        </div>
+    </div>
+
+    <div id="alert-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="severity" type="string" default="info">Alert type: 'success' | 'info' |
+                    'warning' | 'error'</mu-api-row>
+                <mu-api-row name="dismissible" type="boolean" default="false">Whether alert can be
+                    dismissed</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-dismiss" detail="{}">Emitted when alert is dismissed</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="alert-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-success" default="#4caf50">Success background</mu-api-row>
+                <mu-api-row name="--md-sys-color-info" default="#2196f3">Info background</mu-api-row>
+                <mu-api-row name="--md-sys-color-warning" default="#ff9800">Warning background</mu-api-row>
+                <mu-api-row name="--md-sys-color-error" default="#f44336">Error background</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="alert-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="Inline alert in form">
+            <div slot="demo">
+                <mu-stack gap="md" style="max-width: 320px;">
+                    <mu-input label="Email" type="email"></mu-input>
+                    <mu-alert severity="error">Please enter a valid email address</mu-alert>
+                </mu-stack>
+            </div>
+        </mu-example>
+    </div>
+</div>

package/demo/content/avatars.html

@@ -0,0 +1,70 @@
+<!-- Avatars Content Fragment -->
+<div id="page-avatars" class="page active">
+    <h1 class="page-title">Avatar</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-avatar&gt;</code> displays user profile images or initials.
+        Supports multiple sizes and image fallback to initials.
+    </p>
+
+    <mu-tabs active="0" id="avatar-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="avatar-overview" class="doc-tab-content">
+        <mu-example title="Avatar sizes">
+            <div slot="demo">
+                <mu-stack direction="row" gap="md" align="center">
+                    <mu-avatar size="sm" initials="SM"></mu-avatar>
+                    <mu-avatar size="md" initials="MD"></mu-avatar>
+                    <mu-avatar size="lg" initials="LG"></mu-avatar>
+                </mu-stack>
+            </div>
+
+        </mu-example>
+    </div>
+
+    <div id="avatar-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="size" type="string" default="md">Avatar size: 'sm' | 'md' |
+                    'lg'</mu-api-row>
+                <mu-api-row name="initials" type="string" default="">Fallback initials when no
+                    image</mu-api-row>
+                <mu-api-row name="src" type="string" default="">Image URL</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="avatar-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-container" default="#eaddff">Avatar
+                    background</mu-api-row>
+                <mu-api-row name="--md-sys-color-on-primary-container" default="#21005d">Initials
+                    color</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="avatar-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="User list">
+            <div slot="demo">
+                <mu-stack gap="sm">
+                    <mu-stack direction="row" gap="md" align="center">
+                        <mu-avatar initials="JD"></mu-avatar>
+                        <span>John Doe</span>
+                    </mu-stack>
+                    <mu-stack direction="row" gap="md" align="center">
+                        <mu-avatar initials="JS"></mu-avatar>
+                        <span>Jane Smith</span>
+                    </mu-stack>
+                </mu-stack>
+            </div>
+        </mu-example>
+    </div>
+</div>

package/demo/content/badges.html

@@ -0,0 +1,65 @@
+<!-- Badges Content Fragment -->
+<div id="page-badges" class="page active">
+    <h1 class="page-title">Badge</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-badge&gt;</code> displays small labels for status,
+        counts, or categorical information.
+    </p>
+
+    <mu-tabs active="0" id="badge-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="badge-overview" class="doc-tab-content">
+        <mu-example title="Badge variants">
+            <div slot="demo">
+                <mu-badge>Default</mu-badge>
+                <mu-badge variant="primary">Primary</mu-badge>
+                <mu-badge variant="success">Success</mu-badge>
+                <mu-badge variant="warning">Warning</mu-badge>
+                <mu-badge variant="error">Error</mu-badge>
+            </div>
+
+        </mu-example>
+    </div>
+
+    <div id="badge-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="default">Badge type: 'default' | 'primary'
+                    | 'success' | 'warning' | 'error'</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="badge-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">Primary badge color</mu-api-row>
+                <mu-api-row name="--md-sys-color-error" default="#b3261e">Error badge color</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="badge-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="Status indicators">
+            <div slot="demo">
+                <mu-stack gap="sm">
+                    <mu-stack direction="row" gap="md" align="center">
+                        <mu-badge variant="success">Online</mu-badge>
+                        <span>User is active</span>
+                    </mu-stack>
+                    <mu-stack direction="row" gap="md" align="center">
+                        <mu-badge variant="warning">Away</mu-badge>
+                        <span>User is away</span>
+                    </mu-stack>
+                </mu-stack>
+            </div>
+        </mu-example>
+    </div>
+</div>

package/demo/content/buttons.html

@@ -0,0 +1,188 @@
+<!-- Buttons Content Fragment -->
+<div id="page-buttons" class="page active">
+    <h1 class="page-title">Button</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-button&gt;</code> is an interactive element that triggers an action.
+        Material Design 3 defines 5 button types for different emphasis levels.
+    </p>
+
+    <!-- Documentation Tabs -->
+    <mu-tabs active="0" id="button-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="button-overview" class="doc-tab-content">
+        <mu-example title="MD3 Button Types">
+            <div slot="demo">
+                <mu-button variant="filled">Filled</mu-button>
+                <mu-button variant="elevated">Elevated</mu-button>
+                <mu-button variant="tonal">Tonal</mu-button>
+                <mu-button variant="outlined">Outlined</mu-button>
+                <mu-button variant="text">Text</mu-button>
+            </div>
+
+        </mu-example>
+
+        <mu-example title="Button sizes">
+            <div slot="demo">
+                <mu-button variant="filled" size="sm">Small</mu-button>
+                <mu-button variant="filled" size="md">Medium</mu-button>
+                <mu-button variant="filled" size="lg">Large</mu-button>
+            </div>
+        </mu-example>
+
+        <div class="component-section">
+            <h2 class="section-title">Choosing a button type</h2>
+            <mu-stack gap="md">
+                <mu-card variant="outlined">
+                    <mu-stack direction="row" gap="md" align="center">
+                        <mu-button variant="filled" size="sm">Filled</mu-button>
+                        <span>High emphasis - primary actions (Save, Submit, Confirm)</span>
+                    </mu-stack>
+                </mu-card>
+                <mu-card variant="outlined">
+                    <mu-stack direction="row" gap="md" align="center">
+                        <mu-button variant="tonal" size="sm">Tonal</mu-button>
+                        <span>Medium emphasis - secondary actions (Add, Edit)</span>
+                    </mu-stack>
+                </mu-card>
+                <mu-card variant="outlined">
+                    <mu-stack direction="row" gap="md" align="center">
+                        <mu-button variant="outlined" size="sm">Outlined</mu-button>
+                        <span>Medium emphasis - alternative to tonal</span>
+                    </mu-stack>
+                </mu-card>
+                <mu-card variant="outlined">
+                    <mu-stack direction="row" gap="md" align="center">
+                        <mu-button variant="text" size="sm">Text</mu-button>
+                        <span>Low emphasis - tertiary actions (Cancel, Learn more)</span>
+                    </mu-stack>
+                </mu-card>
+            </mu-stack>
+        </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-button&gt;</code> uses <code>role="button"</code> and manages
+                <code>tabindex</code> automatically. Keyboard navigation with Enter/Space is built-in.
+                The ripple effect provides visual feedback for all interactions.
+            </p>
+        </div>
+    </div>
+
+    <!-- API Tab Content -->
+    <div id="button-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-button&gt;</div>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">Attributes</h2>
+            <mu-api-table type="attributes">
+                <mu-api-row name="variant" type="string" default="primary">Button style: 'filled' |
+                    'elevated' | 'tonal' | 'outlined' | 'text' | 'danger'</mu-api-row>
+                <mu-api-row name="size" type="string" default="md">Button size: 'sm' | 'md' |
+                    'lg'</mu-api-row>
+                <mu-api-row name="disabled" type="boolean" default="false">Whether the button is
+                    disabled</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="click" detail="MouseEvent">Native click event (works with disabled
+                    state)</mu-api-row>
+            </mu-api-table>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">CSS Classes</h2>
+            <mu-api-table type="attributes">
+                <mu-api-row name="mu-button" type="class">Base class for all buttons</mu-api-row>
+                <mu-api-row name="mu-button--filled" type="class">Filled variant styling</mu-api-row>
+                <mu-api-row name="mu-button--elevated" type="class">Elevated variant with
+                    shadow</mu-api-row>
+                <mu-api-row name="mu-button--tonal" type="class">Tonal (secondary container)
+                    styling</mu-api-row>
+                <mu-api-row name="mu-button--outlined" type="class">Outlined variant styling</mu-api-row>
+                <mu-api-row name="mu-button--text" type="class">Text-only variant styling</mu-api-row>
+                <mu-api-row name="is-disabled" type="class">Applied when button is disabled</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <!-- STYLING Tab Content -->
+    <div id="button-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 buttons using MD3 design tokens.
+            </p>
+            <mu-api-table type="tokens">
+                <mu-api-row name="--md-sys-color-primary" default="#6750a4">Filled button
+                    background</mu-api-row>
+                <mu-api-row name="--md-sys-color-on-primary" default="#ffffff">Filled button text
+                    color</mu-api-row>
+                <mu-api-row name="--md-sys-color-secondary-container" default="#e8def8">Tonal button
+                    background</mu-api-row>
+                <mu-api-row name="--md-sys-color-on-secondary-container" default="#1d192b">Tonal button text
+                    color</mu-api-row>
+                <mu-api-row name="--md-sys-color-outline" default="#79747e">Outlined button
+                    border</mu-api-row>
+                <mu-api-row name="--md-sys-shape-corner-full" default="9999px">Button border
+                    radius</mu-api-row>
+                <mu-api-row name="--md-sys-elevation-1" default="0 1px 3px...">Elevated button
+                    shadow</mu-api-row>
+            </mu-api-table>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">Theming Example</h2>
+            <div class="code-block">/* Custom button theme */
+                mu-button {
+                --md-sys-color-primary: #006d3b;
+                --md-sys-color-on-primary: #ffffff;
+                --md-sys-shape-corner-full: 8px; /* Less rounded */
+                }</div>
+        </div>
+    </div>
+
+    <!-- EXAMPLES Tab Content -->
+    <div id="button-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="Disabled buttons">
+            <div slot="demo">
+                <mu-button variant="filled" disabled>Disabled Filled</mu-button>
+                <mu-button variant="outlined" disabled>Disabled Outlined</mu-button>
+            </div>
+        </mu-example>
+
+        <mu-example title="Danger button">
+            <div slot="demo">
+                <mu-button variant="danger">Delete Account</mu-button>
+            </div>
+
+        </mu-example>
+
+        <mu-example title="Button group">
+            <div slot="demo">
+                <mu-button variant="text">Cancel</mu-button>
+                <mu-button variant="filled">Confirm</mu-button>
+            </div>
+        </mu-example>
+
+        <mu-example title="Full width button">
+            <div slot="demo">
+                <mu-button variant="filled" style="width: 100%;">Full Width Button</mu-button>
+            </div>
+        </mu-example>
+    </div>
+</div>

package/demo/content/callouts.html

@@ -0,0 +1,91 @@
+<div class="page active">
+    <h1 class="page-title">Callout</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-callout&gt;</code> is an MD3 styled info box for highlighting
+        important information, tips, warnings, or success messages in documentation.
+    </p>
+
+    <mu-tabs active="0" id="callout-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="callout-overview" class="doc-tab-content">
+        <mu-example title="All variants">
+            <div slot="demo">
+                <mu-stack gap="md">
+                    <mu-callout variant="info">
+                        <strong>Note:</strong> This is an informational callout for general guidance.
+                    </mu-callout>
+                    <mu-callout variant="tip">
+                        <strong>Tip:</strong> Use keyboard shortcut Ctrl+S to save your work quickly.
+                    </mu-callout>
+                    <mu-callout variant="warning">
+                        <strong>Warning:</strong> This action cannot be undone. Please proceed with caution.
+                    </mu-callout>
+                    <mu-callout variant="success">
+                        <strong>Success:</strong> Your changes have been saved successfully.
+                    </mu-callout>
+                </mu-stack>
+            </div>
+            <div slot="code">&lt;mu-callout variant="info"&gt;Info message&lt;/mu-callout&gt;
+                &lt;mu-callout variant="tip"&gt;Tip message&lt;/mu-callout&gt;
+                &lt;mu-callout variant="warning"&gt;Warning message&lt;/mu-callout&gt;
+                &lt;mu-callout variant="success"&gt;Success message&lt;/mu-callout&gt;</div>
+        </mu-example>
+
+        <div class="component-section">
+            <h2 class="section-title">When to use</h2>
+            <p style="color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
+                Use callouts to draw attention to important information that should stand out from
+                regular content. Unlike alerts which are for user feedback, callouts are ideal for
+                documentation, tutorials, and static informational content.
+            </p>
+        </div>
+    </div>
+
+    <div id="callout-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="info">'info' | 'tip' | 'warning' |
+                    'success'</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="callout-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-container" default="#eaddff">Info background</mu-api-row>
+                <mu-api-row name="--md-sys-color-secondary-container" default="#e8def8">Tip background</mu-api-row>
+                <mu-api-row name="--md-sys-color-error-container" default="#f9dedc">Warning background</mu-api-row>
+                <mu-api-row name="--md-sys-color-tertiary-container" default="#ffd8e4">Success background</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="callout-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="Documentation usage">
+            <div slot="demo">
+                <mu-stack gap="md">
+                    <p>When implementing authentication, consider the following:</p>
+                    <mu-callout variant="info">
+                        Always use HTTPS in production to protect user credentials during transmission.
+                    </mu-callout>
+                    <p>For token storage, we recommend using HttpOnly cookies:</p>
+                    <mu-callout variant="tip">
+                        HttpOnly cookies prevent XSS attacks from stealing authentication tokens via JavaScript.
+                    </mu-callout>
+                </mu-stack>
+            </div>
+            <div slot="code">&lt;p&gt;Regular content...&lt;/p&gt;
+                &lt;mu-callout variant="info"&gt;
+                Important note here.
+                &lt;/mu-callout&gt;</div>
+        </mu-example>
+    </div>
+</div>