wally-ui 1.12.1 → 1.13.0

package/playground/showcase/src/app/pages/documentation/components/dropdown-menu-docs/dropdown-menu-docs.html

@@ -0,0 +1,612 @@
+<main class="min-h-dvh bg-white dark:bg-[#0a0a0a] font-mono" role="main">
+  <div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 md:px-8">
+
+    <!-- Breadcrumb Navigation -->
+    <nav class="mb-8" aria-label="Breadcrumb navigation">
+      <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
+    </nav>
+
+    <!-- Header -->
+    <header class="mb-12" role="banner">
+      <h1 id="page-title" class="text-3xl sm:text-4xl font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+        <span aria-hidden="true">&gt;_ </span>Dropdown Menu
+      </h1>
+      <p
+        class="text-sm sm:text-base text-neutral-700 dark:text-neutral-300 border-l-2 border-neutral-300 dark:border-neutral-700 pl-4 leading-relaxed">
+        A composable dropdown menu component inspired by Radix UI and shadcn/ui. Features click and hover modes,
+        nested submenus, keyboard navigation, viewport-aware positioning, and full accessibility support.
+      </p>
+    </header>
+
+    <!-- AI Assistant Links -->
+    <div class="flex flex-wrap gap-0 mt-6 mb-12 border-2 border-neutral-300 dark:border-neutral-700" role="list"
+      aria-label="Open documentation in AI coding assistants">
+      <a [href]="claudeUrl" target="_blank"
+        class="group flex-1 min-w-[200px] flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-[#0a0a0a] border-b-2 sm:border-b-0 sm:border-r-2 border-neutral-300 dark:border-neutral-700 hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
+        rel="noopener noreferrer" role="listitem"
+        aria-label="Open Dropdown Menu component documentation in Claude AI assistant (opens in new tab)">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150"
+          viewBox="0 0 24 24" aria-hidden="true">
+          <path fill="currentColor"
+            d="m4.714 15.956l4.718-2.648l.079-.23l-.08-.128h-.23l-.79-.048l-2.695-.073l-2.337-.097l-2.265-.122l-.57-.121l-.535-.704l.055-.353l.48-.321l.685.06l1.518.104l2.277.157l1.651.098l2.447.255h.389l.054-.158l-.133-.097l-.103-.098l-2.356-1.596l-2.55-1.688l-1.336-.972l-.722-.491L2 6.223l-.158-1.008l.656-.722l.88.06l.224.061l.893.686l1.906 1.476l2.49 1.833l.364.304l.146-.104l.018-.072l-.164-.274l-1.354-2.446l-1.445-2.49l-.644-1.032l-.17-.619a3 3 0 0 1-.103-.729L6.287.133L6.7 0l.995.134l.42.364l.619 1.415L9.735 4.14l1.555 3.03l.455.898l.243.832l.09.255h.159V9.01l.127-1.706l.237-2.095l.23-2.695l.08-.76l.376-.91l.747-.492l.583.28l.48.685l-.067.444l-.286 1.851l-.558 2.903l-.365 1.942h.213l.243-.242l.983-1.306l1.652-2.064l.728-.82l.85-.904l.547-.431h1.032l.759 1.129l-.34 1.166l-1.063 1.347l-.88 1.142l-1.263 1.7l-.79 1.36l.074.11l.188-.02l2.853-.606l1.542-.28l1.84-.315l.832.388l.09.395l-.327.807l-1.967.486l-2.307.462l-3.436.813l-.043.03l.049.061l1.548.146l.662.036h1.62l3.018.225l.79.522l.473.638l-.08.485l-1.213.62l-1.64-.389l-3.825-.91l-1.31-.329h-.183v.11l1.093 1.068l2.003 1.81l2.508 2.33l.127.578l-.321.455l-.34-.049l-2.204-1.657l-.85-.747l-1.925-1.62h-.127v.17l.443.649l2.343 3.521l.122 1.08l-.17.353l-.607.213l-.668-.122l-1.372-1.924l-1.415-2.168l-1.141-1.943l-.14.08l-.674 7.254l-.316.37l-.728.28l-.607-.461l-.322-.747l.322-1.476l.388-1.924l.316-1.53l.285-1.9l.17-.632l-.012-.042l-.14.018l-1.432 1.967l-2.18 2.945l-1.724 1.845l-.413.164l-.716-.37l.066-.662l.401-.589l2.386-3.036l1.439-1.882l.929-1.086l-.006-.158h-.055L4.138 18.56l-1.13.146l-.485-.456l.06-.746l.231-.243l1.907-1.312Z" />
+        </svg>
+        <span
+          class="text-xs sm:text-sm font-medium text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150">
+          Open in Claude
+        </span>
+      </a>
+
+      <a [href]="chatGptUrl" target="_blank"
+        class="group flex-1 min-w-[200px] flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
+        rel="noopener noreferrer" role="listitem"
+        aria-label="Open Dropdown Menu component documentation in ChatGPT AI assistant (opens in new tab)">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150"
+          viewBox="0 0 48 48" aria-hidden="true">
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="M18.38 27.94v-14.4l11.19-6.46c6.2-3.58 17.3 5.25 12.64 13.33" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m18.38 20.94l12.47-7.2l11.19 6.46c6.2 3.58 4.1 17.61-5.23 17.61" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m24.44 17.44l12.47 7.2v12.93c0 7.16-13.2 12.36-17.86 4.28" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="M30.5 21.2v14.14L19.31 41.8c-6.2 3.58-17.3-5.25-12.64-13.33" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m30.5 27.94l-12.47 7.2l-11.19-6.46c-6.21-3.59-4.11-17.61 5.22-17.61" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
+        </svg>
+        <span
+          class="text-xs sm:text-sm font-medium text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150">
+          Open in ChatGPT
+        </span>
+      </a>
+    </div>
+
+    <!-- Installation -->
+    <section id="installation" class="mb-12" aria-labelledby="installation-heading">
+      <h2 id="installation-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Installation ]
+      </h2>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
+        <pre><code [innerHTML]="installationCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+    </section>
+
+    <!-- Import -->
+    <section id="import" class="mb-12" aria-labelledby="import-heading">
+      <h2 id="import-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Import ]
+      </h2>
+      <div class="space-y-3">
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
+          <pre><code [innerHTML]="importCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
+          <pre><code [innerHTML]="componentImportCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+      </div>
+    </section>
+
+    <!-- Basic Usage -->
+    <section id="basic-usage" class="mb-12" aria-labelledby="basic-usage-heading">
+      <h2 id="basic-usage-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Basic Usage ]
+      </h2>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+        <pre><code [innerHTML]="basicUsageCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+      <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
+        aria-label="Live preview of basic dropdown menu">
+        <wally-dropdown-menu>
+          <wally-dropdown-menu-trigger>
+            <wally-button variant="outline">Open Menu</wally-button>
+          </wally-dropdown-menu-trigger>
+
+          <wally-dropdown-menu-content>
+            <wally-dropdown-menu-item (click)="onProfile()">
+              Profile
+            </wally-dropdown-menu-item>
+            <wally-dropdown-menu-item (click)="onSettings()">
+              Settings
+            </wally-dropdown-menu-item>
+            <wally-dropdown-menu-item (click)="onLogout()">
+              Log out
+            </wally-dropdown-menu-item>
+          </wally-dropdown-menu-content>
+        </wally-dropdown-menu>
+      </div>
+    </section>
+
+    <!-- Component Architecture -->
+    <section id="architecture" class="mb-12" aria-labelledby="architecture-heading">
+      <h2 id="architecture-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Component Architecture ]
+      </h2>
+      <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
+        Dropdown Menu follows a composable architecture inspired by Radix UI and shadcn/ui. Each part is a separate
+        component that can be composed together for maximum flexibility.
+      </p>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-4">
+        <pre class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"><code>wally-dropdown-menu                  Container (provides service)
+├── wally-dropdown-menu-trigger     Clickable element
+└── wally-dropdown-menu-content     Menu container
+    ├── wally-dropdown-menu-label   Section header
+    ├── wally-dropdown-menu-separator  Divider
+    ├── wally-dropdown-menu-group   Group wrapper
+    ├── wally-dropdown-menu-item    Menu item
+    └── wally-dropdown-menu-sub     Submenu container
+        ├── wally-dropdown-menu-sub-trigger
+        └── wally-dropdown-menu-sub-content</code></pre>
+      </div>
+    </section>
+
+    <!-- Advanced Examples -->
+    <section id="advanced-examples" class="mb-12" aria-labelledby="advanced-examples-heading">
+      <h2 id="advanced-examples-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Advanced Examples ]
+      </h2>
+
+      <!-- With Label -->
+      <article class="mb-8" aria-labelledby="with-label-heading">
+        <h3 id="with-label-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>With Label and Separator
+        </h3>
+        <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
+          Use labels to organize sections and separators to create visual hierarchy.
+        </p>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="withLabelCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
+          aria-label="Live preview of dropdown menu with label and separator">
+          <wally-dropdown-menu>
+            <wally-dropdown-menu-trigger>
+              <wally-button variant="outline">Account</wally-button>
+            </wally-dropdown-menu-trigger>
+
+            <wally-dropdown-menu-content>
+              <wally-dropdown-menu-label>
+                My Account
+              </wally-dropdown-menu-label>
+              <wally-dropdown-menu-separator></wally-dropdown-menu-separator>
+              <wally-dropdown-menu-item (click)="onProfile()">
+                Profile
+              </wally-dropdown-menu-item>
+              <wally-dropdown-menu-item (click)="onBilling()">
+                Billing
+              </wally-dropdown-menu-item>
+            </wally-dropdown-menu-content>
+          </wally-dropdown-menu>
+        </div>
+      </article>
+
+      <!-- With Icons -->
+      <article class="mb-8" aria-labelledby="with-icons-heading">
+        <h3 id="with-icons-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>With Icons
+        </h3>
+        <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
+          Add icons to menu items for better visual recognition.
+        </p>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="withIconsCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
+          aria-label="Live preview of dropdown menu with icons">
+          <wally-dropdown-menu>
+            <wally-dropdown-menu-trigger>
+              <wally-button variant="outline">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                  stroke="currentColor" class="size-5">
+                  <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                </svg>
+                Profile
+              </wally-button>
+            </wally-dropdown-menu-trigger>
+
+            <wally-dropdown-menu-content>
+              <wally-dropdown-menu-item (click)="onProfile()">
+                <div class="flex items-center gap-3">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="size-5">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                      d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                  </svg>
+                  <span>Account</span>
+                </div>
+              </wally-dropdown-menu-item>
+              <wally-dropdown-menu-item (click)="onSettings()">
+                <div class="flex items-center gap-3">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="size-5">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                      d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.240.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                  </svg>
+                  <span>Settings</span>
+                </div>
+              </wally-dropdown-menu-item>
+            </wally-dropdown-menu-content>
+          </wally-dropdown-menu>
+        </div>
+      </article>
+
+      <!-- With Submenus -->
+      <article class="mb-8" aria-labelledby="with-submenus-heading">
+        <h3 id="with-submenus-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>With Submenus
+        </h3>
+        <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
+          Create nested menus for complex navigation structures. Hover over submenu triggers to open.
+        </p>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="withSubmenusCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
+          aria-label="Live preview of dropdown menu with nested submenus">
+          <wally-dropdown-menu>
+            <wally-dropdown-menu-trigger>
+              <wally-button variant="outline">Options</wally-button>
+            </wally-dropdown-menu-trigger>
+
+            <wally-dropdown-menu-content>
+              <wally-dropdown-menu-item (click)="onEdit()">
+                Edit
+              </wally-dropdown-menu-item>
+              <wally-dropdown-menu-item (click)="onDuplicate()">
+                Duplicate
+              </wally-dropdown-menu-item>
+
+              <wally-dropdown-menu-separator></wally-dropdown-menu-separator>
+
+              <wally-dropdown-menu-sub>
+                <wally-dropdown-menu-sub-trigger>
+                  <div class="flex items-center gap-3">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                      stroke="currentColor" class="size-5">
+                      <path stroke-linecap="round" stroke-linejoin="round"
+                        d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
+                    </svg>
+                    <span>Share</span>
+                  </div>
+                </wally-dropdown-menu-sub-trigger>
+
+                <wally-dropdown-menu-sub-content>
+                  <wally-dropdown-menu-item (click)="onShareEmail()">
+                    Email
+                  </wally-dropdown-menu-item>
+                  <wally-dropdown-menu-item (click)="onShareLink()">
+                    Copy Link
+                  </wally-dropdown-menu-item>
+                  <wally-dropdown-menu-item (click)="onShareSocial()">
+                    Social Media
+                  </wally-dropdown-menu-item>
+                </wally-dropdown-menu-sub-content>
+              </wally-dropdown-menu-sub>
+
+              <wally-dropdown-menu-separator></wally-dropdown-menu-separator>
+
+              <wally-dropdown-menu-item (click)="onDelete()">
+                Delete
+              </wally-dropdown-menu-item>
+            </wally-dropdown-menu-content>
+          </wally-dropdown-menu>
+        </div>
+      </article>
+
+      <!-- Hover Mode -->
+      <article class="mb-8" aria-labelledby="hover-mode-heading">
+        <h3 id="hover-mode-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>Hover Trigger Mode
+        </h3>
+        <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
+          Set <code class="text-blue-600 dark:text-blue-400">triggerMode="hover"</code> to open on hover instead of
+          click. Useful for navigation menus.
+        </p>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="hoverModeCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
+          aria-label="Live preview of dropdown menu with hover trigger mode">
+          <wally-dropdown-menu [triggerMode]="'hover'">
+            <wally-dropdown-menu-trigger>
+              <wally-button variant="ghost">Hover Me</wally-button>
+            </wally-dropdown-menu-trigger>
+
+            <wally-dropdown-menu-content>
+              <wally-dropdown-menu-item (click)="onProfile()">
+                Profile
+              </wally-dropdown-menu-item>
+              <wally-dropdown-menu-item (click)="onSettings()">
+                Settings
+              </wally-dropdown-menu-item>
+            </wally-dropdown-menu-content>
+          </wally-dropdown-menu>
+        </div>
+      </article>
+
+      <!-- Destructive Actions -->
+      <article class="mb-8" aria-labelledby="destructive-heading">
+        <h3 id="destructive-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
+          <span aria-hidden="true">&gt; </span>Destructive Actions
+        </h3>
+        <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
+          Style dangerous actions with red text to indicate destructive behavior.
+        </p>
+        <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
+          <pre><code [innerHTML]="destructiveActionCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+        <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
+          aria-label="Live preview of dropdown menu with destructive action">
+          <wally-dropdown-menu>
+            <wally-dropdown-menu-trigger>
+              <wally-button variant="ghost">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                  stroke="currentColor" class="size-5">
+                  <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+                </svg>
+              </wally-button>
+            </wally-dropdown-menu-trigger>
+
+            <wally-dropdown-menu-content>
+              <wally-dropdown-menu-item (click)="onEdit()">
+                Edit
+              </wally-dropdown-menu-item>
+              <wally-dropdown-menu-item (click)="onDuplicate()">
+                Duplicate
+              </wally-dropdown-menu-item>
+              <wally-dropdown-menu-separator></wally-dropdown-menu-separator>
+              <wally-dropdown-menu-item (click)="onArchive()">
+                Archive
+              </wally-dropdown-menu-item>
+              <wally-dropdown-menu-separator></wally-dropdown-menu-separator>
+              <wally-dropdown-menu-item (click)="onDelete()">
+                <span class="text-red-600 dark:text-red-400">Delete</span>
+              </wally-dropdown-menu-item>
+            </wally-dropdown-menu-content>
+          </wally-dropdown-menu>
+        </div>
+      </article>
+    </section>
+
+    <!-- API Reference -->
+    <section id="api-reference" class="mb-12" aria-labelledby="api-heading">
+      <h2 id="api-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ API Reference ]
+      </h2>
+
+      <!-- DropdownMenu Props -->
+      <article class="mb-8" aria-labelledby="dropdown-menu-props-heading">
+        <h3 id="dropdown-menu-props-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+          <span aria-hidden="true">&gt; </span>DropdownMenu Props
+        </h3>
+        <div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-gray-50 dark:bg-gray-900">
+                <tr>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">triggerMode</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">'click' | 'hover'</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">'click'</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">How the dropdown opens - on click or hover</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </article>
+
+      <!-- DropdownMenuContent Props -->
+      <article class="mb-8" aria-labelledby="content-props-heading">
+        <h3 id="content-props-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+          <span aria-hidden="true">&gt; </span>DropdownMenuContent Props
+        </h3>
+        <div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-gray-50 dark:bg-gray-900">
+                <tr>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">position</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">'top' | 'bottom' | 'left' | 'right'
+                  </td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">'bottom'</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Preferred position. Auto-adjusts if no space
+                    available</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </article>
+
+      <!-- DropdownMenuItem Props -->
+      <article class="mb-8" aria-labelledby="item-props-heading">
+        <h3 id="item-props-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+          <span aria-hidden="true">&gt; </span>DropdownMenuItem Props & Events
+        </h3>
+        <div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden mb-4">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-gray-50 dark:bg-gray-900">
+                <tr>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">disabled</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Disables the menu item</td>
+                </tr>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">(click)</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">OutputEmitterRef&lt;void&gt;</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">-</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Emitted when item is clicked. Menu closes
+                    automatically</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </article>
+
+      <!-- DropdownMenuGroup Props -->
+      <article class="mb-8" aria-labelledby="group-props-heading">
+        <h3 id="group-props-heading"
+          class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
+          <span aria-hidden="true">&gt; </span>DropdownMenuGroup Props
+        </h3>
+        <div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-gray-50 dark:bg-gray-900">
+                <tr>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaLabel</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
+                  <td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Accessible label for screen readers</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </article>
+    </section>
+
+    <!-- Features -->
+    <section id="features" class="mb-12" aria-labelledby="features-heading">
+      <h2 id="features-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Key Features ]
+      </h2>
+      <div class="space-y-4">
+        <article class="border-2 border-neutral-300 dark:border-neutral-700 p-4">
+          <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
+            <span aria-hidden="true">&gt; </span>Composable Architecture
+          </h3>
+          <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            Build complex menus by composing small, focused components. Full control over HTML structure and styling.
+          </p>
+        </article>
+
+        <article class="border-2 border-neutral-300 dark:border-neutral-700 p-4">
+          <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
+            <span aria-hidden="true">&gt; </span>Viewport-Aware Positioning
+          </h3>
+          <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            Automatically adjusts position to stay within viewport. Detects available space and chooses optimal
+            placement.
+          </p>
+        </article>
+
+        <article class="border-2 border-neutral-300 dark:border-neutral-700 p-4">
+          <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
+            <span aria-hidden="true">&gt; </span>Click Outside to Close
+          </h3>
+          <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            Automatically closes when clicking outside. Uses efficient event delegation for performance.
+          </p>
+        </article>
+
+        <article class="border-2 border-neutral-300 dark:border-neutral-700 p-4">
+          <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
+            <span aria-hidden="true">&gt; </span>Hover Support with Smart Delays
+          </h3>
+          <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            200ms delay before opening prevents accidental triggers. 100-300ms close delay allows smooth mouse
+            movement.
+          </p>
+        </article>
+
+        <article class="border-2 border-neutral-300 dark:border-neutral-700 p-4">
+          <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
+            <span aria-hidden="true">&gt; </span>Nested Submenus
+          </h3>
+          <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            Unlimited nesting depth. Each submenu has independent state management. Opens on hover with smooth
+            transitions.
+          </p>
+        </article>
+
+        <article class="border-2 border-neutral-300 dark:border-neutral-700 p-4">
+          <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
+            <span aria-hidden="true">&gt; </span>Full Accessibility
+          </h3>
+          <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            ARIA roles (menu, menuitem, group). Proper focus management. Screen reader announcements. Semantic HTML
+            structure.
+          </p>
+        </article>
+
+        <article class="border-2 border-neutral-300 dark:border-neutral-700 p-4">
+          <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
+            <span aria-hidden="true">&gt; </span>Smooth Animations
+          </h3>
+          <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            Tailwind CSS transitions for fade-in effects. 200ms duration with ease-out timing. GPU-accelerated
+            transforms.
+          </p>
+        </article>
+      </div>
+    </section>
+
+    <!-- Component TypeScript -->
+    <section id="component-ts" class="mb-12" aria-labelledby="component-ts-heading">
+      <h2 id="component-ts-heading"
+        class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
+        [ Component TypeScript Example ]
+      </h2>
+      <div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
+        <pre><code [innerHTML]="componentTsCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+    </section>
+
+  </div>
+</main>