@asd20/ui-next 2.21.6 → 2.21.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.21.7](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.6...ui-next-v2.21.7) (2026-08-26)
+
+
+### Bug Fixes
+
+* mobile scroll fixes; ios input zoom issue ([56ba4a7](https://github.com/academydistrict20/asd20-ui-next/commit/56ba4a75391744db8a4f43ff74e30b1fa0bd5f75))
+
 ## [2.21.6](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.5...ui-next-v2.21.6) (2026-08-25)
 
 

package/README.md

@@ -87,6 +87,20 @@ npm test
 npm run build
 ```
 
+Optional harnesses are available to facilitate repeatable physical-device
+checks for scrolling, touch, focus, keyboard, and viewport changes:
+
+```sh
+npm run test:mobile:storybook
+npm run test:mobile:package
+```
+
+These commands are manual testing aids. They are not testing, CI, release, or
+package-publishing requirements.
+
+See [Physical Mobile Device Testing](docs/mobile-device-testing.md) for the
+device checklist, packed-consumer workflow, options, and troubleshooting.
+
 Regenerate icon metadata after adding, removing, or renaming SVG icon assets:
 
 ```sh

package/package.json

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

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

@@ -108,8 +108,8 @@ export default {
     border: none;
     border-radius: var(--website-shape__radius-s);
     // outline: 1px solid red;
-    // font-size: space(0.75);
-    font-size: space(0.625);
+    // Keep form text at least 16px so iOS Safari does not zoom the page on focus.
+    font-size: $base-font-size;
     line-height: 1;
     height: space(1.5);
     background: white;

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

@@ -153,6 +153,10 @@ import {
   shouldOpenInNewWindow,
   shouldShowExternalIcon,
 } from '../../../helpers/linkPolicy'
+import {
+  acquireDocumentScrollLock,
+  releaseDocumentScrollLock,
+} from '../../../helpers/documentScrollLock'
 
 export default {
   name: 'Asd20SiteMenu',
@@ -168,6 +172,7 @@ export default {
     focusedItemIndex: -1,
     hasFocus: false,
     keyboardTriggeredLastAction: false,
+    bodyScrollLock: null,
   }),
   computed: {
     activeSection() {
@@ -179,12 +184,43 @@ export default {
       return resolveCurrentHostname(this)
     },
   },
+  watch: {
+    active(newVal) {
+      if (newVal && !this.emptyNav) {
+        this.lockBodyScroll()
+      } else {
+        this.unlockBodyScroll()
+      }
+    },
+    emptyNav(newVal) {
+      if (this.active && !newVal) {
+        this.lockBodyScroll()
+      } else {
+        this.unlockBodyScroll()
+      }
+    },
+  },
   mounted() {
+    if (this.active && !this.emptyNav) {
+      this.lockBodyScroll()
+    }
     if (!this.emptyNav) {
       this.setFocus()
     }
   },
+  beforeUnmount() {
+    this.unlockBodyScroll()
+  },
   methods: {
+    lockBodyScroll() {
+      if (this.bodyScrollLock) return
+      this.bodyScrollLock = acquireDocumentScrollLock()
+    },
+    unlockBodyScroll() {
+      if (!this.bodyScrollLock) return
+      releaseDocumentScrollLock(this.bodyScrollLock)
+      this.bodyScrollLock = null
+    },
     onFocus(event) {
       this.hasFocus = true
       this.focusedSectionIndex = 0
@@ -380,6 +416,7 @@ export default {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  overscroll-behavior: none;
   &:focus {
     // outline: none;
   }
@@ -393,6 +430,8 @@ export default {
   bottom: space(7);
   background: var(--website-menu__open-background-color, white);
   overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
   // overflow-y: scroll !important;
 }
 .asd20-table-of-contents {
@@ -493,8 +532,11 @@ export default {
     }
   }
   .asd20-site-menu__items {
+    flex: 1 1 auto;
+    min-height: 0;
     overflow-y: scroll; /* has to be scroll, not auto */
-    // -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
   }
   .asd20-site-menu__item {
     display: block;

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

@@ -40,7 +40,7 @@
       /> -->
       <asd20-action-menu
         v-show="
-          (menuOpen && (mq === 'sm' || mq === 'md') && isLoaded && !zoomed) ||
+          (menuOpen && (mq === 'sm' || mq === 'md') && isLoaded) ||
             ((mq === 'lg' || mq === 'xl') && isLoaded)
         "
         :items="actionItems"
@@ -54,7 +54,6 @@
       <asd20-site-menu
         v-show="menuOpen"
         ref="siteMenu"
-        :class="zoomed ? 'zoomed' : ''"
         :active="menuOpen"
         :sections="navigation"
         :empty-nav="emptyNav"
@@ -290,11 +289,6 @@ export default {
   &.active::before {
     opacity: 1;
   }
-  .zoomed {
-    & :deep(.asd20-site-menu__viewport) {
-      bottom: 0 !important;
-    }
-  }
 }
 
 @media (min-width: 1024px) {

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

@@ -563,6 +563,10 @@ import queryAiSite from '../../../helpers/queryAiSite'
 import queryFiles from '../../../helpers/queryFiles'
 import queryPeople from '../../../helpers/queryPeople'
 import queryPages, { NO_PAGE_RESULTS_FALLBACKS } from '../../../helpers/queryPages'
+import {
+  acquireDocumentScrollLock,
+  releaseDocumentScrollLock,
+} from '../../../helpers/documentScrollLock'
 
 // Mixins
 import globalPropMixinFactory from '../../../mixins/globalPropMixinFactory.js'
@@ -2162,18 +2166,13 @@ export default {
     },
 
     lockBodyScroll() {
-      if (typeof window === 'undefined' || typeof document === 'undefined') {
-        return
-      }
       if (this.bodyScrollLock) return
-      this.bodyScrollLock = true
+      this.bodyScrollLock = acquireDocumentScrollLock()
     },
 
     unlockBodyScroll() {
-      if (typeof window === 'undefined' || typeof document === 'undefined') {
-        return
-      }
       if (!this.bodyScrollLock) return
+      releaseDocumentScrollLock(this.bodyScrollLock)
       this.bodyScrollLock = null
     },
 
@@ -3601,6 +3600,7 @@ export default {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  overscroll-behavior: none;
 
   /* allow descendants to use flex+overflow scrolling properly (Safari/iOS) */
   min-height: 0;
@@ -3852,6 +3852,8 @@ export default {
     border-radius: 0.5rem;
     padding: space(0.5);
     font: inherit;
+    // Match the iOS-safe minimum used by Asd20SearchField.
+    font-size: $base-font-size;
     color: var(--color__primary);
     background: white;
     box-sizing: border-box;
@@ -4188,11 +4190,6 @@ export default {
   transform: translate3d(0, -0.75rem, 0);
 }
 
-:global(html.asd20-site-search--scroll-locked),
-:global(body.asd20-site-search--scroll-locked) {
-  overscroll-behavior: none;
-}
-
 @media (min-width: 768px) {
   .asd20-site-search {
     .asd20-notificaiton {

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

@@ -117,6 +117,7 @@ export default {
   padding: 0 space(0.75);
   width: 100%;
   overflow-x: auto;
+  overflow-y: hidden;
   scrollbar-width: thin;
 }
 

package/src/helpers/documentScrollLock.js

@@ -0,0 +1,60 @@
+const SCROLL_LOCK_CLASS = 'asd20-document-scroll-locked'
+
+const activeLocks = new Set()
+let originalDocumentStyles = null
+
+export function acquireDocumentScrollLock() {
+  if (typeof document === 'undefined') return null
+
+  const docEl = document.documentElement
+  const body = document.body
+  if (!docEl || !body) return null
+
+  // A primitive token is preserved when stored in Vue reactive component data.
+  const lock = Symbol(SCROLL_LOCK_CLASS)
+
+  if (activeLocks.size === 0) {
+    originalDocumentStyles = {
+      bodyOverflow: body.style.overflow,
+      bodyOverscrollBehavior: body.style.overscrollBehavior,
+      docOverflow: docEl.style.overflow,
+      docOverscrollBehavior: docEl.style.overscrollBehavior,
+      bodyHadLockClass: body.classList.contains(SCROLL_LOCK_CLASS),
+      docHadLockClass: docEl.classList.contains(SCROLL_LOCK_CLASS),
+    }
+
+    body.classList.add(SCROLL_LOCK_CLASS)
+    docEl.classList.add(SCROLL_LOCK_CLASS)
+    body.style.overflow = 'hidden'
+    body.style.overscrollBehavior = 'none'
+    docEl.style.overflow = 'hidden'
+    docEl.style.overscrollBehavior = 'none'
+  }
+
+  activeLocks.add(lock)
+  return lock
+}
+
+export function releaseDocumentScrollLock(lock) {
+  if (!lock || !activeLocks.delete(lock) || activeLocks.size > 0) return
+  if (typeof document === 'undefined' || !originalDocumentStyles) return
+
+  const docEl = document.documentElement
+  const body = document.body
+  if (!docEl || !body) return
+
+  body.style.overflow = originalDocumentStyles.bodyOverflow
+  body.style.overscrollBehavior =
+    originalDocumentStyles.bodyOverscrollBehavior
+  docEl.style.overflow = originalDocumentStyles.docOverflow
+  docEl.style.overscrollBehavior = originalDocumentStyles.docOverscrollBehavior
+
+  if (!originalDocumentStyles.bodyHadLockClass) {
+    body.classList.remove(SCROLL_LOCK_CLASS)
+  }
+  if (!originalDocumentStyles.docHadLockClass) {
+    docEl.classList.remove(SCROLL_LOCK_CLASS)
+  }
+
+  originalDocumentStyles = null
+}