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

package/lib/cjs/TabLine.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,48 +9,64 @@ exports.wrapTabLine = exports["default"] = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _core = require("@semcore/core");
-var _baseComponents = require("@semcore/base-components");
-var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
-var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
-var _typography = require("@semcore/typography");
+var _index = require("@semcore/utils/lib/core/index");
+var _core = _interopRequireWildcard(require("@semcore/core"));
 var _react = _interopRequireDefault(require("react"));
+var _flexBox = require("@semcore/flex-box");
+var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
+var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
+var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
+var _neighborLocation = _interopRequireDefault(require("@semcore/neighbor-location"));
 /*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___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__*/"13cyw_gg_"),
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___STabLine_1v605_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1v605_gg_.__underlined_1v605_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___STabLine_1v605_gg_.__underlined_1v605_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLine_1v605_gg_.__underlined_1v605_gg_{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabLineItem_1v605_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, rgba(1, 5, 0, 0.899));margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1v605_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1v605_gg_:active,.___STabLineItem_1v605_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1v605_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1v605_gg_::after,.___STabLineItem_1v605_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1v605_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1v605_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___STabLineItem_1v605_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLineItem_1v605_gg_:hover::before{background-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}}.___STabLineItem_1v605_gg_.__selected_1v605_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419))}.___STabLineItem_1v605_gg_ .___SAddon_1v605_gg_:not(:last-child),.___STabLineItem_1v605_gg_ .___SText_1v605_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1v605_gg_{position:absolute;bottom:-1px;height:3px;background-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1v605_gg_.__selected_1v605_gg_{flex-shrink:0}.___STabLineItem_1v605_gg_.__disabled_1v605_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___STabLineItem_1v605_gg_.__keyboardFocused_1v605_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@supports (color:color(display-p3 0 0 0)){.___STabLineItem_1v605_gg_.__keyboardFocused_1v605_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___STabLineItem_1v605_gg_.__keyboardFocused_1v605_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SText_1v605_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1v605_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1v605_gg_._size_m_1v605_gg_{height:28px;min-width:18px}.___STabLineItem_1v605_gg_._size_m_1v605_gg_ .___SText_1v605_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1v605_gg_._size_l_1v605_gg_{height:40px;min-width:26px}.___STabLineItem_1v605_gg_._size_l_1v605_gg_ .___SText_1v605_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1v605_gg_._neighborLocation_left_1v605_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1v605_gg_.__selected_1v605_gg_::after,.___STabLineItem_1v605_gg_::after,.___STabLineItem_1v605_gg_::before{transition:none}.___SCaret_1v605_gg_{display:none}}", /*__inner_css_end__*/"1v605_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__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_"
+  "__STabLine": "___STabLine_1v605_gg_",
+  "_underlined": "__underlined_1v605_gg_",
+  "__SCaret": "___SCaret_1v605_gg_",
+  "__STabLineItem": "___STabLineItem_1v605_gg_",
+  "_selected": "__selected_1v605_gg_",
+  "_disabled": "__disabled_1v605_gg_",
+  "_keyboardFocused": "__keyboardFocused_1v605_gg_",
+  "__SText": "___SText_1v605_gg_",
+  "__SAddon": "___SAddon_1v605_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1v605_gg_",
+  "_size_m": "_size_m_1v605_gg_",
+  "_size_l": "_size_l_1v605_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) {
+  (0, _inherits2["default"])(TabLineRoot, _Component);
+  var _super = (0, _createSuper2["default"])(TabLineRoot);
   function TabLineRoot() {
     var _this;
     (0, _classCallCheck2["default"])(this, TabLineRoot);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = (0, _callSuper2["default"])(this, TabLineRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "state", {
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
       animation: null
     });
-    (0, _defineProperty2["default"])(_this, "prevValue", undefined);
-    (0, _defineProperty2["default"])(_this, "itemRefs", {});
-    (0, _defineProperty2["default"])(_this, "containerRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "animationStartTimeout", null);
-    (0, _defineProperty2["default"])(_this, "buttonRefsList", []);
-    (0, _defineProperty2["default"])(_this, "handleAnimationStart", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "prevValue", undefined);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "itemRefs", {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "containerRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "animationStartTimeout", -1);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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({
@@ -59,20 +76,19 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    (0, _defineProperty2["default"])(_this, "handleAnimationEnd", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAnimationEnd", function () {
       _this.setState({
         animation: null
       });
     });
-    (0, _defineProperty2["default"])(_this, "bindHandlerClick", function (value) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerClick", function (value) {
       return function (e) {
         _this.handlers.value(value, e);
       };
     });
     return _this;
   }
-  (0, _inherits2["default"])(TabLineRoot, _Component);
-  return (0, _createClass2["default"])(TabLineRoot, [{
+  (0, _createClass2["default"])(TabLineRoot, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -95,16 +111,13 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      if (this.animationStartTimeout) {
-        clearTimeout(this.animationStartTimeout);
-      }
+      clearTimeout(this.animationStartTimeout);
     }
   }, {
     key: "animate",
     value: function animate() {
-      if (this.prevValue === undefined || this.asProps.value === undefined) return;
-      var fromNode = this.itemRefs[this.prevValue.toString()];
-      var toNode = this.itemRefs[this.asProps.value.toString()];
+      var fromNode = this.itemRefs[this.prevValue];
+      var toNode = this.itemRefs[this.asProps.value];
       var containerNode = this.containerRef.current;
       if (!fromNode || !toNode || !containerNode) return;
       var containerRect = containerNode.getBoundingClientRect();
@@ -120,9 +133,7 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
       this.setState({
         animation: animation
       });
-      if (this.animationStartTimeout) {
-        clearTimeout(this.animationStartTimeout);
-      }
+      clearTimeout(this.animationStartTimeout);
       this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
     }
   }, {
@@ -135,27 +146,13 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
       var isSelected = value === props.value;
       return {
         size: 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) {
-          if (props.value === undefined) return;
-          _this2.itemRefs[props.value.toString()] = node;
-        },
-        'buttonRefsList': this.buttonRefsList,
-        index: 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: size,
-        buttonRefsList: this.buttonRefsList,
-        index: index
+        ref: function ref(node) {
+          _this2.itemRefs[props.value] = node;
+        }
       };
     }
   }, {
@@ -186,8 +183,8 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _ref = this.asProps,
         _ref5;
-      var STabLine = _baseComponents.Box;
-      var SCaret = _baseComponents.Box;
+      var STabLine = _flexBox.Box;
+      var SCaret = 'div';
       var _this$asProps2 = this.asProps,
         styles = _this$asProps2.styles,
         Children = _this$asProps2.Children,
@@ -196,11 +193,12 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
       return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabLine, _ref5.cn("STabLine", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
         "role": 'tablist',
         "ref": this.containerRef
-      }, _ref))), /*#__PURE__*/_react["default"].createElement(_baseComponents.NeighborLocation, _ref5.cn("NeighborLocation", {
+      }, _ref))), /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"], _ref5.cn("NeighborLocation", {
         "controlsLength": controlsLength
       }), /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {}))), animation && /*#__PURE__*/_react["default"].createElement(SCaret, _ref5.cn("SCaret", (0, _objectSpread2["default"])({}, this.getCaretProps()))));
     }
   }]);
+  return TabLineRoot;
 }(_core.Component);
 (0, _defineProperty2["default"])(TabLineRoot, "displayName", 'TabLine');
 (0, _defineProperty2["default"])(TabLineRoot, "style", style);
@@ -210,40 +208,24 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
   underlined: true,
   behavior: 'auto'
 });
-(0, _defineProperty2["default"])(TabLineRoot, "enhance", [(0, _a11yEnhance["default"])({
-  onNeighborChange: function onNeighborChange(neighborElement, props) {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === 'auto') {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ['role', 'tab']
-})]);
+(0, _defineProperty2["default"])(TabLineRoot, "enhance", [(0, _a11yEnhance["default"])(optionsA11yEnhance)]);
 function TabLineItem(props) {
   var _ref2 = arguments[0];
-  var STabLineItem = _baseComponents.Box;
+  var STabLineItem = _flexBox.Box;
   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["default"].useRef();
-  buttonRefsList[index] = buttonRef;
-  return /*#__PURE__*/_react["default"].createElement(_baseComponents.NeighborLocation.Detect, {
+    neighborLocation = props.neighborLocation;
+  return /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"].Detect, {
     neighborLocation: neighborLocation
   }, function (neighborLocation) {
     var _ref6;
     return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabLineItem, _ref6.cn("STabLineItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
       "tag": 'button',
-      "tabIndex": 0,
       "neighborLocation": neighborLocation,
       "type": 'button',
-      "role": 'tab',
-      "ref": buttonRef
+      "role": 'tab'
     }, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(TabLine.Item.Addon, {
       tag: addonLeft
     }) : null, (0, _addonTextChildren["default"])(Children, TabLine.Item.Text, TabLine.Item.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(TabLine.Item.Addon, {
@@ -251,39 +233,35 @@ function TabLineItem(props) {
     }) : null);
   });
 }
+TabLineItem.enhance = [(0, _keyboardFocusEnhance["default"])()];
 function Text(props) {
   var _ref3 = arguments[0],
     _ref7;
-  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 = _typography.Text;
+  var styles = props.styles;
+  var SText = _flexBox.Box;
   return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SText, _ref7.cn("SText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "ellipsis": ellipsis,
-    "size": size,
-    "hint:triggerRef": buttonRefsList[index]
+    "tag": 'span'
   }, _ref3))));
 }
 function Addon(props) {
   var _ref4 = arguments[0],
     _ref8;
   var styles = props.styles;
-  var SAddon = _baseComponents.Box;
+  var SAddon = _flexBox.Box;
   return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref8.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "tag": 'span'
   }, _ref4))));
 }
-var TabLine = (0, _core.createComponent)(TabLineRoot, {
+var TabLine = (0, _core["default"])(TabLineRoot, {
   Item: [TabLineItem, {
     Text: Text,
     Addon: Addon
   }]
 });
-var wrapTabLine = exports.wrapTabLine = function wrapTabLine(wrapper) {
+var wrapTabLine = function wrapTabLine(wrapper) {
   return wrapper;
 };
-var _default = exports["default"] = TabLine;
+exports.wrapTabLine = wrapTabLine;
+var _default = TabLine;
+exports["default"] = _default;
 //# sourceMappingURL=TabLine.js.map

package/lib/cjs/TabLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","TabLineRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","animation","undefined","React","createRef","_this$state$animation","state","started","setState","_objectSpread2","value","e","handlers","_inherits2","_createClass2","key","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","animationStartTimeout","clearTimeout","fromNode","itemRefs","toString","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","props","index","_this2","_this$asProps","size","isSelected","bindHandlerClick","ref","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","Box","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","assignProps","NeighborLocation","Component","defaultValue","underlined","behavior","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","TabLine","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","_props$ellipsis","ellipsis","SText","SemcoreText","_ref4","_ref8","SAddon","createComponent","wrapTabLine","exports","wrapper","_default"],"sources":["../../src/TabLine.tsx"],"sourcesContent":["import { NeighborLocation, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as SemcoreText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\nimport type { NSTabLine } from './TabLine.type';\n\ntype State = {\n  animation: {\n    fromLeft: number;\n    fromWidth: number;\n    toLeft: number;\n    toWidth: number;\n    started: boolean;\n  } | null;\n};\n\nclass TabLineRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Component>,\n  typeof TabLineRoot.enhance,\n  NSTabLine.Handlers,\n  {},\n  State\n> {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  };\n\n  static enhance = [a11yEnhance({\n    onNeighborChange: (neighborElement, props) => {\n      if (neighborElement) {\n        neighborElement.focus();\n        if (props.behavior === 'auto') {\n          neighborElement.click();\n        }\n      }\n    },\n    childSelector: ['role', 'tab'],\n  })] as const;\n\n  state: State = { animation: null };\n  prevValue: NSTabLine.Props['value'] = undefined;\n  itemRefs: Record<string, HTMLDivElement> = {};\n  containerRef = React.createRef<HTMLDivElement>();\n  animationStartTimeout: ReturnType<typeof setTimeout> | null = null;\n  buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  componentDidUpdate() {\n    if (\n      this.prevValue !== null &&\n      this.asProps.value !== null &&\n      this.prevValue !== this.asProps.value\n    ) {\n      this.animate();\n    }\n    this.prevValue = this.asProps.value;\n  }\n\n  componentDidMount() {\n    this.prevValue = this.asProps.value;\n  }\n\n  componentWillUnmount() {\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n  }\n\n  animate() {\n    if (this.prevValue === undefined || this.asProps.value === undefined) return;\n\n    const fromNode = this.itemRefs[this.prevValue.toString()];\n    const toNode = this.itemRefs[this.asProps.value.toString()];\n    const containerNode = this.containerRef.current;\n\n    if (!fromNode || !toNode || !containerNode) return;\n    const containerRect = containerNode.getBoundingClientRect();\n    const fromRect = fromNode.getBoundingClientRect();\n    const toRect = toNode.getBoundingClientRect();\n    const animation = {\n      fromLeft: fromRect.x - containerRect.x,\n      fromWidth: fromRect.width,\n      toLeft: toRect.x - containerRect.x,\n      toWidth: toRect.width,\n      started: false,\n    };\n    this.setState({ animation });\n\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n\n    this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n  }\n\n  handleAnimationStart = () => {\n    if (this.state.animation?.started === false) {\n      this.setState({ animation: { ...this.state.animation, started: true } });\n    }\n  };\n\n  handleAnimationEnd = () => {\n    this.setState({ animation: null });\n  };\n\n  bindHandlerClick = (value: NSTabLine.Props['value']) => (e: React.SyntheticEvent) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props: NSTabLine.Item.Props, index: number) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      'selected': isSelected,\n      'onClick': this.bindHandlerClick(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'ref': (node: HTMLDivElement) => {\n        if (props.value === undefined) return;\n\n        this.itemRefs[props.value.toString()] = node;\n      },\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(props: NSTabLine.Item.Text.Props, index: number) {\n    const { size: tabLineSize } = this.asProps;\n    const size = props.size\n      ? props.size\n      : tabLineSize === 'm' ? 200 : 300;\n\n    return {\n      size,\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  getCaretProps() {\n    const { animation } = this.state;\n    if (!animation) return {};\n    if (animation.started) {\n      return {\n        style: {\n          left: animation.toLeft,\n          width: animation.toWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    } else {\n      return {\n        style: {\n          left: animation.fromLeft,\n          width: animation.fromWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    }\n  }\n\n  render() {\n    const STabLine = Root;\n    const SCaret = Box;\n    const { styles, Children, controlsLength } = this.asProps;\n    const { animation } = this.state;\n\n    return sstyled(styles)(\n      <STabLine render={Box} role='tablist' ref={this.containerRef}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        {animation && <SCaret {...this.getCaretProps()} />}\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Component,\n    typeof TabLineRoot,\n    'Item'\n  >,\n) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n  const buttonRef = React.useRef<HTMLButtonElement>();\n\n  buttonRefsList[index] = buttonRef;\n\n  return (\n    <NeighborLocation.Detect neighborLocation={neighborLocation}>\n      {(neighborLocation) =>\n        sstyled(styles)(\n          <STabLineItem\n            render={Box}\n            tag='button'\n            tabIndex={0}\n            neighborLocation={neighborLocation}\n            type='button'\n            role='tab'\n            ref={buttonRef}\n          >\n            {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n            {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n            {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n          </STabLineItem>,\n        )}\n    </NeighborLocation.Detect>\n  );\n}\n\nfunction Text(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Text.Component,\n    typeof TabLineRoot,\n    'ItemText'\n  >,\n) {\n  const { styles, ellipsis = true, size, buttonRefsList, index } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={SemcoreText} ellipsis={ellipsis} size={size} hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Item.Addon.Component>,\n) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n}) as unknown as NSTabLine.Component;\n\nexport const wrapTabLine = <PropsExtending extends {}>(wrapper: (\n  props: Intergalactic.InternalTypings.UntypeRefAndTag<\n    Intergalactic.InternalTypings.ComponentPropsNesting<NSTabLine.WrapperComponent>\n  > &\n  PropsExtending,\n) => React.ReactNode) => wrapper as NSTabLine.WrapperComponent<PropsExtending>;\n\nexport default TabLine;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabLine.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_keyboardFocusEnhance","_a11yEnhance","_neighborLocation","style","_index","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","animation","undefined","React","createRef","_this$state$animation","state","started","setState","_objectSpread2","value","e","handlers","_createClass2","key","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","clearTimeout","animationStartTimeout","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","index","_this2","_this$asProps","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","ref","node","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","Box","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","assignProps","Component","defaultValue","underlined","a11yEnhance","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","Detect","_ref6","TabLine","Item","Addon","tag","addonTextChildren","Text","enhance","keyboardFocusEnhance","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapTabLine","wrapper","exports","_default"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation from '@semcore/neighbor-location';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement, props) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      if (props.behavior === 'auto') {\n        neighborElement.click();\n      }\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  };\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n  state = { animation: null };\n  prevValue = undefined;\n  itemRefs = {};\n  containerRef = React.createRef();\n  animationStartTimeout = -1;\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  componentDidUpdate() {\n    if (\n      this.prevValue !== null &&\n      this.asProps.value !== null &&\n      this.prevValue !== this.asProps.value\n    ) {\n      this.animate();\n    }\n    this.prevValue = this.asProps.value;\n  }\n  componentDidMount() {\n    this.prevValue = this.asProps.value;\n  }\n  componentWillUnmount() {\n    clearTimeout(this.animationStartTimeout);\n  }\n\n  animate() {\n    const fromNode = this.itemRefs[this.prevValue];\n    const toNode = this.itemRefs[this.asProps.value];\n    const containerNode = this.containerRef.current;\n\n    if (!fromNode || !toNode || !containerNode) return;\n    const containerRect = containerNode.getBoundingClientRect();\n    const fromRect = fromNode.getBoundingClientRect();\n    const toRect = toNode.getBoundingClientRect();\n    const animation = {\n      fromLeft: fromRect.x - containerRect.x,\n      fromWidth: fromRect.width,\n      toLeft: toRect.x - containerRect.x,\n      toWidth: toRect.width,\n      started: false,\n    };\n    this.setState({ animation });\n    clearTimeout(this.animationStartTimeout);\n    this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n  }\n\n  handleAnimationStart = () => {\n    if (this.state.animation?.started === false) {\n      this.setState({ animation: { ...this.state.animation, started: true } });\n    }\n  };\n  handleAnimationEnd = () => {\n    this.setState({ animation: null });\n  };\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props, index) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      selected: isSelected,\n      onClick: this.bindHandlerClick(props.value),\n      tabIndex: isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      ref: (node) => {\n        this.itemRefs[props.value] = node;\n      },\n    };\n  }\n\n  getCaretProps() {\n    const { animation } = this.state;\n    if (!animation) return {};\n    if (animation.started) {\n      return {\n        style: {\n          left: animation.toLeft,\n          width: animation.toWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    } else {\n      return {\n        style: {\n          left: animation.fromLeft,\n          width: animation.fromWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    }\n  }\n\n  render() {\n    const STabLine = Root;\n    const SCaret = 'div';\n    const { styles, Children, controlsLength } = this.asProps;\n    const { animation } = this.state;\n\n    return sstyled(styles)(\n      <STabLine render={Box} role='tablist' ref={this.containerRef}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        {animation && <SCaret {...this.getCaretProps()} />}\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(props) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation } = props;\n\n  return (\n    <NeighborLocation.Detect neighborLocation={neighborLocation}>\n      {(neighborLocation) =>\n        sstyled(styles)(\n          <STabLineItem\n            render={Box}\n            tag='button'\n            neighborLocation={neighborLocation}\n            type='button'\n            role='tab'\n          >\n            {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n            {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n            {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n          </STabLineItem>,\n        )\n      }\n    </NeighborLocation.Detect>\n  );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance()];\n\nfunction Text(props) {\n  const { styles } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\n\nexport const wrapTabLine = (wrapper) => wrapper;\n\nexport default TabLine;\n"],"mappings":"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"}

package/lib/cjs/index.d.js

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

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

@@ -0,0 +1 @@
+{"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/cjs/index.js

@@ -1,34 +1,25 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  wrapTabLine: true
-};
+var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _TabLine["default"];
   }
 });
-Object.defineProperty(exports, "wrapTabLine", {
-  enumerable: true,
-  get: function get() {
-    return _TabLine.wrapTabLine;
-  }
-});
 var _TabLine = _interopRequireWildcard(require("./TabLine"));
-var _TabLine2 = require("./TabLine.type");
-Object.keys(_TabLine2).forEach(function (key) {
+Object.keys(_TabLine).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TabLine2[key]) return;
+  if (key in exports && exports[key] === _TabLine[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _TabLine2[key];
+      return _TabLine[key];
     }
   });
 });

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_TabLine","_interopRequireWildcard","require","_TabLine2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.ts"],"sourcesContent":["export { default, wrapTabLine } from './TabLine';\nexport * from './TabLine.type';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,SAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,SAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAZ,SAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_TabLine","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabLine';\nexport * from './TabLine';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,QAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,QAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAd,QAAA,CAAAM,GAAA;IAAA;EAAA;AAAA"}

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

@@ -24,7 +24,7 @@ STabLineItem {
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
   overflow: visible;
-  /*outline: 0;*/
+  outline: 0;
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
@@ -41,7 +41,9 @@ STabLineItem {
   }
 
   &:active,
-  &:hover {
+  &:hover,
+  &:focus {
+    outline: 0;
     text-decoration: none;
   }
 
@@ -66,7 +68,7 @@ STabLineItem {
 
   &[selected]::after {
     transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
-    background-color: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
+    background-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
   }
 
   & SText:not(:last-child) {
@@ -82,7 +84,7 @@ SCaret {
   position: absolute;
   bottom: -1px;
   height: 3px;
-  background: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
+  background-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
   transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
 }
 
@@ -97,6 +99,17 @@ STabLineItem[disabled] {
   pointer-events: none;
 }
 
+STabLineItem[keyboardFocused] {
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
+}
+
+SText {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 SAddon {
   display: inline-flex;
   align-items: center;
@@ -106,11 +119,21 @@ 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'] {
@@ -133,4 +156,4 @@ STabLineItem[neighborLocation='left'] {
   SCaret {
     display: none;
   }
-}
+}