@adamosuiteservices/ui 2.11.17 → 2.11.18

package/docs/components/ui/dropdown-menu.md

@@ -1,709 +1,709 @@
-# Dropdown Menu
-
-Menú desplegable activado por click, basado en Radix UI. Soporta submenús, checkboxes, radio groups, separadores, y shortcuts visuales. Similar a ContextMenu pero activado con click en lugar de click derecho.
-
-## Importación
-
-```tsx
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-} from "@adamosuiteservices/ui/dropdown-menu";
-```
-
-## Anatomía
-
-```tsx
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button>Open Menu</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent>
-    <DropdownMenuLabel>My Account</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>
-      Profile
-      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-    </DropdownMenuItem>
-    <DropdownMenuCheckboxItem checked={showPanel}>
-      Show Panel
-    </DropdownMenuCheckboxItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuSub>
-      <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
-      <DropdownMenuSubContent>
-        <DropdownMenuItem>Export</DropdownMenuItem>
-      </DropdownMenuSubContent>
-    </DropdownMenuSub>
-  </DropdownMenuContent>
-</DropdownMenu>
-```
-
-**Componentes**: 14 (Menu, Trigger, Content, Item, CheckboxItem, RadioGroup, RadioItem, Label, Separator, Shortcut, Sub, SubTrigger, SubContent, Group, Portal)
-
-## Props Principales
-
-### DropdownMenu (Root)
-
-| Prop           | Tipo                      | Default | Descripción                                        |
-| -------------- | ------------------------- | ------- | -------------------------------------------------- |
-| `open`         | `boolean`                 | -       | Estado controlado del menú                         |
-| `onOpenChange` | `(open: boolean) => void` | -       | Callback cuando cambia estado                      |
-| `defaultOpen`  | `boolean`                 | `false` | Estado inicial no controlado                       |
-| `modal`        | `boolean`                 | `true`  | Comportamiento modal (bloquea interacción externa) |
-
-### DropdownMenuTrigger
-
-| Prop        | Tipo      | Descripción                                        |
-| ----------- | --------- | -------------------------------------------------- |
-| `asChild`   | `boolean` | Pasa props al child en lugar de renderizar wrapper |
-| `disabled`  | `boolean` | Desactiva el trigger                               |
-| `className` | `string`  | Clases CSS adicionales                             |
-
-### DropdownMenuContent
-
-| Prop                   | Tipo                                     | Default    | Descripción                                   |
-| ---------------------- | ---------------------------------------- | ---------- | --------------------------------------------- |
-| `align`                | `"start" \| "center" \| "end"`           | `"center"` | Alineamiento horizontal respecto al trigger   |
-| `side`                 | `"top" \| "right" \| "bottom" \| "left"` | `"bottom"` | Lado donde aparece el menú                    |
-| `sideOffset`           | `number`                                 | `4`        | Distancia desde trigger (px)                  |
-| `alignOffset`          | `number`                                 | `0`        | Offset del alineamiento                       |
-| `className`            | `string`                                 | -          | Clases CSS adicionales                        |
-| `loop`                 | `boolean`                                | `false`    | Navegación circular con arrow keys            |
-| `onCloseAutoFocus`     | `(event) => void`                        | -          | Callback al cerrar (antes de restaurar focus) |
-| `onEscapeKeyDown`      | `(event) => void`                        | -          | Callback al presionar Escape                  |
-| `onPointerDownOutside` | `(event) => void`                        | -          | Callback al hacer clic fuera                  |
-
-**Estilos default**: `min-w-[8rem]`, `max-h-(--radix-dropdown-menu-content-available-height)`, scroll automático, `z-50`
-
-### DropdownMenuItem
-
-| Prop        | Tipo                         | Default     | Descripción                             |
-| ----------- | ---------------------------- | ----------- | --------------------------------------- |
-| `onSelect`  | `(event) => void`            | -           | Callback al seleccionar (click o Enter) |
-| `disabled`  | `boolean`                    | `false`     | Desactiva el item                       |
-| `inset`     | `boolean`                    | `false`     | Agrega padding izquierdo (`pl-8`)       |
-| `variant`   | `"default" \| "destructive"` | `"default"` | Estilo del item                         |
-| `className` | `string`                     | -           | Clases CSS adicionales                  |
-
-**Variantes**:
-
-- `default`: `focus:bg-accent`, `focus:text-accent-foreground`
-- `destructive`: `text-destructive`, `focus:bg-destructive/10`, `focus:text-destructive`
-
-### DropdownMenuCheckboxItem
-
-| Prop              | Tipo                         | Descripción                |
-| ----------------- | ---------------------------- | -------------------------- |
-| `checked`         | `boolean \| "indeterminate"` | Estado del checkbox        |
-| `onCheckedChange` | `(checked: boolean) => void` | Callback al cambiar estado |
-| `disabled`        | `boolean`                    | Desactiva el item          |
-| `className`       | `string`                     | Clases CSS adicionales     |
-
-**Indicador**: CheckIcon automático cuando `checked={true}`, posicionado con `pl-8`
-
-### DropdownMenuRadioGroup
-
-| Prop            | Tipo                      | Descripción               |
-| --------------- | ------------------------- | ------------------------- |
-| `value`         | `string`                  | Valor seleccionado        |
-| `onValueChange` | `(value: string) => void` | Callback al cambiar valor |
-
-### DropdownMenuRadioItem
-
-| Prop        | Tipo      | Descripción            |
-| ----------- | --------- | ---------------------- |
-| `value`     | `string`  | Valor único del item   |
-| `disabled`  | `boolean` | Desactiva el item      |
-| `className` | `string`  | Clases CSS adicionales |
-
-**Indicador**: CircleIcon automático cuando seleccionado, posicionado con `pl-8`
-
-### DropdownMenuSub
-
-| Prop           | Tipo                      | Descripción                   |
-| -------------- | ------------------------- | ----------------------------- |
-| `open`         | `boolean`                 | Estado controlado del submenú |
-| `onOpenChange` | `(open: boolean) => void` | Callback al cambiar estado    |
-
-### DropdownMenuSubTrigger
-
-| Prop        | Tipo      | Descripción                |
-| ----------- | --------- | -------------------------- |
-| `disabled`  | `boolean` | Desactiva el trigger       |
-| `inset`     | `boolean` | Padding izquierdo (`pl-8`) |
-| `className` | `string`  | Clases CSS adicionales     |
-
-**Indicador**: ChevronRightIcon automático con `ml-auto`
-
-### DropdownMenuLabel
-
-| Prop        | Tipo      | Descripción                |
-| ----------- | --------- | -------------------------- |
-| `inset`     | `boolean` | Padding izquierdo (`pl-8`) |
-| `className` | `string`  | Clases CSS adicionales     |
-
-**Estilos**: `font-medium`, `text-sm`
-
-### DropdownMenuShortcut
-
-| Prop        | Tipo     | Descripción            |
-| ----------- | -------- | ---------------------- |
-| `className` | `string` | Clases CSS adicionales |
-
-**Estilos**: `text-muted-foreground`, `text-xs`, `tracking-widest`, `ml-auto`
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-<DropdownMenu>
-  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-  <DropdownMenuContent>
-    <DropdownMenuLabel>My Account</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>Profile</DropdownMenuItem>
-    <DropdownMenuItem>Billing</DropdownMenuItem>
-    <DropdownMenuItem>Settings</DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>
-```
-
-### Con Trigger Custom (asChild)
-
-```tsx
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">Open Menu</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent>
-    <DropdownMenuItem>Profile</DropdownMenuItem>
-    <DropdownMenuItem>Settings</DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>
-```
-
-### Con Iconos y Shortcuts
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">Open</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent className="w-56" align="start">
-    <DropdownMenuLabel>My Account</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>
-      <Icon symbol="person" />
-      Profile
-      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="credit_card" />
-      Billing
-      <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="settings" />
-      Settings
-      <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-    </DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>
-      <Icon symbol="logout" />
-      Log out
-      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>;
-```
-
-**Nota**: SVGs automáticamente `size-4`, `text-muted-foreground` (excepto en variant destructive)
-
-### Con Checkboxes
-
-```tsx
-import { useState } from "react";
-
-function ViewOptions() {
-  const [showStatusBar, setShowStatusBar] = useState(true);
-  const [showActivityBar, setShowActivityBar] = useState(false);
-  const [showPanel, setShowPanel] = useState(false);
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">View Options</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuCheckboxItem
-          checked={showStatusBar}
-          onCheckedChange={setShowStatusBar}
-        >
-          Status Bar
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem
-          checked={showActivityBar}
-          onCheckedChange={setShowActivityBar}
-        >
-          Activity Bar
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem
-          checked={showPanel}
-          onCheckedChange={setShowPanel}
-        >
-          Panel
-        </DropdownMenuCheckboxItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-```
-
-### Con Radio Group
-
-```tsx
-import { useState } from "react";
-
-function Settings() {
-  const [position, setPosition] = useState("bottom");
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Panel Position</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-```
-
-### Con Submenú
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">Options</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent>
-    <DropdownMenuItem>
-      <Icon symbol="group" />
-      Team
-    </DropdownMenuItem>
-    <DropdownMenuSub>
-      <DropdownMenuSubTrigger>
-        <Icon symbol="person" />
-        Invite users
-      </DropdownMenuSubTrigger>
-      <DropdownMenuPortal>
-        <DropdownMenuSubContent>
-          <DropdownMenuItem>
-            <Icon symbol="mail" />
-            Email
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <Icon symbol="chat_bubble" />
-            Message
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>
-            <Icon symbol="add" />
-            More...
-          </DropdownMenuItem>
-        </DropdownMenuSubContent>
-      </DropdownMenuPortal>
-    </DropdownMenuSub>
-  </DropdownMenuContent>
-</DropdownMenu>;
-```
-
-### User Menu (Avatar)
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="ghost" className="h-8 w-8 rounded-full">
-      <Icon symbol="person" />
-    </Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent className="w-56" align="end" forceMount>
-    <DropdownMenuLabel className="font-normal">
-      <div className="flex flex-col space-y-1">
-        <p className="text-sm font-medium leading-none">John Doe</p>
-        <p className="text-xs leading-none text-muted-foreground">
-          john.doe@example.com
-        </p>
-      </div>
-    </DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>
-      <Icon symbol="person" />
-      Profile
-      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="credit_card" />
-      Billing
-      <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="settings" />
-      Settings
-      <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-    </DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>
-      <Icon symbol="logout" />
-      Log out
-      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>;
-```
-
-### File Actions (More Menu)
-
-```tsx
-import {
-  MoreHorizontalIcon,
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="ghost" size="sm">
-      <Icon symbol="more_horiz" />
-    </Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent align="end">
-    <DropdownMenuItem>
-      <Icon symbol="open_in_new" />
-      Open
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="content_copy" />
-      Copy Link
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="share" />
-      Share
-    </DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>
-      <Icon symbol="download" />
-      Download
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="edit" />
-      Rename
-    </DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem variant="destructive">
-      <Icon symbol="delete" />
-      Delete
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>;
-```
-
-### Simple Actions con Chevron
-
-```tsx
-import {
-  ChevronDownIcon,
-  EditIcon,
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">
-      Actions
-      <Icon symbol="expand_more" />
-    </Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent>
-    <DropdownMenuItem>
-      <Icon symbol="edit" />
-      Edit
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="content_copy" />
-      Duplicate
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="share" />
-      Share
-    </DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem variant="destructive">
-      <Icon symbol="delete" />
-      Delete
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>;
-```
-
-### Project Menu (Nested)
-
-```tsx
-import {
-  FolderIcon,
-  EditIcon,
-  ShareIcon,
-  CopyIcon,
-  UsersIcon,
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">
-      <Icon symbol="folder" />
-      My Project
-      <Icon symbol="expand_more" />
-    </Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent className="w-56">
-    <DropdownMenuLabel>Project Actions</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>
-      <Icon symbol="edit" />
-      Edit Project
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="share" />
-      Share Project
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="content_copy" />
-      Duplicate Project
-    </DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuSub>
-      <DropdownMenuSubTrigger>
-        <Icon symbol="group" />
-        Manage Access
-      </DropdownMenuSubTrigger>
-      <DropdownMenuPortal>
-        <DropdownMenuSubContent>
-          <DropdownMenuItem>
-            <Icon symbol="person_add" />
-            Add Member
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <Icon symbol="admin_panel_settings" />
-            Permissions
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>
-            <Icon symbol="group" />
-            View Members
-          </DropdownMenuItem>
-        </DropdownMenuSubContent>
-      </DropdownMenuPortal>
-    </DropdownMenuSub>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>
-      <Icon symbol="download" />
-      Export
-    </DropdownMenuItem>
-    <DropdownMenuItem>
-      <Icon symbol="settings" />
-      Settings
-    </DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem variant="destructive">
-      <Icon symbol="delete" />
-      Delete Project
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>;
-```
-
-### Items Deshabilitados
-
-```tsx
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">Options</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent>
-    <DropdownMenuItem>Available Action</DropdownMenuItem>
-    <DropdownMenuItem disabled>Premium Feature</DropdownMenuItem>
-    <DropdownMenuItem>Another Action</DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem disabled>Coming Soon</DropdownMenuItem>
-    <DropdownMenuItem variant="destructive" disabled>
-      No Permission
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>
-```
-
-**Estilos disabled**: `opacity-50`, `pointer-events-none`, `data-[disabled=true]`
-
-### Controlado
-
-```tsx
-import { useState } from "react";
-
-function App() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button>Menu</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem onClick={() => setOpen(false)}>
-          Action (closes menu)
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-```
-
-## Casos de Uso Comunes
-
-**User menus**: Avatar menu con profile, settings, logout  
-**Action menus**: File actions, row actions, more options  
-**Navigation**: Nested navigation menus  
-**Filters/Options**: View settings, panel positions  
-**Context actions**: Edit, share, delete operations  
-**Bulk actions**: Select multiple items, apply actions
-
-## Estados y Data Attributes
-
-### DropdownMenuItem States
-
-- **Focus**: `data-[highlighted]` → `bg-accent`, `text-accent-foreground`
-- **Disabled**: `data-[disabled=true]` → `opacity-50`, `pointer-events-none`
-- **Destructive**: `data-[variant=destructive]` → `text-destructive`
-
-### DropdownMenuSubTrigger States
-
-- **Open**: `data-[state=open]` → `bg-accent`, `text-accent-foreground`
-
-### Content Animations
-
-- **Opening**: `data-[state=open]` → `animate-in`, `fade-in-0`, `zoom-in-95`
-- **Closing**: `data-[state=closed]` → `animate-out`, `fade-out-0`, `zoom-out-95`
-- **Slide in**: `data-[side=top|right|bottom|left]` → direccional
-
-## Navegación por Teclado
-
-- ✅ **Arrow Up/Down**: Navega entre items
-- ✅ **Arrow Right**: Abre submenú (si disponible)
-- ✅ **Arrow Left**: Cierra submenú
-- ✅ **Enter/Space**: Activa item enfocado
-- ✅ **Escape**: Cierra menú
-- ✅ **Tab**: Mueve focus fuera del menú
-- ✅ **Home/End**: Primer/último item (si `loop={true}`)
-- ✅ **Type ahead**: Busca item por primera letra
-
-## Accesibilidad
-
-- ✅ **ARIA**: `role="menu"` en content, `role="menuitem"` en items
-- ✅ **Keyboard navigation**: Navegación completa por teclado
-- ✅ **Focus management**: Focus visible y restaurado correctamente
-- ✅ **Screen readers**: Anuncia items, estado de checkboxes/radios, disabled
-- ✅ **Disabled items**: `aria-disabled="true"` en items deshabilitados
-- ✅ **Submenus**: `aria-haspopup="menu"` en SubTriggers
-- ✅ **Checked state**: `aria-checked` en CheckboxItem y RadioItem
-
-## Notas de Implementación
-
-- **Basado en Radix UI**: `@radix-ui/react-dropdown-menu`
-- **Click to open**: Se activa con click (diferente de ContextMenu que usa right-click)
-- **Auto positioning**: Portal con posicionamiento automático
-- **Collision detection**: Evita salirse del viewport
-- **Auto-close**: Cierra al seleccionar item (excepto checkboxes/radios)
-- **Focus trap**: Mientras está abierto, focus queda dentro del menú
-- **Portal rendering**: Content se renderiza en `document.body` por defecto
-- **SVG auto-sizing**: Iconos automáticamente `size-4` y color muted
-- **Inset support**: `inset` prop agrega `pl-8` para alinear con items con iconos
-- **ChevronRightIcon**: Incluido automáticamente en SubTriggers
-- **CheckIcon/CircleIcon**: Incluidos automáticamente en CheckboxItem/RadioItem
-- **Variant destructive**: SVGs ignoran color muted y usan `text-destructive`
-- **Default sideOffset**: 4px de distancia desde trigger
-
-## Posicionamiento
-
-Control completo del posicionamiento del menú:
-
-```tsx
-<DropdownMenuContent
-  align="end" // "start" | "center" | "end"
-  side="bottom" // "top" | "right" | "bottom" | "left"
-  sideOffset={8} // distancia desde trigger
-  alignOffset={-4} // offset horizontal
-  className="w-64" // ancho custom
->
-  {/* ... */}
-</DropdownMenuContent>
-```
-
-**Ejemplos comunes**:
-
-- User menu (top-right avatar): `align="end"`
-- Actions menu (more button): `align="end"`
-- Navigation menu: `align="start"`
-
-## Troubleshooting
-
-**Menú no aparece**: Verifica que DropdownMenuTrigger tenga `asChild` si usas Button custom  
-**Items no responden a click**: Usa `onSelect` en lugar de `onClick`  
-**Iconos mal alineados**: Usa `inset` en items sin iconos cuando otros sí tienen  
-**Menú no cierra al seleccionar**: CheckboxItems y RadioItems no cierran automáticamente (comportamiento esperado)  
-**Submenú no abre**: Verifica que estés usando `DropdownMenuSub` + `DropdownMenuSubTrigger` + `DropdownMenuSubContent`  
-**Shortcuts no ejecutan**: `DropdownMenuShortcut` es solo visual, implementa lógica en `onSelect`  
-**Focus se pierde al cerrar**: Usa `onCloseAutoFocus` para control custom del focus  
-**Posición incorrecta**: Verifica `align` y `side` props, ajusta con `sideOffset` y `alignOffset`  
-**Trigger no muestra estado**: Radix no cambia apariencia del trigger automáticamente, usa estado controlado
-
-## Diferencias con ContextMenu
-
-| Aspecto              | DropdownMenu                | ContextMenu           |
-| -------------------- | --------------------------- | --------------------- |
-| **Activación**       | Click izquierdo             | Click derecho         |
-| **Trigger**          | Botón/elemento visible      | Área target           |
-| **Uso común**        | Menús de acción, navegación | Acciones contextuales |
-| **Indicador visual** | Botón con chevron           | Sin indicador         |
-| **Posicionamiento**  | Relativo al trigger         | Posición del cursor   |
-
-## Referencias
-
-- **Radix UI Dropdown Menu**: https://www.radix-ui.com/primitives/docs/components/dropdown-menu
-- **shadcn/ui Dropdown Menu**: https://ui.shadcn.com/docs/components/dropdown-menu
-- **ARIA Menu Pattern**: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
+# Dropdown Menu
+
+Menú desplegable activado por click, basado en Radix UI. Soporta submenús, checkboxes, radio groups, separadores, y shortcuts visuales. Similar a ContextMenu pero activado con click en lugar de click derecho.
+
+## Importación
+
+```tsx
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+} from "@adamosuiteservices/ui/dropdown-menu";
+```
+
+## Anatomía
+
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button>Open Menu</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>
+      Profile
+      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+    </DropdownMenuItem>
+    <DropdownMenuCheckboxItem checked={showPanel}>
+      Show Panel
+    </DropdownMenuCheckboxItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
+      <DropdownMenuSubContent>
+        <DropdownMenuItem>Export</DropdownMenuItem>
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+**Componentes**: 14 (Menu, Trigger, Content, Item, CheckboxItem, RadioGroup, RadioItem, Label, Separator, Shortcut, Sub, SubTrigger, SubContent, Group, Portal)
+
+## Props Principales
+
+### DropdownMenu (Root)
+
+| Prop           | Tipo                      | Default | Descripción                                        |
+| -------------- | ------------------------- | ------- | -------------------------------------------------- |
+| `open`         | `boolean`                 | -       | Estado controlado del menú                         |
+| `onOpenChange` | `(open: boolean) => void` | -       | Callback cuando cambia estado                      |
+| `defaultOpen`  | `boolean`                 | `false` | Estado inicial no controlado                       |
+| `modal`        | `boolean`                 | `true`  | Comportamiento modal (bloquea interacción externa) |
+
+### DropdownMenuTrigger
+
+| Prop        | Tipo      | Descripción                                        |
+| ----------- | --------- | -------------------------------------------------- |
+| `asChild`   | `boolean` | Pasa props al child en lugar de renderizar wrapper |
+| `disabled`  | `boolean` | Desactiva el trigger                               |
+| `className` | `string`  | Clases CSS adicionales                             |
+
+### DropdownMenuContent
+
+| Prop                   | Tipo                                     | Default    | Descripción                                   |
+| ---------------------- | ---------------------------------------- | ---------- | --------------------------------------------- |
+| `align`                | `"start" \| "center" \| "end"`           | `"center"` | Alineamiento horizontal respecto al trigger   |
+| `side`                 | `"top" \| "right" \| "bottom" \| "left"` | `"bottom"` | Lado donde aparece el menú                    |
+| `sideOffset`           | `number`                                 | `4`        | Distancia desde trigger (px)                  |
+| `alignOffset`          | `number`                                 | `0`        | Offset del alineamiento                       |
+| `className`            | `string`                                 | -          | Clases CSS adicionales                        |
+| `loop`                 | `boolean`                                | `false`    | Navegación circular con arrow keys            |
+| `onCloseAutoFocus`     | `(event) => void`                        | -          | Callback al cerrar (antes de restaurar focus) |
+| `onEscapeKeyDown`      | `(event) => void`                        | -          | Callback al presionar Escape                  |
+| `onPointerDownOutside` | `(event) => void`                        | -          | Callback al hacer clic fuera                  |
+
+**Estilos default**: `min-w-[8rem]`, `max-h-(--radix-dropdown-menu-content-available-height)`, scroll automático, `z-50`
+
+### DropdownMenuItem
+
+| Prop        | Tipo                         | Default     | Descripción                             |
+| ----------- | ---------------------------- | ----------- | --------------------------------------- |
+| `onSelect`  | `(event) => void`            | -           | Callback al seleccionar (click o Enter) |
+| `disabled`  | `boolean`                    | `false`     | Desactiva el item                       |
+| `inset`     | `boolean`                    | `false`     | Agrega padding izquierdo (`pl-8`)       |
+| `variant`   | `"default" \| "destructive"` | `"default"` | Estilo del item                         |
+| `className` | `string`                     | -           | Clases CSS adicionales                  |
+
+**Variantes**:
+
+- `default`: `focus:bg-accent`, `focus:text-accent-foreground`
+- `destructive`: `text-destructive`, `focus:bg-destructive/10`, `focus:text-destructive`
+
+### DropdownMenuCheckboxItem
+
+| Prop              | Tipo                         | Descripción                |
+| ----------------- | ---------------------------- | -------------------------- |
+| `checked`         | `boolean \| "indeterminate"` | Estado del checkbox        |
+| `onCheckedChange` | `(checked: boolean) => void` | Callback al cambiar estado |
+| `disabled`        | `boolean`                    | Desactiva el item          |
+| `className`       | `string`                     | Clases CSS adicionales     |
+
+**Indicador**: CheckIcon automático cuando `checked={true}`, posicionado con `pl-8`
+
+### DropdownMenuRadioGroup
+
+| Prop            | Tipo                      | Descripción               |
+| --------------- | ------------------------- | ------------------------- |
+| `value`         | `string`                  | Valor seleccionado        |
+| `onValueChange` | `(value: string) => void` | Callback al cambiar valor |
+
+### DropdownMenuRadioItem
+
+| Prop        | Tipo      | Descripción            |
+| ----------- | --------- | ---------------------- |
+| `value`     | `string`  | Valor único del item   |
+| `disabled`  | `boolean` | Desactiva el item      |
+| `className` | `string`  | Clases CSS adicionales |
+
+**Indicador**: CircleIcon automático cuando seleccionado, posicionado con `pl-8`
+
+### DropdownMenuSub
+
+| Prop           | Tipo                      | Descripción                   |
+| -------------- | ------------------------- | ----------------------------- |
+| `open`         | `boolean`                 | Estado controlado del submenú |
+| `onOpenChange` | `(open: boolean) => void` | Callback al cambiar estado    |
+
+### DropdownMenuSubTrigger
+
+| Prop        | Tipo      | Descripción                |
+| ----------- | --------- | -------------------------- |
+| `disabled`  | `boolean` | Desactiva el trigger       |
+| `inset`     | `boolean` | Padding izquierdo (`pl-8`) |
+| `className` | `string`  | Clases CSS adicionales     |
+
+**Indicador**: ChevronRightIcon automático con `ml-auto`
+
+### DropdownMenuLabel
+
+| Prop        | Tipo      | Descripción                |
+| ----------- | --------- | -------------------------- |
+| `inset`     | `boolean` | Padding izquierdo (`pl-8`) |
+| `className` | `string`  | Clases CSS adicionales     |
+
+**Estilos**: `font-medium`, `text-sm`
+
+### DropdownMenuShortcut
+
+| Prop        | Tipo     | Descripción            |
+| ----------- | -------- | ---------------------- |
+| `className` | `string` | Clases CSS adicionales |
+
+**Estilos**: `text-muted-foreground`, `text-xs`, `tracking-widest`, `ml-auto`
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>Profile</DropdownMenuItem>
+    <DropdownMenuItem>Billing</DropdownMenuItem>
+    <DropdownMenuItem>Settings</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+### Con Trigger Custom (asChild)
+
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Open Menu</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuItem>Profile</DropdownMenuItem>
+    <DropdownMenuItem>Settings</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+### Con Iconos y Shortcuts
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Open</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent className="w-56" align="start">
+    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>
+      <Icon symbol="person" />
+      Profile
+      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="credit_card" />
+      Billing
+      <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="settings" />
+      Settings
+      <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+    </DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>
+      <Icon symbol="logout" />
+      Log out
+      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>;
+```
+
+**Nota**: SVGs automáticamente `size-4`, `text-muted-foreground` (excepto en variant destructive)
+
+### Con Checkboxes
+
+```tsx
+import { useState } from "react";
+
+function ViewOptions() {
+  const [showStatusBar, setShowStatusBar] = useState(true);
+  const [showActivityBar, setShowActivityBar] = useState(false);
+  const [showPanel, setShowPanel] = useState(false);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">View Options</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem
+          checked={showStatusBar}
+          onCheckedChange={setShowStatusBar}
+        >
+          Status Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={showActivityBar}
+          onCheckedChange={setShowActivityBar}
+        >
+          Activity Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={showPanel}
+          onCheckedChange={setShowPanel}
+        >
+          Panel
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+```
+
+### Con Radio Group
+
+```tsx
+import { useState } from "react";
+
+function Settings() {
+  const [position, setPosition] = useState("bottom");
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Panel Position</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+```
+
+### Con Submenú
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Options</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuItem>
+      <Icon symbol="group" />
+      Team
+    </DropdownMenuItem>
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>
+        <Icon symbol="person" />
+        Invite users
+      </DropdownMenuSubTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem>
+            <Icon symbol="mail" />
+            Email
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Icon symbol="chat_bubble" />
+            Message
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <Icon symbol="add" />
+            More...
+          </DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuPortal>
+    </DropdownMenuSub>
+  </DropdownMenuContent>
+</DropdownMenu>;
+```
+
+### User Menu (Avatar)
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="ghost" className="h-8 w-8 rounded-full">
+      <Icon symbol="person" />
+    </Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent className="w-56" align="end" forceMount>
+    <DropdownMenuLabel className="font-normal">
+      <div className="flex flex-col space-y-1">
+        <p className="text-sm font-medium leading-none">John Doe</p>
+        <p className="text-xs leading-none text-muted-foreground">
+          john.doe@example.com
+        </p>
+      </div>
+    </DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>
+      <Icon symbol="person" />
+      Profile
+      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="credit_card" />
+      Billing
+      <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="settings" />
+      Settings
+      <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+    </DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>
+      <Icon symbol="logout" />
+      Log out
+      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>;
+```
+
+### File Actions (More Menu)
+
+```tsx
+import {
+  MoreHorizontalIcon,
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="ghost" size="sm">
+      <Icon symbol="more_horiz" />
+    </Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end">
+    <DropdownMenuItem>
+      <Icon symbol="open_in_new" />
+      Open
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="content_copy" />
+      Copy Link
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="share" />
+      Share
+    </DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>
+      <Icon symbol="download" />
+      Download
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="edit" />
+      Rename
+    </DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem variant="destructive">
+      <Icon symbol="delete" />
+      Delete
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>;
+```
+
+### Simple Actions con Chevron
+
+```tsx
+import {
+  ChevronDownIcon,
+  EditIcon,
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">
+      Actions
+      <Icon symbol="expand_more" />
+    </Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuItem>
+      <Icon symbol="edit" />
+      Edit
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="content_copy" />
+      Duplicate
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="share" />
+      Share
+    </DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem variant="destructive">
+      <Icon symbol="delete" />
+      Delete
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>;
+```
+
+### Project Menu (Nested)
+
+```tsx
+import {
+  FolderIcon,
+  EditIcon,
+  ShareIcon,
+  CopyIcon,
+  UsersIcon,
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">
+      <Icon symbol="folder" />
+      My Project
+      <Icon symbol="expand_more" />
+    </Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent className="w-56">
+    <DropdownMenuLabel>Project Actions</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>
+      <Icon symbol="edit" />
+      Edit Project
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="share" />
+      Share Project
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="content_copy" />
+      Duplicate Project
+    </DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>
+        <Icon symbol="group" />
+        Manage Access
+      </DropdownMenuSubTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem>
+            <Icon symbol="person_add" />
+            Add Member
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Icon symbol="admin_panel_settings" />
+            Permissions
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <Icon symbol="group" />
+            View Members
+          </DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuPortal>
+    </DropdownMenuSub>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>
+      <Icon symbol="download" />
+      Export
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Icon symbol="settings" />
+      Settings
+    </DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem variant="destructive">
+      <Icon symbol="delete" />
+      Delete Project
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>;
+```
+
+### Items Deshabilitados
+
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Options</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuItem>Available Action</DropdownMenuItem>
+    <DropdownMenuItem disabled>Premium Feature</DropdownMenuItem>
+    <DropdownMenuItem>Another Action</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem disabled>Coming Soon</DropdownMenuItem>
+    <DropdownMenuItem variant="destructive" disabled>
+      No Permission
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+**Estilos disabled**: `opacity-50`, `pointer-events-none`, `data-[disabled=true]`
+
+### Controlado
+
+```tsx
+import { useState } from "react";
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button>Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem onClick={() => setOpen(false)}>
+          Action (closes menu)
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+```
+
+## Casos de Uso Comunes
+
+**User menus**: Avatar menu con profile, settings, logout  
+**Action menus**: File actions, row actions, more options  
+**Navigation**: Nested navigation menus  
+**Filters/Options**: View settings, panel positions  
+**Context actions**: Edit, share, delete operations  
+**Bulk actions**: Select multiple items, apply actions
+
+## Estados y Data Attributes
+
+### DropdownMenuItem States
+
+- **Focus**: `data-[highlighted]` → `bg-accent`, `text-accent-foreground`
+- **Disabled**: `data-[disabled=true]` → `opacity-50`, `pointer-events-none`
+- **Destructive**: `data-[variant=destructive]` → `text-destructive`
+
+### DropdownMenuSubTrigger States
+
+- **Open**: `data-[state=open]` → `bg-accent`, `text-accent-foreground`
+
+### Content Animations
+
+- **Opening**: `data-[state=open]` → `animate-in`, `fade-in-0`, `zoom-in-95`
+- **Closing**: `data-[state=closed]` → `animate-out`, `fade-out-0`, `zoom-out-95`
+- **Slide in**: `data-[side=top|right|bottom|left]` → direccional
+
+## Navegación por Teclado
+
+- ✅ **Arrow Up/Down**: Navega entre items
+- ✅ **Arrow Right**: Abre submenú (si disponible)
+- ✅ **Arrow Left**: Cierra submenú
+- ✅ **Enter/Space**: Activa item enfocado
+- ✅ **Escape**: Cierra menú
+- ✅ **Tab**: Mueve focus fuera del menú
+- ✅ **Home/End**: Primer/último item (si `loop={true}`)
+- ✅ **Type ahead**: Busca item por primera letra
+
+## Accesibilidad
+
+- ✅ **ARIA**: `role="menu"` en content, `role="menuitem"` en items
+- ✅ **Keyboard navigation**: Navegación completa por teclado
+- ✅ **Focus management**: Focus visible y restaurado correctamente
+- ✅ **Screen readers**: Anuncia items, estado de checkboxes/radios, disabled
+- ✅ **Disabled items**: `aria-disabled="true"` en items deshabilitados
+- ✅ **Submenus**: `aria-haspopup="menu"` en SubTriggers
+- ✅ **Checked state**: `aria-checked` en CheckboxItem y RadioItem
+
+## Notas de Implementación
+
+- **Basado en Radix UI**: `@radix-ui/react-dropdown-menu`
+- **Click to open**: Se activa con click (diferente de ContextMenu que usa right-click)
+- **Auto positioning**: Portal con posicionamiento automático
+- **Collision detection**: Evita salirse del viewport
+- **Auto-close**: Cierra al seleccionar item (excepto checkboxes/radios)
+- **Focus trap**: Mientras está abierto, focus queda dentro del menú
+- **Portal rendering**: Content se renderiza en `document.body` por defecto
+- **SVG auto-sizing**: Iconos automáticamente `size-4` y color muted
+- **Inset support**: `inset` prop agrega `pl-8` para alinear con items con iconos
+- **ChevronRightIcon**: Incluido automáticamente en SubTriggers
+- **CheckIcon/CircleIcon**: Incluidos automáticamente en CheckboxItem/RadioItem
+- **Variant destructive**: SVGs ignoran color muted y usan `text-destructive`
+- **Default sideOffset**: 4px de distancia desde trigger
+
+## Posicionamiento
+
+Control completo del posicionamiento del menú:
+
+```tsx
+<DropdownMenuContent
+  align="end" // "start" | "center" | "end"
+  side="bottom" // "top" | "right" | "bottom" | "left"
+  sideOffset={8} // distancia desde trigger
+  alignOffset={-4} // offset horizontal
+  className="w-64" // ancho custom
+>
+  {/* ... */}
+</DropdownMenuContent>
+```
+
+**Ejemplos comunes**:
+
+- User menu (top-right avatar): `align="end"`
+- Actions menu (more button): `align="end"`
+- Navigation menu: `align="start"`
+
+## Troubleshooting
+
+**Menú no aparece**: Verifica que DropdownMenuTrigger tenga `asChild` si usas Button custom  
+**Items no responden a click**: Usa `onSelect` en lugar de `onClick`  
+**Iconos mal alineados**: Usa `inset` en items sin iconos cuando otros sí tienen  
+**Menú no cierra al seleccionar**: CheckboxItems y RadioItems no cierran automáticamente (comportamiento esperado)  
+**Submenú no abre**: Verifica que estés usando `DropdownMenuSub` + `DropdownMenuSubTrigger` + `DropdownMenuSubContent`  
+**Shortcuts no ejecutan**: `DropdownMenuShortcut` es solo visual, implementa lógica en `onSelect`  
+**Focus se pierde al cerrar**: Usa `onCloseAutoFocus` para control custom del focus  
+**Posición incorrecta**: Verifica `align` y `side` props, ajusta con `sideOffset` y `alignOffset`  
+**Trigger no muestra estado**: Radix no cambia apariencia del trigger automáticamente, usa estado controlado
+
+## Diferencias con ContextMenu
+
+| Aspecto              | DropdownMenu                | ContextMenu           |
+| -------------------- | --------------------------- | --------------------- |
+| **Activación**       | Click izquierdo             | Click derecho         |
+| **Trigger**          | Botón/elemento visible      | Área target           |
+| **Uso común**        | Menús de acción, navegación | Acciones contextuales |
+| **Indicador visual** | Botón con chevron           | Sin indicador         |
+| **Posicionamiento**  | Relativo al trigger         | Posición del cursor   |
+
+## Referencias
+
+- **Radix UI Dropdown Menu**: https://www.radix-ui.com/primitives/docs/components/dropdown-menu
+- **shadcn/ui Dropdown Menu**: https://ui.shadcn.com/docs/components/dropdown-menu
+- **ARIA Menu Pattern**: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/