@ukic/canary-web-components 3.0.0-canary.30 → 3.0.0-canary.31

package/dist/components/ic-date-picker.js

@@ -1,7 +1,9 @@
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { a as dateInRange, g as getMonthEnd, b as getMonthStart, y as yearInRange, c as dateMatches, e as getWeekStart, f as addSixWeeks, h as clampDate, i as createDate, d as defineCustomElement$9 } from './ic-date-input2.js';
-import { s as stringEnumToArray, v as IcDayNames, w as IcDateInputMonths, x as IcWeekDays, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, y as IcShortDayNames } from './helpers2.js';
-import { d as defineCustomElement$a } from './ic-button2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as createDate, e as dateMatches } from './date-helpers.js';
+import { b as IcWeekDays, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, d as renderDynamicChildSlots } from './helpers2.js';
+import { d as defineCustomElement$b } from './ic-button2.js';
+import { d as defineCustomElement$a } from './ic-calendar2.js';
+import { d as defineCustomElement$9 } from './ic-date-input2.js';
 import { d as defineCustomElement$8 } from './ic-input-component-container2.js';
 import { d as defineCustomElement$7 } from './ic-input-container2.js';
 import { d as defineCustomElement$6 } from './ic-input-label2.js';
@@ -10,126 +12,12 @@ import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const chevron = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.70687 6L8.29688 7.41L12.8769 12L8.29688 16.59L9.70687 18L15.7069 12L9.70687 6Z" fill="currentColor"/>
-</svg>
-`;
-
-const DayButton = ({ focussed, today, day, monthInView, onFocusDay, onBlurDay, onSelectDay, selected, focussedDayRef, inRange, showDaysOutsideMonth, disableDay, }) => {
-    const handleDayClick = () => {
-        onSelectDay(day);
-    };
-    const handleDayFocus = () => {
-        onFocusDay();
-    };
-    const handleDayBlur = () => {
-        onBlurDay();
-    };
-    const dayNames = stringEnumToArray(IcDayNames);
-    const months = stringEnumToArray(IcDateInputMonths);
-    const outsideRange = !inRange || disableDay;
-    const outsideMonth = monthInView !== day.getMonth();
-    const disabled = outsideRange || (outsideMonth && !showDaysOutsideMonth);
-    return (h("div", { class: "day-button-container" },
-        h("button", { class: {
-                "day-button": true,
-                "outside-month": outsideMonth,
-                "outside-range": !!outsideRange,
-                hidden: outsideMonth && !showDaysOutsideMonth,
-                disabled: disabled,
-                today: today,
-                selected: selected,
-                focussed: focussed,
-            }, tabIndex: focussed ? 0 : -1, "aria-hidden": outsideMonth ? "true" : "false", "aria-disabled": disabled ? "true" : "false", "aria-current": today ? "date" : undefined, "aria-label": disabled || outsideMonth || outsideRange
-                ? undefined
-                : `Choose ${dayNames[day.getDay()]}, ${day.getDate()} ${months[day.getMonth()]} ${day.getFullYear()}`, disabled: disabled, onClick: handleDayClick, onBlur: handleDayBlur, onFocus: handleDayFocus, ref: (el) => {
-                if (focussed && el && focussedDayRef) {
-                    focussedDayRef(el);
-                }
-            } }, (!outsideMonth || (outsideMonth && showDaysOutsideMonth)) && (h("ic-typography", { variant: "subtitle-small", italic: outsideMonth }, day.getDate())))));
-};
-
-const MonthPicker = ({ size, focussedMonth, monthInView, onSelectMonth, onKeyDown, focussedMonthRef, minDate, maxDate, yearInView, }) => {
-    const handleMonthClick = (ev) => {
-        const button = ev.target;
-        onSelectMonth(Number(button.getAttribute("data-month")));
-    };
-    const monthNames = stringEnumToArray(IcDateInputMonths);
-    return (h("div", { class: {
-            "month-picker": true,
-        }, role: "list" }, monthNames.map((month, index) => {
-        const current = monthInView === index;
-        const focussed = focussedMonth === index;
-        const outsideRange = !dateInRange(new Date(yearInView, index, 1), minDate ? getMonthStart(minDate) : null, maxDate ? getMonthEnd(maxDate) : null);
-        return (h("ic-button", { role: "listitem", class: {
-                "month-button": true,
-                selected: current,
-                focussed: focussed,
-                disabled: outsideRange,
-            }, "full-width": true, disabled: outsideRange, variant: current ? "primary" : "tertiary", "data-month": index, size: size, tabIndex: focussed ? 0 : -1, "aria-current": current ? "true" : "false", "aria-label": current ? "" : `select ${month}`, onClick: handleMonthClick, onKeyDown: onKeyDown, ref: (el) => {
-                if (focussed && el) {
-                    focussedMonthRef(el);
-                }
-            } }, month));
-    })));
-};
-
-const YearPicker = ({ decadeView, size, focussedYear, yearInView, onSelectYear, onFocusYear, onBlurYear, onKeyDown, minDate, maxDate, focussedYearRef, }) => {
-    const handleYearClick = (ev) => {
-        const button = ev.target;
-        onSelectYear(Number(button.getAttribute("data-year")));
-    };
-    const handleYearFocus = () => {
-        onFocusYear();
-    };
-    const handleYearBlur = () => {
-        onBlurYear();
-    };
-    const navButtonMouseDownHandler = (ev) => {
-        ev.preventDefault();
-    };
-    const prevDecade = decadeView[0];
-    const nextDecade = decadeView[11];
-    const years = decadeView.slice(1, 11);
-    return (h("div", { class: "year-picker", role: "list" },
-        h("div", { class: "prev-decade", "aria-hidden": "true" },
-            h("ic-button", { id: "prev-decade-button", class: {
-                    "year-button": true,
-                }, disabled: !yearInRange(prevDecade, minDate, maxDate), "data-year": prevDecade, tabIndex: -1, variant: "tertiary", onClick: handleYearClick, onMouseDown: navButtonMouseDownHandler, "aria-hidden": "true", size: size },
-                `${prevDecade - 9}s`,
-                h("svg", { slot: "left-icon", width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    h("path", { d: "M11.3333 5.33341H3.21996L6.94663 1.60675L5.99996 0.666748L0.666626 6.00008L5.99996 11.3334L6.93996 10.3934L3.21996 6.66675H11.3333V5.33341Z", fill: "currentColor" })))),
-        years.map((yr) => {
-            const current = yearInView === yr;
-            const focussed = focussedYear === yr;
-            return (h("ic-button", { class: {
-                    "year-button": true,
-                    selected: current,
-                    focussed: focussed,
-                }, disabled: !yearInRange(yr, minDate, maxDate), "data-year": yr, tabIndex: focussed ? 0 : -1, variant: current ? "primary" : "tertiary", onClick: handleYearClick, "aria-label": current ? "" : `select ${yr}`, role: "listitem", "aria-current": current ? "true" : "false", onKeyDown: onKeyDown, onFocus: handleYearFocus, onBlur: handleYearBlur, size: size, ref: (el) => {
-                    if (focussed && el) {
-                        focussedYearRef(el);
-                    }
-                } }, yr));
-        }),
-        h("div", { class: "next-decade", "aria-hidden": "true" },
-            h("ic-button", { id: "next-decade-button", class: {
-                    "year-button": true,
-                    flip: true,
-                }, disabled: !yearInRange(nextDecade, minDate, maxDate), "data-year": nextDecade, tabIndex: -1, variant: "tertiary", onClick: handleYearClick, onMouseDown: navButtonMouseDownHandler, "aria-hidden": "true", size: size },
-                `${nextDecade}s`,
-                h("svg", { slot: "right-icon", width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    h("path", { d: "M11.3333 5.33341H3.21996L6.94663 1.60675L5.99996 0.666748L0.666626 6.00008L5.99996 11.3334L6.93996 10.3934L3.21996 6.66675H11.3333V5.33341Z", fill: "currentColor" }))))));
-};
-
-const icDatePickerCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:relative;--month-year-picker-button-width:5rem;--month-button-width:5.5rem;--input-field-width:var(--input-width, 19.125rem);--ic-input-label-helpertext-padding:var(--ic-space-xxs)}:host(.ic-date-picker-large){--month-button-width:6.3125rem;--input-field-width:var(--input-width, 21.125rem)}:host(.ic-date-picker-small){--month-button-width:6.25rem;--input-field-width:var(--input-width, 17.125rem)}:host .date-input-container{position:relative}ic-date-input{--input-width:var(--input-field-width)}:host .calendar-container{min-width:19rem;max-width:23.5rem;width:var(--input-width);display:flex;flex-direction:column;gap:var(--ic-space-xs);position:absolute;border:var(--ic-border-default);border-color:var(--ic-date-picker-calendar-border);border-radius:var(--ic-border-radius);align-items:center;background-color:var(--ic-date-picker-calendar-bg);z-index:var(--ic-z-index-date-picker);box-sizing:border-box;box-shadow:var(--ic-date-picker-calendar-elevation);margin-top:var(--ic-space-xxxs);padding:var(--ic-space-xs);animation:fade-in-calendar var(--ic-transition-duration-slow)}:host(.ic-date-picker-small) .calendar-container{min-width:17rem;max-width:21.5rem}:host(.ic-date-picker-large) .calendar-container{min-width:21rem;max-width:25.5rem}:host .calendar-container.above{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}:host .month-year-nav-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch}:host .month-year-nav-container.hidden{display:none}:host .month-year-nav{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}:host .month-picker,:host .year-picker{flex-wrap:wrap;display:inline-flex;align-items:center;width:17.5rem;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs);row-gap:var(--ic-space-xxs)}:host(.ic-date-picker-small) .month-picker,:host(.ic-date-picker-small) .year-picker{width:13.125rem}:host(.ic-date-picker-large) .month-picker,:host(.ic-date-picker-large) .year-picker{width:20rem}:host .month-picker-button,:host .year-picker-button{width:5rem;--min-width:5rem}:host .month-button,:host .year-button{width:var(--month-button-width)}:host .month-button.focussed,:host .year-button.focussed{z-index:1}:host .month-button::part(button),:host .year-button::part(button){min-width:var(--month-button-width)}:host .prev-decade .year-button svg{margin-right:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .prev-decade .year-button::part(button){padding-left:0;padding-right:var(--ic-space-lg)}:host(.ic-date-picker-small) .prev-decade .year-button::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}:host .next-decade .year-button svg{margin-left:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .next-decade .year-button::part(button){padding-right:0;padding-left:var(--ic-space-lg)}:host(.ic-date-picker-small) .next-decade .year-button::part(button),:host(.ic-date-picker-large) .next-decade .year-button::part(button){padding-left:var(--ic-space-xl)}:host .bottom-buttons{display:flex;justify-content:space-between;align-items:center;align-self:stretch;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host .bottom-buttons.no-today{align-items:flex-end;flex-direction:column}:host .bottom-buttons.hidden{display:none}:host .calendar{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.ic-date-picker-large) .calendar{width:19.25rem}:host(.ic-date-picker-small) .calendar{padding-bottom:var(--ic-space-xxs);width:14rem}:host .hidden{display:none}:host .weekdays{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs);align-self:stretch}:host .calendar-days-container{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:var(--ic-space-xs);padding:var(--ic-space-xxs) 0;min-height:16rem;align-content:flex-start}:host(.ic-date-picker-small) .calendar-days-container{padding:var(--ic-space-xxxs) 0;min-height:14.5rem}:host(.ic-date-picker-large) .calendar-days-container{padding:var(--ic-space-xs) 0;min-height:17.5rem}:host .calendar-day-header{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center}:host(.ic-date-picker-small) .calendar-day-header,:host(.ic-date-picker-large) .calendar-day-header{padding:var(--ic-space-xxs)}:host .calendar-day-header ic-typography{--ic-typography-color:var(--ic-date-picker-calendar-label);text-align:center}:host .day-button-container{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}:host(.ic-date-picker-small) .day-button-container{width:2rem;height:2rem}:host(.ic-date-picker-large) .day-button-container{width:2.5rem;height:2.5rem}:host .day-button{display:flex;position:relative;justify-content:center;align-items:center;border:0;border-radius:2rem;background-color:var(--ic-date-picker-calendar-bg);width:2rem;height:2rem;cursor:pointer;transition:var(--ic-easing-transition-fast);z-index:0}:host .day-button.disabled{cursor:default}:host(.ic-date-picker-large) .day-button{width:2.25rem;height:2.25rem}:host(.ic-date-picker-small) .day-button{width:1.75rem;height:1.75rem}:host .day-button ic-typography{width:1.75rem;--ic-typography-color:var(--ic-date-picker-date-label-default)}:host .day-button.outside-range ic-typography{--ic-typography-color:var(--ic-date-picker-date-label-disabled)}:host .day-button.outside-month ic-typography{font-weight:var(--ic-font-weight-regular) !important}:host .day-button.outside-month:not(.outside-range):not(.selected) ic-typography{--ic-typography-color:var(--ic-date-picker-date-label-default)}:host .day-button:hover:not(.disabled){background-color:var(--ic-date-picker-date-default-bg-hover)}:host .day-button:active:not(.disabled){background-color:var(--ic-date-picker-date-default-bg-pressed)}@media (prefers-reduced-motion: no-preference){:host .day-button:hover:not(.disabled):not(.focussed),:host .day-button:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}:host .day-button.selected:not(.hidden){background-color:var(--ic-date-picker-date-active-bg-default)}:host .day-button.selected ic-typography{--ic-typography-color:var(--ic-date-picker-date-label-selected)}:host .day-button.selected:not(.hidden):hover{background-color:var(--ic-date-picker-date-active-bg-hover)}:host .day-button.selected:not(.hidden):active{background-color:var(--ic-date-picker-date-active-bg-pressed)}:host .day-button.focussed{z-index:1}:host .day-button:focus{outline:none}:host .day-button.focussed:focus{box-shadow:var(--ic-border-focus)}:host .day-button.today:not(.hidden)::after{content:\"\";position:absolute;width:0.875rem;height:0.125rem;bottom:0.4rem;border-radius:var(--ic-border-radius);background-color:var(--ic-date-picker-default-underline)}:host(.ic-date-picker-small) .day-button.today::after{bottom:0.35rem}:host(.ic-date-picker-large) .day-button.today::after{width:1rem}:host .day-button.today.selected::after{background-color:var(--ic-date-picker-selected-underline)}:host #select-month-hint,:host #select-year-hint{display:none}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){:host .calendar-container,:host .calendar,:host .bottom-buttons{animation:none}}@keyframes fade-in-buttons{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes fade-in-calendar{0%{display:flex;max-height:0}100%{display:flex;max-height:600px}}@media (forced-colors: active){:host .day-button.today:not(.hidden)::after{background-color:highlight}:host .day-button.selected:not(.hidden){background-color:highlight}:host .day-button.focussed:focus{border:var(--ic-border-hc)}:host .month-button.selected::part(button),:host .year-button.selected::part(button){background-color:highlight}}";
+const icDatePickerCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:relative;--month-year-picker-button-width:5rem;--month-button-width:5.5rem;--input-field-width:var(--input-width, 19.125rem);--ic-input-label-helpertext-padding:var(--ic-space-xxs)}:host(.ic-date-picker-large){--month-button-width:6.3125rem;--input-field-width:var(--input-width, 21.125rem)}:host(.ic-date-picker-small){--month-button-width:6.25rem;--input-field-width:var(--input-width, 17.125rem)}:host .date-input-container{position:relative}ic-date-input{--input-width:var(--input-field-width)}ic-calendar{--ic-z-index-calendar:var(--ic-z-index-date-picker);--ic-calendar-bg:var(--ic-date-picker-calendar-bg);--ic-calendar-border:var(--ic-date-picker-calendar-border);--ic-calendar-elevation:var(--ic-date-picker-calendar-elevation);--ic-calendar-label:var(--ic-date-picker-calendar-label)}";
 const IcDatePickerStyle0 = icDatePickerCss;
 
-const DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
 const DEFAULT_DISABLE_DATES_FROM_NOW_MSG = "Dates in the future are not allowed. Please select a date in the past.";
 const DEFAULT_DISABLE_DATES_UNTIL_NOW_MSG = "Dates in the past are not allowed. Please select a date in the future.";
 const DEFAULT_DISABLE_DAYS_MSG = "The date you have selected is on a day of the week that is not allowed. Please select another date.";
-const FOCUS_TIMER = 100;
 const PICKER_HEIGHT_SMALL = 360;
 const PICKER_HEIGHT_DEFAULT = 400;
 const PICKER_HEIGHT_LARGE = 440;
@@ -139,31 +27,15 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         this.__registerHost();
         this.__attachShadow();
         this.icChange = createEvent(this, "icChange", 7);
-        this.clearButtonEl = null;
-        this.daysOfWeek = [];
-        this.dayButtonFocussed = false;
-        this.dayPickerKeyboardNav = false;
-        this.dialogDescription = "";
-        this.focusDay = true;
-        this.liveRegionEl = undefined;
-        this.monthNames = [];
-        this.monthInViewUpdateHandled = false;
         this.myCalendarButtonClicked = false;
+        this.hostMutationObserver = null;
         this.showPickerAbove = false;
-        this.today = new Date();
-        this.todayButtonEl = null;
-        this.yearButtonFocussed = false;
         this.calendarOpen = false;
-        this.currMonthView = [];
-        this.currYearPickerView = [];
-        this.decadeView = [];
-        this.focussedDate = null;
         this.maxDate = null;
         this.minDate = null;
         this.monthPickerVisible = false;
         this.orderedDaysOfWeek = [];
         this.selectedDate = null;
-        this.yearPickerVisible = false;
         /**
          * The format in which the date will be displayed.
          */
@@ -172,10 +44,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
          * If `true`, the disabled state will be set.
          */
         this.disabled = false;
-        /**
-         *  If `true`, every individual input field completed will emit an icChange event.
-         */
-        this.emitDatePartChange = false;
         /**
          * The days of the week to disable.
          */
@@ -200,6 +68,10 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
          * The text to display as the validation message when `disablePast` is `true` and a date in the past is entered.
          */
         this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
+        /**
+         *  If `true`, every individual input field completed will emit an icChange event.
+         */
+        this.emitDatePartChange = false;
         /**
          * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
          */
@@ -276,42 +148,11 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
          * The value of the date picker. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
          */
         this.value = "";
-        this.setDecadeView = (start) => {
-            let currYear = start - 1;
-            const decadeArr = [];
-            while (currYear <= start + 10) {
-                decadeArr.push(currYear);
-                currYear++;
-            }
-            this.decadeView = decadeArr;
-            this.decadeStart = decadeArr[1];
-            this.decadeEnd = decadeArr[10];
-        };
-        this.setSelectedDate = (d, emit = true) => {
-            var _a;
-            if (d === null || !dateMatches(d, this.selectedDate)) {
-                this.selectedDate = d;
-                this.value = d;
-                if (emit) {
-                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.triggerIcChange(d);
-                }
-            }
-        };
-        this.handleCalendarMouseDown = (event) => {
-            const target = event.target;
-            if (target.tagName !== "IC-BUTTON") {
-                event.preventDefault();
-            }
-        };
-        this.handleCalendarClick = (event) => {
-            this.clearDialogDescription();
-            event.stopImmediatePropagation();
-        };
         this.handleDocumentClick = () => {
             this.calendarOpen = false;
         };
         this.keyDownHandler = (event) => {
-            var _a;
+            var _a, _b;
             if (event.key === "Escape") {
                 if (this.calendarOpen) {
                     this.closeButtonClickHandler();
@@ -320,581 +161,51 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                 }
             }
             else {
-                this.clearDialogDescription();
+                (_b = this.calendarEl) === null || _b === void 0 ? void 0 : _b.clearDialogDescription();
                 event.stopImmediatePropagation();
             }
         };
         this.closeButtonClickHandler = () => {
             this.calendarOpen = false;
         };
-        this.focusFirstElement = () => {
-            this.monthButtonEl.setFocus();
-        };
-        this.focusLastElement = () => {
-            if (this.showPickerClearButton &&
-                this.clearButtonEl &&
-                !this.clearButtonEl.disabled) {
-                this.clearButtonEl.setFocus();
-            }
-            else if (this.showPickerTodayButton &&
-                this.todayButtonEl &&
-                !this.todayButtonEl.disabled) {
-                this.todayButtonEl.setFocus();
-            }
-            else if (this.monthPickerVisible) {
-                this.focussedMonthEl.setFocus();
-            }
-            else if (this.yearPickerVisible) {
-                this.focussedYearEl.setFocus();
-            }
-            else {
-                this.focussedDayEl.focus();
-            }
-        };
-        this.focusFocussedDay = () => {
-            this.focussedDayEl.focus();
-        };
-        this.monthButtonClickHandler = () => {
-            this.yearPickerVisible = false;
-            this.focusDay = false;
-            this.monthPickerVisible = !this.monthPickerVisible;
-            if (this.monthPickerVisible) {
-                this.setAriaLiveRegionText("Month picker view open");
-            }
-            else {
-                this.setMonthSelectedLiveRegionText();
-            }
-        };
-        this.yearButtonClickHandler = () => {
-            this.monthPickerVisible = false;
-            this.focusDay = false;
-            this.yearPickerVisible = !this.yearPickerVisible;
-            if (this.yearPickerVisible) {
-                this.setAriaLiveRegionText(`Year picker view open. ${this.getDecadeInViewText()}`);
-            }
-            else {
-                this.setYearSelectedLiveRegionText();
-            }
-        };
-        this.todayButtonClickHandler = () => {
-            this.yearPickerVisible = false;
-            this.monthPickerVisible = false;
-            this.setFocussedDate(new Date());
-            this.setAriaLiveRegionText(this.getMonthInViewText());
-            setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
-        };
-        this.todayButtonKeyDownHandler = (ev) => {
-            var _a;
-            if (ev.key === "Tab" && !ev.shiftKey && ((_a = this.clearButtonEl) === null || _a === void 0 ? void 0 : _a.disabled)) {
-                this.focusFirstElement();
-                ev.preventDefault();
-            }
-        };
-        this.clearButtonClickHandler = () => {
-            this.setSelectedDate(null);
-            let text = "Selected date cleared.";
-            if (!this.monthPickerVisible && !this.yearPickerVisible) {
-                text += ` ${this.getMonthInViewText()}`;
-            }
-            if (this.monthPickerVisible) {
-                this.focussedMonthEl.setFocus();
-            }
-            else if (this.yearPickerVisible) {
-                this.focussedYearEl.setFocus();
-            }
-            else {
-                this.focusFocussedDay();
-            }
-            this.setAriaLiveRegionText(text);
-        };
-        this.setMonthSelectedLiveRegionText = () => {
-            this.setAriaLiveRegionText(`${this.monthNames[this.monthInView]} selected. ${this.getMonthInViewText()}`);
-        };
-        this.setYearSelectedLiveRegionText = () => {
-            this.setAriaLiveRegionText(`${this.yearInView} selected. ${this.getMonthInViewText()}`);
-        };
-        this.getMonthInViewText = () => {
-            return `${this.monthNames[this.monthInView]} ${this.yearInView} currently in view.`;
-        };
-        this.getDecadeInViewText = () => {
-            return `${this.decadeStart} to ${this.decadeEnd} currently in view.`;
-        };
-        this.setAriaLiveRegionText = (text) => {
-            this.liveRegionEl && (this.liveRegionEl.innerText = text);
-        };
-        this.clearDialogDescription = () => {
-            this.dialogDescription = "";
-        };
-        this.clearButtonKeyDownHandler = (ev) => {
-            if (ev.key === "Tab" && !ev.shiftKey) {
-                this.focusFirstElement();
-                ev.preventDefault();
-            }
-        };
-        this.goToPreviousMonth = (focusDay = false) => {
-            this.focusDay = focusDay;
-            this.moveMonths(-1);
-        };
-        this.goToNextMonth = (focusDay = false) => {
-            this.focusDay = focusDay;
-            this.moveMonths(1);
-        };
-        this.goToPreviousYear = (focusDay = false) => {
-            if (this.isPrevYearAllowed()) {
-                this.focusDay = focusDay;
-                this.moveYears(-1);
-            }
-        };
-        this.goToNextYear = (focusDay = false) => {
-            if (this.isNextYearAllowed()) {
-                this.focusDay = focusDay;
-                this.moveYears(1);
-            }
-        };
-        this.navButtonMouseDownHandler = (ev) => {
-            ev.preventDefault();
-        };
-        this.renderMonthYearNavButton = (id, flip, disabled) => {
-            const buttonSize = this.size;
-            return (h("div", { "aria-hidden": "true" }, h("ic-button", { id: id, disableTooltip: true, disabled: disabled, onClick: this.monthYearNavClickHandler, class: { flip: flip }, variant: "icon-tertiary", innerHTML: chevron, size: buttonSize, tabIndex: -1, "aria-hidden": "true", onMouseDown: this.navButtonMouseDownHandler })));
-        };
-        this.monthYearNavClickHandler = (ev) => {
-            const target = ev.target;
-            switch (target.id) {
-                case "previous-month-button":
-                    this.goToPreviousMonth(this.dayButtonFocussed);
-                    break;
-                case "next-month-button":
-                    this.goToNextMonth(this.dayButtonFocussed);
-                    break;
-                case "previous-year-button":
-                    this.goToPreviousYear(this.dayButtonFocussed);
-                    break;
-                case "next-year-button":
-                    this.goToNextYear(this.dayButtonFocussed);
-                    break;
-            }
-        };
-        this.previousMonthButton = () => {
-            let disabled = false;
-            if (this.focussedDate !== null && this.minDate !== null) {
-                const yearMatch = this.focussedDate.getFullYear() === this.minDate.getFullYear();
-                if (yearMatch) {
-                    disabled = this.monthInView - 1 < this.minDate.getMonth();
-                }
-            }
-            return this.renderMonthYearNavButton("previous-month-button", true, disabled);
-        };
-        this.nextMonthButton = () => {
-            let disabled = false;
-            if (this.focussedDate !== null && this.maxDate !== null) {
-                const yearMatch = this.focussedDate.getFullYear() === this.maxDate.getFullYear();
-                if (yearMatch) {
-                    disabled = this.monthInView + 1 > this.maxDate.getMonth();
-                }
-            }
-            return this.renderMonthYearNavButton("next-month-button", false, disabled);
-        };
-        this.previousYearButton = () => {
-            return this.renderMonthYearNavButton("previous-year-button", true, !this.isPrevYearAllowed());
-        };
-        this.nextYearButton = () => {
-            return this.renderMonthYearNavButton("next-year-button", false, !this.isNextYearAllowed());
-        };
-        this.isPrevYearAllowed = () => {
-            return this.isYearAllowed(this.yearInView - 1);
-        };
-        this.isNextYearAllowed = () => {
-            return this.isYearAllowed(this.yearInView + 1);
-        };
-        this.isYearAllowed = (yr) => yearInRange(yr, this.minDate, this.maxDate);
-        this.getMonthView = (date) => {
-            const start = getWeekStart(getMonthStart(date), this.startOfWeek);
-            const end = addSixWeeks(start);
-            const days = [];
-            let current = start;
-            while (!dateMatches(current, end)) {
-                days.push(current);
-                current = new Date(current);
-                current.setDate(current.getDate() + 1);
-            }
-            days.push(current);
-            return days;
-        };
-        this.isCurrentMonth = () => {
-            const d = new Date();
-            return (d.getFullYear() === this.yearInView && d.getMonth() === this.monthInView);
-        };
-        this.updateMonthInView = () => {
-            if (this.focussedDate) {
-                this.currMonthView = this.getMonthView(this.focussedDate);
-                this.focussedDay = this.focussedDate.getDate();
-                this.monthInView = this.focussedDate.getMonth();
-                this.yearInView = this.focussedDate.getFullYear();
-                if (this.dayPickerKeyboardNav) {
-                    this.monthInViewUpdateHandled = true;
-                    this.setAriaLiveRegionText(this.getMonthInViewText());
-                    this.dayPickerKeyboardNav = false;
-                }
-            }
-        };
-        this.handleSelectDay = (day) => {
-            var _a;
-            this.setSelectedDate(day);
-            this.calendarOpen = false;
-            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setCalendarFocus();
-        };
-        this.handleSelectMonth = (month) => {
-            this.moveMonths(month - this.monthInView);
-            setTimeout(() => {
-                this.monthButtonEl.setFocus();
-                this.monthPickerVisible = false;
-                this.setMonthSelectedLiveRegionText();
-            }, FOCUS_TIMER);
-        };
-        this.handleSelectYear = (year) => {
-            const yrPos = this.decadeView.indexOf(year);
-            if (yrPos > 0 && yrPos < this.decadeView.length - 1) {
-                this.moveYears(year - this.yearInView);
-                this.focusDay = false;
-                const monthName = this.monthNames[this.monthInView];
-                this.setAriaLiveRegionText(`${year} selected. ${monthName} ${year} currently in view.`);
-                setTimeout(() => {
-                    this.yearButtonEl.setFocus();
-                    this.yearPickerVisible = false;
-                }, FOCUS_TIMER);
-            }
-            else {
-                const moveYears = year - this.focussedYear > 0 ? 10 : -10;
-                this.updateFocussedYear(moveYears, this.yearButtonFocussed);
-                this.setAriaLiveRegionText(this.getDecadeInViewText());
-            }
-        };
-        this.monthPickerKeyDownHandler = (ev) => {
-            let handled = true;
-            switch (ev.key) {
-                case "ArrowUp":
-                case "ArrowLeft":
-                    this.updateFocussedMonth(-1);
-                    break;
-                case "ArrowDown":
-                case "ArrowRight":
-                    this.updateFocussedMonth(1);
-                    break;
-                case "Home":
-                    this.updateFocussedMonth(-this.focussedMonth);
-                    break;
-                case "End":
-                    this.updateFocussedMonth(11 - this.focussedMonth);
-                    break;
-                case "Tab":
-                    handled = this.calendarTabHandler(ev);
-                    break;
-                case "Escape":
-                    ev.stopImmediatePropagation();
-                    this.monthPickerVisible = false;
-                    setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
-                    break;
-                default:
-                    handled = false;
-            }
-            if (handled) {
-                ev.preventDefault();
-            }
-        };
-        this.yearPickerKeyDownHandler = (ev) => {
-            let handled = true;
-            switch (ev.key) {
-                case "ArrowUp":
-                case "ArrowLeft":
-                    this.updateFocussedYear(-1);
-                    break;
-                case "ArrowDown":
-                case "ArrowRight":
-                    this.updateFocussedYear(1);
-                    break;
-                case "Home":
-                    if (this.focussedYear > this.decadeStart) {
-                        this.updateFocussedYear(this.decadeStart - this.focussedYear);
-                    }
-                    break;
-                case "End":
-                    if (this.focussedYear < this.decadeEnd) {
-                        this.updateFocussedYear(this.decadeEnd - this.focussedYear);
-                    }
-                    break;
-                case "PageUp":
-                    this.updateFocussedYear(-10);
-                    break;
-                case "PageDown":
-                    this.updateFocussedYear(10);
-                    break;
-                case "Tab":
-                    handled = this.calendarTabHandler(ev);
-                    break;
-                case "Escape":
-                    ev.stopImmediatePropagation();
-                    this.yearPickerVisible = false;
-                    setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
-                    break;
-                default:
-                    handled = false;
-            }
-            if (handled) {
-                ev.preventDefault();
-            }
-        };
-        this.onYearButtonFocusHandler = () => {
-            this.yearButtonFocussed = true;
-        };
-        this.onYearButtonBlurHandler = () => {
-            this.yearButtonFocussed = false;
-        };
-        this.monthButtonKeyDownHandler = (ev) => {
-            let handled = false;
-            switch (ev.key) {
-                case "ArrowLeft":
-                case "ArrowUp":
-                    handled = true;
-                    this.goToPreviousMonth();
-                    break;
-                case "ArrowRight":
-                case "ArrowDown":
-                    handled = true;
-                    this.goToNextMonth();
-                    break;
-                case "Home":
-                    handled = true;
-                    this.focusDay = false;
-                    this.moveMonths(-this.monthInView);
-                    break;
-                case "End":
-                    handled = true;
-                    this.focusDay = false;
-                    this.moveMonths(11 - this.monthInView);
-                    break;
-                case "Tab":
-                    if (ev.shiftKey) {
-                        handled = true;
-                        this.focusLastElement();
-                    }
-                    break;
-                case "Escape":
-                    if (this.monthPickerVisible) {
-                        this.monthPickerVisible = false;
-                        ev.stopImmediatePropagation();
-                    }
-                    break;
-            }
-            if (handled) {
-                ev.preventDefault();
-            }
-        };
-        this.yearButtonKeyDownHandler = (ev) => {
-            let handled = false;
-            switch (ev.key) {
-                case "ArrowLeft":
-                case "ArrowUp":
-                    handled = true;
-                    this.goToPreviousYear();
-                    break;
-                case "ArrowRight":
-                case "ArrowDown":
-                    handled = true;
-                    this.goToNextYear();
-                    break;
-                case "Home":
-                    if (this.yearPickerVisible && this.yearInView > this.decadeStart) {
-                        handled = true;
-                        this.moveYears(this.decadeStart - this.yearInView);
-                    }
-                    break;
-                case "End":
-                    if (this.yearPickerVisible && this.yearInView < this.decadeEnd) {
-                        handled = true;
-                        this.moveYears(this.decadeEnd - this.focussedYear);
-                    }
-                    break;
-                case "PageUp":
-                    handled = true;
-                    this.focusDay = false;
-                    this.moveYears(-10);
-                    break;
-                case "PageDown":
-                    handled = true;
-                    this.focusDay = false;
-                    this.moveYears(10);
-                    break;
-                case "Escape":
-                    if (this.yearPickerVisible) {
-                        this.yearPickerVisible = false;
-                        ev.stopImmediatePropagation();
-                    }
-                    break;
-            }
-            if (handled) {
-                ev.preventDefault();
-            }
-        };
-        this.handleCalendarKeyDown = (ev) => {
-            let handled = true;
-            switch (ev.key) {
-                case "ArrowDown":
-                    this.dayPickerKeyboardNav = true;
-                    this.moveDays(7);
-                    break;
-                case "ArrowUp":
-                    this.dayPickerKeyboardNav = true;
-                    this.moveDays(-7);
-                    break;
-                case "ArrowLeft":
-                    this.dayPickerKeyboardNav = true;
-                    if (this.focussedDate)
-                        this.moveDays(-1 * this.getNextDayToFocus(this.focussedDate, false));
-                    break;
-                case "ArrowRight":
-                    this.dayPickerKeyboardNav = true;
-                    if (this.focussedDate)
-                        this.moveDays(this.getNextDayToFocus(this.focussedDate, true));
-                    break;
-                case "PageUp":
-                    this.dayPickerKeyboardNav = true;
-                    ev.shiftKey ? this.moveYears(-1) : this.moveMonths(-1);
-                    break;
-                case "PageDown":
-                    this.dayPickerKeyboardNav = true;
-                    ev.shiftKey ? this.moveYears(1) : this.moveMonths(1);
-                    break;
-                case "Home":
-                    this.dayPickerKeyboardNav = true;
-                    this.setFocussedDate(new Date(this.focussedYear, this.focussedMonth, 1));
-                    break;
-                case "End":
-                    this.dayPickerKeyboardNav = true;
-                    this.setFocussedDate(new Date(this.focussedYear, this.focussedMonth + 1, 0));
-                    break;
-                case "Tab":
-                    handled = this.calendarTabHandler(ev);
-                    break;
-                default:
-                    handled = false;
-                    break;
-            }
-            if (handled) {
-                ev.preventDefault();
+        this.setCalendarProps = () => {
+            const calendarProps = {
+                disableDays: this.disableDays,
+                disableFuture: this.disableFuture,
+                disablePast: this.disablePast,
+                openAtDate: this.openAtDate,
+                showClearButton: this.showPickerClearButton,
+                showDaysOutsideMonth: this.showDaysOutsideMonth,
+                showTodayButton: this.showPickerTodayButton,
+                startOfWeek: this.startOfWeek,
+                theme: this.theme,
+                value: this.value,
+            };
+            if (calendarProps.dateFormat !== this.dateFormat) {
+                calendarProps.dateFormat = this.dateFormat;
             }
-        };
-        this.calendarTabHandler = (ev) => {
-            var _a;
-            let handled = false;
-            if (!ev.shiftKey &&
-                (!this.showPickerTodayButton || this.isCurrentMonth()) &&
-                (!this.showPickerClearButton || ((_a = this.clearButtonEl) === null || _a === void 0 ? void 0 : _a.disabled))) {
-                this.focusFirstElement();
-                handled = true;
+            if (this.disableFuture) {
+                calendarProps.disableFuture = this.disableFuture;
             }
-            else if (ev.shiftKey) {
-                this.yearButtonEl.setFocus();
-                handled = true;
+            if (this.disablePast) {
+                calendarProps.disablePast = this.disablePast;
             }
-            return handled;
-        };
-        this.onDayButtonFocusHandler = () => {
-            this.dayButtonFocussed = true;
-        };
-        this.onDayButtonBlurHandler = () => {
-            this.dayButtonFocussed = false;
-        };
-        this.getNextDayToFocus = (currDay, forward, level = 1) => {
-            var _a;
-            const move = forward ? 1 : -1;
-            const nextDay = new Date(currDay);
-            nextDay.setDate(nextDay.getDate() + move);
-            return ((_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(nextDay.getDay())))
-                ? this.getNextDayToFocus(nextDay, forward, level + 1)
-                : level;
-        };
-        this.moveDays = (numDays) => {
-            if (this.focussedDate) {
-                const d = new Date(this.focussedDate);
-                d.setDate(d.getDate() + numDays);
-                this.setFocussedDate(d);
+            if (this.disableDays && this.disableDays.length > 0) {
+                calendarProps.disableDays = this.disableDays;
             }
-        };
-        this.moveMonths = (numMonths) => {
-            if (this.focussedDate) {
-                const newMonth = this.focussedDate.getMonth() + numMonths;
-                const min = new Date(new Date(getMonthStart(this.focussedDate)).setMonth(newMonth));
-                const max = getMonthEnd(min);
-                const newDate = new Date(new Date(this.focussedDate).setMonth(newMonth));
-                this.setFocussedDate(clampDate(newDate, min, max));
-                if (this.monthPickerVisible === false &&
-                    this.yearPickerVisible === false &&
-                    this.monthInViewUpdateHandled === false) {
-                    this.setAriaLiveRegionText(this.getMonthInViewText());
-                }
-                this.monthInViewUpdateHandled = false;
+            if (this.max !== null && this.max !== "" && this.maxDate) {
+                calendarProps.max = this.maxDate;
             }
-        };
-        this.moveYears = (numYears) => {
-            if (this.focussedDate) {
-                const newYear = this.focussedDate.getFullYear() + numYears;
-                const min = new Date(new Date(getMonthStart(this.focussedDate)).setFullYear(newYear));
-                const max = getMonthEnd(min);
-                const newDate = new Date(new Date(this.focussedDate).setFullYear(newYear));
-                this.setFocussedDate(clampDate(newDate, min, max));
-                if (this.monthPickerVisible === false &&
-                    this.yearPickerVisible === false &&
-                    this.monthInViewUpdateHandled === false) {
-                    this.setAriaLiveRegionText(this.getMonthInViewText());
-                }
-                this.monthInViewUpdateHandled = false;
+            if (this.min !== null && this.min !== "" && this.minDate) {
+                calendarProps.min = this.minDate;
             }
-        };
-        this.updateFocussedMonth = (adjust) => {
-            const d = new Date(this.focussedYear, this.focussedMonth, 1);
-            d.setMonth(this.focussedMonth + adjust);
-            const newDate = clampDate(d, this.minDate, this.maxDate);
-            this.focussedMonth = newDate.getMonth();
-            setTimeout(() => this.focussedMonthEl.setFocus(), FOCUS_TIMER);
-        };
-        this.updateFocussedYear = (adjust, focusYear = true) => {
-            const d = new Date(new Date().setFullYear(this.focussedYear + adjust));
-            const newDate = clampDate(d, this.minDate, this.maxDate);
-            this.setFocussedYear(newDate.getFullYear(), focusYear);
-        };
-        this.setFocussedDate = (d) => {
-            this.focussedDate = clampDate(d, this.minDate, this.maxDate);
-        };
-        this.setFocussedDayEl = (element) => {
-            this.focussedDayEl = element;
-        };
-        this.setFocussedMonthEl = (element) => {
-            this.focussedMonthEl = element;
-        };
-        this.setFocussedYearEl = (element) => {
-            this.focussedYearEl = element;
-        };
-        this.setFocussedYear = (newYear, focus = true) => {
-            const prevYear = this.focussedYear;
-            this.focussedYear = newYear;
-            if (this.yearPickerVisible) {
-                const newDecade = Math.floor(newYear / 10) * 10;
-                const oldDecade = Math.floor(prevYear / 10) * 10;
-                if (newDecade !== oldDecade) {
-                    this.setDecadeView(newDecade);
-                    this.setAriaLiveRegionText(this.getDecadeInViewText());
-                }
-                if (focus) {
-                    setTimeout(() => {
-                        if (this.focussedYearEl !== null)
-                            this.focussedYearEl.setFocus();
-                    }, FOCUS_TIMER);
-                }
+            if (this.disabled) {
+                calendarProps.disabled = this.disabled;
             }
-            else {
-                this.setDecadeView(Math.floor(newYear / 10) * 10);
+            if (this.size !== "medium") {
+                calendarProps.size = this.size;
             }
+            return calendarProps;
         };
         this.setDateInputProps = () => {
             const inputProps = {
@@ -907,7 +218,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                 emitDatePartChange: this.emitDatePartChange,
                 validationAriaLive: this.validationAriaLive,
             };
-            if (this.dateFormat !== DEFAULT_DATE_FORMAT) {
+            if (inputProps.dateFormat !== this.dateFormat) {
                 inputProps.dateFormat = this.dateFormat;
             }
             if (this.disableFuture) {
@@ -992,15 +303,8 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             this.minDate = createDate(this.min, this.dateFormat);
         }
     }
-    watchStartOfWeekHandler() {
-        this.orderedDaysOfWeek = this.daysOfWeek
-            .slice(this.startOfWeek)
-            .concat(this.daysOfWeek.slice(0, this.startOfWeek));
-        if (this.calendarOpen) {
-            this.updateMonthInView();
-        }
-    }
     watchOpenHandler() {
+        var _a;
         if (this.calendarOpen) {
             if (this.inputEl) {
                 let pickerHeight = PICKER_HEIGHT_DEFAULT;
@@ -1019,147 +323,96 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                     this.showPickerAbove = false;
                 }
             }
-            if (this.selectedDate === null ||
-                !dateInRange(this.selectedDate, this.minDate, this.maxDate)) {
-                let openAt = new Date();
-                if (this.openAtDate !== "") {
-                    openAt = createDate(this.openAtDate, this.dateFormat);
-                }
-                this.setFocussedDate(openAt);
-            }
-            else {
-                this.setFocussedDate(this.selectedDate);
-            }
-            let dialogDesc = this.getMonthInViewText();
-            if (this.selectedDate === null) {
-                dialogDesc += " No date selected.";
-            }
-            dialogDesc +=
-                " Use arrow keys to change day. Press enter or space to select a date or press escape to close the picker";
-            this.dialogDescription = dialogDesc;
-            setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
+            this.setCalendarProps();
             document.addEventListener("click", this.handleDocumentClick);
         }
         else {
             document.removeEventListener("click", this.handleDocumentClick);
-            this.monthPickerVisible = false;
-            this.yearPickerVisible = false;
-        }
-    }
-    watchFocussedDateHandler(current, previous) {
-        if (previous === null ||
-            !(previous.getFullYear() === current.getFullYear() &&
-                previous.getMonth() === current.getMonth())) {
-            this.updateMonthInView();
-        }
-    }
-    watchMonthInViewHandler() {
-        this.focussedMonth = this.monthInView;
-    }
-    watchYearInViewHandler() {
-        this.setFocussedYear(this.yearInView, false);
-    }
-    watchYearPickerVisibleHandler() {
-        if (!this.yearPickerVisible) {
-            this.setFocussedYear(this.yearInView);
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setCalendarFocus();
         }
     }
-    watchMonthPickerVisibleHandler() {
-        if (!this.monthPickerVisible) {
-            this.focussedMonth = this.monthInView;
-        }
-    }
-    watchFocussedDayEl() {
-        if (this.focusDay) {
-            setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
-        }
-        this.focusDay = true;
+    disconnectedCallback() {
+        var _a;
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Date Picker");
-        this.monthNames = stringEnumToArray(IcDateInputMonths);
-        this.daysOfWeek = stringEnumToArray(IcShortDayNames);
-        this.watchStartOfWeekHandler();
         this.watchMaxHandler();
         this.watchMinHandler();
         removeDisabledFalse(this.disabled, this.el);
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, ["helper-text"], this));
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
     }
     componentWillRender() {
         this.dateInputProps = this.setDateInputProps();
+        this.calendarProps = this.setCalendarProps();
     }
     componentWillUpdate() {
         this.dateInputProps = this.setDateInputProps();
+        this.calendarProps = this.setCalendarProps();
     }
-    localCalendarButtonClickHandler(ev) {
+    localCalendarButtonClickHandler() {
         this.myCalendarButtonClicked = true;
         if (!this.calendarOpen) {
-            this.setSelectedDate(ev.detail.value, false);
+            this.calendarProps = this.setCalendarProps();
         }
         this.calendarOpen = !this.calendarOpen;
     }
     calendarButtonClickHandler() {
-        //closes this picker if calendar button in another clicked
+        // closes this picker if calendar button in another clicked
         if (!this.myCalendarButtonClicked) {
             this.calendarOpen = false;
         }
         this.myCalendarButtonClicked = false;
     }
-    render() {
-        const { calendarOpen, dateInputProps, monthNames, size, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, orderedDaysOfWeek, decadeView, minDate, maxDate, showPickerClearButton, showPickerTodayButton, dialogDescription, theme, } = this;
-        let monthButtonText = "";
-        if (monthPickerVisible) {
-            monthButtonText = `Use the arrow keys to change the selected month. To return to day picker view, press Enter or Space to select a month, or press Escape.`;
-        }
-        else {
-            monthButtonText = `Press Enter or Space to open month picker view or use the arrow keys to change month.`;
-        }
-        let yearButtonText = "";
-        if (yearPickerVisible) {
-            yearButtonText = `Use the arrow keys to change the selected year. To return to day picker view, press Enter or Space to select a year, or press Escape.`;
-        }
-        else {
-            yearButtonText = `Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`;
+    handleCalendarDaySelect() {
+        this.calendarOpen = false;
+    }
+    dateChangeHandler(ev) {
+        var _a;
+        if (this.selectedDate !== ((_a = ev.detail) === null || _a === void 0 ? void 0 : _a.value)) {
+            const path = ev.composedPath();
+            const sourceElement = path[0];
+            if (sourceElement === this.el)
+                return;
+            const newValue = ev.detail.value;
+            if (sourceElement.tagName === "IC-CALENDAR") {
+                if (newValue === null || !dateMatches(newValue, this.selectedDate)) {
+                    let UTCDate = null;
+                    if (newValue !== null) {
+                        UTCDate = new Date(Date.UTC(newValue.getFullYear(), newValue.getMonth(), newValue.getDate()));
+                    }
+                    this.updateDate(newValue, UTCDate);
+                }
+            }
+            else if (sourceElement.tagName === "IC-DATE-INPUT" &&
+                (newValue === null || !dateMatches(newValue, this.selectedDate))) {
+                this.updateDate(newValue, ev.detail.utcValue, false, ev.detail.dateObject);
+                this.openAtDate = newValue;
+            }
         }
-        const dialogLabel = "choose date";
-        const monthLabel = monthNames && monthNames[monthInView]
-            ? monthNames[monthInView]
-            : "Open month picker";
-        const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
-        let minDay = minDate;
-        if (minDate && this.disablePast) {
-            const yesterday = new Date(minDate);
-            yesterday.setDate(minDate.getDate() - 1);
-            minDay = yesterday;
+    }
+    updateDate(newValue, newUTCValue, emit = true, newDateObject) {
+        var _a;
+        if (!dateMatches(newValue, this.selectedDate)) {
+            this.selectedDate = newValue;
+            this.value = newValue;
+            if (emit) {
+                (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.triggerIcChange(newValue);
+            }
         }
-        return (h(Host, { key: 'e570b8174d8e85ebe88381088d155dfc79eb66a4', onKeyDown: this.keyDownHandler, class: {
+    }
+    render() {
+        const { calendarOpen, calendarProps, dateInputProps, size, theme } = this;
+        return (h(Host, { key: 'f39748a07c611c9d1ea3d6f94a5193d239b851f4', onKeyDown: this.keyDownHandler, class: {
                 [`ic-date-picker-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '746911155d83526a80676f2a6bb76f48d0c5e9f1', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: 'd5c01484b4db9760040ec20d96c73dedc2f3562f', ref: (el) => (this.inputEl = el) }, dateInputProps), h("slot", { key: '4af2a51669b6b9b8e05683e3b91fca8a807eee48', name: "helper-text", slot: "helper-text" }))), calendarOpen && (h("div", { key: 'd1fa8a019c53499d5de2726a062638016d6dd750' }, h("span", { key: '034465a0f1a144899243c8642f3b6f8bb2d3be7f', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: '0d8ae853e60cbf42fce8394b2944722958516c31', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
-                "calendar-container": true,
-                above: this.showPickerAbove,
-            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { key: '67b58c1c2a95cd0602e6e78b4b7c92665d9fa450', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: '90d97f9401bb8871dc53d6141240bf5cdd7a6e37', class: {
-                "month-year-nav-container": true,
-            } }, h("div", { key: '1844f84afbad819901ff52c9467df271d3dfa1e7', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: '6773a9e063b3f2b743ed61e84439a512536764dd', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: '7a7aff0e3d54d572556d8cd971defc2c9f79d92e', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), h("div", { key: '50133dc47a4e8e2c3e4e1d5373a92b2d7112d5ba', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: 'ed7777002bb64ea4fbd3e0e16783061ccfcceb93', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: '9a81be66d4a62f506838f68020c6dd0192ff4ba3', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (h("div", { key: '2e6a4395860e1d44aee979b0a7e0a5aa9a09ac39', class: {
-                calendar: true,
-                hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { key: '743dffc1a5fbb1a40456e47be2dce866d991f19d', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
-            const header = size === "small" ? dayName.charAt(0) : dayName;
-            return (h("div", { class: "calendar-day-header" }, h("ic-typography", { variant: "caption" }, header)));
-        })), h("div", { key: '30a8310c3ee80c9c0a85fff417c13fb7961a958c', class: "calendar-days-container" }, this.currMonthView.map((day) => {
-            var _a;
-            return (h(DayButton, { day: day, disableDay: (_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(day.getDay())), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth }));
-        })))), h("div", { key: '202e8edaafb640264c52f2c2254de4124d0f03f7', class: {
-                "month-picker-container": true,
-                hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (h(MonthPicker, { key: '3680653a0f840b509cfab1079e12590f037c5b1f', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: '2e52f56752747794514a81b4bbe13e6bd7810680', class: {
-                "year-picker-container": true,
-                hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (h(YearPicker, { key: 'dbcf70511028f9be36dd859db8e0e7549f183ad9', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), h("div", { key: '7d658ffc586f119f8ca3e6d2fc3cf244a5c72dee', class: {
-                "bottom-buttons": true,
-                "no-today": !showPickerTodayButton,
-            } }, showPickerTodayButton && (h("ic-button", { key: '0e97ccab194a021105ddec5b9e6bdd20681e2390', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showPickerClearButton && (h("ic-button", { key: 'c3d24232ba991e18247ed07f14e519a8d17a8f19', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
-                this.value === null ||
-                this.value === undefined }, "Clear"))))))));
+            } }, h("div", { key: '1ce56e7010a9ee2ec308d74edcd04b3494281082', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: '2cbbd3d3bad44a857e262d8c44c4ad8305b323b6', ref: (el) => (this.inputEl = el) }, dateInputProps), h("slot", { key: '38206ce726393bc2466a2632ebf4e9f1028c5eed', name: "helper-text", slot: "helper-text" }))), calendarOpen && (h("ic-calendar", Object.assign({ key: 'ba6b5a006cb06f2b3346f2ba52044c6f5c4aeeac', class: {
+                ["ic-date-picker-above"]: this.showPickerAbove,
+                ["ic-date-picker-calendar"]: true,
+            }, ref: (el) => (this.calendarEl = el) }, calendarProps)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -1169,26 +422,19 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         "disablePast": ["watchDisablePastHandler"],
         "max": ["watchMaxHandler"],
         "min": ["watchMinHandler"],
-        "startOfWeek": ["watchStartOfWeekHandler"],
-        "calendarOpen": ["watchOpenHandler"],
-        "focussedDate": ["watchFocussedDateHandler"],
-        "monthInView": ["watchMonthInViewHandler"],
-        "yearInView": ["watchYearInViewHandler"],
-        "yearPickerVisible": ["watchYearPickerVisibleHandler"],
-        "monthPickerVisible": ["watchMonthPickerVisibleHandler"],
-        "focussedDayEl": ["watchFocussedDayEl"]
+        "calendarOpen": ["watchOpenHandler"]
     }; }
     static get style() { return IcDatePickerStyle0; }
 }, [17, "ic-date-picker", {
         "dateFormat": [1, "date-format"],
         "disabled": [4],
-        "emitDatePartChange": [4, "emit-date-part-change"],
         "disableDays": [16],
         "disableDaysMessage": [1, "disable-days-message"],
         "disableFuture": [4, "disable-future"],
         "disableFutureMessage": [1, "disable-future-message"],
         "disablePast": [4, "disable-past"],
         "disablePastMessage": [1, "disable-past-message"],
+        "emitDatePartChange": [4, "emit-date-part-change"],
         "helperText": [1, "helper-text"],
         "hideHelperText": [4, "hide-helper-text"],
         "hideLabel": [4, "hide-label"],
@@ -1212,43 +458,25 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         "validationText": [1, "validation-text"],
         "value": [1025],
         "calendarOpen": [32],
-        "currMonthView": [32],
-        "currYearPickerView": [32],
-        "decadeView": [32],
-        "focussedDate": [32],
-        "focussedDay": [32],
-        "focussedDayEl": [32],
-        "focussedMonth": [32],
-        "focussedMonthEl": [32],
-        "focussedYear": [32],
         "maxDate": [32],
         "minDate": [32],
         "monthInView": [32],
         "monthPickerVisible": [32],
         "orderedDaysOfWeek": [32],
-        "selectedDate": [32],
-        "yearInView": [32],
-        "yearPickerVisible": [32]
-    }, [[0, "calendarButtonClicked", "localCalendarButtonClickHandler"], [4, "calendarButtonClicked", "calendarButtonClickHandler"]], {
+        "selectedDate": [32]
+    }, [[0, "calendarButtonClicked", "localCalendarButtonClickHandler"], [4, "calendarButtonClicked", "calendarButtonClickHandler"], [0, "icCalendarDaySelect", "handleCalendarDaySelect"], [0, "icChange", "dateChangeHandler"]], {
         "disabled": ["watchDisabledHandler"],
         "disableFuture": ["watchDisableFutureHandler"],
         "disablePast": ["watchDisablePastHandler"],
         "max": ["watchMaxHandler"],
         "min": ["watchMinHandler"],
-        "startOfWeek": ["watchStartOfWeekHandler"],
-        "calendarOpen": ["watchOpenHandler"],
-        "focussedDate": ["watchFocussedDateHandler"],
-        "monthInView": ["watchMonthInViewHandler"],
-        "yearInView": ["watchYearInViewHandler"],
-        "yearPickerVisible": ["watchYearPickerVisibleHandler"],
-        "monthPickerVisible": ["watchMonthPickerVisibleHandler"],
-        "focussedDayEl": ["watchFocussedDayEl"]
+        "calendarOpen": ["watchOpenHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ic-date-picker", "ic-button", "ic-date-input", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-loading-indicator", "ic-tooltip", "ic-typography"];
+    const components = ["ic-date-picker", "ic-button", "ic-calendar", "ic-date-input", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-loading-indicator", "ic-tooltip", "ic-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "ic-date-picker":
             if (!customElements.get(tagName)) {
@@ -1256,6 +484,11 @@ function defineCustomElement$1() {
             }
             break;
         case "ic-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ic-calendar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }