rc-disclosure

Disclosure wrapper for a native <details>/<summary> pair with controlled open state, following the WAI-ARIA Disclosure pattern.

Package

@rcarls/rc-disclosure

Element

<rc-disclosure>

Native dependency

Requires a native details child

State model

Controlled or uncontrolled open state

Main events

rc-disclosure-toggle

Related

Usage rulesTheme previews

Installation

npm

npm install @rcarls/rc-webcomponents@next

Yarn

yarn add @rcarls/rc-webcomponents@next

pnpm

pnpm add @rcarls/rc-webcomponents@next

import '@rcarls/rc-webcomponents/rc-disclosure/define';

Usage

Wrap a native <details> with a <summary> as its first child.

<rc-disclosure>
  <details id="shipping">
    <summary>Shipping details</summary>
    <p>Orders ship within two business days.</p>
  </details>
</rc-disclosure>

Live demo

Accessibility

The browser keeps ownership of the disclosure: the <summary> is the button, Enter and Space toggle it, and its expanded state is exposed natively. The element adds aria-controls from the summary to the <details>, mirrors the open state, and opens when the URL hash matches an id inside it. See the WAI-ARIA Disclosure pattern.

Open state

Use default-open when the disclosure should manage its own state after initialization. Use the open property or attribute when the host owns the state; user interaction then emits rc-disclosure-toggle with the requested state, and the rendered disclosure continues to follow the controlled value. Assign undefined to the JavaScript open property to release control and return to the current uncontrolled/default state.

The required direct child <details> remains connected and owns the native disclosure interaction, keyboard behavior, and accessibility semantics.

Theming

The default demo mode shows the component without a package theme. Use the shared preview controls on this page to compare inherited, light, and dark color schemes or to apply the optional Material theme only inside the demo frames.

API

Properties

Property	Markup	Type	Default	Description
open	JS property only	boolean	Not specified	Current open state. Host writes are silent; assign `undefined` to release control.
defaultOpen	JS property only	boolean	Not specified	Initial open state for uncontrolled usage.

Events

Event	Detail type	Description
rc-disclosure-toggle	CustomEvent	Fires when the child `<details>` toggles.

CSS Custom Properties

Property	Default	Description
--rc-disclosure-border	0	Panel border.
--rc-disclosure-radius	0	Panel corner radius.
--rc-disclosure-background	transparent	Panel background while closed.
--rc-disclosure-color	inherit	Panel foreground.
--rc-disclosure-open-background	Not specified	Panel background while open. Defers to `--rc-disclosure-background` when unset.
--rc-disclosure-open-shadow	none	Panel shadow while open.
--rc-disclosure-summary-min-block-size	0	Summary minimum block size. Set this to at least `3rem` for a comfortable touch target.
--rc-disclosure-summary-padding-block	0	Summary block padding.
--rc-disclosure-summary-padding-inline	0	Summary inline padding.
--rc-disclosure-summary-gap	0	Summary gap, for a theme that lays the summary out as a grid or flex container.
--rc-disclosure-summary-color	inherit	Summary foreground.
--rc-disclosure-summary-font	inherit	Summary font shorthand.
--rc-disclosure-summary-marker-color	currentColor	Native disclosure marker color. A theme that replaces the marker with its own affordance should hide `::marker` itself.
--rc-disclosure-summary-hover-background	transparent	Summary hover background.
--rc-disclosure-focus-ring	var(--rc-focus-ring, 2px solid Highlight)	Summary focus-visible outline.
--rc-disclosure-focus-ring-offset	0	Summary focus-visible outline offset.
--rc-disclosure-content-padding-block	0	Content block padding.
--rc-disclosure-content-padding-inline	0	Content inline padding.
--rc-disclosure-content-color	inherit	Content foreground.
--rc-disclosure-content-font	inherit	Content font shorthand.
--rc-disclosure-duration	0ms	Open and close transition duration. Zero by default, so the panel snaps the way the platform does until a theme opts into motion. The animation runs on `::details-content` where that is supported and is skipped entirely where it is not.
--rc-disclosure-easing	ease	Open and close transition easing.