@itcase/ui 1.0.81 → 1.0.83

package/dist/css/components/Choice/Choice.css

@@ -10,7 +10,7 @@
 .choice {
   &_shape {
     &_rounded {
-      border-radius: 8px;
+      border-radius: var(--choice-shape-rounded, 8px);
       overflow: hidden;
     }
     &_circular {

package/dist/css/components/Code/Code.css

@@ -25,7 +25,7 @@
 .code__input {
   &_shape {
     &_rounded {
-      border-radius: 8px;
+      border-radius: var(--code-input-shape-rounded, 8px);
     }
     &_circular {
       border-radius: 50%;

package/dist/css/components/ContextMenu/ContextMenu.css

@@ -1,11 +1,10 @@
 .context-menu__item {
-  cursor: pointer;
   &-wrapper {
     display: flex;
   }
   &-title {
-    flex: 1;
     white-space: nowrap;
+    flex: 1;
   }
 }
 
@@ -17,8 +16,8 @@
 .context-menu {
   &_shape {
     &_rounded {
+      border-radius: var(--context-menu-shape-rounded, 12px);
       overflow: hidden;
-      border-radius: var(--context-menu-shape-rounded-default);
     }
     &_circular {
       border-radius: 50%;
@@ -37,7 +36,3 @@
     }
   }
 }
-
-:root {
-  --context-menu-shape-rounded-default: 12px;
-}

package/dist/css/components/ContextMenu/css/__item/context-menu__item.css

@@ -1,10 +1,9 @@
 .context-menu__item {
-  cursor: pointer;
   &-wrapper {
     display: flex;
   }
   &-title {
-    flex: 1;
     white-space: nowrap;
+    flex: 1;
   }
 }

package/dist/css/components/DatePicker/DatePicker.css

@@ -1115,6 +1115,9 @@
     right: 12px;
     transform: translateY(-50%);
   }
+  &__clear-label {
+    width: 100%;
+  }
   &-wrapper {
     width: 100%;
     ^&__input-container {

package/dist/css/components/Divider/Divider.css

@@ -5,58 +5,28 @@
 }
 .divider {
   &_size {
-    &_xs {
-      height: 1px;
-    }
-    &_s {
-      height: 2px;
-    }
-    &_m {
-      height: 3px;
-    }
-    &_l {
-      height: 4px;
-    }
-    &_xl {
-      height: 5px;
+    @each $size in xs, s, m, l, xl {
+      &_$(size) {
+        height: var(--divider-size-$(size)-height);
+      }
     }
   }
   &_direction {
     &_horizontal {
       &^^&_size {
-        &_xs {
-          height: 1px;
-        }
-        &_s {
-          height: 2px;
-        }
-        &_m {
-          height: 3px;
-        }
-        &_l {
-          height: 4px;
-        }
-        &_xl {
-          height: 5px;
+        @each $size in xs, s, m, l, xl {
+          &_$(size) {
+            height: var(--divider-size-$(size)-height);
+          }
         }
       }
     }
     &_vertical {
       &^^&_size {
-        &_xs {
-          width: 1px;
-        }
-        &_s {
-          width: 2px;
-        }
-        &_m {
-          width: 3px;
-        }
-        &_l {
-          width: 4px;
-        }
-        &_xl {
-          width: 5px;
+        @each $size in xs, s, m, l, xl {
+          &_$(size) {
+            width: var(--divider-size-$(size)-width);
+          }
         }
       }
     }
@@ -76,3 +46,15 @@
     }
   }
 }
+:root {
+  --divider-size-xs-height: 1px;
+  --divider-size-s-height: 2px;
+  --divider-size-m-height: 3px;
+  --divider-size-l-height: 4px;
+  --divider-size-xl-height: 5px;
+  --divider-size-xs-width: 1px;
+  --divider-size-s-width: 2px;
+  --divider-size-m-width: 3px;
+  --divider-size-l-width: 4px;
+  --divider-size-xl-width: 5px;
+}

package/dist/css/components/Dot/Dot.css

@@ -1,14 +1,14 @@
 .dot {
 }
 .dot {
-  min-width: var(--dot-width);
-  min-height: var(--dot-height);
-  max-width: var(--dot-width);
-  max-height: var(--dot-height);
+  min-width: var(--dot-width, 16px);
+  min-height: var(--dot-height, 16px);
+  max-width: var(--dot-width, 16px);
+  max-height: var(--dot-height, 16px);
 }
 .dot_shape {
   &_rounded {
-    border-radius: 12px;
+    border-radius: var(--dot-shape-rounded, 12px);
   }
   &_circular {
     border-radius: 50%;
@@ -17,7 +17,3 @@
     border-radius: 0;
   }
 }
-:root {
-  --dot-width: 16px;
-  --dot-height: 16px;
-}

package/dist/css/components/Flex/Flex.css

@@ -74,7 +74,7 @@
 .flex {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--flex-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;
@@ -159,7 +159,7 @@
   &__item {
     &_shape {
       &_rounded {
-        border-radius: 12px;
+        border-radius: var(--flex-item-shape-rounded, 12px);
       }
       &_circular {
         border-radius: 50%;

package/dist/css/components/Flex/css/__item/flex__item_shape.css

@@ -2,7 +2,7 @@
   &__item {
     &_shape {
       &_rounded {
-        border-radius: 12px;
+        border-radius: var(--flex-item-shape-rounded, 12px);
       }
       &_circular {
         border-radius: 50%;

package/dist/css/components/Grid/Grid.css

@@ -58,6 +58,7 @@
 .grid {
   @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
     &_columns_$(val) {
+      grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
         & > div {
           grid-template-columns: repeat($(val), 1fr);
@@ -101,10 +102,11 @@
 .grid {
   @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
     &_rows_$(val) {
+      grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
         & > div {
           grid-template-columns: repeat($(val), 1fr);
-          }
+        }
       }
     }
   }
@@ -112,7 +114,7 @@
 .grid {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--grid-shape-rounded, 12px);
     }
   }
 }

package/dist/css/components/Group/Group.css

@@ -46,7 +46,7 @@
 .group {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--group-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;

package/dist/css/components/Icon/Icon.css

@@ -116,7 +116,7 @@
 }
 .icon_shape {
   &_rounded {
-    border-radius: 12px;
+    border-radius: var(--icon-shape-rounded, 12px);
   }
   &_circular {
     border-radius: 50%;

package/dist/css/components/Label/Label.css

@@ -23,7 +23,7 @@
 .label {
   &_shape {
     &_rounded {
-      border-radius: var(--label-shape-rounded-default);
+      border-radius: var(--label-shape-rounded-default, 6px);
       @each $size in xxs, xs, s, m, l, xl, xxl {
         &.label_size_$(size) {
           border-radius: var(--label-size-$(size)-shape-rounded);

package/dist/css/components/Modal/Modal.css

@@ -17,7 +17,7 @@
 }
 .modal-shape {
   &_rounded {
-    border-radius: 20px;
+    border-radius: var(--modal-shape-rounded, 20px);
   }
   &_circular {
     border-radius: 50%;

package/dist/css/components/Notification/Notification.css

@@ -27,8 +27,8 @@
   &_set {
     &_float {
       width: 100%;
-      border-radius: 8px;
-      padding: 12px 16px;
+      padding: var(--notification-item-set-float-padding, 12px 16px);
+      border-radius: var(--notification-item-set-float-border-radius, 8px);
       @mixin elevation-8;
       ^^&-wrapper {
         display: flex;
@@ -43,7 +43,7 @@
     &_top {
       width: 100%;
       ^^&-wrapper {
-        padding: 12px 0;
+        padding: var(--notification-item-set-top-padding, 12px 0);
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -57,8 +57,8 @@
   &_set {
     &_form {
       width: 100%;
-      padding: 12px 16px;
-      border-radius: 8px;
+      padding: var(--notification-item-set-form-padding, 12px 16px);
+      border-radius: var(--notification-item-set-form-border-radius, 8px);
       ^^&-wrapper {
         text-align: left;
         display: flex;
@@ -73,8 +73,8 @@
     &_toast {
       width: 100%;
       background: var(--color-surface-primary);
-      padding: 12px 16px;
-      border-radius: 8px;
+      padding: var(--notification-item-set-toast-padding, 12px 16px);
+      border-radius: var(--notification-item-set-toast-border-radius, 8px);
       display: flex;
       flex-direction: column;
       gap: 24px;

package/dist/css/components/Notification/css/__item/notification__item_set_float.css

@@ -2,8 +2,8 @@
   &_set {
     &_float {
       width: 100%;
-      border-radius: 8px;
-      padding: 12px 16px;
+      padding: var(--notification-item-set-float-padding, 12px 16px);
+      border-radius: var(--notification-item-set-float-border-radius, 8px);
       @mixin elevation-8;
       ^^&-wrapper {
         display: flex;

package/dist/css/components/Notification/css/__item/notification__item_set_form.css

@@ -2,8 +2,8 @@
   &_set {
     &_form {
       width: 100%;
-      padding: 12px 16px;
-      border-radius: 8px;
+      padding: var(--notification-item-set-form-padding, 12px 16px);
+      border-radius: var(--notification-item-set-form-border-radius, 8px);
       ^^&-wrapper {
         text-align: left;
         display: flex;

package/dist/css/components/Notification/css/__item/notification__item_set_toast.css

@@ -3,8 +3,8 @@
     &_toast {
       width: 100%;
       background: var(--color-surface-primary);
-      padding: 12px 16px;
-      border-radius: 8px;
+      padding: var(--notification-item-set-toast-padding, 12px 16px);
+      border-radius: var(--notification-item-set-toast-border-radius, 8px);
       display: flex;
       flex-direction: column;
       gap: 24px;

package/dist/css/components/Notification/css/__item/notification__item_set_top.css

@@ -3,7 +3,7 @@
     &_top {
       width: 100%;
       ^^&-wrapper {
-        padding: 12px 0;
+        padding: var(--notification-item-set-top-padding, 12px 0);
         display: flex;
         flex-direction: column;
         justify-content: center;

package/dist/css/components/Pagination/Pagination.css

@@ -14,26 +14,17 @@
 }
 .pagination {
   &__item {
-    border: solid 1px var(--paginator-item-default-border);
-    height: 40px;
     width: 40px;
-    display: flex;
-    border-radius: 6px;
+    height: 40px;
     background: var(--paginator-item-default-fill);
-    cursor: pointer;
+    border: solid 1px var(--paginator-item-default-border);
+    border-radius: var(--paginator-item-border-radius, 6px);
+    display: flex;
     transition: var(--paginator-item-transition);
+    cursor: pointer;
     &:hover {
       background: var(--paginator-item-default-fill-hover);
     }
-    &-link {
-      width: 100%;
-      height: 100%;
-      justify-content: center;
-      align-items: center;
-      display: flex;
-      @mixin text-l;
-      color: var(--paginator-item-default-text);
-    }
     &_break {
       display: flex;
       ^&-link {
@@ -41,6 +32,15 @@
         align-items: flex-end;
       }
     }
+    &-link {
+      width: 100%;
+      height: 100%;
+      color: var(--paginator-item-default-text);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      @mixin text-l;
+    }
   }
 }
 .pagination {

package/dist/css/components/Pagination/css/__item/pagination__item.css

@@ -1,25 +1,16 @@
 .pagination {
   &__item {
-    border: solid 1px var(--paginator-item-default-border);
-    height: 40px;
     width: 40px;
-    display: flex;
-    border-radius: 6px;
+    height: 40px;
     background: var(--paginator-item-default-fill);
-    cursor: pointer;
+    border: solid 1px var(--paginator-item-default-border);
+    border-radius: var(--paginator-item-border-radius, 6px);
+    display: flex;
     transition: var(--paginator-item-transition);
+    cursor: pointer;
     &:hover {
       background: var(--paginator-item-default-fill-hover);
     }
-    &-link {
-      width: 100%;
-      height: 100%;
-      justify-content: center;
-      align-items: center;
-      display: flex;
-      @mixin text-l;
-      color: var(--paginator-item-default-text);
-    }
     &_break {
       display: flex;
       ^&-link {
@@ -27,5 +18,14 @@
         align-items: flex-end;
       }
     }
+    &-link {
+      width: 100%;
+      height: 100%;
+      color: var(--paginator-item-default-text);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      @mixin text-l;
+    }
   }
 }

package/dist/css/components/RadioButton/RadioButton.css

@@ -42,7 +42,7 @@
       z-index: 1;
       &_shape {
         &_rounded {
-          border-radius: 4px;
+          border-radius: var(--radio-button-shape-rounded, 4px);
           position: relative;
           overflow: hidden;
         }
@@ -70,7 +70,7 @@
   &_shape {
     &_rounded {
       ^^&__item {
-        border-radius: 4px;
+        border-radius: var(--radio-button-item-shape-rounded, 4px);
         position: relative;
         overflow: hidden;
       }

package/dist/css/components/Search/Search.css

@@ -4,7 +4,7 @@
 .search {
   &_shape {
     &_rounded {
-      border-radius: 6px;
+      border-radius: var(--search-shape-rounded, 6px);
       position: relative;
     }
   }
@@ -63,7 +63,6 @@
     right: 0;
     z-index: 2;
     transform: translate(0, -50%);
-    cursor: pointer;
   }
   &&_state_focus,
   &&_state_filled {
@@ -85,7 +84,7 @@
 .search-input {
   &_shape {
     &_rounded {
-      border-radius: 6px;
+      border-radius: var(--search-input-shape-rounded, 6px);
       position: relative;
     }
   }

package/dist/css/components/Search/css/search-input/search-input.css

@@ -52,7 +52,6 @@
     right: 0;
     z-index: 2;
     transform: translate(0, -50%);
-    cursor: pointer;
   }
   &&_state_focus,
   &&_state_filled {

package/dist/css/components/Search/css/search-input/search-input_shape.css

@@ -1,7 +1,7 @@
 .search-input {
   &_shape {
     &_rounded {
-      border-radius: 6px;
+      border-radius: var(--search-input-shape-rounded, 6px);
       position: relative;
     }
   }

package/dist/css/components/Segmented/Segmented.css

@@ -80,7 +80,7 @@
 .segmented {
   &_shape {
     &_rounded {
-      border-radius: 8px;
+      border-radius: var(--segmented-shape-rounded, 8px);
     }
     &_circular {
       border-radius: 50%;

package/dist/css/components/Select/Select.css

@@ -72,6 +72,17 @@
   }
 }
 
+.select {
+  &_position {
+    &_right {
+      & .select__menu {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}
+
 .select {
   &__control {
     position: relative;
@@ -121,6 +132,7 @@
 .select {
   &__placeholder {
     position: absolute;
+    display: flex;
   }
 }
 
@@ -177,23 +189,40 @@
   }
 }
 
+.select {
+  &__menu {
+    &-list {
+      &-item {
+        &_size {
+          @each $size in xs, s, m, l, xl, xxl {
+            &_$(size) {
+              padding: var(--select-menu-list-item-size-$(size)-padding, 5px 10px);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .select {
   &__menu {
     width: 100%;
+    background: var(--color-surface-primary);
+    padding: 12px 0;
     margin: var(--select-menu-margin, 0);
+    border-radius: var(--select-menu-border-radius, 0);
     border-top: none;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 100000;
-    border-radius: var(--select-menu-border-radius, 0);
     &-group-heading {
       z-index: 100000;
     }
     &-list {
       overflow-y: auto;
       max-height: 240px;
-      border-radius: var(--select-menu-border-radius, 0);
       &-item {
         width: 100%;
         position: relative;
@@ -205,11 +234,11 @@
         }
         &_selected {
           height: 100%;
+          position: absolute;
           display: flex;
           align-items: center;
-          position: absolute;
-          right: 8px;
           top: 0;
+          right: 8px;
         }
       }
 
@@ -323,4 +352,3 @@
     }
   }
 }
-

package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css

@@ -0,0 +1,15 @@
+.select {
+  &__menu {
+    &-list {
+      &-item {
+        &_size {
+          @each $size in xs, s, m, l, xl, xxl {
+            &_$(size) {
+              padding: var(--select-menu-list-item-size-$(size)-padding, 5px 10px);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Select/css/__menu/select__menu.css

@@ -1,20 +1,21 @@
 .select {
   &__menu {
     width: 100%;
+    background: var(--color-surface-primary);
+    padding: 12px 0;
     margin: var(--select-menu-margin, 0);
+    border-radius: var(--select-menu-border-radius, 0);
     border-top: none;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 100000;
-    border-radius: var(--select-menu-border-radius, 0);
     &-group-heading {
       z-index: 100000;
     }
     &-list {
       overflow-y: auto;
       max-height: 240px;
-      border-radius: var(--select-menu-border-radius, 0);
       &-item {
         width: 100%;
         position: relative;
@@ -26,11 +27,11 @@
         }
         &_selected {
           height: 100%;
+          position: absolute;
           display: flex;
           align-items: center;
-          position: absolute;
-          right: 8px;
           top: 0;
+          right: 8px;
         }
       }