fix(modal,tile,input-text): move scroll handling from tile content to modal and update input text demo to use changeSubject subscriptions

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-12 - 3.74.2 - fix(modal,tile,input-text)
+move scroll handling from tile content to modal and update input text demo to use changeSubject subscriptions
+
+- bump @design.estate/dees-wcctools from ^3.8.2 to ^3.8.4
+- set dees-tile content overflow to hidden and apply scroll styling through dees-modal part selectors
+- simplify the interactive dees-input-text demo by subscribing directly to changeSubject for live value updates
+
 ## 2026-04-12 - 3.74.1 - fix(dees-input-text)
 adjust password toggle and validation icon alignment in text input
 

package.json

@@ -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",

pnpm-lock.yaml

@@ -15,8 +15,8 @@ importers:
         specifier: ^2.2.4
         version: 2.2.4
       '@design.estate/dees-wcctools':
-        specifier: ^3.8.2
+        specifier: ^3.8.4
-        version: 3.8.2
+        version: 3.8.4
       '@fortawesome/fontawesome-svg-core':
         specifier: ^7.2.0
         version: 7.2.0
@@ -323,8 +323,8 @@ packages:
   '@design.estate/dees-element@2.2.4':
     resolution: {integrity: sha512-O9cA6flBMMd+pBwMQrZXwAWel9yVxgokolb+Em6gvkXxPJ0P/B5UDn4Vc2d4ts3ta55PTBm+l2dPeDVGx/bl7Q==}
 
-  '@design.estate/dees-wcctools@3.8.2':
+  '@design.estate/dees-wcctools@3.8.4':
-    resolution: {integrity: sha512-A55XHeWExxxojdERAmedrZeyTGeK01ax5ct46VbjMeH65HbgBiTF4EOHfS6rjdTp+9VD3vXd0efhzyOxOS6uFw==}
+    resolution: {integrity: sha512-KpFK/azK+a/Xpq33pXKcho+tdFKVHhKZM5ArvHqo9QMwTczgp5DZZgowTDUuqAofjZwnuVfCPHK/Pw9e64N46A==}
 
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
@@ -4711,7 +4711,7 @@ snapshots:
     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
@@ -4787,7 +4787,7 @@ snapshots:
       - supports-color
       - vue
 
-  '@design.estate/dees-wcctools@3.8.2':
+  '@design.estate/dees-wcctools@3.8.4':
     dependencies:
       '@design.estate/dees-domtools': 2.5.4
       '@design.estate/dees-element': 2.2.4

ts_web/00_commitinfo_data.ts

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

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

@@ -284,35 +284,16 @@ export const demoFunc = () => html`
     </dees-demowrapper>
     
     <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
-      // Set up interactive example
+      const dynamicInput = elementArg.querySelector('dees-input-text') as DeesInputText;
-      const dynamicInput = elementArg.querySelector('dees-input-text');
       const output = elementArg.querySelector('#text-input-output');
 
       if (dynamicInput && output) {
-        // Update output on every change
+        dynamicInput.changeSubject.subscribe(() => {
-        dynamicInput.addEventListener('changeSubject', ((event: CustomEvent) => {
+          output.textContent = `Current value: "${dynamicInput.getValue()}"`;
-          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}`);
         });
       }
     }}>
-      <dees-panel .title=${'Interactive Example'} .subtitle=${'Try typing in the inputs to see real-time value changes'}>
+      <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...'}

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

@@ -100,11 +100,7 @@ export class DeesTile extends DeesElement {
         border-radius: 8px;
         border-top: 1px solid var(--dees-color-border-subtle);
         border-bottom: 1px solid var(--dees-color-border-subtle);
-        overflow-x: hidden;
+        overflow: hidden;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-        scrollbar-width: thin;
-        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
       }
 
       .tile-content.no-footer {

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

@@ -153,6 +153,14 @@ export class DeesModal extends DeesElement {
         overscroll-behavior: contain;
       }
 
+      dees-tile::part(content) {
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
       dees-tile::part(outer) {
         box-shadow:
           0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},