Disclosure

Reveal optional content from a single persistent trigger.

Usage

Closed

Start closed and open only from the associated trigger.

Start closed and open only from the associated trigger.

Open

Start open so focus, dismissal, and overlay placement can be inspected immediately.

Start open so focus, dismissal, and overlay placement can be inspected immediately.

Browser-defined button focus stays intact while Sectile owns only the open-state transition.

Controlled

Let the parent own the current value and apply accepted changes back to the component.

Let the parent own the current value and apply accepted changes back to the component.

Browser-defined button focus stays intact while Sectile owns only the open-state transition.

API

Vue package: @sectile/vue/disclosure

Components

• DisclosureRoot
• DisclosureTrigger
• DisclosureContent

Props

DisclosureRootProps

as

TypePrimitiveAsDefault'div'

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

contentId

TypestringDefaultundefined

ID of the content controlled by this trigger.

defaultValue

TypebooleanDefaultfalse

Initial value used when the component owns its state.

disabled

TypebooleanDefaultfalse

Whether interaction is unavailable.

modelValue

TypebooleanDefaultundefined

Current value when state is controlled by the parent.

readonly

TypebooleanDefaultfalse

Whether the value can be inspected but not changed.

DisclosureTriggerProps

as

TypePrimitiveAsDefault'button'

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

DisclosureContentProps

as

TypePrimitiveAsDefault'div'

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

Slots

DisclosureSlotProps

disabled

Typeboolean

Whether interaction is unavailable.

open

Typeboolean

Whether the associated popup or disclosure is open.

readonly

Typeboolean

Whether the value can be inspected but not changed.

Events

DisclosureRoot

update:modelValue

Payloadboolean

Emitted when the component requests a new controlled value.

Other types

DisclosureValueChangeHandler

type DisclosureValueChangeHandler = (value: boolean) => void

Parts

Shared scope: [data-scope="disclosure"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
root	[data-part="root"]	Defines the component boundary and owns its composed parts.	—
trigger	[data-part="trigger"]	Opens, closes, or activates the associated content.	—
content	[data-part="content"]	Contains the component content shown for the active state.	—

Keyboard interaction

Key	Behavior
Enter / Space	Toggle the associated content.
Tab	Move between the trigger and surrounding controls.

Accessibility

The trigger exposes expanded state and its relationship to the controlled content.

See the corresponding WAI-ARIA pattern for the host accessibility contract.