Components

st-disclosure

A disclosure component for revealing hidden content. Useful for inline editing, expandable sections, and progressive disclosure patterns.

Basic Usage

Wrap a trigger and content element. The trigger reveals the content when clicked:

<st-disclosure>
  <button data-disclosure-trigger>Edit profile</button>
  <div data-disclosure-content hidden>
    <input type="text" placeholder="Your name">
    <button data-disclosure-close>Cancel</button>
    <button type="submit">Save</button>
  </div>
</st-disclosure>

Inline Edit Pattern

A common use case is inline editing where clicking text reveals an input field:

<st-disclosure>
  <span data-disclosure-trigger class="cursor-pointer hover:underline">
    John Doe
  </span>
  <div data-disclosure-content hidden class="flex gap-2">
    <input type="text" value="John Doe" autofocus>
    <button data-disclosure-close>Cancel</button>
    <button type="submit">Save</button>
  </div>
</st-disclosure>

The autofocus attribute ensures the input receives focus when revealed.

How It Works

Clicking [data-disclosure-trigger] hides the trigger and reveals the content
Clicking [data-disclosure-close] inside content hides content and shows trigger
Pressing Escape while content is open closes it
First focusable element (or element with autofocus) receives focus when opened
Trigger receives focus when closed

Data Attributes

Attribute	Description
data-disclosure-trigger	The element that opens the disclosure when clicked
data-disclosure-content	The hidden content that gets revealed
data-disclosure-close	Any element inside content that closes the disclosure when clicked
data-open-by-default	Add to `<st-disclosure>` to start in the open state

Properties & Methods

const disclosure = document.querySelector('st-disclosure')

// Check if open
disclosure.isOpen // boolean

// Open programmatically
disclosure.open()

// Close programmatically
disclosure.close()

// Toggle state
disclosure.toggle()

Events

Event	Fired When
st-disclosure:open	Content is revealed
st-disclosure:close	Content is hidden

disclosure.addEventListener('st-disclosure:open', () => {
  console.log('Disclosure opened')
})

disclosure.addEventListener('st-disclosure:close', () => {
  console.log('Disclosure closed')
})

Accessibility

Sets aria-expanded on trigger to reflect state
Sets aria-controls on trigger linking to content
Manages focus: content receives focus on open, trigger on close
Supports Escape key to close
Uses hidden attribute for proper screen reader behaviour

Styling

Style the trigger and content as needed. The component manages visibility via the hidden attribute:

<st-disclosure class="inline-block">
  <button data-disclosure-trigger
          class="text-blue-600 hover:underline">
    Edit
  </button>
  <div data-disclosure-content hidden
       class="mt-2 p-4 border rounded-lg">
    <!-- Edit form -->
  </div>
</st-disclosure>

st-tooltip st-passkey-register