@origostudio/origo-design 0.0.55 → 0.0.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/origo-design",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "license": "MIT",
   "repository": {
     "type": "git",

package/packages/angular-renderer/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.0.56 (2026-10-13)
+
+### 🚀 Features
+
+- implement modal and overlay primitives including dialog, drawer, popover, and tooltip components ([ca3030d](https://github.com/OrigoStudio/origo-design/commit/ca3030d))
+- implement modal and overlay primitives with shadow DOM support and focus trapping ([0c8b1b8](https://github.com/OrigoStudio/origo-design/commit/0c8b1b8))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.55 (2026-10-13)
 
 ### 🚀 Features

package/packages/angular-renderer/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@origostudio/angular-renderer",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "private": false,
   "type": "commonjs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@origostudio/core": "0.0.55",
-    "@origostudio/design-tokens": "0.0.55",
+    "@origostudio/core": "0.0.56",
+    "@origostudio/design-tokens": "0.0.56",
     "tslib": "^2.3.0",
     "@analogjs/vite-plugin-angular": "^2.7.1",
     "zone.js": "^0.16.3",

package/packages/angular-renderer/src/components/primitives/dialog/dialog.component.html

@@ -0,0 +1,49 @@
+<ng-template #dialogTemplate>
+  <div
+    #dialogElement
+    role="dialog"
+    [attr.aria-modal]="computedModal() ? 'true' : null"
+    class="origo-dialog"
+    [class.origo-dialog--maximized]="isMaximized()"
+    [class.origo-dialog--draggable]="computedDraggable() && !isMaximized()"
+    [class.origo-dialog--resizable]="computedResizable() && !isMaximized()"
+    [style.--origo-dialog-translate-x.px]="dragPosition().x"
+    [style.--origo-dialog-translate-y.px]="dragPosition().y"
+    [attr.aria-labelledby]="computedHeader() ? headerId : null"
+    [attr.aria-label]="!computedHeader() ? computedAriaLabel() || 'Dialog' : null"
+    [attr.aria-describedby]="computedAriaDescribedBy() || contentId"
+    [attr.data-testid]="contract().id"
+  >
+    <div class="origo-dialog__header" (pointerdown)="onHeaderPointerDown($event)">
+      @if (computedHeader()) {
+        <h2 [id]="headerId" class="origo-dialog__title">{{ computedHeader() }}</h2>
+      }
+      <div class="origo-dialog__header-actions">
+        @if (computedMaximizable()) {
+          <button
+            type="button"
+            class="origo-dialog__action origo-dialog__action--maximize"
+            [attr.aria-label]="isMaximized() ? 'Restore dialog' : 'Maximize dialog'"
+            (click)="toggleMaximize()"
+          >
+            <span class="origo-dialog__action-icon">{{ isMaximized() ? '🗗' : '🗖' }}</span>
+          </button>
+        }
+        @if (computedClosable()) {
+          <button
+            type="button"
+            class="origo-dialog__action origo-dialog__action--close"
+            aria-label="Close dialog"
+            (click)="onClose()"
+          >
+            <span class="origo-dialog__action-icon">✕</span>
+          </button>
+        }
+      </div>
+    </div>
+    <div [id]="contentId" class="origo-dialog__content">
+      <ng-container #vc></ng-container>
+      <ng-content></ng-content>
+    </div>
+  </div>
+</ng-template>

package/packages/angular-renderer/src/components/primitives/dialog/dialog.component.scss

@@ -0,0 +1,102 @@
+:host {
+  display: contents;
+}
+
+.origo-dialog {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  background-color: var(--origo-color-surface-overlay, var(--origo-color-surface-primary));
+  color: var(--origo-color-text-primary);
+  border-radius: var(--origo-radius-md);
+  box-shadow: var(--origo-shadow-lg);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-subtle);
+  overflow: hidden;
+  outline: none;
+  transform: translate(var(--origo-dialog-translate-x, 0), var(--origo-dialog-translate-y, 0));
+
+  &--draggable {
+    user-select: none;
+  }
+
+  &--resizable {
+    resize: both;
+    overflow: auto;
+  }
+
+  &--maximized {
+    inline-size: 100vw !important;
+    block-size: 100vh !important;
+    max-inline-size: 100vw !important;
+    max-block-size: 100vh !important;
+    border-radius: 0 !important;
+    inset-block-start: 0 !important;
+    inset-inline-start: 0 !important;
+    transform: none !important;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: var(--origo-space-md);
+    padding-block: var(--origo-space-md);
+    border-block-end: var(--origo-border-width-default) solid var(--origo-color-border-subtle);
+    background-color: var(--origo-color-surface-secondary);
+    gap: var(--origo-space-sm);
+
+    .origo-dialog--draggable & {
+      cursor: move;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    font-size: var(--origo-font-size-lg);
+    font-weight: var(--origo-font-weight-semibold);
+    color: var(--origo-color-text-primary);
+    line-height: var(--origo-line-height-tight);
+  }
+
+  &__header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--origo-space-xs);
+    margin-inline-start: auto;
+  }
+
+  &__action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--origo-color-text-secondary);
+    border-radius: var(--origo-radius-sm);
+    padding-inline: var(--origo-space-xs);
+    padding-block: var(--origo-space-xs);
+    cursor: pointer;
+    font-size: var(--origo-font-size-md);
+    line-height: 1;
+
+    &:hover {
+      background-color: var(--origo-color-action-hover);
+      color: var(--origo-color-text-primary);
+    }
+
+    &:focus-visible {
+      outline: var(--origo-border-width-focus) solid var(--origo-color-focus-ring);
+      outline-offset: var(--origo-space-xxs);
+    }
+  }
+
+  &__content {
+    padding-inline: var(--origo-space-md);
+    padding-block: var(--origo-space-md);
+    flex: 1 1 auto;
+    overflow-y: auto;
+    color: var(--origo-color-text-primary);
+  }
+}

package/packages/angular-renderer/src/components/primitives/dialog/dialog.component.ts

@@ -0,0 +1,415 @@
+import {
+  Component,
+  input,
+  output,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  inject,
+  viewChild,
+  ViewContainerRef,
+  TemplateRef,
+  ElementRef,
+  signal,
+  computed,
+  effect,
+  DestroyRef,
+  PLATFORM_ID,
+} from '@angular/core';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { InteractionContract } from '@origostudio/core';
+import {
+  OrigoAdapter,
+  ContainerComponent,
+  coerceContractProps,
+} from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+import { OrigoOverlayService } from '../../../lib/overlay/overlay.service';
+import { OrigoOverlayConfig, OrigoOverlayRef } from '../../../lib/overlay/overlay.models';
+
+let dialogCounter = 0;
+
+export interface DialogProps {
+  visible?: boolean;
+  header?: string;
+  modal?: boolean;
+  closable?: boolean;
+  closeOnEscape?: boolean;
+  dismissableMask?: boolean;
+  draggable?: boolean;
+  resizable?: boolean;
+  maximizable?: boolean;
+  maximized?: boolean;
+  width?: string;
+  height?: string;
+  minWidth?: string;
+  minHeight?: string;
+  maxWidth?: string;
+  maxHeight?: string;
+  position?: 'center' | 'top' | 'bottom' | 'start' | 'end';
+  blockScroll?: boolean;
+  data?: unknown;
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+export const DialogContractSchema = {
+  permissions: 'object',
+  rules: 'object',
+  metadata: 'object',
+  'aria-label': 'string',
+  'aria-describedby': 'string',
+  visible: 'boolean',
+  header: 'string',
+  modal: 'boolean',
+  closable: 'boolean',
+  closeOnEscape: 'boolean',
+  dismissableMask: 'boolean',
+  draggable: 'boolean',
+  resizable: 'boolean',
+  maximizable: 'boolean',
+  maximized: 'boolean',
+  width: 'string',
+  height: 'string',
+  minWidth: 'string',
+  minHeight: 'string',
+  maxWidth: 'string',
+  maxHeight: 'string',
+  position: 'string',
+  blockScroll: 'boolean',
+  data: 'object',
+} as const;
+
+@Component({
+  selector: 'origo-dialog',
+  standalone: true,
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class.origo-dialog-host]': 'true',
+    '[attr.data-testid]': 'contract().id',
+  },
+})
+export class DialogComponent implements OrigoAdapter<DialogProps>, ContainerComponent {
+  static readonly contractSchema = DialogContractSchema;
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<DialogProps>>();
+  vc = viewChild('vc', { read: ViewContainerRef });
+
+  dialogTemplate = viewChild('dialogTemplate', { read: TemplateRef });
+  dialogElement = viewChild<ElementRef<HTMLElement>>('dialogElement');
+
+  visibleChange = output<boolean>();
+  open = output<void>();
+  close = output<void>();
+  maximize = output<boolean>();
+  restore = output<void>();
+  dragEnd = output<{ x: number; y: number }>();
+  resizeEnd = output<{ width: number; height: number }>();
+
+  private overlayService = inject(OrigoOverlayService);
+  private destroyRef = inject(DestroyRef);
+  private vcr = inject(ViewContainerRef);
+  private experienceAdapter = inject(WebExperienceAdapterService);
+  private platformId = inject(PLATFORM_ID);
+  private document = inject(DOCUMENT);
+
+  private readonly id = ++dialogCounter;
+  readonly headerId = `origo-dialog-header-${this.id}`;
+  readonly contentId = `origo-dialog-content-${this.id}`;
+
+  private overlayRef: OrigoOverlayRef | null = null;
+  private isOpen = false;
+  private resizeObserver: ResizeObserver | null = null;
+  private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  isMaximized = signal(false);
+  dragPosition = signal<{ x: number; y: number }>({ x: 0, y: 0 });
+
+  private isDragging = false;
+  private dragStartCoords = { x: 0, y: 0 };
+  private initialDragPos = { x: 0, y: 0 };
+  private pointerMoveListener: ((e: PointerEvent) => void) | null = null;
+  private pointerUpListener: ((e: PointerEvent) => void) | null = null;
+
+  coercedProps = computed(() =>
+    coerceContractProps<DialogProps>(this.contract()?.props ?? {}, DialogContractSchema)
+  );
+
+  computedVisible = computed(() => !!this.coercedProps().visible);
+  computedHeader = computed(() => this.coercedProps().header);
+  computedModal = computed(() => this.coercedProps().modal !== false);
+  computedClosable = computed(() => this.coercedProps().closable !== false);
+  computedCloseOnEscape = computed(() => this.coercedProps().closeOnEscape !== false);
+  computedDismissableMask = computed(() => !!this.coercedProps().dismissableMask);
+  computedDraggable = computed(() => !!this.coercedProps().draggable);
+  computedResizable = computed(() => !!this.coercedProps().resizable);
+  computedMaximizable = computed(() => !!this.coercedProps().maximizable);
+
+  computedWidth = computed(() => this.coercedProps().width ?? '560px');
+  computedHeight = computed(() => this.coercedProps().height ?? 'auto');
+  computedMinWidth = computed(() => this.coercedProps().minWidth);
+  computedMinHeight = computed(() => this.coercedProps().minHeight);
+  computedMaxWidth = computed(() => this.coercedProps().maxWidth ?? '90vw');
+  computedMaxHeight = computed(() => this.coercedProps().maxHeight ?? '90vh');
+  computedPosition = computed(
+    () =>
+      (this.coercedProps().position as 'center' | 'top' | 'bottom' | 'start' | 'end') ?? 'center'
+  );
+
+  computedAriaLabel = computed(() => {
+    const label = this.contract()?.props?.['aria-label'];
+    return label !== undefined && label !== null ? String(label) : undefined;
+  });
+
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.contract()?.props?.['aria-describedby'];
+    return desc !== undefined && desc !== null ? String(desc) : undefined;
+  });
+
+  constructor() {
+    effect(() => {
+      const visible = this.computedVisible();
+      if (visible && !this.isOpen) {
+        this.openDialog();
+      } else if (!visible && this.isOpen) {
+        this.closeDialog(false);
+      }
+    });
+
+    effect(() => {
+      const maxProp = this.coercedProps().maximized;
+      if (maxProp !== undefined) {
+        this.isMaximized.set(!!maxProp);
+      }
+    });
+
+    this.destroyRef.onDestroy(() => {
+      this.cleanup();
+    });
+  }
+
+  private openDialog(): void {
+    if (this.isOpen) return;
+
+    const tpl = this.dialogTemplate();
+    if (!tpl) return;
+
+    const config: OrigoOverlayConfig = {
+      position: {
+        type: 'global',
+        position: this.computedPosition(),
+        width: this.isMaximized() ? '100vw' : this.computedWidth(),
+        height: this.isMaximized() ? '100vh' : this.computedHeight(),
+        minWidth: this.isMaximized() ? '100vw' : this.computedMinWidth(),
+        minHeight: this.isMaximized() ? '100vh' : this.computedMinHeight(),
+        maxWidth: this.isMaximized() ? '100vw' : this.computedMaxWidth(),
+        maxHeight: this.isMaximized() ? '100vh' : this.computedMaxHeight(),
+      },
+      hasBackdrop: this.computedModal(),
+      backdropClass: 'origo-dialog-backdrop',
+      panelClass: [
+        'origo-overlay-pane--dialog',
+        'origo-overlay-pane--modal',
+        ...(this.isMaximized() ? ['origo-overlay-pane--maximized'] : []),
+      ],
+      closeOnBackdropClick: this.computedDismissableMask(),
+      closeOnOutsideClick: this.computedDismissableMask(),
+      closeOnEscape: this.computedCloseOnEscape(),
+      trapFocus: this.computedModal(),
+      viewContainerRef: this.vcr,
+    };
+
+    this.overlayRef = this.overlayService.create(config, this.destroyRef);
+    this.overlayRef.open(tpl, this.vcr);
+    this.isOpen = true;
+
+    this.open.emit();
+    this.experienceAdapter.updateState(this.contract().id, 'visible', true);
+    this.experienceAdapter.dispatchCapability(this.contract().id, 'open', undefined);
+
+    this.setupResizeObserver();
+
+    this.overlayRef.afterClosed().then(result => {
+      if (this.isOpen) {
+        this.isOpen = false;
+        this.cleanupDrag();
+        this.visibleChange.emit(false);
+        this.close.emit();
+        this.experienceAdapter.updateState(this.contract().id, 'visible', false);
+        this.experienceAdapter.dispatchCapability(this.contract().id, 'close', result);
+      }
+    });
+  }
+
+  private closeDialog(notify = true): void {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.cleanupDrag();
+
+    if (this.overlayRef?.isOpen) {
+      this.overlayRef.close();
+    }
+
+    if (notify) {
+      this.visibleChange.emit(false);
+      this.close.emit();
+      this.experienceAdapter.updateState(this.contract().id, 'visible', false);
+      this.experienceAdapter.dispatchCapability(this.contract().id, 'close', undefined);
+    }
+  }
+
+  onClose(): void {
+    this.closeDialog(true);
+  }
+
+  toggleMaximize(): void {
+    const next = !this.isMaximized();
+    this.isMaximized.set(next);
+
+    if (this.overlayRef?.isOpen) {
+      if (next) {
+        this.overlayRef.addPanelClass?.('origo-overlay-pane--maximized');
+        this.overlayRef.updateSize?.({
+          width: '100vw',
+          height: '100vh',
+          maxWidth: '100vw',
+          maxHeight: '100vh',
+        });
+      } else {
+        this.overlayRef.removePanelClass?.('origo-overlay-pane--maximized');
+        this.overlayRef.updateSize?.({
+          width: this.computedWidth(),
+          height: this.computedHeight(),
+          maxWidth: this.computedMaxWidth(),
+          maxHeight: this.computedMaxHeight(),
+        });
+      }
+      this.overlayRef.updatePosition();
+    }
+
+    if (next) {
+      this.maximize.emit(true);
+      this.experienceAdapter.dispatchCapability(this.contract().id, 'maximize', true);
+    } else {
+      this.restore.emit();
+      this.experienceAdapter.dispatchCapability(this.contract().id, 'restore', undefined);
+    }
+  }
+
+  onHeaderPointerDown(event: PointerEvent): void {
+    if (!this.computedDraggable() || this.isMaximized() || event.button !== 0) {
+      return;
+    }
+
+    // Do not initiate dragging if clicking close or maximize buttons
+    const target = event.target as HTMLElement | null;
+    if (target?.closest('button')) {
+      return;
+    }
+
+    if (!isPlatformBrowser(this.platformId) || !this.document) {
+      return;
+    }
+
+    this.cleanupDragListeners();
+    this.isDragging = true;
+    this.dragStartCoords = { x: event.clientX, y: event.clientY };
+    this.initialDragPos = { ...this.dragPosition() };
+
+    this.pointerMoveListener = (e: PointerEvent) => {
+      if (!this.isDragging) return;
+      const dx = e.clientX - this.dragStartCoords.x;
+      const dy = e.clientY - this.dragStartCoords.y;
+      this.dragPosition.set({
+        x: this.initialDragPos.x + dx,
+        y: this.initialDragPos.y + dy,
+      });
+    };
+
+    this.pointerUpListener = () => {
+      if (!this.isDragging) return;
+      this.isDragging = false;
+      const finalPos = this.dragPosition();
+      this.dragEnd.emit(finalPos);
+      this.experienceAdapter.dispatchCapability(this.contract().id, 'dragEnd', finalPos);
+      this.cleanupDragListeners();
+    };
+
+    this.document.addEventListener('pointermove', this.pointerMoveListener);
+    this.document.addEventListener('pointerup', this.pointerUpListener);
+  }
+
+  private setupResizeObserver(): void {
+    if (!isPlatformBrowser(this.platformId) || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout);
+    }
+
+    this.resizeTimeout = setTimeout(() => {
+      if (!this.isOpen) return;
+      const el = this.dialogElement()?.nativeElement;
+      if (!el) return;
+
+      let initial = true;
+      this.resizeObserver = new ResizeObserver(entries => {
+        if (initial) {
+          initial = false;
+          return;
+        }
+        if (this.isMaximized()) return;
+        for (const entry of entries) {
+          const dims = {
+            width: Math.round(entry.contentRect.width),
+            height: Math.round(entry.contentRect.height),
+          };
+          this.resizeEnd.emit(dims);
+          this.experienceAdapter.dispatchCapability(this.contract().id, 'resizeEnd', dims);
+        }
+      });
+
+      this.resizeObserver.observe(el);
+    }, 0);
+  }
+
+  private cleanupDrag(): void {
+    this.isDragging = false;
+    this.cleanupDragListeners();
+  }
+
+  private cleanupDragListeners(): void {
+    if (this.pointerMoveListener && this.document) {
+      this.document.removeEventListener('pointermove', this.pointerMoveListener);
+      this.pointerMoveListener = null;
+    }
+    if (this.pointerUpListener && this.document) {
+      this.document.removeEventListener('pointerup', this.pointerUpListener);
+      this.pointerUpListener = null;
+    }
+  }
+
+  private cleanup(): void {
+    this.cleanupDrag();
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = null;
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+      this.overlayRef = null;
+    }
+    this.isOpen = false;
+  }
+}

package/packages/angular-renderer/src/components/primitives/drawer/drawer.component.html

@@ -0,0 +1,38 @@
+<ng-template #drawerTemplate>
+  <div
+    role="dialog"
+    [attr.aria-modal]="computedModal() ? 'true' : null"
+    class="origo-drawer"
+    [class.origo-drawer--left]="computedPosition() === 'left'"
+    [class.origo-drawer--right]="computedPosition() === 'right'"
+    [class.origo-drawer--top]="computedPosition() === 'top'"
+    [class.origo-drawer--bottom]="computedPosition() === 'bottom'"
+    [attr.aria-labelledby]="computedHeader() ? headerId : null"
+    [attr.aria-label]="!computedHeader() ? computedAriaLabel() : null"
+    [attr.aria-describedby]="computedAriaDescribedBy()"
+    [attr.data-testid]="contract().id"
+  >
+    <div class="origo-drawer__header">
+      @if (computedHeader()) {
+        <h2 [id]="headerId" class="origo-drawer__title">{{ computedHeader() }}</h2>
+      }
+      @if (computedClosable()) {
+        <button
+          type="button"
+          class="origo-drawer__close"
+          aria-label="Close drawer"
+          (click)="onClose()"
+        >
+          <span class="origo-drawer__close-icon">✕</span>
+        </button>
+      }
+    </div>
+    <div class="origo-drawer__content">
+      <ng-container #vc></ng-container>
+      <ng-content></ng-content>
+    </div>
+    @if (computedFooter()) {
+      <div class="origo-drawer__footer">{{ computedFooter() }}</div>
+    }
+  </div>
+</ng-template>