juxscript 1.1.69 → 1.1.71

package/lib/components/modal.ts

@@ -16,7 +16,7 @@ export interface ModalOptions {
   icon?: EmojiIconType | undefined;
   close?: boolean;
   backdropClose?: boolean;
-  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
+  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
   size?: 'small' | 'medium' | 'large';
   actions?: Array<{ label: string; variant?: string; click?: () => void } | Array<BaseComponent<any>>>;
   style?: string;
@@ -29,7 +29,7 @@ type ModalState = {
   icon: EmojiIconType | undefined;
   close: boolean;
   backdropClose: boolean;
-  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
+  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
   size: string;
   open: boolean;
   actions: Array<{ label: string; variant?: string; click?: () => void } | Array<BaseComponent<any>>>;
@@ -102,6 +102,19 @@ export class Modal extends BaseComponent<ModalState> {
         modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
         break;
 
+      case 'position':
+        // Remove existing position classes
+        this._overlay.className = this._overlay.className
+          .split(' ')
+          .filter(c => !c.startsWith('jux-modal-position-'))
+          .join(' ');
+
+        // Add new position class
+        if (value) {
+          this._overlay.classList.add(`jux-modal-position-${value}`);
+        }
+        break;
+
       case 'actions':
         this._rebuildActions();
         break;
@@ -255,6 +268,11 @@ export class Modal extends BaseComponent<ModalState> {
     return this;
   }
 
+  position(value: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right'): this {
+    this.state.position = value;
+    return this;
+  }
+
   actions(value: Array<{ label: string; variant?: string; click?: () => void }>): this {
     this.state.actions = value;
     return this;
@@ -357,13 +375,19 @@ export class Modal extends BaseComponent<ModalState> {
   render(targetId?: string | HTMLElement | BaseComponent<any>): this {
     const container = this._setupContainer(targetId);
 
-    const { open, title, content, icon, size, close, backdropClose, actions, style, class: className } = this.state;
+    const { open, title, content, icon, size, position, close, backdropClose, actions, style, class: className } = this.state;
     const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
 
     const overlay = document.createElement('div');
     overlay.className = 'jux-modal-overlay';
     overlay.id = this._id;
     overlay.style.display = open ? 'flex' : 'none';
+
+    // Add position class
+    if (position) {
+      overlay.classList.add(`jux-modal-position-${position}`);
+    }
+
     if (className) overlay.className += ` ${className}`;
     if (style) overlay.setAttribute('style', style);
     this._overlay = overlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.69",
+  "version": "1.1.71",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",