@edsis/ui 0.0.2

package/README.md

@@ -0,0 +1,40 @@
+# @edsis/ui
+
+Angular library ini berada di `library/ui` dan dipublikasikan dengan nama paket `@edsis/ui`.
+
+Library ini menggunakan pola secondary entry point per folder. Import yang disarankan adalah langsung ke subpath yang dibutuhkan, misalnya `@edsis/ui/button` atau `@edsis/ui/chart/bar`.
+
+## Build
+
+Jalankan build library dengan perintah berikut:
+
+```bash
+bunx ng build ui
+```
+
+Artefak build akan ditulis ke `dist/ui`.
+
+## Penggunaan Lokal
+
+Untuk import dari workspace ini, gunakan path berikut:
+
+```bash
+@edsis/ui
+```
+
+Untuk komponen atau utilitas spesifik, gunakan subpath secondary entry point:
+
+```bash
+@edsis/ui/button
+@edsis/ui/chart/bar
+```
+
+## Unit Test
+
+Jalankan unit test library dengan perintah berikut:
+
+```bash
+bunx ng test ui --watch=false
+```
+
+Runner test di workspace ini menggunakan Vitest melalui Angular build tooling.

package/accordion/README.md

@@ -0,0 +1,195 @@
+# Accordion
+
+Displays a vertically stacked set of interactive headings that reveal one or more content panels.
+
+Use Accordion for FAQ blocks, settings groups, and progressive disclosure where content should stay in the same page flow.
+
+## Import
+
+```ts
+import {
+  AccordionComponent,
+  AccordionContentComponent,
+  AccordionItemComponent,
+  AccordionTriggerComponent,
+} from '@edsis/ui/accordion';
+```
+
+## Composition
+
+The Angular structure mirrors the shadcn and Radix composition while using Angular selectors and a native button trigger.
+
+```text
+ui-accordion
+├── ui-accordion-item
+│   ├── button[ui-accordion-trigger]
+│   └── ui-accordion-content
+└── ui-accordion-item
+    ├── button[ui-accordion-trigger]
+    └── ui-accordion-content
+```
+
+## Basic usage
+
+Use `ui-accordion` as the root, wrap each section in `ui-accordion-item`, place the clickable heading on a native button with `ui-accordion-trigger`, and project body copy into `ui-accordion-content`.
+
+Bind `[(value)]` when the parent should control the open state or seed a default open item.
+
+```html
+<ui-accordion [(value)]="openItem" type="single" class="w-full max-w-xl">
+  <ui-accordion-item value="item-1">
+    <button ui-accordion-trigger>Is it accessible?</button>
+    <ui-accordion-content>
+      Yes. The trigger and content follow the expected accordion ARIA wiring.
+    </ui-accordion-content>
+  </ui-accordion-item>
+</ui-accordion>
+```
+
+## Common patterns
+
+### Single-open FAQ
+
+Use `type="single"` when only one item should stay open at a time.
+
+```ts
+const basicOpen = signal<string | string[] | null>('item-1');
+
+<ui-accordion [(value)]="basicOpen" type="single" class="max-w-lg">
+  <ui-accordion-item value="item-1">...</ui-accordion-item>
+  <ui-accordion-item value="item-2">...</ui-accordion-item>
+  <ui-accordion-item value="item-3">...</ui-accordion-item>
+</ui-accordion>
+```
+
+### Multiple open sections
+
+Use `type="multiple"` when more than one panel should stay open. The bound value becomes a `string[]`.
+
+```ts
+const multipleOpen = signal<string[] | null>(['notifications']);
+
+<ui-accordion [(value)]="multipleOpen" type="multiple" class="max-w-lg">
+  <ui-accordion-item value="notifications">...</ui-accordion-item>
+  <ui-accordion-item value="privacy">...</ui-accordion-item>
+  <ui-accordion-item value="billing">...</ui-accordion-item>
+</ui-accordion>
+```
+
+### Disabled items
+
+Disable an individual item with `[disabled]="true"` on `ui-accordion-item`.
+
+```ts
+const disabledOpen = signal<string | string[] | null>('history');
+
+<ui-accordion [(value)]="disabledOpen" type="single" class="w-full">
+  <ui-accordion-item value="history">...</ui-accordion-item>
+  <ui-accordion-item value="premium" [disabled]="true">...</ui-accordion-item>
+  <ui-accordion-item value="email">...</ui-accordion-item>
+</ui-accordion>
+```
+
+### Bordered list
+
+Add borders on the root and the items when the accordion should read like a boxed settings list.
+
+```ts
+const borderOpen = signal<string | string[] | null>('billing');
+
+<ui-accordion [(value)]="borderOpen" type="single" class="max-w-lg rounded-lg border">
+  <ui-accordion-item value="billing" class="border-b px-4 last:border-b-0">...</ui-accordion-item>
+  <ui-accordion-item value="security" class="border-b px-4 last:border-b-0">...</ui-accordion-item>
+  <ui-accordion-item value="integrations" class="border-b px-4 last:border-b-0">...</ui-accordion-item>
+</ui-accordion>
+```
+
+### Inside a card
+
+Accordion works well inside `ui-card` when the disclosure belongs to a larger billing or account surface.
+
+```ts
+const cardOpen = signal<string | string[] | null>('plans');
+
+<ui-card class="w-full max-w-sm">
+  <ui-card-header>
+    <ui-card-title>Subscription and billing</ui-card-title>
+    <ui-card-description>Common questions about plans, payments, and cancellations.</ui-card-description>
+  </ui-card-header>
+  <ui-card-content>
+    <ui-accordion [(value)]="cardOpen" type="single">
+      <ui-accordion-item value="plans">...</ui-accordion-item>
+      <ui-accordion-item value="billing">...</ui-accordion-item>
+      <ui-accordion-item value="cancel">...</ui-accordion-item>
+    </ui-accordion>
+  </ui-card-content>
+</ui-card>
+```
+
+### RTL
+
+For right-to-left interfaces, set `dir="rtl"` on a wrapping container or manage direction globally in the app shell. The Accordion structure itself does not change.
+
+```html
+<section dir="rtl" lang="ar" class="max-w-md text-right">
+  <ui-accordion [(value)]="rtlOpen" type="single">
+    <ui-accordion-item value="item-1">...</ui-accordion-item>
+    <ui-accordion-item value="item-2">...</ui-accordion-item>
+    <ui-accordion-item value="item-3">...</ui-accordion-item>
+  </ui-accordion>
+</section>
+```
+
+## API reference
+
+### `AccordionComponent`
+
+| Input           | Type                         | Default    |
+| --------------- | ---------------------------- | ---------- |
+| `type`          | `'single' \| 'multiple'`     | `'single'` |
+| `collapsible`   | `boolean`                    | `true`     |
+| `value` (model) | `string \| string[] \| null` | `null`     |
+| `class`         | `string`                     | `''`       |
+
+### `AccordionItemComponent`
+
+| Input      | Type      | Default |
+| ---------- | --------- | ------- |
+| `value`    | `string`  | —       |
+| `disabled` | `boolean` | `false` |
+| `class`    | `string`  | `''`    |
+
+### Parts
+
+- `button[ui-accordion-trigger]` renders the interactive heading and manages `aria-controls` plus `aria-expanded`.
+- `ui-accordion-content` renders the panel region and links back to the trigger with `aria-labelledby`.
+- Lower-level primitive behavior is based on the Radix Accordion pattern: <https://www.radix-ui.com/primitives/docs/components/accordion#api-reference>.
+
+## Styling and theming
+
+Pass `class` to the root or item parts to tune width, spacing, borders, and embedded-card layouts.
+
+The component follows the shared library theme tokens, so standard utility classes such as `border`, `rounded-lg`, `bg-card`, `text-foreground`, and spacing utilities work as expected.
+
+## Accessibility
+
+- Trigger has `aria-expanded` and `aria-controls` pointing at the content id.
+- Content has `role="region"` and `aria-labelledby` pointing back at the trigger id.
+- `disabled` items remain visible but non-interactive and are marked with `aria-disabled`.
+- Keep trigger text descriptive and avoid placing nested interactive controls inside the trigger button.
+
+## Keyboard interactions
+
+- Native button activation covers Enter and Space.
+- Tab order follows the DOM order of the triggers and content.
+
+## Angular notes
+
+- The component uses Angular signal-based `model()` binding for `value`.
+- For `type="single"`, the value is a `string | null`.
+- For `type="multiple"`, the value is a `string[] | null`.
+- Seed the initial open state with a signal rather than a separate `defaultValue` prop.
+
+## Source parity
+
+This Angular implementation follows the shadcn Accordion concepts while translating the examples to Angular selectors, standalone imports, and signal-friendly bindings.

package/alert/README.md

@@ -0,0 +1,177 @@
+# Alert
+
+Displays a callout for user attention.
+
+Use Alert for inline status callouts, destructive warnings, upgrade prompts, and other situations where the message should stay anchored in the current page flow.
+
+## Import
+
+```ts
+import { AlertActionComponent, AlertComponent, AlertDescriptionComponent, AlertTitleComponent } from '@edsis/ui/alert';
+import { ButtonComponent } from '@edsis/ui/button';
+```
+
+## Composition
+
+The Angular structure mirrors the shadcn composition while leaving icon choice to the consuming app.
+
+```text
+ui-alert
+├── svg (optional icon)
+├── ui-alert-title
+├── ui-alert-description
+└── ui-alert-action (optional)
+```
+
+## Usage
+
+```html
+<ui-alert class="max-w-md">
+  <svg aria-hidden="true" class="size-4"><!-- icon --></svg>
+  <ui-alert-title>Heads up!</ui-alert-title>
+  <ui-alert-description> You can add components and dependencies to your app using the CLI. </ui-alert-description>
+</ui-alert>
+
+<ui-alert class="max-w-md">
+  <ui-alert-title>Dark mode is now available</ui-alert-title>
+  <ui-alert-description> Enable it under your profile settings to get started. </ui-alert-description>
+  <ui-alert-action>
+    <button ui-button variant="outline" size="sm">Enable</button>
+  </ui-alert-action>
+</ui-alert>
+```
+
+## Common patterns
+
+### Basic
+
+Use an optional icon plus title and description for successful or informative states.
+
+```html
+<ui-alert class="max-w-md">
+  <svg aria-hidden="true" class="size-4"><!-- success icon --></svg>
+  <ui-alert-title>Account updated successfully</ui-alert-title>
+  <ui-alert-description>
+    Your profile information has been saved. Changes will be reflected immediately.
+  </ui-alert-description>
+</ui-alert>
+```
+
+### Destructive
+
+Apply `variant="destructive"` for failures, expired sessions, and other high-priority issues.
+
+```html
+<ui-alert variant="destructive" class="max-w-md">
+  <svg aria-hidden="true" class="size-4"><!-- warning icon --></svg>
+  <ui-alert-title>Payment failed</ui-alert-title>
+  <ui-alert-description>
+    Your payment could not be processed. Please check your payment method and try again.
+  </ui-alert-description>
+</ui-alert>
+```
+
+### Action
+
+Wrap a trailing control in `ui-alert-action`. The wrapper aligns the control at the end of the message and anchors it to the top-right on wider layouts.
+
+```html
+<ui-alert class="max-w-md">
+  <ui-alert-title>Dark mode is now available</ui-alert-title>
+  <ui-alert-description> Enable it under your profile settings to get started. </ui-alert-description>
+  <ui-alert-action>
+    <button ui-button variant="default" size="sm">Enable</button>
+  </ui-alert-action>
+</ui-alert>
+```
+
+### Custom colors
+
+Pass custom classes to the root when the alert should adopt a contextual palette.
+
+```html
+<ui-alert class="max-w-md border-amber-300 bg-amber-50 text-amber-950 [&>svg]:text-amber-700">
+  <svg aria-hidden="true" class="size-4"><!-- warning icon --></svg>
+  <ui-alert-title>Your subscription will expire in 3 days.</ui-alert-title>
+  <ui-alert-description>
+    Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
+  </ui-alert-description>
+</ui-alert>
+```
+
+### RTL
+
+For right-to-left interfaces, place the alert inside a container with `dir="rtl"` or manage direction globally in the app shell.
+
+```html
+<section dir="rtl" lang="ar" class="max-w-md text-right">
+  <ui-alert>
+    <svg aria-hidden="true" class="size-4"><!-- icon --></svg>
+    <ui-alert-title>تم الدفع بنجاح</ui-alert-title>
+    <ui-alert-description>
+      تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.
+    </ui-alert-description>
+  </ui-alert>
+</section>
+```
+
+## API reference
+
+### `AlertComponent`
+
+| Input     | Type                         | Default     |
+| --------- | ---------------------------- | ----------- |
+| `variant` | `'default' \| 'destructive'` | `'default'` |
+| `class`   | `string`                     | `''`        |
+
+### `AlertTitleComponent`
+
+| Input   | Type     | Default |
+| ------- | -------- | ------- |
+| `class` | `string` | `''`    |
+
+### `AlertDescriptionComponent`
+
+| Input   | Type     | Default |
+| ------- | -------- | ------- |
+| `class` | `string` | `''`    |
+
+### `AlertActionComponent`
+
+| Input   | Type     | Default |
+| ------- | -------- | ------- |
+| `class` | `string` | `''`    |
+
+### Parts
+
+- `ui-alert-title` renders the heading of the callout.
+- `ui-alert-description` renders the supporting copy.
+- `ui-alert-action` is an optional layout wrapper for a trailing button or link.
+
+Re-export: `alertVariants` and `AlertVariant`.
+
+## Styling and theming
+
+Tokens consumed: `--border`, `--background`, `--foreground`, `--destructive`.
+Leading SVG children are auto-positioned via descendant selectors so an icon slots in cleanly without extra wrapper markup.
+
+Pass `class` to the root when you need wider layouts, custom color treatments, or embedded card styling. Pass `class` to the title, description, or action parts when a specific example needs spacing or typography overrides.
+
+## Accessibility
+
+The root has `role="alert"` so assistive technologies announce the message when
+it appears. For polite, non-interrupting messages, prefer a toast or another live-region pattern instead.
+
+When you include a call-to-action, keep the control a native `<button ui-button>` or `<a ui-button>` so standard keyboard and assistive-technology behavior remains intact.
+
+## Keyboard interactions
+
+The alert itself does not handle keyboard input. Any nested actions inherit native keyboard behavior from the projected button or link.
+
+## Angular notes
+
+The Angular version keeps the same shadcn parts while translating them to standalone imports, `input()` bindings, and utility-first host classes. Icons are application-level concerns, so bring your own icon component or inline SVG instead of expecting an icon export from the alert primitive.
+
+## Source parity
+
+This implementation follows the shadcn Alert structure and examples while adapting the API to Angular selectors, standalone imports, and the local button primitive for action content.

package/alert-dialog/README.md

@@ -0,0 +1,239 @@
+# Alert Dialog
+
+Displays a modal confirmation surface for important or destructive actions where the user is expected to respond before continuing.
+
+Use Alert Dialog for delete confirmations, permission prompts, and share or access decisions that should not dismiss accidentally on backdrop click.
+
+## Import
+
+```ts
+import {
+  AlertDialogActionComponent,
+  AlertDialogCancelComponent,
+  AlertDialogComponent,
+  AlertDialogContentComponent,
+  AlertDialogDescriptionComponent,
+  AlertDialogFooterComponent,
+  AlertDialogHeaderComponent,
+  AlertDialogMediaComponent,
+  AlertDialogTitleComponent,
+} from '@edsis/ui/alert-dialog';
+```
+
+## Composition
+
+The Angular composition keeps the shadcn structure for content and actions, with one intentional mapping difference: shadcn `AlertDialogTrigger` becomes any external control that toggles the `open` signal.
+
+```text
+button[ui-button] (external trigger; sets the open signal)
+ui-alert-dialog
+└── ui-alert-dialog-content
+    ├── ui-alert-dialog-header
+    │   ├── ui-alert-dialog-media (optional)
+    │   ├── ui-alert-dialog-title
+    │   └── ui-alert-dialog-description
+    └── ui-alert-dialog-footer
+        ├── button[ui-alert-dialog-cancel]
+        └── button[ui-alert-dialog-action]
+```
+
+## Basic usage
+
+Use an external trigger to set the `open` model, then declare the alert content inside `ui-alert-dialog`.
+
+```html
+<button type="button" ui-button variant="outline" (click)="confirmOpen.set(true)">Show Dialog</button>
+
+<ui-alert-dialog [(open)]="confirmOpen" aria-labelledby="alert-title" aria-describedby="alert-description">
+  <ui-alert-dialog-content>
+    <ui-alert-dialog-header>
+      <ui-alert-dialog-title id="alert-title">Are you absolutely sure?</ui-alert-dialog-title>
+      <ui-alert-dialog-description id="alert-description">
+        This action cannot be undone. This will permanently delete your account from our servers.
+      </ui-alert-dialog-description>
+    </ui-alert-dialog-header>
+
+    <ui-alert-dialog-footer>
+      <button type="button" ui-alert-dialog-cancel>Cancel</button>
+      <button type="button" ui-alert-dialog-action>Continue</button>
+    </ui-alert-dialog-footer>
+  </ui-alert-dialog-content>
+</ui-alert-dialog>
+```
+
+## Common patterns
+
+### Small confirmation
+
+Set `size="sm"` on `ui-alert-dialog-content` for shorter mobile-friendly confirmations.
+
+```html
+<ui-alert-dialog [(open)]="smallOpen">
+  <ui-alert-dialog-content size="sm">
+    <ui-alert-dialog-header>
+      <ui-alert-dialog-title>Allow accessory to connect?</ui-alert-dialog-title>
+      <ui-alert-dialog-description>
+        Do you want to allow the USB accessory to connect to this device?
+      </ui-alert-dialog-description>
+    </ui-alert-dialog-header>
+
+    <ui-alert-dialog-footer>
+      <button type="button" ui-alert-dialog-cancel>Don't allow</button>
+      <button type="button" ui-alert-dialog-action>Allow</button>
+    </ui-alert-dialog-footer>
+  </ui-alert-dialog-content>
+</ui-alert-dialog>
+```
+
+### Media
+
+Use `ui-alert-dialog-media` to add an icon or other leading visual treatment above the title on mobile and beside it on larger screens.
+
+```html
+<ui-alert-dialog [(open)]="shareOpen">
+  <ui-alert-dialog-content>
+    <ui-alert-dialog-header>
+      <ui-alert-dialog-media>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
+          <path d="M12 5v14" />
+          <path d="M5 12h14" />
+          <circle cx="12" cy="12" r="8" />
+        </svg>
+      </ui-alert-dialog-media>
+      <ui-alert-dialog-title>Share this project?</ui-alert-dialog-title>
+      <ui-alert-dialog-description>
+        Anyone with the link will be able to view and edit this project.
+      </ui-alert-dialog-description>
+    </ui-alert-dialog-header>
+
+    <ui-alert-dialog-footer>
+      <button type="button" ui-alert-dialog-cancel>Cancel</button>
+      <button type="button" ui-alert-dialog-action>Share</button>
+    </ui-alert-dialog-footer>
+  </ui-alert-dialog-content>
+</ui-alert-dialog>
+```
+
+### Destructive action
+
+Pass `variant="destructive"` to `ui-alert-dialog-action` when the primary action is destructive.
+
+```html
+<ui-alert-dialog [(open)]="deleteOpen">
+  <ui-alert-dialog-content size="sm">
+    <ui-alert-dialog-header>
+      <ui-alert-dialog-media class="border-destructive/20 bg-destructive/10 text-destructive">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
+          <path d="M3 6h18" />
+          <path d="M8 6V4h8v2" />
+          <path d="M8 10v6" />
+          <path d="M12 10v6" />
+          <path d="M16 10v6" />
+          <path d="M5 6l1 13h12l1-13" />
+        </svg>
+      </ui-alert-dialog-media>
+      <ui-alert-dialog-title>Delete chat?</ui-alert-dialog-title>
+      <ui-alert-dialog-description>
+        This permanently deletes the conversation and removes saved memories linked to it.
+      </ui-alert-dialog-description>
+    </ui-alert-dialog-header>
+
+    <ui-alert-dialog-footer>
+      <button type="button" ui-alert-dialog-cancel>Cancel</button>
+      <button type="button" ui-alert-dialog-action variant="destructive">Delete</button>
+    </ui-alert-dialog-footer>
+  </ui-alert-dialog-content>
+</ui-alert-dialog>
+```
+
+### RTL
+
+Wrap the trigger and dialog in a `dir="rtl"` container or manage direction globally in the app shell.
+
+```html
+<div dir="rtl" lang="ar" class="text-right">
+  <button type="button" ui-button variant="outline" (click)="rtlOpen.set(true)">إظهار الحوار</button>
+
+  <ui-alert-dialog [(open)]="rtlOpen" aria-labelledby="rtl-title" aria-describedby="rtl-description">
+    <ui-alert-dialog-content size="sm">
+      <ui-alert-dialog-header>
+        <ui-alert-dialog-title id="rtl-title">هل أنت متأكد تمامًا؟</ui-alert-dialog-title>
+        <ui-alert-dialog-description id="rtl-description">
+          لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك نهائيًا من خوادمنا.
+        </ui-alert-dialog-description>
+      </ui-alert-dialog-header>
+      <ui-alert-dialog-footer>
+        <button type="button" ui-alert-dialog-cancel>إلغاء</button>
+        <button type="button" ui-alert-dialog-action>متابعة</button>
+      </ui-alert-dialog-footer>
+    </ui-alert-dialog-content>
+  </ui-alert-dialog>
+</div>
+```
+
+## API reference
+
+### `AlertDialogComponent`
+
+| Input                  | Type      | Default   |
+| ---------------------- | --------- | --------- | ------ |
+| `open` (model)         | `boolean` | `false`   |
+| `closeOnEscape`        | `boolean` | `true`    |
+| `closeOnBackdropClick` | `boolean` | `false`   |
+| `showCloseButton`      | `boolean` | `false`   |
+| `closeButtonLabel`     | `string`  | `'Close'` |
+| `aria-labelledby`      | `string   | null`     | `null` |
+| `aria-describedby`     | `string   | null`     | `null` |
+| `class`                | `string`  | `''`      |
+
+Output: `openedChange: boolean`. Method: `close()`.
+
+### `AlertDialogContentComponent`
+
+| Input   | Type       | Default |
+| ------- | ---------- | ------- | ----------- |
+| `size`  | `'default' | 'sm'`   | `'default'` |
+| `class` | `string`   | `''`    |
+
+### Parts
+
+| Part                             | Purpose                                                            |
+| -------------------------------- | ------------------------------------------------------------------ |
+| `ui-alert-dialog-header`         | Title, optional media, and supporting copy wrapper                 |
+| `ui-alert-dialog-title`          | Primary label announced when the dialog opens                      |
+| `ui-alert-dialog-description`    | Supporting copy announced after the title                          |
+| `ui-alert-dialog-media`          | Optional icon or visual cue for the decision                       |
+| `ui-alert-dialog-footer`         | Action row                                                         |
+| `button[ui-alert-dialog-cancel]` | Secondary action with outline styling that closes the dialog       |
+| `button[ui-alert-dialog-action]` | Primary action that closes the dialog and supports button variants |
+
+Lower-level behavior is based on the Radix Alert Dialog pattern: <https://www.radix-ui.com/primitives/docs/components/alert-dialog#api-reference>.
+
+## Styling and theming
+
+The surface reuses the shared dialog overlay and theme tokens, while the action parts reuse the same `buttonVariants` definitions as `ui-button`.
+
+Pass `class` to `ui-alert-dialog` when you need custom max width or spacing, `size="sm"` to `ui-alert-dialog-content` for compact confirmations, and `class` to `ui-alert-dialog-media` when a specific tone such as destructive emphasis is needed.
+
+## Accessibility
+
+- The surface renders with `role="dialog"` and `aria-modal="true"`.
+- Focus is trapped while the alert dialog is open and restored to the previously active element when it closes.
+- Backdrop click is disabled by default so confirmations do not dismiss accidentally.
+- Keep `ui-alert-dialog-title` and `ui-alert-dialog-description` short and descriptive so assistive technologies announce useful context immediately.
+
+## Keyboard interactions
+
+- `Tab` and `Shift+Tab` stay inside the modal while it is open.
+- `Escape` closes the alert dialog unless `closeOnEscape` is disabled.
+- Native button activation handles `Enter` and `Space` for cancel and action buttons.
+
+## Angular notes
+
+- This implementation intentionally maps shadcn `AlertDialogTrigger` to any external trigger that owns the `open` signal.
+- `button[ui-alert-dialog-cancel]` and `button[ui-alert-dialog-action]` close the nearest ancestor alert dialog automatically by default.
+- Use `(click)` on the action button for side effects such as deleting or sharing, and keep `closeOnClick` enabled unless the flow needs to wait for an async result.
+
+## Source parity
+
+This Angular implementation keeps the shadcn information architecture, examples, and `size="sm"` content behavior while translating trigger ownership to Angular signals and dedicated attribute components for the footer actions.