@asd20/ui-next 2.0.19 → 2.0.20

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.0.19",
+  "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/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>