@koi-design/uxd-ui 14.0.4 → 14.0.6

package/styles/components/tabs/borderCard.less

@@ -3,23 +3,24 @@
     background-color: var(--color-background);
     box-shadow: var(--tabs-border-card-box-shadow);
     border-radius: var(--tabs-border-card-radius);
+    border: 1px solid var(--color-border-split);
   }
 
   &-border-card &-nav {
     &-bar {
-      background-color: var(--tabs-border-card-nav-background-color);
+      --tabs-nav-item-padding: 0 var(--space-2);
+
+      background-color: var(--color-background-secondary);
       padding: 0 var(--tabs-border-card-radius);
     }
 
     &-item {
-      height: var(--tabs-nav-card-item-height);
       margin: 0;
-      padding: var(--tabs-nav-card-item-padding-vertical) var(--tabs-nav-card-item-padding-horizontal);
-      transition: all var(--animation-time) var(--ease-in-out);
+      // transition: all var(--animation-time) var(--ease-in-out);
 
       &-active {
-        color: var(--tabs-nav-item-selected-color);
-        background: var(--tabs-nav-card-item-selected-background-color);
+        color: var(--primary-color);
+        background: var(--color-background);
       }
 
       &:hover {
@@ -30,14 +31,13 @@
         }
       }
 
-      &-closable {
-        .@{tabs-prefix-cls}-nav-item-content:has(.@{tabs-prefix-cls}-nav-item-close:hover) {
-          background-color: transparent;
-        }
+      .@{tabs-prefix-cls}-nav-item-content {
+        padding: 0;
       }
 
       &-disabled {
-        color: var(--color-disabled-font);
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
       }
     }
   }
@@ -62,7 +62,9 @@
   &-border-card&-top &-nav {
     &-item {
       &-active {
-        box-shadow: 1px 0 0 0 var(--tabs-nav-card-item-border-color) inset, -1px 0 0 0 var(--tabs-nav-card-item-border-color) inset;
+        border-radius: var(--tabs-border-card-radius) var(--tabs-border-card-radius) 0 0;
+        border-left: 1px solid var(--color-background);
+        border-right: 1px solid var(--color-background);
       }
     }
   }
@@ -70,7 +72,9 @@
   &-border-card&-bottom &-nav {
     &-item {
       &-active {
-        box-shadow: 1px 0 0 0 var(--tabs-nav-card-item-border-color) inset, -1px 0 0 0 var(--tabs-nav-card-item-border-color) inset;
+        border-radius: 0 0 var(--tabs-border-card-radius) var(--tabs-border-card-radius);
+        border-top: 1px solid var(--color-background);
+        border-bottom: 1px solid var(--color-background);
       }
     }
   }
@@ -78,7 +82,9 @@
   &-border-card&-left &-nav {
     &-item {
       &-active {
-        box-shadow: 0 1px 0 0 var(--tabs-nav-card-item-border-color) inset, 0 -1px 0 0 var(--tabs-nav-card-item-border-color) inset;
+        border-radius: var(--tabs-border-card-radius) 0 0 var(--tabs-border-card-radius);
+        border-top: 1px solid var(--color-background);
+        border-bottom: 1px solid var(--color-background);
       }
     }
   }
@@ -86,20 +92,10 @@
   &-border-card&-right &-nav {
     &-item {
       &-active {
-        box-shadow: 0 1px 0 0 var(--tabs-nav-card-item-border-color) inset, 0 -1px 0 0 var(--tabs-nav-card-item-border-color) inset;
+        border-radius: 0 var(--tabs-border-card-radius) var(--tabs-border-card-radius) 0;
+        border-top: 1px solid var(--color-background);
+        border-bottom: 1px solid var(--color-background);
       }
     }
   }
-
-  &-border-card&-small &-nav {
-    &-item {
-      height: var(--tabs-nav-card-item-height-small);
-    }
-  }
-
-  &-border-card&-large &-nav {
-    &-item {
-      height: var(--tabs-nav-card-item-height-large);
-    }
-  }
 }

package/styles/components/tabs/card.less

@@ -1,11 +1,13 @@
 .@{tabs-prefix-cls}-nav {
+  &-card {
+    --tabs-nav-item-padding: 0 var(--space-4);
+  }
+
   &-card &-item {
-    height: var(--tabs-nav-card-item-height);
     margin: 0;
-    padding: var(--tabs-nav-card-item-padding-vertical) var(--tabs-nav-card-item-padding-horizontal);
-    background: var(--tabs-nav-card-item-background-color);
-    box-shadow: 0 0 0 1px var(--tabs-nav-card-item-border-color) inset;
+    background: var(--color-background-secondary);
     transition: all var(--animation-time) var(--ease-in-out);
+    border: 1px solid var(--color-border-split);
 
     .@{tabs-prefix-cls}-nav-item-content {
       padding: 0;
@@ -20,26 +22,17 @@
     }
 
     &-active {
-      color: var(--tabs-nav-item-selected-color);
-      background: var(--tabs-nav-card-item-selected-background-color);
+      color: var(--primary-color);
+      background: var(--color-background);
     }
 
     &-disabled {
       &,
       &:hover {
-        color: var(--color-disabled-font);
-      }
-    }
-
-    &-closable {
-      .@{tabs-prefix-cls}-nav-item-content:has(.@{tabs-prefix-cls}-nav-item-close:hover) {
-        background-color: transparent;
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
       }
     }
-
-    &-add-btn {
-      background-color: var(--tabs-nav-card-add-button-background-color);
-    }
   }
 
   &-card&-top-bar,
@@ -56,16 +49,14 @@
   &-card&-top-bar &-item {
     border-radius: var(--tabs-nav-card-item-radius) var(--tabs-nav-card-item-radius) 0 0;
     &-active {
-      box-shadow: 0 1px 0 0 var(--tabs-nav-card-item-border-color) inset, 1px 0 0 0 var(--tabs-nav-card-item-border-color) inset,
-        -1px 0 0 0 var(--tabs-nav-card-item-border-color) inset;
+      border-bottom: var(--color-background) 1px solid;
     }
   }
 
   &-card&-bottom-bar &-item {
     border-radius: 0 0 var(--tabs-nav-card-item-radius) var(--tabs-nav-card-item-radius);
     &-active {
-      box-shadow: 0 -1px 0 0 var(--tabs-nav-card-item-border-color) inset, 1px 0 0 0 var(--tabs-nav-card-item-border-color) inset,
-        -1px 0 0 0 var(--tabs-nav-card-item-border-color) inset;
+      border-top: var(--color-background) 1px solid;
     }
   }
 
@@ -83,26 +74,16 @@
   &-card&-left-bar &-item {
     border-radius: var(--tabs-nav-card-item-radius) 0 0 var(--tabs-nav-card-item-radius);
 
-    &-active {
-      box-shadow: 0 1px 0 0 var(--tabs-nav-card-item-border-color) inset, 1px 0 0 0 var(--tabs-nav-card-item-border-color) inset,
-        0 -1px 0 0 var(--tabs-nav-card-item-border-color) inset;
-    }
+    // &-active {
+    //   border-right: var(--color-background) 1px solid;
+    // }
   }
 
   &-card&-right-bar &-item {
     border-radius: 0 var(--tabs-nav-card-item-radius) var(--tabs-nav-card-item-radius) 0;
 
-    &-active {
-      box-shadow: 0 1px 0 0 var(--tabs-nav-card-item-border-color) inset, -1px 0 0 0 var(--tabs-nav-card-item-border-color) inset,
-        0 -1px 0 0 var(--tabs-nav-card-item-border-color) inset;
-    }
-  }
-
-  &-card&-small &-item {
-    height: var(--tabs-nav-card-item-height-small);
-  }
-
-  &-card&-large &-item {
-    height: var(--tabs-nav-card-item-height-large);
+    // &-active {
+    //   border-left: var(--color-background) 1px solid;
+    // }
   }
 }

package/styles/components/tabs/index.css

@@ -1 +1 @@
-:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-tab,.uui-tab-nav-container{--tabs-title-font-size:var(--default-font-size);--tabs-title-font-size-large:var(--font-size-base);--tabs-title-font-size-small:var(--font-size-xs);--tabs-title-line-height:var(--line-height-base);--tabs-nav-margin-vertical:0;--tabs-nav-bottom-border-color:var(--color-border-split);--tabs-nav-box-shadow:0 -1px 0 0 var(--tabs-nav-bottom-border-color) inset;--tabs-nav-item-font-color:var(--secondary-font-color);--tabs-nav-item-margin-space:var(--space-2);--tabs-nav-item-padding-vertical:var(--space-2);--tabs-nav-item-padding-horizontal:var(--space-2);--tabs-nav-item-background-color:transparent;--tabs-nav-item-content-padding-vertical:var(--space-1);--tabs-nav-item-content-padding-horizontal:var(--space-2);--tabs-nav-item-content-delete-background-color:var(--error-color-a50);--tabs-nav-item-content-line-height:var(--line-heigh-normal);--tabs-nav-item-delete-font-color:var(--error-color);--tabs-nav-item-selected-background-color:transparent;--tabs-nav-item-selected-font-weight:var(--default-font-weight);--tabs-nav-item-content-closable-padding-right:var(--space-1);--tabs-nav-item-closer-size:var(--space-4);--tabs-nav-item-closer-font-size:var(--font-size-sm);--tabs-nav-item-closer-gutter:var(--space-1);--tabs-nav-item-user-select:none;--tabs-nav-item-justify-content:center;--tabs-nav-item-icon-gutter:var(--space-2);--tabs-nav-scroller-gutter:var(--space-2);--tabs-nav-scroller-size:var(--space-6);--tabs-nav-scroller-color:var(--secondary-font-color);--tabs-nav-scroller-hover-color:var(--default-font-color);--tabs-nav-scroller-hover-background-color:var(--gray-a3);--tabs-nav-scroller-font-size:var(--font-size-sm);--tabs-nav-add-button-color:var(--default-font-color);--tabs-nav-add-button-font-size:var(--font-size-base);--tabs-nav-active-bar-width:2px;--tabs-nav-active-bar-offset:1px;--tabs-nav-vertical-item-padding-vertical:var(--space-1);--tabs-nav-vertical-item-padding-horizontal:var(--space-3);--tabs-nav-vertical-button-width:90%;--tabs-nav-extra-gutter:var(--space-2);--tabs-nav-card-item-gutter:2px;--tabs-nav-card-item-height:var(--space-10);--tabs-nav-card-item-padding-horizontal:var(--space-3);--tabs-nav-card-item-padding-vertical:0;--tabs-nav-card-item-background-color:var(--gray-2);--tabs-nav-card-item-hover-background-color:transparent;--tabs-nav-card-item-selected-background-color:var(--color-background);--tabs-nav-card-item-border-color:var(--color-border-split);--tabs-nav-card-add-button-background-color:var(--color-background);--tabs-content-padding:var(--space-3);--tabs-nav-card-item-height-large:var(--space-12);--tabs-nav-card-item-height-small:var(--space-6);--tabs-border-card-box-shadow:var(--shadow-3);--tabs-border-card-nav-background-color:var(--gray-2);--tabs-nav-item-content-radius:var(--radius-base);--tabs-nav-item-closer-radius:var(--radius-1);--tabs-nav-scroller-radius:var(--radius-base);--tabs-nav-add-button-radius:var(--radius-base);--tabs-nav-card-item-radius:var(--radius-base);--tabs-border-card-radius:var(--radius-base);--tabs-nav-item-hover-color:var(--default-font-color);--tabs-nav-item-active-color:var(--default-font-color);--tabs-nav-item-selected-color:var(--primary-color);--tabs-nav-item-content-hover-background-color:var(--gray-a3);--tabs-nav-active-bar-color:var(--primary-color);--tabs-nav-card-item-hover-color:var(--primary-color);--tabs-nav-add-button-hover-color:var(--primary-color)}.dark .uui-tab,.dark .uui-tab-nav-container,.dark-theme .uui-tab,.dark-theme .uui-tab-nav-container{--tabs-nav-card-item-background-color:transparent;--tabs-border-card-nav-background-color:var(--gray-4)}.uui-tab-nav-card .uui-tab-nav-item{height:var(--tabs-nav-card-item-height);margin:0;padding:var(--tabs-nav-card-item-padding-vertical) var(--tabs-nav-card-item-padding-horizontal);background:var(--tabs-nav-card-item-background-color);box-shadow:0 0 0 1px var(--tabs-nav-card-item-border-color) inset;transition:all var(--animation-time) var(--ease-in-out)}.uui-tab-nav-card .uui-tab-nav-item .uui-tab-nav-item-content{padding:0}.uui-tab-nav-card .uui-tab-nav-item:hover{color:var(--tabs-nav-card-item-hover-color)}.uui-tab-nav-card .uui-tab-nav-item:hover .uui-tab-nav-item-content{background-color:transparent}.uui-tab-nav-card .uui-tab-nav-item-active{color:var(--tabs-nav-item-selected-color);background:var(--tabs-nav-card-item-selected-background-color)}.uui-tab-nav-card .uui-tab-nav-item-disabled,.uui-tab-nav-card .uui-tab-nav-item-disabled:hover{color:var(--color-disabled-font)}.uui-tab-nav-card .uui-tab-nav-item-closable .uui-tab-nav-item-content:has(.uui-tab-nav-item-close:hover){background-color:transparent}.uui-tab-nav-card .uui-tab-nav-item-add-btn{background-color:var(--tabs-nav-card-add-button-background-color)}.uui-tab-nav-card.uui-tab-nav-bottom-bar .uui-tab-nav-item,.uui-tab-nav-card.uui-tab-nav-top-bar .uui-tab-nav-item{margin-right:var(--tabs-nav-card-item-gutter)}.uui-tab-nav-card.uui-tab-nav-bottom-bar .uui-tab-nav-item-add-btn,.uui-tab-nav-card.uui-tab-nav-top-bar .uui-tab-nav-item-add-btn{margin-left:var(--tabs-nav-card-item-gutter)}.uui-tab-nav-card.uui-tab-nav-top-bar .uui-tab-nav-item{border-radius:var(--tabs-nav-card-item-radius) var(--tabs-nav-card-item-radius) 0 0}.uui-tab-nav-card.uui-tab-nav-top-bar .uui-tab-nav-item-active{box-shadow:0 1px 0 0 var(--tabs-nav-card-item-border-color) inset,1px 0 0 0 var(--tabs-nav-card-item-border-color) inset,-1px 0 0 0 var(--tabs-nav-card-item-border-color) inset}.uui-tab-nav-card.uui-tab-nav-bottom-bar .uui-tab-nav-item{border-radius:0 0 var(--tabs-nav-card-item-radius) var(--tabs-nav-card-item-radius)}.uui-tab-nav-card.uui-tab-nav-bottom-bar .uui-tab-nav-item-active{box-shadow:0 -1px 0 0 var(--tabs-nav-card-item-border-color) inset,1px 0 0 0 var(--tabs-nav-card-item-border-color) inset,-1px 0 0 0 var(--tabs-nav-card-item-border-color) inset}.uui-tab-nav-card.uui-tab-nav-left-bar .uui-tab-nav-item,.uui-tab-nav-card.uui-tab-nav-right-bar .uui-tab-nav-item{margin-bottom:var(--tabs-nav-card-item-gutter)}.uui-tab-nav-card.uui-tab-nav-left-bar .uui-tab-nav-item-add-btn,.uui-tab-nav-card.uui-tab-nav-right-bar .uui-tab-nav-item-add-btn{margin-top:var(--tabs-nav-card-item-gutter)}.uui-tab-nav-card.uui-tab-nav-left-bar .uui-tab-nav-item{border-radius:var(--tabs-nav-card-item-radius) 0 0 var(--tabs-nav-card-item-radius)}.uui-tab-nav-card.uui-tab-nav-left-bar .uui-tab-nav-item-active{box-shadow:0 1px 0 0 var(--tabs-nav-card-item-border-color) inset,1px 0 0 0 var(--tabs-nav-card-item-border-color) inset,0 -1px 0 0 var(--tabs-nav-card-item-border-color) inset}.uui-tab-nav-card.uui-tab-nav-right-bar .uui-tab-nav-item{border-radius:0 var(--tabs-nav-card-item-radius) var(--tabs-nav-card-item-radius) 0}.uui-tab-nav-card.uui-tab-nav-right-bar .uui-tab-nav-item-active{box-shadow:0 1px 0 0 var(--tabs-nav-card-item-border-color) inset,-1px 0 0 0 var(--tabs-nav-card-item-border-color) inset,0 -1px 0 0 var(--tabs-nav-card-item-border-color) inset}.uui-tab-nav-card.uui-tab-nav-small .uui-tab-nav-item{height:var(--tabs-nav-card-item-height-small)}.uui-tab-nav-card.uui-tab-nav-large .uui-tab-nav-item{height:var(--tabs-nav-card-item-height-large)}.uui-tab-border-card{background-color:var(--color-background);box-shadow:var(--tabs-border-card-box-shadow);border-radius:var(--tabs-border-card-radius)}.uui-tab-border-card .uui-tab-nav-bar{background-color:var(--tabs-border-card-nav-background-color);padding:0 var(--tabs-border-card-radius)}.uui-tab-border-card .uui-tab-nav-item{height:var(--tabs-nav-card-item-height);margin:0;padding:var(--tabs-nav-card-item-padding-vertical) var(--tabs-nav-card-item-padding-horizontal);transition:all var(--animation-time) var(--ease-in-out)}.uui-tab-border-card .uui-tab-nav-item-active{color:var(--tabs-nav-item-selected-color);background:var(--tabs-nav-card-item-selected-background-color)}.uui-tab-border-card .uui-tab-nav-item:hover{color:var(--tabs-nav-card-item-hover-color)}.uui-tab-border-card .uui-tab-nav-item:hover .uui-tab-nav-item-content{background-color:transparent}.uui-tab-border-card .uui-tab-nav-item-closable .uui-tab-nav-item-content:has(.uui-tab-nav-item-close:hover){background-color:transparent}.uui-tab-border-card .uui-tab-nav-item-disabled{color:var(--color-disabled-font)}.uui-tab-border-card .uui-tab-nav-extra-right{padding-right:var(--tabs-nav-extra-gutter)}.uui-tab-border-card .uui-tab-nav-extra-left{padding-left:var(--tabs-nav-extra-gutter)}.uui-tab-border-card .uui-tab-content{height:calc(100% - var(--tabs-nav-card-item-height));padding:var(--tabs-content-padding)}.uui-tab-border-card .uui-tab-nav-vertical{padding:var(--tabs-nav-extra-gutter) 0}.uui-tab-border-card.uui-tab-top .uui-tab-nav-item-active{box-shadow:1px 0 0 0 var(--tabs-nav-card-item-border-color) inset,-1px 0 0 0 var(--tabs-nav-card-item-border-color) inset}.uui-tab-border-card.uui-tab-bottom .uui-tab-nav-item-active{box-shadow:1px 0 0 0 var(--tabs-nav-card-item-border-color) inset,-1px 0 0 0 var(--tabs-nav-card-item-border-color) inset}.uui-tab-border-card.uui-tab-left .uui-tab-nav-item-active{box-shadow:0 1px 0 0 var(--tabs-nav-card-item-border-color) inset,0 -1px 0 0 var(--tabs-nav-card-item-border-color) inset}.uui-tab-border-card.uui-tab-right .uui-tab-nav-item-active{box-shadow:0 1px 0 0 var(--tabs-nav-card-item-border-color) inset,0 -1px 0 0 var(--tabs-nav-card-item-border-color) inset}.uui-tab-border-card.uui-tab-small .uui-tab-nav-item{height:var(--tabs-nav-card-item-height-small)}.uui-tab-border-card.uui-tab-large .uui-tab-nav-item{height:var(--tabs-nav-card-item-height-large)}.uui-tab{box-sizing:border-box;margin:0;padding:0;color:var(--default-font-color);font-size:var(--default-font-size);font-variant:var(--default-font-variant);line-height:var(--default-line-height);list-style:none;font-feature-settings:var(--default-font-feature-settings);position:relative;overflow:hidden}.uui-tab-content::before{display:block;overflow:hidden;content:''}.uui-tab-bottom .uui-tab-content,.uui-tab-top .uui-tab-content{width:100%}.uui-tab-top .uui-tab-content{padding-top:var(--tabs-content-padding)}.uui-tab-bottom .uui-tab-content{padding-bottom:var(--tabs-content-padding)}.uui-tab-left,.uui-tab-right{display:flex;height:100%}.uui-tab-right{flex-direction:row-reverse}.uui-tab-left .uui-tab-content,.uui-tab-right .uui-tab-content{width:auto;flex:1 1 auto;margin-top:0!important;height:100%;overflow:auto}.uui-tab-left .uui-tab-content{padding-left:var(--tabs-content-padding)}.uui-tab-right .uui-tab-content{padding-right:var(--tabs-content-padding)}.uui-tab-nav-bar{box-shadow:var(--tabs-nav-box-shadow);display:flex;align-items:center}.uui-tab-nav-container{position:relative;box-sizing:border-box;border:0;overflow:hidden;font-size:var(--tabs-title-font-size);line-height:var(--tabs-title-line-height);white-space:nowrap;transition:padding .3s var(--ease-in-out);display:flex;align-items:center;flex:auto;align-self:stretch}.uui-tab-nav-centered .uui-tab-nav-container{justify-content:center}.uui-tab-nav-scrolling{display:flex}.uui-tab-nav-content{position:relative;display:inline-block;margin:0;padding-left:0;list-style:none;transition:transform .3s var(--ease-in-out)}.uui-tab-nav-content::after,.uui-tab-nav-content::before{display:table;content:' '}.uui-tab-nav-content::after{clear:both}.uui-tab-nav-item{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:var(--tabs-nav-item-justify-content);padding:var(--tabs-nav-item-padding-vertical) var(--tabs-nav-item-padding-horizontal);text-decoration:none;cursor:pointer;transition:color var(--animation-time) var(--ease-in-out);-webkit-user-select:var(--tabs-nav-item-user-select);user-select:var(--tabs-nav-item-user-select);color:var(--tabs-nav-item-font-color)}.uui-tab-nav-item-content{padding:var(--tabs-nav-item-content-padding-vertical) var(--tabs-nav-item-content-padding-horizontal);line-height:var(--tabs-nav-item-content-line-height);border-radius:var(--tabs-nav-item-content-radius);display:flex;align-items:center}.uui-tab-nav-item-content>.uui-icon{margin-right:var(--tabs-nav-item-icon-gutter)}.uui-tab-nav-item:hover{color:var(--tabs-nav-item-hover-color)}.uui-tab-nav-item:hover>.uui-tab-nav-item-content{background-color:var(--tabs-nav-item-content-hover-background-color)}.uui-tab-nav-item:active{color:var(--tabs-nav-item-active-color)}.uui-tab-nav-item-active{color:var(--tabs-nav-item-selected-color);font-weight:var(--tabs-nav-item-selected-font-weight)}.uui-tab-nav-item-active:hover{color:var(--tabs-nav-item-selected-color)}.uui-tab-nav-item-disabled,.uui-tab-nav-item-disabled:hover{color:var(--color-disabled-font);cursor:not-allowed}.uui-tab-nav-item-closable .uui-tab-nav-item-content{padding-right:var(--tabs-nav-item-content-closable-padding-right)}.uui-tab-nav-item-closable .uui-tab-nav-item-content:has(.uui-tab-nav-item-close:hover){background-color:var(--tabs-nav-item-content-delete-background-color);color:var(--tabs-nav-item-delete-font-color)!important}.uui-tab-nav-item-close{display:flex;align-items:center;justify-content:center;width:var(--tabs-nav-item-closer-size);height:var(--tabs-nav-item-closer-size);border-radius:var(--tabs-nav-item-closer-radius);line-height:var(--tabs-nav-item-content-line-height);margin-left:var(--tabs-nav-item-closer-gutter);font-size:var(--tabs-nav-item-closer-font-size);transition:all var(--animation-time)}.uui-tab-nav-item-close .uui-icon{display:block;line-height:var(--tabs-nav-item-content-line-height)}.uui-tab-nav-item-close-hidden{display:none}.uui-tab-nav-item-disabled .uui-tab-nav-item-close,.uui-tab-nav-item-disabled .uui-tab-nav-item-close:hover{cursor:not-allowed}.uui-tab-nav-item-add-btn{color:var(--tabs-nav-add-button-color);font-size:var(--tabs-nav-add-button-font-size);transition:all var(--animation-time)}.uui-tab-nav-item-add-btn:hover{color:var(--tabs-nav-add-button-hover-color)}.uui-tab-nav-active-bar{position:absolute;left:0;z-index:1;box-sizing:border-box;width:0;height:var(--tabs-nav-active-bar-width);background-color:var(--tabs-nav-active-bar-color);transform-origin:0 0}.uui-tab-nav-btn{display:flex;width:var(--tabs-nav-scroller-size);flex:0 0 var(--tabs-nav-scroller-size);height:var(--tabs-nav-scroller-size);color:var(--tabs-nav-scroller-color);align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:var(--tabs-nav-scroller-radius);cursor:pointer;transition:width var(--animation-time) var(--ease-in-out),opacity var(--animation-time) var(--ease-in-out),color var(--animation-time) var(--ease-in-out);-webkit-user-select:none;user-select:none;pointer-events:auto}.uui-tab-nav-btn .uui-icon{line-height:1;font-size:var(--tabs-nav-scroller-font-size)}.uui-tab-nav-btn:hover{color:var(--tabs-nav-scroller-hover-color);background-color:var(--tabs-nav-scroller-hover-background-color)}.uui-tab-nav-btn-disabled{cursor:not-allowed}.uui-tab-nav-btn-disabled,.uui-tab-nav-btn-disabled:hover{color:var(--color-disabled-font);background-color:transparent}.uui-tab-nav-extra-right{flex-direction:row-reverse}.uui-tab-nav-extra-left{flex-direction:row}.uui-tab-nav-extra-left .uui-tab-nav-container{justify-content:flex-end}.uui-tab-nav-extra-top{flex-direction:column}.uui-tab-nav-extra-bottom{flex-direction:column-reverse}.uui-tab-nav-extra-content{flex:0}.uui-tab-nav-scroll{overflow:hidden;white-space:nowrap}.uui-tab-nav-bottom-bar,.uui-tab-nav-top-bar{column-gap:var(--tabs-nav-extra-gutter)}.uui-tab-nav-bottom-bar .uui-tab-nav-active-bar-animated,.uui-tab-nav-top-bar .uui-tab-nav-active-bar-animated{transition:transform var(--animation-time) var(--ease-in-out),width var(--animation-time-short) var(--ease-in-out),left var(--animation-time) var(--ease-in-out)}.uui-tab-nav-bottom-bar .uui-tab-nav-item,.uui-tab-nav-top-bar .uui-tab-nav-item{margin-right:var(--tabs-nav-item-margin-space)}.uui-tab-nav-bottom-bar .uui-tab-nav-item:last-child,.uui-tab-nav-top-bar .uui-tab-nav-item:last-child{margin-right:0}.uui-tab-nav-bottom-bar .uui-tab-nav-item-add-btn,.uui-tab-nav-top-bar .uui-tab-nav-item-add-btn{margin-left:var(--tabs-nav-item-margin-space)}.uui-tab-nav-bottom-bar .uui-tab-nav-scrolling,.uui-tab-nav-top-bar .uui-tab-nav-scrolling{column-gap:var(--tabs-nav-scroller-gutter)}.uui-tab-nav-top-bar{--tabs-nav-box-shadow:0 -1px 0 0 var(--tabs-nav-bottom-border-color) inset;margin-bottom:var(--tabs-nav-margin-vertical)}.uui-tab-nav-top-bar .uui-tab-nav-active-bar{bottom:var(--tabs-nav-active-bar-offset)}.uui-tab-nav-bottom-bar{--tabs-nav-box-shadow:0 1px 0 0 var(--tabs-nav-bottom-border-color) inset;margin-top:var(--tabs-nav-margin-vertical)}.uui-tab-nav-bottom-bar .uui-tab-nav-active-bar{top:var(--tabs-nav-active-bar-offset)}.uui-tab-nav-left-bar,.uui-tab-nav-right-bar{height:100%;border-bottom:0;flex-direction:column;row-gap:var(--tabs-nav-extra-gutter)}.uui-tab-nav-left-bar .uui-tab-nav-container,.uui-tab-nav-right-bar .uui-tab-nav-container{flex-direction:column;align-items:stretch}.uui-tab-nav-left-bar .uui-tab-nav-item,.uui-tab-nav-right-bar .uui-tab-nav-item{display:flex;padding:var(--tabs-nav-vertical-item-padding-vertical) var(--tabs-nav-vertical-item-padding-horizontal);margin-bottom:var(--tabs-nav-item-margin-space)}.uui-tab-nav-left-bar .uui-tab-nav-item:last-child,.uui-tab-nav-right-bar .uui-tab-nav-item:last-child{margin-bottom:0}.uui-tab-nav-left-bar .uui-tab-nav-item-add-btn,.uui-tab-nav-right-bar .uui-tab-nav-item-add-btn{margin-top:var(--tabs-nav-item-margin-space);align-self:stretch}.uui-tab-nav-left-bar .uui-tab-nav-scrolling,.uui-tab-nav-right-bar .uui-tab-nav-scrolling{flex-direction:column;row-gap:var(--tabs-nav-scroller-gutter)}.uui-tab-nav-left-bar .uui-tab-nav-content,.uui-tab-nav-right-bar .uui-tab-nav-content{display:block}.uui-tab-nav-left-bar .uui-tab-nav-btn .uui-icon,.uui-tab-nav-right-bar .uui-tab-nav-btn .uui-icon{transform:rotate(90deg)}.uui-tab-nav-left-bar .uui-tab-nav-prev,.uui-tab-nav-right-bar .uui-tab-nav-prev{width:var(--tabs-nav-vertical-button-width)}.uui-tab-nav-left-bar .uui-tab-nav-next,.uui-tab-nav-right-bar .uui-tab-nav-next{width:var(--tabs-nav-vertical-button-width)}.uui-tab-nav-left-bar .uui-tab-nav-extra-content,.uui-tab-nav-right-bar .uui-tab-nav-extra-content{width:100%;display:flex;align-items:center;flex-direction:column}.uui-tab-nav-left-bar .uui-tab-nav-scroll,.uui-tab-nav-right-bar .uui-tab-nav-scroll{width:auto;max-height:100%}.uui-tab-nav-left-bar .uui-tab-nav-active-bar,.uui-tab-nav-right-bar .uui-tab-nav-active-bar{top:0;bottom:auto;left:auto;width:var(--tabs-nav-active-bar-width);height:0}.uui-tab-nav-left-bar .uui-tab-nav-add-btn,.uui-tab-nav-right-bar .uui-tab-nav-add-btn{width:var(--tabs-nav-vertical-button-width)}.uui-tab-nav-left-bar{--tabs-nav-box-shadow:-1px 0 0 0 var(--tabs-nav-bottom-border-color) inset}.uui-tab-nav-left-bar .uui-tab-nav-active-bar{right:var(--tabs-nav-active-bar-offset)}.uui-tab-nav-right-bar{--tabs-nav-box-shadow:1px 0 0 0 var(--tabs-nav-bottom-border-color) inset}.uui-tab-nav-right-bar .uui-tab-nav-active-bar{left:var(--tabs-nav-active-bar-offset)}.uui-tab-nav-left-bar .uui-tab-nav-active-bar-animated,.uui-tab-nav-right-bar .uui-tab-nav-active-bar-animated{transition:transform var(--animation-time) var(--ease-in-out),height var(--animation-time-short) var(--ease-in-out),top var(--animation-time) var(--ease-in-out)}.uui-tab-nav-large .uui-tab-nav-container{font-size:var(--tabs-title-font-size-large)}.uui-tab-nav-small .uui-tab-nav-container{font-size:var(--tabs-title-font-size-small)}
+:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-tab,.uui-tab-nav-bar{--tabs-nav-margin-vertical:0;--tabs-nav-active-bar-width:2px;--tabs-nav-item-font-color:var(--secondary-font-color);--tabs-nav-item-padding:0 var(--space-2);--tabs-nav-item-height:var(--space-10);--tabs-nav-item-content-padding:var(--space-1) var(--space-2);--tabs-nav-item-content-radius:var(--radius-base);--tabs-nav-item-hover-color:var(--default-font-color);--tabs-nav-item-content-hover-background-color:var(--color-background-secondary);--tabs-nav-card-item-hover-color:var(--primary-color);--tabs-nav-card-item-radius:var(--radius-base);--tabs-nav-card-item-gutter:2px;--tabs-border-card-box-shadow:var(--shadow-base);--tabs-border-card-radius:var(--radius-base);--tabs-content-padding:var(--space-3)}.uui-tab-nav-card{--tabs-nav-item-padding:0 var(--space-4)}.uui-tab-nav-card .uui-tab-nav-item{margin:0;background:var(--color-background-secondary);transition:all var(--animation-time) var(--ease-in-out);border:1px solid var(--color-border-split)}.uui-tab-nav-card .uui-tab-nav-item .uui-tab-nav-item-content{padding:0}.uui-tab-nav-card .uui-tab-nav-item:hover{color:var(--tabs-nav-card-item-hover-color)}.uui-tab-nav-card .uui-tab-nav-item:hover .uui-tab-nav-item-content{background-color:transparent}.uui-tab-nav-card .uui-tab-nav-item-active{color:var(--primary-color);background:var(--color-background)}.uui-tab-nav-card .uui-tab-nav-item-disabled,.uui-tab-nav-card .uui-tab-nav-item-disabled:hover{opacity:var(--disabled-opacity);cursor:not-allowed}.uui-tab-nav-card.uui-tab-nav-bottom-bar .uui-tab-nav-item,.uui-tab-nav-card.uui-tab-nav-top-bar .uui-tab-nav-item{margin-right:var(--tabs-nav-card-item-gutter)}.uui-tab-nav-card.uui-tab-nav-bottom-bar .uui-tab-nav-item-add-btn,.uui-tab-nav-card.uui-tab-nav-top-bar .uui-tab-nav-item-add-btn{margin-left:var(--tabs-nav-card-item-gutter)}.uui-tab-nav-card.uui-tab-nav-top-bar .uui-tab-nav-item{border-radius:var(--tabs-nav-card-item-radius) var(--tabs-nav-card-item-radius) 0 0}.uui-tab-nav-card.uui-tab-nav-top-bar .uui-tab-nav-item-active{border-bottom:var(--color-background) 1px solid}.uui-tab-nav-card.uui-tab-nav-bottom-bar .uui-tab-nav-item{border-radius:0 0 var(--tabs-nav-card-item-radius) var(--tabs-nav-card-item-radius)}.uui-tab-nav-card.uui-tab-nav-bottom-bar .uui-tab-nav-item-active{border-top:var(--color-background) 1px solid}.uui-tab-nav-card.uui-tab-nav-left-bar .uui-tab-nav-item,.uui-tab-nav-card.uui-tab-nav-right-bar .uui-tab-nav-item{margin-bottom:var(--tabs-nav-card-item-gutter)}.uui-tab-nav-card.uui-tab-nav-left-bar .uui-tab-nav-item-add-btn,.uui-tab-nav-card.uui-tab-nav-right-bar .uui-tab-nav-item-add-btn{margin-top:var(--tabs-nav-card-item-gutter)}.uui-tab-nav-card.uui-tab-nav-left-bar .uui-tab-nav-item{border-radius:var(--tabs-nav-card-item-radius) 0 0 var(--tabs-nav-card-item-radius)}.uui-tab-nav-card.uui-tab-nav-right-bar .uui-tab-nav-item{border-radius:0 var(--tabs-nav-card-item-radius) var(--tabs-nav-card-item-radius) 0}.uui-tab-border-card{background-color:var(--color-background);box-shadow:var(--tabs-border-card-box-shadow);border-radius:var(--tabs-border-card-radius);border:1px solid var(--color-border-split)}.uui-tab-border-card .uui-tab-nav-bar{--tabs-nav-item-padding:0 var(--space-2);background-color:var(--color-background-secondary);padding:0 var(--tabs-border-card-radius)}.uui-tab-border-card .uui-tab-nav-item{margin:0}.uui-tab-border-card .uui-tab-nav-item-active{color:var(--primary-color);background:var(--color-background)}.uui-tab-border-card .uui-tab-nav-item:hover{color:var(--tabs-nav-card-item-hover-color)}.uui-tab-border-card .uui-tab-nav-item:hover .uui-tab-nav-item-content{background-color:transparent}.uui-tab-border-card .uui-tab-nav-item .uui-tab-nav-item-content{padding:0}.uui-tab-border-card .uui-tab-nav-item-disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.uui-tab-border-card .uui-tab-nav-extra-right{padding-right:var(--tabs-nav-extra-gutter)}.uui-tab-border-card .uui-tab-nav-extra-left{padding-left:var(--tabs-nav-extra-gutter)}.uui-tab-border-card .uui-tab-content{height:calc(100% - var(--tabs-nav-card-item-height));padding:var(--tabs-content-padding)}.uui-tab-border-card .uui-tab-nav-vertical{padding:var(--tabs-nav-extra-gutter) 0}.uui-tab-border-card.uui-tab-top .uui-tab-nav-item-active{border-radius:var(--tabs-border-card-radius) var(--tabs-border-card-radius) 0 0;border-left:1px solid var(--color-background);border-right:1px solid var(--color-background)}.uui-tab-border-card.uui-tab-bottom .uui-tab-nav-item-active{border-radius:0 0 var(--tabs-border-card-radius) var(--tabs-border-card-radius);border-top:1px solid var(--color-background);border-bottom:1px solid var(--color-background)}.uui-tab-border-card.uui-tab-left .uui-tab-nav-item-active{border-radius:var(--tabs-border-card-radius) 0 0 var(--tabs-border-card-radius);border-top:1px solid var(--color-background);border-bottom:1px solid var(--color-background)}.uui-tab-border-card.uui-tab-right .uui-tab-nav-item-active{border-radius:0 var(--tabs-border-card-radius) var(--tabs-border-card-radius) 0;border-top:1px solid var(--color-background);border-bottom:1px solid var(--color-background)}.uui-tab{box-sizing:border-box;margin:0;padding:0;color:var(--default-font-color);font-size:var(--default-font-size);font-variant:var(--default-font-variant);line-height:var(--default-line-height);list-style:none;font-feature-settings:var(--default-font-feature-settings);position:relative;overflow:hidden}.uui-tab-content::before{display:block;overflow:hidden;content:''}.uui-tab-bottom,.uui-tab-top{display:flex;flex-direction:column}.uui-tab-bottom .uui-tab-content,.uui-tab-top .uui-tab-content{width:100%}.uui-tab-top .uui-tab-content{padding-top:var(--tabs-content-padding)}.uui-tab-bottom .uui-tab-content{padding-bottom:var(--tabs-content-padding);flex:1 1 auto}.uui-tab-left,.uui-tab-right{display:flex;height:100%}.uui-tab-right{flex-direction:row-reverse}.uui-tab-left .uui-tab-content,.uui-tab-right .uui-tab-content{width:auto;flex:1 1 auto;margin-top:0!important;height:100%;overflow:auto}.uui-tab-left .uui-tab-content{padding-left:var(--tabs-content-padding)}.uui-tab-right .uui-tab-content{padding-right:var(--tabs-content-padding)}.uui-tab-nav-bar{display:flex;align-items:center;position:relative}.uui-tab-nav-container{position:relative;border:0;overflow:hidden;font-size:var(--default-font-size);line-height:var(--line-height-normal);white-space:nowrap;transition:padding .3s var(--ease-in-out);display:flex;align-items:center;flex:auto;align-self:stretch}.uui-tab-nav-centered .uui-tab-nav-container{justify-content:center}.uui-tab-nav-scrolling{display:flex}.uui-tab-nav-content{position:relative;display:inline-block;margin:0;padding-left:0;list-style:none;transition:transform .3s var(--ease-in-out)}.uui-tab-nav-content::after,.uui-tab-nav-content::before{display:table;content:' '}.uui-tab-nav-content::after{clear:both}.uui-tab-nav-item{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;height:var(--tabs-nav-item-height);padding:var(--tabs-nav-item-padding);text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--tabs-nav-item-font-color)}.uui-tab-nav-item-content{padding:var(--tabs-nav-item-content-padding);border-radius:var(--tabs-nav-item-content-radius);display:flex;align-items:center;transition:all var(--animation-time)}.uui-tab-nav-item-content>.uui-icon{margin-right:var(--space-1)}.uui-tab-nav-item:hover{color:var(--tabs-nav-item-hover-color)}.uui-tab-nav-item:hover>.uui-tab-nav-item-content{background-color:var(--tabs-nav-item-content-hover-background-color)}.uui-tab-nav-item:active{color:var(--tabs-nav-item-hover-color)}.uui-tab-nav-item-active{color:var(--primary-color)}.uui-tab-nav-item-active:hover{color:var(--primary-color)}.uui-tab-nav-item-disabled,.uui-tab-nav-item-disabled:hover{opacity:var(--disabled-opacity);cursor:not-allowed}.uui-tab-nav-item-closable .uui-tab-nav-item-content{padding-right:var(--space-1)}.uui-tab-nav-item-closable .uui-tab-nav-item-content:has(.uui-tab-nav-item-close:hover){color:var(--error-color)!important}.uui-tab-nav-item-close{display:flex;align-items:center;justify-content:center;width:var(--space-4);height:var(--space-4);border-radius:var(--radius-base);line-height:1;margin-left:var(--space-1);font-size:var(--font-size-sm);transition:all var(--animation-time)}.uui-tab-nav-item-close .uui-icon{display:block;line-height:var(--line-height-normal)}.uui-tab-nav-item-close-hidden{display:none}.uui-tab-nav-item-disabled .uui-tab-nav-item-close,.uui-tab-nav-item-disabled .uui-tab-nav-item-close:hover{cursor:not-allowed}.uui-tab-nav-item-add-btn{color:var(--icon-button-color);font-size:var(--icon-font-size);transition:all var(--animation-time);width:var(--icon-button-width);height:var(--icon-button-width);border-radius:var(--radius-base);display:flex;align-items:center;justify-content:center;cursor:pointer}.uui-tab-nav-item-add-btn:hover{color:var(--icon-button-hover-color);background-color:var(--icon-button-hover-background-color)}.uui-tab-nav-active-bar{position:absolute;left:0;z-index:1;box-sizing:border-box;width:0;height:var(--tabs-nav-active-bar-width);background-color:var(--primary-color);transform-origin:0 0}.uui-tab-nav-btn{display:flex;width:var(--icon-button-width);flex:0 0 var(--icon-button-width);height:var(--icon-button-width);color:var(--icon-button-color);align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:var(--radius-base);cursor:pointer;transition:width var(--animation-time) var(--ease-in-out),opacity var(--animation-time) var(--ease-in-out),color var(--animation-time) var(--ease-in-out);-webkit-user-select:none;user-select:none;pointer-events:auto}.uui-tab-nav-btn .uui-icon{line-height:1;font-size:var(--icon-font-size)}.uui-tab-nav-btn:hover{color:var(--icon-button-hover-color);background-color:var(--icon-button-hover-background-color)}.uui-tab-nav-btn-disabled{cursor:not-allowed}.uui-tab-nav-btn-disabled,.uui-tab-nav-btn-disabled:hover{opacity:var(--disabled-opacity);background-color:transparent}.uui-tab-nav-extra-right{flex-direction:row-reverse}.uui-tab-nav-extra-left{flex-direction:row}.uui-tab-nav-extra-left .uui-tab-nav-container{justify-content:flex-end}.uui-tab-nav-extra-top{flex-direction:column}.uui-tab-nav-extra-bottom{flex-direction:column-reverse}.uui-tab-nav-extra-content{flex:0}.uui-tab-nav-scroll{overflow:hidden;white-space:nowrap}.uui-tab-nav-bottom-bar,.uui-tab-nav-top-bar{column-gap:var(--space-2)}.uui-tab-nav-bottom-bar::before,.uui-tab-nav-top-bar::before{content:'';position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid var(--color-border-split)}.uui-tab-nav-bottom-bar .uui-tab-nav-active-bar-animated,.uui-tab-nav-top-bar .uui-tab-nav-active-bar-animated{transition:transform var(--animation-time) var(--ease-in-out),width var(--animation-time-short) var(--ease-in-out),left var(--animation-time) var(--ease-in-out)}.uui-tab-nav-bottom-bar .uui-tab-nav-item,.uui-tab-nav-top-bar .uui-tab-nav-item{margin-right:var(--space-2)}.uui-tab-nav-bottom-bar .uui-tab-nav-item:last-child,.uui-tab-nav-top-bar .uui-tab-nav-item:last-child{margin-right:0}.uui-tab-nav-bottom-bar .uui-tab-nav-item-add-btn,.uui-tab-nav-top-bar .uui-tab-nav-item-add-btn{margin-left:var(--space-2)}.uui-tab-nav-bottom-bar .uui-tab-nav-scrolling,.uui-tab-nav-top-bar .uui-tab-nav-scrolling{column-gap:var(--space-2)}.uui-tab-nav-top-bar{margin-bottom:var(--tabs-nav-margin-vertical)}.uui-tab-nav-top-bar .uui-tab-nav-active-bar{bottom:0}.uui-tab-nav-bottom-bar{margin-top:var(--tabs-nav-margin-vertical)}.uui-tab-nav-bottom-bar::before{top:0;bottom:auto}.uui-tab-nav-bottom-bar .uui-tab-nav-active-bar{top:0}.uui-tab-nav-left-bar,.uui-tab-nav-right-bar{--tabs-nav-item-height:var(--space-9);height:100%;border-bottom:0;flex-direction:column;row-gap:var(--space-2)}.uui-tab-nav-left-bar::before,.uui-tab-nav-right-bar::before{content:'';position:absolute;bottom:0;top:0;right:0;border-right:1px solid var(--color-border-split)}.uui-tab-nav-left-bar .uui-tab-nav-container,.uui-tab-nav-right-bar .uui-tab-nav-container{flex-direction:column;align-items:center}.uui-tab-nav-left-bar .uui-tab-nav-item,.uui-tab-nav-right-bar .uui-tab-nav-item{display:flex;margin-bottom:var(--space-2)}.uui-tab-nav-left-bar .uui-tab-nav-item:last-child,.uui-tab-nav-right-bar .uui-tab-nav-item:last-child{margin-bottom:0}.uui-tab-nav-left-bar .uui-tab-nav-item-add-btn,.uui-tab-nav-right-bar .uui-tab-nav-item-add-btn{width:80%;margin-top:var(--space-2)}.uui-tab-nav-left-bar .uui-tab-nav-scrolling,.uui-tab-nav-right-bar .uui-tab-nav-scrolling{flex-direction:column;row-gap:var(--space-2)}.uui-tab-nav-left-bar .uui-tab-nav-content,.uui-tab-nav-right-bar .uui-tab-nav-content{display:block}.uui-tab-nav-left-bar .uui-tab-nav-btn .uui-icon,.uui-tab-nav-right-bar .uui-tab-nav-btn .uui-icon{transform:rotate(90deg)}.uui-tab-nav-left-bar .uui-tab-nav-next,.uui-tab-nav-left-bar .uui-tab-nav-prev,.uui-tab-nav-right-bar .uui-tab-nav-next,.uui-tab-nav-right-bar .uui-tab-nav-prev{width:80%}.uui-tab-nav-left-bar .uui-tab-nav-extra-content,.uui-tab-nav-right-bar .uui-tab-nav-extra-content{width:100%;display:flex;align-items:center;flex-direction:column}.uui-tab-nav-left-bar .uui-tab-nav-scroll,.uui-tab-nav-right-bar .uui-tab-nav-scroll{width:auto;max-height:100%}.uui-tab-nav-left-bar .uui-tab-nav-active-bar,.uui-tab-nav-right-bar .uui-tab-nav-active-bar{top:0;bottom:auto;left:auto;width:var(--tabs-nav-active-bar-width);height:0}.uui-tab-nav-left-bar .uui-tab-nav-active-bar{right:0}.uui-tab-nav-right-bar::before{left:0;right:auto}.uui-tab-nav-right-bar .uui-tab-nav-active-bar{left:0}.uui-tab-nav-left-bar .uui-tab-nav-active-bar-animated,.uui-tab-nav-right-bar .uui-tab-nav-active-bar-animated{transition:transform var(--animation-time) var(--ease-in-out),height var(--animation-time-short) var(--ease-in-out),top var(--animation-time) var(--ease-in-out)}.uui-tab-nav-large{--tabs-nav-item-height:var(--space-12)}.uui-tab-nav-large .uui-tab-nav-container{font-size:var(--font-size-sm)}.uui-tab-nav-small{--tabs-nav-item-height:var(--space-9)}.uui-tab-nav-small .uui-tab-nav-container{font-size:var(--font-size-xs)}