From cd491e1517410ddcbd345d2ee0672b20c7857e55 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Sun, 12 Apr 2026 17:45:33 +0000
Subject: [PATCH] feat(dees-tile): add configurable overscroll handling to tile
 content and use it in modals

---
 changelog.md                                         |  7 +++++++
 ts_web/00_commitinfo_data.ts                         |  2 +-
 .../elements/00group-layout/dees-tile/dees-tile.ts   | 12 +++++++++++-
 .../00group-overlay/dees-modal/dees-modal.ts         | 10 +---------
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/changelog.md b/changelog.md
index 4ed42d7..b6fb2b1 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-12 - 3.75.0 - feat(dees-tile)
+add configurable overscroll handling to tile content and use it in modals
+
+- introduces a reflected overscroll property on dees-tile with contain, auto, and none options
+- moves tile content scrolling and scrollbar styling into dees-tile instead of modal-specific styling
+- updates dees-modal to enable contained overscroll through the new dees-tile API
+
 ## 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
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index a3524a3..f60bfc3 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.2',
+  version: '3.75.0',
   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-layout/dees-tile/dees-tile.ts b/ts_web/elements/00group-layout/dees-tile/dees-tile.ts
index fc08feb..a7472cd 100644
--- a/ts_web/elements/00group-layout/dees-tile/dees-tile.ts
+++ b/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;
 
@@ -100,7 +103,14 @@ 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: hidden;
+        overflow-x: hidden;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      :host([overscroll="contain"]) .tile-content {
+        overscroll-behavior: contain;
       }
 
       .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 2eddb8f..9f4f538 100644
--- a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
+++ b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
@@ -153,14 +153,6 @@ 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)')},
@@ -351,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">