@semcore/accordion 17.2.1-prerelease.9 → 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/Accordion.js

@@ -15,15 +15,22 @@ var _m = _interopRequireDefault(require("@semcore/icon/ChevronRight/m"));
 var _typography = require("@semcore/typography");
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./style/accordion.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.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}}", /*__inner_css_end__*/"1r738_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___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__*/"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 _core.Component {
   constructor(...args) {
@@ -65,10 +72,17 @@ class RootAccordion extends _core.Component {
     };
   }
   render() {
+    var _ref = this.asProps,
+      _ref7;
+    const SAccordion = _baseComponents.Flex;
     const {
-      Children
+      styles
     } = this.asProps;
-    return /*#__PURE__*/_react.default.createElement(Children, null);
+    return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SAccordion, _ref7.cn("SAccordion", {
+      ...(0, _core.assignProps)({
+        "__excludeProps": ['onChange']
+      }, _ref)
+    }));
   }
 }
 (0, _defineProperty2.default)(RootAccordion, "displayName", 'Accordion');
@@ -151,10 +165,15 @@ class RootItem extends _core.Component {
     };
   }
   render() {
+    var _ref2 = this.asProps,
+      _ref8;
+    const SAccordionItem = _baseComponents.Box;
     const {
-      Children
+      styles
     } = this.asProps;
-    return /*#__PURE__*/_react.default.createElement(Children, null);
+    return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SAccordionItem, _ref8.cn("SAccordionItem", {
+      ...(0, _core.assignProps)({}, _ref2)
+    }));
   }
 }
 exports.RootItem = RootItem;
@@ -179,58 +198,68 @@ class Toggle extends _core.Component {
     });
   }
   render() {
-    var _ref = this.asProps,
-      _ref5;
+    var _ref3 = this.asProps,
+      _ref9;
     const {
       styles,
       use
     } = this.asProps;
     const SItemToggle = _typography.Text;
-    return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SItemToggle, _ref5.cn("SItemToggle", {
+    return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SItemToggle, _ref9.cn("SItemToggle", {
       ...(0, _core.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' ? _l.default : _m.default;
-  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SItemChevron, _ref6.cn("SItemChevron", {
-    ...(0, _core.assignProps)({}, _ref2)
+  return _ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SItemChevron, _ref0.cn("SItemChevron", {
+    ...(0, _core.assignProps)({}, _ref4)
   }));
 }
 function ToggleButton(props) {
-  var _ref3 = arguments[0],
-    _ref7;
+  var _ref5 = arguments[0],
+    _ref1;
+  const SItemToggleButton = _baseComponents.Flex;
   const {
     styles
   } = props;
-  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, (0, _core.assignProps)({
-    "alignItems": 'center',
-    "role": 'button'
-  }, _ref3));
+  return _ref1 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SItemToggleButton, _ref1.cn("SItemToggleButton", {
+    ...(0, _core.assignProps)({
+      "alignItems": 'center',
+      "role": 'button'
+    }, _ref5)
+  }));
 }
 function Collapse(props) {
-  var _ref4 = arguments[0];
+  var _ref6 = arguments[0],
+    _ref10;
+  const SItemCollapse = _baseComponents.Collapse;
+  const SItemCollapseContainer = _baseComponents.Box;
   const {
-    selected
+    selected,
+    styles,
+    Children
   } = props;
   const visible = selected;
-  return /*#__PURE__*/_react.default.createElement(_baseComponents.Collapse, (0, _core.assignProps)({
-    "visible": visible,
-    "interactive": true,
-    "inert": !visible ? '' : undefined,
-    "aria-hidden": !visible
-  }, _ref4));
+  return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SItemCollapse, _ref10.cn("SItemCollapse", {
+    ...(0, _core.assignProps)({
+      "visible": visible,
+      "interactive": true,
+      "inert": !visible ? '' : undefined,
+      "aria-hidden": !visible
+    }, _ref6)
+  }), /*#__PURE__*/_react.default.createElement(SItemCollapseContainer, _ref10.cn("SItemCollapseContainer", {}), /*#__PURE__*/_react.default.createElement(Children, _ref10.cn("Children", {}))));
 }
 const Item = (0, _core.createComponent)(RootItem, {
   Toggle,

package/lib/cjs/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["_core","require","_baseComponents","_uniqueID","_interopRequireDefault","_useCssVariable","_l","_m","_typography","_react","style","sstyled","insert","RootAccordion","Component","constructor","args","_defineProperty2","default","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","uncontrolledProps","getItemProps","selectedValue","duration","use","selected","includes","$handleInteraction","handleToggleInteraction","render","Children","createElement","defaultValue","cssVariableEnhance","variable","fallback","map","Number","parseInt","prop","RootItem","getToggleProps","uid","disabled","onClick","undefined","handleClick","id","tag","size","tabIndex","getToggleButtonProps","getCollapseProps","getChevronProps","exports","uniqueIDEnhancement","Toggle","React","createRef","event","key","toggleRef","current","target","currentTarget","click","preventDefault","_ref","_ref5","styles","SItemToggle","Text","cn","assignProps","handleKeyDown","Chevron","props","_ref2","arguments[0]","_ref6","SItemChevron","ChevronRightL","ChevronRightM","ToggleButton","_ref3","_ref7","Flex","Collapse","_ref4","visible","CollapseAnimate","Item","createComponent","Accordion","wrapAccordion","wrapper","_default"],"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":"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","ignoreList":[]}
+{"version":3,"file":"Accordion.js","names":["_core","require","_baseComponents","_uniqueID","_interopRequireDefault","_useCssVariable","_l","_m","_typography","_react","style","sstyled","insert","RootAccordion","Component","constructor","args","_defineProperty2","default","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","uncontrolledProps","getItemProps","selectedValue","duration","use","selected","includes","$handleInteraction","handleToggleInteraction","render","_ref","_ref7","SAccordion","Flex","styles","createElement","cn","assignProps","defaultValue","cssVariableEnhance","variable","fallback","map","Number","parseInt","prop","RootItem","getToggleProps","uid","disabled","onClick","undefined","handleClick","id","tag","size","tabIndex","getToggleButtonProps","getCollapseProps","getChevronProps","_ref2","_ref8","SAccordionItem","Box","exports","uniqueIDEnhancement","Toggle","React","createRef","event","key","toggleRef","current","target","currentTarget","click","preventDefault","_ref3","_ref9","SItemToggle","Text","handleKeyDown","Chevron","props","_ref4","arguments[0]","_ref0","SItemChevron","ChevronRightL","ChevronRightM","ToggleButton","_ref5","_ref1","SItemToggleButton","Collapse","_ref6","_ref10","SItemCollapse","CollapseAnimate","SItemCollapseContainer","Children","visible","Item","createComponent","Accordion","wrapAccordion","wrapper","_default"],"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/cjs/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/es6/Accordion.js

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps6 } from "@semcore/core";
+import { assignProps as _assignProps5 } from "@semcore/core";
 import { assignProps as _assignProps4 } from "@semcore/core";
 import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
-import { Collapse as CollapseAnimate, Flex } from '@semcore/base-components';
+import { Collapse as CollapseAnimate, Flex, Box } from '@semcore/base-components';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
 import { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';
@@ -13,15 +15,22 @@ import ChevronRightM from '@semcore/icon/ChevronRight/m';
 import { Text } from '@semcore/typography';
 import React from 'react';
 /*!__reshadow-styles__:"./style/accordion.shadow.css"*/
-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}}", /*__inner_css_end__*/"1r738_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___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__*/"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 {
   constructor(...args) {
@@ -63,10 +72,17 @@ 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');
@@ -149,10 +165,15 @@ export 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", {
+      ..._assignProps2({}, _ref2)
+    }));
   }
 }
 _defineProperty(RootItem, "displayName", 'Item');
@@ -176,58 +197,68 @@ 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", {
-      ..._assignProps({
+    return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(SItemToggle, _ref9.cn("SItemToggle", {
+      ..._assignProps3({
         "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", {
-    ..._assignProps2({}, _ref2)
+  return _ref0 = sstyled(styles), /*#__PURE__*/React.createElement(SItemChevron, _ref0.cn("SItemChevron", {
+    ..._assignProps4({}, _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, _assignProps3({
-    "alignItems": 'center',
-    "role": 'button'
-  }, _ref3));
+  return _ref1 = sstyled(styles), /*#__PURE__*/React.createElement(SItemToggleButton, _ref1.cn("SItemToggleButton", {
+    ..._assignProps5({
+      "alignItems": 'center',
+      "role": 'button'
+    }, _ref5)
+  }));
 }
 function Collapse(props) {
-  var _ref4 = arguments[0];
+  var _ref6 = arguments[0],
+    _ref10;
+  const SItemCollapse = CollapseAnimate;
+  const SItemCollapseContainer = Box;
   const {
-    selected
+    selected,
+    styles,
+    Children
   } = props;
   const visible = selected;
-  return /*#__PURE__*/React.createElement(CollapseAnimate, _assignProps4({
-    "visible": visible,
-    "interactive": true,
-    "inert": !visible ? '' : undefined,
-    "aria-hidden": !visible
-  }, _ref4));
+  return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(SItemCollapse, _ref10.cn("SItemCollapse", {
+    ..._assignProps6({
+      "visible": visible,
+      "interactive": true,
+      "inert": !visible ? '' : undefined,
+      "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/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":"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","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/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

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

@@ -1 +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;CAIP;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;CAIP;AAwFD;;;;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"}
+{"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/accordion",
   "description": "Semrush Accordion Component",
-  "version": "17.2.1-prerelease.9",
+  "version": "18.0.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,13 +14,13 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/button": "^17.2.2-prerelease.9",
-    "@semcore/typography": "^17.2.1-prerelease.9",
+    "@semcore/button": "^18.0.0-prerelease.0",
+    "@semcore/typography": "^18.0.0-prerelease.0",
     "csstype": "3.1.3"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.2.2-prerelease.9",
-    "@semcore/icon": "^17.3.0-prerelease.9"
+    "@semcore/base-components": "^18.0.0-prerelease.0",
+    "@semcore/icon": "^18.0.0-prerelease.0"
   },
   "repository": {
     "type": "git",
@@ -28,10 +28,10 @@
     "directory": "semcore/accordion"
   },
   "devDependencies": {
-    "@semcore/core": "17.3.1-prerelease.9",
-    "@semcore/base-components": "17.2.2-prerelease.9",
+    "@semcore/base-components": "18.0.0-prerelease.0",
+    "@semcore/core": "18.0.0-prerelease.0",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/icon": "17.3.0-prerelease.9"
+    "@semcore/icon": "18.0.0-prerelease.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder && pnpm vite build"