docs(aria): add exsamples to docs

Author: AdrianRomanski

src/aria/disclosure/disclosure-content.ts

@@ -21,10 +21,16 @@ import type {DisclosureTrigger} from './disclosure-trigger';
  * is first expanded.
  *
  * ```html
- * <div ngDisclosureContent [trigger]="myTrigger">
- *   <ng-template ngDeferredContent>
- *     <p>This content is lazily rendered when expanded.</p>
- *   </ng-template>
+ * <!-- Straw Hat Pirates crew FAQ with deferred content -->
+ * <div class="crew-faq">
+ *   <button ngDisclosureTrigger #faq="ngDisclosureTrigger" [controls]="'bounty-info'">
+ *     🏴‍☠️ What is Luffy's current bounty?
+ *   </button>
+ *   <div id="bounty-info" ngDisclosureContent [trigger]="faq">
+ *     <ng-template ngDeferredContent>
+ *       <p>3,000,000,000 Berries - One of the Four Emperors of the Sea!</p>
+ *     </ng-template>
+ *   </div>
  * </div>
  * ```
  *

src/aria/disclosure/disclosure-trigger.ts

@@ -27,14 +27,17 @@ import {DISCLOSURE_TRIGGER} from './disclosure-tokens';
  * interactions (Enter, Space) and manages ARIA attributes for accessibility.
  *
  * ```html
- * <button ngDisclosureTrigger [(expanded)]="isExpanded" [controls]="'content-id'">
- *   Show Details
- * </button>
- * <div id="content-id" ngDisclosureContent [trigger]="trigger">
- *   <ng-template ngDeferredContent>
- *     <p>This content is shown when expanded.</p>
- *   </ng-template>
- * </div>
+ * <!-- Devil Fruit encyclopedia with two-way binding -->
+ * <article class="devil-fruit-card">
+ *   <h3>🍈 Gomu Gomu no Mi</h3>
+ *   <p>A Paramecia-type Devil Fruit (until kaido) that grants the user's body rubber properties...</p>
+ *   <button ngDisclosureTrigger #details="ngDisclosureTrigger" [(expanded)]="showPowers">
+ *     {{ showPowers() ? 'Hide Powers' : 'Reveal Powers' }}
+ *   </button>
+ *   <div ngDisclosureContent [trigger]="details">
+ *     <p>Gear 2nd, Gear 3rd, Gear 4th, Gear 5th - Nika Awakening!</p>
+ *   </div>
+ * </article>
  * ```
  *
  * @developerPreview 21.0