@vaadin/date-picker 24.0.0-alpha1 → 24.0.0-alpha10

package/src/vaadin-date-picker-overlay-content.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/button/src/vaadin-button.js';
@@ -231,10 +231,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     ];
   }
 
-  get __isRTL() {
-    return this.getAttribute('dir') === 'rtl';
-  }
-
   /**
    * Whether to scroll to a sub-month position when scrolling to a date.
    * This is active if the month scroller is not large enough to fit a
@@ -272,31 +268,27 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     );
 
     this.addController(
-      new SlotController(
-        this,
-        'today-button',
-        () => document.createElement('vaadin-button'),
-        (_, btn) => {
+      new SlotController(this, 'today-button', 'vaadin-button', {
+        observe: false,
+        initializer: (btn) => {
           btn.setAttribute('theme', 'tertiary');
           btn.addEventListener('keydown', (e) => this.__onTodayButtonKeyDown(e));
           addListener(btn, 'tap', this._onTodayTap.bind(this));
           this._todayButton = btn;
         },
-      ),
+      }),
     );
 
     this.addController(
-      new SlotController(
-        this,
-        'cancel-button',
-        () => document.createElement('vaadin-button'),
-        (_, btn) => {
+      new SlotController(this, 'cancel-button', 'vaadin-button', {
+        observe: false,
+        initializer: (btn) => {
           btn.setAttribute('theme', 'tertiary');
           btn.addEventListener('keydown', (e) => this.__onCancelButtonKeyDown(e));
           addListener(btn, 'tap', this._cancel.bind(this));
           this._cancelButton = btn;
         },
-      ),
+      }),
     );
 
     this.__initMonthScroller();
@@ -335,11 +327,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
   __initMonthScroller() {
     this.addController(
-      new SlotController(
-        this,
-        'months',
-        () => document.createElement('vaadin-date-picker-month-scroller'),
-        (_, scroller) => {
+      new SlotController(this, 'months', 'vaadin-date-picker-month-scroller', {
+        observe: false,
+        initializer: (scroller) => {
           scroller.addEventListener('custom-scroll', () => {
             this._onMonthScroll();
           });
@@ -367,17 +357,15 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
           this._monthScroller = scroller;
         },
-      ),
+      }),
     );
   }
 
   __initYearScroller() {
     this.addController(
-      new SlotController(
-        this,
-        'years',
-        () => document.createElement('vaadin-date-picker-year-scroller'),
-        (_, scroller) => {
+      new SlotController(this, 'years', 'vaadin-date-picker-year-scroller', {
+        observe: false,
+        initializer: (scroller) => {
           scroller.setAttribute('aria-hidden', 'true');
 
           addListener(scroller, 'tap', (e) => {
@@ -398,7 +386,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
           this._yearScroller = scroller;
         },
-      ),
+      }),
     );
   }
 
@@ -656,7 +644,10 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     const initialPosition = this._monthScroller.position;
 
     const smoothScroll = (timestamp) => {
-      start = start || timestamp;
+      if (!start) {
+        start = timestamp;
+      }
+
       const currentTime = timestamp - start;
 
       if (currentTime < this.scrollDuration) {
@@ -984,58 +975,55 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     this.focusDate(getClosestDate(focus, [this.minDate, this.maxDate]));
   }
 
-  _moveFocusByDays(days) {
-    const focus = this.focusedDate;
-    const dateToFocus = new Date(0, 0);
-    dateToFocus.setFullYear(focus.getFullYear());
-    dateToFocus.setMonth(focus.getMonth());
-    dateToFocus.setDate(focus.getDate() + days);
-
-    if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
-      this.focusDate(dateToFocus);
-    } else if (this._dateAllowed(focus, this.minDate, this.maxDate)) {
+  _focusAllowedDate(dateToFocus, diff, keepMonth) {
+    if (this._dateAllowed(dateToFocus)) {
+      this.focusDate(dateToFocus, keepMonth);
+    } else if (this._dateAllowed(this.focusedDate)) {
       // Move to min or max date
-      if (days > 0) {
-        // Down or right
+      if (diff > 0) {
+        // Down, Right or Page Down key
         this.focusDate(this.maxDate);
       } else {
-        // Up or left
+        // Up, Left or Page Up key
         this.focusDate(this.minDate);
       }
     } else {
       // Move to closest allowed date
-      this._focusClosestDate(focus);
+      this._focusClosestDate(this.focusedDate);
     }
   }
 
-  _moveFocusByMonths(months) {
-    const focus = this.focusedDate;
-    const dateToFocus = new Date(0, 0);
-    dateToFocus.setFullYear(focus.getFullYear());
-    dateToFocus.setMonth(focus.getMonth() + months);
+  _getDateDiff(months, days) {
+    const date = new Date(0, 0);
+    date.setFullYear(this.focusedDate.getFullYear());
+    date.setMonth(this.focusedDate.getMonth() + months);
+    if (days) {
+      date.setDate(this.focusedDate.getDate() + days);
+    }
+    return date;
+  }
 
+  _moveFocusByDays(days) {
+    const dateToFocus = this._getDateDiff(0, days);
+
+    this._focusAllowedDate(dateToFocus, days, false);
+  }
+
+  _moveFocusByMonths(months) {
+    const dateToFocus = this._getDateDiff(months);
     const targetMonth = dateToFocus.getMonth();
 
-    dateToFocus.setDate(this._focusedMonthDate || (this._focusedMonthDate = focus.getDate()));
+    if (!this._focusedMonthDate) {
+      this._focusedMonthDate = this.focusedDate.getDate();
+    }
+
+    dateToFocus.setDate(this._focusedMonthDate);
+
     if (dateToFocus.getMonth() !== targetMonth) {
       dateToFocus.setDate(0);
     }
 
-    if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
-      this.focusDate(dateToFocus, true);
-    } else if (this._dateAllowed(focus, this.minDate, this.maxDate)) {
-      // Move to min or max date
-      if (months > 0) {
-        // Pagedown
-        this.focusDate(this.maxDate);
-      } else {
-        // Pageup
-        this.focusDate(this.minDate);
-      }
-    } else {
-      // Move to closest allowed date
-      this._focusClosestDate(focus);
-    }
+    this._focusAllowedDate(dateToFocus, months, true);
   }
 
   _moveFocusInsideMonth(focusedDate, property) {
@@ -1050,9 +1038,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
       dateToFocus.setDate(0);
     }
 
-    if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
+    if (this._dateAllowed(dateToFocus)) {
       this.focusDate(dateToFocus);
-    } else if (this._dateAllowed(focusedDate, this.minDate, this.maxDate)) {
+    } else if (this._dateAllowed(focusedDate)) {
       // Move to minDate or maxDate
       this.focusDate(this[property]);
     } else {
@@ -1061,7 +1049,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     }
   }
 
-  _dateAllowed(date, min, max) {
+  _dateAllowed(date, min = this.minDate, max = this.maxDate) {
     return (!min || date >= min) && (!max || date <= max);
   }
 

package/src/vaadin-date-picker-overlay.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';

package/src/vaadin-date-picker-year-scroller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';

package/src/vaadin-date-picker-year.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-date-picker.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -85,8 +85,6 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * Attribute  | Description                                      | Part name
  * -----------|--------------------------------------------------|-----------
  * `opened`   | Set when the date selector overlay is opened     | :host
- * `today`    | Set on the date corresponding to the current day | date
- * `selected` | Set on the selected date                         | date
  *
  * If you want to replace the default `<input>` and its container with a custom implementation to get full control
  * over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
@@ -133,6 +131,10 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * `week-numbers`        | Week numbers container
  * `week-number`         | Week number element
  * `date`                | Date element
+ * `disabled`            | Disabled date element
+ * `focused`             | Focused date element
+ * `selected`            | Selected date element
+ * `today`               | Date element corresponding to the current day
  *
  * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
  *

package/src/vaadin-date-picker.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';
@@ -53,8 +53,6 @@ registerStyles('vaadin-date-picker', inputFieldShared, { moduleId: 'vaadin-date-
  * Attribute  | Description                                      | Part name
  * -----------|--------------------------------------------------|-----------
  * `opened`   | Set when the date selector overlay is opened     | :host
- * `today`    | Set on the date corresponding to the current day | date
- * `selected` | Set on the selected date                         | date
  *
  * If you want to replace the default `<input>` and its container with a custom implementation to get full control
  * over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
@@ -101,6 +99,10 @@ registerStyles('vaadin-date-picker', inputFieldShared, { moduleId: 'vaadin-date-
  * `week-numbers`        | Week numbers container
  * `week-number`         | Week number element
  * `date`                | Date element
+ * `disabled`            | Disabled date element
+ * `focused`             | Focused date element
+ * `selected`            | Selected date element
+ * `today`               | Date element corresponding to the current day
  *
  * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
  *

package/src/vaadin-infinite-scroller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
@@ -8,6 +8,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 
 /**
  * @extends HTMLElement
@@ -117,6 +118,71 @@ export class InfiniteScroller extends PolymerElement {
     };
   }
 
+  /**
+   * @return {number}
+   */
+  get bufferOffset() {
+    return this._buffers[0].offsetTop;
+  }
+
+  /**
+   * @return {number}
+   */
+  get itemHeight() {
+    if (!this._itemHeightVal) {
+      const itemHeight = getComputedStyle(this).getPropertyValue('--vaadin-infinite-scroller-item-height');
+      // Use background-position temp inline style for unit conversion
+      const tmpStyleProp = 'background-position';
+      this.$.fullHeight.style.setProperty(tmpStyleProp, itemHeight);
+      const itemHeightPx = getComputedStyle(this.$.fullHeight).getPropertyValue(tmpStyleProp);
+      this.$.fullHeight.style.removeProperty(tmpStyleProp);
+      this._itemHeightVal = parseFloat(itemHeightPx);
+    }
+
+    return this._itemHeightVal;
+  }
+
+  /** @private */
+  get _bufferHeight() {
+    return this.itemHeight * this.bufferSize;
+  }
+
+  /**
+   * @return {number}
+   */
+  get position() {
+    return (this.$.scroller.scrollTop - this._buffers[0].translateY) / this.itemHeight + this._firstIndex;
+  }
+
+  /**
+   * Current scroller position as index. Can be a fractional number.
+   *
+   * @type {number}
+   */
+  set position(index) {
+    this._preventScrollEvent = true;
+    if (index > this._firstIndex && index < this._firstIndex + this.bufferSize * 2) {
+      this.$.scroller.scrollTop = this.itemHeight * (index - this._firstIndex) + this._buffers[0].translateY;
+    } else {
+      this._initialIndex = ~~index;
+      this._reset();
+      this._scrollDisabled = true;
+      this.$.scroller.scrollTop += (index % 1) * this.itemHeight;
+      this._scrollDisabled = false;
+    }
+
+    if (this._mayHaveMomentum) {
+      // Stop the possible iOS Safari momentum with -webkit-overflow-scrolling: auto;
+      this.$.scroller.classList.add('notouchscroll');
+      this._mayHaveMomentum = false;
+
+      setTimeout(() => {
+        // Restore -webkit-overflow-scrolling: touch; after a small delay.
+        this.$.scroller.classList.remove('notouchscroll');
+      }, 10);
+    }
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -235,71 +301,6 @@ export class InfiniteScroller extends PolymerElement {
     });
   }
 
-  /**
-   * @return {number}
-   */
-  get bufferOffset() {
-    return this._buffers[0].offsetTop;
-  }
-
-  /**
-   * @return {number}
-   */
-  get position() {
-    return (this.$.scroller.scrollTop - this._buffers[0].translateY) / this.itemHeight + this._firstIndex;
-  }
-
-  /**
-   * Current scroller position as index. Can be a fractional number.
-   *
-   * @type {number}
-   */
-  set position(index) {
-    this._preventScrollEvent = true;
-    if (index > this._firstIndex && index < this._firstIndex + this.bufferSize * 2) {
-      this.$.scroller.scrollTop = this.itemHeight * (index - this._firstIndex) + this._buffers[0].translateY;
-    } else {
-      this._initialIndex = ~~index;
-      this._reset();
-      this._scrollDisabled = true;
-      this.$.scroller.scrollTop += (index % 1) * this.itemHeight;
-      this._scrollDisabled = false;
-    }
-
-    if (this._mayHaveMomentum) {
-      // Stop the possible iOS Safari momentum with -webkit-overflow-scrolling: auto;
-      this.$.scroller.classList.add('notouchscroll');
-      this._mayHaveMomentum = false;
-
-      setTimeout(() => {
-        // Restore -webkit-overflow-scrolling: touch; after a small delay.
-        this.$.scroller.classList.remove('notouchscroll');
-      }, 10);
-    }
-  }
-
-  /**
-   * @return {number}
-   */
-  get itemHeight() {
-    if (!this._itemHeightVal) {
-      const itemHeight = getComputedStyle(this).getPropertyValue('--vaadin-infinite-scroller-item-height');
-      // Use background-position temp inline style for unit conversion
-      const tmpStyleProp = 'background-position';
-      this.$.fullHeight.style.setProperty(tmpStyleProp, itemHeight);
-      const itemHeightPx = getComputedStyle(this.$.fullHeight).getPropertyValue(tmpStyleProp);
-      this.$.fullHeight.style.removeProperty(tmpStyleProp);
-      this._itemHeightVal = parseFloat(itemHeightPx);
-    }
-
-    return this._itemHeightVal;
-  }
-
-  /** @private */
-  get _bufferHeight() {
-    return this.itemHeight * this.bufferSize;
-  }
-
   /** @private */
   _reset() {
     this._scrollDisabled = true;
@@ -329,8 +330,7 @@ export class InfiniteScroller extends PolymerElement {
         itemWrapper.style.height = `${this.itemHeight}px`;
         itemWrapper.instance = {};
 
-        const contentId = (InfiniteScroller._contentIndex = InfiniteScroller._contentIndex + 1 || 0);
-        const slotName = `vaadin-infinite-scroller-item-content-${contentId}`;
+        const slotName = `vaadin-infinite-scroller-item-content-${generateUniqueId()}`;
 
         const slot = document.createElement('slot');
         slot.setAttribute('name', slotName);

package/src/vaadin-month-calendar.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@polymer/polymer/lib/elements/dom-repeat.js';
@@ -32,17 +32,21 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
           display: flex;
         }
 
-        [part='date'] {
+        [part~='date'] {
           outline: none;
         }
 
+        [part~='disabled'] {
+          pointer-events: none;
+        }
+
         [part='week-number'][hidden],
         [part='weekday'][hidden] {
           display: none;
         }
 
         [part='weekday'],
-        [part='date'] {
+        [part~='date'] {
           width: calc(100% / 7);
           padding: 0;
           font-weight: normal;
@@ -56,7 +60,7 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
         }
 
         :host([week-numbers]) [part='weekday']:not(:empty),
-        :host([week-numbers]) [part='date'] {
+        :host([week-numbers]) [part~='date'] {
           width: 12.5%;
         }
       </style>
@@ -99,12 +103,9 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
               <template is="dom-repeat" items="[[week]]">
                 <td
                   role="gridcell"
-                  part="date"
+                  part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate)]]"
                   date="[[item]]"
-                  today$="[[_isToday(item)]]"
-                  focused$="[[__isDayFocused(item, focusedDate)]]"
                   tabindex$="[[__getDayTabindex(item, focusedDate)]]"
-                  selected$="[[__isDaySelected(item, selectedDate)]]"
                   disabled$="[[__isDayDisabled(item, minDate, maxDate)]]"
                   aria-selected$="[[__getDayAriaSelected(item, selectedDate)]]"
                   aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate)]]"
@@ -204,18 +205,18 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
     ];
   }
 
+  get focusableDateElement() {
+    return [...this.shadowRoot.querySelectorAll('[part~=date]')].find((datePart) => {
+      return dateEquals(datePart.date, this.focusedDate);
+    });
+  }
+
   /** @protected */
   ready() {
     super.ready();
     addListener(this.$.monthGrid, 'tap', this._handleTap.bind(this));
   }
 
-  get focusableDateElement() {
-    return [...this.shadowRoot.querySelectorAll('[part=date]')].find((datePart) => {
-      return dateEquals(datePart.date, this.focusedDate);
-    });
-  }
-
   /* Returns true if all the dates in the month are out of the allowed range */
   _isDisabled(month, minDate, maxDate) {
     // First day of the month
@@ -369,6 +370,28 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
     e.preventDefault();
   }
 
+  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate) {
+    const result = ['date'];
+
+    if (this.__isDayDisabled(date, minDate, maxDate)) {
+      result.push('disabled');
+    }
+
+    if (this.__isDayFocused(date, focusedDate)) {
+      result.push('focused');
+    }
+
+    if (this.__isDaySelected(date, selectedDate)) {
+      result.push('selected');
+    }
+
+    if (this._isToday(date)) {
+      result.push('today');
+    }
+
+    return result.join(' ');
+  }
+
   __getWeekNumber(days) {
     const date = days.reduce((acc, d) => {
       return !acc && d ? d : acc;

package/theme/lumo/vaadin-month-calendar-styles.js

@@ -50,7 +50,7 @@ registerStyles(
 
     /* Date and week number cells */
 
-    [part='date'],
+    [part~='date'],
     [part='week-number'] {
       box-sizing: border-box;
       display: inline-flex;
@@ -60,28 +60,28 @@ registerStyles(
       position: relative;
     }
 
-    [part='date'] {
+    [part~='date'] {
       transition: color 0.1s;
     }
 
-    [part='date']:not(:empty) {
+    [part~='date']:not(:empty) {
       cursor: var(--lumo-clickable-cursor);
     }
 
     :host([week-numbers]) [part='weekday']:not(:empty),
-    :host([week-numbers]) [part='date'] {
+    :host([week-numbers]) [part~='date'] {
       width: calc((100% - var(--lumo-size-xs)) / 7);
     }
 
     /* Today date */
 
-    [part='date'][today] {
+    [part~='date'][part~='today'] {
       color: var(--lumo-primary-text-color);
     }
 
     /* Focused date */
 
-    [part='date']::before {
+    [part~='date']::before {
       content: '';
       position: absolute;
       z-index: -1;
@@ -97,11 +97,11 @@ registerStyles(
       border-radius: var(--lumo-border-radius-m);
     }
 
-    [part='date'][focused]::before {
+    [part~='date'][part~='focused']::before {
       box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
     }
 
-    :host(:not([focused])) [part='date'][focused]::before {
+    :host(:not([focused])) [part~='date'][part~='focused']::before {
       animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
     }
 
@@ -111,33 +111,33 @@ registerStyles(
       }
     }
 
-    [part='date']:not(:empty):not([disabled]):not([selected]):hover::before {
+    [part~='date']:not(:empty):not([part~='disabled']):not([part~='selected']):hover::before {
       background-color: var(--lumo-primary-color-10pct);
     }
 
-    [part='date'][selected] {
+    [part~='date'][part~='selected'] {
       color: var(--lumo-primary-contrast-color);
     }
 
-    [part='date'][selected]::before {
+    [part~='date'][part~='selected']::before {
       background-color: var(--lumo-primary-color);
     }
 
-    [part='date'][disabled] {
+    [part~='date'][part~='disabled'] {
       color: var(--lumo-disabled-text-color);
     }
 
     @media (pointer: coarse) {
-      [part='date']:hover:not([selected])::before,
-      [part='date'][focused]:not([selected])::before {
+      [part~='date']:hover:not([part~='selected'])::before,
+      [part~='focused']:not([part~='selected'])::before {
         display: none;
       }
 
-      [part='date']:not(:empty):not([disabled]):active::before {
+      [part~='date']:not(:empty):not([part~='disabled']):active::before {
         display: block;
       }
 
-      [part='date'][selected]::before {
+      [part~='date'][part~='selected']::before {
         box-shadow: none;
       }
     }