kempo-ui 0.3.16 → 0.4.0

package/docs/src/components/Progress.js

@@ -0,0 +1,86 @@
+import{html as t,css as e}from"../lit-all.min.js";import i from"./ShadowComponent.js";import{boolExists as r}from"../utils/propConverters.js";export default class a extends i{static properties={percentage:{type:String},offset:{type:String},color:{type:String},label:{type:Boolean,converter:r},indeterminate:{type:String,reflect:!0}};constructor(){super(),this.percentage="25",this.offset="0",this.color="var(--c_primary)",this.indeterminate=null}get bars(){const t=(this.percentage||"25").split("|").map(t=>t.trim()),e=(this.offset||0).split("|").map(t=>t.trim()),i=(this.color||"var(--c_primary)").split("|").map(t=>t.trim());return t.map((t,r)=>{let a=e[0];e.length>r&&(a=e[r]);let n=i[0];return i.length>r&&(n=i[r]),{percentage:t,offset:a,color:n}})}render(){const[{color:e}]=this.bars;return null!==this.indeterminate?t`
+			<div id="bar1" class="bar indeterminate" style="background:${e};animation-duration:${this.indeterminate||"2s"}"></div>
+			<div id="bar2" class="bar indeterminate" style="background:${e};animation-duration:${this.indeterminate||"2s"}"></div>
+		`:t`${this.bars.map(({percentage:e,offset:i,color:r})=>t`
+				<div 
+					class="bar"
+					style="left:${i}%;width:${e}%;background:${r}"
+				>
+					${this.label?t`<div class="label">${e}%</div>`:""}
+				</div>
+			`)}`}static styles=e`
+		: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",a);

package/docs/src/components/Spinner.js

@@ -1,4 +1,4 @@
-import{html as r,css as n}from"../lit-all.min.js";import s from"./ShadowComponent.js";export default class e extends s{static properties={size:{type:String,reflect:!0},variant:{type:String,reflect:!0}};constructor(){super(),this.size="md",this.variant="spinner"}static styles=n`
+import{html as r,css as n}from"../lit-all.min.js";import s from"./ShadowComponent.js";export default class e extends s{static properties={size:{type:String,reflect:!0},variant:{type:String,reflect:!0}};constructor(){super(),this.size="md",this.variant="spinner"}render(){switch(this.variant){case"dots":return r`<div class="dots"><span></span><span></span><span></span></div>`;case"bars":return r`<div class="bars"><span></span><span></span><span></span><span></span></div>`;case"pulse":return r`<div class="pulse"></div>`;case"ring":return r`<div class="ring"></div>`;default:return r`<div class="spinner"></div>`}}static styles=n`
 		:host {
 			--spinner-size: 2rem;
 			--spinner-border-width: 3px;
@@ -110,4 +110,4 @@ import{html as r,css as n}from"../lit-all.min.js";import s from"./ShadowComponen
 			75% { border-color: transparent transparent transparent var(--spinner-color); }
 			100% { transform: rotate(360deg); border-color: var(--spinner-color) transparent transparent transparent; }
 		}
-	`;render(){switch(this.variant){case"dots":return r`<div class="dots"><span></span><span></span><span></span></div>`;case"bars":return r`<div class="bars"><span></span><span></span><span></span><span></span></div>`;case"pulse":return r`<div class="pulse"></div>`;case"ring":return r`<div class="ring"></div>`;default:return r`<div class="spinner"></div>`}}}customElements.define("k-spinner",e);
+	`}customElements.define("k-spinner",e);

package/docs/utils/context.html

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

package/docs/utils/cookie.html

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

package/docs/utils/debounce.html

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

package/docs/utils/drag.html

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

package/docs/utils/elevation.html

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

package/docs/utils/formatTimestamp.html

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

package/docs/utils/object.html

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

package/docs/utils/propConverters.html

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

package/docs/utils/string.html

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

package/docs/utils/theme.html

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

package/docs/utils/toTitleCase.html

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

package/docs/utils/type.html

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

package/docs/utils/wait.html

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

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/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.16",
+  "version": "0.4.0",
   "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",
@@ -36,7 +36,7 @@
   "devDependencies": {
     "highlight.js": "^11.11.1",
     "js-beautify": "^1.15.4",
-    "kempo-server": "^3.0.3",
+    "kempo-server": "^3.1.0",
     "kempo-testing-framework": "^1.4.6",
     "terser": "^5.43.1"
   },