Skip to content

feat: easily allow setting accordion and collapsible heights to arbitrary values#38

Draft
Wombosvideo wants to merge 3 commits into
mainfrom
add-height-variable-helpers
Draft

feat: easily allow setting accordion and collapsible heights to arbitrary values#38
Wombosvideo wants to merge 3 commits into
mainfrom
add-height-variable-helpers

Conversation

@Wombosvideo
Copy link
Copy Markdown
Owner

Description

Adds accordion-h-* and collapsible-h-* utilities to apply the content height CSS variable.

Allows either number values (in spacing units) or [*] any other value. This makes it possible to set the accordion height using

accordion-h-(--abc-accordion-content-height)

Fixes #36.

@Wombosvideo Wombosvideo added the enhancement New feature or request label May 29, 2025
@Wombosvideo
Copy link
Copy Markdown
Owner Author

Wombosvideo commented May 30, 2025

@Abdelrahmanaman
Instead of animate-collapsible-down-*, this PR adds the accordion-h-* and collapsible-h-* utilities. I've decided it would be better to have

  • accordion-h-* to define the accordion content height
  • collapsible-h-* to define the collapsible content height

instead of

  • animate-accordion-down-*
  • animate-accordion-up-*
  • animate-collapsible-down-*
  • animate-collapsible-up-*

because the content height is usually the same for both animations. I've also decided to add the -h- infix to leave open the possibility of adding horizontal animations in the future.

So, what this means for the example you gave in #36:

- animate-collapsible-down-[--kb-accordion-content-height]
+ accordion-h-(--kb-accordion-content-height)

(But you won't need this, because #37 adds first-level support for Kobalte variables. Future releases might deprecate these variables though)

I hope this implementation works for you and again, thanks for the suggestion!

@Wombosvideo Wombosvideo added this to the v2.0.0 milestone Aug 15, 2025
@Wombosvideo
Copy link
Copy Markdown
Owner Author

@copilot Fix the merge conflicts

Copy link
Copy Markdown
Contributor

Copilot AI commented Feb 28, 2026

@Wombosvideo I've opened a new pull request, #74, to work on those changes. Once the pull request is ready, I'll request review from you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: allow using custom CSS variables for defining element height in accordion and collapsible animations

2 participants