Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · disclosure

Native disclosure

Opt-in styles for native details disclosures and name-grouped exclusive accordions.

Install with npx @madojs/ui@latest add disclosure.

Primitive

Native disclosure

Independent details

The browser owns expanded state, activation and keyboard behavior.

Can I edit an installed component?

Yes. Mado UI copies reviewed source into the application, so the application owns every local change.

Continue after the examples

Exclusive native accordion

A shared, non-empty name keeps at most one answer open. Omit it when readers should compare several answers.

What does the CLI install?

It installs the theme and this readable CSS recipe. No UI runtime is added to the browser.

Continue after the examples
Who owns expanded state?

The native open attribute reflects the current state. Application code only observes it when product state genuinely needs persistence or analytics.

Continue after the examples
Can several answers stay open?

Yes. Remove the shared name attributes and each disclosure remains independently open or closed.

Continue after the examples

Keep summaries short, visible and free of nested interactive controls.

Return to the disclosure overview

Composition

  • Apply the recipe to details/summary. Use a shared non-empty name only for disclosures that intentionally form one exclusive group.

Public API

element details / summary
Native disclosure state, activation and exposed expanded semantics.
class mado-ui-disclosure
Standalone disclosure surface.
class mado-ui-disclosure-summary / content / group
Summary, content and optional presentational group hooks.
attribute name
Native exclusive-group relationship when shared by sibling details elements.

Detected public classes

  • .mado-ui-disclosure
  • .mado-ui-disclosure-content
  • .mado-ui-disclosure-group
  • .mado-ui-disclosure-summary

Detected public CSS properties

  • --mado-ui-color-action
  • --mado-ui-color-border
  • --mado-ui-color-surface
  • --mado-ui-color-surface-soft
  • --mado-ui-color-text
  • --mado-ui-disclosure-background
  • --mado-ui-disclosure-border
  • --mado-ui-disclosure-color
  • --mado-ui-disclosure-content-gap
  • --mado-ui-disclosure-content-padding
  • --mado-ui-disclosure-focus
  • --mado-ui-disclosure-group-gap
  • --mado-ui-disclosure-indicator-color
  • --mado-ui-disclosure-indicator-size
  • --mado-ui-disclosure-radius
  • --mado-ui-disclosure-shadow
  • --mado-ui-disclosure-summary-background
  • --mado-ui-disclosure-summary-color
  • --mado-ui-disclosure-summary-font-weight
  • --mado-ui-disclosure-summary-hover-background
  • --mado-ui-disclosure-summary-min-block-size
  • --mado-ui-disclosure-summary-padding
  • --mado-ui-radius-md
  • --mado-ui-space-2
  • --mado-ui-space-3
  • --mado-ui-space-4

Accessibility contract

  • Summary must state what the disclosure reveals; the content remains in source order.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.