1.10.3

changelog.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 2025-06-27 - 1.10.1 - fix(modal)
+Improve modal overscroll behavior by adding 'overscroll-behavior: contain' to content container
+
+- Added 'overscroll-behavior: contain' to .modal .content to ensure proper scroll containment
+- Applied overscroll-behavior in modal container for enhanced responsiveness on mobile and desktop
+
+## 2025-06-26 - 1.10.0 - feat(dees-modal)
+Add mobileFullscreen option to modals for full-screen mobile support
+
+- Introduced a new boolean property 'mobileFullscreen' in ts_web/elements/dees-modal.ts
+- Updated modal CSS under the media query to apply 'mobile-fullscreen' class, allowing full viewport modals on mobile devices
+- Extended modal style rules to include adjustments for margin, border-radius, and maximum heights on smaller screens
+
 ## 2025-06-26 - 1.9.9 - fix(dees-input-multitoggle, dees-input-typelist)
 Replace dynamic import with static import for demo functions in dees-input-multitoggle and dees-input-typelist
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.9.9",
+  "version": "1.10.3",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.9.9',
+  version: '1.10.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/dees-input-typelist.ts

@@ -35,12 +35,24 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
       }
       .mainbox {
         border-radius: 3px;
-        background: #222;
+        background: ${cssManager.bdTheme('#fafafa', '#222222')};
         overflow: hidden;
-        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
-        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
-        border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')};
-        border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
+        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
+        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #222')};
+        border-right: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
+        border-left: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
+        box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
+        transition: all 0.2s;
+        position: relative;
+      }
+      
+      .mainbox:hover {
+        filter: ${cssManager.bdTheme('brightness(0.98)', 'brightness(1.05)')};
+      }
+      
+      .mainbox:focus-within {
+        outline: 2px solid ${cssManager.bdTheme('#0069f2', '#0084ff')};
+        outline-offset: -2px;
       }
 
       .tags {
@@ -50,14 +62,15 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
 
       .notags {
         text-align: center;
-        opacity: 0.5;
-        font-size: 12px;
+        color: ${cssManager.bdTheme('#999', '#666')};
+        font-size: 13px;
+        font-style: italic;
       }
 
       input {
         display: block;
         box-sizing: border-box;
-        background: #181818;
+        background: ${cssManager.bdTheme('#f5f5f5', '#181818')};
         width: 100%;
         outline: none;
         border: none;
@@ -67,30 +80,68 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
         line-height: 32px;
         height: 0px;
         transition: height 0.2s;
+        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
       }
 
       input:focus {
         height: 32px;
+        background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
+      }
+      
+      input::placeholder {
+        color: ${cssManager.bdTheme('#999', '#666')};
       }
 
       .tag {
         display: inline-block;
-        background: ${cssManager.bdTheme('#e0e0e0', '#444')};
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        padding: 4px 8px;
-        border-radius: 3px;
-        margin: 2px;
-        font-size: 12px;
+        background: ${cssManager.bdTheme('#e8f5e9', '#2d3a2d')};
+        color: ${cssManager.bdTheme('#2e7d32', '#81c784')};
+        padding: 4px 10px;
+        border-radius: 4px;
+        margin: 3px;
+        font-size: 13px;
+        font-weight: 500;
+        transition: all 0.2s;
+        border: 1px solid ${cssManager.bdTheme('#c8e6c9', '#1b5e20')};
+      }
+      
+      .tag:hover {
+        background: ${cssManager.bdTheme('#c8e6c9', '#3d4f3d')};
+        transform: translateY(-1px);
       }
 
       .tag .remove {
-        margin-left: 6px;
+        margin-left: 8px;
         cursor: pointer;
-        opacity: 0.6;
+        opacity: 0.7;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 1;
+        transition: opacity 0.2s;
       }
 
       .tag .remove:hover {
         opacity: 1;
+        color: ${cssManager.bdTheme('#c62828', '#ef5350')};
+      }
+      
+      /* Disabled state */
+      :host([disabled]) .mainbox {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+      
+      :host([disabled]) .tags {
+        cursor: not-allowed;
+      }
+      
+      :host([disabled]) .tag {
+        pointer-events: none;
+      }
+      
+      :host([disabled]) input {
+        cursor: not-allowed;
+        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
       }
     `,
   ];

ts_web/elements/dees-modal.ts

@@ -42,6 +42,7 @@ export class DeesModal extends DeesElement {
     showCloseButton?: boolean;
     showHelpButton?: boolean;
     onHelp?: () => void | Promise<void>;
+    mobileFullscreen?: boolean;
   }) {
     const body = document.body;
     const modal = new DeesModal();
@@ -54,6 +55,7 @@ export class DeesModal extends DeesElement {
     if (optionsArg.showCloseButton !== undefined) modal.showCloseButton = optionsArg.showCloseButton;
     if (optionsArg.showHelpButton !== undefined) modal.showHelpButton = optionsArg.showHelpButton;
     if (optionsArg.onHelp) modal.onHelp = optionsArg.onHelp;
+    if (optionsArg.mobileFullscreen !== undefined) modal.mobileFullscreen = optionsArg.mobileFullscreen;
     modal.windowLayer = await DeesWindowLayer.createAndShow({
       blur: true,
     });
@@ -101,6 +103,9 @@ export class DeesModal extends DeesElement {
   @property({ attribute: false })
   public onHelp: () => void | Promise<void>;
   
+  @property({ type: Boolean })
+  public mobileFullscreen: boolean = false;
+  
   @state()
   private modalZIndex: number = 1000;
 
@@ -132,6 +137,7 @@ export class DeesModal extends DeesElement {
         transform: translateY(0px) scale(0.95);
         opacity: 0;
         min-height: 120px;
+        max-height: calc(100vh - 40px);
         background: ${cssManager.bdTheme('#ffffff', '#111')};
         border-radius: 8px;
         border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
@@ -139,6 +145,9 @@ export class DeesModal extends DeesElement {
         overflow: hidden;
         box-shadow: ${cssManager.bdTheme('0px 2px 10px rgba(0, 0, 0, 0.1)', '0px 2px 5px rgba(0, 0, 0, 0.5)')};
         margin: 20px;
+        display: flex;
+        flex-direction: column;
+        overscroll-behavior: contain;
       }
 
       /* Width variations */
@@ -165,6 +174,25 @@ export class DeesModal extends DeesElement {
           width: calc(100vw - 40px) !important;
           max-width: none !important;
         }
+        
+        /* Allow full height on mobile when content needs it */
+        .modalContainer {
+          padding: 10px;
+        }
+        
+        .modal {
+          margin: 10px;
+          max-height: calc(100vh - 20px);
+        }
+        
+        /* Full screen mode on mobile */
+        .modal.mobile-fullscreen {
+          width: 100vw !important;
+          height: 100vh !important;
+          max-height: 100vh !important;
+          margin: 0;
+          border-radius: 0;
+        }
       }
 
       .modal.show {
@@ -179,6 +207,7 @@ export class DeesModal extends DeesElement {
 
       .modal .heading {
         height: 40px;
+        min-height: 40px;
         font-family: 'Geist Sans', sans-serif;
         display: flex;
         align-items: center;
@@ -186,6 +215,7 @@ export class DeesModal extends DeesElement {
         padding: 0 12px;
         border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
         position: relative;
+        flex-shrink: 0;
       }
 
       .modal .heading .header-buttons {
@@ -237,6 +267,10 @@ export class DeesModal extends DeesElement {
 
       .modal .content {
         padding: 16px;
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        overscroll-behavior: contain;
       }
       .modal .bottomButtons {
         display: flex;
@@ -245,6 +279,7 @@ export class DeesModal extends DeesElement {
         justify-content: flex-end;
         gap: 8px;
         padding: 8px;
+        flex-shrink: 0;
       }
 
       .modal .bottomButtons .bottomButton {
@@ -291,6 +326,7 @@ export class DeesModal extends DeesElement {
     const customWidth = typeof this.width === 'number' ? `${this.width}px` : '';
     const maxWidthStyle = this.maxWidth ? `${this.maxWidth}px` : '';
     const minWidthStyle = this.minWidth ? `${this.minWidth}px` : '';
+    const mobileFullscreenClass = this.mobileFullscreen ? 'mobile-fullscreen' : '';
 
     return html`
       <style>
@@ -299,7 +335,7 @@ export class DeesModal extends DeesElement {
         ${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ''}
       </style>
       <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
-        <div class="modal ${widthClass}">
+        <div class="modal ${widthClass} ${mobileFullscreenClass}">
           <div class="heading">
             <div class="heading-text">${this.heading}</div>
             <div class="header-buttons">

ts_web/elements/wysiwyg/dees-formatting-menu.ts

@@ -46,10 +46,14 @@ export class DeesFormattingMenu extends DeesElement {
       :host {
         position: fixed;
         pointer-events: none;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
       }
 
       .formatting-menu {
-        position: absolute;
+        position: fixed;
         background: ${cssManager.bdTheme('#ffffff', '#262626')};
         border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
         border-radius: 6px;
@@ -159,12 +163,12 @@ export class DeesFormattingMenu extends DeesElement {
     this.position = position;
     this.callback = callback;
     
-    // Get z-index from registry
+    // Get z-index from registry and apply immediately
     this.menuZIndex = zIndexRegistry.getNextZIndex();
     zIndexRegistry.register(this, this.menuZIndex);
+    this.style.zIndex = this.menuZIndex.toString();
     
     this.visible = true;
-    console.log('FormattingMenu.show - visible set to:', this.visible);
   }
 
   public hide(): void {

ts_web/elements/wysiwyg/dees-slash-menu.ts

@@ -1,6 +1,5 @@
 import {
   customElement,
-  property,
   html,
   DeesElement,
   type TemplateResult,
@@ -54,10 +53,14 @@ export class DeesSlashMenu extends DeesElement {
       :host {
         position: fixed;
         pointer-events: none;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
       }
 
       .slash-menu {
-        position: absolute;
+        position: fixed;
         background: ${cssManager.bdTheme('#ffffff', '#262626')};
         border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
         border-radius: 8px;
@@ -121,7 +124,7 @@ export class DeesSlashMenu extends DeesElement {
   render(): TemplateResult {
     if (!this.visible) return html``;
 
-    // Apply z-index to host element
+    // Ensure z-index is applied to host element
     this.style.zIndex = this.menuZIndex.toString();
 
     const menuItems = this.getFilteredMenuItems();
@@ -168,9 +171,10 @@ export class DeesSlashMenu extends DeesElement {
     this.filter = '';
     this.selectedIndex = 0;
     
-    // Get z-index from registry
+    // Get z-index from registry and apply immediately
     this.menuZIndex = zIndexRegistry.getNextZIndex();
     zIndexRegistry.register(this, this.menuZIndex);
+    this.style.zIndex = this.menuZIndex.toString();
     
     this.visible = true;
   }

ts_web/pages/zindex-showcase.ts

@@ -12,7 +12,7 @@ import '../elements/dees-input-tags.js';
 import '../elements/dees-input-wysiwyg.js';
 import '../elements/dees-appui-profiledropdown.js';
 
-export const showcasePage = () => html`
+export const zIndexShowcase = () => html`
   <style>
     ${css`
       .page-wrapper {
@@ -245,6 +245,16 @@ export const showcasePage = () => html`
         font-size: 14px;
       }
 
+      /* Consistent panel spacing */
+      dees-panel {
+        display: block;
+        margin-bottom: 24px;
+      }
+      
+      dees-panel:last-child {
+        margin-bottom: 0;
+      }
+
       .test-area {
         position: relative;
         height: 200px;
@@ -665,14 +675,23 @@ export const showcasePage = () => html`
                       .placeholder=${'Type "/" to see slash commands or select text to format...'}
                       .outputFormat=${'html'}
                       .description=${'The slash menu and formatting menu should appear above this modal'}
+                      .value=${`<p>Welcome to the WYSIWYG editor demo!</p>
+<p>This editor demonstrates proper z-index management:</p>
+<ul>
+<li>Type <strong>/</strong> to open the slash command menu</li>
+<li>Select any text to see the formatting toolbar</li>
+<li>Both menus will appear <em>above</em> this modal</li>
+</ul>
+<p>Try it now: Type / here or select this text to format it.</p>`}
                     ></dees-input-wysiwyg>
                   </dees-form>
-                  <p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')}">
-                    <strong>Tips:</strong><br>
-                    • Type "/" to open the slash command menu<br>
-                    • Select text to see the formatting toolbar<br>
-                    • Both menus should appear above this modal
-                  </p>
+                  <div style="margin-top: 16px; padding: 16px; background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; border-radius: 8px;">
+                    <strong style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">✨ Z-Index Fix Applied!</strong><br>
+                    <span style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">
+                      The WYSIWYG menus now properly use the dynamic z-index registry.<br>
+                      They will always appear above the modal, regardless of stacking order.
+                    </span>
+                  </div>
                 `,
                 menuOptions: [
                   { name: 'Cancel', action: async (modal) => modal.destroy() },