kempo-ui 0.3.5 → 0.3.6

package/docs-src/components/show-more.page.html

@@ -0,0 +1,113 @@
+<page pageName="Show More" title="Show More - Components - Kempo Docs - A Web Components Solution">
+  <content location="header"></content>
+  <content>
+    <h1 class="ta-center">Show More</h1>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#moreLessButtonText">"More" / "Less" Button Text</a><br />
+          <a href="#closedHeight">Closed Height</a><br />
+          
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#cssCustomProperties">CSS Custom Properties</a><br />
+          <a href="#methods">Methods</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-show-more</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-show-more</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-show-more>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
+          </k-show-more>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="moreLessButtonText"><a href="#moreLessButtonText" class="no-link">"More" / "Less" Button Text</a></h3>
+    <p>Change the text of the show "more" or "less" buttons by creating an element that has a <code>slot</code> attribute of <code>"more"</code> or <code>"less"</code>.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-show-more</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"more"</span>&gt;</span>Reveal Details<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"less"</span>&gt;</span>Hide Details<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-show-more</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-show-more>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
+            <span slot="more">Reveal Details</span>
+            <span slot="less">Hide Details</span>
+          </k-show-more>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="closedHeight"><a href="#closedHeight" class="no-link">Closed Height</a></h3>
+    <p>Change the height of the closed state by setting the <code>--closed_height</code> CSS Custom Property.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-show-more</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"--closed_height: 4rem"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-show-more</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-show-more
+            style="--closed_height: 4rem"
+          >
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
+          </k-show-more>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5>
+      <code>new ShowMore()</code>
+    </h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li><a href="./icon.html">Icon</a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>opened<i>: boolean</i></code></h5>
+    <p>Whether the content is expanded. Syncs to <code>opened</code> attribute.</p>
+
+    <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
+    <h5><code>--closed_height</code></h5>
+    <p>The height of the content when in the collapsed state. Default is <code>7rem</code>.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>more()<i>: void</i></code></h5>
+    <p>Expands the content.</p>
+    <h5><code>less()<i>: void</i></code></h5>
+    <p>Collapses the content.</p>
+    <h5><code>toggle()<i>: void</i></code></h5>
+    <p>Toggles the content between expanded and collapsed states.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/ShowMore.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>

package/docs-src/components/sortable.page.html

@@ -0,0 +1,117 @@
+<page pageName="Sortable" title="Sortable - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m mt0 pl">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#sortEvent">Sort Event</a><br />
+          
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#methods">Methods</a><br />
+          <a href="#events">Events</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>The <code>k-sortable</code> component allows users to reorder items by dragging them. Wrap your items in a <code>k-sortable</code> container and use <code>k-sortable-item</code> for each item. Each item automatically gets a drag handle.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-sortable</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 4<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <p class="mb"><em>Drag items by their handle to reorder them.</em></p>
+          <k-sortable>
+            <k-sortable-item>Item 1</k-sortable-item>
+            <k-sortable-item>Item 2</k-sortable-item>
+            <k-sortable-item>Item 3</k-sortable-item>
+            <k-sortable-item>Item 4</k-sortable-item>
+          </k-sortable>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="sortEvent"><a href="#sortEvent" class="no-link">Sort Event</a></h3>
+    <p>Listen to the <code>sort</code> event on the <code>k-sortable</code> container to be notified when items are reordered.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-sortable</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortableExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Apple<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Banana<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Cherry<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Date<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortOutput"</span>&gt;</span>Reorder items to see the event fire<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortableExample'</span>).addEventListener(<span class="hljs-string">'sort'</span>, () =&gt; {<br />    <span class="hljs-keyword">const</span> items = <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortableExample'</span>).children)<br />      .<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item.textContent);<br />    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortOutput'</span>).textContent = <span class="hljs-string">`Order: <span class="hljs-subst">${items.join(<span class="hljs-string">', '</span>)}</span>`</span>;<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-sortable id="sortableExample">
+            <k-sortable-item>Apple</k-sortable-item>
+            <k-sortable-item>Banana</k-sortable-item>
+            <k-sortable-item>Cherry</k-sortable-item>
+            <k-sortable-item>Date</k-sortable-item>
+          </k-sortable>
+          <p id="sortOutput" class="mt">Reorder items to see the event fire</p>
+          <script>
+            document.getElementById('sortableExample').addEventListener('sort', () => {
+              const items = Array.from(document.getElementById('sortableExample').children)
+                .map(item => item.textContent);
+              document.getElementById('sortOutput').textContent = `Order: ${items.join(', ')}`;
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef">JavaScript Reference</h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    
+    <h5><code>new Sortable()</code></h5>
+    <h6>Extends LitElement</h6>
+    <p>The container component that manages sortable items.</p>
+
+    <h5><code>new SortableItem()</code></h5>
+    <h6>Extends LitElement</h6>
+    <p>An individual sortable item with a drag handle.</p>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li>Lit</li>
+      <li><a href="{{pathToRoot}}utils/drag.html">drag</a> utility</li>
+      <li><a href="icon.html">Icon</a> component</li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    
+    <h4>Sortable</h4>
+    <p>The Sortable container has no public properties.</p>
+
+    <h4>SortableItem</h4>
+    <h5><code>sorting<i>: boolean</i></code></h5>
+    <p>A boolean indicating if the item is currently being dragged. This property is reflected as an attribute and automatically set by the drag handlers. When <code>true</code>, the item has reduced opacity.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    
+    <h4>Sortable</h4>
+    <h5><code>getCursorElement()<i>: [Element, string] | null</i></code></h5>
+    <p>Returns the element and position ('before' or 'after') where the dragged item should be inserted based on the current cursor position. Returns <code>null</code> if no valid target is found.</p>
+
+    <h4>SortableItem</h4>
+    <h5><code>sortable<i>: Sortable</i></code></h5>
+    <p>A getter that returns the parent <code>k-sortable</code> element using <code>closest('k-sortable')</code>.</p>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>sort</code></h5>
+    <p>Dispatched by the <code>k-sortable</code> container when an item is dropped in a new position. The event bubbles. Use this event to save the new order or update your application state.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Sortable.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>

package/docs-src/components/spinner.page.html

@@ -0,0 +1,197 @@
+<page pageName="Spinner" title="Spinner - Components - Kempo Docs - A Web Components Solution">
+  <content location="header"></content>
+  <content>
+    <h1 class="ta-center">Spinner</h1>
+
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#sizes">Sizes</a><br />
+          <a href="#variants">Variants</a><br />
+          <a href="#customColors">Custom Colors</a><br />
+          <a href="#withText">With Text</a><br />
+          <a href="#buttonLoading">Button Loading State</a><br />
+
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#attributes">Attributes</a><br />
+          <a href="#cssVariables">CSS Variables</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Create loading spinners using the <code>k-spinner</code> component.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-spinner></k-spinner>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="sizes"><a href="#sizes" class="no-link">Sizes</a></h3>
+    <p>Control the spinner size using the <code>size</code> attribute. Options are <code>xs</code>, <code>sm</code>, <code>md</code> (default), <code>lg</code>, and <code>xl</code>.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"md"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"xl"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <div class="d-f ai-c gap">
+            <k-spinner size="xs"></k-spinner>
+            <k-spinner size="sm"></k-spinner>
+            <k-spinner size="md"></k-spinner>
+            <k-spinner size="lg"></k-spinner>
+            <k-spinner size="xl"></k-spinner>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="variants"><a href="#variants" class="no-link">Variants</a></h3>
+    <p>Choose from different spinner styles using the <code>variant</code> attribute. Options are <code>spinner</code> (default), <code>dots</code>, <code>bars</code>, <code>pulse</code>, and <code>ring</code>.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"spinner"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"dots"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"bars"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"pulse"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"ring"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <div class="d-f ai-c gap-lg">
+            <div class="ta-center">
+              <k-spinner variant="spinner" size="lg"></k-spinner>
+              <p class="mt-sm mb0">spinner</p>
+            </div>
+            <div class="ta-center">
+              <k-spinner variant="dots" size="lg"></k-spinner>
+              <p class="mt-sm mb0">dots</p>
+            </div>
+            <div class="ta-center">
+              <k-spinner variant="bars" size="lg"></k-spinner>
+              <p class="mt-sm mb0">bars</p>
+            </div>
+            <div class="ta-center">
+              <k-spinner variant="pulse" size="lg"></k-spinner>
+              <p class="mt-sm mb0">pulse</p>
+            </div>
+            <div class="ta-center">
+              <k-spinner variant="ring" size="lg"></k-spinner>
+              <p class="mt-sm mb0">ring</p>
+            </div>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="customColors"><a href="#customColors" class="no-link">Custom Colors</a></h3>
+    <p>Customize spinner colors using CSS variables.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_success)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_danger)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_warning)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: #9c27b0"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <div class="d-f ai-c gap">
+            <k-spinner style="--spinner-color: var(--c_success)"></k-spinner>
+            <k-spinner style="--spinner-color: var(--c_danger)"></k-spinner>
+            <k-spinner style="--spinner-color: var(--c_warning)"></k-spinner>
+            <k-spinner style="--spinner-color: #9c27b0"></k-spinner>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="withText"><a href="#withText" class="no-link">With Text</a></h3>
+    <p>Combine spinners with text for loading messages.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f ai-c gap"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>Loading...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <div class="d-f ai-c gap">
+            <k-spinner size="sm"></k-spinner>
+            <span>Loading...</span>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="buttonLoading"><a href="#buttonLoading" class="no-link">Button Loading State</a></h3>
+    <p>Use spinners inside buttons to indicate loading states.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">disabled</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span><br />    <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span><br />    <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: currentColor"</span><br />  &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br />  Saving...<br /><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">disabled</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span><br />    <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span><br />    <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: currentColor"</span><br />  &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br />  Loading...<br /><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <div class="d-f gap">
+            <button disabled>
+              <k-spinner size="xs" style="--spinner-color: currentColor"></k-spinner>
+              Saving...
+            </button>
+            <button class="primary" disabled>
+              <k-spinner size="xs" style="--spinner-color: currentColor"></k-spinner>
+              Loading...
+            </button>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5><code>new Spinner()</code></h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h5><code>size<i>: string</i></code></h5>
+    <p>The size of the spinner. Options: <code>xs</code>, <code>sm</code>, <code>md</code> (default), <code>lg</code>, <code>xl</code>.</p>
+
+    <h5><code>variant<i>: string</i></code></h5>
+    <p>The style variant of the spinner. Options: <code>spinner</code> (default), <code>dots</code>, <code>bars</code>, <code>pulse</code>, <code>ring</code>.</p>
+
+    <h3 id="cssVariables"><a href="#cssVariables" class="no-link">CSS Variables</a></h3>
+    <h5><code>--spinner-size</code></h5>
+    <p>The width and height of the spinner. Set automatically based on <code>size</code> attribute.</p>
+
+    <h5><code>--spinner-border-width</code></h5>
+    <p>The border thickness for spinner and ring variants. Set automatically based on <code>size</code> attribute.</p>
+
+    <h5><code>--spinner-color</code></h5>
+    <p>The primary color of the spinner. Default is <code>var(--c_primary)</code>.</p>
+
+    <h5><code>--spinner-track-color</code></h5>
+    <p>The background track color for the spinner variant. Default is <code>var(--c_border)</code>.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Spinner.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>