diff --git a/changelog.md b/changelog.md index 00f7870..4ed42d7 100644 --- a/changelog.md +++ b/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 diff --git a/package.json b/package.json index bd54ccb..e7fbcc4 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5103c2d..139dff5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,8 +15,8 @@ importers: specifier: ^2.2.4 version: 2.2.4 '@design.estate/dees-wcctools': - specifier: ^3.8.2 - version: 3.8.2 + specifier: ^3.8.4 + 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': - resolution: {integrity: sha512-A55XHeWExxxojdERAmedrZeyTGeK01ax5ct46VbjMeH65HbgBiTF4EOHfS6rjdTp+9VD3vXd0efhzyOxOS6uFw==} + '@design.estate/dees-wcctools@3.8.4': + 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 diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 7e38a06..a3524a3 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/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.' } diff --git a/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts b/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts index 282ffc5..fdf02ab 100644 --- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts +++ b/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts @@ -284,40 +284,21 @@ export const demoFunc = () => html` { - // 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()}"`; }); } }}> - - + - +
Current value: ""
diff --git a/ts_web/elements/00group-layout/dees-tile/dees-tile.ts b/ts_web/elements/00group-layout/dees-tile/dees-tile.ts index ef0e851..fc08feb 100644 --- a/ts_web/elements/00group-layout/dees-tile/dees-tile.ts +++ b/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-y: auto; - overscroll-behavior: contain; - scrollbar-width: thin; - scrollbar-color: var(--dees-color-scrollbar-thumb) transparent; + overflow: hidden; } .tile-content.no-footer { diff --git a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts index 57c52a4..2eddb8f 100644 --- a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts +++ b/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)')},