@itcase/ui 1.3.31 → 1.3.33

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

@@ -32,20 +32,20 @@
 
 .select {
   &&_size {
-    @each $size in xs, s, m, l, xl, xxl, tiny, compact, normal, large {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         ^^&__control {
-          padding: var(--select-size-$(size)-padding);
+          padding: var(--select-$(size)-padding);
         }
         ^^&__option {
-          padding: var(--select-size-$(size)-padding);
+          padding: var(--select-$(size)-padding);
         }
         ^^&__menu {
           &-notice {
-            padding: var(--select-size-$(size)-padding);
+            padding: var(--select-$(size)-padding);
           }
           &-group-heading {
-            padding: var(--select-size-$(size)-padding);
+            padding: var(--select-$(size)-padding);
           }
         }
       }
@@ -111,9 +111,11 @@
 .select {
   &__control {
     &_fill {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, surface, success,
+        error {
         &_$(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) {
               background: var(--color-$(type)-$(color));
             }
@@ -206,7 +208,7 @@
         &_size {
           @each $size in xs, s, m, l, xl, xxl {
             &_$(size) {
-              padding: var(--select-menu-list-item-size-$(size)-padding, 5px 10px);
+              padding: var(--select-menu-list-item-$(size)-padding, 5px 10px);
             }
           }
         }
@@ -371,3 +373,28 @@
     }
   }
 }
+
+:root {
+  --select-xxl-padding: 15px 25px;
+  --select-xl-padding: 9px 20px;
+  --select-xs-padding: 0px 8px;
+  --select-m-padding: 5px 12px;
+  --select-s-padding: 1px 4px;
+  --select-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-xxl-padding: 18px 25px;
+  --select-menu-list-item-xl-padding: 14px 20px;
+  --select-menu-list-item-l-padding: 10px 12px;
+  --select-menu-list-item-m-padding: 8px 12px;
+  --select-menu-list-item-s-padding: 6px 10px;
+  --select-menu-list-item-xs-padding: 2px 8px;
+}

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

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

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

@@ -1,9 +1,11 @@
 .select {
   &__control {
     &_fill {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, surface, success,
+        error {
         &_$(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) {
               background: var(--color-$(type)-$(color));
             }

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

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

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

@@ -68,3 +68,31 @@ div.tab-reset {
     }
   }
 }
+:root {
+  --tab-size-normal-padding: 12px;
+  --tab-size-normal-gap: 4px;
+
+  --tab-size-compact-padding: 12px;
+  --tab-size-compact-gap: 4px;
+
+  --tab-size-xxs-padding: 0px;
+  --tab-size-xxs-gap: 4px;
+
+  --tab-size-xs-padding: 3px;
+  --tab-size-xs-gap: 4px;
+
+  --tab-size-s-padding: 5px;
+  --tab-size-s-gap: 4px;
+
+  --tab-size-m-padding: 7px;
+  --tab-size-m-gap: 4px;
+
+  --tab-size-l-padding: 11px;
+  --tab-size-l-gap: 4px;
+
+  --tab-size-xl-padding: 15px;
+  --tab-size-xl-gap: 4px;
+
+  --tab-size-xxl-padding: 19px;
+  --tab-size-xxl-gap: 4px;
+}

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

@@ -38,3 +38,10 @@
     }
   }
 }
+:root {
+  --textarea-shape-rounded: 8px;
+  --textarea-size-m-padding: 8px 12px;
+  --textarea-min-height: 80px;
+  --textarea-max-height: 80px;
+  --textarea-success-border: var(--color-surface-border-tertiary);
+}

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));
+              }
             }
           }
         }
       }
     }
   }
-}
+}