@itcase/ui 1.0.91 → 1.0.93

package/dist/constants.js

@@ -2,6 +2,7 @@
 
 var alignDirection = require('./constants/componentProps/alignDirection.js');
 var align = require('./constants/componentProps/align.js');
+var alignment = require('./constants/componentProps/alignment.js');
 var borderColorHover = require('./constants/componentProps/borderColorHover.js');
 var borderColor = require('./constants/componentProps/borderColor.js');
 var borderType = require('./constants/componentProps/borderType.js');
@@ -9,8 +10,8 @@ var borderWidth = require('./constants/componentProps/borderWidth.js');
 var captionPosition = require('./constants/componentProps/captionPosition.js');
 var direction = require('./constants/componentProps/direction.js');
 var emojiSize = require('./constants/componentProps/emojiSize.js');
-var fillHover = require('./constants/componentProps/fillHover.js');
 var fillGradient = require('./constants/componentProps/fillGradient.js');
+var fillHover = require('./constants/componentProps/fillHover.js');
 var fill = require('./constants/componentProps/fill.js');
 var fillType = require('./constants/componentProps/fillType.js');
 var flexAlign = require('./constants/componentProps/flexAlign.js');
@@ -23,8 +24,8 @@ var gridJustifySelf = require('./constants/componentProps/gridJustifySelf.js');
 var height = require('./constants/componentProps/height.js');
 var horizontalContentAlign = require('./constants/componentProps/horizontalContentAlign.js');
 var horizontalResizeMode = require('./constants/componentProps/horizontalResizeMode.js');
-var iconSize = require('./constants/componentProps/iconSize.js');
 var iconFillSize = require('./constants/componentProps/iconFillSize.js');
+var iconSize = require('./constants/componentProps/iconSize.js');
 var itemColor = require('./constants/componentProps/itemColor.js');
 var position = require('./constants/componentProps/position.js');
 var resizeMode = require('./constants/componentProps/resizeMode.js');
@@ -57,6 +58,7 @@ var wrap = require('./constants/componentProps/wrap.js');
 
 exports.alignDirectionProps = alignDirection.default;
 exports.alignProps = align.default;
+exports.alignmentProps = alignment.default;
 exports.borderColorHoverProps = borderColorHover.default;
 exports.borderColorProps = borderColor.default;
 exports.borderTypeProps = borderType.default;
@@ -64,8 +66,8 @@ exports.borderWidthProps = borderWidth.default;
 exports.captionPositionProps = captionPosition.default;
 exports.directionProps = direction.default;
 exports.emojiSizeProps = emojiSize.default;
-exports.fillHoverProps = fillHover.default;
 exports.fillGradientProps = fillGradient.default;
+exports.fillHoverProps = fillHover.default;
 exports.fillProps = fill.default;
 exports.fillTypeProps = fillType.default;
 exports.flexAlignProps = flexAlign.default;
@@ -78,8 +80,8 @@ exports.gridJustifySelfProps = gridJustifySelf.default;
 exports.heightProps = height.default;
 exports.horizontalContentAlignProps = horizontalContentAlign.default;
 exports.horizontalResizeModeProps = horizontalResizeMode.default;
-exports.iconSizeProps = iconSize.default;
 exports.iconFillSizeProps = iconFillSize.default;
+exports.iconSizeProps = iconSize.default;
 exports.itemColorProps = itemColor.default;
 exports.positionProps = position.default;
 exports.resizeModeProps = resizeMode.default;

package/dist/css/components/Accordion/Accordion.css

@@ -46,7 +46,6 @@
 }
 .accordion-item {
   min-width: 170px;
-  padding: 10px 12px;
   display: flex;
   flex-flow: row wrap;
   gap: 8px;
@@ -65,17 +64,27 @@
 .accordion-item {
   &_shape {
     &_rounded {
-      border-radius: var(--accordion-item-shape-rounded, 12px);
+      border-radius: var(--accordion-item-shape-rounded, 100px);
     }
-    &_circular {
-      border-radius: 50%;
+  }
+}
+.accordion-item {
+  &_size {
+    @each $size in xs, s, m, l, xl, xxl {
+      &_$(size) {
+        padding: var(--accordion-item-size-$(size)-padding);
+      }
     }
   }
 }
 .accordion-item {
   &&_state_open {
     ^&__icon {
-      transform: rotate(90deg);
+      transform: rotate(180deg);
     }
   }
 }
+:root {
+  --accordion-item-size-xs-padding: 10px 8px;
+  --accordion-item-size-l-padding: 14px 12px;
+}

package/dist/css/components/Cell/Cell.css

@@ -68,7 +68,14 @@
 .cell {
   &_reverse {
     ^&__wrapper {
-      flex-direction: column-reverse;
+      &_direction {
+        &_horizontal {
+          flex-direction: row-reverse;
+        }
+        &_vertical {
+          flex-direction: column-reverse;
+        }
+      }
     }
   }
 }

package/dist/css/components/Icon/Icon.css

@@ -1,5 +1,6 @@
 .icon {
   &__item {
+    position: relative;
     display: flex;
     & svg {
       transition: var(--icon-transition);
@@ -143,6 +144,13 @@
     }
   }
 }
+.icon {
+  &__tooltip {
+    min-width: 200px;
+    padding: 8px;
+    border-radius: 8px;
+  }
+}
 :root {
   --icon-transition: all 0.2s ease 0s;
   --icon-size-24-badge-position: 12px, 12px;

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

@@ -27,10 +27,10 @@
   &_set {
     &_float {
       width: 100%;
-      padding: var(--notification-item-set-float-padding, 12px 16px);
       border-radius: var(--notification-item-set-float-border-radius, 8px);
       @mixin elevation-8;
       ^^&-wrapper {
+        padding: var(--notification-item-set-float-padding, 12px 16px);
         display: flex;
         flex-direction: column;
         gap: 4px;
@@ -43,7 +43,7 @@
     &_top {
       width: 100%;
       ^^&-wrapper {
-        padding: var(--notification-item-set-top-padding, 12px 0);
+        padding: var(--notification-item-set-top-padding, 12px 16px);
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -57,10 +57,10 @@
   &_set {
     &_form {
       width: 100%;
-      padding: var(--notification-item-set-form-padding, 12px 16px);
       border-radius: var(--notification-item-set-form-border-radius, 8px);
       ^^&-wrapper {
         text-align: left;
+        padding: var(--notification-item-set-form-padding, 12px 16px);
         display: flex;
         flex-direction: column;
         gap: 4px;
@@ -73,13 +73,13 @@
     &_toast {
       width: 100%;
       background: var(--color-surface-primary);
-      padding: var(--notification-item-set-toast-padding, 12px 16px);
       border-radius: var(--notification-item-set-toast-border-radius, 8px);
       display: flex;
       flex-direction: column;
       gap: 24px;
       @mixin elevation-8;
       ^^&-wrapper {
+        padding: var(--notification-item-set-toast-padding, 12px 16px);
         display: flex;
         flex-direction: column;
         gap: 4px;
@@ -134,8 +134,8 @@
         }
         ^^^&-close {
           position: absolute;
-          top: 0;
-          right: 0;
+          top: 12px;
+          right: 16px;
         }
       }
     }

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

@@ -2,10 +2,10 @@
   &_set {
     &_float {
       width: 100%;
-      padding: var(--notification-item-set-float-padding, 12px 16px);
       border-radius: var(--notification-item-set-float-border-radius, 8px);
       @mixin elevation-8;
       ^^&-wrapper {
+        padding: var(--notification-item-set-float-padding, 12px 16px);
         display: flex;
         flex-direction: column;
         gap: 4px;

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

@@ -2,10 +2,10 @@
   &_set {
     &_form {
       width: 100%;
-      padding: var(--notification-item-set-form-padding, 12px 16px);
       border-radius: var(--notification-item-set-form-border-radius, 8px);
       ^^&-wrapper {
         text-align: left;
+        padding: var(--notification-item-set-form-padding, 12px 16px);
         display: flex;
         flex-direction: column;
         gap: 4px;

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

@@ -3,13 +3,13 @@
     &_toast {
       width: 100%;
       background: var(--color-surface-primary);
-      padding: var(--notification-item-set-toast-padding, 12px 16px);
       border-radius: var(--notification-item-set-toast-border-radius, 8px);
       display: flex;
       flex-direction: column;
       gap: 24px;
       @mixin elevation-8;
       ^^&-wrapper {
+        padding: var(--notification-item-set-toast-padding, 12px 16px);
         display: flex;
         flex-direction: column;
         gap: 4px;

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

@@ -3,7 +3,7 @@
     &_top {
       width: 100%;
       ^^&-wrapper {
-        padding: var(--notification-item-set-top-padding, 12px 0);
+        padding: var(--notification-item-set-top-padding, 12px 16px);
         display: flex;
         flex-direction: column;
         justify-content: center;

package/dist/css/components/Notification/css/__item/notification__item_type_close-button.css

@@ -8,8 +8,8 @@
         }
         ^^^&-close {
           position: absolute;
-          top: 0;
-          right: 0;
+          top: 12px;
+          right: 16px;
         }
       }
     }

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

@@ -70,7 +70,6 @@
           transition: color 0.5s ease;
           cursor: pointer;
           &-text {
-            @mixin word-wrap;
           }
         }
       }

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

@@ -142,6 +142,7 @@
       display: flex;
       align-items: center;
       align-self: center;
+      gap: 8px;
       cursor: pointer;
       @media (--mobile) {
         align-items: flex-start;

package/dist/css/components/Select/css/__indicators/select__indicators.css

@@ -4,6 +4,7 @@
       display: flex;
       align-items: center;
       align-self: center;
+      gap: 8px;
       cursor: pointer;
       @media (--mobile) {
         align-items: flex-start;

package/dist/css/components/Tooltip/Tooltip.css

@@ -1,4 +1,104 @@
-/* @import './css/tooltip.css';
+.tooltip {
+  position: relative;
+  display: flex;
+  animation: 0.5s tooltipShowAnimation ease;
+}
 
-@import './css/tooltip_size.css';
-@import './css/tooltip_shape.css'; */
+@keyframes tooltipShowAnimation {
+  0% {
+    visibility: hidden;
+    opacity: 0%;
+  }
+  100% {
+    visibility: visible;
+    opacity: 100%;
+  }
+}
+
+.tooltip {
+  &_size {
+    @each $size in s, m, l {
+      &_$(size) {
+        max-width: 400px;
+        padding: var(--tooltip-size-$(size)-padding);
+        ^^&__inner {
+          display: flex;
+          flex-flow: column nowrap;
+          gap: var(--tooltip-size-$(size)-gap);
+        }
+      }
+    }
+  }
+}
+
+.tooltip {
+  &_shape {
+    &_rounded {
+      border-radius: var(--tooltip-shape-rounded-default, 12px);
+    }
+  }
+}
+
+.tooltip {
+  &_type_arrow {
+    ^&__inner {
+      position: relative;
+      background-color: inherit;
+    }
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      background-color: inherit;
+      width: var(--tooltip-arrow-width);
+      height: var(--tooltip-arrow-height);
+      border-radius: var(--tooltip-arrow-radius);
+      z-index: -1;
+    }
+  }
+}
+
+.tooltip {
+  &_arrow_position {
+    &_top {
+      &::after {
+        top: 0;
+        left: 50%;
+        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);
+      }
+    }
+    &_right {
+      &::after {
+        top: 50%;
+        right: 0;
+        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);
+      }
+    }
+  }
+}
+
+: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;
+}

package/dist/css/styles/alignment/alignment.css

@@ -0,0 +1,54 @@
+.alignment {
+  &_top {
+    &-left {
+      position: absolute;
+      right: 100%;
+      bottom: 100%;
+      transform: translate(calc(0% - 12px), calc(0% - 12px));
+    }
+    &-center {
+      position: absolute;
+      left: 50%;
+      bottom: 100%;
+      transform: translate(-50%, calc(0% - 12px));
+    }
+    &-right {
+      position: absolute;
+      left: 100%;
+      bottom: 100%;
+      transform: translate(calc(0% + 12px), calc(0% - 12px));
+    }
+  }
+  &_bottom {
+    &-left {
+      position: absolute;
+      top: 100%;
+      right: 100%;
+      transform: translate(calc(0% - 12px), calc(0% + 12px));
+    }
+    &-center {
+      position: absolute;
+      left: 50%;
+      top: 100%;
+      transform: translate(-50%, calc(0% + 12px));
+    }
+    &-right {
+      position: absolute;
+      left: 100%;
+      top: 100%;
+      transform: translate(calc(0% + 12px), calc(0% + 12px));
+    }
+  }
+  &_left-center {
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    transform: translate(calc(0% - 12px), -50%);
+  }
+  &_right-center {
+    position: absolute;
+    left: 100%;
+    top: 50%;
+    transform: translate(calc(0% + 12px), -50%);
+  }
+}

package/dist/css/styles/mediaqueries.css

@@ -1,23 +1,37 @@
 :root {
+
   --mobile-tiny: 15em; /* 240px */
+
   --mobile-small: 20em; /* 320px */
+
   --mobile-medium: 23.435em; /* 375px */
+
   --mobile-large: 25.875em; /* 414px */
+
   --mobile-extra-large: 30em; /* 480px */
+
   --mobile-super-extra-large: 40em; /* 640px */
+
   --tablet: 48em; /* 768px */
+
   --desktop-small: 60em; /* 960px */
+
   --desktop-medium: 64em; /* 1024px */
+
   --desktop-normal: 72.5em; /* 1160px */
+
   --desktop-large: 80em; /* 1280px */
+
   --desktop-extra-large: 90em; /* 1441px */
+
   --desktop-super-extra-large: 120em; /* 1920px */
+
   --desktop-huge: 160em; /* 560px */
 }
 
 @custom-media --warning (width <= 15em);
 
-@custom-media --mobile (width >= 15em) and (width <  48em);
+@custom-media --mobile (width >= 15em) and (width < 48em);
 
 @custom-media --mobile-tiny (width >= 15em) and (width < 20em);
 
@@ -25,17 +39,17 @@
 
 @custom-media --mobile-medium (width >= 23.435em) and (width < 25.875em);
 
-@custom-media --mobile-standart (width >=  25.875em)) and (width < 30em);
+@custom-media --mobile-standart (width >= 25.875em) and (width < 30em);
 
 @custom-media --mobile-large (width >= 30em) and (width < 40em);
 
-@custom-media --mobile-huge (width >= 40em) and (width <  48em);
+@custom-media --mobile-huge (width >= 40em) and (width < 48em);
 
-@custom-media --tablet (width >=  48em) and (width < 60em);
+@custom-media --tablet (width >= 48em) and (width < 60em);
 
-@custom-media --tablet-small (width >= 40em) and (width <   48em);
+@custom-media --tablet-small (width >= 40em) and (width < 48em);
 
-@custom-media --tablet-large (width >=  48em) and (width < 60em);
+@custom-media --tablet-large (width >= 48em) and (width < 60em);
 
 @custom-media --desktop (width >= 60em);
 
@@ -49,13 +63,13 @@
 
 @custom-media --desktop-large (width >= 90em) and (width < 120em);
 
-@custom-media --desktop-huge (width >=  120em) and (width < 160em);
+@custom-media --desktop-huge (width >= 120em) and (width < 160em);
 
 @custom-media --desktop-super-huge (width >= 160em);
 
-@custom-media --landscape (orientation:landscape) and (width >=  15em) and (width < 60em);
+@custom-media --landscape (orientation: landscape) and (width >= 15em) and (width < 60em);
 
-@custom-media --portrait (orientation:portrait) and (width >=  15em) and (width < 60em);
+@custom-media --portrait (orientation: portrait) and (width >= 15em) and (width < 60em);
 
 @custom-media --touch (hover: none) and (pointer: coarse);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.91",
+  "version": "1.0.93",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",