@nectary/components 0.43.0 → 0.44.0

package/accordion/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}::slotted(sinch-accordion-item){flex-shrink:1}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -69,9 +69,9 @@ defineCustomElement('sinch-accordion', class extends NectaryElement {
   };
   #onValueChange(csv) {
     if (this.multiple) {
-      const values = getCsvSet(csv);
+      const values = unpackCsv(csv);
       for (const $option of this.#$slot.assignedElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {

package/color-menu/index.js

@@ -3,7 +3,7 @@ import '../tooltip';
 import '../icons/check';
 import { getSwatchColorFg } from '../color-swatch/utils';
 import { lightColorNames, darkColorNames, vibrantColorNames } from '../theme/colors';
-import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, getCsvSet, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
+import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, unpackCsv, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
 const optionTemplateHTML = '<div class="option" role="option"><sinch-tooltip inverted class="tooltip"><div class="swatch-wrapper"><sinch-color-swatch class="swatch"></sinch-color-swatch><sinch-icon-check class="check"></sinch-icon-check></div></sinch-tooltip></div>';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox:empty{display:none}.option{padding:12px 6px;--sinch-color-icon:var(--sinch-color-stormy-500)}.swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}.swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid transparent;border-radius:50%;pointer-events:none}.option[data-selected]:not([data-checked]) .swatch-wrapper::after{border-color:var(--sinch-color-border-focus)}.check{display:none;position:absolute;left:4px;top:4px;pointer-events:none;--sinch-size-icon:24px}.option[data-checked] .check{display:block}</style><div id="listbox" role="presentation"></div>';
 import { getParentOption } from './utils';
@@ -137,7 +137,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       return;
     }
     this.#prevColorsValue = colorsValue;
-    const colorNames = getCsvSet(colorsValue ?? `${lightColorNames},${vibrantColorNames},${darkColorNames}`);
+    const colorNames = unpackCsv(colorsValue ?? `${lightColorNames},${vibrantColorNames},${darkColorNames}`);
     const fragment = document.createDocumentFragment();
     for (const color of colorNames) {
       if (color.length === 0) {

package/date-picker/index.js

@@ -6,9 +6,9 @@ import '../icons/keyboard-double-arrow-left';
 import '../icons/delete-outline';
 import '../icons/today';
 import '../text';
-import { defineCustomElement, getAttribute, getReactEventHandler, getRect, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-stormy-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}}.day.selected{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}.day:hover:not(:disabled):not(.selected){background-color:var(--sinch-color-snow-600)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" small><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button id="prev-month" small><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" small><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button id="next-year" small><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
-import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, today } from './utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-m);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-tropical-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}@supports not selector(:focus-visible){.day:focus{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}}.day.range{background-color:var(--sinch-color-tropical-100)}.day.selected{background-color:var(--sinch-color-tropical-500);color:var(--sinch-color-snow-100)}.day:hover:enabled:not(.selected){background-color:var(--sinch-color-tropical-200)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" small><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button id="prev-month" small><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" small><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button id="next-year" small><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
+import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, sortDates, today } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-date-picker', class extends NectaryElement {
@@ -16,7 +16,9 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   #$weeks;
   #$days;
   #$weekDayNames;
-  #date = null;
+  #uiDate = null;
+  #date1 = null;
+  #date2 = null;
   #minDate = null;
   #maxDate = null;
   #$prevMonth;
@@ -25,6 +27,8 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   #$nextYear;
   #$date;
   #monthNames;
+  #controller = null;
+  #isHoverSubscribed = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -48,25 +52,23 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     this.#$weekDayNames = Array.from(shadowRoot.querySelectorAll('#week-day-names > .week-day-name'));
   }
   connectedCallback() {
-    this.#$prevMonth.addEventListener('click', this.#onPrevMonthClick);
-    this.#$nextMonth.addEventListener('click', this.#onNextMonthClick);
-    this.#$prevYear.addEventListener('click', this.#onPrevYearClick);
-    this.#$nextYear.addEventListener('click', this.#onNextYearClick);
-    this.#$month.addEventListener('click', this.#onDateClick);
-    this.addEventListener('-change', this.#onChangeReactHandler);
-
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$prevMonth.addEventListener('click', this.#onPrevMonthClick, options);
+    this.#$nextMonth.addEventListener('click', this.#onNextMonthClick, options);
+    this.#$prevYear.addEventListener('click', this.#onPrevYearClick, options);
+    this.#$nextYear.addEventListener('click', this.#onNextYearClick, options);
+    this.#$month.addEventListener('click', this.#onDateClick, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
   }
-
   disconnectedCallback() {
-    this.#$prevMonth.removeEventListener('click', this.#onPrevMonthClick);
-    this.#$nextMonth.removeEventListener('click', this.#onNextMonthClick);
-    this.#$prevYear.removeEventListener('click', this.#onPrevYearClick);
-    this.#$nextYear.removeEventListener('click', this.#onNextYearClick);
-    this.#$month.removeEventListener('click', this.#onDateClick);
-    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.#controller.abort();
+    this.#unsubscribeRangeHover();
   }
   static get observedAttributes() {
-    return ['value', 'min', 'max', 'locale', 'prev-year-aria-label', 'next-year-aria-label', 'prev-month-aria-label', 'next-month-aria-label'];
+    return ['value', 'min', 'max', 'locale', 'range', 'prev-year-aria-label', 'next-year-aria-label', 'prev-month-aria-label', 'next-month-aria-label'];
   }
   attributeChangedCallback(name, prevValue, newVal) {
     if (newVal === prevValue) {
@@ -76,19 +78,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
       case 'value':
         {
           assertValue(newVal);
-          this.#date = newVal.length > 0 ? isoToDate(newVal) : today();
-          if (!isValidDate(this.#date)) {
-            this.#date = today();
-          }
-
-          if (this.#minDate !== null) {
-            clampMinDate(this.#date, this.#minDate);
-          }
-
-          if (this.#maxDate !== null) {
-            clampMaxDate(this.#date, this.#maxDate);
-          }
-          this.#render();
+          this.#onValueChange();
           break;
         }
       case 'min':
@@ -97,8 +87,8 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
           this.#minDate = isoToDate(newVal);
           assertDate(this.#minDate, name, newVal);
 
-          if (this.#date !== null) {
-            clampMinDate(this.#date, this.#minDate);
+          if (this.#uiDate !== null) {
+            clampMinDate(this.#uiDate, this.#minDate);
           }
           this.#render();
           break;
@@ -109,8 +99,8 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
           this.#maxDate = isoToDate(newVal);
           assertDate(this.#maxDate, name, newVal);
 
-          if (this.#date !== null) {
-            clampMaxDate(this.#date, this.#maxDate);
+          if (this.#uiDate !== null) {
+            clampMaxDate(this.#uiDate, this.#maxDate);
           }
           this.#render();
           break;
@@ -126,6 +116,16 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
           this.#render();
           break;
         }
+      case 'range':
+        {
+          const isRange = isAttrTrue(newVal);
+          if (isRange) {
+            this.#onValueChange();
+          } else {
+            this.#unsubscribeRangeHover();
+          }
+          break;
+        }
       case 'prev-year-aria-label':
         {
           updateAttribute(this.#$prevYear, 'aria-label', newVal);
@@ -155,7 +155,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     updateAttribute(this, 'locale', value);
   }
   get locale() {
-    return getAttribute(this, 'locale');
+    return getAttribute(this, 'locale', '');
   }
   set value(value) {
     updateAttribute(this, 'value', value);
@@ -175,6 +175,12 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   get max() {
     return getAttribute(this, 'max', '');
   }
+  set range(isRanged) {
+    updateBooleanAttribute(this, 'range', isRanged);
+  }
+  get range() {
+    return getBooleanAttribute(this, 'range');
+  }
   set prevMonthAriaLabel(value) {
     updateAttribute(this, 'prev-month-aria-label', value);
   }
@@ -217,50 +223,148 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   }
   #onPrevMonthClick = e => {
     e.stopPropagation();
-    decMonth(this.#date, this.#minDate);
+    decMonth(this.#uiDate, this.#minDate);
     this.#render();
   };
   #onNextMonthClick = e => {
     e.stopPropagation();
-    incMonth(this.#date, this.#maxDate);
+    incMonth(this.#uiDate, this.#maxDate);
     this.#render();
   };
   #onPrevYearClick = e => {
     e.stopPropagation();
-    decYear(this.#date, this.#minDate);
+    decYear(this.#uiDate, this.#minDate);
     this.#render();
   };
   #onNextYearClick = e => {
     e.stopPropagation();
-    incYear(this.#date, this.#maxDate);
+    incYear(this.#uiDate, this.#maxDate);
     this.#render();
   };
+  #onDateMouseEnter = e => {
+    if (this.#date1 !== null && this.#date2 === null) {
+      const hoverDateIso = e.target.getAttribute('data-date');
+      if (hoverDateIso === null) {
+        return;
+      }
+      const hoverDate = isoToDate(hoverDateIso);
+      const todayDate = today();
+      for (const week of this.#$days) {
+        for (const $day of week) {
+          if ($day.hasAttribute('disabled')) {
+            continue;
+          }
+          const dayDate = isoToDate($day.getAttribute('data-date'));
+          setClass($day, 'range', !areDatesEqual(todayDate, dayDate) && (isDateBetween(dayDate, this.#date1, hoverDate) || isDateBetween(dayDate, hoverDate, this.#date1)));
+        }
+      }
+    }
+  };
   #onDateClick = e => {
     e.stopPropagation();
     const dateIso = e.target.getAttribute('data-date');
     if (dateIso === null || dateIso.length === 0) {
       return;
     }
-    this.#dispatchChangeEvent(dateIso);
+    if (this.range) {
+      if (this.#date1 !== null && this.#date2 === null) {
+        const date2 = isoToDate(dateIso);
+        if (areDatesEqual(this.#date1, date2)) {
+          return;
+        }
+        const dateTuple = sortDates([this.#date1, date2]);
+        const value = packCsv(dateTuple.map(dateToIso));
+        this.#date1 = dateTuple[0];
+        this.#date2 = dateTuple[1];
+        this.#unsubscribeRangeHover();
+        this.#render();
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: value,
+          bubbles: true
+        }));
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail: value
+        }));
+        return;
+      }
+      this.#date1 = isoToDate(dateIso);
+      this.#date2 = null;
+      this.#subscribeRangeHover();
+      this.#render();
+      return;
+    }
+
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: dateIso,
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: dateIso
+    }));
   };
+  #onValueChange() {
+    const value = this.value;
+    this.#date1 = null;
+    this.#date2 = null;
+    if (this.range) {
+      const isoDates = unpackCsv(value);
+      if (isoDates.length === 2) {
+        const date1 = isoToDate(isoDates[0]);
+        const date2 = isoToDate(isoDates[1]);
+        if (isValidDate(date1) && isValidDate(date2)) {
+          this.#date1 = date1;
+          this.#date2 = date2;
+
+          if (this.#uiDate === null) {
+            this.#uiDate = cloneDate(this.#date2);
+          }
+        }
+      } else if (isoDates.length === 1) {
+        const date1 = isoToDate(isoDates[0]);
+        if (isValidDate(date1)) {
+          this.#uiDate = date1;
+        }
+      }
+    } else {
+      const valueDate = isoToDate(value);
+      if (isValidDate(valueDate)) {
+        this.#date1 = valueDate;
+        this.#uiDate = cloneDate(this.#date1);
+      }
+    }
+    if (this.#uiDate === null) {
+      this.#uiDate = today();
+    }
+
+    if (this.#minDate !== null) {
+      clampMinDate(this.#uiDate, this.#minDate);
+    }
+
+    if (this.#maxDate !== null) {
+      clampMaxDate(this.#uiDate, this.#maxDate);
+    }
+    this.#render();
+  }
   #render() {
-    if (this.#date === null || this.#minDate === null || this.#maxDate === null || this.locale === null) {
+    if (this.#uiDate === null || this.#minDate === null || this.#maxDate === null || this.locale === null) {
       return;
     }
-    const valueDate = isoToDate(this.value);
-    const todayDate = new Date();
-    const month = getCalendarMonth(this.#date);
-    updateBooleanAttribute(this.#$prevMonth, 'disabled', canGoPrevMonth(this.#date, this.#minDate) === false);
-    updateBooleanAttribute(this.#$nextMonth, 'disabled', canGoNextMonth(this.#date, this.#maxDate) === false);
-    updateBooleanAttribute(this.#$prevYear, 'disabled', canGoPrevYear(this.#date, this.#minDate) === false);
-    updateBooleanAttribute(this.#$nextYear, 'disabled', canGoNextYear(this.#date, this.#maxDate) === false);
-    this.#$date.textContent = `${this.#monthNames[this.#date.getMonth()]} ${this.#date.getFullYear()}`;
-    this.#$days.forEach(($week, wi) => {
+    const todayDate = today();
+    const month = getCalendarMonth(this.#uiDate);
+    updateBooleanAttribute(this.#$prevMonth, 'disabled', canGoPrevMonth(this.#uiDate, this.#minDate) === false);
+    updateBooleanAttribute(this.#$nextMonth, 'disabled', canGoNextMonth(this.#uiDate, this.#maxDate) === false);
+    updateBooleanAttribute(this.#$prevYear, 'disabled', canGoPrevYear(this.#uiDate, this.#minDate) === false);
+    updateBooleanAttribute(this.#$nextYear, 'disabled', canGoNextYear(this.#uiDate, this.#maxDate) === false);
+    this.#$date.textContent = `${this.#monthNames[this.#uiDate.getMonth()]} ${this.#uiDate.getFullYear()}`;
+    for (let wi = 0; wi < this.#$days.length; wi++) {
+      const $week = this.#$days[wi];
       let isEmptyWeek = true;
-      $week.forEach(($day, di) => {
+      for (let di = 0; di < $week.length; di++) {
+        const $day = $week[di];
         const week = month[wi];
         const day = week?.[di];
         $day.classList.remove('selected');
+        $day.classList.remove('range');
         $day.classList.remove('today');
         if (day == null) {
           $day.textContent = '';
@@ -278,25 +382,30 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
             $day.setAttribute('disabled', '');
             $day.setAttribute('aria-hidden', 'true');
           }
-          if (areDatesEqual(day, valueDate)) {
+          if (areDatesEqual(day, this.#date1) || areDatesEqual(day, this.#date2)) {
             $day.classList.add('selected');
           } else if (areDatesEqual(day, todayDate)) {
             $day.classList.add('today');
+          } else if (isDateBetween(day, this.#date1, this.#date2)) {
+            $day.classList.add('range');
           }
           isEmptyWeek = false;
         }
-      });
+      }
       setClass(this.#$weeks[wi], 'empty', isEmptyWeek);
-    });
+    }
   }
-  #dispatchChangeEvent(value) {
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: value,
-      bubbles: true
-    }));
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: value
-    }));
+  #subscribeRangeHover() {
+    if (!this.#isHoverSubscribed) {
+      this.#$month.addEventListener('mouseover', this.#onDateMouseEnter);
+      this.#isHoverSubscribed = true;
+    }
+  }
+  #unsubscribeRangeHover() {
+    if (this.#isHoverSubscribed) {
+      this.#$month.removeEventListener('mouseover', this.#onDateMouseEnter);
+      this.#isHoverSubscribed = false;
+    }
   }
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);

package/date-picker/types.d.ts

@@ -9,6 +9,8 @@ export declare type TSinchDatePickerElement = HTMLElement & {
     max: string;
     /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
     locale: string;
+    /** Date range mode */
+    range: boolean;
     /** Label that is used for a11y */
     prevYearAriaLabel: string;
     /** Label that is used for a11y */
@@ -32,6 +34,8 @@ export declare type TSinchDatePickerElement = HTMLElement & {
     setAttribute(name: 'max', value: string): void;
     /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
     setAttribute(name: 'locale', value: string): void;
+    /** Date range mode */
+    setAttribute(name: 'range', value: ''): void;
     /** Label that is used for a11y */
     setAttribute(name: 'prev-year-aria-label', value: string): void;
     /** Label that is used for a11y */
@@ -50,6 +54,8 @@ export declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerE
     max: string;
     /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
     locale: string;
+    /** Date range mode */
+    range?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
     /** Label that is used for a11y */

package/date-picker/utils.d.ts

@@ -3,9 +3,9 @@ declare type TCalendarOptions = {
 };
 declare type TMaybeDate = Date | null;
 export declare const getCalendarMonth: (date: Date, options?: TCalendarOptions) => TMaybeDate[][];
-export declare const today: () => Date;
 export declare const dateToIso: (date: Date) => string;
 export declare const isoToDate: (value: string) => Date;
+export declare const today: () => Date;
 export declare const getDayNames: (locale: string) => string[];
 export declare const getMonthNames: (locale: string) => string[];
 declare type TAssertMinMax = (value: string | null, attrName: string) => asserts value is string;
@@ -17,6 +17,7 @@ export declare const assertLocale: TAssertLocale;
 declare type TAssertDate = (value: any, attrName: string, attrValue: string) => asserts value is Date;
 export declare const isValidDate: (value: any) => value is Date;
 export declare const assertDate: TAssertDate;
+export declare const compareDates: (a: Date, b: Date) => number;
 export declare const clampMinDate: (date: Date, min: Date) => void;
 export declare const clampMaxDate: (date: Date, max: Date) => void;
 export declare const incMonth: (date: Date, max: Date) => void;
@@ -27,6 +28,8 @@ export declare const canGoPrevMonth: (date: Date, min: Date) => boolean;
 export declare const canGoNextMonth: (date: Date, max: Date) => boolean;
 export declare const canGoNextYear: (date: Date, max: Date) => boolean;
 export declare const canGoPrevYear: (date: Date, min: Date) => boolean;
-export declare const isDateBetween: (date: Date, min: Date, max: Date) => boolean;
-export declare const areDatesEqual: (a: Date, b: Date) => boolean;
+export declare const isDateBetween: (date: Date, min: Date | null, max: Date | null) => boolean;
+export declare const areDatesEqual: (a: Date, b: Date | null) => boolean;
+export declare const cloneDate: (date: Date) => Date;
+export declare const sortDates: (dateTuple: [Date, Date]) => [Date, Date];
 export {};

package/date-picker/utils.js

@@ -33,15 +33,15 @@ export const getCalendarMonth = (date, options) => {
   }
   return month;
 };
-export const today = () => {
-  return new Date();
-};
 export const dateToIso = date => {
   return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 };
 export const isoToDate = value => {
   return new Date(`${value.substring(0, 10)}T00:00:00`);
 };
+export const today = () => {
+  return isoToDate(dateToIso(new Date()));
+};
 export const getDayNames = locale => {
   const formatter = new Intl.DateTimeFormat(locale, {
     weekday: 'narrow',
@@ -85,7 +85,7 @@ export const assertDate = (value, attrName, attrValue) => {
     throw new Error(`sinch-date-picker: invalid "${attrName}" attribute: ${attrValue}`);
   }
 };
-const compareDates = (a, b) => {
+export const compareDates = (a, b) => {
   return a.getTime() - b.getTime();
 };
 export const clampMinDate = (date, min) => {
@@ -131,8 +131,23 @@ export const canGoPrevYear = (date, min) => {
   return compareDates(prevYear, min) >= 0;
 };
 export const isDateBetween = (date, min, max) => {
+  if (min === null || max === null) {
+    return false;
+  }
   return compareDates(date, min) >= 0 && compareDates(max, date) >= 0;
 };
 export const areDatesEqual = (a, b) => {
+  if (b === null) {
+    return false;
+  }
   return compareDates(a, b) === 0;
+};
+export const cloneDate = date => {
+  return new Date(date.getTime());
+};
+export const sortDates = dateTuple => {
+  if (compareDates(dateTuple[0], dateTuple[1]) > 0) {
+    return [dateTuple[1], dateTuple[0]];
+  }
+  return dateTuple;
 };

package/file-drop/types.d.ts

@@ -44,7 +44,7 @@ export declare type TSinchFileDropReact = TSinchElementReact<TSinchFileDropEleme
     /** Placeholder */
     placeholder: string;
     /** Change value handler */
-    'on-change'?: (e: CustomEvent<File[]>) => void;
+    'on-change': (e: CustomEvent<File[]>) => void;
     /** Invalid handler */
-    'on-invalid'?: (e: CustomEvent<TSinchFileDropInvalidType>) => void;
+    'on-invalid': (e: CustomEvent<TSinchFileDropInvalidType>) => void;
 };

package/file-picker/types.d.ts

@@ -28,5 +28,5 @@ export declare type TSinchFilePickerReact = TSinchElementReact<TSinchFilePickerE
     /** Change value handler */
     'on-change': (e: CustomEvent<File[]>) => void;
     /** Invalid handler */
-    'on-invalid'?: (e: CustomEvent<TSinchFilePickerInvalidType>) => void;
+    'on-invalid': (e: CustomEvent<TSinchFilePickerInvalidType>) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "files": [
     "theme.css",
     "theme/*.css",

package/segmented-icon-control/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -69,9 +69,9 @@ defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement
   };
   #onValueChange(csv) {
     if (this.multiple) {
-      const values = getCsvSet(csv);
+      const values = unpackCsv(csv);
       for (const $option of this.#$slot.assignedElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {

package/select-menu/index.js

@@ -1,4 +1,4 @@
-import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
+import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
@@ -159,9 +159,9 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   };
   #onValueChange(csv) {
     if (this.multiple) {
-      const values = getCsvSet(csv);
+      const values = unpackCsv(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {

package/stop-events/index.js

@@ -1,17 +1,17 @@
-import { defineCustomElement, getCsvSet } from '../utils';
+import { defineCustomElement, unpackCsv } from '../utils';
 defineCustomElement('sinch-stop-events', class extends HTMLElement {
   constructor() {
     super();
     this.style.display = 'contents';
   }
   connectedCallback() {
-    const events = getCsvSet(this.getAttribute('events'));
+    const events = unpackCsv(this.getAttribute('events'));
     for (const event of events) {
       this.addEventListener(event, this.#stopEvent);
     }
   }
   disconnectedCallback() {
-    const events = getCsvSet(this.getAttribute('events'));
+    const events = unpackCsv(this.getAttribute('events'));
     for (const event of events) {
       this.removeEventListener(event, this.#stopEvent);
     }

package/tile-control/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]:not([small=false])) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -91,9 +91,9 @@ defineCustomElement('sinch-tile-control', class extends NectaryElement {
   };
   #onValueChange(csv) {
     if (this.multiple) {
-      const values = getCsvSet(csv);
+      const values = unpackCsv(csv);
       for (const $option of this.#$slot.assignedElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {

package/utils/csv.d.ts

@@ -1,3 +1,5 @@
-export declare const getCsvSet: (acc: string) => Set<string>;
-export declare const updateCsv: (acc: string, value: string, setActive: boolean) => string;
+export declare const CSV_DELIMITER = ",";
+export declare const packCsv: (values: string[]) => string;
+export declare const unpackCsv: (csv: string) => string[];
+export declare const updateCsv: (csv: string, value: string, setActive: boolean) => string;
 export declare const getFirstCsvValue: (acc: string) => string | null;

package/utils/csv.js

@@ -1,21 +1,22 @@
-const unpackCsv = csv => {
-  return csv === '' ? [] : csv.split(',');
+export const CSV_DELIMITER = ',';
+export const packCsv = values => {
+  return values.join(CSV_DELIMITER);
 };
-const packCsv = values => {
-  return Array.from(values).join(',');
+export const unpackCsv = csv => {
+  return csv.length === 0 ? [] : csv.split(CSV_DELIMITER);
 };
-export const getCsvSet = acc => {
-  return new Set(unpackCsv(acc));
-};
-export const updateCsv = (acc, value, setActive) => {
-  const values = getCsvSet(acc);
+export const updateCsv = (csv, value, setActive) => {
+  const values = unpackCsv(csv);
+  const index = values.indexOf(value);
   if (setActive) {
-    values.add(value);
-  } else {
-    values.delete(value);
+    if (index < 0) {
+      values.push(value);
+    }
+  } else if (index >= 0) {
+    values.splice(index, 1);
   }
   return packCsv(values);
 };
 export const getFirstCsvValue = acc => {
-  return acc === '' ? null : unpackCsv(acc)[0];
+  return acc.length === 0 ? null : unpackCsv(acc)[0];
 };