@maggioli-design-system/magma 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/cjs/mds-input-date-range.cjs.entry.js

@@ -34,12 +34,11 @@ var localeIt = {
 	to: to
 };
 
-const mdsInputDateRangeCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-input-date-range-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-range-fields-firefox-justify-content:start;--mds-input-date-range-fields-gap:0 calc(var(--spacing,.0025rem)*200);--mds-input-date-range-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-range-variant-color-rgb:0 0 0}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-calendar,mds-dropdown,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-input-date-range-fields-firefox-justify-content{syntax:"start|end|center|left|right|flex-start|flex-end";inherits:false;initial-value:start}@property --mds-input-date-range-variant-color-rgb{syntax:"<integer>+";inherits:false;initial-value:0 0 0}:host{--mds-input-date-range-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-range-fields-firefox-justify-content:start;--mds-input-date-range-fields-gap:0 calc(var(--spacing,.0025rem)*200);--mds-input-date-range-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-range-ring:0 0 0 1px rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/.1);--mds-input-date-range-shadow:0 1px 3px 0 rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/.1),0 1px 2px 0 rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/.06);font-family:var(--font-info,Karla,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:var(--text-size-info-detail,1rem);font-weight:var(--tw-font-weight,var(--text-size-info-detail--font-weight,400));line-height:var(--tw-leading,var(--text-size-info-detail--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--radius-2xl,24px);color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:var(--magma-corner-shape,round);container-type:inline-size;cursor:text;display:flex;gap:calc(var(--spacing,.0025rem)*200);overflow:visible;position:relative;--mds-input-date-range-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-date-range-variant-color-rgb:0 0 0}.date-preselection{display:grid;gap:calc(var(--spacing,.0025rem)*200)}.inputs{font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-hack,.875rem);font-weight:var(--tw-font-weight,var(--text-size-code-hack--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-hack--line-height,1.25rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--mds-input-date-range-background,rgb(var(--tone-neutral,0 0 0)));border-radius:inherit;-webkit-box-shadow:var(--mds-input-date-range-ring),var(--mds-input-date-range-shadow);box-shadow:var(--mds-input-date-range-ring),var(--mds-input-date-range-shadow);box-sizing:border-box;color:inherit;corner-shape:inherit;align-items:center;border:0;display:inline-flex;flex-wrap:wrap;gap:var(--mds-input-date-range-fields-gap,0 calc(var(--spacing,.0025rem)*200));margin:0;min-height:3rem;overflow:hidden;padding-left:calc(var(--spacing,.0025rem)*400);padding-right:calc(var(--spacing,.0025rem)*1200);text-overflow:ellipsis;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color,border-color,box-shadow,color,fill,margin,opacity,padding,transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));width:100%}.input-element{align-items:baseline;display:inline-flex}:host(:focus-within) .inputs{--tw-outline-style:none;outline-style:none;transition-duration:var(--default-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--default-transition-timing-function);--mds-input-date-range-ring:0 0 0 3px rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/1);--mds-input-date-range-shadow:0 4px 6px 3px rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/.1),0 2px 4px -1px rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/.06);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.input-wrapper{display:flex;flex-shrink:0}.date-label{margin-left:calc(var(--spacing,.0025rem)*50);margin-right:calc(var(--spacing,.0025rem)*50);min-width:min-content;white-space:nowrap}.date-label:first-child{margin-left:0}mds-calendar{min-width:max-content}.action-open-calendar-wrapper{align-items:center;aspect-ratio:1;bottom:0;display:flex;justify-content:center;position:absolute;right:0;top:0}.action-open-calendar{--mds-button-color:var(--mds-input-date-range-icon-color,rgb(var(--variant-primary-03,211 226 255)))}mds-dropdown{padding:0}:host-context(:root.pref-animation-reduce) .input{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-input-date-range-ring:var(--shadow-outline-50);--mds-input-date-range-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}:host-context(:root.pref-contrast-more){--mds-input-date-range-ring:var(--shadow-outline-strong-50);--mds-input-date-range-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:host-context(:root.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-contrast-more) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}@supports ((-moz-appearance:none)){.action-open-calendar{display:none}.inputs{-ms-flex-pack:var(--mds-input-date-range-fields-firefox-justify-content,start);justify-content:var(--mds-input-date-range-fields-firefox-justify-content,start);padding-right:calc(var(--spacing,.0025rem)*400)}}:host(:focus-within){--mds-input-date-range-icon-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-date-range-variant-color-rgb:var(--variant-primary-04,184 208 255)}:host([variant=ai]){--mds-input-date-range-icon-color:rgb(var(--variant-ai-04,218 199 253));--mds-input-tip-background:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-range-variant-color-rgb:0 0 0}:host([variant=ai]:focus-within){--mds-input-date-range-icon-color:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-range-variant-color-rgb:var(--variant-ai-04,218 199 253)}:host([variant=info]){--mds-input-date-range-icon-color:rgb(var(--status-info-04,159 216 241));--mds-input-tip-background:rgb(var(--status-info-05,112 198 234));--mds-input-date-range-variant-color-rgb:0 0 0}:host([variant=info]:focus-within){--mds-input-date-range-icon-color:rgb(var(--status-info-05,112 198 234));--mds-input-date-range-variant-color-rgb:var(--status-info-04,159 216 241)}:host([variant=success]){--mds-input-date-range-icon-color:rgb(var(--status-success-04,158 222 181));--mds-input-tip-background:rgb(var(--status-success-05,107 206 147));--mds-input-date-range-variant-color-rgb:0 0 0}:host([variant=success]:focus-within){--mds-input-date-range-icon-color:rgb(var(--status-success-05,107 206 147));--mds-input-date-range-variant-color-rgb:var(--status-success-04,158 222 181)}:host([variant=warning]){--mds-input-date-range-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-input-tip-background:rgb(var(--status-warning-05,237 177 0));--mds-input-date-range-variant-color-rgb:0 0 0}:host([variant=warning]:focus-within){--mds-input-date-range-icon-color:rgb(var(--status-warning-05,237 177 0));--mds-input-date-range-variant-color-rgb:var(--status-warning-04,255 200 33)}:host([variant=error]){--mds-input-date-range-icon-color:rgb(var(--status-error-04,254 193 189));--mds-input-tip-background:rgb(var(--status-error-05,250 165 160));--mds-input-date-range-variant-color-rgb:0 0 0}:host([variant=error]:focus-within){--mds-input-date-range-icon-color:rgb(var(--status-error-05,250 165 160));--mds-input-date-range-variant-color-rgb:var(--status-error-04,254 193 189)}@media (forced-colors:active){:host(:focus-within) .inputs{outline:2px solid #0000;outline-offset:2px}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .input{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-input-date-range-ring:var(--shadow-outline-50);--mds-input-date-range-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-input-date-range-ring:var(--shadow-outline-strong-50);--mds-input-date-range-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}}`;
+const mdsInputDateRangeCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-input-date-range-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-range-calendar-width:22rem;--mds-input-date-range-fields-firefox-justify-content:start;--mds-input-date-range-fields-gap:0 calc(var(--spacing,.0025rem)*200);--mds-input-date-range-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-range-variant-color-rgb:0 0 0}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-calendar,mds-dropdown,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-input-date-range-calendar-width{syntax:"<length>";inherits:false;initial-value:22rem}@property --mds-input-date-range-fields-firefox-justify-content{syntax:"start|end|center|left|right|flex-start|flex-end";inherits:false;initial-value:start}@property --mds-input-date-range-variant-color-rgb{syntax:"<integer>+";inherits:false;initial-value:0 0 0}:host{--mds-input-date-range-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-range-calendar-width:22rem;--mds-input-date-range-fields-firefox-justify-content:start;--mds-input-date-range-fields-gap:0 calc(var(--spacing,.0025rem)*200);--mds-input-date-range-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-range-ring:0 0 0 1px rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/.1);--mds-input-date-range-shadow:0 1px 3px 0 rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/.1),0 1px 2px 0 rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/.06);font-family:var(--font-info,Karla,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:var(--text-size-info-detail,1rem);font-weight:var(--tw-font-weight,var(--text-size-info-detail--font-weight,400));line-height:var(--tw-leading,var(--text-size-info-detail--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--radius-2xl,24px);color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:var(--magma-corner-shape,round);container-type:inline-size;cursor:text;display:flex;gap:calc(var(--spacing,.0025rem)*200);overflow:visible;position:relative;--mds-input-date-range-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-date-range-variant-color-rgb:0 0 0}.date-preselection{display:grid;gap:calc(var(--spacing,.0025rem)*200)}.inputs{font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-hack,.875rem);font-weight:var(--tw-font-weight,var(--text-size-code-hack--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-hack--line-height,1.25rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--mds-input-date-range-background,rgb(var(--tone-neutral,0 0 0)));border-radius:inherit;-webkit-box-shadow:var(--mds-input-date-range-ring),var(--mds-input-date-range-shadow);box-shadow:var(--mds-input-date-range-ring),var(--mds-input-date-range-shadow);box-sizing:border-box;color:inherit;corner-shape:inherit;align-items:center;border:0;display:inline-flex;flex-wrap:wrap;gap:var(--mds-input-date-range-fields-gap,0 calc(var(--spacing,.0025rem)*200));margin:0;min-height:3rem;overflow:hidden;padding-left:calc(var(--spacing,.0025rem)*400);padding-right:calc(var(--spacing,.0025rem)*1200);text-overflow:ellipsis;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color,border-color,box-shadow,color,fill,margin,opacity,padding,transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));width:100%}.input-element{align-items:baseline;display:inline-flex}:host(:focus-within) .inputs{--tw-outline-style:none;outline-style:none;transition-duration:var(--default-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--default-transition-timing-function);--mds-input-date-range-ring:0 0 0 3px rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/1);--mds-input-date-range-shadow:0 4px 6px 3px rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/.1),0 2px 4px -1px rgb(var(--mds-input-date-range-variant-color-rgb,0 0 0)/.06);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.input-wrapper{display:flex;flex-shrink:0}.date-label{margin-left:calc(var(--spacing,.0025rem)*50);margin-right:calc(var(--spacing,.0025rem)*50);min-width:min-content;white-space:nowrap}.date-label:first-child{margin-left:0}.calendars{display:flex;flex-wrap:nowrap;gap:calc(var(--spacing,.0025rem)*200);min-width:max-content}.calendar-preselection-panel{align-content:start;background-color:rgb(var(--tone-neutral-09,76 76 76));border-radius:var(--radius-lg,16px);box-sizing:border-box;display:grid;min-inline-size:max-content;padding:calc(var(--spacing,.0025rem)*400)}.calendar-single{display:flex;flex-wrap:nowrap;gap:calc(var(--spacing,.0025rem)*200);min-width:max-content}.calendar-single mds-calendar,.calendars mds-calendar{-ms-flex:0 0 var(--mds-input-date-range-calendar-width,22rem);flex:0 0 var(--mds-input-date-range-calendar-width,22rem);inline-size:var(--mds-input-date-range-calendar-width,22rem);max-inline-size:var(--mds-input-date-range-calendar-width,22rem);min-inline-size:var(--mds-input-date-range-calendar-width,22rem)}.action-open-calendar-wrapper{align-items:center;aspect-ratio:1;bottom:0;display:flex;justify-content:center;position:absolute;right:0;top:0}.action-open-calendar{--mds-button-color:var(--mds-input-date-range-icon-color,rgb(var(--variant-primary-03,211 226 255)))}mds-dropdown{padding:0}:host-context(:root.pref-animation-reduce) .input{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-input-date-range-ring:var(--shadow-outline-50);--mds-input-date-range-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}:host-context(:root.pref-contrast-more){--mds-input-date-range-ring:var(--shadow-outline-strong-50);--mds-input-date-range-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:host-context(:root.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-contrast-more) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}@supports ((-moz-appearance:none)){.action-open-calendar{display:none}.inputs{-ms-flex-pack:var(--mds-input-date-range-fields-firefox-justify-content,start);justify-content:var(--mds-input-date-range-fields-firefox-justify-content,start);padding-right:calc(var(--spacing,.0025rem)*400)}}:host(:focus-within){--mds-input-date-range-icon-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-date-range-variant-color-rgb:var(--variant-primary-04,184 208 255)}:host([variant=ai]){--mds-input-date-range-icon-color:rgb(var(--variant-ai-04,218 199 253));--mds-input-tip-background:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-range-variant-color-rgb:0 0 0}:host([variant=ai]:focus-within){--mds-input-date-range-icon-color:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-range-variant-color-rgb:var(--variant-ai-04,218 199 253)}:host([variant=info]){--mds-input-date-range-icon-color:rgb(var(--status-info-04,159 216 241));--mds-input-tip-background:rgb(var(--status-info-05,112 198 234));--mds-input-date-range-variant-color-rgb:0 0 0}:host([variant=info]:focus-within){--mds-input-date-range-icon-color:rgb(var(--status-info-05,112 198 234));--mds-input-date-range-variant-color-rgb:var(--status-info-04,159 216 241)}:host([variant=success]){--mds-input-date-range-icon-color:rgb(var(--status-success-04,158 222 181));--mds-input-tip-background:rgb(var(--status-success-05,107 206 147));--mds-input-date-range-variant-color-rgb:0 0 0}:host([variant=success]:focus-within){--mds-input-date-range-icon-color:rgb(var(--status-success-05,107 206 147));--mds-input-date-range-variant-color-rgb:var(--status-success-04,158 222 181)}:host([variant=warning]){--mds-input-date-range-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-input-tip-background:rgb(var(--status-warning-05,237 177 0));--mds-input-date-range-variant-color-rgb:0 0 0}:host([variant=warning]:focus-within){--mds-input-date-range-icon-color:rgb(var(--status-warning-05,237 177 0));--mds-input-date-range-variant-color-rgb:var(--status-warning-04,255 200 33)}:host([variant=error]){--mds-input-date-range-icon-color:rgb(var(--status-error-04,254 193 189));--mds-input-tip-background:rgb(var(--status-error-05,250 165 160));--mds-input-date-range-variant-color-rgb:0 0 0}:host([variant=error]:focus-within){--mds-input-date-range-icon-color:rgb(var(--status-error-05,250 165 160));--mds-input-date-range-variant-color-rgb:var(--status-error-04,254 193 189)}@media (forced-colors:active){:host(:focus-within) .inputs{outline:2px solid #0000;outline-offset:2px}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .input{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-input-date-range-ring:var(--shadow-outline-50);--mds-input-date-range-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-input-date-range-ring:var(--shadow-outline-strong-50);--mds-input-date-range-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}}`;
 
 const MdsInputDateRange = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dateRangeSelected = index.createEvent(this, "mdsInputDateRangeSelect");
         this.valueChanged = index.createEvent(this, "mdsInputDateRangeValueChange");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
@@ -51,6 +50,7 @@ const MdsInputDateRange = class {
         this.calendarKey = 0;
         this.internalStartDate = '';
         this.internalEndDate = '';
+        this.visibleCalendarDate = '';
         this.hasPreselection = false;
         this.t = new locale.Locale({
             el: localeEl,
@@ -83,10 +83,16 @@ const MdsInputDateRange = class {
          * @description Default is 500
          */
         this.delay = 500;
+        /**
+         * Enables the linked dual-calendar range picker behavior.
+         */
+        this.dualCalendar = false;
         this.lastEmittedStartDate = null;
         this.lastEmittedEndDate = null;
         this.initialStartDate = '';
         this.initialEndDate = '';
+        this.hoveredCalendarDate = null;
+        this.syncingInputSlots = new Set();
         this.handleFocusOut = (event) => {
             if (!this.host.contains(event.relatedTarget)) {
                 const startValid = datetime.DateTime.fromISO(this.internalStartDate).isValid;
@@ -94,20 +100,8 @@ const MdsInputDateRange = class {
                 if (startValid && endValid) {
                     this.validateDateRange();
                     this.syncFormValue();
-                    this.dateRangeSelected.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
                     this.checkPreselections();
-                }
-                if (this.internalStartDate !== this.lastEmittedStartDate ||
-                    this.internalEndDate !== this.lastEmittedEndDate) {
-                    this.valueChanged.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
-                    this.lastEmittedStartDate = this.internalStartDate;
-                    this.lastEmittedEndDate = this.internalEndDate;
+                    this.emitValueChanged();
                 }
             }
         };
@@ -130,10 +124,155 @@ const MdsInputDateRange = class {
             ev.stopPropagation();
             this.focusInput(this.host.querySelector('mds-input-date[slot="end"]'));
         };
+        this.handleCalendarHover = (ev) => {
+            if (this.internalStartDate === '' || this.internalEndDate !== '') {
+                this.clearHoverPreview();
+                return;
+            }
+            const nextHoverDate = ev.detail.hoverDate;
+            if (this.hoveredCalendarDate === nextHoverDate)
+                return;
+            this.hoveredCalendarDate = nextHoverDate;
+            this.syncCalendarsHoverAttributes();
+        };
+        this.handleCalendarChange = (ev) => {
+            this.clearHoverPreview();
+            this.internalStartDate = ev.detail.startDate;
+            this.updateInputValue('start', this.internalStartDate);
+            if (ev.detail.endDate !== undefined && ev.detail.endDate !== '') {
+                this.internalEndDate = ev.detail.endDate;
+                this.updateInputValue('end', this.internalEndDate);
+            }
+            else {
+                this.internalEndDate = '';
+                this.updateInputValue('end', this.internalEndDate);
+            }
+            this.syncFormValue();
+            this.syncCalendarsSelectionAttributes();
+            if (this.internalStartDate !== '' && this.internalEndDate !== '') {
+                this.emitValueChanged();
+                this.closeDropdownAfterSelection();
+            }
+        };
+        this.handleCalendarNavigate = (ev) => {
+            if (!this.dualCalendar)
+                return;
+            const calendars = this.getCalendars();
+            const calendarIndex = calendars.indexOf(ev.target);
+            const currentDate = datetime.DateTime.fromISO(ev.detail.currentDate);
+            if (!currentDate.isValid)
+                return;
+            this.visibleCalendarDate = currentDate
+                .minus({ months: calendarIndex === 1 ? 1 : 0 })
+                .startOf('month')
+                .toISODate();
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    getCalendars() {
+        var _a, _b;
+        return Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar')) !== null && _b !== void 0 ? _b : []);
+    }
+    resolveVisibleCalendarDate(startDate, endDate) {
+        var _a;
+        const initialDates = [startDate, endDate]
+            .map((value) => datetime.DateTime.fromISO(value !== null && value !== void 0 ? value : ''))
+            .filter((date) => date.isValid);
+        const initialVisibleDate = (_a = initialDates[0]) !== null && _a !== void 0 ? _a : datetime.DateTime.now();
+        return initialVisibleDate.startOf('month').toISODate();
+    }
+    getCalendarViewDate(monthOffset = 0) {
+        const visibleCalendarDate = datetime.DateTime.fromISO(this.visibleCalendarDate);
+        const startDate = datetime.DateTime.fromISO(this.internalStartDate);
+        let baseDate = datetime.DateTime.now();
+        if (visibleCalendarDate.isValid) {
+            baseDate = visibleCalendarDate;
+        }
+        else if (startDate.isValid) {
+            baseDate = startDate;
+        }
+        return baseDate.startOf('month').plus({ months: monthOffset }).toISODate();
+    }
+    setVisibleCalendarDate(date) {
+        const visibleCalendarDate = datetime.DateTime.fromISO(date);
+        if (visibleCalendarDate.isValid) {
+            this.visibleCalendarDate = visibleCalendarDate.startOf('month').toISODate();
+        }
+    }
+    closeDropdownAfterSelection() {
+        if (this.delay === 0)
+            return;
+        const { dropdownRef } = this;
+        if (dropdownRef) {
+            setTimeout(() => {
+                dropdownRef.visible = false;
+            }, this.delay);
+        }
+    }
+    syncCalendarsSelectionAttributes() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar').forEach((calendar) => {
+            if (this.internalStartDate !== '') {
+                calendar.setAttribute('start-date', this.internalStartDate);
+            }
+            else {
+                calendar.removeAttribute('start-date');
+            }
+            if (this.internalEndDate !== '') {
+                calendar.setAttribute('end-date', this.internalEndDate);
+            }
+            else {
+                calendar.removeAttribute('end-date');
+            }
+        });
+        this.syncCalendarsHoverAttributes();
+    }
+    syncCalendarsHoverAttributes() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar').forEach((calendar) => {
+            if (this.hoveredCalendarDate !== null && this.hoveredCalendarDate !== '') {
+                calendar.setAttribute('hover-date', this.hoveredCalendarDate);
+            }
+            else {
+                calendar.removeAttribute('hover-date');
+            }
+        });
+    }
+    clearHoverPreview() {
+        if (this.hoveredCalendarDate === null)
+            return;
+        this.hoveredCalendarDate = null;
+        this.syncCalendarsHoverAttributes();
+    }
+    getEmittableDateRangeDetail() {
+        const startDate = datetime.DateTime.fromISO(this.internalStartDate);
+        const endDate = datetime.DateTime.fromISO(this.internalEndDate);
+        if (!startDate.isValid || !endDate.isValid) {
+            return null;
+        }
+        return {
+            startDate: this.internalStartDate,
+            endDate: this.internalEndDate,
+        };
+    }
+    emitValueChanged() {
+        const detail = this.getEmittableDateRangeDetail();
+        if (!detail)
+            return false;
+        if (detail.startDate === this.lastEmittedStartDate &&
+            detail.endDate === this.lastEmittedEndDate) {
+            return false;
+        }
+        this.valueChanged.emit(detail);
+        this.lastEmittedStartDate = detail.startDate;
+        this.lastEmittedEndDate = detail.endDate;
+        return true;
+    }
     handleStartDateChange(newValue) {
         this.syncExternalDate('start', newValue);
     }
@@ -146,8 +285,9 @@ const MdsInputDateRange = class {
         this.internalEndDate = this.endDate;
         this.initialStartDate = this.startDate;
         this.initialEndDate = this.endDate;
+        this.visibleCalendarDate = this.resolveVisibleCalendarDate(this.internalStartDate, this.internalEndDate);
         // Se max è precedente a min, imposto max uguale a min
-        if (this.min && this.max) {
+        if (this.min !== null && this.min !== '' && this.max !== null && this.max !== '') {
             const minDate = datetime.DateTime.fromISO(this.min);
             const maxDate = datetime.DateTime.fromISO(this.max);
             if (maxDate < minDate) {
@@ -157,20 +297,27 @@ const MdsInputDateRange = class {
         this.syncFormValue();
     }
     disconnectedCallback() {
+        var _a;
         this.host.removeEventListener('focusout', this.handleFocusOut);
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('mdsCalendarHover', this.handleCalendarHover);
     }
+    /**
+     * Applies the given preselection range to the input.
+     * @param event the preselection range to apply
+     */
     async preselect(event) {
-        var _a, _b;
-        if (!this.togglePreselection) {
+        if (this.togglePreselection == null) {
             this.togglePreselection = Array.from(this.host.querySelectorAll('mds-input-date-range-preselection'));
         }
         this.togglePreselection.forEach((element) => {
             element.selected = false;
         });
         event.caller.selected = true;
+        this.clearHoverPreview();
         const startDate = datetime.DateTime.fromISO(event.start);
         if (startDate.isValid) {
             this.internalStartDate = event.start;
+            this.setVisibleCalendarDate(this.internalStartDate);
             this.updateInputValue('start', this.internalStartDate);
         }
         if (event.end !== undefined) {
@@ -184,34 +331,28 @@ const MdsInputDateRange = class {
         }
         this.updateInputValue('end', this.internalEndDate);
         this.syncFormValue();
-        const calendar = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mds-calendar');
-        if (calendar) {
-            await calendar.updateCurrentDate(this.internalStartDate);
-            if (this.delay === 0)
-                return;
-            const { dropdownRef } = this;
-            if (dropdownRef) {
-                setTimeout(() => {
-                    dropdownRef.visible = false;
-                }, this.delay);
-            }
+        const calendars = this.getCalendars();
+        if (calendars.length !== 0) {
+            await Promise.all(calendars.map((calendar, index) => calendar.updateCurrentDate(this.getCalendarViewDate(index))));
+            this.closeDropdownAfterSelection();
         }
-        this.dateRangeSelected.emit({
-            startDate: this.internalStartDate,
-            endDate: this.internalEndDate,
-        });
+        this.emitValueChanged();
         return Promise.resolve();
     }
     componentDidLoad() {
+        var _a;
         this.updateInputListeners();
         this.updateInputValue('start', this.internalStartDate);
         this.updateInputValue('end', this.internalEndDate);
         this.syncFormValue();
         this.host.addEventListener('focusout', this.handleFocusOut);
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('mdsCalendarHover', this.handleCalendarHover);
     }
     formResetCallback() {
+        this.clearHoverPreview();
         this.internalStartDate = this.initialStartDate;
         this.internalEndDate = this.initialEndDate;
+        this.visibleCalendarDate = this.resolveVisibleCalendarDate(this.initialStartDate, this.initialEndDate);
         this.updateInputValue('start', this.internalStartDate);
         this.updateInputValue('end', this.internalEndDate);
         this.checkPreselections();
@@ -219,10 +360,12 @@ const MdsInputDateRange = class {
     }
     syncExternalDate(slotName, newValue) {
         const normalizedValue = newValue !== null && newValue !== void 0 ? newValue : '';
+        this.clearHoverPreview();
         if (slotName === 'start') {
             if (normalizedValue === this.internalStartDate)
                 return;
             this.internalStartDate = normalizedValue;
+            this.setVisibleCalendarDate(this.internalStartDate);
         }
         else {
             if (normalizedValue === this.internalEndDate)
@@ -239,8 +382,13 @@ const MdsInputDateRange = class {
         var _a;
         const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
         const input = slot === null || slot === void 0 ? void 0 : slot.assignedElements()[0];
-        if (input) {
-            input.setValue(newValue);
+        if (input != null) {
+            this.syncingInputSlots.add(slotName);
+            input.setValue(newValue).finally(() => {
+                requestAnimationFrame(() => {
+                    this.syncingInputSlots.delete(slotName);
+                });
+            });
         }
     }
     updateInputListeners() {
@@ -248,20 +396,25 @@ const MdsInputDateRange = class {
         const startSlot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
         const endSlot = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="end"]');
         this.hasPreselection = this.host.querySelector('mds-input-date-range-preselection') !== null;
-        if (startSlot) {
+        if (startSlot != null) {
             const input = startSlot.assignedElements()[0];
             input.addEventListener('mdsInputDateSelect', this.createFocusoutListener('start'));
         }
-        if (endSlot) {
+        if (endSlot != null) {
             const input = endSlot.assignedElements()[0];
             input.addEventListener('mdsInputDateSelect', this.createFocusoutListener('end'));
         }
     }
     createFocusoutListener(slotName) {
         return (ev) => {
+            if (this.syncingInputSlots.has(slotName)) {
+                return;
+            }
             const event = ev;
+            this.clearHoverPreview();
             if (slotName === 'start') {
                 this.internalStartDate = event.detail;
+                this.setVisibleCalendarDate(this.internalStartDate);
             }
             else {
                 this.internalEndDate = event.detail;
@@ -270,7 +423,7 @@ const MdsInputDateRange = class {
         };
     }
     validateDateRange() {
-        if (this.internalStartDate && this.internalEndDate) {
+        if (this.internalStartDate !== '' && this.internalEndDate !== '') {
             const start = datetime.DateTime.fromISO(this.internalStartDate);
             const end = datetime.DateTime.fromISO(this.internalEndDate);
             if (end < start) {
@@ -281,7 +434,7 @@ const MdsInputDateRange = class {
     }
     checkPreselections() {
         const preselections = Array.from(this.host.querySelectorAll('mds-input-date-range-preselection'));
-        if (preselections) {
+        if (preselections != null) {
             preselections.forEach((element) => {
                 const preselection = element;
                 const isSameRange = preselection.start === this.internalStartDate &&
@@ -298,40 +451,33 @@ const MdsInputDateRange = class {
             });
         }
     }
+    renderCalendarPreselectionPanel() {
+        if (!this.hasPreselection)
+            return null;
+        return (index.h("div", { class: "calendar-preselection-panel" }, index.h("div", { class: clsx.clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, index.h("slot", { name: "calendar-preselection" }))));
+    }
+    renderSingleCalendar() {
+        return (index.h("div", { class: "calendar-single" }, this.renderCalendarPreselectionPanel(), index.h("mds-calendar", Object.assign({ lang: this.language, key: this.calendarKey, rangePicker: true, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))));
+    }
+    renderDualCalendars() {
+        return (index.h("div", { class: "calendars" }, this.renderCalendarPreselectionPanel(), index.h("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-start`, rangePicker: true, showNextButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {}))), index.h("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-end`, rangePicker: true, showPreviousButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(1), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))));
+    }
     render() {
-        return (index.h(index.Host, { key: '4aef8d318b0cab17f4ad1d7c276cbd0db2d2038d', onClick: this.focusDateInput }, index.h("div", { key: '8cc6be57143826af84c01a617fe4e2f47f45b63d', class: "inputs" }, index.h("div", { key: 'b79ce756d5064394cc2a3920ff72beb30e01ceb1', class: "input-element" }, index.h("mds-text", { key: '29825a813f7b8fb553c7ffce9db377e1884409fe', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), index.h("div", { key: '829e272b2e59be82c1e7d46e1c7f219965ed9645', class: "input-wrapper" }, index.h("slot", { key: '9dce89ebb990e417772dfd22f3773e34e0372087', name: "start" }))), index.h("div", { key: '7d1c88dac297479bbb7ac19d29bdc2a61878c9ec', class: "input-element" }, index.h("mds-text", { key: 'ed4e0bf4f145127142cb4b093aadc8e065259395', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), index.h("div", { key: '41c3ec52338798b32eb5439c6c429785405fb17d', class: "input-wrapper" }, index.h("slot", { key: '9d2c09367d5aa5e4f53dfbfb46ddab6695372cbb', name: "end" })))), index.h("div", { key: '6a3d364492b926fc9ff36173acc973b4a2f5d549', class: "action-open-calendar-wrapper" }, index.h("mds-button", { key: '1542474a4fd9d8f293511daa0021105d995d59a2', class: "action-open-calendar", variant: "dark", tone: "text", icon: calendarToday.miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
+        return (index.h(index.Host, { key: '13d9a565316927ca4ec2586f82e2f25f7d04ae25', onClick: this.focusDateInput }, index.h("div", { key: '71bda796783e6ead96c24ad4ed84ac79265291e8', class: "inputs" }, index.h("div", { key: 'c06b73facc486130eb89e857b782b15581cfba20', class: "input-element" }, index.h("mds-text", { key: '340fa48ce0a88bd6445cfc874c27ec70e2426feb', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), index.h("div", { key: 'b82416e3ffa442ee84004d20e298b859ca5543a8', class: "input-wrapper" }, index.h("slot", { key: '9b8741fecf76c4503e58b044222b4ccb6bb889e0', name: "start" }))), index.h("div", { key: 'fcd38e4e5d5a065001c712a960dd5bcae1dd5e79', class: "input-element" }, index.h("mds-text", { key: '269cdf295bfefe625a3cf98f1aaf7fb021b688d4', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), index.h("div", { key: 'ee917dba0a0af805e1ebe5b69fb997b492e044ba', class: "input-wrapper" }, index.h("slot", { key: 'dd22c8a98be387b76aa6b355f6b025db1a8fdbb6', name: "end" })))), index.h("div", { key: 'ca651a85e149d23e4eafdf66c121ffa3d5685dca', class: "action-open-calendar-wrapper" }, index.h("mds-button", { key: 'ff5e89aec57614f98890f52859bc2f10e33bc85d', class: "action-open-calendar", variant: "dark", tone: "text", icon: calendarToday.miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
                 this.calendarKey += 1;
-            } })), index.h("mds-dropdown", { key: 'aaa26eeab22f16125384fcfcc35ea7b1e6daf8cf', ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown", "auto-placement": false, placement: "bottom-end" }, index.h("mds-calendar", Object.assign({ lang: this.language, key: this.calendarKey, rangePicker: true, onMdsCalendarChange: (ev) => {
-                this.internalStartDate = ev.detail.startDate;
-                this.updateInputValue('start', this.internalStartDate);
-                if (ev.detail.endDate) {
-                    this.internalEndDate = ev.detail.endDate;
-                    this.updateInputValue('end', this.internalEndDate);
-                }
-                this.syncFormValue();
-                if (this.internalStartDate && this.internalEndDate) {
-                    this.dateRangeSelected.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
-                    if (this.delay === 0)
-                        return;
-                    const { dropdownRef } = this;
-                    if (dropdownRef) {
-                        setTimeout(() => {
-                            dropdownRef.visible = false;
-                        }, this.delay);
-                    }
-                }
-            }, onMdsCalendarPreselect: () => {
-                this.checkPreselections();
-            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})), index.h("div", { key: '906707dd59ff68bb46a411aae205d74cb61113bf', slot: "preselection", class: clsx.clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, index.h("slot", { key: 'e96a49b3797994bb00f66f5f9e88d4c7435e91cb', name: "calendar-preselection" }))))));
+            } })), index.h("mds-dropdown", { key: '30609e1d1eb75209b5e17444758b1b9b2ac19bce', ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown", "auto-placement": false, placement: "bottom-end" }, this.dualCalendar ? this.renderDualCalendars() : this.renderSingleCalendar())));
     }
     syncFormValue() {
         var _a, _b, _c, _d;
         const startDate = (_b = (_a = this.internalStartDate) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
         const endDate = (_d = (_c = this.internalEndDate) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '';
-        if (!startDate && !endDate) {
+        if (startDate === '' && endDate === '') {
             this.internals.setFormValue(null);
             return;
         }

package/dist/cjs/mds-input-date.cjs.entry.js

@@ -20,6 +20,7 @@ const MdsInputDate = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         this.isSlotted = false;
+        this.empty = undefined;
         this.t = new locale.Locale({
             el: {},
             en: {},
@@ -69,14 +70,15 @@ const MdsInputDate = class {
             const input = event.target;
             this.touched = true;
             // manage case when i insert 0 on date and default input behavior change in 01 instead of resetting all date
-            if (input.value)
+            if (input.value !== '')
                 this.value = input.value;
-            this.validateValue();
+            this.validateValue(input.validity.badInput);
         };
         this.onBlur = (ev) => {
             const input = ev.target;
             this.hasFocus = false;
             this.value = input.value;
+            this.validateValue(input.validity.badInput);
         };
         this.onFocus = (ev) => {
             const input = ev.target;
@@ -90,6 +92,9 @@ const MdsInputDate = class {
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -97,33 +102,49 @@ const MdsInputDate = class {
         this.valueChange.emit(this.value);
         this.validateValue();
     }
-    validateValue() {
+    validateValue(hasBadInput = false) {
         const date = datetime.DateTime.fromISO(this.value);
-        const isInvalidDate = date.invalid;
-        const outOfRange = (this.max && datetime.DateTime.fromISO(this.max) < date) ||
-            (this.min && datetime.DateTime.fromISO(this.min) > date);
-        if ((isInvalidDate && this.required) || outOfRange) {
+        const hasValue = Boolean(this.value);
+        const hasInvalidValue = hasValue && !date.isValid;
+        const isMissingRequiredValue = this.required && !hasValue;
+        const outOfRange = date.isValid &&
+            ((this.max && datetime.DateTime.fromISO(this.max) < date) ||
+                (this.min && datetime.DateTime.fromISO(this.min) > date));
+        if (hasBadInput || hasInvalidValue || isMissingRequiredValue || outOfRange) {
             this.isValid = false;
             this.variant = 'error';
             this.internals.setFormValue(null);
+            this.empty = hasBadInput || hasInvalidValue ? true : undefined;
         }
         else {
             this.isValid = true;
             this.variant = 'primary';
             this.internals.setFormValue(this.value);
+            this.empty = undefined;
         }
         this.validationEvent.emit(this.isValid);
     }
+    /**
+     * Sets focus on the underlying input element.
+     */
     async focusInput() {
         var _a;
         const input = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input');
         input.focus();
     }
+    /**
+     * Sets the input value.
+     * @param value the value to set, in ISO format (YYYY-MM-DD)
+     */
     async setValue(value) {
         this.value = value;
         this.validateValue();
         return Promise.resolve();
     }
+    /**
+     * Returns the current validation errors, or `null` if the value is valid.
+     * @returns the validation errors, or `null` when valid
+     */
     async getErrors() {
         return Promise.resolve(this.isValid ? null : { error: '' });
     }
@@ -131,11 +152,11 @@ const MdsInputDate = class {
         this.internals.setFormValue('');
     }
     componentWillLoad() {
-        this.isSlotted = !!this.host.getAttribute('slot');
+        this.isSlotted = !(this.host.getAttribute('slot') === null || this.host.getAttribute('slot') === '');
         this.value = this.value || '';
         this.language = this.t.lang(this.host);
         // Se max è precedente a min, imposto max uguale a min
-        if (this.min && this.max) {
+        if (this.min !== null && this.min !== '' && this.max !== null && this.max !== '') {
             const minDate = datetime.DateTime.fromISO(this.min);
             const maxDate = datetime.DateTime.fromISO(this.max);
             if (maxDate < minDate) {
@@ -145,9 +166,9 @@ const MdsInputDate = class {
         this.validateValue();
     }
     render() {
-        return (index.h(index.Host, { key: '8efaa64794d705ab057db7b0b7743b588e35a3e7' }, index.h("input", { key: '1e109892c36eae01e91d2aa5860b446c5d983006', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && (index.h("div", { key: '3e9fb074efbfc12022587a627ea4815ec1428d31', class: "action-open-calendar-wrapper" }, index.h("mds-button", { key: 'd4cd21ec69ea8b30cf8fcd95b4052b401e1435a2', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "text", icon: calendarToday.miBaselineCalendarToday, onClick: () => {
+        return (index.h(index.Host, { key: '1c3f9c46a1a1bc77e6639135ffe9615b91754289', empty: this.empty }, index.h("input", { key: 'e8867ce0ccc07885b616cd0c898859d4d378d70c', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && (index.h("div", { key: '82e8e07567fceed4f0a589f8ceac9057c9aaa324', class: "action-open-calendar-wrapper" }, index.h("mds-button", { key: '9c22475d725089ae3ccfe4c39aac26149726e8ff', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "text", icon: calendarToday.miBaselineCalendarToday, onClick: () => {
                 this.calendarKey += 1;
-            } }))), index.h("mds-input-tip", { key: '472adce47e2ad731fc1c742919ed2b6b32504558', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '108c1310e84fce62fe49b7c19662e73535720807', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: 'bcbc3b4374824307b4e8b473a4a8b4d62a1bfd30', expanded: true, variant: "readonly" }), this.required && (index.h("mds-input-tip-item", { key: 'e9bea14210b583a0a16c353ad402520df436f957', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), !this.isSlotted && (index.h("mds-dropdown", { key: 'a567e5b0e1ce481d9829b0438d235c87f77153ef', placement: "bottom-end", "auto-placement": false, ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown" }, index.h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: (ev) => {
+            } }))), index.h("mds-input-tip", { key: '3b4a5d49acf05f853839b7317a2e8bfe8d7d487d', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '987565a2df5bcaf1a538f3bf276cd6f7a12811a9', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: 'b51c192d654c65279fb2bdb0eb43952cc51e02e0', expanded: true, variant: "readonly" }), this.required && (index.h("mds-input-tip-item", { key: 'acd20e717f7abab93a5750f7125f06f55d618da8', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), !this.isSlotted && (index.h("mds-dropdown", { key: '9c2d0e843d019c530509f30cd37e890f5ab351a8', placement: "bottom-end", "auto-placement": false, ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown" }, index.h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: (ev) => {
                 this.value = ev.detail.startDate;
                 if (this.delay === 0)
                     return;
@@ -157,7 +178,7 @@ const MdsInputDate = class {
                         dropdownRef.visible = false;
                     }, this.delay);
                 }
-            }, startDate: this.value }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})))))));
+            }, startDate: this.value }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }

package/dist/cjs/mds-input-field.cjs.entry.js

@@ -16,12 +16,12 @@ const MdsInputField = class {
         // mdsInput.hasValidator().then(hasValidator => {
         // if (!hasValidator) return
         mdsInput.getErrors().then((errors) => {
-            if (errors) {
+            if (errors != null) {
                 this.variant = 'error';
                 const messages = Object.entries(errors)
                     .map((v) => v[1])
                     .filter((v) => v);
-                this.message = messages.length ? messages.join(';') : undefined;
+                this.message = messages.length !== 0 ? messages.join(';') : undefined;
                 return;
             }
             this.variant = 'success';
@@ -31,13 +31,13 @@ const MdsInputField = class {
     }
     componentDidLoad() {
         const [mdsInput] = this.slotInput.assignedElements();
-        if (!mdsInput)
+        if (mdsInput == null)
             throw new Error('Mds input not found');
         mdsInput.addEventListener('mdsInputValidation', () => this.handleValidation(mdsInput));
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '07a3f00c463755ed5699415bda96b8a6ab0088e8' }, index.h("mds-text", { key: 'a76488419fd68dd54fbb814bd464445f963ff20d', class: "label", typography: "label" }, this.label), index.h("div", { key: '288d029bde16c91ace57a906abd4bff5a6a2b26d', class: "message-window" }, index.h("div", { key: 'b9a8bc1f7967741b91f09b7f944c7b598cba86e9', class: "content", part: "content" }, index.h("slot", { key: 'cb260b91c2dccb8161a76043bd7257eed51b275d', ref: (i) => (this.slotInput = i) })), index.h("div", { key: '9be6a675440795d75cd580f22f19d45db01840fa', class: "message" }, (_a = this.message) === null || _a === void 0 ? void 0 : _a.split(';').map((m, i) => (index.h("mds-text", { typography: "caption", key: i }, m)))))));
+        return (index.h(index.Host, { key: '7d2b6e591f2da90402eef9c453b6b229d04f56f8' }, index.h("mds-text", { key: '6058dec040f453a65f5d34c8d16ddf786ade620f', class: "label", typography: "label" }, this.label), index.h("div", { key: 'dda1efd3aed92889c8aa28d5958630d304f81f9e', class: "message-window" }, index.h("div", { key: '66196e8f4f024dbbd2c59dc6c8d00b46b4997ff4', class: "content", part: "content" }, index.h("slot", { key: 'ba8af714da43300a70833acbd281bfe19c5d3e4b', ref: (i) => (this.slotInput = i) })), index.h("div", { key: 'dbc5d405bb47cd7f3d730d3732e2ef0c49d9bfc6', class: "message" }, (_a = this.message) === null || _a === void 0 ? void 0 : _a.split(';').map((m, i) => (index.h("mds-text", { typography: "caption", key: i }, m)))))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }