@itcase/ui 1.0.80 → 1.0.82

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

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

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

@@ -0,0 +1,19 @@
+.notification__item {
+  &_set {
+    &_toast {
+      width: 100%;
+      background: var(--color-surface-primary);
+      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;
+      @mixin elevation-8;
+      ^^&-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+  }
+}

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

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

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

@@ -1,8 +1,8 @@
 .notification__item {
   &_status {
     &_success {
+      background: var(--color-success-primary);
       ^^&-wrapper {
-        background: var(--color-success-primary);
         ^^^&-title {
           color: var(--color-success-text-secondary);
         }
@@ -12,8 +12,8 @@
       }
     }
     &_error {
+      background: var(--color-error-primary);
       ^^&-wrapper {
-        background: var(--color-error-primary);
         ^^^&-title {
           color: var(--color-error-text-secondary);
         }
@@ -23,8 +23,8 @@
       }
     }
     &_warning {
+      background: var(--color-primary-primary);
       ^^&-wrapper {
-        background: var(--color-primary-primary);
         ^^^&-title {
           color: var(--color-primary-text-primary);
         }

package/dist/css/components/Notification/css/__item/notification__item_type_close-button.css

@@ -1,13 +1,16 @@
 .notification__item {
   &_type {
     &_close-button {
-      ^^&-title {
-        margin-right: 40px;
-      }
-      ^^&-close {
-        position: absolute;
-        top: 12px;
-        right: 16px;
+      ^^&-wrapper {
+        position: relative;
+        ^^^&-title {
+          margin-right: 40px;
+        }
+        ^^^&-close {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
       }
     }
   }

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;
     }
   }
@@ -23,19 +23,19 @@
     width: 100%;
     position: relative;
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
     align-items: center;
+    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    grid-template-columns: 1fr 1fr;
   }
   &__value {
     background: none;
+    padding: 1px 0 !important;
     border: none;
     position: relative;
     display: block;
+    z-index: 2;
     grid-column: 1/3;
     grid-row-start: 1;
-    z-index: 2;
-    padding: 1.25px 0 !important;
     &:focus {
       outline: 0;
     }
@@ -49,7 +49,7 @@
     background: none;
     border: none;
     position: relative;
-    display: block;
+    display: grid;
     grid-column: 1/3;
     grid-row-start: 1;
     &:focus {
@@ -60,10 +60,9 @@
     margin: 0 4px 0 0;
     position: absolute;
     top: 50%;
-    transform: translate(0, -50%);
     right: 0;
-    cursor: pointer;
     z-index: 2;
+    transform: translate(0, -50%);
   }
   &&_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

@@ -12,19 +12,19 @@
     width: 100%;
     position: relative;
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
     align-items: center;
+    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    grid-template-columns: 1fr 1fr;
   }
   &__value {
     background: none;
+    padding: 1px 0 !important;
     border: none;
     position: relative;
     display: block;
+    z-index: 2;
     grid-column: 1/3;
     grid-row-start: 1;
-    z-index: 2;
-    padding: 1.25px 0 !important;
     &:focus {
       outline: 0;
     }
@@ -38,7 +38,7 @@
     background: none;
     border: none;
     position: relative;
-    display: block;
+    display: grid;
     grid-column: 1/3;
     grid-row-start: 1;
     &:focus {
@@ -49,10 +49,9 @@
     margin: 0 4px 0 0;
     position: absolute;
     top: 50%;
-    transform: translate(0, -50%);
     right: 0;
-    cursor: pointer;
     z-index: 2;
+    transform: translate(0, -50%);
   }
   &&_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

@@ -32,7 +32,7 @@
 
 .select {
   &&_size {
-    @each $size in normal, compaсt {
+    @each $size in xs, s, m, l, xl, xxl, tiny, compact, normal, large {
       &_$(size) {
         ^^&__control {
           padding: var(--select-size-$(size)-padding);
@@ -72,6 +72,17 @@
   }
 }
 
+.select {
+  &_position {
+    &_right {
+      & .select__menu {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}
+
 .select {
   &__control {
     position: relative;
@@ -109,7 +120,7 @@
   &__control {
     &_shape {
       &_rounded {
-        border-radius: 6px;
+        border-radius: var(--select-control-shape-rounded, 6px);
       }
       &_circular {
         border-radius: 50%;
@@ -234,8 +245,11 @@
 
 .select__multi-value {
   &-wrapper {
-    padding: 4px 6px;
-    border-radius: 6px;
+    padding: var(--select-multi-value-padding, 4px 6px);
+    border-radius: var(--select-multi-value-border-radius, 6px);
+    ^&__label {
+      display: flex;
+    }
   }
 }
 
@@ -320,4 +334,3 @@
     }
   }
 }
-

package/dist/css/components/Select/css/__control/select__control_shape.css

@@ -2,7 +2,7 @@
   &__control {
     &_shape {
       &_rounded {
-        border-radius: 6px;
+        border-radius: var(--select-control-shape-rounded, 6px);
       }
       &_circular {
         border-radius: 50%;

package/dist/css/components/Select/css/__multi-value/select__multi-value.css

@@ -1,6 +1,9 @@
 .select__multi-value {
   &-wrapper {
-    padding: 4px 6px;
-    border-radius: 6px;
+    padding: var(--select-multi-value-padding, 4px 6px);
+    border-radius: var(--select-multi-value-border-radius, 6px);
+    ^&__label {
+      display: flex;
+    }
   }
 }

package/dist/css/components/Swiper/Swiper.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.0.3
+ * Swiper 11.0.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: October 26, 2023
+ * Released on: November 9, 2023
  */
 
 /* FONT_START */

package/dist/css/components/Tab/Tab.css

@@ -17,7 +17,7 @@
 .tab {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--tab-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;
@@ -39,13 +39,12 @@
 .tab-group {
   position: relative;
   display: flex;
-  align-items: stretch;
   flex-flow: row wrap;
+  align-items: stretch;
   & .tab {
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-end;
-    cursor: pointer;
     &__wrapper {
       display: flex;
       flex: 1;
@@ -54,24 +53,14 @@
       gap: 4px;
     }
     &__label {
-      flex: 1;
       display: flex;
-    }
-  }
-}
-.tab {
-  &_state {
-    &_active {
-      ^^&__label {
-        color: var(--color-surface-text-accent);
-      }
+      flex: 1;
     }
   }
 }
 :root {
   --tab-size-normal-padding: 10px;
   --tab-size-normal-gap: 10px;
-
   --tab-size-compact-padding: 10px;
   --tab-size-compact-gap: 10px;
 }

package/dist/css/components/Textarea/Textarea.css

@@ -3,14 +3,14 @@
   min-width: 100%;
   min-height: 160px;
   max-height: 160px;
-  padding: 16px 16px;
+  padding: var(--textarea-padding, 16px 16px);
+  padding: 0;
+  margin: 0;
+  border: none;
   z-index: 1;
   outline: 0;
   resize: none;
-  border: none;
   appearance: none;
-  padding: 0;
-  margin: 0;
   &:read-only {
     color: var(--color-surface-text-tertiary);
   }
@@ -18,7 +18,7 @@
 .textarea {
   &_shape {
     &_rounded {
-      border-radius: 4px;
+      border-radius: var(--textarea-shape-rounded, 4px);
       position: relative;
     }
     &_underline {

package/dist/css/components/Tile/Tile.css

@@ -6,7 +6,7 @@
 .tile {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--tile-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;
@@ -31,7 +31,7 @@
 .tile {
   &_type {
     &_icon {
-      padding: 16px;
+      padding: var(--tile-type-icon-padding, 16px);
       ^^&__icon {
         margin: 0 0 16px 0;
       }

package/dist/css/styles/border-color/border-color.css

@@ -2,7 +2,8 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-border {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active,
+          disabled, hover, invert {
           &-$(color) {
             border-width: 1px;
             border-color: var(--color-$(type)-border-$(color));

package/dist/css/styles/fill/fill.css

@@ -1,21 +1,13 @@
 .fill {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error, info, gradient,
+    warning {
     &_$(type) {
-      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
-        &-$(color) {
-          background: var(--color-$(type)-$(color));
-          @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95  {
-            &$(alpha) {
-              background: var(--color-$(type)-$(color)-$(alpha));
-            }
-          }
-        }
-      }
       &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
+          hover {
           &-$(color) {
             background: var(--color-$(type)-item-$(color));
-            @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95  {
+            @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95 {
               &$(alpha) {
                 background: var(--color-$(type)-item-$(color)-$(alpha));
               }
@@ -23,13 +15,25 @@
           }
         }
       }
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
+        hover {
+        &-$(color) {
+          background: var(--color-$(type)-$(color));
+          @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95 {
+            &$(alpha) {
+              background: var(--color-$(type)-$(color)-$(alpha));
+            }
+          }
+        }
+      }
     }
   }
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error,
+    info, warning {
     &_$(type) {
       &-primary {
         background: var(--color-$(type)-primary);
-        @each $opacity in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95  {
+        @each $opacity in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95 {
           &$(alpha) {
             background: var(--color-$(type)-primary$(opacity));
           }

package/dist/css/styles/text-color/text-color.css

@@ -2,7 +2,8 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
     &_$(type) {
       &-text {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
+          hover, invert {
           &-$(color) {
             color: var(--color-$(type)-text-$(color));
           }
@@ -11,4 +12,3 @@
     }
   }
 }
-