J3W1 / DESIGN SYSTEM

Disclosure

Native details and summary for supporting content.

stable · LIGHT DOM · 1.1.0

Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.

Standalone example ↗Copy file manifest Canonical JSON Vue gallery ↗Prepare an agent kit →

Live variants

default

Additional connection settings

This local example stores no credentials. Choose connection settings in the host application.

<j3w1-disclosure id="example-disclosure-default"><details class="disclosure"><summary data-demo-focus-target="">Additional connection settings</summary><p>This local example stores no credentials. Choose connection settings in the host application.</p></details></j3w1-disclosure>

Install and register

Use the exact version. If npm publication is pending, install the release tarball from the installation guide.

npm install --save-exact @j3w1/ui@1.1.0

import '@j3w1/ui/tokens.css';
import '@j3w1/ui/styles/disclosure.css';
import '@j3w1/ui/register/disclosure';

Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.

Vue SFC, React, Astro and plain HTML integration →

Copy the complete implementation

npx --package=@j3w1/ui@1.1.0 j3w1-ui copy disclosure --out ./vendor/j3w1/disclosure

The CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open index.html. Keep its modules, CSS, tokens and licence notices together.

Public API

attributes

Name	Type / signature	Meaning
`disabled`	`CustomEvent`	Disable the native controls owned by this instance.
`loading`	`CustomEvent`	Mark the primary control busy and prevent duplicate activation.

properties

Name	Type / signature	Meaning
`disabled`	`boolean`	Delegates disabled state to native children.
`name`	`string`	Native control name; application form keys remain explicit.
`open`	`boolean`	Native details expansion when this component contains details.

methods

Name	Type / signature	Meaning
`refresh`	`(): void`	Reconnect behavior after replacing native child structure.
`focus`	`(options?: FocusOptions): void`	Focus the first usable native control.

events

Name	Type / signature	Meaning
`j3w1-toggle`	`CustomEvent`	A native disclosure or navigation group changed.

Dependencies and verification

Registered components: none. Style dependencies: none.

Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. Read specification execution evidence; read packed-consumer evidence; inspect the complete state matrix.

Full implementation manifest, API and token dependency closure

Canonical specification

Purpose

Reveal supporting content with native details and summary. Essential instructions stay outside a collapsed disclosure. The summary supplies a complete accessible name; content remains in normal reading order.

Anatomy

details: Native expanded state and content container.
summary: Visible name and native disclosure marker.

States

State	Presentation	Non-colour channel
default	Named content on the default surface.	Native text and structure.
expanded	Expanded content and native marker.	Native open state exposes the content.
collapsed	Only the summary remains visible.	Native closed content leaves the focus order.
focus-visible	Dashed focus ring.	Native keyboard focus position.

Keyboard

Tab / Shift+Tab: Reach the summary and expanded interactive content.
Enter / Space: Toggle native details.

Accessibility

Keep the native marker and summary semantics. Do not add a competing aria-expanded value. Required instructions and the portal’s normative content are never placed only inside a disclosure.

Portability

Wrap labels and actions without changing source order. Use logical spacing in RTL. Preserve native target sizes at both densities; only bounded data regions may scroll horizontally. Use equivalent native semantics and approved roles; record any unsupported behavior as a mapping deviation. The host owns application data, persistence, permissions and services.

Non-examples

Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.