@semcore/accordion 17.2.1 → 18.0.0-prerelease.0

package/lib/es6/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["Collapse","CollapseAnimate","Flex","createComponent","Component","sstyled","Root","uniqueIDEnhancement","cssVariableEnhance","ChevronRightL","ChevronRightM","Text","React","style","_sstyled","insert","RootAccordion","constructor","args","_defineProperty","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","uncontrolledProps","getItemProps","selectedValue","duration","use","selected","includes","$handleInteraction","handleToggleInteraction","render","Children","createElement","defaultValue","variable","fallback","map","Number","parseInt","prop","RootItem","getToggleProps","uid","disabled","onClick","undefined","handleClick","id","tag","size","tabIndex","getToggleButtonProps","getCollapseProps","getChevronProps","Toggle","createRef","event","key","toggleRef","current","target","currentTarget","click","preventDefault","_ref","_ref5","styles","SItemToggle","cn","_assignProps","handleKeyDown","Chevron","props","_ref2","arguments[0]","_ref6","SItemChevron","_assignProps2","ToggleButton","_ref3","_ref7","_assignProps3","_ref4","visible","_assignProps4","Item","Accordion","wrapAccordion","wrapper"],"sources":["../../src/Accordion.tsx"],"sourcesContent":["import { Collapse as CollapseAnimate, Flex } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport ChevronRightL from '@semcore/icon/ChevronRight/l';\nimport ChevronRightM from '@semcore/icon/ChevronRight/m';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport type { NSAccordion } from './Accordion.type';\nimport style from './style/accordion.shadow.css';\n\nclass RootAccordion extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSAccordion.Component>,\n  typeof RootAccordion.enhance,\n  NSAccordion.Handlers,\n  {},\n  {},\n  NSAccordion.DefaultProps\n> {\n  static displayName = 'Accordion';\n  static style = style;\n  static defaultProps = {\n    defaultValue: [],\n    use: 'secondary' as const,\n  };\n\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-accordion',\n      fallback: '200',\n      map: (value: string) => `${Number.parseInt(value)}`,\n      prop: 'duration',\n    }),\n  ] as const;\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleToggleInteraction = (newValue: NSAccordion.Item.Props['value']) => {\n    const { value } = this.asProps;\n\n    if (Array.isArray(value)) {\n      const indexOfNewValue = value.indexOf(newValue);\n      const result = [...value];\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      indexOfNewValue === -1 ? result.push(newValue) : result.splice(indexOfNewValue, 1);\n      this.handlers.value(result);\n    } else {\n      this.handlers.value(value === newValue ? null : newValue);\n    }\n  };\n\n  getItemProps({ value }: NSAccordion.Item.Props) {\n    const { value: selectedValue, duration, use } = this.asProps;\n    const selected = Array.isArray(selectedValue)\n      ? selectedValue.includes(value)\n      : selectedValue === value;\n\n    return {\n      selected,\n      duration,\n      use,\n      $handleInteraction: this.handleToggleInteraction,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\nexport class RootItem extends Component<\n  Intergalactic.InternalTypings.InferChildComponentProps<NSAccordion.Item.Component, typeof RootAccordion, 'Item'>,\n  typeof RootItem.enhance\n> {\n  static displayName = 'Item';\n  static style = style;\n  static enhance = [uniqueIDEnhancement()] as const;\n\n  handleClick = () => {\n    const { value, $handleInteraction } = this.asProps;\n\n    $handleInteraction(value);\n  };\n\n  getToggleProps() {\n    const { value, uid, disabled, use } = this.asProps;\n    return {\n      use,\n      disabled,\n      onClick: disabled ? undefined : this.handleClick,\n      id: `igc-${uid}-${value}-toggle`,\n      tag: 'h3',\n      size: 300,\n      tabIndex: disabled ? -1 : 0,\n    };\n  }\n\n  getToggleButtonProps() {\n    const { value, uid, selected, disabled } = this.asProps;\n    return {\n      disabled,\n      'id': `igc-${uid}-${value}-toggle-button`,\n      'aria-expanded': selected ? 'true' : 'false',\n      'aria-controls': selected ? `igc-${uid}-${value}-collapse` : undefined,\n    };\n  }\n\n  getCollapseProps() {\n    const { selected, uid, duration, value } = this.asProps;\n    return {\n      selected,\n      duration,\n      'id': `igc-${uid}-${value}-collapse`,\n      'role': 'region',\n      'aria-labelledby': `igc-${uid}-${value}-toggle-button`,\n    };\n  }\n\n  getChevronProps() {\n    const { selected, size } = this.asProps;\n    return {\n      selected,\n      size,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nclass Toggle extends Component<\n  Intergalactic.InternalTypings.InferChildComponentProps<NSAccordion.Item.Toggle.Component, typeof RootItem, 'Toggle'>\n> {\n  toggleRef = React.createRef();\n\n  handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (event.key === 'Enter') {\n      if (this.toggleRef.current === event.target) {\n        event.currentTarget.click();\n      }\n    } else if (event.key === ' ') {\n      event.preventDefault();\n      if (this.toggleRef.current === event.target) {\n        event.currentTarget.click();\n      }\n    }\n  };\n\n  render() {\n    const { styles, use } = this.asProps;\n    const SItemToggle = Root;\n\n    return sstyled(styles)(\n      <SItemToggle use={use} ref={this.toggleRef} render={Text} innerOutline onKeyDown={this.handleKeyDown} />,\n    );\n  }\n}\n\nfunction Chevron(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSAccordion.Item.Chevron.Component,\n    typeof RootItem,\n    'Chevron'\n  >,\n) {\n  const { styles, size } = props;\n\n  const SItemChevron = Root;\n  return sstyled(styles)(<SItemChevron render={size === 'l' ? ChevronRightL : ChevronRightM} />);\n}\n\nfunction ToggleButton(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSAccordion.Item.ToggleButton.Component,\n    typeof RootItem,\n    'ToggleButton'\n  >,\n) {\n  const { styles } = props;\n\n  return sstyled(styles)(\n    <Root render={Flex} alignItems='center' role='button' />,\n  );\n}\n\nfunction Collapse(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSAccordion.Item.Collapse.Component,\n    typeof RootItem,\n    'Collapse'\n  >,\n) {\n  const { selected } = props;\n  const visible = selected;\n\n  return (\n    <Root\n      render={CollapseAnimate}\n      visible={visible}\n      interactive\n      inert={!visible ? '' : undefined}\n      aria-hidden={!visible}\n    />\n  );\n}\n\nconst Item = createComponent<\n  NSAccordion.Item.Component,\n  typeof RootItem\n>(RootItem, {\n  Toggle,\n  Chevron,\n  ToggleButton,\n  Collapse,\n});\n\n/**\n * Accordion\n *\n * {@link https://developer.semrush.com/intergalactic/components/accordion/accordion-api/|API} | {@link https://developer.semrush.com/intergalactic/components/accordion/accordion-code/|Examples}\n */\nconst Accordion = createComponent<\n  NSAccordion.Component,\n  typeof RootAccordion\n>(RootAccordion, {\n  Item,\n});\n\nexport const wrapAccordion = <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<NSAccordion.WrapComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => wrapper as NSAccordion.WrapComponent<PropsExtending>;\n\nexport default Accordion;\n"],"mappings":";;;;;;AAAA,SAASA,QAAQ,IAAIC,eAAe,EAAEC,IAAI,QAAQ,0BAA0B;AAE5E,SAASC,eAAe,EAAEC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,OAAOC,mBAAmB,MAAM,kCAAkC;AAClE,SAASC,kBAAkB,QAAQ,wCAAwC;AAC3E,OAAOC,aAAa,MAAM,8BAA8B;AACxD,OAAOC,aAAa,MAAM,8BAA8B;AACxD,SAASC,IAAI,QAAQ,qBAAqB;AAC1C,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAK1B,MAAMC,aAAa,SAASZ,SAAS,CAOnC;EAAAa,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,kCAuB2BC,QAAyC,IAAK;MACvE,MAAM;QAAEC;MAAM,CAAC,GAAG,IAAI,CAACC,OAAO;MAE9B,IAAIC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,EAAE;QACxB,MAAMI,eAAe,GAAGJ,KAAK,CAACK,OAAO,CAACN,QAAQ,CAAC;QAC/C,MAAMO,MAAM,GAAG,CAAC,GAAGN,KAAK,CAAC;QACzB;QACAI,eAAe,KAAK,CAAC,CAAC,GAAGE,MAAM,CAACC,IAAI,CAACR,QAAQ,CAAC,GAAGO,MAAM,CAACE,MAAM,CAACJ,eAAe,EAAE,CAAC,CAAC;QAClF,IAAI,CAACK,QAAQ,CAACT,KAAK,CAACM,MAAM,CAAC;MAC7B,CAAC,MAAM;QACL,IAAI,CAACG,QAAQ,CAACT,KAAK,CAACA,KAAK,KAAKD,QAAQ,GAAG,IAAI,GAAGA,QAAQ,CAAC;MAC3D;IACF,CAAC;EAAA;EAlBDW,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACLV,KAAK,EAAE;IACT,CAAC;EACH;EAgBAW,YAAYA,CAAC;IAAEX;EAA8B,CAAC,EAAE;IAC9C,MAAM;MAAEA,KAAK,EAAEY,aAAa;MAAEC,QAAQ;MAAEC;IAAI,CAAC,GAAG,IAAI,CAACb,OAAO;IAC5D,MAAMc,QAAQ,GAAGb,KAAK,CAACC,OAAO,CAACS,aAAa,CAAC,GACzCA,aAAa,CAACI,QAAQ,CAAChB,KAAK,CAAC,GAC7BY,aAAa,KAAKZ,KAAK;IAE3B,OAAO;MACLe,QAAQ;MACRF,QAAQ;MACRC,GAAG;MACHG,kBAAkB,EAAE,IAAI,CAACC;IAC3B,CAAC;EACH;EAEAC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC;IAAS,CAAC,GAAG,IAAI,CAACnB,OAAO;IACjC,oBAAOV,KAAA,CAAA8B,aAAA,CAACD,QAAQ,MAAE,CAAC;EACrB;AACF;AAACtB,eAAA,CA9DKH,aAAa,iBAQI,WAAW;AAAAG,eAAA,CAR5BH,aAAa,WASFH,KAAK;AAAAM,eAAA,CAThBH,aAAa,kBAUK;EACpB2B,YAAY,EAAE,EAAE;EAChBR,GAAG,EAAE;AACP,CAAC;AAAAhB,eAAA,CAbGH,aAAa,aAeA,CACfR,kBAAkB,CAAC;EACjBoC,QAAQ,EAAE,oCAAoC;EAC9CC,QAAQ,EAAE,KAAK;EACfC,GAAG,EAAGzB,KAAa,IAAK,GAAG0B,MAAM,CAACC,QAAQ,CAAC3B,KAAK,CAAC,EAAE;EACnD4B,IAAI,EAAE;AACR,CAAC,CAAC,CACH;AAyCH,OAAO,MAAMC,QAAQ,SAAS9C,SAAS,CAGrC;EAAAa,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,sBAKc,MAAM;MAClB,MAAM;QAAEE,KAAK;QAAEiB;MAAmB,CAAC,GAAG,IAAI,CAAChB,OAAO;MAElDgB,kBAAkB,CAACjB,KAAK,CAAC;IAC3B,CAAC;EAAA;EAED8B,cAAcA,CAAA,EAAG;IACf,MAAM;MAAE9B,KAAK;MAAE+B,GAAG;MAAEC,QAAQ;MAAElB;IAAI,CAAC,GAAG,IAAI,CAACb,OAAO;IAClD,OAAO;MACLa,GAAG;MACHkB,QAAQ;MACRC,OAAO,EAAED,QAAQ,GAAGE,SAAS,GAAG,IAAI,CAACC,WAAW;MAChDC,EAAE,EAAE,OAAOL,GAAG,IAAI/B,KAAK,SAAS;MAChCqC,GAAG,EAAE,IAAI;MACTC,IAAI,EAAE,GAAG;MACTC,QAAQ,EAAEP,QAAQ,GAAG,CAAC,CAAC,GAAG;IAC5B,CAAC;EACH;EAEAQ,oBAAoBA,CAAA,EAAG;IACrB,MAAM;MAAExC,KAAK;MAAE+B,GAAG;MAAEhB,QAAQ;MAAEiB;IAAS,CAAC,GAAG,IAAI,CAAC/B,OAAO;IACvD,OAAO;MACL+B,QAAQ;MACR,IAAI,EAAE,OAAOD,GAAG,IAAI/B,KAAK,gBAAgB;MACzC,eAAe,EAAEe,QAAQ,GAAG,MAAM,GAAG,OAAO;MAC5C,eAAe,EAAEA,QAAQ,GAAG,OAAOgB,GAAG,IAAI/B,KAAK,WAAW,GAAGkC;IAC/D,CAAC;EACH;EAEAO,gBAAgBA,CAAA,EAAG;IACjB,MAAM;MAAE1B,QAAQ;MAAEgB,GAAG;MAAElB,QAAQ;MAAEb;IAAM,CAAC,GAAG,IAAI,CAACC,OAAO;IACvD,OAAO;MACLc,QAAQ;MACRF,QAAQ;MACR,IAAI,EAAE,OAAOkB,GAAG,IAAI/B,KAAK,WAAW;MACpC,MAAM,EAAE,QAAQ;MAChB,iBAAiB,EAAE,OAAO+B,GAAG,IAAI/B,KAAK;IACxC,CAAC;EACH;EAEA0C,eAAeA,CAAA,EAAG;IAChB,MAAM;MAAE3B,QAAQ;MAAEuB;IAAK,CAAC,GAAG,IAAI,CAACrC,OAAO;IACvC,OAAO;MACLc,QAAQ;MACRuB;IACF,CAAC;EACH;EAEAnB,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC;IAAS,CAAC,GAAG,IAAI,CAACnB,OAAO;IACjC,oBAAOV,KAAA,CAAA8B,aAAA,CAACD,QAAQ,MAAE,CAAC;EACrB;AACF;AAACtB,eAAA,CA5DY+B,QAAQ,iBAIE,MAAM;AAAA/B,eAAA,CAJhB+B,QAAQ,WAKJrC,KAAK;AAAAM,eAAA,CALT+B,QAAQ,aAMF,CAAC3C,mBAAmB,CAAC,CAAC,CAAC;AAwD1C,MAAMyD,MAAM,SAAS5D,SAAS,CAE5B;EAAAa,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,iCACYP,KAAK,CAACqD,SAAS,CAAC,CAAC;IAAA9C,eAAA,wBAEZ+C,KAA2C,IAAK;MAC/D,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;QACzB,IAAI,IAAI,CAACC,SAAS,CAACC,OAAO,KAAKH,KAAK,CAACI,MAAM,EAAE;UAC3CJ,KAAK,CAACK,aAAa,CAACC,KAAK,CAAC,CAAC;QAC7B;MACF,CAAC,MAAM,IAAIN,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;QAC5BD,KAAK,CAACO,cAAc,CAAC,CAAC;QACtB,IAAI,IAAI,CAACL,SAAS,CAACC,OAAO,KAAKH,KAAK,CAACI,MAAM,EAAE;UAC3CJ,KAAK,CAACK,aAAa,CAACC,KAAK,CAAC,CAAC;QAC7B;MACF;IACF,CAAC;EAAA;EAEDhC,MAAMA,CAAA,EAAG;IAAA,IAAAkC,IAAA,QAAApD,OAAA;MAAAqD,KAAA;IACP,MAAM;MAAEC,MAAM;MAAEzC;IAAI,CAAC,GAAG,IAAI,CAACb,OAAO;IACpC,MAAMuD,WAAW,GAGqClE,IAAI;IAD1D,OAAAgE,KAAA,GAAOtE,OAAO,CAACuE,MAAM,CAAC,eACpBhE,KAAA,CAAA8B,aAAA,CAACmC,WAAW,EAAAF,KAAA,CAAAG,EAAA;MAAA,GAAAC,YAAA;QAAA,OAAM5C,GAAG;QAAA,OAAO,IAAI,CAACiC,SAAS;QAAA;QAAA,aAAwC,IAAI,CAACY;MAAa,GAAAN,IAAA;IAAA,EAAG,CAAC;EAE5G;AACF;AAEA,SAASO,OAAOA,CACdC,KAIC,EACD;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACA,MAAM;IAAET,MAAM;IAAEjB;EAAK,CAAC,GAAGuB,KAAK;EAE9B,MAAMI,YAAY,GAC2B3B,IAAI,KAAK,GAAG,GAAGlD,aAAa,GAAGC,aAAa;EAAzF,OAAA2E,KAAA,GAAOhF,OAAO,CAACuE,MAAM,CAAC,eAAChE,KAAA,CAAA8B,aAAA,CAAC4C,YAAY,EAAAD,KAAA,CAAAP,EAAA;IAAA,GAAAS,aAAA,KAAAJ,KAAA;EAAA,EAAwD,CAAC;AAC/F;AAEA,SAASK,YAAYA,CACnBN,KAIC,EACD;EAAA,IAAAO,KAAA,GAAAL,YAAA;IAAAM,KAAA;EACA,MAAM;IAAEd;EAAO,CAAC,GAAGM,KAAK;EAExB,OAAAQ,KAAA,GAAOrF,OAAO,CAACuE,MAAM,CAAC,eACpBhE,KAAA,CAAA8B,aAAA,CAAcxC,IAAI,EAAAyF,aAAA;IAAA,cAAa,QAAQ;IAAA,QAAM;EAAQ,GAAAF,KAAA,CAAE,CAAC;AAE5D;AAEA,SAASzF,QAAQA,CACfkF,KAIC,EACD;EAAA,IAAAU,KAAA,GAAAR,YAAA;EACA,MAAM;IAAEhD;EAAS,CAAC,GAAG8C,KAAK;EAC1B,MAAMW,OAAO,GAAGzD,QAAQ;EAExB,oBACExB,KAAA,CAAA8B,aAAA,CACUzC,eAAe,EAAA6F,aAAA;IAAA,WACdD,OAAO;IAAA;IAAA,SAET,CAACA,OAAO,GAAG,EAAE,GAAGtC,SAAS;IAAA,eACnB,CAACsC;EAAO,GAAAD,KAAA,CACtB,CAAC;AAEN;AAEA,MAAMG,IAAI,GAAG5F,eAAe,CAG1B+C,QAAQ,EAAE;EACVc,MAAM;EACNiB,OAAO;EACPO,YAAY;EACZxF;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA,MAAMgG,SAAS,GAAG7F,eAAe,CAG/Ba,aAAa,EAAE;EACf+E;AACF,CAAC,CAAC;AAEF,OAAO,MAAME,aAAa,GACxBC,OAKoB,IACjBA,OAAoD;AAEzD,eAAeF,SAAS","ignoreList":[]}
+{"version":3,"file":"Accordion.js","names":["Collapse","CollapseAnimate","Flex","Box","createComponent","Component","sstyled","Root","uniqueIDEnhancement","cssVariableEnhance","ChevronRightL","ChevronRightM","Text","React","style","_sstyled","insert","RootAccordion","constructor","args","_defineProperty","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","uncontrolledProps","getItemProps","selectedValue","duration","use","selected","includes","$handleInteraction","handleToggleInteraction","render","_ref","_ref7","SAccordion","styles","createElement","cn","_assignProps","defaultValue","variable","fallback","map","Number","parseInt","prop","RootItem","getToggleProps","uid","disabled","onClick","undefined","handleClick","id","tag","size","tabIndex","getToggleButtonProps","getCollapseProps","getChevronProps","_ref2","_ref8","SAccordionItem","_assignProps2","Toggle","createRef","event","key","toggleRef","current","target","currentTarget","click","preventDefault","_ref3","_ref9","SItemToggle","_assignProps3","handleKeyDown","Chevron","props","_ref4","arguments[0]","_ref0","SItemChevron","_assignProps4","ToggleButton","_ref5","_ref1","SItemToggleButton","_assignProps5","_ref6","_ref10","SItemCollapse","SItemCollapseContainer","Children","visible","_assignProps6","Item","Accordion","wrapAccordion","wrapper"],"sources":["../../src/Accordion.tsx"],"sourcesContent":["import { Collapse as CollapseAnimate, Flex, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport ChevronRightL from '@semcore/icon/ChevronRight/l';\nimport ChevronRightM from '@semcore/icon/ChevronRight/m';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport type { NSAccordion } from './Accordion.type';\nimport style from './style/accordion.shadow.css';\n\nclass RootAccordion extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSAccordion.Component>,\n  typeof RootAccordion.enhance,\n  NSAccordion.Handlers,\n  {},\n  {},\n  NSAccordion.DefaultProps\n> {\n  static displayName = 'Accordion';\n  static style = style;\n  static defaultProps = {\n    defaultValue: [],\n    use: 'secondary' as const,\n  };\n\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-accordion',\n      fallback: '200',\n      map: (value: string) => `${Number.parseInt(value)}`,\n      prop: 'duration',\n    }),\n  ] as const;\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleToggleInteraction = (newValue: NSAccordion.Item.Props['value']) => {\n    const { value } = this.asProps;\n\n    if (Array.isArray(value)) {\n      const indexOfNewValue = value.indexOf(newValue);\n      const result = [...value];\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      indexOfNewValue === -1 ? result.push(newValue) : result.splice(indexOfNewValue, 1);\n      this.handlers.value(result);\n    } else {\n      this.handlers.value(value === newValue ? null : newValue);\n    }\n  };\n\n  getItemProps({ value }: NSAccordion.Item.Props) {\n    const { value: selectedValue, duration, use } = this.asProps;\n    const selected = Array.isArray(selectedValue)\n      ? selectedValue.includes(value)\n      : selectedValue === value;\n\n    return {\n      selected,\n      duration,\n      use,\n      $handleInteraction: this.handleToggleInteraction,\n    };\n  }\n\n  render() {\n    const SAccordion = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<SAccordion __excludeProps={['onChange']} render={Flex} />);\n  }\n}\nexport class RootItem extends Component<\n  Intergalactic.InternalTypings.InferChildComponentProps<NSAccordion.Item.Component, typeof RootAccordion, 'Item'>,\n  typeof RootItem.enhance\n> {\n  static displayName = 'Item';\n  static style = style;\n  static enhance = [uniqueIDEnhancement()] as const;\n\n  handleClick = () => {\n    const { value, $handleInteraction } = this.asProps;\n\n    $handleInteraction(value);\n  };\n\n  getToggleProps() {\n    const { value, uid, disabled, use } = this.asProps;\n    return {\n      use,\n      disabled,\n      onClick: disabled ? undefined : this.handleClick,\n      id: `igc-${uid}-${value}-toggle`,\n      tag: 'h3',\n      size: 300,\n      tabIndex: disabled ? -1 : 0,\n    };\n  }\n\n  getToggleButtonProps() {\n    const { value, uid, selected, disabled } = this.asProps;\n    return {\n      disabled,\n      'id': `igc-${uid}-${value}-toggle-button`,\n      'aria-expanded': selected ? 'true' : 'false',\n      'aria-controls': selected ? `igc-${uid}-${value}-collapse` : undefined,\n    };\n  }\n\n  getCollapseProps() {\n    const { selected, uid, duration, value } = this.asProps;\n    return {\n      selected,\n      duration,\n      'id': `igc-${uid}-${value}-collapse`,\n      'role': 'region',\n      'aria-labelledby': `igc-${uid}-${value}-toggle-button`,\n    };\n  }\n\n  getChevronProps() {\n    const { selected, size } = this.asProps;\n    return {\n      selected,\n      size,\n    };\n  }\n\n  render() {\n    const SAccordionItem = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<SAccordionItem render={Box} />);\n  }\n}\n\nclass Toggle extends Component<\n  Intergalactic.InternalTypings.InferChildComponentProps<NSAccordion.Item.Toggle.Component, typeof RootItem, 'Toggle'>\n> {\n  toggleRef = React.createRef();\n\n  handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (event.key === 'Enter') {\n      if (this.toggleRef.current === event.target) {\n        event.currentTarget.click();\n      }\n    } else if (event.key === ' ') {\n      event.preventDefault();\n      if (this.toggleRef.current === event.target) {\n        event.currentTarget.click();\n      }\n    }\n  };\n\n  render() {\n    const { styles, use } = this.asProps;\n    const SItemToggle = Root;\n\n    return sstyled(styles)(\n      <SItemToggle use={use} ref={this.toggleRef} render={Text} innerOutline onKeyDown={this.handleKeyDown} />,\n    );\n  }\n}\n\nfunction Chevron(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSAccordion.Item.Chevron.Component,\n    typeof RootItem,\n    'Chevron'\n  >,\n) {\n  const { styles, size } = props;\n\n  const SItemChevron = Root;\n  return sstyled(styles)(<SItemChevron render={size === 'l' ? ChevronRightL : ChevronRightM} />);\n}\n\nfunction ToggleButton(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSAccordion.Item.ToggleButton.Component,\n    typeof RootItem,\n    'ToggleButton'\n  >,\n) {\n  const SItemToggleButton = Root;\n  const { styles } = props;\n\n  return sstyled(styles)(\n    <SItemToggleButton render={Flex} alignItems='center' role='button' />,\n  );\n}\n\nfunction Collapse(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSAccordion.Item.Collapse.Component,\n    typeof RootItem,\n    'Collapse'\n  >,\n) {\n  const SItemCollapse = Root;\n  const SItemCollapseContainer = Box;\n  const { selected, styles, Children } = props;\n  const visible = selected;\n\n  return sstyled(styles)(\n    <SItemCollapse\n      render={CollapseAnimate}\n      visible={visible}\n      interactive\n      inert={!visible ? '' : undefined}\n      aria-hidden={!visible}\n    >\n      <SItemCollapseContainer>\n        <Children />\n      </SItemCollapseContainer>\n    </SItemCollapse>,\n  );\n}\n\nconst Item = createComponent<\n  NSAccordion.Item.Component,\n  typeof RootItem\n>(RootItem, {\n  Toggle,\n  Chevron,\n  ToggleButton,\n  Collapse,\n});\n\n/**\n * Accordion\n *\n * {@link https://developer.semrush.com/intergalactic/components/accordion/accordion-api/|API} | {@link https://developer.semrush.com/intergalactic/components/accordion/accordion-code/|Examples}\n */\nconst Accordion = createComponent<\n  NSAccordion.Component,\n  typeof RootAccordion\n>(RootAccordion, {\n  Item,\n});\n\nexport const wrapAccordion = <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<NSAccordion.WrapComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => wrapper as NSAccordion.WrapComponent<PropsExtending>;\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.type.js","names":[],"sources":["../../src/Accordion.type.ts"],"sourcesContent":["import type { BoxProps, FlexProps, Flex } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { Text } from '@semcore/typography';\nimport type { Property } from 'csstype';\n\ndeclare namespace NSAccordion {\n  // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n  type Value = null | number | string | Array<number | string | null>;\n  type Props<V extends NSAccordion.Value = NSAccordion.Value> = FlexProps & {\n  /** Value for the active tab. Can be set as stroke, number, null or as array.\n   * @type NSAccordion.Value\n   * */\n    value?: V;\n    /**\n   * Value of the active tabs selected by default\n   * @type NSAccordion.Value\n   * @default []\n   */\n    defaultValue?: V;\n    /** Called when the selection is changed\n   * @type (value: NSAccordion.Value, event?: React.SyntheticEvent) => void\n   * */\n    onChange?:\n      | ((value: V, event?: React.SyntheticEvent) => void)\n      | React.Dispatch<React.SetStateAction<V>>;\n    /** Animation duration of each Accordion.Item inside\n   * @default 200 */\n    duration?: number;\n    /**\n   * Changes the visual appearance of the component\n   * @default secondary\n   */\n    use?: 'primary' | 'secondary';\n  };\n  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: Props['value'];\n  };\n  type DefaultProps = {\n    defaultValue: Value;\n    use: 'secondary';\n  };\n  namespace Item {\n    type Props = {\n      /** Tab value */\n      value: string | number;\n      /** Disabling selection changes */\n      disabled?: boolean;\n      /** Animation duration\n       * @default 350 */\n      duration?: number;\n    };\n    type Ctx = {\n      getToggleProps?: PropGetterFn;\n      getCollapseProps?: PropGetterFn;\n      getChevronProps?: PropGetterFn;\n      selected?: boolean;\n    };\n    namespace Toggle {\n      type Props = BoxProps & {\n        tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n      };\n      type Component = Intergalactic.Component<typeof Text, Props>;\n    }\n    namespace ToggleButton {\n      type Props = {};\n      type Component = Intergalactic.Component<typeof Flex, Props>;\n    }\n    namespace Chevron {\n      type Props = BoxProps & {\n        /**\n         * Chevron size\n         * @default m\n         */\n        size?: 'm' | 'l';\n      };\n\n      type Component = Intergalactic.Component<'div', Props>;\n    }\n\n    namespace Collapse {\n      type Props = BoxProps & {\n        /** Animation titles */\n        keyframes?: [string, string];\n        /** Enables animation on first rendering\n         * @default false\n         */\n        initialAnimation?: boolean;\n        /**\n         * @default ease-out\n         */\n        timingFunction?: Property.AnimationTimingFunction;\n        /**\n         * @default false\n         */\n        animationsDisabled?: boolean;\n        /** Animation duration in ms\n         * @default 0\n         */\n        duration?: number | [number, number];\n        /** If it set to `true`, animated node is persisted in dom even if `visible=false`   */\n        preserveNode?: boolean;\n        /**\n         * Add overflow=clip when passing animation\n         * @default true\n         * */\n        overflowHidden?: boolean;\n        /**\n         * Value for height after animation\n         * @default auto\n         */\n        defaultHeight?: 'auto' | '100%';\n      };\n      type Component = Intergalactic.Component<'div', Props>;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, Ctx> & {\n      Toggle: Toggle.Component;\n      ToggleButton: ToggleButton.Component;\n      Chevron: Chevron.Component;\n      Collapse: Collapse.Component;\n    };\n  }\n\n  type WrapComponent<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 & { value: V },\n    [handlers: Handlers]\n    > & PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type AccordionValue = NSAccordion.Value;\n/** @deprecated It will be removed in v18. */\nexport type AccordionProps<V extends AccordionValue = AccordionValue> = NSAccordion.Props<V>;\n/** @deprecated It will be removed in v18. */\nexport type AccordionContext = NSAccordion.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type AccordionHandlers = NSAccordion.Handlers;\n/** @deprecated It will be removed in v18. */\nexport type AccordionItemProps = NSAccordion.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type AccordionItemContext = NSAccordion.Item.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type AccordionItemToggleProps = NSAccordion.Item.Toggle.Props;\n/** @deprecated It will be removed in v18. */\nexport type ChevronItemProps = NSAccordion.Item.Chevron.Props;\n/** @deprecated It will be removed in v18. */\nexport type AccordionCollapseProps = NSAccordion.Item.Collapse.Props;\n\nexport type { NSAccordion };\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"Accordion.type.js","names":[],"sources":["../../src/Accordion.type.ts"],"sourcesContent":["import type { NSBox, NSFlex } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { Text } from '@semcore/typography';\nimport type { Property } from 'csstype';\n\ndeclare namespace NSAccordion {\n  // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n  type Value = null | number | string | Array<number | string | null>;\n  type Props<V extends NSAccordion.Value = NSAccordion.Value> = NSFlex.Props & {\n  /** Value for the active tab. Can be set as stroke, number, null or as array.\n   * @type NSAccordion.Value\n   * */\n    value?: V;\n    /**\n   * Value of the active tabs selected by default\n   * @type NSAccordion.Value\n   * @default []\n   */\n    defaultValue?: V;\n    /** Called when the selection is changed\n   * @type (value: NSAccordion.Value, event?: React.SyntheticEvent) => void\n   * */\n    onChange?:\n      | ((value: V, event?: React.SyntheticEvent) => void)\n      | React.Dispatch<React.SetStateAction<V>>;\n    /** Animation duration of each Accordion.Item inside\n   * @default 200 */\n    duration?: number;\n    /**\n   * Changes the visual appearance of the component\n   * @default secondary\n   */\n    use?: 'primary' | 'secondary';\n  };\n  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: Props['value'];\n  };\n  type DefaultProps = {\n    defaultValue: Value;\n    use: 'secondary';\n  };\n  namespace Item {\n    type Props = {\n      /** Tab value */\n      value: string | number;\n      /** Disabling selection changes */\n      disabled?: boolean;\n      /** Animation duration\n       * @default 350 */\n      duration?: number;\n    };\n    type Ctx = {\n      getToggleProps?: PropGetterFn;\n      getCollapseProps?: PropGetterFn;\n      getChevronProps?: PropGetterFn;\n      selected?: boolean;\n    };\n    namespace Toggle {\n      type Props = NSBox.Props & {\n        tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n      };\n      type Component = Intergalactic.Component<typeof Text, Props>;\n    }\n    namespace ToggleButton {\n      type Props = {};\n      type Component = Intergalactic.Component<NSFlex.Component, Props>;\n    }\n    namespace Chevron {\n      type Props = NSBox.Props & {\n        /**\n         * Chevron size\n         * @default m\n         */\n        size?: 'm' | 'l';\n      };\n\n      type Component = Intergalactic.Component<'div', Props>;\n    }\n\n    namespace Collapse {\n      type Props = NSBox.Props & {\n        /** Animation titles */\n        keyframes?: [string, string];\n        /** Enables animation on first rendering\n         * @default false\n         */\n        initialAnimation?: boolean;\n        /**\n         * @default ease-out\n         */\n        timingFunction?: Property.AnimationTimingFunction;\n        /**\n         * @default false\n         */\n        animationsDisabled?: boolean;\n        /** Animation duration in ms\n         * @default 0\n         */\n        duration?: number | [number, number];\n        /** If it set to `true`, animated node is persisted in dom even if `visible=false`   */\n        preserveNode?: boolean;\n        /**\n         * Add overflow=clip when passing animation\n         * @default true\n         * */\n        overflowHidden?: boolean;\n        /**\n         * Value for height after animation\n         * @default auto\n         */\n        defaultHeight?: 'auto' | '100%';\n      };\n      type Component = Intergalactic.Component<'div', Props>;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, Ctx> & {\n      Toggle: Toggle.Component;\n      ToggleButton: ToggleButton.Component;\n      Chevron: Chevron.Component;\n      Collapse: Collapse.Component;\n    };\n  }\n\n  type WrapComponent<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 & { value: V },\n    [handlers: Handlers]\n    > & PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v19. */\nexport type AccordionValue = NSAccordion.Value;\n/** @deprecated It will be removed in v19. */\nexport type AccordionProps<V extends AccordionValue = AccordionValue> = NSAccordion.Props<V>;\n/** @deprecated It will be removed in v19. */\nexport type AccordionContext = NSAccordion.Ctx;\n/** @deprecated It will be removed in v19. */\nexport type AccordionHandlers = NSAccordion.Handlers;\n/** @deprecated It will be removed in v19. */\nexport type AccordionItemProps = NSAccordion.Item.Props;\n/** @deprecated It will be removed in v19. */\nexport type AccordionItemContext = NSAccordion.Item.Ctx;\n/** @deprecated It will be removed in v19. */\nexport type AccordionItemToggleProps = NSAccordion.Item.Toggle.Props;\n/** @deprecated It will be removed in v19. */\nexport type ChevronItemProps = NSAccordion.Item.Chevron.Props;\n/** @deprecated It will be removed in v19. */\nexport type AccordionCollapseProps = NSAccordion.Item.Collapse.Props;\n\nexport type { NSAccordion };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/style/accordion.shadow.css

@@ -1,39 +1,127 @@
+SAccordion {
+  flex-direction: column;
+  gap: var(--intergalactic-spacing-content-gap-xsmall, 2px);
+}
+
 SItemToggle {
   display: flex;
   align-items: center;
   position: relative;
   cursor: pointer;
-}
-
-SItemToggle[use][use] {
-  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   font-weight: var(--intergalactic-regular, 400);
-}
-SItemToggle[use][use='primary'] {
-  background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
-  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
-  margin-bottom: var(--intergalactic-spacing-05x, 2px);
-}
-SItemToggle[use][use='primary']:hover {
-  background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.96 0.001 180));
+
+  &[use='primary'] {
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+    background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
+    border-radius: var(--intergalactic-surface-rounded, 8px);
+    padding: var(--intergalactic-spacing-content-padding-small, 8px)
+      var(--intergalactic-spacing-content-padding-large, 16px)
+      var(--intergalactic-spacing-content-padding-small, 8px)
+      var(--intergalactic-spacing-content-padding-xlarge, 20px);
+      
+
+    &:has(SItemChevron[selected]) {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:hover {
+      background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.001 180));
+    }
+
+    SItemToggleButton {
+      gap: var(--intergalactic-spacing-content-gap-large, 8px);
+      justify-content: space-between;
+    }
+
+    SItemChevron {
+      order: 1;
+    }
+  }
+
+  &[use='secondary'] {
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+    padding:
+      var(--intergalactic-spacing-content-gap-large, 8px)
+      var(--intergalactic-spacing-content-padding-xxsmall, 2px)
+      var(--intergalactic-spacing-content-padding-small, 8px)
+      var(--intergalactic-spacing-content-padding-xxsmall, 2px);
+
+    SItemToggleButton {
+      gap: var(--intergalactic-spacing-content-gap-small, 4px);
+      justify-content: unset;
+    }
+
+    SItemChevron {
+      order: 0;
+    }
+  }
+
+  &[disabled] {
+    opacity: var(--intergalactic-disabled-opacity, 0.4);
+    cursor: default;
+  }
 }
 
-SItemToggle[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.4);
-  cursor: default;
+SItemToggleButton {
+  flex: 1;
 }
 
 SItemChevron {
-  margin-right: var(--intergalactic-spacing-2x, 8px);
   transform: rotate(0deg);
-  transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out;
-  fill: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
+  transition: transform calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12));
+  fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
   &[selected] {
     transform: rotate(90deg);
   }
 }
 
+SAccordionItem {
+  &[use='primary'] {
+    position: relative;
+    overflow: clip;
+    border-radius: var(--intergalactic-surface-rounded, 8px);
+    background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      z-index: 1;
+      opacity: 0;
+      background-color: var(--intergalactic-border-accent, oklch(0.23 0.01 140));
+      transition-property: opacity;
+      transition-timing-function: var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12));
+    }
+
+    &[selected] {
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    &[duration] {
+      &::before {
+        transition-duration: calc(var(--duration) * 1ms);
+      }
+    }
+  }
+
+  &[use='secondary'] {
+    SItemCollapse {
+      border-left: 2px solid var(--intergalactic-border-accent, oklch(0.23 0.01 140));
+    }
+  }
+}
+
+SItemCollapseContainer {
+  padding: var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-xlarge, 20px);
+}
+
 @media (prefers-reduced-motion) {
   SItemChevron {
     transition: none;

package/lib/esm/Accordion.mjs

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
-import { Flex, Collapse as Collapse$1 } from "@semcore/base-components";
+import { Flex, Box, Collapse as Collapse$1 } from "@semcore/base-components";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { cssVariableEnhance } from "@semcore/core/lib/utils/useCssVariable";
 import ChevronRightL from "@semcore/icon/ChevronRight/l";
@@ -12,17 +12,24 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SItemToggle_1r738_gg_{display:flex;align-items:center;position:relative;cursor:pointer}.___SItemToggle_1r738_gg_.__use_1r738_gg_.__use_1r738_gg_{color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));font-weight:var(--intergalactic-regular,400)}.___SItemToggle_1r738_gg_.__use_1r738_gg_._use_primary_1r738_gg_{background-color:var(--intergalactic-bg-secondary-neutral,oklch(.98 .001 180));padding:var(--intergalactic-spacing-2x,8px) var(--intergalactic-spacing-3x,12px);margin-bottom:var(--intergalactic-spacing-05x,2px)}@media (hover:hover){.___SItemToggle_1r738_gg_.__use_1r738_gg_._use_primary_1r738_gg_:hover{background-color:var(--intergalactic-bg-secondary-neutral-hover,oklch(.96 .001 180))}}.___SItemToggle_1r738_gg_.__disabled_1r738_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default}.___SItemChevron_1r738_gg_{margin-right:var(--intergalactic-spacing-2x,8px);transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out;fill:var(--intergalactic-icon-primary-neutral,oklch(.092 .024 152.2/.526))}.___SItemChevron_1r738_gg_.__selected_1r738_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_1r738_gg_{transition:none}}",
+    '.___SAccordion_jqwgt_gg_{flex-direction:column;gap:var(--intergalactic-spacing-content-gap-xsmall,2px)}.___SItemToggle_jqwgt_gg_{display:flex;align-items:center;position:relative;cursor:pointer;font-weight:var(--intergalactic-regular,400)}.___SItemToggle_jqwgt_gg_._use_primary_jqwgt_gg_{color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));background-color:var(--intergalactic-bg-secondary-neutral,oklch(.98 .001 180));border-radius:var(--intergalactic-surface-rounded,8px);padding:var(--intergalactic-spacing-content-padding-small,8px) var(--intergalactic-spacing-content-padding-large,16px) var(--intergalactic-spacing-content-padding-small,8px) var(--intergalactic-spacing-content-padding-xlarge,20px)}.___SItemToggle_jqwgt_gg_._use_primary_jqwgt_gg_:has(.___SItemChevron_jqwgt_gg_.__selected_jqwgt_gg_){border-bottom-left-radius:0;border-bottom-right-radius:0}@media (hover:hover){.___SItemToggle_jqwgt_gg_._use_primary_jqwgt_gg_:hover{background-color:var(--intergalactic-bg-secondary-neutral-hover,oklch(.97 .001 180))}}.___SItemToggle_jqwgt_gg_._use_primary_jqwgt_gg_ .___SItemToggleButton_jqwgt_gg_{gap:var(--intergalactic-spacing-content-gap-large,8px);justify-content:space-between}.___SItemToggle_jqwgt_gg_._use_primary_jqwgt_gg_ .___SItemChevron_jqwgt_gg_{order:1}.___SItemToggle_jqwgt_gg_._use_secondary_jqwgt_gg_{color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));padding:var(--intergalactic-spacing-content-gap-large,8px) var(--intergalactic-spacing-content-padding-xxsmall,2px) var(--intergalactic-spacing-content-padding-small,8px) var(--intergalactic-spacing-content-padding-xxsmall,2px)}.___SItemToggle_jqwgt_gg_._use_secondary_jqwgt_gg_ .___SItemToggleButton_jqwgt_gg_{gap:var(--intergalactic-spacing-content-gap-small,4px);justify-content:normal}.___SItemToggle_jqwgt_gg_._use_secondary_jqwgt_gg_ .___SItemChevron_jqwgt_gg_{order:0}.___SItemToggle_jqwgt_gg_.__disabled_jqwgt_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default}.___SItemToggleButton_jqwgt_gg_{flex:1}.___SItemChevron_jqwgt_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(.5,0,0,1.12));fill:var(--intergalactic-text-primary,oklch(.1 .03 137/.899))}.___SItemChevron_jqwgt_gg_.__selected_jqwgt_gg_{transform:rotate(90deg)}.___SAccordionItem_jqwgt_gg_._use_primary_jqwgt_gg_{position:relative;overflow:clip;border-radius:var(--intergalactic-surface-rounded,8px);background-color:var(--intergalactic-bg-secondary-neutral,oklch(.98 .001 180))}.___SAccordionItem_jqwgt_gg_._use_primary_jqwgt_gg_:before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;z-index:1;opacity:0;background-color:var(--intergalactic-border-accent,oklch(.23 .01 140));transition-property:opacity;transition-timing-function:var(--intergalactic-easings-fast,cubic-bezier(.5,0,0,1.12))}.___SAccordionItem_jqwgt_gg_._use_primary_jqwgt_gg_.__selected_jqwgt_gg_:before{opacity:1}.___SAccordionItem_jqwgt_gg_._use_primary_jqwgt_gg_.__duration_jqwgt_gg_:before{transition-duration:calc(var(--duration_jqwgt)*1ms)}.___SAccordionItem_jqwgt_gg_._use_secondary_jqwgt_gg_ .___SItemCollapse_jqwgt_gg_{border-left:2px solid var(--intergalactic-border-accent,oklch(.23 .01 140))}.___SItemCollapseContainer_jqwgt_gg_{padding:var(--intergalactic-spacing-content-padding-medium,12px) var(--intergalactic-spacing-content-padding-xlarge,20px)}@media (prefers-reduced-motion){.___SItemChevron_jqwgt_gg_{transition:none}}',
     /*__inner_css_end__*/
-    "1r738_gg_"
+    "jqwgt_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SItemToggle": "___SItemToggle_1r738_gg_",
-    "_use": "__use_1r738_gg_",
-    "_use_primary": "_use_primary_1r738_gg_",
-    "_disabled": "__disabled_1r738_gg_",
-    "__SItemChevron": "___SItemChevron_1r738_gg_",
-    "_selected": "__selected_1r738_gg_"
+    "__SAccordion": "___SAccordion_jqwgt_gg_",
+    "__SItemToggleButton": "___SItemToggleButton_jqwgt_gg_",
+    "__SItemCollapseContainer": "___SItemCollapseContainer_jqwgt_gg_",
+    "__SItemChevron": "___SItemChevron_jqwgt_gg_",
+    "__SItemToggle": "___SItemToggle_jqwgt_gg_",
+    "_use_primary": "_use_primary_jqwgt_gg_",
+    "_selected": "__selected_jqwgt_gg_",
+    "_use_secondary": "_use_secondary_jqwgt_gg_",
+    "_disabled": "__disabled_jqwgt_gg_",
+    "__SAccordionItem": "___SAccordionItem_jqwgt_gg_",
+    "_duration": "__duration_jqwgt_gg_",
+    "--duration": "--duration_jqwgt",
+    "__SItemCollapse": "___SItemCollapse_jqwgt_gg_"
   })
 );
 class RootAccordion extends Component {
@@ -64,10 +71,16 @@ class RootAccordion extends Component {
     };
   }
   render() {
+    var _ref = this.asProps, _ref7;
+    const SAccordion = Flex;
     const {
-      Children
+      styles
     } = this.asProps;
-    return /* @__PURE__ */ React.createElement(Children, null);
+    return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SAccordion, _ref7.cn("SAccordion", {
+      ...assignProps({
+        "__excludeProps": ["onChange"]
+      }, _ref)
+    }));
   }
 }
 _defineProperty(RootAccordion, "displayName", "Accordion");
@@ -150,10 +163,14 @@ class RootItem extends Component {
     };
   }
   render() {
+    var _ref2 = this.asProps, _ref8;
+    const SAccordionItem = Box;
     const {
-      Children
+      styles
     } = this.asProps;
-    return /* @__PURE__ */ React.createElement(Children, null);
+    return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SAccordionItem, _ref8.cn("SAccordionItem", {
+      ...assignProps({}, _ref2)
+    }));
   }
 }
 _defineProperty(RootItem, "displayName", "Item");
@@ -177,55 +194,64 @@ class Toggle extends Component {
     });
   }
   render() {
-    var _ref = this.asProps, _ref5;
+    var _ref3 = this.asProps, _ref9;
     const {
       styles,
       use
     } = this.asProps;
     const SItemToggle = Text;
-    return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemToggle, _ref5.cn("SItemToggle", {
+    return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemToggle, _ref9.cn("SItemToggle", {
       ...assignProps({
         "use": use,
         "ref": this.toggleRef,
         "innerOutline": true,
         "onKeyDown": this.handleKeyDown
-      }, _ref)
+      }, _ref3)
     }));
   }
 }
 function Chevron(props) {
-  var _ref2 = arguments[0], _ref6;
+  var _ref4 = arguments[0], _ref0;
   const {
     styles,
     size
   } = props;
   const SItemChevron = size === "l" ? ChevronRightL : ChevronRightM;
-  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemChevron, _ref6.cn("SItemChevron", {
-    ...assignProps({}, _ref2)
+  return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemChevron, _ref0.cn("SItemChevron", {
+    ...assignProps({}, _ref4)
   }));
 }
 function ToggleButton(props) {
-  var _ref3 = arguments[0], _ref7;
+  var _ref5 = arguments[0], _ref1;
+  const SItemToggleButton = Flex;
   const {
     styles
   } = props;
-  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(Flex, assignProps({
-    "alignItems": "center",
-    "role": "button"
-  }, _ref3));
+  return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemToggleButton, _ref1.cn("SItemToggleButton", {
+    ...assignProps({
+      "alignItems": "center",
+      "role": "button"
+    }, _ref5)
+  }));
 }
 function Collapse(props) {
-  var _ref4 = arguments[0];
+  var _ref6 = arguments[0], _ref10;
+  const SItemCollapse = Collapse$1;
+  const SItemCollapseContainer = Box;
   const {
-    selected
+    selected,
+    styles,
+    Children
   } = props;
   const visible = selected;
-  return /* @__PURE__ */ React.createElement(Collapse$1, assignProps({
-    "visible": visible,
-    "interactive": true,
-    "inert": !visible ? "" : void 0,
-    "aria-hidden": !visible
-  }, _ref4));
+  return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemCollapse, _ref10.cn("SItemCollapse", {
+    ...assignProps({
+      "visible": visible,
+      "interactive": true,
+      "inert": !visible ? "" : void 0,
+      "aria-hidden": !visible
+    }, _ref6)
+  }), /* @__PURE__ */ React.createElement(SItemCollapseContainer, _ref10.cn("SItemCollapseContainer", {}), /* @__PURE__ */ React.createElement(Children, _ref10.cn("Children", {}))));
 }
 const Item = createComponent(RootItem, {
   Toggle,

package/lib/esm/style/accordion.shadow.css

@@ -1,39 +1,127 @@
+SAccordion {
+  flex-direction: column;
+  gap: var(--intergalactic-spacing-content-gap-xsmall, 2px);
+}
+
 SItemToggle {
   display: flex;
   align-items: center;
   position: relative;
   cursor: pointer;
-}
-
-SItemToggle[use][use] {
-  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   font-weight: var(--intergalactic-regular, 400);
-}
-SItemToggle[use][use='primary'] {
-  background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
-  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
-  margin-bottom: var(--intergalactic-spacing-05x, 2px);
-}
-SItemToggle[use][use='primary']:hover {
-  background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.96 0.001 180));
+
+  &[use='primary'] {
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+    background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
+    border-radius: var(--intergalactic-surface-rounded, 8px);
+    padding: var(--intergalactic-spacing-content-padding-small, 8px)
+      var(--intergalactic-spacing-content-padding-large, 16px)
+      var(--intergalactic-spacing-content-padding-small, 8px)
+      var(--intergalactic-spacing-content-padding-xlarge, 20px);
+      
+
+    &:has(SItemChevron[selected]) {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:hover {
+      background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.001 180));
+    }
+
+    SItemToggleButton {
+      gap: var(--intergalactic-spacing-content-gap-large, 8px);
+      justify-content: space-between;
+    }
+
+    SItemChevron {
+      order: 1;
+    }
+  }
+
+  &[use='secondary'] {
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+    padding:
+      var(--intergalactic-spacing-content-gap-large, 8px)
+      var(--intergalactic-spacing-content-padding-xxsmall, 2px)
+      var(--intergalactic-spacing-content-padding-small, 8px)
+      var(--intergalactic-spacing-content-padding-xxsmall, 2px);
+
+    SItemToggleButton {
+      gap: var(--intergalactic-spacing-content-gap-small, 4px);
+      justify-content: unset;
+    }
+
+    SItemChevron {
+      order: 0;
+    }
+  }
+
+  &[disabled] {
+    opacity: var(--intergalactic-disabled-opacity, 0.4);
+    cursor: default;
+  }
 }
 
-SItemToggle[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.4);
-  cursor: default;
+SItemToggleButton {
+  flex: 1;
 }
 
 SItemChevron {
-  margin-right: var(--intergalactic-spacing-2x, 8px);
   transform: rotate(0deg);
-  transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out;
-  fill: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
+  transition: transform calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12));
+  fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
   &[selected] {
     transform: rotate(90deg);
   }
 }
 
+SAccordionItem {
+  &[use='primary'] {
+    position: relative;
+    overflow: clip;
+    border-radius: var(--intergalactic-surface-rounded, 8px);
+    background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      z-index: 1;
+      opacity: 0;
+      background-color: var(--intergalactic-border-accent, oklch(0.23 0.01 140));
+      transition-property: opacity;
+      transition-timing-function: var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12));
+    }
+
+    &[selected] {
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    &[duration] {
+      &::before {
+        transition-duration: calc(var(--duration) * 1ms);
+      }
+    }
+  }
+
+  &[use='secondary'] {
+    SItemCollapse {
+      border-left: 2px solid var(--intergalactic-border-accent, oklch(0.23 0.01 140));
+    }
+  }
+}
+
+SItemCollapseContainer {
+  padding: var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-xlarge, 20px);
+}
+
 @media (prefers-reduced-motion) {
   SItemChevron {
     transition: none;

package/lib/types/Accordion.d.ts

@@ -24,7 +24,7 @@ declare class RootAccordion extends Component<Intergalactic.InternalTypings.Infe
         use: "primary" | "secondary";
         $handleInteraction: (newValue: NSAccordion.Item.Props["value"]) => void;
     };
-    render(): React.JSX.Element;
+    render(): React.ReactNode;
 }
 export declare class RootItem extends Component<Intergalactic.InternalTypings.InferChildComponentProps<NSAccordion.Item.Component, typeof RootAccordion, 'Item'>, typeof RootItem.enhance> {
     static displayName: string;
@@ -61,7 +61,7 @@ export declare class RootItem extends Component<Intergalactic.InternalTypings.In
         selected: boolean;
         size: number | undefined;
     };
-    render(): React.JSX.Element;
+    render(): React.ReactNode;
 }
 /**
  * Accordion
@@ -71,3 +71,4 @@ export declare class RootItem extends Component<Intergalactic.InternalTypings.In
 declare const Accordion: NSAccordion.Component;
 export declare const wrapAccordion: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSAccordion.WrapComponent>> & PropsExtending) => React.ReactNode) => NSAccordion.WrapComponent<PropsExtending>;
 export default Accordion;
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAmB,SAAS,EAAiB,MAAM,eAAe,CAAC;AAM1E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,cAAM,aAAc,SAAQ,SAAS,CACnC,aAAa,CAAC,eAAe,CAAC,mBAAmB,CAAC,WAAW,CAAC,SAAS,CAAC,EACxE,OAAO,aAAa,CAAC,OAAO,EAC5B,WAAW,CAAC,QAAQ,EACpB,EAAE,EACF,EAAE,EACF,WAAW,CAAC,YAAY,CACzB;IACC,MAAM,CAAC,WAAW,SAAe;IACjC,MAAM,CAAC,KAAK;;MAAS;IACrB,MAAM,CAAC,YAAY;;;MAGjB;IAEF,MAAM,CAAC,OAAO;;OAOH;IAEX,iBAAiB;;;IAMjB,uBAAuB,GAAI,UAAU,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAYlE;IAEF,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK;;;;uCAdT,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;;IA4BpE,MAAM;CAMP;AACD,qBAAa,QAAS,SAAQ,SAAS,CACrC,aAAa,CAAC,eAAe,CAAC,wBAAwB,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,aAAa,EAAE,MAAM,CAAC,EAChH,OAAO,QAAQ,CAAC,OAAO,CACxB;IACC,MAAM,CAAC,WAAW,SAAU;IAC5B,MAAM,CAAC,KAAK;;MAAS;IACrB,MAAM,CAAC,OAAO;;OAAoC;IAElD,WAAW,aAIT;IAEF,cAAc;;;;;;;;;IAad,oBAAoB;;;;;;IAUpB,gBAAgB;;;;;;;IAWhB,eAAe;;;;IAQf,MAAM;CAMP;AA+FD;;;;GAIG;AACH,QAAA,MAAM,SAAS,uBAKb,CAAC;AAEH,eAAO,MAAM,aAAa,GAAI,cAAc,SAAS,EAAE,EACrD,SAAS,CACP,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,eAAe,CAClD,aAAa,CAAC,eAAe,CAAC,qBAAqB,CAAC,WAAW,CAAC,aAAa,CAAC,CAC/E,GACD,cAAc,KACX,KAAK,CAAC,SAAS,KACN,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;AAE1D,eAAe,SAAS,CAAC"}