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

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

@@ -3836,6 +3836,12 @@ class AuroDropdownBib extends i$2 {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3927,10 +3933,6 @@ 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;
@@ -3960,60 +3962,6 @@ 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 = {
@@ -4854,6 +4802,9 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     this.bibContent = this.floater.element.bib;
+    this.bibContent.setAttribute('role', 'dialog');
+    this.bibContent.setAttribute('aria-modal', 'true');
+    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');

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

@@ -3694,6 +3694,12 @@ class AuroDropdownBib extends i$2 {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3785,10 +3791,6 @@ 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;
@@ -3818,60 +3820,6 @@ 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 = {
@@ -4712,6 +4660,9 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     this.bibContent = this.floater.element.bib;
+    this.bibContent.setAttribute('role', 'dialog');
+    this.bibContent.setAttribute('aria-modal', 'true');
+    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');

package/components/combobox/dist/index.js

@@ -3625,6 +3625,12 @@ class AuroDropdownBib extends LitElement {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3716,10 +3722,6 @@ 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;
@@ -3749,60 +3751,6 @@ 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 = {
@@ -4643,6 +4591,9 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     this.bibContent = this.floater.element.bib;
+    this.bibContent.setAttribute('role', 'dialog');
+    this.bibContent.setAttribute('aria-modal', 'true');
+    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');

package/components/combobox/dist/registered.js

@@ -3625,6 +3625,12 @@ class AuroDropdownBib extends LitElement {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3716,10 +3722,6 @@ 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;
@@ -3749,60 +3751,6 @@ 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 = {
@@ -4643,6 +4591,9 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     this.bibContent = this.floater.element.bib;
+    this.bibContent.setAttribute('role', 'dialog');
+    this.bibContent.setAttribute('aria-modal', 'true');
+    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');

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

@@ -5545,6 +5545,12 @@ class AuroDropdownBib extends i$2 {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -5636,10 +5642,6 @@ 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;
@@ -5669,60 +5671,6 @@ 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 = {
@@ -6563,6 +6511,9 @@ class AuroDropdown extends AuroElement$3 {
     }
 
     this.bibContent = this.floater.element.bib;
+    this.bibContent.setAttribute('role', 'dialog');
+    this.bibContent.setAttribute('aria-modal', 'true');
+    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');

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

@@ -5545,6 +5545,12 @@ class AuroDropdownBib extends i$2 {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -5636,10 +5642,6 @@ 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;
@@ -5669,60 +5671,6 @@ 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 = {
@@ -6563,6 +6511,9 @@ class AuroDropdown extends AuroElement$3 {
     }
 
     this.bibContent = this.floater.element.bib;
+    this.bibContent.setAttribute('role', 'dialog');
+    this.bibContent.setAttribute('aria-modal', 'true');
+    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');

package/components/counter/dist/index.js

@@ -5498,6 +5498,12 @@ class AuroDropdownBib extends LitElement {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -5589,10 +5595,6 @@ 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;
@@ -5622,60 +5624,6 @@ 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 = {
@@ -6516,6 +6464,9 @@ class AuroDropdown extends AuroElement$3 {
     }
 
     this.bibContent = this.floater.element.bib;
+    this.bibContent.setAttribute('role', 'dialog');
+    this.bibContent.setAttribute('aria-modal', 'true');
+    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');