@design.estate/dees-catalog 3.74.1 → 3.75.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.74.1",
+  "version": "3.75.0",
   "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",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.5.4",
     "@design.estate/dees-element": "^2.2.4",
-    "@design.estate/dees-wcctools": "^3.8.2",
+    "@design.estate/dees-wcctools": "^3.8.4",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-brands-svg-icons": "^7.2.0",
     "@fortawesome/free-regular-svg-icons": "^7.2.0",

package/ts_web/00_commitinfo_data.ts

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

package/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts

@@ -284,40 +284,21 @@ export const demoFunc = () => html`
     </dees-demowrapper>
     
     <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
-      // Set up interactive example
-      const dynamicInput = elementArg.querySelector('dees-input-text');
+      const dynamicInput = elementArg.querySelector('dees-input-text') as DeesInputText;
       const output = elementArg.querySelector('#text-input-output');
-      
+
       if (dynamicInput && output) {
-        // Update output on every change
-        dynamicInput.addEventListener('changeSubject', ((event: CustomEvent) => {
-          const value = (event.detail as DeesInputText).getValue();
-          output.textContent = `Current value: "${value}"`;
-        }) as EventListener);
-        
-        // Also track focus/blur events
-        dynamicInput.addEventListener('focus', () => {
-          console.log('Input focused');
-        });
-        
-        dynamicInput.addEventListener('blur', () => {
-          console.log('Input blurred');
-        });
-        
-        // Track keypress events
-        let keypressCount = 0;
-        dynamicInput.addEventListener('keydown', () => {
-          keypressCount++;
-          console.log(`Keypress count: ${keypressCount}`);
+        dynamicInput.changeSubject.subscribe(() => {
+          output.textContent = `Current value: "${dynamicInput.getValue()}"`;
         });
       }
     }}>
-      <dees-panel .title=${'Interactive Example'} .subtitle=${'Try typing in the inputs to see real-time value changes'}>
-        <dees-input-text 
-          .label=${'Dynamic Input'} 
+      <dees-panel .title=${'Interactive Example'} .subtitle=${'Try typing in the input to see real-time value changes'}>
+        <dees-input-text
+          .label=${'Dynamic Input'}
           .placeholder=${'Type something here...'}
         ></dees-input-text>
-        
+
         <div class="interactive-section">
           <div id="text-input-output" class="output-text">Current value: ""</div>
         </div>

package/ts_web/elements/00group-layout/dees-tile/dees-tile.ts

@@ -45,6 +45,9 @@ export class DeesTile extends DeesElement {
   @property({ type: String })
   accessor heading: string = '';
 
+  @property({ type: String, reflect: true })
+  accessor overscroll: 'contain' | 'auto' | 'none' = 'auto';
+
   @state()
   accessor hasFooter: boolean = false;
 
@@ -102,11 +105,14 @@ export class DeesTile extends DeesElement {
         border-bottom: 1px solid var(--dees-color-border-subtle);
         overflow-x: hidden;
         overflow-y: auto;
-        overscroll-behavior: contain;
         scrollbar-width: thin;
         scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
       }
 
+      :host([overscroll="contain"]) .tile-content {
+        overscroll-behavior: contain;
+      }
+
       .tile-content.no-footer {
         border-bottom: none;
         border-bottom-left-radius: 0;

package/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts

@@ -343,7 +343,7 @@ export class DeesModal extends DeesElement {
         ${minWidthStyle ? `dees-tile { min-width: ${minWidthStyle}; }` : ''}
       </style>
       <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
-        <dees-tile class="${widthClass} ${mobileFullscreenClass}">
+        <dees-tile class="${widthClass} ${mobileFullscreenClass}" .overscroll=${'contain'}>
           <div slot="header" class="heading">
             <div class="heading-text">${this.heading}</div>
             <div class="header-buttons">