@ionic/core 8.8.20-dev.11791573097.1f843ab0 → 8.8.20-dev.11792194859.16be5d7f

package/dist/collection/components/datetime/datetime.ios.css

@@ -349,11 +349,83 @@
 
 :host .calendar-day-wrapper {
   display: flex;
+  position: relative;
   align-items: center;
   justify-content: center;
   min-width: 0;
   min-height: 0;
   overflow: visible;
+  /**
+   * Create a stacking context so the range track
+   * (::before with z-index: -1) stays behind the
+   * day button but above the host background.
+   */
+  z-index: 0;
+}
+
+/**
+ * The ::before pseudo-element on the calendar-day-wrapper
+ * draws the colored background track that connects the
+ * range start to the range end. The track is vertically
+ * centered and sized to match the day button height.
+ *
+ * @prop --range-background: The background color of the range selection track.
+ */
+:host .calendar-day-wrapper-range-start::before,
+:host .calendar-day-wrapper-in-range::before,
+:host .calendar-day-wrapper-range-end::before {
+  position: absolute;
+  /**
+   * Vertically center the track and size it to
+   * match the calendar day button height.
+   */
+  top: 50%;
+  height: var(--range-track-height);
+  transform: translateY(-50%);
+  background: var(--range-background);
+  content: "";
+  z-index: -1;
+}
+
+:host .calendar-day-wrapper-range-start::before {
+  inset-inline-start: 50%;
+  inset-inline-end: 0;
+}
+
+:host .calendar-day-wrapper-in-range::before {
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+}
+
+:host .calendar-day-wrapper-range-end::before {
+  inset-inline-start: 0;
+  inset-inline-end: 50%;
+}
+
+/**
+ * When a single day is both the start and end of the range,
+ * do not show a track since there is nothing to connect.
+ */
+:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before {
+  display: none;
+}
+
+/**
+ * When the component is disabled, move the opacity to the wrapper
+ * so both the track and day button fade equally. Without this,
+ * the day button becomes semi-transparent (via native disabled opacity)
+ * while the track stays opaque, causing a visible overlap.
+ */
+:host(.datetime-disabled) .calendar-day-wrapper-range-start,
+:host(.datetime-disabled) .calendar-day-wrapper-in-range,
+:host(.datetime-disabled) .calendar-day-wrapper-range-end {
+  opacity: 0.4;
+}
+
+:host(.datetime-disabled) .calendar-day-wrapper-range-start .calendar-day[disabled],
+:host(.datetime-disabled) .calendar-day-wrapper-in-range .calendar-day[disabled],
+:host(.datetime-disabled) .calendar-day-wrapper-range-end .calendar-day[disabled] {
+  opacity: 1;
 }
 
 /**
@@ -1000,6 +1072,52 @@ ion-picker {
   color: var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));
 }
 
+:host {
+  --range-background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+  --range-track-height: 40px;
+}
+
+:host(.ion-color) {
+  --range-background: rgba(var(--ion-color-base-rgb), 0.2);
+}
+
+:host .calendar-day.calendar-day-range-start {
+  border-radius: 50% 0 0 50%;
+  background: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary-contrast, #fff);
+  font-weight: 600;
+}
+
+:host .calendar-day.calendar-day-range-end {
+  border-radius: 0 50% 50% 0;
+  background: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary-contrast, #fff);
+  font-weight: 600;
+}
+
+:host .calendar-day.calendar-day-range-start.calendar-day-range-end {
+  border-radius: 50%;
+}
+
+:host .calendar-day.calendar-day-in-range {
+  border-radius: 0;
+  background: none;
+}
+
+:host(.ion-color) .calendar-day.calendar-day-range-start,
+:host(.ion-color) .calendar-day.calendar-day-range-end {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
+:host .calendar-day.calendar-day-today.calendar-day-in-range {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-in-range {
+  color: var(--ion-color-base);
+}
+
 :host .datetime-time {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;