@itcase/ui 1.8.25 → 1.8.29

package/dist/css/components/Dropdown/Dropdown.css

@@ -92,7 +92,7 @@
 .dropdown {
   &__item {
     &_size {
-      @each $size in xs, s, l {
+      @each $size in l, s, xs {
         &_$(size) {
           ^^&-wrapper {
             gap: var(--dropdown-item-size-$(size)-gap);
@@ -109,7 +109,7 @@
       min-width: var(--dropdown-item-width-fixed);
     }
     &_hug {
-      min-width: 62px;
+      min-width: 100px;
       display: inline-flex;
     }
     &_fill {
@@ -119,32 +119,17 @@
   }
 }
 :root {
-  /* Default */
-  --dropdown-default-padding: 0;
-  --dropdown-default-gap: 0;
-
-  /* Common */
-  --dropdown-shape-rounded: 0;
-  --dropdown-item-shape-rounded: 0;
-  --dropdown-item-width-fixed: 0;
-  --dropdown-compact-padding: 0;
-  --dropdown-compact-gap: 0;
-
-  /* Sizes XS */
-  --dropdown-item-size-xs-padding: 0;
-  --dropdown-item-size-xs-gap: 8px;
+  /* Sizes L */
+  --dropdown-item-size-l-padding: 8px 12px;
+  --dropdown-item-size-l-gap: 12px;
 
   /* Sizes M */
-  --dropdown-item-size-s-padding: 0px;
+  --dropdown-item-size-s-padding: 6px 8px;
   --dropdown-item-size-s-gap: 0px;
 
-  /* Sizes L */
-  --dropdown-item-size-l-padding: 10px 12px;
-  --dropdown-item-size-l-gap: 12px;
-
-  /* Normal */
-  --dropdown-normal-padding: 16px;
-  --dropdown-normal-gap: 16px;
+  /* Sizes XS */
+  --dropdown-item-size-xs-padding: 4px 8px;
+  --dropdown-item-size-xs-gap: 8px;
 }
 @keyframes dropDownAnimationOpen {
   0% {

package/dist/css/components/Flex/Flex.css

@@ -63,7 +63,9 @@
   }
 }
 .flex {
-  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly, flexStart, flexEnd, center, spaceBetween, spaceAround, spaceEvenly {
+  @each $val in flex-start, flex-end, center, space-between, space-around,
+    space-evenly, flexStart, flexEnd, center, spaceBetween, spaceAround,
+    spaceEvenly {
     &_justify-content_$(val) {
       & > div {
         justify-content: $(val);
@@ -159,7 +161,7 @@
   &__item {
     &_shape {
       &_rounded {
-        border-radius: var(--flex-item-shape-rounded, 12px);
+        border-radius: var(--flex-item-shape-rounded);
       }
       &_circular {
         border-radius: 50%;

package/dist/css/components/Flex/css/__item/flex__item_shape.css

@@ -2,7 +2,7 @@
   &__item {
     &_shape {
       &_rounded {
-        border-radius: var(--flex-item-shape-rounded, 12px);
+        border-radius: var(--flex-item-shape-rounded);
       }
       &_circular {
         border-radius: 50%;

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

@@ -1,5 +1,4 @@
 .grid {
-  width: 100%;
   position: relative;
   display: grid;
   &__before {
@@ -54,14 +53,7 @@
     19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37,
     38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56,
     57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,
-    76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94,
-    95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110,
-    111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125,
-    126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140,
-    141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155,
-    156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170,
-    171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185,
-    186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200 {
+    76, 77, 78, 79, 80 {
     &_columns_$(val) {
       grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
@@ -73,36 +65,9 @@
   }
 }
 .grid {
-  @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
-    24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47,
-    48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71,
-    72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95,
-    96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115,
-    116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134,
-    135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153,
-    154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172,
-    173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191,
-    192, 193, 194, 195, 196, 197, 198, 199, 200 {
-    &_row-gap_$(val) {
-      & > ^&__wrapper {
-        & > div {
-          row-gap: $(val) px;
-        }
-      }
-    }
-    &_column-gap_$(val) {
-      & > ^&__wrapper {
-        & > div {
-          column-gap: $(val) px;
-        }
-      }
-    }
-  }
-}
-.grid {
-  @each $val in auto, legacy, normal, stretch, center, start, end, left, right, space-around,
-    space-between, space-evenly, safe, center, unsafe center, self-start, self-end, left, right,
-    baseline, first baseline, last baseline {
+  @each $val in auto, legacy, normal, stretch, center, start, end, left, right,
+    space-around, space-between, space-evenly, safe, center, unsafe center,
+    self-start, self-end, left, right, baseline, first baseline, last baseline {
     &_justify-content_$(val) {
       justify-content: $(val);
     }
@@ -116,14 +81,7 @@
     19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37,
     38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56,
     57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,
-    76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94,
-    95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110,
-    111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125,
-    126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140,
-    141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155,
-    156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170,
-    171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185,
-    186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200 {
+    76, 77, 78, 79, 80 {
     &_rows_$(val) {
       grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
@@ -145,30 +103,7 @@
 .grid {
   &_shape {
     &_rounded {
-      border-radius: var(--grid-shape-rounded, 12px);
-    }
-  }
-}
-.grid {
-  &&_state {
-    &_system {
-      ^^&__wrapper {
-        padding: 0 var(--grid-system-margin);
-        &-inner {
-          grid-template-columns: 1fr repeat(var(--grid-system-columns), var(--grid-system-gutter) 1fr);
-        }
-      }
-    }
-  }
-}
-.grid {
-  &&_type {
-    &_surface {
-      &-secondary {
-        ^^^&__wrapper {
-          background: var(--color-surface-secondary);
-        }
-      }
+      border-radius: var(--grid-shape-rounded);
     }
   }
 }
@@ -201,18 +136,7 @@
 .grid {
   &__item {
     @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
-      18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35,
-      36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53,
-      54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71,
-      72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89,
-      90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106,
-      107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121,
-      122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136,
-      137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151,
-      152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166,
-      167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181,
-      182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196,
-      197, 198, 199, 200 {
+      18, 19, 20, 21, 22, 23, 24 {
       &_column {
         &-start_$(val) {
           grid-column-start: $(val);

package/dist/css/components/Grid/css/__item/grid__item_column.css

@@ -1,18 +1,7 @@
 .grid {
   &__item {
     @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
-      18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35,
-      36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53,
-      54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71,
-      72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89,
-      90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106,
-      107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121,
-      122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136,
-      137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151,
-      152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166,
-      167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181,
-      182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196,
-      197, 198, 199, 200 {
+      18, 19, 20, 21, 22, 23, 24 {
       &_column {
         &-start_$(val) {
           grid-column-start: $(val);

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

@@ -15,7 +15,8 @@
 }
 
 .group {
-  @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 {
+  @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
+    19, 20, 21, 22, 23, 24 {
     &&_columns_$(val) {
       display: grid;
       grid-template-columns: repeat($(val), 1fr);
@@ -58,11 +59,12 @@
 .group {
   &_icon_fill {
     &_hover {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+        error, success, warning, info, danger, gradient, disabled, hover {
         &_$(type) {
           &-item {
-            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
-              disabled, hover {
+            @each $color in primary, secondary, tertiary, quaternary, accent,
+              disabled, hover, inverse {
               &-$(color) {
                 &:hover {
                   & svg {
@@ -82,7 +84,7 @@
 .group {
   &_shape {
     &_rounded {
-      border-radius: var(--group-shape-rounded, 12px);
+      border-radius: var(--group-shape-rounded);
     }
     &_circular {
       border-radius: 50%;
@@ -93,14 +95,18 @@
 .group {
   &_stacking {
     &_first-on-top {
-      @each $order, $indexValue in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20), (20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1) {
+      @each $order,
+        $indexValue in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15),
+        (15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1) {
         :nth-child($order) {
           z-index: $indexValue;
         }
       }
     }
     &_last-on-top {
-      @each $order, $indexValue in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20), (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20) {
+      @each $order,
+        $indexValue in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15),
+        (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15) {
         :nth-child($order) {
           z-index: $indexValue;
         }
@@ -112,12 +118,13 @@
 .group {
   &_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, surface,
+        error, success, warning, info, danger, gradient, disabled, hover,
+        inverse {
         &_$(type) {
           &-text {
-            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
-              disabled, hover {
+            @each $color in primary, secondary, tertiary, quaternary, accent,
+              disabled, hover, inverse {
               &-$(color) {
                 &:hover {
                   & .text,
@@ -140,6 +147,42 @@
           }
         }
       }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomagranate, 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, cerulian, 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) {
+          &-text {
+            &-$(color) {
+              &:hover {
+                & .text,
+                & .title,
+                & .link {
+                  color: var(--color-palette-$(palette));
+                }
+              }
+              &-hover {
+                &:hover {
+                  & .text,
+                  & .title,
+                  & .link {
+                    color: var(--color-palette-$(palette));
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 }

package/dist/css/components/HeroTitle/HeroTitle.css

@@ -5,16 +5,19 @@
 }
 .hero-title {
   &_skeleton {
-    color: transparent;
+    background-size: 200% !important;
+    border: solid 2px red;
+    border: none;
+    animation: heroTitleSkeleton 3s infinite linear !important;
     background-image: linear-gradient(
       90deg,
-      var(--color-surface-secondary),
-      var(--color-surface-tertiary),
-      var(--color-surface-secondary)
-    );
-    background-size: 200%;
-    border-radius: 6px;
-    animation: heroTitleSkeleton 3s infinite linear;
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
   }
 }
 @keyframes heroTitleSkeleton {
@@ -36,26 +39,27 @@
     }
   }
 }
-.hero-title {
-  &&_type {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error {
-      &_$(type) {
-        color: var(--color-$(type)-text-$(type));
-      }
-    }
-  }
-}
 .hero-title {
   &_direction {
     &_horizontal {
       display: flex;
       flex-direction: row;
-      align-items: flex-start;
+      align-items: center;
+      ^^&__wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
     }
     &_vertical {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+      ^^&__wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
     }
   }
 }

package/dist/css/components/Link/Link.css

@@ -30,7 +30,6 @@
     }
   }
 }
-/* stylelint-disable prettier/prettier */
 .link {
   &_shape {
     &_rounded {

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

@@ -1,7 +1,7 @@
 .notification {
 }
 .notification {
-  &&_type_global {
+  &&_global {
     background: none;
     padding: 0;
     position: fixed;
@@ -24,77 +24,39 @@
   }
 }
 .notification__item {
-  &_set {
-    &_float {
-      width: 100%;
-      border-radius: var(--notification-item-set-float-border-radius);
-      @mixin elevation-8;
-      ^^&-wrapper {
-        padding: var(--notification-item-set-float-padding);
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-      }
-    }
-  }
-}
-.notification__item {
-  &_set {
-    &_top {
-      width: 100%;
-      ^^&-wrapper {
-        padding: var(--notification-item-set-top-padding);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: 4px;
-      }
-    }
-  }
-}
-.notification__item {
-  &_set {
-    &_form {
-      width: 100%;
-      padding: var(--notification-item-set-form-padding);
-      border-radius: var(--notification-item-set-form-border-radius);
+  &_float {
+    width: 100%;
+    border-radius: var(--notification-item-set-float-border-radius);
+    @mixin elevation-8;
+    ^^&-wrapper {
+      padding: var(--notification-item-set-float-padding);
       display: flex;
       flex-direction: column;
-      gap: var(--notification-item-set-form-gap);
-      ^^&-wrapper {
-        text-align: left;
-        padding: var(--notification-item-set-form-wrapper-padding);
-        display: flex;
-        flex-direction: column;
-        gap: var(--notification-item-set-form-wrapper-gap);
-      }
+      gap: 4px;
     }
   }
 }
 .notification__item {
-  &_set {
-    &_toast {
-      width: 100%;
-      background: var(--color-surface-fill-primary);
-      border-radius: var(--notification-item-set-toast-border-radius);
+  &_toast {
+    width: 100%;
+    background: var(--color-surface-fill-primary);
+    border-radius: var(--notification-item-set-toast-border-radius);
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    @mixin elevation-8;
+    ^^&-wrapper {
+      padding: var(--notification-item-set-toast-padding);
       display: flex;
       flex-direction: column;
-      gap: 24px;
-      @mixin elevation-8;
-      ^^&-wrapper {
-        padding: var(--notification-item-set-toast-padding);
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-      }
+      gap: 4px;
     }
   }
 }
 .notification__item {
   &_status {
     &_success {
-      background: var(--color-success-fill-primary);
+      /* background: var(--color-success-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-success-text-secondary);
@@ -102,10 +64,10 @@
         ^^^&-text {
           color: var(--color-success-text-secondary);
         }
-      }
+      } */
     }
     &_error {
-      background: var(--color-error-fill-primary);
+      /* background: var(--color-error-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-error-text-secondary);
@@ -113,10 +75,10 @@
         ^^^&-text {
           color: var(--color-error-text-secondary);
         }
-      }
+      } */
     }
     &_warning {
-      background: var(--color-primary-fill-primary);
+      /* background: var(--color-primary-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-primary-text-primary);
@@ -124,10 +86,10 @@
         ^^^&-text {
           color: var(--color-primary-text-primary);
         }
-      }
+      } */
     }
     &_info {
-      background: var(--color-info-fill-primary);
+      /* background: var(--color-info-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-info-text-primary);
@@ -135,25 +97,54 @@
         ^^^&-text {
           color: var(--color-info-text-primary);
         }
-      }
+      } */
     }
   }
 }
 .notification__item {
-  &_type {
-    &_close-button {
-      ^^&-wrapper {
-        position: relative;
-        ^^^&-title {
-          margin-right: 40px;
-        }
-        ^^^&-close {
-          position: absolute;
-          top: 12px;
-          right: 16px;
-        }
-      }
+  min-width: 240px;
+  padding: 12px;
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+  &-wrapper {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr min-content;
+    ^&-title {
+      grid-row-start: 1;
     }
+    ^&-text {
+      grid-row-start: 2;
+    }
+    ^&-close {
+      grid-column-start: 2;
+      grid-row-start: 2 span;
+    }
+  }
+}
+.notification__item {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: notificationSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes notificationSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
   }
 }
 :root {

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

@@ -0,0 +1,22 @@
+.notification__item {
+  min-width: 240px;
+  padding: 12px;
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+  &-wrapper {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr min-content;
+    ^&-title {
+      grid-row-start: 1;
+    }
+    ^&-text {
+      grid-row-start: 2;
+    }
+    ^&-close {
+      grid-column-start: 2;
+      grid-row-start: 2 span;
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+.notification__item {
+  &_float {
+    width: 100%;
+    border-radius: var(--notification-item-set-float-border-radius);
+    @mixin elevation-8;
+    ^^&-wrapper {
+      padding: var(--notification-item-set-float-padding);
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+  }
+}