kempo-ui 0.3.17 → 0.4.1

package/dist/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/dist/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/dist/components/Split.js

@@ -1,7 +1,19 @@
-import{html as e,css as t}from"../lit-all.min.js";import i from"./ShadowComponent.js";import s from"../utils/drag.js";export default class r extends i{static properties={resizing:{type:Boolean,reflect:!0},stacked:{type:Boolean,reflect:!0},stackWidth:{type:Number,attribute:"stack-width"},direction:{type:String,reflect:!0},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.resizing=!1,this.stacked=!1,this.stackWidth=0,this.direction="horizontal",this.persistentId=null,this.dragStartSize=0,this.dragCleanup=()=>{},this.resizeObserver=null}firstUpdated(){if(super.firstUpdated(),this.setupDragHandler(),this.setupResizeObserver(),this.persistentId&&window?.localStorage){const e=window.localStorage.getItem(`split-persistent-id-${this.persistentId}`);e&&this.setSize(e)}}disconnectedCallback(){super.disconnectedCallback(),this.dragCleanup(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}handleDragStart=()=>{this.resizing=!0,this.dragStartSize=Math.round(this.shadowRoot.getElementById("pane-1").getBoundingClientRect()["vertical"===this.direction?"height":"width"]),this.dispatchEvent(new CustomEvent("resizestart",{detail:{startSize:this.dragStartSize},bubbles:!0}))};handleDrag=({x:e,y:t})=>{const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.dispatchEvent(new CustomEvent("resize",{detail:{size:s},bubbles:!0}))};handleDragEnd=({x:e,y:t})=>{this.resizing=!1;const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.persistentId&&window?.localStorage&&window.localStorage.setItem(`split-persistent-id-${this.persistentId}`,s),this.dispatchEvent(new CustomEvent("resizeend",{detail:{size:s},bubbles:!0}))};setSize(e){this.style.setProperty("--pane_1_size",e)}setupDragHandler(){const e=this.shadowRoot.getElementById("divider-handle");e&&(this.dragCleanup=s({element:e,callback:this.handleDrag,startCallback:this.handleDragStart,endCallback:this.handleDragEnd}))}setupResizeObserver(){this.resizeObserver=new ResizeObserver(e=>{for(const t of e){const e=t.contentRect.width;this.stacked=e<=this.stackWidth}}),this.resizeObserver.observe(this)}static styles=t`
+import{html as e,css as t}from"../lit-all.min.js";import i from"./ShadowComponent.js";import s from"../utils/drag.js";import{boolExists as r}from"../utils/propConverters.js";export default class d extends i{static properties={resizing:{type:Boolean,reflect:!0},stacked:{type:Boolean,reflect:!0},stackWidth:{type:Number,attribute:"stack-width"},direction:{type:String,reflect:!0},persistentId:{type:String,reflect:!0,attribute:"persistent-id"},grip:{type:Boolean,reflect:!0,converter:r}};constructor(){super(),this.resizing=!1,this.stacked=!1,this.stackWidth=0,this.direction="horizontal",this.persistentId=null,this.grip=!1,this.dragStartSize=0,this.dragCleanup=()=>{},this.resizeObserver=null}firstUpdated(){if(super.firstUpdated(),this.grip){const e=document.createElement("div");e.style.cssText="position:absolute;visibility:hidden;width:var(--handle_width)",this.shadowRoot.appendChild(e);const t=e.offsetWidth;this.shadowRoot.removeChild(e);const i=t%2==0?t-1:t;this.style.setProperty("--handle_grip_width",`${i}px`)}if(this.setupDragHandler(),this.setupResizeObserver(),this.persistentId&&window?.localStorage){const e=window.localStorage.getItem(`split-persistent-id-${this.persistentId}`);e&&this.setSize(e)}}disconnectedCallback(){super.disconnectedCallback(),this.dragCleanup(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}handleDragStart=()=>{this.resizing=!0,this.dragStartSize=Math.round(this.shadowRoot.getElementById("pane-1").getBoundingClientRect()["vertical"===this.direction?"height":"width"]),this.dispatchEvent(new CustomEvent("resizestart",{detail:{startSize:this.dragStartSize},bubbles:!0}))};handleDrag=({x:e,y:t})=>{const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.dispatchEvent(new CustomEvent("resize",{detail:{size:s},bubbles:!0}))};handleDragEnd=({x:e,y:t})=>{this.resizing=!1;const i="vertical"===this.direction?t:e,s=`${this.dragStartSize+i}px`;this.setSize(s),this.persistentId&&window?.localStorage&&window.localStorage.setItem(`split-persistent-id-${this.persistentId}`,s),this.dispatchEvent(new CustomEvent("resizeend",{detail:{size:s},bubbles:!0}))};setSize(e){this.style.setProperty("--pane_1_size",e)}setupDragHandler(){const e=this.shadowRoot.getElementById("divider-handle");e&&(this.dragCleanup=s({element:e,callback:this.handleDrag,startCallback:this.handleDragStart,endCallback:this.handleDragEnd}))}setupResizeObserver(){this.resizeObserver=new ResizeObserver(e=>{for(const t of e){const e=t.contentRect.width;this.stacked=e<=this.stackWidth}}),this.resizeObserver.observe(this)}render(){return e`
+			<div id="pane-1" class="pane">
+				<slot></slot>
+			</div>
+			<div id="divider-handle">
+				<div id="divider-border">
+          ${this.grip?e`<div id="divider-grip"></div>`:""}
+        </div>
+			</div>
+			<div id="pane-2" class="pane">
+				<slot name="right"></slot>
+			</div>
+		`}static styles=t`
 		:host {
 			--pane_1_size: calc((100% - var(--handle_width)) / 2);
-			--handle_width: 0.5rem;
+			--handle_width: 7px;
 			--min_pane_size: 6rem;
 
 			height: 100%;
@@ -27,6 +39,7 @@ import{html as e,css as t}from"../lit-all.min.js";import i from"./ShadowComponen
 		}
 
 		#divider-handle {
+			position: relative;
 			display: flex;
 			flex-shrink: 0;
 			justify-content: center;
@@ -47,10 +60,21 @@ import{html as e,css as t}from"../lit-all.min.js";import i from"./ShadowComponen
 		}
 
 		#divider-border {
+			position: relative;
 			width: 1px;
 			height: 100%;
 			border-left: 1px solid var(--c_border);
 		}
+		#divider-grip {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			width: var(--handle_grip_width, var(--handle_width));
+			height: 2rem;
+			border-radius: 0.25rem;
+			background-color: var(--c_border);
+		}
 
 		#pane-2 {
 			flex: 1 1;
@@ -105,14 +129,8 @@ import{html as e,css as t}from"../lit-all.min.js";import i from"./ShadowComponen
 			border-left: none;
 			border-top: 1px solid var(--c_border);
 		}
-	`;render(){return e`
-			<div id="pane-1" class="pane">
-				<slot></slot>
-			</div>
-			<div id="divider-handle">
-				<div id="divider-border"></div>
-			</div>
-			<div id="pane-2" class="pane">
-				<slot name="right"></slot>
-			</div>
-		`}}customElements.define("k-split",r);
+		:host([direction="vertical"]) #divider-grip {
+			width: 2rem;
+			height: 0.5rem;
+		}
+	`}customElements.define("k-split",d);

package/docs/components/accordion.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/components/aside.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/components/card.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/components/code-editor.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/components/color-picker.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/components/combobox.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/components/content-slider.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/components/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/components/dialog.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/components/dropdown.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/components/filter-list.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/components/focus-capture.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/components/html-editor.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/components/hybrid-component.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/components/icon.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/components/import.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/components/light-component.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/components/nav-spacer.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/components/nav.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/components/photo-viewer.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>