@itcase/ui 1.8.109 → 1.8.111

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

@@ -3,14 +3,15 @@
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
   column-gap: 4px;
+  cursor: pointer;
   &__item {
     font-size: 0;
     line-height: 0;
     position: relative;
     display: flex;
     align-self: start;
-    cursor: pointer;
     grid-row-start: span 2;
+    z-index: 2;
     ^&__input {
       inset: 0;
       font-size: 0;
@@ -36,6 +37,7 @@
       display: flex;
       flex: 1;
       z-index: 1;
+      transition: var(--radio-item-transition);
     }
     ^&__state-checkmark {
       width: calc(100% - 6px);
@@ -84,6 +86,438 @@
     background-position: -200%;
   }
 }
+.radio_fill {
+  &_active {
+    &_hover {
+      &_none {
+        background-color: transparent;
+      }
+      @each $type in accent, primary, secondary, surface, error, warning,
+        success, danger, info, disabled {
+        @each $color in primary, secondary, tertiary, quaternary {
+          /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+          &_$(type) {
+            &-$(color) {
+              &:hover {
+                & .radio__state {
+                  background: var(--color-$(type)-fill-$(color));
+                }
+              }
+              &-hover {
+                &:hover {
+                  & .radio__state {
+                    background: var(--color-$(type)-fill-$(color)-hover);
+                  }
+                }
+                &-active {
+                  &:hover {
+                    & .radio__state {
+                      background: var(
+                        --color-$(type)-fill-$(color)-active-hover
+                      );
+                    }
+                  }
+                }
+              }
+              &-active {
+                &:hover {
+                  & .radio__state {
+                    background: var(--color-$(type)-fill-$(color)-active);
+                  }
+                }
+              }
+            }
+            &-hover {
+              &-$(color) {
+                &:hover {
+                  & .radio__state {
+                    background: var(--color-$(type)-fill-hover-$(color));
+                  }
+                }
+              }
+            }
+          }
+
+          /* } */
+        }
+      }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
+        orange, clementine, apricot, papaya, kumquat, light-orange, peach,
+        flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
+        mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+        dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
+        light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
+        ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
+        lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
+        northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
+        antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
+        coastal-gray, white, black, alto, athens-gray, sonic-silver {
+        &_$(palette) {
+          &:hover {
+            & .radio__state {
+              background: var(--color-palette-$(palette));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.radio_fill {
+  &_active {
+    &_none {
+      background-color: transparent;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-$(color) {
+            & .radio__state {
+              background: var(--color-$(type)-fill-$(color));
+            }
+          }
+          &-$(color)-active {
+            & .radio__state {
+              background: var(--color-$(type)-fill-active-$(color));
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        & .radio__state {
+          background: var(--color-palette-$(palette));
+        }
+      }
+    }
+  }
+}
+.radio_fill {
+  &_hover {
+    &_none {
+      background-color: transparent;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+        &_$(type) {
+          &-$(color) {
+            &:hover {
+              & .radio__state {
+                background: var(--color-$(type)-fill-$(color));
+              }
+            }
+            &-hover {
+              &:hover {
+                & .radio__state {
+                  background: var(--color-$(type)-fill-$(color)-hover);
+                }
+              }
+            }
+          }
+          &-hover {
+            &-$(color) {
+              &:hover {
+                & .radio__state {
+                  background: var(--color-$(type)-fill-hover-$(color));
+                }
+              }
+            }
+          }
+        }
+
+        /* } */
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          & .radio__state {
+            background: var(--color-palette-$(palette));
+          }
+        }
+      }
+    }
+  }
+}
+.radio_fill {
+  &_none {
+    background-color: transparent;
+  }
+  @each $type in accent, primary, secondary, surface, error, warning, success,
+    danger, info, disabled {
+    @each $color in primary, secondary, tertiary, quaternary {
+      /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+      &_$(type) {
+        &-$(color) {
+          & .radio__state {
+            background: var(--color-$(type)-fill-$(color));
+          }
+          /* &$(alpha) {
+              background: var(--color-$(type)-$(color)-$(alpha));
+            } */
+        }
+      }
+      /* } */
+    }
+  }
+  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
+    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
+    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
+    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
+    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
+    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
+    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
+    sonic-silver {
+    &_$(palette) {
+      & .radio__state {
+        background: var(--color-palette-$(palette));
+      }
+    }
+  }
+}
+.radio_border-color {
+  &_active {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              &:hover {
+                & .radio__state {
+                  border-width: 1px;
+                  border-color: var(--color-$(type)-border-$(color));
+                  border-style: solid;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          & .radio__state {
+            border-width: 1px;
+            border-color: var(--color-palette-$(palette));
+            border-style: solid;
+          }
+        }
+      }
+    }
+  }
+}
+.radio_border-color {
+  &_active {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              & .radio__state {
+                border-width: 1px;
+                border-color: var(--color-$(type)-border-$(color));
+                border-style: solid;
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        & .radio__state {
+          border-width: 1px;
+          border-color: var(--color-palette-$(palette));
+          border-style: solid;
+        }
+      }
+    }
+  }
+}
+.radio_border-color {
+  &_hover {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              &:hover {
+                & .radio__state {
+                  border-width: 1px;
+                  border-color: var(--color-$(type)-border-$(color));
+                  border-style: solid;
+                }
+              }
+              &-hover {
+                &:hover {
+                  & .radio__state {
+                    border-width: 1px;
+                    border-color: var(--color-$(type)-border-$(color));
+                    border-style: solid;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          & .radio__state {
+            border-width: 1px;
+            border-color: var(--color-palette-$(palette));
+            border-style: solid;
+          }
+        }
+        &-hover {
+          &:hover {
+            & .radio__state {
+              border-width: 1px;
+              border-color: var(--color-palette-$(palette));
+              border-style: solid;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.radio_border-color {
+  &_none {
+    border-width: 1px;
+    border-color: transparent;
+    border-style: solid;
+  }
+  @each $type in accent, primary, secondary, surface, error, warning, success,
+    danger, info, disabled {
+    @each $color in primary, secondary, tertiary, quaternary {
+      &_$(type) {
+        &-border {
+          &-$(color) {
+            & .radio__state {
+              border-width: 1px;
+              border-color: var(--color-$(type)-border-$(color));
+              border-style: solid;
+            }
+          }
+        }
+      }
+    }
+  }
+  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
+    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
+    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
+    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
+    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
+    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
+    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
+    sonic-silver {
+    &_$(palette) {
+      & .radio__state {
+        border-width: 1px;
+        border-color: var(--color-palette-$(palette));
+        border-style: solid;
+      }
+    }
+  }
+}
 :root {
   --radio-m-min-width: 16px;
   --radio-m-min-height: 16px;
@@ -94,8 +528,5 @@
   --radio-xxs-min-width: 10px;
   --radio-xxs-min-height: 10px;
 
-  --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;
+  --radio-item-transition: all 0.3s ease 0s;
 }

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

@@ -73,23 +73,6 @@
     }
   }
 }
-.segmented {
-  &_size {
-    @each $size in normal, compact, xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
-        ^^&__item {
-          min-width: var(--segmented-item-size-$(size)-min-width);
-          border-radius: var(--segmented-item-size-$(size)-border-radius);
-          &-label {
-            min-height: var(--segmented-item-size-$(size)-min-height);
-            padding: var(--segmented-item-size-$(size)-padding);
-            gap: var(--segmented-item-size-$(size)-gap);
-          }
-        }
-      }
-    }
-  }
-}
 .segmented {
   &_width {
     &_fill {
@@ -133,6 +116,18 @@
 .segmented__item {
   position: relative;
   display: flex;
+  transition: var(--select-item-transition);
+  @each $size in xxl, xl, l, m, s, xs, xxs {
+    &_size_$(size) {
+      min-width: var(--segmented-item-size-$(size)-min-width);
+      border-radius: var(--segmented-item-size-$(size)-border-radius);
+      ^&-label {
+        min-height: var(--segmented-item-size-$(size)-min-height);
+        padding: var(--segmented-item-size-$(size)-padding);
+        gap: var(--segmented-item-size-$(size)-gap);
+      }
+    }
+  }
   &_icon {
     min-width: auto;
   }
@@ -183,6 +178,9 @@
   --segmented-item-size-xs-gap: 4px;
   --segmented-item-size-xxs-gap: 4px;
 
+
+  --select-item-transition: all 0.3s ease 0s;
+
   --segmented-active-width: 0;
   --segmented-active-x-pos: 0;
 

package/dist/css/components/Segmented/css/__item/segmaented__item.css

@@ -1,6 +1,18 @@
 .segmented__item {
   position: relative;
   display: flex;
+  transition: var(--select-item-transition);
+  @each $size in xxl, xl, l, m, s, xs, xxs {
+    &_size_$(size) {
+      min-width: var(--segmented-item-size-$(size)-min-width);
+      border-radius: var(--segmented-item-size-$(size)-border-radius);
+      ^&-label {
+        min-height: var(--segmented-item-size-$(size)-min-height);
+        padding: var(--segmented-item-size-$(size)-padding);
+        gap: var(--segmented-item-size-$(size)-gap);
+      }
+    }
+  }
   &_icon {
     min-width: auto;
   }

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

@@ -2,6 +2,7 @@
   width: 100%;
   min-width: 100%;
   position: relative;
+  transition: var(--select-transition);
 }
 
 @keyframes selectMenuAnimationOpen {
@@ -32,7 +33,7 @@
 
 .select {
   &&_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
+    @each $size in xl, l, m, s {
       &_$(size) {
         ^^&__control {
           padding: var(--select-$(size)-padding);
@@ -124,6 +125,9 @@
   &__placeholder {
     position: absolute;
     display: flex;
+    & .text {
+      white-space: nowrap;
+    }
   }
 }
 
@@ -274,6 +278,11 @@
 .select {
   &__single-value {
     display: flex;
+    position: relative;
+    overflow: hidden;
+    & .text {
+      white-space: nowrap;
+    }
   }
 }
 
@@ -300,11 +309,16 @@
 }
 
 :root {
-  --select-xxl-padding: 16px 12px;
-  --select-xl-padding: 12px 12px;
-  --select-m-padding: 8px 12px;
-  --select-s-padding: 2px 12px;
-  --select-xs-padding: 2px 12px;
+  --select-xl-min-height: 56px;
+  --select-xl-padding: 12px 16px;
+  --select-l-min-height: 48px;
+  --select-l-padding: 12px 12px;
+  --select-m-min-height: 40px;
+  --select-m-padding: 7px 12px;
+  --select-s-min-height: 28px;
+  --select-s-padding: 2px 6px;
+
+  --select-transition: all 0.3s ease 0s;
 
   --select-multi-item-xxl-padding: 5px;
   --select-multi-item-xl-padding: 5px;

package/dist/css/components/Select/css/__placeholder/select__placeholder.css

@@ -2,5 +2,8 @@
   &__placeholder {
     position: absolute;
     display: flex;
+    & .text {
+      white-space: nowrap;
+    }
   }
 }

package/dist/css/components/Select/css/__single-value/select__single-value.css

@@ -1,5 +1,10 @@
 .select {
   &__single-value {
     display: flex;
+    position: relative;
+    overflow: hidden;
+    & .text {
+      white-space: nowrap;
+    }
   }
 }

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

@@ -14,6 +14,7 @@
     outline: 0;
     resize: none;
     appearance: none;
+    transition: var(--textarea-transition);
     &:read-only {
       color: var(--color-surface-text-tertiary);
     }
@@ -43,15 +44,15 @@
   }
 }
 :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);
 
+  --textarea-transition: all 0.3s ease 0s;
+
   /* 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;
-  }
+  --textarea-size-xl-padding: 17px 25px;
+  --textarea-size-l-padding: 13px 20px;
+  --textarea-size-m-padding: 8px 12px;
+  --textarea-size-s-padding: 7px 12px;
 }