kempo-ui 0.4.1 → 0.4.3

package/dist/components/Calendar.js

@@ -0,0 +1,170 @@
+import{html as e,css as t}from"../lit-all.min.js";import a from"./ShadowComponent.js";const i=["January","February","March","April","May","June","July","August","September","October","November","December"],s=["Su","Mo","Tu","We","Th","Fr","Sa"];export default class r extends a{static formAssociated=!0;static properties={value:{type:String,reflect:!0},name:{type:String,reflect:!0},mode:{type:String,reflect:!0},min:{type:String,reflect:!0},max:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},view:{state:!0},hoverDate:{state:!0}};constructor(){super(),this.internals=this.attachInternals(),this.value="",this.name="",this.mode="single",this.min="",this.max="",this.disabled=!1,this.required=!1;const e=new Date;this.view=`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}`,this.hoverDate=null}#e=!1;updated(e){if(super.updated(e),this.internals.setFormValue(this.value),this.required&&!this.value?this.internals.setValidity({valueMissing:!0},"Please select a date.",this.shadowRoot?.querySelector(".day")):this.internals.setValidity({}),e.has("value")&&void 0!==e.get("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0})),e.has("value")&&this.value&&!this.#e){const e=this.fromIso(this.value.split(",")[0]);if(e){const t=`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}`;t!==this.view&&(this.view=t)}}this.#e=!1}get isRange(){return"range"===this.mode}get viewYear(){return Number(this.view.split("-")[0])}get viewMonth(){return Number(this.view.split("-")[1])-1}get parsed(){if(!this.value)return this.isRange?{start:null,end:null}:{date:null};if(this.isRange){const[e,t]=this.value.split(",");return{start:e?this.fromIso(e):null,end:t?this.fromIso(t):null}}return{date:this.fromIso(this.value)}}toIso=e=>e?`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`:"";fromIso=e=>{if(!e)return null;const[t,a,i]=e.split("-").map(Number);return isNaN(t)||isNaN(a)||isNaN(i)?null:new Date(t,a-1,i)};isSameDay=(e,t)=>!(!e||!t)&&(e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate());isWithinRange=(e,t,a)=>{if(!t||!a||!e)return!1;const i=e.getTime();return i>t.getTime()&&i<a.getTime()};resolveDate=e=>{if(!e)return null;const t=String(e).toLowerCase();if("today"===t||"tomorrow"===t||"yesterday"===t){const e=new Date;return e.setHours(0,0,0,0),"tomorrow"===t&&e.setDate(e.getDate()+1),"yesterday"===t&&e.setDate(e.getDate()-1),e}return this.fromIso(e)};get minDate(){return this.resolveDate(this.min)||this.fromIso("1900-01-01")}get maxDate(){if(this.max)return this.resolveDate(this.max);const e=new Date;return new Date(e.getFullYear()+10,11,31)}isDisabledDate=e=>{if(!e)return!1;const t=this.minDate;if(t&&e<t)return!0;const a=this.maxDate;return!!(a&&e>a)};get availableYears(){const e=this.minDate?.getFullYear()??1900,t=this.maxDate?.getFullYear()??(new Date).getFullYear()+10,a=[];for(let i=e;i<=t;i++)a.push(i);return a}isMonthDisabled=(e,t)=>{const a=new Date(e,t+1,0),i=new Date(e,t,1),s=this.minDate,r=this.maxDate;return!!(s&&a<s)||!!(r&&i>r)};get weekGrid(){const e=this.viewYear,t=this.viewMonth,a=new Date(e,t,1).getDay(),i=new Date(e,t,1-a),s=[];for(let e=0;e<6;e++){const t=[];for(let a=0;a<7;a++){const s=new Date(i);s.setDate(i.getDate()+7*e+a),t.push(s)}s.push(t)}return s}get monthLabel(){return`${i[this.viewMonth]} ${this.viewYear}`}prevMonth=()=>{const e=new Date(this.viewYear,this.viewMonth-1,1);this.view=`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}`};nextMonth=()=>{const e=new Date(this.viewYear,this.viewMonth+1,1);this.view=`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}`};goToMonth=(e,t)=>{this.view=`${e}-${String(t+1).padStart(2,"0")}`};goToToday=()=>{const e=new Date;this.view=`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}`};handleDayClick=e=>{if(!this.disabled&&!this.isDisabledDate(e))if(this.#e=!0,this.isRange){const{start:t,end:a}=this.parsed;this.value=!t||a?this.toIso(e):e<t?`${this.toIso(e)},${this.toIso(t)}`:`${this.toIso(t)},${this.toIso(e)}`}else this.value=this.toIso(e)};handleDayHover=e=>{this.isRange&&(this.hoverDate=e)};handleMouseLeave=()=>{this.isRange&&(this.hoverDate=null)};handleMonthChange=e=>{this.goToMonth(this.viewYear,Number(e.target.value))};handleYearChange=e=>{this.goToMonth(Number(e.target.value),this.viewMonth)};render(){const t=new Date,a=this.parsed,r=a.date,n=a.start,o=a.end,l=this.isRange&&n&&!o&&this.hoverDate?this.hoverDate:o,d=this.isRange&&n&&l&&n>l?l:n,h=this.isRange&&n&&l&&n>l?n:l;return e`
+      <div class="header">
+        <select
+          class="month-select"
+          aria-label="Month"
+          ?disabled=${this.disabled}
+          @change=${this.handleMonthChange}
+        >
+          ${i.map((t,a)=>e`
+            <option
+              value=${a}
+              ?selected=${a===this.viewMonth}
+              ?disabled=${this.isMonthDisabled(this.viewYear,a)}
+            >${t}</option>
+          `)}
+        </select>
+        <select
+          class="year-select"
+          aria-label="Year"
+          ?disabled=${this.disabled}
+          @change=${this.handleYearChange}
+        >
+          ${this.availableYears.map(t=>e`
+            <option value=${t} ?selected=${t===this.viewYear}>${t}</option>
+          `)}
+        </select>
+      </div>
+      <div class="grid" @mouseleave=${this.handleMouseLeave}>
+        <div class="row head">
+          ${s.map(t=>e`<div class="dow">${t}</div>`)}
+        </div>
+        ${this.weekGrid.map(a=>e`
+          <div class="row">
+            ${a.map(a=>{const i=a.getMonth()!==this.viewMonth,s=this.isSameDay(a,t),n=!this.isRange&&this.isSameDay(a,r),l=this.isRange&&this.isSameDay(a,d),g=this.isRange&&this.isSameDay(a,h),u=this.isRange&&this.isWithinRange(a,d,h),c=this.isDisabledDate(a),v=["day",i?"outside":"",s?"today":"",n?"selected":"",l?"range-start":"",g&&!l?"range-end":"",u?"in-range":"",this.isRange&&!o&&(l||g||u)&&!n?"preview":"",c?"disabled":""].filter(Boolean).join(" ");return e`
+                <button
+                  type="button"
+                  class="no-btn ${v}"
+                  ?disabled=${c||this.disabled}
+                  aria-selected=${n||l||g?"true":"false"}
+                  @click=${()=>this.handleDayClick(a)}
+                  @mouseenter=${()=>this.handleDayHover(a)}
+                >${a.getDate()}</button>
+              `})}
+          </div>
+        `)}
+      </div>
+    `}static styles=t`
+    :host {
+      --day_size: 2rem;
+      --day_radius: var(--radius);
+      --day_bg__selected: var(--c_primary);
+      --day_tc__selected: white;
+      --day_bg__range: var(--c_bg__alt);
+      --day_bg__hover: var(--c_bg__alt);
+
+      display: inline-block;
+      border: 1px solid var(--c_border);
+      border-radius: var(--radius);
+      padding: 0.5rem;
+      background: var(--c_bg);
+      user-select: none;
+    }
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.25rem;
+      margin-bottom: 0.25rem;
+    }
+    .month-select,
+    .year-select {
+      font-weight: 600;
+      width: auto;
+    }
+    .month-select {
+      flex: 1;
+    }
+    .grid {
+      display: flex;
+      flex-direction: column;
+    }
+    .row {
+      display: grid;
+      grid-template-columns: repeat(7, var(--day_size));
+    }
+    .row.head {
+      margin-bottom: 0.25rem;
+    }
+    .dow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      color: var(--tc_muted);
+      font-weight: 500;
+      height: var(--day_size);
+    }
+    .day {
+      appearance: none;
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: var(--day_radius);
+      width: var(--day_size);
+      height: var(--day_size);
+      cursor: pointer;
+      color: var(--tc);
+      font: inherit;
+      font-size: 0.875rem;
+      padding: 0;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: background var(--animation_ms), color var(--animation_ms);
+    }
+    .day:hover:not(:disabled):not(.selected):not(.range-start):not(.range-end) {
+      background: var(--day_bg__hover);
+    }
+    .day:focus-visible {
+      outline: none;
+      border-color: var(--c_primary);
+      box-shadow: var(--focus_shadow);
+      z-index: 1;
+    }
+    .day.outside {
+      color: var(--tc_muted);
+      opacity: 0.5;
+    }
+    .day.today {
+      font-weight: 700;
+      border-color: var(--c_primary);
+    }
+    .day.selected,
+    .day.in-range,
+    .day.range-start,
+    .day.range-end {
+      background: var(--day_bg__selected);
+      color: var(--day_tc__selected);
+      border-color: transparent;
+    }
+    .day.in-range {
+      border-radius: 0;
+    }
+    .day.range-start:not(.range-end) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .day.range-end:not(.range-start) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    .day.outside.in-range,
+    .day.outside.range-start,
+    .day.outside.range-end {
+      opacity: 0.6;
+    }
+    .day.preview.in-range,
+    .day.preview.range-start,
+    .day.preview.range-end {
+      opacity: 0.75;
+    }
+    .day:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+  `}customElements.define("k-calendar",r);

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/Time.js

@@ -0,0 +1,37 @@
+import{html as e,css as t}from"../lit-all.min.js";import i from"./ShadowComponent.js";export default class r extends i{static formAssociated=!0;static properties={value:{type:String,reflect:!0},name:{type:String,reflect:!0},increment:{type:Number,reflect:!0},military:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0}};constructor(){super(),this.internals=this.attachInternals(),this.value="",this.name="",this.increment=1,this.military=!1,this.disabled=!1,this.required=!1}updated(e){super.updated(e),this.internals.setFormValue(this.value),this.required&&!this.value?this.internals.setValidity({valueMissing:!0},"Please enter a time.",this.shadowRoot?.querySelector("input")):this.internals.setValidity({}),e.has("value")&&void 0!==e.get("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}get stepSeconds(){return 60*Math.max(1,Math.floor(this.increment||1))}roundToIncrement=e=>{if(!e)return"";const[t,i]=e.split(":");let r=Number(t),a=Number(i);if(isNaN(r)||isNaN(a))return e;const s=Math.max(1,Math.floor(this.increment||1));return a=Math.round(a/s)*s,a>=60&&(a-=60,r=(r+1)%24),`${String(r).padStart(2,"0")}:${String(a).padStart(2,"0")}`};handleNativeChange=e=>{this.disabled||(this.value=e.target.value||"")};handleBlur=e=>{if(this.disabled)return;const t=this.roundToIncrement(e.target.value);t!==this.value&&(this.value=t)};render(){return e`
+      <input
+        type="time"
+        .value=${this.value||""}
+        step=${this.stepSeconds}
+        lang=${this.military?"en-GB":"en-US"}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        @change=${this.handleNativeChange}
+        @blur=${this.handleBlur}
+      />
+    `}static styles=t`
+    :host {
+      display: inline-block;
+    }
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    input {
+      padding: var(--spacer_h) var(--spacer);
+      border: 1px solid var(--c_border);
+      border-radius: var(--radius);
+      background: var(--c_bg);
+      color: var(--tc);
+      font: inherit;
+      outline: none;
+      box-sizing: border-box;
+      transition: border-color var(--animation_ms);
+    }
+    input:focus {
+      border-color: var(--c_primary);
+    }
+    input::-webkit-calendar-picker-indicator {
+      display: none;
+    }
+  `}customElements.define("k-time",r);

package/docs/components/accordion.html

@@ -62,6 +62,9 @@
               href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a
               href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="calendar date picker range month day components"><a
+              href="../components/calendar.html"
+            >Calendar<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a
               href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
@@ -111,6 +114,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>
@@ -172,6 +178,9 @@
           <k-filter-item filter-keywords="theme switcher dark light components"><a
               href="../components/theme-switcher.html"
             >Theme Switcher<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="time picker clock hour minute form components"><a
+              href="../components/time.html"
+            >Time<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="timestamp date time components"><a
               href="../components/timestamp.html"
             >Timestamp<br><small>Component</small></a></k-filter-item>
@@ -266,6 +275,7 @@
         <h3>Components</h3>
         <a href="../components/accordion.html">Accordion</a>
         <a href="../components/aside.html">Aside</a>
+        <a href="../components/calendar.html">Calendar</a>
         <a href="../components/card.html">Card</a>
         <a href="../components/code-editor.html">Code Editor</a>
         <a href="../components/combobox.html">Combobox</a>
@@ -285,6 +295,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>
@@ -293,6 +304,7 @@
         <a href="../components/tags.html">Tags</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
+        <a href="../components/time.html">Time</a>
         <a href="../components/timestamp.html">Timestamp</a>
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>

package/docs/components/aside.html

@@ -62,6 +62,9 @@
               href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a
               href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="calendar date picker range month day components"><a
+              href="../components/calendar.html"
+            >Calendar<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a
               href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
@@ -111,6 +114,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>
@@ -172,6 +178,9 @@
           <k-filter-item filter-keywords="theme switcher dark light components"><a
               href="../components/theme-switcher.html"
             >Theme Switcher<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="time picker clock hour minute form components"><a
+              href="../components/time.html"
+            >Time<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="timestamp date time components"><a
               href="../components/timestamp.html"
             >Timestamp<br><small>Component</small></a></k-filter-item>
@@ -266,6 +275,7 @@
         <h3>Components</h3>
         <a href="../components/accordion.html">Accordion</a>
         <a href="../components/aside.html">Aside</a>
+        <a href="../components/calendar.html">Calendar</a>
         <a href="../components/card.html">Card</a>
         <a href="../components/code-editor.html">Code Editor</a>
         <a href="../components/combobox.html">Combobox</a>
@@ -285,6 +295,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>
@@ -293,6 +304,7 @@
         <a href="../components/tags.html">Tags</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
+        <a href="../components/time.html">Time</a>
         <a href="../components/timestamp.html">Timestamp</a>
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>