@egose/shadcn-theme-ng 0.0.28 → 0.2.0

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.

package/drawer/fesm2022/drawer.mjs

@@ -9,7 +9,7 @@ import { hlm, classes } from '@egose/shadcn-theme-ng/utils';
 class HlmDrawerOverlay {
     _classSettable = injectCustomClassSettable({ optional: true, host: true });
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-    _computedClass = computed(() => hlm('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0', this.userClass()), /* @ts-ignore */
+    _computedClass = computed(() => hlm("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
@@ -17,10 +17,10 @@ class HlmDrawerOverlay {
             untracked(() => this._classSettable?.setClassToCustomElement(classValue));
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmDrawerOverlay, isStandalone: true, selector: "[hlmDrawerOverlay],hlm-drawer-overlay", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.BrnDrawerOverlay }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmDrawerOverlay, isStandalone: true, selector: "[hlmDrawerOverlay],hlm-drawer-overlay", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.BrnDrawerOverlay }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerOverlay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerOverlay, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDrawerOverlay],hlm-drawer-overlay',
@@ -29,8 +29,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 HlmDrawer extends BrnDrawer {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawer, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: HlmDrawer, isStandalone: true, selector: "hlm-drawer", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawer, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmDrawer, isStandalone: true, selector: "hlm-drawer", providers: [
             {
                 provide: BrnDialog,
                 useExisting: forwardRef(() => HlmDrawer),
@@ -47,7 +47,7 @@ class HlmDrawer extends BrnDrawer {
     <ng-content />
   `, isInline: true, dependencies: [{ kind: "directive", type: HlmDrawerOverlay, selector: "[hlmDrawerOverlay],hlm-drawer-overlay", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawer, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-drawer',
@@ -75,10 +75,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }] });
 
 class HlmDrawerClose {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDrawerClose, isStandalone: true, selector: "button[hlmDrawerClose]", host: { attributes: { "data-slot": "drawer-close" } }, hostDirectives: [{ directive: i1.BrnDrawerClose }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDrawerClose, isStandalone: true, selector: "button[hlmDrawerClose]", host: { attributes: { "data-slot": "drawer-close" } }, hostDirectives: [{ directive: i1.BrnDrawerClose }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerClose, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerClose, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[hlmDrawerClose]',
@@ -93,24 +93,19 @@ class HlmDrawerContent {
     state = this._stateProvider.state ?? signal('closed');
     constructor() {
         classes(() => [
-            'bg-background fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
-            'group/drawer-content',
-            'data-open:animate-in data-closed:animate-out',
+            "bg-background fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+            "group/drawer-content",
+            "data-open:animate-in data-closed:animate-out",
             'data-[vaul-drawer-direction=bottom]:data-closed:slide-out-to-bottom data-[vaul-drawer-direction=bottom]:data-open:slide-in-from-bottom',
             'data-[vaul-drawer-direction=top]:data-closed:slide-out-to-top data-[vaul-drawer-direction=top]:data-open:slide-in-from-top',
             'data-[vaul-drawer-direction=left]:data-closed:slide-out-to-left data-[vaul-drawer-direction=left]:data-open:slide-in-from-left',
             'data-[vaul-drawer-direction=right]:data-closed:slide-out-to-right data-[vaul-drawer-direction=right]:data-open:slide-in-from-right',
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: HlmDrawerContent, isStandalone: true, selector: "hlm-drawer-content", host: { attributes: { "data-slot": "drawer-content" }, properties: { "attr.data-vaul-drawer-direction": "_sideProvider.side()", "attr.data-state": "state()" } }, hostDirectives: [{ directive: i1.BrnDrawerHandle, inputs: ["closeThreshold", "closeThreshold"] }], ngImport: i0, template: `
-    <div
-      class="bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
-    ></div>
-    <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmDrawerContent, isStandalone: true, selector: "hlm-drawer-content", host: { attributes: { "data-slot": "drawer-content" }, properties: { "attr.data-vaul-drawer-direction": "_sideProvider.side()", "attr.data-state": "state()" } }, hostDirectives: [{ directive: i1.BrnDrawerHandle, inputs: ["closeThreshold", "closeThreshold"] }], ngImport: i0, template: "\n    <div\n      class=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\"\n    ></div>\n    <ng-content />\n  ", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-drawer-content',
@@ -121,23 +116,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.data-vaul-drawer-direction]': '_sideProvider.side()',
                         '[attr.data-state]': 'state()',
                     },
-                    template: `
-    <div
-      class="bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
-    ></div>
-    <ng-content />
-  `,
+                    template: "\n    <div\n      class=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\"\n    ></div>\n    <ng-content />\n  ",
                 }]
         }], ctorParameters: () => [] });
 
 class HlmDrawerDescription {
     constructor() {
-        classes(() => 'text-muted-foreground text-sm');
+        classes(() => "text-muted-foreground text-sm");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDrawerDescription, isStandalone: true, selector: "[hlmDrawerDescription]", host: { attributes: { "data-slot": "drawer-description" } }, hostDirectives: [{ directive: i1.BrnDrawerDescription }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDrawerDescription, isStandalone: true, selector: "[hlmDrawerDescription]", host: { attributes: { "data-slot": "drawer-description" } }, hostDirectives: [{ directive: i1.BrnDrawerDescription }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerDescription, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDrawerDescription]',
@@ -148,12 +138,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmDrawerFooter {
     constructor() {
-        classes(() => 'gap-2 p-4 mt-auto flex flex-col');
+        classes(() => "gap-2 p-4 mt-auto flex flex-col");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDrawerFooter, isStandalone: true, selector: "[hlmDrawerFooter],hlm-drawer-footer", host: { attributes: { "data-slot": "drawer-footer" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDrawerFooter, isStandalone: true, selector: "[hlmDrawerFooter],hlm-drawer-footer", host: { attributes: { "data-slot": "drawer-footer" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDrawerFooter],hlm-drawer-footer',
@@ -163,12 +153,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmDrawerHeader {
     constructor() {
-        classes(() => 'gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-start flex flex-col');
+        classes(() => "gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-start flex flex-col");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDrawerHeader, isStandalone: true, selector: "[hlmDrawerHeader],hlm-drawer-header", host: { attributes: { "data-slot": "drawer-header" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDrawerHeader, isStandalone: true, selector: "[hlmDrawerHeader],hlm-drawer-header", host: { attributes: { "data-slot": "drawer-header" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDrawerHeader],hlm-drawer-header',
@@ -177,10 +167,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], ctorParameters: () => [] });
 
 class HlmDrawerPortal {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDrawerPortal, isStandalone: true, selector: "[hlmDrawerPortal]", hostDirectives: [{ directive: i1.BrnDrawerContent, inputs: ["context", "context", "class", "class"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDrawerPortal, isStandalone: true, selector: "[hlmDrawerPortal]", hostDirectives: [{ directive: i1.BrnDrawerContent, inputs: ["context", "context", "class", "class"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDrawerPortal]',
@@ -190,12 +180,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmDrawerTitle {
     constructor() {
-        classes(() => 'text-foreground font-medium');
+        classes(() => "text-foreground font-medium");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDrawerTitle, isStandalone: true, selector: "[hlmDrawerTitle]", host: { attributes: { "data-slot": "drawer-title" } }, hostDirectives: [{ directive: i1.BrnDrawerTitle }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDrawerTitle, isStandalone: true, selector: "[hlmDrawerTitle]", host: { attributes: { "data-slot": "drawer-title" } }, hostDirectives: [{ directive: i1.BrnDrawerTitle }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmDrawerTitle]',
@@ -205,10 +195,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], ctorParameters: () => [] });
 
 class HlmDrawerTrigger {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmDrawerTrigger, isStandalone: true, selector: "button[hlmDrawerTrigger]", host: { attributes: { "data-slot": "drawer-trigger" } }, hostDirectives: [{ directive: i1.BrnDrawerTrigger, inputs: ["id", "id", "direction", "direction", "type", "type"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmDrawerTrigger, isStandalone: true, selector: "button[hlmDrawerTrigger]", host: { attributes: { "data-slot": "drawer-trigger" } }, hostDirectives: [{ directive: i1.BrnDrawerTrigger, inputs: ["id", "id", "direction", "direction", "type", "type"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[hlmDrawerTrigger]',
@@ -233,8 +223,8 @@ const HlmDrawerImports = [
     HlmDrawerTrigger,
 ];
 class HlmDrawerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerModule, imports: [HlmDrawer,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerModule, imports: [HlmDrawer,
             HlmDrawerClose,
             HlmDrawerContent,
             HlmDrawerDescription,
@@ -253,9 +243,9 @@ class HlmDrawerModule {
             HlmDrawerPortal,
             HlmDrawerTitle,
             HlmDrawerTrigger] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmDrawerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmDrawerImports],
@@ -268,4 +258,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmDrawer, HlmDrawerClose, HlmDrawerContent, HlmDrawerDescription, HlmDrawerFooter, HlmDrawerHeader, HlmDrawerImports, HlmDrawerModule, HlmDrawerOverlay, HlmDrawerPortal, HlmDrawerTitle, HlmDrawerTrigger };
-//# sourceMappingURL=drawer.mjs.map
+