@asd20/ui-next 2.0.18 → 2.0.20

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.0.20](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.19...ui-next-v2.0.20) (2026-04-02)
+
+
+### Bug Fixes
+
+* remove focus-trap styles that may be interfering with moble styles ([ad2be6c](https://github.com/academydistrict20/asd20-ui-next/commit/ad2be6cfd68277861a88d8ce143f53336bda4392))
+
+## [2.0.19](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.18...ui-next-v2.0.19) (2026-04-02)
+
 ## [2.0.18](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.17...ui-next-v2.0.18) (2026-04-02)
 
 ## [2.0.17](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.16...ui-next-v2.0.17) (2026-04-02)

package/package.json

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

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

@@ -13,8 +13,6 @@
     >
       <focus-trap
         :open="resolvedOpen"
-        class="asd20-modal-focus-trap"
-        :class="{ 'asd20-modal-focus-trap--windowed': windowed }"
       >
         <div class="asd20-modal">
           <div
@@ -141,20 +139,6 @@ export default {
   align-items: stretch;
 }
 
-.asd20-modal-focus-trap {
-  display: flex;
-  flex: 1 1 auto;
-  width: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  justify-content: center;
-  align-items: stretch;
-}
-
-.asd20-modal-focus-trap--windowed {
-  align-items: center;
-}
-
 .asd20-modal {
   position: relative;
   flex-grow: 1;

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

@@ -82,6 +82,7 @@ export default {
   },
 
   updated() {
+    if (!this.swiper) return
     this.swiper.update()
   },
   beforeUnmount() {
@@ -155,6 +156,7 @@ export default {
       this.$emit('update:swiper', this.swiper)
     },
     onSlideChange() {
+      if (!this.swiper) return
       this.index = this.swiper.realIndex
     },
   },

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

@@ -66,7 +66,7 @@
     <div class="feed-buttons">
       <asd20-button
         v-if="link && linkLabel && (cards.length >= 10 || cardType === 'Event')"
-        :class="hasProtectedContent ? 'secondary-button' : ''"
+        :class="showProtectedContentButtons ? 'secondary-button' : ''"
         :label="linkLabel"
         :link="link"
         size="md"
@@ -76,7 +76,7 @@
         centered
       />
       <asd20-button
-        v-if="hasProtectedContent"
+        v-if="showProtectedContentButtons"
         class="secondary-button"
         label="Leadership Announcements"
         link="/staff-announcements?category=Leadership"
@@ -87,7 +87,7 @@
         centered
       />
       <asd20-button
-        v-if="hasProtectedContent"
+        v-if="showProtectedContentButtons"
         class="secondary-button"
         label="Communication Tool Form"
         link="https://forms.office.com/Pages/ResponsePage.aspx?id=zcp1lGYYyky2X9rtmQDNB-eqaTnt2ZBNtZ1N5vhrzHNUNFBHNlNBOUJaN1VXQjhDRzBVQVdOS1pVQSQlQCN0PWcu"
@@ -128,7 +128,14 @@ export default {
     hasProtectedContent: { type: Boolean, default: false },
   },
 
+  data: () => ({
+    clientMounted: false,
+  }),
+
   computed: {
+    showProtectedContentButtons() {
+      return this.clientMounted && this.hasProtectedContent
+    },
     swiperOptions() {
       return {
         slidesPerView: 1,
@@ -151,6 +158,9 @@ export default {
       }
     },
   },
+  mounted() {
+    this.clientMounted = true
+  },
   methods: {
     getCardKey(card, index) {
       if (card && card.event) {

package/src/components/utils/FocusTrap.vue

@@ -1,13 +1,3 @@
-<template>
-  <div
-    ref="trapRoot"
-    class="asd20-focus-trap"
-    tabindex="-1"
-  >
-    <slot />
-  </div>
-</template>
-
 <script>
 import { createFocusTrap } from 'focus-trap'
 
@@ -21,6 +11,7 @@ export default {
   },
   data: () => ({
     trap: null,
+    addedFallbackTabindex: false,
   }),
   computed: {
     enabled() {
@@ -32,7 +23,7 @@ export default {
       const options = {
         clickOutsideDeactivates: false,
         escapeDeactivates: false,
-        fallbackFocus: () => this.$refs.trapRoot,
+        fallbackFocus: () => this.ensureFallbackFocusTarget(),
       }
 
       if (this.initialFocus !== undefined) {
@@ -53,7 +44,7 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.trap = createFocusTrap(this.$refs.trapRoot, this.focusTrapOptions)
+      this.trap = createFocusTrap(this.$el, this.focusTrapOptions)
       this.syncTrapState()
     })
   },
@@ -61,6 +52,20 @@ export default {
     this.disposeTrap()
   },
   methods: {
+    ensureFallbackFocusTarget() {
+      const root = this.$el
+
+      if (!root || typeof root.hasAttribute !== 'function') {
+        return root
+      }
+
+      if (!root.hasAttribute('tabindex')) {
+        root.setAttribute('tabindex', '-1')
+        this.addedFallbackTabindex = true
+      }
+
+      return root
+    },
     syncTrapState() {
       if (!this.trap) return
 
@@ -76,22 +81,21 @@ export default {
 
       this.trap.deactivate()
       this.trap = null
+
+      if (this.addedFallbackTabindex && this.$el?.removeAttribute) {
+        this.$el.removeAttribute('tabindex')
+        this.addedFallbackTabindex = false
+      }
     },
   },
-}
-</script>
+  render() {
+    const content = this.$slots.default ? this.$slots.default() : []
 
-<style scoped>
-.asd20-focus-trap {
-  display: flex;
-  flex: 1 1 auto;
-  align-items: stretch;
-  min-width: 0;
-  max-width: 100%;
-  max-height: 100%;
+    if (content.length !== 1) {
+      throw new Error('FocusTrap requires exactly one child')
+    }
 
-  &:focus {
-    outline: none;
-  }
+    return content[0]
+  },
 }
-</style>
+</script>