@aurodesignsystem/auro-formkit 1.6.0-beta.4

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

@@ -0,0 +1,121 @@
+*, *: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;
+}
+
+/* stylelint-disable selector-class-pattern, property-no-vendor-prefix, order/properties-order, no-descending-specificity, color-function-notation, max-line-length, declaration-empty-line-before */
+: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%;
+}

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

@@ -0,0 +1,141 @@
+// 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 Auro tokens
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import '@aurodesignsystem/webcorestylesheets/src/core';
+
+/* stylelint-disable selector-class-pattern, property-no-vendor-prefix, order/properties-order, no-descending-specificity, color-function-notation, max-line-length, declaration-empty-line-before */
+
+$calendar-width: 336px;
+$calendar-padding-desktop: var(--ds-size-200, $ds-size-200);
+
+:host {
+  position: relative;
+
+  display: block;
+  width: calc(100% - var(--ds-size-200, $ds-size-200) - var(--ds-size-200, $ds-size-200));
+
+  margin: 0 var(--ds-size-200, $ds-size-200);
+
+  @include auro_grid-breakpoint--sm {
+    width: $calendar-width;
+
+    padding: $calendar-padding-desktop;
+  }
+}
+
+:host(:not(:last-of-type)) {
+  @include auro_grid-breakpoint--sm {
+    &:after {
+      position: absolute;
+
+      top: $calendar-padding-desktop;
+      right: calc(-1 * var(--ds-size-200, $ds-size-200));
+
+      height: calc(100% - $calendar-padding-desktop - $calendar-padding-desktop);
+
+      display: block;
+      width: 1px;
+
+      content: '';
+    }
+  }
+}
+
+.header {
+  $header-padding: calc(var(--ds-size-100, $ds-size-100) + var(--ds-size-50, $ds-size-50) + var(--ds-size-25, $ds-size-25));
+  display: flex;
+
+  align-items: center;
+  flex-direction: row;
+
+  padding: $header-padding 0 $header-padding;
+
+  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, $ds-text-heading-400-size);
+  font-weight: var(--ds-text-heading-400-weight, $ds-text-heading-400-weight);
+  line-height: var(--ds-text-heading-400-height, $ds-text-heading-400-height);
+
+  div {
+    &:first-child {
+      margin-right: var(--ds-size-100, $ds-size-100);
+    }
+  }
+}
+
+.calendarNavBtn {
+  position: relative;
+
+  display: flex;
+  width: var(--ds-size-500, $ds-size-500);
+  height: var(--ds-size-500, $ds-size-500);
+
+  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, $ds-size-100);
+}
+
+.th {
+  display: flex;
+  flex: 1;
+
+  align-items: center;
+  justify-content: center;
+
+  font-weight: 700;
+}
+
+.tbody {
+  width: 100%;
+
+  transition: all 0ms;
+  transform: translateX(0);
+  
+  @include auro_grid-breakpoint--sm {
+    height: 384px; // height is fixed to always leave room for months spanning 6 rows
+  }
+}
+
+.td {
+  flex: 1;
+
+  margin: 0;
+  padding: 0;
+}
+
+.tr {
+  display: flex;
+  flex-direction: row;
+
+  width: 100%;
+}

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

@@ -0,0 +1,152 @@
+/* stylelint-disable color-function-notation, at-rule-empty-line-before, order/properties-order, declaration-empty-line-before, declaration-block-no-duplicate-properties */
+:host {
+  --calendar-width: 336px;
+  --mobile-footer-height: 150px;
+  --mobile-header-height: 68px;
+  height: 100vh;
+  height: 100dvh; /* dvh = dynamic viewport height */
+}
+@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.scss

@@ -0,0 +1,191 @@
+// // 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/design-tokens/dist/tokens/SCSSVariables';
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+
+/* stylelint-disable color-function-notation, at-rule-empty-line-before, order/properties-order, declaration-empty-line-before, declaration-block-no-duplicate-properties */
+
+:host {
+  --calendar-width: 336px;
+  --mobile-footer-height: 150px;
+  --mobile-header-height: 68px;
+
+  height: 100vh;
+  height: 100dvh; /* dvh = dynamic viewport height */
+
+  @include auro_breakpoint($max: $ds-grid-breakpoint-sm) {
+    width: 100%;
+  }
+}
+
+.calendarNavBtn {
+  display: flex;
+  width: var(--ds-size-500, $ds-size-500);
+  height: var(--ds-size-500, $ds-size-500);
+
+  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, $ds-size-200);
+}
+
+.prevMonth {
+  left: var(--ds-size-50, $ds-size-50);
+}
+
+.nextMonth {
+  right: var(--ds-size-50, $ds-size-50);
+}
+
+.headerActions {
+  padding: 0 var(--ds-size-200, $ds-size-200);
+}
+
+.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, $ds-size-150) 0 var(--ds-size-200, $ds-size-200);
+}
+
+.mobileDateLabel {
+  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+}
+
+.headerDateTo {
+  height: calc(var(--mobile-header-height) - var(--ds-size-300, $ds-size-300));
+
+  padding: var(--ds-size-300, $ds-size-300) var(--ds-size-100, $ds-size-100) 0 var(--ds-size-200, $ds-size-200);
+}
+
+:host(:not([noRange])) {
+  .headerDateTo {
+    position: relative;
+
+    display: flex;
+
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+
+    &:after {
+      position: absolute;
+      top: calc(50% + 10px);
+      left: 0;
+
+      display: block;
+      width: 1px;
+      height: var(--ds-size-300, $ds-size-300);
+
+      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% - calc(var(--ds-size-200, $ds-size-200) * 2));
+
+  align-items: flex-end;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  padding: var(--ds-size-150) calc(var(--ds-size-200, $ds-size-200));
+
+  transform: translateX(-50%);
+
+  auro-button {
+    width: 100%;
+  }
+}
+
+@include auro_breakpoint($max: $ds-grid-breakpoint-sm) {
+  .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;
+
+    &:after {
+      display: block;
+      width: 100%;
+      height: var(--mobile-footer-height);
+
+      content: '';
+    }
+  }
+}
+
+@include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
+  .calendars {
+    display: flex;
+
+    flex-direction: row;
+  }
+}

package/components/datepicker/src/styles/style-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(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important}.outerWrapper{position:relative}.datepickerElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}.dpTriggerContent{display:flex;flex-direction:row}.dpTriggerContent [auro-input]{flex:1}.dpTriggerContent [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2)::part(accentIcon){display:none}.dpTriggerContent [auro-input]:nth-child(2)::part(label){left:0;width:100%}.dpTriggerContent [auro-input]:nth-child(2)::part(input){padding-left:0}.dpTriggerContent [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([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}}`;

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

@@ -0,0 +1,111 @@
+/* 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(iconContainer) {
+  top: 0;
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+[auro-input]::part(accentIcon) {
+  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+[auro-input]::part(helpText) {
+  display: none;
+}
+[auro-input]::part(wrapper) {
+  border-width: 0 !important;
+}
+
+.outerWrapper {
+  position: relative;
+}
+
+.datepickerElement-helpText {
+  margin: var(--ds-size-50, 0.25rem) 0;
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  line-height: 1rem;
+}
+
+.dpTriggerContent {
+  display: flex;
+  flex-direction: row;
+}
+.dpTriggerContent [auro-input] {
+  flex: 1;
+}
+.dpTriggerContent [auro-input]:first-of-type {
+  margin-right: var(--ds-size-150, 0.75rem);
+}
+.dpTriggerContent [auro-input]:nth-child(2) {
+  margin-left: var(--ds-size-150, 0.75rem);
+}
+.dpTriggerContent [auro-input]:nth-child(2)::part(accentIcon) {
+  display: none;
+}
+.dpTriggerContent [auro-input]:nth-child(2)::part(label) {
+  left: 0;
+  width: 100%;
+}
+.dpTriggerContent [auro-input]:nth-child(2)::part(input) {
+  padding-left: 0;
+}
+.dpTriggerContent [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([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;
+  }
+}