@semcore/accordion 17.2.1 → 18.0.0-prerelease.0

package/CHANGELOG.md

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

package/lib/cjs/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/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/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,