@itcase/ui 1.8.1 → 1.8.3

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

@@ -158,7 +158,7 @@
       ^^&__wrapper {
         overflow: hidden scroll;
         display: flex;
-      flex-direction: column;
+        flex-direction: column;
       }
     }
     &_horizontal {

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

@@ -140,4 +140,10 @@
   --icon-transition: all 0.2s ease 0s;
   --icon-size-24-badge-position: 12px, 12px;
   --icon-shape-rounded: 6px;
+
+  /* Size */
+  @each $size, $value in (14, 16, 20, 24, 32, 40, 56, 60, 72),
+    (14px, 16px, 20px, 24px, 32px, 40px, 56px, 60px, 72px) {
+    --icon-size-$(size)-badge-position: $value;
+  }
 }

package/dist/css/components/Input/Input.css

@@ -19,13 +19,6 @@
   &:focus {
     outline: none;
   }
-
-  /*
-  &:hover {
-    background: var(--input-state-hover-background);
-    border: solid 1px var(--input-state-hover-border);
-  }
-  */
 }
 .input {
   &_shape {
@@ -43,7 +36,7 @@
 }
 .input {
   &&_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs, normal, tiny, compact, large {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         padding: var(--input-size-$(size)-padding);
       }
@@ -79,7 +72,7 @@
 :root {
   --input-shape-rounded: 8px;
 
-  --input-size-xs-padding: 1px 8px;
+  /* Size */
   --input-size-s-padding: 5px 10px;
   --input-size-m-padding: 7px 12px;
   --input-size-l-padding: 9px 15px;
@@ -88,6 +81,7 @@
 
   --input-caret-color: var(--color-accent-primary);
 
+  /* State */
   --input-state-success-background: none;
   --input-state-success-border: var(--color-success-border-primary);
   --input-state-focus-border: var(--color-surface-border-quaternary);
@@ -100,4 +94,8 @@
   --input-state-custom-background: none;
   --input-state-hover-border: var(--color-surface-border-quaternary);
   --input-state-hover-background: none;
+
+  /* Dosabled */
+  --input-state-disabled-background: none;
+  --input-state-disabled-border: none;
 }

package/dist/css/components/InputMask/{Input.css → InputMask.css}

@@ -1,4 +1,4 @@
-.input {
+.input-mask {
   min-width: unset;
   padding: 0;
   margin: 0;
@@ -38,7 +38,7 @@
     }
   }
 }
-.input {
+.input-mask {
   &_shape {
     &_rounded {
       border-radius: var(--input-shape-rounded);
@@ -52,7 +52,7 @@
     }
   }
 }
-.input {
+.input-mask {
   &&_size {
     @each $size in xxl, xl, l, m, s, xs, xxs, normal, tiny, compact, large {
       &_$(size) {
@@ -61,7 +61,7 @@
     }
   }
 }
-.input {
+.input-mask {
   &_type {
     &_number {
       appearance: none;

package/dist/css/components/InputPassword/InputPassword.css

@@ -88,4 +88,5 @@
   --input-password-state-hover-border: var(--color-surface-border-quaternary);
   --input-password-state-hover-background: none;
   --input-password-caret-color: var(--color-accent-primary);
+  --input-password-shape-rounded: 0;
 }

package/dist/css/components/Loader/Loader.css

@@ -102,4 +102,10 @@
   --loader-s-min-height: 24px;
   --loader-s-item: 6px;
   --loader-s-gap: 8px;
+
+  /* Rounded */
+  --loader-shape-rounded-default: 0;
+  @each $size, $value in (xxl, xl, l, m, s, xs, xxs), (0, 0, 0, 0, 0, 0, 0) {
+    --loader-$(size)-shape-rounded: $value;
+  }
 }

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

@@ -38,5 +38,6 @@
   }
 }
 :root {
+  --modal-shape-rounded: 0;
   --modal-max-width: 450px;
 }

package/dist/css/components/ModalSheetBottom/ModalSheetBottom.css

@@ -34,3 +34,9 @@
     right: 8px;
   }
 }
+:root {
+  --modal-sheet-bottom-container-background: none;
+  --modal-sheet-bottom-container-border-radius: 0;
+  --modal-sheet-bottom-header-grabber: none;
+  --modal-sheet-bottom-backdrop: 0;
+}

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

@@ -45,7 +45,7 @@
     margin: var(--paginator-margin);
     ^&__item {
       width: var(--paginator-item-width);
-      height: var(--paginator-item-height);      
+      height: var(--paginator-item-height);
       background: var(--paginator-item-default-fill);
       border: var(
         --paginator-item-border,
@@ -82,10 +82,7 @@
     border: solid 1px var(--paginator-item-active-border);
     &&_state {
       &_active {
-        background: var(
-          --paginator-item-active-background,
-          var(--color-accent-primary)
-        );
+        background: var(--paginator-item-active-fill);
         &:hover {
           background: var(--paginator-item-active-fill-hover);
         }
@@ -123,6 +120,11 @@
   --paginator-item-height: 32px;
   --paginator-item-border: none;
   --paginator-item-border-radius: 50%;
+  --pagination-input-color: none;
+  --paginator-item-default-border: none;
+  --paginator-item-active-border: none;
+  --paginator-item-active-background: none;
+  --paginator-item-disabled-border: none;
 
   --pagination-item-state-disabled-display: none;
 

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

@@ -3,7 +3,7 @@
     margin: var(--paginator-margin);
     ^&__item {
       width: var(--paginator-item-width);
-      height: var(--paginator-item-height);      
+      height: var(--paginator-item-height);
       background: var(--paginator-item-default-fill);
       border: var(
         --paginator-item-border,

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

@@ -3,10 +3,7 @@
     border: solid 1px var(--paginator-item-active-border);
     &&_state {
       &_active {
-        background: var(
-          --paginator-item-active-background,
-          var(--color-accent-primary)
-        );
+        background: var(--paginator-item-active-fill);
         &:hover {
           background: var(--paginator-item-active-fill-hover);
         }

package/dist/css/components/Radio/Radio.css

@@ -115,4 +115,6 @@
 :root {
   --radio-state-border-hover: var(--color-surface-border-tertiary);
   --radio-success-border: var(--color-surface-border-tertiary);
+  --radio-shape-rounded: 0;
+  --radio-item-shape-rounded: 0;
 }

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

@@ -1,10 +1,9 @@
 .search {
-
 }
 .search {
   &_shape {
     &_rounded {
-      border-radius: var(--search-shape-rounded, 6px);
+      border-radius: var(--search-shape-rounded);
       position: relative;
     }
   }
@@ -93,6 +92,7 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
+        min-height: var(--search-input-$(size)-min-height);
         padding: var(--search-input-$(size)-padding);
         gap: var(--search-input-$(size)-gap);
       }
@@ -128,12 +128,15 @@
 
   --search-input-s-padding: 2px 7px;
   --search-input-s-gap: 6px;
+  --search-input-s-min-height: 32px;
 
   --search-input-xs-padding: 2px 7px;
   --search-input-xs-gap: 6px;
+  --search-input-xs-min-height: 24px;
 
   --search-input-xxs-padding: 2px 7px;
   --search-input-xxs-gap: 6px;
 
   --search-shape-rounded: 8px;
+  --search-input-shape-rounded: 0;
 }

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

@@ -2,6 +2,7 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
+        min-height: var(--search-input-$(size)-min-height);
         padding: var(--search-input-$(size)-padding);
         gap: var(--search-input-$(size)-gap);
       }

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

@@ -123,4 +123,7 @@
   --segmented-item-size-s-padding: 4px 16px;
   --segmented-item-size-xs-padding: 4px 16px;
   --segmented-item-size-xxs-padding: 4px 16px;
+
+  --segmented-active-width: 0;
+  --segmented-active-x-pos: 0;
 }

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

@@ -397,4 +397,6 @@
   --select-menu-list-item-m-padding: 8px 12px;
   --select-menu-list-item-s-padding: 6px 10px;
   --select-menu-list-item-xs-padding: 2px 8px;
+
+  --select-multi-value-border-radius: 0;
 }

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

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.2.6
+ * Swiper 11.2.7
  * 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: March 19, 2025
+ * Released on: May 19, 2025
  */
 
 /* FONT_START */
@@ -902,7 +902,7 @@ div.swiper-block__item {
 
 .swiper-block {
   &&_type_step {
-    height: 100%;
+    min-height: 100vh;
     ^&__swiper {
       height: 100%;
       display: flex;

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

@@ -56,12 +56,12 @@ div.tab-reset {
 }
 .tab {
   &_size {
-    @each $size in normal, compact, xxl, xl, l, m, s, xs, xxs {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         ^^&__wrapper {
+          padding: var(--tab-size-$(size)-padding);
           display: flex;
           align-items: center;
-          padding: var(--tab-size-$(size)-padding);
           gap: var(--tab-size-$(size)-gap);
         }
       }

package/dist/css/components/Text/Text.css

@@ -1,18 +1,19 @@
 .text {
 }
 .text {
-  &&&&_mode {
-    &_skeleton {
-      color: transparent;
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
-      );
-      background-size: 200%;
-      border-radius: 6px;
-      animation: textSkeleton 3s infinite linear;
+  &&_skeleton {
+    color: transparent;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    );
+    background-size: 200%;
+    border-radius: 6px;
+    animation: textSkeleton 3s infinite linear;
+    & * {
+      opacity: 0%;
     }
   }
 }
@@ -58,3 +59,5 @@
     }
   }
 }
+:root {
+}

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

@@ -1,39 +1,45 @@
 .textarea {
-  width: 100%;
-  min-width: 100%;
-  min-height: var(--textarea-min-height, 160px);
-  max-height: var(--textarea-max-height, 160px);
-  padding: var(--textarea-padding, 16px 16px);
-  padding: 0;
-  margin: 0;
-  border: none;
-  z-index: 1;
-  outline: 0;
-  resize: none;
-  appearance: none;
-  &:read-only {
-    color: var(--color-surface-text-tertiary);
+  &__input {
+    width: 100%;
+    min-width: 100%;
+    min-height: var(--textarea-min-height, 160px);
+    max-height: var(--textarea-max-height, 160px);
+    padding: var(--textarea-padding);
+    padding: 0;
+    margin: 0;
+    border: none;
+    z-index: 1;
+    outline: 0;
+    resize: none;
+    appearance: none;
+    &:read-only {
+      color: var(--color-surface-text-tertiary);
+    }
   }
 }
 .textarea {
   &_shape {
-    &_rounded {
-      border-radius: var(--textarea-shape-rounded);
-      position: relative;
-    }
-    &_underline {
-      border-left: none !important;
-      border-top: none !important;
-      border-right: none !important;
-      position: relative;
+    &^&__input {
+      &_rounded {
+        border-radius: var(--textarea-shape-rounded);
+        position: relative;
+      }
+      &_underline {
+        border-left: none !important;
+        border-top: none !important;
+        border-right: none !important;
+        position: relative;
+      }
     }
   }
 }
 .textarea {
   &&_size {
-    @each $sizeValue in xxl, xl, l, m, s, xs, xxs {
-      &_$(sizeValue) {
-        padding: var(--textarea-size-$(sizeValue)-padding);
+    @each $size in xxl, xl, l, m, s, xs, xxs {
+      &_$(size) {
+        ^^&__input {
+          padding: var(--textarea-size-$(size)-padding);
+        }
       }
     }
   }
@@ -44,4 +50,10 @@
   --textarea-min-height: 80px;
   --textarea-max-height: 80px;
   --textarea-success-border: var(--color-surface-border-tertiary);
+
+  /* Size */
+  @each $size, $value in (xxl, xl, l, m, s, xs, xxs),
+    (17px 25px, 13px 20px, 9px 15px, 7px 12px, 5px 10px, 5px 10px, 5px 10px) {
+    --textarea-size-$(size)-padding: $value;
+  }
 }

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

@@ -53,4 +53,13 @@
   --tile-wrapper-flex: 1 1;
   --tile-wrapper-group-flex: 1;
   --tile-title-margin-right: 40px;
+  --tile-shape-rounded: 0;
+  --tile-type-icon: 0;
+
+  /* Size */
+  @each $size, $value in (xxl, xl, l, m, s, xs, xxs), (0, 0, 0, 0, 0, 0, 0) {
+    --tile-size-$(size)-min-width: $value;
+    --tile-size-$(size)-padding: $value;
+    --tile-size-$(size)-gap: $value;
+  }
 }

package/dist/css/components/Tooltip/Tooltip.css

@@ -164,4 +164,11 @@
   --tooltip-arrow-radius: 2px;
 
   --tooltip-arrow-color: var(--color-surface-primary);
+  --tooltip-shape-rounded-default: 0;
+
+  /* Size */
+  @each $size, $value in (xxl, xl, l, m, s, xs, xxs), (0, 0, 0, 0, 0, 0, 0) {
+    --tooltip-size-$(size)-padding: $value;
+    --tooltip-size-$(size)-gap: $value;
+  }
 }

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

@@ -1,10 +1,10 @@
 .border-color {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error,
-    success, warning, info, danger, gradient {
-    &_$(type) {
-      &-border {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active,
-          disabled, hover, inverse {
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      &_$(type) {
+        &-border {
           &-$(color) {
             border-width: 1px;
             border-color: var(--color-$(type)-border-$(color));

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

@@ -1,9 +1,11 @@
 .border-color {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
-    &_focus {
-      &_$(type) {
-        &-border {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover {
+  &_focus {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-border {
             &-$(color) {
               &:focus {
                 outline: 0;

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

@@ -1,17 +1,21 @@
 .border-color {
   &_hover {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
-      &_$(type) {
-        &-border {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
-            &-$(color) {
-              &:hover {
-                border-color: var(--color-$(type)-border-$(color));
-              }
-              &-hover {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &_$(type) {
+            &-border {
+              &-$(color) {
                 &:hover {
                   border-color: var(--color-$(type)-border-$(color));
                 }
+                &-hover {
+                  &:hover {
+                    border-color: var(--color-$(type)-border-$(color));
+                  }
+                }
               }
             }
           }

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

@@ -1,6 +1,7 @@
 .border-width {
-  @each $width in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
+  @each $width in 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
     &_$(width) {
+      /* stylelint-disable-next-line prettier/prettier */
       border-width: $(width)px;
       border-style: solid;
     }

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

@@ -1,8 +1,10 @@
 .caret-color {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
-    &_$(type) {
-      &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      &_$(type) {
+        &-item {
           &-$(color) {
             caret-color: var(--color-$(type)-item-$(color));
           }

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

@@ -1,47 +1,32 @@
 .fill {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-    senary, surface, error, success, warning, info, danger, gradient {
-    &_$(type) {
-      &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary,
-          senary, accent, disabled, hover {
+  &_none {
+    background-color: transparent;
+  }
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+      &_$(type) {
+        &-item {
           &-$(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 {
-              &$(alpha) {
+
+            /* &$(alpha) {
                 background: var(--color-$(type)-item-$(color)-$(alpha));
-              }
-            }
+              } */
           }
         }
-      }
-      @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)-fill-$(color));
+
+          /* &$(alpha) {
               background: var(--color-$(type)-$(color)-$(alpha));
-            }
-          }
-        }
-      }
-    }
-  }
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-    senary, surface, error, success, warning, info, danger, gradient {
-    &_$(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 {
-          &$(alpha) {
-            background: var(--color-$(type)-primary$(opacity));
-          }
+            } */
         }
       }
+
+      /* } */
     }
   }
 }