@aurodesignsystem/auro-formkit 2.0.0-beta.9 → 2.0.1

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

@@ -1,121 +0,0 @@
-*, *: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

@@ -1,141 +0,0 @@
-// 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

@@ -1,152 +0,0 @@
-/* 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

@@ -1,191 +0,0 @@
-// // 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

@@ -1,2 +0,0 @@
-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

@@ -1,111 +0,0 @@
-/* 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;
-  }
-}