@ionic/core 9.0.11-dev.11793728481.1fc40367 → 9.0.11-dev.11793792571.1765ff65

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 (71) hide show
  1. package/components/ion-badge.js +1 -1
  2. package/components/ion-button.js +1 -1
  3. package/components/ion-content.js +1 -1
  4. package/components/ion-datetime-button.js +1 -1
  5. package/components/ion-datetime.js +1 -1
  6. package/components/ion-input-password-toggle.js +1 -1
  7. package/components/ion-item-option.js +1 -1
  8. package/components/ion-select-modal.js +1 -1
  9. package/components/ion-select.js +1 -1
  10. package/components/{p-B7ExaLVL.js → p-BCQSEpww.js} +1 -1
  11. package/components/p-Da8LCPwo.js +4 -0
  12. package/components/p-DirxxGzo.js +4 -0
  13. package/components/{p-BCYVFy50.js → p-py1vB-7U.js} +1 -1
  14. package/css/ionic/bundle.ionic.css +1 -1
  15. package/css/ionic/bundle.ionic.css.map +1 -1
  16. package/css/ionic/core.ionic.css +1 -1
  17. package/css/ionic/core.ionic.css.map +1 -1
  18. package/dist/cjs/ion-app_8.cjs.entry.js +13 -5
  19. package/dist/cjs/ion-avatar_3.cjs.entry.js +1 -1
  20. package/dist/cjs/ion-button_2.cjs.entry.js +1 -1
  21. package/dist/cjs/ion-datetime-button.cjs.entry.js +6 -33
  22. package/dist/cjs/ion-datetime.cjs.entry.js +36 -353
  23. package/dist/cjs/ion-item-option_3.cjs.entry.js +1 -1
  24. package/dist/cjs/ionic.cjs.js +1 -1
  25. package/dist/cjs/loader.cjs.js +1 -1
  26. package/dist/collection/components/badge/badge.ionic.css +1 -1
  27. package/dist/collection/components/button/button.ionic.css +1 -1
  28. package/dist/collection/components/content/content.ionic.css +352 -0
  29. package/dist/collection/components/content/{content.css → content.ios.css} +65 -41
  30. package/dist/collection/components/content/content.js +9 -5
  31. package/dist/collection/components/content/content.md.css +347 -0
  32. package/dist/collection/components/datetime/datetime.ionic.css +5 -179
  33. package/dist/collection/components/datetime/datetime.ios.css +2 -134
  34. package/dist/collection/components/datetime/datetime.js +33 -406
  35. package/dist/collection/components/datetime/datetime.md.css +0 -120
  36. package/dist/collection/components/datetime/utils/state.js +1 -18
  37. package/dist/collection/components/datetime-button/datetime-button.js +6 -34
  38. package/dist/collection/components/item-option/item-option.ionic.css +1 -1
  39. package/dist/docs.json +127 -160
  40. package/dist/esm/{format-DUHrIiJq.js → format-NT7iHsbA.js} +1 -1
  41. package/dist/esm/ion-app_8.entry.js +13 -5
  42. package/dist/esm/ion-avatar_3.entry.js +1 -1
  43. package/dist/esm/ion-button_2.entry.js +1 -1
  44. package/dist/esm/ion-datetime-button.entry.js +7 -34
  45. package/dist/esm/ion-datetime.entry.js +37 -354
  46. package/dist/esm/ion-item-option_3.entry.js +1 -1
  47. package/dist/esm/ionic.js +1 -1
  48. package/dist/esm/loader.js +1 -1
  49. package/dist/html.html-data.json +0 -20
  50. package/dist/ionic/ionic.esm.js +1 -1
  51. package/dist/ionic/p-0743a26a.entry.js +4 -0
  52. package/dist/ionic/p-1d709b26.entry.js +4 -0
  53. package/dist/ionic/p-39e3be74.entry.js +4 -0
  54. package/dist/ionic/p-6e4ee264.entry.js +4 -0
  55. package/dist/ionic/{p-CaOPF8Xt.js → p-BtccSO5J.js} +1 -1
  56. package/dist/ionic/p-ad46d2fd.entry.js +4 -0
  57. package/dist/ionic/{p-8231e914.entry.js → p-b51eb274.entry.js} +1 -1
  58. package/dist/types/components/datetime/datetime-interface.d.ts +0 -4
  59. package/dist/types/components/datetime/datetime.d.ts +2 -71
  60. package/dist/types/components/datetime/utils/state.d.ts +2 -5
  61. package/dist/types/components.d.ts +0 -33
  62. package/hydrate/index.js +59 -403
  63. package/hydrate/index.mjs +59 -403
  64. package/package.json +1 -1
  65. package/components/p-ByE0slik.js +0 -4
  66. package/components/p-DktrWeJE.js +0 -4
  67. package/dist/ionic/p-41680415.entry.js +0 -4
  68. package/dist/ionic/p-56d77e95.entry.js +0 -4
  69. package/dist/ionic/p-a52cba2f.entry.js +0 -4
  70. package/dist/ionic/p-b30b468d.entry.js +0 -4
  71. package/dist/ionic/p-ceca04fb.entry.js +0 -4
@@ -9,7 +9,7 @@ import { i as isRTL } from './dir-Dj4J3LkD.js';
9
9
  import { c as createColorClasses } from './theme-BUF_V-Kg.js';
10
10
  import { b as chevronForward, c as chevronBack, d as caretDownSharp, e as chevronDown, f as caretUpSharp } from './index-BkJpfpXI.js';
11
11
  import { b as getIonMode, c as getIonTheme } from './ionic-global-DSbFWXp3.js';
12
- import { r as removeDateTzOffset, g as getNextMonth, a as getPreviousMonth, b as getTodayLabel, c as getYear, d as getHourCycle, e as getInternalHourValue, f as getFormattedHour, h as addTimePadding, i as getLocalizedDayPeriod, j as isBefore, k as isSameDay, l as isAfter, m as is24Hour, n as getNumDaysInMonth, o as getDay, p as generateDayAriaLabel, q as getNextDay, s as convertDataToISO, v as validateParts, t as getPartsFromCalendarDay, u as getNextYear, w as getPreviousYear, x as getEndOfWeek, y as getStartOfWeek, z as getPreviousDay, A as getPreviousWeek, B as getNextWeek, C as parseMinParts, D as parseMaxParts, E as parseDate, F as warnIfValueOutOfBounds, G as clampDate, H as parseAmPm, I as convertToArrayOfNumbers, J as getClosestValidDate, K as isMonthFirstLocale, L as isLocaleDayPeriodRTL, M as calculateHourFromAMPM, N as getMonthAndYear, O as getLocalizedTime, P as getLocalizedDateTime, Q as formatValue } from './format-DUHrIiJq.js';
12
+ import { r as removeDateTzOffset, g as getNextMonth, a as getPreviousMonth, b as getTodayLabel, c as getYear, d as getHourCycle, e as getInternalHourValue, f as getFormattedHour, h as addTimePadding, i as getLocalizedDayPeriod, j as isBefore, k as isSameDay, l as isAfter, m as is24Hour, n as getNumDaysInMonth, o as getDay, p as generateDayAriaLabel, v as validateParts, q as getPartsFromCalendarDay, s as getNextYear, t as getPreviousYear, u as getEndOfWeek, w as getStartOfWeek, x as getPreviousDay, y as getNextDay, z as getPreviousWeek, A as getNextWeek, B as parseMinParts, C as parseMaxParts, D as parseDate, E as warnIfValueOutOfBounds, F as parseAmPm, G as clampDate, H as convertToArrayOfNumbers, I as convertDataToISO, J as getClosestValidDate, K as isMonthFirstLocale, L as isLocaleDayPeriodRTL, M as calculateHourFromAMPM, N as getMonthAndYear, O as getLocalizedTime, P as getLocalizedDateTime, Q as formatValue } from './format-NT7iHsbA.js';
13
13
  import './index-ZjP4CjeZ.js';
14
14
  import './framework-delegate-99Ms_INy.js';
15
15
  import './gesture-controller-B_gJaBk0.js';
@@ -605,7 +605,7 @@ const isDayDisabled = (refParts, minParts, maxParts, dayValues) => {
605
605
  * Given a locale, a date, the selected date(s), and today's date,
606
606
  * generate the state for a given calendar day button.
607
607
  */
608
- const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues, rangeParts) => {
608
+ const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues) => {
609
609
  /**
610
610
  * activeParts signals what day(s) are currently selected in the datetime.
611
611
  * If multiple="true", this will be an array, but the logic in this util
@@ -621,20 +621,6 @@ const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts
621
621
  const isActive = activePartsArray.find((parts) => isSameDay(refParts, parts)) !== undefined;
622
622
  const isToday = isSameDay(refParts, todayParts);
623
623
  const disabled = isDayDisabled(refParts, minParts, maxParts, dayValues);
624
- /**
625
- * Range state: determine if this day is the range start, end, or in between.
626
- */
627
- let isRangeStart = false;
628
- let isRangeEnd = false;
629
- let isInRange = false;
630
- if (rangeParts) {
631
- const { start, end } = rangeParts;
632
- isRangeStart = isSameDay(refParts, start);
633
- if (end) {
634
- isRangeEnd = isSameDay(refParts, end);
635
- isInRange = !disabled && !isRangeStart && !isRangeEnd && isAfter(refParts, start) && isBefore(refParts, end);
636
- }
637
- }
638
624
  /**
639
625
  * Note that we always return one object regardless of whether activeParts
640
626
  * was an array, since we pare down to one value for isActive.
@@ -643,9 +629,6 @@ const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts
643
629
  disabled,
644
630
  isActive,
645
631
  isToday,
646
- isRangeStart,
647
- isRangeEnd,
648
- isInRange,
649
632
  ariaSelected: isActive ? 'true' : null,
650
633
  ariaLabel: generateDayAriaLabel(locale, isToday, refParts),
651
634
  text: refParts.day != null ? getDay(locale, refParts) : null,
@@ -768,11 +751,11 @@ const checkForPresentationFormatMismatch = (el, presentation, formatOptions) =>
768
751
  }
769
752
  };
770
753
 
771
- 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-in-range::before,:host .calendar-day-wrapper-range-start::before,:host .calendar-day-wrapper-range-end::before{position:absolute;top:50%;inset-inline-start:0;inset-inline-end:0;height:var(--range-track-height);-webkit-transform:translateY(-50%);transform:translateY(-50%);background:-webkit-gradient(linear, left top, left bottom, from(var(--range-background)), to(var(--range-background))), -webkit-gradient(linear, left top, left bottom, from(var(--background)), to(var(--background)));background:linear-gradient(var(--range-background), var(--range-background)), linear-gradient(var(--background), var(--background));content:"";z-index:-1}:host .calendar-day-wrapper-range-start::before{inset-inline-start:50%}:host .calendar-day-wrapper-range-end::before{inset-inline-end:50%}:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before{inset-inline-end:-1px}:host .calendar-day-wrapper-in-range:nth-child(7n)::before,:host .calendar-day-wrapper-range-start:nth-child(7n)::before{inset-inline-end:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-in-range:nth-child(7n+1)::before,:host .calendar-day-wrapper-range-end:nth-child(7n+1)::before{inset-inline-start:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before{display:none}:host(.datetime-disabled.datetime-range) .calendar-month-grid{opacity:0.4}:host(.datetime-disabled.datetime-range) .calendar-month-grid .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-text-disabled, var(--token-primitives-neutral-500, #9fa5ad))}.calendar-day.calendar-day-today{color:var(--token-text-select, 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-bg-primary-subtle-default, 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):not(.calendar-day-in-range):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-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff)));--range-track-height:var(--token-scale-1200, 48px)}:host .calendar-day.calendar-day-range-start,:host .calendar-day.calendar-day-range-end{border-radius:var(--token-border-radius-full, 999px);background:var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));color:var(--token-text-inverse, var(--token-primitives-base-white, #ffffff))}.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-text-select, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}:host .calendar-day.calendar-day-today.calendar-day-range-start,:host .calendar-day.calendar-day-today.calendar-day-range-end{color:var(--token-text-inverse, var(--token-primitives-base-white, #ffffff))}@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{background:var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)))}}.calendar-day.calendar-day-range-start:active,.calendar-day.calendar-day-range-end:active{background:var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)))}.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(.datetime-disabled.datetime-range) .calendar-day[disabled]:not(.calendar-day-constrained){color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host(.datetime-disabled.datetime-range) .calendar-day.calendar-day-adjacent-day[disabled]{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a))}:host(.datetime-disabled.datetime-range) .calendar-day.calendar-day-today[disabled]{color:var(--token-text-select, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}:host(.datetime-disabled.datetime-range) .calendar-day.calendar-day-range-start[disabled],:host(.datetime-disabled.datetime-range) .calendar-day.calendar-day-range-end[disabled]{color:var(--token-text-inverse, var(--token-primitives-base-white, #ffffff))}:host(.datetime-readonly) .calendar-day.calendar-day-range-start[disabled],:host(.datetime-readonly) .calendar-day.calendar-day-range-end[disabled]{color:var(--token-text-inverse, var(--token-primitives-base-white, #ffffff))}: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]{color:var(--token-text-select, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}: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-text-inverse, var(--token-primitives-base-white, #ffffff))}: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))}`;
754
+ 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))}`;
772
755
 
773
- 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-in-range::before,:host .calendar-day-wrapper-range-start::before,:host .calendar-day-wrapper-range-end::before{position:absolute;top:50%;inset-inline-start:0;inset-inline-end:0;height:var(--range-track-height);-webkit-transform:translateY(-50%);transform:translateY(-50%);background:-webkit-gradient(linear, left top, left bottom, from(var(--range-background)), to(var(--range-background))), -webkit-gradient(linear, left top, left bottom, from(var(--background)), to(var(--background)));background:linear-gradient(var(--range-background), var(--range-background)), linear-gradient(var(--background), var(--background));content:"";z-index:-1}:host .calendar-day-wrapper-range-start::before{inset-inline-start:50%}:host .calendar-day-wrapper-range-end::before{inset-inline-end:50%}:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before{inset-inline-end:-1px}:host .calendar-day-wrapper-in-range:nth-child(7n)::before,:host .calendar-day-wrapper-range-start:nth-child(7n)::before{inset-inline-end:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-in-range:nth-child(7n+1)::before,:host .calendar-day-wrapper-range-end:nth-child(7n+1)::before{inset-inline-start:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before{display:none}:host(.datetime-disabled.datetime-range) .calendar-month-grid{opacity:0.4}:host(.datetime-disabled.datetime-range) .calendar-month-grid .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:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-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-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.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-primary, #0054e9)}:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host(.ion-color) .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-primary-rgb, 0, 84, 233), 0.12);font-size:min(1.375rem, 35.2px)}:host(.ion-color) .calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.12)}:host .calendar-day.calendar-day-today{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .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-primary, #0054e9);font-weight:600}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base)}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-primary, #0054e9);color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .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.12);--range-track-height:40px;--range-track-edge-overflow:8px}:host(.ion-color){--range-background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.datetime-range) .calendar-day-wrapper{height:auto}:host .calendar-day.calendar-day-range-start,:host .calendar-day.calendar-day-range-end{border-radius:50%;background:var(--ion-color-primary, #0054e9);color:var(--ion-color-primary-contrast, #fff);font-weight:600}: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 .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%}`;
756
+ 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:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-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-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.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-primary, #0054e9)}:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host(.ion-color) .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-primary-rgb, 0, 84, 233), 0.2);font-size:min(1.375rem, 35.2px)}:host(.ion-color) .calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .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-primary, #0054e9);font-weight:600}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base)}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-primary, #0054e9);color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .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%}`;
774
757
 
775
- 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-in-range::before,:host .calendar-day-wrapper-range-start::before,:host .calendar-day-wrapper-range-end::before{position:absolute;top:50%;inset-inline-start:0;inset-inline-end:0;height:var(--range-track-height);-webkit-transform:translateY(-50%);transform:translateY(-50%);background:-webkit-gradient(linear, left top, left bottom, from(var(--range-background)), to(var(--range-background))), -webkit-gradient(linear, left top, left bottom, from(var(--background)), to(var(--background)));background:linear-gradient(var(--range-background), var(--range-background)), linear-gradient(var(--background), var(--background));content:"";z-index:-1}:host .calendar-day-wrapper-range-start::before{inset-inline-start:50%}:host .calendar-day-wrapper-range-end::before{inset-inline-end:50%}:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before{inset-inline-end:-1px}:host .calendar-day-wrapper-in-range:nth-child(7n)::before,:host .calendar-day-wrapper-range-start:nth-child(7n)::before{inset-inline-end:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-in-range:nth-child(7n+1)::before,:host .calendar-day-wrapper-range-end:nth-child(7n+1)::before{inset-inline-start:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before{display:none}:host(.datetime-disabled.datetime-range) .calendar-month-grid{opacity:0.4}:host(.datetime-disabled.datetime-range) .calendar-month-grid .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:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-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-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.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-primary-contrast, #fff)}:host(.ion-color){--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-primary, #0054e9);color:var(--title-color)}:host(.ion-color) .datetime-header{background:var(--ion-color-base)}: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-primary, #0054e9);color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .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-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .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-primary, #0054e9);background:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .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.12);--range-track-height:42px;--range-track-edge-overflow:10px}:host(.ion-color){--range-background:rgba(var(--ion-color-base-rgb), 0.12)}:host .calendar-day.calendar-day-range-start,:host .calendar-day.calendar-day-range-end{border-radius:50%;background:var(--ion-color-primary, #0054e9);color:var(--ion-color-primary-contrast, #fff)}: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 .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}`;
758
+ 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:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-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-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.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-primary-contrast, #fff)}:host(.ion-color){--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-primary, #0054e9);color:var(--title-color)}:host(.ion-color) .datetime-header{background:var(--ion-color-base)}: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-primary, #0054e9);color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .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-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .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-primary, #0054e9);background:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .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}`;
776
759
 
777
760
  const Datetime = class {
778
761
  constructor(hostRef) {
@@ -785,11 +768,6 @@ const Datetime = class {
785
768
  this.ionStyle = createEvent(this, "ionStyle", 7);
786
769
  this.ionRender = createEvent(this, "ionRender", 7);
787
770
  this.inputId = `ion-dt-${datetimeIds++}`;
788
- /**
789
- * Set when the user completes a range interactively, so processValue
790
- * can skip navigation and keep the calendar on the current month.
791
- */
792
- this.rangeCompletedInteractively = false;
793
771
  /**
794
772
  * Set when the user selects a value, cleared when it's confirmed
795
773
  * or `processValue` runs (`reset()`, or `value` being set to a
@@ -863,22 +841,8 @@ const Datetime = class {
863
841
  /**
864
842
  * If `true`, multiple dates can be selected at once. Only
865
843
  * applies to `presentation="date"` and `preferWheel="false"`.
866
- *
867
- * @deprecated Use `selectionMode="multiple"` instead.
868
844
  */
869
845
  this.multiple = false;
870
- /**
871
- * The text shown in the datetime header when the start of the range
872
- * is empty, also used by screen readers to announce the start date.
873
- * Only applies when `selectionMode="range"`.
874
- */
875
- this.startDateLabel = 'Start date';
876
- /**
877
- * The text shown in the datetime header when the end of the range
878
- * is empty, also used by screen readers to announce the end date.
879
- * Only applies when `selectionMode="range"`.
880
- */
881
- this.endDateLabel = 'End date';
882
846
  /**
883
847
  * If `true`, a header will be shown above the calendar
884
848
  * picker. This will include both the slotted title, and
@@ -931,8 +895,8 @@ const Datetime = class {
931
895
  */
932
896
  this.preferWheel = false;
933
897
  this.warnIfIncorrectValueUsage = () => {
934
- const { value } = this;
935
- if (!this.isMultipleMode && !this.isRangeMode && Array.isArray(value)) {
898
+ const { multiple, value } = this;
899
+ if (!multiple && Array.isArray(value)) {
936
900
  /**
937
901
  * We do some processing on the `value` array so
938
902
  * that it looks more like an array when logged to
@@ -941,13 +905,7 @@ const Datetime = class {
941
905
  * Default toString() behavior: a,b
942
906
  * Custom behavior: ['a', 'b']
943
907
  */
944
- 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.
945
-
946
- Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
947
- `, this.el);
948
- }
949
- if (this.isRangeMode && Array.isArray(value) && value.length > 2) {
950
- printIonWarning(`[ion-datetime] - More than 2 values were passed with selectionMode="range". Only the first and last values will be used.
908
+ 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
909
 
952
910
  Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
953
911
  `, this.el);
@@ -973,9 +931,6 @@ const Datetime = class {
973
931
  };
974
932
  this.getActivePart = () => {
975
933
  const { activeParts } = this;
976
- if (this.isRangeParts(activeParts)) {
977
- return activeParts.start;
978
- }
979
934
  return Array.isArray(activeParts) ? activeParts[0] : activeParts;
980
935
  };
981
936
  this.closeParentOverlay = (role) => {
@@ -990,33 +945,6 @@ const Datetime = class {
990
945
  ...parts,
991
946
  };
992
947
  };
993
- /**
994
- * Checks whether the span from start to end contains any disabled day.
995
- * Used by range mode to prevent selecting across disabled dates.
996
- */
997
- this.rangeContainsDisabledDate = (start, end) => {
998
- const { minParts, maxParts, parsedDayValues, parsedMonthValues, parsedYearValues, isDateEnabled } = this;
999
- let cursor = getNextDay(start);
1000
- while (isBefore(cursor, end)) {
1001
- if (isDayDisabled(cursor, minParts, maxParts, parsedDayValues) ||
1002
- (parsedMonthValues !== undefined && !parsedMonthValues.includes(cursor.month)) ||
1003
- (parsedYearValues !== undefined && !parsedYearValues.includes(cursor.year))) {
1004
- return true;
1005
- }
1006
- if (isDateEnabled) {
1007
- try {
1008
- if (!isDateEnabled(convertDataToISO(cursor))) {
1009
- return true;
1010
- }
1011
- }
1012
- catch {
1013
- // Swallow user callback exceptions during validation
1014
- }
1015
- }
1016
- cursor = getNextDay(cursor);
1017
- }
1018
- return false;
1019
- };
1020
948
  this.setActiveParts = (parts, removeDate = false) => {
1021
949
  /** if the datetime component is in readonly mode,
1022
950
  * allow browsing of the calendar without changing
@@ -1026,7 +954,7 @@ const Datetime = class {
1026
954
  return;
1027
955
  }
1028
956
  this.hasUnconfirmedSelection = true;
1029
- const { minParts, maxParts, activeParts } = this;
957
+ const { multiple, minParts, maxParts, activeParts } = this;
1030
958
  /**
1031
959
  * When setting the active parts, it is possible
1032
960
  * to set invalid data. For example,
@@ -1039,10 +967,7 @@ const Datetime = class {
1039
967
  */
1040
968
  const validatedParts = validateParts(parts, minParts, maxParts);
1041
969
  this.setWorkingParts(validatedParts);
1042
- if (this.isRangeMode) {
1043
- this.setActivePartsRange(validatedParts);
1044
- }
1045
- else if (this.isMultipleMode) {
970
+ if (multiple) {
1046
971
  const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
1047
972
  if (removeDate) {
1048
973
  this.activeParts = activePartsArray.filter((p) => !isSameDay(p, validatedParts));
@@ -1062,26 +987,6 @@ const Datetime = class {
1062
987
  }
1063
988
  this.confirm();
1064
989
  };
1065
- /**
1066
- * Handles range selection logic when a day is clicked.
1067
- *
1068
- * Creating a new range: first click sets start, second sets end.
1069
- * Modifying an existing range:
1070
- * - Before range → new start
1071
- * - Within range → new end
1072
- * - After range → new end
1073
- * If the resulting span contains a disabled date, start a new range instead.
1074
- */
1075
- this.setActivePartsRange = (parts) => {
1076
- const current = this.rangeParts;
1077
- if (!current || isBefore(parts, current.start) || this.rangeContainsDisabledDate(current.start, parts)) {
1078
- this.activeParts = { start: parts };
1079
- }
1080
- else {
1081
- this.rangeCompletedInteractively = true;
1082
- this.activeParts = { start: current.start, end: parts };
1083
- }
1084
- };
1085
990
  this.initializeKeyboardListeners = () => {
1086
991
  const calendarBodyRef = this.calendarBodyRef;
1087
992
  if (!calendarBodyRef) {
@@ -1493,59 +1398,6 @@ const Datetime = class {
1493
1398
  if (hasValue) {
1494
1399
  warnIfValueOutOfBounds(valueToProcess, minParts, maxParts);
1495
1400
  }
1496
- /**
1497
- * Range mode: convert the value array into DatetimeRangeParts.
1498
- */
1499
- if (this.isRangeMode) {
1500
- /**
1501
- * The calendar navigates to the start of the range, or to the default
1502
- * date when there is nothing selected, so that an empty range mode
1503
- * opens on the same month as the other selection modes.
1504
- */
1505
- let navigateTo;
1506
- if (hasValue && Array.isArray(valueToProcess)) {
1507
- let rangeValues = valueToProcess;
1508
- // If more than 2 entries, use first and last
1509
- if (rangeValues.length > 2) {
1510
- rangeValues = [rangeValues[0], rangeValues[rangeValues.length - 1]];
1511
- }
1512
- let startParts = rangeValues[0];
1513
- let endParts = rangeValues.length > 1 ? rangeValues[1] : undefined;
1514
- // Normalize reversed pairs so earlier date is start
1515
- if (endParts && isAfter(startParts, endParts)) {
1516
- const temp = startParts;
1517
- startParts = endParts;
1518
- endParts = temp;
1519
- }
1520
- this.activeParts = endParts ? { start: startParts, end: endParts } : { start: startParts };
1521
- /**
1522
- * When the user just completed the range interactively, stay on the
1523
- * current month instead of jumping back to the start. The flag is
1524
- * set in setActivePartsRange and consumed here.
1525
- */
1526
- if (endParts && this.rangeCompletedInteractively) {
1527
- this.rangeCompletedInteractively = false;
1528
- return;
1529
- }
1530
- navigateTo = startParts;
1531
- }
1532
- else {
1533
- this.activeParts = [];
1534
- navigateTo = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
1535
- }
1536
- const targetValue = clampDate(navigateTo, minParts, maxParts);
1537
- const { month, day, year } = targetValue;
1538
- const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
1539
- const bodyIsVisible = el.classList.contains('datetime-ready');
1540
- const { isGridStyle, showMonthAndYear } = this;
1541
- if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
1542
- this.animateToDate(targetValue);
1543
- }
1544
- else {
1545
- this.setWorkingParts({ month, day, year, hour: 0, minute: 0, ampm: 'am' });
1546
- }
1547
- return;
1548
- }
1549
1401
  /**
1550
1402
  * If there are multiple values, clamp to the last one.
1551
1403
  * This is because the last value is the one that the user
@@ -1707,27 +1559,6 @@ const Datetime = class {
1707
1559
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
1708
1560
  return hasDatePresentation && !preferWheel;
1709
1561
  }
1710
- get isMultipleMode() {
1711
- return this.selectionMode === 'multiple' || (this.selectionMode === undefined && this.multiple);
1712
- }
1713
- get isRangeMode() {
1714
- return this.selectionMode === 'range';
1715
- }
1716
- /**
1717
- * Type guard: returns true if the given activeParts is a DatetimeRangeParts object.
1718
- */
1719
- isRangeParts(parts) {
1720
- return this.isRangeMode && parts !== null && typeof parts === 'object' && !Array.isArray(parts) && 'start' in parts;
1721
- }
1722
- /**
1723
- * Returns the current range parts if in range mode, or undefined otherwise.
1724
- */
1725
- get rangeParts() {
1726
- if (this.isRangeParts(this.activeParts)) {
1727
- return this.activeParts;
1728
- }
1729
- return undefined;
1730
- }
1731
1562
  yearValuesChanged() {
1732
1563
  this.parsedYearValues = convertToArrayOfNumbers(this.yearValues);
1733
1564
  }
@@ -1763,19 +1594,6 @@ const Datetime = class {
1763
1594
  */
1764
1595
  async confirm(closeOverlay = false) {
1765
1596
  const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
1766
- /**
1767
- * In range mode, only confirm when both start and end are selected.
1768
- */
1769
- if (this.isRangeMode) {
1770
- if (!this.isRangeParts(activeParts) || !activeParts.end) {
1771
- return;
1772
- }
1773
- this.setValue([convertDataToISO(activeParts.start), convertDataToISO(activeParts.end)]);
1774
- if (closeOverlay) {
1775
- this.closeParentOverlay(CONFIRM_ROLE);
1776
- }
1777
- return;
1778
- }
1779
1597
  /**
1780
1598
  * We only update the value if the presentation is not a calendar picker.
1781
1599
  */
@@ -1811,22 +1629,6 @@ const Datetime = class {
1811
1629
  * @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.
1812
1630
  */
1813
1631
  async reset(startDate) {
1814
- if (this.isRangeMode) {
1815
- /**
1816
- * In range mode, reset clears the full range. If a startDate
1817
- * is provided, the calendar navigates to that month without
1818
- * selecting anything so the user begins a fresh selection.
1819
- */
1820
- this.activeParts = [];
1821
- if (startDate) {
1822
- const parsed = parseDate(startDate);
1823
- if (parsed) {
1824
- const target = Array.isArray(parsed) ? parsed[0] : parsed;
1825
- this.setWorkingParts(target);
1826
- }
1827
- }
1828
- return;
1829
- }
1830
1632
  this.processValue(startDate);
1831
1633
  }
1832
1634
  /**
@@ -2062,11 +1864,8 @@ const Datetime = class {
2062
1864
  });
2063
1865
  }
2064
1866
  componentWillLoad() {
2065
- const { el, formatOptions, highlightedDates, multiple, selectionMode, presentation, preferWheel } = this;
2066
- if (selectionMode === undefined && multiple) {
2067
- printIonWarning('[ion-datetime] - The "multiple" property is deprecated. Use selectionMode="multiple" instead.', el);
2068
- }
2069
- if (this.isMultipleMode) {
1867
+ const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
1868
+ if (multiple) {
2070
1869
  if (presentation !== 'date') {
2071
1870
  printIonWarning('[ion-datetime] - Multiple date selection is only supported for presentation="date".', el);
2072
1871
  }
@@ -2074,17 +1873,6 @@ const Datetime = class {
2074
1873
  printIonWarning('[ion-datetime] - Multiple date selection is not supported with preferWheel="true".', el);
2075
1874
  }
2076
1875
  }
2077
- if (this.isRangeMode) {
2078
- if (presentation !== 'date') {
2079
- printIonWarning('[ion-datetime] - Range selection is only supported for presentation="date".', el);
2080
- }
2081
- if (preferWheel) {
2082
- printIonWarning('[ion-datetime] - Range selection is not supported with preferWheel="true".', el);
2083
- }
2084
- }
2085
- if (selectionMode !== undefined && multiple) {
2086
- printIonWarning('[ion-datetime] - Both "selectionMode" and "multiple" are set. "selectionMode" takes precedence.', el);
2087
- }
2088
1876
  if (highlightedDates !== undefined) {
2089
1877
  if (presentation !== 'date' && presentation !== 'date-time' && presentation !== 'time-date') {
2090
1878
  printIonWarning('[ion-datetime] - The highlightedDates property is only supported with the date, date-time, and time-date presentations.', el);
@@ -2139,12 +1927,6 @@ const Datetime = class {
2139
1927
  * is disabled or readonly.
2140
1928
  */
2141
1929
  const isButtonDisabled = disabled || readonly;
2142
- /**
2143
- * In range mode, the confirm button should be disabled until
2144
- * both a start and end date have been selected.
2145
- */
2146
- const isRangeIncomplete = this.isRangeMode && (!this.isRangeParts(this.activeParts) || !this.activeParts.end);
2147
- const isConfirmDisabled = isButtonDisabled || isRangeIncomplete;
2148
1930
  const confirmFill = theme === 'ionic' ? 'solid' : undefined;
2149
1931
  const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
2150
1932
  if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
@@ -2164,7 +1946,7 @@ const Datetime = class {
2164
1946
  return (h("div", { class: "datetime-footer" }, h("div", { class: "datetime-buttons" }, h("div", { class: {
2165
1947
  ['datetime-action-buttons']: true,
2166
1948
  ['has-clear-button']: this.showClearButton,
2167
- } }, h("slot", { name: "buttons" }, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", fill: confirmFill, color: this.color, onClick: () => this.confirm(true), disabled: isConfirmDisabled }, this.doneText))))))));
1949
+ } }, h("slot", { name: "buttons" }, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", fill: confirmFill, color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText))))))));
2168
1950
  }
2169
1951
  /**
2170
1952
  * Wheel picker render methods
@@ -2353,8 +2135,8 @@ const Datetime = class {
2353
2135
  ...this.workingParts,
2354
2136
  month: ev.detail.value,
2355
2137
  });
2356
- // Month wheel is navigation-only in multi-select and range modes as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
2357
- if (!this.isMultipleMode && !this.isRangeMode) {
2138
+ // Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
2139
+ if (!this.multiple) {
2358
2140
  this.setActiveParts({
2359
2141
  ...activePart,
2360
2142
  month: ev.detail.value,
@@ -2375,8 +2157,8 @@ const Datetime = class {
2375
2157
  ...this.workingParts,
2376
2158
  year: ev.detail.value,
2377
2159
  });
2378
- // Year wheel is navigation-only in multi-select and range modes as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
2379
- if (!this.isMultipleMode && !this.isRangeMode) {
2160
+ // Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
2161
+ if (!this.multiple) {
2380
2162
  this.setActiveParts({
2381
2163
  ...activePart,
2382
2164
  year: ev.detail.value,
@@ -2520,7 +2302,7 @@ const Datetime = class {
2520
2302
  'calendar-month-disabled': !isWorkingMonth && swipeDisabled,
2521
2303
  } }, h("div", { class: "calendar-month-grid" }, getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map((dateObject, index) => {
2522
2304
  const { day, dayOfWeek, isAdjacentDay } = dateObject;
2523
- const { el, highlightedDates, isDateEnabled, showAdjacentDays } = this;
2305
+ const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
2524
2306
  let _month = month;
2525
2307
  let _year = year;
2526
2308
  if (showAdjacentDays && isAdjacentDay && day !== null) {
@@ -2549,7 +2331,7 @@ const Datetime = class {
2549
2331
  }
2550
2332
  const referenceParts = { month: _month, day, year: _year, isAdjacentDay };
2551
2333
  const isCalendarPadding = day === null;
2552
- 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);
2334
+ const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled, text, } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
2553
2335
  const dateIsoString = convertDataToISO(referenceParts);
2554
2336
  let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
2555
2337
  if (!isCalDayDisabled && isDateEnabled !== undefined) {
@@ -2572,60 +2354,24 @@ const Datetime = class {
2572
2354
  */
2573
2355
  const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
2574
2356
  const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
2575
- /**
2576
- * Determine if this day is part of the range selection.
2577
- * Range styling takes priority over highlightedDates.
2578
- */
2579
- const isPartOfRange = isRangeStart || isRangeEnd || isInRange;
2580
2357
  let dateStyle = undefined;
2581
2358
  /**
2582
- * Custom highlight styles should not override the style for selected dates
2583
- * or range selection, nor apply to "filler days" at the start of the grid.
2359
+ * Custom highlight styles should not override the style for selected dates,
2360
+ * nor apply to "filler days" at the start of the grid.
2584
2361
  */
2585
- if (highlightedDates !== undefined && !isActive && !isPartOfRange && day !== null && !isAdjacentDay) {
2362
+ if (highlightedDates !== undefined && !isActive && day !== null && !isAdjacentDay) {
2586
2363
  dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
2587
2364
  }
2588
2365
  let dateParts = undefined;
2589
2366
  // "Filler days" at the beginning of the grid should not get the calendar day
2590
2367
  // CSS parts added to them
2591
2368
  if (!isCalendarPadding && !isAdjacentDay) {
2592
- dateParts = `calendar-day${isActive || isRangeStart || isRangeEnd ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}${isRangeStart ? ' range-start range-selection' : ''}${isRangeEnd ? ' range-end range-selection' : ''}${isInRange ? ' range-selection' : ''}`;
2369
+ dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}`;
2593
2370
  }
2594
2371
  else if (isAdjacentDay) {
2595
- /**
2596
- * Adjacent days skip 'active' and 'today' parts but still
2597
- * include range parts so ::part() styling is consistent
2598
- * with the visual range track rendering.
2599
- */
2600
- dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}${isRangeStart ? ' range-start range-selection' : ''}${isRangeEnd ? ' range-end range-selection' : ''}${isInRange ? ' range-selection' : ''}`;
2601
- }
2602
- /**
2603
- * Build the wrapper's shadow part attribute for range track styling.
2604
- */
2605
- const hasCompleteRange = this.rangeParts?.end !== undefined;
2606
- const wrapperParts = isPartOfRange && hasCompleteRange && !isCalendarPadding ? 'range-track' : undefined;
2607
- /**
2608
- * Build the aria-label for range mode accessibility.
2609
- */
2610
- let rangeAriaLabel = ariaLabel;
2611
- if (this.isRangeMode && ariaLabel) {
2612
- if (isRangeStart) {
2613
- rangeAriaLabel += `, ${this.startDateLabel}`;
2614
- }
2615
- if (isRangeEnd) {
2616
- rangeAriaLabel += `, ${this.endDateLabel}`;
2617
- }
2618
- if (isInRange) {
2619
- rangeAriaLabel += ', in range';
2620
- }
2372
+ dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
2621
2373
  }
2622
- return (h("div", { class: {
2623
- 'calendar-day-wrapper': true,
2624
- // A start without an end is only the circle until the range is complete
2625
- 'calendar-day-wrapper-range-start': isRangeStart && this.rangeParts?.end !== undefined,
2626
- 'calendar-day-wrapper-in-range': isInRange,
2627
- 'calendar-day-wrapper-range-end': isRangeEnd,
2628
- }, part: wrapperParts }, h("button", {
2374
+ return (h("div", { class: "calendar-day-wrapper" }, h("button", {
2629
2375
  // We need to use !important for the inline styles here because
2630
2376
  // otherwise the CSS shadow parts will override these styles.
2631
2377
  // See https://github.com/WICG/webcomponents/issues/847
@@ -2641,40 +2387,28 @@ const Datetime = class {
2641
2387
  }, tabindex: "-1", "data-day": day, "data-month": _month, "data-year": _year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
2642
2388
  'calendar-day-padding': isCalendarPadding,
2643
2389
  'calendar-day': true,
2644
- 'calendar-day-active': isActive || isRangeStart || isRangeEnd,
2390
+ 'calendar-day-active': isActive,
2645
2391
  'calendar-day-constrained': isCalDayConstrained,
2646
2392
  'calendar-day-today': isToday,
2647
2393
  'calendar-day-adjacent-day': isAdjacentDay,
2648
- 'calendar-day-range-start': isRangeStart,
2649
- 'calendar-day-range-end': isRangeEnd,
2650
- 'calendar-day-in-range': isInRange,
2651
- }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": isActive || isRangeStart || isRangeEnd ? 'true' : ariaSelected, "aria-label": rangeAriaLabel, onClick: () => {
2394
+ }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
2652
2395
  if (isCalendarPadding) {
2653
2396
  return;
2654
2397
  }
2655
2398
  if (isAdjacentDay) {
2656
2399
  // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
2657
2400
  this.el.blur();
2658
- if (!this.isRangeMode) {
2659
- this.activeParts = { ...activePart, ...referenceParts };
2660
- }
2401
+ this.activeParts = { ...activePart, ...referenceParts };
2661
2402
  this.animateToDate(referenceParts);
2662
- if (this.isRangeMode) {
2663
- this.setActiveParts(referenceParts);
2664
- }
2665
- else {
2666
- this.confirm();
2667
- }
2403
+ this.confirm();
2668
2404
  }
2669
2405
  else {
2670
2406
  this.setWorkingParts({
2671
2407
  ...this.workingParts,
2672
2408
  ...referenceParts,
2673
2409
  });
2674
- if (this.isRangeMode) {
2675
- this.setActiveParts(referenceParts);
2676
- }
2677
- else if (this.isMultipleMode) {
2410
+ // Multiple only needs date info so we can wipe out other fields like time.
2411
+ if (multiple) {
2678
2412
  this.setActiveParts(referenceParts, isActive);
2679
2413
  }
2680
2414
  else {
@@ -2694,17 +2428,7 @@ const Datetime = class {
2694
2428
  })));
2695
2429
  }
2696
2430
  renderCalendar(theme) {
2697
- return (h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(theme), this.renderCalendarBody(), this.isRangeMode && this.rangeParts && !this.rangeParts.end && (h("div", { "aria-live": "polite", role: "status", style: {
2698
- position: 'absolute',
2699
- width: '1px',
2700
- height: '1px',
2701
- padding: '0',
2702
- margin: '-1px',
2703
- overflow: 'hidden',
2704
- clip: 'rect(0, 0, 0, 0)',
2705
- whiteSpace: 'nowrap',
2706
- border: '0',
2707
- } }, `${this.startDateLabel} selected, select ${this.endDateLabel.toLowerCase()}`))));
2431
+ return (h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(theme), this.renderCalendarBody()));
2708
2432
  }
2709
2433
  renderTimeLabel() {
2710
2434
  const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null;
@@ -2757,23 +2481,10 @@ const Datetime = class {
2757
2481
  ];
2758
2482
  }
2759
2483
  getHeaderSelectedDateText() {
2760
- const { activeParts, formatOptions, titleSelectedDatesFormatter } = this;
2484
+ const { activeParts, formatOptions, multiple, titleSelectedDatesFormatter } = this;
2761
2485
  const isArray = Array.isArray(activeParts);
2762
- const dateFormatOptions = formatOptions?.date ?? { weekday: 'short', month: 'short', day: 'numeric' };
2763
2486
  let headerText;
2764
- if (this.isRangeMode) {
2765
- headerText = this.getRangeHeaderText(formatOptions?.date ?? { month: 'short', day: 'numeric' });
2766
- if (titleSelectedDatesFormatter !== undefined) {
2767
- try {
2768
- const rangeValues = this.getRangeValueArray();
2769
- headerText = titleSelectedDatesFormatter(rangeValues);
2770
- }
2771
- catch (e) {
2772
- printIonError('[ion-datetime] - Exception in provided `titleSelectedDatesFormatter`:', e);
2773
- }
2774
- }
2775
- }
2776
- else if (this.isMultipleMode && isArray && activeParts.length !== 1) {
2487
+ if (multiple && isArray && activeParts.length !== 1) {
2777
2488
  headerText = `${activeParts.length} days`; // default/fallback for multiple selection
2778
2489
  if (titleSelectedDatesFormatter !== undefined) {
2779
2490
  try {
@@ -2786,37 +2497,10 @@ const Datetime = class {
2786
2497
  }
2787
2498
  else {
2788
2499
  // for exactly 1 day selected (multiple set or not), show a formatted version of that
2789
- headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), dateFormatOptions);
2500
+ headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), formatOptions?.date ?? { weekday: 'short', month: 'short', day: 'numeric' });
2790
2501
  }
2791
2502
  return headerText;
2792
2503
  }
2793
- /**
2794
- * Returns the formatted range header text.
2795
- * Shows "Start date - End date" with placeholders from startDateLabel/endDateLabel.
2796
- */
2797
- getRangeHeaderText(dateFormatOptions) {
2798
- const range = this.rangeParts;
2799
- if (!range) {
2800
- return `${this.startDateLabel} - ${this.endDateLabel}`;
2801
- }
2802
- const startText = getLocalizedDateTime(this.locale, range.start, dateFormatOptions);
2803
- const endText = range.end ? getLocalizedDateTime(this.locale, range.end, dateFormatOptions) : this.endDateLabel;
2804
- return `${startText} - ${endText}`;
2805
- }
2806
- /**
2807
- * Returns the current range value as an ISO string array for
2808
- * titleSelectedDatesFormatter and ionChange.
2809
- */
2810
- getRangeValueArray() {
2811
- const range = this.rangeParts;
2812
- if (!range) {
2813
- return [];
2814
- }
2815
- if (!range.end) {
2816
- return [convertDataToISO(range.start)];
2817
- }
2818
- return [convertDataToISO(range.start), convertDataToISO(range.end)];
2819
- }
2820
2504
  renderHeader(showExpandedHeader = true) {
2821
2505
  const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null;
2822
2506
  if (!hasSlottedTitle && !this.showDefaultTitle) {
@@ -2940,7 +2624,7 @@ const Datetime = class {
2940
2624
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
2941
2625
  const hasWheelVariant = hasDatePresentation && preferWheel;
2942
2626
  renderHiddenInput(true, el, name, formatValue(value), disabled);
2943
- return (h(Host, { key: '0a05835fa52e91147d72250941201b89fd850dda', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
2627
+ return (h(Host, { key: '6ee2389238b42b0d10c5f5254a8ba61bfc53c677', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
2944
2628
  ...createColorClasses(color, {
2945
2629
  [theme]: true,
2946
2630
  ['datetime-readonly']: readonly,
@@ -2951,9 +2635,8 @@ const Datetime = class {
2951
2635
  [`datetime-size-${size}`]: true,
2952
2636
  [`datetime-prefer-wheel`]: hasWheelVariant,
2953
2637
  [`datetime-grid`]: isGridStyle,
2954
- [`datetime-range`]: this.isRangeMode,
2955
2638
  }),
2956
- } }, h("div", { key: '5b5d6999f55b85523f65763a906f7f16c25f2eb2', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
2639
+ } }, h("div", { key: '531803dfb77fa3d694c90b6fc45e71e304876fa8', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
2957
2640
  }
2958
2641
  get el() { return getElement(this); }
2959
2642
  static get watchers() { return {