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

package/dialog/fesm2022/dialog.mjs

@@ -9,7 +9,7 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
 import { HlmBtn } from '@egose/shadcn-theme-ng-tw/button';
 
-const hlmDialogOverlayClass = hlm('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs');
+const hlmDialogOverlayClass = hlm('tw:data-open:animate-in tw:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 tw:isolate tw:bg-black/10 tw:duration-100 tw:supports-backdrop-filter:backdrop-blur-xs');
 class HlmDialogOverlay {
     _classSettable = injectCustomClassSettable({ optional: true, host: true });
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
@@ -21,10 +21,10 @@ class HlmDialogOverlay {
             untracked(() => this._classSettable?.setClassToCustomElement(newClass));
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmDialogOverlay, isStandalone: true, selector: "[hlmDialogOverlay],hlm-dialog-overlay", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.BrnDialogOverlay }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmDialogOverlay, isStandalone: true, selector: "[hlmDialogOverlay],hlm-dialog-overlay", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.BrnDialogOverlay }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogOverlay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogOverlay, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDialogOverlay],hlm-dialog-overlay',
@@ -33,8 +33,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], ctorParameters: () => [], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class HlmDialog extends BrnDialog {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: HlmDialog, isStandalone: true, selector: "hlm-dialog", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmDialog, isStandalone: true, selector: "hlm-dialog", providers: [
             {
                 provide: BrnDialog,
                 useExisting: forwardRef(() => HlmDialog),
@@ -47,7 +47,7 @@ class HlmDialog extends BrnDialog {
     <ng-content />
   `, isInline: true, dependencies: [{ kind: "directive", type: HlmDialogOverlay, selector: "[hlmDialogOverlay],hlm-dialog-overlay", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-dialog',
@@ -71,10 +71,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }] });
 
 class HlmDialogClose {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDialogClose, isStandalone: true, selector: "button[hlmDialogClose]", host: { attributes: { "data-slot": "dialog-close" } }, hostDirectives: [{ directive: i1.BrnDialogClose }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDialogClose, isStandalone: true, selector: "button[hlmDialogClose]", host: { attributes: { "data-slot": "dialog-close" } }, hostDirectives: [{ directive: i1.BrnDialogClose }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogClose, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogClose, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[hlmDialogClose]',
@@ -93,12 +93,12 @@ class HlmDialogContent {
     _dynamicComponentClass = this._dialogContext?.$dynamicComponentClass;
     constructor() {
         classes(() => [
-            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md relative mx-auto w-full outline-none sm:mx-0',
+            'tw:bg-popover tw:text-popover-foreground tw:data-open:animate-in tw:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 tw:data-closed:zoom-out-95 tw:data-open:zoom-in-95 tw:ring-foreground/10 tw:grid tw:max-w-[calc(100%-2rem)] tw:gap-6 tw:rounded-xl tw:p-6 tw:text-sm tw:ring-1 tw:duration-100 tw:sm:max-w-md tw:relative tw:mx-auto tw:w-full tw:outline-none tw:sm:mx-0',
             this._dynamicComponentClass,
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmDialogContent, isStandalone: true, selector: "hlm-dialog-content", inputs: { showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dialog-content" }, properties: { "attr.data-state": "state()" } }, providers: [provideIcons({ lucideX })], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDialogContent, isStandalone: true, selector: "hlm-dialog-content", inputs: { showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dialog-content" }, properties: { "attr.data-state": "state()" } }, providers: [provideIcons({ lucideX })], ngImport: i0, template: `
     @if (component) {
       <ng-container [ngComponentOutlet]="component" />
     } @else {
@@ -106,14 +106,14 @@ class HlmDialogContent {
     }
 
     @if (showCloseButton()) {
-      <button hlmBtn variant="ghost" size="icon-sm" class="absolute end-4 top-4" hlmDialogClose>
-        <span class="sr-only">close</span>
+      <button hlmBtn variant="ghost" size="icon-sm" class="tw:absolute tw:end-4 tw:top-4" hlmDialogClose>
+        <span class="tw:sr-only">close</span>
         <ng-icon name="lucideX" />
       </button>
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }, { kind: "directive", type: HlmDialogClose, selector: "button[hlmDialogClose]" }, { 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: HlmDialogContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-dialog-content',
@@ -132,8 +132,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     }
 
     @if (showCloseButton()) {
-      <button hlmBtn variant="ghost" size="icon-sm" class="absolute end-4 top-4" hlmDialogClose>
-        <span class="sr-only">close</span>
+      <button hlmBtn variant="ghost" size="icon-sm" class="tw:absolute tw:end-4 tw:top-4" hlmDialogClose>
+        <span class="tw:sr-only">close</span>
         <ng-icon name="lucideX" />
       </button>
     }
@@ -143,12 +143,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmDialogDescription {
     constructor() {
-        classes(() => 'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3');
+        classes(() => 'tw:text-muted-foreground tw:*:[a]:hover:text-foreground tw:text-sm tw:*:[a]:underline tw:*:[a]:underline-offset-3');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDialogDescription, isStandalone: true, selector: "[hlmDialogDescription]", host: { attributes: { "data-slot": "dialog-description" } }, hostDirectives: [{ directive: i1.BrnDialogDescription }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDialogDescription, isStandalone: true, selector: "[hlmDialogDescription]", host: { attributes: { "data-slot": "dialog-description" } }, hostDirectives: [{ directive: i1.BrnDialogDescription }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogDescription, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDialogDescription]',
@@ -159,12 +159,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmDialogFooter {
     constructor() {
-        classes(() => 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end');
+        classes(() => 'tw:flex tw:flex-col-reverse tw:gap-2 tw:sm:flex-row tw:sm:justify-end');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDialogFooter, isStandalone: true, selector: "[hlmDialogFooter],hlm-dialog-footer", host: { attributes: { "data-slot": "dialog-footer" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDialogFooter, isStandalone: true, selector: "[hlmDialogFooter],hlm-dialog-footer", host: { attributes: { "data-slot": "dialog-footer" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDialogFooter],hlm-dialog-footer',
@@ -174,12 +174,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmDialogHeader {
     constructor() {
-        classes(() => 'gap-2 flex flex-col');
+        classes(() => 'tw:gap-2 tw:flex tw:flex-col');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDialogHeader, isStandalone: true, selector: "[hlmDialogHeader],hlm-dialog-header", host: { attributes: { "data-slot": "dialog-header" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDialogHeader, isStandalone: true, selector: "[hlmDialogHeader],hlm-dialog-header", host: { attributes: { "data-slot": "dialog-header" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDialogHeader],hlm-dialog-header',
@@ -188,10 +188,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], ctorParameters: () => [] });
 
 class HlmDialogPortal {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDialogPortal, isStandalone: true, selector: "[hlmDialogPortal]", hostDirectives: [{ directive: i1.BrnDialogContent, inputs: ["context", "context", "class", "class"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDialogPortal, isStandalone: true, selector: "[hlmDialogPortal]", hostDirectives: [{ directive: i1.BrnDialogContent, inputs: ["context", "context", "class", "class"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDialogPortal]',
@@ -201,12 +201,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmDialogTitle {
     constructor() {
-        classes(() => 'leading-none font-medium');
+        classes(() => 'tw:leading-none tw:font-medium');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDialogTitle, isStandalone: true, selector: "[hlmDialogTitle]", host: { attributes: { "data-slot": "dialog-title" } }, hostDirectives: [{ directive: i1.BrnDialogTitle }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDialogTitle, isStandalone: true, selector: "[hlmDialogTitle]", host: { attributes: { "data-slot": "dialog-title" } }, hostDirectives: [{ directive: i1.BrnDialogTitle }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDialogTitle]',
@@ -216,10 +216,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], ctorParameters: () => [] });
 
 class HlmDialogTrigger {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDialogTrigger, isStandalone: true, selector: "button[hlmDialogTrigger],button[hlmDialogTriggerFor]", host: { attributes: { "data-slot": "dialog-trigger" } }, hostDirectives: [{ directive: i1.BrnDialogTrigger, inputs: ["id", "id", "brnDialogTriggerFor", "hlmDialogTriggerFor", "type", "type"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDialogTrigger, isStandalone: true, selector: "button[hlmDialogTrigger],button[hlmDialogTriggerFor]", host: { attributes: { "data-slot": "dialog-trigger" } }, hostDirectives: [{ directive: i1.BrnDialogTrigger, inputs: ["id", "id", "brnDialogTriggerFor", "hlmDialogTriggerFor", "type", "type"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[hlmDialogTrigger],button[hlmDialogTriggerFor]',
@@ -243,10 +243,10 @@ class HlmDialogService {
         };
         return this._brnDialogService.open(HlmDialogContent, undefined, mergedOptions.context, mergedOptions);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -269,8 +269,8 @@ const HlmDialogImports = [
     HlmDialogClose,
 ];
 class HlmDialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogModule, imports: [HlmDialog,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogModule, imports: [HlmDialog,
             HlmDialogContent,
             HlmDialogDescription,
             HlmDialogFooter,
@@ -289,9 +289,9 @@ class HlmDialogModule {
             HlmDialogTitle,
             HlmDialogTrigger,
             HlmDialogClose] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogModule, imports: [HlmDialogContent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogModule, imports: [HlmDialogContent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmDialogImports],
@@ -304,4 +304,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmDialog, HlmDialogClose, HlmDialogContent, HlmDialogDescription, HlmDialogFooter, HlmDialogHeader, HlmDialogImports, HlmDialogModule, HlmDialogOverlay, HlmDialogPortal, HlmDialogService, HlmDialogTitle, HlmDialogTrigger, hlmDialogOverlayClass };
-//# sourceMappingURL=dialog.mjs.map
+

package/drawer/README.md

@@ -1,11 +1,401 @@
-# Drawer
+# Drawer (`@egose/shadcn-theme-ng/drawer`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+A swipeable bottom/side panel in the shadcn/ui Drawer (vaul-style) look: overlay + sliding content with header, title, description, and footer slots. Equivalent to shadcn/ui `Drawer`.
 
-## Building
+The Angular implementation is a thin styling layer over the headless
+[`BrnDrawer*` primitives from `@spartan-ng/brain/drawer`](https://www.spartan-ng.com/) (built on the
+brain dialog core): `HlmDrawer` extends `BrnDrawer`, `HlmDrawerContent` composes `BrnDrawerHandle`
+with direction-aware slide animations, and trigger/close/title/description/overlay directives compose
+their `Brn*` counterparts via `hostDirectives`. Styling uses `hlm()` / `classes()` from
+`@egose/shadcn-theme-ng/utils`.
 
-To build the library, run:
+> **Ships as:** `@egose/shadcn-theme-ng/drawer` and `@egose/shadcn-theme-ng-tw/drawer`
+> (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 drawer
+# 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 has no extra runtime component
+dependencies beyond `@egose/shadcn-theme-ng/utils`.
+
+## Imports
+
+All symbols are exported from the subpath root (`projects/drawer/src/public-api.ts`):
+
+```ts
+import {
+  HlmDrawer,
+  HlmDrawerContent,
+  HlmDrawerTrigger,
+  HlmDrawerClose,
+  HlmDrawerOverlay,
+  HlmDrawerPortal,
+  HlmDrawerTitle,
+  HlmDrawerDescription,
+  HlmDrawerHeader,
+  HlmDrawerFooter,
+  HlmDrawerImports,
+  HlmDrawerModule,
+} from '@egose/shadcn-theme-ng/drawer';
+// tw variant: replace with '@egose/shadcn-theme-ng-tw/drawer'
+```
+
+Standalone component — spread the `*Imports` array:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmDrawerImports } from '@egose/shadcn-theme-ng/drawer';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [...HlmDrawerImports],
+  template: `...`,
+})
+export class DemoComponent {}
+```
+
+NgModule-based consumer — import the module:
+
+```ts
+import { NgModule } from '@angular/core';
+import { HlmDrawerModule } from '@egose/shadcn-theme-ng/drawer';
+
+@NgModule({ imports: [HlmDrawerModule] })
+export class DemoModule {}
 ```
+
+## Anatomy / Structure
+
+```html
+<hlm-drawer>
+  <button hlmBtn variant="outline" hlmDrawerTrigger>Open drawer</button>
+
+  <hlm-drawer-content>
+    <div hlmDrawerHeader>
+      <h2 hlmDrawerTitle>Edit profile</h2>
+      <p hlmDrawerDescription>Make changes here.</p>
+    </div>
+
+    <p class="tw:px-4">Drawer body…</p>
+
+    <div hlmDrawerFooter>
+      <button hlmBtn hlmDrawerClose>Close</button>
+    </div>
+  </hlm-drawer-content>
+</hlm-drawer>
+```
+
+Real selectors (from source):
+
+| Class                  | Selector(s)                              | Kind                            |
+| ---------------------- | ---------------------------------------- | ------------------------------- |
+| `HlmDrawer`            | `hlm-drawer`                             | Component (extends `BrnDrawer`) |
+| `HlmDrawerContent`     | `hlm-drawer-content`                     | Component                       |
+| `HlmDrawerTrigger`     | `button[hlmDrawerTrigger]`               | Directive (thin wrapper)        |
+| `HlmDrawerClose`       | `button[hlmDrawerClose]`                 | Directive (thin wrapper)        |
+| `HlmDrawerOverlay`     | `[hlmDrawerOverlay], hlm-drawer-overlay` | Directive                       |
+| `HlmDrawerPortal`      | `[hlmDrawerPortal]`                      | Directive                       |
+| `HlmDrawerTitle`       | `[hlmDrawerTitle]`                       | Directive                       |
+| `HlmDrawerDescription` | `[hlmDrawerDescription]`                 | Directive                       |
+| `HlmDrawerHeader`      | `[hlmDrawerHeader], hlm-drawer-header`   | Directive                       |
+| `HlmDrawerFooter`      | `[hlmDrawerFooter], hlm-drawer-footer`   | Directive                       |
+
+## API reference
+
+### `HlmDrawer` — `hlm-drawer`
+
+Root drawer state host. Extends `BrnDrawer` (and provides `BrnDialog` + `BrnDrawer` tokens). Renders `<hlm-drawer-overlay />` plus projected content. `exportAs: 'hlmDrawer'`.
+
+No new inputs/outputs — direction and dialog options come from the trigger (`direction`) and brain defaults.
+
+### `HlmDrawerContent` — `hlm-drawer-content`
+
+The sliding panel. Hosts `BrnDrawerHandle` (swipe/drag, `closeThreshold` input forwarded), exposes `data-vaul-drawer-direction` and `data-state`, and renders the drag handle bar for bottom drawers plus projected content.
+
+| Input (forwarded) | Type                           | Description                           |
+| ----------------- | ------------------------------ | ------------------------------------- |
+| `closeThreshold`  | forwarded to `BrnDrawerHandle` | Drag distance that closes the drawer. |
+
+| Member  | Description                                                                          |
+| ------- | ------------------------------------------------------------------------------------ |
+| `state` | Current open state signal (from the exposed state provider, defaults to `'closed'`). |
+
+Direction styling (`bottom` default, plus `top` / `left` / `right`) is driven by the trigger's `direction` via `data-vaul-drawer-direction` selectors.
+
+### `HlmDrawerTrigger` — `button[hlmDrawerTrigger]`
+
+Thin wrapper. Forwards `id`, `direction`, `type` to `BrnDrawerTrigger` via `hostDirectives`. Set `direction="left" | "right" | "top" | "bottom"` here.
+
+### `HlmDrawerClose` — `button[hlmDrawerClose]`
+
+Thin wrapper around `BrnDrawerClose`. Place on any `<button>` inside the drawer to close it.
+
+### `HlmDrawerOverlay` — `[hlmDrawerOverlay], hlm-drawer-overlay`
+
+Backdrop. Wraps `BrnDrawerOverlay`; merges `class` via `hlm()`.
+
+| Input   | Type         | Default | Description                                         |
+| ------- | ------------ | ------- | --------------------------------------------------- |
+| `class` | `ClassValue` | `''`    | Extra classes merged over the base overlay classes. |
+
+### `HlmDrawerPortal` — `[hlmDrawerPortal]`
+
+Thin wrapper forwarding `context` and `class` to `BrnDrawerContent` for portal-based content.
+
+### `HlmDrawerTitle` — `[hlmDrawerTitle]` / `HlmDrawerDescription` — `[hlmDrawerDescription]`
+
+Accessible title/description. Wrap `BrnDrawerTitle` / `BrnDrawerDescription` plus shadcn typography. No inputs.
+
+### `HlmDrawerHeader` / `HlmDrawerFooter`
+
+Pure layout directives, no inputs. Header centers text on top/bottom drawers; footer stacks actions with `mt-auto`.
+
+## Examples
+
+### 1. Basic bottom drawer
+
+```ts
+import { Component } from '@angular/core';
+import { HlmDrawerImports } from '@egose/shadcn-theme-ng/drawer';
+import { HlmButton } from '@egose/shadcn-theme-ng/button';
+
+@Component({
+  selector: 'app-basic-drawer',
+  standalone: true,
+  imports: [...HlmDrawerImports, HlmButton],
+  template: `
+    <hlm-drawer>
+      <button hlmBtn variant="outline" hlmDrawerTrigger>Open drawer</button>
+      <hlm-drawer-content>
+        <div hlmDrawerHeader>
+          <h2 hlmDrawerTitle>Are you sure?</h2>
+          <p hlmDrawerDescription>This action cannot be undone.</p>
+        </div>
+        <div hlmDrawerFooter>
+          <button hlmBtn hlmDrawerClose>Close</button>
+        </div>
+      </hlm-drawer-content>
+    </hlm-drawer>
+  `,
+})
+export class BasicDrawerComponent {}
+```
+
+### 2. Direction variants (left / right / top)
+
+```ts
+import { Component } from '@angular/core';
+import { HlmDrawerImports } from '@egose/shadcn-theme-ng/drawer';
+import { HlmButton } from '@egose/shadcn-theme-ng/button';
+
+@Component({
+  selector: 'app-directions',
+  standalone: true,
+  imports: [...HlmDrawerImports, HlmButton],
+  template: `
+    <hlm-drawer>
+      <button hlmBtn variant="outline" hlmDrawerTrigger direction="right">Right panel</button>
+      <hlm-drawer-content>
+        <div hlmDrawerHeader>
+          <h2 hlmDrawerTitle>Right drawer</h2>
+          <p hlmDrawerDescription>Slides in from the right.</p>
+        </div>
+        <div hlmDrawerFooter>
+          <button hlmBtn variant="outline" hlmDrawerClose>Close</button>
+        </div>
+      </hlm-drawer-content>
+    </hlm-drawer>
+
+    <hlm-drawer>
+      <button hlmBtn variant="outline" hlmDrawerTrigger direction="left">Left panel</button>
+      <hlm-drawer-content>
+        <div hlmDrawerHeader>
+          <h2 hlmDrawerTitle>Left drawer</h2>
+          <p hlmDrawerDescription>Slides in from the left.</p>
+        </div>
+      </hlm-drawer-content>
+    </hlm-drawer>
+  `,
+})
+export class DirectionsComponent {}
+```
+
+### 3. Form drawer with footer actions
+
+```ts
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { HlmDrawerImports } from '@egose/shadcn-theme-ng/drawer';
+import { HlmButton } from '@egose/shadcn-theme-ng/button';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+import { HlmInput } from '@egose/shadcn-theme-ng/input';
+
+@Component({
+  selector: 'app-form-drawer',
+  standalone: true,
+  imports: [ReactiveFormsModule, HlmLabel, HlmInput, HlmButton, ...HlmDrawerImports],
+  template: `
+    <hlm-drawer>
+      <button hlmBtn hlmDrawerTrigger>New goal</button>
+      <hlm-drawer-content>
+        <div hlmDrawerHeader>
+          <h2 hlmDrawerTitle>New goal</h2>
+          <p hlmDrawerDescription>Set a goal for this week.</p>
+        </div>
+        <form [formGroup]="form" class="tw:grid tw:gap-4 tw:px-4">
+          <label hlmLabel for="goal">Goal</label>
+          <input hlmInput id="goal" formControlName="goal" placeholder="Exercise 3x" />
+        </form>
+        <div hlmDrawerFooter>
+          <button hlmBtn [disabled]="form.invalid" hlmDrawerClose (click)="save()">Save</button>
+          <button hlmBtn variant="outline" hlmDrawerClose>Cancel</button>
+        </div>
+      </hlm-drawer-content>
+    </hlm-drawer>
+  `,
+})
+export class FormDrawerComponent {
+  private readonly fb = inject(FormBuilder);
+  readonly form = this.fb.group({ goal: ['', Validators.required] });
+  save() {
+    console.log(this.form.value);
+  }
+}
+```
+
+### 4. Drag threshold + custom overlay
+
+```ts
+import { Component } from '@angular/core';
+import { HlmDrawerImports } from '@egose/shadcn-theme-ng/drawer';
+import { HlmButton } from '@egose/shadcn-theme-ng/button';
+
+@Component({
+  selector: 'app-threshold',
+  standalone: true,
+  imports: [...HlmDrawerImports, HlmButton],
+  template: `
+    <hlm-drawer>
+      <button hlmBtn variant="secondary" hlmDrawerTrigger>Player queue</button>
+      <hlm-drawer-content [closeThreshold]="0.4" class="tw:max-h-[60vh]">
+        <div hlmDrawerHeader>
+          <h2 hlmDrawerTitle>Up next</h2>
+          <p hlmDrawerDescription>Drag down past 40% to dismiss.</p>
+        </div>
+        <ul class="tw:px-4 tw:text-sm">
+          <li>Track 1 — Intro</li>
+          <li>Track 2 — Verse</li>
+          <li>Track 3 — Outro</li>
+        </ul>
+        <div hlmDrawerFooter>
+          <button hlmBtn variant="outline" hlmDrawerClose>Close</button>
+        </div>
+      </hlm-drawer-content>
+    </hlm-drawer>
+  `,
+})
+export class ThresholdComponent {}
+```
+
+### 5. Element + attribute header/footer spellings
+
+```ts
+import { Component } from '@angular/core';
+import { HlmDrawerImports } from '@egose/shadcn-theme-ng/drawer';
+import { HlmButton } from '@egose/shadcn-theme-ng/button';
+
+@Component({
+  selector: 'app-spellings',
+  standalone: true,
+  imports: [...HlmDrawerImports, HlmButton],
+  template: `
+    <hlm-drawer>
+      <button hlmBtn variant="ghost" hlmDrawerTrigger>Filters</button>
+      <hlm-drawer-content>
+        <hlm-drawer-header>
+          <h2 hlmDrawerTitle>Filters</h2>
+          <p hlmDrawerDescription>Refine the list below.</p>
+        </hlm-drawer-header>
+        <div class="tw:px-4 tw:text-sm">Filter controls…</div>
+        <hlm-drawer-footer>
+          <button hlmBtn hlmDrawerClose>Apply</button>
+          <button hlmBtn variant="ghost" hlmDrawerClose>Reset</button>
+        </hlm-drawer-footer>
+      </hlm-drawer-content>
+    </hlm-drawer>
+  `,
+})
+export class SpellingsComponent {}
+```
+
+### 6. Multi-step content inside one drawer
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmDrawerImports } from '@egose/shadcn-theme-ng/drawer';
+import { HlmButton } from '@egose/shadcn-theme-ng/button';
+
+@Component({
+  selector: 'app-steps',
+  standalone: true,
+  imports: [...HlmDrawerImports, HlmButton],
+  template: `
+    <hlm-drawer>
+      <button hlmBtn hlmDrawerTrigger>Checkout</button>
+      <hlm-drawer-content>
+        <div hlmDrawerHeader>
+          <h2 hlmDrawerTitle>Step {{ step() }} of 2</h2>
+          <p hlmDrawerDescription>{{ step() === 1 ? 'Address' : 'Payment' }}</p>
+        </div>
+        <div class="tw:px-4 tw:text-sm">
+          @if (step() === 1) {
+            <p>Address form…</p>
+          } @else {
+            <p>Payment form…</p>
+          }
+        </div>
+        <div hlmDrawerFooter>
+          @if (step() === 1) {
+            <button hlmBtn (click)="step.set(2)">Next</button>
+          } @else {
+            <button hlmBtn (click)="step.set(1)" variant="outline">Back</button>
+            <button hlmBtn hlmDrawerClose>Pay</button>
+          }
+        </div>
+      </hlm-drawer-content>
+    </hlm-drawer>
+  `,
+})
+export class StepsComponent {
+  readonly step = signal(1);
+}
+```
+
+## Accessibility notes
+
+- Always include `hlmDrawerTitle` and `hlmDrawerDescription` so the panel is labelled and described (brain `BrnDrawerTitle` / `BrnDrawerDescription` wiring).
+- Focus is trapped while open and restored to the trigger on close; escape and overlay click dismiss by default.
+- The drag handle is visual; keyboard and screen-reader users rely on the close button — always provide a labelled `hlmDrawerClose` control.
+- `data-state` and `data-vaul-drawer-direction` attributes let assistive and custom styles target open/closed and directional states.
+
+## Theming / CSS variables
+
+No component-specific CSS variables. Panel geometry and slide animations are direction-aware via `data-vaul-drawer-direction` selectors; colors come from global tokens (`--background`, `--muted`, …). Extend with `class` on `hlm-drawer-content` / overlay.
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/dialog` — centered modal built on the same brain dialog core.
+- `@egose/shadcn-theme-ng/sheet` — side-anchored panel alternative without swipe handling.
+- `@egose/shadcn-theme-ng/button` — `hlmBtn` triggers and footer actions.
+- `@egose/shadcn-theme-ng/separator` — dividers inside drawer bodies.