kempo-ui 0.4.0 → 0.4.2

package/dist/components/Slider.js

@@ -0,0 +1,188 @@
+import{html as t,css as e}from"../lit-all.min.js";import i from"./ShadowComponent.js";export default class s extends i{static formAssociated=!0;static properties={value:{type:String,reflect:!0},name:{type:String,reflect:!0},min:{type:Number,reflect:!0},max:{type:Number,reflect:!0},steps:{type:String,reflect:!0},format:{type:String,reflect:!0},tooltip:{type:Boolean,reflect:!0},vertical:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0}};#t=null;constructor(){super(),this.internals=this.attachInternals(),this.value="0",this.name="",this.min=0,this.max=100,this.steps=null,this.format=null,this.tooltip=!1,this.vertical=!1,this.disabled=!1,this.tabIndex=0}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown)}get isRange(){return String(this.value).includes(",")}get formattedValue(){return this.format?this.isRange?`${this.formatValue(this.lower)},${this.formatValue(this.upper)}`:this.formatValue(this.lower):this.value}updated(t){super.updated(t),this.internals.setFormValue(this.formattedValue),t.has("value")&&void 0!==t.get("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.formattedValue},bubbles:!0}))}get stepValues(){return this.steps?this.steps.split(",").map(t=>Number(t.trim())).filter(t=>!isNaN(t)).sort((t,e)=>t-e):null}get lower(){const t=String(this.value).split(",");return Number(t[0])||0}get upper(){const t=String(this.value).split(",");return t.length>1?Number(t[1]):this.max}get percentage(){return(this.lower-this.min)/(this.max-this.min)*100}get upperPercentage(){return(this.upper-this.min)/(this.max-this.min)*100}formatValue=t=>{if(!this.format)return String(t);const e=this.format,i=e.match(/0([^0]?)0+/);if(!i)return e.replace("0",String(Math.round(t)));const s=i[0].indexOf(i[1])>0?i[1]:"",r=s?i[0].split(s)[1].length:0,a=t.toFixed(r);return e.replace(i[0],a)};snapToNearest=t=>{const e=this.stepValues;if(!e||0===e.length)return Math.min(this.max,Math.max(this.min,t));let i=e[0],s=Math.abs(t-i);for(let r=1;r<e.length;r++){const a=Math.abs(t-e[r]);a<s&&(i=e[r],s=a)}return i};ratioFromEvent=t=>{const e=this.shadowRoot.querySelector("#track").getBoundingClientRect();return this.vertical?Math.min(1,Math.max(0,1-(t.clientY-e.top)/e.height)):Math.min(1,Math.max(0,(t.clientX-e.left)/e.width))};valueFromEvent=t=>{const e=this.min+this.ratioFromEvent(t)*(this.max-this.min);return this.snapToNearest(e)};setValue=t=>{if(this.disabled)return;const e=Math.min(this.max,Math.max(this.min,t)),i=this.snapToNearest(e);if(this.isRange){if(i>this.upper)return;i!==this.lower&&(this.value=`${i},${this.upper}`)}else i!==this.lower&&(this.value=String(i))};setUpper=t=>{if(this.disabled||!this.isRange)return;const e=Math.min(this.max,Math.max(this.min,t)),i=this.snapToNearest(e);i<this.lower||i!==this.upper&&(this.value=`${this.lower},${i}`)};closestThumb=t=>{if(!this.isRange)return"lower";return Math.abs(t-this.lower)<=Math.abs(t-this.upper)?"lower":"upper"};stepIncrement=(t,e)=>{const i=this.stepValues;if(i&&i.length>0){const s=i.indexOf(t);if(e>0){if(s>=0&&s<i.length-1)return i[s+1];if(-1===s)return i.find(e=>e>t)??i[i.length-1]}else{if(s>0)return i[s-1];if(-1===s)return[...i].reverse().find(e=>e<t)??i[0]}return t}return t+e};handleTrackClick=t=>{if(this.disabled)return;const e=this.valueFromEvent(t);this.isRange&&"upper"===this.closestThumb(e)?this.setUpper(e):this.setValue(e)};handleThumbDown=(t,e)=>{if(this.disabled)return;e.preventDefault(),e.stopPropagation(),this.#t=t,this.requestUpdate();const i=t=>{const e=t.touches?t.touches[0]:t,i=this.valueFromEvent(e);"upper"===this.#t?this.setUpper(i):this.setValue(i)},s=()=>{this.#t=null,this.requestUpdate(),window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",s),window.removeEventListener("touchmove",i),window.removeEventListener("touchend",s)};window.addEventListener("mousemove",i),window.addEventListener("mouseup",s),window.addEventListener("touchmove",i),window.addEventListener("touchend",s)};handleKeyDown=t=>{if(this.disabled)return;const e=this.stepValues,i="ArrowRight"===t.key||"ArrowUp"===t.key,s="ArrowLeft"===t.key||"ArrowDown"===t.key;if(i||s){t.preventDefault();const e=i?1:-1;this.isRange&&"upper"===this.#t?this.setUpper(this.stepIncrement(this.upper,e)):this.setValue(this.stepIncrement(this.lower,e))}else"Home"===t.key?(t.preventDefault(),this.setValue(e?e[0]:this.min)):"End"===t.key&&(t.preventDefault(),this.isRange?this.setUpper(e?e[e.length-1]:this.max):this.setValue(e?e[e.length-1]:this.max))};renderHorizontal=()=>{const e=this.percentage,i=this.stepValues;if(this.isRange){const s=this.upperPercentage;return t`
+        <div id="track" @click=${this.handleTrackClick}>
+          <div id="fill" style="left:${e}%;width:${s-e}%"></div>
+          ${i?i.map(e=>{const i=(e-this.min)/(this.max-this.min)*100;return t`<div class="step-dot" style="left:${i}%"></div>`}):""}
+          <div
+            class="thumb${"lower"===this.#t?" active":""}"
+            style="left:${e}%"
+            @mousedown=${t=>this.handleThumbDown("lower",t)}
+            @touchstart=${t=>this.handleThumbDown("lower",t)}
+          >${this.tooltip&&"lower"===this.#t?t`<div class="tooltip">${this.formatValue(this.lower)}</div>`:""}</div>
+          <div
+            class="thumb${"upper"===this.#t?" active":""}"
+            style="left:${s}%"
+            @mousedown=${t=>this.handleThumbDown("upper",t)}
+            @touchstart=${t=>this.handleThumbDown("upper",t)}
+          >${this.tooltip&&"upper"===this.#t?t`<div class="tooltip">${this.formatValue(this.upper)}</div>`:""}</div>
+        </div>
+      `}return t`
+      <div id="track" @click=${this.handleTrackClick}>
+        <div id="fill" style="width:${e}%"></div>
+        ${i?i.map(e=>{const i=(e-this.min)/(this.max-this.min)*100;return t`<div class="step-dot" style="left:${i}%"></div>`}):""}
+        <div
+          class="thumb${"lower"===this.#t?" active":""}"
+          style="left:${e}%"
+          @mousedown=${t=>this.handleThumbDown("lower",t)}
+          @touchstart=${t=>this.handleThumbDown("lower",t)}
+        >${this.tooltip&&"lower"===this.#t?t`<div class="tooltip">${this.formatValue(this.lower)}</div>`:""}</div>
+      </div>
+    `};renderVertical=()=>{const e=this.percentage,i=this.stepValues;if(this.isRange){const s=this.upperPercentage;return t`
+        <div id="track" @click=${this.handleTrackClick}>
+          <div id="fill" style="bottom:${e}%;height:${s-e}%"></div>
+          ${i?i.map(e=>{const i=(e-this.min)/(this.max-this.min)*100;return t`<div class="step-dot" style="bottom:${i}%"></div>`}):""}
+          <div
+            class="thumb${"lower"===this.#t?" active":""}"
+            style="bottom:${e}%"
+            @mousedown=${t=>this.handleThumbDown("lower",t)}
+            @touchstart=${t=>this.handleThumbDown("lower",t)}
+          >${this.tooltip&&"lower"===this.#t?t`<div class="tooltip">${this.formatValue(this.lower)}</div>`:""}</div>
+          <div
+            class="thumb${"upper"===this.#t?" active":""}"
+            style="bottom:${s}%"
+            @mousedown=${t=>this.handleThumbDown("upper",t)}
+            @touchstart=${t=>this.handleThumbDown("upper",t)}
+          >${this.tooltip&&"upper"===this.#t?t`<div class="tooltip">${this.formatValue(this.upper)}</div>`:""}</div>
+        </div>
+      `}return t`
+      <div id="track" @click=${this.handleTrackClick}>
+        <div id="fill" style="height:${e}%"></div>
+        ${i?i.map(e=>{const i=(e-this.min)/(this.max-this.min)*100;return t`<div class="step-dot" style="bottom:${i}%"></div>`}):""}
+        <div
+          class="thumb${"lower"===this.#t?" active":""}"
+          style="bottom:${e}%"
+          @mousedown=${t=>this.handleThumbDown("lower",t)}
+          @touchstart=${t=>this.handleThumbDown("lower",t)}
+        >${this.tooltip&&"lower"===this.#t?t`<div class="tooltip">${this.formatValue(this.lower)}</div>`:""}</div>
+      </div>
+    `};render(){return t`
+      ${this.vertical?this.renderVertical():this.renderHorizontal()}
+      <div id="label"><slot></slot></div>
+    `}static styles=e`
+    :host {
+      --track_height: 6px;
+      --track_background: var(--c_border);
+      --track_radius: 99999px;
+      --fill_background: var(--c_primary);
+      --thumb_size: 20px;
+      --thumb_background: var(--c_primary);
+      --thumb_border: 2px solid white;
+      --thumb_shadow: var(--focus_shadow);
+      --step_dot_size: 8px;
+      --step_dot_background: var(--c_bg__alt);
+      --step_dot_border: 1px solid var(--c_border);
+      --vertical_height: 10rem;
+
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      cursor: pointer;
+      user-select: none;
+    }
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    :host([vertical]) {
+      flex-direction: column;
+      width: auto;
+      display: inline-flex;
+    }
+    #track {
+      flex: 1;
+      height: var(--track_height);
+      background: var(--track_background);
+      border-radius: var(--track_radius);
+      position: relative;
+    }
+    :host([vertical]) #track {
+      height: auto;
+      width: var(--track_height);
+      min-height: var(--vertical_height);
+    }
+    #fill {
+      background: var(--fill_background);
+      border-radius: var(--track_radius);
+      pointer-events: none;
+    }
+    :host(:not([vertical])) #fill {
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    :host([vertical]) #fill {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+    .thumb {
+      width: var(--thumb_size);
+      height: var(--thumb_size);
+      background: var(--thumb_background);
+      border: var(--thumb_border);
+      border-radius: 50%;
+      position: absolute;
+      box-shadow: 0 0 0 transparent;
+      cursor: grab;
+      transition: box-shadow 0.15s;
+      z-index: 1;
+    }
+    :host(:not([vertical])) .thumb {
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    :host([vertical]) .thumb {
+      left: 50%;
+      transform: translate(-50%, 50%);
+    }
+    .thumb:active,
+    .thumb.active {
+      cursor: grabbing;
+      box-shadow: var(--focus_shadow);
+    }
+    .tooltip {
+      position: absolute;
+      background: var(--c_text);
+      color: var(--c_bg);
+      padding: 0.15rem 0.4rem;
+      border-radius: 0.25rem;
+      font-size: 0.75rem;
+      white-space: nowrap;
+      pointer-events: none;
+      line-height: 1.2;
+    }
+    :host(:not([vertical])) .tooltip {
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    :host([vertical]) .tooltip {
+      right: calc(100% + 6px);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .step-dot {
+      width: var(--step_dot_size);
+      height: var(--step_dot_size);
+      background: var(--step_dot_background);
+      border: var(--step_dot_border);
+      border-radius: 50%;
+      position: absolute;
+      pointer-events: none;
+    }
+    :host(:not([vertical])) .step-dot {
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    :host([vertical]) .step-dot {
+      left: 50%;
+      transform: translate(-50%, 50%);
+    }
+    #label {
+      font-size: 0.875rem;
+    }
+    #label:empty {
+      display: none;
+    }
+  `}customElements.define("k-slider",s);

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

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/aside.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/card.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/code-editor.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/color-picker.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/combobox.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/content-slider.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/context.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/dialog.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/dropdown.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/filter-list.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/focus-capture.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/html-editor.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/hybrid-component.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/icon.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/import.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/light-component.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>

package/docs/components/nav-spacer.html

@@ -111,6 +111,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="slider range input step components"><a
+              href="../components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -285,6 +288,7 @@
         <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/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>