feat: accordion header tag (#4999)

[michaelokolo]

Description

This pull request introduces a new feature that allows changing the heading tag of an Accordion Item Header.

Related issue: #4999

Changes

1. Updated metaAccordionHeader in accordion.ws.ts to include h1–h6 options, enabling users to select the heading level in the Item Header settings.
2. Updated AccordionHeader in accordion.tsx to accept and render h1–h6 tags dynamically.
3. Moved the margin-top and margin-bottom styles from metaAccordionHeader to AccordionHeader to ensure consistent spacing across all heading levels.

How to Test

1. Open any project.
2. Add an Accordion to the canvas.
3. Click an Accordion Item Header. In the right-hand settings panel, you should see a new Tag dropdown with options h1–h6.
4. Select different tags and verify the rendered heading levels in the browser’s developer tools.

[TrySound]

Call variable in pascal case "Heading" and you can use it in jsx without createElement which is considered legacy.

[michaelokolo]

Alright, I will resolve this. Thank you.

[michaelokolo]

Hello @TrySound , I’ve made the necessary updates based on your earlier comments.

[TrySound]

Builder does not support "style" property. So please remove it. Otherwise it will override user preferences from tokens.

[michaelokolo]

Alright, I will resolve this too. There is a margin-top: 0 and margin-bottom: 0 applied to the H3 Item Header in accordion.ws.ts, which is why I applied the style here. I wanted to ask, do we still need these styles?

[TrySound]

Yes, I think they still needed. At least to not break existing projects.

[michaelokolo]

And just to confirm, do we need this margin-top: 0 and margin-bottom: 0 for all heading levels or just for H3? I am planning to apply it to all heading levels in accordion.ws.ts.