4.2.0

What's Changed

• ✨ Restore original attributes on destroy() (#39).
  On destroy, collapsable now restores role, hidden, aria-hidden, aria-controls and aria-expanded/aria-selected to their original state instead of unconditionally removing them. A new shared AttributeSnapshot utility (remember/restore/clear) is exported from the ESM build alongside deepMerge.

• 🐞 Keep author-defined attributes intact (#39).
  destroy() no longer strips role/aria-controls/aria-expanded that were present before initialization and not added by collapsable. A hidden/aria-hidden attribute present on a box before init is now restored as well, fixing box visibility after destroy.

  Generated ids and the rewritten href (# → #id) are intentionally left in place.

Full Changelog: 4.1.4...4.2.0

4.1.4

What's Changed

• 🐞 Animation detection deferred to the next animation frame
  The expanded.collapsable / collapsed.collapsable events could be dispatched prematurely, because getAnimations() was called synchronously right after the class change, before the browser had registered the CSS transitions it triggered. Animation detection now runs inside requestAnimationFrame, so these finished events fire only once the animations have actually started (or immediately when there are none).
• 🐞 Media changes no longer affect unrelated collapsable items
  handleDefaultExpanded is now called with the relevant MediaQueryList when a media condition changes, so only items matching that media query are reset. This completes the fix introduced in 4.1.3, where the media parameter was added but never passed at the call site, leaving the filter inactive.
• 🔧 Modernized release workflow
  npm publishing now uses provenance via OIDC Trusted Publishing (GPG signing of dist files has been removed), the GitHub release draft is created with gh release create, and the CI/publish actions were bumped to v5.

Full Changelog: 4.1.3...4.1.4

4.1.3

What's Changed

• 🐞 Media changes no longer affect unrelated collapsable items (#38)
  When the media condition changes for a group of collapsable items, the handleDefaultExpanded method now only processes items whose media matches the current condition.
• 🐞 Filter expanded items by media query in getExpanded (#38)
  The getExpanded method now checks media query conditions, ensuring only items matching their media settings are considered expanded. Items without a matching media condition (collapsable is inactive) are ignored. This handles edge cases where items in the same group have mixed media conditions.
• 🐞 Improved accordion behavior (#38)
  During accordion initialization, all items except the default expanded one are closed first, and only then is the default expanded item opened. Additionally, when collapsing other items upon expanding one, the logic avoids collapsing the item that will be re-expanded immediately afterward.

Full Changelog: 4.1.2...4.1.3

4.1.2

What's Changed

• 🐞 Check for responsive collapsable in handleExpandCollapse (#37)
  The handleExpandCollapse method checks whether the collapsable element is responsive. If it is, the method proceeds only if the media query matches.
• 🐞 Better handling of dataset.collapsableState (#37)
  The dataset.collapsableState is modified only when CollapsableEvents are associated with the expanding or collapsing elements. This ensures that events from nested collapsable elements do not affect the dataset.collapsableState further up the DOM tree.
• 🐞 Better attribute clean up on destroy (#37)
  On destroy, the dataset.collapsableState is removed from boxes, and the role attribute is removed from extLink.
• 🛠️ npm audit fix

Full Changelog: 4.1.1...4.1.2

4.1.1

Full Changelog: 4.1.0...4.1.1

• 🐞 Removing forgotten console.log.

4.1.0

What's Changed

✨ Features

• ✨Attribute data-collapsable-state is being set (#35).
  While a CollapsableItem is expanding or collapsing, the data-collapsable-state attribute is set to expanding or collapsing. This attribute is removed immediately after the transition completes.

  This can be useful in CSS, for example, to apply @starting-style only to the item currently expanding or collapsing. This makes it easier to use display: none for hiding collapsed items while still allowing transitions for expansion. Additionally, when applied via the data attribute, @starting-style won’t affect nested collapsable elements that are already expanded, preventing unwanted transitions.

• ✨Automatically detect delay for [expanded|collapsed].collapsable events (#36)
  Previously, the delay for the [expanded|collapsed].collapsable events was defined by the fxDuration option. From this version, the delay is automatically detected using the Web Animations API from the box elements. Optionally, you can also detect animations within the subtree of box elements using the eventDelayGetAnimationsWithSubtree option.

  The fxDuration option has been renamed to eventDelayTimeout. Since the box may contain elements with infinite animations (or the box itself may have such animations), a hard timeout may be required to ensure that the [expanded|collapsed].collapsable events are dispatched eventually. This timeout can now be set using the renamed eventDelayTimeout option. Default value is undefined, meaning that no timeout is set.

• 🐞 Type of fxDuration (now eventDelayTimeout) has been fixed.
  Previously incorrectly typed as fxDuration: 0, now typed as eventDelayTimeout: number | undefined.

⚠️ BC Break

• The option fxDuration has been renamed to eventDelayTimeout and has a slightly different meaning. Just renaming the option would work, but the [expanded|collapsed].collapsable events may be dispatched earlier if there are no animations on the box elements. Also the option may be not needed at all anymore.

Full Changelog: 4.0.0...4.1.0

4.0.0

What's Changed

• ✨ CollapsableItem can be initialized based on media queries (#34)
  If the collapsable element has a data-collapsable-media-query attribute, its value is used as a condition for initialization. Also, if the media is changed, the CollapsableItem is initialized or destroyed accordingly. This allows it to exist only at specific breakpoints, while at others, the DOM is reverted and remains unmodified. This is particularly useful for components like mobile menus and helps resolve accessibility issues where an item had a hidden attribute but was later made visible via CSS.

Full Changelog: 3.8.1...4.0.0

3.8.1

What's Changed

• 🐞 Expand/Collapse events triggered only on state change (#33)

Full Changelog: 3.8.0...3.8.1

3.8.0

What's Changed

• ✨ Allow external links to be a button element (#32). External links for collapsable can now be a HTMLButtonElement with data-collapsable-id attribute. There is also an option to prevent the default action of an external link using either the option (this affects all external links for a particular Collapsable) or the data-collapsable-prevent-default attribute (this affects only a specific external link).
• 🛠 Dev dependencies updated.

Full Changelog: 3.7.2...3.8.0

3.7.2

What's Changed

• 🛠 Fixed data attibute name for responsive default expanded items (#31).

Full Changelog: 3.7.1...3.7.2