Disclosure

A collapsible section with a heading, trigger, and animated content panel. Use standalone for a single expandable region, or nest inside Disclosure Group for coordinated expansion.

Import

import { AvDisclosureImports } from '@avesra/angular';

Usage

Scan this QR code to open the Avesra docs on your phone.

Works with any camera app.

import { Component } from '@angular/core';
import {
  AvButtonComponent,
  AvDisclosureImports,
} from '@avesra/angular';
import { AppIconComponent } from '../../components/app-icon/app-icon.component';

@Component({
  selector: 'app-disclosure-basic-demo',
  imports: [
    AvButtonComponent,
    AvDisclosureImports,
    AppIconComponent,
  ],
  host: { class: 'w-full max-w-md text-center' },
  template: `<av-disclosure [(expanded)]="expanded">
      <h3 av-disclosure-heading class="block">
        <button av-button type="button" av-disclosure-trigger variant="secondary">
          <app-icon icon="solar:qr-code-linear" size="16" />
          Preview on your phone
          <svg av-disclosure-indicator></svg>
        </button>
      </h3>
      <div av-disclosure-content>
        <div av-disclosure-body>
          <div
            class="shadow-panel flex flex-col items-center rounded-3xl bg-surface p-4 text-center"
          >
            <p class="text-sm text-muted">
              Scan this QR code to open the Avesra docs on your phone.
            </p>
            <img
              alt="QR code for the Avesra documentation"
              class="aspect-square w-full max-w-54 rounded-2xl bg-white object-contain"
              src="/images/brand/avesra-qr.png"
            />
            <p class="text-sm text-muted">Works with any camera app.</p>
            <button av-button class="mt-4" variant="primary" type="button">
              <app-icon icon="solar:document-linear" size="16" />
              Open documentation
            </button>
          </div>
        </div>
      </div>
    </av-disclosure>`,
})
export class DisclosureBasicDemo {
  expanded = true;
}

Anatomy

Import the Disclosure parts and compose them with attribute selectors.

<av-disclosure>
  <h3 av-disclosure-heading>
    <button av-disclosure-trigger>
      <svg av-disclosure-indicator></svg>
    </button>
  </h3>
  <div av-disclosure-content></div>
</av-disclosure>

Styling

Pass utility classes on host elements, or override BEM classes in @layer components.

Passing Tailwind CSS classes

Style the trigger button and pass classes on av-disclosure-body (applied to the inner body wrapper).

import { Component } from '@angular/core';
import {
  AvButtonComponent,
  AvDisclosureImports,
} from '@avesra/angular';
import { AppIconComponent } from '../../components/app-icon/app-icon.component';

@Component({
  selector: 'app-disclosure-custom-styles-demo',
  imports: [
    AvButtonComponent,
    AvDisclosureImports,
    AppIconComponent,
  ],
  host: { class: 'w-full max-w-sm' },
  template: `<av-disclosure [(expanded)]="expanded">
      <h3 av-disclosure-heading class="block">
        <button
          av-button
          type="button"
          av-disclosure-trigger
          variant="ghost"
          class="w-full justify-between rounded-xl border border-border/70 bg-linear-to-b from-neutral-50/90 to-white px-4 py-3 font-medium text-foreground shadow-sm ring-1 ring-black/5 hover:bg-muted/30 dark:from-neutral-900/80 dark:to-neutral-900 dark:ring-white/10"
        >
          <span class="flex items-center gap-2">
            <app-icon icon="solar:box-linear" size="16" class="text-muted" />
            Shipping details
          </span>
          <svg av-disclosure-indicator class="text-muted"></svg>
        </button>
      </h3>
      <div av-disclosure-content>
        <div
          av-disclosure-body
          class="mt-2 rounded-xl border border-border/70 bg-surface/50 p-4 text-sm leading-relaxed text-muted dark:bg-neutral-900/50"
        >
          Orders ship within 2 business days. Standard delivery takes 3–5 days; express is available
          at checkout.
        </div>
      </div>
    </av-disclosure>`,
})
export class DisclosureCustomStylesDemo {
  expanded = false;
}

CSS Classes

.av-disclosure — Root container
.av-disclosure__heading — Heading wrapper
.av-disclosure__trigger — Trigger control (when not composed with av-button)
.av-disclosure__indicator — Chevron indicator
.av-disclosure__content — Animated content wrapper
.av-disclosure__body — Inner content padding

Interactive States

Expanded:[data-expanded="true"] on content and indicator
Focus::focus-visible on trigger
Disabled:[aria-disabled="true"] on trigger
Hidden:aria-hidden="true" on collapsed content

Accessibility

Triggers expose aria-expanded and aria-controls. Collapsed content is marked aria-hidden and uses role="region" when visible. Provide a visible heading inside av-disclosure-heading for context.

API

Compound API across disclosure root, heading, trigger directive, content, indicator, and body parts. Set id when using inside a disclosure group.

Prop	Type	Default	Description
`id`	`string`	—	Unique disclosure id. Required inside a disclosure group (av-disclosure).
`disabled`	`boolean`	`false`	Disables the disclosure (av-disclosure).
`default-expanded`	`boolean`	`false`	Initially expanded state for standalone usage (av-disclosure).
`expanded`	`boolean`	`false`	Expanded state. Supports two-way binding with [(expanded)] (av-disclosure).