@ojiepermana/angular 22.1.11 → 22.1.12

package/component/avatar/README.md

@@ -0,0 +1,182 @@
+# Avatar
+
+Rounded image with an automatic text fallback when the image fails to load.
+
+This Angular implementation follows the shadcn Avatar information architecture while adapting it to standalone Angular imports, signal-friendly inputs, and local menu primitives.
+
+## Import
+
+```ts
+import {
+  AvatarBadgeComponent,
+  AvatarComponent,
+  AvatarFallbackComponent,
+  AvatarGroupComponent,
+  AvatarGroupCountComponent,
+  AvatarImageComponent,
+} from '@ojiepermana/angular/component/avatar';
+```
+
+## Usage
+
+```html
+<Avatar size="lg">
+  <AvatarImage src="/me.jpg" alt="Ada Lovelace" />
+  <AvatarFallback>AL</AvatarFallback>
+  <AvatarBadge class="bg-emerald-600" aria-hidden="true"></AvatarBadge>
+</Avatar>
+```
+
+If `src` fails to load, the `<img>` is removed and the fallback becomes visible.
+
+## Composition
+
+```text
+Avatar
+├── AvatarImage
+├── AvatarFallback
+└── AvatarBadge
+
+AvatarGroup
+├── Avatar
+│   ├── AvatarImage
+│   ├── AvatarFallback
+│   └── AvatarBadge
+├── Avatar
+│   ├── AvatarImage
+│   ├── AvatarFallback
+│   └── AvatarBadge
+└── AvatarGroupCount
+```
+
+## Common patterns
+
+### Basic avatar
+
+```html
+<Avatar>
+  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>
+```
+
+### Presence badge
+
+Use `AvatarBadge` for online status, synced state, or a compact icon action.
+
+```html
+<Avatar>
+  <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+  <AvatarFallback>ER</AvatarFallback>
+  <AvatarBadge class="bg-emerald-600" aria-hidden="true"></AvatarBadge>
+</Avatar>
+```
+
+### Avatar group
+
+`AvatarGroup` applies the overlapping stack treatment, while `AvatarGroupCount` handles the overflow counter.
+
+```html
+<AvatarGroup class="grayscale">
+  <Avatar>
+    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+  <Avatar>
+    <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
+    <AvatarFallback>ML</AvatarFallback>
+  </Avatar>
+  <Avatar>
+    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+    <AvatarFallback>ER</AvatarFallback>
+  </Avatar>
+  <AvatarGroupCount>+3</AvatarGroupCount>
+</AvatarGroup>
+```
+
+### Size variants
+
+Use the root `size` input instead of repeating manual width and height classes.
+
+```html
+<div class="flex items-center gap-3">
+  <Avatar size="sm">...</Avatar>
+  <Avatar>...</Avatar>
+  <Avatar size="lg">...</Avatar>
+</div>
+```
+
+### Dropdown trigger composition
+
+Avatar stays presentational. When it opens a menu, wrap it in a button and let the button or menu trigger own focus and keyboard handling.
+
+```html
+<button
+  Button
+  variant="ghost"
+  size="icon"
+  class="h-10 w-10 rounded-full p-0"
+  [MenuTrigger]="accountMenu"
+>
+  <Avatar>
+    <AvatarImage src="https://github.com/shadcn.png" alt="Ada Lovelace" />
+    <AvatarFallback>AL</AvatarFallback>
+  </Avatar>
+</button>
+```
+
+### RTL
+
+Avatar itself does not need different markup in right-to-left layouts. Set `dir="rtl"` on the surrounding surface.
+
+```html
+<section dir="rtl" lang="ar" class="flex items-center gap-4 text-right">
+  <Avatar>
+    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+</section>
+```
+
+## API reference
+
+| Primitive                   | Input(s)                         |
+| --------------------------- | -------------------------------- |
+| `AvatarComponent`           | `size`, `class`                  |
+| `AvatarImageComponent`      | `src` (required), `alt`, `class` |
+| `AvatarFallbackComponent`   | `class`                          |
+| `AvatarBadgeComponent`      | `class`                          |
+| `AvatarGroupComponent`      | `class`                          |
+| `AvatarGroupCountComponent` | `class`                          |
+
+`AvatarComponent.size` accepts `'default' | 'sm' | 'lg'` and defaults to `'default'`.
+
+## Styling and theming
+
+Tokens consumed: `--muted`, `--muted-foreground`, `--background`, `--primary`, and `--primary-foreground`.
+
+The default avatar size is `h-10 w-10`. Use the `size` input for the common variants and pass `class` for brand-specific overrides such as grayscale, custom borders, or alternate badge colors.
+
+`AvatarBadge` is the right place for presence color overrides, and `AvatarGroupCount` can be restyled when overflow counters should match a specific product palette.
+
+## Accessibility
+
+Always pass a meaningful `alt` to `<AvatarImage>`. If the avatar is purely
+decorative (user's name already shown), use `alt=""`. The fallback text is
+readable by screen readers.
+
+Keep fallback text short, typically initials, so it remains legible in smaller sizes.
+
+## Keyboard interactions
+
+Avatar itself is not interactive. If it is used to open a menu, dialog, or popover, wrap it in a native button or another focusable trigger primitive so Tab, Enter, and Space behavior stays with the interactive host.
+
+## Angular notes
+
+- `size` is exposed as a typed Angular input on `Avatar`.
+- Grouping is handled by dedicated primitives instead of utility-only composition, which keeps Angular templates explicit and reusable.
+- Image fallback is handled internally by hiding the `<img>` after its `error` event.
+
+## Source parity
+
+This Angular implementation follows the shadcn Avatar concepts, examples, and API shape while adapting menu composition to the local `Button` plus menu primitives and Angular standalone imports.

package/component/badge/README.md

@@ -0,0 +1,143 @@
+# Badge
+
+Displays a badge or a semantic element that looks like a badge.
+
+Use Badge for status pills, small metadata labels, compact counts, and lightweight link-like callouts that should keep the badge silhouette.
+
+## Import
+
+```ts
+import { BadgeComponent } from '@ojiepermana/angular/component/badge';
+```
+
+## Usage
+
+Use `<Badge>` for the default host element or apply `[Badge]` to a semantic host such as `<span>` or `<a>` when the badge should inherit native behavior.
+
+```html
+<Badge>New</Badge>
+<Badge variant="secondary">Secondary</Badge>
+<Badge variant="destructive">Error</Badge>
+<Badge variant="outline">Outline</Badge>
+<Badge variant="ghost">Ghost</Badge>
+
+<span Badge variant="secondary">v1.0</span>
+
+<a Badge variant="link" href="#billing">
+  Open billing
+  <svg
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    class="size-3"
+  >
+    <path d="M7 17L17 7" />
+    <path d="M9 7h8v8" />
+  </svg>
+</a>
+```
+
+## Common patterns
+
+### Variants
+
+The Angular primitive follows the current shadcn badge palette and adds `ghost` plus `link` variants to cover low-emphasis and anchor-style treatments.
+
+```html
+<div class="flex flex-wrap gap-2">
+  <Badge>Default</Badge>
+  <Badge variant="secondary">Secondary</Badge>
+  <Badge variant="destructive">Destructive</Badge>
+  <Badge variant="outline">Outline</Badge>
+  <Badge variant="ghost">Ghost</Badge>
+</div>
+```
+
+### With icon
+
+Project an inline SVG or icon component directly inside the badge. The primitive adds compact spacing and sizes direct child SVGs automatically.
+
+```html
+<Badge variant="secondary">
+  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <path d="M20 7L9 18l-5-5" />
+  </svg>
+  Verified
+</Badge>
+```
+
+### With spinner
+
+Spinner content can be projected like any other inline element.
+
+```html
+<Badge variant="destructive">
+  <span
+    aria-hidden="true"
+    class="size-3 animate-spin rounded-full border-2 border-current border-r-transparent"
+  ></span>
+  Deleting
+</Badge>
+```
+
+### Link host
+
+shadcn React uses `asChild` for links. In Angular, use a semantic anchor host directly.
+
+```html
+<a Badge variant="link" href="#link">Open Link</a>
+```
+
+### Custom colors
+
+Custom color treatments are plain classes on the host.
+
+```html
+<Badge class="border-transparent bg-sky-100 text-sky-800">Blue</Badge>
+<Badge class="border-transparent bg-emerald-100 text-emerald-800">Green</Badge>
+```
+
+## API reference
+
+### `BadgeComponent`
+
+| Input     | Type                                                                          | Default     |
+| --------- | ----------------------------------------------------------------------------- | ----------- |
+| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link'` | `'default'` |
+| `class`   | `string`                                                                      | `''`        |
+
+## Styling and theming
+
+The base badge uses `border-border` for visible outlines instead of inheriting border color from text. Variant classes override that border when the badge should render as a filled pill.
+
+Pass `class` to add custom backgrounds, foreground colors, spacing, or width behavior. Direct child SVGs inherit `currentColor` and receive compact sizing automatically.
+
+Powered by `class-variance-authority`. Re-export: `badgeVariants` and `BadgeVariant`.
+
+```ts
+import { badgeVariants } from '@ojiepermana/angular/component/badge';
+
+const className = badgeVariants({ variant: 'link' });
+```
+
+## Accessibility
+
+- Keep meaningful text inside the badge when it communicates a state, label, or count.
+- Do not rely on color alone to distinguish success, warning, or destructive meaning.
+- When the badge should be interactive, use a semantic host like `<a Badge>` so native keyboard and screen-reader behavior stay intact.
+
+## Keyboard interactions
+
+Static badges are not focusable. Anchors and other semantic hosts keep their native keyboard behavior, so Tab and Enter handling stays with the host element rather than the badge primitive itself.
+
+## Angular notes
+
+- Angular uses the selector `Badge` for the default element host and `[Badge]` for semantic hosts.
+- React `asChild` maps to choosing the correct host element directly in Angular templates.
+- `variant` is an Angular `input()` on the badge component, so it works on both element and attribute hosts.
+
+## Source parity
+
+This Angular badge follows the shadcn Badge information architecture and examples while translating React-specific `asChild` composition into semantic Angular host elements.

package/component/breadcrumb/README.md

@@ -0,0 +1,223 @@
+# Breadcrumb
+
+Displays the path to the current resource using a hierarchy of links.
+
+Use Breadcrumb for hierarchical navigation trails in docs, account areas, settings surfaces, and deep app routes where users need a quick sense of where they are.
+
+## Import
+
+```ts
+import {
+  BreadcrumbComponent,
+  BreadcrumbEllipsisComponent,
+  BreadcrumbItemComponent,
+  BreadcrumbLinkComponent,
+  BreadcrumbListComponent,
+  BreadcrumbPageComponent,
+  BreadcrumbSeparatorComponent,
+} from '@ojiepermana/angular/component/breadcrumb';
+import { RouterLink } from '@angular/router';
+```
+
+## Composition
+
+The Angular structure matches the shadcn breadcrumb composition while translating it to Angular selectors and native router-friendly anchors.
+
+```text
+Breadcrumb
+└── ol[BreadcrumbList]
+    ├── li[BreadcrumbItem]
+    │   └── a[BreadcrumbLink]
+    ├── li[BreadcrumbSeparator]
+    ├── li[BreadcrumbItem]
+    │   └── a[BreadcrumbLink]
+    ├── li[BreadcrumbSeparator]
+    └── li[BreadcrumbItem]
+        └── span[BreadcrumbPage]
+```
+
+## Basic usage
+
+Prefer a semantic `<nav Breadcrumb>` root, then build the trail from list, item, link, separator, and current-page parts.
+
+```html
+<nav Breadcrumb>
+  <ol BreadcrumbList>
+    <li BreadcrumbItem>
+      <a BreadcrumbLink routerLink="/">Home</a>
+    </li>
+    <li BreadcrumbSeparator></li>
+    <li BreadcrumbItem>
+      <a BreadcrumbLink routerLink="/ui/shadcn/button">Components</a>
+    </li>
+    <li BreadcrumbSeparator></li>
+    <li BreadcrumbItem>
+      <span BreadcrumbPage>Breadcrumb</span>
+    </li>
+  </ol>
+</nav>
+```
+
+## Common patterns
+
+### Custom separator
+
+Project custom children into `BreadcrumbSeparator` to swap the default chevron for a slash, dot, brand icon, or other neutral divider.
+
+```html
+<nav Breadcrumb>
+  <ol BreadcrumbList>
+    <li BreadcrumbItem><a BreadcrumbLink href="/">Home</a></li>
+    <li BreadcrumbSeparator>
+      <svg class="h-2.5 w-2.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <circle cx="12" cy="12" r="3"></circle>
+      </svg>
+    </li>
+    <li BreadcrumbItem><a BreadcrumbLink href="/components">Components</a></li>
+    <li BreadcrumbSeparator>
+      <svg class="h-2.5 w-2.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <circle cx="12" cy="12" r="3"></circle>
+      </svg>
+    </li>
+    <li BreadcrumbItem><span BreadcrumbPage>Breadcrumb</span></li>
+  </ol>
+</nav>
+```
+
+### Collapsed trail
+
+Use `BreadcrumbEllipsis` when the trail is too long to show in full. Wrap it in a labeled button when the ellipsis should open an overflow menu.
+
+```html
+<nav Breadcrumb>
+  <ol BreadcrumbList>
+    <li BreadcrumbItem><a BreadcrumbLink routerLink="/">Home</a></li>
+    <li BreadcrumbSeparator></li>
+    <li BreadcrumbItem><span BreadcrumbEllipsis></span></li>
+    <li BreadcrumbSeparator></li>
+    <li BreadcrumbItem><a BreadcrumbLink routerLink="/docs/components">Components</a></li>
+    <li BreadcrumbSeparator></li>
+    <li BreadcrumbItem><span BreadcrumbPage>Breadcrumb</span></li>
+  </ol>
+</nav>
+```
+
+### Dropdown composition
+
+Compose a breadcrumb item with the local menu primitives when an intermediate node should expose related destinations instead of linking directly.
+
+```html
+<nav Breadcrumb>
+  <ol BreadcrumbList>
+    <li BreadcrumbItem><a BreadcrumbLink routerLink="/">Home</a></li>
+    <li BreadcrumbSeparator></li>
+    <li BreadcrumbItem>
+      <button
+        Button
+        type="button"
+        variant="ghost"
+        class="h-auto gap-1 px-2 py-1 font-normal text-muted-foreground hover:text-foreground"
+        [MenuTrigger]="componentsMenu"
+      >
+        Components
+        <svg
+          class="h-3.5 w-3.5"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </button>
+
+      <ng-template MenuContent #componentsMenu="MenuContent">
+        <MenuSurface class="w-44">
+          <MenuLabel>Components</MenuLabel>
+          <button MenuItem>Documentation</button>
+          <button MenuItem>Themes</button>
+          <button MenuItem>GitHub</button>
+        </MenuSurface>
+      </ng-template>
+    </li>
+    <li BreadcrumbSeparator></li>
+    <li BreadcrumbItem><span BreadcrumbPage>Breadcrumb</span></li>
+  </ol>
+</nav>
+```
+
+### RouterLink integration
+
+The shadcn React examples use `asChild` for custom routing components. In Angular, apply `routerLink` or `href` directly to the anchor that carries `BreadcrumbLink`.
+
+```html
+<a BreadcrumbLink routerLink="/ui/shadcn">Components</a>
+<a BreadcrumbLink href="https://ui.shadcn.com/docs/components/radix/breadcrumb">shadcn docs</a>
+```
+
+### RTL
+
+Set `dir="rtl"` on the breadcrumb root or an ancestor container. The structure stays the same while the visual flow shifts to right-to-left.
+
+```html
+<nav Breadcrumb dir="rtl" lang="ar">
+  <ol BreadcrumbList class="justify-end">
+    <li BreadcrumbItem><a BreadcrumbLink href="/">الرئيسية</a></li>
+    <li BreadcrumbSeparator></li>
+    <li BreadcrumbItem><a BreadcrumbLink href="/components">المكونات</a></li>
+    <li BreadcrumbSeparator></li>
+    <li BreadcrumbItem><span BreadcrumbPage>مسار التنقل</span></li>
+  </ol>
+</nav>
+```
+
+## API reference
+
+### `BreadcrumbComponent`
+
+| Input   | Type     | Default |
+| ------- | -------- | ------- |
+| `class` | `string` | `''`    |
+
+Use on `Breadcrumb` or `nav[Breadcrumb]`. The root always emits `aria-label="breadcrumb"` and keeps the custom-element form block-level.
+
+### Parts
+
+| Part                           | Selector                   | Input   |
+| ------------------------------ | -------------------------- | ------- |
+| `BreadcrumbListComponent`      | `ol[BreadcrumbList]`       | `class` |
+| `BreadcrumbItemComponent`      | `li[BreadcrumbItem]`       | `class` |
+| `BreadcrumbLinkComponent`      | `a[BreadcrumbLink]`        | `class` |
+| `BreadcrumbPageComponent`      | `span[BreadcrumbPage]`     | `class` |
+| `BreadcrumbSeparatorComponent` | `li[BreadcrumbSeparator]`  | `class` |
+| `BreadcrumbEllipsisComponent`  | `span[BreadcrumbEllipsis]` | `class` |
+
+`BreadcrumbSeparatorComponent` accepts projected children to replace the default chevron icon.
+
+## Styling and theming
+
+The breadcrumb follows the shared theme tokens for foreground and muted text. Pass `class` to the list or individual parts to control spacing, alignment, color, and embedded layouts.
+
+For example, use `class="justify-end"` on `BreadcrumbList` for RTL alignment or `class="max-w-full"` on the root to fit a constrained header.
+
+## Accessibility
+
+- Root `<nav>` exposes `aria-label="breadcrumb"`.
+- The current page uses `<span BreadcrumbPage>` which emits `role="link"`, `aria-current="page"`, and `aria-disabled="true"` so the trail announces the current location.
+- Separators and ellipses are `aria-hidden` and `role="presentation"`.
+- If `BreadcrumbEllipsis` becomes interactive, wrap it in a labeled button so the overflow action is announced correctly.
+
+## Keyboard interactions
+
+- Links use native anchor keyboard behavior.
+- Overflow menu buttons rely on the local `Button` and `MenuTrigger` primitives for Enter, Space, ArrowDown, and Escape handling.
+
+## Angular notes
+
+- Prefer `<nav Breadcrumb>` for a semantic navigation landmark.
+- `<Breadcrumb>` is also supported and renders as a block-level host by default.
+- The React `asChild` examples map to Angular-native composition: put `routerLink` or `href` directly on `<a BreadcrumbLink>`.
+
+## Source parity
+
+This Angular implementation follows the shadcn breadcrumb information architecture while translating React-specific patterns such as `asChild` and dropdown composition into Angular RouterLink, button, and menu primitives.

package/component/button/README.md

@@ -0,0 +1,141 @@
+# Button
+
+Displays a native button or anchor that looks like a shadcn-style button, translated to Angular attribute selectors and standalone imports.
+
+Use Button for primary actions, secondary actions, icon-only controls, and semantic links that should share the same visual language.
+
+## Import
+
+```ts
+import { ButtonComponent } from '@ojiepermana/angular/component/button';
+```
+
+## Usage
+
+```html
+<button Button type="button" variant="default">Save</button>
+<button Button variant="outline" size="sm">Cancel</button>
+<a Button variant="link" href="/learn-more">Learn more</a>
+```
+
+Choose the correct native host for the job: `<button>` for actions and `<a>` for navigation.
+
+## Common patterns
+
+### Variants
+
+Use `variant` for emphasis: `default`, `secondary`, `destructive`, `outline`, `ghost`, or `link`.
+
+```html
+<button Button variant="default">Save</button>
+<button Button variant="secondary">Duplicate</button>
+<button Button variant="destructive">Delete</button>
+<button Button variant="outline">Outline</button>
+<button Button variant="ghost">Ghost</button>
+<a Button variant="link" href="/learn-more">Learn more</a>
+```
+
+### Sizes
+
+Use `size` for compact or icon-only controls: `xs`, `sm`, `default`, `lg`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`.
+
+```html
+<button Button size="xs" variant="outline">Extra small</button>
+<button Button size="sm" variant="outline">Small</button>
+<button Button size="default" variant="outline">Default</button>
+<button Button size="lg" variant="outline">Large</button>
+<button Button size="icon-xs" variant="outline" aria-label="Extra small icon button">+</button>
+<button Button size="icon-sm" variant="outline" aria-label="Small icon button">+</button>
+<button Button size="icon" variant="outline" aria-label="Default icon button">+</button>
+<button Button size="icon-lg" variant="outline" aria-label="Large icon button">+</button>
+```
+
+### Rounded buttons
+
+Pass `class="rounded-full"` when you want a pill or circular button without changing the base API.
+
+```html
+<button Button variant="outline" class="rounded-full px-5">Invite teammate</button>
+<button Button variant="outline" size="icon" class="rounded-full" aria-label="Scroll to top">
+  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <path d="m12 19 0-14" />
+    <path d="m5 12 7-7 7 7" />
+  </svg>
+</button>
+```
+
+### Loading and disabled states
+
+Project a spinner element into the button and set `disabled` while async work is pending.
+
+```html
+<button Button variant="outline" disabled>
+  <span
+    aria-hidden="true"
+    class="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-t-transparent"
+  ></span>
+  Generating
+</button>
+```
+
+### Semantic host mapping
+
+React's `asChild` pattern maps to choosing the right native host directly in Angular templates.
+
+```html
+<button Button type="button">Save changes</button>
+<a Button href="/account" variant="link">Go to account</a>
+```
+
+## API reference
+
+| Input     | Type                                                                                 | Default     |
+| --------- | ------------------------------------------------------------------------------------ | ----------- |
+| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link'`        | `'default'` |
+| `size`    | `'xs' \| 'sm' \| 'default' \| 'lg' \| 'icon-xs' \| 'icon-sm' \| 'icon' \| 'icon-lg'` | `'default'` |
+| `class`   | `string`                                                                             | `''`        |
+
+The selected variant + size are also exposed via `data-variant` / `data-size`
+attributes on the host for styling overrides.
+
+Hosts: `button[Button]` and `a[Button]`.
+
+Re-exports: `buttonVariants`, `ButtonVariant`, `ButtonSize`.
+
+## Styling and theming
+
+Tokens: `--primary`, `--primary-foreground`, `--secondary`, `--destructive`,
+`--border`, `--accent`, `--ring`.
+
+Every state (hover, focus-visible, active, disabled) is covered by the variants.
+Focus-visible uses a 2px `ring-ring` outline for keyboard users.
+
+Pass `class` to layer width, shape, and spacing overrides such as `rounded-full`, `w-full`, or responsive layout utilities.
+
+The local primitive already opts into `cursor-pointer` for interactive hosts, so you do not need an extra Tailwind base-layer override to restore button cursors.
+
+## Accessibility
+
+Attribute selectors force you to pick a real semantic element:
+
+- Use `<button Button>` for actions that don't navigate.
+- Use `<a Button href="…">` for navigation.
+- Add an `aria-label` to icon-only buttons.
+- Use `type="button"` inside forms unless the button should submit.
+
+Avoid faking buttons with `<div>` — keyboard and screen-reader support depend on
+the native element.
+
+## Keyboard interactions
+
+- Native buttons support Tab, Enter, and Space automatically.
+- Anchors with `href` participate in normal link focus and Enter activation.
+
+## Angular notes
+
+- Import `ButtonComponent` into the standalone component that renders the host element.
+- There is no Angular `asChild` input; pick the semantic host element directly.
+
+## Source parity
+
+This Angular version follows the shadcn Button information architecture while translating examples to native hosts, standalone imports, and Angular-friendly template patterns.