@semcore/tab-line 4.40.2 → 4.40.3

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [4.40.3] - 2025-05-09
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/flex-box` [5.41.2 ~> 5.41.3], `@semcore/neighbor-location` [4.40.2 ~> 4.40.3], `@semcore/utils` [4.48.2 ~> 4.48.4], `@semcore/core` [2.39.2 ~> 2.39.3]).
+
 ## [4.40.2] - 2025-04-04
 
 ### Changed

package/lib/cjs/TabLine.js

@@ -21,20 +21,22 @@ var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addo
 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__*/_index.sstyled.insert( /*__inner_css_start__*/".___STabLine_xoas8_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_xoas8_gg_.__underlined_xoas8_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_xoas8_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_xoas8_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_xoas8_gg_:active,.___STabLineItem_xoas8_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_xoas8_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_xoas8_gg_::after,.___STabLineItem_xoas8_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_xoas8_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_xoas8_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_xoas8_gg_.__selected_xoas8_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_xoas8_gg_ .___SAddon_xoas8_gg_:not(:last-child),.___STabLineItem_xoas8_gg_ .___SText_xoas8_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_xoas8_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_xoas8_gg_.__selected_xoas8_gg_{flex-shrink:0}.___STabLineItem_xoas8_gg_.__disabled_xoas8_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_xoas8_gg_.__keyboardFocused_xoas8_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_xoas8_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_xoas8_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_xoas8_gg_._size_m_xoas8_gg_{height:28px;min-width:18px}.___STabLineItem_xoas8_gg_._size_m_xoas8_gg_ .___SText_xoas8_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_xoas8_gg_._size_l_xoas8_gg_{height:40px;min-width:26px}.___STabLineItem_xoas8_gg_._size_l_xoas8_gg_ .___SText_xoas8_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_xoas8_gg_._neighborLocation_left_xoas8_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_xoas8_gg_.__selected_xoas8_gg_::after,.___STabLineItem_xoas8_gg_::after,.___STabLineItem_xoas8_gg_::before{transition:none}.___SCaret_xoas8_gg_{display:none}}" /*__inner_css_end__*/, "xoas8_gg_") /*__reshadow_css_end__*/, {
-  "__STabLine": "___STabLine_xoas8_gg_",
-  "_underlined": "__underlined_xoas8_gg_",
-  "__SCaret": "___SCaret_xoas8_gg_",
-  "__STabLineItem": "___STabLineItem_xoas8_gg_",
-  "_selected": "__selected_xoas8_gg_",
-  "_disabled": "__disabled_xoas8_gg_",
-  "_keyboardFocused": "__keyboardFocused_xoas8_gg_",
-  "__SText": "___SText_xoas8_gg_",
-  "__SAddon": "___SAddon_xoas8_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_xoas8_gg_",
-  "_size_m": "_size_m_xoas8_gg_",
-  "_size_l": "_size_l_xoas8_gg_"
+/*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___STabLine_aog65_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_aog65_gg_.__underlined_aog65_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_aog65_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_aog65_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_aog65_gg_:active,.___STabLineItem_aog65_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_aog65_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_aog65_gg_::after,.___STabLineItem_aog65_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_aog65_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_aog65_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_aog65_gg_.__selected_aog65_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_aog65_gg_ .___SAddon_aog65_gg_:not(:last-child),.___STabLineItem_aog65_gg_ .___SText_aog65_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_aog65_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_aog65_gg_.__selected_aog65_gg_{flex-shrink:0}.___STabLineItem_aog65_gg_.__disabled_aog65_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_aog65_gg_.__keyboardFocused_aog65_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_aog65_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_aog65_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_aog65_gg_._size_m_aog65_gg_{height:28px;min-width:18px}.___STabLineItem_aog65_gg_._size_m_aog65_gg_ .___SText_aog65_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_aog65_gg_._size_l_aog65_gg_{height:40px;min-width:26px}.___STabLineItem_aog65_gg_._size_l_aog65_gg_ .___SText_aog65_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_aog65_gg_._neighborLocation_left_aog65_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_aog65_gg_.__selected_aog65_gg_::after,.___STabLineItem_aog65_gg_::after,.___STabLineItem_aog65_gg_::before{transition:none}.___SCaret_aog65_gg_{display:none}}", /*__inner_css_end__*/"aog65_gg_"),
+/*__reshadow_css_end__*/
+{
+  "__STabLine": "___STabLine_aog65_gg_",
+  "_underlined": "__underlined_aog65_gg_",
+  "__SCaret": "___SCaret_aog65_gg_",
+  "__STabLineItem": "___STabLineItem_aog65_gg_",
+  "_selected": "__selected_aog65_gg_",
+  "_disabled": "__disabled_aog65_gg_",
+  "_keyboardFocused": "__keyboardFocused_aog65_gg_",
+  "__SText": "___SText_aog65_gg_",
+  "__SAddon": "___SAddon_aog65_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_aog65_gg_",
+  "_size_m": "_size_m_aog65_gg_",
+  "_size_l": "_size_l_aog65_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement, props) {

package/lib/cjs/TabLine.js.map

@@ -1 +1 @@
-{"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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"}
+{"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/es6/TabLine.js

@@ -17,20 +17,22 @@ 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_xoas8_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_xoas8_gg_.__underlined_xoas8_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_xoas8_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_xoas8_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_xoas8_gg_:active,.___STabLineItem_xoas8_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_xoas8_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_xoas8_gg_::after,.___STabLineItem_xoas8_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_xoas8_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_xoas8_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_xoas8_gg_.__selected_xoas8_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_xoas8_gg_ .___SAddon_xoas8_gg_:not(:last-child),.___STabLineItem_xoas8_gg_ .___SText_xoas8_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_xoas8_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_xoas8_gg_.__selected_xoas8_gg_{flex-shrink:0}.___STabLineItem_xoas8_gg_.__disabled_xoas8_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_xoas8_gg_.__keyboardFocused_xoas8_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_xoas8_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_xoas8_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_xoas8_gg_._size_m_xoas8_gg_{height:28px;min-width:18px}.___STabLineItem_xoas8_gg_._size_m_xoas8_gg_ .___SText_xoas8_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_xoas8_gg_._size_l_xoas8_gg_{height:40px;min-width:26px}.___STabLineItem_xoas8_gg_._size_l_xoas8_gg_ .___SText_xoas8_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_xoas8_gg_._neighborLocation_left_xoas8_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_xoas8_gg_.__selected_xoas8_gg_::after,.___STabLineItem_xoas8_gg_::after,.___STabLineItem_xoas8_gg_::before{transition:none}.___SCaret_xoas8_gg_{display:none}}" /*__inner_css_end__*/, "xoas8_gg_") /*__reshadow_css_end__*/, {
-  "__STabLine": "___STabLine_xoas8_gg_",
-  "_underlined": "__underlined_xoas8_gg_",
-  "__SCaret": "___SCaret_xoas8_gg_",
-  "__STabLineItem": "___STabLineItem_xoas8_gg_",
-  "_selected": "__selected_xoas8_gg_",
-  "_disabled": "__disabled_xoas8_gg_",
-  "_keyboardFocused": "__keyboardFocused_xoas8_gg_",
-  "__SText": "___SText_xoas8_gg_",
-  "__SAddon": "___SAddon_xoas8_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_xoas8_gg_",
-  "_size_m": "_size_m_xoas8_gg_",
-  "_size_l": "_size_l_xoas8_gg_"
+/*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STabLine_aog65_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_aog65_gg_.__underlined_aog65_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_aog65_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_aog65_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_aog65_gg_:active,.___STabLineItem_aog65_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_aog65_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_aog65_gg_::after,.___STabLineItem_aog65_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_aog65_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_aog65_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_aog65_gg_.__selected_aog65_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_aog65_gg_ .___SAddon_aog65_gg_:not(:last-child),.___STabLineItem_aog65_gg_ .___SText_aog65_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_aog65_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_aog65_gg_.__selected_aog65_gg_{flex-shrink:0}.___STabLineItem_aog65_gg_.__disabled_aog65_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_aog65_gg_.__keyboardFocused_aog65_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_aog65_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_aog65_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_aog65_gg_._size_m_aog65_gg_{height:28px;min-width:18px}.___STabLineItem_aog65_gg_._size_m_aog65_gg_ .___SText_aog65_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_aog65_gg_._size_l_aog65_gg_{height:40px;min-width:26px}.___STabLineItem_aog65_gg_._size_l_aog65_gg_ .___SText_aog65_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_aog65_gg_._neighborLocation_left_aog65_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_aog65_gg_.__selected_aog65_gg_::after,.___STabLineItem_aog65_gg_::after,.___STabLineItem_aog65_gg_::before{transition:none}.___SCaret_aog65_gg_{display:none}}", /*__inner_css_end__*/"aog65_gg_"),
+/*__reshadow_css_end__*/
+{
+  "__STabLine": "___STabLine_aog65_gg_",
+  "_underlined": "__underlined_aog65_gg_",
+  "__SCaret": "___SCaret_aog65_gg_",
+  "__STabLineItem": "___STabLineItem_aog65_gg_",
+  "_selected": "__selected_aog65_gg_",
+  "_disabled": "__disabled_aog65_gg_",
+  "_keyboardFocused": "__keyboardFocused_aog65_gg_",
+  "__SText": "___SText_aog65_gg_",
+  "__SAddon": "___SAddon_aog65_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_aog65_gg_",
+  "_size_m": "_size_m_aog65_gg_",
+  "_size_l": "_size_l_aog65_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement, props) {

package/lib/es6/TabLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","animation","undefined","createRef","_this$state$animation","state","started","setState","_objectSpread","value","e","handlers","_createClass","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","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","Text","enhance","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"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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"}
+{"version":3,"file":"TabLine.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","animation","undefined","createRef","_this$state$animation","state","started","setState","_objectSpread","value","e","handlers","_createClass","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","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","Text","enhance","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"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/esm/TabLine.mjs

@@ -1,204 +1,254 @@
-import u from "@babel/runtime/helpers/esm/objectSpread2";
-import y from "@babel/runtime/helpers/esm/classCallCheck";
-import I from "@babel/runtime/helpers/esm/createClass";
-import d from "@babel/runtime/helpers/esm/assertThisInitialized";
-import k from "@babel/runtime/helpers/esm/inherits";
-import C from "@babel/runtime/helpers/esm/createSuper";
-import l from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as w } from "@semcore/utils/lib/core/index";
-import P, { sstyled as x, assignProps as b, Component as R } from "@semcore/core";
-import c from "react";
-import { Box as v } from "@semcore/flex-box";
-import z from "@semcore/utils/lib/addonTextChildren";
-import A from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
-import E from "@semcore/utils/lib/enhances/a11yEnhance";
-import T from "@semcore/neighbor-location";
-var N = (
+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 _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 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__*/
-  (w.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    '.___STabLine_xoas8_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_xoas8_gg_.__underlined_xoas8_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_xoas8_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_xoas8_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_xoas8_gg_:active,.___STabLineItem_xoas8_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_xoas8_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_xoas8_gg_::after,.___STabLineItem_xoas8_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_xoas8_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_xoas8_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_xoas8_gg_.__selected_xoas8_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_xoas8_gg_ .___SAddon_xoas8_gg_:not(:last-child),.___STabLineItem_xoas8_gg_ .___SText_xoas8_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_xoas8_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_xoas8_gg_.__selected_xoas8_gg_{flex-shrink:0}.___STabLineItem_xoas8_gg_.__disabled_xoas8_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_xoas8_gg_.__keyboardFocused_xoas8_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_xoas8_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_xoas8_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_xoas8_gg_._size_m_xoas8_gg_{height:28px;min-width:18px}.___STabLineItem_xoas8_gg_._size_m_xoas8_gg_ .___SText_xoas8_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_xoas8_gg_._size_l_xoas8_gg_{height:40px;min-width:26px}.___STabLineItem_xoas8_gg_._size_l_xoas8_gg_ .___SText_xoas8_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_xoas8_gg_._neighborLocation_left_xoas8_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_xoas8_gg_.__selected_xoas8_gg_::after,.___STabLineItem_xoas8_gg_::after,.___STabLineItem_xoas8_gg_::before{transition:none}.___SCaret_xoas8_gg_{display:none}}',
-    "xoas8_gg_"
-  ), {
-    __STabLine: "___STabLine_xoas8_gg_",
-    _underlined: "__underlined_xoas8_gg_",
-    __SCaret: "___SCaret_xoas8_gg_",
-    __STabLineItem: "___STabLineItem_xoas8_gg_",
-    _selected: "__selected_xoas8_gg_",
-    _disabled: "__disabled_xoas8_gg_",
-    _keyboardFocused: "__keyboardFocused_xoas8_gg_",
-    __SText: "___SText_xoas8_gg_",
-    __SAddon: "___SAddon_xoas8_gg_",
-    _neighborLocation_left: "_neighborLocation_left_xoas8_gg_",
-    _size_m: "_size_m_xoas8_gg_",
-    _size_l: "_size_l_xoas8_gg_"
+    '.___STabLine_aog65_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_aog65_gg_.__underlined_aog65_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_aog65_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_aog65_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_aog65_gg_:active,.___STabLineItem_aog65_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_aog65_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_aog65_gg_::after,.___STabLineItem_aog65_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_aog65_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_aog65_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_aog65_gg_.__selected_aog65_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_aog65_gg_ .___SAddon_aog65_gg_:not(:last-child),.___STabLineItem_aog65_gg_ .___SText_aog65_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_aog65_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_aog65_gg_.__selected_aog65_gg_{flex-shrink:0}.___STabLineItem_aog65_gg_.__disabled_aog65_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_aog65_gg_.__keyboardFocused_aog65_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_aog65_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_aog65_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_aog65_gg_._size_m_aog65_gg_{height:28px;min-width:18px}.___STabLineItem_aog65_gg_._size_m_aog65_gg_ .___SText_aog65_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_aog65_gg_._size_l_aog65_gg_{height:40px;min-width:26px}.___STabLineItem_aog65_gg_._size_l_aog65_gg_ .___SText_aog65_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_aog65_gg_._neighborLocation_left_aog65_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_aog65_gg_.__selected_aog65_gg_::after,.___STabLineItem_aog65_gg_::after,.___STabLineItem_aog65_gg_::before{transition:none}.___SCaret_aog65_gg_{display:none}}',
+    /*__inner_css_end__*/
+    "aog65_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__STabLine": "___STabLine_aog65_gg_",
+    "_underlined": "__underlined_aog65_gg_",
+    "__SCaret": "___SCaret_aog65_gg_",
+    "__STabLineItem": "___STabLineItem_aog65_gg_",
+    "_selected": "__selected_aog65_gg_",
+    "_disabled": "__disabled_aog65_gg_",
+    "_keyboardFocused": "__keyboardFocused_aog65_gg_",
+    "__SText": "___SText_aog65_gg_",
+    "__SAddon": "___SAddon_aog65_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_aog65_gg_",
+    "_size_m": "_size_m_aog65_gg_",
+    "_size_l": "_size_l_aog65_gg_"
   })
-), V = {
-  onNeighborChange: function(o, a) {
-    o && (o.focus(), a.behavior === "auto" && o.click());
+);
+var optionsA11yEnhance = {
+  onNeighborChange: function onNeighborChange(neighborElement, props) {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === "auto") {
+        neighborElement.click();
+      }
+    }
   },
   childSelector: ["role", "tab"]
-}, h = /* @__PURE__ */ function(_) {
-  k(a, _);
-  var o = C(a);
-  function a() {
-    var e;
-    y(this, a);
-    for (var t = arguments.length, n = new Array(t), r = 0; r < t; r++)
-      n[r] = arguments[r];
-    return e = o.call.apply(o, [this].concat(n)), l(d(e), "state", {
+};
+var TabLineRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(TabLineRoot2, _Component);
+  var _super = _createSuper(TabLineRoot2);
+  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", {
       animation: null
-    }), l(d(e), "prevValue", void 0), l(d(e), "itemRefs", {}), l(d(e), "containerRef", /* @__PURE__ */ c.createRef()), l(d(e), "animationStartTimeout", -1), l(d(e), "handleAnimationStart", function() {
-      var i;
-      ((i = e.state.animation) === null || i === void 0 ? void 0 : i.started) === !1 && e.setState({
-        animation: u(u({}, e.state.animation), {}, {
-          started: !0
-        })
-      });
-    }), l(d(e), "handleAnimationEnd", function() {
-      e.setState({
+    });
+    _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() {
+      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({
+          animation: _objectSpread(_objectSpread({}, _this.state.animation), {}, {
+            started: true
+          })
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleAnimationEnd", function() {
+      _this.setState({
         animation: null
       });
-    }), l(d(e), "bindHandlerClick", function(i) {
-      return function(s) {
-        e.handlers.value(i, s);
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function(value) {
+      return function(e) {
+        _this.handlers.value(value, e);
       };
-    }), e;
+    });
+    return _this;
   }
-  return I(a, [{
+  _createClass(TabLineRoot2, [{
     key: "uncontrolledProps",
-    value: function() {
+    value: function uncontrolledProps() {
       return {
         value: null
       };
     }
   }, {
     key: "componentDidUpdate",
-    value: function() {
-      this.prevValue !== null && this.asProps.value !== null && this.prevValue !== this.asProps.value && this.animate(), this.prevValue = this.asProps.value;
+    value: function componentDidUpdate() {
+      if (this.prevValue !== null && this.asProps.value !== null && this.prevValue !== this.asProps.value) {
+        this.animate();
+      }
+      this.prevValue = this.asProps.value;
     }
   }, {
     key: "componentDidMount",
-    value: function() {
+    value: function componentDidMount() {
       this.prevValue = this.asProps.value;
     }
   }, {
     key: "componentWillUnmount",
-    value: function() {
+    value: function componentWillUnmount() {
       clearTimeout(this.animationStartTimeout);
     }
   }, {
     key: "animate",
-    value: function() {
-      var t = this.itemRefs[this.prevValue], n = this.itemRefs[this.asProps.value], r = this.containerRef.current;
-      if (!(!t || !n || !r)) {
-        var i = r.getBoundingClientRect(), s = t.getBoundingClientRect(), g = n.getBoundingClientRect(), m = {
-          fromLeft: s.x - i.x,
-          fromWidth: s.width,
-          toLeft: g.x - i.x,
-          toWidth: g.width,
-          started: !1
-        };
-        this.setState({
-          animation: m
-        }), clearTimeout(this.animationStartTimeout), this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
-      }
+    value: function animate() {
+      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();
+      var fromRect = fromNode.getBoundingClientRect();
+      var toRect = toNode.getBoundingClientRect();
+      var animation = {
+        fromLeft: fromRect.x - containerRect.x,
+        fromWidth: fromRect.width,
+        toLeft: toRect.x - containerRect.x,
+        toWidth: toRect.width,
+        started: false
+      };
+      this.setState({
+        animation
+      });
+      clearTimeout(this.animationStartTimeout);
+      this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
     }
   }, {
     key: "getItemProps",
-    value: function(t, n) {
-      var r = this, i = this.asProps, s = i.value, g = i.size, m = s === t.value;
+    value: function getItemProps(props, index) {
+      var _this2 = this;
+      var _this$asProps = this.asProps, value = _this$asProps.value, size = _this$asProps.size;
+      var isSelected = value === props.value;
       return {
-        size: g,
-        selected: m,
-        onClick: this.bindHandlerClick(t.value),
-        tabIndex: m ? 0 : -1,
-        "aria-selected": m,
-        ref: function(p) {
-          r.itemRefs[t.value] = p;
+        size,
+        selected: isSelected,
+        onClick: this.bindHandlerClick(props.value),
+        tabIndex: isSelected ? 0 : -1,
+        "aria-selected": isSelected,
+        ref: function ref(node) {
+          _this2.itemRefs[props.value] = node;
         }
       };
     }
   }, {
     key: "getCaretProps",
-    value: function() {
-      var t = this.state.animation;
-      return t ? t.started ? {
-        style: {
-          left: t.toLeft,
-          width: t.toWidth
-        },
-        onTransitionEnd: this.handleAnimationEnd
-      } : {
-        style: {
-          left: t.fromLeft,
-          width: t.fromWidth
-        },
-        onTransitionEnd: this.handleAnimationEnd
-      } : {};
+    value: function getCaretProps() {
+      var animation = this.state.animation;
+      if (!animation) return {};
+      if (animation.started) {
+        return {
+          style: {
+            left: animation.toLeft,
+            width: animation.toWidth
+          },
+          onTransitionEnd: this.handleAnimationEnd
+        };
+      } else {
+        return {
+          style: {
+            left: animation.fromLeft,
+            width: animation.fromWidth
+          },
+          onTransitionEnd: this.handleAnimationEnd
+        };
+      }
     }
   }, {
     key: "render",
-    value: function() {
-      var t = this.asProps, n, r = v, i = "div", s = this.asProps, g = s.styles, m = s.Children, S = s.controlsLength, p = this.state.animation;
-      return n = x(g), /* @__PURE__ */ c.createElement(r, n.cn("STabLine", u({}, b({
-        role: "tablist",
-        ref: this.containerRef
-      }, t))), /* @__PURE__ */ c.createElement(T, n.cn("NeighborLocation", {
-        controlsLength: S
-      }), /* @__PURE__ */ c.createElement(m, n.cn("Children", {}))), p && /* @__PURE__ */ c.createElement(i, n.cn("SCaret", u({}, this.getCaretProps()))));
+    value: function render() {
+      var _ref = this.asProps, _ref5;
+      var STabLine = Box;
+      var SCaret = "div";
+      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({
+        "role": "tablist",
+        "ref": this.containerRef
+      }, _ref))), /* @__PURE__ */ React.createElement(NeighborLocation, _ref5.cn("NeighborLocation", {
+        "controlsLength": controlsLength
+      }), /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {}))), animation && /* @__PURE__ */ React.createElement(SCaret, _ref5.cn("SCaret", _objectSpread({}, this.getCaretProps()))));
     }
-  }]), a;
-}(R);
-l(h, "displayName", "TabLine");
-l(h, "style", N);
-l(h, "defaultProps", {
+  }]);
+  return TabLineRoot2;
+}(Component);
+_defineProperty(TabLineRoot, "displayName", "TabLine");
+_defineProperty(TabLineRoot, "style", style);
+_defineProperty(TabLineRoot, "defaultProps", {
   defaultValue: null,
   size: "m",
-  underlined: !0,
+  underlined: true,
   behavior: "auto"
 });
-l(h, "enhance", [E(V)]);
-function L(_) {
-  var o = arguments[0], a = v, e = _.Children, t = _.styles, n = _.addonLeft, r = _.addonRight, i = _.neighborLocation;
-  return /* @__PURE__ */ c.createElement(T.Detect, {
-    neighborLocation: i
-  }, function(s) {
-    var g;
-    return g = x(t), /* @__PURE__ */ c.createElement(a, g.cn("STabLineItem", u({}, b({
-      tag: "button",
-      neighborLocation: s,
-      type: "button",
-      role: "tab"
-    }, o))), n ? /* @__PURE__ */ c.createElement(f.Item.Addon, {
-      tag: n
-    }) : null, z(e, f.Item.Text, f.Item.Addon), r ? /* @__PURE__ */ c.createElement(f.Item.Addon, {
-      tag: r
+_defineProperty(TabLineRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
+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;
+  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({
+      "tag": "button",
+      "neighborLocation": neighborLocation2,
+      "type": "button",
+      "role": "tab"
+    }, _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, {
+      tag: addonRight
     }) : null);
   });
 }
-L.enhance = [A()];
-function W(_) {
-  var o = arguments[0], a, e = _.styles, t = v;
-  return a = x(e), /* @__PURE__ */ c.createElement(t, a.cn("SText", u({}, b({
-    tag: "span"
-  }, o))));
+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"
+  }, _ref3))));
 }
-function D(_) {
-  var o = arguments[0], a, e = _.styles, t = v;
-  return a = x(e), /* @__PURE__ */ c.createElement(t, a.cn("SAddon", u({}, b({
-    tag: "span"
-  }, o))));
+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({
+    "tag": "span"
+  }, _ref4))));
 }
-var f = P(h, {
-  Item: [L, {
-    Text: W,
-    Addon: D
+var TabLine = createComponent(TabLineRoot, {
+  Item: [TabLineItem, {
+    Text,
+    Addon
   }]
-}), Z = function(o) {
-  return o;
+});
+var wrapTabLine = function wrapTabLine2(wrapper) {
+  return wrapper;
 };
 export {
-  f as default,
-  Z as wrapTabLine
+  TabLine as default,
+  wrapTabLine
 };

package/lib/esm/index.mjs

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

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

@@ -0,0 +1,159 @@
+STabLine {
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+}
+
+STabLine[underlined] {
+  border-bottom: 1px solid var(--intergalactic-border-primary, #c4c7cf);
+}
+
+STabLineItem {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  touch-action: manipulation;
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  box-shadow: 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: none;
+  background: transparent;
+  color: var(--intergalactic-text-primary, #191b23);
+  margin-right: var(--intergalactic-spacing-4x, 16px);
+  font-weight: var(--intergalactic-medium, 500);
+
+  &::-moz-focus-inner {
+    border: none;
+    padding: 0;
+  }
+
+  &:active,
+  &:hover,
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    height: 3px;
+    width: 100%;
+    background-color: transparent;
+  }
+
+  &::before {
+    transition: background-color calc(var(--intergalactic-duration-control, 200) * 1ms) ease-in-out;
+  }
+
+  &:hover::before {
+    background-color: var(--intergalactic-border-primary, #c4c7cf);
+  }
+
+  &[selected]::after {
+    transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
+    background-color: var(--intergalactic-border-info-active, #006dca);
+  }
+
+  & SText:not(:last-child) {
+    margin-right: var(--intergalactic-spacing-2x, 8px);
+  }
+
+  & SAddon:not(:last-child) {
+    margin-right: var(--intergalactic-spacing-2x, 8px);
+  }
+}
+
+SCaret {
+  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[selected] {
+  flex-shrink: 0;
+}
+
+STabLineItem[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  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;
+  justify-content: center;
+}
+
+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'] {
+  margin-right: 0;
+}
+
+@media (prefers-reduced-motion) {
+  STabLineItem {
+
+    &::before,
+    &::after {
+      transition: none;
+    }
+
+    &[selected]::after {
+      transition: none;
+    }
+  }
+
+  SCaret {
+    display: none;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-line",
   "description": "Semrush TabLine Component",
-  "version": "4.40.2",
+  "version": "4.40.3",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,9 +14,9 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "5.41.2",
-    "@semcore/neighbor-location": "4.40.2",
-    "@semcore/utils": "4.48.2"
+    "@semcore/flex-box": "5.41.3",
+    "@semcore/neighbor-location": "4.40.3",
+    "@semcore/utils": "4.48.4"
   },
   "peerDependencies": {
     "@semcore/core": "^2.17.5",