[style*="opacity:0"] { opacity: 1 !important; } [style*="opacity: 0"] { opacity: 1 !important; } [style*="transform:translate"] { transform: none !important; } [style*="transform: translate"] { transform: none !important; } [style*="transform:scale"] { transform: none !important; } [style*="transform: scale"] { transform: none !important; } [hidden][data-state][data-orientation][role="region"] { display: block !important; } [data-state][data-orientation][role="region"] { height: auto !important; overflow: visible !important; animation: none !important; } .js-only { display: none !important; }

Docs

FAQ / Disclosure standard

Use native `<details>/<summary>` for FAQ and expandable public content by default.

Standard

- Preferred for FAQ, informational disclosures, and "learn more" content.

- Must work without JavaScript or hydration.

- Style directly in the page/pattern component; do not require a JS accordion wrapper.

- Use a custom accordion only with a documented exception.

Validation

- JS on: expand/collapse behavior and spacing/chevron styling are correct.

- JS off: content is still readable and interactive.

- Live reference: FAQ / Disclosure example page