@aurodesignsystem/auro-formkit 1.6.0-beta.4

package/components/datepicker/src/formkit/auro-dropdownVersion.js

@@ -0,0 +1 @@
+export default '3.0.0';

package/components/datepicker/src/formkit/auro-inputVersion.js

@@ -0,0 +1 @@
+export default '4.2.0';

package/components/datepicker/src/index.js

@@ -0,0 +1,6 @@
+import { AuroDatePicker } from "./auro-datepicker.js";
+
+AuroDatePicker.register();
+
+// Enable TypeScript support
+export { AuroDatePicker };

package/components/datepicker/src/popoverVersion.js

@@ -0,0 +1 @@
+export default '4.1.1';

package/components/datepicker/src/styles/color-calendar-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`.calendarNavBtn{border-color:var(--ds-auro-calendar-nav-btn-border-color);background-color:var(--ds-auro-calendar-nav-btn-container-color);color:var(--ds-auro-calendar-nav-btn-chevron-color)}.calendarNavBtn:hover,.calendarNavBtn:focus{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}.calendarNavBtn:active{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color)}.mobileHeader{background-color:var(--ds-auro-calendar-mobile-header-container-color);box-shadow:0 0 10px var(--ds-auro-calendar-mobile-header-boxshadow-color)}.mobileDateLabel{color:var(--ds-auro-calendar-mobile-header-text-color)}:host(:not([noRange])) .headerDateTo:after{background-color:var(--ds-auro-calendar-mobile-header-divider-color)}.mobileFooterActions{background-color:var(--ds-auro-calendar-mobile-footer-container-color)}@media screen and (max-width: 576px){.calendarNavBtn{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}}`;

package/components/datepicker/src/styles/color-calendar.css

@@ -0,0 +1,35 @@
+.calendarNavBtn {
+  border-color: var(--ds-auro-calendar-nav-btn-border-color);
+  background-color: var(--ds-auro-calendar-nav-btn-container-color);
+  color: var(--ds-auro-calendar-nav-btn-chevron-color);
+}
+.calendarNavBtn:hover, .calendarNavBtn:focus {
+  --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);
+}
+.calendarNavBtn:active {
+  --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);
+  box-shadow: inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color);
+}
+
+.mobileHeader {
+  background-color: var(--ds-auro-calendar-mobile-header-container-color);
+  box-shadow: 0 0 10px var(--ds-auro-calendar-mobile-header-boxshadow-color);
+}
+
+.mobileDateLabel {
+  color: var(--ds-auro-calendar-mobile-header-text-color);
+}
+
+:host(:not([noRange])) .headerDateTo:after {
+  background-color: var(--ds-auro-calendar-mobile-header-divider-color);
+}
+
+.mobileFooterActions {
+  background-color: var(--ds-auro-calendar-mobile-footer-container-color);
+}
+
+@media screen and (max-width: 576px) {
+  .calendarNavBtn {
+    --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);
+  }
+}

package/components/datepicker/src/styles/color-calendar.scss

@@ -0,0 +1,51 @@
+// // Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// // See LICENSE in the project root for license information.
+
+// // ---------------------------------------------------------------------
+
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+
+.calendarNavBtn {
+  border-color: var(--ds-auro-calendar-nav-btn-border-color);
+  background-color: var(--ds-auro-calendar-nav-btn-container-color);
+  color: var(--ds-auro-calendar-nav-btn-chevron-color);
+
+  &:hover,
+  &:focus {
+    --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default});
+  }
+
+  &:active {
+    --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default});
+    
+    box-shadow: inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color);
+  }
+}
+
+.mobileHeader {
+  background-color: var(--ds-auro-calendar-mobile-header-container-color);
+  box-shadow: 0 0 10px var(--ds-auro-calendar-mobile-header-boxshadow-color);
+}
+
+.mobileDateLabel {
+  color: var(--ds-auro-calendar-mobile-header-text-color);
+}
+
+:host(:not([noRange])) {
+  .headerDateTo {
+    &:after {
+      background-color: var(--ds-auro-calendar-mobile-header-divider-color);
+    }
+  }
+}
+
+.mobileFooterActions {
+  background-color: var(--ds-auro-calendar-mobile-footer-container-color);
+}
+
+@include auro_breakpoint($max: $ds-grid-breakpoint-sm) {
+  .calendarNavBtn {
+    --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default});
+  }
+}

package/components/datepicker/src/styles/color-cell-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d)}.day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}.day.selected{--ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);box-shadow:var(--ds-auro-calendar-boxshadow-color)}.day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:unset}.day.selected:not(:hover){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff)}.day:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}.day.disabled{--ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff)}.day.inRange:before,.day.rangeDepartDate:before,.day.rangeReturnDate:before,.day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}.day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}:host([disabled]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;

package/components/datepicker/src/styles/color-cell.css

@@ -0,0 +1,45 @@
+/* stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors */
+:host ::slotted([slot^=date_]) {
+  color: var(--ds-auro-calendar-cell-price-text-color);
+}
+:host ::slotted([slot^=date_][highlight]) {
+  --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d);
+}
+
+.day {
+  border-color: var(--ds-auro-calendar-cell-border-color);
+  background-color: var(--ds-auro-calendar-cell-container-color);
+  color: var(--ds-auro-calendar-cell-text-color);
+}
+.day.selected {
+  --ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);
+  --ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);
+  --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);
+  box-shadow: var(--ds-auro-calendar-boxshadow-color);
+}
+.day.selected:hover {
+  --ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);
+  --ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);
+  box-shadow: unset;
+}
+.day.selected:not(:hover) {
+  --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff);
+}
+.day:hover {
+  --ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));
+  --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a);
+}
+.day.disabled {
+  --ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);
+  --ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);
+}
+.day.inRange:before, .day.rangeDepartDate:before, .day.rangeReturnDate:before, .day.lastHoveredDate:before {
+  background-color: var(--ds-auro-calendar-cell-in-range-color);
+}
+.day.sameDateTrip:before {
+  --ds-auro-calendar-cell-in-range-color: transparent;
+}
+
+:host([disabled]) {
+  --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad);
+}

package/components/datepicker/src/styles/color-cell.scss

@@ -0,0 +1,73 @@
+// // Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// // See LICENSE in the project root for license information.
+
+// // ---------------------------------------------------------------------
+
+/* stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors */
+
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  ::slotted([slot^="date_"]) {
+    color: var(--ds-auro-calendar-cell-price-text-color);
+  }
+
+  ::slotted([slot^="date_"][highlight]) {
+    --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #{$ds-color-text-success-default});
+  }
+}
+
+.day {
+  border-color: var(--ds-auro-calendar-cell-border-color);
+  background-color: var(--ds-auro-calendar-cell-container-color);
+  color: var(--ds-auro-calendar-cell-text-color);
+
+  &.selected {
+    --ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #{$ds-color-border-ui-active-default});
+    --ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #{$ds-color-container-ui-primary-active-default});
+    --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+
+    box-shadow: var(--ds-auro-calendar-boxshadow-color);
+
+    &:hover {
+      --ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+      --ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
+
+      box-shadow: unset;
+    }
+
+    &:not(:hover) {
+      --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+    }
+  }
+
+  &:hover {
+    --ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-secondary-hover-default, #{$ds-color-container-ui-secondary-hover-default});
+    --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  }
+
+  &.disabled {
+    --ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
+    --ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  }
+
+  &.inRange,
+  &.rangeDepartDate,
+  &.rangeReturnDate,
+  &.lastHoveredDate {
+    &:before {
+      background-color: var(--ds-auro-calendar-cell-in-range-color);
+    }
+  }
+
+  &.sameDateTrip {
+    &:before {
+      --ds-auro-calendar-cell-in-range-color: transparent;
+    }
+  }
+}
+
+:host([disabled]) {
+  --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
+}

package/components/datepicker/src/styles/color-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default 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)}.placeholderDate{color:var(--ds-auro-datepicker-placeholder-color)}`;

package/components/datepicker/src/styles/color-month-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{background-color:var(--ds-auro-calendar-month-container-color)}@media screen and (min-width: 576px){:host(:not(:last-of-type)):after{background-color:var(--ds-auro-calendar-month-divider-color)}}.header{color:var(--ds-auro-calendar-month-header-color)}`;

package/components/datepicker/src/styles/color-month.css

@@ -0,0 +1,34 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *:before, *:after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+*:focus-visible {
+  outline: 0;
+}
+*:focus-visible {
+  outline: 0;
+}
+
+:focus:not(:focus-visible) {
+  outline: 3px solid transparent;
+}
+
+:host {
+  background-color: var(--ds-auro-calendar-month-container-color);
+}
+
+@media screen and (min-width: 576px) {
+  :host(:not(:last-of-type)):after {
+    background-color: var(--ds-auro-calendar-month-divider-color);
+  }
+}
+
+.header {
+  color: var(--ds-auro-calendar-month-header-color);
+}

package/components/datepicker/src/styles/color-month.scss

@@ -0,0 +1,27 @@
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// Import Auro tokens
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import '@aurodesignsystem/webcorestylesheets/src/core';
+
+
+:host {
+  background-color: var(--ds-auro-calendar-month-container-color);
+}
+
+:host(:not(:last-of-type)) {
+  @include auro_grid-breakpoint--sm {
+    &:after {
+      background-color: var(--ds-auro-calendar-month-divider-color);
+    }
+  }
+}
+
+.header {
+  color: var(--ds-auro-calendar-month-header-color);
+}

package/components/datepicker/src/styles/color.css

@@ -0,0 +1,43 @@
+/* stylelint-disable max-nesting-depth, declaration-no-important, selector-class-pattern, declaration-empty-line-before */
+.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);
+}
+
+.placeholderDate {
+  color: var(--ds-auro-datepicker-placeholder-color);
+}

package/components/datepicker/src/styles/color.scss

@@ -0,0 +1,30 @@
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+/* stylelint-disable max-nesting-depth, declaration-no-important, selector-class-pattern, declaration-empty-line-before */
+
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import '@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
+
+[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);
+      }
+    }
+  }
+}
+
+.placeholderDate {
+  color: var(--ds-auro-datepicker-placeholder-color);
+}

package/components/datepicker/src/styles/style-auro-calendar-cell-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`;

package/components/datepicker/src/styles/style-auro-calendar-cell.css

@@ -0,0 +1,123 @@
+/* stylelint-disable selector-max-class, order/properties-order, declaration-empty-line-before, scss/selector-nest-combinators,
+   selector-pseudo-element-colon-notation, max-nesting-depth, at-rule-empty-line-before, no-descending-specificity, declaration-no-important */
+@media screen and (max-width: 576px) {
+  :host {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.day {
+  position: relative;
+  width: var(--ds-size-500, 2.5rem);
+  height: calc(var(--ds-size-700, 3.5rem) - 2px);
+  padding: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--ds-size-300, 1.5rem);
+  cursor: pointer;
+  font-family: var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);
+  font-size: var(--ds-text-body-size-default, 1rem);
+  user-select: none;
+}
+.day.disabled {
+  cursor: default !important;
+}
+.day.inRange::before {
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 14.2857142857vw;
+  height: var(--ds-size-600, 3rem);
+  content: "";
+  transform: translate(-50%, -50%);
+}
+@media screen and (min-width: 576px) {
+  .day.inRange::before {
+    width: var(--ds-size-600, 3rem);
+  }
+}
+.day.rangeDepartDate::before {
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 14.2857142857vw;
+  height: var(--ds-size-600, 3rem);
+  content: "";
+  transform: translate(-50%, -50%);
+  width: 7.1428571429vw;
+  transform: translate(0%, -50%);
+}
+@media screen and (min-width: 576px) {
+  .day.rangeDepartDate::before {
+    width: calc(var(--ds-size-600, 3rem) / 2);
+  }
+}
+.day.rangeReturnDate::before, .day.lastHoveredDate::before {
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 14.2857142857vw;
+  height: var(--ds-size-600, 3rem);
+  content: "";
+  transform: translate(-50%, -50%);
+  width: 7.1428571429vw;
+  transform: translate(-100%, -50%);
+}
+@media screen and (min-width: 576px) {
+  .day.rangeReturnDate::before, .day.lastHoveredDate::before {
+    width: calc(var(--ds-size-600, 3rem) / 2);
+  }
+}
+
+.dateSlot {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--ds-text-body-size-xxs, 0.625rem);
+}
+
+::slotted([slot^=date_]) {
+  position: absolute;
+  top: 80%;
+  left: 50%;
+  width: 80%;
+  overflow: hidden;
+  white-space: nowrap;
+  transform: translate(-50%, -50%);
+}
+
+::slotted(auro-icon) {
+  max-height: 24px;
+  max-width: 24px;
+}
+
+:host([renderForDateSlot]) .buttonWrapper {
+  position: relative;
+  width: 100%;
+  top: 5px;
+}
+:host([renderForDateSlot]) .currentDayMarker {
+  position: relative;
+  padding-bottom: 5px;
+  top: -8px;
+}
+
+@media screen and (min-width: 576px) {
+  .day {
+    width: var(--ds-size-600, 3rem);
+    height: var(--ds-size-800, 4rem);
+    font-size: var(--ds-text-body-size-lg, 1.125rem);
+  }
+  .day:hover {
+    cursor: pointer;
+  }
+  .dateSlot {
+    font-size: var(--ds-text-body-size-xs, 0.75rem);
+  }
+}

package/components/datepicker/src/styles/style-auro-calendar-cell.scss

@@ -0,0 +1,147 @@
+// // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// // See LICENSE in the project root for license information.
+
+// // ---------------------------------------------------------------------
+
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+/* stylelint-disable selector-max-class, order/properties-order, declaration-empty-line-before, scss/selector-nest-combinators,
+   selector-pseudo-element-colon-notation, max-nesting-depth, at-rule-empty-line-before, no-descending-specificity, declaration-no-important */
+
+@mixin in-range-pseudo-elem {
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+
+  display: block;
+  width: calc(100vw / 7);
+  height: var(--ds-size-600, $ds-size-600);
+
+  content: '';
+  transform: translate(-50%, -50%);
+}
+
+:host {
+  @include auro_breakpoint($max: $ds-grid-breakpoint-sm) {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.day {
+  position: relative;
+
+  width: var(--ds-size-500, $ds-size-500);
+  height: calc(var(--ds-size-700, $ds-size-700) - 2px);
+
+  padding: 0;
+
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--ds-size-300, $ds-size-300);
+
+  cursor: pointer;
+
+  font-family: var(--ds-font-family-default, $ds-font-family-default);
+  font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
+
+  user-select: none;
+
+  &.disabled {
+    cursor: default !important;
+  }
+
+  &.inRange::before {
+    @include in-range-pseudo-elem;
+
+    @include auro_grid-breakpoint--sm {
+      width: var(--ds-size-600, $ds-size-600);
+    }
+  }
+
+  &.rangeDepartDate {
+    &::before {
+      @include in-range-pseudo-elem;
+
+      width: calc(calc(100vw / 7) / 2);
+
+      transform: translate(0%, -50%);
+
+      @include auro_grid-breakpoint--sm {
+        width: calc(var(--ds-size-600, $ds-size-600) / 2);
+      }
+    }
+  }
+
+  &.rangeReturnDate::before,
+  &.lastHoveredDate::before {
+    @include in-range-pseudo-elem;
+
+    width: calc(calc(100vw / 7) / 2);
+
+    transform: translate(-100%, -50%);
+
+    @include auro_grid-breakpoint--sm {
+      width: calc(var(--ds-size-600, $ds-size-600) / 2);
+    }
+  }
+}
+
+.dateSlot {
+  display: flex;
+  flex-direction: column;
+
+  font-size: var(--ds-text-body-size-xxs, $ds-text-body-size-xxs);
+}
+
+::slotted([slot^="date_"]) {
+  position: absolute;
+  top: 80%;
+  left: 50%;
+
+  width: 80%;
+
+  overflow: hidden;
+  white-space: nowrap;
+
+  transform: translate(-50%, -50%);
+}
+
+::slotted(auro-icon) {
+  max-height: 24px;
+  max-width: 24px;
+}
+
+:host([renderForDateSlot]) {
+  .buttonWrapper {
+    position: relative;
+    width: 100%;
+  
+    top: 5px;
+  }
+  
+  .currentDayMarker {
+    position: relative;
+    padding-bottom: 5px;
+    top: -8px;
+  }
+}
+
+@include auro_grid-breakpoint--sm {
+  .day {
+    width: var(--ds-size-600, $ds-size-600);
+    height: var(--ds-size-800, $ds-size-800);
+
+    font-size: var(--ds-text-body-size-lg, $ds-text-body-size-lg);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .dateSlot {
+    font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+  }
+}

package/components/datepicker/src/styles/style-auro-calendar-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}@media screen and (max-width: 576px){:host{width:100%}}.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:var(--ds-size-200, 1rem)}.prevMonth{left:var(--ds-size-50, 0.25rem)}.nextMonth{right:var(--ds-size-50, 0.25rem)}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{display:none;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:var(--ds-text-body-size-xs, 0.75rem)}.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%}@media screen and (max-width: 576px){.prevMonth,.nextMonth{display:none}.mobileHeader,.mobileFooter,.mobileFooterActions{display:flex}.calendarWrapper{display:flex;height:100%;max-height:100dvh;flex-direction:column;overflow:auto hidden}.calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overflow-y:scroll;overscroll-behavior:contain}.calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}}@media screen and (min-width: 576px){.calendars{display:flex;flex-direction:row}}`;

package/components/datepicker/src/styles/style-auro-calendar-month-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{position:relative;display:block;width:calc(100% - var(--ds-size-200, 1rem) - var(--ds-size-200, 1rem));margin:0 var(--ds-size-200, 1rem)}@media screen and (min-width: 576px){:host{width:336px;padding:var(--ds-size-200, 1rem)}}@media screen and (min-width: 576px){:host(:not(:last-of-type)):after{position:absolute;top:var(--ds-size-200, 1rem);right:calc(-1*var(--ds-size-200, 1rem));height:calc(100% - var(--ds-size-200, 1rem) - var(--ds-size-200, 1rem));display:block;width:1px;content:""}}.header{display:flex;align-items:center;flex-direction:row;padding:calc(var(--ds-size-100, 0.5rem) + var(--ds-size-50, 0.25rem) + var(--ds-size-25, 0.125rem)) 0 calc(var(--ds-size-100, 0.5rem) + var(--ds-size-50, 0.25rem) + var(--ds-size-25, 0.125rem));text-align:center}.headerTitle{display:flex;align-items:center;flex:1;flex-direction:row;justify-content:center;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.headerTitle div:first-child{margin-right:var(--ds-size-100, 0.5rem)}.calendarNavBtn{position:relative;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}.table{width:100%;border-collapse:collapse}.thead{margin-bottom:var(--ds-size-100, 0.5rem)}.th{display:flex;flex:1;align-items:center;justify-content:center;font-weight:700}.tbody{width:100%;transition:all 0ms;transform:translateX(0)}@media screen and (min-width: 576px){.tbody{height:384px}}.td{flex:1;margin:0;padding:0}.tr{display:flex;flex-direction:row;width:100%}`;