@itcase/ui 1.0.10 → 1.0.13

package/dist/css/components/Empty/Empty.css

@@ -0,0 +1,13 @@
+.empty {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+  &__message {
+    text-align: center;
+  }
+  &__button {
+    margin-top: auto;
+  }
+}

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

@@ -7,18 +7,26 @@
   box-shadow: none;
   outline: 0;
   position: relative;
+  caret-color: var(--input-caret-color);
   &:focus {
     outline: none;
   }
+  &:hover {
+    border: solid 1px var(--input-state-hover-border);
+    background: var(--input-state-hover-background);
+  }
   &&_state {
     &_success {
-      border: solid 1px var(--color-success-border-primary);
+      border: solid 1px var(--input-state-success-border);
+      background: var(--input-state-success-background);
     }
     &_error {
-      border: solid 1px var(--color-error-border-primary);
+      border: solid 1px var(--input-state-error-border);
+      background: var(--input-state-error-background);
     }
     &_focus {
-      background: var(--color-surface-primary);
+      border: solid 1px var(--input-state-focus-border);
+      background: var(--input-state-focus-background);
     }
   }
 }
@@ -38,7 +46,7 @@
 }
 .input {
   &&_size {
-    @each $size in xs, s, m, l, xl, xxl {
+    @each $size in xs, s, m, l, xl, xxl, normal, tiny, compact, large {
       &_$(size) {
         padding: var(--input-size-$(size)-padding);
       }

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

@@ -93,3 +93,19 @@
     }
   }
 }
+.segmented {
+  &_width {
+    &_fill {
+      width: 100%;
+      ^^&__wrapper {
+        flex: 1;
+        &-inner {
+          flex: 1;
+          ^^^^&__item {
+            flex: 1;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -40,7 +40,10 @@
           padding: var(--select-size-$(size)-padding);
         }
         ^^&__menu {
-          &-notice  {
+          &-notice {
+            padding: var(--select-size-$(size)-padding);
+          }
+          &-group-heading {
             padding: var(--select-size-$(size)-padding);
           }
         }
@@ -150,20 +153,24 @@
     left: 0;
     top: 100%;
     z-index: 100000;
+    &-group-heading {
+      z-index: 100000;
+    }
     &-list {
       overflow-y: scroll;
       max-height: 240px;
       &-item {
         width: 100%;
+        &_option {
+          z-index: 100000;
+        }
       }
+
       &--is-multi {
         ^^^&__option {
           &--is-selected {
           }
           &--is-focused {
-            background: none !important;
-            /* display: flex;
-            justify-content: center; */
             &:hover {
               background: #eee;
               cursor: pointer;

package/dist/css/components/Select/css/__menu/select__menu.css

@@ -7,20 +7,24 @@
     left: 0;
     top: 100%;
     z-index: 100000;
+    &-group-heading {
+      z-index: 100000;
+    }
     &-list {
       overflow-y: scroll;
       max-height: 240px;
       &-item {
         width: 100%;
+        &_option {
+          z-index: 100000;
+        }
       }
+
       &--is-multi {
         ^^^&__option {
           &--is-selected {
           }
           &--is-focused {
-            background: none !important;
-            /* display: flex;
-            justify-content: center; */
             &:hover {
               background: #eee;
               cursor: pointer;

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

@@ -1,5 +1,5 @@
 /**
- * Swiper 9.4.1
+ * Swiper 10.0.4
  * 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: June 13, 2023
+ * Released on: July 8, 2023
  */
 
 /* FONT_START */
@@ -29,12 +29,20 @@
   */
 }
 
-.swiper,
-swiper-container {
+:host {
+  position: relative;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 1;
+}
+
+.swiper {
   margin-left: auto;
   margin-right: auto;
   position: relative;
   overflow: hidden;
+  overflow: clip;
   list-style: none;
   padding: 0;
   /* Fix of Webkit flickering */
@@ -58,6 +66,7 @@ swiper-container {
 }
 
 .swiper-android .swiper-slide,
+.swiper-ios .swiper-slide,
 .swiper-wrapper {
   transform: translate3d(0px, 0, 0);
 }
@@ -70,8 +79,7 @@ swiper-container {
   touch-action: pan-x;
 }
 
-.swiper-slide,
-swiper-slide {
+.swiper-slide {
   flex-shrink: 0;
   width: 100%;
   height: 100%;
@@ -117,49 +125,10 @@ swiper-slide {
 }
 
 .swiper-3d .swiper-slide,
-.swiper-3d .swiper-slide-shadow,
-.swiper-3d .swiper-slide-shadow-left,
-.swiper-3d .swiper-slide-shadow-right,
-.swiper-3d .swiper-slide-shadow-top,
-.swiper-3d .swiper-slide-shadow-bottom,
 .swiper-3d .swiper-cube-shadow {
   transform-style: preserve-3d;
 }
 
-.swiper-3d .swiper-slide-shadow,
-.swiper-3d .swiper-slide-shadow-left,
-.swiper-3d .swiper-slide-shadow-right,
-.swiper-3d .swiper-slide-shadow-top,
-.swiper-3d .swiper-slide-shadow-bottom {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.swiper-3d .swiper-slide-shadow {
-  background: rgba(0, 0, 0, 0.15);
-}
-
-.swiper-3d .swiper-slide-shadow-left {
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-right {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-top {
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-bottom {
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
 /* CSS Mode */
 
 .swiper-css-mode > .swiper-wrapper {
@@ -178,11 +147,11 @@ swiper-slide {
   scroll-snap-align: start start;
 }
 
-.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
+.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
   scroll-snap-type: x mandatory;
 }
 
-.swiper-vertical.swiper-css-mode > .swiper-wrapper {
+.swiper-css-mode.swiper-vertical > .swiper-wrapper {
   scroll-snap-type: y mandatory;
 }
 
@@ -194,37 +163,80 @@ swiper-slide {
   scroll-snap-align: none;
 }
 
-.swiper-centered > .swiper-wrapper::before {
+.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
   content: '';
   flex-shrink: 0;
   order: 9999;
 }
 
-.swiper-centered > .swiper-wrapper > .swiper-slide {
+.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
   scroll-snap-align: center center;
   scroll-snap-stop: always;
 }
 
-.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
   margin-inline-start: var(--swiper-centered-offset-before);
 }
 
-.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
   height: 100%;
   min-height: 1px;
   width: var(--swiper-centered-offset-after);
 }
 
-.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
   margin-block-start: var(--swiper-centered-offset-before);
 }
 
-.swiper-centered.swiper-vertical > .swiper-wrapper::before {
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
   width: 100%;
   min-width: 1px;
   height: var(--swiper-centered-offset-after);
 }
 
+/* Slide styles start */
+
+/* 3D Shadows */
+
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.swiper-3d .swiper-slide-shadow {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.swiper-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
 .swiper-lazy-preloader {
   width: 42px;
   height: 42px;
@@ -242,7 +254,6 @@ swiper-slide {
 }
 
 .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
-swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
 .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
   animation: swiper-preloader-spin 1s infinite linear;
 }
@@ -264,6 +275,8 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   }
 }
 
+/* Slide styles end */
+
 .swiper-virtual .swiper-slide {
   -webkit-backface-visibility: hidden;
   transform: translateZ(0);
@@ -330,6 +343,37 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   display: none !important;
 }
 
+.swiper-button-prev svg,
+.swiper-button-next svg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform-origin: center;
+}
+
+.swiper-rtl .swiper-button-prev svg,
+.swiper-rtl .swiper-button-next svg {
+  transform: rotate(180deg);
+}
+
+.swiper-button-prev,
+.swiper-rtl .swiper-button-next {
+  left: var(--swiper-navigation-sides-offset, 10px);
+  right: auto;
+}
+
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+  right: var(--swiper-navigation-sides-offset, 10px);
+  left: auto;
+}
+
+.swiper-button-lock {
+  display: none;
+}
+
+/* Navigation font start */
+
 .swiper-button-prev:after,
 .swiper-button-next:after {
   font-family: swiper-icons;
@@ -340,12 +384,6 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   line-height: 1;
 }
 
-.swiper-button-prev,
-.swiper-rtl .swiper-button-next {
-  left: var(--swiper-navigation-sides-offset, 10px);
-  right: auto;
-}
-
 .swiper-button-prev:after,
 .swiper-rtl .swiper-button-next:after {
   content: 'prev';
@@ -362,9 +400,7 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   content: 'next';
 }
 
-.swiper-button-lock {
-  display: none;
-}
+/* Navigation font end */
 
 :root {
   /*
@@ -528,8 +564,7 @@ button.swiper-pagination-bullet {
   transition: 200ms transform, 200ms left;
 }
 
-.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
-:host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   transition: 200ms transform, 200ms right;
 }
 
@@ -544,7 +579,6 @@ button.swiper-pagination-bullet {
 .swiper-pagination-progressbar {
   background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
   position: absolute;
-  /*ADD_HOST*/
 }
 
 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
@@ -676,8 +710,7 @@ button.swiper-pagination-bullet {
 
 /* a11y */
 
-.swiper .swiper-notification,
-swiper-container .swiper-notification {
+.swiper .swiper-notification {
   position: absolute;
   left: 0;
   top: 0;
@@ -748,21 +781,11 @@ swiper-container .swiper-notification {
 
 .swiper-cube .swiper-slide-active,
 .swiper-cube .swiper-slide-next,
-.swiper-cube .swiper-slide-prev,
-.swiper-cube .swiper-slide-next + .swiper-slide {
+.swiper-cube .swiper-slide-prev {
   pointer-events: auto;
   visibility: visible;
 }
 
-.swiper-cube .swiper-slide-shadow-top,
-.swiper-cube .swiper-slide-shadow-bottom,
-.swiper-cube .swiper-slide-shadow-left,
-.swiper-cube .swiper-slide-shadow-right {
-  z-index: 0;
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-}
-
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
   left: 0;
@@ -784,6 +807,24 @@ swiper-container .swiper-notification {
   filter: blur(50px);
 }
 
+.swiper-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+
+/* Cube slide shadows start */
+
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+
+/* Cube slide shadows end */
+
 .swiper-flip {
   overflow: visible;
 }
@@ -804,15 +845,19 @@ swiper-container .swiper-notification {
   pointer-events: auto;
 }
 
-.swiper-flip .swiper-slide-shadow-top,
-.swiper-flip .swiper-slide-shadow-bottom,
-.swiper-flip .swiper-slide-shadow-left,
-.swiper-flip .swiper-slide-shadow-right {
+/* Flip slide shadows start */
+
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
   z-index: 0;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
 }
 
+/* Flip slide shadows end */
+
 .swiper-creative .swiper-slide {
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;

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

@@ -17,11 +17,11 @@
     &_$(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  {
-            &$(alpha) {
-              background: var(--color-$(type)-primary$(opacity));
-            }
+        @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

@@ -2,11 +2,9 @@
   &_active {
     @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
       &_$(type) {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active  {
           &-$(color) {
-            &:hover {
-              background: var(--color-$(type)-$(color));
-            }
+            background: var(--color-$(type)-$(color));
           }
         }
       }
@@ -14,7 +12,9 @@
     @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {
       &_$(type) {
         &-primary {
-          background: var(--color-$(type)-primary);
+          &-active {
+            background: var(--color-$(type)-primary-active);
+          }
         }
       }
     }