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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/components/ion-datetime-button.js +1 -1
  2. package/components/ion-datetime.js +1 -1
  3. package/components/{p-BE21dB_a.js → p-Bpr3edV8.js} +1 -1
  4. package/dist/cjs/ion-datetime-button.cjs.entry.js +28 -10
  5. package/dist/cjs/ion-datetime_3.cjs.entry.js +354 -30
  6. package/dist/cjs/ionic.cjs.js +1 -1
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/collection/components/datetime/datetime.ionic.css +144 -1
  9. package/dist/collection/components/datetime/datetime.ios.css +118 -0
  10. package/dist/collection/components/datetime/datetime.js +407 -27
  11. package/dist/collection/components/datetime/datetime.md.css +117 -0
  12. package/dist/collection/components/datetime/utils/state.js +18 -1
  13. package/dist/collection/components/datetime-button/datetime-button.js +28 -10
  14. package/dist/docs.json +151 -1
  15. package/dist/esm/{format-2WlZcMvG.js → format-BNGmd1mx.js} +1 -1
  16. package/dist/esm/ion-datetime-button.entry.js +29 -11
  17. package/dist/esm/ion-datetime_3.entry.js +355 -31
  18. package/dist/esm/ionic.js +1 -1
  19. package/dist/esm/loader.js +1 -1
  20. package/dist/html.html-data.json +20 -0
  21. package/dist/ionic/ionic.esm.js +1 -1
  22. package/dist/ionic/p-4aa6153d.entry.js +4 -0
  23. package/dist/ionic/p-4f2e482f.entry.js +4 -0
  24. package/dist/ionic/{p-7k7Q1A38.js → p-CrgdPEJR.js} +1 -1
  25. package/dist/types/components/datetime/datetime-interface.d.ts +4 -0
  26. package/dist/types/components/datetime/datetime.d.ts +66 -2
  27. package/dist/types/components/datetime/utils/state.d.ts +5 -2
  28. package/dist/types/components.d.ts +33 -0
  29. package/hydrate/index.js +390 -40
  30. package/hydrate/index.mjs +390 -40
  31. package/package.json +1 -1
  32. package/dist/ionic/p-3a4f9b8a.entry.js +0 -4
  33. package/dist/ionic/p-f6768728.entry.js +0 -4
package/dist/cjs/ion-datetime_3.cjs.entry.js CHANGED
@@ -613,7 +613,7 @@ const isDayDisabled = (refParts, minParts, maxParts, dayValues) => {
613
613
  * Given a locale, a date, the selected date(s), and today's date,
614
614
  * generate the state for a given calendar day button.
615
615
  */
616
- const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues) => {
616
+ const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues, rangeParts) => {
617
617
  /**
618
618
  * activeParts signals what day(s) are currently selected in the datetime.
619
619
  * If multiple="true", this will be an array, but the logic in this util
@@ -629,6 +629,20 @@ const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts
629
629
  const isActive = activePartsArray.find((parts) => format.isSameDay(refParts, parts)) !== undefined;
630
630
  const isToday = format.isSameDay(refParts, todayParts);
631
631
  const disabled = isDayDisabled(refParts, minParts, maxParts, dayValues);
632
+ /**
633
+ * Range state: determine if this day is the range start, end, or in between.
634
+ */
635
+ let isRangeStart = false;
636
+ let isRangeEnd = false;
637
+ let isInRange = false;
638
+ if (rangeParts) {
639
+ const { start, end } = rangeParts;
640
+ isRangeStart = format.isSameDay(refParts, start);
641
+ if (end) {
642
+ isRangeEnd = format.isSameDay(refParts, end);
643
+ isInRange = !disabled && !isRangeStart && !isRangeEnd && format.isAfter(refParts, start) && format.isBefore(refParts, end);
644
+ }
645
+ }
632
646
  /**
633
647
  * Note that we always return one object regardless of whether activeParts
634
648
  * was an array, since we pare down to one value for isActive.
@@ -637,6 +651,9 @@ const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts
637
651
  disabled,
638
652
  isActive,
639
653
  isToday,
654
+ isRangeStart,
655
+ isRangeEnd,
656
+ isInRange,
640
657
  ariaSelected: isActive ? 'true' : null,
641
658
  ariaLabel: format.generateDayAriaLabel(locale, isToday, refParts),
642
659
  text: refParts.day != null ? format.getDay(locale, refParts) : null,
@@ -754,11 +771,11 @@ const checkForPresentationFormatMismatch = (el, presentation, formatOptions) =>
754
771
  }
755
772
  };
756
773
 
757
- const datetimeIonicCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--focus-ring-color:var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));--focus-ring-width:var(--token-border-radius-025, var(--token-scale-050, 2px));--body-opacity:0;--year-opacity:0}:host .calendar-body{opacity:var(--body-opacity)}:host .datetime-year{opacity:var(--year-opacity)}:host(.datetime-ready) .calendar-body{--body-opacity:1}:host(.datetime-ready) .datetime-year{--year-opacity:1}:host .datetime-header{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-400, var(--token-scale-400, 16px));display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start;-ms-flex-pack:justify;justify-content:space-between;height:var(--token-scale-1400, 56px);margin-bottom:var(--token-space-200, var(--token-scale-200, 8px));border-bottom:solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df)}:host .datetime-header .datetime-title{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.555556;color:var(--token-primitives-neutral-800, #6c727a)}:host .datetime-header .datetime-selected-date{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;color:var(--token-primitives-neutral-1000, #383e45)}.calendar-action-buttons{padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));-ms-flex-align:center;align-items:center;height:var(--token-scale-1400, 56px);-webkit-box-sizing:border-box;box-sizing:border-box}.calendar-month-year{-ms-flex:1 0 0px;flex:1 0 0}.calendar-month-year-toggle{border-radius:var(--token-border-radius-full, 999px);font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.5;-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));min-width:var(--token-scale-1600, 64px);min-height:var(--token-scale-1000, 40px);border:var(--focus-ring-width) solid transparent;color:var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}@media (any-hover: hover){.calendar-month-year-toggle:hover{background:var(--token-primitives-neutral-200, #ebeef2)}}.calendar-month-year-toggle.ion-focused{border-color:var(--focus-ring-color)}.calendar-month-year-toggle.ion-activated{background:var(--token-primitives-neutral-200, #ebeef2)}.calendar-next-prev ion-button.button-has-icon-only{--color:var(--token-primitives-neutral-1000, #383e45);--background-activated:var(--token-primitives-neutral-200, #ebeef2);--background-hover:var(--token-primitives-neutral-200, #ebeef2);--background-hover-opacity:1;min-height:var(--token-scale-1000, 40px)}.calendar-next-prev ion-button.button-has-icon-only.ion-focused::part(native){border:var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));outline:none}.calendar-days-of-week{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-150, 0.015em);line-height:1.666667;text-transform:uppercase;-ms-flex-line-pack:center;align-content:center;height:var(--token-scale-1200, 48px);color:var(--token-primitives-neutral-800, #6c727a)}.calendar-day{border-radius:var(--token-border-radius-full, 999px);-webkit-padding-start:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-padding-end:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-end:var(--token-space-100, var(--token-scale-100, 4px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.428571;width:var(--token-scale-1200, 48px);min-width:var(--token-scale-1200, 48px);height:var(--token-scale-1200, 48px);color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}.calendar-day[disabled]:not(.calendar-day-constrained){color:var(--token-primitives-neutral-500, #9fa5ad)}.calendar-day.calendar-day-today{color:var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active.calendar-day-adjacent-day{background:var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff))}.calendar-day:focus-visible{border:var(--focus-ring-width) solid var(--focus-ring-color)}@media (any-hover: hover){.calendar-day:not([disabled]):not(:active):hover{background:var(--token-semantics-primary-200, var(--token-primitives-blue-200, #e4e8ff))}}.calendar-day:active,.calendar-day.calendar-day-adjacent-day:active{background:var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa)))}.calendar-day.calendar-day-adjacent-day{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a))}.calendar-day.calendar-day-active.calendar-day-adjacent-day{color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host .datetime-time{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host .datetime-time .time-header{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.5;color:var(--token-primitives-neutral-800, #6c727a)}:host .datetime-time button{-webkit-padding-start:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-start:var(--token-space-200, var(--token-scale-200, 8px));-webkit-padding-end:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-end:var(--token-space-200, var(--token-scale-200, 8px));padding-top:var(--token-space-0, var(--token-scale-0, 0px));padding-bottom:var(--token-space-0, var(--token-scale-0, 0px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;border-radius:var(--token-border-radius-full, 999px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:var(--token-scale-800, 32px);background-color:var(--token-primitives-neutral-100, #f6f7fa);color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host .datetime-footer{padding-left:0;padding-right:0;padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:0;margin-left:0;margin-right:0;margin-top:var(--token-space-200, var(--token-scale-200, 8px));margin-bottom:0;border-left:0;border-right:0;border-top:solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df);border-bottom:0}:host .datetime-buttons .datetime-action-buttons,.datetime-action-buttons .datetime-action-buttons-container,::slotted([slot=buttons]){-ms-flex-flow:column;flex-flow:column;-ms-flex-align:stretch;align-items:stretch;gap:var(--token-space-200, var(--token-scale-200, 8px))}`;
774
+ const datetimeIonicCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible;z-index:0}:host .calendar-day-wrapper-range-start::before,:host .calendar-day-wrapper-in-range::before,:host .calendar-day-wrapper-range-end::before{position:absolute;top:50%;height:var(--range-track-height);-webkit-transform:translateY(-50%);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%}:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before{display:none}: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}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--focus-ring-color:var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));--focus-ring-width:var(--token-border-size-050, var(--token-scale-050, 2px));--body-opacity:0;--year-opacity:0}:host .calendar-body{opacity:var(--body-opacity)}:host .datetime-year{opacity:var(--year-opacity)}:host(.datetime-ready) .calendar-body{--body-opacity:1}:host(.datetime-ready) .datetime-year{--year-opacity:1}:host .datetime-header{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-400, var(--token-scale-400, 16px));display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start;-ms-flex-pack:justify;justify-content:space-between;height:var(--token-scale-1400, 56px);margin-bottom:var(--token-space-200, var(--token-scale-200, 8px));border-bottom:solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df)}:host .datetime-header .datetime-title{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.555556;color:var(--token-primitives-neutral-800, #6c727a)}:host .datetime-header .datetime-selected-date{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;color:var(--token-primitives-neutral-1000, #383e45)}.calendar-action-buttons{padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));-ms-flex-align:center;align-items:center;height:var(--token-scale-1400, 56px);-webkit-box-sizing:border-box;box-sizing:border-box}.calendar-month-year{-ms-flex:1 0 0px;flex:1 0 0}.calendar-month-year-toggle{border-radius:var(--token-border-radius-full, 999px);font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.5;-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));min-width:var(--token-scale-1600, 64px);min-height:var(--token-scale-1000, 40px);border:var(--focus-ring-width) solid transparent;color:var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}@media (any-hover: hover){.calendar-month-year-toggle:hover{background:var(--token-primitives-neutral-200, #ebeef2)}}.calendar-month-year-toggle.ion-focused{border-color:var(--focus-ring-color)}.calendar-month-year-toggle.ion-activated{background:var(--token-primitives-neutral-200, #ebeef2)}.calendar-next-prev ion-button.button-has-icon-only{--color:var(--token-primitives-neutral-1000, #383e45);--background-activated:var(--token-primitives-neutral-200, #ebeef2);--background-hover:var(--token-primitives-neutral-200, #ebeef2);--background-hover-opacity:1;min-height:var(--token-scale-1000, 40px)}.calendar-next-prev ion-button.button-has-icon-only.ion-focused::part(native){border:var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));outline:none}.calendar-days-of-week{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-150, 0.015em);line-height:1.666667;text-transform:uppercase;-ms-flex-line-pack:center;align-content:center;height:var(--token-scale-1200, 48px);color:var(--token-primitives-neutral-800, #6c727a)}.calendar-day{border-radius:var(--token-border-radius-full, 999px);-webkit-padding-start:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-padding-end:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-end:var(--token-space-100, var(--token-scale-100, 4px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.428571;width:var(--token-scale-1200, 48px);min-width:var(--token-scale-1200, 48px);height:var(--token-scale-1200, 48px);color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}.calendar-day[disabled]:not(.calendar-day-constrained){color:var(--token-primitives-neutral-500, #9fa5ad)}.calendar-day.calendar-day-today{color:var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active.calendar-day-adjacent-day{background:var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff))}.calendar-day:focus-visible{border:var(--focus-ring-width) solid var(--focus-ring-color)}@media (any-hover: hover){.calendar-day:not([disabled]):not(:active):hover{background:var(--token-semantics-primary-200, var(--token-primitives-blue-200, #e4e8ff))}}.calendar-day:active,.calendar-day.calendar-day-adjacent-day:active{background:var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa)))}.calendar-day.calendar-day-adjacent-day{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a))}.calendar-day.calendar-day-active.calendar-day-adjacent-day{color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host{--range-background:var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff));--range-track-height:var(--token-scale-1200, 48px)}.calendar-day.calendar-day-range-start{border-radius:var(--token-border-radius-full, 999px) 0 0 var(--token-border-radius-full, 999px);background:var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff));color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}.calendar-day.calendar-day-range-end{border-radius:0 var(--token-border-radius-full, 999px) var(--token-border-radius-full, 999px) 0;background:var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff));color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}.calendar-day.calendar-day-range-start.calendar-day-range-end{border-radius:var(--token-border-radius-full, 999px)}.calendar-day.calendar-day-in-range{border-radius:0;background:none;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}.calendar-day.calendar-day-today.calendar-day-in-range{color:var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}.calendar-day.calendar-day-today.calendar-day-range-start,.calendar-day.calendar-day-today.calendar-day-range-end{color:var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}@media (any-hover: hover){.calendar-day.calendar-day-range-start:not([disabled]):not(:active):hover,.calendar-day.calendar-day-range-end:not([disabled]):not(:active):hover,.calendar-day.calendar-day-in-range:not([disabled]):not(:active):hover{background:var(--token-semantics-primary-200, var(--token-primitives-blue-200, #e4e8ff))}}.calendar-day.calendar-day-range-start:active,.calendar-day.calendar-day-range-end:active,.calendar-day.calendar-day-in-range:active{background:var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa)))}:host(:not(.datetime-readonly)) .calendar-day.calendar-day-range-start[disabled],:host(:not(.datetime-readonly)) .calendar-day.calendar-day-range-end[disabled],:host(:not(.datetime-readonly)) .calendar-day.calendar-day-in-range[disabled]{color:var(--token-primitives-neutral-500, #9fa5ad);opacity:1}:host(.datetime-readonly) .calendar-day.calendar-day-range-start[disabled],:host(.datetime-readonly) .calendar-day.calendar-day-range-end[disabled]{color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host(.datetime-readonly) .calendar-day.calendar-day-in-range[disabled]{color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host(.datetime-readonly) .calendar-day.calendar-day-today.calendar-day-in-range[disabled],:host(.datetime-readonly) .calendar-day.calendar-day-today.calendar-day-range-start[disabled],:host(.datetime-readonly) .calendar-day.calendar-day-today.calendar-day-range-end[disabled]{color:var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}:host .datetime-time{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host .datetime-time .time-header{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.5;color:var(--token-primitives-neutral-800, #6c727a)}:host .datetime-time button{-webkit-padding-start:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-start:var(--token-space-200, var(--token-scale-200, 8px));-webkit-padding-end:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-end:var(--token-space-200, var(--token-scale-200, 8px));padding-top:var(--token-space-0, var(--token-scale-0, 0px));padding-bottom:var(--token-space-0, var(--token-scale-0, 0px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;border-radius:var(--token-border-radius-full, 999px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:var(--token-scale-800, 32px);background-color:var(--token-primitives-neutral-100, #f6f7fa);color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host .datetime-footer{padding-left:0;padding-right:0;padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:0;margin-left:0;margin-right:0;margin-top:var(--token-space-200, var(--token-scale-200, 8px));margin-bottom:0;border-left:0;border-right:0;border-top:solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df);border-bottom:0}:host .datetime-buttons .datetime-action-buttons,.datetime-action-buttons .datetime-action-buttons-container,::slotted([slot=buttons]){-ms-flex-flow:column;flex-flow:column;-ms-flex-align:stretch;align-items:stretch;gap:var(--token-space-200, var(--token-scale-200, 8px))}`;
758
775
 
759
- const datetimeIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host .calendar-body,:host .datetime-year{opacity:0}:host(.datetime-ready) .calendar-body,:host(.datetime-ready) .datetime-year{opacity:1}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host .calendar-action-buttons ion-button{--background:transparent}.calendar-day{border-radius:50%;font-family:var(--ion-font-family, inherit)}:host .calendar-day[disabled]{opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:current-color(base, 0.2);-webkit-box-shadow:0px 0px 0px 4px current-color(base, 0.2);box-shadow:0px 0px 0px 4px current-color(base, 0.2)}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-next-prev{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:start}.calendar-next-prev ion-button ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000)}:host .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year-toggle::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host .datetime-action-buttons{-ms-flex-pack:justify;justify-content:space-between}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}.calendar-month-year-toggle.ion-focused::after{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host .calendar-action-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-action-buttons .calendar-next-prev{-ms-flex-align:stretch;align-items:stretch}.calendar-next-prev ion-button{--padding-top:0;--padding-bottom:0;--padding-start:5px;--padding-end:5px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.calendar-next-prev ion-button ion-icon[slot=icon-only]{font-size:1.65em;line-height:0.67}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2);font-size:min(1.375rem, 35.2px)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons,::slotted([slot=buttons]){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons,::slotted([slot=buttons]){width:100%}`;
776
+ const datetimeIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible;z-index:0}:host .calendar-day-wrapper-range-start::before,:host .calendar-day-wrapper-in-range::before,:host .calendar-day-wrapper-range-end::before{position:absolute;top:50%;height:var(--range-track-height);-webkit-transform:translateY(-50%);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%}:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before{display:none}: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}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host .calendar-body,:host .datetime-year{opacity:0}:host(.datetime-ready) .calendar-body,:host(.datetime-ready) .datetime-year{opacity:1}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host .calendar-action-buttons ion-button{--background:transparent}.calendar-day{border-radius:50%;font-family:var(--ion-font-family, inherit)}:host .calendar-day[disabled]{opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:current-color(base, 0.2);-webkit-box-shadow:0px 0px 0px 4px current-color(base, 0.2);box-shadow:0px 0px 0px 4px current-color(base, 0.2)}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-next-prev{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:start}.calendar-next-prev ion-button ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000)}:host .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year-toggle::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host .datetime-action-buttons{-ms-flex-pack:justify;justify-content:space-between}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}.calendar-month-year-toggle.ion-focused::after{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host .calendar-action-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-action-buttons .calendar-next-prev{-ms-flex-align:stretch;align-items:stretch}.calendar-next-prev ion-button{--padding-top:0;--padding-bottom:0;--padding-start:5px;--padding-end:5px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.calendar-next-prev ion-button ion-icon[slot=icon-only]{font-size:1.65em;line-height:0.67}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2);font-size:min(1.375rem, 35.2px)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-adjacent-day{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;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons,::slotted([slot=buttons]){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons,::slotted([slot=buttons]){width:100%}`;
760
777
 
761
- const datetimeMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host .calendar-body,:host .datetime-year{opacity:0}:host(.datetime-ready) .calendar-body,:host(.datetime-ready) .datetime-year{opacity:1}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host .calendar-action-buttons ion-button{--background:transparent}.calendar-day{border-radius:50%;font-family:var(--ion-font-family, inherit)}:host .calendar-day[disabled]{opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:current-color(base, 0.2);-webkit-box-shadow:0px 0px 0px 4px current-color(base, 0.2);box-shadow:0px 0px 0px 4px current-color(base, 0.2)}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-next-prev{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:start}.calendar-next-prev ion-button ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000)}:host .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year-toggle::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host .datetime-action-buttons{-ms-flex-pack:justify;justify-content:space-between}:host{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}.calendar-next-prev ion-button{--padding-top:12px;--padding-end:12px;--padding-bottom:12px;--padding-start:12px;--border-radius:50%;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:3rem;height:3rem}.calendar-next-prev ion-button ion-icon[slot=icon-only]{font-size:1.8em}.calendar-month-year-toggle{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;min-height:48px;background:transparent;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));z-index:1}.calendar-month-year-toggle.ion-focused::after{opacity:0.04}.calendar-month-year-toggle ion-ripple-effect{color:currentColor}@media (any-hover: hover){.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray));font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}`;
778
+ const datetimeMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible;z-index:0}:host .calendar-day-wrapper-range-start::before,:host .calendar-day-wrapper-in-range::before,:host .calendar-day-wrapper-range-end::before{position:absolute;top:50%;height:var(--range-track-height);-webkit-transform:translateY(-50%);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%}:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before{display:none}: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}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host .calendar-body,:host .datetime-year{opacity:0}:host(.datetime-ready) .calendar-body,:host(.datetime-ready) .datetime-year{opacity:1}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host .calendar-action-buttons ion-button{--background:transparent}.calendar-day{border-radius:50%;font-family:var(--ion-font-family, inherit)}:host .calendar-day[disabled]{opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:current-color(base, 0.2);-webkit-box-shadow:0px 0px 0px 4px current-color(base, 0.2);box-shadow:0px 0px 0px 4px current-color(base, 0.2)}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-next-prev{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:start}.calendar-next-prev ion-button ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000)}:host .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year-toggle::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host .datetime-action-buttons{-ms-flex-pack:justify;justify-content:space-between}:host{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}.calendar-next-prev ion-button{--padding-top:12px;--padding-end:12px;--padding-bottom:12px;--padding-start:12px;--border-radius:50%;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:3rem;height:3rem}.calendar-next-prev ion-button ion-icon[slot=icon-only]{font-size:1.8em}.calendar-month-year-toggle{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;min-height:48px;background:transparent;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));z-index:1}.calendar-month-year-toggle.ion-focused::after{opacity:0.04}.calendar-month-year-toggle ion-ripple-effect{color:currentColor}@media (any-hover: hover){.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray));font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host{--range-background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);--range-track-height:42px}: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)}: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)}: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{border:none;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;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}`;
762
779
 
763
780
  const Datetime = class {
764
781
  constructor(hostRef) {
@@ -853,8 +870,22 @@ const Datetime = class {
853
870
  /**
854
871
  * If `true`, multiple dates can be selected at once. Only
855
872
  * applies to `presentation="date"` and `preferWheel="false"`.
873
+ *
874
+ * @deprecated Use `selectionMode="multiple"` instead.
856
875
  */
857
876
  this.multiple = false;
877
+ /**
878
+ * The text shown in the datetime header when the start of the range
879
+ * is empty, also used by screen readers to announce the start date.
880
+ * Only applies when `selectionMode="range"`.
881
+ */
882
+ this.startDateLabel = 'Start date';
883
+ /**
884
+ * The text shown in the datetime header when the end of the range
885
+ * is empty, also used by screen readers to announce the end date.
886
+ * Only applies when `selectionMode="range"`.
887
+ */
888
+ this.endDateLabel = 'End date';
858
889
  /**
859
890
  * If `true`, a header will be shown above the calendar
860
891
  * picker. This will include both the slotted title, and
@@ -907,8 +938,8 @@ const Datetime = class {
907
938
  */
908
939
  this.preferWheel = false;
909
940
  this.warnIfIncorrectValueUsage = () => {
910
- const { multiple, value } = this;
911
- if (!multiple && Array.isArray(value)) {
941
+ const { value } = this;
942
+ if (!this.isMultipleMode && !this.isRangeMode && Array.isArray(value)) {
912
943
  /**
913
944
  * We do some processing on the `value` array so
914
945
  * that it looks more like an array when logged to
@@ -917,7 +948,13 @@ const Datetime = class {
917
948
  * Default toString() behavior: a,b
918
949
  * Custom behavior: ['a', 'b']
919
950
  */
920
- index.printIonWarning(`[ion-datetime] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
951
+ index.printIonWarning(`[ion-datetime] - An array of values was passed, but neither selectionMode="multiple" nor selectionMode="range" is set. This is incorrect usage and may result in unexpected behaviors.
952
+
953
+ Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
954
+ `, this.el);
955
+ }
956
+ if (this.isRangeMode && Array.isArray(value) && value.length > 2) {
957
+ index.printIonWarning(`[ion-datetime] - More than 2 values were passed with selectionMode="range". Only the first and last values will be used.
921
958
 
922
959
  Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
923
960
  `, this.el);
@@ -944,6 +981,9 @@ const Datetime = class {
944
981
  };
945
982
  this.getActivePart = () => {
946
983
  const { activeParts } = this;
984
+ if (this.isRangeParts(activeParts)) {
985
+ return activeParts.start;
986
+ }
947
987
  return Array.isArray(activeParts) ? activeParts[0] : activeParts;
948
988
  };
949
989
  this.closeParentOverlay = (role) => {
@@ -955,6 +995,33 @@ const Datetime = class {
955
995
  this.setWorkingParts = (parts) => {
956
996
  this.workingParts = Object.assign({}, parts);
957
997
  };
998
+ /**
999
+ * Checks whether the span from start to end contains any disabled day.
1000
+ * Used by range mode to prevent selecting across disabled dates.
1001
+ */
1002
+ this.rangeContainsDisabledDate = (start, end) => {
1003
+ const { minParts, maxParts, parsedDayValues, isDateEnabled } = this;
1004
+ let cursor = format.getNextDay(start);
1005
+ while (format.isBefore(cursor, end) || format.isSameDay(cursor, end)) {
1006
+ if (format.isSameDay(cursor, end))
1007
+ break;
1008
+ if (isDayDisabled(cursor, minParts, maxParts, parsedDayValues)) {
1009
+ return true;
1010
+ }
1011
+ if (isDateEnabled) {
1012
+ try {
1013
+ if (!isDateEnabled(format.convertDataToISO(cursor))) {
1014
+ return true;
1015
+ }
1016
+ }
1017
+ catch (_a) {
1018
+ // Swallow user callback exceptions during validation
1019
+ }
1020
+ }
1021
+ cursor = format.getNextDay(cursor);
1022
+ }
1023
+ return false;
1024
+ };
958
1025
  this.setActiveParts = (parts, removeDate = false) => {
959
1026
  /** if the datetime component is in readonly mode,
960
1027
  * allow browsing of the calendar without changing
@@ -963,7 +1030,7 @@ const Datetime = class {
963
1030
  if (this.readonly) {
964
1031
  return;
965
1032
  }
966
- const { multiple, minParts, maxParts, activeParts } = this;
1033
+ const { minParts, maxParts, activeParts } = this;
967
1034
  /**
968
1035
  * When setting the active parts, it is possible
969
1036
  * to set invalid data. For example,
@@ -976,7 +1043,10 @@ const Datetime = class {
976
1043
  */
977
1044
  const validatedParts = format.validateParts(parts, minParts, maxParts);
978
1045
  this.setWorkingParts(validatedParts);
979
- if (multiple) {
1046
+ if (this.isRangeMode) {
1047
+ this.setActivePartsRange(validatedParts);
1048
+ }
1049
+ else if (this.isMultipleMode) {
980
1050
  const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
981
1051
  if (removeDate) {
982
1052
  this.activeParts = activePartsArray.filter((p) => !format.isSameDay(p, validatedParts));
@@ -994,6 +1064,70 @@ const Datetime = class {
994
1064
  }
995
1065
  this.confirm();
996
1066
  };
1067
+ /**
1068
+ * Handles range selection logic when a day is clicked.
1069
+ *
1070
+ * Creating a new range: first click sets start, second sets end.
1071
+ * Modifying an existing range:
1072
+ * - Before range → new start
1073
+ * - Within range → new end
1074
+ * - After range → new end
1075
+ * If the resulting span contains a disabled date, start a new range instead.
1076
+ */
1077
+ this.setActivePartsRange = (parts) => {
1078
+ const current = this.rangeParts;
1079
+ if (!current) {
1080
+ // No range yet — start a new one
1081
+ this.activeParts = { start: parts };
1082
+ return;
1083
+ }
1084
+ const { start, end } = current;
1085
+ if (end) {
1086
+ // A complete range exists
1087
+ if (format.isBefore(parts, start)) {
1088
+ // Before range → new start
1089
+ this.activeParts = { start: parts };
1090
+ }
1091
+ else if (format.isSameDay(parts, start) || (format.isAfter(parts, start) && format.isBefore(parts, end))) {
1092
+ // Within range (including start) → set new end
1093
+ if (this.rangeContainsDisabledDate(start, parts)) {
1094
+ this.activeParts = { start: parts };
1095
+ }
1096
+ else {
1097
+ this.activeParts = { start, end: parts };
1098
+ }
1099
+ }
1100
+ else {
1101
+ // After or equal to end → new end
1102
+ if (this.rangeContainsDisabledDate(start, parts)) {
1103
+ this.activeParts = { start: parts };
1104
+ }
1105
+ else {
1106
+ this.activeParts = { start, end: parts };
1107
+ }
1108
+ }
1109
+ }
1110
+ else {
1111
+ // Only start date, no end yet
1112
+ if (format.isSameDay(parts, start)) {
1113
+ // Same day → single-day range
1114
+ this.activeParts = { start, end: parts };
1115
+ }
1116
+ else if (format.isBefore(parts, start)) {
1117
+ // Before start → new start
1118
+ this.activeParts = { start: parts };
1119
+ }
1120
+ else {
1121
+ // After start → set end if no disabled dates in between
1122
+ if (this.rangeContainsDisabledDate(start, parts)) {
1123
+ this.activeParts = { start: parts };
1124
+ }
1125
+ else {
1126
+ this.activeParts = { start, end: parts };
1127
+ }
1128
+ }
1129
+ }
1130
+ };
997
1131
  this.initializeKeyboardListeners = () => {
998
1132
  const calendarBodyRef = this.calendarBodyRef;
999
1133
  if (!calendarBodyRef) {
@@ -1391,6 +1525,43 @@ const Datetime = class {
1391
1525
  if (hasValue) {
1392
1526
  format.warnIfValueOutOfBounds(valueToProcess, minParts, maxParts);
1393
1527
  }
1528
+ /**
1529
+ * Range mode: convert the value array into DatetimeRangeParts.
1530
+ */
1531
+ if (this.isRangeMode) {
1532
+ if (hasValue && Array.isArray(valueToProcess)) {
1533
+ let rangeValues = valueToProcess;
1534
+ // If more than 2 entries, use first and last
1535
+ if (rangeValues.length > 2) {
1536
+ rangeValues = [rangeValues[0], rangeValues[rangeValues.length - 1]];
1537
+ }
1538
+ let startParts = rangeValues[0];
1539
+ let endParts = rangeValues.length > 1 ? rangeValues[1] : undefined;
1540
+ // Normalize reversed pairs so earlier date is start
1541
+ if (endParts && format.isAfter(startParts, endParts)) {
1542
+ const temp = startParts;
1543
+ startParts = endParts;
1544
+ endParts = temp;
1545
+ }
1546
+ this.activeParts = endParts ? { start: startParts, end: endParts } : { start: startParts };
1547
+ // Navigate calendar to the start date
1548
+ const targetValue = format.clampDate(startParts, minParts, maxParts);
1549
+ const { month, day, year } = targetValue;
1550
+ const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
1551
+ const bodyIsVisible = el.classList.contains('datetime-ready');
1552
+ const { isGridStyle, showMonthAndYear } = this;
1553
+ if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
1554
+ this.animateToDate(targetValue);
1555
+ }
1556
+ else {
1557
+ this.setWorkingParts({ month, day, year, hour: 0, minute: 0, ampm: 'am' });
1558
+ }
1559
+ }
1560
+ else {
1561
+ this.activeParts = [];
1562
+ }
1563
+ return;
1564
+ }
1394
1565
  /**
1395
1566
  * If there are multiple values, clamp to the last one.
1396
1567
  * This is because the last value is the one that the user
@@ -1551,6 +1722,27 @@ const Datetime = class {
1551
1722
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
1552
1723
  return hasDatePresentation && !preferWheel;
1553
1724
  }
1725
+ get isMultipleMode() {
1726
+ return this.selectionMode === 'multiple' || (this.selectionMode === undefined && this.multiple);
1727
+ }
1728
+ get isRangeMode() {
1729
+ return this.selectionMode === 'range';
1730
+ }
1731
+ /**
1732
+ * Type guard: returns true if the given activeParts is a DatetimeRangeParts object.
1733
+ */
1734
+ isRangeParts(parts) {
1735
+ return this.isRangeMode && parts !== null && typeof parts === 'object' && !Array.isArray(parts) && 'start' in parts;
1736
+ }
1737
+ /**
1738
+ * Returns the current range parts if in range mode, or undefined otherwise.
1739
+ */
1740
+ get rangeParts() {
1741
+ if (this.isRangeParts(this.activeParts)) {
1742
+ return this.activeParts;
1743
+ }
1744
+ return undefined;
1745
+ }
1554
1746
  yearValuesChanged() {
1555
1747
  this.parsedYearValues = format.convertToArrayOfNumbers(this.yearValues);
1556
1748
  }
@@ -1586,6 +1778,18 @@ const Datetime = class {
1586
1778
  */
1587
1779
  async confirm(closeOverlay = false) {
1588
1780
  const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
1781
+ /**
1782
+ * In range mode, only confirm when both start and end are selected.
1783
+ */
1784
+ if (this.isRangeMode) {
1785
+ if (this.isRangeParts(activeParts) && activeParts.end) {
1786
+ this.setValue([format.convertDataToISO(activeParts.start), format.convertDataToISO(activeParts.end)]);
1787
+ }
1788
+ if (closeOverlay) {
1789
+ this.closeParentOverlay(CONFIRM_ROLE);
1790
+ }
1791
+ return;
1792
+ }
1589
1793
  /**
1590
1794
  * We only update the value if the presentation is not a calendar picker.
1591
1795
  */
@@ -1620,6 +1824,22 @@ const Datetime = class {
1620
1824
  * @param startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.
1621
1825
  */
1622
1826
  async reset(startDate) {
1827
+ if (this.isRangeMode) {
1828
+ /**
1829
+ * In range mode, reset clears the full range. If a startDate
1830
+ * is provided, the calendar navigates to that month without
1831
+ * selecting anything so the user begins a fresh selection.
1832
+ */
1833
+ this.activeParts = [];
1834
+ if (startDate) {
1835
+ const parsed = format.parseDate(startDate);
1836
+ if (parsed) {
1837
+ const target = Array.isArray(parsed) ? parsed[0] : parsed;
1838
+ this.setWorkingParts(target);
1839
+ }
1840
+ }
1841
+ return;
1842
+ }
1623
1843
  this.processValue(startDate);
1624
1844
  }
1625
1845
  /**
@@ -1631,6 +1851,14 @@ const Datetime = class {
1631
1851
  * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
1632
1852
  */
1633
1853
  async cancel(closeOverlay = false) {
1854
+ /**
1855
+ * In range mode, clear the visible selection (including partial ranges)
1856
+ * so the component returns to an empty state. The value property is
1857
+ * left untouched, matching single/multiple mode behavior.
1858
+ */
1859
+ if (this.isRangeMode) {
1860
+ this.activeParts = [];
1861
+ }
1634
1862
  this.ionCancel.emit();
1635
1863
  if (closeOverlay) {
1636
1864
  this.closeParentOverlay(CANCEL_ROLE);
@@ -1811,8 +2039,11 @@ const Datetime = class {
1811
2039
  });
1812
2040
  }
1813
2041
  componentWillLoad() {
1814
- const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
1815
- if (multiple) {
2042
+ const { el, formatOptions, highlightedDates, multiple, selectionMode, presentation, preferWheel } = this;
2043
+ if (selectionMode === undefined && multiple) {
2044
+ index.printIonWarning('[ion-datetime] - The "multiple" property is deprecated. Use selectionMode="multiple" instead.', el);
2045
+ }
2046
+ if (this.isMultipleMode) {
1816
2047
  if (presentation !== 'date') {
1817
2048
  index.printIonWarning('[ion-datetime] - Multiple date selection is only supported for presentation="date".', el);
1818
2049
  }
@@ -1820,6 +2051,17 @@ const Datetime = class {
1820
2051
  index.printIonWarning('[ion-datetime] - Multiple date selection is not supported with preferWheel="true".', el);
1821
2052
  }
1822
2053
  }
2054
+ if (this.isRangeMode) {
2055
+ if (presentation !== 'date') {
2056
+ index.printIonWarning('[ion-datetime] - Range selection is only supported for presentation="date".', el);
2057
+ }
2058
+ if (preferWheel) {
2059
+ index.printIonWarning('[ion-datetime] - Range selection is not supported with preferWheel="true".', el);
2060
+ }
2061
+ }
2062
+ if (selectionMode !== undefined && multiple) {
2063
+ index.printIonWarning('[ion-datetime] - Both "selectionMode" and "multiple" are set. "selectionMode" takes precedence.', el);
2064
+ }
1823
2065
  if (highlightedDates !== undefined) {
1824
2066
  if (presentation !== 'date' && presentation !== 'date-time' && presentation !== 'time-date') {
1825
2067
  index.printIonWarning('[ion-datetime] - The highlightedDates property is only supported with the date, date-time, and time-date presentations.', el);
@@ -1874,6 +2116,12 @@ const Datetime = class {
1874
2116
  * is disabled or readonly.
1875
2117
  */
1876
2118
  const isButtonDisabled = disabled || readonly;
2119
+ /**
2120
+ * In range mode, the confirm button should be disabled until
2121
+ * both a start and end date have been selected.
2122
+ */
2123
+ const isRangeIncomplete = this.isRangeMode && (!this.isRangeParts(this.activeParts) || !this.activeParts.end);
2124
+ const isConfirmDisabled = isButtonDisabled || isRangeIncomplete;
1877
2125
  const confirmFill = theme === 'ionic' ? 'solid' : undefined;
1878
2126
  const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
1879
2127
  if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
@@ -1893,7 +2141,7 @@ const Datetime = class {
1893
2141
  return (index.h("div", { class: "datetime-footer" }, index.h("div", { class: "datetime-buttons" }, index.h("div", { class: {
1894
2142
  ['datetime-action-buttons']: true,
1895
2143
  ['has-clear-button']: this.showClearButton,
1896
- } }, index.h("slot", { name: "buttons" }, showDefaultButtons && (index.h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), index.h("div", { class: "datetime-action-buttons-container" }, showClearButton && (index.h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (index.h("ion-button", { id: "confirm-button", fill: confirmFill, color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText))))))));
2144
+ } }, index.h("slot", { name: "buttons" }, showDefaultButtons && (index.h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), index.h("div", { class: "datetime-action-buttons-container" }, showClearButton && (index.h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (index.h("ion-button", { id: "confirm-button", fill: confirmFill, color: this.color, onClick: () => this.confirm(true), disabled: isConfirmDisabled }, this.doneText))))))));
1897
2145
  }
1898
2146
  /**
1899
2147
  * Wheel picker render methods
@@ -2193,7 +2441,7 @@ const Datetime = class {
2193
2441
  'calendar-month-disabled': !isWorkingMonth && swipeDisabled,
2194
2442
  } }, index.h("div", { class: "calendar-month-grid" }, getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map((dateObject, index$1) => {
2195
2443
  const { day, dayOfWeek, isAdjacentDay } = dateObject;
2196
- const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
2444
+ const { el, highlightedDates, isDateEnabled, showAdjacentDays } = this;
2197
2445
  let _month = month;
2198
2446
  let _year = year;
2199
2447
  if (showAdjacentDays && isAdjacentDay && day !== null) {
@@ -2222,7 +2470,7 @@ const Datetime = class {
2222
2470
  }
2223
2471
  const referenceParts = { month: _month, day, year: _year, isAdjacentDay };
2224
2472
  const isCalendarPadding = day === null;
2225
- const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled, text, } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
2473
+ const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled, isRangeStart, isRangeEnd, isInRange, text, } = getCalendarDayState(this.locale, referenceParts, this.isRangeParts(this.activeParts) ? [] : this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues, this.rangeParts);
2226
2474
  const dateIsoString = format.convertDataToISO(referenceParts);
2227
2475
  let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
2228
2476
  if (!isCalDayDisabled && isDateEnabled !== undefined) {
@@ -2245,24 +2493,50 @@ const Datetime = class {
2245
2493
  */
2246
2494
  const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
2247
2495
  const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
2496
+ /**
2497
+ * Determine if this day is part of the range selection.
2498
+ * Range styling takes priority over highlightedDates.
2499
+ */
2500
+ const isPartOfRange = isRangeStart || isRangeEnd || isInRange;
2248
2501
  let dateStyle = undefined;
2249
2502
  /**
2250
- * Custom highlight styles should not override the style for selected dates,
2251
- * nor apply to "filler days" at the start of the grid.
2503
+ * Custom highlight styles should not override the style for selected dates
2504
+ * or range selection, nor apply to "filler days" at the start of the grid.
2252
2505
  */
2253
- if (highlightedDates !== undefined && !isActive && day !== null && !isAdjacentDay) {
2506
+ if (highlightedDates !== undefined && !isActive && !isPartOfRange && day !== null && !isAdjacentDay) {
2254
2507
  dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
2255
2508
  }
2256
2509
  let dateParts = undefined;
2257
2510
  // "Filler days" at the beginning of the grid should not get the calendar day
2258
2511
  // CSS parts added to them
2259
2512
  if (!isCalendarPadding && !isAdjacentDay) {
2260
- dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}`;
2513
+ dateParts = `calendar-day${isActive || isRangeStart || isRangeEnd ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}${isRangeStart ? ' range-start range-selection' : ''}${isRangeEnd ? ' range-end range-selection' : ''}${isInRange ? ' range-selection' : ''}`;
2261
2514
  }
2262
2515
  else if (isAdjacentDay) {
2263
2516
  dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
2264
2517
  }
2265
- return (index.h("div", { class: "calendar-day-wrapper" }, index.h("button", {
2518
+ /**
2519
+ * Build the wrapper's shadow part attribute for range track styling.
2520
+ */
2521
+ const wrapperParts = isPartOfRange && !isCalendarPadding && !isAdjacentDay ? 'range-track' : undefined;
2522
+ /**
2523
+ * Build the aria-label for range mode accessibility.
2524
+ */
2525
+ let rangeAriaLabel = ariaLabel;
2526
+ if (this.isRangeMode && ariaLabel) {
2527
+ if (isRangeStart) {
2528
+ rangeAriaLabel = `${ariaLabel}, ${this.startDateLabel}`;
2529
+ }
2530
+ if (isRangeEnd) {
2531
+ rangeAriaLabel = `${ariaLabel}, ${this.endDateLabel}`;
2532
+ }
2533
+ }
2534
+ return (index.h("div", { class: {
2535
+ 'calendar-day-wrapper': true,
2536
+ 'calendar-day-wrapper-range-start': isRangeStart,
2537
+ 'calendar-day-wrapper-in-range': isInRange,
2538
+ 'calendar-day-wrapper-range-end': isRangeEnd,
2539
+ }, part: wrapperParts }, index.h("button", {
2266
2540
  // We need to use !important for the inline styles here because
2267
2541
  // otherwise the CSS shadow parts will override these styles.
2268
2542
  // See https://github.com/WICG/webcomponents/issues/847
@@ -2278,25 +2552,37 @@ const Datetime = class {
2278
2552
  }, tabindex: "-1", "data-day": day, "data-month": _month, "data-year": _year, "data-index": index$1, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
2279
2553
  'calendar-day-padding': isCalendarPadding,
2280
2554
  'calendar-day': true,
2281
- 'calendar-day-active': isActive,
2555
+ 'calendar-day-active': isActive || isRangeStart || isRangeEnd,
2282
2556
  'calendar-day-constrained': isCalDayConstrained,
2283
2557
  'calendar-day-today': isToday,
2284
2558
  'calendar-day-adjacent-day': isAdjacentDay,
2285
- }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
2559
+ 'calendar-day-range-start': isRangeStart,
2560
+ 'calendar-day-range-end': isRangeEnd,
2561
+ 'calendar-day-in-range': isInRange,
2562
+ }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": isActive || isRangeStart || isRangeEnd ? 'true' : ariaSelected, "aria-label": rangeAriaLabel, onClick: () => {
2286
2563
  if (isCalendarPadding) {
2287
2564
  return;
2288
2565
  }
2289
2566
  if (isAdjacentDay) {
2290
2567
  // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
2291
2568
  this.el.blur();
2292
- this.activeParts = Object.assign(Object.assign({}, activePart), referenceParts);
2569
+ if (!this.isRangeMode) {
2570
+ this.activeParts = Object.assign(Object.assign({}, activePart), referenceParts);
2571
+ }
2293
2572
  this.animateToDate(referenceParts);
2294
- this.confirm();
2573
+ if (this.isRangeMode) {
2574
+ this.setActiveParts(referenceParts);
2575
+ }
2576
+ else {
2577
+ this.confirm();
2578
+ }
2295
2579
  }
2296
2580
  else {
2297
2581
  this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), referenceParts));
2298
- // Multiple only needs date info so we can wipe out other fields like time.
2299
- if (multiple) {
2582
+ if (this.isRangeMode) {
2583
+ this.setActiveParts(referenceParts);
2584
+ }
2585
+ else if (this.isMultipleMode) {
2300
2586
  this.setActiveParts(referenceParts, isActive);
2301
2587
  }
2302
2588
  else {
@@ -2367,10 +2653,23 @@ const Datetime = class {
2367
2653
  }
2368
2654
  getHeaderSelectedDateText() {
2369
2655
  var _a;
2370
- const { activeParts, formatOptions, multiple, titleSelectedDatesFormatter } = this;
2656
+ const { activeParts, formatOptions, titleSelectedDatesFormatter } = this;
2371
2657
  const isArray = Array.isArray(activeParts);
2658
+ const dateFormatOptions = (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { weekday: 'short', month: 'short', day: 'numeric' };
2372
2659
  let headerText;
2373
- if (multiple && isArray && activeParts.length !== 1) {
2660
+ if (this.isRangeMode) {
2661
+ headerText = this.getRangeHeaderText(dateFormatOptions);
2662
+ if (titleSelectedDatesFormatter !== undefined) {
2663
+ try {
2664
+ const rangeValues = this.getRangeValueArray();
2665
+ headerText = titleSelectedDatesFormatter(rangeValues);
2666
+ }
2667
+ catch (e) {
2668
+ index.printIonError('[ion-datetime] - Exception in provided `titleSelectedDatesFormatter`:', e);
2669
+ }
2670
+ }
2671
+ }
2672
+ else if (this.isMultipleMode && isArray && activeParts.length !== 1) {
2374
2673
  headerText = `${activeParts.length} days`; // default/fallback for multiple selection
2375
2674
  if (titleSelectedDatesFormatter !== undefined) {
2376
2675
  try {
@@ -2383,10 +2682,35 @@ const Datetime = class {
2383
2682
  }
2384
2683
  else {
2385
2684
  // for exactly 1 day selected (multiple set or not), show a formatted version of that
2386
- headerText = format.getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { weekday: 'short', month: 'short', day: 'numeric' });
2685
+ headerText = format.getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), dateFormatOptions);
2387
2686
  }
2388
2687
  return headerText;
2389
2688
  }
2689
+ /**
2690
+ * Returns the formatted range header text.
2691
+ * Shows "Start date - End date" with placeholders from startDateLabel/endDateLabel.
2692
+ */
2693
+ getRangeHeaderText(dateFormatOptions) {
2694
+ const range = this.rangeParts;
2695
+ if (!range) {
2696
+ return `${this.startDateLabel} - ${this.endDateLabel}`;
2697
+ }
2698
+ const startText = format.getLocalizedDateTime(this.locale, range.start, dateFormatOptions);
2699
+ const endText = range.end ? format.getLocalizedDateTime(this.locale, range.end, dateFormatOptions) : this.endDateLabel;
2700
+ return `${startText} - ${endText}`;
2701
+ }
2702
+ /**
2703
+ * Returns the current range value as an ISO string array for
2704
+ * titleSelectedDatesFormatter and ionChange.
2705
+ */
2706
+ getRangeValueArray() {
2707
+ const range = this.rangeParts;
2708
+ if (!range)
2709
+ return [];
2710
+ if (!range.end)
2711
+ return [format.convertDataToISO(range.start)];
2712
+ return [format.convertDataToISO(range.start), format.convertDataToISO(range.end)];
2713
+ }
2390
2714
  renderHeader(showExpandedHeader = true) {
2391
2715
  const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null;
2392
2716
  if (!hasSlottedTitle && !this.showDefaultTitle) {
@@ -2544,7 +2868,7 @@ const Datetime = class {
2544
2868
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
2545
2869
  const hasWheelVariant = hasDatePresentation && preferWheel;
2546
2870
  helpers.renderHiddenInput(true, el, name, format.formatValue(value), disabled);
2547
- return (index.h(index.Host, { key: '04fb1740b1d722d20cdbb32b19d9a3b7d3334db0', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
2871
+ return (index.h(index.Host, { key: '8ec46f2a5bc855c3d6210f72305b66655ad59b93', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
2548
2872
  [theme$1]: true,
2549
2873
  ['datetime-readonly']: readonly,
2550
2874
  ['datetime-disabled']: disabled,
@@ -2554,7 +2878,7 @@ const Datetime = class {
2554
2878
  [`datetime-size-${size}`]: true,
2555
2879
  [`datetime-prefer-wheel`]: hasWheelVariant,
2556
2880
  [`datetime-grid`]: isGridStyle,
2557
- })) }, index.h("div", { key: '0cbb85b4c71e521c81b37a98da0123a1c3a15fac', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme$1)));
2881
+ })) }, index.h("div", { key: 'b7bf9b1e681b8d1a5a24a27c758a528c03a203fc', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme$1)));
2558
2882
  }
2559
2883
  get el() { return index.getElement(this); }
2560
2884
  static get watchers() { return {