@genesislcap/foundation-ui 14.346.0 → 14.347.1

package/dist/dts/dialog/dialog.d.ts

@@ -49,10 +49,19 @@ export declare abstract class DialogElement extends FoundationElement {
     private startTop;
     private resizeOffsetX;
     private resizeOffsetY;
+    private originalWidth;
+    private originalHeight;
+    private originalPosition;
+    private originalLeft;
+    private originalTop;
+    private originalMargin;
+    private isMaximized;
+    private hasBeenResized;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private setupResizeHandlers;
     private removeResizeHandlers;
+    private handleEdgeDoubleClick;
     private handleResizeStart;
     private handleResizeMove;
     private handleResizeEnd;
@@ -60,6 +69,10 @@ export declare abstract class DialogElement extends FoundationElement {
      * Determine if the dialog is showing or closed.
      */
     get open(): boolean;
+    /**
+     * Get the appropriate icon name for the resize button
+     */
+    get resizeIconName(): string;
     /**
      * Show the HTMLDialogElement and its contents
      */
@@ -76,6 +89,16 @@ export declare abstract class DialogElement extends FoundationElement {
      * Dismiss the Dialog from display.
      */
     closeDialog(): void;
+    /**
+     * Maximize the dialog to fill the viewport.
+     * @private
+     */
+    private maximize;
+    /**
+     * Reset the dialog to its original size and position, or maximize if not resized.
+     * @public
+     */
+    resetSize(): void;
 }
 /**
  * @tagname %%prefix%%-dialog

package/dist/dts/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAE9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK/D,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAWjE,eAAO,MAAM,6BAA6B,EAAE,cAG3C,CAAC;AAEF,eAAO,MAAM,mBAAmB,IAAK,CAAC;AAEtC,8BAAsB,aAAc,SAAQ,iBAAiB;IAC3D;;;OAGG;IACH,WAAW,EAAG,iBAAiB,CAAC;IAChC,UAAU,EAAG,WAAW,CAAC;IACzB,cAAc,EAAG,eAAe,CAAC;IACrB,YAAY,EAAG,qBAAqB,CAAC;IACjD,mBAAmB;IAIU,IAAI,EAAE,UAAU,CAAa;IAEpD,QAAQ,EAAE,cAAc,CAAY;IAE1C;;OAEG;IACsD,aAAa,EAAE,OAAO,CAAQ;IAEvF;;OAEG;IACgD,SAAS,EAAE,OAAO,CAAS;IAE9E;;OAEG;IAC+B,QAAQ,EAAE,MAAM,CAAa;IAE/D;;OAEG;IACgC,SAAS,EAAE,MAAM,CAAc;IAElE;;OAEG;IACS,cAAc,EAAE,MAAM,IAAI,CAAC;IAEvC;;OAEG;IACS,eAAe,EAAE,MAAM,IAAI,CAAC;IAGxC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,mBAAmB,CAAgB;IAC3C,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,aAAa,CAAa;IAElC,iBAAiB;IAoBjB,oBAAoB;IAKpB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,iBAAiB;IAqEzB,OAAO,CAAC,gBAAgB;IA4FxB,OAAO,CAAC,eAAe;IAuBvB;;OAEG;IACH,IACI,IAAI,IAAI,OAAO,CAElB;IAED;;OAEG;IACH,QAAQ,CAAC,IAAI,IAAI,IAAI;IAErB;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACI,OAAO;IAOd;;OAEG;IACI,WAAW,IAAI,IAAI;CAQ3B;AAED;;GAEG;AACH,qBAAa,MAAO,SAAQ,aAAa;IACvC,IAAI,IAAI,IAAI;CAIb;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;iBAM3B,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAE9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK/D,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAWjE,eAAO,MAAM,6BAA6B,EAAE,cAG3C,CAAC;AAEF,eAAO,MAAM,mBAAmB,IAAK,CAAC;AAEtC,8BAAsB,aAAc,SAAQ,iBAAiB;IAC3D;;;OAGG;IACH,WAAW,EAAG,iBAAiB,CAAC;IAChC,UAAU,EAAG,WAAW,CAAC;IACzB,cAAc,EAAG,eAAe,CAAC;IACrB,YAAY,EAAG,qBAAqB,CAAC;IACjD,mBAAmB;IAIU,IAAI,EAAE,UAAU,CAAa;IAEpD,QAAQ,EAAE,cAAc,CAAY;IAE1C;;OAEG;IACsD,aAAa,EAAE,OAAO,CAAQ;IAEvF;;OAEG;IACgD,SAAS,EAAE,OAAO,CAAS;IAE9E;;OAEG;IAC+B,QAAQ,EAAE,MAAM,CAAa;IAE/D;;OAEG;IACgC,SAAS,EAAE,MAAM,CAAc;IAElE;;OAEG;IACS,cAAc,EAAE,MAAM,IAAI,CAAC;IAEvC;;OAEG;IACS,eAAe,EAAE,MAAM,IAAI,CAAC;IAGxC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,mBAAmB,CAAgB;IAC3C,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,aAAa,CAAa;IAGlC,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,cAAc,CAAc;IACpC,OAAO,CAAC,gBAAgB,CAAc;IACtC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,cAAc,CAAc;IAGxB,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,cAAc,CAAkB;IAEpD,iBAAiB;IAoBjB,oBAAoB;IAKpB,OAAO,CAAC,mBAAmB;IA4B3B,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,qBAAqB;IAiD7B,OAAO,CAAC,iBAAiB;IAsEzB,OAAO,CAAC,gBAAgB;IA6IxB,OAAO,CAAC,eAAe;IA8BvB;;OAEG;IACH,IACI,IAAI,IAAI,OAAO,CAElB;IAED;;OAEG;IACH,IACI,cAAc,IAAI,MAAM,CAE3B;IAED;;OAEG;IACH,QAAQ,CAAC,IAAI,IAAI,IAAI;IAErB;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACI,OAAO;IAOd;;OAEG;IACI,WAAW,IAAI,IAAI;IAS1B;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAoBhB;;;OAGG;IACI,SAAS,IAAI,IAAI;CAyBzB;AAED;;GAEG;AACH,qBAAa,MAAO,SAAQ,aAAa;IACvC,IAAI,IAAI,IAAI;CAIb;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;iBAM3B,CAAC"}

package/dist/dts/dialog/dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,EAAE,aAyNpC,CAAC"}
+{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,EAAE,aAuQpC,CAAC"}

package/dist/dts/dialog/dialog.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.template.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,gEAqE/C,CAAC;AAEF,eAAO,MAAM,wBAAwB,6DAEpC,CAAC"}
+{"version":3,"file":"dialog.template.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAevC,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,gEA4E/C,CAAC;AAEF,eAAO,MAAM,wBAAwB,6DAEpC,CAAC"}

package/dist/esm/dialog/dialog.js

@@ -48,6 +48,16 @@ export class DialogElement extends FoundationElement {
         this.startTop = 0;
         this.resizeOffsetX = 0;
         this.resizeOffsetY = 0;
+        // Original size tracking for reset
+        this.originalWidth = '';
+        this.originalHeight = '';
+        this.originalPosition = '';
+        this.originalLeft = '';
+        this.originalTop = '';
+        this.originalMargin = '';
+        // Maximize state tracking
+        this.isMaximized = false;
+        this.hasBeenResized = false;
     }
     notificationChanged() {
         if (this.notification)
@@ -76,17 +86,75 @@ export class DialogElement extends FoundationElement {
     setupResizeHandlers() {
         if (!this.resizable)
             return;
+        // Store original dimensions and position for reset
+        this.originalWidth = this.mainElement.style.width || `${this.minWidth}px`;
+        this.originalHeight = this.mainElement.style.height || `${this.minHeight}px`;
+        this.originalPosition = this.mainElement.style.position || '';
+        this.originalLeft = this.mainElement.style.left || '';
+        this.originalTop = this.mainElement.style.top || '';
+        this.originalMargin = this.mainElement.style.margin || '';
+        this.mainElement.style.height = `${this.minHeight}px`;
         this.mainElement.style.minHeight = `${this.minHeight}px`;
+        this.mainElement.style.width = `${this.minWidth}px`;
         this.mainElement.style.minWidth = `${this.minWidth}px`;
+        // Update original values after setting initial size
+        this.originalWidth = this.mainElement.style.width;
+        this.originalHeight = this.mainElement.style.height;
         // Add event listeners for resize handles
         const handles = this.shadowRoot.querySelectorAll('.resize-handle');
         handles.forEach((handle) => {
             handle.addEventListener('mousedown', this.handleResizeStart.bind(this));
+            handle.addEventListener('dblclick', this.handleEdgeDoubleClick.bind(this));
         });
     }
     removeResizeHandlers() {
+        var _a;
         document.removeEventListener('mousemove', this.handleResizeMove.bind(this));
         document.removeEventListener('mouseup', this.handleResizeEnd.bind(this));
+        // Remove double-click listeners from handles
+        const handles = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.resize-handle');
+        handles === null || handles === void 0 ? void 0 : handles.forEach((handle) => {
+            handle.removeEventListener('dblclick', this.handleEdgeDoubleClick.bind(this));
+        });
+    }
+    handleEdgeDoubleClick(e) {
+        if (!this.resizable)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const target = e.target;
+        const direction = target.dataset.direction;
+        // Only handle edge directions (not corners)
+        if (!['n', 's', 'e', 'w'].includes(direction))
+            return;
+        const rect = this.mainElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Convert to fixed positioning if not already
+        this.mainElement.style.position = 'fixed';
+        this.mainElement.style.margin = '0';
+        switch (direction) {
+            case 'n': // North - expand to top
+                this.mainElement.style.height = `${rect.bottom}px`;
+                this.mainElement.style.top = '0px';
+                break;
+            case 's': // South - expand to bottom
+                this.mainElement.style.height = `${viewportHeight - rect.top}px`;
+                break;
+            case 'e': // East - expand to right
+                this.mainElement.style.width = `${viewportWidth - rect.left}px`;
+                break;
+            case 'w': // West - expand to left
+                this.mainElement.style.width = `${rect.right}px`;
+                this.mainElement.style.left = '0px';
+                break;
+        }
+        // Mark as resized since dimensions changed
+        this.hasBeenResized = true;
+        this.$emit('resize', {
+            width: this.mainElement.offsetWidth,
+            height: this.mainElement.offsetHeight,
+        });
     }
     handleResizeStart(e) {
         if (!this.resizable)
@@ -148,6 +216,7 @@ export class DialogElement extends FoundationElement {
         // Add resizing class for styling
         this.mainElement.classList.add('resizing');
     }
+    // eslint-disable-next-line complexity
     handleResizeMove(e) {
         if (!this.isResizing || !this.currentResizeHandle)
             return;
@@ -202,6 +271,9 @@ export class DialogElement extends FoundationElement {
                 shouldUpdatePosition = true;
                 break;
         }
+        // Get viewport dimensions
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
         // Apply minimum constraints only when resizable
         if (this.resizable) {
             // Apply minimum width constraint and adjust position if needed
@@ -222,6 +294,47 @@ export class DialogElement extends FoundationElement {
                     newTop = newTop - heightDiff;
                 }
             }
+            // Apply viewport boundary constraints
+            // Prevent resizing beyond the right edge of viewport
+            if (this.currentResizeHandle.includes('e')) {
+                const maxWidth = viewportWidth - this.startLeft;
+                if (newWidth > maxWidth) {
+                    newWidth = maxWidth;
+                }
+            }
+            // Prevent resizing beyond the bottom edge of viewport
+            if (this.currentResizeHandle.includes('s')) {
+                const maxHeight = viewportHeight - this.startTop;
+                if (newHeight > maxHeight) {
+                    newHeight = maxHeight;
+                }
+            }
+            // Prevent resizing beyond the left edge of viewport
+            if (this.currentResizeHandle.includes('w')) {
+                // Ensure left position doesn't go negative
+                if (newLeft < 0) {
+                    newWidth = newWidth + newLeft; // Reduce width by the negative offset
+                    newLeft = 0;
+                }
+                // Also ensure we don't exceed the available width from new position
+                const maxWidthFromLeft = viewportWidth - newLeft;
+                if (newWidth > maxWidthFromLeft) {
+                    newWidth = maxWidthFromLeft;
+                }
+            }
+            // Prevent resizing beyond the top edge of viewport
+            if (this.currentResizeHandle.includes('n')) {
+                // Ensure top position doesn't go negative
+                if (newTop < 0) {
+                    newHeight = newHeight + newTop; // Reduce height by the negative offset
+                    newTop = 0;
+                }
+                // Also ensure we don't exceed the available height from new position
+                const maxHeightFromTop = viewportHeight - newTop;
+                if (newHeight > maxHeightFromTop) {
+                    newHeight = maxHeightFromTop;
+                }
+            }
         }
         // Apply new dimensions
         this.mainElement.style.width = `${newWidth}px`;
@@ -245,6 +358,12 @@ export class DialogElement extends FoundationElement {
         document.removeEventListener('mouseup', this.handleResizeEnd.bind(this));
         // Remove resizing class
         this.mainElement.classList.remove('resizing');
+        // Mark as resized if dimensions changed from original
+        const currentWidth = this.mainElement.style.width;
+        const currentHeight = this.mainElement.style.height;
+        if (currentWidth !== this.originalWidth || currentHeight !== this.originalHeight) {
+            this.hasBeenResized = true;
+        }
         this.$emit('resize', {
             width: this.mainElement.offsetWidth,
             height: this.mainElement.offsetHeight,
@@ -256,6 +375,12 @@ export class DialogElement extends FoundationElement {
     get open() {
         return this.mainElement.hasAttribute('open');
     }
+    /**
+     * Get the appropriate icon name for the resize button
+     */
+    get resizeIconName() {
+        return this.hasBeenResized || this.isMaximized ? 'compress' : 'expand';
+    }
     /**
      * Remove the HTMLDialogElement from display
      */
@@ -284,6 +409,53 @@ export class DialogElement extends FoundationElement {
             logger.error(e);
         }
     }
+    /**
+     * Maximize the dialog to fill the viewport.
+     * @private
+     */
+    maximize() {
+        if (!this.resizable || !this.mainElement)
+            return;
+        // Convert to fixed positioning for full viewport control
+        this.mainElement.style.position = 'fixed';
+        this.mainElement.style.left = '0px';
+        this.mainElement.style.top = '0px';
+        this.mainElement.style.margin = '0';
+        this.mainElement.style.width = '100vw';
+        this.mainElement.style.height = '100vh';
+        this.isMaximized = true;
+        this.hasBeenResized = true;
+        this.$emit('resize', {
+            width: this.mainElement.offsetWidth,
+            height: this.mainElement.offsetHeight,
+        });
+    }
+    /**
+     * Reset the dialog to its original size and position, or maximize if not resized.
+     * @public
+     */
+    resetSize() {
+        if (!this.resizable || !this.mainElement)
+            return;
+        // If dialog hasn't been resized, maximize it
+        if (!this.hasBeenResized && !this.isMaximized) {
+            this.maximize();
+            return;
+        }
+        // Otherwise, reset to original size
+        this.mainElement.style.width = this.originalWidth;
+        this.mainElement.style.height = this.originalHeight;
+        this.mainElement.style.position = this.originalPosition;
+        this.mainElement.style.left = this.originalLeft;
+        this.mainElement.style.top = this.originalTop;
+        this.mainElement.style.margin = this.originalMargin;
+        this.isMaximized = false;
+        this.hasBeenResized = false;
+        this.$emit('resize', {
+            width: this.mainElement.offsetWidth,
+            height: this.mainElement.offsetHeight,
+        });
+    }
 }
 __decorate([
     observable
@@ -312,9 +484,18 @@ __decorate([
 __decorate([
     observable
 ], DialogElement.prototype, "onCloseCallback", void 0);
+__decorate([
+    observable
+], DialogElement.prototype, "isMaximized", void 0);
+__decorate([
+    observable
+], DialogElement.prototype, "hasBeenResized", void 0);
 __decorate([
     volatile
 ], DialogElement.prototype, "open", null);
+__decorate([
+    volatile
+], DialogElement.prototype, "resizeIconName", null);
 /**
  * @tagname %%prefix%%-dialog
  */

package/dist/esm/dialog/dialog.styles.js

@@ -32,10 +32,20 @@ export const foundationDialogStyles = css `
     background-color: var(--success-color);
   }
 
+  .header-controls {
+    display: flex;
+    gap: calc(var(--design-unit) * 1px);
+    align-items: center;
+  }
+
   .close-icon {
     display: var(--dialog-close-icon-display);
   }
 
+  .reset-size-icon {
+    display: flex;
+  }
+
   dialog {
     background-color: var(--dialog-background, var(--fill-color));
     padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px)
@@ -44,13 +54,6 @@ export const foundationDialogStyles = css `
     overflow: inherit;
   }
 
-  :host([position='right']) dialog .content-wrapper,
-  :host([position='left']) dialog .content-wrapper,
-  :host([position='left']) dialog,
-  :host([position='right']) dialog {
-    height: 100%;
-  }
-
   :host([position='left']) dialog {
     margin-left: 0;
   }
@@ -63,6 +66,13 @@ export const foundationDialogStyles = css `
     width: 100%;
   }
 
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
   .title {
     margin-top: calc(var(--design-unit) * 2px);
     font-size: 14px;
@@ -75,18 +85,54 @@ export const foundationDialogStyles = css `
     white-space: pre-line;
   }
 
+  .content-container {
+    box-sizing: border-box;
+  }
+
   :host([resizable]) dialog {
     position: relative;
     box-sizing: border-box;
+    max-width: 100%;
+    max-height: 100%;
   }
 
+  :host([resizable]) dialog[open] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Override design system max-width constraints for resizable dialogs */
   :host([resizable]) dialog .content-wrapper {
     position: relative;
     height: 100%;
     width: 100%;
+    max-height: 100%;
     min-width: 100%;
     max-width: 100%;
     resize: none;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  :host([resizable]) .content-container {
+    flex: 1 1 auto;
+    overflow: auto;
+    min-height: 0;
+    box-sizing: border-box;
+  }
+
+  :host([resizable]) .top,
+  :host([resizable]) .bottom {
+    flex: 0 0 auto;
+  }
+
+  :host([position='right']) dialog .content-wrapper,
+  :host([position='left']) dialog .content-wrapper,
+  :host([position='left']) dialog,
+  :host([position='right']) dialog {
+    height: 100%;
   }
 
   /* Resize handles */

package/dist/esm/dialog/dialog.template.js

@@ -1,5 +1,15 @@
+import { whenElse } from '@genesislcap/foundation-utils';
 import { html, ref, repeat, when } from '@microsoft/fast-element';
 import { getPrefix } from '../utils';
+const contentAndPlaceholer = html `
+  <slot>
+    ${when((x) => x.notification, html `
+        <div class="details">
+          ${(x) => { var _a; return ((_a = x.notification) === null || _a === void 0 ? void 0 : _a.body) || 'Place holder for notification message'; }}
+        </div>
+      `)}
+  </slot>
+`;
 export const getDialogTemplate = (prefix) => html `
   <dialog ${ref('mainElement')} part="dialog" type=${(x) => x.type}>
     <div class="content-wrapper" part="content">
@@ -7,19 +17,22 @@ export const getDialogTemplate = (prefix) => html `
         <slot name="top" ${ref('topElementSlot')}>
           <h2 slot="top" class="title">${(x) => { var _a; return (_a = x.notification) === null || _a === void 0 ? void 0 : _a.title; }}</h2>
         </slot>
-        ${when((x) => x.showCloseIcon, html `
-            <${prefix}-button class="close-icon" part="close-icon" aria-label="close" appearance="stealth" @click=${(x) => x.close()}>
-              <${prefix}-icon name="times"></${prefix}-icon>
-            </${prefix}-button>
-          `)}
+        <div class="header-controls">
+          ${when((x) => x.resizable, html `
+              <${prefix}-button class="reset-size-icon" part="reset-size-icon" aria-label="reset size" appearance="stealth" @click=${(x) => x.resetSize()}>
+                <${prefix}-icon name="${(x) => x.resizeIconName}"></${prefix}-icon>
+              </${prefix}-button>
+            `)}
+          ${when((x) => x.showCloseIcon, html `
+              <${prefix}-button class="close-icon" part="close-icon" aria-label="close" appearance="stealth" @click=${(x) => x.close()}>
+                <${prefix}-icon name="times"></${prefix}-icon>
+              </${prefix}-button>
+            `)}
+        </div>
       </div>
-      <slot>
-        ${when((x) => x.notification, html `
-            <div class="details">
-              ${(x) => { var _a; return ((_a = x.notification) === null || _a === void 0 ? void 0 : _a.body) || 'Place holder for notification message'; }}
-            </div>
-          `)}
-      </slot>
+      ${whenElse((x) => x.resizable, html `
+          <div class="content-container" part="content-container">${contentAndPlaceholer}</div>
+        `, contentAndPlaceholer)}
       <div part="bottom" class="bottom">
         <slot name="bottom">
           ${when((x) => x.notification, html `

package/dist/esm/modal/modal.js

@@ -82,7 +82,7 @@ export class Modal extends DialogElement {
         return assignedNodes.some((node) => node === target || node.contains(target));
     }
     onMouseDown(event) {
-        if (!this.topElement || !this.isEventTargetInDraggableTarget(event))
+        if (!this.topElement || !this.isEventTargetInDraggableTarget(event) || this.isDragging)
             return;
         this.isDragging = true;
         const rect = this.mainElement.getBoundingClientRect();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.346.0",
+  "version": "14.347.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -83,13 +83,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.346.0",
-    "@genesislcap/genx": "14.346.0",
-    "@genesislcap/rollup-builder": "14.346.0",
-    "@genesislcap/ts-builder": "14.346.0",
-    "@genesislcap/uvu-playwright-builder": "14.346.0",
-    "@genesislcap/vite-builder": "14.346.0",
-    "@genesislcap/webpack-builder": "14.346.0",
+    "@genesislcap/foundation-testing": "14.347.1",
+    "@genesislcap/genx": "14.347.1",
+    "@genesislcap/rollup-builder": "14.347.1",
+    "@genesislcap/ts-builder": "14.347.1",
+    "@genesislcap/uvu-playwright-builder": "14.347.1",
+    "@genesislcap/vite-builder": "14.347.1",
+    "@genesislcap/webpack-builder": "14.347.1",
     "copyfiles": "^2.4.1"
   },
   "dependencies": {
@@ -98,15 +98,15 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/expression-builder": "14.346.0",
-    "@genesislcap/foundation-comms": "14.346.0",
-    "@genesislcap/foundation-criteria": "14.346.0",
-    "@genesislcap/foundation-errors": "14.346.0",
-    "@genesislcap/foundation-events": "14.346.0",
-    "@genesislcap/foundation-logger": "14.346.0",
-    "@genesislcap/foundation-notifications": "14.346.0",
-    "@genesislcap/foundation-user": "14.346.0",
-    "@genesislcap/foundation-utils": "14.346.0",
+    "@genesislcap/expression-builder": "14.347.1",
+    "@genesislcap/foundation-comms": "14.347.1",
+    "@genesislcap/foundation-criteria": "14.347.1",
+    "@genesislcap/foundation-errors": "14.347.1",
+    "@genesislcap/foundation-events": "14.347.1",
+    "@genesislcap/foundation-logger": "14.347.1",
+    "@genesislcap/foundation-notifications": "14.347.1",
+    "@genesislcap/foundation-user": "14.347.1",
+    "@genesislcap/foundation-utils": "14.347.1",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -128,5 +128,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "9d95d289ce549d9c0f347187acbc3ae6ac5d9a69"
+  "gitHead": "fb3dde1303cacf1079541238912b2d3b005dfe16"
 }