@momentum-design/components 0.139.4 → 0.139.6

package/dist/components/calendar/calendar.component.d.ts

@@ -20,6 +20,7 @@ declare const Calendar_base: import("../../utils/mixins/index.types").Constructo
  * @tagname mdc-calendar
  * 
  * @dependency mdc-button
+ * @dependency mdc-screenreaderannouncer
  * 
  * @event date-selected - Fires when a date or date range is selected.
  * @event month-changed - Fires when the displayed month changes.
@@ -31,6 +32,8 @@ declare const Calendar_base: import("../../utils/mixins/index.types").Constructo
  * @cssproperty --mdc-calendar-day-today-border-color - Border color for today's date.
  * @cssproperty --mdc-calendar-day-hover-bg - Background color on hover.
  * @cssproperty --mdc-calendar-range-bg - Background color for days within a range.
+ * @cssproperty --mdc-calendar-range-preview-bg - Background color for a provisional range.
+ * @cssproperty --mdc-calendar-range-preview-text-color - Text color for days within a provisional range.
  * @cssproperty --mdc-calendar-day-outside-month-text-color - Text color for days outside the current month.
  * @cssproperty --mdc-calendar-day-disabled-text-color - Text color for disabled days.
  */
@@ -79,22 +82,31 @@ declare class Calendar extends Calendar_base {
      * Localized aria-label for the next month navigation button.
      */
     localeNextMonthLabel: string;
+    /**
+     * Localized announcement made after the range start date is selected.
+     */
+    localeRangeStartSelectedLabel: string;
     private displayMonth;
     private displayYear;
     private focusedDate;
     private gridHasFocus;
     private rangeSelectionPhase;
+    private hoveredDate;
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private initializeDisplay;
+    /** @internal */
+    cancelRangeSelection(value: string, endValue: string): void;
     private get calendarGrid();
     private getSelectedDates;
-    private getRangeStart;
-    private getRangeEnd;
+    private get previewEndDate();
+    private get isPreviewingRange();
+    private getDisplayedRange;
     private canNavigatePrev;
     private canNavigateNext;
     private navigateMonth;
     private handleDayClick;
+    private handleDayPointerEnter;
     private selectDate;
     private dispatchDateSelected;
     private handleGridKeydown;
@@ -103,6 +115,7 @@ declare class Calendar extends Calendar_base {
     private renderDay;
     private handleGridFocusIn;
     private handleGridFocusOut;
+    private handleGridPointerLeave;
     private renderGrid;
     private isDateDisabled;
     private isTodayDisabled;

package/dist/components/calendar/calendar.component.js

@@ -23,6 +23,7 @@ import { formatDateRangeForDisplay, generateCalendarGrid, getDatesInRange, getMo
  * @tagname mdc-calendar
  *
  * @dependency mdc-button
+ * @dependency mdc-screenreaderannouncer
  *
  * @event date-selected - Fires when a date or date range is selected.
  * @event month-changed - Fires when the displayed month changes.
@@ -34,6 +35,8 @@ import { formatDateRangeForDisplay, generateCalendarGrid, getDatesInRange, getMo
  * @cssproperty --mdc-calendar-day-today-border-color - Border color for today's date.
  * @cssproperty --mdc-calendar-day-hover-bg - Background color on hover.
  * @cssproperty --mdc-calendar-range-bg - Background color for days within a range.
+ * @cssproperty --mdc-calendar-range-preview-bg - Background color for a provisional range.
+ * @cssproperty --mdc-calendar-range-preview-text-color - Text color for days within a provisional range.
  * @cssproperty --mdc-calendar-day-outside-month-text-color - Text color for days outside the current month.
  * @cssproperty --mdc-calendar-day-disabled-text-color - Text color for disabled days.
  */
@@ -76,11 +79,16 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
          * Localized aria-label for the next month navigation button.
          */
         this.localeNextMonthLabel = '';
+        /**
+         * Localized announcement made after the range start date is selected.
+         */
+        this.localeRangeStartSelectedLabel = '';
         this.displayMonth = new Date().getMonth() + 1;
         this.displayYear = new Date().getFullYear();
         this.focusedDate = '';
         this.gridHasFocus = false;
         this.rangeSelectionPhase = 'start';
+        this.hoveredDate = '';
     }
     connectedCallback() {
         super.connectedCallback();
@@ -90,6 +98,7 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
         super.willUpdate(changedProperties);
         if (changedProperties.has('selectionMode')) {
             this.rangeSelectionPhase = 'start';
+            this.hoveredDate = '';
         }
         if (changedProperties.has('value') && this.value) {
             const dt = parseISO(this.value);
@@ -123,10 +132,20 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
         this.displayYear = focusDt.getFullYear();
         this.focusedDate = toISODate(focusDt);
     }
+    /** @internal */
+    cancelRangeSelection(value, endValue) {
+        if (this.selectionMode !== SELECTION_MODE.RANGE || this.rangeSelectionPhase !== 'end')
+            return;
+        this.value = value;
+        this.endValue = endValue;
+        this.rangeSelectionPhase = 'start';
+        this.hoveredDate = '';
+        this.gridHasFocus = false;
+        this.initializeDisplay();
+    }
     get calendarGrid() {
         const selectedDates = this.getSelectedDates();
-        const rangeStart = this.getRangeStart();
-        const rangeEnd = this.getRangeEnd();
+        const { start: rangeStart, end: rangeEnd } = this.getDisplayedRange();
         return generateCalendarGrid(this.displayYear, this.displayMonth, this.locale, selectedDates, rangeStart, rangeEnd, this.min, this.max);
     }
     getSelectedDates() {
@@ -139,17 +158,34 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
         }
         return [this.value];
     }
-    getRangeStart() {
-        if ((this.selectionMode === SELECTION_MODE.WEEK || this.selectionMode === SELECTION_MODE.RANGE) && this.value) {
-            return this.value;
-        }
-        return undefined;
+    get previewEndDate() {
+        if (this.selectionMode !== SELECTION_MODE.RANGE || this.rangeSelectionPhase !== 'end' || !this.value)
+            return '';
+        if (this.hoveredDate && !this.isDateDisabled(this.hoveredDate))
+            return this.hoveredDate;
+        if (this.gridHasFocus && this.focusedDate && !this.isDateDisabled(this.focusedDate))
+            return this.focusedDate;
+        return '';
+    }
+    get isPreviewingRange() {
+        return Boolean(this.previewEndDate);
     }
-    getRangeEnd() {
-        if ((this.selectionMode === SELECTION_MODE.WEEK || this.selectionMode === SELECTION_MODE.RANGE) && this.endValue) {
-            return this.endValue;
+    getDisplayedRange() {
+        if (this.selectionMode !== SELECTION_MODE.WEEK && this.selectionMode !== SELECTION_MODE.RANGE)
+            return {};
+        const previewEnd = this.previewEndDate;
+        if (this.selectionMode === SELECTION_MODE.RANGE && this.value && previewEnd) {
+            const startDt = parseISO(this.value);
+            const endDt = parseISO(previewEnd);
+            if (startDt && endDt && isBefore(endDt, startDt)) {
+                return { start: previewEnd, end: this.value };
+            }
+            return { start: this.value, end: previewEnd };
         }
-        return undefined;
+        return {
+            start: this.value || undefined,
+            end: this.endValue || undefined,
+        };
     }
     canNavigatePrev() {
         if (!this.min)
@@ -190,6 +226,13 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
             return;
         this.selectDate(dayInfo.date);
     }
+    handleDayPointerEnter(dayInfo) {
+        if (this.rangeSelectionPhase !== 'end' || this.selectionMode !== SELECTION_MODE.RANGE || dayInfo.isDisabled) {
+            this.hoveredDate = '';
+            return;
+        }
+        this.hoveredDate = dayInfo.date;
+    }
     selectDate(dateIso) {
         switch (this.selectionMode) {
             case SELECTION_MODE.SINGLE: {
@@ -216,6 +259,7 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
                     this.endValue = '';
                     this.rangeSelectionPhase = 'end';
                     this.focusedDate = dateIso;
+                    this.hoveredDate = '';
                 }
                 else {
                     const startDt = parseISO(this.value);
@@ -229,6 +273,7 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
                     }
                     this.rangeSelectionPhase = 'start';
                     this.focusedDate = dateIso;
+                    this.hoveredDate = '';
                     this.dispatchEvent(new CustomEvent('date-selected', {
                         detail: { date: dateIso, startDate: this.value, endDate: this.endValue },
                         bubbles: true,
@@ -310,6 +355,7 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
             const newIso = toISODate(newDt);
             if (this.isDateDisabled(newIso))
                 return;
+            this.hoveredDate = '';
             this.focusedDate = newIso;
             if (newDt.getMonth() + 1 !== this.displayMonth || newDt.getFullYear() !== this.displayYear) {
                 this.displayMonth = newDt.getMonth() + 1;
@@ -361,6 +407,7 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
     }
     renderDay(dayInfo) {
         const isFocused = dayInfo.date === this.focusedDate;
+        const isRangePreview = this.isPreviewingRange;
         const dayClasses = {
             'calendar-day': true,
             'outside-month': !dayInfo.isCurrentMonth,
@@ -374,11 +421,12 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
             'in-range': dayInfo.isInRange,
             'range-start': dayInfo.isRangeStart,
             'range-end': dayInfo.isRangeEnd,
+            'range-preview': isRangePreview && dayInfo.isInRange,
         };
         const tabIndex = isFocused ? 0 : -1;
-        const isPartOfSelection = dayInfo.isSelected || dayInfo.isInRange;
+        const isPartOfSelection = dayInfo.isSelected || (dayInfo.isInRange && !isRangePreview);
         return html `
-      <div class="${classMap(wrapperClasses)}">
+      <div class="${classMap(wrapperClasses)}" @pointerenter="${() => this.handleDayPointerEnter(dayInfo)}">
         <button
           class="${classMap(dayClasses)}"
           role="gridcell"
@@ -401,6 +449,9 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
     handleGridFocusOut() {
         this.gridHasFocus = false;
     }
+    handleGridPointerLeave() {
+        this.hoveredDate = '';
+    }
     renderGrid() {
         const grid = this.calendarGrid;
         const weekdays = getWeekdayNames(this.locale);
@@ -412,6 +463,7 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
         @keydown="${this.handleGridKeydown}"
         @focusin="${this.handleGridFocusIn}"
         @focusout="${this.handleGridFocusOut}"
+        @pointerleave="${this.handleGridPointerLeave}"
       >
         <div class="calendar-row calendar-weekdays" role="row">
           ${weekdays.map(day => html `<span class="calendar-weekday" role="columnheader">${day}</span>`)}
@@ -460,7 +512,14 @@ class Calendar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
     `;
     }
     render() {
-        return html ` ${this.renderHeader()} ${this.renderGrid()} ${this.renderTodayButton()} `;
+        const rangeAnnouncement = this.rangeSelectionPhase === 'end' ? this.localeRangeStartSelectedLabel : '';
+        return html `
+      ${this.renderHeader()} ${this.renderGrid()} ${this.renderTodayButton()}
+      <mdc-screenreaderannouncer
+        announcement="${rangeAnnouncement}"
+        data-aria-live="polite"
+      ></mdc-screenreaderannouncer>
+    `;
     }
 }
 Calendar.styles = [...Component.styles, ...styles];
@@ -504,6 +563,10 @@ __decorate([
     property({ type: String, attribute: 'locale-next-month-label' }),
     __metadata("design:type", Object)
 ], Calendar.prototype, "localeNextMonthLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'locale-range-start-selected-label' }),
+    __metadata("design:type", Object)
+], Calendar.prototype, "localeRangeStartSelectedLabel", void 0);
 __decorate([
     state(),
     __metadata("design:type", Number)
@@ -524,4 +587,8 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], Calendar.prototype, "rangeSelectionPhase", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], Calendar.prototype, "hoveredDate", void 0);
 export default Calendar;

package/dist/components/calendar/calendar.styles.js

@@ -13,6 +13,8 @@ const styles = css `
     --mdc-calendar-day-outside-month-text-color: var(--mds-color-theme-text-secondary-normal);
     --mdc-calendar-day-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
     --mdc-calendar-range-bg: var(--mds-color-theme-background-accent-active);
+    --mdc-calendar-range-preview-bg: var(--mds-color-theme-background-accent-normal);
+    --mdc-calendar-range-preview-text-color: var(--mds-color-theme-common-text-primary-normal);
 
     display: flex;
     flex-direction: column;
@@ -98,6 +100,10 @@ const styles = css `
     z-index: 1;
   }
 
+  .calendar-day-wrapper.range-preview::before {
+    background: var(--mdc-calendar-range-preview-bg);
+  }
+
   .calendar-day-wrapper.range-start::before,
   .calendar-day-wrapper.in-range:first-child::before {
     inset-inline-start: calc(50% - 0.875rem);
@@ -179,6 +185,10 @@ const styles = css `
     font-weight: var(--mds-font-apps-body-small-bold-font-weight);
   }
 
+  .calendar-day-wrapper.range-preview .calendar-day {
+    color: var(--mdc-calendar-range-preview-text-color);
+  }
+
   .calendar-day.disabled {
     color: var(--mdc-calendar-day-disabled-text-color);
     cursor: not-allowed;

package/dist/components/calendar/index.d.ts

@@ -1,4 +1,5 @@
 import '../button';
+import '../screenreaderannouncer';
 import '../text';
 import Calendar from './calendar.component';
 declare global {

package/dist/components/calendar/index.js

@@ -1,4 +1,5 @@
 import '../button';
+import '../screenreaderannouncer';
 import '../text';
 import Calendar from './calendar.component';
 import { TAG_NAME } from './calendar.constants';

package/dist/components/checkbox/checkbox.styles.js

@@ -32,6 +32,7 @@ const styles = [
       display: flex;
       flex-direction: column;
       gap: 0.25rem;
+      align-self: center;
     }
 
     :host::part(label) {

package/dist/components/datepicker/datepicker.component.d.ts

@@ -147,6 +147,10 @@ declare class DatePicker extends DatePicker_base implements AssociatedFormContro
      * Localized aria-label for the next month button.
      */
     localeNextMonthLabel: string;
+    /**
+     * Localized announcement made after the range start date is selected.
+     */
+    localeRangeStartSelectedLabel: string;
     /** @internal */
     private monthInput;
     /** @internal */
@@ -154,6 +158,8 @@ declare class DatePicker extends DatePicker_base implements AssociatedFormContro
     /** @internal */
     private yearInput;
     /** @internal */
+    private calendar?;
+    /** @internal */
     private displayPopover;
     /** @internal */
     private internalMonth;
@@ -189,6 +195,7 @@ declare class DatePicker extends DatePicker_base implements AssociatedFormContro
     private handleSelectTriggerClick;
     private handleSelectKeydown;
     private focusCalendarGrid;
+    private closePopover;
     private handleDateSelected;
     private getSpinbuttonInput;
     private getFieldValue;

package/dist/components/datepicker/datepicker.component.js

@@ -135,6 +135,10 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
          * Localized aria-label for the next month button.
          */
         this.localeNextMonthLabel = '';
+        /**
+         * Localized announcement made after the range start date is selected.
+         */
+        this.localeRangeStartSelectedLabel = '';
         /** @internal */
         this.displayPopover = false;
         /** @internal */
@@ -333,15 +337,21 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
     handleCalendarButtonClick() {
         if (this.disabled || this.readonly)
             return;
-        if (!this.displayPopover) {
-            this.flushPendingInput();
+        if (this.displayPopover) {
+            this.closePopover();
+            return;
         }
-        this.displayPopover = !this.displayPopover;
+        this.flushPendingInput();
+        this.displayPopover = true;
     }
     handleSelectTriggerClick() {
         if (this.disabled || this.readonly)
             return;
-        this.displayPopover = !this.displayPopover;
+        if (this.displayPopover) {
+            this.closePopover();
+            return;
+        }
+        this.displayPopover = true;
     }
     handleSelectKeydown(event) {
         if (this.disabled || this.readonly)
@@ -363,6 +373,15 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
             }
         }, 0);
     }
+    closePopover(focusTrigger = false) {
+        var _a;
+        if (this.effectiveSelectionMode === SELECTION_MODE.RANGE) {
+            (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.cancelRangeSelection(this.value, this.endValue);
+        }
+        this.displayPopover = false;
+        if (focusTrigger)
+            this.focusBackToTrigger();
+    }
     handleDateSelected(event) {
         const { detail } = event;
         const mode = this.effectiveSelectionMode;
@@ -385,8 +404,7 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         this.notifyValueChange();
         const rangeComplete = mode === SELECTION_MODE.RANGE && this.value && this.endValue;
         if (mode !== SELECTION_MODE.RANGE || rangeComplete) {
-            this.displayPopover = false;
-            this.focusBackToTrigger();
+            this.closePopover(true);
         }
     }
     // -- Spinbutton handling (input variant) --
@@ -726,13 +744,11 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         @shown="${() => this.focusCalendarGrid()}"
         @closebyescape="${(event) => {
             if (event.target === event.currentTarget) {
-                this.displayPopover = false;
-                this.focusBackToTrigger();
+                this.closePopover(true);
             }
         }}"
         @closebyoutsideclick="${() => {
-            this.displayPopover = false;
-            this.focusBackToTrigger();
+            this.closePopover(true);
         }}"
         exportparts="popover-content"
       >
@@ -746,6 +762,7 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
           locale-today-label="${this.localeTodayLabel}"
           locale-prev-month-label="${this.localePrevMonthLabel}"
           locale-next-month-label="${this.localeNextMonthLabel}"
+          locale-range-start-selected-label="${this.localeRangeStartSelectedLabel}"
           @date-selected="${this.handleDateSelected}"
         ></mdc-calendar>
       </mdc-popover>
@@ -851,6 +868,10 @@ __decorate([
     property({ type: String, attribute: 'locale-next-month-label' }),
     __metadata("design:type", Object)
 ], DatePicker.prototype, "localeNextMonthLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'locale-range-start-selected-label' }),
+    __metadata("design:type", Object)
+], DatePicker.prototype, "localeRangeStartSelectedLabel", void 0);
 __decorate([
     query('#month-spinbutton'),
     __metadata("design:type", HTMLInputElement)
@@ -863,6 +884,10 @@ __decorate([
     query('#year-spinbutton'),
     __metadata("design:type", HTMLInputElement)
 ], DatePicker.prototype, "yearInput", void 0);
+__decorate([
+    query('mdc-calendar'),
+    __metadata("design:type", Object)
+], DatePicker.prototype, "calendar", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)