microui-wc 0.1.0

package/demo/content/modals.html

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

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

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

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

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

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