@itcase/ui 1.8.1 → 1.8.4

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

@@ -1,7 +1,7 @@
 .grid {
-  display: grid;
   width: 100%;
   position: relative;
+  display: grid;
   &__before {
     position: relative;
     overflow: hidden;
@@ -22,8 +22,8 @@
     max-width: var(--max);
     margin: 0 auto;
     &-inner {
-      display: grid;
       position: relative;
+      display: grid;
     }
     ^&__item {
       position: relative;
@@ -264,6 +264,15 @@
   }
 }
 :root {
+  --max: 0;
+  --grid-shape-rounded: 0;
+
+  /* Transition */
   --grid-row-transition: all 0.2s ease 0s;
   --grid-item-transition: all 0.2s ease 0s;
-}
+
+  /* System */
+  --grid-system-margin: 0;
+  --grid-system-columns: 0;
+  --grid-system-gutter: 0;
+}

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

@@ -50,7 +50,7 @@
         &-$(color) {
           & svg {
             stroke: none;
-            fill: var(--color-$(type)-$(color));
+            fill: var(--color-$(type)-fill-$(color));
           }
         }
       }
@@ -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

@@ -1,10 +1,7 @@
 .modal-sheet-bottom {
   position: relative;
   &__container {
-    background-color: var(
-      --modal-sheet-bottom-container-background,
-      var(--color-surface-primary)
-    ) !important;
+    background-color: var(--modal-sheet-bottom-container-background) !important;
     border-radius: var(--modal-sheet-bottom-container-border-radius) !important;
   }
   &__header {
@@ -34,3 +31,9 @@
     right: 8px;
   }
 }
+:root {
+  --modal-sheet-bottom-container-border-radius: 0;
+  --modal-sheet-bottom-header-grabber: none;
+  --modal-sheet-bottom-backdrop: 0;
+  --modal-sheet-bottom-container-background: var(--color-surface-fill-primary);
+}

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

@@ -76,7 +76,7 @@
   &_set {
     &_toast {
       width: 100%;
-      background: var(--color-surface-primary);
+      background: var(--color-surface-fill-primary);
       border-radius: var(--notification-item-set-toast-border-radius);
       display: flex;
       flex-direction: column;

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

@@ -2,7 +2,7 @@
   &_set {
     &_toast {
       width: 100%;
-      background: var(--color-surface-primary);
+      background: var(--color-surface-fill-primary);
       border-radius: var(--notification-item-set-toast-border-radius);
       display: flex;
       flex-direction: column;

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

@@ -19,7 +19,7 @@
     }
   }
   &__input {
-    background: var(--color-surface-primary);
+    background: var(--color-surface-fill-primary);
     border: solid 1px
       var(--pagination-input-color, --color-surface-border-tertiary);
     border-radius: 8px;
@@ -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,13 +120,18 @@
   --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;
 
   --paginator-item-transition: all 0.2s ease 0s;
 
-  --paginator-item-default-fill: var(--color-surface-primary);
-  --paginator-item-default-fill-hover: var(--color-surface-primary-hover);
+  --paginator-item-default-fill: var(--color-surface-fill-primary);
+  --paginator-item-default-fill-hover: var(--color-surface-hover);
   --paginator-item-default-text: var(--color-surface-text-primary);
 
   --paginator-item-active-fill: var(--color-accent-primary);

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/RangeSlider/RangeSlider.css

@@ -317,7 +317,7 @@
         accent, disabled, hover {
         &-$(color) {
           & .rc-slider-rail {
-            background: var(--color-$(type)-$(color));
+            background: var(--color-$(type)-fill-$(color));
           }
         }
       }

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

@@ -117,7 +117,7 @@
           @each $color in primary, secondary, tertiary, quaternary, quinary,
             senary, accent, disabled, hover {
             &-$(color) {
-              background: var(--color-$(type)-$(color));
+              background: var(--color-$(type)-fill-$(color));
             }
           }
         }
@@ -220,7 +220,7 @@
 .select {
   &__menu {
     width: 100%;
-    background: var(--color-surface-primary);
+    background: var(--color-surface-fill-primary);
     padding: 12px 0;
     margin: var(--select-menu-margin);
     border-radius: var(--select-menu-border-radius);
@@ -385,11 +385,16 @@
   --select-menu-border-radius: 12px;
   --select-menu-margin: 0;
 
-  --select-multi-value-padding: 2px 6px;
-
   --select-control-shape-rounded: 8px;
 
-  --select-success-border: var(--color-surface-border-tertiary);
+  --select-background: var(--color-surface-fill-primary);
+  --select-background-hover: var(--color-surface-fill-hover);
+  --select-focus-background: var(--color-surface-fill-primary);
+  --select-focus-border: var(--color-surface-border-quaternary);
+  --select-success-border: var(--color-success-border-secondary);
+  --select-success-border-hover: var(--color-surface-border-quaternary);
+  --select-error-border: var(--color-error-border-secondary);
+  --select-error-hover: var(--color-error-border-secondary);
 
   --select-menu-list-item-xxl-padding: 18px 25px;
   --select-menu-list-item-xl-padding: 14px 20px;
@@ -397,4 +402,7 @@
   --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-padding: 2px 6px;
+  --select-multi-value-border-radius: 0;
 }

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

@@ -7,7 +7,7 @@
           @each $color in primary, secondary, tertiary, quaternary, quinary,
             senary, accent, disabled, hover {
             &-$(color) {
-              background: var(--color-$(type)-$(color));
+              background: var(--color-$(type)-fill-$(color));
             }
           }
         }

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

@@ -1,7 +1,7 @@
 .select {
   &__menu {
     width: 100%;
-    background: var(--color-surface-primary);
+    background: var(--color-surface-fill-primary);
     padding: 12px 0;
     margin: var(--select-menu-margin);
     border-radius: var(--select-menu-border-radius);

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

@@ -163,5 +163,12 @@
   --tooltip-arrow-height: 14px;
   --tooltip-arrow-radius: 2px;
 
-  --tooltip-arrow-color: var(--color-surface-primary);
+  --tooltip-arrow-color: var(--color-surface-fill-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;