kempo-ui 0.3.17 → 0.4.1

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

@@ -0,0 +1,182 @@
+<page pageName="Progress" title="Progress - Components - Kempo Docs - A Web Components Solution">
+  <content location="header"></content>
+  <content>
+    <h1 class="ta-center">Progress</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="#offset">Offset</a><br />
+          <a href="#color">Color</a><br />
+          <a href="#label">Label</a><br />
+          <a href="#styles">Styles</a><br />
+          <a href="#multiple">Multiple Bars</a><br />
+          <a href="#indeterminate">Indeterminate</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 />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Create a progress bar using the <code>k-progress</code> component, set the size with the <code>percentage</code> attribute.</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-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"50"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-progress</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-progress percentage="50"></k-progress>
+        </k-card>
+      </div>
+    </div>
+    
+    <h3 id="offset"><a href="#offset" class="no-link">Offset</a></h3>
+    <p>Set the bar offset with the <code>offset</code> attribute.</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-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">"25"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-progress</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-progress percentage="50" offset="25"></k-progress>
+        </k-card>
+      </div>
+    </div>
+    
+    <h3 id="color"><a href="#color" class="no-link">Color</a></h3>
+    <p>Set the color with the <code>color</code> attribute.</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-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"green"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-progress</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-progress percentage="50" color="green"></k-progress>
+        </k-card>
+      </div>
+    </div>
+    
+    <h3 id="label"><a href="#label" class="no-link">Label</a></h3>
+    <p>Add a <code>label</code> attribute to see the percentage label added to the bar.</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-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"33"</span> <span class="hljs-attr">label</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-progress</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-progress percentage="33" label></k-progress>
+        </k-card>
+      </div>
+    </div>
+    
+    <h3 id="styles"><a href="#styles" class="no-link">Styles</a></h3>
+    <p>You can do quite a bit of customization with the css.</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-progress</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"<br />    --radius: 0;<br />    height: 3rem;<br />    color: pink;<br />    font-size: 3rem;<br />    background-color: #ccf;<br />  "</span><br />  <span class="hljs-attr">percentage</span>=<span class="hljs-string">"33"</span><br />  <span class="hljs-attr">label</span><br />&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-progress</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-progress
+            style="
+              --radius: 0;
+              height: 3rem;
+              color: pink;
+              font-size: 3rem;
+              background-color: #ccf;
+            "
+            percentage="33"
+            label
+          ></k-progress>
+        </k-card>
+      </div>
+    </div>
+    
+    <h3 id="multiple"><a href="#multiple" class="no-link">Multiple Bars</a></h3>
+    <p>Use a pipe-delimited (<code>|</code>) list in <code>percentage</code>, <code>color</code>, and <code>offset</code> to make multiple bars.</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-progress</span><br />  <span class="hljs-attr">percentage</span>=<span class="hljs-string">"25|25"</span><br />  <span class="hljs-attr">color</span>=<span class="hljs-string">"blue|red"</span><br />  <span class="hljs-attr">offset</span>=<span class="hljs-string">"0|50"</span><br />&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-progress</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-progress
+            percentage="25|25"
+            color="blue|red"
+            offset="0|50"
+          ></k-progress>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="indeterminate"><a href="#indeterminate" class="no-link">Indeterminate</a></h3>
+    <p>Use the <code>indeterminate</code> attribute to add infinite animations to the progress bar. set the speed by giving it a value of the animation time (defualt = <code>2s</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-progress</span> <span class="hljs-attr">indeterminate</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-progress</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-progress</span> <span class="hljs-attr">indeterminate</span>=<span class="hljs-string">"1s"</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-progress</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-progress</span> <span class="hljs-attr">indeterminate</span>=<span class="hljs-string">"4s"</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"linear-gradient(to right, var(--c_secondary) 0%, var(--c_primary) 100%)"</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-progress</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-progress indeterminate ></k-progress>
+          <br />
+          <k-progress indeterminate="1s" ></k-progress>
+          <br />
+          <k-progress indeterminate="4s" color="linear-gradient(to right, var(--c_secondary) 0%, var(--c_primary) 100%)" ></k-progress>
+        </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 Progress()</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>percentage<i>: string</i></code></h5>
+    <p>The progress percentage(s). Accepts values from <code>0</code> to <code>100</code>. Use pipe-delimited (<code>|</code>) values for multiple bars. Default is <code>25</code>.</p>
+
+    <h5><code>offset<i>: string</i></code></h5>
+    <p>The offset position for the bar(s). Use pipe-delimited (<code>|</code>) values to match the number of bars in <code>percentage</code>. Default is <code>0</code>.</p>
+
+    <h5><code>color<i>: string</i></code></h5>
+    <p>The fill color for the bar(s). Supports any CSS color value including hex, rgb, variables, and gradients. Use pipe-delimited (<code>|</code>) values for multiple bars. Default is <code>var(--c_primary)</code>.</p>
+
+    <h5><code>label<i>: boolean</i></code></h5>
+    <p>When present, displays the percentage value inside the progress bar.</p>
+
+    <h5><code>indeterminate<i>: string</i></code></h5>
+    <p>When present, creates an animated indeterminate progress bar. Optionally set the animation duration (e.g., <code>indeterminate="1s"</code>, <code>indeterminate="4s"</code>). Default duration is <code>2s</code>.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Progress.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/split.page.html

@@ -9,6 +9,7 @@
           <a href="#resizing">Resizing</a><br />
           <a href="#verticalSplit">Vertical Split</a><br />
           <a href="#persistentState">Persistent State</a><br />
+          <a href="#grip">Grip</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 />
@@ -59,11 +60,11 @@
     <h3>Sizes</h3>
     <p>Set the CSS Custom Property <code>--pane_1_size</code> to set the initial size of the first pane.</p>
     <p>Set the CSS Custom Property <code>--min_pane_size</code> to set the minimum size each pane can be.</p>
-    <p>Set the CSS Custom Property <code>--handle_width</code> to set the size of the handle (the draggable region between the panes).</p>
+    <p>Set the CSS Custom Property <code>--handle_width</code> to set the size of the handle (the draggable region between the panes), odd sizes are recommended so it can be centered on the border.</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-split</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"<br />    --pane_1_size: 100px;<br />    --min_pane_size: 100px;<br />    --handle_width: 20px;<br />    height: 10rem<br />  "</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>left<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>right<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"<br />    --pane_1_size: 100px;<br />    --min_pane_size: 100px;<br />    --handle_width: 19px;<br />    height: 10rem<br />  "</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>left<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>right<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -72,7 +73,7 @@
             style="
               --pane_1_size: 100px;
               --min_pane_size: 100px;
-              --handle_width: 20px;
+              --handle_width: 19px;
               height: 10rem
             "
             class="b"
@@ -141,6 +142,28 @@
       </div>
     </div>
 
+    <h3 id="grip"><a href="#grip" class="no-link">Grip</a></h3>
+    <p>Add the <code>grip</code> attribute to render a visual grip indicator centered on the divider handle, making it easier to identify the draggable area.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">grip</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b mb"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">grip</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"vertical"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 16rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Top Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Bottom Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-split grip style="height: 10rem" class="b mb">
+            <div>Left Pane Content</div>
+            <div slot="right">Right Pane Content</div>
+          </k-split>
+          <k-split grip direction="vertical" style="height: 16rem" class="b">
+            <div>Top Pane Content</div>
+            <div slot="right">Bottom Pane Content</div>
+          </k-split>
+        </k-card>
+      </div>
+    </div>
+
     <h2 id="jsRef">JavaScript Reference</h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -165,6 +188,8 @@
     <p>The direction of the split. Can be <code>"horizontal"</code> (default) or <code>"vertical"</code>. Syncs to <code>direction</code> attribute.</p>
     <h5><code>persistentId<i>: string</i></code></h5>
     <p>When set, the pane size is saved to <code>localStorage</code> on resize and restored on initialization. Must be unique per split instance. Syncs to <code>persistent-id</code> attribute.</p>
+    <h5><code>grip<i>: boolean</i></code></h5>
+    <p>When set, renders a visual grip indicator centered on the divider handle. Syncs to <code>grip</code> attribute.</p>
 
     <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
     <h5><code>--pane_1_size</code></h5>

package/docs-src/index.page.html

@@ -143,6 +143,12 @@
           <p class="tc-muted">Lightbox gallery for viewing images with zoom and navigation.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/progress.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Progress</h3>
+          <p class="tc-muted">A progress bar for loading states.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/resize.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Resize</h3>

package/docs-src/nav.fragment.html

@@ -88,6 +88,8 @@
           <k-filter-item filter-keywords="photo viewer photoviewer components"><a
               href="{{pathToRoot}}components/photo-viewer.html"
             >Photo Viewer<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="progress loading components"><a
+            href="{{pathToRoot}}components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="{{pathToRoot}}components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
@@ -264,6 +266,7 @@
         <a href="{{pathToRoot}}components/nav.html">Nav</a>
         <a href="{{pathToRoot}}components/nav-spacer.html">Nav Spacer</a>
         <a href="{{pathToRoot}}components/photo-viewer.html">Photo Viewer</a>
+        <a href="{{pathToRoot}}components/progress.html">Progress</a>
         <a href="{{pathToRoot}}components/resize.html">Resize</a>
         <a href="{{pathToRoot}}components/show-more.html">Show More</a>
         <a href="{{pathToRoot}}components/sortable.html">Sortable</a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.3.17",
+  "version": "0.4.1",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "build": "node scripts/build.js",
-    "docs": "npx kempo-server --root docs --config docs/prod.config.json",
+    "docs": "npx kempo-server --root docs --config docs/prod.config.json --port 8084",
     "dev": "npx kempo-server --root docs-src --port 8083",
     "icon": "node bin/icon.js",
     "geticon": "node bin/get_icon.js",

package/src/components/Progress.js

@@ -0,0 +1,148 @@
+import { html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+import { boolExists } from '../utils/propConverters.js';
+
+export default class Progress extends ShadowComponent {
+	static properties = {
+		percentage: { type: String },
+		offset: { type: String },
+		color: { type: String },
+		label: { type: Boolean, converter: boolExists },
+		indeterminate: { type: String, reflect: true }
+	};
+
+	constructor() {
+		super();
+		this.percentage = '25';
+		this.offset = '0';
+		this.color = 'var(--c_primary)';
+		this.indeterminate = null;
+	}
+	
+	/*
+		Public Members
+	*/
+	get bars(){
+		const percentages = (this.percentage||'25').split('|').map(p=>p.trim());
+		const offsets = (this.offset||0).split('|').map(o=>o.trim());
+		const colors = (this.color||'var(--c_primary)').split('|').map(c=>c.trim());
+		return percentages.map( (percentage, i) => {
+			let offset = offsets[0];
+			if(offsets.length > i) offset = offsets[i];
+			let color = colors[0];
+			if(colors.length > i) color = colors[i];
+			return {
+				percentage,
+				offset,
+				color
+			}
+		});
+	}
+
+	/*
+		Rendering
+	*/
+	render() {
+		const [{color}] = this.bars;
+		if(this.indeterminate !== null) return html`
+			<div id="bar1" class="bar indeterminate" style="background:${color};animation-duration:${this.indeterminate||'2s'}"></div>
+			<div id="bar2" class="bar indeterminate" style="background:${color};animation-duration:${this.indeterminate||'2s'}"></div>
+		`;
+		return html`${
+			this.bars.map(({
+				percentage,
+				offset,
+				color
+			}) => html`
+				<div 
+					class="bar"
+					style="left:${offset}%;width:${percentage}%;background:${color}"
+				>
+					${this.label?html`<div class="label">${percentage}%</div>`:''}
+				</div>
+			`)
+		}`;
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			--radius: 99999px;
+			
+			display: block;
+			height: 1rem;
+			width: 100%;
+			background-color: var(--c_border);
+			position: relative;
+			overflow: hidden;
+			color: var(--tc_on_primary);
+			font-size: 0.75rem;
+			border-radius: var(--radius);
+		}
+
+		.bar {
+			display: flex;
+			align-items: center;
+			height: 100%;
+			transition: width 0.3s ease;
+			position: absolute;
+			left: 0;
+			border-radius: var(--radius);
+		}
+		.label {
+			padding: 0 var(--spacer);
+		}
+
+		:host([indeterminate]) .bar {
+			width: 25%;
+			transition: none;
+		}
+		:host([indeterminate]) #bar1 {
+			animation-name: indeterminate-bar1;
+			animation-timing-function: linear;
+			animation-iteration-count: infinite;
+		}
+		:host([indeterminate]) #bar2 {
+			animation-name: indeterminate-bar2;
+			animation-timing-function: linear;
+			animation-iteration-count: infinite;
+		}
+
+		@keyframes indeterminate-bar1 {
+			0% {
+				left: 0%;
+			}
+			100% {
+				left: 100%;
+			}
+		}
+		@keyframes indeterminate-bar2 {
+			0% {
+				left: 0%;
+				opacity: 1;
+			}
+			74% {
+				opacity: 1;
+			}
+			75% {
+				left: 75%;
+				opacity: 0;
+			}
+			76% {
+				left: -24%;
+				opacity: 0;
+			}
+			76.5% {
+				opacity: 1;
+			}
+			100% {
+				left: 0%;
+				opacity: 1;
+			}
+		}
+	`;
+}
+
+customElements.define('k-progress', Progress);

package/src/components/Spinner.js

@@ -13,6 +13,25 @@ export default class Spinner extends ShadowComponent {
 		this.variant = 'spinner';
 	}
 
+	
+
+	/*
+		Rendering
+	*/
+	render() {
+		switch(this.variant) {
+			case 'dots':
+				return html`<div class="dots"><span></span><span></span><span></span></div>`;
+			case 'bars':
+				return html`<div class="bars"><span></span><span></span><span></span><span></span></div>`;
+			case 'pulse':
+				return html`<div class="pulse"></div>`;
+			case 'ring':
+				return html`<div class="ring"></div>`;
+			default:
+				return html`<div class="spinner"></div>`;
+		}
+	}
 	/*
 		Styles
 	*/
@@ -129,24 +148,6 @@ export default class Spinner extends ShadowComponent {
 			100% { transform: rotate(360deg); border-color: var(--spinner-color) transparent transparent transparent; }
 		}
 	`;
-
-	/*
-		Rendering
-	*/
-	render() {
-		switch(this.variant) {
-			case 'dots':
-				return html`<div class="dots"><span></span><span></span><span></span></div>`;
-			case 'bars':
-				return html`<div class="bars"><span></span><span></span><span></span><span></span></div>`;
-			case 'pulse':
-				return html`<div class="pulse"></div>`;
-			case 'ring':
-				return html`<div class="ring"></div>`;
-			default:
-				return html`<div class="spinner"></div>`;
-		}
-	}
 }
 
 customElements.define('k-spinner', Spinner);