microui-wc 0.1.0 → 0.1.2

package/demo/content/switches.html

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

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

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

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

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