microui-wc 0.1.0

package/demo/content/switches.html

@@ -0,0 +1,84 @@
+<!-- Switches Content Fragment -->
+<div id="page-switches" class="page active">
+    <h1 class="page-title">Switch</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-switch&gt;</code> is a toggle control for binary on/off settings.
+        It follows MD3 specifications with smooth thumb animations and state colors.
+    </p>
+
+    <mu-tabs active="0" id="switch-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="switch-overview" class="doc-tab-content">
+        <mu-example title="Basic switches">
+            <div slot="demo">
+                <mu-stack gap="md">
+                    <mu-switch label="Notifications"></mu-switch>
+                    <mu-switch label="Dark mode" on></mu-switch>
+                    <mu-switch label="Disabled" disabled></mu-switch>
+                </mu-stack>
+            </div>
+
+        </mu-example>
+
+        <div class="component-section"
+            style="background: var(--md-sys-color-primary-container); border-left: 4px solid var(--md-sys-color-primary);">
+            <h2 class="section-title" style="color: var(--md-sys-color-on-primary-container);">Accessibility
+            </h2>
+            <p style="color: var(--md-sys-color-on-primary-container); line-height: 1.6;">
+                <code>&lt;mu-switch&gt;</code> uses <code>role="switch"</code> and manages
+                <code>aria-checked</code> automatically. Keyboard toggle with Space is supported.
+            </p>
+        </div>
+    </div>
+
+    <div id="switch-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="on" type="boolean" default="false">Whether the switch is on</mu-api-row>
+                <mu-api-row name="disabled" type="boolean" default="false">Whether the switch is
+                    disabled</mu-api-row>
+                <mu-api-row name="label" type="string" default="">Label text</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="{ on: boolean }">Emitted when toggled</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="switch-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">On state track
+                    color</mu-api-row>
+                <mu-api-row name="--md-sys-color-on-primary" default="#ffffff">On state thumb
+                    color</mu-api-row>
+                <mu-api-row name="--md-sys-color-outline" default="#79747e">Off state track
+                    border</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="switch-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="Settings panel">
+            <div slot="demo">
+                <mu-card variant="outlined">
+                    <mu-stack gap="md">
+                        <mu-switch label="Enable notifications" on></mu-switch>
+                        <mu-switch label="Show previews"></mu-switch>
+                        <mu-switch label="Play sounds" on></mu-switch>
+                    </mu-stack>
+                </mu-card>
+            </div>
+        </mu-example>
+    </div>
+</div>

package/demo/content/tables.html

@@ -0,0 +1,124 @@
+<div class="page active">
+    <h1 class="page-title">Table</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-table&gt;</code> provides semantic HTML table elements
+        with MD3 styling for displaying tabular data.
+    </p>
+
+    <mu-tabs active="0" id="table-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="table-overview" class="doc-tab-content">
+        <mu-example title="Basic table">
+            <div slot="demo">
+                <mu-table>
+                    <mu-thead>
+                        <mu-tr>
+                            <mu-th>Name</mu-th>
+                            <mu-th>Email</mu-th>
+                            <mu-th>Role</mu-th>
+                        </mu-tr>
+                    </mu-thead>
+                    <mu-tbody>
+                        <mu-tr>
+                            <mu-td>John Doe</mu-td>
+                            <mu-td>john@example.com</mu-td>
+                            <mu-td>Admin</mu-td>
+                        </mu-tr>
+                        <mu-tr>
+                            <mu-td>Jane Smith</mu-td>
+                            <mu-td>jane@example.com</mu-td>
+                            <mu-td>Editor</mu-td>
+                        </mu-tr>
+                        <mu-tr>
+                            <mu-td>Bob Johnson</mu-td>
+                            <mu-td>bob@example.com</mu-td>
+                            <mu-td>Viewer</mu-td>
+                        </mu-tr>
+                    </mu-tbody>
+                </mu-table>
+            </div>
+            <div slot="code">&lt;mu-table&gt;
+                &lt;mu-thead&gt;
+                &lt;mu-tr&gt;&lt;mu-th&gt;Name&lt;/mu-th&gt;&lt;mu-th&gt;Email&lt;/mu-th&gt;&lt;/mu-tr&gt;
+                &lt;/mu-thead&gt;
+                &lt;mu-tbody&gt;
+                &lt;mu-tr&gt;&lt;mu-td&gt;John&lt;/mu-td&gt;&lt;mu-td&gt;john@example.com&lt;/mu-td&gt;&lt;/mu-tr&gt;
+                &lt;/mu-tbody&gt;
+                &lt;/mu-table&gt;</div>
+        </mu-example>
+
+        <div class="component-section">
+            <h2 class="section-title">Semantic structure</h2>
+            <p style="color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
+                Use <code>&lt;mu-thead&gt;</code> for headers, <code>&lt;mu-tbody&gt;</code> for data,
+                <code>&lt;mu-tr&gt;</code> for rows, <code>&lt;mu-th&gt;</code> for header cells,
+                and <code>&lt;mu-td&gt;</code> for data cells.
+            </p>
+        </div>
+    </div>
+
+    <div id="table-api" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">Elements</h2>
+            <mu-api-table type="attributes">
+                <mu-api-row name="mu-table" type="element">Table container (display: table)</mu-api-row>
+                <mu-api-row name="mu-thead" type="element">Table header group</mu-api-row>
+                <mu-api-row name="mu-tbody" type="element">Table body group</mu-api-row>
+                <mu-api-row name="mu-tr" type="element">Table row</mu-api-row>
+                <mu-api-row name="mu-th" type="element">Header cell (bold, left-aligned)</mu-api-row>
+                <mu-api-row name="mu-td" type="element">Data cell</mu-api-row>
+            </mu-api-table>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">Attributes</h2>
+            <mu-api-table type="attributes">
+                <mu-api-row name="striped" type="boolean" default="false">Alternating row colors</mu-api-row>
+                <mu-api-row name="hover" type="boolean" default="false">Highlight rows on hover</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="table-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-container" default="#f3edf7">Header background</mu-api-row>
+                <mu-api-row name="--md-sys-color-outline-variant" default="#cac4d0">Row border color</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="table-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="Products table">
+            <div slot="demo">
+                <mu-table>
+                    <mu-thead>
+                        <mu-tr>
+                            <mu-th>Product</mu-th>
+                            <mu-th>Price</mu-th>
+                            <mu-th>Stock</mu-th>
+                        </mu-tr>
+                    </mu-thead>
+                    <mu-tbody>
+                        <mu-tr>
+                            <mu-td>Widget Pro</mu-td>
+                            <mu-td>$99.00</mu-td>
+                            <mu-td>42</mu-td>
+                        </mu-tr>
+                        <mu-tr>
+                            <mu-td>Gadget Max</mu-td>
+                            <mu-td>$149.00</mu-td>
+                            <mu-td>18</mu-td>
+                        </mu-tr>
+                    </mu-tbody>
+                </mu-table>
+            </div>
+        </mu-example>
+    </div>
+</div>

package/demo/content/tabs.html

@@ -0,0 +1,85 @@
+<!-- Tabs Content Fragment -->
+<div id="page-tabs" class="page active">
+    <h1 class="page-title">Tabs</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-tabs&gt;</code> organizes content across different views.
+        Active tab is indicated with an underline animation.
+    </p>
+
+    <mu-tabs active="0" id="tabs-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="tabs-overview" class="doc-tab-content">
+        <mu-example title="Basic tabs">
+            <div slot="demo">
+                <mu-tabs active="0" id="demo-tabs">
+                    <mu-tab>Overview</mu-tab>
+                    <mu-tab>Details</mu-tab>
+                    <mu-tab>Settings</mu-tab>
+                </mu-tabs>
+                <div id="tabs-content"
+                    style="padding: 16px; background: var(--md-sys-color-surface-container-low); border-radius: 0 0 8px 8px;">
+                    Content for Overview</div>
+            </div>
+
+        </mu-example>
+
+        <div class="component-section"
+            style="background: var(--md-sys-color-primary-container); border-left: 4px solid var(--md-sys-color-primary);">
+            <h2 class="section-title" style="color: var(--md-sys-color-on-primary-container);">Accessibility
+            </h2>
+            <p style="color: var(--md-sys-color-on-primary-container); line-height: 1.6;">
+                Uses <code>role="tablist"</code> with arrow key navigation.
+                Active tab is indicated with <code>aria-selected</code>.
+            </p>
+        </div>
+    </div>
+
+    <div id="tabs-api" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">Attributes (mu-tabs)</h2>
+            <mu-api-table type="attributes">
+                <mu-api-row name="active" type="number" default="0">Index of initially active
+                    tab</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-tab-change" detail="{ index: number }">Emitted when active tab
+                    changes</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="tabs-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">Active indicator
+                    color</mu-api-row>
+                <mu-api-row name="--md-sys-color-on-surface" default="#1d1b20">Tab text color</mu-api-row>
+                <mu-api-row name="--md-sys-color-on-surface-variant" default="#49454f">Inactive tab
+                    color</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="tabs-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="Scrollable tabs">
+            <div slot="demo">
+                <mu-tabs active="0" style="max-width: 400px;">
+                    <mu-tab>Tab 1</mu-tab>
+                    <mu-tab>Tab 2</mu-tab>
+                    <mu-tab>Tab 3</mu-tab>
+                    <mu-tab>Tab 4</mu-tab>
+                    <mu-tab>Tab 5</mu-tab>
+                </mu-tabs>
+            </div>
+        </mu-example>
+    </div>
+</div>

package/demo/content/toasts.html

@@ -0,0 +1,116 @@
+<!-- Toasts Content Fragment -->
+<div id="page-toasts" class="page active">
+    <h1 class="page-title">Toast / Snackbar</h1>
+    <p class="page-subtitle">
+        <code>showToast()</code> displays temporary notification messages
+        that auto-dismiss after a configurable duration.
+    </p>
+
+    <mu-tabs active="0" id="toast-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="toast-overview" class="doc-tab-content">
+        <mu-example title="Toast severities">
+            <div slot="demo">
+                <mu-button variant="filled" onclick="showToast('Success!', { severity: 'success' })">Success</mu-button>
+                <mu-button variant="tonal" onclick="showToast('Info message', { severity: 'info' })">Info</mu-button>
+                <mu-button variant="outlined"
+                    onclick="showToast('Warning!', { severity: 'warning' })">Warning</mu-button>
+                <mu-button variant="danger"
+                    onclick="showToast('Error occurred', { severity: 'error' })">Error</mu-button>
+            </div>
+            <div slot="code">showToast('Success!', { severity: 'success' });
+                showToast('Error occurred', { severity: 'error' });</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>Brief, non-critical feedback</strong>
+                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">"Saved",
+                                "Copied to clipboard", "Settings updated"</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>Action confirmation</strong>
+                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">User just
+                                clicked something, needs visual acknowledgment</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>With undo action</strong>
+                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">Reversible
+                                actions like "Item deleted" with an Undo button</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>errors requiring user action</strong> — use
+                    <code>&lt;mu-alert&gt;</code> inline so user sees it while correcting</mu-alert>
+                <mu-alert severity="warning">Don't use for <strong>important status always visible</strong> — toasts
+                    disappear! Use <code>&lt;mu-alert&gt;</code> instead</mu-alert>
+                <mu-alert severity="warning">Don't use for <strong>confirmations requiring decision</strong> — use
+                    <code>&lt;mu-confirm&gt;</code> which blocks until user responds</mu-alert>
+            </mu-stack>
+        </div>
+    </div>
+
+    <div id="toast-api" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">Function Signature</h2>
+            <div class="code-block">showToast(message: string, options?: ToastOptions): void</div>
+        </div>
+        <div class="component-section">
+            <h2 class="section-title">Options</h2>
+            <mu-api-table type="attributes">
+                <mu-api-row name="severity" type="string" default="info">Toast type: 'success' | 'info' |
+                    'warning' | 'error'</mu-api-row>
+                <mu-api-row name="duration" type="number" default="3000">Auto-dismiss duration in
+                    ms</mu-api-row>
+                <mu-api-row name="action" type="string" default="">Optional action button text</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="toast-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-inverse-surface" default="#313033">Toast
+                    background</mu-api-row>
+                <mu-api-row name="--md-sys-color-inverse-on-surface" default="#f4eff4">Toast text
+                    color</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="toast-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="With action button">
+            <div slot="demo">
+                <mu-button variant="filled"
+                    onclick="showToast('Item deleted', { severity: 'info', action: 'Undo' })">Delete with
+                    Undo</mu-button>
+            </div>
+        </mu-example>
+    </div>
+</div>

package/demo/content/tooltips.html

@@ -0,0 +1,107 @@
+<div class="page active">
+    <h1 class="page-title">Tooltip</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-tooltip&gt;</code> displays contextual information
+        when users hover or focus on an element.
+    </p>
+
+    <mu-tabs active="0" id="tooltip-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="tooltip-overview" class="doc-tab-content">
+        <mu-example title="Position options">
+            <div slot="demo">
+                <mu-tooltip content="Tooltip on top" position="top">
+                    <mu-button>Top</mu-button>
+                </mu-tooltip>
+                <mu-tooltip content="Tooltip on bottom" position="bottom">
+                    <mu-button>Bottom</mu-button>
+                </mu-tooltip>
+                <mu-tooltip content="Tooltip on left" position="left">
+                    <mu-button>Left</mu-button>
+                </mu-tooltip>
+                <mu-tooltip content="Tooltip on right" position="right">
+                    <mu-button>Right</mu-button>
+                </mu-tooltip>
+            </div>
+            <div slot="code">&lt;mu-tooltip content="Help text" position="top"&gt;
+                &lt;mu-button&gt;Hover me&lt;/mu-button&gt;
+                &lt;/mu-tooltip&gt;</div>
+        </mu-example>
+
+        <mu-example title="Icon with tooltip">
+            <div slot="demo">
+                <mu-stack direction="row" gap="md" align="center">
+                    <mu-tooltip content="Edit document">
+                        <mu-icon name="edit" style="cursor: pointer;"></mu-icon>
+                    </mu-tooltip>
+                    <mu-tooltip content="Delete item">
+                        <mu-icon name="delete" style="cursor: pointer;"></mu-icon>
+                    </mu-tooltip>
+                    <mu-tooltip content="Settings">
+                        <mu-icon name="settings" style="cursor: pointer;"></mu-icon>
+                    </mu-tooltip>
+                </mu-stack>
+            </div>
+            <div slot="code">&lt;mu-tooltip content="Edit document"&gt;
+                &lt;mu-icon name="edit"&gt;&lt;/mu-icon&gt;
+                &lt;/mu-tooltip&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 tooltips to provide additional context for icon buttons, truncated text,
+                or any element where a brief explanation improves usability. Keep tooltip
+                text concise—one or two words is ideal.
+            </p>
+        </div>
+    </div>
+
+    <div id="tooltip-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="content" type="string" default="">The tooltip text to display</mu-api-row>
+                <mu-api-row name="position" type="string" default="top">'top' | 'bottom' | 'left' | 'right'</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="tooltip-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-inverse-surface" default="#1c1b1f">Tooltip background</mu-api-row>
+                <mu-api-row name="--md-sys-color-inverse-on-surface" default="#f4eff4">Tooltip text color</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="tooltip-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="Button bar with tooltips">
+            <div slot="demo">
+                <mu-card variant="filled" style="display: inline-block; padding: 8px 12px;">
+                    <mu-stack direction="row" gap="sm">
+                        <mu-tooltip content="Bold (Ctrl+B)">
+                            <mu-button variant="text" size="sm">B</mu-button>
+                        </mu-tooltip>
+                        <mu-tooltip content="Italic (Ctrl+I)">
+                            <mu-button variant="text" size="sm">I</mu-button>
+                        </mu-tooltip>
+                        <mu-tooltip content="Underline (Ctrl+U)">
+                            <mu-button variant="text" size="sm">U</mu-button>
+                        </mu-tooltip>
+                    </mu-stack>
+                </mu-card>
+            </div>
+            <div slot="code">&lt;mu-tooltip content="Bold (Ctrl+B)"&gt;
+                &lt;mu-button variant="text"&gt;B&lt;/mu-button&gt;
+                &lt;/mu-tooltip&gt;</div>
+        </mu-example>
+    </div>
+</div>