@itcase/ui 1.3.31 → 1.3.34

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

@@ -12,18 +12,22 @@
   }
 }
 .loader {
-  &_set {
+  &_type {
     &_simple {
       ^^&__inner {
         width: auto;
         height: auto;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
       }
       ^^&__item {
         width: 12px;
         height: 12px;
+        margin: 4px;
         border-radius: 100%;
         display: inline-block;
-        margin: 4px;
         animation: loaderSimple 1.4s infinite ease-in-out both;
         &:first-child {
           animation-delay: -0.32s;
@@ -36,9 +40,12 @@
   }
 }
 @keyframes loaderSimple {
-  0%, 80%, 100% {
+  0%,
+  80%,
+  100% {
     transform: scale(0);
-  } 40% {
-    transform: scale(1.0);
+  }
+  40% {
+    transform: scale(1);
   }
 }

package/dist/css/components/Logo/Logo.css

@@ -1,12 +1,6 @@
 .logo {
   display: flex;
   flex-flow: column nowrap;
-  &__link {
-    font-size: 0;
-    &-second {
-      font-size: 0;
-    }
-  }
 }
 .logo {
   @each $val in stretch, flex-start, flex-end, center, baseline, auto {
@@ -26,14 +20,14 @@
       );
       background-size: 200%;
       border-radius: 6px;
-      animation: logo-skeleton 3s infinite linear;
+      animation: logoSkeleton 3s infinite linear;
       ^^&__image {
-        opacity: 0;
+        opacity: 0%;
       }
     }
   }
 }
-@keyframes logo-skeleton {
+@keyframes logoSkeleton {
   0% {
     background-position: 200%;
   }
@@ -53,13 +47,3 @@
     }
   }
 }
-:root {
-  --logo-size-l-width: 240px;
-  --logo-size-l-height: 90px;
-
-  --logo-size-m-width: 200px;
-  --logo-size-m-height: 75px;
-
-  --logo-size-s-width: 140px;
-  --logo-size-s-height: 52px;
-}

package/dist/css/components/Menu/Menu.css

@@ -54,4 +54,12 @@
     }
   }
 }
-@improt './css/menu_type_border.css';
+.menu {
+  &_type {
+    &_border {
+      width: var(--menu-type-border-width, auto);
+      border: var(--menu-type-border-border, none);
+      border-radius: var(--menu-type-border-border-radius, 0);
+    }
+  }
+}

package/dist/css/components/MenuItem/MenuItem.css

@@ -80,13 +80,3 @@
     }
   }
 }
-
-:root {
-  --menu-item-size-xxs-padding: 0 4px;
-  --menu-item-size-xs-padding: 0 4px;
-  --menu-item-size-s-padding: 3px 4px;
-  --menu-item-size-m-padding: 4px 4px;
-  --menu-item-size-l-padding: 6px 6px;
-  --menu-item-size-xl-padding: 10px 8px;
-  --menu-item-size-xxl-padding: 12px 10px;
-}

package/dist/css/components/MenuItem/MenuItem.tokens.css

@@ -1,8 +1,16 @@
 :root {
+  --menu-item-size-xxs-padding: 0 4px;
+  --menu-item-size-xs-padding: 0 4px;
+  --menu-item-size-s-padding: 3px 4px;
+  --menu-item-size-m-padding: 4px 4px;
+  --menu-item-size-l-padding: 6px 6px;
+  --menu-item-size-xl-padding: 10px 8px;
+  --menu-item-size-xxl-padding: 12px 10px;
   --menu-item-shape-rounded: 6px;
 
   --menu-item-set-filter-padding: 10px 16px;
-  --menu-item-set-filter-border-right: 1px solid var(--color-surface-border-tertiary);
+  --menu-item-set-filter-border-right: 1px solid
+    var(--color-surface-border-tertiary);
   --menu-item-set-filter-active-color: var(--color-surface-item-accent);
 
   --menu-item-set-subitem-padding-left: 32px;

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

@@ -111,6 +111,3 @@
     }
   }
 }
-:root {
-  --radio-state-border-hover: var(--color-surface-border-tertiary);
-}

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

@@ -1,3 +1,4 @@
 :root {
+  --radio-state-border-hover: var(--color-surface-border-tertiary);
   --radio-success-border: var(--color-surface-border-tertiary);
-}
+}

package/dist/css/components/ScrollToView/ScrollToView.css

@@ -1,12 +1,12 @@
 .scroll-to-view {
   &_text-color {
     &_hover {
-      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface,
-        success, error, info, warning {
+      @each $type in accent, primary, secondary, tertiary, quaternary,
+        quinary, senary, 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 {
               &-$(color) {
                 &:hover {
                   .text,

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

@@ -371,3 +371,28 @@
     }
   }
 }
+
+:root {
+  --select-size-xxl-padding: 15px 25px;
+  --select-size-xl-padding: 9px 20px;
+  --select-size-xs-padding: 0px 8px;
+  --select-size-m-padding: 5px 12px;
+  --select-size-s-padding: 0 4px;
+  --select-size-l-padding: 7px 15px;
+
+  --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-menu-list-item-size-xxl-padding: 18px 25px;
+  --select-menu-list-item-size-xl-padding: 14px 20px;
+  --select-menu-list-item-size-l-padding: 10px 12px;
+  --select-menu-list-item-size-m-padding: 8px 12px;
+  --select-menu-list-item-size-s-padding: 6px 10px;
+  --select-menu-list-item-size-xs-padding: 2px 8px;
+}

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

@@ -1,15 +1,10 @@
 :root {
+  --select-size-xxl-padding: 15px 25px;
+  --select-size-xl-padding: 9px 20px;
   --select-size-xs-padding: 0px 8px;
-  --select-size-s-padding: 3px 10px;
   --select-size-m-padding: 5px 12px;
+  --select-size-s-padding: 0 4px;
   --select-size-l-padding: 7px 15px;
-  --select-size-xl-padding: 11px 20px;
-  --select-size-xxl-padding: 15px 25px;
-
-  --select-size-tiny-padding: 0px 8px;
-  --select-size-compact-padding: 3px 10px;
-  --select-size-normal-padding: 5px 12px;
-  --select-size-large-padding: 7px 15px;
 
   --select-menu-border-radius: 12px;
   --select-menu-margin: 0;
@@ -20,10 +15,10 @@
 
   --select-success-border: var(--color-surface-border-tertiary);
 
-  --select-menu-list-item-size-xs-padding: 2px 8px;
-  --select-menu-list-item-size-s-padding: 6px 10px;
-  --select-menu-list-item-size-m-padding: 8px 12px;
-  --select-menu-list-item-size-l-padding: 10px 12px;
-  --select-menu-list-item-size-xl-padding: 14px 20px;
   --select-menu-list-item-size-xxl-padding: 18px 25px;
+  --select-menu-list-item-size-xl-padding: 14px 20px;
+  --select-menu-list-item-size-l-padding: 10px 12px;
+  --select-menu-list-item-size-m-padding: 8px 12px;
+  --select-menu-list-item-size-s-padding: 6px 10px;
+  --select-menu-list-item-size-xs-padding: 2px 8px;
 }

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

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.2.5
+ * Swiper 11.2.6
  * 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 3, 2025
+ * Released on: March 19, 2025
  */
 
 /* FONT_START */
@@ -976,4 +976,3 @@ div.swiper-pagination {
     }
   }
 }
-

package/dist/css/components/Switch/Switch.css

@@ -66,10 +66,3 @@
     }
   }
 }
-:root {
-  --switch-size-normal-width: 52px;
-  --switch-size-normal-height: 32px;
-
-  --switch-size-compact-width: 40px;
-  --switch-size-compact-height: 24px;
-}

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

@@ -12,11 +12,11 @@
       );
       background-size: 200%;
       border-radius: 6px;
-      animation: text-skeleton 3s infinite linear;
+      animation: textSkeleton 3s infinite linear;
     }
   }
 }
-@keyframes text-skeleton {
+@keyframes textSkeleton {
   0% {
     background-position: 200%;
   }

package/dist/css/components/Title/Title.css

@@ -15,11 +15,11 @@
       );
       background-size: 200%;
       border-radius: 6px;
-      animation: title-skeleton 3s infinite linear;
+      animation: titleSkeleton 3s infinite linear;
     }
   }
 }
-@keyframes title-skeleton {
+@keyframes titleSkeleton {
   0% {
     background-position: 200%;
   }

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

@@ -78,28 +78,38 @@
       &::after {
         top: 0;
         left: 50%;
-        transform: translate(-50%, calc(calc(var(--tooltip-arrow-width) / 2) * -1)) rotate(45deg);
+        transform: translate(
+            -50%,
+            calc(calc(var(--tooltip-arrow-width) / 2) * -1)
+          )
+          rotate(45deg);
       }
     }
     &_left {
       &::after {
         top: 50%;
         left: 0;
-        transform: translate(calc(calc(var(--tooltip-arrow-width) / 2) * -1), -50%) rotate(45deg);
+        transform: translate(
+            calc(calc(var(--tooltip-arrow-width) / 2) * -1),
+            -50%
+          )
+          rotate(45deg);
       }
     }
     &_right {
       &::after {
         top: 50%;
         right: 0;
-        transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%) rotate(45deg);
+        transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%)
+          rotate(45deg);
       }
     }
     &_bottom {
       &::after {
         bottom: 0;
         left: 50%;
-        transform: translate(-50%, calc(var(--tooltip-arrow-width) / 2)) rotate(45deg);
+        transform: translate(-50%, calc(var(--tooltip-arrow-width) / 2))
+          rotate(45deg);
       }
     }
   }
@@ -108,7 +118,6 @@
 .tooltip {
   &_align-position {
     &_left {
-      border: solid 2px red;
       position: absolute;
       transform: translate(0, -50%);
     }
@@ -119,7 +128,6 @@
       transform: translate(-50%, 0%);
     }
     &_right {
-      border: solid 2px red;
       position: absolute;
       transform: translate(0, -50%);
     }
@@ -142,18 +150,4 @@
     animation-name: tooltipShowAnimation;
     opacity: 100%;
   }
-}
-
-:root {
-  --tooltip-size-m-padding: 0;
-  --tooltip-size-s-padding: 0;
-
-  --tooltip-size-m-gap: 0;
-  --tooltip-size-s-gap: 0;
-
-  --tooltip-arrow-width: 14px;
-  --tooltip-arrow-height: 14px;
-  --tooltip-arrow-radius: 2px;
-
-  --tooltip-arrow-color: var(--color-surface-primary);
-}
+}

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

@@ -0,0 +1,13 @@
+:root {
+  --tooltip-size-m-padding: 0;
+  --tooltip-size-s-padding: 0;
+
+  --tooltip-size-m-gap: 0;
+  --tooltip-size-s-gap: 0;
+
+  --tooltip-arrow-width: 14px;
+  --tooltip-arrow-height: 14px;
+  --tooltip-arrow-radius: 2px;
+
+  --tooltip-arrow-color: var(--color-surface-primary);
+}

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

@@ -1,12 +1,14 @@
 .fill {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
+  @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 $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));
               }
@@ -14,11 +16,12 @@
           }
         }
       }
-      @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)-$(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)-$(color)-$(alpha));
             }
@@ -27,11 +30,13 @@
       }
     }
   }
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
+  @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 {
+        @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/fill/fill_active.css

@@ -1,15 +1,18 @@
 .fill {
   &_active {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+      senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, active {
           &-$(color) {
             background: var(--color-$(type)-$(color));
           }
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+      senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         &-primary {
           &-active {

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

@@ -1,11 +1,12 @@
 .fill {
   &_active {
     &_hover {
-      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface,
-        error, success, warning, info, danger, gradient {
+      @each $type in accent, primary, secondary, tertiary, quaternary,
+        quinary, senary, surface, error, success, warning, info, danger,
+        gradient {
         &_$(type) {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
-            disabled, hover, active {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover, active {
             &-$(color) {
               &:hover {
                 background: var(--color-$(type)-$(color));
@@ -14,8 +15,9 @@
           }
         }
       }
-      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface,
-        error, success, warning, info, danger, gradient {
+      @each $type in accent, primary, secondary, tertiary, quaternary,
+        quinary, senary, surface, error, success, warning, info, danger,
+        gradient {
         &_$(type) {
           &-primary {
             background: var(--color-$(type)-primary);

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

@@ -1,8 +1,10 @@
 .fill {
   &_disabled {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+      senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
-        @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) {
             &:hover {
               background: var(--color-$(type)-$(color));
@@ -11,7 +13,8 @@
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+      senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         &-primary {
           background: var(--color-$(type)-primary);

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

@@ -1,8 +1,10 @@
 .fill {
   &_hover {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+      senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
-        @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) {
             &:hover {
               background: var(--color-$(type)-$(color));
@@ -16,7 +18,8 @@
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
+      senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         &-primary {
           &:hover {

package/dist/css/styles/shape-strength/shape-strength.css

@@ -0,0 +1,22 @@
+.shape-strength {
+  &_default {
+    border-radius: 0.5m;
+  }
+  &_0-5m {
+    border-radius: 0.5m;
+  }
+  &_1m {
+    border-radius: 1m;
+  }
+  &_1-5m {
+    border-radius: 1.5m;
+  }
+  &_2m {
+    border-radius: 2m;
+  }
+  /* @each $strength, $value in (0-5m, 1m, 1-5m, 2m), (0.5m, 1m, 1.5m, 2m) {
+    &_$(strength) {
+      border-radius: $value;
+    }
+  } */
+}

package/dist/css/styles/svg-color/svg_fill.css

@@ -1,27 +1,37 @@
-.svg_fill {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
-    &_$(type) {
-      &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, inverse  {
+.svg {
+  &_fill {
+    @each $type in accent, primary, secondary, tertiary, surface, success,
+      error {
+      &_$(type) {
+        &-item {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover, inverse {
+            &-$(color) {
+              & svg {
+                stroke: none;
+                fill: var(--color-$(type)-item-$(color));
+              }
+              & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              }
+            }
+          }
+        }
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover, inverse {
           &-$(color) {
             & svg {
               stroke: none;
+              fill: var(--color-$(type)-$(color));
+            }
+            & path,
+            & circle {
               fill: var(--color-$(type)-item-$(color));
             }
           }
         }
       }
-      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, inverse  {
-        &-$(color) {
-          & svg {
-            stroke: none;
-            fill: var(--color-$(type)-$(color));
-          }
-          & path {
-            fill: var(--color-$(type)-item-$(color));
-          }
-        }
-      }
     }
   }
-}
+}

package/dist/css/styles/svg-color/svg_fill_hover.css

@@ -1,13 +1,15 @@
-.svg_fill_hover {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
-    &_$(type) {
-      &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, inverse  {
-          &-$(color) {
-            &:hover {
-              & svg {
-                stroke: none;
-                fill: var(--color-$(type)-item-$(color));
+.svg {
+  &_fill_hover {
+    @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      &_$(type) {
+        &-item {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, inverse  {
+            &-$(color) {
+              &:hover {
+                & svg {
+                  stroke: none;
+                  fill: var(--color-$(type)-item-$(color));
+                }
               }
             }
           }

package/dist/css/styles/svg-color/svg_path_fill.css

@@ -1,15 +1,19 @@
-.svg_path_fill {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
-    &_$(type) {
-      &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, inverse  {
-          &-$(color) {
-            & path {
-              fill: var(--color-$(type)-item-$(color));
+.svg {
+  &_path_fill {
+    @each $type in accent, primary, secondary, tertiary, surface, success,
+      error {
+      &_$(type) {
+        &-item {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover, inverse {
+            &-$(color) {
+              & path {
+                fill: var(--color-$(type)-item-$(color));
+              }
             }
           }
         }
       }
     }
   }
-}
+}