@aurodesignsystem-dev/auro-formkit 0.0.0-pr740.1 → 0.0.0-pr740.3

package/components/counter/demo/index.min.js

@@ -5636,6 +5636,10 @@ class AuroDropdownBib extends i$2 {
   connectedCallback() {
     super.connectedCallback();
 
+    this.addEventListener('touchstart', this.preventBodyScroll);
+    this.addEventListener('touchmove', this.preventBodyScroll);
+
+
     // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
     this.addEventListener('auro-bibtemplate-connected', (event) => {
       const bibTemplate = event.detail.element;
@@ -5665,6 +5669,60 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    function checkIfDecent(target, parent) {
+      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
+        return false;
+      }
+
+      if (parent.tagName.toLowerCase() === 'slot') {
+        const assignedElements = parent.assignedElements();
+        if (assignedElements) {
+          for (const child of assignedElements) {
+            if (checkIfDecent(target, child)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (target === parent || parent.contains(target)) {
+        return true;
+      }
+
+      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
+        return true;
+      }
+
+      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
+        return true;
+      }
+
+      if (parent.children) {
+        for (const child of parent.children) {
+          if (checkIfDecent(target, child)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    const isDecent = checkIfDecent(event.target, this);
+    if (isDecent && event.type === 'touchstart') {
+      // if the target is on the bib, let it go for `click` event
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -6929,7 +6987,7 @@ var dropdownVersion = '3.0.0';
 
 var colorCss$3 = i$5`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;touch-action:none}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -8764,30 +8822,6 @@ class AuroBibtemplate extends i$2 {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));

package/components/counter/dist/index.js

@@ -5589,6 +5589,10 @@ class AuroDropdownBib extends LitElement {
   connectedCallback() {
     super.connectedCallback();
 
+    this.addEventListener('touchstart', this.preventBodyScroll);
+    this.addEventListener('touchmove', this.preventBodyScroll);
+
+
     // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
     this.addEventListener('auro-bibtemplate-connected', (event) => {
       const bibTemplate = event.detail.element;
@@ -5618,6 +5622,60 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    function checkIfDecent(target, parent) {
+      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
+        return false;
+      }
+
+      if (parent.tagName.toLowerCase() === 'slot') {
+        const assignedElements = parent.assignedElements();
+        if (assignedElements) {
+          for (const child of assignedElements) {
+            if (checkIfDecent(target, child)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (target === parent || parent.contains(target)) {
+        return true;
+      }
+
+      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
+        return true;
+      }
+
+      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
+        return true;
+      }
+
+      if (parent.children) {
+        for (const child of parent.children) {
+          if (checkIfDecent(target, child)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    const isDecent = checkIfDecent(event.target, this);
+    if (isDecent && event.type === 'touchstart') {
+      // if the target is on the bib, let it go for `click` event
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -6882,7 +6940,7 @@ var dropdownVersion = '3.0.0';
 
 var colorCss$3 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;touch-action:none}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -8717,30 +8775,6 @@ class AuroBibtemplate extends LitElement {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));

package/components/counter/dist/registered.js

@@ -5589,6 +5589,10 @@ class AuroDropdownBib extends LitElement {
   connectedCallback() {
     super.connectedCallback();
 
+    this.addEventListener('touchstart', this.preventBodyScroll);
+    this.addEventListener('touchmove', this.preventBodyScroll);
+
+
     // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
     this.addEventListener('auro-bibtemplate-connected', (event) => {
       const bibTemplate = event.detail.element;
@@ -5618,6 +5622,60 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    function checkIfDecent(target, parent) {
+      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
+        return false;
+      }
+
+      if (parent.tagName.toLowerCase() === 'slot') {
+        const assignedElements = parent.assignedElements();
+        if (assignedElements) {
+          for (const child of assignedElements) {
+            if (checkIfDecent(target, child)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (target === parent || parent.contains(target)) {
+        return true;
+      }
+
+      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
+        return true;
+      }
+
+      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
+        return true;
+      }
+
+      if (parent.children) {
+        for (const child of parent.children) {
+          if (checkIfDecent(target, child)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    const isDecent = checkIfDecent(event.target, this);
+    if (isDecent && event.type === 'touchstart') {
+      // if the target is on the bib, let it go for `click` event
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -6882,7 +6940,7 @@ var dropdownVersion = '3.0.0';
 
 var colorCss$3 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;touch-action:none}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -8717,30 +8775,6 @@ class AuroBibtemplate extends LitElement {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));

package/components/datepicker/demo/api.min.js

@@ -11150,7 +11150,7 @@ class CalendarUtilities {
 
 var colorCss$3$2 = i$2`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4$1 = i$2`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;touch-action:none}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4$1 = i$2`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = i$2`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -12985,30 +12985,6 @@ class AuroBibtemplate extends i {
     AuroLibraryRuntimeUtils$3$1.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));
@@ -17244,6 +17220,10 @@ class AuroDropdownBib extends i {
   connectedCallback() {
     super.connectedCallback();
 
+    this.addEventListener('touchstart', this.preventBodyScroll);
+    this.addEventListener('touchmove', this.preventBodyScroll);
+
+
     // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
     this.addEventListener('auro-bibtemplate-connected', (event) => {
       const bibTemplate = event.detail.element;
@@ -17273,6 +17253,60 @@ class AuroDropdownBib extends i {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    function checkIfDecent(target, parent) {
+      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
+        return false;
+      }
+
+      if (parent.tagName.toLowerCase() === 'slot') {
+        const assignedElements = parent.assignedElements();
+        if (assignedElements) {
+          for (const child of assignedElements) {
+            if (checkIfDecent(target, child)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (target === parent || parent.contains(target)) {
+        return true;
+      }
+
+      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
+        return true;
+      }
+
+      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
+        return true;
+      }
+
+      if (parent.children) {
+        for (const child of parent.children) {
+          if (checkIfDecent(target, child)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    const isDecent = checkIfDecent(event.target, this);
+    if (isDecent && event.type === 'touchstart') {
+      // if the target is on the bib, let it go for `click` event
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/datepicker/demo/index.min.js

@@ -10891,7 +10891,7 @@ class CalendarUtilities {
 
 var colorCss$3$2 = i$2`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4$1 = i$2`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;touch-action:none}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4$1 = i$2`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = i$2`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -12726,30 +12726,6 @@ class AuroBibtemplate extends i {
     AuroLibraryRuntimeUtils$3$1.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));
@@ -16985,6 +16961,10 @@ class AuroDropdownBib extends i {
   connectedCallback() {
     super.connectedCallback();
 
+    this.addEventListener('touchstart', this.preventBodyScroll);
+    this.addEventListener('touchmove', this.preventBodyScroll);
+
+
     // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
     this.addEventListener('auro-bibtemplate-connected', (event) => {
       const bibTemplate = event.detail.element;
@@ -17014,6 +16994,60 @@ class AuroDropdownBib extends i {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    function checkIfDecent(target, parent) {
+      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
+        return false;
+      }
+
+      if (parent.tagName.toLowerCase() === 'slot') {
+        const assignedElements = parent.assignedElements();
+        if (assignedElements) {
+          for (const child of assignedElements) {
+            if (checkIfDecent(target, child)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (target === parent || parent.contains(target)) {
+        return true;
+      }
+
+      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
+        return true;
+      }
+
+      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
+        return true;
+      }
+
+      if (parent.children) {
+        for (const child of parent.children) {
+          if (checkIfDecent(target, child)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    const isDecent = checkIfDecent(event.target, this);
+    if (isDecent && event.type === 'touchstart') {
+      // if the target is on the bib, let it go for `click` event
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/datepicker/dist/index.js

@@ -10840,7 +10840,7 @@ class CalendarUtilities {
 
 var colorCss$3$2 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;touch-action:none}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -12675,30 +12675,6 @@ class AuroBibtemplate extends LitElement {
     AuroLibraryRuntimeUtils$3$1.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));
@@ -16934,6 +16910,10 @@ class AuroDropdownBib extends LitElement {
   connectedCallback() {
     super.connectedCallback();
 
+    this.addEventListener('touchstart', this.preventBodyScroll);
+    this.addEventListener('touchmove', this.preventBodyScroll);
+
+
     // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
     this.addEventListener('auro-bibtemplate-connected', (event) => {
       const bibTemplate = event.detail.element;
@@ -16963,6 +16943,60 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    function checkIfDecent(target, parent) {
+      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
+        return false;
+      }
+
+      if (parent.tagName.toLowerCase() === 'slot') {
+        const assignedElements = parent.assignedElements();
+        if (assignedElements) {
+          for (const child of assignedElements) {
+            if (checkIfDecent(target, child)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (target === parent || parent.contains(target)) {
+        return true;
+      }
+
+      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
+        return true;
+      }
+
+      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
+        return true;
+      }
+
+      if (parent.children) {
+        for (const child of parent.children) {
+          if (checkIfDecent(target, child)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    const isDecent = checkIfDecent(event.target, this);
+    if (isDecent && event.type === 'touchstart') {
+      // if the target is on the bib, let it go for `click` event
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {