@semcore/tab-line 17.2.1 → 18.0.0-prerelease.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [18.0.0] - 2026-09-28
+
+### BREAK
+
+- New theme applied.
+
 ## [17.2.1] - 2026-06-26
 
 ### Fixed

package/lib/cjs/TabLine.js

@@ -13,20 +13,19 @@ var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhan
 var _typography = require("@semcore/typography");
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabLine_1n7v4_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1n7v4_gg_.__underlined_1n7v4_gg_{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLine_1n7v4_gg_.__underlined_1n7v4_gg_{border-bottom:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___STabLineItem_1n7v4_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:none;background:#0000;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));margin-right:var(--intergalactic-spacing-4x,16px);font-weight:var(--intergalactic-medium,500)}.___STabLineItem_1n7v4_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_1n7v4_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1n7v4_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1n7v4_gg_:after,.___STabLineItem_1n7v4_gg_:before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:initial}.___STabLineItem_1n7v4_gg_:before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1n7v4_gg_:hover:before{background-color:var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLineItem_1n7v4_gg_:hover:before{background-color:var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}}.___STabLineItem_1n7v4_gg_.__selected_1n7v4_gg_:after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active,oklch(.7 .131 275.2))}.___STabLineItem_1n7v4_gg_ .___SAddon_1n7v4_gg_:not(:last-child),.___STabLineItem_1n7v4_gg_ .___SText_1n7v4_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x,8px)}.___SCaret_1n7v4_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active,oklch(.7 .131 275.2));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1n7v4_gg_.__selected_1n7v4_gg_{flex-shrink:0}.___STabLineItem_1n7v4_gg_.__disabled_1n7v4_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default;pointer-events:none}.___SAddon_1n7v4_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1n7v4_gg_._size_m_1n7v4_gg_{height:28px;min-width:18px}.___STabLineItem_1n7v4_gg_._size_l_1n7v4_gg_{height:40px;min-width:26px}.___STabLineItem_1n7v4_gg_._neighborLocation_left_1n7v4_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1n7v4_gg_.__selected_1n7v4_gg_:after,.___STabLineItem_1n7v4_gg_:after,.___STabLineItem_1n7v4_gg_:before{transition:none}.___SCaret_1n7v4_gg_{display:none}}", /*__inner_css_end__*/"1n7v4_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabLine_1ltid_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1ltid_gg_._size_m_1ltid_gg_{gap:var(--intergalactic-spacing-content-gap-xxlarge,16px)}.___STabLine_1ltid_gg_._size_l_1ltid_gg_{gap:var(--intergalactic-spacing-content-gap-xxlarge-extended,20px)}.___STabLine_1ltid_gg_.__underlined_1ltid_gg_{border-bottom:1px solid var(--intergalactic-control-tab-line-border,#000c0829)}@media (color-gamut:p3){.___STabLine_1ltid_gg_.__underlined_1ltid_gg_{border-bottom:1px solid var(--intergalactic-control-tab-line-border,oklch(.137 .026 175.7/.161))}}.___STabLineItem_1ltid_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:none;background:#0000;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));gap:var(--intergalactic-spacing-content-gap-medium,6px);font-weight:var(--intergalactic-medium,500)}.___STabLineItem_1ltid_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_1ltid_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1ltid_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1ltid_gg_:after,.___STabLineItem_1ltid_gg_:before{content:\"\";position:absolute;left:0;bottom:0;height:2px;width:100%;background-color:initial}.___STabLineItem_1ltid_gg_:before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1ltid_gg_:hover:before{background-color:var(--intergalactic-control-tab-line-border-hover,#000c0829);transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms)}@media (color-gamut:p3){.___STabLineItem_1ltid_gg_:hover:before{background-color:var(--intergalactic-control-tab-line-border-hover,oklch(.137 .026 175.7/.161))}}}.___STabLineItem_1ltid_gg_.__selected_1ltid_gg_:after{bottom:-1px;height:3px;transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-control-tab-line-border-active,oklch(.23 .01 140))}.___SCaret_1ltid_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-control-tab-line-border-active,oklch(.23 .01 140));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1ltid_gg_.__selected_1ltid_gg_{flex-shrink:0}.___STabLineItem_1ltid_gg_.__disabled_1ltid_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default;pointer-events:none}.___SAddon_1ltid_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1ltid_gg_._size_m_1ltid_gg_{height:var(--intergalactic-form-control-m,32px);min-width:18px}.___STabLineItem_1ltid_gg_._size_l_1ltid_gg_{height:var(--intergalactic-form-control-l,44px);min-width:26px}.___STabLineItem_1ltid_gg_._neighborLocation_left_1ltid_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1ltid_gg_.__selected_1ltid_gg_:after,.___STabLineItem_1ltid_gg_:after,.___STabLineItem_1ltid_gg_:before{transition:none}.___SCaret_1ltid_gg_{display:none}}", /*__inner_css_end__*/"1ltid_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__STabLine": "___STabLine_1n7v4_gg_",
-  "_underlined": "__underlined_1n7v4_gg_",
-  "__SCaret": "___SCaret_1n7v4_gg_",
-  "__STabLineItem": "___STabLineItem_1n7v4_gg_",
-  "_selected": "__selected_1n7v4_gg_",
-  "_disabled": "__disabled_1n7v4_gg_",
-  "__SAddon": "___SAddon_1n7v4_gg_",
-  "_size_m": "_size_m_1n7v4_gg_",
-  "_size_l": "_size_l_1n7v4_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1n7v4_gg_",
-  "__SText": "___SText_1n7v4_gg_"
+  "__STabLine": "___STabLine_1ltid_gg_",
+  "_underlined": "__underlined_1ltid_gg_",
+  "__SCaret": "___SCaret_1ltid_gg_",
+  "__STabLineItem": "___STabLineItem_1ltid_gg_",
+  "_selected": "__selected_1ltid_gg_",
+  "_disabled": "__disabled_1ltid_gg_",
+  "__SAddon": "___SAddon_1ltid_gg_",
+  "_size_m": "_size_m_1ltid_gg_",
+  "_size_l": "_size_l_1ltid_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1ltid_gg_"
 });
 class TabLineRoot extends _core.Component {
   constructor(...args) {

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","constructor","args","_defineProperty2","default","animation","undefined","React","createRef","state","started","setState","value","e","handlers","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","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","Box","SCaret","styles","Children","controlsLength","createElement","cn","assignProps","NeighborLocation","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","ellipsis","SText","SemcoreText","_ref4","_ref8","SAddon","createComponent","wrapTabLine","wrapper","exports","_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  NSTabLine.DefaultProps\n> {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: 0,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  } as const;\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\n/**\n * TabLine\n *\n * {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-code/|Examples}\n */\nconst TabLine = createComponent<\n  NSTabLine.Component,\n  typeof TabLineRoot\n>(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\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","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","TabLineRoot","Component","constructor","args","_defineProperty2","default","animation","undefined","React","createRef","state","started","setState","value","e","handlers","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","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","Box","SCaret","styles","Children","controlsLength","createElement","cn","assignProps","NeighborLocation","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","ellipsis","SText","SemcoreText","_ref4","_ref8","SAddon","createComponent","wrapTabLine","wrapper","exports","_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  NSTabLine.DefaultProps\n> {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: 0,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  } as const;\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\n/**\n * TabLine\n *\n * {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-code/|Examples}\n */\nconst TabLine = createComponent<\n  NSTabLine.Component,\n  typeof TabLineRoot\n>(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\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":[]}

package/lib/cjs/TabLine.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../src/TabLine.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSTabLine {\n  type Value = string | number | boolean;\n  type Props<T extends NSTabLine.Value = NSTabLine.Value> = 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  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n\n  type DefaultProps = {\n    defaultValue: 0;\n    size: 'm';\n    underlined: true;\n    behavior: 'auto';\n  };\n\n  namespace Item {\n    type Props = BoxProps &\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?: NSTabLine.Value;\n        /** Left addon tag */\n        addonLeft?: React.ElementType;\n        /** Right addon tag  */\n        addonRight?: React.ElementType;\n      };\n\n    namespace Text {\n        type Props = NSText.Props;\n        type Component = NSText.Component;\n    }\n\n    namespace Addon {\n        type Component = typeof Box;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {\n      Text: Text.Component;\n      Addon: Addon.Component;\n    };\n  }\n\n  type WrapperComponent<PropsExtending = {}> = (<\n    V extends Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapperComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabLineValue = NSTabLine.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabLineItemProps = NSTabLine.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabLineContext = NSTabLine.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabLineHandlers = NSTabLine.Handlers;\n\nexport type { NSTabLine };\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../src/TabLine.type.ts"],"sourcesContent":["import type { NSBox, NSNeighborLocation } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSTabLine {\n  type Value = string | number | boolean;\n  type Props<T extends NSTabLine.Value = NSTabLine.Value> = NSBox.Props &\n    NSNeighborLocation.Props & {\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  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n\n  type DefaultProps = {\n    defaultValue: 0;\n    size: 'm';\n    underlined: true;\n    behavior: 'auto';\n  };\n\n  namespace Item {\n    type Props = NSBox.Props &\n      NSNeighborLocation.Detect.Props & {\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?: NSTabLine.Value;\n        /** Left addon tag */\n        addonLeft?: React.ElementType;\n        /** Right addon tag  */\n        addonRight?: React.ElementType;\n      };\n\n    namespace Text {\n        type Props = NSText.Props;\n        type Component = NSText.Component;\n    }\n\n    namespace Addon {\n        type Component = NSBox.Component;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {\n      Text: Text.Component;\n      Addon: Addon.Component;\n    };\n  }\n\n  type WrapperComponent<PropsExtending = {}> = (<\n    V extends Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapperComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabLineValue = NSTabLine.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabLineItemProps = NSTabLine.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabLineContext = NSTabLine.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabLineHandlers = NSTabLine.Handlers;\n\nexport type { NSTabLine };\n"],"mappings":"","ignoreList":[]}

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

@@ -3,10 +3,17 @@ STabLine {
   display: flex;
   width: 100%;
   max-width: 100%;
+
+  &[size='m'] {
+    gap: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
+  }
+  &[size='l'] {
+    gap: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
+  }
 }
 
 STabLine[underlined] {
-  border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  border-bottom: 1px solid var(--intergalactic-control-tab-line-border, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 STabLineItem {
@@ -24,7 +31,6 @@ STabLineItem {
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
   overflow: visible;
-  /*outline: 0;*/
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
@@ -32,7 +38,7 @@ STabLineItem {
   border: none;
   background: transparent;
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-  margin-right: var(--intergalactic-spacing-4x, 16px);
+  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
   font-weight: var(--intergalactic-medium, 500);
 
   &::-moz-focus-inner {
@@ -50,8 +56,8 @@ STabLineItem {
     content: '';
     position: absolute;
     left: 0;
-    bottom: -1px;
-    height: 3px;
+    bottom: 0;
+    height: 2px;
     width: 100%;
     background-color: transparent;
   }
@@ -61,20 +67,15 @@ STabLineItem {
   }
 
   &:hover::before {
-    background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+    background-color: var(--intergalactic-control-tab-line-border-hover, oklch(0.137 0.026 175.7 / 0.161));
+    transition-duration: calc(var(--intergalactic-duration-extra-fast, 100) * 1ms);
   }
 
   &[selected]::after {
+    bottom: -1px;
+    height: 3px;
     transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
-    background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
-  }
-
-  & SText:not(:last-child) {
-    margin-right: var(--intergalactic-spacing-2x, 8px);
-  }
-
-  & SAddon:not(:last-child) {
-    margin-right: var(--intergalactic-spacing-2x, 8px);
+    background-color: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 140));
   }
 }
 
@@ -82,7 +83,7 @@ SCaret {
   position: absolute;
   bottom: -1px;
   height: 3px;
-  background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
+  background: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 140));
   transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
 }
 
@@ -104,12 +105,12 @@ SAddon {
 }
 
 STabLineItem[size='m'] {
-  height: 28px;
+  height: var(--intergalactic-form-control-m, 32px);
   min-width: 18px;
 }
 
 STabLineItem[size='l'] {
-  height: 40px;
+  height: var(--intergalactic-form-control-l, 44px);
   min-width: 26px;
 }
 

package/lib/es6/TabLine.js

@@ -11,20 +11,19 @@ import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
 import { Text as SemcoreText } from '@semcore/typography';
 import React from 'react';
 /*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabLine_1n7v4_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1n7v4_gg_.__underlined_1n7v4_gg_{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLine_1n7v4_gg_.__underlined_1n7v4_gg_{border-bottom:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___STabLineItem_1n7v4_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:none;background:#0000;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));margin-right:var(--intergalactic-spacing-4x,16px);font-weight:var(--intergalactic-medium,500)}.___STabLineItem_1n7v4_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_1n7v4_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1n7v4_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1n7v4_gg_:after,.___STabLineItem_1n7v4_gg_:before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:initial}.___STabLineItem_1n7v4_gg_:before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1n7v4_gg_:hover:before{background-color:var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLineItem_1n7v4_gg_:hover:before{background-color:var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}}.___STabLineItem_1n7v4_gg_.__selected_1n7v4_gg_:after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active,oklch(.7 .131 275.2))}.___STabLineItem_1n7v4_gg_ .___SAddon_1n7v4_gg_:not(:last-child),.___STabLineItem_1n7v4_gg_ .___SText_1n7v4_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x,8px)}.___SCaret_1n7v4_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active,oklch(.7 .131 275.2));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1n7v4_gg_.__selected_1n7v4_gg_{flex-shrink:0}.___STabLineItem_1n7v4_gg_.__disabled_1n7v4_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default;pointer-events:none}.___SAddon_1n7v4_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1n7v4_gg_._size_m_1n7v4_gg_{height:28px;min-width:18px}.___STabLineItem_1n7v4_gg_._size_l_1n7v4_gg_{height:40px;min-width:26px}.___STabLineItem_1n7v4_gg_._neighborLocation_left_1n7v4_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1n7v4_gg_.__selected_1n7v4_gg_:after,.___STabLineItem_1n7v4_gg_:after,.___STabLineItem_1n7v4_gg_:before{transition:none}.___SCaret_1n7v4_gg_{display:none}}", /*__inner_css_end__*/"1n7v4_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabLine_1ltid_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1ltid_gg_._size_m_1ltid_gg_{gap:var(--intergalactic-spacing-content-gap-xxlarge,16px)}.___STabLine_1ltid_gg_._size_l_1ltid_gg_{gap:var(--intergalactic-spacing-content-gap-xxlarge-extended,20px)}.___STabLine_1ltid_gg_.__underlined_1ltid_gg_{border-bottom:1px solid var(--intergalactic-control-tab-line-border,#000c0829)}@media (color-gamut:p3){.___STabLine_1ltid_gg_.__underlined_1ltid_gg_{border-bottom:1px solid var(--intergalactic-control-tab-line-border,oklch(.137 .026 175.7/.161))}}.___STabLineItem_1ltid_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:none;background:#0000;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));gap:var(--intergalactic-spacing-content-gap-medium,6px);font-weight:var(--intergalactic-medium,500)}.___STabLineItem_1ltid_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_1ltid_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1ltid_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1ltid_gg_:after,.___STabLineItem_1ltid_gg_:before{content:\"\";position:absolute;left:0;bottom:0;height:2px;width:100%;background-color:initial}.___STabLineItem_1ltid_gg_:before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1ltid_gg_:hover:before{background-color:var(--intergalactic-control-tab-line-border-hover,#000c0829);transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms)}@media (color-gamut:p3){.___STabLineItem_1ltid_gg_:hover:before{background-color:var(--intergalactic-control-tab-line-border-hover,oklch(.137 .026 175.7/.161))}}}.___STabLineItem_1ltid_gg_.__selected_1ltid_gg_:after{bottom:-1px;height:3px;transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-control-tab-line-border-active,oklch(.23 .01 140))}.___SCaret_1ltid_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-control-tab-line-border-active,oklch(.23 .01 140));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1ltid_gg_.__selected_1ltid_gg_{flex-shrink:0}.___STabLineItem_1ltid_gg_.__disabled_1ltid_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default;pointer-events:none}.___SAddon_1ltid_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1ltid_gg_._size_m_1ltid_gg_{height:var(--intergalactic-form-control-m,32px);min-width:18px}.___STabLineItem_1ltid_gg_._size_l_1ltid_gg_{height:var(--intergalactic-form-control-l,44px);min-width:26px}.___STabLineItem_1ltid_gg_._neighborLocation_left_1ltid_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1ltid_gg_.__selected_1ltid_gg_:after,.___STabLineItem_1ltid_gg_:after,.___STabLineItem_1ltid_gg_:before{transition:none}.___SCaret_1ltid_gg_{display:none}}", /*__inner_css_end__*/"1ltid_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__STabLine": "___STabLine_1n7v4_gg_",
-  "_underlined": "__underlined_1n7v4_gg_",
-  "__SCaret": "___SCaret_1n7v4_gg_",
-  "__STabLineItem": "___STabLineItem_1n7v4_gg_",
-  "_selected": "__selected_1n7v4_gg_",
-  "_disabled": "__disabled_1n7v4_gg_",
-  "__SAddon": "___SAddon_1n7v4_gg_",
-  "_size_m": "_size_m_1n7v4_gg_",
-  "_size_l": "_size_l_1n7v4_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1n7v4_gg_",
-  "__SText": "___SText_1n7v4_gg_"
+  "__STabLine": "___STabLine_1ltid_gg_",
+  "_underlined": "__underlined_1ltid_gg_",
+  "__SCaret": "___SCaret_1ltid_gg_",
+  "__STabLineItem": "___STabLineItem_1ltid_gg_",
+  "_selected": "__selected_1ltid_gg_",
+  "_disabled": "__disabled_1ltid_gg_",
+  "__SAddon": "___SAddon_1ltid_gg_",
+  "_size_m": "_size_m_1ltid_gg_",
+  "_size_l": "_size_l_1ltid_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1ltid_gg_"
 });
 class TabLineRoot extends Component {
   constructor(...args) {

package/lib/es6/TabLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.js","names":["NeighborLocation","Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","SemcoreText","React","style","_sstyled","insert","TabLineRoot","constructor","args","_defineProperty","animation","undefined","createRef","state","started","setState","value","e","handlers","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","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","SCaret","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","behavior","onNeighborChange","neighborElement","focus","click","childSelector","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","_ref3","_ref7","ellipsis","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"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  NSTabLine.DefaultProps\n> {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: 0,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  } as const;\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\n/**\n * TabLine\n *\n * {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-code/|Examples}\n */\nconst TabLine = createComponent<\n  NSTabLine.Component,\n  typeof TabLineRoot\n>(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\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":";;;;;;AAAA,SAASA,gBAAgB,EAAEC,GAAG,QAAQ,0BAA0B;AAEhE,SAASC,eAAe,EAAEC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,OAAOC,iBAAiB,MAAM,2CAA2C;AACzE,OAAOC,WAAW,MAAM,8CAA8C;AACtE,SAASC,IAAI,IAAIC,WAAW,QAAQ,qBAAqB;AACzD,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAe1B,MAAMC,WAAW,SAASX,SAAS,CAOjC;EAAAY,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gBAsBe;MAAEC,SAAS,EAAE;IAAK,CAAC;IAAAD,eAAA,oBACIE,SAAS;IAAAF,eAAA,mBACJ,CAAC,CAAC;IAAAA,eAAA,oCAC9BP,KAAK,CAACU,SAAS,CAAiB,CAAC;IAAAH,eAAA,gCACc,IAAI;IAAAA,eAAA,yBACa,EAAE;IAAAA,eAAA,+BAwD1D,MAAM;MAC3B,IAAI,IAAI,CAACI,KAAK,CAACH,SAAS,EAAEI,OAAO,KAAK,KAAK,EAAE;QAC3C,IAAI,CAACC,QAAQ,CAAC;UAAEL,SAAS,EAAE;YAAE,GAAG,IAAI,CAACG,KAAK,CAACH,SAAS;YAAEI,OAAO,EAAE;UAAK;QAAE,CAAC,CAAC;MAC1E;IACF,CAAC;IAAAL,eAAA,6BAEoB,MAAM;MACzB,IAAI,CAACM,QAAQ,CAAC;QAAEL,SAAS,EAAE;MAAK,CAAC,CAAC;IACpC,CAAC;IAAAD,eAAA,2BAEmBO,KAA+B,IAAMC,CAAuB,IAAK;MACnF,IAAI,CAACC,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;IAC/B,CAAC;EAAA;EAlEDE,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACLH,KAAK,EAAE;IACT,CAAC;EACH;EAEAI,kBAAkBA,CAAA,EAAG;IACnB,IACE,IAAI,CAACC,SAAS,KAAK,IAAI,IACvB,IAAI,CAACC,OAAO,CAACN,KAAK,KAAK,IAAI,IAC3B,IAAI,CAACK,SAAS,KAAK,IAAI,CAACC,OAAO,CAACN,KAAK,EACrC;MACA,IAAI,CAACO,OAAO,CAAC,CAAC;IAChB;IACA,IAAI,CAACF,SAAS,GAAG,IAAI,CAACC,OAAO,CAACN,KAAK;EACrC;EAEAQ,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACH,SAAS,GAAG,IAAI,CAACC,OAAO,CAACN,KAAK;EACrC;EAEAS,oBAAoBA,CAAA,EAAG;IACrB,IAAI,IAAI,CAACC,qBAAqB,EAAE;MAC9BC,YAAY,CAAC,IAAI,CAACD,qBAAqB,CAAC;IAC1C;EACF;EAEAH,OAAOA,CAAA,EAAG;IACR,IAAI,IAAI,CAACF,SAAS,KAAKV,SAAS,IAAI,IAAI,CAACW,OAAO,CAACN,KAAK,KAAKL,SAAS,EAAE;IAEtE,MAAMiB,QAAQ,GAAG,IAAI,CAACC,QAAQ,CAAC,IAAI,CAACR,SAAS,CAACS,QAAQ,CAAC,CAAC,CAAC;IACzD,MAAMC,MAAM,GAAG,IAAI,CAACF,QAAQ,CAAC,IAAI,CAACP,OAAO,CAACN,KAAK,CAACc,QAAQ,CAAC,CAAC,CAAC;IAC3D,MAAME,aAAa,GAAG,IAAI,CAACC,YAAY,CAACC,OAAO;IAE/C,IAAI,CAACN,QAAQ,IAAI,CAACG,MAAM,IAAI,CAACC,aAAa,EAAE;IAC5C,MAAMG,aAAa,GAAGH,aAAa,CAACI,qBAAqB,CAAC,CAAC;IAC3D,MAAMC,QAAQ,GAAGT,QAAQ,CAACQ,qBAAqB,CAAC,CAAC;IACjD,MAAME,MAAM,GAAGP,MAAM,CAACK,qBAAqB,CAAC,CAAC;IAC7C,MAAM1B,SAAS,GAAG;MAChB6B,QAAQ,EAAEF,QAAQ,CAACG,CAAC,GAAGL,aAAa,CAACK,CAAC;MACtCC,SAAS,EAAEJ,QAAQ,CAACK,KAAK;MACzBC,MAAM,EAAEL,MAAM,CAACE,CAAC,GAAGL,aAAa,CAACK,CAAC;MAClCI,OAAO,EAAEN,MAAM,CAACI,KAAK;MACrB5B,OAAO,EAAE;IACX,CAAC;IACD,IAAI,CAACC,QAAQ,CAAC;MAAEL;IAAU,CAAC,CAAC;IAE5B,IAAI,IAAI,CAACgB,qBAAqB,EAAE;MAC9BC,YAAY,CAAC,IAAI,CAACD,qBAAqB,CAAC;IAC1C;IAEA,IAAI,CAACA,qBAAqB,GAAGmB,UAAU,CAAC,IAAI,CAACC,oBAAoB,EAAE,CAAC,CAAC;EACvE;EAgBAC,YAAYA,CAACC,KAA2B,EAAEC,KAAa,EAAE;IACvD,MAAM;MAAEjC,KAAK;MAAEkC;IAAK,CAAC,GAAG,IAAI,CAAC5B,OAAO;IACpC,MAAM6B,UAAU,GAAGnC,KAAK,KAAKgC,KAAK,CAAChC,KAAK;IACxC,OAAO;MACLkC,IAAI;MACJ,UAAU,EAAEC,UAAU;MACtB,SAAS,EAAE,IAAI,CAACC,gBAAgB,CAACJ,KAAK,CAAChC,KAAK,CAAC;MAC7C,UAAU,EAAEmC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC/B,eAAe,EAAEA,UAAU;MAC3B,KAAK,EAAGE,IAAoB,IAAK;QAC/B,IAAIL,KAAK,CAAChC,KAAK,KAAKL,SAAS,EAAE;QAE/B,IAAI,CAACkB,QAAQ,CAACmB,KAAK,CAAChC,KAAK,CAACc,QAAQ,CAAC,CAAC,CAAC,GAAGuB,IAAI;MAC9C,CAAC;MACD,gBAAgB,EAAE,IAAI,CAACC,cAAc;MACrCL;IACF,CAAC;EACH;EAEAM,gBAAgBA,CAACP,KAAgC,EAAEC,KAAa,EAAE;IAChE,MAAM;MAAEC,IAAI,EAAEM;IAAY,CAAC,GAAG,IAAI,CAAClC,OAAO;IAC1C,MAAM4B,IAAI,GAAGF,KAAK,CAACE,IAAI,GACnBF,KAAK,CAACE,IAAI,GACVM,WAAW,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG;IAEnC,OAAO;MACLN,IAAI;MACJI,cAAc,EAAE,IAAI,CAACA,cAAc;MACnCL;IACF,CAAC;EACH;EAEAQ,aAAaA,CAAA,EAAG;IACd,MAAM;MAAE/C;IAAU,CAAC,GAAG,IAAI,CAACG,KAAK;IAChC,IAAI,CAACH,SAAS,EAAE,OAAO,CAAC,CAAC;IACzB,IAAIA,SAAS,CAACI,OAAO,EAAE;MACrB,OAAO;QACLX,KAAK,EAAE;UACLuD,IAAI,EAAEhD,SAAS,CAACiC,MAAM;UACtBD,KAAK,EAAEhC,SAAS,CAACkC;QACnB,CAAC;QACDe,eAAe,EAAE,IAAI,CAACC;MACxB,CAAC;IACH,CAAC,MAAM;MACL,OAAO;QACLzD,KAAK,EAAE;UACLuD,IAAI,EAAEhD,SAAS,CAAC6B,QAAQ;UACxBG,KAAK,EAAEhC,SAAS,CAAC+B;QACnB,CAAC;QACDkB,eAAe,EAAE,IAAI,CAACC;MACxB,CAAC;IACH;EACF;EAEAC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAxC,OAAA;MAAAyC,KAAA;IACP,MAAMC,QAAQ,GAMMvE,GAAG;IALvB,MAAMwE,MAAM,GAAGxE,GAAG;IAClB,MAAM;MAAEyE,MAAM;MAAEC,QAAQ;MAAEC;IAAe,CAAC,GAAG,IAAI,CAAC9C,OAAO;IACzD,MAAM;MAAEZ;IAAU,CAAC,GAAG,IAAI,CAACG,KAAK;IAEhC,OAAAkD,KAAA,GAAOnE,OAAO,CAACsE,MAAM,CAAC,eACpBhE,KAAA,CAAAmE,aAAA,CAACL,QAAQ,EAAAD,KAAA,CAAAO,EAAA;MAAA,GAAAC,YAAA;QAAA,QAAmB,SAAS;QAAA,OAAM,IAAI,CAACtC;MAAY,GAAA6B,IAAA;IAAA,iBAC1D5D,KAAA,CAAAmE,aAAA,CAAC7E,gBAAgB,EAAAuE,KAAA,CAAAO,EAAA;MAAA,kBAAiBF;IAAc,iBAC9ClE,KAAA,CAAAmE,aAAA,CAACF,QAAQ,EAAAJ,KAAA,CAAAO,EAAA,gBAAE,CACK,CAAC,EAClB5D,SAAS,iBAAIR,KAAA,CAAAmE,aAAA,CAACJ,MAAM,EAAAF,KAAA,CAAAO,EAAA;MAAA,GAAK,IAAI,CAACb,aAAa,CAAC;IAAC,EAAG,CACzC,CAAC;EAEf;AACF;AAAChD,eAAA,CA7KKH,WAAW,iBAQM,SAAS;AAAAG,eAAA,CAR1BH,WAAW,WASAH,KAAK;AAAAM,eAAA,CAThBH,WAAW,kBAUO;EACpBkE,YAAY,EAAE,CAAC;EACftB,IAAI,EAAE,GAAG;EACTuB,UAAU,EAAE,IAAI;EAChBC,QAAQ,EAAE;AACZ,CAAC;AAAAjE,eAAA,CAfGH,WAAW,aAiBE,CAACP,WAAW,CAAC;EAC5B4E,gBAAgB,EAAEA,CAACC,eAAe,EAAE5B,KAAK,KAAK;IAC5C,IAAI4B,eAAe,EAAE;MACnBA,eAAe,CAACC,KAAK,CAAC,CAAC;MACvB,IAAI7B,KAAK,CAAC0B,QAAQ,KAAK,MAAM,EAAE;QAC7BE,eAAe,CAACE,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK;AAC/B,CAAC,CAAC,CAAC;AAoJL,SAASC,WAAWA,CAClBhC,KAIC,EACD;EAAA,IAAAiC,KAAA,GAAAC,YAAA;EACA,MAAMC,YAAY,GAWA1F,GAAG;EAVrB,MAAM;IAAE0E,QAAQ;IAAED,MAAM;IAAEkB,SAAS;IAAEC,UAAU;IAAEC,gBAAgB;IAAEhC,cAAc;IAAEL;EAAM,CAAC,GAAGD,KAAK;EAClG,MAAMuC,SAAS,GAAGrF,KAAK,CAACsF,MAAM,CAAoB,CAAC;EAEnDlC,cAAc,CAACL,KAAK,CAAC,GAAGsC,SAAS;EAEjC,oBACErF,KAAA,CAAAmE,aAAA,CAAC7E,gBAAgB,CAACiG,MAAM;IAACH,gBAAgB,EAAEA;EAAiB,GACxDA,gBAAgB;IAAA,IAAAI,KAAA;IAAA,OAAAA,KAAA,GAChB9F,OAAO,CAACsE,MAAM,CAAC,eACbhE,KAAA,CAAAmE,aAAA,CAACc,YAAY,EAAAO,KAAA,CAAApB,EAAA;MAAA,GAAAqB,aAAA;QAAA,OAEP,QAAQ;QAAA,YACF,CAAC;QAAA,oBACOL,gBAAgB;QAAA,QAC7B,QAAQ;QAAA,QACR,KAAK;QAAA,OACLC;MAAS,GAAAN,KAAA;IAAA,IAEbG,SAAS,gBAAGlF,KAAA,CAAAmE,aAAA,CAACuB,OAAO,CAACC,IAAI,CAACC,KAAK;MAACC,GAAG,EAAEX;IAAU,CAAE,CAAC,GAAG,IAAI,EACzDtF,iBAAiB,CAACqE,QAAQ,EAAEyB,OAAO,CAACC,IAAI,CAAC7F,IAAI,EAAE4F,OAAO,CAACC,IAAI,CAACC,KAAK,CAAC,EAClET,UAAU,gBAAGnF,KAAA,CAAAmE,aAAA,CAACuB,OAAO,CAACC,IAAI,CAACC,KAAK;MAACC,GAAG,EAAEV;IAAW,CAAE,CAAC,GAAG,IAC5C,CAAC;EAAA,CAEI,CAAC;AAE9B;AAEA,SAASrF,IAAIA,CACXgD,KAIC,EACD;EAAA,IAAAgD,KAAA,GAAAd,YAAA;IAAAe,KAAA;EACA,MAAM;IAAE/B,MAAM;IAAEgC,QAAQ,GAAG,IAAI;IAAEhD,IAAI;IAAEI,cAAc;IAAEL;EAAM,CAAC,GAAGD,KAAK;EACtE,MAAMmD,KAAK,GAC2BlG,WAAW;EAAjD,OAAAgG,KAAA,GAAOrG,OAAO,CAACsE,MAAM,CAAC,eAAChE,KAAA,CAAAmE,aAAA,CAAC8B,KAAK,EAAAF,KAAA,CAAA3B,EAAA;IAAA,GAAA8B,aAAA;MAAA,YAAgCF,QAAQ;MAAA,QAAQhD,IAAI;MAAA,mBAAmBI,cAAc,CAACL,KAAK;IAAC,GAAA+C,KAAA;EAAA,EAAG,CAAC;AAC/H;AAEA,SAASF,KAAKA,CACZ9C,KAAwF,EACxF;EAAA,IAAAqD,KAAA,GAAAnB,YAAA;IAAAoB,KAAA;EACA,MAAM;IAAEpC;EAAO,CAAC,GAAGlB,KAAK;EACxB,MAAMuD,MAAM,GAC2B9G,GAAG;EAA1C,OAAA6G,KAAA,GAAO1G,OAAO,CAACsE,MAAM,CAAC,eAAChE,KAAA,CAAAmE,aAAA,CAACkC,MAAM,EAAAD,KAAA,CAAAhC,EAAA;IAAA,GAAAkC,aAAA;MAAA,OAAkB;IAAM,GAAAH,KAAA;EAAA,EAAE,CAAC;AAC3D;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAMT,OAAO,GAAGlG,eAAe,CAG7BY,WAAW,EAAE;EACbuF,IAAI,EAAE,CAACb,WAAW,EAAE;IAAEhF,IAAI;IAAE8F;EAAM,CAAC;AACrC,CAAC,CAAC;AAEF,OAAO,MAAMW,WAAW,GAA+BC,OAKnC,IAAKA,OAAqD;AAE9E,eAAed,OAAO","ignoreList":[]}
+{"version":3,"file":"TabLine.js","names":["NeighborLocation","Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","SemcoreText","React","style","_sstyled","insert","TabLineRoot","constructor","args","_defineProperty","animation","undefined","createRef","state","started","setState","value","e","handlers","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","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","SCaret","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","behavior","onNeighborChange","neighborElement","focus","click","childSelector","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","_ref3","_ref7","ellipsis","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"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  NSTabLine.DefaultProps\n> {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: 0,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  } as const;\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\n/**\n * TabLine\n *\n * {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-api/|API} | {@link https://developer.semrush.com/intergalactic/components/tab-line/tab-line-code/|Examples}\n */\nconst TabLine = createComponent<\n  NSTabLine.Component,\n  typeof TabLineRoot\n>(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\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":[]}

package/lib/es6/TabLine.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../src/TabLine.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSTabLine {\n  type Value = string | number | boolean;\n  type Props<T extends NSTabLine.Value = NSTabLine.Value> = 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  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n\n  type DefaultProps = {\n    defaultValue: 0;\n    size: 'm';\n    underlined: true;\n    behavior: 'auto';\n  };\n\n  namespace Item {\n    type Props = BoxProps &\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?: NSTabLine.Value;\n        /** Left addon tag */\n        addonLeft?: React.ElementType;\n        /** Right addon tag  */\n        addonRight?: React.ElementType;\n      };\n\n    namespace Text {\n        type Props = NSText.Props;\n        type Component = NSText.Component;\n    }\n\n    namespace Addon {\n        type Component = typeof Box;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {\n      Text: Text.Component;\n      Addon: Addon.Component;\n    };\n  }\n\n  type WrapperComponent<PropsExtending = {}> = (<\n    V extends Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapperComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabLineValue = NSTabLine.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabLineItemProps = NSTabLine.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabLineContext = NSTabLine.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabLineHandlers = NSTabLine.Handlers;\n\nexport type { NSTabLine };\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../src/TabLine.type.ts"],"sourcesContent":["import type { NSBox, NSNeighborLocation } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSTabLine {\n  type Value = string | number | boolean;\n  type Props<T extends NSTabLine.Value = NSTabLine.Value> = NSBox.Props &\n    NSNeighborLocation.Props & {\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  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n\n  type DefaultProps = {\n    defaultValue: 0;\n    size: 'm';\n    underlined: true;\n    behavior: 'auto';\n  };\n\n  namespace Item {\n    type Props = NSBox.Props &\n      NSNeighborLocation.Detect.Props & {\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?: NSTabLine.Value;\n        /** Left addon tag */\n        addonLeft?: React.ElementType;\n        /** Right addon tag  */\n        addonRight?: React.ElementType;\n      };\n\n    namespace Text {\n        type Props = NSText.Props;\n        type Component = NSText.Component;\n    }\n\n    namespace Addon {\n        type Component = NSBox.Component;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {\n      Text: Text.Component;\n      Addon: Addon.Component;\n    };\n  }\n\n  type WrapperComponent<PropsExtending = {}> = (<\n    V extends Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapperComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabLineValue = NSTabLine.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabLineItemProps = NSTabLine.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabLineContext = NSTabLine.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabLineHandlers = NSTabLine.Handlers;\n\nexport type { NSTabLine };\n"],"mappings":"","ignoreList":[]}

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

@@ -3,10 +3,17 @@ STabLine {
   display: flex;
   width: 100%;
   max-width: 100%;
+
+  &[size='m'] {
+    gap: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
+  }
+  &[size='l'] {
+    gap: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
+  }
 }
 
 STabLine[underlined] {
-  border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  border-bottom: 1px solid var(--intergalactic-control-tab-line-border, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 STabLineItem {
@@ -24,7 +31,6 @@ STabLineItem {
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
   overflow: visible;
-  /*outline: 0;*/
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
@@ -32,7 +38,7 @@ STabLineItem {
   border: none;
   background: transparent;
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-  margin-right: var(--intergalactic-spacing-4x, 16px);
+  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
   font-weight: var(--intergalactic-medium, 500);
 
   &::-moz-focus-inner {
@@ -50,8 +56,8 @@ STabLineItem {
     content: '';
     position: absolute;
     left: 0;
-    bottom: -1px;
-    height: 3px;
+    bottom: 0;
+    height: 2px;
     width: 100%;
     background-color: transparent;
   }
@@ -61,20 +67,15 @@ STabLineItem {
   }
 
   &:hover::before {
-    background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+    background-color: var(--intergalactic-control-tab-line-border-hover, oklch(0.137 0.026 175.7 / 0.161));
+    transition-duration: calc(var(--intergalactic-duration-extra-fast, 100) * 1ms);
   }
 
   &[selected]::after {
+    bottom: -1px;
+    height: 3px;
     transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
-    background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
-  }
-
-  & SText:not(:last-child) {
-    margin-right: var(--intergalactic-spacing-2x, 8px);
-  }
-
-  & SAddon:not(:last-child) {
-    margin-right: var(--intergalactic-spacing-2x, 8px);
+    background-color: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 140));
   }
 }
 
@@ -82,7 +83,7 @@ SCaret {
   position: absolute;
   bottom: -1px;
   height: 3px;
-  background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
+  background: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 140));
   transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
 }
 
@@ -104,12 +105,12 @@ SAddon {
 }
 
 STabLineItem[size='m'] {
-  height: 28px;
+  height: var(--intergalactic-form-control-m, 32px);
   min-width: 18px;
 }
 
 STabLineItem[size='l'] {
-  height: 40px;
+  height: var(--intergalactic-form-control-l, 44px);
   min-width: 26px;
 }
 

package/lib/esm/TabLine.mjs

@@ -10,22 +10,21 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___STabLine_1n7v4_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1n7v4_gg_.__underlined_1n7v4_gg_{border-bottom:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLine_1n7v4_gg_.__underlined_1n7v4_gg_{border-bottom:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___STabLineItem_1n7v4_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:none;background:#0000;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));margin-right:var(--intergalactic-spacing-4x,16px);font-weight:var(--intergalactic-medium,500)}.___STabLineItem_1n7v4_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_1n7v4_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1n7v4_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1n7v4_gg_:after,.___STabLineItem_1n7v4_gg_:before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:initial}.___STabLineItem_1n7v4_gg_:before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1n7v4_gg_:hover:before{background-color:var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___STabLineItem_1n7v4_gg_:hover:before{background-color:var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}}.___STabLineItem_1n7v4_gg_.__selected_1n7v4_gg_:after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active,oklch(.7 .131 275.2))}.___STabLineItem_1n7v4_gg_ .___SAddon_1n7v4_gg_:not(:last-child),.___STabLineItem_1n7v4_gg_ .___SText_1n7v4_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x,8px)}.___SCaret_1n7v4_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active,oklch(.7 .131 275.2));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1n7v4_gg_.__selected_1n7v4_gg_{flex-shrink:0}.___STabLineItem_1n7v4_gg_.__disabled_1n7v4_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default;pointer-events:none}.___SAddon_1n7v4_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1n7v4_gg_._size_m_1n7v4_gg_{height:28px;min-width:18px}.___STabLineItem_1n7v4_gg_._size_l_1n7v4_gg_{height:40px;min-width:26px}.___STabLineItem_1n7v4_gg_._neighborLocation_left_1n7v4_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1n7v4_gg_.__selected_1n7v4_gg_:after,.___STabLineItem_1n7v4_gg_:after,.___STabLineItem_1n7v4_gg_:before{transition:none}.___SCaret_1n7v4_gg_{display:none}}',
+    '.___STabLine_1ltid_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1ltid_gg_._size_m_1ltid_gg_{gap:var(--intergalactic-spacing-content-gap-xxlarge,16px)}.___STabLine_1ltid_gg_._size_l_1ltid_gg_{gap:var(--intergalactic-spacing-content-gap-xxlarge-extended,20px)}.___STabLine_1ltid_gg_.__underlined_1ltid_gg_{border-bottom:1px solid var(--intergalactic-control-tab-line-border,#000c0829)}@media (color-gamut:p3){.___STabLine_1ltid_gg_.__underlined_1ltid_gg_{border-bottom:1px solid var(--intergalactic-control-tab-line-border,oklch(.137 .026 175.7/.161))}}.___STabLineItem_1ltid_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:none;background:#0000;color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));gap:var(--intergalactic-spacing-content-gap-medium,6px);font-weight:var(--intergalactic-medium,500)}.___STabLineItem_1ltid_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_1ltid_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1ltid_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1ltid_gg_:after,.___STabLineItem_1ltid_gg_:before{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background-color:initial}.___STabLineItem_1ltid_gg_:before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1ltid_gg_:hover:before{background-color:var(--intergalactic-control-tab-line-border-hover,#000c0829);transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms)}@media (color-gamut:p3){.___STabLineItem_1ltid_gg_:hover:before{background-color:var(--intergalactic-control-tab-line-border-hover,oklch(.137 .026 175.7/.161))}}}.___STabLineItem_1ltid_gg_.__selected_1ltid_gg_:after{bottom:-1px;height:3px;transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-control-tab-line-border-active,oklch(.23 .01 140))}.___SCaret_1ltid_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-control-tab-line-border-active,oklch(.23 .01 140));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1ltid_gg_.__selected_1ltid_gg_{flex-shrink:0}.___STabLineItem_1ltid_gg_.__disabled_1ltid_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default;pointer-events:none}.___SAddon_1ltid_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1ltid_gg_._size_m_1ltid_gg_{height:var(--intergalactic-form-control-m,32px);min-width:18px}.___STabLineItem_1ltid_gg_._size_l_1ltid_gg_{height:var(--intergalactic-form-control-l,44px);min-width:26px}.___STabLineItem_1ltid_gg_._neighborLocation_left_1ltid_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1ltid_gg_.__selected_1ltid_gg_:after,.___STabLineItem_1ltid_gg_:after,.___STabLineItem_1ltid_gg_:before{transition:none}.___SCaret_1ltid_gg_{display:none}}',
     /*__inner_css_end__*/
-    "1n7v4_gg_"
+    "1ltid_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__STabLine": "___STabLine_1n7v4_gg_",
-    "_underlined": "__underlined_1n7v4_gg_",
-    "__SCaret": "___SCaret_1n7v4_gg_",
-    "__STabLineItem": "___STabLineItem_1n7v4_gg_",
-    "_selected": "__selected_1n7v4_gg_",
-    "_disabled": "__disabled_1n7v4_gg_",
-    "__SAddon": "___SAddon_1n7v4_gg_",
-    "_size_m": "_size_m_1n7v4_gg_",
-    "_size_l": "_size_l_1n7v4_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_1n7v4_gg_",
-    "__SText": "___SText_1n7v4_gg_"
+    "__STabLine": "___STabLine_1ltid_gg_",
+    "_underlined": "__underlined_1ltid_gg_",
+    "__SCaret": "___SCaret_1ltid_gg_",
+    "__STabLineItem": "___STabLineItem_1ltid_gg_",
+    "_selected": "__selected_1ltid_gg_",
+    "_disabled": "__disabled_1ltid_gg_",
+    "__SAddon": "___SAddon_1ltid_gg_",
+    "_size_m": "_size_m_1ltid_gg_",
+    "_size_l": "_size_l_1ltid_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_1ltid_gg_"
   })
 );
 class TabLineRoot extends Component {

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

@@ -3,10 +3,17 @@ STabLine {
   display: flex;
   width: 100%;
   max-width: 100%;
+
+  &[size='m'] {
+    gap: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
+  }
+  &[size='l'] {
+    gap: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
+  }
 }
 
 STabLine[underlined] {
-  border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  border-bottom: 1px solid var(--intergalactic-control-tab-line-border, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 STabLineItem {
@@ -24,7 +31,6 @@ STabLineItem {
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
   overflow: visible;
-  /*outline: 0;*/
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
@@ -32,7 +38,7 @@ STabLineItem {
   border: none;
   background: transparent;
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-  margin-right: var(--intergalactic-spacing-4x, 16px);
+  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
   font-weight: var(--intergalactic-medium, 500);
 
   &::-moz-focus-inner {
@@ -50,8 +56,8 @@ STabLineItem {
     content: '';
     position: absolute;
     left: 0;
-    bottom: -1px;
-    height: 3px;
+    bottom: 0;
+    height: 2px;
     width: 100%;
     background-color: transparent;
   }
@@ -61,20 +67,15 @@ STabLineItem {
   }
 
   &:hover::before {
-    background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+    background-color: var(--intergalactic-control-tab-line-border-hover, oklch(0.137 0.026 175.7 / 0.161));
+    transition-duration: calc(var(--intergalactic-duration-extra-fast, 100) * 1ms);
   }
 
   &[selected]::after {
+    bottom: -1px;
+    height: 3px;
     transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
-    background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
-  }
-
-  & SText:not(:last-child) {
-    margin-right: var(--intergalactic-spacing-2x, 8px);
-  }
-
-  & SAddon:not(:last-child) {
-    margin-right: var(--intergalactic-spacing-2x, 8px);
+    background-color: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 140));
   }
 }
 
@@ -82,7 +83,7 @@ SCaret {
   position: absolute;
   bottom: -1px;
   height: 3px;
-  background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
+  background: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 140));
   transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
 }
 
@@ -104,12 +105,12 @@ SAddon {
 }
 
 STabLineItem[size='m'] {
-  height: 28px;
+  height: var(--intergalactic-form-control-m, 32px);
   min-width: 18px;
 }
 
 STabLineItem[size='l'] {
-  height: 40px;
+  height: var(--intergalactic-form-control-l, 44px);
   min-width: 26px;
 }
 

package/lib/types/TabLine.d.ts

@@ -9,3 +9,4 @@ import type { NSTabLine } from './TabLine.type';
 declare const TabLine: NSTabLine.Component;
 export declare const wrapTabLine: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSTabLine.WrapperComponent>> & PropsExtending) => React.ReactNode) => NSTabLine.WrapperComponent<PropsExtending>;
 export default TabLine;
+//# sourceMappingURL=TabLine.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabLine.d.ts","sourceRoot":"","sources":["../../src/TabLine.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAKnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAkPhD;;;;GAIG;AACH,QAAA,MAAM,OAAO,qBAKX,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,cAAc,SAAS,EAAE,EAAE,SAAS,CAC9D,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,eAAe,CAClD,aAAa,CAAC,eAAe,CAAC,qBAAqB,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAChF,GACD,cAAc,KACX,KAAK,CAAC,SAAS,KAAgB,SAAS,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAE/E,eAAe,OAAO,CAAC"}

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

@@ -1,10 +1,10 @@
-import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
+import type { NSBox, NSNeighborLocation } from '@semcore/base-components';
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
 import type { NSText } from '@semcore/typography';
 import type React from 'react';
 declare namespace NSTabLine {
     type Value = string | number | boolean;
-    type Props<T extends NSTabLine.Value = NSTabLine.Value> = BoxProps & NeighborLocationProps & {
+    type Props<T extends NSTabLine.Value = NSTabLine.Value> = NSBox.Props & NSNeighborLocation.Props & {
         /** TabLine size
          * @default m
          * */
@@ -42,7 +42,7 @@ declare namespace NSTabLine {
         behavior: 'auto';
     };
     namespace Item {
-        type Props = BoxProps & NeighborItemProps & {
+        type Props = NSBox.Props & NSNeighborLocation.Detect.Props & {
             /** Makes a tab selected. This property is determined automatically depending on the value. */
             selected?: boolean;
             /** Disabled state  */
@@ -59,7 +59,7 @@ declare namespace NSTabLine {
             type Component = NSText.Component;
         }
         namespace Addon {
-            type Component = typeof Box;
+            type Component = NSBox.Component;
         }
         type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {
             Text: Text.Component;
@@ -84,3 +84,4 @@ export type TabLineContext = NSTabLine.Ctx;
 /** @deprecated It will be removed in v18. */
 export type TabLineHandlers = NSTabLine.Handlers;
 export type { NSTabLine };
+//# sourceMappingURL=TabLine.type.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabLine.type.d.ts","sourceRoot":"","sources":["../../src/TabLine.type.ts"],"names":[],"mappings":"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"}

package/lib/types/index.d.ts

@@ -1,2 +1,3 @@
 export { default, wrapTabLine } from './TabLine';
 export * from './TabLine.type';
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACjD,cAAc,gBAAgB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-line",
   "description": "Semrush TabLine Component",
-  "version": "17.2.1",
+  "version": "18.0.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,10 +14,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.2.1"
+    "@semcore/typography": "^18.0.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.2.1"
+    "@semcore/base-components": "^18.0.0-prerelease.0"
   },
   "repository": {
     "type": "git",
@@ -25,9 +25,9 @@
     "directory": "semcore/tab-line"
   },
   "devDependencies": {
-    "@semcore/base-components": "17.2.1",
-    "@semcore/testing-utils": "1.0.0",
-    "@semcore/core": "17.2.1"
+    "@semcore/base-components": "18.0.0-prerelease.0",
+    "@semcore/core": "18.0.0-prerelease.0",
+    "@semcore/testing-utils": "1.0.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder && pnpm vite build"