Brand Details
<brand-details> wraps Shoelace's <sl-details>. Great for FAQs, advanced settings, and any collapsible section.
Basic
Snyder Brand OS is the single source of truth for tokens, guidelines, and UI components across every Snyder app and portal. It publishes its own component library and documents the allowed tokens that AI assistants can emit.
Add "@brandos/ui": "workspace:*" to your package.json, then import component modules (@brandos/ui/components/brand-button) to register the custom elements. Use the <brand-*> tags in your markup.
Yes. All components are native custom elements with a shadow DOM. See the README for per-framework integration notes — React 19 handles them natively, earlier versions need minor JSX type declarations, and Angular needs CUSTOM_ELEMENTS_SCHEMA.
Open by default
Set the open attribute to render with the panel already expanded.
Disabled
Disabled panels don't respond to clicks or keyboard activation.
Usage
import { BrandDetails } from '@brandos/ui';
<brand-details summary="Advanced settings">
<p>Body content here.</p>
</brand-details>
<brand-details summary="Open on load" open>
<p>Defaults visible.</p>
</brand-details>