# Hyvä UI Plugin - Collapse

[![License]](../../../LICENSE.md)
[![Hyva Supported Versions]](https://docs.hyva.io/hyva-ui-library/getting-started.html)
[![Figma]](https://www.figma.com/@hyva)

Port of the AlpineJS Plugin Collapse, please refer to the [AlpineJS Collapse] docs for more information.

## Usage - Template

1. Copy or merge the following files/folders into your theme:
   * `Magento_Theme/templates/page/js`
   * `Magento_Theme/layout/default.xml`
2. Adjust the content and code to fit your own needs and save
3. Create your development or production bundle by running `npm run watch` or `npm run build-prod` in your theme's tailwind directory

## Notes

As of Hyvä 1.4, this transition is handled by CSS. To continue using this Alpine plugin, add the following CSS to ensure it functions correctly.

```css
[x-collapse] {
    interpolate-size: numeric-only;
}
```

## License

Original code is licensed, under a [MIT license](https://github.com/alpinejs/alpine/blob/main/LICENSE.md)
to [AlpineJS](https://alpinejs.dev/).

---

Hyvä Themes - https://hyva.io

Copyright © Hyvä Themes B.V 2020-present. All rights reserved.

This product is licensed per Magento install. Please see the LICENSE.md file in the root of this repository for more
information.

[License]: https://img.shields.io/badge/License-004d32?style=for-the-badge "Link to Hyvä License"
[Figma]: https://img.shields.io/badge/Figma-gray?style=for-the-badge&logo=Figma "Link to Figma"
[AlpineJS Collapse]: https://alpinejs.dev/plugins/collapse

[Hyva Supported Versions]: https://img.shields.io/badge/Hyv%C3%A4-1.3,_1.4-0A23B9?style=for-the-badge&labelColor=0A144B "Hyvä Supported Versions"