@asd20/ui-next 2.3.0 → 2.3.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.3.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.3.1...ui-next-v2.3.2) (2026-04-14)
+
+## [2.3.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.3.0...ui-next-v2.3.1) (2026-04-14)
+
+
+### Bug Fixes
+
+* fix gallery zoom; harden accordion clicks ([da17e1e](https://github.com/academydistrict20/asd20-ui-next/commit/da17e1e82cdaf73a0468e630810f2c79dfaf2d26))
+
 # [2.3.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.2.2...ui-next-v2.3.0) (2026-04-13)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/molecules/Asd20Swipe/index.vue

@@ -23,7 +23,7 @@
       <slot name="indicator">
         <div class="asd20-swipe__indicator__list">
           <span
-            v-for="n in $children.length"
+            v-for="n in slideCount"
             :key="n - 1"
             class="asd20-swipe__indicator__item"
             :style="{
@@ -43,7 +43,7 @@
       </slot>
     </div>
     <div
-      v-if="showArrows && childLen > 1"
+      v-if="showArrows && slideCount > 1"
       class="asd20-swipe__arrows"
     >
       <button
@@ -116,6 +116,7 @@ export default {
       lastDiff: 0,
       cur: 0,
       index: 0,
+      slideCount: 0,
       childLen: 0,
       leftBorder: 0,
       rightBorder: 0,
@@ -140,6 +141,7 @@ export default {
     this.init()
   },
   beforeUnmount() {
+    this.unbindEvents()
     this.clearAutoplayTimer()
   },
 
@@ -151,13 +153,15 @@ export default {
       this.wrapper = this.$refs['asd20-swipe__wrapper']
       this.container = this.$refs['asd20-swipe__container']
       this.wrapWidth = this.wrapper.clientWidth
-      this.childLen = this.$children.length
+      this.slideCount = this.getSlideElements().length
+      this.childLen = this.slideCount
 
       if (this.isLoopNeeded && this.childLen > 1) {
-        const firstChild = this.$children[0].$el.cloneNode(true)
-        const lastChild = this.$children[this.childLen - 1].$el.cloneNode(true)
+        const slideElements = this.getSlideElements()
+        const firstChild = slideElements[0].cloneNode(true)
+        const lastChild = slideElements[this.childLen - 1].cloneNode(true)
         this.container.appendChild(firstChild)
-        this.container.insertBefore(lastChild, this.$children[0].$el)
+        this.container.insertBefore(lastChild, slideElements[0])
         this.childLen += 2
         this.cur = 1
         this.diff = -this.wrapWidth
@@ -172,6 +176,9 @@ export default {
         this.autoSwipe()
       }
     },
+    getSlideElements() {
+      return Array.from(this.container?.children || [])
+    },
 
     bindEvents() {
       this.wrapper.addEventListener('touchstart', this.handleTouchStart)
@@ -182,25 +189,44 @@ export default {
         this.wrapper.addEventListener('mousemove', this.handleMouseMove)
         this.wrapper.addEventListener('mouseup', this.handleMouseUp)
       }
-      this.container.addEventListener('transitionend', () => {
-        this.dur = 0
-        if (this.isLoopNeeded) {
-          if (this.cur === 0) {
-            this.cur = this.childLen - 2
-            this.diff = -this.wrapWidth * this.cur
-          } else if (this.cur === this.childLen - 1) {
-            this.cur = 1
-            this.diff = -this.wrapWidth
-          }
-        }
-        this.index = this.isLoopNeeded ? this.cur - 1 : this.cur
-        this.$emit('change', this.index)
-        this.lastDiff = this.diff
-        this.lock = false
-        if (this.isAutoPlayNeeded) {
-          this.autoSwipe()
+      this.container.addEventListener('transitionend', this.handleTransitionEnd)
+    },
+
+    unbindEvents() {
+      if (!this.wrapper || !this.container) {
+        return
+      }
+
+      this.wrapper.removeEventListener('touchstart', this.handleTouchStart)
+      this.wrapper.removeEventListener('touchmove', this.handleTouchMove)
+      this.wrapper.removeEventListener('touchend', this.handleTouchEnd)
+      this.wrapper.removeEventListener('mousedown', this.handleMouseDown)
+      this.wrapper.removeEventListener('mousemove', this.handleMouseMove)
+      this.wrapper.removeEventListener('mouseup', this.handleMouseUp)
+      this.container.removeEventListener(
+        'transitionend',
+        this.handleTransitionEnd
+      )
+    },
+
+    handleTransitionEnd() {
+      this.dur = 0
+      if (this.isLoopNeeded) {
+        if (this.cur === 0) {
+          this.cur = this.childLen - 2
+          this.diff = -this.wrapWidth * this.cur
+        } else if (this.cur === this.childLen - 1) {
+          this.cur = 1
+          this.diff = -this.wrapWidth
         }
-      })
+      }
+      this.index = this.isLoopNeeded ? this.cur - 1 : this.cur
+      this.$emit('change', this.index)
+      this.lastDiff = this.diff
+      this.lock = false
+      if (this.isAutoPlayNeeded) {
+        this.autoSwipe()
+      }
     },
 
     handleTouchStart(event) {
@@ -264,7 +290,6 @@ export default {
     },
 
     handleMouseDown(event) {
-      console.log(event)
       if (this.lock) {
         return
       }
@@ -351,6 +376,8 @@ export default {
         this.dur = this.duration
         this.diff = -this.wrapWidth * this.cur
       }
+      this.index = this.isLoopNeeded ? this.cur - 1 : this.cur
+      this.lastDiff = this.diff
     },
     download() {
       window.open(this.imageThumbnails[this.index].url, '_blank')

package/src/components/organisms/Asd20List/index.vue

@@ -157,6 +157,9 @@ export default {
     this.handleResize()
     window.addEventListener('resize', this.handleResize)
   },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
 
   methods: {
     handleResize() {

package/src/components/organisms/Asd20NotificationGroup/index.vue

@@ -37,6 +37,7 @@
     >
       <span
         v-if="totalDismissedNotifications > 0"
+        class="bell__count"
         aria-hidden="true"
       >{{
         totalDismissedNotifications
@@ -315,7 +316,7 @@ export default {
       fill: var(--website-menu__icon-fill-color) !important;
     }
 
-    span {
+    .bell__count {
       position: absolute;
       top: -0.25em;
       right: -0.25em;

package/src/components/organisms/Asd20WidgetList/index.vue

@@ -157,6 +157,9 @@ export default {
     this.handleResize()
     window.addEventListener('resize', this.handleResize)
   },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
 
   methods: {
     handleResize() {

package/src/components/templates/Asd20AppTemplate/index.vue

@@ -217,6 +217,9 @@ export default {
     this.zoomed = window.innerHeight <= 500
     window.addEventListener('resize', this.handleResize)
   },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
   methods: {
     handleResize() {
       this.zoomed = window.innerHeight <= 500

package/src/components/templates/Asd20DetailAlternateTemplate/index.vue

@@ -164,6 +164,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import { bindInjectedAccordionInteractions } from '../../../helpers/injectedContentInteractions'
 
 export default {
   name: 'Asd20DetailTemplate',
@@ -181,54 +182,12 @@ export default {
   },
   mixins: [pageTemplateMixin],
   mounted() {
-    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
-    this.$nextTick(() => {
-      const accordionButtons = document.querySelectorAll('.accordion-button')
-
-      accordionButtons.forEach(button => {
-        button.addEventListener('click', () => {
-          const contentId = button.getAttribute('aria-controls')
-          const content = document.getElementById(contentId)
-          const expanded = button.getAttribute('aria-expanded') === 'true'
-
-          button.setAttribute('aria-expanded', !expanded)
-          button.querySelector('.toggle-icon').textContent = expanded
-            ? '+'
-            : '-'
-
-          if (!expanded) {
-            content.style.display = 'block'
-
-            // Reset maxHeight before calculating scrollHeight (force reflow)
-            content.style.maxHeight = '0'
-            content.style.padding = '0 var(--space-1, 1em)'
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = content.scrollHeight + 'px'
-              content.style.padding = 'var(--space-1, 1em)'
-            })
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = '0'
-              content.style.padding = '0 var(--space-1, 1em)'
-            })
-
-            // Optionally hide the content after animation
-            setTimeout(() => {
-              if (content.style.maxHeight === '0px') {
-                content.style.display = 'none'
-              }
-            }, 400) // Match transition duration
-          }
-        })
-      })
-    })
+    this.removeInjectedAccordionInteractions = bindInjectedAccordionInteractions(
+      this.$el
+    )
+  },
+  beforeUnmount() {
+    this.removeInjectedAccordionInteractions?.()
   },
 }
 </script>

package/src/components/templates/Asd20DetailImageFullTemplate/index.vue

@@ -156,6 +156,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import { bindInjectedAccordionInteractions } from '../../../helpers/injectedContentInteractions'
 
 export default {
   name: 'Asd20DetailImageFullTemplate',
@@ -173,54 +174,12 @@ export default {
   },
   mixins: [pageTemplateMixin],
   mounted() {
-    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
-    this.$nextTick(() => {
-      const accordionButtons = document.querySelectorAll('.accordion-button')
-
-      accordionButtons.forEach(button => {
-        button.addEventListener('click', () => {
-          const contentId = button.getAttribute('aria-controls')
-          const content = document.getElementById(contentId)
-          const expanded = button.getAttribute('aria-expanded') === 'true'
-
-          button.setAttribute('aria-expanded', !expanded)
-          button.querySelector('.toggle-icon').textContent = expanded
-            ? '+'
-            : '-'
-
-          if (!expanded) {
-            content.style.display = 'block'
-
-            // Reset maxHeight before calculating scrollHeight (force reflow)
-            content.style.maxHeight = '0'
-            content.style.padding = '0 var(--space-1, 1em)'
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = content.scrollHeight + 'px'
-              content.style.padding = 'var(--space-1, 1em)'
-            })
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = '0'
-              content.style.padding = '0 var(--space-1, 1em)'
-            })
-
-            // Optionally hide the content after animation
-            setTimeout(() => {
-              if (content.style.maxHeight === '0px') {
-                content.style.display = 'none'
-              }
-            }, 400) // Match transition duration
-          }
-        })
-      })
-    })
+    this.removeInjectedAccordionInteractions = bindInjectedAccordionInteractions(
+      this.$el
+    )
+  },
+  beforeUnmount() {
+    this.removeInjectedAccordionInteractions?.()
   },
 }
 </script>

package/src/components/templates/Asd20DetailImageTemplate/index.vue

@@ -149,6 +149,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import { bindInjectedAccordionInteractions } from '../../../helpers/injectedContentInteractions'
 
 export default {
   name: 'Asd20DetailImageTemplate',
@@ -166,54 +167,12 @@ export default {
   },
   mixins: [pageTemplateMixin],
   mounted() {
-    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
-    this.$nextTick(() => {
-      const accordionButtons = document.querySelectorAll('.accordion-button')
-
-      accordionButtons.forEach(button => {
-        button.addEventListener('click', () => {
-          const contentId = button.getAttribute('aria-controls')
-          const content = document.getElementById(contentId)
-          const expanded = button.getAttribute('aria-expanded') === 'true'
-
-          button.setAttribute('aria-expanded', !expanded)
-          button.querySelector('.toggle-icon').textContent = expanded
-            ? '+'
-            : '-'
-
-          if (!expanded) {
-            content.style.display = 'block'
-
-            // Reset maxHeight before calculating scrollHeight (force reflow)
-            content.style.maxHeight = '0'
-            content.style.padding = '0 var(--space-1, 1em)'
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = content.scrollHeight + 'px'
-              content.style.padding = 'var(--space-1, 1em)'
-            })
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = '0'
-              content.style.padding = '0 var(--space-1, 1em)'
-            })
-
-            // Optionally hide the content after animation
-            setTimeout(() => {
-              if (content.style.maxHeight === '0px') {
-                content.style.display = 'none'
-              }
-            }, 400) // Match transition duration
-          }
-        })
-      })
-    })
+    this.removeInjectedAccordionInteractions = bindInjectedAccordionInteractions(
+      this.$el
+    )
+  },
+  beforeUnmount() {
+    this.removeInjectedAccordionInteractions?.()
   },
 }
 </script>

package/src/components/templates/Asd20DetailTemplate/index.vue

@@ -149,6 +149,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import { bindInjectedAccordionInteractions } from '../../../helpers/injectedContentInteractions'
 
 export default {
   name: 'Asd20DetailTemplate',
@@ -169,54 +170,12 @@ export default {
     languageCode: { type: String, default: 'en' },
   },
   mounted() {
-    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
-    this.$nextTick(() => {
-      const accordionButtons = document.querySelectorAll('.accordion-button')
-
-      accordionButtons.forEach(button => {
-        button.addEventListener('click', () => {
-          const contentId = button.getAttribute('aria-controls')
-          const content = document.getElementById(contentId)
-          const expanded = button.getAttribute('aria-expanded') === 'true'
-
-          button.setAttribute('aria-expanded', !expanded)
-          button.querySelector('.toggle-icon').textContent = expanded
-            ? '+'
-            : '-'
-
-          if (!expanded) {
-            content.style.display = 'block'
-
-            // Reset maxHeight before calculating scrollHeight (force reflow)
-            content.style.maxHeight = '0'
-            content.style.padding = '0 var(--space-1, 1em)'
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = content.scrollHeight + 'px'
-              content.style.padding = 'var(--space-1, 1em)'
-            })
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = '0'
-              content.style.padding = '0 var(--space-1, 1em)'
-            })
-
-            // Optionally hide the content after animation
-            setTimeout(() => {
-              if (content.style.maxHeight === '0px') {
-                content.style.display = 'none'
-              }
-            }, 400) // Match transition duration
-          }
-        })
-      })
-    })
+    this.removeInjectedAccordionInteractions = bindInjectedAccordionInteractions(
+      this.$el
+    )
+  },
+  beforeUnmount() {
+    this.removeInjectedAccordionInteractions?.()
   },
 }
 </script>

package/src/components/templates/Asd20SchoolHomeTemplate/index.vue

@@ -303,6 +303,9 @@ export default {
       this.$emit('events-in-view')
     }
   },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
   methods: {
     handleResize() {
       this.showLogo = window.innerWidth >= 1350

package/src/components/templates/Asd20WayfindingAccessibilityTemplate/index.vue

@@ -167,6 +167,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import { bindAccessibilityModalTrigger } from '../../../helpers/injectedContentInteractions'
 
 export default {
   name: 'Asd20WayfindingAccessibilityTemplate',
@@ -209,17 +210,18 @@ export default {
     },
   },
   mounted() {
-    this.$nextTick(() => {
-      const btn = document.querySelector('[data-trigger-accessibility-modal]')
-      if (btn) {
-        btn.addEventListener('click', () => {
-          this.modalVisible = true
-          this.$nextTick(() => {
-            this.modalOpen = true
-          })
+    this.removeAccessibilityModalTrigger = bindAccessibilityModalTrigger(
+      this.$el,
+      () => {
+        this.modalVisible = true
+        this.$nextTick(() => {
+          this.modalOpen = true
         })
       }
-    })
+    )
+  },
+  beforeUnmount() {
+    this.removeAccessibilityModalTrigger?.()
   },
 }
 </script>

package/src/helpers/injectedContentInteractions.js

@@ -0,0 +1,102 @@
+function findClosestInRoot(event, selector, root) {
+  if (!(event.target instanceof Element)) {
+    return null
+  }
+
+  const match = event.target.closest(selector)
+
+  if (!match || !root.contains(match)) {
+    return null
+  }
+
+  return match
+}
+
+export function bindInjectedAccordionInteractions(root) {
+  if (!root?.addEventListener) {
+    return () => {}
+  }
+
+  const onClick = event => {
+    const button = findClosestInRoot(event, '.accordion-button', root)
+
+    if (!button) {
+      return
+    }
+
+    const contentId = button.getAttribute('aria-controls')
+    const content = contentId ? document.getElementById(contentId) : null
+
+    if (!content) {
+      return
+    }
+
+    const expanded = button.getAttribute('aria-expanded') === 'true'
+    const toggleIcon = button.querySelector('.toggle-icon')
+
+    button.setAttribute('aria-expanded', String(!expanded))
+
+    if (toggleIcon) {
+      toggleIcon.textContent = expanded ? '+' : '-'
+    }
+
+    if (!expanded) {
+      content.style.display = 'block'
+      content.style.maxHeight = '0'
+      content.style.padding = '0 var(--space-1, 1em)'
+
+      requestAnimationFrame(() => {
+        content.style.transition = 'max-height 0.4s ease, padding 0.4s ease'
+        content.style.maxHeight = `${content.scrollHeight}px`
+        content.style.padding = 'var(--space-1, 1em)'
+      })
+      return
+    }
+
+    content.style.maxHeight = `${content.scrollHeight}px`
+
+    requestAnimationFrame(() => {
+      content.style.transition = 'max-height 0.4s ease, padding 0.4s ease'
+      content.style.maxHeight = '0'
+      content.style.padding = '0 var(--space-1, 1em)'
+    })
+
+    setTimeout(() => {
+      if (content.style.maxHeight === '0px' || content.style.maxHeight === '0') {
+        content.style.display = 'none'
+      }
+    }, 400)
+  }
+
+  root.addEventListener('click', onClick)
+
+  return () => {
+    root.removeEventListener('click', onClick)
+  }
+}
+
+export function bindAccessibilityModalTrigger(root, onOpen) {
+  if (!root?.addEventListener) {
+    return () => {}
+  }
+
+  const onClick = event => {
+    const trigger = findClosestInRoot(
+      event,
+      '[data-trigger-accessibility-modal]',
+      root
+    )
+
+    if (!trigger) {
+      return
+    }
+
+    onOpen()
+  }
+
+  root.addEventListener('click', onClick)
+
+  return () => {
+    root.removeEventListener('click', onClick)
+  }
+}

package/src/mixins/pageTemplateMixin.js

@@ -450,6 +450,9 @@ export default {
     this.desktop = window.innerWidth >= 1024
     window.addEventListener('resize', this.handleResize)
   },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
   methods: {
     handleResize() {
       this.desktop = window.innerWidth >= 1024