draft-components 0.52.6 → 0.56.0

package/scss/components/_box.scss

@@ -1,6 +1,6 @@
 .dc-box {
-  box-sizing: border-box;
   font-family: var(--dc-font-base);
+  box-sizing: border-box;
 }
 
 /*------------------------------------*\
@@ -9,12 +9,15 @@
 .dc-box_bg_none {
   background: none;
 }
+
 .dc-box_bg_primary {
   background: var(--dc-primary-bg-color);
 }
+
 .dc-box_bg_secondary {
   background: var(--dc-secondary-bg-color);
 }
+
 .dc-box_bg_tertiary {
   background: var(--dc-tertiary-bg-color);
 }
@@ -25,9 +28,11 @@
 .dc-box_border_none {
   border: none;
 }
+
 .dc-box_border_primary {
   border: 0.0625rem solid var(--dc-primary-border-color);
 }
+
 .dc-box_border_secondary {
   border: 0.0625rem solid var(--dc-secondary-border-color);
 }
@@ -38,24 +43,31 @@
 .dc-box_border-radius_none {
   border-radius: 0;
 }
+
 .dc-box_border-radius_2xs {
   border-radius: $border-radius-2xs;
 }
+
 .dc-box_border-radius_xs {
   border-radius: $border-radius-xs;
 }
+
 .dc-box_border-radius_sm {
   border-radius: $border-radius-sm;
 }
+
 .dc-box_border-radius_md {
   border-radius: $border-radius-md;
 }
+
 .dc-box_border-radius_lg {
   border-radius: $border-radius-lg;
 }
+
 .dc-box_border-radius_xl {
   border-radius: $border-radius-xl;
 }
+
 .dc-box_border-radius_2xl {
   border-radius: $border-radius-2xl;
 }
@@ -66,18 +78,23 @@
 .dc-box_elevation_none {
   box-shadow: none;
 }
+
 .dc-box_elevation_xs {
   box-shadow: $shadow-xs;
 }
+
 .dc-box_elevation_sm {
   box-shadow: $shadow-sm;
 }
+
 .dc-box_elevation_md {
   box-shadow: $shadow-md;
 }
+
 .dc-box_elevation_lg {
   box-shadow: $shadow-lg;
 }
+
 .dc-box_elevation_xl {
   box-shadow: $shadow-xl;
 }
@@ -88,24 +105,31 @@
 .dc-box_p_none {
   padding: 0;
 }
+
 .dc-box_p_1x {
   padding: $gap-1x;
 }
+
 .dc-box_p_2x {
   padding: $gap-2x;
 }
+
 .dc-box_p_3x {
   padding: $gap-3x;
 }
+
 .dc-box_p_4x {
   padding: $gap-4x;
 }
+
 .dc-box_p_5x {
   padding: $gap-5x;
 }
+
 .dc-box_p_6x {
   padding: $gap-6x;
 }
+
 .dc-box_p_8x {
   padding: $gap-8x;
 }
@@ -116,24 +140,31 @@
 .dc-box_pt_none {
   padding-top: 0;
 }
+
 .dc-box_pt_1x {
   padding-top: $gap-1x;
 }
+
 .dc-box_pt_2x {
   padding-top: $gap-2x;
 }
+
 .dc-box_pt_3x {
   padding-top: $gap-3x;
 }
+
 .dc-box_pt_4x {
   padding-top: $gap-4x;
 }
+
 .dc-box_pt_5x {
   padding-top: $gap-5x;
 }
+
 .dc-box_pt_6x {
   padding-top: $gap-6x;
 }
+
 .dc-box_pt_8x {
   padding-top: $gap-8x;
 }
@@ -144,24 +175,31 @@
 .dc-box_pr_none {
   padding-right: 0;
 }
+
 .dc-box_pr_1x {
   padding-right: $gap-1x;
 }
+
 .dc-box_pr_2x {
   padding-right: $gap-2x;
 }
+
 .dc-box_pr_3x {
   padding-right: $gap-3x;
 }
+
 .dc-box_pr_4x {
   padding-right: $gap-4x;
 }
+
 .dc-box_pr_5x {
   padding-right: $gap-5x;
 }
+
 .dc-box_pr_6x {
   padding-right: $gap-6x;
 }
+
 .dc-box_pr_8x {
   padding-right: $gap-8x;
 }
@@ -172,24 +210,31 @@
 .dc-box_pb_none {
   padding-bottom: 0;
 }
+
 .dc-box_pb_1x {
   padding-bottom: $gap-1x;
 }
+
 .dc-box_pb_2x {
   padding-bottom: $gap-2x;
 }
+
 .dc-box_pb_3x {
   padding-bottom: $gap-3x;
 }
+
 .dc-box_pb_4x {
   padding-bottom: $gap-4x;
 }
+
 .dc-box_pb_5x {
   padding-bottom: $gap-5x;
 }
+
 .dc-box_pb_6x {
   padding-bottom: $gap-6x;
 }
+
 .dc-box_pb_8x {
   padding-bottom: $gap-8x;
 }
@@ -200,24 +245,31 @@
 .dc-box_pl_none {
   padding-left: 0;
 }
+
 .dc-box_pl_1x {
   padding-left: $gap-1x;
 }
+
 .dc-box_pl_2x {
   padding-left: $gap-2x;
 }
+
 .dc-box_pl_3x {
   padding-left: $gap-3x;
 }
+
 .dc-box_pl_4x {
   padding-left: $gap-4x;
 }
+
 .dc-box_pl_5x {
   padding-left: $gap-5x;
 }
+
 .dc-box_pl_6x {
   padding-left: $gap-6x;
 }
+
 .dc-box_pl_8x {
   padding-left: $gap-8x;
 }

package/scss/components/_breadcrumbs.scss

@@ -1,7 +1,7 @@
 .dc-breadcrumbs {
+  font-family: var(--dc-font-base);
   overflow-y: auto;
   overflow-scrolling: touch;
-  font-family: var(--dc-font-base);
 }
 
 .dc-breadcrumbs__items {
@@ -18,19 +18,19 @@
 }
 
 .dc-breadcrumbs__delimiter {
-  color: var(--dc-breadcrumbs-delimiter-color);
   margin-right: $gap-4x;
   margin-left: $gap-4x;
+  color: var(--dc-breadcrumbs-delimiter-color);
 }
 
 .dc-breadcrumbs-item {
+  font-family: inherit;
   display: inline-flex;
   align-items: center;
   transition: $transition-quick;
   transition-property: color;
   text-decoration: none;
   color: var(--dc-breadcrumbs-item-color);
-  font-family: inherit;
 
   &:hover {
     color: var(--dc-breadcrumbs-item-hover-color);

package/scss/components/_button.scss

@@ -1,4 +1,8 @@
 .dc-btn {
+  font-family: var(--dc-font-base);
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  line-height: $leading-default;
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -6,8 +10,8 @@
   box-sizing: border-box;
   width: auto;
   min-width: var(--dc-btn-height);
-  min-height: var(--dc-btn-height);
   max-width: 100%;
+  min-height: var(--dc-btn-height);
   padding: 0 $gap-3x;
   cursor: pointer;
   user-select: none;
@@ -20,15 +24,11 @@
   border-radius: $border-radius-md;
   background: var(--dc-btn-bg);
   box-shadow: 0 1px 2px #{rgba($black, $opacity-5)};
-  font-family: var(--dc-font-base);
-  font-weight: $font-weight-medium;
-  font-size: $font-size-sm;
-  line-height: $leading-default;
 }
 
 .dc-btn:focus {
-  outline: none;
   border-color: var(--dc-btn-border-color-focus);
+  outline: none;
   box-shadow: (
     0 1px 2px #{rgba($black, $opacity-5)},
     0 0 0 3px var(--dc-btn-focus-ring-color)
@@ -55,10 +55,10 @@
 
 .dc-btn_size_xs,
 .dc-btn_size_sm {
-  --dc-btn-height: var(--dc-control-xs-h);
+  font-size: $font-size-xs;
 
   border-radius: $border-radius-sm;
-  font-size: $font-size-xs;
+  --dc-btn-height: var(--dc-control-xs-h);
 }
 
 .dc-btn_size_xs {
@@ -71,12 +71,12 @@
 }
 
 .dc-btn_size_lg {
-  --dc-btn-height: var(--dc-control-lg-h);
+  font-size: $font-size-base;
 
   padding-right: $gap-4x;
   padding-left: $gap-4x;
   border-radius: $border-radius-md;
-  font-size: $font-size-base;
+  --dc-btn-height: var(--dc-control-lg-h);
 }
 
 .dc-btn_secondary,
@@ -151,7 +151,9 @@
 }
 
 .dc-btn__text {
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dc-btn_full-width {
@@ -165,9 +167,9 @@
 }
 
 .dc-btn_rounded {
-  border-radius: calc(var(--dc-btn-height) / 2);
   padding-right: calc(var(--dc-btn-height) / 2);
   padding-left: calc(var(--dc-btn-height) / 2);
+  border-radius: calc(var(--dc-btn-height) / 2);
 }
 
 .dc-btn_circle {

package/scss/components/_calendar.scss

@@ -0,0 +1,174 @@
+@use 'sass:math' as math;
+
+$_calendar-cell-gap: $gap-2x;
+$_calendar-cell-size: px-to-rem(30px);
+$_calendar-day-border: 1px dashed var(--dc-calendar-border-color);
+
+
+.dc-calendar {
+  font-family: var(--dc-font-base);
+}
+
+.dc-calendar-header {
+  display: flex;
+  align-items: center;
+}
+
+.dc-calendar-header > * + * {
+  margin-left: $gap-1x;
+}
+
+.dc-calendar-header__title {
+  font-size: $font-size-sm;
+  font-weight: $font-weight-normal;
+  flex: auto;
+  text-align: center;
+  color: var(--dc-calendar-text-color);
+}
+
+.dc-calendar-header__title::first-letter {
+  text-transform: uppercase;
+}
+
+.dc-calendar-header__btn {
+  color: var(--dc-calendar-arrow-color);
+}
+
+.dc-calendar__row-group > * + * {
+  margin-top: $_calendar-cell-gap;
+}
+
+.dc-calendar__row-group > *:first-child {
+  justify-content: flex-end;
+}
+
+.dc-calendar-row {
+  display: flex;
+}
+
+.dc-calendar-row_head {
+  margin-bottom: $gap-2x;
+  padding: $gap-2x 0;
+  border-bottom: 1px solid var(--dc-calendar-border-secondary-color);
+}
+
+.dc-calendar-row_head > * {
+  font-size: $font-size-xs;
+  flex: 1 0 $_calendar-cell-size;
+  text-align: center;
+  color: var(--dc-calendar-text-secondary-color);
+}
+
+.dc-calendar-row_head > * + * {
+  margin-left: $_calendar-cell-gap;
+}
+
+.dc-calendar-day {
+  position: relative;
+  flex: 0 0 $_calendar-cell-size;
+  height: $_calendar-cell-size;
+  color: var(--dc-calendar-text-color);
+}
+
+.dc-calendar-day::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: '';
+  border-radius: inherit;
+}
+
+.dc-calendar-day__btn {
+  font-size: $font-size-sm;
+  line-height: 1;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: $_calendar-cell-size;
+  height: $_calendar-cell-size;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  color: inherit;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  background: none;
+  appearance: none;
+}
+
+.dc-calendar-day__btn:hover {
+  z-index: 1;
+  border-color: var(--dc-calendar-border-color);
+}
+
+.dc-calendar-day__btn:focus {
+  z-index: 1;
+  outline: none;
+  @include focus-ring;
+}
+
+.dc-calendar-day_range-preview-start:not(.dc-calendar-day_selected) .dc-calendar-day__btn,
+.dc-calendar-day_range-preview-end:not(.dc-calendar-day_selected) .dc-calendar-day__btn {
+  border-color: var(--dc-calendar-border-color);
+}
+
+.dc-calendar-day + .dc-calendar-day {
+  padding-left: $_calendar-cell-gap;
+}
+
+.dc-calendar-day + .dc-calendar-day_range-start,
+.dc-calendar-day + .dc-calendar-day_range-preview-start {
+  margin-left: $_calendar-cell-gap;
+  padding-left: 0;
+}
+
+.dc-calendar-day_in-range::before {
+  background: $blue-100;
+}
+
+.dc-calendar-day_in-range-preview::before {
+  border-top: $_calendar-day-border;
+  border-bottom: $_calendar-day-border;
+}
+
+.dc-calendar-day_in-range-preview:first-child::before,
+.dc-calendar-day_in-range-preview.dc-calendar-day_range-preview-start::before {
+  border-left: $_calendar-day-border;
+}
+
+.dc-calendar-day_in-range-preview:last-child::before,
+.dc-calendar-day_in-range-preview.dc-calendar-day_range-preview-end::before {
+  border-right: $_calendar-day-border;
+}
+
+.dc-calendar-day_range-start,
+.dc-calendar-day_range-preview-start,
+.dc-calendar-day:first-child {
+  border-top-left-radius: math.div($_calendar-cell-size, 2);
+  border-bottom-left-radius: math.div($_calendar-cell-size, 2);
+}
+
+.dc-calendar-day_range-end,
+.dc-calendar-day_range-preview-end,
+.dc-calendar-day:last-child {
+  border-top-right-radius: math.div($_calendar-cell-size, 2);
+  border-bottom-right-radius: math.div($_calendar-cell-size, 2);
+}
+
+.dc-calendar-day_current {
+  color: var(--dc-calendar-current-day-text-color);
+}
+
+.dc-calendar-day_selected {
+  color: var(--dc-calendar-selected-day-text-color);
+}
+
+.dc-calendar-day_selected .dc-calendar-day__btn {
+  background: var(--dc-calendar-selected-day-bg-color);
+}
+
+.dc-calendar-day_selected .dc-calendar-day__btn:hover {
+  border-color: var(--dc-calendar-selected-day-bg-color);
+}

package/scss/components/_checkbox.scss

@@ -1,6 +1,8 @@
 .dc-checkbox {
   --dc-selection-control-size: var(--dc-checkbox-size);
+}
 
+.dc-checkbox {
   position: relative;
 }
 
@@ -17,8 +19,8 @@
   width: var(--dc-checkbox-size);
   height: var(--dc-checkbox-size);
   cursor: pointer;
-  border-radius: $border-radius-xs;
   border: var(--dc-input-border);
+  border-radius: $border-radius-xs;
   background: var(--dc-input-bg);
 }
 

package/scss/components/_date-picker.scss

@@ -0,0 +1,9 @@
+.dc-date-picker {
+  font-family: var(--dc-font-base);
+  display: inline-block;
+}
+
+.dc-date-picker__footer {
+  font-size: $font-size-sm;
+  margin-top: $gap-2x;
+}

package/scss/components/_date-preset-picker-popover.scss

@@ -0,0 +1,76 @@
+.dc-date-preset-picker-popover {
+  max-width: initial;
+  max-height: initial;
+}
+
+.dc-date-preset-picker {
+}
+
+.dc-date-preset-picker__body {
+  display: flex;
+}
+
+.dc-date-preset-picker__body > * + * {
+  margin-left: $gap-6x;
+}
+
+.dc-date-preset-picker_phone-view .dc-date-preset-picker__body {
+  flex-direction: column;
+}
+
+.dc-date-preset-picker_phone-view .dc-date-preset-picker__body > * + * {
+  margin-top: $gap-4x;
+  margin-left: 0;
+}
+
+.dc-date-preset-picker__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: $gap-4x;
+  padding-top: $gap-4x;
+  border-top: 1px solid var(--dc-secondary-border-color);
+}
+
+.dc-date-preset-picker__footer > * + * {
+  margin-left: $gap-4x;
+}
+
+.dc-date-preset-picker__selection {
+  font-size: $font-size-xs;
+  text-align: right;
+}
+
+.dc-date-preset-picker__selection > * {
+  display: block;
+}
+
+.dc-date-preset-picker__selection > small {
+  font-size: $font-size-2xs;
+  color: var(--dc-secondary-text-color);
+}
+
+.dc-date-preset-picker__btns {
+  display: flex;
+  align-items: center;
+}
+
+.dc-date-preset-picker__btns > * + * {
+  margin-left: $gap-2x;
+}
+
+.dc-date-preset-picker_phone-view .dc-date-preset-picker__footer {
+  align-items: stretch;
+  flex-direction: column;
+  padding-top: 0;
+  border-top: none;
+}
+
+.dc-date-preset-picker_phone-view .dc-date-preset-picker__footer > * + * {
+  margin-top: $gap-3x;
+  margin-left: 0;
+}
+
+.dc-date-preset-picker_phone-view .dc-date-preset-picker__btns > * {
+  flex: 1 0 50%;
+}

package/scss/components/_datetime-input.scss

@@ -44,8 +44,8 @@
 }
 
 .dc-date-component-input > [aria-hidden='true'] {
-  pointer-events: none;
   user-select: none;
+  pointer-events: none;
   opacity: 0;
 }
 
@@ -71,15 +71,15 @@
 }
 
 .dc-date-component-input > input::placeholder {
-  color: inherit;
   opacity: $opacity-40;
+  color: inherit;
 }
 
 .dc-date-component-input > input:focus {
   color: $white;
   outline: none;
-  caret-color: transparent;
   background: var(--dc-input-accent-color);
+  caret-color: transparent;
 }
 
 .dc-date-component-input > input::selection,

package/scss/components/_dialog.scss

@@ -5,10 +5,10 @@ $dialog-pad: $gap-4x;
   z-index: var(--dc-zindex-overlay);
   top: 0;
   left: 0;
-  overflow-y: auto;
   display: flex;
-  flex-wrap: wrap;
+  overflow-y: auto;
   align-items: center;
+  flex-wrap: wrap;
   justify-content: center;
   width: 100%;
   height: 100%;
@@ -21,8 +21,8 @@ $dialog-pad: $gap-4x;
   flex-direction: column;
   box-sizing: border-box;
   width: 40rem;
-  height: auto;
   max-width: 100%;
+  height: auto;
   margin: $gap-4x;
   padding-bottom: $dialog-pad;
   transition-property: opacity, transform;
@@ -30,8 +30,8 @@ $dialog-pad: $gap-4x;
   border-color: rgba($black, $opacity-25);
 
   & > *:first-child {
-    border-top-right-radius: inherit;
     border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
   }
 
   & > *:last-child {