@aurodesignsystem-dev/auro-formkit 0.0.0-pr802.0 → 0.0.0-pr805.0

package/components/datepicker/dist/index.js

@@ -1258,19 +1258,21 @@ class UtilitiesCalendarRender {
   }
 }
 
-var styleCss$e = css`.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 = css`.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)}.accents .notification:not(.util_displayHidden){display:flex;align-items:center;justify-content:center}.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 = css`.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 = css`.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 = css`: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 = css`: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 = css`.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 = css`.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 = css``;
 
-var snowflakeStyle = css`.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 = css`: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 = css`: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 = css`:host([layout=snowflake]) [auro-dropdown]:not(:is([error],.hasFocus)){--ds-auro-dropdown-trigger-border-color: transparent}`;
 
 var styleCss$d = css`: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:""}`;
 
@@ -12698,7 +12700,7 @@ class AuroBibtemplate extends LitElement {
     /**
      * @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() {
@@ -17727,6 +17729,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
 // See LICENSE in the project root for license information.
 
 
+
 /*
  * @slot - Default slot for the popover content.
  * @slot helpText - Defines the content of the helpText.
@@ -18230,6 +18233,13 @@ class AuroDropdown extends AuroElement$4 {
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
+
+    this.trigger.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
+        bubbles: true,
+        composed: true
+      }));
+    });
   }
 
   /**
@@ -18302,64 +18312,6 @@ class AuroDropdown extends AuroElement$4 {
     this.hasFocus = false;
   }
 
-  /**
-   * Determines if the element or any children are focusable.
-   * @private
-   * @param {HTMLElement} element - Element to check.
-   * @returns {Boolean} - True if the element or any children are focusable.
-   */
-  containsFocusableElement(element) {
-    this.showTriggerBorders = true;
-
-    const nodes = [
-      element,
-      ...element.children
-    ];
-
-    const focusableElements = [
-      'a',
-      'auro-hyperlink',
-      'button',
-      'auro-button',
-      'input',
-      'auro-input',
-    ];
-
-    const focusableElementsThatNeedBorders = ['auro-input'];
-
-    const result = nodes.some((node) => {
-      const tagName = node.tagName.toLowerCase();
-
-      if (node.tabIndex > -1) {
-        return true;
-      }
-
-      if (focusableElements.includes(tagName)) {
-        if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
-          return true;
-        }
-        if (!node.hasAttribute('disabled')) {
-          return true;
-        }
-      }
-
-      if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
-        return true;
-      }
-
-      return false;
-    });
-
-    if (result) {
-      this.showTriggerBorders = !nodes.some((node) => {
-        const tagName = node.tagName.toLowerCase();
-        return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
-      });
-    }
-
-    return result;
-  }
-
   /**
    * Creates and dispatches a duplicate focus event on the trigger element.
    * @private
@@ -18471,7 +18423,7 @@ class AuroDropdown extends AuroElement$4 {
       if (triggerContentNodes) {
 
         // See if any of them are focusable elements
-        this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
+        this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
 
         // If any of them are focusable elements
         if (this.triggerContentFocusable) {
@@ -18543,7 +18495,7 @@ class AuroDropdown extends AuroElement$4 {
         <div
           id="trigger"
           class="${classMap(this.commonWrapperClasses)}" part="wrapper"
-          tabindex="${this.tabIndex}"
+          tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
@@ -27878,6 +27830,9 @@ class AuroDatePicker extends AuroElement$1 {
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', helpTextVersion, AuroHelpText);
 
+    /** @private */
+    this.handleClick = this.handleClick.bind(this);
+
     // Layout Config
     this.layout = 'classic';
     this.shape = 'classic';
@@ -28208,6 +28163,7 @@ class AuroDatePicker extends AuroElement$1 {
       shapeSizeCss$2,
 
       // layouts
+      classicLayoutStyle,
       classicLayoutColor,
       snowflakeStyle,
       snowflakeColors
@@ -28275,15 +28231,11 @@ 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.hasFocus = true;
     this.range && focusInput === 'endDate' ? this.inputList[1].focus() : this.inputList[0].focus();
   }
 
-
   /**
    * Converts valid time number to format used by wc-date-range API.
    * @private
@@ -28482,16 +28434,21 @@ class AuroDatePicker extends AuroElement$1 {
   configureDatepicker() {
     this.addEventListener('focusin', () => {
       this.touched = true;
+      this.hasFocus = true;
     });
 
-    this.addEventListener('focusout', (evt) => {
-      if (!this.noValidate && !evt.detail.expanded && this.touched) {
-        if (!this.contains(document.activeElement)) {
-          this.validation.validate(this.inputList[0]);
+    this.addEventListener('focusout', () => {
+      this.hasFocus = false;
 
-          if (this.inputList[1] && this.inputList[1].touched) {
-            this.validation.validate(this.inputList[1]);
-          }
+      if (this.noValidate) {
+        return;
+      }
+
+      if (!this.contains(document.activeElement)) {
+        this.validation.validate(this.inputList[0]);
+
+        if (this.inputList[1]) {
+          this.validation.validate(this.inputList[1]);
         }
       }
     });
@@ -28505,6 +28462,26 @@ class AuroDatePicker extends AuroElement$1 {
     }
   }
 
+  /**
+   * Hides the dropdown bib if its open.
+   * @returns {void}
+   */
+  hideBib() {
+    if (this.dropdown && this.dropdown.isPopoverVisible) {
+      this.dropdown.hide();
+    }
+  }
+
+  /**
+   * Shows the dropdown bib if there are options to show.
+   * @returns {void}
+   */
+  showBib() {
+    if (this.dropdown && !this.dropdown.isPopoverVisible) {
+      this.dropdown.show();
+    }
+  }
+
   /**
    * Sets the readonly attribute on the inputs based on the window width.
    * @private
@@ -28550,9 +28527,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)) {
@@ -28591,7 +28565,7 @@ class AuroDatePicker extends AuroElement$1 {
   handleKeydownReset(event) {
     if (event.key === 'Enter' || event.key === ' ') {
       this.resetValues();
-      this.setHasFocus();
+      this.focus();
     }
   }
 
@@ -28629,22 +28603,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;
@@ -28664,6 +28626,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);
 
@@ -28727,8 +28700,8 @@ class AuroDatePicker extends AuroElement$1 {
         this.calendarRenderUtil.updateCentralDate(this, this.formattedValue);
       }
 
-      this.validate();
       this.setHasValue();
+      this.validate();
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {
@@ -28829,6 +28802,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
@@ -28860,6 +28835,8 @@ class AuroDatePicker extends AuroElement$1 {
           }
         }
       }
+
+      this.calendar.requestUpdate();
     }
 
     if (changedProperties.has('centralDate')) {
@@ -28880,6 +28857,39 @@ class AuroDatePicker extends AuroElement$1 {
     this.calendar.injectSlot(event.target.name, slot.cloneNode(true));
   }
 
+  /**
+   * Handles click events on the datepicker.
+   * @param {PointerEvent} event - The pointer event object.
+   * @private
+   * @returns {void}
+   */
+  handleClick(event) {
+
+    // Get the initial target of the click event
+    const [initTarget] = event.composedPath();
+
+    // Determine if the current layout requires special handling
+    const layoutRequiresHandling = ['snowflake'].includes(this.layout);
+
+    // Determine if the target is an input element
+    const targetIsInput = initTarget.tagName === 'INPUT';
+
+    if (layoutRequiresHandling && !targetIsInput) {
+
+      // Focus the first input
+      this.inputList[0].focus();
+    }
+  }
+
+  /**
+   * Set up click handling for the datepicker.
+   * @private
+   * @returns {void}
+   */
+  configureClickHandler() {
+    this.addEventListener('click', this.handleClick);
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-datepicker');
@@ -28888,6 +28898,7 @@ class AuroDatePicker extends AuroElement$1 {
     this.configureInput();
     this.configureCalendar();
     this.configureDatepicker();
+    this.configureClickHandler();
 
     window.addEventListener('resize', () => {
       this.handleReadOnly();
@@ -28898,15 +28909,6 @@ class AuroDatePicker extends AuroElement$1 {
     super.connectedCallback();
 
     this.monthFirst = this.format.indexOf('mm') < this.format.indexOf('yyyy');
-
-    // setup focus/blur event listeners
-    this.addEventListener('focus', () => {
-      this.setHasFocus();
-    }, true);
-
-    this.addEventListener('blur', () => {
-      this.hasFocus = false;
-    }, true);
   }
 
   // layout render methods
@@ -28951,26 +28953,72 @@ class AuroDatePicker extends AuroElement$1 {
         </div>
         <div class="accents right ${classMap(accentsClassMap)}">
           ${this.hasError
-            ? this.renderHtmlIconError()
-            : this.renderHtmlActionClear()
-          }
+        ? this.renderHtmlIconError()
+        : this.renderHtmlActionClear()
+      }
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * 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 html$1`
+      <div
+        class="wrapper trigger"
+        part="wrapper">
+        <div class="accents left">
+          ${this.renderHtmlIconCalendar()}
+        </div>
+        <div class="mainContent">
+          <label class="${classMap(labelClassMap)}" part="mainLabel">
+            <slot name="label"></slot>
+          </label>
+          <div class="${classMap(inputSectionClassMap)}" part="inputSection">
+            ${this.renderHtmlInputs()}
+          </div>
+        </div>
+        <div class="accents right ${classMap(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 html$1`
-          <p>Please implement layout "${this.layout}" for datepicker</p>
-        `;
+        return this.renderClassicLayout();
     }
   }
 
@@ -28981,7 +29029,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
@@ -28996,25 +29044,31 @@ 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 html$1`
         <div>
           <div class="displayValueText">
             ${dateValue && this.util.validDateStr(dateValue, this.format)
-              ? this.formatShortDate(dateValue)
-              : undefined
-            }
+        ? this.formatShortDate(dateValue)
+        : undefined
+      }
           </div>
         </div>
     `;
   }
 
+  /**
+   * 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 html$1`
@@ -29028,14 +29082,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 ${classMap(inputClasses)}"
           type="date"
           part="input"
-          shape="box"
-          size="xl"
           setCustomValidity="${this.setCustomValidity}"
           setCustomValidityCustomError="${this.setCustomValidityCustomError}"
           setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
@@ -29043,9 +29095,14 @@ class AuroDatePicker extends AuroElement$1 {
           setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
           inputmode="${ifDefined(this.inputmode)}"
         >
-          <span slot="displayValue">
-            ${this.renderDisplayTextDate(this.value)}
-          </span>
+          ${this.layout !== "classic"
+        ? html$1`
+              <span slot="displayValue">
+                ${this.renderDisplayTextDate(this.value)}
+              </span>
+            `
+        : undefined
+      }
           <span slot="label"><slot name="fromLabel"></slot></span>
         </${this.inputTag}>
       </div>
@@ -29065,7 +29122,6 @@ class AuroDatePicker extends AuroElement$1 {
             .min="${this.minDate}"
             .placeholder="${this.placeholderEndDate || this.placeholder}"
             id="${this.generateRandomString(12)}"
-            bordered
             class="dateTo ${classMap(inputClasses)}"
             noValidate
             type="date"
@@ -29076,9 +29132,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"
+          ? html$1`
+              <span slot="displayValue">
+                ${this.renderDisplayTextDate(this.valueEnd)}
+              </span>
+            `
+          : undefined
+        }
             <span slot="label"><slot name="toLabel"></slot></span>
           </${this.inputTag}>
         </div>
@@ -29092,6 +29153,11 @@ class AuroDatePicker extends AuroElement$1 {
   // icons/actions
   // ------------------------------------
 
+  /**
+   * Renders the clear action button.
+   * @private
+   * @returns {import('lit').TemplateResult}
+   */
   renderHtmlActionClear() {
     const clearActionClassMap = {
       'notification': true,
@@ -29113,7 +29179,6 @@ class AuroDatePicker extends AuroElement$1 {
             ?customColor="${this.onDark}"
             category="interface"
             name="x-lg"
-            slot="icon"
             >
           </${this.iconTag}>
         </${this.buttonTag}>
@@ -29121,6 +29186,11 @@ class AuroDatePicker extends AuroElement$1 {
     `;
   }
 
+  /**
+   * Renders the error icon.
+   * @private
+   * @returns {import('lit').TemplateResult}
+   */
   renderHtmlIconError() {
     const clearActionClassMap = {
       'notification': true,
@@ -29140,6 +29210,11 @@ class AuroDatePicker extends AuroElement$1 {
     `;
   }
 
+  /**
+   * Renders the calendar icon.
+   * @private
+   * @returns {import('lit').TemplateResult}
+   */
   renderHtmlIconCalendar() {
     return html$1`
       <${this.iconTag}
@@ -29155,26 +29230,53 @@ 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 html$1`
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
-      ? html$1`
+        ? html$1`
           <${this.helpTextTag} ?onDark="${this.onDark}">
             <p id="${this.uniqueId}" part="helpText">
               <slot name="helpText"></slot>
             </p>
           </${this.helpTextTag}>
         `
-      : html$1`
+        : html$1`
           <${this.helpTextTag} error ?onDark="${this.onDark}">
             <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
               ${this.errorMessage}
             </p>
           </${this.helpTextTag}>
         `
-    }
+      }
+    `;
+  }
+
+  /**
+   * Separate method for rendering the calendar.
+   * @private
+   * @returns {import('lit').TemplateResult}
+   */
+  renderCalendar() {
+    return html$1`
+      <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 || html$1`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
+        ${this.range ? html$1`<span slot="mobileDateToStr">${this.valueEnd || html$1`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
+      </auro-formkit-calendar>
     `;
   }
 
@@ -29199,37 +29301,18 @@ class AuroDatePicker extends AuroElement$1 {
           .placement="${this.placement}"
           .shape="${this.shape}"
           .size="${this.size}"
-          bordered
           class="${classMap(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 || html$1`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
-              ${this.range ? html$1`<span slot="mobileDateToStr">${this.valueEnd || html$1`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
-            </auro-formkit-calendar>
+            ${this.renderCalendar()}
           </div>
           <div slot="helpText" part="helpTextSpan">
             ${this.renderHtmlHelpText()}