@egose/shadcn-theme-ng-tw 0.0.28 → 0.2.0

package/breadcrumb/README.md

@@ -1,11 +1,412 @@
-# Breadcrumb
+# Breadcrumb (`@egose/shadcn-theme-ng/breadcrumb`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+A wayfinding trail in the shadcn/ui Breadcrumb style ("Home / Products / Shoes"): a `nav` region
+containing an ordered-feeling list of links, chevron separators, an ellipsis placeholder for
+collapsed middle segments, and a current-page marker. Use it above page headers so users always
+know where they are and can jump back up the hierarchy.
 
-## Building
+This is a **routing-aware styling layer with no single brain primitive**. `HlmBreadcrumbLink`
+wraps Angular's `RouterLink` via `hostDirectives` (every router input is forwarded); the
+remaining pieces are layout/semantic directives adding `data-slot` attributes plus shadcn classes
+through `classes()`. Separators and ellipses are tiny components that render a Lucide
+`chevron-right` / `ellipsis` `ng-icon` with an `<ng-content>` / screen-reader-text slot.
 
-To build the library, run:
+> **Ships as:** `@egose/shadcn-theme-ng/breadcrumb` and `@egose/shadcn-theme-ng-tw/breadcrumb`
+> (the `tw:`-prefixed Tailwind variant). Both expose the identical TypeScript surface; only the
+> emitted Tailwind class strings differ. See the [package README](../../README.md) for install
+> steps, peer dependencies, and Tailwind setup. Do not publish this project directory independently.
+
+## Installation
 
 ```bash
-ng build breadcrumb
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# tw:-prefixed Tailwind variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+Peer dependencies (Angular, `@spartan-ng/brain`, `@ng-icons/*`, `rxjs`, …) are documented in the
+[package README](../../README.md#peer-dependencies). This subpath additionally relies at runtime on
+`@angular/router` (`RouterLink`), `@egose/shadcn-theme-ng/utils` (`classes()`), and
+`@ng-icons/lucide` (`lucideChevronRight`, `lucideEllipsis`).
+
+## Imports
+
+All symbols are exported from the subpath root (`projects/breadcrumb/src/public-api.ts`):
+
+```ts
+import {
+  HlmBreadcrumb,
+  HlmBreadcrumbList,
+  HlmBreadcrumbItem,
+  HlmBreadcrumbLink,
+  HlmBreadcrumbPage,
+  HlmBreadcrumbSeparator,
+  HlmBreadcrumbEllipsis,
+  HlmBreadcrumbImports,
+  HlmBreadcrumbModule,
+} from '@egose/shadcn-theme-ng/breadcrumb';
+// tw variant: replace with '@egose/shadcn-theme-ng-tw/breadcrumb'
+```
+
+Standalone component — spread the `*Imports` array:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmBreadcrumbImports } from '@egose/shadcn-theme-ng/breadcrumb';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [...HlmBreadcrumbImports],
+  template: `...`,
+})
+export class DemoComponent {}
+```
+
+NgModule-based consumer — import the module:
+
+```ts
+import { NgModule } from '@angular/core';
+import { HlmBreadcrumbModule } from '@egose/shadcn-theme-ng/breadcrumb';
+
+@NgModule({ imports: [HlmBreadcrumbModule] })
+export class DemoModule {}
 ```
+
+## Anatomy / Structure
+
+```html
+<nav hlmBreadcrumb aria-label="breadcrumb">
+  <ol hlmBreadcrumbList>
+    <li hlmBreadcrumbItem>
+      <a hlmBreadcrumbLink link="/">Home</a>
+    </li>
+    <li hlmBreadcrumbSeparator></li>
+    <li hlmBreadcrumbItem>
+      <hlm-breadcrumb-ellipsis srOnlyText="More" />
+    </li>
+    <li hlmBreadcrumbSeparator></li>
+    <li hlmBreadcrumbItem>
+      <span hlmBreadcrumbPage>Current page</span>
+    </li>
+  </ol>
+</nav>
+```
+
+Real selectors (from source):
+
+| Class                    | Selector(s)                | Kind      |
+| ------------------------ | -------------------------- | --------- |
+| `HlmBreadcrumb`          | `[hlmBreadcrumb]`          | Directive |
+| `HlmBreadcrumbList`      | `[hlmBreadcrumbList]`      | Directive |
+| `HlmBreadcrumbItem`      | `[hlmBreadcrumbItem]`      | Directive |
+| `HlmBreadcrumbLink`      | `[hlmBreadcrumbLink]`      | Directive |
+| `HlmBreadcrumbPage`      | `[hlmBreadcrumbPage]`      | Directive |
+| `HlmBreadcrumbSeparator` | `[hlmBreadcrumbSeparator]` | Component |
+| `HlmBreadcrumbEllipsis`  | `hlm-breadcrumb-ellipsis`  | Component |
+
+Host semantics from source: `HlmBreadcrumb` sets `role="navigation"` + `aria-label`;
+`HlmBreadcrumbPage` sets `role="link"`, `aria-disabled="true"`, `aria-current="page"`;
+`HlmBreadcrumbSeparator` sets `role="presentation"`, `aria-hidden="true"`;
+`HlmBreadcrumbEllipsis` sets `role="presentation"` and renders its `srOnlyText` in an
+`sr-only` span.
+
+## API reference
+
+### `HlmBreadcrumb` — `[hlmBreadcrumb]`
+
+| Input                               | Type     | Default        | Description                               |
+| ----------------------------------- | -------- | -------------- | ----------------------------------------- |
+| `aria-label` (alias of `ariaLabel`) | `string` | `'breadcrumb'` | Accessible name of the navigation region. |
+
+### `HlmBreadcrumbList` / `HlmBreadcrumbItem`
+
+Layout-only directives, no inputs. List: wrapping muted flex row (`text-sm`, `gap-1.5/2.5`);
+item: `inline-flex items-center gap-1.5` slot for one link/page/separator step.
+
+### `HlmBreadcrumbLink` — `[hlmBreadcrumbLink]`
+
+Wraps `RouterLink` via `hostDirectives`; every router input is forwarded.
+
+| Input                 | Type                       | Description                                                                                                                             |
+| --------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `link`                | `RouterLink['routerLink']` | **Own input** and simultaneously the `routerLink` binding (`routerLink: link` mapping). Accepts a string, commands array, or `UrlTree`. |
+| `target`              | forwarded to `RouterLink`  | Link target.                                                                                                                            |
+| `queryParams`         | forwarded                  | Query params.                                                                                                                           |
+| `fragment`            | forwarded                  | URL fragment.                                                                                                                           |
+| `queryParamsHandling` | forwarded                  | `'merge' \| 'preserve' \| ''`.                                                                                                          |
+| `state`               | forwarded                  | Router state extras.                                                                                                                    |
+| `info`                | forwarded                  | Router info extras.                                                                                                                     |
+| `relativeTo`          | forwarded                  | Base route for relative links.                                                                                                          |
+| `preserveFragment`    | forwarded                  | Keep the current fragment.                                                                                                              |
+| `skipLocationChange`  | forwarded                  | Navigate without pushing history.                                                                                                       |
+| `replaceUrl`          | forwarded                  | Replace instead of push.                                                                                                                |
+
+### `HlmBreadcrumbPage` — `[hlmBreadcrumbPage]`
+
+Current-page marker. No inputs; styled `text-foreground font-normal` with
+`aria-current="page"`.
+
+### `HlmBreadcrumbSeparator` — `[hlmBreadcrumbSeparator]`
+
+Component (attribute selector) rendering `<ng-icon name="lucideChevronRight">` by default. No
+inputs — override the icon by projecting your own content:
+
+```html
+<li hlmBreadcrumbSeparator><span class="tw:px-1">/</span></li>
+```
+
+### `HlmBreadcrumbEllipsis` — `hlm-breadcrumb-ellipsis`
+
+Collapsed-segments placeholder rendering the `ellipsis` icon plus screen-reader text.
+
+| Input        | Type     | Default  | Description                       |
+| ------------ | -------- | -------- | --------------------------------- |
+| `srOnlyText` | `string` | `'More'` | Text announced to screen readers. |
+
+## Examples
+
+### 1. Basic trail with router links
+
+```ts
+import { Component } from '@angular/core';
+import { HlmBreadcrumbImports } from '@egose/shadcn-theme-ng/breadcrumb';
+
+@Component({
+  selector: 'app-breadcrumb-basic',
+  standalone: true,
+  imports: [...HlmBreadcrumbImports],
+  template: `
+    <nav hlmBreadcrumb>
+      <ol hlmBreadcrumbList>
+        <li hlmBreadcrumbItem>
+          <a hlmBreadcrumbLink link="/">Home</a>
+        </li>
+        <li hlmBreadcrumbSeparator></li>
+        <li hlmBreadcrumbItem>
+          <a hlmBreadcrumbLink link="/products">Products</a>
+        </li>
+        <li hlmBreadcrumbSeparator></li>
+        <li hlmBreadcrumbItem>
+          <span hlmBreadcrumbPage>Running shoes</span>
+        </li>
+      </ol>
+    </nav>
+  `,
+})
+export class BreadcrumbBasicComponent {}
+```
+
+```html
+<app-breadcrumb-basic />
+```
+
+### 2. Collapsed middle segments with ellipsis
+
+```ts
+import { Component } from '@angular/core';
+import { HlmBreadcrumbImports } from '@egose/shadcn-theme-ng/breadcrumb';
+
+@Component({
+  selector: 'app-breadcrumb-ellipsis',
+  standalone: true,
+  imports: [...HlmBreadcrumbImports],
+  template: `
+    <nav hlmBreadcrumb aria-label="File path">
+      <ol hlmBreadcrumbList>
+        <li hlmBreadcrumbItem><a hlmBreadcrumbLink link="/">Home</a></li>
+        <li hlmBreadcrumbSeparator></li>
+        <li hlmBreadcrumbItem><hlm-breadcrumb-ellipsis srOnlyText="3 collapsed folders" /></li>
+        <li hlmBreadcrumbSeparator></li>
+        <li hlmBreadcrumbItem><a hlmBreadcrumbLink link="/docs">Docs</a></li>
+        <li hlmBreadcrumbSeparator></li>
+        <li hlmBreadcrumbItem><span hlmBreadcrumbPage>Q3 report.pdf</span></li>
+      </ol>
+    </nav>
+  `,
+})
+export class BreadcrumbEllipsisComponent {}
+```
+
+### 3. Data-driven trail from the router (or any segment list)
+
+```ts
+import { Component, computed, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { HlmBreadcrumbImports } from '@egose/shadcn-theme-ng/breadcrumb';
+
+interface Crumb {
+  label: string;
+  link?: string[];
+}
+
+@Component({
+  selector: 'app-breadcrumb-dynamic',
+  standalone: true,
+  imports: [...HlmBreadcrumbImports],
+  template: `
+    <nav hlmBreadcrumb>
+      <ol hlmBreadcrumbList>
+        @for (c of crumbs(); track c.label; let last = $last) {
+          <li hlmBreadcrumbItem>
+            @if (last || !c.link) {
+              <span hlmBreadcrumbPage>{{ c.label }}</span>
+            } @else {
+              <a hlmBreadcrumbLink [link]="c.link">{{ c.label }}</a>
+            }
+          </li>
+          @if (!last) {
+            <li hlmBreadcrumbSeparator></li>
+          }
+        }
+      </ol>
+    </nav>
+  `,
+})
+export class BreadcrumbDynamicComponent {
+  private readonly route = inject(ActivatedRoute, { optional: true });
+
+  // Derive from route snapshots in real apps; static here for clarity.
+  readonly crumbs = computed<Crumb[]>(() => [
+    { label: 'Workspace', link: ['/'] },
+    { label: 'Projects', link: ['/', 'projects'] },
+    { label: this.route?.snapshot.paramMap.get('id') ?? 'apollo' },
+  ]);
+}
+```
+
+### 4. Links with query params, fragments, and relative navigation
+
+All `RouterLink` inputs forward, so deep-linking patterns work unchanged:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmBreadcrumbImports } from '@egose/shadcn-theme-ng/breadcrumb';
+
+@Component({
+  selector: 'app-breadcrumb-router',
+  standalone: true,
+  imports: [...HlmBreadcrumbImports],
+  template: `
+    <nav hlmBreadcrumb>
+      <ol hlmBreadcrumbList>
+        <li hlmBreadcrumbItem>
+          <a hlmBreadcrumbLink link="/" queryParamsHandling="preserve">Home</a>
+        </li>
+        <li hlmBreadcrumbSeparator></li>
+        <li hlmBreadcrumbItem>
+          <a hlmBreadcrumbLink [link]="['../']" fragment="reviews">Parent section</a>
+        </li>
+        <li hlmBreadcrumbSeparator></li>
+        <li hlmBreadcrumbItem>
+          <a hlmBreadcrumbLink [link]="['/search']" [queryParams]="{ q: 'shoes' }"> Search: shoes </a>
+        </li>
+        <li hlmBreadcrumbSeparator></li>
+        <li hlmBreadcrumbItem><span hlmBreadcrumbPage>Details</span></li>
+      </ol>
+    </nav>
+  `,
+})
+export class BreadcrumbRouterComponent {}
+```
+
+### 5. Custom separator glyph
+
+Project anything into the separator to replace the chevron:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmBreadcrumbImports } from '@egose/shadcn-theme-ng/breadcrumb';
+
+@Component({
+  selector: 'app-breadcrumb-custom-sep',
+  standalone: true,
+  imports: [...HlmBreadcrumbImports],
+  template: `
+    <nav hlmBreadcrumb>
+      <ol hlmBreadcrumbList>
+        <li hlmBreadcrumbItem><a hlmBreadcrumbLink link="/">Home</a></li>
+        <li hlmBreadcrumbSeparator><span aria-hidden="true" class="tw:px-0.5">/</span></li>
+        <li hlmBreadcrumbItem><a hlmBreadcrumbLink link="/blog">Blog</a></li>
+        <li hlmBreadcrumbSeparator><span aria-hidden="true" class="tw:px-0.5">/</span></li>
+        <li hlmBreadcrumbItem><span hlmBreadcrumbPage>Hello world</span></li>
+      </ol>
+    </nav>
+  `,
+})
+export class BreadcrumbCustomSepComponent {}
+```
+
+### 6. Collapsible middle on small screens (responsive pattern)
+
+Combine the ellipsis with a dropdown menu so hidden segments stay reachable:
+
+```ts
+import { Component, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { HlmBreadcrumbImports } from '@egose/shadcn-theme-ng/breadcrumb';
+import { HlmDropdownMenuImports } from '@egose/shadcn-theme-ng/dropdown-menu';
+
+@Component({
+  selector: 'app-breadcrumb-responsive',
+  standalone: true,
+  imports: [...HlmBreadcrumbImports, ...HlmDropdownMenuImports, RouterLink],
+  template: `
+    <nav hlmBreadcrumb>
+      <ol hlmBreadcrumbList>
+        <li hlmBreadcrumbItem><a hlmBreadcrumbLink link="/">Home</a></li>
+        <li hlmBreadcrumbSeparator></li>
+        <li hlmBreadcrumbItem>
+          <button hlmDropdownMenuTrigger [hlmDropdownMenuTrigger]="menu" class="tw:flex tw:items-center">
+            <hlm-breadcrumb-ellipsis srOnlyText="Show hidden sections" />
+          </button>
+          <ng-template #menu>
+            <div hlmDropdownMenu>
+              @for (s of hidden(); track s.label) {
+                <a hlmDropdownMenuItem [routerLink]="s.link">{{ s.label }}</a>
+              }
+            </div>
+          </ng-template>
+        </li>
+        <li hlmBreadcrumbSeparator></li>
+        <li hlmBreadcrumbItem><span hlmBreadcrumbPage>Current report</span></li>
+      </ol>
+    </nav>
+  `,
+})
+export class BreadcrumbResponsiveComponent {
+  readonly hidden = signal([
+    { label: '2024', link: ['/archive/2024'] },
+    { label: 'Q3', link: ['/archive/2024/q3'] },
+  ]);
+}
+```
+
+> Exact `dropdown-menu` trigger/menu/item selectors live in
+> `@egose/shadcn-theme-ng/dropdown-menu` — verify names there before pasting; the breadcrumb half
+> (`hlm-breadcrumb-ellipsis` inside a trigger) is verbatim.
+
+## Accessibility notes
+
+- The root is `role="navigation"` with a configurable `aria-label` (default `"breadcrumb"`).
+  When several breadcrumbs appear on one page, give each a distinct label.
+- The current page uses `aria-current="page"` + `aria-disabled="true"` with `role="link"` — it is
+  deliberately **not** a focusable link, so keyboard users skip it.
+- Separators are `role="presentation"` + `aria-hidden`; the ellipsis carries `sr-only` text
+  (customize via `srOnlyText`, e.g. "3 collapsed folders") so its meaning survives without sight.
+- Keep crumb labels short and unique; the link text is the accessible name, so avoid "click here".
+
+## Theming / CSS variables
+
+Class-based styling (`text-muted-foreground` list, `hover:text-foreground` links); no
+component-specific CSS variables. Override separators/ellipses by projecting content or targeting
+`data-slot="breadcrumb-separator"`.
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/dropdown-menu` — overflow menus for collapsed segments
+- `@egose/shadcn-theme-ng/navigation-menu` — full site navigation bars
+- `@egose/shadcn-theme-ng/pagination` — page-step navigation with similar link semantics
+- `@egose/shadcn-theme-ng/skeleton` — breadcrumb-shaped loading placeholders

package/breadcrumb/fesm2022/breadcrumb.mjs

@@ -8,10 +8,10 @@ import { RouterLink } from '@angular/router';
 
 class HlmBreadcrumb {
     ariaLabel = input('breadcrumb', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmBreadcrumb, isStandalone: true, selector: "[hlmBreadcrumb]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb", "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmBreadcrumb, isStandalone: true, selector: "[hlmBreadcrumb]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb", "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumb, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumb, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmBreadcrumb]',
@@ -28,15 +28,15 @@ class HlmBreadcrumbEllipsis {
     srOnlyText = input('More', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "srOnlyText" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => 'size-5 [&>ng-icon]:text-[length:--spacing(4)] flex items-center justify-center');
+        classes(() => 'tw:size-5 tw:[&>ng-icon]:text-[length:--spacing(4)] tw:flex tw:items-center tw:justify-center');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbEllipsis, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: HlmBreadcrumbEllipsis, isStandalone: true, selector: "hlm-breadcrumb-ellipsis", inputs: { srOnlyText: { classPropertyName: "srOnlyText", publicName: "srOnlyText", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb-ellipsis", "role": "presentation" } }, providers: [provideIcons({ lucideEllipsis })], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbEllipsis, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmBreadcrumbEllipsis, isStandalone: true, selector: "hlm-breadcrumb-ellipsis", inputs: { srOnlyText: { classPropertyName: "srOnlyText", publicName: "srOnlyText", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb-ellipsis", "role": "presentation" } }, providers: [provideIcons({ lucideEllipsis })], ngImport: i0, template: `
     <ng-icon name="lucideEllipsis" />
-    <span class="sr-only">{{ srOnlyText() }}</span>
+    <span class="tw:sr-only">{{ srOnlyText() }}</span>
   `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbEllipsis, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbEllipsis, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-breadcrumb-ellipsis',
@@ -49,19 +49,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     },
                     template: `
     <ng-icon name="lucideEllipsis" />
-    <span class="sr-only">{{ srOnlyText() }}</span>
+    <span class="tw:sr-only">{{ srOnlyText() }}</span>
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { srOnlyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "srOnlyText", required: false }] }] } });
 
 class HlmBreadcrumbItem {
     constructor() {
-        classes(() => 'gap-1.5 inline-flex items-center');
+        classes(() => 'tw:gap-1.5 tw:inline-flex tw:items-center');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmBreadcrumbItem, isStandalone: true, selector: "[hlmBreadcrumbItem]", host: { attributes: { "data-slot": "breadcrumb-item" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmBreadcrumbItem, isStandalone: true, selector: "[hlmBreadcrumbItem]", host: { attributes: { "data-slot": "breadcrumb-item" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmBreadcrumbItem]',
@@ -76,12 +76,12 @@ class HlmBreadcrumbLink {
     link = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "link" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => 'hover:text-foreground transition-colors');
+        classes(() => 'tw:hover:text-foreground tw:transition-colors');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmBreadcrumbLink, isStandalone: true, selector: "[hlmBreadcrumbLink]", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb-link" } }, hostDirectives: [{ directive: i1.RouterLink, inputs: ["target", "target", "queryParams", "queryParams", "fragment", "fragment", "queryParamsHandling", "queryParamsHandling", "state", "state", "info", "info", "relativeTo", "relativeTo", "preserveFragment", "preserveFragment", "skipLocationChange", "skipLocationChange", "replaceUrl", "replaceUrl", "routerLink", "link"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmBreadcrumbLink, isStandalone: true, selector: "[hlmBreadcrumbLink]", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb-link" } }, hostDirectives: [{ directive: i1.RouterLink, inputs: ["target", "target", "queryParams", "queryParams", "fragment", "fragment", "queryParamsHandling", "queryParamsHandling", "state", "state", "info", "info", "relativeTo", "relativeTo", "preserveFragment", "preserveFragment", "skipLocationChange", "skipLocationChange", "replaceUrl", "replaceUrl", "routerLink", "link"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbLink, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmBreadcrumbLink]',
@@ -111,12 +111,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmBreadcrumbList {
     constructor() {
-        classes(() => 'text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center wrap-break-word');
+        classes(() => 'tw:text-muted-foreground tw:gap-1.5 tw:text-sm tw:sm:gap-2.5 tw:flex tw:flex-wrap tw:items-center tw:wrap-break-word');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmBreadcrumbList, isStandalone: true, selector: "[hlmBreadcrumbList]", host: { attributes: { "data-slot": "breadcrumb-list" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmBreadcrumbList, isStandalone: true, selector: "[hlmBreadcrumbList]", host: { attributes: { "data-slot": "breadcrumb-list" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmBreadcrumbList]',
@@ -128,12 +128,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmBreadcrumbPage {
     constructor() {
-        classes(() => 'text-foreground font-normal');
+        classes(() => 'tw:text-foreground tw:font-normal');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmBreadcrumbPage, isStandalone: true, selector: "[hlmBreadcrumbPage]", host: { attributes: { "data-slot": "breadcrumb-page", "role": "link", "aria-disabled": "true", "aria-current": "page" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmBreadcrumbPage, isStandalone: true, selector: "[hlmBreadcrumbPage]", host: { attributes: { "data-slot": "breadcrumb-page", "role": "link", "aria-disabled": "true", "aria-current": "page" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbPage, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmBreadcrumbPage]',
@@ -148,16 +148,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmBreadcrumbSeparator {
     constructor() {
-        classes(() => '[&>ng-icon]:text-[length:--spacing(3.5)] [&>ng-icon]:flex');
+        classes(() => 'tw:[&>ng-icon]:text-[length:--spacing(3.5)] tw:[&>ng-icon]:flex');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: HlmBreadcrumbSeparator, isStandalone: true, selector: "[hlmBreadcrumbSeparator]", host: { attributes: { "data-slot": "breadcrumb-separator", "role": "presentation", "aria-hidden": "true" } }, providers: [provideIcons({ lucideChevronRight })], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmBreadcrumbSeparator, isStandalone: true, selector: "[hlmBreadcrumbSeparator]", host: { attributes: { "data-slot": "breadcrumb-separator", "role": "presentation", "aria-hidden": "true" } }, providers: [provideIcons({ lucideChevronRight })], ngImport: i0, template: `
     <ng-content>
       <ng-icon name="lucideChevronRight" />
     </ng-content>
   `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbSeparator, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -191,8 +191,8 @@ const HlmBreadcrumbImports = [
     HlmBreadcrumbList,
 ];
 class HlmBreadcrumbModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbModule, imports: [HlmBreadcrumb,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbModule, imports: [HlmBreadcrumb,
             HlmBreadcrumbEllipsis,
             HlmBreadcrumbSeparator,
             HlmBreadcrumbItem,
@@ -205,10 +205,10 @@ class HlmBreadcrumbModule {
             HlmBreadcrumbLink,
             HlmBreadcrumbPage,
             HlmBreadcrumbList] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbModule, imports: [HlmBreadcrumbEllipsis,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbModule, imports: [HlmBreadcrumbEllipsis,
             HlmBreadcrumbSeparator] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmBreadcrumbModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBreadcrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmBreadcrumbImports],
@@ -221,4 +221,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmBreadcrumb, HlmBreadcrumbEllipsis, HlmBreadcrumbImports, HlmBreadcrumbItem, HlmBreadcrumbLink, HlmBreadcrumbList, HlmBreadcrumbModule, HlmBreadcrumbPage, HlmBreadcrumbSeparator };
-//# sourceMappingURL=breadcrumb.mjs.map
+