feat: render accordions via details markup

[deleonio]

Summary

• render the shared collapsible helper with
  /

  markup and icon/label slots
• update kol-accordion and kol-details to use the new summary ref, focus handling, and BEM classes
• adjust styles, snapshots, and e2e tests for the new semantic structure

Testing

• pnpm --filter @public-ui/components test:unit

---

https://chatgpt.com/codex/tasks/task_e_68dd922d4280832ba03b2474afe54f0f

[github-actions]

Netlify Draft Deployment
URL: https://68e0841480a68e32188760d6--kolibri-public-ui.netlify.app
Logs: https://app.netlify.com/projects/kolibri-public-ui/deploys/68e0841480a68e32188760d6

[chatgpt-codex-connector]

💡 Codex Review

kolibri/packages/components/src/functional-components/Collapsible/collapsible.scss

Lines 21 to 33 in 239f485

	&__wrapper {
	/* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */
	transform: translateZ(0);
	display: grid;
	/**
	* The `overflow: hidden` ensures that the content is not visible during the animated
	* opening and closing. This should also cut off overlays containing content, but it
	*does not.
	*/
	overflow: hidden;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s;
	}

Preserve grid layout when using <details>

After switching the collapsible container from a div to a <details> element, the user-agent now applies details:not([open]) > :not(summary) and details[open] > :not(summary) rules that set display: none/block with higher specificity than the .collapsible__wrapper { display: grid; … } declaration. This causes the wrapper to always render as display: block, so the grid-template-rows transition never runs and the accordion/details content opens and closes abruptly with no animation. Overriding the UA rule with a more specific selector (e.g. details.collapsible > .collapsible__wrapper) or !important is required to keep the grid-based animation working.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting

• @codex fix this CI failure
• @codex address that feedback