@egose/shadcn-theme-ng 0.0.28 → 0.2.0

package/navigation-menu/README.md

@@ -1,11 +1,375 @@
-# NavigationMenu
+# Navigation Menu (`@egose/shadcn-theme-ng/navigation-menu`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+Site-navigation bar with dropdown content panels (shadcn/ui `navigation-menu` equivalent). Thin shadcn styling directives/components over the spartan-ng `BrnNavigationMenu` brain family: the bar itself plus list/item/trigger/link/content/portal pieces. Use it for marketing/docs headers where top-level entries either link somewhere or open a rich panel — as opposed to `menubar` (action menus) or `dropdown-menu` (single-button menus).
 
-## Building
+Ships as `@egose/shadcn-theme-ng/navigation-menu` and `@egose/shadcn-theme-ng-tw/navigation-menu` (tw: variant). See the [package README](../../README.md) for installation, peer dependencies, Tailwind setup, and testing. Do not publish this project directory independently.
 
-To build the library, run:
+## Installation
 
 ```bash
-ng build navigation-menu
+# Plain Tailwind (no prefix):
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant:
+npm install @egose/shadcn-theme-ng-tw
+```
+
+Peer dependencies are inherited from the package root (see [package README](../../README.md)). This subpath itself declares `@angular/common`, `@angular/core`, `@spartan-ng/brain` as peers plus a `tslib` runtime dependency; at runtime it also uses `@ng-icons/lucide` (`lucideChevronDown`). No extra install step is needed beyond the package install above.
+
+## Imports
+
+Real exported symbols (from `src/public-api.ts`):
+
+```ts
+import {
+  HlmNavigationMenu, // directive: nav[hlmNavigationMenu]
+  HlmNavigationMenuList, // directive: ul[hlmNavigationMenuList]
+  HlmNavigationMenuItem, // directive: li[hlmNavigationMenuItem]
+  HlmNavigationMenuTrigger, // component: button[hlmNavigationMenuTrigger]
+  HlmNavigationMenuContent, // directive: [hlmNavigationMenuContent],hlm-navigation-menu-content
+  HlmNavigationMenuPortal, // directive: [hlmNavigationMenuPortal]
+  HlmNavigationMenuLink, // directive: a[hlmNavigationMenuLink]
+  HlmNavigationMenuImports, // all seven above
+  HlmNavigationMenuModule, // NgModule wrapping HlmNavigationMenuImports
+} from '@egose/shadcn-theme-ng/navigation-menu';
+```
+
+Standalone usage:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmNavigationMenuImports } from '@egose/shadcn-theme-ng/navigation-menu';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [...HlmNavigationMenuImports],
+  template: `
+    <nav hlmNavigationMenu>
+      <ul hlmNavigationMenuList>
+        <li hlmNavigationMenuItem>
+          <a hlmNavigationMenuLink routerLink="/">Home</a>
+        </li>
+      </ul>
+    </nav>
+  `,
+})
+export class DemoComponent {}
+```
+
+NgModule usage:
+
+```ts
+import { NgModule } from '@angular/core';
+import { HlmNavigationMenuModule } from '@egose/shadcn-theme-ng/navigation-menu';
+
+@NgModule({ imports: [HlmNavigationMenuModule] })
+export class DemoModule {}
 ```
+
+For the `tw:` build, swap the specifier to `@egose/shadcn-theme-ng-tw/navigation-menu`. Symbol names are identical.
+
+## Anatomy / Structure
+
+```html
+<nav hlmNavigationMenu>
+  <ul hlmNavigationMenuList>
+    <!-- plain link -->
+    <li hlmNavigationMenuItem>
+      <a hlmNavigationMenuLink routerLink="/docs">Docs</a>
+    </li>
+
+    <!-- trigger + dropdown panel -->
+    <li hlmNavigationMenuItem>
+      <button hlmNavigationMenuTrigger>Products</button>
+      <!-- panel content: style with the content directive … -->
+      <div hlmNavigationMenuContent>
+        <a hlmNavigationMenuLink routerLink="/products/a">Product A</a>
+        <a hlmNavigationMenuLink routerLink="/products/b">Product B</a>
+      </div>
+      <!-- … and project it through the brain portal -->
+      <ng-container *hlmNavigationMenuPortal />
+    </li>
+  </ul>
+</nav>
+```
+
+> Check the spartan-ng `BrnNavigationMenu` docs for the exact content/portal wiring in your installed version; the selectors above are the shadcn styling layer. The common shape is: trigger toggles state, `hlmNavigationMenuContent` styles the floating panel, and `*hlmNavigationMenuPortal` outlets the brain content.
+
+| Class                      | Selector                                                 | Element           | Role                                                       |
+| -------------------------- | -------------------------------------------------------- | ----------------- | ---------------------------------------------------------- |
+| `HlmNavigationMenu`        | `nav[hlmNavigationMenu]`                                 | `<nav>` only      | Root; `BrnNavigationMenu` host                             |
+| `HlmNavigationMenuList`    | `ul[hlmNavigationMenuList]`                              | `<ul>` only       | Horizontal list (`BrnNavigationMenuList`)                  |
+| `HlmNavigationMenuItem`    | `li[hlmNavigationMenuItem]`                              | `<li>` only       | Item wrapper (`BrnNavigationMenuItem`)                     |
+| `HlmNavigationMenuTrigger` | `button[hlmNavigationMenuTrigger]`                       | `<button>` only   | Dropdown trigger with chevron (`BrnNavigationMenuTrigger`) |
+| `HlmNavigationMenuLink`    | `a[hlmNavigationMenuLink]`                               | `<a>` only        | Styled nav link (`BrnNavigationMenuLink`)                  |
+| `HlmNavigationMenuContent` | `[hlmNavigationMenuContent],hlm-navigation-menu-content` | any / element     | Panel styling + `--nav-offset`                             |
+| `HlmNavigationMenuPortal`  | `[hlmNavigationMenuPortal]`                              | structural anchor | Projects `BrnNavigationMenuContent`                        |
+
+## API reference
+
+| Selector                           | Inputs (incl. host-directive passthroughs)                                                           | Outputs                                 | Notes                                                                                                                                 |
+| ---------------------------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `nav[hlmNavigationMenu]`           | `value`, `delayDuration`, `skipDelayDuration`, `orientation`, `openOn` (all via `BrnNavigationMenu`) | `valueChange` (via `BrnNavigationMenu`) | No shadcn inputs of its own                                                                                                           |
+| `ul[hlmNavigationMenuList]`        | —                                                                                                    | —                                       | `gap-0 flex flex-1 list-none items-center justify-center`; stacks when `data-[orientation=vertical]`                                  |
+| `li[hlmNavigationMenuItem]`        | `id` (via `BrnNavigationMenuItem`)                                                                   | —                                       | `relative has-[:focus]:z-10 data-active:z-10`                                                                                         |
+| `button[hlmNavigationMenuTrigger]` | `align` (via `BrnNavigationMenuTrigger`)                                                             | —                                       | Renders `<ng-content>` + `lucideChevronDown` that rotates when the trigger/item is open (`group-data-open` / `group-data-popup-open`) |
+| `a[hlmNavigationMenuLink]`         | `active` (via `BrnNavigationMenuLink`)                                                               | —                                       | `data-[active=true]` active treatment                                                                                                 |
+| `[hlmNavigationMenuContent]`       | `navOffset: number` (default `1.5`, number coercion) → `[style.--nav-offset]`                        | —                                       | Animation/motion classes keyed off `data-[motion]` + `data-[orientation]`; panel chrome (`bg-popover rounded-lg shadow ring-1`)       |
+| `[hlmNavigationMenuPortal]`        | `context`, `class` (via `BrnPopoverContent`-style `BrnNavigationMenuContent` host)                   | —                                       | No shadcn inputs; pure projection directive                                                                                           |
+
+No methods or signals are declared on any of these classes; behavior lives in the brain directives.
+
+## Examples
+
+### 1. Basic bar with links + one dropdown
+
+```ts
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { HlmNavigationMenuImports } from '@egose/shadcn-theme-ng/navigation-menu';
+
+@Component({
+  selector: 'app-nav-basic',
+  standalone: true,
+  imports: [RouterLink, ...HlmNavigationMenuImports],
+  template: `
+    <nav hlmNavigationMenu>
+      <ul hlmNavigationMenuList>
+        <li hlmNavigationMenuItem>
+          <a hlmNavigationMenuLink routerLink="/">Home</a>
+        </li>
+        <li hlmNavigationMenuItem>
+          <button hlmNavigationMenuTrigger>Products</button>
+          <div hlmNavigationMenuContent>
+            <a hlmNavigationMenuLink routerLink="/products/a">Product A</a>
+            <a hlmNavigationMenuLink routerLink="/products/b">Product B</a>
+          </div>
+        </li>
+        <li hlmNavigationMenuItem>
+          <a hlmNavigationMenuLink routerLink="/pricing">Pricing</a>
+        </li>
+      </ul>
+    </nav>
+  `,
+})
+export class NavBasicComponent {}
+```
+
+### 2. Active link state
+
+```ts
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { HlmNavigationMenuImports } from '@egose/shadcn-theme-ng/navigation-menu';
+
+@Component({
+  selector: 'app-nav-active',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive, ...HlmNavigationMenuImports],
+  template: `
+    <nav hlmNavigationMenu>
+      <ul hlmNavigationMenuList>
+        <li hlmNavigationMenuItem>
+          <a
+            hlmNavigationMenuLink
+            routerLink="/docs"
+            routerLinkActive="active"
+            #rla="routerLinkActive"
+            [active]="rla.isActive"
+          >
+            Docs
+          </a>
+        </li>
+        <li hlmNavigationMenuItem>
+          <a
+            hlmNavigationMenuLink
+            routerLink="/blog"
+            routerLinkActive="active"
+            #rlb="routerLinkActive"
+            [active]="rlb.isActive"
+          >
+            Blog
+          </a>
+        </li>
+      </ul>
+    </nav>
+  `,
+})
+export class NavActiveComponent {}
+```
+
+> `[active]` is the brain input forwarded by `HlmNavigationMenuLink`; it drives the `data-[active=true]` treatment. `routerLinkActive` alone only adds a class — bind both.
+
+### 3. Controlled value + orientation
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmNavigationMenuImports } from '@egose/shadcn-theme-ng/navigation-menu';
+
+@Component({
+  selector: 'app-nav-controlled',
+  standalone: true,
+  imports: [...HlmNavigationMenuImports],
+  template: `
+    <nav hlmNavigationMenu [value]="value()" orientation="horizontal" (valueChange)="value.set($event)">
+      <ul hlmNavigationMenuList>
+        <li hlmNavigationMenuItem id="item-docs">
+          <button hlmNavigationMenuTrigger>Docs</button>
+          <div hlmNavigationMenuContent>Docs panel</div>
+        </li>
+        <li hlmNavigationMenuItem id="item-api">
+          <button hlmNavigationMenuTrigger>API</button>
+          <div hlmNavigationMenuContent>API panel</div>
+        </li>
+      </ul>
+    </nav>
+    <p class="tw:text-sm tw:text-muted-foreground">Open: {{ value() ?? 'none' }}</p>
+  `,
+})
+export class NavControlledComponent {
+  readonly value = signal<string | undefined>(undefined);
+}
+```
+
+`value`/`valueChange` and `orientation` are brain inputs/outputs exposed through `HlmNavigationMenu`; `id` is the brain input on each item used as the value key.
+
+### 4. Rich mega-panel with offset tuning
+
+```ts
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { HlmNavigationMenuImports } from '@egose/shadcn-theme-ng/navigation-menu';
+
+@Component({
+  selector: 'app-nav-mega',
+  standalone: true,
+  imports: [RouterLink, ...HlmNavigationMenuImports],
+  template: `
+    <nav hlmNavigationMenu>
+      <ul hlmNavigationMenuList>
+        <li hlmNavigationMenuItem>
+          <button hlmNavigationMenuTrigger>Solutions</button>
+          <div hlmNavigationMenuContent [navOffset]="2">
+            <div class="tw:grid tw:grid-cols-2 tw:gap-2 tw:p-2 tw:min-w-[28rem]">
+              <a hlmNavigationMenuLink routerLink="/solutions/startups">
+                <div>
+                  <div class="tw:font-medium">Startups</div>
+                  <p class="tw:text-xs tw:text-muted-foreground">Launch fast.</p>
+                </div>
+              </a>
+              <a hlmNavigationMenuLink routerLink="/solutions/enterprise">
+                <div>
+                  <div class="tw:font-medium">Enterprise</div>
+                  <p class="tw:text-xs tw:text-muted-foreground">Scale safely.</p>
+                </div>
+              </a>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </nav>
+  `,
+})
+export class NavMegaComponent {}
+```
+
+`navOffset` sets `--nav-offset` (spacing units of gap between trigger and panel); the default `1.5` suits single-column panels, `2+` suits mega-panels.
+
+### 5. Hover vs click + delays (brain behavior)
+
+```ts
+import { Component } from '@angular/core';
+import { HlmNavigationMenuImports } from '@egose/shadcn-theme-ng/navigation-menu';
+
+@Component({
+  selector: 'app-nav-delays',
+  standalone: true,
+  imports: [...HlmNavigationMenuImports],
+  template: `
+    <nav hlmNavigationMenu openOn="hover" [delayDuration]="200" [skipDelayDuration]="300">
+      <ul hlmNavigationMenuList>
+        <li hlmNavigationMenuItem>
+          <button hlmNavigationMenuTrigger>Features</button>
+          <div hlmNavigationMenuContent>Feature panel (hover, 200ms delay)</div>
+        </li>
+      </ul>
+    </nav>
+  `,
+})
+export class NavDelaysComponent {}
+```
+
+`openOn`, `delayDuration`, `skipDelayDuration` are brain inputs — no shadcn wrapper logic involved.
+
+### 6. Data-driven bar + NgModule consumer
+
+```ts
+import { NgModule, Component, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { HlmNavigationMenuModule, HlmNavigationMenuImports } from '@egose/shadcn-theme-ng/navigation-menu';
+
+interface NavEntry {
+  label: string;
+  link?: string;
+  children?: { label: string; link: string }[];
+}
+
+@Component({
+  selector: 'app-nav-data',
+  standalone: true,
+  imports: [RouterLink, ...HlmNavigationMenuImports],
+  template: `
+    <nav hlmNavigationMenu>
+      <ul hlmNavigationMenuList>
+        @for (entry of entries(); track entry.label) {
+          <li hlmNavigationMenuItem>
+            @if (entry.children) {
+              <button hlmNavigationMenuTrigger>{{ entry.label }}</button>
+              <div hlmNavigationMenuContent>
+                @for (child of entry.children; track child.label) {
+                  <a hlmNavigationMenuLink [routerLink]="child.link">{{ child.label }}</a>
+                }
+              </div>
+            } @else {
+              <a hlmNavigationMenuLink [routerLink]="entry.link">{{ entry.label }}</a>
+            }
+          </li>
+        }
+      </ul>
+    </nav>
+  `,
+})
+export class NavDataComponent {
+  readonly entries = signal<NavEntry[]>([
+    { label: 'Home', link: '/' },
+    {
+      label: 'Docs',
+      children: [
+        { label: 'Quickstart', link: '/docs/quickstart' },
+        { label: 'API', link: '/docs/api' },
+      ],
+    },
+  ]);
+}
+
+@NgModule({ imports: [HlmNavigationMenuModule, RouterLink] })
+export class NavLegacyModule {}
+```
+
+## Accessibility notes
+
+- The brain layer owns menubar/tree semantics, focus management, `Escape` handling, and arrow-key traversal — preserve the `nav > ul > li > trigger/link` nesting so roles hold.
+- Triggers must stay `<button>` and links `<a>`; swapping elements breaks both selectors and semantics.
+- The trigger chevron rotates on open via `group-data-*` — decorative (`ng-icon` is aria-hidden by the icon layer); the open state itself is announced by the brain directive.
+- For the active page, bind `[active]` (example 2) so the current link exposes `data-[active=true]` styling in addition to `aria-current` handling by the router.
+
+## Theming / CSS variables
+
+No theming inputs. Panel offset is tunable per instance via `navOffset`; everything else flows from tokens (`bg-background`, `bg-muted` hover, `bg-popover` panel, `ring-foreground/10`). Motion/placement classes respond to brain `data-[motion]` / `data-[orientation]` attributes.
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/menubar` — action-menu bar (File/Edit) vs this component's site-navigation bar.
+- `@egose/shadcn-theme-ng/dropdown-menu` — single-trigger menu when you don't need a full nav strip.
+- `@egose/shadcn-theme-ng/navigation-menu` pairs well with `@egose/shadcn-theme-ng/layout-simple` top rows for docs/marketing shells.

package/navigation-menu/fesm2022/navigation-menu.mjs

@@ -8,12 +8,12 @@ import { lucideChevronDown } from '@ng-icons/lucide';
 
 class HlmNavigationMenu {
     constructor() {
-        classes(() => 'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center');
+        classes(() => "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmNavigationMenu, isStandalone: true, selector: "nav[hlmNavigationMenu]", host: { attributes: { "data-slot": "navigation-menu" } }, hostDirectives: [{ directive: i1.BrnNavigationMenu, inputs: ["value", "value", "delayDuration", "delayDuration", "skipDelayDuration", "skipDelayDuration", "orientation", "orientation", "openOn", "openOn"], outputs: ["valueChange", "valueChange"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmNavigationMenu, isStandalone: true, selector: "nav[hlmNavigationMenu]", host: { attributes: { "data-slot": "navigation-menu" } }, hostDirectives: [{ directive: i1.BrnNavigationMenu, inputs: ["value", "value", "delayDuration", "delayDuration", "skipDelayDuration", "skipDelayDuration", "orientation", "orientation", "openOn", "openOn"], outputs: ["valueChange", "valueChange"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenu, decorators: [{
             type: Directive,
             args: [{
                     selector: 'nav[hlmNavigationMenu]',
@@ -34,17 +34,17 @@ class HlmNavigationMenuContent {
     navOffset = input(1.5, { ...(ngDevMode ? { debugName: "navOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     constructor() {
         classes(() => [
-            'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out top-0 left-0 w-full p-2 pr-2.5 md:w-auto',
+            "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out top-0 left-0 w-full p-2 pr-2.5 md:w-auto",
             'data-[orientation=horizontal]:data-[motion=from-end]:slide-in-from-right-52 data-[orientation=horizontal]:data-[motion=from-start]:slide-in-from-left-52 data-[orientation=horizontal]:data-[motion=to-end]:slide-out-to-right-52 data-[orientation=horizontal]:data-[motion=to-start]:slide-out-to-left-52',
             'data-[orientation=vertical]:data-[motion=from-end]:slide-in-from-bottom-52 data-[orientation=vertical]:data-[motion=from-start]:slide-in-from-top-52 data-[orientation=vertical]:data-[motion=to-end]:slide-out-to-bottom-52 data-[orientation=vertical]:data-[motion=to-start]:slide-out-to-top-52',
-            'data-[orientation=horizontal]:mt-[--spacing(var(--nav-offset))] data-[orientation=vertical]:mx-[--spacing(var(--nav-offset))]',
-            'bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 block',
+            "data-[orientation=horizontal]:mt-[--spacing(var(--nav-offset))] data-[orientation=vertical]:mx-[--spacing(var(--nav-offset))]",
+            "bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 block",
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmNavigationMenuContent, isStandalone: true, selector: "[hlmNavigationMenuContent],hlm-navigation-menu-content", inputs: { navOffset: { classPropertyName: "navOffset", publicName: "navOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-content" }, properties: { "style.--nav-offset": "navOffset()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmNavigationMenuContent, isStandalone: true, selector: "[hlmNavigationMenuContent],hlm-navigation-menu-content", inputs: { navOffset: { classPropertyName: "navOffset", publicName: "navOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-content" }, properties: { "style.--nav-offset": "navOffset()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmNavigationMenuContent],hlm-navigation-menu-content',
@@ -57,12 +57,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmNavigationMenuItem {
     constructor() {
-        classes(() => 'relative has-[:focus]:z-10 data-active:z-10');
+        classes(() => "relative has-[:focus]:z-10 data-active:z-10");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmNavigationMenuItem, isStandalone: true, selector: "li[hlmNavigationMenuItem]", host: { attributes: { "data-slot": "navigation-menu-item" } }, hostDirectives: [{ directive: i1.BrnNavigationMenuItem, inputs: ["id", "id"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmNavigationMenuItem, isStandalone: true, selector: "li[hlmNavigationMenuItem]", host: { attributes: { "data-slot": "navigation-menu-item" } }, hostDirectives: [{ directive: i1.BrnNavigationMenuItem, inputs: ["id", "id"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'li[hlmNavigationMenuItem]',
@@ -77,10 +77,10 @@ class HlmNavigationMenuLink {
     constructor() {
         classes(() => "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)]");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmNavigationMenuLink, isStandalone: true, selector: "a[hlmNavigationMenuLink]", host: { attributes: { "data-slot": "navigation-menu-link" } }, hostDirectives: [{ directive: i1.BrnNavigationMenuLink, inputs: ["active", "active"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmNavigationMenuLink, isStandalone: true, selector: "a[hlmNavigationMenuLink]", host: { attributes: { "data-slot": "navigation-menu-link" } }, hostDirectives: [{ directive: i1.BrnNavigationMenuLink, inputs: ["active", "active"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuLink, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[hlmNavigationMenuLink]',
@@ -94,14 +94,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class HlmNavigationMenuList {
     constructor() {
         classes(() => [
-            'gap-0 group flex flex-1 list-none items-center justify-center',
-            'data-[orientation=vertical]:flex-col',
+            "gap-0 group flex flex-1 list-none items-center justify-center",
+            "data-[orientation=vertical]:flex-col",
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmNavigationMenuList, isStandalone: true, selector: "ul[hlmNavigationMenuList]", host: { attributes: { "data-slot": "navigation-menu-list" } }, hostDirectives: [{ directive: i1.BrnNavigationMenuList }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmNavigationMenuList, isStandalone: true, selector: "ul[hlmNavigationMenuList]", host: { attributes: { "data-slot": "navigation-menu-list" } }, hostDirectives: [{ directive: i1.BrnNavigationMenuList }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuList, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ul[hlmNavigationMenuList]',
@@ -117,10 +117,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], ctorParameters: () => [] });
 
 class HlmNavigationMenuPortal {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmNavigationMenuPortal, isStandalone: true, selector: "[hlmNavigationMenuPortal]", hostDirectives: [{ directive: i1.BrnNavigationMenuContent }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmNavigationMenuPortal, isStandalone: true, selector: "[hlmNavigationMenuPortal]", hostDirectives: [{ directive: i1.BrnNavigationMenuContent }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmNavigationMenuPortal]',
@@ -130,18 +130,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmNavigationMenuTrigger {
     constructor() {
-        classes(() => 'bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none');
+        classes(() => "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: HlmNavigationMenuTrigger, isStandalone: true, selector: "button[hlmNavigationMenuTrigger]", host: { attributes: { "data-slot": "navigation-menu-trigger" } }, providers: [provideIcons({ lucideChevronDown })], hostDirectives: [{ directive: i1.BrnNavigationMenuTrigger, inputs: ["align", "align"] }], ngImport: i0, template: `
-    <ng-content />
-    <ng-icon
-      name="lucideChevronDown"
-      class="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
-    />
-  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmNavigationMenuTrigger, isStandalone: true, selector: "button[hlmNavigationMenuTrigger]", host: { attributes: { "data-slot": "navigation-menu-trigger" } }, providers: [provideIcons({ lucideChevronDown })], hostDirectives: [{ directive: i1.BrnNavigationMenuTrigger, inputs: ["align", "align"] }], ngImport: i0, template: "\n    <ng-content />\n    <ng-icon\n      name=\"lucideChevronDown\"\n      class=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n    />\n  ", 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: HlmNavigationMenuTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuTrigger, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -151,13 +145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     hostDirectives: [{ directive: BrnNavigationMenuTrigger, inputs: ['align'] }],
                     host: { 'data-slot': 'navigation-menu-trigger' },
-                    template: `
-    <ng-content />
-    <ng-icon
-      name="lucideChevronDown"
-      class="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
-    />
-  `,
+                    template: "\n    <ng-content />\n    <ng-icon\n      name=\"lucideChevronDown\"\n      class=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n    />\n  ",
                 }]
         }], ctorParameters: () => [] });
 
@@ -174,8 +162,8 @@ const HlmNavigationMenuImports = [
     HlmNavigationMenuTrigger,
 ];
 class HlmNavigationMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuModule, imports: [HlmNavigationMenu,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuModule, imports: [HlmNavigationMenu,
             HlmNavigationMenuContent,
             HlmNavigationMenuItem,
             HlmNavigationMenuLink,
@@ -188,9 +176,9 @@ class HlmNavigationMenuModule {
             HlmNavigationMenuList,
             HlmNavigationMenuPortal,
             HlmNavigationMenuTrigger] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuModule, imports: [HlmNavigationMenuTrigger] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuModule, imports: [HlmNavigationMenuTrigger] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmNavigationMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNavigationMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmNavigationMenuImports],
@@ -203,4 +191,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmNavigationMenu, HlmNavigationMenuContent, HlmNavigationMenuImports, HlmNavigationMenuItem, HlmNavigationMenuLink, HlmNavigationMenuList, HlmNavigationMenuModule, HlmNavigationMenuPortal, HlmNavigationMenuTrigger };
-//# sourceMappingURL=navigation-menu.mjs.map
+