@itcase/ui 1.8.110 → 1.8.112

package/dist/css/components/DatePicker/DatePicker.css

@@ -822,23 +822,23 @@ h2.react-datepicker__current-month {
             align-items: center;
           }
         }
-        ^^^&__day {
-          &-names {
-            margin: 0;
-            display: flex;
-          }
-          &-name {
-            width: var(--date-picker-day-width);
-            height: var(--date-picker-day-height);
-            font-size: var(--date-picker-day-name-text-size);
-            font-weight: var(--date-picker-day-name-text-weight);
-            color: var(--date-picker-day-name-text-color);
-            line-height: var(--date-picker-day-name-text-line-height);
-            margin: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
+      }
+      ^^&__day {
+        &-names {
+          margin: 0;
+          display: flex;
+        }
+        &-name {
+          width: var(--date-picker-day-width);
+          height: var(--date-picker-day-height);
+          font-size: var(--date-picker-day-name-text-size);
+          font-weight: var(--date-picker-day-name-text-weight);
+          color: var(--date-picker-day-name-text-color);
+          line-height: var(--date-picker-day-name-text-line-height);
+          margin: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
         }
       }
       ^^&__month {
@@ -887,7 +887,7 @@ h2.react-datepicker__current-month {
               background: var(--date-picker-day-outside-background) !important;
               cursor: default !important;
               & .button__label {
-                color: var(--date-picker-day-ouside-ext-color) !important;
+                color: var(--date-picker-day-outside-text-color) !important;
                 cursor: default !important;
               }
             }

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

@@ -213,3 +213,8 @@
     }
   }
 }
+
+:root {
+  --group-transition: all 0.2s ease 0s;
+  --group-shape-rounded: 0;
+}

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

@@ -3,20 +3,21 @@
   padding: 0;
   margin: 0;
   border: none;
-  border: solid 2px red;
+  border: solid 1px none;
   position: relative;
   box-shadow: none;
   appearance: none;
   outline: 0;
   caret-color: var(--input-caret-color);
-  &:disabled {
-    background: var(--input-state-disabled-background);
-    border: solid 1px var(--input-state-disabled-border);
+  transition: var(--input-transition);
+  /* &:disabled {
+    background: none;
+    border: solid 1px none;
     &:hover {
-      background: var(--input-state-disabled-background);
-      border: solid 1px var(--input-state-disabled-border);
+      background: none;
+      border: solid 1px none;
     }
-  }
+  } */
   &:focus {
     outline: none;
   }
@@ -82,6 +83,8 @@
 
   --input-caret-color: var(--color-accent-fill-primary);
 
+  --input-transition: all 0.3s ease 0s;
+
   /* State */
   --input-state-success-background: none;
   --input-state-success-border: var(--color-success-border-primary);

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 {
@@ -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;
+    }
   }
 }
 
@@ -305,10 +314,12 @@
   --select-l-min-height: 48px;
   --select-l-padding: 12px 12px;
   --select-m-min-height: 40px;
-  --select-m-padding: 8px 12px;
+  --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;
   --select-multi-item-l-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;
+    }
   }
 }