feat(dees-tile): add configurable overscroll handling to tile content and use it in modals

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.'
 }

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 {

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