@edsis/ui 0.0.2

package/aspect-ratio/README.md

@@ -0,0 +1,112 @@
+# Aspect Ratio
+
+Displays content within a fixed width-to-height ratio.
+
+Use Aspect Ratio for image frames, media placeholders, thumbnail cards, and any layout where the container height should derive from the available width.
+
+## Import
+
+```ts
+import { AspectRatioComponent } from '@edsis/ui/aspect-ratio';
+```
+
+## Usage
+
+Bind a numeric ratio with `[ratio]`. The host renders as a block-level container with `position: relative`, so projected children can fill the box with `h-full w-full` or positioned overlays.
+
+```html
+<div class="w-full max-w-sm">
+  <ui-aspect-ratio [ratio]="16 / 9" class="overflow-hidden rounded-lg border border-border bg-muted/30">
+    <img src="https://avatar.vercel.sh/shadcn1" alt="Demo media" class="h-full w-full object-cover" />
+  </ui-aspect-ratio>
+</div>
+```
+
+## Common patterns
+
+### Landscape media
+
+Use `16 / 9` for hero images, video posters, and card thumbnails.
+
+```html
+<div class="max-w-sm">
+  <ui-aspect-ratio [ratio]="16 / 9" class="overflow-hidden rounded-lg bg-muted">
+    <img src="..." alt="Landscape" class="h-full w-full object-cover" />
+  </ui-aspect-ratio>
+</div>
+```
+
+### Square avatars or gallery tiles
+
+Use `1` for square media slots.
+
+```html
+<div class="max-w-48">
+  <ui-aspect-ratio [ratio]="1" class="overflow-hidden rounded-xl bg-muted">
+    <img src="..." alt="Square tile" class="h-full w-full object-cover" />
+  </ui-aspect-ratio>
+</div>
+```
+
+### Portrait cards
+
+Use `9 / 16` when the design calls for tall image treatments.
+
+```html
+<div class="max-w-40">
+  <ui-aspect-ratio [ratio]="9 / 16" class="overflow-hidden rounded-xl bg-muted">
+    <img src="..." alt="Portrait tile" class="h-full w-full object-cover" />
+  </ui-aspect-ratio>
+</div>
+```
+
+### Figure with caption
+
+Keep captions outside the ratio box so the media height stays stable while text can grow naturally.
+
+```html
+<figure class="max-w-sm">
+  <ui-aspect-ratio [ratio]="16 / 9" class="overflow-hidden rounded-lg border border-border bg-muted/30">
+    <img src="..." alt="Beautiful landscape" class="h-full w-full object-cover" />
+  </ui-aspect-ratio>
+  <figcaption class="mt-2 text-sm text-muted-foreground">Beautiful landscape</figcaption>
+</figure>
+```
+
+## API reference
+
+### `AspectRatioComponent`
+
+| Input   | Type     | Default  | Description                                                                                 |
+| ------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
+| `ratio` | `number` | required | The desired width-to-height ratio. Use Angular expressions like `16 / 9`, `1`, or `9 / 16`. |
+| `class` | `string` | `''`     | Additional utility classes for the host container.                                          |
+
+## Styling and theming
+
+Base host classes: `relative block w-full`.
+
+Pass utility classes for rounded corners, borders, backgrounds, shadows, and max width. Add `overflow-hidden` when the projected media should be clipped to the container radius. The projected child should usually use `h-full w-full object-cover` for image-like content.
+
+## Accessibility
+
+Aspect Ratio has no built-in semantics beyond its host element. Accessibility comes from the projected content.
+
+- Provide meaningful `alt` text for images.
+- Prefer `<figure>` and `<figcaption>` when media needs visible labeling.
+- Do not place essential text only inside a background image.
+
+## Keyboard interactions
+
+Aspect Ratio has no keyboard interaction. It should not receive focus unless the projected content contains an interactive control.
+
+## Angular notes
+
+- Import `AspectRatioComponent` directly into the standalone component that owns the media layout.
+- Use `[ratio]` with a numeric Angular expression instead of a React prop like `ratio={16 / 9}`.
+- The component uses a block-level custom element so width utilities such as `w-full` and `max-w-sm` behave predictably.
+- The projected content is wrapped in an absolute fill container so overlays and full-height media stay aligned with the ratio box.
+
+## Source parity
+
+This Angular implementation follows the shadcn Aspect Ratio examples for landscape, square, portrait, and RTL-friendly media layouts while translating React props and fill behavior to Angular bindings and projected content.

package/avatar/README.md

@@ -0,0 +1,176 @@
+# 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 '@edsis/ui/avatar';
+```
+
+## Usage
+
+```html
+<ui-avatar size="lg">
+  <ui-avatar-image src="/me.jpg" alt="Ada Lovelace" />
+  <ui-avatar-fallback>AL</ui-avatar-fallback>
+  <ui-avatar-badge class="bg-emerald-600" aria-hidden="true"></ui-avatar-badge>
+</ui-avatar>
+```
+
+If `src` fails to load, the `<img>` is removed and the fallback becomes visible.
+
+## Composition
+
+```text
+ui-avatar
+├── ui-avatar-image
+├── ui-avatar-fallback
+└── ui-avatar-badge
+
+ui-avatar-group
+├── ui-avatar
+│   ├── ui-avatar-image
+│   ├── ui-avatar-fallback
+│   └── ui-avatar-badge
+├── ui-avatar
+│   ├── ui-avatar-image
+│   ├── ui-avatar-fallback
+│   └── ui-avatar-badge
+└── ui-avatar-group-count
+```
+
+## Common patterns
+
+### Basic avatar
+
+```html
+<ui-avatar>
+  <ui-avatar-image src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
+  <ui-avatar-fallback>CN</ui-avatar-fallback>
+</ui-avatar>
+```
+
+### Presence badge
+
+Use `ui-avatar-badge` for online status, synced state, or a compact icon action.
+
+```html
+<ui-avatar>
+  <ui-avatar-image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+  <ui-avatar-fallback>ER</ui-avatar-fallback>
+  <ui-avatar-badge class="bg-emerald-600" aria-hidden="true"></ui-avatar-badge>
+</ui-avatar>
+```
+
+### Avatar group
+
+`ui-avatar-group` applies the overlapping stack treatment, while `ui-avatar-group-count` handles the overflow counter.
+
+```html
+<ui-avatar-group class="grayscale">
+  <ui-avatar>
+    <ui-avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
+    <ui-avatar-fallback>CN</ui-avatar-fallback>
+  </ui-avatar>
+  <ui-avatar>
+    <ui-avatar-image src="https://github.com/maxleiter.png" alt="@maxleiter" />
+    <ui-avatar-fallback>ML</ui-avatar-fallback>
+  </ui-avatar>
+  <ui-avatar>
+    <ui-avatar-image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+    <ui-avatar-fallback>ER</ui-avatar-fallback>
+  </ui-avatar>
+  <ui-avatar-group-count>+3</ui-avatar-group-count>
+</ui-avatar-group>
+```
+
+### Size variants
+
+Use the root `size` input instead of repeating manual width and height classes.
+
+```html
+<div class="flex items-center gap-3">
+  <ui-avatar size="sm">...</ui-avatar>
+  <ui-avatar>...</ui-avatar>
+  <ui-avatar size="lg">...</ui-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 ui-button variant="ghost" size="icon" class="h-10 w-10 rounded-full p-0" [uiMenuTrigger]="accountMenu">
+  <ui-avatar>
+    <ui-avatar-image src="https://github.com/shadcn.png" alt="Ada Lovelace" />
+    <ui-avatar-fallback>AL</ui-avatar-fallback>
+  </ui-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">
+  <ui-avatar>
+    <ui-avatar-image src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
+    <ui-avatar-fallback>CN</ui-avatar-fallback>
+  </ui-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.
+
+`ui-avatar-badge` is the right place for presence color overrides, and `ui-avatar-group-count` can be restyled when overflow counters should match a specific product palette.
+
+## Accessibility
+
+Always pass a meaningful `alt` to `<ui-avatar-image>`. 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 `ui-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 `ui-button` plus menu primitives and Angular standalone imports.

package/badge/README.md

@@ -0,0 +1,133 @@
+# 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 '@edsis/ui/badge';
+```
+
+## Usage
+
+Use `<ui-badge>` for the default host element or apply `[ui-badge]` to a semantic host such as `<span>` or `<a>` when the badge should inherit native behavior.
+
+```html
+<ui-badge>New</ui-badge>
+<ui-badge variant="secondary">Secondary</ui-badge>
+<ui-badge variant="destructive">Error</ui-badge>
+<ui-badge variant="outline">Outline</ui-badge>
+<ui-badge variant="ghost">Ghost</ui-badge>
+
+<span ui-badge variant="secondary">v1.0</span>
+
+<a ui-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">
+  <ui-badge>Default</ui-badge>
+  <ui-badge variant="secondary">Secondary</ui-badge>
+  <ui-badge variant="destructive">Destructive</ui-badge>
+  <ui-badge variant="outline">Outline</ui-badge>
+  <ui-badge variant="ghost">Ghost</ui-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
+<ui-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
+</ui-badge>
+```
+
+### With spinner
+
+Spinner content can be projected like any other inline element.
+
+```html
+<ui-badge variant="destructive">
+  <span aria-hidden="true" class="size-3 animate-spin rounded-full border-2 border-current border-r-transparent"></span>
+  Deleting
+</ui-badge>
+```
+
+### Link host
+
+shadcn React uses `asChild` for links. In Angular, use a semantic anchor host directly.
+
+```html
+<a ui-badge variant="link" href="#link">Open Link</a>
+```
+
+### Custom colors
+
+Custom color treatments are plain classes on the host.
+
+```html
+<ui-badge class="border-transparent bg-sky-100 text-sky-800">Blue</ui-badge>
+<ui-badge class="border-transparent bg-emerald-100 text-emerald-800">Green</ui-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 '@edsis/ui/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 ui-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 `ui-badge` for the default element host and `[ui-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/breadcrumb/README.md

@@ -0,0 +1,216 @@
+# 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 '@edsis/ui/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
+ui-breadcrumb
+└── ol[ui-breadcrumb-list]
+    ├── li[ui-breadcrumb-item]
+    │   └── a[ui-breadcrumb-link]
+    ├── li[ui-breadcrumb-separator]
+    ├── li[ui-breadcrumb-item]
+    │   └── a[ui-breadcrumb-link]
+    ├── li[ui-breadcrumb-separator]
+    └── li[ui-breadcrumb-item]
+        └── span[ui-breadcrumb-page]
+```
+
+## Basic usage
+
+Prefer a semantic `<nav ui-breadcrumb>` root, then build the trail from list, item, link, separator, and current-page parts.
+
+```html
+<nav ui-breadcrumb>
+  <ol ui-breadcrumb-list>
+    <li ui-breadcrumb-item>
+      <a ui-breadcrumb-link routerLink="/">Home</a>
+    </li>
+    <li ui-breadcrumb-separator></li>
+    <li ui-breadcrumb-item>
+      <a ui-breadcrumb-link routerLink="/ui/shadcn/button">Components</a>
+    </li>
+    <li ui-breadcrumb-separator></li>
+    <li ui-breadcrumb-item>
+      <span ui-breadcrumb-page>Breadcrumb</span>
+    </li>
+  </ol>
+</nav>
+```
+
+## Common patterns
+
+### Custom separator
+
+Project custom children into `ui-breadcrumb-separator` to swap the default chevron for a slash, dot, brand icon, or other neutral divider.
+
+```html
+<nav ui-breadcrumb>
+  <ol ui-breadcrumb-list>
+    <li ui-breadcrumb-item><a ui-breadcrumb-link href="/">Home</a></li>
+    <li ui-breadcrumb-separator>
+      <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 ui-breadcrumb-item><a ui-breadcrumb-link href="/components">Components</a></li>
+    <li ui-breadcrumb-separator>
+      <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 ui-breadcrumb-item><span ui-breadcrumb-page>Breadcrumb</span></li>
+  </ol>
+</nav>
+```
+
+### Collapsed trail
+
+Use `ui-breadcrumb-ellipsis` 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 ui-breadcrumb>
+  <ol ui-breadcrumb-list>
+    <li ui-breadcrumb-item><a ui-breadcrumb-link routerLink="/">Home</a></li>
+    <li ui-breadcrumb-separator></li>
+    <li ui-breadcrumb-item><span ui-breadcrumb-ellipsis></span></li>
+    <li ui-breadcrumb-separator></li>
+    <li ui-breadcrumb-item><a ui-breadcrumb-link routerLink="/docs/components">Components</a></li>
+    <li ui-breadcrumb-separator></li>
+    <li ui-breadcrumb-item><span ui-breadcrumb-page>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 ui-breadcrumb>
+  <ol ui-breadcrumb-list>
+    <li ui-breadcrumb-item><a ui-breadcrumb-link routerLink="/">Home</a></li>
+    <li ui-breadcrumb-separator></li>
+    <li ui-breadcrumb-item>
+      <button
+        ui-button
+        type="button"
+        variant="ghost"
+        class="h-auto gap-1 px-2 py-1 font-normal text-muted-foreground hover:text-foreground"
+        [uiMenuTrigger]="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 uiMenuContent #componentsMenu="uiMenuContent">
+        <ui-menu-surface class="w-44">
+          <ui-menu-label>Components</ui-menu-label>
+          <button ui-menu-item>Documentation</button>
+          <button ui-menu-item>Themes</button>
+          <button ui-menu-item>GitHub</button>
+        </ui-menu-surface>
+      </ng-template>
+    </li>
+    <li ui-breadcrumb-separator></li>
+    <li ui-breadcrumb-item><span ui-breadcrumb-page>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 `ui-breadcrumb-link`.
+
+```html
+<a ui-breadcrumb-link routerLink="/ui/shadcn">Components</a>
+<a ui-breadcrumb-link 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 ui-breadcrumb dir="rtl" lang="ar">
+  <ol ui-breadcrumb-list class="justify-end">
+    <li ui-breadcrumb-item><a ui-breadcrumb-link href="/">الرئيسية</a></li>
+    <li ui-breadcrumb-separator></li>
+    <li ui-breadcrumb-item><a ui-breadcrumb-link href="/components">المكونات</a></li>
+    <li ui-breadcrumb-separator></li>
+    <li ui-breadcrumb-item><span ui-breadcrumb-page>مسار التنقل</span></li>
+  </ol>
+</nav>
+```
+
+## API reference
+
+### `BreadcrumbComponent`
+
+| Input   | Type     | Default |
+| ------- | -------- | ------- |
+| `class` | `string` | `''`    |
+
+Use on `ui-breadcrumb` or `nav[ui-breadcrumb]`. The root always emits `aria-label="breadcrumb"` and keeps the custom-element form block-level.
+
+### Parts
+
+| Part                           | Selector                       | Input   |
+| ------------------------------ | ------------------------------ | ------- |
+| `BreadcrumbListComponent`      | `ol[ui-breadcrumb-list]`       | `class` |
+| `BreadcrumbItemComponent`      | `li[ui-breadcrumb-item]`       | `class` |
+| `BreadcrumbLinkComponent`      | `a[ui-breadcrumb-link]`        | `class` |
+| `BreadcrumbPageComponent`      | `span[ui-breadcrumb-page]`     | `class` |
+| `BreadcrumbSeparatorComponent` | `li[ui-breadcrumb-separator]`  | `class` |
+| `BreadcrumbEllipsisComponent`  | `span[ui-breadcrumb-ellipsis]` | `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 `ui-breadcrumb-list` 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 ui-breadcrumb-page>` 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 `ui-breadcrumb-ellipsis` 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 `ui-button` and `uiMenuTrigger` primitives for Enter, Space, ArrowDown, and Escape handling.
+
+## Angular notes
+
+- Prefer `<nav ui-breadcrumb>` for a semantic navigation landmark.
+- `<ui-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 ui-breadcrumb-link>`.
+
+## 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.