@semcore/tab-line 4.40.4-prerelease.0 → 4.41.0-prerelease.0

package/lib/esm/TabLine.mjs

@@ -1,71 +1,55 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { Box, NeighborLocation } from "@semcore/base-components";
+import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
+import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
+import { Text as Text$1 } from "@semcore/typography";
 import React from "react";
-import { Box } from "@semcore/flex-box";
-import addonTextChildren from "@semcore/utils/lib/addonTextChildren";
-import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
-import a11yEnhance from "@semcore/utils/lib/enhances/a11yEnhance";
-import NeighborLocation from "@semcore/neighbor-location";
 /*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___STabLine_6e1u5_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_6e1u5_gg_.__underlined_6e1u5_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_6e1u5_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:0;background:0 0;color:var(--intergalactic-text-primary, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_6e1u5_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_6e1u5_gg_:active,.___STabLineItem_6e1u5_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_6e1u5_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_6e1u5_gg_::after,.___STabLineItem_6e1u5_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_6e1u5_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_6e1u5_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_6e1u5_gg_.__selected_6e1u5_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_6e1u5_gg_ .___SAddon_6e1u5_gg_:not(:last-child),.___STabLineItem_6e1u5_gg_ .___SText_6e1u5_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_6e1u5_gg_{position:absolute;bottom:-1px;height:3px;background-color:var(--intergalactic-border-info-active, #006dca);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_6e1u5_gg_.__selected_6e1u5_gg_{flex-shrink:0}.___STabLineItem_6e1u5_gg_.__disabled_6e1u5_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_6e1u5_gg_.__keyboardFocused_6e1u5_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_6e1u5_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_6e1u5_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_6e1u5_gg_._size_m_6e1u5_gg_{height:28px;min-width:18px}.___STabLineItem_6e1u5_gg_._size_m_6e1u5_gg_ .___SText_6e1u5_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_6e1u5_gg_._size_l_6e1u5_gg_{height:40px;min-width:26px}.___STabLineItem_6e1u5_gg_._size_l_6e1u5_gg_ .___SText_6e1u5_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_6e1u5_gg_._neighborLocation_left_6e1u5_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_6e1u5_gg_.__selected_6e1u5_gg_::after,.___STabLineItem_6e1u5_gg_::after,.___STabLineItem_6e1u5_gg_::before{transition:none}.___SCaret_6e1u5_gg_{display:none}}',
+    '.___STabLine_13cyw_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_13cyw_gg_.__underlined_13cyw_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLine_13cyw_gg_.__underlined_13cyw_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLine_13cyw_gg_.__underlined_13cyw_gg_{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabLineItem_13cyw_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:0;background:0 0;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_13cyw_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_13cyw_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_13cyw_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_13cyw_gg_::after,.___STabLineItem_13cyw_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_13cyw_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_13cyw_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLineItem_13cyw_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLineItem_13cyw_gg_:hover::before{background-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}}.___STabLineItem_13cyw_gg_.__selected_13cyw_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386))}@supports (color:color(display-p3 0 0 0%)){.___STabLineItem_13cyw_gg_.__selected_13cyw_gg_::after{background-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386))}@media (color-gamut:p3){.___STabLineItem_13cyw_gg_.__selected_13cyw_gg_::after{background-color:var(--intergalactic-border-info-active, color(display-p3 0.01805 0.08334 0.73488 / 0.386))}}}.___STabLineItem_13cyw_gg_ .___SAddon_13cyw_gg_:not(:last-child),.___STabLineItem_13cyw_gg_ .___SText_13cyw_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_13cyw_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}@supports (color:color(display-p3 0 0 0%)){.___SCaret_13cyw_gg_{background:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386))}@media (color-gamut:p3){.___SCaret_13cyw_gg_{background:var(--intergalactic-border-info-active, color(display-p3 0.01805 0.08334 0.73488 / 0.386))}}}.___STabLineItem_13cyw_gg_.__selected_13cyw_gg_{flex-shrink:0}.___STabLineItem_13cyw_gg_.__disabled_13cyw_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_13cyw_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_13cyw_gg_._size_m_13cyw_gg_{height:28px;min-width:18px}.___STabLineItem_13cyw_gg_._size_l_13cyw_gg_{height:40px;min-width:26px}.___STabLineItem_13cyw_gg_._neighborLocation_left_13cyw_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_13cyw_gg_.__selected_13cyw_gg_::after,.___STabLineItem_13cyw_gg_::after,.___STabLineItem_13cyw_gg_::before{transition:none}.___SCaret_13cyw_gg_{display:none}}',
     /*__inner_css_end__*/
-    "6e1u5_gg_"
+    "13cyw_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__STabLine": "___STabLine_6e1u5_gg_",
-    "_underlined": "__underlined_6e1u5_gg_",
-    "__SCaret": "___SCaret_6e1u5_gg_",
-    "__STabLineItem": "___STabLineItem_6e1u5_gg_",
-    "_selected": "__selected_6e1u5_gg_",
-    "_disabled": "__disabled_6e1u5_gg_",
-    "_keyboardFocused": "__keyboardFocused_6e1u5_gg_",
-    "__SText": "___SText_6e1u5_gg_",
-    "__SAddon": "___SAddon_6e1u5_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_6e1u5_gg_",
-    "_size_m": "_size_m_6e1u5_gg_",
-    "_size_l": "_size_l_6e1u5_gg_"
+    "__STabLine": "___STabLine_13cyw_gg_",
+    "_underlined": "__underlined_13cyw_gg_",
+    "__SCaret": "___SCaret_13cyw_gg_",
+    "__STabLineItem": "___STabLineItem_13cyw_gg_",
+    "_selected": "__selected_13cyw_gg_",
+    "_disabled": "__disabled_13cyw_gg_",
+    "__SAddon": "___SAddon_13cyw_gg_",
+    "_size_m": "_size_m_13cyw_gg_",
+    "_size_l": "_size_l_13cyw_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_13cyw_gg_",
+    "__SText": "___SText_13cyw_gg_"
   })
 );
-var optionsA11yEnhance = {
-  onNeighborChange: function onNeighborChange(neighborElement, props) {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === "auto") {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ["role", "tab"]
-};
-var TabLineRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(TabLineRoot2, _Component);
-  var _super = _createSuper(TabLineRoot2);
+var TabLineRoot = /* @__PURE__ */ (function(_Component) {
   function TabLineRoot2() {
     var _this;
     _classCallCheck(this, TabLineRoot2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _this = _callSuper(this, TabLineRoot2, [].concat(args));
+    _defineProperty(_this, "state", {
       animation: null
     });
-    _defineProperty(_assertThisInitialized(_this), "prevValue", void 0);
-    _defineProperty(_assertThisInitialized(_this), "itemRefs", {});
-    _defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "animationStartTimeout", -1);
-    _defineProperty(_assertThisInitialized(_this), "handleAnimationStart", function() {
+    _defineProperty(_this, "prevValue", void 0);
+    _defineProperty(_this, "itemRefs", {});
+    _defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "animationStartTimeout", null);
+    _defineProperty(_this, "buttonRefsList", []);
+    _defineProperty(_this, "handleAnimationStart", function() {
       var _this$state$animation;
       if (((_this$state$animation = _this.state.animation) === null || _this$state$animation === void 0 ? void 0 : _this$state$animation.started) === false) {
         _this.setState({
@@ -75,19 +59,20 @@ var TabLineRoot = /* @__PURE__ */ function(_Component) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleAnimationEnd", function() {
+    _defineProperty(_this, "handleAnimationEnd", function() {
       _this.setState({
         animation: null
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function(value) {
+    _defineProperty(_this, "bindHandlerClick", function(value) {
       return function(e) {
         _this.handlers.value(value, e);
       };
     });
     return _this;
   }
-  _createClass(TabLineRoot2, [{
+  _inherits(TabLineRoot2, _Component);
+  return _createClass(TabLineRoot2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -110,13 +95,16 @@ var TabLineRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      clearTimeout(this.animationStartTimeout);
+      if (this.animationStartTimeout) {
+        clearTimeout(this.animationStartTimeout);
+      }
     }
   }, {
     key: "animate",
     value: function animate() {
-      var fromNode = this.itemRefs[this.prevValue];
-      var toNode = this.itemRefs[this.asProps.value];
+      if (this.prevValue === void 0 || this.asProps.value === void 0) return;
+      var fromNode = this.itemRefs[this.prevValue.toString()];
+      var toNode = this.itemRefs[this.asProps.value.toString()];
       var containerNode = this.containerRef.current;
       if (!fromNode || !toNode || !containerNode) return;
       var containerRect = containerNode.getBoundingClientRect();
@@ -132,7 +120,9 @@ var TabLineRoot = /* @__PURE__ */ function(_Component) {
       this.setState({
         animation
       });
-      clearTimeout(this.animationStartTimeout);
+      if (this.animationStartTimeout) {
+        clearTimeout(this.animationStartTimeout);
+      }
       this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
     }
   }, {
@@ -143,13 +133,27 @@ var TabLineRoot = /* @__PURE__ */ function(_Component) {
       var isSelected = value === props.value;
       return {
         size,
-        selected: isSelected,
-        onClick: this.bindHandlerClick(props.value),
-        tabIndex: isSelected ? 0 : -1,
+        "selected": isSelected,
+        "onClick": this.bindHandlerClick(props.value),
+        "tabIndex": isSelected ? 0 : -1,
         "aria-selected": isSelected,
-        ref: function ref(node) {
-          _this2.itemRefs[props.value] = node;
-        }
+        "ref": function ref(node) {
+          if (props.value === void 0) return;
+          _this2.itemRefs[props.value.toString()] = node;
+        },
+        "buttonRefsList": this.buttonRefsList,
+        index
+      };
+    }
+  }, {
+    key: "getItemTextProps",
+    value: function getItemTextProps(props, index) {
+      var tabLineSize = this.asProps.size;
+      var size = props.size ? props.size : tabLineSize === "m" ? 200 : 300;
+      return {
+        size,
+        buttonRefsList: this.buttonRefsList,
+        index
       };
     }
   }, {
@@ -180,10 +184,10 @@ var TabLineRoot = /* @__PURE__ */ function(_Component) {
     value: function render() {
       var _ref = this.asProps, _ref5;
       var STabLine = Box;
-      var SCaret = "div";
+      var SCaret = Box;
       var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, Children = _this$asProps2.Children, controlsLength = _this$asProps2.controlsLength;
       var animation = this.state.animation;
-      return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STabLine, _ref5.cn("STabLine", _objectSpread({}, assignProps({
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(STabLine, _ref5.cn("STabLine", _objectSpread({}, assignProps({
         "role": "tablist",
         "ref": this.containerRef
       }, _ref))), /* @__PURE__ */ React.createElement(NeighborLocation, _ref5.cn("NeighborLocation", {
@@ -191,8 +195,7 @@ var TabLineRoot = /* @__PURE__ */ function(_Component) {
       }), /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {}))), animation && /* @__PURE__ */ React.createElement(SCaret, _ref5.cn("SCaret", _objectSpread({}, this.getCaretProps()))));
     }
   }]);
-  return TabLineRoot2;
-}(Component);
+})(Component);
 _defineProperty(TabLineRoot, "displayName", "TabLine");
 _defineProperty(TabLineRoot, "style", style);
 _defineProperty(TabLineRoot, "defaultProps", {
@@ -201,20 +204,34 @@ _defineProperty(TabLineRoot, "defaultProps", {
   underlined: true,
   behavior: "auto"
 });
-_defineProperty(TabLineRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
+_defineProperty(TabLineRoot, "enhance", [a11yEnhance({
+  onNeighborChange: function onNeighborChange(neighborElement, props) {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === "auto") {
+        neighborElement.click();
+      }
+    }
+  },
+  childSelector: ["role", "tab"]
+})]);
 function TabLineItem(props) {
   var _ref2 = arguments[0];
   var STabLineItem = Box;
-  var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight, neighborLocation = props.neighborLocation;
+  var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight, neighborLocation = props.neighborLocation, buttonRefsList = props.buttonRefsList, index = props.index;
+  var buttonRef = React.useRef();
+  buttonRefsList[index] = buttonRef;
   return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
     neighborLocation
   }, function(neighborLocation2) {
     var _ref6;
-    return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STabLineItem, _ref6.cn("STabLineItem", _objectSpread({}, assignProps({
+    return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(STabLineItem, _ref6.cn("STabLineItem", _objectSpread({}, assignProps({
       "tag": "button",
+      "tabIndex": 0,
       "neighborLocation": neighborLocation2,
       "type": "button",
-      "role": "tab"
+      "role": "tab",
+      "ref": buttonRef
     }, _ref2))), addonLeft ? /* @__PURE__ */ React.createElement(TabLine.Item.Addon, {
       tag: addonLeft
     }) : null, addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon), addonRight ? /* @__PURE__ */ React.createElement(TabLine.Item.Addon, {
@@ -222,20 +239,21 @@ function TabLineItem(props) {
     }) : null);
   });
 }
-TabLineItem.enhance = [keyboardFocusEnhance()];
 function Text(props) {
   var _ref3 = arguments[0], _ref7;
-  var styles = props.styles;
-  var SText = Box;
-  return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
-    "tag": "span"
+  var styles = props.styles, _props$ellipsis = props.ellipsis, ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis, size = props.size, buttonRefsList = props.buttonRefsList, index = props.index;
+  var SText = Text$1;
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
+    "ellipsis": ellipsis,
+    "size": size,
+    "hint:triggerRef": buttonRefsList[index]
   }, _ref3))));
 }
 function Addon(props) {
   var _ref4 = arguments[0], _ref8;
   var styles = props.styles;
   var SAddon = Box;
-  return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
+  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
     "tag": "span"
   }, _ref4))));
 }

package/lib/esm/TabLine.type.mjs

@@ -0,0 +1 @@
+

package/lib/esm/index.mjs

@@ -1,4 +1,5 @@
 import { default as default2, wrapTabLine } from "./TabLine.mjs";
+import "./TabLine.type.mjs";
 export {
   default2 as default,
   wrapTabLine

package/lib/esm/style/tab-line.shadow.css

@@ -6,7 +6,7 @@ STabLine {
 }
 
 STabLine[underlined] {
-  border-bottom: 1px solid var(--intergalactic-border-primary, #c4c7cf);
+  border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 STabLineItem {
@@ -24,14 +24,14 @@ STabLineItem {
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
   overflow: visible;
-  outline: 0;
+  /*outline: 0;*/
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
   cursor: pointer;
   border: none;
   background: transparent;
-  color: var(--intergalactic-text-primary, #191b23);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   margin-right: var(--intergalactic-spacing-4x, 16px);
   font-weight: var(--intergalactic-medium, 500);
 
@@ -41,9 +41,7 @@ STabLineItem {
   }
 
   &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
+  &:hover {
     text-decoration: none;
   }
 
@@ -63,12 +61,12 @@ STabLineItem {
   }
 
   &:hover::before {
-    background-color: var(--intergalactic-border-primary, #c4c7cf);
+    background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   }
 
   &[selected]::after {
     transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
-    background-color: var(--intergalactic-border-info-active, #006dca);
+    background-color: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
   }
 
   & SText:not(:last-child) {
@@ -84,7 +82,7 @@ SCaret {
   position: absolute;
   bottom: -1px;
   height: 3px;
-  background-color: var(--intergalactic-border-info-active, #006dca);
+  background: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
   transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
 }
 
@@ -93,23 +91,12 @@ STabLineItem[selected] {
 }
 
 STabLineItem[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
   cursor: default;
   /* Disable link interactions */
   pointer-events: none;
 }
 
-STabLineItem[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-}
-
-SText {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 SAddon {
   display: inline-flex;
   align-items: center;
@@ -119,21 +106,11 @@ SAddon {
 STabLineItem[size='m'] {
   height: 28px;
   min-width: 18px;
-
-  & SText {
-    font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
-  }
 }
 
 STabLineItem[size='l'] {
   height: 40px;
   min-width: 26px;
-
-  & SText {
-    font-size: var(--intergalactic-fs-300, 16px);
-    line-height: var(--intergalactic-lh-300, 150%);
-  }
 }
 
 STabLineItem[neighborLocation='left'] {
@@ -156,4 +133,4 @@ STabLineItem[neighborLocation='left'] {
   SCaret {
     display: none;
   }
-}
+}

package/lib/types/TabLine.d.ts

@@ -0,0 +1,6 @@
+import type { Intergalactic } from '@semcore/core';
+import React from 'react';
+import type { NSTabLine } from './TabLine.type';
+declare const TabLine: NSTabLine.Component;
+export declare const wrapTabLine: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSTabLine.WrapperComponent>> & PropsExtending) => React.ReactNode) => NSTabLine.WrapperComponent<PropsExtending>;
+export default TabLine;

package/lib/types/TabLine.type.d.ts

@@ -0,0 +1,80 @@
+import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
+import type { NSText } from '@semcore/typography';
+import type React from 'react';
+declare namespace NSTabLine {
+    type Value = string | number | boolean;
+    type Props<T extends NSTabLine.Value = NSTabLine.Value> = BoxProps & NeighborLocationProps & {
+        /** TabLine size
+         * @default m
+         * */
+        size?: 'm' | 'l' | false;
+        /** Adds a bottom border for the entire component
+         * @default true
+         * */
+        underlined?: boolean;
+        /** Is invoked when changing the selection */
+        onChange?: ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void) | React.Dispatch<React.SetStateAction<T>>;
+        /** Value of the selected tab */
+        value?: T;
+        /** Default value of the selected tab
+         * @default null
+         * */
+        defaultValue?: T;
+        /**
+         * Behavior of tabs.
+         * In `auto`, changes the tab immediately when press arrow.
+         * In `manual`, needs to press `space` or `enter` for select a choice.
+         * @default 'auto'
+         */
+        behavior?: 'auto' | 'manual';
+    };
+    type Ctx = {
+        getItemProps: PropGetterFn;
+    };
+    type Handlers = {
+        value: null;
+    };
+    namespace Item {
+        type Props = BoxProps & NeighborItemProps & {
+            /** Makes a tab selected. This property is determined automatically depending on the value. */
+            selected?: boolean;
+            /** Disabled state  */
+            disabled?: boolean;
+            /** Tab value */
+            value?: NSTabLine.Value;
+            /** Left addon tag */
+            addonLeft?: React.ElementType;
+            /** Right addon tag  */
+            addonRight?: React.ElementType;
+        };
+        namespace Text {
+            type Props = NSText.Props;
+            type Component = NSText.Component;
+        }
+        namespace Addon {
+            type Component = typeof Box;
+        }
+        type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {
+            Text: Text.Component;
+            Addon: Addon.Component;
+        };
+    }
+    type WrapperComponent<PropsExtending = {}> = (<V extends Value, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', Props<V>, Ctx, [
+        handlers: Handlers
+    ]> & PropsExtending) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;
+    type Component = WrapperComponent & {
+        Item: Item.Component;
+    };
+}
+/** @deprecated It will be removed in v18. */
+export type TabLineValue = NSTabLine.Value;
+/** @deprecated It will be removed in v18. */
+export type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;
+/** @deprecated It will be removed in v18. */
+export type TabLineItemProps = NSTabLine.Item.Props;
+/** @deprecated It will be removed in v18. */
+export type TabLineContext = NSTabLine.Ctx;
+/** @deprecated It will be removed in v18. */
+export type TabLineHandlers = NSTabLine.Handlers;
+export type { NSTabLine };

package/lib/types/index.d.ts

@@ -1,104 +1,2 @@
-import React from 'react';
-import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import { Box, BoxProps } from '@semcore/flex-box';
-import { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
-import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-export type TabLineValue = string | number | boolean;
-
-/** @deprecated */
-export interface ITabLineProps<T extends TabLineValue = TabLineValue>
-  extends TabLineProps<T>,
-    UnknownProperties {}
-export type TabLineProps<T extends TabLineValue = TabLineValue> = BoxProps &
-  NeighborLocationProps & {
-    /** TabLine size
-     * @default m
-     * */
-    size?: 'm' | 'l' | false;
-    /** Adds a bottom border for the entire component
-     * @default true
-     * */
-    underlined?: boolean;
-    /** Is invoked when changing the selection */
-    onChange?:
-      | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)
-      | React.Dispatch<React.SetStateAction<T>>;
-    /** Value of the selected tab */
-    value?: T;
-    /** Default value of the selected tab
-     * @default null
-     * */
-    defaultValue?: T;
-
-    /**
-     * Behavior of tabs.
-     * In `auto`, changes the tab immediately when press arrow.
-     * In `manual`, needs to press `space` or `enter` for select a choice.
-     * @default 'auto'
-     */
-    behavior?: 'auto' | 'manual';
-  };
-
-/** @deprecated */
-export interface ITabLineItemProps extends TabLineItemProps, UnknownProperties {}
-export type TabLineItemProps = BoxProps &
-  KeyboardFocusProps &
-  NeighborItemProps & {
-    /** Makes a tab selected. This property is determined automatically depending on the value. */
-    selected?: boolean;
-    /** Disabled state  */
-    disabled?: boolean;
-    /** Tab value */
-    value?: TabLineValue;
-    /** Left addon tag */
-    addonLeft?: React.ElementType;
-    /** Right addon tag  */
-    addonRight?: React.ElementType;
-  };
-
-/** @deprecated */
-export interface ITabLineContext extends TabLineContext, UnknownProperties {}
-export type TabLineContext = {
-  getItemProps: PropGetterFn;
-};
-
-/** @deprecated */
-export interface ITabLineHandlers extends TabLineHandlers, UnknownProperties {}
-export type TabLineHandlers = {
-  value: (value: TabLineValue) => void;
-};
-
-type IntergalacticTabLineComponent<PropsExtending = {}> = (<
-  Value extends TabLineValue,
-  Tag extends Intergalactic.Tag = 'div',
->(
-  props: Intergalactic.InternalTypings.ComponentProps<
-    Tag,
-    'div',
-    TabLineProps<Value>,
-    TabLineContext,
-    [handlers: TabLineHandlers]
-  > &
-    PropsExtending,
-) => Intergalactic.InternalTypings.ComponentRenderingResults) &
-  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;
-
-declare const TabLine: IntergalacticTabLineComponent & {
-  Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {
-    Text: typeof Box;
-    Addon: typeof Box;
-  };
-};
-
-declare const wrapTabLine: <PropsExtending extends {}>(
-  wrapper: (
-    props: Intergalactic.InternalTypings.UntypeRefAndTag<
-      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>
-    > &
-      PropsExtending,
-  ) => React.ReactNode,
-) => IntergalacticTabLineComponent<PropsExtending>;
-export { wrapTabLine };
-
-export default TabLine;
+export { default, wrapTabLine } from './TabLine';
+export * from './TabLine.type';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-line",
   "description": "Semrush TabLine Component",
-  "version": "4.40.4-prerelease.0",
+  "version": "4.41.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,12 +14,12 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "5.41.4-prerelease.0",
-    "@semcore/neighbor-location": "4.40.4-prerelease.0",
-    "@semcore/utils": "4.48.5-prerelease.0"
+    "@semcore/flex-box": "5.42.0-prerelease.0",
+    "@semcore/neighbor-location": "4.41.0-prerelease.0",
+    "@semcore/utils": "4.49.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.4-prerelease.0",
+    "@semcore/core": "^2.40.0-prerelease.0",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },

package/lib/cjs/index.d.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=index.d.js.map

package/lib/cjs/index.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabLineValue = string | number | boolean;\n\n/** @deprecated */\nexport interface ITabLineProps<T extends TabLineValue = TabLineValue>\n  extends TabLineProps<T>,\n    UnknownProperties {}\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = BoxProps &\n  NeighborLocationProps & {\n    /** TabLine size\n     * @default m\n     * */\n    size?: 'm' | 'l' | false;\n    /** Adds a bottom border for the entire component\n     * @default true\n     * */\n    underlined?: boolean;\n    /** Is invoked when changing the selection */\n    onChange?:\n      | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n      | React.Dispatch<React.SetStateAction<T>>;\n    /** Value of the selected tab */\n    value?: T;\n    /** Default value of the selected tab\n     * @default null\n     * */\n    defaultValue?: T;\n\n    /**\n     * Behavior of tabs.\n     * In `auto`, changes the tab immediately when press arrow.\n     * In `manual`, needs to press `space` or `enter` for select a choice.\n     * @default 'auto'\n     */\n    behavior?: 'auto' | 'manual';\n  };\n\n/** @deprecated */\nexport interface ITabLineItemProps extends TabLineItemProps, UnknownProperties {}\nexport type TabLineItemProps = BoxProps &\n  KeyboardFocusProps &\n  NeighborItemProps & {\n    /** Makes a tab selected. This property is determined automatically depending on the value. */\n    selected?: boolean;\n    /** Disabled state  */\n    disabled?: boolean;\n    /** Tab value */\n    value?: TabLineValue;\n    /** Left addon tag */\n    addonLeft?: React.ElementType;\n    /** Right addon tag  */\n    addonRight?: React.ElementType;\n  };\n\n/** @deprecated */\nexport interface ITabLineContext extends TabLineContext, UnknownProperties {}\nexport type TabLineContext = {\n  getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITabLineHandlers extends TabLineHandlers, UnknownProperties {}\nexport type TabLineHandlers = {\n  value: (value: TabLineValue) => void;\n};\n\ntype IntergalacticTabLineComponent<PropsExtending = {}> = (<\n  Value extends TabLineValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabLineProps<Value>,\n    TabLineContext,\n    [handlers: TabLineHandlers]\n  > &\n    PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;\n\ndeclare const TabLine: IntergalacticTabLineComponent & {\n  Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabLine: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>\n    > &\n      PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabLineComponent<PropsExtending>;\nexport { wrapTabLine };\n\nexport default TabLine;\n"],"mappings":""}

package/lib/es6/index.d.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.d.js.map