@getflip/swirl-components 0.425.0 → 0.426.1

package/dist/cjs/wc-datepicker.cjs.entry.js

@@ -106,7 +106,9 @@ function getWeekDays(firstDayOfWeek, locale) {
     return [
       Intl.DateTimeFormat(locale, {
         weekday: 'short'
-      }).format(date),
+      })
+        .format(date)
+        .slice(0, 3),
       Intl.DateTimeFormat(locale, {
         weekday: 'long'
       }).format(date)
@@ -172,12 +174,96 @@ const WCDatepicker = class {
         this.showTodayButton = false;
         this.showYearStepper = false;
         this.startDate = getISODateString(new Date());
+        this.maxSearchDays = 365;
+        this.goToRangeStartOnSelect = true;
         this.init = () => {
             this.currentDate = this.startDate
                 ? removeTimezoneOffset(new Date(this.startDate))
                 : new Date();
             this.updateWeekdays();
         };
+        this.getAvailableDate = (date, direction) => {
+            let potentialDate;
+            let outOfRange = false;
+            switch (direction) {
+                case 'previousDay':
+                    potentialDate = getPreviousDay(date);
+                    break;
+                case 'nextDay':
+                    potentialDate = getNextDay(date);
+                    break;
+                case 'previousSameWeekDay':
+                    potentialDate = subDays(date, 7);
+                    break;
+                case 'nextSameWeekDay':
+                    potentialDate = addDays(date, 7);
+                    break;
+                case 'firstOfMonth':
+                    potentialDate = getFirstOfMonth(date);
+                    break;
+                case 'lastOfMonth':
+                    potentialDate = getLastOfMonth(date);
+                    break;
+                case 'previousMonth':
+                    potentialDate = getPreviousMonth(date);
+                    break;
+                case 'nextMonth':
+                    potentialDate = getNextMonth(date);
+                    break;
+                case 'previousYear':
+                    potentialDate = getPreviousYear(date);
+                    break;
+                case 'nextYear':
+                    potentialDate = getNextYear(date);
+                    break;
+            }
+            while (this.disableDate(potentialDate) && !outOfRange) {
+                switch (direction) {
+                    case 'previousDay':
+                    case 'lastOfMonth':
+                        potentialDate = getPreviousDay(potentialDate);
+                        break;
+                    case 'nextDay':
+                    case 'firstOfMonth':
+                    case 'previousMonth':
+                    case 'nextMonth':
+                    case 'previousYear':
+                    case 'nextYear':
+                        potentialDate = getNextDay(potentialDate);
+                        break;
+                    case 'previousSameWeekDay':
+                        potentialDate = subDays(potentialDate, 7);
+                        break;
+                    case 'nextSameWeekDay':
+                        potentialDate = addDays(potentialDate, 7);
+                        break;
+                }
+                switch (direction) {
+                    case 'firstOfMonth':
+                    case 'lastOfMonth':
+                    case 'previousYear':
+                    case 'nextYear':
+                        outOfRange = potentialDate.getMonth() !== date.getMonth();
+                        break;
+                    case 'previousMonth':
+                        outOfRange = potentialDate.getMonth() !== date.getMonth() - 1;
+                        break;
+                    case 'nextMonth':
+                        outOfRange = potentialDate.getMonth() !== date.getMonth() + 1;
+                        break;
+                    default:
+                        outOfRange = !isDateInRange(potentialDate, {
+                            from: subDays(date, this.maxSearchDays),
+                            to: addDays(date, this.maxSearchDays)
+                        });
+                        break;
+                }
+            }
+            if (outOfRange) {
+                return date;
+            }
+            return potentialDate;
+        };
         this.nextMonth = () => {
             this.updateCurrentDate(getNextMonth(this.currentDate));
         };
@@ -211,9 +297,12 @@ const WCDatepicker = class {
         };
         this.onMonthSelect = (event) => {
             const month = +event.target.value - 1;
-            const date = new Date(this.currentDate);
-            date.setMonth(month);
-            this.updateCurrentDate(date);
+            const currentDay = this.currentDate.getDate();
+            const targetDate = new Date(this.currentDate.getFullYear(), month, 1);
+            const lastDayOfTargetMonth = getLastOfMonth(targetDate).getDate();
+            const clampedDay = Math.min(currentDay, lastDayOfTargetMonth);
+            const updatedDate = new Date(this.currentDate.getFullYear(), month, clampedDay);
+            this.updateCurrentDate(updatedDate);
         };
         this.onYearSelect = (event) => {
             let year = +event.target.value;
@@ -230,9 +319,15 @@ const WCDatepicker = class {
                 year = 9999;
                 input.value = String(year);
             }
-            const date = new Date(this.currentDate);
-            date.setFullYear(year);
-            this.updateCurrentDate(date);
+            const currentDay = this.currentDate.getDate();
+            const currentMonth = this.currentDate.getMonth();
+            const targetDate = new Date();
+            targetDate.setFullYear(year, currentMonth, 1);
+            const lastDayOfTargetMonth = getLastOfMonth(targetDate).getDate();
+            const clampedDay = Math.min(currentDay, lastDayOfTargetMonth);
+            const updatedDate = new Date();
+            updatedDate.setFullYear(year, currentMonth, clampedDay);
+            this.updateCurrentDate(updatedDate);
         };
         this.onKeyDown = (event) => {
             if (this.disabled) {
@@ -240,45 +335,45 @@ const WCDatepicker = class {
             }
             if (event.code === 'ArrowLeft') {
                 event.preventDefault();
-                this.updateCurrentDate(getPreviousDay(this.currentDate), true);
+                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousDay'), true);
             }
             else if (event.code === 'ArrowRight') {
                 event.preventDefault();
-                this.updateCurrentDate(getNextDay(this.currentDate), true);
+                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextDay'), true);
             }
             else if (event.code === 'ArrowUp') {
                 event.preventDefault();
-                this.updateCurrentDate(subDays(this.currentDate, 7), true);
+                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousSameWeekDay'), true);
             }
             else if (event.code === 'ArrowDown') {
                 event.preventDefault();
-                this.updateCurrentDate(addDays(this.currentDate, 7), true);
+                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextSameWeekDay'), true);
             }
             else if (event.code === 'PageUp') {
                 event.preventDefault();
                 if (event.shiftKey) {
-                    this.updateCurrentDate(getPreviousYear(this.currentDate), true);
+                    this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousYear'), true);
                 }
                 else {
-                    this.updateCurrentDate(getPreviousMonth(this.currentDate), true);
+                    this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousMonth'), true);
                 }
             }
             else if (event.code === 'PageDown') {
                 event.preventDefault();
                 if (event.shiftKey) {
-                    this.updateCurrentDate(getNextYear(this.currentDate), true);
+                    this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextYear'), true);
                 }
                 else {
-                    this.updateCurrentDate(getNextMonth(this.currentDate), true);
+                    this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextMonth'), true);
                 }
             }
             else if (event.code === 'Home') {
                 event.preventDefault();
-                this.updateCurrentDate(getFirstOfMonth(this.currentDate), true);
+                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'firstOfMonth'), true);
             }
             else if (event.code === 'End') {
                 event.preventDefault();
-                this.updateCurrentDate(getLastOfMonth(this.currentDate), true);
+                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'lastOfMonth'), true);
             }
             else if (event.code === 'Space' || event.code === 'Enter') {
                 event.preventDefault();
@@ -318,13 +413,17 @@ const WCDatepicker = class {
             : new Date();
     }
     watchValue() {
-        if (Boolean(this.value)) {
-            if (Array.isArray(this.value) && this.value.length >= 1) {
-                this.currentDate = this.value[0];
-            }
-            else if (this.value instanceof Date) {
-                this.currentDate = this.value;
-            }
+        if (!Boolean(this.value)) {
+            return;
+        }
+        if (Array.isArray(this.value)) {
+            this.currentDate =
+                this.value.length > 1 && !this.goToRangeStartOnSelect
+                    ? this.value[1]
+                    : this.value[0];
+        }
+        else if (this.value instanceof Date) {
+            this.currentDate = this.value;
         }
     }
     componentDidRender() {
@@ -351,14 +450,36 @@ const WCDatepicker = class {
         return calendarRows;
     }
     getTitle() {
-        if (!Boolean(this.currentDate)) {
+        if (!Boolean(this.value)) {
             return;
         }
-        return Intl.DateTimeFormat(this.locale, {
-            day: 'numeric',
-            month: 'long',
-            year: 'numeric'
-        }).format(this.currentDate);
+        if (this.isRangeValue(this.value)) {
+            const startDate = Intl.DateTimeFormat(this.locale, {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric'
+            }).format(this.value[0]);
+            const endDate = this.value[1]
+                ? Intl.DateTimeFormat(this.locale, {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric'
+                }).format(this.value[1])
+                : undefined;
+            if (Boolean(endDate)) {
+                return `${startDate} - ${endDate}`;
+            }
+            else {
+                return startDate;
+            }
+        }
+        else {
+            return Intl.DateTimeFormat(this.locale, {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric'
+            }).format(this.value);
+        }
     }
     focusDate(date) {
         var _a;
@@ -374,7 +495,11 @@ const WCDatepicker = class {
         const monthChanged = month !== this.currentDate.getMonth() ||
             year !== this.currentDate.getFullYear();
         if (monthChanged) {
-            this.changeMonth.emit({ month: getMonth(date), year: getYear(date) });
+            this.changeMonth.emit({
+                month: getMonth(date),
+                year: getYear(date),
+                day: date.getDate()
+            });
             if (moveFocus) {
                 this.moveFocusAfterMonthChanged = true;
             }
@@ -419,7 +544,7 @@ const WCDatepicker = class {
         return (index.h(index.Host, null, index.h("div", { "aria-disabled": String(this.disabled), "aria-label": this.labels.picker, class: {
                 [this.getClassName()]: true,
                 [`${this.getClassName()}--disabled`]: this.disabled
-            }, role: "group" }, index.h("div", { class: this.getClassName('header') }, index.h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (index.h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), disabled: this.disabled, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "11 17 6 12 11 7" }), index.h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "15 18 9 12 15 6" })))), index.h("span", { class: this.getClassName('current-month') }, index.h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index$1) => (index.h("option", { key: month, selected: this.currentDate.getMonth() === index$1, value: index$1 + 1 }, month)))), index.h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), disabled: this.disabled, max: 9999, maxLength: 4, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (index.h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), disabled: this.disabled, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "13 17 18 12 13 7" }), index.h("polyline", { points: "6 17 11 12 6 7" }))))), index.h("div", { class: this.getClassName('body') }, index.h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, index.h("thead", { class: this.getClassName('calendar-header') }, index.h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (index.h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, index.h("span", null, weekday[0])))))), index.h("tbody", null, this.getCalendarRows().map((calendarRow) => {
+            }, role: "group" }, index.h("div", { class: this.getClassName('header') }, index.h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (index.h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), disabled: this.disabled, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "11 17 6 12 11 7" }), index.h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "15 18 9 12 15 6" })))), index.h("span", { class: this.getClassName('current-month') }, index.h("select", { title: this.labels.monthSelect, "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index$1) => (index.h("option", { key: month, selected: this.currentDate.getMonth() === index$1, value: index$1 + 1 }, month)))), index.h("input", { title: this.labels.yearSelect, "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), disabled: this.disabled, max: 9999, maxLength: 4, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (index.h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), disabled: this.disabled, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "13 17 18 12 13 7" }), index.h("polyline", { points: "6 17 11 12 6 7" }))))), index.h("div", { class: this.getClassName('body') }, index.h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, index.h("thead", { class: this.getClassName('calendar-header') }, index.h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (index.h("th", { "aria-label": weekday[1], abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, index.h("span", null, weekday[0])))))), index.h("tbody", null, this.getCalendarRows().map((calendarRow) => {
             const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
             return (index.h("tr", { class: this.getClassName('calendar-row'), key: rowKey }, calendarRow.map((day) => {
                 var _a, _b, _c, _d, _e;
@@ -464,11 +589,12 @@ const WCDatepicker = class {
                     : isToday
                         ? 'em'
                         : 'span';
-                return (index.h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) && !this.disabled
+                return (index.h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, "aria-current": isToday ? 'date' : isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) && !this.disabled
                         ? 0
                         : -1 }, index.h(Tag, { "aria-hidden": "true" }, day.getDate()), index.h("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
                     day: 'numeric',
-                    month: 'long'
+                    month: 'long',
+                    year: 'numeric'
                 }).format(day))));
             })));
         })))), showFooter && (index.h("div", { class: this.getClassName('footer') }, this.showTodayButton && (index.h("button", { class: this.getClassName('today-button'), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (index.h("button", { class: this.getClassName('clear-button'), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton)))))));

package/dist/collection/components/swirl-button/swirl-button.css

@@ -47,10 +47,13 @@
 .button:disabled,
   .button.button--disabled {
     color: var(--s-text-disabled);
-    background-color: var(--swirl-ghost-button-background-disabled);
     cursor: default;
   }
 
+.button:disabled:where(:not(.button--variant-ghost)), .button.button--disabled:where(:not(.button--variant-ghost)) {
+      background-color: var(--swirl-ghost-button-background-disabled);
+    }
+
 .button:disabled .button__icon, .button.button--disabled .button__icon {
       color: var(--s-icon-disabled);
     }
@@ -422,7 +425,8 @@
 
 .button--variant-translucent {
   color: var(--s-text-default);
-  outline: var(--s-border-width-default) solid var(--s-border-translucent-outline);
+  outline: var(--s-border-width-default) solid
+    var(--s-border-translucent-outline);
   outline-offset: calc(var(--s-border-width-default) * -1);
   background: var(--s-translucent-medium-default);
   box-shadow: var(--s-shadow-level-2);
@@ -452,7 +456,6 @@
       color: var(--s-icon-default);
     }
 
-
 .button--icon-position-end .button__icon {
     margin-right: calc(-1 * var(--s-space-4));
     margin-left: 0;

package/dist/collection/components/swirl-table/swirl-table.css

@@ -1,4 +1,6 @@
 :host {
+  --swirl-table-shadow-rgba: rgba(23, 23, 23, 0.2);
+
   position: relative;
   display: block;
 }
@@ -7,6 +9,10 @@
     box-sizing: border-box;
   }
 
+:host-context(html.theme-dark) {
+  --swirl-table-shadow-rgba: rgba(0, 0, 0, 0.2);
+}
+
 .table--keyboard-move:focus-within {
     --swirl-table-moving-row-border: var(--s-border-width-default) solid
       var(--s-border-highlight);
@@ -23,13 +29,14 @@
 }
 
 .table__container--scrolled {
-  --swirl-table-sticky-right-shadow: 4px 0 16px -4px rgba(23, 23, 23, 0.04),
-    2px 0 4px -2px rgba(23, 23, 23, 0.04);
+  --swirl-table-sticky-right-shadow: 4px 0 16px -4px var(--swirl-table-shadow-rgba),
+    2px 0 4px -2px var(--swirl-table-shadow-rgba);
 }
 
 .table__container--scrollable:not(.table__container--scrolled-to-end) {
-  --swirl-table-sticky-left-shadow: 0px 4px 16px 0px rgba(23, 23, 23, 0.04),
-    0px 1px 4px 0px rgba(23, 23, 23, 0.04);
+  --swirl-table-sticky-left-shadow: 0px 4px 16px 0px
+      var(--swirl-table-shadow-rgba),
+    0px 1px 4px 0px var(--swirl-table-shadow-rgba);
 }
 
 .table__table {