@koobiq/components 19.8.0 → 20.0.0

package/tabs/_tabs-common.scss

@@ -81,6 +81,28 @@
         bottom: -10px;
     }
 
+    &.kbq-tab-label_icon-only {
+        width: var(--kbq-size-3xl);
+        height: var(--kbq-size-3xl);
+        padding: 0 !important;
+        margin-inline: var(--kbq-size-xs);
+        box-sizing: content-box;
+
+        // Keep the space between icon-only tabs clickable after adding margins.
+        &:not(.kbq-tab-label_vertical):after {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            // Absolute offsets are calculated from the padding box, so we add
+            // focus outline width to fully cover the visual margin gap.
+            left: calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+            right: calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+            background: transparent;
+        }
+    }
+
     &.kbq-tab-label_vertical {
         justify-content: flex-start;
 
@@ -90,6 +112,11 @@
             text-overflow: ellipsis;
             white-space: nowrap;
         }
+
+        &.kbq-tab-label_icon-only {
+            margin-inline: 0;
+            justify-content: center;
+        }
     }
 }
 
@@ -102,7 +129,6 @@
         display: none;
         justify-content: center;
         align-items: center;
-        cursor: pointer;
         z-index: 2;
         -webkit-tap-highlight-color: transparent;
         touch-action: none;
@@ -111,6 +137,10 @@
         .kbq-tab-header__pagination-controls_enabled & {
             display: flex;
         }
+
+        &:not(.kbq-disabled) {
+            cursor: pointer;
+        }
     }
 
     .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {

package/tabs/_tabs-theme.scss

@@ -14,7 +14,7 @@
 @mixin kbq-tab-item-style($type, $sub-type) {
     @include kbq-tab-item-state($type, $sub-type, default);
 
-    &:hover:not(.kbq-disabled) {
+    &:is(:hover, .kbq-hover):not(.kbq-disabled) {
         @include kbq-tab-item-state($type, $sub-type, states-hover);
     }
 
@@ -29,7 +29,7 @@
             background: none;
         }
 
-        &:hover {
+        &:is(:hover, .kbq-hover) {
             @include kbq-tab-item-state($type, $sub-type, states-selected-hover);
 
             &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {