@ng-zen/cli 22.5.2 → 22.6.0

package/README.md

@@ -167,6 +167,7 @@ ng generate @ng-zen/cli:ui --ui button input --stories
 | ----------- | ---------------------------- | ------------------------------------------------------------------------- |
 | **Button**  | Interactive buttons          | Primary/secondary variants, loading states, icons                         |
 | **Dialog**  | Native modal dialogs         | Native dialog element, service API, size variants, backdrop config        |
+| **Drawer**  | Side-sheet overlays          | Native dialog element, swipe-to-dismiss, 4 sides, size variants           |
 | **Pin**     | Anchor-positioned overlay    | CSS Anchor Positioning, TemplateRef content, position and offset controls |
 | **Popover** | Native Popover API directive | Template/string content, placements, click toggle, CSS anchor positioning |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "22.5.2",
+  "version": "22.6.0",
   "description": "Angular CLI generator for creating fully customizable UI components.",
   "license": "BSD-2-Clause",
   "private": false,
@@ -56,6 +56,7 @@
     "checkbox",
     "dialog",
     "divider",
+    "drawer",
     "form-control",
     "icon",
     "input",

package/schematics/ui/files/drawer/drawer-gesture.spec.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { GestureCallbacks } from './drawer.types';
+import { DrawerGesture } from './drawer-gesture';
+
+const W = 384;
+
+function mockCb(): GestureCallbacks & { el: { style: Record<string, string> } } {
+  const el = { style: {} as Record<string, string> };
+
+  return {
+    el,
+    onOpenChange: vi.fn(),
+    setDragStyle: vi.fn((_cssVar: string, value: string) => {
+      el.style[_cssVar] = value;
+    }),
+    removeDragStyle: vi.fn((cssVar: string) => {
+      delete el.style[cssVar];
+    }),
+    getDimension: vi.fn(() => W),
+    setPointerCapture: vi.fn(),
+    setAttribute: vi.fn(),
+    removeAttribute: vi.fn(),
+    setOverscrollStyle: vi.fn((sizePx: number) => {
+      el.style['width'] = `${sizePx}px`;
+    }),
+    removeOverscrollStyle: vi.fn(() => {
+      delete el.style['width'];
+    }),
+  };
+}
+
+function down(g: DrawerGesture, x: number, cb: GestureCallbacks): void {
+  g.pointerDown({ clientX: x, clientY: 200, pointerId: 1, button: 0 } as PointerEvent, 'right', cb);
+}
+
+function move(g: DrawerGesture, x: number, cb: GestureCallbacks): void {
+  g.pointerMove({ clientX: x, clientY: 200 } as PointerEvent, 'right', cb);
+}
+
+function up(g: DrawerGesture, cb: GestureCallbacks): void {
+  g.pointerUp(1, 'right', cb);
+}
+
+describe('DrawerGesture', () => {
+  describe('overscroll → close reversal', () => {
+    it('overscroll extends width, not translate', () => {
+      const g = new DrawerGesture();
+      const cb = mockCb();
+
+      down(g, 500, cb);
+      move(g, 400, cb);
+
+      expect(cb.el.style['width']).toBeTruthy();
+      expect(cb.el.style['--zen-drawer-drag']).toBeUndefined();
+    });
+
+    it('reversal closes without width jump', () => {
+      const g = new DrawerGesture();
+      const cb = mockCb();
+
+      down(g, 500, cb);
+      move(g, 400, cb);
+      const w1 = parseFloat(cb.el.style['width'] ?? '0');
+      expect(w1).toBeGreaterThan(W);
+
+      move(g, 480, cb);
+      const w2 = parseFloat(cb.el.style['width'] ?? '0');
+      expect(w2).toBeLessThanOrEqual(w1);
+
+      move(g, 510, cb);
+      expect(cb.el.style['width']).toBeUndefined();
+      expect(cb.el.style['--zen-drawer-drag']).toBeDefined();
+    });
+
+    it('close translate is 1:1 with pointer', () => {
+      const g = new DrawerGesture();
+      const cb = mockCb();
+
+      down(g, 500, cb);
+      move(g, 530, cb);
+
+      const pct = parseFloat(cb.el.style['--zen-drawer-drag'] ?? '0');
+      expect(pct).toBeCloseTo((30 / W) * 100, 2);
+    });
+
+    it('release during overscroll stays open', () => {
+      const g = new DrawerGesture();
+      const cb = mockCb();
+
+      down(g, 500, cb);
+      move(g, 400, cb);
+      up(g, cb);
+
+      expect(cb.onOpenChange).not.toHaveBeenCalled();
+      expect(cb.el.style['width']).toBeUndefined();
+      expect(cb.el.style['--zen-drawer-drag']).toBeUndefined();
+    });
+  });
+});

package/schematics/ui/files/drawer/drawer-gesture.ts

@@ -0,0 +1,162 @@
+import { DrawerSide, GestureCallbacks } from './drawer.types';
+
+const FLING_VELOCITY_THRESHOLD = 0.5;
+const CLOSE_THRESHOLD_RATIO = 0.3;
+const CLOSE_THRESHOLD_MIN = 80;
+const LOCK_THRESHOLD = 5;
+
+const OVERSCROLL_DAMP_RATE = 0.003;
+const OVERSCROLL_MAX_CAP = 120;
+
+export class DrawerGesture {
+  private startX = 0;
+  private startY = 0;
+  private dragCandidate = false;
+  private dragLocked = false;
+  private offset = 0;
+  private startTime = 0;
+  private lastMoveTime = 0;
+  private lastMoveX = 0;
+  private lastMoveY = 0;
+  private restDimension = 0;
+
+  get isLocked(): boolean {
+    return this.dragLocked;
+  }
+
+  pointerDown(event: PointerEvent, side: DrawerSide, cb: GestureCallbacks): void {
+    this.startX = event.clientX;
+    this.startY = event.clientY;
+    this.dragCandidate = true;
+    this.dragLocked = false;
+    this.offset = 0;
+    this.startTime = Date.now();
+    this.lastMoveTime = this.startTime;
+    this.lastMoveX = event.clientX;
+    this.lastMoveY = event.clientY;
+    this.restDimension = cb.getDimension();
+  }
+
+  pointerMove(event: PointerEvent, side: DrawerSide, cb: GestureCallbacks): void {
+    if (!this.dragCandidate) return;
+
+    const dx = event.clientX - this.startX;
+    const dy = event.clientY - this.startY;
+    const absDx = Math.abs(dx);
+    const absDy = Math.abs(dy);
+
+    if (!this.dragLocked) {
+      if (absDx < LOCK_THRESHOLD && absDy < LOCK_THRESHOLD) return;
+
+      const isHorizontal = absDx > absDy;
+      const sideAxis = side === 'left' || side === 'right' ? 'x' : 'y';
+      const movementAxis = isHorizontal ? 'x' : 'y';
+
+      if (sideAxis !== movementAxis) {
+        this.dragCandidate = false;
+        return;
+      }
+
+      this.dragLocked = true;
+      cb.setPointerCapture(event.pointerId);
+      cb.setAttribute('data-swiping', '');
+    }
+
+    this.lastMoveTime = Date.now();
+    this.lastMoveX = event.clientX;
+    this.lastMoveY = event.clientY;
+
+    this.transformDrag(dx, dy, side, cb);
+  }
+
+  pointerUp(pointerId: number, side: DrawerSide, cb: GestureCallbacks): void {
+    if (!this.dragLocked) {
+      this.dragCandidate = false;
+      return;
+    }
+
+    const velocity = this.computeVelocity();
+    this.finishDrag(side, velocity, cb);
+  }
+
+  pointerCancel(pointerId: number, side: DrawerSide, cb: GestureCallbacks): void {
+    if (!this.dragLocked) {
+      this.dragCandidate = false;
+      return;
+    }
+    this.finishDrag(side, { x: 0, y: 0 }, cb);
+  }
+
+  private transformDrag(dx: number, dy: number, side: DrawerSide, cb: GestureCallbacks): void {
+    let closeDist: number;
+
+    switch (side) {
+      case 'right':
+        closeDist = dx;
+        break;
+      case 'left':
+        closeDist = -dx;
+        break;
+      case 'bottom':
+        closeDist = dy;
+        break;
+      case 'top':
+        closeDist = -dy;
+        break;
+    }
+
+    if (closeDist < 0) {
+      const ext = this.dampOverscroll(-closeDist);
+      this.offset = 0;
+      cb.removeDragStyle('--zen-drawer-drag');
+      cb.setOverscrollStyle(this.restDimension + ext);
+    } else {
+      this.offset = closeDist;
+      cb.removeOverscrollStyle();
+      cb.setDragStyle('--zen-drawer-drag', `${(closeDist / this.restDimension) * 100}%`);
+    }
+  }
+
+  private dampOverscroll(dist: number): number {
+    const maxOverscroll = Math.min(OVERSCROLL_MAX_CAP, this.restDimension * 0.25);
+    return maxOverscroll * (1 - Math.exp(-dist * OVERSCROLL_DAMP_RATE));
+  }
+
+  private finishDrag(side: DrawerSide, velocity: { x: number; y: number }, cb: GestureCallbacks): void {
+    cb.removeAttribute('data-swiping');
+    cb.removeOverscrollStyle();
+
+    const dimension = cb.getDimension();
+    const threshold = Math.max(CLOSE_THRESHOLD_MIN, dimension * CLOSE_THRESHOLD_RATIO);
+    const flingInCloseDirection = this.isFlingInCloseDirection(side, velocity);
+
+    if (this.offset >= threshold || flingInCloseDirection) {
+      cb.onOpenChange(false);
+    } else {
+      cb.removeDragStyle('--zen-drawer-drag');
+    }
+
+    this.dragCandidate = false;
+    this.dragLocked = false;
+    this.offset = 0;
+    this.restDimension = 0;
+  }
+
+  private computeVelocity(): { x: number; y: number } {
+    const dt = this.lastMoveTime - this.startTime;
+    if (dt <= 0) return { x: 0, y: 0 };
+    return {
+      x: (this.lastMoveX - this.startX) / dt,
+      y: (this.lastMoveY - this.startY) / dt,
+    };
+  }
+
+  private isFlingInCloseDirection(side: DrawerSide, velocity: { x: number; y: number }): boolean {
+    const v = FLING_VELOCITY_THRESHOLD;
+    if (side === 'right') return velocity.x > v;
+    if (side === 'left') return velocity.x < -v;
+    if (side === 'bottom') return velocity.y > v;
+    if (side === 'top') return velocity.y < -v;
+    return false;
+  }
+}

package/schematics/ui/files/drawer/drawer.html

@@ -0,0 +1,24 @@
+<dialog
+  #drawerDialog
+  class="zen-drawer"
+  [attr.data-side]="side()"
+  [attr.data-size]="size()"
+  [attr.data-swipe-direction]="side()"
+  (cancel)="cancel($event)"
+  (close)="close()"
+  (pointercancel)="pointerCancel($event)"
+  (pointerdown)="pointerDown($event)"
+  (pointermove)="pointerMove($event)"
+  (pointerup)="pointerUp($event)"
+>
+  @if (swipeHandle()) {
+    <div class="zen-drawer-swipe-handle"></div>
+  }
+  <ng-content select="[drawer-header]" />
+  <div class="zen-drawer-content">
+    <ng-content />
+  </div>
+  <div class="zen-drawer-footer">
+    <ng-content select="[drawer-footer]" />
+  </div>
+</dialog>

package/schematics/ui/files/drawer/drawer.scss

@@ -0,0 +1,253 @@
+@use 'sass:map';
+
+$transition-duration: var(--zen-transition-duration, 0.3s);
+$transition-timing: cubic-bezier(0.32, 0.72, 0, 1);
+$sides: (
+  right: (
+    closed: translateX(100%),
+    open: translateX(var(--zen-drawer-drag, 0px)),
+  ),
+  left: (
+    closed: translateX(-100%),
+    open: translateX(calc(-1 * var(--zen-drawer-drag, 0px))),
+  ),
+  top: (
+    closed: translateY(-100%),
+    open: translateY(calc(-1 * var(--zen-drawer-drag, 0px))),
+  ),
+  bottom: (
+    closed: translateY(100%),
+    open: translateY(var(--zen-drawer-drag, 0px)),
+  ),
+);
+$default-side-width: min(24rem, 75vw);
+$default-vertical-max-height: calc(100dvh - 6rem);
+
+.zen-drawer {
+  --zen-drawer-padding: 1rem;
+  --zen-drawer-bg: #fff;
+  --zen-drawer-leading-border-radius: 12px;
+  --zen-drawer-shadow: 0 4px 24px rgb(0 0 0 / 20%);
+  --zen-drawer-backdrop-bg: rgb(0 0 0 / 50%);
+  --zen-drawer-overlay-min-opacity: 0;
+  --zen-drawer-inset: 0px;
+  --zen-drawer-drag: 0px;
+  --zen-drawer-height: auto;
+  --zen-size-inline-sm: clamp(16rem, 25vw, 24rem);
+  --zen-size-inline-md: clamp(22rem, 40vw, 34rem);
+  --zen-size-inline-lg: clamp(30rem, 55vw, 46rem);
+  --zen-size-inline-xl: clamp(38rem, 70vw, 58rem);
+  --zen-size-inline-full: calc(100% - var(--zen-drawer-inset) * 2);
+  --zen-size-block-sm: clamp(14rem, 30dvh, 22rem);
+  --zen-size-block-md: clamp(18rem, 45dvh, 30rem);
+  --zen-size-block-lg: clamp(24rem, 60dvh, 38rem);
+  --zen-size-block-xl: clamp(30rem, 75dvh, 46rem);
+  --zen-size-block-full: calc(100% - var(--zen-drawer-inset) * 2);
+}
+
+:host {
+  display: contents;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+.zen-drawer {
+  display: none;
+  position: fixed;
+  box-sizing: border-box;
+  padding: var(--zen-drawer-padding);
+  background: var(--zen-drawer-bg);
+  border: none;
+  box-shadow: var(--zen-drawer-shadow);
+  overflow: hidden;
+  opacity: 0;
+  transition:
+    transform $transition-duration $transition-timing,
+    opacity $transition-duration ease,
+    width $transition-duration ease,
+    height $transition-duration ease;
+
+  @each $side, $transforms in $sides {
+    $closed: map.get($transforms, closed);
+    $open: map.get($transforms, open);
+
+    &[data-side='#{$side}'] {
+      transform: $closed;
+    }
+
+    &[open][data-side='#{$side}'] {
+      transform: $open;
+
+      @starting-style {
+        opacity: 0;
+        transform: $closed;
+      }
+    }
+
+    &[open][data-closing][data-side='#{$side}'] {
+      opacity: 0;
+      transform: $closed !important;
+    }
+  }
+
+  &[open] {
+    display: flex;
+    flex-direction: column;
+    opacity: 1;
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+
+  &[open][data-swiping] {
+    cursor: grabbing;
+    transition: none !important;
+    user-select: none;
+
+    .zen-drawer-swipe-handle {
+      cursor: grabbing;
+    }
+  }
+
+  &[data-side='right'],
+  &[data-side='left'] {
+    inset: var(--zen-drawer-inset);
+    margin: 0;
+    height: 100%;
+    max-height: 100%;
+    width: var(--zen-drawer-width, $default-side-width);
+  }
+
+  &[data-side='right'] {
+    inset: var(--zen-drawer-inset) var(--zen-drawer-inset) var(--zen-drawer-inset) auto;
+    border-radius: var(--zen-drawer-leading-border-radius) 0 0 var(--zen-drawer-leading-border-radius);
+  }
+
+  &[data-side='left'] {
+    inset: var(--zen-drawer-inset) auto var(--zen-drawer-inset) var(--zen-drawer-inset);
+    border-radius: 0 var(--zen-drawer-leading-border-radius) var(--zen-drawer-leading-border-radius) 0;
+  }
+
+  &[data-side='top'],
+  &[data-side='bottom'] {
+    margin: 0;
+    width: auto;
+    height: var(--zen-drawer-height, auto);
+    max-height: $default-vertical-max-height;
+    max-width: 100vw;
+  }
+
+  &[data-side='top'] {
+    inset: var(--zen-drawer-inset) var(--zen-drawer-inset) auto var(--zen-drawer-inset);
+    border-radius: 0 0 var(--zen-drawer-leading-border-radius) var(--zen-drawer-leading-border-radius);
+  }
+
+  &[data-side='bottom'] {
+    inset: auto var(--zen-drawer-inset) var(--zen-drawer-inset) var(--zen-drawer-inset);
+    border-radius: var(--zen-drawer-leading-border-radius) var(--zen-drawer-leading-border-radius) 0 0;
+  }
+
+  @each $name in (sm, md, lg, xl, full) {
+    &[data-side='right'][data-size='#{$name}'],
+    &[data-side='left'][data-size='#{$name}'] {
+      width: var(--zen-size-inline-#{$name});
+      max-width: 100vw;
+    }
+
+    &[data-side='top'][data-size='#{$name}'],
+    &[data-side='bottom'][data-size='#{$name}'] {
+      height: var(--zen-size-block-#{$name});
+      max-height: 100dvh;
+    }
+  }
+
+  &::backdrop {
+    background: var(--zen-drawer-backdrop-bg);
+    transition: opacity $transition-duration ease;
+    opacity: var(--zen-drawer-overlay-min-opacity);
+  }
+
+  &[open]::backdrop {
+    opacity: 1;
+
+    @starting-style {
+      opacity: var(--zen-drawer-overlay-min-opacity);
+    }
+  }
+
+  &[open][data-closing]::backdrop {
+    opacity: 0;
+  }
+}
+
+.zen-drawer-swipe-handle {
+  cursor: grab;
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: none;
+  user-select: none;
+
+  &::after {
+    content: '';
+    display: block;
+    background: hsl(0deg 0% 70%);
+    border-radius: 3px;
+  }
+}
+
+.zen-drawer[data-side='bottom'] .zen-drawer-swipe-handle,
+.zen-drawer[data-side='top'] .zen-drawer-swipe-handle {
+  left: 0;
+  right: 0;
+  height: 1.5rem;
+  width: 100%;
+
+  &::after {
+    width: 48px;
+    height: 5px;
+  }
+}
+
+.zen-drawer[data-side='bottom'] .zen-drawer-swipe-handle {
+  top: 0;
+}
+
+.zen-drawer[data-side='top'] .zen-drawer-swipe-handle {
+  bottom: 0;
+}
+
+.zen-drawer[data-side='right'] .zen-drawer-swipe-handle,
+.zen-drawer[data-side='left'] .zen-drawer-swipe-handle {
+  top: 0;
+  bottom: 0;
+  width: 1.5rem;
+
+  &::after {
+    width: 5px;
+    height: 48px;
+  }
+}
+
+.zen-drawer[data-side='right'] .zen-drawer-swipe-handle {
+  left: 0;
+}
+
+.zen-drawer[data-side='left'] .zen-drawer-swipe-handle {
+  right: 0;
+}
+
+.zen-drawer-footer {
+  &:not(:empty) {
+    flex-shrink: 0;
+    padding-top: var(--zen-drawer-padding);
+    border-top: 1px solid hsl(0deg 0% 90%);
+  }
+}
+
+.zen-drawer-content {
+  overflow: auto;
+  flex: 1;
+}

package/schematics/ui/files/drawer/drawer.spec.ts

@@ -0,0 +1,267 @@
+import { Component, provideZonelessChangeDetection, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ZenDrawer } from './drawer';
+
+@Component({
+  template: `
+    <zen-drawer
+      [backdrop]="backdrop()"
+      [closeOnEscape]="closeOnEscape()"
+      [handleOnly]="handleOnly()"
+      [scaleBackground]="scaleBackground()"
+      [side]="side()"
+      [size]="size()"
+      [swipeHandle]="swipeHandle()"
+      [(open)]="isOpen"
+    >
+      <div drawer-header>Test Drawer</div>
+      <p>Drawer content</p>
+      <div drawer-footer>Footer text</div>
+    </zen-drawer>
+  `,
+  standalone: true,
+  imports: [ZenDrawer],
+})
+class DrawerTestComponent {
+  readonly isOpen = signal(false);
+  readonly side = signal<'left' | 'right' | 'top' | 'bottom'>('right');
+  readonly size = signal<'sm' | 'md' | 'lg' | 'xl' | 'full'>('md');
+  readonly closeOnEscape = signal(true);
+  readonly swipeHandle = signal(true);
+  readonly handleOnly = signal(false);
+  readonly scaleBackground = signal(false);
+  readonly backdrop = signal(true);
+}
+
+function getDrawerEl(fixture: ComponentFixture<unknown>): HTMLDialogElement | null {
+  return fixture.nativeElement.querySelector('zen-drawer dialog.zen-drawer') as HTMLDialogElement | null;
+}
+
+describe('ZenDrawer', () => {
+  beforeEach(async () => {
+    HTMLDialogElement.prototype.showModal = vi.fn();
+    HTMLDialogElement.prototype.close = vi.fn();
+  });
+
+  describe('Component usage', () => {
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [DrawerTestComponent],
+        providers: [provideZonelessChangeDetection()],
+      }).compileComponents();
+    });
+
+    afterEach(() => {
+      document.body.classList.remove('zen-drawer-open');
+    });
+
+    it('should create', () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.detectChanges();
+      expect(getDrawerEl(fixture)).toBeTruthy();
+    });
+
+    it('should call showModal when open is set to true', async () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.detectChanges();
+
+      const drawerEl = getDrawerEl(fixture)!;
+      expect(drawerEl.showModal).not.toHaveBeenCalled();
+
+      fixture.componentInstance.isOpen.set(true);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      expect(drawerEl.showModal).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call close when open is set to false', async () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.isOpen.set(true);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const drawerEl = getDrawerEl(fixture)!;
+      Object.defineProperty(drawerEl, 'open', { value: true, writable: true });
+
+      fixture.componentInstance.isOpen.set(false);
+      fixture.detectChanges();
+      await fixture.whenStable();
+      await new Promise(r => setTimeout(r, 400));
+
+      expect(drawerEl.close).toHaveBeenCalled();
+    });
+
+    it('should project header content via drawer-header slot', () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.detectChanges();
+
+      const header = fixture.nativeElement.querySelector('[drawer-header]');
+      expect(header?.textContent).toBe('Test Drawer');
+    });
+
+    it('should project footer content via drawer-footer slot', () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.detectChanges();
+
+      const footer = fixture.nativeElement.querySelector('[drawer-footer]');
+      expect(footer?.textContent?.trim()).toBe('Footer text');
+    });
+
+    it('should apply side attribute', () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.side.set('left');
+      fixture.detectChanges();
+
+      const drawerEl = getDrawerEl(fixture)!;
+      expect(drawerEl.getAttribute('data-side')).toBe('left');
+    });
+
+    it('should apply size attribute', () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.size.set('lg');
+      fixture.detectChanges();
+
+      const drawerEl = getDrawerEl(fixture)!;
+      expect(drawerEl.getAttribute('data-size')).toBe('lg');
+    });
+
+    it('should apply data-swipe-direction', () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.side.set('bottom');
+      fixture.detectChanges();
+
+      const drawerEl = getDrawerEl(fixture)!;
+      expect(drawerEl.getAttribute('data-swipe-direction')).toBe('bottom');
+    });
+
+    it('should close when close is called', async () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.isOpen.set(true);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const drawer = fixture.debugElement.query(By.directive(ZenDrawer)).componentInstance;
+      drawer.close();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.isOpen()).toBe(false);
+    });
+
+    it('should not close on escape when closeOnEscape is false', async () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.isOpen.set(true);
+      fixture.componentInstance.closeOnEscape.set(false);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const drawerEl = getDrawerEl(fixture)!;
+      const cancelEvent = new Event('cancel', { bubbles: true, cancelable: true });
+      drawerEl.dispatchEvent(cancelEvent);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.isOpen()).toBe(true);
+    });
+
+    it('should render swipe handle when swipeHandle is true', () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.detectChanges();
+
+      const handle = fixture.nativeElement.querySelector('.zen-drawer-swipe-handle');
+      expect(handle).toBeTruthy();
+    });
+
+    it('should not render swipe handle when swipeHandle is false', () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.swipeHandle.set(false);
+      fixture.detectChanges();
+
+      const handle = fixture.nativeElement.querySelector('.zen-drawer-swipe-handle');
+      expect(handle).toBeNull();
+    });
+
+    it('should toggle zen-drawer-open class on body when scaleBackground is true', async () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.scaleBackground.set(true);
+      fixture.detectChanges();
+
+      fixture.componentInstance.isOpen.set(true);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      expect(document.body.classList.contains('zen-drawer-open')).toBe(true);
+
+      const drawerEl = getDrawerEl(fixture)!;
+      Object.defineProperty(drawerEl, 'open', { value: true, writable: true });
+      fixture.componentInstance.isOpen.set(false);
+      fixture.detectChanges();
+
+      expect(document.body.classList.contains('zen-drawer-open')).toBe(false);
+    });
+
+    it('should not toggle zen-drawer-open class on body when scaleBackground is false', async () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.scaleBackground.set(false);
+      fixture.detectChanges();
+
+      fixture.componentInstance.isOpen.set(true);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      expect(document.body.classList.contains('zen-drawer-open')).toBe(false);
+    });
+
+    it('should close on backdrop click when backdrop is true', async () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.isOpen.set(true);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const drawerEl = getDrawerEl(fixture)!;
+      const pdEvent = new PointerEvent('pointerdown', { bubbles: true, cancelable: true, button: 0 });
+      Object.defineProperty(pdEvent, 'target', { value: drawerEl });
+      drawerEl.dispatchEvent(pdEvent);
+
+      const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
+      Object.defineProperty(clickEvent, 'target', { value: drawerEl });
+      drawerEl.dispatchEvent(clickEvent);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.isOpen()).toBe(false);
+    });
+
+    it('should not close on backdrop click when backdrop is false', async () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.isOpen.set(true);
+      fixture.componentInstance.backdrop.set(false);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const drawerEl = getDrawerEl(fixture)!;
+      const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
+      Object.defineProperty(clickEvent, 'target', { value: drawerEl });
+      drawerEl.dispatchEvent(clickEvent);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.isOpen()).toBe(true);
+    });
+
+    it('should not close when clicking inside drawer content', async () => {
+      const fixture = TestBed.createComponent(DrawerTestComponent);
+      fixture.componentInstance.isOpen.set(true);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const contentEl = fixture.nativeElement.querySelector('.zen-drawer-content');
+      const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
+      Object.defineProperty(clickEvent, 'target', { value: contentEl });
+      contentEl.dispatchEvent(clickEvent);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.isOpen()).toBe(true);
+    });
+  });
+});

package/schematics/ui/files/drawer/drawer.stories.ts

@@ -0,0 +1,200 @@
+import { signal } from '@angular/core';
+import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenButton } from '../button';
+import { ZenDrawer } from './drawer';
+import { DrawerSide, DrawerSize } from './drawer.types';
+
+type Story = StoryObj<ZenDrawer>;
+
+const meta = {
+  title: 'UI/Drawer',
+  component: ZenDrawer,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [ZenButton, ZenDrawer],
+    }),
+  ],
+  argTypes: {
+    side: {
+      name: 'side',
+      control: 'select',
+      options: ['left', 'right', 'top', 'bottom'] satisfies DrawerSide[],
+      table: {
+        category: 'inputs',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'right' satisfies DrawerSide },
+      },
+    },
+    size: {
+      name: 'size',
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', 'full'] satisfies DrawerSize[],
+      table: {
+        category: 'inputs',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' satisfies DrawerSize },
+      },
+    },
+    closeOnEscape: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'true' } } },
+    backdrop: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'true' } } },
+    swipeHandle: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'false' } } },
+    handleOnly: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'false' } } },
+    scaleBackground: { control: 'boolean', table: { category: 'inputs', defaultValue: { summary: 'false' } } },
+    open: { control: 'boolean', table: { readonly: false, category: 'models' } },
+  },
+  args: {
+    side: 'right',
+    size: 'md',
+    closeOnEscape: true,
+    backdrop: true,
+    swipeHandle: true,
+    handleOnly: false,
+    scaleBackground: false,
+    open: false,
+  },
+} satisfies Meta<ZenDrawer>;
+
+export default meta;
+
+export const Default: Story = {
+  render: ({ open, ...args }) => {
+    const mutatedArgs = { ...args, open: signal(open) };
+    return {
+      props: { ...mutatedArgs },
+      template: `
+      <button zen-btn (click)="open.set(true)">Open Drawer</button>
+
+      <zen-drawer #drawer [(open)]="open" ${argsToTemplate(args)}>
+        <h2 drawer-header>Drawer Title</h2>
+        <p>This is the drawer content. You can put any content here.</p>
+        <div drawer-footer>
+          <button zen-btn (click)="drawer.close()" variant="filled" color="danger">Close</button>
+        </div>
+      </zen-drawer>
+    `,
+    };
+  },
+};
+
+export const Sides: Story = {
+  render: () => ({
+    props: {
+      openLeft: signal(false),
+      openRight: signal(false),
+      openTop: signal(false),
+      openBottom: signal(false),
+    },
+    template: `
+      <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+        <button zen-btn (click)="openLeft.set(true)">Left</button>
+        <button zen-btn (click)="openRight.set(true)">Right</button>
+        <button zen-btn (click)="openTop.set(true)">Top</button>
+        <button zen-btn (click)="openBottom.set(true)">Bottom</button>
+      </div>
+
+      <zen-drawer [(open)]="openLeft" side="left">
+        <h2 drawer-header>Left Drawer</h2>
+        <p>Drawer slides in from the left</p>
+      </zen-drawer>
+
+      <zen-drawer [(open)]="openRight" side="right">
+        <h2 drawer-header>Right Drawer</h2>
+        <p>Drawer slides in from the right</p>
+      </zen-drawer>
+
+      <zen-drawer [(open)]="openTop" side="top">
+        <h2 drawer-header>Top Drawer</h2>
+        <p>Drawer slides in from the top</p>
+      </zen-drawer>
+
+      <zen-drawer [(open)]="openBottom" side="bottom">
+        <h2 drawer-header>Bottom Drawer</h2>
+        <p>Drawer slides in from the bottom</p>
+      </zen-drawer>
+    `,
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    props: {
+      openSm: signal(false),
+      openMd: signal(false),
+      openLg: signal(false),
+      openXl: signal(false),
+      openFull: signal(false),
+    },
+    template: `
+      <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+        <button zen-btn (click)="openSm.set(true)">Small</button>
+        <button zen-btn (click)="openMd.set(true)">Medium</button>
+        <button zen-btn (click)="openLg.set(true)">Large</button>
+        <button zen-btn (click)="openXl.set(true)">Extra Large</button>
+        <button zen-btn (click)="openFull.set(true)">Full Screen</button>
+      </div>
+
+      <zen-drawer [(open)]="openSm" size="sm">
+        <h2 drawer-header>Small Drawer</h2>
+        <p>Small drawer content</p>
+      </zen-drawer>
+
+      <zen-drawer [(open)]="openMd" size="md">
+        <h2 drawer-header>Medium Drawer</h2>
+        <p>Medium drawer content</p>
+      </zen-drawer>
+
+      <zen-drawer [(open)]="openLg" size="lg">
+        <h2 drawer-header>Large Drawer</h2>
+        <p>Large drawer content with more space for complex layouts.</p>
+      </zen-drawer>
+
+      <zen-drawer [(open)]="openXl" size="xl">
+        <h2 drawer-header>Extra Large Drawer</h2>
+        <p>Extra large drawer content for data tables, forms, etc.</p>
+      </zen-drawer>
+
+      <zen-drawer [(open)]="openFull" size="full">
+        <h2 drawer-header>Full Screen Drawer</h2>
+        <p>Full screen drawer content</p>
+      </zen-drawer>
+    `,
+  }),
+};
+
+export const HandleOnly: Story = {
+  render: () => ({
+    props: {
+      openHandle: signal(false),
+    },
+    template: `
+      <button zen-btn (click)="openHandle.set(true)">Handle Only</button>
+
+      <zen-drawer [swipeHandle]="true" [(open)]="openHandle" side="bottom" [handleOnly]="true">
+        <h2 drawer-header>Handle Only Drawer</h2>
+        <p>Only the grab handle can drag this drawer. Click or drag anywhere else on the content.</p>
+        <div style="height: 200px; background: hsl(120deg 80% 95%); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 1rem;">
+          <p>Content that won't drag</p>
+        </div>
+      </zen-drawer>
+    `,
+  }),
+};
+
+export const ScaleBackground: Story = {
+  render: () => ({
+    props: {
+      openScale: signal(false),
+    },
+    template: `
+      <style>body.zen-drawer-open { transform: scale(0.98); transition: transform 0.3s ease; }</style>
+      <button zen-btn (click)="openScale.set(true)">Scale Background</button>
+
+      <zen-drawer [(open)]="openScale" side="bottom" [scaleBackground]="true">
+        <h2 drawer-header>Scale Drawer</h2>
+        <p>The page behind scales down slightly while this drawer is open.</p>
+      </zen-drawer>
+    `,
+  }),
+};

package/schematics/ui/files/drawer/drawer.ts

@@ -0,0 +1,299 @@
+import {
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  untracked,
+  viewChild,
+} from '@angular/core';
+
+import { DrawerSide, DrawerSize, GestureCallbacks } from './drawer.types';
+import { DrawerGesture } from './drawer-gesture';
+
+/**
+ * ZenDrawer is a reusable drawer component built on the native HTML `<dialog>` element.
+ * It slides in from one of the four sides (`left`, `right`, `top`, `bottom`) and can be
+ * dismissed by clicking the backdrop, pressing Escape, or dragging/swiping the panel.
+ *
+ * @example
+ * ```html
+ * <button zen-btn (click)="isOpen.set(true)">Open Drawer</button>
+ *
+ * <zen-drawer [(open)]="isOpen" side="right" size="md">
+ *   <h2 drawer-header>Drawer Title</h2>
+ *   <p>Drawer content</p>
+ *   <div drawer-footer>
+ *     <button zen-btn (click)="isOpen.set(false)" variant="filled" color="danger">Close</button>
+ *   </div>
+ * </zen-drawer>
+ * ```
+ *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ * ```css
+ * :root {
+ *   --zen-drawer-padding: 1rem;
+ *   --zen-drawer-bg: #fff;
+ *   --zen-drawer-leading-border-radius: 12px;
+ *   --zen-drawer-shadow: 0 4px 24px rgb(0 0 0 / 20%);
+ *   --zen-drawer-backdrop-bg: rgb(0 0 0 / 50%);
+ *   --zen-drawer-overlay-min-opacity: 0;
+ *   --zen-drawer-inset: 0px;
+ *   --zen-drawer-drag: 0px;
+ *   --zen-drawer-height: auto;
+ *   --zen-size-inline-sm: clamp(16rem, 25vw, 24rem);
+ *   --zen-size-inline-md: clamp(22rem, 40vw, 34rem);
+ *   --zen-size-inline-lg: clamp(30rem, 55vw, 46rem);
+ *   --zen-size-inline-xl: clamp(38rem, 70vw, 58rem);
+ *   --zen-size-inline-full: calc(100% - var(--zen-drawer-inset) * 2);
+ *   --zen-size-block-sm: clamp(14rem, 30dvh, 22rem);
+ *   --zen-size-block-md: clamp(18rem, 45dvh, 30rem);
+ *   --zen-size-block-lg: clamp(24rem, 60dvh, 38rem);
+ *   --zen-size-block-xl: clamp(30rem, 75dvh, 46rem);
+ *   --zen-size-block-full: calc(100% - var(--zen-drawer-inset) * 2);
+ *   --zen-transition-duration: 0.3s;
+ * }
+ * ```
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ * @see [MDN Dialog Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
+ */
+@Component({
+  selector: 'zen-drawer',
+  standalone: true,
+  templateUrl: './drawer.html',
+  styleUrl: './drawer.scss',
+  host: {
+    '(click)': 'onBackdropClick($event)',
+  },
+})
+export class ZenDrawer {
+  /** Controls the open state of the drawer. Supports two-way binding via `[(open)]`. When `true`, calls `showModal()`; when `false`, animates out and calls `close()` on the native dialog. */
+  readonly open = model<boolean>(false);
+  /** Side from which the drawer slides in. Sets the slide direction, drag axis, and which dimension `size` controls (`width` for `left`/`right`, `height` for `top`/`bottom`). */
+  readonly side = input<DrawerSide>('right');
+  /** Size variant of the drawer. For `left`/`right` sets `width`; for `top`/`bottom` sets `height` via the `data-size` attribute. */
+  readonly size = input<DrawerSize>('md');
+  /** Whether pressing Escape closes the drawer (bound to the native dialog `cancel` event). */
+  readonly closeOnEscape = input(true);
+  /** Whether clicking the backdrop closes the drawer. When `false`, backdrop clicks are ignored. */
+  readonly backdrop = input(true);
+  /** Whether to render a grab handle at the leading edge of the drawer. Also the drag affordance when `handleOnly` is enabled. */
+  readonly swipeHandle = input(false);
+  /** When `true`, only the swipe handle can initiate a drag-to-dismiss gesture; clicks and drags on the content are ignored. */
+  readonly handleOnly = input(false);
+  /** When `true`, scales the page behind the drawer down while open (requires styling `body.zen-drawer-open` in the host app). */
+  readonly scaleBackground = input(false);
+
+  private readonly dialogRef = viewChild<ElementRef<HTMLDialogElement>>('drawerDialog');
+  private readonly gesture = new DrawerGesture();
+  private readonly destroyRef = inject(DestroyRef);
+
+  private backdropMouseDown = false;
+  private wasDragging = false;
+  private isClosing = false;
+  private closeTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  protected readonly isVertical = computed(() => this.side() === 'top' || this.side() === 'bottom');
+
+  constructor() {
+    this.destroyRef.onDestroy(() => {
+      if (this.closeTimeout) {
+        clearTimeout(this.closeTimeout);
+        this.closeTimeout = null;
+      }
+      if (this.scaleBackground()) {
+        document.body.classList.remove('zen-drawer-open');
+      }
+    });
+
+    effect(() => {
+      const isOpen = this.open();
+      const dialog = this.dialogRef();
+      const shouldScale = this.scaleBackground();
+
+      untracked(() => {
+        if (!dialog) return;
+
+        const element = dialog.nativeElement;
+
+        if (isOpen) {
+          this.cancelClosing(element);
+
+          if (!element.open) {
+            element.showModal();
+          }
+          element.style.removeProperty('--zen-drawer-drag');
+          element.style.removeProperty('--zen-drawer-width');
+
+          if (shouldScale) {
+            document.body.classList.add('zen-drawer-open');
+          }
+        } else if (element.open && !this.isClosing) {
+          this.animateAndClose(element, shouldScale);
+        }
+      });
+    });
+  }
+
+  /** Programmatically close the drawer (sets `open` to `false`). */
+  close(): void {
+    this.open.set(false);
+  }
+
+  /** Handles the native `cancel` event (Escape). Always prevents the default close; closes only when `closeOnEscape` is `true`. */
+  protected cancel(event: Event): void {
+    event.preventDefault();
+    if (this.closeOnEscape()) {
+      this.close();
+    }
+  }
+
+  /** Closes on backdrop click unless a drag just ended or `backdrop` is disabled. */
+  protected onBackdropClick(event: MouseEvent): void {
+    if (!this.backdrop()) return;
+
+    if (this.wasDragging) {
+      this.wasDragging = false;
+      this.backdropMouseDown = false;
+      return;
+    }
+
+    if (!this.backdropMouseDown) return;
+    this.backdropMouseDown = false;
+
+    const dialog = this.dialogRef()?.nativeElement;
+    if (!dialog || event.target !== dialog) return;
+
+    if (this.isClickOutside(dialog, event)) {
+      this.close();
+    }
+  }
+
+  /** Registers a pointer as a potential drag source and records whether the press started on the backdrop. */
+  protected pointerDown(event: PointerEvent): void {
+    if (event.button !== 0) return;
+
+    this.wasDragging = false;
+    const dialog = this.dialogRef()?.nativeElement;
+
+    if (dialog && event.target === dialog) {
+      this.backdropMouseDown = this.isClickOutside(dialog, event);
+    } else {
+      this.backdropMouseDown = false;
+    }
+
+    if (this.handleOnly() && !(event.target as HTMLElement).closest('.zen-drawer-swipe-handle')) {
+      return;
+    }
+
+    this.gesture.pointerDown(event, this.side(), this.gestureCallbacks());
+  }
+
+  /** Routes pointer movement to the gesture engine; marks a completed drag so the trailing click is swallowed. */
+  protected pointerMove(event: PointerEvent): void {
+    this.gesture.pointerMove(event, this.side(), this.gestureCallbacks());
+    if (this.gesture.isLocked) {
+      this.wasDragging = true;
+    }
+  }
+
+  /** Ends the drag gesture and lets the engine decide whether to close or snap back. */
+  protected pointerUp(event: PointerEvent): void {
+    this.gesture.pointerUp(event.pointerId, this.side(), this.gestureCallbacks());
+  }
+
+  /** Cancels an in-progress drag gesture (e.g. lost pointer) and resets drag state. */
+  protected pointerCancel(event: PointerEvent): void {
+    this.wasDragging = false;
+    this.backdropMouseDown = false;
+    this.gesture.pointerCancel(event.pointerId, this.side(), this.gestureCallbacks());
+  }
+
+  private animateAndClose(element: HTMLDialogElement, shouldScale: boolean): void {
+    this.isClosing = true;
+
+    if (shouldScale) {
+      document.body.classList.remove('zen-drawer-open');
+    }
+
+    element.removeAttribute('data-swiping');
+    element.setAttribute('data-closing', 'true');
+    element.style.removeProperty('--zen-drawer-drag');
+
+    const handleTransitionEnd = (event: TransitionEvent): void => {
+      if (event.target === element && (event.propertyName === 'transform' || event.propertyName === 'opacity')) {
+        element.removeEventListener('transitionend', handleTransitionEnd);
+        this.finalizeClose(element);
+      }
+    };
+
+    element.addEventListener('transitionend', handleTransitionEnd);
+
+    this.closeTimeout = setTimeout(() => {
+      element.removeEventListener('transitionend', handleTransitionEnd);
+      this.finalizeClose(element);
+    }, 350);
+  }
+
+  private finalizeClose(element: HTMLDialogElement): void {
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout);
+      this.closeTimeout = null;
+    }
+    element.removeAttribute('data-closing');
+    if (element.open) {
+      element.close();
+    }
+    this.isClosing = false;
+  }
+
+  private cancelClosing(element: HTMLDialogElement): void {
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout);
+      this.closeTimeout = null;
+    }
+    this.isClosing = false;
+    element.removeAttribute('data-closing');
+  }
+
+  private isClickOutside(dialog: HTMLDialogElement, event: MouseEvent): boolean {
+    const rect = dialog.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0
+      ? event.clientX < rect.left ||
+          event.clientX > rect.right ||
+          event.clientY < rect.top ||
+          event.clientY > rect.bottom
+      : true;
+  }
+
+  private gestureCallbacks(): GestureCallbacks {
+    const el = this.dialogRef()!.nativeElement;
+    const vertical = this.isVertical();
+
+    return {
+      onOpenChange: (open: boolean) => this.open.set(open),
+      setDragStyle: (cssVar: string, value: string) => el.style.setProperty(cssVar, value),
+      removeDragStyle: (cssVar: string) => el.style.removeProperty(cssVar),
+      getDimension: () => (vertical ? el.offsetHeight : el.offsetWidth),
+      setPointerCapture: (id: number) => el.setPointerCapture(id),
+      setAttribute: (name: string, value: string) => el.setAttribute(name, value),
+      removeAttribute: (name: string) => el.removeAttribute(name),
+      setOverscrollStyle: (sizePx: number) => {
+        const prop = vertical ? 'height' : 'width';
+        el.style.setProperty(prop, `${sizePx}px`);
+      },
+      removeOverscrollStyle: () => {
+        el.style.removeProperty('width');
+        el.style.removeProperty('height');
+      },
+    };
+  }
+}

package/schematics/ui/files/drawer/drawer.types.ts

@@ -0,0 +1,14 @@
+export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface GestureCallbacks {
+  readonly onOpenChange: (open: boolean) => void;
+  readonly setDragStyle: (cssVar: string, value: string) => void;
+  readonly removeDragStyle: (cssVar: string) => void;
+  readonly getDimension: () => number;
+  readonly setPointerCapture: (pointerId: number) => void;
+  readonly setAttribute: (name: string, value: string) => void;
+  readonly removeAttribute: (name: string) => void;
+  readonly setOverscrollStyle: (sizePx: number) => void;
+  readonly removeOverscrollStyle: () => void;
+}

package/schematics/ui/files/drawer/index.ts

@@ -0,0 +1 @@
+export { ZenDrawer } from './drawer';

package/schematics/ui/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { Path } from '@angular-devkit/core';\n\nexport interface GeneratorSchemaBase {\n  currentDirectory: Path;\n  path?: Path;\n  stories: boolean;\n  project?: string;\n}\n\nexport type UiType =\n  | 'alert'\n  | 'avatar'\n  | 'badge'\n  | 'button'\n  | 'card'\n  | 'checkbox'\n  | 'dialog'\n  | 'divider'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'pin'\n  | 'popover'\n  | 'radio'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  ui: UiType[];\n}\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { Path } from '@angular-devkit/core';\n\nexport interface GeneratorSchemaBase {\n  currentDirectory: Path;\n  path?: Path;\n  stories: boolean;\n  project?: string;\n}\n\nexport type UiType =\n  | 'alert'\n  | 'avatar'\n  | 'badge'\n  | 'button'\n  | 'card'\n  | 'checkbox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'pin'\n  | 'popover'\n  | 'radio'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  ui: UiType[];\n}\n"]}

package/schematics/ui/schema.json

@@ -45,6 +45,7 @@
           "checkbox",
           "dialog",
           "divider",
+          "drawer",
           "icon",
           "input",
           "pin",

package/schematics/ui/schema.ts

@@ -16,6 +16,7 @@ export type UiType =
   | 'checkbox'
   | 'dialog'
   | 'divider'
+  | 'drawer'
   | 'form-control'
   | 'icon'
   | 'input'