@ojiepermana/angular-component 22.0.27

package/dialog/README.md

@@ -0,0 +1,235 @@
+# Dialog
+
+Displays a modal surface over the current page, traps focus while open, and restores focus to the previously active element when it closes.
+
+Use Dialog for confirmation flows, compact forms, link sharing, and long-form review tasks that should keep the user in the current context.
+
+## Import
+
+```ts
+import { ButtonComponent } from '@ojiepermana/angular-component/button';
+import {
+  DialogCloseDirective,
+  DialogComponent,
+  DialogContentComponent,
+  DialogDescriptionComponent,
+  DialogFooterComponent,
+  DialogHeaderComponent,
+  DialogTitleComponent,
+} from '@ojiepermana/angular-component/dialog';
+import { InputComponent } from '@ojiepermana/angular-component/input';
+import { LabelComponent } from '@ojiepermana/angular-component/label';
+```
+
+## Composition
+
+The Angular composition tracks the shadcn structure, with one intentional mapping difference: shadcn `DialogTrigger` becomes any external control that toggles the `open` signal.
+
+```text
+button[Button] (external trigger; sets the open signal)
+Dialog
+├── built-in close button (optional)
+├── DialogHeader
+│   ├── DialogTitle
+│   └── DialogDescription
+├── DialogContent (optional body wrapper)
+└── DialogFooter
+    └── button[DialogClose] (optional custom close action)
+```
+
+## Basic usage
+
+Use an external button or link to toggle the `open` signal, then declare the dialog structure inside `Dialog`.
+
+```html
+<button type="button" Button variant="outline" (click)="open.set(true)">Edit profile</button>
+
+<dialog [(open)]="open" aria-labelledby="dialog-title" aria-describedby="dialog-description" class="sm:max-w-sm">
+  <DialogHeader>
+    <DialogTitle id="dialog-title">Edit profile</DialogTitle>
+    <DialogDescription id="dialog-description">
+      Make changes to your profile here. Click save when you are done.
+    </DialogDescription>
+  </DialogHeader>
+
+  <DialogContent class="grid gap-4 py-2">
+    <div class="grid gap-2">
+      <label Label for="name">Name</label>
+      <input Input id="name" value="Pedro Duarte" />
+    </div>
+    <div class="grid gap-2">
+      <label Label for="username">Username</label>
+      <input Input id="username" value="@peduarte" />
+    </div>
+  </DialogContent>
+
+  <DialogFooter>
+    <button type="button" Button variant="outline" DialogClose>Cancel</button>
+    <button type="button" Button (click)="open.set(false)">Save changes</button>
+  </DialogFooter>
+</dialog>
+```
+
+## Common patterns
+
+### Destructive confirmation
+
+Use a short title, short body copy, and explicit cancel/confirm actions for destructive flows.
+
+```html
+<button type="button" Button variant="destructive" (click)="confirmOpen.set(true)">Delete project</button>
+
+<dialog [(open)]="confirmOpen">
+  <DialogHeader>
+    <DialogTitle>Delete this project?</DialogTitle>
+    <DialogDescription> This action cannot be undone. This permanently deletes your project. </DialogDescription>
+  </DialogHeader>
+  <DialogFooter>
+    <button type="button" Button variant="outline" DialogClose>Cancel</button>
+    <button type="button" Button variant="destructive" (click)="confirmOpen.set(false)">Delete</button>
+  </DialogFooter>
+</dialog>
+```
+
+### Custom close button
+
+Hide the built-in corner close control with `[showCloseButton]="false"` and place `button[DialogClose]` wherever dismissal should live.
+
+```html
+<dialog [(open)]="shareOpen" [showCloseButton]="false" class="sm:max-w-md">
+  <DialogHeader>
+    <DialogTitle>Share link</DialogTitle>
+    <DialogDescription> Anyone who has this link can view this workspace. </DialogDescription>
+  </DialogHeader>
+  <DialogContent class="grid gap-4 py-2">
+    <div class="grid gap-2">
+      <label Label for="share-link">Link</label>
+      <input Input id="share-link" readonly value="https://ui.shadcn.com/docs/components/radix/dialog" />
+    </div>
+  </DialogContent>
+  <DialogFooter class="sm:justify-start">
+    <button type="button" Button DialogClose>Close</button>
+  </DialogFooter>
+</dialog>
+```
+
+### No close button
+
+Use `[showCloseButton]="false"` without an internal close action when Escape and backdrop dismissal are enough.
+
+```html
+<dialog [(open)]="noCloseOpen" [showCloseButton]="false">
+  <DialogHeader>
+    <DialogTitle>No Close Button</DialogTitle>
+    <DialogDescription>
+      Dismiss this dialog with Escape, the backdrop, or another action you control.
+    </DialogDescription>
+  </DialogHeader>
+</dialog>
+```
+
+### Sticky footer for long content
+
+Move the scroll region into `DialogContent` and keep the footer outside that overflow container so primary actions remain visible.
+
+```html
+<dialog [(open)]="stickyOpen" [showCloseButton]="false" class="max-h-[85vh] overflow-hidden p-0 sm:max-w-lg">
+  <DialogHeader class="px-6 pt-6">
+    <DialogTitle>Sticky Footer</DialogTitle>
+    <DialogDescription>Keep actions visible while the content scrolls.</DialogDescription>
+  </DialogHeader>
+  <DialogContent class="max-h-[45vh] overflow-y-auto px-6 pb-6">
+    <!-- long content -->
+  </DialogContent>
+  <DialogFooter class="border-t border-border bg-background px-6 py-4 sm:justify-start">
+    <button type="button" Button variant="outline" DialogClose>Close</button>
+    <button type="button" Button (click)="stickyOpen.set(false)">Save changes</button>
+  </DialogFooter>
+</dialog>
+```
+
+### RTL
+
+Wrap the trigger and dialog in a `dir="rtl"` container or set direction globally in the app shell.
+
+```html
+<div dir="rtl" lang="ar" class="text-right">
+  <button type="button" Button variant="outline" (click)="rtlOpen.set(true)">فتح الحوار</button>
+
+  <dialog [(open)]="rtlOpen" [showCloseButton]="false" class="sm:max-w-sm">
+    <DialogHeader>
+      <DialogTitle>تعديل الملف الشخصي</DialogTitle>
+      <DialogDescription> قم بإجراء تغييرات على ملفك الشخصي هنا. انقر فوق حفظ عند الانتهاء. </DialogDescription>
+    </DialogHeader>
+    <DialogContent class="grid gap-4 py-2">
+      <div class="grid gap-2">...</div>
+      <div class="grid gap-2">...</div>
+    </DialogContent>
+    <DialogFooter>
+      <button type="button" Button variant="outline" DialogClose>إلغاء</button>
+      <button type="button" Button (click)="rtlOpen.set(false)">حفظ التغييرات</button>
+    </DialogFooter>
+  </dialog>
+</div>
+```
+
+## API reference
+
+### `DialogComponent`
+
+| Input                  | Type             | Default   |
+| ---------------------- | ---------------- | --------- |
+| `open` (model)         | `boolean`        | `false`   |
+| `closeOnEscape`        | `boolean`        | `true`    |
+| `closeOnBackdropClick` | `boolean`        | `true`    |
+| `showCloseButton`      | `boolean`        | `true`    |
+| `closeButtonLabel`     | `string`         | `'Close'` |
+| `aria-labelledby`      | `string \| null` | `null`    |
+| `aria-describedby`     | `string \| null` | `null`    |
+| `class`                | `string`         | `''`      |
+
+Output: `openedChange: boolean`. Method: `close()`.
+
+### Parts
+
+| Part                  | Purpose                                                  |
+| --------------------- | -------------------------------------------------------- |
+| `DialogHeader`        | Title and description wrapper                            |
+| `DialogTitle`         | Primary dialog label                                     |
+| `DialogDescription`   | Supporting copy announced by assistive tech              |
+| `DialogContent`       | Optional body wrapper for forms, grids, and scroll areas |
+| `DialogFooter`        | Action row                                               |
+| `button[DialogClose]` | Custom close action mapped to shadcn `DialogClose`       |
+
+Lower-level behavior is based on the Radix Dialog pattern: <https://www.radix-ui.com/primitives/docs/components/dialog#api-reference>.
+
+## Styling and theming
+
+The dialog surface uses the shared theme tokens for background, border, foreground, and ring colors. Pass `class` to `Dialog` when you need to adjust width, max height, overflow strategy, or padding for a specific modal pattern.
+
+Use `DialogContent` and `DialogFooter` classes to create scroll regions, sticky action rows, or wider content layouts without forking the primitive.
+
+## Accessibility
+
+- The surface renders with `role="dialog"` and `aria-modal="true"`.
+- Focus is trapped inside with `FocusTrap` from `@angular/cdk/a11y`.
+- Focus returns to the previously active element when the dialog closes.
+- Escape and backdrop dismissal are enabled by default but can be disabled for stricter flows.
+- Keep titles and descriptions concise so screen readers announce useful context immediately.
+
+## Keyboard interactions
+
+- `Tab` and `Shift+Tab` stay inside the dialog while it is open.
+- `Escape` closes the dialog unless `closeOnEscape` is disabled.
+- Native button activation handles `Enter` and `Space` for dialog actions.
+
+## Angular notes
+
+- This implementation intentionally maps shadcn `DialogTrigger` to an external control that owns the `open` signal.
+- `button[DialogClose]` is the Angular-friendly equivalent of shadcn `DialogClose` for internal dismissal actions.
+- Seed open state with a signal in the owning component and keep the dialog content declarative.
+- Hide the built-in close affordance with `[showCloseButton]="false"` when the footer or body owns dismissal explicitly.
+
+## Source parity
+
+This Angular implementation follows the shadcn Dialog information architecture and examples while translating the interaction model to Angular selectors, signal-driven state, and explicit ownership of the trigger outside the modal content.

package/drawer/README.md

@@ -0,0 +1,145 @@
+# Drawer
+
+Bottom-first modal drawer built on the local Sheet overlay primitive. It mirrors the shadcn Drawer composition while using Angular signals and explicit standalone imports.
+
+## Import
+
+```ts
+import { ButtonComponent } from '@ojiepermana/angular-component/button';
+import {
+  DrawerCloseDirective,
+  DrawerComponent,
+  DrawerContentComponent,
+  DrawerDescriptionComponent,
+  DrawerFooterComponent,
+  DrawerHeaderComponent,
+  DrawerTitleComponent,
+} from '@ojiepermana/angular-component/drawer';
+```
+
+## Usage
+
+```ts
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ButtonComponent } from '@ojiepermana/angular-component/button';
+import {
+  DrawerCloseDirective,
+  DrawerComponent,
+  DrawerDescriptionComponent,
+  DrawerFooterComponent,
+  DrawerHeaderComponent,
+  DrawerTitleComponent,
+} from '@ojiepermana/angular-component/drawer';
+
+@Component({
+  selector: 'app-drawer-example',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ButtonComponent,
+    DrawerCloseDirective,
+    DrawerComponent,
+    DrawerDescriptionComponent,
+    DrawerFooterComponent,
+    DrawerHeaderComponent,
+    DrawerTitleComponent,
+  ],
+  template: `
+    <button type="button" Button variant="outline" (click)="open.set(true)">Open Drawer</button>
+
+    <Drawer [(open)]="open" aria-labelledby="drawer-title" aria-describedby="drawer-description">
+      <div class="mx-auto w-full max-w-sm">
+        <DrawerHeader>
+          <DrawerTitle id="drawer-title">Move Goal</DrawerTitle>
+          <DrawerDescription id="drawer-description">Set your daily activity goal.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter>
+          <button type="button" Button>Submit</button>
+          <button type="button" Button variant="outline" DrawerClose>Cancel</button>
+        </DrawerFooter>
+      </div>
+    </Drawer>
+  `,
+})
+export class DrawerExampleComponent {
+  protected readonly open = signal(false);
+}
+```
+
+## Common Patterns
+
+### Sides
+
+Drawer defaults to `bottom`, matching the common shadcn and Vaul pattern. Set `side` when the drawer should enter from a different edge.
+
+```html
+<Drawer [(open)]="open" side="right" aria-labelledby="drawer-side-title">
+  <DrawerHeader>
+    <DrawerTitle id="drawer-side-title">Scrollable Content</DrawerTitle>
+  </DrawerHeader>
+  <DrawerContent class="max-h-[50vh] overflow-y-auto px-1">
+    <!-- long content -->
+  </DrawerContent>
+</Drawer>
+```
+
+### Responsive Dialog
+
+Use a desktop breakpoint in the owning component and render Dialog for larger viewports, Drawer for smaller viewports. Keep both surfaces bound to the same `open` signal so trigger and submit actions stay consistent.
+
+```html
+@if (isDesktop()) {
+<dialog [(open)]="open">...</dialog>
+} @else {
+<Drawer [(open)]="open">...</Drawer>
+}
+```
+
+## API Reference
+
+### DrawerComponent
+
+| Input                  | Type                                     | Default                 |
+| ---------------------- | ---------------------------------------- | ----------------------- |
+| `open`                 | `boolean` model                          | `false`                 |
+| `side`                 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` for `Drawer` |
+| `closeOnEscape`        | `boolean`                                | `true`                  |
+| `closeOnBackdropClick` | `boolean`                                | `true`                  |
+| `aria-labelledby`      | `string \| null`                         | `null`                  |
+| `aria-describedby`     | `string \| null`                         | `null`                  |
+| `class`                | `string`                                 | empty string            |
+
+### Parts
+
+| Part                                    | Purpose                                                                              |
+| --------------------------------------- | ------------------------------------------------------------------------------------ |
+| `DrawerHeader`                          | Title and description wrapper.                                                       |
+| `DrawerTitle`                           | Accessible title. Provide an `id` and connect it with `aria-labelledby`.             |
+| `DrawerDescription`                     | Supporting text. Provide an `id` and connect it with `aria-describedby` when useful. |
+| `DrawerContent`                         | Optional scroll/body region inside the surface.                                      |
+| `DrawerFooter`                          | Action row.                                                                          |
+| `button[DrawerClose]`, `a[DrawerClose]` | Projected close action equivalent to shadcn `DrawerClose`.                           |
+
+## Styling And Theming
+
+The drawer uses the same theme tokens as Sheet: `bg-background`, `border-border`, `text-foreground`, and `text-muted-foreground`. Pass `class` to tune dimensions such as `max-h-[85vh]`, `sm:max-w-md`, or side-specific scroll behavior.
+
+## Accessibility
+
+- The surface renders with `role="dialog"` and `aria-modal="true"`.
+- Focus is trapped inside the CDK overlay while open and restored to the previously focused element on close.
+- Provide `aria-labelledby` and `aria-describedby` when the drawer contains a title and description.
+- Use native buttons for open, submit, and close actions.
+
+## Keyboard Interactions
+
+- `Tab` and `Shift+Tab` move within the focus-trapped drawer content.
+- `Escape` closes the drawer when `closeOnEscape` is `true`.
+- Enter and Space activate native buttons, including `button[DrawerClose]`.
+
+## Angular Notes
+
+The Angular Drawer deliberately uses an external trigger button and `[(open)]` signal binding instead of a `DrawerTrigger` component. This keeps ownership of state explicit and avoids hidden context wiring across overlay portals. `DrawerComponent` is exported as an alias over the same implementation as `SheetComponent`, so fixes to focus management, backdrop dismissal, and edge positioning are shared.
+
+## Source Parity
+
+shadcn Drawer is built on Vaul and includes drag gestures and scale-background options. This Angular version maps the core modal drawer behavior to CDK Overlay and FocusTrap: bottom-first direction, side selection, focus trapping, Escape/backdrop dismissal, close actions, scrollable content, responsive dialog composition, and RTL-friendly content. It does not implement Vaul drag gestures.

package/dropdown-menu/README.md

@@ -0,0 +1,311 @@
+# Dropdown Menu
+
+Accessible menu rendered in a CDK overlay with keyboard navigation (arrow keys,
+Home/End, type-ahead, Escape).
+
+This Angular implementation follows the shadcn Dropdown Menu information architecture while mapping the React root
+component to an explicit trigger directive and projected menu template.
+
+## Import
+
+```ts
+import {
+  MenuCheckboxItemComponent,
+  MenuTriggerDirective,
+  MenuContentDirective,
+  MenuGroupComponent,
+  MenuSurfaceComponent,
+  MenuItemComponent,
+  MenuRadioGroupComponent,
+  MenuRadioItemComponent,
+  MenuSeparatorComponent,
+  MenuLabelComponent,
+  MenuShortcutComponent,
+} from '@ojiepermana/angular-component/dropdown-menu';
+```
+
+## Usage
+
+```html
+<button
+  Button
+  type="button"
+  variant="outline"
+  #accountTrigger="MenuTrigger"
+  [MenuTrigger]="menu"
+  side="bottom"
+  align="end">
+  Open
+</button>
+
+<ng-template MenuContent #menu="MenuContent">
+  <MenuSurface class="w-56">
+    <MenuGroup>
+      <MenuLabel>My account</MenuLabel>
+      <button MenuItem type="button" (selected)="onProfile(); accountTrigger.close()">
+        Profile
+        <span MenuShortcut>⌘P</span>
+      </button>
+      <button MenuItem type="button" (selected)="onSettings(); accountTrigger.close()">Settings</button>
+    </MenuGroup>
+    <MenuSeparator />
+    <MenuGroup>
+      <button MenuItem type="button" disabled>Disabled</button>
+      <button MenuItem type="button" variant="destructive" (selected)="onSignOut(); accountTrigger.close()">
+        Sign out
+      </button>
+    </MenuGroup>
+  </MenuSurface>
+</ng-template>
+```
+
+Use the trigger export when a standard command row should dismiss the overlay. Checkbox and radio rows can stay open so
+the user can adjust multiple settings in one pass.
+
+## Composition
+
+```text
+button[Button][MenuTrigger]
+└── ng-template[MenuContent]
+    └── MenuSurface
+        ├── MenuGroup
+        │   ├── MenuLabel
+        │   ├── button[MenuItem]
+        │   └── button[MenuItem][MenuTrigger]
+        │       └── ng-template[MenuContent]
+        │           └── MenuSurface
+        ├── MenuSeparator
+        ├── button[MenuCheckboxItem]
+        └── MenuRadioGroup
+            └── button[MenuRadioItem]
+```
+
+## Common patterns
+
+### Basic account menu
+
+```html
+<button Button type="button" variant="outline" #menuTrigger="MenuTrigger" [MenuTrigger]="menu">Open</button>
+
+<ng-template MenuContent #menu="MenuContent">
+  <MenuSurface class="w-56">
+    <MenuGroup>
+      <MenuLabel>My Account</MenuLabel>
+      <button MenuItem type="button" (selected)="menuTrigger.close()">Profile</button>
+      <button MenuItem type="button" (selected)="menuTrigger.close()">Billing</button>
+      <button MenuItem type="button" (selected)="menuTrigger.close()">Settings</button>
+    </MenuGroup>
+    <MenuSeparator />
+    <MenuGroup>
+      <button MenuItem type="button" (selected)="menuTrigger.close()">GitHub</button>
+      <button MenuItem type="button" (selected)="menuTrigger.close()">Support</button>
+      <button MenuItem type="button" [disabled]="true">API</button>
+    </MenuGroup>
+  </MenuSurface>
+</ng-template>
+```
+
+### Submenu
+
+Map shadcn `DropdownMenuSub` to `MenuTrigger` on a `button[MenuItem]`.
+
+```html
+<ng-template MenuContent #inviteUsersMenu="MenuContent">
+  <MenuSurface class="w-48">
+    <button MenuItem type="button">Email</button>
+    <button MenuItem type="button">Message</button>
+    <button MenuItem type="button">Calendar invite</button>
+  </MenuSurface>
+</ng-template>
+
+<MenuSurface class="w-56">
+  <MenuGroup>
+    <button MenuItem type="button">Team</button>
+    <button MenuItem type="button" [MenuTrigger]="inviteUsersMenu" side="right" align="start">
+      Invite users
+      <span class="ml-auto text-xs text-muted-foreground">›</span>
+    </button>
+  </MenuGroup>
+</MenuSurface>
+```
+
+### Checkboxes
+
+Use checkbox rows when the menu exposes independent toggles.
+
+```ts
+const showStatusBar = signal(true);
+const showActivityBar = signal(false);
+const showPanel = signal(false);
+```
+
+```html
+<MenuSurface class="w-44">
+  <MenuGroup>
+    <MenuLabel>Appearance</MenuLabel>
+    <button MenuCheckboxItem type="button" [(checked)]="showStatusBar">Status Bar</button>
+    <button MenuCheckboxItem type="button" [(checked)]="showActivityBar">Activity Bar</button>
+    <button MenuCheckboxItem type="button" [(checked)]="showPanel">Panel</button>
+  </MenuGroup>
+</MenuSurface>
+```
+
+### Radio group
+
+Use a radio group for one exclusive choice.
+
+```ts
+const panelPosition = signal<'top' | 'bottom' | 'right'>('bottom');
+```
+
+```html
+<MenuSurface class="w-44">
+  <MenuLabel [inset]="true">Panel Position</MenuLabel>
+  <MenuRadioGroup [(value)]="panelPosition">
+    <button MenuRadioItem type="button" value="top">Top</button>
+    <button MenuRadioItem type="button" value="bottom">Bottom</button>
+    <button MenuRadioItem type="button" value="right">Right</button>
+  </MenuRadioGroup>
+</MenuSurface>
+```
+
+### Shortcuts and icons
+
+Project shortcut text and inline icons directly into the row content.
+
+```html
+<MenuSurface class="w-56">
+  <button MenuItem type="button">
+    <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24">...</svg>
+    Profile
+    <span MenuShortcut>⇧⌘P</span>
+  </button>
+  <button MenuItem type="button">
+    <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24">...</svg>
+    Billing
+    <span MenuShortcut>⌘B</span>
+  </button>
+</MenuSurface>
+```
+
+### Avatar trigger composition
+
+Also import the avatar entrypoint when the trigger should be an account avatar.
+
+```ts
+import { AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@ojiepermana/angular-component/avatar';
+```
+
+```html
+<button
+  Button
+  type="button"
+  variant="ghost"
+  size="icon"
+  class="h-10 w-10 rounded-full p-0"
+  [MenuTrigger]="accountMenu"
+  align="end">
+  <Avatar>
+    <AvatarImage src="https://github.com/shadcn.png" alt="Ada Lovelace" />
+    <AvatarFallback>AL</AvatarFallback>
+  </Avatar>
+</button>
+```
+
+### RTL
+
+Set `dir="rtl"` and `lang` on the surface, and prefer `side="left"` when nested content should open toward the visual
+start edge.
+
+```html
+<ng-template MenuContent #rtlAccountMenu="MenuContent">
+  <MenuSurface dir="rtl" lang="ar" class="w-44 text-right">
+    <button MenuItem type="button">الملف الشخصي</button>
+    <button MenuItem type="button">الفوترة</button>
+  </MenuSurface>
+</ng-template>
+
+<MenuSurface dir="rtl" lang="ar" class="w-56 text-right">
+  <button MenuItem type="button" [MenuTrigger]="rtlAccountMenu" side="left" align="start">
+    الحساب
+    <span class="mr-auto text-xs text-muted-foreground">‹</span>
+  </button>
+</MenuSurface>
+```
+
+## API
+
+### `[MenuTrigger]`
+
+| Input         | Type                                     | Default    |
+| ------------- | ---------------------------------------- | ---------- |
+| `MenuTrigger` | `MenuContentDirective`                   | _required_ |
+| `side`        | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` |
+| `align`       | `'start' \| 'center' \| 'end'`           | `'start'`  |
+| `disabled`    | `boolean`                                | `false`    |
+
+Output: `openedChange: boolean`. Methods: `open()`, `close()`, `toggle()`.
+
+### `ng-template[MenuContent]`
+
+Projected template wrapper for the menu surface that is consumed by `[MenuTrigger]`.
+
+### `MenuSurface`
+
+Container with `role="menu"` and arrow key navigation wired through
+`FocusKeyManager` (wrapping + type-ahead). Emits `closeRequested` on Tab.
+
+### `MenuItem`
+
+`role="menuitem"`. Inputs: `disabled`, `inset`, `class`. Output: `selected`.
+
+### `MenuCheckboxItem`
+
+`role="menuitemcheckbox"`. Inputs: `[(checked)]`, `disabled`, `variant`, `class`.
+
+### `MenuRadioGroup` and `MenuRadioItem`
+
+Use `[(value)]` on the group and `value` on each radio row. Radio items expose `role="menuitemradio"`.
+
+### Auxiliary
+
+- `MenuGroup` → structural wrapper with `role="group"`.
+- `MenuSeparator` → `role="separator"`.
+- `MenuLabel` — non-interactive label row.
+- `MenuShortcut` — right-aligned shortcut badge.
+
+## Styling and theming
+
+Pass `class` to the surface or individual rows to control width, spacing, and emphasis. Borders and separators use the
+shared theme border tokens, destructive rows use the destructive palette, and projected icons inherit the current text
+color.
+
+## Accessibility
+
+- Trigger: `aria-haspopup="menu"`, `aria-expanded` reflects state.
+- Surface: `role="menu"`, items receive `role="menuitem"`, disabled items get
+  `aria-disabled="true"`.
+- Checkbox and radio items expose `aria-checked` semantics through the relevant menuitem roles.
+- Close on outside click, Escape, or Tab. Focus returns to the trigger.
+
+## Keyboard interactions
+
+- Enter, Space, and ArrowDown on the trigger open the menu.
+- Arrow Up and Arrow Down move between enabled rows; Home and End jump to the first or last row.
+- Typeahead matches the row label text.
+- Enter and Space activate the focused row.
+
+## Angular notes
+
+- There is no React-style `DropdownMenu` root component; the root behavior is handled by `MenuTrigger` and
+  `ng-template[MenuContent]`.
+- Reuse `MenuTrigger` on `button[MenuItem]` when you need a submenu.
+- Standard command rows can dismiss the overlay explicitly through a `#menuTrigger="MenuTrigger"` template reference,
+  while checkbox and radio rows can stay open for multi-step preference changes.
+
+## Source parity
+
+This Angular entrypoint keeps the main shadcn dropdown-menu patterns: grouped commands, shortcuts, icons, nested menus,
+checkbox items, radio groups, avatar triggers, destructive rows, and RTL guidance. The shadcn page includes additional
+permutations such as checkbox-icons, radio-icons, and a very large complex menu; the local demos cover the same
+primitives through representative compositions instead of duplicating every permutation one-to-one.