microui-wc 0.1.1 → 0.1.2

package/demo/content/modals.html

@@ -1,141 +0,0 @@
-<!-- Modals Content Fragment -->
-<div id="page-modals" class="page active">
-    <h1 class="page-title">Dialog / Modal</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-modal&gt;</code> displays content in an overlay layer
-        that blocks interaction with the page below.
-    </p>
-
-    <mu-tabs active="0" id="modal-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="modal-overview" class="doc-tab-content">
-        <mu-example title="Basic dialog">
-            <div slot="demo">
-                <mu-button variant="filled" onclick="document.getElementById('demo-modal').open()">Open
-                    Modal</mu-button>
-                <mu-modal id="demo-modal">
-                    <h2>Modal Title</h2>
-                    <p>This is the modal content. You can put any content here.</p>
-                    <mu-stack direction="row" gap="sm" justify="flex-end" style="margin-top: 16px;">
-                        <mu-button variant="text"
-                            onclick="document.getElementById('demo-modal').close()">Cancel</mu-button>
-                        <mu-button variant="filled"
-                            onclick="document.getElementById('demo-modal').close()">Confirm</mu-button>
-                    </mu-stack>
-                </mu-modal>
-            </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>Custom content dialogs</strong>
-                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">Forms, complex
-                                layouts, multi-step wizards, or any non-standard content</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>Details or previews</strong>
-                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">Image
-                                galleries, product details, user profiles, expanded views</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>Modal forms with validation</strong>
-                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">Login,
-                                settings, feedback, where you need full control over layout</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>simple yes/no confirmations</strong> — use
-                    <code>&lt;mu-confirm&gt;</code> instead (less code, built-in patterns)</mu-alert>
-                <mu-alert severity="warning">Don't use for <strong>temporary notifications</strong> — use
-                    <code>showToast()</code> instead (auto-dismisses, non-blocking)</mu-alert>
-                <mu-alert severity="warning">Don't use for <strong>persistent status messages</strong> — use
-                    <code>&lt;mu-alert&gt;</code> inline instead (always visible)</mu-alert>
-            </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;">
-                Modal uses <code>role="dialog"</code> and traps focus inside.
-                Press Escape or click backdrop to close. Focus returns to trigger on close.
-            </p>
-        </div>
-    </div>
-
-    <div id="modal-api" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">Methods</h2>
-            <mu-api-table type="methods">
-                <mu-api-row name="open" signature="open(): void">Opens the modal</mu-api-row>
-                <mu-api-row name="close" signature="close(): void">Closes the modal</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-open" detail="{}">Emitted when modal opens</mu-api-row>
-                <mu-api-row name="mu-close" detail="{}">Emitted when modal closes</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="modal-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-scrim" default="rgba(0,0,0,0.32)">Backdrop overlay
-                    color</mu-api-row>
-                <mu-api-row name="--md-sys-color-surface" default="#fef7ff">Modal background</mu-api-row>
-                <mu-api-row name="--md-sys-shape-corner-extra-large" default="28px">Border
-                    radius</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="modal-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Confirm dialog">
-            <div slot="demo">
-                <mu-button variant="danger" onclick="document.getElementById('confirm-modal').open()">Delete
-                    Item</mu-button>
-                <mu-modal id="confirm-modal">
-                    <h2>Are you sure?</h2>
-                    <p>This action cannot be undone.</p>
-                    <mu-stack direction="row" gap="sm" justify="flex-end" style="margin-top: 16px;">
-                        <mu-button variant="text"
-                            onclick="document.getElementById('confirm-modal').close()">Cancel</mu-button>
-                        <mu-button variant="danger"
-                            onclick="document.getElementById('confirm-modal').close()">Delete</mu-button>
-                    </mu-stack>
-                </mu-modal>
-            </div>
-        </mu-example>
-    </div>
-</div>

package/demo/content/navbar.html

@@ -1,70 +0,0 @@
-<!-- Navbar Content Fragment -->
-<div id="page-navbar" class="page active">
-    <h1 class="page-title">Navbar</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-navbar&gt;</code> provides a responsive navigation bar
-        with brand, links, and actions. Supports mobile hamburger menu.
-    </p>
-
-    <mu-tabs active="0" id="navbar-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="navbar-overview" class="doc-tab-content">
-        <mu-example title="Basic navbar">
-            <div slot="demo">
-                <mu-navbar>
-                    <mu-navbar-brand>Brand</mu-navbar-brand>
-                    <mu-navbar-links>
-                        <a href="#">Home</a>
-                        <a href="#">About</a>
-                        <a href="#">Contact</a>
-                    </mu-navbar-links>
-                </mu-navbar>
-            </div>
-
-        </mu-example>
-    </div>
-
-    <div id="navbar-api" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">Child Components</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="mu-navbar-brand">Container for logo/brand name</mu-api-row>
-                <mu-api-row name="mu-navbar-links">Container for navigation links</mu-api-row>
-                <mu-api-row name="mu-navbar-actions">Container for action buttons</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="navbar-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" default="#fef7ff">Navbar background</mu-api-row>
-                <mu-api-row name="--md-sys-color-on-surface" default="#1d1b20">Text color</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="navbar-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="With action buttons">
-            <div slot="demo">
-                <mu-navbar>
-                    <mu-navbar-brand>MyApp</mu-navbar-brand>
-                    <mu-navbar-links>
-                        <a href="#">Features</a>
-                        <a href="#">Pricing</a>
-                    </mu-navbar-links>
-                    <mu-navbar-actions>
-                        <mu-button variant="text">Login</mu-button>
-                        <mu-button variant="filled">Sign Up</mu-button>
-                    </mu-navbar-actions>
-                </mu-navbar>
-            </div>
-        </mu-example>
-    </div>
-</div>

package/demo/content/progress.html

@@ -1,119 +0,0 @@
-<!-- Progress Content Fragment -->
-<div id="page-progress" class="page active">
-    <h1 class="page-title">Progress Bar</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-progress&gt;</code>
-        communicates loading states with linear progress animations.
-    </p>
-
-    <mu-tabs active="0" id="progress-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="progress-overview" class="doc-tab-content">
-        <mu-example title="Linear progress bar">
-            <div slot="demo">
-                <mu-stack gap="md" style="width: 100%;">
-                    <mu-progress value="25"></mu-progress>
-                    <mu-progress value="50"></mu-progress>
-                    <mu-progress value="75"></mu-progress>
-                    <mu-progress value="100"></mu-progress>
-                </mu-stack>
-            </div>
-        </mu-example>
-
-        <!-- When to use - UNIFIED CARD with list items -->
-        <div class="component-section">
-            <h3 class="section-title">When to use</h3>
-            <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>File uploads or downloads</strong>
-                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">When you can
-                                calculate progress percentage</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>Multi-step processes</strong>
-                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">Wizards,
-                                onboarding flows, form completion</div>
-                        </div>
-                    </mu-stack>
-                </mu-stack>
-            </mu-card>
-        </div>
-
-        <!-- When NOT to use -->
-        <div class="component-section">
-            <h3 class="section-title">When NOT to use</h3>
-            <mu-stack gap="md">
-                <mu-alert severity="warning">Don't use for <strong>indeterminate loading</strong> where duration is
-                    unknown — use <code>&lt;mu-spinner&gt;</code> instead</mu-alert>
-                <mu-alert severity="warning">Don't use for <strong>button loading states</strong> — use inline spinner
-                    or button disabled state</mu-alert>
-            </mu-stack>
-        </div>
-    </div>
-
-    <div id="progress-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="value" type="number" default="0">Progress value (0-100)</mu-api-row>
-                <mu-api-row name="indeterminate" type="boolean" default="false">Infinite animation
-                    mode</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="progress-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">Progress fill color</mu-api-row>
-                <mu-api-row name="--md-sys-color-surface-container-highest" default="#e6e0e9">Track
-                    background</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="progress-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Indeterminate progress">
-            <div slot="demo">
-                <mu-progress indeterminate></mu-progress>
-            </div>
-        </mu-example>
-
-        <mu-example title="Different values">
-            <div slot="demo">
-                <mu-stack gap="sm" style="width: 100%;">
-                    <div style="display: flex; justify-content: space-between; font-size: 13px;">
-                        <span>0%</span>
-                        <mu-progress value="0" style="flex: 1; margin: 0 12px;"></mu-progress>
-                    </div>
-                    <div style="display: flex; justify-content: space-between; font-size: 13px;">
-                        <span>33%</span>
-                        <mu-progress value="33" style="flex: 1; margin: 0 12px;"></mu-progress>
-                    </div>
-                    <div style="display: flex; justify-content: space-between; font-size: 13px;">
-                        <span>66%</span>
-                        <mu-progress value="66" style="flex: 1; margin: 0 12px;"></mu-progress>
-                    </div>
-                    <div style="display: flex; justify-content: space-between; font-size: 13px;">
-                        <span>100%</span>
-                        <mu-progress value="100" style="flex: 1; margin: 0 12px;"></mu-progress>
-                    </div>
-                </mu-stack>
-            </div>
-        </mu-example>
-    </div>
-</div>

package/demo/content/radios.html

@@ -1,88 +0,0 @@
-<!-- Radios Content Fragment -->
-<div id="page-radios" class="page active">
-    <h1 class="page-title">Radio Button</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-radio-group&gt;</code> and <code>&lt;mu-radio&gt;</code> allow users
-        to select one option from a set. Radio buttons should be used in groups.
-    </p>
-
-    <mu-tabs active="0" id="radio-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="radio-overview" class="doc-tab-content">
-        <mu-example title="Radio group">
-            <div slot="demo">
-                <mu-radio-group name="size" value="medium">
-                    <mu-stack gap="sm">
-                        <mu-radio value="small">Small</mu-radio>
-                        <mu-radio value="medium">Medium</mu-radio>
-                        <mu-radio value="large">Large</mu-radio>
-                    </mu-stack>
-                </mu-radio-group>
-            </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;">
-                Radio groups use <code>role="radiogroup"</code> and manage
-                <code>aria-checked</code> on each radio. Arrow keys navigate between options.
-            </p>
-        </div>
-    </div>
-
-    <div id="radio-api" class="doc-tab-content" style="display: none;">
-        <div class="component-section">
-            <h2 class="section-title">Attributes (mu-radio-group)</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="name" type="string" default="">Form name for the group</mu-api-row>
-                <mu-api-row name="value" type="string" default="">Currently selected value</mu-api-row>
-            </mu-api-table>
-        </div>
-        <div class="component-section">
-            <h2 class="section-title">Attributes (mu-radio)</h2>
-            <mu-api-table type="attributes">
-                <mu-api-row name="value" type="string" default="">Value of this radio option</mu-api-row>
-                <mu-api-row name="disabled" type="boolean" default="false">Whether 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="mu-change" detail="{ value: string }">Emitted on group when selection
-                    changes</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="radio-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">Selected radio fill</mu-api-row>
-                <mu-api-row name="--md-sys-color-outline" default="#79747e">Unselected border</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="radio-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Horizontal layout">
-            <div slot="demo">
-                <mu-radio-group name="color" value="blue">
-                    <mu-stack direction="row" gap="md">
-                        <mu-radio value="red">Red</mu-radio>
-                        <mu-radio value="green">Green</mu-radio>
-                        <mu-radio value="blue">Blue</mu-radio>
-                    </mu-stack>
-                </mu-radio-group>
-            </div>
-        </mu-example>
-    </div>
-</div>

package/demo/content/skeletons.html

@@ -1,109 +0,0 @@
-<div class="page active">
-    <h1 class="page-title">Skeleton</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-skeleton&gt;</code> displays animated placeholder content
-        while the actual content is loading, improving perceived performance.
-    </p>
-
-    <mu-tabs active="0" id="skeleton-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="skeleton-overview" class="doc-tab-content">
-        <mu-example title="Loading card placeholder">
-            <div slot="demo">
-                <mu-card variant="outlined" style="max-width: 300px; padding: 16px;">
-                    <mu-stack direction="row" gap="md" align="start">
-                        <mu-skeleton variant="circle" size="48px"></mu-skeleton>
-                        <mu-stack gap="sm" style="flex: 1;">
-                            <mu-skeleton width="60%" height="16px"></mu-skeleton>
-                            <mu-skeleton width="40%" height="12px"></mu-skeleton>
-                        </mu-stack>
-                    </mu-stack>
-                    <mu-skeleton variant="text" lines="3" style="margin-top: 16px;"></mu-skeleton>
-                </mu-card>
-            </div>
-            <div slot="code">&lt;mu-skeleton variant="circle" size="48px"&gt;&lt;/mu-skeleton&gt;
-                &lt;mu-skeleton width="60%" height="16px"&gt;&lt;/mu-skeleton&gt;
-                &lt;mu-skeleton variant="text" lines="3"&gt;&lt;/mu-skeleton&gt;</div>
-        </mu-example>
-
-        <mu-example title="Variant types">
-            <div slot="demo">
-                <mu-stack gap="lg">
-                    <mu-stack gap="xs">
-                        <strong>Rectangle (default)</strong>
-                        <mu-skeleton width="200px" height="100px"></mu-skeleton>
-                    </mu-stack>
-                    <mu-stack gap="xs">
-                        <strong>Circle</strong>
-                        <mu-skeleton variant="circle" size="64px"></mu-skeleton>
-                    </mu-stack>
-                    <mu-stack gap="xs">
-                        <strong>Text lines</strong>
-                        <mu-skeleton variant="text" lines="3"></mu-skeleton>
-                    </mu-stack>
-                </mu-stack>
-            </div>
-            <div slot="code">&lt;mu-skeleton width="200px" height="100px"&gt;&lt;/mu-skeleton&gt;
-                &lt;mu-skeleton variant="circle" size="64px"&gt;&lt;/mu-skeleton&gt;
-                &lt;mu-skeleton variant="text" lines="3"&gt;&lt;/mu-skeleton&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 skeletons to indicate that content is loading. They reduce perceived waiting time
-                by showing the layout structure upfront. Prefer skeletons over spinners for
-                content-heavy areas.
-            </p>
-        </div>
-    </div>
-
-    <div id="skeleton-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="rect">'rect' | 'circle' | 'text'</mu-api-row>
-                <mu-api-row name="width" type="string" default="100%">Width for rect variant</mu-api-row>
-                <mu-api-row name="height" type="string" default="20px">Height for rect variant</mu-api-row>
-                <mu-api-row name="size" type="string" default="40px">Size for circle variant</mu-api-row>
-                <mu-api-row name="lines" type="number" default="1">Number of lines for text variant</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="skeleton-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-highest" default="#e6e0e9">Skeleton background
-                    color</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="skeleton-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Loading profile">
-            <div slot="demo">
-                <mu-stack direction="row" gap="md" align="center">
-                    <mu-skeleton variant="circle" size="56px"></mu-skeleton>
-                    <mu-stack gap="xs">
-                        <mu-skeleton width="120px" height="18px"></mu-skeleton>
-                        <mu-skeleton width="80px" height="14px"></mu-skeleton>
-                    </mu-stack>
-                </mu-stack>
-            </div>
-            <div slot="code">&lt;mu-stack direction="row" gap="md" align="center"&gt;
-                &lt;mu-skeleton variant="circle" size="56px"&gt;&lt;/mu-skeleton&gt;
-                &lt;mu-stack gap="xs"&gt;
-                &lt;mu-skeleton width="120px" height="18px"&gt;&lt;/mu-skeleton&gt;
-                &lt;mu-skeleton width="80px" height="14px"&gt;&lt;/mu-skeleton&gt;
-                &lt;/mu-stack&gt;
-                &lt;/mu-stack&gt;</div>
-        </mu-example>
-    </div>
-</div>

package/demo/content/spinners.html

@@ -1,96 +0,0 @@
-<div class="page active">
-    <h1 class="page-title">Spinner</h1>
-    <p class="page-subtitle">
-        <code>&lt;mu-spinner&gt;</code> is an MD3 circular progress indicator
-        for short loading operations where the wait time is unknown.
-    </p>
-
-    <mu-tabs active="0" id="spinner-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="spinner-overview" class="doc-tab-content">
-        <mu-example title="Size variants">
-            <div slot="demo">
-                <mu-stack direction="row" gap="lg" align="center">
-                    <mu-stack gap="xs" align="center">
-                        <mu-spinner size="sm"></mu-spinner>
-                        <small>Small</small>
-                    </mu-stack>
-                    <mu-stack gap="xs" align="center">
-                        <mu-spinner size="md"></mu-spinner>
-                        <small>Medium</small>
-                    </mu-stack>
-                    <mu-stack gap="xs" align="center">
-                        <mu-spinner size="lg"></mu-spinner>
-                        <small>Large</small>
-                    </mu-stack>
-                </mu-stack>
-            </div>
-            <div slot="code">&lt;mu-spinner size="sm"&gt;&lt;/mu-spinner&gt;
-                &lt;mu-spinner size="md"&gt;&lt;/mu-spinner&gt;
-                &lt;mu-spinner size="lg"&gt;&lt;/mu-spinner&gt;</div>
-        </mu-example>
-
-        <mu-example title="Color variants">
-            <div slot="demo">
-                <mu-spinner color="primary"></mu-spinner>
-                <mu-spinner color="secondary"></mu-spinner>
-                <mu-spinner color="tertiary"></mu-spinner>
-            </div>
-            <div slot="code">&lt;mu-spinner color="primary"&gt;&lt;/mu-spinner&gt;
-                &lt;mu-spinner color="secondary"&gt;&lt;/mu-spinner&gt;
-                &lt;mu-spinner color="tertiary"&gt;&lt;/mu-spinner&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 spinners for short, indeterminate loading operations (under 4 seconds).
-                For longer operations, use a progress indicator with percentage. For content
-                areas, prefer skeletons over spinners.
-            </p>
-        </div>
-    </div>
-
-    <div id="spinner-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">'sm' | 'md' | 'lg'</mu-api-row>
-                <mu-api-row name="color" type="string" default="primary">'primary' | 'secondary' |
-                    'tertiary'</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="spinner-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 spinner color</mu-api-row>
-                <mu-api-row name="--md-sys-color-secondary" default="#958da5">Secondary spinner color</mu-api-row>
-            </mu-api-table>
-        </div>
-    </div>
-
-    <div id="spinner-examples" class="doc-tab-content" style="display: none;">
-        <mu-example title="Loading button">
-            <div slot="demo">
-                <mu-button disabled>
-                    <mu-stack direction="row" gap="sm" align="center">
-                        <mu-spinner size="sm" color="primary"></mu-spinner>
-                        <span>Loading...</span>
-                    </mu-stack>
-                </mu-button>
-            </div>
-            <div slot="code">&lt;mu-button disabled&gt;
-                &lt;mu-spinner size="sm"&gt;&lt;/mu-spinner&gt;
-                Loading...
-                &lt;/mu-button&gt;</div>
-        </mu-example>
-    </div>
-</div>