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

3.7.1

What's Changed

• ✨ Support for responsive default expanded items (#30). As well as using a class attribute, elements can be expanded by default using data-collapsable-default-expanded-media. This data attribute should contain a media query string (e.g. (min-width: 992px)), which is then evaluated using window.matchMedia. If it matches, the item will also be expanded by default, regardless of class. It is therefore intended to be used without the default expanded class name.

Full Changelog: 3.6.0...3.7.1

3.6.0

What's Changed

• ✨ The control element for CollapsableItem is now optional (#27). If there is no control element, you can either expand / collapse the item programmatically from JS, or you can use an external link.
• ✨ External link aria attributes added (#28). Collapsable now sets the role attribute (if not already present) on the external link. It also sets the appropriate aria attributes - aria-controls and either aria-selected (if role="tab" is used) or aria-expanded (if role="button" or no role is used).
• ⚙ Fixed links inside package.json (#26).
• ⚙ Build packages updated (#29).

Full Changelog: 3.5.2...3.6.0