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

package/menu/types/menu.d.ts

@@ -0,0 +1,137 @@
+import * as i0 from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ClassValue } from 'clsx';
+import * as i1 from '@angular/cdk/menu';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+declare const menuVariants: (props?: ({
+    variant?: "default" | "menubar" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare class HlmMenu {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected readonly _computedClass: i0.Signal<string>;
+    readonly variant: i0.InputSignal<"default" | "menubar" | null | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenu, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmMenu, "hlm-menu", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenu; inputs: {}; outputs: {}; }]>;
+}
+
+declare class HlmMenuBar {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmMenuBar, "hlm-menu-bar", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenuBar; inputs: {}; outputs: {}; }]>;
+}
+
+declare class HlmMenuBarItem {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected readonly _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuBarItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmMenuBarItem, "[hlmMenuBarItem]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.CdkMenuItem; inputs: {}; outputs: {}; }]>;
+}
+
+declare class HlmMenuGroup {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmMenuGroup, "hlm-menu-group", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenuGroup; inputs: {}; outputs: {}; }]>;
+}
+
+declare class HlmMenuLabel {
+    readonly inset: i0.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuLabel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmMenuLabel, "hlm-menu-label", never, { "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class HlmMenuSeparator {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected readonly _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuSeparator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmMenuSeparator, "hlm-menu-separator", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class HlmSubMenu {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected readonly _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmSubMenu, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmSubMenu, "hlm-sub-menu", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.CdkMenu; inputs: {}; outputs: {}; }]>;
+}
+
+declare class HlmMenuItem {
+    readonly variant: i0.InputSignal<"default" | "destructive">;
+    readonly inset: i0.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected readonly _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmMenuItem, "[hlmMenuItem]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.CdkMenuItem; inputs: { "cdkMenuItemDisabled": "disabled"; }; outputs: { "cdkMenuItemTriggered": "triggered"; }; }]>;
+}
+
+declare class HlmMenuItemIcon {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuItemIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmMenuItemIcon, "[hlmMenuIcon]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class HlmMenuItemSubIndicator {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected readonly _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuItemSubIndicator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmMenuItemSubIndicator, "hlm-menu-item-sub-indicator", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class HlmMenuItemRadioIndicator {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected readonly _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuItemRadioIndicator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmMenuItemRadioIndicator, "hlm-menu-item-radio", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class HlmMenuItemCheck {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuItemCheck, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmMenuItemCheck, "hlm-menu-item-check", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class HlmMenuShortcut {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuShortcut, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmMenuShortcut, "hlm-menu-shortcut", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class HlmMenuItemCheckbox {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected readonly _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuItemCheckbox, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmMenuItemCheckbox, "[hlmMenuItemCheckbox]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.CdkMenuItemCheckbox; inputs: { "cdkMenuItemDisabled": "disabled"; "cdkMenuItemChecked": "checked"; }; outputs: { "cdkMenuItemTriggered": "triggered"; }; }]>;
+}
+
+declare class HlmMenuItemRadio {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected readonly _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuItemRadio, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmMenuItemRadio, "[hlmMenuItemRadio]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.CdkMenuItemRadio; inputs: { "cdkMenuItemDisabled": "disabled"; "cdkMenuItemChecked": "checked"; }; outputs: { "cdkMenuItemTriggered": "triggered"; }; }]>;
+}
+
+declare const HlmMenuItemImports: (typeof HlmMenuGroup)[];
+declare const HlmMenuStructureImports: readonly [typeof HlmMenuLabel, typeof HlmMenuSeparator];
+declare const HlmMenuImports: readonly [...(typeof HlmMenuGroup)[], typeof HlmMenuLabel, typeof HlmMenuSeparator, typeof HlmMenu, typeof HlmSubMenu];
+declare const HlmMenuBarImports: readonly [...(typeof HlmMenuGroup)[], typeof HlmMenuLabel, typeof HlmMenuSeparator, typeof HlmMenu, typeof HlmSubMenu, typeof HlmMenuBar, typeof HlmMenuBarItem];
+declare class HlmMenuItemModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuItemModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmMenuItemModule, never, [typeof HlmMenuItem, typeof HlmMenuItemIcon, typeof HlmMenuGroup, typeof HlmMenuItemSubIndicator, typeof HlmMenuItemRadioIndicator, typeof HlmMenuItemCheck, typeof HlmMenuShortcut, typeof HlmMenuItemCheckbox, typeof HlmMenuItemRadio], [typeof HlmMenuItem, typeof HlmMenuItemIcon, typeof HlmMenuGroup, typeof HlmMenuItemSubIndicator, typeof HlmMenuItemRadioIndicator, typeof HlmMenuItemCheck, typeof HlmMenuShortcut, typeof HlmMenuItemCheckbox, typeof HlmMenuItemRadio]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<HlmMenuItemModule>;
+}
+declare class HlmMenuModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmMenuModule, never, [typeof HlmMenuItem, typeof HlmMenuItemIcon, typeof HlmMenuGroup, typeof HlmMenuItemSubIndicator, typeof HlmMenuItemRadioIndicator, typeof HlmMenuItemCheck, typeof HlmMenuShortcut, typeof HlmMenuItemCheckbox, typeof HlmMenuItemRadio, typeof HlmMenuLabel, typeof HlmMenuSeparator, typeof HlmMenu, typeof HlmSubMenu], [typeof HlmMenuItem, typeof HlmMenuItemIcon, typeof HlmMenuGroup, typeof HlmMenuItemSubIndicator, typeof HlmMenuItemRadioIndicator, typeof HlmMenuItemCheck, typeof HlmMenuShortcut, typeof HlmMenuItemCheckbox, typeof HlmMenuItemRadio, typeof HlmMenuLabel, typeof HlmMenuSeparator, typeof HlmMenu, typeof HlmSubMenu]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<HlmMenuModule>;
+}
+declare class HlmMenuBarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmMenuBarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmMenuBarModule, never, [typeof HlmMenuItem, typeof HlmMenuItemIcon, typeof HlmMenuGroup, typeof HlmMenuItemSubIndicator, typeof HlmMenuItemRadioIndicator, typeof HlmMenuItemCheck, typeof HlmMenuShortcut, typeof HlmMenuItemCheckbox, typeof HlmMenuItemRadio, typeof HlmMenuLabel, typeof HlmMenuSeparator, typeof HlmMenu, typeof HlmSubMenu, typeof HlmMenuBar, typeof HlmMenuBarItem], [typeof HlmMenuItem, typeof HlmMenuItemIcon, typeof HlmMenuGroup, typeof HlmMenuItemSubIndicator, typeof HlmMenuItemRadioIndicator, typeof HlmMenuItemCheck, typeof HlmMenuShortcut, typeof HlmMenuItemCheckbox, typeof HlmMenuItemRadio, typeof HlmMenuLabel, typeof HlmMenuSeparator, typeof HlmMenu, typeof HlmSubMenu, typeof HlmMenuBar, typeof HlmMenuBarItem]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<HlmMenuBarModule>;
+}
+
+export { HlmMenu, HlmMenuBar, HlmMenuBarImports, HlmMenuBarItem, HlmMenuBarModule, HlmMenuGroup, HlmMenuImports, HlmMenuItem, HlmMenuItemCheck, HlmMenuItemCheckbox, HlmMenuItemIcon, HlmMenuItemImports, HlmMenuItemModule, HlmMenuItemRadio, HlmMenuItemRadioIndicator, HlmMenuItemSubIndicator, HlmMenuLabel, HlmMenuModule, HlmMenuSeparator, HlmMenuShortcut, HlmMenuStructureImports, HlmSubMenu, menuVariants };

package/menubar/README.md

@@ -1,11 +1,349 @@
-# Menubar
+# Menubar (`@egose/shadcn-theme-ng/menubar`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+Desktop app-style menu bar (shadcn/ui `menubar` equivalent): a horizontal `hlm-menubar` strip whose `hlmMenubarTrigger` buttons each open a floating menu (in practice, an `hlm-menu` / `hlm-dropdown-menu` surface). The bar and trigger are thin shadcn wrappers around Angular CDK `CdkMenuBar` / `CdkMenuItem` + `CdkMenuTrigger`, with spartan-ng menu-position helpers (`align`/`side`, global config token) for popup placement.
 
-## Building
+Ships as `@egose/shadcn-theme-ng/menubar` and `@egose/shadcn-theme-ng-tw/menubar` (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 menubar
+# 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 `@angular/cdk/menu` and `@spartan-ng/brain/core` position helpers, and you will typically pair it with `@egose/shadcn-theme-ng/menu` or `.../dropdown-menu` for the popup surfaces. No extra install step is needed beyond the package install above.
+
+## Imports
+
+Real exported symbols (from `src/public-api.ts`):
+
+```ts
+import {
+  HlmMenubar, // directive: [hlmMenubar],hlm-menubar
+  HlmMenubarTrigger, // directive: button[hlmMenubarTrigger]
+  HlmMenubarConfig, // interface { align, side }
+  provideHlmMenubarConfig, // (config: Partial<HlmMenubarConfig>) => ValueProvider
+  injectHlmMenubarConfig, // () => HlmMenubarConfig
+  HlmMenubarImports, // readonly [HlmMenubar, HlmMenubarTrigger]
+  HlmMenubarModule, // NgModule wrapping HlmMenubarImports
+} from '@egose/shadcn-theme-ng/menubar';
+```
+
+Standalone usage:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmMenubarImports } from '@egose/shadcn-theme-ng/menubar';
+import { HlmMenuImports } from '@egose/shadcn-theme-ng/menu';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [...HlmMenubarImports, ...HlmMenuImports],
+  template: `
+    <hlm-menubar>
+      <button hlmMenubarTrigger [hlmMenubarTrigger]="fileMenu">File</button>
+    </hlm-menubar>
+    <ng-template #fileMenu>
+      <hlm-menu><button hlmMenuItem>New</button></hlm-menu>
+    </ng-template>
+  `,
+})
+export class DemoComponent {}
+```
+
+NgModule usage:
+
+```ts
+import { NgModule } from '@angular/core';
+import { HlmMenubarModule } from '@egose/shadcn-theme-ng/menubar';
+
+@NgModule({ imports: [HlmMenubarModule] })
+export class DemoModule {}
+```
+
+For the `tw:` build, swap the specifier to `@egose/shadcn-theme-ng-tw/menubar`. Symbol names are identical.
+
+## Anatomy / Structure
+
+```html
+<hlm-menubar>
+  <button hlmMenubarTrigger [hlmMenubarTrigger]="fileTpl">File</button>
+  <button hlmMenubarTrigger [hlmMenubarTrigger]="editTpl" [hlmMenubarTriggerData]="{ user: me }">Edit</button>
+  <button hlmMenubarTrigger [disabled]="locked()">View</button>
+</hlm-menubar>
+
+<ng-template #fileTpl>
+  <hlm-menu variant="menubar">
+    <button hlmMenuItem>New file</button>
+    <hlm-menu-separator />
+    <button hlmMenuItem variant="destructive">Delete</button>
+  </hlm-menu>
+</ng-template>
+```
+
+| Class               | Selector                    | Host requirements                        | Role                                                                                          |
+| ------------------- | --------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `HlmMenubar`        | `[hlmMenubar],hlm-menubar`  | any element or the `hlm-menubar` element | Bar container (`CdkMenuBar` host directive, `data-slot="menubar"`)                            |
+| `HlmMenubarTrigger` | `button[hlmMenubarTrigger]` | `<button>` only                          | Menu button (`CdkMenuItem` + `CdkMenuTrigger` host directives, `data-slot="menubar-trigger"`) |
+
+The trigger wires two CDK inputs under shadcn aliases: `hlmMenubarTrigger` → `cdkMenuTriggerFor` (the template), `hlmMenubarTriggerData` → `cdkMenuTriggerData` (context passed to the template). It also re-emits `cdkMenuOpened`/`cdkMenuClosed` as `hlmDropdownMenuOpened`/`hlmDropdownMenuClosed` (names inherited from the dropdown-menu lineage — bind those names, not the `cdk*` ones).
+
+## API reference
+
+### `HlmMenubar` (`[hlmMenubar],hlm-menubar`)
+
+No inputs/outputs/methods. Host directives: `CdkMenuBar`. Styling: `bg-background h-9 gap-1 rounded-md border p-1 shadow-xs flex items-center`.
+
+### `HlmMenubarTrigger` (`button[hlmMenubarTrigger]`)
+
+| Member                  | Kind               | Type / Default                                           | Notes                                                                                               |
+| ----------------------- | ------------------ | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `disabled`              | input              | `boolean`, `false` (boolean coercion)                    | Forwarded to `CdkMenuItem` (`cdkMenuItemDisabled`); also sets host `[disabled]` and `data-disabled` |
+| `align`                 | input              | `MenuAlign`, default from `HlmMenubarConfig` (`'start'`) | Menu alignment; drives `menuPosition` via `createMenuPosition(align, side)`                         |
+| `side`                  | input              | `MenuSide`, default from config (`'bottom'`)             | Menu side; drives `menuPosition`                                                                    |
+| `hlmMenubarTrigger`     | input (CDK alias)  | `Menu` template ref                                      | `cdkMenuTriggerFor`: the popup template                                                             |
+| `hlmMenubarTriggerData` | input (CDK alias)  | `unknown`                                                | `cdkMenuTriggerData`: context for the popup template                                                |
+| `hlmDropdownMenuOpened` | output (CDK alias) | `void`                                                   | Re-emits `cdkMenuOpened`                                                                            |
+| `hlmDropdownMenuClosed` | output (CDK alias) | `void`                                                   | Re-emits `cdkMenuClosed`                                                                            |
+
+The constructor sets the CDK `transformOriginSelector` to `'[data-slot="dropdown-menu"]'` and syncs `menuPosition` in an `effect`.
+
+### `HlmMenubarConfig` + providers
+
+| Symbol                            | Shape                                          | Notes                                                                  |
+| --------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------- |
+| `HlmMenubarConfig`                | `{ align: MenuAlign; side: MenuSide }`         | Defaults `{ align: 'start', side: 'bottom' }`                          |
+| `provideHlmMenubarConfig(config)` | `(Partial<HlmMenubarConfig>) => ValueProvider` | Provide at component/root to change defaults for all triggers in scope |
+| `injectHlmMenubarConfig()`        | `() => HlmMenubarConfig`                       | Reads the token, falls back to defaults                                |
+
+## Examples
+
+### 1. Basic File/Edit bar
+
+```ts
+import { Component } from '@angular/core';
+import { CdkMenuModule } from '@angular/cdk/menu';
+import { HlmMenubarImports } from '@egose/shadcn-theme-ng/menubar';
+import { HlmMenuImports } from '@egose/shadcn-theme-ng/menu';
+
+@Component({
+  selector: 'app-menubar-basic',
+  standalone: true,
+  imports: [CdkMenuModule, ...HlmMenubarImports, ...HlmMenuImports],
+  template: `
+    <hlm-menubar>
+      <button hlmMenubarTrigger [hlmMenubarTrigger]="fileTpl">File</button>
+      <button hlmMenubarTrigger [hlmMenubarTrigger]="editTpl">Edit</button>
+    </hlm-menubar>
+
+    <ng-template #fileTpl>
+      <hlm-menu variant="menubar">
+        <button hlmMenuItem (cdkMenuItemTriggered)="onNew()">New file</button>
+        <button hlmMenuItem>Open…</button>
+        <hlm-menu-separator />
+        <button hlmMenuItem variant="destructive">Delete</button>
+      </hlm-menu>
+    </ng-template>
+
+    <ng-template #editTpl>
+      <hlm-menu variant="menubar">
+        <button hlmMenuItem>Undo</button>
+        <button hlmMenuItem>Redo</button>
+      </hlm-menu>
+    </ng-template>
+  `,
+})
+export class MenubarBasicComponent {
+  onNew(): void {
+    console.log('new file');
+  }
+}
+```
+
+```html
+<hlm-menubar>
+  <button hlmMenubarTrigger [hlmMenubarTrigger]="fileTpl">File</button>
+  <button hlmMenubarTrigger [hlmMenubarTrigger]="editTpl">Edit</button>
+</hlm-menubar>
+```
+
+### 2. Disabled trigger + open/close events
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmMenubarImports } from '@egose/shadcn-theme-ng/menubar';
+import { HlmMenuImports } from '@egose/shadcn-theme-ng/menu';
+
+@Component({
+  selector: 'app-menubar-events',
+  standalone: true,
+  imports: [...HlmMenubarImports, ...HlmMenuImports],
+  template: `
+    <hlm-menubar>
+      <button
+        hlmMenubarTrigger
+        [hlmMenubarTrigger]="viewTpl"
+        [disabled]="locked()"
+        (hlmDropdownMenuOpened)="onOpen()"
+        (hlmDropdownMenuClosed)="onClose()"
+      >
+        View
+      </button>
+    </hlm-menubar>
+
+    <ng-template #viewTpl>
+      <hlm-menu variant="menubar">
+        <button hlmMenuItemCheckbox [cdkMenuItemChecked]="true">
+          <hlm-menu-item-check />
+          Show sidebar
+        </button>
+      </hlm-menu>
+    </ng-template>
+
+    <p class="tw:text-sm tw:text-muted-foreground">Menu is {{ open() ? 'open' : 'closed' }}.</p>
+  `,
+})
+export class MenubarEventsComponent {
+  readonly locked = signal(false);
+  readonly open = signal(false);
+
+  onOpen(): void {
+    this.open.set(true);
+  }
+  onClose(): void {
+    this.open.set(false);
+  }
+}
 ```
+
+### 3. Placement: align/side per trigger
+
+```ts
+import { Component } from '@angular/core';
+import { HlmMenubarImports } from '@egose/shadcn-theme-ng/menubar';
+import { HlmMenuImports } from '@egose/shadcn-theme-ng/menu';
+
+@Component({
+  selector: 'app-menubar-placement',
+  standalone: true,
+  imports: [...HlmMenubarImports, ...HlmMenuImports],
+  template: `
+    <hlm-menubar>
+      <button hlmMenubarTrigger [hlmMenubarTrigger]="aTpl" align="start" side="bottom">Start/Bottom</button>
+      <button hlmMenubarTrigger [hlmMenubarTrigger]="bTpl" align="end" side="bottom">End/Bottom</button>
+    </hlm-menubar>
+
+    <ng-template #aTpl>
+      <hlm-menu variant="menubar"><button hlmMenuItem>Item A</button></hlm-menu>
+    </ng-template>
+    <ng-template #bTpl>
+      <hlm-menu variant="menubar"><button hlmMenuItem>Item B</button></hlm-menu>
+    </ng-template>
+  `,
+})
+export class MenubarPlacementComponent {}
+```
+
+### 4. Global defaults via `provideHlmMenubarConfig`
+
+```ts
+import { Component } from '@angular/core';
+import { HlmMenubarImports, provideHlmMenubarConfig } from '@egose/shadcn-theme-ng/menubar';
+import { HlmMenuImports } from '@egose/shadcn-theme-ng/menu';
+
+@Component({
+  selector: 'app-menubar-config',
+  standalone: true,
+  imports: [...HlmMenubarImports, ...HlmMenuImports],
+  providers: [provideHlmMenubarConfig({ align: 'end', side: 'bottom' })],
+  template: `
+    <hlm-menubar>
+      <!-- inherits align=end from the provider; side can still be overridden per trigger -->
+      <button hlmMenubarTrigger [hlmMenubarTrigger]="tpl">File</button>
+    </hlm-menubar>
+    <ng-template #tpl>
+      <hlm-menu variant="menubar"><button hlmMenuItem>New</button></hlm-menu>
+    </ng-template>
+  `,
+})
+export class MenubarConfigComponent {}
+```
+
+### 5. Passing data into the menu template
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmMenubarImports } from '@egose/shadcn-theme-ng/menubar';
+import { HlmMenuImports } from '@egose/shadcn-theme-ng/menu';
+
+@Component({
+  selector: 'app-menubar-data',
+  standalone: true,
+  imports: [...HlmMenubarImports, ...HlmMenuImports],
+  template: `
+    <hlm-menubar>
+      <button hlmMenubarTrigger [hlmMenubarTrigger]="shareTpl" [hlmMenubarTriggerData]="{ file: file() }">Share</button>
+    </hlm-menubar>
+
+    <ng-template #shareTpl let-file="file">
+      <hlm-menu variant="menubar">
+        <hlm-menu-label>Share “{{ file }}”</hlm-menu-label>
+        <button hlmMenuItem>Email link</button>
+        <button hlmMenuItem>Copy link</button>
+      </hlm-menu>
+    </ng-template>
+  `,
+})
+export class MenubarDataComponent {
+  readonly file = signal('proposal.docx');
+}
+```
+
+### 6. NgModule consumer + attribute selector form
+
+```ts
+import { NgModule, Component } from '@angular/core';
+import { HlmMenubarModule } from '@egose/shadcn-theme-ng/menubar';
+import { HlmMenuModule } from '@egose/shadcn-theme-ng/menu';
+
+@Component({
+  selector: 'app-menubar-legacy',
+  template: `
+    <div hlmMenubar>
+      <button hlmMenubarTrigger [hlmMenubarTrigger]="tpl">File</button>
+    </div>
+    <ng-template #tpl>
+      <hlm-menu variant="menubar"><button hlmMenuItem>New</button></hlm-menu>
+    </ng-template>
+  `,
+})
+export class MenubarLegacyComponent {}
+
+@NgModule({
+  declarations: [MenubarLegacyComponent],
+  imports: [HlmMenubarModule, HlmMenuModule],
+  exports: [MenubarLegacyComponent],
+})
+export class MenubarLegacyModule {}
+```
+
+## Accessibility notes
+
+- `CdkMenuBar` provides the menubar role, roving tabindex across triggers, arrow-key movement, and `aria-expanded` on open triggers — keep triggers as real `<button>` elements inside the bar so the pattern holds.
+- The trigger selector requires `<button>`; do not attach `hlmMenubarTrigger` to `<a>`/`<div>`.
+- Disabled triggers expose `disabled` + `data-disabled` and are skipped by keyboard navigation.
+- Popup content (`hlm-menu`) carries menu semantics; label open/close state changes if you add extra status text (see example 2) with `aria-live` where appropriate.
+
+## Theming / CSS variables
+
+No theming inputs. The bar uses `bg-background border shadow-xs`; triggers use `hover:bg-muted aria-expanded:bg-muted data-disabled:opacity-50`. Override placement globally with `provideHlmMenubarConfig`, per-trigger with `align`/`side`.
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/menu` (`HlmMenu`, `HlmMenuItem`, …) — popup surfaces and rows for menubar templates.
+- `@egose/shadcn-theme-ng/dropdown-menu` — alternative trigger/menu pair when you need a single button menu instead of a bar.
+- `@egose/shadcn-theme-ng/navigation-menu` — site-navigation pattern (links + content panels) vs the menubar's action-menu pattern.

package/menubar/fesm2022/menubar.mjs

@@ -7,12 +7,12 @@ import { createMenuPosition, MENU_SIDE } from '@spartan-ng/brain/core';
 
 class HlmMenubar {
     constructor() {
-        classes(() => 'bg-background h-9 gap-1 rounded-md border p-1 shadow-xs flex items-center');
+        classes(() => 'tw:bg-background tw:h-9 tw:gap-1 tw:rounded-md tw:border tw:p-1 tw:shadow-xs tw:flex tw:items-center');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMenubar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmMenubar, isStandalone: true, selector: "[hlmMenubar],hlm-menubar", host: { attributes: { "data-slot": "menubar" } }, hostDirectives: [{ directive: i1.CdkMenuBar }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenubar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmMenubar, isStandalone: true, selector: "[hlmMenubar],hlm-menubar", host: { attributes: { "data-slot": "menubar" } }, hostDirectives: [{ directive: i1.CdkMenuBar }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMenubar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenubar, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmMenubar],hlm-menubar',
@@ -54,12 +54,12 @@ class HlmMenubarTrigger {
         effect(() => {
             this._cdkTrigger.menuPosition = this._menuPosition();
         });
-        classes(() => 'hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium flex items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50');
+        classes(() => 'tw:hover:bg-muted tw:aria-expanded:bg-muted tw:rounded-sm tw:px-2 tw:py-1 tw:text-sm tw:font-medium tw:flex tw:items-center tw:outline-hidden tw:select-none tw:data-disabled:pointer-events-none tw:data-disabled:opacity-50');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMenubarTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmMenubarTrigger, isStandalone: true, selector: "button[hlmMenubarTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "menubar-trigger" }, properties: { "disabled": "disabled() ", "attr.data-disabled": "disabled() ? \"\" : null" } }, providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmMenubarTrigger) }], hostDirectives: [{ directive: i1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled"] }, { directive: i1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "hlmMenubarTrigger", "cdkMenuTriggerData", "hlmMenubarTriggerData"], outputs: ["cdkMenuOpened", "hlmDropdownMenuOpened", "cdkMenuClosed", "hlmDropdownMenuClosed"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenubarTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenubarTrigger, isStandalone: true, selector: "button[hlmMenubarTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "menubar-trigger" }, properties: { "disabled": "disabled() ", "attr.data-disabled": "disabled() ? \"\" : null" } }, providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmMenubarTrigger) }], hostDirectives: [{ directive: i1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled"] }, { directive: i1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "hlmMenubarTrigger", "cdkMenuTriggerData", "hlmMenubarTriggerData"], outputs: ["cdkMenuOpened", "hlmDropdownMenuOpened", "cdkMenuClosed", "hlmDropdownMenuClosed"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMenubarTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenubarTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[hlmMenubarTrigger]',
@@ -88,11 +88,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmMenubarImports = [HlmMenubar, HlmMenubarTrigger];
 class HlmMenubarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMenubarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmMenubarModule, imports: [HlmMenubar, HlmMenubarTrigger], exports: [HlmMenubar, HlmMenubarTrigger] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMenubarModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenubarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmMenubarModule, imports: [HlmMenubar, HlmMenubarTrigger], exports: [HlmMenubar, HlmMenubarTrigger] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenubarModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMenubarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenubarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmMenubarImports],
@@ -105,4 +105,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmMenubar, HlmMenubarImports, HlmMenubarModule, HlmMenubarTrigger, injectHlmMenubarConfig, provideHlmMenubarConfig };
-//# sourceMappingURL=menubar.mjs.map
+