@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.75 → 0.0.0-pr624.77

package/components/datepicker/demo/index.min.js

@@ -1297,19 +1297,21 @@ class UtilitiesCalendarRender {
   }
 }
 
-var styleCss$e = i$2`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([layout=classic]) [auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}:host([layout=classic]) [auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout=classic]) [auro-input]::part(helpText){display:none}:host([layout=classic]) [auro-input]::part(wrapper):focus-within:before{border-bottom-width:0 !important;box-shadow:unset !important;outline:unset !important}:host([layout=classic]) [auro-input]::part(wrapper) .dpTriggerContent{display:flex;flex-direction:column}:host([layout=classic]) [auro-input]::part(wrapper) .dpTriggerContent [auro-input]{flex:1}:host([layout=classic]) [auro-input]::part(wrapper) .dpTriggerContent{flex-direction:row}:host([layout=classic]) [auro-input]::part(wrapper) [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem);--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}:host([layout=classic]) [auro-input]::part(wrapper) [auro-input]:not(:first-child)::part(wrapper)::after{position:absolute;left:50%;width:95%;height:1px;background-color:var(--ds-auro-datepicker-range-input-divider-color);content:"";transform:translateX(-50%)}:host([layout=classic]) [auro-input]::part(wrapper) .outerWrapper{position:relative;container:outerwrapper/inline-size}:host([layout=classic]) [auro-input]::part(wrapper) .dpTriggerContent{display:flex;flex-direction:column}:host([layout=classic]) [auro-input]::part(wrapper) .dpTriggerContent [auro-input]{flex:1}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) .dpTriggerContent{flex-direction:row}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:nth-child(2)::part(accentIcon){display:none}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:nth-child(2)::part(label){left:0;width:100%}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:nth-child(2)::part(input){padding-left:0}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked]) [auro-input]:not(:first-child)::part(wrapper):after{content:none}:host([layout=classic]) [auro-input]::part(wrapper):not([stacked])[range] [auro-input]{max-width:50%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
+var styleCss$e = i$2`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.accents{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.accents.left{padding-right:var(--ds-size-100, 0.5rem)}.accents.right{width:var(--ds-size-400, 2rem)}.mainContent{height:100%;max-height:100%;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.inputSection{display:flex;flex-direction:row;align-items:center;width:100%;margin:0 auto}.inputContainer{display:flex;flex-direction:row;align-items:center;width:100%}.inputContainer:first-of-type{justify-content:flex-end}.inputContainer:last-of-type{justify-content:flex-start}.dpTriggerContent{width:100%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
 
-var colorCss$d = i$2`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}.dpTriggerContent [auro-input]:nth-child(2):before{background-color:var(--ds-auro-datepicker-range-input-divider-color)}:host([onDark]){--ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-inverse, #ffffff)}`;
+var colorCss$d = i$2`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host label{color:var(--ds-auro-datepicker-label-text-color)}:host .inputDivider{background-color:var(--ds-auro-datepicker-range-input-divider-color)}:host .error{color:var(--ds-auro-datepicker-error-icon-color)}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}.dpTriggerContent [auro-input]:nth-child(2):before{background-color:var(--ds-auro-datepicker-range-input-divider-color)}:host(:not([ondark])[disabled]){--ds-auro-datepicker-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-datepicker-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-datepicker-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-datepicker-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
-var tokensCss$b = i$2`:host{--ds-auro-datepicker-placeholder-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
+var tokensCss$b = i$2`:host(:not([ondark])){--ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]){--ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-texticon-inverse-muted, v.$ds-basic-color-texticon-inverse-muted);--ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error-subtle, v.$ds-basic-color-status-error-subtle);--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-muted, v.$ds-basic-color-texticon-inverse-muted);--ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
 
 var shapeSizeCss$2 = i$2`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
 
+var classicLayoutStyle = i$2`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([layout*=classic]) .accents{display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) [auro-input]::part(wrapper){border-width:0;box-shadow:none}:host([layout*=classic]) [auro-input].dateTo{margin-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) [auro-input].dateTo::part(accent-left){display:none}:host([layout*=classic]) .inputDivider{width:1px;height:2rem}`;
+
 var classicLayoutColor = i$2``;
 
-var snowflakeStyle = i$2`.accents{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.accents.left{padding-right:var(--ds-size-100, 0.5rem)}.accents.right{width:var(--ds-size-400, 2rem)}.mainContent{height:100%;max-height:100%;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.inputSection{display:flex;flex-direction:row;align-items:center;width:100%;max-width:250px;margin:0 auto}.inputSection:not(:is(.disabled,.hasFocus,.hasValue)) .inputDivider{display:none}.inputContainer{display:flex;flex-direction:row;align-items:center;width:100%}.inputContainer:first-of-type{justify-content:flex-end}.inputContainer:last-of-type{justify-content:flex-start}:host([disabled]) .inputSection{display:none}:host([layout*=snowflake]) [auro-input]{flex:1;text-align:center}:host([layout*=snowflake]) [auro-input]::part(label),:host([layout*=snowflake]) [auro-input]::part(accent-left),:host([layout*=snowflake]) [auro-input]::part(accent-right){display:none}:host([layout*=snowflake]) [auro-input]::part(input){padding-bottom:unset;text-align:center;font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);transition:unset}:host([layout*=snowflake]) [auro-input]::part(wrapper){min-height:unset;max-height:unset;box-shadow:unset}:host([layout*=snowflake]) [auro-input]::part(wrapper) .mainContent{padding-bottom:unset}:host([layout*=snowflake]) [auro-input]::part(inputHelpText){display:none}:host([layout*=snowflake]) [auro-input]::part(displayValue){justify-content:center;font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem)}:host([layout*=snowflake]) [auro-dropdown]::part(trigger){width:100%}:host([layout*=snowflake]) .dpTriggerContent{width:100%}:host([layout*=snowflake]) .wrapper{height:60px;width:calc(100% - 48px);display:flex;flex-direction:row;justify-content:space-between;padding-left:24px;padding-right:24px}:host([layout*=snowflake]) label{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);font-weight:450;letter-spacing:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host([layout*=snowflake]) label.hasFocus,:host([layout*=snowflake]) label.hasValue{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}:host([layout*=snowflake]) .inputDivider{height:18px;margin:4px 12px;width:2px}`;
+var snowflakeStyle = i$2`:host([layout*=snowflake]) [auro-input]{flex:1;text-align:center}:host([layout*=snowflake]) [auro-input]::part(label),:host([layout*=snowflake]) [auro-input]::part(accent-left),:host([layout*=snowflake]) [auro-input]::part(accent-right){display:none}:host([layout*=snowflake]) [auro-input]::part(input){padding-bottom:unset;text-align:center;font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);transition:unset}:host([layout*=snowflake]) [auro-input]::part(wrapper){min-height:unset;max-height:unset;box-shadow:unset}:host([layout*=snowflake]) [auro-input]::part(wrapper) .mainContent{padding-bottom:unset}:host([layout*=snowflake]) [auro-input]::part(inputHelpText){display:none}:host([layout*=snowflake]) [auro-input]::part(displayValue){justify-content:center;font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem)}:host([layout*=snowflake]) [auro-dropdown]::part(trigger){width:100%}:host([layout*=snowflake]) .dpTriggerContent{width:100%}:host([layout*=snowflake]) .wrapper{height:60px;width:calc(100% - 48px);display:flex;flex-direction:row;justify-content:space-between;padding-left:24px;padding-right:24px}:host([layout*=snowflake]) label{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);font-weight:450;letter-spacing:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host([layout*=snowflake]) label.hasFocus,:host([layout*=snowflake]) label.hasValue{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}:host([layout*=snowflake]) .inputDivider{height:18px;margin:4px 12px;width:2px}:host([layout*=snowflake]) .inputSection:not(:is(.disabled,.hasFocus,.hasValue)) .inputDivider{display:none}:host([layout*=snowflake][disabled]){pointer-events:none}`;
 
-var snowflakeColors = i$2`:host([layout=snowflake])[disabled] .mainContent label ::slotted(*){color:var(--ds-auro-icon-color)}:host([layout=snowflake]) label{color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([layout=snowflake]) .inputDivider{background-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([layout=snowflake]) .error{color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout=snowflake]) [auro-input]::part(input)::placeholder{color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([layout=snowflake]) [auro-input]::part(displayValue){background-color:inherit}:host([layout=snowflake]) [auro-dropdown]:not(:is([error],.hasFocus))::part(wrapper){--ds-auro-dropdown-trigger-border-color: transparent}`;
+var snowflakeColors = i$2`:host([layout=snowflake]) [auro-dropdown]:not(:is([error],.hasFocus)){--ds-auro-dropdown-trigger-border-color: transparent}`;
 
 var styleCss$d = i$2`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
 
@@ -12749,7 +12751,7 @@ class AuroBibtemplate extends i {
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion$2, AuroButton$2);
+    this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion$2, AuroButton$2);
   }
 
   static get styles() {
@@ -28279,6 +28281,7 @@ class AuroDatePicker extends AuroElement$1 {
       shapeSizeCss$2,
 
       // layouts
+      classicLayoutStyle,
       classicLayoutColor,
       snowflakeStyle,
       snowflakeColors
@@ -28346,11 +28349,7 @@ class AuroDatePicker extends AuroElement$1 {
    * @param {String} focusInput - Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input.
    * @returns {void}
    */
-  focus(focusInput) {
-    if (this.disabled) {
-      return;
-    }
-
+  focus(focusInput = '') {
     this.range && focusInput === 'endDate' ? this.inputList[1].focus() : this.inputList[0].focus();
   }
 
@@ -28553,9 +28552,11 @@ class AuroDatePicker extends AuroElement$1 {
   configureDatepicker() {
     this.addEventListener('focusin', () => {
       this.touched = true;
+      this.hasFocus = true;
     });
 
     this.addEventListener('focusout', (evt) => {
+      this.hasFocus = false;
       if (!this.noValidate && !evt.detail.expanded && this.touched) {
         if (!this.contains(document.activeElement)) {
           this.validation.validate(this.inputList[0]);
@@ -28641,9 +28642,6 @@ class AuroDatePicker extends AuroElement$1 {
     const convertedDate = this.convertWcTimeToDate(time);
     const newDate = this.util.toCustomFormat(convertedDate, this.format);
 
-    console.log(newDate);
-    console.log(this.util.validDateStr(newDate, this.format));
-
     if (this.util.validDateStr(newDate, this.format)) {
       if (this.inputList.length > 1) {
         if (!this.value || !this.util.validDateStr(this.value, this.format)) {
@@ -28682,7 +28680,7 @@ class AuroDatePicker extends AuroElement$1 {
   handleKeydownReset(event) {
     if (event.key === 'Enter' || event.key === ' ') {
       this.resetValues();
-      this.setHasFocus();
+      this.focus();
     }
   }
 
@@ -28720,22 +28718,10 @@ class AuroDatePicker extends AuroElement$1 {
     this.validation.validate(this, force);
   }
 
-  setHasFocus() {
-    if (this.disabled) {
-      return;
-    }
-
-    this.hasFocus = true;
-    this.dropdown.show();
-
-    // shadowroot active element is null if we focus the datepicker itself
-    if (this.shadowRoot.activeElement === null) {
-      // If the shadowRoot.activeElement is null, we can assume that the datepicker itself has focus
-      // and we should focus the first input in the inputList
-      this.inputList[0].focus();
-    }
-  }
-
+  /**
+   * Private method for interacting with the `hasValue` property.
+   * @private
+   */
   setHasValue() {
     if (!this.range) {
       this.hasValue = this.value && this.value.length > 0;
@@ -28755,6 +28741,17 @@ class AuroDatePicker extends AuroElement$1 {
       this.monthFirst = this.format.indexOf('mm') < this.format.indexOf('yyyy');
     }
 
+    if (changedProperties.has('disabled')) {
+      if (this.disabled) {
+        this.previousTabIndex = this.getAttribute('tabindex');
+        this.setAttribute('tabindex', '-1');
+      } else if (!this.disabled && this.previousTabIndex > -1) {
+        this.tabIndex = this.previousTabIndex;
+      } else {
+        this.removeAttribute('tabindex');
+      }
+    }
+
     if (changedProperties.has('calendarFocusDate')) {
       this.formattedFocusDate = this.util.toNorthAmericanFormat(this.calendarFocusDate, this.format);
 
@@ -28920,6 +28917,8 @@ class AuroDatePicker extends AuroElement$1 {
           this.calendarFocusDate = this.minDate;
         }
       }
+
+      this.calendar.requestUpdate();
     }
 
     // This resets the datepicker when the maxDate is set to a new value that is
@@ -28951,6 +28950,8 @@ class AuroDatePicker extends AuroElement$1 {
           }
         }
       }
+
+      this.calendar.requestUpdate();
     }
 
     if (changedProperties.has('centralDate')) {
@@ -28992,11 +28993,7 @@ class AuroDatePicker extends AuroElement$1 {
 
     // setup focus/blur event listeners
     this.addEventListener('focus', () => {
-      this.setHasFocus();
-    }, true);
-
-    this.addEventListener('blur', () => {
-      this.hasFocus = false;
+      this.focus();
     }, true);
   }
 
@@ -29051,17 +29048,63 @@ class AuroDatePicker extends AuroElement$1 {
   }
 
   /**
+   * Renders the snowflake layout for the datepicker.
    * @private
+   * @returns {import("lit").TemplateResult}
+   */
+  renderClassicLayout() {
+    const accentsClassMap = {
+      error: this.hasError
+    };
+
+    const inputSectionClassMap = {
+      inputSection: true,
+
+      hasValue: this.hasValue,
+      hasFocus: this.hasFocus,
+    };
+
+    const labelClassMap = {
+      hasValue: this.hasValue,
+      hasFocus: this.hasFocus,
+    };
+
+    return u$3`
+      <div
+        class="wrapper trigger"
+        part="wrapper">
+        <div class="accents left">
+          ${this.renderHtmlIconCalendar()}
+        </div>
+        <div class="mainContent">
+          <label class="${e$2(labelClassMap)}" part="mainLabel">
+            <slot name="label"></slot>
+          </label>
+          <div class="${e$2(inputSectionClassMap)}" part="inputSection">
+            ${this.renderHtmlInputs()}
+          </div>
+        </div>
+        <div class="accents right ${e$2(accentsClassMap)}">
+          ${this.hasError
+            ? this.renderHtmlIconError()
+            : this.renderHtmlActionClear()
+          }
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Renders the layout based on the `layout` attribute.
+   * @private
+   * @returns {import('lit').TemplateResult}
    */
   renderLayoutFromAttributes() {
     switch (this.layout) {
       case 'snowflake':
         return this.renderSnowflakeLayout();
       default:
-        // TODO: remove when all base layouts are implemented and instead return classic
-        return u$3`
-          <p>Please implement layout "${this.layout}" for datepicker</p>
-        `;
+        return this.renderClassicLayout();
     }
   }
 
@@ -29072,7 +29115,7 @@ class AuroDatePicker extends AuroElement$1 {
    * Returns formatted date like Apr 21 or Dec 25.
    * @private
    * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
-   * @return {string}
+   * @returns {string}
    */
   formatShortDate(date) {
     // should render like Apr 21
@@ -29087,8 +29130,8 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Format and render the provided date value.
    * @private
-   * @param dateValue
-   * @return {TemplateResult}
+   * @param {string} dateValue - The date value to format and render.
+   * @returns {import('lit').TemplateResult}
    */
   renderDisplayTextDate(dateValue) {
     return u$3`
@@ -29103,9 +29146,15 @@ class AuroDatePicker extends AuroElement$1 {
     `;
   }
 
+  /**
+   * Renders the HTML inputs for the datepicker.
+   * @private
+   * @returns {import('lit').TemplateResult}
+   */
   renderHtmlInputs() {
     const inputClasses = {
-      "util_displayHiddenVisually": !this.hasValue && !this.hasFocus
+      "util_displayHiddenVisually": !this.hasValue && !this.hasFocus && this.layout !== "classic",
+      "parentBorder": this.layout === "classic"
     };
 
     return u$3`
@@ -29119,14 +29168,12 @@ class AuroDatePicker extends AuroElement$1 {
           .min="${this.minDate}"
           id="${this.generateRandomString(12)}"
           .placeholder="${this.placeholder}"
-          simple
-          bordered
+          .size="${this.size}"
+          .shape="${this.shape}"
           noValidate
           class="dateFrom ${e$2(inputClasses)}"
           type="date"
           part="input"
-          shape="box"
-          size="xl"
           setCustomValidity="${this.setCustomValidity}"
           setCustomValidityCustomError="${this.setCustomValidityCustomError}"
           setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
@@ -29134,9 +29181,14 @@ class AuroDatePicker extends AuroElement$1 {
           setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
           inputmode="${o(this.inputmode)}"
         >
-          <span slot="displayValue">
-            ${this.renderDisplayTextDate(this.value)}
-          </span>
+          ${this.layout !== "classic"
+            ? u$3`
+              <span slot="displayValue">
+                ${this.renderDisplayTextDate(this.value)}
+              </span>
+            `
+            : undefined
+          }
           <span slot="label"><slot name="fromLabel"></slot></span>
         </${this.inputTag}>
       </div>
@@ -29156,7 +29208,6 @@ class AuroDatePicker extends AuroElement$1 {
             .min="${this.minDate}"
             .placeholder="${this.placeholderEndDate || this.placeholder}"
             id="${this.generateRandomString(12)}"
-            bordered
             class="dateTo ${e$2(inputClasses)}"
             noValidate
             type="date"
@@ -29167,9 +29218,14 @@ class AuroDatePicker extends AuroElement$1 {
             setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
             ?disabled="${this.disabled}"
             part="input">
-            <span slot="displayValue">
-              ${this.renderDisplayTextDate(this.valueEnd)}
-            </span>
+            ${this.layout !== "classic"
+              ? u$3`
+              <span slot="displayValue">
+                ${this.renderDisplayTextDate(this.valueEnd)}
+              </span>
+            `
+              : undefined
+            }
             <span slot="label"><slot name="toLabel"></slot></span>
           </${this.inputTag}>
         </div>
@@ -29183,6 +29239,11 @@ class AuroDatePicker extends AuroElement$1 {
   // icons/actions
   // ------------------------------------
 
+  /**
+   * Renders the clear action button.
+   * @private
+   * @returns {import('lit').TemplateResult}
+   */
   renderHtmlActionClear() {
     const clearActionClassMap = {
       'notification': true,
@@ -29212,6 +29273,11 @@ class AuroDatePicker extends AuroElement$1 {
     `;
   }
 
+  /**
+   * Renders the error icon.
+   * @private
+   * @returns {import('lit').TemplateResult}
+   */
   renderHtmlIconError() {
     const clearActionClassMap = {
       'notification': true,
@@ -29231,6 +29297,11 @@ class AuroDatePicker extends AuroElement$1 {
     `;
   }
 
+  /**
+   * Renders the calendar icon.
+   * @private
+   * @returns {import('lit').TemplateResult}
+   */
   renderHtmlIconCalendar() {
     return u$3`
       <${this.iconTag}
@@ -29246,7 +29317,7 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Returns HTML for the help text and error message.
    * @private
-   * @returns {html} - Returns HTML for the help text and error message.
+   * @returns {import('lit').TemplateResult} - Returns HTML for the help text and error message.
    */
   renderHtmlHelpText() {
     return u$3`
@@ -29269,6 +29340,33 @@ class AuroDatePicker extends AuroElement$1 {
     `;
   }
 
+  /**
+   * Separate method for rendering the calendar.
+   * @private
+   * @returns {import('lit').TemplateResult}
+   */
+  renderCalendar() {
+    return u$3`
+      <auro-formkit-calendar
+        ?largeFullscreenHeadline="${this.largeFullscreenHeadline}"
+        ?noRange="${!this.range}"
+        .format="${this.format}"
+        .monthFirst="${this.monthFirst}"
+        .min="${this.convertToWcValidTime(new Date(this.formattedMinDate))}"
+        .max="${this.convertToWcValidTime(new Date(this.formattedMaxDate))}"
+        .maxDate="${this.maxDate}"
+        .minDate="${this.minDate}"
+        .monthNames="${this.monthNames}"
+        part="calendar"
+      >
+        <slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
+        <slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
+        <span slot="bib.fullscreen.fromStr">${this.value || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
+        ${this.range ? u$3`<span slot="mobileDateToStr">${this.valueEnd || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
+      </auro-formkit-calendar>
+    `;
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const dropdownElementClassMap = {
@@ -29290,37 +29388,18 @@ class AuroDatePicker extends AuroElement$1 {
           .placement="${this.placement}"
           .shape="${this.shape}"
           .size="${this.size}"
-          bordered
           class="${e$2(dropdownElementClassMap)}"
           disableEventShow
           disableFocusTrap
-          fluid
           for="dropdownMenu"
           part="dropdown"
-          rounded
         >
           <div slot="trigger" class="dpTriggerContent" part="trigger">
             ${this.renderLayoutFromAttributes()}
           </div>
 
           <div class="calendarWrapper" part="calendarWrapper">
-            <auro-formkit-calendar
-              ?largeFullscreenHeadline="${this.largeFullscreenHeadline}"
-              ?noRange="${!this.range}"
-              .format="${this.format}"
-              .monthFirst="${this.monthFirst}"
-              .min="${this.convertToWcValidTime(new Date(this.formattedMinDate))}"
-              .max="${this.convertToWcValidTime(new Date(this.formattedMaxDate))}"
-              .maxDate="${this.maxDate}"
-              .minDate="${this.minDate}"
-              .monthNames="${this.monthNames}"
-              part="calendar"
-            >
-              <slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
-              <slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
-              <span slot="bib.fullscreen.fromStr">${this.value || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
-              ${this.range ? u$3`<span slot="mobileDateToStr">${this.valueEnd || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
-            </auro-formkit-calendar>
+            ${this.renderCalendar()}
           </div>
           <div slot="helpText" part="helpTextSpan">
             ${this.renderHtmlHelpText()}

package/components/datepicker/demo/readme.md

@@ -83,7 +83,7 @@ This configuration enables proper module resolution for the component's TypeScri
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
-<auro-datepicker>
+<auro-datepicker required="">
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>

package/components/datepicker/dist/auro-datepicker.d.ts

@@ -379,7 +379,7 @@ export class AuroDatePicker extends AuroElement {
      * @param {String} focusInput - Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input.
      * @returns {void}
      */
-    focus(focusInput: string): void;
+    focus(focusInput?: string): void;
     /**
      * Converts valid time number to format used by wc-date-range API.
      * @private
@@ -448,6 +448,7 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     private configureDatepicker;
+    hasFocus: boolean;
     /**
      * Hides the dropdown bib if its open.
      * @returns {void}
@@ -510,13 +511,16 @@ export class AuroDatePicker extends AuroElement {
      * @param {boolean} [force=false] - Whether to force validation.
      */
     validate(force?: boolean): void;
-    setHasFocus(): void;
-    hasFocus: boolean;
-    setHasValue(): void;
+    /**
+     * Private method for interacting with the `hasValue` property.
+     * @private
+     */
+    private setHasValue;
     hasValue: boolean;
     get hasError(): boolean;
     updated(changedProperties: any): void;
     monthFirst: boolean;
+    previousTabIndex: string;
     formattedFocusDate: boolean;
     formattedEndDate: boolean;
     formattedValue: boolean;
@@ -540,7 +544,15 @@ export class AuroDatePicker extends AuroElement {
      */
     private renderSnowflakeLayout;
     /**
+     * Renders the snowflake layout for the datepicker.
      * @private
+     * @returns {import("lit").TemplateResult}
+     */
+    private renderClassicLayout;
+    /**
+     * Renders the layout based on the `layout` attribute.
+     * @private
+     * @returns {import('lit').TemplateResult}
      */
     private renderLayoutFromAttributes;
     /**
@@ -548,26 +560,52 @@ export class AuroDatePicker extends AuroElement {
      * Returns formatted date like Apr 21 or Dec 25.
      * @private
      * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
-     * @return {string}
+     * @returns {string}
      */
     private formatShortDate;
     /**
      * Format and render the provided date value.
      * @private
-     * @param dateValue
-     * @return {TemplateResult}
+     * @param {string} dateValue - The date value to format and render.
+     * @returns {import('lit').TemplateResult}
      */
     private renderDisplayTextDate;
-    renderHtmlInputs(): import("lit-html").TemplateResult;
-    renderHtmlActionClear(): import("lit-html").TemplateResult;
-    renderHtmlIconError(): import("lit-html").TemplateResult;
-    renderHtmlIconCalendar(): import("lit-html").TemplateResult;
+    /**
+     * Renders the HTML inputs for the datepicker.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlInputs;
+    /**
+     * Renders the clear action button.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlActionClear;
+    /**
+     * Renders the error icon.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlIconError;
+    /**
+     * Renders the calendar icon.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlIconCalendar;
     /**
      * Returns HTML for the help text and error message.
      * @private
-     * @returns {html} - Returns HTML for the help text and error message.
+     * @returns {import('lit').TemplateResult} - Returns HTML for the help text and error message.
      */
     private renderHtmlHelpText;
+    /**
+     * Separate method for rendering the calendar.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderCalendar;
     render(): import("lit-html").TemplateResult;
 }
 import { AuroElement } from "@aurodesignsystem/auro-layout-element";