@ojiepermana/angular 22.1.11 → 22.1.12

package/component/date-picker/README.md

@@ -0,0 +1,202 @@
+# Date Picker
+
+Popup ISO-date input backed by the local native `Calendar` primitive and a CDK overlay.
+
+The upstream shadcn Date Picker is composed from Popover and Calendar. This Angular library exposes `DatePicker` as the app-level wrapper while preserving the same product behavior: an input trigger, a calendar popup, selected state, and date constraints.
+
+## Import
+
+```ts
+import { DatePickerComponent } from '@ojiepermana/angular/component/date-picker';
+import { LabelComponent } from '@ojiepermana/angular/component/label';
+```
+
+## Usage
+
+Pair the picker with a visible label through the `id` input, then bind the selected date through the signal model.
+
+```html
+<label Label for="date-picker-demo">Date</label>
+<DatePicker id="date-picker-demo" class="w-72" [(value)]="date" placeholder="Pick a date" />
+```
+
+The component also implements `ControlValueAccessor`, so it can be used with reactive forms or `ngModel`.
+
+## Common patterns
+
+### Basic
+
+```html
+<label Label for="date-picker-simple">Date</label>
+<DatePicker id="date-picker-simple" class="w-44" [(value)]="basicDate" placeholder="Pick a date" />
+```
+
+### Coordinated range
+
+Use two date pickers when the product needs a start and end date but does not need a dedicated range-calendar primitive.
+
+```html
+<div class="grid gap-4 sm:grid-cols-2">
+  <div class="grid gap-2">
+    <label Label for="date-range-start">Start date</label>
+    <DatePicker id="date-range-start" [(value)]="rangeStart" [max]="rangeEnd()" />
+  </div>
+  <div class="grid gap-2">
+    <label Label for="date-range-end">End date</label>
+    <DatePicker id="date-range-end" [(value)]="rangeEnd" [min]="rangeStart()" />
+  </div>
+</div>
+```
+
+### Date of birth
+
+Use `startView="multi-year"` and `startAt` for dates that are usually far away from the current month.
+
+```html
+<label Label for="date-picker-birth">Date of birth</label>
+<DatePicker
+  id="date-picker-birth"
+  class="w-48"
+  [(value)]="birthDate"
+  placeholder="Select date"
+  [startAt]="birthStartAt"
+  startView="multi-year"
+/>
+```
+
+### Date plus time
+
+Pair the date picker with a native `input[type="time"]` for date-time forms.
+
+```html
+<div class="grid gap-4 sm:grid-cols-[minmax(0,12rem)_8rem]">
+  <div class="grid gap-2">
+    <label Label for="date-picker-time-date">Date</label>
+    <DatePicker id="date-picker-time-date" [(value)]="timeDate" />
+  </div>
+  <div class="grid gap-2">
+    <label Label for="date-picker-time-input">Time</label>
+    <input id="date-picker-time-input" Input type="time" step="1" [value]="timeValue()" />
+  </div>
+</div>
+```
+
+### Disabled dates
+
+Use `min`, `max`, and `dateFilter` to prevent invalid choices in the calendar before submit.
+
+```ts
+readonly minBookingDate = new Date(2026, 0, 1);
+readonly maxBookingDate = new Date(2026, 11, 31);
+readonly weekdayFilter = (date: Date | null): boolean => {
+  const day = date?.getDay();
+  return day !== 0 && day !== 6;
+};
+```
+
+```html
+<DatePicker
+  id="date-picker-subscription"
+  [(value)]="subscriptionDate"
+  [min]="minBookingDate"
+  [max]="maxBookingDate"
+  [dateFilter]="weekdayFilter"
+/>
+```
+
+### RTL
+
+Set `dir="rtl"` on a wrapping container or at the application shell. The picker follows the surrounding direction.
+
+```html
+<div dir="rtl" lang="ar" class="grid max-w-xs gap-2 text-right">
+  <label Label for="date-picker-rtl">Date</label>
+  <DatePicker id="date-picker-rtl" [(value)]="rtlDate" placeholder="Pick a date" />
+</div>
+```
+
+## API reference
+
+| Input / Model          | Type                                | Default              |
+| ---------------------- | ----------------------------------- | -------------------- |
+| `value`                | `Date \| null`                      | `null`               |
+| `id`                   | `string \| null`                    | `null`               |
+| `placeholder`          | `string`                            | `'Pick a date'`      |
+| `required`             | `boolean`                           | `false`              |
+| `min`                  | `Date \| null`                      | `null`               |
+| `max`                  | `Date \| null`                      | `null`               |
+| `startAt`              | `Date \| null`                      | `null`               |
+| `startView`            | `'month' \| 'year' \| 'multi-year'` | `'month'`            |
+| `touchUi`              | `boolean`                           | `false`              |
+| `dateFilter`           | `(date: Date \| null) => boolean`   | `null`               |
+| `panelClass`           | `string \| string[]`                | `'datepicker-panel'` |
+| `panelAriaLabel`       | `string`                            | `'Choose a date'`    |
+| `invalidFormatMessage` | `string`                            | ISO-format guidance  |
+| `aria-label`           | `string \| null`                    | `null`               |
+| `aria-labelledby`      | `string \| null`                    | `null`               |
+| `aria-describedby`     | `string \| null`                    | `null`               |
+| `disabled`             | `boolean`                           | `false`              |
+| `class`                | `string`                            | `''`                 |
+
+## Validation
+
+The picker is a validator as well as a value accessor, so a draft the field refuses is a draft the
+form refuses. The rejected text stays in the input — the control keeps the last date it successfully
+committed, and turns invalid until the draft parses and passes the constraints.
+
+| Error key    | Payload                       | Raised when                                    |
+| ------------ | ----------------------------- | ---------------------------------------------- |
+| `dateParse`  | `{ text: string }`            | The committed draft is not a `YYYY-MM-DD` date |
+| `dateMin`    | `{ min: Date, actual: Date }` | The date falls before `min` (compared by day)  |
+| `dateMax`    | `{ max: Date, actual: Date }` | The date falls after `max` (compared by day)   |
+| `dateFilter` | `{ actual: Date }`            | `dateFilter` returns `false` for the date      |
+
+A committed value is re-checked against `min`, `max`, and `dateFilter` too, so a date written into
+the control programmatically cannot slip past the same constraints the field enforces. An empty
+draft in a `required` picker commits as `dateParse` with empty text; pair the picker with
+`Validators.required` when the form should name that case itself.
+
+```ts
+readonly bookingDate = new FormControl<Date | null>(null);
+
+readonly bookingError = computed(() => {
+  const errors = this.bookingDate.errors;
+  return errors?.['dateMax'] ? 'Pick a date inside the booking window.' : null;
+});
+```
+
+## Styling and theming
+
+The host accepts `class` for width and layout utilities. The native input is full width, so classes such as `w-44`, `w-72`, and `w-full` should be placed on `DatePicker`.
+
+The popup panel defaults to `datepicker-panel`, and calendar colors come from the shared popover, foreground, primary, and ring tokens.
+
+## Accessibility
+
+- Pair the date picker with a visible label using the `id` input, or provide `aria-label` / `aria-labelledby`.
+- The input and toggle expose `aria-controls`, `aria-expanded`, and `aria-haspopup`; the labelled dialog moves focus to the calendar's single roving tab stop.
+- Invalid typed drafts remain visible and are associated with a polite error message (`role="status"`, one live-region semantic rather than two) instead of being silently replaced.
+- Use constraints such as `min`, `max`, and `dateFilter` when dates are not selectable.
+- Keep the visible label specific, such as `Start date`, `End date`, or `Subscription date`.
+
+## Keyboard interactions
+
+- Tab moves focus to the date input and toggle button.
+- Enter or Space on the toggle opens the calendar popup.
+- Arrow keys navigate dates while the calendar is open.
+- Enter selects the focused date.
+- Escape closes the popup and returns focus to the trigger.
+
+## Angular notes
+
+- Dates use the built-in ISO `YYYY-MM-DD` parser and native `Date` values; no Material date adapter is required.
+- Use `[(value)]` when binding to a signal-backed `Date | null` value.
+- Use the component as a CVA inside Angular forms when validation and form submission belong to a `FormControl`; it registers as an `NG_VALIDATORS` provider too, so refused drafts show up as control errors.
+- `startView="multi-year"` is useful for birthdays and other far-past dates.
+- For range selection today, coordinate two `DatePicker` instances with reciprocal `min` and `max` bindings.
+
+## Source parity
+
+This Angular implementation follows the current shadcn Date Picker information architecture while translating React Popover plus Calendar composition into the local native Calendar/CDK-overlay wrapper.
+
+The upstream Range Picker example is represented as two coordinated `DatePicker` controls rather than a single range-calendar API. The upstream Natural Language example can be built by parsing text into a `Date | null` value and binding that value to `DatePicker`.

package/component/dialog/README.md

@@ -0,0 +1,276 @@
+# 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>
+```
+
+### Backdrop appearance
+
+The area outside the surface is dimmed by default (`backdrop="dim"`), using the shared
+`--overlay-backdrop` theme token so it recolors with the active theme and light/dark mode. Switch
+to a frosted overlay with `backdrop="blur"`, or disable dimming entirely with
+`backdrop="transparent"` when the dialog should float over a fully visible page.
+
+```html
+<!-- Dimmed (default) -->
+<dialog [(open)]="open">…</dialog>
+
+<!-- Frosted blur behind the surface -->
+<dialog [(open)]="open" backdrop="blur">…</dialog>
+
+<!-- No dimming; page stays fully visible -->
+<dialog [(open)]="open" backdrop="transparent">…</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`    |
+| `backdrop`             | `'dim' \| 'blur' \| 'transparent'` | `'dim'`   |
+| `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/component/drawer/README.md

@@ -0,0 +1,147 @@
+# 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.