kempo-ui 0.4.1 → 0.4.3

package/docs-src/index.page.html

@@ -47,6 +47,12 @@
           <p class="tc-muted">Enhanced sidebar component with push and overlay modes.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/calendar.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Calendar</h3>
+          <p class="tc-muted">Month-grid date picker widget with single and range selection modes.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/card.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Card</h3>
@@ -161,6 +167,12 @@
           <p class="tc-muted">Truncate long content with a "show more" button to expand.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/slider.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Slider</h3>
+          <p class="tc-muted">Range input with configurable min, max, and discrete step snap points.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/sortable.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Sortable</h3>
@@ -209,6 +221,12 @@
           <p class="tc-muted">Toggle between light, dark, and auto theme modes.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/time.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Time</h3>
+          <p class="tc-muted">Time picker with 12/24-hour display, configurable minute increments, and form submission.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/timestamp.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Timestamp</h3>

package/docs-src/nav.fragment.html

@@ -46,6 +46,9 @@
               href="{{pathToRoot}}components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a
               href="{{pathToRoot}}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="{{pathToRoot}}components/calendar.html"
+            >Calendar<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a
               href="{{pathToRoot}}components/card.html">Card<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
@@ -95,6 +98,9 @@
           <k-filter-item filter-keywords="show more showmore components"><a
               href="{{pathToRoot}}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="{{pathToRoot}}components/slider.html"
+            >Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="{{pathToRoot}}components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
@@ -156,6 +162,9 @@
           <k-filter-item filter-keywords="theme switcher dark light components"><a
               href="{{pathToRoot}}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="{{pathToRoot}}components/time.html"
+            >Time<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="timestamp date time components"><a
               href="{{pathToRoot}}components/timestamp.html"
             >Timestamp<br><small>Component</small></a></k-filter-item>
@@ -250,6 +259,7 @@
         <h3>Components</h3>
         <a href="{{pathToRoot}}components/accordion.html">Accordion</a>
         <a href="{{pathToRoot}}components/aside.html">Aside</a>
+        <a href="{{pathToRoot}}components/calendar.html">Calendar</a>
         <a href="{{pathToRoot}}components/card.html">Card</a>
         <a href="{{pathToRoot}}components/code-editor.html">Code Editor</a>
         <a href="{{pathToRoot}}components/combobox.html">Combobox</a>
@@ -269,6 +279,7 @@
         <a href="{{pathToRoot}}components/progress.html">Progress</a>
         <a href="{{pathToRoot}}components/resize.html">Resize</a>
         <a href="{{pathToRoot}}components/show-more.html">Show More</a>
+        <a href="{{pathToRoot}}components/slider.html">Slider</a>
         <a href="{{pathToRoot}}components/sortable.html">Sortable</a>
         <a href="{{pathToRoot}}components/spinner.html">Spinner</a>
         <a href="{{pathToRoot}}components/split.html">Split</a>
@@ -277,6 +288,7 @@
         <a href="{{pathToRoot}}components/tags.html">Tags</a>
         <a href="{{pathToRoot}}components/theme-select.html">Theme Select</a>
         <a href="{{pathToRoot}}components/theme-switcher.html">Theme Switcher</a>
+        <a href="{{pathToRoot}}components/time.html">Time</a>
         <a href="{{pathToRoot}}components/timestamp.html">Timestamp</a>
         <a href="{{pathToRoot}}components/toast.html">Toast</a>
         <a href="{{pathToRoot}}components/toggle.html">Toggle</a>

package/llms.txt

@@ -54,6 +54,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 |-----------|------|-------------|------|
 | `<k-accordion>` `<k-accordion-header>` `<k-accordion-panel>` | `Accordion.js` | Collapsible panel groups; `for-panel` attribute links headers to panels | [accordion.html](https://dustinpoissant.github.io/kempo-ui/components/accordion.html) |
 | `<k-aside>` `<k-aside-item>` `<k-aside-label>` `<k-aside-menu>` `<k-aside-spacer>` `<k-aside-toggle>` | `Aside.js` | Sidebar/drawer; `main="push"` or `main="overlay"`, `side="left|right"` | [aside.html](https://dustinpoissant.github.io/kempo-ui/components/aside.html) |
+| `<k-calendar>` | `Calendar.js` | Inline month-grid date picker widget; `mode="single"` (default) or `mode="range"`; `value` is ISO `YYYY-MM-DD` (single) or comma-separated pair (range); `min`/`max` bounds; form-associated; fires `change` | [calendar.html](https://dustinpoissant.github.io/kempo-ui/components/calendar.html) |
 | `<k-card>` | `Card.js` | Bordered container; optional `label` attribute | [card.html](https://dustinpoissant.github.io/kempo-ui/components/card.html) |
 | `<k-code-editor>` | `CodeEditor.js` | Monaco-powered code editor; `value`, `language`, `controls` attributes; form-associated; theme-aware | [code-editor.html](https://dustinpoissant.github.io/kempo-ui/components/code-editor.html) |
 | `<k-color-picker>` | `ColorPicker.js` | Full color picker (hex, rgb, hsl, hsv, alpha); `value` property | [color-picker.html](https://dustinpoissant.github.io/kempo-ui/components/color-picker.html) |
@@ -73,6 +74,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-photo-viewer>` | `PhotoViewer.js` | Lightbox/gallery viewer | [photo-viewer.html](https://dustinpoissant.github.io/kempo-ui/components/photo-viewer.html) |
 | `<k-resize>` | `Resize.js` | Resizable pane with drag handle | [resize.html](https://dustinpoissant.github.io/kempo-ui/components/resize.html) |
 | `<k-show-more>` | `ShowMore.js` | Truncated content with expand toggle | [show-more.html](https://dustinpoissant.github.io/kempo-ui/components/show-more.html) |
+| `<k-slider>` | `Slider.js` | Slider with min, max, discrete step snap points, vertical orientation, and dual-handle range mode via comma-separated `value` (e.g. `"20,80"`); `format` attribute for value formatting (e.g. `"$0.00"`) applied to change events, form submission, and optional drag `tooltip`; form-associated; fires `change` | [slider.html](https://dustinpoissant.github.io/kempo-ui/components/slider.html) |
 | `<k-sortable>` `<k-sortable-item>` | `Sortable.js` | Drag-to-reorder list | [sortable.html](https://dustinpoissant.github.io/kempo-ui/components/sortable.html) |
 | `<k-spinner>` | `Spinner.js` | Loading indicator; `size` (xs/sm/md/lg/xl), `variant` (spinner/dots/bar) | [spinner.html](https://dustinpoissant.github.io/kempo-ui/components/spinner.html) |
 | `<k-split>` | `Split.js` | Resizable split panes | [split.html](https://dustinpoissant.github.io/kempo-ui/components/split.html) |
@@ -81,6 +83,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-tags>` `<k-tag>` | `Tags.js` | Tag input; add/remove tags; fires `change` | [tags.html](https://dustinpoissant.github.io/kempo-ui/components/tags.html) |
 | `<k-theme-select>` | `ThemeSelect.js` | Dropdown to pick a theme | [theme-select.html](https://dustinpoissant.github.io/kempo-ui/components/theme-select.html) |
 | `<k-theme-switcher>` | `ThemeSwitcher.js` | Theme switcher with segmented and toggle display modes | [theme-switcher.html](https://dustinpoissant.github.io/kempo-ui/components/theme-switcher.html) |
+| `<k-time>` | `Time.js` | Wraps native `<input type="time">` with segmented hour/minute/AM-PM editing; `value` is 24-hour `HH:MM`; `increment` attr sets minute step (arrow-key granularity); `military` attr forces 24-hour display via `lang="en-GB"`; form-associated; fires `change` | [time.html](https://dustinpoissant.github.io/kempo-ui/components/time.html) |
 | `<k-timestamp>` | `Timestamp.js` | Displays a `value` timestamp as human-readable relative time | [timestamp.html](https://dustinpoissant.github.io/kempo-ui/components/timestamp.html) |
 | `<k-toast>` `<k-toast-container>` | `Toast.js` | Toast notifications; use `<k-toast-container>` once in page, call `.addToast(options)` | [toast.html](https://dustinpoissant.github.io/kempo-ui/components/toast.html) |
 | `<k-toggle>` | `Toggle.js` | On/off toggle; `value` (Boolean, reflects); methods: `on()`, `off()`, `toggle()`; fires `change`, `on`, `off` | [toggle.html](https://dustinpoissant.github.io/kempo-ui/components/toggle.html) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Calendar.js

@@ -0,0 +1,473 @@
+import { html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+
+const MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const DAY_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+export default class Calendar extends ShadowComponent {
+  static formAssociated = true;
+
+  static properties = {
+    value: { type: String, reflect: true },
+    name: { type: String, reflect: true },
+    mode: { type: String, reflect: true },
+    min: { type: String, reflect: true },
+    max: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    view: { state: true },
+    hoverDate: { state: true }
+  };
+
+  /*
+    Lifecycle Callbacks
+  */
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+    this.value = '';
+    this.name = '';
+    this.mode = 'single';
+    this.min = '';
+    this.max = '';
+    this.disabled = false;
+    this.required = false;
+    const today = new Date();
+    this.view = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`;
+    this.hoverDate = null;
+  }
+
+  #skipViewSync = false;
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.internals.setFormValue(this.value);
+    if(this.required && !this.value){
+      this.internals.setValidity(
+        { valueMissing: true },
+        'Please select a date.',
+        this.shadowRoot?.querySelector('.day')
+      );
+    } else {
+      this.internals.setValidity({});
+    }
+    if(changedProperties.has('value') && changedProperties.get('value') !== undefined){
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: { value: this.value },
+        bubbles: true
+      }));
+    }
+    if(changedProperties.has('value') && this.value && !this.#skipViewSync){
+      const first = this.fromIso(this.value.split(',')[0]);
+      if(first){
+        const newView = `${first.getFullYear()}-${String(first.getMonth() + 1).padStart(2, '0')}`;
+        if(newView !== this.view){
+          this.view = newView;
+        }
+      }
+    }
+    this.#skipViewSync = false;
+  }
+
+  /*
+    Utility
+  */
+  get isRange() {
+    return this.mode === 'range';
+  }
+
+  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 [s, e] = this.value.split(',');
+      return {
+        start: s ? this.fromIso(s) : null,
+        end: e ? this.fromIso(e) : null
+      };
+    }
+    return { date: this.fromIso(this.value) };
+  }
+
+  toIso = (date) => {
+    if(!date) return '';
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+  };
+
+  fromIso = (str) => {
+    if(!str) return null;
+    const [y, m, d] = str.split('-').map(Number);
+    if(isNaN(y) || isNaN(m) || isNaN(d)) return null;
+    return new Date(y, m - 1, d);
+  };
+
+  isSameDay = (a, b) => {
+    if(!a || !b) return false;
+    return a.getFullYear() === b.getFullYear()
+      && a.getMonth() === b.getMonth()
+      && a.getDate() === b.getDate();
+  };
+
+  isWithinRange = (date, start, end) => {
+    if(!start || !end || !date) return false;
+    const t = date.getTime();
+    return t > start.getTime() && t < end.getTime();
+  };
+
+  resolveDate = (input) => {
+    if(!input) return null;
+    const key = String(input).toLowerCase();
+    if(key === 'today' || key === 'tomorrow' || key === 'yesterday'){
+      const d = new Date();
+      d.setHours(0, 0, 0, 0);
+      if(key === 'tomorrow') d.setDate(d.getDate() + 1);
+      if(key === 'yesterday') d.setDate(d.getDate() - 1);
+      return d;
+    }
+    return this.fromIso(input);
+  };
+
+  get minDate() {
+    return this.resolveDate(this.min) || this.fromIso('1900-01-01');
+  }
+
+  get maxDate() {
+    if(this.max) return this.resolveDate(this.max);
+    const now = new Date();
+    return new Date(now.getFullYear() + 10, 11, 31);
+  }
+
+  isDisabledDate = (date) => {
+    if(!date) return false;
+    const minDate = this.minDate;
+    if(minDate && date < minDate) return true;
+    const maxDate = this.maxDate;
+    if(maxDate && date > maxDate) return true;
+    return false;
+  };
+
+  get availableYears() {
+    const minY = this.minDate?.getFullYear() ?? 1900;
+    const maxY = this.maxDate?.getFullYear() ?? (new Date().getFullYear() + 10);
+    const years = [];
+    for(let y = minY; y <= maxY; y++) years.push(y);
+    return years;
+  }
+
+  isMonthDisabled = (year, month) => {
+    const lastDay = new Date(year, month + 1, 0);
+    const firstDay = new Date(year, month, 1);
+    const min = this.minDate;
+    const max = this.maxDate;
+    if(min && lastDay < min) return true;
+    if(max && firstDay > max) return true;
+    return false;
+  };
+
+  get weekGrid() {
+    const year = this.viewYear;
+    const month = this.viewMonth;
+    const first = new Date(year, month, 1);
+    const startOffset = first.getDay();
+    const gridStart = new Date(year, month, 1 - startOffset);
+    const weeks = [];
+    for(let w = 0; w < 6; w++){
+      const days = [];
+      for(let d = 0; d < 7; d++){
+        const date = new Date(gridStart);
+        date.setDate(gridStart.getDate() + w * 7 + d);
+        days.push(date);
+      }
+      weeks.push(days);
+    }
+    return weeks;
+  }
+
+  get monthLabel() {
+    return `${MONTH_NAMES[this.viewMonth]} ${this.viewYear}`;
+  }
+
+  /*
+    Navigation
+  */
+  prevMonth = () => {
+    const d = new Date(this.viewYear, this.viewMonth - 1, 1);
+    this.view = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+  };
+
+  nextMonth = () => {
+    const d = new Date(this.viewYear, this.viewMonth + 1, 1);
+    this.view = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+  };
+
+  goToMonth = (year, month) => {
+    this.view = `${year}-${String(month + 1).padStart(2, '0')}`;
+  };
+
+  goToToday = () => {
+    const today = new Date();
+    this.view = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`;
+  };
+
+  /*
+    Event Handlers
+  */
+  handleDayClick = (date) => {
+    if(this.disabled || this.isDisabledDate(date)) return;
+    this.#skipViewSync = true;
+    if(this.isRange){
+      const { start, end } = this.parsed;
+      if(!start || end){
+        this.value = this.toIso(date);
+      } else if(date < start){
+        this.value = `${this.toIso(date)},${this.toIso(start)}`;
+      } else {
+        this.value = `${this.toIso(start)},${this.toIso(date)}`;
+      }
+    } else {
+      this.value = this.toIso(date);
+    }
+  };
+
+  handleDayHover = (date) => {
+    if(this.isRange){
+      this.hoverDate = date;
+    }
+  };
+
+  handleMouseLeave = () => {
+    if(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);
+  };
+
+  /*
+    Rendering
+  */
+  render() {
+    const today = new Date();
+    const parsed = this.parsed;
+    const single = parsed.date;
+    const rawStart = parsed.start;
+    const rawEnd = parsed.end;
+    const previewEnd = this.isRange && rawStart && !rawEnd && this.hoverDate ? this.hoverDate : rawEnd;
+    const rangeStart = this.isRange && rawStart && previewEnd && rawStart > previewEnd ? previewEnd : rawStart;
+    const rangeEnd = this.isRange && rawStart && previewEnd && rawStart > previewEnd ? rawStart : previewEnd;
+
+    return html`
+      <div class="header">
+        <select
+          class="month-select"
+          aria-label="Month"
+          ?disabled=${this.disabled}
+          @change=${this.handleMonthChange}
+        >
+          ${MONTH_NAMES.map((name, i) => html`
+            <option
+              value=${i}
+              ?selected=${i === this.viewMonth}
+              ?disabled=${this.isMonthDisabled(this.viewYear, i)}
+            >${name}</option>
+          `)}
+        </select>
+        <select
+          class="year-select"
+          aria-label="Year"
+          ?disabled=${this.disabled}
+          @change=${this.handleYearChange}
+        >
+          ${this.availableYears.map(y => html`
+            <option value=${y} ?selected=${y === this.viewYear}>${y}</option>
+          `)}
+        </select>
+      </div>
+      <div class="grid" @mouseleave=${this.handleMouseLeave}>
+        <div class="row head">
+          ${DAY_LABELS.map(d => html`<div class="dow">${d}</div>`)}
+        </div>
+        ${this.weekGrid.map(week => html`
+          <div class="row">
+            ${week.map(date => {
+              const outside = date.getMonth() !== this.viewMonth;
+              const isToday = this.isSameDay(date, today);
+              const isSelected = !this.isRange && this.isSameDay(date, single);
+              const isStart = this.isRange && this.isSameDay(date, rangeStart);
+              const isEnd = this.isRange && this.isSameDay(date, rangeEnd);
+              const inRange = this.isRange && this.isWithinRange(date, rangeStart, rangeEnd);
+              const disabled = this.isDisabledDate(date);
+              const isPreview = this.isRange && !rawEnd && (isStart || isEnd || inRange) && !isSelected;
+              const classes = [
+                'day',
+                outside ? 'outside' : '',
+                isToday ? 'today' : '',
+                isSelected ? 'selected' : '',
+                isStart ? 'range-start' : '',
+                isEnd && !isStart ? 'range-end' : '',
+                inRange ? 'in-range' : '',
+                isPreview ? 'preview' : '',
+                disabled ? 'disabled' : ''
+              ].filter(Boolean).join(' ');
+              return html`
+                <button
+                  type="button"
+                  class="no-btn ${classes}"
+                  ?disabled=${disabled || this.disabled}
+                  aria-selected=${isSelected || isStart || isEnd ? 'true' : 'false'}
+                  @click=${() => this.handleDayClick(date)}
+                  @mouseenter=${() => this.handleDayHover(date)}
+                >${date.getDate()}</button>
+              `;
+            })}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  /*
+    Styles
+  */
+  static styles = css`
+    :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', Calendar);